/*
 * Ku-saga Design System — base and components
 * Requires tokens.css. Uses semantic tokens only.
 */

/* ── Base ─────────────────────────────────────────────── */
*{box-sizing:border-box}
[hidden]{display:none!important}
html{scroll-behavior:smooth}
body{margin:0;background:var(--gradient-page);color:var(--color-text);font:var(--text-base)/var(--leading-body) var(--font-sans)}
button,input,select,textarea{font:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.48}
:focus-visible{outline:var(--focus-ring);outline-offset:var(--focus-offset)}
h1,h2,h3,h4,p{overflow-wrap:anywhere}
h1{margin:0 0 var(--space-6);font-size:var(--text-display);line-height:.98;letter-spacing:var(--tracking-display)}
h1 em{color:var(--color-accent);font-style:normal}
h2{margin:0 0 var(--space-2);font-size:var(--text-2xl);line-height:var(--leading-heading);letter-spacing:var(--tracking-heading)}
h3{margin:0;font-size:var(--text-xl);line-height:1.2;letter-spacing:var(--tracking-heading)}
h4{margin:0;font-size:var(--text-lg)}
code{font-family:var(--font-mono);font-size:.95em;color:var(--color-text-info);overflow-wrap:anywhere}

/* ── Text utilities ───────────────────────────────────── */
.muted{color:var(--color-text-muted)}
.hint{color:var(--color-text-muted);font-size:var(--text-sm);margin:var(--space-3) 0 var(--space-4)}
.lead{color:var(--color-text-soft);font-size:var(--text-lg);max-width:670px;margin:0}
.tabular{font-variant-numeric:tabular-nums}
.text-info{color:var(--color-text-info)}
.text-danger,.error{color:var(--color-danger)}
.text-warning{color:var(--color-warning)}

/* Eyebrow: small uppercase label above a heading */
.eyebrow{margin:0 0 var(--space-2);color:var(--color-brand-blue);font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--tracking-eyebrow);text-transform:uppercase}

/* Brand underline under a display heading */
.brand-underline::after{content:"";display:block;width:86px;height:5px;margin-top:var(--space-5);background:var(--gradient-brand-underline);border-radius:var(--radius-pill)}

/* ── Layout ───────────────────────────────────────────── */
.shell{width:min(var(--layout-max),calc(100% - var(--layout-gutter)));margin:0 auto}
.stack{display:grid;gap:var(--space-2)}
.cluster{display:flex;align-items:center;gap:var(--space-3);flex-wrap:wrap}

/* ── Top bar, brand and navigation ────────────────────── */
.topbar{display:flex;position:relative;align-items:center;justify-content:space-between;gap:var(--space-5);padding:var(--space-5) 0 var(--space-6);border-bottom:1px solid var(--color-border)}
.topbar::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:3px;background:var(--gradient-brand-stripe)}
.brand{display:flex;align-items:center;gap:var(--space-3);min-width:0;color:var(--color-text);text-decoration:none;border-radius:var(--radius-sm)}
.brand-mark{display:block;position:relative;width:52px;height:52px;flex:0 0 52px;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-bg)}
.brand-mark img{display:block;width:60px;height:60px;max-width:none;position:absolute;left:-4px;top:-4px}
.brand-copy strong{display:block;font-size:var(--text-base);font-weight:var(--weight-black);letter-spacing:var(--tracking-wide);text-transform:uppercase;line-height:var(--leading-heading)}
.brand-copy small{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-2xs);font-weight:var(--weight-semibold);white-space:nowrap}
.site-nav{display:flex;align-items:center;gap:var(--space-1);padding:var(--space-1);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md)}
.site-nav a{padding:var(--space-2) var(--space-3);border-radius:var(--radius-sm);color:var(--color-text-muted);font-size:var(--text-sm);font-weight:var(--weight-bold);text-decoration:none;white-space:nowrap}
.site-nav a:hover,.site-nav a.active{background:var(--color-info-surface);color:var(--color-text-info)}
.site-nav a.active{box-shadow:inset 0 -2px 0 var(--color-brand-blue)}
.site-nav a:focus-visible{outline-offset:2px}

/* ── Panel ────────────────────────────────────────────── */
.panel{background:var(--gradient-panel);border:1px solid var(--color-border);border-radius:var(--radius-xl);box-shadow:var(--shadow-panel);padding:var(--space-6)}
.panel.compact{padding:var(--space-5)}
.section-head{display:flex;align-items:end;justify-content:space-between;gap:var(--space-4);margin-bottom:var(--space-5)}
.section-head h2,.section-head h3{margin:0}
.section-head .eyebrow{margin-bottom:var(--space-1)}

/* ── Button ───────────────────────────────────────────── */
.button{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height-md);padding:var(--space-2) var(--space-4);border:1px solid transparent;border-radius:var(--radius-md);font-weight:var(--weight-bold);text-align:center;text-decoration:none;white-space:nowrap;transition:background var(--duration-fast) var(--ease-standard),border-color var(--duration-fast) var(--ease-standard)}
.button.primary{color:var(--color-text-on-accent);background:var(--color-accent);border-color:var(--color-accent)}
.button.primary:hover:not(:disabled){background:var(--color-accent-hover)}
.button.secondary{color:var(--color-text);background:var(--color-surface-hover);border-color:var(--color-border-strong)}
.button.secondary:hover:not(:disabled){background:var(--color-surface-pressed)}
.button.ghost{color:var(--color-text-info);background:transparent;border-color:transparent}
.button.ghost:hover:not(:disabled){background:var(--color-info-surface)}
.button.small{min-height:var(--control-height-sm);padding:var(--space-1) var(--space-3);font-size:var(--text-sm);border-radius:var(--radius-sm)}
.button.block{width:100%}
.button.icon{min-width:var(--control-height-md);padding:0;color:var(--color-text-info);background:var(--color-surface-hover);border-color:var(--color-border-strong);border-radius:var(--radius-sm);font-size:var(--text-xl)}
.button.icon:hover:not(:disabled){background:var(--color-surface-pressed)}

/* ── Form controls ────────────────────────────────────── */
.field-label{display:block;margin:0 0 var(--space-2);font-size:var(--text-md);font-weight:var(--weight-bold)}
.input{width:100%;min-width:0;min-height:var(--control-height-md);padding:var(--space-2) var(--space-3);background:var(--color-surface-sunken);color:var(--color-text);border:1px solid var(--color-border-strong);border-radius:var(--radius-sm);font-variant-numeric:tabular-nums}
.input::placeholder{color:var(--color-text-placeholder)}
.input:focus-visible{outline-offset:2px}
select.input{cursor:pointer}
.input.small{width:auto;min-width:80px;min-height:var(--control-height-sm);padding:var(--space-1) var(--space-2);font-size:var(--text-sm)}
.input-group{display:flex;align-items:stretch;gap:var(--space-2)}
.check{display:flex;align-items:center;gap:var(--space-2);font-size:var(--text-sm);font-weight:var(--weight-semibold)}
.check input,input[type=range]{accent-color:var(--color-accent)}
.check input{width:16px;height:16px}

/* ── Badge ────────────────────────────────────────────── */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);padding:var(--space-1) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-pill);background:var(--color-surface-raised);color:var(--color-text-info);font-size:var(--text-sm);font-weight:var(--weight-bold);white-space:nowrap;font-variant-numeric:tabular-nums}
.badge:empty{display:none}
.badge.info{background:transparent;border-color:var(--color-info-border)}
.badge.accent{background:transparent;border-color:var(--color-accent-border);color:var(--color-accent)}

/* ── Chip: color-coded tag (current color drives border and text) ── */
.chip{display:inline-flex;padding:var(--space-1) var(--space-2);background:var(--color-surface-sunken);border:1px solid currentColor;border-radius:var(--radius-sm);font-size:var(--text-xs);font-weight:var(--weight-bold)}
.region-clock{color:var(--color-region-clock)}
.region-left{color:var(--color-region-left)}
.region-right{color:var(--color-region-right)}

/* ── Meter ────────────────────────────────────────────── */
.meter{height:10px;background:var(--color-surface-sunken);border:1px solid var(--color-border);border-radius:var(--radius-pill);overflow:hidden}
.meter>span{display:block;width:0;height:100%;background:var(--gradient-brand);transition:width var(--duration-base) var(--ease-standard)}

/* ── Notice ───────────────────────────────────────────── */
.notice{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);padding:var(--space-2) var(--space-3);border:1px solid var(--color-border);border-radius:var(--radius-sm);background:var(--color-surface);font-size:var(--text-sm)}
.notice.warning{background:var(--color-warning-surface);border-color:var(--color-warning-border);color:var(--color-warning)}
.notice.info{background:var(--color-info-surface);border-color:var(--color-info-border);color:var(--color-text-info)}
.notice.danger{background:var(--color-danger-surface);border-color:var(--color-danger);color:var(--color-danger)}

/* ── List row: one item in a list (clips, annotations, exports) ── */
.list{display:grid;gap:var(--space-2)}
.list>.muted{margin:0;font-size:var(--text-sm)}
.list-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding:var(--space-3) var(--space-4);border:1px solid var(--color-border);background:var(--color-surface-raised);border-radius:var(--radius-md)}
.list-row strong{display:block;font-size:var(--text-md);overflow-wrap:anywhere}
.list-row small{display:block;margin-top:var(--space-1);color:var(--color-text-muted);font-size:var(--text-xs);overflow-wrap:anywhere}
.list-row .is-failed{color:var(--color-danger)}
.list-row .is-working{color:var(--color-warning)}

/* Selectable variant (recording list) */
.list-row.selectable{display:block;width:100%;background:var(--color-surface);color:var(--color-text);text-align:left}
.list-row.selectable:hover,.list-row.selectable.selected{border-color:var(--color-accent)}
.list-row.selectable.selected{background:var(--color-surface-selected)}
.list-row.selectable strong{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}

/* ── Media stage ──────────────────────────────────────── */
.media{display:block;width:100%;background:var(--color-surface-media);border:1px solid var(--color-border-media);border-radius:var(--radius-md)}

/* ── Disclosure and footer ────────────────────────────── */
details{color:var(--color-text-muted);font-size:var(--text-xs);margin-top:var(--space-4)}
details code{display:block;margin-top:var(--space-2)}
.site-footer{margin-top:var(--space-16);border-top:1px solid var(--color-border);color:var(--color-text-muted);padding:var(--space-6) 0 var(--space-10);font-size:var(--text-sm)}

/* ── Responsive base ──────────────────────────────────── */
@media(max-width:850px){.topbar{flex-wrap:wrap}.site-nav{order:3;width:100%;justify-content:center}.site-nav a{flex:1;text-align:center}}
@media(max-width:650px){
  .shell{width:min(100% - var(--layout-gutter-mobile),var(--layout-max))}
  .topbar{padding:var(--space-4) 0}
  .site-nav a{min-width:0;padding:var(--space-2);white-space:normal;line-height:var(--leading-heading)}
  .brand-mark{width:46px;height:46px;flex-basis:46px}
  .brand-mark img{width:54px;height:54px}
  .brand-copy strong{font-size:var(--text-md)}
  .brand-copy small{font-size:10px}
  .topbar .badge{font-size:var(--text-2xs);padding:var(--space-1) var(--space-2)}
  .lead{font-size:var(--text-base)}
  .panel{padding:var(--space-4)}
  .list-row{align-items:start;flex-direction:column}
  .list-row .button{width:100%}
  .input-group{flex-wrap:wrap}
  .input-group>.input{flex:1 1 160px}
}