/* ============================================================================
   BATTLE MVP - Command Center v2
   Namespace: .cc-*    File: assets/command.css

   WHY A NEW FILE AND A NEW PREFIX
     .hx-bar is the hub navigation. Session 16 proved that reusing hx-* for
     bars and metrics collapses the menu through the cascade. Nothing here
     touches hx-*.
     Reusing an existing asset name overwrote assets/training.css once
     (Training Center session). command.css is a new name, verified free.

   THEMING
     Surfaces are built from --bm-ink-rgb, which flips between
     234,241,255 (dark) and 13,23,33 (light). An rgba() overlay on that base
     is correct in both themes without a parallel light stylesheet.
     Hardcoded values appear only as fallbacks after a token.
   ========================================================================= */

.cc-root {
    --cc-gap: 10px;
    --cc-radius: 12px;
    --cc-pad: 13px;
    --cc-surface: rgba(var(--bm-ink-rgb, 234, 241, 255), .028);
    --cc-surface-2: rgba(var(--bm-ink-rgb, 234, 241, 255), .05);
    --cc-line: rgba(var(--bm-ink-rgb, 234, 241, 255), .10);
    --cc-line-soft: rgba(var(--bm-ink-rgb, 234, 241, 255), .06);
    --cc-acc: var(--bm-acc-ink, #00ffa6);
    --cc-acc-dim: var(--bm-acc-dim, rgba(0, 255, 166, .10));
    --cc-acc-bdr: var(--bm-acc-bdr, rgba(0, 255, 166, .28));
    --cc-warn: var(--bm-gold2, #e8b84b);
    --cc-loss: #ff5c6e;
    --cc-txt: var(--bm-txt, #eaf1ff);
    /* Muted steps are defined here rather than chained to --bm-mu3: that
       token resolves far darker than its own fallback implied, and the
       explanatory lines under every heading became unreadable. Body copy
       must stay legible - it is where the honesty of this page lives. */
    --cc-mu: rgba(var(--bm-ink-rgb, 234, 241, 255), .74);
    --cc-mu2: rgba(var(--bm-ink-rgb, 234, 241, 255), .56);

    display: flex;
    flex-direction: column;
    gap: var(--cc-gap);
    color: var(--cc-txt);
}

/* --- shared primitives ---------------------------------------------------- */

.cc-panel {
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: var(--cc-pad);
    min-width: 0;
}

.cc-panel-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 9px;
}

.cc-panel-head h2 {
    margin: 0;
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--cc-mu);
}

.cc-panel-head a {
    font-size: 12px;
    color: var(--cc-mu);
    text-decoration: none;
    white-space: nowrap;
}

.cc-panel-head a:hover { color: var(--cc-acc); }

.cc-sub {
    font-size: 11.5px;
    color: var(--cc-mu2);
    margin: -4px 0 9px;
}

/* Honest empty state. Never a zero, always a sentence plus a way out. */
.cc-empty {
    padding: 12px 14px;
    border: 1px dashed var(--cc-line);
    border-radius: 9px;
    background: transparent;
}

.cc-empty p {
    margin: 0 0 2px;
    font-size: 13px;
    font-weight: 600;
}

.cc-empty span {
    display: block;
    font-size: 12px;
    color: var(--cc-mu);
    line-height: 1.45;
}

.cc-empty .cc-btn { margin-top: 10px; }

/* Em-dash for unmeasured values. Never 0, never a placeholder. */
.cc-dash { color: var(--cc-mu2); font-weight: 500; }

.cc-btn {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-radius: 9px;
    border: 1px solid var(--cc-line);
    background: var(--cc-surface-2);
    color: var(--cc-txt);
    font-size: 13px;
    font-weight: 700;
    text-decoration: none;
    line-height: 1;
    transition: border-color .15s, background .15s, transform .1s;
}

.cc-btn:hover { border-color: var(--cc-acc-bdr); transform: translateY(-1px); }

.cc-btn-primary {
    background: var(--cc-acc);
    border-color: var(--cc-acc);
    color: #05231a;
}

.cc-btn-primary:hover { filter: brightness(1.08); }

.cc-btn-sm { padding: 7px 12px; font-size: 12px; }

.cc-chip {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 4px 10px;
    border-radius: 20px;
    border: 1px solid var(--cc-line);
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .04em;
    color: var(--cc-mu);
    white-space: nowrap;
}

.cc-chip-warn { color: var(--cc-warn); border-color: rgba(232, 184, 75, .30); }
.cc-chip-acc  { color: var(--cc-acc); border-color: var(--cc-acc-bdr); background: var(--cc-acc-dim); }

/* --- [A] status bar ------------------------------------------------------- */

.cc-status {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    background: var(--cc-surface);
    border: 1px solid var(--cc-line);
    border-radius: var(--cc-radius);
    padding: 10px 14px;
}

.cc-st-id { display: flex; align-items: center; gap: 12px; min-width: 0; }

.cc-st-ava {
    width: 38px; height: 38px;
    border-radius: 10px;
    object-fit: cover;
    border: 1px solid var(--cc-line);
    background: var(--cc-surface-2);
    flex: 0 0 auto;
    display: grid; place-items: center;
    font-weight: 800; font-size: 17px;
    color: var(--cc-mu);
}

.cc-st-nick {
    font-size: 15px;
    font-weight: 800;
    letter-spacing: .01em;
    line-height: 1.2;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    max-width: 210px;
}

.cc-st-state { font-size: 11.5px; color: var(--cc-mu); margin-top: 3px; }

/* Rank block. Hidden entirely when the player is unranked - there is no
   tier to show, and showing the entry BR as a tier is the exact fabrication
   this redesign removes. */
.cc-st-rank { display: flex; align-items: center; gap: 12px; }

.cc-st-icon { width: 28px; height: 28px; flex: 0 0 auto; }
.cc-st-icon img { width: 100%; height: 100%; object-fit: contain; }

.cc-st-br {
    font-size: 22px;
    font-weight: 800;
    line-height: 1;
    letter-spacing: -.01em;
    font-variant-numeric: tabular-nums;
}

.cc-st-br small { font-size: 11px; font-weight: 700; color: var(--cc-mu); margin-left: 4px; }

.cc-st-delta { font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.cc-st-delta.up   { color: var(--cc-acc); }
.cc-st-delta.down { color: var(--cc-loss); }

.cc-st-prog { flex: 1 1 200px; min-width: 160px; }

/* NOT .hx-bar - that class belongs to the hub navigation. */
.cc-prog-track {
    height: 6px;
    border-radius: 4px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .09);
    overflow: hidden;
}

.cc-prog-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--cc-acc);
}

.cc-prog-meta {
    display: flex; justify-content: space-between;
    font-size: 11px; color: var(--cc-mu2); margin-top: 6px;
}

.cc-st-cta { display: flex; gap: 8px; margin-left: auto; flex-wrap: wrap; }

/* --- layout grid ---------------------------------------------------------- */

.cc-grid {
    display: grid;
    grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr);
    gap: var(--cc-gap);
    align-items: start;
}

.cc-col { display: flex; flex-direction: column; gap: var(--cc-gap); min-width: 0; }

/* --- [B] next step -------------------------------------------------------- */

.cc-next-list { display: flex; flex-direction: column; gap: 7px; }

.cc-next {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 10px 12px;
    border-radius: 10px;
    border: 1px solid var(--cc-line);
    background: var(--cc-surface-2);
    text-decoration: none;
    color: inherit;
    transition: border-color .15s, transform .1s;
}

.cc-next:hover { border-color: var(--cc-acc-bdr); transform: translateX(2px); }

.cc-next-1 { border-color: var(--cc-acc-bdr); background: var(--cc-acc-dim); }

.cc-next-ico {
    width: 26px; height: 26px; flex: 0 0 auto;
    display: grid; place-items: center;
    border-radius: 8px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .07);
    font-size: 15px;
}

.cc-next-tx { min-width: 0; }
.cc-next-tx b { display: block; font-size: 13px; font-weight: 700; line-height: 1.35; }
.cc-next-tx span { display: block; font-size: 11.8px; color: var(--cc-mu); line-height: 1.5; margin-top: 4px; }
.cc-next-go { margin-left: auto; align-self: center; color: var(--cc-mu2); font-size: 16px; }

/* --- [C] form ------------------------------------------------------------- */

.cc-form-strip { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }

.cc-fm {
    width: 28px; height: 28px;
    display: grid; place-items: center;
    border-radius: 7px;
    font-size: 12px; font-weight: 800;
    text-decoration: none;
    border: 1px solid transparent;
    transition: transform .1s;
}

.cc-fm:hover { transform: translateY(-2px); }
.cc-fm.win  { background: var(--cc-acc-dim); color: var(--cc-acc); border-color: var(--cc-acc-bdr); }
.cc-fm.loss { background: rgba(255, 92, 110, .10); color: var(--cc-loss); border-color: rgba(255, 92, 110, .26); }

.cc-form-rows { display: flex; flex-direction: column; }

.cc-form-row {
    display: grid;
    grid-template-columns: 18px minmax(0, 1fr) auto auto;
    align-items: center;
    gap: 10px;
    padding: 7px 4px;
    border-top: 1px solid var(--cc-line-soft);
    text-decoration: none;
    color: inherit;
    font-size: 13px;
}

.cc-form-row:hover { background: var(--cc-surface-2); }
.cc-form-row .res { font-weight: 800; }
.cc-form-row .res.win  { color: var(--cc-acc); }
.cc-form-row .res.loss { color: var(--cc-loss); }
.cc-form-row .map { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cc-form-row .mode { font-size: 10.5px; color: var(--cc-mu2); letter-spacing: .05em; text-transform: uppercase; }
.cc-form-row .sc { font-variant-numeric: tabular-nums; font-weight: 700; }
.cc-form-row .db { font-variant-numeric: tabular-nums; font-size: 12px; min-width: 44px; text-align: right; }
.cc-form-row .db.up   { color: var(--cc-acc); }
.cc-form-row .db.down { color: var(--cc-loss); }

/* --- stats row ------------------------------------------------------------ */

.cc-stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(84px, 1fr));
    gap: 8px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--cc-line-soft);
}

.cc-stat { text-align: center; }
.cc-stat b { display: block; font-size: 16px; font-weight: 800; font-variant-numeric: tabular-nums; line-height: 1.15; }
.cc-stat span { display: block; font-size: 10.5px; color: var(--cc-mu2); letter-spacing: .06em; text-transform: uppercase; margin-top: 4px; }

/* --- [D] br trend --------------------------------------------------------- */

.cc-spark { width: 100%; height: 54px; display: block; overflow: visible; }
.cc-spark .ln { fill: none; stroke: var(--cc-acc); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.cc-spark .ar { fill: var(--cc-acc-dim); stroke: none; }
.cc-spark .pt { fill: var(--cc-acc); }

.cc-trend-last {
    display: flex; align-items: baseline; gap: 10px;
    margin-top: 12px; flex-wrap: wrap;
}

.cc-trend-d { font-size: 20px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-trend-d.up { color: var(--cc-acc); }
.cc-trend-d.down { color: var(--cc-loss); }
.cc-trend-path { font-size: 12px; color: var(--cc-mu); font-variant-numeric: tabular-nums; }

.cc-reasons { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }

/* --- [E] dna -------------------------------------------------------------- */

.cc-axes { display: flex; flex-direction: column; gap: 5px; }

.cc-axis {
    display: grid;
    grid-template-columns: 96px minmax(0, 1fr) 40px;
    align-items: center;
    gap: 9px;
    font-size: 11.8px;
}

.cc-axis-n { color: var(--cc-mu); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.cc-axis-track {
    height: 8px;
    border-radius: 4px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .09);
    overflow: hidden;
}

/* Full opacity on purpose: at .85 over a near-identical track the fill was
   indistinguishable from the track, and every axis read as 100. */
.cc-axis-fill {
    height: 100%;
    border-radius: 4px;
    background: var(--cc-acc);
    box-shadow: 0 0 10px var(--cc-acc-dim);
}
.cc-axis-v { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }

/* Unmeasured axis: dashed empty track, dash instead of a number. */
.cc-axis.na .cc-axis-track { background: transparent; border: 1px dashed var(--cc-line); }
.cc-axis.na .cc-axis-n { color: var(--cc-mu2); }

.cc-dna-note { font-size: 11.5px; color: var(--cc-mu2); margin-top: 12px; line-height: 1.5; }

/* --- [F] platform --------------------------------------------------------- */

.cc-pulse { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.cc-pulse-i { text-align: center; padding: 8px 4px; border-radius: 10px; background: var(--cc-surface-2); }
.cc-pulse-i b { display: block; font-size: 18px; font-weight: 800; font-variant-numeric: tabular-nums; }
.cc-pulse-i span { display: block; font-size: 10px; color: var(--cc-mu2); letter-spacing: .05em; text-transform: uppercase; margin-top: 4px; }
.cc-pulse-hint { font-size: 12px; color: var(--cc-mu); margin-top: 12px; line-height: 1.5; }

.cc-live-row {
    display: flex; align-items: center; gap: 8px;
    padding: 9px 0; border-top: 1px solid var(--cc-line-soft);
    font-size: 12.5px; text-decoration: none; color: inherit;
}

.cc-live-dot {
    width: 7px; height: 7px; border-radius: 50%;
    background: var(--cc-loss); flex: 0 0 auto;
    animation: cc-pulse-dot 1.8s ease-in-out infinite;
}

@keyframes cc-pulse-dot { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

/* --- [G] challenge -------------------------------------------------------- */

.cc-ch-prize { font-size: 22px; font-weight: 800; color: var(--cc-warn); line-height: 1; }
.cc-ch-title { font-size: 13px; font-weight: 700; margin: 8px 0 4px; line-height: 1.35; }
.cc-ch-meta { font-size: 12px; color: var(--cc-mu); line-height: 1.6; }
.cc-ch-foot { margin-top: 14px; }

/* --- [H] feed ------------------------------------------------------------- */

.cc-feed { display: flex; flex-direction: column; }

.cc-feed-row {
    display: flex; align-items: center; gap: 10px;
    padding: 7px 0;
    border-top: 1px solid var(--cc-line-soft);
    text-decoration: none; color: inherit;
    font-size: 12px;
}

.cc-feed-row:first-child { border-top: 0; }

.cc-feed-ava {
    width: 24px; height: 24px; border-radius: 7px; flex: 0 0 auto;
    object-fit: cover; background: var(--cc-surface-2);
    display: grid; place-items: center; font-weight: 800; font-size: 12px; color: var(--cc-mu);
}

.cc-feed-tx { min-width: 0; line-height: 1.4; }
.cc-feed-tx b { font-weight: 700; }
.cc-feed-tx span { display: block; color: var(--cc-mu2); font-size: 11px; }
.cc-feed-sc { margin-left: auto; font-variant-numeric: tabular-nums; font-weight: 700; font-size: 12px; }

/* --- responsive ----------------------------------------------------------- */

@media (max-width: 1100px) {
    .cc-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
    .cc-root { --cc-pad: 14px; --cc-gap: 12px; }
    .cc-status { gap: 12px; }
    .cc-st-cta { margin-left: 0; width: 100%; }
    .cc-st-cta .cc-btn { flex: 1 1 0; justify-content: center; }
    .cc-st-prog { flex-basis: 100%; order: 5; }
    .cc-axis { grid-template-columns: 78px minmax(0, 1fr) 36px; }
    .cc-form-row { grid-template-columns: 16px minmax(0, 1fr) auto; }
    .cc-form-row .mode { display: none; }
}

/* Platform panel, zero-activity form. Three zeros in a row were the exact
   wall of noughts this redesign set out to remove; when nothing is
   happening the panel says so in one sentence instead. */
.cc-quiet {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 11px 13px;
    border-radius: 9px;
    border: 1px dashed var(--cc-line);
    font-size: 12px;
    color: var(--cc-mu);
    line-height: 1.5;
}

.cc-quiet-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: var(--cc-acc); flex: 0 0 auto; opacity: .55;
}

/* AXIS FILL - structural, not cosmetic.

   The diagnosis was right: .cc-axis-track is a grid item and gets blockified
   automatically, while .cc-axis-fill is an ordinary child that stayed
   display:inline, and an inline box ignores width and height. Declaring
   display:block on it should be enough.

   It is not enough to RELY on. The failure mode is not an error - it is every
   axis rendering as a bare full-width track, which reads as "everyone scores
   100", and nothing in the page complains. Making the track a flex container
   removes the choice: a flex item is blockified by its parent, so the fill has
   a computed width no matter how the span is declared or overridden. */
.cc-axis-track {
    display: flex;
    align-items: stretch;
}

.cc-axis-fill {
    display: block;
    flex: 0 0 auto;
    min-width: 2px;          /* a measured axis is never invisible */
    align-self: stretch;
}

/* Same construction, same fix. */
.cc-prog-track { display: flex; align-items: stretch; }
.cc-prog-fill  { display: block; flex: 0 0 auto; align-self: stretch; }

/* ---- LIVE STRIP ---------------------------------------------------------
   Personal lifecycle state. Hidden while idle, so an idle page keeps exactly
   the layout it had before this block existed - nothing shifts under the
   cursor of someone who is just reading. */

.cc-live {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 11px 14px;
    border-radius: var(--cc-radius);
    border: 1px solid var(--cc-acc-bdr);
    background: var(--cc-acc-dim);
}

.cc-live[hidden] { display: none; }

.cc-live-pip {
    width: 9px; height: 9px; border-radius: 50%;
    background: var(--cc-acc); flex: 0 0 auto;
    animation: cc-pip 1.6s ease-in-out infinite;
}

@keyframes cc-pip {
    0%, 100% { opacity: 1;  transform: scale(1); }
    50%      { opacity: .4; transform: scale(.8); }
}

.cc-live-tx { min-width: 0; line-height: 1.35; }

.cc-live-tx b {
    display: block;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .08em;
    color: var(--cc-acc);
}

.cc-live-tx span {
    display: block;
    font-size: 12.5px;
    color: var(--cc-txt);
    font-variant-numeric: tabular-nums;
}

.cc-live .cc-btn { margin-left: auto; }

/* ACCEPT is the only state with a hard deadline, so it is the only one that
   gets an urgent treatment. Making every state red would train players to
   ignore the colour. */
.cc-live[data-state="accept"] {
    border-color: rgba(232, 184, 75, .45);
    background: rgba(232, 184, 75, .10);
}
.cc-live[data-state="accept"] .cc-live-pip  { background: var(--cc-warn); }
.cc-live[data-state="accept"] .cc-live-tx b { color: var(--cc-warn); }

.cc-live[data-state="live"] {
    border-color: rgba(255, 92, 110, .40);
    background: rgba(255, 92, 110, .09);
}
.cc-live[data-state="live"] .cc-live-pip  { background: var(--cc-loss); }
.cc-live[data-state="live"] .cc-live-tx b { color: var(--cc-loss); }

@media (max-width: 720px) {
    .cc-live { flex-wrap: wrap; }
    .cc-live .cc-btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---- FORM BLOCK, second pass -------------------------------------------
   The first version put four values on one baseline with nothing holding
   them together, and floated five bare numbers underneath. Correct data,
   no structure - it read as an unstyled fragment. This pass gives the row a
   spine and puts the metrics in containers. */

/* Head with three parts: title, record, link. */
.cc-panel-head.cc-head-3 { align-items: center; }

.cc-record {
    margin-right: auto;
    display: inline-flex;
    align-items: baseline;
    gap: 3px;
    padding: 2px 9px;
    border-radius: 20px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .05);
    border: 1px solid var(--cc-line);
    font-variant-numeric: tabular-nums;
    font-size: 12px;
}

.cc-record b { font-weight: 800; }
.cc-record b:first-of-type { color: var(--cc-acc); }
.cc-record b:last-of-type  { color: var(--cc-loss); }
.cc-record i { font-style: normal; color: var(--cc-mu2); }

/* Row: result badge, two-line identity, score pill, delta. */
.cc-form-rows { margin-top: 2px; }

.cc-form-row {
    grid-template-columns: 26px minmax(0, 1fr) auto 52px;
    gap: 11px;
    padding: 8px 8px;
    margin: 0 -8px;
    border-top: 1px solid var(--cc-line-soft);
    border-radius: 8px;
}

.cc-form-row:first-child { border-top: 0; }

.cc-form-row .res {
    width: 26px; height: 26px;
    display: grid; place-items: center;
    border-radius: 7px;
    font-size: 12px;
    border: 1px solid transparent;
}

.cc-form-row .res.win  { background: var(--cc-acc-dim); border-color: var(--cc-acc-bdr); }
.cc-form-row .res.loss { background: rgba(255, 92, 110, .10); border-color: rgba(255, 92, 110, .26); }

/* Map on top, mode underneath - one line each instead of a run-on. */
.cc-form-row .map { line-height: 1.3; font-weight: 600; }
.cc-form-row .mode {
    display: block;
    margin-top: 1px;
    font-size: 9.5px;
    font-weight: 600;
    color: var(--cc-mu2);
}

.cc-form-row .sc {
    padding: 3px 9px;
    border-radius: 6px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .06);
    font-size: 12.5px;
}

.cc-form-row .db { font-weight: 700; }

/* Metrics as tiles. Bare numbers on a flat panel were the main reason this
   section looked unfinished. */
.cc-stats {
    grid-template-columns: repeat(auto-fit, minmax(74px, 1fr));
    gap: 6px;
    border-top: 0;
    padding-top: 0;
    margin-top: 12px;
}

.cc-stat {
    padding: 9px 6px;
    border-radius: 9px;
    background: rgba(var(--bm-ink-rgb, 234, 241, 255), .04);
    border: 1px solid var(--cc-line-soft);
}

.cc-stat b { font-size: 17px; }

.cc-stat span {
    font-size: 9.5px;
    letter-spacing: .07em;
    margin-top: 3px;
}

/* Provenance line: quiet, but never dropped. It is what makes the numbers
   above trustworthy rather than decorative. */
.cc-stats + .cc-dna-note { font-size: 11px; margin-top: 9px; }

/* ---- THIRD PASS: two-heading empty states, dangling separator ------------
   A panel already carries a heading. Repeating one inside its empty state
   gave BR TREND and PLATFORM two titles stacked on a single sentence, which
   made a one-line fact occupy a third of the column. */

.cc-empty-flat {
    padding: 10px 12px;
    border-style: dashed;
}

.cc-empty-flat span {
    font-size: 12px;
    color: var(--cc-mu);
    line-height: 1.45;
}

/* The provenance line ended with a floating middot whenever the chip was
   present, because the separator was typed into the markup rather than
   produced by the layout. */
.cc-prov {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 8px;
}

.cc-prov > span:first-child { color: var(--cc-mu2); }

/* The quiet-platform line is itself the whole panel body; the extra dashed
   frame around a dashed-framed page section was noise. */
.cc-quiet {
    border-style: dashed;
    padding: 10px 12px;
}