/* docpack bundle stylesheet (budget: cssBudget/bundleCSSBudget in site.go). Light is default; dark via prefers-color-scheme unless the toggle stamped data-theme. Facts (dates, ids, labels, receipts) use the mono stack; prose the sans stack. Slate's tokens are copied from internal/cloud/landing.html's :root (the canonical brand): bg2=--band, line/line2=--rule-strong/--rule, *-bg=landing's -wash rgba. Exception: light red/gray-fg are a shade darker than landing's so chips clear 4.5:1 on every Look (green-fg matches landing's own darkened --green). Manuscript/Blueprint keep their own tokens; only structural rules (fonts, header layout) reach them. */ /* ---- tokens ---- */ :root { /* Read by .sidebar and the topbar's brand cell so tab alignment cannot drift. */ --sidebar-w: 240px; --topbar-pad: 24px; --bg: #FAFAFC; --bg2: #F1F2F7; --fg: #12151C; --fg2: #59627A; --fg3: #5F6880; --line: #CFD3E0; --line2: #E3E5EE; --accent: #4A42D6; --green-bg: rgba(15,122,74,.09); --green-fg: #0B6B40; --amber-bg: rgba(143,84,0,.09); --amber-fg: #8F5400; --red-bg: rgba(179,38,30,.09); --red-fg: #A8241C; --red-tint: rgba(179,38,30,.12); --gray-bg: rgba(107,114,128,.10); --gray-fg: #5B6270; --var-bg: rgba(74,66,214,.09); --sans: -apple-system, BlinkMacSystemFont, "Segoe UI Variable Text", "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, SFMono-Regular, "SF Mono", "Cascadia Mono", "Segoe UI Mono", Menlo, Consolas, "Liberation Mono", monospace; --serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, "Times New Roman", serif; /* Switched by the visual direction (Settings); slate = the defaults, matching landing's display-serif headings (400 weight, tight tracking). */ --body: var(--sans); --head: var(--serif); --head-weight: 400; --r: 8px; --lh: 1.6; --measure: 1000px; --pad-y: 24px; --pad-x: 32px; --h1-size: 30px; --h2-size: 20px; --h3-size: 16px; --h3-weight: 700; --head-track: -.014em; --h2-track: normal; --h2-tt: none; --rule-w: 1px; } :root[data-theme="dark"] { --bg: #0B0E14; --bg2: #10151E; --fg: #E9ECF3; --fg2: #98A3B6; --fg3: #828DA2; --line: #2C3648; --line2: #1E2635; --accent: #8F8CFF; --green-bg: rgba(61,214,140,.13); --green-fg: #3DD68C; --amber-bg: rgba(240,180,75,.13); --amber-fg: #F0B44B; --red-bg: rgba(255,138,122,.13); --red-fg: #FF8A7A; --red-tint: rgba(255,138,122,.16); --gray-bg: rgba(139,147,161,.14); --gray-fg: #8B93A1; --var-bg: rgba(143,140,255,.14); } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #0B0E14; --bg2: #10151E; --fg: #E9ECF3; --fg2: #98A3B6; --fg3: #828DA2; --line: #2C3648; --line2: #1E2635; --accent: #8F8CFF; --green-bg: rgba(61,214,140,.13); --green-fg: #3DD68C; --amber-bg: rgba(240,180,75,.13); --amber-fg: #F0B44B; --red-bg: rgba(255,138,122,.13); --red-fg: #FF8A7A; --red-tint: rgba(255,138,122,.16); --gray-bg: rgba(139,147,161,.14); --gray-fg: #8B93A1; --var-bg: rgba(143,140,255,.14); } } /* ---- visual directions (Settings; persisted as data-dir). slate = default. Fonts + accent are theme-independent; light neutrals live in the base dir block, dark neutrals override under the same two dark conditions as above. Every text token clears 4.5:1 on its real surfaces (page, bg2, tinted rows, chips, var pills) — measured with axe; re-run it before retuning a hex. */ :root[data-dir="manuscript"] { --body: var(--serif); --head: var(--serif); --head-weight: 600; --r: 3px; --accent: #1b6e48; --bg: #f5f5f1; --bg2: #edeee7; --fg: #1c2420; --fg2: #4c564f; --fg3: #5b625d; --line: #e1e2da; --line2: #ebece4; --var-bg: #e0ece3; --lh: 1.74; --measure: 880px; --pad-y: 34px; --pad-x: 46px; --h1-size: 31px; --h2-size: 22px; --h3-size: 18px; --h3-weight: 600; --head-track: 0; } :root[data-dir="blueprint"] { /* --head pinned to sans: blueprint's identity is bold uppercase technical sans and must not follow slate's switch to the display serif. --accent is the darkest orange that still reads orange yet holds 4.5:1 as text (was #c9781a, 3.4:1). */ --head: var(--sans); --head-weight: 800; --r: 0px; --accent: #a34700; --var-bg: rgba(201,120,26,.12); --bg: #ffffff; --bg2: #f6f7f9; --fg: #0a0c10; --fg2: #565c66; --fg3: #606670; --line: #dadee4; --line2: #eef0f3; --lh: 1.55; --measure: 1040px; --h1-size: 34px; --h2-size: 14px; --h3-size: 13px; --h3-weight: 700; --h2-track: .13em; --h2-tt: uppercase; --head-track: -.02em; --rule-w: 2px; } :root[data-dir="manuscript"][data-theme="dark"] { --accent: #57b784; --bg: #141715; --bg2: #1a1e1b; --fg: #e9eae3; --fg2: #919a92; --fg3: #808980; --line: #262a27; --line2: #20241f; --var-bg: #1d271f; } :root[data-dir="blueprint"][data-theme="dark"] { --accent: #f2a945; --bg: #0a0c10; --bg2: #12151a; --fg: #eef0f3; --fg2: #888f99; --fg3: #78818e; --line: #1e2229; --line2: #161a20; --var-bg: rgba(242,169,69,.16); } @media (prefers-color-scheme: dark) { :root[data-dir="manuscript"]:not([data-theme="light"]) { --accent: #57b784; --bg: #141715; --bg2: #1a1e1b; --fg: #e9eae3; --fg2: #919a92; --fg3: #808980; --line: #262a27; --line2: #20241f; --var-bg: #1d271f; } :root[data-dir="blueprint"]:not([data-theme="light"]) { --accent: #f2a945; --bg: #0a0c10; --bg2: #12151a; --fg: #eef0f3; --fg2: #888f99; --fg3: #78818e; --line: #1e2229; --line2: #161a20; --var-bg: rgba(242,169,69,.16); } } /* Structure beyond color: manuscript reads as a book (ruled headings, italic asides, roomier leading); blueprint as a technical drawing (uppercase labels, rules above each h2, heavier borders). */ :root[data-dir="manuscript"] article h2 { border-bottom: 1px solid var(--line2); padding-bottom: .3em; } :root[data-dir="manuscript"] article p { margin-bottom: 1.15em; } :root[data-dir="manuscript"] .sentence, :root[data-dir="manuscript"] .rowdesc { font-style: italic; } :root[data-dir="blueprint"] article h2 { border-top: var(--rule-w) solid var(--fg); padding-top: .55em; margin-top: 2.1em; } :root[data-dir="blueprint"] .topbar { border-bottom-width: var(--rule-w); } :root[data-dir="blueprint"] .sidebar { border-right-width: var(--rule-w); } :root[data-dir="blueprint"] .packname { text-transform: uppercase; letter-spacing: .07em; font-size: 13px; } :root[data-dir="blueprint"] .navgroup summary { text-transform: uppercase; letter-spacing: .04em; font-size: 11px; } /* ---- base ---- */ * { box-sizing: border-box; } /* The sticky .topbar is 54px (98px at <=900px): a jump target must land below it. */ html { scroll-padding-top: 64px; } body { margin: 0; font-family: var(--body); font-size: 15px; line-height: var(--lh); color: var(--fg); background: var(--bg); } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } /* In-prose links must not rely on colour alone (WCAG 1.4.1). :where() holds this at specificity 0,0,2 so the lists that opt out (.contents-list a) still win. */ article a:where(:not(.secnum, .permalink)) { text-decoration: underline; text-underline-offset: .18em; } /* overflow-wrap on INLINE code only: a prose `code` span is usually a URL or command, one unbreakable token that drags the page into horizontal scroll (390px: two spans held scrollWidth at 510). `anywhere`, not `break-word`, which won't split a token alone on its line. Fences are excluded below: a broken command can't be copied. */ code { font-family: var(--mono); font-size: .92em; background: var(--bg2); padding: .1em .35em; border-radius: 4px; overflow-wrap: anywhere; } figure.snippet pre code, .snippet-output pre code { overflow-wrap: normal; } .mono { font-family: var(--mono); font-size: 12px; color: var(--fg2); } /* ---- chrome ---- */ /* 1fr auto 1fr: equal outer tracks keep the search on the viewport's centre however wide the brand or actions grow. The brand is pinned to the sidebar's width (both read --sidebar-w, less the topbar padding) so Docs/Activity begin where it ends. */ .topbar { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 12px; padding: 10px var(--topbar-pad); border-bottom: 1px solid var(--line); position: sticky; top: 0; background: var(--bg); z-index: 5; } .topbar-left { display: flex; align-items: center; min-width: 0; } .topbar-search { justify-self: center; } .topbar-actions { justify-self: end; } .packname svg { flex: none; } .brandtext { overflow: hidden; text-overflow: ellipsis; min-width: 0; } .packname { display: flex; align-items: center; gap: 8px; font-weight: 700; color: var(--fg); text-decoration: none; width: calc(var(--sidebar-w) - var(--topbar-pad)); flex: none; white-space: nowrap; overflow: hidden; } .packname:hover { text-decoration: none; } .topnav { display: flex; gap: 2px; } .topnav a { font: 600 13px var(--sans); color: var(--accent); text-decoration: none; padding: 4px 10px; border-radius: 6px; } .topnav a:hover { background: var(--bg2); } .topnav a.current { background: var(--var-bg); } /* flex, not the 's default inline: a button too wide for the row would wrap like a word and stack the controls 4-high at 390px (see max-width:900px below). */ .topbar-actions { display: flex; align-items: center; gap: 6px; } .topbar-actions button { font: 12px var(--sans); padding: 4px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg2); color: var(--fg2); cursor: pointer; } .settings-pop { position: fixed; top: 46px; right: 18px; z-index: 40; background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); box-shadow: 0 12px 40px rgba(0,0,0,.28); padding: 12px 14px; display: grid; gap: 12px; min-width: 214px; } .settings-pop[hidden] { display: none; } .settings-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; } .settings-opts { display: flex; gap: 6px; } .settings-opts button { flex: 1; font: 12px var(--sans); padding: 6px 4px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); color: var(--fg2); cursor: pointer; } .settings-opts button[aria-pressed="true"] { color: var(--accent); background: var(--bg); border-color: var(--accent); font-weight: 700; box-shadow: inset 0 0 0 1px var(--accent); } .layout { display: flex; min-height: calc(100vh - 45px); } .sidebar { width: var(--sidebar-w); flex: none; border-right: 1px solid var(--line); padding: 16px; background: var(--bg2); position: sticky; top: 45px; align-self: flex-start; max-height: calc(100vh - 45px); overflow-y: auto; } .nav-toggle { display: none; } .nav-scrim[hidden] { display: none; } .sidebar-label, .navfolder, .toc-label, .runhistory-label, .varspanel-label { font-family: var(--mono); font-size: 10px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; color: var(--fg3); margin-bottom: 8px; } .navfolder { margin-top: 14px; } .navgroup summary { font-weight: 600; font-size: 13px; cursor: pointer; list-style: none; padding: 4px 0; } .navgroup summary::-webkit-details-marker { display: none; } .navgroup summary::before { content: "▸ "; color: var(--fg3); } .navgroup[open] summary::before { content: "▾ "; } .navcount { color: var(--fg3); font-weight: 400; } .navgroup ul { list-style: none; margin: 0 0 8px; padding-left: 14px; } .navgroup li { padding: 2px 0; font-size: 13px; } .navgroup li.current > a { font-weight: 700; color: var(--fg); } main { flex: 1; min-width: 0; padding: var(--pad-y) var(--pad-x); max-width: var(--measure); } /* ---- chips (trust labels) + palette dots ---- */ .chip { font-family: var(--mono); font-size: 10px; font-weight: 700; padding: 2px 8px; border-radius: 10px; white-space: nowrap; } .chip-green { background: var(--green-bg); color: var(--green-fg); } .chip-amber { background: var(--amber-bg); color: var(--amber-fg); } .chip-red { background: var(--red-bg); color: var(--red-fg); } .chip-gray { background: var(--gray-bg); color: var(--gray-fg); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--gray-fg); } .dot-green { background: var(--green-fg); } .dot-amber { background: var(--amber-fg); } .dot-red { background: var(--red-fg); } .dot-gray { background: var(--gray-fg); } /* ---- trust register (index only): the counts summaryLine already renders as text, drawn as a bar + legend; dot-* above supply every fill. The bar is a mouse-only duplicate (aria-hidden, nothing focusable in it); the legend buttons are the real filter toggles (aria-pressed, normal focus ring) for keyboard and AT users. */ .register { margin: 12px 0 0; } .register-bar { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--line2); } .register-seg { display: block; height: 100%; cursor: pointer; } .register-legend { display: flex; gap: 14px; flex-wrap: wrap; margin-top: 8px; font-family: var(--mono); font-size: 12px; } .register-legend button { font: inherit; color: var(--fg2); background: none; border: 0; padding: 0; cursor: pointer; display: inline-flex; align-items: center; gap: 5px; } .register-legend button:hover, .register-legend button[aria-pressed="true"] { color: var(--fg); text-decoration: underline; } .register-empty { color: var(--fg3); font-style: italic; font-size: 13px; margin-top: 4px; } /* ---- page head ---- */ .breadcrumb { font-family: var(--mono); font-size: 11px; color: var(--fg3); margin-bottom: 10px; } .statusline { display: flex; gap: 10px; align-items: center; } .sentence { font-size: 13px; color: var(--fg2); } .edit-page-link { margin-left: auto; display: inline-flex; align-items: center; gap: 5px; font: 12px var(--sans); color: var(--fg2); border: 1px solid var(--line); border-radius: 6px; padding: 3px 9px; text-decoration: none; } .edit-page-link:hover { color: var(--fg); background: var(--bg2); } .edit-page-link svg { flex: none; } .pagehead h1 { font-family: var(--head); font-weight: var(--head-weight); font-size: var(--h1-size); letter-spacing: var(--head-track); line-height: 1.15; margin: 8px 0 4px; text-wrap: balance; } .packdesc { color: var(--fg2); margin: 4px 0 2px; } .receipts { font-family: var(--mono); font-size: 11px; color: var(--fg3); border-bottom: 1px solid var(--line2); padding-bottom: 14px; margin-top: 4px; } .quarantine-banner { background: var(--red-tint); border: 1px solid var(--red-fg); color: var(--red-fg); border-radius: var(--r); padding: 10px 14px; margin: 14px 0; font-weight: 600; } /* ---- status board (index + activity) ---- */ /* Contains overflow LOCALLY (own scrollbar): an unbreakable cell (a long Owner/Note) must not widen the table past the viewport and drag the whole document into horizontal scroll. Nothing is hidden or truncated; a narrow reader swipes the table. */ .table-scroll { overflow-x: auto; margin: 14px 0 22px; border-radius: var(--r); } .statusboard { width: 100%; border-collapse: collapse; font-size: 13px; border: 1px solid var(--line); margin: 0; table-layout: fixed; min-width: 560px; } .statusboard th { font-family: var(--mono); font-size: 10px; font-weight: 600; color: var(--fg3); text-transform: uppercase; letter-spacing: .06em; text-align: left; background: var(--bg2); padding: 8px 14px; } .statusboard td { padding: 10px 14px; border-top: 1px solid var(--line2); vertical-align: top; } .statusboard td a { font-weight: 600; } /* One grid for every board (auto layout put Status at 8 different x). Scrolls in .table-scroll below min-width. */ .statusboard tr>:nth-child(n+2) { width: 120px; overflow-wrap: anywhere; } .statusboard tr>:nth-child(4) { width: 100px; } .rowdesc { font-size: 12px; color: var(--fg2); margin-top: 2px; } .rowdesc-danger { color: var(--red-fg); } .row-quarantined { background: var(--red-tint); } .strike { text-decoration: line-through; color: var(--fg2); } .boardfolder { font-family: var(--mono); font-size: 13px; color: var(--fg2); margin: 18px 0 0; } .groupblurb { color: var(--fg2); font-size: 13px; margin: 2px 0 10px; } .starthere { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); padding: 14px 18px; margin: 14px 0 24px; } .starthere p { margin: 0 0 10px; color: var(--fg2); } .starthere-cmd { display: block; font: 12.5px var(--mono); background: var(--bg); border: 1px solid var(--line); border-radius: 6px; padding: 6px 10px; margin-bottom: 10px; overflow-x: auto; } .starthere-go { font-weight: 700; } .legend { display: flex; flex-wrap: wrap; gap: 6px 18px; font-size: 12px; color: var(--fg2); border-top: 1px solid var(--line2); margin-top: 24px; padding-top: 10px; } .legend b { color: var(--fg); } .related-cols { display: flex; gap: 24px; flex-wrap: wrap; } .related-col { flex: 1 1 200px; min-width: 0; } .related-col ul { list-style: none; margin: 4px 0 0; padding: 0; } .related-col li { padding: 3px 0; font-size: 13px; } /* ---- page grid + toc ---- */ .pagegrid { display: flex; gap: 28px; } .pagegrid article { flex: 1; min-width: 0; } article h2, article h3 { font-family: var(--head); font-weight: var(--head-weight); line-height: 1.25; margin-top: 1.6em; } article h2 { font-size: var(--h2-size); letter-spacing: var(--h2-track); text-transform: var(--h2-tt); } /* h3 once had no font-size and fell to the UA 1.17em, which floats with body font-size: slate rendered h2 19px/400 beside h3 18.72px/400, blueprint h2 14px beside h3 18.72px (child outranking parent). Every direction now sets its own size; slate's tight h2/body interval means bigger-and-lighter, not smaller-and-bolder. */ article h3 { font-size: var(--h3-size); font-weight: var(--h3-weight); margin-top: 1.9em; } article h3 > .secnum { font-size: .82em; } .toc { width: 190px; flex: none; font-size: 12.5px; min-width: 0; } .toc ul { list-style: none; margin: 0; padding: 0; line-height: 2; } .toc a { color: var(--fg2); } /* ---- section addressing: contents card, outline numbers, agent panel ---- Every heading is addressable (corpus/section_addr.go). .secnum is the shared outline number (heading, contents card, rail) and must read identically in all three. */ .secnum { font: 600 .78em/1 var(--mono); color: var(--fg3); letter-spacing: .02em; font-variant-numeric: tabular-nums; } article h2 > .secnum, article h3 > .secnum, article h4 > .secnum { display: inline-block; margin-right: .5em; color: var(--accent); text-decoration: none; vertical-align: baseline; } a.permalink { margin-left: .4em; color: var(--line); text-decoration: none; font-weight: 400; font-size: .8em; opacity: 0; transition: opacity .12s ease; } h2:hover > a.permalink, h3:hover > a.permalink, h4:hover > a.permalink, a.permalink:focus-visible { opacity: 1; color: var(--accent); } .contents { border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); margin: 0 0 26px; } .contents > summary { cursor: pointer; padding: 10px 14px; list-style: none; display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: baseline; } .contents > summary::-webkit-details-marker { display: none; } .contents-title { font: 700 10.5px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); } .contents-meta { font-size: 12px; color: var(--fg2); } /* columns: collapses to one column at the actual content width: no media query. */ .contents-list { list-style: none; margin: 0; padding: 0 14px 4px; columns: 230px 2; column-gap: 26px; } .contents-list li { break-inside: avoid; display: flex; gap: 8px; align-items: baseline; padding: 3px 0; font-size: 13px; border-top: 1px solid var(--line2); } .contents-list li.sub { padding-left: 20px; } .contents-list a { display: flex; gap: 8px; align-items: baseline; min-width: 0; color: var(--fg); text-decoration: none; } .contents-list a:hover .contents-heading { text-decoration: underline; } .contents-heading { min-width: 0; overflow-wrap: anywhere; } .sectok { margin-left: auto; font: 11px var(--mono); color: var(--fg3); white-space: nowrap; font-variant-numeric: tabular-nums; } .contents-foot { margin: 6px 14px 12px; font-size: 11.5px; line-height: 1.5; color: var(--fg3); } .contents-foot code { font-size: .95em; } .agentbox { margin-top: 22px; border: 1px solid var(--line); border-radius: var(--r); background: var(--bg2); padding: 11px 12px; } .agentbox-label { font: 700 10px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg3); margin-bottom: 6px; } .agentbox p { margin: 0 0 8px; font-size: 12px; line-height: 1.5; color: var(--fg2); } code.agentcall { display: block; font: 11.5px/1.5 var(--mono); background: var(--bg); color: var(--fg); border: 1px solid var(--line); border-radius: 6px; padding: 7px 8px; overflow-x: auto; overflow-wrap: anywhere; white-space: pre-wrap; } .agentcall-copy { margin-top: 6px; width: 100%; font: 11px var(--sans); padding: 4px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; } .agentcall-copy.copied { color: var(--green-fg); border-color: var(--green-fg); } .agenttok { margin: 10px 0 0; font-size: 11.5px; } .agenttok > div { display: flex; gap: 8px; align-items: baseline; padding: 3px 0; border-top: 1px solid var(--line2); } .agenttok dt { color: var(--fg2); min-width: 0; overflow-wrap: anywhere; } .agenttok dd { margin: 0 0 0 auto; font-family: var(--mono); color: var(--fg); white-space: nowrap; font-variant-numeric: tabular-nums; } .agentbox-foot { margin: 8px 0 0 !important; font-size: 11px !important; color: var(--fg3) !important; } /* ---- snippets ---- */ figure.snippet { margin: 14px 0 0; border: 1px solid var(--line); border-radius: var(--r); overflow: hidden; } figure.snippet figcaption { display: flex; gap: 10px; align-items: center; background: var(--bg2); border-bottom: 1px solid var(--line); padding: 5px 12px; } .snippet-step, .snippet-lang { font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--fg3); text-transform: uppercase; } button.copy { margin-left: auto; font: 11px var(--sans); padding: 2px 10px; border: 1px solid var(--line); border-radius: 6px; background: var(--bg); color: var(--fg); cursor: pointer; } button.copy.copied { color: var(--green-fg); border-color: var(--green-fg); } figure.snippet pre { margin: 0; padding: 12px; font: 12.5px/1.5 var(--mono); overflow-x: auto; } pre:focus-visible { outline-offset: -2px; } /* doc.js makes overflowing blocks focusable; the figure clips an outer ring */ figure.snippet pre code { background: none; padding: 0; } figure.snippet-quarantined { border-color: var(--red-fg); } .var { background: var(--var-bg); border-bottom: 1px dashed var(--accent); border-radius: 3px; padding: 0 3px; color: var(--accent); } .var.filled { border-bottom-style: solid; } .snippet-output { margin: 0 0 14px; border: 1px solid var(--line); border-top: 0; border-radius: 0 0 8px 8px; background: var(--bg2); } .snippet-output-label { display: block; padding: 4px 12px 0; font-family: var(--mono); font-size: 10px; font-weight: 700; color: var(--fg3); text-transform: uppercase; user-select: none; } .snippet-output pre { margin: 0; padding: 6px 12px 10px; overflow-x: auto; font: 12px/1.5 var(--mono); color: var(--fg2); user-select: text; } /* ---- variables panel ---- */ .varspanel { border: 1px solid var(--line); border-radius: var(--r); padding: 12px 16px; background: var(--bg2); margin: 16px 0; } .varsgrid { display: flex; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .varsgrid label { font-family: var(--mono); font-size: 11px; color: var(--fg2); display: block; } .vardesc { font-weight: 400; color: var(--fg3); } .varsgrid input { display: block; border: 1px solid var(--line); border-radius: 6px; padding: 4px 8px; font: 12px var(--mono); margin-top: 2px; background: var(--bg); color: var(--fg); } .varsgrid input.invalid { border-color: var(--red-fg); } /* ---- run history ---- */ .runhistory { border-top: 1px solid var(--line2); margin-top: 24px; padding-top: 12px; } /* One row per run: a long note must not wrap the dot onto its own line. Overflow ellipsizes; the row's title= carries the full text. */ .runrow { font-family: var(--mono); font-size: 11px; color: var(--fg2); line-height: 1.9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rundot-green { color: var(--green-fg); } .rundot-red { color: var(--red-fg); } .rundot-gray { color: var(--gray-fg); } /* every maintenance receipt (reconciled/corrected/checked): not a failure — see outcomeDot */ .runmore summary { font-family: var(--mono); font-size: 11px; color: var(--accent); cursor: pointer; margin-top: 4px; } /* ---- activity: the runs ledger (internal/render/ledger.go) ---- .ledgernotice discloses that reads and refusals are absent because docpack never records them: load-bearing, not decoration. */ .ledgerstats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin: 18px 0 10px; } .ledgerstat { min-width: 0; border: 1px solid var(--line); border-radius: var(--r); padding: 12px 14px; background: var(--bg2); } .ledgerstat b { display: block; font: var(--head-weight) 27px/1.05 var(--head); letter-spacing: var(--head-track); color: var(--fg); } .ledgerstat b.tone-red { color: var(--red-fg); } .ledgerstat b.tone-gray { color: var(--fg2); } .ledgerstat span { display: block; margin-top: 5px; font: 10.5px/1.35 var(--mono); color: var(--fg3); } .ledgerbyline { font: 11px var(--mono); color: var(--fg3); margin: 0 0 16px; } /* A standing boundary of the design, not an incident — noted, not alarmed. */ .ledgernotice { display: block; border: 1px solid var(--line); border-left: 3px solid var(--amber-fg); border-radius: var(--r); background: var(--amber-bg); padding: 12px 15px; margin: 0 0 26px; } .ledgernotice b { display: block; font-size: 13.5px; color: var(--fg); margin-bottom: 3px; } .ledgernotice span { display: block; font-size: 12.5px; line-height: 1.55; color: var(--fg2); } .ledgerday { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; font-weight: 400; margin: 26px 0 0; padding-bottom: 7px; border-bottom: var(--rule-w) solid var(--line2); } .ledgerday b { font: 700 11px var(--mono); letter-spacing: .1em; text-transform: uppercase; color: var(--fg); } .ledgerday time, .ledgerday span { font: 11px var(--mono); color: var(--fg3); } .ledgerday span { margin-left: auto; } .ledgerlist, .ledgerrank { list-style: none; margin: 0; padding: 0; } .ledgerrow { display: grid; grid-template-columns: 14px minmax(0, 1fr) auto; column-gap: 9px; row-gap: 2px; align-items: baseline; padding: 11px 2px 12px; border-bottom: 1px solid var(--line2); } /* A real circle, not the ● glyph (a square in the default mono face at ~9px). The span keeps its text for copy/paste parity with .runrow, hence the indent-hidden text. */ .ledgerrow .rundot { align-self: start; width: 7px; height: 7px; margin-top: 7px; border-radius: 50%; background: currentColor; overflow: hidden; text-indent: -99px; } .ledgerhead { min-width: 0; font-size: 14px; line-height: 1.45; } .ledgerhead a { font-weight: 600; } .ledgerhead em { font-style: normal; color: var(--fg2); } .ledgermeta { justify-self: end; white-space: nowrap; font: 10.5px var(--mono); color: var(--fg3); } .ledgermeta i { font-style: normal; } /* opacity .75 here measured 3.2:1 */ .ledgersep { opacity: .5; } /* Notes run to ~1200 chars: three lines keep one verbose run from burying its neighbours; the full text stays in the row's title=. */ .ledgernote { grid-column: 2 / -1; margin: 3px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--fg2); display: -webkit-box; -webkit-line-clamp: 3; line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; } .ledgerranksec { margin-top: 34px; } .ledgerrank li { display: grid; grid-template-columns: minmax(0, 1fr) 34% 3.5ch; align-items: center; gap: 12px; padding: 7px 2px; border-bottom: 1px solid var(--line2); font-size: 13px; } .ledgerrank a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ledgerbar { height: 6px; border-radius: 3px; background: var(--line2); overflow: hidden; } .ledgerbar i { display: block; height: 100%; background: var(--accent); } .ledgercount { font: 11px var(--mono); color: var(--fg3); text-align: right; } .ledgerempty { font-size: 13.5px; color: var(--fg2); margin: 18px 0 26px; } /* ---- footer ---- */ .pagefoot { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; border-top: 1px solid var(--line2); margin-top: 20px; padding-top: 10px; font-size: 12px; color: var(--fg2); } .pagefoot-actions { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; } .pagefoot button { font: 12px var(--sans); border: none; background: none; color: var(--accent); cursor: pointer; padding: 0; } .pagefoot button:hover { text-decoration: underline; } .built, .machines { font-family: var(--mono); font-size: 11px; color: var(--fg3); } .flagform { display: none; gap: 6px; align-items: center; } .flagform.open { display: inline-flex; } .flagform input { font: 12px var(--sans); border: 1px solid var(--line); border-radius: 6px; padding: 2px 8px; width: 220px; background: var(--bg); color: var(--fg); } .copied { color: var(--green-fg); font-family: var(--mono); font-size: 11px; } /* ---- palette ---- */ /* An input in the header whose results hang under it as an anchored dropdown (no scrim; doc.js handles dismissal). Each result is a link carrying role=option itself: an option's children are presentational, so nothing interactive may sit inside one. */ .topbar-search { position: relative; display: flex; align-items: center; gap: 6px; width: min(460px, 42vw); padding: 0 10px; border: 1px solid var(--line); border-radius: 8px; background: var(--bg2); cursor: text; } .topbar-search:focus-within { border-color: var(--accent); } .topbar-search .icon-search { display: inline-flex; flex: none; color: var(--fg2); } #palette-input { flex: 1 1 auto; min-width: 0; border: none; background: none; outline: none; padding: 7px 0; font: 13px var(--sans); color: var(--fg); } #palette-input::placeholder { color: var(--fg2); opacity: 1; } /* UA default measured 4.12:1 */ #palette-input::-webkit-search-cancel-button { filter: invert(.5); } #palette { position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 50; background: var(--bg); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 20px 60px rgba(0,0,0,.35); } #palette-results { margin: 0; padding: 6px; max-height: 50vh; overflow-y: auto; } #palette-results a { display: block; padding: 8px 10px; border-radius: 6px; color: var(--fg); } #palette-results a.sel, #palette-results a:hover { background: var(--bg2); } #palette-empty { padding: 14px 16px; color: var(--fg2); } #palette-results .r-title { font-weight: 600; } #palette-results .r-heading { color: var(--fg2); font-size: 12px; margin-left: 6px; } #palette-results .r-copy { float: right; font: 11px var(--sans); background: var(--bg2); border: 1px solid var(--line); border-radius: 5px; cursor: pointer; color: var(--fg); padding: 1px 8px; } #palette-results .r-text { display: block; color: var(--fg2); font-size: 12px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* ---- embedded media: self-hosted