/* Lookalike Check, an AI Ship Captains tool.
   Shared styles for the scanner (/), the patterns page (/patterns) and the gallery (/gallery).
   Colours and typefaces come from brand/tokens.css; sizes and spacing from tokens.css (copied from website/v2).
   The treatments (header, buttons, hull bar, inverse bands, split sections, footer) follow website/v2/index.html. */

*{box-sizing:border-box}
html{background:var(--ground);color:var(--ink);font:400 var(--body)/1.55 var(--font-text);-webkit-text-size-adjust:100%}
body{margin:0;min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
main{flex:1 0 auto}
a{color:inherit;text-underline-offset:var(--sp-4)}
a:hover{text-decoration-thickness:var(--bw-2)}
img{max-width:100%;height:auto;display:block}
h1,h2,h3,p,ul,ol,dl,dd,figure,fieldset{margin:0}
h1,h2{text-wrap:balance}
ul,ol{padding:0;list-style:none}
fieldset{border:0;padding:0;min-width:0}
button{font:inherit;color:inherit}
:focus-visible{outline:var(--bw-3) solid var(--ink);outline-offset:var(--sp-3)}
[hidden]{display:none!important}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.skip{position:absolute;left:var(--sp-12);top:-100px;z-index:20;background:var(--ink);color:var(--ground);padding:var(--sp-8) var(--sp-16)}
.skip:focus{top:var(--sp-12)}

/* type */
.lab{font:600 var(--fs-12)/1.3 var(--font-text);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase}
.mono{font:500 var(--fs-13)/1.5 var(--font-mono)}
.muted{color:var(--muted)}
.display{font:400 var(--h1-hero)/1.02 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.h2{font:400 var(--fs-26)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.02em}
.h3{font:600 var(--h3)/1.3 var(--font-text)}
.intro{max-width:var(--measure)}

/* the hull bar: always carries a label, a number or a level */
.hull{display:inline-flex;align-items:center;height:var(--hull);padding:0 calc(var(--hull) + var(--sp-16));background:var(--ink);color:var(--ground);clip-path:polygon(0 0,100% 0,calc(100% - var(--hull)) 100%,var(--hull) 100%);font:600 var(--fs-12)/1 var(--font-text);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.hull.ok{background:var(--green);color:var(--ground)}
.hull.bad{background:var(--red);color:var(--ground)}

/* header: first row copies the landing page's header (website/v2) */
.hd{position:sticky;top:0;z-index:5;background:var(--ground)}
.hd-main{display:flex;align-items:center;gap:var(--sp-32);padding:var(--sp-24) var(--gutter)}
.hd .brand{display:flex;align-items:center;text-decoration:none;min-width:0}
.hd .logo{width:var(--logo-w);height:auto}
.hd nav{display:flex;gap:var(--sp-24)}
.hd-main nav{margin-left:auto}
.hd nav a{text-decoration:none;font:600 var(--fs-11)/1 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;padding:var(--sp-8) 0;white-space:nowrap}
.hd nav a:hover{text-decoration:underline}
/* second row: this tool's pages */
.hd-tool{display:flex;align-items:center;gap:var(--sp-24);padding:var(--sp-8) var(--gutter);border-top:var(--bw-1) solid var(--rule);border-bottom:var(--bw-1) solid var(--rule)}
.hd .tool{display:flex;align-items:center;gap:var(--sp-8);text-decoration:none;white-space:nowrap;font:600 var(--fs-11)/1.3 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}
.hd .tool span{color:var(--muted)}
.hd-tool nav{margin-left:auto}
.hd-tool nav a{color:var(--muted)}
.hd-tool nav a:hover{color:var(--ink)}
.hd-tool nav a[aria-current=page]{color:var(--ink);text-decoration:underline;text-decoration-thickness:var(--bw-2);text-underline-offset:var(--sp-6)}
:root{--logo-w:clamp(240px,23vw,330px)}
@media(max-width:820px){
  .hd-main nav{display:none}
  .hd-tool{flex-wrap:wrap;gap:var(--sp-8) var(--sp-24)}
  .hd-tool nav{margin-left:0;gap:var(--sp-24);overflow-x:auto;scrollbar-width:none;width:100%}
  .hd-tool nav::-webkit-scrollbar{display:none}
}

/* buttons, as on the main site */
.btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--sp-16);border:var(--rule-w) solid var(--ink);background:var(--ink);color:var(--ground);padding:var(--sp-16) var(--sp-24);text-decoration:none;cursor:pointer;font:600 var(--fs-12)/1 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase;white-space:nowrap;transition:background var(--dur) var(--ease),color var(--dur) var(--ease)}
.btn.go::after{content:"→"}
.btn:hover{background:var(--ink);color:var(--ground);outline:var(--bw-1_5) solid var(--ink);outline-offset:var(--sp-4)}
.btn:focus-visible{outline:var(--bw-3) solid var(--ink);outline-offset:var(--sp-3)}
.btn:active{background:var(--muted);border-color:var(--muted);color:var(--ground);outline:0}
.btn.sec{background:transparent;color:var(--ink)}
.btn.sec:hover{background:var(--ground-2);color:var(--ink);outline:0}
.btn:disabled,.btn[aria-disabled=true]{opacity:.45;cursor:not-allowed;outline:0}
.lnk{background:none;border:0;padding:0;cursor:pointer;text-decoration:underline;text-underline-offset:var(--sp-4);font:inherit;color:inherit}
.lnk:hover{text-decoration-thickness:var(--bw-2)}

/* bands: page ground, or its opposite (.inv), as the main site alternates them */
.band{padding:var(--sec) var(--gutter);border-top:var(--bw-1) solid var(--rule)}
.band:first-child{border-top:0}
.band.tight{padding-block:round(clamp(var(--sp-56),7vw,var(--sp-96)), 8px)}
.inv{background:var(--ground);color:var(--ink);--ground:var(--inv-ground);--ink:var(--inv-ink);--muted:color-mix(in srgb,var(--ink) 72%,var(--ground));--field:var(--ink);--line:color-mix(in srgb,var(--ink) 40%,var(--ground));--rule:var(--line);--ground-2:color-mix(in srgb,var(--ink) 10%,var(--ground));border-top:0}
.wrap{max-width:none}
.split{display:grid;grid-template-columns:var(--left) minmax(0,1fr);gap:var(--gutter);align-items:start}
.pin{position:sticky;top:var(--pin-top)}
.date{display:flex;align-items:center;flex-wrap:wrap;gap:var(--sp-8) var(--sp-16);font:500 var(--fs-13)/1 var(--font-mono);letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
@media(max-width:900px){.split{grid-template-columns:minmax(0,1fr)}.pin{position:static}}

/* page head (patterns, gallery) */
.ph-band{padding:round(clamp(var(--sp-56),7vw,var(--sp-112)), 8px) var(--gutter) round(clamp(var(--sp-40),5vw,var(--sp-72)), 8px)}
.ph-band h1{font:400 var(--h1-hero)/1.02 var(--font-display);text-transform:uppercase;letter-spacing:.02em;max-width:18ch}
.ph-band .intro{margin-top:var(--sp-24)}
.ph-band .intro+.intro{margin-top:var(--sp-16);color:var(--muted);font-size:var(--small)}
.ph-band .acts{display:flex;flex-wrap:wrap;gap:var(--sp-16) var(--sp-24);align-items:center;margin-top:var(--sp-32)}

/* forms */
.fld{display:grid;gap:var(--sp-8);width:100%}
.fld>label,.opt legend{font:600 var(--fs-12)/1 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}
.fld input{width:100%;min-width:0;background:transparent;color:var(--ink);border:var(--bw-1_5) solid var(--field);border-radius:var(--radius);padding:var(--sp-16) var(--sp-16);font:400 var(--body)/1.2 var(--font-text)}
.fld input::placeholder{color:var(--muted);opacity:1}
.fld input:focus-visible{outline:var(--bw-3) solid var(--ink);outline-offset:var(--sp-3);border-color:var(--ink)}
.fld .hint{font-size:var(--small);color:var(--muted)}
.fld.err input{border-color:var(--red)}
.seg{display:inline-flex;border:var(--bw-1_5) solid var(--field)}
.seg label{position:relative;cursor:pointer}
.seg input{position:absolute;opacity:0;inset:0;margin:0;cursor:pointer}
.seg span{display:block;padding:var(--sp-8) var(--sp-16);font:600 var(--fs-11)/1 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}
.seg label+label span{border-left:var(--bw-1) solid var(--field)}
.seg input:checked+span{background:var(--ink);color:var(--ground)}
.seg input:focus-visible+span{outline:var(--bw-3) solid var(--ink);outline-offset:var(--sp-3);position:relative;z-index:1}
.seg label:hover span{text-decoration:underline}
.opt{display:grid;gap:var(--sp-8);justify-items:start}
.opt legend{padding:0;margin-bottom:var(--sp-8)}

/* status: always a word and a shape, never colour alone */
.st{display:inline-flex;align-items:center;gap:var(--sp-8);font:600 var(--fs-11)/1 var(--font-text);font-stretch:112%;letter-spacing:.08em;text-transform:uppercase;white-space:nowrap}
.st svg{width:var(--sp-16);height:var(--sp-16);flex:none;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}
.ok{color:var(--green)}.bad{color:var(--red)}.warn{color:var(--warning)}
[data-theme=light] .warn{color:var(--ink)}[data-theme=light] .warn svg{color:var(--warning)}
.emsg{display:flex;align-items:flex-start;gap:var(--sp-8);color:var(--red)}
.emsg svg{width:var(--sp-18);height:var(--sp-18);flex:none;margin-top:var(--sp-8);fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:square}

/* level bar: the hull shape filled to a value */
.lvl{position:relative;height:var(--sp-14);background:var(--line);clip-path:polygon(0 0,100% 0,calc(100% - var(--sp-14)) 100%,var(--sp-14) 100%)}
.lvl i{position:absolute;inset:0 auto 0 0;background:var(--ink)}
.lvl.sweep i{width:0;animation:sweep var(--sweep) var(--ease) infinite alternate}
@keyframes sweep{to{width:100%}}

/* screenshots */
.shot{display:block;width:100%;padding:0;border:var(--bw-1) solid var(--line);background:var(--ground-2);overflow:hidden;cursor:zoom-in;text-align:left}
.shot img{width:100%}
.shot.empty{display:grid;place-items:center;min-height:var(--sp-120);cursor:default;font:500 var(--fs-11)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.zoom{position:fixed;inset:0;z-index:30;display:flex;align-items:flex-start;justify-content:center;padding:var(--sp-56) var(--gutter);overflow:auto;background:color-mix(in srgb,var(--n-9) 88%,transparent);cursor:zoom-out}
.zoom img{max-width:min(100%,var(--sp-1200));border:var(--bw-1_5) solid var(--n-1)}
.zoom .x{position:fixed;top:var(--sp-14);right:var(--sp-14);background:var(--n-1);color:var(--n-9);border:0;padding:var(--sp-8) var(--sp-16);cursor:pointer;font:600 var(--fs-11)/1 var(--font-text);font-stretch:112%;letter-spacing:.1em;text-transform:uppercase}

/* scan cards: the gallery (/gallery) and the latest scans on the scanner (assets/recent.js) */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(min(100%,var(--sp-320)),1fr));gap:var(--sp-40) var(--sp-24)}
.card{display:grid;gap:var(--sp-16);align-content:start;text-decoration:none;color:inherit}
.card .th{display:block;aspect-ratio:8/5;border:var(--bw-1) solid var(--line);background:var(--ground-2);overflow:hidden}
.card .th img{width:100%;height:100%;object-fit:cover;object-position:top}
.card .th.empty{display:grid;place-items:center;font:500 var(--fs-11)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card .hd2{display:flex;justify-content:space-between;align-items:baseline;gap:var(--sp-16)}
.card .host{font:600 var(--h3)/1.3 var(--font-text);overflow-wrap:anywhere}
.card .sc{font:400 var(--fs-24)/1 var(--font-display);letter-spacing:0}
.card .sc small{font:500 var(--fs-12)/1 var(--font-mono);color:var(--muted);margin-left:var(--sp-8)}
.card .meta{display:flex;flex-wrap:wrap;align-items:center;gap:var(--sp-8) var(--sp-16);font:500 var(--fs-11)/1.4 var(--font-mono);text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.card .found{font-size:var(--fs-14);color:var(--muted)}
.card:hover .host{text-decoration:underline;text-underline-offset:var(--sp-4)}
.card:focus-visible{outline:var(--bw-3) solid var(--ink);outline-offset:var(--sp-6)}
.cards-empty{max-width:var(--measure);color:var(--muted)}

/* the call to action toward the main site */
.cta h2{font:400 var(--h2-split)/1.05 var(--font-display);text-transform:uppercase;letter-spacing:.02em;margin-top:var(--sp-16)}
.cta .body{display:grid;gap:var(--sp-16);max-width:var(--measure)}
.cta .acts{display:flex;flex-wrap:wrap;gap:var(--sp-16) var(--sp-24);align-items:center;margin-top:var(--sp-16)}

/* footer */
.ft{display:grid;grid-template-columns:auto minmax(0,1fr);gap:var(--sp-16) var(--gutter);align-items:center;padding:var(--sp-40) var(--gutter);border-top:var(--bw-1) solid var(--rule);font-size:var(--fs-14)}
.ft .logo{width:220px}
.ft p{justify-self:end;text-align:right}
.ft p+p{grid-column:2;color:var(--muted)}
.ft a{text-decoration:underline}
@media(max-width:820px){.ft{grid-template-columns:minmax(0,1fr)}.ft p,.ft p+p{justify-self:start;text-align:left;grid-column:1}}

@media (prefers-reduced-motion:reduce){*,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}.lvl.sweep i{width:40%}}

/* Gold for the action, 28 October 2026 (one job per colour: gold only on what you click or focus) */
.btn:not(.sec){background:var(--gold);border-color:var(--gold);color:var(--n-9)}
.btn:not(.sec):hover{background:var(--gold);color:var(--n-9);outline-color:var(--gold)}
.seg input:checked+span{background:var(--gold);color:var(--n-9)}
.hd-tool nav a[aria-current=page]{text-decoration-color:var(--gold)}

/* Design rules, 28 October 2026 (design_rules.py). Gold only on what you click or focus. */
html{--action:var(--gold)}
body,.inv,[data-hero]{--gold:var(--ink)!important;--acc:var(--ink)!important;--on-gold:var(--ground)!important;--on-acc:var(--ground)!important}
:is(a,button,summary,select,textarea,input,label:has(input),[role=tab],.btn){--gold:var(--action)!important;--acc:var(--action)!important;--on-gold:var(--n-9)!important;--on-acc:var(--n-9)!important}
.inv :is(a,button,summary,select,textarea,input,label:has(input),[role=tab],.btn){--acc:color-mix(in srgb,var(--action) 62%,var(--n-9))!important}
.scr .hull,.ps .hull,.pin .date .hull{background:var(--ink)!important;color:var(--ground)!important}
.fig{--gold:var(--muted)!important;--acc:var(--muted)!important}
input{accent-color:var(--action)}
input[type=radio],input[type=checkbox]{margin:0 8px 0 0}
input[type=range]{margin:0}
.hd nav a{white-space:nowrap;letter-spacing:.04em!important;font-stretch:100%!important}
@media(min-width:821px) and (max-width:1439px){.hd:has(.crumb){flex-wrap:wrap;row-gap:16px}.hd:has(.crumb) nav{margin-left:0;flex-basis:100%}}
.hull{padding:0 round(calc(var(--hull) + 16px), 8px)!important}
:focus-visible{outline:2px solid var(--action)!important}
[tabindex="-1"]:focus{outline:none!important}
/* one display face: large figures in Michroma, not the mono */
.sn,.sb i,.tier .p,.tiers .p,div.p,.gnum,.score,.qscore b,.cres dd,.cr b{font-family:var(--font-display)!important;font-weight:400!important}