/* CardScan theme: blue-slate surfaces, gold-foil action, Barlow Condensed nameplate type.
   The camera window is framed like a graded slab: a label bar on top that fills in as the card is identified. */
@font-face{font-family:'Barlow';font-weight:400;font-display:swap;src:url(fonts/barlow-latin-400-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:500;font-display:swap;src:url(fonts/barlow-latin-500-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow';font-weight:600;font-display:swap;src:url(fonts/barlow-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:600;font-display:swap;src:url(fonts/barlow-condensed-latin-600-normal.woff2) format('woff2')}
@font-face{font-family:'Barlow Condensed';font-weight:700;font-display:swap;src:url(fonts/barlow-condensed-latin-700-normal.woff2) format('woff2')}

:root{
  --bg:#121a24;          /* slate */
  --panel:#1a2531;       /* raised surface */
  --field:#222f3d;       /* inputs */
  --line:#2e3d4d;        /* hairlines */
  --ink:#eef2f6;
  --muted:#93a3b5;
  --accent:#e8b64c;      /* gold foil: primary action only */
  --accent-ink:#231a05;
  --ok:#5ed3a6;          /* mint: success / camera on */
  --warn:#f0a35e;
  --label:#f4f1ea;       /* slab label paper */
  --label-ink:#17202a;
  --cond:'Barlow Condensed','Arial Narrow',system-ui,sans-serif;
  --sans:'Barlow',system-ui,-apple-system,'Segoe UI',sans-serif;
}
body{background:var(--bg);color:var(--ink);font:400 15px/1.45 var(--sans);-webkit-font-smoothing:antialiased}
h1,h2,h3{font-family:var(--cond);font-weight:700;letter-spacing:.01em}
.help{color:var(--muted);font-size:.86rem;line-height:1.45}
a{color:var(--accent)}

/* Buttons: gold is reserved for the main action on each screen */
button,.file-button{font:600 1rem/1.1 var(--cond);letter-spacing:.02em;background:var(--accent);color:var(--accent-ink);border:0;border-radius:10px;padding:11px 14px;transition:transform .08s ease,background-color .15s ease}
button:active:not(:disabled){transform:scale(.97)}
button.secondary,.file-button{background:var(--field);color:var(--ink);border:1px solid var(--line)}
button:disabled{opacity:.38}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* Inputs: filled, quiet, clear focus */
input:not([type=checkbox]):not([type=file]),select,textarea{background:var(--field);color:var(--ink);border:1px solid transparent;border-radius:8px;font:500 1rem/1.2 var(--sans)}
input:not([type=checkbox]):not([type=file]):focus,select:focus,textarea:focus{border-color:var(--accent);outline:none}
input::placeholder{color:#6f8193}
input[type=checkbox]{accent-color:var(--accent)}
.grid label,.quick label{color:var(--muted);font-weight:500}

/* Top bar */
.topbar{padding:8px 14px}
.topbar h1{font-size:1.35rem;letter-spacing:.02em}
.cam-state{display:inline-flex;align-items:center;gap:6px;color:var(--muted);font-size:.85rem;font-weight:500}
.cam-state::before{content:'';width:8px;height:8px;border-radius:50%;background:#5b6b7c}
.cam-state[data-on]::before{background:var(--ok);box-shadow:0 0 0 3px rgba(94,211,166,.18)}
.topbar .small{padding:6px 12px;font-size:.9rem;border-radius:8px}

/* The slab: label bar + camera window in one frame */
.slab{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;border-radius:14px;padding:6px;background:linear-gradient(180deg,#2a3746,#1f2a36);border:1px solid #3a4a5c;box-shadow:inset 0 1px 0 rgba(255,255,255,.06)}
.slab-label{display:flex;align-items:center;gap:10px;background:var(--label);color:var(--label-ink);border-radius:8px 8px 3px 3px;padding:6px 10px;min-height:46px;position:relative;overflow:hidden}
.slab-label::after{content:'';position:absolute;right:0;top:0;bottom:0;width:6px;background:linear-gradient(180deg,#e8b64c,#5ed3a6,#7aa7ff,#e86b8a)} /* refractor edge */
.sl-text{min-width:0;flex:1}
.sl-name{font:700 1.15rem/1.1 var(--cond);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sl-line{font:500 .8rem/1.25 var(--sans);color:#46525f;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.slab-label.empty .sl-name{color:#55616e;font-weight:600}
.sl-num{font:700 1.3rem/1 var(--cond);margin-right:8px}
.sl-rc{font:700 .8rem/1 var(--cond);color:#fff;background:#c23b33;border-radius:4px;padding:4px 6px}
.sl-rc[hidden]{display:none}
.slab-label.updated{animation:label-in .5s ease}
@keyframes label-in{from{background:#fff7dd}to{background:var(--label)}}
.tab.scan .slab .viewfinder{flex:1 1 auto;margin-top:6px;border-radius:3px 3px 9px 9px;min-height:150px;background:#0b1118}
.tab.scan .viewfinder .guide{border:2px solid rgba(232,182,76,.75);border-radius:8px;box-shadow:0 0 0 9999px rgba(8,12,17,.28)}
.tab.scan .viewfinder .guide-label{font:500 .8rem var(--sans);left:50%;transform:translateX(-50%);white-space:nowrap;bottom:68px;opacity:.85}
.viewfinder-capture{font-size:1.05rem;border:0;box-shadow:0 6px 20px rgba(0,0,0,.45);border-radius:999px;padding:12px 22px}
.start-overlay{border-radius:999px}

/* Status and checks */
.notice.clamp{background:transparent;border:0;border-radius:0;padding:2px 2px 0;color:var(--ink);font-size:.88rem}
.checks-strip{color:var(--muted)}
.checks-strip::after{content:'  Details ›';color:var(--accent)}

/* Quick fields on the Scan tab */
.quick{gap:6px 8px}
.quick label{font-size:.72rem}
.quick input:not([type=checkbox]){padding:8px 10px}
#player{font:600 1.1rem/1.2 var(--cond);letter-spacing:.01em}
.actions{gap:8px}
.actions button{border-radius:12px}
#save{font-size:1.15rem}

/* Tab bar with icons */
.tabbar{background:#0f161f;border-top:1px solid var(--line);gap:2px}
.tabbar button{display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 2px;font:600 .78rem/1 var(--cond);letter-spacing:.03em;color:var(--muted);background:none;border:0}
.tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.tabbar button.active{color:var(--accent);background:none}

/* Other tabs: calmer panels */
.panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.identity-panel{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.grading-summary{background:var(--panel);color:var(--ink);border-left:3px solid var(--accent)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:12px}
.card .details b{font:700 1.05rem var(--cond)}
.photo-thumb{background:var(--panel);border-radius:10px}
details summary{color:var(--muted)}
textarea{font:400 .82rem/1.4 ui-monospace,Menlo,monospace}

.cam-on .viewfinder .guide-label{display:none}
@media (prefers-reduced-motion:reduce){*{animation:none!important;transition:none!important}}
@media (max-height:640px){.slab-label{min-height:38px;padding:4px 9px}.sl-line{display:none}}
.titlebar{display:flex;align-items:center;justify-content:space-between;gap:10px}
#count{font:600 .9rem var(--cond);color:var(--accent);border:1px solid var(--line);border-radius:999px;padding:3px 10px}
/* Saved cards */
.card{align-items:center}
.card img{border-radius:6px}
.card .details{display:flex;flex-direction:column;gap:3px}
.card-line{color:var(--ink);font-size:.9rem}
.card-tags{display:flex;flex-wrap:wrap;gap:5px}
.card-tags:empty{display:none}
.tag{font:600 .75rem/1 var(--cond);letter-spacing:.03em;padding:4px 7px;border-radius:5px;background:var(--field);color:var(--ink)}
.tag.rc{background:#c23b33;color:#fff}
.tag.graded{background:var(--label);color:var(--label-ink)}
.tag.todo{background:transparent;color:var(--warn);border:1px solid rgba(240,163,94,.45)}
.card small{color:var(--muted)}

/* Guide sized from the camera window itself: as large as fits, always card-shaped (5:7) */
.viewfinder{container-type:size}
.tab.scan .viewfinder .guide{top:50%;left:50%;transform:translate(-50%,-52%);height:auto;max-width:none;aspect-ratio:5/7;width:min(90cqw,calc(86cqh * 5 / 7))}

/* Full-screen camera */
.full-close{display:none}
.scan-full .slab{position:fixed;inset:0;z-index:60;border-radius:0;border:0;margin:0;padding:max(8px,env(safe-area-inset-top)) 8px max(10px,env(safe-area-inset-bottom));background:#0b1118}
.scan-full .slab-label{padding-right:84px}
.scan-full .full-close{display:block;position:absolute;z-index:61;top:max(14px,calc(env(safe-area-inset-top) + 6px));right:22px;padding:8px 14px;font-size:.95rem}
.scan-full .tab.scan .slab .viewfinder{border-radius:10px}
.scan-full .tab.scan .viewfinder .guide{width:min(92cqw,calc(84cqh * 5 / 7))}
.scan-full .viewfinder-capture{bottom:18px;min-height:56px;font-size:1.15rem;padding:14px 30px}
body:not(.scan-full).cam-on .tab.scan .viewfinder{cursor:zoom-in}

/* Frame color shows whether the card is lined up: gold = looking, green = lined up (auto capture snaps) */
.tab.scan .viewfinder .guide{transition:border-color .15s ease,border-width .15s ease}
.tab.scan .viewfinder .guide[data-state=near]{border-color:rgba(232,182,76,1)}
.tab.scan .viewfinder .guide[data-state=ready]{border:3px solid var(--ok);box-shadow:0 0 0 9999px rgba(8,12,17,.28),0 0 18px rgba(94,211,166,.55)}
.tab.scan .viewfinder .guide.snap{animation:snap .45s ease}
@keyframes snap{0%{background:rgba(255,255,255,.55)}100%{background:transparent}}