/* Design Win Board — "Precision Engineering" * * Ported from the Google Stitch design system (docs/design-reference/). * Stitch shipped Tailwind-via-CDN plus Inter and JetBrains Mono from Google * Fonts. The CDN is replaced by the plain CSS below; the two typefaces are * SELF-HOSTED from /fonts, so this renders with the same faces Stitch used * while staying inside our CSP and working on an offline VPS. * * Rules carried over: * - status colour means one thing and appears in one place per meaning * - monospace with tabular figures for every machine value * - 6px radius, 1px borders, 4/8px spacing, 48px top bar */ /* Self-hosted variable fonts, latin subset. Both SIL Open Font License. * Stitch loaded these from Google Fonts, which our CSP blocks and an offline * VPS could not reach. These are the same faces served from our own origin, * and they are the single biggest reason the earlier build only RESEMBLED * the Stitch design — the system fallback stack looks materially different. */ @font-face { font-family: "Inter"; src: url("/fonts/inter-var.woff2") format("woff2"); font-weight: 100 900; font-style: normal; font-display: swap; } @font-face { font-family: "JetBrains Mono"; src: url("/fonts/jetbrains-mono-var.woff2") format("woff2"); font-weight: 100 800; font-style: normal; font-display: swap; } :root { --bg: #020617; --surface: #0b1220; --raised: #111c30; --raised-hi: #17243a; --line: #1f2d45; --line-hi: #334155; --ink: #f8fafc; --ink-dim: #94a3b8; --ink-faint: #64748b; --backlog: #64748b; --planning: #3b82f6; --working: #f59e0b; --done: #22c55e; --danger: #ef4444; --on-accent: #1a1204; --s1: 4px; --s2: 8px; --s3: 12px; --s4: 16px; --s5: 24px; --s6: 32px; --r: 6px; --bar: 3px; /* the status indicator on tiles and cards */ --topbar: 48px; /* Self-hosted faces first — listing ui-monospace ahead of JetBrains Mono would silently win and the downloaded font would never render. */ --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; --sans: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif; color-scheme: dark; } /* Dark is the product, not a preference. The light palette is kept but only * applies when explicitly opted into with , so a * machine set to light mode no longer flips the whole app. */ :root[data-theme="light"] { --bg: #eef1f5; --surface: #ffffff; --raised: #ffffff; --raised-hi: #f5f8fc; --line: #dde3ea; --line-hi: #c3ccd8; --ink: #0b1220; --ink-dim: #4a5568; --ink-faint: #6b7688; --planning: #1d4ed8; --working: #b45309; --done: #15803d; --danger: #b91c1c; --on-accent: #ffffff; color-scheme: light; } * { box-sizing: border-box; } html, body { height: 100%; } /* The `hidden` attribute only sets display:none in the UA stylesheet, so ANY * author rule with an explicit display beats it. Several components here are * display:grid or display:flex, which meant JS-hidden fields kept rendering * and overlapped the ones above them. This makes hidden actually hidden. */ [hidden] { display: none !important; } body { margin: 0; background: var(--bg); color: var(--ink); font: 14px/1.5 var(--sans); font-variant-numeric: tabular-nums; -webkit-font-smoothing: antialiased; } /* Full-height pages are a flex column: the bars take their natural height * and the board takes whatever is left. Previously each page subtracted a * hard-coded pixel count from 100dvh, so the moment a header wrapped onto a * second line the maths was wrong and everything below it collided. */ body.fixed { display: flex; flex-direction: column; height: 100dvh; overflow: hidden; } body.fixed > .topbar, body.fixed > .pickbar, body.fixed > .custhead { flex: none; } body.fixed > .boardwrap, body.fixed > .meetwrap, body.fixed > .dash { flex: 1; min-height: 0; } .mono, .m, .kpi .v, .card .meta, .rail .device, .row .who, .row .when { font-family: var(--mono); } /* ---------------------------------------------------------- top bar */ .topbar { display: flex; align-items: center; gap: var(--s4); height: var(--topbar); padding: 0 var(--s4); background: var(--surface); border-bottom: 1px solid var(--line); position: sticky; top: 0; z-index: 40; } .brand { display: inline-flex; align-items: center; gap: var(--s2); font: 700 19px/1 var(--sans); letter-spacing: -.02em; color: var(--ink); text-decoration: none; } .brand svg { width: 18px; height: 18px; display: block; color: var(--ink-dim); } .nav { display: flex; gap: var(--s1); } .nav a { color: var(--ink-dim); text-decoration: none; font: 500 14px/1 var(--sans); padding: 15px 10px 14px; border-bottom: 2px solid transparent; } .nav a:hover { color: var(--ink); } .nav a[aria-current="page"] { color: var(--ink); font-weight: 600; border-bottom-color: var(--working); } .grow { flex: 1; } .picker { display: flex; align-items: center; gap: var(--s2); min-width: 0; } .picker label { font: 600 10px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-faint); margin: 0; white-space: nowrap; } select.customer { font: 500 12.5px/1 var(--mono); color: var(--ink); background: var(--surface); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 9px 30px 9px 11px; cursor: pointer; max-width: 230px; min-height: 36px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 16px) 15px, calc(100% - 11px) 15px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.customer:hover { border-color: var(--ink-faint); } .btn { font: 600 13.5px/1 var(--sans); color: var(--ink); background: var(--raised); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 10px 14px; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 6px; min-height: 38px; white-space: nowrap; transition: background .15s ease, border-color .15s ease, filter .15s ease; } .btn:hover { background: var(--raised-hi); border-color: var(--ink-faint); } .btn.primary { background: var(--working); color: var(--on-accent); border-color: var(--working); } .btn.primary:hover { filter: brightness(1.08); } .btn.ghost { background: transparent; } .btn.danger { color: var(--danger); background: transparent; border-color: transparent; } .btn.danger:hover { background: color-mix(in srgb, var(--danger) 12%, transparent); } .btn[disabled] { opacity: .45; pointer-events: none; } :where(a, button, input, textarea, select, [tabindex]):focus-visible { outline: 2px solid var(--working); outline-offset: 2px; border-radius: 4px; } /* -------------------------------------------------- dashboard (Today) * Fixed quadrants: the page never scrolls, each pane scrolls its own body. */ .dash { min-height: 0; display: grid; grid-template-rows: auto 1fr 1fr; grid-template-columns: 1fr 1fr; gap: var(--s3); padding: var(--s3); overflow: hidden; } .kpis { grid-column: 1 / -1; display: grid; gap: var(--s3); grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } .kpi { background: var(--surface); border: 1px solid var(--line); border-left: var(--bar) solid var(--line-hi); border-radius: var(--r); padding: 11px var(--s3) 13px; display: flex; flex-direction: column; gap: 6px; min-width: 0; } .kpi .k { font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } .kpi .v { font: 600 24px/1 var(--mono); letter-spacing: -.02em; overflow: hidden; text-overflow: ellipsis; } .kpi .s { font: 500 10.5px/1 var(--mono); color: var(--ink-faint); } .kpi.money { border-left-color: var(--planning); } .kpi.weight { border-left-color: var(--done); } .kpi.work { border-left-color: var(--working); } .kpi.late { border-left-color: var(--danger); } .kpi.late .v { color: var(--danger); } .pane { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); display: flex; flex-direction: column; min-height: 0; overflow: hidden; } .pane > header { display: flex; align-items: center; gap: var(--s2); padding: 11px var(--s3); border-bottom: 1px solid var(--line); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); flex: none; } .pane > header .n { color: var(--ink-faint); font-family: var(--mono); letter-spacing: 0; text-transform: none; } .pane > .body { flex: 1; min-height: 0; overflow: auto; padding: var(--s3); } .pane.alert > header { color: var(--danger); } /* work tiles */ .tiles { display: grid; gap: var(--s2); grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); } .tiles.wide { grid-template-columns: 1fr; } .tile { display: block; text-decoration: none; color: inherit; position: relative; background: var(--raised); border: 1px solid var(--line); border-left: var(--bar) solid var(--line-hi); border-radius: var(--r); padding: 11px var(--s3); transition: background .15s ease, border-color .15s ease; } .tile:hover { background: var(--raised-hi); border-color: var(--line-hi); } .tile .t { font: 500 14px/1.35 var(--sans); margin-bottom: 7px; padding-right: 54px; overflow-wrap: anywhere; } .tile .who { font: 400 12.5px/1.3 var(--sans); color: var(--ink-dim); } .tile .part { font: 500 11px/1.4 var(--mono); color: var(--ink-faint); margin-top: 2px; } .tile .when { position: absolute; top: 11px; right: var(--s3); font: 500 11px/1 var(--mono); color: var(--ink-faint); } .tile .when.late { color: var(--danger); } .tile .when.soon { color: var(--working); } .tile.working { border-left-color: var(--working); } .tile.late { border-left-color: var(--danger); } .tile.nodate { border-left-color: var(--backlog); } /* a wide attention row with a badge on the right */ .tile.row-tile { display: flex; align-items: center; gap: var(--s3); } .tile.row-tile .main { flex: 1; min-width: 0; } .tile.row-tile .t { margin-bottom: 3px; padding-right: 0; } .tile.row-tile .badge { flex: none; font: 500 11px/1 var(--mono); border: 1px solid var(--line-hi); border-radius: 4px; padding: 5px 8px; color: var(--ink-faint); } .tile.row-tile.late .badge { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 55%, transparent); } /* top-customer rows: name, value, share, full-width underline bar */ .crow { display: block; text-decoration: none; color: inherit; padding: 11px 2px 9px; } .crow + .crow { border-top: 1px solid var(--line); } .crow:hover .nm { color: var(--working); } .crow .top { display: flex; align-items: baseline; gap: var(--s2); } .crow .nm { font: 600 15px/1.2 var(--sans); } .crow .v { margin-left: auto; font: 600 13px/1 var(--mono); color: var(--done); } .crow .pc { font: 500 12px/1 var(--mono); color: var(--ink-faint); min-width: 38px; text-align: right; } .crow .sub { font: 500 11px/1 var(--mono); color: var(--ink-faint); margin-top: 5px; } .crow .track { height: 2px; background: var(--line); margin-top: 8px; } .crow .track i { display: block; height: 100%; background: var(--done); } /* section divider inside a pane */ .subhead { display: flex; align-items: center; gap: var(--s2); font: 600 10px/1 var(--sans); letter-spacing: .11em; text-transform: uppercase; color: var(--ink-faint); padding: var(--s3) 2px 8px; margin-top: var(--s2); border-bottom: 1px solid var(--line-hi); } .subhead:first-child { margin-top: 0; padding-top: 2px; } .subhead span { font-family: var(--mono); letter-spacing: 0; } /* project rows in the pipeline pane */ .prow { display: block; text-decoration: none; color: inherit; padding: 11px 2px 10px; } .prow + .prow { border-top: 1px solid var(--line); } .prow:hover .nm { color: var(--working); } .prow .top { display: flex; align-items: baseline; gap: var(--s2); } .prow .nm { font: 600 15px/1.2 var(--sans); } .prow .v { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--ink-faint); } .prow .sub { display: flex; gap: var(--s2); align-items: center; margin-top: 6px; font: 500 11px/1 var(--mono); color: var(--ink-faint); flex-wrap: wrap; } .prow .tag { font: 600 9.5px/1 var(--sans); letter-spacing: .08em; text-transform: uppercase; border: 1px solid var(--line); border-radius: 3px; padding: 3px 5px; color: var(--ink-dim); } .prow.internal .tag { color: var(--planning); border-color: color-mix(in srgb, var(--planning) 45%, transparent); } .prow .ear { color: var(--done); } .prow .segs { display: flex; gap: 3px; margin-top: 8px; } .prow .seg { font: 600 10.5px/1 var(--mono); padding: 4px 7px; border-radius: 3px; background: var(--line); color: var(--ink-dim); } .prow .seg.p { background: color-mix(in srgb, var(--planning) 25%, var(--line)); color: var(--planning); } .prow .seg.w { background: color-mix(in srgb, var(--working) 25%, var(--line)); color: var(--working); } /* funnel stage rows */ .srow { padding: 11px 2px; } .srow + .srow { border-top: 1px solid var(--line); } .srow .top { display: flex; align-items: center; gap: var(--s2); } .srow .nm { font: 500 15px/1.2 var(--sans); } .srow .ct { font: 500 11px/1 var(--mono); color: var(--ink-dim); border: 1px solid var(--line); border-radius: 4px; padding: 3px 6px; } .srow .v { margin-left: auto; font: 600 13px/1 var(--mono); color: var(--done); } .srow .track { height: 5px; border-radius: 3px; background: var(--line); margin-top: 9px; overflow: hidden; } .srow .track i { display: block; height: 100%; background: var(--planning); border-radius: 3px; } .paneblank { color: var(--ink-faint); font-size: 13px; padding: var(--s4); text-align: center; } /* ------------------------------------------------------------ boards */ .boardwrap { min-height: 0; overflow: auto; } .flat { display: grid; grid-template-columns: repeat(4, minmax(260px, 1fr)); min-width: max-content; gap: 0 var(--s5); padding: 0 var(--s4) var(--s5); align-items: start; } .lanes { display: grid; grid-template-columns: 220px repeat(4, minmax(250px, 1fr)); min-width: max-content; gap: 0 var(--s5); padding: 0 var(--s4) var(--s5); } .chead { position: sticky; top: 0; z-index: 20; background: var(--bg); padding: var(--s4) 0 9px; display: flex; align-items: center; gap: var(--s2); } .chead .label { font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); } .chead .n { margin-left: auto; font: 500 12px/1 var(--mono); color: var(--ink-faint); } .chead::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 2px; background: var(--line-hi); } .chead[data-status="backlog"]::after { background: var(--backlog); } .chead[data-status="planning"]::after { background: var(--planning); } .chead[data-status="working"]::after { background: var(--working); } .chead[data-status="done"]::after { background: var(--done); } .chead.rail { grid-column: 1; } .chead.rail::after { background: var(--line); } .cell { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s3) 0; min-height: 76px; transition: background .12s ease; } .cell.over { background: color-mix(in srgb, var(--working) 8%, transparent); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--working) 45%, transparent); border-radius: var(--r); } /* lane rail */ /* Each swimlane is a banded row with a hard top rule, so ten lanes read * as ten lanes instead of one continuous wall of cards. */ .lanes .rail, .lanes .cell { border-top: 2px solid var(--line-hi); } .lanes .rail { position: sticky; left: 0; z-index: 15; background: var(--surface); padding: var(--s4) var(--s4) var(--s4) var(--s3); margin-right: calc(var(--s5) * -1); display: flex; flex-direction: column; gap: 5px; border-right: 1px solid var(--line); } .lanes .cell { padding: var(--s4) 0; } /* alternate banding, kept very low contrast */ .lanes .lane-alt.rail { background: var(--raised); } .lanes .lane-alt.cell { background: color-mix(in srgb, var(--raised) 40%, transparent); } .rail .project { font: 600 17px/1.25 var(--sans); overflow-wrap: anywhere; } .rail .device { font: 500 12px/1.3 var(--mono); color: var(--ink-dim); } .rail .stage { font: 400 13px/1.3 var(--sans); color: var(--ink-dim); } .rail .counts { font: 500 12px/1 var(--mono); color: var(--ink-faint); } .rail .desc { font: 400 12.5px/1.45 var(--sans); color: var(--ink-dim); margin: 2px 0 4px; } .valuebox { border: 1px solid var(--line); border-radius: var(--r); padding: 9px 10px; margin: var(--s2) 0 6px; background: var(--surface); } .valuebox .top { display: flex; align-items: center; gap: var(--s2); } .valuebox .ear { font: 600 15px/1 var(--mono); color: var(--working); } .valuebox .conf { margin-left: auto; font: 600 10.5px/1 var(--mono); letter-spacing: .04em; padding: 3px 6px; border-radius: 4px; border: 1px solid var(--line-hi); color: var(--ink-faint); } .valuebox .conf[data-c="high"] { color: var(--done); border-color: var(--done); } .valuebox .conf[data-c="mid"] { color: var(--working); border-color: var(--working); } .valuebox .track { height: 4px; border-radius: 2px; background: var(--line); margin: 9px 0 8px; overflow: hidden; } .valuebox .track i { display: block; height: 100%; background: var(--done); } .valuebox .track.mid i { background: var(--working); } .valuebox .weighted { font: 500 12px/1 var(--mono); color: var(--ink-dim); } /* cards */ .card { background: var(--surface); border: 1px solid var(--line); border-left: var(--bar) solid var(--line-hi); border-radius: var(--r); padding: var(--s3); cursor: grab; display: block; position: relative; transition: background .15s ease, border-color .15s ease; } .card:hover { background: var(--raised-hi); border-color: var(--line-hi); } .card:active { cursor: grabbing; } .card.dragging { opacity: .35; } .card .title { font: 500 14px/1.35 var(--sans); overflow-wrap: anywhere; } .card .meta { display: flex; align-items: center; gap: 6px; margin-top: 9px; font: 500 11.5px/1 var(--mono); color: var(--ink-faint); } .card .meta .who { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .card .meta .due { margin-left: auto; } .card .meta .due.soon { color: var(--working); } .card .meta .due.late { color: var(--danger); } .card .flag { color: var(--danger); font-weight: 700; } .card[data-status="planning"] { border-left-color: var(--planning); } .card[data-status="working"] { border-left-color: var(--working); } .card[data-status="done"] { border-left-color: var(--done); } .card[data-status="done"] .title { text-decoration: line-through; color: var(--ink-dim); } .card .tick { position: absolute; right: var(--s3); bottom: var(--s3); color: var(--done); } .addcard { font: 500 13.5px/1 var(--sans); color: var(--ink-faint); background: none; border: 1px dashed var(--line-hi); border-radius: var(--r); padding: 12px; cursor: pointer; width: 100%; min-height: 42px; transition: color .15s ease, border-color .15s ease; } .addcard:hover { color: var(--ink); border-color: var(--ink-faint); } /* customer board header */ .custhead { padding: var(--s4) var(--s4) var(--s3); border-bottom: 1px solid var(--line); } .crumbs { font: 400 13px/1 var(--sans); color: var(--ink-dim); margin-bottom: 9px; } .crumbs a { color: var(--ink-dim); text-decoration: none; } .crumbs a:hover { color: var(--ink); } .custhead h1 { font: 700 27px/1.1 var(--sans); margin: 0 0 9px; letter-spacing: -.02em; } .custhead .sub { font: 500 13px/1 var(--mono); color: var(--ink-dim); } /* --------------------------------------------------------- dialogs */ dialog { background: var(--surface); color: var(--ink); border: 1px solid var(--line); border-radius: 10px; padding: 0; width: min(560px, calc(100vw - 24px)); box-shadow: 0 24px 64px rgba(2, 6, 23, .6); } dialog::backdrop { background: rgba(2, 6, 23, .72); } dialog .head { padding: var(--s4); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s3); font: 600 17px/1.2 var(--sans); } dialog .head .id { font: 500 13px/1 var(--mono); color: var(--ink-faint); } dialog .body { padding: var(--s4); } dialog .foot { padding: var(--s4); border-top: 1px solid var(--line); display: flex; gap: var(--s2); align-items: center; } label { display: block; margin: var(--s4) 0 6px; font: 600 11px/1 var(--sans); letter-spacing: .09em; text-transform: uppercase; color: var(--ink-dim); } /* Scoped deliberately. A bare `label:first-of-type` also matches every * label that is merely the first inside its OWN wrapper div, which strips * the top margin from fields that badly need it. */ :where(dialog .body, .gate .box) > label:first-of-type { margin-top: 0; } label .opt { font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--ink-faint); } input, textarea, select { width: 100%; font: 15px/1.45 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 11px var(--s3); min-height: 42px; } input:focus, textarea:focus, select:focus { border-color: var(--line-hi); } input[type="date"], input.mono { font-family: var(--mono); font-size: 14px; } input[type="checkbox"] { width: auto; min-height: 0; } textarea { min-height: 128px; resize: vertical; line-height: 1.55; } input::placeholder, textarea::placeholder { color: var(--ink-faint); } .readonly { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r); padding: 12px var(--s3); font: 400 14px/1.3 var(--sans); color: var(--ink-dim); } .statusrow { display: flex; gap: var(--s2); flex-wrap: wrap; margin-bottom: var(--s4); } .chip { font: 500 13px/1 var(--mono); color: var(--ink-dim); background: transparent; border: 1px solid var(--line); border-radius: var(--r); padding: 11px var(--s4); cursor: pointer; min-height: 40px; transition: background .15s ease, color .15s ease, border-color .15s ease; } .chip:hover { color: var(--ink); border-color: var(--line-hi); } .chip[aria-pressed="true"] { background: var(--working); color: var(--on-accent); border-color: var(--working); font-weight: 600; } /* the priority pair reads as one segmented control */ .statusrow.segmented { gap: 0; } .statusrow.segmented .chip { border-radius: 0; padding: 10px var(--s5); } .statusrow.segmented .chip:first-child { border-radius: var(--r) 0 0 var(--r); } .statusrow.segmented .chip:last-child { border-radius: 0 var(--r) var(--r) 0; border-left: 0; } .statusrow.segmented .chip[aria-pressed="true"] { background: var(--raised-hi); color: var(--ink); border-color: var(--line-hi); } .activity { font: 500 12px/1 var(--mono); color: var(--ink-faint); } .msg { font-size: 13px; margin-top: var(--s3); min-height: 1em; } .msg.err { color: var(--danger); } .msg.ok { color: var(--done); } /* ------------------------------------------------------------- misc */ .page { max-width: 1100px; margin: 0 auto; padding: var(--s5) var(--s4) 72px; } .pagehead { display: flex; align-items: baseline; gap: var(--s3); margin-bottom: var(--s4); flex-wrap: wrap; } .pagehead h1 { font: 700 24px/1.1 var(--sans); margin: 0; letter-spacing: -.02em; } .panel { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); margin-bottom: var(--s4); overflow: hidden; } .panel > h2 { margin: 0; padding: 11px var(--s3); font: 600 11px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-dim); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: var(--s2); } .panel > h2 .n { margin-left: auto; font-family: var(--mono); color: var(--ink-faint); letter-spacing: 0; } .row { display: flex; align-items: baseline; gap: var(--s3); padding: 11px var(--s3); border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; } .row:last-child { border-bottom: 0; } .row:hover { background: var(--raised-hi); } .row .who { font-size: 11.5px; color: var(--ink-faint); max-width: 40%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .row .when { margin-left: auto; font-size: 12px; color: var(--ink-faint); white-space: nowrap; } .row .when.late { color: var(--danger); } .blank { padding: var(--s3); color: var(--ink-faint); font-size: 13px; } .blank a { color: var(--planning); } .gate { max-width: 340px; margin: 14vh auto; padding: 0 var(--s4); } .gate .box { background: var(--surface); border: 1px solid var(--line); border-radius: 10px; padding: var(--s5); } .gate h1 { font: 600 18px/1.2 var(--sans); margin: 0 0 6px; } .gate p { color: var(--ink-dim); font-size: 13px; margin: 0 0 var(--s4); } .toast { position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%); background: var(--raised-hi); color: var(--ink); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 11px var(--s4); font-size: 13.5px; z-index: 90; box-shadow: 0 8px 32px rgba(2, 6, 23, .55); } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; } } @media (max-width: 900px) { /* On a phone nothing should be a fixed-height pane — the document just scrolls, which is what a small screen wants. */ body.fixed { display: block; height: auto; overflow: auto; } body.fixed > .boardwrap, body.fixed > .meetwrap, body.fixed > .dash { min-height: 0; } .dash { grid-template-columns: 1fr; grid-template-rows: auto repeat(4, minmax(230px, 1fr)); height: auto; overflow: visible; } .kpis { grid-column: 1; } .boardwrap { overflow-x: auto; } } @media (max-width: 700px) { .topbar { gap: var(--s2); padding: 0 10px; } .brand span { display: none; } .nav a { padding: 15px 7px 14px; } select.customer { max-width: 140px; } .lanes { grid-template-columns: 156px repeat(4, minmax(210px, 1fr)); gap: 0 var(--s4); } .flat { grid-template-columns: repeat(4, minmax(210px, 1fr)); gap: 0 var(--s4); } .custhead h1 { font-size: 22px; } } /* ------------------------------------------------------- form page */ .formpage { max-width: 720px; } .formpage h1 { font: 700 30px/1.15 var(--sans); margin: 0 0 8px; letter-spacing: -.022em; } .formpage .lede { color: var(--ink-dim); font-size: 15px; margin: 0 0 var(--s6); } .formpage .pagehead { margin-bottom: var(--s2); } .formpage label { margin-top: 0; } /* Vertical rhythm belongs to the direct children of the form, so it cannot depend on where a label happens to sit in the tree. */ .formpage form > * { margin-top: var(--s5); } .formpage form > *:first-child { margin-top: 0; } .formpage .pair > div > label:first-child { margin-top: 0; } .formpage .req { color: var(--danger); } .formpage .help { font: 400 13px/1.45 var(--sans); color: var(--ink-faint); margin: 7px 0 0; } .formpage .echo { font-size: 13px; color: var(--done); margin: 5px 0 0; min-height: 1em; } /* related fields sit side by side, as in the design */ .pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s5); } .pair > div { min-width: 0; } /* $ prefix inside the EAR field */ .prefixed { position: relative; } .prefixed .prefix { position: absolute; left: var(--s3); top: 50%; transform: translateY(-50%); font: 500 14px/1 var(--mono); color: var(--ink-faint); pointer-events: none; } .prefixed input { padding-left: 30px; } /* confidence: one continuous segmented bar */ /* One equal column per button, however many there are. This was hard-coded * to four for the confidence bar, which squeezed the two-button project-type * toggle — whose labels are the longest — into quarter-width cells where the * text overflowed onto its neighbour. */ .segbar { display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; } .segbar button { font: 500 14px/1.25 var(--sans); color: var(--ink-dim); background: var(--surface); border: 1px solid var(--line); padding: 12px 10px; cursor: pointer; min-height: 46px; min-width: 0; /* let a long label shrink, not overflow */ overflow-wrap: anywhere; transition: color .15s ease, border-color .15s ease, background .15s ease; } .segbar button + button { border-left: 0; } .segbar button:first-child { border-radius: var(--r) 0 0 var(--r); } .segbar button:last-child { border-radius: 0 var(--r) var(--r) 0; } .segbar button:hover { color: var(--ink); } .segbar button[aria-pressed="true"] { color: var(--working); border-color: var(--working); background: color-mix(in srgb, var(--working) 10%, transparent); font-weight: 600; position: relative; z-index: 1; } .formfoot { display: flex; justify-content: flex-end; gap: var(--s3); margin-top: var(--s6); padding-top: var(--s5); border-top: 1px solid var(--line); } @media (max-width: 620px) { /* gap:0 here was the other half of the overlap — once the columns stack, the row gap is the only thing separating two fields. */ .pair { grid-template-columns: 1fr; gap: var(--s5); } /* Stack into rows of two rather than shrinking four labels to nothing. */ .segbar { grid-auto-flow: row; grid-template-columns: repeat(2, 1fr); } .segbar button { border-radius: 0 !important; border-left-width: 1px; } } /* ------------------------------------------- Projects / Internal tabs */ .pickbar { padding: var(--s4) var(--s4) 0; border-bottom: 1px solid var(--line); background: var(--surface); } .pickrow { display: flex; align-items: center; gap: var(--s3); flex-wrap: wrap; } .pickbar { padding-bottom: var(--s3); } .pickrow label { margin: 0; font: 600 10.5px/1 var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--ink-faint); white-space: nowrap; } select.picker-select { font: 500 14px/1 var(--sans); color: var(--ink); background: var(--bg); border: 1px solid var(--line-hi); border-radius: var(--r); padding: 11px 34px 11px var(--s3); cursor: pointer; min-height: 44px; flex: 1 1 260px; min-width: 0; max-width: 520px; appearance: none; background-image: linear-gradient(45deg, transparent 50%, var(--ink-dim) 50%), linear-gradient(135deg, var(--ink-dim) 50%, transparent 50%); background-position: calc(100% - 18px) 19px, calc(100% - 13px) 19px; background-size: 5px 5px, 5px 5px; background-repeat: no-repeat; } select.picker-select:hover { border-color: var(--ink-faint); } .pickmeta { font: 500 12px/1 var(--mono); color: var(--ink-faint); } .projhead { padding: var(--s4) 0 var(--s3); } .projhead h1 { font: 700 25px/1.15 var(--sans); margin: 0 0 8px; letter-spacing: -.02em; } .projhead .sub { font: 500 12.5px/1.5 var(--mono); color: var(--ink-dim); } .projhead .desc { font: 400 14px/1.55 var(--sans); color: var(--ink-dim); margin: 10px 0 0; max-width: 78ch; } @media (max-width: 700px) { select.picker-select { min-width: 0; width: 100%; } .boardwrap.single { height: auto; } } /* ---------------------------------------------------------- security */ .iconlink { display: inline-flex; align-items: center; justify-content: center; width: 38px; height: 38px; border-radius: var(--r); color: var(--ink-dim); border: 1px solid transparent; } .iconlink:hover { color: var(--ink); border-color: var(--line-hi); background: var(--raised); } .iconlink svg { width: 18px; height: 18px; } .lede { color: var(--ink-dim); font-size: 14px; line-height: 1.6; margin: 0 0 24px; } .lede code { font: 500 12.5px/1 var(--mono); background: var(--raised); border: 1px solid var(--line); border-radius: 4px; padding: 3px 5px; } .ok-txt { color: var(--done); font-weight: 600; } .warn-txt { color: var(--working); font-weight: 600; } .row.bad .when { color: var(--danger); } .tag-now { font: 600 9.5px/1 var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--done); border: 1px solid color-mix(in srgb, var(--done) 45%, transparent); border-radius: 3px; padding: 3px 5px; margin-left: 6px; } .btn.tiny { min-height: 30px; padding: 6px 10px; font-size: 12px; margin-left: auto; } .gate label { margin-top: var(--s3); } .gate .box > label:first-child { margin-top: 0; } /* ------------------------------------------------------------ offline */ .offline-bar { position: fixed; left: 0; right: 0; bottom: 0; z-index: 95; background: var(--working); color: var(--on-accent); font: 600 13px/1.4 var(--sans); text-align: center; padding: 10px 14px; padding-bottom: calc(10px + env(safe-area-inset-bottom)); } /* ----------------------------------------------------------- meetings */ .meetwrap { display: grid; grid-template-columns: 320px 1fr; min-height: 0; overflow: hidden; } .meetlist { border-right: 1px solid var(--line); overflow-y: auto; background: var(--surface); } .meetitem { display: block; width: 100%; text-align: left; cursor: pointer; background: none; border: 0; border-bottom: 1px solid var(--line); border-left: 3px solid transparent; padding: 13px var(--s4); color: inherit; font: inherit; } .meetitem:hover { background: var(--raised-hi); } .meetitem.on { background: var(--raised); border-left-color: var(--working); } .meetitem .top { display: flex; align-items: baseline; gap: var(--s2); } .meetitem .subj { font: 600 14px/1.3 var(--sans); overflow-wrap: anywhere; } .meetitem .momtag { margin-left: auto; flex: none; font: 600 9px/1 var(--sans); letter-spacing: .08em; color: var(--done); border: 1px solid color-mix(in srgb, var(--done) 45%, transparent); border-radius: 3px; padding: 3px 5px; } .meetitem .meta { display: block; font: 500 11px/1.4 var(--mono); color: var(--ink-faint); margin-top: 5px; } .meetitem .prev { display: block; font: 400 12.5px/1.45 var(--sans); color: var(--ink-dim); margin-top: 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .meeteditor, .meetempty { display: flex; flex-direction: column; min-height: 0; padding: var(--s4); overflow: hidden; } .meetempty { align-items: center; justify-content: center; color: var(--ink-faint); } .meetfields { display: grid; gap: var(--s3); grid-template-columns: minmax(180px, 1fr) minmax(220px, 1.4fr) 170px auto; align-items: end; flex: none; } .meetfields .mf { min-width: 0; } .meetfields label { margin: 0 0 5px; } .meetfields .req { color: var(--danger); } .meetfields input { min-height: 44px; } .meetfields #meet-subject { font-weight: 600; } .meetfields .actions { display: flex; gap: var(--s2); } @media (max-width: 1100px) { .meetfields { grid-template-columns: 1fr 1fr; } .meetfields .actions { grid-column: 1 / -1; } } @media (max-width: 600px) { .meetfields { grid-template-columns: 1fr; } } .meetcols { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s4); flex: 1; min-height: 0; margin-top: var(--s4); } .meetcol { display: flex; flex-direction: column; min-height: 0; } .meetcol label { margin: 0 0 6px; flex: none; } /* The textarea fills the pane and scrolls internally, so long notes never push the controls off the screen. */ .meetcol textarea { flex: 1; min-height: 0; resize: none; font: 14px/1.65 var(--sans); } #meet-mom { font-family: var(--mono); font-size: 13px; } .meetfoot { display: flex; align-items: center; gap: var(--s2); flex: none; margin-top: 8px; font: 500 11px/1 var(--mono); color: var(--ink-faint); } .meetfoot span:last-child { margin-left: auto; } @media (max-width: 900px) { .meetwrap { grid-template-columns: 1fr; height: auto; overflow: visible; } .meetlist { border-right: 0; border-bottom: 1px solid var(--line); max-height: 40vh; } .meetcols { grid-template-columns: 1fr; } .meetcol textarea { min-height: 240px; } .meethead { flex-wrap: wrap; } } /* Six tabs will not fit a phone; let the bar scroll rather than wrap. */ .nav { overflow-x: auto; scrollbar-width: none; } .nav::-webkit-scrollbar { display: none; }