@import url("./clinical-interpreter-plus.css");

body.is-loading .suite-workspace {
  opacity: 0.72;
}

[data-visibility="teaching"] {
  display: none;
}

body[data-user-mode="teaching"] [data-visibility="teaching"] {
  display: block;
}

.workstation-session-strip,
.preset-toolbar,
.priority-findings-grid,
.diagnostic-output-grid {
  display: grid;
  gap: 12px;
}

.preset-toolbar {
  grid-template-columns: repeat(5, minmax(0, 1fr));
  margin: 0 0 14px;
}

.preset-button {
  min-height: 42px;
  padding: 0 12px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #fbfdff 0%, #edf3f8 100%);
  color: var(--muted);
  font: inherit;
  font-weight: 600;
  box-shadow: var(--shadow);
}

.preset-button.is-active {
  border-color: #6f9fc8;
  background: linear-gradient(180deg, #edf5fc 0%, #dce9f5 100%);
  color: var(--header);
  box-shadow: inset 0 3px 0 #63a7e6, var(--shadow);
}

.is-hidden-preset {
  display: none !important;
}

.workstation-session-strip {
  grid-template-columns: repeat(4, minmax(0, 1fr));
  margin-bottom: 18px;
}

.session-strip-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  border-top: 4px solid #7ea8ca;
  background:
    linear-gradient(180deg, rgba(123, 167, 206, 0.08) 0%, transparent 26%),
    linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
  box-shadow: var(--shadow);
}

.session-strip-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.95rem;
}

.session-strip-card p:last-child {
  margin: 6px 0 0;
}

.startup-banner {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  border-left: 4px solid #79b7ff;
  background: linear-gradient(135deg, #f5f9fe 0%, #e8f0f8 100%);
}

.safety-banner {
  display: grid;
  gap: 10px;
  margin-bottom: 18px;
  border-left: 4px solid #d29b53;
  background: linear-gradient(135deg, #fff8ef 0%, #fff0d6 100%);
}

.case-toolbar {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto;
  gap: 12px;
  align-items: end;
  margin-top: 14px;
}

.case-actions {
  align-self: end;
}

.mode-toggle {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px;
}

.mode-button {
  min-height: 34px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #fbfdff 0%, #edf3f8 100%);
  color: var(--muted);
  font: inherit;
}

.mode-button.is-active {
  background: linear-gradient(180deg, #375d7e 0%, #284766 100%);
  color: #ffffff;
  border-color: #284766;
}

.collapsible-panel {
  padding-top: 0;
}

.module-panel {
  border-top: 4px solid #88add0;
  background:
    linear-gradient(180deg, rgba(121, 167, 208, 0.08) 0%, transparent 22%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.collapsible-title {
  list-style: none;
  cursor: pointer;
  padding: 12px 0;
  font-size: 0.96rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--header);
}

.collapsible-title::-webkit-details-marker {
  display: none;
}

.module-panel-copy {
  margin: 6px 0 12px;
}

.module-panel-copy .helper-text {
  max-width: 74ch;
}

.contra-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.med-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.quality-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.setup-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
}

.contra-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(180deg, rgba(121, 167, 208, 0.06) 0%, transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.contra-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.94rem;
}

.contra-subhead {
  margin: 10px 0 0;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.76rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #48627b;
}

.compact-list {
  margin-top: 8px;
}

.compact-list li {
  margin-bottom: 6px;
}

.med-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(180deg, rgba(114, 158, 198, 0.06) 0%, transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.med-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.94rem;
}

.quality-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(180deg, rgba(109, 155, 197, 0.06) 0%, transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.quality-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.94rem;
}

.setup-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  background:
    linear-gradient(180deg, rgba(112, 160, 203, 0.06) 0%, transparent 18%),
    linear-gradient(180deg, #ffffff 0%, #f6f9fc 100%);
}

.setup-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.94rem;
}

.nested-stack {
  margin-top: 6px;
}

.subcard {
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fb 100%);
  padding: 12px;
}

.subcard-title {
  margin: 0 0 10px;
  font-size: 0.88rem;
  color: var(--header);
}

.high-priority-board {
  border-top: 4px solid #6ea8da;
  background:
    linear-gradient(180deg, rgba(119, 166, 209, 0.1) 0%, transparent 24%),
    linear-gradient(180deg, #ffffff 0%, #f7fafc 100%);
}

.priority-board-header {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  align-items: flex-start;
  margin-bottom: 12px;
}

.priority-badge {
  padding: 7px 10px;
  border: 1px solid #b8cade;
  background: #edf4fb;
  color: #35597a;
  font-family: "IBM Plex Mono", monospace;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

.priority-pattern-banner {
  margin-bottom: 12px;
}

.priority-findings-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.priority-finding-card,
.diagnostic-output-card {
  padding: 14px;
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #ffffff 0%, #f5f8fb 100%);
}

.priority-finding-card strong,
.diagnostic-output-card strong {
  display: block;
  margin-top: 8px;
  color: var(--header);
  font-size: 0.95rem;
}

.priority-finding-card p,
.diagnostic-output-card p {
  margin: 6px 0 0;
}

.priority-finding-card.is-primary {
  border-color: #8faec9;
  background:
    linear-gradient(180deg, rgba(120, 170, 214, 0.12) 0%, transparent 26%),
    linear-gradient(180deg, #fafdff 0%, #edf4fa 100%);
}

.diagnostic-output-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.zscore-stack {
  display: grid;
  gap: 12px;
}

.zscore-card {
  border: 1px solid var(--panel-border);
  background: linear-gradient(180deg, #fbfdff 0%, #f5f8fb 100%);
  padding: 12px;
}

.zscore-copy strong {
  display: block;
  font-size: 0.9rem;
}

.zscore-copy p {
  margin: 6px 0 0;
}

.zscore-rail {
  position: relative;
  margin-top: 12px;
  padding-top: 6px;
}

.zscore-segments {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr 1fr;
  height: 14px;
  overflow: hidden;
  border: 1px solid var(--panel-border);
}

.segment.severe {
  background: #d78379;
}

.segment.moderate {
  background: #eab06a;
}

.segment.mild {
  background: #f1d58f;
}

.segment.normal {
  background: #c7decb;
}

.zscore-marker {
  position: absolute;
  top: 0;
  left: 0;
  width: 3px;
  height: 26px;
  background: #223240;
  transform: translateX(-1px);
  transition: left 160ms ease;
}

.grade-inline {
  font-family: "IBM Plex Mono", monospace;
  font-weight: 600;
  color: var(--header);
}

.final-summary-grid {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.compact-card p {
  margin-bottom: 0;
}

.report-block {
  white-space: pre-wrap;
  font-family: "IBM Plex Mono", monospace;
  line-height: 1.55;
}

.sticky-card {
  position: sticky;
  top: 14px;
  z-index: 1;
}

.signal-flags {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.signal-pill {
  padding: 6px 10px;
  border-radius: 999px;
  border: 1px solid var(--panel-border);
  font-size: 0.78rem;
  font-weight: 600;
}

.signal-pill.critical {
  background: #f8e2df;
  border-color: #d7a39b;
  color: #8b3325;
}

.signal-pill.watch {
  background: #f7edcf;
  border-color: #d1b260;
  color: #6f5714;
}

.signal-pill.good {
  background: #e6f2e8;
  border-color: #a9c6b0;
  color: #215236;
}

.signal-pill.neutral {
  background: #eef3f7;
  color: #50626f;
}

@media (max-width: 900px) {
  .workstation-session-strip,
  .preset-toolbar,
  .contra-grid,
  .med-grid,
  .quality-grid,
  .setup-grid,
  .priority-findings-grid,
  .diagnostic-output-grid,
  .case-toolbar,
  .final-summary-grid {
    grid-template-columns: 1fr;
  }

  .sticky-card {
    position: static;
  }
}