/* app.css — ZeraGrants tenant portal. One sheet, no build step. Skin: David's dashboard redesign (grant-ops-template feat/dashboard-redesign) — warm cream canvas, white panels, deep cranberry brand. Color means ONE thing: cranberry = brand (headings/links/CTA); money is neutral (never red); green = eligible; amber = needs review; "not eligible" is neutral, not alarming. Fraunces (headings) / Inter (body, tabular numerals for data). */ :root { /* Brand — deep cranberry (matched to the approved portal prototype tokens) */ --brand: #8a1d24; --brand-hover: #75171d; --brand-dark: #641116; --brand-soft: #f5e3df; /* light cranberry tint — active nav pill, avatar, help card */ --active-nav: #f5e3df; /* Text */ --text: #5f544b; --text-muted: #8b7f72; --text-soft: #a99c8d; --heading: #191512; --ink: #26201d; /* Semantic roles */ --ok: #1f6f43; /* eligible */ --ok-bg: #e7f2ea; --ok-line: #bfe0cb; --warn: #946100; /* needs review */ --warn-accent: #c07d18; --warn-bg: #f8ecce; --warn-line: #ecd39a; --alert: #a82a31; /* errors / urgent ONLY */ --alert-bg: #f8e6e3; --alert-border: #eec7c4; --neutral: #7d7060; /* "not eligible" / closed — never alarming */ --neutral-bg: #efe7d9; --neutral-line: #ddd2bf; --blue: #5c7ea0; /* "waiting on you" accent */ --blue-bg: #e8eef4; /* Surfaces — warm cream canvas, warm-white panels, soft warm borders */ --bg: #f4eee2; --sidebar: #fbf8f1; --panel: #fffef9; --surface-2: #ffffff; --surface-muted: #f6efe3; --tint: #fbf0ec; --border: #e9e0d0; --border-strong: #ded2be; --row-rule: #efe7d6; /* hairline between table rows */ --shadow-card: 0 1px 2px rgba(60, 40, 30, 0.05), 0 1px 3px rgba(60, 40, 30, 0.04); --font-serif: "Fraunces", "Iowan Old Style", Georgia, serif; --font-sans: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif; } * { box-sizing: border-box; } [hidden] { display: none !important; } html { font-size: 16px; } body { margin: 0; background: var(--bg); color: var(--text); font-family: var(--font-sans); font-weight: 400; line-height: 1.5; -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; } a { color: var(--brand); font-weight: 600; text-decoration: none; } a:hover, a:focus-visible { text-decoration: underline; } :focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 4px; } /* Skip link (WCAG 2.2 AA bypass-blocks): invisible until keyboard-focused. */ .skip-link { position: absolute; top: -48px; left: 8px; z-index: 100; background: var(--heading); color: #fff; padding: 10px 16px; border-radius: 8px; font-size: 13px; font-weight: 600; transition: top 0.15s ease; } .skip-link:focus { top: 8px; text-decoration: none; } /* Applied to while the mobile drawer is open (locks background scroll behind it). */ body.no-scroll { overflow: hidden; } /* ---- shell: white sidebar + cream content column ---- */ .shell { display: grid; grid-template-columns: 230px 1fr; min-height: 100vh; } .rail { position: relative; /* anchors .rail-close; also the drawer's slide/fixed context <900px */ display: flex; flex-direction: column; gap: 0; background: var(--sidebar); border-right: 1px solid var(--border); padding: 20px 12px 16px; min-width: 0; /* grid-item shrink-guard (mirrors .main): a 1fr track must not force the rail wide when the shell stacks to one column on phones */ } .rail-close { display: none; } /* shown only in the <900px drawer (below) */ /* Topbar hamburger — hidden at desktop widths; the rail is always visible there. */ .menu-btn { display: none; flex: none; align-items: center; justify-content: center; width: 40px; height: 40px; border-radius: 8px; border: 1px solid var(--border-strong); background: var(--panel); color: var(--text); cursor: pointer; padding: 0; } .menu-btn:hover { border-color: var(--brand); color: var(--brand); } /* Backdrop behind the open mobile drawer; toggled via the `hidden` attribute (see layout() script). */ .rail-backdrop { position: fixed; inset: 0; background: rgba(25, 21, 18, 0.42); z-index: 45; } /* Brand lockup: cranberry dot-cluster flower mark (matches the approved mockup) + serif ZeraGrants */ .lockup { display: flex; align-items: center; gap: 10px; padding: 0 8px 18px; } .lockup:hover { text-decoration: none; } .mark { width: 30px; height: 30px; flex: none; display: block; color: var(--brand); } .mark svg, svg.mark { width: 100%; height: 100%; display: block; fill: currentColor; } svg.mark { width: 30px; height: 30px; color: var(--brand); } .lockup-text { line-height: 1.15; } .lockup-name { display: block; font-family: var(--font-serif); font-size: 18px; color: var(--brand); font-weight: 500; } .lockup-name b { font-weight: 700; } .lockup-tag { display: block; font-size: 9px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.14em; color: var(--text-soft); margin-top: 1px; } /* Grouped nav with icons; active = light-cranberry pill */ .rail nav { flex: 1; display: flex; flex-direction: column; gap: 20px; padding: 0 2px; overflow-y: auto; } .navgroup { display: flex; flex-direction: column; gap: 2px; } .navlabel { padding: 0 10px; margin-bottom: 5px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.12em; color: var(--text-soft); } .rail nav a { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 9px; font-size: 13px; font-weight: 500; color: var(--text-muted); transition: background 0.12s ease, color 0.12s ease; } .rail nav a svg { flex: none; } .rail nav a:hover { background: var(--surface-muted); color: var(--text); text-decoration: none; } .rail nav a.on { background: var(--active-nav); color: var(--brand); font-weight: 600; } .helpcard { margin: 18px 4px 14px; padding: 14px; border-radius: 12px; border: 1px solid var(--border); background: var(--brand-soft); } .helpcard-title { font-size: 12.5px; font-weight: 600; color: var(--heading); } .helpcard p { margin: 4px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--text-muted); } .helpcard a { display: inline-block; margin-top: 8px; font-size: 12px; } .railfoot { border-top: 1px solid var(--border); padding: 14px 6px 0; } .railfoot-id { display: flex; align-items: center; gap: 10px; min-width: 0; } .avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: 999px; background: var(--brand-soft); color: var(--brand); font-size: 12px; font-weight: 700; } .railfoot-who { min-width: 0; } .railfoot-name { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; font-weight: 600; color: var(--heading); } .railfoot-role { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 11px; color: var(--text-muted); } .signout { margin: 12px 0 0; } .signout button { display: inline-flex; align-items: center; justify-content: center; gap: 6px; width: 100%; padding: 9px 14px; border-radius: 8px; background: var(--panel); color: var(--text); border: 1px solid var(--border-strong); font: inherit; font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease; } .signout button:hover { border-color: var(--brand); color: var(--brand); } /* Content column: white topbar with the org pill, then the page */ .main { display: flex; flex-direction: column; min-width: 0; } .topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--panel); border-bottom: 1px solid var(--border); padding: 12px 24px; } .orgpill { display: inline-flex; align-items: center; gap: 8px; max-width: 60vw; padding: 7px 13px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface-muted); font-size: 12.5px; font-weight: 600; color: var(--text); } .orgpill svg { flex: none; color: var(--text-muted); } .orgpill span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .content { padding: 28px 32px 64px; max-width: 1040px; width: 100%; } /* ---- page head ---- */ .pagehead h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(26px, 3.4vw, 34px); line-height: 1.1; letter-spacing: -0.015em; color: var(--heading); margin: 0 0 6px; } .pagehead .lede { color: var(--text-muted); font-size: 14px; margin: 0 0 26px; max-width: 62ch; } .crumb { font-size: 13px; display: inline-block; margin-bottom: 10px; } /* ---- the ledger: a white card table ---- */ table.ledger { width: 100%; border-collapse: separate; border-spacing: 0; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); } .ledger th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); font-weight: 700; padding: 12px 16px 10px; border-bottom: 1px solid var(--border); } .ledger td { padding: 14px 16px; border-bottom: 1px solid var(--row-rule); vertical-align: top; font-size: 13.5px; } .ledger tr:last-child td { border-bottom: 0; } .ledger thead th:first-child { border-top-left-radius: 14px; } .ledger thead th:last-child { border-top-right-radius: 14px; } .ledger tr:first-child td:first-child { border-top-left-radius: 14px; } .ledger tr:first-child td:last-child { border-top-right-radius: 14px; } .ledger thead + tbody tr:first-child td { border-radius: 0; } .ledger tr:last-child td:first-child { border-bottom-left-radius: 14px; } .ledger tr:last-child td:last-child { border-bottom-right-radius: 14px; } .ledger tbody tr:hover td { background: var(--surface-muted); } .ledger .c-grant a { font-weight: 600; color: var(--heading); } .ledger .c-grant a:hover { color: var(--brand); } .ledger .sub { font-size: 12px; color: var(--text-soft); margin-top: 2px; max-width: 52ch; } /* Numbers/dates: neutral ink, tabular figures — money is never red */ .c-num { font-variant-numeric: tabular-nums; font-size: 13px; text-align: right; white-space: nowrap; color: var(--text); } .ledger.slim td { padding: 11px 16px; } /* Explicit row action (spec s8.5) — the row/title is clickable, but a visible link never requires the user to discover that on their own. */ .c-action { text-align: right; white-space: nowrap; } .rowlink { font-size: 12.5px; } /* ---- verdict stamps: green = eligible, amber = needs review, neutral = closed ---- */ .badge { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11.5px; font-weight: 600; letter-spacing: 0.01em; white-space: nowrap; } .v-yes { background: var(--ok-bg); color: var(--ok); } .v-no { background: var(--surface-muted); color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); } .v-ask { background: var(--warn-bg); color: var(--warn); } .v-none { background: var(--panel); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border); } /* ---- Dashboard Lifecycle Truth: research-status banner (pagehead, both empty + full states) --- */ .research-banner { display: flex; align-items: center; gap: 8px; margin: -6px 0 20px; } .badge.r-queued, .badge.r-researching, .badge.r-awaiting { background: var(--blue-bg); color: var(--blue); } .badge.r-insufficient, .badge.r-unknown { background: var(--neutral-bg); color: var(--neutral); } .badge.r-ready { background: var(--ok-bg); color: var(--ok); } .badge.r-failed { background: var(--alert-bg); color: var(--alert); } /* ---- eligibility: the decided split, in a white card ---- */ .split { margin: 0 0 32px; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 20px; } .split-bar { display: flex; height: 10px; border-radius: 999px; overflow: hidden; background: var(--surface-muted); } .split-bar .s-yes { background: var(--ok); } .split-bar .s-no { background: var(--border-strong); } .split-bar .s-ask { background: var(--warn-accent); } .split-legend { display: flex; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-top: 10px; font-size: 12.5px; color: var(--text-muted); } .split-legend b { color: var(--heading); font-variant-numeric: tabular-nums; } .vgroup { margin-top: 32px; } .vgroup h2, .gaps h2, .vdetail h2, section h2, .empty h2 { font-family: var(--font-serif); font-weight: 600; font-size: 18px; letter-spacing: -0.005em; color: var(--heading); margin: 0 0 4px; } .vgroup .count { display: inline-block; margin-left: 4px; padding: 1px 9px; border-radius: 999px; background: var(--surface-muted); border: 1px solid var(--border); font-family: var(--font-sans); font-size: 12px; font-weight: 600; color: var(--text-muted); vertical-align: 2px; font-variant-numeric: tabular-nums; } .blurb { color: var(--text-muted); font-size: 13px; margin: 0 0 12px; } /* ---- the questions list: amber-accented card ---- */ .gaps { margin-top: 32px; background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn-accent); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 22px; } .gaps ul { margin: 0; padding-left: 20px; } .gaps li { margin: 8px 0; font-size: 13.5px; } .chips { margin-left: 6px; } .chip { display: inline-block; font-size: 11px; font-weight: 600; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 999px; padding: 2px 9px; margin: 0 3px 2px 0; color: var(--text-muted); } a.chip { color: var(--brand); } a.chip:hover { border-color: var(--brand); text-decoration: none; } /* ---- detail / facts: small white cards ---- */ .facts { display: flex; gap: 12px; flex-wrap: wrap; margin: 0 0 8px; padding: 0; } .facts.wide { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; } .facts > div { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 12px 16px; min-width: 140px; } .facts dt { font-size: 10.5px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); font-weight: 700; } .facts dd { margin: 3px 0 0; font-size: 14px; font-weight: 600; color: var(--heading); font-variant-numeric: tabular-nums; overflow-wrap: anywhere; } .gate { margin: 10px 0; } .gate p { margin: 4px 0 0; color: var(--text-muted); font-size: 13.5px; max-width: 68ch; } .vdetail, section { margin-top: 28px; } section p { font-size: 13.5px; color: var(--text); max-width: 68ch; } section ul { padding-left: 20px; } section li { font-size: 13.5px; margin: 4px 0; } section h3 { font-size: 13px; font-weight: 700; color: var(--heading); margin: 14px 0 4px; } .src { margin-top: 24px; font-size: 12px; color: var(--text-soft); overflow-wrap: anywhere; } .src a { font-weight: 500; } .empty { border: 1px dashed var(--border-strong); border-radius: 14px; padding: 40px 24px; text-align: center; color: var(--text-muted); font-size: 13.5px; background: var(--panel); } .empty p { margin: 0 0 16px; max-width: 46ch; margin-left: auto; margin-right: auto; } .empty .empty-actions { display: flex; justify-content: center; gap: 10px; flex-wrap: wrap; } /* First-run welcome — the empty board oriented into an onboarding moment. */ .welcome { border: 1px solid var(--border); border-radius: 16px; padding: 30px 30px 26px; background: var(--panel); box-shadow: var(--shadow-card); } .welcome h2 { margin: 0; font-family: var(--font-serif); font-weight: 500; font-size: 22px; color: var(--heading); } .welcome-lede { margin: 8px 0 22px; font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 62ch; } .howitworks { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; } .howitworks li { display: flex; gap: 14px; align-items: flex-start; } .step-n { flex: none; width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; background: var(--brand-soft); color: var(--brand); font-size: 13px; font-weight: 700; margin-top: 1px; } .howitworks b { display: block; font-size: 14px; color: var(--heading); font-weight: 600; } .howitworks p { margin: 2px 0 0; font-size: 13px; line-height: 1.55; color: var(--text-muted); max-width: 60ch; } .welcome-foot { margin: 22px 0 0; padding-top: 18px; border-top: 1px solid var(--row-rule); font-size: 13px; color: var(--text-muted); } /* Settings: complete-your-profile prompt + "not on file" fields. */ .profile-prompt { margin: 0 0 18px; padding: 13px 16px; border-radius: 10px; font-size: 13px; line-height: 1.55; color: var(--warn); background: var(--warn-bg); border: 1px solid #ecd8ac; max-width: 74ch; } .profile-prompt b { color: var(--heading); } .fact-missing dd { color: var(--text-soft); font-weight: 500; font-style: italic; } /* Profile completeness meter (spec s13.3) — a clearer state than a bare warning line. */ .completeness { display: flex; align-items: center; gap: 14px; margin: 0 0 16px; padding: 14px 16px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); } .completeness-num { font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--heading); flex: none; min-width: 3ch; } .completeness-body { flex: 1; min-width: 0; } .completeness-label { font-size: 12.5px; color: var(--text-muted); margin: 0 0 6px; } .completeness-label b { color: var(--heading); } .completeness-track { height: 8px; border-radius: 999px; background: var(--surface-muted); overflow: hidden; } .completeness-fill { display: block; height: 100%; background: var(--ok); border-radius: 999px; } .completeness.incomplete .completeness-fill { background: var(--warn-accent); } .completeness .btn.ghost { flex: none; } /* Next-step CTA under a verdict — an "Eligible" verdict must never dead-end. */ .nextstep { margin-top: 28px; padding: 20px 22px; border-radius: 14px; background: var(--surface-muted); border: 1px solid var(--border); } .nextstep h2 { margin: 0 0 6px; font-family: var(--font-serif); font-weight: 500; font-size: 18px; color: var(--heading); } .nextstep p { margin: 0 0 14px; font-size: 13.5px; color: var(--text-muted); max-width: 62ch; } .nextstep p:last-child { margin-bottom: 0; } .nextstep .btn + .btn { margin-left: 8px; } /* "Needs you" nudge — pulls a client to the one screen that wants their input. */ .nudge { display: inline-flex; align-items: center; gap: 8px; margin: 0 0 22px; padding: 11px 16px; border-radius: 10px; background: var(--brand-soft); color: var(--brand); font-size: 13.5px; font-weight: 600; border: 1px solid #ecccc0; } .nudge:hover { background: #f3d9d1; text-decoration: none; color: var(--brand); } .nudge b { font-weight: 700; } .nudge-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--warn-accent); flex: none; } .nudge .arr { margin-left: 2px; transition: transform 0.15s ease; } .nudge:hover .arr { transform: translateX(2px); } /* ---- login gate: pitch panel + sign-in card on warm cream ---- */ .gate-bg { background: #fbf4e8; } .gatewrap { display: grid; grid-template-columns: minmax(0, 1fr) 420px; gap: 24px; align-items: center; max-width: 1120px; min-height: 100vh; margin: 0 auto; padding: 32px 24px; } .gate-pitch { position: relative; overflow: hidden; border-radius: 10px; border: 1px solid #eadcc8; background: #fff7e9; padding: 40px 36px; box-shadow: 0 18px 50px rgba(93, 58, 31, 0.12); } .ring { position: absolute; border-radius: 999px; opacity: 0.55; pointer-events: none; } .ring.r1 { right: -54px; top: -74px; width: 224px; height: 224px; border: 28px solid #efe2cf; } .ring.r2 { right: 32px; bottom: -80px; width: 192px; height: 192px; border: 18px solid #f3e7d6; } .gate-brand { position: relative; display: flex; align-items: center; gap: 10px; margin-bottom: 0; } .gb-text { line-height: 1.2; } .gb-name { display: block; font-size: 20px; font-weight: 700; color: #9f2f27; } .gb-tag { display: block; margin-top: 1px; font-size: 9px; font-weight: 600; letter-spacing: 0.1em; text-transform: uppercase; color: #b34f43; } .gate-pitch h1 { position: relative; font-family: var(--font-serif); font-weight: 500; font-size: clamp(28px, 3.4vw, 38px); line-height: 1.18; color: #2c1d15; margin: 30px 0 0; max-width: 24ch; } .gate-pitch > p { position: relative; margin: 16px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-muted); max-width: 52ch; } .ministats { position: relative; display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; margin-top: 30px; } .ministat { border-radius: 8px; border: 1px solid #eadcc8; background: rgba(255, 255, 255, 0.8); padding: 14px; } .ministat .v { font-size: 16px; font-weight: 700; color: #9f2f27; } .ministat .l { margin-top: 4px; font-size: 11px; color: #806859; } .gatecard { border-radius: 10px; border: 1px solid #eadcc8; background: rgba(255, 255, 255, 0.92); padding: 24px; box-shadow: 0 18px 50px rgba(93, 58, 31, 0.12); } .gatecard .gate-brand { margin-bottom: 20px; } .gatecard h2 { font-family: var(--font-serif); font-weight: 500; font-size: 24px; color: #2f2118; margin: 0; } .gate-sub { margin: 4px 0 0; font-size: 12px; color: #806859; } .gatecard label { display: block; margin-top: 16px; } .gatecard label > span:first-child { display: block; margin-bottom: 4px; font-size: 11px; font-weight: 600; color: #806859; } .gatecard input { display: block; width: 100%; padding: 9px 12px; font: inherit; font-size: 13px; color: #4a3629; background: #fffaf4; border: 1px solid #e5d6bf; border-radius: 6px; outline: none; } .gatecard input:focus { border-color: #9f2f27; } .gatecard input[aria-invalid="true"] { border-color: #b3483d; } .gatecard .fieldhint { display: block; margin-top: 6px; font-size: 11px; font-weight: 400; line-height: 1.45; color: #8a7565; } .pwwrap { display: flex; background: #fffaf4; border: 1px solid #e5d6bf; border-radius: 6px; } .pwwrap:focus-within { border-color: #9f2f27; } .pwwrap input { flex: 1; min-width: 0; background: transparent; border: 0; border-radius: 6px 0 0 6px; } .pwwrap input:focus { border-color: transparent; } .pwwrap button { border: 0; border-left: 1px solid #e5d6bf; background: none; padding: 0 12px; font: inherit; font-size: 11px; font-weight: 600; color: #9f2f27; cursor: pointer; } .caps { display: block; margin-top: 6px; font-size: 11px; font-weight: 600; color: #8a4a12; } .err { margin: 16px 0 0; padding: 8px 12px; border-radius: 6px; font-size: 12px; color: #a33b31; background: var(--alert-bg); border: 1px solid var(--alert-border); } .gate-submit { display: block; width: 100%; margin-top: 20px; padding: 11px 12px; border: 0; border-radius: 6px; background: #8d2c2a; color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; box-shadow: 0 1px 2px rgba(50, 32, 20, 0.12); transition: background 0.15s ease; } .gate-submit:hover { background: #7c2624; } .gate-submit:disabled { opacity: 0.6; cursor: default; } .gatecard input:focus-visible, .pwwrap:focus-within, .pwwrap button:focus-visible, .gate-submit:focus-visible, .reset-continue:focus-visible { outline: 3px solid rgba(159, 47, 39, 0.24); outline-offset: 2px; } .gate-links { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; margin: 16px 0 0; } .gate-links a { font-size: 11px; color: #9f2f27; } .reset-gate { grid-template-columns: minmax(0, 1fr) 440px; } .reset-card { align-self: center; } .reset-context { display: grid; gap: 10px; margin: 18px 0 2px; padding: 12px; border: 1px solid #eadcc8; border-radius: 8px; background: #fff7e9; } .reset-context div { min-width: 0; } .reset-context dt { margin: 0 0 3px; font-size: 10px; font-weight: 700; color: #9b7660; text-transform: uppercase; letter-spacing: 0.08em; } .reset-context dd { margin: 0; color: #3d2b20; font-size: 13px; font-weight: 600; overflow-wrap: anywhere; } .pw-rules { margin-top: 16px; padding: 12px; border-radius: 8px; background: #fbf4e8; border: 1px solid #eadcc8; } .pw-rules p { margin: 0 0 8px; font-size: 11px; font-weight: 700; color: #806859; } .pw-rules ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 6px; } .pw-rules li { position: relative; padding-left: 20px; font-size: 12px; line-height: 1.4; color: #806859; } .pw-rules li::before { content: ""; position: absolute; left: 0; top: 0.45em; width: 8px; height: 8px; border-radius: 999px; background: #d8c6b2; box-shadow: 0 0 0 3px #f4eadc; } .pw-rules li[data-ok="true"] { color: #356545; } .pw-rules li[data-ok="true"]::before { background: #3f7a55; box-shadow: 0 0 0 3px #dcebdd; } .reset-success { margin-top: 18px; } .reset-success h2 { font-size: 24px; } .reset-success p { margin: 8px 0 0; color: #806859; font-size: 13px; line-height: 1.55; } .reset-continue { text-align: center; text-decoration: none; } .reset-continue:hover { text-decoration: none; } /* ---- small screens (spec s5.3/s19): sidebar becomes an off-canvas drawer ---- */ @media (max-width: 900px) { .shell { grid-template-columns: 1fr; } .menu-btn { display: inline-flex; } /* topbar hamburger, 40px box ⇒ ≥44px hit area via padding below */ .rail { position: fixed; inset: 0 auto 0 0; z-index: 50; width: min(84vw, 320px); height: 100vh; border-right: 1px solid var(--border); box-shadow: 0 10px 40px rgba(30, 20, 12, 0.22); transform: translateX(-100%); transition: transform 0.22s ease; overflow-y: auto; } .rail.open { transform: translateX(0); } .rail-backdrop[hidden] { display: none; } .lockup { padding-right: 34px; } /* keep clear of the close button */ .rail-close { display: flex; align-items: center; justify-content: center; position: absolute; top: 12px; right: 8px; width: 44px; height: 44px; border: 0; border-radius: 8px; background: transparent; color: var(--text-muted); cursor: pointer; } .rail-close:hover { color: var(--brand); background: var(--surface-muted); } /* Real touch targets inside the drawer — desktop density (8px/13px) reads fine with a mouse but is under the 44px minimum spec calls for on a touch nav (s5.3/s18). */ .rail nav a { min-height: 44px; } .signout button { min-height: 44px; } .topbar { padding: 10px 14px; } .content { padding: 20px 16px 48px; } table.ledger { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; } .facts { gap: 10px; } .gatewrap { grid-template-columns: 1fr; align-items: start; padding: 24px 16px; } .gatecard { order: 1; } .gate-pitch { order: 2; padding: 28px 22px; } .ministats { grid-template-columns: 1fr; } .reset-gate { grid-template-columns: 1fr; } } /* Phones: table columns can't all fit — a horizontal scroll used to hide the rightmost column (award, deadline, "by") off the right edge. Stack every ledger row into a card so nothing is ever clipped. Cells with a data-label render as a "LABEL ⇄ value" row. */ @media (max-width: 560px) { table.ledger { display: block; overflow: visible; border: 0; background: transparent; box-shadow: none; } table.ledger thead { display: none; } table.ledger tbody { display: block; } table.ledger tr { display: block; background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 4px 2px; margin-bottom: 12px; } table.ledger tr:last-child { margin-bottom: 0; } table.ledger tr:hover td { background: transparent; } table.ledger td { display: block; border: 0 !important; border-radius: 0 !important; padding: 5px 16px; } table.ledger td:first-child { padding-top: 12px; } table.ledger td:last-child { padding-bottom: 12px; } /* labeled cells (Award/Deadline/When/By/Status) → label on the left, value on the right */ table.ledger td[data-label] { display: flex; justify-content: space-between; gap: 12px; align-items: baseline; text-align: right; white-space: normal; } table.ledger td[data-label]::before { content: attr(data-label); color: var(--text-soft); font-weight: 700; font-variant-numeric: normal; text-transform: uppercase; font-size: 11px; letter-spacing: 0.06em; white-space: nowrap; } } /* ---- eligibility: page tools + answerable unlock questions (increment-portal-answers) ---- */ .pagetools { display: flex; justify-content: flex-end; margin: -6px 0 16px; } .btn { display: inline-flex; align-items: center; gap: 7px; padding: 9px 15px; border-radius: 8px; border: 1px solid var(--brand-hover); background: var(--brand); color: #fff; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; text-decoration: none; } .btn:hover { background: var(--brand-hover); text-decoration: none; color: #fff; } .btn:disabled { opacity: 0.6; cursor: default; } .btn.ghost { background: var(--panel); color: var(--brand); border: 1px solid var(--border-strong); } .btn.ghost:hover { background: var(--surface-muted); color: var(--brand); } .qcard { background: var(--panel); border: 1px solid var(--border); border-left: 3px solid var(--warn-accent); border-radius: 12px; padding: 16px 18px; box-shadow: var(--shadow-card); margin-bottom: 12px; } .qcard.done { border-left-color: var(--ok); } .qcard-onhold { display: flex; align-items: center; gap: 7px; margin-bottom: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.05em; color: var(--warn); } .qcard.done .qcard-onhold { color: var(--ok); } .qcard-onhold .dot { width: 7px; height: 7px; border-radius: 999px; background: var(--warn-accent); } .qcard.done .qcard-onhold .dot { background: var(--ok); } .qcard h3 { margin: 0 0 3px; font-size: 15.5px; font-weight: 600; color: var(--heading); line-height: 1.35; } .qcard .grantref { margin: 0 0 12px; font-size: 13px; color: var(--text-muted); } .qcard .grantref b { color: var(--text); font-weight: 600; } .answers { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; } .opt input { position: absolute; opacity: 0; width: 0; height: 0; } .opt label { display: inline-block; padding: 7px 15px; border: 1px solid var(--border-strong); border-radius: 8px; font-size: 13px; font-weight: 500; color: var(--text-muted); cursor: pointer; background: var(--panel); } .opt input:checked + label { border-color: var(--brand); background: var(--brand-soft); color: var(--brand); font-weight: 600; } .opt input:focus-visible + label { outline: 2px solid var(--brand); outline-offset: 2px; } .qnote { width: 100%; border: 1px solid var(--border-strong); border-radius: 8px; padding: 8px 11px; font: inherit; font-size: 13px; background: var(--surface-muted); color: var(--text); margin-bottom: 10px; resize: vertical; min-height: 36px; } .qnote::placeholder { color: var(--text-soft); } .qactions { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; } .qhint { font-size: 12px; color: var(--text-soft); max-width: 44ch; } .qhint.err { color: var(--alert); } .submitted { display: flex; gap: 11px; align-items: flex-start; background: var(--ok-bg); border-radius: 9px; padding: 12px 14px; } .submitted svg { flex: none; color: var(--ok); margin-top: 1px; } .submitted p { margin: 0; font-size: 13.5px; color: var(--text); line-height: 1.5; } .submitted b { color: var(--heading); } .submitted .meta { display: block; margin-top: 4px; font-size: 12px; color: var(--text-soft); } /* ---- board summary export (print-optimized one-pager) ---- */ .doc-body { background: var(--surface-muted); margin: 0; } .doc-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 12px; max-width: 820px; margin: 0 auto; padding: 16px 20px; } .doc { max-width: 820px; margin: 0 auto 40px; background: var(--panel); border: 1px solid var(--border); border-radius: 12px; padding: 36px 42px; box-shadow: var(--shadow-card); } .doc-head { display: flex; justify-content: space-between; align-items: flex-start; border-bottom: 2px solid var(--heading); padding-bottom: 14px; } .doc-org { font-family: var(--font-serif); font-size: 23px; font-weight: 600; color: var(--heading); margin: 0; } .doc-sub { font-size: 12.5px; color: var(--text-muted); margin-top: 2px; } .doc-right { text-align: right; font-size: 11.5px; color: var(--text-soft); line-height: 1.6; } .doc-summary { font-size: 13.5px; color: var(--text-muted); margin: 16px 0 8px; } .doc-summary b { color: var(--heading); } /* F1 — the 6-column report table must scroll inside its own container on a phone, not force the whole page (and the exportable card) wider than the viewport. */ .doc-tablewrap { overflow-x: auto; -webkit-overflow-scrolling: touch; } .doc table { width: 100%; border-collapse: collapse; margin-top: 8px; font-size: 12.5px; } .doc th { text-align: left; font-size: 10px; text-transform: uppercase; letter-spacing: 0.08em; color: var(--text-soft); padding: 8px 10px; border-bottom: 1.5px solid var(--heading); } .doc td { padding: 9px 10px; border-bottom: 1px solid var(--row-rule); vertical-align: top; color: var(--text); } .doc .v { font-weight: 600; white-space: nowrap; } .doc .v.ok { color: var(--ok); } .doc .v.warn { color: var(--warn); } .doc .v.no { color: var(--text-soft); } .doc .rz { color: var(--text-muted); font-size: 11.5px; } .doc-foot { margin-top: 18px; font-size: 10.5px; color: var(--text-soft); border-top: 1px solid var(--border); padding-top: 12px; } @media print { .doc-toolbar { display: none; } .doc { box-shadow: none; border: 0; margin: 0; max-width: none; } .doc-body { background: #fff; } .doc-tablewrap { overflow: visible; } } /* ============================================================================ OVERVIEW DASHBOARD (task 774624e8 — reskin to the approved portal prototype). Every value below is bound to REAL tenant data in pages.js; no demo numbers. ============================================================================ */ .icchip { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--brand-soft); color: var(--brand); } .icchip svg { width: 22px; height: 22px; } .icchip.round { border-radius: 999px; } .icchip.ok { background: var(--ok-bg); color: var(--ok); } .icchip.warn { background: var(--warn-bg); color: var(--warn-accent); } .icchip.neutral { background: var(--neutral-bg); color: var(--neutral); } .icchip.blue { background: var(--blue-bg); color: var(--blue); } /* KPI cards row */ .dashlead { display: grid; grid-template-columns: minmax(0, 1fr) minmax(240px, 0.52fr); grid-template-areas: "main action" "metric action"; gap: 14px 18px; margin: 0 0 18px; padding: 22px; border: 1px solid var(--border); border-radius: 16px; background: linear-gradient(180deg, var(--panel), var(--sidebar)); box-shadow: var(--shadow-card); } .dashlead-main { grid-area: main; min-width: 0; } .dashlead h1 { font-family: var(--font-serif); font-weight: 600; font-size: clamp(28px, 3.5vw, 38px); line-height: 1.06; color: var(--heading); margin: 8px 0 6px; } .dashlead .lede { margin: 0; max-width: 64ch; color: var(--text-muted); font-size: 14px; } .dashlead .service-byline { margin: 14px 0 0; } .dash-eyebrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .dash-eyebrow .research-banner { margin: 0; } .dash-eyebrow .badge { letter-spacing: 0.01em; text-transform: none; } .dashmetric { grid-area: metric; display: inline-flex; align-items: baseline; gap: 10px; flex-wrap: wrap; align-self: end; min-width: 0; } .dashmetric-label { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .dashmetric b { font-family: var(--font-serif); color: var(--heading); font-weight: 600; font-size: 22px; line-height: 1; font-variant-numeric: tabular-nums; } .dashmetric span:last-child { font-size: 12.5px; color: var(--text-muted); } .dashaction { grid-area: action; display: flex; flex-direction: column; justify-content: center; min-width: 0; padding: 17px 18px; border-radius: 12px; border: 1px solid var(--border-strong); background: var(--surface-2); color: inherit; text-decoration: none; transition: border-color 0.15s ease, box-shadow 0.15s ease; } .dashaction:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(138, 29, 36, 0.1); text-decoration: none; } .dashaction.is-status { cursor: default; border-color: var(--border); background: var(--surface-muted); } .dashaction-kicker { font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--text-soft); } .dashaction-title { margin-top: 7px; font-weight: 700; color: var(--heading); font-size: 15px; } .dashaction-body { margin-top: 4px; font-size: 12.5px; color: var(--text-muted); line-height: 1.45; } .dashaction-link { margin-top: 12px; font-size: 13px; font-weight: 700; color: var(--brand); } /* Decision evidence: separate text-labelled axes, never an aggregate score or color-only cue. */ .evidencecard { margin: 0 0 16px; padding: 18px; border: 1px solid var(--border); border-radius: 14px; background: var(--panel); box-shadow: var(--shadow-card); } .evidence-head { display: flex; align-items: start; justify-content: space-between; gap: 16px; margin-bottom: 12px; } .evidence-head h2 { margin-bottom: 3px; } .evidence-head .subtle { margin: 0; } .evidence-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 18px; margin: 0; } .evidence-row { display: grid; grid-template-columns: minmax(116px, 0.72fr) minmax(0, 1.28fr); gap: 10px; padding: 9px 0; border-top: 1px solid var(--row-rule); min-width: 0; } .evidence-row dt { font-size: 12px; font-weight: 700; color: var(--text-muted); } .evidence-row dd { min-width: 0; margin: 0; color: var(--heading); font-size: 12.5px; overflow-wrap: anywhere; } .evidence-value { font-weight: 600; } .evidence-value.ok { color: var(--ok); } .evidence-value.warn { color: var(--warn); } .evidence-value.neutral { color: var(--text-muted); } .evidence-link { margin-left: 6px; font-size: 12px; white-space: nowrap; } .kpigrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 16px; margin: 0 0 22px; } .kpi { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 18px 18px 16px; } .kpi-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 10px; } .kpi-label { font-size: 13px; color: var(--text-muted); font-weight: 500; } .kpi-num { font-family: var(--font-serif); font-weight: 600; font-size: 30px; line-height: 1; color: var(--heading); margin: 12px 0 6px; font-variant-numeric: tabular-nums; } .kpi-sub { font-size: 12.5px; color: var(--text-soft); } /* KPI cards are links (spec s7.8 — every metric links to its relevant page). */ a.kpi { display: block; text-decoration: none; color: inherit; transition: border-color 0.15s ease, box-shadow 0.15s ease; } a.kpi:hover { border-color: var(--brand); box-shadow: 0 2px 8px rgba(138, 29, 36, 0.1); text-decoration: none; } /* Alert banner — one quick answer could move a grant forward */ .alertbar { display: flex; align-items: center; gap: 18px; margin: 0 0 22px; border: 1.5px solid var(--brand); background: var(--tint); border-radius: 14px; padding: 18px 20px; } .alertbar .aic { flex: none; width: 44px; height: 44px; border-radius: 999px; display: grid; place-items: center; background: var(--brand); color: #fff; } .alertbar .aic svg { width: 24px; height: 24px; } .alertbar .atx { flex: 1; min-width: 0; } .alertbar .atitle { font-family: var(--font-serif); font-weight: 600; font-size: 18px; color: var(--heading); margin-bottom: 2px; } .alertbar .adesc { font-size: 13.5px; color: var(--text-muted); } /* Overview panel grid (deadlines / activity) */ .panelgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 16px; } .opanel { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 20px 20px 14px; display: flex; flex-direction: column; min-width: 0; /* F2 — grid item can shrink below its content's min width, so a 1fr/minmax track never forces page overflow on mobile */ } .opanel-head { display: flex; align-items: center; gap: 9px; margin-bottom: 8px; } .opanel-head .ct { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--heading); } .opanel-head .count { display: inline-grid; place-items: center; min-width: 21px; height: 21px; padding: 0 7px; border-radius: 999px; background: var(--neutral-bg); color: var(--text-muted); font-size: 12px; font-weight: 700; } .opanel .foot { margin-top: auto; padding-top: 12px; } .opanel .foot a { font-size: 13px; } /* deadline rows */ .dline { display: flex; align-items: center; gap: 14px; padding: 12px 2px; border-bottom: 1px solid var(--row-rule); } .dline:last-of-type { border-bottom: 0; } .dline .date { text-align: center; flex: none; width: 38px; } .dline .date .m { font-size: 11px; font-weight: 700; letter-spacing: 0.04em; color: var(--text-soft); text-transform: uppercase; } .dline .date .d { font-family: var(--font-serif); font-weight: 600; font-size: 22px; color: var(--brand); line-height: 1; } .dline .dinfo { flex: 1; min-width: 0; } .dline .dn { font-weight: 600; color: var(--heading); font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .dline .dm { font-size: 12.5px; color: var(--text-muted); margin-top: 1px; } .daychip { flex: none; background: var(--neutral-bg); color: var(--text-muted); font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; white-space: nowrap; } .daychip.soon { background: var(--alert-bg); color: var(--alert); } .daychip.mid { background: var(--warn-bg); color: var(--warn); } /* Closed/expired (spec s7.5) — a passed deadline reads as closed, never as an active countdown. */ .daychip.passed { background: var(--surface-muted); color: var(--text-soft); box-shadow: inset 0 0 0 1px var(--border-strong); } /* activity timeline (overview panel + /activity screen) */ .tl { display: flex; flex-direction: column; } .tlrow { display: flex; gap: 13px; padding: 11px 2px; border-bottom: 1px solid var(--row-rule); } .tlrow:last-child { border-bottom: 0; } .tlrow .node { flex: none; width: 30px; height: 30px; border-radius: 999px; display: grid; place-items: center; border: 1px solid var(--border); background: var(--panel); } .tlrow .node svg { width: 15px; height: 15px; } .tlrow.ok .node { color: var(--ok); border-color: var(--ok-line); } .tlrow.warn .node { color: var(--warn-accent); border-color: var(--warn-line); } .tlrow.brand .node { color: var(--brand); border-color: var(--brand-soft); } .tlrow .tc { flex: 1; min-width: 0; } .tlrow .tt { font-weight: 600; color: var(--heading); font-size: 14px; } .tlrow .td { font-size: 13px; color: var(--text-muted); line-height: 1.45; margin-top: 1px; } .tlrow .tm { font-size: 12px; color: var(--text-soft); white-space: nowrap; padding-left: 8px; } .tlline { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; } /* snapshot + board-summary bottom row */ .snapgrid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin: 0 0 20px; } .snapgrid.single { grid-template-columns: 1fr; } .snapcard { background: var(--panel); border: 1px solid var(--border); border-radius: 14px; box-shadow: var(--shadow-card); padding: 20px; display: flex; flex-direction: column; } .snapcard .ct { margin: 0; font-family: var(--font-serif); font-weight: 600; font-size: 17px; color: var(--heading); } .snapcard .subtle { margin: 3px 0 0; font-size: 13px; color: var(--text-muted); } .segbar { display: flex; height: 11px; border-radius: 999px; overflow: hidden; margin: 16px 0 16px; gap: 2px; background: var(--surface-muted); } .segbar span { display: block; } .snapstats { display: flex; gap: 8px; } .snapstat { flex: 1; } .snapstat .n { font-family: var(--font-serif); font-weight: 600; font-size: 24px; line-height: 1; font-variant-numeric: tabular-nums; } .snapstat .l { font-size: 12px; color: var(--text-muted); margin-top: 4px; } .snapcard .foot { margin-top: auto; padding-top: 14px; } .summaryrow { display: flex; align-items: center; gap: 15px; margin-top: 6px; } .summaryrow .txt { flex: 1; min-width: 0; } .summaryrow .txt b { display: block; font-weight: 600; color: var(--heading); font-size: 14.5px; } .summaryrow .txt span { font-size: 12.5px; color: var(--text-muted); } /* funder/funding disclaimer (Lyra must-fix #2) */ .disclaimer { display: flex; gap: 11px; align-items: flex-start; margin: 6px 0 0; background: var(--surface-muted); border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; font-size: 12.5px; color: var(--text-muted); line-height: 1.55; max-width: none; } .disclaimer svg { flex: none; width: 17px; height: 17px; color: var(--text-soft); margin-top: 1px; } .disclaimer b { color: var(--text); font-weight: 600; } /* eligibility mini stat cards */ .estats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 14px; margin: 0 0 8px; } .estat { background: var(--panel); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow-card); padding: 15px 16px; } .estat-top { display: flex; align-items: center; gap: 11px; } .estat .icchip { width: 34px; height: 34px; border-radius: 999px; } .estat .icchip svg { width: 17px; height: 17px; } .estat .n { font-family: var(--font-serif); font-weight: 600; font-size: 24px; color: var(--heading); line-height: 1; font-variant-numeric: tabular-nums; } .estat .l { font-weight: 600; color: var(--heading); font-size: 13.5px; margin-top: 11px; } .estat .s { font-size: 12px; color: var(--text-muted); margin-top: 2px; } @media (max-width: 1080px) { .dashlead { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "metric" "action"; } .kpigrid, .estats { grid-template-columns: repeat(2, 1fr); } .panelgrid, .snapgrid { grid-template-columns: minmax(0, 1fr); } .evidence-list { grid-template-columns: minmax(0, 1fr); } } @media (max-width: 560px) { /* c4a070e9 — the 4 Overview stat cards were full-width stacked blocks (David: "too spaced out" on mobile). A condensed 2×2 grid + tighter padding/number packs them into the space. */ .kpigrid { grid-template-columns: 1fr 1fr; gap: 10px; margin-bottom: 16px; } .dashlead { padding: 17px; border-radius: 14px; } .dashaction { padding: 15px; } .dashmetric { display: block; } .dashmetric b { display: block; margin: 5px 0 3px; font-size: 24px; } .evidencecard { padding: 15px; } .evidence-head { display: block; } .evidence-head .rowlink { display: inline-block; margin-top: 9px; } .evidence-row { grid-template-columns: minmax(94px, 0.7fr) minmax(0, 1.3fr); gap: 8px; } .kpi { padding: 13px 14px 12px; } .kpi-num { font-size: 26px; margin: 7px 0 4px; } .estats { grid-template-columns: 1fr; } .alertbar { flex-wrap: wrap; } .alertbar .btn { width: 100%; } } @media (prefers-reduced-motion: reduce) { * { transition: none !important; } } /* recurring-service byline + row fit cue (task 0ae49761) */ .service-byline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; margin: 0 0 22px; font-size: 12.5px; color: var(--text-muted); } .snapcard .service-byline { margin: 7px 0 0; } .byline-dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ok); flex: none; } /* ux-council-2026-07-20 one-liner - a neutral dot next to "Not measured"/"Not yet" states so staleness/absence is never shown in the same green as a genuinely fresh measurement. */ .byline-dot.neutral { background: var(--text-soft); } .byline-change { color: var(--heading); font-weight: 600; } .fitcue { margin-top: 5px; font-size: 12px; line-height: 1.4; color: var(--text-muted); max-width: 52ch; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; } .fitcue-k { font-size: 10px; text-transform: uppercase; letter-spacing: 0.06em; font-weight: 700; color: var(--ok); margin-right: 5px; } /* client grant feedback bar (b01261ac) */ .feedback-bar { border-top: 1px solid var(--border); margin-top: 20px; padding-top: 14px; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; } .feedback-q { margin: 0; font-size: 13px; color: var(--text-muted); flex: 1 1 auto; } .feedback-acts { display: flex; gap: 8px; flex-wrap: wrap; } .feedback-acts .btn { padding: 6px 12px; font-size: 12px; } .feedback-done { margin: 0; font-size: 13px; color: var(--ok); }