/* The artboard is drawn in Inter at its normal weight; the landing sheet sets
   the body to 300 for its own display type, so the room takes 400 back. */
.tools{padding:56px 0 64px;display:flex;flex-direction:column;align-items:center;font-weight:400}
.tools .col{width:980px;max-width:100%}
.tools .head{display:flex;flex-direction:column;gap:12px}
.tools .tk{font-family:"Inter",sans-serif;font-weight:500;font-size:11px;letter-spacing:.06em;
  text-transform:uppercase;color:#8f4a00}
.tools h1{margin:0;font-size:46px;line-height:1.05;letter-spacing:-.03em;font-weight:700}
.tools .lede{margin:0;font-size:17px;color:var(--ink-soft);max-width:52ch}

/* the one card the tool lives in */
.tools .panel{margin-top:34px;background:var(--card);border-radius:22px;padding:28px;
  box-shadow:0 1px 2px rgba(13,27,42,.06),0 10px 30px -12px rgba(13,27,42,.18);
  display:flex;flex-direction:column;gap:22px}
.tools .panel-top{display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap}
.tools .panel-label{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.tools .chips{display:flex;gap:8px;flex-wrap:wrap}
.tools .chip{background:var(--tint);border:1px solid var(--line);border-radius:999px;
  padding:6px 12px;font-size:12.5px;font-weight:500;font-family:inherit;color:var(--ink);
  cursor:pointer;transition:border-color .18s ease,background .18s ease,transform .14s cubic-bezier(.23,1,.32,1)}
/* Hover belongs to a mouse; a finger gets the press instead (styleguide §3,
   "Press, hover, focus and touch"). Every press scale is cancelled under
   reduced motion at the foot of this sheet. */
@media (hover:hover) and (pointer:fine){.tools .chip:hover{border-color:var(--glow-soft)}}
.tools .chip:active{transform:scale(.97)}
.tools .chip.on{background:var(--ink);color:var(--cream);border-color:var(--ink)}
.tools .chip.paste{background:transparent;border:1px dashed #cfc7b3;color:var(--ink-soft)}
.tools .note{margin:-12px 0 0;font-size:12.5px;color:var(--ink-faint)}
.tools .paster{display:flex;gap:10px;flex-wrap:wrap}
.tools .paster input{flex:1;min-width:240px;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:14px;
  padding:12px 14px;border-radius:12px;border:1px solid var(--line);background:var(--paper);
  color:var(--ink)}
.tools .paster input:focus{outline:2px solid var(--glow-soft);outline-offset:1px}

/* the report itself */
.tools .report{display:flex;flex-wrap:wrap;gap:10px 8px;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;
  font-size:26px;font-weight:500;line-height:1.2;padding:8px 0}
.tools .g{font:inherit;background:none;border:0;cursor:pointer;border-bottom:3px solid transparent;
  padding:2px 4px;color:#b7b0a0;transition:color .18s ease,border-color .18s ease}
.tools .g.read{border-bottom-color:#cfc7b3;color:var(--ink-soft)}
.tools .g.on{background:var(--night);color:var(--cream);border-radius:10px;padding:2px 10px;
  border-bottom-color:transparent;box-shadow:0 8px 20px -8px rgba(7,24,45,.5)}
.tools .g:focus-visible{outline:2px solid var(--glow);outline-offset:2px}

/* explanation and the running sentence, side by side */
.tools .split{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:18px;align-items:stretch}
.tools .say{background:var(--night);color:var(--cream);border-radius:16px;padding:22px 24px;
  display:flex;flex-direction:column;gap:10px}
.tools .say-top{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
/* class plus element, so these beat .tools .say p, which sets the body cream */
.tools .say p.say-where{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--glow-soft)}
.tools .say p.say-code{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:#9db6cc}
.tools .say h2{margin:0;font-size:24px;font-weight:600;letter-spacing:-.01em;line-height:1.25}
.tools .say p{margin:0;font-size:15px;line-height:1.55;color:rgba(253,247,234,.82)}
/* written with the .say ancestor so it beats .tools .say p on specificity:
   the trap is amber on the night card, not body cream */
.tools .say p.trap{margin-top:6px;background:rgba(255,183,99,.14);border-radius:12px;padding:10px 14px;
  font-size:13.5px;line-height:1.5;color:var(--glow-soft)}
.tools .say-acts{display:flex;gap:10px;margin-top:8px;flex-wrap:wrap}
.tools .say-acts button{font-family:inherit;border-radius:999px;padding:10px 18px;font-size:14px;
  cursor:pointer;transition:transform .16s cubic-bezier(.23,1,.32,1),background .18s ease}
.tools .say-acts .next{background:var(--cream);color:var(--ink);border:0;font-weight:600}
.tools .say-acts .all{background:transparent;border:1px solid rgba(255,255,255,.25);
  color:var(--cream);font-weight:500}
@media (hover:hover) and (pointer:fine){.tools .say-acts button:hover{transform:translateY(-1px)}}
.tools .say-acts button:active:not(:disabled){transform:scale(.97);transition-duration:.12s}
.tools .say-acts button:disabled{opacity:.45;cursor:default;transform:none}

.tools .sofar{background:var(--tint);border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;gap:12px}
.tools .sofar-label{font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.tools .sofar p{margin:0;font-size:14px;line-height:1.5}
.tools .sofar .now{font-weight:600;color:var(--ink)}
.tools .sofar .now .stop{color:var(--glow)}
.tools .sofar .later{color:#b7b0a0}
.tools .bar{margin-top:auto;display:flex;align-items:center;gap:8px}
.tools .bar .track{flex:1;height:6px;border-radius:999px;background:var(--line);overflow:hidden}
/* The fill scales rather than resizes: only transform and opacity animate, so
   the bar moves on the compositor (Emil audit 2026-09-27). The inline style
   sets --fill, 0 to 1, over the empty bar declared here. */
.tools .bar .fill{--fill:0;height:100%;background:var(--glow);border-radius:999px;transform-origin:left center;
  transform:scaleX(var(--fill));transition:transform .2s cubic-bezier(.23,1,.32,1)}
.tools .bar .count{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;color:var(--ink-faint)}

/* the three cards under the tool */
.tools .more{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tools .mcard{background:var(--card);border-radius:22px;padding:22px;display:flex;
  flex-direction:column;gap:8px;box-shadow:0 1px 2px rgba(13,27,42,.06);text-decoration:none;
  transition:transform .18s cubic-bezier(.23,1,.32,1),box-shadow .18s ease}
@media (hover:hover) and (pointer:fine){
  a.mcard:hover{transform:translateY(-2px);box-shadow:0 2px 4px rgba(13,27,42,.08),0 14px 30px -14px rgba(13,27,42,.24)}
}
a.mcard:active{transform:scale(.99);transition-duration:.12s}
.tools .mcard .kick{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.tools .mcard h3{margin:0;font-size:17px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tools .mcard p{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.tools .mcard.night{background:var(--night);color:var(--cream)}
.tools .mcard.night .kick{color:var(--glow-soft)}
.tools .mcard.night p{color:rgba(253,247,234,.78)}
.tools .mcard .cta{align-self:flex-start;margin-top:6px;background:var(--glow);color:#26140a;
  border-radius:999px;padding:9px 16px;font-weight:600;font-size:13.5px;text-decoration:none}

/* the crosswind calculator, the same panel with three fields in it */
.tools .fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:16px}
.tools .fields label{display:flex;flex-direction:column;gap:8px;font-size:12.5px;font-weight:500;
  color:var(--ink-soft)}
.tools .fields input{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:20px;padding:12px 14px;
  border-radius:12px;border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.tools .fields input:focus{outline:2px solid var(--glow-soft);outline-offset:1px}
.tools .figs2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}
.tools .fig{background:var(--tint);border-radius:16px;padding:18px 20px;display:flex;
  flex-direction:column;gap:6px}
.tools .fig .k{margin:0;font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.tools .fig .v{margin:0;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:46px;font-weight:500;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.tools .fig .s{margin:0;font-size:13.5px;color:var(--ink-soft);line-height:1.5}
.tools .working{margin:0;font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;line-height:1.6;
  color:var(--ink-soft)}

/* the hub: two live rows and the ones that are not built yet */
.tools .rows{display:flex;flex-direction:column}
.tools .row{display:flex;align-items:baseline;gap:14px;padding:16px 0;border-top:1px solid var(--line);
  text-decoration:none;flex-wrap:wrap}
.tools .row:first-child{border-top:0}
.tools .row .n{font-size:17px;font-weight:600;letter-spacing:-.01em}
.tools .row .d{font-size:14px;color:var(--ink-soft);flex:1;min-width:220px}
.tools .row .s{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
@media (hover:hover) and (pointer:fine){.tools a.row:hover .n{color:#8f4a00}}

/* ── The tools added on 2026-09-08 ──────────────────────────────────────────
   Everything below is built from the values already above it: the 22px panel,
   the 16px tint block, the tabular figure, the amber kick.

   THE ONE EXCEPTION, and why it is here. The tools room wears the MARKETING
   shell, which defines the landing palette and NOT the app kit's tokens. Three
   of these tools need the kit's marked-answer pair: the mock marks an option
   red or green, the holding diagram tints its three sectors, and the wind
   triangle draws its closing arm in the "this is the answer" green. Written as
   var(--good) they resolved to nothing at all, so the mock marked no answer and
   the triangle drew its third arm in the default black, which is how this was
   found: on screen, not in a test.

   So the pair is redeclared here with the values components/v16/tokens.ts
   already gives it, unchanged, and the three hexes are allow-listed in the
   conformance gate with that reason. Redeclaring rather than re-deriving is
   the point: a sample marked in this room is marked in the same green as the
   same question marked in the practice runner. */
.tools{
  --good:#009966; --good-base:#00bc7d;
  --good-fill:rgba(0,188,125,.10); --good-line:rgba(0,188,125,.30);
  --bad:#ee343b; --bad-fill:rgba(238,52,59,.10); --bad-line:rgba(238,52,59,.30);
}

/* a stack of read blocks: a TAF period, a SNOWTAM item, a working step */
.tools .stack{display:flex;flex-direction:column;gap:14px}
.tools .block{background:var(--tint);border-radius:16px;padding:18px 20px;
  display:flex;flex-direction:column;gap:8px}
.tools .block.lead{background:var(--night);color:var(--cream)}
.tools .block h3{margin:0;font-size:16px;font-weight:600;letter-spacing:-.01em;line-height:1.3}
.tools .block.lead h3{color:var(--cream)}
.tools .block p{margin:0;font-size:14px;line-height:1.55;color:var(--ink-soft)}
.tools .block.lead p{color:rgba(253,247,234,.82)}
.tools .block .code{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-faint);
  word-break:break-word}
.tools .block.lead .code{color:#9db6cc}
.tools .block .tag{align-self:flex-start;font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;
  letter-spacing:.06em;text-transform:uppercase;color:#8f4a00}
.tools .block.lead .tag{color:var(--glow-soft)}
/* the exam trap, amber on paper and amber on night, as the METAR card does it */
.tools .block p.trap{margin-top:4px;background:rgba(255,183,99,.18);border-radius:12px;
  padding:10px 14px;font-size:13px;line-height:1.5;color:var(--ink)}
.tools .block.lead p.trap{background:rgba(255,183,99,.14);color:var(--glow-soft)}

/* the groups inside one TAF period, and the per-third readings in a SNOWTAM */
.tools .glist{display:flex;flex-wrap:wrap;gap:8px;margin-top:2px}
.tools .grp{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;background:var(--paper);
  border:1px solid var(--line);border-radius:10px;padding:6px 10px;color:var(--ink)}
.tools .grp b{font-weight:500;color:var(--ink-soft)}

/* numbers on the left, the drawing on the right */
.tools .beside{display:grid;grid-template-columns:minmax(0,1fr) 340px;gap:18px;align-items:start}
.tools .draw{background:var(--tint);border-radius:16px;padding:14px;display:flex;
  flex-direction:column;gap:10px}
.tools .draw svg{width:100%;height:auto;display:block}
.tools .draw .cap{margin:0;font-size:12.5px;color:var(--ink-soft);line-height:1.5}
/* One legend entry per line. Three of them do not fit across the 340px rail,
   and wrapping left the third stranded under the other two with its swatch out
   of line, so they stack instead. */
.tools .key{display:flex;flex-direction:column;gap:6px;font-size:12.5px;color:var(--ink-soft)}
.tools .key span{display:inline-flex;align-items:center;gap:8px}
.tools .key i{width:16px;height:3px;border-radius:2px;display:inline-block;flex:0 0 auto}

/* The holding entry sectors.
   The fills are written here rather than as an opacity on the shape, because
   the kit's --good-fill and --bad-fill are 10 percent alpha and a further 0.45
   opacity on the inactive ones took them to about 4 percent, which on paper is
   not a colour at all: the three sectors were indistinguishable. The sector the
   arrival falls in is strong enough to read at a glance and the other two are
   present but quiet, which is the job the diagram has. */
.tools .sec{stroke:var(--line);stroke-width:1}
.tools .sec.direct{fill:rgba(0,188,125,.12)}
.tools .sec.teardrop{fill:rgba(255,143,31,.12)}
.tools .sec.parallel{fill:rgba(238,52,59,.10)}
.tools .sec.direct.on{fill:rgba(0,188,125,.34)}
.tools .sec.teardrop.on{fill:rgba(255,143,31,.34)}
.tools .sec.parallel.on{fill:rgba(238,52,59,.28)}

/* the working, one numbered line per step */
.tools .steps{margin:0;padding:0;list-style:none;display:flex;flex-direction:column;gap:10px;
  counter-reset:step}
.tools .steps li{counter-increment:step;position:relative;padding-left:30px;font-size:13.5px;
  line-height:1.6;color:var(--ink-soft)}
.tools .steps li::before{content:counter(step);position:absolute;left:0;top:1px;
  font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:11px;width:20px;height:20px;border-radius:999px;
  background:var(--tint);color:var(--ink-faint);display:flex;align-items:center;justify-content:center}

/* a single big figure, for the tools with one answer */
.tools .figs3{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}
.tools .fields4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.tools .fields4 label,.tools .fields2 label{display:flex;flex-direction:column;gap:8px;
  font-size:12.5px;font-weight:500;color:var(--ink-soft)}
.tools .fields2{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px}
.tools .fields4 input,.tools .fields2 input,.tools .fields4 select,.tools .fields2 select{
  font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:18px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink)}
.tools .fields4 input:focus,.tools .fields2 input:focus,.tools .fields4 select:focus,
.tools .fields2 select:focus{outline:2px solid var(--glow-soft);outline-offset:1px}

/* the CX-3 embed, which is a third-party frame in our own card */
.tools .embed{background:var(--tint);border-radius:16px;overflow:hidden;
  display:flex;flex-direction:column}
.tools .embed-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:12px 16px;flex-wrap:wrap;border-bottom:1px solid var(--line)}
.tools .embed-bar p{margin:0;font-size:12.5px;color:var(--ink-soft)}
.tools .embed-bar a{font-size:12.5px;font-weight:600;color:#8f4a00}
.tools .embed-frame{position:relative;min-height:560px;background:var(--paper)}
.tools .embed-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.tools .embed-frame .waiting{position:absolute;inset:0;display:flex;align-items:center;
  justify-content:center;font-size:13.5px;color:var(--ink-faint)}

/* the five-question mock */
.tools .clock{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:22px;font-weight:500;color:var(--ink)}
.tools .clock.low{color:#8f4a00}
.tools .qhead{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  flex-wrap:wrap}
.tools .qhead .of{font-family:"Inter",sans-serif;font-weight:500;font-size:10.5px;letter-spacing:.06em;
  text-transform:uppercase;color:var(--ink-faint)}
.tools .opts{display:flex;flex-direction:column;gap:10px;margin:0;padding:0;list-style:none}
.tools .opt{display:flex;gap:12px;align-items:flex-start;width:100%;text-align:left;
  font-family:inherit;font-size:15px;line-height:1.5;padding:14px 16px;border-radius:14px;
  border:1px solid var(--line);background:var(--paper);color:var(--ink);cursor:pointer;
  transition:border-color .18s ease,background .18s ease,transform .14s cubic-bezier(.23,1,.32,1)}
@media (hover:hover) and (pointer:fine){.tools .opt:hover{border-color:var(--glow-soft)}}
.tools .opt:active:not(:disabled){transform:scale(.99)}
.tools .opt.picked{border-color:var(--ink);background:var(--tint)}
/* the kit's own marked-answer pair, so a sample here is marked exactly as the
   practice runner marks the same question */
.tools .opt.good{border-color:var(--good-line);background:var(--good-fill)}
.tools .opt.bad{border-color:var(--bad-line);background:var(--bad-fill)}
.tools .opt .ltr{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-faint);
  flex:0 0 auto;padding-top:2px}
.tools .acts{display:flex;gap:10px;flex-wrap:wrap}
.tools .acts button{font-family:inherit;border-radius:999px;padding:11px 20px;font-size:14px;
  font-weight:600;cursor:pointer;border:0;background:var(--ink);color:var(--cream);
  transition:transform .16s cubic-bezier(.23,1,.32,1)}
.tools .acts button.ghost{background:transparent;border:1px solid var(--line);color:var(--ink);
  font-weight:500}
@media (hover:hover) and (pointer:fine){.tools .acts button:hover{transform:translateY(-1px)}}
.tools .acts button:active:not(:disabled){transform:scale(.97);transition-duration:.12s}
.tools .acts button:disabled{opacity:.45;cursor:default;transform:none}
.tools .score{display:flex;align-items:baseline;gap:12px;flex-wrap:wrap}
.tools .score .big{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:52px;font-weight:500;
  letter-spacing:-.03em;line-height:1;color:var(--ink)}
.tools .score .of{font-size:14px;color:var(--ink-soft)}
.tools .bysub{display:flex;flex-direction:column;gap:0}
.tools .bysub .r{display:flex;align-items:baseline;justify-content:space-between;gap:14px;
  padding:12px 0;border-top:1px solid var(--line)}
.tools .bysub .r:first-child{border-top:0}
.tools .bysub .r .n{font-size:14.5px;font-weight:500}
.tools .bysub .r .v{font-family:"Inter",sans-serif;font-variant-numeric:tabular-nums;font-size:13px;color:var(--ink-soft)}

@media(max-width:960px){
  .tools .split{grid-template-columns:minmax(0,1fr)}
  .tools .sofar{min-height:0}
  .tools .more{grid-template-columns:minmax(0,1fr)}
  .tools .fields{grid-template-columns:minmax(0,1fr)}
  .tools .beside{grid-template-columns:minmax(0,1fr)}
  .tools .figs3{grid-template-columns:minmax(0,1fr)}
  .tools .fields4{grid-template-columns:repeat(2,minmax(0,1fr))}
}
@media(max-width:760px){
  .tools{padding:34px 0 44px}
  .tools h1{font-size:34px}
  .tools .panel{padding:20px;border-radius:20px;gap:18px}
  .tools .report{font-size:20px;gap:8px 6px}
  .tools .say{padding:18px 18px}
  .tools .say h2{font-size:20px}
  .tools .figs2{grid-template-columns:minmax(0,1fr)}
  .tools .fig .v{font-size:38px}
  .tools .fields4,.tools .fields2{grid-template-columns:minmax(0,1fr)}
  .tools .block{padding:16px}
  .tools .embed-frame{min-height:440px}
  .tools .score .big{font-size:42px}
}
/* Touch: a field under 16px makes iOS zoom the page on focus and never zoom
   back, and a report group is only ~31px tall at the phone size. The paste
   field reads at 16px, and each group's hit area grows to ~44px through an
   invisible layer, so the report line looks exactly as it did.
   GATE: __tests__/v16-touch-craft.test.ts */
@media(pointer:coarse){
  .tools .paster input{font-size:16px}
  .tools .g{position:relative}
  .tools .g::after{content:"";position:absolute;inset:-7px -3px}
}
@media(prefers-reduced-motion:reduce){
  .tools *,.tools *::before,.tools *::after{transition:none !important;animation:none !important}
  .tools .chip:active,.tools .say-acts button:active:not(:disabled),a.mcard:active,
  .tools .opt:active:not(:disabled),.tools .acts button:active:not(:disabled){transform:none}
  @media (hover:hover) and (pointer:fine){
    a.mcard:hover,.tools .say-acts button:hover,.tools .acts button:hover{transform:none}
  }
}