/* TireTally — phone-first used tire inventory. Ink navy with tire-marker yellow. */
:root{
  --navy:#14202b; --sky:#8db6cc; --red:#c8372d; --accent:#f2b200; --on-accent:#14202b;
  --bg:#f3f5f7; --card:#ffffff; --fg:#14202c; --muted:#5b6b7a; --line:#d9e1e8; --soft:#e8f1f6;
  --ok:#1f8a55; --warn:#b7791f; --warn-bg:#fdf3e1; --ok-bg:#e5f4ec; --red-bg:#fbe9ea;
  --bar:#14202b; --primary:#14202b; --on-primary:#ffffff;
  --display:"Oswald","Arial Narrow",Arial,sans-serif;
  --body:"Barlow","Segoe UI",Arial,sans-serif;
  --mono:"JetBrains Mono",ui-monospace,Menlo,Consolas,monospace;
  color-scheme:light;
}
@media (prefers-color-scheme:dark){:root{
  --bg:#0e1823; --card:#152331; --fg:#e7eef4; --muted:#9aaebf; --line:#2a3d50; --soft:#1b3044;
  --ok:#4cc488; --warn:#e8b04c; --warn-bg:#3a2e14; --ok-bg:#163527; --red-bg:#3c1a1d;
  --bar:#0a131c; --sky:#7fb6d0; --primary:#7fb6d0; --on-primary:#0a131c; color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--bg);color:var(--fg);font:16px/1.45 var(--body)}
[hidden]{display:none!important}
img{max-width:100%}
body::before{content:"";position:fixed;inset:0 0 auto;height:env(safe-area-inset-top,0px);z-index:10;background:var(--bar)}

.bar{position:sticky;top:env(safe-area-inset-top,0px);z-index:5;background:var(--bar);color:#fff;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px 0}
.bar-in,.main{max-width:760px;margin:0 auto}
.bar-top{display:flex;align-items:center;justify-content:space-between;gap:12px}
.brand{font:600 20px/1.1 var(--display);letter-spacing:.02em;text-transform:uppercase}
.brand small{display:block;font:500 12px/1.3 var(--body);letter-spacing:.06em;color:var(--sky)}
.count{font:600 13px var(--body);background:rgba(255,255,255,.1);padding:6px 10px;border-radius:6px;white-space:nowrap}
.tabs{display:flex;gap:4px;margin-top:10px}
.tabs a{flex:1;text-align:center;text-decoration:none;color:#c9d6e1;font:600 15px var(--display);letter-spacing:.06em;text-transform:uppercase;
  padding:12px 6px;border-bottom:3px solid transparent}
.tabs a[aria-current="page"]{color:#fff;border-bottom-color:var(--accent)}

.main{padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:16px 120px;display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:16px;display:flex;flex-direction:column;gap:14px;min-width:0}
h2{font:600 18px/1.2 var(--display);letter-spacing:.04em;text-transform:uppercase;margin:0;text-wrap:balance}
.step{display:flex;align-items:baseline;gap:10px}
.step b{font:700 13px var(--mono);color:var(--red)}
.hint{color:var(--muted);font-size:14px;margin:0}

.shots{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.shot{position:relative;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:6px;aspect-ratio:3/4;max-width:100%;
  border:2px dashed var(--line);border-radius:10px;background:var(--soft);color:var(--muted);text-align:center;padding:8px;cursor:pointer;overflow:hidden}
.shot:focus-within{outline:3px solid var(--sky);outline-offset:2px}
.shot input{position:absolute;inset:0;opacity:0;cursor:pointer}
.shot img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.shot .lbl{font:600 13px/1.2 var(--body);color:var(--fg);position:relative}
.shot .sub{font-size:12px;position:relative}
.shot.has{border-style:solid;border-color:var(--sky)}
.shot.has .lbl,.shot.has .sub,.shot.has svg{display:none}
.shot .tag{position:absolute;left:6px;bottom:6px;background:rgba(10,19,28,.75);color:#fff;font:600 11px var(--body);padding:3px 6px;border-radius:4px;display:none}
.shot.has .tag{display:block}

.btn{appearance:none;border:2px solid transparent;border-radius:8px;min-height:52px;padding:0 18px;font:600 16px var(--display);letter-spacing:.05em;text-transform:uppercase;cursor:pointer;
  display:inline-flex;align-items:center;justify-content:center;gap:8px;text-decoration:none}
.btn:focus-visible,.grade button:focus-visible,.chip:focus-within,input:focus-visible,select:focus-visible,textarea:focus-visible,.item:focus-visible,.tabs a:focus-visible{outline:3px solid var(--sky);outline-offset:2px}
.btn-red{background:var(--accent);color:var(--on-accent)}
.btn-navy{background:var(--primary);color:var(--on-primary)}
.btn-line{background:transparent;color:var(--fg);border-color:var(--line)}
.btn-sm{min-height:40px;font-size:14px;padding:0 12px}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.row{display:flex;gap:10px;flex-wrap:wrap}
.row>.btn{flex:1 1 160px}

.status{font-size:14px;padding:10px 12px;border-radius:8px;margin:0}
.status.info{background:var(--soft);color:var(--fg)}
.status.ok{background:var(--ok-bg);color:var(--ok)}
.status.warn{background:var(--warn-bg);color:var(--warn)}

.grid{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}
.f{display:flex;flex-direction:column;gap:4px;min-width:0;grid-column:span 6}
.s2{grid-column:span 2}.s3{grid-column:span 3}
.f>span{font:600 12px var(--body);letter-spacing:.06em;text-transform:uppercase;color:var(--muted);display:flex;gap:6px;align-items:center}
input,select,textarea{width:100%;min-height:48px;border:1.5px solid var(--line);border-radius:8px;background:var(--card);color:var(--fg);font:500 17px var(--body);padding:8px 12px}
textarea{min-height:72px;resize:vertical}
.mono{font-family:var(--mono)}
.f.scan input,.f.scan select{background:var(--ok-bg);border-color:var(--ok)}
.f.low input,.f.low select{background:var(--warn-bg);border-color:var(--warn)}
.flag{font:700 10px var(--body);font-style:normal;letter-spacing:.05em;padding:2px 6px;border-radius:4px}
.f.scan .flag{background:var(--ok);color:#fff}
.f.low .flag{background:var(--warn);color:#fff}
.sizeline{font:700 26px/1.1 var(--mono);letter-spacing:.02em;padding:12px;border-radius:8px;background:var(--soft);text-align:center;overflow-wrap:anywhere}
.age{font:600 14px var(--body);padding:6px 10px;border-radius:6px;align-self:flex-start}
.age.ok{background:var(--ok-bg);color:var(--ok)}.age.warn{background:var(--warn-bg);color:var(--warn)}.age.old{background:var(--red-bg);color:var(--red)}

.grade{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.grade button{appearance:none;border:2px solid var(--line);background:var(--card);color:var(--fg);border-radius:10px;min-height:76px;cursor:pointer;
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.grade button b{font:700 30px/1 var(--display)}
.grade button small{font:500 12px var(--body);color:var(--muted)}
.grade button[aria-pressed="true"]{border-color:var(--primary);background:var(--primary);color:var(--on-primary)}
.grade button[aria-pressed="true"] small{color:inherit;opacity:.8}

.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{position:relative;display:inline-flex}
.chip input{position:absolute;opacity:0;inset:0;min-height:0;cursor:pointer}
.chip span{display:inline-flex;align-items:center;min-height:44px;padding:0 14px;border:1.5px solid var(--line);border-radius:22px;font:600 14px var(--body)}
.chip input:checked+span{background:var(--red-bg);border-color:var(--red);color:var(--red)}
details{border-top:1px solid var(--line);padding-top:12px}
summary{cursor:pointer;font:600 14px var(--body);color:var(--muted);min-height:32px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px;font-size:15px}
.toggle input{width:22px;height:22px;min-height:0}

.saved{align-items:center;text-align:center}
.stock{font:700 54px/1 var(--mono);letter-spacing:.02em;color:var(--red)}

.sticky-save{position:fixed;left:0;right:0;bottom:0;z-index:4;background:var(--card);border-top:1px solid var(--line);
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:10px calc(10px + env(safe-area-inset-bottom,0px))}
.sticky-save .in{max-width:760px;margin:0 auto;display:flex;gap:10px;align-items:center}
.sticky-save .btn{flex:0 0 auto;min-width:150px}
.sticky-save .miss{font-size:14px;color:var(--muted);flex:1;min-width:0;font-family:var(--mono)}

.filters{display:flex;gap:10px;flex-wrap:wrap}
.filters input{flex:1 1 220px}.filters select{flex:1 1 130px}
.summary{display:flex;gap:8px;flex-wrap:wrap}
.pill{appearance:none;border:0;font:600 13px var(--body);padding:8px 10px;border-radius:16px;background:var(--soft);color:var(--fg);cursor:pointer}
.pill b{font-family:var(--mono)}
.list{display:flex;flex-direction:column;gap:10px}
.item{display:grid;grid-template-columns:72px 1fr;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:10px;text-decoration:none;color:inherit}
.th{width:72px;height:72px;border-radius:8px;background:var(--soft);object-fit:cover;display:block}
.item .meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.top{display:flex;justify-content:space-between;gap:8px;align-items:baseline;flex-wrap:wrap}
.sz{font:700 17px var(--mono)}
.no{font:700 13px var(--mono);color:var(--red)}
.item .sub{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.badges{display:flex;gap:6px;flex-wrap:wrap}
.badge{font:700 12px var(--body);padding:2px 8px;border-radius:4px;background:var(--soft)}
.badge.g{background:var(--primary);color:var(--on-primary)}
.badge.sold,.badge.scrapped{background:var(--line);color:var(--muted)}
.badge.held,.badge.unv{background:var(--warn-bg);color:var(--warn)}
.empty{text-align:center;color:var(--muted);padding:28px 12px}
.empty b{display:block;font:600 18px var(--display);text-transform:uppercase;letter-spacing:.04em;color:var(--fg);margin-bottom:6px}
.note{font-size:13px;color:var(--muted);margin:0}

.seg{display:flex;gap:8px;flex-wrap:wrap}
.seg button{appearance:none;flex:1 1 90px;min-height:48px;border:1.5px solid var(--line);border-radius:8px;background:transparent;color:var(--fg);font:600 15px var(--body);cursor:pointer}
.seg button[aria-pressed="true"]{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.photos{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.photos a{display:block;aspect-ratio:3/4;max-width:100%;border-radius:8px;overflow:hidden;background:var(--soft)}
.photos img{width:100%;height:100%;object-fit:cover;display:block}
.hist{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--muted)}
.hist b{color:var(--fg);font-weight:600}
.table-wrap{overflow-x:auto;border:1px solid var(--line);border-radius:8px}
table{border-collapse:collapse;width:100%;font-size:14px;font-variant-numeric:tabular-nums}
th,td{padding:8px 10px;border-bottom:1px solid var(--line);text-align:left;white-space:nowrap}
th{font:600 12px var(--body);text-transform:uppercase;letter-spacing:.05em;color:var(--muted);background:var(--soft)}
td.bad{color:var(--warn)}
.map{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
@media (max-width:440px){.s3{grid-column:span 6}.shot .sub{display:none}.stock{font-size:44px}.map{grid-template-columns:1fr}}
@media (prefers-reduced-motion:no-preference){.item,.card{transition:border-color .15s}}

/* ---------- Inventory extras (all sizes) ---------- */
.inv-head{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
.page-title{font:600 24px/1.1 var(--display);letter-spacing:.03em;text-transform:uppercase;margin:0}
.seg-sm button{min-height:40px;flex:0 1 auto;padding:0 14px;font-size:14px}
.bulk,.bulk-ask{display:flex;flex-wrap:wrap;gap:8px;align-items:center;background:var(--card);border:1.5px solid var(--primary);border-radius:10px;padding:10px 12px}
.bulk b{margin-right:4px}
.bulk-ask label{font:600 14px var(--body)}
.bulk-ask input{flex:1 1 160px;min-height:40px;width:auto}
.muted{color:var(--muted)}
.sets{display:grid;grid-template-columns:1fr;gap:10px}
.set{display:grid;grid-template-columns:72px 1fr;gap:12px;background:var(--card);border:1px solid var(--line);border-radius:10px;padding:12px}
.set .meta{min-width:0;display:flex;flex-direction:column;gap:4px}
.set .sub{font-size:14px;color:var(--muted);overflow-wrap:anywhere}
.set .sub b{color:var(--fg)}
.set .acts{grid-column:1/-1;display:flex;gap:8px;flex-wrap:wrap}
.set .acts .btn{flex:1 1 120px}

/* Inventory table (wide screens) */
.inv-table{background:var(--card)}
.inv-table table{min-width:900px}
.inv-table td{vertical-align:middle;white-space:nowrap}
.inv-table td.wrap{white-space:normal;min-width:160px}
.inv-table td.mono{font-family:var(--mono)}
.inv-table td.num,.inv-table th.num{text-align:right}
.inv-table th.ck,.inv-table td.ck{width:40px;padding-right:0}
.inv-table th.ph,.inv-table td.ph{width:52px;padding-left:4px;padding-right:4px}
.inv-table td.ph img{width:44px;height:44px;border-radius:6px;object-fit:cover;display:block}
.inv-table input[type=checkbox]{width:18px;height:18px;min-height:0}
.inv-table tbody tr{cursor:pointer}
.inv-table tbody tr:hover{background:var(--soft)}
.inv-table .no{text-decoration:none}
.sort{appearance:none;border:0;background:none;color:inherit;font:inherit;letter-spacing:inherit;text-transform:inherit;cursor:pointer;padding:0}
.sort[aria-sort="ascending"],.sort[aria-sort="descending"]{color:var(--fg)}

/* ---------- Desktop layout: side menu, wide pages ---------- */
@media (min-width:1000px){
  body::before{display:none}
  .bar{position:fixed;inset:0 auto 0 0;width:232px;padding:24px 16px;display:flex;flex-direction:column}
  .bar-in{max-width:none;margin:0;display:flex;flex-direction:column;gap:24px;height:100%}
  .bar-top{flex-direction:column;align-items:flex-start;gap:14px}
  .tabs{flex-direction:column;gap:2px;margin:0}
  .tabs a{text-align:left;padding:12px 14px;border-bottom:0;border-left:3px solid transparent;border-radius:0 6px 6px 0;font-size:16px}
  .tabs a[aria-current="page"]{border-left-color:var(--accent);background:rgba(255,255,255,.08)}
  .tabs a:hover{color:#fff}
  .main{margin-left:232px;padding-left:40px;padding-right:40px;padding-block:32px 120px}
  .main-wide{max-width:1240px}
  .sticky-save{left:232px}
  .sticky-save .in{max-width:1160px}
  /* Intake: photos and fields side by side */
  .intake{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);align-items:start}
  .intake > #topNote,.intake > #savedCard,.intake > section[aria-labelledby="h-grade"]{grid-column:1/-1}
  .intake > section[aria-labelledby="h-grade"] .grade{max-width:520px}
  /* One tire: big photos left, actions right */
  .tire-grid{display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr);gap:16px;align-items:start}
  .tire-side{display:flex;flex-direction:column;gap:16px}
  .tire-main .photos{grid-template-columns:1fr 1fr}
  .tire-main .photos a:first-child{grid-column:1/-1;aspect-ratio:4/3}
  .sets{grid-template-columns:repeat(2,minmax(0,1fr))}
  .filters input{flex:2 1 320px}
}
@media (max-width:999px){ .tire-grid,.tire-side{display:flex;flex-direction:column;gap:16px} }

/* ---------- TireTally: brand, sign-in, settings ---------- */
.logo{font:700 22px/1 var(--display);letter-spacing:.02em;text-transform:uppercase;color:#fff}
.logo b{color:var(--accent);font-weight:700}
.logo-lg{font-size:34px;color:var(--fg)}
.brand small{color:var(--sky)}
.tabs{overflow-x:auto;scrollbar-width:none}
.tabs a{white-space:nowrap;position:relative}
.dot-badge{display:inline-block;min-width:18px;padding:0 5px;margin-left:4px;border-radius:9px;background:var(--accent);color:var(--on-accent);font:700 11px/18px var(--body);text-align:center;vertical-align:2px}
.shop-switch{margin-top:10px;min-height:40px;background:rgba(255,255,255,.08);color:#fff;border-color:rgba(255,255,255,.2)}
.shop-switch option{color:#000}
.plan-banner{margin:0;border-radius:0;text-align:center}
.wide-only{display:none}
@media (min-width:1000px){ .wide-only{display:block} .plan-banner{margin-left:232px} }

.auth{min-height:100vh;display:flex;align-items:center;justify-content:center;
  padding-left:max(16px,env(safe-area-inset-left,0px));padding-right:max(16px,env(safe-area-inset-right,0px));padding-block:32px}
.auth-card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);border-radius:14px;padding:28px 24px;display:flex;flex-direction:column;gap:14px}
.auth-card form{display:flex;flex-direction:column;gap:14px}
.auth-tag{margin:-6px 0 4px;color:var(--muted)}
.code-input{font-size:28px;letter-spacing:10px;text-align:center}

.req{background:var(--card);border:1px solid var(--line);border-radius:10px;padding:14px;display:flex;flex-direction:column;gap:8px}
.req .acts{display:flex;gap:8px;flex-wrap:wrap}
.req .sub{margin:0;color:var(--muted);font-size:14px}

.settings-grid{display:grid;grid-template-columns:1fr;gap:16px;align-items:start}
@media (min-width:1000px){ .settings-grid{grid-template-columns:repeat(2,minmax(0,1fr))} }
.plan-now{font-size:18px}
.meter{display:flex;justify-content:space-between;font-size:14px;color:var(--muted)}
.meter b{color:var(--fg);font-variant-numeric:tabular-nums}
.bar-meter{height:8px;background:var(--soft);border-radius:4px;overflow:hidden}
.bar-meter i{display:block;height:100%;background:var(--accent)}
.plans{font-size:14px}
.plans td:first-child{color:var(--muted)}
pre.code{margin:0;padding:12px;border-radius:8px;background:var(--soft);font:500 13px/1.5 var(--mono);white-space:pre-wrap;word-break:break-all}
.people{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:8px}
.people li{display:flex;align-items:center;gap:10px;justify-content:space-between;flex-wrap:wrap;padding:8px 0;border-bottom:1px solid var(--line)}
.people li > span:first-child{flex:1 1 180px;min-width:0;overflow-wrap:anywhere}
.people small{color:var(--muted)}
.invite{display:flex;gap:8px;flex-wrap:wrap;align-items:end}
.invite .f{flex:1 1 220px}
.invite select{flex:0 0 110px}
.toggle{display:flex;align-items:center;justify-content:space-between;gap:12px}

@media (max-width:999px){ .tabs a{font-size:14px;padding:12px 4px;letter-spacing:.04em} }