/* ===================== Dailyd — simple header, sheets, and the roomy phone layout =====================
   Loaded after themes.css + features.css. Phone rules (<=480px) use !important on purpose: each decade theme styles the
   same elements with high-specificity selectors, and the phone layout must win in all 8 themes. Colours still come from
   each theme's variables (--edge, --form-bg, --form-ink, --accent, --field-bg ...), so every decade keeps its look. */

/* ---------- header: logo block (Dailyd + tagline) · How to play · Stats · Settings (phones: one menu button) ---------- */
header.top .logo .logo-mark{white-space:nowrap}
header.top .logo .logo-mark .lm2{margin-left:.02em}
header.top .logo small.tagline{display:block !important;text-transform:none !important;font-variant:normal !important;letter-spacing:.01em !important;
  font-family:var(--font-body) !important;font-weight:600 !important;font-style:normal !important;font-size:.74rem !important;line-height:1.2 !important;margin-top:4px;opacity:.9;white-space:nowrap}
.top-nav{display:flex;align-items:center;gap:4px;flex:none}
.top-nav .menu-btn{display:none}
.top-nav .nav-lab{display:none}
@media (min-width:1000px){
  .top-nav{gap:8px}
  .top-nav .nav-btn{width:auto !important;height:40px;padding:0 14px 0 10px;border-radius:999px;gap:7px;display:inline-flex;align-items:center;border:1.5px solid color-mix(in srgb,currentColor 35%,transparent)}
  .top-nav .nav-lab{display:inline;font:700 .9rem/1 var(--font-body);white-space:nowrap}
  header.top .logo .logo-mark{font-size:calc(var(--logo-size,1.45rem) * 1.25)}
}

/* ---------- sheets: Stats tabs, Settings / Menu lists, result image ---------- */
.sheet-tabs{display:flex;gap:4px;margin:0 0 14px;flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none}
.sheet-tabs button{flex:1 1 auto;padding:6px 7px;border-radius:999px;border:2px solid var(--edge,#111);background:var(--form-bg,#fff);color:var(--form-ink,#111);font:700 .76rem/1.1 var(--font-body);cursor:pointer;white-space:nowrap;text-align:center}
.sheet-tabs button[aria-selected="true"]{background:var(--accent);color:#fff;border-color:var(--edge,#111)}
.sheet-list{list-style:none;margin:0;padding:0}
.sheet-list li{border-bottom:1px solid var(--line,#ddd)}
.sheet-list button,.sheet-list a{all:unset;box-sizing:border-box;width:100%;min-height:52px;display:grid;grid-template-columns:30px 1fr auto;align-items:center;gap:6px;padding:8px 4px;cursor:pointer;color:inherit}
.sheet-list b{font-weight:700}
.sheet-list small{font-size:.8rem;opacity:.72;text-align:right}
.sheet-list button:focus-visible,.sheet-list a:focus-visible{outline:3px solid var(--accent);outline-offset:2px;border-radius:8px}
.card-prev{margin:6px 0 10px;text-align:center}
.card-prev img{width:100%;max-width:340px;height:auto;border-radius:12px;border:2px solid var(--edge,#111);box-shadow:var(--edge-shadow)}
#cardAct{margin:0 0 16px}
#cardAct .btn{text-decoration:none;flex:1 1 auto}

/* ---------- reveal tiles + step UI: phone only ---------- */
.photo-dots .tx,.step-lbl,.step-chips,.step-mult,.step-bar,.field .lab-q{display:none}
.field .lab-std{display:inline}

@media (max-width:480px){
  body.has-stepbar{--bar-h:calc(84px + env(safe-area-inset-bottom))}
  #game.wrap{padding:0 0 calc(8px + var(--kb,0px)) !important;max-width:none !important}
  /* room under the footer so the pinned bar never covers the photo credit */
  body.has-stepbar footer.foot{margin-bottom:calc(var(--bar-h,0px) + 16px) !important}
  /* slim header: logo block + menu */
  #game header.top{margin:0 !important;padding-top:8px !important;padding-left:14px !important;padding-right:10px !important;min-height:58px !important;border-radius:0 !important;box-sizing:border-box;gap:6px !important}
  #game header.top .logo{overflow:visible !important;min-width:0}
  #game header.top .logo svg{width:30px;height:30px}
  #game header.top .logo-mark{font-size:1.5rem !important}
  #game header.top .logo small.tagline{font-size:11.5px !important;margin-top:3px}
  .top-nav .nav-btn{display:none !important}
  .top-nav .menu-btn{display:grid !important;place-items:center;width:44px !important;height:44px !important}
  .top-nav .menu-btn svg{width:24px;height:24px}
  /* notices (first-visit how-to, Saturday teaser, streak save, Monday recap) keep side margins */
  .notices{margin:10px 12px 0 !important}
  .notices > *{margin-top:0 !important}
  .notices:not(:has(> :not([hidden]))){display:none !important}
  .era-strip,.reveal-bar,.reveal-done,#game > .install-hint{display:none !important}
  #game > .install-hint:not([hidden]){display:flex !important;margin:10px 12px 0 !important}
  #main{padding:0 !important;margin:0 !important}
  .puzzle-grid{display:block !important;gap:0 !important}
  .stage{position:static !important;margin:0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important;border-radius:0 !important}
  /* no puzzle number / date on phones: only a Trim Sunday or Archive pill if there is one */
  .daybar{display:none !important}
  .daybar:has(.badge-tt,.archive-pill){display:flex !important;justify-content:center !important;gap:6px;margin:8px 12px 0 !important;padding:0 !important;background:none !important;border:0 !important;box-shadow:none !important}
  .daybar:has(.badge-tt,.archive-pill) > span:last-child,.daybar b,.daybar .mode-pill{display:none !important}
  /* first-visit how-to: one compact strip so the photo and the first question still fit */
  .intro{margin:8px 12px 0 !important;padding:7px 10px !important;font-size:.8rem !important;line-height:1.3 !important;gap:4px 10px !important;flex-wrap:nowrap !important}
  .intro .intro-x{display:none}
  .intro-tx{flex:1 1 auto !important}
  .intro-act{flex-direction:column;gap:2px !important;margin-left:0 !important}
  .intro .intro-ok{min-height:32px !important;padding:0 12px !important;font-size:.82rem !important}
  .intro .link-btn{font-size:.74rem;white-space:nowrap}
  #dayNote{margin:8px 12px 0 !important;font-size:.85rem !important;padding:6px 10px !important}
  /* photo edge to edge, solid outline top and bottom */
  .stage .viewer{width:100vw !important;max-width:none !important;max-height:none !important;aspect-ratio:4/3 !important;margin:0 !important;border-radius:0 !important;
    border-left:0 !important;border-right:0 !important;border-top:3px solid var(--edge,#111) !important;border-bottom:3px solid var(--edge,#111) !important;box-shadow:none !important;outline:0 !important}
  .zoom-ctl{right:8px !important;bottom:8px !important;gap:6px !important}
  .zoom-ctl button{width:36px !important;height:36px !important;min-height:36px !important;font-size:16px !important;opacity:.85}
  .stage .photo-credit{display:none !important}
  /* three reveal tiles under the photo: 60px tap targets with their points multiplier */
  .stage .photo-dots{display:flex !important;gap:10px !important;justify-content:stretch !important;margin:0 !important;padding:12px 14px 4px !important}
  .stage .photo-dots button{flex:1 1 0 !important;width:auto !important;min-width:0 !important;height:60px !important;min-height:60px !important;opacity:1 !important;margin:0 !important;position:relative;
    display:flex !important;align-items:center !important;gap:6px !important;padding:4px 6px 4px 4px !important;box-sizing:border-box !important;border-radius:14px !important;
    border:2px solid var(--edge,#111) !important;background:var(--field-bg,#fff) !important;color:var(--field-ink,#111) !important;box-shadow:none !important;outline:0 !important;overflow:hidden;filter:none !important;transform:none !important}
  .stage .photo-dots button img{flex:0 0 36px !important;width:36px !important;height:48px !important;border-radius:10px !important;object-fit:cover;position:static !important}
  .stage .photo-dots button.locked > .lk{flex:0 0 36px;width:36px;height:48px;border-radius:10px;display:grid;place-items:center;font-size:20px;
    background:repeating-linear-gradient(135deg,rgba(0,0,0,.07) 0 6px,rgba(0,0,0,.15) 6px 12px)}
  .stage .photo-dots button[aria-pressed="true"]{border-color:var(--accent) !important;box-shadow:inset 0 0 0 1px var(--accent) !important}
  .stage .photo-dots button::before,.stage .photo-dots button::after{display:none !important}
  .photo-dots .tx{flex:1 1 auto;min-width:0;align-self:stretch;display:flex !important;flex-direction:column;justify-content:center;align-items:flex-start;text-align:left;margin:0;padding:0}
  .photo-dots .tx b{display:flex;align-items:baseline;gap:3px;margin:0;font:800 15px/18px var(--font-body);letter-spacing:-.2px;white-space:nowrap;color:inherit}
  .photo-dots .tx b i{font-style:normal;font-weight:700;font-size:12px;line-height:18px;letter-spacing:0}
  .photo-dots .tx b.spent{text-decoration:line-through;text-decoration-thickness:2px;opacity:.55}
  .photo-dots .tx small{display:block;margin:2px 0 0 -.5px;font:600 12px/14px var(--font-body);opacity:.75;white-space:nowrap;color:inherit}
  .stage .photo-dots button[aria-pressed="true"] .tx small{display:none}
  .stage .photo-dots button.locked .tx{opacity:.8}
  .photo-dots.done .tx b{display:none}
  .stage .photo-dots.done button[aria-pressed="true"] .tx small{display:block}
  /* tapping a locked tile shows the usual Reveal / Keep confirm right under the tiles */
  .reveal-bar:has(.reveal-confirm),.reveal-bar:has(.err){display:block !important;margin:8px 14px 0 !important}
  /* credit lives in the footer only: small, muted, legible */
  footer.foot{margin:24px 12px 0 !important;padding:12px 14px !important;font-size:12px !important;background:var(--form-bg,var(--card,#fff)) !important;color:color-mix(in srgb,var(--form-ink,var(--ink)) 75%,transparent) !important}
  footer.foot a{color:inherit !important}
  html[data-theme="1980s"] footer.foot{background:#1d1046 !important;color:color-mix(in srgb,#f3e9ff 78%,transparent) !important}
  html[data-theme="1980s"] footer.foot .foot-credit{color:color-mix(in srgb,#f3e9ff 78%,transparent) !important}
  footer.foot .foot-credit{display:block !important;font-size:12px !important;line-height:1.45 !important;margin:0 0 8px !important;color:color-mix(in srgb,var(--form-ink,var(--ink)) 70%,transparent) !important}
  footer.foot .foot-credit:empty{display:none !important}
  footer.foot .foot-credit a{color:inherit !important;text-decoration:underline;text-underline-offset:2px}
  /* form: one large field at a time */
  #play{margin:0 !important;padding:0 !important;background:transparent !important}
  form.guess{margin:14px 12px 0 !important;padding:20px 18px 22px !important;border:var(--edge-w,2px) solid var(--edge,#111) !important;box-shadow:var(--edge-shadow) !important;border-radius:22px !important;
    background:var(--form-bg,#fff) !important;color:var(--form-ink,var(--ink)) !important;display:block !important}
  form.guess .field{display:none !important;margin:0 !important;padding:0 !important}
  form.guess .field.step-on{display:block !important}
  form.guess .field label{display:block !important;font-size:22px !important;line-height:1.2 !important;margin:0 0 14px !important;padding:0 !important;
    background:none !important;color:var(--form-ink,var(--ink)) !important;border:0 !important;box-shadow:none !important;transform:none !important;text-transform:none !important;letter-spacing:0 !important}
  form.guess .field .lab-std{display:none}
  /* 1980s: on phones the single big field sits straight on the dark panel (no sticky note behind the question) */
  [data-theme="1980s"] form.guess .field{background:none !important;border:0 !important;box-shadow:none !important;transform:none !important}
  [data-theme="1980s"] form.guess .field::before,[data-theme="1980s"] form.guess .field::after{display:none !important}
  form.guess .field .lab-q{display:inline}
  form.guess .field input{height:60px !important;min-height:60px !important;font-size:20px !important;padding:0 48px 0 16px !important}
  form.guess .field .toggle{width:44px !important;height:44px !important;top:8px !important;right:6px !important}
  form.guess .listbox{max-height:var(--list-max,236px) !important;font-size:17px}
  form.guess .submit-row{display:none !important}
  .step-lbl{display:block;font:600 15px/1.3 var(--font-body);opacity:.8;margin:0 0 8px}
  .step-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 0 16px}
  .step-chips:empty{display:none}
  .step-chips button{min-height:44px;padding:0 14px;border-radius:999px;border:2px solid var(--edge,#111);background:var(--field-bg,#fff);color:var(--field-ink,#111);font:700 16px/1 var(--font-body);cursor:pointer;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .step-chips button span{color:#1e8e3e;margin-left:5px}
  .step-mult{display:block;font:500 15px/1.4 var(--font-body);opacity:.85;margin:14px 0 0}
  .step-mult b{font-weight:800}
  .step-miss{font-weight:700;color:var(--red,#c0392b)}
  /* pinned Next / Submit bar, clear of the iPhone home bar; lifted above the keyboard by app.js (visualViewport) */
  .step-bar{position:fixed;left:0;right:0;bottom:0;z-index:40;box-sizing:border-box;padding:12px 14px max(14px, env(safe-area-inset-bottom));
    background:var(--form-bg,#fff);color:var(--form-ink,var(--ink));border-top:2px solid var(--edge,#111);display:flex !important;gap:10px;box-shadow:0 -6px 20px rgba(0,0,0,.12);
    -webkit-backdrop-filter:blur(16px) saturate(1.4);backdrop-filter:blur(16px) saturate(1.4);transition:transform .12s ease-out}
  .step-bar.kb{padding-bottom:10px}
  .step-bar button{flex:1;min-height:56px !important;margin:0 !important;font-size:19px !important}
  .step-bar #stepBack{flex:0 0 auto;min-width:56px;padding:0 16px !important}
  /* results: card with side margins */
  .results{margin:14px 12px 0 !important}
  .ended{margin:14px 12px 0 !important}
  .share .btn{flex:1 1 auto}
}
@media (max-width:360px){
  #game header.top .logo-mark{font-size:1.3rem !important}
  #game header.top .logo small.tagline{font-size:10.5px !important}
  .stage .photo-dots{gap:8px !important;padding:10px 10px 4px !important}
  .stage .photo-dots button{gap:4px !important;padding:4px 4px 4px 3px !important}
  .stage .photo-dots button img,.stage .photo-dots button.locked > .lk{flex-basis:30px !important;width:30px !important;height:44px !important}
  .photo-dots .tx b{font-size:14px}
  .photo-dots .tx small{font-size:11px}
  form.guess{padding:16px 14px 18px !important}
  form.guess .field label{font-size:20px !important;margin-bottom:10px !important}
  form.guess .field input{height:54px !important;min-height:54px !important;font-size:18px !important}
  .step-chips{margin-bottom:12px}
  .step-bar{padding:10px 12px max(12px, env(safe-area-inset-bottom))}
  .step-bar button{min-height:52px !important;font-size:17px !important}
}
/* short phones (e.g. 360x640): let the photo give up a little height so the first question sits above the pinned bar */
@media (max-width:480px) and (max-height:700px){
  .stage .viewer{aspect-ratio:auto !important;height:min(75vw,calc(100svh - 390px)) !important;min-height:220px}
}
@media (max-width:480px) and (prefers-color-scheme:dark){
  html[data-theme="2020s"] footer.foot{background:rgb(22,23,30) !important;color:color-mix(in srgb,#f5f5f7 76%,transparent) !important}
  html[data-theme="2020s"] footer.foot .foot-credit{color:color-mix(in srgb,#f5f5f7 76%,transparent) !important}
}