/* vibes-css:begin — generated from vibes/defs/ledger.js by tools-check/vibes-css.mjs. Do not edit between the markers: change the definition, then run it with --write. */ :root[data-vibe="ledger"] { --shape-rule-ink: #6b8876; --shape-rule-hair: 1px; --shape-rule-head-0: 2px; --shape-rule-head-1: 0; --shape-rule-head-2: 0; --shape-rule-sub-0: 1px; --shape-rule-sub-1: 0; --shape-rule-sub-2: 0; --shape-rule-total-0: 1px; --shape-rule-total-1: 0; --shape-rule-total-2: 0; --shape-leader-ink: #6b8876; --shape-leader-dot: 1px; --shape-leader-pitch: 4px; --shape-leader-min: 16px; --shape-band-fill: #22372b; --shape-band-ink: #f1ead8; --shape-band-height: 30px; --shape-gutter: 2px; --shape-keyline-ink: #b8bda7; --shape-keyline-width: 1px; --shape-lead-keyline: 0; --shape-cue-ink: #ffb3c8; --shape-chosen-tick: 1; --shape-rank-column: 0; --rack: #0e1813; --bar: #1c2e23; --collar: #2a3f33; --knurl: #6b8876; --chalk: #f1ead8; --steel: #b8bda7; --dim: #9ca38d; --p-red: #ff7856; --p-blue: #6aaaf8; --p-yellow: #ffe07a; --p-green: #36bf9c; --p-white: #efe9dc; --p-chrome: #7f878e; --good: #36bf9c; --warn: #ffe07a; --bad: #ff7856; --ink-plate: #0e1813; --accent: #ffb3c8; --focus: #ffb3c8; --accent-press: #f09ab2; --ink: #0e1813; --danger: #ff7856; --on-danger: #0e1813; --done: #36bf9c; --ink-go: #0e1813; --well: #0e1813; --knockout: #0e1813; --inverse: #f1ead8; --cal-mark: #fcfcfa; --raised: #22372b; --track: #2d3431; --grip: #6b8876; --faint: #9ca38d; --knob: #f1ead8; --greet-name: #f1ead8; --tint-runway: rgba(14,24,19,.55); --tint-runway-edge: rgba(14,24,19,.7); --type-tag-size: 11px; --type-tag-ls: 0em; --type-tag-upper: none; --type-tag-wdth: 100; --type-tag-wght: 600; --font: 'ledger-manuale', ui-serif, Georgia, serif; --font-mono: ui-monospace, monospace; --font-display: 'ledger-heads', 'Archivo', system-ui, -apple-system, sans-serif; --font-italic: 'ledger-manuale', ui-serif, Georgia, serif; --font-num: 'ledger-num', 'ledger-manuale', ui-serif, Georgia, serif; --r: 4px; --r-sm: 2px; --r-sheet: 18px; --r-tile: 2px; --r-pill: 999px; --r-plate: 2px; --r-chip: 2px; --r-mark: 2px; --r-idx: 2px; --r-round: 50%; --r-hair: 1px; --r-bubble: 2px; --r-badge: 2px; --shadow-peek: none; --shadow-rest: none; --shadow-toast: none; --shadow-fab: none; --shadow-fab-pressed: none; --shadow-tour-card: 0 18px 50px rgba(0,0,0,.55); --shadow-cal-tick: 0 0 0 1px rgba(14,24,19,.55); --shadow-flame: inset 0 0 0 1px rgba(255,179,200,.35); --shadow-kpi-day: inset 0 0 0 1.2px #6b8876; --shadow-kpi-day-on: none; --shadow-kpi-today: 0 0 0 1.5px #0e1813, 0 0 0 2.5px #b8bda7; --shadow-kpi-today-on: 0 0 0 1.5px #0e1813, 0 0 0 2.5px #f1ead8; --shadow-guide-eaten: inset 0 0 0 1px #6b8876; --shadow-traj-good: 0 0 0 4px rgba(54,191,156,.18); --shadow-traj-warn: 0 0 0 4px rgba(255,224,122,.18); --shadow-traj-bad: 0 0 0 4px rgba(255,120,86,.18); --shadow-tour-lit: 0 0 0 2px #ffb3c8; --shadow-cal-head: none; --shadow-cal-target: none; --blur-sheet: blur(3px); --blur-dock: none; --blur-wk-bar: none; --scrim-tour: linear-gradient(to bottom, rgba(14,24,19,.92) 0%, rgba(14,24,19,.92) 42%); --video-bg: #000000; --rack-rgb: 14,24,19; --shade-rgb: 0,0,0; --lift-rgb: 255,255,255; --accent-rgb: 255,179,200; --p-yellow-rgb: 255,224,122; --warn-rgb: 255,224,122; --p-red-rgb: 255,120,86; --bad-rgb: 255,120,86; --danger-rgb: 255,120,86; --p-blue-rgb: 106,170,248; --p-green-rgb: 54,191,156; --done-rgb: 54,191,156; --good-rgb: 54,191,156; --p-white-rgb: 239,233,220; --steel-rgb: 184,189,167; --tag-ink-w: #ffe07a; --tag-ink-f: #ff7856; --tag-ink-d: #6aaaf8; --ink-of-p-red: #ff7856; --ink-of-p-blue: #6aaaf8; --ink-of-p-yellow: #ffe07a; --ink-of-p-green: #36bf9c; --ink-of-p-white: #efe9dc; --ink-of-p-chrome: #b8bda7; } :root[data-vibe="ledger"] [data-tag] { font-size: var(--type-tag-size); letter-spacing: var(--type-tag-ls); text-transform: var(--type-tag-upper); font-variation-settings: 'wdth' var(--type-tag-wdth), 'wght' var(--type-tag-wght); } :root[data-vibe="ledger"] :where(.ai-cost, .cal-legend-item) { font-variation-settings: 'wdth' var(--type-tag-wdth), 'wght' var(--type-tag-wght); } :root[data-vibe="ledger"] :where(.plate-chip) { font-size: max(10px, var(--type-tag-size)); } :root[data-vibe="ledger"] :where(.cal-daynum) { font-size: max(12px, var(--type-tag-size)); } :root[data-vibe="ledger"] .ob-tip, :root[data-vibe="ledger"] .coach-bub.ask { border-left: 0; border-top: var(--shape-keyline-width) solid var(--accent); } :root[data-vibe="ledger"] .ob-tip { border-radius: 0 0 var(--r-sm) var(--r-sm); } /* vibes-css:end */ /* ========================================================================== LEDGER — the club's record book: ruled columns on bottle green. A DEEP vibe (V59 §2, "same order, new shapes"): every box, word and number is v1's, in v1's order; what changes is how each box is drawn. The spec, with every number measured and where it came from, is ~/dev/vibes-night/design/ledger.md; the colours above are generated from vibes/defs/ledger.js and are not restated here. What is below is what the tokens cannot say on the web: 1. the faces (@font-face; weight only through font-variation-settings); 2. the type presets, restated on the selectors whose native twin spends each (on the web a preset is literal CSS); 3. the measured surfaces (the Coach card, the goal, movement and feel chips, the estimator's rows), which keep Archivo on v1's metrics; 4. the looks the definition names (design/VOCAB.md, vocab.js v3), and the tints rack.css writes as literal alphas where Ledger's differ. SPECIFICITY. A preset is `[data-vibe="ledger"] :where(.x)`, (0,1,0), the same as rack.css's `.x`, which it beats by coming later, and below any local resize rack.css writes as `.parent .x` (.ex-actions .btn, .peek-bar .timer …), which keeps winning, as it does in v1. A look is written at (0,2,0) or more, because it replaces v1's drawing outright. THE DEVICES. Rules are drawn in shape.rule.ink (knurl: 4.67 on the page, 3.69 on bar) at two weights — 2pt opens a chapter (a section head, the masthead, the dock), 1pt an article (a card, an exercise) — and a head HANGS from its rule (shape.rule.place 'above'). Leaders are drawn dots (shape.leader: 1pt on a 4pt pitch), never typed characters. The one fill on a tab is its lead: the Coach card on You and Train, Fuel's summary. Pink is "here, now" only: never a button, never data, never a wash. ========================================================================== */ /* ---------- the faces ---------- Manuale (Omnibus-Type; OFL 1.1, no Reserved Font Name) for every word and figure, and Archivo at wdth 75 (the same foundry's; OFL 1.1) for the heads. Cut by tools/ledger-fonts-d1/build.mjs; OFL.txt, OFL-Archivo.txt and FONTS.json sit beside the files. Named for the vibe, so an installed face never stands in. Manuale's default figures are tabular lining at every weight, so no feature is needed to set a number. The digits file is the Vibes card's figure alone (--font-num): the one Ledger file every device prefetches for the picker. */ @font-face { font-family: 'ledger-manuale'; src: url(ledger/fonts/ledger-manuale.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; } @font-face { font-family: 'ledger-num'; src: url(ledger/fonts/ledger-num.woff2) format('woff2'); font-weight: 400 800; font-style: normal; font-display: swap; unicode-range: U+0030-0039; } @font-face { font-family: 'ledger-heads'; src: url(ledger/fonts/ledger-heads.woff2) format('woff2'); font-weight: 600 800; font-style: normal; font-display: swap; } /* ---------- type presets (vibes/defs/ledger.js `type`) ---------- Weights have one job each: 400 running text, 600 labels and names, 700 figures, buttons and heads. Manuale has no wdth axis, so rack.css's 'wdth' settings fall away on their own; only the weight is restated. Where v1 sets 800 the native face snaps to Bold (face.snap), so the web sets 700 there too: the two clients draw one weight. */ /* body: 16 / 400 / 1.45 — Manuale's x-height is .93 of Archivo's, so 16 here is v1's 15 to the eye. */ [data-vibe="ledger"] body { font-size: 16px; } /* h1 / h2 / h3 and the greeting: the condensed heads (native's face band, ArchivoCondensed_700). Sentence case, untracked. */ [data-vibe="ledger"] :where(h1, h2, h3, .you-greet, .you-sec-t, .auth-title, .gate-title, .ob-title) { font-family: var(--font-display); font-variation-settings: 'wght' 700; letter-spacing: 0; font-synthesis: none; } [data-vibe="ledger"] :where(h1) { font-size: 34px; line-height: 1.1; } [data-vibe="ledger"] :where(h2) { font-size: 26px; line-height: 1.1; } [data-vibe="ledger"] :where(h3) { font-size: 22px; line-height: 1.15; } /* eyebrow: a label, not a head — 13 / 600 steel, as authored. The card heads, the screen and sheet kickers, the weekday row. */ [data-vibe="ledger"] :where(.eyebrow) { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--steel); font-variation-settings: 'wght' 600; } /* statLbl and fieldLbl: 13 / 600 steel, as authored — the stat labels, the KPI label, the set table's column heads ("Set lb Reps e1RM"), the weekday letters, "Per side", every field's label. */ [data-vibe="ledger"] :where(.stat-lbl, .kpi-lbl, .field-lbl, .ring-lbl), [data-vibe="ledger"] .set-hd, [data-vibe="ledger"] .cal-dow :where(span), [data-vibe="ledger"] .plate-strip :where(.lbl), [data-vibe="ledger"] .field :where(label) { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--steel); font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .field label :where(.opt) { letter-spacing: 0; color: var(--dim); font-variation-settings: 'wght' 400; } /* note and meta: a record book's footnote is simply smaller type, roman. */ [data-vibe="ledger"] :where(.note) { font-size: 13px; line-height: 1.5; color: var(--dim); } [data-vibe="ledger"] :where(.card-sub, .fe-sub, .pr-sub, .pb-sub, .rank-sub, .sess-sub, .fuel-eaten, .summary-date, .kpi-prev, .field-hint, .set-row-sub) { font-size: 13px; letter-spacing: 0; color: var(--dim); } [data-vibe="ledger"] :where(.you-sub) { font-size: 13px; color: var(--steel); } /* btn / btnLg: 16 / 600 and 17 / 700, untracked, sentence case as authored ("Start workout"). Local resizes (.ex-actions .btn 12 …) keep winning. */ [data-vibe="ledger"] :where(.btn) { line-height: 1.25; letter-spacing: 0; font-variation-settings: 'wght' 600; } /* The size, except where rack.css resizes a button by its own one class (the lifting block's buttons, + Drop, Steps' quick adds): those keep winning, as the two-class resizes do. */ [data-vibe="ledger"] :where(.btn:not(.wk-block-btn, .wk-block-add, .drop-add, .st-inc, .st-set)) { font-size: 16px; } [data-vibe="ledger"] :where(.btn-lg) { font-size: 17px; letter-spacing: 0; text-transform: none; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.back-btn) { font-size: 13px; letter-spacing: 0; font-variation-settings: 'wght' 600; } /* dockLbl: 11 / 600 dim, sentence case; the active one chalk at 700. */ [data-vibe="ledger"] .dock button { font-size: 11px; letter-spacing: 0; text-transform: none; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .dock button.active { font-variation-settings: 'wght' 700; } /* chip / segBtn: 13 / 600 steel, sentence case */ [data-vibe="ledger"] :where(.chip) { font-size: 13px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] :where(.seg-btn) { font-size: 13px; letter-spacing: 0; text-transform: none; font-variation-settings: 'wght' 600; } /* The figures: statVal, kpiVal, timer 22 / 700; headline 32 / 700; loadNum 700 at the call sites' own sizes; every other figure v1 sets at 800 (a row's value, a ring's count) at 700. Tabular by the face's default. */ [data-vibe="ledger"] :where(.stat-val) { font-size: 22px; line-height: 1; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.kpi-val) { font-size: 22px; letter-spacing: 0; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.timer) { font-size: 22px; letter-spacing: 0; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.headline-v) { font-size: 32px; letter-spacing: -.01em; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.load-num) { letter-spacing: -.01em; line-height: 1; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.fe-cal, .pr-val, .pb-val, .rank-val, .rank-no, .sess-e1, .mini-stat-v, .adm-n, .ob-num-v, .donut-top, .ring-top, .st-ring-n, .chart-peak-lbl, .plate-chip, .qty-row input, .you-avatar, .you-name, .st-flame, .review-verdict, .badge, .delta-a) { font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .thesis-line :where(b) { font-variation-settings: 'wght' 700; } /* setInput: 17 / 700 chalk, a step up to read between sets; 17 is over the web's 16, so iOS never zooms. */ [data-vibe="ledger"] .ex-block .set-row input, [data-vibe="ledger"] .rt-sets .set-row input { font-size: 17px; font-variation-settings: 'wght' 700; } /* ---------- the measured surfaces: Archivo, on v1's metrics ---------- The Coach card (190 / 164), the goal chips, the recap's feel chips, the movement chips and the estimator's row were fitted in Archivo (coach-view.js CARD_TYPE, tools-check/touch-target.mjs, coach-surface.mjs). They keep v1's face — loaded by rack.css line 1 for everyone, so no new bytes — and every size, weight and width rack.css gives them; their skin is Ledger's. Native draws the same in MEASURED_FACE / T.fit.archivo (the spec's decision d). */ [data-vibe="ledger"] :where(.coach-card, .coach-goal-opt, .move-opt, .pe-row), [data-vibe="ledger"] .feel-grid :where(.coach-chip) { font-family: 'Archivo', system-ui, -apple-system, sans-serif; } /* ==================== the looks ==================== */ /* ---------- screenHeader · masthead ---------- The kicker (eyebrow, 13 / 600 steel: "Training log", "Fuel") over the title (h1, the condensed head at 34), and one 2pt rule full width under both: the record book's running-head rule, the one rule under a head. The month, day and gear buttons keep their place and their 34: square, on bar, with a knurl edge. The recap's hero is the same, its line and date under the title. */ [data-vibe="ledger"] .cal-hd { align-items: flex-end; padding-bottom: 10px; margin-bottom: 20px; border-bottom: var(--shape-rule-head-0) solid var(--shape-rule-ink); } [data-vibe="ledger"] .cal-hd > div:first-child { min-width: 0; } [data-vibe="ledger"] .cal-hd .eyebrow { margin-bottom: 2px; } [data-vibe="ledger"] .cal-nav button { border-color: var(--knurl); color: var(--chalk); font-size: 22px; line-height: 1; } [data-vibe="ledger"] .cal-nav button .glyph { width: 16px; height: 16px; } [data-vibe="ledger"] .summary-hero { padding-bottom: 12px; margin-bottom: 20px; border-bottom: var(--shape-rule-head-0) solid var(--shape-rule-ink); } [data-vibe="ledger"] .summary-line { font-size: 16px; } /* ---------- sectionHeader · rule ---------- A 2pt rule at full width, 32 above it; the title hangs 6 under it in h3, the condensed head at 22, chalk, as authored ("How you're doing"); 12 to the first card. No trailing hairline. You, Settings and the admin. */ [data-vibe="ledger"] .you-sec { margin-top: 32px; } [data-vibe="ledger"] .you-sec-t { display: block; padding-top: 6px; margin-bottom: 12px; border-top: var(--shape-rule-head-0) solid var(--shape-rule-ink); font-size: 22px; line-height: 1.15; text-transform: none; color: var(--chalk); } [data-vibe="ledger"] .you-sec-t::after { display: none; } /* ---------- card · ruled, youCard · ruled ---------- No ground, border or corner: each card hangs 6 under a full-width 1pt rule (rule.sub, place 'above'), its content to the rule's width; cards part by 24. The head row: the title in eyebrow, the meta and the drawn ⋯ at the right. "Doing well" and "Could improve" ink their head rule good / warn, never a side stripe; which is which stays in the title words. The PR card loses v1's gradient; its head rule is the ribbon. */ [data-vibe="ledger"] .card { background: none; border: 0; border-top: var(--shape-rule-sub-0) solid var(--shape-rule-ink); border-radius: 0; padding: 6px 0 0; margin-bottom: 24px; } [data-vibe="ledger"] .card.card-wins { border-top-color: var(--good); } [data-vibe="ledger"] .card.card-improve { border-top-color: var(--warn); } [data-vibe="ledger"] .card.pr-card { border-top-color: var(--accent); } [data-vibe="ledger"] .you-pair .card { padding: 6px 0 0; margin-bottom: 0; } [data-vibe="ledger"] .you-pair { gap: 20px; } [data-vibe="ledger"] .card-hd .ex-menu .glyph, [data-vibe="ledger"] .card-why .glyph { width: 16px; height: 16px; } /* The tab's lead keeps a box (vocab card · ruled): Fuel's summary — bar ground, radius 4, no border (shape.lead.keyline false), v1's padding. */ [data-vibe="ledger"] .card.fuel-sum { background: var(--bar); border: 0; border-radius: var(--r); padding: 14px; } /* Weight's log and Steps' today are hero-slot cards, and Ledger draws no photo: the open lead — no ground, no sides, the head rule (2pt) across its top. */ [data-vibe="ledger"] .card[data-lead="weightLog"], [data-vibe="ledger"] .card[data-lead="stepsToday"] { border-top-width: var(--shape-rule-head-0); padding-top: 10px; } /* A card straight under a masthead hangs from the masthead's own rule: a second rule a step under it would box the title in. */ [data-vibe="ledger"] .cal-hd + .card:not(.fuel-sum), [data-vibe="ledger"] .summary-hero + .card, [data-vibe="ledger"] .you-sec-t + .card:not(.card-wins, .card-improve, .pr-card), [data-vibe="ledger"] .you-sec-t + .you-pair > .card { border-top: 0; padding-top: 0; } /* Fuel's empty meal card stays one line. */ [data-vibe="ledger"] .meal-blank { padding-bottom: 0; } [data-vibe="ledger"] .meal-kcal { font-size: 13px; color: var(--steel); } [data-vibe="ledger"] .meal-blank .meal-kcal { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--dim); } /* ---------- youHero · v1 ---------- Avatar | greeting | gear, as v1 places them. The greeting in the condensed head at 34, one ink (colors.greetName). The name keeps v1's ellipsis, so its box clips: grown by padding and handed back as margin, so no ascender or descender is cut. The gear square, on bar, knurl-edged, Ledger's own. */ [data-vibe="ledger"] .you-greet { font-size: 34px; line-height: 1.1; } [data-vibe="ledger"] .you-greet-name { padding: 2px 0 4px; margin: -2px 0 -4px; } [data-vibe="ledger"] .you-gear { border-color: var(--knurl); color: var(--chalk); } [data-vibe="ledger"] .you-gear svg { width: 18px; height: 18px; } /* ---------- coachCard · flat ---------- The lead box on You and Train: bar ground, the 1pt border in the ground's own colour, radius 4. Height, padding, face and every line's clamp are v1's (cardLayout()). A press still shows knurl (rack.css .coach-card:active outranks the :where). */ [data-vibe="ledger"] :where(.coach-card) { border-color: var(--bar); } /* ---------- sheetHost · v1, sheetTitle · rule ---------- The platform sheet in Ledger's tokens. The title (h2, the condensed head at 26) over a 1pt hairline at the sheet's content width; its eyebrow above. */ [data-vibe="ledger"] .sheet h2 { padding-bottom: 8px; margin-bottom: 10px; border-bottom: var(--shape-rule-hair) solid var(--shape-rule-ink); } /* A sheet whose first thing is a chapter (the Settings hub: "You" on its 2pt rule) lets the chapter's rule be the one under the title: a hairline and a 2pt rule a step apart would box the title in. */ [data-vibe="ledger"] .sheet h2:has(+ .you-sec) { border-bottom: 0; padding-bottom: 0; } [data-vibe="ledger"] .sheet .field input, [data-vibe="ledger"] .sheet .field select, [data-vibe="ledger"] .sheet .field textarea { background: var(--well); } /* ---------- statRow · line ---------- A box-score line: no ground, no outer border; the values on one baseline (22 / 700, in the caller's colour), a 1pt collar rule between the columns, the labels under them. Height is v1's (its padding and a transparent 1pt border), so nothing below moves. The mini stats are the same, two to a line. A value never truncates. */ [data-vibe="ledger"] .stat, [data-vibe="ledger"] .mini-stat { background: none; border-color: transparent; border-radius: 0; } [data-vibe="ledger"] .stat-row { gap: 0; } [data-vibe="ledger"] .stat + .stat { border-left-color: var(--collar); } [data-vibe="ledger"] .stat:first-child { padding-left: 0; } [data-vibe="ledger"] .mini-stats { gap: 6px 0; } [data-vibe="ledger"] .mini-stat:nth-child(even) { border-left-color: var(--collar); } [data-vibe="ledger"] .mini-stat:nth-child(odd) { padding-left: 0; } [data-vibe="ledger"] .stat-val { white-space: nowrap; } /* The recap's session totals: a stat line under the total rule (shape.rule.total, 1pt). */ [data-vibe="ledger"] .summary-page > .stat-row { border-top: var(--shape-rule-total-0) solid var(--shape-rule-ink); padding-top: 6px; } /* ---------- kpi · word ---------- No tiles, no corner tint: the 2 × 2 grid in its order. The label; the delta in its pill (the copy names it, you.js:802) at tint.pill*, its signed figure and arrow at type.pill 13 / 700; the figure 22 / 700 with its unit 13 / 400 steel on its baseline; "last week …" 13 dim; the sparkline word-sized; the seven round day dots, today ringed. */ [data-vibe="ledger"] .kpi-grid { gap: 22px 20px; } [data-vibe="ledger"] .kpi { background: none; border-color: transparent; border-radius: 0; padding: 0; } [data-vibe="ledger"] .kpi-unit { font-size: 13px; letter-spacing: 0; color: var(--steel); font-variation-settings: 'wght' 400; } [data-vibe="ledger"] .delta-pill { background: rgba(var(--lift-rgb),.06); } [data-vibe="ledger"] .delta-pill .delta-v, [data-vibe="ledger"] .delta-pill .delta-a { font-size: 13px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .delta-l { font-size: 13px; letter-spacing: 0; } [data-vibe="ledger"] .kpi .chart-spark { width: 72px; margin-top: 8px; } [data-vibe="ledger"] .kpi .spark-line, [data-vibe="ledger"] .kpi .spark-line-dim { stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } [data-vibe="ledger"] .kpi-days { margin-top: 9px; } /* ---------- headline · v1 ---------- The figure alone, set by type (above): Manuale Bold 32 on You, loadNum at the call sites' own sizes. Its unit beside it, as authored, 13 steel. */ [data-vibe="ledger"] .headline-u { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--steel); font-variation-settings: 'wght' 400; } /* ---------- chip · tag ---------- Raised ground, no border, radius 2, 13 / 600 steel; chosen = inverted, cream with green words. The 44pt chips (Movement, feel, goal) stay 44. The Coach's topic chips are tags too. */ [data-vibe="ledger"] .chip, [data-vibe="ledger"] .move-opt, [data-vibe="ledger"] .coach-goal-opt, [data-vibe="ledger"] .coach-chip { background: var(--raised); border-color: transparent; border-radius: var(--r-chip); color: var(--steel); } [data-vibe="ledger"] .coach-chip { color: var(--chalk); } [data-vibe="ledger"] .chip.on, [data-vibe="ledger"] .move-opt.on, [data-vibe="ledger"] .coach-goal-opt.on, [data-vibe="ledger"] .feel-card .coach-chip.on, [data-vibe="ledger"] .coach-effort.on { background: var(--inverse); border-color: var(--inverse); color: var(--knockout); } [data-vibe="ledger"] .coach-chip:active { border-color: transparent; background: var(--grip); } /* ---------- segmented · tabs ---------- No track: the options as words at equal widths; the chosen one in chalk at 700 over a 2pt underline in the ribbon (shape.cue.ink) — the underline is the cue. At least v1's height (11 + 18.9 + 11 against v1's 40). */ [data-vibe="ledger"] .seg { gap: 0; padding: 0; background: none; border: 0; border-radius: 0; box-shadow: inset 0 calc(-1 * var(--shape-rule-hair)) 0 var(--collar); } [data-vibe="ledger"] .seg-btn { padding: 11px 4px; border-radius: 0; color: var(--steel); } [data-vibe="ledger"] .seg-btn.on { background: none; color: var(--chalk); box-shadow: inset 0 -2px 0 var(--shape-cue-ink); font-variation-settings: 'wght' 700; } /* ---------- btn · inverse ---------- Primary: a cream slab with green words, radius 2 — the most prominent control on its screen; the pink never fills a button. Plain: raised. Ghost: no box, its words underlined 1pt in steel, the 44 kept. Danger: a square pRed keyline and pRed words. Pressed .97, disabled .4 (v1's). */ [data-vibe="ledger"] .btn-primary { background: var(--inverse); color: var(--knockout); } [data-vibe="ledger"] .btn-ghost { background: transparent; border-color: transparent; color: var(--steel); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } [data-vibe="ledger"] .btn-ghost:active { color: var(--chalk); } /* A ghost that holds a drawn glyph alone (− + in the portion row, ⋯) has no word to underline: it keeps a box, a knurl keyline at its v1 size. */ [data-vibe="ledger"] .btn-ghost:has(> .glyph:only-child), [data-vibe="ledger"] .qty-row .btn-ghost, [data-vibe="ledger"] .water-ctl .water-mini { border-color: var(--knurl); color: var(--chalk); text-decoration: none; } [data-vibe="ledger"] .btn .glyph { width: 16px; height: 16px; } /* Foods and Meals: the word underlined, the icon and the count not. */ [data-vibe="ledger"] .add-secondary .btn-ghost { text-decoration: none; } [data-vibe="ledger"] .add-secondary .btn-ghost > span:not(.cnt) { text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 4px; } /* A count is a square badge: onAccent on the ribbon (10.82). */ [data-vibe="ledger"] .cnt, [data-vibe="ledger"] .add-secondary .cnt { border-radius: var(--r-badge); border-color: var(--accent); background: var(--accent); color: var(--ink); font-size: 11px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .badge { border-radius: var(--r-badge); } [data-vibe="ledger"] .linkish { color: var(--steel); text-decoration-color: var(--steel); font-variation-settings: 'wght' 600; } /* ---------- field · square ---------- A box, because the copy says "this box" (food.js). Radius 2 and a knurl edge (4.67 on the page, 3.69 on bar); in a sheet the ground is the well (the page), on the page bar. Focus turns the edge to the ribbon (rack.css's :focus rules). Placeholders in dim (5.49 on bar), as native draws them. */ [data-vibe="ledger"] .field :where(input, select, textarea), [data-vibe="ledger"] .qty-row :where(input), [data-vibe="ledger"] .picker-search :where(input), [data-vibe="ledger"] :where(.paste-box) { border-color: var(--knurl); border-radius: var(--r-plate); } [data-vibe="ledger"] ::placeholder { color: var(--dim); opacity: 1; } /* The search's sticky strip takes the ground it sticks over. */ [data-vibe="ledger"] .picker-search { background: var(--ledger-ground, var(--rack)); } /* ---------- toast · strip ---------- A cream slip the content's width, square, the words flush left in green (15.10), no shadow, in its place 16 above the dock. */ [data-vibe="ledger"] .toast { border-radius: 0; text-align: left; font-size: 14px; font-variation-settings: 'wght' 600; } /* ---------- settingsRow · ledger ---------- The label (16 / 400 chalk), a drawn leader (knurl dots, 1 on a 4 pitch), the value (13 steel, tabular), the chevron. No rules between rows; one 1pt hairline under the group. 44 tall, full-width taps. The leader runs only on a row that has a value and whose label is one line of words; a label holding lines of its own (the owner's account rows, Coach's goal rows) stays v1's block, so nothing is squeezed. */ [data-vibe="ledger"] .set-list { border-bottom: var(--shape-rule-hair) solid var(--shape-rule-ink); } [data-vibe="ledger"] .set-list .set-row-nav, [data-vibe="ledger"] .set-list .set-row-tog { border-top: 0; } [data-vibe="ledger"] .set-row-nav { min-height: 44px; } [data-vibe="ledger"] .set-row-l { font-size: 16px; font-variation-settings: 'wght' 400; } [data-vibe="ledger"] .set-row-v { font-size: 13px; } [data-vibe="ledger"] .set-row-nav:has(> .set-row-v):not(:has(> .set-row-l > *)) > .set-row-l { flex: 0 1 auto; } [data-vibe="ledger"] .set-row-nav:has(> .set-row-v):not(:has(> .set-row-l > *))::after { content: ''; order: 1; flex: 1 1 var(--shape-leader-min); min-width: var(--shape-leader-min); align-self: center; margin-top: .45em; height: var(--shape-leader-dot); background: radial-gradient(circle, var(--shape-leader-ink) 0 calc(var(--shape-leader-dot) / 2), transparent calc(var(--shape-leader-dot) / 2 + .25px)) 0 0 / var(--shape-leader-pitch) var(--shape-leader-dot) repeat-x; } [data-vibe="ledger"] .set-row-nav > .set-row-v, [data-vibe="ledger"] .set-row-nav > .set-row-x { order: 2; } [data-vibe="ledger"] .set-row-nav:active { background: rgba(var(--lift-rgb),.05); } [data-vibe="ledger"] .set-row-x .glyph { width: 16px; height: 16px; vertical-align: -3px; } /* ---------- listRow · ledger ---------- On name … value rows (a food entry, a PB, a PR, a rank, a session, a day's steps): the name 16 / 400 chalk, its sub-line 13 dim under it, a drawn leader on the name's line to the value, the value alone bold (Manuale 16 / 700, never truncated): bold only the ranked column. A record row (the recap's PR hits, Stats' PR rows, You's Strongest lifts) sets its value in a keyline cell (shape.keyline): the record cell. Rows of another shape draw as plain. No rules between rows; a 44 pitch. */ [data-vibe="ledger"] .food-entry, [data-vibe="ledger"] .pb-row, [data-vibe="ledger"] .pr-hit, [data-vibe="ledger"] .pr-row, [data-vibe="ledger"] .rank-row, [data-vibe="ledger"] .sess-row, [data-vibe="ledger"] .st-row, [data-vibe="ledger"] .ex-item, [data-vibe="ledger"] .find-row, [data-vibe="ledger"] .review-row, [data-vibe="ledger"] .rt-pv-row, [data-vibe="ledger"] .day-ex, [data-vibe="ledger"] .guide-row, [data-vibe="ledger"] .adm-r, [data-vibe="ledger"] .water-entry { border-top: 0; border-bottom: 0; min-height: 44px; } [data-vibe="ledger"] .st-row, [data-vibe="ledger"] .water-entry { background: none; } [data-vibe="ledger"] .water-entry { padding-left: 0; padding-right: 0; } [data-vibe="ledger"] .rt-item, [data-vibe="ledger"] .person { background: none; border: 0; border-radius: 0; padding-left: 0; padding-right: 0; margin-bottom: 0; min-height: 44px; } [data-vibe="ledger"] :where(.fe-name, .pr-name, .rank-name, .pb-lbl, .sess-date, .st-row-d) { font-size: 16px; font-variation-settings: 'wght' 400; } [data-vibe="ledger"] :where(.fe-cal, .pr-val, .pb-val, .rank-val, .sess-e1, .st-row-n) { font-size: 16px; line-height: 1.2; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.ex-item .nm, .rt-pv-row, .day-ex) { font-variation-settings: 'wght' 400; } [data-vibe="ledger"] .ex-item .nm { font-size: 16px; } [data-vibe="ledger"] .ex-item .eq { font-size: 11px; letter-spacing: 0; text-transform: none; } /* The leader. A row's body (the name, its sub-line under it, and on You's Strongest lifts the lift's bar) takes the row's free width, and its ground carries the drawn dots on the name's baseline; the name, sized to its words, covers them in the ground it sits on, so the dots run from the end of the name to the end of the body, and the value follows on that line. The name keeps v1's ellipsis. (The weigh-in rows end in a drawn ✕, not a figure: no leader to a delete mark. The estimator's rows are a measured surface and keep v1's drawing.) --ledger-ground is the ground a row lies on: the page, or bar in a sheet and in Fuel's lead. */ [data-vibe="ledger"] :where(.sheet, .card.fuel-sum) { --ledger-ground: var(--bar); } [data-vibe="ledger"] .food-entry:not(.pe-row):not(:has(> .fe-cal > .glyph)), [data-vibe="ledger"] .pb-row, [data-vibe="ledger"] .pr-hit, [data-vibe="ledger"] .pr-row, [data-vibe="ledger"] .rank-row, [data-vibe="ledger"] .sess-row { align-items: baseline; } [data-vibe="ledger"] .food-entry:not(.pe-row):not(:has(> .fe-cal > .glyph)) > .fe-body, [data-vibe="ledger"] .pb-row > div:first-child, [data-vibe="ledger"] .pr-body, [data-vibe="ledger"] .rank-body, [data-vibe="ledger"] .sess-row > div:first-child { flex: 1 1 auto; min-width: 0; background: radial-gradient(circle, var(--shape-leader-ink) 0 calc(var(--shape-leader-dot) / 2), transparent calc(var(--shape-leader-dot) / 2 + .25px)) 0 1.08em / var(--shape-leader-pitch) var(--shape-leader-dot) repeat-x; } [data-vibe="ledger"] .food-entry:not(.pe-row):not(:has(> .fe-cal > .glyph)) > .fe-body > .fe-name, [data-vibe="ledger"] .pb-row > div:first-child > .pb-lbl, [data-vibe="ledger"] .pr-body > .pr-name, [data-vibe="ledger"] .rank-body > .rank-name, [data-vibe="ledger"] .sess-row > div:first-child > .sess-date { width: fit-content; max-width: 100%; padding-right: 6px; background: var(--ledger-ground, var(--rack)); } [data-vibe="ledger"] .pr-hit > .pr-right, [data-vibe="ledger"] .pr-row > .pr-val, [data-vibe="ledger"] .pb-row > .pb-val, [data-vibe="ledger"] .rank-row > .rank-val, [data-vibe="ledger"] .sess-row > .sess-right, [data-vibe="ledger"] .food-entry > .fe-cal { padding-left: 6px; } [data-vibe="ledger"] .st-row::after { content: ''; min-width: var(--shape-leader-min); height: var(--shape-leader-dot); background: radial-gradient(circle, var(--shape-leader-ink) 0 calc(var(--shape-leader-dot) / 2), transparent calc(var(--shape-leader-dot) / 2 + .25px)) 0 0 / var(--shape-leader-pitch) var(--shape-leader-dot) repeat-x; } /* A day's steps: the grid gains the leader's column between the date and the figure. */ [data-vibe="ledger"] .st-row { grid-template-columns: auto 1fr auto 46px; column-gap: 8px; } [data-vibe="ledger"] .st-row::after { grid-column: 2; grid-row: 1; align-self: center; margin-top: .45em; } [data-vibe="ledger"] .st-row > .st-row-d { grid-column: 1; grid-row: 1; } [data-vibe="ledger"] .st-row > .st-row-n { grid-column: 3; grid-row: 1; } [data-vibe="ledger"] .st-row > .st-row-p { grid-column: 4; grid-row: 1; font-size: 13px; } /* The record cell: the value in a 1pt steel keyline, square. v1 inks a PR's figure in the accent; here the ribbon stays off data. */ [data-vibe="ledger"] .pr-val, [data-vibe="ledger"] #view-you .pb-val, [data-vibe="ledger"] .sess-row.is-pr .sess-e1 { padding: 2px 6px; border: var(--shape-keyline-width) solid var(--shape-keyline-ink); border-radius: var(--r-sm); color: var(--chalk); } [data-vibe="ledger"] .sess-row.is-pr { background: none; } /* A finding's mark: a short ruled dash in its subject's ink, on the first line — not a round bullet. */ [data-vibe="ledger"] .find-mark { width: 10px; height: 2px; border-radius: 0; margin-top: 11px; } [data-vibe="ledger"] .find-t { font-size: 16px; line-height: 1.4; font-variation-settings: 'wght' 400; } /* A chosen row: the chalk .07 leaf and a drawn tick, never colour alone. */ [data-vibe="ledger"] .ex-item.sel { background: color-mix(in srgb, var(--chalk) 7%, transparent); } [data-vibe="ledger"] .ex-item.sel::after { content: ''; flex: none; width: 6px; height: 11px; margin: 0 8px 4px 2px; border: solid var(--chalk); border-width: 0 2px 2px 0; transform: rotate(45deg); } [data-vibe="ledger"] .ex-go .glyph, [data-vibe="ledger"] .rt-go .glyph { width: 16px; height: 16px; vertical-align: -3px; } [data-vibe="ledger"] .ex-del .glyph { width: 13px; height: 13px; vertical-align: -2px; } [data-vibe="ledger"] .ex-menu .glyph { width: 18px; height: 18px; vertical-align: -3px; } [data-vibe="ledger"] .fe-cal .glyph { width: 13px; height: 13px; color: var(--dim); } /* Swipe to delete: the rows lie on the page, so the front takes the page's ground (in a sheet or the lead, the bar's); the red panel with green-black words (6.97) shows only as a row is pulled aside. */ [data-vibe="ledger"] .swipe-front { background: var(--rack); } [data-vibe="ledger"] .sheet .swipe-front, [data-vibe="ledger"] .card.fuel-sum .swipe-front { background: var(--bar); } [data-vibe="ledger"] .swipe-del { font-size: 13px; letter-spacing: 0; text-transform: none; font-variation-settings: 'wght' 700; } /* ---------- setTable · ruled, setRow · ruled ---------- No card: the exercise hangs from a 1pt rule. Its head: the group tag in the group's colour (it is data), the name in Manuale 17 / 700, the drawn ⋯. "Last …" 13 dim. The column heads in statLbl over the first row's rule. Rows parted by hairlines; the badge a bare figure (W / F / D in tagInk); the inputs on a 1pt rule, focus thickening it to 2pt in the ribbon; the check 30 × 30 with a knurl edge, done = the green fill with its tick and the done .10 row wash. The columns are v1's. */ [data-vibe="ledger"] .ex-block { background: none; border: 0; border-top: var(--shape-rule-sub-0) solid var(--shape-rule-ink); border-radius: 0; margin-bottom: 24px; } [data-vibe="ledger"] .ex-hd { padding: 8px 0 6px; } [data-vibe="ledger"] .ex-name { font-size: 17px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .ex-prev { padding: 0 0 8px 14px; font-size: 13px; } [data-vibe="ledger"] .ex-block .set-hd, [data-vibe="ledger"] .ex-block .set-row { padding-left: 0; padding-right: 0; } [data-vibe="ledger"] .ex-block .set-row, [data-vibe="ledger"] .rt-sets .set-row { border-top: var(--shape-rule-hair) solid var(--shape-rule-ink); } [data-vibe="ledger"] .ex-block .set-idx, [data-vibe="ledger"] .rt-sets .set-idx { background: transparent; color: var(--steel); font-size: 13px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .ex-block .set-idx.t-W, [data-vibe="ledger"] .rt-sets .set-idx.t-W { background: transparent; color: var(--tag-ink-w); } [data-vibe="ledger"] .ex-block .set-idx.t-F, [data-vibe="ledger"] .rt-sets .set-idx.t-F { background: transparent; color: var(--tag-ink-f); } [data-vibe="ledger"] .ex-block .set-idx.t-D, [data-vibe="ledger"] .rt-sets .set-idx.t-D { background: transparent; color: var(--tag-ink-d); } [data-vibe="ledger"] .set-idx .glyph { width: 13px; height: 13px; } [data-vibe="ledger"] .ex-block .set-row input, [data-vibe="ledger"] .rt-sets .set-row input { background: transparent; border-color: transparent; border-radius: 0; box-shadow: inset 0 -1px 0 var(--shape-rule-ink); } [data-vibe="ledger"] .ex-block .set-row input:focus, [data-vibe="ledger"] .rt-sets .set-row input:focus { border-color: transparent; box-shadow: inset 0 -2px 0 var(--focus); } [data-vibe="ledger"] .set-e1rm { font-size: 13px; } [data-vibe="ledger"] .set-check .glyph { width: 16px; height: 16px; } [data-vibe="ledger"] .ex-block .set-row.done { background: rgba(var(--done-rgb),.10); } [data-vibe="ledger"] .ex-block .set-row.flash { animation-name: ledger-set-flash; } @keyframes ledger-set-flash { 0% { background: rgba(var(--accent-rgb),.16); } 100% { background: rgba(var(--done-rgb),.10); } } [data-vibe="ledger"] .ex-block .set-row.drop::before, [data-vibe="ledger"] .rt-sets .set-row.drop::before { border-radius: 0; background: rgba(var(--p-blue-rgb),.70); } [data-vibe="ledger"] .drop-add { border-color: rgba(var(--p-blue-rgb),.45); } [data-vibe="ledger"] .ex-actions { padding: 10px 0 0; } [data-vibe="ledger"] .swipe-hint { padding-left: 14px; font-size: 11px; letter-spacing: 0; opacity: 1; } /* A lifting block: a rule-framed group under its title in 13 / 600 steel — no wash (tint.block 0), no keyline. */ [data-vibe="ledger"] .wk-block, [data-vibe="ledger"] .rt-pv-block { background: none; border: 0; border-top: var(--shape-rule-sub-0) solid var(--shape-rule-ink); border-bottom: var(--shape-rule-sub-0) solid var(--shape-rule-ink); border-radius: 0; } [data-vibe="ledger"] .wk-block-hd, [data-vibe="ledger"] .wk-block-body { padding-left: 0; padding-right: 0; } [data-vibe="ledger"] .wk-block-title { font-size: 13px; letter-spacing: 0; text-transform: none; color: var(--steel); font-variation-settings: 'wght' 600; } /* ---------- plateStrip · v1 ---------- "Per side" in statLbl (above); each plate a flat field in its plate colour, radius 2, its figures in page green (onPlate), Manuale Bold, at the tag's floor (11). */ [data-vibe="ledger"] .plate-strip { padding-left: 14px; padding-right: 0; } /* ---------- calCell · ruled: a printed month ---------- 1pt hairlines between cells, no grounds. Day numbers 13: dim untrained, chalk 600 trained, with up to four plate bars. Today boxed by a 2pt keyline in the ribbon and its number at 700 — keyline and weight, never colour alone. The weekday letters as authored, in eyebrow. Pad cells stay empty. */ [data-vibe="ledger"] .cal-dow { gap: 0; } [data-vibe="ledger"] .cal-grid { gap: 0; border-top: var(--shape-rule-hair) solid var(--shape-rule-ink); border-left: var(--shape-rule-hair) solid var(--shape-rule-ink); } [data-vibe="ledger"] .cal-day, [data-vibe="ledger"] .cal-day.empty, [data-vibe="ledger"] .cal-day.has-work { background: none; border: 0; border-right: var(--shape-rule-hair) solid var(--shape-rule-ink); border-bottom: var(--shape-rule-hair) solid var(--shape-rule-ink); border-radius: 0; } [data-vibe="ledger"] .cal-day.pad { visibility: visible; } [data-vibe="ledger"] .cal-day.today { box-shadow: inset 0 0 0 2px var(--shape-cue-ink); } [data-vibe="ledger"] .cal-daynum { font-size: 13px; font-variation-settings: 'wght' 400; } [data-vibe="ledger"] .cal-day.has-work .cal-daynum { color: var(--chalk); font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .cal-day.today .cal-daynum { color: var(--accent); font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .cal-legend-item { color: var(--steel); } [data-vibe="ledger"] .cal-legend-item i { border-radius: 0; } /* ---------- chart · ink ---------- Single-ink strokes: 1.5pt lines with square caps, no area wash and no glow (the pinned module's washes set to none), square-topped bars, rings with square caps, a solid collar grid, dashed targets in chalk. Every chart label 11 or more, in steel. analytics.js is pinned: this restyles what it draws and adds no geometry. */ [data-vibe="ledger"] .chart path[stroke="none"][fill^="url(#"], [data-vibe="ledger"] .spark-glow { display: none; } [data-vibe="ledger"] .chart-line { stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } [data-vibe="ledger"] .chart-line2 { stroke-linecap: butt; stroke-linejoin: miter; } [data-vibe="ledger"] .spark-line, [data-vibe="ledger"] .spark-line-dim { stroke-width: 1.5; stroke-linecap: square; stroke-linejoin: miter; } [data-vibe="ledger"] .chart-grid { stroke: var(--collar); stroke-dasharray: none; opacity: 1; } [data-vibe="ledger"] .chart-bar, [data-vibe="ledger"] .chart-bar-bg, [data-vibe="ledger"] .spark-bar, [data-vibe="ledger"] .chart clipPath rect, [data-vibe="ledger"] .heat rect { rx: 0; ry: 0; } [data-vibe="ledger"] .chart-target, [data-vibe="ledger"] .spark-ref { stroke: var(--chalk); opacity: 1; } [data-vibe="ledger"] .chart-axis, [data-vibe="ledger"] .chart-barval, [data-vibe="ledger"] .chart-peak-lbl { font-size: 11px; letter-spacing: 0; } [data-vibe="ledger"] .chart-axis { fill: var(--steel); } [data-vibe="ledger"] .chart-foot, [data-vibe="ledger"] .traj-ends, [data-vibe="ledger"] .legend-val, [data-vibe="ledger"] .ring-of, [data-vibe="ledger"] .st-src, [data-vibe="ledger"] .cal-band-lab, [data-vibe="ledger"] .st-ring-s { font-size: 11px; letter-spacing: 0; text-transform: none; } [data-vibe="ledger"] .legend-item { font-size: 13px; } [data-vibe="ledger"] .legend-item i { width: 12px; height: 3px; border-radius: 0; } [data-vibe="ledger"] .legend-inline .legend-item i.sw-dot { width: 12px; height: 3px; border-radius: 0; } [data-vibe="ledger"] .donut-sub, [data-vibe="ledger"] .ring-sub { letter-spacing: 0; text-transform: none; } [data-vibe="ledger"] .donut-sub, [data-vibe="ledger"] .ring-sub { font-size: 11px; } [data-vibe="ledger"] .pb-track, [data-vibe="ledger"] .pb-fill, [data-vibe="ledger"] .vol-track, [data-vibe="ledger"] .vol-fill { border-radius: 0; } [data-vibe="ledger"] .ring-fill, [data-vibe="ledger"] .st-ring circle { stroke-linecap: square; } [data-vibe="ledger"] .chart-empty { border-style: solid; border-color: var(--collar); border-radius: 0; font-size: 13px; } [data-vibe="ledger"] .vol-name { font-size: 13px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .vol-val { font-size: 13px; } /* The calorie meter: a square near-neutral track, the zones at .32 so each band keeps the hue the guide names ("Blue — cut"), the eaten fill solid, the white head, ticks and dashed target (12.41 on the track). */ [data-vibe="ledger"] .cal-zone.cut, [data-vibe="ledger"] .guide-sw.cut { background: rgba(var(--p-blue-rgb),.32); } [data-vibe="ledger"] .cal-zone.hold, [data-vibe="ledger"] .guide-sw.hold { background: rgba(var(--p-yellow-rgb),.32); } [data-vibe="ledger"] .cal-zone.gain, [data-vibe="ledger"] .guide-sw.gain { background: rgba(var(--p-red-rgb),.32); } [data-vibe="ledger"] .cal-fill { opacity: 1; } /* ---------- dock · rail ---------- Opaque, on the page's own green (tint.dockGlass rack 1), under a 2pt rule. Ledger's icons at 22 over 11 / 600 dim labels. Active: a 3pt bar in the ribbon across the cell's full width along the rule, icon and label chalk, the label 700. No blur. The tabs, order, height and place never change. */ [data-vibe="ledger"] .dock { background: var(--rack); border-top: var(--shape-rule-head-0) solid var(--shape-rule-ink); } [data-vibe="ledger"] .dock button.active::before { left: 0; right: 0; top: calc(-1 * var(--shape-rule-head-0)); width: auto; height: 3px; transform: none; border-radius: 0; background: var(--shape-cue-ink); animation: none; } [data-vibe="ledger"] #dock button.tour-lit::after { border-radius: var(--r-sm); } /* ---------- fab · inverse ---------- The cream slab, radius 2, the + (2.6) and "Log food" as authored in green, Manuale 16 / 700, no shadow, at v1's place and size. Pressed keeps the cream and v1's .955; the pink stays off it. */ [data-vibe="ledger"] .fuel-fab, [data-vibe="ledger"] .fuel-fab:active { background: var(--inverse); color: var(--knockout); } [data-vibe="ledger"] .fuel-fab { border-radius: var(--r-sm); font-size: 16px; letter-spacing: 0; text-transform: none; font-variation-settings: 'wght' 700; } /* ---------- addTile · ruled ---------- No tiles: a two-column grid parted by 1pt hairlines. Icons at 19 without wells, chalk; Photo's camera in the ribbon, the sheet's one pink, so it stays the first the eye finds. The title 16 / 600 chalk, the line 13 steel, the "ai" tag a 1pt steel keyline with steel words (the lit tiles' on raised). An off tile stays visible at .4. */ [data-vibe="ledger"] .add-grid { gap: 0; border-top: var(--shape-rule-hair) solid var(--shape-rule-ink); } [data-vibe="ledger"] .add-tile, [data-vibe="ledger"] .add-tile.hero, [data-vibe="ledger"] .add-tile.lit, [data-vibe="ledger"] .add-tile:active, [data-vibe="ledger"] .add-tile:disabled:active { background: none; border: 0; border-bottom: var(--shape-rule-hair) solid var(--shape-rule-ink); border-radius: 0; } [data-vibe="ledger"] .add-tile:nth-child(odd) { border-right: var(--shape-rule-hair) solid var(--shape-rule-ink); padding-left: 0; } [data-vibe="ledger"] .add-tile:active { background: rgba(var(--lift-rgb),.05); } [data-vibe="ledger"] .add-tile:disabled { opacity: .4; } [data-vibe="ledger"] .add-tile .ic, [data-vibe="ledger"] .add-tile.lit .ic { width: auto; height: auto; background: none; color: var(--chalk); border-radius: 0; } [data-vibe="ledger"] .add-tile.hero .ic { background: none; color: var(--accent); } [data-vibe="ledger"] .add-tile .t { font-size: 16px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .add-tile .d { font-size: 13px; color: var(--steel); } [data-vibe="ledger"] .add-tile .tag, [data-vibe="ledger"] .add-tile.lit .tag { background: none; color: var(--steel); box-shadow: inset 0 0 0 var(--shape-keyline-width) var(--shape-keyline-ink); border-radius: var(--r-sm); } [data-vibe="ledger"] .add-tile.lit .tag { background: var(--raised); } [data-vibe="ledger"] .add-rule { background: var(--shape-rule-ink); } /* The estimator notices keep their warn wash and edge, the slip (spark) in warn and the sentence as written. No sparkle. */ [data-vibe="ledger"] .ai-warn { border-radius: var(--r-sm); font-size: 13px; } [data-vibe="ledger"] .ai-shot { border-color: var(--knurl); border-radius: var(--r); } [data-vibe="ledger"] .conf { border-radius: var(--r-sm); border-color: var(--knurl); } [data-vibe="ledger"] .entry-readout { font-variation-settings: 'wght' 700; } /* ---------- sessionChrome · flat ---------- No glass, no shadows. The top bar opaque bar under a collar rule: the session name 16 / 600, the clock (timer) steel, the Coach chip and the calendar button 38 with a knurl edge, Finish the cream slab. The rest pill raised with a knurl edge, round; the peek bar raised, knurl, radius 4. Every target at least v1's. */ [data-vibe="ledger"] .wk-bar { background: var(--bar); } [data-vibe="ledger"] .wk-name { font-size: 16px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .wk-bar .timer { color: var(--steel); } [data-vibe="ledger"] .wk-coach, [data-vibe="ledger"] .wk-cal-btn { border-color: var(--knurl); } [data-vibe="ledger"] .wk-cal-btn { color: var(--chalk); margin-right: 6px; } [data-vibe="ledger"] .wk-coach .coach-ttl { font-size: 11px; letter-spacing: .04em; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .rest-pill .t { font-size: 16px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .rest-pill button { font-size: 13px; color: var(--chalk); font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .peek-name { font-size: 14px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .peek-bar .timer { font-size: 13px; } /* The Coach nudge under a finished exercise: raised, radius 4, the drawn balloon and its words; chalk text. */ [data-vibe="ledger"] .swipe-hint.coach-nudge { background: var(--raised); border-radius: var(--r); } [data-vibe="ledger"] .coach-nudge-t { color: var(--chalk); } [data-vibe="ledger"] .coach-nudge-x .glyph { width: 12px; height: 12px; } /* ---------- the Coach sheet ---------- Rack's lines on raised, radius 2, chalk words; the asking bubble's rule across its top (shape.stripe, generated above). His replies are his words in a knurl keyline, no pink wash; Pro's panel raised with a keyline. */ [data-vibe="ledger"] .coach-bub.you { background: transparent; border-color: var(--knurl); } [data-vibe="ledger"] .coach-bub.you .coach-bub-t { color: var(--chalk); } [data-vibe="ledger"] .coach-bub.pro { background: var(--raised); border-color: var(--knurl); } [data-vibe="ledger"] .coach-bub-t { font-size: 15px; } /* ---------- the other You cards ---------- */ [data-vibe="ledger"] .review-verdict { font-size: 24px; letter-spacing: 0; } /* "Next week" is the callout: a faint cream band, no border, no pink wash. */ [data-vibe="ledger"] .review-take { background: color-mix(in srgb, var(--chalk) 6%, transparent); border-color: transparent; } [data-vibe="ledger"] .review-take .chart-sub { color: var(--steel); } [data-vibe="ledger"] .st-flame { border-radius: var(--r-sm); } [data-vibe="ledger"] .group-pill { border-radius: var(--r-chip); background: var(--raised); border-color: transparent; } [data-vibe="ledger"] .install-card { background: none; } [data-vibe="ledger"] .day-title { font-size: 16px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] :where(.find-d, .guide-d, .traj-reason, .feel-sub, .person-sub, .person-note) { font-size: 13px; } [data-vibe="ledger"] :where(.guide-t) { font-size: 15px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] :where(.person-name) { font-size: 16px; font-variation-settings: 'wght' 600; } [data-vibe="ledger"] .install-n { border-radius: var(--r-sm); } [data-vibe="ledger"] .split-bar, [data-vibe="ledger"] .import-bar { border-radius: 0; } [data-vibe="ledger"] .traj-bar, [data-vibe="ledger"] .traj-fill { border-radius: 0; } [data-vibe="ledger"] .tod-col i { border-radius: 0; } [data-vibe="ledger"] .tod-h { font-size: 11px; letter-spacing: 0; } /* ---------- water ---------- */ [data-vibe="ledger"] .water-preset { background: var(--raised); border-color: transparent; border-radius: var(--r-sm); } [data-vibe="ledger"] .water-preset:active { border-color: var(--p-blue); } [data-vibe="ledger"] .wpe-del { border-color: var(--knurl); border-radius: var(--r-sm); } [data-vibe="ledger"] .water-pct, [data-vibe="ledger"] .water-left { font-size: 13px; } /* ---------- targets at least v1's ---------- Manuale sets a few glyph and word buttons narrower than Archivo did; the fit run (320 and 390) measured each against v1, and these hold v1's width. The mini stat's figure gets its cell's right padding, so "48.5k" is never cut at 320 (v1 cuts it there). */ [data-vibe="ledger"] .wk-coach { min-width: 87px; justify-content: center; } [data-vibe="ledger"] .back-btn { min-width: 39px; } [data-vibe="ledger"] .install-x { min-width: 27px; } [data-vibe="ledger"] .ex-menu { min-width: 31px; } [data-vibe="ledger"] .card-why { min-width: 22px; } [data-vibe="ledger"] .mini-stat { padding-right: 0; } /* ---------- the trial bar, the owner's flags: square, as authored ---------- */ [data-vibe="ledger"] .trial-bar { border-radius: var(--r-sm); } [data-vibe="ledger"] .adm-flag { border-radius: var(--r-sm); } [data-vibe="ledger"] .adm-uid { font-size: 11px; } /* ---------- sign-in and the gates (web only) ---------- The page green; the six-plate mark in plate colours, radius 2; the title in the condensed head at 34 over a 2pt rule; square knurl fields; the cream slab; links as underlined steel words; errors and success in their words. The invite, waiting and paused gates the same. Sign-in wears this device's hint; once somebody is signed in, the account's own vibe wins (store.js), and an account that never chose is v1 — so the gates and onboarding are Ledger only for an account that picked it. The night's harness shoots those screens with such new accounts and cannot force a vibe onto them: the gate and onboarding rules here were read, not seen. */ [data-vibe="ledger"] .auth-title, [data-vibe="ledger"] .gate-title { font-size: 34px; line-height: 1.1; padding-bottom: 8px; margin-bottom: 10px; border-bottom: var(--shape-rule-head-0) solid var(--shape-rule-ink); } [data-vibe="ledger"] .auth-sub { font-size: 14px; color: var(--steel); } [data-vibe="ledger"] .gate-pending { border-color: var(--knurl); color: var(--chalk); } [data-vibe="ledger"] .gate-pending .dot { border-radius: 0; } [data-vibe="ledger"] .gate-sep::before, [data-vibe="ledger"] .gate-sep::after { background: var(--shape-rule-ink); } [data-vibe="ledger"] .gate-who { border-top-color: var(--shape-rule-ink); font-size: 13px; } /* ---------- onboarding (8 steps) and the tour ---------- The step kicker over the title (the condensed head) and its rule. Number steps in square knurl fields; progress in cream. Choice cards on the page with a knurl keyline; chosen = the cream inversion and a drawn tick (shape.chosen.tick) — never colour alone. The tour: the flat veil, the card a lead box (bar, radius 4, v1's shadow), the lit tab ringed in the ribbon. */ [data-vibe="ledger"] .ob-card { border-color: var(--bar); } [data-vibe="ledger"] .ob-fill { background: var(--chalk); } [data-vibe="ledger"] .ob-title { font-size: 34px; line-height: 1.1; padding-bottom: 8px; margin-bottom: 12px; border-bottom: var(--shape-rule-head-0) solid var(--shape-rule-ink); } [data-vibe="ledger"] .ob-item-t { color: var(--chalk); } [data-vibe="ledger"] .ob-item-d { font-size: 14px; } [data-vibe="ledger"] .ob-choice { position: relative; border-color: var(--knurl); padding-right: 40px; } [data-vibe="ledger"] .ob-choice.on { background: var(--inverse); border-color: var(--inverse); } [data-vibe="ledger"] .ob-choice.on .ob-choice-t, [data-vibe="ledger"] .ob-choice.on .ob-choice-d { color: var(--knockout); } [data-vibe="ledger"] .ob-choice.on::after { content: ''; position: absolute; right: 18px; top: 50%; width: 6px; height: 12px; margin-top: -8px; border: solid var(--knockout); border-width: 0 2px 2px 0; transform: rotate(45deg); opacity: var(--shape-chosen-tick); } [data-vibe="ledger"] .ob-choice-t { font-size: 16px; font-variation-settings: 'wght' 700; } [data-vibe="ledger"] .ob-choice-d { font-size: 13px; color: var(--steel); } [data-vibe="ledger"] .ob-num { border-color: var(--knurl); } [data-vibe="ledger"] .ob-num-l, [data-vibe="ledger"] .ob-num-s { font-size: 11px; letter-spacing: 0; } [data-vibe="ledger"] .ob-adjust summary { font-size: 13px; text-decoration-color: var(--steel); } [data-vibe="ledger"] .ob-tip { font-size: 13px; } [data-vibe="ledger"] .ob-tour-body { font-size: 15px; } [data-vibe="ledger"] .ob-dots i { border-radius: 0; } [data-vibe="ledger"] .ob-dots i.on { background: var(--chalk); } /* ---------- the Vibes sheet: Ledger's own tile ---------- Scoped to the tile itself: a worn vibe's [data-vibe] rules would otherwise reach every tile. The figure in the digits file at Manuale Bold (the file keeps its 400-800 axis; rack.css asks 800), cap-height matched to v1's (24.6px caps: Manuale's figures are .63 em, so 39px), its baseline where v1's is: v1 sets 35px Archivo at line-height .95, a baseline 28.3px down; Manuale's ascent .980 and descent .236 put the same baseline at a line of 27.6px. "315" is 59.7px, inside the 112px card. */ [data-vibe="ledger"].vibe-in .vibe-num { font-size: 39px; line-height: 27.6px; letter-spacing: -.01em; font-variation-settings: 'wght' 700; }