/* Open Patrol: the landing page (/).
   Ported from design round L01 (Claude Design) plus the owner's correction
   rounds; the frozen reference is docs/design/preview/layers/d.php.

   Rule (contract B2): no raw values for colour, font family, radius, spacing,
   container width or breakpoints - everything through var(--op-*). The two
   data exceptions live in the markup, not here: flag gradients come from
   catalog.json and studio colours from the edition's legend.

   The pickers' mechanism is CSS :target, deliberately: the section shows
   itself when the URL names it, the browser scrolls, and the URL is the
   shareable deep link. landing.js only filters the studio finder. */

*,*::before,*::after{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--op-page);color:var(--op-ink);font-family:var(--op-font-sans);
  font-size:var(--op-fs-md);line-height:var(--op-leading-body);-webkit-font-smoothing:antialiased}
h1,h2,h3,p,ul,figure{margin:0;padding:0}
ul{list-style:none}
a{color:var(--op-teal);text-decoration:none}
a:hover{color:var(--op-teal-hover);text-decoration:underline}
:focus-visible{outline:2px solid var(--op-teal-active);outline-offset:3px}
.shell{max-width:var(--op-container);margin-inline:auto;
  padding-left:max(var(--op-gutter),env(safe-area-inset-left));
  padding-right:max(var(--op-gutter),env(safe-area-inset-right))}
/* An anchored target clears the viewport edge, so a heading jumped to does not
   sit against it. A full-viewport frame is the exception and takes zero: the
   frame IS the alignment, and any scroll margin pushes its bottom edge out of
   view. Measured 2026-09-01 at a 813px viewport: 24px of margin turned a
   symmetric 33/33 frame into 57 above the first card and 9 below the last, and
   clipped the bottom row outright on a shorter screen. */
[id]{scroll-margin-top:var(--op-space-6)}
.vp[id],.picker[id]{scroll-margin-top:0}
a,button,summary{touch-action:manipulation}
.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:var(--op-space-3);padding:var(--op-space-2) var(--op-space-4);
  background:var(--op-surface);border:1px solid var(--op-teal-active);border-radius:var(--op-r-pill)}

/* Three frames, one viewport each (dispatch L01 section 1).
   min-height, not height: on short screens content grows, it does not clip. */
.vp{min-height:100vh;min-height:100svh}
.vp--first{display:flex;flex-direction:column}
.vp--first .hero{flex:1;display:flex;flex-direction:column;justify-content:center}
.vp--doors{display:flex;flex-direction:column;justify-content:center;padding-block:var(--op-rhythm-frame)}
.vp--last{display:flex;flex-direction:column}
.vp--last .seo{flex:1;display:flex;align-items:center}
.vp--last .seo > .shell{width:100%}

/* masthead: identification only */
.top{padding-block:var(--op-space-5)}
.top__in{display:flex;align-items:center;gap:var(--op-space-4)}
.top__logo{width:112px;height:22px;display:block}

/* hero */
.hero__h1{margin-top:var(--op-space-5);max-width:19ch;
  font-size:var(--op-size-landing-h1);font-weight:var(--op-weight-bold);
  letter-spacing:var(--op-tracking-hero);line-height:var(--op-lh-hero);text-wrap:balance}
.hero__h1 em{font-style:normal;color:var(--op-teal)}
.hero__row{margin-top:var(--op-rhythm-hero-cta)}

/* the main CTA: a capture frame around a pill. Corner brackets sit off the
   button and breathe; on hover they snap in on the target while the pill
   lifts and its gradient lightens. */
.cta{position:relative;display:inline-flex;align-items:center;gap:var(--op-space-4);
  min-height:var(--op-control-hero);padding:0 var(--op-space-10);
  border-radius:var(--op-r-pill);background:var(--op-cta);color:var(--op-on-ink-body);
  font-size:var(--op-fs-lg);font-weight:var(--op-weight-semibold);letter-spacing:var(--op-tracking-tight);
  transition:transform var(--op-dur-base) var(--op-ease),box-shadow var(--op-dur-base) var(--op-ease)}
.cta:hover{background:var(--op-cta-hover);color:var(--op-on-ink-body);text-decoration:none;
  transform:translateY(var(--op-lift));box-shadow:var(--op-elevation-2)}
.cta:active{background:var(--op-cta-active);transform:translateY(0)}
.cta__corner{position:absolute;width:var(--op-bracket);height:var(--op-bracket);pointer-events:none;
  --bx:0px;--by:0px;animation:op-breathe 3.2s var(--op-ease) infinite;
  transition:transform var(--op-dur-slow) var(--op-ease)}
.cta__corner--tl{top:calc(-1 * var(--op-space-2));left:calc(-1 * var(--op-space-3));
  border-top:2px solid var(--op-teal-active);border-left:2px solid var(--op-teal-active);
  --bx:calc(-1 * var(--op-space-1));--by:calc(-1 * var(--op-space-1))}
.cta__corner--tr{top:calc(-1 * var(--op-space-2));right:calc(-1 * var(--op-space-3));
  border-top:2px solid var(--op-teal-active);border-right:2px solid var(--op-teal-active);
  --bx:var(--op-space-1);--by:calc(-1 * var(--op-space-1))}
.cta__corner--bl{bottom:calc(-1 * var(--op-space-2));left:calc(-1 * var(--op-space-3));
  border-bottom:2px solid var(--op-teal-active);border-left:2px solid var(--op-teal-active);
  --bx:calc(-1 * var(--op-space-1));--by:var(--op-space-1)}
.cta__corner--br{bottom:calc(-1 * var(--op-space-2));right:calc(-1 * var(--op-space-3));
  border-bottom:2px solid var(--op-teal-active);border-right:2px solid var(--op-teal-active);
  --bx:var(--op-space-1);--by:var(--op-space-1)}
@keyframes op-breathe{0%,100%{transform:translate(0,0)}50%{transform:translate(var(--bx),var(--by))}}
.cta:hover .cta__corner{animation:none;
  transform:translate(calc(-1 * var(--bx) * 1.5),calc(-1 * var(--by) * 1.5))}

/* report cards: one live instrument, three dark ones */
.doors{flex:1;display:grid;gap:var(--op-gap-doors);grid-template-columns:repeat(2,minmax(0,1fr));
  grid-auto-rows:minmax(var(--op-door-min),1fr)}
.door{position:relative;display:flex;flex-direction:column;justify-content:flex-end;
  padding:var(--op-pad-door-y) var(--op-pad-door-x);
  background:var(--op-surface);border:1px solid var(--op-border);border-radius:var(--op-r-lg);
  color:var(--op-ink);cursor:pointer;
  transition:border-color var(--op-dur-base) var(--op-ease),box-shadow var(--op-dur-base) var(--op-ease),
             transform var(--op-dur-panel) var(--op-ease)}
.door:hover{text-decoration:none;color:var(--op-ink)}
.door__mark{flex:1;display:grid;place-items:center;padding-block:var(--op-space-8) var(--op-space-4)}
.door__mark svg{width:min(52%,236px);height:auto;max-height:21vh;display:block}
.door__title{margin-top:var(--op-space-2);font-size:var(--op-size-door-title);
  font-weight:var(--op-weight-bold);letter-spacing:var(--op-tracking-tight);
  line-height:var(--op-lh-heading);text-wrap:balance}
.door__sub{margin-top:var(--op-space-2);font-family:var(--op-font-mono);font-size:var(--op-fs-sm);
  color:var(--op-text-2);letter-spacing:var(--op-tracking-mono-2)}

/* coming-soon card: greyed, unclickable; hover shows only the label */
.door--off{background:var(--op-surface-tint);border-color:var(--op-hairline);cursor:default;position:relative}
.door--off .door__title{color:var(--op-text-2)}
.door--off .door__mark svg{opacity:.35;filter:saturate(.3)}
.door--off:hover{border-color:var(--op-hairline);box-shadow:none;transform:none}
.door--off .door__soon{position:absolute;inset:0;display:grid;place-items:center;
  font-family:var(--op-font-mono);font-size:var(--op-fs-lg);font-weight:var(--op-weight-semibold);
  text-transform:uppercase;letter-spacing:var(--op-tracking-caps);color:var(--op-text-2);
  opacity:0;transition:opacity var(--op-dur-base) var(--op-ease)}
.door--off:hover .door__soon{opacity:1}
.door--off:hover .door__mark svg,.door--off:hover .door__title,.door--off:hover .door__sub{opacity:0}
.door--off .door__mark svg,.door--off .door__title,.door--off .door__sub{transition:opacity var(--op-dur-base) var(--op-ease)}

/* live card: teal border, resting shadow, radar always sweeping */
.door--live{border-color:var(--op-teal-active);box-shadow:var(--op-shadow-card)}
.door--live:hover{border-color:var(--op-teal-active);box-shadow:var(--op-shadow-lift);
  transform:translateY(var(--op-lift))}

/* instrument motion */
.rsweep{transform-origin:60px 60px}
.door--live .rsweep{animation:rsweep 5.6s linear infinite}
.door--live:hover .rsweep{animation-duration:2.4s}
@keyframes rsweep{to{transform:rotate(360deg)}}
.mblip{transform-origin:60px 60px}
.door:hover .mblip{animation:mpulse 1.4s var(--op-ease) infinite}
@keyframes mpulse{0%,100%{transform:scale(1)}45%{transform:scale(1.28)}}
.door:hover .mneedle{animation:mneedle .8s var(--op-ease) both}
@keyframes mneedle{from{transform:rotate(calc(-1 * var(--mn,150deg)))}to{transform:rotate(0deg)}}
.mtrace{stroke-dasharray:340;stroke-dashoffset:0}
.door:hover .mtrace{animation:mdraw 1.1s var(--op-ease) both}
@keyframes mdraw{from{stroke-dashoffset:340}to{stroke-dashoffset:0}}

/* pickers: hidden until targeted; the URL carries which one is open.
   Every section of this page is its own screen, so a picker is one too: full
   viewport, content centred - clicking a card arrives ON the scene, not on a
   strip wedged between two heavy frames. */
.picker{display:none;background:var(--op-band)}
.picker:target{display:flex;flex-direction:column;justify-content:center;
  min-height:100vh;min-height:100svh;
  padding-block:var(--op-rhythm-band)}
.picker:target > .shell{animation:picker-in .4s var(--op-ease) both}
@keyframes picker-in{from{opacity:0;transform:translateY(16px)}to{opacity:1;transform:none}}
.picker__h2{font-size:var(--op-fs-2xl);font-weight:var(--op-weight-bold);letter-spacing:var(--op-tracking-h2)}
.picker__lede{margin-top:var(--op-space-3);color:var(--op-text-2);font-size:var(--op-fs-base);max-width:60ch}

/* market pills, the report's own idiom */
.pills{margin-top:var(--op-space-6);display:flex;flex-wrap:wrap;gap:var(--op-space-3)}
.pill{display:inline-flex;align-items:center;gap:var(--op-space-3);min-height:var(--op-touch);
  padding:0 var(--op-space-5);border-radius:var(--op-r-pill);border:1px solid var(--op-border);
  background:var(--op-surface);color:var(--op-ink);font-size:var(--op-fs-base);
  transition:border-color var(--op-dur-base) var(--op-ease),box-shadow var(--op-dur-base) var(--op-ease)}
.pill__flag{width:21px;height:15px;border-radius:var(--op-radius-rule);flex:none;border:1px solid var(--op-border)}
.pill__name{font-weight:var(--op-weight-semibold)}
.pill--live{border-color:var(--op-teal-active);background:var(--op-teal-wash)}
/* jedyny zywy rynek jest gwiazda tej sceny: skala CTA z hero, nie chipa */
.pill--hero{min-height:var(--op-control-hero);padding:0 var(--op-space-10);gap:var(--op-space-4);
  font-size:var(--op-fs-lg);box-shadow:var(--op-shadow-card)}
.pill--hero .pill__flag{width:34px;height:24px}
.pill--hero:hover{box-shadow:var(--op-shadow-lift);transform:translateY(var(--op-lift))}
.pills--rest{margin-top:var(--op-space-5)}
a.pill:hover{border-color:var(--op-teal-active);box-shadow:var(--op-shadow-card);text-decoration:none;color:var(--op-ink)}
.pill--none{color:var(--op-text-3)}
.pill--none .pill__flag{filter:saturate(.3);opacity:.8}

/* studio finder: search, letters, cards - the report's provider component */
.finder{margin-top:var(--op-space-6);background:var(--op-surface);border:1px solid var(--op-border);
  border-radius:var(--op-r-lg);padding:var(--op-space-4)}
.finder__input{width:100%;min-height:var(--op-touch);padding:0 var(--op-space-5);
  border:1px solid var(--op-border);border-radius:var(--op-radius-field);background:var(--op-surface);
  font-family:var(--op-font-sans);font-size:var(--op-fs-md);color:var(--op-ink)}
.finder__input::placeholder{color:var(--op-text-3)}
.finder__letters{margin-top:var(--op-space-3);display:flex;flex-wrap:wrap;gap:var(--op-space-1)}
/* The frozen reference had these at 32px, below the 44px touch floor - a defect
   in the reference (fix review round 1), not a choice. --op-touch is the same
   token .pill and .finder__input already use; 26 buttons at the floor may wrap
   on narrow widths and that is preferred to shrinking below it. */
.finder__l{min-width:var(--op-touch);min-height:var(--op-touch);border:1px solid var(--op-hairline);border-radius:var(--op-radius-field);
  background:var(--op-surface);font-family:var(--op-font-mono);font-size:var(--op-fs-sm);
  color:var(--op-teal);cursor:pointer}
.finder__l:hover:not(:disabled){border-color:var(--op-teal-active);background:var(--op-teal-wash)}
.finder__l[aria-pressed="true"]{background:var(--op-teal);border-color:var(--op-teal);color:var(--op-surface)}
.finder__l:disabled{color:var(--op-text-3);opacity:.45;cursor:default}
.scards{margin-top:var(--op-space-5);display:grid;gap:var(--op-space-4);
  grid-template-columns:repeat(auto-fill,minmax(170px,1fr))}
.scard{display:flex;flex-direction:column;align-items:center;gap:var(--op-space-3);
  padding:var(--op-space-6) var(--op-space-4) var(--op-space-4);background:var(--op-surface);
  border:1px solid var(--op-border);border-radius:var(--op-r-lg);color:var(--op-ink);text-align:center;
  transition:border-color var(--op-dur-base) var(--op-ease),box-shadow var(--op-dur-base) var(--op-ease)}
.scard:hover{border-color:var(--op-teal-active);box-shadow:var(--op-shadow-card);text-decoration:none;color:var(--op-ink)}
.scard__logo{width:auto;max-width:120px;height:40px;object-fit:contain}
.scard__initials{width:48px;height:48px;border-radius:50%;background:var(--op-band);
  display:grid;place-items:center;font-family:var(--op-font-mono);font-size:var(--op-fs-md);
  font-weight:var(--op-weight-semibold);color:var(--op-text-2)}
.scard__name{font-size:var(--op-fs-md);font-weight:var(--op-weight-semibold);line-height:var(--op-lh-heading)}
.scard__go{font-size:var(--op-fs-sm);color:var(--op-teal);font-weight:var(--op-weight-semibold)}
.scard[hidden]{display:none}

/* figures band on ink, with the capture line under the numbers */
.figs{background:var(--op-ink);padding-block:var(--op-rhythm-band)}
.figs__row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--op-space-6)}
.figs__f{position:relative;padding-left:var(--op-space-5)}
.figs__f::before{content:"";position:absolute;left:0;top:var(--op-space-1);bottom:var(--op-space-1);
  width:3px;border-radius:var(--op-radius-rule);background:var(--op-accent)}
.figs__n{display:block;font-family:var(--op-font-mono);font-size:var(--op-size-landing-fig);
  font-weight:var(--op-weight-semibold);color:var(--op-on-ink-body);
  letter-spacing:var(--op-tracking-number);font-variant-numeric:tabular-nums;line-height:var(--op-lh-tight)}
.figs__l{display:block;margin-top:var(--op-space-3);font-family:var(--op-font-mono);
  font-size:var(--op-fs-xs);text-transform:uppercase;letter-spacing:var(--op-tracking-caps-2);
  color:var(--op-on-ink-dim)}

/* what Open Patrol measures */
.seo{padding-block:var(--op-rhythm-band);background:var(--op-band)}
.seo__h2{font-size:var(--op-fs-2xl);font-weight:var(--op-weight-bold);
  letter-spacing:var(--op-tracking-h2);max-width:30ch}
.seo__h2::after{content:"";display:block;width:var(--op-rule-width);height:4px;
  border-radius:var(--op-radius-rule);background:var(--op-accent);margin-top:var(--op-space-4)}
.seo__body{margin-top:var(--op-space-6);display:grid;gap:var(--op-space-5);
  grid-template-columns:repeat(auto-fit,minmax(var(--op-col-min),1fr))}
.seo__body p{color:var(--op-text-2);font-size:var(--op-fs-base);
  line-height:var(--op-leading-body);max-width:60ch;text-wrap:pretty}

/* footer: the claim closes the page */
.foot{background:var(--op-ink);color:var(--op-on-ink);padding-block:var(--op-rhythm-band)}
.foot__claim{color:var(--op-on-ink-body);font-size:var(--op-fs-xl);font-weight:var(--op-weight-semibold);
  letter-spacing:var(--op-tracking-tight);line-height:var(--op-lh-title);max-width:44ch;text-wrap:balance}
.foot__claim span{color:var(--op-on-ink);font-weight:var(--op-weight-medium)}

@media (max-width:768px){
  .door__title{font-size:var(--op-fs-xl)}
  .figs__row{grid-template-columns:repeat(2,minmax(0,1fr));row-gap:var(--op-space-8)}
}
@media (max-width:560px){
  .doors{grid-template-columns:minmax(0,1fr)}
  .door{min-height:var(--op-door-min)}
}
@media (prefers-reduced-motion:reduce){
  html{scroll-behavior:auto}
  *{transition:none!important;animation:none!important}
}