/* ============================================================================ Conxfolio — V5 wave R3: "COVER LETTER STUDIO" ---------------------------------------------------------------------------- Additive on top of r2.css: remove this one link and every R2 surface is exactly as it was. Spec: the founder's review of 2026-08-19 — §7 (the whole section), §25 (three equal paths), §29 (suggestions, never blank boxes), §34 (one editor vocabulary), §54 bugs 6, 7, 12, 13. No colour value may appear in this file — every colour is a tokens.css variable (gate check 1). ========================================================================== */ /* ========================================================================== 1 · §54 bug 13 — THE LETTER'S ACCENT IS ONE VARIABLE ---------------------------------------------------------------------------- WAS: the twelve layouts decorated themselves with the SEMANTIC inks — Editorial's dateline and kicker in --cx-stop-fg (the "blocked / failing" red), Signature's sign-off and Column's rule in --cx-ask-fg (the "needs a decision" amber), everything else in --cx-accent. A document's visual voice was hardcoded to two error states and the visitor could not touch it. NOW: --letter-accent, set on the
from the design registry unless the visitor overrode it, and "None" resolves to ink — a genuinely monochrome letter. These rules override the inherited ones by specificity (.letter-paper[data-letter-accent] beats .letter-paper), so the old declarations stay where they are and simply lose. ========================================================================== */ .folio-v5 .letter-paper[data-letter-accent] .letter-paper-kicker { color: var(--letter-accent) !important; } .folio-v5 .letter-paper[data-letter-accent] .letter-correspondence { color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent] .letter-paper-head { border-bottom-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-modern { border-top-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-signal { border-left-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-ledger .letter-paper-head { border-bottom-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-ledger .letter-paper-foot { background: var(--letter-accent); color: var(--cx-paper); } .folio-v5 .letter-paper[data-letter-accent].letter-band .letter-paper-kicker { color: var(--letter-accent) !important; } .folio-v5 .letter-paper[data-letter-accent].letter-academic .letter-paper-head { border-top-color: var(--letter-accent); border-bottom-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-signature .letter-paper-foot { color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-column::before { background: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-editorial .letter-paper-head { border-bottom-color: var(--letter-accent); } .folio-v5 .letter-paper[data-letter-accent].letter-editorial .letter-paper-kicker { color: var(--letter-accent) !important; } .folio-v5 .letter-paper[data-letter-accent].letter-formal .letter-paper-head { border-top-color: var(--letter-accent); } /* the sender's name is the one place the accent may take the display type */ .folio-v5 .letter-paper[data-letter-accent="ink"] .letter-correspondence > b { color: var(--cx-ink); } /* The twelve thumbnails advertise the accent their design will arrive with. The three that used to paint from a semantic ink are fixed AT SOURCE in styles.css (each --cx-stop-fg / --cx-ask-fg there is now --letter-accent); what is left here are the ones that painted from --cx-accent, which is the global decorative knob and not the letter's own. */ .folio-v5 .letter-design-option .thumb-ledger { border-bottom-color: var(--letter-accent); } .folio-v5 .letter-design-option .thumb-ledger::after { color: var(--letter-accent); } .folio-v5 .letter-design-option .thumb-signal { border-left-color: var(--letter-accent); } .folio-v5 .letter-design-option .thumb-academic::before { color: var(--letter-accent); } /* --- the picker ---------------------------------------------------------- */ .folio-v5 .letter-accent-block { margin-top: 34px; padding-top: 26px; border-top: 1px solid var(--cx-line-strong); } .folio-v5 .letter-accent-block > header { display: grid; gap: 5px; margin-bottom: 16px; } .folio-v5 .letter-accent-block > header b { font: 600 22px/1.1 var(--cx-font-display); } .folio-v5 .letter-accent-block > header small { color: var(--cx-ink60); font-size: 12px; } .folio-v5 .letter-accent-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } .folio-v5 .letter-accent-grid button { display: grid; grid-template-columns: 26px 1fr; gap: 3px 12px; align-items: center; min-height: 62px; padding: 12px 14px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); color: var(--cx-ink); text-align: left; cursor: pointer; } .folio-v5 .letter-accent-grid button > i { grid-row: 1 / span 2; width: 26px; height: 26px; border: 1px solid var(--cx-line-strong); border-radius: 50%; } .folio-v5 .letter-accent-grid button b { font-size: 13px; font-weight: 700; } .folio-v5 .letter-accent-grid button small { color: var(--cx-ink60); font-size: 11px; } /* ========================================================================== 2 · §7 / §55.4 — THE SHORTENED ONBOARDING ========================================================================== */ /* the quality note (§7): honest, never a block. Three grounds, three inks, each measured >= 4.5:1 by gate check 61. */ .folio-v5 .cover-quality { display: grid; grid-template-columns: 30px 1fr; gap: 14px; align-items: start; margin-top: 22px; padding: 15px 17px; border: 1px solid var(--cx-line-strong); background: var(--cx-porcelain); } .folio-v5 .cover-quality > i { display: grid; place-items: center; width: 30px; height: 30px; border-radius: 50%; background: var(--cx-mist); color: var(--cx-ink); font-style: normal; font-weight: 800; font-size: 13px; } .folio-v5 .cover-quality b { display: block; font-size: 14px; font-weight: 700; } .folio-v5 .cover-quality span { display: block; margin-top: 4px; color: var(--cx-ink60); font-size: 12px; line-height: 1.5; } .folio-v5 .cover-quality[data-quality="ok"] { border-color: var(--cx-ok-line); background: var(--cx-ok-bg); } .folio-v5 .cover-quality[data-quality="ok"] > i { background: var(--cx-paper); color: var(--cx-ok-fg); } .folio-v5 .cover-quality[data-quality="ok"] b { color: var(--cx-ok-fg); } .folio-v5 .cover-quality[data-quality="ok"] span { color: var(--cx-ink); } .folio-v5 .cover-quality[data-quality="doubt"] { border-color: var(--cx-ask-line); background: var(--cx-ask-bg); } .folio-v5 .cover-quality[data-quality="doubt"] > i { background: var(--cx-paper); color: var(--cx-ask-fg); } .folio-v5 .cover-quality[data-quality="doubt"] b { color: var(--cx-ask-fg); } .folio-v5 .cover-quality[data-quality="doubt"] span { color: var(--cx-ink); } /* §25 — THREE PATHS, ONE SHAPE. WAS: a vertical stack in which the connected résumé sat first, was selected before the visitor arrived, and carried a "RECOMMENDED" plate. NOW: three identical cards, none preselected, and the plate on each says the same word. Gate check 60 measures the three rendered boxes against each other. */ .folio-v5 .cover-path-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-top: 8px; } .folio-v5 .cover-path { display: grid; grid-template-rows: auto auto 1fr auto; gap: 10px; min-height: 186px; padding: 18px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); color: var(--cx-ink); text-align: left; cursor: pointer; } .folio-v5 .cover-path > i { display: grid; place-items: center; width: 38px; height: 38px; border-radius: 50%; background: var(--cx-porcelain); color: var(--cx-ink); font-style: normal; font-weight: 800; font-size: 13px; } .folio-v5 .cover-path b { font: 600 19px/1.15 var(--cx-font-display); } .folio-v5 .cover-path small { color: var(--cx-ink60); font-size: 12px; line-height: 1.5; } .folio-v5 .cover-path em { justify-self: start; padding: 5px 9px; border: 1px solid var(--cx-line-strong); color: var(--cx-ink); font: 700 9px/1 var(--cx-font-mono); font-style: normal; letter-spacing: .08em; text-transform: uppercase; } .folio-v5 .cover-path.on { box-shadow: inset 0 0 0 2px var(--cx-sel-line); } .folio-v5 .cover-path.on em { background: var(--cx-ink); color: var(--cx-paper); border-color: var(--cx-ink); } /* §54 bug 7 — the extraction, shown. */ .folio-v5 .cover-extract { margin-top: 20px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); } .folio-v5 .cover-extract > header { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 13px 17px; border-bottom: 1px solid var(--cx-line); background: var(--cx-ok-bg); } .folio-v5 .cover-extract > header > div { display: flex; align-items: center; gap: 10px; } .folio-v5 .cover-extract > header i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-paper); color: var(--cx-ok-fg); font-style: normal; font-weight: 800; font-size: 11px; } .folio-v5 .cover-extract > header b { color: var(--cx-ok-fg); font-size: 14px; } .folio-v5 .cover-extract > header span { color: var(--cx-ink); font: 700 10px/1 var(--cx-font-mono); letter-spacing: .06em; text-transform: uppercase; } .folio-v5 .cover-extract-groups { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); } .folio-v5 .cover-extract-groups > article { padding: 14px 17px; border-top: 1px solid var(--cx-line); } .folio-v5 .cover-extract-groups > article:nth-child(odd) { border-right: 1px solid var(--cx-line); } .folio-v5 .cover-extract-groups > article > header { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 9px; } .folio-v5 .cover-extract-groups > article > header b { font: 700 11px/1 var(--cx-font-mono); letter-spacing: .09em; text-transform: uppercase; } .folio-v5 .cover-extract-groups > article > header em { color: var(--cx-ink60); font: 700 10px/1 var(--cx-font-mono); font-style: normal; } .folio-v5 .cover-extract-groups ul { display: grid; gap: 6px; margin: 0; padding: 0; list-style: none; } .folio-v5 .cover-extract-groups li { display: grid; grid-template-columns: 1fr auto; gap: 10px; align-items: start; } .folio-v5 .cover-extract-groups li > span { font-size: 12px; line-height: 1.5; } .folio-v5 .cover-extract-groups li.off > span { color: var(--cx-ink60); text-decoration: line-through; } .folio-v5 .cover-extract-groups li > button { padding: 3px 8px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); color: var(--cx-ink); font: 700 9px/1.6 var(--cx-font-mono); text-transform: uppercase; cursor: pointer; } .folio-v5 .cover-extract-empty { margin: 0; color: var(--cx-ink60); font-size: 12px; line-height: 1.5; } .folio-v5 .cover-extract > footer { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 12px 17px; border-top: 1px solid var(--cx-line-strong); background: var(--cx-porcelain); } .folio-v5 .cover-extract > footer span { color: var(--cx-ink); font-size: 12px; } /* §29 — the paste path opens on candidates, not on a blank box. */ .folio-v5 .cover-evidence-suggest { margin-top: 14px; border: 1px solid var(--cx-line-strong); background: var(--cx-porcelain); } .folio-v5 .cover-evidence-suggest > header { display: grid; gap: 3px; padding: 11px 14px; border-bottom: 1px solid var(--cx-line); } .folio-v5 .cover-evidence-suggest > header b { font: 700 10px/1 var(--cx-font-mono); letter-spacing: .08em; text-transform: uppercase; } .folio-v5 .cover-evidence-suggest > header span { color: var(--cx-ink60); font-size: 11px; } .folio-v5 .cover-evidence-suggest ul { display: grid; gap: 1px; margin: 0; padding: 0; list-style: none; background: var(--cx-line); } .folio-v5 .cover-evidence-suggest li { display: grid; grid-template-columns: 30px 1fr; gap: 10px; align-items: center; padding: 9px 14px; background: var(--cx-paper); } .folio-v5 .cover-evidence-suggest li > button { width: 30px; height: 30px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); color: var(--cx-ink); font-size: 13px; line-height: 1; cursor: pointer; } .folio-v5 .cover-evidence-suggest li > span { font-size: 12px; line-height: 1.5; } /* §7 — the personal angle, in the editor, closed until wanted. */ .folio-v5 .cover-angle-bar { max-width: 660px; margin: 0 auto 20px; border: 1px solid var(--cx-line-strong); background: var(--cx-porcelain); } .folio-v5 .cover-angle-bar > summary { display: grid; gap: 3px; padding: 13px 16px; cursor: pointer; list-style: none; } .folio-v5 .cover-angle-bar > summary::-webkit-details-marker { display: none; } .folio-v5 .cover-angle-bar > summary b { font-size: 14px; font-weight: 700; } .folio-v5 .cover-angle-bar > summary span { color: var(--cx-ink60); font-size: 12px; } .folio-v5 .cover-angle-bar > .field { padding: 0 16px 16px; } .folio-v5 .cover-angle-bar textarea { min-height: 88px; } /* ========================================================================== 3 · §7 / §55.5 — ONE CLEAN LETTER EDITOR ---------------------------------------------------------------------------- The writing pane was a two-column grid: a 188px rail listing the framework and a one-block-at-a-time editor. Both are gone. What is left is the letter. ========================================================================== */ .folio-v5 .cover-writing-pane { display: block; overflow: auto; padding: 26px 30px 60px; } .folio-v5 .cover-letter-canvas { max-width: 660px; margin: 0 auto; } .folio-v5 .cover-canvas-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .folio-v5 .cover-canvas-head b { display: block; margin-top: 4px; font: 600 26px/1.05 var(--cx-font-display); } .folio-v5 .cover-advanced-toggle { min-height: 34px; padding: 0 13px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); color: var(--cx-ink); font: 700 10px/1 var(--cx-font-mono); letter-spacing: .07em; text-transform: uppercase; cursor: pointer; } .folio-v5 .cover-advanced-toggle[aria-pressed="true"] { background: var(--cx-ink); color: var(--cx-paper); border-color: var(--cx-ink); } .folio-v5 .cover-paras { display: grid; gap: 4px; border: 1px solid var(--cx-line-strong); background: var(--cx-paper); padding: 30px 32px 24px; } .folio-v5 .cover-para { display: grid; gap: 4px; padding: 6px 0; } .folio-v5 .cover-para-label { font: 700 9px/1 var(--cx-font-mono); letter-spacing: .1em; text-transform: uppercase; color: var(--cx-ink60); } .folio-v5 .cover-para textarea { width: 100%; min-height: 42px; padding: 6px 8px; border: 1px solid transparent; border-radius: 2px; background: transparent; color: var(--cx-ink); font: 400 15px/1.68 var(--cx-font-ui); resize: vertical; } .folio-v5 .cover-para textarea:hover { border-color: var(--cx-line); background: var(--cx-porcelain); } .folio-v5 .cover-para textarea:focus { outline: 0; border-color: var(--cx-ink); background: var(--cx-paper); } .folio-v5 .cover-para-tools { display: flex; align-items: center; justify-content: space-between; gap: 12px; opacity: 1; } .folio-v5 .cover-para-tools > span { color: var(--cx-ink60); font: 700 9px/1 var(--cx-font-mono); letter-spacing: .06em; text-transform: uppercase; } .folio-v5 .cover-para-tools > button { color: var(--cx-ink); font: 700 10px/1 var(--cx-font-mono); letter-spacing: .04em; } .folio-v5 .cover-canvas-sign { max-width: 660px; margin: 18px auto 0; font: 600 18px/1 var(--cx-font-display); } .folio-v5 .cover-canvas-foot { display: grid; grid-template-columns: 22px 1fr; gap: 11px; align-items: start; max-width: 660px; margin: 20px auto 0; padding: 13px 15px; border: 1px solid var(--cx-line-strong); background: var(--cx-porcelain); } .folio-v5 .cover-canvas-foot i { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--cx-paper); color: var(--cx-ok-fg); font-style: normal; font-weight: 800; font-size: 11px; } .folio-v5 .cover-canvas-foot span { color: var(--cx-ink); font-size: 12px; line-height: 1.55; } .folio-v5 .cover-letter-canvas .cover-source-receipt { margin-top: 6px; } /* §54 bug 6 — the restore receipt. What / from where / into where, or the honest sentence that nothing useful was found. */ .folio-v5 .cover-restore-note { display: grid; grid-template-columns: 24px 1fr auto; gap: 12px; align-items: start; margin-bottom: 14px; padding: 13px 15px; border: 1px solid var(--cx-ok-line); background: var(--cx-ok-bg); } .folio-v5 .cover-restore-note[data-restore-ok="false"] { border-color: var(--cx-ask-line); background: var(--cx-ask-bg); } .folio-v5 .cover-restore-note > i { display: grid; place-items: center; width: 24px; height: 24px; border-radius: 50%; background: var(--cx-paper); color: var(--cx-ok-fg); font-style: normal; font-weight: 800; font-size: 12px; } .folio-v5 .cover-restore-note[data-restore-ok="false"] > i { color: var(--cx-ask-fg); } .folio-v5 .cover-restore-note b { display: block; color: var(--cx-ink); font-size: 13px; } .folio-v5 .cover-restore-note span { display: block; margin-top: 3px; color: var(--cx-ink); font-size: 12px; line-height: 1.5; } .folio-v5 .cover-restore-note > button { border: 0; background: transparent; color: var(--cx-ink); font-size: 17px; line-height: 1; cursor: pointer; } /* §7 — the voice, moved out of onboarding and into the editor. */ .folio-v5 .cover-voice-bar { max-width: 660px; margin: 0 auto 22px; } .folio-v5 .cover-voice-bar > header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; margin-bottom: 11px; } .folio-v5 .cover-voice-bar > header b { display: block; margin-top: 4px; font: 600 20px/1.05 var(--cx-font-display); } .folio-v5 .cover-voice-trust { color: var(--cx-ink); font: 700 9px/1.4 var(--cx-font-mono); letter-spacing: .06em; text-transform: uppercase; } .folio-v5 .cover-voice-bar .cover-voice-grid button { min-height: 124px; padding: 14px; } .folio-v5 .cover-voice-bar .cover-voice-grid button b { margin: 10px 0 5px; font-size: 17px; } .folio-v5 .cover-voice-bar .cover-voice-grid button small { color: var(--cx-ink); } .folio-v5 .cover-voice-grid button.pending { box-shadow: inset 0 0 0 2px var(--cx-ask-fg); } .folio-v5 .cover-voice-confirm { display: flex; align-items: center; justify-content: space-between; gap: 18px; margin-top: 10px; padding: 14px 16px; border: 1px solid var(--cx-ask-line); background: var(--cx-ask-bg); } .folio-v5 .cover-voice-confirm b { display: block; color: var(--cx-ask-fg); font-size: 14px; } .folio-v5 .cover-voice-confirm span { display: block; margin-top: 3px; color: var(--cx-ink); font-size: 12px; line-height: 1.5; } .folio-v5 .cover-voice-confirm-actions { display: flex; gap: 8px; flex: 0 0 auto; } /* ========================================================================== 4 · §34 / §54 bug 12 — ONE VOCABULARY, ONE SIZE, ONE PREVIEW ---------------------------------------------------------------------------- .cover-mobile-switch is deleted in the markup; the pane model it drove now hangs off data-cover-mode, at EVERY width rather than only under 760px. ========================================================================== */ .folio-v5 .cover-document-actions { display: flex; align-items: center; gap: 8px; } .folio-v5 .cover-document-actions .button { min-height: 38px; height: 38px; padding: 0 14px; font-size: 11px; } .folio-v5 .cover-document-actions select { min-height: 38px; height: 38px; } .folio-v5 .cover-mode-tabs button { min-height: 38px; } @media (min-width: 761px) { .folio-v5 .cover-mode-tabs button { min-width: 104px; } } .folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-studio-canvas { display: block; } .folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-preview-pane { border-left: 0; } .folio-v5 .cover-editor-product[data-cover-mode="preview"] .cover-preview-pane .letter-paper { max-width: 720px; } @media (max-width: 760px) { .folio-v5 .cover-writing-pane { padding: 18px 14px 40px; } .folio-v5 .cover-paras { padding: 20px 16px 16px; } .folio-v5 .cover-para textarea { font-size: 16px; } .folio-v5 .cover-path-grid { grid-template-columns: 1fr; } .folio-v5 .cover-extract-groups { grid-template-columns: 1fr; } .folio-v5 .cover-extract-groups > article:nth-child(odd) { border-right: 0; } .folio-v5 .letter-accent-grid { grid-template-columns: 1fr 1fr; } .folio-v5 .cover-voice-bar .cover-voice-grid { grid-template-columns: 1fr; } .folio-v5 .cover-voice-bar .cover-voice-grid button { min-height: 0; } .folio-v5 .cover-voice-confirm { display: grid; } .folio-v5 .cover-canvas-head { display: grid; } /* one control, one model: at 390 the mode tabs decide which pane is on screen — the same tabs that decide it at 1440. */ .folio-v5 .cover-editor-product[data-cover-mode="edit"] .cover-preview-pane { display: none; } .folio-v5 .cover-editor-product[data-cover-mode="design"] .cover-preview-pane { display: none; } /* WAS: at 390 the toolbar hid Setup, Refresh, DOCX and the version picker and kept only Review — so the vocabulary the visitor learned at 1440 was a different, shorter one on a phone, and "Start again" (the only way back to the setup) could not be reached at all. NOW every ACTION survives at 390 in one scrolling row; only the version