/* Webfonts — joris design system. The @import that used to live here has moved to app/views/shared/_webfonts.html.erb as a in the . An @import is invisible to the browser's preload scanner, so the font request could not start until application.css had been fetched and parsed — a serialized chain that delayed first paint on every page. Nothing else belongs in this file today. For a fully self-hosted build, download Newsreader + Hanken Grotesk into app/assets/fonts and declare local @font-face rules here (then drop the and the preconnects). */ /* --------------------------------------------------------------- joris — Color tokens Warm, calm, editorial. Paper surfaces on a warm canvas, deep warm ink for text, a muted forest green as the single primary, with terracotta and provider-purple as sparing accents. All base values are literal; semantic aliases reference the base. --------------------------------------------------------------- */ :root { /* --- Neutrals (warm) --- */ --canvas: #efece4; /* app background */ --canvas-hi: #f5f2ec; /* top of page gradient */ --canvas-lo: #eae6dd; /* bottom of page gradient */ --paper: #ffffff; /* card / sheet surface */ --paper-warm: #faf8f3; /* subtle raised strip, table headers */ --ink: #26221b; /* primary text */ --ink-soft: #6f6a5e; /* secondary text */ --ink-faint: #9a9384; /* tertiary / meta text */ --ink-ghost: #a49d8d; /* placeholders, monospace hints */ --border: #e6e1d6; /* default hairline */ --border-soft: #ece8df; /* inner dividers */ --border-strong: #d9d3c6; /* hover border */ /* --- Primary: forest green --- */ --primary: #2f6d5b; --primary-press: #28604f; --primary-tint: #eef4f1; /* green wash background */ --primary-tint-2: #f4f8f6; --primary-border: #cfe0d9; /* green hairline */ --primary-chip: #dcebe5; /* filled green chip bg */ /* --- Accent: terracotta (used sparingly for links/callouts) --- */ --accent: #b45b3e; --accent-soft: #b0623c; /* --- Danger: destructive actions (Danger Zone only — not the same as accent) --- */ --danger: #b0553a; --danger-press: #8f3f28; --danger-tint: #fdf6f2; --danger-border: #e8d3ca; --danger-disabled: #ecdcd4; --danger-disabled-text: #c4a99d; /* --- Provider: muted purple (AI model badges only) --- */ --provider: #6a4c86; --provider-tint: #efe9f2; /* --- Placeholder hatch (image / chart / map slots) --- */ --hatch-a: #f6f3ec; --hatch-b: #f1ede4; /* --- Focus ring --- */ --ring: rgba(47,109,91,.35); /* ============ Semantic aliases ============ */ --surface-page: var(--canvas); --surface-card: var(--paper); --surface-raised: var(--paper-warm); --text-body: var(--ink); --text-muted: var(--ink-soft); --text-faint: var(--ink-faint); --text-placeholder:var(--ink-ghost); --text-link: var(--accent); --border-default: var(--border); --border-divider: var(--border-soft); --action-primary: var(--primary); --action-primary-press:var(--primary-press); --focus-ring: var(--ring); --success: var(--primary); --warning: var(--accent); } /* --------------------------------------------------------------- joris — Typography tokens Two families: Newsreader (serif) carries editorial headlines and any "document" numerals; Hanken Grotesk (sans) carries all UI. Monospace only for placeholder / data hints. --------------------------------------------------------------- */ :root { --font-display: 'Newsreader', Georgia, 'Times New Roman', serif; --font-sans: 'Hanken Grotesk', system-ui, -apple-system, sans-serif; --font-mono: ui-monospace, 'SF Mono', Menlo, monospace; /* Reading scale. Stays 1 outside the reading surface — see .reading-scope at the bottom of this file. */ --reading-scale: 1; /* Type scale. Baselines are a notch up from the original 10–15px set: this is a reading app and 13px body was under the 16px web norm. */ --text-2xs: 11px; --text-xs: 12px; --text-sm: 13px; --text-ui: 14px; /* default control text */ --text-md: 15px; /* body */ --text-lg: 17px; /* long-form prose */ --display-sm: 22px; --display-md: 25px; --display-lg: 28px; --display-xl: 31px; /* Weights */ --weight-regular: 400; --weight-medium: 500; --weight-semibold:600; --weight-bold: 700; /* Line heights */ --leading-tight: 1.15; --leading-snug: 1.3; --leading-normal: 1.5; --leading-relaxed:1.6; /* Letter spacing */ --tracking-label: .5px; /* small caps labels */ --tracking-tight: .2px; } /* --------------------------------------------------------------- Reading size (users.reading_scale). `.reading-scope` marks the one subtree the setting applies to: the brief body and the delivery templates. Everything outside it — nav, settings, admin, onboarding, and the .btn/.card sizes in components.css — keeps the baseline above, which is what the Settings copy promises. The scope has to redeclare the tokens rather than just setting --reading-scale, because a custom property's var() is substituted where it is DECLARED, not where it is used: tokens declared at :root would resolve against :root's scale and inherit down already-frozen. Declaring both the scale and the tokens on the same element is what makes them track. is rendered server-side so the first paint is already at the chosen size, with no flash-and-resize. --------------------------------------------------------------- */ :root[data-reading-scale="large"] .reading-scope { --reading-scale: 1.15; } :root[data-reading-scale="xlarge"] .reading-scope { --reading-scale: 1.32; } .reading-scope { --text-2xs: calc(11px * var(--reading-scale)); --text-xs: calc(12px * var(--reading-scale)); --text-sm: calc(13px * var(--reading-scale)); --text-ui: calc(14px * var(--reading-scale)); --text-md: calc(15px * var(--reading-scale)); --text-lg: calc(17px * var(--reading-scale)); --display-sm: calc(22px * var(--reading-scale)); --display-md: calc(25px * var(--reading-scale)); --display-lg: calc(28px * var(--reading-scale)); --display-xl: calc(31px * var(--reading-scale)); } /* --------------------------------------------------------------- joris — Spacing, radius, shadow & motion tokens --------------------------------------------------------------- */ :root { /* Spacing scale (4px base, plus a couple of editorial in-betweens) */ --space-1: 4px; --space-2: 8px; --space-3: 12px; --space-4: 16px; --space-5: 20px; --space-6: 26px; --space-7: 34px; --space-8: 44px; /* Page gutter — the side padding on a full-page frame (.hist, .rt, .acct-page, .sup, .adm-scroll). Phones drop to 16px: at 32px a side, a 390px screen spends 27% of its width on the frame plus the nested card and row padding inside it, and this is a reading app. */ --page-gutter: 32px; --page-top: 38px; /* Radii */ --radius-xs: 7px; --radius-sm: 9px; --radius-md: 11px; /* inputs, buttons */ --radius-lg: 14px; /* cards */ --radius-xl: 16px; /* feature cards */ --radius-2xl: 20px; /* sheets, modals */ --radius-pill:999px; /* Elevation — warm-tinted, low and soft */ --shadow-sm: 0 2px 6px rgba(50,42,28,.06); --shadow-card: 0 10px 34px rgba(50,42,28,.08); --shadow-pop: 0 16px 48px rgba(50,42,28,.11); --shadow-primary: 0 3px 10px rgba(47,109,91,.25); /* Borders */ --hairline: 1.5px; /* Placeholder hatch (reusable background) */ --hatch: repeating-linear-gradient(45deg, var(--hatch-a), var(--hatch-a) 8px, var(--hatch-b) 8px, var(--hatch-b) 16px); /* Motion */ --ease-out: cubic-bezier(.2,.6,.2,1); --dur-fast: .15s; --dur-mid: .3s; --dur-rise: .45s; } @media (max-width: 720px) { :root { --page-gutter: 16px; --page-top: 22px; } } /* --------------------------------------------------------------- joris — Base reset, page background & shared keyframes. --------------------------------------------------------------- */ *, *::before, *::after { box-sizing: border-box; -webkit-tap-highlight-color: transparent; } html, body { margin: 0; padding: 0; /* The app scrolls inside .app-main, not the document. Without this, hitting the end of that inner scroller chains the gesture out to the document, which drags the whole shell — and the top bar with it — before rubber- banding back. Also suppresses pull-to-refresh. */ overscroll-behavior: none; } /* …but on phones the document IS the scroller now (see the mobile block in app_shell.css), so there is no inner pane whose gesture could chain out and drag the shell. The reason above no longer applies at this width, and the only thing `none` still buys us here is a dead pull-to-refresh gesture. Placed here rather than with the other phone rules in app_shell.css: that file loads before this one and a media query adds no specificity, so the override would lose to the rule directly above it. */ @media (max-width: 720px) { html, body { overscroll-behavior: auto; } } body { font-family: var(--font-sans); color: var(--text-body); background: var(--surface-page); } a { color: inherit; text-decoration: none; } .joris-page { min-height: 100vh; min-height: 100dvh; width: 100%; background: radial-gradient(120% 120% at 50% 0%, var(--canvas-hi) 0%, var(--canvas-lo) 100%); display: flex; flex-direction: column; align-items: center; justify-content: center; padding: var(--space-8) var(--space-5); } .joris-hidden { display: none !important; } @keyframes riseIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } } @keyframes pulseDot { 0%, 100% { transform: scale(1); opacity: 1; } 50% { transform: scale(.6); opacity: .5; } } @keyframes shimmer { 0% { background-position: -360px 0; } 100% { background-position: 360px 0; } } @keyframes spin { to { transform: rotate(360deg); } } .joris-rise { animation: riseIn var(--dur-rise) ease both; } /* --------------------------------------------------------------- joris — Core & form component classes Ported from the Claude Design handoff's Button/Card/Chip/Badge/ ProgressBar/BrandMark/Input/Textarea/Checkbox reference components. --------------------------------------------------------------- */ /* ============ Button ============ */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); font-family: var(--font-sans); font-weight: var(--weight-semibold); line-height: 1; cursor: pointer; border: 1.5px solid transparent; transition: background var(--dur-fast), border-color var(--dur-fast), transform var(--dur-fast); padding: 13px 16px; font-size: var(--text-md); border-radius: var(--radius-md); } .btn--block { display: flex; width: 100%; } .btn--sm { padding: 7px 12px; font-size: var(--text-ui); border-radius: var(--radius-sm); } .btn--lg { padding: 14px 18px; font-size: 14.5px; border-radius: var(--radius-md); } .btn--primary { background: var(--action-primary); color: #fff; box-shadow: var(--shadow-primary); } .btn--primary:hover { background: var(--action-primary-press); } .btn--primary:active { background: var(--action-primary-press); } .btn--ghost { background: var(--surface-card); color: var(--primary); border-color: var(--primary-border); } .btn--ghost:hover { background: var(--primary-tint-2); } .btn--subtle { background: var(--surface-raised); color: var(--text-body); border-color: var(--border-default); } .btn--subtle:hover { background: var(--paper-warm); border-color: var(--border-strong); } .btn--danger { background: var(--danger); color: #fff; border-color: var(--danger); } .btn--danger:hover { background: var(--danger-press); border-color: var(--danger-press); } .btn--danger:disabled { background: var(--danger-disabled); border-color: var(--danger-disabled); color: var(--danger-disabled-text); cursor: default; } /* ── In flight (busy.js) ── Deliberately class-based rather than :disabled: every button in the app gets this, including the many that are not .btn, and a bare [disabled] rule would also restyle controls disabled by the server for unrelated reasons. */ .is-busy { opacity: .62; cursor: progress; /* Not pointer-events:none — the cursor above has to survive the hover, and the control is genuinely disabled a tick later regardless. */ } .is-busy:hover { background: inherit; } /* Spinner only where there is room for one: a bare icon button (the copy and overflow triggers) would have its glyph shoved out of the box. */ .btn.is-busy::after, a.is-busy[data-busy-link]::after { content: ""; width: 1em; height: 1em; flex: none; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: busy-spin .62s linear infinite; } @keyframes busy-spin { to { transform: rotate(360deg); } } @media (prefers-reduced-motion: reduce) { .btn.is-busy::after, a.is-busy[data-busy-link]::after { animation-duration: 2.4s; } } /* ============ Card ============ */ .card { background: var(--surface-card); border: var(--hairline) solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm); padding: var(--space-4); overflow: hidden; } .card--pad-0 { padding: 0; } .card--flat { box-shadow: none; } .card--card { box-shadow: var(--shadow-card); } .card--pop { box-shadow: var(--shadow-pop); } .card--interactive { cursor: pointer; transition: transform var(--dur-fast), box-shadow var(--dur-fast), border-color var(--dur-fast); } .card--interactive:hover { transform: translateY(-2px); box-shadow: var(--shadow-card); border-color: var(--primary-border); } .card--interactive:active { transform: translateY(0) scale(.98); box-shadow: var(--shadow-sm); border-color: var(--primary-border); } /* ============ Chip ============ */ .chip { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-xs); padding: 5px 10px; border-radius: var(--radius-pill); white-space: nowrap; background: var(--hatch-b); color: var(--ink-soft); } .chip[data-clickable] { cursor: pointer; } .chip--green { background: var(--primary-tint); color: var(--primary); } .chip--purple { background: var(--provider-tint); color: var(--provider); } .chip--terracotta { background: rgba(180,91,62,.10); color: var(--accent); } .chip--selected { background: var(--primary); color: #fff; } /* ============ Badge ============ */ .badge { display: inline-flex; align-items: center; gap: 4px; font-family: var(--font-sans); font-weight: var(--weight-semibold); font-size: var(--text-2xs); letter-spacing: .3px; padding: 3px 8px; border-radius: var(--radius-pill); background: var(--hatch-b); color: var(--ink-soft); } .badge--green { background: var(--primary-tint); color: var(--primary); } .badge--solid { background: var(--primary); color: #fff; } .badge--terracotta { background: rgba(180,91,62,.12); color: var(--accent); } /* ============ ProgressBar ============ */ .progress { height: 8px; border-radius: var(--radius-pill); background: var(--canvas); overflow: hidden; } .progress__fill { height: 100%; width: 0%; border-radius: inherit; background: var(--primary); transition: width .12s linear; } /* ============ BrandMark ============ */ .brandmark { display: inline-flex; align-items: center; gap: 10px; } .brandmark__glyph { width: 30px; height: 30px; border-radius: 9px; display: flex; align-items: center; justify-content: center; box-shadow: var(--shadow-primary); flex: none; overflow: hidden; } .brandmark__glyph span { color: #fff; font-size: 13px; } .brandmark__glyph img { width: 100%; height: 100%; display: block; object-fit: cover; } .brandmark__name { font-family: var(--font-display); font-size: var(--display-sm); font-weight: var(--weight-semibold); color: var(--ink); letter-spacing: var(--tracking-tight); } .brandmark--sm .brandmark__glyph { width: 24px; height: 24px; border-radius: 7px; } .brandmark--sm .brandmark__glyph span { font-size: 10px; } .brandmark--sm .brandmark__name { font-size: 17px; } .brandmark--lg .brandmark__glyph { width: 38px; height: 38px; border-radius: 11px; } .brandmark--lg .brandmark__glyph span { font-size: 16px; } .brandmark--lg .brandmark__name { font-size: 26px; } /* ============ Passkey prompt banner ============ */ .passkey-banner { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; width: 100%; max-width: 640px; margin: var(--space-4) auto 0; padding: 12px 16px; background: var(--primary-tint); border: var(--hairline) solid var(--primary-border); border-radius: var(--radius-md); } .passkey-banner__msg { display: flex; align-items: center; gap: 10px; min-width: 0; font-size: var(--text-sm); line-height: 1.45; color: var(--ink-soft); } .passkey-banner__msg strong { color: var(--ink); font-weight: var(--weight-semibold); } .passkey-banner__icon { font-size: 17px; flex-shrink: 0; } .passkey-banner__actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; } .passkey-banner__error { flex-basis: 100%; color: var(--accent); font-size: var(--text-xs); } /* Full-width variant: a notice bar that sits directly under the reader topbar, sharing its horizontal padding so the copy lines up with the topbar chips. */ .passkey-banner--bar { max-width: none; width: 100%; margin: 0; padding: 12px var(--space-5); border: 0; border-bottom: var(--hairline) solid var(--primary-border); border-radius: 0; } /* ============ Form field label ============ */ .field { display: block; } .field__label { display: block; font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--text-muted); margin-bottom: 7px; } /* ============ Input / Textarea ============ */ .input, .textarea { width: 100%; border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-sans); color: var(--text-body); background: var(--surface-card); outline: none; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .input { padding: 12px 13px; font-size: var(--text-md); } .textarea { padding: 11px 13px; min-height: 76px; font-size: var(--text-ui); line-height: var(--leading-normal); color: var(--ink); resize: none; } .input:focus, .textarea:focus { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } /* A control that would only bounce you back. Inert rather than hidden: the affordance still shows where the action lives, and the title says why it is off — hiding it entirely reads as the feature having vanished. */ .is-caplocked { opacity: .45; cursor: not-allowed; pointer-events: auto; user-select: none; } .is-caplocked:hover { background: inherit; text-decoration: none; } /* ============ Select ============ */ /* The caret lives in a variable because three rules draw it — the element rule, the combobox trigger, and the marketing field, which has to redeclare it since .mkt-form__input's `background` shorthand outranks a bare `select` and wiped the image. */ :root { --caret-down: url("data:image/svg+xml;utf8,"); } /* One look for every dropdown in the product. There were six: two admin ones left on the OS default (so they looked like a different app on Windows), and four hand-rolled families that each drew their own caret out of a "▾" text node in a positioned — a different glyph, colour and offset in each, and markup a is still the form control; it is only taken out of the visual flow while the combobox stands in front of it. Never display:none — a hidden select is skipped by some autofill and password managers, and taking it out of the a11y tree would leave the label pointing at nothing. */ .csel { position: relative; } .csel--on > select { position: absolute; width: 100%; height: 100%; inset: 0; opacity: 0; pointer-events: none; } .csel__trigger { display: none; width: 100%; box-sizing: border-box; height: 44px; padding: 0 38px 0 14px; text-align: left; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); font-family: var(--font-sans); font-size: var(--text-ui); color: var(--text-body); background-color: var(--surface-card); background-image: var(--caret-down); background-repeat: no-repeat; background-position: right 13px center; cursor: pointer; transition: border-color var(--dur-fast), box-shadow var(--dur-fast); } .csel--on > .csel__trigger { display: block; } .csel__trigger:hover { border-color: var(--border-strong); } .csel__trigger:focus-visible { border-color: var(--primary); box-shadow: 0 0 0 3px var(--focus-ring); } .csel__pop { position: absolute; z-index: 60; top: calc(100% + 6px); left: 0; right: 0; min-width: 240px; background: var(--surface-card); border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); box-shadow: 0 18px 44px rgba(50, 42, 28, .16); padding: 7px; } .csel__pop[hidden] { display: none; } .csel__search { width: 100%; box-sizing: border-box; height: 36px; padding: 0 11px; margin-bottom: 6px; border: var(--hairline) solid var(--border-default); border-radius: var(--radius-sm); font-family: var(--font-sans); font-size: var(--text-ui); color: var(--text-body); background: var(--surface-raised); outline: none; } .csel__search:focus { border-color: var(--primary); } .csel__list { list-style: none; margin: 0; padding: 0; /* Tall enough to show the shape of the list, short enough not to run off the page from a field near the bottom of a form. */ max-height: 264px; overflow-y: auto; } .csel__opt { padding: 9px 11px; border-radius: var(--radius-sm); font-size: var(--text-ui); color: var(--text-body); cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .csel__opt[hidden] { display: none; } /* .is-active follows the keyboard, .is-chosen is what is actually selected — they are different things and both need to be visible at once. */ .csel__opt.is-active { background: var(--primary-tint-2); } .csel__opt.is-chosen { color: var(--primary); font-weight: var(--weight-semibold); } .csel__opt.is-chosen::after { content: " ✓"; } .csel__empty { padding: 11px; font-size: var(--text-ui); color: var(--text-faint); } .csel__empty[hidden] { display: none; } /* ============ Checkbox ============ */ .checkbox-row { display: inline-flex; align-items: center; gap: 10px; } .checkbox { width: 20px; height: 20px; flex: none; border-radius: var(--radius-xs); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; font-size: 11px; background: transparent; border: 1.5px solid var(--border-strong); transition: background var(--dur-fast), border-color var(--dur-fast); } .checkbox.is-checked { background: var(--primary); color: #fff; border-color: var(--primary); } .checkbox-row__label { font-family: var(--font-sans); font-size: var(--text-ui); color: var(--ink); } /* ============ Tabs ============ Two or three views of one collection, switched in place. Introduced on Settings › Webhooks (Activity / Destinations) and now shared, because the admin LLMs screen splits the same way (Models / Providers) and a second copy of these five rules is how two screens start drifting apart. A tab is a LINK, not a button: each view has its own URL, so it can be bookmarked, reloaded and linked to from a flash message. The count is optional and sits inside the label — it is part of what the tab says, not a badge stuck on the side. */ .tabs { display: flex; gap: 6px; margin: 0 0 22px; flex-wrap: wrap; } .tab { padding: 8px 15px; border-radius: var(--radius-pill); font: var(--weight-semibold) var(--text-sm)/1 var(--font-sans); color: var(--ink-soft); background: var(--paper); border: var(--hairline) solid var(--border); text-decoration: none; transition: border-color .12s, color .12s; } .tab:hover { border-color: var(--primary-border); text-decoration: none; } .tab.is-active { color: var(--primary); background: var(--primary-tint); border-color: var(--primary-border); } .tab__n { opacity: .65; font-variant-numeric: tabular-nums; } /* ============ Filter pills ============ A row of counted filters over the list below. Distinct from .tabs: tabs switch between different SUBJECTS (models vs providers), filters narrow one subject (all vs candidates vs never probed). Filled-active rather than tinted-active, so the two rows never read as the same control when a page shows both, as the LLMs screen does. Also links, also one URL each — same reason as .tabs. */ .filters { display: flex; gap: 7px; flex-wrap: wrap; margin: 0 0 10px; } .filter { padding: 6px 12px; border-radius: var(--radius-pill); font: var(--weight-semibold) 11.5px var(--font-sans); color: #5f5949; background: #f5f2ea; text-decoration: none; transition: background .12s, color .12s; } .filter:hover { background: var(--border-divider); text-decoration: none; } .filter.is-active { background: var(--primary); color: #fff; } .filter__n { font-weight: var(--weight-regular); opacity: .8; font-variant-numeric: tabular-nums; } /* --------------------------------------------------------------- joris — Onboarding flow screens Sign in -> magic link -> setup -> running -> delivery. --------------------------------------------------------------- */ .ob-brand { margin-bottom: 26px; } .ob-screen { width: 100%; } .ob-screen--sm { max-width: 412px; } .ob-screen--setup{ max-width: 500px; } .ob-screen--run { max-width: 480px; } .ob-screen--delivery{ max-width: 640px; } /* ---- Sign in ---- */ .ob-signin-card { padding: 34px 30px; } .ob-title { font-family: var(--font-display); font-weight: var(--weight-medium); line-height: var(--leading-tight); margin: 0 0 8px; color: var(--ink); } .ob-title--signin { font-size: 28px; } /* "You came from the House Hunt page" — continuity for a visitor who clicked a use-case CTA, so the sign-in card doesn't read as an unrelated detour. */ .ob-fromchip { display: inline-flex; align-items: center; gap: 7px; margin-bottom: 12px; padding: 5px 12px 5px 9px; border-radius: 999px; background: var(--primary-tint); color: var(--primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); } .ob-fromchip span { font-size: 14px; line-height: 1; } .ob-subtitle { margin: 0 0 var(--space-6); font-size: var(--text-md); line-height: var(--leading-normal); color: var(--text-muted); } .ob-google-btn { gap: 11px; background: var(--surface-card); border-color: var(--border-default); color: var(--ink); } .ob-google-btn:hover { background: var(--paper-warm); border-color: var(--border-strong); } .ob-google-dot { width: 18px; height: 18px; border-radius: 50%; background: conic-gradient(from -45deg, #ea4335 0 25%, #fbbc05 0 50%, #34a853 0 75%, #4285f4 0); flex: none; } .ob-divider { display: flex; align-items: center; gap: 12px; margin: 18px 0; } .ob-divider__line { flex: 1; height: 1px; background: var(--border-soft); } .ob-divider__label { font-size: var(--text-xs); color: var(--ink-ghost); letter-spacing: var(--tracking-label); } .ob-passkey { text-align: center; margin-top: 16px; } .ob-passkey span { font-size: var(--text-md); color: var(--ink-faint); cursor: pointer; } .ob-trust { display: flex; align-items: center; justify-content: center; gap: 8px; margin-top: 16px; } .ob-trust span { font-size: var(--text-sm); color: var(--ink-faint); } .ob-trust strong { color: var(--primary); font-weight: var(--weight-semibold); } /* ---- Magic link sent ---- */ .ob-magic-card { padding: 36px 30px; text-align: center; } .ob-magic-icon { width: 56px; height: 56px; border-radius: var(--radius-xl); background: var(--primary-tint); display: flex; align-items: center; justify-content: center; margin: 0 auto 18px; font-size: 24px; } .ob-magic-copy { margin: 0 0 6px; font-size: var(--text-md); line-height: 1.55; color: var(--text-muted); } .ob-magic-copy strong { color: var(--ink); } .ob-magic-expiry { margin: 0 0 22px; font-size: 12.5px; color: var(--ink-faint); } .ob-magic-links { margin-top: 24px; padding-top: 18px; border-top: var(--hairline) solid var(--primary-border); display: flex; align-items: center; justify-content: center; gap: 12px; } /* Resend is a real POST (button_to), "use a different email" is a link — both render as matching, chrome-free text links so the row reads as one unit. */ .ob-linkbtn-form { margin: 0; display: inline-flex; } .ob-linkbtn { appearance: none; -webkit-appearance: none; background: none; border: 0; padding: 0; margin: 0; font-family: var(--font-sans); font-size: var(--text-sm); line-height: 1; font-weight: var(--weight-semibold); color: var(--primary); cursor: pointer; text-decoration: none; transition: opacity .15s ease; } .ob-linkbtn:hover { text-decoration: underline; } .ob-linkbtn--muted { color: var(--ink-faint); font-weight: var(--weight-medium); } .ob-magic-dot { color: var(--ink-ghost); font-size: var(--text-sm); user-select: none; } /* ---- Setup ---- */ .ob-setup-header { text-align: center; margin-bottom: 20px; } .ob-title--setup { font-size: 27px; } .ob-setup-card { padding: 22px; } .ob-field { margin-bottom: 16px; } .ob-setup-divider { height: 1px; background: var(--border-soft); margin: 0 0 16px; } .ob-row { display: flex; justify-content: space-between; align-items: center; } .ob-row--label { font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--ink); } .ob-row-runs { margin-bottom: 13px; } .ob-row-model { margin-bottom: 16px; } .ob-row-actions { display: flex; align-items: center; gap: 8px; } .ob-link { font-size: var(--text-sm); color: var(--accent); font-weight: var(--weight-semibold); cursor: pointer; } .ob-calendar-row { display: flex; justify-content: space-between; align-items: center; padding: 12px 13px; border: 1.5px dashed var(--border-strong); border-radius: var(--radius-md); margin-bottom: 18px; } .ob-calendar-row__title { font-size: var(--text-ui); font-weight: var(--weight-semibold); color: var(--ink); } .ob-calendar-row__hint { font-size: 11.5px; color: var(--ink-faint); } .ob-calendar-row__actions { display: flex; align-items: center; gap: 9px; } .ob-calendar-connect { font: var(--weight-semibold) var(--text-xs) var(--font-sans); padding: 6px 11px; border-radius: var(--radius-pill); background: var(--surface-card); border: 1.5px solid var(--primary-border); color: var(--primary); cursor: pointer; } .ob-calendar-skip { font-size: var(--text-sm); color: var(--ink-faint); cursor: pointer; } .ob-back { text-align: center; margin-top: 16px; } .ob-back span { font-size: var(--text-ui); color: var(--ink-faint); cursor: pointer; } /* ---- Running ---- */ .ob-run-card { padding: 30px 28px; } .ob-run-head { display: flex; align-items: center; gap: 11px; margin-bottom: 6px; } .ob-spinner { width: 26px; height: 26px; border-radius: 50%; border: 2.5px solid var(--primary-chip); border-top-color: var(--primary); display: inline-block; animation: spin .8s linear infinite; flex: none; } .ob-title--run { font-size: 23px; margin: 0; } .ob-run-hint { margin: 0 0 var(--space-5) 37px; font-size: var(--text-ui); color: var(--ink-faint); } .ob-progress { margin-bottom: 22px; } .ob-steps { margin-bottom: 0; } .ob-step { display: flex; align-items: center; gap: var(--space-3); padding: 7px 0; } .ob-step__mark { width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ob-step__mark--done { background: var(--primary); color: #fff; font-size: var(--text-xs); } .ob-step__mark--active { border: 2px solid var(--primary); } .ob-step__mark--pending { border: 2px solid var(--border-default); } .ob-step__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); animation: pulseDot 1s ease-in-out infinite; } .ob-step__label { font-size: 13.5px; color: #3a352c; } .ob-shimmer { margin-top: var(--space-5); height: 64px; border-radius: var(--radius-md); background: linear-gradient(100deg, var(--paper-warm) 30%, var(--canvas-lo) 50%, var(--paper-warm) 70%); background-size: 720px 100%; animation: shimmer 1.4s linear infinite; } /* ---- First delivery ---- */ .ob-delivery-card { padding: 0; } .ob-delivery-head { display: flex; justify-content: space-between; align-items: center; padding: 14px 20px; border-bottom: var(--hairline) solid var(--border-soft); background: var(--paper-warm); } .ob-delivery-head__chips { display: flex; align-items: center; gap: 8px; } .ob-delivery-head__version { font-size: var(--text-sm); color: var(--ink-faint); } .ob-celebrate { display: flex; align-items: center; gap: 9px; padding: 11px 20px; background: var(--primary-tint); border-bottom: var(--hairline) solid var(--primary-border); } .ob-celebrate__icon { font-size: 15px; } .ob-celebrate__text { font-size: var(--text-ui); color: var(--primary); font-weight: var(--weight-semibold); } .ob-delivery-body { padding: 26px 30px; } .ob-delivery-meta { font-size: var(--text-sm); color: var(--ink-faint); margin-bottom: var(--space-2); } .ob-title--delivery { font-size: 27px; line-height: 1.2; margin: 0 0 var(--space-4); } .ob-delivery-footer { display: flex; gap: var(--space-2); padding: 16px 20px; border-top: var(--hairline) solid var(--border-soft); background: var(--paper-warm); } .ob-delivery-footer .btn { flex: 1; } .ob-below { text-align: center; margin-top: 16px; } .ob-below span { font-size: 12.5px; color: var(--ink-faint); } /* -- Delivery: shared bits -- */ .ob-stat-row { display: flex; gap: var(--space-3); margin-bottom: var(--space-5); } .ob-stat { flex: 1; border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); padding: var(--space-3); } .ob-stat__label { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: 4px; } .ob-stat__value { font-family: var(--font-display); font-size: var(--display-md); } .ob-stat__value--up { color: var(--primary); } .ob-table { border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; margin-bottom: var(--space-4); } .ob-table__head, .ob-table__row { display: flex; gap: var(--space-3); padding: 9px 14px; align-items: center; } .ob-table__head { background: var(--paper-warm); font-size: var(--text-xs); color: var(--ink-faint); font-weight: var(--weight-semibold); } .ob-table__row { border-top: var(--hairline) solid var(--border-soft); font-size: 13.5px; padding: 11px 14px; } .ob-table__col--name { flex: 1; } .ob-table__col--sets { width: 70px; color: var(--text-muted); } .ob-table__col--rpe { width: 44px; color: var(--text-muted); } .ob-body-copy { font-size: 14.5px; line-height: var(--leading-relaxed); color: #3a352c; margin: 0 0 var(--space-4); } .ob-body-copy--muted { font-size: 13.5px; line-height: 1.55; color: var(--text-muted); margin: 0; } /* -- Nutrition -- */ .ob-macro-row { display: flex; gap: 14px; margin-bottom: var(--space-4); } .ob-macro { flex: 1; } .ob-macro__label { font-size: var(--text-xs); color: var(--ink-faint); margin-bottom: 5px; } .ob-macro__track { height: 7px; border-radius: 5px; background: var(--canvas); } .ob-macro__fill { width: 0; height: 100%; border-radius: 5px; } .ob-macro__fill--protein { background: var(--primary); } .ob-macro__fill--carbs { background: var(--accent); } .ob-macro__fill--fat { background: var(--provider); } .ob-meal-grid { display: grid; grid-template-columns: auto 1fr 1fr 1fr; gap: var(--space-2); margin-bottom: var(--space-4); } .ob-meal-grid__head { font-size: var(--text-xs); color: var(--ink-faint); text-align: center; } .ob-meal-grid__day { font-size: var(--text-sm); color: var(--ink-faint); align-self: center; } .ob-meal { border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-sm); padding: var(--space-2); } .ob-meal__name { font-size: 12.5px; font-weight: var(--weight-semibold); } .ob-meal__cal { font-size: var(--text-xs); color: var(--ink-faint); } .ob-callout { display: flex; align-items: center; gap: 9px; padding: 11px 14px; border: var(--hairline) solid var(--primary-border); border-radius: var(--radius-md); background: var(--primary-tint-2); } .ob-callout span:last-child { font-size: var(--text-ui); color: var(--primary); font-weight: var(--weight-semibold); } /* -- Brief -- */ .ob-listing-row { display: flex; gap: 14px; margin-bottom: var(--space-4); } .ob-listing { flex: 1; border: var(--hairline) solid var(--border-soft); border-radius: var(--radius-md); overflow: hidden; } .ob-listing__photo { height: 78px; background: var(--hatch); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-2xs) var(--font-mono); color: var(--ink-ghost); } .ob-listing__body { padding: 11px; } .ob-listing__price-row { display: flex; justify-content: space-between; align-items: center; margin-bottom: 5px; } .ob-listing__price { font-family: var(--font-display); font-size: 17px; } .ob-listing__meta { font-size: var(--text-sm); color: var(--text-muted); } .ob-listing__sub { font-size: var(--text-sm); color: var(--ink-faint); margin: 4px 0 9px; } .ob-listing__actions { display: flex; gap: 6px; } .ob-listing__save, .ob-listing__hide { font: var(--weight-semibold) var(--text-xs) var(--font-sans); padding: 5px 10px; border-radius: var(--radius-sm); } .ob-listing__save { background: var(--primary); color: #fff; } .ob-listing__hide { background: var(--hatch-b); color: var(--text-muted); } .ob-map-placeholder { height: 90px; border-radius: var(--radius-md); background: var(--hatch); display: flex; align-items: center; justify-content: center; font: var(--weight-semibold) var(--text-2xs) var(--font-mono); color: var(--ink-ghost); } /* -- Finance -- */ /* Desktop: widen the auth / onboarding cards and add generous padding so the flow reads as desktop-native instead of a phone screen floating in space. Single-field cards stay comfortably narrow. */ @media (min-width: 768px) { .ob-screen--sm { max-width: 480px; } .ob-signin-card { padding: 44px 40px; } .ob-magic-card { padding: 44px 40px; } } /* --------------------------------------------------------------- joris — Home reader + timeline (1c: Journal & Reader) --------------------------------------------------------------- */ .reader-shell { display: flex; min-height: 100vh; min-height: 100dvh; width: 100%; background: var(--surface-page); } /* ============ Sidebar / timeline rail ============ */ .reader-sidebar { width: 260px; flex: none; display: flex; flex-direction: column; border-right: var(--hairline) solid var(--border-soft); background: var(--surface-raised); height: 100vh; height: 100dvh; position: sticky; top: 0; } .reader-sidebar__brand { padding: var(--space-4) var(--space-4) var(--space-3); border-bottom: var(--hairline) solid var(--border-soft); } .reader-sidebar__body { flex: 1; overflow-y: auto; padding: var(--space-3); display: flex; flex-direction: column; gap: var(--space-2); } .reader-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: var(--space-2); } .reader-timeline-group__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); color: var(--text-faint); margin: var(--space-3) 0 4px; text-transform: uppercase; } .reader-timeline-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: var(--radius-sm); color: var(--text-body); } .reader-timeline-row:hover { background: var(--paper); } .reader-timeline-row.is-active { background: var(--primary-tint); } .reader-timeline-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: var(--ink-faint); } .reader-timeline-row__dot--success { background: var(--primary); } .reader-timeline-row__dot--failed { background: var(--accent); } .reader-timeline-row__dot--pending { background: var(--provider); } .reader-timeline-row__text { display: flex; flex-direction: column; min-width: 0; } .reader-timeline-row__title { font-size: var(--text-ui); font-weight: var(--weight-medium); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .reader-timeline-row__meta { font-size: var(--text-xs); color: var(--text-faint); } .reader-timeline-empty { color: var(--text-faint); font-size: var(--text-ui); padding: var(--space-2); } .reader-sidebar__footer { padding: var(--space-3); border-top: var(--hairline) solid var(--border-soft); display: flex; flex-direction: column; gap: var(--space-2); } .reader-sidebar__links { display: flex; gap: 8px; justify-content: center; } /* ============ Main reader pane ============ */ .reader-main { flex: 1; min-width: 0; display: flex; flex-direction: column; } /* Sticky delivery top bar (design: Delivery.dc.html main top bar). */ .reader-topbar { height: 56px; flex: none; display: flex; align-items: center; gap: 9px; padding: 0 22px; border-bottom: 1.5px solid #e6e1d6; background: rgba(245, 242, 236, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5; overflow-x: auto; } .reader-topbar__name { font-family: 'Newsreader', serif; font-weight: 600; font-size: 13.5px; white-space: nowrap; flex: none; } .reader-topbar__spacer { flex: 1; } .rtop-chip { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: #f1ede4; color: #6f6a5e; white-space: nowrap; flex: none; } .rtop-chip--web { background: #eef4f1; color: #2f6d5b; } .ver-nav { display: flex; align-items: center; background: #efece4; border: 1.5px solid #e6e1d6; border-radius: 999px; padding: 2px; flex: none; } .ver-nav a, .ver-nav span { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; color: #9a9384; text-decoration: none; white-space: nowrap; } .ver-nav a:hover { color: #2f6d5b; text-decoration: none; } .ver-nav .is-current { background: #2f6d5b; color: #fff; } .ver-nav .is-disabled { opacity: .4; } .rtop-btn { font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; padding: 8px 13px; border-radius: 10px; cursor: pointer; flex: none; text-decoration: none; } .rtop-btn--ghost { border: 1.5px solid #e6e1d6; background: #fff; color: #26221b; } .rtop-btn--ghost:hover { background: #faf8f3; text-decoration: none; } .rtop-btn--primary { border: none; background: #2f6d5b; color: #fff; box-shadow: 0 3px 10px rgba(47, 109, 91, .25); } .rtop-btn--primary:hover { background: #28604f; text-decoration: none; } .rtop-btn--primary:disabled, .rtop-btn--primary[disabled] { background: #9db8ae; box-shadow: none; cursor: default; pointer-events: none; } .rtop-btn--primary form, .rtop-btn--primary { margin: 0; } /* Copy the delivery as markdown. Chrome, not template: every delivery gets the same button in the same corner, so the export doesn't depend on which shape the run produced. The glyph swaps to a tick on success (draft.js). */ .rtop-copy { position: relative; width: 34px; height: 34px; flex: none; padding: 0; border: 1.5px solid #e6e1d6; border-radius: 10px; background: #fff; display: inline-flex; align-items: center; justify-content: center; color: #6f6a5e; cursor: pointer; } .rtop-copy:hover { background: #faf8f3; color: #26221b; } .rtop-copy svg { width: 16px; height: 16px; display: block; } .rtop-copy .rtop-copy__ok, .rtop-copy.is-copied .rtop-copy__i { display: none; } .rtop-copy.is-copied { color: #2f6d5b; border-color: #cfe0d9; background: #f4f8f6; } .rtop-copy.is-copied .rtop-copy__ok { display: block; } /* Same scoped tooltip as the Article's export had — the app has no primitive. It sits to the LEFT, vertically centred, rather than below: .reader-topbar carries `overflow-x: auto` (its contents genuinely overflow on a narrow desktop), and overflow-x on its own is not a thing — the computed overflow-y becomes `auto` with it, so the bar is a scroll container that clips in both directions. Hung below the button, ~19px of a 24px tooltip was cut off by the bar's 56px floor. Beside it, the whole tooltip is inside that 56px. */ .rtop-copy::after { content: attr(data-tip); position: absolute; right: calc(100% + 7px); top: 50%; transform: translateY(-50%); font: 500 11.5px/1 'Hanken Grotesk', system-ui, sans-serif; white-space: nowrap; padding: 6px 9px; border-radius: 7px; background: #26221b; color: #fff; opacity: 0; transition: opacity .12s; pointer-events: none; z-index: 3; } .rtop-copy:hover::after, .rtop-copy:focus-visible::after { opacity: 1; } .rtop-copy.is-copied::after { content: none; } /* Reopen button — only visible in focus mode. */ .reader-topbar__reopen { width: 34px; height: 34px; flex: none; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; display: none; align-items: center; justify-content: center; color: #6f6a5e; cursor: pointer; } .reader-topbar__reopen:hover { background: #faf8f3; } .reader-topbar__reopen svg { width: 17px; height: 17px; } .reader-shell--focus .reader-topbar__reopen { display: flex; } .reader-shell--focus .reader-sidebar, .reader-shell--focus .ctx { display: none; } /* The reader's mobile sections strip (shared/_reader_nav). Nothing above 720px: the .ctx column is standing open there and says the same thing with more room. See the mobile block near the end of this file. */ .rnav { display: none; } /* Mobile-only "Versions" pill — opens .ctx as a slide-in drawer instead of the desktop's persistent column. Hidden on desktop; see the mobile block near the end of this file for its @media (max-width: 720px) treatment. */ .reader-topbar__versions { display: none; align-items: center; gap: 5px; font: 600 11.5px "Hanken Grotesk", system-ui, sans-serif; color: #2f6d5b; padding: 6px 10px; border-radius: 9px; border: 1.5px solid #cfe1d9; background: #eef3f1; cursor: pointer; flex: none; } .reader-topbar__versions svg { width: 15px; height: 15px; } .ctx-scrim { display: none; } .chip--disabled { opacity: .4; cursor: default; } /* ============ Context panel (per-routine runs) ============ */ .ctx { width: 260px; flex: none; height: 100vh; height: 100dvh; position: sticky; top: 0; display: flex; flex-direction: column; border-right: 1.5px solid #ece8df; background: #faf8f2; } .ctx__head { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1.5px solid #ece8df; } .ctx__name { flex: 1; min-width: 0; font-family: 'Newsreader', serif; font-size: 16px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ctx__focus { width: 30px; height: 30px; flex: none; border: none; background: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9a9384; cursor: pointer; } .ctx__focus:hover { background: #efece4; } .ctx__focus svg { width: 17px; height: 17px; } /* Mode switch: this routine / all routines. Segmented control, same shape as the settings ones (.prof-seg) — a real two-state control in place of the inert "All" chip that used to imply a filter the panel never had. */ .ctx__modes { flex: none; display: flex; gap: 3px; margin: 12px 12px 8px; padding: 3px; background: #f1ede4; border-radius: 11px; } .ctx__mode { flex: 1; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; padding: 7px 8px; border: none; border-radius: 9px; background: none; color: #8f8877; cursor: pointer; } .ctx__mode:hover { color: #57513f; } .ctx__mode.is-on { background: #fff; color: #322a1c; box-shadow: 0 1px 3px rgba(50,42,28,.10); } /* Only one pane shows at a time; the head label follows the mode. */ .ctx__pane--all, .ctx__name--all { display: none; } .ctx--all .ctx__pane--one, .ctx--all .ctx__name--one { display: none; } .ctx--all .ctx__pane--all { display: block; } .ctx--all .ctx__name--all { display: inline; } /* All-routines rows: one per routine, its latest run. */ .ctx-rrow { display: block; padding: 11px 12px; margin-bottom: 8px; border-radius: 12px; border: 1.5px solid #e6ded1; background: #fff; text-decoration: none; } .ctx-rrow:hover { border-color: #cfe0d9; } .ctx-rrow.is-current { border-color: #a9cabd; background: #f7fbf9; } .ctx-rrow.is-paused { opacity: .62; } .ctx-rrow__top { display: flex; align-items: center; gap: 7px; } .ctx-rrow__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #2f6d5b; } .ctx-rrow__dot--failed { background: #b45b3e; } .ctx-rrow__dot--pending { background: #c2bbac; } .ctx-rrow__name { flex: 1; min-width: 0; font-weight: 600; font-size: 14px; color: #322a1c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .ctx-rrow__ver { flex: none; font-size: 12px; color: #a49d8d; } .ctx-rrow__meta { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin-top: 3px; padding-left: 15px; font-size: 12.5px; color: #9a9384; } .ctx-rrow__tag { font-size: 10px; font-weight: 700; letter-spacing: .4px; padding: 2px 6px; border-radius: 5px; background: #efece4; color: #8f8877; } .ctx-rrow__tag--flag { background: #f7e4de; color: #a3564c; } .ctx__body { flex: 1; overflow: auto; padding: 4px 12px 12px; } /* Routine card wrapping the version timeline */ .ctx-card { border: 1.5px solid #cfe0d9; border-radius: 12px; background: #fff; padding: 10px 10px 9px; } .ctx-card__meta { font-size: 11px; color: #9a9384; margin-left: 15px; } .ctx-runs { margin: 11px 0 2px 4px; border-left: 1.5px solid #ece8df; padding-left: 12px; display: flex; flex-direction: column; gap: 2px; } .ctx-run { display: flex; align-items: center; gap: 8px; padding: 6px 8px; border-radius: 8px; text-decoration: none; color: inherit; } .ctx-run:hover { background: #efece4; text-decoration: none; } .ctx-run.is-active { background: #eef3f1; } .ctx-run__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .ctx-run__dot--success { background: #2f6d5b; } .ctx-run__dot--failed { background: #b45b3e; } .ctx-run__dot--pending { background: #c8a24b; } .ctx-run__label { flex: 1; font-weight: 600; font-size: 12px; color: #26221b; } .ctx-run.is-active .ctx-run__label { color: #2f6d5b; } .ctx-run__time { font-size: 11px; color: #9a9384; white-space: nowrap; } .ctx__empty { color: #9a9384; font-size: 12px; padding: 4px; } .ctx__legend { display: flex; gap: 12px; padding: 14px 6px 0; font-size: 10.5px; color: #9a9384; } .ctx__legend span { display: flex; align-items: center; gap: 5px; } .ctx__legend i { width: 7px; height: 7px; border-radius: 50%; display: inline-block; } .reader-body { flex: 1; padding: var(--space-6) clamp(var(--space-5), 8vw, 80px); max-width: 860px; width: 100%; margin: 0 auto; /* The reader's own chrome — the run notice, the "joris noticed" advisory and the honesty line — sits outside the delivery but has to line up with it, and each output template picks its own column: 660px centred for the TL;DR brief, 940px for nutrition, the full 1040px for the house-hunt family (whose article starts at the left edge, beside a sidebar). Left-aligned 720px is right only for that last group and for plain markdown, so on a brief the advisory sat 110px to the left of the delivery it was about. These two variables carry the column; each template stylesheet sets them for the columns it centres. */ --reader-col: 720px; --reader-col-inline: 0; } /* The Article is read start to finish rather than scanned, so it opens with more air above the kicker than the briefing templates do. Doubled class for the same reason as the mobile rule below: the 16px it overrides comes from `.reader-body--template` in delivery_template.css, which loads after this. */ .reader-body.reader-body--article { padding-top: 31px; } .reader-meta { font-size: var(--text-sm); color: var(--text-faint); margin-bottom: var(--space-3); } /* A run takes a couple of minutes, so the waiting state narrates the phase it's in rather than spinning silently. Steps come from the routine (no web step for a thinking routine, no formatting step without a template). */ .reader-running { display: flex; flex-direction: column; gap: var(--space-3); padding: var(--space-5); background: var(--surface-raised); border-radius: var(--radius-lg); color: var(--text-muted); } .reader-running__head { display: flex; align-items: center; gap: var(--space-2); font-weight: 600; color: var(--ink); } .reader-running__note { margin: 0; font-size: 12px; color: var(--text-muted); } .reader-steps { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; } .reader-step { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--text-muted); } .reader-step__dot { width: 7px; height: 7px; border-radius: 50%; flex: none; background: var(--border-strong); transition: background .2s, box-shadow .2s; } .reader-step.is-done { color: var(--ink); } .reader-step.is-done .reader-step__dot { background: var(--primary); } /* The step in flight: filled and haloed, so the eye lands on it. */ .reader-step.is-now { color: var(--ink); font-weight: 600; } .reader-step.is-now .reader-step__dot { background: var(--primary); box-shadow: 0 0 0 3px rgba(47,109,91,.18); } /* Sets the expectation for a first run while it is still in flight: v1 is a draft to correct, not the finished thing. Separated from the steps by a rule because it is a different register — the steps report, this explains — and sized above them so it doesn't read as more progress chatter. */ .reader-firstrun { border-top: var(--hairline) solid var(--border-soft); padding-top: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .reader-firstrun__title { margin: 0; font-family: var(--font-display); font-size: 17px; font-weight: var(--weight-semibold); color: var(--ink); } .reader-firstrun__text { margin: 0; font-size: 13.5px; line-height: var(--leading-relaxed); color: var(--text-body); } .reader-firstrun__text strong { color: var(--ink); font-weight: 600; } .reader-running__spinner { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--border-strong); border-top-color: var(--primary); animation: spin .8s linear infinite; flex: none; } .reader-error { padding: var(--space-4); background: rgba(180,91,62,.08); border: var(--hairline) solid rgba(180,91,62,.25); border-radius: var(--radius-lg); color: var(--ink); } .reader-error p { color: var(--text-muted); white-space: pre-wrap; } /* ============ Rendered markdown document ============ */ .reader-document { font-family: var(--font-sans); font-size: var(--text-lg); line-height: var(--leading-relaxed); color: var(--text-body); } .reader-document h1, .reader-document h2, .reader-document h3 { font-family: var(--font-display); font-weight: var(--weight-semibold); line-height: var(--leading-tight); color: var(--ink); margin: var(--space-5) 0 var(--space-2); } .reader-document h1 { font-size: var(--display-lg); font-variant-numeric: oldstyle-nums; } .reader-document h2 { font-size: var(--display-md); font-variant-numeric: oldstyle-nums; } .reader-document h3 { font-size: var(--display-sm); font-variant-numeric: oldstyle-nums; } /* Space is the only thing telling a reader where one item ends and the next begins, and 20px above a heading against 12px between paragraphs was not enough of a difference to read as a break — a five-item briefing came out as one even grey column. Much more above a heading than below it, so a heading sits with the text it introduces rather than floating between two blocks. */ .reader-document h1 { margin-top: var(--space-8); } .reader-document h2 { margin-top: var(--space-8); } .reader-document h3 { margin-top: var(--space-6); } .reader-document > :first-child { margin-top: 0; } .reader-document p { margin: 0 0 var(--space-4); } .reader-document ul, .reader-document ol { margin: 0 0 var(--space-4); padding-left: 1.4em; } .reader-document li { margin-bottom: var(--space-2); } .reader-document li > ul, .reader-document li > ol { margin: var(--space-2) 0 0; } /* Links have to look clickable. The global reset in base.css strips colour and underline from every `a` — right for nav, cards and rows, wrong inside a delivery, where "Ver notícia no PÚBLICO" is the one thing you are meant to click and was rendering as plain body text. Listed per container rather than as a bare descendant so the empty `a.anchor` commonmarker puts in every heading stays invisible. */ .reader-document p a, .reader-document li a, .reader-document td a, .reader-document blockquote a { color: var(--primary); text-decoration: underline; text-decoration-color: var(--primary-border); text-decoration-thickness: 1.5px; text-underline-offset: 3px; } .reader-document p a:hover, .reader-document li a:hover, .reader-document td a:hover, .reader-document blockquote a:hover { color: var(--primary-press); text-decoration-color: currentColor; } /* A source URL pasted as its own text can be longer than the column. Break it rather than letting one link set the width of the whole delivery. */ .reader-document a { overflow-wrap: anywhere; } .reader-document strong { font-weight: var(--weight-semibold); } .reader-document blockquote { margin: var(--space-3) 0; padding: var(--space-2) var(--space-3); border-left: 3px solid var(--primary-border); color: var(--text-muted); } .reader-document code { font-family: var(--font-mono); font-size: .92em; background: var(--paper-warm); padding: 1px 5px; border-radius: 4px; } .reader-document pre { background: var(--paper-warm); padding: var(--space-3); border-radius: var(--radius-md); overflow-x: auto; } .reader-document pre code { background: none; padding: 0; } .reader-document table { width: 100%; border-collapse: collapse; margin: var(--space-3) 0; font-size: var(--text-md); } .reader-document th, .reader-document td { text-align: left; vertical-align: top; padding: 9px 12px; border-bottom: var(--hairline) solid var(--border-soft); } .reader-document th { background: var(--paper-warm); font-size: var(--text-xs); text-transform: uppercase; letter-spacing: var(--tracking-label); color: var(--text-faint); white-space: nowrap; } .reader-document tbody tr:hover { background: var(--paper-warm); } /* Every markdown table is wrapped in .md-table (DeliveryRenderer.wrap_tables!) so a wide one scrolls inside its own box. The table keeps `display: table` — the mobile rule used to set `display: block` on the table itself, which throws away the table layout algorithm: the header's tinted background stopped where its text stopped while the row rules ran full width. max-content + min-width:100% is the idiom the admin tables already use — a narrow table fills the column, a wide one overflows and scrolls. */ .md-table { margin: var(--space-3) 0; overflow-x: auto; -webkit-overflow-scrolling: touch; } .md-table > table { margin: 0; width: max-content; min-width: 100%; } .reader-document hr { border: none; border-top: var(--hairline) solid var(--border-soft); margin: var(--space-5) 0; } .reader-document img { max-width: 100%; border-radius: var(--radius-md); } /* Desktop: keep the prose column at its centered reading width, but let wide TABLES break out symmetrically (left + right) — centered on the same axis — so dense data isn't cramped. Capped so it never overflows the 260px sidebar. */ @media (min-width: 1200px) { .reader-document > .md-table { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(1180px, calc(100vw - 324px)); } } /* Narrow screens: tighter cells, and the scroll is the wrapper's job. Cells wrap their text rather than being held on one line — on a phone `nowrap` turned a two-word heading into a horizontal scroll of its own. */ @media (max-width: 640px) { .reader-document th, .reader-document td { padding: 8px 10px; } .reader-document th { font-size: var(--text-2xs); } } /* ============ Grounding citations ============ */ .reader-sources { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--hairline) solid var(--border-soft); } .reader-sources__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .reader-sources__list { margin: 0; padding-left: 1.3em; display: flex; flex-direction: column; gap: 6px; } .reader-sources__list li { font-size: var(--text-md); } .reader-sources__link { color: var(--text-link); } .reader-sources__link:hover { text-decoration: underline; } /* Feedback panel — captures a note that's fed into the routine's next run. */ .reader-feedback { margin-top: var(--space-6); padding-top: var(--space-4); border-top: var(--hairline) solid var(--border-soft); } .reader-feedback__label { font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); text-transform: uppercase; color: var(--text-faint); margin-bottom: var(--space-2); } .reader-feedback__saved { font-size: var(--text-sm); color: var(--primary); margin: 0 0 var(--space-2); } /* ── Mobile (<=720px): the versions/runs panel becomes a slide-in drawer ── The global mobile top bar (app_shell.css) already replaces the icon spine; this handles the delivery-page-specific runs panel on top of it. */ @media (max-width: 720px) { /* Folded into the global mobile bar — see deliveries/show.html.erb. It held 745px of content in a 390px viewport, so half of it (including both actions) sat off-screen behind a horizontal scroll nobody discovers. */ .reader-topbar { display: none; } .reader-topbar__reopen { display: none; } .reader-topbar__versions { display: flex; } .ctx__focus { display: none; } /* The clamp above resolves to 8vw — ~31px a side on a phone, the widest gutter in the app on the one surface where line length matters most. Use the page gutter instead. */ .reader-body { padding-left: var(--page-gutter); padding-right: var(--page-gutter); } /* The mobile bar sits directly above, so the template reader's 16px leaves the kicker looking stuck to it. The doubled class is deliberate: the 16px comes from `.reader-body--template` in delivery_template.css, which loads after this file, so a single-class selector here would lose the cascade. */ .reader-body, .reader-body.reader-body--template { padding-top: 36px; } /* 26px leaves the last card sitting on the bottom edge, and on a phone that edge is shared with the browser's own chrome. Give the end of the page somewhere to finish. */ .reader-body { padding-bottom: 72px; } .ctx { position: fixed; top: 0; right: 0; bottom: 0; width: 86%; max-width: 300px; height: auto; z-index: 56; border-right: none; box-shadow: -6px 0 26px rgba(50, 42, 28, .22); transform: translateX(102%); transition: transform .24s ease; } /* Focus mode hides the reader's persistent side column. Here there is no side column — the panel is a drawer — so the rule had nothing to hide and hid the drawer instead. `display: none` cannot be slid in by a transform, so tapping the version pill faded the scrim over nothing. It was also a one-way door: focus is remembered in localStorage and re-applied on load, and the only control that turns it off lives in .reader-topbar, which is display:none at this width. Turn focus on once at any size and the phone loses its version switcher permanently. */ .reader-shell--focus .ctx { display: block; } .reader-shell--versions-open .ctx { transform: translateX(0); } /* ── The sections strip ──────────────────────────────────────────── Same rows, spacing and pill treatment as .snav and .adm-nav at this width — three surfaces, one answer to "where am I and what else is there". .ctx is position:fixed here, so the strip and .reader-main are the only children left in flow and they stack. */ .reader-shell { flex-direction: column; } .rnav { display: block; order: 1; flex: none; border-bottom: 1.5px solid #ece8df; background: #faf8f2; } .rnav__list { display: flex; flex-direction: row; gap: 7px; overflow-x: auto; overflow-y: hidden; padding: 10px var(--page-gutter); scrollbar-width: none; } .rnav__list::-webkit-scrollbar { display: none; } .rnav__row { flex: none; display: flex; align-items: center; gap: 7px; padding: 8px 13px; border-radius: 999px; background: #fff; border: 1.5px solid #e6ded1; text-decoration: none; transition: border-color .12s, background .12s; } .rnav__row.is-active { background: #f7fbf9; border-color: #a9cabd; } .rnav__label { font-size: 13px; font-weight: 600; color: #26221b; white-space: nowrap; } .rnav__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #b45b3e; } .reader-main { order: 2; } /* The strip sits directly above, so the body no longer needs to clear the mobile bar on its own. */ .reader-body, .reader-body.reader-body--template { padding-top: 26px; } /* The drawer is the run history now, nothing else — its other pane is the strip above. Forced rather than defaulted: the one/all choice is remembered in localStorage, so a reader left on "all" at desk width would otherwise open a drawer with no versions in it, from a chip that says v3. */ .ctx__modes { display: none; } .ctx--all .ctx__pane--one { display: block; } .ctx--all .ctx__name--one { display: inline; } .ctx--all .ctx__pane--all, .ctx--all .ctx__name--all { display: none; } .ctx-scrim { display: block; position: fixed; inset: 0; z-index: 55; background: rgba(38, 34, 27, .34); opacity: 0; pointer-events: none; transition: opacity .22s; } .reader-shell--versions-open .ctx-scrim { opacity: 1; pointer-events: auto; } } /* ========================================================================== Leave this run out / left-out state Shared by every delivery reader (plain markdown and all nine templates), so it carries its own neutral namespace rather than any one reader's prefix (hh-, tr-, nu-, db-). Sits under whichever feedback card the template shows. ========================================================================== */ .dexcl { display: flex; justify-content: space-between; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 16px; padding-top: 14px; border-top: 1px dashed #dfe7e3; } .dexcl__txt { font-size: 12px; color: #9a9384; } .dexcl__btn { font: 600 12.5px var(--font-sans, inherit); padding: 8px 14px; border-radius: 10px; border: 1.5px solid #d8cfc4; background: transparent; color: #6f6a5e; cursor: pointer; } .dexcl__btn:hover { border-color: #b9736a; color: #a3564c; background: #fdf6f5; } /* The shaping-phase version of the same control (Routine#shaping?): a panel rather than a row, because it has to say what leaving a run out costs before someone does it, and it carries the move that actually fixes an early miss. Amber, like .reader-notice — this is a caveat about one run, not an error, and it must not read as the page's primary action next to "Save for next run". */ .dexcl-miss { margin-top: 16px; padding: 14px 16px; border: 1.5px solid #e0cd9a; border-radius: 13px; background: #fdf8ec; } .dexcl-miss__head { font-size: 13.5px; font-weight: 600; color: #6f5a1f; margin-bottom: 6px; } .dexcl-miss__text { margin: 0 0 12px; font-size: 13px; line-height: 1.55; color: #7a6a3f; } /* button_to wraps each button in its own form, so the row is laid out on the forms and the buttons fill them — otherwise they stack. */ .dexcl-miss__acts { display: flex; flex-wrap: wrap; gap: 10px; } .dexcl-miss__acts form { margin: 0; } .dexcl-miss__btn { font: 600 12.5px var(--font-sans, inherit); padding: 8px 14px; border-radius: 10px; border: 1.5px solid #ddc98f; background: #fff; color: #7a6224; cursor: pointer; } .dexcl-miss__btn:hover { background: #fbf3e0; } /* The recommended one of the two, and still not a primary button: it ends in the Direction editor, which is a bigger detour than "put this one aside". */ .dexcl-miss__btn--go { background: #f7eed6; border-color: #d3b978; } /* The escape hatch, for the early run that is just a fluke. Chromeless so the pair reads as one recommendation and one way past it, rather than a choice between two equals. */ .dexcl-miss__btn--quiet { border-color: transparent; background: transparent; color: #8b7a4e; font-weight: 500; } .dexcl-miss__btn--quiet:hover { background: #f7f0dd; color: #7a6224; } /* The left-out state replaces the feedback card entirely. */ .dexcl-out { max-width: 720px; margin-top: 8px; border: 1.5px solid #e2d8cd; border-radius: 16px; background: #faf8f5; overflow: hidden; scroll-margin-top: 20px; } .dexcl-out__head { padding: 13px 20px; background: #f4efe8; border-bottom: 1.5px solid #e2d8cd; font-size: 14px; color: #8a6f60; } .dexcl-out__head span { color: #a09684; font-weight: 400; } .dexcl-out__body { padding: 18px 20px; } .dexcl-out__note { margin: 0 0 14px; font-size: 13px; color: #8f8877; line-height: 1.55; } .dexcl-out__undo { font: 600 12.5px var(--font-sans, inherit); padding: 8px 14px; border-radius: 10px; border: 1.5px solid #cfe0d9; background: #fff; color: #2f6d5b; cursor: pointer; } .dexcl-out__undo:hover { background: #f4f8f6; } /* ========================================================================== Delivery notice — a caveat on a delivery that is otherwise readable. Not the error state: there IS something to read, it just stops short. Amber rather than red for exactly that reason. ========================================================================== */ .reader-notice { display: flex; gap: 12px; align-items: flex-start; max-width: var(--reader-col); margin: 0 var(--reader-col-inline) 22px; padding: 14px 16px; border: 1.5px solid #e0cd9a; border-radius: 13px; background: #fdf8ec; } .reader-notice__icon { flex: none; font-size: 15px; line-height: 1.5; color: #9a7b28; } .reader-notice__body { flex: 1; min-width: 0; } .reader-notice__text { margin: 0 0 10px; font-size: 13.5px; line-height: 1.55; color: #6f5a1f; } .reader-notice__btn { font: 600 12.5px var(--font-sans, inherit); padding: 7px 13px; border-radius: 9px; border: 1.5px solid #ddc98f; background: #fff; color: #7a6224; cursor: pointer; } .reader-notice__btn:hover { background: #fbf3e0; } .reader-notice__btn:disabled { opacity: .55; cursor: default; } /* The honesty line under a finished delivery. Deliberately quiet — it is a standing fact about the tool, not a warning about this particular run (that's .reader-advice's job, and it looks different for exactly that reason). */ .reader-honest { max-width: var(--reader-col); margin: 34px var(--reader-col-inline) 8px; padding-top: 16px; border-top: 1.5px solid #ece8df; font-size: 12px; line-height: 1.6; color: #9a9384; } /* "Something joris noticed" — the post-run review. Deliberately NOT the error palette: this is an observation about a delivery that is otherwise readable and shown in full, so it borrows the reader's own ink rather than shouting. */ .reader-advice { max-width: var(--reader-col); margin: 0 var(--reader-col-inline) 22px; padding: 14px 16px; border: 1.5px solid #cfe0d9; border-radius: 13px; background: #f5faf8; } .reader-advice__head { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } /* Closing it is the reader's call and it sticks (see Delivery#advisory_dismissed_at), so the control is a real form rather than a decoration that forgets. Quiet: the note is worth reading once, and the × is for after you have. */ .reader-advice__closeform { margin-left: auto; line-height: 0; } .reader-advice__close { border: 0; background: none; cursor: pointer; padding: 2px 4px; font: 400 16px/1 var(--font-sans, inherit); color: #9ab5aa; border-radius: 6px; } .reader-advice__close:hover { color: #2f6d5b; background: #e7f1ed; } .reader-advice__icon { font-size: 14px; line-height: 1; } .reader-advice__title { font: 700 12px var(--font-sans, inherit); letter-spacing: .3px; color: #2f6d5b; } .reader-advice__text { margin: 0 0 8px; font-size: 13.5px; line-height: 1.6; color: #3a352c; } .reader-advice__foot { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; } .reader-advice__btn { font: 600 12.5px var(--font-sans, inherit); padding: 7px 13px; border-radius: 9px; border: 1.5px solid #a9cabd; background: #fff; color: #2f6d5b; cursor: pointer; } .reader-advice__btn:hover { background: #eef4f1; } .reader-advice__btn:disabled { opacity: .55; cursor: default; } .reader-advice__note { font-size: 11.5px; color: #9a9384; } /* Per-step timing on the run progress card. The clock time each step started and how long it took — the pair that distinguishes a slow run from a stuck one, which a step name on its own cannot. */ .reader-step__time { margin-left: auto; font-size: 11px; color: #9a9384; font-variant-numeric: tabular-nums; } .reader-step__dur { min-width: 52px; text-align: right; font-size: 11px; color: #b3ac9d; font-variant-numeric: tabular-nums; } .reader-step.is-now .reader-step__dur { color: #a4712f; font-weight: 600; } /* --------------------------------------------------------------- Delivery provenance (design handoff §6) — "THIS RUN USED" chip strip under the run meta, plus its full-log disclosure. Only rendered when a run touched or skipped a connection; see deliveries/_tool_activity.html.erb. --------------------------------------------------------------- */ .ta-strip { display: flex; flex-wrap: wrap; align-items: flex-start; gap: 8px; max-width: var(--reader-col); margin: 0 var(--reader-col-inline) 22px; padding: 11px 13px; border-radius: 11px; background: #efeae0; } .ta-strip__label { flex: none; align-self: center; margin-top: 1px; font: 700 10px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .6px; color: #8f8877; } /* One pill per used connection ("Calendar · read 6 events") or the web search count ("Web · 4 searches"). Counts, never contents. */ .ta-pill { align-self: center; font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; padding: 6px 11px; border-radius: 999px; background: #fff; border: 1.5px solid #e2ddd0; color: #3a352c; } /* A skipped connection — logged as a gap so an incomplete briefing says so while being read, rather than being noticed only by absence. */ .ta-pill--gap { display: inline-flex; align-items: center; gap: 5px; background: #fdf7e9; border-color: #e0c48f; color: #6f5a2c; } .ta-pill__mark { display: inline-flex; flex: none; align-items: center; justify-content: center; width: 14px; height: 14px; border-radius: 50%; background: #c9a24a; color: #fff; font: 700 9px 'Hanken Grotesk', system-ui, sans-serif; line-height: 1; } /* The outbound mirror: where this delivery WENT (deliveries/_sent_to). Provenance above the briefing is a promise being kept and earns its tinted box. A hand-off receipt is a footnote, so it is one — same column, same quiet ink and size as .reader-honest directly below it, so the two read as one set of end-notes rather than two competing blocks. */ .reader-sent { max-width: var(--reader-col); margin: 34px var(--reader-col-inline) 0; padding-top: 16px; border-top: 1.5px solid #ece8df; font-size: 12px; line-height: 1.6; color: #9a9384; } /* The one thing on this line worth interrupting for. */ .reader-sent--failed { color: #a04f34; } .reader-sent__more { margin-left: 6px; color: inherit; font-weight: 600; text-decoration: underline; } /* The rule belongs to whichever note comes first. .reader-honest carries its own; under the receipt it is the second line of the same group, not a new one, so it drops the rule and closes up. */ .reader-sent + .reader-honest { margin-top: 10px; padding-top: 0; border-top: 0; } /* Full log — a native
disclosure, no JS. Always its own line under the pills rather than fighting them for room in the flex row. */ .ta-log { flex: 1 0 100%; } .ta-log__summary { cursor: pointer; list-style: none; font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; color: var(--primary); } .ta-log__summary::-webkit-details-marker { display: none; } .ta-log__summary:hover { text-decoration: underline; } .ta-log__body { display: grid; gap: 9px; margin-top: 12px; padding-top: 12px; border-top: 1.5px solid #e2ddd0; font-size: 13px; line-height: 1.5; } .ta-log__line { display: flex; gap: 11px; } .ta-log__time { flex: none; font-family: ui-monospace, Menlo, monospace; font-size: 12.5px; color: #b3ac9d; font-variant-numeric: tabular-nums; } .ta-log__desc { color: #3a352c; } /* Future-proofing: v1 only ever produces reads, but a write:true log line (a draft left in Gmail, say) is what people worry most about, so it already gets the emphasised treatment the design calls for. */ .ta-log__desc--write { color: #26221b; font-weight: 600; } .ta-log__foot { margin: 12px 0 0; font-size: 12.5px; line-height: 1.55; color: #8f8877; } /* ----------------------------------------------------------------- joris — House-hunt output template (structured, interactive) Values mirror the Claude-Design spec (Delivery.dc.html), which already matches the brand palette. ----------------------------------------------------------------- */ .reader-body--template { max-width: 1040px; padding-top: var(--space-4); } .hh-layout { display: flex; gap: 34px; align-items: flex-start; } .hh-article { flex: 1; min-width: 0; max-width: 720px; } .hh-metarow { display: flex; justify-content: space-between; align-items: center; margin-bottom: 18px; } .hh-meta { font-size: calc(12.5px * var(--reading-scale)); color: #9a9384; } @media (max-width: 720px) { /* Date and time stay together on one line; the run detail drops below. The date is unbreakable — a long weekday and month at the largest reading size will not share a row with it. */ .hh-metarow { align-items: baseline; flex-wrap: wrap; } .hh-meta__sep { display: none; } .hh-meta__date, .hh-meta__detail { display: block; } .hh-meta__date { white-space: nowrap; } } .hh-title { font-family: var(--font-display); font-weight: 500; font-size: calc(34px * var(--reading-scale)); line-height: 1.15; margin: 0 0 6px; color: var(--ink); } .hh-subtitle { font-size: calc(13px * var(--reading-scale)); color: #9a9384; margin-bottom: 22px; } .hh-kpis { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin-bottom: 24px; } .hh-kpi { border: 1.5px solid #e6e1d6; border-radius: 13px; padding: 14px 15px; background: #fff; } .hh-kpi__value { font-family: var(--font-display); font-size: calc(27px * var(--reading-scale)); line-height: 1; color: var(--ink); } .hh-kpi__value--accent { color: #b45b3e; } .hh-kpi__label { font-size: calc(11.5px * var(--reading-scale)); color: #6f6a5e; margin-top: 6px; line-height: 1.35; } .hh-kpi__label p { margin: 0; } .hh-dofirst { border: 1.5px solid #cfe0d9; background: linear-gradient(180deg, #f4f8f6, #eef4f1); border-radius: 15px; padding: 18px 20px; margin-bottom: 30px; } .hh-dofirst__body { margin: 8px 0 0; font-size: calc(14.5px * var(--reading-scale)); line-height: 1.55; color: var(--ink); } /* "What changed since the last run" — the headline of a scheduled hunt, so it sits above the shortlist. Terracotta rather than the green used for recommendations: this is news, not advice. */ .hh-since { border: 1.5px solid #e8d3c8; background: linear-gradient(180deg, #fdf6f2, #faeee7); border-radius: 15px; padding: 18px 20px; margin-bottom: 26px; } /* "Dropped, and why" — the two-column table from the Recipe Detail design: header strip, one row per drop with the failed rule in terracotta, an optional "+ N more" footer. Columns share the 1.6/1.2 flex split. */ .hh-dropped { border: 1.5px solid #e6e1d6; border-radius: 13px; overflow: hidden; background: #fff; margin-bottom: 34px; } .hh-dropped__head { display: flex; gap: 12px; padding: 10px 15px; background: #faf8f3; font: 600 calc(10.5px * var(--reading-scale)) var(--font-sans); letter-spacing: .4px; color: #a49d8d; } .hh-dropped__head span:first-child { flex: 1.6; } .hh-dropped__head span:last-child { flex: 1.2; } .hh-dropped__row { display: flex; gap: 12px; padding: 12px 15px; border-top: 1.5px solid #f0ece3; align-items: flex-start; } .hh-dropped__posting { flex: 1.6; font-size: calc(12.5px * var(--reading-scale)); color: #3a352c; } .hh-dropped__reason { flex: 1.2; font-size: calc(12.5px * var(--reading-scale)); color: #b45b3e; font-weight: 600; } .hh-dropped__more { padding: 11px 15px; border-top: 1.5px solid #f0ece3; font-size: calc(12.5px * var(--reading-scale)); color: #a49d8d; } .hh-since__body { margin: 8px 0 0; font-size: calc(14.5px * var(--reading-scale)); line-height: 1.55; color: var(--ink); } .hh-pill { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; padding: 4px 9px; border-radius: 999px; } .hh-pill--do { color: #2f6d5b; background: #dcebe5; } .hh-pill--match { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .5px; color: #2f6d5b; background: #dcebe5; padding: 3px 8px; } .hh-pill--since { color: #b45b3e; background: #f6e2d8; } .hh-pill--new { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .5px; color: #b45b3e; background: #f6e2d8; padding: 3px 8px; } .hh-pill--changed { font-size: calc(9.5px * var(--reading-scale)); letter-spacing: .3px; font-weight: 600; color: #6f6a5e; background: #efeae0; padding: 3px 8px; } .hh-h2 { font-family: var(--font-display); font-weight: 500; font-size: calc(21px * var(--reading-scale)); margin: 0 0 4px; scroll-margin-top: 20px; color: var(--ink); } .hh-note { font-size: calc(13px * var(--reading-scale)); color: #9a9384; margin: 0 0 16px; } .hh-verdict { font-size: calc(14.5px * var(--reading-scale)); line-height: 1.65; color: #3a352c; margin: 6px 0 34px; } .hh-cards { display: flex; flex-direction: column; gap: 11px; margin-bottom: 34px; } .hh-card { border: 1.5px solid #e6e1d6; border-radius: 14px; padding: 16px 18px; background: #fff; transition: opacity .15s; } .hh-card--top { border-color: #cfe0d9; background: #f8fbfa; } .hh-card.is-dismissed { opacity: .4; } .hh-card__head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 11px; } .hh-card__title { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .hh-card__name { font-weight: 600; font-size: calc(14.5px * var(--reading-scale)); } .hh-card__name a { color: var(--ink); } .hh-card__name a:hover { color: #b45b3e; } .hh-card__source { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-card__source a { color: #2f6d5b; text-decoration: none; border-bottom: 1px solid #cfe0d9; } .hh-card__source a:hover { color: #b45b3e; border-bottom-color: #b45b3e; } .hh-card__actions { display: flex; gap: 6px; flex: none; } .hh-save { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 9px; border: none; cursor: pointer; white-space: nowrap; background: #eef4f1; color: #2f6d5b; } .hh-save.is-on { background: #2f6d5b; color: #fff; } .hh-dismiss { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 10px; border-radius: 9px; border: none; cursor: pointer; background: #f1ede4; color: #9a9384; } .hh-dismiss.is-on { background: #b45b3e; color: #fff; } .hh-card__grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; margin-bottom: 12px; } .hh-card__k { font-size: calc(10px * var(--reading-scale)); letter-spacing: .4px; color: #a49d8d; margin-bottom: 3px; } .hh-card__v { font-size: calc(13px * var(--reading-scale)); font-weight: 600; } .hh-card__vs { font-size: calc(12px * var(--reading-scale)); color: #6f6a5e; } .hh-card__v2 { font-size: calc(13px * var(--reading-scale)); color: #3a352c; } .hh-card__tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; border-top: 1.5px solid #f0ece3; padding-top: 11px; } .hh-card__why { font-size: calc(11px * var(--reading-scale)); color: #9a9384; margin-right: 2px; } .hh-tag { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 4px 9px; border-radius: 999px; background: rgba(180,91,62,.1); color: #b45b3e; } .hh-otable { border: 1.5px solid #e6e1d6; border-radius: 13px; overflow: hidden; background: #fff; margin-bottom: 20px; } .hh-otable__head { display: flex; gap: 12px; padding: 10px 15px; background: #faf8f3; font: 600 calc(10.5px * var(--reading-scale)) var(--font-sans); letter-spacing: .4px; color: #a49d8d; } .hh-otable__row { display: flex; gap: 12px; padding: 12px 15px; border-top: 1.5px solid #f0ece3; align-items: flex-start; font-size: calc(12.5px * var(--reading-scale)); } .hh-oc1 { flex: 1.6; color: #3a352c; } .hh-oc1 a { color: #3a352c; } .hh-oc2 { flex: 1; font-weight: 600; } .hh-oc3 { flex: 1.2; color: #b45b3e; font-weight: 600; } .hh-flag { border-left: 4px solid #b45b3e; background: #fbf3ef; border-radius: 0 12px 12px 0; padding: 14px 18px; margin: 0 0 34px; } .hh-flag__label { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #b45b3e; margin-bottom: 6px; } .hh-flag__body { margin: 0; font-size: calc(13.5px * var(--reading-scale)); line-height: 1.6; color: #3a352c; } .hh-custom { margin: 0 0 30px; font-size: calc(14.5px * var(--reading-scale)); } .hh-steps { display: flex; flex-direction: column; gap: 14px; margin-bottom: 38px; } .hh-step { display: flex; gap: 13px; align-items: flex-start; } .hh-step__n { width: 24px; height: 24px; flex: none; border-radius: 50%; background: #eef4f1; color: #2f6d5b; font: 600 calc(12px * var(--reading-scale)) var(--font-sans); display: flex; align-items: center; justify-content: center; margin-top: 1px; } .hh-step__body { margin: 0; font-size: calc(14px * var(--reading-scale)); line-height: 1.6; color: #3a352c; } /* Sources close the delivery, so they get a rule to sit under — without one the numbered list reads as one more section of the briefing rather than the apparatus at the end of it. */ .hh-sources-label { font: 700 calc(11px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #a49d8d; margin: 26px 0 12px; padding-top: 22px; border-top: 1.5px solid #ece8df; scroll-margin-top: 20px; } .hh-sources { margin: 0; padding-left: 20px; display: flex; flex-direction: column; gap: 7px; } .hh-sources li { font-size: calc(13px * var(--reading-scale)); line-height: 1.4; } .hh-sources a { color: #b45b3e; } /* top: clears the 56px sticky reader-topbar (+12px breathing room) so the nav parks just below it instead of sliding behind it. */ .hh-nav { width: 156px; flex: none; position: sticky; top: 68px; align-self: flex-start; } /* Anchor jumps (#verdict, #candidates …) must stop below the sticky topbar, not underneath it — matches the nav's 68px offset. */ .hh-h2, .hh-sources-label, .hh-shape { scroll-margin-top: 68px; } .hh-nav__label { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #a49d8d; margin-bottom: 11px; } .hh-nav__links { display: flex; flex-direction: column; gap: 2px; border-left: 1.5px solid #e6e1d6; } .hh-nav__links a { font-size: calc(12.5px * var(--reading-scale)); color: #6f6a5e; padding: 5px 0 5px 13px; margin-left: -1.5px; border-left: 1.5px solid transparent; } .hh-nav__links a:hover { color: #2f6d5b; border-left-color: #2f6d5b; } .hh-nav__shape { display: flex; align-items: center; gap: 6px; font-size: calc(12.5px * var(--reading-scale)); color: #2f6d5b; font-weight: 600; margin-top: 16px; padding-top: 14px; border-top: 1.5px solid #e6e1d6; } .hh-shape { max-width: 720px; margin-top: 0; scroll-margin-top: 20px; } .hh-shape__card { border: 1.5px solid #cfe0d9; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 10px 34px rgba(50,42,28,.06); } .hh-shape__head { padding: 13px 20px; background: #f4f8f6; border-bottom: 1.5px solid #cfe0d9; font-size: calc(14px * var(--reading-scale)); color: #2f6d5b; } .hh-shape__head span { color: #8f8877; font-weight: 400; } .hh-shape__body { padding: 18px 20px; } .hh-shape__lbl { font-size: calc(12.5px * var(--reading-scale)); font-weight: 600; color: #6f6a5e; margin-bottom: 9px; } .hh-refine { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 18px; } .hh-refine__chip { font: 600 calc(12px * var(--reading-scale)) var(--font-sans); padding: 7px 13px; border-radius: 999px; cursor: pointer; background: #f1ede4; color: #6f6a5e; transition: .15s; } .hh-refine__chip.is-on { background: #2f6d5b; color: #fff; } .hh-notes { width: 100%; min-height: 84px; padding: 12px 14px; border: 1.5px solid #e6e1d6; border-radius: 12px; font: 400 calc(13.5px * var(--reading-scale))/1.55 var(--font-sans); color: #3a352c; outline: none; resize: vertical; } .hh-notes:focus { border-color: #2f6d5b; box-shadow: 0 0 0 3px rgba(47,109,91,.2); } .hh-shape__foot { display: flex; justify-content: space-between; align-items: center; gap: 14px; margin-top: 16px; } .hh-shape__count { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-shape__foot-right { display: flex; align-items: center; gap: 14px; } .hh-shape__applies { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .hh-shape__save { font: 600 calc(13px * var(--reading-scale)) var(--font-sans); padding: 11px 18px; border-radius: 11px; border: none; background: #2f6d5b; color: #fff; cursor: pointer; box-shadow: 0 3px 10px rgba(47, 109, 91, .25); } .hh-shape__save:hover { background: #28604f; } .hh-shape__save:disabled { opacity: .6; cursor: default; } /* "Save for next run" and the line saying when it applies can't share a row on a phone — the button gives up and wraps its own label to two lines, which reads as a mistake beside a one-line note. Stack them: the note becomes a caption above a full-width button. Shared by every reader carrying this footer (watch, house hunt), not only the Article. This block sits here rather than with the other phone rules at the top of the file: a media query adds no specificity, so an override written above the rule it overrides simply loses. */ @media (max-width: 720px) { .hh-shape__foot, .hh-shape__foot-right { flex-direction: column; align-items: stretch; gap: 10px; } .hh-shape__save { width: 100%; } } /* "Leave this run out" lives in every reader, so its styles are shared — see the .dexcl block in reader.css, not here. */ @media (max-width: 900px) { .hh-layout { flex-direction: column; } .hh-nav { display: none; } .hh-kpis, .hh-card__grid { grid-template-columns: repeat(2, 1fr); } } /* ── Brief provenance (collapsible; shared by reader + templates) ── */ .brief { max-width: 720px; margin: 40px 0 16px; border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; } .brief__summary { display: flex; align-items: center; gap: 11px; padding: 15px 18px; cursor: pointer; list-style: none; } .brief__summary::-webkit-details-marker { display: none; } .brief__icon { font-size: calc(16px * var(--reading-scale)); } .brief__headings { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .brief__title { font-weight: 600; font-size: calc(14px * var(--reading-scale)); color: var(--ink); } .brief__sub { font-size: calc(12px * var(--reading-scale)); color: #9a9384; } .brief__chev { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); color: #9a9384; } .brief__chev--open { display: none; } .brief[open] .brief__chev--closed { display: none; } .brief[open] .brief__chev--open { display: inline; } .brief__body { border-top: 1.5px solid #f0ece3; padding: 18px; display: flex; flex-direction: column; gap: 18px; } .brief__ltag { display: flex; align-items: baseline; gap: 9px; margin-bottom: 9px; flex-wrap: wrap; } .brief__pill { font: 700 calc(10px * var(--reading-scale)) var(--font-sans); letter-spacing: .5px; color: #6f6a5e; background: #f1ede4; padding: 4px 9px; border-radius: 999px; } .brief__pill--accent { color: #2f6d5b; background: #dcebe5; } .brief__hint { font-size: calc(11.5px * var(--reading-scale)); color: #9a9384; margin: 0; } .brief__link { color: #b45b3e; } .brief__quote { margin: 0; font-size: calc(13.5px * var(--reading-scale)); line-height: 1.65; color: #3a352c; background: #faf8f3; border-left: 3px solid #cfe0d9; border-radius: 0 10px 10px 0; padding: 12px 15px; white-space: pre-wrap; } .brief__chips { display: flex; flex-wrap: wrap; gap: 7px; } .brief__chip { font: 600 calc(12px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; } .brief__feedback { display: flex; flex-direction: column; gap: 10px; } .brief__fitem { display: flex; gap: 10px; align-items: flex-start; } .brief__forigin { font: 600 calc(10.5px * var(--reading-scale)) var(--font-sans); color: #9a9384; background: #f1ede4; padding: 3px 8px; border-radius: 6px; flex: none; margin-top: 1px; } .brief__ftext { font-size: calc(13px * var(--reading-scale)); line-height: 1.5; color: #3a352c; } .brief__foot { font-size: calc(11.5px * var(--reading-scale)); color: #9a9384; border-top: 1.5px solid #f0ece3; padding-top: 13px; } /* ── Watch template: change rows inside the reused hh-card ─────────────────── */ .wt-changes { display: flex; flex-direction: column; gap: 2px; margin-top: 12px; } .wt-change { display: flex; align-items: baseline; gap: 10px; padding: 9px 0; border-top: 1.5px solid #f0ece3; } .wt-change:first-child { border-top: none; } .wt-change__sig { flex: none; width: calc(78px * var(--reading-scale)); font: 700 calc(9px * var(--reading-scale)) var(--font-sans); letter-spacing: .5px; color: #6a4c86; background: #efe9f2; border-radius: 5px; padding: 3px 6px; text-align: center; } .wt-change__text { flex: 1; font-size: calc(13.5px * var(--reading-scale)); line-height: 1.5; color: #3a352c; } .wt-change__text a { color: #2f6d5b; text-decoration: none; border-bottom: 1px solid #cfe0d9; } .wt-change__text a:hover { color: #b45b3e; border-bottom-color: #b45b3e; } .wt-change__new { flex: none; font: 700 calc(8.5px * var(--reading-scale)) var(--font-sans); letter-spacing: .5px; color: #b45b3e; background: #f6e2d8; border-radius: 999px; padding: 2px 7px; } .wt-change__when { flex: none; font-size: calc(11px * var(--reading-scale)); color: #9a9384; } .wt-quiet { opacity: .72; } .wt-quiet__tag { flex: none; font: 600 calc(11px * var(--reading-scale)) var(--font-sans); color: #9a9384; background: #f1ede4; border-radius: 999px; padding: 3px 10px; } /* A rejected note must not look like a saved one. */ .hh-shape__count.is-error, .tr-fb__status.is-error, .nu-fb__status.is-error, .db-fb__status.is-error { color: #a3564c; font-weight: 600; } /* --------------------------------------------------------------- joris — Create-routine wizard --------------------------------------------------------------- */ .wizard-shell { width: 100%; max-width: 460px; display: flex; flex-direction: column; align-items: center; gap: var(--space-4); } .wizard-brand { margin-bottom: var(--space-2); } .wizard-card { width: 100%; padding: 0; overflow: hidden; } .wizard-card__head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-3) var(--space-4); background: var(--paper-warm); border-bottom: var(--hairline) solid var(--border-soft); } .wizard-step-label { font-size: var(--text-xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-label); color: var(--text-faint); text-transform: uppercase; } .wizard-card__body { padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); } .wizard-card__body .field__label, .wizard-card__body label { margin-top: var(--space-2); } .wizard-chip-row { display: flex; flex-wrap: wrap; gap: 6px; } .wizard-toggle-row { display: flex; align-items: center; justify-content: space-between; padding: var(--space-2) var(--space-3); border: var(--hairline) solid var(--border-default); border-radius: var(--radius-md); } .wizard-nav { display: flex; align-items: center; justify-content: space-between; margin-top: var(--space-3); } .wizard-nav--end { justify-content: flex-end; } .wizard-nav [data-wizard-next], .wizard-nav [data-wizard-back] { cursor: pointer; } .wizard-review-card { display: flex; flex-direction: column; gap: 6px; } /* Preserve the user's line breaks / indentation in the direction preview. */ #wizard-review-direction { white-space: pre-wrap; word-break: break-word; } .wizard-errors { color: var(--accent); font-size: var(--text-sm); background: rgba(180,91,62,.08); border-radius: var(--radius-md); padding: var(--space-2) var(--space-3); } [data-skill-pick], [data-frequency-pick], [data-provider-pick] { cursor: pointer; } /* Desktop: give the wizard more room (roomier direction textarea, less cramped forms) and more generous padding. Mobile layout is unchanged. */ @media (min-width: 768px) { .wizard-shell { max-width: 600px; gap: var(--space-5); } .wizard-card__head { padding: var(--space-4) var(--space-6); } .wizard-card__body { padding: var(--space-6); gap: var(--space-3); } } /* --------------------------------------------------------------- joris — Settings screens (routines manage list, providers) --------------------------------------------------------------- */ .settings-shell { width: 100%; max-width: 620px; display: flex; flex-direction: column; gap: var(--space-2); } .settings-topbar { display: flex; align-items: center; justify-content: space-between; } .settings-list { display: flex; flex-direction: column; gap: var(--space-2); } .settings-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); } .settings-row__main { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .settings-row__actions { display: flex; align-items: center; gap: 6px; flex: none; } /* --- M3: routine management, edit tabs, history --- */ .settings-row.is-paused { opacity: .6; } .edit-tabs { display: flex; gap: 6px; margin: var(--space-3) 0 var(--space-2); flex-wrap: wrap; } .edit-tab { font: 600 12px system-ui; padding: 6px 12px; border-radius: 999px; cursor: pointer; color: var(--ink-mut, #6b665c); background: var(--paper-2, #f4f2ec); } .edit-tab.is-active { background: var(--primary, #2f6d5b); color: #fff; } .history-search { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: var(--space-3); } /* --- M4: plans & usage --- */ .plan-grid { display: flex; gap: var(--space-3); flex-wrap: wrap; } .plan-card { flex: 1 1 240px; display: flex; flex-direction: column; gap: var(--space-2); } .plan-card--pro { border-color: var(--primary-border, #cfe0d9); background: var(--primary-tint-2, #f4f8f6); } .plan-card--current { outline: 2px solid var(--primary, #2f6d5b); outline-offset: -2px; } .plan-card__head { display: flex; align-items: baseline; justify-content: space-between; } .plan-card__price { font: 600 15px var(--font-sans, system-ui); color: var(--ink, #26221b); } .plan-card__rule { height: 1px; background: var(--border-soft, #ece8df); margin: 2px 0; } .plan-card__features { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; } .plan-card__features li { font-size: 13px; color: var(--ink-soft, #6f6a5e); } .plan-card__features li::before { content: "✓ "; color: var(--primary, #2f6d5b); font-weight: 600; } .plan-card__foot { margin-top: auto; padding-top: var(--space-2); } .usage-card { display: flex; flex-direction: column; } .usage-nudge { margin-top: var(--space-3); padding: 10px 12px; border-radius: var(--radius-md, 11px); background: var(--primary-tint, #eef4f1); color: var(--ink, #26221b); font-size: 13px; } .usage-nudge--warn { background: rgba(180,91,62,.10); } .usage-nudge__link { color: var(--accent, #b45b3e); font-weight: 600; } .usage-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 2px; border-bottom: 1px solid var(--border-soft, #ece8df); } .usage-row__name { font-size: 13px; color: var(--ink, #26221b); } /* Standard account/settings page frame — matches Home/History/Routines (880px, left-aligned, hero + content) instead of the centered onboarding shell. */ .acct-page { width: 100%; max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .acct-page .settings-shell { max-width: 620px; } /* Profile settings. --prose is one measure for every paragraph on these pages, in px on purpose: a `ch` cap looks consistent in the stylesheet and is not — it scales with the element's own font-size, so an 11px hint and a 13.5px lead capped at the same ch count wrap ~15% apart and the page ends up with several different ragged right edges. */ .acct-page { --prose: 660px; } .prof-divider { display: flex; align-items: baseline; gap: 9px; margin: 26px 0 12px; } .prof-divider > span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .prof-divider__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .prof-card { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(50,42,28,.04); } /* Danger zone — same shell, terracotta-tinted. */ .prof-divider--danger > span:first-child { color: var(--danger); } .prof-divider--danger .prof-divider__rule { background: var(--danger-border); } /* The leaving question. Deliberately quieter than the confirmation above it — it is an ask, not a step, and must not read as one more thing standing between someone and the door. */ .prof-id { display: flex; align-items: center; gap: 15px; padding: 18px 20px; border-bottom: 1.5px solid #f3f0e8; } .prof-id__av { width: 52px; height: 52px; flex: none; border-radius: 50%; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 18px "Hanken Grotesk"; } .prof-id__main { flex: 1; min-width: 0; } .prof-id__name { font-weight: 600; font-size: 14px; } .prof-id__email { color: #9a9384; margin-top: 2px; } .prof-plan { flex: none; font: 600 10px "Hanken Grotesk"; padding: 5px 11px; border-radius: 999px; background: #efe9f2; color: #6a4c86; } .prof-row { display: flex; align-items: flex-start; gap: 16px; padding: 14px 20px; border-bottom: 1.5px solid #f3f0e8; } .prof-row--last { border-bottom: none; } .prof-row__lbl { width: 150px; flex: none; font-size: 12.5px; font-weight: 600; color: #3a352c; padding-top: 9px; } .prof-row__hint { font-size: 11px; font-weight: 400; color: #9a9384; margin-top: 2px; } .prof-row__field { flex: 1; min-width: 0; } .prof-row__note { font-size: 11px; color: #9a9384; margin-top: 7px; line-height: 1.5; } .prof-input { width: 100%; border: 1.5px solid #e6e1d6; border-radius: 10px; padding: 10px 13px; font: 400 13.5px "Hanken Grotesk"; color: #26221b; outline: none; background: #fff; } .prof-input:focus { border-color: #cfe0d9; } /* Below .prof-input deliberately: its `background` shorthand would otherwise wipe the chevron, since both rules carry the same specificity. */ .prof-input--select { appearance: none; background-image: url("data:image/svg+xml;charset=UTF-8,%3Csvg width='10' height='6' viewBox='0 0 10 6' fill='none' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath d='M1 1l4 4 4-4' stroke='%239a9384' stroke-width='1.5' stroke-linecap='round'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 13px center; padding-right: 32px; } .prof-input--area { resize: vertical; line-height: 1.5; } .prof-tz { width: 100%; } .prof-seg { display: inline-flex; gap: 6px; } .prof-seg__opt { display: inline-flex; align-items: center; font: 600 11.5px "Hanken Grotesk"; padding: 8px 14px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .prof-seg__opt.is-on { border-color: #2f6d5b; background: #eef4f1; color: #2f6d5b; } .prof-seg__radio { position: absolute; opacity: 0; width: 0; height: 0; } /* Reading-size preview. With the in-reader control gone this is the only feedback the setting has, so it renders the real brief template (see SettingsHelper#reading_size_sample_delivery) instead of a mock-up. .reading-scope (in tokens/typography.css) makes the type tokens track --reading-scale; reading_scale_preview.js sets that variable inline so the sample shows the PENDING selection rather than the saved one. */ .prof-rsize__preview { margin-top: 14px; border-radius: 12px; overflow: hidden; border: 1.5px solid #e6e1d6; background: #fcfbf7; } .prof-rsize__label { font: 700 9.5px "Hanken Grotesk"; letter-spacing: .5px; color: #a49d8d; padding: 10px 15px 0; } /* The brief template sets its own page-level padding and title size; rein both in so the sample sits as a card inside the settings row. */ .prof-rsize__doc { padding: 4px 15px 15px; } .prof-rsize__doc .db { padding: 0; } .prof-rsize__doc .db-title { margin-top: 6px; } /* The TL;DR block carries a page-flow bottom margin that leaves a gap at the end of the card here, since it's the last thing in the sample. */ .prof-rsize__doc .db > :last-child { margin-bottom: 0; } .prof-tf-now { margin-left: auto; flex: none; font-size: 12px; color: #9a9384; } .prof-tf-now strong { color: #3a352c; font-weight: 600; } /* Text-only rows (e.g. Email) center vertically — no input to align a top edge to. */ .prof-row--center { align-items: center; } .prof-row--center .prof-row__lbl { padding-top: 0; } .prof-email { display: flex; align-items: center; gap: 10px; } .prof-email .mono { color: #6f6a5e; } .prof-verified { display: inline-flex; align-items: center; gap: 4px; font: 600 10px "Hanken Grotesk"; color: #2f6d5b; } .prof-change { margin-left: auto; font: 600 11px "Hanken Grotesk"; padding: 7px 12px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .prof-change:hover { border-color: #cfe0d9; color: #2f6d5b; } /* Email-change reveal — CSS-only, toggled by the row's "Change" label. */ .prof-echange { max-height: 0; overflow: hidden; transition: max-height .25s ease; } .prof-echange__cb:checked + .prof-echange { max-height: 220px; } .prof-echange__body { border: 1.5px solid #e6e1d6; border-radius: 14px; background: #faf8f3; padding: 15px 17px; margin-top: 14px; } .prof-echange__note { font-size: 12px; color: #6f6a5e; line-height: 1.5; margin: 0 0 11px; } .prof-echange__form { display: flex; gap: 9px; align-items: center; } .prof-echange__form .prof-input { flex: 1; } /* Transparent plans page — 4-tier comparison. */ .plan-note { display: flex; gap: 11px; align-items: flex-start; border: 1.5px solid #cfe0d9; background: #f4f8f6; border-radius: 12px; padding: 13px 16px; margin-bottom: 18px; font-size: 12.5px; line-height: 1.55; color: #2f5f52; } .plan-note strong { color: #245043; } .plan-note__icon { width: 26px; height: 26px; flex: none; border-radius: 8px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 14px; } /* Shared CTA control (matrix footer + mobile cards). button_to wraps a form; display:contents lets the button sit directly in the grid cell / card. */ .pmx form.button_to, .plan-cards form.button_to { display: contents; } .plan-cta { display: inline-block; text-align: center; font: 600 11.5px "Hanken Grotesk"; padding: 8px 15px; border-radius: 9px; border: 1.5px solid transparent; cursor: pointer; } .plan-cta--block { display: block; width: 100%; padding: 12px; font-size: 12.5px; border-radius: 11px; } .plan-cta--go { background: #2f6d5b; color: #fff; border: none; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .plan-cta--go:hover { background: #28604f; text-decoration: none; } .plan-cta--ghost { border-color: #e6e1d6; color: #26221b; background: #fff; } .plan-cta--ghost:hover { border-color: #cfe0d9; text-decoration: none; } .plan-cta--current { background: #faf8f3; border-color: #e6e1d6; color: #9a9384; cursor: default; } .plan-cta--muted { background: #fff; border-color: #e6e1d6; color: #c2bbac; cursor: default; } /* Desktop comparison matrix. */ .pmx { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; box-shadow: 0 2px 6px rgba(50,42,28,.04); } /* One label column plus one per tier. --pmx-tiers is set inline from @tiers.size: this was hardcoded to 4 tiers from v1 (free/pro/pro_plus/custom), so when v2 dropped to 3 the grid stayed 5 wide and every row rendered one cell out of step — labels drifted into the rightmost column. */ .pmx__grid { display: grid; grid-template-columns: 1.6fr repeat(var(--pmx-tiers, 3), 1fr); } .pmx__corner { background: #f7f4ee; border-bottom: 1.5px solid #ece8df; } .pmx__col { padding: 14px 10px; text-align: center; background: #f7f4ee; border-bottom: 1.5px solid #ece8df; } .pmx__col.is-rec { background: #f4f8f6; box-shadow: inset 0 0 0 1.5px #cfe0d9; } .pmx__col.is-current { background: #eef3f1; box-shadow: inset 0 0 0 1.5px #2f6d5b; } .pmx__pname { font-family: "Newsreader", serif; font-size: 15px; font-weight: 600; } .pmx__tag { display: inline-flex; align-items: center; gap: 3px; margin-top: 6px; font: 700 9.5px "Hanken Grotesk"; letter-spacing: .5px; text-transform: uppercase; padding: 4px 10px; border-radius: 999px; background: #f1ede4; color: #9a9384; } .pmx__tag--rec { background: #2f6d5b; color: #fff; } .pmx__tag--cur { background: #dcebe5; color: #2f6d5b; box-shadow: inset 0 0 0 1.5px #2f6d5b; } .pmx__tag--cur::before { content: "✓"; font-size: 9px; font-weight: 800; } .pmx__price { font-size: 11.5px; color: #9a9384; margin-top: 4px; } .pmx__trial { font: 600 9.5px "Hanken Grotesk"; color: #2f6d5b; margin-top: 4px; } .pmx__label { padding: 11px 16px; display: flex; flex-direction: column; justify-content: center; gap: 2px; border-bottom: 1.5px solid #f3f0e8; } .pmx__name { font-size: 12.5px; color: #3a352c; } /* The row's own explanation, in the same register the marketing comparison uses. No width cap: the label is a fixed grid track, so it wraps to the column it belongs to. */ .pmx__hint { font-size: 11px; line-height: 1.45; color: #9a9384; } .pmx__cell { padding: 11px 10px; display: flex; align-items: center; justify-content: center; text-align: center; border-bottom: 1.5px solid #f3f0e8; } .pmx__cell.is-rec { background: #f9fbfa; } .pmx__cell--cta { border-bottom: none; background: #faf8f3; padding: 14px 10px; } .pmx__cell--cta.is-rec { background: #f4f8f6; } .pmx__yes { width: 20px; height: 20px; border-radius: 6px; background: #eef4f1; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; } .pmx__no { width: 20px; height: 20px; border-radius: 6px; background: #f1ede4; color: #c2bbac; display: flex; align-items: center; justify-content: center; font-size: 11px; } .pmx__txt { font-size: 12px; font-weight: 600; color: #3a352c; white-space: pre-line; line-height: 1.5; } .pmx__txt--dim { color: #c2bbac; } .pmx__cell.is-rec .pmx__txt { color: #245043; } /* Mobile stacked plan cards. */ .plan-cards { display: none; flex-direction: column; gap: 12px; } .plan-card2 { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; padding: 16px; } .plan-card2--rec { border: 2px solid #2f6d5b; box-shadow: 0 10px 30px rgba(47,109,91,.13); } .plan-card2--current { box-shadow: inset 0 0 0 1.5px #2f6d5b; } .plan-card2__head { display: flex; align-items: center; gap: 8px; margin-bottom: 3px; } .plan-card2__name { font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; } .plan-card2__price { margin-left: auto; font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; } .plan-card2__tagline { font-size: 11.5px; color: #9a9384; margin-bottom: 12px; } .plan-card2__feats { display: flex; flex-direction: column; gap: 7px; margin-bottom: 14px; } .plan-card2__feat { display: flex; gap: 9px; align-items: flex-start; } .plan-card2__ic { width: 18px; height: 18px; flex: none; border-radius: 5px; display: flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; margin-top: 1px; } .plan-card2__ic.is-yes { background: #eef4f1; color: #2f6d5b; } .plan-card2__ic.is-hero { background: #dcebe5; color: #2f6d5b; } .plan-card2__ic.is-no { background: #f1ede4; color: #c2bbac; } .plan-card2__ft { font-size: 12px; line-height: 1.4; color: #3a352c; } .plan-card2__ft.is-dim { color: #9a9384; } .plan-foot { font-size: 11.5px; color: #9a9384; line-height: 1.6; margin-top: 16px; } /* Matrix → stacked cards on narrow screens. */ @media (max-width: 720px) { .pmx { display: none; } .plan-cards { display: flex; } /* The 150px label column plus a flex:1 field leaves ~180px for the control on a phone, which squeezes selects, segmented controls and the reading preview into a sliver. Stack label over field instead. */ .prof-row, .prof-row--center { flex-direction: column; align-items: stretch; gap: 10px; } .prof-row__lbl { width: auto; padding-top: 0; } .prof-seg { flex-wrap: wrap; } .prof-seg__opt { flex: 1 1 auto; justify-content: center; } } /* Usage page — web/thinking meters + by-routine (three states). */ .use-muted { color: #9a9384; font-weight: 400; } .use-card { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; padding: 20px 22px; margin-bottom: 12px; box-shadow: 0 2px 6px rgba(50,42,28,.04); } .use-card--flush { padding: 0; overflow: hidden; } .use-trial { display: flex; align-items: center; gap: 13px; border: 1.5px solid #cfe0d9; border-radius: 16px; background: linear-gradient(#f4f8f6, #eef4f1); padding: 16px 19px; margin-bottom: 14px; } .use-trial__icon { width: 40px; height: 40px; flex: none; border-radius: 12px; background: #2f6d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 18px; } .use-trial__text { flex: 1; min-width: 0; } .use-trial__title { font-weight: 700; font-size: 13.5px; color: #245043; } .use-trial__sub { font-size: 12px; color: #2f5f52; } .use-trial__btn { flex: none; padding: 10px 17px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .use-trial__btn:hover { background: #28604f; text-decoration: none; } .use-meter__head { display: flex; align-items: center; gap: 9px; margin-bottom: 12px; } .use-meter__icon { width: 26px; height: 26px; flex: none; border-radius: 8px; display: flex; align-items: center; justify-content: center; font-size: 14px; } .use-meter__icon--web { background: #dcebe5; } .use-meter__icon--think { background: #f1ede4; } .use-meter__label { font-weight: 600; font-size: 14px; flex: 1; } .use-meter__count { font-size: 13px; color: #9a9384; } .use-meter__used { font-family: "Newsreader", serif; font-size: 22px; font-weight: 500; } .use-bar { height: 11px; border-radius: 999px; background: #f0ece3; overflow: hidden; margin-bottom: 11px; } .use-bar__fill { height: 100%; border-radius: 999px; } .use-meter__foot { display: flex; align-items: center; justify-content: space-between; font-size: 12.5px; color: #6f6a5e; } /* Thinking runs are a second meter now, not a one-line card, so .use-thinking is gone and both bars share the .use-meter rules above. What the card used to carry that the bar does not is the sentence naming which routines it counts. */ .use-meter__note { margin-top: 9px; font-size: 11.5px; line-height: 1.5; color: #9a9384; } .use-warn { display: flex; align-items: center; gap: 11px; border: 1.5px solid #f0e6d6; background: #faf6ef; border-radius: 14px; padding: 13px 16px; margin-bottom: 12px; } .use-warn__icon { color: #a4712f; flex: none; font-size: 15px; } .use-warn__text { flex: 1; font-size: 12px; line-height: 1.5; color: #8a6420; } .use-warn__link { font: 600 11.5px "Hanken Grotesk"; color: #a4712f; flex: none; } .use-freeweb { display: flex; gap: 15px; align-items: flex-start; } .use-freeweb .use-meter__icon { width: 42px; height: 42px; font-size: 20px; color: #2f6d5b; background: #eef4f1; } .use-freeweb__text { flex: 1; } .use-freeweb__title { font-family: "Newsreader", serif; font-size: 18px; font-weight: 500; margin-bottom: 4px; } .use-freeweb__sub { font-size: 12.5px; line-height: 1.55; color: #6f6a5e; margin-bottom: 12px; } .use-freeweb__btn { display: inline-block; padding: 10px 16px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .use-freeweb__btn:hover { background: #28604f; text-decoration: none; } .use-divider { display: flex; align-items: baseline; gap: 9px; margin: 22px 0 12px; } .use-divider span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .use-divider__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .use-row { display: flex; align-items: center; gap: 12px; padding: 13px 18px; border-bottom: 1.5px solid #f3f0e8; } .use-row--last { border-bottom: none; } .use-row__emoji { font-size: 15px; flex: none; width: 22px; text-align: center; } .use-row__main { flex: 1; min-width: 0; } .use-row__head { display: flex; align-items: center; gap: 7px; margin-bottom: 6px; } .use-row__name { font-weight: 600; font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .use-tag { font: 600 9px "Hanken Grotesk"; letter-spacing: .3px; padding: 2px 7px; border-radius: 999px; flex: none; } .use-tag--web { background: #dcebe5; color: #2f6d5b; } .use-tag--think { background: #f1ede4; color: #9a9384; } .use-row__bar { height: 6px; border-radius: 999px; background: #f0ece3; overflow: hidden; max-width: 420px; } .use-row__fill { height: 100%; border-radius: 999px; } .use-row__count { flex: none; font-size: 13px; font-weight: 600; color: #26221b; width: 34px; text-align: right; } .use-empty { padding: 22px; text-align: center; color: #9a9384; font-size: 12.5px; border: 1.5px solid #f0ece3; border-radius: 16px; } .use-foot { font-size: 11.5px; color: #9a9384; margin-top: 16px; line-height: 1.55; } /* Sits tight under the breakdown it is explaining, not down with the footnote. */ .use-note { font-size: 11.5px; color: #9a9384; margin-top: 9px; line-height: 1.55; } /* Plan page — current-plan card, upsell banner, compare head, upgrade modal. */ .plan-current { border: 1.5px solid #e6e1d6; border-radius: 16px; background: #fff; overflow: hidden; margin-bottom: 26px; box-shadow: 0 2px 6px rgba(50,42,28,.04); } .plan-current__head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; } .plan-current__badge-icon { width: 44px; height: 44px; flex: none; border-radius: 12px; background: #f1ede4; color: #6f6a5e; display: flex; align-items: center; justify-content: center; font: 700 15px "Hanken Grotesk"; } .plan-current__id { flex: 1; min-width: 0; } .plan-current__name { font-family: "Newsreader", serif; font-size: 19px; font-weight: 500; display: flex; align-items: center; gap: 8px; } .plan-current__tag { font: 600 10px "Hanken Grotesk"; padding: 3px 9px; border-radius: 999px; background: #e8efe8; color: #2f6d5b; } .plan-current__desc { font-size: 12.5px; color: #9a9384; margin-top: 2px; } .plan-current__price { text-align: right; flex: none; } .plan-current__amount { font-family: "Newsreader", serif; font-size: 26px; font-weight: 500; line-height: 1; } .plan-current__per { display: block; font-size: 10.5px; color: #9a9384; } .plan-current__meter { padding: 0 20px 18px; } /* One row per allowance. Gap rather than a margin on the row, so the last one sits flush against the shared reset line below instead of pushing it away. */ .plan-current__meter { display: flex; flex-direction: column; gap: 12px; } .plan-current__meterrow { display: flex; flex-direction: column; } .plan-current__meterhead { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 7px; font-size: 12px; color: #6f6a5e; } .plan-current__resets { font-size: 11.5px; color: #9a9384; } /* Subscription management (Stripe portal) + the billing-trouble escape hatch. */ /* A footer bar on the card, like the reply box's. It had vertical padding only, so it sat flush against the card's left edge while every other section was inset by 20px — the button visibly hung outside the content column. The margin-top on top of the meter's own bottom padding also left a dead gap. */ .plan-current__manage { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; padding: 13px 20px; border-top: 1.5px solid #ece8df; background: #faf8f3; } .plan-current__managenote { flex: 1 1 220px; font-size: 11.5px; line-height: 1.5; color: #9a9384; } .plan-help { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; margin: -14px 0 26px; font-size: 12.5px; color: #6f6a5e; } .plan-help__form { display: inline; } .plan-help__link { border: none; background: none; padding: 0; font: inherit; color: #2f6d5b; text-decoration: underline; cursor: pointer; } .plan-help__link:hover { color: #28604f; } .plan-upsell { display: flex; align-items: center; gap: 14px; border: 1.5px solid #cfe0d9; background: #f4f8f6; border-radius: 16px; padding: 18px 20px; margin-bottom: 26px; } .plan-upsell__icon { width: 42px; height: 42px; flex: none; border-radius: 12px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 20px; } .plan-upsell__text { flex: 1; min-width: 0; } .plan-upsell__title { font-weight: 700; font-size: 14px; color: #245043; margin-bottom: 2px; } .plan-upsell__sub { font-size: 12.5px; line-height: 1.5; color: #2f5f52; } .plan-upsell__btn { flex: none; padding: 11px 18px; border-radius: 11px; background: #2f6d5b; color: #fff; font: 600 13px "Hanken Grotesk"; box-shadow: 0 3px 10px rgba(47,109,91,.25); } .plan-upsell__btn:hover { background: #28604f; text-decoration: none; } .plan-compare-head { display: flex; align-items: baseline; gap: 9px; margin-bottom: 13px; } .plan-compare-head span:first-child { font: 700 10px "Hanken Grotesk"; letter-spacing: .6px; color: #9a9384; } .plan-compare-head__rule { flex: 1; height: 1.5px; background: #e2ddd0; } .plan-compare-head__note { font-size: 11px; color: #9a9384; } /* upgrade modal via :target */ .plan-modal { display: none; position: fixed; inset: 0; z-index: 60; align-items: center; justify-content: center; padding: 30px; } .plan-modal:target { display: flex; } .plan-modal__scrim { position: absolute; inset: 0; background: rgba(38,34,27,.4); } .plan-modal__card { position: relative; width: 430px; max-width: 100%; background: #fff; border-radius: 20px; overflow: hidden; box-shadow: 0 30px 70px rgba(50,42,28,.3); } .plan-modal__hero { position: relative; padding: 26px 26px 22px; background: linear-gradient(#f4f8f6, #eef4f1); } .plan-modal__close { position: absolute; top: 16px; right: 16px; width: 30px; height: 30px; border-radius: 8px; display: flex; align-items: center; justify-content: center; color: #9a9384; } .plan-modal__close:hover { background: rgba(0,0,0,.05); text-decoration: none; } .plan-modal__icon { width: 46px; height: 46px; border-radius: 13px; background: #2f6d5b; color: #fff; display: flex; align-items: center; justify-content: center; font-size: 22px; margin-bottom: 14px; } .plan-modal__title { font-family: "Newsreader", serif; font-size: 23px; font-weight: 500; line-height: 1.15; margin-bottom: 6px; } .plan-modal__sub { font-size: 13.5px; line-height: 1.6; color: #5c6b62; } .plan-modal__body { padding: 20px 26px 24px; } .plan-modal__perks { display: flex; flex-direction: column; gap: 10px; margin-bottom: 20px; } .plan-modal__perk { display: flex; gap: 11px; align-items: flex-start; font-size: 13px; line-height: 1.5; color: #3a352c; } .plan-modal__check { width: 20px; height: 20px; flex: none; border-radius: 6px; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font-size: 12px; margin-top: 1px; } .plan-modal__cta { width: 100%; padding: 14px; border: none; border-radius: 12px; background: #2f6d5b; color: #fff; font: 600 14px "Hanken Grotesk"; cursor: pointer; box-shadow: 0 3px 10px rgba(47,109,91,.25); margin-bottom: 9px; } .plan-modal__cta:hover { background: #28604f; } .plan-modal__fine { text-align: center; font-size: 11px; color: #9a9384; } /* ── Settings inner sidebar (shared/_settings_nav) ───────────────── Design: Settings - Connections.dc.html. A sibling of .app-main inside .app-shell, so it holds still while the page scrolls. */ .snav { width: 260px; flex: none; z-index: 11; background: #faf8f2; border-right: 1.5px solid #ece8df; display: flex; flex-direction: column; } .snav__head { height: 56px; flex: none; display: flex; align-items: center; gap: 8px; padding: 0 10px 0 16px; border-bottom: 1.5px solid #ece8df; } .snav__collapse { width: 30px; height: 30px; flex: none; margin-left: auto; border: none; background: none; border-radius: 8px; cursor: pointer; display: flex; align-items: center; justify-content: center; color: #9a9384; } .snav__collapse:hover { background: #efece4; color: #6f6a5e; } .snav__collapse svg { width: 17px; height: 17px; } /* ── Collapsed ────────────────────────────────────────────────────── The column is hidden and the top bar grows a way back. Both controls are present in the DOM at all times; which one is reachable is the only thing that changes, so neither needs JS to exist. */ .app-shell--snav-collapsed .snav { display: none; } .app-topbar__reopen { width: 30px; height: 30px; flex: none; margin-right: 2px; border: none; background: none; border-radius: 8px; cursor: pointer; display: none; align-items: center; justify-content: center; color: #9a9384; } .app-topbar__reopen:hover { background: #efece4; color: #6f6a5e; } .app-topbar__reopen svg { width: 17px; height: 17px; } .app-shell--snav-collapsed .app-topbar__reopen { display: flex; } .snav__title { position: relative; top: .15em; font-family: 'Newsreader', Georgia, serif; font-weight: 600; font-size: 16px; color: #26221b; } .snav__list { flex: 1; overflow: auto; padding: 12px 12px 16px; display: flex; flex-direction: column; gap: 8px; } .snav__row { display: flex; align-items: center; gap: 10px; padding: 11px 12px; border-radius: 12px; background: #fff; border: 1.5px solid #e6ded1; text-decoration: none; transition: border-color .12s, background .12s; } .snav__row:hover { border-color: #cfe0d9; text-decoration: none; } .snav__row.is-active { background: #f7fbf9; border-color: #a9cabd; } .snav__label { flex: 1; min-width: 0; font-size: 14px; font-weight: 600; color: #26221b; } .snav__meta { font-size: 12px; color: #8f8877; } .snav__meta--num { font-variant-numeric: tabular-nums; } .snav__meta--alert { color: #8a6b33; } .snav__dot { width: 7px; height: 7px; flex: none; border-radius: 50%; background: #c9a24a; } /* The design hides this column below 880px, but it is a desktop mock — hiding it in the product would strand Plan & billing, because the flyout that used to carry it is identity-only now and the spine (with its gear) is itself gone at 720px. So it narrows first, then becomes a scrolling strip. */ @media (max-width: 880px) { .snav { width: 196px; } .snav__list { padding: 10px 9px 14px; } .snav__row { padding: 10px; } .snav__label { font-size: 13px; } } /* At this width .app-shell is already `flex-direction: column` and the spine is hidden (app_shell.css), so the rows lie down under the mobile top bar. */ @media (max-width: 720px) { .snav { width: 100%; order: 1; border-right: none; border-bottom: 1.5px solid #ece8df; } .snav__head { display: none; } .snav__list { flex-direction: row; overflow-x: auto; overflow-y: hidden; padding: 10px 14px; gap: 7px; scrollbar-width: none; } .snav__list::-webkit-scrollbar { display: none; } .snav__row { flex: none; padding: 8px 13px; border-radius: 999px; } .snav__label { white-space: nowrap; } .app-main { order: 2; } } /* ── Close account (design: Profile Settings.dc.html) ─────────────────────── A quiet disclosure at the foot of the page, not a permanently-open DANGER ZONE card. Deleting an account is sought out; it does not need to be in front of someone who came here to change their display name. */ .dclose { border-top: 1.5px solid #e2ddd0; margin-top: 30px; padding-top: 14px; } .dclose__summary { display: inline-flex; align-items: center; gap: 7px; padding: 4px 0; font: 500 13px "Hanken Grotesk"; color: #9a9384; cursor: pointer; list-style: none; } /* Both spellings: WebKit still wants the pseudo-element, the rest take the `list-style` above. Without them a stock triangle sits beside the caret. */ .dclose__summary::-webkit-details-marker { display: none; } .dclose__summary::marker { content: ""; } .dclose__summary:hover { color: #6f6a5e; } .dclose__caret { flex: none; transition: transform .18s ease; } .dclose[open] .dclose__caret { transform: rotate(90deg); } .dclose__card { margin-top: 14px; padding: 22px 24px; border: 1.5px solid var(--danger-border); border-radius: 16px; background: #fff; box-shadow: 0 2px 6px rgba(50, 42, 28, .04); } .dclose__title { font: 600 19px 'Newsreader', serif; color: #26221b; margin: 0 0 8px; } .dclose__lead { margin: 0 0 22px; font-size: 14px; line-height: 1.6; color: #6f6a5e; text-wrap: pretty; max-width: 560px; } /* Three numbered stages. An
    because they are a sequence and the order is the content: two things you can do first, then the one that ends it. */ .dclose__stages { list-style: none; margin: 0; padding: 0; } .dclose__stage { display: grid; grid-template-columns: 26px 1fr; gap: 14px; padding: 22px 0; border-bottom: 1.5px solid #f3f0e8; } .dclose__stage:first-child { padding-top: 0; } .dclose__stage:last-child { padding-bottom: 0; border-bottom: 0; } .dclose__num { width: 26px; height: 26px; border-radius: 50%; border: 1.5px solid #e6e1d6; background: #f7f5ef; color: #6f6a5e; font: 600 13px "Hanken Grotesk"; display: flex; align-items: center; justify-content: center; } /* The two stages that are not neutral: one is a way out of leaving, one is the end of it. */ .dclose__num--talk { border-color: #cfe0d9; background: #eef4f1; color: #2f6d5b; } .dclose__num--danger { border-color: #e2c0b2; background: #fdf1ec; color: #b0553a; } .dclose__stage-body { min-width: 0; } .dclose__stage-title { font-size: 15px; font-weight: 600; color: #26221b; margin: 0 0 3px; } .dclose__stage-lead { margin: 0 0 13px; font-size: 13.5px; line-height: 1.6; color: #6f6a5e; text-wrap: pretty; max-width: 520px; } .dclose__stage-lead--dark { color: #4a453b; margin-bottom: 6px; } .dclose__stage-lead a { color: #9a9384; text-decoration: underline; } .dclose__stage-lead--dark a { color: #b45b3e; } /* Step 1: the form that can end this without an account being deleted. */ .dclose__talk { display: flex; flex-direction: column; align-items: flex-start; gap: 9px; max-width: 340px; } .dclose__field { width: 100%; } .dclose__talk textarea.dclose__field { min-height: 74px; } /* Step 2: two things that stop being possible once the row is destroyed. Actions, not advice — each row carries the control that performs it. */ .dclose__tasks { display: flex; flex-direction: column; gap: 10px; } .dclose__task { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 13px 15px; border: 1.5px solid #e6e1d6; border-radius: 12px; background: #faf8f3; } .dclose__task-main { flex: 1; min-width: 200px; } .dclose__task-title { font-size: 14px; font-weight: 600; color: #26221b; margin-bottom: 2px; } .dclose__task-hint { font-size: 13px; line-height: 1.55; color: #9a9384; } /* The billing row is the one with a consequence attached, so it carries the danger palette rather than a second paragraph explaining itself. */ .dclose__task--warn { border-color: var(--danger-border); background: #fdf6f2; } .dclose__task--warn .dclose__task-hint { color: #8f6a5c; } .dclose__task-btn { flex: none; white-space: nowrap; font: 600 13px "Hanken Grotesk"; padding: 9px 15px; border-radius: 10px; border: 1.5px solid #d9b8a8; background: #fff; color: #8f3f28; } .dclose__task-btn:hover { background: #fdf1ec; text-decoration: none; } /* Step 3: the gate and the act it gates, on one line where there is room. */ .dclose__confirm { display: block; font-size: 13px; color: #6f6a5e; margin: 16px 0 8px; } .dclose__confirm .mono { font-family: var(--font-mono); font-size: 13px; color: #b0553a; } .dclose__final-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; } .dclose__input { width: 250px; flex: none; border-color: #e6cfc5; } .dclose__input:focus { border-color: #d98a6f; } .dclose__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; } @media (max-width: 720px) { .dclose__input { width: 100%; } .dclose__actions { width: 100%; } .dclose__actions .btn { flex: 1 1 auto; justify-content: center; } .dclose__stage { grid-template-columns: 22px 1fr; gap: 11px; } .dclose__num { width: 22px; height: 22px; font-size: 12px; } } .dclose__foot { margin-top: 16px; padding-top: 14px; border-top: 1.5px solid #f3f0e8; font-size: 12.5px; color: #a49d8d; } /* Global app navigation shell (shared/_app_shell + layouts/app). Design: Delivery.dc.html — Option B (permanent icon spine + flyouts). At <=720px the spine gives way to a top bar + slide-in drawer instead (see the mobile nav block near the end of this file). */ /* dvh, not vh: on mobile browsers 100vh is the LARGE viewport (URL bar retracted), so with the bar showing the shell is taller than the visible area. The page then scrolls by the height of the browser chrome even when the content fits, carrying .mobile-topbar off the top. dvh tracks the viewport as the bar shows and hides. vh first as the fallback. */ .app-shell { display: flex; height: 100vh; height: 100dvh; width: 100%; overflow: hidden; background: #efece4; } /* ── Icon spine (always present) ─────────────────────────────── */ .spine { width: 62px; flex: none; z-index: 12; border-right: 1.5px solid #ece8df; background: #f4f1ea; display: flex; flex-direction: column; align-items: center; padding: 12px 0; gap: 5px; } .spine__mark { width: 32px; height: 32px; border-radius: 9px; flex: none; margin-bottom: 6px; overflow: hidden; cursor: pointer; border: none; box-shadow: 0 2px 7px rgba(47, 109, 91, .28); } .spine__mark img { width: 100%; height: 100%; display: block; object-fit: cover; } .spine__btn { width: 40px; height: 40px; border-radius: 11px; border: none; background: none; display: flex; align-items: center; justify-content: center; color: #6f6a5e; cursor: pointer; transition: background .12s, color .12s; } .spine__btn:hover { background: #ece7dd; } .spine__btn.is-active { background: #eef3f1; color: #2f6d5b; } .spine__btn--muted { color: #9a9384; } .spine__divider { width: 26px; height: 1.5px; background: #e0dacd; margin: 2px 0; } .spine__spacer { flex: 1; } .spine__new { width: 40px; height: 40px; border-radius: 11px; border: none; display: flex; align-items: center; justify-content: center; background: #2f6d5b; color: #fff; cursor: pointer; box-shadow: 0 3px 9px rgba(47, 109, 91, .28); transition: background .12s; } .spine__new:hover { background: #28604f; } .spine__avatar { width: 32px; height: 32px; flex: none; border-radius: 50%; border: none; margin-top: 6px; cursor: pointer; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px 'Hanken Grotesk', system-ui, sans-serif; } /* ── Main content area ───────────────────────────────────────── */ /* contain: stop a gesture that reaches the end of this scroller from chaining out to the document and dragging the shell (and the top bar) with it. */ .app-main { flex: 1; min-width: 0; overflow: auto; overscroll-behavior-y: contain; background: #efece4; } /* Sticky per-page top bar (design: Delivery.dc.html main top bar). */ .app-topbar { position: sticky; top: 0; z-index: 5; height: 56px; flex: none; display: flex; align-items: center; gap: 10px; padding: 0 22px; border-bottom: 1.5px solid #e6e1d6; background: rgba(245, 242, 236, .86); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); } .app-topbar__title { font-family: 'Newsreader', serif; font-size: 17px; font-weight: 600; color: #26221b; } /* Optical centring for every serif title that sits in a bar — this bar, the mobile one, the reader's two. Newsreader's ascent is shallow and its descent deep, so centring the line BOX leaves the cap band ~0.15em above the bar's middle with the unused descender space sitting below it. That reads as a title pinned to the top of the bar, and it is the same amount wrong everywhere because it comes from the font's metrics, not the bar's height. `top` moves the glyphs without touching layout, and an em keeps it correct at both sizes in use (17px chrome titles, 13.5px in .reader-topbar). Line-height cannot fix this: leading is symmetric about the baseline, so it moves the box and the glyphs together. */ .app-topbar__title, .mobile-topbar__title, .mtop-ctx__name, .reader-topbar__name { /* defined in reader.css; same correction, same reason */ position: relative; top: 0.15em; } .app-topbar__spacer { flex: 1; } .app-topbar__actions { display: flex; align-items: center; gap: 8px; } /* A page under the top bar starts at the top, not vertically centered. */ .app-topbar + .joris-page { justify-content: flex-start; } /* Page hero — eyebrow + serif title + subtitle (Home/History/Routines). */ .page-hero__eyebrow { font-size: 12.5px; color: #9a9384; margin-bottom: 5px; } .page-hero__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 30px; margin: 0 0 4px; color: #26221b; } .page-hero__sub { font-size: 13.5px; color: #6f6a5e; margin: 0 0 22px; } .page-hero__sub strong { color: #3a352c; font-weight: 600; } /* ── Flyouts (nav + account) ─────────────────────────────────── */ .flyout { position: fixed; inset: 0; z-index: 30; background: rgba(38, 34, 27, .12); display: none; } .flyout.is-open { display: block; } .acctflyout { position: absolute; left: 70px; bottom: 14px; width: 250px; background: #fff; border: 1.5px solid #e6e1d6; border-radius: 14px; box-shadow: 0 20px 50px rgba(50, 42, 28, .18); padding: 7px; } /* No bottom rule of its own. It had one when seven settings rows sat between it and .acctflyout__sep; with those gone the two lines land a few pixels apart and read as a double separator. The sep is the one that means something — "below here is not a setting" — so it is the one that stays. */ .acctflyout__head { display: flex; align-items: center; gap: 9px; padding: 8px 9px 10px; } .acctflyout__head--link { border-radius: 10px; } .acctflyout__head--link:hover { background: #f4f1ea; text-decoration: none; } .acctflyout__row { display: flex; align-items: center; gap: 11px; padding: 9px 10px; border-radius: 9px; color: #26221b; font: 600 12.5px 'Hanken Grotesk', system-ui, sans-serif; cursor: pointer; text-decoration: none; width: 100%; border: none; background: none; text-align: left; } .acctflyout__row:hover { background: #f4f1ea; text-decoration: none; } .acctflyout__row .meta { margin-left: auto; font-size: 10.5px; color: #9a9384; font-weight: 600; } .acctflyout__row--danger { color: #b45b3e; } /* Separates the two ways OUT of the app from the settings above them. Matches .moremenu__sep — 1px, inset from the rows' own padding. */ .acctflyout__sep { height: 1px; background: #f0ece3; margin: 5px 9px; } .av { width: 28px; height: 28px; flex: none; border-radius: 50%; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px 'Hanken Grotesk', system-ui, sans-serif; } .av--sm { width: 28px; height: 28px; } .nav-name { font-weight: 600; font-size: 12.5px; color: #26221b; } .nav-sub { font-size: 11px; color: #9a9384; } .nav-ic { width: 18px; height: 18px; flex: none; } /* Icon sprite host */ .nav-sprite { position: absolute; width: 0; height: 0; } /* Impersonation banner — shown app-wide while an admin is "viewing as" a user. z-index 11 puts it over .app-topbar (5), which shares its top: 0, but UNDER the mobile bar (12) and both drawers (.flyout, 30). At 40 it outranked everything: on a phone it painted across the open nav drawer, hiding whatever row sat behind it, and the drawer is the one place you can't dismiss it from. */ .imp-banner { position: sticky; top: 0; z-index: 11; display: flex; align-items: center; gap: 10px; padding: 9px 18px; background: #b45b3e; color: #fff; font: 600 12.5px "Hanken Grotesk"; box-shadow: 0 2px 8px rgba(50,42,28,.18); } .imp-banner strong { font-weight: 700; } .imp-banner__eye { font-size: 14px; } .imp-banner__msg { min-width: 0; } .imp-banner__spacer { flex: 1; } .imp-banner__stop { font: 600 11.5px "Hanken Grotesk"; padding: 6px 13px; border-radius: 8px; border: 1.5px solid rgba(255,255,255,.6); background: rgba(255,255,255,.14); color: #fff; cursor: pointer; } .imp-banner__stop:hover { background: rgba(255,255,255,.26); } /* ── Mobile top bar + nav drawer (<=720px) ─────────────────────── Replaces the icon spine: a hamburger opens .mobilenav as a slide-in drawer (reusing the .flyout backdrop/open mechanics used by the account flyout below), and the same avatar button reopens that existing flyout — repositioned for a top-anchored trigger instead of the spine's. */ .mobile-topbar { display: none; } .mobilenav { display: none; } @media (max-width: 720px) { .app-shell { flex-direction: column; } .spine { display: none; } /* Let the DOCUMENT scroll on phones rather than an inner pane. Android Chrome only retracts its URL bar for document scrolls, so with the shell pinned to the dynamic viewport and .app-main scrolling inside it, the visible area never grows and the last stretch of a long page sits under the browser's chrome — unreachable. Intermittently so, which is the tell: dvh re-measures whenever the bar does happen to move, so how much you can reach depends on what the bar was doing when the shell was last laid out. The admin shell already carries this fix for the same reason. Making the bar sticky keeps the guarantee the dvh comment at the top of this file was protecting — it stays put without the shell having to pin the viewport. */ .app-shell { height: auto; min-height: 100vh; min-height: 100dvh; overflow: visible; } .app-main { overflow: visible; } .mobile-topbar { position: sticky; top: 0; } /* Both drawers are fixed over a scrim, and the shell used to be unscrollable underneath them. Now that the document scrolls, a drag on the scrim would move the page behind the drawer — so hold it still while one is open. */ html:has(.reader-shell--versions-open), html:has(.flyout.is-open) { overflow: hidden; } .mobile-topbar { display: flex; align-items: center; gap: 10px; height: 52px; flex: none; padding: 0 14px; border-bottom: 1.5px solid #ece8df; background: #f4f1ea; z-index: 12; } .mobile-topbar__menu { width: 34px; height: 34px; flex: none; border: none; background: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #26221b; cursor: pointer; } .mobile-topbar__menu:hover { background: #ece7dd; } /* The page title and actions live here on mobile — .app-topbar is hidden at this width, so this is the only bar. */ .mobile-topbar__title { font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; color: #26221b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobile-topbar__actions { display: flex; align-items: center; gap: 8px; flex: none; } .mobile-topbar__spacer { flex: 1; } .app-topbar { display: none; } /* The bar and the banner live in different containers but both stick to the top of the same scrolling document, so at top: 0 they landed on each other. 52px is the bar's height: the banner parks directly beneath it. It also has to wrap here — two full email addresses and a button do not fit across a phone, and nowrap pushed "Stop impersonating" off the edge. */ .imp-banner { top: 52px; flex-wrap: wrap; gap: 8px; padding: 8px 14px; font-size: 11.5px; } .imp-banner__spacer { display: none; } .imp-banner__msg { flex: 1 1 auto; } /* button_to wraps the button in a form, so the form is the flex child. */ .imp-banner .button_to { margin-left: auto; } .imp-banner__stop { white-space: nowrap; } /* Reader: routine name + current version, doubling as the runs-drawer trigger, in place of the folded-away .reader-topbar. */ /* `center`, not `baseline`: the version is a chip with its own padding now, so sitting the two on a shared baseline pushed it low against the title. */ /* Not a button any more. The name is a page title and read as one, so making the whole thing the runs-drawer trigger meant the reader's only control was invisible. The chip below is the control; this is just the title beside it. */ .mtop-ctx { display: flex; align-items: center; gap: 7px; min-width: 0; text-align: left; } /* Vertical position comes from the shared optical-centring rule above. */ .mtop-ctx__name { font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; line-height: 20px; color: #26221b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* A chip, not grey text: this opens the runs drawer, and as a bare label beside the title nothing said it could be tapped. */ .mtop-ctx__ver { flex: none; display: inline-flex; align-items: center; gap: 1px; font: 600 11px "Hanken Grotesk"; color: #6f6a5e; background: #ece7dd; border-radius: 7px; padding: 3px 4px 3px 7px; border: none; cursor: pointer; } .mtop-ctx__ver:focus-visible { outline: 2px solid var(--focus-ring); outline-offset: 2px; } .mtop-ctx__caret { width: 13px; height: 13px; flex: none; } .mtop-ctx__ver:active { background: #ded7c8; color: #26221b; } /* Overflow trigger — the page's actions collapse behind this instead of each taking a slot in the bar. */ .mobile-topbar__more { width: 34px; height: 34px; flex: none; border: none; background: none; border-radius: 9px; display: flex; align-items: center; justify-content: center; color: #26221b; cursor: pointer; } .mobile-topbar__more:active { background: #ece7dd; } /* Anchored under the bar's right edge. 58px clears the 52px bar, which is always at the very top — the impersonation banner renders inside .app-main, below the shell, so it never pushes this down. */ .moremenu { position: absolute; right: 10px; top: 58px; width: 246px; max-width: calc(100vw - 20px); background: #fff; border: 1.5px solid #e6e1d6; border-radius: 14px; box-shadow: 0 20px 50px rgba(50, 42, 28, .18); padding: 7px; } .moremenu__row { display: flex; align-items: center; gap: 11px; width: 100%; padding: 12px 11px; border: none; border-radius: 9px; background: none; cursor: pointer; text-align: left; color: #26221b; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; text-decoration: none; } .moremenu__row:active { background: #f4f1ea; } .moremenu__row:hover { text-decoration: none; } .moremenu__row[disabled] { color: #9a9384; cursor: default; } .moremenu__row .nav-ic { flex: none; width: 17px; height: 17px; } .moremenu__row--go { color: #2f6d5b; } .moremenu__meta { margin-left: auto; font: 600 10.5px "Hanken Grotesk"; color: #9a9384; } .moremenu__sep { height: 1px; background: #f0ece3; margin: 5px 9px; } /* button_to wraps its button in a form; the form must not become the flex row. */ .moremenu__form { display: block; } /* Copy confirms in place — the handler only toggles .is-copied, because rewriting the label would delete the row's icon with it. The confirmation REPLACES the label rather than sitting beside it: at 246px the two together wrap onto a second line, and the panel would change height for 1.6s. */ .moremenu__done { display: none; color: #2f6d5b; font-weight: 700; } .moremenu__row.is-copied .moremenu__label { display: none; } .moremenu__row.is-copied .moremenu__done { display: inline; } .mobilenav { display: flex; flex-direction: column; position: absolute; left: 0; top: 0; bottom: 0; width: 82%; max-width: 284px; background: #faf8f3; box-shadow: 6px 0 26px rgba(50,42,28,.22); padding: 14px 12px 18px; } .mobilenav__brand { display: flex; align-items: center; gap: 9px; padding: 4px 8px 16px; color: #26221b; text-decoration: none; font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; } .mobilenav__brand img { border-radius: 8px; box-shadow: 0 2px 7px rgba(47,109,91,.28); } .mobilenav__row { display: flex; align-items: center; gap: 11px; padding: 10px 11px; border-radius: 10px; color: #6f6a5e; text-decoration: none; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; } .mobilenav__row:hover { background: #f1ede4; text-decoration: none; } .mobilenav__row.is-active { background: #eef3f1; color: #2f6d5b; } /* Inset from the rows' own padding, like .moremenu__sep — a rule running the full width of the sheet would read as the end of the menu rather than a break inside it. */ .mobilenav__sep { height: 1.5px; background: #e8e3d9; margin: 7px 11px; } .mobilenav__spacer { flex: 1; } .mobilenav__cta { display: flex; align-items: center; justify-content: center; gap: 8px; padding: 12px; border-radius: 11px; background: #2f6d5b; color: #fff; text-decoration: none; font: 600 13.5px "Hanken Grotesk", system-ui, sans-serif; } /* Sits under the locked CTA on phones, where there is no hover to carry a title attribute. */ .mobilenav__ctanote { margin-top: 7px; font-size: 11.5px; line-height: 1.5; color: #9a9384; padding: 0 2px; } .mobilenav__cta:hover { background: #28604f; text-decoration: none; } /* Account row — the drawer's footer, under the New routine CTA. Carded rather than another __row so it reads as the end of the list instead of a fourth destination, and so the CTA above it stays the one green thing in here. */ .mobilenav__acct { display: flex; align-items: center; gap: 10px; width: 100%; margin-top: 10px; padding: 9px 11px; border: 1.5px solid #ece8df; border-radius: 12px; background: #fff; cursor: pointer; text-align: left; color: #26221b; } .mobilenav__acct:active { background: #f4f1ea; } .mobilenav__acct-text { flex: 1; min-width: 0; } .mobilenav__acct-name { display: block; font: 600 13px "Hanken Grotesk", system-ui, sans-serif; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobilenav__acct-sub { display: block; font: 500 11px "Hanken Grotesk", system-ui, sans-serif; color: #9a9384; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mobilenav__acct-gear { flex: none; width: 17px; height: 17px; color: #9a9384; } /* The account menu's trigger moved from the top bar into the drawer's footer, so it can no longer hang off the top right. It opens in the drawer's own column, directly above the row that opened it — the drawer stays put underneath, because it is the navigation and this is part of it. `bottom` clears the drawer's 18px floor plus the ~51px account row. */ .acctflyout { left: 12px; right: auto; top: auto; bottom: 77px; width: calc(min(82vw, 284px) - 24px); } /* The drawer below is already dimming the page; a second scrim on top of it would darken twice and make the still-open drawer look disabled. */ #acct-flyout { background: none; } /* 9px around a 12.5px label is a ~36px target — fine for a cursor, short for a thumb, and these are now the only way to reach settings on a phone. */ .acctflyout__row { padding: 12px 11px; font-size: 13.5px; } .acctflyout__head { padding: 10px 9px 12px; } } /* ── Navigation progress (navigating.js) ────────────────────────────────── A plain MPA hands off to the browser on click and the old page stays put, fully painted and completely inert, until the new document arrives. This is the only thing between the tap and that moment. Fixed to the viewport and above everything, including a in the top layer — a link inside a modal navigates too, and a bar hidden behind the scrim would be telling nobody. */ .navbar-progress { position: fixed; top: 0; left: 0; z-index: 2147483647; width: 100%; height: 2.5px; transform-origin: 0 50%; background: linear-gradient(90deg, #2f6d5b, #4f9b83); /* scaleX rather than width: it runs on the compositor, so the bar keeps moving while the main thread is busy parsing the response — which is exactly the moment it has a job to do. */ transform: scaleX(0.04); transition: transform 8s cubic-bezier(.05, .7, .1, 1); } /* Never reaches the end. The navigation is what finishes it, by replacing the document — a bar that completes and sits there has told a lie about a page that has not arrived. */ .navbar-progress.is-running { transform: scaleX(0.92); } @media (prefers-reduced-motion: reduce) { /* Still shown — it is information, not decoration — but it arrives at its resting length instead of crawling there. */ .navbar-progress { transition: none; transform: scaleX(0.35); } .navbar-progress.is-running { transform: scaleX(0.35); } } /* The row you pressed, looking pressed. Nav rows are the case that needs it: you tap a pill in the settings strip or a routine in the reader strip and the answer is a page away. */ .is-navigating { opacity: .62; } .snav__row.is-navigating, .rnav__row.is-navigating, .adm-navrow.is-navigating, .mobilenav__row.is-navigating { opacity: 1; background: #eef3f1; border-color: #a9cabd; } /* History — searchable, date-grouped feed of every delivery. Design: Delivery.dc.html isHistory view. */ .hist { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } /* All three controls share one height for a balanced search header. */ .hist-search { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 24px; } .hist-search__field { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 220px; max-width: 360px; height: 44px; padding: 0 14px; border: 1.5px solid #e6e1d6; border-radius: 11px; background: #fff; } .hist-search__field svg { width: 16px; height: 16px; color: #9a9384; flex: none; } .hist-search__field input { flex: 1; min-width: 0; height: 100%; border: none; outline: none; background: transparent; font: 400 13.5px 'Hanken Grotesk', system-ui, sans-serif; color: #26221b; } .hist-search__field input::placeholder { color: #9a9384; } /* The shared select rule in components.css supplies the look — this was the family it was promoted from. Only the width is local. */ .hist-search__filter { max-width: 210px; margin: 0; } /* Search button matches the input height (was btn--sm, too small). */ .hist-search .btn { height: 44px; padding: 0 20px; border-radius: 11px; } .hist-day { font: 700 10.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .6px; color: #a49d8d; text-transform: uppercase; margin: 0 0 10px; } .hist-group { display: flex; flex-direction: column; gap: 8px; margin-bottom: 22px; } .hist-row { display: flex; align-items: center; gap: 11px; padding: 11px 14px; border: 1.5px solid #e6e1d6; border-radius: 11px; background: #fff; cursor: pointer; text-decoration: none; color: inherit; transition: border-color .12s; } .hist-row:hover { border-color: #cfe0d9; text-decoration: none; } .hist-row__dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .hist-row__dot--success { background: #2f6d5b; } .hist-row__dot--failed { background: #b45b3e; } .hist-row__dot--pending { background: #c8a24b; } .hist-row__chip { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 4px 9px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; white-space: nowrap; flex: none; } .hist-row__title { flex: 1; min-width: 0; font-size: 13px; color: #3a352c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .hist-row__meta { font-size: 11.5px; color: #9a9384; white-space: nowrap; flex: none; } .hist-empty { color: #8a8478; font-size: 13.5px; } /* Routines list — overview table (design: Delivery.dc.html isRoutinesView). */ .rt { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .rt-table { border: 1.5px solid #e6e1d6; border-radius: 14px; background: #fff; } .rt-head, .rt-row { display: flex; gap: 12px; align-items: center; padding: 12px 18px; } .rt-head { background: #faf8f3; border-radius: 14px 14px 0 0; font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; letter-spacing: .4px; color: #a49d8d; } .rt-row { border-top: 1.5px solid #f0ece3; } .rt-row:last-child { border-radius: 0 0 14px 14px; } .rt-row:hover { background: #faf8f3; } /* A parked row is quieter, NOT shaded. It was `opacity: .68`, which did two things nobody wanted: opacity below 1 creates a stacking context, trapping an open ⋯ menu inside its own row so later rows painted over it, and it faded the whole subtree so the menu panel went translucent. Replacing it with a background band was worse in a different way — interleaved with white rows it reads as broken zebra striping rather than a status, and on the Paused filter EVERY row is banded, where dimming says nothing at all because there is nothing to be dim against. Shading is relative; text colour is not. The fact is already in the row twice — "You paused it" in NEXT, and a Resume button where an active row has Pause — so this only has to make the row read quieter, not announce anything. */ /* A parked row is greyed out. Neutral grey, not the warm cream the rest of the table is built from — that is the point of the colour rather than an accident of it: a desaturated band against a warm palette reads as "switched off", where the warm #f3efe6 tried earlier just read as an alternate row and looked like broken zebra striping. Its own hover step is required, not decorative: .rt-row:hover and .rt-row.is-paused have equal specificity and this one is declared later, so without it a paused row would silently stop responding to the cursor. */ .rt-row.is-paused { background: #f3f3f3; } .rt-row.is-paused:hover { background: #ebebeb; } .rt-row.is-paused .rt-name, .rt-row.is-paused .rt-run__title { color: #9a9384; } /* Columns (header + rows share these widths) */ .rt-c-routine { flex: 1.6; display: flex; align-items: center; min-width: 0; } .rt-c-routine__text { display: flex; flex-direction: column; gap: 2px; min-width: 0; } /* Last run replaced the schedule and provider columns. The schedule moved under the name (it is a property of the routine, not a peer of "when did it last run"), and the provider chip went entirely — since §2 of product-direction there is one provider and nobody can choose it, so the column printed the same word on every row forever. */ .rt-c-run { width: 232px; flex: none; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rt-c-next { width: 104px; flex: none; display: flex; flex-direction: column; gap: 2px; } .rt-c-act { width: 140px; flex: none; display: flex; align-items: center; justify-content: flex-end; gap: 4px; } .rt-routine-link { min-width: 0; text-decoration: none; color: inherit; } .rt-routine-link:hover .rt-name { text-decoration: underline; } .rt-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 13.5px; color: #26221b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-sub { font-size: 11.5px; color: #9a9384; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- last run ---- Three facts on two lines: did it work, when, and what it produced. The title is the only link in the cell because it is the only one with somewhere to go. */ .rt-run__line { display: flex; align-items: baseline; gap: 7px; min-width: 0; } .rt-run__state { display: inline-flex; align-items: center; gap: 6px; flex: none; font: 600 11.5px 'Hanken Grotesk', system-ui, sans-serif; } .rt-run__dot { width: 6px; height: 6px; border-radius: 50%; flex: none; background: currentColor; } .rt-run__state--success { color: #2f6d5b; } .rt-run__state--pending { color: #8a6b33; } .rt-run__state--failed { color: #b45b3e; } .rt-run__when { font-size: 11.5px; color: #9a9384; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-run__title { font-size: 12.5px; color: #2f6d5b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; } .rt-run__none { font-size: 12.5px; color: #9a9384; } .rt-next__day { font-size: 12.5px; color: #3a352c; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-next__time { font-size: 11.5px; color: #9a9384; } .rt-row.is-paused .rt-next__day { color: #9a9384; } /* ---- row actions ---- Run now and Pause/Resume left the ⋯ menu, because they are what people open this page to do and a menu made the common act cost two clicks. They rest at 55% and come up on row hover, so six rows of buttons do not shout. */ .rt-act__form { margin: 0; display: inline-flex; } .rt-act { font: 600 12px 'Hanken Grotesk', system-ui, sans-serif; padding: 7px 11px; border-radius: 9px; border: none; cursor: pointer; white-space: nowrap; background: #f2efe8; color: #3a352c; } .rt-act:hover { background: #e6e1d6; } .rt-act--resume { background: #e4efe9; color: #2f6d5b; } .rt-act--resume:hover { background: #d7e7df; } .rt-act--icon { width: 30px; padding: 7px 0; text-align: center; font-size: 10px; letter-spacing: 1px; } .rt-c-act { opacity: .55; transition: opacity var(--dur-fast, .12s); } /* :has() on the parent — `.rt-menu[open] { opacity: 1 }` cannot lift an opacity set on its own ancestor, so an open menu would have faded with the row. */ .rt-row:hover .rt-c-act, .rt-c-act:focus-within, .rt-c-act:has(.rt-menu[open]) { opacity: 1; } @media (hover: none) { .rt-c-act { opacity: 1; } } /* Row actions — native
    menu (no JS), escapes the table via overflow. */ .rt-menu { position: relative; } .rt-menu > summary { list-style: none; cursor: pointer; width: 26px; height: 26px; border-radius: 7px; display: flex; align-items: center; justify-content: center; color: #9a9384; font-weight: 700; font-size: 16px; line-height: 1; } .rt-menu > summary::-webkit-details-marker { display: none; } .rt-menu > summary:hover { background: #ece7dd; color: #6f6a5e; } .rt-menu[open] > summary { background: #ece7dd; color: #2f6d5b; } /* Belt and braces, and only that — worth being accurate about. Removing the paused row's opacity is what actually fixed this: a later row's `.rt-c-act` opacity context paints at effective z-index 0, which the panel's z-index 20 already beats. This makes the intent explicit and survives someone giving a row a z-index later. */ .rt-row:has(.rt-menu[open]) { position: relative; z-index: 30; } .rt-menu__panel { position: absolute; right: 0; top: calc(100% + 6px); z-index: 20; width: 172px; background: #fff; border: 1.5px solid #e6e1d6; border-radius: 12px; padding: 6px; box-shadow: 0 16px 40px rgba(50, 42, 28, .16); display: flex; flex-direction: column; gap: 1px; } /* Uniform rows whether link_to () or button_to (