/* BreastDetection mockup — shell styles.
 * Ported from the ht-ui breastai app (topbar.css, Dashboard.css, ExamViewer.css,
 * MammoFullscreen.css) so the mockup reads as the same commercial line.
 * Colour, spacing, radii and type all come from assets/tokens.css.
 */

*,
*::before,
*::after {
  box-sizing: border-box;
}

html,
body {
  height: 100%;
  margin: 0;
  background: var(--surface-bg);
  color: var(--text-primary);
  font: 400 0.9375rem / 1.4 var(--ht-font-sans);
  -webkit-font-smoothing: antialiased;
}

a {
  color: inherit;
  text-decoration: none;
}

/* ============================================================
   Topbar
   ============================================================ */
.tb {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 24px;
  padding: 0 20px;
  height: var(--header-height);
  border-bottom: 1px solid var(--border-default);
  background: rgba(10, 13, 18, 0.85);
  backdrop-filter: blur(12px);
  position: sticky;
  top: 0;
  z-index: 10;
}

.tb-left {
  display: flex;
  align-items: center;
  gap: 8px;
}

.tb-brand {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tb-brand-tile {
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: var(--brand-accent);
  color: #fff;
  border-radius: 6px;
  font: 700 13px var(--ht-font-sans);
}

.tb-brand-text {
  display: flex;
  flex-direction: column;
  line-height: 1;
}

.tb-brand-name {
  font: 700 14px var(--ht-font-sans);
  color: var(--text-primary);
  letter-spacing: -0.005em;
}

.tb-brand-org {
  font: 500 9px var(--ht-font-sans);
  color: var(--text-muted);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  margin-top: 3px;
}

.tb-nav {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-left: 8px;
}

.tb-nav a {
  height: 30px;
  padding: 0 12px;
  display: inline-flex;
  align-items: center;
  color: var(--text-secondary);
  font: 500 13px var(--ht-font-sans);
  border-radius: 6px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}

.tb-nav a:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.tb-nav a.active {
  color: var(--text-primary);
  background: var(--surface-elevated);
  position: relative;
}

.tb-nav a.active::after {
  content: '';
  position: absolute;
  left: 12px;
  right: 12px;
  bottom: -2px;
  height: 2px;
  background: var(--brand-accent);
  border-radius: 2px;
}

.tb-center {
  justify-self: center;
  min-width: 0;
}

.tb-cmd {
  height: 30px;
  width: 280px;
  max-width: 100%;
  padding: 0 10px 0 12px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 6px;
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px var(--ht-font-sans);
  color: var(--text-muted);
  cursor: pointer;
}

.tb-cmd:hover {
  border-color: var(--text-muted);
  background: var(--surface-elevated);
  color: var(--text-secondary);
}

.tb-cmd kbd {
  margin-left: auto;
  padding: 2px 6px;
  border-radius: 4px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  font: 500 10px var(--ht-font-mono);
  color: var(--text-secondary);
}

.tb-actions {
  display: flex;
  align-items: center;
  gap: 6px;
}

.tb-icon-btn {
  width: 32px;
  height: 32px;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  border-radius: 6px;
  cursor: pointer;
  display: grid;
  place-items: center;
  position: relative;
  font-size: 15px;
}

.tb-icon-btn:hover {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.tb-icon-btn .badge-dot {
  position: absolute;
  top: 7px;
  right: 7px;
  width: 6px;
  height: 6px;
  border-radius: 9999px;
  background: var(--brand-accent);
  box-shadow: 0 0 0 2px var(--surface-bg);
}

.tb-user {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 32px;
  padding: 0 10px 0 4px;
  margin-left: 4px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 9999px;
  cursor: pointer;
}

.tb-user:hover {
  border-color: var(--text-muted);
}

.tb-user-av {
  width: 24px;
  height: 24px;
  border-radius: 9999px;
  background: linear-gradient(135deg, var(--brand-accent), #d63864);
  color: #fff;
  font: 600 10px var(--ht-font-sans);
  display: grid;
  place-items: center;
}

.tb-user-em {
  font: 500 12px var(--ht-font-sans);
  color: var(--text-secondary);
}

@media (max-width: 860px) {
  .tb-cmd kbd { display: none; }
}

@media (max-width: 680px) {
  .tb-center { display: none; }
  .tb-user-em { display: none; }
}

/* ============================================================
   Exam viewer
   ============================================================ */
/* The read fills the viewport: images never require scrolling, the rail scrolls
   on its own. Mirrors the breastai .exam-shell height calc. */
.exam-shell {
  display: flex;
  flex-direction: column;
  height: calc(100vh - var(--header-height));
  padding: 16px 24px 16px;
  gap: 12px;
  max-width: 1680px;
  margin: 0 auto;
  overflow: hidden;
}

.exam-bar {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 24px;
  align-items: center;
  padding: 16px 20px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
}

.exam-ghost-btn {
  height: 32px;
  padding: 0 12px;
  background: transparent;
  border: 1px solid var(--border-default);
  border-radius: 8px;
  color: var(--text-secondary);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 500 12px var(--ht-font-sans);
}

.exam-ghost-btn:hover {
  border-color: var(--text-muted);
  color: var(--text-primary);
}

.exam-bar-title { display: flex; flex-direction: column; gap: 4px; }
.exam-bar-id { font: 700 16px var(--ht-font-mono); color: var(--text-primary); }
.exam-bar-sub { font: 400 11px var(--ht-font-sans); color: var(--text-muted); letter-spacing: 0.04em; }

.exam-bar-meta {
  display: flex;
  gap: 24px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.exam-bar-meta > div { display: flex; flex-direction: column; gap: 2px; min-width: 0; }

.exam-bar-meta strong {
  font: 600 10px var(--ht-font-sans);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.exam-bar-meta span { font: 400 12px var(--ht-font-mono); color: var(--text-secondary); }

.exam-main {
  display: grid;
  grid-template-columns: 1fr 320px;
  gap: 16px;
  align-items: stretch;
  flex: 1 1 auto;
  min-height: 0;
}

/* Below the two-column breakpoint the fixed viewport height stops making sense:
   let the page scroll normally so nothing is clipped. */
@media (max-width: 64rem) {
  .exam-main { grid-template-columns: 1fr; }
  .exam-shell { height: auto; overflow: visible; }
  .exam-grid { grid-auto-rows: auto; }
  .mammo-tile { aspect-ratio: 5 / 6; }
  .exam-metrics { overflow: visible; }
}

.exam-viewport {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
}

/* Two rows: what is on screen (layout, priors, detail), then how the findings
   are drawn (overlay, score, emphasis). Six groups on one line do not fit. */
.exam-tools {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 14px;
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 10px;
}

.tools-row {
  display: flex;
  align-items: center;
  gap: 16px;
  flex-wrap: wrap;
}

.tools-row + .tools-row {
  padding-top: 8px;
  border-top: 1px solid var(--border-default);
}

.tools-label {
  font: 600 10px var(--ht-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.tools-group { display: inline-flex; align-items: center; gap: 8px; }

/* Segmented control — ported from Dashboard.css .rail-presets / Segmented primitive. */
.seg {
  display: inline-flex;
  gap: 4px;
  padding: 2px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.seg button {
  height: 28px;
  padding: 0 11px;
  border: none;
  background: transparent;
  color: var(--text-muted);
  border-radius: 6px;
  font: 500 12px var(--ht-font-sans);
  cursor: pointer;
  white-space: nowrap;
}

.seg button:hover { color: var(--text-secondary); }

.seg button.active {
  background: var(--surface-elevated);
  color: var(--text-primary);
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: 9999px;
  font: 600 11px var(--ht-font-sans);
  white-space: nowrap;
}

.chip.ok { background: var(--status-clear-soft); color: var(--status-clear); }
.chip.warn { background: var(--status-warning-soft); color: var(--status-warning); }
.chip.err { background: var(--status-danger-soft); color: var(--status-danger); }
.chip.neutral { background: var(--status-neutral-soft); color: var(--status-neutral); }

.legend {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.legend li {
  display: flex;
  align-items: center;
  gap: 8px;
  font: 400 12px var(--ht-font-sans);
  color: var(--text-secondary);
}

.legend .dot {
  width: 8px;
  height: 8px;
  border-radius: 9999px;
  flex-shrink: 0;
}

.legend .n {
  margin-left: auto;
  font: 500 12px var(--ht-font-mono);
  color: var(--text-primary);
}

.model-info {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font: 400 11px var(--ht-font-mono);
  color: var(--text-muted);
}

.model-info div { display: flex; justify-content: space-between; gap: 12px; }
.model-info strong { color: var(--text-secondary); font-weight: 500; }

.slider { display: inline-flex; align-items: center; gap: 8px; min-width: 180px; }

.slider input[type='range'] {
  flex: 1 1 auto;
  accent-color: var(--brand-accent);
}

.slider > span { font: 500 11px var(--ht-font-sans); color: var(--text-muted); white-space: nowrap; }
.slider > span strong { color: var(--text-primary); font-weight: 700; font-family: var(--ht-font-mono); margin-left: 2px; }

.exam-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  grid-auto-rows: 1fr;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
  min-height: 0;
}

.mammo-tile {
  position: relative;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: 10px;
  overflow: hidden;
  cursor: pointer;
  transition: border-color 0.15s;
}

.mammo-tile:hover { border-color: var(--brand-accent); }

.mammo-tile.is-active {
  border-color: var(--text-primary);
  box-shadow: 0 0 0 2px rgba(255, 255, 255, 0.12);
}

/* Tiles share the viewport height; the image is contained, never cropped. */
.mammo-tile { min-height: 0; }

/* The frame is exactly the image box: square, letterboxed inside the tile by
   the tile's own centring. Overlay percentages are relative to this frame, so
   they only line up with the anatomy if the frame matches the image exactly. */
.mammo-tile {
  display: grid;
  place-items: center;
}

.mammo-frame {
  position: relative;
  aspect-ratio: 3328 / 4096;   /* the DICOM frame — overlay % map onto it */
  height: 100%;
  width: auto;
  max-width: 100%;
  max-height: 100%;
  overflow: hidden;
}

.mammo-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  user-select: none;
}

/* No mirroring: in native DICOM orientation the right breast already carries
   its chest wall on the right and the left breast on the left, so the two
   chest walls meet in the middle of the reading area. */

/* The heatmap PNG is an opaque colormap on black — `screen` drops the black. */
.mammo-heat {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: fill;
  mix-blend-mode: screen;
  pointer-events: none;
}

/* Overlay marks are positioned in % of the frame, so they track the image. */
.mark {
  position: absolute;
  border-radius: 3px;
  pointer-events: none;
}

.mark-badge {
  position: absolute;
  transform: translateY(-115%);
  padding: 1px 6px;
  border-radius: 3px;
  border: 1px solid;
  background: rgba(10, 13, 18, 0.88);
  font: 700 10px var(--ht-font-mono);
  white-space: nowrap;
  pointer-events: none;
}

.mark-svg {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
}

.mammo-tile-label {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 2;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  color: var(--text-primary);
  border-radius: 4px;
  font: 700 11px var(--ht-font-mono);
  letter-spacing: 0.04em;
}

.mammo-tile-badge {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 2;
  padding: 3px 8px;
  background: rgba(0, 0, 0, 0.55);
  border-radius: 4px;
  font: 600 10px var(--ht-font-mono);
}

.exam-metrics {
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-width: 0;
  min-height: 0;
  overflow-y: auto;
  scrollbar-width: thin;
  scrollbar-color: var(--border-default) transparent;
}

.metrics-block {
  background: var(--surface-card);
  border: 1px solid var(--border-default);
  border-radius: 12px;
  padding: 16px;
}

.metrics-label {
  font: 600 10px var(--ht-font-sans);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--text-muted);
  margin-bottom: 8px;
}

.metrics-verdict {
  font: 600 13px var(--ht-font-sans);
  padding: 4px 10px;
  border-radius: 9999px;
  display: inline-block;
  margin-bottom: 14px;
}

.metrics-verdict.verdict-clear { background: var(--status-clear-soft); color: var(--status-clear); }
.metrics-verdict.verdict-warning { background: var(--status-warning-soft); color: var(--status-warning); }
.metrics-verdict.verdict-danger { background: var(--status-danger-soft); color: var(--status-danger); }

/* Case-level BI-RADS assessment. */
.birads {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 12px;
  margin-bottom: 12px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.birads-cat {
  font: 700 15px var(--ht-font-mono);
  color: var(--text-primary);
  white-space: nowrap;
}

.birads-desc {
  font: 400 11px var(--ht-font-sans);
  color: var(--text-muted);
  line-height: 1.35;
}

/* Per-finding BI-RADS suspicion category. */
.finding-birads {
  display: inline-block;
  margin-top: 4px;
  padding: 1px 7px;
  border-radius: 4px;
  background: var(--surface-elevated);
  border: 1px solid var(--border-default);
  font: 600 10px var(--ht-font-mono);
  color: var(--text-secondary);
  letter-spacing: 0.03em;
}

.side-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
  margin-bottom: 12px;
}

.side-cell {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
}

.side-cell span {
  font: 500 10px var(--ht-font-sans);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-muted);
}

.side-cell strong { font: 600 16px var(--ht-font-mono); color: var(--text-primary); }

/* Findings list */
.finding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 10px;
  background: var(--surface-bg);
  border: 1px solid var(--border-default);
  border-radius: 8px;
  cursor: pointer;
  margin-bottom: 8px;
  transition: border-color 0.15s, background 0.15s;
}

.finding:hover { border-color: var(--text-muted); }

.finding.is-active {
  border-color: var(--brand-accent);
  background: var(--brand-accent-soft);
}

.finding-idx {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font: 700 11px var(--ht-font-mono);
  flex-shrink: 0;
}

.finding-body { flex: 1; min-width: 0; }
.finding-title { font: 500 13px var(--ht-font-sans); color: var(--text-primary); }
.finding-meta { font: 400 11px var(--ht-font-mono); color: var(--text-muted); }
.finding-score { font: 700 14px var(--ht-font-mono); flex-shrink: 0; }

.score-bar {
  position: relative;
  height: 6px;
  background: var(--surface-bg);
  border-radius: 3px;
  margin-top: 6px;
}

.score-bar-fill {
  position: absolute;
  inset: 0;
  background: linear-gradient(90deg, var(--status-clear), var(--status-warning) 55%, var(--status-danger));
  border-radius: 3px;
}

.exam-disclaimer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  background: rgba(255, 182, 72, 0.08);
  border: 1px solid var(--status-warning);
  border-radius: 8px;
  color: var(--status-warning);
  font: 500 11px var(--ht-font-sans);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

/* Placeholder tile shown when a prior acquisition does not exist for the study. */
.prior-empty {
  display: grid;
  place-items: center;
  background: var(--surface-card);
  border-style: dashed;
}

.prior-empty-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
  align-items: center;
  text-align: center;
  padding: 16px;
}

.prior-empty-body strong {
  font: 600 13px var(--ht-font-sans);
  color: var(--text-secondary);
}

.prior-empty-body span {
  font: 400 11px var(--ht-font-sans);
  color: var(--text-muted);
}

/* ROI zoom layer: a magnified background centred on the lesion. */
.roi-bg {
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
}

/* A placeholder value shown in the UI that is not model output. */
.is-placeholder { border-style: dashed !important; }

.load-error {
  grid-column: 1 / -1;
  display: grid;
  place-items: center;
  padding: 24px;
  border: 1px dashed var(--status-danger);
  border-radius: 10px;
  color: var(--status-danger);
  font: 500 13px var(--ht-font-sans);
}

/* Heatmap inside a ROI crop: same background maths as the image beneath it. */
.roi-heat {
  mix-blend-mode: screen;
  pointer-events: none;
}