/* ============================================================
   THE PM CODE, The Assessment
   Tokens, buttons, rail, eyebrow and track-bar all come from
   pm.css. Everything here is the run itself: one call per
   screen, the gate, the report, and every way this page fails.

   Design system rules this file holds to (vault
   Projects/PM-Code/knowledge/thepmcode-design-system.md):
   paper and ink, ONE blue element per surface, edges not
   shadows, 1px hairlines, 3px ink rules, 2px radius, no
   gradients, no rounded cards, no emoji, no illustration.
   Graphic here means typographic: big numerals, meters, cell
   strips, mono eyebrows, hairline grids.

   Where the blue goes, one per screen, deliberately:
     intro    the Start button
     run      the Next button (the strip and the bar stay ink)
     gate     the unlock button
     report   trap cells in the strip, and the primary door
     failure  the one action
   ============================================================ */

.as-note{margin-top:18px;font-size:14px;color:var(--mute);max-width:52ch}
.as-screen[hidden]{display:none}
/* pm.js rewrites this section's class when it renders the Keep going block, so
   the rule hangs off the id, which survives. */
#as-next-shell[hidden],#as-foot[hidden]{display:none}

/* One display voice for every heading this file renders: the gate, the report
   verdict, the cooldown and all eleven failure states. It is the site's own,
   copied off .phead h1 in pm.css rather than invented here: 900, -.06em,
   line-height .86, uppercase. A page that shouts in a different type than
   every other page reads as a different site, and this one had been doing
   exactly that. The em carries the blue, which is the same idiom as the home
   hero's DECODED. */
.as-disp,.as-state-h{margin:0;font-weight:900;letter-spacing:-.06em;line-height:.86;text-transform:uppercase;
  font-size:clamp(40px,6.6vw,84px);max-width:15ch}
.as-disp em,.as-state-h em{font-style:normal;color:var(--blue)}
/* A failure heading is a sentence and not a name, so it gets the same voice
   two steps down rather than the full hero size. */
.as-state-h{margin-top:16px;font-size:clamp(32px,5vw,58px);max-width:17ch}
.as-verdict .as-disp{margin-top:16px}
.as-reads{margin-top:20px;max-width:56ch;font-size:var(--fs-lead);line-height:1.55;color:var(--ink-2)}
.as-score{margin-top:14px;font-family:var(--mono);font-size:12px;letter-spacing:.1em;text-transform:uppercase;color:var(--mute)}
.as-cap{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}

/* ---- Position, in mono ----
   The count used to be a 34px numeral. It competed with the display type on
   the same screen and told the reader nothing the strip below it did not, so
   it is one mono line now and the strip is the progress bar. */
.as-prog{font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--ink)}
.as-eyebrow{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--faint)}

/* ---- Twelve cells. The one graphic on this page. ----
   The run draws it filling; the report draws the same twelve with what each
   pick was worth. Same object, revealed. */
.as-strip{display:grid;grid-template-columns:repeat(12,1fr);gap:5px;margin-top:18px}
.as-cell{display:block;height:clamp(20px,2.6vw,30px);border:1px solid var(--line);border-radius:var(--r);background:var(--white)}
.as-cell.as-todo{background:var(--line-2);border-color:var(--line)}
.as-cell.as-done{background:var(--ink);border-color:var(--ink)}
.as-cell.as-now{background:var(--white);border:2px solid var(--ink)}
.as-cell.as-best{background:var(--ink);border-color:var(--ink)}
.as-cell.as-defensible{background:rgba(10,10,10,.42);border-color:rgba(10,10,10,.42)}
.as-cell.as-weak{background:var(--white);border-color:var(--ink-2)}
.as-cell.as-trap{background:var(--white);border:2px solid var(--blue)}
.as-cell.as-blank{background:var(--white);border-style:dashed}
.as-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 18px}
.as-legend li{display:flex;align-items:center;gap:8px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}
.as-legend .as-cell{width:12px;height:12px;flex:none}

/* ---- One call per screen ---- */
.as-run{max-width:760px;margin:0 auto}
.as-top{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap}
/* Two zones, each labelled. The reader has to know where the scenario stops
   and the question starts; before this they were one block of body copy and
   the eye had nothing to land on. */
.as-zone{margin-top:28px;padding-top:18px;border-top:1px solid var(--line)}
.as-stem{margin-top:12px;max-width:60ch;font-size:17px;line-height:1.62;color:var(--ink-2)}
.as-stem + .as-stem{margin-top:14px}
@media (min-width:760px){.as-stem{font-size:17.5px}}
.as-ask{padding-bottom:2px}
.as-instruct{margin-top:10px;font-size:17px;line-height:1.4;font-weight:600;color:var(--ink)}

/* Cards on a hairline grid. The letter is a column of its own, big enough to
   be the thing a reader points at when they say which call they made. */
.as-opts{margin-top:14px;display:grid;gap:8px}
.as-opt{display:grid;grid-template-columns:52px 1fr;gap:0;align-items:start;width:100%;text-align:left;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);padding:0;
  font:inherit;color:var(--ink);line-height:1.5;cursor:pointer;min-height:64px;
  transition:border-color .14s ease,background .14s ease}
.as-opt .k{display:flex;align-items:flex-start;justify-content:center;padding:16px 0 0;
  border-right:1px solid var(--line);align-self:stretch;
  font-family:var(--mono);font-size:19px;font-weight:500;letter-spacing:.02em;color:var(--ink-2);background:var(--warm)}
.as-opt .t{font-size:15.5px;line-height:1.55;padding:17px 20px 18px}
.as-opt:hover{border-color:var(--ink-2)}
.as-opt:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-opt[aria-checked="true"]{border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.as-opt[aria-checked="true"] .k{background:var(--ink);color:var(--paper);border-right-color:var(--ink)}
@media (prefers-reduced-motion:reduce){.as-opt{transition:none}}

.as-nav{margin-top:26px;padding-top:22px;border-top:var(--rule) solid var(--ink);display:flex;gap:10px;align-items:center}
.as-nav .btn{flex:1 1 auto;justify-content:center}
@media (min-width:600px){.as-nav .btn{flex:0 0 auto}}
.as-nav .btn[disabled]{opacity:.35;pointer-events:none}
.as-hint{margin-top:14px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--faint)}
@media (max-width:600px){.as-hint{display:none}}

/* ---- The gate ---- */
.as-verdict{max-width:640px;margin:0 auto}
.as-gate{margin-top:28px;padding-top:24px;border-top:var(--rule) solid var(--ink);display:grid;gap:12px}
.as-lbl{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.as-gate input[type=email]{width:100%;padding:15px 14px;border:1px solid var(--ink);border-radius:var(--r);
  background:var(--white);font:inherit;font-size:16px;color:var(--ink)}
.as-gate input[type=email]:focus-visible{outline:2px solid var(--ink);outline-offset:1px}
.as-gate input.bad{border-color:var(--blue);border-width:2px}
.as-chk{display:flex;gap:11px;align-items:flex-start;font-size:14px;line-height:1.5;color:var(--ink-2);cursor:pointer}
.as-chk input{margin-top:3px;width:17px;height:17px;flex:none;accent-color:var(--ink)}
.as-gate .btn{justify-content:center;margin-top:4px}

/* ---- Every failure, and the cooldown, in one grammar ---- */
/* The failure screens and the cooldown sit in the same 760px column as the
   run and the report, so a reader who hits one does not watch the page jump. */
#as-state-host,#as-cooldown-host{max-width:760px;margin:0 auto}
.as-state{max-width:600px;padding:clamp(26px,3.4vw,40px) 0;border-top:var(--rule) solid var(--ink)}
.as-state-p{margin-top:18px;max-width:52ch;font-size:16.5px;line-height:1.6;color:var(--ink-2)}
.as-state-act{margin-top:26px;display:flex;gap:10px;flex-wrap:wrap}
/* Inside the gate form the notice is a note, not a screen: it sits under the
   button that is still the action, and it never takes the blue. */
.as-state-in{max-width:none;padding:16px 0 0;border-top:1px solid var(--line)}
.as-state-in .as-state-h{margin-top:10px;font-size:19px;letter-spacing:-.02em;line-height:1.2;max-width:none}
.as-state-in .as-state-p{margin-top:8px;font-size:14px}
.as-state-in .as-state-act{margin-top:14px}

/* ---- The report ---- */
.as-report{max-width:760px;margin:0 auto}
.as-report .as-verdict{max-width:none;margin:0}
.as-block{margin-top:clamp(38px,4.6vw,58px)}

/* Read back on a later visit. It sits above the archetype so a returning
   reader knows what they are looking at before they read a verdict they have
   already seen, and it stays a text link so the one primary on the page is
   still the one ctaBlock draws at the bottom. */
.as-saved{margin-bottom:clamp(26px,3vw,36px);padding:16px 18px;border:1px solid rgba(37,99,235,.28);border-left:var(--rule) solid var(--blue);border-radius:var(--r);background:var(--blue-wash)}
.as-saved p{margin-top:8px;max-width:56ch;font-size:14.5px;line-height:1.6;color:var(--ink-2)}
.as-saved .as-saved-go{display:inline-block;margin-top:10px;font-family:var(--mono);font-size:11px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue);border-bottom:1px solid rgba(37,99,235,.4);padding-bottom:2px}
.as-saved .as-saved-go:hover{color:var(--blue-dk);border-bottom-color:var(--blue-dk)}

/* Where you are. The bucket as a word, set like a numeral. */
.as-where{margin-top:clamp(38px,4.6vw,58px);padding:26px;border:1px solid var(--line);border-radius:var(--r);background:var(--warm)}
.as-where b{display:block;margin-top:10px;font-size:clamp(34px,4.6vw,52px);font-weight:900;letter-spacing:-.05em;line-height:1}
.as-where p{margin-top:14px;max-width:54ch;font-size:16px;line-height:1.6;color:var(--ink-2)}
.as-where .as-score{margin-top:16px}

/* Two moves. 01 and 02 in mono, one sentence each. */
.as-moves{list-style:none;margin:0;padding:0;display:grid;gap:2px}
.as-moves li{display:grid;grid-template-columns:44px 1fr;gap:16px;padding:18px 0;border-bottom:1px solid var(--line)}
.as-moves .n{font-family:var(--mono);font-size:13px;letter-spacing:.08em;color:var(--faint)}
.as-moves p{margin:0;font-size:16px;line-height:1.6;color:var(--ink-2)}

/* The calls you read past, one at a time. A wall of twelve is a wall. */
.as-flagbox{border:1px solid var(--line);border-radius:var(--r);background:var(--white);padding:clamp(18px,2.4vw,26px)}
.as-flagbar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding-bottom:16px;border-bottom:1px solid var(--line)}
.as-fband{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
/* Which calls the key is showing. Two states, one of them always on. */
.as-filter{display:flex;flex-wrap:wrap;gap:8px;padding-bottom:16px}
.as-tab{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;
  padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:var(--white);
  color:var(--mute);cursor:pointer}
.as-tab:hover{border-color:var(--ink-2);color:var(--ink)}
.as-tab.on{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.as-tab[disabled]{opacity:.4;pointer-events:none}
.as-tab:focus-visible{outline:2px solid var(--ink);outline-offset:2px}

/* One call, opened. Ranked, not alphabetical: the order is the lesson. */
.as-key{padding-top:20px}
.as-key .stem{margin-top:12px;max-width:62ch;font-size:16.5px;line-height:1.58;color:var(--ink)}
.as-unanswered{margin-top:12px;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--blue)}
.as-ranks{list-style:none;margin:22px 0 0;padding:0;display:grid;gap:2px}
.as-rank{padding:16px 0 16px 16px;border-left:1px solid var(--line)}
.as-rank.mine{border-left:var(--rule) solid var(--ink)}
.as-rank .rh{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
/* The letter wears the same four fills as the strip legend, so a reader can
   match a row to a cell without reading the label. */
.as-rank .k{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;flex:none;
  font-family:var(--mono);font-size:12px;font-weight:500;color:var(--ink);
  border:1px solid var(--ink-2);border-radius:var(--r);background:var(--white)}
.as-rank.as-best .k{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.as-rank.as-defensible .k{background:rgba(10,10,10,.42);border-color:transparent;color:var(--paper)}
.as-rank.as-trap .k{border:2px solid var(--blue);color:var(--blue)}
.as-rank .lv{font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--mute)}
.as-rank.as-best .lv{color:var(--ink)}
.as-rank.as-trap .lv{color:var(--blue)}
.as-rank .you{font-family:var(--mono);font-size:10px;letter-spacing:.13em;text-transform:uppercase;
  background:var(--ink);color:var(--paper);border-radius:var(--r);padding:3px 7px}
.as-rank .opt{margin-top:9px;max-width:62ch;font-size:15.5px;line-height:1.55;color:var(--ink)}
.as-rank .why{margin-top:7px;max-width:62ch;font-size:14.5px;line-height:1.62;color:var(--mute)}
.as-signal{margin-top:24px;padding-top:16px;border-top:1px solid var(--line);max-width:62ch;
  font-size:14.5px;line-height:1.62;color:var(--mute)}
.as-signal span{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;
  text-transform:uppercase;color:var(--faint);margin-bottom:7px}
.as-fpos{flex:1 1 auto;text-align:center;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.as-fnav{margin-top:26px;padding-top:18px;border-top:1px solid var(--line);display:flex;gap:10px;align-items:center}
.as-fnav .btn{flex:1 1 auto;justify-content:center}
.as-fnav .btn[disabled]{opacity:.35;pointer-events:none}
@media (min-width:600px){.as-fnav .btn{flex:0 0 auto}}

/* ---- The doors ---- */
.as-cta{margin-top:clamp(40px,5vw,64px);padding-top:28px;border-top:var(--rule) solid var(--ink);display:flex;gap:10px;flex-wrap:wrap}
.as-cta .btn{flex:1 1 auto;justify-content:center}
@media (min-width:600px){.as-cta .btn{flex:0 0 auto}}
.as-lead-line{flex:1 1 100%;margin:6px 0 0;font-size:14.5px;line-height:1.6;color:var(--mute)}
.as-lead-line a{color:var(--ink);text-decoration:underline;text-underline-offset:3px}

/* ---- 360px. Twelve cells and four bands both have to hold. ---- */
@media (max-width:420px){
  .as-strip{gap:3px}
  .as-opt{grid-template-columns:42px 1fr}
  .as-opt .k{font-size:15px;padding-top:16px}
  .as-opt .t{padding:15px 14px 16px}
  .as-rank{padding-left:13px}
  .as-moves li{grid-template-columns:34px 1fr;gap:12px}
  .as-where{padding:20px}
}


/* ============================================================
   THE REPORT CARD
   Everything above this line is the run. This is the object a
   reader has just paid an email for, and it has to look like a
   report card rather than a stack of sections: one frame, a
   masthead, a grade, a chart, twelve graded calls, a footer.

   On the blue: the report is a long surface, so the one-blue
   rule is read as one MEANING rather than one element. Blue
   here says "this is the part to act on": the archetype name,
   the weakest band wherever it appears, the trap cells, and
   the primary door. Nothing decorative is blue.
   ============================================================ */

.as-card{margin-top:clamp(32px,4vw,48px);border:1px solid var(--ink);border-radius:var(--r);background:var(--white)}

/* The masthead. Ink bar, paper type, mono: it says report card before a
   single number is read. */
.as-cardtop{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 20px;background:var(--ink);color:var(--paper)}
.as-cardtop .ttl{font-family:var(--mono);font-size:11.5px;font-weight:500;letter-spacing:.2em;text-transform:uppercase}
.as-cardtop .who{font-family:var(--mono);font-size:10.5px;letter-spacing:.14em;text-transform:uppercase;color:rgba(250,250,250,.62)}

/* The grade row. Three cells, hairline between, the letter set as a numeral
   because the letter is what a reader repeats out loud. */
.as-stats{display:grid;grid-template-columns:1fr;border-bottom:1px solid var(--line)}
.as-stats .st{display:flex;flex-direction:column;padding:20px;border-bottom:1px solid var(--line-2)}
.as-stats .st:last-child{border-bottom:0}
.as-stats .k{display:block;font-family:var(--mono);font-size:10.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--faint)}
.as-stats b{display:block;margin-top:8px;font-size:clamp(28px,3.6vw,40px);font-weight:900;letter-spacing:-.045em;line-height:1}
.as-stats b i{font-style:normal;font-weight:800;font-size:.5em;letter-spacing:-.02em;color:var(--faint)}
.as-stats b.gr{font-size:clamp(44px,5.6vw,64px);letter-spacing:-.06em}
.as-stats .v{display:block;margin-top:auto;padding-top:10px;font-size:13.5px;line-height:1.45;color:var(--mute)}
@media (min-width:640px){
  .as-stats{grid-template-columns:repeat(3,1fr)}
  .as-stats .st{border-bottom:0;border-right:1px solid var(--line-2)}
  .as-stats .st:last-child{border-right:0}
}

/* The chart and the graded list are one unit: the diamond is the shape, the
   list is the reading. Neither is enough alone, so neither ships alone. */
.as-chart{display:grid;grid-template-columns:1fr;gap:clamp(18px,2.6vw,32px);padding:clamp(20px,2.6vw,28px);border-bottom:1px solid var(--line)}
@media (min-width:760px){.as-chart{grid-template-columns:minmax(0,340px) minmax(0,1fr);align-items:center}}
.as-radar{display:block;width:100%;height:auto;max-width:460px;margin:0 auto}
.as-radar .rr{fill:none;stroke:var(--line);stroke-width:1}
.as-radar .rr.out{stroke:var(--ink-2)}
.as-radar .rs{stroke:var(--line);stroke-width:1}
.as-radar .rf{fill:rgba(10,10,10,.1);stroke:var(--ink);stroke-width:2}
.as-radar .rd{fill:var(--ink)}
.as-radar .rd.weak{fill:var(--blue)}
.as-radar .rl{font-family:var(--mono);font-size:11px;letter-spacing:.1em;text-transform:uppercase;fill:var(--mute)}
.as-radar .rl.weak{fill:var(--blue)}
.as-radar .rv{font-weight:700;fill:var(--ink)}
.as-radar .rl.weak .rv{fill:var(--blue)}
.as-chartside{min-width:0}

/* One graded row per band: letter, name, track with quarter ticks, points,
   percentage. The ticks are what make it a chart instead of four lengths. */
.as-grades{list-style:none;margin:12px 0 0;padding:0}
.as-grow{display:grid;grid-template-columns:34px minmax(0,1fr) auto;grid-template-areas:"g nm ct" "g tr tr" "g pc pc";
  gap:5px 12px;padding:13px 0 14px;border-bottom:1px solid var(--line-2)}
.as-grow:last-child{border-bottom:0}
.as-grow .g{grid-area:g;align-self:start;font-size:24px;font-weight:900;letter-spacing:-.04em;line-height:1.1;color:var(--ink-2)}
.as-grow .nm{grid-area:nm;font-size:14.5px;font-weight:700;letter-spacing:-.01em;min-width:0}
.as-grow .nm b{display:inline-block;margin-left:8px;font-family:var(--mono);font-size:9.5px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;color:var(--blue);vertical-align:1px}
.as-grow .ct{grid-area:ct;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--mute);white-space:nowrap}
.as-grow .tr{grid-area:tr;position:relative;display:block;height:9px;background:var(--warm);border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.as-grow .tr i{display:block;height:100%;background:var(--ink-2)}
.as-grow .tr u{position:absolute;top:0;bottom:0;width:1px;background:var(--line);text-decoration:none}
.as-grow .pc{grid-area:pc;font-family:var(--mono);font-size:10.5px;letter-spacing:.1em;color:var(--faint)}
.as-grow.weak .g{color:var(--blue)}
.as-grow.weak .tr i{background:var(--blue)}

/* Twelve numbered calls. The unnumbered strip said how the run went and never
   once said WHICH call went that way, so every cell is a numeral now and every
   numeral is a button into the answer key. */
.as-callrow{padding:clamp(20px,2.6vw,28px)}
.as-callrow .as-cap{display:block}
.as-grid{list-style:none;margin:14px 0 0;padding:0;display:grid;grid-template-columns:repeat(6,1fr);gap:7px}
@media (min-width:600px){.as-grid{grid-template-columns:repeat(12,1fr)}}
.as-grid .as-gcell{display:flex;align-items:center;justify-content:center;width:100%;aspect-ratio:1;padding:0;
  font-family:var(--mono);font-size:13px;font-weight:500;letter-spacing:0;
  background:var(--white);border:1px solid var(--line);border-radius:var(--r);color:var(--ink-2);cursor:pointer;transition:.15s}
.as-grid .as-gcell:hover{transform:translateY(-2px)}
.as-grid .as-gcell:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-gcell.as-best{background:var(--ink);border-color:var(--ink);color:var(--paper)}
.as-gcell.as-defensible{background:rgba(10,10,10,.42);border-color:rgba(10,10,10,.42);color:var(--white)}
.as-gcell.as-weak{background:var(--white);border-color:var(--ink-2);color:var(--ink)}
.as-gcell.as-trap{background:var(--white);border:2px solid var(--blue);color:var(--blue)}
.as-gcell.as-blank{background:var(--white);border-style:dashed;color:var(--faint)}
.as-legend .as-gcell{width:13px;height:13px;aspect-ratio:auto;flex:none;padding:0;border:1px solid var(--line);border-radius:var(--r);cursor:default}

/* The footer is what survives a screenshot: where this came from and what it
   costs the next person. */
.as-cardfoot{display:flex;align-items:baseline;justify-content:space-between;gap:14px;flex-wrap:wrap;
  padding:13px 20px;border-top:1px solid var(--line);background:var(--warm);
  font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--mute)}

/* ---- Share ----
   Four buttons and the exact line they post, visible, because a reader who is
   about to put their own name on a sentence gets to read it first. */
.as-share{margin-top:clamp(38px,4.6vw,58px)}
.as-shrow{display:flex;flex-wrap:wrap;gap:8px;margin-top:18px}
.as-sh{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;
  font-family:var(--mono);font-size:11px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
  color:var(--ink);background:var(--white);border:1px solid var(--line);border-radius:var(--r);cursor:pointer;transition:.15s}
.as-sh:hover{border-color:var(--ink);background:var(--warm)}
.as-sh:focus-visible{outline:2px solid var(--ink);outline-offset:2px}
.as-shtext{margin:16px 0 0;max-width:62ch;padding:14px 16px;border-left:var(--rule) solid var(--line);
  font-size:14px;line-height:1.6;color:var(--mute);white-space:pre-line;word-break:break-word}
.as-shnote{margin:10px 0 0;min-height:19px;font-family:var(--mono);font-size:10.5px;letter-spacing:.12em;text-transform:uppercase;color:var(--ink)}

/* The quiet door beside the blue one. It had no rule at all, so it sat on the
   button's baseline as raw link text. */
.as-cta .alt{display:inline-flex;align-items:center;min-height:44px;font-size:14.5px;color:var(--ink);
  text-decoration:underline;text-underline-offset:3px;text-decoration-thickness:1px}
.as-cta .alt:hover{color:var(--blue)}

@media (max-width:420px){
  .as-cardtop,.as-cardfoot{padding:12px 16px}
  .as-cardtop .who{display:none}
  .as-stats .st{padding:16px}
  .as-grow{grid-template-columns:28px minmax(0,1fr) auto;gap:5px 10px}
  .as-grow .g{font-size:21px}
  .as-radar .rl{font-size:13px}
  .as-sh{flex:1 1 auto}
}