/* Field Guide — ported from design-options/05-brutalist.html. Keyframes are global, so they're prefixed guide-. */
[data-tab="guide"]{--tab-accent:#B6FF3B;
  --paper:#F4F1E8;--ink:#111;--green:#B6FF3B;--pink:#FF3EA5;--sun:#FFD23F;--cobalt:#2D5BFF;--card:#fffdf6;
  --b:3px solid var(--ink);--sh:5px 5px 0 var(--ink);--spring:cubic-bezier(.34,1.56,.64,1);
  --head:"Archivo Black",Impact,sans-serif;--mono:"Space Mono",ui-monospace,monospace;
  display:block;min-height:100dvh;overflow-x:clip;font-family:var(--mono);color:var(--ink);line-height:1.45;padding-bottom:12px;
  background:linear-gradient(#1111110f 1px,transparent 1px) 0 0/32px 32px,linear-gradient(90deg,#1111110f 1px,transparent 1px) 0 0/32px 32px,var(--paper);
  & *{margin:0;padding:0}
  button,a,input{font:inherit;color:inherit}
  button{background:none;border:0;cursor:pointer}
  :focus-visible{outline:3px solid var(--cobalt);outline-offset:3px}
  [hidden]{display:none!important}
  .sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  section,aside{scroll-margin-top:84px}

  /* press mechanic (signature): the block pushes into its own shadow; only transform animates */
  .press{border:var(--b);box-shadow:var(--sh);transition:transform .28s var(--spring)}
  .press:active{transform:translate(5px,5px);box-shadow:0 0 0 var(--ink);transition-duration:.06s}
  @media (hover:hover){.press:hover{transform:translate(-2px,-2px);box-shadow:7px 7px 0 var(--ink)}}

  /* ticker */
  .ticker{display:flex;background:var(--ink);color:var(--green);border-bottom:var(--b);font-size:13px;font-weight:700}
  .tk{flex:1;min-width:0;overflow:hidden;white-space:nowrap;display:flex;align-items:center}
  .motion{flex:none;width:48px;min-height:44px;color:var(--green);border-left:2px solid var(--green);font-size:14px}
  .motion:focus-visible{outline-color:var(--green);outline-offset:-5px}
  :root[data-motion=paused] & :is(.track,.sticker){animation-play-state:paused} /* the shared motion toggle */
  .track{display:inline-flex;gap:40px;padding:8px 0;animation:guide-marquee 60s linear infinite}
  .track span::before{content:"✳ ";content:"✳ " / "";color:var(--pink)}

  /* header */
  .bar{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 16px;border-bottom:var(--b);background:var(--paper);position:sticky;top:0;z-index:20}
  .logo{font-family:var(--head);font-size:20px;letter-spacing:-.5px}
  .logo b{font-weight:400;background:var(--pink);padding:0 6px;border:var(--b);display:inline-block;transform:rotate(-3deg)}
  .hdr-route{background:var(--green);padding:8px 14px;font-weight:700;font-size:13px;min-height:44px;display:flex;align-items:center;gap:8px;text-transform:uppercase}
  .hdr-route i{font-style:normal;background:var(--ink);color:var(--green);min-width:24px;height:24px;padding:0 4px;display:grid;place-items:center;border-radius:99px}

  .wrap{max-width:1360px;margin:0 auto;padding:0 16px}
  .sec-h{display:flex;align-items:flex-end;gap:12px;margin:56px 0 20px;border-bottom:var(--b);padding-bottom:10px}
  .sec-h.flat{margin:0;border:0;padding:0}
  .sec-h .n{font-family:var(--head);font-size:clamp(56px,10vw,104px);line-height:.8;-webkit-text-stroke:3px var(--ink);color:transparent}
  .sec-h h2{font-family:var(--head);font-weight:400;font-size:clamp(22px,4vw,40px);line-height:1;text-transform:uppercase}
  .sec-h small{display:block;font-family:var(--mono);font-size:12px;text-transform:uppercase;margin-top:6px}

  /* hero */
  .hero{display:grid;gap:20px;padding-top:28px}
  h1{font-family:var(--head);font-weight:400;font-size:clamp(46px,12.5vw,168px);line-height:.86;letter-spacing:-2px;text-transform:uppercase;margin-top:12px}
  h1 .hl{background:var(--sun);border:var(--b);box-shadow:var(--sh);padding:0 .08em;display:inline-block;transform:rotate(-2deg);margin:.06em 0}
  h1 .pk{color:var(--pink);-webkit-text-stroke:3px var(--ink)}
  .right{display:grid;gap:18px}
  .lede{font-size:16px;max-width:52ch;background:var(--paper);border:var(--b);padding:14px;box-shadow:var(--sh)}
  .hero-art{border:var(--b);box-shadow:var(--sh);background:var(--cobalt);position:relative;overflow:hidden;aspect-ratio:4/3}
  .hero-art svg,.ph.art svg{width:100%;height:100%;display:block}
  .hero-art .tag{position:absolute;left:12px;top:12px;background:var(--paper);border:var(--b);padding:4px 8px;font-size:12px;font-weight:700}
  .sticker{position:absolute;right:12px;bottom:12px;background:var(--pink);border:var(--b);padding:10px 12px;font-family:var(--head);font-size:15px;transform:rotate(8deg);box-shadow:4px 4px 0 var(--ink);animation:guide-wobble 3s var(--spring) infinite}
  .stats{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
  .stat{border:var(--b);background:var(--paper);padding:10px;box-shadow:var(--sh)}
  .stat b{font-family:var(--head);font-weight:400;font-size:clamp(26px,6vw,40px);display:block;line-height:1}
  .stat span{font-size:11px;text-transform:uppercase}
  .cta{display:flex;flex-wrap:wrap;gap:12px}
  .btn{display:inline-flex;align-items:center;justify-content:center;min-height:52px;padding:12px 20px;font-family:var(--head);font-size:16px;text-transform:uppercase;background:var(--green)}
  .btn.alt{background:var(--paper)}

  /* search + filters */
  .search{display:grid;gap:6px;margin-bottom:16px;font-size:12px;font-weight:700;text-transform:uppercase}
  .search input{width:100%;min-height:56px;padding:10px 14px;border:var(--b);box-shadow:var(--sh);background:var(--card);font-size:18px;font-weight:700;border-radius:0;-webkit-appearance:none;appearance:none}
  .search input::placeholder{color:#555}
  .filters{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}
  .zones{grid-template-columns:repeat(3,minmax(0,1fr));margin-top:12px}
  .flt{min-height:72px;padding:10px 12px;text-align:left;background:var(--paper);display:flex;flex-direction:column;justify-content:space-between;position:relative}
  .zones .flt{min-height:60px}
  .flt .fn{font-family:var(--head);font-size:17px;text-transform:uppercase;line-height:1}
  .zones .fn{margin-top:22px;font-size:15px}
  .zones .flt::after{bottom:auto;top:8px}
  .flt .fc{font-size:11px}
  .flt::after{content:"OFF";content:"OFF" / "";position:absolute;right:8px;bottom:8px;font-size:10px;font-weight:700;border:2px solid var(--ink);padding:0 4px}
  .flt[aria-pressed="true"]{background:var(--c);transform:translate(5px,5px);box-shadow:0 0 0 var(--ink)}
  .flt[aria-pressed="true"]::after{content:"ON";content:"ON" / "";background:var(--ink);color:var(--paper)}
  .flt.all[aria-pressed="true"]{background:var(--ink);color:var(--green)}
  .flt.all[aria-pressed="true"]::after{border-color:var(--paper)}
  .showing{margin-top:18px;font-size:13px;font-weight:700}
  .showing b{background:var(--ink);color:var(--green);padding:2px 6px}
  .showing.bypass::after{content:" · IGNORING FILTERS";content:" · IGNORING FILTERS" / "";background:var(--sun);padding:2px 6px;margin-left:6px}
  .none p{display:flex;flex-wrap:wrap;align-items:center;gap:14px;font-family:var(--head);font-size:20px;padding:24px 0}
  .lost .btn{background:var(--sun);text-align:left}

  /* index cards + receipt */
  .board{display:grid;gap:28px;align-items:start}
  .board>section{min-width:0}
  .cards{display:grid;gap:20px;grid-template-columns:minmax(0,1fr)}
  .card{position:relative;background:var(--card);border:var(--b);box-shadow:var(--sh);display:flex;flex-direction:column}
  .card.on{outline:3px dashed var(--ink);outline-offset:5px}
  .card__top{display:flex;justify-content:space-between;align-items:center;gap:8px;border-bottom:var(--b);background:var(--c);padding:8px 12px;font-size:12px;font-weight:700;text-transform:uppercase}
  .card__top .no{font-family:var(--head);font-weight:400;font-size:20px}
  .ph{border-bottom:var(--b);background:var(--ink)}
  .ph img{display:block;width:100%;aspect-ratio:16/9;object-fit:cover}
  .ph .credit{display:block;padding:0 10px;background:var(--card);color:var(--ink);opacity:1;line-height:1.2}
  .ph.art{position:relative;aspect-ratio:16/9;background:var(--cobalt)}
  .ph .fig{position:absolute;left:10px;bottom:10px;background:var(--paper);border:var(--b);padding:2px 6px;font-size:11px;font-weight:700}
  .card__body{padding:14px 14px 10px;flex:1;background:linear-gradient(transparent 31px,#2d5bff22 31px) 0 6px/100% 32px}
  .card h3{font-family:var(--head);font-weight:400;font-size:24px;line-height:1.05;text-transform:uppercase;margin:4px 0 8px;overflow-wrap:anywhere}
  .region{font-size:12px;text-transform:uppercase;color:#3d3d3d}
  .hook{font-size:15px;font-weight:700;margin-bottom:10px}
  .facts,.tips{list-style:none;font-size:13px;display:grid;gap:4px}
  .facts li::before,.tips li::before{content:"→ ";content:"→ " / "";font-weight:700}
  details{margin:0 14px 10px;font-size:13px}
  .card .narrow,.pcredit{display:none}
  summary{display:block;padding:12px 0;line-height:20px;font-weight:700;text-transform:uppercase;cursor:pointer;text-decoration:underline;text-underline-offset:3px}
  details[open]>*:not(summary){margin-bottom:8px}
  .src{overflow-wrap:anywhere}
  .src a{display:inline-flex;align-items:center;min-height:44px}
  .stamp{position:absolute;right:10px;top:52px;z-index:1;font-family:var(--head);font-size:13px;padding:4px 8px;border:3px solid currentColor;transform:rotate(9deg);color:#D1006F;background:var(--card);letter-spacing:1px;text-align:center;line-height:1.05;max-width:96px}
  .stamp.tough{color:#d42020}.stamp.gem{color:var(--cobalt)}.stamp.alt{color:#6b4bd6}.stamp.book{color:#8a5a00}
  .add{margin:0 14px 14px;min-height:48px;background:var(--sun);font-weight:700;font-size:14px;text-transform:uppercase;display:flex;justify-content:space-between;align-items:center;gap:8px;padding:0 14px;text-align:left}
  .add[aria-pressed="true"]{background:var(--ink);color:var(--green)}
  .days{font-size:11px;border:2px solid currentColor;padding:1px 6px;white-space:nowrap}

  .receipt{background:#fff;border:var(--b);box-shadow:var(--sh);padding:18px 16px 26px;position:relative;font-size:13px}
  .receipt::after{content:"";position:absolute;left:-3px;right:-3px;bottom:-14px;height:14px;
    background:linear-gradient(-45deg,transparent 9px,#fff 9px) 0 0/16px 14px repeat-x,linear-gradient(45deg,transparent 9px,#fff 9px) 0 0/16px 14px repeat-x}
  .receipt h3{font-family:var(--head);font-weight:400;font-size:24px;text-align:center;text-transform:uppercase}
  .meta{text-align:center;font-size:11px}
  .weeks{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin:10px 0;padding-bottom:10px;border-bottom:2px dashed var(--ink)}
  .weeks button{min-height:44px;border:2px solid var(--ink);font-weight:700;font-size:12px;text-transform:uppercase}
  .weeks [aria-pressed="true"]{background:var(--ink);color:var(--green)}
  .lines{list-style:none;min-height:60px}
  .line{display:grid;grid-template-columns:44px 1fr auto;gap:8px;align-items:center;padding:4px 0;border-bottom:1px dotted #999}
  .line button{width:44px;height:44px;border:var(--b);background:var(--green);font-weight:700}
  .line button:hover{background:var(--pink)}
  .line button:active{transform:scale(.85)}
  .line b{display:block;text-transform:uppercase;overflow-wrap:anywhere}
  .line small{font-size:11px;color:#444}
  .empty{padding:18px 0;text-align:center;color:#444}
  .totals{border-top:2px dashed var(--ink);margin-top:10px;padding-top:10px;display:grid;gap:4px;text-transform:uppercase}
  .totals div{display:flex;justify-content:space-between;gap:8px}
  .totals dd{display:inline-block}
  .totals .big{font-family:var(--head);font-size:20px}
  .meter{height:20px;border:var(--b);margin:10px 0 4px;background:repeating-linear-gradient(90deg,transparent 0 calc(100%/var(--w,4) - 3px),var(--ink) 0 calc(100%/var(--w,4)));overflow:hidden}
  .meter i{display:block;height:100%;background:var(--pink);transform-origin:left;transform:scaleX(var(--f,0));transition:transform .5s var(--spring)}
  .meter.over i{background:#d42020}
  .wks{display:flex;justify-content:space-around;font-size:10px}
  .verdict{font-weight:700;text-align:center;margin-top:8px;padding:6px;border:2px solid var(--ink);background:var(--sun)}
  .verdict.over{background:#d42020;color:#fff}
  .r-actions{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:22px}
  .r-actions button{min-height:48px;font-weight:700;font-size:12px;text-transform:uppercase;background:var(--paper);padding:6px}
  .r-actions .gringo{background:var(--cobalt);color:#fff}
  .msg{margin-top:14px;padding:8px;border:2px solid var(--ink);background:var(--paper);font-weight:700}

  footer{margin:64px 0 0;border-top:var(--b);padding:20px 0;font-size:12px;text-align:center}

  /* phone: the route bar sits in the thumb zone, above the app's tab bar. Sticky, not fixed: the router's tab-in
     transform makes the section the containing block of fixed children. */
  .dock{position:sticky;bottom:calc(var(--tabbar-h) + env(safe-area-inset-bottom) + 10px);z-index:30;width:calc(100% - 24px);margin:0 12px;display:flex;justify-content:space-between;align-items:center;gap:8px;
    min-height:56px;padding:0 16px;background:var(--green);font-weight:700;font-size:14px;text-transform:uppercase;text-align:left}
  .dock .arrow{font-family:var(--head);font-size:20px}

  /* import confirm */
  .ask{margin:auto;max-width:min(440px,calc(100% - 32px));padding:22px 18px 18px;background:var(--paper);color:var(--ink);border:var(--b);box-shadow:8px 8px 0 var(--ink)}
  .ask::backdrop{background:#111b}
  .ask h2{font-family:var(--head);font-weight:400;font-size:26px;line-height:1;text-transform:uppercase;margin-bottom:10px}
  .ask-p{font-size:14px;margin-bottom:18px}
  .ask-acts{display:flex;flex-wrap:wrap;gap:12px}
  .ask-acts .btn{font-size:14px;padding:10px 16px}

  /* phone: compact index cards — thumbnail beside title and hook; facts and the linked credit move into the entry */
  @media (max-width:600px){
    .cards{gap:14px}
    .card{display:grid;grid-template-columns:88px minmax(0,1fr);grid-template-areas:"top top" "ph body" "more more"}
    .card__top{grid-area:top;padding:5px 10px}
    .card__top .no{font-size:16px}
    .card__top .itag,.card .wide,.ph .credit,.ph .fig{display:none}
    .ph{grid-area:ph;border-bottom:0;border-right:var(--b);position:relative}
    .ph img,.ph.art svg{position:absolute;inset:0;width:100%;height:100%;aspect-ratio:auto}
    .ph.art{aspect-ratio:auto}
    .stamp{top:5px;right:8px;font-size:11px;padding:1px 6px;border-width:2px;transform:rotate(4deg);max-width:none}
    .card__body{grid-area:body;padding:8px 10px;background:none;min-height:96px}
    .region{font-size:10px}
    .card h3{font-size:18px;margin:2px 0 4px}
    .hook{font-size:12px;margin:0;line-height:1.35;display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden}
    .pcredit{display:block;font-size:10px;line-height:1.3;color:#444;margin-top:4px}
    /* the entry toggle and the Add button share one row; the opened entry unfolds below both */
    .card>details{grid-area:more;margin:0;padding:0 10px;border-top:2px dashed var(--ink)}
    .card summary{width:fit-content;padding:20px 0}
    .card summary .rt{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
    .card .facts.narrow{display:grid}
    .card p.narrow{display:block}
    .add{grid-area:more;justify-self:end;align-self:start;margin:8px 10px 0 0;min-height:44px;font-size:13px;padding:0 10px}
  }
  @media (min-width:640px){
    .filters:not(.zones){grid-template-columns:repeat(4,minmax(0,1fr))}
    .cards{grid-template-columns:repeat(2,minmax(0,1fr))}
  }
  @media (min-width:1024px){
    padding-bottom:0;
    .wrap{padding:0 32px}
    .hero{grid-template-columns:1.3fr 1fr;align-items:start;column-gap:40px}
    h1{font-size:clamp(64px,7.4vw,116px)}
    .hero-art{grid-column:2;grid-row:1/3;align-self:stretch;aspect-ratio:auto;min-height:420px}
    .board{grid-template-columns:minmax(0,1fr) 360px}
    /* the whole receipt scrolls when a long route outgrows the window; padding keeps the shadow and zigzag inside */
    .receipt-wrap{position:sticky;top:84px;max-height:calc(100dvh - 92px);overflow-y:auto;padding:0 8px 22px 0;scrollbar-width:thin}
    .receipt-wrap .sec-h{margin-top:0}
    .dock{display:none}
  }
  @media (min-width:1280px){.cards{grid-template-columns:repeat(3,minmax(0,1fr))}}
  @media (prefers-reduced-motion:reduce){
    .track,.sticker{animation:none}
    .press,.meter i{transition:none}
  }
}
@keyframes guide-marquee{to{transform:translateX(-50%)}}
@keyframes guide-wobble{0%,100%{transform:rotate(8deg)}50%{transform:rotate(2deg) scale(1.06)}}