/* launcher.css — the Location Launcher's OWN layer, on top of the athlete portal's design system (portal.css = a byte copy of shredfast-athlete-portal/app/globals.css, sha256 593cfb51fbae2bffdc31cfb66401b2e9741df7d9da3445529331ffaf8e6f7454). =========================================================================== Built to ScreenBrief v2 (md5 cb429b97…), §01 measured grammar throughout. THE RULE THIS FILE OBEYS. Nothing here invents a visual idea, and when the brief landed this file got SHORTER: five of the seven components v1 had to derive already ship in the portal, so they are consumed rather than re-drawn. What remains is the composition the brief specifies plus the layout glue no stylesheet can own for you. NAMING. Every class introduced here carries the `lx-` prefix. The D2006 lesson is bound: a bare vocabulary word ("gate", "phase", "item", "empty") is a namespace claim that collides with the donor, so none is used. The census arm in render2.mjs proves 0 collisions between `lx-*` and portal.css's own selectors, in both directions. NOT INHERITED (§01.7): `--dim` never carries a word; the `.pfx` profile family is never used (its `.trackgrp` / `.trackctl` twins are deliberately kept apart from the base rules, and reaching across them is how the portal broke its own stage counter); no drop shadow outside a modal — a launcher panel with a shadow is a bento tile wearing the system's tokens, which is the defect this v2 exists to remove. FONTS. portal.css declares @font-face with ABSOLUTE `/fonts/*.woff2` URLs, which resolve against the Next public dir at runtime and against the filesystem root under file://. The faces are re-declared with paths relative to this sheet. Same family, same weights, later in the cascade — the last matching face wins. */ @font-face { font-family: "Inter"; src: url("/assets/inter.woff2") format("woff2"); font-weight: 100 900; font-display: block; } /* THE next/font BRIDGE. portal.css:47 declares --font-display: "Bio Sans", var(--font-display-web), "Inter", sans-serif; where --font-display-web is supplied by next/font in app/layout.tsx (Exo 2, the self-hosted web fallback). In a static mock that variable does not exist, and an UNDEFINED var() with no fallback makes the whole declaration INVALID AT COMPUTED-VALUE TIME — font-family silently resolves to the inherited body face and every display heading renders in Inter while document.fonts.check("Bio Sans") still answers true. That is the defect the measured-advance arm caught: heading advance 375.04 == Inter 374.46, against Bio Sans 346.95 (at 26px; the arm now measures at 400px, where the faces actually separate). Declaring the variable restores the portal's own stack; Bio Sans is first in it and loads locally, so Exo 2 is never reached. */ :root { --font-display-web: "Exo 2"; } /* GRID ITEMS DEFAULT TO min-width:auto, WHICH IS THE MIN-CONTENT WIDTH. `.main` is a grid item of `.app`; the all-locations table inside it carries min-width:900px, so at 390 the column refused to shrink and the whole app grid measured 946px — a 556px body overflow. The portal hits this wherever it puts wide content in a grid cell and cures it the same way: `.trackgsec{min-width:0}` (:474), `.setmain .setsec, .setmain .panel {min-width:0}` (:1235). Same cure, same reason — the table owns its own scroller. */ .main, .frame, .gsec, .gcell { min-width: 0; } /* ══════════════════════════════════════════════════════════════════════════════ §04.2b RANK 1 — LAUNCH STATUS IS THE PAGE HEAD, NOT A BANNER. v1 rendered the §5.5 sentence in a flash-box: one bordered strip among several, under a panel of bordered strips. It read as having fallen out of that panel because structurally it had — same box, same weight, lower position. Making the box redder would have produced two alarms, not a hierarchy. The cure is to stop it being a box. It is the `.hero` (portal.css:340-347), the portal's own most emphatic non-modal element, and NOTHING here changes its geometry. Only the radial glow's mix colour is swapped by state, which is a one-token substitution inside a shipped rule. ══════════════════════════════ */ .hero.lx-amber { background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--amber) 8%, transparent), transparent 60%); } .hero.lx-neutral { background: radial-gradient(120% 140% at 0% 0%, color-mix(in oklch, var(--fg3) 7%, transparent), transparent 60%); } .hero.lx-amber .eyebrow .d { background: var(--amber); } .hero.lx-neutral .eyebrow .d { background: var(--fg3); } /* the hero's right slot: switcher above the primary action, per §04.2b and §04.3 */ .lx-heroact { display: flex; flex-direction: column; align-items: flex-end; gap: 10px; flex-shrink: 0; } .lx-heroact .fhint { font-size: 12.5px; text-align: right; max-width: 250px; } /* §04.4's second line on a lapsed clock, and §04.6's optional-items line */ .lx-subline { font-size: 12.5px; color: var(--fg3); margin-top: 8px; line-height: 1.5; } /* ══════════════════════════════════════════════════════════════════════════════ §04.2a THE TIMELINE. The bar is the portal's `.loadbar` / `.lbseg` (portal.css:1039-1052) consumed unmodified — this file adds only the three role fills, the threshold rule, and the caption's positioning context. ══════════════════════════════════════════════════════════════════════════════ */ .lx-track { position: relative; padding-top: 16px; } .lx-phase .lx-track { padding-top: 0; margin-top: 10px; } /* `.loadbar` carries `margin-top:auto` for its home at the foot of a stat cell; here it is not the last child of a flex column, so the auto margin is released. */ .lx-track .loadbar { margin-top: 0; overflow: visible; } /* the three role fills. --green-press (not --green) on the approved segment is the LIGHT-ONLY substitution portal.css:1061-1066 already made for exactly this track: --green measures 3.02:1 against --c-surface-2 in light, a rounding error from failing WCAG 1.4.11 for a non-text meaningful graphic. Inherited, not rediscovered. */ .lbseg.lx-approved { background: var(--green); } :root[data-theme="light"] .lbseg.lx-approved { background: var(--green-press); } .lbseg.lx-awaiting { background: var(--amber); } .lbseg.lx-optional { background: var(--green-dim); } /* THE THRESHOLD MARK — 2px, --fg2, crossing the track 4px above to 4px below. `.gateline`'s dashed amber is deliberately NOT lifted: amber means *awaiting HQ* on this screen, and a threshold that borrows the alarm colour spends it. --fg2 is 7.59:1 and is not a status colour anywhere in this brief: the boundary is structure, not alarm. */ .lx-thr { position: absolute; top: -5px; bottom: -5px; width: 2px; margin-left: -1px; background: var(--fg2); border-radius: 1px; z-index: 2; } /* the caption, `.tgate` treatment verbatim (portal.css:519), rendered ONCE above the location bar's mark. Phase bars carry the mark without it. */ .lx-cap { position: absolute; top: 0; white-space: nowrap; } /* the location bar's cell — `.trackcell` padding, and the `.statv` gate figure */ .lx-loccell { gap: 14px; } .lx-loccell .statv .of { margin-left: 4px; } /* the four-figure annotation row — `.detail .conv` grammar: a flex row of label-over-value pairs, `.cl` 10px/600/.1em uppercase over `.cv` 15.5px/600 display. The labels take --fg3, the small-label rung (portal.css:148), not --muted: at 10px they are below the AA-large threshold --muted is limited to (portal.css:149). */ .lx-convrow { display: flex; align-items: flex-start; gap: 30px; flex-wrap: wrap; border-top: 1px solid var(--line-soft); padding-top: 14px; } .lx-conv .cl { font-size: 10px; font-weight: 600; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); } .lx-conv .cv { font-family: var(--font-display); font-size: 15.5px; font-weight: 600; color: var(--fg); margin-top: 5px; letter-spacing: -.01em; } /* the phase rows — `.nstep` consumed whole; these declarations are layout glue only */ .nstep.lx-phase { text-decoration: none; transition: .12s var(--ease); align-items: flex-start; } .nstep.lx-phase:hover { background: var(--c-surface); } .nstep.lx-phase:hover .rowarw { color: var(--green-quiet); transform: translateX(2px); } .nstep.lx-phase .nsi { border-radius: 50%; font-size: 12px; font-weight: 700; font-family: var(--font-display); } .nstep.lx-phase .nsn { gap: 14px; } .lx-pcnt { font-family: var(--font-display); font-size: 14px; font-weight: 700; color: var(--fg2); letter-spacing: -.01em; margin-left: auto; } .nstep.lx-phase .nsact { align-self: center; } .nstep.lx-phase .rowarw svg { width: 15px; height: 15px; } /* the panel foot carrying §04.8's signed sentence */ .lx-foot { padding: 12px 20px; border-top: 1px solid var(--line-soft); font-size: 11.5px; color: var(--fg3); } /* ══════════════════════════════════════════════════════════════════════════════ §01.6 STATUS COLOUR MAP — five roles, three boxes, one outline. Every box below is a PORTAL rule; this file adds only the role variants the map names. ══════════════════════════════════════════════════════════════════════════════ */ /* `.pill-stuck` with --red swapped for --amber (rejected row pill, deadline red and lapsed). The box is portal.css:1733 unchanged. */ .pill-stuck.lx-red { border-color: color-mix(in oklch, var(--red) 48%, transparent); background: color-mix(in oklch, var(--red) 10%, transparent); color: var(--red); } /* dot colours on the outline badge come from the phase family already declared (portal.css:1729-1731). No fourth is minted. */ .badge-stage .d.lx-muted { background: var(--muted); } .badge-stage .d.lx-amber { background: var(--amber); } .badge-stage.lx-o3 { color: var(--fg3); } /* MUST DO / OPTIONAL / LEGALLY REQUIRED markers. MUST DO and OPTIONAL take the `.badge-stage` outline (§01.6: colouring a badge that appears on the majority of rows spends the alarm budget on a constant); LEGALLY REQUIRED is the exception and takes the `.pill-stuck` box with --red. Sized to the 9.5px micro-label `.antag` already uses (portal.css:465). */ .lx-mark { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border: 1px solid var(--line-soft); border-radius: 60px; font-size: 9.5px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; white-space: nowrap; color: var(--fg2); } .lx-mark.opt { color: var(--fg3); } .lx-mark.legal { border-color: color-mix(in oklch, var(--red) 48%, transparent); background: color-mix(in oklch, var(--red) 10%, transparent); color: var(--red); } .lx-mark svg { width: 11px; height: 11px; stroke: currentColor; fill: none; stroke-width: 2.2; } /* ── the back link — §01.5 item 5: `.golink` (portal.css:378) with the chevron mirrored. NOT the `.pfx .backlink` twin (§01.7 item 2). ── */ .lx-back { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: var(--green-quiet); text-decoration: none; transition: .14s var(--ease); } .lx-back:hover { color: var(--on-green-tint); gap: 7px; } .lx-back svg { width: 13px; height: 13px; stroke: currentColor; fill: none; stroke-width: 2; } /* ── the back link INSIDE the kicker — decision 38, V-2/V-3. The chevron moved off the hero's right edge into the eyebrow, and `.lx-back` and `.eyebrow` disagree about type: 12px/none/normal against 11px/uppercase/.18em (portal.css:343). Left alone the kicker reads as two fragments at two sizes on one line. Inherited, not restated, so the eyebrow stays the single source of the kicker's type — and set per property rather than through the `font` shorthand, which would silently take family and line-height with it. The 13px chevron is left at 13px: measured against an 11px cap height it is the same optical weight the right-edge link had at 12px. `.eyebrow-sep` is the divider, a bar on phase pages and a middle dot on item pages (the glyph is the caller's, the ink is here); the 8px `.hero .eyebrow` gap (portal.css:342) does the spacing, so the glyph carries no padding of its own. ── */ .eyebrow .lx-back { font-size: inherit; font-weight: inherit; letter-spacing: inherit; text-transform: inherit; } .eyebrow-sep { color: var(--fg3); font-weight: 400; } /* ── rail count badge — `.chip-proofs` (portal.css:1625) in the nav row, exactly as `Proof review` carries its 3 in reference/admin-candidates@1440.png (§04.2b rank 4 item 1). ── */ .nav a .chip-proofs { margin-left: auto; } .nav a.on .chip-proofs { border-color: color-mix(in oklch, var(--on-green-fill) 40%, transparent); background: color-mix(in oklch, var(--on-green-fill) 18%, transparent); color: var(--on-green-fill); } /* ── the admin table. `.atable` (portal.css:1668-1720) consumed whole; the launcher's own columns are the only addition, and the two-line cell is `.aname`/`.an1`/`.an2` (portal.css:1721-1723), the portal's own name-over-description grammar. ── */ .atable th.num, .atable td.num { text-align: right; } .lx-scroll { overflow-x: auto; } .lx-figure { font-size: 13px; font-weight: 600; font-variant-numeric: tabular-nums; color: var(--fg); } .lx-figure .u { color: var(--fg3); font-weight: 500; font-size: 11.5px; margin-left: 1px; } .lx-figure.zero { color: var(--fg3); font-weight: 500; } /* PROGRESS AND RISK ARE DIFFERENT MEASURES, AND THE BAR ONLY CARRIES ONE. BEFORE: this bar was tinted by `deadline_risk`, so ShredFast Bolton at 97 of 104 — the most complete location on the table bar the three already at 104 — painted its near-full bar RED, and Stockport at 88/104 painted amber. A reader scanning the column read "failing" off a location that is 93% done. The risk is real and it is already said, in the deadline pill beside it, which is the one element §4.2 / OQ-I give the risk colour to. AFTER: the bar is always the progress tone — `--green-press`, the same fill the dashboard's location bar uses for must-do done, so the two surfaces agree. Risk colours the pill and nothing else. The `.amber`/`.red` modifiers are deleted rather than left unused, so nothing can reach for them again. */ .lx-mini { height: 5px; background: var(--c-surface-2); border-radius: 60px; overflow: hidden; position: relative; width: 76px; margin: 5px 0 0 auto; } .lx-mini .f { position: absolute; inset: 0 auto 0 0; border-radius: 60px; background: var(--green-press); } .atable td.arw { text-align: right; width: 40px; } .atable td.arw svg { width: 15px; height: 15px; stroke: currentColor; fill: none; stroke-width: 2; } .atable tbody tr:hover .rowarw { color: var(--green-quiet); transform: translateX(2px); } /* ── filter chips — `.chip` / `.chip.on` (portal.css:714-717) consumed whole; the launcher needs a count inside one, which `.ptitle .cnt` (portal.css:377) draws. `.chip.on` is amber in the portal (a toggled FILTER); the launcher's chips are a single-select segmented filter, so the selected one takes the green selection tone the sheet uses for a chosen row, not the amber "this filter is on" tone. ── */ .lx-chips { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .chip .c { font-variant-numeric: tabular-nums; font-size: 11px; font-weight: 700; opacity: .8; } .chip.lx-on { border-color: color-mix(in oklch, var(--green) 55%, transparent); background: color-mix(in oklch, var(--green) 10%, transparent); color: var(--green-quiet); } /* `.lx-toolrow` held the phase list's result-descriptor line. Decision 38 V-1 retired that line and moved its figure into the `.ptitle` `.cnt` chip, so nothing in the estate renders this class today. The rules are kept, unreferenced, because the toolrow is the launcher's declared slot for a filter-row control and the next one lands in it; they are inert until then. */ .lx-toolrow { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 10px 18px; } /* ── form grammar — `.setsec` (portal.css:1236), `.fld`/`.fl` (portal.css:625-626), `.in` at 13.5px in a 44px box (portal.css:627). THE SHELL'S 16px INPUT RULE IS NOT IMPORTED (§01.3): it is not this system's, and a 16px input in a 44px box changes the measured density of every form on these screens. ── */ .lx-form { padding: 24px 26px; max-width: 760px; display: flex; flex-direction: column; gap: 24px; } .lx-fieldset { display: flex; flex-direction: column; gap: 16px; } .lx-2col { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; } .lx-err { font-size: 11.5px; color: var(--red); font-weight: 600; } .in.lx-bad { border-color: var(--red); } .lx-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } /* form-level failure — `.merr` (portal.css:1618), the portal's red inline error panel */ .lx-merr { font-size: 12.5px; padding: 11px 14px; border: 1px solid color-mix(in oklch, var(--red) 30%, transparent); background: color-mix(in oklch, var(--red) 5%, transparent); color: var(--fg); display: flex; align-items: center; gap: 10px; } .lx-merr svg { width: 15px; height: 15px; stroke: var(--red); fill: none; stroke-width: 2.2; flex-shrink: 0; } /* ── item rows on the phase list — `.nstep` (portal.css:384-397) consumed whole ── */ .nstep.lx-item { text-decoration: none; transition: .12s var(--ease); } .nstep.lx-item:hover { background: var(--c-surface); } .lx-ref { font-size: 11.5px; font-weight: 700; color: var(--fg3); font-variant-numeric: tabular-nums; width: 32px; flex-shrink: 0; padding-top: 2px; } .lx-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 7px; } .lx-ev { font-size: 11.5px; color: var(--fg3); display: inline-flex; align-items: center; gap: 5px; } .lx-ev svg { width: 12px; height: 12px; stroke: currentColor; fill: none; stroke-width: 2; } /* ── item detail: definition rows — `.prow .pmain .n`/`.d` (portal.css:1244-1245) ── */ .lx-def { padding: 15px 20px; border-bottom: 1px solid color-mix(in oklch, var(--line-soft) 55%, transparent); } .lx-def:last-child { border-bottom: none; } .lx-defk { font-size: 10.5px; letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); font-weight: 600; } .lx-defv { font-size: 13px; color: var(--fg); margin-top: 6px; line-height: 1.55; } .lx-defv.quiet { color: var(--fg2); } /* evidence rows — `.upi` compact dated row (portal.css:449) at file scale */ .lx-file { display: flex; align-items: center; gap: 13px; padding: 13px 20px; border-bottom: 1px solid color-mix(in oklch, var(--line-soft) 55%, transparent); } .lx-file:last-child { border-bottom: none; } .lx-thumb { width: 44px; height: 44px; flex-shrink: 0; background: var(--c-surface-2); border: 1px solid var(--line-soft); display: grid; place-items: center; color: var(--fg3); } .lx-thumb svg { width: 19px; height: 19px; stroke: currentColor; fill: none; stroke-width: 1.6; } .lx-thumb img { width: 100%; height: 100%; object-fit: cover; display: block } /* K-1 road (c), decision 39 — the evidence thumbnail. BYTE-IDENTICAL in app/globals.css; A-21 is the arm. */ .lx-fname { font-size: 12.5px; font-weight: 600; color: var(--fg); word-break: break-all; } .lx-fmeta { font-size: 11.5px; color: var(--fg3); margin-top: 3px; } /* §01.5 item 4 — the upload is ONE control: a