/* MISH identity: tokens and host components. Revision 3.
   Linked in index.html straight after showcase.css. The spec, with measured contrast for every pair used here,
   is docs/review/identity-spec.md. The specimen is docs/review/ports/identity/specimen.html.

   How it is organised
   1. Font faces: only files that exist in assets/fonts (Montserrat 400 and 600, JetBrains Mono 400 to 800).
   2. Tokens on :root. Raw palette first, then semantic tokens for the dark stage (the default host).
   3. Surface scopes: .mish-stage (dark), .mish-paper (light reading layout) and the chrome (.mish-bar, .mish-guide,
      .mish-ident, .mish-footer). Each scope re-declares every semantic token, because a var() inside a custom property
      resolves where it is declared, not where it is used.
   4. Components: wordmark, channel bar, guide, ident strip, buttons, focus ring, honesty labels, paper reading layout,
      paper form fields, footer. Then forced colours.

   Breakpoints are in em, so a larger default text size moves a layout to its narrower form at the same window width.
   Range syntax: (width >= 75em) is 1200px at the default 16px text size.

   Cascade. This file loads last, after scrollcraft.css, styles.css and showcase.css (the order in index.html), and it
   is unlayered like them. A .mish-* class beats an element rule only for the properties the class itself sets. So every
   component that can sit on an element those sheets style (p, h1 to h3, svg path, input, :focus-visible) sets the
   properties they touch: max-width (styles.css p{max-width:68ch}), margin (p+p), font, letter-spacing, svg fill and
   stroke, field borders, and the focus radius (scrollcraft.css gives :focus-visible a 6px radius). The specimen is
   captured with all three sheets linked first, so it shows the real cascade. Move this file into @layer once the other
   sheets are layered.

   Token names are a contract. The ported modules (docs/review/ports/mind, day, engine, inner) already read
   --mish-abyss, --mish-edge, --mish-dim, --mish-on-mint, --mish-umber, --mish-header-h and --mish-viz-* with these exact
   values as fallbacks, and copy the class names below. Add tokens and classes freely; never rename one or change a value
   without updating them. */

@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-Regular.woff2') format('woff2'),url('assets/fonts/Montserrat-Regular.ttf') format('truetype');font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:Montserrat;src:url('assets/fonts/Montserrat-SemiBold.woff2') format('woff2'),url('assets/fonts/Montserrat-SemiBold.ttf') format('truetype');font-weight:600;font-style:normal;font-display:swap}
@font-face{font-family:'JetBrains Mono';src:url('assets/fonts/JetBrainsMono-400-800.woff2') format('woff2');font-weight:400 800;font-style:normal;font-display:swap}

:root{
  /* ---------- Raw palette: black stage, translucent purple reading panels, colored signals ---------- */
  --mish-abyss:#030405;        /* chrome: channel bar, guide, ident strip, footer */
  --mish-deep:#050607;         /* the stage */
  --mish-lift:rgba(36,19,54,.66); /* translucent purple reading surfaces */
  --mish-rule:#35414a;         /* decorative separators, never a control edge */
  --mish-edge:#89929e;         /* visible control and field boundaries */
  --mish-light:#fbf7ff;        /* headings and strong text on dark */
  --mish-body:#ded7ea;         /* running text on dark */
  --mish-muted:#c1b4d0;        /* secondary text on dark */
  --mish-dim:#b2a1c6;          /* tertiary text on dark: meta, "Now", captions */
  --mish-mint:#63d7e3;         /* teal blue signal; legacy token name retained */
  --mish-mint-hover:#a3eff6;
  --mish-on-mint:#050607;      /* text on a mint fill */
  --mish-teal:#63d7e3;         /* action and link color on the dark reading pages */
  --mish-teal-hover:#a3eff6;
  --mish-brass:#ffb16b;        /* a person's judgement: example labels, findings, approvals */
  --mish-purple:#bd9cff;--mish-red:#ff777f;
  --mish-amber:#ffb16b;        /* keyboard focus on dark, nothing else */

  /* ---------- Reading surfaces; legacy paper token names remain stable ---------- */
  --mish-paper:#050607;
  --mish-sage:rgba(36,19,54,.66);
  --mish-field:rgba(20,12,31,.88);
  --mish-ink:#f7f5fb;
  --mish-ink-muted:#c1b4d0;
  --mish-paper-rule:#35414a;   /* decorative separators on paper */
  --mish-umber:#ffb16b;        /* keyboard focus on paper, nothing else */

  /* ---------- Canvas only (particles, map edges); never body text ---------- */
  --mish-viz-mint:#63d7e3;
  --mish-viz-periwinkle:#bd9cff;
  --mish-viz-brass:#ffb16b;
  --mish-viz-rest:#ff777f;

  /* ---------- Semantic tokens, dark stage (default host) ---------- */
  --mish-surface:var(--mish-deep);
  --mish-surface-raised:var(--mish-lift);
  --mish-text:var(--mish-light);
  --mish-text-body:var(--mish-body);
  --mish-text-muted:var(--mish-muted);
  --mish-text-dim:var(--mish-dim);
  --mish-signal:var(--mish-mint);          /* signal as text or stroke */
  --mish-signal-mark:var(--mish-mint);     /* the square in the wordmark */
  --mish-line:var(--mish-rule);
  --mish-action:var(--mish-mint);
  --mish-action-text:var(--mish-on-mint);
  --mish-action-hover:var(--mish-mint-hover);
  --mish-note-rule:var(--mish-brass);
  --mish-note-text:var(--mish-brass);
  --mish-focus:var(--mish-amber);
  --mish-focus-gap:var(--mish-deep);       /* fills the 2px between a control and its ring */
  --mish-focus-width:3px;
  --mish-focus-offset:2px;                 /* the ring needs 5px of clear space outside a control; see .mish-focus-inset */
  --mish-stage-glow:var(--mish-deep);

  /* ---------- Type ---------- */
  --mish-font-display:Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif;
  --mish-font-body:Montserrat,'Avenir Next','Segoe UI',system-ui,sans-serif;
  --mish-font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  --mish-weight-regular:400;
  --mish-weight-semibold:600;
  --mish-weight-mono:500;      /* JetBrains Mono is variable 400 to 800; use 400, 500 or 600 */
  /* Fluid scale: the first value is the size at 390px wide, the last at 1440px, linear between. rem, so text zoom works. */
  --mish-step-label:clamp(.6875rem,.6643rem + .0952vw,.75rem);       /* 11 to 12px, mono labels; the phone floor */
  --mish-step-small:clamp(.8125rem,.7893rem + .0952vw,.875rem);      /* 13 to 14px */
  --mish-step-body:clamp(.9375rem,.8911rem + .1905vw,1.0625rem);     /* 15 to 17px */
  --mish-step-lead:clamp(1.0625rem,.9929rem + .2857vw,1.25rem);      /* 17 to 20px */
  --mish-step-title:clamp(1.25rem,1.1107rem + .5714vw,1.625rem);     /* 20 to 26px */
  --mish-step-heading:clamp(1.75rem,1.425rem + 1.3333vw,2.625rem);   /* 28 to 42px */
  --mish-step-display:clamp(2.125rem,1.6143rem + 2.0952vw,3.5rem);   /* 34 to 56px */
  --mish-lh-display:1.06;
  --mish-lh-heading:1.12;
  --mish-lh-title:1.25;
  --mish-lh-lead:1.55;
  --mish-lh-body:1.7;
  --mish-lh-label:1.4;
  --mish-track-display:-.04em;
  --mish-track-heading:-.035em;
  --mish-track-title:-.025em;
  --mish-track-label:.08em;
  --mish-measure:68ch;
  --mish-measure-stage:48ch;

  /* ---------- Space, radius, layout ---------- */
  --mish-space-1:4px;
  --mish-space-2:8px;
  --mish-space-3:12px;
  --mish-space-4:16px;
  --mish-space-5:24px;
  --mish-space-6:32px;
  --mish-space-7:48px;
  --mish-space-8:64px;
  --mish-space-9:96px;
  --mish-space-10:128px;
  --mish-gutter:clamp(16px,4vw,56px);
  --mish-section:clamp(56px,8vw,112px);
  --mish-max:1320px;
  --mish-radius-field:2px;
  --mish-radius-control:3px;
  --mish-radius-panel:6px;
  --mish-bar-h:64px;                       /* the channel bar's own minimum height */
  --mish-header-h:var(--mish-bar-h);       /* offset under the bar for pins, sticky navs and jumps.
                                              A script keeps it equal to the bar's real height when large text makes
                                              the bar taller (the specimen's syncHeader). The bar never reads it. */
  --mish-ident-h:40px;
  --mish-target:44px;
  --mish-z-bar:60;
  --mish-z-guide:61;

  /* ---------- Motion ---------- */
  --mish-motion:1;                              /* 0 under reduced motion or Pause motion; JS reads this */
  --mish-ease:cubic-bezier(.16,1,.3,1);         /* the house curve: fast out, long settle */
  --mish-ease-inout:cubic-bezier(.65,0,.35,1);
  --mish-dur-1:120ms;   /* colour on hover and press */
  --mish-dur-2:180ms;   /* button fills, toggles */
  --mish-dur-3:320ms;   /* small reveals, guide open, the plug seating */
  --mish-dur-4:700ms;   /* caption and section reveals */
  --mish-dur-5:1100ms;  /* the cable: a mint line drawing across */
  --mish-cable:2px;                             /* the cable's weight */
}
@media (prefers-reduced-motion:reduce){
  :root{--mish-motion:0;--mish-dur-3:0ms;--mish-dur-4:0ms;--mish-dur-5:0ms}
}
:root[data-motion="paused"]{--mish-motion:0;--mish-dur-3:0ms;--mish-dur-4:0ms;--mish-dur-5:0ms}
/* The bar is sticky on every page, so in-page jumps land below it. Beats styles.css (html{scroll-padding-top:110px})
   and showcase.css's home rule (html[data-page=home]{scroll-padding-top:0}) on specificity, once the bar is in the page. */
:root:has(.mish-bar){scroll-padding-top:calc(var(--mish-header-h) + var(--mish-space-4))}
/* The TBM kit follows native document reading position on every route. The thin edge is decorative,
   cannot intercept input, and sits below the focused skip link. No timed transition is added. */
.mish-reading-progress[data-tm]{--tm-accent:#63d7e3;--tm-accent-2:#ffb16b;top:0;height:3px;z-index:calc(var(--mish-z-bar) + 1);pointer-events:none;transform:scaleX(0);transform-origin:0 50%}

/* ---------- Surface scopes ---------- */
.mish-stage{
  --mish-surface:var(--mish-deep);--mish-surface-raised:var(--mish-lift);
  --mish-text:var(--mish-light);--mish-text-body:var(--mish-body);--mish-text-muted:var(--mish-muted);--mish-text-dim:var(--mish-dim);
  --mish-signal:var(--mish-mint);--mish-signal-mark:var(--mish-mint);--mish-line:var(--mish-rule);
  --mish-action:var(--mish-mint);--mish-action-text:var(--mish-on-mint);--mish-action-hover:var(--mish-mint-hover);
  --mish-note-rule:var(--mish-brass);--mish-note-text:var(--mish-brass);
  --mish-focus:var(--mish-amber);--mish-focus-gap:var(--mish-deep);
  color-scheme:dark;background:var(--mish-surface);color:var(--mish-text-body)
}
/* The lit stage: the radial lift A and B put behind their scenes. Text on it is measured against --mish-lift,
   its brightest point, so every pair that passes on --mish-lift passes anywhere on the glow. */
.mish-stage--lit{background:var(--mish-stage-glow)}
.mish-paper{
  --mish-surface:var(--mish-paper);--mish-surface-raised:var(--mish-sage);
  --mish-text:var(--mish-ink);--mish-text-body:var(--mish-ink);--mish-text-muted:var(--mish-ink-muted);--mish-text-dim:var(--mish-ink-muted);
  --mish-signal:var(--mish-teal);--mish-signal-mark:var(--mish-teal);--mish-line:var(--mish-paper-rule);
  --mish-action:var(--mish-teal);--mish-action-text:var(--mish-on-mint);--mish-action-hover:var(--mish-teal-hover);
  --mish-note-rule:var(--mish-brass);--mish-note-text:var(--mish-ink);
  --mish-focus:var(--mish-umber);--mish-focus-gap:var(--mish-paper);
  color-scheme:dark;background:var(--mish-surface);color:var(--mish-text-body)
}
/* The chrome is always dark, even above, below or inside a paper page (C's top band sits inside one). It carries the
   whole dark set, with the abyss as its surface, so any component placed in it resolves dark colours. */
.mish-bar,.mish-guide,.mish-ident,.mish-footer{
  --mish-surface:var(--mish-abyss);--mish-surface-raised:var(--mish-lift);
  --mish-text:var(--mish-light);--mish-text-body:var(--mish-body);--mish-text-muted:var(--mish-muted);--mish-text-dim:var(--mish-dim);
  --mish-signal:var(--mish-mint);--mish-signal-mark:var(--mish-mint);--mish-line:var(--mish-rule);
  --mish-action:var(--mish-mint);--mish-action-text:var(--mish-on-mint);--mish-action-hover:var(--mish-mint-hover);
  --mish-note-rule:var(--mish-brass);--mish-note-text:var(--mish-brass);
  --mish-focus:var(--mish-amber);--mish-focus-gap:var(--mish-abyss);
  color-scheme:dark
}
.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer{font-family:var(--mish-font-body);font-synthesis:none;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}
/* Border-box inside every MISH scope, as styles.css and scrollcraft.css already set for the whole page, so a component
   measures the same with or without them. Zero specificity: any component can still choose otherwise. */
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer),
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) *,
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) *::before,
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) *::after,
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer)::before,
:where(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer)::after{box-sizing:border-box}
.mish-stage ::selection,.mish-bar ::selection,.mish-guide ::selection,.mish-ident ::selection,.mish-footer ::selection{background:var(--mish-mint);color:var(--mish-on-mint)}
.mish-paper ::selection{background:var(--mish-mint);color:var(--mish-on-mint)}

/* ---------- Focus: one two-tone ring, recoloured per surface ----------
   Amber (dark) or umber (paper), 3px, 2px off the control. The 2px gap is filled with the surface colour, so the ring
   never touches a mint or teal fill directly and stays 3:1 or better against everything it borders. */
:is(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) :focus-visible,
:is(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer):focus-visible{
  outline:var(--mish-focus-width) solid var(--mish-focus);outline-offset:var(--mish-focus-offset);box-shadow:0 0 0 var(--mish-focus-offset) var(--mish-focus-gap)
}
:is(.mish-stage,.mish-paper) [tabindex="-1"]:focus:not(:focus-visible){outline:none}
/* Links in the chrome and .mish-link set their own corner, so the ring keeps the control radius instead of the 6px
   that scrollcraft.css gives every :focus-visible element. */
:is(.mish-bar,.mish-guide,.mish-ident,.mish-footer) a,.mish-bar-channel,.mish-link,.mish-focus-inset{border-radius:var(--mish-radius-control)}
/* Inside anything that clips (overflow other than visible) and leaves under 5px around a control, draw the same
   two tones inward: the ring on the outer 3px, the surface-coloured gap inside it, then the control's own fill. */
:is(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) .mish-focus-inset:focus-visible{
  outline:none;box-shadow:inset 0 0 0 var(--mish-focus-width) var(--mish-focus),inset 0 0 0 calc(var(--mish-focus-width) + var(--mish-focus-offset)) var(--mish-focus-gap)
}

/* ---------- Type roles ----------
   Each role sets margin and max-width itself, because it often sits on a p or h2 that styles.css also styles. */
.mish-display{margin:0;max-width:none;font:var(--mish-weight-semibold) var(--mish-step-display)/var(--mish-lh-display) var(--mish-font-display);letter-spacing:var(--mish-track-display);color:var(--mish-text);text-wrap:balance}
.mish-heading{margin:0;max-width:none;font:var(--mish-weight-semibold) var(--mish-step-heading)/var(--mish-lh-heading) var(--mish-font-display);letter-spacing:var(--mish-track-heading);color:var(--mish-text);text-wrap:balance}
.mish-title{margin:0;max-width:none;font:var(--mish-weight-semibold) var(--mish-step-title)/var(--mish-lh-title) var(--mish-font-display);letter-spacing:var(--mish-track-title);color:var(--mish-text)}
.mish-display em,.mish-heading em,.mish-title em{font-style:normal;color:var(--mish-signal)}
.mish-lead{margin:0;font:var(--mish-weight-regular) var(--mish-step-lead)/var(--mish-lh-lead) var(--mish-font-body);color:var(--mish-text-body);max-width:var(--mish-measure)}
.mish-text{margin:0;font:var(--mish-weight-regular) var(--mish-step-body)/var(--mish-lh-body) var(--mish-font-body);color:var(--mish-text-body);max-width:var(--mish-measure)}
.mish-small{margin:0;max-width:none;font:var(--mish-weight-regular) var(--mish-step-small)/1.6 var(--mish-font-body);color:var(--mish-text-muted)}
.mish-label{margin:0;max-width:none;font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:var(--mish-track-label);text-transform:uppercase;color:var(--mish-text-dim)}
.mish-mono{font-family:var(--mish-font-mono);font-weight:var(--mish-weight-mono)}
.mish-kicker{display:flex;align-items:center;gap:10px;max-width:none;margin:0 0 var(--mish-space-4);font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mish-text-muted)}
.mish-kicker::before{content:'';flex:none;width:18px;height:9px;background:linear-gradient(90deg,var(--mish-text-muted) 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c);-webkit-mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat;mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat}
.mish-link{color:var(--mish-text);text-decoration:underline;text-decoration-thickness:1px;text-decoration-color:var(--mish-edge);text-underline-offset:5px;transition:text-decoration-color var(--mish-dur-1) ease,color var(--mish-dur-1) ease}
.mish-link:hover{text-decoration-color:var(--mish-signal);color:var(--mish-signal)}
.mish-vh{position:absolute!important;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0}

/* ---------- Skip link: first child of the channel bar, so it inherits the bar's focus tokens ---------- */
.mish-skip{position:fixed;left:var(--mish-space-4);top:var(--mish-space-2);z-index:calc(var(--mish-z-bar) + 2);display:inline-flex;align-items:center;min-height:var(--mish-target);padding:0 16px;border-radius:var(--mish-radius-control);background:var(--mish-mint);color:var(--mish-on-mint);font:var(--mish-weight-semibold) var(--mish-step-small)/1 var(--mish-font-body);text-decoration:none;transform:translateY(calc(-100% - var(--mish-space-4)))}
.mish-skip:focus{transform:none}

/* ---------- Wordmark ----------
   The wordmark is a logo, so its size stays in px; everything else in the bar scales with text. */
.mish-wordmark{display:inline-flex;align-items:baseline;font:var(--mish-weight-semibold) var(--mish-wordmark-size,22px)/1 var(--mish-font-display);letter-spacing:-.04em;color:var(--mish-text);white-space:nowrap}
.mish-mark{display:inline-block;flex:none;order:-1;width:1.6em;height:.8em;margin-right:.26em;background:linear-gradient(90deg,var(--mish-text) 0 50%,#ffb03f 56%,#ff7f3a 75%,#ff3f86 90%,#f2167c);-webkit-mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat;mask:url(assets/brand/mn-glyph.svg) center/contain no-repeat}

/* ---------- Channel bar: brand, current channel, Pause motion, Build this for your business ----------
   min-height, not height: at a large text size the bar grows (and on a phone wraps its actions to a second row)
   instead of letting the action spill out of it. Its own minimum is --mish-bar-h; --mish-header-h is the offset
   everything else uses, kept equal to the bar's real height by script. */
.mish-bar{
  position:sticky;top:0;z-index:var(--mish-z-bar);box-sizing:border-box;display:flex;flex-wrap:wrap;align-items:center;gap:4px var(--mish-space-4);
  min-height:var(--mish-bar-h);padding:0 var(--mish-gutter);background:var(--mish-abyss);color:var(--mish-light);border-bottom:1px solid var(--mish-rule)
}
/* Basis 0: the brand and channel take whatever the actions and page links leave. Their floor is about eight characters
   of channel name with the brand, "Now" and the chevron (8ch of mono at the label step is 5.4 steps, tracking included).
   When even that does not fit, the actions wrap to a second row instead of the name collapsing to one letter. */
.mish-bar-id{display:flex;align-items:center;gap:var(--mish-space-4);flex:1 1 0;min-width:calc(8.2 * var(--mish-step-label) + 133px)}
.mish-bar-brand{display:inline-flex;align-items:center;min-height:var(--mish-target);text-decoration:none;color:var(--mish-light);flex:none}
/* The channel button's accessible name comes from aria-label ("Now: {name}, {industry}. Open the guide"), which the
   script that writes the name keeps in sync. The visible dot and the uppercase are decoration only. */
.mish-bar-channel{display:inline-flex;align-items:center;gap:8px;min-width:0;min-height:var(--mish-target);margin:0;padding:0 0 0 var(--mish-space-4);border:0;border-left:1px solid var(--mish-rule);background:none;color:var(--mish-body);font:var(--mish-weight-mono) var(--mish-step-label)/1.2 var(--mish-font-mono);letter-spacing:var(--mish-track-label);text-transform:uppercase;text-align:left;cursor:pointer}
.mish-bar-now{color:var(--mish-dim);flex:none}
.mish-bar-now::after{content:'\00B7';margin-left:8px}
/* The name truncates rather than push into its neighbours; .mish-bar-id's floor keeps about eight characters of it. */
.mish-bar-name{color:var(--mish-mint);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.mish-bar-desc{display:none;color:var(--mish-muted);white-space:nowrap;text-transform:none;letter-spacing:0;font-family:var(--mish-font-body);font-weight:400;font-size:var(--mish-step-small)}
.mish-bar-chev{flex:none;width:.85em;height:.85em;transition:transform var(--mish-dur-2) var(--mish-ease)}
.mish-bar-chev path{fill:none;stroke:currentColor;stroke-width:1.5}
.mish-bar-channel[aria-expanded="true"] .mish-bar-chev{transform:rotate(180deg)}
.mish-bar-channel:hover .mish-bar-name{text-decoration:underline;text-underline-offset:4px}
.mish-bar-nav{display:none;align-items:center;gap:clamp(14px,1.6vw,24px);flex:none}
.mish-bar-nav a{display:inline-flex;align-items:center;min-height:var(--mish-target);font:400 var(--mish-step-small)/1 var(--mish-font-body);color:var(--mish-body);text-decoration:none;position:relative;white-space:nowrap}
.mish-bar-nav a:hover{color:var(--mish-light);text-decoration:underline;text-underline-offset:6px}
.mish-bar-nav a[aria-current="page"]{color:var(--mish-light)}
.mish-bar-nav a[aria-current="page"]::after{content:'';position:absolute;left:0;bottom:8px;width:20px;height:2px;background:var(--mish-mint)}
/* margin-left:auto keeps the actions at the right edge on the first row or the second. */
.mish-bar-actions{display:flex;align-items:center;gap:var(--mish-space-2);flex:none;margin:4px 0 4px auto}
.mish-bar-pause[hidden],.mish-bar [hidden]{display:none}   /* app.mjs unhides the pause control once it is wired */
.mish-bar-pause{display:inline-flex;align-items:center;justify-content:center;gap:9px;min-width:var(--mish-target);min-height:var(--mish-target);padding:0 14px;border:1px solid var(--mish-edge);border-radius:var(--mish-radius-control);background:transparent;color:var(--mish-light);font:var(--mish-weight-semibold) var(--mish-step-small)/1 var(--mish-font-body);cursor:pointer;transition:border-color var(--mish-dur-1) ease,color var(--mish-dur-1) ease}
/* Hover only where a pointer can hover: a tap leaves a phone button in :hover, and a mint border would then read as the
   held state after the visitor had turned motion back on. */
@media (hover:hover){.mish-bar-pause:hover{border-color:var(--mish-mint)}}
.mish-bar-pause svg{flex:none;width:10px;height:10px}
.mish-bar-pause svg path{fill:currentColor;stroke:none}
/* The icon follows the page's state (html[data-motion]), as the label does (app.mjs): pause while motion runs, play while
   it is held, so the icon and the words always name the same action. */
.mish-bar-pause .mish-i-play,:root[data-motion="paused"] .mish-bar-pause .mish-i-pause{display:none}
:root[data-motion="paused"] .mish-bar-pause .mish-i-play{display:inline}
:root[data-motion="paused"] .mish-bar-pause{border-color:var(--mish-mint);color:var(--mish-mint)}
.mish-bar-cta{white-space:nowrap}
/* The guide: opened from the channel name. Lists pages and channels; the TV-guide minimap. Its markup sits inside the
   bar, straight after .mish-bar-id, so the keyboard reaches its links right after the channel button. It hangs from the
   bar's lower edge (the sticky bar is its containing block), so a bar made taller by large text never covers it. */
.mish-guide{position:absolute;left:0;right:0;top:calc(100% + 1px);z-index:var(--mish-z-guide);max-height:calc(100svh - 100% - 1px);overflow:auto;box-sizing:border-box;padding:var(--mish-space-5) var(--mish-gutter) var(--mish-space-6);background:var(--mish-abyss);border-bottom:1px solid var(--mish-rule);box-shadow:0 24px 40px -24px #000c;color:var(--mish-body)}
.mish-guide[hidden]{display:none}
.mish-guide-cols{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--mish-space-5) var(--mish-space-7);max-width:var(--mish-max);margin:0 auto}
/* Pages beside the sample businesses from 720px; the samples flow into two columns only from 1200px, the first width
   where the longest pair ("Marketplays", "Marketplaces & social networks") still fits on one line in each column. */
@media (width >= 45em){.mish-guide-cols{grid-template-columns:minmax(0,1fr) minmax(0,2fr)}}
@media (width >= 75em){.mish-guide-multi{columns:2;column-gap:var(--mish-space-7)}}
.mish-guide h2{margin:0 0 var(--mish-space-3);max-width:none;font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mish-dim)}
.mish-guide ul{list-style:none;margin:0;padding:0;border-top:1px solid var(--mish-rule)}
.mish-guide li{border-bottom:1px solid var(--mish-rule);break-inside:avoid}
.mish-guide a{display:flex;justify-content:space-between;gap:var(--mish-space-4);align-items:center;min-height:var(--mish-target);color:var(--mish-light);text-decoration:none;font:var(--mish-weight-semibold) var(--mish-step-small)/1.3 var(--mish-font-body)}
.mish-guide a small{font:400 var(--mish-step-label)/1.3 var(--mish-font-mono);color:var(--mish-muted);text-align:right}
.mish-guide a:hover{color:var(--mish-mint)}
/* The current page or channel: mint and a left rule, so it is not marked by colour alone (WCAG 1.4.1). */
.mish-guide a[aria-current]{color:var(--mish-mint);border-left:3px solid var(--mish-mint);padding-left:10px}

/* Fit. Channel names are at most 16 characters (the spec's list). At the default text size:
   - 800px (50em) and up: brand and channel side by side, labelled Pause motion, the action with its arrow.
   - 1200px (75em) and up: the page links join (below that they are one tap away in the guide), so a 1280px laptop
     shows them. From 1200 to 1359px Pause motion is a 44px icon button (its accessible name does not change) to make
     room; from 1360px (85em) it carries its label again. From 1200 to 1439px the tabs are .75rem (12px), so the
     seven tabs, the action and the channel name keep their room. 1560px (97.5em): the industry.
   - 680 to 799px: Pause motion becomes a 44px icon button; its accessible name does not change.
   - Under 680px (42.5em): brand above channel in one block, "Now" visually hidden, no arrow on the action.
   - Under 480px (30em): the action wraps to two balanced lines. Under 360px (22.5em): it drops to .75rem.
   At 150% and 200% text the same layouts arrive at wider windows; on a phone at 200% the actions take a second row. */
@media (width >= 75em){.mish-bar-nav{display:flex}}
/* Seven tabs (with Videos) take a little less room from 1200px to 1439px, so the bar keeps one row and the channel name
   keeps its full words; 1440px is unchanged. */
@media (75em <= width < 90em){.mish-bar-nav{gap:clamp(12px,1.2vw,24px)}.mish-bar-nav a{font-size:.75rem}}
@media (75em <= width < 85em){
  .mish-bar-pause{padding:0}
  .mish-bar-pause-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (width >= 97.5em){.mish-bar-desc{display:inline}.mish-bar-desc:empty{display:none}}
@media (width < 50em){
  .mish-bar{column-gap:var(--mish-space-2)}
  .mish-bar-pause{padding:0}
  .mish-bar-pause-text{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
}
@media (width < 42.5em){
  /* Brand and channel stack into one block so the three controls keep 44px targets. The block starts 5px below the
     top edge, so the brand's focus ring (3px, 2px off) stays inside the viewport. */
  .mish-bar-id{flex-direction:column;align-items:flex-start;justify-content:flex-start;align-self:stretch;gap:0;padding-top:5px;min-width:calc(5.4 * var(--mish-step-label) + 16px)}
  .mish-bar-brand{min-height:26px;--mish-wordmark-size:20px}
  .mish-bar-channel{position:relative;min-height:32px;max-width:100%;padding:0;border-left:0;letter-spacing:.04em;gap:6px}
  /* "Now" stays in the button's name but leaves the line, so a 16-character name fits at 360px. */
  .mish-bar-now{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%);white-space:nowrap}
  .mish-bar-cta .mish-arrow{display:none}
}
/* The action's narrow forms are written as .mish-bar .mish-bar-cta, because .mish-btn comes later in this file with the
   same specificity and would otherwise take back its padding, line height and centring. */
@media (width < 30em){
  /* The action never shortens its words; it wraps to two balanced lines instead. */
  .mish-bar .mish-bar-cta{white-space:normal;text-wrap:balance;max-width:10.4em;min-height:var(--mish-target);padding:5px 12px;line-height:1.2;text-align:left;justify-content:flex-start}
}
@media (width < 22.5em){
  /* 320px phones: the action keeps its full words on two lines at .75rem, which leaves the channel name about 13
     characters. Longer names end in an ellipsis here only; the button's accessible name, the ident strip and the
     guide always carry the full name. At 200% text the action also never grows wider than the row beside Pause. */
  .mish-bar{column-gap:6px}
  .mish-bar-actions{gap:6px}
  .mish-bar .mish-bar-cta{font-size:.75rem;padding:5px 10px;max-width:min(10em,calc(100vw - 2 * var(--mish-gutter) - var(--mish-target) - 6px))}
  .mish-bar-channel{letter-spacing:.02em}
}

/* ---------- Ident strip: the seam between two sample businesses ----------
   Replaces the channel-name cut. In flow at the top of each sample site, so it is crawlable and never covers content.
   It is a p, so it resets the max-width and margin styles.css gives every p, and spans its container wherever it sits.
   Its parts are separated by visually hidden punctuation, so its text reads "MISH. Sample business, designed and built
   by Tyler. Plumbline Construction, Construction" to a crawler, a screen reader or a copy and paste.
   The cable (a mint line along the top edge) draws across when the strip arrives, turns down at the right and seats a
   plug on the site's first edge. Both are drawn by default, so no-JS, reduced motion and Pause motion always show
   them whole. JS sets data-cable="pending" before the strip is seen, "drawn" when it is, and "plugged" when the plug
   has seated, at which point it fires a bubbling mish:plugged event that starts the site's own automation. */
.mish-ident{
  --mish-plug-x:calc(var(--mish-gutter) / 2);
  position:relative;box-sizing:border-box;display:flex;align-items:center;gap:var(--mish-space-2) var(--mish-space-5);width:auto;max-width:none;min-height:var(--mish-ident-h);margin:0;padding:var(--mish-space-2) var(--mish-gutter);
  background:var(--mish-abyss);color:var(--mish-body);border-bottom:1px solid var(--mish-rule);
  font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:var(--mish-track-label);text-transform:uppercase
}
.mish-ident::before{content:'';position:absolute;left:0;right:var(--mish-plug-x);top:0;height:var(--mish-cable);background:var(--mish-mint);transform-origin:left center;transform:scaleX(1);transition:transform var(--mish-dur-5) var(--mish-ease)}
.mish-ident-plug{position:absolute;top:0;bottom:0;right:var(--mish-plug-x);width:var(--mish-cable);background:var(--mish-mint);transform-origin:center top;transform:scaleY(1);transition:transform var(--mish-dur-3) var(--mish-ease) var(--mish-dur-5)}
.mish-ident-plug::after{content:'';position:absolute;left:calc(50% - 4px);bottom:0;width:8px;height:8px;background:var(--mish-mint)}
.mish-ident[data-cable="pending"]::before{transform:scaleX(0);transition:none}
.mish-ident[data-cable="pending"] .mish-ident-plug{transform:scaleY(0);transition:none}
.mish-ident-mark{flex:none;--mish-wordmark-size:15px;text-transform:none}
.mish-ident-sample{flex:1 1 auto;min-width:0;color:var(--mish-body)}
.mish-ident-channel{flex:none;display:inline-flex;gap:10px;align-items:baseline;color:var(--mish-mint);white-space:nowrap}
.mish-ident-industry{color:var(--mish-muted);text-transform:none;letter-spacing:0}
@media (width < 40em){
  /* Two rows on phones. The right padding grows by 8px so the text keeps clear of the plug in the narrow gutter. */
  .mish-ident{display:grid;grid-template-columns:auto 1fr;grid-template-areas:"mark channel" "sample sample";gap:4px var(--mish-space-3);padding-top:10px;padding-bottom:10px;padding-right:calc(var(--mish-gutter) + var(--mish-space-2));letter-spacing:.05em}
  .mish-ident-mark{grid-area:mark}
  .mish-ident-channel{grid-area:channel;justify-self:end}
  .mish-ident-sample{grid-area:sample}
  .mish-ident-industry{display:none}
}

/* ---------- Buttons ---------- */
.mish-btn{display:inline-flex;align-items:center;justify-content:center;gap:14px;box-sizing:border-box;min-height:48px;padding:0 20px;border:1px solid transparent;border-radius:var(--mish-radius-control);
  font:var(--mish-weight-semibold) var(--mish-step-small)/1.25 var(--mish-font-body);letter-spacing:0;text-decoration:none;cursor:pointer;
  transition:background-color var(--mish-dur-2) ease,border-color var(--mish-dur-2) ease,color var(--mish-dur-2) ease}
.mish-btn--signal{background:var(--mish-action);color:var(--mish-action-text)}
.mish-btn--signal:hover{background:var(--mish-action-hover)}
.mish-btn--quiet{background:transparent;color:var(--mish-text);border-color:var(--mish-edge)}
.mish-btn--quiet:hover{border-color:var(--mish-signal)}
.mish-btn--text{min-height:var(--mish-target);padding:0;background:none;border:0;color:var(--mish-text);text-decoration:underline;text-decoration-color:var(--mish-edge);text-decoration-thickness:1px;text-underline-offset:6px}
.mish-btn--text:hover{text-decoration-color:var(--mish-signal)}
.mish-btn--sm{min-height:var(--mish-target);padding:0 16px;gap:10px}
.mish-btn:disabled,.mish-btn[aria-disabled="true"]{opacity:.55;cursor:not-allowed}
.mish-arrow{flex:none;width:18px;height:18px}
.mish-arrow path{fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.mish-btn:hover .mish-arrow{transform:translateX(3px)}
.mish-arrow{transition:transform var(--mish-dur-2) var(--mish-ease)}
/* Reduced motion and Pause motion both drop every movement, including the small hover nudge and the chevron's turn.
   Colour fades are left to the page: once linked, styles.css's reduced-motion rule (*{transition:none!important})
   removes them too, so under reduced motion colour changes are instant. */
@media (prefers-reduced-motion:reduce){
  .mish-btn:hover .mish-arrow{transform:none}
  .mish-arrow,.mish-bar-chev{transition:none}
}
:root[data-motion="paused"] .mish-btn:hover .mish-arrow{transform:none}
:root[data-motion="paused"] :is(.mish-arrow,.mish-bar-chev){transition:none}

/* ---------- Honesty labels ----------
   .mish-note: a block beside an example. .mish-tag: an inline label. Brass means "a person's judgement applies here".
   A tag carries only its own meaning; never reuse one as a general badge. The words come from the copy deck's
   vocabulary table; nothing here depends on them. Nothing on the site is live in this release, so there is no live tag. */
.mish-note{margin:0;padding:10px 14px;border-left:2px solid var(--mish-note-rule);background:var(--mish-lift);
  font:400 var(--mish-step-small)/1.6 var(--mish-font-body);color:var(--mish-text-body);max-width:var(--mish-measure)}
.mish-note b,.mish-note strong{display:block;margin-bottom:2px;font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mish-note-text)}
/* Tags wrap inside their container rather than widen the page: long words at a large text size included. */
.mish-tag{display:inline-flex;align-items:center;gap:7px;box-sizing:border-box;max-width:100%;min-height:24px;padding:3px 8px;border:1px solid currentColor;border-radius:var(--mish-radius-field);
  font:var(--mish-weight-mono) var(--mish-step-label)/1.2 var(--mish-font-mono);letter-spacing:.06em;text-transform:uppercase;white-space:normal;overflow-wrap:anywhere;color:var(--mish-note-text);background:transparent}
.mish-tag::before{content:'';flex:none;width:6px;height:6px;background:currentColor}
.mish-tag--example{color:var(--mish-note-text)}
.mish-tag--claude{color:var(--mish-signal)}
.mish-tag--local{color:var(--mish-text-body)}
.mish-tag--rules{color:var(--mish-text-muted);border-style:dashed}
.mish-tag--rules::before{background:transparent;border:1px solid currentColor;width:4px;height:4px}
.mish-tag--approve{color:var(--mish-note-text)}
.mish-tag--approve::before{transform:rotate(45deg);width:5px;height:5px}
.mish-paper .mish-tag--example,.mish-paper .mish-tag--approve{border-color:var(--mish-brass)}

/* ---------- Paper reading layout (inner pages) ----------
   .mish-read-intro: kicker, display h1 (second line in the signal colour), lead, actions. Full width.
   .mish-read: the body. A sticky aside carries the section heading; the main column carries ruled rows. */
.mish-read-intro{box-sizing:border-box;max-width:calc(var(--mish-max) + var(--mish-gutter) * 2);margin:0 auto;padding:var(--mish-section) var(--mish-gutter) 0}
.mish-read-intro .mish-display{max-width:18ch}
.mish-read-intro .mish-display span{display:block;color:var(--mish-signal)}
.mish-read-intro .mish-lead{margin-top:var(--mish-space-5);color:var(--mish-text-muted);max-width:54ch}
.mish-read-intro .mish-read-actions{display:flex;flex-wrap:wrap;align-items:center;gap:var(--mish-space-3) var(--mish-space-5);margin-top:var(--mish-space-6)}
/* Framed by the dark channel bar above and the dark footer below. Same type, same scale; the signal turns teal for text
   and stays mint as a fill. */
.mish-read{box-sizing:border-box;max-width:calc(var(--mish-max) + var(--mish-gutter) * 2);margin:0 auto;padding:var(--mish-section) var(--mish-gutter);
  display:grid;grid-template-columns:minmax(240px,.78fr) minmax(0,1.7fr);gap:var(--mish-space-6) clamp(32px,5vw,84px)}
.mish-read-aside{align-self:start;position:sticky;top:calc(var(--mish-header-h) + var(--mish-space-5))}
.mish-read-intro+.mish-read{padding-top:var(--mish-space-8)}
.mish-read-aside .mish-small{margin-top:var(--mish-space-3);max-width:36ch}
.mish-read-aside .mish-display span,.mish-read-aside .mish-heading span{display:block;color:var(--mish-signal)}
.mish-read-aside .mish-lead{margin-top:var(--mish-space-4);color:var(--mish-text-muted)}
.mish-read-main{min-width:0}
.mish-read-main>*+*{margin-top:var(--mish-space-5)}
.mish-rows{list-style:none;margin:0;padding:0}
.mish-rows>li{border-top:1px solid var(--mish-text);padding:var(--mish-space-5) 0 var(--mish-space-6)}
.mish-rows>li:last-child{border-bottom:1px solid var(--mish-line)}
.mish-rows h3{margin:0 0 var(--mish-space-2);font:var(--mish-weight-semibold) var(--mish-step-title)/var(--mish-lh-title) var(--mish-font-display);letter-spacing:var(--mish-track-title);color:var(--mish-text)}
.mish-rows p{margin:0;font:400 var(--mish-step-body)/var(--mish-lh-body) var(--mish-font-body);color:var(--mish-text-muted);max-width:var(--mish-measure)}
/* Label and value rows: mono dt, body dd. For MISH-owned blocks such as, if they are drawn as a MISH layer, the
   diagnosis rows (copy deck section 5). */
.mish-spec{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));margin:var(--mish-space-4) 0 0;border-top:1px solid var(--mish-line)}
.mish-spec>div{padding:var(--mish-space-3) var(--mish-space-4) 0 0}
.mish-spec dt{margin:0 0 6px;font:var(--mish-weight-mono) var(--mish-step-label)/var(--mish-lh-label) var(--mish-font-mono);letter-spacing:.1em;text-transform:uppercase;color:var(--mish-text-muted)}
.mish-spec dd{margin:0;font:400 var(--mish-step-small)/1.55 var(--mish-font-body);color:var(--mish-text-body)}
.mish-code{font:var(--mish-weight-mono) .92em/1 var(--mish-font-mono);padding:4px 6px;border-radius:var(--mish-radius-field);background:var(--mish-surface-raised);color:var(--mish-text)}
.mish-panel{padding:var(--mish-space-6);background:var(--mish-surface-raised);border-radius:0}
@media (width < 56.25em){
  .mish-read{grid-template-columns:minmax(0,1fr)}
  .mish-read-aside{position:static}
}

/* ---------- Form fields on paper (#/contact and any inner-page form) ----------
   styles.css draws fields with #c1b4d0 borders, 2.09:1 on a field and 1.78:1 on the sage inquiry panel. The edge token
   clears 3:1 on paper (3.58), sage (3.20) and inside the field (3.76). The 2px field corner holds when focused, where
   scrollcraft.css would round it to 6px, and the umber ring replaces styles.css's teal focus outline. */
.mish-paper :is(input:not([type="checkbox"],[type="radio"],[type="range"],[type="color"]),select,textarea){border:1px solid var(--mish-edge);border-radius:var(--mish-radius-field);background-color:var(--mish-field);color:var(--mish-ink)}
.mish-paper :is(input,textarea)::placeholder{color:var(--mish-ink-muted);opacity:1}
.mish-paper :is(input,select,textarea):focus:not(:focus-visible){outline:none}
/* Field labels share the scale: styles.css sets them at 12px and their "(required)" at 10px, under the 11px floor. */
.mish-paper label:has(input,select,textarea){font:var(--mish-weight-semibold) var(--mish-step-small)/1.5 var(--mish-font-body);color:var(--mish-ink)}
.mish-paper label:has(input,select,textarea)>span{font:var(--mish-weight-regular) var(--mish-step-label)/1.5 var(--mish-font-body);color:var(--mish-ink-muted)}

/* ---------- Footer: MISH chrome below every page; carries the PC repair note and the small print ---------- */
.mish-footer{box-sizing:border-box;padding:var(--mish-space-7) var(--mish-gutter);background:var(--mish-abyss);color:var(--mish-body);border-top:1px solid var(--mish-rule)}
.mish-footer-in{max-width:var(--mish-max);margin:0 auto;display:grid;grid-template-columns:minmax(0,1.3fr) minmax(0,1fr) minmax(0,1fr);gap:var(--mish-space-6)}
/* The brand link reads "MISH Networking" as text (copy deck section 10): the wordmark, then the name. */
.mish-footer-brand{gap:10px}
.mish-footer-name{font:var(--mish-weight-regular) var(--mish-step-small)/1 var(--mish-font-body);color:var(--mish-body)}
.mish-footer p{margin:var(--mish-space-3) 0 0;font:400 var(--mish-step-small)/1.65 var(--mish-font-body);color:var(--mish-muted);max-width:44ch}
.mish-footer a:not(.mish-bar-brand){color:var(--mish-light);text-decoration:underline;text-decoration-color:var(--mish-edge);text-underline-offset:5px;overflow-wrap:anywhere}
.mish-footer a:not(.mish-bar-brand):hover{text-decoration-color:var(--mish-mint)}
.mish-footer-list{list-style:none;margin:0;padding:0;display:grid;align-content:start;gap:var(--mish-space-2);font:400 var(--mish-step-small)/1.4 var(--mish-font-body)}
.mish-footer-list a{display:inline-flex;align-items:center;min-height:32px}
.mish-footer .mish-footer-note{grid-column:1/-1;max-width:none;margin:0;padding-top:var(--mish-space-4);border-top:1px solid var(--mish-rule);font:400 var(--mish-step-small)/1.65 var(--mish-font-body);color:var(--mish-body)}
.mish-footer .mish-footer-note a{margin-left:.35em}
/* The small print: "Built with Claude." first, then the legal line (copy deck sections 9 and 10). */
.mish-footer .mish-footer-legal{grid-column:1/-1;max-width:none;margin:0;font:var(--mish-weight-mono) var(--mish-step-label)/1.6 var(--mish-font-mono);letter-spacing:.02em;color:var(--mish-dim)}
@media (width < 56.25em){.mish-footer-in{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}.mish-footer-in>:first-child{grid-column:1/-1}}
@media (width < 30em){.mish-footer-in{grid-template-columns:minmax(0,1fr)}}

/* ---------- Forced colours (Windows High Contrast and similar) ----------
   Backgrounds are replaced by the system Canvas colour there, so every mark drawn as a filled box (the wordmark square,
   kicker and tag markers, the cable and its plug, the current-page underline) would vanish. They opt out of the
   override and paint in CanvasText instead. Box shadows are dropped too, so the inset focus ring falls back to an outline. */
@media (forced-colors:active){
  .mish-mark,.mish-kicker::before,:root .engine .e-kicker::before,:root .close-terms .ct-kicker::before,:root .day .d-eyebrow::before,.mish-tag::before,.mish-ident::before,.mish-ident-plug,.mish-ident-plug::after,.mish-bar-nav a[aria-current="page"]::after{forced-color-adjust:none;background:CanvasText}
  .mish-tag--rules::before{background:Canvas;border-color:CanvasText}
  :is(.mish-stage,.mish-paper,.mish-bar,.mish-guide,.mish-ident,.mish-footer) .mish-focus-inset:focus-visible{outline:var(--mish-focus-width) solid CanvasText;outline-offset:calc(-1 * var(--mish-focus-width))}
}

/* Actual 360/390px audits include inline links, not just styled buttons. */
@media(width < 900px){body a,body button,body summary{min-height:44px;min-width:44px}body a{display:inline-flex;align-items:center;flex-wrap:wrap}.mish-footer-list a,.mish-footer-brand,.mish-footer-note a{min-height:44px}#p-about .inner-about-portrait-art .pa-word{font-size:52px}#engine .e-map .m-label{font-size:15px}#p-intelligence .ii-sample{min-height:44px}}
.engine .e-trace-title:focus-visible{outline:3px solid var(--mish-mint,#63d7e3);outline-offset:6px}

/* Black host canvas with translucent purple reading surfaces. Sample websites own their palettes. */
#p-home :is(#terms .ct-growth,#on-call .ct-availability){background:var(--mish-deep)}
#terms .ct-growth>div,#on-call .ct-availability>div:not(.ct-signal){background:var(--mish-lift);padding:clamp(20px,2.5vw,32px);border:1px solid #63d7e326;border-radius:var(--mish-radius-panel)}
#on-call .ct-availability>div:not(.ct-signal){background:#190f26f2} /* the same purple, solid enough to read over the shapes behind it */
#on-call .ct-owner-brand,#on-call .ct-availability h2>span{color:var(--mish-mint)}
#on-call .ct-owner-contact{background:var(--mish-mint);color:var(--mish-on-mint)}
#on-call .ct-owner-contact:hover{background:var(--mish-mint-hover)}
.channel-ui .patch-rail{background:#030405c9}
.channel-ui .rail-jack{background:var(--mish-abyss)}
.channel-ui .rail-jack::after{background:var(--mish-lift)}
#services .ss-list a{background:var(--mish-lift);border-color:#63d7e32b}
#services .ss-list a:hover{background:rgba(48,26,67,.8);border-color:var(--mish-mint)}
.concept .diagnosis-beat{background:rgba(23,12,36,.86)}
:is(.inner-intelligence,.inner-infrastructure,.inner-advisory,.inner-about,.inner-how-i-build).mish-paper :is(.ii-panel,.inf-console,.adv-question,.adv-branch,.inner-about-waits){background:var(--mish-lift)}
.mish-panel{border:1px solid #63d7e326;border-radius:var(--mish-radius-panel)}
/* The keyboard hint (app.mjs): bottom left, clear of the player and never in the way of a click. A phone has no keys to press. */
.key-hint{position:fixed;z-index:1900;left:max(16px,env(safe-area-inset-left));bottom:16px;max-width:min(560px,calc(100vw - 460px));margin:0;padding:8px 12px;border:1px solid var(--mish-edge);border-radius:var(--mish-radius-control);background:var(--mish-abyss);color:var(--mish-light);font:400 var(--mish-step-small)/1.35 var(--mish-font-body);pointer-events:none}
.key-hint[hidden]{display:none}
.key-hint[data-lift]{bottom:56px}
@media(pointer:coarse),(max-width:700px),print{.key-hint{display:none}}