/* Verona Shelters corporate identity. Token values are the same ones the
   VSGCPQ app ships (--vs-*); do not re-pick them here. */
@font-face {
  font-family:"Mona Sans";
  src:url("/static/fonts/mona-sans.woff2") format("woff2-variations");
  font-weight:200 900; font-display:swap;
}
:root {
  --vs-blue:#0a2367; --vs-blue-light:#1760c4; --vs-cool:#edf1f4;
  --vs-dark:#262324; --vs-gold:#c79761;

  --paper:#ffffff; --surface:var(--vs-cool); --ink:var(--vs-dark);
  --muted:#5b6577; --accent:var(--vs-blue); --line:#d8dde6;
  --on-accent:#ffffff; --danger:#b91c1c; --ok:#16a34a;
  --danger-bg:#b91c1c; --danger-fg:#ffffff;
  --radius:10px;
}
@media (prefers-color-scheme: dark) {
  :root { --paper:#17181c; --surface:#1f2128; --ink:var(--vs-cool);
          --muted:#9aa5b8; --accent:#7ea9ea; --line:#2a2d36;
          --on-accent:#0d1117; --danger:#f4a6a6; --ok:#4ade80;
          --danger-bg:#7f1d1d; --danger-fg:#fee2e2; }
}
*, *::before, *::after { box-sizing:border-box; }
body { background:var(--paper); color:var(--ink);
  font-family:"Mona Sans",ui-sans-serif,system-ui,-apple-system,
              BlinkMacSystemFont,"Segoe UI",sans-serif; margin:0; }
.wrap { max-width:44rem; margin:0 auto; padding:2rem 1rem; }
.muted { color:var(--muted); }
.error { color:var(--danger); }

/* Type & links ---------------------------------------------------------- */
h1 { font-size:1.6rem; font-weight:600; letter-spacing:-0.015em; margin:0 0 0.25rem; }
h2 { font-size:1.05rem; font-weight:600; margin:2rem 0 0.75rem; }
p { line-height:1.55; margin:0 0 0.75rem; }
a { color:var(--accent); text-decoration:none; }
a:hover { text-decoration:underline; }
a:focus-visible, button:focus-visible, input:focus-visible {
  outline:2px solid var(--accent); outline-offset:2px; }
.small { font-size:0.85rem; }

/* Header ------------------------------------------------------------------ */
.topbar { display:flex; justify-content:space-between; align-items:center; margin-bottom:2rem; }
.brand { display:flex; align-items:center; gap:0.55rem; font-weight:600;
         font-size:1.05rem; letter-spacing:-0.01em; }
/* Inline SVG so the mark inherits currentColor and flips with the theme.
   An <img>-referenced SVG cannot — it has no colour context. */
.brand .logomark { display:block; height:1.6rem; width:auto; color:var(--accent); }
.brand span { color:var(--muted); font-weight:400; }
.brand strong { color:var(--ink); font-weight:600; }

/* Cards --------------------------------------------------------------------- */
.card { background:var(--surface); border:1px solid var(--line);
        border-radius:var(--radius); padding:1.1rem 1.35rem; margin:1rem 0; }
.error-card p { color:var(--danger); }

/* Buttons & fields ----------------------------------------------------------------------- */
button, .button { background:var(--accent); color:var(--on-accent); border:0; border-radius:var(--radius);
        padding:0.55rem 1.1rem; font-size:0.95rem; font-weight:500; cursor:pointer;
        display:inline-block; transition:opacity 0.12s ease; }
button:hover, .button:hover { opacity:0.9; text-decoration:none; }
button.ghost { background:transparent; color:var(--muted); padding:0.4rem 0.5rem; }
button.ghost:hover { color:var(--ink); opacity:1; }
button.danger { background:var(--danger-bg); color:var(--danger-fg); }
input[type=text], input[type=email], input[type=password], input[type=file] {
  border:1px solid var(--line); border-radius:var(--radius); padding:0.5rem 0.75rem;
  background:var(--paper); color:var(--ink); width:100%; margin:0.25rem 0 0.75rem; font:inherit; }
label { display:block; font-size:0.9rem; margin-bottom:0.75rem; }
.login-card { max-width:20rem; margin:4rem auto; text-align:center; }
.login-card form { text-align:left; }
.login-logo { display:block; margin:0 auto 1.5rem; color:var(--accent); }
.login-logo .logo { height:2.25rem; width:auto; display:block; margin:0 auto; }
.login-card h1 { font-size:1.25rem; }
.actions { display:flex; gap:1rem; margin:2rem 0; align-items:center; }

/* Upload form ------------------------------------------------------------------ */
/* Specificity ties with the generic input rule above are broken by source
   order — these declarations must stay below it to win. */
.upload form { display:flex; gap:0.75rem; flex-wrap:wrap; align-items:center; }
.upload input { width:auto; margin:0; }
.upload input[type=text] { flex:1; min-width:10rem; }

/* Meeting list -------------------------------------------------------------------- */
.meetings { margin:0.5rem 0 2rem; }
.meeting-row { display:flex; gap:1rem; align-items:center; padding:0.85rem 0.6rem;
               border-bottom:1px solid var(--line); color:var(--ink);
               transition:background-color 0.12s ease; }
.meeting-row:first-child { border-top:1px solid var(--line); }
.meeting-row:hover, .meeting-row:focus-visible {
  background:color-mix(in srgb, var(--paper) 94%, var(--accent)); text-decoration:none; }
.meeting-row .title { flex:1; font-weight:500; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.meeting-row .meta { white-space:nowrap; font-size:0.85rem; }

/* Status chips ---------------------------------------------------------------------- */
.chip { font-size:0.72rem; font-weight:600; letter-spacing:0.01em; padding:0.2rem 0.65rem;
        border-radius:99px; border:1px solid var(--line); color:var(--muted); white-space:nowrap; }
.chip-ready { color:var(--ok); border-color:var(--ok); }
.chip-failed { color:var(--danger); border-color:var(--danger); }
.chip-transcribing, .chip-summarizing, .chip-uploaded { color:var(--accent); border-color:var(--accent); }

/* Transcript -------------------------------------------------------------------------- */
.transcript p { display:flex; gap:0.6rem; align-items:baseline; }
.ts { font-family:ui-monospace,SFMono-Regular,Menlo,monospace; font-size:0.8rem;
      color:var(--muted); flex-shrink:0; }

/* Summary ------------------------------------------------------------------------------------ */
.summary .ai-label { border-bottom:1px solid var(--line); padding-bottom:0.6rem; margin-bottom:0.85rem; }
.summary h2:first-of-type { margin-top:0; }
ul.tasks { list-style:none; padding-left:0.25rem; }
ul.tasks li { display:flex; align-items:baseline; gap:0.5rem; }

/* Footer ---------------------------------------------------------------------------------------- */
footer { margin-top:3rem; border-top:1px solid var(--line); padding-top:1rem; }

@media (prefers-reduced-motion: reduce) {
  .meeting-row, button, .button { transition:none; }
}

@media (max-width: 30rem) {
  .meeting-row { flex-wrap:wrap; }
  .meeting-row .meta { order:3; flex-basis:100%; }
}

/* Sub-nav ----------------------------------------------------------------- */
.subnav { display:flex; gap:1rem; align-items:center; margin-bottom:1rem; }
.subnav .button { margin-left:auto; }
.kind { min-width:4.5rem; }

/* Memo composer ------------------------------------------------------------ */
textarea { width:100%; border:1px solid var(--line); border-radius:var(--radius);
  padding:0.75rem; background:var(--paper); color:var(--ink); font:inherit;
  line-height:1.5; margin:0.25rem 0 0.75rem; }

/* To-dos -------------------------------------------------------------------- */
.todo-add { display:flex; gap:0.5rem; margin:1rem 0 2rem; }
.todo-add input { margin:0; }
.todo-list { list-style:none; padding:0; }
.todo-list li { display:flex; align-items:center; gap:0.75rem;
  padding:0.5rem 0; border-bottom:1px solid var(--line); }
.todo-list .text { flex:1; }
.todo-list form { display:inline; }
button.checkbox { background:transparent; color:var(--accent);
  font-size:1.1rem; padding:0 0.25rem; }
.todo-list.done .text { text-decoration:line-through; }

/* Suggested to-dos ------------------------------------------------------------ */
.suggestion-list { list-style:none; padding:0; }
.suggestion-list li { display:flex; align-items:center; gap:0.75rem;
  padding:0.5rem 0; border-top:1px solid var(--line); }
.suggestion-list .text { flex:1; }