/* Design tokens lifted from the prototypes. Confidence has to read by weight, not by border style — dashed borders were the first thing to vanish in sunlight, so they aren't here. */ :root { --page: #e8e6e2; --surface: #fdfcfb; --surface-muted: #efedea; --ink: #14161a; --body: #3b3f46; --meta: #6b7280; --meta-on-dark: #c4c6ca; --line: #e4e1dc; --line-strong: #cbc7c1; --stone: #b6b1a9; --flag: #a82f18; --flag-soft: #ffd9d0; --flag-text: #ffe6e0; --good: #1c6b58; --good-soft: #bfe3d9; --good-text: #d6ece6; --tint-viability: #ffd9d0; --tint-inferred: #ffe6b8; --tint-confirmed: #d6ece6; --tint-ruled-out: #e9e7e4; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, Helvetica, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace; } * { margin: 0; padding: 0; box-sizing: border-box; } html, body { height: 100%; background: var(--page); font-family: var(--sans); color: var(--ink); -webkit-font-smoothing: antialiased; overscroll-behavior-y: none; } button, input, textarea, select { font: inherit; font-family: var(--sans); color: inherit; } button { cursor: pointer; } ::-webkit-scrollbar { width: 0; height: 0; } .mono { font-family: var(--mono); } .kicker { font-family: var(--mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--meta); } .kicker--flag { color: var(--flag); } .kicker--on-dark { color: var(--meta-on-dark); } .meta { font-family: var(--mono); font-size: 11px; color: var(--meta); } .hidden { display: none !important; } /* ---------------------------------------------------------------- app frame */ #app { height: 100%; } /* The phone frame fills whatever is left after the scaffold bar, so every wrapper between it and needs a resolved height or the pinned action bar falls off the screen. */ .app-root { height: 100%; display: flex; flex-direction: column; } .app-root > .phone { flex: 1 1 0; height: auto; min-height: 0; } .app-root > .desk { flex: 1 1 0; height: auto; min-height: 0; } .phone { height: 100%; max-width: 430px; margin: 0 auto; background: var(--surface); display: flex; flex-direction: column; position: relative; overflow: hidden; } .screen { flex: 1; display: flex; flex-direction: column; min-height: 0; } .screen__body { flex: 1; overflow-y: auto; padding: 0 14px 18px; display: flex; flex-direction: column; gap: 14px; -webkit-overflow-scrolling: touch; } .screen__head { padding: 12px 20px 14px; display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; flex-shrink: 0; } .screen__title { font-size: 25px; font-weight: 700; letter-spacing: -0.025em; } .screen__foot { border-top: 1px solid var(--line); background: var(--surface); padding: 13px 16px 14px; display: flex; flex-direction: column; gap: 9px; flex-shrink: 0; } .statusbar { display: flex; align-items: center; justify-content: space-between; padding: 10px 20px 0; font-family: var(--mono); font-size: 11px; color: var(--meta); flex-shrink: 0; } .statusbar--dark { color: var(--meta-on-dark); } .pending { display: flex; align-items: center; gap: 6px; background: var(--surface-muted); border: 0; border-radius: 20px; padding: 6px 10px; font-family: var(--mono); font-size: 11px; color: var(--ink); } .pending__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--flag); } .pending__dot--clear { background: var(--good); } /* ------------------------------------------------------------------ buttons */ .btn { border: 0; border-radius: 13px; background: var(--ink); color: #fff; font-size: 17px; font-weight: 600; min-height: 54px; padding: 0 16px; } .btn--flag { background: var(--flag); font-size: 18px; font-weight: 700; min-height: 58px; border-radius: 14px; } .btn--good { background: var(--good); } .btn--quiet { background: var(--surface); color: var(--body); border: 1px solid var(--line-strong); font-size: 15px; font-weight: 400; min-height: 46px; border-radius: 12px; } .btn--muted { background: var(--stone); } .btn:disabled { opacity: 0.55; } .btn-row { display: flex; gap: 9px; } .btn-row > * { flex: 1; } .backbtn { width: 36px; height: 36px; border: 1px solid var(--line-strong); border-radius: 9px; background: var(--surface); font-size: 16px; flex-shrink: 0; } .link { align-self: flex-start; border: 0; background: transparent; font-family: var(--mono); font-size: 11px; color: var(--meta); padding: 4px 0; } /* -------------------------------------------------------------------- cards */ .card { border: 1px solid var(--line-strong); border-radius: 12px; background: var(--surface); padding: 13px 14px; display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; } .card--soft { border-color: var(--line); } .card--dark { background: var(--ink); color: #fff; border: 0; border-radius: 14px; padding: 15px; gap: 9px; } .card--dark .card__title { color: #fff; } .card--good { background: var(--good); color: #fff; border: 0; border-radius: 12px; } .card--flag { border: 2px solid var(--flag); } .card--lead { border-left: 4px solid var(--flag); } .card__title { font-size: 17px; font-weight: 600; } .card__row { display: flex; justify-content: space-between; align-items: center; gap: 10px; } .chevron { font-size: 18px; color: #9ca3af; } /* A deal in a list. One line, name left, status right — the left edge stays a clean column so the list is scannable at arm's length. */ .dealrow { border: 1px solid var(--line); border-radius: 11px; background: var(--surface); padding: 14px; display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; text-align: left; } .dealrow__name { font-size: 16px; font-weight: 600; color: var(--ink); min-width: 0; } .dealrow__status { font-family: var(--mono); font-size: 11px; color: var(--meta); white-space: nowrap; flex-shrink: 0; } .dealrow__status--urgent { color: var(--flag); } /* The one that matters. Pinned at the top, visually louder than everything else on the screen: 27px on red. If a five-second look doesn't land on this, it isn't loud enough. */ .viability { background: var(--flag); border-radius: 14px; padding: 16px; display: flex; flex-direction: column; gap: 11px; box-shadow: 0 6px 18px rgba(168, 47, 24, 0.28); } .viability__label { font-size: 27px; font-weight: 700; color: #fff; line-height: 1.08; letter-spacing: -0.025em; } .viability__quote { font-family: var(--mono); font-size: 14px; color: var(--flag-text); line-height: 1.4; } .viability__note { font-size: 14px; color: var(--flag-text); line-height: 1.45; } .viability__support { font-family: var(--mono); font-size: 11px; color: var(--flag-text); border-top: 1px solid rgba(255, 255, 255, 0.25); padding-top: 9px; } /* Awaiting confirm: 18px on near-black. Present, clearly not settled. */ .confirm-item { background: var(--ink); border-radius: 12px; padding: 14px 15px; display: flex; gap: 12px; align-items: center; } .confirm-item__bar { width: 4px; align-self: stretch; background: var(--surface); border-radius: 2px; } .confirm-item__text { flex: 1; display: flex; flex-direction: column; gap: 3px; min-width: 0; } .confirm-item__label { font-size: 18px; font-weight: 600; color: #fff; letter-spacing: -0.01em; } .confirm-item__meta { font-family: var(--mono); font-size: 12px; color: var(--meta-on-dark); } .confirm-item__tick { width: 54px; height: 46px; border: 0; border-radius: 10px; background: var(--surface); color: var(--ink); font-size: 19px; flex-shrink: 0; } .confirm-item--good { background: var(--good); } .confirm-item--good .confirm-item__tick { color: var(--good); width: 50px; height: 44px; } /* Never came up: 15px on flat stone. Readable, quiet, not a to-do list. */ .gap-summary { background: var(--surface-muted); border-radius: 11px; padding: 12px 14px; font-size: 15px; color: var(--body); line-height: 1.4; } .stack { display: flex; flex-direction: column; gap: 9px; } .stack--tight { gap: 7px; } .section-head { display: flex; justify-content: space-between; align-items: center; padding: 0 4px; border: 0; background: transparent; width: 100%; } .rowlist { border: 1px solid var(--line); border-radius: 11px; overflow: hidden; background: var(--surface); } .rowlist__row { padding: 12px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; border-top: 1px solid var(--line); } .rowlist__row:first-child { border-top: 0; } .chip { font-family: var(--mono); font-size: 10px; color: #fff; background: var(--meta); padding: 4px 8px; border-radius: 5px; white-space: nowrap; } .chip--flag { background: var(--flag); } .chip--good { background: var(--good); } /* ------------------------------------------------------------------ capture */ .capture { flex: 1; background: var(--ink); display: flex; flex-direction: column; color: #fff; } .capture__head { padding: 16px 20px 0; display: flex; flex-direction: column; gap: 3px; } .capture__merchant { font-size: 19px; font-weight: 700; letter-spacing: -0.015em; } .capture__stage { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 26px; padding: 0 26px; } .capture__timer { font-family: var(--mono); font-size: 54px; letter-spacing: -0.02em; } .capture__hint { font-size: 16px; color: var(--meta-on-dark); text-align: center; line-height: 1.5; } .capture__foot { padding: 0 18px 26px; display: flex; flex-direction: column; gap: 11px; } .capture__consent { text-align: center; font-family: var(--mono); font-size: 11px; color: #8a8d93; } .capture__pad { width: 100%; min-height: 140px; background: #1c1f24; border: 1px solid #33373d; border-radius: 14px; padding: 14px; color: #fff; font-size: 16px; line-height: 1.5; resize: none; } .capture__pad::placeholder { color: #7d8189; } .wave { display: flex; align-items: flex-end; gap: 4px; height: 60px; } .wave__bar { width: 5px; border-radius: 3px; background: #4b5058; transition: height 0.18s linear; } .wave__bar:nth-child(4n + 3) { background: var(--flag); } .wave__bar:nth-child(2n) { background: #8a8d93; } .progress { width: 100%; height: 5px; border-radius: 3px; background: var(--line); overflow: hidden; } .progress__fill { height: 5px; border-radius: 3px; background: var(--ink); transition: width 0.2s linear; } .centre { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px; padding: 0 34px; text-align: center; } /* -------------------------------------------------------------------- tabs */ .tabs { border-top: 1px solid var(--line); background: var(--surface); padding: 10px 8px calc(8px + env(safe-area-inset-bottom, 0px)); display: flex; justify-content: space-around; gap: 6px; flex-shrink: 0; } .tab { flex: 1; border: 0; background: transparent; border-radius: 16px; display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 6px 0; position: relative; color: var(--line-strong); } .tab--on { color: var(--ink); } .tab__glyph { width: 20px; height: 20px; border-radius: 5px; background: currentColor; } .tab__glyph--round { border-radius: 50%; } .tab__label { font-family: var(--mono); font-size: 10px; } .tab__badge { position: absolute; top: -3px; right: 24px; min-width: 17px; height: 17px; border-radius: 9px; background: var(--flag); color: #fff; font-family: var(--mono); font-size: 10px; display: flex; align-items: center; justify-content: center; padding: 0 4px; } /* ------------------------------------------------------------------ sheets */ .sheet-scrim { position: absolute; inset: 0; background: rgba(20, 22, 26, 0.4); display: flex; align-items: flex-end; z-index: 20; } .sheet { width: 100%; background: var(--surface); border-radius: 22px 22px 0 0; padding: 18px 18px calc(26px + env(safe-area-inset-bottom, 0px)); display: flex; flex-direction: column; gap: 13px; max-height: 96%; overflow-y: auto; } .sheet__grip { width: 38px; height: 4px; border-radius: 2px; background: var(--line-strong); align-self: center; } .sheet__title { font-size: 21px; font-weight: 700; letter-spacing: -0.015em; } /* One tap, never a form. */ .reason { border: 1px solid var(--line-strong); border-radius: 10px; background: var(--surface); padding: 13px; display: flex; justify-content: space-between; align-items: center; gap: 10px; font-size: 15px; font-weight: 600; text-align: left; width: 100%; } .reason--on { background: var(--ink); color: #fff; border-color: var(--ink); } .draft { border: 1px dashed var(--stone); border-radius: 10px; padding: 12px 13px; display: flex; flex-direction: column; gap: 5px; } .draft__body { font-size: 13px; color: var(--body); line-height: 1.45; } .field { display: flex; flex-direction: column; gap: 6px; } .field input, .field textarea { min-height: 50px; border: 2px solid var(--ink); border-radius: 10px; background: var(--surface); padding: 12px 13px; font-size: 16px; } .quote { font-family: var(--mono); font-size: 12px; color: var(--body); line-height: 1.45; border-left: 2px solid var(--stone); padding-left: 10px; } .toast { position: absolute; left: 14px; right: 14px; bottom: 88px; background: var(--ink); color: #fff; border-radius: 11px; padding: 12px 14px; font-family: var(--mono); font-size: 12px; z-index: 30; box-shadow: 0 8px 24px rgba(20, 22, 26, 0.25); } .toast--flag { background: var(--flag); } .toast--good { background: var(--good); } /* --------------------------------------------------------------- desk view */ .desk { display: none; } /* Which surface you get. Narrow viewports are always the phone — the desk layout has no business on a handset. Wide viewports default to the desk, but the mode can be overridden, because demoing the phone on a laptop or a projector is a real thing people need to do and "resize your window" is not an answer. */ @media (min-width: 1100px) { body.mode-auto .phone, body.mode-desk .phone { display: none; } body.mode-auto .desk, body.mode-desk .desk { display: block; } body.mode-phone .desk { display: none; } /* Forced phone on a big screen: render it as a device rather than a tall column, and scale up to whatever vertical room there is so the back row can read it. --demo-scale is set in app.js, clamped to [1, 1.35]. */ body.mode-phone .app-root { background: var(--page); padding: 0 20px 20px; } body.mode-phone .phone { flex: none; width: 390px; height: 844px; /* --scaffold-h is measured in app.js; the bar is real layout now, so the frame has to subtract it rather than assume the full viewport. */ max-height: calc(100vh - var(--scaffold-h, 44px) - 40px); margin: auto; /* centres the frame in the space below the bar */ border-radius: 38px; box-shadow: 0 18px 50px rgba(20, 22, 26, 0.22); transform: scale(var(--demo-scale, 1)); transform-origin: center center; } } /* Demo scaffolding, not product — a bar above the app at every browser size, so the override exists wherever you are instead of vanishing exactly when the auto-switch kicks in. */ /* One bar, every width. These used to pin to the top corners on wide viewports, which put them directly on top of the desk's own header — the pills covered "Review / Admin" on one side and the library version on the other. A bar above the app cannot collide with anything inside it. */ .scaffold { display: flex; align-items: center; justify-content: space-between; /* Wraps rather than overflowing: the two pills together are wider than a 320px viewport. applyDemoScale measures the bar's real height, so a second row costs the phone frame nothing. */ flex-wrap: wrap; gap: 8px 12px; padding: 9px 14px; background: var(--page); border-bottom: 1px solid var(--line-strong); flex-shrink: 0; } @media (max-width: 400px) { .scaffold { padding: 8px 10px; gap: 8px; } } /* .scaffold parent bumps specificity over the base display:none rules, which appear later in this file. */ .scaffold .viewswitch, .scaffold .modeswitch { display: flex; } /* The override is honoured at every width, not only where the media query used to allow it. Forcing Desk on a narrow window shows the desk layout with horizontal scroll — an override means what it says. */ body.mode-desk .phone { display: none; } body.mode-desk .desk { display: block; } body.mode-phone .desk { display: none; } /* Both: phone and desk side by side, one shared state — a tap on either surface updates the other, because they render from the same store. zoom (not transform) so the scaled panels still take part in layout. */ body.mode-both .app-root { display: grid; grid-template-columns: auto 1fr; grid-template-rows: auto 1fr; column-gap: 16px; padding: 0 20px 20px; background: var(--page); overflow: hidden; } body.mode-both .scaffold { grid-column: 1 / -1; margin: 0 -20px; } body.mode-both .phone { display: flex; flex: none; width: 390px; height: 844px; zoom: var(--both-phone-zoom, 1); margin-top: 20px; border-radius: 38px; box-shadow: 0 18px 50px rgba(20, 22, 26, 0.22); overflow: hidden; align-self: start; } body.mode-both .desk { display: block; zoom: var(--both-desk-zoom, 1); height: var(--both-desk-h, auto); min-height: 0; overflow: auto; padding: 20px 4px 4px; } body.mode-both .desk .desk__shell { min-width: 0; max-width: none; } .desk { overflow: auto; } .desk__shell { min-width: 1180px; } /* Pill styling lives on the base rules; .scaffold turns them on. */ .viewswitch { display: none; gap: 3px; padding: 3px; background: #dedbd6; border-radius: 9px; } .viewswitch__btn { height: 28px; padding: 0 11px; border: 0; border-radius: 7px; background: transparent; color: var(--body); font-family: var(--mono); font-size: 11px; letter-spacing: 0.04em; } .viewswitch__btn--on { background: var(--ink); color: #fff; } .viewswitch__btn:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; } /* Demo / Explore. Values lifted from the guided demo's own segmented pill: #E7E3DC track, 2px padding, 26px segments, active #1A1C20 on white. */ .modeswitch { display: none; gap: 3px; padding: 2px; background: #E7E3DC; border-radius: 7px; } .modeswitch__btn { height: 26px; display: inline-flex; align-items: center; padding: 0 11px; border: 0; border-radius: 5px; background: transparent; color: #6B665C; font-family: var(--sans); font-size: 12px; font-weight: 400; text-decoration: none; white-space: nowrap; cursor: pointer; } .modeswitch__btn--on { background: #1A1C20; color: #fff; font-weight: 600; cursor: default; } .modeswitch__btn:focus-visible { outline: 2px solid var(--flag); outline-offset: 2px; } .desk { height: 100%; background: var(--page); padding: 24px; overflow-y: auto; } .desk__shell { max-width: 1400px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 12px; overflow: hidden; box-shadow: 0 18px 50px rgba(20, 22, 26, 0.12); } .desk__bar { background: var(--ink); color: #fff; padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 16px; } .desk__tabs { display: flex; gap: 4px; } .desk__tab { border: 0; background: transparent; color: var(--meta-on-dark); border-radius: 7px; padding: 7px 13px; font-size: 13px; font-weight: 600; } .desk__tab--on { background: #3b3f46; color: #fff; } .desk__grid { display: flex; align-items: stretch; min-height: 720px; } .desk__rail { width: 290px; border-right: 1px solid var(--line); display: flex; flex-direction: column; flex-shrink: 0; } .desk__rail--right { width: 340px; border-right: 0; border-left: 1px solid var(--line); } .desk__railhead { padding: 16px 16px 12px; border-bottom: 1px solid var(--line); display: flex; flex-direction: column; gap: 3px; } .desk__railbody { flex: 1; overflow-y: auto; padding: 10px; display: flex; flex-direction: column; gap: 8px; } .desk__railfoot { border-top: 1px solid var(--line); padding: 14px 16px; display: flex; flex-direction: column; gap: 8px; } .desk__main { flex: 1; display: flex; flex-direction: column; min-width: 0; } .desk__mainhead { padding: 16px 20px 14px; border-bottom: 1px solid var(--line); display: flex; align-items: flex-start; justify-content: space-between; gap: 20px; } .desk__mainbody { flex: 1; overflow-y: auto; padding: 16px 20px 22px; display: flex; flex-direction: column; gap: 16px; } .desk__title { font-size: 21px; font-weight: 700; letter-spacing: -0.02em; } .queue-item { border: 1px solid var(--line); border-left: 4px solid var(--line-strong); border-radius: 9px; background: var(--surface); padding: 11px 12px; display: flex; flex-direction: column; gap: 4px; text-align: left; width: 100%; } .queue-item--on { border-color: var(--ink); background: var(--surface-muted); } .queue-item--open { border-left-color: var(--flag); } .queue-item--ready { border-left-color: var(--good); } .extract-row { border: 1px solid var(--line); border-radius: 9px; background: var(--surface); padding: 12px 14px; display: flex; align-items: center; gap: 14px; } .extract-row--viability { border-color: var(--flag); } .extract-row--on { border-color: var(--ink); background: var(--surface-muted); } .extract-row__main { flex: 1; border: 0; background: transparent; padding: 0; display: flex; flex-direction: column; gap: 3px; text-align: left; min-width: 0; } .extract-row__label { font-size: 15px; font-weight: 600; } .smallbtn { height: 36px; padding: 0 14px; border: 1px solid var(--ink); border-radius: 8px; background: var(--ink); color: #fff; font-size: 13px; font-weight: 600; white-space: nowrap; } .smallbtn--quiet { background: var(--surface); color: var(--body); border-color: var(--line-strong); font-weight: 400; } .tinybtn { height: 30px; padding: 0 10px; border: 1px solid var(--line-strong); border-radius: 6px; background: var(--surface); color: var(--body); font-family: var(--mono); font-size: 10px; } .tinybtn--on { background: var(--ink); color: #fff; border-color: var(--ink); } .tinybtn--flag { background: var(--flag); color: #fff; border-color: var(--flag); } .panel { border: 1px solid var(--line); border-radius: 10px; overflow: hidden; } .panel__head { background: var(--surface-muted); padding: 9px 14px; display: flex; justify-content: space-between; align-items: center; gap: 12px; } .panel__body { padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; } .transcript { padding: 14px; overflow-y: auto; font-family: var(--mono); font-size: 13px; line-height: 1.75; color: var(--body); max-height: 46px; transition: max-height 0.2s ease; } .transcript--open { max-height: 360px; } .transcript mark { border-radius: 3px; padding: 1px 0; color: var(--ink); background: var(--tint-inferred); } .transcript mark.is-viability { background: var(--tint-viability); } .transcript mark.is-confirmed { background: var(--tint-confirmed); } .transcript mark.is-not_needed { background: var(--tint-ruled-out); } .legend { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; padding: 9px 14px; border-top: 1px solid var(--line); } .legend__item { display: flex; align-items: center; gap: 6px; font-family: var(--mono); font-size: 10px; color: var(--meta); } .legend__swatch { width: 11px; height: 11px; border-radius: 2px; display: block; } .writerow { display: flex; justify-content: space-between; gap: 10px; font-family: var(--mono); font-size: 11px; color: var(--body); } .writerow span:last-child { color: var(--ink); text-align: right; } .setup { max-width: 640px; margin: 0 auto; padding: 32px 20px 48px; display: flex; flex-direction: column; gap: 18px; } .setup input { width: 100%; height: 46px; border: 1px solid var(--line-strong); border-radius: 9px; padding: 0 12px; background: var(--surface); font-size: 15px; } @media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }