/* splitNest webapp — design system and components. No build step: this file is served as written. Theming is custom properties; dark mode follows the system unless pins it (assets/theme.js applies a stored choice before first paint). */ /* ---------- tokens ---------- */ :root { color-scheme: light dark; --bg: #f6f4ef; --surface: #ffffff; --surface-2: #f0ede5; --ink: #211f1a; --ink-2: #5b564c; --muted: #8a8478; --line: #e6e2d8; --line-strong: #d3cec1; --accent: #2e7d5b; --accent-strong: #266a4d; --accent-soft: #e2efe7; --accent-ink: #1d5940; --pos: #2e7d5b; --pos-soft: #e2efe7; --neg: #b3453a; --neg-soft: #f7e6e2; --warn: #a3730f; --warn-soft: #f5ecd3; --info-soft: #e7ecf4; /* Storage-section colours. See .quota for how these were chosen and why the blue is brighter than the rest of this palette. */ --seg-0: #2e7d5b; --seg-1: #00b2ff; --seg-2: #e5982d; --seg-3: #703055; --shadow: 0 1px 2px rgb(35 31 24 / .05), 0 6px 24px rgb(35 31 24 / .06); --shadow-pop: 0 2px 6px rgb(35 31 24 / .08), 0 12px 40px rgb(35 31 24 / .14); --r-s: 8px; --r-m: 12px; --r-l: 16px; --sidebar-w: 264px; --font: ui-sans-serif, system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", sans-serif; --mono: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; } @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --bg: #141419; --surface: #1d1c23; --surface-2: #27252e; --ink: #edeaf0; --ink-2: #b6b2bd; --muted: #8b8794; --line: #302e39; --line-strong: #3d3a48; --accent: #58b98a; --accent-strong: #6cc79a; --accent-soft: #22352c; --accent-ink: #8fd6b1; --pos: #58b98a; --pos-soft: #22352c; --neg: #e0705f; --neg-soft: #3a2723; --warn: #d9a33c; --warn-soft: #3a3120; --info-soft: #262b36; /* Storage-section colours; see .quota. */ --seg-0: #58b98a; --seg-1: #0078ba; --seg-2: #ffc368; --seg-3: #ff8de3; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 24px rgb(0 0 0 / .25); --shadow-pop: 0 2px 6px rgb(0 0 0 / .4), 0 16px 48px rgb(0 0 0 / .5); } } :root[data-theme="dark"] { --bg: #141419; --surface: #1d1c23; --surface-2: #27252e; --ink: #edeaf0; --ink-2: #b6b2bd; --muted: #8b8794; --line: #302e39; --line-strong: #3d3a48; --accent: #58b98a; --accent-strong: #6cc79a; --accent-soft: #22352c; --accent-ink: #8fd6b1; --pos: #58b98a; --pos-soft: #22352c; --neg: #e0705f; --neg-soft: #3a2723; --warn: #d9a33c; --warn-soft: #3a3120; --info-soft: #262b36; /* Storage-section colours; see .quota. */ --seg-0: #58b98a; --seg-1: #0078ba; --seg-2: #ffc368; --seg-3: #ff8de3; --shadow: 0 1px 2px rgb(0 0 0 / .3), 0 6px 24px rgb(0 0 0 / .25); --shadow-pop: 0 2px 6px rgb(0 0 0 / .4), 0 16px 48px rgb(0 0 0 / .5); } /* ---------- base ---------- */ *, *::before, *::after { box-sizing: border-box; } html { height: 100%; } body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 15px/1.55 var(--font); -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } h1, h2, h3, h4 { margin: 0; font-weight: 650; letter-spacing: -.015em; line-height: 1.25; } h1 { font-size: 1.45rem; } h2 { font-size: 1.1rem; } h3 { font-size: .95rem; } p { margin: 0; } a { color: var(--accent); text-decoration: none; } a:hover { text-decoration: underline; } small { color: var(--muted); } code { font-family: var(--mono); font-size: .85em; background: var(--surface-2); padding: .1em .35em; border-radius: 5px; } hr { border: 0; border-top: 1px solid var(--line); margin: 1rem 0; } ::selection { background: color-mix(in srgb, var(--accent) 25%, transparent); } :focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 4px; } button { font: inherit; color: inherit; } .icon { flex: none; vertical-align: -3px; } .spin { animation: spin 1s linear infinite; } @keyframes spin { to { transform: rotate(360deg); } } .muted { color: var(--muted); } .dim { color: var(--ink-2); } .small { font-size: .85rem; } .tiny { font-size: .78rem; } .strong { font-weight: 600; } .center { text-align: center; } .grow { flex: 1; min-width: 0; } .nowrap { white-space: nowrap; } .ellip { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; max-width: 100%; } /* Inside a COLUMN flex container, min-width:0 does not stop a nowrap line from inflating the container's min-content width (cross-axis sizing), so a long unbroken string would force the whole page wide on a phone. width:0 zeroes the intrinsic contribution; min-width:100% restores the real width once the column has one. */ .col > .ellip { width: 0; min-width: 100%; } .mono { font-family: var(--mono); } .row { display: flex; align-items: center; gap: .6rem; min-width: 0; } .col { display: flex; flex-direction: column; gap: .35rem; min-width: 0; } .wrap { flex-wrap: wrap; } .spread { justify-content: space-between; } .stack { display: flex; flex-direction: column; gap: 1rem; } .stack-s { display: flex; flex-direction: column; gap: .5rem; } /* ---------- money ---------- */ .money { font-variant-numeric: tabular-nums; font-weight: 620; white-space: nowrap; } .money.pos { color: var(--pos); } .money.neg { color: var(--neg); } .money.big { font-size: 1.35rem; letter-spacing: -.01em; } /* ---------- buttons ---------- */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: .45rem; padding: .52rem .95rem; border: 1px solid var(--line-strong); border-radius: var(--r-s); background: var(--surface); color: var(--ink); font-weight: 560; font-size: .9rem; cursor: pointer; user-select: none; transition: background .12s, border-color .12s, opacity .12s; text-decoration: none; } .btn:hover { background: var(--surface-2); text-decoration: none; } .btn:active { transform: translateY(.5px); } .btn:disabled { opacity: .55; cursor: default; transform: none; } .btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; } .btn.primary:hover { background: var(--accent-strong); border-color: var(--accent-strong); } .btn.danger { color: var(--neg); border-color: color-mix(in srgb, var(--neg) 35%, var(--line-strong)); } .btn.danger:hover { background: var(--neg-soft); } .btn.danger.solid { background: var(--neg); border-color: var(--neg); color: #fff; } .btn.danger.solid:hover { background: color-mix(in srgb, var(--neg) 88%, black); } .btn.ghost { border-color: transparent; background: transparent; } .btn.ghost:hover { background: var(--surface-2); } .btn.small { padding: .3rem .6rem; font-size: .82rem; border-radius: 7px; } .btn.big { padding: .7rem 1.2rem; font-size: 1rem; border-radius: var(--r-m); } .btn.wide { width: 100%; } .btn.iconbtn { padding: .45rem; border-radius: var(--r-s); } .btn.iconbtn.small { padding: .3rem; } /* ---------- inputs ---------- */ .field { display: flex; flex-direction: column; gap: .3rem; min-width: 0; } .field > label, /* A field whose control is a group of buttons cannot use