/* PGL Quote Desk — "manifest desk" design system (2026-09-10) The desk's real medium is a printed quotation and a sailing schedule, so the interface reads as working paper: cool manifest grey, one white sheet per record, a hull-navy rail, and a single signal colour — quay safety orange — spent only on the one primary action per page and the current node of the track. Links and informational accents are sea blue so the orange stays rare. Type: Geist (UI) · JetBrains Mono (refs, lanes, money). The route ribbon (ORIGIN ▸ DESTINATION, set like a container stencil) is the one memorable element; everything around it stays quiet. */ :root { --paper: #edf0f3; --surface: #ffffff; --ink: #0f1c2e; --muted: #4e5d73; --faint: #7b889b; --line: #dde2e9; --line-strong: #b9c3d0; --rail: #12233b; --rail-line: #223550; --rail-ink: #f2f5f9; --rail-muted: #8fa0b8; --rail-hover: rgba(255, 255, 255, .06); --rail-active: rgba(255, 255, 255, .1); --signal: #e2571c; --signal-deep: #c4480f; --signal-soft: #fbe9e0; --on-signal: #ffffff; --sea: #1c5f8c; --sea-deep: #164b70; --sea-soft: #e3eef6; --on-sea: #ffffff; /* back-compat aliases: templates written against the old console kit */ --brand: var(--sea); --brand-deep: var(--sea-deep); --brand-soft: var(--sea-soft); --on-brand: var(--on-sea); --ok: #1c7a4e; --ok-soft: #e1f2e9; --warn: #9c6a0c; --warn-soft: #fbf0d9; --bad: #b4311f; --bad-soft: #fae6e2; --hover: #f4f6f9; --field: #ffffff; --chip-neutral: #e6eaef; --tile: #f7f9fb; --radius: 6px; --radius-sm: 5px; --shadow: 0 1px 2px rgba(15, 28, 46, .06); --sans: "Geist", -apple-system, "Segoe UI", sans-serif; --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, monospace; } /* Dark: the same hues re-derived for a night desk. Toggled via ; the rail tokens deliberately do not flip. */ :root[data-theme="dark"] { --paper: #0c1626; --surface: #13213a; --ink: #e8eef6; --muted: #a2b1c7; --faint: #7e8fa8; --line: #22334f; --line-strong: #34486a; --rail: #08111f; --rail-line: #182741; --signal: #f0743f; --signal-deep: #f58a5c; --signal-soft: #3a2014; --on-signal: #14080a; --sea: #6fb1e6; --sea-deep: #93c6f0; --sea-soft: #14304a; --on-sea: #06182a; --ok: #4cd497; --ok-soft: #10302a; --warn: #f0b657; --warn-soft: #34270f; --bad: #ff8a75; --bad-soft: #3d1a14; --hover: #182a45; --field: #0e1a2e; --chip-neutral: #1c2c47; --tile: #101d33; --shadow: 0 1px 3px rgba(0, 0, 0, .45); } :root[data-theme="dark"] select { background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23a2b1c7' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); } * { box-sizing: border-box; } html { font-size: 14px; } body { margin: 0; background: var(--paper); color: var(--ink); font-family: var(--sans); line-height: 1.5; text-rendering: optimizeLegibility; -webkit-font-smoothing: antialiased; } a { color: var(--sea); text-decoration: none; } a:hover { text-decoration: underline; } :focus-visible { outline: 2px solid var(--signal); outline-offset: 2px; } h1, h2, h3 { font-weight: 600; letter-spacing: -.01em; } /* ================= shell: rail + content ================= */ .shell { display: flex; min-height: 100vh; } .rail { width: 220px; flex-shrink: 0; background: var(--rail); color: var(--rail-ink); display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh; } .rail-brand { display: flex; align-items: center; gap: 11px; padding: 20px 18px 18px; border-bottom: 1px solid var(--rail-line); } .rail-brand .mark, .login-brand .mark { font-family: var(--mono); font-weight: 600; font-size: .8rem; background: var(--signal); color: var(--on-signal); border-radius: 4px; padding: 4px 7px; letter-spacing: .02em; } .rail-brand .name { line-height: 1.2; } .rail-brand .name b { display: block; font-size: .98rem; font-weight: 600; letter-spacing: -.01em; } .rail-brand .name span { font-size: .78rem; color: var(--rail-muted); } .rail nav { flex: 1; padding: 14px 10px; overflow-y: auto; } .rail .nav-group { font-size: .76rem; color: var(--rail-muted); padding: 16px 12px 6px; } .rail .nav-group:first-child { padding-top: 2px; } .rail nav a { display: flex; align-items: center; gap: 10px; color: #c3cfe0; padding: 7px 12px; border-radius: var(--radius-sm); font-weight: 500; font-size: .93rem; transition: background .12s, color .12s; } .rail nav a svg { flex-shrink: 0; opacity: .6; } .rail nav a:hover { color: #fff; background: var(--rail-hover); text-decoration: none; } .rail nav a.active { color: #fff; background: var(--rail-active); } .rail nav a.active svg { opacity: 1; color: var(--signal); } .rail-user { border-top: 1px solid var(--rail-line); padding: 14px 18px; font-size: .84rem; } .rail-user .u { color: var(--rail-ink); font-weight: 600; display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .rail-user a { color: var(--rail-muted); font-size: .8rem; } .rail-user a:hover { color: #fff; } .theme-toggle { display: block; margin-top: 10px; padding: 5px 10px; width: 100%; background: transparent; border: 1px solid var(--rail-line); border-radius: var(--radius-sm); color: var(--rail-muted); font: inherit; font-size: .78rem; font-weight: 500; cursor: pointer; text-align: left; transition: color .12s, border-color .12s; } .theme-toggle:hover { color: #fff; border-color: var(--rail-muted); } /* Scope switch (admins): whose work the lists show. The dot is the state, the label is the state; the click flips it. */ .scope-switch { margin-top: 10px; } .scope-switch button { display: flex; align-items: center; gap: 8px; width: 100%; padding: 5px 10px; background: transparent; border: 1px solid var(--rail-line); border-radius: var(--radius-sm); color: var(--rail-ink); font: inherit; font-size: .78rem; font-weight: 500; cursor: pointer; text-align: left; transition: border-color .12s; } .scope-switch button:hover { border-color: var(--rail-muted); } .scope-switch .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--rail-muted); flex: none; } .scope-switch .dot.team { background: var(--signal); } .content { flex: 1; min-width: 0; } .page { max-width: 1280px; margin: 0 auto; padding: 24px 32px 72px; } /* ================= page head ================= */ .page-head { display: flex; align-items: center; gap: 14px; margin-bottom: 20px; flex-wrap: wrap; } .page-head h1 { font-size: 1.43rem; margin: 0; } .page-head .sub { color: var(--muted); font-size: .9rem; } .page-head .spacer { flex: 1; } /* ================= signature: the route ribbon ================= Origin and destination are the unit of freight work, so they are the largest type on a record page — set in mono, stencilled like the side of a container — with the ref and scope beneath and the lifecycle track running along the bottom edge of the same sheet. */ .ribbon { background: var(--surface); border: 1px solid var(--line); border-left: 4px solid var(--signal); box-shadow: var(--shadow); margin-bottom: 18px; } .ribbon-top { display: flex; align-items: flex-start; gap: 16px 24px; flex-wrap: wrap; padding: 20px 22px 0 22px; } .ribbon-lane { font-family: var(--mono); font-weight: 600; text-transform: uppercase; font-size: clamp(1.45rem, 3.4vw, 2.7rem); line-height: 1.05; letter-spacing: -.02em; display: flex; flex-wrap: wrap; column-gap: .3em; align-items: baseline; min-width: 0; flex: 1 1 320px; overflow-wrap: anywhere; } .ribbon-lane .to { color: var(--signal); font-weight: 400; font-size: .7em; } .ribbon-lane.plain { text-transform: none; font-family: var(--sans); font-weight: 600; } .ribbon-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-left: auto; } .ribbon-meta { display: flex; align-items: center; gap: 8px 14px; flex-wrap: wrap; padding: 10px 22px 0 22px; color: var(--muted); font-size: .9rem; } .ribbon-meta .ref { font-family: var(--mono); color: var(--ink); font-weight: 600; } .ribbon-meta .customer { color: var(--ink); } .ribbon .track-wrap { padding: 18px 22px 18px 22px; } .ribbon .next-step { margin: 0; border-radius: 0; border-left: none; border-top: 1px solid var(--line); padding: 12px 22px; } /* ================= cards & tables ================= */ .card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); padding: 18px 20px; margin-bottom: 16px; } .card h2 { font-size: 1rem; margin: 0 0 12px; font-weight: 600; color: var(--ink); display: flex; align-items: center; gap: 8px; } .card h2 .chip { font-weight: 600; } /* wide tables scroll inside their card instead of breaking the page */ .table-scroll { overflow-x: auto; } .table-scroll table.data { min-width: 100%; } table.data { width: 100%; border-collapse: collapse; font-size: .9rem; } table.data td.route { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } table.data th { text-align: left; font-weight: 600; color: var(--muted); font-size: .8rem; padding: 6px 10px 8px; border-bottom: 1px solid var(--line-strong); white-space: nowrap; } table.data td { padding: 9px 10px; border-bottom: 1px solid var(--line); vertical-align: top; } table.data tr:last-child td { border-bottom: none; } table.data tbody tr:hover td, table.data tr:hover td { background: var(--hover); } table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); font-size: .86rem; font-variant-numeric: tabular-nums; white-space: nowrap; } .mono { font-family: var(--mono); font-size: .88em; font-variant-numeric: tabular-nums; } table.data td.mono { white-space: nowrap; } /* inline add/search forms: fields share the row and wrap, never squash */ .inline-form { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .inline-form > input[type=text], .inline-form > input[type=email], .inline-form > select { flex: 1 1 160px; width: auto; min-width: 0; } td.best { background: var(--ok-soft) !important; font-weight: 600; box-shadow: inset 2px 0 0 var(--ok); } /* lane chip — ORIGIN ▸ DESTINATION in mono, the small form of the ribbon */ .lane { font-family: var(--mono); font-size: .84rem; display: inline-flex; align-items: baseline; gap: 7px; white-space: nowrap; } .lane .to { color: var(--signal); font-weight: 600; } /* ================= chips & badges ================= */ .chip { display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 600; white-space: nowrap; } .chip::before { content: ""; width: 5px; height: 5px; border-radius: 50%; background: currentColor; opacity: .7; } .chip.ok { background: var(--ok-soft); color: var(--ok); } .chip.warn { background: var(--warn-soft); color: var(--warn); } .chip.bad { background: var(--bad-soft); color: var(--bad); } .chip.neutral { background: var(--chip-neutral); color: var(--muted); } .chip.neutral::before { display: none; } .chip.accent { background: var(--sea-soft); color: var(--sea-deep); } .mono-chip { font-family: var(--mono); font-size: .74rem; font-weight: 600; background: var(--chip-neutral); color: var(--muted); padding: 2px 7px; border-radius: 4px; white-space: nowrap; } /* ================= forms & buttons ================= */ label.f { display: block; font-size: .82rem; font-weight: 600; color: var(--muted); margin: 12px 0 4px; } input[type=text], input[type=number], input[type=date], input[type=password], input[type=email], select, textarea { width: 100%; padding: 8px 10px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font: inherit; background: var(--field); color: var(--ink); transition: border-color .12s, box-shadow .12s; } input:focus, select:focus, textarea:focus { outline: none; border-color: var(--sea); box-shadow: 0 0 0 3px color-mix(in srgb, var(--sea) 22%, transparent); } textarea { resize: vertical; } input.num { font-family: var(--mono); font-size: .88rem; text-align: right; } input::placeholder, textarea::placeholder { color: var(--faint); } select { appearance: none; -webkit-appearance: none; background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%234e5d73' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 10px center; padding-right: 32px; } /* filter bar + segmented toggles */ .filterbar { display: flex; gap: 16px; flex-wrap: wrap; align-items: end; } .filterbar .fgroup > .f { margin-top: 0; } .reason-form { display: inline-flex; gap: 6px; align-items: center; } .seg { display: inline-flex; gap: 4px; flex-wrap: wrap; align-items: center; } .seg a { display: inline-flex; align-items: center; padding: 6px 12px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); font-size: .82rem; font-weight: 500; color: var(--muted); background: var(--surface); white-space: nowrap; transition: border-color .12s, color .12s, background .12s; } .seg a:hover { border-color: var(--ink); color: var(--ink); text-decoration: none; } .seg a.on { background: var(--ink); border-color: var(--ink); color: var(--paper); } .seg .mono-chip { font-family: var(--mono); font-size: .76rem; } /* Buttons: the quiet primary is ink; .accent is the signal — one per page, the action the page exists for. */ .btn { display: inline-flex; align-items: center; justify-content: center; gap: 7px; background: var(--ink); color: var(--paper); border: 1px solid var(--ink); cursor: pointer; padding: 8px 16px; border-radius: var(--radius-sm); font: inherit; font-weight: 600; font-size: .9rem; transition: background .12s, border-color .12s, color .12s; white-space: nowrap; } .btn:hover { background: var(--sea-deep); border-color: var(--sea-deep); color: #fff; text-decoration: none; } .btn.accent { background: var(--signal); border-color: var(--signal); color: var(--on-signal); } .btn.accent:hover { background: var(--signal-deep); border-color: var(--signal-deep); color: var(--on-signal); } .btn.ghost { background: var(--surface); color: var(--ink); border: 1px solid var(--line-strong); } .btn.ghost:hover { background: var(--hover); border-color: var(--ink); color: var(--ink); } .btn.danger { background: var(--surface); color: var(--bad); border: 1px solid var(--line-strong); } .btn.danger:hover { background: var(--bad-soft); border-color: var(--bad); color: var(--bad); } .btn.sm { padding: 4px 10px; font-size: .8rem; } .btn[disabled] { opacity: .45; cursor: default; pointer-events: none; } /* ================= flash & banners ================= */ .flash, .banner { padding: 10px 14px; border-radius: var(--radius-sm); margin-bottom: 14px; font-size: .9rem; border: 1px solid transparent; border-left-width: 3px; } .flash { background: var(--chip-neutral); color: var(--muted); border-left-color: var(--line-strong); } .flash.ok { background: var(--ok-soft); color: var(--ok); border-left-color: var(--ok); } .flash.error { background: var(--bad-soft); color: var(--bad); border-left-color: var(--bad); } .banner { background: var(--warn-soft); color: var(--warn); border-left-color: var(--warn); } .banner a { color: inherit; font-weight: 600; text-decoration: underline; } /* ================= grid helpers ================= */ .grid { display: grid; gap: 16px; margin-bottom: 16px; } .grid.c2 { grid-template-columns: 1fr 1fr; } .grid.c3 { grid-template-columns: repeat(3, 1fr); } .grid.c4 { grid-template-columns: repeat(4, 1fr); } .grid > .card { margin-bottom: 0; } @media (max-width: 900px) { .grid.c2, .grid.c3, .grid.c4 { grid-template-columns: 1fr; } } .stats + .stats { margin-top: 12px; } .stats + .grid, .stats + .card { margin-top: 16px; } /* ================= stat strip ================= Figures sit on one ruled strip with dividers, not in a row of boxes: the number is the content, the box was decoration. */ .stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); overflow: hidden; } .stat { padding: 12px 16px; border-right: 1px solid var(--line); min-width: 0; color: inherit; } .stat:last-child { border-right: none; } a.stat:hover { background: var(--hover); text-decoration: none; } .stat .l { font-size: .8rem; color: var(--muted); margin-bottom: 2px; } .stat .v { font-family: var(--mono); font-size: 1.3rem; font-weight: 600; font-variant-numeric: tabular-nums; letter-spacing: -.01em; } .card .stats { box-shadow: none; } @media (max-width: 900px) { .stat { border-right: none; border-bottom: 1px solid var(--line); } .stat:last-child { border-bottom: none; } } /* ================= login ================= */ .login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; background: linear-gradient(rgba(18, 35, 59, .94), rgba(18, 35, 59, .97)), repeating-linear-gradient(0deg, transparent 0 39px, rgba(190, 210, 240, .08) 39px 40px), repeating-linear-gradient(90deg, transparent 0 39px, rgba(190, 210, 240, .08) 39px 40px), #12233b; padding: 24px; } .login-card { background: var(--surface); border-radius: 8px; border-top: 4px solid var(--signal); box-shadow: 0 24px 70px rgba(0, 0, 0, .45); padding: 36px 40px 34px; width: 420px; max-width: 100%; } .login-brand { display: flex; align-items: center; gap: 11px; margin-bottom: 26px; } .login-brand .mark { font-size: .9rem; padding: 5px 9px; } .login-brand .name { line-height: 1.2; } .login-brand .name b { display: block; font-size: 1.05rem; font-weight: 600; letter-spacing: -.01em; } .login-brand .name span { font-size: .84rem; color: var(--muted); } .login-card h1 { font-size: 1.43rem; margin: 0 0 4px; } .login-card .tag { color: var(--muted); font-size: .92rem; margin: 0 0 24px; } .provider-btn { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; padding: 11px; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--field); font: inherit; font-weight: 600; cursor: pointer; font-size: .95rem; color: var(--ink); transition: background .12s, border-color .12s; } .provider-btn:hover { background: var(--hover); border-color: var(--ink); text-decoration: none; } .login-foot { margin: 22px 0 0; font-size: .8rem; color: var(--muted); text-align: center; } .login-foot a { color: var(--muted); text-decoration: underline; } /* privacy notice: the login card, widened into a readable column */ .login-wrap.doc { align-items: flex-start; padding-block: 48px; } .login-card.doc { width: 720px; } .login-card.doc h2 { font-size: 1rem; margin: 26px 0 6px; } .login-card.doc p, .login-card.doc li { font-size: .92rem; line-height: 1.6; color: var(--ink); } .login-card.doc ul { padding-left: 20px; margin: 6px 0; } .login-card.doc code { font-family: var(--mono); font-size: .84rem; } .login-card.doc .statement { border-left: 3px solid var(--signal); padding: 8px 14px; background: var(--paper); margin-top: 24px; } /* ================= public proposal (customer-facing) ================= */ .proposal-wrap { min-height: 100vh; background: var(--paper); padding: 40px 16px 60px; } .proposal { max-width: 720px; margin: 0 auto; background: var(--surface); border: 1px solid var(--line); box-shadow: 0 12px 40px rgba(15, 28, 46, .08); } .proposal-head { display: flex; align-items: center; gap: 12px; padding: 18px 26px; border-bottom: 1px solid var(--line); } .proposal-head .firm { font-weight: 600; } .proposal-head .firm span { display: block; font-size: .84rem; color: var(--muted); font-weight: 400; } .proposal .ribbon { border: none; border-left: none; box-shadow: none; margin: 0; } .proposal .ribbon-top { padding-top: 26px; } .proposal .ribbon-meta { padding-bottom: 24px; } .proposal-body { padding: 8px 26px 26px; } .proposal-body .kv { grid-template-columns: 150px 1fr; font-size: .95rem; row-gap: 8px; } .proposal-total { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; border-top: 1px solid var(--line-strong); border-bottom: 1px solid var(--line-strong); padding: 14px 0; margin: 18px 0; } .proposal-total .l { color: var(--muted); } .proposal-total .v { font-family: var(--mono); font-size: 1.7rem; font-weight: 600; letter-spacing: -.01em; } .proposal-total .v small { font-size: .55em; color: var(--muted); font-weight: 500; margin-left: 6px; } .proposal-decide { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; } .proposal-decide .btn { padding: 12px 16px; font-size: 1rem; } .proposal-foot { padding: 16px 26px; border-top: 1px solid var(--line); color: var(--muted); font-size: .86rem; } @media (max-width: 560px) { .proposal-decide { grid-template-columns: 1fr; } } /* ================= misc ================= */ .empty { color: var(--muted); padding: 22px 4px; font-size: .93rem; line-height: 1.55; } .empty a { font-weight: 600; } .email-body { white-space: pre-wrap; font-size: .84rem; background: var(--tile); border: 1px solid var(--line); border-radius: var(--radius-sm); padding: 14px; max-height: 420px; overflow-y: auto; font-family: var(--mono); } .offer-card { border: 1px solid var(--line); border-left: 3px solid var(--sea); border-radius: var(--radius); padding: 16px 18px; margin-bottom: 14px; background: var(--surface); box-shadow: var(--shadow); } .offer-card h3 { margin: 0 0 8px; font-size: 1rem; } .equip-row { display: grid; grid-template-columns: 1.4fr .7fr 1fr auto; gap: 8px; margin-bottom: 6px; align-items: center; } .kv { display: grid; grid-template-columns: 130px 1fr; gap: 5px 12px; font-size: .9rem; } .kv dt { color: var(--muted); } .kv dd { margin: 0; } .total-line { font-size: 1.05rem; font-weight: 600; } .help { color: var(--muted); font-size: .82rem; margin-top: 4px; } /* ================= topbar: where am I + find anything ================= */ .topbar { position: sticky; top: 0; z-index: 30; background: var(--paper); border-bottom: 1px solid var(--line); } .topbar-inner { max-width: 1280px; margin: 0 auto; padding: 0 32px; height: 52px; display: flex; align-items: center; gap: 10px; } .topbar .spacer { flex: 1; } .crumbs { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: .88rem; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .crumbs a { color: var(--muted); } .crumbs a:hover { color: var(--ink); text-decoration: none; } .crumbs .sep { color: var(--faint); } .crumbs .here { color: var(--ink); font-weight: 600; overflow: hidden; text-overflow: ellipsis; } .searchbtn { display: inline-flex; align-items: center; gap: 9px; height: 34px; padding: 0 9px 0 12px; min-width: 250px; border: 1px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--field); color: var(--faint); font: inherit; font-size: .86rem; cursor: pointer; transition: border-color .12s, color .12s; } .searchbtn:hover { border-color: var(--ink); color: var(--muted); } .searchbtn svg { flex-shrink: 0; } .searchbtn .kbd-hint { margin-left: auto; } kbd { font-family: var(--mono); font-size: .7rem; font-weight: 600; background: var(--chip-neutral); color: var(--muted); border: 1px solid var(--line-strong); border-bottom-width: 2px; border-radius: 4px; padding: 1px 5px; white-space: nowrap; } .iconbtn { width: 30px; height: 30px; flex-shrink: 0; border-radius: var(--radius-sm); border: 1px solid var(--line-strong); background: var(--field); color: var(--muted); font: inherit; font-weight: 600; font-size: .85rem; cursor: pointer; transition: border-color .12s, color .12s; } .iconbtn:hover { border-color: var(--ink); color: var(--ink); } /* work-waiting counts, right-aligned in the rail */ .nav-badge { margin-left: auto; font-family: var(--mono); font-size: .68rem; font-weight: 600; min-width: 20px; text-align: center; padding: 1px 6px; border-radius: 999px; background: var(--signal); color: var(--on-signal); } .nav-badge.warn { background: #f0b657; color: #241a05; } /* ================= section tabs (one nav item, several views) ========= */ .subnav { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin: -6px 0 18px; } .subnav a { padding: 8px 14px; margin-bottom: -1px; font-size: .9rem; font-weight: 500; color: var(--muted); border-bottom: 2px solid transparent; } .subnav a:hover { color: var(--ink); text-decoration: none; } .subnav a.on { color: var(--ink); font-weight: 600; border-bottom-color: var(--signal); } /* ================= the track ================= An enquiry is a voyage — request out, offers in, proposal out, decision back. The stepper reads as a schedule so "where is this" needs no explanation, and the next move is named directly underneath it. */ .track { display: flex; list-style: none; margin: 0; padding: 4px 0 0; } .track > li { flex: 1 1 0; position: relative; min-width: 0; padding-right: 16px; } .track > li:last-child { flex: 0 1 auto; padding-right: 0; } .track > li:not(:last-child)::after { content: ""; position: absolute; left: 15px; right: 0; top: 6px; height: 2px; background: var(--line-strong); } .track > li.done::after { background: var(--ink); } .track .dot { display: block; width: 14px; height: 14px; border-radius: 50%; border: 2px solid var(--line-strong); background: var(--surface); position: relative; z-index: 1; } .track > li.done .dot { border-color: var(--ink); background: var(--ink); } .track > li.current .dot { border-color: var(--signal); background: var(--signal); box-shadow: 0 0 0 4px var(--signal-soft); } .track > li.current.tone-ok .dot { border-color: var(--ok); background: var(--ok); box-shadow: 0 0 0 4px var(--ok-soft); } .track > li.current.tone-bad .dot { border-color: var(--bad); background: var(--bad); box-shadow: 0 0 0 4px var(--bad-soft); } .track > li.current.tone-muted .dot { border-color: var(--muted); background: var(--muted); box-shadow: none; } .track .lbl { display: block; margin-top: 10px; font-size: .86rem; font-weight: 600; color: var(--faint); } .track > li.done .lbl { color: var(--muted); } .track > li.current .lbl { color: var(--ink); } .track .meaning { display: block; font-size: .78rem; color: var(--faint); margin-top: 1px; } .track > li.todo .meaning { opacity: .6; } /* the one sentence that says what to do next */ .next-step { display: flex; align-items: baseline; gap: 10px; margin-top: 18px; padding: 11px 14px; border-radius: var(--radius-sm); border-left: 3px solid var(--signal); background: var(--signal-soft); color: var(--ink); font-size: .92rem; font-weight: 500; } .next-step .l { font-weight: 600; color: var(--signal-deep); flex-shrink: 0; } .next-step.wait { background: var(--tile); border-left-color: var(--line-strong); color: var(--muted); } .next-step.wait .l { color: var(--muted); } /* ================= overlays: search palette + shortcuts ================= */ body.overlay-open { overflow: hidden; } .overlay { position: fixed; inset: 0; z-index: 100; display: flex; align-items: flex-start; justify-content: center; padding: 12vh 16px 16px; } .overlay[hidden] { display: none; } .overlay-scrim { position: absolute; inset: 0; background: rgba(15, 28, 46, .5); } .overlay-box { position: relative; width: min(640px, 100%); background: var(--surface); border: 1px solid var(--line-strong); border-radius: 8px; box-shadow: 0 30px 80px rgba(15, 28, 46, .35); overflow: hidden; animation: overlay-in .13s ease-out; } .overlay-box.narrow { width: min(420px, 100%); } @keyframes overlay-in { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } } .overlay-head { padding: 14px 18px; border-bottom: 1px solid var(--line); font-size: 1rem; font-weight: 600; } .overlay-foot { display: flex; align-items: center; gap: 14px; padding: 9px 16px; border-top: 1px solid var(--line); background: var(--tile); font-size: .78rem; color: var(--faint); } .overlay-foot .spacer { flex: 1; } .overlay-foot kbd { margin-right: 3px; } .palette-field { display: flex; align-items: center; gap: 11px; padding: 0 18px; border-bottom: 1px solid var(--line); color: var(--faint); } .palette-field input { flex: 1; min-width: 0; border: none; background: none; padding: 17px 0; font-size: 1rem; color: var(--ink); border-radius: 0; } .palette-field input:focus { outline: none; box-shadow: none; } .palette-results { max-height: min(52vh, 420px); overflow-y: auto; } .palette-group { padding: 12px 18px 4px; font-size: .8rem; font-weight: 600; color: var(--muted); } .palette-hit { display: flex; align-items: baseline; gap: 10px; padding: 8px 18px; color: var(--ink); border-left: 2px solid transparent; } .palette-hit:hover { text-decoration: none; background: var(--hover); } .palette-hit.on { background: var(--sea-soft); border-left-color: var(--signal); } .palette-hit .ph-title { font-family: var(--mono); font-size: .86rem; font-weight: 600; white-space: nowrap; } .palette-hit .ph-sub { color: var(--muted); font-size: .86rem; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; } .palette-hit .chip { flex-shrink: 0; } .keys-list { display: grid; grid-template-columns: auto 1fr; gap: 9px 16px; margin: 0; padding: 16px 18px; font-size: .88rem; align-items: center; } .keys-list dt { white-space: nowrap; } .keys-list dd { margin: 0; color: var(--muted); } /* search results page */ .searchform { display: flex; gap: 8px; } .sub-cell { color: var(--muted); } /* ================= dashboard: the desk ================= Queues that need a person are one ruled list on the left; the passive watchlist sits to the right. No two identical cards side by side. */ .section-head { display: flex; align-items: center; gap: 10px; font-size: 1.1rem; font-weight: 600; color: var(--ink); margin: 26px 0 12px; padding-bottom: 8px; border-bottom: 1px solid var(--line-strong); } .section-head .chip { font-weight: 600; } .stats + .section-head { margin-top: 22px; } .desk { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 24px; align-items: start; } @media (max-width: 1000px) { .desk { grid-template-columns: 1fr; } } .queue-list { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .queue { padding: 14px 18px 16px; border-bottom: 1px solid var(--line); } .queue:last-child { border-bottom: none; } .queue h2 { font-size: 1rem; margin: 0 0 10px; display: flex; align-items: center; gap: 8px; } .queue h2 .chip { font-weight: 600; } .queue h2 .more { margin-left: auto; font-size: .84rem; font-weight: 500; color: var(--sea); } .queue table.data { font-size: .88rem; } .queue table.data td { padding: 7px 8px; } .queue table.data td:first-child, .queue table.data th:first-child { padding-left: 0; } .queue table.data td:last-child, .queue table.data th:last-child { padding-right: 0; } .queue .empty { padding: 6px 0 2px; } .watch .queue { padding: 12px 18px 14px; } .watch .queue h2 { font-size: .95rem; color: var(--muted); } .pipeline { display: flex; gap: 0; margin-top: 12px; border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--surface); } .pipeline a { flex: 1; padding: 8px 12px; border-right: 1px solid var(--line); color: var(--muted); font-size: .84rem; min-width: 0; } .pipeline a:last-child { border-right: none; } .pipeline a:hover { background: var(--hover); text-decoration: none; color: var(--ink); } .pipeline a b { display: block; font-family: var(--mono); font-size: 1.1rem; color: var(--ink); font-weight: 600; } @media (max-width: 700px) { .pipeline { flex-wrap: wrap; } .pipeline a { flex: 1 0 33%; border-bottom: 1px solid var(--line); } } /* ================= pager ================= */ .pager { display: flex; align-items: center; gap: 12px; padding: 12px 0 0; font-size: .86rem; color: var(--muted); flex-wrap: wrap; } .pager-range { font-family: var(--mono); } .pager-page { margin-left: auto; } /* ================= selection actions ================= */ .actionbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 12px; } .actionbar .help { margin-top: 0; } /* currency tag beside a buy figure — present but never competing with the number */ .ccy { color: var(--faint); font-size: .74rem; font-weight: 600; } /* collapsed boilerplate (quote terms) */ .terms-block { margin-top: 12px; } .terms-block > summary { cursor: pointer; display: flex; align-items: baseline; gap: 8px; padding: 7px 0; } .terms-block > summary::-webkit-details-marker { display: none; } .terms-block > summary::before { content: "▸"; color: var(--faint); font-size: .8rem; } .terms-block[open] > summary::before { content: "▾"; } .terms-block > summary .help { margin-top: 0; } /* ================= register (directory) ================= One ruled sheet, a row per company; the row opens into its own editor. Columns are a grid so contact and activity line up down the page. */ .register { background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); box-shadow: var(--shadow); } .reg-head, .reg-row > summary { display: grid; grid-template-columns: minmax(180px, 1.2fr) minmax(200px, 1.6fr) minmax(160px, 1fr) 24px; gap: 16px; align-items: center; padding: 11px 18px; } .reg-head { font-size: .8rem; color: var(--muted); border-bottom: 1px solid var(--line); } .reg-row { border-bottom: 1px solid var(--line); } .reg-row:last-child { border-bottom: none; } .reg-row > summary { cursor: pointer; list-style: none; font-size: .92rem; } .reg-row > summary::-webkit-details-marker { display: none; } .reg-row > summary:hover { background: var(--hover); } .reg-row > summary:focus-visible { outline: 2px solid var(--sea); outline-offset: -2px; } .reg-name { font-weight: 600; display: flex; flex-direction: column; gap: 2px; min-width: 0; } .reg-name small, .reg-contact small, .reg-activity small { font-weight: 400; color: var(--muted); font-size: .8rem; } .reg-contact { display: flex; flex-wrap: wrap; gap: 4px 12px; min-width: 0; } .reg-contact .mono { font-size: .8rem; color: var(--ink); } .reg-activity { font-size: .8rem; color: var(--ink); } .reg-chevron { width: 8px; height: 8px; border-right: 1.5px solid var(--faint); border-bottom: 1.5px solid var(--faint); transform: rotate(45deg); justify-self: center; transition: transform .15s; } .reg-row[open] > .reg-chevron, .reg-row[open] > summary .reg-chevron { transform: rotate(-135deg); } .reg-body { padding: 4px 18px 18px 18px; border-top: 1px dashed var(--line); background: var(--paper); } .reg-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .reg-defaults h3 { font-size: .92rem; margin: 12px 0 2px; } .reg-defaults .help { margin: 0 0 6px; } .reg-actions { margin-top: 12px; } .add-row { display: inline-block; } .add-row > summary { list-style: none; } .add-row > summary::-webkit-details-marker { display: none; } .add-form { margin-bottom: 16px; } .add-form .help { margin-top: 8px; } @media (max-width: 760px) { .reg-head { display: none; } .reg-row > summary { grid-template-columns: 1fr 24px; gap: 6px 12px; } .reg-activity { grid-column: 1; } .reg-chevron { grid-row: 1; grid-column: 2; } .reg-cols { grid-template-columns: 1fr; } } /* ================= error page ================= */ .error-sheet { max-width: 560px; margin: 8vh auto 0; } .error-sheet .code { font-family: var(--mono); font-size: 4rem; font-weight: 600; letter-spacing: -.03em; color: var(--line-strong); line-height: 1; } .error-sheet h1 { font-size: 1.43rem; margin: 10px 0 6px; } .error-sheet p { color: var(--muted); margin: 0 0 18px; } /* ================= responsive shell ================= */ @media (max-width: 900px) { .topbar-inner { padding: 0 16px; height: 48px; } .searchbtn { min-width: 0; width: 34px; padding: 0; justify-content: center; } .searchbtn span, .searchbtn .kbd-hint { display: none; } .track { flex-wrap: wrap; gap: 12px 0; } .track > li { flex: 1 0 45%; } .track > li:not(:last-child)::after { display: none; } .overlay { padding: 8vh 10px 10px; } .ribbon-top, .ribbon-meta, .ribbon .track-wrap { padding-left: 16px; padding-right: 16px; } .ribbon .next-step { padding-left: 16px; padding-right: 16px; } .ribbon-actions { margin-left: 0; } /* the rail becomes a header: brand row, then a scrolling nav row, then the user row. Nothing here may push the page wider than the screen. */ .shell { flex-direction: column; } .rail { width: 100%; height: auto; position: static; display: block; } .rail-brand { border-bottom: none; padding: 12px 16px 8px; } .rail nav { display: flex; gap: 2px; padding: 0 8px 6px; overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; } .rail nav::-webkit-scrollbar { display: none; } .rail .nav-group { display: none; } .rail nav a { border-bottom: 2px solid transparent; border-radius: 0; white-space: nowrap; padding: 6px 10px; } .rail nav a.active { background: transparent; border-bottom-color: var(--signal); } .rail nav a .nav-badge { margin-left: 6px; } .rail-user { display: flex; align-items: center; gap: 12px; padding: 8px 16px; } .rail-user .u { flex: 1; } .theme-toggle { margin-top: 0; width: auto; } .scope-switch { margin-top: 0; } .page { padding: 18px 16px 60px; } /* wide tables scroll inside their sheet; the page never scrolls sideways */ .card, .queue, .ribbon { min-width: 0; } .card, .queue { overflow-x: auto; } .desk > * { min-width: 0; } .stats { grid-template-columns: repeat(2, minmax(0, 1fr)); } .stat { border-right: 1px solid var(--line); border-bottom: 1px solid var(--line); } .stat:nth-child(2n) { border-right: none; } .stat:last-child { border-bottom: none; } .page-head .sub { flex-basis: 100%; } } /* ================= print: the record sheet, nothing else ================= */ @media print { .rail, .topbar, .skip-link, .overlay, .ribbon-actions, .btn, form, .pager { display: none !important; } body { background: #fff; color: #000; } .page { max-width: none; padding: 0; } .ribbon, .card, .stats { border-color: #999; box-shadow: none; break-inside: avoid; } .ribbon { border-left-color: #000; } a { color: inherit; } } @media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; } } /* a11y: keyboard-only skip link — visible only when focused */ .skip-link { position: absolute; left: -9999px; top: 0; z-index: 100; background: var(--signal); color: var(--on-signal); padding: 8px 14px; border-radius: 0 0 6px 0; font-size: 13px; text-decoration: none; } .skip-link:focus { left: 0; }