/*
 * Palette and type lifted from docs/mockups/v2.html so this screen does not
 * arrive looking like a different product. Spec §10's modular shell is the
 * eventual home; this is one module of it, built standalone first.
 */
:root{
  --wlk-slate:#4a4f55;
  --wlk-maroon:#9c0f1d;
  --wlk-maroon-dark:#7d0c17;
  --wlk-sand:#eddcbc;
  --wlk-eggshell:#f8f1e4;

  --slate-06:rgba(74,79,85,.06);
  --slate-10:rgba(74,79,85,.10);
  --slate-20:rgba(74,79,85,.20);
  --slate-45:rgba(74,79,85,.45);

  --ok:#2f6b4f;
  --warn:#8a5a10;

  --fw-display:700;
  --fw-label:600;
  --radius:4px;
  --font:'Instrument Sans','Inter','Helvetica Neue',Arial,sans-serif;
  --mono:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

*{box-sizing:border-box;}

/*
 * The HTML `hidden` attribute only gets display:none from the browser's own
 * stylesheet, which ANY author rule outranks. `.btn{display:inline-flex}` and
 * `.signin{display:grid}` were both beating it, so the Google button showed
 * while disabled and the sign-in card would have rendered on top of the app
 * after login. Every hidden/shown element in this app is toggled via .hidden,
 * so this one rule is load-bearing.
 */
[hidden]{display:none !important;}
body{
  margin:0;font-family:var(--font);font-size:14px;line-height:1.5;
  color:var(--wlk-slate);background:var(--wlk-eggshell);
}
h1,h2,h3{margin:0;font-weight:var(--fw-display);letter-spacing:-.01em;}
code{font-family:var(--mono);font-size:.92em;background:var(--slate-06);padding:1px 4px;border-radius:2px;}
.muted{color:var(--slate-45);}
.small{font-size:12px;}

.brand-mark{
  width:30px;height:30px;flex:0 0 30px;display:grid;place-items:center;
  border:1.5px solid var(--wlk-maroon);border-radius:3px;
  color:var(--wlk-maroon);font-weight:var(--fw-display);font-size:14px;
}

/* Buttons -------------------------------------------------------------- */
.btn{
  border:0;border-radius:var(--radius);padding:9px 16px;cursor:pointer;
  font-family:inherit;font-size:10.5px;font-weight:var(--fw-label);
  letter-spacing:.1em;text-transform:uppercase;
  display:inline-flex;align-items:center;gap:8px;
}
.btn-primary{background:var(--wlk-maroon);color:var(--wlk-eggshell);}
.btn-primary:hover{background:var(--wlk-maroon-dark);}
.btn-ghost{background:transparent;color:var(--wlk-slate);border:1px solid var(--slate-20);}
.btn-ghost:hover{background:var(--wlk-slate);color:var(--wlk-eggshell);border-color:var(--wlk-slate);}
.btn-sm{padding:5px 11px;font-size:9.5px;letter-spacing:.09em;}
.btn:disabled{opacity:.45;cursor:not-allowed;}
.btn.full{width:100%;justify-content:center;margin-top:10px;}

/* Sign in -------------------------------------------------------------- */
.signin{min-height:100vh;display:grid;place-items:center;padding:24px;}
.signin-card{
  width:100%;max-width:400px;background:#fff;border:1px solid var(--slate-10);
  border-radius:6px;padding:28px;
}
.signin-brand{display:flex;align-items:center;gap:10px;font-weight:var(--fw-label);
  font-size:11px;letter-spacing:.14em;text-transform:uppercase;margin-bottom:20px;}
.signin-card h1{font-size:22px;margin-bottom:8px;}
.signin-card p{margin:0 0 18px;font-size:13px;}
.stack{display:flex;flex-direction:column;gap:12px;}
.field{display:flex;flex-direction:column;gap:5px;}
.field>span{font-size:10px;font-weight:var(--fw-label);letter-spacing:.11em;text-transform:uppercase;color:var(--slate-45);}
input,select{
  font-family:inherit;font-size:14px;color:var(--wlk-slate);
  padding:9px 10px;border:1px solid var(--slate-20);border-radius:var(--radius);
  background:#fff;width:100%;
}
input:focus,select:focus{outline:2px solid var(--wlk-maroon);outline-offset:-1px;}
.signin-msg{margin-top:16px;font-size:13px;padding:10px 12px;border-radius:var(--radius);
  background:var(--slate-06);border-left:3px solid var(--wlk-maroon);}
.rescue{margin-top:20px;padding-top:16px;border-top:1px solid var(--slate-10);}
.rescue summary{cursor:pointer;font-size:11px;font-weight:var(--fw-label);
  letter-spacing:.08em;text-transform:uppercase;color:var(--slate-45);}
.rescue summary:hover{color:var(--wlk-maroon);}
.rescue p{margin:12px 0;}
.rescue input{font-family:var(--mono);font-size:12px;}
/* A placeholder has to read as a prompt, not as content already entered. */
::placeholder{color:var(--slate-45);opacity:1;font-style:italic;font-family:var(--font);}

/* Shell ---------------------------------------------------------------- */
.shell{max-width:1080px;margin:0 auto;padding:0 20px 64px;}
.topbar{
  display:flex;align-items:center;justify-content:space-between;gap:16px;
  flex-wrap:wrap;padding:20px 0 16px;border-bottom:1px solid var(--slate-10);
  margin-bottom:20px;
}
.topbar-left{display:flex;align-items:center;gap:12px;}
.topbar-left h1{font-size:19px;}
.topbar-right{display:flex;align-items:center;gap:10px;}
.whoami{font-size:12px;color:var(--slate-45);}
.total-pill{
  font-size:10px;font-weight:var(--fw-label);letter-spacing:.08em;
  background:var(--wlk-maroon);color:var(--wlk-eggshell);
  border-radius:9px;padding:2px 9px;text-transform:uppercase;
}

/* Tabs ----------------------------------------------------------------- */
.tabs{display:inline-flex;border:1px solid var(--wlk-slate);border-radius:var(--radius);
  overflow:hidden;margin-bottom:14px;flex-wrap:wrap;}
.tabs button{
  background:transparent;border:0;padding:8px 15px;cursor:pointer;font-family:inherit;
  font-size:10.5px;font-weight:var(--fw-label);letter-spacing:.1em;
  text-transform:uppercase;color:var(--wlk-slate);
}
.tabs button+button{border-left:1px solid var(--wlk-slate);}
.tabs button[aria-selected="true"]{background:var(--wlk-slate);color:var(--wlk-eggshell);}
.tab-count{opacity:.7;margin-left:6px;}
.tab-blurb{font-size:13px;color:var(--slate-45);margin:0 0 18px;max-width:70ch;}

/* Rows ----------------------------------------------------------------- */
.rows{display:flex;flex-direction:column;gap:8px;}
.row{background:#fff;border:1px solid var(--slate-10);border-radius:5px;overflow:hidden;}
.row-head{
  display:flex;align-items:flex-start;gap:12px;width:100%;
  padding:13px 15px;background:transparent;border:0;cursor:pointer;
  font-family:inherit;text-align:left;color:inherit;
}
.row-head:hover{background:var(--slate-06);}
.row[open] .row-head{border-bottom:1px solid var(--slate-10);}
.row-title{font-weight:var(--fw-label);font-size:14px;}
.row-sub{font-size:12.5px;color:var(--slate-45);margin-top:2px;}
.row-main{flex:1;min-width:0;}
.row-age{font-size:11px;color:var(--slate-45);white-space:nowrap;padding-top:2px;}
.chev{color:var(--slate-45);font-size:11px;padding-top:3px;}

.row-body{padding:16px 15px 18px;display:flex;flex-direction:column;gap:16px;}
.ctx{background:var(--slate-06);border-radius:var(--radius);padding:12px 13px;}
.ctx h3{font-size:10px;font-weight:var(--fw-label);letter-spacing:.11em;
  text-transform:uppercase;color:var(--slate-45);margin-bottom:8px;}
.kv{display:grid;grid-template-columns:auto 1fr;gap:3px 14px;font-size:13px;}
.kv dt{color:var(--slate-45);}
.kv dd{margin:0;}
.pair{display:grid;grid-template-columns:1fr 1fr;gap:10px;}
@media (max-width:640px){.pair{grid-template-columns:1fr;}}
.cand{background:#fff;border:1px solid var(--slate-20);border-radius:var(--radius);padding:11px 12px;}
.cand.chosen{border-color:var(--wlk-maroon);border-width:2px;}
.cand h4{margin:0 0 6px;font-size:13.5px;font-weight:var(--fw-label);}
.cand ul{margin:6px 0 0;padding-left:16px;font-size:12px;color:var(--slate-45);}
.actions{display:flex;gap:9px;flex-wrap:wrap;align-items:flex-end;}
.item-list{margin:0;padding-left:17px;font-size:12.5px;}
.item-list li{margin-bottom:3px;}
audio{width:100%;margin-top:8px;}
.err{color:var(--wlk-maroon);font-size:12.5px;font-weight:500;}

.notice{background:#fff;border:1px solid var(--slate-10);border-left:3px solid var(--warn);
  border-radius:5px;padding:18px 20px;margin-bottom:20px;}
.notice h2{font-size:16px;margin-bottom:6px;}
.notice p{margin:0 0 8px;font-size:13px;}
.empty{background:#fff;border:1px dashed var(--slate-20);border-radius:5px;
  padding:28px;text-align:center;color:var(--slate-45);font-size:13.5px;}

.toast{
  position:fixed;left:50%;bottom:26px;transform:translateX(-50%);
  background:var(--wlk-slate);color:var(--wlk-eggshell);
  padding:12px 18px;border-radius:var(--radius);font-size:13px;
  max-width:min(560px,92vw);box-shadow:0 6px 22px rgba(0,0,0,.18);z-index:50;
}
.toast.bad{background:var(--wlk-maroon);}