/* =====================================================================
   FUN GUY — Store Check
   Palette: FUN GUY brand book 2024, p.24 (mushroom names kept verbatim)
   Type:    PP Formula — Light for body, Extrabold for headlines
   ===================================================================== */

@font-face {
  font-family: 'PP Formula';
  src: url('./brand/fonts/PPFormula-Light.otf') format('opentype');
  font-weight: 300; font-style: normal; font-display: swap;
}
@font-face {
  font-family: 'PP Formula';
  src: url('./brand/fonts/PPFormula-Extrabold.otf') format('opentype');
  font-weight: 800; font-style: normal; font-display: swap;
}

:root {
  /* brand palette */
  --black-trumpet:  #081D4B;   /* primary deep navy   Pantone 274  */
  --indigo-milk:    #023A56;   /* secondary text      Pantone 302  */
  --magic:          #116E8A;   /*                     Pantone 2223 */
  --blue-round:     #8FB2AC;   /*                     Pantone 5483 */
  --lions-mane:     #DBD9D5;   /* rules, dividers     Wm Gray 1    */
  --oyster:         #EEDCB6;   /* primary cream bg    Pantone 7506 */
  --cordyceps:      #F0AB6E;   /* peach               Pantone 1375 */
  --caesar:         #E5723F;   /* primary accent      Pantone 7579 */
  --lobster:        #E15B2A;   /*                     Pantone 5575 */
  --reishi:         #E14C32;   /* alerts              Pantone 714  */
  --chanterelle:    #F3992E;   /* bright orange       Pantone 164  */
  --pixies-parasol: #3C8A96;   /* teal                Pantone 7597 */
  --white:          #FFFFFF;

  /* semantic */
  --bg:      var(--oyster);
  --ink:     var(--black-trumpet);
  --muted:   var(--indigo-milk);
  --line:    var(--lions-mane);
  --card:    var(--white);
  --accent:  var(--caesar);
  --ok-bg:   #E4EFED;
  --warn-bg: #FBEBD8;
  --err-bg:  #FBE4DE;

  --radius: 14px;
  --shadow: 0 1px 2px rgba(8,29,75,.06), 0 10px 30px rgba(8,29,75,.08);
  --font: 'PP Formula', 'Helvetica Neue', -apple-system, BlinkMacSystemFont, sans-serif;

  /* type system: all caps + tracking for headings, sentence case body */
  --track-tight: .02em;   /* +20  */
  --track-wide:  .06em;   /* +60  */
  --track-max:   .10em;   /* +100 */
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }

body {
  font-family: var(--font);
  font-weight: 300;
  background: var(--bg);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
}

/* grain — applied to the artwork surfaces, the way the brand uses it.
   Deliberately NOT a page-wide fixed overlay: a full-viewport fixed layer with
   mix-blend-mode forces the whole document into one composited layer and
   repaints badly while scrolling (worst on iOS Safari). */
.grained { position: relative; }
.grained > * { position: relative; z-index: 1; }
.grained::before {
  content: ""; position: absolute; inset: 0; z-index: 0; pointer-events: none;
  opacity: .16;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='180' height='180' filter='url(%23n)'/%3E%3C/svg%3E");
}

a { color: var(--pixies-parasol); }

/* ---------- headings: all caps, tracked, Extrabold ---------- */
h1, h2, h3, .caps {
  font-weight: 800;
  text-transform: uppercase;
  letter-spacing: var(--track-wide);
  line-height: 1.12;
  margin: 0;
}

/* ---------- layout ---------- */
.wrap { max-width: 780px; margin: 0 auto; padding: 0 18px 96px; }
.wrap-wide { max-width: 1180px; }

header.masthead { background: var(--black-trumpet); color: var(--oyster); }
.masthead-inner {
  max-width: 780px; margin: 0 auto; padding: 20px 18px;
  display: flex; align-items: center; justify-content: space-between; gap: 18px;
}
.masthead-inner.wide { max-width: 1180px; }
.masthead .wordmark { display: block; width: 116px; height: auto; color: var(--oyster); flex: 0 0 auto; }
.masthead .divider {
  width: 1px; align-self: stretch; background: rgba(238,220,182,.28); margin: 0 2px;
}
.masthead .page-name {
  font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-max);
  font-size: 13px; color: var(--chanterelle); line-height: 1.2;
}
.masthead .sub {
  font-size: 12px; color: rgba(238,220,182,.72); text-transform: uppercase;
  letter-spacing: var(--track-wide); margin-left: auto;
}
/* The Illustration, cut into the rule under the masthead */
.brand-rule {
  height: 30px;
  background: url('./brand/illustration-band.webp') center/cover no-repeat, var(--black-trumpet);
}
@media (max-width: 560px) { .brand-rule { height: 22px; } }

/* ---------- hero ---------- */
.hero {
  position: relative; overflow: hidden;
  border-radius: var(--radius); margin: 26px 0 8px; padding: 34px 28px;
  color: var(--white); box-shadow: var(--shadow);
  background:
    linear-gradient(155deg, rgba(8,29,75,.93) 0%, rgba(8,29,75,.66) 48%, rgba(8,29,75,.88) 100%),
    url('./brand/blend-hero.webp') 22% 40%/cover no-repeat, var(--black-trumpet);
}
.hero h1 {
  font-size: clamp(28px, 5.6vw, 44px);
  letter-spacing: var(--track-tight);
  line-height: 1.04;
  margin-bottom: 14px;
}
.hero p {
  margin: 0 0 8px; font-size: 16px; color: rgba(255,255,255,.92); max-width: 54ch;
}
.hero .reward {
  display: inline-flex; align-items: center; gap: 9px; margin-top: 18px;
  background: var(--caesar); color: var(--black-trumpet);
  font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-wide);
  padding: 10px 18px; border-radius: 999px; font-size: 14px;
}
.hero .reward .bolt { width: 11px; height: auto; color: var(--black-trumpet); }

/* ---------- step pips ---------- */
.steps { display: flex; gap: 6px; margin: 26px 0 18px; flex-wrap: wrap; }
.step-pip {
  flex: 1 1 0; min-width: 96px; font-size: 10.5px; font-weight: 800;
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted);
  white-space: nowrap;
  opacity: .55; border-top: 3px solid var(--line); padding-top: 9px;
}
.step-pip.active { color: var(--caesar); border-top-color: var(--caesar); opacity: 1; }
.step-pip.done   { color: var(--ink);    border-top-color: var(--chanterelle); opacity: 1; }

/* ---------- panels ---------- */
section.panel {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 24px; margin-bottom: 18px;
  box-shadow: var(--shadow);
}
section.panel h2 { font-size: 21px; letter-spacing: var(--track-wide); margin-bottom: 8px; }
section.panel .hint { margin: 0 0 20px; color: var(--muted); font-size: 14.5px; }
.hidden { display: none !important; }

/* ---------- forms ---------- */
label.field { display: block; margin-bottom: 18px; }
label.field > span.lbl {
  display: block; font-weight: 800; font-size: 11.5px; margin-bottom: 7px;
  text-transform: uppercase; letter-spacing: var(--track-max); color: var(--ink);
}
label.field .sublbl {
  font-weight: 300; text-transform: none; letter-spacing: 0; color: var(--muted);
}
input[type=text], input[type=email], input[type=search],
input[type=number], input[type=password], select, textarea {
  width: 100%; padding: 12px 14px; font: inherit; font-size: 16px; font-weight: 300;
  border: 1.5px solid var(--line); border-radius: 10px; background: var(--white);
  color: var(--ink);
}
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--pixies-parasol);
  box-shadow: 0 0 0 3px rgba(60,138,150,.20);
}
textarea { min-height: 84px; resize: vertical; }
.row { display: flex; gap: 12px; flex-wrap: wrap; }
.row > * { flex: 1 1 220px; }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 9px;
  font-family: var(--font); font-weight: 800; font-size: 14px;
  text-transform: uppercase; letter-spacing: var(--track-wide);
  cursor: pointer; padding: 14px 24px; border-radius: 999px; border: 2px solid transparent;
  background: var(--black-trumpet); color: var(--oyster);
  transition: transform .06s ease, background .15s ease, color .15s ease;
}
.btn:hover:not(:disabled) { background: var(--indigo-milk); }
.btn:active:not(:disabled) { transform: translateY(1px); }
.btn:disabled { opacity: .4; cursor: not-allowed; }
.btn.secondary {
  background: transparent; color: var(--ink); border-color: var(--line);
}
.btn.secondary:hover:not(:disabled) { background: #F4F1EA; }
.btn.orange { background: var(--caesar); color: var(--black-trumpet); }
.btn.orange:hover:not(:disabled) { background: var(--lobster); color: var(--white); }
.btn.small { font-size: 11.5px; padding: 9px 16px; letter-spacing: var(--track-max); }
.btn .bolt { width: 9px; height: auto; }
.btn-row { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 22px; align-items: center; }

/* ---------- store list ---------- */
.search-bar { display: flex; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; }
.search-bar input { flex: 3 1 240px; }
.search-bar select { flex: 1 1 150px; }
.locate-btn { flex: 0 0 auto; }

.store-list {
  list-style: none; margin: 0; padding: 0; max-height: 460px; overflow-y: auto;
  border: 1.5px solid var(--line); border-radius: 10px;
}
.store-item { border-bottom: 1px solid var(--line); }
.store-item:last-child { border-bottom: none; }
.store-item label { display: flex; gap: 13px; align-items: flex-start; padding: 14px; cursor: pointer; }
.store-item label:hover { background: #FAF7F0; }
.store-item input[type=checkbox] {
  margin-top: 3px; width: 19px; height: 19px; accent-color: var(--caesar); flex: 0 0 auto;
}
.store-item .nm {
  font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-tight); font-size: 14.5px;
}
.store-item .addr { font-size: 14px; color: var(--muted); }
.store-item .dist {
  font-size: 11px; font-weight: 800; color: var(--caesar);
  text-transform: uppercase; letter-spacing: var(--track-max); margin-top: 2px;
}
.store-item.is-checked { background: var(--warn-bg); }
.list-meta { font-size: 13px; color: var(--muted); margin: 10px 2px 0; }

/* ---------- report cards ---------- */
.report-card {
  border: 1.5px solid var(--line); border-radius: 12px; padding: 20px;
  margin-bottom: 16px; background: var(--white);
}
.report-card > h3 { font-size: 16px; letter-spacing: var(--track-wide); margin-bottom: 3px; }
.report-card > .addr { color: var(--muted); font-size: 14px; margin-bottom: 18px; }
.q-label {
  font-weight: 800; font-size: 11.5px; margin-bottom: 8px;
  text-transform: uppercase; letter-spacing: var(--track-max);
}
.choice-row { display: flex; gap: 10px; margin-bottom: 18px; flex-wrap: wrap; }
.choice {
  flex: 1 1 140px; border: 2px solid var(--line); border-radius: 10px; padding: 13px;
  text-align: center; font-weight: 800; font-size: 13px; cursor: pointer; background: var(--white);
  text-transform: uppercase; letter-spacing: var(--track-wide); color: var(--muted);
}
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice.sel-yes { border-color: var(--pixies-parasol); background: var(--ok-bg); color: var(--pixies-parasol); }
.choice.sel-no  { border-color: var(--reishi); background: var(--err-bg); color: var(--reishi); }

.photo-drop {
  display: block;            /* a <label> is inline by default, which fragments the border */
  border: 2px dashed var(--line); border-radius: 12px; padding: 22px;
  text-align: center; cursor: pointer; background: #FCFAF5;
}
.photo-drop:hover { border-color: var(--caesar); background: var(--warn-bg); }
.photo-drop input[type=file] { display: none; }
.photo-drop .shroom { display: block; width: 30px; height: auto; margin: 0 auto; color: var(--caesar); }
.photo-drop .t {
  font-weight: 800; margin-top: 8px; text-transform: uppercase;
  letter-spacing: var(--track-wide); font-size: 13px;
}
.photo-drop .s { font-size: 13px; color: var(--muted); margin-top: 3px; }
.photo-preview { margin-top: 12px; display: flex; gap: 13px; align-items: center; }
.photo-preview img {
  width: 96px; height: 96px; object-fit: cover; border-radius: 10px; border: 1.5px solid var(--line);
}
.photo-preview .meta { font-size: 13px; color: var(--muted); }

/* ---------- notices ---------- */
.notice {
  border-radius: 10px; padding: 13px 15px; font-size: 14px; margin-bottom: 16px;
  border: 1.5px solid transparent;
}
.notice.info { background: var(--ok-bg);   border-color: #BBD5D2; color: #14555C; }
.notice.warn { background: var(--warn-bg); border-color: #EFCFA4; color: #8A4A16; }
.notice.err  { background: var(--err-bg);  border-color: #F1BCB0; color: #9E2E1A; }
.notice b { font-weight: 800; }

.progress-track {
  height: 9px; background: var(--line); border-radius: 999px; overflow: hidden; margin-top: 14px;
}
.progress-fill { height: 100%; width: 0%; background: var(--caesar); transition: width .25s ease; }

/* ---------- confirmation ---------- */
.panel.done-panel {
  color: var(--white); border: none;
  background:
    linear-gradient(180deg, rgba(8,29,75,.88), rgba(8,29,75,.80)),
    url('./brand/blend-soft.webp') center/cover no-repeat, var(--black-trumpet);
}
.panel.done-panel h2 { color: var(--white); }
.panel.done-panel .hint { color: rgba(255,255,255,.88); }
.panel.done-panel .notice.info {
  background: rgba(255,255,255,.10); border-color: rgba(238,220,182,.35); color: var(--oyster);
}
.panel.done-panel .btn.secondary { color: var(--oyster); border-color: rgba(238,220,182,.45); }
.panel.done-panel .btn.secondary:hover { background: rgba(255,255,255,.10); }
.done-shroom { width: 54px; height: auto; color: var(--chanterelle); margin-bottom: 10px; }

.fineprint { font-size: 12.5px; color: var(--muted); margin-top: 30px; }
.fineprint .caps { font-size: 11px; letter-spacing: var(--track-max); color: var(--ink); }
.fineprint ul { padding-left: 18px; margin: 8px 0 0; }
.fineprint li { margin-bottom: 3px; }
.signoff { display: flex; align-items: center; gap: 8px; margin-top: 18px; opacity: .75; }
.signoff .bolt { width: 10px; height: auto; color: var(--caesar); }
.signoff span {
  font-size: 10.5px; font-weight: 800; text-transform: uppercase; letter-spacing: var(--track-max);
}

/* ---------- admin ---------- */
.admin-toolbar { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 16px; }
.admin-toolbar input[type=search] { flex: 2 1 220px; }
.admin-toolbar select { flex: 0 1 180px; }
.stat-row { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 18px; }
.stat {
  flex: 1 1 130px; background: var(--white); border: 1.5px solid var(--line);
  border-radius: 12px; padding: 15px;
}
.stat .n { font-size: 28px; font-weight: 800; line-height: 1; letter-spacing: var(--track-tight); }
.stat .l {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: var(--track-max);
  color: var(--muted); margin-top: 6px; font-weight: 800;
}

.sub-card {
  background: var(--white); border: 1.5px solid var(--line); border-radius: 12px;
  padding: 16px; margin-bottom: 14px; display: flex; gap: 16px; flex-wrap: wrap;
}
.sub-card .thumb {
  flex: 0 0 168px; height: 168px; border-radius: 10px; overflow: hidden;
  background: #EFEBE2; display: flex; align-items: center; justify-content: center;
}
.sub-card .thumb img { width: 100%; height: 100%; object-fit: cover; cursor: zoom-in; }
.sub-card .body { flex: 1 1 300px; min-width: 260px; }
.sub-card h3 { margin-bottom: 3px; font-size: 15px; letter-spacing: var(--track-wide); }
.sub-card .kv { font-size: 13.5px; color: var(--muted); margin: 2px 0; }
.sub-card .kv b { color: var(--ink); font-weight: 800; }

.tag {
  display: inline-block; font-size: 10px; font-weight: 800; text-transform: uppercase;
  letter-spacing: var(--track-max); padding: 4px 10px; border-radius: 999px;
  margin: 0 6px 4px 0;
}
.tag.pending  { background: var(--warn-bg); color: #8A4A16; }
.tag.approved { background: var(--ok-bg);   color: #14555C; }
.tag.rejected { background: var(--err-bg);  color: #9E2E1A; }
.tag.paid     { background: #E1EAEE;        color: var(--indigo-milk); }
.tag.flag     { background: var(--err-bg);  color: #9E2E1A; }
.tag.verified { background: var(--ok-bg);   color: #14555C; }

.lightbox {
  position: fixed; inset: 0; background: rgba(8,29,75,.94); display: flex;
  align-items: center; justify-content: center; z-index: 50; padding: 24px; cursor: zoom-out;
}
.lightbox img { max-width: 100%; max-height: 100%; border-radius: 8px; }

@media (max-width: 560px) {
  .sub-card .thumb { flex: 1 1 100%; height: 200px; }
  .masthead .wordmark { width: 92px; }
  .masthead-inner { padding: 16px 18px; gap: 12px; }

  /* the store picker should be reachable without a long scroll —
     people open this standing in the aisle */
  .hero { padding: 22px 18px; margin-top: 18px; }
  .hero h1 { font-size: 27px; }
  .hero p { font-size: 14.5px; line-height: 1.5; margin-bottom: 6px; }
  .hero .reward { margin-top: 14px; padding: 9px 15px; font-size: 12.5px; }

  /* 2 x 2 instead of an orphaned fourth pip */
  .steps { gap: 8px 10px; margin: 20px 0 16px; }
  .step-pip { flex: 1 1 42%; min-width: 0; }

  section.panel { padding: 18px; }
  section.panel h2 { font-size: 18px; }
}