/* ============================================================ Owed — the app Shell after X web's Home (three columns: the shelf, the main pane, a rail that holds the selected rule). The four questions copy Dribbble's onboarding step, the results copy Cal.com's bookings list, and the rule + script panel copies Mistral Le Chat's document card. Only words and Owed's content change; the palette is the owner's: white ground, black type, black buttons, Apple blue as the one accent, hairlines. Every colour is a base.css token overridden here for the app pages so the dark theme keeps working; the light look is the designed one. Geist everywhere. Nothing that carries a sentence goes under 16px. ============================================================ */ :root { --paper: #FFFFFF; --paper-2: #FFFFFF; --paper-3: #F3F4F6; --card: #FFFFFF; --ink: #000000; --ink-2: #666666; --ink-3: #6B7280; /* 4.8:1 on white (#767676 was 4.1:1) */ --line: #EAEAEA; --line-2: #D4D4D4; --accent: #0071E3; --accent-hover: #0077ED; --accent-press: #0062C4; --accent-soft: #EAF3FD; --accent-line: #B7D6F8; --accent-ink: #FFFFFF; --cta: var(--accent); --cta-hover: var(--accent-hover); --cta-ink: #FFFFFF; --field: #FFFFFF; --field-line: #8E8E8E; --hover: rgba(0, 0, 0, .06); --press: rgba(0, 0, 0, .12); /* status pills keep their meaning colours in both themes */ --ok-bg: #DCFCE7; --ok-ink: #166534; --warn-bg: #FEF3C7; --warn-ink: #92400E; --long-bg: #F3F4F6; --long-ink: #374151; --warn: #92400E; --warn-soft: #FEF3C7; --warn-line: #FDE68A; --shadow-pop: 0 0 15px rgba(101, 119, 134, .2); } :root[data-theme="dark"] { --accent: #3B9DFF; --accent-hover: #5DAEFF; --accent-press: #2B8AE8; --accent-soft: #0F2640; --accent-line: #1F4A78; --accent-ink: #FFFFFF; --hover: rgba(255, 255, 255, .08); --press: rgba(255, 255, 255, .14); --ok-bg: #12351F; --ok-ink: #86EFAC; --warn-bg: #3A2A08; --warn-ink: #FCD34D; --long-bg: #26292E; --long-ink: #C9CCD1; --shadow-pop: 0 0 15px rgba(0, 0, 0, .6); } :root[data-theme="dark"] .sg-count { color: #000; } /* white on #3B9DFF is 2.8:1 */ .app-body { min-height: 100vh; background: var(--paper); color: var(--ink); } .skip-link { display: inline-flex; align-items: center; min-height: 44px; } /* mobile-only chrome, switched on at the bottom */ .topbar, .tabbar, .util-title { display: none; } /* the one filled button: black, white label, a step lighter on hover */ .app-body .btn-accent { background: var(--ink); color: var(--paper); font-weight: 500; } .app-body .btn-accent:hover { background: color-mix(in srgb, var(--ink) 88%, var(--paper)); } .app-body .btn-accent:active { background: var(--ink); } /* the outlined one: white, hairline edge */ .app-body .btn-ghost { background: var(--card); color: var(--ink); border-color: var(--line-2); } .app-body .btn-ghost:hover { background: var(--paper-3); border-color: var(--line-2); } .app-body .btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } /* ---------------- shell: [shelf 275][main][rail 350] ---------------- */ .app { display: grid; grid-template-columns: 275px minmax(0, 1fr); width: min(1440px, 100%); margin: 0 auto; min-height: 100vh; } .app > * { min-width: 0; } /* ---------------- shelf (left column) ---------------- */ .side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; align-items: flex-start; padding: 0 8px 12px; background: var(--paper); } .side > * { width: 100%; } .side-brand { order: 0; display: flex; align-items: center; margin: 2px 0 4px; flex-shrink: 0; } .side-brand .brand { display: inline-flex; align-items: center; gap: 10px; min-height: 50px; padding: 0 12px; border-radius: 9999px; transition: background-color .15s var(--ease); } .side-brand .brand:hover { background: var(--hover); } .side-brand .brand-mark { width: 26px; height: 26px; border-radius: 8px; } .side-brand .brand-name { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; } /* X's row: 50px tall pill, 26px icon, 20px label */ .xrow, .sg-toggle, .srow, .side-more { display: flex; align-items: center; gap: 16px; width: 100%; max-width: 259px; min-height: 50px; padding: 12px; border-radius: 9999px; color: var(--ink); font-size: 20px; font-weight: 400; line-height: 1.2; text-align: left; transition: background-color .15s var(--ease); } .xrow:hover, .sg-toggle:hover, .srow:hover, .side-more:hover { background: var(--hover); } .xrow:active, .sg-toggle:active, .srow:active { background: var(--press); } .xrow.is-on, .srow.is-on { font-weight: 700; } .xrow svg, .sg-ico, .srow-ico { flex-shrink: 0; width: 26px; height: 26px; } .xrow-label, .sg-label { flex: 1; min-width: 0; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .side-nav { order: 1; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } /* "Saved things" opens and closes the list; the count sits over the icon */ .side-group { order: 2; display: flex; flex-direction: column; flex: 1; min-height: 0; margin-top: 4px; } .sg-head { flex-shrink: 0; } .sg-ico-wrap { position: relative; flex-shrink: 0; width: 26px; height: 26px; } .sg-count { position: absolute; top: -6px; left: 14px; min-width: 18px; height: 18px; padding: 0 4px; border-radius: 9999px; background: var(--accent); color: #fff; box-shadow: 0 0 0 1px var(--paper); font-size: 13px; font-weight: 700; line-height: 18px; text-align: center; } .sg-caret { flex-shrink: 0; width: 20px; height: 20px; color: var(--ink-3); transition: transform .2s var(--ease); } .sg-toggle[aria-expanded="false"] .sg-caret { transform: rotate(-90deg); } .sg-body { display: flex; flex-direction: column; min-height: 0; overflow-y: auto; padding: 2px 0; scrollbar-width: thin; } .sg-body[hidden] { display: none; } .shelf-list { display: flex; flex-direction: column; gap: 4px; } .shelf-row { position: relative; } .srow { position: relative; } .srow-ico { display: grid; place-items: center; color: var(--ink); border-radius: 50%; overflow: hidden; } .srow-ico svg { width: 26px; height: 26px; } .srow-ico img { width: 100%; height: 100%; object-fit: cover; display: block; } .srow-main { flex: 1; min-width: 0; } .srow-name { display: block; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .srow-status { flex-shrink: 0; display: inline-flex; align-items: center; gap: 6px; font-size: 16px; font-weight: 500; color: var(--ink-2); line-height: 1.25; transition: opacity .15s var(--ease); } .srow.is-on .srow-status { color: var(--ink); } .dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; } .dot-strong { background: var(--ok-ink); } .dot-worth { background: var(--warn-ink); } .dot-long { border: 1.5px solid var(--ink-3); } /* remove: appears over the status on hover, never over the name */ .srow-x { position: absolute; top: 50%; right: 4px; transform: translateY(-50%); width: 44px; height: 44px; border-radius: 9999px; z-index: 2; display: grid; place-items: center; color: var(--ink-2); opacity: 0; transition: opacity .15s var(--ease), background-color .15s var(--ease); } .srow-x svg { width: 18px; height: 18px; } .shelf-row:hover .srow-x, .srow-x:focus-visible { opacity: 1; } .shelf-row:hover .srow-status, .shelf-row:has(.srow-x:focus-visible) .srow-status { opacity: 0; } .shelf-row:hover .srow-main, .shelf-row:has(.srow-x:focus-visible) .srow-main { padding-right: 24px; } .srow-x:hover { background: var(--hover); color: var(--ink); } @media (hover: none) { .srow-x { opacity: 1; } .srow { padding-right: 52px; } .shelf-row:hover .srow-main { padding-right: 0; } .shelf-row:hover .srow-status { opacity: 1; } } /* empty shelf: one photo card */ .shelf-empty { margin: 4px 0 0 12px; max-width: 235px; border: 1px solid var(--line); border-radius: 16px; overflow: hidden; background: var(--card); } .shelf-empty img { width: 100%; height: auto; aspect-ratio: 1; object-fit: cover; display: block; } .shelf-empty p { padding: 12px 16px 14px; font-size: 16px; line-height: 1.4; color: var(--ink-2); } .side-more { font-size: 16px; font-weight: 500; color: var(--ink-2); margin-top: 4px; } /* the primary: X's Post button */ .side-action { order: 3; flex-shrink: 0; padding: 24px 0 0; } .side-action .btn { width: 90%; height: 52px; border-radius: 9999px; font-size: 17px; font-weight: 700; } .side-action .btn svg { display: none; } /* foot: the region pill, then three small tools */ .side-util { order: 4; margin-top: auto; padding-top: 12px; flex-shrink: 0; display: flex; flex-direction: column; gap: 4px; } .util-row { position: relative; display: flex; align-items: center; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 9999px; color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.25; text-decoration: none; text-align: left; width: 100%; transition: background-color .15s var(--ease); } .util-row:hover { background: var(--hover); } .util-ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--ink); } .util-region { min-height: 64px; padding: 12px; } .util-region:focus-within { outline: 2px solid var(--accent); outline-offset: 2px; } .util-circle { flex-shrink: 0; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: var(--paper-3); color: var(--ink); } .util-circle svg { width: 20px; height: 20px; } .util-region-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; } .util-region-name { font-size: 16px; font-weight: 700; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .util-note { font-size: 16px; font-weight: 400; color: var(--ink-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .util-dots { flex-shrink: 0; width: 18px; height: 18px; color: var(--ink); } /* the real control covers the whole pill, so the 64px row is the target */ .util-select { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; border: 0; margin: 0; padding: 0; appearance: none; background: transparent; color: inherit; } .util-tools { display: flex; gap: 4px; padding: 0 4px; } .util-tools .util-row { width: 44px; min-height: 44px; padding: 0; justify-content: center; gap: 0; } .util-tools .util-label { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .util-theme { cursor: pointer; } .util-theme .theme-btn { width: 44px; height: 44px; color: var(--ink); border: 0; border-radius: 9999px; } .util-theme .theme-btn:hover { background: none; } .util-theme .theme-btn svg { width: 20px; height: 20px; } /* language: i18n.js gives the button util-row / util-ico / util-label, so it follows the other tools in every layout */ .lang-btn.util-row, .lang-btn.util-row:hover, .lang-btn.util-row[aria-expanded="true"] { border-color: transparent; color: var(--ink); } .lang-btn.util-row { height: auto; font-size: 16px; font-weight: 500; } .lang-btn.util-row[aria-expanded="true"] { background: var(--hover); } .util-tools .lang-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; } /* .side clips overflow: in the 88px rail the menu escapes to the right of it; on phones it opens downward into the scrolling panel */ @media (min-width: 1200px) and (max-width: 1279.98px) { .util-tools .lang-menu { position: fixed; left: 96px; top: auto; bottom: 12px; } } @media (max-width: 899.98px) { .util-tools .lang-menu { top: calc(100% + 6px); bottom: auto; } } /* ---------------- main pane (centre column) ---------------- */ .panel { min-width: 0; min-height: 100vh; border-left: 1px solid var(--line); border-right: 1px solid var(--line); padding: 0 0 48px; } .view { animation: viewIn .3s var(--ease) both; } @keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } .res-title:focus, .wiz-q:focus, .util-title:focus, .dp-title:focus { outline: none; } /* sticky head: back · title / sub-line · action */ .pane-head { position: sticky; top: 0; z-index: 20; display: flex; align-items: center; gap: 16px; min-height: 60px; padding: 8px 16px; background: color-mix(in srgb, var(--paper) 92%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px); border-bottom: 1px solid var(--line); } .pane-head-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; } .pane-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .pane-sub { font-size: 16px; font-weight: 400; color: var(--ink-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .iconbtn { flex-shrink: 0; width: 44px; height: 44px; border-radius: 9999px; display: grid; place-items: center; color: var(--ink); transition: background-color .15s var(--ease); } .iconbtn:hover { background: var(--hover); } .iconbtn[hidden] { display: none; } /* ---------------- the four questions (Dribbble's onboarding step) ---------------- */ .wiz { width: 100%; } .wiz-body { max-width: 424px; margin: 0 auto; padding: 40px 16px 48px; display: flex; flex-direction: column; align-items: center; } /* the bar sits under the helper line, above the tiles (Dribbble's order); the active step's children join the column directly so one bar can be slotted between the words and the grid of every step */ .wiz-progress { width: min(262px, 100%); height: 4px; border-radius: 2px; background: var(--line); overflow: hidden; margin-bottom: 32px; order: 4; } .wiz-progress span { display: block; height: 100%; width: 25%; background: var(--accent); border-radius: 2px; transition: width .2s ease-out; } .wiz-step { display: none; } .wiz-step.is-on { display: contents; } .wiz-step > * { order: 5; animation: stepIn .2s var(--ease) both; } .wiz-step > .wiz-ico { order: 1; } .wiz-step > .wiz-q { order: 2; } .wiz-step > .wiz-help { order: 3; } .wiz-foot { order: 9; } @keyframes stepIn { from { opacity: 0; transform: translateX(8px); } to { opacity: 1; transform: none; } } .wiz-ico { width: 45px; height: 45px; color: var(--accent); margin-bottom: 20px; } .wiz-ico svg { width: 45px; height: 45px; } .wiz-q { font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; text-align: center; margin: 0 0 8px; } .wiz-help { font-size: 16px; color: var(--ink-2); line-height: 1.5; text-align: center; margin: 0 0 28px; max-width: 40ch; } /* tiles: 3 across, white, hairline, 11px corners */ .opt-list { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; width: 100%; } .opt { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 73px; padding: 10px 12px; border: 1px solid var(--line-2); border-radius: 11px; background: var(--card); color: var(--ink); font-size: 16px; font-weight: 500; line-height: 1.3; text-align: center; transition: border-color .15s var(--ease), background-color .15s var(--ease); } .opt:hover { border-color: color-mix(in srgb, var(--ink) 25%, var(--line-2)); background: color-mix(in srgb, var(--ink) 2%, var(--card)); } .opt:active { background: var(--line); } .opt.is-on { background: var(--paper-3); border-color: var(--ink); box-shadow: inset 0 0 0 1px var(--ink); } .opt:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .opt-ico { flex-shrink: 0; width: 22px; height: 22px; color: var(--ink); display: grid; place-items: center; } .opt-ico svg { width: 22px; height: 22px; } .opt-ico:empty { display: none; } /* question 1: a 44px photo of the kind of thing */ .opt-ico:has(img) { width: 44px; height: 44px; } .opt-ico img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; display: block; background: var(--paper-3); } .opt-list:has(.opt-ico img) .opt { min-height: 100px; } .opt-label { min-width: 0; } .opt-radio { display: none; } /* the last tile of a short row spans the gap, so there is no orphan hole */ .opt-list > .opt:last-child:nth-child(3n+2) { grid-column: span 2; } .opt-list > .opt:last-child:nth-child(3n+1):not(:first-child) { grid-column: 1 / -1; } /* the fallback row: "Describe it or add a photo" */ .wiz-more { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 20px; padding: 0 8px; border-radius: 8px; font-size: 16px; font-weight: 500; color: var(--ink); } .wiz-more:hover { background: var(--hover); } .wiz-more svg { width: 14px; height: 14px; transition: transform .2s var(--ease); } .wiz-more[aria-expanded="true"] svg { transform: rotate(180deg); } .wiz-fallback { width: 100%; display: grid; grid-template-columns: minmax(0, 1fr) auto; gap: 10px; align-items: center; margin-top: 8px; } .wiz-fallback[hidden] { display: none; } .wiz-input { width: 100%; min-height: 44px; padding: 0 15px; border: 1px solid var(--field-line); border-radius: 11px; background: var(--field); font-size: 16px; color: var(--ink); } .wiz-input::placeholder { color: var(--ink-3); } .wiz-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 2px color-mix(in srgb, var(--accent) 30%, transparent); } .wiz-fallback > .wiz-input:only-child { grid-column: 1 / -1; } .wiz-err { grid-column: 1 / -1; font-size: 16px; color: #B42318; line-height: 1.4; } :root[data-theme="dark"] .wiz-err { color: #F2857D; } .wiz-photo { display: contents; } .wiz-photo-btn { border-radius: 9999px; height: 44px; padding: 0 16px; gap: 8px; white-space: nowrap; } .wiz-photo-btn svg { width: 20px; height: 20px; } .wiz-photo:focus-within .wiz-photo-btn { outline: 2px solid var(--accent); outline-offset: 2px; } .has-photo .wiz-photo-btn { display: none; } .wiz-photo-preview { grid-column: 1 / -1; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 8px; border: 1px solid var(--line); border-radius: 11px; background: var(--card); text-align: left; } .wiz-photo-preview img { width: 44px; height: 44px; border-radius: 8px; object-fit: cover; flex-shrink: 0; background: var(--paper-3); } .wiz-photo-meta { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .wiz-photo-note { font-size: 16px; color: var(--ink-2); line-height: 1.4; } .wiz-photo-note b { color: var(--ink); font-weight: 600; } .wiz-photo-x { min-height: 44px; padding: 0 8px; font-size: 16px; font-weight: 500; color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .wiz-broken { display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 44px; margin-top: 20px; font-size: 16px; color: var(--ink); line-height: 1.4; cursor: pointer; } .wiz-broken input { width: 22px; height: 22px; margin: 0; flex-shrink: 0; accent-color: var(--ink); } .wiz-foot { width: 100%; display: flex; flex-direction: column; align-items: center; gap: 4px; margin-top: 24px; } .wiz-next { width: min(345px, 100%); height: 44px; border-radius: 9999px; font-size: 16px; font-weight: 600; } .btn.is-dim, .btn.is-dim:hover { background: var(--ink); color: var(--paper); opacity: .9; } .wiz-skip { min-height: 44px; padding: 0 12px; font-size: 16px; color: var(--ink-2); border-radius: 8px; } .wiz-skip:hover { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; } .wiz-note { font-size: 16px; color: var(--ink-3); line-height: 1.4; text-align: center; margin-top: 8px; } /* ---------------- results (Cal.com's bookings) ---------------- */ .res-head { padding-right: 16px; } .res-ico { flex-shrink: 0; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; background: var(--paper-3); color: var(--ink); display: grid; place-items: center; } .res-ico svg { width: 24px; height: 24px; } .res-ico img { width: 100%; height: 100%; object-fit: cover; display: block; } .res-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .res-meta { font-size: 16px; color: var(--ink-2); line-height: 1.25; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .res-edit { flex-shrink: 0; height: 44px; padding: 0 16px; border-radius: 6px; } .res-summary { padding: 20px 16px 8px; } .res-line { font-size: 24px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } .res-line .res-n { color: var(--ink); } .res-line.none { font-weight: 600; font-size: 20px; } .res-state { font-size: 16px; color: var(--ink-2); line-height: 1.5; } .res-state b { display: block; color: var(--ink); font-weight: 600; margin-bottom: 4px; } /* tabs: All · Strong · Worth asking · Long shot */ .res-filter { display: flex; flex-wrap: wrap; gap: 8px; padding: 8px 16px 16px; } .fchip { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: 6px; color: var(--ink-2); font-size: 16px; font-weight: 500; line-height: 1.2; transition: background-color .15s var(--ease), color .15s var(--ease); } .fchip:hover { background: var(--paper-3); color: var(--ink); } .fchip.is-on { background: var(--line); color: var(--ink); } .fchip-n:empty { display: none; } .fchip-n::before { content: "·"; margin: 0 4px 0 2px; } /* the grouped card */ .res-groups { margin: 0 16px; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; background: var(--card); } .res-groups:empty { display: none; } .rgroup + .rgroup { border-top: 1px solid var(--line); } .rgroup-head { display: flex; align-items: center; gap: 8px; min-height: 38px; padding: 6px 24px; background: var(--paper-3); font-size: 16px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-2); line-height: 1.3; } .rgroup-ico { flex-shrink: 0; width: 18px; height: 18px; color: var(--ink-3); } .rgroup-ico svg { width: 18px; height: 18px; } .rgroup-title { min-width: 0; } .rgroup-count { font-weight: 500; } .rgroup-list { display: flex; flex-direction: column; container-type: inline-size; } /* one row: facts · headline + reason + who · the black action */ .rcard { border-top: 1px solid var(--line); transition: background-color .15s var(--ease); } .rgroup-head + .rgroup-list > .rcard:first-child { border-top: 0; } .rcard.is-hidden { display: none; } .rc-row { display: grid; grid-template-columns: 176px minmax(0, 1fr) auto; gap: 8px 24px; align-items: start; padding: 20px 24px; } .rc-col1 { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; min-width: 0; } .rc-src { font-size: 16px; font-weight: 500; color: var(--ink); line-height: 1.5; } .rc-when, .rc-deadline { font-size: 16px; color: var(--ink-2); line-height: 1.5; } .rc-details { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0; margin: -6px 0 -8px; font-size: 16px; font-weight: 500; color: var(--accent); line-height: 1.5; border-radius: 4px; } .rc-details:hover { text-decoration: underline; text-underline-offset: 3px; } .rc-details svg { width: 16px; height: 16px; transition: transform .2s var(--ease); } .rc-details[aria-expanded="true"] svg { transform: rotate(180deg); } .rc-col1 .tag { margin-top: 4px; } .rc-main { min-width: 0; display: flex; flex-direction: column; gap: 2px; } .rc-start { font-size: 16px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink); line-height: 1.4; } .rc-title { font-size: 17px; font-weight: 600; letter-spacing: -.005em; color: var(--ink); line-height: 1.45; } .rc-reason { font-size: 16px; color: var(--ink-2); line-height: 1.5; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .rc-ask { font-size: 16px; color: var(--ink-2); line-height: 1.5; } .rc-side { display: flex; gap: 8px; align-items: center; } .rc-side .btn { height: 44px; padding: 0 16px; border-radius: 6px; } /* status pills: word only, meaning colours */ .app-body .tag { display: inline-flex; align-items: center; height: 26px; padding: 0 8px; border: 0; border-radius: 6px; font-size: 16px; font-weight: 600; letter-spacing: 0; line-height: 1.3; } .app-body .tag-strong { background: var(--ok-bg); color: var(--ok-ink); } .app-body .tag-maybe { background: var(--warn-bg); color: var(--warn-ink); } .app-body .tag-long { background: var(--long-bg); color: var(--long-ink); } .tag-g { display: none; } /* narrow list: the fold-out under the row */ .rc-body { padding: 0 24px 20px; animation: bodyIn .25s var(--ease-out); } @keyframes bodyIn { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; transform: none; } } /* long shots fold behind one row */ .rgroup-note { padding: 12px 24px 0; font-size: 16px; color: var(--ink-2); line-height: 1.5; } .rgroup-toggle { display: flex; align-items: center; justify-content: space-between; gap: 16px; width: 100%; min-height: 52px; padding: 0 24px; border-top: 1px solid var(--line); text-align: left; font-size: 16px; font-weight: 500; color: var(--ink); transition: background-color .15s var(--ease); } .rgroup-toggle::after { content: "\25BE"; color: var(--ink-3); } .rgroup-toggle:hover { background: var(--paper-3); } .rgroup-more { display: flex; flex-direction: column; animation: bodyIn .25s var(--ease); } .rgroup-more > .rcard:first-child { border-top: 0; } .rgroup-note + .rgroup-list .rgroup-more > .rcard:first-child { border-top: 1px solid var(--line); } .res-none { text-align: center; padding: 40px 24px; } .res-none-title { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; } .res-none p { max-width: 44ch; margin-inline: auto; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .res-filter-empty { margin: 12px 16px 0; padding: 16px; border: 1px solid var(--line); border-radius: 8px; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .res-legend { margin: 24px 16px 0; font-size: 16px; color: var(--ink-3); line-height: 1.5; } /* ---------------- the document card (Mistral Le Chat) ---------------- */ .doc { border: 1px solid var(--line); border-radius: 12px; background: var(--card); } .doc-top { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; min-height: 52px; padding: 6px 12px 6px 16px; border-bottom: 1px solid var(--line); } .doc-top svg { flex-shrink: 0; width: 18px; height: 18px; color: var(--ink-2); } .doc-kicker { flex: 1; min-width: 0; font-size: 16px; font-weight: 500; color: var(--ink-2); line-height: 1.3; } .doc-top .tag { margin-left: auto; } .doc-top .scr-back { flex: none; padding: 0 8px; margin-left: -8px; font-size: 16px; } .doc-body { padding: 20px 20px 4px; } .dp-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } .dp-key { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-top: 4px; } .rc-get { font-size: 16px; line-height: 1.55; color: var(--ink); margin-top: 16px; } .rc-h { font-size: 16px; font-weight: 700; line-height: 1.4; margin: 20px 0 8px; } .rc-steps { display: flex; flex-direction: column; gap: 8px; counter-reset: step; } .rc-steps li { display: flex; gap: 10px; font-size: 16px; line-height: 1.5; color: var(--ink); } .rc-steps li::before { counter-increment: step; content: counter(step); flex-shrink: 0; width: 24px; height: 24px; border-radius: 50%; background: var(--ink); color: var(--paper); font-size: 14px; font-weight: 700; line-height: 24px; text-align: center; } /* label · value rows */ .rc-kv, .scr-kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 10px 16px; margin-top: 20px; padding-top: 16px; border-top: 1px solid var(--line); } .rc-kv > div, .scr-kv > div { display: contents; } .rc-kv dt, .scr-kv dt { font-size: 16px; font-weight: 500; color: var(--ink-2); line-height: 1.5; display: flex; align-items: flex-start; gap: 6px; } .rc-kv dt svg, .scr-kv dt svg { display: none; } .rc-kv dd, .scr-kv dd { margin: 0; font-size: 16px; color: var(--ink); line-height: 1.5; overflow-wrap: anywhere; min-width: 0; } .rc-kv a, .scr-kv a { display: inline-block; padding: 10px 0; color: var(--accent); text-decoration: underline; text-underline-offset: 3px; } .rc-kv dd:has(> a:first-child), .scr-kv dd:has(> a:first-child) { margin-top: -10px; } .rc-why { font-size: 16px; color: var(--ink-2); line-height: 1.5; margin-top: 16px; } .rc-link { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 4px; border-radius: 4px; color: var(--accent); font-size: 16px; font-weight: 500; text-decoration: none; } .rc-link:hover { text-decoration: underline; text-underline-offset: 3px; } .rc-link svg { width: 16px; height: 16px; } .scr-kv .rc-link { margin-left: 4px; } /* `.rc-kv a` (inline-block, above) outranks .rc-link's inline-flex, and base.css sets svg { display: block } — so the external-link glyph dropped onto a line of its own inside these rows. Keep it beside the text at every width, for the Source link and the Explainer link alike. */ .rc-kv a.rc-link, .scr-kv a.rc-link { display: inline-flex; align-items: center; gap: 4px; } .rc-kv dd a svg, .scr-kv dd a svg { display: inline-block; flex: none; } .doc-foot { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; padding: 16px 20px 20px; } .doc-foot .btn { height: 44px; padding: 0 18px; border-radius: 6px; } .dp-none { text-align: center; padding: 32px 20px; } .dp-none h2 { font-size: 20px; font-weight: 700; line-height: 1.3; margin-bottom: 8px; } .dp-none p { font-size: 16px; line-height: 1.5; color: var(--ink-2); } /* the script: short lines, the facts to get right in bold */ .scr-for { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.3; } .scr-lines { display: flex; flex-direction: column; gap: 12px; margin-top: 20px; padding: 14px 16px; border: 1px solid var(--line-2); border-radius: 8px; background: var(--card); } .scr-lines p { font-size: 16px; line-height: 1.6; color: var(--ink); animation: lineFade .4s var(--ease) both; } .scr-lines p b { font-weight: 700; } .scr-lines p:nth-child(2) { animation-delay: .08s; } .scr-lines p:nth-child(3) { animation-delay: .16s; } .scr-lines p:nth-child(4) { animation-delay: .24s; } @keyframes lineFade { from { opacity: 0; transform: translateX(-4px); } to { opacity: 1; transform: none; } } .scr-help { display: flex; align-items: flex-start; gap: 6px; margin-top: 8px; font-size: 16px; color: var(--ink-2); line-height: 1.5; } /* the script as its own page (under 1200px) */ .view-script .scr-body { max-width: 600px; margin: 0 auto; padding: 16px; } .view-script .scr-back { margin: 0; } /* ---------------- the rail (>= 1200px): the selected rule lives here ---------------- */ .rail { display: none; } .detail[hidden] { display: none; } @media (min-width: 1200px) { .app { grid-template-columns: 275px minmax(0, 1fr) var(--rail-w, 680px); } .rail { display: block; position: sticky; top: 0; max-height: 100vh; overflow-y: auto; padding: 4px 0 72px 28px; scrollbar-width: thin; } .rail-card { border: 1px solid var(--line); border-radius: 16px; background: var(--card); overflow: hidden; } .rail-card .doc { border: 0; border-radius: 0; } .rail-card:has(.detail:not([hidden])) .rail-legend { display: none; } .rail-legend { padding: 12px 0; } .rail-title { font-size: 20px; font-weight: 700; letter-spacing: -.01em; line-height: 1.2; padding: 4px 16px 8px; } .rail-row { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px; min-height: 48px; } .rail-row + .rail-row { border-top: 1px solid var(--line); } .rail-row span:last-child { font-size: 16px; color: var(--ink-2); line-height: 1.4; } .rail-row .tag { align-self: flex-start; } .rail-foot { margin: 16px; font-size: 16px; color: var(--ink-2); line-height: 1.5; } .rail-foot a { display: inline-block; padding: 12px 6px; margin: 0 -6px; color: inherit; text-decoration: none; } .rail-foot a:hover { text-decoration: underline; text-underline-offset: 3px; } .rail-foot span { white-space: nowrap; } /* in the rail, clicking a row selects it; the fold-out never opens */ .rcard { cursor: pointer; } .rcard:hover { background: color-mix(in srgb, var(--ink) 2%, var(--card)); } .rcard.is-selected { background: color-mix(in srgb, var(--accent) 6%, var(--card)); } .rc-body { display: none !important; } } /* the sidebar collapses to icons where the three columns would not fit */ @media (min-width: 1200px) and (max-width: 1279.98px) { .app { grid-template-columns: 88px minmax(0, 1fr) 378px; } .side { align-items: center; } .side-brand .brand { padding: 0; width: 50px; justify-content: center; } .side-brand .brand-name { display: none; } .xrow, .sg-toggle, .srow, .side-more { width: 50px; padding: 12px; justify-content: center; gap: 0; } .sg-caret, .srow-status, .side-more, .shelf-empty, .util-region-text, .util-dots { display: none; } /* the labels leave the layout but stay in the accessible name */ .xrow-label, .sg-label, .srow-main { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; } .shelf-row:hover .srow-x { opacity: 0; } .srow-x:focus-visible { opacity: 1; background: var(--paper); } .side-action .btn { width: 50px; height: 50px; padding: 0; font-size: 0; } .side-action .btn svg { display: block; width: 24px; height: 24px; } .util-region { width: 50px; min-height: 50px; padding: 5px; justify-content: center; } .util-tools { flex-direction: column; padding: 0; } } /* the corner help square */ .corner-help { position: fixed; right: 16px; bottom: 16px; z-index: 30; width: 44px; height: 44px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); display: grid; place-items: center; text-decoration: none; font-size: 20px; font-weight: 600; line-height: 1; } .corner-help:hover { background: var(--paper-3); } /* ---------------- phone: top bar + sheet + tab bar (< 900px) ---------------- */ @media (max-width: 899.98px) { .topbar { display: flex; align-items: center; height: 56px; padding: 0 16px; position: sticky; top: 0; z-index: 40; background: var(--paper); border-bottom: 1px solid var(--line); } .topbar .brand { min-height: 44px; gap: 8px; } .topbar .brand-name { font-size: 20px; font-weight: 700; } .app { grid-template-columns: 1fr; min-height: auto; } .rail, .corner-help { display: none; } /* the shelf as a sheet under the bar */ .side { position: static; height: auto; padding: 0; margin: 12px 16px 0; border: 1px solid var(--line); border-radius: 16px; display: block; } .side-brand, .side-action, .side-util, .side-nav { display: none; } .side-group { margin: 0; padding: 4px 8px; } .sg-toggle { max-width: none; font-size: 18px; font-weight: 600; } .sg-body { overflow: visible; } .xrow, .srow, .side-more { max-width: none; font-size: 18px; } .shelf-empty { margin: 4px 4px 8px; max-width: none; } body[data-tab="things"] .side.is-empty { display: none; } body[data-tab="check"] .side { display: none; } /* Help tab: the utilities as a list */ body[data-tab="help"] .side { border: 0; margin: 0; padding: 12px 16px 0; } body[data-tab="help"] .side-group { display: none; } body[data-tab="help"] .side-util { display: flex; margin: 0; padding: 0; } body[data-tab="help"] .panel { display: none; } .util-title { display: block; font-size: 28px; font-weight: 700; letter-spacing: -.01em; line-height: 1.25; margin: 8px 12px 16px; } .util-region { border: 1px solid var(--line); border-radius: 16px; } .util-tools { flex-direction: column; gap: 0; padding: 8px 0 0; } .util-tools .util-row { width: 100%; justify-content: flex-start; gap: 12px; padding: 0 12px; min-height: 52px; font-size: 18px; } .util-tools .util-label { position: static; width: auto; height: auto; overflow: visible; clip: auto; white-space: normal; } .util-theme .theme-btn { margin-left: -12px; } .panel { border: 0; padding-bottom: calc(76px + env(safe-area-inset-bottom)); } .pane-head { top: 56px; } .wiz-body { padding: 28px 16px 40px; } .wiz-fallback { grid-template-columns: 1fr; } .wiz-photo-btn { justify-self: stretch; } .tabbar { display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40; background: var(--paper); border-top: 1px solid var(--line); padding-bottom: env(safe-area-inset-bottom); } .tab { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; min-height: 56px; padding: 6px 0; font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--ink-2); } .tab svg { width: 26px; height: 26px; flex-shrink: 0; } .tab.is-on { color: var(--ink); font-weight: 700; } .res-groups { margin: 0 12px; } .res-filter { gap: 4px; padding: 8px 12px 12px; } .fchip { padding: 0 10px; } .rc-row { grid-template-columns: 1fr; gap: 8px; padding: 16px; } .rc-side { width: 100%; } .rc-side .btn { width: 100%; } .rc-body { padding: 0 16px 16px; } .rgroup-head, .rgroup-note, .rgroup-toggle { padding-left: 16px; padding-right: 16px; } .res-filter-empty, .res-legend { margin-left: 12px; margin-right: 12px; } .rc-kv, .scr-kv { grid-template-columns: 1fr; gap: 2px 0; } .rc-kv dt, .scr-kv dt { margin-top: 8px; } .rc-kv > div:first-child dt, .scr-kv > div:first-child dt { margin-top: 0; } .doc-foot .btn { width: 100%; } .toast { bottom: calc(72px + env(safe-area-inset-bottom)); } } /* a narrow list (900–1199px, and any list under 680px) stacks the row */ @container (max-width: 680px) { .rc-row { grid-template-columns: 1fr; gap: 8px; } .rc-side { width: 100%; } .rc-side .btn { width: 100%; } } /* tiles go two across on a phone */ @media (max-width: 767.98px) { .opt-list { grid-template-columns: repeat(2, minmax(0, 1fr)); } .opt-list > .opt:last-child:nth-child(3n+2), .opt-list > .opt:last-child:nth-child(3n+1):not(:first-child) { grid-column: auto; } .opt-list > .opt:last-child:nth-child(odd):not(:first-child) { grid-column: 1 / -1; } } @media (prefers-reduced-motion: reduce) { .view, .wiz-step > *, .scr-lines p, .rc-body, .rgroup-more { animation: none !important; } .wiz-progress span, .sg-caret, .rc-details svg, .wiz-more svg, .srow, .srow-status, .srow-x, .opt, .btn, .fchip { transition: none !important; } .toast { transition: opacity .2s !important; transform: translate(-50%, 0) !important; } } @media (min-width: 1200px) { .corner-help { display: none; } } /* ---------- shell: full width, tinted sidebar (the owner: too much white at the sides, sidebar not white) ---------- */ .sg, .sidebar, aside[id="sidebar"] { background: #F5F5F7; border-right: 1px solid #EAEAEA; } .rail-block { padding: 16px 16px 8px; } .rail-list { list-style: none; margin: 8px 0 0; padding: 0; } .rail-list li { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-top: 1px solid var(--line); font-size: 16px; line-height: 1.35; color: var(--ink); } .rail-list li::before { content: ""; width: 8px; height: 8px; border-radius: 50%; background: var(--accent); flex: none; } /* ---------- the question fits one screen: compact stack, 4-up tiles, no page scroll ---------- */ .wiz-body { padding: 8px 16px 12px; max-width: 560px; min-height: calc(100vh - 124px); justify-content: center; } .wiz-ico { width: 36px; height: 36px; margin-bottom: 10px; } .wiz-ico svg { width: 36px; height: 36px; } .wiz-q { font-size: 26px; margin-bottom: 4px; } .wiz-help { margin-bottom: 14px; } .wiz-progress { margin-bottom: 18px; } .wiz-step.is-on .opts, .wiz-step.is-on .opt-grid, .wiz-step.is-on [role="radiogroup"] { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; width: 100%; } .opt { padding: 10px 6px; min-height: 0; } .opt img, .opt-photo { width: 40px; height: 40px; } .wiz-more { margin-top: 10px; } .wiz-foot { margin-top: 12px; } @media (max-width: 900px) { .wiz-body { min-height: 0; } .wiz-step.is-on .opts, .wiz-step.is-on .opt-grid, .wiz-step.is-on [role="radiogroup"] { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ---------- results rows: title, pill, button — nothing else ---------- */ .rc-row { grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 16px; } .rc-col1, .rc-reason, .rc-ask, .rc-when { display: none !important; } .rc-main { min-width: 0; } .rc-title { font-size: 17px; font-weight: 600; letter-spacing: -.012em; line-height: 1.3; } .rc-title .rc-details { all: unset; cursor: pointer; font: inherit; color: inherit; display: inline; } .rc-title .rc-details:hover { color: var(--accent); } .rc-title .rc-details:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; } .rc-meta { display: flex; align-items: center; gap: 10px; margin-top: 6px; } .rc-meta .rc-src { font-size: 16px; color: var(--ink-2); } .rc-side { display: flex; align-items: center; gap: 12px; flex: none; } .side { background: #F5F5F7; border-right: 1px solid #EAEAEA; } .app { max-width: none; margin: 0; width: 100%; } :root[data-theme="dark"] .side { background: #0D0D0D; border-right-color: #262626; } :root[data-theme="dark"] .rail-list li { border-color: #262626; color: var(--ink); } /* rename: a ghost icon button beside Edit, an inline field while editing */ .res-rename { width: 44px; height: 44px; padding: 0; display: inline-grid; place-items: center; margin-right: 8px; } .res-rename-input { font: inherit; font-size: 20px; font-weight: 700; letter-spacing: -.01em; width: 100%; max-width: 420px; height: 36px; padding: 0 8px; border: 1px solid var(--accent); border-radius: 8px; background: var(--card, #FFF); color: var(--ink); outline: none; box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); } /* the rail's two blocks share one edge and one rhythm */ .rail-card { padding: 0; } .rail-block { padding: 20px 20px 10px; border-bottom: 1px solid var(--line); } .rail-block .rail-title { margin: 0 0 4px; } .rail-legend .rail-title { padding: 18px 20px 6px; margin: 0; } .rail-list li { padding: 10px 0; } .rail-list li:first-child { border-top: 0; } /* question one: the model field sits under the tiles, full width */ .wiz-fallback { margin-top: 12px; } /* ---------- air: the owner wanted more room without losing fullness ---------- */ .pane-head { min-height: 76px; padding: 14px 28px; gap: 18px; } .res-summary { margin: 28px 0 18px; } .res-filters, .filters, .chips { margin-bottom: 22px; gap: 10px; } .rgroup { margin-bottom: 24px; } .rgroup-head { min-height: 44px; padding: 8px 28px; } .rc-row { padding: 20px 28px; } .rgroup-note { padding: 14px 28px 6px; } .rgroup-toggle { min-height: 52px; padding: 0 28px; } .side { padding-top: 6px; } .xrow, .srow { min-height: 50px; margin: 2px 8px; border-radius: 12px; } .sg-head { margin-top: 6px; } .side .btn-primary, .side .btn-accent, #newCheck, .sg-new { width: calc(100% - 32px); margin: 8px 16px 14px; height: 50px; border-radius: 14px; font-size: 17px; } .side-foot, .sg-foot { padding: 10px 16px 18px; } .rail-card { margin: 16px 16px 0; } .rail-block { padding: 22px 22px 12px; } .rail-legend .rail-title { padding: 20px 22px 8px; } .rail-row { padding: 14px 22px; } .rail-foot { padding: 18px 22px; } .wiz-body { gap: 0; } .wiz-help { margin-bottom: 18px; } .wiz-progress { margin-bottom: 22px; } .wiz-more { margin-top: 14px; } .wiz-foot { margin-top: 16px; } .side, .sg-body { overflow-x: hidden; } .xrow, .srow { width: auto; max-width: 100%; box-sizing: border-box; } /* questions 2-4: three equal columns, every tile the same height, the odd last option ("can't remember") takes the full row on purpose */ .wiz-step.is-on .opt-list:not(#catChips) { grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 10px; } .wiz-step.is-on .opt-list:not(#catChips) .opt { min-height: 76px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; text-align: center; line-height: 1.2; padding: 10px 12px; } .wiz-step.is-on .opt-list:not(#catChips) .opt:last-child:nth-child(3n+1) { grid-column: 1 / -1; min-height: 56px; flex-direction: row; } @media (max-width: 900px) { .wiz-step.is-on .opt-list:not(#catChips) { grid-template-columns: repeat(2, minmax(0, 1fr)); } .wiz-step.is-on .opt-list:not(#catChips) .opt:last-child:nth-child(3n+1) { grid-column: auto; } } /* the foot: Back beside Next */ .wiz-foot-row { display: flex; align-items: center; justify-content: center; gap: 12px; width: 100%; } .wiz-back-2 { height: 48px; padding: 0 20px; border-radius: 9999px; } /* the rail: X's flat tinted card, no border; both headings on the same left edge */ .rail-card { border: 0 !important; box-shadow: none !important; background: #F5F5F7; border-radius: 16px; overflow: hidden; } :root[data-theme="dark"] .rail-card { background: #111; } .rail-block { padding: 22px 22px 12px; border-bottom: 1px solid var(--line); } .rail-block .rail-title, .rail-legend .rail-title { padding: 0; margin: 0 0 6px; font-size: 20px; font-weight: 700; letter-spacing: -.015em; } .rail-legend .rail-title { padding: 20px 22px 6px; } .rail-list li { padding: 11px 0; border-top: 1px solid var(--line); } .rail-list li:first-child { border-top: 0; } .rail-row { padding: 14px 22px; border-top: 1px solid var(--line); } /* rail: a sticky column the height of the window; the small print sits in its bottom corner */ @media (min-width: 1200px) { .rail { display: flex !important; flex-direction: column; position: sticky; top: 0; height: 100vh; overflow: auto; } .rail-foot { margin-top: auto; padding: 16px 22px 20px; font-size: 14px; color: var(--ink-3); } } .rail-legend .rail-title { padding: 20px 22px 6px !important; } /* sidebar rows share one grid: icon column, label, trailing control */ .xrow, .sg-toggle { display: grid !important; grid-template-columns: 26px minmax(0, 1fr) auto; column-gap: 14px; align-items: center; width: 100%; padding: 0 16px; text-align: left; } .xrow > svg, .xrow .xrow-ico, .sg-toggle > svg, .sg-toggle .sg-ico-wrap { width: 26px; height: 26px; justify-self: center; } /* fewer boxes in the rail: the document sits flat, only the script keeps its frame */ .rail .doc { border: 0 !important; background: transparent !important; box-shadow: none !important; padding-left: 0; padding-right: 0; } .rail-legend { padding: 0 22px; } .rail-legend .rail-title { padding: 20px 0 6px !important; } .rail-row { margin: 0 -22px; padding: 14px 22px; } .sg-head { margin: 2px 8px; } .sg-toggle { min-height: 50px; border-radius: 12px; } /* ---------- phones: rows stack, chips scroll, the header wraps ---------- */ @media (max-width: 768px) { .pane-head { flex-wrap: wrap; padding: 12px 16px; gap: 10px 12px; } .pane-head-main { flex: 1 1 100%; order: -1; } .pane-title { white-space: normal; font-size: 22px; line-height: 1.2; } .pane-sub { white-space: normal; } .res-rename, .res-edit { margin: 0; } .res-edit { margin-left: auto; } .res-summary { margin: 20px 0 14px; font-size: 22px; } .res-filters, .filters, .chips { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; padding-bottom: 4px; margin: 0 -16px 16px; padding-left: 16px; } .res-filters::-webkit-scrollbar, .filters::-webkit-scrollbar, .chips::-webkit-scrollbar { display: none; } .res-filters > *, .filters > *, .chips > * { flex: none; } .rc-row { grid-template-columns: 1fr; gap: 12px; padding: 16px; } .rc-title { font-size: 18px; } .rc-side { width: 100%; justify-content: space-between; } .rc-side .btn { flex: 1; margin-left: 12px; } .rgroup-head { padding: 8px 16px; font-size: 14px; letter-spacing: .06em; } .rgroup-note { padding: 12px 16px 4px; } .rgroup-toggle { padding: 0 16px; } .wiz-body { padding: 8px 12px 96px; min-height: 0; } .wiz-q { font-size: 24px; } .wiz-step.is-on .opts, .wiz-step.is-on .opt-grid, .wiz-step.is-on [role="radiogroup"], .wiz-step.is-on .opt-list:not(#catChips) { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .wiz-step.is-on .opt-list:not(#catChips) .opt:last-child:nth-child(3n+1) { grid-column: 1 / -1; } .wiz-foot-row { flex-direction: column-reverse; gap: 10px; } .wiz-foot-row .btn { width: 100%; } .doc { border-radius: 12px; } } @media (max-width: 768px) { .res-filter { display: flex; flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; gap: 8px; margin: 0 -16px 16px; padding: 0 16px 4px; } .res-filter::-webkit-scrollbar { display: none; } .res-filter > * { flex: none; white-space: nowrap; } } /* rail legend: pill and its line on one row; every pill visible on the grey card */ .rail-row { display: grid !important; grid-template-columns: auto minmax(0, 1fr); align-items: center; gap: 12px; padding: 12px 22px !important; margin: 0 -22px; border-top: 1px solid #E5E5EA; } .rail-row > span:last-child { font-size: 15px; line-height: 1.35; color: var(--ink-2); } .rail-legend .rail-row:first-of-type { border-top: 0; } .app-body .tag-long, .app-body .tag-longshot, .app-body .tag-far { background: #E5E5EA; color: #3A3A3C; } .rail-block { padding: 22px 22px 10px; } .rail-list li { padding: 10px 0; border-top: 1px solid #E5E5EA; font-size: 16px; } .rail-list li::before { width: 7px; height: 7px; } /* the small print in the rail's bottom-right corner */ @media (min-width: 1200px) { .rail { display: flex !important; flex-direction: column; min-height: 100vh; } .rail-foot { margin-top: auto !important; text-align: right; padding: 16px 22px 20px !important; } } .side .brand:hover, .side .side-brand:hover, .side .xrow-brand:hover, .side a.brand:hover { background: transparent !important; box-shadow: none !important; } @media (min-width: 1200px) { .rail { padding-bottom: 0 !important; } } /* the rail block: no background, sitting centred in the column */ .rail-card { background: transparent !important; margin: 4px auto 0 !important; width: calc(100% - 40px); } :root[data-theme="dark"] .rail-card { background: transparent !important; } /* ---------- Ask anything: a small sheet in the corner ---------- */ .ask { position: fixed; right: 20px; bottom: 20px; z-index: 60; width: min(400px, calc(100vw - 32px)); max-height: min(640px, calc(100vh - 40px)); display: flex; flex-direction: column; background: var(--card, #FFF); border: 1px solid var(--line); border-radius: 16px; box-shadow: 0 24px 60px rgba(0, 0, 0, .22); overflow: hidden; } .ask[hidden] { display: none; } .ask-head { display: flex; align-items: center; justify-content: space-between; padding: 14px 16px 12px 20px; border-bottom: 1px solid var(--line); } .ask-title { margin: 0; font-size: 18px; font-weight: 700; letter-spacing: -.01em; } .ask-log { flex: 1; overflow: auto; padding: 16px 20px; display: flex; flex-direction: column; gap: 10px; } .ask-note { margin: 0 0 6px; font-size: 14px; line-height: 1.45; color: var(--ink-3); } .ask-msg { max-width: 92%; padding: 10px 14px; border-radius: 14px; font-size: 16px; line-height: 1.45; white-space: pre-wrap; word-wrap: break-word; } .ask-msg.me { align-self: flex-end; background: var(--ink); color: var(--paper, #FFF); border-bottom-right-radius: 4px; } .ask-msg.bot { align-self: flex-start; background: #F5F5F7; color: var(--ink); border-bottom-left-radius: 4px; } :root[data-theme="dark"] .ask-msg.bot { background: #1A1A1A; } .ask-msg.wait { color: var(--ink-3); } .ask-form { display: flex; gap: 8px; padding: 12px 12px 12px 16px; border-top: 1px solid var(--line); } .ask-input { flex: 1; min-width: 0; height: 44px; padding: 0 14px; border: 1px solid var(--line-2, #D4D4D4); border-radius: 9999px; font: inherit; font-size: 16px; background: var(--card, #FFF); color: var(--ink); } .ask-input:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 113, 227, .18); } .ask-send { width: 44px; height: 44px; padding: 0; border-radius: 50%; display: inline-grid; place-items: center; } @media (max-width: 768px) { .ask { right: 12px; left: 12px; bottom: 76px; width: auto; max-height: calc(100vh - 100px); } } /* ---------- Help: the questions in a dialog, no page change ---------- */ .help { width: min(560px, calc(100vw - 32px)); max-height: min(720px, calc(100vh - 40px)); padding: 0; border: 1px solid var(--line); border-radius: 16px; background: var(--card, #FFF); color: var(--ink); box-shadow: 0 30px 80px rgba(0, 0, 0, .28); } .help::backdrop { background: rgba(0, 0, 0, .45); backdrop-filter: blur(4px); } .help-head { display: flex; align-items: center; justify-content: space-between; padding: 18px 16px 14px 24px; border-bottom: 1px solid var(--line); } .help-title { margin: 0; font-size: 22px; font-weight: 700; letter-spacing: -.015em; } .help-body { padding: 8px 24px 20px; overflow: auto; max-height: calc(min(720px, 100vh - 40px) - 70px); } .help-item { border-bottom: 1px solid var(--line); } .help-item summary { list-style: none; cursor: pointer; min-height: 56px; display: flex; align-items: center; font-size: 17px; font-weight: 600; letter-spacing: -.01em; } .help-item summary::-webkit-details-marker { display: none; } .help-item summary::after { content: ""; margin-left: auto; width: 8px; height: 8px; border-right: 2px solid var(--ink-3); border-bottom: 2px solid var(--ink-3); transform: rotate(45deg); transition: transform .2s ease; } .help-item[open] summary::after { transform: rotate(-135deg); } .help-item summary:hover { color: var(--accent); } .help-item p { margin: 0 0 16px; font-size: 16px; line-height: 1.5; color: var(--ink-2); } .help-more { margin: 18px 0 0; font-size: 15px; color: var(--ink-3); } .help-more a { color: var(--accent); } /* ---------- rail, cleaner: checklist with ticks, aligned legend, small print level with the sidebar tools ---------- */ .rail-block { padding: 24px 22px 8px; border-bottom: 0; } .rail-block .rail-title, .rail-legend .rail-title { font-size: 18px; margin-bottom: 8px; } .rail-list li { border: 0 !important; padding: 7px 0; font-size: 15px; gap: 12px; } .rail-list li::before { width: 18px; height: 18px; border-radius: 50%; background: rgba(0, 113, 227, .12) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%230071E3' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 9.5 17.5 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; } .rail-legend { padding: 8px 22px 12px; } .rail-row { display: grid !important; grid-template-columns: minmax(112px, max-content) minmax(0, 1fr); align-items: center; gap: 12px; padding: 7px 0 !important; margin: 0; border: 0 !important; } /* never below the English 112px, wider only when a translated label ("Poco probable") needs it */ .rail-row .tag { white-space: nowrap; } .rail-row > span:last-child { font-size: 15px; color: var(--ink-2); } @media (min-width: 1200px) { .rail-foot { padding: 0 22px 0 !important; margin-bottom: -2px; font-size: 14px; line-height: 44px; } } .scr-send-note { flex-basis: 100%; margin: 10px 0 0; font-size: 14px; line-height: 1.45; color: var(--ink-3); } /* rail: its first heading sits level with the Start row; the script has no box */ .rail-card { margin-top: 54px !important; } .rail .scr-lines { border: 0; background: transparent; padding: 0; margin-top: 14px; } @media (min-width: 1200px) { .rail { padding-bottom: 8px; } } /* the script's buttons stay in reach: pinned to the foot of the rail while the words scroll */ .rail .doc-foot { position: sticky; bottom: 0; z-index: 2; background: var(--paper, #FFF); padding: 12px 0 10px; margin-top: 8px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 8px; } .rail .doc-foot .btn { flex: 1 1 auto; } /* rail: headings and pills start on the tick's own edge; level with Start; no stray scroll */ .rail-card { margin-top: 50px !important; } .rail-block .rail-title, .rail-legend .rail-title { padding-left: 4px !important; } .rail-row { padding-left: 4px !important; } @media (min-width: 1200px) { .rail { overflow: hidden; } .rail:has(#detailPanel:not([hidden])) { overflow-y: auto; } } /* shelf rows: a quiet hover, the remove cross fades in at the right without moving anything */ .srow:hover, .srow:focus-within { background: rgba(0, 0, 0, .05); } .srow .srow-x { opacity: 0; transition: opacity .15s ease; } .srow:hover .srow-x, .srow:focus-within .srow-x { opacity: 1; } :root[data-theme="dark"] .srow:hover, :root[data-theme="dark"] .srow:focus-within { background: rgba(255, 255, 255, .07); } /* "Thinking…" carries a shine while the helper works */ .ask-msg.wait { color: transparent; background: linear-gradient(100deg, #8E8E93 20%, #F5F5F7 50%, #8E8E93 80%); background-size: 220% 100%; -webkit-background-clip: text; background-clip: text; animation: think-shine 1.6s linear infinite; } :root[data-theme="dark"] .ask-msg.wait { background-image: linear-gradient(100deg, #6E6E73 20%, #FFFFFF 50%, #6E6E73 80%); } @keyframes think-shine { from { background-position: 120% 0; } to { background-position: -120% 0; } } @media (prefers-reduced-motion: reduce) { .ask-msg.wait { animation: none; color: var(--ink-3); background: none; } } /* the rail always scrolls when its content is taller than the window (a script open in it); the empty state fits without a scrollbar */ @media (min-width: 1200px) { .rail { overflow-y: auto !important; overscroll-behavior: contain; scrollbar-width: thin; } .rail-card { margin-top: 46px !important; } .rail-foot { padding-bottom: 6px !important; } } .rail .doc-foot { padding-bottom: 12px; } .rail .doc-foot .btn { flex: 1 1 calc(50% - 8px); min-width: 0; } /* the rail's card is the scrolling part (the rail itself is a fixed column with the small print at its foot) */ @media (min-width: 1200px) { .rail { overflow: hidden !important; display: flex; flex-direction: column; } .rail-card { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; padding-bottom: 8px; } .rail-foot { flex: none; } } /* the script's buttons: a frosted bar attached to the foot of the rail, over the words */ @media (min-width: 1200px) { .rail .doc-foot { position: sticky; bottom: 0; margin: 0 -22px; padding: 14px 22px 16px; background: color-mix(in srgb, var(--paper, #FFF) 72%, transparent); backdrop-filter: blur(16px) saturate(1.4); -webkit-backdrop-filter: blur(16px) saturate(1.4); border-top: 1px solid color-mix(in srgb, var(--line) 70%, transparent); } .rail .scr-help { margin-bottom: 8px; } } :root[data-theme="dark"] .rail .doc-foot { background: rgba(10, 10, 10, .6); } /* the frosted bar is fixed to the rail's foot (just above the small print) and never moves; the card gets room underneath so the last line of the script can scroll clear of it */ @media (min-width: 1200px) { .rail { position: sticky; } .rail .doc-foot { position: absolute !important; left: 16px; right: 16px; bottom: 44px; margin: 0; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--line) 80%, transparent); box-shadow: 0 -8px 30px rgba(0, 0, 0, .06); } .rail-card:has(.doc-foot) { padding-bottom: 170px; } } /* planted at the very bottom of the rail, full width, blurred — and the small print steps aside while a script is open */ @media (min-width: 1200px) { .rail .doc-foot { left: 0 !important; right: 0 !important; bottom: 0 !important; border-radius: 0 !important; border: 0 !important; border-top: 1px solid color-mix(in srgb, var(--line) 80%, transparent) !important; box-shadow: none !important; padding: 14px 22px 18px !important; } .rail:has(.doc-foot) .rail-foot { display: none; } .rail-card:has(.doc-foot) { padding-bottom: 140px; } } /* no colour on the bar at all: just the blur of the words behind it */ @media (min-width: 1200px) { .rail .doc-foot { background: transparent !important; backdrop-filter: blur(22px) saturate(1.2) !important; -webkit-backdrop-filter: blur(22px) saturate(1.2) !important; border-top: 0 !important; } :root[data-theme="dark"] .rail .doc-foot { background: transparent !important; } } /* the rail's left edge is a drag handle: pull it to widen the panel (double-click resets) */ @media (min-width: 1200px) { .rail { position: sticky; } .rail-resize { position: absolute; left: -4px; top: 0; bottom: 0; width: 9px; cursor: col-resize; z-index: 5; background: transparent; border: 0; padding: 0; } .rail-resize::after { content: ""; position: absolute; left: 4px; top: 0; bottom: 0; width: 1px; background: var(--line); transition: background .15s ease, width .15s ease; } .rail-resize:hover::after, .rail-resize.is-dragging::after { width: 3px; left: 3px; background: var(--accent); } .app.is-resizing { user-select: none; cursor: col-resize; } } /* ---------- phones: nothing wider than the screen; the script's buttons ride above the tab bar ---------- */ @media (max-width: 768px) { .main, .app { overflow-x: clip; } .res-filter { margin: 0 0 16px !important; padding: 0 0 4px !important; max-width: 100%; } .doc-foot { position: sticky; bottom: 72px; z-index: 5; margin: 8px -16px 0; padding: 12px 16px 12px; background: transparent; backdrop-filter: blur(18px) saturate(1.2); -webkit-backdrop-filter: blur(18px) saturate(1.2); display: flex; flex-wrap: wrap; gap: 8px; } .doc-foot .btn { flex: 1 1 calc(50% - 8px); min-height: 48px; } .scr-help { margin-bottom: 6px; } } /* phones: the who / rule rows read as label then value, the source link stays on one line */ @media (max-width: 768px) { .scr-kv { display: grid; grid-template-columns: 1fr; gap: 12px; } .scr-kv > div { display: grid; gap: 4px; } .scr-kv dt { font-size: 14px; color: var(--ink-3); } .scr-kv dd { margin: 0; font-size: 16px; line-height: 1.45; } .scr-kv dd a { white-space: nowrap; } .scr-kv dd a svg { vertical-align: -2px; } } /* the rule document in the narrow rail: each fact reads as a small label over its value, full width */ @media (min-width: 1200px) { .rail .doc-body dl, .rail .doc-body .doc-kv, .rail .scr-kv { display: grid; grid-template-columns: 1fr; gap: 14px; margin: 16px 0; } .rail .doc-body dl > div, .rail .scr-kv > div { display: grid; grid-template-columns: 1fr; gap: 3px; } .rail .doc-body dt, .rail .scr-kv dt { font-size: 13px; font-weight: 600; letter-spacing: .04em; text-transform: uppercase; color: var(--ink-3); display: flex; align-items: center; gap: 6px; } .rail .doc-body dt svg, .rail .scr-kv dt svg { width: 14px; height: 14px; } .rail .doc-body dd, .rail .scr-kv dd { margin: 0; font-size: 16px; line-height: 1.5; color: var(--ink); } .rail .doc-body dd a { overflow-wrap: anywhere; } .rail .doc-body dd a svg { vertical-align: -2px; margin-left: 2px; } .rail .doc-body p, .rail .doc-body li { font-size: 16px; line-height: 1.5; } } /* the rail's shelf summary: three figures and the soonest deadline */ .rail-figs { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .rail-figs li { display: grid; gap: 2px; } .rail-figs b { font-size: 28px; font-weight: 700; letter-spacing: -.03em; line-height: 1.1; } .rail-figs span { font-size: 14px; line-height: 1.3; color: var(--ink-3); } .rail-next { margin: 14px 0 4px; font-size: 15px; line-height: 1.45; color: var(--ink-2); } .rail-sum[hidden] { display: none; } /* ================= phone pass (audit, 390 and 360 wide) ================= */ @media (max-width: 899.98px) { /* the sticky sub-header was see-through: the page read straight through its own title */ .pane-head { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; } .topbar { height: 48px; } /* Ask anything had no way in on a phone: its row lives in the hidden sidebar nav */ body[data-tab="help"] .side-nav { display: flex; } body[data-tab="help"] .side-nav > *:not(#askRow) { display: none; } body[data-tab="help"] #askRow { width: 100%; justify-content: flex-start; gap: 12px; min-height: 52px; padding: 0 12px; font-size: 18px; } body[data-tab="help"] .panel { display: flex; flex-direction: column; } body[data-tab="help"] .side-util { margin-bottom: auto; } /* shelf rows filled only their own text, leaving a ragged right edge */ .shelf-row { display: flex; } .shelf-row > .srow { flex: 1 1 auto; min-width: 0; } .srow-name { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .srow { align-items: flex-start; padding-top: 10px; padding-bottom: 10px; } .util-theme .theme-btn { margin-left: -22px; } } @media (max-width: 768px) { /* the head must stay one row: the back button was wrapping under the title */ .pane-head { flex-wrap: nowrap; gap: 12px; padding: 10px 16px; min-height: 64px; } .pane-head-main, .res-head .res-head-main { flex: 1 1 auto; order: 0; min-width: 0; } .res-head { flex-wrap: nowrap; } .res-head .res-ico { display: none; } .res-head .res-rename { margin-left: 0; } .res-head .res-edit { margin-left: 8px; } /* the chip row lost its inset to an !important margin */ .res-filter { margin: 0 -16px 16px !important; padding: 0 16px 4px !important; max-width: none; } /* the script's bar: enough ground that the words do not read through it */ /* on a phone the words must not read through the bar at all */ .doc-foot { background: var(--paper); backdrop-filter: none; -webkit-backdrop-filter: none; box-shadow: 0 -1px 0 var(--line); padding: 12px 16px calc(14px + env(safe-area-inset-bottom)); } :root[data-theme="dark"] .doc-foot { background: var(--paper); } /* photo thumbnails were centre-cropping landscape shots into noise */ .opt-ico img { object-position: 60% 55%; } .opt-list:has(.opt-ico img) .opt { justify-content: flex-start; padding-top: 14px; } .opt-list:has(.opt-ico img) .opt-label { margin-top: auto; } .opt-list .opt:not(:has(.opt-ico)) { min-height: 64px; } .opt-label { text-wrap: balance; } .rc-meta { text-wrap: pretty; } /* the Ask sheet is a dialog: give it a scrim and keep it clear of the tab bar */ .ask { bottom: calc(64px + env(safe-area-inset-bottom)); } .ask::before { content: ""; position: fixed; inset: 0; z-index: -1; background: rgba(0, 0, 0, .35); } .ask-note { font-size: 15px; line-height: 1.5; color: var(--ink-2); } .ask-form { padding-left: 20px; padding-right: 20px; } } /* ---------- Ask anything: a proper panel, not a small chat box ---------- */ .ask { width: min(560px, calc(100vw - 32px)); max-height: min(76vh, 760px); border-radius: 20px; } .ask-head { padding: 18px 16px 14px 24px; } .ask-title { font-size: 20px; } .ask-log { padding: 20px 24px; gap: 14px; } .ask-msg { max-width: 88%; font-size: 16px; padding: 12px 16px; } .ask-form { padding: 14px 16px 16px 20px; } .ask-input { height: 48px; font-size: 16px; } .ask-send { width: 48px; height: 48px; } /* the questions people actually start with, one tap each */ .ask-seeds { display: flex; flex-wrap: wrap; gap: 8px; margin: 2px 0 4px; } .ask-seed { border: 1px solid var(--line-2, #D4D4D4); background: var(--card, #FFF); color: var(--ink); border-radius: 9999px; min-height: 40px; padding: 0 14px; font: inherit; font-size: 15px; cursor: pointer; } .ask-seed:hover { border-color: var(--accent); color: var(--accent); } @media (max-width: 768px) { /* on a phone it is a sheet: full width, half the screen, above the tab bar */ .ask { left: 0; right: 0; bottom: 0; width: auto; max-height: 82vh; border-radius: 20px 20px 0 0; border-bottom: 0; } .ask-log { padding: 16px 20px; } .ask-form { padding: 12px 16px calc(16px + env(safe-area-inset-bottom)); } } .ask { min-height: min(560px, 70vh); } .ask-log { flex: 1; } /* the shelf row fills its column at every width: the hover tint used to stop wherever the text ended, and long names ellipsised with gutter to spare */ .shelf-row { display: flex; align-items: stretch; } .shelf-row > .srow { flex: 1 1 auto; min-width: 0; width: auto; } .wiz-paste { border: 0; background: none; padding: 0; font: inherit; color: var(--accent); text-decoration: underline; text-underline-offset: 2px; cursor: pointer; } .wiz-photo-note b { color: var(--ink); } /* the Ask panel can be moved: its head is the handle, Shift snaps it to a corner */ .ask-head { cursor: grab; touch-action: none; } .ask-head:active { cursor: grabbing; } .ask-head .ask-close, .ask-head .ask-title { cursor: auto; } .ask-grip { margin-left: auto; margin-right: 8px; color: var(--ink-3); display: inline-flex; } .ask.is-dragging { transition: none; user-select: none; } .ask.is-snapping { transition: left .18s cubic-bezier(.16, 1, .3, 1), top .18s cubic-bezier(.16, 1, .3, 1); } @media (max-width: 768px) { .ask-grip { display: none; } .ask-head { cursor: auto; } } /* ================= dark theme: the same night as the landing page ================= base.css tints the dark ground green; the landing settled on Vercel/Linear's plain black with #111 cards, #262626 hairlines and Apple's dark blue. The app follows it so the two halves of the product look like one product. */ :root[data-theme="dark"] .app-body { --paper: #000000; --paper-2: #0A0A0A; --paper-3: #141414; --card: #111111; --ink: #F5F5F7; --ink-2: #D4D4D8; --ink-3: #A1A1AA; --line: #262626; --line-2: #333333; --accent: #2997FF; --accent-soft: rgba(41, 151, 255, .18); --accent-line: rgba(41, 151, 255, .4); } :root[data-theme="dark"] .side { background: #0A0A0A; border-right-color: #262626; } :root[data-theme="dark"] .topbar, :root[data-theme="dark"] .tabbar { background: rgba(0, 0, 0, .82); border-color: #262626; } :root[data-theme="dark"] .pane-head { background: rgba(0, 0, 0, .92); } :root[data-theme="dark"] .rgroup-head { background: #141414; color: var(--ink-2); } :root[data-theme="dark"] .rail-card, :root[data-theme="dark"] .doc, :root[data-theme="dark"] .help, :root[data-theme="dark"] .ask { background: #111111; border-color: #262626; } :root[data-theme="dark"] .ask-msg.bot { background: #1A1A1A; } :root[data-theme="dark"] .ask-input, :root[data-theme="dark"] .wiz-input, :root[data-theme="dark"] .res-rename-input { background: #111111; border-color: #333333; color: var(--ink); } :root[data-theme="dark"] .opt { background: #111111; border-color: #262626; } :root[data-theme="dark"] .opt:hover { border-color: #3A3A3A; } :root[data-theme="dark"] .opt.is-on, :root[data-theme="dark"] .opt[aria-checked="true"] { border-color: var(--accent); background: rgba(41, 151, 255, .12); } :root[data-theme="dark"] .fchip { background: #141414; border-color: #262626; color: var(--ink-2); } :root[data-theme="dark"] .fchip[aria-pressed="true"], :root[data-theme="dark"] .fchip.is-on { background: #F5F5F7; color: #000; border-color: #F5F5F7; } /* the status pills keep their meaning, at night weights */ :root[data-theme="dark"] .app-body .tag-strong { background: rgba(22, 163, 74, .22); color: #7BE3A3; } :root[data-theme="dark"] .app-body .tag-maybe { background: rgba(180, 83, 9, .24); color: #F5C078; } :root[data-theme="dark"] .app-body .tag-long { background: #262626; color: #D4D4D8; } :root[data-theme="dark"] .rail-list li::before { background: rgba(41, 151, 255, .18) url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%232997FF' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M20 7 9.5 17.5 4 12'/%3E%3C/svg%3E") center / 11px no-repeat; } :root[data-theme="dark"] .corner-help { background: #111111; border-color: #262626; } :root[data-theme="dark"] .srow:hover, :root[data-theme="dark"] .srow:focus-within, :root[data-theme="dark"] .xrow:hover { background: rgba(255, 255, 255, .07); } :root[data-theme="dark"] .srow.is-on, :root[data-theme="dark"] .xrow.is-on { background: rgba(41, 151, 255, .14); } :root[data-theme="dark"] .doc-foot { background: rgba(0, 0, 0, .86); } @media (max-width: 768px) { :root[data-theme="dark"] .doc-foot { background: #000000; } } /* the model box stopped at the first column while the serial spanned both, so the two fields never lined up: give every field the whole row and let the two photo buttons share the row under them */ .wiz-fallback { grid-template-columns: 1fr 1fr; } .wiz-fallback > .wiz-input { grid-column: 1 / -1; } .wiz-photo-btn { width: 100%; } .wiz-serial { font-variant-numeric: tabular-nums; letter-spacing: .02em; } /* the item line may carry a serial, and half a serial is no use on the phone: let it wrap onto a second line instead of ellipsising */ .pane-sub, .res-meta { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } /* The region picker is an invisible