/* Prioritisation and roadmap pieces, on top of the shared Daylight styles (tokens.css, styles.css). */

/* scoring: five buttons per criterion, the anchors under 1, 3 and 5 */
.crit .wt-chip { margin-left: auto; font-size: var(--t-small); font-weight: 700; color: var(--muted); }
.scorebtns { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: var(--sp-2); margin-top: var(--sp-3); }
.scorebtn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 2px; min-height: 4.25rem; padding: var(--sp-2); border: 2px solid var(--line-strong); border-radius: var(--r-m); background: var(--surface); color: var(--ink); font-family: var(--font-text); text-align: center; cursor: pointer; }
.scorebtn b { font-family: var(--font-display); font-size: 1.5rem; line-height: 1.1; }
.scorebtn small { font-size: 0.75rem; line-height: 1.2; color: var(--muted); font-weight: 500; }
.scorebtn[aria-pressed='true'] { background: var(--ink); border-color: var(--ink); color: var(--bg); }
.scorebtn[aria-pressed='true'] small { color: var(--bg); opacity: 0.85; }
.scorebtn:disabled { opacity: 0.55; cursor: default; }
@media (max-width: 30rem) { .scorebtn small { display: none; } .scorebtn { min-height: 3rem; } }
.resultbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--sp-3); padding: var(--sp-3) var(--sp-5); margin: var(--sp-3) 0; border-radius: var(--r-l); background: var(--sunk); color: var(--muted); }
.resultbar.ok { background: var(--ink); color: var(--bg); }
.resultbar b { font-family: var(--font-display); font-size: 2rem; letter-spacing: -0.03em; }

/* quadrants and statuses */
.pill.q-actnow { background: var(--cat-3-soft); color: var(--cat-3-text); }
.pill.q-plan { background: var(--cat-2-soft); color: var(--cat-2-text); }
.pill.q-quickfix { background: var(--cat-6-soft); color: var(--cat-6-text); }
.pill.q-review { background: var(--cat-5-soft); color: var(--cat-5-text); }
.pill.discuss { background: var(--wrong-soft); color: var(--wrong-text); margin-left: var(--sp-2); }
.pill.o-resolved { background: var(--right-soft); color: var(--right-text); }
.pill.o-dtsc, .pill.o-board { background: var(--notice); }

/* ranking table */
.t.rank .rankn { font-family: var(--font-display); font-size: 1.25rem; font-weight: 800; }
.t.rank .rname { display: inline-flex; align-items: center; gap: var(--sp-2); }
.t.rank .rname .sq { width: 1.75rem; height: 1.75rem; border-radius: 8px; }
.t.rank td.score { font-weight: 800; white-space: nowrap; }
.sbar { display: inline-block; vertical-align: middle; width: 3.5rem; height: 0.5rem; margin-right: var(--sp-2); border-radius: var(--r-pill); background: var(--sunk); overflow: hidden; }
.sbar i { display: block; height: 100%; background: var(--ink); border-radius: var(--r-pill); }
tr.flagrow { background: var(--wrong-soft); }
td.bad { color: var(--wrong-text); font-weight: 800; }
tr.tap { cursor: pointer; }

/* dots */
.dotsleft { display: flex; align-items: center; gap: var(--sp-2); margin: var(--sp-3) 0 var(--sp-4); }
.dot { display: inline-block; width: 1.1rem; height: 1.1rem; border-radius: 50%; border: 2px solid var(--line-strong); background: transparent; }
.dot.on { background: var(--ink); border-color: var(--ink); }
.dotcount { display: inline-flex; gap: 3px; min-width: 4.5rem; justify-content: center; align-items: center; font-weight: 700; color: var(--muted); }
.dotcount .dot { width: 0.8rem; height: 0.8rem; }
.votebars { display: grid; gap: var(--sp-2); }
.vb { display: grid; grid-template-columns: minmax(12rem, 2fr) 3fr 2.5rem; align-items: center; gap: var(--sp-3); }
.vbl { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.vbb { height: 1.25rem; background: var(--sunk); border-radius: var(--r-pill); overflow: hidden; }
.vbb i { display: block; height: 100%; background: var(--s-field); border-radius: var(--r-pill); }
.vbn { font-family: var(--font-display); font-size: 1.25rem; text-align: right; }
@media (max-width: 40rem) { .vb { grid-template-columns: 1fr 2.5rem; } .vbb { grid-column: 1 / -1; grid-row: 2; } }

/* gantt: one row per initiative, one cell per period; the line after 2027 Q4 is the Phase 1 gate */
.gantt { display: grid; gap: 2px; overflow-x: auto; margin: var(--sp-4) 0; }
.gantt.big { margin: 0; padding: var(--sp-3) var(--sp-4); }
.grow { display: grid; grid-template-columns: minmax(14rem, 22rem) minmax(26rem, 1fr); align-items: center; gap: var(--sp-3); padding: var(--sp-2) 0; border: 0; border-bottom: 1px solid var(--line); background: none; border-radius: 0; text-align: left; font: inherit; color: inherit; width: 100%; min-height: 0; box-shadow: none; }
button.grow { cursor: pointer; }
@media (hover: hover) { button.grow:hover { background: var(--sunk); transform: none; } }
.grow.unplaced .gl { color: var(--muted); }
.ghead { border-bottom: 2px solid var(--ink); font-size: 0.75rem; font-weight: 800; color: var(--muted); }
.ghead .gc { white-space: pre-line; text-align: center; line-height: 1.15; background: none; height: auto; }
.gl { display: flex; align-items: center; gap: var(--sp-2); min-width: 0; font-size: var(--t-small); line-height: 1.25; flex-wrap: wrap; }
.gl .sq { width: 1.6rem; height: 1.6rem; border-radius: 7px; }
.gl small { color: var(--muted); }
.gl .pill { margin-left: 0; }
.gpick { display: flex; gap: var(--sp-2); flex-basis: 100%; }
.gpick select { min-height: 2.25rem; padding: 2px var(--sp-2); font-size: 0.875rem; flex: 1; }
.gcells, .gline { display: grid; grid-template-columns: repeat(11, minmax(2.3rem, 1fr)); gap: 2px; }
.gcells.stack2 { grid-template-columns: 1fr; gap: 3px; }
.gc { height: 1.5rem; border-radius: 5px; background: var(--sunk); }
.gc.on { background: var(--s-field); }
.gc.gate { box-shadow: inset -3px 0 0 -1px var(--ink); }
.ghead .gc.gate { box-shadow: none; text-decoration: underline; color: var(--ink); }
.gline.props .gc { height: 0.9rem; background: none; box-shadow: none; font-size: 0.75rem; line-height: 0.9rem; text-align: center; letter-spacing: -1px; color: var(--muted); }

/* constraint findings */
.findings { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--sp-2); }
.fd { display: flex; align-items: flex-start; gap: var(--sp-3); padding: var(--sp-2) var(--sp-3); border-radius: var(--r-m); background: var(--sunk); }
.fd .fdi { flex: none; display: inline-grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%; font-weight: 800; font-size: 0.8125rem; background: var(--line-strong); color: var(--surface); }
.fd > span:nth-child(2) { flex: 1; }
.fd.bad { background: var(--wrong-soft); }
.fd.bad .fdi { background: var(--wrong-text); }
.fd.warn { background: var(--notice); }
.fd.warn .fdi { background: var(--ink); }

/* consensus */
.opts.cons { margin: var(--sp-3) 0; }
.opts.cons .opt[aria-pressed='true'].lv1 { background: var(--wrong-text); border-color: var(--wrong-text); color: #fff; }
.cscard.blocked { border-color: var(--wrong-text); }
.cscard.ok { background: var(--sunk); }
.cscard .row input { flex: 1; min-width: 12rem; }
td.lvl { font-weight: 800; }
td.lvl.l1 { background: var(--wrong-soft); color: var(--wrong-text); }
td.lvl.l2 { background: var(--notice); }
td.lvl.l5, td.lvl.l4 { color: var(--right-text); }

/* matrix */
svg.matrix { display: block; width: 100%; height: auto; max-height: 72vh; }
svg.matrix .mq { font-family: var(--font-display); font-weight: 800; font-size: 18px; }
svg.matrix .mt { font-size: 13px; fill: var(--muted); }
svg.matrix .ma { font-size: 14px; font-weight: 700; fill: var(--ink); }
svg.matrix .ml { font-size: 12px; font-weight: 800; fill: var(--ink); paint-order: stroke; stroke: var(--surface); stroke-width: 3px; }

/* facilitator: stage picker, group names */
.opts.stages .opt { display: inline-flex; align-items: center; gap: var(--sp-2); text-align: left; padding: var(--sp-2) var(--sp-4); }
.opts.stages .opt span { display: grid; }
.opts.stages .opt small { font-weight: 500; opacity: 0.8; }
.gnames { display: grid; grid-template-columns: repeat(auto-fill, minmax(12rem, 1fr)); gap: var(--sp-2) var(--sp-4); margin-bottom: var(--sp-3); }
.gnames label { display: grid; gap: 2px; font-weight: 700; font-size: var(--t-small); }
html.display .gantt.big .grow { padding: 4px 0; }

/* wide tables scroll inside their panel instead of squeezing */
.t.rank { min-width: 64rem; }
.t.rank th, .t.rank td { white-space: nowrap; overflow-wrap: normal; }
.t.rank tbody th { white-space: normal; min-width: 16rem; }
.gl > span:not(.sq):not(.gpick) { flex: 1 1 10rem; min-width: 0; }
@media (max-width: 40rem) {
  .grow { grid-template-columns: minmax(0, 1fr); gap: var(--sp-2); }
  .gcells, .gline { grid-template-columns: repeat(11, minmax(0, 1fr)); }
  .ghead .gl { display: none; }
  .ghead .gc { font-size: 0.625rem; }
}