/* J B Autocare — prototype styles. Implements spec/06-style/style-guide.md */
:root{
  --bg:#f6f7f9; --surface:#fff; --surface-2:#eef1f5; --ink:#161a20; --ink-2:#5b6572;
  --line:#dde2e9; --brand:#b32218; --accent:#0b6ea8; --ok:#1c7a4a; --warn:#a86a08;
  --stop:#a3231b; --opp:#6b4bb8; --shadow:0 1px 2px rgba(16,20,26,.06),0 2px 8px rgba(16,20,26,.04);
  --r:8px;
}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){
  --bg:#12151a; --surface:#1a1f27; --surface-2:#232935; --ink:#e8ecf2; --ink-2:#98a3b3;
  --line:#2c3441; --brand:#e3453a; --accent:#4aa8dd; --ok:#3fbb7d; --warn:#e0a13c;
  --stop:#e35b52; --opp:#a58ae8; --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
}}
:root[data-theme="dark"]{
  --bg:#12151a; --surface:#1a1f27; --surface-2:#232935; --ink:#e8ecf2; --ink-2:#98a3b3;
  --line:#2c3441; --brand:#e3453a; --accent:#4aa8dd; --ok:#3fbb7d; --warn:#e0a13c;
  --stop:#e35b52; --opp:#a58ae8; --shadow:0 1px 2px rgba(0,0,0,.4),0 2px 10px rgba(0,0,0,.3);
}
*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--ink);
  font:15px/1.5 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:var(--accent);text-decoration:none}
a:hover{text-decoration:underline}
h1,h2,h3{line-height:1.25;margin:0 0 .5rem}
h1{font-size:1.5rem;letter-spacing:-.01em}
h2{font-size:1.1rem;margin-top:1.75rem}
h3{font-size:.95rem}
p{margin:.5rem 0}
code{font:13px/1.4 ui-monospace,Menlo,Consolas,monospace;background:var(--surface-2);
  padding:.1em .35em;border-radius:4px}

/* ---- chrome ---- */
.top{background:var(--brand);color:#fff;padding:.6rem 1rem;display:flex;
  align-items:center;gap:.75rem;flex-wrap:wrap;position:sticky;top:0;z-index:20}
.top a{color:#fff}
.brandmark{font-weight:700;letter-spacing:.02em;font-size:1rem}
.brandmark small{opacity:.75;font-weight:400;margin-left:.4rem}
.top .spacer{flex:1}
.top .who{font-size:.8rem;opacity:.9}
.wrap{display:flex;align-items:flex-start;gap:0;min-height:calc(100vh - 49px)}
nav.side{width:236px;flex:0 0 236px;background:var(--surface);border-right:1px solid var(--line);
  padding:.75rem .5rem 2rem;position:sticky;top:49px;max-height:calc(100vh - 49px);overflow-y:auto}
nav.side .grp{font-size:.68rem;text-transform:uppercase;letter-spacing:.09em;color:var(--ink-2);
  padding:.9rem .6rem .3rem;font-weight:600}
nav.side a{display:flex;align-items:center;gap:.4rem;padding:.36rem .6rem;border-radius:6px;
  color:var(--ink);font-size:.875rem}
nav.side a:hover{background:var(--surface-2);text-decoration:none}
nav.side a.on{background:var(--surface-2);font-weight:600;box-shadow:inset 2px 0 0 var(--brand)}
nav.side a .n{margin-left:auto;background:var(--brand);color:#fff;font-size:.7rem;
  min-width:1.25rem;text-align:center;border-radius:999px;padding:.05rem .3rem;font-weight:700}
main{flex:1;padding:1.25rem 1.5rem 4rem;min-width:0;max-width:1100px}

/* ---- markers ---- */
.opp-tag,.ext-tag,.pkg-tag{display:inline-block;font-size:.62rem;font-weight:700;
  letter-spacing:.07em;padding:.14rem .4rem;border-radius:4px;vertical-align:middle;
  text-transform:uppercase;white-space:nowrap}
.opp-tag{background:color-mix(in srgb,var(--opp) 16%,transparent);color:var(--opp);
  border:1px solid color-mix(in srgb,var(--opp) 35%,transparent)}
.ext-tag{background:color-mix(in srgb,var(--accent) 14%,transparent);color:var(--accent);
  border:1px solid color-mix(in srgb,var(--accent) 32%,transparent)}
.pkg-tag{background:var(--surface-2);color:var(--ink-2);border:1px solid var(--line)}
nav.side .opp-tag,nav.side .ext-tag{font-size:.55rem;padding:.08rem .28rem;margin-left:auto}

.provenance{border-left:3px solid var(--opp);background:color-mix(in srgb,var(--opp) 7%,transparent);
  padding:.7rem .9rem;border-radius:0 var(--r) var(--r) 0;margin:0 0 1.25rem;font-size:.875rem}
.provenance.req{border-left-color:var(--ok);background:color-mix(in srgb,var(--ok) 7%,transparent)}
.provenance.ext{border-left-color:var(--accent);background:color-mix(in srgb,var(--accent) 7%,transparent)}
.provenance strong{display:block;margin-bottom:.15rem}

/* ---- cards, rows ---- */
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);
  box-shadow:var(--shadow);margin:0 0 1rem;overflow:hidden}
.card>h2,.card>h3{margin:0;padding:.7rem .9rem;border-bottom:1px solid var(--line);
  background:var(--surface-2);font-size:.82rem;text-transform:uppercase;letter-spacing:.06em;
  color:var(--ink-2)}
.card .body{padding:.9rem}
.queue-row{display:flex;gap:.85rem;align-items:center;padding:.7rem .9rem;
  border-bottom:1px solid var(--line);flex-wrap:wrap}
.queue-row:last-child{border-bottom:0}
.queue-row .who{font-weight:600;min-width:9.5rem}
.queue-row .what{color:var(--ink-2);font-size:.875rem;flex:1;min-width:12rem}
.queue-row .act{margin-left:auto;display:flex;gap:.4rem}
.stack{display:flex;flex-direction:column;gap:.12rem}
.sub{font-size:.79rem;color:var(--ink-2)}

.badge{display:inline-block;font-size:.7rem;font-weight:600;padding:.15rem .45rem;
  border-radius:999px;background:var(--surface-2);color:var(--ink-2);white-space:nowrap}
.badge--ok{background:color-mix(in srgb,var(--ok) 15%,transparent);color:var(--ok)}
.badge--warn{background:color-mix(in srgb,var(--warn) 17%,transparent);color:var(--warn)}
.badge--stop{background:color-mix(in srgb,var(--stop) 15%,transparent);color:var(--stop)}
.badge--opp{background:color-mix(in srgb,var(--opp) 15%,transparent);color:var(--opp)}

.range{font-variant-numeric:tabular-nums;font-weight:700;white-space:nowrap}
.range .note{display:block;font-weight:400;font-size:.72rem;color:var(--ink-2)}

.btn{display:inline-block;border:1px solid var(--line);background:var(--surface);
  color:var(--ink);padding:.36rem .7rem;border-radius:6px;font-size:.82rem;font-weight:600;
  cursor:pointer;font-family:inherit}
.btn:hover{background:var(--surface-2);text-decoration:none}
.btn--primary{background:var(--brand);border-color:var(--brand);color:#fff}
.btn--primary:hover{filter:brightness(1.08);background:var(--brand)}
.btn--ghost{background:transparent}
.btn[disabled],.btn.is-disabled{opacity:.5;cursor:not-allowed}

table{width:100%;border-collapse:collapse;font-size:.875rem}
.scroll-x{overflow-x:auto;-webkit-overflow-scrolling:touch}
th{text-align:left;font-size:.7rem;text-transform:uppercase;letter-spacing:.07em;
  color:var(--ink-2);padding:.5rem .6rem;background:var(--surface-2);border-bottom:1px solid var(--line);
  white-space:nowrap}
td{padding:.55rem .6rem;border-bottom:1px solid var(--line);vertical-align:top}
tr:last-child td{border-bottom:0}
td.num{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap}

.approve-bar{position:sticky;bottom:0;background:var(--surface);border-top:2px solid var(--brand);
  padding:.7rem .9rem;display:flex;gap:.5rem;align-items:center;flex-wrap:wrap;
  box-shadow:0 -2px 10px rgba(16,20,26,.07);margin-top:1.25rem;border-radius:0 0 var(--r) var(--r)}
.approve-bar .why{font-size:.79rem;color:var(--ink-2);flex:1;min-width:14rem}

.photo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(120px,1fr));gap:.5rem}
.photo{aspect-ratio:4/3;background:var(--surface-2);border:1px solid var(--line);
  border-radius:6px;display:flex;align-items:center;justify-content:center;
  color:var(--ink-2);font-size:.72rem;text-align:center;padding:.4rem}
.disclosure-block{border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.disclosure-block .d{display:flex;gap:.6rem;padding:.5rem .7rem;border-bottom:1px solid var(--line);
  font-size:.85rem;align-items:center}
.disclosure-block .d:last-child{border-bottom:0}
.disclosure-block .d .lbl{flex:1}
.msg{background:var(--surface-2);border:1px solid var(--line);border-radius:var(--r);
  padding:.85rem;font-size:.9rem;white-space:pre-wrap}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:1rem}
.kv{display:flex;gap:.5rem;padding:.3rem 0;font-size:.875rem;border-bottom:1px solid var(--line)}
.kv:last-child{border-bottom:0}
.kv .k{color:var(--ink-2);min-width:8rem}
.field{margin:0 0 .8rem}
.field label{display:block;font-size:.78rem;font-weight:600;color:var(--ink-2);margin-bottom:.2rem}
.field input,.field select,.field textarea{width:100%;padding:.45rem .55rem;border:1px solid var(--line);
  border-radius:6px;background:var(--surface);color:var(--ink);font:inherit;font-size:.875rem}
.note{font-size:.8rem;color:var(--ink-2);margin:.5rem 0}
.foot{margin-top:2.5rem;padding-top:1rem;border-top:1px solid var(--line);
  font-size:.78rem;color:var(--ink-2)}
@media(max-width:820px){
  .wrap{flex-direction:column}
  nav.side{width:100%;flex:auto;position:static;max-height:none;border-right:0;
    border-bottom:1px solid var(--line);display:flex;flex-wrap:wrap;gap:.2rem}
  nav.side .grp{width:100%;padding:.5rem .6rem .2rem}
  main{padding:1rem}
}