/* ============================================================ Cost of Thought · Radio — styles.css Hand-written, no framework. Target: < 500 lines. All rules scoped under .cot so they don't collide with costofthought.org globals when this output is embedded there. ============================================================ */ /* ---- design tokens — GEORGIA LIGHT, FLORIDA WATER (2026-06 revamp) ---- Verbatim from the Claude Design handoff (design_handoff_site_revamp/ cot-tokens.css), fonts @import stripped (pages fonts in ), :root widened to ":root, .cot" so every existing .cot-scoped selector and body.cot-page resolves. Values are the design system's; do not hand-edit — re-splice from the handoff on the next design revision. */ /* ===== tokens/fonts.css ===== */ /* ============================================================ Cost of Thought — webfonts All four families are served from Google Fonts. The @import below pulls their @font-face rules into the styles.css closure so consumers get them by linking the single root stylesheet. Newsreader — the host's voice (serif, optical sizing) EB Garamond — extended / quoted prose (serif) Inter — interface chrome, labels, nav (sans) JetBrains Mono — data, metadata, tool names, code (mono) ============================================================ */ /* ===== tokens/colors.css ===== */ /* ============================================================ Cost of Thought — color tokens GEORGIA LIGHT, FLORIDA WATER. A forest you walk through in the sun: the greens painted from the LIT side of the leaf (not the shadow), warmed by a real sunset — marigold, ember, clay — for everything that is neither green nor blue. The ocean (Florida deep water) is spent rarely: a single cool glint at the budget's deep end, the shore you drain toward. Forest is home; the sunset is the warmth in the air; the ocean is the rare reward. Promoted 2026-06-11 from the "Brighter greens + sunset & clay" study (see v0-archive/georgia-light-florida-water.html), every color sampled from Alex's own photographs of Georgia (Piedmont Park, backlit canopy) and Florida (offshore, sunset on the line). ACCESSIBILITY — every value contrast-audited (WCAG 2.1) against the three light grounds (--bg #fcfcf6, --paper #fff, --loam #ebe8d6): body/UI text tokens pass AA or AAA; faint tokens pass AA (data-faint, ink-faint, data-soft) or AA-large (ink-very-faint, non-essential labels only). --live and --warn pass as graphic / large-text marks; the blue pulse dot (--ocean) is AAA on every ground. --leaf (the sunlit-leaf glint) and --quote-rule (the gold rule) are FILL / LARGE / DECORATIVE only — never body text. The prior "Birch & bark" palette this replaced is recorded in readme.md. ============================================================ */ :root, .cot { /* ---- paper & bark ink — the voice register ---------------- Paper that still remembers the forest: a light warm-white, lifted so the page feels crisp (white text fails on it — a good contrast sign), with white cards that nearly-but-never dissolve into it. */ --bg: #fcfcf6; /* warm paper floor — everything sits on it */ --paper: #ffffff; /* card / raised birch-bright surface */ --ink: #16180f; /* bark near-black — primary prose (AAA) */ --ink-soft: #3b4031; /* secondary prose, links (AAA) */ --ink-faint: #615f4f; /* captions, asides (AA) */ --ink-very-faint: #7d7a66; /* empty states, hairline labels (AA-large; non-essential) */ /* ---- data ramp (forest, lit) — the substrate register ------ The recorded woods, lifted off the shadow floor toward the sun but kept dark enough for type. Metadata, counts, tool output. */ --data: #2b4a30; /* AAA */ --data-soft: #4d6a4a; /* AA on every ground */ --data-faint: #586d50; /* AA on every ground — small mono labels */ /* ---- rules & grounds -------------------------------------- */ --rule: #e6e4d3; /* hairline divider */ --rule-soft: #f0eee0; /* faintest divider / inset fill */ --ground-warm: #f0ead8; /* a sunlit clearing — warm call-to-action wash */ --ground-cool: #eef0ea; /* a cool hollow — the host's frame wash */ --loam: #ebe8d6; /* the forest floor — deeper ground for RAISED panels (layered depth: page = birch, panel = loam, card = paper) */ /* ---- the sunlit greens — life in the leaf ------------------ The bright side of the canopy. --leaf is the glint: sunlight transmitted through a leaf. FILL / LARGE / glint only — never body text. */ --leaf: #9bc53d; /* sunlit-leaf glint — decorative spark, fills/large only */ /* ---- the sunset accents (spent when something is in motion) Pulled from a real sunset: marigold light, an ember glow, a clay that grounds them. The ember and gold are for the respond voice and large labels, not body prose. (The live PULSE is no longer ember — it is --ocean now; see below.) */ --live: #c56f26; /* respond voice, caret, warm marks (large/graphic) */ --quote-rule: #b58a3e; /* predecessor-memory left rule, dappled gold (rule/large) */ --warn: #a84a24; /* hallucinated tool marker, clay-rust (AA) */ /* ---- the ocean — the pulse (felt, not seen) --------------- Florida deep water. The decision (2026-06-11): blue is the system's HEARTBEAT, not a budget color. Every live / status pulse dot is --ocean (the Eyebrow dot, the "on the air" mark) — small, blinking, present on every page, never dominant. The budget gauge is all-forest now; blue stays out of it. The single cool note; AAA as a figure, never recolors body prose. --ocean-deep is held in reserve for deep-water surfaces. */ --ocean: #26527f; --ocean-deep: #1d3a57; /* deepest Florida navy — reserve, deep-water surfaces */ /* ---- links ------------------------------------------------- */ --link: #3b4031; --link-hover: #16180f; /* ============================================================ ACTION-MODE PALETTE The signature: each color names what the host was *doing* during a span of tokens — a path through the lit woods. Sunlit greens for intake and persistence, sunset warmth for output, clay for the hallucinated. These are chord/gauge FILLS and legend swatches (not body text), so they read as the woods and the sunset, not as accessible type. ============================================================ */ --mode-list: #aab09c; /* list_memory — pale lichen, neutral utility */ --mode-read-mem: #5a8a76; /* read_memory — lit sage (intake) */ --mode-read-lib: #b78a3e; /* read_library — lit dappled gold (intake) */ --mode-reflect: #7a3d50; /* reflect — deep wine, "ink on aged bark" */ --mode-respond: #c56f26; /* respond — ember (== --live) */ --mode-write: #6f8a4f; /* note — sunlit moss (persist) */ --mode-listener: #5aa033; /* listener message — sunlit fern */ --mode-warn: #a84a24; /* hallucinated tool — clay-rust (== --warn) */ /* ============================================================ CELL IDENTITY The six experiment cells, shaded by how FULL each condition is: more frame + more library = deeper forest (more to think with). The shade is the cell's name — reused on the condition grid, the position map, and the index. "You are here" is ringed, never recolored, so the marker sits on top of the identity. Fills only (small dots / tiles), not text. Frame is weighted heavier than library, so they step cleanly 1 → 6 (deepest → lightest). */ --cell-1: #1f3a23; /* full frame · library present — fullest */ --cell-2: #2b4a30; /* full frame · library absent */ --cell-3: #3f7d33; /* no library refs · present */ --cell-4: #4f8a37; /* no library refs · absent */ --cell-5: #6fb33a; /* bare frame · present */ --cell-6: #9bc53d; /* bare frame · absent — barest */ /* ---- semantic aliases ------------------------------------- */ --text-body: var(--ink); --text-muted: var(--ink-soft); --text-faint: var(--ink-faint); --text-data: var(--data); --surface-page: var(--bg); --surface-card: var(--paper); --surface-raised: var(--loam); --surface-inset: var(--rule-soft); --border-hairline:var(--rule); } /* ===== tokens/typography.css ===== */ /* ============================================================ Cost of Thought — typography tokens Three registers. Serif (Newsreader) is the host's voice and carries all prose + titles. Sans (Inter) is interface chrome — nav, labels, section heads. Mono (JetBrains) is data: counts, metadata, tool names, timestamps. The contrast between serif prose and mono data is the core typographic idea. ============================================================ */ :root, .cot { /* ---- families --------------------------------------------- */ --font-host: 'Newsreader', Georgia, serif; /* the voice */ --font-ext: 'EB Garamond', Georgia, serif; /* quoted / extended prose */ --font-sans: 'Inter', -apple-system, BlinkMacSystemFont, sans-serif; /* chrome */ --font-mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, monospace; /* data */ /* ---- type scale (px; the system runs on a 18px serif body) - */ --text-2xs: 10.5px; /* hairline mono labels, legends */ --text-xs: 11.5px; /* eyebrows, uppercase sans labels */ --text-sm: 13px; /* nav, meta, captions */ --text-mono: 12.5px; /* breadcrumbs, code, tool detail */ --text-base: 16px; /* summaries, secondary prose */ --text-body: 18px; /* primary serif body */ --text-lg: 22px; /* finding titles, budget values, session ids */ --text-xl: 32px; /* hero / page titles */ --text-2xl: 44px; /* display */ /* ---- weights ---------------------------------------------- */ --weight-normal: 400; --weight-medium: 500; --weight-semi: 600; /* ---- line heights ----------------------------------------- */ --leading-tight: 1.3; /* titles */ --leading-snug: 1.5; /* decks */ --leading-body: 1.55; /* prose */ --leading-loose: 1.7; /* lists */ /* ---- tracking --------------------------------------------- */ --track-title: -0.01em; /* large serif titles, optical tightening */ --track-tight: -0.005em; --track-label: 0.06em; /* uppercase sans labels */ --track-eyebrow:0.08em; /* eyebrows, strip titles */ --track-wide: 0.18em; /* the most spaced-out disclosure labels */ --track-mono: 0.02em; /* mono metadata */ } /* ===== tokens/spacing.css ===== */ /* ============================================================ Cost of Thought — spacing, radii, shadows, layout The system is print-like: generous whitespace, hairline rules instead of heavy borders, very small radii, almost no shadow. Nothing floats; surfaces are defined by 1px rules and ground color, not by elevation. ============================================================ */ :root, .cot { /* ---- spacing scale (px) ----------------------------------- */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 24px; --space-8: 32px; --space-10: 40px; --space-12: 48px; --space-14: 56px; --space-16: 64px; --space-20: 80px; --space-24: 96px; /* ---- radii — kept tiny; this is paper, not plastic -------- */ --radius-xs: 1px; /* chord segments */ --radius-sm: 2px; /* gauge bar, inline tags */ --radius-md: 3px; /* cards, inset fills, buttons */ --radius-lg: 4px; /* host section grounds */ /* ---- borders ---------------------------------------------- */ --border-width: 1px; /* ---- shadow — used almost never. A single quiet lift. ----- */ --shadow-none: none; --shadow-card: 0 1px 2px rgba(28, 28, 26, 0.04); /* ---- layout widths ---------------------------------------- */ --measure-prose: 64ch; /* readable prose column */ --container-text: 760px; /* article / reading container */ --container-wide: 1080px; /* homepage / dashboard container */ --gutter: 40px; /* container side padding */ /* ---- motion — short, eased, never bouncy ------------------ */ --ease-standard: cubic-bezier(.4, 0, .2, 1); /* @kind other */ --dur-fast: 120ms; /* @kind other */ /* hover / link transitions */ --dur-mid: 320ms; /* @kind other */ /* card + segment entrances */ --dur-slow: 1800ms; /* @kind other */ /* gauge drain */ } /* ===== tokens/base.css ===== */ /* ============================================================ Cost of Thought — base element styling The brand scopes its product CSS under `.cot` so it can be embedded into costofthought.org without colliding. We keep that scope as the canonical surface wrapper: wrap any screen in
(or ) to get the warm-paper ground, serif body, and link treatment. ============================================================ */ body.cot-page { margin: 0; background: var(--bg); } .cot, .cot *, .cot *::before, .cot *::after { box-sizing: border-box; } .cot { color: var(--ink); background: var(--bg); min-height: 100vh; font-family: var(--font-host); font-size: var(--text-body); line-height: var(--leading-body); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } /* Wide content scrolls inside its own wrapper; the page never pans. */ html { overflow-x: hidden; overflow-x: clip; } .cot a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color var(--dur-fast), border-color var(--dur-fast); } .cot a:hover { color: var(--link-hover); border-bottom-color: var(--ink-soft); } .cot em { font-style: italic; } /* ---- site bar (top chrome) --------------------------------- */ .cot .site-bar { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-sans); font-size: var(--text-sm); } .cot .site-title { color: var(--ink); font-weight: 500; border-bottom: none; letter-spacing: -0.01em; } .cot .site-nav { display: flex; gap: 24px; } .cot .site-nav a { color: var(--ink-soft); border-bottom: none; } .cot .site-nav a:hover, .cot .site-nav a.current { color: var(--ink); } .cot .site-nav a.current { font-weight: 500; } /* ---- containers -------------------------------------------- */ .cot .container { max-width: var(--container-text); margin: 0 auto; padding: 56px 40px 96px; } .cot .container-wide { max-width: var(--container-wide); margin: 0 auto; padding: 56px 40px 96px; } /* ---- breadcrumb -------------------------------------------- */ .cot .breadcrumb { font-family: var(--font-mono); font-size: var(--text-mono); color: var(--data-soft); letter-spacing: 0.02em; margin-bottom: 40px; } .cot .breadcrumb a { border-bottom: none; color: var(--data-soft); } .cot .breadcrumb a:hover { color: var(--ink); } /* ---- reset / base ------------------------------------------- */ .cot, .cot *, .cot *::before, .cot *::after { box-sizing: border-box; } .cot { color: var(--ink); background: var(--bg); min-height: 100vh; font-family: var(--font-host); font-size: 18px; line-height: 1.55; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } body.cot-page { margin: 0; background: var(--bg); } /* Never allow sideways page panning: wide content (e.g. the measurements table) must scroll inside its own wrapper, not swipe the page around. `hidden` is the fallback where `clip` is unsupported. */ html { overflow-x: hidden; overflow-x: clip; } .cot a { color: var(--link); text-decoration: none; border-bottom: 1px solid var(--rule); transition: color .12s, border-color .12s; } .cot a:hover { color: var(--link-hover); border-bottom-color: var(--ink-soft); } .cot em { font-style: italic; } /* ---- site bar ----------------------------------------------- */ .cot .site-bar { background: var(--paper); border-bottom: 1px solid var(--rule); padding: 14px 32px; display: flex; align-items: center; justify-content: space-between; font-family: var(--font-sans); font-size: 13px; } .cot .site-title { color: var(--ink); font-weight: 500; border-bottom: none; letter-spacing: -0.01em; } .cot .site-nav { display: flex; gap: 24px; } .cot .site-nav a { color: var(--ink-soft); border-bottom: none; } .cot .site-nav a:hover, .cot .site-nav a.current { color: var(--ink); } .cot .site-nav a.current { font-weight: 500; } /* revamp TopBar: brand lockup with the mono ocean tag; wrap-safe on phones */ .cot .site-bar { flex-wrap: wrap; row-gap: 8px; } .cot .site-title { display: inline-flex; align-items: baseline; gap: 7px; } .cot .site-title .site-tag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.14em; color: var(--ocean); font-weight: 400; } .cot .site-nav { flex-wrap: wrap; } /* ---- container ---------------------------------------------- */ .cot .container { max-width: 760px; margin: 0 auto; padding: 56px 40px 96px; } .cot .breadcrumb { font-family: var(--font-mono); font-size: 12.5px; color: var(--data-soft); letter-spacing: 0.02em; margin-bottom: 40px; } .cot .breadcrumb a { border-bottom: none; color: var(--data-soft); } .cot .breadcrumb a:hover { color: var(--ink); } /* ---- session head (2026-06 revamp: design Session.html header) ---- */ .cot .session-head { border-bottom: 1px solid var(--rule); padding-bottom: 36px; margin-bottom: 48px; } .cot .session-head-row { display: flex; align-items: baseline; justify-content: space-between; gap: 16px 24px; flex-wrap: wrap; margin-bottom: 18px; } .cot .session-id { font-family: var(--font-host); font-weight: 500; font-size: 38px; letter-spacing: -0.016em; color: var(--ink); margin: 0; } .cot .session-date { font-family: var(--font-mono); font-size: 15px; font-weight: 400; letter-spacing: 0.02em; color: var(--data-faint); margin-left: 14px; white-space: nowrap; } .cot .session-meta { font-family: var(--font-mono); font-size: 11.5px; color: var(--data-soft); display: flex; flex-direction: column; align-items: flex-end; gap: 4px; margin: 0; } .cot .session-meta > div { white-space: nowrap; } .cot .session-meta dt { display: inline; font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--data-faint); margin-right: 6px; } .cot .session-meta dd { display: inline; margin: 0; color: var(--data); font-variant-numeric: tabular-nums; } /* ---- budget block (start + end) ----------------------------- */ .cot .budget { font-family: var(--font-mono); display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 16px 0; } .cot .budget-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--data-soft); } .cot .budget-value { font-size: 22px; font-weight: 500; color: var(--data); font-variant-numeric: tabular-nums; } .cot .budget-unit { font-size: 12px; color: var(--data-soft); } .cot .budget-pool { font-family: var(--font-sans); font-style: italic; font-size: 13px; color: var(--ink-soft); flex-basis: 100%; margin-top: 2px; } .cot .budget-pool .budget-pool-pct { font-family: var(--font-mono); font-style: normal; color: var(--data); font-variant-numeric: tabular-nums; font-weight: 500; } /* ---- turn --------------------------------------------------- */ .cot .turn { margin-bottom: 56px; } .cot .turn-head { margin-bottom: 32px; } .cot .turn-id { font-family: var(--font-sans); font-weight: 500; font-size: 12px; color: var(--data-soft); letter-spacing: 0.06em; text-transform: uppercase; margin: 0 0 8px; } .cot .turn-meta { font-family: var(--font-mono); font-size: 13px; color: var(--data-soft); display: flex; gap: 12px; align-items: baseline; } .cot .turn-time { color: var(--data); } .cot .turn-trigger { background: var(--rule-soft); padding: 2px 8px; border-radius: 2px; color: var(--data); font-size: 12px; } .cot .turn-listener { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; color: var(--ink-faint); font-style: italic; } .cot .turn-listener.message { font-style: normal; color: var(--ink); background: var(--rule-soft); padding: 12px 16px; border-radius: 3px; font-family: var(--font-host); font-size: 16px; line-height: 1.5; } .cot .turn-listener.message::before { content: "listener"; display: block; font-family: var(--font-sans); font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-faint); margin-bottom: 6px; } /* ---- actions list ------------------------------------------- */ .cot .turn-actions { display: flex; flex-direction: column; gap: 32px; } /* ---- api call header ---------------------------------------- */ .cot .call-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; font-family: var(--font-mono); font-size: 13px; color: var(--data-soft); margin-bottom: 12px; } .cot .call-num { font-size: 12px; color: var(--data-soft); font-variant-numeric: tabular-nums; letter-spacing: 0.02em; } .cot .call-tools code { font-family: var(--font-mono); font-size: 13px; color: var(--data); background: transparent; padding: 0; } .cot .call-tools { display: inline-flex; align-items: baseline; gap: 8px; white-space: nowrap; flex-wrap: wrap; } .cot .parallel-tag { font-size: 12px; color: var(--data-soft); letter-spacing: 0.02em; } .cot .hallucinated-tag{ color: var(--warn); font-size: 12px; letter-spacing: 0.02em; margin-left: 4px; font-weight: 500; } /* ---- collapsible call detail ------------------------------- */ .cot details.detail { margin: 0 0 14px; } .cot details.detail > summary { font-family: var(--font-mono); font-size: 12.5px; color: var(--data-soft); cursor: pointer; list-style: none; letter-spacing: 0.02em; user-select: none; padding: 4px 0; } .cot details.detail > summary::-webkit-details-marker { display: none; } .cot details.detail > summary::before { content: "▸ "; color: var(--data-faint); margin-right: 4px; } .cot details.detail[open] > summary::before { content: "▾ "; } .cot details.detail dl { font-family: var(--font-mono); font-size: 12px; color: var(--data-soft); background: var(--rule-soft); padding: 12px 16px; border-radius: 3px; margin: 6px 0 0; } .cot details.detail dl > div { display: flex; gap: 16px; padding: 2px 0; } .cot details.detail dt { color: var(--data-faint); min-width: 90px; } .cot details.detail dd { margin: 0; color: var(--data); font-variant-numeric: tabular-nums; } /* ---- read results: predecessor memory frame ---------------- */ .cot .read-result { position: relative; padding: 4px 0 4px 20px; margin-bottom: 24px; border-left: 2px solid var(--quote-rule); } .cot .read-result:last-child { margin-bottom: 0; } .cot .quoted-meta { font-family: var(--font-sans); font-size: 13px; color: var(--data-soft); margin-bottom: 12px; display: flex; gap: 12px; align-items: baseline; flex-wrap: wrap; } .cot .quoted-kind { text-transform: uppercase; letter-spacing: 0.06em; color: var(--ink); font-weight: 500; font-size: 12px; } .cot .quoted-author { color: var(--ink-soft); } .cot .quoted-link { margin-left: auto; font-size: 12px; color: var(--data-soft); border-bottom: none; letter-spacing: 0.02em; } .cot .quoted-link:hover { color: var(--ink); } /* quoted host content — host serif, slightly smaller than primary */ .cot .quoted-prose { font-family: var(--font-host); font-size: 16.5px; line-height: 1.55; color: var(--ink); } .cot .quoted-prose p { margin: 0 0 0.85em; } .cot .quoted-prose p:last-child { margin-bottom: 0; } /* quoted note variant — smaller, soft ink */ .cot .quoted-prose.note { font-size: 15.5px; color: var(--ink-soft); } /* session-log reference (no inline content — link out) */ .cot .read-result.session-ref .session-summary { font-family: var(--font-sans); font-size: 13px; color: var(--ink-soft); display: flex; gap: 16px; align-items: baseline; flex-wrap: wrap; } .cot .read-result.session-ref .session-summary .stat { font-family: var(--font-mono); font-size: 12px; color: var(--ink-faint); } /* ---- library passage (external source) --------------------- */ /* native
so the passage can be collapsed; default open. */ .cot details.library-passage { background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 28px 32px; margin: 8px 0; } .cot details.library-passage > summary { list-style: none; cursor: pointer; user-select: none; font-family: var(--font-ext); font-style: italic; font-size: 14.5px; color: var(--ink-soft); text-align: center; position: relative; padding: 0 100px; } .cot details.library-passage > summary::-webkit-details-marker { display: none; } .cot details.library-passage > summary em { font-style: italic; } .cot details.library-passage > summary .lib-attribution { color: var(--ink-faint); } .cot details.library-passage > summary .lib-attribution::before { content: " · "; margin: 0 4px; } .cot details.library-passage > summary .collapse-marker { position: absolute; right: 0; top: 50%; transform: translateY(-50%); font-family: var(--font-mono); font-style: normal; font-size: 10px; color: var(--ink-very-faint); letter-spacing: 0.06em; } .cot details.library-passage > summary .collapse-marker::before { content: "▾ collapse"; } .cot details.library-passage:not([open]) > summary .collapse-marker::before { content: "▸ expand"; } .cot details.library-passage > .library-prose, .cot details.library-passage > .library-foot { margin-top: 24px; } .cot .library-prose { font-family: var(--font-ext); font-size: 18.5px; line-height: 1.6; color: var(--ink); } .cot .library-prose p { margin: 0 0 1.1em; } .cot .library-prose p:last-child { margin-bottom: 0; } .cot .library-prose .unit-num { font-family: var(--font-ext); font-style: italic; color: var(--ink-faint); font-size: 14px; margin-right: 0.4em; vertical-align: 1px; } .cot .library-foot { text-align: center; padding-top: 16px; font-family: var(--font-sans); font-size: 11px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); border-top: 1px solid var(--rule-soft); } .cot .library-foot a { border-bottom: none; color: var(--ink-faint); } .cot .library-foot a:hover { color: var(--ink); } /* ---- write actions: reflection / note / respond ------------ */ .cot .reflection-block { margin: 4px 0; } /* legitimate reflect call — host writing in this turn. Quiet uppercase header + mono filename. No frame, no rule. */ .cot .reflection-block .write-meta { display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px; } .cot .reflection-block .write-meta .write-kind { font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink); font-weight: 500; } .cot .reflection-block .write-meta .write-meta-sub { font-family: var(--font-mono); font-size: 11px; color: var(--data-faint); letter-spacing: 0.02em; } .cot .reflection-block .write-meta .write-meta-sub a { color: var(--data-soft); border-bottom: 1px solid transparent; } .cot .reflection-block .write-meta .write-meta-sub a:hover { color: var(--data); border-bottom-color: var(--data-faint); } .cot .reflection-prose { font-family: var(--font-host); font-size: 19px; line-height: 1.6; color: var(--ink); } .cot .reflection-prose p { margin: 0 0 1em; } .cot .reflection-prose p:last-child { margin-bottom: 0; } .cot .reflection-prose strong { font-weight: 500; font-variant: small-caps; letter-spacing: 0.02em; } /* note (written by host, not quoted from a predecessor) */ .cot .note-block { padding-left: 20px; border-left: 1px solid var(--rule); margin: 4px 0; } .cot .note-prose { font-family: var(--font-host); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } .cot .note-prose p { margin: 0 0 0.8em; } /* respond — italic, voiced */ .cot .respond-block { margin: 4px 0; } .cot .respond-prose { font-family: var(--font-host); font-style: italic; font-size: 17.5px; line-height: 1.55; color: var(--ink); } .cot .respond-prose p { margin: 0 0 0.9em; } .cot .respond-prose .recovered-marker { font-style: normal; font-family: var(--font-mono); font-size: 10.5px; color: var(--ink-faint); letter-spacing: 0.06em; text-transform: uppercase; display: inline-block; vertical-align: 1px; margin: 0 4px; } /* ---- thought: the host's thinking before each call ---------- */ /* The cost-of-thought treatment made visible: thinking blocks from the raw completion store, rendered ahead of the call's tool content. Distinct from reflection (a deliberate written act) — thought is process, so it sits smaller, italic, behind a dotted rule. */ .cot .call-thought { margin: 4px 0 14px; padding-left: 20px; border-left: 2px dotted var(--rule); } .cot .call-thought .thought-label { display: block; font-family: var(--font-sans); font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--ink-soft); font-weight: 500; margin-bottom: 6px; } .cot .thought-prose { font-family: var(--font-host); font-style: italic; font-size: 15px; line-height: 1.55; color: var(--ink-soft); } .cot .thought-prose p { margin: 0 0 0.8em; } .cot .thought-prose p:last-child { margin-bottom: 0; } /* Playback condense: a thought surfaces whole and sharpens into focus — it is not typed left-to-right like authored prose. The engine sets --condense-ms per paragraph (scaled to length) and staggers delays. */ .cot .thought-condense { opacity: 0.07; filter: blur(7px); } .cot .thought-condense.is-clear { opacity: 1; filter: blur(0); transition: opacity var(--condense-ms, 1600ms) ease-out, filter var(--condense-ms, 1600ms) ease-out; } @media (prefers-reduced-motion: reduce) { .cot .thought-condense, .cot .thought-condense.is-clear { opacity: 1; filter: none; transition: none; } } /* Page-level provenance note for thinking text — rendered once, under the transport, on any session page that shows thought. */ .cot .thought-provenance { margin: 14px 0 0; font-family: var(--font-sans); font-size: 12.5px; line-height: 1.55; color: var(--ink-soft); } .cot .thought-provenance a { color: var(--ink-soft); border-bottom: 1px solid var(--rule); } .cot .thought-provenance a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); } /* ---- hallucinated content marker --------------------------- */ .cot .hallucinated-content { border-left: 2px solid var(--warn); background: #faefea; /* warm-paper shifted toward terra */ padding: 18px 22px 18px 24px; border-radius: 0 3px 3px 0; margin: 4px 0; } .cot .hallucinated-content .content-note { font-family: var(--font-sans); font-size: 12px; text-transform: uppercase; letter-spacing: 0.06em; color: var(--warn); margin-bottom: 18px; display: flex; flex-direction: column; gap: 5px; font-weight: 500; } .cot .hallucinated-content .note-sub { text-transform: none; letter-spacing: 0.01em; color: var(--ink-soft); font-size: 13px; font-weight: 400; } .cot .hallucinated-content .note-sub code { font-family: var(--font-mono); font-size: 12px; color: var(--ink); } .cot .hallucinated-content .reflection-prose { color: var(--ink); } .cot .truncation-marker { font-family: var(--font-mono); font-size: 12px; color: var(--data-soft); text-transform: uppercase; letter-spacing: 0.04em; margin-top: 0.8em; } /* ---- turn footer: cost + terminator ------------------------ */ .cot .turn-foot { margin-top: 40px; padding-top: 20px; border-top: 1px solid var(--rule); display: flex; flex-direction: column; gap: 12px; } .cot .turn-cost { font-family: var(--font-sans); font-size: 13px; color: var(--data); } .cot .turn-cost strong { font-weight: 500; font-variant-numeric: tabular-nums; } .cot .terminator { font-family: var(--font-mono); font-size: 13px; color: var(--data-soft); } .cot .terminator code { font-family: var(--font-mono); color: var(--data); font-weight: 500; } .cot .terminator.chain-cap { color: var(--warn); } .cot .terminator.chain-cap code { color: var(--warn); } /* ---- session footer: total + ending budget + nav ----------- */ .cot .session-foot { border-top: 1px solid var(--rule); padding-top: 36px; margin-top: 56px; } /* ---- session summary graphic ---- */ .cot .session-summary { margin-bottom: 36px; } .cot .session-summary .summary-head { margin-bottom: 18px; font-family: var(--font-sans); } .cot .session-summary .summary-title { font-size: 12px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--data-soft); font-weight: 500; } /* anchors above the bar — start on left, remaining on right */ .cot .session-summary .summary-anchors { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 8px; font-family: var(--font-sans); } .cot .session-summary .anchor { display: flex; flex-direction: column; line-height: 1.2; } .cot .session-summary .anchor.anchor-end { align-items: flex-end; text-align: right; } .cot .session-summary .anchor-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--data-soft); margin-bottom: 5px; } .cot .session-summary .anchor-num { font-family: var(--font-mono); font-size: 22px; font-weight: 500; font-variant-numeric: tabular-nums; color: var(--ink); letter-spacing: -0.005em; } .cot .session-summary .anchor-pct { font-family: var(--font-mono); font-size: 11px; color: var(--data-soft); letter-spacing: 0.02em; margin-top: 2px; } /* the bar — full width, height 14px, segments by action-mode */ .cot .session-summary .summary-bar { display: flex; height: 14px; border-radius: 1px; overflow: visible; /* visible for tooltips */ background: var(--rule-soft); border: 1px solid var(--rule); position: relative; } .cot .session-summary .summary-bar .seg { height: 100%; border-right: 1px solid rgba(255,255,255,0.4); position: relative; cursor: help; transition: filter .12s; } .cot .session-summary .summary-bar .seg:last-child { border-right: none; } .cot .session-summary .summary-bar .seg.list { background: var(--mode-list); } .cot .session-summary .summary-bar .seg.read-mem { background: var(--mode-read-mem); } .cot .session-summary .summary-bar .seg.read-lib { background: var(--mode-read-lib); } .cot .session-summary .summary-bar .seg.reflect { background: var(--mode-reflect); } .cot .session-summary .summary-bar .seg.respond { background: var(--mode-respond); } .cot .session-summary .summary-bar .seg.write { background: var(--mode-write); } .cot .session-summary .summary-bar .seg.listener { background: var(--mode-listener); } .cot .session-summary .summary-bar .seg.warn { background: repeating-linear-gradient(135deg, var(--warn) 0 4px, #c46b3f 4px 8px); } .cot .session-summary .summary-bar .seg.unspent { background: transparent; border-left: 1px dashed var(--data-faint); cursor: default; } /* enable hover tooltip on unspent segment too — it has data attrs so the same ::after/::before machinery works. Hidden until hover. */ .cot .session-summary .summary-bar .seg.unspent { cursor: help; } .cot .session-summary .summary-bar .seg.unspent:hover { filter: none; } /* tooltip on hover — pure CSS, attribute-driven. display:none while idle: the nowrap boxes would otherwise sit in layout at opacity 0 and widen the page past the viewport on narrow screens (a11y gate: zero horizontal overflow). The display/opacity transition pair keeps the fade where allow-discrete is supported; elsewhere the tooltip simply appears instantly. */ .cot .session-summary .summary-bar .seg::after { content: attr(data-tool) " · " attr(data-tokens) " tokens · " attr(data-pct); display: none; position: absolute; bottom: calc(100% + 10px); left: 50%; transform: translateX(-50%); white-space: nowrap; background: var(--ink); color: #faf9f6; padding: 5px 10px; border-radius: 2px; font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.01em; pointer-events: none; z-index: 10; opacity: 0; transition: opacity .12s, display .12s allow-discrete; } .cot .session-summary .summary-bar .seg::before { content: ""; display: none; position: absolute; bottom: calc(100% + 4px); left: 50%; transform: translateX(-50%); border: 6px solid transparent; border-top-color: var(--ink); z-index: 10; opacity: 0; transition: opacity .12s, display .12s allow-discrete; pointer-events: none; } .cot .session-summary .summary-bar .seg:hover::after, .cot .session-summary .summary-bar .seg:hover::before { display: block; opacity: 1; } @starting-style { .cot .session-summary .summary-bar .seg:hover::after, .cot .session-summary .summary-bar .seg:hover::before { opacity: 0; } } /* segs near the bar's edges (renderer sets tip-start/tip-end when a seg's center falls in the outer 18%) anchor the tooltip inward so it stays on-screen; the arrow stays centered on the seg itself. */ .cot .session-summary .summary-bar .seg.tip-start::after { left: 0; transform: none; } .cot .session-summary .summary-bar .seg.tip-end::after { left: auto; right: 0; transform: none; } .cot .session-summary .summary-bar .seg.unspent::after, .cot .session-summary .summary-bar .seg.unspent::before { /* tooltip enabled */ } /* consumed callout below the bar — warm-toned to tie to consumption */ .cot .session-summary .summary-consumed { margin-top: 14px; font-family: var(--font-sans); font-size: 13px; display: flex; align-items: baseline; gap: 8px; color: var(--ink-soft); } .cot .session-summary .summary-consumed .consumed-num { font-family: var(--font-mono); font-weight: 500; font-variant-numeric: tabular-nums; font-size: 15px; color: var(--mode-reflect); /* warm gold/brown — visually "consumed" */ letter-spacing: -0.005em; } .cot .session-summary .summary-consumed .consumed-label { color: var(--ink-soft); } .cot .session-summary .summary-consumed .consumed-pct { font-family: var(--font-mono); font-size: 12px; color: var(--mode-reflect); font-variant-numeric: tabular-nums; margin-left: 2px; } /* bar foot — small action-mode legend */ .cot .session-summary .summary-bar-foot { display: flex; flex-wrap: wrap; gap: 8px 22px; margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 12.5px; color: var(--data-soft); letter-spacing: 0.01em; line-height: 1.5; } .cot .session-summary .summary-bar-foot .item { display: inline-flex; align-items: center; gap: 8px; } .cot .session-summary .summary-bar-foot .sw { display: inline-block; width: 14px; height: 8px; border-radius: 1px; flex: 0 0 auto; } .cot .session-summary .summary-bar-foot .item.warn .sw { background: repeating-linear-gradient(135deg, var(--warn) 0 3px, #c46b3f 3px 6px); } .cot .session-summary .summary-bar-foot .item.unspent .sw { background: var(--rule-soft); border: 1px dashed var(--data-soft); } .cot .session-summary .summary-bar-foot .toks { color: var(--ink); font-variant-numeric: tabular-nums; font-weight: 500; } /* ---- outcome chip ---- */ .cot .session-outcome { margin-top: 24px; padding: 14px 18px; border: 1px solid var(--rule); border-left-width: 3px; border-radius: 2px; background: var(--paper); display: flex; gap: 14px; align-items: baseline; font-family: var(--font-host); } .cot .session-outcome.kind-clean { border-left-color: var(--data-soft); } .cot .session-outcome.kind-user { border-left-color: var(--mode-listener); } .cot .session-outcome.kind-chain-cap { border-left-color: var(--warn); background: #faefea; } .cot .session-outcome .outcome-icon { flex: 0 0 auto; font-family: var(--font-sans); font-size: 14px; width: 22px; height: 22px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 600; } .cot .session-outcome.kind-clean .outcome-icon { color: var(--data); border: 1px solid var(--data-soft); } .cot .session-outcome.kind-user .outcome-icon { color: var(--mode-listener); border: 1px solid var(--mode-listener); } .cot .session-outcome.kind-chain-cap .outcome-icon { color: var(--warn); border: 1px solid var(--warn); } .cot .session-outcome .outcome-body { display: flex; flex-direction: column; gap: 2px; } .cot .session-outcome .outcome-label { font-family: var(--font-host); font-weight: 500; font-size: 17px; color: var(--ink); line-height: 1.3; } .cot .session-outcome.kind-chain-cap .outcome-label { color: var(--warn); } .cot .session-outcome .outcome-detail { font-family: var(--font-host); font-style: italic; font-size: 15px; color: var(--ink-soft); line-height: 1.45; } .cot .session-outcome .outcome-detail code { font-family: var(--font-mono); font-style: normal; font-size: 12.5px; color: var(--ink); background: var(--rule-soft); padding: 1px 5px; border-radius: 2px; } .cot .session-total { font-family: var(--font-sans); font-size: 14px; color: var(--data); margin-bottom: 20px; } .cot .session-total strong { font-weight: 500; font-variant-numeric: tabular-nums; color: var(--data); } .cot .session-foot .budget-end { margin: 0 0 36px; } .cot .session-nav { display: flex; justify-content: space-between; gap: 24px; padding-top: 24px; border-top: 1px solid var(--rule-soft); font-family: var(--font-sans); font-size: 12px; flex-wrap: wrap; } .cot .session-nav a { color: var(--data); border-bottom: none; white-space: nowrap; font-size: 13px; } .cot .session-nav a:hover { color: var(--data); } .cot .session-nav .next { margin-left: auto; text-align: right; } /* ==================================================================== PLAYBACK TRANSPORT — session pages only ==================================================================== */ /* ---- action-mode tints for tool names in call headers ---- */ /* Tints mirror templates/action_modes.HOST_TOOLS. The canonical persist tool is `note`; any `write_*` name is a hallucinated invocation and gets the terra `--warn` tint (previously `write_note` was carved out here as if it were the real tool — see REVIEW_CODE.md item #2). */ .cot .call-tools code[data-tool="list_memory"] { color: var(--data-soft); } .cot .call-tools code[data-tool="read_memory"] { color: var(--mode-read-mem, #5a7a9a); } .cot .call-tools code[data-tool="read_library"] { color: var(--mode-read-lib, #a08246); } .cot .call-tools code[data-tool="reflect"] { color: var(--mode-reflect, #a08246); } .cot .call-tools code[data-tool="note"] { color: var(--mode-write, #6b7785); } .cot .call-tools code[data-tool^="write_"] { color: var(--warn); } /* tool-mode palette tokens (kept here, alongside transport) */ .cot { /* (mode palette now consolidated into the root tokens block above) */ } /* The broadcast card (2026-06 revamp): paper card, ink play circle, mono eyebrow, italic serif status — design Session.html Broadcast. */ .cot .transport { border: 1px solid var(--rule); background: var(--paper); border-radius: 3px; padding: 26px 30px 24px; margin-bottom: 48px; font-family: var(--font-mono); } .cot .transport-main { display: flex; align-items: flex-start; gap: 18px; } .cot .t-circle-slot { flex: 0 0 auto; } .cot .transport-side { flex: 1; min-width: 0; } .cot .t-eyebrow { font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--data); margin-bottom: 6px; } .cot .t-eyebrow .t-eyebrow-live { display: none; color: var(--live); } .cot .transport.is-playing .t-eyebrow .t-eyebrow-idle { display: none; } .cot .transport.is-playing .t-eyebrow .t-eyebrow-live { display: inline-flex; align-items: center; gap: 8px; } .cot .transport.is-playing .t-eyebrow .t-eyebrow-live::before { content: ""; display: inline-block; width: 6px; height: 6px; border-radius: 50%; background: var(--ocean); animation: t-pulse 2.4s infinite ease-in-out; } .cot .t-btn { width: 52px; height: 52px; border-radius: 50%; background: var(--ink); border: none; padding: 0; color: var(--paper); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; font-family: var(--font-mono); transition: background .12s, transform .12s; } .cot .t-btn:hover { background: var(--ink-soft); } .cot .t-btn .t-icon { display: inline-block; font-size: 16px; color: var(--paper); line-height: 1; text-align: center; } .cot .t-play .t-icon { margin-left: 3px; /* optical centering of ▸ */ } .cot .t-btn .t-label { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .cot .t-btn[hidden] { display: none !important; } .cot .t-sep { color: var(--ink-very-faint); } .cot .t-speed-group { display: inline-flex; align-items: center; gap: 6px; font-size: 11px; color: var(--data-faint); letter-spacing: 0.04em; margin-left: auto; } .cot .t-speed-label { text-transform: uppercase; } .cot .t-speed { background: transparent; border: 1px solid var(--rule); border-radius: 2px; padding: 6px 10px; min-height: 32px; font-family: var(--font-mono); font-size: 12px; color: var(--data-soft); cursor: pointer; letter-spacing: 0; transition: border-color .12s, color .12s, background .12s; } .cot .t-speed:hover { border-color: var(--data-soft); color: var(--ink); } .cot .t-speed.is-active { border-color: var(--data); color: var(--ink); background: var(--rule-soft); font-weight: 500; } .cot .transport-status { display: flex; align-items: baseline; gap: 14px; font-size: 12px; color: var(--data-soft); margin-top: 2px; flex-wrap: wrap; } .cot .transport-status .t-speed-group { margin-left: auto; } .cot .transport-status .t-state { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.1em; color: var(--data-faint); display: inline-flex; align-items: center; gap: 8px; } .cot .transport-status .t-state::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--data-faint); } .cot .transport.is-playing .t-state { color: var(--live); } .cot .transport.is-playing .t-state::before { background: var(--live); animation: t-pulse 1.2s infinite ease-in-out; } .cot .transport.is-paused .t-state { color: var(--ink-soft); } .cot .transport.is-complete .t-state { color: var(--data-soft); } .cot .transport.is-complete .t-state::before { background: var(--data); } @keyframes t-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.3; } } .cot .transport-status .t-clock { font-variant-numeric: tabular-nums; color: var(--data); } .cot .transport-status .t-budget strong { font-variant-numeric: tabular-nums; color: var(--ink); font-weight: 500; } .cot .transport-note { margin: 8px 0 0; font-family: var(--font-host); font-size: 15px; font-style: italic; color: var(--ink-soft); line-height: 1.5; max-width: 64ch; } .cot .transport.is-playing .transport-note, .cot .transport.is-paused .transport-note, .cot .transport.is-complete .transport-note { display: none; } /* ---- call reveal states ---- */ .cot .call.is-hidden { display: none; } .cot .call.is-reveal { animation: call-reveal 360ms cubic-bezier(.4,0,.2,1); } @keyframes call-reveal { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } } /* ---- thinking stub between calls ---- */ /* Tool glyph + label + animated ellipsis. The line breathes slowly (alive), the dots advance sequentially (working). */ .cot .thinking { display: inline-flex; align-items: baseline; gap: 8px; font-family: var(--font-mono); font-size: 13px; padding: 4px 0; margin: 0; animation: thinking-breathe 2.4s ease-in-out infinite; } .cot .thinking .tool-glyph { color: var(--progress-color, var(--ink-soft)); font-size: 14px; line-height: 1; position: relative; top: 1px; } .cot .thinking .pulse { display: none; } .cot .thinking .thinking-tool { color: var(--progress-color, var(--ink-soft)); font-weight: 500; letter-spacing: 0.02em; } .cot .thinking .thinking-ellipsis { display: inline-block; color: var(--progress-color, var(--ink-soft)); min-width: 1.2em; } .cot .thinking .thinking-ellipsis .d { display: inline-block; opacity: 0; animation: dot-sequence 1.4s infinite; } .cot .thinking .thinking-ellipsis .d:nth-child(1) { animation-delay: 0s; } .cot .thinking .thinking-ellipsis .d:nth-child(2) { animation-delay: 0.18s; } .cot .thinking .thinking-ellipsis .d:nth-child(3) { animation-delay: 0.36s; } .cot .thinking-progress { display: none; } @keyframes thinking-breathe { 0%, 100% { opacity: 0.6; } 50% { opacity: 1; } } @keyframes dot-sequence { 0%, 5% { opacity: 0; } 18%, 70% { opacity: 1; } 85%, 100%{ opacity: 0; } } /* ---- reading progress rail (left-margin gauge) ---- Thin vertical bar at the left margin of a read-target. Fills top-to- bottom at reading pace. Text stays in place; the rail shows the host's reading position. */ .cot .reading-rail { position: absolute; left: -16px; top: 0; bottom: 0; width: 2px; background: var(--rule); border-radius: 1px; pointer-events: none; overflow: hidden; } .cot .reading-rail-fill { position: absolute; top: 0; left: 0; right: 0; height: 0; background: var(--rail-color, var(--mode-read-lib)); border-radius: 1px; transition: height linear; } .cot .reading-rail.is-fading { transition: opacity 320ms ease-out; opacity: 0; } /* ---- reading frame (Option B) ---- — superseded by reading-rail; kept for graceful fallback should the rail ever fail to attach. */ .cot .reading-frame { height: var(--frame-height, 180px); overflow: hidden; position: relative; } /* reading reveal — paragraphs fade up in cascade */ .cot .read-result [data-type] p, .cot .read-result [data-type] .lib-preview, .cot details.library-passage [data-type] { /* default state is identity — JS toggles per-paragraph via inline style */ } .cot .read-reveal-init { opacity: 0; transform: translateY(3px); transition: opacity 280ms ease-out, transform 280ms ease-out; } .cot .read-reveal-shown { opacity: 1; transform: translateY(0); } /* ---- reading focus band (Option C) ---- A soft mode-tinted horizontal band that slides from the top of a read-target to the bottom at reading pace. The text remains fully visible; the band marks where the host's attention currently sits. 1.3s per line by default, tunable via --reading-pace. */ .cot .reading-focus-band { position: absolute; left: -14px; right: -14px; top: 0; background: var(--band-color, var(--mode-read-lib)); opacity: 0.14; pointer-events: none; border-radius: 3px; will-change: transform; mix-blend-mode: multiply; } .cot .reading-focus-band.is-fading { transition: opacity 280ms ease-out; opacity: 0; } .cot .turn-foot.is-hidden, .cot .session-foot.is-hidden { display: none; } .cot .turn-foot.is-reveal, .cot .session-foot.is-reveal { animation: call-reveal 400ms cubic-bezier(.4,0,.2,1); } /* ---- typing caret -------------------------------------------- */ .cot .caret { display: inline-block; width: 0.5em; height: 1.05em; background: var(--live); vertical-align: -0.16em; margin-left: 1px; animation: caret-blink 1s steps(2, end) infinite; border-radius: 1px; } @keyframes caret-blink { 0%, 50% { opacity: 1; } 50.01%, 100% { opacity: 0; } } /* ---- continue affordance ------------------------------------- */ /* Appears inline at the end of a content block after typing. Right-aligned, hairline border, mono small. Cool-data border so it reads consistently on white (library card) and on warm paper. */ .cot .continue-bar { display: flex; justify-content: flex-end; align-items: center; margin-top: 20px; font-family: var(--font-mono); opacity: 0; transition: opacity 220ms ease-out; } .cot .continue-bar.is-ready { opacity: 1; } .cot .continue-btn { background: transparent; border: 1px solid var(--data-faint); border-radius: 2px; padding: 10px 14px; min-height: 40px; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.04em; color: var(--ink-soft); cursor: pointer; display: inline-flex; align-items: center; gap: 10px; transition: border-color .12s, color .12s, background .12s; } .cot .continue-btn:hover { border-color: var(--data); color: var(--ink); background: var(--paper); } /* gentle hint that auto-advance is happening — small line under the button that drains as the hold timer counts down. CSS-only signal. */ .cot .continue-bar.is-ready .continue-btn::after { content: ""; display: block; height: 1px; width: 100%; position: absolute; left: 0; bottom: -3px; background: var(--data-faint); transform-origin: left center; animation: continue-hold 1500ms linear forwards; } .cot .continue-btn { position: relative; } @keyframes continue-hold { from { transform: scaleX(1); } to { transform: scaleX(0); } } .cot .continue-btn kbd { font-family: var(--font-mono); font-size: 10px; padding: 1px 5px; border: 1px solid var(--data-faint); border-radius: 2px; color: var(--data-faint); letter-spacing: 0.02em; text-transform: uppercase; background: transparent; } .cot .continue-btn .c-icon { color: var(--live); font-size: 10px; } .cot .continue-btn:hover kbd { border-color: var(--data-soft); color: var(--data); } /* skip-during-typing variant */ .cot .continue-btn.is-skip { color: var(--ink-faint); border-color: var(--rule); } .cot .continue-btn.is-skip:hover { color: var(--data); border-color: var(--data-faint); } /* ---- library passage: preview + nested expand -------------- */ .cot details.library-passage > .library-prose > details.library-expand { margin-top: 4px; } .cot details.library-passage > .library-prose > details.library-expand > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 4px 10px 0; margin-top: 6px; min-height: 36px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--data-soft); border-bottom: 1px solid transparent; transition: color .12s, border-color .12s; } .cot details.library-passage > .library-prose > details.library-expand > summary::-webkit-details-marker { display: none; } .cot details.library-passage > .library-prose > details.library-expand > summary:hover { color: var(--ink); border-bottom-color: var(--data-soft); } .cot details.library-passage > .library-prose > details.library-expand > summary .expand-mark::before { content: "▸"; display: inline-block; color: var(--data-faint); margin-right: 4px; } .cot details.library-passage > .library-prose > details.library-expand[open] > summary .expand-mark::before { content: "▾"; } .cot details.library-passage > .library-prose > details.library-expand > summary .expand-meta { color: var(--data-faint); font-family: var(--font-ext); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13.5px; } .cot details.library-passage > .library-prose > details.library-expand[open] > summary .expand-meta { display: none; } .cot details.library-passage > .library-prose > details.library-expand > p:first-of-type { margin-top: 1.1em; } /* read-result expand — same affordance as library-expand, scoped to the quoted-prose container so long reflection/note reads collapse to a one-paragraph preview by default. */ .cot .read-result .quoted-prose > details.quoted-expand { margin-top: 4px; } .cot .read-result .quoted-prose > details.quoted-expand > summary { list-style: none; cursor: pointer; user-select: none; display: inline-flex; align-items: baseline; gap: 8px; padding: 10px 4px 10px 0; margin-top: 6px; min-height: 36px; font-family: var(--font-sans); font-size: 13px; letter-spacing: 0.04em; color: var(--data-soft); border-bottom: 1px solid transparent; transition: color .12s, border-color .12s; } .cot .read-result .quoted-prose > details.quoted-expand > summary::-webkit-details-marker { display: none; } .cot .read-result .quoted-prose > details.quoted-expand > summary:hover { color: var(--ink); border-bottom-color: var(--data-soft); } .cot .read-result .quoted-prose > details.quoted-expand > summary .expand-mark::before { content: "▸"; display: inline-block; color: var(--data-faint); margin-right: 4px; } .cot .read-result .quoted-prose > details.quoted-expand[open] > summary .expand-mark::before { content: "▾"; } .cot .read-result .quoted-prose > details.quoted-expand > summary .expand-meta { color: var(--data-faint); font-family: var(--font-ext); font-style: italic; text-transform: none; letter-spacing: 0; font-size: 13.5px; } .cot .read-result .quoted-prose > details.quoted-expand[open] > summary .expand-meta { display: none; } .cot .read-result .quoted-prose > details.quoted-expand > p:first-of-type { margin-top: 1.1em; } /* ---- accessibility: focus rings, motion preferences ---- */ .cot a:focus-visible, .cot button:focus-visible, .cot summary:focus-visible { outline: 2px solid var(--live); outline-offset: 2px; border-radius: 2px; } .cot summary:focus-visible { outline-offset: 3px; } .cot .continue-btn:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; border-color: var(--ink); } .cot .session-summary .summary-bar .seg:focus-visible { outline: 2px solid var(--live); outline-offset: 3px; z-index: 5; } /* visually-hidden but screen-reader-readable */ .cot .sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; } @media (prefers-reduced-motion: reduce) { .cot *, .cot *::before, .cot *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; } .cot .caret { animation: none; opacity: 1; } .cot .thinking .pulse { animation: none; } } /* ==================================================================== INDEX PAGES — sessions index, findings index ==================================================================== */ .cot .index-page .container { padding-top: 56px; } .cot .index-head { margin-bottom: 56px; padding-bottom: 32px; border-bottom: 1px solid var(--rule); } .cot .index-eyebrow { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--data-soft); font-weight: 500; margin-bottom: 14px; } .cot .index-title { font-family: var(--font-host); font-weight: 500; font-size: 36px; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 12px; line-height: 1.18; } .cot .index-sub { font-family: var(--font-host); font-style: italic; font-size: 18px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 60ch; } .cot .index-list { display: flex; flex-direction: column; } .cot .index-row { display: grid; grid-template-columns: 120px 1fr 120px; gap: 24px; align-items: baseline; padding: 22px 0; border-bottom: 1px solid var(--rule-soft); font-family: var(--font-host); color: var(--ink); text-decoration: none; border-top: none; border-left: none; border-right: none; transition: background .12s; } .cot .index-row:hover { background: var(--rule-soft); border-bottom-color: var(--rule); } .cot .index-row:last-child { border-bottom: 1px solid var(--rule); } .cot .index-row.is-log-only { cursor: default; } .cot .index-row.is-log-only:hover { background: transparent; } .cot .index-row.is-placeholder { cursor: default; opacity: 0.85; } .cot .index-row.is-placeholder:hover { background: transparent; } .cot .index-row .index-row-date, .cot .index-row .index-row-id { font-family: var(--font-mono); font-size: 13px; color: var(--data-soft); letter-spacing: 0.01em; } .cot .index-row .index-row-title { font-family: var(--font-host); font-weight: 500; font-size: 20px; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 4px; line-height: 1.3; } .cot .index-row.is-log-only .index-row-title, .cot .index-row.is-placeholder .index-row-title { font-weight: 400; color: var(--ink-soft); } .cot .index-row .index-row-sub { font-family: var(--font-host); font-size: 14.5px; color: var(--ink-soft); line-height: 1.5; margin: 0; max-width: 64ch; } .cot .index-row .index-row-flag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.04em; color: var(--ink-very-faint); text-align: right; white-space: nowrap; } .cot .index-row .index-row-flag.warn { color: var(--warn); } .cot .index-row .index-row-flag.listener { color: var(--mode-listener); } /* day grouping header in sessions index */ .cot .index-day-head { font-family: var(--font-host); font-style: italic; font-weight: 400; font-size: 22px; letter-spacing: -0.005em; color: var(--ink-soft); margin: 36px 0 4px; padding-bottom: 12px; } .cot .index-day-head:first-of-type { margin-top: 0; } /* footer note */ .cot .index-foot { margin-top: 48px; padding-top: 24px; border-top: 1px solid var(--rule); font-family: var(--font-host); font-style: italic; font-size: 14.5px; color: var(--ink-faint); max-width: 64ch; line-height: 1.5; } .cot .index-foot code { font-family: var(--font-mono); font-style: normal; font-size: 12.5px; background: var(--rule-soft); padding: 1px 5px; border-radius: 2px; color: var(--ink-soft); } .cot .index-foot a { color: var(--data); border-bottom: 1px solid var(--rule); } .cot .index-foot a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); } @media (max-width: 640px) { .cot .index-row { grid-template-columns: 80px 1fr; gap: 14px; } .cot .index-row .index-row-flag { grid-column: 2; text-align: left; margin-top: 4px; } } /* Per-finding accent — set on .cot via data-accent on the main element. Drives section markers, byline rule, and small accents. */ .cot[data-accent="wine"] { --accent: var(--mode-reflect); } .cot[data-accent="terra"] { --accent: var(--warn); } .cot[data-accent="blue"] { --accent: var(--mode-read-mem); } .cot[data-accent="gold"] { --accent: var(--mode-read-lib); } .cot[data-accent="slate"] { --accent: var(--data); } .cot[data-accent="green"] { --accent: var(--mode-listener); } .cot .finding-head { margin-bottom: 48px; padding-bottom: 36px; border-bottom: 1px solid var(--rule); } .cot .finding-eyebrow { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--data-soft); font-weight: 500; margin-bottom: 16px; } .cot .finding-headline { font-family: var(--font-host); font-weight: 500; font-size: 38px; line-height: 1.18; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; } /* Inline code in display type: serif italic, not mono. Keeps the headline reading as one continuous letterform. */ .cot .finding-headline code, .cot .finding-subhead code, .cot .finding-lede code, .cot .finding-eyebrow code, .cot .sub-finding-title code { font-family: var(--font-host); font-style: italic; font-weight: inherit; font-size: 1em; background: transparent; padding: 0; border-radius: 0; color: inherit; letter-spacing: -0.005em; } /* Eyebrow code at tracked-sans size sits oddly italic; force normal but keep serif */ .cot .finding-eyebrow code { font-style: normal; text-transform: none; letter-spacing: 0; } .cot .finding-subhead { font-family: var(--font-host); font-style: italic; font-size: 22px; line-height: 1.4; color: var(--ink-soft); margin: 0 0 24px; letter-spacing: -0.005em; text-wrap: balance; } /* AI-authorship disclaimer — sits between subhead and lede. Quiet but clearly readable. Acts as a byline. */ .cot .finding-byline { font-family: var(--font-host); font-style: italic; font-size: 14.5px; line-height: 1.55; color: var(--ink-soft); background: var(--rule-soft); border-left: 2px solid var(--accent, var(--data-faint)); padding: 12px 16px; border-radius: 0 2px 2px 0; margin: 0 0 28px; } .cot .finding-byline .byline-label { font-family: var(--font-sans); font-style: normal; font-weight: 500; font-size: 11px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--data); margin-right: 6px; } .cot .finding-byline strong { font-style: normal; font-weight: 500; color: var(--ink); } .cot .finding-byline .byline-aside { font-family: var(--font-mono); font-style: normal; font-size: 12px; color: var(--data-faint); margin-left: 4px; } .cot .finding-lede { font-family: var(--font-host); font-size: 20px; line-height: 1.6; color: var(--ink); margin: 0 0 24px; max-width: 62ch; } .cot .finding-meta { font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.02em; color: var(--data-soft); display: flex; gap: 12px 22px; flex-wrap: wrap; margin-top: 18px; padding-top: 18px; border-top: 1px solid var(--rule-soft); } .cot .finding-meta .meta-label { color: var(--ink-very-faint); text-transform: uppercase; letter-spacing: 0.08em; font-size: 10.5px; margin-right: 4px; } .cot .finding-meta .meta-value { color: var(--ink); } .cot .finding-meta a { color: var(--data); border-bottom: 1px solid var(--rule); } .cot .finding-meta a:hover { color: var(--ink); border-bottom-color: var(--data-soft); } /* finding body */ .cot .finding-body { font-family: var(--font-host); font-size: 19px; line-height: 1.65; color: var(--ink); } .cot .finding-body p { margin: 0 0 1.1em; } .cot .finding-body em { font-style: italic; } .cot .finding-body strong { font-weight: 500; } .cot .finding-body code { font-family: var(--font-mono); font-size: 0.84em; color: var(--ink); background: var(--rule-soft); padding: 1px 5px; border-radius: 2px; letter-spacing: 0; } .cot .finding-section { margin-top: 48px; } .cot .finding-section > h2 { font-family: var(--font-host); font-weight: 500; font-size: 26px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 20px; padding: 0 0 10px 16px; border-bottom: 1px solid var(--rule); position: relative; } /* Mode-colored section marker — left gutter bar */ .cot .finding-section > h2::before { content: ""; position: absolute; left: 0; top: 0.18em; bottom: 0.55em; width: 3px; background: var(--accent, var(--data-soft)); border-radius: 1px; } .cot .finding-section > h3 { font-family: var(--font-host); font-weight: 500; font-size: 21px; line-height: 1.35; letter-spacing: -0.005em; color: var(--ink); margin: 32px 0 12px; } /* recovered prose — host's preserved words */ .cot .recovered-prose { background: var(--paper); border: 1px solid var(--rule); border-left: 2px solid var(--quote-rule); border-radius: 0 3px 3px 0; padding: 28px 32px; margin: 28px 0; } .cot .recovered-prose .quoted-meta { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data-soft); margin-bottom: 18px; padding-bottom: 14px; border-bottom: 1px solid var(--rule-soft); display: flex; gap: 8px 18px; flex-wrap: wrap; align-items: baseline; } .cot .recovered-prose .quoted-meta .kind { color: var(--ink); font-weight: 500; } .cot .recovered-prose .quoted-meta .provenance { text-transform: none; letter-spacing: 0.01em; font-size: 12px; color: var(--data-faint); font-family: var(--font-mono); margin-left: auto; } .cot .recovered-prose .host-prose { font-family: var(--font-host); font-size: 17.5px; line-height: 1.65; color: var(--ink); } .cot .recovered-prose .host-prose p { margin: 0 0 1em; } .cot .recovered-prose .host-prose p:last-child { margin-bottom: 0; } .cot .recovered-prose .host-prose em { font-style: italic; } .cot .recovered-prose .host-prose .signoff { margin-top: 1.4em; color: var(--ink-soft); font-style: italic; } /* data tables in findings */ .cot .finding-body table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); margin: 24px 0; } .cot .finding-body table th { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data); text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; } .cot .finding-body table th:last-child, .cot .finding-body table td:last-child { padding-right: 0; } .cot .finding-body table td { padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule-soft); color: var(--ink); font-variant-numeric: tabular-nums; } .cot .finding-body table tr:last-child td { border-bottom: 1px solid var(--rule); } /* numbered "what happened" list */ .cot .finding-body ol.numbered-steps { list-style: none; margin: 0 0 1em; padding: 0; counter-reset: step; } .cot .finding-body ol.numbered-steps > li { position: relative; padding-left: 34px; margin-bottom: 0.9em; counter-increment: step; } .cot .finding-body ol.numbered-steps > li::before { content: counter(step) "."; position: absolute; left: 0; top: 0; font-family: var(--font-mono); font-size: 15px; color: var(--data-soft); font-weight: 500; font-variant-numeric: tabular-nums; } /* hanging-bullet list */ .cot .finding-body ul.observations { list-style: none; margin: 0 0 1em; padding: 0; } .cot .finding-body ul.observations > li { position: relative; padding-left: 22px; margin-bottom: 0.9em; } .cot .finding-body ul.observations > li::before { content: "—"; position: absolute; left: 0; color: var(--ink-very-faint); } /* provenance block — gray, footnote-y */ .cot .provenance-block { margin-top: 48px; background: var(--rule-soft); border-radius: 3px; padding: 24px 28px; font-family: var(--font-host); font-size: 16px; line-height: 1.6; color: var(--ink-soft); } .cot .provenance-block h2 { font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--data); margin: 0 0 14px; padding-bottom: 0; border-bottom: none; } .cot .provenance-block code { font-family: var(--font-mono); font-size: 12.5px; background: var(--paper); padding: 1px 5px; border-radius: 2px; } .cot .provenance-block p { margin: 0 0 0.8em; } .cot .provenance-block p:last-child { margin-bottom: 0; } .cot .provenance-block ul { margin: 0 0 0.8em; padding: 0; list-style: none; } .cot .provenance-block ul li { margin: 0 0 0.5em; padding-left: 16px; position: relative; } .cot .provenance-block ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-very-faint); } .cot .provenance-block ul li:last-child { margin-bottom: 0; } /* footer with cited sessions + back link */ .cot .finding-foot { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule); } .cot .cited-sessions { display: flex; gap: 10px 18px; flex-wrap: wrap; font-family: var(--font-sans); font-size: 13px; align-items: baseline; } .cot .cited-sessions .cited-label { font-size: 11px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--data-faint); margin-right: 4px; font-weight: 500; } .cot .cited-sessions a { color: var(--ink); border-bottom: 1px solid var(--rule); font-family: var(--font-mono); font-size: 12.5px; } .cot .cited-sessions a:hover { border-bottom-color: var(--ink-soft); } .cot .finding-back { margin-top: 24px; font-family: var(--font-sans); font-size: 13px; } .cot .finding-back a { color: var(--data-soft); border-bottom: none; } .cot .finding-back a:hover { color: var(--ink); } /* ---- sub-finding cards (used on parent finding hub) ---- */ .cot .sub-findings-intro { font-family: var(--font-host); font-style: italic; font-size: 17px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 20px; max-width: 64ch; } .cot .sub-finding-card { display: block; text-decoration: none; color: var(--ink); background: var(--paper); border: 1px solid var(--rule); border-radius: 3px; padding: 24px 28px; margin-bottom: 14px; transition: border-color .15s, background .15s; } .cot .sub-finding-card:hover { border-color: var(--data-soft); background: var(--rule-soft); } .cot .sub-finding-card .sub-finding-num { font-family: var(--font-mono); font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data-faint); margin-bottom: 10px; } .cot .sub-finding-card .sub-finding-title { font-family: var(--font-host); font-weight: 500; font-size: 22px; line-height: 1.3; letter-spacing: -0.005em; color: var(--ink); margin: 0 0 10px; } .cot .sub-finding-card .sub-finding-lede { font-family: var(--font-host); font-size: 16px; line-height: 1.55; color: var(--ink-soft); margin: 0 0 14px; } .cot .sub-finding-card .sub-finding-cta { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.06em; color: var(--data); display: inline-flex; align-items: center; gap: 4px; } .cot .sub-finding-card:hover .sub-finding-cta { color: var(--ink); } /* "Part of" backlink on sub-finding pages */ .cot .part-of { font-family: var(--font-sans); font-size: 12px; letter-spacing: 0.02em; color: var(--ink-soft); margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--rule); display: flex; gap: 8px; align-items: baseline; flex-wrap: wrap; } .cot .part-of .part-of-label { font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--data-faint); font-weight: 500; } .cot .part-of a { color: var(--data); border-bottom: 1px solid var(--rule); font-style: italic; } .cot .part-of a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); } /* "Other findings in this set" block on sub-finding pages */ .cot .sibling-findings { margin-top: 48px; padding: 22px 26px; background: var(--rule-soft); border-radius: 3px; } .cot .sibling-findings h3 { font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--data); margin: 0 0 14px; } .cot .sibling-findings ul { list-style: none; margin: 0; padding: 0; } .cot .sibling-findings li { margin: 0 0 10px; } .cot .sibling-findings li:last-child { margin-bottom: 0; } .cot .sibling-findings li a { font-family: var(--font-host); font-size: 17px; color: var(--ink); border-bottom: 1px solid var(--rule); } .cot .sibling-findings li a:hover { border-bottom-color: var(--ink-soft); } /* ---- skip link — hidden until focused ---- */ .cot .skip-link { position: absolute; top: -100px; left: 8px; padding: 10px 16px; background: var(--ink); color: var(--bg); text-decoration: none; border-radius: 3px; font-family: var(--font-sans); font-size: 14px; font-weight: 500; z-index: 100; border-bottom: none; } .cot .skip-link:focus { top: 8px; outline: 2px solid var(--live); outline-offset: 2px; } /* ---- call-head as h3 — reset browser defaults ---- */ .cot h3.call-head { font-family: var(--font-mono); font-size: 13px; font-weight: 400; margin: 0 0 12px; line-height: 1.3; letter-spacing: 0; } /* ---- responsive --------------------------------------------- */ @media (max-width: 640px) { /* site chrome */ .cot .site-bar { padding: 12px 18px; flex-wrap: wrap; gap: 6px 14px; font-size: 12.5px; } .cot .site-nav { gap: 14px; flex-wrap: wrap; } .cot .container { padding: 28px 18px 56px; } /* session head */ .cot .session-id { font-size: 28px; } .cot .session-date { font-size: 13px; margin-left: 10px; } .cot .session-meta { align-items: flex-start; gap: 4px; } .cot .budget { gap: 6px 10px; } .cot .budget-value { font-size: 20px; } .cot .budget-pool { font-size: 12.5px; } /* transport (broadcast card) */ .cot .transport { padding: 18px 18px 16px; } .cot .transport-main { gap: 14px; } .cot .t-btn { width: 44px; height: 44px; } .cot .transport-status { gap: 8px 14px; } .cot .transport-status .t-speed-group { margin-left: 0; flex-basis: 100%; padding-top: 10px; border-top: 1px solid var(--rule-soft); flex-wrap: wrap; } .cot .transport-note { font-size: 13.5px; } /* call list */ .cot h3.call-head { gap: 8px 12px; } .cot .turn-listener.message { font-size: 15px; padding: 10px 14px; } /* content blocks */ .cot .reflection-prose { font-size: 17.5px; } .cot .library-prose { font-size: 17.5px; } .cot .quoted-prose { font-size: 16px; } .cot .quoted-prose.note { font-size: 15px; } .cot .read-result { padding-left: 14px; } .cot .hallucinated-content { padding: 14px 16px 14px 18px; } .cot details.library-passage { padding: 22px 20px; } .cot details.library-passage > summary { padding: 0; font-size: 13.5px; } .cot details.library-passage > summary .collapse-marker { position: static; transform: none; display: block; margin-top: 8px; } /* session summary */ .cot .session-summary .anchor-num { font-size: 18px; } .cot .session-summary .anchor-label { font-size: 11px; } .cot .session-summary .summary-consumed { font-size: 12.5px; flex-wrap: wrap; gap: 4px 8px; } .cot .session-summary .summary-bar-foot { font-size: 12px; gap: 6px 16px; } /* outcome chip */ .cot .session-outcome { padding: 12px 14px; gap: 10px; } .cot .session-outcome .outcome-label { font-size: 16px; } .cot .session-outcome .outcome-detail { font-size: 14px; } /* session nav stacks */ .cot .session-nav { flex-direction: column; align-items: flex-start; gap: 10px; } .cot .session-nav .next { margin-left: 0; text-align: left; } /* continue button bigger for thumbs */ .cot .continue-btn { padding: 12px 16px; min-height: 48px; font-size: 13px; } /* tooltips on narrow: anchor to the bar, not the seg — segs drop position:relative so the bar (position:relative) becomes the containing block, and the readout centers over the bar where it can never leave the viewport. Arrow off: it would point at the bar's center, not the hovered seg. */ .cot .session-summary .summary-bar .seg { position: static; } .cot .session-summary .summary-bar .seg::after, .cot .session-summary .summary-bar .seg.tip-start::after, .cot .session-summary .summary-bar .seg.tip-end::after { left: 0; right: 0; margin-inline: auto; width: fit-content; max-width: 100%; transform: none; white-space: normal; text-align: center; } .cot .session-summary .summary-bar .seg::before { content: none; } } /* ==================================================================== HOST PAGE — frame + tool catalogue (appended; see also section-style delineation below for the three distinct backgrounds) ==================================================================== */ .cot .host-page-head { margin-bottom: 56px; padding-bottom: 36px; border-bottom: 1px solid var(--rule); } .cot .host-eyebrow { font-family: var(--font-sans); font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--data-soft); font-weight: 500; margin-bottom: 14px; } .cot .host-title { font-family: var(--font-host); font-weight: 500; font-size: 38px; line-height: 1.18; letter-spacing: -0.012em; color: var(--ink); margin: 0 0 14px; text-wrap: balance; } .cot .host-deck { font-family: var(--font-host); font-style: italic; font-size: 20px; line-height: 1.5; color: var(--ink-soft); margin: 0; max-width: 56ch; } /* Section delineation — each of the 3 sections gets its own ground */ .cot .host-section { margin-top: 56px; border-radius: 4px; } .cot .host-section-frame { /* host's voice ground — cool putty, lighter and more readable than stone while still distinct from every warm tone elsewhere on the page */ background: #eef0e7; border: 1px solid #dcdfd3; padding: 40px 36px 36px; margin-left: -16px; margin-right: -16px; } .cot .host-section-tools { /* reference ground — paper-white card, padded */ background: var(--paper); border: 1px solid var(--rule); padding: 40px 36px 44px; margin-left: -16px; margin-right: -16px; } .cot .host-section-use { /* call-to-action ground — soft warm wash */ background: #f1ecda; border: 1px solid var(--rule); padding: 32px 36px; margin-left: -16px; margin-right: -16px; } .cot .host-section-head { font-family: var(--font-sans); font-weight: 500; font-size: 12px; letter-spacing: 0.22em; text-transform: uppercase; color: var(--ink-soft); margin: 0 0 24px; display: flex; align-items: center; gap: 14px; } .cot .host-section-head::after { content: ""; flex: 1; height: 1px; background: var(--rule); } /* frame prose */ .cot .host-frame-prose { font-family: var(--font-host); font-size: 19px; line-height: 1.65; color: var(--ink); max-width: 62ch; } .cot .host-frame-prose p { margin: 0 0 1.05em; } .cot .host-frame-prose em { font-style: italic; } .cot .host-frame-prose .frame-limits-title { font-family: var(--font-sans); font-weight: 500; font-size: 11.5px; letter-spacing: 0.16em; text-transform: uppercase; color: var(--ink-soft); margin: 32px 0 14px; } .cot .host-frame-prose ul { list-style: none; margin: 0 0 1.4em; padding: 0; font-size: 17px; line-height: 1.55; } .cot .host-frame-prose ul li { position: relative; padding-left: 22px; margin-bottom: 0.9em; } .cot .host-frame-prose ul li::before { content: "—"; position: absolute; left: 0; color: var(--ink-faint); } .cot .host-frame-prose .frame-coda { font-style: italic; color: var(--ink-soft); margin-top: 16px; } /* tool catalogue */ .cot .tool-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; } .cot .tool-card { background: var(--bg); border: 1px solid var(--rule); border-radius: 3px; border-top: 3px solid var(--tool-color, var(--ink-soft)); padding: 20px 22px 18px; display: flex; flex-direction: column; gap: 10px; transition: background .15s, border-color .15s, transform .15s; } .cot .tool-card:hover { background: var(--bg); border-color: var(--data-soft); border-top-color: var(--tool-color, var(--ink-soft)); transform: translateY(-1px); } .cot .tool-card .tool-card-head { display: flex; align-items: baseline; gap: 10px; } .cot .tool-card .tool-card-glyph { font-family: var(--font-mono); font-size: 22px; font-weight: 500; color: var(--tool-color, var(--ink-soft)); line-height: 1; position: relative; top: 2px; } .cot .tool-card .tool-card-name { font-family: var(--font-mono); font-size: 15.5px; font-weight: 500; color: var(--tool-color, var(--ink)); letter-spacing: 0.01em; } .cot .tool-card .tool-card-kind { font-family: var(--font-sans); font-size: 10.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--data-faint); margin-left: auto; white-space: nowrap; } .cot .tool-card .tool-card-desc { font-family: var(--font-host); font-size: 16.5px; line-height: 1.5; color: var(--ink); margin: 0; } .cot .tool-card .tool-card-sample { margin-top: 4px; padding-top: 12px; border-top: 1px solid var(--rule-soft); font-family: var(--font-mono); font-size: 12.5px; color: var(--tool-color, var(--ink-soft)); display: inline-flex; align-items: baseline; gap: 8px; animation: thinking-breathe 3.2s ease-in-out infinite; } .cot .tool-card:hover .tool-card-sample { animation-duration: 2s; } .cot .tool-card .tool-card-sample-glyph { font-size: 13px; position: relative; top: 1px; } .cot .tool-card .tool-card-sample-dots .d { display: inline-block; opacity: 0; animation: dot-sequence 1.6s infinite; } .cot .tool-card .tool-card-sample-dots .d:nth-child(2) { animation-delay: 0.18s; } .cot .tool-card .tool-card-sample-dots .d:nth-child(3) { animation-delay: 0.36s; } .cot .tool-card:hover .tool-card-sample-dots .d { animation-duration: 1.1s; } .cot .tool-card .tool-card-note { font-family: var(--font-host); font-style: italic; font-size: 14px; color: var(--ink-faint); margin: 6px 0 0; line-height: 1.45; } /* host page footer */ .cot .host-foot { margin-top: 64px; padding-top: 28px; border-top: 1px solid var(--rule); font-family: var(--font-host); font-style: italic; font-size: 14.5px; color: var(--ink-faint); max-width: 62ch; line-height: 1.6; } .cot .host-foot code { font-family: var(--font-mono); font-style: normal; font-size: 12.5px; background: var(--rule-soft); padding: 1px 5px; border-radius: 2px; color: var(--ink-soft); } .cot .host-foot a { color: var(--data); border-bottom: 1px solid var(--rule); } .cot .host-foot a:hover { color: var(--ink); border-bottom-color: var(--ink-soft); } @media (max-width: 720px) { .cot .tool-grid { grid-template-columns: 1fr; } .cot .host-title { font-size: 30px; } .cot .host-deck { font-size: 17.5px; } .cot .host-section-tools, .cot .host-section-use { padding: 28px 22px; margin-left: -6px; margin-right: -6px; } } /* Host tool-card labels — small "tool" / "when active" markers */ .cot .tool-card .tool-card-label { display: block; font-family: var(--font-sans); font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--data-faint); font-weight: 500; margin-bottom: 8px; width: 100%; } .cot .tool-card .tool-card-head { flex-wrap: wrap; } .cot .tool-card .tool-card-action { margin-top: 4px; padding-top: 14px; border-top: 1px solid var(--rule-soft); } .cot .tool-card .tool-card-action .tool-card-label { margin-bottom: 6px; } /* The sample now lives inside .tool-card-action; remove its own top border. */ .cot .tool-card .tool-card-action .tool-card-sample { border-top: none; padding-top: 0; margin-top: 0; } /* ---- measurements page (per-cell mechanical counts) ---------- */ /* Same cool-slate "data" register as the findings tables: counts are substrate, not voice. */ .cot .measure-method { max-width: 62ch; margin: 0 0 34px; padding: 16px 20px; background: var(--paper); border: 1px solid var(--rule); border-left: 3px solid var(--data-faint); font-family: var(--font-host); font-size: 15.5px; line-height: 1.55; color: var(--ink-soft); } .cot .measure-table-wrap { overflow-x: auto; margin: 0 0 34px; } .cot .measure-table { width: 100%; border-collapse: collapse; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink); } .cot .measure-table th { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data); text-align: left; padding: 12px 14px 12px 0; border-bottom: 1px solid var(--rule); vertical-align: bottom; } .cot .measure-table td { padding: 10px 14px 10px 0; border-bottom: 1px solid var(--rule-soft); vertical-align: top; } /* de-emphasized but AA-contrast on --bg (#757571 on #faf9f6 ~= 4.6:1) */ .cot .measure-table td.is-zero { color: #757571; } .cot .measure-table td.m-kind { color: var(--data-soft); } .cot .measure-table td.m-words { color: var(--data-faint); } .cot .measure-table tfoot td { border-top: 1px solid var(--rule); border-bottom: none; font-weight: 500; color: var(--data); } .cot .measure-empty { margin: 0 0 34px; padding: 28px 24px; border: 1px dashed var(--rule); font-family: var(--font-host); font-style: italic; font-size: 16px; color: var(--ink-faint); } /* ---- publish-mode nav: "‹ All cells" escape hatch ------------ */ .cot .site-nav .nav-up { color: var(--ink-soft); } .cot .site-nav .nav-up:hover { color: var(--ink); } /* Long inline code tokens (tool names, ids) must wrap rather than widen the page on narrow viewports. */ .cot .finding-body code, .cot .measure-table code { overflow-wrap: anywhere; } /* Wide data tables in findings scroll inside themselves on narrow viewports — content is never clipped and the page never pans. */ .cot .finding-body table { display: block; max-width: 100%; overflow-x: auto; } /* ---- cells hub: per-cell quick-links ------------------------------- */ .cot .index-row-title a { color: var(--ink); border-bottom: none; } .cot .index-row-title a:hover { color: var(--link-hover); border-bottom: 1px solid var(--rule); } .cot .cell-quick { margin: 8px 0 0; font-family: var(--font-mono); font-size: 12px; letter-spacing: 0.03em; color: var(--ink-faint); } .cot .cell-quick a { color: var(--data-soft); border-bottom: none; } .cot .cell-quick a:hover { color: var(--ink); border-bottom: 1px solid var(--rule); } /* ---- archive banner (pilot wing) ------------------------------------ One consistent marker across every page of the /pilot/ archive — including the Astro overview page, which loads this stylesheet. */ .cot .archive-banner { background: #f5edda; border-bottom: 1px solid var(--quote-rule); padding: 9px 26px; font-family: var(--font-sans); font-size: 12.5px; letter-spacing: 0.04em; color: var(--ink-soft); } .cot .archive-banner a { color: var(--ink); } /* ---- design page: tool catalogue list ------------------------------- */ .cot ul.design-tools { list-style: none; margin: 18px 0 28px; padding: 0; display: flex; flex-direction: column; gap: 12px; } .cot ul.design-tools li { font-family: var(--font-host); font-size: 16px; line-height: 1.55; color: var(--ink-soft); } .cot ul.design-tools code { font-family: var(--font-mono); font-size: 13px; color: var(--data); margin-right: 8px; } /* ---- cells hub: the condition grid ---------------------------------- */ .cot table.grid-map { width: 100%; border-collapse: collapse; margin: 0 0 14px; } .cot .grid-map thead th { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.06em; text-transform: uppercase; color: var(--data); text-align: left; padding: 10px 12px; border-bottom: 1px solid var(--rule); } .cot .grid-map tbody th { font-family: var(--font-host); font-style: italic; font-weight: 400; font-size: 15.5px; color: var(--ink-soft); text-align: left; padding: 14px 12px; border-bottom: 1px solid var(--rule-soft); width: 38%; } .cot .grid-map td { border: 1px solid var(--rule-soft); padding: 0; vertical-align: top; } .cot .grid-map td a, .cot .grid-map td .tile { display: block; padding: 12px; } .cot .grid-map td a { color: var(--ink); border-bottom: none; } .cot .grid-map td a:hover { background: var(--paper); } .cot .grid-map .tile-name { display: block; font-family: var(--font-host); font-size: 17px; } .cot .grid-map .tile-flag { font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--data-soft); } .cot .grid-map td .tile .tile-name { color: var(--ink-faint); } @media (max-width: 640px) { .cot .grid-map tbody th { font-size: 13.5px; padding: 12px 8px; width: 32%; } .cot .grid-map td a, .cot .grid-map td .tile { padding: 10px 8px; } .cot .grid-map .tile-name { font-size: 15px; } } /* ---- cell spec panel ("what this cell is") --------------------------- */ .cot .cell-spec { background: var(--paper); border: 1px solid var(--rule); padding: 22px 24px 20px; margin: 0 0 56px; } .cot .cell-spec-head { font-family: var(--font-sans); font-weight: 500; font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--data); margin: 0 0 18px; } .cot .cell-spec-body { display: flex; gap: 30px; align-items: flex-start; } .cot .spec-grid-wrap { flex: 0 0 auto; text-align: center; } .cot .spec-grid { display: grid; grid-template-columns: repeat(2, 20px); grid-auto-rows: 20px; gap: 5px; } .cot .spec-dot { border: 1px solid rgba(20, 24, 18, 0.10); border-radius: 2px; } /* each square carries its own cell's forest shade (design GridMap) */ .cot .spec-dot-1 { background: var(--cell-1); } .cot .spec-dot-2 { background: var(--cell-2); } .cot .spec-dot-3 { background: var(--cell-3); } .cot .spec-dot-4 { background: var(--cell-4); } .cot .spec-dot-5 { background: var(--cell-5); } .cot .spec-dot-6 { background: var(--cell-6); } /* the current cell is ringed in ink, not recolored */ .cot .spec-dot.is-here { box-shadow: 0 0 0 1.5px var(--paper), 0 0 0 3px var(--ink); } .cot .spec-grid.is-outside .spec-dot { opacity: 0.45; } .cot .spec-grid-caption { display: block; margin-top: 8px; font-family: var(--font-mono); font-size: 10.5px; letter-spacing: 0.06em; color: var(--data-soft); max-width: 90px; } .cot .spec-rows { flex: 1; margin: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 14px 30px; } .cot .spec-rows dt { font-family: var(--font-sans); font-weight: 500; font-size: 10.5px; letter-spacing: 0.07em; text-transform: uppercase; color: var(--data-soft); margin: 0 0 3px; } .cot .spec-rows dd { margin: 0; font-family: var(--font-host); font-size: 15.5px; line-height: 1.5; color: var(--ink); } .cot .spec-design-link { display: inline-block; margin-top: 16px; font-family: var(--font-host); font-style: italic; font-size: 14.5px; color: var(--ink-soft); } @media (max-width: 640px) { .cot .cell-spec-body { flex-direction: column; gap: 18px; } .cot .spec-grid-caption { max-width: none; } }