/* Webfonts — jarvis 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). */ /* --------------------------------------------------------------- jarvis — 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); } /* --------------------------------------------------------------- jarvis — 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)); } /* --------------------------------------------------------------- jarvis — 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 (.home, .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; } } /* --------------------------------------------------------------- jarvis — 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; } .jarvis-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); } .jarvis-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); } } .jarvis-rise { animation: riseIn var(--dur-rise) ease both; } /* --------------------------------------------------------------- jarvis — 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; } /* ============ 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); } /* ============ 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); } /* --------------------------------------------------------------- jarvis — 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; } } /* --------------------------------------------------------------- jarvis — 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; } /* 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; } /* 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 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); } .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; } .reader-document p { margin: 0 0 var(--space-3); } .reader-document ul, .reader-document ol { margin: 0 0 var(--space-3); padding-left: 1.4em; } .reader-document li { margin-bottom: 4px; } .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); } .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 > table { position: relative; left: 50%; transform: translateX(-50%); width: max-content; max-width: min(1180px, calc(100vw - 324px)); } } /* Narrow screens: let a wide table scroll instead of crushing every cell. */ @media (max-width: 640px) { .reader-document table { display: block; overflow-x: auto; white-space: nowrap; } } /* ============ 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; } .reader-shell--versions-open .ctx { transform: translateX(0); } .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 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: 720px; margin: 0 0 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; } /* ----------------------------------------------------------------- jarvis — 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; } .hh-pin { font: 600 calc(11px * var(--reading-scale)) var(--font-sans); padding: 6px 11px; border-radius: 9px; border: 1.5px solid #e6e1d6; background: #fff; color: #6f6a5e; cursor: pointer; } .hh-pin.is-on { border-color: #cfe0d9; background: #eef4f1; color: #2f6d5b; } /* Pin never shrinks: the meta text was squeezing it to 60px, wrapping "☆ Pin" onto two lines and turning the pill into a stray blob. */ .hh-pin { flex: none; white-space: nowrap; } @media (max-width: 720px) { /* The pill's white fill and border outweigh everything near them on a phone. The glyph and label carry the state on their own. */ /* Stripping the pill also stripped its padding, so the hit area needs restating — min-height keeps it at 44px at every reading size. */ .hh-pin, .hh-pin.is-on { background: none; border-color: transparent; display: inline-flex; align-items: flex-start; justify-content: flex-end; min-height: 44px; padding: 0 2px 0 14px; } /* Date and time stay together on one line; the rest drops below. The date is unbreakable, so if it can't share the row with the pin the pin wraps under it rather than forcing the date to split — which is what happens with a long weekday and month at the largest reading size. */ /* baseline, not flex-start: the pin carries a 44px tap box, so aligning boxes would sit its label ~12px below the date it sits beside. Aligning text baselines lets the hit area extend without showing. */ .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-pin { margin-left: auto; } } .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; } .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; } .hh-sources-label { font: 700 calc(11px * var(--reading-scale)) var(--font-sans); letter-spacing: .6px; color: #a49d8d; margin: 0 0 12px; 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; } /* --------------------------------------------------------------- jarvis — 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); } } /* --------------------------------------------------------------- jarvis — 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/compare --- */ .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); } .compare-grid .delivery-body { font-size: 13px; } /* --- 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. */ .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); } .prof-card--danger { border-color: var(--danger-border); } .prof-danger-confirm { padding: 18px 20px; border-top: 1.5px solid var(--danger-border); background: var(--danger-tint); } .prof-danger-confirm__title { font-size: 12.5px; font-weight: 600; color: var(--danger-press); margin-bottom: 4px; } .prof-danger-confirm__body { font-size: 12px; color: #6f6a5e; line-height: 1.55; margin-bottom: 13px; } .prof-danger-confirm .mono { font-family: var(--font-mono); font-size: 11.5px; color: var(--danger); } .prof-danger-confirm .prof-input { margin-bottom: 13px; } .prof-danger-confirm__actions { display: flex; gap: 9px; } .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; } .prof-tz { width: 100%; appearance: none; -webkit-appearance: none; border: 1.5px solid #e6e1d6; border-radius: 10px; padding: 10px 34px 10px 13px; font: 500 13px "Hanken Grotesk"; color: #26221b; background: #fff; cursor: pointer; outline: none; } .prof-tz:focus { border-color: #cfe0d9; } .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; } /* Danger-zone row: label grows, the action stays pinned at the row's end (no fixed 150px label column like the label/input rows above it). */ .prof-row--wide .prof-row__lbl { width: auto; flex: 1; } .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; } .prof-foot { font-size: 12px; color: #9a9384; line-height: 1.7; margin-top: 22px; } .prof-foot a { color: #b45b3e; font-weight: 600; } .prof-foot a:hover { text-decoration: underline; } /* 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; font-size: 12.5px; color: #3a352c; display: flex; align-items: center; gap: 6px; border-bottom: 1.5px solid #f3f0e8; } .pmx__q { width: 15px; height: 15px; flex: none; border-radius: 50%; border: 1.5px solid #cbc4b6; color: #9a9384; display: inline-flex; align-items: center; justify-content: center; font: 700 9px "Hanken Grotesk"; cursor: help; } .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; } .use-thinking { display: flex; align-items: center; gap: 12px; padding: 16px 22px; } .use-thinking__text { flex: 1; } .use-thinking__title { font-weight: 600; font-size: 13.5px; } .use-thinking__sub { font-size: 11.5px; color: #9a9384; } .use-thinking__count { font-size: 11.5px; color: #9a9384; } .use-thinking__n { font-family: "Newsreader", serif; font-size: 20px; font-weight: 500; color: #26221b; } .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; } /* 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; } .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; margin-top: 8px; } /* 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; } /* 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; } .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 + .jarvis-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; } .acctflyout__head { display: flex; align-items: center; gap: 9px; padding: 8px 9px 10px; border-bottom: 1.5px solid #f0ece3; margin-bottom: 5px; } .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; } .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. */ .imp-banner { position: sticky; top: 0; z-index: 40; 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__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; } /* Reader: routine name + current version, doubling as the runs-drawer trigger, in place of the folded-away .reader-topbar. */ .mtop-ctx { display: flex; align-items: baseline; gap: 7px; min-width: 0; border: none; background: none; padding: 0; cursor: pointer; text-align: left; } .mtop-ctx__name { font-family: "Newsreader", serif; font-weight: 600; font-size: 17px; color: #26221b; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .mtop-ctx__ver { flex: none; font: 600 11px "Hanken Grotesk"; color: #6f6a5e; } .mtop-ctx:active { opacity: .6; } .mobile-topbar__avatar { width: 30px; height: 30px; flex: none; border-radius: 50%; border: none; cursor: pointer; background: #dcebe5; color: #2f6d5b; display: flex; align-items: center; justify-content: center; font: 700 11px "Hanken Grotesk", system-ui, sans-serif; } .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; } .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; } .mobilenav__cta:hover { background: #28604f; text-decoration: none; } /* Reposition the account flyout to anchor under the mobile top bar's avatar (top-right) instead of the desktop spine's (bottom-left). */ .acctflyout { left: auto; right: 12px; bottom: auto; top: 60px; } } /* Home feed — "Latest across your routines" (design: Delivery.dc.html isHome). */ .home { max-width: 880px; margin: 0 auto; padding: var(--page-top) var(--page-gutter) 90px; } .home--empty { min-height: 70vh; display: flex; flex-direction: column; align-items: center; justify-content: center; } .home--empty .jarvis-card { max-width: 420px; width: 100%; } .home__greet { font-size: 12.5px; color: #9a9384; margin-bottom: 5px; } .home__title { font-family: 'Newsreader', serif; font-weight: 500; font-size: 30px; margin: 0 0 4px; color: #26221b; } .home__sub { font-size: 13.5px; color: #6f6a5e; margin: 0 0 24px; } .feed-card { display: block; text-decoration: none; color: inherit; border: 1.5px solid #e6e1d6; border-radius: 14px; background: #fff; padding: 16px 18px; margin-bottom: 12px; cursor: pointer; box-shadow: 0 2px 6px rgba(50, 42, 28, .05); transition: border-color .12s, box-shadow .12s; } .feed-card:hover { border-color: #cfe0d9; box-shadow: 0 8px 22px rgba(50, 42, 28, .08); text-decoration: none; } .feed-card__head { display: flex; align-items: center; gap: 8px; margin-bottom: 9px; } .feed-card__routine { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; background: #eef4f1; color: #2f6d5b; } .feed-card__status { font: 600 11px 'Hanken Grotesk', system-ui, sans-serif; padding: 5px 10px; border-radius: 999px; } .feed-card__status--success { background: #eef4f1; color: #2f6d5b; } .feed-card__status--failed { background: #fbf0ec; color: #b45b3e; } .feed-card__status--pending { background: #f1ede4; color: #8a8478; } .feed-card__time { margin-left: auto; font-size: 11.5px; color: #9a9384; white-space: nowrap; } .feed-card__title { font-family: 'Newsreader', serif; font-size: 19px; font-weight: 500; margin-bottom: 5px; color: #26221b; } .feed-card__snippet { font-size: 13.5px; line-height: 1.5; color: #6f6a5e; } /* Closes the feed when it's capped, so it doesn't just stop mid-scroll. */ .feed-more { display: flex; justify-content: center; margin: 4px 0 8px; } .feed-empty { border: 1.5px dashed #ddd6c9; border-radius: 14px; padding: 28px; text-align: center; color: #8a8478; } .feed-empty p { margin: 0 0 14px; font-size: 13.5px; } .feed-empty__actions { display: flex; gap: 10px; justify-content: center; } /* 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; } /* Select styled to match: same height/radius, custom chevron with breathing room. */ .hist-search__filter { height: 44px; max-width: 210px; margin: 0; padding: 0 38px 0 14px; border-radius: 11px; font-size: 13.5px; color: #26221b; cursor: pointer; -webkit-appearance: none; -moz-appearance: none; appearance: none; background-image: url("data:image/svg+xml;utf8,"); background-repeat: no-repeat; background-position: right 13px center; } /* 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; } .rt-row.is-paused { opacity: .68; } /* Columns (header + rows share these widths) */ .rt-c-routine { flex: 1.6; display: flex; align-items: center; gap: 9px; min-width: 0; } .rt-c-schedule { width: 120px; flex: none; font-size: 12.5px; color: #6f6a5e; } .rt-c-provider { width: 96px; flex: none; } .rt-c-next { width: 96px; flex: none; font-size: 12px; color: #9a9384; } .rt-c-menu { width: 26px; flex: none; display: flex; justify-content: flex-end; } .rt-dot { width: 8px; height: 8px; border-radius: 50%; flex: none; background: #9a9384; } .rt-dot--on { background: #2f6d5b; } .rt-dot--paused { background: #c8a24b; } .rt-routine-link { min-width: 0; text-decoration: none; color: inherit; } .rt-routine-link:hover .rt-name { text-decoration: underline; } .rt-name { font-weight: 600; font-size: 13.5px; color: #26221b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rt-status { font-size: 11.5px; color: #9a9384; } .rt-provider-chip { font: 600 10.5px 'Hanken Grotesk', system-ui, sans-serif; padding: 4px 8px; border-radius: 999px; background: #efe9f2; color: #6a4c86; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; display: inline-block; } /* 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; } .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 (