/* /Components/Pages/Dashboard.razor.rz.scp.css */
/* Scoped to the Dashboard; tokens, pills and buttons come from app.css. */

.dash-bar[b-vj3897d5go] { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.updated[b-vj3897d5go] { display: inline-flex; align-items: center; gap: 2px; font-size: 12px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }

.dash-h[b-vj3897d5go] {
    display: flex;
    align-items: baseline;
    gap: 8px;
    margin: 6px 0 8px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .6px;
    text-transform: uppercase;
}
.dash-h small[b-vj3897d5go] { font-weight: 500; letter-spacing: 0; text-transform: none; color: var(--ink-faint); }

/* Two across on a phone, so a number never shrinks to fit; four across once there is room. */
.tiles[b-vj3897d5go] { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.tiles.three[b-vj3897d5go] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.tiles.three[b-vj3897d5go]  .tile-value { font-size: 22px; }

.totals[b-vj3897d5go] { margin: 0; border: var(--border) solid var(--black); border-radius: 12px; background: #fff; }
.totals div[b-vj3897d5go] { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 9px 12px; }
.totals div + div[b-vj3897d5go] { border-top: 1px solid var(--rule); }
.totals dt[b-vj3897d5go] { font-size: 13px; color: var(--ink-soft); }
.totals dd[b-vj3897d5go] { margin: 0; font-size: 15px; font-weight: 800; font-variant-numeric: tabular-nums; text-align: right; }
.totals dd small[b-vj3897d5go] { margin-left: 6px; font-size: 11px; font-weight: 500; color: var(--ink-faint); }

.daily summary[b-vj3897d5go] { cursor: pointer; padding: 10px 0; font-size: 13px; font-weight: 700; }
.table-wrap[b-vj3897d5go] { overflow-x: auto; border: var(--border) solid var(--black); border-radius: 12px; background: #fff; }
table[b-vj3897d5go] { width: 100%; border-collapse: collapse; font-size: 12px; font-variant-numeric: tabular-nums; }
th[b-vj3897d5go], td[b-vj3897d5go] { padding: 7px 8px; text-align: right; white-space: nowrap; }
thead th[b-vj3897d5go] { position: sticky; top: 0; background: var(--paper-sunk); font-size: 11px; color: var(--ink-soft); }
tbody th[b-vj3897d5go] { text-align: left; font-weight: 700; }
tbody tr + tr[b-vj3897d5go] { border-top: 1px solid var(--rule); }

@media (min-width: 560px) {
    .tiles[b-vj3897d5go] { grid-template-columns: repeat(4, minmax(0, 1fr)); }
    .tiles.three[b-vj3897d5go] { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
/* /Components/Pages/Ideas.razor.rz.scp.css */
/* Scoped to the Ideas page; tokens and every shared control come from app.css. */

.filters[b-upibpac4qv] { display: grid; grid-template-columns: 1fr 1fr auto; gap: 8px; }
.filters button[b-upibpac4qv] { width: 46px; padding: 0; font-size: 18px; }
/* One card holding the whole queue: rows collapse to a badge and a line of text, and the one
   that is open grows in place rather than sending its detail to a second panel below. */
.queue[b-upibpac4qv] { border: var(--border) solid var(--black); border-radius: 10px; background: var(--paper); overflow: hidden; }
.queue > .empty[b-upibpac4qv] { margin: 0; padding: 16px; }
.queue > button[b-upibpac4qv] { border: 0; border-radius: 0; box-shadow: none; border-top: 1px solid var(--rule); }

.idea + .idea[b-upibpac4qv], .idea + button[b-upibpac4qv] { border-top: 1px solid var(--rule); }
.idea.open[b-upibpac4qv] { background: #fff; }

/* The global button rule centres its content, which put a one-line idea in the middle of its row
   while a two-line one filled it. Rows start at the left edge, and the badge sits on the first
   line of the title rather than the middle of the block. */
.idea-head[b-upibpac4qv] {
    display: flex;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 8px;
    width: 100%;
    min-height: 46px;
    padding: 8px 12px;
    border: 0;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
    text-align: left;
    font-size: 13px;
    font-weight: 500;
}

.idea-head:active:enabled[b-upibpac4qv] { transform: none; box-shadow: none; background: var(--paper-sunk); }

/* Two lines is enough to recognise an idea; the rest is one tap away. */
.idea-title[b-upibpac4qv] {
    line-height: 19px;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    overflow-wrap: anywhere;
}

.badge[b-upibpac4qv] {
    flex: none;
    margin-top: 2px;
    padding: 0 8px;
    line-height: 15px;
    text-align: center;
    border-radius: 999px;
    font-size: 10px;
    font-weight: 800;
    letter-spacing: .4px;
    text-transform: uppercase;
    background: var(--paper-sunk);
    color: var(--ink-soft);
}

/* The status badge is one width whatever its word, so every title in the queue starts on the
   same line; "Approved" is the widest label. */
.idea-head > .badge:first-child[b-upibpac4qv] { min-width: 76px; }

.badge.queued[b-upibpac4qv] { background: #E4ECFF; color: #263D70; }
.badge.review[b-upibpac4qv], .badge.approved[b-upibpac4qv] { background: #DFF4E8; color: var(--green); }
.badge.blocked[b-upibpac4qv] { background: #FFE4DC; color: var(--red); }
/* A power's own cards never serve in ordinary play, which is worth seeing before the row opens. */
.badge.power[b-upibpac4qv] { background: #FFF0D6; color: var(--amber); }

.idea-body[b-upibpac4qv] { padding: 0 12px 12px; font-size: 13px; overflow-wrap: anywhere; }
.idea-body textarea[b-upibpac4qv] { margin-top: 10px; }

/* The words as they were captured, kept quiet: the draft below is what gets approved. */
.idea-original[b-upibpac4qv] {
    margin: 0 0 10px;
    padding-left: 10px;
    border-left: 3px solid var(--rule);
    white-space: pre-wrap;
    font-size: 12px;
    color: var(--ink-soft);
}

.tr[b-upibpac4qv] { padding: 6px 0; border-bottom: 1px dashed var(--rule); }
.tr span[b-upibpac4qv] { font-size: 10px; font-weight: 800; letter-spacing: 1.4px; color: var(--ink-faint); }
.tr p[b-upibpac4qv] { margin: 2px 0 0; font-size: 15px; font-weight: 500; }

/* A match that blocks approval is the reason the button is dead, so it stays in the open;
   the rest sit behind a disclosure. */
.match[b-upibpac4qv] { margin: 8px 0; padding: 8px 10px; border: 1.5px solid var(--rule); border-radius: 10px; }
.match.blocking[b-upibpac4qv] { border: var(--border) solid var(--red); background: #FFF0EA; }
.match p[b-upibpac4qv] { margin: 0; font-size: 13px; }
.match small[b-upibpac4qv] { font-size: 11px; color: var(--ink-faint); }
/* /Components/Tile.razor.rz.scp.css */
.tile[b-yupvbf1vd3] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    padding: 10px 12px;
    background: #fff;
    border: var(--border) solid var(--black);
    border-radius: 12px;
}
.tile-label[b-yupvbf1vd3] { font-size: 11px; font-weight: 700; color: var(--ink-soft); }
.tile-value[b-yupvbf1vd3] { font-size: 26px; font-weight: 800; line-height: 1.2; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.tile-before[b-yupvbf1vd3] { font-size: 11px; color: var(--ink-faint); font-variant-numeric: tabular-nums; }
/* /Components/UsageChart.razor.rz.scp.css */
/* Series colours are fixed slots, never cycled: slot 1 is the brand red, slot 2 a blue that the
   palette validator passes beside it (adjacent CVD dE 27.9, normal 34.8, both >= 3:1 on white).
   The brand black fails as a series - it reads as gray - so it stays text. */
.chart[b-eul20imgd2] {
    --s1: #D72018;
    --s2: #2a78d6;
    --grid: #ECE5DD;
    margin: 0;
    padding: 12px;
    background: #fff;
    border: var(--border) solid var(--black);
    border-radius: 12px;
}

figcaption[b-eul20imgd2] { display: flex; flex-direction: column; }
.chart-title[b-eul20imgd2] { font-size: 14px; font-weight: 800; }
.chart-sub[b-eul20imgd2] { font-size: 12px; color: var(--ink-soft); }

/* The tooltip, kept in the flow: it never covers a bar or slides off a narrow screen. */
.readout[b-eul20imgd2] {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 2px 12px;
    min-height: 22px;
    margin: 8px 0 6px;
    font-size: 12px;
    color: var(--ink-soft);
}
.readout .when[b-eul20imgd2] { font-weight: 700; color: var(--black); }
.readout strong[b-eul20imgd2] { color: var(--black); font-variant-numeric: tabular-nums; }
.val[b-eul20imgd2] { display: inline-flex; align-items: center; gap: 5px; }

.swatch[b-eul20imgd2] { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.s1[b-eul20imgd2] { background: var(--s1); }
.s2[b-eul20imgd2] { background: var(--s2); }

/* Hairline grid at the top and the middle, recessive, labelled in a gutter of its own so a
   label never sits on a bar. */
.plot[b-eul20imgd2] {
    --gutter: 30px;
    position: relative;
    height: 120px;
    margin-top: 12px;
}
.tick[b-eul20imgd2] {
    position: absolute;
    left: var(--gutter);
    right: 0;
    height: 0;
    border-top: 1px solid var(--grid);
    pointer-events: none;
}
.tick.base[b-eul20imgd2] { border-top-color: var(--rule); }
.tick b[b-eul20imgd2] {
    position: absolute;
    right: calc(100% + 6px);
    top: -7px;
    font-size: 10px;
    font-weight: 500;
    line-height: 14px;
    color: var(--ink-faint);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* Each column is the whole slot tall, so the hit target is far bigger than the bar. The 2px
   gap between slots is the surface showing through. */
.cols[b-eul20imgd2] {
    position: absolute;
    inset: 0 0 0 var(--gutter);
    display: flex;
    align-items: flex-end;
    gap: 2px;
}
.col[b-eul20imgd2] {
    flex: 1 1 0;
    min-width: 0;
    height: 100%;
    min-height: 0;
    padding: 0;
    display: flex;
    align-items: flex-end;
    justify-content: center;
    border: 0;
    border-radius: 4px 4px 0 0;
    background: transparent;
    box-shadow: none;
}
.col:active:enabled[b-eul20imgd2] { transform: none; box-shadow: none; }
.col.on[b-eul20imgd2] { background: var(--paper-sunk); }

/* A bar is capped at 24px and keeps the rest of its slot as air. Rounded at the data end,
   square on the baseline; stacked segments are split by a 2px surface gap, never a stroke. */
.stack[b-eul20imgd2] {
    display: flex;
    flex-direction: column-reverse;
    gap: 2px;
    width: min(100%, 24px);
    min-height: 2px;
    border-radius: 4px 4px 0 0;
    overflow: hidden;
}
.seg[b-eul20imgd2] { display: block; flex-basis: 0; min-height: 1px; }

.xaxis[b-eul20imgd2] {
    display: flex;
    justify-content: space-between;
    margin: 4px 0 0 30px;
    font-size: 10px;
    color: var(--ink-faint);
}

.legend[b-eul20imgd2] {
    display: flex;
    flex-wrap: wrap;
    gap: 4px 14px;
    margin-top: 8px;
    font-size: 12px;
    color: var(--ink-soft);
}
.legend span[b-eul20imgd2] { display: inline-flex; align-items: center; gap: 6px; }