/* Heard for Meetings. Since 0.8.0 one palette, the CDL brand (Michael's word of October 17, 2026, 5 PM: keep the Oasys
   design, but the brand's own standards and colors, as https://www.cdlab.io/data-and-research shows them), a block of
   variables keyed by data-palette on <html> (base.html's one attribute, "cdl"), so another palette is a block away.
   From that page's own code: ink900 #1A2639 (text), ink700 #293C5B, ink500 #566E92 (quiet text), ink100 #E8EDF3
   (lines), terra600 #CE5B26 (accent: the value on every graph, the chart's dots, marks of emphasis), cream #F9F7F5
   (page ground), cards #FFFFFF, Albert Sans (self-hosted). Where terra600 can't reach 4.5:1 as text it gives way to
   the same brand's own darker and lighter terra, as the report's PDF uses them (engine, TERRA): terra700 #A84819 for
   links, small orange text and the buttons' ground (white words, 5.82:1), and terra500 #DE7749 on ink900 (the front
   page's hero and the report's signature box). The soft panel is the PDF's BG_SOFT #F3F0EC. The bullet graphs'
   bands are three tints of the ink hue, darker below a mark (Stephen Few), light enough that the terra600 value
   stays 3:1 on each. Every text and background pair passes 4.5:1, and every graph mark 3:1 (tests/test_080.py
   computes them); the page is light in every color scheme. */
@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-Regular.ttf") format("truetype");font-weight:400;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-Medium.ttf") format("truetype");font-weight:500;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-Bold.ttf") format("truetype");font-weight:700;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-ExtraBold.ttf") format("truetype");font-weight:800;font-style:normal;font-display:swap}
@font-face{font-family:"Albert Sans";src:url("/fonts/AlbertSans-Italic.ttf") format("truetype");font-weight:400;font-style:italic;font-display:swap}
/* 0.8.0: Albert Sans as woff2, self-hosted from @fontsource/albert-sans 5.3.0 (SIL OFL 1.1, static/fonts/OFL.txt),
   the CDL palette's face, latin and latin-ext, as fontsource splits them. */
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-300-normal.woff2") format("woff2");font-weight:300;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-400-normal.woff2") format("woff2");font-weight:400;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-400-italic.woff2") format("woff2");font-weight:400;font-style:italic;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-500-normal.woff2") format("woff2");font-weight:500;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-700-normal.woff2") format("woff2");font-weight:700;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0000-00FF,U+0131,U+0152-0153,U+02BB-02BC,U+02C6,U+02DA,U+02DC,U+0304,U+0308,U+0329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}
@font-face{font-family:"Albert Sans Web";src:url("/static/fonts/albert-sans-latin-ext-800-normal.woff2") format("woff2");font-weight:800;font-style:normal;font-display:swap;unicode-range:U+0100-02BA,U+02BD-02C5,U+02C7-02CC,U+02CE-02D7,U+02DD-02FF,U+0304,U+0308,U+0329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}

/* The palette: CDL. */
:root,:root[data-palette="cdl"]{
  --ground:#F9F7F5; --surface:#FFFFFF; --line:#E8EDF3; --card:#F3F0EC;
  --ink:#1A2639; --ink-2:#293C5B; --muted:#566E92;
  --accent:#CE5B26; --accent-text:#A84819; --button:#A84819; --accent-ink:#FFFFFF; --accent-soft:#FBEEE3; --accent-line:#ECA580;
  --ok:#2A6E4F; --ok-soft:#E3F1EA; --bad:#9C3627; --bad-soft:#F8E4E0; --bad-ink:#FFFFFF;
  --band-1:#DDE4ED; --band-2:#E8EDF3; --band-3:#F3F6F9; --bar:#CE5B26; --mark:#566E92; --cmp:#1A2639;
  --hero:#1A2639; --hero-ink:#F9F7F5; --hero-accent:#DE7749;
  --font:"Albert Sans Web","Albert Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Helvetica,Arial,sans-serif;
  --w-display:800; --w-head:700; --w-strong:700;
  color-scheme:light;
}
*{box-sizing:border-box}
html,body{margin:0}
body{background:var(--ground);color:var(--ink);font-family:var(--font);font-size:16px;line-height:1.55;-webkit-font-smoothing:antialiased}
a{color:var(--accent-text);text-underline-offset:2px}
a:focus-visible,button:focus-visible,input:focus-visible,summary:focus-visible{outline:2px solid var(--accent);outline-offset:2px;border-radius:4px}
h1,h2{margin:0;line-height:1.15;text-wrap:balance}
h1{font-size:clamp(26px,5vw,34px);font-weight:var(--w-display);letter-spacing:-.01em}
h2{font-size:21px;font-weight:var(--w-head)}
p{margin:0}
.top{display:flex;flex-wrap:wrap;gap:12px 20px;align-items:center;justify-content:space-between;max-width:760px;margin:0 auto;padding:18px 20px 0}
.mark{font-weight:var(--w-display);font-size:20px;color:var(--ink);text-decoration:none;letter-spacing:-.01em}
.mark span{font-weight:500;color:var(--muted)}
nav{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:center;font-size:15px}
nav a{color:var(--ink-2);text-decoration:none;font-weight:600}
nav a:hover{color:var(--accent-text)}
form.inline{display:inline;margin:0}
button.link{font:inherit;font-weight:600;color:var(--ink-2);background:none;border:0;padding:0;cursor:pointer}
button.link:hover{color:var(--accent-text)}
.wrap{max-width:760px;margin:0 auto;padding:22px 20px 40px;display:flex;flex-direction:column;gap:18px}
.card{background:var(--surface);border:1px solid var(--line);border-radius:14px;padding:22px;display:flex;flex-direction:column;gap:14px}
.card.narrow{max-width:460px;width:100%;margin:6vh auto 0}
.lede{color:var(--ink-2);font-size:17px}
.small{font-size:14px;color:var(--muted)}
.or{text-align:center;color:var(--muted);font-size:14px}
.stack{display:flex;flex-direction:column;gap:10px}
label{font-weight:600;font-size:15px}
input[type=email],input[type=url],input[type=text],input:not([type]),input[type=datetime-local]{font:inherit;color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
input[type=datetime-local]{max-width:280px}
input:disabled{opacity:.45;cursor:not-allowed}
input:focus{border-color:var(--accent);outline:none}
fieldset.when{border:0;padding:0;margin:0;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:center}
fieldset.when legend{font-weight:600;font-size:15px;margin-bottom:6px;padding:0}
.choice{display:flex;gap:10px;align-items:flex-start;font-weight:500}
.choice input{margin-top:5px;accent-color:var(--accent)}
/* 0.5.5: the first things each speaker said, under their name in "Which one is you?" */
.choice .said{display:flex;flex-direction:column;gap:2px;margin-top:4px;font-weight:400;font-size:15px;color:var(--ink-2)}
/* 0.5.6: "Pick yourself", directly above the choices */
.pick-yourself{font-weight:600;margin:0}
.consent{background:var(--accent-soft);border:1px solid var(--accent-line);border-radius:10px;padding:12px 14px}
.button{display:inline-flex;align-items:center;justify-content:center;font:inherit;font-weight:var(--w-strong);font-size:16px;color:var(--accent-ink);background:var(--button);border:0;border-radius:10px;padding:12px 18px;text-decoration:none;cursor:pointer;align-self:flex-start}
.button:hover{filter:brightness(1.05)}
.button.wide{align-self:stretch}
.button.quiet{background:transparent;color:var(--ink);border:1.5px solid var(--ink-2)}
.button.danger{background:var(--bad);color:var(--bad-ink)}
.error{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:10px 12px;font-weight:600}
.note{background:var(--ok-soft);color:var(--ok);border-radius:10px;padding:10px 12px;font-weight:600}
.status{font-size:17px}
.back{font-size:15px}
.back a{text-decoration:none;font-weight:600}
.back a::before{content:"\2039\00a0"}
.inline-actions{display:flex;flex-wrap:wrap;gap:8px 14px;align-items:center}
details.danger{border-top:1px solid var(--line);padding-top:12px}
details.danger summary{cursor:pointer;font-weight:700;color:var(--bad)}
details.danger[open] summary{margin-bottom:10px}
details.danger p{margin-bottom:10px;color:var(--ink-2)}
ul.meetings{list-style:none;margin:0;padding:0;display:flex;flex-direction:column}
ul.meetings li{border-top:1px solid var(--line)}
ul.meetings li:first-child{border-top:0}
ul.meetings a{display:grid;grid-template-columns:1fr auto;gap:2px 12px;padding:12px 0;color:var(--ink);text-decoration:none}
ul.meetings a:hover .what{color:var(--accent-text)}
ul.meetings .what{font-weight:700}
ul.meetings time{grid-column:1;font-size:14px;color:var(--muted)}
ul.meetings .state{grid-column:2;grid-row:1 / span 2;align-self:center;font-size:13px;font-weight:700;border-radius:99px;padding:3px 10px;white-space:nowrap}
.state.ready{background:var(--ok-soft);color:var(--ok)}
.state.live{background:var(--accent-soft);color:var(--accent-text)}
.state.over{background:var(--card);color:var(--muted)}
.remind{background:var(--card);border-radius:10px;padding:12px 14px;display:flex;flex-direction:column;gap:6px}
.remind h2{font-size:16px}
.remind ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px;color:var(--ink-2)}
.picker{display:flex;flex-direction:column;gap:8px;border-top:1px solid var(--line);padding-top:12px}
.foot{max-width:760px;margin:0 auto;padding:0 20px 28px;font-size:13px;color:var(--muted)}
@media (max-width:480px){.card{padding:18px}.button{width:100%}.inline-actions .button{width:auto}}
ul.meetings li.row{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;padding:12px 0}
ul.meetings li.row .what{flex:1 1 200px}
/* The Terms and the Privacy Notice (0.5.1). */
.legal h2{font-size:19px;margin-top:6px}
.legal ul{margin:0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.legal .table{overflow-x:auto}
.legal table{border-collapse:collapse;width:100%;font-size:14px}
.legal th,.legal td{border:1px solid var(--line);padding:8px 10px;text-align:left;vertical-align:top}
.legal th{background:var(--card)}
.foot .legal-links{margin-left:14px}
.foot .legal-links a{color:var(--muted);margin-right:10px}
/* 0.6.0: the buying, billing and viewers pages. */
input[type=number],select,textarea{font:inherit;color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
input[type=number]{max-width:160px}
textarea{resize:vertical}
fieldset.plans{border:0;padding:0;margin:0;display:flex;flex-direction:column;gap:8px}
.said-note{white-space:pre-wrap}
.card h3{margin:6px 0 0;font-size:17px}
/* 0.7.0: the report on its own page (report_html.py), drawn with the PDF's geometry. */
.row-report{display:flex;flex-wrap:wrap;gap:4px 14px;align-items:baseline;margin:-6px 0 12px;font-size:14px;color:var(--ink-2)}
.row-report a{font-weight:600}
.report{display:flex;flex-direction:column;gap:14px}
.report .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.report .eyebrow.quiet{color:var(--muted)}
.report-title{font-size:clamp(28px,6vw,38px);font-weight:var(--w-display);letter-spacing:.01em}
.report .prepared{display:flex;flex-wrap:wrap;justify-content:space-between;gap:4px 14px;font-weight:500;color:var(--ink-2);border-bottom:1px solid var(--line);padding-bottom:10px}
.report-context{font-style:italic;color:var(--muted)}
.report-section{display:flex;flex-direction:column;gap:10px;border-top:1px solid var(--line);padding-top:14px}
.report-section h2{font-size:19px}
.score-line{display:flex;align-items:baseline;gap:8px}
.score-num{font-size:44px;font-weight:var(--w-display);line-height:1}
.score-unit{color:var(--muted);font-weight:500}
.score-sentence{color:var(--accent-text);font-weight:500}
.dial-head,.scale-head{display:flex;justify-content:space-between;gap:12px;font-size:15px}
.dial-value{font-weight:700}
.dial-bar{display:block;width:100%;height:6px}
.dial-track{fill:var(--line)}
.dial-fill{fill:var(--accent)}
.scale-row{display:flex;flex-direction:column;gap:4px}
.scale-title{font-weight:700}
.scale-value{font-weight:800;color:var(--accent-text);font-size:17px}
svg.scale{display:block;width:100%;height:auto;overflow:visible}
.scale text{font-family:var(--font);font-size:12px;fill:var(--muted)}
.scale .scale-mark{font-weight:700;font-size:12px}
.scale-track{stroke:var(--card);stroke-width:4}
.scale-tick{stroke:var(--muted);stroke-width:1.5}
.scale-dot{fill:var(--accent)}
.scale-dot-in{fill:var(--surface)}
.scale-band{fill:var(--accent-line)}
.scale-band-mid{stroke:var(--accent);stroke-width:2.5}
.scale-read{font-size:15px;color:var(--ink-2)}
.report .signature{background:var(--ink);color:var(--ground);border-radius:12px;padding:16px 18px;border-top:0}
.report .signature h2,.report .signature .scale-title{color:var(--ground)}
.report .signature .scale-read{color:var(--card)}
.report .signature .scale-value{color:var(--accent-line)}
.scale.on-ink text{fill:var(--card)}
.scale.on-ink .scale-track{stroke:var(--muted)}
.scale.on-ink .scale-tick{stroke:var(--card)}
.report-closing{font-style:italic;font-size:17px}
.citations{gap:8px}
/* 0.7.0: your progress, two reports compared, and team listening (progress_views.py). Colors from the brand
   tokens above; every verdict is written out, its color only beside the words. */
.progress .tiles{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.tile{background:var(--card);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px}
.tile.wide{grid-column:1 / -1}
.tile-name{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile-num{font-size:30px;font-weight:var(--w-display);line-height:1.1}
.tile-line{font-weight:600}
.tile-change{color:var(--ink-2);font-weight:500}
.verdict{font-weight:700}
.verdict.good{color:var(--ok)}
.verdict.bad{color:var(--bad)}
.verdict.plain{color:var(--ink-2)}
.chart{margin:0;display:flex;flex-direction:column;gap:8px}
svg.trend{display:block;width:100%;height:auto;overflow:visible}
.chart-grid{stroke:var(--line);stroke-width:1}
.chart-axis{font-family:var(--font);font-size:12px;fill:var(--muted)}
.chart-mean{fill:none;stroke:var(--ink);stroke-width:2.5;stroke-linejoin:round;stroke-linecap:round}
.chart-dot{fill:var(--accent)}
details.chart-table summary,details.said summary{cursor:pointer;font-weight:600;color:var(--ink-2)}
.table-scroll{overflow-x:auto}
.table-scroll table{border-collapse:collapse;width:100%;font-size:14px}
.table-scroll th,.table-scroll td{border-bottom:1px solid var(--line);padding:7px 8px;text-align:left;vertical-align:top}
.table-scroll thead th{color:var(--muted);font-weight:700;font-size:13px}
table.measures tr.group th{background:var(--card);font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-2)}
table.measures tbody th{font-weight:700}
table.measures .kind{display:block;font-weight:400;font-size:12px;color:var(--muted)}
table.measures td{white-space:nowrap}
table.measures td:nth-child(5){white-space:normal;min-width:150px}
/* 0.7.1: on a wide window Team listening's table fits its card: its cells wrap (the progress page's measures keep
   theirs on one line) and the page that holds it is wider, up to 1240px. A member's name stays on one line at every
   width; on a narrower window the table keeps its single lines and scrolls inside its card, as in 0.7.0. */
@media (min-width:1100px){table.listening td{white-space:normal}body:has(table.listening) :is(.top,.wrap,.foot){max-width:1240px}}
table.listening tbody th{white-space:nowrap}
svg.spark{display:block;width:120px;height:28px}
.spark-line{fill:none;stroke:var(--accent);stroke-width:1.75;stroke-linejoin:round}
.spark-dot{fill:var(--accent)}
.report-card{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column;gap:8px}
.report-card:first-of-type{border-top:0;padding-top:0}
.report-card-head{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:baseline}
.report-card-head h3{margin:0;font-size:17px}
.report-card-score{font-weight:800;color:var(--accent-text);margin-left:auto}
.report-card h4{margin:0;font-size:15px}
ul.moved{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:4px;font-size:15px}
details.said .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;color:var(--accent-text);margin-top:8px}
.progress-note .said-note{font-size:16px}
.explainer p{color:var(--ink-2)}
ul.sources{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;font-size:14px;color:var(--ink-2);overflow-wrap:anywhere}
.compare-pick{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end}
.compare-pick label{display:flex;flex-direction:column;gap:4px;flex:1 1 220px}
@media (max-width:480px){.progress .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}}
.checkin{font-weight:700;color:var(--accent-text)}
table.listening th a,table.listening thead a{color:inherit}
.own-row td,.own-row th{white-space:normal}
/* 0.7.0, after its independent review: "Too early to call a trend" under a direction from 2 or 3 reports. */
table.measures td .early{display:block;white-space:normal;min-width:14em;font-size:12px}
table.measures th .row-mark{display:block;white-space:normal;font-weight:400;min-width:12em;font-size:12px}
/* 0.8.0 (SPEC_0.8.0.md 3a to 3e): each number's unit and word, the bullet graphs (aria-hidden; the words carry the
   meaning), the sort arrows, "How this is scored", and chart labels of 12 pixels or more on a phone. */
.scale-right{display:flex;flex-wrap:wrap;align-items:baseline;justify-content:flex-end;gap:2px 6px;text-align:right}
.scale-word{font-size:14px;font-weight:500;color:var(--ink-2)}
.report .signature .scale-word{color:var(--card)}
.report .signature .eyebrow{color:var(--accent-line)}
svg.bullet{display:block;width:100%;min-width:96px;height:16px;overflow:visible;margin-top:6px}
svg.bullet.small{height:12px;min-width:64px}
.band-1{fill:var(--band-1)}
.band-2{fill:var(--band-2)}
.band-3{fill:var(--band-3)}
.bullet-mark{stroke:var(--mark);stroke-width:2}
.bullet-cmp{stroke:var(--cmp);stroke-width:3}
.bullet-bar{fill:var(--bar)}
.bullet-dot{fill:var(--bar);stroke:var(--surface);stroke-width:1.5}
.bullet-ends{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);line-height:1.3;margin-top:2px}
.stands{display:block;font-weight:600;color:var(--ink);margin-top:4px;white-space:normal}
.plain{display:block;font-size:14px;color:var(--ink-2);margin-top:4px;white-space:normal;line-height:1.4}
table.measures:not(.compare):not(.listening) td:nth-child(5){min-width:220px}
table.measures.compare td:nth-child(5){min-width:0}
table.measures.compare td:nth-child(6){white-space:normal;min-width:220px}
table.listening th,table.listening td{padding:7px 6px}
table.listening td:nth-child(3){min-width:92px}
table.listening td:nth-child(5){min-width:120px}
table.listening td.graph{min-width:84px}
table.listening td:last-child{min-width:120px}
table.listening .word{color:var(--ink-2);font-size:13px}
table.listening thead .unit{display:block;font-weight:500;font-size:12px;color:var(--muted);text-transform:none;letter-spacing:0}
svg.sort-arrow{display:inline-block;width:9px;height:12px;margin-left:5px;vertical-align:-1px}
.sort-arrow path{fill:var(--band-1)}
th[aria-sort="ascending"] .sort-arrow .up,th[aria-sort="descending"] .sort-arrow .down{fill:var(--ink)}
th[aria-sort="ascending"] a,th[aria-sort="descending"] a{color:var(--ink)}
.tiles-scale{font-size:13px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--muted)}
.tile-bullet{max-width:440px}
.team-key{display:flex;flex-direction:column;gap:6px}
.team-key .key-title{font-size:16px}
ul.key{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:4px;font-size:14px;color:var(--ink-2)}
details.how{border-top:1px solid var(--line);padding-top:12px;display:flex;flex-direction:column}
details.how summary{cursor:pointer;font-weight:var(--w-strong);color:var(--ink-2)}
details.how > * + *{margin-top:10px}
.explainer details.how{border-top:0;padding-top:0}
.explainer details.how p:not(.small){color:var(--ink-2)}
/* On a phone each member is a card: the sort links above as a row, each cell with its column's name. */
@media (max-width:600px){
  table.listening,table.listening thead,table.listening tbody{display:block}
  table.listening thead tr{display:flex;flex-wrap:wrap;gap:6px}
  table.listening thead th{display:block;border:1px solid var(--line);border-radius:99px;padding:3px 10px}
  table.listening thead th:last-child,table.listening thead .unit{display:none}
  table.listening tbody tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px 16px;border-top:1px solid var(--line);padding:12px 0}
  table.listening tbody th{grid-column:1 / -1;order:-1;font-size:16px;border:0;padding:0}
  table.listening tbody td{display:block;border:0;padding:0;white-space:normal;min-width:0}
  table.listening tbody td:empty{display:none}
  table.listening tbody td .early{min-width:0}
  table.listening tbody td[data-label]::before{content:attr(data-label);display:block;font-size:12px;font-weight:700;color:var(--muted)}
}
/* 0.8.0's re-check: on a phone, progress's and compare's measures keep their numbers under the header's names, in a
   grid each row shares with the header, and the word, the graph and the plain line take the full width below them, so
   none of them sits off the screen to the right. */
@media (max-width:600px){
  table.measures:not(.listening),table.measures:not(.listening) thead,table.measures:not(.listening) tbody{display:block}
  table.measures:not(.listening) tr{display:grid;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:4px 10px;border-top:1px solid var(--line);padding:10px 0}
  table.measures.compare tr{grid-template-columns:minmax(0,1.4fr) repeat(4,minmax(0,1fr))}
  table.measures:not(.listening) thead tr{border-top:0;padding:0 0 4px}
  table.measures:not(.listening) tr.group{display:block;border:0;padding:0}
  table.measures:not(.listening) th,table.measures:not(.listening) td{display:block;border:0;padding:0;white-space:normal}
  table.measures:not(.compare):not(.listening) td:nth-child(5),table.measures:not(.compare):not(.listening) td:nth-child(6),
  table.measures.compare td:nth-child(6){grid-column:1 / -1;min-width:0}
  table.measures:not(.compare):not(.listening) thead th:nth-child(n+5),table.measures.compare thead th:nth-child(6){display:none}
}
@media (max-width:760px){.chart-axis{font-size:15px}}
@media (max-width:600px){.chart-axis{font-size:20px}}
@media (max-width:480px){.chart-axis{font-size:24px}.chart-axis.wide-only{display:none}}
@media (max-width:400px){.chart-axis{font-size:28px}}
/* 0.8.0 (SPEC_0.8.0.md 3g): the usage view's wide tables. */
@media (min-width:1100px){body:has(table.usage-table) :is(.top,.wrap,.foot){max-width:1240px}}
table.usage-table td{white-space:nowrap}
/* 0.8.0 (SPEC_0.8.0.md 3h): the front page, in the Oasys layout and the CDL colors: the hero cream on ink900, its
   subhead and first button in terra500 (on ink900, as the PDF draws its values there). */
@media (min-width:900px){body:has(.front-hero) :is(.top,.wrap,.foot){max-width:1040px}}
.front-hero{background:var(--hero);color:var(--hero-ink);border-radius:20px;padding:clamp(28px,6vw,64px) clamp(20px,5vw,56px);display:flex;flex-direction:column;gap:16px}
.front-hero h1{font-size:clamp(32px,6vw,54px);line-height:1.08;font-weight:var(--w-display);letter-spacing:-.02em;max-width:18ch}
.front-sub{font-size:clamp(19px,2.6vw,24px);font-weight:var(--w-head)}
.front-lede{font-size:17px;max-width:48ch}
.front-actions{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:center}
.front-actions .button{align-self:auto}
.front-hero .front-sub{color:var(--hero-accent)}
.front-hero .button{background:var(--hero-accent);color:var(--hero)}
.front-hero .button.quiet{background:transparent;color:var(--hero-ink);border-color:var(--hero-ink)}
.front-signin{font-size:15px}
.front-hero .front-signin a{color:var(--hero-ink)}
.front-qa{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:18px 32px}
.front-qa p{margin-top:8px;color:var(--ink-2)}
.front-sample .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
ul.sample-rows{list-style:none;margin:0;padding:0;display:flex;flex-direction:column;gap:14px}
.sample-head{display:flex;flex-wrap:wrap;justify-content:space-between;gap:2px 12px;font-size:15px}
.sample-name{font-weight:var(--w-strong)}
.sample-value{color:var(--ink-2)}
.front-privacy ul{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px;color:var(--ink-2)}
.price-line{font-size:19px;font-weight:var(--w-head)}
.front-start{max-width:520px;width:100%;align-self:center}
.front-end{display:flex;flex-direction:column;align-items:center;gap:16px;padding:8px 0 4px}
.front-brand{font-size:20px;font-weight:var(--w-head);color:var(--ink)}
@media (max-width:480px){.front-actions .button{width:100%}}

/* 0.9.0 (SPEC_0.9.0_v2.md F.1): the top bar marks the page you're on (aria-current="page"): terra700 text, heavier,
   with a bar of the same color under it; terra700 on the cream ground is 5.45:1 (tests/test_090_ux.py). */
nav a[aria-current="page"]{color:var(--accent-text);font-weight:800;box-shadow:inset 0 -3px 0 var(--accent-text);padding-bottom:4px}
/* F.2: a page's one plain sentence of what it is for, the short line under a field or a button, and F.5's link to
   the page's help article. */
.purpose{color:var(--ink-2);font-size:16px}
.hint{font-size:14px;color:var(--muted)}
.page-help{max-width:760px;margin:-4px 0 0;text-align:right}
.foot .foot-links{margin-left:14px}
.foot .foot-links a{color:var(--muted);margin-right:10px}
/* Section A: the help center. */
.help-list{margin:0;padding-left:20px;display:flex;flex-direction:column;gap:6px}
.help-article .eyebrow{font-size:12px;font-weight:700;letter-spacing:.14em;text-transform:uppercase;color:var(--accent-text)}
.help-still{border-top:1px solid var(--line);padding-top:12px}
input[type=search]{font:inherit;color:var(--ink);background:var(--ground);border:1.5px solid var(--line);border-radius:10px;padding:11px 12px;width:100%;min-width:0}
/* Section B: Contact us's field no person sees, and the operator's support requests. */
.hp{position:absolute;left:-10000px;top:auto;width:1px;height:1px;overflow:hidden}
.support-request{border-top:1px solid var(--line);padding:14px 0;display:flex;flex-direction:column;gap:8px}
.support-head{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:baseline}
.support-meta{display:grid;grid-template-columns:auto 1fr;gap:2px 12px;font-size:14px;margin:0}
.support-meta dt{color:var(--muted)}
.support-meta dd{margin:0;overflow-wrap:anywhere}
/* Section E: a team record a member says wasn't them, and the line that says a report belongs to the team. */
.flagged{background:var(--bad-soft);color:var(--bad);border-radius:10px;padding:10px 14px;font-weight:600}
.belongs{color:var(--ink-2);font-size:15px}