/* CardDex V2: mobile-first scanner and readable controls. */
:root { color-scheme: light; }
body { font-size:16px; }
.topbar, .view-home .topbar { height:80px; }
.mobile-brand small, .view-home .mobile-brand small { font-size:11px; letter-spacing:1.1px; color:#fff1d8; }
.top-icon, .mobile-avatar, .view-home .top-icon, .view-home .mobile-avatar { width:40px; height:40px; }
.top-actions .system-light { display:none; }
.home-scanner {
  padding:17px 14px 4px;
  border:3px solid #294f43;
  border-radius:20px;
  background:linear-gradient(135deg,#e5f2cb,#d6eab7);
  box-shadow:inset 0 0 0 3px #b6d494,0 5px #93303b;
}
.home-scanner-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:0 2px 15px; }
.home-scanner .eyebrow { font-size:11px; letter-spacing:1.25px; color:#426447; }
.home-scanner h1 { margin:5px 0 0; color:#234b3e; font-size:clamp(24px,6vw,30px); line-height:1.15; letter-spacing:-.7px; font-family:Bahnschrift,"Segoe UI",sans-serif; }
.camera-badge { display:inline-flex; align-items:center; gap:6px; flex-shrink:0; color:#4a6954; font-size:12px; white-space:nowrap; }
.camera-badge i { width:7px; height:7px; border-radius:50%; background:#718d68; }
.home-scanner[data-state=live] .camera-badge i { background:#339656; box-shadow:0 0 0 3px #96ce8644; }
.home-camera-stage {
  position:relative;
  display:grid;
  place-items:center;
  height:clamp(248px,68vw,322px);
  overflow:hidden;
  border:2px solid #264e40;
  border-radius:13px;
  background:radial-gradient(ellipse at 50% 40%,#244e40,#122f29);
  isolation:isolate;
}
.home-camera-stage::before {
  content:""; position:absolute; inset:0; z-index:-1; opacity:.25;
  background-image:linear-gradient(#99cba417 1px,transparent 1px),linear-gradient(90deg,#99cba417 1px,transparent 1px);
  background-size:22px 22px;
}
#home-camera { position:absolute; inset:0; width:100%; height:100%; object-fit:cover; }
.home-card-frame {
  position:absolute; height:84%; aspect-ratio:63 / 88; max-width:75%;
  border:1px solid #c1ee9f44; border-radius:10px;
  box-shadow:0 0 0 100vmax #081d1640;
  pointer-events:none;
}
.home-card-frame>i { position:absolute; width:24px; height:24px; border:3px solid #c8f2a4; }
.home-card-frame>i:nth-child(1) { left:-2px; top:-2px; border-right:0; border-bottom:0; border-radius:10px 0 0; }
.home-card-frame>i:nth-child(2) { right:-2px; top:-2px; border-left:0; border-bottom:0; border-radius:0 10px 0 0; }
.home-card-frame>i:nth-child(3) { right:-2px; bottom:-2px; border-left:0; border-top:0; border-radius:0 0 10px; }
.home-card-frame>i:nth-child(4) { left:-2px; bottom:-2px; border-right:0; border-top:0; border-radius:0 0 0 10px; }
.home-card-outline { display:flex; height:100%; flex-direction:column; align-items:center; padding-top:18px; gap:4px; color:#cae7b8; }
.home-card-outline svg { width:60px; height:60px; opacity:.65; }
.home-card-outline span { font-size:12px; }
.camera-start { position:relative; display:flex; align-items:center; gap:9px; padding:12px 16px; margin-top:70px; border:1px solid #cdebb8; border-radius:12px; background:#e8f7d9; color:#234b3b; font-size:16px; font-weight:700; box-shadow:0 3px 0 #071d1a66; cursor:pointer; }
.camera-start svg { width:23px; height:23px; flex-shrink:0; }
.camera-start:disabled { opacity:.8; }
.camera-stop { position:absolute; right:10px; top:10px; display:grid; width:44px; height:44px; place-items:center; border:1px solid #fff9; border-radius:50%; background:#173a30dc; color:white; font-size:28px; cursor:pointer; }
.home-scan-line { display:none; position:absolute; left:4px; right:4px; top:15%; height:2px; background:#c8f3a0; box-shadow:0 0 12px #b6ee8a; animation:scan-travel 3s ease-in-out infinite alternate; }
.home-scanner[data-state=live] .home-scan-line { display:block; }
.home-scanner[data-state=live] .home-card-outline { visibility:hidden; }
@keyframes scan-travel { to { top:85%; } }
.home-camera-message { margin:12px 2px; color:#3f624d; font-size:14px; line-height:1.45; }
.home-scanner-actions { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.home-scanner-actions button { min-height:50px; font-size:16px; border-radius:11px; }
.home-scanner-actions .scan-button { display:flex; gap:8px; align-items:center; justify-content:center; }
.home-scanner-actions .scan-button:disabled { border-color:#93aa88; background:#bdd0ac; box-shadow:none; color:#536b50; cursor:default; }
.photo-button { border:1px solid #779465; background:#f4f9e8; color:#2f543e; font-weight:700; cursor:pointer; }
.home-catalog-button { display:flex; align-items:center; justify-content:center; gap:10px; width:100%; min-height:50px; padding:10px 0; border:0; background:transparent; color:#2c5741; font-size:15px; font-weight:600; cursor:pointer; }
.home-catalog-button span { font-size:21px; }
.home-collection { margin-top:17px; padding:15px 16px 18px; border:2px solid #c7d4c2; border-radius:16px; background:#fffdf4; box-shadow:0 4px #a6b2a0; }
.home-collection-heading { display:flex; align-items:center; justify-content:space-between; gap:10px; }
.home-collection-heading h2 { margin:0; font-size:19px; color:#2d4f40; }
.home-collection-heading button { min-height:44px; padding:0; border:0; background:transparent; color:#a62f3c; font-size:14px; font-weight:700; cursor:pointer; }
.home-counts { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); margin-top:10px; }
.home-counts>div { display:flex; flex-direction:column; align-items:center; gap:5px; border-right:1px solid #d5dfcb; }
.home-counts>div:last-child { border:0; }
.home-counts b { font-size:27px; line-height:1.2; color:#325943; font-variant-numeric:tabular-nums; }
.home-counts span { font-size:14px; color:#5a705e; }
.bottom-nav { padding-right:4px; padding-left:4px; }
.bottom-nav-item small { font-size:11px; }
.bottom-nav-item.center-nav small { font-size:11px; }
.bottom-nav-item { min-width:0; }
#home-camera[hidden], .camera-start[hidden], .camera-stop[hidden] { display:none; }
/* Readable supporting screens. Inputs stay >=16px to avoid mobile auto-zoom. */
.panel-heading p:not(.panel-kicker), .settings-heading p:last-child, .setting-row p,
.about-group p, .friends-help, .friends-empty, .trade-prototype-note, .trade-empty,
.empty-state p, .privacy-note, .dialog-copy, .scanner-help, .scanner-privacy,
.auth-message, .catalog-hint p, .album-results-meta { font-size:14px; line-height:1.5; }
.panel-kicker, .eyebrow, .dialog-kicker { font-size:11px; }
.search-box input, input, select, textarea { font-size:16px; }
.auth-form label, .account-panel label, .scanner-number-fields label,
.scanner-panel label { font-size:14px; }
.auth-switch, .outline-button, .secondary-button, .subtle-button { min-height:44px; font-size:14px; }
.tab, .trade-tab, .sort-control, .collection-total { font-size:13px; }
.sort-control select { font-size:14px; min-height:44px; }
.trade-tab { min-height:48px; }
.tile-info b, .catalog-row-copy b, .trade-offer-row-copy b { font-size:16px; }
.tile-info small, .catalog-row-copy small, .trade-offer-row-copy small { font-size:13px; line-height:1.45; }
.quantity-action, .want-action, .remove-card, .catalog-add { min-height:44px; min-width:44px; }
.quantity-label, .quantity-label b, .want-action, .remove-card, .catalog-add, .get-card-action { font-size:13px; }
.tile-actions { flex-wrap:wrap; }
.tile-secondary { flex-wrap:wrap; gap:4px; }
.catalog-actions { flex-wrap:wrap; }
.album-extra-filters { flex-wrap:wrap; }
.scanner-header h2 { font-size:24px; }
.scanner-panel #scanner-message { font-size:16px; line-height:1.45; }
.scanner-controls button, .scanner-panel button { min-height:44px; font-size:15px; }
.scanner-panel input, .scanner-panel select { font-size:16px; }
#scanner-confirmation { overflow-wrap:anywhere; }
.home-scanner:focus-within { scroll-margin-top:12px; }
@media(max-width:360px) {
  .view-home .topbar { gap:7px; }
  .view-home .mobile-brand strong { font-size:19px; }
  .view-home .top-actions { gap:4px; }
  .view-home .top-icon, .view-home .mobile-avatar { width:36px; height:36px; }
  .home-scanner { padding:14px 11px 3px; }
  .home-scanner-heading { gap:5px; }
  .home-scanner h1 { font-size:24px; }
  .camera-badge { font-size:11px; gap:4px; }
  .bottom-nav-item small { font-size:10px; }
  .bottom-nav-item.center-nav { width:66px; height:66px; min-height:66px; }
  .album-filter-row { flex-direction:column; align-items:stretch; }
}
@media(prefers-reduced-motion:reduce) {
  .home-scan-line { animation:none; top:50%; }
  * { scroll-behavior:auto!important; }
}
.home-camera-message { font-size:16px; }
.home-catalog-button { font-size:16px; }
.panel-heading p:not(.panel-kicker), .settings-heading p:last-child, .setting-row p,
.about-group p, .friends-help, .friends-empty, .trade-prototype-note, .trade-empty,
.empty-state p, .privacy-note, .dialog-copy, .scanner-help, .scanner-privacy,
.auth-message, .catalog-hint p { font-size:16px; line-height:1.5; }
body { min-width:0; }
/* Compact managed-account sign-in. No account creation or email reset action. */
#auth-form {gap:8px;}
#auth-form>label {font-size:16px;font-weight:700;color:#35573e;margin-top:5px;}
#auth-form>input {width:100%;min-height:48px;padding:11px 12px;border:1px solid #adc298;border-radius:9px;background:#f5faed;color:#2b4b3c;font-size:16px;}
#auth-submit {min-height:48px;margin-top:10px;font-size:16px;}
.auth-member-help {margin:12px 0 0;color:#5d705c;font-size:14px;line-height:1.5;}

/* The collection stays out of view until Supabase has restored and loaded the account. */
body.auth-locked {min-height:100dvh;background:#bd3340;}
body.auth-locked .app-shell,body.auth-locked .bottom-nav {display:none!important;}
body.auth-locked #auth-dialog .dialog-close-row {display:none;}
body.auth-locked #auth-dialog {width:min(94vw,440px);max-height:calc(100dvh - 32px);}
body.auth-locked #auth-dialog::backdrop {background:#bd3340;backdrop-filter:none;}

/* Studio branding is limited to the locked sign-in screen. */
#auth-dialog .auth-brand {display:none;}
#auth-dialog .auth-content {min-width:0;}
body.auth-locked #auth-dialog[open] {
  display:grid;
  grid-template-columns:minmax(0,1fr);
  gap:20px;
}
body.auth-locked #auth-dialog .auth-brand {display:block;justify-self:center;width:min(42vw,160px);max-width:100%;}
#auth-dialog .auth-brand img {display:block;width:100%;height:auto;border-radius:12px;}
@media(min-width:768px) {
  body.auth-locked #auth-dialog[open] {
    width:min(90vw,780px);
    grid-template-columns:minmax(0,.85fr) minmax(0,1fr);
    align-items:center;
    gap:32px;
    padding:32px;
  }
  body.auth-locked #auth-dialog .auth-brand {width:100%;max-width:280px;}
}
@media(max-height:600px) and (max-width:767px) {
  body.auth-locked #auth-dialog .auth-brand {width:min(30vw,112px);}
  body.auth-locked #auth-dialog[open] {gap:12px;}
}