/* Timberbay basstilar. Opt-in: att bara importera filen ändrar ingenting.
   Elementregler gäller under :where(.tb-app) (specificitet 0), så appens egna regler vinner.
   Samma utseende finns som .tb-klasser för användning utan scope.
   Portad från TimberbayLive/css/style.css. Kräver tokens.css. */

:where(.tb-app){font-family:"Archivo",system-ui,-apple-system,"Segoe UI",sans-serif;font-size:15px;color:var(--text)}

/* Knappar */
:where(.tb-app button),:where(.tb-app .filebtn),.tb-btn{font:inherit;font-size:14px;color:var(--text);background:rgba(255,255,255,.06);
  border:1px solid var(--line);border-radius:10px;padding:8px 13px;cursor:pointer;white-space:nowrap}
:where(.tb-app button:hover),:where(.tb-app .filebtn:hover),.tb-btn:hover{background:rgba(255,255,255,.12)}
:where(.tb-app button:focus-visible),:where(.tb-app .filebtn:focus-within),:where(.tb-app input:focus-visible),
.tb-btn:focus-visible,.tb-input:focus-visible,.tb-select:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
:where(.tb-app button[aria-pressed="true"]),.tb-btn[aria-pressed="true"],.tb-btn.primary{background:var(--accent);color:var(--accent-ink);border-color:transparent;font-weight:600}
.tb-btn.primary:hover{background:var(--accent)}
:where(.tb-app .filebtn input){position:absolute;width:1px;height:1px;opacity:0}
:where(.tb-app .filebtn){position:relative;display:inline-block}

/* Runda ikonknappar */
:where(.tb-app button.icon),.tb-icon-btn{width:38px;height:38px;padding:0;border-radius:50%;font-size:16px;flex:none}

/* Pill */
:where(.tb-app .pill),.tb-pill{background:#1f2031;border-radius:999px;padding:5px 12px;font-size:13px;color:var(--dim);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:28ch}
:where(.tb-app .pill:empty),.tb-pill:empty{display:none}
:where(.tb-app .pill.bad),.tb-pill.bad{color:var(--warn)}

/* Layout och reglage */
:where(.tb-app .row){display:flex;gap:8px;flex-wrap:wrap;align-items:center}
:where(.tb-app label.sl){display:grid;grid-template-columns:120px 1fr;align-items:center;gap:10px;font-size:13px;color:var(--dim)}
:where(.tb-app input[type=range]){width:100%;accent-color:var(--accent)}
:where(.tb-app .chk){font-size:13px;color:var(--dim);display:flex;gap:8px;align-items:center}
:where(.tb-app .chk input){accent-color:var(--accent)}

/* Select och textfält */
:where(.tb-app select),.tb-select{font:inherit;font-size:14px;color:var(--text);background:var(--input);border:1px solid var(--line);border-radius:10px;padding:7px 9px;min-width:0;width:100%}
/* Textfält: ny, Live saknar stil för dem */
.tb-input{font:inherit;font-size:14px;color:var(--text);background:var(--input);border:1px solid var(--line);border-radius:10px;padding:7px 9px;min-width:0}

/* Text */
:where(.tb-app kbd){font-family:inherit;border:1px solid var(--line);border-radius:4px;padding:0 5px;color:var(--text)}
:where(.tb-app h3.sub){margin:8px 0 0;font-size:12px;letter-spacing:.12em;text-transform:uppercase;color:var(--dim)}
:where(.tb-app .note),.tb-note{font-size:12px;color:var(--dim)}
:where(.tb-app ul.plain),:where(.tb-app ol.plain){list-style:none;margin:0;padding:0;font-size:13px}