/* /Components/AiDashboard/AiDeploymentTable.razor.rz.scp.css */
.dep[b-eaeclahlip] {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.dep__table[b-eaeclahlip] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.dep__table th[b-eaeclahlip] {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.dep__table td[b-eaeclahlip] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--fg-primary);
}

.dep__table tbody tr:last-child td[b-eaeclahlip] { border-bottom: 0; }

.dep__num[b-eaeclahlip] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.dep__anatomy[b-eaeclahlip] {
    font-weight: var(--weight-semibold);
    white-space: nowrap;
}

/* A fallback row is TINTED, not flagged. It is a supported state, so it gets the sunken surface an
   inactive-but-fine row gets, and never the danger/warning colours - an operator must be able to
   scan this column and tell "nothing deployed yet" from "something is broken". */
.dep__row--base td[b-eaeclahlip] { background: var(--bg-sunken); }

.dep__fallback[b-eaeclahlip] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2);
    color: var(--fg-secondary);
    font-weight: var(--weight-medium);
}

.dep__fallback-dot[b-eaeclahlip] {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    background: var(--fg-muted);
    flex: 0 0 auto;
}

.dep__fallback-why[b-eaeclahlip] {
    margin-left: var(--space-2);
    color: var(--fg-muted);
    font-size: var(--text-xs);
}

.dep__model[b-eaeclahlip] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.dep__model + .dep__model[b-eaeclahlip] { margin-top: var(--space-2); }

.dep__model-name[b-eaeclahlip] { font-weight: var(--weight-medium); }

.dep__open[b-eaeclahlip] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--fg-link);
    font-size: var(--text-xs);
    text-decoration: underline;
}

.dep__score + .dep__score[b-eaeclahlip] { margin-top: var(--space-2); }

.dep__score-val[b-eaeclahlip] {
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
}

/* Never a number: a deployed model with no held-out test has no quality figure, and printing its
   validation Dice here would read as one. */
.dep__score-none[b-eaeclahlip] {
    color: var(--fg-muted);
    font-style: italic;
    font-size: var(--text-xs);
}

.dep__empty[b-eaeclahlip] {
    color: var(--fg-muted);
    text-align: center;
    padding: var(--space-6);
}
/* /Components/AiDashboard/AiModelCard.razor.rz.scp.css */
.mc[b-lllzgym3wy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

/* The deployed version is the one an operator is looking for; an accent edge finds it without
   re-reading every badge in the column. */
.mc--active[b-lllzgym3wy] {
    border-color: var(--border-accent);
    box-shadow: inset 3px 0 0 var(--accent);
}

.mc__head[b-lllzgym3wy] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-3);
    flex-wrap: wrap;
}

.mc__title[b-lllzgym3wy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
    min-width: 0;
}

.mc__name[b-lllzgym3wy] {
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
}

.mc__acts[b-lllzgym3wy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex: 0 0 auto;
}

.mc__progress[b-lllzgym3wy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
}

.mc__bar[b-lllzgym3wy] {
    flex: 1 1 auto;
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    overflow: hidden;
}

.mc__bar-fill[b-lllzgym3wy] {
    height: 100%;
    background: var(--accent);
    transition: width var(--duration-base) var(--ease-standard);
}

.mc__epoch[b-lllzgym3wy] {
    flex: 0 0 auto;
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    font-variant-numeric: tabular-nums;
}

.mc__error[b-lllzgym3wy] {
    margin: 0;
    padding: var(--space-2) var(--space-3);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--danger) 12%, transparent);
    color: var(--danger);
    font-size: var(--text-xs);
}

.mc__dataset[b-lllzgym3wy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2) var(--space-4);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.mc__dataset strong[b-lllzgym3wy] {
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
}

.mc__classes[b-lllzgym3wy] {
    color: var(--fg-secondary);
    font-style: italic;
}

/* Two boxes, equal weight, side by side. Equal weight is the point: styling one as the headline
   and the other as a footnote is the same mistake as merging them. */
.mc__scores[b-lllzgym3wy] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr));
    gap: var(--space-3);
}

.mc__score[b-lllzgym3wy] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-3);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

/* The held-out score is the one to quote, so it carries the success hue on its left edge - a colour
   difference, not a size difference, so neither box reads as the "real" number and the other as
   decoration. */
.mc__score--test[b-lllzgym3wy] { border-left: 3px solid var(--success); }

.mc__score-label[b-lllzgym3wy] {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary);
}

.mc__score-val[b-lllzgym3wy] {
    font-size: var(--text-h3);
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.mc__score-val--none[b-lllzgym3wy] {
    font-size: var(--text-sm);
    font-weight: var(--weight-regular);
    font-style: italic;
    color: var(--fg-muted);
}

.mc__score-note[b-lllzgym3wy] {
    font-size: var(--text-3xs);
    color: var(--fg-muted);
}

.mc__block[b-lllzgym3wy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    padding-top: var(--space-2);
    border-top: 1px solid var(--border-subtle);
}

.mc__block-title[b-lllzgym3wy] {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--weight-semibold);
    color: var(--fg-muted);
}

.mc__row[b-lllzgym3wy] {
    display: grid;
    grid-template-columns: minmax(6rem, 10rem) minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--space-3);
    font-size: var(--text-xs);
}

.mc__row-name[b-lllzgym3wy] {
    color: var(--fg-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.mc__meter[b-lllzgym3wy] {
    height: 6px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    overflow: hidden;
}

.mc__meter-fill[b-lllzgym3wy] {
    display: block;
    height: 100%;
    background: var(--accent);
}

.mc__meter-fill--test[b-lllzgym3wy] { background: var(--success); }

.mc__row-val[b-lllzgym3wy] {
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.mc__more[b-lllzgym3wy] {
    font-size: var(--text-3xs);
    color: var(--fg-muted);
}

.mc__foot[b-lllzgym3wy] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-4);
    font-size: var(--text-3xs);
    color: var(--fg-muted);
}

.mc__nocurve[b-lllzgym3wy] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin: 0;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}
/* /Components/AiDashboard/AiProjectGroup.razor.rz.scp.css */
.apg[b-t5cu3qzxjy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    padding: var(--space-4) 0;
}

.apg + .apg[b-t5cu3qzxjy] { border-top: 1px solid var(--border-subtle); }

.apg__head[b-t5cu3qzxjy] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    flex-wrap: wrap;
}

.apg__name[b-t5cu3qzxjy] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    font-size: var(--text-base);
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
}

.apg__name:hover[b-t5cu3qzxjy] { color: var(--fg-link); text-decoration: underline; }

.apg__anatomy[b-t5cu3qzxjy] {
    display: flex;
    align-items: center;
    gap: var(--space-4);
    flex-wrap: wrap;
}

/* The unassigned group's row is the call to action: a model nobody can route to. */
.apg__anatomy--unset[b-t5cu3qzxjy] {
    padding: var(--space-3);
    border: 1px dashed var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-sunken);
}

.apg__anatomy-lbl[b-t5cu3qzxjy] {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--weight-semibold);
    color: var(--fg-muted);
}

/* One column. A version card carries two score boxes, two per-class lists and a chart; side by side
   they are each too narrow to read either axis of the curve. */
.apg__versions[b-t5cu3qzxjy] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}
/* /Components/AiDashboard/AiRunsView.razor.rz.scp.css */
.arv[b-baevbmpfzf] {
    display: flex;
    flex-direction: column;
    gap: var(--space-5);
}

/* Filters in one row above the chart. */
.arv__bar[b-baevbmpfzf] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-4);
    flex-wrap: wrap;
}

.arv__metrics[b-baevbmpfzf] {
    display: inline-flex;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    overflow: hidden;
}

.arv__metric[b-baevbmpfzf] {
    border: 0;
    border-right: 1px solid var(--border-default);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: var(--text-xs);
    height: var(--control-height-sm);
    padding: 0 var(--space-5);
    cursor: pointer;
}

.arv__metric:last-child[b-baevbmpfzf] { border-right: 0; }
.arv__metric:hover[b-baevbmpfzf] { background: var(--bg-hover); color: var(--fg-primary); }
.arv__metric.is-on[b-baevbmpfzf] { background: var(--accent-subtle); color: var(--accent-fg); font-weight: var(--weight-semibold); }
.arv__metric:focus-visible[b-baevbmpfzf] { outline: none; box-shadow: var(--ring-focus); }

.arv__count[b-baevbmpfzf] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}

.arv__nocurve[b-baevbmpfzf] {
    margin: 0;
    padding: 0;
    list-style: none;
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.arv__nocurve li[b-baevbmpfzf] { display: flex; align-items: center; gap: var(--space-3); }

.arv__swatch[b-baevbmpfzf] {
    display: inline-block;
    flex: 0 0 auto;
    width: 12px;
    height: 0;
    border-top: 3px solid var(--run, var(--fg-muted));
    border-radius: 2px;
}

.arv__scroll[b-baevbmpfzf] {
    overflow-x: auto;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.arv__table[b-baevbmpfzf] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.arv__table th[b-baevbmpfzf] {
    text-align: left;
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-2xs);
    font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--bg-raised);
    border-bottom: 1px solid var(--border-subtle);
    white-space: nowrap;
}

.arv__table td[b-baevbmpfzf] {
    padding: var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--border-subtle);
    vertical-align: top;
    color: var(--fg-primary);
}

.arv__table tbody tr:last-child td[b-baevbmpfzf] { border-bottom: 0; }
.arv__table tr.is-selected > td[b-baevbmpfzf] { background: color-mix(in srgb, var(--accent-subtle) 45%, transparent); }

.arv__table .num[b-baevbmpfzf] {
    text-align: right;
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.arv__sel[b-baevbmpfzf] { width: 1%; }

.arv__check[b-baevbmpfzf] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    cursor: pointer;
}

.arv__name[b-baevbmpfzf] {
    background: none;
    border: 0;
    padding: 0;
    cursor: pointer;
    color: var(--fg-primary);
    font-weight: var(--weight-semibold);
    text-align: left;
}

.arv__name:hover[b-baevbmpfzf], .arv__name[aria-expanded="true"][b-baevbmpfzf] { color: var(--fg-link); text-decoration: underline; }

.arv__progress[b-baevbmpfzf] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    margin-top: var(--space-2);
    min-width: 9rem;
}

.arv__bar-track[b-baevbmpfzf] {
    flex: 1 1 auto;
    height: 5px;
    border-radius: var(--radius-full);
    background: var(--bg-sunken);
    overflow: hidden;
}

.arv__bar-fill[b-baevbmpfzf] { height: 100%; background: var(--accent); }

.arv__epoch[b-baevbmpfzf] {
    font-family: var(--font-mono);
    font-size: var(--text-2xs);
    color: var(--fg-secondary);
    white-space: nowrap;
}

.arv__cfg[b-baevbmpfzf] { white-space: nowrap; font-size: var(--text-xs); color: var(--fg-secondary); }
.arv__cfg > * + *[b-baevbmpfzf] { margin-left: var(--space-3); }

.arv__detail > td[b-baevbmpfzf] { background: var(--bg-sunken); padding: var(--space-5); }
/* /Components/AiDashboard/RunCompareChart.razor.rz.scp.css */
/* Layout mirrors TrainCurveChart's sheet (CSS isolation keeps that one private). Series colour comes
   from the global --run slot palette in app.css via the .run-sN class on each mark. */

.rcc[b-qe19u7oqrj] {
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
}

.rcc__area[b-qe19u7oqrj] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    column-gap: 6px;
}

.rcc__yaxis[b-qe19u7oqrj] {
    grid-column: 1;
    grid-row: 1;
    position: relative;
    pointer-events: none;
}

.rcc__yaxis span[b-qe19u7oqrj] {
    position: absolute;
    right: 0;
    transform: translateY(50%);
    white-space: nowrap;
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    color: var(--fg-muted);
    line-height: 1;
}

.rcc__yaxis-sizer[b-qe19u7oqrj] { height: 0; overflow: hidden; visibility: hidden; }
.rcc__yaxis-sizer span[b-qe19u7oqrj] { position: static; display: block; transform: none; }

.rcc__plot[b-qe19u7oqrj] {
    grid-column: 2;
    grid-row: 1;
    position: relative;
}

.rcc__svg[b-qe19u7oqrj] {
    width: 100%;
    height: 260px;
    display: block;
    background: var(--bg-sunken);
    border-radius: var(--radius-sm);
}

.rcc__grid[b-qe19u7oqrj] {
    stroke: color-mix(in srgb, var(--fg-muted) 30%, transparent);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

.rcc__line[b-qe19u7oqrj] {
    fill: none;
    stroke: var(--run, var(--accent));
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.rcc__dot[b-qe19u7oqrj] {
    stroke: var(--run, var(--accent));
    stroke-width: 8;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.rcc__cross[b-qe19u7oqrj] {
    stroke: var(--fg-muted);
    stroke-width: 1;
    stroke-dasharray: 3 3;
    vector-effect: non-scaling-stroke;
}

/* Hovered values: the series colour ringed in the plot surface so overlapping marks stay separable. */
.rcc__hdot[b-qe19u7oqrj] {
    stroke: var(--run, var(--accent));
    stroke-width: 9;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
    filter: drop-shadow(0 0 1px var(--bg-sunken)) drop-shadow(0 0 1px var(--bg-sunken));
}

.rcc__bands[b-qe19u7oqrj] { position: absolute; inset: 0; }
.rcc__band[b-qe19u7oqrj] { position: absolute; top: 0; bottom: 0; cursor: crosshair; }

.rcc__empty[b-qe19u7oqrj] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.rcc__tip[b-qe19u7oqrj] {
    position: absolute;
    top: var(--space-4);
    transform: translateX(10px);
    min-width: 12rem;
    max-width: 22rem;
    padding: var(--space-3) var(--space-4);
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
    pointer-events: none;
    z-index: 5;
    font-size: var(--text-xs);
}

.rcc__tip--left[b-qe19u7oqrj] { transform: translateX(calc(-100% - 10px)); }

.rcc__tip-head[b-qe19u7oqrj] {
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
    margin-bottom: var(--space-2);
}

.rcc__tip-row[b-qe19u7oqrj] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    line-height: 1.5;
}

.rcc__tip-name[b-qe19u7oqrj] {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-secondary);
}

.rcc__tip-val[b-qe19u7oqrj] {
    font-family: var(--font-mono);
    font-variant-numeric: tabular-nums;
    color: var(--fg-primary);
}

.rcc__labels[b-qe19u7oqrj] {
    grid-column: 2;
    grid-row: 2;
    position: relative;
    height: 1.2em;
    margin-top: 4px;
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    color: var(--fg-muted);
}

.rcc__labels span[b-qe19u7oqrj] { position: absolute; transform: translateX(-50%); white-space: nowrap; }
.rcc__labels span:first-child[b-qe19u7oqrj] { transform: none; }
.rcc__labels span:last-child:not(:first-child)[b-qe19u7oqrj] { transform: translateX(-100%); }

.rcc__legend[b-qe19u7oqrj] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3) var(--space-6);
    font-size: var(--text-xs);
    color: var(--fg-secondary);
}

.rcc__key[b-qe19u7oqrj] { display: inline-flex; align-items: center; gap: 6px; }

.rcc__swatch[b-qe19u7oqrj] {
    flex: 0 0 auto;
    width: 14px;
    height: 0;
    border-top: 3px solid var(--run, var(--accent));
    border-radius: 2px;
}

.rcc__missing[b-qe19u7oqrj] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}
/* /Components/AnatomyPicker.razor.rz.scp.css */
.anp[b-323h7uxqn7] {
    position: relative;
    display: inline-flex;
    flex-direction: column;
    min-width: 14rem;
    max-width: 100%;
}

.anp__input[b-323h7uxqn7] {
    width: 100%;
    height: var(--control-height);
    padding: 0 var(--space-8) 0 var(--space-4);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-size: var(--text-sm);
}

.anp__input[b-323h7uxqn7]::placeholder { color: var(--fg-muted); }

.anp__input:focus[b-323h7uxqn7] {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--ring-focus);
}

.anp__input:disabled[b-323h7uxqn7] {
    background: var(--bg-sunken);
    color: var(--fg-disabled);
    cursor: not-allowed;
}

.anp__caret[b-323h7uxqn7] {
    position: absolute;
    right: var(--space-4);
    top: calc(var(--control-height) / 2);
    transform: translateY(-50%);
    font-size: var(--text-2xs);
    color: var(--fg-muted);
    pointer-events: none;
}

.anp__list[b-323h7uxqn7] {
    position: absolute;
    top: calc(var(--control-height) + 2px);
    left: 0;
    right: 0;
    z-index: 50;
    max-height: 16rem;
    overflow-y: auto;
    margin: 0;
    padding: var(--space-2) 0;
    list-style: none;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    box-shadow: var(--shadow-pop);
}

.anp__opt[b-323h7uxqn7] {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-sm);
    color: var(--fg-primary);
    cursor: pointer;
}

.anp__opt.is-active[b-323h7uxqn7] { background: var(--bg-hover); }
.anp__opt.is-current .anp__opt-name[b-323h7uxqn7] { font-weight: var(--weight-semibold); }

.anp__opt-name[b-323h7uxqn7] { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.anp__opt-hint[b-323h7uxqn7] {
    font-size: var(--text-2xs);
    color: var(--fg-muted);
}

.anp__opt--clear .anp__opt-name[b-323h7uxqn7] { color: var(--fg-secondary); }

.anp__opt--add[b-323h7uxqn7] {
    border-top: 1px solid var(--border-subtle);
    color: var(--fg-link);
}

.anp__tag[b-323h7uxqn7] {
    flex: 0 0 auto;
    font-size: var(--text-3xs);
    padding: 1px 5px;
    border-radius: var(--radius-xs);
    background: var(--accent-subtle);
    color: var(--accent-fg);
    white-space: nowrap;
}

.anp__note[b-323h7uxqn7] {
    padding: var(--space-3) var(--space-4);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.anp__error[b-323h7uxqn7] {
    margin-top: var(--space-2);
    font-size: var(--text-xs);
    color: var(--danger-fg);
}
/* /Components/Chat/ChatWidget.razor.rz.scp.css */
.chat-fab[b-h0j7odu7g9] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 46px;
    height: 46px;
    border-radius: 50%;
    border: 1px solid rgba(255, 255, 255, 0.14);
    background: linear-gradient(135deg, #4363d8, #6a3fd8);
    color: #fff;
    cursor: pointer;
    box-shadow: 0 6px 18px rgba(0, 0, 0, 0.32);
    z-index: 9000;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: transform .12s ease, box-shadow .12s ease;
}
.chat-fab:hover[b-h0j7odu7g9] { transform: scale(1.06); box-shadow: 0 8px 22px rgba(0, 0, 0, 0.4); }
.chat-fab__icon[b-h0j7odu7g9] { display: flex; line-height: 1; }

.chat-panel[b-h0j7odu7g9] {
    position: fixed;
    right: 20px;
    bottom: 20px;
    width: 380px;
    max-width: calc(100vw - 32px);
    height: 560px;
    max-height: calc(100vh - 40px);
    display: flex;
    flex-direction: column;
    background: #1c1f26;
    color: #e7e9ee;
    border: 1px solid #2c313c;
    border-radius: 12px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.5);
    z-index: 9000;
    overflow: hidden;
    font-size: 14px;
}

.chat-panel__head[b-h0j7odu7g9] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 12px;
    background: #242833;
    border-bottom: 1px solid #2c313c;
}
.chat-panel__title[b-h0j7odu7g9] { font-weight: 600; }
.chat-panel__head-actions[b-h0j7odu7g9] { display: flex; gap: 4px; }
.chat-iconbtn[b-h0j7odu7g9] {
    background: none;
    border: none;
    color: #aab0bd;
    cursor: pointer;
    font-size: 15px;
    padding: 2px 6px;
    border-radius: 6px;
}
.chat-iconbtn:hover[b-h0j7odu7g9] { background: #2c313c; color: #fff; }
.chat-iconbtn:disabled[b-h0j7odu7g9] { opacity: .4; cursor: default; }
.chat-iconbtn--on[b-h0j7odu7g9] { background: #2f3b5c; color: #fff; }

.chat-mic[b-h0j7odu7g9] {
    background: #161922;
    border: 1px solid #2c313c;
    color: #aab0bd;
    border-radius: 8px;
    width: 40px;
    cursor: pointer;
    font-size: 15px;
    flex: 0 0 auto;
}
.chat-mic:hover[b-h0j7odu7g9] { background: #20242e; color: #fff; }
.chat-mic:disabled[b-h0j7odu7g9] { opacity: .4; cursor: default; }
/* Warming up (session started, not yet capturing): amber, no pulse — don't speak yet. */
.chat-mic--warm[b-h0j7odu7g9] {
    background: #4a3b1e;
    border-color: #8a6d2f;
    color: #f0d79a;
}
.chat-mic--on[b-h0j7odu7g9] {
    background: #6e2b2b;
    border-color: #a23b3b;
    color: #fff;
    animation: chat-pulse-b-h0j7odu7g9 1.1s ease-in-out infinite;
}
@keyframes chat-pulse-b-h0j7odu7g9 {
    0%, 100% { box-shadow: 0 0 0 0 rgba(162, 59, 59, 0.6); }
    50% { box-shadow: 0 0 0 6px rgba(162, 59, 59, 0); }
}

.chat-voicebar[b-h0j7odu7g9] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    padding: 7px 12px;
    background: #20242e;
    border-bottom: 1px solid #2c313c;
}
.chat-voicesel[b-h0j7odu7g9] {
    flex: 1 1 100%;   /* its own row — long voice names need the width */
    min-width: 0;
    max-width: 100%;
    box-sizing: border-box;
    background: #161922;
    color: #e7e9ee;
    border: 1px solid #2c313c;
    border-radius: 6px;
    padding: 4px 6px;
    font-size: 12px;
}
.chat-voicerate[b-h0j7odu7g9] { flex: 1 1 auto; min-width: 0; accent-color: #4363d8; }
.chat-voicerate__val[b-h0j7odu7g9] { flex: 0 0 auto; font-size: 11px; color: #aab0bd; min-width: 30px; text-align: right; }

.chat-panel__log[b-h0j7odu7g9] {
    flex: 1;
    overflow-y: auto;
    padding: 12px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}
.chat-empty[b-h0j7odu7g9] { color: #7b8190; font-size: 13px; line-height: 1.5; }

.chat-msg[b-h0j7odu7g9] { display: flex; flex-direction: column; gap: 4px; max-width: 100%; }
.chat-msg__text[b-h0j7odu7g9] { white-space: pre-wrap; word-wrap: break-word; line-height: 1.45; }

/* Rendered-markdown assistant text. The .chat-md div is component-rendered (scoped), but its children
   are injected via MarkupString and carry NO scope attribute — so child rules MUST use ::deep or they
   never match (a default <table> then has no borders). */
.chat-md[b-h0j7odu7g9] { white-space: normal; }
.chat-md[b-h0j7odu7g9]  div { margin: 0; }
.chat-md[b-h0j7odu7g9]  .md-sp { height: .5em; }
.chat-md[b-h0j7odu7g9]  .md-h { font-weight: 600; margin: .3em 0 .15em; }
.chat-md[b-h0j7odu7g9]  ul, .chat-md[b-h0j7odu7g9]  ol { margin: .2em 0 .3em; padding-left: 1.3em; }
.chat-md[b-h0j7odu7g9]  li { margin: .1em 0; }
.chat-md[b-h0j7odu7g9]  strong { font-weight: 600; color: #fff; }
.chat-md[b-h0j7odu7g9]  em { font-style: italic; }
.chat-md[b-h0j7odu7g9]  a { color: #8ab4ff; text-decoration: underline; }
.chat-md[b-h0j7odu7g9]  code {
    background: #161922;
    border: 1px solid #3a4150;
    border-radius: 4px;
    padding: 0 4px;
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 12px;
}
.md-cursor[b-h0j7odu7g9] { opacity: .7; }
.chat-md[b-h0j7odu7g9]  .md-table {
    border-collapse: collapse;
    margin: .35em 0;
    font-size: 13px;
    width: 100%;
}
.chat-md[b-h0j7odu7g9]  .md-table th, .chat-md[b-h0j7odu7g9]  .md-table td {
    border: 1px solid #4a5263;
    padding: 3px 7px;
    text-align: left;
    vertical-align: top;
}
.chat-md[b-h0j7odu7g9]  .md-table th { background: #242833; font-weight: 600; color: #fff; }
.chat-md[b-h0j7odu7g9]  .md-table tr:nth-child(even) td { background: #20242e; }
.chat-msg--user[b-h0j7odu7g9] {
    align-self: flex-end;
    background: #2f3b5c;
    padding: 8px 11px;
    border-radius: 12px 12px 2px 12px;
    max-width: 85%;
}
.chat-msg--assistant[b-h0j7odu7g9] { align-self: flex-start; max-width: 92%; }

.chat-msg__tools[b-h0j7odu7g9] { display: flex; flex-wrap: wrap; gap: 4px; }
.chat-tool[b-h0j7odu7g9] {
    font-size: 11px;
    color: #9fd0a0;
    background: #233027;
    padding: 1px 6px;
    border-radius: 6px;
}

.chat-error[b-h0j7odu7g9] {
    color: #ff9a9a;
    background: #3a2424;
    border-radius: 8px;
    padding: 8px 10px;
    font-size: 13px;
}

.chat-vhint[b-h0j7odu7g9] {
    color: #d8c08a;
    background: #2e2a20;
    border-top: 1px solid #3a3322;
    padding: 7px 12px;
    font-size: 12px;
    line-height: 1.4;
}

.chat-confirm[b-h0j7odu7g9] {
    padding: 10px 12px;
    background: #2a2230;
    border-top: 1px solid #3a2c44;
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.chat-confirm__actions[b-h0j7odu7g9] { display: flex; gap: 8px; }
.chat-btn[b-h0j7odu7g9] {
    border: 1px solid #3a4150;
    background: #2c313c;
    color: #e7e9ee;
    border-radius: 7px;
    padding: 5px 12px;
    cursor: pointer;
    font-size: 13px;
}
.chat-btn:hover[b-h0j7odu7g9] { background: #353b48; }
.chat-btn--danger[b-h0j7odu7g9] { background: #6e2b2b; border-color: #8a3a3a; }
.chat-btn--danger:hover[b-h0j7odu7g9] { background: #843333; }

.chat-panel__input[b-h0j7odu7g9] {
    display: flex;
    gap: 8px;
    padding: 10px;
    border-top: 1px solid #2c313c;
    background: #20242e;
}
.chat-input[b-h0j7odu7g9] {
    flex: 1;
    background: #161922;
    border: 1px solid #2c313c;
    border-radius: 8px;
    padding: 8px 10px;
    color: #e7e9ee;
    font-size: 14px;
    outline: none;
}
.chat-input:focus[b-h0j7odu7g9] { border-color: #4363d8; }
.chat-input:disabled[b-h0j7odu7g9] { opacity: .6; }
.chat-send[b-h0j7odu7g9] {
    background: #4363d8;
    border: none;
    color: #fff;
    border-radius: 8px;
    width: 40px;
    cursor: pointer;
    font-size: 14px;
}
.chat-send:disabled[b-h0j7odu7g9] { opacity: .4; cursor: default; }
.chat-stop[b-h0j7odu7g9] { background: #6e2b2b; }
.chat-stop:hover[b-h0j7odu7g9] { background: #843333; }
/* /Components/Collab/EmojiPicker.razor.rz.scp.css */
/* Scoped to THIS component on purpose: a child's markup does not carry the parent page's scope attribute,
   so these rules cannot live in Case.razor.css — they would compile and then match nothing. The panel this
   opens inside follows the user's theme (the .pv root carries data-bs-theme from it), so every colour below is
   an --ed-* or semantic token and one rule serves light and dark alike. */

.ep[b-z591g0e2j6] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
    min-width: 0;
}

.ep__title[b-z591g0e2j6] {
    font-size: 10.5px;
    font-weight: var(--weight-semibold);
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ed-fg-2);
}

.ep__search[b-z591g0e2j6] {
    flex: 0 0 auto;
    height: 28px;
    padding: 0 var(--space-2);
    border: 1px solid var(--ed-line);
    border-radius: 5px;
    background: var(--ed-control);
    color: var(--ed-fg);
    font-size: var(--text-xs);
}

.ep__search:hover[b-z591g0e2j6] { border-color: var(--ed-line-strong); }
.ep__search[b-z591g0e2j6]::placeholder { color: var(--ed-fg-3); }
.ep__search:focus-visible[b-z591g0e2j6] { outline: none; box-shadow: var(--ring-focus); }

/* The catalogue is ~230 glyphs — it scrolls, and the scroll is contained so reaching its end does not hand
   the wheel to the slice scrub on the canvas underneath. */
.ep__body[b-z591g0e2j6] {
    max-height: 210px;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding-right: 2px;
}

.ep__group[b-z591g0e2j6] {
    position: sticky;
    top: 0;
    z-index: 1;
    padding: var(--space-1) 0;
    background: var(--bg-raised); /* opaque: the grid scrolls UNDER this heading. Same surface as .pv-chat__pop */
    font-size: var(--text-xs);
    color: var(--ed-fg-3);
}

/* auto-fill rather than a fixed column count: the popover is narrower over a message than over the compose
   box, and a hard count would either overflow the narrow one or waste the wide one. */
.ep__grid[b-z591g0e2j6] {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(28px, 1fr));
    gap: 2px;
}

.ep__cell[b-z591g0e2j6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    height: 28px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--ed-fg);
    font-size: 17px;
    line-height: 1;
    cursor: pointer;
}

/* Layered, never a flat fill: --pv-lift darkens on the light theme and lightens on the dark one. */
.ep__cell:hover[b-z591g0e2j6] { background-image: var(--pv-lift); }
.ep__cell:focus-visible[b-z591g0e2j6] { outline: none; box-shadow: var(--ring-focus); }

.ep__none[b-z591g0e2j6] {
    padding: var(--space-2) 0;
    font-size: var(--text-xs);
    color: var(--ed-fg-3);
}
/* /Components/EditorUserMenu.razor.rz.scp.css */
/* Anchor wrapper: the popover positions relative to the trigger button in the top bar.
   (Alignment is handled by the parent cluster — .pv-top__actions in the Present workspace.) */
.eum[b-wizjs2h407] {
    position: relative;
    display: inline-flex;
}

/* Full-viewport catcher: closes the menu on any outside click. */
.eum__backdrop[b-wizjs2h407] {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: transparent;
}

/* The one popover under the trigger, right-aligned so it grows left from the screen edge.
   Carries the settings body itself (account / View) plus the report row. */
.eum__pop[b-wizjs2h407] {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    z-index: 1200;
    width: 320px;
    padding: 10px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 10px;
}

/* Hairline between the settings body and the actions below it. */
.eum__sep[b-wizjs2h407] {
    height: 1px;
    margin: 0 -4px;
    background: var(--border-subtle);
}

.eum__item[b-wizjs2h407] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: calc(100% + 8px);
    margin: 0 -4px;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
    white-space: nowrap;
}

.eum__item svg[b-wizjs2h407] { flex-shrink: 0; color: var(--fg-muted); }
.eum__item:hover[b-wizjs2h407] { background: var(--bg-hover); color: var(--fg-primary); }
.eum__item:hover svg[b-wizjs2h407] { color: var(--fg-primary); }

/* Account identity — who the settings apply to (the case workspace has no other place that says it).
   Sits at the top of the popover, where the old panel's title bar used to be. */
.eum__acct[b-wizjs2h407] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding-bottom: 8px;
    border-bottom: 1px solid var(--border-subtle);
}

.eum__acct-avatar[b-wizjs2h407] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-selected, var(--bg-hover));
    color: var(--accent-fg, var(--fg-primary));
    font-size: var(--text-xs);
    font-weight: 600;
}

.eum__acct-id[b-wizjs2h407] { display: flex; flex-direction: column; min-width: 0; }

.eum__acct-name[b-wizjs2h407] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--fg-primary);
}

.eum__acct-mail[b-wizjs2h407] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.eum__sect[b-wizjs2h407] { display: flex; flex-direction: column; gap: 7px; }

.eum__sect-title[b-wizjs2h407] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.eum__sect-hint[b-wizjs2h407] { font-size: var(--text-xs); color: var(--fg-muted); }

.eum__toggle[b-wizjs2h407] {
    display: flex;
    align-items: flex-start;
    gap: 9px;
    cursor: pointer;
    margin: 0;
}

.eum__toggle input[b-wizjs2h407] { margin-top: 2px; flex-shrink: 0; }

.eum__toggle-body[b-wizjs2h407] { display: flex; flex-direction: column; gap: 2px; }

.eum__toggle-label[b-wizjs2h407] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    color: var(--fg-primary);
}

.eum__toggle-hint[b-wizjs2h407] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    line-height: 1.35;
}
/* /Components/Spark.razor.rz.scp.css */
.hs-spark[b-xir8pnltbc] {
    width: 100%;
    height: 34px;
    display: block;
}

.hs-spark__grid[b-xir8pnltbc] {
    stroke: var(--border-subtle);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

.hs-spark__line[b-xir8pnltbc] {
    fill: none;
    stroke-width: 1.5;
    vector-effect: non-scaling-stroke;
    stroke-linejoin: round;
    stroke-linecap: round;
}

.hs-spark__line--a[b-xir8pnltbc] { stroke: var(--success); }
.hs-spark__line--b[b-xir8pnltbc] { stroke: var(--info); }
/* /Components/Subjects/SubjectVolumeChart.razor.rz.scp.css */
/* Only what PlSparkChart's shared pl-chart__*/pl-spark* rules in app.css do not already cover:
   the per-series stroke[b-1mityjtcgi], the gap bridge[b-1mityjtcgi], the non-scaling dot[b-1mityjtcgi], and the multi-row hover readout. */

.svc__svg[b-1mityjtcgi] {
    height: 190px;
}

/* --spark-dash carries the stroke pattern for series past the eighth: the page's palette is eight
   hues, so series 9 drew pixel-identical to series 1 and a reader had no way to tell them apart. */
.svc__line[b-1mityjtcgi] {
    fill: none;
    stroke: var(--spark, var(--accent));
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
    stroke-dasharray: var(--spark-dash, none);
    vector-effect: non-scaling-stroke;
}

/* An interior gap: the structure has a measurement either side but none on the scan between. Dashed
   so it reads as "not measured here", never as a plotted value. */
.svc__bridge[b-1mityjtcgi] {
    fill: none;
    stroke: var(--spark, var(--accent));
    stroke-width: 1.25;
    stroke-dasharray: 3 3;
    opacity: 0.55;
    vector-effect: non-scaling-stroke;
}

/* A zero-length line with a round cap and a non-scaling stroke = a round dot at any viewBox stretch.
   A <circle> would render as an ellipse here, since preserveAspectRatio="none" scales x and y by
   different factors. */
.svc__dot[b-1mityjtcgi] {
    stroke: var(--spark, var(--accent));
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* A halo under a point whose value SUMS two or more same-named segments on that scan. The total is
   the honest figure for the structure, but it must not read as one measurement — this is the visible
   half of that, the hover readout printing the count is the other. */
.svc__dot--sum[b-1mityjtcgi] {
    stroke-width: 11;
    opacity: 0.28;
}

/* Two end labels, not the shared rule's equal-flex columns — those would centre each date in half
   the plot instead of pinning them to the ends the data actually starts and stops at. */
.svc__labels[b-1mityjtcgi] {
    justify-content: space-between;
}

.svc__labels span[b-1mityjtcgi] {
    flex: 0 0 auto;
}

.svc__labels-one[b-1mityjtcgi] {
    margin: 0 auto;
}

.svc__tip[b-1mityjtcgi] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 15rem;
}

.svc__tip-row[b-1mityjtcgi] {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
}

/* Filled with an inline background-COLOR, never the shorthand, so the stripe below survives it. */
.svc__tip-swatch[b-1mityjtcgi] {
    flex: 0 0 auto;
    width: 8px;
    height: 8px;
    border-radius: var(--radius-full);
}

/* Same marks as the page legend's swatch, repeated because CSS isolation scopes each component's
   sheet to its own elements — only the --s-stripe token crosses (custom properties inherit down the
   DOM, which is how --s0..--s7 reach here in the first place). Tighter periods: 8px, not 10. */
.svc__tip-swatch.is-dash1[b-1mityjtcgi] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 3px, var(--s-stripe, rgb(0 0 0 / 0.5)) 3px 5px);
}

.svc__tip-swatch.is-dash2[b-1mityjtcgi] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 1px, var(--s-stripe, rgb(0 0 0 / 0.5)) 1px 3px);
}

.svc__tip-swatch.is-dash3[b-1mityjtcgi] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 4px, var(--s-stripe, rgb(0 0 0 / 0.5)) 4px 6px,
        rgb(0 0 0 / 0) 6px 7px, var(--s-stripe, rgb(0 0 0 / 0.5)) 7px 8px);
}

/* Segment count on a summed point, immediately after the figure it qualifies — the reader has to see
   "2 segs" while looking at the number, not somewhere else in the row. */
.svc__tip-sum[b-1mityjtcgi] {
    flex: 0 0 auto;
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.svc__tip-name[b-1mityjtcgi] {
    color: var(--fg-secondary);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.svc__tip-val[b-1mityjtcgi] {
    margin-left: auto;
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.svc__tip-val--none[b-1mityjtcgi] {
    color: var(--fg-muted);
    font-style: italic;
}

/* ---- Chart chrome this component shares with the old platform sparklines (PlSparkChart). Those
   rules were global in app.css until the platform console moved to HQ and took them with it; the
   ones this chart actually uses live here now, scoped. Same names on purpose, so the markup and
   the reasoning in the comments below still read against PlSparkChart in history. ---- */
/* Y axis. A 2-column grid, NOT padding + absolute positioning: the tick column is `auto`, so it is
   exactly as wide as its widest label. A fixed gutter has to be guessed per label vocabulary and
   then re-guessed per breakpoint — "256.0 MB" overflowed a gutter sized for "0/1/2/3" the moment
   the viewport narrowed. The x-label row lives in the SAME grid (row 2, plot column) so it tracks
   the tick column's width automatically and can never drift off its bars.
   Tick text is HTML, not SVG <text>: the plot's preserveAspectRatio="none" would squash glyphs.
   The tick column stretches to the plot row's height, so a tick's `bottom: X%` is a percentage of
   the plot itself; translateY(50%) then re-centres the label on its gridline. */
.pl-chart__area[b-1mityjtcgi] { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 6px; }
.pl-chart__yaxis[b-1mityjtcgi] { grid-column: 1; grid-row: 1; position: relative; pointer-events: none; }
.pl-chart__yaxis span[b-1mityjtcgi] { position: absolute; right: 0; transform: translateY(50%); white-space: nowrap;
    font-size: var(--text-2xs); font-family: var(--font-mono); color: var(--fg-muted); line-height: 1; }
/* Zero-height in-flow copy of the labels: the only thing giving the auto column a width, since every
   visible tick is absolutely positioned. Hidden from a11y (aria-hidden) and from paint. */
.pl-chart__yaxis-sizer[b-1mityjtcgi] { height: 0; overflow: hidden; visibility: hidden; }
.pl-chart__yaxis-sizer span[b-1mityjtcgi] { position: static; display: block; transform: none; }
.pl-chart__area > .pl-chart__plot[b-1mityjtcgi] { grid-column: 2; grid-row: 1; }
.pl-chart__area > .pl-chart__labels[b-1mityjtcgi] { grid-column: 2; grid-row: 2; }
/* Mixed off --fg-muted rather than a --border-* token: the plot background is --bg-sunken, and the
   border tokens sit only one or two slate steps from it (subtle-on-sunken is #ECEEF3 on #F5F6F9,
   ~1.07:1 — an invisible hairline, which defeats the point of a labelled axis; even --border-default
   only reaches ~1.30:1). Mixing the muted FOREGROUND keeps a predictable ratio in both themes,
   since fg-muted is by definition legible against the surface. */
.pl-chart__grid[b-1mityjtcgi], .pl-spark__grid[b-1mityjtcgi] { stroke: color-mix(in srgb, var(--fg-muted) 38%, transparent);
    stroke-width: 0.5; vector-effect: non-scaling-stroke; }
.pl-chart__grid.is-base[b-1mityjtcgi], .pl-spark__grid.is-base[b-1mityjtcgi] { stroke: color-mix(in srgb, var(--fg-muted) 65%, transparent);
    stroke-width: 1; }
.pl-chart__labels[b-1mityjtcgi] { display: flex; justify-content: space-between; gap: 4px; margin-top: 6px;
    font-size: 10px; color: var(--fg-muted); font-family: var(--font-mono); overflow: hidden; }
.pl-chart__labels span[b-1mityjtcgi] { flex: 1; text-align: center; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* Hover readout (PlBarChart / PlSparkChart). The plot is the positioning context; one transparent
   <rect> per data point covers the full plot height so even a zero-height bucket is hoverable. The
   tooltip anchors to the plot edge near the ends so it never spills out of the panel. */
.pl-chart__plot[b-1mityjtcgi] { position: relative; }
.pl-chart__hit[b-1mityjtcgi] { fill: transparent; pointer-events: all; cursor: crosshair; }
.pl-chart__tip[b-1mityjtcgi] { position: absolute; top: 6px; transform: translateX(-50%); z-index: 2; pointer-events: none;
    display: flex; flex-direction: column; gap: 1px; padding: 4px 8px; border-radius: var(--radius-sm);
    background: var(--bg-surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-md);
    white-space: nowrap; }
.pl-chart__tip--start[b-1mityjtcgi] { left: 4px; transform: none; }
.pl-chart__tip--end[b-1mityjtcgi] { right: 4px; transform: none; }
.pl-chart__tip-val[b-1mityjtcgi] { font-size: var(--text-sm); font-weight: 600; color: var(--fg-primary);
    font-variant-numeric: tabular-nums; display: flex; gap: 8px; }
.pl-chart__tip-lbl[b-1mityjtcgi] { font-size: var(--text-2xs); color: var(--fg-muted); font-family: var(--font-mono); }
.pl-spark__cursor[b-1mityjtcgi] { stroke: var(--border-strong); stroke-width: 1; vector-effect: non-scaling-stroke; }
.pl-spark[b-1mityjtcgi] { width: 100%; height: 110px; display: block; background: var(--bg-sunken); border-radius: var(--radius-sm); }
/* /Components/TrainCurveChart.razor.rz.scp.css */
/* Self-contained: the pl-chart__* chrome this mirrors is scoped to SubjectVolumeChart's own sheet
   (CSS isolation), so none of it reaches here and the layout rules are repeated rather than shared. */

.tcc[b-tpw60w1cx8] {
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

/* Three columns — left tick gutter, plot, right tick gutter — each `auto` so it is exactly as wide
   as its widest label. The x-label row lives in the SAME grid (row 2, plot column) so it can never
   drift off the plot when either gutter changes width. */
.tcc__area[b-tpw60w1cx8] {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr) auto;
    column-gap: 6px;
}

.tcc__yaxis[b-tpw60w1cx8] {
    grid-row: 1;
    position: relative;
    pointer-events: none;
}

.tcc__yaxis--left[b-tpw60w1cx8] { grid-column: 1; }
.tcc__yaxis--right[b-tpw60w1cx8] { grid-column: 3; }

.tcc__yaxis span[b-tpw60w1cx8] {
    position: absolute;
    transform: translateY(50%);
    white-space: nowrap;
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    color: var(--fg-muted);
    line-height: 1;
}

.tcc__yaxis--left span[b-tpw60w1cx8] { right: 0; }
.tcc__yaxis--right span[b-tpw60w1cx8] { left: 0; }

/* Zero-height in-flow copy of the labels: the only thing giving the auto column a width, since every
   visible tick is absolutely positioned. */
.tcc__yaxis-sizer[b-tpw60w1cx8] {
    height: 0;
    overflow: hidden;
    visibility: hidden;
}

.tcc__yaxis-sizer span[b-tpw60w1cx8] {
    position: static;
    display: block;
    transform: none;
}

.tcc__plot[b-tpw60w1cx8] {
    grid-column: 2;
    grid-row: 1;
    position: relative;
}

.tcc__labels[b-tpw60w1cx8] {
    grid-column: 2;
    grid-row: 2;
    display: flex;
    justify-content: space-between;
    gap: 4px;
    margin-top: 4px;
    font-size: var(--text-3xs);
    font-family: var(--font-mono);
    color: var(--fg-muted);
    overflow: hidden;
}

.tcc__labels span[b-tpw60w1cx8] {
    flex: 0 0 auto;
    white-space: nowrap;
}

.tcc__labels-one[b-tpw60w1cx8] { margin: 0 auto; }

.tcc__svg[b-tpw60w1cx8] {
    width: 100%;
    height: 132px;
    display: block;
    background: var(--bg-sunken);
    border-radius: var(--radius-sm);
}

/* Mixed off the muted FOREGROUND rather than a border token: the plot sits on --bg-sunken, which the
   border tokens are only a step or two from — an invisible hairline defeats a labelled axis. Mixing
   fg-muted keeps a predictable ratio in both themes. */
.tcc__grid[b-tpw60w1cx8] {
    stroke: color-mix(in srgb, var(--fg-muted) 34%, transparent);
    stroke-width: 0.5;
    vector-effect: non-scaling-stroke;
}

.tcc__line[b-tpw60w1cx8] {
    fill: none;
    stroke-width: 1.75;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* A zero-length line with a round cap = a round dot at any viewBox stretch. A <circle> would render
   as an ellipse, since preserveAspectRatio="none" scales x and y by different factors. */
.tcc__dot[b-tpw60w1cx8] {
    stroke-width: 5;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

/* Train and val are the same QUANTITY on the same axis, so they share a hue and differ by dash —
   colour is spent on the axis distinction instead, which is the one a misreading turns into a wrong
   conclusion about the model. */
.tcc__line.is-train[b-tpw60w1cx8], .tcc__dot.is-train[b-tpw60w1cx8] { stroke: var(--accent); }

.tcc__line.is-val[b-tpw60w1cx8], .tcc__dot.is-val[b-tpw60w1cx8] {
    stroke: var(--accent);
    stroke-dasharray: 4 3;
    opacity: 0.75;
}

.tcc__line.is-dice[b-tpw60w1cx8], .tcc__dot.is-dice[b-tpw60w1cx8] { stroke: var(--success); }

.tcc__empty[b-tpw60w1cx8] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.tcc__legend[b-tpw60w1cx8] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-3);
    font-size: var(--text-2xs);
    color: var(--fg-muted);
}

.tcc__key[b-tpw60w1cx8] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.tcc__swatch[b-tpw60w1cx8] {
    width: 12px;
    height: 0;
    border-top: 2px solid var(--accent);
}

.tcc__swatch.is-val[b-tpw60w1cx8] { border-top-style: dashed; }
.tcc__swatch.is-dice[b-tpw60w1cx8] { border-top-color: var(--success); }

/* Which axis a series is read against. Without it the two scales are invisible and a Dice of 0.9
   drawn near a loss of -0.9 reads as the same height meaning the same thing. */
.tcc__axis-note[b-tpw60w1cx8] {
    font-family: var(--font-mono);
    font-size: var(--text-3xs);
    padding: 0 3px;
    border-radius: var(--radius-xs);
    background: var(--bg-raised);
    border: 1px solid var(--border-subtle);
    color: var(--fg-muted);
}
/* /Components/UserMenu.razor.rz.scp.css */
/* Fallback cog style when no CogClass is supplied. */
.usermenu__cog[b-yegzohtau0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--fg-secondary);
    cursor: pointer;
}

.usermenu__cog:hover[b-yegzohtau0] {
    background: var(--bg-hover);
    color: var(--fg-primary);
}

/* Full-viewport catcher: closes the menu on any outside click. */
.usermenu__backdrop[b-yegzohtau0] {
    position: fixed;
    inset: 0;
    z-index: 1190;
    background: transparent;
}

/* Cursor-anchored popover. left/top set to the click point; transform flips it
   toward whichever corner has room (set in code via _flipX/_flipY). */
.usermenu__pop[b-yegzohtau0] {
    position: fixed;
    z-index: 1200;
    width: 300px;
    padding: 8px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-lg);
    display: flex;
    flex-direction: column;
    gap: 1px;
}

/* Account identity — who the settings below apply to. */
.usermenu__head[b-yegzohtau0] {
    display: flex;
    align-items: center;
    gap: 9px;
    min-width: 0;
    padding: 4px 5px 9px;
    margin-bottom: 6px;
    border-bottom: 1px solid var(--border-subtle);
}

.usermenu__avatar[b-yegzohtau0] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 30px;
    height: 30px;
    border-radius: 50%;
    background: var(--bg-selected, var(--bg-hover));
    color: var(--accent-fg, var(--fg-primary));
    font-size: var(--text-xs);
    font-weight: 600;
}

.usermenu__id[b-yegzohtau0] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

/* Role reads as a quiet caption, not a badge — it is information, not a control. */
.usermenu__role[b-yegzohtau0] {
    flex: 0 0 auto;
    font-size: var(--text-xs);
    color: var(--fg-muted);
    white-space: nowrap;
}

.usermenu__sect[b-yegzohtau0] {
    display: flex;
    flex-direction: column;
    gap: 7px;
    padding: 0 5px;
    margin-bottom: 6px;
}

.usermenu__sect-title[b-yegzohtau0] {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.usermenu__sect-hint[b-yegzohtau0] { font-size: var(--text-xs); color: var(--fg-muted); }

.usermenu__theme[b-yegzohtau0] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 6px;
}

.usermenu__theme-opt[b-yegzohtau0] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 5px;
    padding: 9px 4px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: var(--text-xs);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.usermenu__theme-opt:hover[b-yegzohtau0] {
    border-color: var(--border-strong);
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.usermenu__theme-opt.is-active[b-yegzohtau0] {
    border-color: var(--border-accent);
    background: var(--bg-selected);
    color: var(--accent-fg);
    box-shadow: var(--ring-selected);
}

.usermenu__theme-icon[b-yegzohtau0] { display: inline-flex; color: var(--fg-muted); }
.usermenu__theme-opt.is-active .usermenu__theme-icon[b-yegzohtau0] { color: var(--accent); }

.usermenu__name[b-yegzohtau0] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-primary);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usermenu__email[b-yegzohtau0] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.usermenu__item[b-yegzohtau0] {
    display: flex;
    align-items: center;
    gap: 9px;
    width: 100%;
    padding: 7px 9px;
    border: 0;
    background: transparent;
    border-radius: var(--radius-sm);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    text-align: left;
    cursor: pointer;
}

.usermenu__item svg[b-yegzohtau0] {
    flex-shrink: 0;
    color: var(--fg-muted);
}

.usermenu__item:hover[b-yegzohtau0] {
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.usermenu__item:hover svg[b-yegzohtau0] {
    color: var(--fg-primary);
}

.usermenu__item--danger[b-yegzohtau0] {
    color: var(--danger);
}

.usermenu__item--danger svg[b-yegzohtau0] {
    color: var(--danger);
}

.usermenu__item--danger:hover[b-yegzohtau0] {
    background: var(--danger-bg);
    color: var(--danger);
}

.usermenu__item--danger:hover svg[b-yegzohtau0] {
    color: var(--danger);
}

.usermenu__sep[b-yegzohtau0] {
    height: 1px;
    margin: 3px 0;
    background: var(--border-subtle);
}

/* The last row: Log out on the left, the build stamp on the right of the SAME line. The button
   keeps its own hover box — only as wide as its label, so hovering the stamp does not light it. */
.usermenu__foot[b-yegzohtau0] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.usermenu__foot .usermenu__item[b-yegzohtau0] {
    width: auto;
}

/* Build stamp — the pull request this deployment came from. Quiet by design: it is there to be
   read out when something is wrong, not to be part of the menu. */
.usermenu__build[b-yegzohtau0] {
    margin-left: auto;
    padding-right: 8px;
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-variant-numeric: tabular-nums;
}
/* /Components/WelcomeTour.razor.rz.scp.css */
/* margin:auto on the dialog + overflow-y:auto here, NOT align-items:center — on a short viewport
   centring would push the close button off the top where nothing can scroll to it. */
.tour-scrim[b-nyyvz0iwef] {
    position: fixed;
    inset: 0;
    z-index: 9100; /* above the chat widget bubble (9000), not just --z-dialog */
    display: flex;
    justify-content: center;
    padding: 20px;
    overflow-y: auto;
    background: var(--scrim);
}

.tour[b-nyyvz0iwef] {
    position: relative;
    width: min(760px, 100%);
    margin: auto;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background: var(--bg-raised);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-lg);
    box-shadow: var(--elevation-dialog);
    overflow: hidden;
}
.tour:focus[b-nyyvz0iwef] { outline: none; }

/* ── Stage: always dark, like a viewport ─────────────────────────────────── */
.tour__stage[b-nyyvz0iwef] {
    position: relative;
    height: clamp(260px, 40vh, 320px);
    background-color: var(--bg-canvas);
    background-image:
        linear-gradient(rgba(255, 255, 255, .025) 1px, transparent 1px),
        linear-gradient(90deg, rgba(255, 255, 255, .025) 1px, transparent 1px);
    background-size: 24px 24px;
    border-bottom: 1px solid var(--border-canvas);
    overflow: hidden;
}

.tour__scene[b-nyyvz0iwef] {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    opacity: 0;
    transform: translateY(10px);
    transition: opacity 260ms var(--ease-out), transform 260ms var(--ease-out);
    pointer-events: none;
}
.tour__scene--past[b-nyyvz0iwef] { transform: translateY(-10px); }
.tour__scene--on[b-nyyvz0iwef] { opacity: 1; transform: none; }

.tour__art[b-nyyvz0iwef] { flex-shrink: 0; }
.tour__art--flow[b-nyyvz0iwef], .tour__art--present[b-nyyvz0iwef] { display: flex; align-items: center; }
.tour__art--flow[b-nyyvz0iwef] { gap: 20px; }
.tour__art--present[b-nyyvz0iwef] { gap: 22px; }

.tour__close[b-nyyvz0iwef] {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 32px;
    height: 32px;
    display: grid;
    place-items: center;
    padding: 0;
    border: none;
    border-radius: 5px;
    background: rgba(14, 16, 22, .6);
    color: var(--fg-secondary);
    cursor: pointer;
    transition: var(--transition-colors);
}
.tour__close:hover[b-nyyvz0iwef] { background: var(--bg-hover); color: var(--fg-primary); }
.tour__close:focus-visible[b-nyyvz0iwef] { outline: none; box-shadow: var(--ring-focus); }
.tour__close svg[b-nyyvz0iwef] { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; }

/* ── Content ──────────────────────────────────────────────────────────────── */
.tour__content[b-nyyvz0iwef] {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding: 24px 28px 20px;
}

.tour__progress[b-nyyvz0iwef] {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 8px;
}

.tour__seg[b-nyyvz0iwef] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 7px;
    padding: 4px 0;
    border: none;
    border-radius: 2px;
    background: none;
    font: inherit;
    text-align: left;
    cursor: pointer;
}
.tour__seg:focus-visible[b-nyyvz0iwef] { outline: none; box-shadow: var(--ring-focus); }
.tour__seg-bar[b-nyyvz0iwef] {
    height: 3px;
    border-radius: 2px;
    background: var(--border-default);
    transition: background 180ms var(--ease-standard);
}
.tour__seg--done .tour__seg-bar[b-nyyvz0iwef] { background: var(--accent); }
.tour__seg-label[b-nyyvz0iwef] {
    font-size: 12px;
    color: var(--fg-muted);
    transition: color 180ms var(--ease-standard);
}
.tour__seg--on .tour__seg-label[b-nyyvz0iwef], .tour__seg:hover .tour__seg-label[b-nyyvz0iwef] { color: var(--fg-primary); }

.tour__text[b-nyyvz0iwef] { display: grid; }
/* Every step's text sits in the same cell (see the razor) — the inactive ones hold the height, unseen and unread. */
.tour__step[b-nyyvz0iwef] {
    grid-area: 1 / 1;
    display: flex;
    flex-direction: column;
    gap: 8px;
    visibility: hidden;
}
.tour__step--on[b-nyyvz0iwef] { visibility: visible; }

.tour__count[b-nyyvz0iwef] {
    font-family: var(--font-mono);
    font-size: 11px;
    letter-spacing: .04em;
    color: var(--fg-muted);
}

.tour__title[b-nyyvz0iwef] {
    margin: 0;
    font-size: 22px;
    line-height: 28px;
    font-weight: var(--weight-semibold);
    letter-spacing: -.01em;
    color: var(--fg-primary);
}

.tour__body[b-nyyvz0iwef] {
    max-width: 620px;
    margin: 0;
    font-size: 14px;
    line-height: 1.6;
    color: var(--fg-secondary);
    text-wrap: pretty;
}
.tour__body strong[b-nyyvz0iwef] { color: var(--fg-primary); font-weight: var(--weight-semibold); }

.tour__acts[b-nyyvz0iwef] {
    display: flex;
    align-items: center;
    gap: 8px;
    padding-top: 14px;
    border-top: 1px solid var(--border-subtle);
}
.tour__hint[b-nyyvz0iwef] { flex: 1; font-size: 12px; color: var(--fg-muted); }
.tour__acts .btn[b-nyyvz0iwef] { height: 32px; padding: 0 14px; font-size: 13px; border-radius: 5px; }
.tour__acts .btn--ghost[b-nyyvz0iwef] { padding: 0 12px; }
.tour__acts .btn--primary[b-nyyvz0iwef] { padding: 0 16px; gap: 6px; }
.tour__back[b-nyyvz0iwef] { background: transparent; }
.tour__acts .btn svg[b-nyyvz0iwef] { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }

/* ── Stage art. Literal shades are illustration-only and stay here. ──────── */
.ts-step[b-nyyvz0iwef] { display: flex; flex-direction: column; align-items: center; gap: 12px; margin: 0; }
.ts-cap[b-nyyvz0iwef] { font-family: var(--font-mono); font-size: 11px; letter-spacing: .04em; color: #828999; }
.ts-chev[b-nyyvz0iwef] { width: 18px; height: 18px; margin-bottom: 26px; fill: none; stroke: #474D5A; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ts-chev--arrow[b-nyyvz0iwef] { width: 20px; height: 20px; margin: 0; }

.ts-tile[b-nyyvz0iwef] {
    position: relative;
    width: 148px;
    height: 148px;
    display: grid;
    place-items: center;
    border: 1px solid #3C414F;
    border-radius: 8px;
    background: #0A0B0F;
}
.ts-tile--3d[b-nyyvz0iwef] { display: block; background: radial-gradient(circle at 50% 60%, #1A1D26 0%, #0A0B0F 70%); }
.ts-stack[b-nyyvz0iwef] { position: relative; width: 148px; height: 148px; }
.ts-stack .ts-tile[b-nyyvz0iwef] { position: absolute; inset: 0; }
.ts-stack__plate[b-nyyvz0iwef] { position: absolute; inset: 0; border-radius: 8px; }
.ts-stack__plate--1[b-nyyvz0iwef] { transform: translate(6px, -6px); background: #181B22; border: 1px solid #2B2F3A; }
.ts-stack__plate--2[b-nyyvz0iwef] { transform: translate(12px, -12px); background: #15171E; border: 1px solid #23262F; }

/* A CT slice, and a 2D segment overlay on it: ~50% fill + full-colour 1px outline (DS rule). */
.ts-slice[b-nyyvz0iwef] {
    position: relative;
    border-radius: 50%;
    background: radial-gradient(ellipse at 50% 45%, #6A6F7A 0%, #3A3E48 55%, #1B1D23 100%);
    box-shadow: inset 0 0 0 3px #9CA0A8;
}
.ts-slice--thin[b-nyyvz0iwef] { box-shadow: inset 0 0 0 2px #9CA0A8; }
.ts-slice--body[b-nyyvz0iwef] { background: radial-gradient(ellipse at 50% 45%, #5E636E, #33373F 60%, #1B1D23); box-shadow: inset 0 0 0 2px #8A8F98; }
.ts-ov[b-nyyvz0iwef] {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--c) var(--a, 55%), transparent);
    outline: 1px solid var(--c);
}

/* "Review & edit" tile: an AI tag, the stretch being brushed in (dashed, brush-cursor blue), a reviewed check. */
.ts-aichip[b-nyyvz0iwef] {
    position: absolute;
    top: 8px;
    left: 8px;
    height: 16px;
    display: flex;
    align-items: center;
    gap: 3px;
    padding: 0 6px;
    border-radius: 999px;
    background: color-mix(in srgb, #1F63D6 22%, #0E1016);
    color: #A9CBFF;
    font-family: var(--font-mono);
    font-size: 9px;
}
.ts-aichip svg[b-nyyvz0iwef] { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linejoin: round; }
.ts-fix[b-nyyvz0iwef] {
    position: absolute;
    border-radius: 50%;
    background: color-mix(in srgb, var(--anat-liver) 35%, transparent);
    outline: 1px dashed #A9CBFF;
}
.ts-ok[b-nyyvz0iwef] {
    position: absolute;
    right: 8px;
    bottom: 8px;
    width: 18px;
    height: 18px;
    display: grid;
    place-items: center;
    border-radius: 50%;
    background: var(--success-bg);
    color: var(--mint-300);
}
.ts-ok svg[b-nyyvz0iwef] { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }

/* A shaded 3D surface. */
.ts-blob[b-nyyvz0iwef] { position: absolute; border-radius: 50%; background: radial-gradient(circle at 35% 30%, var(--hi) 0%, var(--c) var(--mid, 50%), var(--lo) 100%); }
.ts-blob--liver[b-nyyvz0iwef] { --hi: #D9956E; --c: var(--anat-liver); --lo: #4A2412; --mid: 45%; border-radius: 58% 42% 48% 52%; }
.ts-blob--spleen[b-nyyvz0iwef] { --hi: #C4638C; --c: var(--anat-spleen); --lo: #3A0F22; }
.ts-blob--lesion[b-nyyvz0iwef] { --hi: #FF9BCC; --c: var(--anat-tumor); --lo: #7A0F46; }
.ts-aorta[b-nyyvz0iwef] { position: absolute; border-radius: 5px; background: linear-gradient(90deg, #8A1418, var(--anat-artery) 40%, #FF8A8E 55%, #8A1418); }

/* Mini-UI frames */
.ts-frame[b-nyyvz0iwef] {
    display: flex;
    overflow: hidden;
    border: 1px solid #2B2F3A;
    border-radius: 8px;
    box-shadow: 0 12px 32px rgba(0, 0, 0, .5);
}
.ts-bar[b-nyyvz0iwef] { height: 5px; border-radius: 3px; background: #3C414F; }
.ts-bar--hi[b-nyyvz0iwef] { height: 6px; }
.ts-bar--lo[b-nyyvz0iwef] { background: #2B2F3A; }
.ts-over[b-nyyvz0iwef] { font-family: var(--font-mono); font-size: 8px; letter-spacing: .06em; color: #7A8090; }

/* Library */
.ts-lib[b-nyyvz0iwef] { width: 560px; height: 250px; background: #0D0F14; }
.ts-lib__side[b-nyyvz0iwef] {
    width: 120px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 12px 10px;
    background: #15171E;
    border-right: 1px solid #1C1F27;
}
.ts-lib__folder .ts-bar--hi[b-nyyvz0iwef] { height: 5px; }
.ts-lib__active[b-nyyvz0iwef] {
    height: 20px;
    display: flex;
    align-items: center;
    padding: 0 6px;
    border-radius: 4px;
    background: color-mix(in srgb, #1F63D6 18%, #0E1016);
}
.ts-lib__folder[b-nyyvz0iwef] { display: flex; align-items: center; gap: 6px; margin-left: 4px; }
.ts-lib__folder i[b-nyyvz0iwef] { width: 7px; height: 7px; border: 1px solid #474D5A; border-radius: 2px; }
.ts-lib__main[b-nyyvz0iwef] { flex: 1; display: flex; flex-direction: column; }
.ts-lib__top[b-nyyvz0iwef] {
    height: 34px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 12px;
    border-bottom: 1px solid #1C1F27;
}
.ts-lib__new[b-nyyvz0iwef] {
    height: 20px;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 9px;
    border-radius: 4px;
    background: #1F63D6;
    color: #fff;
    font-size: 10px;
    font-weight: 500;
    box-shadow: 0 0 0 3px color-mix(in srgb, #2E7CF6 45%, transparent);
}
.ts-lib__new svg[b-nyyvz0iwef] { width: 10px; height: 10px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; }
.ts-lib__grid[b-nyyvz0iwef] { flex: 1; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; padding: 12px; }
.ts-card[b-nyyvz0iwef] {
    display: flex;
    flex-direction: column;
    overflow: hidden;
    border: 1px solid #23262F;
    border-radius: 6px;
    background: #15171E;
}
.ts-card--sel[b-nyyvz0iwef] { border-color: #2E7CF6; }
.ts-card__thumb[b-nyyvz0iwef] { flex: 1; display: grid; place-items: center; background: #0A0B0F; }
.ts-card__slice[b-nyyvz0iwef] {
    position: relative;
    width: 46px;
    height: 30px;
    border-radius: 50%;
    background: radial-gradient(ellipse, #5A5F6A, #1B1D23);
    box-shadow: inset 0 0 0 1.5px #8A8F98;
}
.ts-card__slice > div[b-nyyvz0iwef] { position: absolute; top: 25%; width: 40%; height: 50%; border-radius: 50%; opacity: .75; }
.ts-card__foot[b-nyyvz0iwef] { display: flex; align-items: center; justify-content: space-between; padding: 6px 7px; }
.ts-card__pill[b-nyyvz0iwef] { width: 26px; height: 9px; border-radius: 5px; }
.ts-card__pill--0[b-nyyvz0iwef] { background: rgba(33, 254, 177, .18); }
.ts-card__pill--1[b-nyyvz0iwef] { background: rgba(46, 124, 246, .2); }
.ts-card__pill--2[b-nyyvz0iwef] { background: #23262F; }

/* Editor */
.ts-ed[b-nyyvz0iwef] { width: 560px; height: 250px; background: #15171E; }
.ts-ed__side[b-nyyvz0iwef] { width: 150px; display: flex; flex-direction: column; gap: 6px; padding: 12px 10px; border-right: 1px solid #1C1F27; }
.ts-tool[b-nyyvz0iwef] { height: 24px; display: flex; align-items: center; gap: 7px; padding: 0 7px; border-radius: 4px; color: #AEB4C2; font-size: 10px; }
.ts-tool svg[b-nyyvz0iwef] { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }
.ts-tool--on[b-nyyvz0iwef] { background: color-mix(in srgb, #1F63D6 18%, #0E1016); box-shadow: inset 0 0 0 1px #2E7CF6; color: #A9CBFF; }
.ts-seg[b-nyyvz0iwef] { height: 18px; display: flex; align-items: center; gap: 6px; padding: 0 4px; font-size: 9px; color: #AEB4C2; }
.ts-seg i[b-nyyvz0iwef] { width: 8px; height: 8px; border-radius: 2px; }
.ts-seg span:first-of-type[b-nyyvz0iwef] { flex: 1; }
.ts-seg__vol[b-nyyvz0iwef] { font-family: var(--font-mono); color: #7A8090; }
.ts-ed__views[b-nyyvz0iwef] { flex: 1; display: grid; grid-template: 1fr 1fr / 1fr 1fr; gap: 3px; background: #23262F; }
.ts-view[b-nyyvz0iwef] { position: relative; display: grid; place-items: center; background: #0A0B0F; }
.ts-view--3d[b-nyyvz0iwef] { display: block; background: radial-gradient(circle at 50% 55%, #1A1D26, #0A0B0F 70%); }
.ts-view__lbl[b-nyyvz0iwef] { position: absolute; left: 6px; top: 4px; font-family: var(--font-mono); font-size: 8px; color: #828999; }
.ts-cursor[b-nyyvz0iwef] { position: absolute; width: 14px; height: 14px; border: 1.5px solid #A9CBFF; border-radius: 50%; }

/* Approve & present */
.ts-done[b-nyyvz0iwef] { width: 170px; flex-direction: column; background: #15171E; }
.ts-done__thumb[b-nyyvz0iwef] { height: 100px; display: grid; place-items: center; background: #0A0B0F; }
.ts-done__body[b-nyyvz0iwef] { display: flex; flex-direction: column; gap: 8px; padding: 10px 12px; }
.ts-done__title[b-nyyvz0iwef] { font-size: 11px; font-weight: 500; color: #E6E8EF; }
.ts-done__row[b-nyyvz0iwef] { display: flex; align-items: center; justify-content: space-between; }
.ts-approved[b-nyyvz0iwef] {
    height: 18px;
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 0 7px;
    border-radius: 999px;
    background: var(--success-bg);
    color: var(--mint-300);
    font-size: 9px;
    font-weight: 600;
    letter-spacing: .06em;
}
.ts-approved svg[b-nyyvz0iwef] { width: 9px; height: 9px; fill: none; stroke: currentColor; stroke-width: 3; stroke-linecap: round; stroke-linejoin: round; }
.ts-lock[b-nyyvz0iwef] { width: 11px; height: 11px; fill: none; stroke: #7A8090; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ts-pres[b-nyyvz0iwef] { width: 330px; height: 230px; flex-direction: column; }
.ts-pres__head[b-nyyvz0iwef] {
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 10px;
    background: #15171E;
    border-bottom: 1px solid #1C1F27;
    font-size: 10px;
    font-weight: 500;
    color: #E6E8EF;
}
.ts-pres__ro[b-nyyvz0iwef] { font-family: var(--font-mono); font-size: 9px; font-weight: 400; color: #7A8090; }
.ts-pres__view[b-nyyvz0iwef] { position: relative; flex: 1; background: radial-gradient(circle at 50% 58%, #1D2130, #0A0B0F 72%); }
.ts-legend[b-nyyvz0iwef] { position: absolute; left: 0; right: 0; bottom: 0; height: 34px; display: flex; align-items: center; gap: 10px; padding: 0 10px; }
.ts-legend span[b-nyyvz0iwef] { display: flex; align-items: center; gap: 4px; font-size: 9px; color: #AEB4C2; }
.ts-legend i[b-nyyvz0iwef] { width: 7px; height: 7px; border-radius: 2px; }

/* The art is drawn at a fixed 560px; scale it rather than reflow it on a narrow screen. */
@media (max-width: 640px) { .tour__art[b-nyyvz0iwef] { transform: scale(.8); } }
@media (max-width: 520px) {
    .tour__art[b-nyyvz0iwef] { transform: scale(.6); }
    .tour__acts[b-nyyvz0iwef] { flex-wrap: wrap; justify-content: flex-end; }
    .tour__hint[b-nyyvz0iwef] { flex-basis: 100%; }
}
@media (max-width: 380px) { .tour__art[b-nyyvz0iwef] { transform: scale(.5); } }

@media (prefers-reduced-motion: reduce) {
    .tour__scene[b-nyyvz0iwef] { transform: none; transition: opacity 120ms linear; }
}
/* /Layout/MainLayout.razor.rz.scp.css */
.app-root[b-sekvq1s5ss] {
    min-height: 100vh;
}
/* /Pages/Case.razor.rz.scp.css */
/* Case-workspace styles that belong to ONE feature and nothing else references.

   Deliberately scoped (Blazor rewrites these to Case.razor's own elements) rather than added to
   wwwroot/css/case.css: that file is the shared workspace chrome and is being reworked on two other
   branches at the same time, so a self-contained feature has no business widening the conflict there.
   Anything here that a second component ever needs should MOVE to case.css at that point. */

/* ---- 3D scene background, inside the 3D model settings flyout --------------------------------
   Was its own top-bar icon with a one-per-line dropdown; in a 300px flyout the four presets fit as a
   wrapping row of pills instead, so the section costs one line rather than four. .pv-preset itself is
   shared chrome (case.css) — only the row is ours. */
.pv-imgset__scenes[b-vikmukih93] {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2);
}

.pv-imgset__scenes .pv-preset[b-vikmukih93] {
    flex: 1 1 auto;
    text-align: center;
}

/* ---- download the 3D model (top-bar menu) ----------------------------------------------------
   Anchored by .pv-scene (case.css), the same positioned wrapper the appearance/scene menus use.
   The offset clears the BAR, not the button: .pv-top is one continuous surface now with its own
   padding, so 4px under a 30px trigger started the menu 8px inside the bar it drops out of. */
.pv-dl[b-vikmukih93] {
    position: absolute;
    top: calc(100% + var(--space-6));
    right: 0;
    z-index: 30;
    width: 260px;
    padding: var(--space-3);
    display: flex;
    flex-direction: column;
    gap: var(--space-2);
}

.pv-dl__hint[b-vikmukih93] {
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--fg-muted);
}

.pv-dl__fmt[b-vikmukih93] {
    display: flex;
    flex-direction: column;
    gap: var(--space-1);
}

/* Two lines per format: what it is, and the one thing that decides between them. STL cannot carry a
   name or a colour, so a multi-structure STL is a single merged solid — worth saying before the click,
   not after the file is open in the wrong tool. */
.pv-dl__fmtbtn[b-vikmukih93] {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: var(--space-2);
    text-align: left;
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-sm);
    background: var(--ed-control);
    color: var(--ed-fg-2);
    cursor: pointer;
}

.pv-dl__fmtbtn:hover[b-vikmukih93] { background: var(--ed-hover-strong); border-color: var(--ed-line-strong); }
.pv-dl__fmtbtn:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

/* One of three: a toggle group, so the chosen format takes the segment look, not an accent fill. */
.pv-dl__fmtbtn.is-active[b-vikmukih93] {
    background: var(--ed-seg-on-bg);
    border-color: transparent;
    box-shadow: var(--ed-seg-on-shadow);
    color: var(--ed-seg-on-fg);
}

.pv-dl__fmtname[b-vikmukih93] {
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
}

.pv-dl__fmtnote[b-vikmukih93] {
    font-size: var(--text-xs);
    opacity: .75;
}

.pv-dl__check[b-vikmukih93] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    cursor: pointer;
}

.pv-dl__go[b-vikmukih93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--space-2);
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--fg-on-accent);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
}

.pv-dl__go:hover:not(:disabled)[b-vikmukih93] { background: var(--accent-hover); }
.pv-dl__go:disabled[b-vikmukih93] { opacity: .5; cursor: default; }
.pv-dl__go:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

/* Progress + result, deliberately OUTSIDE the popover: a download started from a structure's row menu closes
   that menu at once, and the top-bar popover is normally shut — anything rendered inside either of them would
   have nowhere to appear, so a failed row download would report nothing at all. */
.pv-dl__status[b-vikmukih93] {
    position: absolute;
    top: calc(100% + var(--space-6));
    right: 0;
    z-index: 31;
    max-width: 320px;
    padding: var(--space-2) var(--space-3);
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.35;
    color: var(--fg-secondary);
    white-space: normal;
}

.pv-dl__statusx[b-vikmukih93] {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.pv-dl__statusx:hover[b-vikmukih93] { color: var(--fg-primary); }

/* ---- session chat (collab phase 4) ----------------------------------------------------------- */

/* Trigger: the .pv-icon shell, widened so the live participant count can ride beside the bubble — the
   number is the whole point of the entry (it is what tells you a session is worth talking into), and a
   34px square has no room for it. */
.pv-chat__trigger[b-vikmukih93] {
    position: relative;
    width: auto;
    min-width: 34px;
    padding: 0 var(--space-2);
    gap: 5px;
}

.pv-chat__peers[b-vikmukih93] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    line-height: 1;
}

/* Unread count, pinned to the corner so it reads as a notification rather than as part of the label. */
.pv-chat__unread[b-vikmukih93] {
    position: absolute;
    top: -5px;
    right: -5px;
    min-width: 16px;
    height: 16px;
    padding: 0 4px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: 999px;
    background: var(--accent);
    color: var(--fg-on-accent);
    font-size: 10px;
    font-weight: var(--weight-semibold);
    line-height: 1;
}

/* Docked at the right edge. Fixed, not absolute, for the same reason the AI assistant is: anchored to the
   window, not to the stage. z-index sits below the assistant's 9000 — if they ever do collide, the
   transient panel should win. */
.pv-chat[b-vikmukih93] {
    position: fixed;
    top: 56px;
    bottom: 20px;
    right: 20px;
    z-index: var(--z-toast);
    width: 320px;
    display: flex;
    flex-direction: column;
    padding: 0;
    overflow: hidden;
}

/* ...but step aside ONLY while the AI assistant's panel is actually open — it is a fixed 380px column at
   right:20px/bottom:20px that this file must not touch. Reserving that lane unconditionally was wrong:
   the assistant is closed almost always, so the chat sat ~420px in from the edge with dead space beside
   it, which reads as a layout bug rather than as deference. Side-by-side lanes (rather than stacking, or
   trusting a height cap) is the only arrangement that cannot overlap the assistant at any viewport
   height, so that is what the open case gets. */
.pv-chat--aside[b-vikmukih93] { right: calc(380px + 20px + var(--space-3)); }

/* Too narrow for two lanes: stack above the assistant's column instead of over it. The panel can get
   short here, but the log scrolls and short beats overlapping. Only applies while it is open — a closed
   assistant leaves the full height to the chat. */
@media (max-width: 1180px) {
    .pv-chat--aside[b-vikmukih93] {
        right: 20px;
        bottom: calc(560px + 20px + var(--space-2));
    }

    .pv-chat[b-vikmukih93] { width: min(320px, calc(100vw - 40px)); }
}

.pv-chat__head[b-vikmukih93] {
    flex: 0 0 auto;
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    padding: var(--space-3);
    border-bottom: 1px solid var(--ed-line);
}

.pv-chat__title[b-vikmukih93] {
    font-size: var(--text-xs);
    font-weight: var(--weight-semibold);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--fg-secondary);
}

/* Names, not a count: the count doesn't tell you whether the person you're waiting for has arrived. */
.pv-chat__who[b-vikmukih93] {
    flex: 1 1 auto;
    min-width: 0;
    font-size: var(--text-xs);
    color: var(--fg-muted);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* The participant line doubles as the roster toggle — same text, same place, now clickable. */
.pv-chat__who--btn[b-vikmukih93] {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 2px 4px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    text-align: left;
    cursor: pointer;
}

.pv-chat__who--btn:hover[b-vikmukih93] { color: var(--fg-primary); background-image: var(--pv-lift); }
.pv-chat__wholine[b-vikmukih93] { min-width: 0; overflow: hidden; text-overflow: ellipsis; }

.pv-chat__x[b-vikmukih93],
.pv-chat__ai[b-vikmukih93] {
    flex: 0 0 auto;
    display: inline-flex;
    padding: 2px;
    border: 0;
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
}

.pv-chat__x:hover[b-vikmukih93],
.pv-chat__ai:hover[b-vikmukih93] { color: var(--fg-primary); }

/* Invited: the sparkle lights up in the accent, so "is the assistant in this room?" is answered by the
   header at a glance rather than by scrolling the log back to the join line. */
.pv-chat__ai.is-on[b-vikmukih93] { color: var(--accent); }

/* --- The AI assistant in the session ------------------------------------------------------------- */

/* Its messages are neither ours nor another person's, and reading them as a participant's is the one
   confusion worth spending a colour on. Left-aligned like everyone else's, accent-edged. */
.pv-chat__msg--ai[b-vikmukih93] {
    background: color-mix(in srgb, var(--accent) 12%, var(--ed-hover));
    border-left: 2px solid color-mix(in srgb, var(--accent) 70%, transparent);
}

.pv-chat__aimark[b-vikmukih93] {
    display: inline-flex;
    color: var(--accent);
}

.pv-chat__thinking[b-vikmukih93],
.pv-chat__confirm[b-vikmukih93] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.pv-chat__confirm[b-vikmukih93] {
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: color-mix(in srgb, var(--accent) 14%, transparent);
    color: var(--fg-secondary);
}

.pv-chat__confirm > span[b-vikmukih93] {
    flex: 1 1 auto;
    min-width: 0;
    overflow-wrap: anywhere;
}

.pv-chat__ok[b-vikmukih93],
.pv-chat__no[b-vikmukih93],
.pv-chat__stopai[b-vikmukih93] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-sm);
    background: none;
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    cursor: pointer;
}

.pv-chat__ok:hover[b-vikmukih93],
.pv-chat__no:hover[b-vikmukih93],
.pv-chat__stopai:hover[b-vikmukih93] {
    border-color: var(--ed-line-strong);
    color: var(--fg-primary);
}

/* Three dots, staggered. Same idea as a typing indicator: only the DRIVER's client shows it, because only
   the driver's browser is the one actually running the turn. */
.pv-chat__dots[b-vikmukih93] {
    display: inline-flex;
    gap: 3px;
}

.pv-chat__dots i[b-vikmukih93] {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    background: var(--accent);
    animation: pv-chat-dot-b-vikmukih93 1.1s ease-in-out infinite;
}

.pv-chat__dots i:nth-child(2)[b-vikmukih93] { animation-delay: .15s; }
.pv-chat__dots i:nth-child(3)[b-vikmukih93] { animation-delay: .3s; }

@keyframes pv-chat-dot-b-vikmukih93 {
    0%, 60%, 100% { opacity: .25; }
    30% { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    .pv-chat__dots i[b-vikmukih93] { animation: none; opacity: .6; }
}

/* Roster: who is in, what they may do, and the controls for changing that. */
.pv-chat__roster[b-vikmukih93] {
    flex: 0 0 auto;
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-height: 34%;
    padding: var(--space-2) var(--space-3);
    border-bottom: 1px solid var(--ed-line);
    overflow-y: auto;
    overscroll-behavior: contain;
}

.pv-chat__person[b-vikmukih93] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    min-height: 24px;
    font-size: var(--text-xs);
}

.pv-chat__pname[b-vikmukih93] {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--fg-primary);
}

/* Role first, controls after — the answer to "who is editing" must not depend on reading the buttons. */
.pv-chat__prole[b-vikmukih93] {
    flex: 0 0 auto;
    margin-right: auto;
    padding: 0 6px;
    border-radius: 999px;
    font-size: 10px;
    line-height: 16px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--fg-muted);
    background: var(--ed-hover-strong);
}

.pv-chat__prole.is-editor[b-vikmukih93] {
    color: var(--ed-ok-fg);
    background: color-mix(in srgb, var(--success) 22%, transparent);
}

.pv-chat__paction[b-vikmukih93] {
    flex: 0 0 auto;
    padding: 2px 8px;
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    background: none;
    cursor: pointer;
    white-space: nowrap;
}

.pv-chat__paction:hover:not(:disabled)[b-vikmukih93] { color: var(--fg-primary); background-image: var(--pv-lift); }
.pv-chat__paction:disabled[b-vikmukih93] { opacity: .55; cursor: default; }
.pv-chat__paction.is-ok[b-vikmukih93] { border-color: color-mix(in srgb, var(--success) 55%, transparent); color: var(--success-fg); }
.pv-chat__paction.is-danger[b-vikmukih93] { border-color: color-mix(in srgb, var(--danger) 60%, transparent); color: var(--danger-fg); }

.pv-chat__rosterfoot[b-vikmukih93] {
    display: flex;
    justify-content: flex-end;
    padding-top: 4px;
}

.pv-chat__rnote[b-vikmukih93] { font-size: var(--text-xs); color: var(--fg-muted); }

/* A notice is a fact about the session, not somebody's speech: no bubble, no author line, full width. */
.pv-chat__sys[b-vikmukih93] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 6px;
    align-self: stretch;
    padding: 2px var(--space-2);
    font-size: var(--text-xs);
    line-height: 1.4;
    color: var(--fg-muted);
}

.pv-chat__systext[b-vikmukih93] { flex: 1 1 auto; min-width: 0; }
.pv-chat__systime[b-vikmukih93] { flex: 0 0 auto; font-size: 10px; opacity: .8; }
.pv-chat__sysact[b-vikmukih93] { display: flex; gap: 4px; flex: 0 0 auto; }

/* An unanswered ask is the one notice that wants attention — it is the only one with anything to do. */
.pv-chat__sys--req[b-vikmukih93] {
    border-left: 2px solid var(--ed-line-strong);
    border-radius: var(--radius-sm);
    background: var(--ed-hover);
    color: var(--fg-secondary);
}

/* column-reverse + newest-first markup: the newest message sits at the BOTTOM and the resting scroll
   position is scrollTop 0, so the log auto-sticks to new arrivals with no JS and no scroll bookkeeping.
   Scrolling up to read back is preserved by the browser, exactly as it would be in a normal log. */
.pv-chat__log[b-vikmukih93] {
    flex: 1 1 auto;
    min-height: 0;
    display: flex;
    flex-direction: column-reverse;
    gap: var(--space-2);
    padding: var(--space-3);
    overflow-y: auto;
    overscroll-behavior: contain; /* a chat scrolled to its end must not hand the wheel to the slice scrub behind it */
}

.pv-chat__empty[b-vikmukih93] {
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--fg-muted);
}

.pv-chat__msg[b-vikmukih93] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    max-width: 88%;
    align-self: flex-start;
    padding: var(--space-2);
    border-radius: var(--radius-sm);
    background: var(--ed-hover);
}

/* Ours: right-aligned AND tinted. Alignment alone is ambiguous in a narrow column where most messages are
   short enough to look centred. */
.pv-chat__msg--mine[b-vikmukih93] {
    align-self: flex-end;
    background: color-mix(in srgb, var(--accent) 26%, transparent);
}

.pv-chat__meta[b-vikmukih93] {
    display: flex;
    align-items: baseline;
    gap: var(--space-2);
    font-size: var(--text-xs);
}

.pv-chat__author[b-vikmukih93] {
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary);
}

/* A name only becomes a control when there is something to do with it, so it must LOOK different then —
   underline on hover/focus rather than a button chrome, which would put a box on every bubble. */
.pv-chat__author--btn[b-vikmukih93] {
    padding: 0;
    border: 0;
    font: inherit;
    background: none;
    cursor: pointer;
}

.pv-chat__author--btn:hover[b-vikmukih93],
.pv-chat__author--btn:focus-visible[b-vikmukih93] {
    color: var(--fg-primary);
    text-decoration: underline dotted;
    text-underline-offset: 2px;
}

/* Author menu. Its own class rather than .pv-chat__pop: that one makes its message give up the width cap
   for the emoji catalogue, and two items don't need the bubble to jump to full width. */
.pv-chat__upop[b-vikmukih93] {
    display: flex;
    flex-direction: column;
    align-items: stretch;
    gap: 2px;
    margin: 2px 0;
    padding: 4px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
    box-shadow: var(--shadow-lg);
}

.pv-chat__uname[b-vikmukih93] {
    padding: 0 6px 2px;
    font-size: 10px;
    letter-spacing: .03em;
    text-transform: uppercase;
    color: var(--fg-muted);
}

.pv-chat__uitem[b-vikmukih93] {
    padding: 3px 8px;
    border: 0;
    border-radius: var(--radius-sm);
    font-size: var(--text-xs);
    text-align: left;
    color: var(--fg-secondary);
    background: none;
    cursor: pointer;
    white-space: nowrap;
}

.pv-chat__uitem:hover[b-vikmukih93] { color: var(--fg-primary); background-image: var(--pv-lift); }
.pv-chat__uitem.is-danger[b-vikmukih93] { color: var(--danger-fg); }

.pv-chat__time[b-vikmukih93] { color: var(--fg-muted); }

/* .pv sets user-select:none for the whole workspace (drag-to-paint must not select chrome) — chat is the
   one place inside it that is text meant to be read and copied out. */
.pv-chat__text[b-vikmukih93] {
    font-size: var(--text-sm);
    line-height: 1.4;
    color: var(--fg-primary);
    white-space: pre-wrap;
    overflow-wrap: anywhere; /* a pasted id must not widen the panel */
    user-select: text;
}

.pv-chat__compose[b-vikmukih93] {
    position: relative; /* anchors the autocomplete + the emoji picker above the field */
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: var(--space-3);
    border-top: 1px solid var(--ed-line);
}

.pv-chat__field[b-vikmukih93] {
    flex: 1 1 auto;
    min-width: 0;
    height: 32px;
    padding: 0 var(--space-2);
    border: 1px solid var(--ed-line);
    border-radius: var(--radius-sm);
    background: var(--ed-control);
    color: var(--fg-primary);
    font-size: var(--text-sm);
}

.pv-chat__field[b-vikmukih93]::placeholder { color: var(--fg-muted); }
.pv-chat__field:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

.pv-chat__send[b-vikmukih93] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border: 0;
    border-radius: var(--radius-sm);
    background: var(--accent);
    color: var(--fg-on-accent);
    cursor: pointer;
}

.pv-chat__send:hover:not(:disabled)[b-vikmukih93] { background: var(--accent-hover); }
.pv-chat__send:disabled[b-vikmukih93] { opacity: .5; cursor: default; }
.pv-chat__send:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

.pv-chat__count[b-vikmukih93] {
    flex: 0 0 auto;
    padding: 0 var(--space-3) var(--space-2);
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

/* ---- chat emoji: reactions, the picker, the :shortcode: autocomplete ------------------------- */
/* NB the EmojiPicker component's own rules are in EmojiPicker.razor.css — scoped CSS tags the markup of ONE
   component, so a child's elements never carry this file's scope attribute and anything written here for it
   would compile and then match nothing. */

/* Revealed on hover, and on focus so it is reachable without a pointer: one permanently-drawn control per
   message turns the log into a column of buttons rather than a conversation. */
.pv-chat__addreact[b-vikmukih93] {
    flex: 0 0 auto;
    margin-left: auto;
    display: inline-flex;
    padding: 1px;
    border: 0;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-muted);
    cursor: pointer;
    opacity: 0;
}

.pv-chat__msg:hover .pv-chat__addreact[b-vikmukih93],
.pv-chat__msg:focus-within .pv-chat__addreact[b-vikmukih93] { opacity: 1; }
.pv-chat__addreact:hover[b-vikmukih93] { color: var(--fg-primary); }
.pv-chat__addreact:focus-visible[b-vikmukih93] { opacity: 1; outline: none; box-shadow: var(--ring-focus); }

/* A message that is nothing but emoji is a reaction to what came before, and at text size it doesn't read as
   one. em, not px: it scales with whatever .pv-chat__text is set to. */
.pv-chat__text--big[b-vikmukih93] {
    font-size: 2em;
    line-height: 1.15;
}

.pv-chat__reacts[b-vikmukih93] {
    display: flex;
    flex-wrap: wrap;
    gap: 3px;
    margin-top: 2px;
}

.pv-chat__chip[b-vikmukih93] {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    height: 20px;
    padding: 0 6px;
    border: 1px solid var(--ed-line);
    border-radius: 999px;
    background: var(--ed-control);
    color: var(--fg-secondary);
    font-size: var(--text-xs);
    line-height: 1;
    cursor: pointer;
}

/* Layered hover, never a flat fill — this floats over a canvas that can be the off-white "Light" stage. */
.pv-chat__chip:hover[b-vikmukih93] { background-image: var(--pv-lift); }
.pv-chat__chip:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

/* Yours: the accent outline is the whole readout — the count on its own cannot tell you whether you are in it. */
.pv-chat__chip.is-mine[b-vikmukih93] {
    border-color: var(--accent);
    background-color: color-mix(in srgb, var(--accent) 26%, transparent);
    color: var(--fg-primary);
}

.pv-chat__chipemoji[b-vikmukih93] { font-size: 12px; }
.pv-chat__chipn[b-vikmukih93] { font-variant-numeric: tabular-nums; }

/* React popover: in FLOW under its message rather than floating over the log. The log scrolls and hides its
   overflow, so an absolutely positioned one would either be clipped at the panel edge or left behind by the
   next scroll — and it must stay visibly attached to the message it reacts to. */
.pv-chat__pop[b-vikmukih93] {
    margin-top: var(--space-2);
    padding: var(--space-2);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
}

/* The catalogue needs more width than the 88% message cap allows, so a message showing one gives up the cap. */
.pv-chat__msg:has(.pv-chat__pop)[b-vikmukih93] {
    max-width: 100%;
    align-self: stretch;
}

.pv-chat__quick[b-vikmukih93] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
}

.pv-chat__quickbtn[b-vikmukih93],
.pv-chat__more[b-vikmukih93] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-primary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.pv-chat__quickbtn:hover[b-vikmukih93],
.pv-chat__more:hover[b-vikmukih93] { background-image: var(--pv-lift); }
.pv-chat__quickbtn:focus-visible[b-vikmukih93],
.pv-chat__more:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }
.pv-chat__quickbtn.is-mine[b-vikmukih93] { background-color: color-mix(in srgb, var(--accent) 30%, transparent); }

.pv-chat__more[b-vikmukih93] {
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

/* Compose-box picker toggle, sized to the send button beside it. */
.pv-chat__emoji[b-vikmukih93] {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-muted);
    cursor: pointer;
}

.pv-chat__emoji:hover[b-vikmukih93],
.pv-chat__emoji.is-on[b-vikmukih93] { color: var(--fg-primary); background-image: var(--pv-lift); }
.pv-chat__emoji:focus-visible[b-vikmukih93] { outline: none; box-shadow: var(--ring-focus); }

/* Both float ABOVE the compose row (its padding box is the anchor) — the panel is docked to the bottom of the
   window, so there is nowhere below to put them. */
.pv-chat__pop--compose[b-vikmukih93],
.pv-chat__ac[b-vikmukih93] {
    position: absolute;
    left: var(--space-3);
    right: var(--space-3);
    bottom: calc(100% - var(--space-2));
    z-index: 2;
    box-shadow: var(--shadow-lg);
}

.pv-chat__ac[b-vikmukih93] {
    display: flex;
    flex-direction: column;
    padding: 3px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-raised);
}

.pv-chat__acrow[b-vikmukih93] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    padding: 3px 5px;
    border: 0;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--fg-secondary);
    font-size: var(--text-xs);
    text-align: left;
    cursor: pointer;
}

.pv-chat__acrow:hover[b-vikmukih93] { background-image: var(--pv-lift); }

/* The keyboard selection, which ArrowUp/Down moves — the same tint as an own-message so "highlighted" reads
   the same everywhere in the panel. */
.pv-chat__acrow.is-sel[b-vikmukih93] {
    background-color: color-mix(in srgb, var(--accent) 30%, transparent);
    color: var(--fg-primary);
}

.pv-chat__acemoji[b-vikmukih93] { font-size: 15px; line-height: 1; }

.pv-chat__acname[b-vikmukih93] {
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
/* /Pages/Import.razor.rz.scp.css */
/* Import / upload flow. Built on the design tokens (ds-*.css). Borders-not-boxes, light chrome,
   dark previews only. Scoped to Import.razor. */

/* ----------------------------------------------------------------- SHELL */
.import[b-wsc2zdadnw] { position: fixed; inset: 0; display: flex; flex-direction: column; min-height: 0; background: var(--bg-app); z-index: 50; }
.import__top[b-wsc2zdadnw] {
  height: var(--toolbar-height); flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5);
  padding: 0 var(--space-6); border-bottom: 1px solid var(--border-default); background: var(--bg-surface);
}
.import__back[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height); color: var(--fg-secondary); font-size: var(--text-base); text-decoration: none; padding: 0 var(--space-4) 0 var(--space-3); border-radius: var(--radius-sm); cursor: pointer; border: none; background: none; }
.import__back:hover[b-wsc2zdadnw] { background: var(--bg-hover); color: var(--fg-primary); }
.import__divider[b-wsc2zdadnw] { width: 1px; height: 20px; background: var(--border-default); }
.import__title[b-wsc2zdadnw] { font-weight: var(--weight-semibold); font-size: var(--text-base); white-space: nowrap; }
.import__source[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; flex: 0 1 auto; }
.import__spacer[b-wsc2zdadnw] { flex: 1 1 auto; }

.import__body[b-wsc2zdadnw] { flex: 1 1 auto; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.import__inner[b-wsc2zdadnw] { max-width: 1080px; margin: 0 auto; padding: var(--space-8) var(--space-8) var(--space-12); }

/* shared progress bar */
.progress[b-wsc2zdadnw] { width: 100%; height: 6px; background: var(--bg-active); border-radius: var(--radius-full); overflow: hidden; }
.progress__fill[b-wsc2zdadnw] { height: 100%; background: var(--accent); border-radius: var(--radius-full); transition: width var(--duration-base) var(--ease-standard); }
/* Indeterminate: a fixed-width fill sweeps across when there's no Done/Total (the build/save phase). */
.progress--indeterminate .progress__fill[b-wsc2zdadnw] { width: 40%; animation: progress-indet-b-wsc2zdadnw 1.1s ease-in-out infinite; }
@keyframes progress-indet-b-wsc2zdadnw { 0% { transform: translateX(-100%); } 100% { transform: translateX(250%); } }
.imp-spinner[b-wsc2zdadnw] { width: 36px; height: 36px; border: 2.5px solid var(--bg-active); border-top-color: var(--accent); border-radius: 50%; animation: imp-spin-b-wsc2zdadnw 0.8s linear infinite; }
@keyframes imp-spin-b-wsc2zdadnw { to { transform: rotate(360deg); } }

/* ----------------------------------------------------------------- START / DROPZONE */
/* Intro, then the drop zone (or the reading card that replaces it), then the formats as reference
   text. The formats are deliberately unboxed: boxed rows read as more drop targets. */
.imp-start[b-wsc2zdadnw] {
  max-width: 720px; margin: 0 auto; padding: var(--space-12) var(--space-8);
  display: flex; flex-direction: column; gap: var(--space-9);
}
.imp-intro[b-wsc2zdadnw] { display: flex; flex-direction: column; align-items: center; gap: var(--space-5); text-align: center; }
.imp-intro__tile[b-wsc2zdadnw] {
  width: 64px; height: 64px; border-radius: var(--radius-xl); display: grid; place-items: center;
  background: var(--gradient-violet-wash); border: 1px solid var(--border-subtle); box-shadow: var(--shadow-xs); color: var(--accent);
}
.imp-intro__title[b-wsc2zdadnw] {
  margin: 0; font-size: var(--text-display); line-height: var(--lh-display); font-weight: var(--weight-semibold);
  letter-spacing: var(--tracking-tight); color: var(--fg-primary);
}
.imp-intro__sub[b-wsc2zdadnw] { margin: 0; max-width: 480px; font-size: var(--text-h3); line-height: 1.6; color: var(--fg-secondary); text-wrap: pretty; }

.bigdrop[b-wsc2zdadnw] {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-6);
  padding: var(--space-11) var(--space-8); cursor: pointer;
  background: var(--bg-surface); border: 1.5px dashed var(--border-strong); border-radius: var(--radius-lg);
  transition: var(--transition-colors);
}
.bigdrop:hover[b-wsc2zdadnw], .bigdrop.is-drag[b-wsc2zdadnw] { border-color: var(--accent); background: var(--accent-subtle); }
.bigdrop__icon[b-wsc2zdadnw] {
  width: 56px; height: 56px; border-radius: var(--radius-full); display: grid; place-items: center;
  background: var(--bg-surface); border: 1px solid var(--border-default); box-shadow: var(--shadow-sm); color: var(--accent);
}
.bigdrop__text[b-wsc2zdadnw] { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); text-align: center; }
.bigdrop__title[b-wsc2zdadnw] { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.bigdrop__hint[b-wsc2zdadnw] { font-size: var(--text-base); color: var(--fg-muted); }
.bigdrop__acts[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-5); }
.imp-btn[b-wsc2zdadnw] {
  height: 36px; padding: 0 var(--space-6); border: 1px solid var(--border-default); border-radius: var(--radius-sm);
  background: var(--bg-surface); color: var(--fg-primary); font: inherit; font-size: var(--text-base); font-weight: var(--weight-medium);
  cursor: pointer; transition: var(--transition-colors);
}
.imp-btn:hover[b-wsc2zdadnw] { border-color: var(--border-strong); background: var(--bg-hover); }
.imp-btn--primary[b-wsc2zdadnw] { padding: 0 var(--space-7); border-color: transparent; background: var(--accent); color: var(--fg-on-accent); box-shadow: var(--shadow-xs); }
.imp-btn--primary:hover[b-wsc2zdadnw] { border-color: transparent; background: var(--accent-hover); }
.imp-btn--primary:active[b-wsc2zdadnw] { background: var(--accent-active); }
.imp-btn:focus-visible[b-wsc2zdadnw] { outline: none; box-shadow: var(--ring-focus); }

.imp-start__error[b-wsc2zdadnw] {
  margin: 0; padding: var(--space-5) var(--space-6); border-radius: var(--radius-md);
  background: var(--danger-bg); color: var(--danger-fg); font-size: var(--text-sm);
}

.imp-reading[b-wsc2zdadnw] {
  display: flex; flex-direction: column; gap: var(--space-6); padding: var(--space-10) var(--space-9);
  background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--shadow-sm);
}
.imp-reading__row[b-wsc2zdadnw] { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-6); }
.imp-reading__title[b-wsc2zdadnw] { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.imp-reading__count[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); font-variant-numeric: tabular-nums; white-space: nowrap; }

.imp-formats[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: var(--space-5); padding-top: var(--space-8); border-top: 1px solid var(--border-subtle); }
.imp-formats__title[b-wsc2zdadnw] {
  margin: 0; font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps);
  text-transform: uppercase; color: var(--fg-muted);
}
.imp-formats__list[b-wsc2zdadnw] {
  display: grid; grid-template-columns: 72px minmax(0, 1fr); column-gap: var(--space-6); row-gap: var(--space-4);
  margin: 0; font-size: var(--text-sm); line-height: 1.55;
}
.imp-formats__list dt[b-wsc2zdadnw] { font-weight: var(--weight-semibold); color: var(--fg-primary); }
.imp-formats__list dd[b-wsc2zdadnw] { margin: 0; color: var(--fg-secondary); text-wrap: pretty; }
.imp-formats__list code[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: inherit; color: inherit; background: none; padding: 0; }
@keyframes impRise-b-wsc2zdadnw { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .imp-parse[b-wsc2zdadnw] { animation: none; }
}

/* ----------------------------------------------------------------- PARSING */
.imp-parse[b-wsc2zdadnw] { max-width: 560px; min-height: 100%; margin: 0 auto; padding: var(--space-10) var(--space-6); display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; animation: impRise-b-wsc2zdadnw 480ms cubic-bezier(.16,1,.3,1) both; }
.imp-parse__title[b-wsc2zdadnw] { font-size: var(--text-h3); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-tight); margin: var(--space-6) 0 var(--space-2); }
.imp-parse__sub[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-muted); margin-bottom: var(--space-6); }
.imp-parse .progress[b-wsc2zdadnw] { width: 100%; }
.imp-parse__found[b-wsc2zdadnw] { width: 100%; display: flex; flex-direction: column; gap: var(--space-3); }
.found-row[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--space-5); border: 1px solid var(--border-subtle); border-radius: var(--radius-sm); background: var(--bg-surface); font-size: var(--text-sm); text-align: left; animation: foundIn-b-wsc2zdadnw 560ms cubic-bezier(.16,1,.3,1) both; will-change: transform, opacity; }
.found-row__name[b-wsc2zdadnw] { font-weight: var(--weight-medium); }
.found-row__meta[b-wsc2zdadnw] { margin-left: auto; font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); }
@keyframes foundIn-b-wsc2zdadnw { from { opacity: 0; transform: translateY(12px) scale(.99); } to { opacity: 1; transform: none; } }

/* ----------------------------------------------------------------- OVERVIEW HEADER */
.ov-head[b-wsc2zdadnw] { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin-top: var(--space-4); }
.ov-title[b-wsc2zdadnw] { font-size: var(--text-h1); font-weight: var(--weight-semibold); }
.ov-sub[b-wsc2zdadnw] { color: var(--fg-muted); font-size: var(--text-base); margin-top: var(--space-3); }
/* The case details as a card of rows — label and a plain explanation on the left, the control on the
   right. Side by side in one bar they squeezed "Liver & HPB" one word per line, and three bare
   uppercase labels told a first-time user nothing. */
.ov-bar[b-wsc2zdadnw] { display: flex; flex-direction: column; margin: 0 0 var(--space-10); padding: 0 var(--space-8); background: var(--bg-surface); border: 1px solid var(--border-subtle); border-radius: var(--radius-lg); box-shadow: var(--shadow-xs); }
/* Numbered section heads: the page is two steps — case details, then the series — and reads as such. */
.ov-section[b-wsc2zdadnw] { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-6); margin: var(--space-9) 0 var(--space-5); }
.ov-section__title[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.ov-section__num[b-wsc2zdadnw] { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: var(--radius-full); background: var(--accent); color: var(--fg-on-accent, #fff); font-size: var(--text-xs); font-weight: var(--weight-semibold); }
.ov-section__sub[b-wsc2zdadnw] { margin-top: var(--space-2); padding-left: calc(22px + var(--space-3)); font-size: var(--text-sm); color: var(--fg-muted); }
.ov-section__sub b[b-wsc2zdadnw], .ov-sub b[b-wsc2zdadnw] { color: var(--fg-primary); font-weight: var(--weight-medium); }
.casefield[b-wsc2zdadnw] { display: grid; grid-template-columns: minmax(200px, 320px) 1fr; align-items: center; gap: var(--space-8); padding: var(--space-7) 0; }
.casefield + .casefield[b-wsc2zdadnw] { border-top: 1px solid var(--border-subtle); }
.casefield__text[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: var(--space-2); }
.casefield__label[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.casefield__help[b-wsc2zdadnw] { font-size: var(--text-xs); line-height: 1.5; color: var(--fg-muted); }
.casefield__ctl[b-wsc2zdadnw] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3) var(--space-4); min-width: 0; }
.casefield__input[b-wsc2zdadnw] { height: 36px; padding: 0 var(--space-5); border: 1px solid var(--border-default); border-radius: var(--radius-md); font-size: var(--text-sm); background: var(--bg-surface); color: var(--fg-primary); width: 100%; max-width: 420px; min-width: 0; }
.casefield__input:focus[b-wsc2zdadnw] { outline: none; border-color: var(--accent); box-shadow: var(--ring-focus); }
/* The protocol select sizes to its options — a department name is a couple of words, and a full-width
   select would read as another free-text field. */
.casefield select.casefield__input[b-wsc2zdadnw] { width: auto; min-width: 200px; }
.casefield__static[b-wsc2zdadnw] { font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-primary); white-space: nowrap; }
.casefield__note[b-wsc2zdadnw] { padding: 2px var(--space-4); border-radius: var(--radius-full); background: var(--bg-sunken); font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; }
.casefield__note:empty[b-wsc2zdadnw] { display: none; }

/* A generated subject code is short and tabular, not a sentence — it does not take the case name's width. */
.casefield__input--code[b-wsc2zdadnw] { min-width: 0; width: 152px; font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.subjwarn[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--warning-fg); white-space: nowrap; cursor: help; }

/* segmented control (list / gallery) */
.segmented[b-wsc2zdadnw] { display: inline-flex; padding: var(--space-1); background: var(--bg-sunken); border: 1px solid var(--border-default); border-radius: var(--radius-sm); gap: 2px; }
.segmented__btn[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); height: 24px; padding: 0 var(--space-4); border: none; background: none; border-radius: var(--radius-xs); font-size: var(--text-xs); font-weight: var(--weight-medium); color: var(--fg-muted); cursor: pointer; transition: var(--transition-colors); }
.segmented__btn:hover[b-wsc2zdadnw] { color: var(--fg-primary); }
.segmented__btn.is-active[b-wsc2zdadnw] { background: var(--bg-surface); color: var(--fg-primary); box-shadow: var(--shadow-xs); }

/* study grouping */
.study-group[b-wsc2zdadnw] { margin-bottom: var(--space-9); }
.study-head[b-wsc2zdadnw] { position: sticky; top: 0; z-index: var(--z-sticky); display: flex; align-items: center; gap: var(--space-4); padding: var(--space-5) var(--space-2) var(--space-4); margin-bottom: var(--space-5); background: var(--bg-app); border-bottom: 1px solid var(--border-default); }
.study-head .overline[b-wsc2zdadnw] { flex: 0 0 auto; }
.study-head__title[b-wsc2zdadnw] { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--fg-primary); white-space: nowrap; }
.study-head__meta[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.study-head__spacer[b-wsc2zdadnw] { flex: 1 1 auto; }
.study-head__count[b-wsc2zdadnw] { font-size: var(--text-xs); color: var(--fg-muted); white-space: nowrap; flex: 0 0 auto; }

/* ----------------------------------------------------------------- STACK PREVIEW */
.preview[b-wsc2zdadnw] { position: relative; background: #06070a; border-radius: var(--radius-sm); overflow: hidden; }
.preview__canvas[b-wsc2zdadnw] { width: 100%; height: 100%; object-fit: contain; display: block; image-rendering: auto; }
.preview__empty[b-wsc2zdadnw] { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: #3a3f4d; }
.preview__top[b-wsc2zdadnw] { position: absolute; top: var(--space-3); left: var(--space-3); right: var(--space-3); display: flex; align-items: flex-start; justify-content: space-between; pointer-events: none; }
.preview__idx[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-3xs); color: rgba(230,232,239,.82); background: rgba(6,7,10,.5); padding: 1px 5px; border-radius: var(--radius-xs); }

/* Slice scrubber — fades in on hover; wheel / middle-drag work anywhere over the preview. */
.preview__slider[b-wsc2zdadnw] { position: absolute; left: var(--space-3); right: var(--space-3); bottom: var(--space-3); width: auto; height: 3px; margin: 0; padding: 0; appearance: none; -webkit-appearance: none; background: rgba(230,232,239,.22); border-radius: 2px; outline: none; opacity: 0; transition: opacity .12s ease; cursor: pointer; }
.preview:hover .preview__slider[b-wsc2zdadnw] { opacity: 1; }
.preview__slider[b-wsc2zdadnw]::-webkit-slider-thumb { -webkit-appearance: none; width: 11px; height: 11px; border-radius: 50%; background: #e6e8ef; border: 0; box-shadow: 0 0 0 1px rgba(6,7,10,.6); cursor: pointer; }
.preview__slider[b-wsc2zdadnw]::-moz-range-thumb { width: 11px; height: 11px; border-radius: 50%; background: #e6e8ef; border: 0; box-shadow: 0 0 0 1px rgba(6,7,10,.6); cursor: pointer; }

/* modality chip — high-contrast, monochrome */
.modality[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); height: 20px; padding: 0 var(--space-3); border-radius: var(--radius-xs); background: var(--slate-900); color: #fff; font-size: var(--text-2xs); font-weight: var(--weight-bold); letter-spacing: var(--tracking-wide); }
.modality svg[b-wsc2zdadnw] { width: 12px; height: 12px; }
.modality--mr[b-wsc2zdadnw] { background: var(--slate-700); }

/* phase label with guessed hint */
.phase[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-primary); white-space: nowrap; }
.phase__guess[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: 3px; font-size: var(--text-2xs); color: var(--accent-fg); background: var(--accent-subtle); padding: 1px var(--space-3); border-radius: var(--radius-full); font-weight: var(--weight-semibold); }

/* patient chips (sex / age from the DICOM header) — quieter than the phase pill on purpose: they
   are context for the series, not something the reviewer has to act on. */
.pchip[b-wsc2zdadnw] { display: inline-flex; align-items: center; font-size: var(--text-2xs); font-weight: var(--weight-semibold); color: var(--fg-secondary); background: var(--bg-sunken); border: 1px solid var(--border-subtle); padding: 1px var(--space-3); border-radius: var(--radius-full); white-space: nowrap; }

/* ----------------------------------------------------------------- METADATA */
.meta-grid[b-wsc2zdadnw] { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: var(--space-2) var(--space-6); }
.meta[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.meta__k[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted); }
.meta__v[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-sm); color: var(--fg-primary); font-variant-numeric: tabular-nums; }
.meta__v.is-warn[b-wsc2zdadnw] { color: var(--warning-fg); }

/* hint info icon + tooltip */
.hint[b-wsc2zdadnw] { position: relative; display: inline-flex; color: var(--fg-faint); cursor: help; }
.hint:hover[b-wsc2zdadnw] { color: var(--accent); }
.hint__pop[b-wsc2zdadnw] { position: absolute; bottom: calc(100% + 6px); left: -8px; width: 232px; padding: var(--space-4) var(--space-5); background: var(--slate-900); color: var(--slate-50); font-size: var(--text-xs); font-weight: var(--weight-regular); line-height: 1.5; letter-spacing: 0; text-transform: none; border-radius: var(--radius-sm); box-shadow: var(--shadow-md); opacity: 0; visibility: hidden; transform: translateY(3px); transition: opacity var(--duration-fast) var(--ease-standard), transform var(--duration-fast) var(--ease-standard); z-index: var(--z-tooltip); pointer-events: none; }
.hint:hover .hint__pop[b-wsc2zdadnw] { opacity: 1; visibility: visible; transform: none; }

/* warnings */
.warn[b-wsc2zdadnw] { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-3) var(--space-4); border-radius: var(--radius-sm); font-size: var(--text-xs); line-height: 1.45; }
.warn--warning[b-wsc2zdadnw] { background: var(--warning-bg); color: var(--warning-fg); }
.warn--danger[b-wsc2zdadnw] { background: var(--danger-bg); color: var(--danger-fg); }
.warn--info[b-wsc2zdadnw] { background: var(--bg-sunken); color: var(--fg-secondary); }
.warn svg[b-wsc2zdadnw] { flex: 0 0 auto; margin-top: 1px; }
.warn__label[b-wsc2zdadnw] { font-weight: var(--weight-semibold); }

/* ----------------------------------------------------------------- LIST VARIANT */
.stack-list[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: var(--space-4); }
.stack-row[b-wsc2zdadnw] {
  display: grid; grid-template-columns: 168px 1fr auto; gap: var(--space-6); align-items: stretch;
  padding: var(--space-5); background: var(--bg-surface); border: 1px solid var(--border-default);
  border-radius: var(--radius-md); box-shadow: var(--elevation-card); transition: var(--transition-colors);
}
.stack-row.is-selected[b-wsc2zdadnw] { border-color: var(--border-accent); box-shadow: var(--ring-selected), var(--elevation-card); background: var(--bg-selected); }
.stack-row.is-disabled[b-wsc2zdadnw] { opacity: .72; }
.stack-row__pv[b-wsc2zdadnw] { width: 168px; }
.stack-row .preview[b-wsc2zdadnw] { height: 116px; }
.stack-row__info[b-wsc2zdadnw] { min-width: 0; display: flex; flex-direction: column; gap: var(--space-4); }
.stack-row__head[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; }
.stack-row__name[b-wsc2zdadnw] { font-size: var(--text-base); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.stack-row__series[b-wsc2zdadnw] { font-family: var(--font-mono); font-size: var(--text-xs); color: var(--fg-faint); white-space: nowrap; }
.stack-row__aside[b-wsc2zdadnw] { display: flex; flex-direction: column; align-items: flex-end; justify-content: space-between; gap: var(--space-4); flex: 0 0 auto; }

/* recommended ribbon */
.rec[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-2xs); font-weight: var(--weight-semibold); letter-spacing: var(--tracking-wide); text-transform: uppercase; color: var(--success-fg); }
.rec svg[b-wsc2zdadnw] { width: 12px; height: 12px; }

/* big select control */
.selbox[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-3); height: 32px; padding: 0 var(--space-5) 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-full); background: var(--bg-surface); font-size: var(--text-sm); font-weight: var(--weight-medium); color: var(--fg-secondary); cursor: pointer; transition: var(--transition-colors); white-space: nowrap; }
.selbox:hover[b-wsc2zdadnw] { border-color: var(--border-strong); color: var(--fg-primary); }
.selbox.is-on[b-wsc2zdadnw] { background: var(--accent); border-color: var(--accent); color: #fff; }
.selbox.is-on:hover[b-wsc2zdadnw] { background: var(--accent-hover); border-color: var(--accent-hover); }
.selbox__tick[b-wsc2zdadnw] { width: 18px; height: 18px; border-radius: 50%; border: 1.5px solid var(--border-strong); display: flex; align-items: center; justify-content: center; color: transparent; flex: 0 0 auto; }
.selbox.is-on .selbox__tick[b-wsc2zdadnw] { border-color: #fff; color: var(--accent); background: #fff; }

/* reference toggle */
.refbtn[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); font-size: var(--text-xs); color: var(--fg-muted); background: none; border: none; cursor: pointer; padding: var(--space-2) 0; }
.refbtn:hover[b-wsc2zdadnw] { color: var(--accent-fg); }
.refbtn.is-ref[b-wsc2zdadnw] { color: var(--accent-fg); font-weight: var(--weight-medium); }

/* ----------------------------------------------------------------- GALLERY VARIANT */
.stack-grid[b-wsc2zdadnw] { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: var(--space-5); }
.stack-card[b-wsc2zdadnw] { display: flex; flex-direction: column; background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-md); box-shadow: var(--elevation-card); overflow: hidden; transition: var(--transition-colors); }
.stack-card.is-selected[b-wsc2zdadnw] { border-color: var(--border-accent); box-shadow: var(--ring-selected), var(--elevation-card); }
.stack-card.is-disabled[b-wsc2zdadnw] { opacity: .72; }
.stack-card .preview[b-wsc2zdadnw] { height: 184px; border-radius: 0; }
.stack-card__body[b-wsc2zdadnw] { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-4); flex: 1 1 auto; }
.stack-card__head[b-wsc2zdadnw] { display: flex; align-items: flex-start; gap: var(--space-3); }
.stack-card__title[b-wsc2zdadnw] { min-width: 0; flex: 1 1 auto; }
.stack-card__foot[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border-subtle); background: var(--bg-sunken); }

/* ----------------------------------------------------------------- SINGLE-STACK VALIDATE */
.validate[b-wsc2zdadnw] { max-width: 760px; margin: 0 auto; }
.validate__card[b-wsc2zdadnw] { display: grid; grid-template-columns: 280px 1fr; gap: var(--space-7); padding: var(--space-7); background: var(--bg-surface); border: 1px solid var(--border-default); border-radius: var(--radius-lg); box-shadow: var(--elevation-card); }
.validate__pv .preview[b-wsc2zdadnw] { height: 280px; }
.validate__body[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: var(--space-5); min-width: 0; }
.checklist[b-wsc2zdadnw] { display: flex; flex-direction: column; gap: var(--space-3); }
.checkitem[b-wsc2zdadnw] { display: flex; align-items: flex-start; gap: var(--space-3); font-size: var(--text-sm); line-height: 1.45; color: var(--fg-secondary); }
.checkitem > span:last-child[b-wsc2zdadnw] { flex: 1 1 auto; min-width: 0; }
.checkitem__ic[b-wsc2zdadnw] { width: 18px; height: 18px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.checkitem__ic--ok[b-wsc2zdadnw] { background: var(--success-bg); color: var(--success-fg); }
.checkitem__ic--warn[b-wsc2zdadnw] { background: var(--warning-bg); color: var(--warning-fg); }
.checkitem strong[b-wsc2zdadnw] { color: var(--fg-primary); font-weight: var(--weight-medium); }

/* ----------------------------------------------------------------- FOOTER CREATE BAR */
.imp-foot[b-wsc2zdadnw] { position: sticky; bottom: 0; flex: 0 0 auto; display: flex; align-items: center; gap: var(--space-5); padding: var(--space-5) var(--space-8); border-top: 1px solid var(--border-default); background: color-mix(in srgb, var(--bg-surface) 92%, transparent); backdrop-filter: blur(8px); }
.imp-foot__summary[b-wsc2zdadnw] { font-size: var(--text-sm); color: var(--fg-secondary); white-space: nowrap; }
.imp-foot__summary strong[b-wsc2zdadnw] { color: var(--fg-primary); font-weight: var(--weight-semibold); }
.imp-foot__spacer[b-wsc2zdadnw] { flex: 1 1 auto; }

/* ------------------------------------------------ INCOMPLETE DECODE (the gate before a case exists) */
.imp-incomplete[b-wsc2zdadnw] { max-width: 640px; margin: var(--space-8) auto; display: flex; flex-direction: column; gap: var(--space-4); }
.imp-incomplete__title[b-wsc2zdadnw] { font-size: var(--text-h3); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.imp-incomplete__sub[b-wsc2zdadnw] { font-size: var(--text-sm); line-height: 1.5; color: var(--fg-secondary); }
.imp-incomplete__acts[b-wsc2zdadnw] { display: flex; justify-content: flex-end; gap: var(--space-3); margin-top: var(--space-3); }

@media (prefers-reduced-motion: reduce) {
  .found-row[b-wsc2zdadnw], .progress__fill[b-wsc2zdadnw], .hint__pop[b-wsc2zdadnw] { animation: none; transition: none; }
}

/* The subject this import was launched from — fixed, not a suggestion, so it reads as a stated fact
   rather than a prefilled box somebody forgot to change. */
.subjlock[b-wsc2zdadnw] { display: inline-flex; align-items: center; gap: var(--space-2); height: 32px; padding: 0 var(--space-4); border: 1px solid var(--border-default); border-radius: var(--radius-sm); background: var(--bg-sunken); color: var(--fg-primary); font-size: var(--text-sm); font-weight: var(--weight-semibold); white-space: nowrap; }
.subjlock svg[b-wsc2zdadnw] { color: var(--fg-muted); flex: 0 0 auto; }

/* The patient-ID mismatch. Sits directly above the action bar and takes the Create button out of
   play: this is a decision, and an import that could still be fired past it is not a decision. */
.clash[b-wsc2zdadnw] { flex: 0 0 auto; margin: 0 var(--space-8) var(--space-4); padding: var(--space-5) var(--space-6); border: 1px solid var(--danger-fg); border-left-width: 3px; border-radius: var(--radius-md); background: color-mix(in srgb, var(--danger-fg) 7%, var(--bg-surface)); }
.clash--warn[b-wsc2zdadnw] { border-color: var(--warning-fg); background: color-mix(in srgb, var(--warning-fg) 7%, var(--bg-surface)); }
.clash__head[b-wsc2zdadnw] { font-size: var(--text-sm); font-weight: var(--weight-semibold); color: var(--fg-primary); }
.clash__body[b-wsc2zdadnw] { margin: var(--space-2) 0 var(--space-4); font-size: var(--text-sm); line-height: 1.5; color: var(--fg-secondary); max-width: 68ch; }
.clash__acts[b-wsc2zdadnw] { display: flex; align-items: center; gap: var(--space-3); }
.clash__cancel[b-wsc2zdadnw] { background: none; border: 0; padding: 0; font-size: var(--text-sm); cursor: pointer; }
.clash__cancel:disabled[b-wsc2zdadnw] { opacity: 0.5; cursor: default; }
/* /Pages/Labeling/AiModels.razor.rz.scp.css */
/* Auto-fit rather than a fixed column count: the live tile is last, and on a narrow window it must
   wrap under the counts instead of squeezing the VRAM figure onto two lines. */
.aim__tiles[b-2xs19tjlk5] {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(10rem, 1fr));
    gap: var(--space-3);
    margin-bottom: var(--space-5);
}

.aim__tile[b-2xs19tjlk5] {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--space-4);
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
}

.aim__tile--good[b-2xs19tjlk5] { border-left: 3px solid var(--success); }

.aim__tile--busy[b-2xs19tjlk5] { border-left: 3px solid var(--warning); }

/* The live tile is the only one reading another machine, so it is visibly a different KIND of
   number from the four counts beside it. */
.aim__tile--live[b-2xs19tjlk5] {
    background: var(--bg-raised);
    border-style: dashed;
}

.aim__tile-val[b-2xs19tjlk5] {
    font-size: var(--text-h2);
    font-weight: var(--weight-semibold);
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    line-height: 1.1;
}

.aim__tile-val--dim[b-2xs19tjlk5] {
    color: var(--fg-muted);
    font-weight: var(--weight-regular);
}

.aim__tile-lbl[b-2xs19tjlk5] {
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary);
}

.aim__tile-sub[b-2xs19tjlk5] {
    display: flex;
    align-items: center;
    gap: var(--space-2);
    font-size: var(--text-3xs);
    color: var(--fg-muted);
}

.aim__dot[b-2xs19tjlk5] {
    width: 7px;
    height: 7px;
    border-radius: var(--radius-full);
    flex: 0 0 auto;
}

.aim__dot.is-busy[b-2xs19tjlk5] { background: var(--warning); }

.aim__dot.is-idle[b-2xs19tjlk5] { background: var(--success); }

.aim__tabs[b-2xs19tjlk5] {
    display: flex;
    gap: var(--space-2);
    border-bottom: 1px solid var(--border-default);
    margin-bottom: var(--space-5);
}

.aim__tab[b-2xs19tjlk5] {
    display: inline-flex;
    align-items: center;
    gap: var(--space-3);
    background: none;
    border: 0;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    padding: var(--space-3) var(--space-5);
    font-size: var(--text-sm);
    font-weight: var(--weight-semibold);
    color: var(--fg-secondary);
    cursor: pointer;
}

.aim__tab:hover[b-2xs19tjlk5] { color: var(--fg-primary); }
.aim__tab.is-on[b-2xs19tjlk5] { color: var(--accent-fg); border-bottom-color: var(--accent); }
.aim__tab:focus-visible[b-2xs19tjlk5] { outline: none; box-shadow: var(--ring-focus); }

.aim__tab-badge[b-2xs19tjlk5] {
    font-size: var(--text-3xs);
    font-weight: var(--weight-medium, 500);
    padding: 1px 6px;
    border-radius: var(--radius-full);
    background: var(--warning-bg);
    color: var(--warning-fg);
}
/* /Pages/Labeling/Import.razor.rz.scp.css */
.lbl-import__schema[b-2iivsh5fun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.4rem;
    margin: 0.25rem 0 1rem;
}

.lbl-import__schema-label[b-2iivsh5fun] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    margin-right: 0.25rem;
}

.lbl-chip[b-2iivsh5fun] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.15rem 0.5rem;
    border-radius: 999px;
    background: var(--bg-subtle, #f1f3f5);
    font-size: var(--text-xs);
    white-space: nowrap;
}

.lbl-chip__dot[b-2iivsh5fun] {
    width: 0.7rem;
    height: 0.7rem;
    border-radius: 50%;
    display: inline-block;
}

.lbl-import__affix[b-2iivsh5fun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.6rem;
}
.lbl-import__affix .field--sm[b-2iivsh5fun] { width: 10rem; }

.lbl-import__pickers[b-2iivsh5fun] {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.75rem;
}

.lbl-import__ignored[b-2iivsh5fun] {
    margin: 0.25rem 0 0.75rem;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.lbl-import__ignored ul[b-2iivsh5fun] {
    margin: 0.25rem 0 0 1.25rem;
    max-height: 8rem;
    overflow: auto;
}

.lbl-import__table[b-2iivsh5fun] {
    width: 100%;
    border-collapse: collapse;
    margin-top: 0.5rem;
    font-size: var(--text-sm);
}

.lbl-import__table th[b-2iivsh5fun],
.lbl-import__table td[b-2iivsh5fun] {
    text-align: left;
    padding: 0.4rem 0.5rem;
    border-bottom: 1px solid var(--border, #e9ecef);
    vertical-align: top;
}

.lbl-import__table thead th[b-2iivsh5fun] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    font-weight: 600;
}

.lbl-import__col-inc[b-2iivsh5fun] {
    width: 1.5rem;
}

.lbl-import__table tr.is-excluded[b-2iivsh5fun] {
    opacity: 0.45;
}

.lbl-import__file[b-2iivsh5fun] {
    font-family: var(--font-mono, monospace);
    font-size: var(--text-xs);
    word-break: break-all;
    max-width: 16rem;
}

.lbl-import__remap[b-2iivsh5fun] {
    display: flex;
    flex-direction: column;
    gap: 0.25rem;
    margin-top: 0.3rem;
}

.lbl-import__remap-row[b-2iivsh5fun] {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    font-size: var(--text-xs);
}

.lbl-import__remap-row.is-unknown .lbl-import__src[b-2iivsh5fun] {
    color: var(--danger-fg, #c92a2a);
    font-weight: 700;
}

.lbl-import__src[b-2iivsh5fun] {
    display: inline-block;
    min-width: 1.25rem;
    text-align: right;
    font-family: var(--font-mono, monospace);
}

.field--sm[b-2iivsh5fun] {
    padding: 0.2rem 0.4rem;
    font-size: var(--text-xs);
    max-width: 12rem;
}

.lbl-import__result-row td[b-2iivsh5fun] {
    padding-top: 0.2rem;
    border-bottom: 1px solid var(--border, #e9ecef);
}

.lbl-import__result-row .lbl-form__hint[b-2iivsh5fun] {
    margin-left: 0.5rem;
}
/* /Pages/Labeling/ProjectModels.razor.rz.scp.css */
/* Training progress bar on the model-registry rows. Phase-coloured fill (blue = preprocessing,
   green = training) over a subtle track; theme-aware via design tokens. While the phase is active but
   nnU-Net hasn't reported a percentage yet, a travelling sliver animates so the row doesn't look stuck. */

.train-bar[b-nvd3ku0jga] {
    position: relative;
    height: 6px;
    margin-top: 0.55rem;
    max-width: 26rem;
    border-radius: 999px;
    background: var(--bg-active);
    overflow: hidden;
}

.train-bar__fill[b-nvd3ku0jga] {
    height: 100%;
    border-radius: inherit;
    background: var(--fg-secondary);          /* queued / neutral default */
    transition: width 0.5s ease;
}

.train-bar--prep  .train-bar__fill[b-nvd3ku0jga] { background: var(--info); }     /* blue  — preprocessing */
.train-bar--train .train-bar__fill[b-nvd3ku0jga] { background: var(--success); } /* green — training / evaluating */

/* No reported percentage yet: a sliver of the phase colour slides across the track. */
.train-bar--indeterminate .train-bar__fill[b-nvd3ku0jga] {
    width: 32%;
    transition: none;
    animation: train-bar-slide-b-nvd3ku0jga 1.15s ease-in-out infinite;
}

@keyframes train-bar-slide-b-nvd3ku0jga {
    0%   { transform: translateX(-120%); }
    100% { transform: translateX(360%); }
}

@media (prefers-reduced-motion: reduce) {
    .train-bar--indeterminate .train-bar__fill[b-nvd3ku0jga] { animation-duration: 2.4s; }
}

/* Per-epoch loss sparkline (the <Spark> child owns its own line styling; this just sizes the slot). */
.model-spark[b-nvd3ku0jga] {
    margin-top: 6px;
    max-width: 260px;
}

/* MLflow run link — first outbound link in the app; render it as a subtle chip-link in the controls. */
.model-mlflow-link[b-nvd3ku0jga] {
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
}
.model-mlflow-link:hover[b-nvd3ku0jga] { text-decoration: underline; }
/* /Pages/Settings.razor.rz.scp.css */
.settings[b-q4ui231tg6] {
    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: 48px 20px;
    background: var(--bg-app);
}

.settings__panel[b-q4ui231tg6] {
    width: 100%;
    max-width: 36rem;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

.settings__head[b-q4ui231tg6] {
    display: flex;
    align-items: center;
    gap: 10px;
}

.settings__back[b-q4ui231tg6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.settings__back:hover[b-q4ui231tg6] {
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.settings__title[b-q4ui231tg6] {
    margin: 0;
    font-size: 1.25rem;
    font-weight: 700;
    color: var(--fg-primary);
}

.settings__section[b-q4ui231tg6] {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 16px;
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
}

.settings__h2[b-q4ui231tg6] {
    margin: 0;
    font-size: var(--text-2xs);
    text-transform: uppercase;
    letter-spacing: var(--tracking-caps);
    color: var(--fg-muted);
    font-weight: var(--weight-semibold);
}

.settings__hint[b-q4ui231tg6] {
    margin: 0;
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

/* Change-password form. */
.settings__form[b-q4ui231tg6] {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.settings__label[b-q4ui231tg6] {
    margin-top: 8px;
    font-size: var(--text-xs);
    color: var(--fg-secondary);
}

.settings__input[b-q4ui231tg6] {
    padding: 0.5rem 0.75rem;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-app);
    color: var(--fg-primary);
    font: inherit;
    font-size: var(--text-sm);
}

.settings__input:focus-visible[b-q4ui231tg6] {
    outline: none;
    border-color: var(--border-accent);
    box-shadow: var(--ring-focus);
}

.settings__submit[b-q4ui231tg6] {
    align-self: flex-start;
    margin-top: 14px;
}

.settings__msg[b-q4ui231tg6] {
    margin: 0;
    font-size: var(--text-xs);
}

.settings__msg--error[b-q4ui231tg6] { color: var(--danger); }
.settings__msg--ok[b-q4ui231tg6] { color: var(--fg-secondary); }

/* Theme picker — three equal-width segmented cards (Light / Dark / System). */
.themepick[b-q4ui231tg6] {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.themepick__opt[b-q4ui231tg6] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 8px;
    padding: 14px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: var(--text-sm);
    font-weight: var(--weight-medium);
    cursor: pointer;
    transition: var(--transition-colors);
}

.themepick__opt:hover[b-q4ui231tg6] {
    border-color: var(--border-strong);
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.themepick__opt.is-active[b-q4ui231tg6] {
    border-color: var(--border-accent);
    background: var(--bg-selected);
    color: var(--accent-fg);
    box-shadow: var(--ring-selected);
}

.themepick__opt:focus-visible[b-q4ui231tg6] {
    outline: none;
    box-shadow: var(--ring-focus);
}

.themepick__icon[b-q4ui231tg6] {
    display: inline-flex;
    color: var(--fg-muted);
}

.themepick__opt.is-active .themepick__icon[b-q4ui231tg6] {
    color: var(--accent);
}

.settings__row[b-q4ui231tg6] {
    display: flex;
    align-items: center;
    gap: 12px;
}

.settings__avatar[b-q4ui231tg6] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    border-radius: var(--radius-full);
    background: var(--gradient-brand);
    color: #fff;
    font-size: 14px;
    font-weight: 700;
}

.settings__id[b-q4ui231tg6] {
    display: flex;
    flex-direction: column;
    min-width: 0;
    flex: 1 1 auto;
}

.settings__name[b-q4ui231tg6] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-primary);
}

.settings__email[b-q4ui231tg6] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.settings__role[b-q4ui231tg6] {
    flex-shrink: 0;
    font-size: var(--text-2xs);
    font-weight: var(--weight-bold);
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    color: var(--accent-fg);
    background: var(--accent-subtle);
    border-radius: var(--radius-full);
    padding: 2px 9px;
}

.settings__action[b-q4ui231tg6] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-app);
    color: inherit;
    text-decoration: none;
}

button.settings__action[b-q4ui231tg6] {
    width: 100%;
    font: inherit;
    text-align: left;
    cursor: pointer;
}

.settings__action:hover[b-q4ui231tg6] {
    background: var(--bg-hover);
    border-color: var(--border-strong);
}

.settings__action-text[b-q4ui231tg6] {
    display: flex;
    flex-direction: column;
    flex: 1 1 auto;
    min-width: 0;
}

.settings__action-title[b-q4ui231tg6] {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--fg-primary);
}

.settings__action-sub[b-q4ui231tg6] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.settings__chev[b-q4ui231tg6] {
    flex-shrink: 0;
    color: var(--fg-muted);
    font-size: 16px;
}
/* /Pages/Styleguide.razor.rz.scp.css */
/* Layout only. Every colour, size, radius and easing below is a token — the page must not be able
   to contradict the system it documents. */

.sg[b-l2edzv2lmd] {
    background: var(--bg-app);
    color: var(--fg-primary);
    min-height: 100vh;
    padding: var(--space-9) var(--space-9) var(--space-12);
    box-sizing: border-box;
}

.sg__head[b-l2edzv2lmd] {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--space-8);
    flex-wrap: wrap;
    padding-bottom: var(--space-8);
    border-bottom: 1px solid var(--border-default);
}

.sg__headtext[b-l2edzv2lmd] { max-width: 70ch; display: flex; flex-direction: column; gap: var(--space-4); }
.sg__lede[b-l2edzv2lmd] { color: var(--fg-secondary); }
.sg__modes[b-l2edzv2lmd] { display: flex; gap: var(--space-2); flex: 0 0 auto; }

.sg-block[b-l2edzv2lmd] { margin-top: var(--space-10); display: flex; flex-direction: column; gap: var(--space-5); }
.sg-sub[b-l2edzv2lmd] { margin-top: var(--space-6); }
.sg-rules[b-l2edzv2lmd] { margin: 0; padding-left: var(--space-7); display: flex; flex-direction: column; gap: var(--space-4); color: var(--fg-secondary); }
.sg-rules li[b-l2edzv2lmd] { line-height: var(--lh-base); }

/* ---- side by side ---- */
.sg-split[b-l2edzv2lmd] { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-6); align-items: start; }
.sg-pane[b-l2edzv2lmd] {
    background: var(--bg-surface);
    color: var(--fg-primary);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: var(--space-6);
    min-width: 0;
}
.sg-pane__tag[b-l2edzv2lmd] { margin-bottom: var(--space-4); }

.sg-probe[b-l2edzv2lmd] { position: absolute; width: 0; height: 0; overflow: hidden; visibility: hidden; pointer-events: none; }

/* ---- tables ---- */
.sg-table[b-l2edzv2lmd] { width: 100%; border-collapse: collapse; font-size: var(--text-sm); }
.sg-table--narrow[b-l2edzv2lmd] { max-width: 620px; }
.sg-table th[b-l2edzv2lmd] {
    text-align: left; font-size: var(--text-2xs); font-weight: var(--weight-semibold);
    letter-spacing: var(--tracking-caps); text-transform: uppercase; color: var(--fg-muted);
    padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-default);
}
.sg-table td[b-l2edzv2lmd] { padding: var(--space-3) var(--space-4); border-bottom: 1px solid var(--border-subtle); vertical-align: middle; }
.sg-cell-val[b-l2edzv2lmd] { font-size: var(--text-xs); color: var(--fg-secondary); white-space: nowrap; }
.sg-chip[b-l2edzv2lmd] { display: block; width: 26px; height: 20px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--border-default); }

/* ---- brand ---- */
.sg-brand[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.sg-brand__item[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); width: 200px; }
.sg-brand__swatch[b-l2edzv2lmd] { height: 112px; border-radius: var(--radius-md); box-shadow: inset 0 0 0 1px var(--border-default), var(--shadow-sm); }
.sg-brand__name[b-l2edzv2lmd] { font-size: var(--text-xs); color: var(--fg-primary); }
.sg-brand__val[b-l2edzv2lmd] { font-size: var(--text-xs); color: var(--fg-muted); }

.sg-gradients[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-5); }
.sg-gradient[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-gradient__bar[b-l2edzv2lmd] { height: 56px; border-radius: var(--radius-md); }

/* ---- ramps ---- */
.sg-ramp[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-3); }
.sg-ramp__cell[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); width: 86px; }
.sg-ramp__swatch[b-l2edzv2lmd] { height: 56px; border-radius: var(--radius-sm); box-shadow: inset 0 0 0 1px var(--border-default); }
.sg-ramp__name[b-l2edzv2lmd] { font-size: var(--text-2xs); color: var(--fg-primary); }
.sg-ramp__val[b-l2edzv2lmd] { font-size: var(--text-2xs); color: var(--fg-muted); }

/* ---- typography ---- */
.sg-fams[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-6); }
.sg-fam[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); }
.sg-fam__specimen[b-l2edzv2lmd] { font-size: var(--text-h2); line-height: var(--lh-h2); color: var(--fg-primary); }
.sg-fam__val[b-l2edzv2lmd] { font-size: var(--text-2xs); color: var(--fg-muted); word-break: break-word; }
.sg-weights[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sg-weight[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); min-width: 190px; }

/* ---- spacing / radius ---- */
.sg-spaces[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-3); }
.sg-space[b-l2edzv2lmd] { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-xs); }
.sg-space__name[b-l2edzv2lmd] { width: 110px; color: var(--fg-primary); }
.sg-space__bar[b-l2edzv2lmd] { height: 16px; background: var(--accent); border-radius: var(--radius-xs); min-width: 1px; }
.sg-space__val[b-l2edzv2lmd] { color: var(--fg-muted); white-space: pre; }

.sg-radii[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-6); }
.sg-radius[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); width: 150px; }
.sg-radius__box[b-l2edzv2lmd] { height: 72px; background: var(--accent-subtle); box-shadow: inset 0 0 0 1.5px var(--border-accent); }

/* ---- elevation ---- */
.sg-elevs[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sg-elev[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); width: 210px; }
.sg-elev__card[b-l2edzv2lmd] { height: 76px; background: var(--bg-surface); border-radius: var(--radius-md); border: 1px solid var(--border-subtle); }
.sg-elev__val[b-l2edzv2lmd] { font-size: var(--text-3xs); color: var(--fg-muted); word-break: break-word; }

/* ---- motion ---- */
.sg-eases[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; gap: var(--space-8); }
.sg-ease[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-2); width: 180px; }
.sg-ease__svg[b-l2edzv2lmd] { width: 120px; height: 120px; }
.sg-ease__box[b-l2edzv2lmd] { fill: var(--bg-sunken); stroke: var(--border-default); stroke-width: 1; }
.sg-ease__curve[b-l2edzv2lmd] { stroke: var(--accent); stroke-width: 3; }
.sg-ease__val[b-l2edzv2lmd] { font-size: var(--text-2xs); color: var(--fg-muted); }
.sg-transition[b-l2edzv2lmd] { word-break: break-word; max-width: 70ch; }

.sg-hoverbox[b-l2edzv2lmd] {
    display: inline-flex; align-items: center; justify-content: center;
    width: 160px; height: 56px; border-radius: var(--radius-md);
    background: var(--bg-sunken); color: var(--fg-secondary);
    border: 1px solid var(--border-default); font-size: var(--text-sm);
    transition: var(--transition-colors); cursor: default;
}
.sg-hoverbox:hover[b-l2edzv2lmd] { background: var(--accent); color: var(--fg-on-accent); border-color: var(--accent); box-shadow: var(--shadow-md); }

/* ---- layout rhythm ---- */
.sg-rhythm[b-l2edzv2lmd] { display: flex; flex-direction: column; gap: var(--space-5); }
.sg-rhythm__row[b-l2edzv2lmd] { display: flex; align-items: center; gap: var(--space-5); font-size: var(--text-xs); }
.sg-rhythm__name[b-l2edzv2lmd] { width: 170px; color: var(--fg-primary); flex: 0 0 auto; }
.sg-rhythm__box[b-l2edzv2lmd] { display: block; background: var(--accent-subtle); box-shadow: inset 0 0 0 1px var(--border-accent); border-radius: var(--radius-xs); flex: 0 0 auto; }
.sg-rhythm__val[b-l2edzv2lmd] { width: 64px; color: var(--fg-muted); flex: 0 0 auto; }

/* ---- component demos ---- */
.sg-row[b-l2edzv2lmd] { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); margin-top: var(--space-4); }
.sg-row--stack[b-l2edzv2lmd] { max-width: 320px; }
.sg-grid2[b-l2edzv2lmd] { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: var(--space-5); margin-top: var(--space-4); }
.sg-cardpad[b-l2edzv2lmd] { padding: var(--space-5); display: flex; flex-direction: column; gap: var(--space-2); }
.sg-progress[b-l2edzv2lmd] { max-width: 320px; margin-top: var(--space-4); }

/* ---- anatomical ---- */
.sg-anat[b-l2edzv2lmd] { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: var(--space-4); }
.sg-anat__item[b-l2edzv2lmd] { display: grid; grid-template-columns: 20px 1fr; grid-template-areas: "s n" "s v" "s c"; gap: 0 var(--space-4); align-items: center; }
.sg-anat__swatch[b-l2edzv2lmd] { grid-area: s; width: 20px; height: 20px; border-radius: var(--radius-xs); box-shadow: inset 0 0 0 1px var(--border-default); align-self: start; }
.sg-anat__name[b-l2edzv2lmd] { grid-area: n; font-size: var(--text-xs); color: var(--fg-primary); }
.sg-anat__val[b-l2edzv2lmd] { grid-area: v; font-size: var(--text-2xs); color: var(--fg-muted); }
.sg-anat__note[b-l2edzv2lmd] { grid-area: c; }

.sg-strip[b-l2edzv2lmd] { display: flex; border-radius: var(--radius-sm); overflow: hidden; box-shadow: inset 0 0 0 1px var(--border-default); }
.sg-strip__cell[b-l2edzv2lmd] { flex: 1 1 0; height: 64px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: var(--space-2); }
.sg-strip__label[b-l2edzv2lmd] { font-size: var(--text-2xs); color: var(--slate-0); mix-blend-mode: difference; }

@media (max-width: 1100px) {
    .sg-split[b-l2edzv2lmd] { grid-template-columns: 1fr; }
    .sg[b-l2edzv2lmd] { padding: var(--space-6); }
}
/* /Pages/Subject.razor.rz.scp.css */
/* Subject page. The chart itself reuses the shared pl-chart__*/pl-spark* rules from app.css; what is
   here is the page shell[b-cuswznpfrg], the legend[b-cuswznpfrg], the scan table[b-cuswznpfrg], and the series palette.

   The palette is declared on .subj rather than inside SubjectVolumeChart so it can flip with the
   theme: custom properties inherit down the DOM[b-cuswznpfrg], so the child chart resolves var(--s3) against this
   block. Eight hues[b-cuswznpfrg], each chosen to hold contrast on BOTH the light surface and the dark one — a
   series that vanishes in one theme is a series a radiologist cannot read. */

.subj[b-cuswznpfrg] {
    --s0: #1F6FB2;
    --s1: #D2551B;
    --s2: #0E9A78;
    --s3: #B4459A;
    --s4: #8A6D3B;
    --s5: #1191A6;
    --s6: #6D5BD0;
    --s7: #C2405A;

    /* Bands that stripe a swatch whose line is dashed (the ninth series onward — see
       SubjectSeriesStyle). Ink over the hue rather than a "gap" colour, so it needs to know nothing
       about whatever surface the swatch happens to sit on. Inherits into the chart's tooltip too. */
    --s-stripe: rgb(0 0 0 / 0.5);

    min-height: 100%;
    display: flex;
    justify-content: center;
    padding: 40px 20px 64px;
    background: var(--bg-app);
}

[data-bs-theme="dark"] .subj[b-cuswznpfrg] {
    --s0: #5AA9E6;
    --s1: #F58B4C;
    --s2: #35D3A8;
    --s3: #E37BD0;
    --s4: #C9A96A;
    --s5: #4FD3E6;
    --s6: #A08CF0;
    --s7: #F0788F;

    /* Dark theme lightens the hues, so black bands stop reading — stripe with light ink instead. */
    --s-stripe: rgb(255 255 255 / 0.45);
}

.subj__panel[b-cuswznpfrg] {
    width: 100%;
    max-width: 56rem;
    display: flex;
    flex-direction: column;
    gap: 18px;
}

/* ---- header ---------------------------------------------------------------------------------- */

.subj__head[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
}

.subj__back[b-cuswznpfrg] {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    flex: 0 0 auto;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
}

.subj__back:hover[b-cuswznpfrg] {
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.subj__name[b-cuswznpfrg] {
    margin: 0;
    font-size: var(--text-xl, 1.25rem);
    font-weight: 600;
    color: var(--fg-primary);
    overflow-wrap: anywhere;
}

.subj__name-edit[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    flex: 1 1 18rem;
}

.subj__name-input[b-cuswznpfrg] {
    flex: 1 1 auto;
    min-width: 8rem;
    padding: 5px 9px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-primary);
    font-family: inherit;
    font-size: var(--text-base);
}

.subj__name-input:focus-visible[b-cuswznpfrg] {
    outline: 2px solid var(--accent);
    outline-offset: 1px;
}

.subj__chips[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: auto;
    flex-wrap: wrap;
}

.subj__chip[b-cuswznpfrg] {
    padding: 2px 8px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-full);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-size: var(--text-xs);
    line-height: var(--lh-xs);
    white-space: nowrap;
}

/* ---- buttons --------------------------------------------------------------------------------- */

.subj__btn[b-cuswznpfrg] {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 4px 10px;
    border: 1px solid var(--border-default);
    border-radius: var(--radius-sm);
    background: var(--bg-surface);
    color: var(--fg-secondary);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    text-decoration: none;
    cursor: pointer;
}

.subj__btn:hover[b-cuswznpfrg] {
    background: var(--bg-hover);
    color: var(--fg-primary);
}

.subj__btn--primary[b-cuswznpfrg] {
    border-color: transparent;
    background: var(--accent);
    color: var(--fg-on-accent);
}

.subj__btn--primary:hover[b-cuswznpfrg] {
    background: var(--accent-hover);
    color: var(--fg-on-accent);
}

.subj__btn:disabled[b-cuswznpfrg] {
    opacity: 0.55;
    cursor: default;
}

.subj__rename[b-cuswznpfrg] {
    flex: 0 0 auto;
}

/* ---- cards / states -------------------------------------------------------------------------- */

.subj__card[b-cuswznpfrg] {
    background: var(--bg-surface);
    border: 1px solid var(--border-default);
    border-radius: var(--radius-md);
    padding: 16px 18px 18px;
}

.subj__card-head[b-cuswznpfrg] {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 12px;
}

.subj__card-title[b-cuswznpfrg] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--fg-primary);
}

.subj__card-unit[b-cuswznpfrg] {
    font-size: var(--text-xs);
    color: var(--fg-muted);
}

.subj__loading[b-cuswznpfrg] {
    padding: 40px 0;
    text-align: center;
    color: var(--fg-muted);
    font-size: var(--text-sm);
}

.subj__error[b-cuswznpfrg] {
    margin: 0;
    padding: 8px 12px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-bg);
    color: var(--danger-fg);
    font-size: var(--text-sm);
}

.subj__empty[b-cuswznpfrg] {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
    padding: 22px 0 6px;
}

.subj__empty-title[b-cuswznpfrg] {
    margin: 0;
    font-size: var(--text-base);
    font-weight: 600;
    color: var(--fg-primary);
}

.subj__empty-hint[b-cuswznpfrg] {
    margin: 0;
    max-width: 44rem;
    font-size: var(--text-sm);
    line-height: 1.45;
    color: var(--fg-secondary);
}

/* ---- chart chrome ---------------------------------------------------------------------------- */

.subj__note[b-cuswznpfrg] {
    margin: 8px 0 0;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--fg-muted);
}

.subj__legend[b-cuswznpfrg] {
    list-style: none;
    margin: 14px 0 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.subj__leg[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 100%;
    padding: 5px 8px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    background: none;
    color: var(--fg-primary);
    font-family: inherit;
    font-size: var(--text-sm);
    line-height: var(--lh-sm);
    text-align: left;
    cursor: pointer;
}

button.subj__leg:hover[b-cuswznpfrg] {
    background: var(--bg-hover);
    border-color: var(--border-subtle);
}

/* Toggled off: dimmed but still readable, because its numbers are still the answer to "how big was
   it" even while the line is off the plot. */
.subj__leg.is-off[b-cuswznpfrg] {
    opacity: 0.45;
}

.subj__leg:disabled[b-cuswznpfrg] {
    cursor: default;
    opacity: 0.55;
}

.subj__swatch[b-cuswznpfrg] {
    flex: 0 0 auto;
    width: 10px;
    height: 10px;
    border-radius: var(--radius-full);
}

/* Past eight series the hue repeats and the LINE is what tells them apart, so the swatch has to carry
   the same mark — a legend of identical dots stops matching the plot at series 9, which is worse than
   no legend. Periods are the dash arrays coarsened to what survives at 10px. The hue arrives as an
   inline background-COLOR, so these background-images layer over it instead of replacing it. */
.subj__swatch.is-dash1[b-cuswznpfrg] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 4px, var(--s-stripe, rgb(0 0 0 / 0.5)) 4px 6px);
}

.subj__swatch.is-dash2[b-cuswznpfrg] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 1px, var(--s-stripe, rgb(0 0 0 / 0.5)) 1px 3px);
}

.subj__swatch.is-dash3[b-cuswznpfrg] {
    background-image: repeating-linear-gradient(90deg,
        rgb(0 0 0 / 0) 0 5px, var(--s-stripe, rgb(0 0 0 / 0.5)) 5px 7px,
        rgb(0 0 0 / 0) 7px 9px, var(--s-stripe, rgb(0 0 0 / 0.5)) 9px 10px);
}

/* Flags a series whose points TOTAL several segments on at least one scan. Deliberately plain and
   next to the name: it qualifies the number, it is not a warning. */
.subj__leg-sum[b-cuswznpfrg] {
    flex: 0 0 auto;
    padding: 0 6px;
    border: 1px solid var(--border-subtle);
    border-radius: var(--radius-full);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    line-height: 1.5;
    white-space: nowrap;
}

.subj__leg-name[b-cuswznpfrg] {
    font-weight: 500;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.subj__leg-val[b-cuswznpfrg] {
    margin-left: auto;
    color: var(--fg-secondary);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

.subj__leg-delta[b-cuswznpfrg] {
    color: var(--fg-primary);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    white-space: nowrap;
}

/* No colour coding on the delta: growth is bad for a tumour and good for a graft, and the page has
   no way of knowing which this is. */

.subj__leg-note[b-cuswznpfrg] {
    margin-left: auto;
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-style: italic;
    white-space: nowrap;
}

.subj__leg-meta[b-cuswznpfrg] {
    flex: 0 0 auto;
    min-width: 5.5rem;
    text-align: right;
    color: var(--fg-faint);
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* ---- scans table ----------------------------------------------------------------------------- */

.subj__table[b-cuswznpfrg] {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--text-sm);
}

.subj__table th[b-cuswznpfrg] {
    padding: 6px 8px;
    border-bottom: 1px solid var(--border-default);
    color: var(--fg-muted);
    font-size: var(--text-xs);
    font-weight: 600;
    text-align: left;
    white-space: nowrap;
}

.subj__table td[b-cuswznpfrg] {
    padding: 7px 8px;
    border-bottom: 1px solid var(--border-subtle);
    color: var(--fg-secondary);
    vertical-align: middle;
}

.subj__table tr:last-child td[b-cuswznpfrg] {
    border-bottom: none;
}

.subj__num[b-cuswznpfrg] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.subj__mono[b-cuswznpfrg] {
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    color: var(--fg-secondary);
    white-space: nowrap;
}

.subj__case-name a[b-cuswznpfrg] {
    color: var(--fg-primary);
    font-weight: 500;
    text-decoration: none;
}

.subj__case-name a:hover[b-cuswznpfrg] {
    color: var(--fg-link);
    text-decoration: underline;
}

@media (max-width: 640px) {
    .subj__chips[b-cuswznpfrg] {
        margin-left: 0;
        width: 100%;
    }

    .subj__leg[b-cuswznpfrg] {
        flex-wrap: wrap;
    }

    .subj__leg-meta[b-cuswznpfrg] {
        min-width: 0;
    }
}

/* ---- merge --------------------------------------------------------------------------------- */
/* Sits directly under the header, because it is about the subject in that header rather than about
   the chart below it. */

.subj__merge[b-cuswznpfrg] {
    border-color: var(--border-strong);
}

.subj__merge-row[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.subj__merge-row .subj__name-input[b-cuswznpfrg] {
    flex: 0 1 26rem;
    font-size: var(--text-sm);
}

.subj__merge-acts[b-cuswznpfrg] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 12px;
}

/* The one destructive button on this page — a subject row is deleted and cannot be brought back. It
   reads as danger before it is clicked, not after. red-600/700 rather than --danger (red-500), which
   is what app.css's .btn-danger uses so a white label clears WCAG AA in both themes. */
.subj__btn--danger[b-cuswznpfrg] {
    border-color: var(--red-600);
    background: var(--red-600);
    color: #fff;
}

.subj__btn--danger:hover[b-cuswznpfrg] {
    border-color: var(--red-700);
    background: var(--red-700);
    color: #fff;
}

/* ---- undated scans: grouped under a divider, never sorted in by upload time ---------------- */

.subj__divider td[b-cuswznpfrg] {
    padding: 10px 8px 6px;
    font-size: var(--text-xs);
    line-height: 1.45;
    color: var(--fg-muted);
    border-top: 1px solid var(--border-default);
}

.subj__undated td:first-child[b-cuswznpfrg] {
    color: var(--fg-muted);
    cursor: help;
}