/* About page (#p-about): Tyler's own page, in the MISH paper reading layout.
   Every rule is scoped under .inner-about. Builds on mish-identity.css (tokens, .mish-paper, .mish-stage, .mish-read,
   .mish-rows, .mish-btn, .mish-tag, .mish-note); the hex fallbacks are the identity-spec values, so the page still
   reads if a token is missing. Markup: docs/review/ports/inner/about/fragment.html. The moving cable and the
   example bars are stepped by inner-about.mjs; without it the loop is drawn as a still.

   styles.css is unlayered and has element rules that reach in here: p{max-width:68ch;font-size:16px;line-height:1.8},
   p+p{margin-top:18px}, h1,h2,h3,p,figure{margin:0} and svg path{stroke:currentColor;stroke-width:1.5;fill:none}.
   The rules below set what they need explicitly instead of relying on those. */

.inner-about{
  --about-loop-gutter:44px;   /* the column left of the steps that carries the loop */
  --about-loop-x:30px;        /* node centres, measured from the loop's left edge; inner-about.mjs reads both */
  --about-node:10px;
  min-width:0;
}
.inner-about [hidden]{display:none!important}
/* Resets at element weight (:where adds nothing), so the component rules below can still set their own margins. */
:where(.inner-about) :is(figure,dl,dd){margin:0}
/* styles.css centres every figcaption and pads it, and gives each span in one a 10px top margin (9px text on phones). */
.inner-about figcaption{padding:0;text-align:left}
.inner-about figcaption span{margin-top:0}

/* ---------- Intro: kicker, h1, lead, actions, and the portrait slot ---------- */
.inner-about-intro{display:grid;grid-template-columns:minmax(0,1fr) minmax(220px,340px);align-items:end;gap:var(--mish-space-7,48px) clamp(32px,6vw,96px)}
.inner-about-intro-text{min-width:0}
.inner-about .inner-about-where{margin-top:var(--mish-space-4,16px);color:var(--mish-text-muted,#62536f)}
.inner-about-intro .mish-read-actions .mish-btn--text{overflow-wrap:anywhere}

/* The portrait slot. Empty: a dark panel with the cable running into the MISH mark. With a photo
   (data-portrait-slot="photo"), the <img> takes the same 4:5 box. */
.inner-about-portrait{min-width:0}
.inner-about-portrait-frame,.inner-about-portrait-img{display:block;box-sizing:border-box;width:100%;aspect-ratio:4/5;border-radius:var(--mish-radius-panel,6px);overflow:hidden}
.inner-about-portrait-frame{position:relative;background:#180f28;background:var(--mish-stage-glow,radial-gradient(70% 90% at 78% 30%,#302047 0%,#180f28 60%,#100b1d 100%));border:1px solid var(--mish-rule,#58466d)}
.inner-about-portrait-img{height:auto;object-fit:cover;object-position:50% 30%;background:var(--mish-sage,#e8def2)}
.inner-about-portrait-art{position:absolute;inset:0;width:100%;height:100%}
.inner-about-portrait-art .pa-grid path{fill:none;stroke:var(--mish-rule,#58466d);stroke-width:1;vector-effect:non-scaling-stroke}
.inner-about-portrait-art .pa-cable{fill:none;stroke:var(--mish-mint,#63d7e3);stroke-width:2;vector-effect:non-scaling-stroke}
.inner-about-portrait-art .pa-port{fill:var(--mish-deep,#180f28);stroke:var(--mish-edge,#9883af);stroke-width:1;vector-effect:non-scaling-stroke}
.inner-about-portrait-art .pa-mark{fill:var(--mish-mint,#63d7e3)}
/* The placeholder is a deliberate monogram (DECISIONS.md): the mN mark over the cable, the wordmark below. */
.inner-about-portrait-art .pa-mono{fill:none;stroke-linecap:round;stroke-linejoin:round}
.inner-about-portrait-art .pa-mono path{stroke:var(--mish-light,#fbf7ff);stroke-width:22;stroke-linecap:round;stroke-linejoin:round}
.inner-about-portrait-art .pa-mono .pa-n{stroke:url(#pa-mn-n)}
.inner-about-portrait-art .pa-word{font:500 15px/1 var(--mish-font-mono,ui-monospace,monospace);letter-spacing:.24em;fill:var(--mish-muted,#c1b4d0)}
.inner-about-portrait-cap{display:grid;gap:2px;margin-top:var(--mish-space-3,12px)}
.inner-about-portrait-name{font:var(--mish-weight-semibold,600) var(--mish-step-small,.875rem)/1.4 var(--mish-font-display,Montserrat,sans-serif);color:var(--mish-text,#251637)}
.inner-about-portrait-role{font:var(--mish-weight-mono,500) var(--mish-step-label,.75rem)/var(--mish-lh-label,1.4) var(--mish-font-mono,ui-monospace,monospace);letter-spacing:var(--mish-track-label,.08em);text-transform:uppercase;color:var(--mish-text-muted,#62536f)}

/* ---------- Prose sections ---------- */
.inner-about-prose>.mish-text+.mish-text{margin-top:var(--mish-space-4,16px)}
/* The proof line: "built with Claude" (DECISIONS.md) and the link to the How I build page. */
.inner-about-prose>.inner-about-proof{margin-top:var(--mish-space-5,24px);padding-top:var(--mish-space-4,16px);border-top:1px solid var(--mish-line,#d8cde4);color:var(--mish-text-muted,#62536f)}
.inner-about-proof a{display:inline-block;padding:3px 0}

/* ---------- How I work: the loop, on a dark stage band ---------- */
.inner-about-how{position:relative}
.inner-about-how .mish-read-aside .mish-lead{max-width:40ch}

/* Where the work waits: five example bars. Three colours, each named in the key and used for nothing else in the panel:
   waiting is the neutral edge grey, the longest wait is brass (a finding), and only a cleared step turns mint. */
.inner-about-waits{display:grid;gap:var(--mish-space-4,16px);margin-top:var(--mish-space-6,32px);padding:var(--mish-space-5,24px);
  background:var(--mish-abyss,#100b1d);border:1px solid var(--mish-rule,#58466d);border-radius:var(--mish-radius-panel,6px);
  --mish-surface:var(--mish-abyss,#100b1d);--mish-focus-gap:var(--mish-abyss,#100b1d)}
.inner-about-waits>*{margin:0}
.inner-about-waits-head{display:grid;gap:var(--mish-space-2,8px)}
/* The example note sits in the caption, between the title and the status, so it is read before the bars and the action. */
.inner-about-waits-head .mish-note{margin:var(--mish-space-1,4px) 0 var(--mish-space-2,8px)}
.inner-about-waits-status{font:400 var(--mish-step-small,.875rem)/1.55 var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-body,#ded7ea);min-height:3.1em}
.inner-about-bars{list-style:none;margin:0;padding:0;display:grid;gap:10px}
.inner-about-bars li{display:grid;grid-template-columns:minmax(0,8em) minmax(0,1fr);align-items:center;gap:var(--mish-space-3,12px);margin:0;font-size:var(--mish-step-label,.75rem)}
.inner-about-bar-name{font:var(--mish-weight-mono,500) var(--mish-step-label,.75rem)/1.3 var(--mish-font-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-body,#ded7ea);transition:color var(--mish-dur-2,180ms) ease}
.inner-about-bar{display:block;height:8px;background:var(--mish-lift,#302047);border-radius:1px;overflow:hidden}
.inner-about-bar i{display:block;height:100%;background:var(--mish-edge,#9883af);transform-origin:left center;transform:scaleX(var(--w,.5));
  transition:transform var(--mish-dur-4,700ms) var(--mish-ease,cubic-bezier(.16,1,.3,1)),background-color var(--mish-dur-2,180ms) ease}
.inner-about-bars li.is-constraint .inner-about-bar-name{color:var(--mish-brass,#ffb16b)}
.inner-about-bars li.is-constraint .inner-about-bar i{background:var(--mish-brass,#ffb16b)}
.inner-about-bars li.is-cleared .inner-about-bar i{background:var(--mish-mint,#63d7e3)}
.inner-about-waits-key{display:flex;flex-wrap:wrap;gap:var(--mish-space-2,8px) var(--mish-space-5,24px);max-width:none;
  font:var(--mish-weight-mono,500) var(--mish-step-label,.75rem)/1.4 var(--mish-font-mono,ui-monospace,monospace);letter-spacing:.06em;text-transform:uppercase;color:var(--mish-dim,#c1b4d0)}
.inner-about-waits-key span{display:inline-flex;align-items:center;gap:8px}
.inner-about-waits-key span::before{content:'';width:8px;height:8px;flex:none}
.inner-about-waits-key .k-wait::before{background:var(--mish-edge,#9883af)}
.inner-about-waits-key .k-long::before{background:var(--mish-brass,#ffb16b)}
.inner-about-waits-key .k-clear::before{background:var(--mish-mint,#63d7e3)}
.inner-about-waits-next{justify-self:start}
.inner-about-waits .mish-note{max-width:none}

/* The loop beside the five steps. CSS draws a still line through the nodes; inner-about.mjs swaps it for the full loop
   (down through the steps, back up the left side) and runs the cable along it. */
.inner-about-loop{position:relative;padding-left:var(--about-loop-gutter)}
.inner-about-steps>li{position:relative}
.inner-about-steps h3{position:relative}
/* Each step names its phase in the terms: Free audit, or Build & Deploy. A mono label under the step's heading. */
.inner-about .inner-about-steps .inner-about-phase{max-width:none;margin:0 0 var(--mish-space-2,8px);
  font:var(--mish-weight-mono,500) var(--mish-step-label,.75rem)/var(--mish-lh-label,1.4) var(--mish-font-mono,ui-monospace,monospace);letter-spacing:var(--mish-track-label,.08em);text-transform:uppercase;color:var(--mish-dim,#c1b4d0)}
.inner-about .inner-about-steps .inner-about-phase+p{margin-top:0}   /* styles.css gives p+p an 18px top margin */
.inner-about-steps h3::before,.inner-about-again::before{content:'';position:absolute;z-index:1;box-sizing:border-box;width:var(--about-node);height:var(--about-node);
  left:calc(var(--about-loop-x) - var(--about-loop-gutter) - var(--about-node) / 2);
  border:1.5px solid var(--mish-edge,#9883af);background:var(--mish-deep,#180f28);
  transition:background-color var(--mish-dur-2,180ms) ease,border-color var(--mish-dur-2,180ms) ease}
.inner-about-steps h3::before{top:calc(.625em - var(--about-node) / 2)}
/* The still line: each step carries its own segment, so it meets every node whatever the rows wrap to. */
.inner-about-steps>li::after,.inner-about-again::after{content:'';position:absolute;top:0;bottom:0;width:2px;left:calc(var(--about-loop-x) - var(--about-loop-gutter) - 1px);background:var(--mish-rule,#58466d)}
.inner-about-steps>li:first-child::after{top:calc(var(--mish-space-5,24px) + var(--mish-step-title,1.5rem) * .625)}
.inner-about .inner-about-again{position:relative;max-width:var(--mish-measure,68ch);margin-top:0;padding-top:var(--mish-space-4,16px);
  font:400 var(--mish-step-small,.875rem)/24px var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-muted,#c1b4d0)}
.inner-about-again::before{top:calc(var(--mish-space-4,16px) + 12px - var(--about-node) / 2)}
.inner-about-again::after{bottom:auto;height:calc(var(--mish-space-4,16px) + 12px)}
/* Live: the module's SVG draws the loop, so the still segments step aside. */
.inner-about-loop[data-loop-live]>.inner-about-steps>li::after,.inner-about-loop[data-loop-live]>.inner-about-again::after{display:none}
.inner-about-track{position:absolute;left:0;top:0;width:var(--about-loop-gutter);height:100%;overflow:visible;pointer-events:none}
.inner-about-track .t-rail{fill:none;stroke:var(--mish-rule,#58466d);stroke-width:1.5}
.inner-about-track .t-cable{fill:none;stroke:var(--mish-mint,#63d7e3);stroke-width:2;stroke-linecap:butt}
.inner-about-track .t-head{fill:var(--mish-mint,#63d7e3)}
.inner-about-track .t-halo{fill:var(--mish-mint,#63d7e3);opacity:.18}
/* Node states: passed this pass (mint edge), the current step (mint fill). Colour only, no movement. */
.inner-about-steps>li.is-passed h3::before,.inner-about-again.is-passed::before{border-color:var(--mish-mint,#63d7e3)}
.inner-about-steps>li.is-active h3::before,.inner-about-again.is-active::before{border-color:var(--mish-mint,#63d7e3);background:var(--mish-mint,#63d7e3)}
.inner-about-steps>li{transition:border-top-color var(--mish-dur-2,180ms) ease}
.inner-about-steps>li.is-active{border-top-color:var(--mish-mint,#63d7e3)}

/* ---------- Where each step runs: ruled two-column rows on paper ---------- */
.inner-about-rule>div{display:grid;grid-template-columns:minmax(0,11em) minmax(0,1fr);gap:var(--mish-space-3,12px) var(--mish-space-6,32px);align-items:start;
  padding:var(--mish-space-5,24px) 0;border-top:1px solid var(--mish-text,#251637)}
.inner-about-rule>div:last-child{border-bottom:1px solid var(--mish-line,#d8cde4)}
.inner-about-rule dt{padding-top:2px}
.inner-about-rule dd{font:400 var(--mish-step-body,1rem)/var(--mish-lh-body,1.7) var(--mish-font-body,Montserrat,sans-serif);color:var(--mish-text-body,#251637);max-width:var(--mish-measure,68ch)}

/* ---------- Close: a dark stage band ---------- */
.inner-about-close{padding:var(--mish-section,96px) var(--mish-gutter,16px)}
.inner-about-close-in{box-sizing:border-box;max-width:var(--mish-max,1320px);margin:0 auto;display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:end;gap:var(--mish-space-6,32px) var(--mish-space-8,64px)}
.inner-about-close .mish-text{margin-top:var(--mish-space-3,12px)}
.inner-about-close-act{display:grid;justify-items:start;gap:var(--mish-space-4,16px)}
.inner-about .inner-about-contact{max-width:none;color:var(--mish-muted,#c1b4d0);overflow-wrap:anywhere}
.inner-about-contact .mish-link{display:inline-block;padding:4px 0;color:var(--mish-light,#fbf7ff)}   /* a 24px+ touch target */

/* ---------- Narrow screens ---------- */
@media (max-width:899px){
  .inner-about-intro{grid-template-columns:minmax(0,1fr);align-items:start}
  /* The portrait becomes a byline card: a 4:5 thumbnail beside the name. */
  .inner-about-portrait{display:grid;grid-template-columns:clamp(88px,22vw,132px) minmax(0,1fr);align-items:center;gap:var(--mish-space-4,16px);max-width:440px}
  .inner-about-portrait-cap{margin-top:0}
  .inner-about-close-in{grid-template-columns:minmax(0,1fr);align-items:start}
}
@media (max-width:639px){
  .inner-about-rule>div{grid-template-columns:minmax(0,1fr);gap:var(--mish-space-3,12px)}
  .inner-about-waits{padding:var(--mish-space-4,16px)}
  .inner-about-bars li{gap:10px}
}
/* The How aside sticks at 88px only where all of it fits below the bar; otherwise it scrolls with the page, so the foot of
   the bars panel is never under the fold while stuck. Its height depends on the column width (measured with the fonts
   loaded: 885px at 900 wide, 797 to 803px from 1100 to 1180, 774px from 1366 up), so the limit steps with the width. */
@media (max-height:999px) and (max-width:1099px),(max-height:919px) and (max-width:1365px),(max-height:889px){
  .inner-about-how .mish-read-aside{position:static}
}
/* Forced colours: three system colours keep the three states apart, bar and key alike. Each override matches the
   specificity of the rule it replaces and comes later, so none of the brand colours survive. */
@media (forced-colors:active){
  .inner-about-bars li .inner-about-bar i,.inner-about-waits-key span::before{forced-color-adjust:none;background:CanvasText}
  .inner-about-bars li.is-cleared .inner-about-bar i{background:GrayText}
  .inner-about-bars li.is-constraint .inner-about-bar i{background:Highlight}
  .inner-about-waits-key .k-wait::before{background:CanvasText}
  .inner-about-waits-key .k-long::before{background:Highlight}
  .inner-about-waits-key .k-clear::before{background:GrayText}
  .inner-about-steps>li.is-active h3::before,.inner-about-again.is-active::before{forced-color-adjust:none;background:Highlight;border-color:Highlight}
  .inner-about-portrait-art .pa-mono path,.inner-about-portrait-art .pa-mono .pa-n{stroke:CanvasText}
  .inner-about-portrait-art .pa-word{fill:CanvasText}
}

/* The drawn portrait cable enters once; Pause/reduced motion show its end. */
.inner-about-portrait .pa-cable{stroke-dasharray:1000;animation:pa-cable-enter 400ms ease-out both}
@keyframes pa-cable-enter{from{stroke-dashoffset:1000}to{stroke-dashoffset:0}}
html[data-motion="paused"] .inner-about-portrait .pa-cable{animation:none;stroke-dashoffset:0}
@media(prefers-reduced-motion:reduce){.inner-about-portrait .pa-cable{animation:none;stroke-dashoffset:0}}