/* ============================================================================ Cabinet Quoting — "Workbench" design system ---------------------------------------------------------------------------- Dark graphite chrome around a bright paper working surface: the machine housing and the board you cut from. Every measurement and every rand is set in tabular monospace, because a cutting list is a table of measurements and digits that don't line up are digits you misread on a workshop floor. No web fonts — this has to work on a shop PC with no internet. ========================================================================== */ :root { /* Chrome — the machine housing */ --chrome-900: #171b20; --chrome-800: #1f252c; --chrome-700: #2b333c; --chrome-line: #39424c; --chrome-ink: #e8ecef; --chrome-ink-soft: #97a3ae; /* Working surface — the board */ --field: #eef0ec; --sheet: #ffffff; --sheet-sunk: #f7f8f6; --ink: #14181c; --ink-soft: #5f6a73; --ink-faint: #8a949c; --rule: #dfe3de; --rule-strong: #c4cac3; /* Signals */ --accent: #1c5d4a; /* pine — primary action, money confirmed */ --accent-hover: #164a3b; --accent-wash: #e7f0eb; --measure: #1f6f8b; /* drafting blue — computed & live values */ --measure-wash: #e6f0f4; --pending: #a86a10; /* amber — unsaved changes */ --pending-wash: #fcf2e0; --alert: #97362c; /* clay — destructive, bad dimensions */ --alert-wash: #fbebe9; --radius: 8px; --radius-lg: 12px; --shadow-sm: 0 1px 2px rgba(20, 24, 28, 0.06); --shadow: 0 2px 8px rgba(20, 24, 28, 0.08), 0 1px 2px rgba(20, 24, 28, 0.05); --shadow-lift: 0 8px 28px rgba(20, 24, 28, 0.14); --ui: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif; --mono: ui-monospace, "SF Mono", SFMono-Regular, "Cascadia Mono", "Roboto Mono", Menlo, Consolas, "Liberation Mono", monospace; } * { box-sizing: border-box; } html { -webkit-text-size-adjust: 100%; } body { margin: 0; background: var(--field); color: var(--ink); font-family: var(--ui); font-size: 14px; line-height: 1.5; -webkit-font-smoothing: antialiased; } a { color: var(--measure); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--measure); outline-offset: 2px; border-radius: 3px; } /* --------------------------------------------------------------- app chrome */ .topbar { background: var(--chrome-900); color: var(--chrome-ink); position: sticky; top: 0; z-index: 40; border-bottom: 1px solid #000; } .topbar-inner { max-width: 1560px; margin: 0 auto; padding: 0 22px; display: flex; align-items: center; gap: 26px; min-height: 52px; } .brand { font-weight: 700; font-size: 14px; letter-spacing: 0.16em; text-transform: uppercase; color: #fff; white-space: nowrap; } .brand span { color: var(--chrome-ink-soft); font-weight: 500; } /* The menu button and its backdrop belong to the phone layout only; on a wide screen the links are across the top and neither is drawn. */ .menu-btn { display: none; } .menu-scrim { display: none; } /* Folding a cupboard is a phone affordance; on a desktop the whole row is on screen at once and there is nothing to fold. */ .fold-btn { display: none; } .topbar nav { display: flex; gap: 2px; flex: 1; flex-wrap: wrap; } .topbar nav a { color: var(--chrome-ink-soft); font-size: 13px; font-weight: 500; padding: 7px 11px; border-radius: 6px; white-space: nowrap; } .topbar nav a:hover { background: var(--chrome-700); color: #fff; text-decoration: none; } .topbar nav a.active { background: var(--accent); color: #fff; font-weight: 600; } .topbar-right { display: flex; align-items: center; gap: 12px; } .user-name { font-size: 12px; color: var(--chrome-ink-soft); } .topbar-right button { background: transparent; color: var(--chrome-ink-soft); border: 1px solid var(--chrome-line); border-radius: 6px; padding: 5px 10px; font: inherit; font-size: 12px; cursor: pointer; } .topbar-right button:hover { color: #fff; border-color: var(--chrome-ink-soft); } main.with-topbar { max-width: 1560px; margin: 0 auto; padding: 24px 22px 140px; } main.narrow { max-width: 900px; } main.centered { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; } /* ---------------------------------------------------------------- typography */ h1 { font-size: 21px; font-weight: 650; letter-spacing: -0.015em; margin: 0 0 3px; } h2 { font-size: 15px; font-weight: 650; letter-spacing: -0.01em; margin: 0 0 12px; } h3 { font-size: 13px; font-weight: 650; margin: 0 0 8px; } .subtitle { color: var(--ink-soft); font-size: 13px; margin: 0 0 18px; max-width: 78ch; } /* Drafting labels — wide-tracked uppercase micro type, the vernacular of a dimensioned drawing. Used for every field label and column head. */ .eyebrow, label, th { font-size: 10.5px; font-weight: 700; letter-spacing: 0.09em; text-transform: uppercase; color: var(--ink-faint); } label { display: block; margin-bottom: 5px; } .page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 20px; flex-wrap: wrap; margin-bottom: 20px; } /* Every number in this app is monospace and tabular. */ .mono, .num, td.num, input[type="number"], .money, .dim { font-family: var(--mono); font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1; } /* -------------------------------------------------------------------- cards */ .card { background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius-lg); padding: 18px; margin-bottom: 18px; box-shadow: var(--shadow-sm); } .card.flush { padding: 0; overflow: hidden; } .card-head { display: flex; justify-content: space-between; align-items: center; gap: 14px; padding: 14px 18px; border-bottom: 1px solid var(--rule); background: var(--sheet-sunk); } .card-head h2 { margin: 0; } .card-head .hint { font-size: 12px; color: var(--ink-faint); font-weight: 400; text-transform: none; letter-spacing: 0; } /* ------------------------------------------------------------------- tables */ table { width: 100%; border-collapse: collapse; font-size: 13px; } th, td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--rule); vertical-align: middle; } th { background: var(--sheet-sunk); position: sticky; top: 0; z-index: 2; } tbody tr:last-child td { border-bottom: none; } tbody tr:hover { background: var(--sheet-sunk); } td.num, th.num { text-align: right; } .table-scroll { overflow-x: auto; overflow-y: visible; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); /* A visible, always-present scrollbar — on a wide table you need to know there's more to the right without discovering it by accident. */ scrollbar-color: var(--rule-strong) var(--sheet-sunk); } .table-scroll::-webkit-scrollbar { height: 12px; } .table-scroll::-webkit-scrollbar-track { background: var(--sheet-sunk); border-radius: 0 0 var(--radius) var(--radius); } .table-scroll::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 6px; border: 3px solid var(--sheet-sunk); } .table-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } .scroll-hint { font-size: 11px; color: var(--ink-faint); margin: 6px 2px 0; display: flex; align-items: center; gap: 6px; } /* A long catalogue table in a box of its own. * * A wide table on a tall page puts its sideways scrollbar at the bottom of all * 174 rows, so reaching it meant scrolling to the foot of the page and losing * sight of the row being worked on. Capping the height the way the quote grid * is capped keeps the bar on screen at all times and keeps the column names * above the rows, which is the behaviour that already works on the quote. */ .sheet-scroll { max-height: calc(100vh - 260px); min-height: 220px; overflow: auto; border: 1px solid var(--rule); border-radius: var(--radius); background: var(--sheet); scrollbar-color: var(--rule-strong) var(--sheet-sunk); } .sheet-scroll::-webkit-scrollbar { height: 12px; width: 12px; } .sheet-scroll::-webkit-scrollbar-track { background: var(--sheet-sunk); } .sheet-scroll::-webkit-scrollbar-thumb { background: var(--rule-strong); border-radius: 6px; border: 3px solid var(--sheet-sunk); } .sheet-scroll::-webkit-scrollbar-thumb:hover { background: var(--ink-faint); } .sheet-scroll > table { margin: 0; } /* Setting something up is occasional; reading the list is constant. So the list comes first and the set-up panels fold away under it, which is what keeps the table's sideways scrollbar on screen instead of four cards down. */ details.setup-fold { padding: 0; } details.setup-fold > summary { cursor: pointer; padding: 13px 18px; font-size: 14px; display: flex; align-items: baseline; gap: 2px; flex-wrap: wrap; } details.setup-fold > summary::marker { color: var(--ink-faint); } details.setup-fold > summary:hover { background: var(--sheet-sunk); } details.setup-fold[open] > summary { border-bottom: 1px solid var(--rule); } details.setup-fold .setup-fold-body { padding: 16px 18px 18px; } details.setup-fold .setup-fold-body > :first-child { margin-top: 0; } /* A sticky does nothing inside a table with collapsed borders — the browser has nowhere to hang it, so the column names scrolled away with the rows. The quote grid has always used separate borders for exactly this reason; these tables now do the same, drawing their rules per cell so they look as they did. */ /* Size to the content and let the box scroll, rather than squeezing eleven columns into the width of the card — which crushed a material's name down to two letters. */ table.sheet-sticky { border-collapse: separate; border-spacing: 0; width: max-content; min-width: 100%; } table.sheet-sticky td > input[type="text"], table.sheet-sticky td > input:not([type]) { min-width: 150px; } table.sheet-sticky th, table.sheet-sticky td { border-bottom: 1px solid var(--rule); } table.sheet-sticky tbody tr:last-child td { border-bottom: none; } table.sheet-sticky thead th { position: sticky; top: 0; z-index: 4; background: var(--sheet-sunk); border-bottom: 1px solid var(--rule-strong); } /* Inside a box that already scrolls sideways there is no reason to wrap. Four buttons squeezed into a 103px column stacked into four lines and made every row 158px tall, so three cupboard codes filled the window. Nothing wraps here; the row stays one line deep and the box scrolls to reach the rest. */ table.sheet-sticky th, table.sheet-sticky td { white-space: nowrap; vertical-align: middle; } table.sheet-sticky .row-actions { flex-wrap: nowrap; } table.sheet-sticky thead th.num { text-align: right; } /* -------------------------------------------------------------------- forms */ input, select, textarea { font: inherit; font-size: 13px; padding: 7px 9px; border: 1px solid var(--rule-strong); border-radius: 6px; background: var(--sheet); color: var(--ink); width: 100%; transition: border-color 0.12s, box-shadow 0.12s; } input:hover, select:hover, textarea:hover { border-color: var(--ink-faint); } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--measure); box-shadow: 0 0 0 3px var(--measure-wash); } input[type="checkbox"] { width: auto; accent-color: var(--accent); } select { cursor: pointer; } textarea { resize: vertical; min-height: 64px; } .field { margin-bottom: 14px; } .field.tight { margin-bottom: 0; } .grid { display: grid; gap: 14px; } .grid.cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); } .grid.cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .grid.cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .grid.cols-5 { grid-template-columns: repeat(5, minmax(0, 1fr)); } .grid.cols-6 { grid-template-columns: repeat(6, minmax(0, 1fr)); } .grid.end { align-items: end; } /* ------------------------------------------------------------------ buttons */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; background: var(--accent); color: #fff; border: 1px solid var(--accent); padding: 8px 14px; border-radius: 6px; font: inherit; font-size: 13px; font-weight: 600; white-space: nowrap; transition: background 0.12s, border-color 0.12s; } .btn:hover { background: var(--accent-hover); border-color: var(--accent-hover); text-decoration: none; color: #fff; } .btn.secondary { background: var(--sheet); color: var(--ink); border-color: var(--rule-strong); } .btn.secondary:hover { background: var(--sheet-sunk); border-color: var(--ink-faint); color: var(--ink); } .btn.danger { background: var(--alert); border-color: var(--alert); } .btn.danger:hover { background: #7d2c24; border-color: #7d2c24; } .btn.ghost { background: transparent; border-color: transparent; color: var(--ink-soft); } .btn.ghost:hover { background: var(--sheet-sunk); color: var(--ink); } .btn.small { padding: 5px 9px; font-size: 12px; } .btn.icon { padding: 5px 8px; font-size: 13px; line-height: 1; } .btn:disabled { opacity: 0.45; cursor: not-allowed; } .row-actions { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; } .toolbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; } /* --------------------------------------------------------------------- pills */ .pill { display: inline-block; padding: 2px 9px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; background: var(--sheet-sunk); color: var(--ink-soft); border: 1px solid var(--rule); } .pill.draft { background: #f2f0ea; color: #7c6a3f; border-color: #e4dcc7; } .pill.sent { background: var(--measure-wash); color: var(--measure); border-color: #c3dbe4; } .pill.accepted { background: var(--accent-wash); color: var(--accent); border-color: #bfd9cd; } .pill.paid { background: var(--accent-wash); color: var(--accent); border-color: #bfd9cd; } .pill.unpaid { background: var(--pending-wash); color: var(--pending); border-color: #ecd9b2; } /* ------------------------------------------------------- cupboard row editor */ /* One cupboard per row, scrolling sideways, with identity pinned left. Fewer, wider columns: each dropdown carries its own quantity, and the three dimensions share one cell, because they're read as one number anyway. */ /* The floor is the sum of what the columns below ask for. Set lower, the browser cannot honour the widths and falls back to sharing the space out by how much text is in each column — which gave the cost column 451px and left the Door picker 60, reading "N" where a board name should be. */ .cupboard-grid { min-width: 3490px; border-collapse: separate; border-spacing: 0; } .cupboard-grid th, .cupboard-grid td { border-bottom: 1px solid var(--rule); padding: 7px 8px; white-space: nowrap; vertical-align: middle; } .cupboard-grid th { border-bottom: 1px solid var(--rule-strong); } .cupboard-grid input, .cupboard-grid select { padding: 6px 8px; font-size: 13px; } .cupboard-grid .w-code { width: 170px; } .cupboard-grid .w-label { width: 140px; } .cupboard-grid .w-exp { width: 130px; } .cupboard-grid .w-size { width: 200px; } /* A board name is the longest thing in the row and the one most worth reading: "Melawood Luca Polenta" needs the room more than a hinge name does. */ .cupboard-grid .w-mat { width: 190px; } .cupboard-grid .w-pair { width: 180px; } .cupboard-grid td.cost-cell, .cupboard-grid th.w-cost { width: 150px; } /* The three tapes of one cupboard — carcase, doors, shelving — stacked in one cell rather than three columns. Three more 210px columns would have pushed the cost off the end of the grid on any screen; stacked they cost one column's width and read top to bottom in the order the heading names. */ .cupboard-grid .w-edge3 { width: 190px; } .cupboard-grid .edge-trio { display: flex; flex-direction: column; gap: 3px; } .cupboard-grid .edge-trio label { display: flex; align-items: center; gap: 4px; margin: 0; } /* Three boxes that all read "follows the quote" are three boxes nobody can tell apart, so each carries its own letter. */ .cupboard-grid .edge-trio .edge-tag { flex: none; width: 10px; font-size: 10px; font-weight: 600; color: var(--ink-faint); text-align: center; } .cupboard-grid .edge-trio select { min-width: 0; flex: 1 1 auto; font-size: 11.5px; padding: 1px 6px; height: 21px; } /* The four controls at the end of a row — the upgrade tick, the save state, Copy and the delete — were wrapping onto three lines inside a 130px column, which made every row in the grid 136px tall instead of 64px. On a forty-cupboard quote that is six cupboards on screen instead of thirteen. The grid scrolls sideways anyway, so the column can simply be wide enough. */ .cupboard-grid .w-act { width: 230px; } .cupboard-grid .row-actions { flex-wrap: nowrap; } /* Height × Depth × Length, laid out as it's spoken. */ .cupboard-grid .dims { display: flex; align-items: center; gap: 5px; } .cupboard-grid .dims input { width: 58px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; } .cupboard-grid .dims span { color: var(--ink-faint); font-size: 12px; } /* A type and its quantity are one decision, so they share one cell. */ .cupboard-grid .pair { display: flex; gap: 5px; align-items: center; } .cupboard-grid .pair select { flex: 1; min-width: 0; } .cupboard-grid .pair .qty { width: 54px; flex: none; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* Spinners steal roughly a third of a narrow number field and are useless for millimetres — the digits matter more. */ .cupboard-grid input[type="number"] { -moz-appearance: textfield; appearance: textfield; } .cupboard-grid input[type="number"]::-webkit-outer-spin-button, .cupboard-grid input[type="number"]::-webkit-inner-spin-button { -webkit-appearance: none; margin: 0; } .rownum { font-family: var(--mono); font-size: 12px; font-weight: 700; color: var(--ink-faint); width: 44px; text-align: center; } .cupboard-grid .sticky-col { position: sticky; left: 0; z-index: 3; background: var(--sheet); border-right: 1px solid var(--rule); } .cupboard-grid .sticky-col-2 { position: sticky; left: 44px; z-index: 3; background: var(--sheet); border-right: 1px solid var(--rule-strong); box-shadow: 4px 0 8px -4px rgba(20, 24, 28, 0.22); } /* The headings stay put. * * On a twenty-cupboard kitchen the columns run off the top of the screen and * you are left guessing whether a box is the hinge or the runner. The grid * therefore scrolls inside its own panel, and both heading rows — the groups * and the column names — stick to the top of it. The first two columns already * stick to the left, so the four corner cells sit above both. */ #cupboard-scroll { /* Tall enough to work in, short enough that the headings have something to stick to. Below that the page itself scrolls as before. */ max-height: calc(100vh - 230px); overflow: auto; } .cupboard-grid thead th { position: sticky; z-index: 5; } .cupboard-grid thead .colgroup-head th { top: 0; height: 26px; z-index: 6; } .cupboard-grid thead tr:not(.colgroup-head) th { top: 26px; } .cupboard-grid thead .sticky-col, .cupboard-grid thead .sticky-col-2 { background: var(--sheet-sunk); z-index: 8; } .cupboard-grid thead .colgroup-head .sticky-col, .cupboard-grid thead .colgroup-head .sticky-col-2 { z-index: 9; } .cupboard-grid thead .colgroup-head .sticky-col, .cupboard-grid thead .colgroup-head .sticky-col-2 { background: var(--chrome-800); } .cupboard-grid tbody tr:hover .sticky-col, .cupboard-grid tbody tr:hover .sticky-col-2 { background: var(--sheet-sunk); } .cupboard-grid tbody tr:hover { background: transparent; } .cupboard-grid tfoot td { background: var(--sheet-sunk); } .cupboard-grid tfoot .sticky-col, .cupboard-grid tfoot .sticky-col-2 { background: var(--sheet-sunk); } /* Column-family labels above the drafting labels, so 18 columns read as five ideas rather than eighteen. */ .colgroup-head th { background: var(--chrome-800); color: var(--chrome-ink-soft); font-size: 10px; letter-spacing: 0.12em; padding: 6px 8px; border-bottom: none; position: sticky; top: 0; z-index: 4; } .colgroup-head th.g-sep { border-left: 1px solid var(--chrome-line); } .cupboard-grid thead tr:nth-child(2) th { top: 27px; } /* Every cell that changes on save reserves its space up front. The cost cell used to grow a second line when the breakdown appeared, and the save badge changed width between "Saving…" and "Saved" — between them the row grew and the whole page shifted under the cursor while you were still typing. */ .cost-cell { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; color: var(--measure); font-weight: 600; width: 150px; } .cost-cell .breakdown { /* Bounded, or the one long line of working inside it ("boards 2.1m² · hinges ×2 · …") sets the width of the whole column: the table lays out from its content, and this was taking 451px out of the grid while the board pickers were squeezed down to one letter. */ max-width: 140px; display: block; font-size: 10.5px; color: var(--ink-faint); font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-height: 14px; /* held open whether or not there is a breakdown */ } /* A fixed row height means nothing below a row can move when the row updates. 78, not 64, since the edging cell stacks three boxes: a cupboard's carcase, doors and shelving tape read down the cell in the order the heading names them, which costs a quarter of a row's height and saves two columns. */ .cupboard-grid tbody tr.cup-row { height: 78px; } .cupboard-grid tbody tr.cup-row > td { height: 78px; } tr.row-dirty .sticky-col-2 { box-shadow: inset 3px 0 0 var(--pending), 4px 0 8px -4px rgba(20, 24, 28, 0.22); } tr.row-saving .cost-cell { opacity: 0.5; } .save-state { font-size: 11px; font-weight: 600; letter-spacing: 0.04em; display: inline-flex; align-items: center; gap: 5px; /* Fixed width: "Saving…", "Saved" and "Error" must not resize the cell. */ width: 62px; white-space: nowrap; overflow: hidden; } .save-state.saved { color: var(--accent); } .save-state.dirty { color: var(--pending); } .save-state.error { color: var(--alert); } .save-state .dot { width: 7px; height: 7px; border-radius: 50%; background: currentColor; } /* ------------------------------------------------------- live totals dock */ /* The number that matters, always on screen. */ .totals-dock { position: fixed; left: 0; right: 0; bottom: 0; z-index: 30; background: var(--chrome-900); color: var(--chrome-ink); border-top: 1px solid #000; box-shadow: 0 -6px 24px rgba(0, 0, 0, 0.22); } .totals-dock-inner { max-width: 1560px; margin: 0 auto; padding: 10px 22px; display: flex; align-items: center; gap: 26px; flex-wrap: wrap; } .dock-stat { display: flex; flex-direction: column; gap: 1px; } .dock-stat .k { font-size: 9.5px; letter-spacing: 0.11em; text-transform: uppercase; color: var(--chrome-ink-soft); font-weight: 700; } .dock-stat .v { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; } .dock-stat.grand .v { font-size: 20px; color: #fff; letter-spacing: -0.01em; } .dock-spacer { flex: 1; } .dock-actions { display: flex; gap: 8px; } .dock-actions .btn.secondary { background: var(--chrome-700); color: var(--chrome-ink); border-color: var(--chrome-line); } .dock-actions .btn.secondary:hover { background: var(--chrome-line); color: #fff; } /* ------------------------------------------------------------ edging glyph */ /* Signature element. Four checkboxes called L1/L2/W1/W2 tell you nothing; a rectangle you click on its edges tells you exactly which edge gets tape. */ .edge-glyph { position: relative; width: 46px; height: 32px; margin: 0 auto; border: 1px dashed var(--rule-strong); border-radius: 2px; background: var(--sheet-sunk); } .edge-glyph input { position: absolute; opacity: 0; width: 0; height: 0; } .edge-glyph .e { position: absolute; cursor: pointer; background: var(--rule-strong); transition: background 0.1s; } .edge-glyph .e:hover { background: var(--ink-faint); } .edge-glyph .e.on { background: var(--accent); } .edge-glyph .e-l1 { top: -1px; left: 4px; right: 4px; height: 4px; border-radius: 2px; } .edge-glyph .e-l2 { bottom: -1px; left: 4px; right: 4px; height: 4px; border-radius: 2px; } .edge-glyph .e-w1 { left: -1px; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; } .edge-glyph .e-w2 { right: -1px; top: 4px; bottom: 4px; width: 4px; border-radius: 2px; } .edge-glyph-label { font-size: 9px; color: var(--ink-faint); text-align: center; margin-top: 3px; } /* ------------------------------------------------------------------ notices */ .flash { background: var(--pending-wash); border: 1px solid #ecd9b2; color: #6f4a0d; padding: 10px 14px; border-radius: var(--radius); margin-bottom: 16px; font-size: 13px; } .flash.error { background: var(--alert-wash); border-color: #e6c2be; color: #7d2c24; } .flash.ok { background: var(--accent-wash); border-color: #bfd9cd; color: var(--accent); } .empty-state { color: var(--ink-faint); padding: 26px 18px; text-align: center; font-size: 13px; } .empty-state strong { display: block; color: var(--ink-soft); font-size: 14px; margin-bottom: 4px; } .note-inline { font-size: 12px; color: var(--ink-faint); } tr.warn-row td { background: var(--alert-wash) !important; color: var(--alert); font-weight: 600; } tr.group-start td { border-top: 2px solid var(--rule-strong); } /* ------------------------------------------------------------- totals table */ .totals-table td { padding: 5px 10px; } .totals-table tr.sub td { border-top: 1px solid var(--rule-strong); font-weight: 600; } .totals-table tr.grand td { font-weight: 700; font-size: 15px; border-top: 2px solid var(--ink); border-bottom: none; padding-top: 9px; } /* -------------------------------------------------------------- report deck */ .doc-deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(255px, 1fr)); gap: 12px; } .doc-card { border: 1px solid var(--rule); border-radius: var(--radius); padding: 14px; background: var(--sheet); display: flex; flex-direction: column; gap: 8px; transition: border-color 0.12s, box-shadow 0.12s; } .doc-card:hover { border-color: var(--rule-strong); box-shadow: var(--shadow); } .doc-card .doc-name { font-weight: 650; font-size: 13.5px; } .doc-card .doc-desc { font-size: 12px; color: var(--ink-faint); flex: 1; line-height: 1.45; } .doc-card .doc-links { display: flex; gap: 6px; } .filter-bar { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 12px; align-items: end; } /* ---------------------------------------------------------------- print doc */ /* ========================================================================== Client-facing paperwork. Everything here sits on one modular grid, because the eye reads near-misses as sloppiness even when it can't name what's wrong. Two rules hold the page together: 1. VERTICAL RHYTHM — every margin, padding and gap is a whole multiple of one base unit, and line-heights are multiples of it too. Nothing is 11px because 11 "looked right"; the page has a beat. 2. A SIX-COLUMN GRID — every left edge on the page is a gridline of the same six-column grid. Label/value pairs split at 2 of 6; balanced pairs split at 3 of 6. Both are derived from one grid, so the axes relate to each other instead of merely coexisting. Numbers are tabular everywhere, so decimal points stack down a column. ========================================================================== */ :root { /* The beat. Every vertical measure below is a multiple of this. */ --u: 8px; /* Six-column grid. --axis is the label/value split (2 of 6); --half is the balanced split (3 of 6). Both are gridlines of one grid. */ --doc-cols: 6; --axis: 33.3333%; --half: 50%; --pad: calc(var(--u) * 8); /* 64px — the content edge, left and right */ /* Strictly monochrome, because the mark is: the logo samples as pure black on pure white with no colour anywhere. A gold or bronze accent was my invention and read as someone else's brand. The only colour on a client document is the red on the payment terms, which has to be noticed. */ --doc-ink: #0F0F0F; /* the logo's black */ --doc-ink-soft: #55565A; --doc-ink-faint: #8B8D91; --doc-paper: #FFFFFF; --doc-rule: #DEDEDF; /* neutral hairline, not warm stone */ --doc-rule-strong: #0F0F0F; --doc-accent: #0F0F0F; /* marks and rules are ink, not a colour */ --doc-wash: #F5F5F6; /* neutral, so it sits under a black mark */ --doc-alert: #9A3B2E; --doc-serif: "Iowan Old Style", "Palatino Linotype", Palatino, Cambria, Georgia, "Times New Roman", serif; --doc-sans: "Helvetica Neue", Helvetica, Arial, sans-serif; } .paper { background: var(--doc-paper); max-width: 860px; margin: 0 auto; padding: calc(var(--u) * 7) var(--pad) 0; border: 1px solid var(--rule); border-radius: 2px; box-shadow: 0 12px 40px rgba(20, 18, 15, 0.09); font-family: var(--doc-sans); color: var(--doc-ink); font-size: 13px; /* 24px = 3 units. Body text lands on the grid. */ line-height: calc(var(--u) * 3); position: relative; /* Keep the type colour even: no stretched words, no ragged hyphen breaks. */ text-rendering: optimizeLegibility; font-variant-numeric: tabular-nums; font-feature-settings: "tnum" 1, "kern" 1; } /* ------------------------------------------------------------- letterhead */ .lh { position: relative; margin-bottom: calc(var(--u) * 4); } .lh-page { position: absolute; top: calc(var(--u) * -3); right: 0; font-size: 8.5px; line-height: calc(var(--u) * 1); letter-spacing: 0.22em; text-transform: uppercase; color: var(--doc-ink-faint); } /* Equal side columns, so the centre block is genuinely centred rather than merely between two things. */ .lh-grid { display: grid; grid-template-columns: calc(var(--u) * 34) 1fr calc(var(--u) * 34); align-items: center; gap: calc(var(--u) * 3); min-height: calc(var(--u) * 19); } .lh-logo { display: flex; align-items: center; } .logo-co { max-width: calc(var(--u) * 34); max-height: calc(var(--u) * 18); object-fit: contain; object-position: left center; } .lh-co { text-align: center; } .lh-name { font-family: var(--doc-serif); font-size: 15px; line-height: calc(var(--u) * 3); font-weight: 400; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doc-ink); } .lh-addr { margin-top: var(--u); font-size: 10px; line-height: calc(var(--u) * 2); letter-spacing: 0.06em; color: var(--doc-ink-soft); } .lh-addr span { display: block; } /* Both marks in an identical box, right-aligned, so neither dominates. */ .lh-partners { display: flex; flex-direction: column; align-items: flex-end; justify-content: center; gap: var(--u); } .logo-pt { width: calc(var(--u) * 16); height: calc(var(--u) * 5); object-fit: contain; object-position: right center; opacity: 0.88; } .lh-rule { height: 1px; background: var(--doc-rule); margin-top: calc(var(--u) * 3); } /* --------------------------------------------------------- opening block */ .doc-open { margin: 0 0 calc(var(--u) * 5); } .eyebrow-rule { margin: 0 0 calc(var(--u) * 1.5); /* Same size as the title beneath it, and bold: this line says what the quote is actually for, and at 9px grey it was the quietest thing on the page. Tracking comes right down — 0.3em is for small caps, not for 32px. */ /* Six units, not five: a long name — "Quotation · Basement kitchenette & scullery" — wraps onto two lines, and at five they all but touched. */ font-size: 32px; line-height: calc(var(--u) * 6); /* The same size as the client's name but not bold: at this size weight adds nothing and makes every document shout. */ font-weight: 400; letter-spacing: 0.02em; text-transform: uppercase; color: var(--doc-ink); text-wrap: balance; } .eyebrow-rule::after { content: ""; display: block; width: calc(var(--u) * 5); height: 1px; background: var(--doc-ink); margin-top: calc(var(--u) * 1.5); } .doc-title { font-family: var(--doc-serif); font-size: 32px; line-height: calc(var(--u) * 6); font-weight: 400; letter-spacing: -0.005em; margin: 0 0 var(--u); color: var(--doc-ink); text-wrap: balance; } .doc-meta { margin: 0; font-size: 11.5px; line-height: calc(var(--u) * 2); color: var(--doc-ink-soft); letter-spacing: 0.02em; } .doc-meta .sep { padding: 0 var(--u); color: var(--doc-rule); } /* The extra lines a client carries, under the meta line. One to a row, so a column of them reads down the page; the label column is wide enough for "Their order no:" and no wider. */ .doc-extra { margin: calc(var(--u) * 1.5) 0 0; } .doc-extra p { margin: 0; font-size: 11.5px; line-height: calc(var(--u) * 2); color: var(--doc-ink-soft); letter-spacing: 0.02em; } .doc-extra .x-label { display: inline-block; min-width: calc(var(--u) * 24); padding-right: var(--u); color: var(--doc-ink-faint); } .doc-ref { margin: calc(var(--u) * 2) 0 0; font-size: 9.5px; line-height: calc(var(--u) * 2); letter-spacing: 0.18em; text-transform: uppercase; color: var(--doc-ink-faint); } .doc-intro { font-family: var(--doc-serif); font-size: 16px; line-height: calc(var(--u) * 3); color: var(--doc-ink); margin: 0 0 calc(var(--u) * 4); padding-bottom: calc(var(--u) * 3); border-bottom: 1px solid var(--doc-rule); /* A comfortable measure: long lines are the commonest reason a page feels hard to read without looking obviously wrong. */ max-width: none; /* The sentence and the section beneath it were running together. */ margin-bottom: calc(var(--u) * 5); padding-bottom: calc(var(--u) * 4); text-wrap: pretty; } /* -------------------------------------------------------------- sections */ .block { margin: 0 0 calc(var(--u) * 4); } .block-head { font-family: var(--doc-sans); font-size: 9px; line-height: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--doc-ink-faint); margin: 0 0 calc(var(--u) * 2); padding-bottom: var(--u); border-bottom: 1px solid var(--doc-rule); } .scope-head { font-size: 9px; line-height: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--doc-ink); margin: 0 0 calc(var(--u) * 1.5); } /* Label/value pairs split on the shared axis. */ .spec-list { display: grid; grid-template-columns: var(--axis) 1fr; gap: 0; margin: 0; font-size: 12.5px; } .spec-list dt, .spec-list dd { padding: var(--u) 0; line-height: calc(var(--u) * 2); border-bottom: 1px solid var(--doc-wash); min-height: calc(var(--u) * 4); } .spec-list dt { color: var(--doc-ink-soft); letter-spacing: 0.02em; } .spec-list dd { margin: 0; font-weight: 600; color: var(--doc-ink); } .tbc { color: var(--doc-ink-faint); font-weight: 400; font-style: italic; } /* Balanced pairs split on the other gridline. */ .two-col { display: grid; grid-template-columns: var(--half) 1fr; gap: 0 calc(var(--u) * 5); } .two-col.scope { align-content: start; } .scope-col { min-height: calc(var(--u) * 12); } ul.checklist { list-style: none; padding: 0; margin: 0; font-size: 12.5px; } ul.checklist li { padding: calc(var(--u) * 0.5) 0 calc(var(--u) * 0.5) calc(var(--u) * 2); line-height: calc(var(--u) * 2); position: relative; color: var(--doc-ink); } ul.checklist li::before { content: ""; position: absolute; left: 0; top: calc(var(--u) * 1.5); width: var(--u); height: 1px; background: var(--doc-ink); } ul.checklist li.tbc::before { display: none; } /* ------------------------------------------------------------------ total */ /* The grand total must land on the same right edge as the money column above it — that column is what the eye has been tracking down the page, and a figure inset by its own padding reads as a mistake even at a glance. So the block carries no horizontal padding: label on the left content edge, figure on the right, exactly like the table. The rule above spans the same width as the table's rules, and whitespace does the work a tint was doing badly. */ .doc-total { margin: calc(var(--u) * 5) 0 calc(var(--u) * 4); padding: calc(var(--u) * 3) 0 0; border-top: 2px solid var(--doc-rule-strong); } .doc-total-inner { display: flex; justify-content: space-between; align-items: baseline; gap: calc(var(--u) * 3); } /* The figure and the note it belongs to are one thing, so they are centred on each other. Right-aligning them independently left the number sitting off to one side of a wider line beneath it, which is what read as wrong. */ .doc-total-amount { display: inline-flex; flex-direction: column; align-items: center; } .doc-total .lbl { font-size: 10px; line-height: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.28em; text-transform: uppercase; color: var(--doc-ink-soft); } .doc-total .val { font-family: var(--doc-serif); font-size: 30px; line-height: calc(var(--u) * 5); font-weight: 400; letter-spacing: -0.01em; color: var(--doc-ink); font-variant-numeric: tabular-nums; } .doc-validity { display: block; margin-top: var(--u); text-align: center; font-size: 10px; line-height: calc(var(--u) * 2); letter-spacing: 0.1em; text-transform: uppercase; color: var(--doc-ink-faint); white-space: nowrap; } /* ------------------------------------------------------------ credentials */ .creds { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--u) calc(var(--u) * 5); padding: calc(var(--u) * 2) 0 calc(var(--u) * 3); border-top: 1px solid var(--doc-rule); border-bottom: 1px solid var(--doc-rule); margin-bottom: calc(var(--u) * 4); } .creds span { font-size: 9.5px; line-height: calc(var(--u) * 2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-ink-soft); /* No left padding: the words start on the same edge as every other line on the page. The mark hangs outside into the margin instead of pushing the text in, which is what made this block sit proud of the headings above and below it. */ position: relative; padding-left: 0; } .creds span::before { content: ""; position: absolute; left: calc(var(--u) * -2); /* Centred on the line by measurement, not by a guessed offset, so it stays centred at any size — including when the unit is re-scaled for print or for "fit on one page". */ top: 50%; width: calc(var(--u) * 0.5); height: calc(var(--u) * 0.5); border: 1px solid var(--doc-ink); transform: translateY(-50%) rotate(45deg); } /* ------------------------------------------------------------------ terms */ .terms-block { margin-bottom: calc(var(--u) * 4); } /* A line saying what a figure does not cover, under the table it belongs to. */ /* A heading gathering the rooms under it on a project quotation. */ .paper .group-row td { padding-top: calc(var(--u) * 2); font-size: 10px; font-weight: 700; letter-spacing: 0.16em; text-transform: uppercase; color: var(--doc-ink-soft); border-bottom: none; } .doc-aside { margin: calc(var(--u) * 2) 0 0; font-size: 12px; line-height: calc(var(--u) * 2.5); color: var(--doc-ink-soft); } /* Same axis as the specification, so the page has one secondary edge, not two. */ /* Half and half: the payment conditions are sentences, not labels, and were being squeezed into the narrow label column and broken mid-clause. */ .terms-grid { display: grid; grid-template-columns: var(--half) 1fr; gap: 0 calc(var(--u) * 4); font-size: 14.5px; } .terms-grid > div + div { margin-top: calc(var(--u) * 3); } .terms-grid .scope-head { margin-bottom: calc(var(--u) * 1); font-size: 10.5px; letter-spacing: 0.16em; } .terms-grid p { margin: 0; line-height: calc(var(--u) * 2.5); color: var(--doc-ink-soft); } .terms-grid p.hot { color: var(--doc-alert); font-weight: 600; } .doc-thanks { font-family: var(--doc-serif); font-size: 13.5px; line-height: calc(var(--u) * 3); font-style: italic; color: var(--doc-ink-soft); margin: 0 0 calc(var(--u) * 4); max-width: 62ch; text-wrap: pretty; } /* --------------------------------------------------------------- signing */ .sign-block { display: grid; grid-template-columns: var(--half) 1fr; gap: 0 calc(var(--u) * 5); margin-bottom: calc(var(--u) * 6); } .sign-col { display: flex; flex-direction: column; } /* The signature and the empty space above the client's line are the same height, so both rules sit on one line across the page. */ .sig { height: calc(var(--u) * 6); width: auto; align-self: flex-start; object-fit: contain; object-position: left bottom; } .sign-space { height: calc(var(--u) * 6); } .sign-line { border-top: 1px solid var(--doc-ink); margin-top: var(--u); padding-top: var(--u); } .sign-name { margin: 0; font-size: 12px; line-height: calc(var(--u) * 2.5); font-weight: 600; color: var(--doc-ink); } .sign-role { margin: calc(var(--u) * 1) 0 0; font-size: 9.5px; line-height: calc(var(--u) * 2); letter-spacing: 0.14em; text-transform: uppercase; color: var(--doc-ink-faint); } /* Bleeds to the page edge: the offset is the padding, exactly. */ .doc-band { margin: 0 calc(var(--pad) * -1); background: var(--doc-ink); color: #F5F5F6; text-align: center; padding: calc(var(--u) * 2); font-size: 11px; line-height: calc(var(--u) * 2); letter-spacing: 0.3em; text-transform: uppercase; font-weight: 500; } /* ------------------------------------------------------------------ tables */ .paper table { width: 100%; border-collapse: collapse; font-size: 12px; } .paper th { background: transparent; text-align: left; position: static; border-bottom: 1px solid var(--doc-rule-strong); padding: 0 0 var(--u); font-size: 8.5px; line-height: calc(var(--u) * 2); font-weight: 700; letter-spacing: 0.2em; text-transform: uppercase; color: var(--doc-ink-faint); } .paper td { border-bottom: 1px solid var(--doc-wash); padding: calc(var(--u) * 1.5) 0; line-height: calc(var(--u) * 2); color: var(--doc-ink); } /* Money and quantities right-aligned and tabular, so decimals stack. */ .paper td.num, .paper th.num { text-align: right; font-variant-numeric: tabular-nums; } .paper th + th, .paper td + td { padding-left: calc(var(--u) * 2); } .paper tbody tr:last-child td { border-bottom: 1px solid var(--doc-rule); } .stmt-table { width: 100%; border-collapse: collapse; margin-top: 0; font-size: 12.5px; } .stmt-table th { border-bottom: 1px solid var(--doc-rule-strong); padding: 0 calc(var(--u) * 2) var(--u); font-size: 8.5px; line-height: calc(var(--u) * 2); letter-spacing: 0.2em; text-transform: uppercase; color: var(--doc-ink-faint); text-align: right; } .stmt-table th:first-child { text-align: left; padding-left: 0; } /* A heading belongs over its own column. * * Every heading was set to the right while only the money column's figures * were, so the invoice number and the date sat under headings standing well * away from them — the heading pushed to the far edge of a wide column and the * value at the near edge. These two carry their own class so the heading and * what it labels are set the same way, and the money stays right where money * belongs. */ .stmt-table th.ref, .stmt-table td.ref { text-align: left; } .stmt-table td { padding: calc(var(--u) * 1.5) calc(var(--u) * 2); line-height: calc(var(--u) * 2); border-bottom: 1px solid var(--doc-wash); } .stmt-table td:first-child { padding-left: 0; } .stmt-table .stage { font-weight: 600; } .stmt-table .out { color: var(--doc-alert); font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .stmt-table .paid { color: #3E6B4A; font-weight: 600; font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; } .stmt-table .amt { text-align: right; font-variant-numeric: tabular-nums; } .stmt-table tr.tot td { font-weight: 700; border-top: 2px solid var(--doc-rule-strong); border-bottom: none; padding-top: calc(var(--u) * 2); font-size: 14px; } .stmt-head { color: var(--doc-ink); font-weight: 700; font-size: 9px; line-height: calc(var(--u) * 2); letter-spacing: 0.28em; text-transform: uppercase; margin: 0 0 calc(var(--u) * 2); } .invoice-note { font-family: var(--doc-serif); font-size: 13.5px; line-height: calc(var(--u) * 3); color: var(--doc-alert); margin: 0 0 calc(var(--u) * 4); padding-left: calc(var(--u) * 2); border-left: 2px solid var(--doc-alert); max-width: 62ch; } .paper-toolbar { max-width: 860px; margin: 0 auto calc(var(--u) * 2); display: flex; gap: var(--u); justify-content: flex-end; } /* -------------------------------------------------------------- cutting list */ .boardware { border: 2px solid #101315; padding: 0; background: #fff; font-family: var(--ui); } .boardware-head { padding: 14px 16px; border-bottom: 1px solid #101315; } .boardware-head .title-row { display: flex; justify-content: space-between; align-items: baseline; gap: 16px; } .boardware-head h2 { margin: 0; font-size: 17px; letter-spacing: 0.02em; color: #101315; text-transform: none; } .boardware-meta { display: grid; grid-template-columns: 150px 1fr; gap: 2px 12px; font-size: 12.5px; margin-top: 10px; } .boardware-meta dt { font-weight: 700; text-transform: uppercase; font-size: 10px; letter-spacing: 0.07em; color: #475056; padding-top: 2px; } .boardware-meta dd { margin: 0; } .boardware-banner { background: #d9e4d3; color: #7a3b1e; text-align: center; font-weight: 700; padding: 6px; font-size: 12.5px; letter-spacing: 0.03em; } .cut-table { border-collapse: collapse; font-size: 12px; width: 100%; min-width: 1180px; } .cut-table th, .cut-table td { border: 1px solid #b9bfba; padding: 4px 7px; white-space: nowrap; } .cut-table th { background: #eef0ec; position: sticky; top: 0; z-index: 2; } .cut-table td.num { text-align: right; font-family: var(--mono); font-variant-numeric: tabular-nums; } .cut-table input, .cut-table select { padding: 3px 5px; font-size: 12px; border-radius: 4px; } .cut-table .w-n { width: 46px; } .cut-table .w-sz { width: 82px; } .cut-table .w-q { width: 58px; } .cut-table .w-part { width: 165px; } .cut-table .w-board { width: 175px; } .cut-table .w-edge { width: 118px; } .cut-table tr.sep td { background: var(--sheet-sunk); height: 8px; padding: 0; border-left: none; border-right: none; } .cut-group-head td { background: var(--chrome-800); color: var(--chrome-ink); font-weight: 700; font-size: 11.5px; letter-spacing: 0.06em; text-transform: uppercase; } /* A cupboard whose code has not had its cutting list checked. Red on the heading, and said in words beside it — colour alone would be lost on a printed sheet, and this is read off a print at the saw. */ .cut-group-head.not-checked td { background: var(--alert); color: #fff; } .cut-unchecked { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; background: #fff; color: var(--alert); border-radius: 3px; padding: 0 5px; margin-left: 7px; text-transform: uppercase; } .cut-ok { color: var(--accent); } /* THE HOLD. A cutting list with a by-hand cupboard still unsigned. It PRINTS, deliberately: the buttons are shut, but a browser prints what is on the screen whether the program likes it or not, so a sheet that reaches the saw anyway arrives carrying the reason it should not have. */ .cut-hold { border: 3px solid var(--alert); background: var(--alert-wash); border-radius: 6px; padding: 12px 16px; margin: 0 0 14px; } .cut-hold strong { display: block; color: var(--alert); font-size: 15px; letter-spacing: 0.04em; text-transform: uppercase; } .cut-hold p { margin: 6px 0 0; color: var(--ink); font-size: 13.5px; } .cut-hold p.why { color: var(--ink-faint); font-size: 12.5px; } .cut-hold.done { border-color: var(--accent); background: var(--accent-wash, #eef5f0); } .cut-hold.done strong { color: var(--accent); } .hand-check-cell { background: var(--alert-wash); } .cut-check-cell { background: var(--measure-wash); } .override-badge { display: inline-block; font-size: 9.5px; font-weight: 700; letter-spacing: 0.06em; background: var(--pending-wash); color: var(--pending); border: 1px solid #ecd9b2; border-radius: 3px; padding: 0 4px; margin-left: 5px; text-transform: uppercase; } /* --------------------------------------------------------------- modal */ .modal-backdrop { position: fixed; inset: 0; background: rgba(20, 24, 28, 0.55); display: flex; align-items: center; justify-content: center; z-index: 60; padding: 24px; } .modal { background: var(--sheet); border-radius: var(--radius-lg); box-shadow: var(--shadow-lift); max-width: 560px; width: 100%; padding: 22px; max-height: 90vh; overflow-y: auto; } .modal h2 { margin-top: 0; } .modal .choice { border: 1px solid var(--rule); border-radius: var(--radius); padding: 13px 14px; margin-bottom: 10px; cursor: pointer; display: flex; gap: 11px; align-items: flex-start; } .modal .choice:hover { border-color: var(--measure); background: var(--measure-wash); } .modal .choice input { margin-top: 3px; } .modal .choice .t { font-weight: 650; font-size: 13.5px; } .modal .choice .d { font-size: 12px; color: var(--ink-soft); margin-top: 2px; line-height: 1.45; } /* ------------------------------------------------------------------- login */ .login-card { width: 400px; max-width: 100%; } .login-card .brand-mark { text-align: center; font-size: 12px; font-weight: 700; letter-spacing: 0.18em; text-transform: uppercase; color: var(--ink-faint); margin-bottom: 18px; } /* ------------------------------------------------------------------ toast */ .toast-stack { position: fixed; right: 20px; bottom: 76px; z-index: 70; display: flex; flex-direction: column; gap: 8px; } .toast { background: var(--chrome-900); color: #fff; padding: 10px 15px; border-radius: var(--radius); font-size: 13px; box-shadow: var(--shadow-lift); animation: toast-in 0.18s ease-out; } .toast.err { background: var(--alert); } @keyframes toast-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } } /* A name typed without a space — a pasted reference, a filename — breaks rather than stretching a list table past the edge of the window. */ .card > summary { overflow-wrap: anywhere; min-width: 0; } /* The catalogue tables — materials, hardware, cupboard codes — have eleven columns of editable boxes and are wider than a laptop, never mind a phone. They scroll sideways inside their card at every width rather than pushing the page off the side of the screen. A table that has been moved into a .sheet-scroll box is the exception: there the BOX scrolls, both ways, and it is capped to the height of the window so the sideways bar is always on screen. Letting the table scroll itself as well put that bar at the foot of all 174 rows, which is where it used to hide. */ #cat-table:not(.sheet-sticky) { display: block; overflow-x: auto; max-width: 100%; min-width: 100%; -webkit-overflow-scrolling: touch; } .sheet-scroll > table { display: table; overflow: visible; } /* ------------------------------------------------------------- responsive */ @media (max-width: 900px) { .grid.cols-2, .grid.cols-3, .grid.cols-4, .grid.cols-5, .grid.cols-6 { grid-template-columns: 1fr; } .paper { padding: 26px 20px; } .paper .two-col, .paper .sign-row { grid-template-columns: 1fr; gap: 18px; } .totals-dock-inner { gap: 14px; padding: 8px 14px; } .dock-stat .v { font-size: 13px; } .dock-stat.grand .v { font-size: 17px; } main.with-topbar { padding: 18px 14px 150px; } } @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.001ms !important; transition-duration: 0.001ms !important; } } /* ------------------------------------------------------------------ print */ /* ------------------------------------------------------------ fit one page */ /* Everything scales off one unit and one font size, so squeezing a quote onto a single sheet is a matter of turning both down — the grid, the rhythm and every alignment hold, because they are all multiples of the same unit. */ .paper.fit-page { --u: 3.4pt; font-size: 8pt; } .paper.fit-page .doc-title { font-size: 16pt; } .paper.fit-page .doc-intro { font-size: 8.5pt; } .paper.fit-page .doc-total .val { font-size: 15pt; } .paper.fit-page .lh-name { font-size: 8.5pt; } .paper.fit-page .spec-list, .paper.fit-page ul.checklist, .paper.fit-page .terms-grid { font-size: 9pt; } .paper.fit-page table { font-size: 7.5pt; } .paper.fit-page .doc-thanks { display: none; } /* Why "fit on one page" made words sit on top of each other. * * Everything on a document is spaced in units of --u, line-heights included, * which are written as multiples of it. Fit-page shrinks --u to 3.4pt and then * sets font sizes on particular blocks in pt — but those blocks keep their * unit-based line-heights, and the two no longer relate. The terms block ended * up as 9pt type on an 8.5pt line, the tables as 7.5pt on 6.8pt, the address * as 10pt on 9.1pt: a line shorter than the type it carries, which has to * collide. * * Rather than chase each one, every line inside a shrunk sheet is measured * against its own type. 1.32 is tight enough to keep the saving and can never * be shorter than the letters, whatever size an element ends up at and * whichever font the machine doing the printing substitutes. */ .paper.fit-page, .paper.fit-page * { line-height: 1.32; } /* The date and number strip runs the full width; at the smaller size its last pair was ending up hard against the edge of the sheet. */ .paper.fit-page .doc-stamp { padding-right: calc(var(--u) * 1.5); } .paper.fit-page .stamp-pair { white-space: nowrap; } /* Nothing here forces a height. The closing band became a fixed footer, so it no longer needs pushing to the bottom — and the min-height that used to do the pushing (261mm) was taller than the content area a 18/26mm margin leaves (253mm), which guaranteed a second, empty page every time. */ /* A cutting-list row that is worked out from the quote's extras — a kickplate, a ceiling filler, a custom panel. It has no cupboard and no recipe behind it, so there is nowhere to store an edit: it is shown, and plainly not editable, rather than offering boxes that cannot be saved. */ tr.from-extras td { background: var(--wash, #f4f5f6); } tr.from-extras input, tr.from-extras select { border-style: dashed; color: var(--ink-soft); } /* The colour, in a column of its own. Blank means "follow the cupboard", which the placeholder shows, so a pinned colour and an inherited one look different at a glance. */ .cut-table .w-colour { width: 190px; } .cut-table .cl-colour { width: 100%; } .cut-table .cl-colour::placeholder { font-style: italic; color: var(--ink-faint, #9a958a); } /* The standing record at the foot of a job: every must-see thing from every step and every room. Quieter than the block at the top, which is about the work in front of you — this one is the history you go back to. */ /* The statement, edited where it is read. The boxes sit in the row rather than standing out of it, so the table still reads as a statement rather than as a form — and the two dates are narrow, because a date is a known width. */ .stage-table input[type="text"], .stage-table input:not([type]) { width: 100%; min-width: 90px; } .stage-table input[type="date"] { width: 132px; } .stage-table select { min-width: 104px; } .stage-table td { vertical-align: middle; } .stage-table .row-actions { white-space: nowrap; } .must-see.standing { border-color: var(--rule); } /* Nothing flagged yet. The card stays, so the place is always the same place, but it reads as quiet rather than as a warning with nothing in it. */ .must-see.standing.empty { background: transparent; } .must-see.standing.empty .card-head { background: transparent; } .must-see.standing .card-head { background: var(--sheet-sunk); } .must-see.standing .flag-room h3 { color: var(--ink-soft); } /* A form that exists only to be pointed at by a button elsewhere on the page, so nothing has to be nested inside anything. */ .hidden-form { display: none; } /* One bulk box per edge, each with its own way to take the tape off. */ .bulk-fields .edge-bulk { position: relative; } .bulk-fields .clear-edge { margin-top: 3px; font-size: 11px; color: var(--ink-soft); } .bulk-fields .clear-edge input { margin-right: 4px; } /* The two halves of the invoice register. Big enough to hit on a tablet, and each one says in a second line what kind of invoice it holds — "quote invoices" and "phased invoices" are not self-explanatory on their own. */ .reg-tabs { display: flex; gap: 10px; margin: 0 0 16px; flex-wrap: wrap; } .reg-tab { flex: 1 1 240px; min-height: 56px; display: flex; flex-direction: column; justify-content: center; gap: 2px; padding: 10px 16px; text-decoration: none; background: var(--sheet); border: 1px solid var(--rule); border-radius: var(--radius); color: var(--ink-soft); } .reg-tab strong { font-size: 14px; color: var(--ink); } .reg-tab span { font-size: 12px; } .reg-tab.on { border-color: var(--accent); box-shadow: inset 0 -3px 0 var(--accent); } .reg-tab.on strong { color: var(--accent); } /* A rand figure never breaks across two lines: "R 194" above "100,00" reads as two different numbers at a glance. */ .reg-tabs ~ .card table td.num, .reg-tabs ~ .card table th.num { white-space: nowrap; } /* A heading over a gathered set of rows, with that set's own money on it. */ tr.reg-group td { background: var(--wash, #f3f1ec); font-weight: 700; font-size: 12px; letter-spacing: 0.02em; border-top: 1px solid var(--rule-strong); } /* A quote in a phase that is not accepted: shown, but not counted. */ tr.not-agreed td { color: var(--ink-soft); } /* A cancelled phase is history, not work. */ .phase-card.is-cancelled { opacity: 0.72; } .phase-card.is-cancelled h2 { text-decoration: line-through; } /* One payment stage on the editor. Six boxes and a remove button on one line, because the set is read down the page as a schedule — a card per stage turned three stages into three screens. */ .stage-tpl-row { display: grid; grid-template-columns: minmax(140px, 1.3fr) 138px 84px minmax(120px, 1fr) minmax(130px, 1.1fr) minmax(120px, 1fr) 120px 34px; gap: 10px; align-items: end; padding: 10px 0; border-bottom: 1px dashed var(--rule); } .stage-tpl-row:last-child { border-bottom: none; } .stage-tpl-row .field { margin: 0; } /* The labels are the same six words on every row; only the first row says them. */ .stage-tpl-row:not(:first-child) label { display: none; } .stage-tpl-row [data-tpl-drop] { align-self: end; margin-bottom: 4px; } .stage-tpl-row [data-tpl-pct]:disabled { background: var(--wash, #f4f5f6); color: var(--ink-soft); } /* A quote whose price was agreed rather than costed. Marked plainly, because the cupboards underneath still look like they are driving the figure and they are not — mistaking the two is how a job gets re-priced by accident. */ .card.agreed-on { border-color: var(--measure, #2d7d9a); box-shadow: inset 4px 0 0 var(--measure, #2d7d9a); } .card.agreed-on > h2::after { content: "price agreed"; margin-left: 10px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 700; letter-spacing: 0.04em; text-transform: uppercase; vertical-align: 2px; background: var(--measure-wash, #eaf4f8); color: var(--measure, #2d7d9a); border: 1px solid #c3dbe4; } /* Only on paper. Written here, above every print block, because a plain rule further down the file would beat the media query that turns it on — the same cascade trap the phone layout is kept last to avoid. */ .print-only { display: none; } .sketch-print-head { margin-bottom: 8px; font-size: 13px; } @media print { .topbar, .no-print, .totals-dock, .toast-stack, .paper-toolbar, .combo-list, .help-bubble { display: none !important; } body { background: #fff; } main { max-width: none !important; padding: 0 !important; } .card { border: none; box-shadow: none; padding: 0; } .table-scroll { overflow: visible !important; border: none; } /* On paper nothing scrolls and nothing sticks. */ #cupboard-scroll { max-height: none !important; overflow: visible !important; } .sheet-scroll { max-height: none !important; min-height: 0 !important; overflow: visible !important; border: none; } .cupboard-grid thead th, table.sheet-sticky thead th { position: static !important; box-shadow: none !important; } /* ---- client paperwork, A4 -------------------------------------------- */ /* The page margin IS the content edge, so the grid on paper is the same grid as on screen — nothing shifts between preview and print. */ /* As little margin as the printer takes cleanly. 8mm is 0.32in — the custom margin that had to be typed into the print dialog every time. */ @page { size: A4; margin: 8mm; } .paper { /* One base unit for print: 4.5pt. Every measure below is a multiple, exactly as on screen, so the rhythm survives the change of medium. */ --u: 4.5pt; /* 8mm all round — the narrowest that still prints cleanly on the workshop printer, and what had to be set by hand in the print dialog before. */ --pad: 8mm; border: none; box-shadow: none; border-radius: 0; /* Room at the foot for the fixed closing band, and nothing less. * * The band is pinned to the bottom of every printed page, so the flowed * content has to stop short of it. That gap used to be 5 units — but the * band's own height is four units of padding plus a line of 8pt type, * which is taller than five units, and "fit on one page" then shrinks the * unit while the 8pt stays 8pt. So the taller the band got relative to the * unit, the further the last lines of the document slid underneath it: the * signature block landed on top of the closing line. * * The band is now given an exact height in points, and that same figure * plus a little air is what the sheet keeps clear. Neither can shrink with * the unit, so they cannot drift apart again. */ --band-h: 30pt; padding: 0 0 calc(var(--band-h) + 6pt); max-width: none; margin: 0; font-size: 9.5pt; line-height: calc(var(--u) * 3); -webkit-print-color-adjust: exact; print-color-adjust: exact; orphans: 3; widows: 3; } .lh-page { top: calc(var(--u) * -3); font-size: 7pt; } /* The same unit multiples as on screen. Halving them here as well as re-scaling the unit shrank the logo twice over — it printed about 14mm wide, which reads as an afterthought on a document going to a client. At 20 units it is ~32mm, a proper letterhead. */ .lh-grid { grid-template-columns: calc(var(--u) * 34) 1fr calc(var(--u) * 34); gap: calc(var(--u) * 3); min-height: 0; } .logo-co { max-width: calc(var(--u) * 34); max-height: calc(var(--u) * 18); } .logo-pt { width: calc(var(--u) * 16); height: calc(var(--u) * 5); } /* Images must actually be printed, not dropped as "background". */ .logo-co, .logo-pt, .sig { -webkit-print-color-adjust: exact; print-color-adjust: exact; } .lh-name { font-size: 10.5pt; line-height: calc(var(--u) * 3); } .lh-addr { font-size: 7.5pt; line-height: calc(var(--u) * 2); } .doc-title { font-size: 21pt; line-height: calc(var(--u) * 6); } .eyebrow-rule { font-size: 21pt; line-height: calc(var(--u) * 6); } .doc-meta, .doc-ref { font-size: 8pt; line-height: calc(var(--u) * 2); } /* The client's extra lines, at the same weight as the meta line they sit under, and never broken across a page from the name they belong to. */ .doc-extra p { font-size: 8pt; line-height: calc(var(--u) * 2); } .doc-extra { break-inside: avoid; page-break-inside: avoid; } .doc-intro { font-size: 11pt; line-height: calc(var(--u) * 3); } .block-head, .scope-head { font-size: 7pt; line-height: calc(var(--u) * 2); } .spec-list { font-size: 9.5pt; } .spec-list dt, .spec-list dd { padding: calc(var(--u) * 0.75) 0; line-height: calc(var(--u) * 2); min-height: 0; } ul.checklist { font-size: 9.5pt; } ul.checklist li { line-height: calc(var(--u) * 2); } .scope-col { min-height: calc(var(--u) * 8); } .doc-total .val { font-size: 20pt; line-height: calc(var(--u) * 5); } .doc-total .lbl { font-size: 8pt; } .creds span { font-size: 7pt; line-height: calc(var(--u) * 2); } .terms-grid { font-size: 11pt; } .terms-grid .scope-head { font-size: 8.5pt; } .doc-thanks { font-size: 10pt; line-height: calc(var(--u) * 3); } .sig, .sign-space { height: calc(var(--u) * 6); } .paper table { font-size: 9pt; } .paper th { font-size: 7pt; } /* A real running footer, fixed to the foot of every printed sheet. In normal flow it was simply the last block, so when the page ran out it went over to the top of the next one — a closing line arriving above the content it was meant to close. The page keeps clear space for it. */ .doc-band { position: fixed; /* The foot of the printed content area. A negative offset put it inside the paper margin, which the browser does not paint into — so it was pushed onto a page of its own instead. */ bottom: 0; left: 0; right: 0; /* Exactly the height the sheet keeps clear for it — see --band-h above. Centred rather than padded, so the figure is the whole truth. */ box-sizing: border-box; height: var(--band-h, 30pt); display: flex; align-items: center; justify-content: center; margin: 0 -8mm; padding: 0 calc(var(--u) * 2); font-size: 8pt; background: #0F0F0F !important; color: #F5F5F6 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } /* Nothing that reads as one thing may be split across two pages. */ .lh, .doc-open, .doc-total, .creds, .sign-block, .terms-block, .two-col, .scope-col, .doc-thanks, .invoice-note { break-inside: avoid; page-break-inside: avoid; } .block-head, .scope-head, .eyebrow-rule { break-after: avoid; page-break-after: avoid; } /* A4 at 96dpi is about 794px, which trips the narrow-screen rule that stacks two-column blocks. On paper there is always room for both, so the scope columns and the signing block stay side by side. */ .paper .two-col, .paper .sign-block { grid-template-columns: var(--half) 1fr !important; gap: 0 calc(var(--u) * 5) !important; } .paper .terms-grid, .paper .spec-list { grid-template-columns: var(--axis) 1fr !important; } .paper thead { display: table-header-group; } .paper tr, .stmt-table tr { break-inside: avoid; page-break-inside: avoid; } /* A heading must never be the last thing on a page. */ .block { break-before: auto; } /* ---- workshop paperwork ---------------------------------------------- */ .cut-table, .order-table { min-width: 0; width: 100%; font-size: 7.5pt; } .cut-table th, .cut-table td, .order-table th, .order-table td { padding: 1mm 1.5mm; line-height: 1.35; } .cut-table .w-tick, .cut-table .c-act, .cut-table td:last-child, .cut-table th:last-child, .order-table .ol-act, .order-table td:last-child, .order-table th:last-child { display: none; } .order-table input, .order-table select { border: none; background: transparent; padding: 0; } .boardware { border: 1.5px solid #000; } .boardware-banner { background: #EDEAE3 !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } .cut-group-head td { background: #0F0F0F !important; color: #fff !important; -webkit-print-color-adjust: exact; print-color-adjust: exact; } tr.warn-row td { background: #fff !important; border: 1px solid #0F0F0F !important; font-weight: 700; } } /* The hold banner on a cutting list: louder on paper than on the screen, and never dropped from it. A browser prints what is on the screen whatever the program thinks, so a sheet that reaches the saw anyway arrives carrying the reason it should not have. */ @media print { .cut-hold { border-width: 4px; page-break-inside: avoid; } .cut-hold.done { display: none; } } /* ------------------------------------------------------------ stage cards */ /* One card per payment stage. The three percentage stages show a share of the quote; Design and Add On show the lines you typed, because that's work the quote never covered. */ .stage-card { border-left: 3px solid var(--pending); } .stage-card.is-done { border-left-color: var(--accent); background: linear-gradient(90deg, var(--accent-wash) 0%, var(--sheet) 3%); } .stage-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; } .stage-name { font-size: 15px; font-weight: 650; border: 1px solid transparent; background: transparent; padding: 3px 6px; width: auto; min-width: 230px; margin-right: 8px; } .stage-name:hover { border-color: var(--rule-strong); background: var(--sheet); } .stage-amount { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 14px; font-weight: 600; color: var(--measure); padding: 7px 0; } .stage-amount.big { font-size: 22px; color: var(--ink); white-space: nowrap; } .pair .suffix { color: var(--ink-faint); font-size: 13px; } /* ------------------------------------------------------ department picker */ .cat-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 8px; margin-top: 8px; } .cat-pick { display: flex; align-items: center; gap: 9px; border: 1px solid var(--rule); border-radius: 6px; padding: 9px 11px; cursor: pointer; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 13px; color: var(--ink); margin: 0; background: var(--sheet); } .cat-pick:hover { border-color: var(--measure); background: var(--measure-wash); } .cat-pick .t { flex: 1; } .cat-pick .a { font-size: 12px; color: var(--ink-faint); } /* Already in another department — still pickable, but flagged so you don't double-count a cost without meaning to. */ .cat-pick.taken { opacity: 0.55; } .cat-pick.taken .t::after { content: " (already used)"; color: var(--pending); font-size: 11px; } /* Editable cutting list: keep the "was" hint from bulking the row. */ .cut-table.editable input { width: 100%; } .cut-table .was { display: block; font-size: 9.5px; color: var(--ink-faint); margin-top: 1px; } .cut-table .w-cust { width: 150px; } /* ---------------------------------------------------- cutting recipe editor */ /* A part is described as "which measurement, then how much off it" — one idea, so the select and its offset live in one cell, sized to fit each other rather than each claiming the full width and overlapping. */ .recipe-table { min-width: 1180px; } .recipe-table th, .recipe-table td { padding: 8px 10px; vertical-align: middle; } .recipe-table .c-part { width: 170px; } .recipe-table .c-dim { width: 230px; } .recipe-table .c-prev { width: 130px; } .recipe-table .c-qty { width: 120px; } .recipe-table .c-split { width: 112px; } .recipe-table .c-board { width: 165px; } .recipe-table .c-edge { width: 86px; } .recipe-table .c-act { width: 108px; white-space: nowrap; } .recipe-table .c-part input { font-weight: 600; } .recipe-table .c-qty input { text-align: center; font-family: var(--mono); } .dim-rule { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; } .dim-rule .basis { flex: 1 1 118px; min-width: 0; } .dim-rule .offset { flex: 0 0 66px; width: 66px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; } /* The rule read back in words, so you can check it without doing the sum. */ .rule-read { flex: 1 0 100%; font-size: 10.5px; color: var(--ink-faint); font-family: var(--mono); } .recipe-table .prev-size { font-family: var(--mono); font-variant-numeric: tabular-nums; font-size: 13px; font-weight: 600; color: var(--measure); } .recipe-table .prev-warn { display: block; font-size: 10px; font-weight: 700; color: var(--alert); text-transform: uppercase; letter-spacing: 0.05em; } /* A part limited to a range of lengths is not an error — it simply isn't cut on a cupboard this size, which the preview has to say rather than imply. */ .recipe-table .prev-off { display: block; font-size: 10px; font-weight: 600; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.05em; } /* "Only when the length is x to y", and "CNC over x" — the two rules that read the cupboard's Length off the quote. A blank box means no limit, so they are narrow and unobtrusive until something is typed into them. */ .recipe-table .c-when { width: 210px; } /* The Qty box and where its number comes from, read as one thing. */ .qty-src { width: 100%; margin-top: 4px; font-size: 11px; padding: 4px 6px; } .recipe-table .c-qty input[readonly] { background: var(--sheet-sunk); color: var(--ink-faint); cursor: not-allowed; } .recipe-table .c-when .basis { width: 100%; margin-bottom: 4px; } .len-rule { display: flex; gap: 4px; align-items: center; } /* Three of these stack in the "Only when" cell — length, height, depth. The label is fixed-width so the from/to boxes line up down the column, and a row that has been filled in is marked so a live limit is not missed at a glance. */ .len-rule + .len-rule { margin-top: 3px; } .len-lead { width: 44px; flex: none; font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; } .len-rule.is-set .len-lead { color: var(--measure); } .len-rule.is-set input { border-color: var(--measure); background: var(--measure-wash); } .len-rule input { width: 58px; padding: 6px 6px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; } .len-rule span { font-size: 11px; color: var(--ink-faint); } .cnc-over { display: flex; gap: 4px; align-items: center; margin-top: 4px; } .cnc-over span { font-size: 11px; color: var(--ink-faint); } .cnc-over input { width: 58px; padding: 5px 6px; text-align: center; font-family: var(--mono); font-variant-numeric: tabular-nums; } .inline-check { display: inline-flex; align-items: center; gap: 5px; margin: 0; text-transform: none; letter-spacing: 0; font-weight: 500; font-size: 12px; color: var(--ink-soft); } .inline-check input { width: auto; } .default-size { border: 1px solid var(--rule); border-radius: var(--radius); padding: 9px 14px; background: var(--sheet); text-align: right; } .default-size .k { display: block; font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; } .default-size .v { display: block; font-family: var(--mono); font-size: 15px; font-weight: 600; margin: 2px 0; } /* Header help: a "?" that explains the column without a manual. */ th .th-label { vertical-align: middle; } .help { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; margin-left: 5px; padding: 0; vertical-align: middle; border: 1px solid var(--rule-strong); border-radius: 50%; background: var(--sheet); color: var(--ink-faint); font-size: 11px; font-weight: 700; font-family: var(--ui); cursor: help; line-height: 1; } /* A 15px circle is a fingernail on a phone. Bigger where there is no mouse. */ @media (pointer: coarse) { .help { width: 26px; height: 26px; font-size: 13px; } /* min-* rather than width, and stated strongly enough to beat the .inline-check rule that sets these back to auto. */ input[type="checkbox"], input[type="radio"], .inline-check input[type="checkbox"], .inline-check input[type="radio"], td input[type="checkbox"], td input[type="radio"] { min-width: 22px; min-height: 22px; } } .help:hover, .help:focus-visible { background: var(--measure); border-color: var(--measure); color: #fff; } .help-bubble { position: fixed; z-index: 80; max-width: 330px; background: var(--chrome-900); color: var(--chrome-ink); padding: 10px 13px; border-radius: var(--radius); font-size: 12.5px; line-height: 1.5; box-shadow: var(--shadow-lift); text-transform: none; letter-spacing: 0; font-weight: 400; } .modal .rule-change { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; font-size: 12px; color: var(--ink-soft); } .modal .rule-change span { font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ink-faint); font-weight: 700; } .modal .rule-change code { font-family: var(--mono); background: var(--sheet-sunk); border: 1px solid var(--rule); border-radius: 4px; padding: 2px 7px; font-size: 12px; } .doc-thanks { margin: 18px 0 0; font-size: 12.5px; } /* --------------------------------------------------------------- combobox */ /* The real