/* v0 styling — deliberately plain. Real theming arrives with Telerik Blazor. */

/* v1.7: design tokens for the Structures restyle. New rules only — kept off
   the existing literals so Digitize and other pages don't shift visually. */
:root {
    --font-ui: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI Variable',
               'Segoe UI', system-ui, sans-serif;
    --color-text:        #1d1d1f;
    --color-text-muted:  #6e6e73;
    --color-border:      #e5e5ea;
    --color-bg:          #ffffff;
    --color-bg-elevated: #f5f5f7;
    --color-accent:      #0a84ff;
    --radius-sm: 6px;
    --radius-md: 10px;
    --radius-lg: 14px;
    --shadow-sm: 0 1px 2px rgba(0,0,0,0.04);
}

* { box-sizing: border-box; }

body {
    margin: 0;
    font-family: var(--font-ui);
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
    color: #1f2933;
    background: #f5f7fa;
}

.page {
    max-width: none;
    margin: 0 auto;
    padding: 1.5rem 2.5rem 3rem;
}

@media (min-width: 1600px) {
    .page { padding-left: 4rem; padding-right: 4rem; }
}

/* ---- Single-screen Digitize layout (v1.6) -----------------------------
   Locks the page to viewport height with internal scrolling on the data
   column. Topbar + action bar are fixed-height; the main grid eats the
   rest of the viewport. No body-level vertical scroll on a 1080p screen.
*/
.page--single-screen {
    height: 100vh;
    max-height: 100vh;
    padding: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.page--single-screen > .topbar,
.page--single-screen > .action-bar { flex: 0 0 auto; }
.page--single-screen > .main-grid { flex: 1 1 auto; min-height: 0; }

/* ---- Topbar (v1.8: Apple-style, tokenized) -----------------------------
   One line: title + structure crumb | reader · R · sign-out.
*/
.topbar {
    display: flex; align-items: center; justify-content: space-between;
    gap: 1rem;
    padding: 8px 20px;
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    font-size: 13px;
    color: var(--color-text);
}
.topbar h1 {
    margin: 0;
    font-size: 15px; font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--color-text);
    display: inline-flex; align-items: baseline; gap: 6px;
}
.topbar .version {
    font-size: 10px; font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    padding: 1px 6px; border-radius: var(--radius-sm);
    vertical-align: middle;
    margin-left: 0;
}
.topbar-left, .topbar-right {
    display: flex; align-items: center; gap: 10px;
    flex-wrap: nowrap; min-width: 0;
}
.topbar-left  { flex: 1 1 auto; min-width: 0; }
.topbar-right { flex: 0 0 auto; }

.structure-crumb {
    display: flex; align-items: center; gap: 10px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    min-width: 0;
}
/* ADO #5490: make the structure status details prominent (larger, full-weight). */
.structure-crumb code {
    background: var(--color-bg-elevated);
    padding: 3px 9px;
    border-radius: var(--radius-sm);
    font-size: 15px; font-weight: 600;
    color: var(--color-text);
    font-family: ui-monospace, SFMono-Regular, 'SF Mono', Menlo, monospace;
}
.crumb-meta {
    color: var(--color-text); font-size: 14px; font-weight: 500;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.crumb-meta.error {
    color: #d93b3b;
    display: inline-flex; align-items: center; gap: 4px;
}
/* Show/hide capture Length toggle in the Digitize header crumb. */
.digitize-page .length-toggle {
    background: transparent; border: none; padding: 0;
    color: var(--color-accent); font-size: 13px; cursor: pointer;
    font-family: var(--font-ui); white-space: nowrap; flex: 0 0 auto;
}
.digitize-page .length-toggle:hover { text-decoration: underline; }

/* Dot-pattern status row used inside structure-crumb (matches Structures). */
.digitize-page .status-row {
    display: inline-flex; align-items: center; gap: 6px;
    color: var(--color-text);
    font-size: 14px; font-weight: 600;
}
.digitize-page .status-dot {
    width: 9px; height: 9px; border-radius: 50%;
    background: #c7c7cc;
    flex: 0 0 auto;
}
.digitize-page .status-dot.dot-approved   { background: #30b0c7; }
.digitize-page .status-dot.dot-submitted  { background: #0a84ff; }
.digitize-page .status-dot.dot-pendingreview { background: #0a84ff; }
.digitize-page .status-dot.dot-completed  { background: #34c759; }
.digitize-page .status-dot.dot-inreview   { background: #ff9f0a; }
.digitize-page .status-dot.dot-inprogress { background: #ffb300; }
.digitize-page .status-dot.dot-pending    { background: #8e8e93; }

/* Reader + R-service pills — neutral chip + colored leading dot. */
.reader-pill, .rservice-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    white-space: nowrap;
    border: 1px solid var(--color-border);
}
.reader-pill { color: var(--color-text); }
.reader-pill .pill-dot { display: none; }
.pill-dot {
    width: 6px; height: 6px; border-radius: 50%;
    background: #8e8e93;
    flex: 0 0 auto;
}
/* All three R-service states are the same chip — identical box, type and
   layout — so the pill never resizes or shifts when the probe resolves.
   The dot color is the only thing that differs; the label is fixed-width
   (justified left) so "R loading" → "R online" doesn't reflow the header. */
.rservice-pill { justify-content: flex-start; }
.rservice-pill > span:last-child { min-width: 52px; }
.rservice-pill.ok, .rservice-pill.err, .rservice-pill.loading { color: var(--color-text); }
.rservice-pill.ok      .pill-dot { background: #34c759; }
.rservice-pill.err     .pill-dot { background: #ff453a; }
.rservice-pill.loading .pill-dot { background: #ff9f0a; }

.topbar .auth-link {
    font-size: 12px;
    color: var(--color-accent);
    text-decoration: none;
}
.topbar .auth-link:hover { text-decoration: underline; }
.topbar .auth-link--anon { color: var(--color-text-muted); }
.topbar .back-link {
    margin-left: 4px;
    color: var(--color-accent);
    font-size: 12px;
    text-decoration: none;
    display: inline-flex; align-items: center; gap: 3px;
}
.topbar .back-link:hover { text-decoration: underline; }

/* Topbar far-left back button — replaces the old title slot on Digitize.
   Pill so it reads as a control, not just a link. */
.topbar .back-link.topbar-back {
    margin-left: 0;
    padding: 5px 10px 5px 8px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    color: var(--color-text);
    gap: 5px;
    flex: 0 0 auto;
}
.topbar .back-link.topbar-back:hover {
    text-decoration: none;
    background: #ebebef;
    border-color: var(--color-text-muted);
}

/* ---- Action bar above the canvas (v1.8) ------------------------------ */
.action-bar {
    background: var(--color-bg);
    border-bottom: 1px solid var(--color-border);
    padding: 6px 20px 8px;
}
.action-bar-row {
    display: flex; align-items: center; gap: 8px;
    flex-wrap: wrap;
    padding: 2px 0;
}
.action-bar-row.params-row {
    border-top: none;
    padding-top: 4px; margin-top: 0;
    font-size: 13px;
}
.action-spacer { flex: 1 1 auto; }

.action-bar .file-pick-btn {
    display: inline-flex; align-items: center; gap: 6px;
    background: var(--color-accent); color: white;
    padding: 6px 12px;
    border-radius: var(--radius-md);
    font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.action-bar .file-pick-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.action-bar .file-pick-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
.action-bar .hidden-file-input { display: none; }

.inline-input {
    display: inline-flex; align-items: center; gap: 5px;
    color: var(--color-text-muted);
    font-size: 12px;
}
.inline-input input[type="number"],
.inline-input select {
    padding: 4px 8px;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui);
    font-size: 12px;
    color: var(--color-text);
    max-width: 90px;
    outline: none;
}
.inline-input input[type="number"]:focus,
.inline-input select:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(10,132,255,0.18);
}

.params-row .checkbox {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 12px; color: var(--color-text);
}

/* A toggle paired with a hover/focus info icon. The icon sits outside the
   <label> so interacting with it never toggles the checkbox. */
.toggle-with-tip { display: inline-flex; align-items: center; gap: 4px; }
.info-tip {
    position: relative;
    display: inline-flex; align-items: center;
    color: var(--color-text-muted); cursor: help;
}
.info-tip:hover, .info-tip:focus-visible { color: var(--color-accent); outline: none; }

/* Styled tooltip bubble (replaces the native title). Wraps at max-width and
   matches the app: dark surface, rounded corners, soft shadow, small arrow. */
.info-tip::after {
    content: attr(data-tip);
    position: absolute; top: calc(100% + 9px); left: 50%;
    transform: translateX(-50%) translateY(-3px);
    width: max-content; max-width: 260px;
    white-space: normal; text-align: left;
    background: #1d1d1f; color: #fff;
    font-size: 12px; font-weight: 400; line-height: 1.45; letter-spacing: -0.003em;
    padding: 8px 10px; border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.22);
    opacity: 0; visibility: hidden;
    transition: opacity 0.14s ease, transform 0.14s ease;
    z-index: 60; pointer-events: none;
}
.info-tip::before {
    content: ""; position: absolute; top: calc(100% + 3px); left: 50%;
    transform: translateX(-50%);
    border: 6px solid transparent; border-bottom-color: #1d1d1f;
    opacity: 0; visibility: hidden; transition: opacity 0.14s ease;
    z-index: 61; pointer-events: none;
}
.info-tip:hover::after, .info-tip:focus-visible::after {
    opacity: 1; visibility: visible; transform: translateX(-50%) translateY(0);
}
.info-tip:hover::before, .info-tip:focus-visible::before {
    opacity: 1; visibility: visible;
}

.calibration-pill {
    display: inline-flex; align-items: center; gap: 5px;
    padding: 3px 9px; border-radius: 999px;
    font-size: 11px; font-weight: 500;
    border: 1px solid var(--color-border);
    background: var(--color-bg-elevated);
    color: var(--color-text);
}
.calibration-pill.ok   .pill-dot { background: #34c759; }
.calibration-pill.warn .pill-dot { background: #ff9f0a; }

/* Inline variant: step banner sits in the same row as the params/upload.
   flex:1 lets it eat the remaining horizontal space so the prompt is the
   visually dominant element of the row. */
.action-bar .digitize-step-banner.inline {
    flex: 1 1 auto;
    margin: 0;
    padding: 6px 12px;
    font-size: 12px;
    min-width: 220px;
    text-align: left;
}

/* ---- Main two-column grid ------------------------------------------- */
.main-grid {
    display: grid;
    grid-template-columns: 1fr 660px;
    gap: 0;
    height: 100%;
    overflow: hidden;
}
@media (min-width: 1800px) {
    .main-grid { grid-template-columns: 1fr 760px; }
}
.canvas-col {
    padding: 0.6rem 1rem 0.75rem;
    display: flex; flex-direction: column;
    min-height: 0;
    overflow: hidden;
}
.data-col {
    border-left: 1px solid var(--color-border);
    background: var(--color-bg);
    overflow-y: auto;
    padding: 12px 16px 20px;
}

.canvas-col .canvas-mount-wrap { flex: 1 1 auto; min-height: 280px; position: relative; }
.canvas-col .canvas-mount { height: 100%; margin: 0; }

/* Floating mode + action toolbar pinned to the top-right of the image.
   v1.8: lighter frosted-glass surface, Apple-style. Pixels under the
   toolbar stay visible without losing contrast against bright otoliths. */
.canvas-overlay-toolbar {
    position: absolute;
    top: 10px; right: 10px;
    z-index: 5;
    display: flex; flex-direction: column; gap: 6px;
    background: rgba(255, 255, 255, 0.78);
    backdrop-filter: blur(20px) saturate(180%);
    -webkit-backdrop-filter: blur(20px) saturate(180%);
    padding: 6px;
    border: 1px solid rgba(0, 0, 0, 0.06);
    border-radius: var(--radius-md);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    pointer-events: auto;
}
.canvas-overlay-toolbar .mode-buttons,
.canvas-overlay-toolbar .action-buttons {
    display: flex; gap: 4px; flex-wrap: nowrap;
}
.canvas-overlay-toolbar .mode-btn {
    display: inline-flex; align-items: center; gap: 5px;
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.canvas-overlay-toolbar .mode-btn .dot {
    width: 7px; height: 7px; border-radius: 50%;
    flex: 0 0 auto;
}
.canvas-overlay-toolbar .mode-btn:hover { background: rgba(0, 0, 0, 0.05); }
.canvas-overlay-toolbar .mode-btn.active {
    background: var(--color-accent);
    color: white;
    border-color: transparent;
}
.canvas-overlay-toolbar .action-buttons button {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent;
    color: var(--color-text);
    border: 1px solid transparent;
    padding: 5px 10px;
    font-family: var(--font-ui);
    font-size: 12px; font-weight: 500;
    border-radius: var(--radius-sm);
    cursor: pointer;
}
.canvas-overlay-toolbar .action-buttons button:hover { background: rgba(0, 0, 0, 0.05); }

.upload-error {
    color: #d93b3b;
    margin: 8px 0 0;
    font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
}

/* Gallery — compact strip below the canvas (v1.8 polish). */
.image-gallery.compact {
    padding: 8px 0 0;
    margin-top: 8px;
    background: transparent;
    border: 0;
    border-top: 1px solid var(--color-border);
}
.image-gallery.compact .gallery-strip {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 8px;
    padding-bottom: 4px;
}
.image-gallery.compact .gallery-tile {
    width: 140px; flex: 0 0 auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    overflow: hidden;
    background: var(--color-bg);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.image-gallery.compact .gallery-tile:hover {
    border-color: var(--color-text-muted);
}
.image-gallery.compact .gallery-tile.selected {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 2px rgba(10,132,255,0.18);
}
.image-gallery.compact .gallery-tile img {
    width: 100%; height: 92px; object-fit: cover; display: block;
}
.image-gallery.compact .gallery-meta {
    display: flex; align-items: center; gap: 6px;
    padding: 6px 8px;
    font-size: 12px;
    color: var(--color-text);
}
.image-gallery.compact .primary-tag {
    color: #f5b800;
    display: inline-flex; align-items: center;
}
.image-gallery.compact .filename {
    flex: 1 1 auto;
    font-size: 11px;
    color: var(--color-text-muted);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.image-gallery.compact .gallery-actions {
    display: inline-flex; gap: 2px;
    flex: 0 0 auto;
}
.image-gallery.compact .set-primary-btn,
.image-gallery.compact .delete-btn {
    display: inline-flex; align-items: center; justify-content: center;
    width: 24px; height: 24px;
    padding: 0;
    background: transparent; border: none;
    color: var(--color-text-muted);
    cursor: pointer;
    border-radius: var(--radius-sm);
}
.image-gallery.compact .set-primary-btn:hover { color: #f5b800; background: var(--color-bg-elevated); }
.image-gallery.compact .delete-btn:hover      { color: #d93b3b; background: var(--color-bg-elevated); }

/* Active "this is the primary image" state — keeps the star button visible
   in the same slot as inactive tiles, just filled gold so the eye can pick
   out the primary at a glance without scanning a separate leading tag. */
.image-gallery.compact .set-primary-btn.is-primary {
    color: #f5b800;
    cursor: default;
    opacity: 1;
}
.image-gallery.compact .set-primary-btn.is-primary svg { fill: #f5b800; }
.image-gallery.compact .set-primary-btn.is-primary:hover { background: transparent; }

/* ---- Right-column panels (v1.8) ------------------------------------- */
.captured-panel, .backcalc-panel {
    background: var(--color-bg);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    padding: 12px 14px 14px;
    margin-bottom: 12px;
}
.panel-header {
    display: flex; align-items: center; justify-content: space-between;
    margin-bottom: 8px;
}
.panel-header h3 {
    margin: 0;
    font-size: 13px; font-weight: 600;
    color: var(--color-text);
    text-transform: uppercase; letter-spacing: 0.04em;
}
.link-btn {
    background: transparent; border: 0;
    color: var(--color-accent); cursor: pointer;
    font-size: 12px; padding: 0;
}
.link-btn:hover { text-decoration: underline; background: transparent; }

.live-indicator {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 10px; font-weight: 500;
    color: var(--color-text);
    background: var(--color-bg-elevated);
    padding: 2px 8px;
    border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.live-indicator .pill-dot { background: #34c759; }
.note.small { font-size: 12px; margin: 4px 0; color: var(--color-text-muted); }

/* ---- Multi-reader capture panels (v2.4) ------------------------------- */
/* Two stacked panels, one per reader. The active panel (whose marks are on
   the canvas) is highlighted; the idle one is dimmed until activated. */
.reader-panel { transition: border-color 0.15s ease, box-shadow 0.15s ease, opacity 0.15s ease; }
.reader-panel.reader-active {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.12);
}
.reader-panel.reader-idle {
    background: var(--color-bg-elevated);
    opacity: 0.92;
}
.reader-head { align-items: center; flex-wrap: wrap; row-gap: 8px; }
.reader-head-left { display: inline-flex; align-items: center; gap: 8px; flex-wrap: wrap; row-gap: 6px; }
.reader-head-actions { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; row-gap: 6px; }

/* Stands in for the save buttons once the structure is Completed. Green to match the
   Completed status dot, so "final" reads as a resolved state rather than an error. */
.reader-head-actions .final-note {
    display: inline-flex; align-items: center; gap: 6px;
    margin: 0; color: #34c759; font-weight: 500; white-space: nowrap;
}

/* Reader/username chip — mirrors the top-right .reader-pill, with a small
   uppercase label so the signed-in reader reads as a tidy badge. */
.reader-identity {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 3px 10px; border-radius: 999px;
    font-size: 14px; font-weight: 500;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    white-space: nowrap; max-width: 100%;
}
.reader-identity .reader-identity-label {
    font-size: 12px; font-weight: 700;
    text-transform: uppercase; letter-spacing: 0.06em;
    color: var(--color-text-muted);
}
.reader-identity .reader-identity-name {
    overflow: hidden; text-overflow: ellipsis;
}

.capturing-pill {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: 14px; font-weight: 600;
    color: var(--color-accent);
    background: rgba(10, 132, 255, 0.1);
    padding: 2px 8px; border-radius: 999px;
    text-transform: uppercase; letter-spacing: 0.04em;
}
.capturing-pill .pill-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--color-accent); }

.activate-btn {
    display: inline-flex; align-items: center; gap: 5px;
    height: 28px; padding: 0 12px;
    border: 1px solid var(--color-accent); border-radius: var(--radius-sm);
    background: var(--color-bg); color: var(--color-accent);
    font-family: var(--font-ui); font-size: 12px; font-weight: 500;
    cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.activate-btn:hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(10, 132, 255, 0.22); }
.activate-btn:active { transform: translateY(0); box-shadow: 0 1px 3px rgba(10, 132, 255, 0.18); }

.record-summary.compact {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 4px 12px;
    font-size: 12px;
    margin: 4px 0 8px;
}
.record-summary.compact .lbl {
    color: var(--color-text-muted); margin-right: 4px;
}
.record-summary.compact > div > span:last-child {
    color: var(--color-text); font-variant-numeric: tabular-nums;
}

.annuli-table.compact {
    width: 100%;
    border-collapse: collapse;
    font-size: 11px;
    margin: 8px 0 0;
    font-variant-numeric: tabular-nums;
}
.annuli-table.compact th, .annuli-table.compact td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.annuli-table.compact th {
    background: transparent;
    color: var(--color-text-muted);
    font-weight: 500;
    text-transform: uppercase;
    font-size: 10px;
    letter-spacing: 0.04em;
}

/* Edge-is-annulus visibility (ADO #5480). The outermost annulus is the
   structure edge; the badge shows whether it's counted toward Age. */
.annuli-table.compact tr.edge-row td {
    background: rgba(10, 132, 255, 0.05);
}
.edge-cell {
    font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px;
    white-space: nowrap;
}
.edge-cell.counted   { background: #e6f6e6; color: #1e6b32; }
.edge-cell.uncounted { background: var(--color-bg-elevated); color: var(--color-text-muted); }

/* Age + edge tags in the captured-record summary. */
.age-tag, .edge-tag {
    font-size: 10px; font-weight: 600;
    padding: 1px 6px; border-radius: 999px;
    margin-left: 4px;
}
.age-tag.auto   { background: var(--color-bg-elevated); color: var(--color-text-muted); }
.age-tag.manual { background: #fff3e0; color: #8a4a00; }
.edge-tag.counted   { background: #e6f6e6; color: #1e6b32; }
.edge-tag.uncounted { background: var(--color-bg-elevated); color: var(--color-text-muted); }

.edge-help { margin-top: 6px; line-height: 1.4; }

/* Back-calc form — compact inline row */
.bc-form {
    display: flex; flex-wrap: wrap; gap: 8px 14px;
    align-items: center;
    margin: 4px 0 10px;
}
.bc-form .inline-input {
    flex-direction: column; align-items: flex-start; gap: 3px;
    font-size: 10px;
    text-transform: uppercase; letter-spacing: 0.04em;
    color: var(--color-text-muted);
}
.bc-form .inline-input input  { max-width: 120px; font-size: 13px; padding: 5px 8px; }
.bc-form .inline-input select { max-width: none; min-width: 260px; font-size: 13px; padding: 5px 28px 5px 8px;
    appearance: none; -webkit-appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}
.bc-form .checkbox.compact {
    font-size: 12px; gap: 5px;
    align-self: flex-end; padding-bottom: 6px;
    color: var(--color-text);
    text-transform: none; letter-spacing: 0;
}
.model-hint {
    font-size: 11px; margin: 4px 0 8px;
    color: var(--color-text-muted);
}

.backcalc-panel > button.primary-btn {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 8px 16px;
    font-family: var(--font-ui);
    font-size: 13px; font-weight: 500;
    background: var(--color-accent);
    color: white;
    border: none;
    border-radius: var(--radius-md);
    cursor: pointer;
    transition: background 0.12s ease;
}
.backcalc-panel > button.primary-btn:hover:not(:disabled) { background: #0070e0; }
.backcalc-panel > button.primary-btn:disabled {
    background: var(--color-text-muted); cursor: not-allowed; opacity: 0.6;
}
.backcalc-table {
    font-size: 11px;
    font-variant-numeric: tabular-nums;
    width: 100%;
    border-collapse: collapse;
}
.backcalc-table th, .backcalc-table td {
    padding: 6px 8px;
    border-bottom: 1px solid var(--color-border);
    text-align: left;
}
.backcalc-table th {
    color: var(--color-text-muted); font-weight: 500;
    text-transform: uppercase; font-size: 10px; letter-spacing: 0.04em;
}
.backcalc-panel .error {
    color: #d93b3b; font-size: 12px;
    display: inline-flex; align-items: center; gap: 5px;
}
.bc-meta, .bc-units {
    font-size: 11px; color: var(--color-text-muted);
    margin: 6px 0;
}

/* ---------------------------------------------------------------------------
   Digitize page body font bump — bring the toolbar + captured panel up to the
   topbar's ~13px baseline (they previously ran 10–12px). Scoped to
   .digitize-page so the back-calc modal and Structures page are unaffected.
   Primary text → 13px, panel/section headings → 14px, tiny uppercase
   badges/tags stay smaller (12px) so they don't dominate.
   --------------------------------------------------------------------------- */
.digitize-page .params-row .checkbox,
.digitize-page .inline-input,
.digitize-page .inline-input select,
.digitize-page .action-bar .file-pick-btn,
.digitize-page .action-bar .digitize-step-banner.inline,
.digitize-page .calibration-pill,
.digitize-page .canvas-overlay-toolbar .mode-btn,
.digitize-page .link-btn,
.digitize-page .note.small,
.digitize-page .record-summary.compact,
.digitize-page .annuli-table.compact { font-size: 13px; }

.digitize-page .panel-header h3 { font-size: 14px; }

.digitize-page .live-indicator,
.digitize-page .annuli-table.compact th,
.digitize-page .edge-cell,
.digitize-page .age-tag,
.digitize-page .edge-tag { font-size: 12px; }

header h1 {
    margin: 0;
    font-size: 1.75rem;
}

header .version {
    font-size: 0.75rem;
    background: #d6e4ff;
    color: #1c3d9c;
    padding: 2px 6px;
    border-radius: 4px;
    vertical-align: middle;
    margin-left: 0.5rem;
}

header .subtitle {
    margin: 0.25rem 0 0.5rem;
    color: #52606d;
}

header .reader-badge {
    margin: 0 0 2rem;
    font-size: 0.85rem;
    color: #334e68;
}

header .reader-badge code {
    background: #e4e7eb;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.85rem;
}

header .reader-badge .auth-link {
    margin-left: 0.75rem;
    font-size: 0.8rem;
    color: #1c3d9c;
    text-decoration: none;
}

header .reader-badge .auth-link:hover {
    text-decoration: underline;
}

header .reader-badge .auth-link--anon {
    color: #8c8c8c;
    font-style: italic;
}

/* === Structures v2 (v1.7) ================================================
   Apple-app aesthetic: Inter typography, lucide icons, status dots, whole-
   row click. Scoped under .structures-page so the digitize page is untouched.
   Background is intentionally white (overrides the body's #f5f7fa) so the
   surface reads as a single elevated sheet.
*/
.structures-page {
    background: var(--color-bg);
    color: var(--color-text);
    min-height: 100vh;
    padding: 32px 40px 32px;
}

@media (min-width: 1600px) {
    .structures-page { padding-left: 64px; padding-right: 64px; }
}

/* When combined with .page--single-screen (v1.8 polish), lock the page to
   the viewport and let only the grid scroll. The .page--single-screen base
   rule sets padding:0; restore Structures' generous padding here. */
.structures-page.page--single-screen {
    height: 100vh; max-height: 100vh;
    padding: 24px 40px 24px;
    display: flex; flex-direction: column;
    overflow: hidden;
}
@media (min-width: 1600px) {
    .structures-page.page--single-screen { padding-left: 64px; padding-right: 64px; }
}
.structures-page.page--single-screen > .structures-header,
.structures-page.page--single-screen > .structures-toolbar { flex: 0 0 auto; }
.structures-page.page--single-screen > .structures-section {
    flex: 1 1 auto; min-height: 0;
    display: flex; flex-direction: column;
    overflow: hidden;
}
.structures-page .grid-scroll {
    flex: 1 1 auto; min-height: 0;
    overflow: auto;
    /* Just a top divider to separate the grid from the toolbar — no full box
       border (the surrounding frame read as an extra outer border). The
       blank-rows impression is handled by dropping the last row's divider. */
    border-top: 1px solid var(--color-border);
    background: var(--color-bg);
}
.structures-page .grid-scroll .structures-grid { margin-top: 0; }
.structures-page .grid-scroll .structures-grid th {
    position: sticky; top: 0;
    background: var(--color-bg);
    z-index: 1;
}
/* Footer now lives just below the grid section as a direct page child. */
.structures-page.page--single-screen > .structures-footer {
    flex: 0 0 auto;
    margin-top: 12px;
}

/* Right side of the header: the account chips plus the primary action
   buttons (Age Structure / Generate Back-Calc), which moved up here out of
   the filter toolbar. */
.structures-page .structures-header-right {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 16px; flex-wrap: wrap;
}
.structures-page .header-actions {
    display: flex; align-items: center; gap: 8px; flex: 0 0 auto;
}
.structures-page .header-actions .save-btn {
    height: 34px; padding: 0 14px; font-size: 13px; white-space: nowrap;
}

/* Segmented My/All collections toggle in the header. Sits left of the
   account chips; the active segment reads as a raised white pill. */
.structures-page .scope-toggle {
    display: inline-flex; align-items: center; flex: 0 0 auto;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: 999px; padding: 3px; gap: 2px;
}
.structures-page .scope-toggle .scope-seg {
    border: none; background: transparent; cursor: pointer;
    height: 28px; padding: 0 14px; border-radius: 999px;
    font-family: var(--font-ui); font-size: 13px; white-space: nowrap;
    color: var(--color-text-muted);
    transition: background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease;
}
.structures-page .scope-toggle .scope-seg.active {
    background: var(--color-bg); color: var(--color-text); font-weight: 600;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.structures-page .scope-toggle .scope-seg:focus-visible {
    outline: none; box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

/* Empty state when "My Collections" has no assignments for this user. */
.structures-page .scope-empty {
    display: flex; flex-direction: column; align-items: center; gap: 12px;
    padding: 48px 24px; text-align: center;
}
.structures-page .scope-empty p {
    margin: 0; font-size: 15px; font-weight: 600; color: var(--color-text);
}

/* Account strip on the right side of the header row — same chips as
   the Digitize topbar (reader pill, R-service pill, sign-out link). */
.structures-page .structures-account {
    display: flex; align-items: center; justify-content: flex-end;
    gap: 10px;
    flex: 0 0 auto;
    font-size: 12px;
    color: var(--color-text-muted);
}
.structures-page .structures-account .auth-link {
    color: var(--color-accent);
    text-decoration: none;
    font-size: 12px;
}
.structures-page .structures-account .auth-link:hover { text-decoration: underline; }
.structures-page .structures-account .auth-link--anon {
    color: var(--color-text-muted);
}
/* Reuse the global .reader-pill / .rservice-pill / .pill-dot rules from
   the Digitize page — they're page-agnostic chips. */

.structures-page .structures-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    flex-wrap: wrap;
    margin-bottom: 16px;
}
.structures-page .structures-header-left {
    display: flex; align-items: center; gap: 20px;
    flex: 0 0 auto; flex-wrap: wrap;
}
.structures-page .structures-header-titles {
    flex: 0 0 auto;
}
.structures-page .structures-header h1 {
    margin: 0;
    font-size: 28px; font-weight: 600; letter-spacing: -0.02em;
    color: var(--color-text);
    display: flex; align-items: baseline; gap: 10px;
}
.structures-page .structures-header .version {
    font-size: 11px; font-weight: 500;
    color: var(--color-text-muted);
    background: var(--color-bg-elevated);
    padding: 2px 8px; border-radius: var(--radius-sm);
    /* Reset the legacy .version blue-pill look on this page only */
    margin-left: 0;
}
.structures-page .structures-header .subtitle {
    margin: 4px 0 0;
    font-size: 14px; color: var(--color-text-muted);
}

.structures-section { padding: 0; }

/* Form controls don't inherit the body font by default, so force the UI font
   on every interactive element across the page (filter selects, search box,
   action buttons) to match the Digitize page's Inter styling. */
.structures-page button,
.structures-page input,
.structures-page select,
.structures-page textarea { font-family: var(--font-ui); }

/* ---- Toolbar ---------------------------------------------------------- */
.structures-page .structures-toolbar {
    display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
    padding: 0; background: transparent; border: none;
    margin-bottom: 12px;
    justify-content: flex-start;
}
/* Five filters + search + toggle + actions no longer fit one line, so the
   toolbar wraps. Selects keep a sensible floor so labels don't clip. */
.structures-page .structures-toolbar .search-wrap { flex: 0 1 240px; min-width: 120px; }
.structures-page .structures-toolbar select { flex: 0 1 auto; min-width: 140px; }
/* Status values run long ("Approved - Public Dashboard"); give that one room. */
.structures-page .structures-toolbar select:nth-of-type(1) { min-width: 188px; }

.structures-page .search-wrap {
    position: relative;
    width: min(280px, 40vw);
}
.structures-page .search-wrap .icon-leading {
    position: absolute; left: 12px; top: 50%; transform: translateY(-50%);
    color: var(--color-text-muted);
    pointer-events: none;
}
.structures-page .search-wrap .icon-trailing {
    position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
    background: none; border: none; padding: 2px; cursor: pointer;
    color: var(--color-text-muted); display: flex;
}
.structures-page .search-wrap .icon-trailing:hover { color: var(--color-text); }
.structures-page .structures-toolbar .search {
    width: 100%; height: 36px;
    padding: 0 32px 0 36px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
    outline: none;
}
.structures-page .structures-toolbar .search:focus {
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}

.structures-page .structures-toolbar select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    height: 36px;
    padding: 0 32px 0 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}
.structures-page .structures-toolbar select:focus {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}

/* ---- AppSelect: custom dropdown (filter selects) ---------------------- */
/* Native <option> popups are OS-drawn on Windows and ignore CSS, so the
   filters use a custom component whose menu we render + style ourselves. */
.structures-page .structures-toolbar .app-select {
    position: relative;
    /* Filters now own their own row and stretch to span the full width. */
    flex: 1 1 0; min-width: 150px;
}
.structures-page .structures-toolbar .app-select.filter-status { min-width: 188px; }
.structures-page .structures-toolbar .app-select.filter-collection { min-width: 220px; }
.structures-page .structures-toolbar .app-select.filter-coordinator { min-width: 190px; }
.structures-page .structures-toolbar .app-select.filter-year { min-width: 120px; }
.structures-page .structures-toolbar .app-select.filter-collection-status { min-width: 210px; }

.structures-page .app-select-trigger {
    display: inline-flex; align-items: center; gap: 8px;
    width: 100%; height: 36px;
    padding: 0 10px 0 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    background: var(--color-bg);
    font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
    cursor: pointer;
    transition: border-color 0.12s ease, box-shadow 0.12s ease;
}
.structures-page .app-select.open .app-select-trigger,
.structures-page .app-select-trigger:focus-visible {
    outline: none;
    border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}
.structures-page .app-select-value {
    flex: 1 1 auto; min-width: 0;
    text-align: left;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.structures-page .app-select-value.is-placeholder { color: var(--color-text-muted); }
.structures-page .app-select-chevron {
    flex: 0 0 auto; display: inline-flex;
    color: var(--color-text-muted);
    transition: transform 0.15s ease;
}
.structures-page .app-select.open .app-select-chevron { transform: rotate(180deg); }

/* Backdrop sits behind the menu, above everything else, to catch outside
   clicks. Transparent — purely a click target. */
.structures-page .app-select-backdrop {
    position: fixed; inset: 0; z-index: 40;
}
.structures-page .app-select-menu {
    position: absolute; z-index: 41;
    top: calc(100% + 6px); left: 0;
    min-width: 100%; max-width: 320px;
    max-height: 340px; overflow: hidden;
    display: flex; flex-direction: column;
    background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: var(--radius-md);
    box-shadow: 0 8px 28px rgba(0, 0, 0, 0.14), 0 2px 6px rgba(0, 0, 0, 0.08);
}
/* Search row pinned at the top; the option list scrolls beneath it. */
.structures-page .app-select-search {
    flex: 0 0 auto;
    display: flex; align-items: center; gap: 6px;
    padding: 8px 10px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text-muted);
}
.structures-page .app-select-search-input {
    flex: 1 1 auto; min-width: 0;
    border: none; outline: none; background: none;
    font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
}
.structures-page .app-select-search-input::placeholder { color: var(--color-text-muted); }
.structures-page .app-select-options {
    flex: 1 1 auto; overflow-y: auto;
    padding: 4px;
}
.structures-page .app-select-empty {
    padding: 12px 10px; text-align: center;
    font-size: 13px; color: var(--color-text-muted);
}
.structures-page .app-select-option {
    display: flex; align-items: center; justify-content: space-between; gap: 10px;
    width: 100%;
    padding: 8px 10px;
    border: none; border-radius: var(--radius-sm);
    background: none;
    font-family: var(--font-ui); font-size: 14px; color: var(--color-text);
    text-align: left; cursor: pointer; white-space: nowrap;
}
.structures-page .app-select-option .app-select-option-label {
    overflow: hidden; text-overflow: ellipsis;
}
.structures-page .app-select-option:hover { background: var(--color-bg-elevated); }
.structures-page .app-select-option.selected { font-weight: 600; }
.structures-page .app-select-option-check { flex: 0 0 auto; color: var(--color-accent); display: inline-flex; }

.structures-page .structures-toolbar .reset-btn {
    display: inline-flex; align-items: center; gap: 4px;
    background: transparent; border: none; padding: 6px 8px;
    font-family: var(--font-ui); font-size: 14px;
    color: var(--color-text-muted); cursor: pointer;
}
.structures-page .structures-toolbar .reset-btn:hover {
    background: transparent;
    color: var(--color-text);
}

/* ---- Grid ------------------------------------------------------------- */
.structures-page .structures-grid { width: 100%; border-collapse: collapse; }

/* QuickGrid renders the table inside its own wrapper element. Push the
   whole grid block down so the column headers don't collide with the
   filter toolbar above. Belt-and-suspenders with the toolbar's
   margin-bottom (some browsers collapse margins through QuickGrid's
   wrapper). */
.structures-page .structures-grid { margin-top: 0; }

.structures-page .structures-grid th {
    text-align: left;
    padding: 10px 12px;
    font-size: 11px; font-weight: 500;
    color: var(--color-text-muted);
    text-transform: uppercase; letter-spacing: 0.04em;
    border-bottom: 1px solid var(--color-border);
    background: transparent;
}
/* Sortable columns (Status, Structure ID) render their title inside a
   <button>, which otherwise picks up default button chrome (its own font,
   color, padding). Inherit the th typography so they read identically to the
   plain-text headers, while keeping the click-to-sort + sort-arrow behavior. */
.structures-page .structures-grid th button {
    display: inline-flex; align-items: center; gap: 4px;
    background: none; border: none; padding: 0; margin: 0;
    font: inherit; color: inherit;
    text-transform: inherit; letter-spacing: inherit;
    cursor: pointer;
}
.structures-page .structures-grid th button:hover { color: var(--color-text); }
.structures-page .structures-grid td {
    padding: 12px;
    font-size: 14px;
    border-bottom: 1px solid var(--color-border);
    color: var(--color-text);
}
.structures-page .structures-grid tbody tr {
    cursor: pointer;
}
/* No divider under the final row — keeps a short, filtered list from looking
   like it trails off into empty bordered rows. */
.structures-page .structures-grid tbody tr:last-child td {
    border-bottom: none;
}
.structures-page .structures-grid tbody tr:hover {
    background: var(--color-bg-elevated);
}
.structures-page .structures-grid tbody tr:hover .row-chevron {
    color: var(--color-text);
}

/* Cell-content click wrapper. Fills the cell so the whole row reads as one
   click target without needing OnRowClick (QuickGrid 9.0 doesn't expose it). */
.structures-page .row-click-wrap {
    display: block;
    margin: -12px; padding: 12px;
}

/* Structure ID cell — keeps anchor semantics for keyboard users. */
.structures-page .structures-grid .row-link {
    font-size: 15px; font-weight: 600;
    color: var(--color-text); text-decoration: none; cursor: pointer;
}
.structures-page .structures-grid .row-link:hover { text-decoration: underline; }

/* Length column reads as a number; tabular figures keep decimals aligned. */
.structures-page .structures-grid .length-cell { font-variant-numeric: tabular-nums; }

/* Long free-text cells truncate with an ellipsis; the full value is available
   via the cell's title tooltip. Under table-layout:fixed the cap is the
   column's own width, not a fixed 220px — the column no longer grows to fit. */
.structures-page .structures-grid .cell-truncate {
    display: inline-block; max-width: 100%;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    vertical-align: bottom;
}

/* Trailing chevron cell — visual affordance only. */
.structures-page .structures-grid .chevron-col {
    width: 28px; text-align: right;
}
.structures-page .row-chevron {
    color: var(--color-text-muted);
    display: inline-flex; align-items: center;
    transition: color 0.12s ease;
}

/* Status dot + label. */
.structures-page .status-row {
    display: inline-flex; align-items: center; gap: 8px;
    color: var(--color-text);
}
.structures-page .status-dot {
    width: 8px; height: 8px; border-radius: 50%;
    background: #c7c7cc;
    flex: 0 0 auto;
}
.structures-page .status-dot.dot-approved   { background: #30b0c7; }
.structures-page .status-dot.dot-submitted  { background: #0a84ff; }
.structures-page .status-dot.dot-pendingreview { background: #0a84ff; }
.structures-page .status-dot.dot-completed  { background: #34c759; }
.structures-page .status-dot.dot-inreview   { background: #ff9f0a; }
.structures-page .status-dot.dot-inprogress { background: #ffb300; }
.structures-page .status-dot.dot-pending    { background: #8e8e93; }

/* Inline editable status (ADO #5485): dot + compact dropdown in the cell. */
.structures-page .status-cell {
    display: inline-flex; align-items: center; gap: 8px;
}
.structures-page .status-select {
    appearance: none; -webkit-appearance: none; -moz-appearance: none;
    height: 28px;
    padding: 0 26px 0 8px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg);
    font-family: var(--font-ui); font-size: 13px; color: var(--color-text);
    cursor: pointer;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%236e6e73' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat; background-position: right 8px center;
}
.structures-page .status-select:focus  {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10,132,255,0.18);
}

/* Selected row highlight. Every cell wraps its content in .row-click-wrap, so
   marking them all .selected paints the full row. */
.structures-page .structures-grid tbody tr:has(.row-click-wrap.selected) {
    background: rgba(10,132,255,0.08);
}
.structures-page .structures-grid tbody tr:has(.row-click-wrap.selected) .row-chevron {
    color: var(--color-accent);
}

/* Action buttons grouped + hugged to the right of the toolbar. inline-grid
   with grid-auto-columns:1fr makes both buttons equal width (sized to the
   wider label); the small gap keeps them as a tight pair. */
.structures-page .structures-toolbar .toolbar-actions {
    margin-left: auto;
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    gap: 8px;
}
.structures-page .structures-toolbar .toolbar-actions > .save-btn {
    width: 100%; height: 36px; padding: 0 14px; font-size: 14px;
    justify-content: center;
    /* Keep labels (esp. "Generate Back-Calc Lengths") on a single line. */
    white-space: nowrap;
}
.structures-page .structures-toolbar .toolbar-actions > .save-btn > span {
    white-space: nowrap;
}
.structures-page .status-save-error { color: #d93b3b; font-size: 13px; margin: -4px 0 8px; }

/* ---- Toggle switch (iOS-style pill) ---------------------------------- */
.switch {
    display: inline-flex; align-items: center; gap: 8px;
    cursor: pointer; white-space: nowrap; flex: 0 0 auto;
    font-size: 13px; color: var(--color-text); user-select: none;
}
.switch input { position: absolute; opacity: 0; width: 0; height: 0; }
.switch .switch-track {
    position: relative; flex: 0 0 auto;
    width: 38px; height: 22px; border-radius: 999px;
    background: #d1d1d6; transition: background 0.18s ease;
}
.switch .switch-thumb {
    position: absolute; top: 2px; left: 2px;
    width: 18px; height: 18px; border-radius: 50%;
    background: #fff; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.28);
    transition: transform 0.18s ease;
}
.switch input:checked + .switch-track { background: var(--color-accent); }
.switch input:checked + .switch-track .switch-thumb { transform: translateX(16px); }
.switch input:focus-visible + .switch-track {
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.25);
}
.switch .switch-label { color: var(--color-text-muted); }
.switch input:checked ~ .switch-label { color: var(--color-text); }

/* ---- Footer ----------------------------------------------------------- */
.structures-page .structures-footer {
    display: flex; align-items: center; justify-content: space-between;
    gap: 12px;
    margin-top: 12px;
    padding: 9px 14px;
    background: var(--color-bg-elevated);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    font-size: 13px; color: var(--color-text-muted);
}
.structures-page .structures-footer .footer-count strong {
    color: var(--color-text); font-weight: 600;
    font-variant-numeric: tabular-nums;
}
.structures-page .structures-footer .footer-clear,
.structures-page .scope-empty .footer-clear {
    display: inline-flex; align-items: center; gap: 6px;
    height: 28px; padding: 0 12px;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-ui); font-size: 13px; cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease;
}
.structures-page .structures-footer .footer-clear:hover,
.structures-page .scope-empty .footer-clear:hover {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.structures-page .structures-footer .footer-clear:active,
.structures-page .scope-empty .footer-clear:active {
    transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.structures-page .structures-footer .footer-clear:focus-visible,
.structures-page .scope-empty .footer-clear:focus-visible {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}

/* ---- Column widths: fixed layout --------------------------------------- */
/* The grid was table-layout:auto, which derives every column's width from the
   25 rows currently rendered — so loading a different page re-measured against
   different content and the columns visibly jumped. Measured examples: the
   status cell ranges 62px ("Pending") to 176px ("Pending Review" + LEGACY
   badge), and Gear swung 58px between Legacy ("Gill-Experimental Mesh") and
   non-Legacy ("Electrofishing") pages.
   Pinning individual columns was whack-a-mole — any column can shift on any
   page — and a min-width wide enough for the badge added dead whitespace to
   the far commoner non-Legacy view. Fixed layout takes data out of the
   calculation entirely: widths are a constant share of the container, so
   nothing moves when a page loads. Overflow ellipsizes with a title tooltip,
   the pattern Collection Purpose and Coordinator already used.
   Widths are explicit pixels, not percentages. Percentages have to be sized
   against the whole table, but each cell also spends 24px on padding — twelve
   columns lose 288px that way — so percentages generous enough to fit the
   viewport crushed the content ("2025" needed 35px in a 23px box). These
   numbers come from measuring the widest real value per column and adding the
   padding back. The table keeps width:100% so it fills a wide viewport, plus a
   min-width so a narrow one scrolls .grid-scroll horizontally instead of
   squeezing columns below what their content needs. Both paths stay
   content-independent, so neither reintroduces the shifting. */
.structures-page .structures-grid {
    table-layout: fixed; width: 100%; min-width: 1316px;
}

.structures-page .structures-grid .status-col      { width: 166px; } /* "Completed" + LEGACY badge */
.structures-page .structures-grid .ident-col       { width: 90px; }
.structures-page .structures-grid .type-col        { width: 136px; } /* "Otolith (Lapillus)" */
.structures-page .structures-grid .species-col     { width: 128px; } /* "White Crappie"; hybrids up to 37 chars truncate */
.structures-page .structures-grid .waterbody-col   { width: 142px; } /* "GRAND RIVER (L)" */
.structures-page .structures-grid .purpose-col     { width: 150px; } /* free text — truncates */
.structures-page .structures-grid .coordinator-col { width: 110px; } /* truncates */
.structures-page .structures-grid .year-col        { width: 66px; }
.structures-page .structures-grid .sampledate-col  { width: 112px; }
.structures-page .structures-grid .gear-col        { width: 120px; } /* "Electrofishing" is 80% of rows */
.structures-page .structures-grid .length-cell     { width: 96px; }
.structures-page .structures-grid .chevron-col     { width: 36px; }

/* Under fixed layout a cell must clip its own overflow, or long values spill
   into the neighbouring column instead of widening it. */
.structures-page .structures-grid tbody td .row-click-wrap {
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

/* ---- Legacy badge ------------------------------------------------------ */
/* Legacy rows are historical records (no image, not ageable) and make up the
   large majority of the view. The badge marks them without recoloring the
   status dot, which now carries real signal for these rows (many are genuinely
   Completed with a backfilled age). Muted on purpose — it should read as
   metadata, not as a status. */
.structures-page .legacy-badge {
    display: inline-flex; align-items: center;
    margin-left: 8px; padding: 1px 6px;
    border: 1px solid var(--color-border); border-radius: 999px;
    background: var(--color-bg-elevated);
    color: var(--color-text-muted);
    font-size: 10px; font-weight: 600; letter-spacing: 0.03em;
    text-transform: uppercase; white-space: nowrap;
}

/* ---- Paginator -------------------------------------------------------- */
/* QuickGrid's own .paginator styles ship as a scoped-CSS bundle, and _Host.cshtml
   loads only this file — so <Paginator> arrives completely unstyled and every
   rule below is load-bearing, not a tweak. Matches the toolbar idiom: elevated
   surface, subtle lift on hover (this app has no global button:hover color
   change), tabular numerals so the page counter doesn't jitter. */
.structures-page .structures-footer .footer-actions {
    display: flex; align-items: center; gap: 12px;
}
/* Actual QuickGrid 9.0 markup (verified in the DOM):
   .paginator > .summary + nav > button.go-first, button.go-previous,
   div.pagination-text, button.go-next, button.go-last */
.structures-page .paginator {
    display: flex; align-items: center;
    font-size: 13px; color: var(--color-text-muted);
}
.structures-page .paginator .summary:empty { display: none; }
.structures-page .paginator nav {
    display: flex; align-items: center; gap: 6px;
}
/* The nav buttons render empty — QuickGrid draws the arrows from its own
   stylesheet, which is absent here, so supply glyphs via ::before. */
.structures-page .paginator button {
    display: inline-flex; align-items: center; justify-content: center;
    width: 28px; height: 28px; padding: 0;
    border: 1px solid var(--color-border); border-radius: var(--radius-sm);
    background: var(--color-bg); color: var(--color-text);
    font-family: var(--font-ui); font-size: 13px; line-height: 1; cursor: pointer;
    transition: transform 0.12s ease, box-shadow 0.12s ease, opacity 0.12s ease;
}
.structures-page .paginator button.go-first::before    { content: "«"; }
.structures-page .paginator button.go-previous::before { content: "‹"; }
.structures-page .paginator button.go-next::before     { content: "›"; }

/* "Go to last page" is deliberately removed. The grid sorts on SampleDate —
   CAST(tblRun.TimeBegin AS date), a computed expression across the view's FULL
   OUTER JOIN chain, so no index can support it. SQL therefore sorts all ~82k
   rows and discards the offset, and cost grows with depth: offset 40,000 took
   24s and the last page (offset ~82,487) hit the 30s command timeout and
   returned a 500. First/prev/next are all fine — offset 0 is the fast case.
   display:none also drops it from the accessibility tree, so it isn't merely
   invisible-but-clickable. QuickGrid's Paginator exposes no parameter to omit
   an individual control, so this is the seam available. */
.structures-page .paginator button.go-last { display: none; }
.structures-page .paginator button:hover:not(:disabled) {
    transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}
.structures-page .paginator button:active:not(:disabled) {
    transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
}
.structures-page .paginator button:disabled {
    opacity: 0.35; cursor: default;
}
.structures-page .paginator button:focus-visible {
    outline: none; border-color: var(--color-accent);
    box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.18);
}
.structures-page .paginator .pagination-text {
    margin: 0 4px;
    font-variant-numeric: tabular-nums; white-space: nowrap;
}
.structures-page .paginator .pagination-text strong {
    color: var(--color-text); font-weight: 600;
}

.structures-page .loading,
.structures-page .error {
    padding: 48px 0; text-align: center;
    font-size: 14px; color: var(--color-text-muted);
}
.structures-page .error { color: #d93b3b; }

/* ---- end Structures v2 ============================================== */

.loading, .error { padding: 1rem; }
.error { color: #b53b3b; }

.canvas-host h2 .status-chip {
    margin-left: 0.5rem;
    vertical-align: middle;
}

.back-link {
    margin-left: 0.75rem;
    color: #1c3d9c;
    text-decoration: none;
    font-size: 0.85rem;
}
.back-link:hover { text-decoration: underline; }

.image-loader {
    display: flex; align-items: center; gap: 0.75rem;
    margin-bottom: 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #f3f6f9;
    border: 1px dashed #c4d2e0;
    border-radius: 4px;
}
.image-loader input[type="file"],
.image-loader .hidden-file-input { display: none; }
.image-loader .file-pick-btn {
    display: inline-block;
    padding: 4px 12px;
    background: #1c3d9c; color: white;
    border-radius: 4px;
    font-size: 0.85rem;
    cursor: pointer;
}
.image-loader .file-pick-btn:hover { background: #14306d; }
.image-loader .loaded-image-label {
    font-size: 0.85rem;
    color: #52606d;
}
.image-loader .loaded-image-label code {
    background: #e4e7eb; padding: 1px 6px; border-radius: 3px;
}

/* ---- Image gallery (v1.4, ADO #5435) ----------------------------------- */

.image-gallery {
    margin: 0 0 0.75rem;
    padding: 0.5rem 0.75rem;
    background: #fafbfc;
    border: 1px solid #e4e7eb;
    border-radius: 4px;
}
.image-gallery .gallery-label {
    font-size: 0.8rem; color: #52606d; font-weight: 600;
    margin-bottom: 0.4rem;
}
.image-gallery .gallery-strip {
    display: flex; gap: 0.5rem; flex-wrap: wrap;
}
.gallery-tile {
    width: 120px;
    border: 2px solid transparent;
    border-radius: 4px;
    overflow: hidden;
    background: #fff;
    cursor: pointer;
    transition: border-color 120ms, transform 120ms;
    display: flex; flex-direction: column;
}
.gallery-tile:hover { border-color: #b4c1d4; transform: translateY(-1px); }
.gallery-tile.selected { border-color: #1c3d9c; box-shadow: 0 0 0 1px #1c3d9c inset; }
.gallery-tile img {
    width: 100%; height: 80px; object-fit: cover;
    background: #0a0e14;
    display: block;
}
.gallery-tile .gallery-meta {
    padding: 4px 6px;
    display: flex; flex-direction: column; gap: 2px;
    font-size: 0.75rem;
}
.gallery-tile .primary-tag {
    color: #b8860b; font-weight: 600;
}
.gallery-tile .filename {
    color: #3e4c59; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.gallery-tile .gallery-actions {
    display: flex; gap: 4px; margin-top: 2px;
}
.gallery-tile .set-primary-btn,
.gallery-tile .delete-btn {
    padding: 2px 6px;
    background: white;
    border-radius: 3px;
    font-size: 0.7rem;
    cursor: pointer;
}
.gallery-tile .set-primary-btn {
    color: #1c3d9c;
    border: 1px solid #1c3d9c;
    flex: 1;
}
.gallery-tile .set-primary-btn:hover { background: #1c3d9c; color: white; }
.gallery-tile .delete-btn {
    color: #b42318;
    border: 1px solid #d8a4a0;
    padding: 2px 6px;
}
.gallery-tile .delete-btn:hover:not([disabled]) { background: #b42318; color: white; border-color: #b42318; }
.gallery-tile .delete-btn:disabled { opacity: 0.6; cursor: wait; }

/* Live next-step prompt above the canvas. JS writes to the textContent
   directly after every click so the user always knows what's expected. */
.digitize-step-banner {
    margin: 8px 0 10px;
    padding: 7px 12px;
    background: rgba(255, 159, 10, 0.10);
    border: 1px solid rgba(255, 159, 10, 0.30);
    border-radius: var(--radius-md);
    font-size: 13px;
    font-weight: 500;
    color: #8a4a00;
    letter-spacing: 0;
}

/* Empty-state overlay shown when the structure has no image loaded yet. */
.canvas-mount-wrap {
    position: relative;
}
.canvas-empty-overlay {
    position: absolute; inset: 0;
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    background: var(--color-bg-elevated);
    color: var(--color-text);
    border-radius: var(--radius-md);
    pointer-events: none;
    text-align: center;
}
.canvas-empty-overlay p { margin: 4px 0; }
.canvas-empty-overlay p:first-child { font-size: 15px; font-weight: 600; color: var(--color-text); }
.canvas-empty-overlay .hint { font-size: 13px; color: var(--color-text-muted); }

.calibration-banner {
    padding: 0.5rem 0.75rem;
    border-radius: 4px;
    margin-bottom: 0.75rem;
    font-size: 0.9rem;
}
.calibration-banner.warn {
    background: #fff8e1;
    border: 1px solid #f0c419;
    color: #6b5400;
}
.calibration-banner.ok {
    background: #e6f6e6;
    border: 1px solid #5cb85c;
    color: #2d6b2d;
}

section {
    background: white;
    border: 1px solid #e4e7eb;
    border-radius: 6px;
    padding: 1.25rem 1.5rem;
    margin-bottom: 1.5rem;
}

section h2 {
    margin-top: 0;
    font-size: 1.1rem;
}

button {
    background: #1c3d9c;
    color: white;
    border: 0;
    padding: 0.5rem 1rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.95rem;
}

button[disabled] { background: #9aa5b1; cursor: not-allowed; }

.ok    { color: #1f7a3a; }
.error { color: #b42318; }
.note  { color: #52606d; font-size: 0.85rem; }

pre {
    background: #1f2933;
    color: #e4e7eb;
    padding: 0.75rem;
    border-radius: 4px;
    overflow-x: auto;
    font-size: 0.8rem;
}

code {
    background: #f0f4f8;
    padding: 1px 6px;
    border-radius: 3px;
    font-size: 0.85em;
}

.canvas-mount {
    border: 1px solid #b4becc;
    border-radius: 4px;
    margin: 0.75rem 0;
    background: #0a0e14;
    height: 600px;
    overflow: hidden;
    position: relative;
}

/* --- canvas toolbar --- */
.canvas-toolbar {
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.5rem;
    margin: 0.75rem 0;
}

.mode-buttons, .action-buttons {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.mode-btn {
    background: #e4e7eb;
    color: #1f2933;
    border: 1px solid #cbd2d9;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
    cursor: pointer;
    font-size: 0.9rem;
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}
.mode-btn:hover { background: #cbd2d9; }
.mode-btn.active {
    background: #1c3d9c;
    color: white;
    border-color: #1c3d9c;
}
.mode-btn .dot {
    display: inline-block;
    width: 10px; height: 10px;
    border-radius: 50%;
    border: 1px solid rgba(0,0,0,0.25);
}

.action-buttons button {
    background: #52606d;
    font-size: 0.85rem;
    padding: 0.4rem 0.75rem;
}
.action-buttons button:hover { background: #3e4c59; }

.canvas-status p {
    margin: 0.5rem 0 0;
    font-size: 0.9rem;
    color: #52606d;
}

/* --- params grid (digitization + back-calc forms) --- */
.params-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: 0.75rem 1rem;
    margin: 0.5rem 0 1rem;
}
.params-grid label {
    display: flex;
    flex-direction: column;
    font-size: 0.85rem;
    color: #3e4c59;
    gap: 0.25rem;
}
.params-grid label.checkbox {
    flex-direction: row;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.9rem;
    color: #1f2933;
}
.params-grid input[type="number"],
.params-grid input[type="text"],
.params-grid select {
    padding: 0.4rem 0.5rem;
    border: 1px solid #cbd2d9;
    border-radius: 4px;
    font-size: 0.95rem;
    font-family: inherit;
}

/* --- captured record table --- */
.record-summary {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 0.5rem 1.25rem;
    margin: 0.75rem 0;
    font-size: 0.9rem;
}
.record-summary .lbl {
    color: #7b8794;
    margin-right: 0.4rem;
}

.annuli-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.85rem;
    margin-top: 0.5rem;
}
.annuli-table th, .annuli-table td {
    text-align: left;
    padding: 0.35rem 0.6rem;
    border-bottom: 1px solid #e4e7eb;
}
.annuli-table th {
    background: #f5f7fa;
    color: #3e4c59;
    font-weight: 600;
}

/* Back-calc results — mirrors the legacy desktop "Back calculated lengths" grid. */
.backcalc-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.9rem;
    margin: 0.75rem 0 0.5rem;
}
.backcalc-table th, .backcalc-table td {
    text-align: left;
    padding: 0.4rem 0.7rem;
    border-bottom: 1px solid #e4e7eb;
}
.backcalc-table th {
    background: #eef2f7;
    color: #1f2933;
    font-weight: 600;
    font-size: 0.85rem;
}
.backcalc-table tbody tr:nth-child(even) { background: #fafbfc; }
.backcalc-table td:last-child { font-weight: 600; color: #1c3d9c; }
.bc-meta { margin: 0.5rem 0 0; font-size: 0.85rem; }
.bc-units { margin: 0.25rem 0 0; font-size: 0.8rem; color: #7b8794; }

#blazor-error-ui {
    background: #fde2e2;
    color: #7d1e1e;
    border-top: 1px solid #f1b7b7;
    bottom: 0;
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

#blazor-error-ui .dismiss {
    cursor: pointer;
    position: absolute;
    right: 0.75rem;
    top: 0.5rem;
}

/* Reading save (Stage 1 #5481) */
.save-actions { display: flex; gap: 6px; }
.save-btn { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px;
  border-radius: 7px; border: 1px solid var(--color-border, #d8dade); font-size: 12px;
  font-weight: 500; cursor: pointer; background: #fff;
  font-family: var(--font-ui);
  transition: transform 0.12s ease, box-shadow 0.12s ease; }
/* Hover lift + shadow (keep the base color; no color-shift on hover). */
.save-btn:not(:disabled):hover { transform: translateY(-1px); box-shadow: 0 4px 12px rgba(0, 0, 0, 0.14); }
.save-btn:not(:disabled):active { transform: translateY(0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12); }
/* Draft = outline variant of Submit: blue text + blue border, white fill. */
.save-btn.draft { color: var(--color-accent, #0a84ff); border-color: var(--color-accent, #0a84ff); background: #fff; }
.save-btn.submit { background: var(--color-accent, #0a84ff); color: #fff; border-color: transparent; }
/* Complete = green, matching the Completed status dot (#34c759). */
.save-btn.complete { background: #34c759; color: #fff; border-color: transparent; }
/* View = neutral readable pill (bare .save-btn has no text color → was unreadable). */
.save-btn.view { background: var(--color-bg-elevated, #f2f2f7); color: var(--color-text, #1d1d1f); border-color: var(--color-border, #d8dade); }
.save-btn:disabled { opacity: .45; cursor: not-allowed; }
.save-ok { color: #1a7f37; }
.saved-reading-banner { color: var(--color-text-muted, #5b6066); }

/* Multi-reader comparison overlay (#5486) */
.compare-toolbar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 6px; }
.compare-toolbar .note { margin: 0; }
/* Comparison toggle: readable label at all sizes; icon + text baseline-aligned. */
.compare-btn { font-size: 13px; font-weight: 600; padding: 6px 12px; }
.compare-btn span { line-height: 1; white-space: nowrap; }
.compare-btn svg { flex: 0 0 auto; }
.swatch-cell { width: 1%; white-space: nowrap; }
.reader-swatch-label { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.reader-swatch-label input:disabled { cursor: not-allowed; }
.reader-swatch {
    display: inline-block; width: 12px; height: 12px; border-radius: 3px;
    border: 1px solid rgba(0,0,0,.25); vertical-align: middle; flex: 0 0 auto;
}
.viewing-detail .panel-header h4 { display: inline-flex; align-items: center; gap: 6px; margin: 0; }

/* Back-calc wizard (Stage 2 #5481) */
.backcalc-wizard .bc-step { padding: 12px 4px; display: flex; flex-direction: column; gap: 12px; }
.bc-filters { display: flex; gap: 16px; flex-wrap: wrap; }
.bc-actions { display: flex; gap: 8px; align-items: center; }
.bc-count { font-size: 14px; }

/* Editable age in the Captured panel (Stage 2 #5481, relocated from back-calc) */
.age-edit { display: inline-flex; align-items: center; gap: 8px; }
.age-input { width: 56px; }

/* Back-calc modal (Stage 2 #5481) */
.modal-overlay {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.35);
  display: flex; align-items: flex-start; justify-content: center;
  padding: 6vh 16px;
}
.modal-card {
  background: var(--color-bg, #fff);
  border-radius: var(--radius-lg, 14px);
  box-shadow: 0 16px 48px rgba(0,0,0,0.22);
  width: min(900px, 96vw);
  max-height: 84vh;
  display: flex; flex-direction: column;
  overflow: hidden;
}
.modal-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 18px;
  border-bottom: 1px solid var(--color-border, #e5e5ea);
}
.modal-head h2 {
  margin: 0; font-size: 16px; font-weight: 600;
  display: inline-flex; align-items: center; gap: 8px;
  color: var(--color-text, #1d1d1f);
}
.modal-close {
  border: none; background: transparent; cursor: pointer;
  color: var(--color-text-muted, #6e6e73);
  display: inline-flex; padding: 4px; border-radius: var(--radius-sm, 6px);
}
.modal-close:hover { background: var(--color-bg-elevated, #f5f5f7); }
.modal-body {
  padding: 16px 18px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 12px;
}

/* Confirmation modals (Accept as Final). Narrower than the back-calc workflow modal —
   this is a two-sentence decision, not a workspace. */
.confirm-modal { width: min(480px, 94vw); }
.confirm-modal .modal-body p { margin: 0; line-height: 1.5; }
.modal-foot {
  display: flex; justify-content: flex-end; gap: 8px;
  padding: 12px 18px 16px;
}
/* Filters as a responsive grid: each field is label-over-control, controls
   fill their column so long waterbody names fit; Generate sits at the end. */
.backcalc-modal .bc-filters {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px 14px;
  align-items: end;
}
.backcalc-modal .inline-input {
  display: flex; flex-direction: column; align-items: stretch; gap: 4px;
  font-size: 12px; color: var(--color-text-muted, #6e6e73);
}
.backcalc-modal .inline-input > select,
.backcalc-modal .inline-input > input[type="number"] {
  width: 100%; max-width: none;
  height: 32px;
}
.backcalc-modal .bc-filters > .save-btn {
  justify-self: start; white-space: nowrap; height: 32px; align-self: end;
}
.modal-grid { max-height: 42vh; overflow: auto; }

/* Back-calc modal: step bar + calculate row (Stage 2 #5481) */
.bc-stepbar { display: flex; align-items: center; gap: 8px; color: var(--color-text-muted, #6e6e73); }
.bc-stepchip {
  font-size: 12px; font-weight: 500; padding: 3px 10px; border-radius: 999px;
  background: var(--color-bg-elevated, #f5f5f7); color: var(--color-text-muted, #6e6e73);
  border: 1px solid var(--color-border, #e5e5ea);
}
.bc-stepchip.active { background: var(--color-accent, #0a84ff); color: #fff; border-color: transparent; }
.bc-stepchip.done { color: var(--color-text, #1d1d1f); }
.bc-calc-row { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.bc-calc-row .model-hint { margin: 0; flex: 1 1 200px; }