/* Console: the progress board (docs/console/PLAN.md lane C4). Scoped to [data-ui="chartroom"]. */
[data-ui="chartroom"] .cr-prog { color: var(--pc-ink); }
[data-ui="chartroom"] .cr-prog .cr-prog__head { margin: 0 0 16px; padding: 0 0 10px; border-bottom: 2px solid var(--pc-ink); }
[data-ui="chartroom"] .cr-prog .cr-prog__title { margin: 0; color: var(--pc-ink); font: 700 clamp(32px, 4vw, 48px)/.9 var(--cr-cond); letter-spacing: .045em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog .cr-prog__title::after { content: ""; display: block; width: 74px; height: 4px; margin-top: 7px; background: var(--pc-brass); }

/* Level and chapter: a steel band */
[data-ui="chartroom"] .cr-prog__scale-head, [data-ui="chartroom"] .cr-prog__band { display: block; margin: 0 0 22px; padding: 0; border: 0; }
[data-ui="chartroom"] .cr-prog .cr-prog__ladder { padding: 16px 22px 18px; color: var(--pc-paper); background: linear-gradient(180deg, #0F3F52, var(--pc-sea)); border: 1px solid #07202B; border-radius: 3px; box-shadow: inset 0 0 0 3px #0B3445, inset 0 0 0 4px rgba(201, 151, 58, .45), 3px 3px 0 color-mix(in srgb, var(--pc-steel) 60%, transparent); border-bottom: 1px solid #07202B; }
[data-ui="chartroom"] .cr-prog .cr-prog__ladder .cr-prog__kicker { color: var(--pc-brass-hi, #E3B65A); font: 700 18px/1.1 var(--cr-cond); letter-spacing: .12em; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__level { display: grid; grid-template-columns: 140px minmax(0, 1fr); grid-template-areas: "medal bar" "medal line"; gap: 8px 26px; align-items: center; }
[data-ui="chartroom"] .cr-prog__medalwrap { grid-area: medal; line-height: 0; }
[data-ui="chartroom"] .cr-prog__medal { display: block; width: 140px; height: 140px; filter: drop-shadow(0 3px 3px rgba(0, 0, 0, .45)); }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__level-no { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__level-bar { grid-area: bar; color: var(--pc-paper); }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__meter { height: 14px; background: #06222D; box-shadow: inset 0 0 0 1.5px #5C7C89; border-radius: 2px; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__meter i { background: linear-gradient(180deg, var(--pc-brass-hi, #E3B65A), var(--pc-brass)); }
[data-ui="chartroom"] .cr-prog__ladder :is(.cr-prog__note, .cr-prog__dim, .cr-prog__gate) { color: #D6E2E4; font: 500 16px/1.35 var(--cr-body); }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__note b, [data-ui="chartroom"] .cr-prog__ladder .cr-prog__gate b { color: var(--pc-paper); font-variant-numeric: tabular-nums; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__togo { margin: 2px 0 0; color: var(--pc-brass-hi, #E3B65A); font: 700 22px/1.2 var(--cr-cond); letter-spacing: .04em; font-variant-numeric: tabular-nums; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__gate { margin: 8px 0 0; padding: 0; border: 0; }

/* The chapter timeline: three plates on a line */
[data-ui="chartroom"] .cr-prog__chapters { grid-area: line; position: relative; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 10px 0 0; padding: 0; list-style: none; }
[data-ui="chartroom"] .cr-prog__chapters::before { content: ""; position: absolute; left: 6%; right: 6%; top: 21px; height: 3px; background: #4F6B78; }
[data-ui="chartroom"] .cr-prog__chapter { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 8px 8px; text-align: center; color: #AFC3CA; background: #0B3445; border: 1px solid #4F6B78; border-radius: 3px; }
[data-ui="chartroom"] .cr-prog__chapter-year { font: 700 26px/1.1 var(--cr-serif); font-variant-numeric: tabular-nums; }
[data-ui="chartroom"] .cr-prog__chapter b { font: 700 13px/1.1 var(--cr-cond); letter-spacing: .12em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog__chapter small { font: 500 14px/1.25 var(--cr-body); }
[data-ui="chartroom"] .cr-prog__chapter.is-past { color: #D6E2E4; border-color: #8FD3CF; }
[data-ui="chartroom"] .cr-prog__chapter.is-current { color: #2D1F06; background: linear-gradient(180deg, #F0CB73, var(--pc-brass)); border-color: #5E410F; box-shadow: 0 0 0 2px rgba(227, 182, 90, .45); }
[data-ui="chartroom"] .cr-prog__chapter.is-next { opacity: .92; border-style: dashed; }

/* Captain's objectives: a clipboard */
[data-ui="chartroom"] .cr-prog .cr-prog__work, [data-ui="chartroom"] .cr-prog [aria-labelledby="cr-prog-goals-h"] { position: relative; margin-top: 18px; padding: 24px 20px 14px; background: var(--pc-paper-hi); border: 1px solid var(--pc-ink); border-radius: 2px; box-shadow: 3px 3px 0 color-mix(in srgb, var(--pc-steel) 60%, transparent); }
[data-ui="chartroom"] .cr-prog .cr-prog__work::before, [data-ui="chartroom"] .cr-prog [aria-labelledby="cr-prog-goals-h"]::before { content: ""; position: absolute; left: 50%; top: -12px; width: 96px; height: 22px; transform: translateX(-50%); background: linear-gradient(180deg, #9FB4BD, #4F6B78); border: 1px solid #1E414E; border-radius: 4px 4px 2px 2px; box-shadow: inset 0 2px 0 rgba(255, 255, 255, .4); }
[data-ui="chartroom"] .cr-prog .cr-prog__work > summary, [data-ui="chartroom"] .cr-prog .cr-prog__work .cr-prog__kicker, [data-ui="chartroom"] .cr-prog .cr-eyebrow { color: var(--pc-ink); font: 700 20px/1.1 var(--cr-cond); letter-spacing: .08em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog .cr-prog__work-title { display: flex; align-items: flex-start; gap: 10px; color: var(--pc-ink); font: 700 24px/1.15 var(--cr-serif); }
[data-ui="chartroom"] .cr-prog .cr-prog__work-title::before { content: ""; flex: none; width: 20px; height: 20px; margin-top: 3px; background: var(--pc-brass); border: 2px solid var(--pc-ink); border-radius: 2px; box-shadow: inset 0 0 0 3px var(--pc-paper-hi); }
[data-ui="chartroom"] .cr-prog .cr-prog__work .cr-prog__meter { background: #E4D9BC; box-shadow: inset 0 0 0 1.5px var(--pc-ink); border-radius: 2px; }
[data-ui="chartroom"] .cr-prog .cr-prog__work .cr-prog__meter i { background: var(--pc-brass); }
[data-ui="chartroom"] .cr-prog .cr-prog__go { min-height: 44px; color: var(--pc-ink); font: 700 16px/1 var(--cr-cond); letter-spacing: .08em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog .cr-prog__xp { color: var(--pc-steel); font: 700 15px/1.2 var(--cr-cond); letter-spacing: .06em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog__goals li { border-bottom: 1px solid color-mix(in srgb, var(--pc-steel) 45%, transparent); }
[data-ui="chartroom"] .cr-prog__goals .cr-prog__step { width: 22px; height: 22px; margin-top: 4px; border-radius: 2px; border: 2px solid var(--pc-ink); color: var(--pc-ink); background: transparent; }
[data-ui="chartroom"] .cr-prog__goals .is-done .cr-prog__step { background: transparent; border: 2px solid var(--pc-ink); color: var(--pc-ink); }
[data-ui="chartroom"] .cr-prog__goals .cr-prog__step svg { width: 16px; height: 16px; }

/* Achievements: stamped badges */
[data-ui="chartroom"] .cr-prog__achs { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 14px; padding: 12px 0; }
[data-ui="chartroom"] .cr-prog__ach { flex-direction: column; align-items: center; gap: 6px; padding: 10px 8px; text-align: center; }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__seal { width: 84px; height: 84px; }
[data-ui="chartroom"] .cr-prog__ach-main { align-items: center; font: 700 17px/1.2 var(--cr-serif); }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__ach-xp { color: var(--pc-steel); font: 700 14px/1.2 var(--cr-cond); letter-spacing: .08em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__seal.is-done { transform: rotate(-6deg); }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__seal.is-done :is(.cr-prog__seal-edge circle, .cr-prog__seal-face) { fill: color-mix(in srgb, var(--pc-teal) 22%, var(--pc-paper-hi)); stroke: #1F6B69; stroke-width: 1; }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__seal.is-done .cr-prog__seal-mark { stroke: #1F6B69; }
[data-ui="chartroom"] .cr-prog__ach .cr-prog__seal.is-locked { opacity: .6; }
[data-ui="chartroom"] .cr-prog__ach.is-done .cr-prog__ach-main small:not(.cr-prog__ach-xp) { color: #1F6B69; }

/* Leaderboard and season: ledger paper */
[data-ui="chartroom"] .cr-prog__lb, [data-ui="chartroom"] .cr-prog__season { border-left: 2px solid color-mix(in srgb, var(--pc-warn) 70%, transparent); padding-left: 10px; font-variant-numeric: tabular-nums; }
[data-ui="chartroom"] .cr-prog__lb th { color: var(--pc-steel); font: 700 13px/1.2 var(--cr-cond); letter-spacing: .1em; text-transform: uppercase; }
[data-ui="chartroom"] .cr-prog__lb :is(td, th) { border-bottom: 1px solid color-mix(in srgb, var(--pc-steel) 45%, transparent); }

[data-ui="chartroom"] .cr-prog, [data-ui="chartroom"] .cr-prog > *, [data-ui="chartroom"] .cr-prog__ladder .cr-prog__level > * { min-width: 0; }
@media (max-width: 640px) {
  [data-ui="chartroom"] .cr-prog .cr-prog__ladder { padding: 14px; }
  [data-ui="chartroom"] .cr-prog__ladder .cr-prog__level { grid-template-columns: minmax(0, 1fr); grid-template-areas: "medal" "bar" "line"; justify-items: stretch; }
  [data-ui="chartroom"] .cr-prog__medalwrap { justify-self: center; }
  [data-ui="chartroom"] .cr-prog__medal { width: 110px; height: 110px; }
  [data-ui="chartroom"] .cr-prog__chapters { grid-template-columns: minmax(0, 1fr); gap: 10px; padding-left: 14px; }
  [data-ui="chartroom"] .cr-prog__chapters::before { left: 0; right: auto; top: 6%; bottom: 6%; width: 3px; height: auto; }
  [data-ui="chartroom"] .cr-prog__chapter { align-items: flex-start; text-align: left; }
}
[data-ui="chartroom"] .cr-prog--scale .cr-prog__head { display: block; }
[data-ui="chartroom"] .cr-prog__ladder .cr-prog__gate { background: transparent; border: 0; }
[data-ui="chartroom"] .cr-prog .cr-prog__work, [data-ui="chartroom"] .cr-prog [aria-labelledby="cr-prog-goals-h"] { margin-top: 30px; }
[data-ui="chartroom"] .cr-prog .cr-prog__work--fold { padding-top: 24px; }