/* Vashon blind tasting - locked wine brand (reader-wine-rebuild D-073/D-079, 2026-10-10).
   White wall of flyers: pure white ground, flat-colour cards with square corners, hairline edge and a soft
   paper shadow. Otherworld palette. Pangaia (light lowercase serif) for names and titles, Lettra Mono
   lowercase for details. One solid button per screen. Emblem bottom-right. Airy at rest, loud at the payoff. */

@font-face{font-family:'Pangaia';src:url('/static/fonts/pangaia-ultralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}
@font-face{font-family:'Pangaia';src:url('/static/fonts/pangaia-medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Pangaia';src:url('/static/fonts/pangaia-mediumitalic.otf') format('opentype');font-weight:500;font-style:italic;font-display:swap}
@font-face{font-family:'Lettra';src:url('/static/fonts/lettra-medium.otf') format('opentype');font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:'Lettra';src:url('/static/fonts/lettra-ultralight.otf') format('opentype');font-weight:200;font-style:normal;font-display:swap}

:root{
  --ground:#ffffff;
  --ink:#111111;
  --ink-soft:rgba(17,17,17,.55);
  --placeholder:rgba(17,17,17,.35);
  --hair:rgba(17,17,17,.18);
  --rule:rgba(17,17,17,.10);
  --red:#F04452;      /* red flight */
  --lemon:#F9C307;    /* white flight */
  --orange:#FB5A29;   /* payoff, warnings */
  --rose:#F3B8C6;     /* soft fills */
  --cobalt:#042BD0;   /* the one solid button, the emblem */
  --error:#FB5A29;
  --flight-white:var(--lemon);
  --flight-red:var(--red);
  --paper:0 1px 0 rgba(17,17,17,.06), 0 6px 18px rgba(17,17,17,.10);
  --paper-lift:0 1px 0 rgba(17,17,17,.06), 0 2px 6px rgba(17,17,17,.10);
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{background:var(--ground);color:var(--ink);font-family:-apple-system,BlinkMacSystemFont,'Helvetica Neue',Helvetica,Arial,sans-serif;font-weight:400;font-size:16px;line-height:1.5;-webkit-font-smoothing:antialiased}
.mono{font-family:'Lettra','Courier New',monospace;font-weight:500}
.serif{font-family:'Pangaia',Georgia,serif;font-weight:500}
a,a:visited{color:inherit}

.page{max-width:430px;margin:0 auto;padding:22px 18px 110px;min-height:100vh;position:relative}
.page::after,.tv::after{content:"";position:fixed;right:18px;bottom:16px;width:40px;height:40px;background:url('/static/icon-180.png') center/cover no-repeat;opacity:.95;pointer-events:none;z-index:5}

/* type */
h1.title{font-family:'Pangaia',Georgia,serif;font-weight:200;font-size:44px;line-height:1;letter-spacing:0;margin:0 0 8px}
.subtitle{font-size:14px;color:var(--ink-soft);margin:0 0 20px}
.section-label{font-family:'Pangaia',Georgia,serif;font-weight:500;font-size:22px;line-height:1.1;color:var(--ink);margin:28px 0 12px}
.body-text{font-size:16px;line-height:1.55}
.muted{font-size:14px;color:var(--ink-soft)}
.field-label{font-size:13px;font-weight:600;color:var(--ink);margin-bottom:6px;display:block}
.label-name,.rank-label,.host-title{font-family:'Pangaia',Georgia,serif;font-weight:500;font-size:22px;line-height:1.1}
.success-tag{font-size:13px;color:var(--cobalt);margin:0 0 14px}
.lock-tag{font-size:12px;color:var(--ink-soft);margin:16px 0 0}
.warn-inline{font-size:13px;color:var(--orange);margin-top:6px}
.error-box{background:var(--rose);border:1px solid var(--hair);padding:12px 14px;font-size:13px;margin-bottom:16px;line-height:1.5}

/* the flyer card */
.card{background:#fff;border:1px solid var(--hair);box-shadow:var(--paper);margin-bottom:16px;padding:16px}
a.card,a.tap-btn,a.btn{text-decoration:none;color:inherit}
.divider{height:1px;background:var(--rule);margin:18px 0;border:none}

/* flight pill = identity: flat colour, lowercase */
.pill{display:inline-flex;align-items:center;height:28px;padding:0 10px;font-size:13px;font-weight:600;border:1px solid var(--hair)}
.pill-white{background:var(--lemon);color:var(--ink)}
.pill-red{background:var(--red);color:#fff}

.topbar{display:flex;align-items:center;justify-content:space-between;margin-bottom:18px}
.backlink{font-family:'Lettra',monospace;font-weight:500;font-size:12px;color:var(--ink-soft);text-decoration:none}

/* inputs */
.input{width:100%;height:50px;background:#fff;border:1px solid var(--hair);box-shadow:var(--paper-lift);color:var(--ink);font-size:16px;font-family:inherit;font-weight:400;padding:0 14px;margin-bottom:16px;border-radius:0}
.input::placeholder{color:var(--placeholder)}
.input:focus{outline:none;border-color:var(--cobalt)}
textarea.input{height:70px;padding:12px 14px;resize:none;line-height:1.4}
.input[type=file]{height:auto;padding:10px;box-shadow:none;border-style:dashed}

/* buttons: one solid cobalt button per screen; everything else hairline */
.btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:54px;border:1px solid var(--hair);background:#fff;box-shadow:var(--paper-lift);font-size:15px;font-family:'Lettra',monospace;font-weight:500;cursor:pointer;color:var(--ink);border-radius:0}
.btn-primary{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.btn-secondary{background:#fff}
.btn-ghost{background:transparent;color:var(--ink-soft);border:none;box-shadow:none;min-height:44px;font-size:13px}
.btn:disabled{opacity:.45;cursor:default;box-shadow:none}
button.btn{font-family:inherit}

/* decision controls: hairline at rest, solid ink when chosen (colour says what the wine is, ink says what you decided) */
.tap-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:22px}
.tap-btn,.trait-opt,.chip{min-height:50px;border:1px solid var(--hair);background:#fff;box-shadow:var(--paper-lift);color:var(--ink);font-size:14px;font-family:'Lettra',monospace;font-weight:500;display:flex;align-items:center;justify-content:center;text-align:center;cursor:pointer;-webkit-user-select:none;user-select:none;padding:4px 12px}
.tap-btn.sel-x,.trait-opt.sel-x,.chip.sel-x,.btn-secondary.sel-x{background:var(--ink);border-color:var(--ink);color:#fff;box-shadow:none}
.tap-btn.sel-x::before,.chip.sel-x::before{content:"\2713  "}
.trait-row{margin-bottom:18px}
.trait-options{display:flex;gap:8px}
.trait-opt{flex:1;min-height:46px;font-size:13px}
.chip-wrap{display:flex;flex-wrap:wrap;gap:8px 10px;margin-bottom:8px}
.chip{min-height:42px;padding:0 14px;font-size:13px}

/* flight list */
.flight-list-item{display:flex;align-items:center;gap:12px;min-height:54px;padding:8px 0;border-bottom:1px solid var(--rule);text-decoration:none;color:inherit}
.flight-list-item:last-child{border-bottom:none}
.dot{width:18px;height:18px;border-radius:50%;border:1.5px solid var(--ink);flex-shrink:0;background:#fff}
.dot.done-white,.dot.done-red{background:var(--ink)}
.label-name{flex:1}
.verdict-tag{font-size:14px;color:var(--ink-soft)}

/* ranking rows: flat colour cards, the rank is big */
.rank-row{background:#fff;border:1px solid var(--hair);box-shadow:var(--paper);padding:12px 14px;margin-bottom:12px;display:flex;align-items:center;gap:12px}
.rank-num{font-family:'Pangaia',Georgia,serif;font-weight:200;font-size:36px;line-height:1;width:34px;color:var(--ink);font-variant-numeric:tabular-nums}
.rank-info{flex:1}
.rank-tags{font-size:13px;color:var(--ink-soft);margin-top:2px}
.arrow-pair{display:flex;flex-direction:column;gap:4px}
.arrow-btn{width:44px;height:24px;border:1px solid var(--hair);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;font-size:11px;cursor:pointer;font-family:inherit}
.arrow-btn:disabled{opacity:.4}

/* which is yours */
.radio-row{display:flex;align-items:center;gap:14px;min-height:52px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:16px;cursor:pointer;font-family:'Pangaia',Georgia,serif;font-weight:500}
.radio-row:last-child{border-bottom:none}
.radio-dot{width:22px;height:22px;border-radius:50%;border:1.5px solid var(--ink);flex-shrink:0;display:flex;align-items:center;justify-content:center;background:#fff}
.radio-dot.checked-x::after{content:"";width:12px;height:12px;border-radius:50%;background:var(--ink)}

/* organiser */
.status-row{display:flex;align-items:center;justify-content:space-between;min-height:48px;padding:8px 0;border-bottom:1px solid var(--rule);font-size:15px}
.status-row:last-child{border-bottom:none}
.check-yes{color:var(--cobalt)}
.check-no{color:var(--ink-soft)}
.big-count{text-align:center;margin:8px 0 22px}
.big-count .num{font-family:'Pangaia',Georgia,serif;font-weight:200;font-size:72px;line-height:1;font-variant-numeric:tabular-nums}
.big-count .label{font-size:12px;color:var(--ink-soft);margin-top:6px}
table.rewrap{width:100%;border-collapse:collapse;font-size:16px}
table.rewrap th{text-align:left;font-size:12px;color:var(--ink-soft);font-weight:500;padding-bottom:10px;border-bottom:1px solid var(--ink)}
table.rewrap td{padding:12px 0;border-bottom:1px solid var(--rule)}
table.rewrap td.check{text-align:right}
.checkbox{width:22px;height:22px;border:1.5px solid var(--ink);display:inline-block}

/* photos: dashed = not yet, solid + paper = real */
.photo-slot{border:1.5px dashed var(--hair);background:#fff;min-height:132px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;color:var(--ink);font-size:14px;font-weight:500;text-align:center;padding:10px}
.photo-slot svg{width:36px;height:36px;stroke:var(--cobalt);fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.photo-slot .cam-icon{font-size:22px;line-height:1}
.photo-slot.has-photo{border:1px solid var(--hair);box-shadow:var(--paper);padding:0;overflow:hidden;position:relative;min-height:132px}
img{max-width:100%}

/* host */
.host-beat{font-size:12px;color:var(--ink-soft);margin-bottom:10px}
.host-title{font-weight:200;font-size:38px;margin:0 0 28px}
.host-next{width:100%;min-height:96px;border:1px solid var(--cobalt);background:var(--cobalt);color:#fff;font-size:22px;font-family:'Pangaia',Georgia,serif;font-weight:500;display:flex;align-items:center;justify-content:center;cursor:pointer;border-radius:0}
.host-back{margin-top:12px;font-size:13px;color:var(--ink-soft);border:1px solid var(--hair);padding:12px 0;text-align:center;cursor:pointer;font-family:inherit;border-radius:0}
.host-next:disabled,.host-back:disabled{opacity:.4}

/* TV: the payoff is loud. A full-colour band carries the flight; the wine name is the biggest thing in the room. */
.tv{width:100%;min-height:100vh;position:relative;background:var(--ground)}
.tv-screen{min-height:100vh;display:flex;align-items:center;justify-content:center}
.tv-screen>.tv-inner{padding:40px 24px}
.tv-inner{width:100%;max-width:1100px;margin:0 auto;text-align:center;padding:0 40px}
.tv-band{position:fixed;top:0;left:0;right:0;height:clamp(90px,16vh,180px);z-index:1;display:flex;align-items:center;justify-content:center}
.tv-band.band-white{background:var(--lemon)}
.tv-band.band-red{background:var(--red)}
.tv-band .tv-flight-tag{font-family:'Pangaia',Georgia,serif;font-weight:500;font-size:clamp(18px,2.4vw,30px);color:var(--ink);margin:0}
.tv-band.band-red .tv-flight-tag{color:#fff}
.tv-under-band{padding-top:calc(clamp(90px,16vh,180px) + 36px);padding-bottom:72px;text-align:left}
.tv-layout{display:flex;align-items:center;gap:clamp(20px,5vw,64px);flex-wrap:wrap}
.tv-right{flex:1;min-width:280px}
.tv-label{font-family:'Pangaia',Georgia,serif;font-weight:200;font-size:clamp(56px,10vw,128px);line-height:.95;margin:0}
.tv-identity{font-size:clamp(16px,2vw,24px);color:var(--ink-soft);margin:16px 0 0}
.tv-priceline{font-size:clamp(16px,2vw,24px);margin:16px 0 0}
.tv-priceline .accent{color:var(--cobalt)}
.tv-divider{width:64px;height:1px;background:var(--ink);margin:28px 0;border:none}
.tv-section-label{font-family:'Lettra',monospace;font-weight:500;font-size:clamp(12px,1.4vw,16px);color:var(--ink-soft);margin:0 0 16px}
.tv-verdicts{display:grid;grid-template-columns:1fr 1fr;gap:12px 40px;font-size:clamp(14px,1.6vw,18px);margin:0}
.tv-verdicts .vgroup b{font-weight:500;color:var(--ink-soft)}
.tv-placement{font-family:'Pangaia',Georgia,serif;font-weight:500;font-size:clamp(22px,3vw,40px);margin-top:20px}
.tv-placement .sep{color:var(--ink-soft);margin:0 14px;font-weight:200}
.tv-guessed{font-size:clamp(14px,1.8vw,20px);margin-top:10px}
.tv-progress{position:fixed;bottom:22px;left:24px;font-family:'Lettra',monospace;font-size:12px;color:var(--ink-soft)}
.tv-label-photo{width:clamp(180px,24vw,300px);height:clamp(240px,32vw,400px);flex-shrink:0;background:#fff;border:1px solid var(--hair);box-shadow:var(--paper);display:flex;align-items:center;justify-content:center;overflow:hidden;padding:10px}
.tv-table{width:100%;border-collapse:collapse;font-size:clamp(13px,min(1.8vw,2.6vh),22px);text-align:left}
.tv-table td{padding:clamp(5px,1.1vh,12px) 10px;border-bottom:1px solid var(--rule);vertical-align:top}
.tv-table td.num{font-variant-numeric:tabular-nums;white-space:nowrap}
.tv-table .serif{font-size:1.2em}
@media (max-width:600px){.tv-layout{flex-direction:column;align-items:flex-start}.tv-verdicts{grid-template-columns:1fr}.tv-inner{padding:0 18px}}

.tv-label-photo.tv-back{width:clamp(110px,14vw,170px);height:clamp(150px,19vw,230px);margin-left:-8px}
.photo-slot.has-photo:has(input){border-style:solid;color:var(--cobalt)}
.photo-grid2{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:10px;align-items:start}
.photo-slot.has-photo img{height:150px}

/* home: the walk-through */
.lede{font-family:'Pangaia',Georgia,serif;font-weight:500;font-size:20px;line-height:1.3;margin:0 0 8px}
.wine-card{padding:16px;margin-bottom:12px;border:1px solid var(--hair);box-shadow:var(--paper)}
.wine-white{background:var(--lemon);color:var(--ink)}
.wine-red{background:var(--red);color:#fff}
.wine-kicker{font-size:12px;opacity:.8;margin-bottom:6px}
.wine-name{font-size:30px;font-weight:200;line-height:1}
.wine-text{font-size:15px;line-height:1.5;margin:10px 0 0}
.steps{border-top:1px solid var(--rule)}
.step{display:flex;gap:14px;padding:14px 0;border-bottom:1px solid var(--rule)}
.step-num{font-weight:200;font-size:40px;line-height:.9;width:34px;flex-shrink:0;color:var(--ink)}
.step.is-done .step-num,.step.is-done .step-title{color:var(--ink-soft)}
.step.is-now .step-num{color:var(--cobalt)}
.step-title{font-weight:500;font-size:20px;line-height:1.1;margin-bottom:4px}
.step-text{font-size:15px;line-height:1.5;margin:0;color:var(--ink)}
.step.is-done .step-text{color:var(--ink-soft)}
.step-tag{display:inline-block;font-family:'Lettra',monospace;font-size:11px;vertical-align:middle;padding:2px 8px;margin-left:6px;border:1px solid var(--hair);line-height:1.4}
.step-tag.now{background:var(--cobalt);color:#fff;border-color:var(--cobalt)}
.step-tag.done{color:var(--ink-soft)}
.card-now{border-color:var(--cobalt)}

.ai-panel{border:1px solid var(--hair);padding:12px 14px;margin:0 0 16px;font-size:15px;line-height:1.5}
.ai-panel.reading{background:#fff;color:var(--ink-soft);border-style:dashed}
.ai-panel.done{background:#fff;border-color:var(--cobalt)}
.ai-panel.failed{background:var(--rose)}

.tv-map{width:100%;height:clamp(180px,26vw,320px);border:1px solid var(--hair);box-shadow:var(--paper);margin-top:16px;background:#f4f4f2}
.tv-layout>.tv-left{flex-shrink:0;width:clamp(200px,30vw,360px)}

/* tappable things say so: an arrow on the right, and the card lifts a touch on press */
.linkcard{display:block;text-decoration:none;color:inherit;position:relative;cursor:pointer}
.card.linkcard{padding-right:44px}
.card-arrow{position:absolute;right:16px;top:50%;transform:translateY(-50%);font-size:22px;color:var(--cobalt)}
.card-now .card-arrow{color:var(--cobalt)}
.linkcard:active{transform:translateY(1px);box-shadow:var(--paper-lift)}
.tap-hint{display:inline-block;margin-top:12px;font-family:'Lettra',monospace;font-weight:500;font-size:12px;border-bottom:1px solid currentColor;padding-bottom:1px}
.wine-card.linkcard{color:inherit}
.wine-red.linkcard,.wine-red.linkcard .tap-hint{color:#fff}
details.walk summary{list-style:none;cursor:pointer;display:flex;flex-direction:column;gap:4px;margin:28px 0 12px;position:relative;padding-right:28px}
details.walk summary::-webkit-details-marker{display:none}
details.walk summary::after{content:"+";position:absolute;right:0;top:0;font-family:'Pangaia',Georgia,serif;font-size:26px;line-height:1;color:var(--cobalt)}
details.walk[open] summary::after{content:"\2013"}
.region-map{width:100%;height:300px;border:1px solid var(--hair);box-shadow:var(--paper);background:#f4f4f2;margin-top:8px}
.region-map{position:relative}
.map-note{position:absolute;left:12px;right:12px;bottom:12px;background:#fff;border:1px solid var(--hair);padding:10px 12px;font-size:14px;color:var(--ink);z-index:5}
.drag-handle{width:28px;align-self:stretch;display:flex;align-items:center;justify-content:center;color:var(--ink-soft);font-size:18px;letter-spacing:-6px;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;margin-left:-6px}
.rank-ghost{position:fixed;z-index:50;pointer-events:none;box-shadow:0 10px 30px rgba(0,0,0,.18);background:#fff;margin:0}
.rank-placeholder{opacity:.3;border-style:dashed}
.vbar{display:flex;height:22px;overflow:hidden;border:1px solid var(--hair);background:var(--ground)}
.vbar div{min-width:4px}
.vlegend{margin-top:6px;font-size:13px}
.dotc{display:inline-block;width:10px;height:10px;margin-right:4px;vertical-align:-1px;border:1px solid var(--hair)}
a.btn-primary,a.btn-primary:visited{color:#fff}
.tip{position:relative;cursor:help;outline:none}
.tip-mark{display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;margin-left:6px;border:1px solid var(--ink-soft);border-radius:50%;font-size:11px;line-height:1;color:var(--ink-soft);vertical-align:2px;font-family:system-ui,sans-serif;font-weight:500}
.tip-box{display:none;position:absolute;left:0;top:calc(100% + 6px);z-index:20;width:min(300px,80vw);padding:10px 12px;background:var(--ink);color:#fff;font-size:13px;line-height:1.45;font-weight:400;font-family:system-ui,-apple-system,sans-serif;text-align:left;white-space:normal;box-shadow:var(--paper-lift)}
.tip:hover .tip-box,.tip:focus .tip-box,.tip:focus-within .tip-box{display:block}
#lightbox{display:none;position:fixed;inset:0;z-index:100;background:rgba(0,0,0,.92);align-items:center;justify-content:center;cursor:zoom-out}
#lightbox img{max-width:100vw;max-height:100vh;object-fit:contain}
a.zoom{display:block;max-width:48%}