/* ============================================================================= * styles.css * * Three parts, in this order: * 1. the tokens, from build.mjs DARK (5-12), LIGHT (13-20), vars() (21) and * the four deep spare hues out of READY (29-43) * 2. BASE_CSS, from build.mjs 574-622, ported rule for rule * 3. the component CSS: the design's inline styles, lifted out of the * component functions into the class names those functions keep * * THEMES. The design paints a wrapper `.theme-dark` or `.theme-light`, because * an artboard is told which one to draw. The app has no such prop, so: * :root dark, the base * @media (prefers-color-scheme: light) follow the system, unless a * :root:not([data-theme="dark"]) choice was made * [data-theme="light"] / [data-theme="dark"] the Appearance tile's choice, * which wins in both directions * state.js writes the attribute and remembers it per browser (SPEC.md 0). * ========================================================================== */ /* ============================================================ 1. the tokens */ :root { color-scheme: dark; /* build.mjs:5-12, DARK */ --bg: #0d1013; --surface: #15191c; --surface-2: #1e2226; --line: #2e3339; --line-soft: #232830; --text: #f3f2ee; --text-2: #a6abb1; --text-3: #757b81; --ok: #41dca5; --ok-bg: rgba(65,220,165,0.12); --due: #fdca3a; --due-bg: rgba(253,202,58,0.12); --due-ink: #fdca3a; --danger: #ff655a; --danger-ink: #0d1013; --btn-bg: var(--ok); --btn-text: var(--bg); --c-cell: #00aaab; --c-ins: #d17746; --c-util: #8c7dd5; --c-net: #cf6872; --c-ent: #348dcf; --c-fit: #909b2f; --c-soft: #c96fa4; --c-shop: #48a260; --c-gov: #b78512; --c-other: #757b81; /* build.mjs:39-42, the four deep spares. At the main lightness the hue wheel is full at nine, so these step deeper (L 0.50 instead of 0.65). */ --c-rust: #a54a24; --c-sea: #007a59; --c-plum: #874e99; --c-olive: #636a00; /* build.mjs:604 carries this shadow inline with a light-theme override; it is a token here so the rule below can stay a single rule. */ --shadow-seg: 0 1px 2px rgba(0,0,0,0.25); --shadow-pop: 0 8px 24px rgba(0,0,0,0.35); --shadow-menu: 0 16px 40px rgba(0,0,0,0.35); --shadow-sheet: 0 -16px 40px rgba(0,0,0,0.4); --shadow-dialog: 0 24px 60px rgba(0,0,0,0.5); --scrim: rgba(0,0,0,0.55); } /* build.mjs:13-20, LIGHT. One list, written once, referenced twice below. */ @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) { color-scheme: light; --bg: #f8f7f4; --surface: #ffffff; --surface-2: #efeeea; --line: #d9d7d3; --line-soft: #e6e4df; --text: #0e1216; --text-2: #50565c; --text-3: #757b81; --ok: #00885e; --ok-bg: rgba(0,136,94,0.10); --due: #b07100; --due-bg: rgba(176,113,0,0.10); --due-ink: #8a5800; --danger: #a50210; --danger-ink: #f8f7f4; --btn-bg: var(--ok); --btn-text: var(--bg); --c-cell: #009294; --c-ins: #c86830; --c-util: #6a57b3; --c-net: #be525f; --c-ent: #006eb3; --c-fit: #7e8900; --c-soft: #b2548d; --c-shop: #1c8742; --c-gov: #a16c00; --c-other: #757b81; --c-rust: #953400; --c-sea: #006c4b; --c-plum: #77398a; --c-olive: #565c00; --shadow-seg: 0 1px 2px rgba(0,0,0,0.10); } } [data-theme="light"] { color-scheme: light; --bg: #f8f7f4; --surface: #ffffff; --surface-2: #efeeea; --line: #d9d7d3; --line-soft: #e6e4df; --text: #0e1216; --text-2: #50565c; --text-3: #757b81; --ok: #00885e; --ok-bg: rgba(0,136,94,0.10); --due: #b07100; --due-bg: rgba(176,113,0,0.10); --due-ink: #8a5800; --danger: #a50210; --danger-ink: #f8f7f4; --btn-bg: var(--ok); --btn-text: var(--bg); --c-cell: #009294; --c-ins: #c86830; --c-util: #6a57b3; --c-net: #be525f; --c-ent: #006eb3; --c-fit: #7e8900; --c-soft: #b2548d; --c-shop: #1c8742; --c-gov: #a16c00; --c-other: #757b81; --c-rust: #953400; --c-sea: #006c4b; --c-plum: #77398a; --c-olive: #565c00; --shadow-seg: 0 1px 2px rgba(0,0,0,0.10); } [data-theme="dark"] { color-scheme: dark; --bg: #0d1013; --surface: #15191c; --surface-2: #1e2226; --line: #2e3339; --line-soft: #232830; --text: #f3f2ee; --text-2: #a6abb1; --text-3: #757b81; --ok: #41dca5; --ok-bg: rgba(65,220,165,0.12); --due: #fdca3a; --due-bg: rgba(253,202,58,0.12); --due-ink: #fdca3a; --danger: #ff655a; --danger-ink: #0d1013; --btn-bg: var(--ok); --btn-text: var(--bg); --c-cell: #00aaab; --c-ins: #d17746; --c-util: #8c7dd5; --c-net: #cf6872; --c-ent: #348dcf; --c-fit: #909b2f; --c-soft: #c96fa4; --c-shop: #48a260; --c-gov: #b78512; --c-other: #757b81; --c-rust: #a54a24; --c-sea: #007a59; --c-plum: #874e99; --c-olive: #636a00; --shadow-seg: 0 1px 2px rgba(0,0,0,0.25); } /* ============================================================ 2. BASE_CSS * build.mjs:574-622. The design applies these under `.app`; the app is the * whole page, so they hang off body. * ========================================================================= */ html { background: var(--bg); } body { margin: 0; font-family: 'Instrument Sans', system-ui, -apple-system, 'Segoe UI', sans-serif; color: var(--text); background: var(--bg); -webkit-font-smoothing: antialiased; font-size: 15px; line-height: 1.4; box-sizing: border-box; min-height: 100dvh; } *, *::before, *::after { box-sizing: border-box; } a { color: inherit; text-decoration: none; } /* UNIT 5 TOOK `color: inherit` OFF THE HOVER RULE, and it is a fix rather than a taste. build.mjs:576 carries both, which costs a static artboard nothing. In a live page `a:hover` is specificity 0-0-1-1 and beats `.btn`'s 0-0-1-0, so hovering ANY anchor drawn as a button re-inherited the body's text colour and painted near-white text on a near-white button: the label vanished under the cursor. The rule above already stops the browser's blue, so the hover rule never needed to say it twice. Found at 375 on the Categories footer, where the pointer happens to rest on the button after a tap. */ a:hover { text-decoration: underline; } button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; } .num { font-family: 'Azeret Mono', ui-monospace, 'SF Mono', Menlo, Consolas, monospace; font-variant-numeric: tabular-nums lining-nums; letter-spacing: -0.02em; } .fig { font-variant-numeric: lining-nums; } .eyebrow { font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-3); font-weight: 600; } .h1 { font-size: 28px; font-weight: 600; letter-spacing: -0.02em; line-height: 1.15; } .muted { color: var(--text-2); } .faint { color: var(--text-3); } .strong { font-weight: 600; } .ok-ink { color: var(--ok); display: inline-flex; } .due-ink { color: var(--due-ink); font-weight: 500; } .card { background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; } /* THE PRIMARY BUTTON IS MINT, app wide, his call on 2026-09-15 after seeing it beside the rest. The design drew it as the inverse of the page, and on dark that near-white block was the loudest thing on screen, pulling the eye off the figures the app exists to show. It is written as var(--ok) rather than a hex so it follows the theme by itself: bright mint on dark with near-black text, deep green on light with near-white text, the same pair the tick marks and the avatars use. */ .btn { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 16px; border-radius: 8px; font-weight: 600; font-size: 14px; background: var(--btn-bg); color: var(--btn-text); white-space: nowrap; } .btn:hover { text-decoration: none; } .btn-ghost { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 14px; border-radius: 8px; font-weight: 600; font-size: 14px; background: transparent; color: var(--text); border: 1px solid var(--line); white-space: nowrap; } .btn-ghost:hover { text-decoration: none; } .iconbtn { display: inline-flex; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; color: var(--text-2); border: 1px solid var(--line-soft); background: var(--surface); } /* The top bar's Settings gear, in the brand's mint (his call, 2026-09-19). The icon strokes in currentColor, so the colour goes on the button. Written after .iconbtn on purpose: same weight, so the later rule wins. */ .settings-btn { color: var(--ok); } .tab { height: 36px; display: inline-flex; align-items: center; padding: 0 12px; border-radius: 8px; font-weight: 500; color: var(--text-2); } .tab.on { color: var(--text); background: var(--surface-2); font-weight: 600; } .chip { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px; border-radius: 6px; border: 1px solid var(--line); color: var(--text-2); font-size: 13px; font-weight: 500; white-space: nowrap; } .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); } .chip .n { opacity: 0.7; font-weight: 600; } .dot { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; } .pill { display: inline-flex; align-items: center; gap: 6px; height: 24px; padding: 0 8px; border-radius: 6px; font-size: 12px; font-weight: 600; white-space: nowrap; } .pill-ok { background: var(--ok-bg); color: var(--ok); } .pill-due { background: var(--due-bg); color: var(--due-ink); } .pill-plain { background: var(--surface-2); color: var(--text-2); } .pill-year { border: 1px solid var(--line); color: var(--text-2); } .ring { width: 8px; height: 8px; border-radius: 2px; border: 2px solid var(--due); flex: none; display: inline-block; } .cents { font-size: 0.5em; font-weight: 500; color: var(--text-2); letter-spacing: 0; } .field { display: flex; flex-direction: column; gap: 6px; } .lbl { font-size: 13px; font-weight: 600; color: var(--text-2); gap: 4px; } .input { height: 48px; display: flex; align-items: center; gap: 10px; padding: 0 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 16px; color: var(--text); width: 100%; text-align: left; } .input:focus, .input.focus, .input:focus-within { border-color: var(--text); box-shadow: 0 0 0 3px var(--surface-2); outline: none; } .hint { font-size: 12.5px; color: var(--text-3); line-height: 1.4; } /* build.mjs:608. A caveat that runs to a second line stays readable as a block rather than reflowing around whatever sits beside it. */ .tipline { display: block; line-height: 1.6; } .seg { display: flex; padding: 3px; border-radius: 8px; background: var(--surface-2); gap: 2px; } .seg > div { flex: 1; height: 42px; display: flex; align-items: center; justify-content: center; gap: 8px; border-radius: 6px; font-weight: 600; font-size: 14px; color: var(--text-2); } .seg > div.on { background: var(--surface); color: var(--text); box-shadow: var(--shadow-seg); } .row { display: flex; align-items: center; } .tick { width: 8px; height: 8px; border-radius: 2px; flex: none; display: inline-block; } .hatch { background-image: repeating-linear-gradient(135deg, currentColor 0 2px, transparent 2px 5px); opacity: 0.75; } /* build.mjs:610 and 613. The four tab bar. The design draws it inside a 390x880 frame with position: absolute; the app runs at the size of the screen, so it is fixed to the bottom edge and pushed clear of the home indicator. THE 44px MINIMUM IS THE RULE, not the decoration (SPEC.md 5). */ .tab-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 4; height: 86px; padding: 8px 8px max(30px, env(safe-area-inset-bottom)); display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 4px; background: var(--surface); border-top: 1px solid var(--line-soft); } .tab-bar > * { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 11px; font-weight: 600; color: var(--text-3); border-radius: 8px; min-height: 44px; } .tab-bar > *.on { color: var(--text); } .tab-bar > *:hover { text-decoration: none; } @keyframes rise { from { opacity: 0; transform: translateY(6px) } to { opacity: 1; transform: none } } .rise { animation: rise 420ms cubic-bezier(.2,.7,.2,1) both; } @media (prefers-reduced-motion: reduce) { .rise { animation: none; } } /* =================================================== 3. the app's own shell * One markup tree, responsive by CSS (SPEC.md section 5). The desktop bar * appears at 900px and the phone bars go away; nothing re-renders. * ========================================================================= */ #app { display: flex; flex-direction: column; min-height: 100dvh; } /* router.js shell(): one fresh wrapper per render, so a screen's listeners die with the screen. It must not be a box of its own. */ .app-tree { display: contents; } /* THE LOADING SIGN (router.js, waitStart). A line along the top edge while a screen is being fetched, shown only once that has taken longer than a moment. MINT: it is the app taking care of something, and it asks nothing of the person, which is the test amber fails (WHAT AMBER MEANS, above). It sits over everything and takes no taps. With motion reduced it is a still line. */ .loadbar { position: fixed; top: env(safe-area-inset-top, 0px); left: 0; right: 0; height: 3px; z-index: 60; pointer-events: none; overflow: hidden; opacity: 0; transition: opacity 120ms; } .loadbar::before { content: ""; position: absolute; top: 0; bottom: 0; left: 0; width: 40%; border-radius: 3px; background: var(--ok); transform: translateX(-100%); } .is-loading .loadbar { opacity: 1; } .is-loading .loadbar::before { animation: loadbar 1100ms ease-in-out infinite; } @keyframes loadbar { from { transform: translateX(-100%); } to { transform: translateX(250%); } } @media (prefers-reduced-motion: reduce) { .is-loading .loadbar::before { animation: none; width: 100%; transform: none; opacity: 0.8; } } .broke-actions { gap: 10px; flex-wrap: wrap; margin-top: 4px; } /* The invisible number field that raises the phone's keypad ahead of the PIN pane (ui.js wireKeypadAhead). It has to be a real, focusable field, so it is not display: none; 16px keeps an iPhone from zooming in on it. */ .keypad-ahead { position: fixed; top: 0; left: 0; width: 1px; height: 1px; padding: 0; border: 0; opacity: 0; font-size: 16px; pointer-events: none; } /* A TAP SHOWS AT ONCE. On a phone there is no pointer to hover with, so until the next screen arrives nothing said the tap was felt, and the phone's own grey flash over the whole row is the wrong colour on both themes. What is pressed dims while the finger is on it. Touch screens only: a mouse already has hover. main.js adds the empty touchstart listener an iPhone needs before it will apply :active at all. */ html { -webkit-tap-highlight-color: transparent; } @media (hover: none) { a:active, button:active, [role="button"]:active, [data-tick]:active, summary:active { opacity: 0.55; transition: opacity 0ms; } } .screen { display: flex; flex-direction: column; flex: 1; } /* Room for the fixed tab bar, on the screens that have one. */ .screen.has-tabs { padding-bottom: 86px; } .pad { padding: 16px 16px 24px; display: flex; flex-direction: column; gap: 18px; } /* The bar: the mark, then the name. inline-flex rather than the plain span it was, so the two sit on one baseline and the gap is a gap rather than a space character. The mark carries no glow here: at 26px the drawing is mostly the white card, which has all the contrast it needs against either surface, and a glow that small reads as a smudge. */ .wordmark { display: inline-flex; align-items: center; gap: 7px; font-weight: 700; font-size: 17px; letter-spacing: -0.01em; } /* The name is ONE flex child, not two. A gap on the row applies between every child, so with the two tone spans loose in here it opened a space inside the word and the bar read "Leech list". */ .brand-word { white-space: nowrap; } .bar-logo { width: 32px; height: 32px; flex: none; object-fit: contain; display: block; } /* The bar mark gets the same treatment as the big one on the front door, at a radius that suits 32px: green on dark, nothing on light. Without it the leech is near-black on a near-black bar and the drawing goes muddy, which is the same problem the front door had and the same answer. Stronger than this reads as a notification badge rather than a logo, at this size. */ :root { --bar-glow: drop-shadow(0 0 5px rgba(65, 220, 165, 0.40)) drop-shadow(0 0 2px rgba(65, 220, 165, 0.28)); } .bar-logo { filter: var(--bar-glow); } @media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .bar-logo { filter: none; } } [data-theme="light"] .bar-logo { filter: none; } [data-theme="dark"] .bar-logo { filter: var(--bar-glow); } @media (prefers-reduced-transparency: reduce) { .bar-logo { filter: none; } } /* build.mjs:677-695, the desktop bar. Hidden below 900px. */ .topbar { display: none; height: 64px; padding: 0 40px; justify-content: space-between; border-bottom: 1px solid var(--line-soft); } .topbar-left { gap: 28px; } .topbar-tabs { gap: 4px; } .topbar-right { gap: 10px; } /* build.mjs:1188-1191 and 1192-1196, the phone bars. */ .mobile-top { height: 56px; padding: 0 16px; justify-content: space-between; } .mobile-top-right { gap: 6px; margin-right: -6px; } .mobile-add { height: 40px; padding: 0 12px 0 10px; gap: 6px; } .profile-btn-m { width: 44px; height: 44px; justify-content: center; } .mobile-nav { height: 56px; padding: 0 8px 0 4px; justify-content: space-between; } .mobile-back { gap: 2px; height: 44px; padding: 0 8px; font-weight: 500; color: var(--text-2); } .mobile-nav-title { font-weight: 600; } .mobile-nav-right { width: 72px; justify-content: flex-end; } .more-btn-m { width: 44px; height: 44px; justify-content: center; color: var(--text-2); } @media (min-width: 900px) { .topbar { display: flex; } .mobile-top, .mobile-nav, .tab-bar { display: none; } .screen.has-tabs { padding-bottom: 0; } .pad { padding: 36px 40px 48px; gap: 36px; } } /* ---------------------------------------------------------- the front door * build.mjs:2760-2764 (desktop authFrame and authCard) and 2830-2831 (the * phone's). One tree: the phone gets the bare column, the desktop gets the * same column centred inside a card. * ------------------------------------------------------------------------ */ .auth-top { height: 56px; padding: 0 16px; flex: none; } .auth-wrap { flex: 1; display: flex; flex-direction: column; padding: 24px 20px 0; } .auth-card { display: flex; flex-direction: column; gap: 22px; width: 100%; } .auth-head { display: flex; flex-direction: column; gap: 6px; } /* The boards draw the heading and the sentence as spans 6px apart; an h1 and a p carry browser margins that would double that. */ .auth-card h1, .auth-card p, .page-head h1, .page-head p { margin: 0; } .auth-card .h1 { font-size: 26px; } .auth-intro { font-size: 14.5px; } .auth-card .input { height: 50px; } .auth-card .btn { height: 50px; justify-content: center; font-size: 16px; } .auth-card .btn svg { width: 18px; height: 18px; } .auth-links { justify-content: space-between; } .auth-links a { font-size: 14px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; } .auth-rule { height: 1px; background: var(--line-soft); } .auth-out { font-size: 13.5px; font-weight: 500; text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; } .back-link { gap: 4px; font-size: 14px; font-weight: 500; align-self: flex-start; min-height: 44px; margin: -8px 0 -6px -6px; padding: 0 6px; } .signed-in { justify-content: space-between; gap: 12px; flex-wrap: wrap; } .signed-in-email { color: var(--text-2); font-weight: 500; } .signed-in-out { font-size: 13px; font-weight: 500; min-height: 44px; display: inline-flex; align-items: center; } @media (min-width: 900px) { .auth-top { height: 64px; padding: 0 40px; border-bottom: 1px solid var(--line-soft); } .auth-wrap { align-items: center; justify-content: center; padding: 48px 40px 80px; } .auth-card { width: 440px; padding: 32px 32px 28px; background: var(--surface); border: 1px solid var(--line-soft); border-radius: 10px; } .auth-card.wide { width: 640px; } .auth-intro { font-size: 15px; } .auth-card .input { height: 48px; } .auth-card .btn { height: 48px; font-size: 15px; } .auth-card .btn svg { width: 16px; height: 16px; } .back-link { min-height: 32px; } } /* ============================================== 4. the component CSS * Each block below is the inline style the matching function in build.mjs * carried, moved out so the markup is readable and the rule is in one place. * ========================================================================= */ /* tickBox, build.mjs:664 */ .tickbox { border-radius: 6px; flex: none; display: inline-block; } .tickbox.paid { background: var(--ok); color: var(--bg); display: inline-flex; align-items: center; justify-content: center; } .tickbox.open { border: 2px solid var(--due); } /* Still to come, and it pays itself: a box to tick if the person pays early, and nothing they are being asked to do. Grey, by the amber rule above. */ .tickbox.idle { border: 2px solid var(--text-3); opacity: 0.75; } /* estPill 776, viaPill 3565, lockBadge 2724, unread 2957 */ .est-pill, .via-pill { padding: 0 6px; letter-spacing: 0.04em; text-transform: uppercase; } .via-pill { letter-spacing: 0.02em; text-transform: none; flex: none; } .lock-badge { height: 22px; padding: 0 7px 0 6px; font-size: 11.5px; gap: 4px; } .badge { padding: 0 6px; border-radius: 999px; background: var(--text); color: var(--bg); justify-content: center; font-weight: 700; flex: none; letter-spacing: 0; } /* toggle 772, radio 670 */ .toggle { width: 46px; height: 28px; border-radius: 999px; background: var(--line); position: relative; flex: none; } .toggle > span { position: absolute; top: 3px; left: 3px; width: 22px; height: 22px; border-radius: 999px; background: var(--surface); } .toggle.on { background: var(--ok); } .toggle.on > span { left: auto; right: 3px; background: var(--bg); } .radio { width: 20px; height: 20px; border-radius: 999px; border: 2px solid var(--line); flex: none; display: inline-block; } .radio.on { border-color: var(--text); display: inline-flex; align-items: center; justify-content: center; } .radio.on > span { width: 10px; height: 10px; border-radius: 999px; background: var(--text); } /* priceStep / priceSeq 673-674 */ .pricestep { display: flex; flex-direction: column; gap: 2px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); } .pricestep-amt { font-weight: 600; font-size: 15px; } .priceseq { gap: 8px; flex-wrap: wrap; } .seq-chev { display: inline-flex; } /* the static popover 668, and the live one (ui.js showInfo) */ .popover { position: absolute; z-index: 3; width: 250px; padding: 10px 12px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12.5px; line-height: 1.4; font-weight: 500; box-shadow: var(--shadow-pop); } .popover-caret { position: absolute; top: -5px; width: 10px; height: 10px; background: var(--text); transform: rotate(45deg); } .infotip { position: fixed; z-index: 40; max-width: 280px; padding: 10px 12px; border-radius: 8px; background: var(--text); color: var(--bg); font-size: 12.5px; line-height: 1.4; font-weight: 500; box-shadow: var(--shadow-pop); display: none; } .infotip.show { display: block; } /* build.mjs:3573. A real tap target: 44px on the phone, 28px with a mouse. */ .info { position: relative; display: inline-flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: -12px -8px; border-radius: 999px; color: var(--text-3); flex: none; vertical-align: middle; } .info.on { color: var(--text); } @media (hover: hover) and (min-width: 900px) { .info { width: 28px; height: 28px; margin: -6px -4px; } } /* dayStrip 697-722 */ .daystrip { display: grid; gap: 3px; } .daystrip-m { display: flex; flex-direction: column; gap: 6px; } .daystrip-row { display: grid; gap: 2px; } .daycell { display: flex; flex-direction: column; align-items: center; gap: 5px; padding: 8px 0; border-radius: 6px; } .daycell.sm { gap: 3px; padding: 6px 0; } .daycell.weekend { background: var(--surface-2); } .daycell-wd { font-size: 10px; font-weight: 600; letter-spacing: 0.06em; color: var(--text-3); } .daycell-num { font-size: 13px; color: var(--text); height: 24px; display: inline-flex; align-items: center; font-weight: 500; } .daycell.sm .daycell-num { font-size: 12px; } .daycell-num.past { color: var(--text-3); } .daycell-num.today { background: var(--text); color: var(--bg); border-radius: 999px; width: 24px; justify-content: center; font-weight: 600; } .daycell-marks { display: flex; gap: 2px; height: 8px; align-items: center; } .tick.sm, .ring.sm { width: 7px; height: 7px; } .tick.past { opacity: 0.45; } .legend-strip { gap: 18px; font-size: 12.5px; color: var(--text-3); flex-wrap: wrap; } .legend-strip > span { gap: 7px; } .weekend-key { background: var(--surface-2); border: 1px solid var(--line); } /* yearStrip 787-800 */ .yearstrip { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 6px; } .yearstrip.sm { gap: 3px; } .yearcell { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 8px 0; border-radius: 6px; background: transparent; } .yearcell.sm { padding: 6px 0; } .yearcell.on { background: var(--surface-2); } .yearcell-mon { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; color: var(--text-3); } .yearcell.on .yearcell-mon { color: var(--text); } .yearstrip.sm .yearcell-mon { font-size: 10px; } .yearcell-marks { display: flex; gap: 2px; height: 8px; align-items: center; } /* periodCard 802-816 */ .periodcard { display: flex; flex-direction: column; gap: 6px; } .periodrow { gap: 14px; } .periodrow.sm { gap: 8px; } .periodrow-y { width: 40px; font-size: 12px; } .periodrow.sm .periodrow-y { width: 34px; } .periodrow-cells { flex: 1; display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); gap: 4px; } .periodrow.sm .periodrow-cells { gap: 3px; } .periodrow-n { width: 24px; font-size: 12px; text-align: right; } .periodcell { border-radius: 3px; } .periodcell.off { background: var(--surface-2); opacity: 0.6; } .periodcell.est { opacity: 0.45; } /* ticket 730-758 */ .ticket { padding: 14px 16px; display: flex; flex-direction: column; gap: 10px; } .ticket.compact { padding: 8px 12px; flex-direction: row; justify-content: space-between; align-items: center; gap: 12px; } /* The name takes all the spare room, so every name starts at the same place. With space-between alone the three parts were spread out and a short name floated towards the middle (his screenshot, 2026-10-01). */ .ticket.compact .ticket-id { flex: 1 1 auto; } .ticket.compact .ticket-figs { flex: none; } .ticket.manual { border-color: var(--due); } .ticket-top { justify-content: space-between; gap: 8px; } .ticket-top .ticket-when { margin-right: auto; } .ticket-when { font-size: 12px; font-weight: 500; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; } .ticket-when.due { color: var(--due-ink); } .ticket-body { justify-content: space-between; gap: 12px; align-items: flex-end; } .ticket-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ticket-name { font-weight: 600; font-size: 16px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ticket.compact .ticket-name { font-size: 15px; } .ticket-line { gap: 6px; font-size: 12.5px; color: var(--text-3); } .ticket-amt { font-size: 18px; font-weight: 600; white-space: nowrap; } .ticket.compact .ticket-amt { font-size: 16px; } .ticket-figs { display: flex; flex-direction: column; align-items: flex-end; gap: 3px; } .ticket-date { gap: 5px; font-size: 11px; font-weight: 600; color: var(--text-2); text-transform: uppercase; letter-spacing: 0.04em; } .ticket-date.due { color: var(--due-ink); } /* spectrum 761, shareLegend 765-770 */ .spectrum { display: flex; gap: 2px; } .spectrum > a { border-radius: 3px; display: block; } .share-legend { display: grid; gap: 12px 24px; } .share-row { justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line-soft); color: inherit; min-height: 44px; } .share-row.on { background: var(--surface-2); border-radius: 8px; border-bottom-color: transparent; padding: 10px; } .share-name { gap: 10px; min-width: 0; font-weight: 500; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .share-row.on .share-name { font-weight: 700; } .share-name .faint { font-weight: 400; } .share-figs { gap: 12px; } .share-amt { font-weight: 600; } .share-pct { font-size: 12px; width: 44px; text-align: right; } /* hueSwatch / hueGrid 778-785 */ .hue-grid { display: grid; gap: 14px 8px; } .hue { display: flex; flex-direction: column; align-items: center; gap: 6px; min-width: 0; } .hue-chip { border-radius: 10px; display: inline-flex; align-items: center; justify-content: center; color: var(--bg); } .hue-chip.used { opacity: 0.32; } .hue-chip.on { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--text); } .hue-label { font-size: 11.5px; font-weight: 500; color: var(--text-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; } .hue-label.used { color: var(--text-3); } /* expenseRow 901-930. Five columns that line up down the whole list. */ .expense-row { position: relative; display: grid; grid-template-columns: 2.2fr 1.1fr 2fr 1.3fr 1fr; gap: 16px; align-items: center; min-height: 60px; padding: 0 20px; border-bottom: 1px solid var(--line-soft); color: inherit; } .expense-row:hover { text-decoration: none; background: var(--surface-2); } .expense-who { gap: 12px; min-width: 0; } .expense-initial { width: 34px; height: 34px; border-radius: 8px; background: var(--surface-2); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; color: var(--text-2); flex: none; } .expense-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .expense-namerow { gap: 8px; min-width: 0; } .expense-name { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .expense-cat { gap: 6px; font-size: 12.5px; color: var(--text-3); } .expense-shape { gap: 8px; color: var(--text-2); display: flex; flex-direction: column; align-items: flex-start; } .expense-shape.row { flex-direction: row; align-items: center; } .pay { gap: 8px; } .expense-next { display: flex; flex-direction: column; gap: 2px; font-size: 13.5px; color: var(--text-2); } .expense-next.due { color: var(--due-ink); font-weight: 600; } .expense-sub { font-weight: 500; font-size: 12px; } .expense-price { justify-content: flex-end; gap: 6px; } .expense-price .num { font-weight: 600; font-size: 15px; } .expense-per { font-size: 12px; width: 40px; color: var(--text-3); } /* expenseChips 932-949 */ .chips { gap: 8px; flex-wrap: wrap; } .chips.sm { flex-wrap: nowrap; overflow-x: auto; margin-right: -16px; scrollbar-width: none; } .chips.sm::-webkit-scrollbar { display: none; } .chip.sm { height: 36px; } .chips-divider { width: 1px; height: 22px; background: var(--line); margin: 0 4px; flex: none; } /* menuItem 2313, moreMenu 2314 */ .menu-item { gap: 12px; min-height: 44px; padding: 6px 10px; border-radius: 6px; color: var(--text); align-items: center; } .menu-item.with-hint { align-items: flex-start; } .menu-item.quiet { color: var(--text-2); } .menu-item:hover { text-decoration: none; background: var(--surface-2); } .menu-icon { display: inline-flex; flex: none; } .menu-item.with-hint .menu-icon { margin-top: 3px; } .menu-text { display: flex; flex-direction: column; gap: 1px; } .menu-label { font-weight: 500; font-size: 14px; } .menu-divider { height: 1px; background: var(--line-soft); margin: 4px 6px; } .more-menu { width: 272px; padding: 6px; box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: 2px; } /* deleteDialog 2321-2340. The numbers are on the screen, never behind an "i". */ .delete-dialog { width: min(560px, 100%); padding: 24px 26px 26px; box-shadow: var(--shadow-dialog); display: flex; flex-direction: column; gap: 20px; border-color: var(--danger); } .delete-head { justify-content: space-between; align-items: flex-start; } .delete-title { font-weight: 600; font-size: 20px; letter-spacing: -0.01em; } .delete-loss { display: flex; flex-direction: column; gap: 8px; } .delete-sentence { font-size: 16px; line-height: 1.45; } .delete-sentence .strong { font-weight: 700; } .delete-instead { padding: 16px; border-radius: 8px; border: 1px solid var(--text); background: var(--surface-2); display: flex; flex-direction: column; gap: 10px; } .delete-instead-title { font-weight: 600; } .delete-instead .btn { height: 44px; align-self: flex-start; padding: 0 20px; } .delete-actions { justify-content: space-between; gap: 12px; flex-wrap: wrap; } .delete-actions .btn, .delete-actions .btn-ghost { height: 44px; padding: 0 20px; } /* The way out that erases: red, wherever it appears. It stays a quiet text link rather than a button, because the design puts "mark as ended" first on purpose and this is the rarer, heavier answer; the colour is what says which one it is. */ .delete-go, .dialog-danger { color: var(--danger); } .delete-go { gap: 8px; font-size: 14px; font-weight: 500; min-height: 44px; padding: 0 8px; } /* freshConfirm 2342-2346 */ .fresh-confirm { width: 300px; padding: 16px 18px; box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: 12px; } .fresh-title { font-weight: 600; font-size: 16px; } .fresh-hint { font-size: 13.5px; color: var(--text-2); } .fresh-actions { gap: 8px; } /* WHY DANGER IS ITS OWN COLOUR, his call on 2026-09-15 from four reds shown on the real dialog. The red is the mint turned to hue 27 in OKLCH and taken a touch deeper, because a red AT the mint's lightness cannot hold enough chroma and lands on salmon. So it is the same family, not the same number. Amber is untouched and keeps its own meaning: it says "due, you pay this one yourself" on tick boxes, tickets, dates and the calendar legend. Danger and due are different ideas, and a delete borrowing the due colour blurred them. The live users of --danger are the delete dialogs' borders and their erase links, the profile delete card on desktop (the phone shows it as a sheet), and the admin danger dialog. The profile card was the one delete surface still wearing amber until 2026-09-16. */ /* WHAT AMBER MEANS, settled with him on 2026-09-19 after going through every place it appeared: AMBER IS "THIS IS WAITING ON YOU". A bill you pay yourself is the main case and the original one, and the rest are the same idea: a form that needs fixing before it can save (.form-msg), instalments that do not add up to the year's total (.inst-tie.off), a new year's total nobody has answered yet (.new-year-card, .new-year-nudge), and a revoke that only half landed on the admin Users screen. Mint is "done, or it takes care of itself". Red is "this erases something" and nothing else. What amber is NOT, each of these removed on purpose between 2026-09-16 and 2026-09-19: a delete (the profile delete card, now red), a setting (the Auto-payment card, now plain), an option that is merely the heavier of two (Sign out everywhere, now plain), and a finished state (the Revoked tag, now the neutral pill). Before adding amber anywhere, ask what the person is being asked to do. If the answer is nothing, it is not amber. And, found on the phone on 2026-09-20 and changed at Laurent's word: THE BOX OF A PAYMENT THAT PAYS ITSELF AND HAS NOT HAPPENED YET. It was gold on every screen that draws one (a plan's schedule, a bill's payments, the Overview's tickets, the desktop list), and it asks nothing. It is grey now (.tickbox.idle), still tappable so a plan can be paid off early, and the amount beside it is plain. Gold stays for a payment made by hand, one whose date has passed, and one that was unticked because it bounced. The rule lives in one place, money.js stillToCome(). */ /* scrim 2060 and sheet 2061 */ .sheet-layer { position: fixed; inset: 0; z-index: 30; } .sheet-scrim { position: absolute; inset: 0; background: var(--scrim); z-index: 5; } .sheet { position: absolute; left: 0; right: 0; bottom: 0; z-index: 6; padding: 12px 16px max(34px, env(safe-area-inset-bottom)); background: var(--surface); border-radius: 18px 18px 0 0; border-top: 1px solid var(--line); display: flex; flex-direction: column; gap: 14px; box-shadow: var(--shadow-sheet); } .sheet-grab { width: 36px; height: 4px; border-radius: 2px; background: var(--line); align-self: center; } .sheet-head { font-weight: 600; font-size: 14px; color: var(--text-2); text-align: center; } .sheet-rows { display: flex; flex-direction: column; gap: 4px; } .sheet-items { display: flex; flex-direction: column; } .sheet-item { gap: 12px; min-height: 52px; padding: 8px 10px; border-radius: 8px; color: var(--text); } .sheet-item.quiet { color: var(--text-2); } .sheet-item-text { display: flex; flex-direction: column; gap: 1px; } .sheet-item-label { font-weight: 500; font-size: 15px; } .sheet-close { height: 46px; justify-content: center; } /* THE DAY OF THE MONTH, tapped from a grid (components.js dayField, dayGrid; Laurent, 2026-09-30). The field is a button that looks like the input it replaced; the sheet holds the days seven across, each at least 44px tall, the chosen one filled like a chosen frequency chip. */ .day-pick { justify-content: space-between; cursor: pointer; } .day-pick svg { color: var(--text-3); flex: none; } .day-sheet { display: flex; flex-direction: column; gap: 12px; } .day-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; } .day-grid button { height: 46px; border-radius: 8px; border: 1px solid var(--line); background: transparent; color: var(--text); font-size: 16px; font-weight: 600; cursor: pointer; } .day-grid button.on { background: var(--text); color: var(--bg); border-color: var(--text); } .day-grid button:active { opacity: 0.6; } /* On a wide screen the sheet sits in the middle as a small panel rather than a strip across the whole bottom edge. */ @media (min-width: 900px) { .sheet:has(.day-sheet) { left: 50%; right: auto; bottom: 50%; transform: translate(-50%, 50%); width: 420px; border-radius: 14px; border: 1px solid var(--line); padding-bottom: 20px; } .sheet:has(.day-sheet) .sheet-grab { display: none; } } /* avatar 2723, profileChip 2726, profileMenu 2730, picker 2783 */ /* A PROFILE ICON IS A FILLED MINT DISC, his choice on 2026-09-15 from six treatments shown at every size they appear. Mint is not one colour: the token is bright (#41dca5) on dark and deep (#00885e) on light, because green on white has to go darker to stay legible, so the letter takes --bg and comes out near-black on dark and near-white on light. A fill rather than a ring because the header chip draws this at 28px, where a 2px border eats into the letter and the thin-ring versions go faint. */ .avatar { border-radius: 999px; justify-content: center; flex: none; font-weight: 700; background: var(--ok); color: var(--bg); border: 1px solid var(--ok); } .avatar.ring { border: 2px solid var(--ok); } .profile-chip { gap: 8px; height: 40px; padding: 0 10px 0 5px; border-radius: 8px; border: 1px solid var(--line-soft); background: var(--surface); color: var(--text); font-weight: 600; font-size: 14px; } .profile-chip.open { border-color: var(--text); } .profile-chip .faint { display: inline-flex; } .profile-menu { width: 304px; padding: 6px; box-shadow: var(--shadow-menu); display: flex; flex-direction: column; gap: 2px; } .profile-menu-head { padding: 8px 10px 4px; } .profile-row { gap: 12px; min-height: 48px; padding: 6px 10px; border-radius: 6px; color: inherit; } .profile-row.big { min-height: 60px; padding: 8px 10px; border-radius: 8px; } .profile-row.current { background: var(--surface-2); } .profile-row:hover { text-decoration: none; background: var(--surface-2); } .profile-row-text { display: flex; flex-direction: column; gap: 1px; flex: 1; min-width: 0; } .profile-row-name { gap: 8px; font-weight: 600; font-size: 14.5px; } .profile-row .faint { display: inline-flex; } .picker-tile { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 24px 16px 20px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; } .picker-tile.add { justify-content: center; border-style: dashed; background: transparent; color: var(--text-2); } .picker-tile:hover { text-decoration: none; } .picker-id { display: flex; flex-direction: column; align-items: center; gap: 4px; } .picker-name { font-weight: 600; font-size: 17px; } .picker-tile.add .picker-name { font-size: 15px; } .picker-nopin { height: 22px; } .picker-add-circle { width: 64px; height: 64px; border-radius: 999px; justify-content: center; border: 1px dashed var(--line); } .picker-row { gap: 14px; min-height: 76px; padding: 12px 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--surface-2); color: inherit; } .picker-row-text { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 0; } .picker-row-name { gap: 8px; font-weight: 600; font-size: 17px; } /* codeBoxes 2747. The real input sits behind the boxes, invisible but focusable. */ .codeboxes { position: relative; } .codeboxes-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; border: 0; background: transparent; font-size: 16px; letter-spacing: 2em; color: transparent; caret-color: transparent; } .codebox { justify-content: center; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-weight: 600; flex: none; position: relative; } .codebox.focus { border-color: var(--text); box-shadow: 0 0 0 3px var(--surface-2); } .codebox-caret { display: none; width: 1.5px; height: 50%; background: var(--text); } .codebox.focus .codebox-caret { display: inline-block; } .codebox.focus .codebox-digit:not(:empty) + .codebox-caret { display: none; } /* settingsTile 2958-2966. Settings is a hub of tiles, never a long page. */ .settings-tile { padding: 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 10px; color: inherit; } .settings-tile:hover { text-decoration: none; border-color: var(--line); } .settings-tile-top { justify-content: space-between; color: var(--text-2); } .settings-tile-top > .row { gap: 8px; } .settings-tile-text { display: flex; flex-direction: column; gap: 3px; } .settings-tile-label { font-weight: 600; font-size: 15px; } .settings-tile-value { font-size: 13px; color: var(--text-2); overflow-wrap: anywhere; } .settings-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } @media (min-width: 900px) { .settings-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } } /* progressBar 3531, scheduleRows 3536, scheduleGrid 3547, staircase 3577 */ .progress { display: flex; flex: none; } .progress-seg { flex: 1; border-radius: 2px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line); } .progress-seg.done { background: var(--ok); box-shadow: inset 0 0 0 1px transparent; } .progress-seg.next { box-shadow: inset 0 0 0 1px var(--due); } .schedule-rows { display: flex; flex-direction: column; } .schedule-row { gap: 14px; min-height: 48px; border-bottom: 1px solid var(--line-soft); } .schedule-row.sm { gap: 10px; min-height: 44px; } .schedule-k { width: 28px; font-size: 12px; font-weight: 600; } .schedule-when { font-weight: 500; font-size: 15px; color: var(--text); flex: 1; white-space: nowrap; } .schedule-row.sm .schedule-when { font-size: 14px; } .schedule-when.next { font-weight: 700; } .schedule-when.done { color: var(--text-2); } .schedule-when.due { color: var(--due-ink); } .schedule-note { white-space: nowrap; } .schedule-amt { font-weight: 600; width: 80px; text-align: right; color: var(--text); } .schedule-row.sm .schedule-amt { width: 64px; } .schedule-amt.done { color: var(--text-2); } /* THE BOX SITS IN THE SAME PLACE ON EVERY ROW. A payment the ledger already holds gets a tappable box with a 44px hit area; one beyond the ledger gets the plain 22px slot. The hit area used to take part in the layout (44 less one margin), so the two kinds were different widths and the amounts beside them did not line up. It now overhangs by the same amount on every side, so in the layout it is the 22px box it looks like. */ .schedule-row .ticket-tick { width: 44px; height: 44px; min-width: 0; min-height: 0; margin: -11px; } .schedule-grid { display: grid; } .schedule-cell { display: flex; flex-direction: column; gap: 4px; padding: 10px 8px; border-radius: 8px; background: var(--surface-2); } .schedule-cell.sm { padding: 8px; } .schedule-cell.done { background: var(--ok-bg); } .schedule-cell.next { box-shadow: inset 0 0 0 1px var(--due); } .schedule-cell-top { justify-content: space-between; } .schedule-cell-top .num { font-size: 11px; font-weight: 600; } .schedule-cell-date { font-size: 13px; font-weight: 600; color: var(--text); white-space: nowrap; } .schedule-cell.sm .schedule-cell-date { font-size: 12px; } .schedule-cell-date.done { color: var(--text-2); } .schedule-cell-date.due { color: var(--due-ink); } .staircase { display: flex; flex-direction: column; gap: 5px; font-size: 13.5px; color: var(--text-2); } .staircase-step { gap: 9px; } .staircase-when { font-weight: 600; color: var(--text); min-width: 112px; } .staircase-after { font-weight: 600; color: var(--text); } /* stepper 3575, methodField 3899, viaField 3907 */ .stepper { justify-content: space-between; padding-right: 6px; } .stepper-n { font-size: 18px; font-weight: 600; } .stepper-btns { gap: 4px; } .stepper .iconbtn { width: 36px; height: 36px; border-radius: 6px; } .method-field, .via-field { position: relative; } .method-field .input { justify-content: space-between; } .method-field .input .num { font-weight: 600; } /* ================================================= 5. unit 2: the front door, * the picker, the PIN, the switcher, account and profiles settings. Each * block names the generator in build.mjs whose inline styles it carries. * ========================================================================= */ /* The hidden attribute wins over any display rule below: a pane or a message that is hidden is hidden, whatever flex or grid it carries when shown. */ [hidden] { display: none !important; } /* One tree, two shapes: what only one width shows. Each rule only ever hides, so an element keeps its own display (grid, flex) at the width it is for. */ @media (max-width: 899.98px) { .only-desktop { display: none !important; } } @media (min-width: 900px) { .only-phone { display: none !important; } } /* The form message: what a screen says in place when something did not go through. Never a toast (SPEC.md section 5). */ .form-msg { margin: 0; font-size: 13.5px; line-height: 1.45; color: var(--due-ink); } .form-msg.centered, .lock-note.centered { text-align: center; } .strong-ink { color: var(--text); font-weight: 500; } .btn:disabled, .btn-ghost:disabled { opacity: 0.55; cursor: default; } .auth-btn-ghost { height: 50px; justify-content: center; font-size: 16px; } @media (min-width: 900px) { .auth-card.w480 { width: 480px; } .auth-btn-ghost { height: 48px; font-size: 15px; } } /* SignInRevoked 3461: the two calm sentences in a soft panel. */ .revoked-note { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px; border-radius: 8px; background: var(--surface-2); } .revoked-note > span { font-size: 14.5px; line-height: 1.45; color: var(--text-2); } /* SignInCode 2770. The code field and the links under the button. */ .code-field { gap: 8px; } .code-field .lbl.row { gap: 4px; } .codeboxes-input:focus { outline: none; } /* Profiles 2792 and PhoneProfiles 2860. Three tiles across on the desktop, rows on the phone. */ .picker-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; } .picker-list { display: flex; flex-direction: column; gap: 10px; } .picker-row:hover { text-decoration: none; } .picker-row.add { min-height: 64px; padding: 8px 14px; border-style: dashed; background: transparent; color: var(--text-2); } .picker-row.add .picker-name { font-size: 15px; } .picker-add-circle.sm { width: 48px; height: 48px; } /* ProfilePin 2801 and PhonePin 2872. The phone shows the nav bar and a fixed footer with the sign-out; the desktop shows the wordmark bar and a card with the sign-out under a rule. */ .pin-screen .auth-top { display: none; } .pin-screen .auth-wrap { padding-top: 28px; } .pin-card { gap: 24px; } .pin-who { display: flex; flex-direction: column; align-items: center; gap: 12px; } .pin-who .avatar { width: 72px !important; height: 72px !important; font-size: 30px !important; } .pin-who-text { display: flex; flex-direction: column; align-items: center; gap: 4px; } .pin-name { font-weight: 600; font-size: 22px; } .pin-screen .codebox { width: 60px !important; height: 70px !important; font-size: 28px !important; } .pin-screen .codeboxes { gap: 12px !important; } .pin-forgot { font-size: 15px; font-weight: 600; color: var(--text); text-align: center; min-height: 44px; display: inline-flex; align-items: center; justify-content: center; } .auth-foot { display: flex; flex-direction: column; gap: 8px; } .auth-out { gap: 6px; font-size: 14px; font-weight: 500; min-height: 44px; justify-content: center; } /* build.mjs:2832 phoneFooter */ .pin-screen .auth-foot, .phone-footer { position: fixed; left: 0; right: 0; bottom: 0; z-index: 3; padding: 12px 16px max(34px, env(safe-area-inset-bottom)); background: var(--bg); border-top: 1px solid var(--line-soft); display: flex; flex-direction: column; gap: 8px; } .pin-screen .auth-card { padding-bottom: 120px; } .forgot-screen .auth-wrap { padding-top: 8px; } .forgot-screen .codebox { width: 50px !important; height: 59px !important; font-size: 23px !important; } .forgot-screen .codeboxes { gap: 6px !important; } .forgot-screen .auth-card { padding-bottom: 160px; } .phone-footer .btn { height: 50px; justify-content: center; font-size: 16px; width: 100%; } @media (min-width: 900px) { .pin-screen .auth-top { display: flex; } .pin-screen .auth-wrap { padding-top: 48px; } .pin-card { gap: 22px; } .pin-who .avatar { width: 64px !important; height: 64px !important; font-size: 27px !important; } .pin-name { font-size: 20px; } .pin-screen .codebox { width: 56px !important; height: 66px !important; font-size: 26px !important; } .pin-screen .codeboxes { gap: 10px !important; } .pin-forgot { font-size: 14.5px; } .pin-screen .auth-foot, .phone-footer { position: static; padding: 0; background: transparent; border-top: 0; } .pin-screen .auth-card, .forgot-screen .auth-card { padding-bottom: 28px; } .forgot-screen .auth-wrap { padding-top: 48px; } .forgot-screen .codebox { width: 52px !important; height: 61px !important; font-size: 24px !important; } .forgot-screen .codeboxes { gap: 8px !important; } .auth-out { font-size: 13.5px; min-height: 32px; } .forgot-foot { gap: 22px; } } /* The switcher: profileMenu 2730 hangs under the chip; the sheet is ui.js. */ .topbar { position: relative; } .profile-menu { position: absolute; z-index: 6; } .sheet-rows .profile-row { min-height: 60px; } .sheet-item:hover { text-decoration: none; } /* sheetItem, build.mjs:2426: a rule under each item, 14px to the icon. */ .sheet-items .sheet-item { gap: 14px; padding: 6px 4px; border-radius: 0; border-bottom: 1px solid var(--line-soft); } /* A settings screen's page: the head, the breadcrumb. */ .page { gap: 20px; } .page-head { display: flex; flex-direction: column; gap: 6px; } .page-head-row { justify-content: space-between; align-items: flex-end; gap: 16px; } /* searchBox, build.mjs:958. The design's box: 40px tall, 240px wide, the glass inside it. On the phone it takes the full width under the page head and grows to 44px, the tap target every control gets there, and to 16px type, because iOS zooms the whole page into any field set smaller than that. Written after .input on purpose: same weight, so these sizes win. */ .search-box { height: 40px; width: 240px; flex: none; gap: 8px; padding: 0 6px 0 12px; font-size: 14px; cursor: text; } .search-ico { display: inline-flex; flex: none; } .search-box input { flex: 1; min-width: 0; height: 100%; border: 0; outline: 0; padding: 0; background: transparent; color: var(--text); font: inherit; -webkit-appearance: none; appearance: none; } .search-box input::placeholder { color: var(--text-3); opacity: 1; } /* The browser's own clear cross is switched off in favour of one that looks the same everywhere and is big enough to hit on a phone. */ .search-box input::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; display: none; } .search-clear { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; border-radius: 6px; color: var(--text-3); flex: none; } .search-clear:hover { color: var(--text); background: var(--surface-2); } .on-search { justify-content: flex-end; gap: 10px; } /* The search box and the sort control sit together at the right of the page head, 10px apart (build.mjs:957). */ .head-tools { gap: 10px; flex: none; } /* sortBox, build.mjs:958. The design's outlined button, and inside it a real