/* annotator/static/app.css - Fluxe Data (standalone internal tool) */
:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --border: #e3e6eb;
  --text: #1c2230;
  --muted: #6b7385;
  --accent: #ff1b6d;
  --ok: #1f9d62;
  --warn: #c98a0b;
  --bad: #d64545;
  --radius: 8px;
  --series-a: #2f6fb3;
  --series-b: #1f9d62;
  --series-c: #c98a0b;
}
* { box-sizing: border-box; }
html, body { height: 100%; margin: 0; overflow: hidden; }
body { font-family: Inter, system-ui, sans-serif; font-size: 14px; color: var(--text); background: var(--bg); }
h1 { font-size: 18px; font-weight: 600; margin: 0 0 2px; }
.muted { color: var(--muted); font-size: 13px; }
[hidden] { display: none !important; }

.topbar { height: 52px; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 0 16px; background: var(--surface); border-bottom: 1px solid var(--border); }
.top-right { display: flex; align-items: center; gap: 8px; flex: none; margin-left: auto; }
.top-right .muted { white-space: nowrap; }
.pill { font-size: 12px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--muted); max-width: 40vw; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pill.ok { color: var(--ok); border-color: var(--ok); }
.pill.warn { color: var(--warn); border-color: var(--warn); }
.pill.bad { color: var(--bad); border-color: var(--bad); }
.activity { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; color: var(--text); white-space: nowrap; }
.spin { width: 13px; height: 13px; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.save-state { font-size: 12px; color: var(--ok); white-space: nowrap; }
.save-state.busy { color: var(--muted); }
.save-state.bad { color: var(--bad); }

.brand { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; padding: 0; cursor: pointer; font: inherit; color: var(--muted); white-space: nowrap; flex: none; }
.brand img { height: 24px; width: auto; display: block; }
.main-nav { display: flex; gap: 2px; margin-left: 16px; flex: 0 1 auto; min-width: 0; }
.nav-item { font: inherit; display: inline-flex; align-items: center; gap: 6px; background: none; border: 0; border-radius: 6px; padding: 7px 10px; color: var(--muted); cursor: pointer; white-space: nowrap; flex: none; }
.nav-item:hover { background: var(--bg); color: var(--text); }
.nav-item.on { background: #fff0f5; color: var(--accent); font-weight: 500; }
.main { height: calc(100% - 52px); min-width: 0; overflow: auto; padding: 20px 24px; }
.btn { display: inline-flex; align-items: center; gap: 6px; }
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; flex-wrap: wrap; }
.title-row { display: flex; align-items: flex-start; gap: 12px; }
h2 { font-size: 15px; font-weight: 600; margin: 0; }
.continue-card { font: inherit; width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; margin-bottom: 16px; background: #fff0f5; border: 1px solid var(--accent); border-radius: var(--radius); color: var(--text); cursor: pointer; }
.continue-card svg { color: var(--accent); }
.continue-text { display: flex; flex-direction: column; }
.batch-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 12px; }
.batch-card { font: inherit; color: var(--text); display: flex; flex-direction: column; gap: 6px; text-align: left; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.batch-card:hover, .task-card:hover { border-color: var(--accent); }
.card-title { display: flex; align-items: center; gap: 8px; }
.card-line { display: grid; grid-template-columns: 130px 1fr 84px; gap: 8px; align-items: center; font-size: 13px; }
.card-line .num { text-align: right; font-variant-numeric: tabular-nums; }
.task-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 12px; margin-bottom: 14px; }
.task-card { font: inherit; color: var(--text); display: flex; align-items: center; gap: 12px; text-align: left; padding: 14px 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); cursor: pointer; }
.task-icon svg { width: 24px; height: 24px; color: var(--accent); }
.task-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.task-go { font-weight: 500; color: var(--accent); white-space: nowrap; }
.more-options { margin: 10px 0; font-size: 13px; }
.more-options summary { cursor: pointer; color: var(--muted); }
.more-body { display: flex; flex-direction: column; gap: 10px; padding: 10px 12px; margin-top: 6px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.more-row { display: flex; align-items: center; gap: 10px; }
.tool:hover { border-color: #c7ccd6; }
.tool.on { background: #fff0f5; color: var(--accent); border-color: var(--accent); }
.empty { color: var(--muted); padding: 48px; text-align: center; }

input[type=text], select { font: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 6px 8px; background: var(--surface); color: var(--text); min-width: 0; }

.btn, .icon-btn { font: inherit; border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; cursor: pointer; }
.btn { padding: 6px 12px; white-space: nowrap; }
.btn.small { padding: 3px 9px; font-size: 13px; }
.icon-btn { width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; padding: 0; flex: none; }
.btn:hover, .icon-btn:hover { border-color: #c7ccd6; }
.btn.primary, .icon-btn.primary { background: var(--accent); border-color: var(--accent); color: #fff; }
.btn.on { background: var(--ok); border-color: var(--ok); color: #fff; }
.icon-btn.on { color: var(--accent); border-color: var(--accent); }
.icon-btn.danger:hover { color: var(--bad); border-color: var(--bad); }
.icon-btn.small { width: 26px; height: 26px; }
.icon-btn.sel-ok { color: var(--ok); border-color: var(--ok); }
.icon-btn.sel-bad { color: var(--bad); border-color: var(--bad); }
button:disabled { opacity: .5; cursor: default; }
svg { width: 16px; height: 16px; stroke: currentColor; fill: none; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.actions { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.check { display: inline-flex; gap: 6px; align-items: center; color: var(--muted); font-size: 13px; }

.batch-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 10px; flex-wrap: wrap; }
.bar { flex: 1; height: 6px; background: var(--border); border-radius: 999px; overflow: hidden; }
.bar span { display: block; height: 100%; width: 0; background: var(--ok); }
.intake { display: flex; flex-direction: column; gap: 6px; }
.dropzone { display: flex; gap: 10px; align-items: center; justify-content: center; flex-wrap: wrap; padding: 18px; border: 1.5px dashed #c7ccd6; border-radius: var(--radius); background: var(--surface); color: var(--muted); }
.dropzone.big { padding: 72px 24px; font-size: 15px; }
.import-path { display: flex; gap: 6px; }
.import-path input { flex: 1; font-size: 13px; }
.intake-options { display: flex; align-items: center; gap: 12px; margin: 8px 0; }
.upload-msg { flex: 1; min-width: 0; }
.vehicle { margin-bottom: 14px; content-visibility: auto; contain-intrinsic-size: 200px; }
.vehicle-head { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.vehicle-plate { font-weight: 600; background: none; border: 0; border-bottom: 1px dashed transparent; padding: 0; cursor: text; font: inherit; font-weight: 600; color: var(--text); }
.vehicle-plate:hover { border-bottom-color: #c7ccd6; }
.grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.tile { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; cursor: pointer; }
.tile:hover { border-color: #c7ccd6; }
.tile.excluded { opacity: .5; }
.tile img { width: 100%; height: 100px; object-fit: cover; display: block; background: #eceef2; }
.tile .meta { padding: 5px 7px; display: flex; flex-direction: column; gap: 3px; }
.tile .fname { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.tile .marks { display: flex; gap: 4px; flex-wrap: wrap; }
.badge { font-size: 11px; padding: 1px 6px; border-radius: 999px; background: var(--bg); color: var(--muted); white-space: nowrap; }
.badge.done { color: var(--warn); }
.badge.reviewed { color: var(--ok); }
.badge.failed { color: var(--bad); }

.catalog-vehicle { width: 100%; }
.mode-tabs { display: flex; border: 1px solid var(--border); border-radius: 6px; overflow: hidden; flex: none; }
.tab.active { background: #fff0f5; color: var(--accent); font-weight: 500; }
.stage { flex: 1; min-height: 0; background: #111418; border-radius: var(--radius); position: relative; overflow: hidden; }
.film-row { flex: none; display: flex; align-items: center; gap: 6px; }
.film-arrow { flex: none; width: 28px; height: 56px; display: flex; align-items: center; justify-content: center; padding: 0; }
.film-arrow:disabled { opacity: .35; cursor: default; }
.filmstrip { flex: 1; min-width: 0; display: flex; gap: 4px; overflow: hidden; height: 56px; scroll-behavior: smooth; }
.film { position: relative; flex: none; width: 84px; height: 56px; border-radius: 4px; overflow: hidden; border: 2px solid transparent; cursor: pointer; background: #eceef2; padding: 0; }
.film img { width: 100%; height: 100%; object-fit: cover; display: block; }
.film.current { border-color: var(--accent); }
.film .tick { position: absolute; right: 2px; bottom: 2px; width: 10px; height: 10px; border-radius: 50%; background: var(--ok); border: 1.5px solid #fff; }

.label-btn .k { flex: none; color: var(--muted); font-size: 11px; min-width: 10px; }
.label-btn .t { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.label-btn:hover { border-color: #c7ccd6; }
.label-btn.on { border-color: var(--accent); background: #fff0f5; color: var(--accent); }
.label-btn.on .k { color: var(--accent); }
.part-picker { margin-bottom: 8px; }
.part-chips, .part-results { display: flex; flex-wrap: wrap; gap: 3px; }
.part-chips { margin-bottom: 4px; }
.part-search { width: 100%; font-size: 13px; padding: 4px 8px; }
.part-results { margin-top: 3px; max-height: 120px; overflow: auto; }
.part-results:empty, .part-chips:empty { display: none; }
.ann.selected { border-color: var(--accent); background: #fff7fa; }
.ann.rejected .ann-main { opacity: .55; text-decoration: line-through; }
.swatch { width: 10px; height: 10px; border-radius: 3px; }
.ann-main { min-width: 0; }
.ann-sub { font-size: 12px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.keys { display: grid; grid-template-columns: 1fr 1fr; gap: 2px 8px; }
kbd { font: inherit; font-size: 11px; padding: 0 4px; border: 1px solid var(--border); border-radius: 3px; background: var(--bg); color: var(--text); }
.work-view:not([data-mode=parts]) .panel-parts, .work-view:not([data-mode=parts]) .keys-parts, .work-view[data-mode=parts] .panel-damages, .work-view[data-mode=parts] .keys-damages { display: none; }

.start { max-width: 560px; margin: 12vh auto 0; text-align: center; }
.start .actions { justify-content: center; margin-top: 16px; }
.btn.big { padding: 10px 20px; font-size: 15px; }
.drop-overlay { position: fixed; inset: 0; z-index: 20; background: rgba(255, 255, 255, .92); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: 500; pointer-events: none; }
.drop-overlay > div { padding: 48px 72px; border: 2px dashed var(--accent); border-radius: var(--radius); background: var(--surface); }
.upload-bar { position: fixed; right: 16px; bottom: 16px; z-index: 15; width: 340px; padding: 10px 12px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 2px 8px rgba(28, 34, 48, .12); font-size: 13px; }
.upload-bar .bar { margin-top: 6px; }
.upload-bar .upload-text { overflow: hidden; text-overflow: ellipsis; }
.account { display: flex; align-items: center; gap: 6px; }
body.login-page { display: flex; align-items: center; justify-content: center; }
.login-card { display: flex; flex-direction: column; gap: 10px; width: 320px; padding: 24px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); }
.login-card input { font: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }

.tour { position: fixed; left: 16px; bottom: 16px; z-index: 30; width: 370px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(28, 34, 48, .18); padding: 14px 16px; max-height: calc(100vh - 32px); overflow: auto; }
.tour.right { left: auto; right: 16px; }
.tour.up { bottom: auto; top: 180px; }
.tour h2 { font-size: 15px; font-weight: 600; margin: 8px 0 4px; }
.tour p { margin: 0 0 8px; font-size: 13px; line-height: 1.45; }
.tour-progress { display: flex; justify-content: space-between; align-items: center; font-size: 12px; color: var(--muted); }
.tour-skip { font: inherit; font-size: 12px; background: none; border: 0; color: var(--muted); cursor: pointer; padding: 0; text-decoration: underline; }
.tour-bar { height: 4px; background: var(--border); border-radius: 999px; overflow: hidden; margin-top: 6px; }
.tour-bar span { display: block; height: 100%; background: var(--accent); }
.tour-wait { font-size: 13px; font-weight: 500; color: var(--accent); margin-bottom: 8px; }
.tour-actions { display: flex; justify-content: flex-end; gap: 6px; }
.tour-target { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
.spark { display: flex; gap: 2px; align-items: flex-end; height: 26px; width: 150px; }
.spark i { flex: 1; background: #2f6fb3; border-radius: 2px 2px 0 0; min-height: 1px; }
.person-row { cursor: pointer; }
.person-row:hover td { background: var(--bg); }

/* Dataset quality: one hue for magnitude, severity as light to dark of the same hue */
.report-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 12px; }
.tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 12px; }
.stat { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px 12px; }
.stat b { display: block; font-size: 22px; font-weight: 600; }
.report-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; margin-bottom: 12px; }
.report-card h2 { font-size: 14px; font-weight: 600; margin: 0 0 8px; }
.report-cols { display: grid; grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); gap: 12px; }
.report-cols .report-card { margin-bottom: 0; }
.report-cols { margin-bottom: 12px; }
.warning-row { display: flex; gap: 8px; align-items: flex-start; padding: 4px 0; font-size: 13px; }
.warning-row svg { flex: none; margin-top: 2px; }
.warning-row.critical svg { color: var(--bad); }
.warning-row.warning svg { color: var(--warn); }
.warning-row.info svg { color: var(--muted); }
.report-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.report-table th { text-align: left; font-weight: 500; color: var(--muted); padding: 4px 8px 4px 0; border-bottom: 1px solid var(--border); }
.report-table td { padding: 5px 8px 5px 0; border-bottom: 1px solid var(--bg); white-space: nowrap; }
.report-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.report-table .wide { width: 45%; }
.hbar { display: flex; gap: 2px; height: 10px; align-items: stretch; }
.hbar i { display: block; min-width: 2px; background: #2f6fb3; }
.hbar i:last-child { border-radius: 0 4px 4px 0; }
.hbar .s0 { background: #a9cbe8; }
.hbar .s1 { background: #6ba3d6; }
.hbar .s2 { background: #2f6fb3; }
.hbar .s3 { background: #173f6b; }
.hbar .none { background: var(--border); }
.bar-row { display: grid; grid-template-columns: 130px 1fr 44px; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.bar-row .num { text-align: right; font-variant-numeric: tabular-nums; }
.bar-row .name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; color: var(--muted); margin-bottom: 6px; }
.legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 4px; vertical-align: -1px; }
.daily { display: flex; gap: 2px; align-items: flex-end; height: 70px; }
.daily div { flex: 1; background: #2f6fb3; border-radius: 4px 4px 0 0; min-height: 1px; }
.daily-axis { display: flex; justify-content: space-between; font-size: 11px; color: var(--muted); margin-top: 3px; }

.toast { position: fixed; left: 50%; bottom: 84px; transform: translateX(-50%); background: #1c2230; color: #fff; padding: 8px 14px; border-radius: 6px; font-size: 13px; max-width: 70vw; z-index: 10; }
.toast.bad { background: var(--bad); }

@media (max-width: 1100px) {
  .top-right .muted { display: none; }
  .ann-panel { width: 260px; }
}

/* Quota */
.quota-pill { font: inherit; font-size: 12px; background: none; cursor: pointer; }
.quota-banner { height: 38px; display: flex; align-items: center; justify-content: center; gap: 8px; background: var(--surface); border-bottom: 1px solid var(--warn); padding: 0 16px; font-size: 13px; }
.quota-banner[hidden] { display: none; }
body:has(.quota-banner:not([hidden])) .main { height: calc(100% - 90px); }
.quota-banner svg, .email-gate svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.quota-cell { display: flex; align-items: center; gap: 8px; min-width: 160px; }
.quota-cell .bar { flex: 1; }
.status-reached, .status-on_track { color: var(--ok); }
.status-behind { color: var(--warn); font-weight: 500; }
.status-none { color: var(--muted); }

/* Who made each mask */
.history-list { list-style: none; margin: 0; padding: 0; max-height: 170px; overflow: auto; }
.history-list li { padding: 3px 0; border-bottom: 1px solid var(--bg); line-height: 1.35; }
.history-list .when { color: var(--muted); display: block; }

/* Adding names */
.add-name-form { display: flex; gap: 4px; margin-bottom: 8px; }
.add-name-form input { flex: 1; font-size: 12px; padding: 4px 6px; }
.part-3d { display: inline-flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 12px; color: var(--muted); }
.part-3d svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.part-new { color: var(--accent); }

/* Activity */
.activity-page .report-head select { min-width: 130px; }
.day-head { font-size: 13px; font-weight: 600; margin: 14px 0 4px; }
.event { display: grid; grid-template-columns: 64px 150px 1fr auto; gap: 10px; align-items: center; padding: 6px 10px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 3px; font: inherit; color: inherit; text-align: left; width: 100%; }
button.event { cursor: pointer; }
button.event:hover { border-color: #c7ccd6; }
.event .time { color: var(--muted); font-variant-numeric: tabular-nums; }
.event .who { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.event .where { color: var(--muted); font-size: 12px; display: flex; align-items: center; gap: 6px; max-width: 340px; min-width: 0; overflow: hidden; }
.event .where > span { min-width: 0; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.event .where img { width: 44px; height: 30px; object-fit: cover; border-radius: 3px; flex: none; }
.more-row-center { text-align: center; margin: 12px 0; }

/* Users */
.users-table input[type=text], .users-table input[type=number], .users-table input[type=password], .users-table select, .user-form input, .user-form select, .email-gate input { font: inherit; border: 1px solid var(--border); border-radius: 6px; padding: 4px 8px; background: var(--surface); color: var(--text); min-width: 0; }
.users-table input[type=number] { width: 84px; text-align: right; }
.users-table input.missing { border-color: var(--warn); }
.user-form { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.user-form label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.row-actions { display: flex; gap: 4px; justify-content: flex-end; align-items: center; }
.email-gate { position: fixed; inset: 0; z-index: 40; background: rgba(28, 34, 48, .45); display: flex; align-items: center; justify-content: center; }
.email-gate form { background: var(--surface); border-radius: var(--radius); padding: 18px 20px; width: 400px; display: flex; flex-direction: column; gap: 10px; }
.email-gate h2 { margin: 0; font-size: 16px; font-weight: 600; }
.email-gate p { margin: 0; color: var(--muted); font-size: 13px; }

/* Catalog */
.catalog { height: 100%; display: flex; flex-direction: column; min-height: 0; }
.catalog-tabs { display: flex; gap: 4px; }
.catalog-body { flex: 1; min-height: 0; display: grid; grid-template-columns: 320px 1fr; gap: 12px; }
.catalog-side { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 10px; display: flex; flex-direction: column; min-height: 0; gap: 8px; }
.catalog-list { flex: 1; min-height: 0; overflow: auto; }
.catalog-section { font-size: 12px; color: var(--muted); margin: 10px 0 3px; font-weight: 500; }
.catalog-item { font: inherit; display: flex; justify-content: space-between; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 4px 6px; cursor: pointer; color: var(--text); }
.catalog-item:hover { background: var(--bg); }
.catalog-item.on { background: #fff0f5; color: var(--accent); font-weight: 500; }
.catalog-item .num { color: var(--muted); font-variant-numeric: tabular-nums; font-weight: 400; }
.catalog-main { min-height: 0; display: flex; flex-direction: column; gap: 10px; overflow: auto; }
.catalog-stage { position: relative; flex: 1; min-height: 340px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
.catalog-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; cursor: grab; }
.catalog-stage-msg { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--muted); padding: 24px; text-align: center; }
.catalog-tools { position: absolute; right: 10px; top: 10px; display: flex; gap: 8px; align-items: center; z-index: 1; font-size: 13px; }
.catalog-help { position: absolute; left: 12px; bottom: 8px; font-size: 12px; color: var(--muted); pointer-events: none; }
.catalog-detail { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 12px 14px; flex: none; }
.catalog-detail h2 { font-size: 15px; font-weight: 600; margin: 0 0 2px; }
.catalog-detail p { margin: 4px 0; }
.detail-head { display: flex; justify-content: space-between; gap: 12px; align-items: flex-start; }
.examples { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin-top: 8px; }
.example { position: relative; padding: 0; border: 1px solid var(--border); border-radius: 5px; overflow: hidden; cursor: pointer; background: #eceef2; aspect-ratio: 4 / 3; }
.example img, .example svg { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }
.example img { object-fit: fill; }
.example svg polygon { fill: rgba(255, 27, 109, .3); stroke: var(--accent); stroke-width: 1.5px; vector-effect: non-scaling-stroke; }
.main.catalog-open { overflow: hidden; }

/* Notices */
.notif-wrap { position: relative; }
#notif-btn { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; position: relative; }
#notif-btn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.notif-count { position: absolute; top: -5px; right: -5px; min-width: 16px; height: 16px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 16px; text-align: center; padding: 0 4px; }
.notif-panel .notif-item { white-space: normal; overflow-wrap: anywhere; }
.notif-panel { position: absolute; right: 0; top: 36px; width: 400px; max-width: calc(100vw - 24px); max-height: 60vh; overflow: hidden auto; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(28, 34, 48, .18); z-index: 25; padding: 6px; }
.notif-item { font: inherit; display: block; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 6px 8px; cursor: pointer; color: var(--text); line-height: 1.35; font-size: 13px; }
.notif-item:hover { background: var(--bg); }
.notif-item.unread { background: #fff0f5; }
.notif-item .when { display: block; color: var(--muted); font-size: 12px; }

/* Flags and comments */
.nav-count { min-width: 16px; height: 16px; border-radius: 999px; background: var(--accent); color: #fff; font-size: 11px; line-height: 16px; text-align: center; padding: 0 4px; }
.nav-count[hidden] { display: none; }
#ai-status, .quota-pill { flex: none; }
.job-sub { font-size: 11px; font-weight: 400; }
.job-label { display: inline-flex; align-items: baseline; gap: .3em; }
/* Portuguese says it the other way round: "Danos de carroçaria". */
:lang(pt) .job-label { flex-direction: row-reverse; justify-content: flex-end; }
.flag-form { display: flex; flex-direction: column; gap: 6px; border: 1px solid var(--warn); border-radius: 6px; padding: 8px; margin-top: 6px; flex: none; }
.flag-form[hidden] { display: none; }
.flag-form select, .flag-form textarea, .comment-form textarea { font: inherit; font-size: 12px; width: 100%; border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; background: var(--surface); color: var(--text); resize: vertical; }
.comment-list li { padding: 4px 0; border-bottom: 1px solid var(--bg); line-height: 1.35; position: relative; padding-right: 22px; }
.comment-list .when { color: var(--muted); }
.comment-list .text { white-space: pre-wrap; overflow-wrap: anywhere; }
.comment-list .mention { color: var(--accent); font-weight: 500; }
.comment-list button { position: absolute; right: 0; top: 4px; }
.comment-form { position: relative; display: flex; flex-direction: column; gap: 4px; }
.mention-menu { position: absolute; left: 0; right: 0; bottom: 100%; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; box-shadow: 0 4px 18px rgba(28, 34, 48, .18); z-index: 5; max-height: 150px; overflow: auto; }
.mention-menu[hidden] { display: none; }
.mention-menu button { font: inherit; display: block; width: 100%; text-align: left; background: none; border: 0; padding: 4px 8px; cursor: pointer; color: var(--text); }
.mention-menu button:hover { background: var(--bg); }
.flags-card .event { border-color: var(--warn); }
.flags-card .event.mine { background: #fff0f5; }

/* AI queue */
.queue-controls { display: flex; flex-wrap: wrap; gap: 12px; align-items: center; margin: 8px 0; }
.queue-kind { display: flex; flex-direction: column; gap: 6px; }
.queue-kind .bar { flex: none; display: block; height: 8px; }
.queue-numbers { display: flex; justify-content: space-between; gap: 12px; font-size: 13px; flex-wrap: wrap; }
.queue-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); }
.queue-note.bad { color: var(--bad); }

/* Mask menu + hiding masks */
.mask-menu { position: fixed; z-index: 35; min-width: 230px; }
.mask-menu, .more-menu { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(28, 34, 48, .18); padding: 4px; }
.mask-menu-title { padding: 5px 9px; font-size: 12px; color: var(--muted); border-bottom: 1px solid var(--bg); margin-bottom: 3px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mask-menu button, .more-menu button { font: inherit; font-size: 13px; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 6px 9px; cursor: pointer; color: var(--text); }
.mask-menu button:hover, .more-menu button:hover { background: var(--bg); }
.mask-menu button.danger, .more-menu button.danger { color: var(--bad); }
.mask-menu svg, .more-menu svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.mask-menu kbd, .more-menu kbd { margin-left: auto; }
.mask-visibility { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 12px; padding: 4px 6px; margin-bottom: 4px; border: 1px solid var(--border); border-radius: 6px; flex: none; }
.mask-visibility[hidden] { display: none; }
.ann.hidden-mask { opacity: .5; }

/* See the password */
.password-field { position: relative; display: flex; }
.password-field input { flex: 1; min-width: 0; padding-right: 42px; }
.password-field .icon-btn { position: absolute; right: 5px; top: 50%; transform: translateY(-50%); width: 32px; height: 32px; display: flex; align-items: center; justify-content: center; padding: 0; border: 0; background: none; color: var(--muted); }
.password-field svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }

/* Rotating a mask */

/* Photo history: a tree of job, then mask, then what happened */
.history-groups { max-height: 320px; overflow: auto; padding-right: 2px; }
.photo-history .history-groups { flex: 1; min-height: 0; max-height: none; }
.history-groups summary { display: flex; align-items: center; gap: 5px; list-style: none; cursor: pointer; padding: 3px 4px; margin: 0; border-radius: 4px; color: var(--text); }
.history-groups summary::-webkit-details-marker { display: none; }
.history-groups summary:hover { background: var(--bg); }
.history-groups summary::before { content: ""; flex: none; width: 6px; height: 6px; border-right: 1.5px solid var(--muted); border-bottom: 1.5px solid var(--muted); transform: rotate(-45deg); transition: transform .1s; margin: 0 3px 0 1px; }
.history-groups details[open] > summary::before { transform: rotate(45deg); }
.history-cat > summary { font-weight: 600; }
.history-cat > .history-mask, .history-cat > .history-list, .history-mask > .history-list { position: relative; margin: 0 0 0 7px; padding: 0 0 0 13px; border-left: 1px solid var(--border); max-height: none; overflow: visible; }
.history-cat > .history-mask::before, .history-groups .history-list > li::before { content: ""; position: absolute; left: 0; width: 10px; border-top: 1px solid var(--border); }
.history-cat > .history-mask::before { top: 13px; }
.history-groups .history-list > li { position: relative; border-bottom: 0; padding: 3px 0; }
.history-groups .history-list > li::before { left: -13px; top: 11px; }
.history-mask > summary { min-width: 0; }
.history-mask .swatch { flex: none; display: inline-block; width: 8px; height: 8px; border-radius: 2px; }
.history-count { color: var(--muted); font-weight: 400; }

/* Language: nothing shows until the texts are ready; Portuguese is longer, so its tight rows take more room */
html.i18n-wait body { visibility: hidden; }
.lang-select { font-size: 12px; padding: 3px 6px; flex: none; }

html[lang^=pt] .type-grid .label-btn .t { white-space: normal; }

/* Header: places first, then only what someone needs at a glance */
.topbar { justify-content: flex-start; }
.nav-badge { font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 999px; background: var(--bg); border: 1px solid var(--border); color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.nav-badge[hidden] { display: none; }
.top-icon { width: 30px; height: 30px; display: flex; align-items: center; justify-content: center; padding: 0; }
.top-icon svg, .account-btn svg, .account-action svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; flex: none; }
.account-wrap { position: relative; }
.account-btn { font: inherit; font-size: 13px; display: flex; align-items: center; gap: 6px; height: 30px; padding: 0 8px; background: var(--surface); border: 1px solid var(--border); border-radius: 6px; color: var(--text); cursor: pointer; }
.account-btn:hover { border-color: #c7ccd6; }
#account-name { max-width: 120px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.account-menu { position: absolute; right: 0; top: 36px; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(28, 34, 48, .18); z-index: 25; padding: 6px; }
.account-menu[hidden] { display: none; }
.account-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 5px 8px; font-size: 13px; color: var(--muted); }
.account-action { font: inherit; font-size: 13px; display: flex; align-items: center; gap: 8px; width: 100%; text-align: left; background: none; border: 0; border-radius: 5px; padding: 6px 8px; cursor: pointer; color: var(--text); }
.account-action:hover { background: var(--bg); }
#ai-status.ok::before { content: ""; display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--ok); margin-right: 5px; vertical-align: 1px; }
/* The word "saved" only matters when it is not true. */
@media (max-width: 1500px) { .save-state:not(.busy):not(.bad) { display: none; } }
/* Narrow: the places keep their icons, with their names as tooltips. */
@media (max-width: 1240px) { .nav-label { display: none; } .nav-item { padding: 7px 8px; } .brand span { display: none; } }
@media (max-width: 860px) { #account-name { display: none; } }

/* Activity: the same tree, one branch per photo */
.activity-tree { max-height: none; overflow: visible; padding: 0; font-size: 13px; }
.activity-photo { background: var(--surface); border: 1px solid var(--border); border-radius: 6px; margin-bottom: 3px; padding: 2px 6px; }
.activity-photo > summary { gap: 8px; padding: 4px; }
.activity-photo > summary img { width: 44px; height: 30px; object-fit: cover; border-radius: 3px; flex: none; }
.activity-photo .photo-name { flex: 1 1 auto; min-width: 0; font-weight: 500; overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.activity-photo .photo-who { flex: 0 1 200px; min-width: 0; color: var(--muted); overflow: hidden; white-space: nowrap; text-overflow: ellipsis; text-align: right; }
.activity-photo .time { flex: none; color: var(--muted); font-variant-numeric: tabular-nums; }
.activity-photo > summary .icon-btn { flex: none; display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; padding: 0; }
.activity-photo > summary .icon-btn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.activity-photo > .history-cat, .activity-photo > .history-list { position: relative; margin: 0 0 4px 12px; padding: 0 0 0 10px; border-left: 1px solid var(--border); }

/* A white vehicle needs something to stand out against. */
.catalog-stage { background: #2f3542; border-color: #2f3542; }
.catalog-help, .catalog-stage-msg, .catalog-tools .check { color: #e3e6eb; }

/* Team and quality: tabs */
.report-tabs { display: flex; flex-wrap: wrap; gap: 2px; margin: 4px 0 14px; border-bottom: 1px solid var(--border); }
.report-tab { font: inherit; background: none; border: 0; border-bottom: 2px solid transparent; padding: 8px 12px; margin-bottom: -1px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.report-tab:hover { color: var(--text); }
.report-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.report-slot:empty { display: none; }
.report-slot > .report-cols, .report-slot > .headline { margin-bottom: 12px; }
.headline { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin-bottom: 12px; }
.headline .stat { white-space: nowrap; overflow: hidden; }
.table-scroll { overflow-x: auto; }
.more-warnings summary { cursor: pointer; font-size: 13px; color: var(--muted); padding: 4px 0; }
.warning-links { display: inline-flex; flex-wrap: wrap; gap: 4px; margin-left: 6px; vertical-align: middle; }
.link-chip { font: inherit; font-size: 12px; background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 1px 8px; color: var(--text); cursor: pointer; }
.link-chip:hover { border-color: var(--accent); color: var(--accent); }
.link-num { font: inherit; background: none; border: 0; padding: 0; color: inherit; cursor: pointer; text-decoration: underline; text-decoration-color: var(--border); text-underline-offset: 2px; font-variant-numeric: tabular-nums; }
.link-num:hover { color: var(--accent); text-decoration-color: var(--accent); }
.heat-cell { background: color-mix(in srgb, var(--series-a) var(--heat, 0%), transparent); text-align: center; }
.report-table.heat td, .report-table.heat th { padding-left: 6px; padding-right: 6px; }
.heat-cell.strong, .heat-cell.strong .link-num { color: var(--surface); text-decoration-color: var(--surface); }
.heat-cell.strong .link-num:hover { color: var(--surface); }
.line-chart { width: 100%; height: auto; display: block; }
.line-chart polyline { fill: none; stroke-width: 1.5; }
.line-chart polyline.series-a { stroke: var(--series-a); }
.line-chart polyline.series-b { stroke: var(--series-b); }
.line-chart polyline.series-c { stroke: var(--series-c); }
.line-chart circle.series-a { fill: var(--series-a); }
.line-chart circle.series-b { fill: var(--series-b); }
.line-chart circle.series-c { fill: var(--series-c); }
.line-chart .axis { stroke: var(--border); }
.line-chart .axis-text { fill: var(--muted); font-size: 10px; }
.hbar-key.series-a { background: var(--series-a); }
.hbar-key.series-b { background: var(--series-b); }
.hbar-key.series-c { background: var(--series-c); }
.histogram { display: flex; gap: 6px; align-items: stretch; height: 130px; margin-bottom: 8px; }
.hist-col { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; font-size: 11px; }
.hist-n, .hist-x { color: var(--muted); font-variant-numeric: tabular-nums; }
.hist-track { flex: 1; width: 100%; display: flex; align-items: flex-end; min-height: 0; }
.hist-bar { display: block; width: 100%; background: var(--series-a); border-radius: 2px 2px 0 0; min-height: 1px; }
.hist-link { display: flex; align-items: flex-end; width: 100%; height: 100%; background: none; border: 0; padding: 0; cursor: pointer; }
.hist-link:hover .hist-bar { background: var(--accent); }
.review-cols { margin: 10px 0; align-items: flex-start; }
.sampling-input { width: 64px; }
.split-form input { width: 64px; }
.split-sub { font-size: 13px; font-weight: 600; margin: 10px 0 4px; }
.split-classes { margin-top: 8px; font-size: 13px; }
.split-classes summary { cursor: pointer; color: var(--muted); }
/* Work lists */
.list-filters { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-bottom: 10px; }
.list-filters select { max-width: 190px; }
.list-grid .grid { margin-bottom: 8px; }
.list-banner { display: flex; align-items: center; gap: 10px; padding: 4px 12px; font-size: 13px; background: var(--surface); border-bottom: 1px solid var(--border); }
.list-banner-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
/* Bulk */
.bulk-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 6px 0 10px; font-size: 13px; }
.bulk-controls { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.bulk-count { font-weight: 500; }
.tile.selected { border-color: var(--accent); box-shadow: inset 0 0 0 2px var(--accent); }
.tile.selected img { opacity: .85; }
.export-reviewed { white-space: nowrap; }
/* Work panel */
.review-state.sent_back { color: var(--bad); }
.review-state.reviewed { color: var(--ok); }
.review-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; align-items: center; }
.review-comment { flex: 1 0 100%; order: 1; }
@media (max-width: 760px) { .headline { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* Work screen: the photo first; the panel scrolls inside itself, never the page */
.main.working { padding: 8px 12px; overflow: hidden; overflow: clip; }
.work-view { height: 100%; min-height: 0; display: flex; flex-direction: column; gap: 6px; overflow: hidden; overflow: clip; }
.work-body { flex: 1; min-height: 0; display: flex; gap: 10px; }
.stage-col { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; gap: 6px; }
.stage-canvas { position: absolute; inset: 0; display: block; width: 100%; height: 100%; cursor: crosshair; touch-action: none; }
.stage-canvas[data-tool=select] { cursor: default; }
.stage-canvas[data-tool=pan], .stage-canvas.can-pan { cursor: grab; }
.stage-canvas.on-vertex { cursor: move; }
.stage-canvas.panning { cursor: grabbing; }
.stage-canvas.on-rotate { cursor: grab; }
.stage-canvas.rotating { cursor: grabbing; }
.stage-msg { position: absolute; inset: auto 0 44px 0; text-align: center; color: #c9ced8; font-size: 13px; pointer-events: none; }

/* Top row: which photo, which job, what next */
.work-head { flex: none; display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(max-content, 1fr); align-items: center; gap: 10px; }
.head-left { display: flex; align-items: center; gap: 8px; min-width: 0; }
.head-right { display: flex; align-items: center; justify-content: flex-end; gap: 6px; }
.work-head .btn, .work-head .icon-btn { height: 30px; }
.work-head .icon-btn { width: 30px; }
.work-head .btn.small { padding: 0 9px; }
.work-title { flex: 1; min-width: 60px; display: flex; align-items: baseline; gap: 8px; }
.filename { min-width: 0; font-size: 13px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.work-meta { flex: none; font-size: 12px; white-space: nowrap; }
.vehicle-group { flex: none; display: flex; align-items: center; height: 30px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); overflow: hidden; }
.vehicle-group:focus-within { border-color: #c7ccd6; }
.vehicle-group input[type=text], .vehicle-group select { height: 100%; border: 0; border-radius: 0; background: none; font-size: 13px; padding: 0 6px; }
.vehicle-group select { border-left: 1px solid var(--border); }
.plate-input { width: 92px; font-weight: 500; }
.vehicle-type { width: 128px; }
.tab { font: inherit; font-size: 13px; border: 0; background: var(--surface); color: var(--muted); padding: 5px 12px; line-height: 18px; cursor: pointer; white-space: nowrap; }
@media (max-width: 1500px) { .work-head { grid-template-columns: minmax(0, 1fr) auto max-content; } }

/* Tool row: all the tools, named, then what acts on the masks */
.tool-row { flex: none; display: flex; align-items: center; justify-content: space-between; gap: 10px; min-width: 0; }
.tools { display: flex; gap: 3px; flex: none; }
.tool { font: inherit; font-size: 12px; display: flex; align-items: center; gap: 4px; height: 30px; padding: 0 7px; white-space: nowrap; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 6px; cursor: pointer; }
.tool svg { width: 15px; height: 15px; }
.tool span:first-child { display: inline-flex; }
.tool-actions { flex: none; display: flex; align-items: center; gap: 4px; }
.tool-actions > .btn, .more-wrap > .btn { height: 30px; padding: 0 8px; font-size: 12px; }
.tool-actions svg { width: 15px; height: 15px; }
.more-wrap { position: relative; display: flex; }
.more-menu { position: absolute; top: calc(100% + 4px); right: 0; z-index: 35; min-width: 210px; }
.more-menu span[data-icon] { display: inline-flex; flex: none; }
/* Narrow: the labels stay, under their icons. */
@media (max-width: 1180px) {
  .tool { flex-direction: column; justify-content: center; gap: 1px; height: 40px; font-size: 11px; padding: 0 5px; }
}

/* The hint over the photo: never takes room, never takes a click on the photo */
.stage-hint { position: absolute; left: 50%; bottom: 8px; transform: translateX(-50%); display: flex; align-items: center; gap: 6px; width: max-content; max-width: calc(100% - 24px); padding: 3px 4px 3px 10px; background: rgba(17, 20, 24, .78); color: #e3e6eb; border-radius: 6px; font-size: 12px; pointer-events: none; }
.stage-hint-text { min-width: 0; }
.hint-btn { flex: none; width: 20px; height: 20px; display: inline-flex; align-items: center; justify-content: center; padding: 0; background: none; border: 0; border-radius: 4px; color: #e3e6eb; cursor: pointer; pointer-events: auto; }
.hint-btn:hover { background: rgba(255, 255, 255, .16); }
.hint-btn svg { width: 13px; height: 13px; }
.hint-show { position: absolute; right: 8px; bottom: 8px; background: rgba(17, 20, 24, .78); }

/* Panel */
.ann-panel { width: 320px; flex: none; min-height: 0; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 0 10px 6px; }
.panel-tabs { flex: none; display: flex; gap: 2px; margin-bottom: 8px; border-bottom: 1px solid var(--border); }
.panel-tab { font: inherit; font-size: 13px; display: inline-flex; align-items: center; gap: 5px; background: none; border: 0; border-bottom: 2px solid transparent; padding: 7px 8px; margin-bottom: -1px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.panel-tab:hover { color: var(--text); }
.panel-tab.on { color: var(--accent); border-bottom-color: var(--accent); font-weight: 500; }
.panel-count { font-size: 11px; line-height: 16px; padding: 0 5px; border-radius: 999px; background: var(--bg); color: var(--muted); font-weight: 400; font-variant-numeric: tabular-nums; }
.panel-count:empty { display: none; }
.panel-count.mine { background: var(--accent); color: #fff; }
.panel-pane { flex: 1; min-height: 0; display: flex; flex-direction: column; font-size: 12px; }
.pane-masks { overflow-y: auto; font-size: 13px; gap: 6px; }
.panel-damages, .panel-parts { flex: none; }
.panel-title { font-size: 12px; font-weight: 500; color: var(--muted); margin: 0 0 3px; }
.type-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; margin-bottom: 6px; max-height: 34vh; overflow-y: auto; }
.severity-row { display: grid; grid-template-columns: 1fr 1fr; gap: 3px; }
.label-btn { font: inherit; font-size: 12px; display: flex; align-items: center; gap: 5px; padding: 3px 6px; border: 1px solid var(--border); border-radius: 5px; background: var(--surface); color: var(--text); cursor: pointer; min-width: 0; text-align: left; }
.add-name-toggle { justify-content: center; color: var(--muted); }
.add-name-toggle svg { width: 14px; height: 14px; }
.add-name-toggle.on { color: var(--accent); border-color: var(--accent); }
.part-picker { margin-bottom: 0; }

/* Suggestions: one row, and a second line only when some are hidden */
.suggestion-level { flex: none; display: flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; font-size: 12px; }
.level-range { flex: none; width: 64px; margin: 0; accent-color: var(--accent); }
.level-word { flex: 1 1 0; min-width: 0; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.suggestion-level .btn.small { flex: none; font-size: 12px; padding: 2px 6px; }
.suggestion-level svg { width: 14px; height: 14px; }
.level-note { flex-basis: 100%; color: var(--muted); }
.level-note:empty { display: none; }
.ann-summary { flex: none; font-size: 12px; }

/* Mask list: two lines a mask; takes what is left and scrolls itself */
.ann-list { list-style: none; margin: 0; padding: 0; overflow: auto; flex: 1 1 120px; min-height: 120px; }
.ann { display: grid; grid-template-columns: 10px minmax(0, 1fr) auto; column-gap: 8px; align-items: center; padding: 3px 4px 3px 6px; border-radius: 6px; border: 1px solid transparent; cursor: pointer; }
.ann:hover { background: var(--bg); }
.ann-name { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 500; min-width: 0; }
.ann-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ann-tag { flex: none; font-size: 11px; font-weight: 400; line-height: 15px; padding: 0 5px; border: 1px dashed var(--warn); border-radius: 999px; color: var(--warn); }
.ann-btns { display: flex; gap: 3px; }
.ann-more { display: none; gap: 3px; }
.ann:hover .ann-more, .ann.selected .ann-more, .ann.hidden-mask .ann-more, .ann:focus-within .ann-more { display: flex; }
.ann-flag { grid-column: 2 / -1; margin-top: 2px; font-size: 12px; color: var(--warn); line-height: 1.35; white-space: normal; overflow-wrap: anywhere; }

/* Below the list, only while in use */
.review-box { flex: none; padding-top: 6px; font-size: 12px; border-top: 1px solid var(--border); }
.flag-form { margin-top: 0; }

/* Comments and history */
.comment-list { list-style: none; flex: 1; min-height: 0; margin: 0 0 6px; padding: 0; overflow: auto; }
.comment-form { flex: none; }

/* Foot: the shortcuts, on demand */
.panel-foot { flex: none; position: relative; display: flex; justify-content: flex-end; padding-top: 4px; }
.panel-foot .icon-btn svg { width: 14px; height: 14px; }
.shortcuts-pop { position: absolute; right: 0; bottom: calc(100% + 2px); z-index: 35; width: 380px; max-height: calc(100vh - 150px); overflow: auto; padding: 8px 10px; font-size: 12px; color: var(--muted); background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); box-shadow: 0 4px 18px rgba(28, 34, 48, .18); }