/* Design tokens copied verbatim from ~/Desktop/surveyscan.nosync/src/ui/theme.ts (read 2026-09-13). Two rules that file exists to enforce and this one inherits: 1. Every state carries a WORD. The label goes on the item, never only in a legend. 2. Where colour appears it is a BLOCK, not a hairline. Status bars are 10px, chips are filled with a solid border. No meaning rides on a 3px stripe or a dot. */ :root { --ink: #16211B; --dim: #5C6B62; --faint: #8A968F; --line: #DFE5E0; --page: #F6F8F5; --card: #FFFFFF; --gh-green: #5FA845; --gh-purple: #5C2D88; /* MODULE — says WHERE YOU ARE. Orientation, never state. */ --home: #475569; --home-soft: #EEF2F6; --home-ink: #1E293B; --surveys: #1F6FEB; --surveys-soft: #E8F1FE; --surveys-ink: #0B3B87; --shop: #0E9F6E; --shop-soft: #E3F6EE; --shop-ink: #04543A; --reviews: #BE185D; --reviews-soft: #FBE9F1; --reviews-ink: #831843; --rollup: #7C3AED; --rollup-soft: #F1E9FE; --rollup-ink: #42169B; --admin: #C2610F; --admin-soft: #FDF1E3; --admin-ink: #7A3B06; /* STATE — says WHAT IS TRUE OF A THING. Same meaning on every screen. */ --idle: #64748B; --idle-soft: #F1F5F9; --idle-ink: #334155; --active: #B45309; --active-soft: #FEF3E2; --active-ink: #7C3A06; --waiting: #6D28D9; --waiting-soft: #F3EBFE; --waiting-ink: #4C1D95; --done: #15803D; --done-soft: #E7F6EC; --done-ink: #0B4A24; --wrong: #B91C1C; --wrong-soft: #FDECEC; --wrong-ink: #7F1414; --display: 'Outfit', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --sans: 'Public Sans', -apple-system, BlinkMacSystemFont, 'Segoe UI', Helvetica, Arial, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, Menlo, monospace; /* Nothing in the interface is smaller than 14.5px; secondary text never below 13.5. */ --hero: 30px; --title: 25px; --section: 19px; --body: 16.5px; --small: 14.5px; --tiny: 13.5px; } * { box-sizing: border-box; } body { margin: 0; background: var(--page); color: var(--ink); font: 400 var(--body)/1.5 var(--sans); -webkit-font-smoothing: antialiased; } h1, h2, h3 { font-family: var(--display); margin: 0; line-height: 1.2; } a { color: var(--rollup-ink); } /* The demonstration banner was removed 2026-10-03. Pat: "You seem to need to write everywhere that Halden is fictional ... There's probably nothing more that is self-evident than the fact that Halden is fictional. The people that are going to be viewing this know all the retirement community chains in Canada and Halden is not one of them." The project's rule is that the operator must BE obviously invented, which it is — invented name, invented residences, invented people. Saying so on every page was the product apologising for itself. The DEMO seal on the sign-in card carries it without a word. */ /* ── Masthead ──────────────────────────────────────────────────────────── The lockup Pat chose 2026-08-30: house image, 2px rule, "Senior Living CX" with CX in GH_PURPLE, then POWERED BY GREENHOUSE in mono. */ /* The masthead carries two identities and both have to be read at a glance from across a table: Greenhouse's, on the left, and the operator whose numbers are on screen, on the right. Pat, 2026-09-13: "maybe increase the size of that area so senior living cx and halden are bigger more pronounced." So the whole band is taller and both lockups step up with it. */ .masthead { background: var(--card); border-bottom: 2px solid var(--ink); padding: 22px 26px 0; } .lockup { display: flex; align-items: center; gap: 18px; flex-wrap: wrap; } .lockup img { height: 68px; width: auto; display: block; } .lockup .rule { width: 3px; align-self: stretch; background: var(--ink); } /* Sized against the operator's artwork, not by eye. The Halden lockup is 379px tall and its HALDEN capitals occupy 190 of those, so at 54px on screen they stand 27.1px. Outfit's cap height is 0.717 of its font size (measured, not assumed), so the wordmark was standing 23.7px at 33px — twelve per cent SHORTER than the operator's, which is the wrong way round for whose platform this is. At 44px it stands 31.5px, comfortably the taller of the two. */ .wordmark { font: 700 44px/1 var(--display); letter-spacing: -.015em; } .wordmark .cx { color: var(--gh-purple); } .powered { font: 600 13px var(--mono); letter-spacing: .14em; color: var(--dim); margin-top: 6px; } /* The operator's own lockup: name and cycle to the left of its mark, mirroring the Greenhouse lockup at the other end of the band so the two read as a pair. */ /* The operator's own lockup carries its name inside the artwork, so no separate text name sits beside it — two "Halden Retirement Communities" in the same 200 pixels reads as a mistake. Height is fixed and width follows, so a square mark and a wide one both sit correctly if the file is swapped. */ .operator { margin-left: auto; display: flex; flex-direction: column; align-items: flex-end; gap: 4px; } .operator .opmark { height: 54px; width: auto; max-width: min(330px, 40vw); object-fit: contain; object-position: right center; display: block; } .operator .meta { font: 500 var(--tiny) var(--mono); color: var(--dim); } @media (max-width: 900px) { .operator .opmark { height: 38px; max-width: min(210px, 40vw); } .wordmark { font-size: 30px; } .lockup img { height: 50px; } } /* ── Module navigation ─────────────────────────────────────────────────── The active tab carries a 6px underline in its module hue AND stays the only bold item, so the current module is legible without relying on the hue. */ nav.modules { display: flex; gap: 4px; padding: 14px 26px 0; background: var(--card); } nav.modules a { padding: 11px 17px 9px; text-decoration: none; color: var(--dim); font: 600 var(--small) var(--sans); border-bottom: 6px solid transparent; border-radius: 6px 6px 0 0; } nav.modules a:hover { background: var(--page); color: var(--ink); } nav.modules a.on { color: var(--ink); font-weight: 800; } nav.modules a.on.m-rollup { border-bottom-color: var(--rollup); background: var(--rollup-soft); } nav.modules a.on.m-surveys { border-bottom-color: var(--surveys); background: var(--surveys-soft); } nav.modules a.on.m-shop { border-bottom-color: var(--shop); background: var(--shop-soft); } nav.modules a.on.m-reviews { border-bottom-color: var(--reviews); background: var(--reviews-soft); } nav.modules a.on.m-home { border-bottom-color: var(--home); background: var(--home-soft); } /* The page's top rule carries the module hue — 6px, a block not a hairline. */ .module-rule { height: 6px; } .module-rule.m-rollup { background: var(--rollup); } .module-rule.m-surveys { background: var(--surveys); } .module-rule.m-shop { background: var(--shop); } .module-rule.m-reviews { background: var(--reviews); } .module-rule.m-home { background: var(--home); } main { max-width: 1240px; margin: 0 auto; padding: 26px; } .eyebrow { font: 800 var(--tiny) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); } .page-title { font-size: var(--hero); margin: 6px 0 4px; } .page-sub { color: var(--dim); font-size: var(--small); max-width: 78ch; margin: 0 0 22px; } .card { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 18px 20px; } /* ── Chips: filled solid, and always carrying their word ────────────────── */ .chip { display: inline-block; color: #fff; border-radius: 7px; padding: 5px 12px; font: 800 var(--tiny) var(--sans); white-space: nowrap; letter-spacing: .01em; } .chip.s-idle { background: var(--idle); border: 2px solid var(--idle-ink); } .chip.s-active { background: var(--active); border: 2px solid var(--active-ink); } .chip.s-waiting { background: var(--waiting); border: 2px solid var(--waiting-ink); } .chip.s-done { background: var(--done); border: 2px solid var(--done-ink); } .chip.s-wrong { background: var(--wrong); border: 2px solid var(--wrong-ink); } /* ── Footer ─────────────────────────────────────────────────────────────── */ footer { border-top: 1px solid var(--line); margin-top: 34px; padding: 20px 26px 40px; color: var(--dim); font-size: var(--tiny); max-width: 1240px; margin-left: auto; margin-right: auto; } footer .src { font-family: var(--mono); font-size: 12.5px; } /* ── Report card ───────────────────────────────────────────────────────── Five measures side by side, no composite index. Each cell carries its number, its rank in words, and a 10px block of colour — never colour alone. */ .rc { width: 100%; border-collapse: separate; border-spacing: 0 8px; } /* The headings stay put. Pat, 2026-09-13: "if i scroll i cant see what the headings are." Eleven columns of numbers are unreadable the moment the words that name them leave the screen, so the heading row pins to the top of the window and the community column pins to the left, which is the other half of the same problem on a wide table. */ .rc th { position: sticky; top: 0; z-index: 3; text-align: left; font: 800 var(--tiny) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); padding: 10px 10px 8px; vertical-align: bottom; background: var(--page); box-shadow: inset 0 -2px 0 var(--line); } .rc th:first-child { left: 0; z-index: 4; border-radius: 8px 0 0 0; } .rc td.who { position: sticky; left: 0; z-index: 2; background: var(--card); box-shadow: 2px 0 0 var(--line); } .rc tr[data-href]:hover td.who { background: #fff; } .rc th .unit { display: block; font-weight: 600; letter-spacing: 0; text-transform: none; color: var(--faint); } .rc td { background: var(--card); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 0; } .rc td:first-child { border-left: 1px solid var(--line); border-radius: 10px 0 0 10px; } .rc td:last-child { border-right: 1px solid var(--line); border-radius: 0 10px 10px 0; } .rc .who { padding: 14px 16px; min-width: 210px; } .rc .who a { font: 700 var(--body) var(--display); color: var(--ink); text-decoration: none; } .rc .who a:hover { text-decoration: underline; } .rc .who .care { font: 500 var(--tiny) var(--mono); color: var(--dim); margin-top: 3px; } .tile { display: flex; align-items: stretch; gap: 11px; padding: 11px 14px 11px 0; } .tile .bar { width: 10px; border-radius: 0 4px 4px 0; flex: none; } /* ten pixels, never three */ .tile .val { font: 700 var(--section)/1.15 var(--mono); } .tile .rank { font: 700 var(--tiny) var(--sans); color: var(--dim); margin-top: 2px; } .tile.none .val { font-size: var(--small); font-weight: 600; color: var(--dim); font-family: var(--sans); } /* RANK COLOURS. Pat, 2026-10-03: "the orange and the red are too similar." Measured under simulated deuteranopia, the old amber #B45309 and red #B91C1C sat 7.7 apart in Lab, where under about 20 two colours read as one. Blue, yellow-gold and brick red sit at least 53.7 apart for red-green colour blindness of both kinds, and blue replaces green because green against red is itself a red-green pair. The word ("3rd of 8") stays on every tile; colour is never the only signal. */ :root { --rank-top: #0E5A3A; --rank-top-ink: #0B3D26; /* green for good (Pat, 2026-10-07: "we use green for good not blue") */ --rank-mid: #F2C500; --rank-mid-ink: #5E4800; --rank-low: #A8321A; --rank-low-ink: #7A2412; } .band-top .bar { background: var(--rank-top); } .band-mid .bar { background: var(--rank-mid); } .band-low .bar { background: var(--rank-low); } .band-none .bar { background: var(--idle); } .band-top .rank { color: var(--rank-top-ink); } .band-mid .rank { color: var(--rank-mid-ink); } .band-low .rank { color: var(--rank-low-ink); } .legend { display: flex; gap: 20px; flex-wrap: wrap; margin: 16px 0 0; font-size: var(--small); } .legend span { display: flex; align-items: center; gap: 8px; } .legend i { width: 26px; height: 12px; border-radius: 3px; display: inline-block; } .summary { display: flex; gap: 14px; flex-wrap: wrap; margin-bottom: 22px; } .summary .card { flex: 1 1 190px; } .summary .k { font: 700 var(--hero)/1.1 var(--mono); } .summary .l { font: 600 var(--tiny) var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .08em; margin-top: 5px; } .summary .n { font-size: var(--tiny); color: var(--dim); margin-top: 7px; line-height: 1.4; } /* ── Drill-down screens ──────────────────────────────────────────────────── */ .back { display:inline-block; font: 700 var(--tiny) var(--sans); color: var(--dim); text-decoration: none; margin-bottom: 10px; } .back:hover { color: var(--ink); text-decoration: underline; } .seg-tabs { display:flex; gap:8px; margin: 0 0 18px; } .seg-tabs a { padding: 9px 16px; border-radius: 8px; text-decoration:none; font: 700 var(--small) var(--sans); color: var(--dim); border: 2px solid var(--line); background:#fff; } .seg-tabs a.on { color:#fff; background: var(--surveys); border-color: var(--surveys-ink); } table.data { width:100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; } table.data th { text-align:left; font: 800 var(--tiny) var(--sans); letter-spacing:.07em; text-transform: uppercase; color: var(--dim); padding: 12px 16px; background: var(--page); border-bottom: 2px solid var(--line); } table.data td { padding: 13px 16px; border-bottom: 1px solid var(--line); font-size: var(--small); } table.data tr:last-child td { border-bottom: 0; } table.data td.num, table.data th.num { text-align: right; font-family: var(--mono); } table.data tr.total td { font-weight: 800; background: var(--page); } /* A delta always carries its sign AND a word, never a colour alone. */ .delta { font: 700 var(--tiny) var(--sans); white-space: nowrap; } .delta .w { font-weight: 800; } .delta.up { color: var(--done-ink); } .delta.down { color: var(--wrong-ink); } .delta.flat { color: var(--dim); } .delta.none { color: var(--faint); font-style: italic; } .two-col { display:grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items:start; } @media (max-width: 900px) { .two-col { grid-template-columns: 1fr; } } .stat-row { display:flex; gap:14px; flex-wrap:wrap; margin-bottom: 20px; } .stat-row .card { flex: 1 1 170px; } .stat-row .k { font: 700 28px/1.1 var(--mono); } .stat-row .l { font: 600 var(--tiny) var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing:.08em; margin-top: 5px; } .stat-row .n { font-size: var(--tiny); color: var(--dim); margin-top: 6px; } .caveat { background: var(--active-soft); border-left: 10px solid var(--active); border-radius: 0 8px 8px 0; padding: 13px 16px; margin: 16px 0; font-size: var(--small); } .caveat b { display:block; font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform: uppercase; color: var(--active-ink); margin-bottom: 4px; } .quote { border-left: 10px solid var(--line); padding: 4px 0 4px 16px; margin: 0 0 14px; font-size: var(--small); color: var(--ink); } /* ── Mystery shop ────────────────────────────────────────────────────────── */ .bars { margin: 0; } .barrow { display:grid; grid-template-columns: 200px 1fr 90px; gap: 14px; align-items:center; padding: 10px 0; border-bottom: 1px solid var(--line); } .barrow:last-child { border-bottom: 0; } .barrow .nm { font: 600 var(--small) var(--sans); } .barrow .nm small { display:block; font: 500 var(--tiny) var(--mono); color: var(--dim); } .barrow .track { background: var(--page); border: 1px solid var(--line); border-radius: 6px; height: 26px; overflow:hidden; } .barrow .fill { height: 100%; border-radius: 5px 0 0 5px; } .barrow .sc { text-align:right; font: 700 var(--body) var(--mono); } .fill.subject { background: var(--shop); } .fill.rival { background: var(--idle); } .barrow.subject .nm { font-weight: 800; } .barrow.subject .nm::after { content: " — this community"; font: 700 var(--tiny) var(--sans); color: var(--shop-ink); } .elgrid { display:grid; grid-template-columns: repeat(auto-fill, minmax(235px, 1fr)); gap: 14px; } .el { background: var(--card); border: 1px solid var(--line); border-radius: 11px; border-left: 10px solid var(--idle); padding: 15px 17px; } .el.done { border-left-color: var(--done); } .el.active { border-left-color: var(--active); } .el.waiting { border-left-color: var(--waiting); } .el.wrong { border-left-color: var(--wrong); } .el .t { font: 700 var(--small) var(--sans); } .el .s { font: 700 26px/1.2 var(--mono); margin: 7px 0 3px; } .el .s.na { font-size: var(--small); font-family: var(--sans); color: var(--dim); font-weight:600; } .el .n { font-size: var(--tiny); color: var(--dim); margin-top: 6px; } /* ── Reviews ─────────────────────────────────────────────────────────────── */ .rev { border-left: 10px solid var(--line); padding: 10px 0 10px 16px; margin-bottom: 14px; } .rev.low { border-left-color: var(--wrong); } .rev.mid { border-left-color: var(--active); } .rev.high { border-left-color: var(--done); } .rev .hd { font: 700 var(--tiny) var(--sans); color: var(--dim); margin-bottom: 4px; } .rev .tx { font-size: var(--small); } .planned { background: var(--reviews-soft); border-left: 10px solid var(--reviews); border-radius: 0 8px 8px 0; padding: 16px 18px; margin-bottom: 22px; } .planned b { display:block; font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform: uppercase; color: var(--reviews-ink); margin-bottom: 5px; } /* The Canadian benchmark carries the maple leaf wherever it appears, so the national benchmark is recognisable at a glance and never confused with the portfolio figure. */ .leaf { font-size: 1.05em; line-height: 1; margin-right: 2px; } /* ── Overall index ───────────────────────────────────────────────────────── */ main.wide { max-width: 1440px; } .rc td.idx { min-width: 132px; } .tile.index { padding-left: 0; } .tile.index .val { font-size: 27px; } .tile .yoy { font: 700 var(--tiny) var(--sans); margin-top: 3px; white-space: nowrap; } .tile .yoy.up { color: var(--done-ink); } .tile .yoy.down { color: var(--wrong-ink); } .tile .yoy.flat, .tile .yoy.none { color: var(--faint); } .tile .cov { font: 700 var(--tiny) var(--sans); color: var(--active-ink); margin-top: 3px; } .weights { display:grid; grid-template-columns: repeat(auto-fit, minmax(220px,1fr)); gap: 12px; margin: 12px 0 0; } .wcard { background: var(--card); border: 1px solid var(--line); border-radius: 10px; border-top: 10px solid var(--rollup); padding: 14px 16px; } .wcard .pct { font: 700 27px/1 var(--mono); } .wcard .nm { font: 700 var(--small) var(--sans); margin: 5px 0 6px; } .wcard .why { font-size: var(--tiny); color: var(--dim); line-height: 1.45; } details.explain { margin: 18px 0 0; } details.explain > summary { cursor: pointer; font: 700 var(--small) var(--sans); color: var(--rollup-ink); padding: 11px 15px; background: var(--rollup-soft); border-radius: 9px; border: 2px solid var(--rollup); list-style: none; } details.explain > summary::-webkit-details-marker { display: none; } details.explain > summary::before { content: "▸ "; } details.explain[open] > summary::before { content: "▾ "; } details.explain .inner { padding: 16px 4px 0; } /* ── Data sheet cards ────────────────────────────────────────────────────── */ .sheets { display:grid; grid-template-columns: repeat(auto-fit, minmax(300px,1fr)); gap: 16px; } .sheet { background: var(--card); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; } .sheet .art { line-height: 0; background: var(--page); } .sheet .art img, .sheet .art svg { width: 100%; height: auto; display: block; } .sheet .hd { padding: 14px 16px 4px; } .sheet .hd .nm { font: 700 var(--section) var(--display); } .sheet .hd .who { font: 500 var(--tiny) var(--mono); color: var(--dim); margin-top: 3px; } .sheet .rows { padding: 8px 16px 14px; } .sheet .row { display:flex; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); font-size: var(--small); } .sheet .row:last-child { border-bottom: 0; } .sheet .row .k { color: var(--dim); } .sheet .row .v { font-family: var(--mono); font-weight: 600; text-align: right; } .sheet .note { padding: 0 16px 16px; font-size: var(--tiny); color: var(--dim); line-height: 1.5; } .sheet .badge { display:inline-block; margin: 0 16px 12px; } .art-note { font-size: var(--tiny); color: var(--faint); padding: 0 16px 10px; font-style: italic; } /* Materials gathered — listed, deliberately not openable. */ .mats { padding: 0 16px 16px; } .mats .t { font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform: uppercase; color: var(--dim); margin-bottom: 7px; } .mat { display:inline-block; margin: 0 6px 6px 0; padding: 6px 11px; border-radius: 7px; background: #EDF0EC; color: #7A857D; border: 1px solid #DCE2DB; font: 600 var(--tiny) var(--sans); cursor: not-allowed; } .mat.absent { background: transparent; color: #B2BBB4; border-style: dashed; text-decoration: line-through; } /* ── Focus areas ─────────────────────────────────────────────────────────── */ .focus { background: var(--card); border: 1px solid var(--line); border-left: 10px solid var(--wrong); border-radius: 0 12px 12px 0; padding: 17px 20px; margin-bottom: 16px; } .focus .hd { display:flex; align-items: baseline; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; } .focus .dim { font: 700 var(--section) var(--display); } .focus .gap { font: 700 var(--small) var(--mono); color: var(--wrong-ink); } .focus .meta { font-size: var(--tiny); color: var(--dim); margin-bottom: 11px; } .focus .said { border-left: 4px solid var(--line); padding: 3px 0 3px 14px; margin: 0 0 10px; font-size: var(--small); } .focus .said .who { display:block; font: 700 var(--tiny) var(--sans); color: var(--dim); margin-bottom: 2px; } .focus.nocomment { border-left-color: var(--idle); } .focus.nocomment .gap { color: var(--idle-ink); } /* ── The peek: a real report, cut off with a torn edge ──────────────────── Pat, 2026-09-13: "it should show that sort of cutoff line... like we've ripped the bottom of the sheet off." The document is real and rendered; the sheet is simply torn, and what is underneath says how to get the rest. */ .peek { position: relative; margin: 0 0 14px; } .peek .paper { background: #fff; border: 1px solid var(--line); border-bottom: 0; border-radius: 10px 10px 0 0; padding: 30px 34px 0; overflow: hidden; position: relative; font-family: var(--sans); } .peek .paper.short { max-height: 900px; } .peek .paper.tall { max-height: 1850px; } /* A report wider than the page scrolls sideways inside it. The Action Plan is twelve columns and was simply cut off at the edge, taking "Recommended Action" with it. */ .peek .paper table.rpt.plan { display: block; overflow-x: auto; white-space: normal; } .peek .fade { position: absolute; left: 0; right: 0; bottom: 0; height: 130px; pointer-events: none; background: linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.92) 72%, #fff 100%); } .peek .tear { display: block; width: 100%; height: 26px; margin-top: -1px; } .peek .tear path { fill: #fff; stroke: var(--line); stroke-width: 1; } .peek-note { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; background: var(--rollup-soft); border: 2px solid var(--rollup); border-radius: 10px; padding: 13px 17px; margin-top: 10px; font-size: var(--small); } .peek-note b { font: 800 var(--tiny) var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--rollup-ink); } /* Report furniture, following the Greenhouse report format. */ .rpt-head { border-bottom: 2px solid var(--gh-green); padding-bottom: 7px; margin-bottom: 18px; text-align: right; font: 600 var(--small) var(--sans); color: var(--dim); } .rpt-h1 { font: 700 24px/1.25 var(--display); color: #4C8C3A; margin: 0 0 14px; } .rpt-h2 { font: 700 var(--section) var(--display); color: #4C8C3A; margin: 22px 0 10px; } .rpt-p { font-size: 15.5px; line-height: 1.62; margin: 0 0 13px; color: #333; } .rpt-note { font-size: var(--small); line-height: 1.55; color: var(--dim); font-style: italic; margin: 0 0 13px; } table.rpt { width: 100%; border-collapse: collapse; margin: 0 0 16px; } table.rpt th { background: #4C8C3A; color: #fff; text-align: left; padding: 8px 11px; font: 700 var(--tiny) var(--sans); } table.rpt th.num, table.rpt td.num { text-align: center; } table.rpt td { border: 1px solid #D8DED6; padding: 9px 11px; font-size: var(--small); color: #333; } table.rpt td.score { font-weight: 800; text-align: center; } table.rpt .bar { display:block; height: 13px; background: #E7EAE4; border-radius: 2px; overflow: hidden; } table.rpt .bar i { display:block; height: 100%; background: #6AAE4F; } table.rpt .up { color: #2E7D32; font-weight: 800; text-align: center; } table.rpt .down { color: #B3261E; font-weight: 800; text-align: center; } .rpt-foot { border-top: 2px solid var(--gh-green); margin-top: 22px; padding-top: 8px; display: flex; justify-content: space-between; font-size: var(--tiny); color: var(--dim); } /* Instrument library */ .inst { display:grid; grid-template-columns: repeat(auto-fit, minmax(250px,1fr)); gap: 14px; } .icard { background: var(--card); border: 1px solid var(--line); border-radius: 11px; border-left: 10px solid var(--shop); padding: 15px 17px; } .icard.system { border-left-color: var(--idle); } .icard.unscored { border-left-color: var(--active); } .icard .q { font: 700 30px/1 var(--mono); } .icard .t { font: 700 var(--small) var(--sans); margin: 6px 0 2px; } .icard .w { font: 500 var(--tiny) var(--mono); color: var(--dim); } .icard .secs { margin-top: 9px; font-size: var(--tiny); color: var(--dim); line-height: 1.5; } .icard .secs span { display:inline-block; background: var(--page); border: 1px solid var(--line); border-radius: 5px; padding: 2px 7px; margin: 0 4px 4px 0; } /* Comments */ .cmt { border-left: 10px solid var(--line); padding: 9px 0 9px 15px; margin: 0 0 13px; } .cmt .hd { font: 700 var(--tiny) var(--sans); color: var(--dim); margin-bottom: 3px; } .cmt .bd { font-size: var(--small); line-height: 1.55; } .cmt.neg { border-left-color: var(--wrong); } .cmt.pos { border-left-color: var(--done); } .cmt.mix { border-left-color: var(--active); } .cmt-cols { columns: 1; } .cmt-cols .cmt { break-inside: avoid; } @media (max-width: 820px) { .cmt-cols { columns: 1; } } /* Rows that lead somewhere say so, and take the click across their whole width. */ tr[data-href] { cursor: pointer; } tr[data-href]:hover td { background: var(--rollup-soft); } tr[data-href]:focus-within td { background: var(--rollup-soft); } .rc tr[data-href]:hover td { background: #fff; box-shadow: inset 0 0 0 2px var(--rollup); } /* ── Evidence: the recording, the transcript, the material on file ───────── */ .rec { background: var(--card); border: 1px solid var(--line); border-left: 10px solid var(--shop); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 16px; } .rec .hd { display:flex; gap: 14px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; } .rec .hd .t { font: 700 var(--section) var(--display); } .rec .hd .m { font: 500 var(--tiny) var(--mono); color: var(--dim); } .player { display:flex; align-items:center; gap: 14px; background: var(--page); border: 1px solid var(--line); border-radius: 10px; padding: 12px 15px; } .player .play { width: 38px; height: 38px; border-radius: 50%; background: var(--shop); flex: none; display:grid; place-items:center; color:#fff; font-size: 15px; } .player .wave { flex: 1; display:flex; align-items:center; gap: 2px; height: 34px; overflow:hidden; } .player .wave i { display:block; width: 3px; background: var(--shop); opacity:.55; border-radius: 2px; } .player .dur { font: 600 var(--small) var(--mono); color: var(--dim); } .transcript { background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 4px 20px 16px; margin-top: 12px; } .turn { display:grid; grid-template-columns: 52px 92px 1fr; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--small); align-items: baseline; } .turn:last-child { border-bottom: 0; } .turn .t { font: 600 var(--tiny) var(--mono); color: var(--faint); } .turn .who { font: 800 var(--tiny) var(--sans); } .turn.shopper .who { color: var(--shop-ink); } .turn.residence .who { color: var(--surveys-ink); } .files { display:grid; grid-template-columns: repeat(auto-fill, minmax(190px,1fr)); gap: 11px; } .file { display:flex; align-items:center; gap: 11px; background: #EDF0EC; border: 1px solid #DCE2DB; border-radius: 9px; padding: 11px 13px; cursor: not-allowed; } .file .ic { width: 34px; height: 42px; border-radius: 4px; flex: none; display:grid; place-items:center; font: 800 10.5px var(--sans); color:#fff; letter-spacing:.03em; } .file .ic.pdf { background: #9A5B5B; } .file .ic.jpeg { background: #5B7A9A; } .file .nm { font: 600 var(--tiny) var(--sans); color:#6E7A71; line-height:1.35; } .file .sz { font: 500 11.5px var(--mono); color:#93A099; margin-top: 2px; } /* Worksheet extract inside a report peek */ table.rpt td.q { width: 46%; } table.rpt td.ans { color: #444; } table.rpt tr.sec td { background: #EDF2EA; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; font-size: var(--tiny); color: #3C6B2E; } table.rpt td.sc { text-align: center; font-weight: 800; font-family: var(--mono); } table.rpt td.sc.low { color: #B3261E; } table.rpt td.sc.high { color: #2E7D32; } table.rpt td.bm { text-align: center; font-family: var(--mono); color: #666; } table.rpt .flag { display:block; font-size: var(--tiny); color: #B3261E; font-style: italic; margin-top: 3px; } /* ── The instrument: dimension sections with their questions ─────────────── */ .viewbar { display:flex; gap:8px; flex-wrap:wrap; align-items:center; margin: 0 0 18px; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 12px 15px; } .viewbar .lab { font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform:uppercase; color: var(--dim); margin-right: 4px; } .viewbar a { padding: 8px 14px; border-radius: 8px; text-decoration:none; border: 2px solid var(--line); background:#fff; color: var(--dim); font: 700 var(--small) var(--sans); } .viewbar a.on { background: var(--surveys); border-color: var(--surveys-ink); color:#fff; } .viewbar .sep { width:1px; align-self:stretch; background: var(--line); margin: 0 6px; } .sect { background: var(--card); border: 1px solid var(--line); border-radius: 12px; margin-bottom: 16px; overflow: hidden; } .sect > .hd { display:flex; align-items:baseline; gap:16px; flex-wrap:wrap; padding: 15px 20px; border-bottom: 2px solid var(--line); background: var(--page); } .sect > .hd .nm { font: 700 var(--section) var(--display); } .sect > .hd .sc { margin-left:auto; display:flex; gap:22px; align-items:baseline; } .sect > .hd .sc b { font: 700 22px var(--mono); } .sect > .hd .sc span { font: 600 var(--tiny) var(--sans); color: var(--dim); display:block; } .sect .qs { padding: 6px 20px 16px; } .qrow { padding: 13px 0; border-bottom: 1px solid var(--line); } .qrow:last-child { border-bottom: 0; } .qrow .qt { font-size: var(--small); margin-bottom: 7px; } .qrow .qm { display:flex; gap:18px; align-items:center; flex-wrap:wrap; font-size: var(--tiny); color: var(--dim); } .qrow .qm b { font: 700 var(--body) var(--mono); color: var(--ink); } /* Distribution: thick bands, and every band's label and number written out. */ .dist { display:flex; height: 26px; border-radius: 5px; overflow:hidden; border:1px solid var(--line); } .dist i { display:flex; align-items:center; justify-content:center; color:#fff; font: 700 10.5px var(--sans); font-style:normal; overflow:hidden; } .dist .d5 { background:#2E7D46; } .dist .d4 { background:#7CB342; } .dist .d3 { background:#C9A227; } .dist .d2 { background:#E08A3C; } .dist .d1 { background:#C0492E; } .distkey { display:flex; flex-wrap:wrap; gap:5px 16px; margin-top: 8px; font-size: var(--tiny); } .distkey span { display:inline-flex; align-items:center; gap:7px; color: var(--ink); } .distkey i { width: 16px; height: 12px; border-radius: 3px; display:inline-block; flex:none; } .distkey b { font-family: var(--mono); } .distkey .n { color: var(--dim); } .favbar { height: 22px; background: var(--page); border:1px solid var(--line); border-radius: 5px; overflow:hidden; min-width: 160px; flex: 1 1 200px; } .favbar i { display:block; height:100%; background: var(--surveys); } /* ── Nav at nine tabs: grouped, wrapping, nothing hidden ─────────────────── */ nav.modules { flex-wrap: wrap; row-gap: 0; align-items: flex-end; } nav.modules a { padding: 10px 12px 8px; font-size: 13.8px; } nav.modules .grp { display:flex; align-items:flex-end; gap:2px; } nav.modules .grp::before { content: attr(data-g); position: absolute; top: 0; left: 13px; font: 800 9.5px var(--sans); letter-spacing:.1em; text-transform:uppercase; color: var(--faint); } nav.modules .grp { position: relative; margin-right: 14px; } /* ── Response-rate chain ─────────────────────────────────────────────────── */ .chain { display:flex; align-items:stretch; gap:0; flex-wrap:wrap; margin: 0 0 6px; } .chain .step { background: var(--card); border:1px solid var(--line); padding: 13px 18px; flex:1 1 150px; } .chain .step:first-child { border-radius: 10px 0 0 10px; } .chain .step:last-child { border-radius: 0 10px 10px 0; } .chain .step + .step { border-left: 0; } .chain .k { font: 700 26px/1.1 var(--mono); } .chain .l { font: 700 var(--tiny) var(--sans); text-transform:uppercase; letter-spacing:.08em; color: var(--dim); margin-top: 4px; } .chain .n { font-size: var(--tiny); color: var(--dim); margin-top: 5px; } .chain .step.rate { background: var(--surveys-soft); border-color: var(--surveys); } /* ── Long comments, letters and loose pages ─────────────────────────────── */ .cmt .bd { white-space: pre-wrap; } .cmt.letter, .cmt.loose { border-left-width: 10px; background: #FCFBF6; border: 1px solid var(--line); border-left: 10px solid var(--active); border-radius: 0 10px 10px 0; padding: 15px 18px; } .cmt .kindtag { display:inline-block; background: var(--active); color:#fff; border-radius:6px; padding: 3px 9px; font: 800 var(--tiny) var(--sans); margin-bottom: 7px; } .cmt .attach { display:inline-flex; align-items:center; gap:9px; margin-top: 11px; background:#EDF0EC; border:1px solid #DCE2DB; border-radius:8px; padding:8px 12px; cursor: not-allowed; font: 600 var(--tiny) var(--sans); color:#6E7A71; } .cmt .attach .ic { width:26px;height:32px;border-radius:3px;background:#5B7A9A;color:#fff; display:grid;place-items:center;font:800 9px var(--sans); } .cmt .langnote { font: 700 var(--tiny) var(--sans); color: var(--surveys-ink); margin-bottom: 5px; } /* ── Unresolved issues ───────────────────────────────────────────────────── */ .issue { background: var(--card); border:1px solid var(--line); border-left: 10px solid var(--waiting); border-radius: 0 12px 12px 0; padding: 16px 20px; margin-bottom: 14px; } .issue.resolved { border-left-color: var(--done); } .issue.sent { border-left-color: var(--active); } .issue .hd { display:flex; gap:14px; align-items:baseline; flex-wrap:wrap; margin-bottom: 8px; } .issue .who { font: 700 var(--body) var(--display); } .issue .meta { font: 500 var(--tiny) var(--mono); color: var(--dim); } .issue .bd { font-size: var(--small); line-height:1.6; white-space: pre-wrap; } .issue .fu { display:inline-flex; align-items:center; gap:7px; font: 700 var(--tiny) var(--sans); background: var(--page); border:1px solid var(--line); border-radius:7px; padding:5px 11px; } /* ── Coming soon ─────────────────────────────────────────────────────────── */ .soon { background: var(--reviews-soft); border-left: 10px solid var(--reviews); border-radius: 0 10px 10px 0; padding: 16px 19px; margin: 22px 0 0; } .soon b { display:block; font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform:uppercase; color: var(--reviews-ink); margin-bottom: 5px; } /* ── Language toggle in the masthead ─────────────────────────────────────── */ .langtoggle { display:flex; gap:0; margin-left: 16px; } .langtoggle a { padding: 5px 12px; font: 800 var(--tiny) var(--sans); text-decoration:none; border: 2px solid var(--line); color: var(--dim); background:#fff; } .langtoggle a:first-child { border-radius: 7px 0 0 7px; } .langtoggle a:last-child { border-radius: 0 7px 7px 0; border-left: 0; } .langtoggle a.on { background: var(--gh-purple); border-color: var(--gh-purple); color:#fff; } /* Report card cells are links — the whole tile, and it says so on hover. */ a.celllink { display:block; text-decoration:none; color:inherit; border-radius:8px; } a.celllink:hover .tile { background: var(--rollup-soft); } a.celllink:hover .val { text-decoration: underline; text-underline-offset: 3px; } a.celllink:focus-visible { outline: 3px solid var(--rollup); outline-offset: 2px; } /* Nav groups: the label sits ABOVE its own row of tabs, not on top of them. */ nav.modules { padding-top: 14px; } /* The group label lives in the .grp's own top padding, above its tabs — never under them. */ nav.modules .grp { padding-top: 15px; } /* Comments and focus areas sit INSIDE their dimension section, as the report prints them. */ .sect .secblock { border-top: 2px solid var(--line); padding: 16px 20px; background: #FCFCFB; } .sect .secblock > h4 { font: 800 var(--tiny) var(--sans); letter-spacing:.08em; text-transform:uppercase; color: var(--dim); margin: 0 0 12px; } .sect .secblock.focus-wrap { background: #FDF7F5; } .fa { border-left: 10px solid var(--wrong); background:#fff; border:1px solid var(--line); border-radius: 0 10px 10px 0; padding: 14px 17px; margin-bottom: 12px; } .fa .id { font: 800 var(--tiny) var(--mono); color: var(--wrong-ink); letter-spacing:.06em; } .fa .tt { font: 700 var(--body) var(--display); margin: 3px 0 8px; } .fa .why { font-size: var(--small); line-height:1.6; margin: 0 0 11px; } .fa .said { font: 800 var(--tiny) var(--sans); letter-spacing:.06em; text-transform:uppercase; color: var(--dim); margin-bottom: 6px; } .fa ul { margin: 0; padding-left: 19px; } .fa li { font-size: var(--small); line-height:1.55; margin: 5px 0; } .fa li .rid { color: var(--faint); font-family: var(--mono); font-size: var(--tiny); } .seccmt { border-left: 6px solid var(--line); padding: 7px 0 7px 14px; margin: 0 0 11px; } .seccmt.neg { border-left-color: var(--wrong); } .seccmt.pos { border-left-color: var(--done); } .seccmt.mix { border-left-color: var(--active); } .seccmt .m { font: 700 var(--tiny) var(--sans); color: var(--dim); margin-bottom: 3px; } .seccmt .b { font-size: var(--small); line-height:1.6; white-space: pre-wrap; } /* ── Mystery shop element report, as the client receives it ──────────────── */ .wsHead { border-bottom: 3px solid var(--gh-green); padding-bottom: 14px; margin-bottom: 20px; } .wsHead .t { font: 700 25px/1.2 var(--display); color: #4C8C3A; } .wsHead .r { font: 700 var(--section) var(--display); margin-top: 3px; } .wsHead dl { display:grid; grid-template-columns: 92px 1fr; gap: 3px 14px; margin: 12px 0 0; font-size: var(--small); } .wsHead dt { font-weight: 800; color: var(--dim); } .wsHead dd { margin: 0; } .wsSec { margin: 22px 0 0; } .wsSec > h3 { font: 800 var(--small) var(--sans); letter-spacing: .06em; text-transform: uppercase; background: #4C8C3A; color: #fff; padding: 8px 13px; border-radius: 5px; margin: 0 0 2px; } .wsQ { border-bottom: 1px solid var(--line); padding: 12px 2px 12px 0; } .wsQ:last-child { border-bottom: 0; } .wsQ .q { font-size: var(--small); font-weight: 600; } .wsQ .q .num { color: var(--dim); font-family: var(--mono); margin-right: 7px; } .wsQ .row { display:flex; align-items:center; gap: 14px; flex-wrap: wrap; margin-top: 7px; } .wsQ .sc { font: 800 var(--body) var(--mono); padding: 3px 11px; border-radius: 6px; background: #E7F1E2; color: #2E7D32; } .wsQ .sc.zero { background: #FBE7E4; color: #B3261E; } .wsQ .sc.part { background: #FDF2E0; color: #9A6212; } .wsQ .sc.na { background: #EDF0EC; color: #7A857D; font-weight: 700; font-size: var(--small); } .wsQ .ans { font-size: var(--small); font-weight: 700; } .wsQ .cm { font-size: var(--small); color: #3C463F; margin-top: 7px; line-height: 1.55; } .wsQ .cm b { color: var(--dim); font-size: var(--tiny); letter-spacing:.05em; text-transform:uppercase; } .wsTotal { display:flex; gap:22px; align-items:baseline; background: var(--page); border: 1px solid var(--line); border-radius: 10px; padding: 14px 18px; margin: 18px 0 0; } .wsTotal .k { font: 700 28px var(--mono); } .wsTotal .l { font: 700 var(--tiny) var(--sans); text-transform:uppercase; letter-spacing:.08em; color: var(--dim); } /* Pack manifest */ .manifest { background: #FBFBF8; border: 1px solid var(--line); border-radius: 11px; padding: 18px 22px; } .manifest .row { display:grid; grid-template-columns: 260px 1fr; gap: 6px 18px; padding: 9px 0; border-bottom: 1px solid var(--line); font-size: var(--small); } .manifest .row:last-of-type { border-bottom: 0; } .manifest .nm { font: 700 var(--small) var(--mono); } .manifest .ct { font: 500 var(--tiny) var(--mono); color: var(--dim); } .manifest .calls { margin: 14px 0 0; font-family: var(--mono); font-size: var(--small); } .manifest .calls div { padding: 4px 0; } .manifest .calls .start { font-weight: 800; color: var(--shop-ink); } .manifest .prov { font-size: var(--tiny); color: var(--dim); margin-top: 14px; line-height:1.5; } .manifest .conf { font: 700 var(--tiny) var(--sans); color: var(--dim); margin-top: 12px; border-top: 1px solid var(--line); padding-top: 10px; } /* ── Report extracts: the document itself, section by section ────────────── */ .rpt-cover { text-align:center; padding: 8px 0 26px; border-bottom: 3px solid var(--gh-green); margin-bottom: 22px; } .rpt-cover .kicker { font: 800 var(--tiny) var(--sans); letter-spacing:.16em; text-transform:uppercase; color: #4C8C3A; } .rpt-cover .yr { font: 700 42px/1 var(--display); color: #4C8C3A; margin: 6px 0 14px; } .rpt-cover .op { font: 700 22px var(--display); } .rpt-cover .ti { font: 700 var(--section) var(--display); color: #4C8C3A; margin-top: 4px; } .rpt-cover .sub { font-size: var(--small); color: #444; margin-top: 6px; } .rpt-toc { columns: 2; column-gap: 30px; font-size: var(--small); margin: 0 0 18px; } .rpt-toc div { break-inside: avoid; padding: 3px 0; border-bottom: 1px dotted var(--line); } .rpt-toc span { float: right; color: var(--dim); font-family: var(--mono); font-size: var(--tiny); } .rpt-dim { margin-top: 26px; padding-top: 18px; border-top: 3px solid #4C8C3A; } .rpt-dim > .t { font: 700 24px var(--display); color: #4C8C3A; margin: 0 0 4px; } .rpt-sub { font: 800 var(--tiny) var(--sans); letter-spacing:.07em; text-transform:uppercase; color: var(--dim); margin: 18px 0 8px; } .rpt-cmt { border-left: 5px solid var(--line); padding: 5px 0 5px 13px; margin: 0 0 10px; font-size: 14.5px; line-height:1.6; color:#333; white-space: pre-wrap; } .rpt-cmt .rid { color: var(--faint); font-family: var(--mono); font-size: var(--tiny); } .rpt-fa { background:#FBF6F4; border-left: 6px solid #B3261E; border-radius: 0 8px 8px 0; padding: 13px 16px; margin: 0 0 12px; } .rpt-fa .h { font: 700 15.5px var(--display); color: #5C2D88; margin-bottom: 6px; } .rpt-fa .w { font-size: 14.5px; line-height:1.6; margin: 0 0 9px; } .rpt-fa ul { margin:0; padding-left: 19px; } .rpt-fa li { font-size: 14.5px; line-height:1.55; margin: 4px 0; } table.rpt td.item { width: 44%; } /* ── Action planning: the four tools ─────────────────────────────────────── */ .tool { background: var(--card); border: 1px solid var(--line); border-left: 10px solid var(--rollup); border-radius: 0 12px 12px 0; padding: 18px 22px; margin-bottom: 16px; } .tool .n { font: 800 var(--tiny) var(--mono); color: var(--rollup-ink); letter-spacing:.08em; } .tool .t { font: 700 var(--section) var(--display); margin: 3px 0 8px; } .tool .d { font-size: var(--small); line-height:1.6; color: #3C463F; margin: 0 0 12px; } table.smart { width:100%; border-collapse: collapse; background:#fff; border:1px solid var(--line); border-radius: 10px; overflow:hidden; } table.smart th { background: var(--rollup-soft); color: var(--rollup-ink); text-align:left; font: 800 var(--tiny) var(--sans); letter-spacing:.05em; padding: 10px 12px; border-bottom: 2px solid var(--line); } table.smart td { border: 1px solid var(--line); padding: 11px 12px; font-size: var(--small); vertical-align: top; } table.smart td.blank { background: repeating-linear-gradient(0deg,#fff,#fff 22px,#F3F5F2 22px,#F3F5F2 23px); min-height: 70px; color: var(--faint); font-style: italic; } /* ── The index calculation table ────────────────────────────────────────────── The arithmetic has to be followable by eye, so the contribution column is set apart and the row that could not be computed is struck out in words, not only in tone. */ table.calc td.cmp a { font-weight: 700; } table.calc td.meas, table.calc .meas { font-size: var(--tiny); color: var(--dim); font-weight: 400; } table.calc td.conv { font-size: var(--tiny); color: var(--dim); max-width: 260px; } table.calc td.contrib { font-family: var(--mono); font-weight: 700; background: #F4F7F2; } table.calc td.contrib.total { font-size: var(--section); background: #EAF2E6; } table.calc tr.out td { color: var(--dim); } table.calc tr.out td.cmp::after { content: " — not counted"; font-size: var(--tiny); color: var(--dim); } table.calc tfoot td { border-top: 3px solid var(--ink); font-weight: 700; } table.calc tfoot tr:last-child td { border-top: 1px solid var(--line); } /* Cross-links from a data sheet into the modules that measure the same community. */ .crosslinks { display:grid; grid-template-columns:repeat(auto-fit,minmax(230px,1fr)); gap:12px; } .crosslinks a { display:block; padding:14px 16px; border:1px solid var(--line); border-left:10px solid var(--m-rollup); border-radius:10px; background:var(--card); text-decoration:none; color:var(--ink); } .crosslinks a:hover { background:#F4F7F2; } .crosslinks b { display:block; font-size:var(--body); } .crosslinks span { display:block; font-size:var(--tiny); color:var(--dim); margin-top:3px; } /* The element instruments, opened from the mystery shop roll-up. */ .elgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); gap:12px; } .elcard { display:block; padding:14px 16px; border:1px solid var(--line); border-left:10px solid var(--shop); border-radius:10px; background:var(--card); text-decoration:none; color:var(--ink); } .elcard:hover { background:#F4F7F2; } .elcard b { display:block; font-size:var(--body); } .elcard .q { display:block; font-family:var(--mono); font-size:var(--tiny); color:var(--dim); margin-top:4px; } .elcard .st { display:block; font-size:var(--tiny); color:var(--dim); margin-top:2px; } a.el { text-decoration:none; color:inherit; display:block; } a.el:hover { background:#F4F7F2; } a.el .open { font-size:var(--tiny); font-weight:700; color:var(--shop-ink); margin-top:8px; } /* Totals and averages under a competitive table: set apart by weight and rule, not by tone. */ table.rpt tr.tot td, table.rpt tr.avg td, table.rpt tr.gap td { font-weight: 700; background:#F4F7F2; } table.rpt tr.tot td { border-top: 3px solid #333333; } table.rpt tr.gap td { background:#EAF2E6; border-top: 1px solid #C9D6C2; } /* A number and the word for what it is, stacked, so a row reads on its own. */ .qm .v { display:inline-flex; flex-direction:column; align-items:flex-start; gap:1px; } .qm .v .tag { font: 700 10.5px var(--sans); letter-spacing:.07em; text-transform:uppercase; color: var(--dim); white-space:nowrap; } /* The operator's mark in a report's running head. */ .rpt-head { display: flex; align-items: center; justify-content: flex-end; gap: 9px; } .rpt-head img { height: 22px; width: auto; max-width: min(150px, 38vw); object-fit: contain; object-position: right center; display: block; } /* A very narrow window: the operator lockup drops to its own line rather than being crushed into the Greenhouse one or running off the right edge. */ @media (max-width: 640px) { .operator { margin-left: 0; width: 100%; align-items: flex-start; padding-top: 6px; } .operator .opmark { height: 34px; max-width: 70vw; object-position: left center; } .lockup .rule { display: none; } } /* ── Links inside data tables read the same way everywhere ─────────────────── A community name was underlined on some screens and not on others, because only the report card had a rule for it. One rule, all tables: the name is solid and unadorned until you point at it. */ table.data td a { color: var(--ink); font-weight: 700; text-decoration: none; } table.data td a:hover, table.data td a:focus-visible { text-decoration: underline; text-underline-offset: 3px; } /* ── The scanned unresolved-issue sheet ────────────────────────────────────── A photocopy of a form somebody filled in by hand: off-white paper, a little off-square, soft edges, and the printed matter noticeably greyer than the ink written on top of it. The handwriting face comes from the machine, never the network, because the demonstration has to work at a venue with no wifi. */ .scan-wrap { background: #6E766F; padding: 34px; border-radius: 12px; overflow: hidden; } .scan { position: relative; max-width: 760px; margin: 0 auto; background: #FCFBF7; padding: 30px 42px 34px; color: #2B2B2B; font: 400 14.5px/1.5 'Times New Roman', Times, serif; box-shadow: 0 3px 16px rgba(0,0,0,.45), 0 0 0 1px rgba(0,0,0,.12); filter: grayscale(.25) contrast(1.04); } .scan .perf { border-bottom: 2px dashed #9A9A9A; padding-bottom: 8px; margin-bottom: 16px; text-align: right; } .scan .perf span { font: 700 12px/1.1 'Public Sans', sans-serif; color: #7A7A7A; letter-spacing: .06em; text-transform: uppercase; } .scan .formhead { font: 400 30px/1 Arial, Helvetica, sans-serif; color: #3A3A3A; margin: 0 0 14px; } .scan .ftext { margin: 0 0 9px; color: #4A4A4A; font-size: 13.5px; } .scan .ftext.em { font-style: italic; } .scan ul.fl { margin: 0 0 11px; padding-left: 20px; } .scan ul.fl li { margin: 3px 0; } .scan .fields { margin: 18px 0 6px; } .scan .row { display: flex; align-items: flex-end; gap: 10px; margin-bottom: 15px; } .scan .lb { font: 700 13.5px 'Times New Roman', serif; color: #4A4A4A; white-space: nowrap; } .scan .rule { flex: 1; border-bottom: 1px solid #8D8D8D; min-height: 25px; padding: 0 4px 1px; } .scan .follow { display: flex; gap: 16px; align-items: flex-start; margin: 16px 0 6px; } .scan .opts { display: grid; grid-template-columns: 1fr 1fr; gap: 7px 22px; flex: 1; } .scan .opt { display: flex; align-items: center; gap: 8px; font-size: 13.5px; color: #4A4A4A; } .scan .box { width: 15px; height: 15px; border: 1px solid #7E7E7E; display: inline-flex; align-items: center; justify-content: center; flex: none; } .scan .tick { font: 700 17px Arial, Helvetica, sans-serif; color: #16305C; line-height: 1; margin-top: -3px; } .scan .commentblock { margin-top: 16px; } .scan .cline { border-bottom: 1px solid #9C9C9C; min-height: 27px; padding: 0 4px 1px; } /* What the resident actually wrote. Darker than the print, and never quite level. */ .scan .hw { display: inline-block; color: #16305C; font: 400 22px/1.15 Arial, Helvetica, sans-serif; } .scan .hw.small { font-size: 19px; } .scan .officeuse { display: flex; justify-content: space-between; align-items: center; margin-top: 20px; padding-top: 10px; border-top: 1px solid #C8C8C8; font: 400 11.5px 'Public Sans', sans-serif; color: #8A8A8A; } .scan .stamp { display: inline-block; border: 2px solid #8A9A8A; color: #5F6F5F; padding: 4px 10px; font: 800 10.5px/1.3 'IBM Plex Mono', monospace; text-align: center; letter-spacing: .08em; opacity: .75; } /* An issue card that opens its scan. */ a.issuelink { display: block; text-decoration: none; color: inherit; } a.issuelink:hover .issue { background: #F4F7F2; } .issue .openscan { font: 700 var(--tiny) var(--sans); color: var(--surveys-ink); margin-top: 9px; } /* ── Price position: a description, not a state ────────────────────────────── Neutral ink for all three, with the rank carried by a three-cell marker so it reads by shape in greyscale and for a colour blind reader. The old chip used red for the highest price and green for the lowest — the one pair Pat cannot separate, carrying the meaning on hue alone, and flagging the premium product in the portfolio as though it were a fault. */ .chip.pos { display: inline-flex; align-items: center; gap: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); } .chip.pos .rank { display: inline-flex; gap: 2px; } .chip.pos .rank i { width: 7px; height: 13px; border: 1.5px solid var(--ink); border-radius: 2px; background: transparent; display: block; } .chip.pos .rank i.on { background: var(--ink); } /* ── Occupancy: a magnitude, not a state ───────────────────────────────────── Same reasoning as the price position. Green/amber/red put the meaning on the one colour pair Pat cannot separate, and a percentage is not a pass or a fail. The filled track shows how full the building is; what is left of the track is the vacancy, which is what an operator is actually looking at. */ .chip.occ { display: inline-flex; align-items: center; gap: 8px; background: var(--card); color: var(--ink); border: 2px solid var(--ink); } .chip.occ .gauge { display: inline-block; width: 42px; height: 13px; border: 1.5px solid var(--ink); border-radius: 2px; overflow: hidden; flex: none; } .chip.occ .gauge i { display: block; height: 100%; background: var(--ink); } /* Row markers in a market table — "This portfolio", "This sheet". They say WHICH ROW you are looking at, not whether anything is good or bad, so they carry no state colour. The solid one is ours; the outlined one is the sheet you opened. Distinguishable filled from hollow, with the word on each regardless. */ .chip.mark { background: var(--ink); color: var(--card); border: 2px solid var(--ink); } .chip.mark.open { background: var(--card); color: var(--ink); } /* Our own column in a side-by-side market extract. Marked by weight and a rule, not by hue. */ table.rpt th.mine { border-bottom: 3px solid #FFFFFF; } table.rpt td.ans.mine { font-weight: 700; background: #F2F6F0; } /* ── Property cards ────────────────────────────────────────────────────────── The whole card is the link, so the pointer appears anywhere on it and a click lands on the full data sheet. A community in this portfolio carries a thick Greenhouse purple edge and the Halden monogram watermarked into the corner — two signals, neither of them colour on its own. */ a.sheet.tap { display: block; text-decoration: none; color: inherit; cursor: pointer; } a.sheet.tap:hover { box-shadow: 0 3px 14px rgba(0,0,0,.13); transform: translateY(-1px); } a.sheet.tap:focus-visible { outline: 3px solid var(--gh-purple); outline-offset: 2px; } .sheet { position: relative; transition: box-shadow .12s ease, transform .12s ease; } .sheet.subject { border: 5px solid var(--gh-purple); } /* The monogram, sitting over the artwork rather than in the content. */ /* Legible on a bright sky and on dark foliage alike: a light plate behind it does the work that opacity alone could not. */ .sheet .wm { position: absolute; top: 10px; right: 10px; width: 62px; height: auto; opacity: .92; padding: 7px 9px; border-radius: 9px; background: rgba(255,255,255,.78); backdrop-filter: blur(2px); box-shadow: 0 1px 4px rgba(0,0,0,.22); pointer-events: none; } /* The affordance, so it is clear the card opens something. */ .sheet .open { padding: 0 16px 14px; font: 700 var(--tiny) var(--sans); color: var(--gh-purple); } a.sheet.tap:hover .open { text-decoration: underline; text-underline-offset: 3px; } /* ── THE ROLL-UP REPORT ──────────────────────────────────────────────────────── Four datasets, seven columns, and a benchmark comparison that has to survive being read by someone who cannot rely on the colour. Pat, 2026-08-24: "i am colour blind - slivers of colour dont work for me it must be thicker bolder". So the gap cell states the gap in words and numbers first, and the bar below it is 14px with a 4px benchmark rule running the full height of it — a position, not a hue. */ table.rpt.rollup th span { display:block; font-weight:500; font-size: 88%; opacity:.92; } table.rpt.rollup td.bm { font-family: var(--mono); text-align:center; color:#444; } table.rpt.rollup td.gapcell { width: 190px; text-align:left; padding: 7px 11px; } table.rpt.rollup td.gapcell b { display:block; font: 800 var(--tiny) var(--sans); margin-bottom:5px; } table.rpt.rollup td.gapcell b.up { color:#1F6B2A; } table.rpt.rollup td.gapcell b.dn { color:#A11B15; } table.rpt.rollup .gbar { position:relative; display:block; height:14px; background:#E4E9E1; border:1px solid #C7D0C3; border-radius:2px; overflow:hidden; } table.rpt.rollup .gbar i { display:block; height:100%; background:#4C8C3A; } table.rpt.rollup .gbar u { position:absolute; top:0; bottom:0; width:4px; margin-left:-2px; background:#1B1B1B; } table.rpt.rollup tr.avg td { background:#F1F5EF; font-weight:700; } /* The action plan's three bands. The band heading spells its priority out in the workbook's own words, each row repeats it in its first column, and the 8px left block is the third signal rather than the only one. */ table.rpt.plan tr.pband td { padding: 10px 11px; font-size: var(--small); color:#222; } table.rpt.plan tr.pband.high td { background:#F8DEDC; border-left: 8px solid #A11B15; } table.rpt.plan tr.pband.med td { background:#FBF2D8; border-left: 8px solid #A5760B; } table.rpt.plan tr.pband.ok td { background:#E6F1E3; border-left: 8px solid #1F6B2A; } table.rpt.plan td.pcell { font: 800 var(--tiny) var(--sans); text-transform:uppercase; letter-spacing:.05em; white-space:nowrap; } table.rpt.plan tr.pr.high td.pcell { color:#A11B15; } table.rpt.plan tr.pr.med td.pcell { color:#A5760B; } table.rpt.plan tr.pr.ok td.pcell { color:#1F6B2A; } table.rpt.plan tr.pr.high td:first-child { border-left: 8px solid #A11B15; } table.rpt.plan tr.pr.med td:first-child { border-left: 8px solid #A5760B; } table.rpt.plan tr.pr.ok td:first-child { border-left: 8px solid #1F6B2A; } /* Twelve columns have to fit, or the last one — Recommended Action, the whole point of the ranking — falls off the right edge where nobody will scroll to find it. Each column is given the width its content needs: "Advocating the Product" and "Weeknight" were being broken mid-word by a blanket overflow-wrap. */ table.rpt.plan { table-layout: fixed; width: 100%; } table.rpt.plan td, table.rpt.plan th { padding: 7px 8px; font-size: var(--tiny); word-break: normal; overflow-wrap: break-word; hyphens: none; } table.rpt.plan th:nth-child(1), table.rpt.plan td:nth-child(1) { width: 10%; } table.rpt.plan th:nth-child(2), table.rpt.plan td:nth-child(2) { width: 7%; } table.rpt.plan th:nth-child(3), table.rpt.plan td:nth-child(3) { width: 20%; } table.rpt.plan th:nth-child(4), table.rpt.plan td:nth-child(4) { width: 13%; } table.rpt.plan th:nth-child(5), table.rpt.plan td:nth-child(5), table.rpt.plan th:nth-child(6), table.rpt.plan td:nth-child(6), table.rpt.plan th:nth-child(7), table.rpt.plan td:nth-child(7) { width: 4.2%; } table.rpt.plan th:nth-child(n+8):nth-child(-n+11), table.rpt.plan td:nth-child(n+8):nth-child(-n+11) { width: 6.4%; } table.rpt.plan th:nth-child(12), table.rpt.plan td:nth-child(12) { width: 12%; } table.rpt.rollup td.gapcell em.thin { display:block; margin-top:5px; font: 600 var(--tiny) var(--sans); font-style: normal; color:#7A3B06; } /* The competitor data sheet's own hierarchy: a section band, a group band inside it, then the fields. The workbook groups 237 of its 251 fields, and a flat list of labels is not that instrument. */ table.rpt tr.grp td { background:#F4F7F2; font-weight:700; font-size: var(--tiny); letter-spacing:.05em; text-transform:uppercase; color:#4C6B3E; padding: 6px 11px 6px 22px; border-left: 5px solid #A8C79A; } table.rpt.sheet4 th span { display:block; font-weight:500; font-size: 88%; opacity:.92; } table.rpt.sheet4 td.opt { font-size: var(--tiny); color:#555; } table.rpt.sheet4 td.src { font-size: var(--tiny); color:#5C2D88; font-weight:600; } /* The instruction the workbook prints over the answers column for that section, verbatim. */ table.rpt tr.sec td em { display:block; margin-top:3px; font: 500 var(--tiny) var(--sans); font-style: italic; letter-spacing:0; text-transform:none; color:#4C6B3E; } /* ── WHAT THE SHOPPER WROTE ──────────────────────────────────────────────────── Fifty-four questions on the real instrument have no answer options: they ask the shopper to write down what was said. The verbatim is the part a General Manager reads first, so it is set as a quotation and given room, not squeezed into the answer slot beside a score chip. */ .wsQ blockquote.wrote { margin: 6px 0 0; padding: 9px 14px; border-left: 6px solid var(--gh-purple); background: #F7F4FA; border-radius: 0 7px 7px 0; font-size: var(--small); line-height: 1.6; color: #2C2434; } /* A question the form did not ask on this call. The condition that closed it is printed underneath, so the gap reads as the instrument working rather than as missing data. */ .wsQ.skipped { opacity: .82; } .wsQ .ans.skip { color: #5C6B62; font-style: italic; font-weight: 600; } .wsQ .ans.skip em { display: block; margin-top: 3px; font-style: normal; font-weight: 500; font-size: var(--tiny); color: var(--faint); } /* The Property Ranking Report's own headings, matching the delivered original: a Part heading, a dimension heading under it, and a question heading under that. */ .rpt-h3 { font: 700 17px var(--display); color: #4C8C3A; margin: 22px 0 8px; } .rpt-h4 { font: 700 15px var(--sans); color: #333; margin: 16px 0 6px; } table.rpt.rank td.num:first-child { font-family: var(--mono); font-weight: 700; } table.rpt.rank td.score { font-family: var(--mono); } .rpt-list { margin: 0 0 14px; padding-left: 22px; font-size: 15.5px; line-height: 1.62; color:#333; } .rpt-list li { margin-bottom: 7px; } /* ── THE EXECUTIVE SUMMARY'S SCORE MATRIX ────────────────────────────────────── The delivered original marks status with a red or green square and nothing else. Pat, 2026-08-24: "i am colour blind - slivers of colour dont work for me it must be thicker bolder". So the status carries its word, filled solid, at the same 65% threshold the original uses. */ table.rpt.matrix td .ex { display:block; font-weight:500; font-size:88%; color:#555; } table.rpt.matrix .mx { display:inline-block; padding:5px 12px; border-radius:7px; font:800 var(--tiny) var(--sans); letter-spacing:.01em; white-space:nowrap; color:#fff; } table.rpt.matrix .mx.ok { background:#1F6B2A; border:2px solid #14491D; } table.rpt.matrix .mx.low { background:#A11B15; border:2px solid #6E120E; } table.rpt.matrix td.score { font-family: var(--mono); white-space:nowrap; } .rpt-h2 .h2sub { font: 500 13.5px var(--sans); font-style: italic; color: var(--dim); margin-left: 8px; } table.rpt.matrix .mx.wait { background:#B45309; border:2px solid #7C3A06; } table.rpt.matrix tr.pend td { opacity:.85; } /* ── THE SC SCORE CARD ───────────────────────────────────────────────────────── The delivered original's two bars differ only by colour. Pat is colour blind, so each bar carries its own number and its own word, so the colour does nothing the reader depends on. Both are solid: Pat, 2026-09-14, "change the stripes for a nicer full colour." */ .sccard { margin: 6px 0 18px; } .sccard .gp { font: 800 var(--tiny) var(--sans); letter-spacing:.09em; text-transform:uppercase; color:#4C6B3E; margin: 18px 0 6px; padding-bottom:4px; border-bottom:2px solid #C7D8BE; } .scb { display:grid; grid-template-columns: 240px 1fr; gap: 14px; align-items:center; padding: 7px 0; border-bottom:1px solid var(--line); } .scb.in { padding-left: 14px; } .scb .lb { font-size: var(--small); color:#333; font-weight:600; } .scb .bz { display:grid; gap:4px; } .scb .bar { position:relative; height:19px; background:#EEF1EC; border-radius:3px; display:flex; align-items:center; } .scb .bar i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; } .scb .bar.sc i { background:#4C8C3A; } .scb .bar.bn i { background:repeating-linear-gradient(135deg,#8899A6 0 5px,#C3CBD2 5px 10px); border:2px solid #4A5A66; box-sizing:border-box; } .scb .bar b { position:relative; margin-left:9px; font:800 var(--tiny) var(--mono); color:#fff; text-shadow:0 0 3px rgba(0,0,0,.55); } .scb .bar.bn b { color:#16211B; text-shadow:0 0 3px rgba(255,255,255,.8); } .scb .bar span { position:relative; margin-left:auto; margin-right:8px; font:700 11.5px var(--sans); color:#5C6B62; } /* The Physical Plant card's paired header. */ table.rpt.pp th[colspan] { text-align:center; } table.rpt.sccmp tr.sub td:first-child { padding-left: 24px; color:#444; } /* ── THE ROLL-UP SHEETS ──────────────────────────────────────────────────────── The master workbook pairs every score row with its benchmark row underneath. The benchmark row is set back and lighter so the pair reads as one thing, and the Gap column — the points not earned — sits where the workbook puts it. */ table.rpt.hdr { width: auto; min-width: 340px; margin-bottom: 18px; } table.rpt.hdr td:first-child { font-weight: 700; background: #F4F7F2; } table.rpt.pair tr.sc td { border-bottom: 0; font-weight: 700; } table.rpt.pair tr.sc.tot td { border-top: 3px solid #333; background: #EDF2EA; } table.rpt.pair tr.bn td { color: #5C6B62; font-size: var(--tiny); padding-top: 4px; border-top: 0; background: #FAFBF9; } table.rpt.pair tr.bn td:first-child { padding-left: 22px; font-style: italic; } table.rpt.ql th[colspan] { text-align: center; } table.rpt.ql td:first-child { width: 46%; } .rpt-break { margin: 34px 0; border-top: 3px double #4C8C3A; } /* The Action Plan's four client columns are visibly empty, because they are the worksheet. */ /* The four columns the RESIDENCE fills in. They were given a pale cream ground while table.rpt th still set white text, so the four headings were white on cream — invisible, and the client could not tell which columns were theirs to complete. The header keeps the band's own green; only the BODY cells are cream, which is what marks them as blank. */ table.rpt.plan th.fill { background: #3F7630; border-left: 1px dashed #EAF3E5; border-right: 1px dashed #EAF3E5; } table.rpt.plan th.fill::after { content: "to complete"; display: block; font-weight: 500; font-size: 88%; opacity: .85; font-style: italic; } table.rpt.plan td.fill { background: #FCFBF5; border-left: 1px dashed #C9C08F; border-right: 1px dashed #C9C08F; } table.rpt.plan th span { display:block; font-weight:500; font-size:88%; } table.rpt.plan td.rec { font-size: var(--tiny); font-weight: 700; } /* The chart both summary reports open with, from the delivered PDFs. Same discipline as the score card: two solid bars, each labelled and each carrying its own number. */ .pchart { margin: 6px 0 22px; } .pchart .axis { display:grid; grid-template-columns:repeat(6,1fr); margin-left:236px; font:600 11px var(--mono); color:var(--faint); border-bottom:1px solid var(--line); padding-bottom:3px; margin-bottom:6px; } .pchart .axis span:not(:first-child) { text-align:right; } .pchart .row { display:grid; grid-template-columns:224px 1fr; gap:12px; align-items:center; padding:7px 0; border-bottom:1px solid var(--line); } .pchart .row.ov { border-bottom:2px solid #9FB795; } .pchart .row .lb { font:700 var(--tiny) var(--sans); letter-spacing:.03em; color:#333; } .pchart .row.ov .lb { color:#4C8C3A; } .pchart .bz { display:grid; gap:4px; } .pchart .bar { position:relative; height:19px; background:#EEF1EC; border-radius:3px; display:flex; align-items:center; } .pchart .bar i { position:absolute; left:0; top:0; bottom:0; border-radius:3px; } .pchart .bar.sc i { background:#4C8C3A; } .pchart .bar.bn i { background:repeating-linear-gradient(135deg,#8899A6 0 5px,#C3CBD2 5px 10px); border:2px solid #4A5A66; box-sizing:border-box; } .pchart .bar b { position:relative; margin-left:9px; font:800 var(--tiny) var(--mono); color:#fff; text-shadow:0 0 3px rgba(0,0,0,.55); } .pchart .bar.bn b { color:#16211B; text-shadow:0 0 3px rgba(255,255,255,.85); } .pchart .bar span { position:relative; margin-left:auto; margin-right:8px; font:700 11.5px var(--sans); color:#5C6B62; } /* Narrow panes: the label goes above its pair rather than squeezing the bars. */ @media (max-width: 820px) { .pchart .axis { margin-left: 0; } .pchart .row, .scb { grid-template-columns: 1fr; gap: 5px; } .pchart .row .lb, .scb .lb { margin-bottom: 1px; } } /* ── THE WHOLE ANSWER SET ON THE WORKSHEET ───────────────────────────────────── The platform's own export prints every option a question offered, each with its point value, and marks the one taken. Showing only the chosen option hid what else was on the table. The tick is a character, not a colour — the chosen row also carries a heavy left block and a bold label. */ .wsQ ul.opts { list-style:none; margin:8px 0 0; padding:0; display:grid; gap:3px; } .wsQ ul.opts li { display:grid; grid-template-columns:22px 1fr auto; align-items:center; gap:8px; padding:4px 10px 4px 6px; border-left:6px solid transparent; border-radius:0 5px 5px 0; font-size:var(--small); color:#555; } .wsQ ul.opts li b { font:800 14px var(--sans); color:transparent; text-align:center; } .wsQ ul.opts li.on { background:#EDF3EA; border-left-color:#4C8C3A; color:#16211B; font-weight:700; } .wsQ ul.opts li.on b { color:#2F6B22; } .wsQ ul.opts li em { font-style:normal; font:600 var(--tiny) var(--mono); color:var(--faint); white-space:nowrap; } .wsQ ul.opts li.on em { color:#2F6B22; } /* The section band now carries its own score, as the export does. */ .wsSec h3 .sx { float:right; font:700 var(--tiny) var(--mono); opacity:.95; } /* ── THE TRANSCRIPT, AS THE REAL ONES ARE ────────────────────────────────────── The delivered transcripts sit in a folder called "Transcripts (Internal)" and every file is headed "INTERNAL — validation reference only. Not for client distribution." This page was showing one as a client document. It is now set as the machine output it is: fixed pitch, second-offset timestamps, and the internal marking where nobody can miss it. */ .trx { margin-top: 22px; border: 2px solid #3A4A42; border-radius: 9px; overflow: hidden; background: #FBFCFB; } .trx .hd { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; background: #22302A; padding: 10px 14px; } .trx .hd .ti { font: 800 var(--small) var(--sans); color: #fff; letter-spacing: .02em; } .trx .hd .int { margin-left: auto; background: #B45309; color: #fff; border: 2px solid #7C3A06; border-radius: 6px; padding: 4px 10px; font: 800 var(--tiny) var(--sans); } .trx pre.meta { margin: 0; padding: 12px 14px 10px; font: 500 12.5px/1.55 var(--mono); color: #4A5A52; background: #F1F4F0; border-bottom: 1px solid var(--line); white-space: pre-wrap; } .trx .rechd { padding: 9px 14px 4px; font: 600 11.5px var(--mono); color: var(--faint); overflow: hidden; white-space: nowrap; } .trx .lines { padding: 2px 14px 14px; max-height: 420px; overflow-y: auto; } .trx .ln { display: grid; grid-template-columns: 74px 1fr; gap: 10px; padding: 2px 0; font: 400 13px/1.62 var(--mono); color: #20302A; } .trx .ln .t { color: var(--faint); text-align: right; } /* ── RECOMMENDATION AND LOYALTY (NPS) ────────────────────────────────────────── Set the way the delivered report sets it: the group table with the enterprise and the Canadian pool beside the segment, then the 0–10 distribution. The three groups are banded under the counts as well as shaded, because the shading is not allowed to be the only signal. */ table.rpt.nps tr.tot td { font-weight: 800; background: #EDF2EA; border-top: 3px solid #333; } table.rpt.dist0 th, table.rpt.dist0 td { text-align: center; padding: 7px 4px; } table.rpt.dist0 td:first-child, table.rpt.dist0 th:first-child { text-align: left; width: 22%; } table.rpt.dist0 td.det { border-bottom: 7px solid #A11B15; } table.rpt.dist0 td.pas { border-bottom: 7px solid #A5760B; } table.rpt.dist0 td.pro { border-bottom: 7px solid #1F6B2A; } table.rpt.dist0 td { font-family: var(--mono); font-weight: 700; } .rpt-sub { font: 800 var(--tiny) var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--dim); margin: 16px 0 6px; } /* ── THE REPORT BAR ──────────────────────────────────────────────────────────── Five links to the reports a client receives. They were five anchors each carrying the same inline style typed out again, and adding one to the front left a second `style` attribute on the next — which the browser discards, so the roll-up link silently lost its box. One class, once. */ .reportbar { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; } .reportbar a { border: 2px solid var(--shop); color: var(--shop-ink); font-weight: 800; padding: 9px 15px; border-radius: 8px; text-decoration: none; font-size: var(--small); background: var(--card); white-space: nowrap; } .reportbar a:hover { background: var(--shop); color: #fff; } /* ── THE SCORE-CARD BARS, IN FULL COLOUR ─────────────────────────────────────── Pat, 2026-09-14: "change the stripes for a nicer full colour." The benchmark bar was hatched so the pair could be told apart without relying on hue. It does not need to be: every bar already carries its own number and its own word — Score, Benchmark — so a solid slate against the green reads perfectly well and looks like a finished chart rather than a diagram. */ .scb .bar.bn i, .pchart .bar.bn i { background: #5B6E7C; border: 0; } .scb .bar.bn b, .pchart .bar.bn b { color: #fff; text-shadow: 0 0 3px rgba(0,0,0,.5); } /* ── THE ACTION PLAN ─────────────────────────────────────────────────────────── Four worksheets that are meant to be printed and written on, and the focus areas that feed them. The blank rows are deliberately blank: the residence fills them in, and a demonstration that pre-fills them has quietly taken the work away from the people whose work it is. */ .plainlist { margin: 0; padding-left: 20px; font-size: var(--small); line-height: 1.65; } .plainlist li { margin-bottom: 6px; } /* Its own name: instrument.ts already has a .fa block with different rules, and one of them set text-transform:uppercase on .said, which shouted every resident quotation here. */ .apfa { background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--wrong); border-radius: 0 11px 11px 0; padding: 15px 20px; margin-bottom: 14px; } .apfa .hd { font: 700 16px var(--display); color: var(--wrong-ink); margin-bottom: 7px; } .apfa .hd b { font-family: var(--mono); font-size: 15px; } .apfa .why { font-size: var(--small); line-height: 1.6; margin: 0 0 10px; color: #333; } .apfa .said { font-size: var(--small); text-transform: none; letter-spacing: 0; } .apfa .said > b { display: block; margin-bottom: 5px; font: 800 var(--tiny) var(--sans); letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .apfa .said ul { margin: 0; padding-left: 18px; } .apfa .said li { margin-bottom: 7px; line-height: 1.58; color: #333; } .apfa .cid { font: 600 var(--tiny) var(--mono); color: var(--faint); } .apfa .more { font-size: var(--tiny); color: var(--dim); font-style: italic; margin: 7px 0 0; } table.wsheet { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--line); border-radius: 10px; overflow: hidden; margin-bottom: 6px; } table.wsheet th { background: #4C8C3A; color: #fff; text-align: left; padding: 9px 11px; font: 800 var(--tiny) var(--sans); letter-spacing: .04em; vertical-align: top; } table.wsheet th .sub { display: block; font-weight: 500; opacity: .9; letter-spacing: 0; text-transform: none; } table.wsheet td { border: 1px solid var(--line); padding: 10px 11px; font-size: var(--small); height: 44px; vertical-align: top; color: #333; } table.wsheet tr.eg td { background: #F4F7F2; } table.wsheet .hint { color: var(--dim); font-style: italic; font-size: var(--tiny); } table.wsheet .cid { font: 600 var(--tiny) var(--mono); color: var(--faint); } table.wsheet.t1 td:first-child { width: 60px; text-align: center; font-weight: 700; } /* ── PRINT / DOWNLOAD ────────────────────────────────────────────────────────── Pat, 2026-09-14: "for all reports there should be a greyed out download print button — PDF, Word, Excel — it can go in the top right corner." Greyed and inert on purpose, and it says so. A prospect asks for a PDF inside the first minute of any report; the honest answer is that the export is part of the product and not wired up here, which the bar states rather than implies. */ .dlbar { display: flex; align-items: center; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 10px; } .dlbar .lb { font: 700 var(--tiny) var(--sans); color: var(--dim); letter-spacing: .03em; margin-right: 2px; } .dlbar .btn { display: inline-flex; align-items: center; gap: 6px; padding: 6px 13px; border: 2px solid var(--ink); border-radius: 7px; background: var(--card); color: var(--ink); font: 800 var(--tiny) var(--sans); cursor: pointer; user-select: none; } .dlbar .btn:hover { background: var(--ink); color: #fff; } .dlbar .btn::before { content: ""; width: 11px; height: 13px; border-radius: 1.5px; border: 1.5px solid currentColor; } .dlbar .btn.print::before { border-radius: 2px 2px 0 0; height: 10px; border-bottom-width: 4px; } .dlbar .note { font: 600 var(--tiny) var(--sans); color: var(--faint); font-style: italic; } @media (max-width: 720px) { .dlbar { justify-content: flex-start; } } /* ══════════════════════════════════════════════════════════════════════════════ THE ADMINISTRATOR VIEW Pat, 2026-09-14: "build the Administrator view … I would like to be able to show potential clients the back of the house." A working tool, so it reads like one: a dense left rail, tabular screens, and none of the client view's generosity with white space. The switch between the two is the whole point and sits where the eye lands first. ══════════════════════════════════════════════════════════════════════════ */ .viewswitch { display: flex; gap: 0; margin-left: auto; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; background: var(--card); } .viewswitch a { display: block; padding: 8px 14px; text-decoration: none; color: var(--dim); font: 800 var(--tiny) var(--sans); line-height: 1.15; border-right: 2px solid var(--line); white-space: nowrap; } .viewswitch a:last-child { border-right: 0; } .viewswitch a.on { background: var(--gh-purple); color: #fff; } .viewswitch a.on span { color: #DCCBEE; } .viewswitch a:not(.on):hover { background: var(--page); color: var(--ink); } body.adminview { background: #EEF1EE; } .masthead.admin { border-bottom: 3px solid var(--gh-purple); } /* minmax(0, …) for the same reason the tab strip needed min-width: 0 — a grid track's automatic minimum is its own content, so a wide table held the whole page open. */ body.adminview .adminbody { display: grid; grid-template-columns: 252px minmax(0, 1fr); align-items: start; max-width: 1720px; margin: 0 auto; } body.adminview .adminnav { position: sticky; top: 0; padding: 14px 10px 40px; border-right: 1px solid var(--line); background: var(--card); min-height: 100vh; } body.adminview .adminnav .g { font: 800 10.5px var(--sans); letter-spacing: .13em; text-transform: uppercase; color: var(--faint); margin: 18px 10px 6px; padding-top: 12px; border-top: 1px solid var(--line); } body.adminview .adminnav .g:first-child { border-top: 0; padding-top: 0; margin-top: 8px; } body.adminview .adminnav a { display: flex; align-items: baseline; gap: 7px; padding: 7px 11px; border-radius: 7px; text-decoration: none; color: #2B3A32; font: 600 14px var(--sans); border-left: 4px solid transparent; } body.adminview .adminnav a:hover { background: var(--page); } body.adminview .adminnav a.on { background: #F1EBF8; border-left-color: var(--gh-purple); color: #2A1140; font-weight: 800; } body.adminview .adminnav a .l { flex: 1; } body.adminview .adminnav a .tag { font: 700 9.5px var(--sans); letter-spacing: .07em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; white-space: nowrap; } body.adminview .adminnav a.planned .l, body.adminview .adminnav a.platform .l { color: var(--dim); font-weight: 500; } body.adminview .adminnav a.portal { background: var(--gh-green); color: #fff; font-weight: 800; border-left-color: #3E7A2C; margin-top: 4px; } body.adminview .adminnav a.portal:hover { background: #4E9339; } /* A grid ITEM carries the same automatic minimum as a grid TRACK: without min-width:0 the main column refused to shrink below the widest table inside it, and the page scrolled sideways even though the track itself was allowed to give. */ body.adminview .adminmain { padding: 22px 30px 70px; max-width: min(1180px, 100%); min-width: 0; } body.adminview .adminmain.wide { max-width: min(1440px, 100%); } body.adminview .admin-title { font: 700 27px var(--display); margin: 0 0 4px; } body.adminview .admin-lede { color: var(--dim); font-size: 16px; margin: 0 0 22px; max-width: 92ch; } body.adminview .admin-h2 { font: 700 17px var(--display); margin: 28px 0 8px; color: #2A1140; } body.adminview .admin-p { font-size: var(--small); line-height: 1.62; margin: 0 0 12px; max-width: 94ch; } body.adminview .admin-none { font-size: var(--small); color: var(--dim); font-style: italic; background: var(--card); border: 1px solid var(--line); border-radius: 9px; padding: 14px 18px; } body.adminview .admin-foot { margin: 26px 0 0; padding: 13px 17px; background: #F3F0F8; border-radius: 9px; font-size: var(--tiny); line-height: 1.6; color: #43355A; max-width: 96ch; } body.adminview .admin-foot b { display: block; color: var(--gh-purple); margin-bottom: 3px; } body.adminview .admin-key { font-size: var(--tiny); color: var(--dim); margin: 8px 0 0; } body.adminview .tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(238px, 1fr)); gap: 12px; } body.adminview .tile { display: block; background: var(--card); border: 1px solid var(--line); border-radius: 11px; padding: 15px 17px; text-decoration: none; color: inherit; border-left: 6px solid var(--gh-purple); } body.adminview .tile:hover { border-color: var(--gh-purple); } body.adminview .tile b { display: block; font: 700 16px var(--display); margin-bottom: 4px; } body.adminview .tile span { font-size: var(--tiny); color: var(--dim); line-height: 1.5; } body.adminview .tile.portal { border-left-color: var(--gh-green); background: #F2F8EF; } body.adminview .waitrows { display: grid; gap: 8px; margin-bottom: 6px; } body.adminview .waitrow { display: grid; grid-template-columns: 62px 1fr auto 24px; gap: 14px; align-items: center; background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--active); border-radius: 0 10px 10px 0; padding: 12px 16px; text-decoration: none; color: inherit; } body.adminview .waitrow:hover { background: #FFFCF5; } body.adminview .waitrow .n { font: 800 26px var(--mono); color: var(--active-ink); text-align: center; } body.adminview .waitrow .w b { display: block; font-size: var(--small); } body.adminview .waitrow .w em { font-style: normal; font-size: var(--tiny); color: var(--dim); } body.adminview .waitrow .who { font: 700 var(--tiny) var(--sans); text-transform: uppercase; letter-spacing: .06em; color: var(--active-ink); } body.adminview .waitrow .go { font: 800 17px var(--sans); color: var(--line); text-align: right; } body.adminview table.adt { width: 100%; border-collapse: collapse; background: var(--card); border: 1px solid var(--line); border-radius: 10px; overflow: hidden; margin: 10px 0 8px; } body.adminview table.adt th { background: #E9E4F2; color: #2A1140; text-align: left; padding: 9px 11px; font: 800 var(--tiny) var(--sans); letter-spacing: .04em; border-bottom: 2px solid #D5CBE5; } body.adminview table.adt td { border-bottom: 1px solid var(--line); padding: 10px 11px; font-size: var(--small); vertical-align: top; } body.adminview table.adt tr:last-child td { border-bottom: 0; } body.adminview table.adt tr[data-href] { cursor: pointer; } body.adminview table.adt tr[data-href]:hover td { background: #F7F5FB; } body.adminview table.adt th.num, body.adminview table.adt td.num { text-align: center; } body.adminview table.adt td .sub { display: block; font: 500 var(--tiny) var(--mono); color: var(--faint); } body.adminview table.adt td.go { color: var(--line); font-weight: 800; text-align: right; width: 26px; } body.adminview table.adt tr[data-href]:hover td.go { color: var(--gh-purple); } body.adminview table.adt tr.tot td { background: #F1EEF7; font-weight: 800; border-top: 2px solid #C9BBDF; } body.adminview table.adt td.mono { font: 500 var(--tiny) var(--mono); color: var(--dim); } body.adminview table.adt td.up { color: #1F6B2A; font-weight: 700; } body.adminview table.adt td.down { color: #A11B15; font-weight: 700; } body.adminview table.adt td.none { color: var(--faint); } body.adminview .st { display: inline-block; padding: 3px 9px; border-radius: 6px; font: 800 10.5px var(--sans); letter-spacing: .04em; text-transform: uppercase; white-space: nowrap; color: #fff; } body.adminview .st.done { background: #1F6B2A; } body.adminview .st.run { background: #B45309; } body.adminview .st.plan { background: #5C2D88; } body.adminview .st.idle { background: #64748B; } body.adminview .dot { display: inline-block; width: 9px; height: 9px; border-radius: 50%; margin-right: 6px; vertical-align: baseline; } body.adminview .dot.done { background: #1F6B2A; } body.adminview .dot.run { background: #B45309; } body.adminview table.adt.sched td { font-size: var(--tiny); white-space: nowrap; } body.adminview table.adt.sched td em { display: block; font-style: normal; color: var(--faint); font-size: 10.5px; padding-left: 15px; } body.adminview .statrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 18px; } body.adminview .stat { background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 13px 16px; border-top: 5px solid var(--gh-purple); } body.adminview .stat b { display: block; font: 700 27px var(--mono); line-height: 1.1; } body.adminview .stat span { font-size: var(--tiny); color: var(--dim); } body.adminview .bar2 { display: block; height: 9px; background: var(--page); border: 1px solid var(--line); border-radius: 5px; overflow: hidden; margin-bottom: 4px; max-width: 220px; } body.adminview .bar2 i { display: block; height: 100%; background: var(--gh-green); } body.adminview table.adt td em { font-style: normal; font-size: var(--tiny); color: var(--dim); } body.adminview .callout { background: #F1EBF8; border: 2px solid #CDBCE4; border-radius: 11px; padding: 15px 19px; margin-bottom: 18px; max-width: 96ch; } body.adminview .callout b { display: block; font-size: var(--small); color: #2A1140; margin-bottom: 5px; } body.adminview .callout span { font-size: var(--small); line-height: 1.6; color: #3B3048; } body.adminview .callout.plan { background: var(--page); border-color: var(--line); } body.adminview .folders { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 7px; } body.adminview .fold { background: var(--card); border: 1px solid var(--line); border-left: 5px solid var(--gh-green); border-radius: 0 7px 7px 0; padding: 9px 13px; font: 600 var(--tiny) var(--sans); } body.adminview .fold.extra { border-left-color: var(--faint); color: var(--dim); font-style: italic; } body.adminview .optrow { display: grid; grid-template-columns: repeat(auto-fit, minmax(230px, 1fr)); gap: 10px; margin-bottom: 8px; } body.adminview .opt { background: var(--card); border: 2px solid var(--line); border-radius: 9px; padding: 11px 14px; } body.adminview .opt.on { border-color: var(--gh-purple); background: #F7F4FA; } body.adminview .opt b { display: block; font-size: var(--small); margin-bottom: 3px; } body.adminview .opt.on b::before { content: "● "; color: var(--gh-purple); } body.adminview .opt:not(.on) b::before { content: "○ "; color: var(--faint); } body.adminview .opt span { font-size: var(--tiny); color: var(--dim); line-height: 1.5; } @media (max-width: 900px) { body.adminview .adminbody { grid-template-columns: 1fr; } body.adminview .adminnav { position: static; min-height: 0; border-right: 0; border-bottom: 1px solid var(--line); display: flex; flex-wrap: wrap; gap: 4px; } body.adminview .adminnav .g { width: 100%; border-top: 0; margin: 8px 6px 2px; padding-top: 0; } } /* ── The scanner screen ───────────────────────────────────────────────────── Pat, 2026-09-14: "tidy up the demo scanner, make everything look really sharp." Four numbered steps, and two flag tables whose first column is the flag's own word — never a colour on its own. */ body.adminview .admin-h3 { font: 800 var(--small) var(--sans); margin: 18px 0 6px; color: #2A1140; letter-spacing: .02em; } body.adminview .steps { list-style: none; margin: 10px 0 4px; padding: 0; display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; } /* Four, or two by two — never three and an orphan. */ @media (max-width: 1250px) { body.adminview .steps { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 680px) { body.adminview .steps { grid-template-columns: 1fr; } } body.adminview .step { background: var(--card); border: 1px solid var(--line); border-top: 5px solid var(--gh-purple); border-radius: 10px; padding: 13px 16px 15px; } body.adminview .step .n { display: inline-block; min-width: 23px; height: 23px; line-height: 23px; text-align: center; border-radius: 6px; background: var(--gh-purple); color: #fff; font: 800 13px var(--mono); margin-bottom: 7px; } body.adminview .step b { display: block; font: 700 15px var(--display); margin-bottom: 4px; } body.adminview .step .w { display: block; font-size: var(--tiny); line-height: 1.55; color: #2B3A32; } body.adminview .step .n2 { display: block; font-size: var(--tiny); line-height: 1.5; color: var(--dim); margin-top: 6px; padding-top: 6px; border-top: 1px solid var(--line); } body.adminview table.adt.kinds { max-width: 1120px; } body.adminview table.adt.kinds td.kind { width: 200px; white-space: nowrap; background: #F7F5FB; border-right: 4px solid #D5CBE5; } body.adminview table.adt.kinds td.kind b { font: 800 var(--small) var(--sans); color: #2A1140; } body.adminview table.adt.kinds td { line-height: 1.55; } body.adminview table.adt tr.grp td { border-top: 2px solid #D5CBE5; } body.adminview table.adt tr.grp:first-child td { border-top: 0; } body.adminview table.adt td.rate { width: 220px; vertical-align: middle; } body.adminview table.adt td.rate .rw { display: flex; align-items: center; gap: 10px; } body.adminview table.adt td.rate b { font: 700 var(--small) var(--mono); min-width: 54px; } body.adminview table.adt td.rate .bar2 { flex: 1; max-width: 140px; margin: 0; } /* The home tiles carry the same words as the rail — "Collection" appears in both modules, so each tile names its module above the label. */ body.adminview .tile em { display: block; font: 800 10px var(--sans); font-style: normal; letter-spacing: .12em; text-transform: uppercase; color: var(--faint); margin-bottom: 3px; } body.adminview .tile.portal em { color: #4E7A3C; } /* ── The masthead's second line ───────────────────────────────────────────── Pat, 2026-09-14: "i think these buttons should be lower and the logo back to where it is." The view switch had been dropped into the lockup, between the Greenhouse wordmark and Halden's own mark, and it pushed both out of the places they were chosen to sit. The lockup is the two brands and nothing else; the controls drop to the line the module tabs are on. */ /* ONE LINE, NOT TWO. Pat, 2026-09-14: "i feel like there is room to drop this down." The controls were wrapping onto a band of their own, which left a strip of empty white under the tabs and pushed the whole masthead taller for nothing. The bar does not wrap: the tabs take the room they need and wrap among themselves, and the controls hold the right-hand end of the same line. */ /* THE TABS NEVER BREAK. Pat, 2026-09-14: "no its broken" — squeezing the nav so the controls could share its line wrapped "Google reviews" onto a second row underneath "Report card", with the REVIEWS group label landing on top of the active underline. The tab strip keeps its own width and does not wrap; the controls sit beside it while there is room, and drop below it, still right-aligned, when there is not. */ .mastbar { display: flex; align-items: flex-end; justify-content: space-between; gap: 18px; flex-wrap: wrap; } /* min-width: 0 IS THE WHOLE FIX, and it is the easiest thing in flexbox to leave out. A flex item's min-width is `auto` by default, meaning "never shrink below your content". The tab strip does not wrap, so it held the masthead open at its full content width and the WHOLE PAGE scrolled sideways — 1565px of document in a 1015px window, with Google reviews, Compliance and the right-hand end of Halden's own mark pushed off the screen. max-width:100% does not override min-width:auto. With min-width:0 the strip may shrink, and its own overflow-x then scrolls the TABS rather than the page. */ .mastbar nav.modules { flex: 0 1 auto; min-width: 0; flex-wrap: nowrap; row-gap: 0; align-items: flex-end; max-width: 100%; overflow-x: auto; scrollbar-width: thin; } /* A tab label breaking across two lines reads as a fault. It keeps its line and the strip scrolls sideways on a window too narrow to hold them all. */ .mastbar nav.modules a { white-space: nowrap; } .mastbar nav.modules .grp { display: flex; flex: none; } .mastctl { display: flex; align-items: center; gap: 12px; padding: 0 26px 10px; flex: none; margin-left: auto; } /* Air between Halden's mark and the tabs. Pat, 2026-09-14: "make Halden not so close to the menu bar." */ .masthead .lockup { padding-bottom: 10px; } .mastwhere { font: 700 var(--tiny) var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--faint); padding: 16px 26px 12px; } @media (max-width: 900px) { .mastbar { align-items: flex-start; } .mastctl { padding: 8px 26px 12px; } } /* ══════════════════════════════════════════════════════════════════════════════ THE VALIDATION DESK Pat, 2026-09-14: "The validator screen for the mystery shops are extremely important. Please don't prepare garbage." So it is the screen, not a page about the screen — and every state on it carries its word, never a colour on its own. ══════════════════════════════════════════════════════════════════════════ */ body.adminview .vtabs { display: flex; gap: 8px; margin-bottom: 18px; flex-wrap: wrap; } body.adminview .vtabs button { background: var(--card); color: var(--dim); border: 2px solid var(--line); border-radius: 8px; padding: 9px 17px; font: 700 var(--small) var(--sans); cursor: pointer; } body.adminview .vtabs button.on { background: var(--ink); color: #fff; border-color: var(--ink); } body.adminview .vclient { background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 12px; } body.adminview .vhead { display: flex; width: 100%; align-items: center; gap: 12px; background: var(--card); border: 0; border-left: 9px solid var(--gh-purple); padding: 14px 18px; cursor: pointer; text-align: left; font: inherit; } body.adminview .vhead[aria-expanded="true"] { background: #F6F4FA; } body.adminview .vhead .tw { color: var(--faint); width: 12px; } body.adminview .vhead .nm { font: 700 17px var(--sans); } body.adminview .vhead .ct { color: var(--dim); font-size: var(--tiny); } body.adminview .vhead .sp, body.adminview .vsum .sp { flex: 1; } body.adminview .chip.amber { background: #B45309; color: #fff; border-radius: 6px; padding: 4px 11px; font: 800 var(--tiny) var(--sans); white-space: nowrap; } body.adminview .vbody { padding: 6px 14px 12px; } body.adminview a.vrow { display: grid; grid-template-columns: 2.1fr 1.3fr 1.5fr 110px 20px; gap: 14px; align-items: center; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--line); border-radius: 0 8px 8px 0; padding: 11px 14px; margin-top: 8px; } body.adminview a.vrow.wait { border-left-color: #6D28D9; } body.adminview a.vrow.run { border-left-color: #B45309; } body.adminview a.vrow.ok { border-left-color: #1F6B2A; } body.adminview a.vrow:hover { background: #F9F8FC; } body.adminview a.vrow .lbl { font: 700 var(--small) var(--sans); } body.adminview a.vrow .meta, body.adminview a.vrow .fnd { color: var(--dim); font-size: var(--tiny); } body.adminview a.vrow .sc { font: 700 var(--tiny) var(--mono); text-align: right; } body.adminview a.vrow .go { color: var(--line); font-weight: 800; text-align: right; } body.adminview a.vrow:hover .go { color: var(--gh-purple); } /* ── one report ─────────────────────────────────────────────────────────────── */ body.adminview .vbanner { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; border-radius: 10px; padding: 13px 18px; margin-bottom: 18px; color: #fff; } body.adminview .vbanner b { font: 900 var(--small) var(--sans); letter-spacing: .07em; } body.adminview .vbanner span { font-size: var(--tiny); line-height: 1.55; } body.adminview .vbanner.ok { background: #1F6B2A; } body.adminview .vbanner.wait { background: #6D28D9; } body.adminview .vpanel { background: var(--card); border: 1px solid var(--line); border-radius: 12px; padding: 17px 20px; margin-bottom: 20px; } body.adminview .vrun { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; margin-bottom: 11px; } body.adminview .vrun label { display: inline-flex; align-items: center; gap: 7px; font-size: var(--tiny); color: var(--dim); cursor: pointer; } body.adminview .vb { display: inline-block; background: var(--card); color: #2A1140; border: 2px solid var(--line); border-radius: 8px; padding: 8px 15px; font: 700 var(--tiny) var(--sans); cursor: pointer; text-decoration: none; } body.adminview .vb:hover { border-color: var(--gh-purple); } body.adminview .vb.big { background: var(--gh-purple); color: #fff; border-color: #42169B; font-size: var(--small); padding: 11px 22px; } body.adminview .vb.green { background: #1F6B2A; color: #fff; border-color: #14501E; } body.adminview .vb.amber { background: #B45309; color: #fff; border-color: #7C3A06; } body.adminview .vb.purple { background: #5C2D88; color: #fff; border-color: #42169B; } body.adminview .vb.dark { background: var(--ink); color: #fff; border-color: var(--ink); } body.adminview .vstatus { font-size: var(--tiny); color: var(--dim); margin: 0 0 10px; } body.adminview .vfold summary { font: 700 var(--tiny) var(--sans); color: var(--gh-purple); cursor: pointer; } body.adminview .vfold ul { margin: 7px 0 4px; padding-left: 20px; font-size: var(--tiny); color: var(--dim); line-height: 1.7; } body.adminview .vfold p { font-size: var(--tiny); color: var(--faint); margin: 4px 0 0; } body.adminview .vnote { font-size: var(--tiny); color: var(--dim); line-height: 1.6; margin: 11px 0 0; max-width: 92ch; padding-top: 10px; border-top: 1px solid var(--line); } body.adminview .vsum { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 11px 16px; margin-bottom: 14px; font-size: var(--tiny); color: var(--dim); } body.adminview .vsum b { color: var(--ink); font: 800 15px var(--mono); } body.adminview .onlyflag { display: inline-flex; align-items: center; gap: 7px; cursor: pointer; } body.adminview .sev { display: inline-block; color: #fff; border-radius: 5px; padding: 2px 8px; font: 900 10px var(--sans); letter-spacing: .07em; } body.adminview .sev.stop { background: #B91C1C; } body.adminview .sev.check { background: #B45309; } body.adminview .sev.note { background: #64748B; } body.adminview h2.admin-h2.vsec { font-size: 14px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); border-bottom: 2px solid var(--line); padding-bottom: 5px; margin-top: 26px; } body.adminview .vq { background: var(--card); border: 1px solid var(--line); border-left: 8px solid var(--line); border-radius: 0 10px 10px 0; padding: 13px 16px; margin-bottom: 9px; } body.adminview .vq.flagged { border-left-color: #B45309; } body.adminview .vq.done { border-left-color: #1F6B2A; background: #F7FBF7; } body.adminview .vqhead { display: flex; align-items: baseline; gap: 11px; flex-wrap: wrap; margin-bottom: 10px; } body.adminview .vqhead .qn { font: 800 var(--tiny) var(--mono); color: var(--gh-purple); min-width: 36px; } body.adminview .vqhead .qt { flex: 1; min-width: 240px; font: 600 var(--small) var(--sans); line-height: 1.45; } body.adminview .vqhead .qp { font: 700 var(--tiny) var(--mono); background: var(--page); border: 1px solid var(--line); border-radius: 5px; padding: 2px 8px; white-space: nowrap; } body.adminview .vqhead .qb { font: 500 var(--tiny) var(--mono); color: var(--faint); white-space: nowrap; } body.adminview .vcols { display: grid; grid-template-columns: 1.1fr 1.3fr 0.9fr; gap: 0; } body.adminview .vcol { border-left: 5px solid var(--line); padding: 0 14px 0 11px; } body.adminview .vcol.shopper { border-left-color: #0E9F6E; } body.adminview .vcol.check { border-left-color: #6D28D9; } body.adminview .vcol.you { border-left-color: var(--ink); } body.adminview .vcol .ch { font: 800 10px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--dim); margin-bottom: 6px; } body.adminview .vcol .ans { font: 700 var(--tiny) var(--sans); line-height: 1.5; } body.adminview .vcol .wrote { font-size: var(--tiny); line-height: 1.55; margin-top: 5px; color: #222; } body.adminview .vcol .blank { font-size: var(--tiny); color: var(--faint); font-style: italic; } body.adminview .vcol .notyet { font-size: var(--tiny); color: var(--faint); font-style: italic; } body.adminview .fnd { font-size: var(--tiny); line-height: 1.55; margin-bottom: 8px; } body.adminview .fnd b { display: block; margin: 4px 0 2px; color: #2A1140; } body.adminview .fnd span { display: block; color: #333; } body.adminview .fnd em { display: block; font-style: normal; color: var(--faint); margin-top: 3px; } body.adminview .fnd.quiet span { color: var(--faint); font-style: italic; } body.adminview .vcol.you .acts { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; } body.adminview .vcol.you .settled { font-size: var(--tiny); line-height: 1.5; } body.adminview .vcol.you .settled b { display: block; color: #1F6B2A; font-weight: 800; } body.adminview .vcol.you .settled span { display: block; color: #333; margin: 3px 0 5px; } body.adminview .vcol.you .undo { background: none; border: 0; padding: 0; color: var(--dim); cursor: pointer; font: 700 var(--tiny) var(--sans); text-decoration: underline; } body.adminview .askbox { margin-top: 4px; } body.adminview .askbox label { display: block; font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin-bottom: 4px; } body.adminview .askbox textarea { width: 100%; font: 400 var(--tiny)/1.5 var(--sans); padding: 8px; border: 2px solid var(--line); border-radius: 7px; } body.adminview .askacts { display: flex; gap: 6px; margin-top: 6px; flex-wrap: wrap; } body.adminview .asknote { font-size: 11px; color: var(--faint); line-height: 1.5; margin: 6px 0 0; } body.adminview .decision textarea { width: 100%; font: 400 var(--small)/1.55 var(--sans); padding: 10px; border: 2px solid var(--line); border-radius: 8px; margin: 10px 0; } body.adminview .chk { display: block; font-size: var(--small); margin: 6px 0; cursor: pointer; } body.adminview .chk input { margin-right: 8px; } body.adminview .admin-p.small { font-size: var(--tiny); } body.adminview .vacts { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 10px; } body.adminview .vdest { font-size: var(--tiny); color: var(--dim); margin: 0 0 14px; } body.adminview .vdone { margin: 12px 0 0; padding: 11px 15px; border-radius: 8px; font: 700 var(--small) var(--sans); } body.adminview .vdone.full { background: #E7F6EC; border: 2px solid #1F6B2A; color: #0B4A24; } body.adminview .vdone.half { background: #FEF3E2; border: 2px solid #B45309; color: #7C3A06; } @media (max-width: 1100px) { body.adminview .vcols { grid-template-columns: 1fr; gap: 12px; } body.adminview .vcol { padding-bottom: 4px; } body.adminview a.vrow { grid-template-columns: 1fr; gap: 4px; } body.adminview a.vrow .sc, body.adminview a.vrow .go { text-align: left; } } body.adminview .vunval { margin-top: 18px; padding-top: 14px; border-top: 2px solid var(--line); display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; } body.adminview .vunval b { font-size: var(--small); } body.adminview .vunval span { flex: 1; min-width: 260px; font-size: var(--tiny); color: var(--dim); line-height: 1.55; } /* A flex or grid rule beats the browser's own display:none for [hidden], so a panel told to hide stayed on screen. The summary bar of the validation desk shipped visible before its review had been run because of exactly this. */ [hidden] { display: none !important; } /* ── Validation, as packages ───────────────────────────────────────────────── Pat, 2026-09-14: "start with the mystery shop validator as a package." A package is a shop's worth of surveys held together by one shopper and one inquiry, so the screen has one header, one review, one decision — and each survey inside it keeps its own heading and its own identification strip. */ body.adminview a.vrow .lbl em, body.adminview a.vrow .meta em { display: block; font-style: normal; font: 500 var(--tiny) var(--mono); color: var(--faint); margin-top: 2px; } body.adminview a.vrow .lbl { font: 700 var(--small) var(--sans); } /* The Prep Sheet, as the cover document it is. */ body.adminview .prepsheet { background: var(--card); border: 1px solid var(--line); border-left: 9px solid var(--gh-green); border-radius: 0 11px 11px 0; padding: 0; margin-bottom: 18px; } body.adminview .prepsheet > summary { cursor: pointer; padding: 14px 20px; font-size: var(--small); list-style: none; } body.adminview .prepsheet > summary::-webkit-details-marker { display: none; } body.adminview .prepsheet > summary::before { content: "▸ "; color: var(--faint); font-weight: 800; } body.adminview .prepsheet[open] > summary::before { content: "▾ "; } body.adminview .prepsheet > summary em { font-style: normal; color: var(--dim); font-size: var(--tiny); } body.adminview .prepbody { padding: 0 20px 18px; } body.adminview .prepgrid { display: grid; grid-template-columns: minmax(210px, 30ch) 1fr; gap: 9px 24px; margin: 0; font-size: var(--tiny); align-items: baseline; } body.adminview .prepgrid dt { font-weight: 700; color: var(--dim); line-height: 1.5; } body.adminview .prepgrid dd { margin: 0; line-height: 1.55; } /* The jump bar — where the work is, before you scroll for it. */ body.adminview .vjump { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 6px; } body.adminview .vjump a { display: block; background: var(--card); border: 2px solid var(--line); border-radius: 9px; padding: 9px 14px; text-decoration: none; color: inherit; } body.adminview .vjump a:hover { border-color: var(--gh-purple); } body.adminview .vjump a b { display: block; font: 700 var(--small) var(--sans); } body.adminview .vjump a span { font: 500 var(--tiny) var(--mono); color: var(--dim); } /* One survey inside the package. */ body.adminview .velem { margin-top: 26px; scroll-margin-top: 14px; } body.adminview .velem-head { display: flex; align-items: baseline; gap: 12px; flex-wrap: wrap; background: var(--ink); color: #fff; border-radius: 9px 9px 0 0; padding: 12px 18px; } body.adminview .velem-head h2 { font: 700 19px var(--display); margin: 0; color: #fff; } body.adminview .velem-head .when { font: 500 var(--tiny) var(--mono); color: #C7D3C8; } body.adminview .velem-head .sp { flex: 1; } body.adminview .velem-head .cnt, body.adminview .velem-head .sc { font: 600 var(--tiny) var(--mono); color: #C7D3C8; } body.adminview .velem-head .sc { color: #fff; } /* The identification block, stated once under its survey's heading rather than opening it. This is the whole fix: the sheets stop all starting the same way. */ body.adminview .identstrip { display: flex; gap: 10px 26px; flex-wrap: wrap; background: #F3F1F8; border: 1px solid var(--line); border-top: 0; padding: 10px 18px; font-size: var(--tiny); } body.adminview .identstrip span { line-height: 1.5; } body.adminview .identstrip b { display: block; font: 800 10px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); } body.adminview h3.vsec { font: 800 12px var(--sans); letter-spacing: .08em; text-transform: uppercase; color: var(--dim); margin: 20px 0 8px; padding-bottom: 5px; border-bottom: 2px solid var(--line); } body.adminview .velem > h3.vsec:first-of-type { margin-top: 16px; } body.adminview .elemfoot { font-size: var(--tiny); color: var(--dim); margin: 10px 0 0; } @media (max-width: 760px) { body.adminview .prepgrid { grid-template-columns: 1fr; gap: 2px 0; } body.adminview .prepgrid dd { margin-bottom: 8px; } } /* ── The scanner validator ─────────────────────────────────────────────────── Pat, 2026-09-14: "now do the scanner validator." The screen is the scanner's own: a tally, a review queue, and the answers beside the paper they were read from. Every state carries its word — a flag says "double mark", never a colour. */ body.adminview .campbar { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-left: 9px solid var(--gh-purple); border-radius: 0 11px 11px 0; padding: 14px 20px; margin-bottom: 16px; } body.adminview .campbar .cb b { display: block; font: 700 17px var(--display); } body.adminview .campbar .cb span { font-size: var(--tiny); color: var(--dim); } body.adminview .cbstat { text-align: center; } body.adminview .cbstat b { display: block; font: 700 23px var(--mono); line-height: 1.1; } body.adminview .cbstat span { font-size: var(--tiny); color: var(--dim); } body.adminview .cbacts { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; } body.adminview .vb.ghost { color: var(--faint); border-color: var(--line); cursor: default; } body.adminview .vb.small { font-size: 11.5px; padding: 5px 11px; } /* The queue. Its head is solid purple because it is the one band that says "these are the things a person has to look at". */ body.adminview .queuebox { background: var(--card); border: 1px solid var(--line); border-radius: 11px; overflow: hidden; margin-bottom: 16px; } body.adminview .queuehead { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--gh-purple); color: #fff; padding: 9px 16px; font: 600 var(--tiny) var(--mono); letter-spacing: .1em; } body.adminview .queuehead b { font-weight: 800; } body.adminview .queuehead .vb { background: rgba(255,255,255,.14); color: #fff; border-color: rgba(255,255,255,.5); } body.adminview .queuehead .vb:hover { background: rgba(255,255,255,.26); } body.adminview .queuescroll { max-height: 310px; overflow-y: auto; } body.adminview .queueempty { padding: 16px 18px; margin: 0; font-size: var(--small); color: var(--dim); font-style: italic; } body.adminview .qrow { display: grid; grid-template-columns: 128px 104px 1fr 190px 92px; gap: 10px; align-items: center; padding: 9px 14px; border-bottom: 1px solid var(--line); font-size: var(--tiny); } body.adminview .qrow .qwhy { grid-column: 3 / -1; color: var(--dim); line-height: 1.5; margin-top: -4px; } body.adminview .qrow:last-child { border-bottom: 0; } body.adminview .qrow .jump { background: none; border: 0; padding: 0; text-align: left; cursor: pointer; font: 700 var(--tiny) var(--sans); color: var(--gh-purple); text-decoration: underline; text-underline-offset: 3px; } body.adminview .qrow .qq { line-height: 1.45; } body.adminview .qrow .qdetail { color: var(--dim); line-height: 1.45; } body.adminview .kind { display: inline-block; color: #fff; border-radius: 5px; padding: 3px 8px; font: 800 10px var(--sans); letter-spacing: .05em; text-transform: uppercase; text-align: center; white-space: nowrap; } body.adminview .kind.low_conf { background: #B45309; } body.adminview .kind.marginalia { background: #6D28D9; } body.adminview .kind.double_mark { background: #B91C1C; } body.adminview .answerbox { width: 100%; font: 400 var(--tiny) var(--sans); padding: 6px 8px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); color: var(--ink); } body.adminview .answerbox:focus { outline: 2px solid var(--gh-purple); outline-offset: 1px; } body.adminview .navrow { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; background: var(--card); border: 1px solid var(--line); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; } body.adminview .navlabel { flex: 1; min-width: 240px; font-size: var(--small); } body.adminview .navlabel span { color: var(--dim); font-size: var(--tiny); } body.adminview .navlabel .ok { color: #1F6B2A; } body.adminview .vb:disabled { opacity: .4; cursor: not-allowed; } body.adminview .reviewgrid { display: grid; grid-template-columns: minmax(0, 1fr) 430px; gap: 16px; align-items: start; } body.adminview .answertable { min-width: 0; } body.adminview table.adt.scan td { padding: 7px 10px; } body.adminview table.adt.scan tr.dimrow td { background: #F1EEF7; font: 800 10.5px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: #2A1140; } body.adminview table.adt.scan tr.rowflag td { background: #FFF6E9; } body.adminview table.adt.scan tr[data-page] { cursor: pointer; } body.adminview table.adt.scan tr[data-page]:hover td { background: #F7F5FB; } body.adminview table.adt.scan td.tq { font-size: var(--tiny); line-height: 1.45; } body.adminview table.adt.scan td.tq .tt { display: block; font: 500 10.5px var(--mono); color: var(--faint); margin-top: 2px; } body.adminview table.adt.scan td.ta { width: 210px; } body.adminview table.adt.scan th.stcol, body.adminview table.adt.scan td.ts { width: 96px; text-align: center; } body.adminview .chipbtn { background: var(--page); border: 1.5px solid var(--line); border-radius: 6px; padding: 4px 10px; font: 700 10.5px var(--sans); cursor: pointer; color: var(--dim); white-space: nowrap; } body.adminview .chipbtn.warn { background: #B45309; border-color: #7C3A06; color: #fff; } body.adminview .chipbtn.good { background: #1F6B2A; border-color: #14501E; color: #fff; } body.adminview .previewcol { position: sticky; top: 10px; } body.adminview .pagestrip { display: flex; gap: 5px; margin-bottom: 8px; flex-wrap: wrap; } body.adminview .pg { width: 34px; height: 30px; border: 1.5px solid var(--line); border-radius: 6px; background: var(--card); cursor: pointer; font: 700 var(--tiny) var(--mono); color: var(--dim); } body.adminview .pg.on { background: var(--gh-green); border-color: #3E7A2C; color: #fff; } body.adminview #pageimg { width: 100%; height: 620px; border: 1px solid var(--line); border-radius: 10px; background: #6E766F; display: block; } @media (max-width: 1150px) { body.adminview .reviewgrid { grid-template-columns: 1fr; } body.adminview .previewcol { position: static; } body.adminview .qrow { grid-template-columns: 1fr; gap: 5px; } body.adminview .qrow .qwhy { grid-column: 1; } } /* The three doors, on the Collection screen. Each carries its state in words. */ body.adminview .doors { display: grid; grid-template-columns: repeat(auto-fit, minmax(258px, 1fr)); gap: 12px; margin-bottom: 8px; } body.adminview .door { background: var(--card); border: 1px solid var(--line); border-top: 6px solid var(--line-2); border-radius: 10px; padding: 13px 17px 15px; } body.adminview .door.on { border-top-color: var(--gh-green); } body.adminview .door.plan { border-top-color: var(--faint); } body.adminview .door .dst { display: inline-block; font: 800 10px var(--sans); letter-spacing: .09em; text-transform: uppercase; color: #fff; background: var(--faint); border-radius: 5px; padding: 2px 8px; margin-bottom: 7px; } body.adminview .door.on .dst { background: #1F6B2A; } body.adminview .door:not(.on):not(.plan) .dst { background: #5C2D88; } body.adminview .door b { display: block; font: 700 16px var(--display); margin-bottom: 5px; } body.adminview .door span:not(.dst) { font-size: var(--tiny); line-height: 1.55; color: var(--dim); } /* The run that is open on the validation desk. */ body.adminview a.runrow { display: grid; grid-template-columns: 2fr repeat(4, 84px) auto; gap: 16px; align-items: center; text-decoration: none; color: inherit; background: var(--card); border: 1px solid var(--line); border-left: 9px solid var(--gh-purple); border-radius: 0 10px 10px 0; padding: 14px 18px; margin-bottom: 6px; } body.adminview a.runrow:hover { background: #F8F6FC; } body.adminview a.runrow .rl b { display: block; font: 700 var(--small) var(--sans); } body.adminview a.runrow .rl em, body.adminview a.runrow .rn em { display: block; font-style: normal; font: 500 var(--tiny) var(--mono); color: var(--faint); } body.adminview a.runrow .rn { text-align: center; } body.adminview a.runrow .rn b { font: 700 21px var(--mono); } body.adminview a.runrow .go { font: 700 var(--tiny) var(--sans); color: var(--gh-purple); white-space: nowrap; } @media (max-width: 900px) { body.adminview a.runrow { grid-template-columns: 1fr 1fr; } } /* A named tab that is not yet a place. Pat, 2026-09-18: "make this a tab thats greyed out." It sits in the strip so a prospect can see the shape of what is coming, and it carries the word "coming" as well as the grey — a greyed tab that only LOOKS disabled reads as broken. */ nav.modules .navsoon { display: inline-flex; align-items: baseline; gap: 7px; padding: 9px 13px 12px; color: var(--faint); font: 500 var(--small) var(--sans); cursor: default; border-bottom: 6px solid transparent; } nav.modules .navsoon em { font: 700 9.5px var(--sans); font-style: normal; letter-spacing: .09em; text-transform: uppercase; color: var(--faint); border: 1px solid var(--line); border-radius: 4px; padding: 1px 5px; } /* ── Who is signed in, and the way out ────────────────────────────────────── Pat, 2026-09-27: "create functionality where I can sign in and sign out, please. I don't see it anywhere." It sits with the other masthead controls and is deliberately narrow — the tab strip beside it must not be pushed into wrapping, which is the fault that broke this band once before. */ .sessionbar { display: flex; align-items: center; gap: 7px; margin: 0; } /* Capped at thirteen characters. A long address in full costs the tab strip its line, and the whole address is on the element's title where a hover can read it. */ .sessionbar .who { font: 600 var(--tiny) var(--sans); color: var(--dim); max-width: 13ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } .sessionbar button { background: var(--card); color: var(--ink); border: 2px solid var(--line); border-radius: 9px; padding: 7px 13px; font: 800 var(--tiny) var(--sans); cursor: pointer; white-space: nowrap; } .sessionbar button:hover { border-color: var(--gh-purple); color: var(--gh-purple); } .sessionbar button:focus-visible { outline: 3px solid var(--gh-purple); outline-offset: 2px; } @media (max-width: 760px) { .sessionbar .who { display: none; } } /* THE REPORT CARD'S GRID SCROLLS IN ITS OWN BOX, NOT BY DRAGGING THE PAGE. Pat, 2026-10-03: "this needs a fix" — the whole document was 1565px wide in a 1015px window, so the masthead, the tab strip and the right-hand end of Halden's mark all slid off the screen together. The table was always built for this: its Community column is position:sticky, which does nothing unless an ancestor is the thing that scrolls. */ .rcwrap { overflow: auto; max-height: calc(100vh - 24px); scrollbar-width: thin; border-radius: 10px; } /* a pane: headings stay pinned as it scrolls */ /* Any table too wide for its page scrolls inside this, never by dragging the document. */ .tablewrap { overflow-x: auto; scrollbar-width: thin; margin-bottom: 14px; } /* THE SIGN-OUT SITS UNDER THE CUSTOMER'S OWN MARK, not in the control row. Pat, 2026-10-03: "You need to find another place to hide, to have the sign out button. Preferably underneath the logo of the customer ... it's the sign out button that is pushing everything over ... the tabs don't sit nicely on top of the colored bar." He is right — it was 236px wide and it was the thing tipping the tab strip onto its own row. */ .operator .sessionbar { margin-top: 6px; justify-content: flex-end; } .operator .sessionbar .who { max-width: 22ch; } .operator .sessionbar button { padding: 5px 11px; font-size: 11.5px; border-width: 1.5px; } /* On the administrator side there is no customer mark, so the bar takes that corner itself. */ .lockup .operator.admin-session { margin-left: auto; } /* ══════════════════════════════════════════════════════════════════════════════ THE CUSTOMER EXPERIENCE TIMELINE — "the journey strip", Pat's choice of 2026-10-03. The whole journey across the top; the part that is open, underneath. Pat is colour blind: every verdict carries an arrow and a word, colour is a thick block never a sliver, and the two verdict colours (blue ahead, orange behind) are never used for a part of the journey. Every class is prefixed jy- so nothing here can reach another page. ══════════════════════════════════════════════════════════════════════════ */ /* The journey's pictograms in order, grouped by part — drawn in the timeline's bar on the roll-up's front page. */ .jy-enter-strip { display: flex; gap: 14px; flex-wrap: wrap; align-items: flex-end; min-width: 0; } .jy-enter-ph { display: flex; flex-direction: column; gap: 6px; } .jy-enter-ph .discs { display: flex; gap: 4px; } .jy-enter-ph > span { font: 800 10.5px var(--sans); letter-spacing: .1em; text-transform: uppercase; color: var(--c); border-top: 4px solid var(--c); padding-top: 4px; } .jy { --jy-inquiry: #5C2D88; --jy-tour: #5C2D88; --jy-followup: #5C2D88; --jy-life: #0E6E8C; --jy-team: #2E2E2E; --jy-ptour: #C2185B; --jy-throughout: #F2C500; --jy-above: #0E5A3A; --jy-below: #D55E00; --jy-soft: #FAF7F0; --jy-track: #EFE9DC; } /* The report card's score, at the top of the timeline, in the report card's own rank colours. */ .jy-top { display: flex; gap: 24px; align-items: flex-start; justify-content: space-between; } .jy-intro { min-width: 0; flex: 1; } a.jy-idx { display: flex; gap: 12px; align-items: stretch; flex: none; min-width: 220px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 12px 18px 12px 0; color: var(--ink); text-decoration: none; overflow: hidden; } a.jy-idx:hover { border-color: var(--ink); } a.jy-idx .bar { width: 14px; border-radius: 0 4px 4px 0; flex: none; } a.jy-idx.portfolio .bar { background: var(--rollup); } a.jy-idx .l { font: 800 11px var(--sans); letter-spacing: .12em; text-transform: uppercase; color: var(--dim); } a.jy-idx .k { font: 700 40px/1.05 var(--mono); } a.jy-idx .rank { font: 800 14px var(--sans); } a.jy-idx .n { font-size: 12.5px; color: var(--dim); max-width: 200px; } .jy-lede { font-size: 16.5px; color: var(--dim); margin: 4px 0 16px; max-width: 920px; } .jy-lede b { color: var(--ink); } .jy-picker { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 16px; } .jy-picker a { font: 600 13.5px var(--sans); border: 2px solid var(--ink); background: var(--card); color: var(--ink); padding: 6px 13px; border-radius: 999px; text-decoration: none; } .jy-picker a:hover { background: var(--jy-soft); } .jy-picker a.on { background: var(--ink); color: #fff; } .jy-howto { display: flex; gap: 22px; flex-wrap: wrap; font-size: 13px; color: var(--ink); margin: 0 0 14px; background: var(--card); border: 2px solid var(--line); border-radius: 10px; padding: 10px 14px; } .jy-howto b { font-weight: 800; } .jy-disc { display: inline-flex; align-items: center; justify-content: center; background: var(--c); flex: none; } .jy-disc svg { display: block; } .jy-disc .f1, .jy-disc .f2, .jy-disc .f3, .jy-disc .f4 { fill: #fff; } .jy-disc .fw { fill: var(--c); } .jy-disc .st { fill: none; stroke: #fff; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .jy-disc .stw { fill: none; stroke: var(--c); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; } .jy-chip { display: inline-flex; align-items: center; justify-content: center; gap: 5px; font: 800 11px var(--sans); letter-spacing: .06em; text-transform: uppercase; padding: 4px 9px; border-radius: 6px; line-height: 1.15; } .jy-chip.above { background: var(--jy-above); color: #fff; } .jy-chip.below { background: var(--jy-below); color: #fff; } .jy-chip.level { background: var(--ink); color: #fff; } .jy-chip.nob, .jy-chip.none { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } /* the strip */ .jy-strip { display: flex; gap: 10px; align-items: stretch; } .jy-phase { min-width: 0; background: var(--card); border-radius: 14px; overflow: hidden; border: 2px solid var(--line); display: flex; flex-direction: column; } .jy-phase.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } .jy-band { display: block; background: var(--c); color: #fff; padding: 10px 12px 9px; position: relative; text-decoration: none; } .jy-band b { font: 700 19px var(--display); display: block; } .jy-band span { font-size: 12px; opacity: .92; } .jy-band i { position: absolute; right: 10px; top: 8px; font: 800 26px var(--display); font-style: normal; opacity: .35; } .jy-body { display: flex; gap: 4px; padding: 12px 6px 6px; flex: 1; } .jy-tiles { display: flex; gap: 4px; flex: 1; } .jy-grp { display: flex; flex-direction: column; min-width: 0; } .jy-grplab { font: 800 10px var(--sans); letter-spacing: .14em; color: var(--c); text-align: center; margin-bottom: 4px; } .jy-sep { width: 2px; background: var(--line); margin: 4px 2px; flex: none; } a.jy-tile { flex: 1; min-width: 0; text-align: center; border-radius: 10px; padding: 4px 2px 8px; color: var(--ink); text-decoration: none; } a.jy-tile:hover { box-shadow: inset 0 0 0 2px #B8B2A6; } /* hover: a light outline only */ a.jy-tile.on { background: var(--jy-soft); box-shadow: inset 0 0 0 3px var(--ink), inset 0 -8px 0 var(--c); } /* selected: thick dark frame and a thick bar */ a.jy-tile .jy-disc { margin: 0 auto 6px; } a.jy-tile .t { font: 600 11.5px/1.2 var(--sans); min-height: 28px; display: block; } a.jy-tile .n { font: 700 30px/1 var(--mono); display: block; margin: 3px 0 5px; } a.jy-tile .jy-chip { font-size: 9.5px; padding: 3px 5px; letter-spacing: .03em; max-width: 100%; } a.jy-foot { display: block; padding: 8px 12px 10px; font: 600 12.5px/1.35 var(--sans); border-top: 2px solid var(--line); color: var(--ink); text-decoration: none; } a.jy-foot b { font-weight: 800; } a.jy-ribbon { margin-top: 10px; display: flex; align-items: center; gap: 16px; background: var(--card); border: 2px solid var(--line); border-radius: 14px; padding: 10px 16px; position: relative; overflow: hidden; color: var(--ink); text-decoration: none; } a.jy-ribbon:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 12px; background: var(--jy-throughout); } a.jy-ribbon.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } a.jy-ribbon .lab { font: 800 11px var(--sans); letter-spacing: .14em; color: var(--jy-throughout); margin-left: 6px; } a.jy-ribbon b { font: 700 19px var(--display); } a.jy-ribbon .n { font: 700 30px var(--mono); margin-left: auto; } a.jy-ribbon .n small { font-size: 14px; } a.jy-ribbon .arrow { flex: 1; height: 4px; background: repeating-linear-gradient(90deg, var(--jy-throughout) 0 14px, transparent 14px 22px); } /* underneath */ .jy-detail { margin-top: 22px; background: var(--card); border-radius: 16px; border: 2px solid var(--line); padding: 22px 24px 26px; scroll-margin-top: 16px; } .jy-dhead { display: flex; gap: 16px; align-items: center; padding-bottom: 14px; border-bottom: 4px solid var(--c); } .jy-dhead h2 { font: 700 28px/1.1 var(--display); margin: 0; } .jy-dhead .sub { color: var(--dim); font-size: 14px; } .jy-finding { font: 500 19px/1.4 var(--display); margin: 16px 0 6px; max-width: 980px; } .jy-finding b { font-weight: 800; } .jy-rowgrp { font: 800 11px var(--sans); letter-spacing: .14em; margin: 18px 0 2px; color: var(--g, var(--c)); border-left: 10px solid var(--g, var(--ink)); padding-left: 10px; } a.jy-row { display: grid; grid-template-columns: 320px minmax(0, 1fr) 200px; gap: 18px; align-items: center; padding: 16px 6px 20px; border-bottom: 1px solid var(--line); border-radius: 10px; color: var(--ink); text-decoration: none; } a.jy-row:hover, a.jy-row.on { background: var(--jy-soft); } .jy-name { display: flex; gap: 12px; align-items: center; } .jy-name b { font: 700 17px var(--display); } .jy-src { display: inline-block; margin-left: 8px; font: 800 9.5px var(--sans); letter-spacing: .09em; padding: 2px 7px; border-radius: 5px; border: 1.5px solid var(--ink); vertical-align: 2px; } .jy-line { display: block; font-size: 12.5px; color: var(--dim); margin-top: 2px; } .jy-num { text-align: right; } .jy-num b { font: 700 30px var(--mono); display: block; line-height: 1; } .jy-num span { font-size: 12px; color: var(--dim); display: block; margin: 3px 0 6px; } .jy-num .jy-chip { display: inline-flex; color: #fff; margin: 0; } .jy-num .jy-chip.nob, .jy-num .jy-chip.none { color: var(--ink); } .jy-track { position: relative; height: 34px; background: var(--jy-track); border-radius: 6px; } .jy-track.none { background: none; font: 600 15px var(--sans); padding-top: 6px; height: auto; } .jy-sheets { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; padding-top: 0 !important; } .jy-sheet svg { width: 30px; height: 30px; display: block; } .jy-sheet path { stroke-width: 1.6; stroke-linejoin: round; } .jy-sheet text { font: 900 10px var(--sans); } .jy-sheet.open path { fill: var(--jy-below); stroke: var(--jy-below); } .jy-sheet.open text { fill: #fff; } .jy-sheet.done path { fill: #fff; stroke: var(--ink); } .jy-sheet.done text { fill: var(--ink); } .jy-sheetkey { margin-left: 10px; font: 600 13.5px var(--sans); } .jy-more-n { font: 700 13px var(--mono); margin-left: 4px; } .jy-bar { position: absolute; left: 0; top: 7px; height: 20px; border-radius: 4px; background: var(--c); } .jy-tick { position: absolute; top: -3px; width: 4px; height: 40px; background: var(--ink); border-radius: 2px; } .jy-ticklab { position: absolute; top: -21px; font: 700 11px var(--sans); transform: translateX(-50%); white-space: nowrap; } .jy-ax { position: absolute; bottom: -18px; font: 500 10.5px var(--mono); color: var(--dim); transform: translateX(-50%); } /* the moment at every community: one house each */ .jy-iso { margin-top: 18px; padding: 16px 18px; background: var(--jy-soft); border-radius: 12px; } .jy-iso h3 { font: 700 18px var(--display); margin: 0 0 4px; } .jy-iso p { margin: 0 0 12px; color: var(--dim); } .jy-iso p b { color: var(--ink); } .jy-houses { display: grid; grid-template-columns: repeat(auto-fill, minmax(118px, 1fr)); gap: 10px; } a.jy-house { text-align: center; background: var(--card); border-radius: 10px; padding: 10px 6px 9px; border: 2px solid var(--line); color: var(--ink); text-decoration: none; } a.jy-house:hover { border-color: var(--ink); } a.jy-house svg { width: 54px; height: 54px; display: block; margin: 0 auto 4px; } a.jy-house b { font: 700 14px var(--display); display: block; } a.jy-house .v { font: 700 20px var(--mono); display: block; } a.jy-house .jy-chip { margin-top: 5px; font-size: 9.5px; padding: 3px 6px; } a.jy-house.above svg .hb { fill: var(--jy-above); } a.jy-house.below svg .hb { fill: var(--jy-below); } a.jy-house.level svg .hb { fill: var(--ink); } a.jy-house.nob svg .hb, a.jy-house.none svg .hb { fill: #fff; stroke: var(--ink); stroke-width: 2.5; } a.jy-house.zero { border-color: var(--jy-below); border-width: 3px; } a.jy-house.me { box-shadow: 0 0 0 3px var(--ink); } a.jy-more { display: inline-block; margin-top: 14px; font: 700 14px var(--sans); color: var(--ink); } @media (max-width: 1100px) { .jy-strip { flex-wrap: wrap; } .jy-phase { flex: 1 1 100% !important; } a.jy-row { grid-template-columns: minmax(0, 1fr); } .jy-num { text-align: left; } } /* ══════════════════════════════════════════════════════════════════════════════ THE ROLL-UP'S FRONT PAGE — two views, each a bar that previews what it opens. ══════════════════════════════════════════════════════════════════════════ */ .rh-bars { display: flex; flex-direction: column; gap: 18px; margin-top: 10px; } a.jy-viewbar, a.rh-viewbar { display: grid; grid-template-columns: minmax(250px, 320px) minmax(0, 1fr) auto; gap: 24px; align-items: center; background: var(--card); border: 3px solid var(--ink); border-radius: 18px; padding: 22px 24px 22px 32px; color: var(--ink); text-decoration: none; position: relative; overflow: hidden; } a.jy-viewbar:before, a.rh-viewbar:before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 14px; } a.jy-viewbar:before { background: var(--jy-inquiry); } a.rh-viewbar:before { background: var(--rank-top); } a.jy-viewbar:hover, a.rh-viewbar:hover { box-shadow: 0 0 0 3px var(--ink); } .jy-vb-tag { display: inline-block; font: 800 11px var(--sans); letter-spacing: .14em; color: #fff; padding: 4px 9px; border-radius: 5px; background: var(--jy-inquiry); } .rh-tag { display: inline-block; font: 800 11px var(--sans); letter-spacing: .14em; color: #fff; padding: 4px 9px; border-radius: 5px; background: var(--rank-top); } .jy-vb-txt b, .rh-txt b { display: block; font: 700 24px/1.15 var(--display); margin: 8px 0 6px; } .jy-vb-txt > span:last-child, .rh-txt > span:last-child { font-size: 14px; color: var(--dim); line-height: 1.45; } .jy-vb-txt strong { color: var(--ink); } .jy-vb-m { display: flex; flex-direction: column; align-items: center; gap: 3px; } .jy-mini { font: 800 11px/1 var(--sans); width: 22px; text-align: center; padding: 3px 0; border-radius: 4px; } .jy-mini.above { background: var(--jy-above); color: #fff; } .jy-mini.below { background: var(--jy-below); color: #fff; } .jy-mini.level { background: var(--ink); color: #fff; } .jy-mini.nob, .jy-mini.none { box-shadow: inset 0 0 0 1.5px var(--ink); color: var(--ink); } .jy-vb-go { font: 800 16px var(--sans); color: #fff; padding: 14px 18px; border-radius: 10px; white-space: nowrap; background: var(--jy-inquiry); } .rh-go { font: 800 16px var(--sans); color: #fff; padding: 14px 18px; border-radius: 10px; white-space: nowrap; background: var(--rank-top); } .rh-preview { display: flex; gap: 26px; align-items: center; min-width: 0; } .rh-idx { flex: none; } .rh-idx .k { font: 700 48px/1 var(--mono); } .rh-idx .l { font: 800 12px var(--sans); letter-spacing: .1em; text-transform: uppercase; margin-top: 4px; } .rh-idx .n { font-size: 12.5px; color: var(--dim); max-width: 170px; } .rh-rows { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; } .rh-row { display: grid; grid-template-columns: 92px minmax(0, 1fr) 44px 46px; gap: 8px; align-items: center; font-size: 13px; } .rh-row .nm { font-weight: 700; } .rh-row .trk { height: 14px; background: var(--jy-track, #EFE9DC); border-radius: 3px; position: relative; overflow: hidden; } .rh-row .bar { position: absolute; left: 0; top: 0; bottom: 0; border-radius: 3px; } .rh-row.band-top .bar { background: var(--rank-top); } .rh-row.band-mid .bar { background: var(--rank-mid); } .rh-row.band-low .bar { background: var(--rank-low); } .rh-row .v { font: 700 13.5px var(--mono); text-align: right; } .rh-row .rank { font: 800 12px var(--sans); } @media (max-width: 1100px) { a.jy-viewbar, a.rh-viewbar { grid-template-columns: minmax(0, 1fr); } } /* The two views' own navigation: the way back to the front page, and a switch between them. */ .rv-nav { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; } a.rv-back { display: inline-flex; align-items: center; gap: 6px; font: 700 14.5px var(--sans); color: var(--ink); text-decoration: none; border: 2px solid var(--ink); border-radius: 999px; padding: 6px 14px; background: var(--card); } a.rv-back:hover { background: var(--ink); color: #fff; } a.rv-back.end { margin-top: 22px; } .rv-toggle { display: inline-flex; border: 2px solid var(--ink); border-radius: 999px; overflow: hidden; background: var(--card); } .rv-toggle a { font: 700 14px var(--sans); color: var(--ink); text-decoration: none; padding: 7px 16px; } .rv-toggle a + a { border-left: 2px solid var(--ink); } .rv-toggle a.on { background: var(--ink); color: #fff; } .rv-toggle a:not(.on):hover { background: var(--jy-soft, #FAF7F0); } /* ══════════════════════════════════════════════════════════════════════════════ THE BACK OF HOUSE, NEXT (stage 2 sample, 2026-10-03). The same five steps in both lines, each a thick block in its own colour, numbered and named. Pat is colour blind: the number and the name carry the meaning; the colour groups it. ══════════════════════════════════════════════════════════════════════════ */ body.adminview { --nx1: #5C2D88; --nx2: #0E6E8C; --nx3: #1F7A4D; --nx4: #A23B72; --nx5: #8A6400; } body.adminview .adminnav.nx { padding: 14px 10px 24px; } body.adminview .adminnav.nx a.nx-top { display: block; font: 700 15px var(--sans); color: var(--ink); text-decoration: none; padding: 8px 12px; border-radius: 8px; margin-bottom: 2px; } body.adminview .adminnav.nx a.nx-top.on, body.adminview .adminnav.nx a.nx-top:hover { background: var(--ink); color: #fff; } body.adminview .nx-line { font: 800 12px var(--sans); letter-spacing: .14em; color: var(--ink); margin: 20px 4px 8px; padding-bottom: 6px; border-bottom: 3px solid var(--ink); } body.adminview a.nx-step { display: grid; grid-template-columns: 34px minmax(0, 1fr); align-items: center; gap: 10px; text-decoration: none; color: var(--ink); border-radius: 9px; padding: 4px 8px 4px 4px; margin-bottom: 4px; border: 2px solid transparent; } body.adminview a.nx-step .nx-n { width: 34px; height: 34px; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center; font: 800 17px var(--display); color: #fff; background: var(--sc); } body.adminview a.nx-step .nx-l { font: 700 15px/1.2 var(--sans); } body.adminview a.nx-step:hover { border-color: var(--sc); } body.adminview a.nx-step.on { background: var(--sc); color: #fff; } body.adminview a.nx-step.on .nx-n { background: #fff; color: var(--sc); } body.adminview .s1 { --sc: var(--nx1); } body.adminview .s2 { --sc: var(--nx2); } body.adminview .s3 { --sc: var(--nx3); } body.adminview .s4 { --sc: var(--nx4); } body.adminview .s5 { --sc: var(--nx5); } body.adminview .nx-subs { margin: -2px 0 6px 44px; border-left: 4px solid var(--sc); padding-left: 8px; } body.adminview .nx-subs a { display: block; font: 600 14px var(--sans); color: var(--ink); text-decoration: none; padding: 4px 8px; border-radius: 6px; } body.adminview .nx-subs a.on { background: var(--sc); color: #fff; } body.adminview .nx-subs a:hover:not(.on) { text-decoration: underline; } body.adminview a.nx-portal { display: block; margin-top: 22px; padding: 10px 12px; border-radius: 10px; background: #1F7A4D; color: #fff; font: 800 15px var(--sans); text-decoration: none; } body.adminview a.nx-portal span { display: block; font: 500 12.5px var(--sans); opacity: .9; margin-top: 2px; } /* step 1 screens */ body.adminview .nx-client { display: flex; gap: 18px; align-items: center; background: var(--card); border: 2px solid var(--line); border-left: 14px solid var(--nx1); border-radius: 14px; padding: 16px 20px; margin: 4px 0 20px; } body.adminview .nx-client-mark img { height: 44px; display: block; } body.adminview .nx-client h2 { font: 700 24px var(--display); margin: 2px 0; } body.adminview .nx-k { font: 800 11px var(--sans); letter-spacing: .14em; color: var(--nx1); } body.adminview .nx-meta { font-size: 14px; color: var(--dim); } body.adminview .nx-meta b { color: var(--ink); } body.adminview .nx-h { font: 700 19px var(--display); margin: 22px 0 10px; } body.adminview table.nx-table { width: 100%; border-collapse: collapse; background: var(--card); border: 2px solid var(--line); border-radius: 12px; overflow: hidden; } body.adminview table.nx-table th { background: var(--ink); color: #fff; font: 700 12.5px var(--sans); text-align: left; padding: 9px 12px; } body.adminview table.nx-table td { padding: 9px 12px; border-bottom: 1px solid var(--line); font-size: 14px; vertical-align: top; } body.adminview table.nx-table .num { text-align: right; font-family: var(--mono); } body.adminview table.nx-table td.nm { font-weight: 700; } body.adminview table.nx-table td.care { white-space: nowrap; } body.adminview table.nx-table td.mono { font-family: var(--mono); font-weight: 600; } body.adminview table.nx-table.tight td { padding: 7px 10px; } body.adminview .nx-seg { display: inline-block; margin: 0 8px 4px 0; font-size: 13px; } body.adminview .nx-seg b { display: inline-block; background: var(--nx1); color: #fff; padding: 1px 6px; border-radius: 4px; margin-right: 4px; font-size: 11.5px; } body.adminview .nx-markets { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.adminview .nx-market-h { display: flex; justify-content: space-between; align-items: baseline; margin: 0 0 6px; } body.adminview .nx-market-h b { font: 700 16px var(--display); } body.adminview .nx-market-h span { font-size: 12.5px; color: var(--dim); } body.adminview .nx-role { display: inline-block; font: 800 10px var(--sans); letter-spacing: .08em; padding: 3px 7px; border-radius: 5px; white-space: nowrap; } body.adminview .nx-role.own { background: var(--nx1); color: #fff; } body.adminview .nx-role.comp { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--ink); } body.adminview .nx-state { display: inline-block; font: 800 10.5px var(--sans); letter-spacing: .08em; background: var(--nx3); color: #fff; padding: 3px 8px; border-radius: 5px; } body.adminview .nx-dim { color: var(--dim); font-style: italic; } body.adminview .nx-foot { font-size: 13.5px; color: var(--dim); margin-top: 12px; } @media (max-width: 1100px) { body.adminview .nx-markets { grid-template-columns: minmax(0, 1fr); } } body.adminview { --nx6: #0063B1; } body.adminview .s6 { --sc: var(--nx6); } body.adminview .srv { --sc: #16211B; } body.adminview .srv .nx-n { color: #F2C14E !important; } body.adminview a.nx-step.srv.on .nx-n { background: #fff; color: #A87A00 !important; } /* the tabs inside a step that holds several screens */ body.adminview .nx-tabs { display: flex; align-items: stretch; gap: 0; margin: 0 0 18px; border: 3px solid var(--sc); border-radius: 12px; overflow: hidden; background: var(--card); } body.adminview .nx-tabs-h { display: inline-flex; align-items: center; gap: 8px; background: var(--sc); color: #fff; font: 800 14px var(--sans); padding: 8px 14px; } body.adminview .nx-tabs-h .nx-n { display: inline-flex; width: 26px; height: 26px; border-radius: 6px; background: #fff; color: var(--sc); align-items: center; justify-content: center; font: 800 15px var(--display); } body.adminview .nx-tabs a { display: inline-flex; align-items: center; padding: 8px 18px; font: 700 15px var(--sans); color: var(--ink); text-decoration: none; border-left: 2px solid var(--line); } body.adminview .nx-tabs a.on { background: var(--ink); color: #fff; } body.adminview .nx-tabs a:hover:not(.on) { text-decoration: underline; } body.adminview .nx-hubs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.adminview a.nx-hub { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 2px solid var(--line); border-top: 10px solid var(--nx3); border-radius: 14px; padding: 16px 18px; color: var(--ink); text-decoration: none; } body.adminview a.nx-hub:hover { border-color: var(--nx3); } body.adminview a.nx-hub b { font: 700 20px var(--display); } body.adminview a.nx-hub span { font-size: 14px; color: var(--dim); } body.adminview a.nx-hub i { font: 800 14px var(--sans); font-style: normal; color: var(--nx3); margin-top: auto; } body.adminview .nx-holds { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; } body.adminview .nx-holds ul { margin: 6px 0 0; padding-left: 20px; } /* step 2 · design: the instruments on the left, the document itself on the right */ body.adminview .nx-design { display: grid; grid-template-columns: 330px minmax(0, 1fr); gap: 20px; align-items: start; } body.adminview .nx-insts { display: flex; flex-direction: column; gap: 8px; position: sticky; top: 12px; } body.adminview a.nx-inst { display: block; background: var(--card); border: 2px solid var(--line); border-left: 10px solid var(--nx2); border-radius: 12px; padding: 10px 14px; color: var(--ink); text-decoration: none; } body.adminview a.nx-inst:hover { border-color: var(--nx2); } body.adminview a.nx-inst.on { background: var(--nx2); border-color: var(--nx2); color: #fff; } body.adminview a.nx-inst b { display: block; font: 700 16px var(--display); } body.adminview a.nx-inst > span { display: block; font-size: 13px; opacity: .85; margin-top: 2px; } body.adminview .nx-inst-f { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 7px; } body.adminview .nx-inst-f i { font: 700 11.5px var(--sans); font-style: normal; padding: 2px 7px; border-radius: 5px; white-space: nowrap; background: var(--page); color: var(--ink); border: 1.5px solid var(--ink); } body.adminview a.nx-inst.on .nx-inst-f i { background: #fff; border-color: #fff; } body.adminview .nx-preview { background: #E4E8E4; border-radius: 14px; padding: 14px; min-width: 0; } body.adminview .nx-preview-h { background: var(--card); border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; border-left: 10px solid var(--nx2); } body.adminview .nx-preview-h b { display: block; font: 700 18px var(--display); } body.adminview .nx-preview-h span { font-size: 13.5px; color: var(--dim); } body.adminview img.nx-page { display: block; width: 100%; max-width: 860px; margin: 0 auto 14px; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); border-radius: 2px; } body.adminview iframe.nx-doc { display: block; width: 100%; max-width: 880px; height: 1100px; margin: 0 auto; border: 0; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.18); border-radius: 2px; } @media (max-width: 1100px) { body.adminview .nx-design { grid-template-columns: minmax(0, 1fr); } body.adminview .nx-insts { position: static; } } body.adminview .nx-insts-h { font: 800 11.5px var(--sans); letter-spacing: .12em; text-transform: uppercase; margin: 10px 2px 0; padding-bottom: 4px; border-bottom: 3px solid var(--nx2); } /* ══ step 3 · distribution & collection, scheduler, tracker (stage 4) ══════════════════ */ body.adminview .fw-state { display: inline-block; font: 800 11px var(--sans); letter-spacing: .07em; padding: 5px 10px; border-radius: 6px; white-space: nowrap; } body.adminview .fw-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 14px; } body.adminview .fw-leg { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; } body.adminview .fw-gridwrap { overflow-x: auto; background: var(--card); border: 2px solid var(--line); border-radius: 12px; } body.adminview table.fw-grid { border-collapse: separate; border-spacing: 4px; width: 100%; } body.adminview table.fw-grid th { font: 700 12px var(--sans); text-align: left; padding: 6px 4px; vertical-align: bottom; } body.adminview table.fw-grid td.nm { font: 700 14px var(--display); white-space: nowrap; padding-right: 8px; } body.adminview .fw-cell { display: block; border-radius: 7px; padding: 7px 8px; min-width: 96px; } body.adminview .fw-cell b { display: block; font: 700 13.5px var(--sans); } body.adminview .fw-cell i { display: block; font: 800 10.5px var(--sans); font-style: normal; letter-spacing: .05em; text-transform: uppercase; margin-top: 2px; } body.adminview .fw-cell.none { background: var(--card); box-shadow: inset 0 0 0 2px var(--line); color: var(--dim); font-size: 12px; } body.adminview .fw-count { display: inline-block; background: var(--ink); color: #fff; border-radius: 999px; padding: 1px 10px; font: 700 13px var(--sans); margin-left: 6px; } body.adminview .fw-rows { display: flex; flex-direction: column; gap: 8px; } body.adminview .fw-row { display: grid; grid-template-columns: minmax(0, 1fr) 180px 250px 180px; gap: 14px; align-items: center; background: var(--card); border: 2px solid var(--line); border-left: 14px solid; border-radius: 12px; padding: 12px 16px; } body.adminview .fw-row b { display: block; font: 700 16px var(--display); } body.adminview .fw-row span { font-size: 13.5px; color: var(--dim); } body.adminview .fw-row em { display: block; font: 700 13px var(--sans); font-style: normal; margin-top: 4px; color: var(--ink); } body.adminview .fw-who { font: 700 14.5px var(--sans); } body.adminview a.fw-as { font: 800 14px var(--sans); color: var(--nx3); text-decoration: none; white-space: nowrap; } body.adminview a.fw-as:hover { text-decoration: underline; } body.adminview .fw-done { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 14.5px; } body.adminview .fw-pack { background: var(--card); border: 2px solid var(--line); border-left: 14px solid var(--nx3); border-radius: 12px; padding: 14px 18px; margin-bottom: 16px; } body.adminview .fw-pack-h { font: 800 11.5px var(--sans); letter-spacing: .12em; color: var(--nx3); } body.adminview .fw-pack ul { margin: 8px 0 0; padding-left: 20px; font-size: 14.5px; } body.adminview .fw-pack li { margin: 3px 0; } body.adminview .fw-totals { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin-bottom: 16px; } body.adminview .fw-totals > div { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px 16px; } body.adminview .fw-totals b { display: block; font: 700 28px var(--mono); } body.adminview .fw-totals span { font-size: 13px; color: var(--dim); } body.adminview .fw-seg { display: grid; grid-template-columns: 34px 70px 70px minmax(80px, 1fr) 56px; gap: 8px; align-items: center; font-size: 13.5px; margin: 2px 0; } body.adminview .fw-ct { display: inline-block; background: var(--nx1); color: #fff; font: 800 11px var(--sans); border-radius: 4px; text-align: center; padding: 2px 0; } body.adminview .fw-bar { height: 12px; background: #EFE9DC; border-radius: 3px; overflow: hidden; } body.adminview .fw-bar i { display: block; height: 100%; background: var(--nx3); } body.adminview .fw-iss b { font: 700 16px var(--mono); } body.adminview a.fw-next { display: inline-block; margin-top: 16px; font: 800 15px var(--sans); color: #fff; background: var(--nx4); padding: 10px 16px; border-radius: 10px; text-decoration: none; } @media (max-width: 1100px) { body.adminview .fw-row { grid-template-columns: minmax(0, 1fr); } body.adminview .fw-totals { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* ══ step 5 · reports & deliverables; competitor validation (stage 5) ═════════════════════ */ body.adminview a.dl-back { display: inline-block; margin: 0 0 14px; font: 700 14.5px var(--sans); color: var(--ink); } body.adminview .dl-secs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; } body.adminview .dl-sec { background: var(--card); border: 2px solid var(--line); border-left: 12px solid var(--nx5); border-radius: 12px; padding: 12px 16px; } body.adminview .dl-sec-h { display: flex; align-items: center; gap: 10px; font: 700 16px var(--display); margin-bottom: 8px; } body.adminview .dl-n { display: inline-flex; width: 28px; height: 28px; border-radius: 6px; align-items: center; justify-content: center; background: var(--nx5); color: #fff; font: 800 14px var(--display); flex: none; } body.adminview .dl-file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 0; border-top: 1px solid var(--line); font-size: 14.5px; } body.adminview .dl-file a { font-weight: 700; color: var(--ink); } body.adminview .dl-st { font: 800 10.5px var(--sans); font-style: normal; letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; white-space: nowrap; } body.adminview .dl-st.ok { background: #A6DBA0; color: #16211B; } body.adminview .dl-st.held { background: #8E1530; color: #fff; } body.adminview .dl-st.none { background: var(--card); color: var(--ink); box-shadow: inset 0 0 0 2px var(--line); } body.adminview .dl-pill { display: inline-block; font: 800 11px var(--sans); letter-spacing: .06em; padding: 4px 9px; border-radius: 6px; } body.adminview .dl-pill.ok { background: #A6DBA0; color: #16211B; } body.adminview .dl-pill.held { background: #8E1530; color: #fff; } body.adminview .dl-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } body.adminview a.dl-card { display: flex; flex-direction: column; gap: 6px; background: var(--card); border: 2px solid var(--line); border-top: 10px solid var(--nx5); border-radius: 12px; padding: 14px; color: var(--ink); text-decoration: none; } body.adminview a.dl-card:hover { border-color: var(--nx5); } body.adminview a.dl-card img { width: 100%; max-height: 300px; object-fit: cover; object-position: top; border: 1px solid var(--line); border-radius: 4px; } body.adminview .dl-icon { display: flex; align-items: center; justify-content: center; height: 120px; border-radius: 6px; background: var(--page); font: 800 28px var(--display); color: var(--nx5); border: 2px dashed var(--line); } body.adminview a.dl-card b { font: 700 16px var(--display); } body.adminview a.dl-card span { font-size: 13px; color: var(--dim); } body.adminview table.cv td.cv-q { font-weight: 600; width: 34%; } body.adminview table.cv td.cv-a { width: 28%; font-weight: 700; } body.adminview table.cv tr.cv-h td { background: var(--nx1); color: #fff; font: 800 12px var(--sans); letter-spacing: .08em; } body.adminview select.cv-src { font: 600 13px var(--sans); padding: 4px 6px; border: 2px solid var(--ink); border-radius: 6px; margin-right: 8px; } body.adminview .cv-st { font: 800 10.5px var(--sans); letter-spacing: .06em; padding: 3px 8px; border-radius: 5px; background: #F5A623; color: #16211B; white-space: nowrap; } body.adminview .cv-sources { margin-top: 16px; background: var(--card); border: 2px solid var(--line); border-left: 14px solid var(--nx4); border-radius: 12px; padding: 14px 18px; font-size: 14.5px; } body.adminview .cv-sources ul { margin: 4px 0 10px; padding-left: 20px; } @media (max-width: 1100px) { body.adminview .dl-secs, body.adminview .dl-cards { grid-template-columns: minmax(0, 1fr); } } /* rebuild phase 1: a seventh step. #7A1F1F measured against the six step colours under protanopia and deuteranopia (Viénot): closest 19.3 in Lab, wider than any pair already in the menu (10.1). */ body.adminview { --nx7: #7A1F1F; } body.adminview .s7 { --sc: var(--nx7); } /* rebuild phase 2: distribution by method. Isis's return-rate table, then one card per method, each headed by a solid band carrying the method's name in words and whether it is in the platform. */ body.adminview .dm-wrap { overflow-x: auto; border-radius: 12px; } body.adminview table.dm-rr { min-width: 1180px; } body.adminview table.dm-rr th { font-size: 11.5px; line-height: 1.2; vertical-align: bottom; } body.adminview table.dm-rr tr.grp th { text-align: center; letter-spacing: .1em; border-left: 3px solid #fff; } body.adminview table.dm-rr td { padding: 7px 8px; font-size: 13.5px; } body.adminview table.dm-rr td.b { font-weight: 800; } body.adminview table.dm-rr td.rate { font-weight: 800; background: #EEF3EA; } body.adminview table.dm-rr td.na { text-align: center; color: var(--dim); font-style: italic; } body.adminview table.dm-rr tbody tr { cursor: pointer; } body.adminview table.dm-rr tbody tr:hover td { background: #F4F1EA; } body.adminview table.dm-rr tbody tr.on td { background: #FFF4D6; } body.adminview table.dm-rr tfoot td { font-weight: 800; border-top: 3px solid var(--ink); background: var(--card); } body.adminview .dm-pick { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 14px; } body.adminview .dm-pick a { font: 700 13.5px var(--sans); padding: 6px 12px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--card); } body.adminview .dm-pick a.on { background: var(--ink); color: #fff; } body.adminview .dm-methods { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; } body.adminview .dm-card { background: var(--card); border: 2px solid var(--line); border-radius: 14px; overflow: hidden; padding: 0 0 14px; } body.adminview .dm-card > ul, body.adminview .dm-card > p, body.adminview .dm-card > .dm-mail, body.adminview .dm-card > .dm-phone, body.adminview .dm-card > a.dm-go { margin-left: 16px; margin-right: 16px; } body.adminview .dm-card ul { padding-left: 18px; font-size: 14px; } body.adminview .dm-band { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 2px 12px; align-items: baseline; color: #fff; padding: 12px 16px; } body.adminview .dm-band b { font: 800 18px var(--display); letter-spacing: .06em; } body.adminview .dm-band span { font: 600 14px var(--sans); } body.adminview .dm-band i { grid-column: 1 / -1; font: 800 11px var(--sans); letter-spacing: .1em; font-style: normal; justify-self: start; background: #fff; color: #16211B; padding: 3px 8px; border-radius: 5px; margin-top: 4px; } body.adminview .dm-funnel { display: flex; gap: 0; margin: 14px 16px 10px; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; } body.adminview .dm-funnel div { flex: 1; padding: 8px 10px; border-left: 2px solid var(--line); } body.adminview .dm-funnel div:first-child { border-left: 0; } body.adminview .dm-funnel b { display: block; font: 800 22px var(--display); } body.adminview .dm-funnel span { font-size: 12.5px; color: var(--dim); } body.adminview .dm-funnel em { display: block; font: 700 12px var(--mono); font-style: normal; } body.adminview .dm-link { display: inline-block; font: 600 12.5px var(--mono); background: #F2EBD9; border: 2px solid #8A6400; padding: 1px 7px; border-radius: 6px; color: #16211B; } body.adminview .dm-note { font-size: 13px; color: var(--dim); } body.adminview a.dm-go { display: inline-block; font: 700 14px var(--sans); color: var(--ink); } body.adminview .dm-mail { border: 2px solid var(--line); border-radius: 10px; overflow: hidden; font-size: 14px; } body.adminview .dm-mail-h { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 3px 10px; background: #F4F1EA; padding: 8px 12px; } body.adminview .dm-mail-h span { color: var(--dim); font-size: 12.5px; } body.adminview .dm-mail-b { padding: 10px 14px; } body.adminview .dm-mail-b img { height: 34px; display: block; margin-bottom: 6px; } body.adminview .dm-btn { display: inline-block; background: #0063B1; color: #fff; font-weight: 700; padding: 8px 16px; border-radius: 8px; } body.adminview .dm-phone { background: #E9ECEF; border-radius: 22px; padding: 18px 14px; max-width: 340px; } body.adminview .dm-bubble { background: #fff; border-radius: 16px 16px 16px 4px; padding: 10px 12px; font-size: 14px; line-height: 1.4; box-shadow: 0 1px 2px rgba(0,0,0,.12); } @media (max-width: 1100px) { body.adminview .dm-methods { grid-template-columns: minmax(0, 1fr); } } body.adminview table.dm-rr .st0, body.adminview table.dm-rr .st1 { position: sticky; z-index: 1; } body.adminview table.dm-rr .st0 { left: 0; width: 64px; min-width: 64px; } body.adminview table.dm-rr .st1 { left: 64px; min-width: 150px; box-shadow: 3px 0 0 var(--line); } body.adminview table.dm-rr td.st0, body.adminview table.dm-rr td.st1 { background: var(--card); } body.adminview table.dm-rr th.st0, body.adminview table.dm-rr th.st1 { background: var(--ink); } /* rebuild phase 3: the scheduler on Pat's master tracker. Sections are full-width bands; every state is a word inside a solid block; element cells are thick fills, not dots. */ body.adminview .sm-legend { display: grid; gap: 8px; margin: 0 0 14px; } body.adminview .sm-legend > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; } body.adminview .sm-legend > div > b { font: 800 11.5px var(--sans); letter-spacing: .12em; min-width: 150px; } body.adminview .sm-leg b { font: 800 14px var(--mono); } body.adminview .sm-st { display: inline-block; font: 800 11px/1.25 var(--sans); letter-spacing: .04em; padding: 5px 8px; border-radius: 6px; } body.adminview .sm-key { font: 700 12.5px var(--sans); padding: 5px 10px; border-radius: 6px; border: 2px solid var(--line); } body.adminview .sm-key.done, body.adminview td.sm-el.done { background: #A6DBA0; color: #16211B; } body.adminview .sm-key.todo, body.adminview td.sm-el.todo { background: #FFF07A; color: #16211B; } body.adminview .sm-key.pale, body.adminview td.sm-el.pale { background: #F4F1EA; color: #6B6B6B; } body.adminview .sm-key.none, body.adminview td.sm-el.none { background: #C9CDD2; color: #3A3F45; } body.adminview .sm-wrap { overflow-x: auto; border: 2px solid var(--line); border-radius: 12px; } body.adminview table.sm-grid { border-collapse: collapse; min-width: 1700px; background: var(--card); font-size: 13px; } body.adminview table.sm-grid th { background: var(--ink); color: #fff; font: 700 11.5px/1.2 var(--sans); text-align: left; padding: 8px; vertical-align: bottom; position: sticky; top: 0; } body.adminview table.sm-grid th.el { width: 84px; text-align: center; } body.adminview table.sm-grid td { padding: 7px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; } body.adminview table.sm-grid td.nm { font-weight: 700; white-space: nowrap; } body.adminview table.sm-grid td.mono { font-family: var(--mono); font-weight: 600; } body.adminview table.sm-grid td.sm-notes { min-width: 220px; color: var(--ink); } body.adminview table.sm-grid td.sm-el { text-align: center; border-left: 2px solid #fff; font-size: 11.5px; } body.adminview table.sm-grid td.sm-el b { display: block; font-size: 13px; } body.adminview table.sm-grid td.sm-el span { display: block; font-size: 10.5px; } body.adminview table.sm-grid tr.sm-band td { background: #33302B; color: #fff; font: 800 13px var(--sans); letter-spacing: .04em; padding: 10px 12px; } body.adminview table.sm-grid td { white-space: nowrap; } body.adminview table.sm-grid td.sm-notes { white-space: normal; } body.adminview table.sm-grid .pin { position: sticky; left: 0; z-index: 1; background: var(--card); box-shadow: 3px 0 0 var(--line); } body.adminview table.sm-grid th.pin { background: var(--ink); z-index: 2; } body.adminview table.sm-grid tr.sm-band td { position: sticky; left: 0; } /* the campaign view */ body.adminview .cp-own { display: inline-block; color: #fff; font: 800 11px var(--sans); letter-spacing: .08em; padding: 4px 8px; border-radius: 6px; } body.adminview .cp-done { display: inline-block; background: #A6DBA0; color: #16211B; font: 800 11px var(--sans); padding: 4px 8px; border-radius: 6px; } body.adminview .cp-next { display: inline-block; background: #FFF07A; color: #16211B; font: 800 11px var(--sans); padding: 4px 8px; border-radius: 6px; } body.adminview table.cp-wb td.mono { white-space: nowrap; } body.adminview table.cp-q { min-width: 980px; } body.adminview table.nx-table tfoot td { font-weight: 800; border-top: 3px solid var(--ink); } body.adminview .cp-done, body.adminview .cp-next, body.adminview .cp-own { white-space: nowrap; } /* The client portal's controls, under Halden's mark on one row (2026-10-05). */ .operator .opctl { display: flex; align-items: center; justify-content: flex-end; flex-wrap: wrap; gap: 8px; margin-top: 6px; } .operator .opctl .viewswitch, .operator .opctl .langtoggle { margin-left: 0; } .operator .opctl .viewswitch a { padding: 5px 11px; font-size: 12.5px; } .operator .opctl .langtoggle a { padding: 5px 10px; } .operator .opctl .sessionbar { margin-top: 0; } .operator .opctl .sessionbar .who { max-width: 18ch; } @media (max-width: 760px) { .operator .opctl { justify-content: flex-start; } } /* The way back (2026-10-07): a solid button at the top of the page, naming where it goes. */ a.backbar { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 14px; padding: 7px 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--card); color: var(--ink); font: 800 13.5px var(--sans); text-decoration: none; } a.backbar:hover { background: var(--ink); color: #fff; } a.backbar[hidden] { display: none; } .cpick { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 16px; } .cpick a { font: 700 13px var(--sans); padding: 6px 12px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--card); } .cpick a.on { background: var(--ink); color: #fff; } /* The unresolved-issue sheet on Greenhouse's real form (2026-10-07). The entries are plain lettering in pen-blue, sized to the form so they sit in its boxes at any width; no script face anywhere. */ .rf-grid { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(260px, .75fr); gap: 20px; align-items: start; } .rf-sheet { position: relative; container-type: inline-size; background: #fff; border: 2px solid var(--line); border-radius: 10px; overflow: hidden; box-shadow: 0 2px 10px rgba(0,0,0,.08); } .rf-sheet img { display: block; width: 100%; height: auto; } .rf-v { position: absolute; transform: translateY(-50%); color: #1B3A78; font: 600 2.05cqw/1 Arial, Helvetica, sans-serif; white-space: nowrap; } .rf-v.rf-c { font-size: 1.8cqw; } .rf-dot { position: absolute; width: 1.7cqw; height: 1.7cqw; border-radius: 50%; background: #1B3A78; transform: translate(-50%, -50%); } .rf-read { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 14px 16px; position: sticky; top: 12px; } .rf-h { font: 800 11px var(--sans); letter-spacing: .12em; color: var(--dim); margin-bottom: 8px; } .rf-read dl { margin: 0; } .rf-read dt { font: 700 12px var(--sans); color: var(--dim); margin-top: 10px; } .rf-read dd { margin: 2px 0 0; font: 600 15px var(--sans); color: var(--ink); } .rf-read dd.rf-comment { font-weight: 500; line-height: 1.45; } .rf-state { display: inline-block; margin-top: 14px; font: 800 11.5px var(--sans); letter-spacing: .06em; padding: 5px 10px; border-radius: 6px; } .rf-state.done { background: #A6DBA0; color: #16211B; } .rf-state.open { background: #FFF07A; color: #16211B; } @media (max-width: 900px) { .rf-grid { grid-template-columns: minmax(0, 1fr); } .rf-read { position: static; } } /* the client book (2026-10-07) */ body.adminview .cb-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 4px 0 18px; } body.adminview a.cb-card { display: grid; gap: 4px; padding: 12px 14px; background: var(--card); border: 2px solid var(--line); border-left: 10px solid var(--cc); border-radius: 12px; text-decoration: none; color: var(--ink); } body.adminview a.cb-card img { height: 40px; width: auto; max-width: 100%; object-fit: contain; object-position: left center; } body.adminview a.cb-card.on { border-color: var(--ink); box-shadow: 0 0 0 2px var(--ink); } body.adminview .cb-n { font: 700 14.5px var(--sans); } body.adminview .cb-m { font-size: 12.5px; color: var(--dim); } body.adminview .cb-head { display: flex; gap: 18px; align-items: center; background: var(--card); border: 2px solid var(--line); border-left: 14px solid var(--cc); border-radius: 14px; padding: 14px 18px; margin-bottom: 8px; } body.adminview .cb-head img { height: 56px; width: auto; } body.adminview .cb-head h2 { font: 700 22px var(--display); margin: 2px 0 6px; } body.adminview .cb-svc { display: flex; flex-wrap: wrap; gap: 6px; } body.adminview .cb-svc span { font: 700 11.5px var(--sans); padding: 3px 8px; border-radius: 6px; background: #EFEDE6; } body.adminview .cb-legend { display: flex; flex-wrap: wrap; gap: 14px; margin: 0 0 10px; font-size: 13px; } body.adminview .cb-reach { display: inline-block; min-width: 56px; text-align: center; font: 800 10.5px var(--sans); letter-spacing: .06em; padding: 5px 6px; border-radius: 5px; } body.adminview .cb-wrap { overflow-x: auto; } body.adminview table.cb-people { min-width: 1250px; } body.adminview table.cb-people th.cb-mod { font-size: 11px; text-align: center; width: 76px; } body.adminview table.cb-people td.cb-ac { text-align: center; padding: 6px 4px; } body.adminview .cb-roles { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.adminview .cb-role { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px 14px; display: grid; gap: 4px; font-size: 13.5px; } body.adminview .cb-role b { font: 700 15px var(--sans); } body.adminview .cb-role-n { font: 700 12px var(--mono); color: var(--dim); } @media (max-width: 1100px) { body.adminview .cb-strip, body.adminview .cb-roles { grid-template-columns: minmax(0, 1fr); } } body.adminview .cb-status { display: inline-block; font: 800 10.5px var(--sans); letter-spacing: .06em; padding: 4px 8px; border-radius: 5px; vertical-align: middle; justify-self: start; } body.adminview .cb-status.on { background: #1F7A4D; color: #fff; } body.adminview .cb-status.off { background: #8B939E; color: #16211B; } /* the survey designer (2026-10-07) */ body.adminview .dz-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; background: var(--card); border: 2px solid var(--line); border-left: 12px solid var(--nx2); border-radius: 12px; padding: 10px 14px; } body.adminview .dz-who { display: flex; align-items: center; gap: 10px; } body.adminview .dz-who img { height: 34px; } body.adminview .dz-who b { display: block; font: 700 15px var(--sans); } body.adminview .dz-who span { font-size: 13px; color: var(--dim); } body.adminview .dz-state { font: 800 11px var(--sans); letter-spacing: .08em; padding: 6px 10px; border-radius: 6px; cursor: default; } body.adminview .dz-state.draft { background: #FFF07A; color: #16211B; } body.adminview .dz-state.committed { background: #1F7A4D; color: #fff; cursor: pointer; } body.adminview .dz-acts { margin-left: auto; display: flex; flex-wrap: wrap; gap: 8px; } body.adminview .dz-btn { font: 700 13.5px var(--sans); padding: 8px 14px; border-radius: 9px; border: 2px solid var(--ink); background: var(--card); color: var(--ink); cursor: pointer; } body.adminview .dz-btn:hover:not(:disabled) { background: var(--ink); color: #fff; } body.adminview .dz-btn.primary { background: var(--nx2); border-color: var(--nx2); color: #fff; } body.adminview .dz-btn.commit { background: #1F7A4D; border-color: #1F7A4D; color: #fff; } body.adminview .dz-btn.ghost { border-color: var(--line); color: var(--dim); } body.adminview .dz-btn.small { padding: 5px 10px; font-size: 12.5px; } body.adminview .dz-btn:disabled { opacity: .45; cursor: default; } body.adminview label.dz-btn input { display: none; } body.adminview .dz-kinds { display: flex; gap: 6px; margin: 12px 0 8px; flex-wrap: wrap; } body.adminview .dz-kinds a { font: 700 13px var(--sans); padding: 6px 12px; border-radius: 8px; border: 2px solid var(--ink); color: var(--ink); text-decoration: none; background: var(--card); } body.adminview .dz-kinds a.on { background: var(--ink); color: #fff; } body.adminview .dz-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 6px 0 14px; font-size: 13.5px; position: relative; } body.adminview .dz-sum span { padding: 5px 10px; border-radius: 7px; background: #EFEDE6; } body.adminview .dz-sum .k.kept { background: #A6DBA0; } body.adminview .dz-sum .k.reworded { background: #FFF07A; } body.adminview .dz-sum .k.new { background: #1F5FAF; color: #fff; } body.adminview .dz-sum .src { background: none; color: var(--dim); } body.adminview .dz-sum[data-flash]::after { content: attr(data-flash); position: absolute; right: 0; top: -2px; background: var(--ink); color: #fff; font: 700 12.5px var(--sans); padding: 6px 12px; border-radius: 8px; } body.adminview .dz-grid { display: grid; grid-template-columns: 210px minmax(0, 1fr) 300px; gap: 14px; align-items: start; } body.adminview .dz-secs, body.adminview .dz-prev { position: sticky; top: 12px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 12px; } body.adminview .dz-h { font: 800 11px var(--sans); letter-spacing: .12em; color: var(--dim); margin-bottom: 8px; } body.adminview .dz-secs ol { list-style: none; margin: 0 0 10px; padding: 0; } body.adminview .dz-secs li { display: flex; justify-content: space-between; gap: 6px; padding: 5px 6px; border-radius: 6px; font-size: 13px; } body.adminview .dz-secs li.on { background: var(--ink); } body.adminview .dz-secs li.on a, body.adminview .dz-secs li.on i { color: #fff; } body.adminview .dz-secs li a { color: var(--ink); text-decoration: none; font-weight: 600; } body.adminview .dz-secs li i { font: 700 12px var(--mono); font-style: normal; color: var(--dim); } body.adminview .dz-sec { background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 10px 12px 12px; margin-bottom: 14px; } body.adminview .dz-sec header { display: flex; align-items: center; gap: 8px; margin-bottom: 8px; } body.adminview .dz-secname { flex: 1; font: 700 17px var(--display); border: 0; border-bottom: 2px dashed var(--line); background: none; padding: 4px 2px; } body.adminview .dz-tools button { border: 2px solid var(--line); background: var(--card); border-radius: 6px; font: 700 12px var(--sans); padding: 2px 7px; cursor: pointer; margin-left: 3px; } body.adminview .dz-tools button:hover { border-color: var(--ink); } body.adminview .dz-q { border: 2px solid var(--line); border-radius: 10px; padding: 8px 10px; margin: 8px 0; cursor: pointer; background: #FCFBF8; } body.adminview .dz-q.on { border-color: var(--nx2); box-shadow: 0 0 0 2px var(--nx2); background: #fff; } body.adminview .dz-q.hidden { opacity: .55; } body.adminview .dz-qhead { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; } body.adminview .dz-qhead .dz-tools { margin-left: auto; } body.adminview .dz-n { font: 800 13px var(--mono); width: 26px; } body.adminview .dz-id { font: 800 10.5px var(--mono); letter-spacing: .04em; padding: 3px 8px; border-radius: 5px; } body.adminview .dz-id.kept { background: #A6DBA0; color: #16211B; } body.adminview .dz-id.reworded { background: #FFF07A; color: #16211B; } body.adminview .dz-id.new { background: #1F5FAF; color: #fff; } body.adminview .dz-q textarea { width: 100%; font: 500 14.5px var(--sans); border: 1.5px solid var(--line); border-radius: 7px; padding: 6px 8px; resize: vertical; background: #fff; } body.adminview .dz-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 6px; } body.adminview .dz-row select { font: 600 13px var(--sans); padding: 4px 6px; border-radius: 6px; border: 1.5px solid var(--line); } body.adminview .dz-tog { font-size: 13px; display: inline-flex; gap: 4px; align-items: center; } body.adminview .dz-opts { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; } body.adminview .dz-opt { font-size: 13px; background: #EFEDE6; padding: 3px 4px 3px 9px; border-radius: 6px; display: inline-flex; gap: 4px; align-items: center; } body.adminview .dz-opt button { border: 0; background: none; cursor: pointer; font-size: 11px; } body.adminview .dz-optnew { font-size: 13px; padding: 3px 8px; border: 1.5px dashed var(--line); border-radius: 6px; min-width: 170px; } body.adminview .dz-add { border: 2px dashed var(--line); background: none; border-radius: 9px; width: 100%; padding: 7px; font: 700 13px var(--sans); cursor: pointer; color: var(--ink); } body.adminview .dz-end { text-align: center; } body.adminview .dz-paper { background: #fff; border: 1px solid #D8D6CF; padding: 14px; font-family: Arial, Helvetica, sans-serif; } body.adminview .dz-psec { font-weight: 700; font-size: 13px; border-bottom: 2px solid #222; padding-bottom: 4px; margin-bottom: 10px; } body.adminview .dz-pq { font-size: 14px; margin: 0 0 10px; } body.adminview .dz-pq em { color: #777; } body.adminview .dz-scale, body.adminview .dz-nps, body.adminview .dz-choices { display: flex; flex-wrap: wrap; gap: 8px; } body.adminview .dz-scale span { flex: 1; min-width: 44px; text-align: center; font-size: 10.5px; display: grid; justify-items: center; gap: 4px; } body.adminview .dz-nps span { width: 22px; text-align: center; font-size: 11px; display: grid; justify-items: center; gap: 3px; } body.adminview .dz-choices span { width: 100%; font-size: 13px; display: flex; gap: 8px; align-items: center; } body.adminview .dz-paper i { display: inline-block; width: 14px; height: 14px; border: 1.5px solid #333; border-radius: 50%; } body.adminview .dz-paper i.sq { border-radius: 2px; } body.adminview .dz-lines i { display: block; width: 100%; height: 22px; border: 0; border-bottom: 1px solid #999; border-radius: 0; } body.adminview .dz-dim { color: var(--dim); font-size: 12.5px; } body.adminview .dz-modal { position: fixed; inset: 0; background: rgba(20,24,22,.45); display: flex; align-items: center; justify-content: center; z-index: 50; } body.adminview .dz-modal[hidden] { display: none; } body.adminview .dz-dialog { background: var(--card); border-radius: 14px; padding: 18px 22px; width: min(560px, 92vw); max-height: 86vh; overflow: auto; box-shadow: 0 10px 40px rgba(0,0,0,.3); } body.adminview .dz-dialog h3 { font: 700 18px var(--display); margin: 0 0 10px; } body.adminview .dz-steps { padding-left: 20px; } body.adminview .dz-steps li { margin: 4px 0; } body.adminview .dz-steps li.on::after { content: " …"; } body.adminview .dz-steps.done li::marker { content: "✔ "; } body.adminview .dz-found { columns: 2; font-size: 13px; padding-left: 18px; } body.adminview .dz-mbtns { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; } @media (max-width: 1250px) { body.adminview .dz-grid { grid-template-columns: minmax(0, 1fr); } body.adminview .dz-secs, body.adminview .dz-prev { position: static; } } .jy-keytick { display: inline-block; width: 4px; height: 18px; background: #16211B; vertical-align: middle; margin-right: 4px; border-radius: 1px; } /* the designer's paper preview, laid out as the printed survey (2026-10-07) */ body.adminview .dz-grid { grid-template-columns: 200px minmax(0, 1fr) 420px; } body.adminview table.dz-ptab { width: 100%; border-collapse: collapse; table-layout: fixed; font-family: Arial, Helvetica, sans-serif; } body.adminview table.dz-ptab th { font-size: 10.5px; font-weight: 700; text-align: center; vertical-align: bottom; padding: 0 2px 6px; line-height: 1.2; } body.adminview table.dz-ptab th.qcol, body.adminview table.dz-ptab td.qcol { width: 38%; text-align: left; } body.adminview table.dz-ptab td { text-align: center; padding: 8px 2px; border-top: 1px solid #C9C9C9; border-bottom: 1px solid #C9C9C9; font-size: 13px; } body.adminview table.dz-ptab td.qcol { padding-right: 8px; } body.adminview table.dz-ptab i { display: inline-block; width: 16px; height: 16px; border: 1.5px solid #333; border-radius: 3px; } body.adminview table.dz-ptab.nps td { border: 0; padding: 4px 0; font-size: 11px; } body.adminview table.dz-ptab.nps td span { display: block; margin-top: 3px; } body.adminview .dz-grid { grid-template-columns: 190px minmax(0, 1fr) 470px; } body.adminview table.dz-ptab th.qcol, body.adminview table.dz-ptab td.qcol { width: 30%; } body.adminview table.dz-ptab th { font-size: 10px; padding: 0 3px 6px; overflow-wrap: anywhere; } /* the full data set sheet (2026-10-07) */ body.adminview .dz-kinds a i { font: 700 11px var(--mono); font-style: normal; opacity: .75; margin-left: 4px; } body.adminview .ds-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 8px; } body.adminview .ds-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; } body.adminview .ds-filters .cpick { margin: 0; } body.adminview .ds-filters .cpick a { cursor: pointer; } body.adminview .ds-filters select, body.adminview .ds-search { font: 600 13px var(--sans); padding: 6px 8px; border: 2px solid var(--ink); border-radius: 8px; background: var(--card); } body.adminview .ds-search { min-width: 200px; } body.adminview .ds-count { font: 700 13px var(--mono); margin-left: auto; } body.adminview .ds-legend { display: flex; flex-wrap: wrap; gap: 10px; font-size: 12.5px; margin: 0 0 8px; } body.adminview .ds-legend b { display: inline-block; min-width: 20px; text-align: center; background: var(--ink); color: #fff; border-radius: 4px; padding: 1px 4px; font: 700 11.5px var(--mono); } body.adminview .ds-wrap { overflow: auto; max-height: 72vh; border: 2px solid var(--line); border-radius: 10px; background: #fff; } body.adminview table.ds-t { border-collapse: separate; border-spacing: 0; font-size: 12.5px; } body.adminview table.ds-t th, body.adminview table.ds-t td { border-right: 1px solid #E3E1DA; border-bottom: 1px solid #E3E1DA; padding: 4px 7px; white-space: nowrap; } body.adminview table.ds-t thead th { position: sticky; top: 0; background: #F1EFE8; z-index: 2; font: 700 11.5px var(--sans); text-align: left; } body.adminview table.ds-t thead tr.sec th { top: 0; background: var(--ink); color: #fff; font-size: 10.5px; letter-spacing: .04em; } body.adminview table.ds-t thead tr:nth-child(2) th { top: 24px; } body.adminview table.ds-t thead tr.tot td { position: sticky; top: 72px; background: #FFF7D6; font-weight: 800; z-index: 2; } body.adminview table.ds-t th.q span { display: block; font: 700 11px var(--mono); } body.adminview table.ds-t th.q i { display: block; font: 500 10.5px var(--sans); font-style: normal; max-width: 120px; overflow: hidden; text-overflow: ellipsis; color: var(--dim); } body.adminview table.ds-t .pin { position: sticky; left: 0; background: #fff; z-index: 1; } body.adminview table.ds-t thead .pin { z-index: 3; background: #F1EFE8; } body.adminview table.ds-t tbody tr { cursor: pointer; } body.adminview table.ds-t tbody tr:hover td { background: #F4F1EA; } body.adminview table.ds-t td.v { text-align: center; font: 600 12px var(--mono); } body.adminview table.ds-t td.num { text-align: right; font-family: var(--mono); } body.adminview table.ds-t td.wide { white-space: normal; min-width: 260px; } body.adminview table.ds-t td.cm { text-align: center; } body.adminview .ds-drawer { position: fixed; top: 0; right: 0; bottom: 0; width: min(520px, 92vw); background: var(--card); border-left: 3px solid var(--ink); box-shadow: -8px 0 30px rgba(0,0,0,.18); z-index: 60; overflow: auto; padding: 16px 18px; } body.adminview .ds-drawer[hidden] { display: none; } body.adminview .ds-dhead { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 8px; } body.adminview .ds-dhead b { font: 700 15px var(--sans); } body.adminview .ds-drawer h4 { font: 800 11.5px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin: 14px 0 6px; color: var(--dim); } body.adminview .ds-a { display: grid; grid-template-columns: 62px minmax(0, 1fr) auto; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--line); font-size: 13px; } body.adminview .ds-a b { white-space: nowrap; } body.adminview .ds-c { font-size: 14px; line-height: 1.45; } body.adminview .ds-meta { color: var(--dim); font-size: 13px; } /* The whole header block sticks as one, so the section, question and mean rows never overlap the data. */ body.adminview table.ds-t thead { position: sticky; top: 0; z-index: 3; } body.adminview table.ds-t thead th, body.adminview table.ds-t thead tr.tot td, body.adminview table.ds-t thead tr:nth-child(2) th { position: static; } body.adminview table.ds-t thead .pin { position: sticky; left: 0; } body.adminview table.ds-t thead tr.tot td { background: #FFF7D6; } body.adminview .ds-empty { padding: 22px; font: 600 14px var(--sans); color: var(--dim); } /* the designer's three ways, Claude's panel, the drop zone, dragging (2026-10-07) */ body.adminview .dz-ways { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; margin: 4px 0 10px; } body.adminview .dz-way { text-align: left; display: grid; gap: 4px; padding: 12px 14px; border-radius: 12px; border: 2px solid var(--line); background: var(--card); cursor: pointer; color: var(--ink); } body.adminview .dz-way b { font: 700 15px var(--sans); } body.adminview .dz-way span { font-size: 12.5px; color: var(--dim); } body.adminview .dz-way.on { border-color: var(--nx2); box-shadow: 0 0 0 2px var(--nx2); } body.adminview .dz-way.on b::before { content: "● "; color: var(--nx2); } body.adminview .dz-panel { background: var(--card); border: 2px solid var(--nx2); border-radius: 12px; padding: 12px; margin-bottom: 12px; } body.adminview .dz-chat { max-height: 260px; overflow: auto; display: grid; gap: 8px; margin-bottom: 10px; } body.adminview .dz-msg { font-size: 13.5px; line-height: 1.45; padding: 8px 12px; border-radius: 10px; max-width: 85%; } body.adminview .dz-msg > b:first-child { display: block; font: 800 11px var(--sans); letter-spacing: .08em; text-transform: uppercase; margin-bottom: 2px; } body.adminview .dz-msg.c { background: #EAF2F5; } body.adminview .dz-msg.u { background: #F1EFE8; justify-self: end; } body.adminview .dz-msg.c b:first-child { color: var(--nx2); } body.adminview .dz-ask { display: flex; gap: 8px; } body.adminview .dz-ask input { flex: 1; font: 500 14px var(--sans); padding: 8px 10px; border: 2px solid var(--ink); border-radius: 9px; } body.adminview label.dz-drop { display: grid; place-items: center; gap: 4px; padding: 26px; border: 3px dashed var(--nx2); border-radius: 12px; cursor: pointer; text-align: center; } body.adminview label.dz-drop b { font: 700 16px var(--sans); } body.adminview label.dz-drop span { font-size: 13px; color: var(--dim); } body.adminview label.dz-drop.over { background: #EAF2F5; } body.adminview .dz-grip { cursor: grab; font-size: 15px; color: var(--dim); margin-right: 6px; float: left; line-height: 1; } body.adminview .dz-q.dragging, body.adminview .dz-secs li.dragging { opacity: .4; } body.adminview .dz-q.dropto { box-shadow: inset 0 3px 0 var(--nx2); } body.adminview .dz-sec.dropto { outline: 2px dashed var(--nx2); } body.adminview .dz-secs li.dropto { box-shadow: inset 0 2px 0 var(--nx2); } body.adminview .dz-secs li[draggable] { cursor: grab; } @media (max-width: 1100px) { body.adminview .dz-ways { grid-template-columns: minmax(0, 1fr); } } /* benchmark pages (2026-10-07) */ body.adminview table.bm td { vertical-align: middle; } body.adminview table.bm td.bm-l b { display: block; font-weight: 700; } body.adminview table.bm td.bm-l span { font-size: 12px; color: var(--dim); } body.adminview table.bm td.bm-l { min-width: 220px; max-width: 420px; } body.adminview table.bm td.bm-bar { width: 34%; min-width: 180px; } body.adminview .bm-track { position: relative; height: 18px; background: #ECEAE4; border-radius: 4px; } body.adminview .bm-fill { position: absolute; left: 0; top: 0; bottom: 0; background: #5C2D88; border-radius: 4px; } body.adminview .bm-tick { position: absolute; top: -4px; bottom: -4px; width: 4px; margin-left: -2px; background: #16211B; border-radius: 1px; } body.adminview .bm-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; } body.adminview .bm-two td.bm-bar { width: 26%; } @media (max-width: 1200px) { body.adminview .bm-two { grid-template-columns: minmax(0, 1fr); } } body.adminview { --jy-above: #0E5A3A; --jy-below: #D55E00; } body.adminview table.bm .jy-chip { white-space: nowrap; } body.adminview .bm-two { grid-template-columns: minmax(0, 1fr); } /* THE MENU SCROLLS ON ITS OWN (Pat, 2026-10-07: "you now cant scroll on this tool"). It sticks to the top of the window, as tall as the window and no taller, and scrolls inside itself, so every step stays reachable however long the page beside it is. */ body.adminview .adminnav { max-height: 100vh; overflow-y: auto; overscroll-behavior: contain; scrollbar-width: thin; } /* the benchmark build (2026-10-07) */ body.adminview .bm-clients { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; } body.adminview button.bm-client { display: flex; gap: 10px; align-items: center; text-align: left; padding: 10px 12px; border: 2px solid var(--line); border-radius: 12px; background: var(--card); cursor: pointer; color: var(--ink); } body.adminview button.bm-client img { height: 30px; width: 120px; object-fit: contain; object-position: left center; } body.adminview button.bm-client span { font-size: 12.5px; color: var(--dim); } body.adminview button.bm-client b { display: block; font: 700 13.5px var(--sans); color: var(--ink); } body.adminview button.bm-client.on { border-color: #5C2D88; box-shadow: 0 0 0 2px #5C2D88; } body.adminview .bm-props { margin: 8px 0 4px; } body.adminview .bm-plist { display: none; background: var(--card); border: 2px solid #5C2D88; border-radius: 12px; padding: 10px 14px; } body.adminview .bm-plist.open { display: block; } body.adminview .bm-plist ul { columns: 3; margin: 6px 0 0; padding-left: 18px; font-size: 13px; } body.adminview .bm-plist li span { color: var(--dim); margin-left: 6px; font-size: 12px; } body.adminview .bm-key { display: flex; flex-wrap: wrap; gap: 16px; align-items: center; font-size: 12.5px; margin-bottom: 8px; color: var(--dim); } body.adminview .bm-key .bm-dot { position: static; display: inline-block; vertical-align: middle; transform: none; } body.adminview .bm-key .bm-tick2.k { position: static; display: inline-block; vertical-align: middle; height: 16px; transform: none; } body.adminview details.bm-cat { background: var(--card); border: 2px solid var(--line); border-radius: 12px; margin-bottom: 8px; } body.adminview details.bm-cat > summary { display: grid; grid-template-columns: minmax(180px, 1.2fr) 70px minmax(200px, 1fr) minmax(260px, 1.6fr); gap: 12px; align-items: center; padding: 12px 14px; cursor: pointer; list-style: none; } body.adminview details.bm-cat > summary::-webkit-details-marker { display: none; } body.adminview details.bm-cat > summary .bm-cn::before { content: "▸ "; } body.adminview details.bm-cat[open] > summary .bm-cn::before { content: "▾ "; } body.adminview .bm-cn { font: 700 15px var(--sans); } body.adminview .bm-cb { font: 800 20px var(--display); text-align: right; } body.adminview .bm-cm { font-size: 12.5px; color: var(--dim); } body.adminview table.bm-q { border-radius: 0; border-width: 2px 0 0; } body.adminview table.bm-q td.bm-qt { min-width: 260px; } body.adminview .bm-strip { position: relative; height: 22px; background: #F1EFE8; border-radius: 11px; min-width: 220px; } body.adminview td.bm-sc { width: 32%; } body.adminview .bm-dot { position: absolute; top: 50%; width: 10px; height: 10px; margin: -5px 0 0 -5px; border-radius: 50%; border: 2px solid #6B6B6B; background: #fff; } body.adminview .bm-dot.hl { width: 14px; height: 14px; margin: -7px 0 0 -7px; background: #5C2D88; border-color: #5C2D88; z-index: 2; } body.adminview .bm-tick2 { position: absolute; top: -3px; bottom: -3px; width: 4px; margin-left: -2px; background: #16211B; border-radius: 1px; z-index: 3; } body.adminview .bm-tabs { margin-top: 0; } @media (max-width: 1100px) { body.adminview .bm-clients { grid-template-columns: minmax(0, 1fr); } body.adminview details.bm-cat > summary { grid-template-columns: minmax(0, 1fr); } } body.adminview table.bm-q td.mono { white-space: nowrap; } body.adminview .bm-earn { display:flex; align-items:center; gap:10px; } body.adminview .bm-ebar { position:relative; flex:1; height:16px; background:#ECE8DF; border:1px solid #9A9488; } body.adminview .bm-ebar i { position:absolute; left:0; top:0; bottom:0; background:#3B2A6B; } body.adminview .bm-ebar b { position:absolute; top:-4px; bottom:-4px; width:4px; margin-left:-2px; background:#111; } body.adminview .bm-earn span { font-size:12px; white-space:nowrap; min-width:58px; } /* Shop design: points on every answer, and the worksheet preview */ body.adminview .dz-opts.pts .dz-opt { display:inline-flex; align-items:center; gap:6px; } body.adminview .dz-pts { width:52px; padding:2px 4px; border:2px solid #526F2C; border-radius:3px; font:700 13px/1.2 inherit; text-align:right; } body.adminview .dz-opt em { font-style:normal; font-size:11px; font-weight:700; color:#3F5622; } body.adminview .dz-max { display:inline-block; margin-left:8px; padding:3px 8px; background:#526F2C; color:#fff; font:700 11px/1.3 inherit; letter-spacing:.05em; border-radius:3px; } body.adminview .dz-wsheet { font:13px/1.45 "Helvetica Neue",Helvetica,Arial,sans-serif; color:#1A1A1A; } body.adminview .dz-wsec { font-size:11px; letter-spacing:.09em; text-transform:uppercase; color:#526F2C; background:#F1F5EC; padding:5px 8px; border-radius:3px; margin-bottom:8px; font-weight:700; } body.adminview .dz-wq { margin:0 0 6px; font-weight:600; } body.adminview .dz-wq b, body.adminview .dz-wopts b { color:#3F5622; margin-left:6px; white-space:nowrap; } body.adminview .dz-wopts { list-style:none; margin:0; padding:0; } body.adminview .dz-wopts li { display:flex; gap:8px; align-items:baseline; margin:3px 0; } body.adminview .dz-wopts li:before { content:""; flex:none; width:11px; height:11px; border:1.5px solid #1A1A1A; border-radius:50%; transform:translateY(1px); } body.adminview .dz-wopts.sq li:before { border-radius:1px; } body.adminview .dz-wbox { margin-top:6px; height:44px; border:1px solid #BFC5B8; border-radius:3px; } /* Set up shops · Competitor shops */ body.adminview .ss-held { display:flex; flex-wrap:wrap; gap:6px 18px; align-items:baseline; margin:12px 0 16px; padding:10px 14px; background:#F4F2EC; border-left:6px solid #526F2C; font-size:13px; } body.adminview .ss-bar { display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap; padding:12px 14px; background:#1F2A17; color:#fff; border-radius:6px 6px 0 0; } body.adminview .ss-bar span { color:#D7DECF; font-size:13px; } body.adminview .ss-acts { display:flex; gap:8px; flex-wrap:wrap; } body.adminview .ss-fam { border:2px solid #CFCABD; border-top:none; padding:12px 14px; background:#fff; } body.adminview .ss-fam.comp { background:#FBFAF6; } body.adminview .ss-fam.off { background:#F1EFEA; } body.adminview .ss-fam.off header b { color:#6B675E; } body.adminview .ss-fam header { display:flex; align-items:center; gap:14px; flex-wrap:wrap; } body.adminview .ss-fam header .ss-on { font-size:15px; flex:1; min-width:240px; } body.adminview .ss-job input { width:84px; padding:3px 6px; border:2px solid #9A9488; border-radius:3px; font-weight:700; } body.adminview .ss-row { display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-top:9px; font-size:13px; } body.adminview .ss-k { width:120px; flex:none; font-size:11px; font-weight:700; letter-spacing:.06em; text-transform:uppercase; color:#5B6158; } body.adminview .ss-els { display:flex; flex-wrap:wrap; gap:8px; } body.adminview .ss-el { display:inline-flex; flex-direction:column; gap:2px; padding:5px 8px; background:#F4F2EC; border-radius:4px; font-size:12px; } body.adminview .ss-el input { font:12px inherit; border:1px solid #BFC5B8; border-radius:3px; padding:2px 4px; } body.adminview .ss-num { font-size:15px; } body.adminview .ss-dim { color:#5B6158; font-size:12.5px; display:inline-block; margin-left:4px; } body.adminview td .ss-dim { display:block; margin:2px 0 0; } body.adminview .ss-note { margin:8px 0 0 130px; font-size:12.5px; color:#3F433C; } body.adminview .ss-blk { display:inline-block; padding:4px 10px; border-radius:3px; font:700 11.5px/1.3 inherit; letter-spacing:.05em; border:2px solid #1A1A1A; } body.adminview .ss-blk.held, body.adminview .ss-blk.done { background:#2F6B2F; color:#fff; border-color:#2F6B2F; } body.adminview .ss-blk.data { background:#CFE8C8; color:#173F17; border-color:#2F6B2F; } body.adminview .ss-blk.offer { background:#FFF07A; color:#1A1A1A; } body.adminview .ss-blk.assigned, body.adminview .ss-blk.ready { background:#0063B1; color:#fff; border-color:#0063B1; } body.adminview .ss-blk.sys, body.adminview .ss-blk.live { background:#3B2A6B; color:#fff; border-color:#3B2A6B; } body.adminview .ss-blk.draft, body.adminview .ss-blk.open { background:#fff; color:#1A1A1A; } body.adminview .ss-blk.off { background:#E3E0D8; color:#4A463F; border-color:#9A9488; } body.adminview .ss-run { margin:12px 0 0 130px; padding:12px 14px; border:2px solid #3B2A6B; border-radius:6px; background:#F6F3FB; } body.adminview .ss-run ol { margin:0 0 10px; padding-left:20px; font-size:13px; } body.adminview .ss-run li { margin:4px 0; } body.adminview .ss-run li.live b { background:#3B2A6B; color:#fff; padding:1px 6px; border-radius:3px; } body.adminview .ss-clock { font-weight:700; font-variant-numeric:tabular-nums; } body.adminview .ss-bands { max-width:640px; font-size:12.5px; } body.adminview .ss-sum { font-size:13px; padding-left:18px; } body.adminview .ss-webdone { margin-top:18px; padding:10px 14px; border:2px solid #CFCABD; border-radius:6px; background:#fff; font-size:13px; } body.adminview .ss-webdone summary { cursor:pointer; font-weight:700; } body.adminview .ss-webdone dt { font-weight:600; margin-top:8px; } body.adminview .ss-webdone dd { margin:2px 0 0 14px; } body.adminview .ss-pts { margin-left:8px; color:#3F5622; white-space:nowrap; } body.adminview .ss-links a { display:block; white-space:nowrap; } @media (max-width:760px) { body.adminview .ss-note, body.adminview .ss-run { margin-left:0; } body.adminview .ss-k { width:auto; } } body.adminview .ss-comp td.mono { white-space:nowrap; } body.adminview .dz-id { white-space: nowrap; } @media (min-width: 1251px) { body.adminview .dz.shop .dz-grid { grid-template-columns: 180px minmax(0, 1fr) 340px; } } /* The question library */ body.adminview .dz-id.lib { background: #D9CCF2; color: #16211B; } body.adminview .dz-sum .k.lib { background: #D9CCF2; } body.adminview #dz-libbtn.on { background: #3B2A6B; color: #fff; border-color: #3B2A6B; } body.adminview .dz-lib { margin: 12px 0; border: 2px solid #3B2A6B; border-radius: 8px; background: #fff; } body.adminview .dz-lib header { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; padding: 10px 12px; background: #F6F3FB; border-bottom: 2px solid #3B2A6B; border-radius: 6px 6px 0 0; } body.adminview .dz-lib header b { font-size: 15px; } body.adminview .dz-lib header span { font-size: 12.5px; color: #4A463F; flex: 1; } body.adminview .dz-lib header input { min-width: 240px; padding: 6px 9px; border: 2px solid #9A9488; border-radius: 5px; font: 13px inherit; } body.adminview .dz-lib header select { padding: 5px 8px; border: 2px solid #9A9488; border-radius: 5px; font: 13px inherit; } body.adminview .dz-libhow { margin: 8px 12px; font-size: 12.5px; color: #3F433C; } body.adminview .dz-libwrap { max-height: 420px; overflow: auto; } body.adminview .dz-libt { font-size: 12.5px; margin: 0; } body.adminview .dz-libt thead th { position: sticky; top: 0; z-index: 1; } body.adminview .dz-libt tr[draggable="true"] { cursor: grab; } body.adminview .dz-libd b { display: block; } body.adminview .dz-libd span { font-size: 11px; color: #5B6158; } body.adminview .dz-liba { font-size: 11.5px; color: #3F433C; white-space: nowrap; } body.adminview .dz-libgo { white-space: nowrap; text-align: right; } body.adminview .dz-in { display: inline-block; padding: 3px 8px; border: 2px solid #2F6B2F; color: #173F17; background: #CFE8C8; font: 700 10.5px/1.3 inherit; letter-spacing: .05em; border-radius: 3px; } body.adminview .dz-libt { table-layout: fixed; width: 100%; } body.adminview .dz-libt th:nth-child(1) { width: 16%; } body.adminview .dz-libt th:nth-child(2) { width: 40%; } body.adminview .dz-libt th:nth-child(3) { width: 17%; } body.adminview .dz-libt th:nth-child(4) { width: 12%; } body.adminview .dz-libt th:nth-child(5) { width: 15%; } body.adminview .dz-liba { white-space: normal; overflow-wrap: anywhere; } body.adminview .dz-libgo { white-space: normal; } body.adminview .dz-libgo .dz-btn { white-space: normal; text-align: left; } body.adminview .dz-ways { grid-template-columns: repeat(4, minmax(0, 1fr)); } @media (max-width: 1100px) { body.adminview .dz-ways { grid-template-columns: repeat(2, minmax(0, 1fr)); } } @media (max-width: 640px) { body.adminview .dz-ways { grid-template-columns: minmax(0, 1fr); } } body.adminview .dz-libto { display: block; width: 100%; margin-bottom: 5px; padding: 4px 6px; border: 2px solid #9A9488; border-radius: 4px; font: 12px inherit; } body.adminview .dz-libt th:nth-child(2) { width: 36%; } body.adminview .dz-libt th:nth-child(5) { width: 19%; } body.adminview .adminnav { overscroll-behavior: auto; } /* at the end of the menu the page scrolls on, so the menu pins to the top and its last items come into view */ /* The report card is a pane (Pat, 2026-09-13 and 2026-10-07: "report card titles are cut off. it is supposed to scroll"). The table scrolls inside it both ways, so its heading row stays pinned at the top of the pane and the community column at its left. A sideways-only wrapper had captured the sticky headings and let them leave. */ /* Review monitoring */ body.adminview .rv-blk { display:inline-block; padding:4px 10px; border-radius:3px; font:700 11px/1.3 inherit; letter-spacing:.05em; border:2px solid #1A1A1A; white-space:nowrap; } body.adminview .rv-blk.good { background:#0E5A3A; color:#fff; border-color:#0E5A3A; } body.adminview .rv-blk.mid { background:#F2C500; color:#1A1A1A; } body.adminview .rv-blk.bad { background:#A8321A; color:#fff; border-color:#A8321A; } body.adminview .rv-rate { font-size:17px; } body.adminview .rv-stars { color:#8A6A00; letter-spacing:1px; } body.adminview .rv-stars.big { font-size:17px; } body.adminview .rv-delta .up { color:#0B3D26; font-weight:700; } body.adminview .rv-delta .down { color:#7A2412; font-weight:700; } body.adminview .rv-ans { display:flex; align-items:center; gap:10px; min-width:200px; } body.adminview .rv-ans .bm-ebar i { background:#0E5A3A; } body.adminview .rv-ans span { font-size:12px; white-space:nowrap; } body.adminview .rv-tab td a { color:inherit; } body.adminview .rv-tab td .ss-dim { display:block; margin:2px 0 0; } body.adminview .rv-filters { display:flex; flex-wrap:wrap; gap:8px; align-items:center; margin:6px 0 12px; } body.adminview .rv-filters select, body.adminview .rv-filters input { padding:6px 9px; border:2px solid #9A9488; border-radius:5px; font:13px inherit; } body.adminview .rv-card { border:2px solid #CFCABD; border-left:8px solid #0E5A3A; border-radius:6px; background:#fff; padding:12px 14px; margin-bottom:10px; } body.adminview .rv-card.low { border-left-color:#A8321A; } body.adminview .rv-card header { display:flex; flex-wrap:wrap; gap:6px 12px; align-items:center; } body.adminview .rv-card header a { font-weight:700; color:inherit; } body.adminview .rv-card header .rv-blk { margin-left:auto; } body.adminview .rv-body { margin:8px 0; font-size:14.5px; } body.adminview .rv-alert { margin:4px 0 8px; font-size:12.5px; padding:6px 10px; background:#FBEDE8; border-left:6px solid #A8321A; } body.adminview .rv-compose textarea { width:100%; box-sizing:border-box; padding:8px 10px; border:2px solid #526F2C; border-radius:5px; font:13.5px/1.5 inherit; } body.adminview .rv-acts { display:flex; gap:8px; justify-content:flex-end; margin-top:6px; } body.adminview .rv-reply { background:#EEF5EE; border-left:6px solid #0E5A3A; padding:8px 12px; font-size:13px; } body.adminview .rv-reply p { margin:4px 0 0; } /* The three experiences (2026-10-07): prospect (stages 1–3, one colour), resident and team, set clearly apart. */ .jy-exp { min-width: 0; display: flex; flex-direction: column; gap: 6px; } .jy-exphead { font: 800 12px var(--sans); letter-spacing: .14em; color: #fff; background: var(--jy-inquiry); padding: 7px 12px; border-radius: 8px; } .jy-exphead.split { display: flex; padding: 0; background: none; gap: 6px; } .jy-exphead.split span { background: var(--jy-life); padding: 7px 12px; border-radius: 8px; } .jy-exphead.split span.team { background: var(--jy-team); } .jy-strip.in { flex: 1; } .jy-grplab.exp { background: var(--g); color: #fff; padding: 5px 8px; border-radius: 5px; letter-spacing: .1em; } .jy-disc.lt .f1, .jy-disc.lt .f2, .jy-disc.lt .f3, .jy-disc.lt .f4 { fill: #1A1A1A; } .jy-disc.lt .st { stroke: #1A1A1A; } a.jy-ribbon .lab { color: #1A1A1A; } @media (max-width: 900px) { .jy-strip { flex-wrap: wrap; } .jy-exp { flex: 1 1 100% !important; } } body.adminview button.cb-tog { border: 2px solid transparent; cursor: pointer; font: 800 10.5px var(--sans); } body.adminview button.cb-tog:hover { outline: 3px solid #1A1A1A; outline-offset: 1px; } body.adminview button.cb-tog.changed { border: 3px dashed #1A1A1A; } body.adminview .cb-togbar { display: flex; gap: 14px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; font-size: 13px; } /* How an unresolved issue was resolved */ .rs { margin-top: 22px; background: var(--card); border: 2px solid var(--line); border-radius: 12px; padding: 16px 18px; } .rs-h { margin: 0 0 12px; font: 700 20px var(--display); } .rs-path { display: flex; gap: 8px; list-style: none; padding: 0; margin: 0 0 14px; flex-wrap: wrap; } .rs-path li { flex: 1 1 160px; padding: 10px 12px; border: 2px solid var(--line); border-radius: 8px; background: #F4F2EC; } .rs-path li.on { background: #0E5A3A; border-color: #0E5A3A; color: #fff; } .rs-path li b { display: block; font-size: 14px; } .rs-path li span { font-size: 12.5px; } .rs-rec { display: grid; grid-template-columns: max-content 1fr; gap: 6px 18px; margin: 12px 0; font-size: 14px; } .rs-rec dt { font-weight: 700; } .rs-rec dd { margin: 0; } .rs-form { display: grid; gap: 10px; font-size: 13.5px; } .rs-form label { display: grid; gap: 4px; font-weight: 700; } .rs-form input, .rs-form select, .rs-form textarea { font: 14px var(--sans); font-weight: 400; padding: 7px 9px; border: 2px solid #9A9488; border-radius: 6px; } .rs-row { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 10px; } .rs-acts { display: flex; justify-content: flex-end; } @media (max-width: 760px) { .rs-row { grid-template-columns: 1fr; } } /* Action plan tabs and writable worksheets */ .ap-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 18px 0 14px; border-bottom: 3px solid var(--ink); padding-bottom: 8px; } .ap-tabs button { font: 700 14px var(--sans); padding: 9px 14px; border: 2px solid var(--ink); border-radius: 9px; background: var(--card); color: var(--ink); cursor: pointer; display: inline-flex; gap: 8px; align-items: center; } .ap-tabs button b { background: var(--ink); color: #fff; border-radius: 5px; padding: 1px 7px; font-size: 12px; } .ap-tabs button.on { background: var(--ink); color: #fff; } .ap-tabs button.on b { background: #fff; color: var(--ink); } .ap-saved { margin-left: auto; font-size: 12.5px; color: var(--dim); } .ap-h { font-size: var(--section); margin: 6px 0 6px; } table.wsheet td[data-cell] { cursor: text; min-height: 34px; } table.wsheet td[data-cell]:focus { outline: 3px solid #0E5A3A; outline-offset: -3px; background: #F4FAF6; } .ap-add { margin: 8px 0 0; font: 700 13px var(--sans); padding: 7px 12px; border: 2px dashed var(--ink); border-radius: 8px; background: none; cursor: pointer; } /* Call sheet: who took the call first, the alias second, then the facts as figures */ .cs-who { display: flex; flex-wrap: wrap; gap: 10px 22px; align-items: flex-end; margin: 10px 0 12px; padding: 12px 16px; border-left: 10px solid var(--ink); background: #F4F2EC; border-radius: 6px; } .cs-taker span { display: block; font: 800 11px var(--sans); letter-spacing: .14em; color: var(--dim); } .cs-taker b { display: block; font: 700 26px var(--display); line-height: 1.15; } .cs-taker i { font-style: normal; font-size: 13px; color: var(--dim); } .cs-sec { font-size: 13px; color: var(--ink); } .cs-sec span { display: block; font-size: 11px; color: var(--dim); letter-spacing: .05em; text-transform: uppercase; } .cs-facts { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 14px; } .cs-facts div { background: var(--card); border: 2px solid var(--line); border-radius: 8px; padding: 6px 10px; min-width: 96px; } .cs-facts span { display: block; font-size: 10.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--dim); } .cs-facts b { font-size: 15px; } /* Timeline figures in place of counted sentences */ .jy-figs { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; } .jy-fig { display: inline-flex; flex-direction: column; padding: 5px 10px; border: 2px solid var(--line); border-radius: 8px; background: var(--card); min-width: 64px; } .jy-fig b { font: 800 20px var(--display); line-height: 1.1; color: var(--ink); } .jy-fig > span { font-size: 11px; color: var(--dim); letter-spacing: .02em; } .jy-fig.bad { border-color: var(--jy-below, #D55E00); border-left-width: 8px; } .jy-fig.good { border-color: var(--jy-above, #0E5A3A); border-left-width: 8px; } table.wsheet td[data-cell]:empty::before { content: attr(data-ph); color: var(--dim); font-style: italic; } /* ── THE RESPONSE-RATE TICKER (2026-11-05) ───────────────────────────────────────────────── A band at the top of the resident pages while a campaign is open. The state is in words (SURVEY IN PROGRESS), and every bar is a thick block, never a sliver. */ .lv { border: 3px solid var(--surveys); border-radius: 12px; background: var(--card); padding: 16px 18px 12px; margin: 0 0 20px; } .lv-head { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; margin-bottom: 12px; } .lv-chip { background: var(--surveys); color: #fff; font: 800 var(--tiny) var(--sans); letter-spacing: .08em; padding: 6px 10px; border-radius: 6px; } .lv-head b { font: 700 var(--body) var(--sans); } .lv-dates { color: var(--dim); font-size: var(--small); } .lv-big { flex: 0 1 300px; min-width: 0; } .lv-big .k { font: 700 44px/1 var(--mono); } .lv-big .l { font: 700 var(--tiny) var(--sans); color: var(--dim); text-transform: uppercase; letter-spacing: .06em; margin-top: 4px; } .lv-big .n { font-size: var(--small); margin-top: 6px; } .lv-comm { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 6px 18px; margin-top: 14px; padding-top: 12px; border-top: 2px solid var(--line); } .lv-comm a { display: grid; grid-template-columns: 1fr auto; gap: 4px 8px; align-items: center; color: var(--ink); text-decoration: none; font-size: var(--small); } .lv-comm a .lv-bar { grid-column: 1 / -1; } .lv-comm a:hover b { text-decoration: underline; } .lv-bar { height: 14px; border-radius: 4px; background: var(--line); overflow: hidden; } .lv-bar i { display: block; height: 100%; background: var(--surveys); } .lv-n { font: 600 var(--tiny) var(--mono); color: var(--dim); white-space: nowrap; } .lv-note { font-size: var(--tiny); color: var(--dim); margin: 10px 0 0; }