/* Shared SNACC theme for Scribe and JustCall, matching snacc.tech: graphite + orange, Instrument Sans / Source Serif 4
   (self-hosted, OFL). Each app serves this folder at shared/; page-specific styles stay in the page. */
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Instrument Sans';font-style:normal;font-weight:400 700;font-display:swap;src:url(fonts/instrument-sans-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-latin-ext.woff2) format('woff2');unicode-range:U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C4, U+2113, U+2C60-2C7F, U+A720-A7FF}
@font-face{font-family:'Source Serif 4';font-style:normal;font-weight:400 600;font-display:swap;src:url(fonts/source-serif-4-latin.woff2) format('woff2');unicode-range:U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD}

:root{
  color-scheme:light;
  --bg:#f4f4f3; --surface:#ffffff; --ink:#24272c; --muted:#636871; --line:#dcdddf;
  --graphite:#2b2e33; --on-graphite:#f1f1f0; --graphite-muted:#a9adb4;
  --orange:#b04c10; --orange-ink:#ffffff; --orange-hi:#f07a35; --orange-hi-ink:#17191c; --orange-soft:#fbe9dd;
  --ok:#2f7d55; --warn:#9e6714; --bad:#b5432c; --on-status:#ffffff;
  /* speaker colours: orange first, then hues that stay distinct from it on both themes */
  --spk1:#b04c10; --spk2:#2f6db5; --spk3:#2f7d55; --spk4:#8a4fbf; --spk5:#0e7c86; --spk6:#b5432c; --spk7:#8a6d1f; --spk8:#5b6470;
  --sans:"Instrument Sans", "Segoe UI", Helvetica, Arial, sans-serif;
  --serif:"Source Serif 4", Georgia, "Times New Roman", serif;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme:dark;
    --bg:#17191c; --surface:#1f2226; --ink:#e8e9ea; --muted:#a2a7ae; --line:#31353b;
    --graphite:#0f1113; --on-graphite:#eeeeed; --graphite-muted:#9da1a8;
    --orange:#f07a35; --orange-ink:#17191c; --orange-hi:#f07a35; --orange-hi-ink:#17191c; --orange-soft:#3a2518; --ok:#5cbf8a; --warn:#e0a74a; --bad:#ec7a62; --on-status:#17191c;
    --spk1:#f07a35; --spk2:#6fa3e8; --spk3:#5cbf8a; --spk4:#b48be0; --spk5:#4fbfc9; --spk6:#ec7a62; --spk7:#d6b85a; --spk8:#a2a7ae;
  }
}
:root[data-theme="dark"]{
  color-scheme:dark;
  --bg:#17191c; --surface:#1f2226; --ink:#e8e9ea; --muted:#a2a7ae; --line:#31353b;
  --graphite:#0f1113; --on-graphite:#eeeeed; --graphite-muted:#9da1a8;
  --orange:#f07a35; --orange-ink:#17191c; --orange-hi:#f07a35; --orange-hi-ink:#17191c; --orange-soft:#3a2518; --ok:#5cbf8a; --warn:#e0a74a; --bad:#ec7a62; --on-status:#17191c;
    --spk1:#f07a35; --spk2:#6fa3e8; --spk3:#5cbf8a; --spk4:#b48be0; --spk5:#4fbfc9; --spk6:#ec7a62; --spk7:#d6b85a; --spk8:#a2a7ae;
}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);font-size:16px;line-height:1.5}
h1,h2,h3{margin:0;line-height:1.15;letter-spacing:-.015em}
a{color:var(--orange)}
:focus-visible{outline:2px solid var(--orange);outline-offset:3px}
.eyebrow{font-size:12.5px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:var(--orange)}
.serif{font-family:var(--serif)}

/* Graphite header band (and any .band under it); orange switches to the lighter tone there, as on snacc.tech */
header,.band{background:var(--graphite);color:var(--on-graphite);--orange:var(--orange-hi);--orange-ink:var(--orange-hi-ink)}
header{border-bottom:1px solid rgba(255,255,255,.08)}
header.sticky{position:sticky;top:0;z-index:6}
header .wrap{display:flex;justify-content:space-between;align-items:center;gap:16px;padding-block:14px}
.wrap{max-width:1040px;margin:0 auto;padding-inline:24px}
@media (max-width:520px){.wrap{padding-inline:16px}}
.logo{flex:none;display:flex;align-items:center;gap:10px;color:var(--on-graphite);text-decoration:none;font-weight:700;font-size:18px;letter-spacing:.01em}
.logo svg{width:22px;height:22px;display:block;flex:none}
.logo .mark{fill:var(--orange)}
.logo span{font-weight:500;color:var(--graphite-muted)}
.hdr-right{display:flex;align-items:center;gap:22px;min-width:0;font-size:14px}
.hdr-user{color:var(--on-graphite);font-weight:600}
@media (max-width:520px){.hdr-user{display:none}.hdr-right{gap:14px}}
/* Header status: dot + label, using the dark-mode status tones, which read well on graphite */
.pill{display:inline-flex;align-items:center;gap:8px;font-size:14px;color:var(--graphite-muted);min-width:0}
.pill::before{content:"";width:8px;height:8px;border-radius:50%;background:var(--graphite-muted);flex:none}
.pill.ok::before{background:#5cbf8a}
.pill.warn::before{background:#e0a74a}
.pill.bad::before{background:#ec7a62}
.pill.bad{color:#ec7a62}
/* phones: the dot alone shows the state (the label stays available to screen readers) */
@media (max-width:400px){.pill{font-size:0;gap:0}}
.signout{font:inherit;font-size:14px;background:none;border:0;padding:0;color:var(--graphite-muted);cursor:pointer;text-decoration:none;white-space:nowrap}
.signout:hover{color:var(--on-graphite)}

footer{background:var(--graphite);color:var(--graphite-muted);font-size:14px}
footer .wrap{display:flex;justify-content:space-between;flex-wrap:wrap;gap:12px;padding-block:24px}

/* Cards: a head row (eyebrow + title, optional actions) over a body */
.card{background:var(--surface);border:1px solid var(--line);border-radius:4px;min-width:0}
.card-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px 24px;padding:20px 24px;border-bottom:1px solid var(--line)}
.card-head h2{font-size:22px;font-weight:600;margin-top:6px;overflow-wrap:anywhere}
.card-body{padding:24px}
@media (max-width:520px){.card-head,.card-body{padding-inline:18px}}
.empty-note{font-family:var(--serif);font-size:17px;color:var(--muted)}

/* Segmented control (aria-pressed buttons) */
.seg-ctl{display:inline-flex;border:1px solid var(--line);border-radius:3px;overflow:hidden;flex-wrap:wrap}
.seg-ctl button{font:inherit;font-size:14px;font-weight:600;padding:8px 14px;background:var(--surface);color:var(--muted);border:0;border-right:1px solid var(--line);cursor:pointer}
.seg-ctl button:last-child{border-right:0}
.seg-ctl button[aria-pressed="true"]{background:var(--graphite);color:var(--on-graphite)}

/* Buttons: orange primary, outlined secondary */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;font:inherit;font-weight:600;font-size:15px;text-decoration:none;padding:11px 20px;border-radius:3px;border:1px solid var(--orange);background:var(--orange);color:var(--orange-ink);cursor:pointer}
.btn:hover{filter:brightness(1.07)}
.btn:disabled{opacity:.45;cursor:default;filter:none}
.btn.ghost{background:transparent;color:var(--ink);border-color:var(--line)}
.btn.ghost:hover{border-color:var(--orange);filter:none}
.btn.danger{background:var(--bad);border-color:var(--bad);color:var(--on-status)}
.btn.sm{font-size:13.5px;padding:7px 12px}
.check{display:inline-flex;align-items:center;gap:6px;font-size:14px;font-weight:600;color:var(--muted);cursor:pointer}
.check input{accent-color:var(--orange);margin:0}

input[type=text],input[type=password],input[type=tel],input:not([type]){font:inherit;font-size:16px;padding:11px 13px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);width:100%}
select,textarea{font:inherit;font-size:15px;padding:9px 11px;border:1px solid var(--line);border-radius:3px;background:var(--bg);color:var(--ink);width:100%}
textarea{resize:vertical;min-height:96px;line-height:1.45}
input:focus-visible,select:focus-visible,textarea:focus-visible{outline:2px solid var(--orange);outline-offset:0;border-color:transparent}
audio{color-scheme:inherit}