/* DISC board. Loaded only by disc.html, on top of app.css for the tokens and masthead.
The quadrant colours deliberately reuse the app's themed tokens rather than the DISC
vendor's pastels. Hardcoding those pastels would repeat the badge mistake: they are
drawn for a light background and would wash out or vanish in dark mode. */
/* Wider than the rest of the app, and scoped here on purpose: disc.css is loaded only by
disc.html, so these overrides cannot reach the certifications tracker, whose width is
already settled. The board carries a roster rail, a wheel and four reference panels, so
it needs the room in a way the other pages do not. */
.wrap, .container{ max-width:1860px; padding-inline:clamp(.7rem,1.4vw,1.25rem); }
/* Tight to the masthead: the default left a stray band of page background between the banner
and the h1. Same change on disc-guide.css. */
.container{ padding-block:.15rem .75rem; }
.foot{ max-width:1860px; }
:root{
--d-q:var(--green-bg); --d-qi:var(--green-ink); --d-ql:var(--green-line);
--i-q:var(--red-bg); --i-qi:var(--red-ink); --i-ql:var(--red-line);
--s-q:var(--ms-bg); --s-qi:var(--ms-ink); --s-ql:var(--ms-line);
--c-q:var(--amber-bg); --c-qi:var(--amber-ink); --c-ql:var(--amber-line);
}
.disc-state{ background:var(--paper); border:1px solid var(--rule); border-radius:var(--radius);
padding:1.2rem 1.3rem; margin:1.2rem 0; color:var(--muted); box-shadow:var(--shadow); }
.disc-state h2{ color:var(--ink); font-size:1.1rem; margin:0 0 .5rem; }
.disc-state p{ margin:.45rem 0; max-width:62ch; line-height:1.5; }
.disc-state.denied{ border-left:4px solid var(--amber); }
.disc-state.err{ border-left:4px solid var(--accent); color:var(--accent); }
.disc-head{ display:flex; align-items:flex-end; justify-content:space-between; gap:1rem;
flex-wrap:wrap; padding:.3rem 0 .6rem; }
.disc-head h1{ margin:0; font-size:1.5rem; }
.disc-head .sub{ margin:.2rem 0 0; color:var(--muted); font-size:.9rem; }
.disc-actions{ display:flex; align-items:center; gap:.5rem; }
.save-state{ font-size:.82rem; color:var(--muted); font-style:italic; }
.save-state.dirty{ color:var(--amber-ink); font-style:normal; font-weight:600; }
.save-state.saved{ color:var(--green-ink); font-style:normal; }
.save-state.failed{ color:var(--accent); font-style:normal; font-weight:600; }
.btn{ font:inherit; font-size:.86rem; padding:.4rem .8rem; border-radius:9px;
border:1px solid var(--rule); background:var(--paper); color:var(--ink); cursor:pointer; }
.btn:hover:not(:disabled){ background:var(--hover); }
.btn:disabled{ opacity:.45; cursor:default; }
.btn.primary{ background:var(--blue); color:var(--on-blue); border-color:var(--blue); }
.btn.primary:hover:not(:disabled){ filter:brightness(1.12); background:var(--blue); }
/* Roster left, wheel right. The quadrant panels sit in a row of four below both, which
keeps the wheel large and puts the reference text on one full-width band instead of
scattering it into the corners. */
/* align-items:start, NOT stretch. Stretch made the grid row as tall as the TALLER item, so
a 38-name roster dragged the chart panel to its height and left a large empty area under
a small wheel. Each panel now sizes itself, and the roster's own scroll cap is set from
the chart's measured height in disc.js, so the roster can never drive the chart's size. */
.disc-grid{ display:grid; grid-template-columns:minmax(215px,250px) minmax(0,1fr);
gap:.9rem; align-items:start; }
@media(max-width:900px){ .disc-grid{ grid-template-columns:1fr; } }
.disc-roster, .disc-wheel-wrap{ background:var(--paper); border:1px solid var(--rule);
border-radius:var(--radius); padding:.8rem; box-shadow:var(--shadow); }
.disc-roster{ display:flex; flex-direction:column; min-height:0; }
.disc-roster h2{ margin:0 0 .5rem; font-size:1rem; }
.disc-roster .rhint{ margin:0 0 .6rem; font-size:.8rem; color:var(--muted); }
.add-row{ display:flex; gap:.4rem; }
.add-row input{ flex:1 1 auto; min-width:0; font:inherit; font-size:.88rem;
padding:.4rem .55rem; border:1px solid var(--rule); border-radius:9px;
background:var(--tint); color:var(--ink); }
.roster-tools{ display:flex; align-items:center; gap:.6rem; flex-wrap:wrap;
margin:.7rem 0 .5rem; padding-top:.6rem; border-top:1px solid var(--rule); }
.roster-tools .search{ flex:1 1 120px; min-width:0; font:inherit; font-size:.85rem;
padding:.35rem .5rem; border:1px solid var(--rule); border-radius:9px;
background:var(--tint); color:var(--ink); }
.vtoggle{ font-size:.8rem; color:var(--muted); display:inline-flex; align-items:center; gap:.3rem; }
/* The two scope toggles read as the primary controls of the four, so they get the ink the
other two do not. The note beneath names the set, since a checkbox label cannot. */
#myTeamWrap, #leadershipWrap{ color:var(--ink); font-weight:600; }
#scopeNote{ color:var(--muted); }
#scopeNote.empty{ color:var(--amber-ink); }
/* Was a filled amber panel. It said little and cost a block of vertical space in both the
roster rail and above the wheel, so it is a quiet line now. */
.unplaced-note{ font-size:.78rem; color:var(--muted); margin:.35rem 0 0; }
/* --roster-max is measured from the chart panel by disc.js. The fallback matters: without
JS, or before the first measurement, it must still be bounded rather than running to 60
rows. */
.roster{ list-style:none; margin:0; padding:0; overflow-y:auto;
max-height:var(--roster-max, 60vh); }
.roster li{ display:flex; align-items:center; gap:.5rem; padding:.32rem .4rem;
border-radius:8px; cursor:pointer; }
.roster li:hover{ background:var(--hover); }
.roster li.sel{ background:var(--hover); outline:2px solid var(--blue); outline-offset:-2px; }
.roster li.former{ opacity:.55; }
.roster .sw{ width:10px; height:10px; border-radius:50%; flex:0 0 auto;
border:1px solid rgba(0,0,0,.25); }
.roster .nm{ flex:1 1 auto; min-width:0; font-size:.87rem; overflow:hidden;
text-overflow:ellipsis; white-space:nowrap; }
.roster .st{ font-size:.7rem; color:var(--muted); flex:0 0 auto; }
.roster .arch{ font:inherit; font-size:.72rem; background:transparent; cursor:pointer;
border:1px solid var(--rule); border-radius:6px; padding:.05rem .3rem; color:var(--muted);
flex:0 0 auto; }
.roster .arch:hover{ background:var(--paper); color:var(--ink); }
.roster .unplaced .nm{ font-style:italic; color:var(--amber-ink); }
/* Read-only, set by disc.js from the API's canEdit flag. The per-row archive button is the one
editing control that lives inside rendered markup rather than in the page shell, so hiding it
belongs here rather than in applyReadOnly, which would otherwise have to re-hide it on every
render. The click handler already refuses; this stops the button being offered at all. */
body.read-only .roster .arch{ display:none; }
/* Nothing on the wheel is draggable, so stop advertising it. */
body.read-only #wheelHost svg{ cursor:default; }
body.read-only .roster li{ cursor:pointer; }
.wheel-tools{ display:flex; align-items:center; justify-content:space-between; gap:.6rem;
flex-wrap:wrap; margin-bottom:.4rem; }
.wheel-tools .hint{ font-size:.8rem; color:var(--muted); }
.wheel-help{ font-size:.78rem; color:var(--muted); margin:.5rem 0 0; }
.wheel-help summary{ cursor:pointer; width:max-content; }
.wheel-help summary:hover{ color:var(--ink); }
.wheel-help p{ margin:.35rem 0 0; max-width:90ch; }
/* Fitted to one screen: the page itself must not scroll, or a few pixels of rounding leave a
scrollbar that shifts the whole layout sideways and changes the fit it was measured for. */
html.disc-fit, html.disc-fit body{ overflow-y:hidden; }
/* Capped so the wheel cannot grow taller than a screen. Raised from 720 now the page is
wider. Note this only scales the whole drawing: label capacity is fixed in viewBox units,
so a bigger wheel makes the same layout easier to read rather than fitting more names.
touch-action:none so a drag on a touchscreen moves the dot instead of scrolling. */
/* Sized to fit the screen, with a floor. The calc term is the width at which the drawing
would be exactly as tall as the space left in the viewport, so on a normal window the
whole chart is visible without scrolling. --chrome is measured in disc.js, since the
header, tool row and edge blocks are not a constant.
The max(760px, ...) is a readability floor, and it is a deliberate trade. Without it a
1440x700 window shrank the circle to 267px, which puts the names under 7px: the chart
fitted and could not be read. Below about 900px of height it stops shrinking and the page
scrolls instead, because a legible chart you scroll beats an illegible one you do not.
touch-action:none so a drag moves the dot rather than scrolling the page. */
/* The SVG simply fills its cell. The cell's width is the definite value, set on .stage-chart:
sizing the SVG with 100% inside an auto-sized grid column is circular, and it collapsed the
circle to 203px. touch-action:none so a drag moves the dot rather than scrolling. */
#wheelHost svg{ display:block; width:100%; height:auto; margin:0 auto; touch-action:none; }
.qseg{ stroke:var(--rule); stroke-width:1; }
.qd{ fill:var(--d-q); } .qi{ fill:var(--i-q); } .qs{ fill:var(--s-q); } .qc{ fill:var(--c-q); }
/* --rule is a hairline for panel borders and vanished over the quadrant fills. Two weights
across twelve segments: the quadrant boundary reads heavier than the subdivisions, so the
four quadrants stay findable instead of the whole thing reading as a dartboard. */
.spoke{ stroke:var(--muted); }
.spoke.major{ stroke-width:1.4; opacity:.8; }
.spoke.minor{ stroke-width:.7; opacity:.34; }
.rim{ fill:none; stroke:var(--muted); stroke-width:1.5; }
.ring{ fill:none; stroke:var(--rule); stroke-width:1; stroke-dasharray:3 4; }
.qletter{ font-family:'Bricolage Grotesque',serif; font-size:34px; opacity:.28; }
.qletter.d{ fill:var(--d-qi); } .qletter.i{ fill:var(--i-qi); }
.qletter.s{ fill:var(--s-qi); } .qletter.c{ fill:var(--c-qi); }
.axis-lab{ font-size:11px; font-weight:700; letter-spacing:.05em; fill:var(--ink); }
.dot{ stroke:var(--paper); stroke-width:1.5; cursor:grab; }
.dot.former{ opacity:.4; }
.dot.sel{ stroke:var(--blue); stroke-width:2.5; }
.lead{ fill:none; stroke:var(--muted); stroke-width:.6; opacity:.38; }
/* ---- Pairing a name with its dot ----
The real problem in a dense cluster is not overlap, which is measured at zero, but
tracing which label belongs to which dot. Hovering either one, or a roster row, lifts
that pair and fades everything else. Done by toggling classes on the existing nodes
rather than re-rendering, so it stays smooth while dragging. */
.dot.hi{ stroke:var(--ink); stroke-width:2.5; }
.plab.hi{ font-weight:700; fill:var(--ink); }
.lead.hi{ fill:none; stroke:var(--ink); stroke-width:1.3; opacity:.9; }
svg.dimmed .dot:not(.hi){ opacity:.3; }
svg.dimmed .plab:not(.hi){ opacity:.16; }
svg.dimmed .lead:not(.hi){ opacity:.1; }
.roster li.hi{ background:var(--hover); box-shadow:inset 0 0 0 1px var(--rule); }
.plab{ font-size:10.5px; fill:var(--ink); }
.plab.former{ opacity:.5; font-style:italic; }
.plab.sel{ font-weight:700; }
/* ---- The chart's surrounding reference content ---- */
/* One column, three rows, filling the full height of the stage. That is what aligns the top
strip with the top of Dominance and Influence and the bottom strip with the bottom of
Conscientiousness and Steadiness: the strips are pinned to the ends of a frame that spans
the same height as the panel columns, and the wheel centres in the space between them.
The side strips are no longer in here; they moved out to the stage. */
.wheel-frame{ display:grid; gap:.4rem; height:100%;
grid-template-columns:minmax(0,1fr);
grid-template-rows:auto 1fr auto;
grid-template-areas:"top" "wheel" "bottom"; }
.edge-top{ grid-area:top; align-self:start; }
.edge-bottom{ grid-area:bottom; align-self:end; }
.wheel-frame > #wheelHost{ grid-area:wheel; min-width:0; align-self:center; }
.edge{ display:flex; flex-wrap:wrap; gap:.2rem .4rem; justify-content:center;
background:var(--tint); border:1px solid var(--rule); border-radius:10px;
padding:.4rem .5rem; }
/* The side strips sit in the stage's own panel columns rather than inside the frame, so they
take that column's full width and match the quadrant panels.
A column of centred rows, two words per row, which is what actually centres each row. A
two-column grid was tried first: it centres each item in its COLUMN, so the lone last word
sat under column one instead of in the middle of the box. Rows also make the separators
fall out for free, since the last word in a row simply has no dot after it. */
.disc-stage > .edge-left, .disc-stage > .edge-right{
flex-direction:column; align-items:center; gap:.2rem;
max-width:none; width:auto; justify-self:stretch; }
.erow{ display:flex; align-items:baseline; justify-content:center; gap:.45rem; }
.erow span:last-child::after{ content:''; margin-left:0; }
.edge-left span, .edge-right span{ white-space:nowrap; }
.edge span{ font-size:.8rem; color:var(--ink); font-weight:500; white-space:nowrap; }
.edge span::after{ content:'ยท'; margin-left:.4rem; color:var(--muted); opacity:.75; }
.edge span:last-child::after{ content:''; margin-left:0; }
.btn.wide{ width:100%; margin-top:.4rem; }
/* One quiet line rather than a filled panel: the counts are worth a glance, not a block. */
.import-note{ font-size:.76rem; margin:.35rem 0 0; color:var(--muted); }
.import-note.none{ color:var(--muted); }
.import-note.err{ color:var(--accent); font-weight:600; }
/* ---- DISC stage ----------------------------------------------------------------
Three columns and two rows, the wheel spanning both rows:
Dominance WHEEL Influence
Conscientiousness " Steadiness
Grid, not measurement. The panels occupy their own columns, so a description can never
overlap a plotted employee name: they are in different grid cells. Nothing about the
wheel's plotting, its dot coordinates or the SVG's own geometry is touched by any of
this.
Container queries rather than media queries, because what matters is how much room the
chart panel has, not how wide the window is. The roster rail beside it changes that, and
a media query cannot see it. */
.disc-wheel-wrap{ container-type:inline-size; }
.disc-stage{ display:grid; gap:.9rem 1.1rem; align-items:start;
grid-template-columns:minmax(180px,1fr) auto minmax(180px,1fr);
grid-template-areas:"d chart i" "left chart right" "c chart s"; }
.disc-stage > .edge-left{ grid-area:left; }
.disc-stage > .edge-right{ grid-area:right; }
/* stretch, so the frame inside can pin its strips to the stage's top and bottom edges. */
.disc-stage > .stage-chart{ align-self:stretch; }
/* Centred in its grid area. Invisible on the wide layout, where the chart's column is `auto`
and therefore already exactly its width. It matters the moment the quadrant panels drop
beneath: the chart then spans two 1fr columns while keeping its own definite width, and
without this it sits hard against the left edge of that span with all the slack on the
right. Measured at 1434px of container: 197px off centre before, 0 after. */
.disc-stage > .stage-chart{ justify-self:center; }
/* The lower pair FILL their row rather than sitting at the bottom of it. Both matter: the row
is as tall as the taller of the two, so filling it puts both bottom edges level with the
bottom strip (which was the point of the old align-self:end) AND both top edges level with
each other, which end did not. With end, the shorter panel's whole content was pushed down
by the height difference: Conscientiousness has one less line than Steadiness, so its
heading sat 18px below its neighbour's. Stretching moves the slack to the bottom of the
shorter panel, where it reads as padding instead of as a misalignment. Symmetric on purpose,
so it still holds if editing the descriptors makes Conscientiousness the taller one. */
#quad-c, #quad-s{ align-self:stretch; }
/* The chart cell carries the definite width, expressed in container-query units so it never
depends on the cell it lives in. 1040px of canvas puts the circle near 592px, in the target
range; the cqw term reserves room for the two panel columns; the dvh term keeps the whole
chart on screen. This replaced a JavaScript measurement, which is what the brief asked for. */
.stage-chart{ grid-area:chart; min-width:0;
width:min(1040px, calc(100cqw - 420px), calc((100dvh - 250px) * 720 / 560)); }
#quad-d{ grid-area:d; } #quad-i{ grid-area:i; }
#quad-c{ grid-area:c; } #quad-s{ grid-area:s; }
/* Very light versions of the quadrant colours, so a panel reads as belonging to its own
quadrant of the wheel without competing with it. */
.qpanel{ border-radius:14px; padding:.9rem 1rem 1rem; min-width:0; }
.qpanel.d{ background:var(--green-bg); }
.qpanel.i{ background:var(--red-bg); }
.qpanel.c{ background:var(--amber-bg); }
.qpanel.s{ background:var(--ms-bg); }
.qpanel h3{ margin:0; font-size:1rem; letter-spacing:.045em; text-transform:uppercase; }
.qpanel.d h3{ color:var(--green-ink); }
.qpanel.i h3{ color:var(--red-ink); }
.qpanel.c h3{ color:var(--amber-ink); }
.qpanel.s h3{ color:var(--amber-ink); }
.qpanel.s h3{ color:var(--ms-ink); }
/* Count only. Individual names stay on the wheel, where they mean something positional. */
.qpanel .qcount{ display:flex; align-items:center; gap:.35rem; margin:.2rem 0 .55rem;
font-size:.78rem; color:var(--muted); }
.qpanel .qcount .dot-key{ width:8px; height:8px; border-radius:50%; flex:0 0 auto; }
.qpanel.d .dot-key{ background:var(--green-ink); }
.qpanel.i .dot-key{ background:var(--red-ink); }
.qpanel.c .dot-key{ background:var(--amber-ink); }
.qpanel.s .dot-key{ background:var(--ms-ink); }
.qpanel .qrule{ height:1px; background:currentColor; opacity:.22; margin:0 0 .6rem; }
/* Semibold heading, smaller and lighter description. */
.qpanel dl{ margin:0; }
.qpanel dt{ font-weight:600; font-size:.8rem; color:var(--ink); margin-top:.55rem; }
.qpanel dt:first-child{ margin-top:0; }
.qpanel dd{ margin:.1rem 0 0; font-size:.76rem; line-height:1.45; color:var(--muted); }
/* Narrower: the four descriptions move beneath the wheel in two columns. The threshold is
where three columns stop being able to hold both a 1040px chart and two readable panels:
1040 + two 210px panels + gaps needs about 1530px of container. Below that the wheel is
better off with the full width and the panels below it. */
@container (max-width:880px){
.disc-stage{ grid-template-columns:1fr 1fr;
grid-template-areas:"chart chart" "left right" "d i" "c s"; }
/* The side strips keep their 2 - 2 - 1 rows when they move below the wheel. Consistent with
the wide layout, and it needs no separator juggling to switch between shapes. */
.stage-chart{ width:min(1040px, 100cqw, calc((100dvh - 250px) * 720 / 560)); }
}
/* Mobile: one column, wheel then D, i, C, S, which is also the DOM order. */
@container (max-width:640px){
.disc-stage{ grid-template-columns:1fr;
grid-template-areas:"chart" "left" "right" "d" "i" "c" "s"; }
}
/* ---- the person sheet ----
Opened by clicking a dot or a name on the wheel. Shell styles (.sheet, .sheet-head,
.sheet-close, .sheet-body) come from app.css, shared with the certification badge sheet; only
the inside of the body is here. Chosen over a hover card and a docked side panel because it is
the only one of the three with room for the quadrant reference text underneath the reading. */
.ps-quad{ display:inline-flex; align-items:center; gap:.4rem; font-size:.78rem;
color:var(--muted); margin-top:.15rem; }
.ps-dot{ width:10px; height:10px; border-radius:50%; flex:0 0 auto;
border:1px solid rgba(0,0,0,.25); }
.ps-dot.d{ background:var(--d-qi); } .ps-dot.i{ background:var(--i-qi); }
.ps-dot.s{ background:var(--s-qi); } .ps-dot.c{ background:var(--c-qi); }
/* auto-fit rather than a fixed three, so the three readings sit in a row on a wide sheet and
stack cleanly at 375 without a second media query. */
/* Two layouts for the same three readings, because neither works at both widths.
Narrow: label left, value right, one compact row each. Tried as three stacked cards first and
they cost 180px of a 375-wide sheet; as rows they cost about 90px and read the same. Tried as two
columns before that, which fitted but wrapped "Works at a steadier pace than the middle" into
four cramped lines.
Wide: three cards across, where the label above the value is the clearer shape and there is room
for it. */
.ps-axes{ display:grid; gap:.4rem; margin:0 0 .9rem; grid-template-columns:1fr; }
.ps-axes > div{ font-size:.82rem; display:grid; grid-template-columns:4.6rem 1fr;
gap:.5rem; align-items:baseline; padding:.15rem 0; }
.ps-axes span{ font-size:.66rem; text-transform:uppercase; letter-spacing:.04em;
color:var(--muted); }
@media (min-width:520px){
.ps-axes{ grid-template-columns:repeat(3, 1fr); gap:.5rem; }
.ps-axes > div{ display:block; background:var(--tint); border:1px solid var(--rule);
border-radius:8px; padding:.45rem .6rem; }
.ps-axes span{ display:block; margin-bottom:.1rem; }
}
.ps-block{ border-top:1px solid var(--rule); padding-top:.65rem; margin-top:.85rem; }
/* Small uppercase muted text is the treatment a reader skips, which is what these were. Now a
tinted chip in full ink, the same fix .card h4 got on the leading guide when Alex raised it
there: still compact, but it divides a long sheet into findable parts instead of dissolving
into it. inline-block so the chip is the width of its own label rather than the sheet.
Deliberately identical to the guide's, so the two pages do not each invent a heading. */
.ps-block h4{ display:inline-block; margin:0 0 .45rem; font-size:.72rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--ink);
background:var(--tint); border:1px solid var(--rule); border-radius:6px;
padding:.17rem .45rem; }
/* Each priority is a row carrying what the person actually does with it, which replaced a row of
bare chips. The chips were compact but said nothing the reader could act on, and the whole point
of this sheet is the specific person. */
.ps-prios{ list-style:none; margin:0; padding:0; }
.ps-prios li{ padding:.4rem 0; border-top:1px dotted var(--rule); }
.ps-prios li:first-child{ border-top:0; padding-top:.1rem; }
.ps-prios b{ font-size:.82rem; }
/* Two columns, name left and meaning right, so every description starts at the same x. Only on
.cols: the same list class also renders the five coaching moves, whose labels are whole
sentences ("Assign outcomes, not checklists") and would leave a description column too narrow
to read.
7.25rem holds "Collaboration", the longest of the eight, and the "unusual for CD" tag that sits
under it on a stretch row. Stacks below 520px, where a 116px label column left about 185px for
a description: the same call the axis readings above make, for the same reason. */
@media (min-width:520px){
.ps-prios.cols li{ display:grid; grid-template-columns:7.25rem 1fr; gap:.75rem;
align-items:baseline; }
.ps-prios.cols .does{ margin-top:0; }
}
.ps-k{ min-width:0; }
.ps-v{ min-width:0; }
.ps-prios .does{ display:block; font-size:.79rem; color:var(--ink); margin-top:.1rem; }
/* The lead-facing line, shown only to someone who actually leads this person. Tinted so it reads
as advice rather than as more description. */
.ps-prios .ldo{ display:block; font-size:.78rem; color:var(--blue); margin-top:.2rem;
padding-left:.6rem; border-left:2px solid var(--rule); }
:root[data-theme="dark"] .ps-prios .ldo{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ps-prios .ldo{ color:var(--bluesub); }
}
.ps-prios li.stretch b{ color:var(--blue); }
:root[data-theme="dark"] .ps-prios li.stretch b{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ps-prios li.stretch b{ color:var(--bluesub); }
}
/* Under the name rather than after it. In a two-column row there is no width to spare beside
"Collaboration", and the tag is a footnote to the name, not part of it. */
.ps-tag{ display:block; font-size:.66rem; color:var(--muted); margin-top:.05rem; }
.ps-fine{ margin:.5rem 0 0; font-size:.76rem; color:var(--muted); }
/* --blue is a deep navy chosen for the light theme and measures 1.41:1 against the dark paper,
which is invisible. Measured, not assumed. Three rules because the theme has three states, the
same pattern .mh-nav and .fix-link use, and this text carries the report-versus-dot disagreement,
which is the one line on the sheet that asks the reader to go and fix something. */
.ps-warn{ margin:.6rem 0 0; font-size:.79rem; color:var(--blue); }
:root[data-theme="dark"] .ps-warn{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ps-warn{ color:var(--bluesub); }
}
.ps-asof{ margin:.85rem 0 0; padding-top:.55rem; border-top:1px solid var(--rule);
font-size:.74rem; color:var(--muted); font-variant-numeric:tabular-nums; }
/* Playbook prose. Full-width paragraphs rather than the label-and-value rows the axis readings
use: these are two or three sentences each, and a 4.6rem label column would leave them a
column too narrow to read. */
.ps-body{ margin:0; font-size:.82rem; }
/* The five coaching moves, folded away and shown only to whoever leads this person. Collapsed
because it is five paragraphs, and the packet's own instruction is to return to it before a
coaching conversation: that is something a lead opens deliberately, not something to scroll
past on the way to the date. */
.ps-moves{ border-top:1px solid var(--rule); margin-top:.85rem; padding-top:.65rem; }
.ps-moves > summary{ cursor:pointer; display:inline-block; font-size:.72rem; font-weight:700;
letter-spacing:.06em; text-transform:uppercase; color:var(--blue);
background:var(--tint); border:1px solid var(--rule); border-radius:6px;
padding:.17rem .45rem .17rem .3rem; }
:root[data-theme="dark"] .ps-moves > summary{ color:var(--bluesub); }
@media (prefers-color-scheme: dark){
:root:not([data-theme="light"]) .ps-moves > summary{ color:var(--bluesub); }
}
.ps-moves > summary:hover{ text-decoration:underline; }
.ps-moves[open] > summary{ margin-bottom:.5rem; }