/**
 * 100x Life Planning System - Assessment Styles
 * Styles for assessment forms, coach checklist, user viewer, and import diff
 */

/* ── Assessment Modal ─────────────────────────────────────────────── */

.assessment-modal-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: 1050;
  padding: 1rem;
}

/* The <dialog> is a transparent positioning shell; the card inside owns the
   chrome. The card is a flex column capped at 85dvh with a pinned header,
   a scrolling body, and pinned actions — nothing may render outside it.
   The <form> between card and body must also be a min-height:0 flex column,
   or the height cap never reaches the body and long forms (CliftonStrengths'
   34 ranks) spill out of the card. */
.assessment-modal-dialog {
  width: min(800px, calc(100vw - 2rem));
  max-height: 85dvh;
  padding: 0;
  border: none;
  background: transparent;
  overflow: visible;
}

/* The Foundation form only: Self plus four raters need six columns on one row,
   which 800px cannot give them without wrapping. Widening every modal to suit
   one of them is how the other three ended up looking padded and empty. */
.assessment-modal-dialog--wide {
  width: min(1020px, calc(100vw - 2rem));
}

.assessment-modal-dialog::backdrop {
  background: rgba(15, 26, 46, 0.55);
}

.assessment-modal {
  width: 100%;
  max-height: 85dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  background: var(--bg-primary);
  border-radius: 12px;
  box-shadow: var(--shadow-lg);
}

.assessment-modal-form {
  display: flex;
  flex-direction: column;
  min-height: 0;
  flex: 1;
}

.assessment-modal-header {
  flex-shrink: 0;
  padding: 1.15rem 1.5rem;
  border-bottom: 1px solid var(--border-light);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.8rem;
}

.assessment-modal-header h3 {
  font-family: var(--font-heading);
  font-size: calc(1.25rem + var(--text-bump));
  color: var(--navy-primary);
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  min-width: 0;
}

.assessment-modal-header h3 i {
  color: var(--teal-ink);
  flex-shrink: 0;
}

.assessment-modal-close {
  min-width: var(--tap);
  min-height: var(--tap);
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--text-secondary);
  cursor: pointer;
  font-size: calc(1rem + var(--text-bump));
  line-height: 1;
  transition: color var(--transition-fast);
}

.assessment-modal-close:hover {
  color: var(--navy-primary);
}

.assessment-modal-body {
  padding: 1.5rem;
  overflow-y: auto;
  overflow-x: auto;
  overscroll-behavior: contain;
  flex: 1;
  min-height: 0;
}

.assessment-modal-actions {
  flex-shrink: 0;
  padding: 1rem 1.5rem;
  border-top: 1px solid var(--border-light);
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* ── Assessment Form Shared ───────────────────────────────────────── */

.assessment-form-desc {
  color: var(--text-secondary);
  font-size: calc(0.875rem + var(--text-bump));
  margin-bottom: 1.25rem;
  line-height: 1.5;
}

/* ── Foundation Assessment Form ───────────────────────────────────── */

.foundation-csv-actions {
  display: flex;
  gap: 0.5rem;
  margin-bottom: 1rem;
  flex-wrap: wrap;
}

.foundation-score-scroll {
  overflow-x: auto;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-panel);
}

/* table-layout: fixed is what makes the score columns equal — the browser
   stops sizing them by content, so Self and every rater get the same width and
   the numbers read as columns. */
.foundation-score-table {
  table-layout: fixed;
  width: 100%;
  min-width: 620px;
  border-collapse: collapse;
  font-variant-numeric: tabular-nums;
}

/* Wide enough for the longest canonical label ("Joy/Contentment",
   "Community Impact") on ONE line — a wrapped label used to make its row
   double height and knock the whole column out of step. */
.foundation-col-area { width: 11rem; }
.foundation-col-score { width: auto; }

.foundation-score-table th,
.foundation-score-table td {
  padding: 0.4rem 0.5rem;
  text-align: center;
  vertical-align: middle;
}

.foundation-col-head {
  background: var(--bg-secondary);
  font-family: var(--font-ui);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  font-size: calc(0.78rem + var(--text-bump));
  color: var(--text-secondary);
  border-bottom: 1px solid var(--border-light);
  vertical-align: bottom;
}

.foundation-score-table thead th:first-child,
.foundation-area-cell {
  text-align: left;
}

.foundation-area-cell {
  font-weight: 400;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-dark);
  white-space: nowrap;
}

/* Zebra striping: eleven rows of small numbers need something for the eye to
   track across. */
.foundation-score-row:nth-child(even) {
  background: var(--bg-secondary);
}

.foundation-score-row th,
.foundation-score-row td {
  border-top: 1px solid var(--border-light);
}

/* Rater name and relationship are two fields stacked in the column head, one
   width apiece. A single box meant the member typed the brackets themselves
   and then watched the composed string get cut off. */
.foundation-rater-head {
  padding-bottom: 0.6rem;
}

.foundation-rater-name,
.foundation-rater-rel {
  display: block;
  width: 100%;
  min-width: 0;
  padding: 0.25rem 0.3rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  background: var(--bg-primary);
  color: var(--text-dark);
  font-family: var(--font-body);
  font-weight: 400;
  /* Small on purpose: "Relationship" has to fit inside a score column's
     width, arrow and all. */
  font-size: calc(0.68rem + var(--text-bump));
  text-overflow: ellipsis;
  text-transform: none;
  letter-spacing: normal;
  text-align: center;
}

.foundation-rater-name {
  margin-bottom: 0.3rem;
}

/* One width for every score box, centred in its column. */
.foundation-score-input {
  width: 3.5rem;
  max-width: 100%;
  padding: 0.3rem 0.25rem;
  text-align: center;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  font-size: calc(0.85rem + var(--text-bump));
  font-variant-numeric: tabular-nums;
  background: var(--bg-primary);
  color: var(--text-dark);
}

/* The spinners eat half a narrow box and duplicate what the 1-10 datalist
   already offers. */
.foundation-score-input::-webkit-outer-spin-button,
.foundation-score-input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

.foundation-score-input {
  -moz-appearance: textfield;
  appearance: textfield;
}

.foundation-score-input:focus,
.foundation-rater-name:focus,
.foundation-rater-rel:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

/* ── CliftonStrengths Form ────────────────────────────────────────── */

/* The four domains, named once at the top with the mark each one wears in the
   ladder below. Colour never carries a domain on its own — the name is always
   beside it. */
.clifton-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem 1.25rem;
  margin: 0 0 1.25rem;
  padding: 0;
  list-style: none;
}

.clifton-legend-item {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: calc(0.78rem + var(--text-bump));
  color: var(--text-secondary);
}

.clifton-legend-dot {
  width: 0.6rem;
  height: 0.6rem;
  flex: 0 0 auto;
  background: var(--domain-mark, var(--border-medium));
}

.clifton-group-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: calc(1.05rem + var(--text-bump));
  color: var(--text-dark);
  margin: 0 0 0.75rem;
}

.clifton-theme-list {
  display: flex;
  flex-direction: column;
}

/* The ladder. One column, because rank order is the information — five equal
   rows side by side would throw it away. */
.clifton-top5 {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--border-light);
}

.clifton-theme-row.required {
  display: grid;
  grid-template-columns: 2.6rem minmax(0, 1fr);
  align-items: center;
  gap: 0.9rem;
  padding: 0.6rem 0 0.6rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  border-left: 3px solid var(--domain-mark, transparent);
  transition: border-left-color var(--transition-fast), background var(--transition-fast);
}

.clifton-theme-row.required[data-domain] {
  background: var(--bg-secondary);
}

/* Rank 1 is not rank 5: the numeral steps down the ladder. */
.clifton-top5 .clifton-rank {
  font-family: var(--font-heading);
  font-variant-numeric: tabular-nums;
  font-weight: var(--weight-heading);
  line-height: 1;
  text-align: right;
  color: var(--text-secondary);
}

.clifton-top5 .clifton-theme-row:nth-child(1) .clifton-rank {
  font-size: calc(1.9rem + var(--text-bump));
  color: var(--text-dark);
}

.clifton-top5 .clifton-theme-row:nth-child(2) .clifton-rank { font-size: calc(1.7rem + var(--text-bump)); }
.clifton-top5 .clifton-theme-row:nth-child(3) .clifton-rank { font-size: calc(1.5rem + var(--text-bump)); }
.clifton-top5 .clifton-theme-row:nth-child(4) .clifton-rank { font-size: calc(1.35rem + var(--text-bump)); }
.clifton-top5 .clifton-theme-row:nth-child(5) .clifton-rank { font-size: calc(1.2rem + var(--text-bump)); }

.clifton-theme-field {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-width: 0;
}

.clifton-theme-field .clifton-theme-select {
  flex: 1 1 auto;
  max-width: 20rem;
}

/* The domain name appears once a theme is picked, so filling the ladder in
   tells the member something they did not type. */
.clifton-domain {
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-secondary);
  white-space: nowrap;
}

.clifton-domain:empty {
  display: none;
}

/* Ranks 6 to 34: reference material, dressed to say so — quieter type, a
   denser grid, no domain marks. */
.clifton-rest {
  margin-top: 1.5rem;
}

.clifton-toggle-optional {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  min-height: var(--tap);
  padding: 0;
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-size: calc(0.82rem + var(--text-bump));
  color: var(--teal-ink);
}

.clifton-toggle-optional:hover {
  color: var(--text-dark);
}

.clifton-toggle-optional i {
  transition: transform var(--transition-fast);
}

.clifton-toggle-optional[aria-expanded="true"] i {
  transform: rotate(180deg);
}

.clifton-optional-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  column-gap: 1.5rem;
  row-gap: 0;
}

.clifton-theme-row.clifton-optional {
  display: grid;
  grid-template-columns: 1.9rem minmax(0, 1fr);
  align-items: center;
  gap: 0.6rem;
  padding: 0.3rem 0;
}

.clifton-optional .clifton-rank {
  font-family: var(--font-ui);
  font-variant-numeric: tabular-nums;
  font-size: calc(0.85rem + var(--text-bump));
  text-align: right;
  color: var(--text-secondary);
}

.clifton-optional .clifton-theme-select {
  font-size: calc(0.8rem + var(--text-bump));
  padding: 0.25rem 0.4rem;
  min-height: calc(var(--tap) - 6px);
  background: var(--bg-secondary);
}

.clifton-theme-select {
  width: 100%;
  min-width: 0;
  min-height: var(--tap);
  padding: 0.375rem 0.5rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  font-family: var(--font-body);
  font-size: calc(0.85rem + var(--text-bump));
  background: var(--bg-primary);
  color: var(--text-dark);
}

.clifton-theme-select:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

/* The domain marks. One declaration each; everything above reads
   var(--domain-mark). */
[data-domain="executing"] { --domain-mark: var(--domain-executing); }
[data-domain="influencing"] { --domain-mark: var(--domain-influencing); }
[data-domain="relationship-building"] { --domain-mark: var(--domain-relationship); }
[data-domain="strategic-thinking"] { --domain-mark: var(--domain-strategic); }

/* ── Strengths Matrix Form ────────────────────────────────────────── */

.matrix-group + .matrix-group {
  margin-top: 1.75rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--border-light);
}

.matrix-group-title {
  font-family: var(--font-heading);
  font-weight: var(--weight-heading);
  font-size: calc(1.05rem + var(--text-bump));
  color: var(--text-dark);
  margin: 0 0 0.25rem;
}

.matrix-group-note {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  margin: 0 0 1rem;
  line-height: var(--leading-ui);
}

/* Balcony and basement face each other across one hairline: the same strength,
   two floors. */
.matrix-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  border: 1px solid var(--border-light);
  border-radius: var(--radius-panel);
  overflow: hidden;
}

.matrix-pair .matrix-field {
  padding: 0.9rem 1rem 1rem;
}

.matrix-pair .matrix-field + .matrix-field {
  border-left: 1px solid var(--border-light);
}

.matrix-statements {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 1.1rem 1.5rem;
}

.matrix-field {
  min-width: 0;
}

.matrix-label {
  display: block;
  font-family: var(--font-ui);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  font-weight: 500;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-dark);
}

.matrix-hint {
  font-size: calc(0.78rem + var(--text-bump));
  color: var(--text-secondary);
  margin: 0.15rem 0 0.5rem;
}

/* Each box finishes the sentence its label starts, so the label is set as the
   opening words rather than as a field name. */
.matrix-opener {
  display: block;
  font-family: var(--font-heading);
  font-style: italic;
  font-size: calc(1.05rem + var(--text-bump));
  color: var(--text-dark);
  margin-bottom: 0.35rem;
}

.matrix-textarea {
  display: block;
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--border-light);
  border-radius: var(--radius-control);
  font-size: calc(0.85rem + var(--text-bump));
  font-family: var(--font-body);
  line-height: 1.5;
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

.matrix-textarea:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

@media (max-width: 640px) {
  .matrix-pair,
  .matrix-statements {
    grid-template-columns: minmax(0, 1fr);
  }

  .matrix-pair .matrix-field + .matrix-field {
    border-left: none;
    border-top: 1px solid var(--border-light);
  }
}

/* ── Life Story Form ──────────────────────────────────────────────── */

.lifestory-editor {
  display: flex;
  flex-direction: column;
  gap: 0.4rem;
}

/* A reduced toolbar (owner, 2026-08-17): bold, italic and lists are what a life
   story wants, and the two readers flatten the markup anyway (HtmlText). The
   rest of Trix's tools go — headings and quotes are chrome in a modal, and the
   file button offers an attachment this field has nowhere to put. */
.lifestory-editor trix-toolbar [data-trix-button-group="file-tools"],
.lifestory-editor trix-toolbar [data-trix-button-group="history-tools"],
.lifestory-editor trix-toolbar [data-trix-attribute="heading1"],
.lifestory-editor trix-toolbar [data-trix-attribute="quote"],
.lifestory-editor trix-toolbar [data-trix-attribute="code"],
.lifestory-editor trix-toolbar [data-trix-action="link"],
.lifestory-editor trix-toolbar [data-trix-action="decreaseNestingLevel"],
.lifestory-editor trix-toolbar [data-trix-action="increaseNestingLevel"],
.lifestory-editor trix-toolbar .trix-dialogs {
  display: none;
}

/* What survives sits quietly above the box rather than looking like a word
   processor bolted to a modal. */
.lifestory-editor trix-toolbar {
  margin-bottom: 0.15rem;
}

.lifestory-editor trix-toolbar .trix-button-row {
  justify-content: flex-start;
}

/* Everything but the box is the app's shared .trix-content look (components.css)
   so this editor matches every other rich-text field in both themes; only the
   height is specific to a life story. */
.lifestory-trix {
  /* Opens tall enough to invite a few paragraphs rather than a one-line box,
     then grows with the story until the modal body takes over the scrolling. */
  min-height: 22rem;
  max-height: 55dvh;
  overflow-y: auto;
  padding: 1rem;
  font-size: calc(0.9rem + var(--text-bump));
  line-height: var(--leading-prose);
}

.lifestory-status {
  align-self: flex-end;
  min-height: 1.2em;
}

/* ── Coach Assessment Checklist ───────────────────────────────────── */

.assessment-checklist {
  background: var(--bg-primary);
  border: 1px solid var(--border-light);
  border-radius: 12px;
  padding: 1.25rem;
  margin-bottom: 1.5rem;
}

.assessment-checklist-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 1rem;
}

.assessment-checklist-header h3 {
  font-family: var(--font-heading);
  font-size: calc(1.1rem + var(--text-bump));
  margin: 0;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assessment-progress-bar {
  width: 120px;
  height: 6px;
  background: var(--bg-secondary);
  border-radius: 3px;
  overflow: hidden;
}

.assessment-progress-fill {
  height: 100%;
  background: var(--teal-accent);
  border-radius: 3px;
  transition: width var(--motion-enter) var(--ease-out);
}

.assessment-progress-label {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.assessment-checklist-items {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.assessment-checklist-item {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.75rem;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  transition: background var(--motion-quick) var(--ease-out);
}

.assessment-checklist-item:hover {
  background: var(--bg-secondary);
}

.assessment-checklist-item.loaded {
  border-color: var(--teal-accent);
  background: var(--teal-light);
}

.assessment-item-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: calc(1rem + var(--text-bump));
  flex-shrink: 0;
}

.assessment-checklist-item.loaded .assessment-item-icon {
  background: var(--teal-fill);
  color: white;
}

.assessment-checklist-item:not(.loaded) .assessment-item-icon {
  background: var(--bg-secondary);
  color: var(--text-muted);
}

.assessment-item-info {
  flex: 1;
  min-width: 0;
}

.assessment-item-name {
  font-weight: 600;
  font-size: calc(0.9rem + var(--text-bump));
}

.assessment-item-desc {
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
}

.assessment-item-meta {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-secondary);
  margin-top: 0.125rem;
}

.assessment-item-actions {
  display: flex;
  gap: 0.375rem;
  flex-shrink: 0;
}

.assessment-item-actions .btn {
  font-size: calc(0.75rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
}

/* ── User Assessment Viewer (Settings) ────────────────────────────── */

.user-assessments-list {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.user-assessment-card {
  border: 1px solid var(--border-light);
  border-radius: 8px;
  padding: 1rem;
  transition: background var(--motion-quick) var(--ease-out);
}

.user-assessment-card:hover {
  background: var(--bg-secondary);
}

.user-assessment-card.loaded {
  border-left: 3px solid var(--teal-accent);
}

.user-assessment-card.empty {
  border-style: dashed;
}

.user-assessment-card.empty .user-assessment-preview {
  color: var(--text-muted);
}

.user-assessment-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 0.5rem;
}

.user-assessment-title {
  font-weight: 600;
  font-size: calc(0.95rem + var(--text-bump));
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.user-assessment-actions {
  display: flex;
  gap: 0.375rem;
  flex-wrap: wrap;
  justify-content: flex-end;
}

.user-assessment-actions .btn {
  font-size: calc(0.75rem + var(--text-bump));
  padding: 0.25rem 0.5rem;
  white-space: nowrap;
}

.user-assessment-remove-btn {
  color: var(--text-muted);
  background: transparent;
  border: none;
  min-width: var(--tap);
  min-height: var(--tap);
  justify-content: center;
}

.user-assessment-remove-btn:hover {
  color: #c53030;
  background: rgba(197, 48, 48, 0.08);
}

@media (max-width: 600px) {
  .user-assessment-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
  }
  .user-assessment-actions {
    width: 100%;
  }
}

.user-assessment-preview {
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.5;
}

.user-assessment-meta {
  font-size: calc(0.75rem + var(--text-bump));
  color: var(--text-muted);
  margin-top: 0.5rem;
}

/* ── Import Diff Modal ────────────────────────────────────────────── */

.import-diff-modal {
  max-width: 700px;
}

.import-diff-table {
  width: 100%;
  border-collapse: collapse;
  font-size: calc(0.85rem + var(--text-bump));
}

.import-diff-table th {
  text-align: left;
  padding: 0.5rem 0.75rem;
  background: var(--bg-secondary);
  font-weight: 600;
  border-bottom: 1px solid var(--border-light);
}

.import-diff-table td {
  padding: 0.5rem 0.75rem;
  border-bottom: 1px solid var(--border-light);
  vertical-align: top;
}

.import-diff-table tr:hover td {
  background: var(--bg-secondary);
}

.import-diff-value {
  max-width: 200px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary);
}

.import-diff-new {
  color: var(--teal-ink);
  font-weight: 500;
}

.import-diff-overwrite {
  color: var(--gold);
}

.import-diff-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 1rem;
}

.import-diff-bulk {
  display: flex;
  gap: 0.5rem;
}

/* ── Extraction Review Modal ──────────────────────────────────────── */

.extraction-review-modal {
  max-width: 900px;
}

.extraction-review-desc {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.75rem 1rem;
  background: var(--teal-light);
  border-left: 3px solid var(--teal-accent);
  border-radius: 4px;
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--text-secondary);
  margin-bottom: 1.25rem;
}

.extraction-review-desc i {
  color: var(--teal-ink);
  flex-shrink: 0;
}

/* CliftonStrengths Review Table */

.extraction-review-table {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--border-light);
  border-radius: 8px;
  overflow: hidden;
}

.extraction-review-header {
  display: grid;
  grid-template-columns: 50px 1fr 140px 1fr;
  gap: 0.5rem;
  padding: 0.625rem 0.75rem;
  background: var(--bg-secondary);
  font-weight: 600;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-secondary);
}

.extraction-review-row {
  display: grid;
  grid-template-columns: 50px 1fr 140px 1fr;
  gap: 0.5rem;
  padding: 0.5rem 0.75rem;
  border-top: 1px solid var(--border-light);
  align-items: center;
}

.extraction-review-row.top5 {
  background: var(--teal-light);
}

.er-col-rank {
  font-weight: 600;
  font-size: calc(0.85rem + var(--text-bump));
  color: var(--text-muted);
  text-align: center;
}

.extraction-review-row.top5 .er-col-rank {
  color: var(--teal-ink);
}

.er-col-theme .er-theme-select {
  width: 100%;
  max-width: 200px;
}

.er-col-snippet {
  min-width: 0;
}

.er-snippet-text {
  font-style: italic;
  font-size: calc(0.8rem + var(--text-bump));
  color: var(--text-muted);
  max-height: 3.5em;
  overflow-y: auto;
  display: block;
  line-height: 1.4;
}

/* CliftonStrengths Theme Descriptions */

.er-desc-toggle {
  font-size: calc(0.75rem + var(--text-bump)) !important;
  padding: 0.125rem 0.375rem !important;
  color: var(--teal-ink);
}

.er-theme-descriptions {
  padding: 0.75rem 0.75rem 0.75rem 3.5rem;
  border-top: 1px dashed var(--border-light);
  background: var(--bg-secondary);
}

.er-desc-field {
  margin-bottom: 0.625rem;
}

.er-desc-field:last-child {
  margin-bottom: 0;
}

.er-desc-label {
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--teal-ink);
  text-transform: uppercase;
  letter-spacing: 0.03em;
  margin-bottom: 0.2rem;
}

.er-desc-text {
  font-size: calc(0.825rem + var(--text-bump));
  color: var(--text-secondary);
  line-height: 1.5;
}

/* Description toggle in manual form */
.clifton-theme-row .er-desc-toggle {
  margin-left: auto;
}

.clifton-optional-desc {
  margin-left: 2.5rem;
  margin-bottom: 0.375rem;
  border-radius: 6px;
  border: 1px solid var(--border-light);
}

/* Strengths Matrix Review */

.er-field-block {
  margin-bottom: 1.25rem;
}

.er-field-columns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.75rem;
}

.er-field-textarea {
  width: 100%;
  padding: 0.625rem;
  border: 1px solid var(--border-light);
  border-radius: 6px;
  font-size: calc(0.85rem + var(--text-bump));
  font-family: var(--font-body);
  resize: vertical;
  background: var(--bg-primary);
  color: var(--text-dark);
}

.er-field-textarea:focus {
  border-color: var(--teal-accent);
  box-shadow: var(--focus-ring);
}

.er-field-snippet-label {
  font-size: calc(0.75rem + var(--text-bump));
  font-weight: 600;
  color: var(--text-muted);
  margin-bottom: 0.25rem;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.er-field-snippet-text {
  font-style: italic;
  font-size: calc(0.825rem + var(--text-bump));
  color: var(--text-secondary);
  padding: 0.625rem;
  background: var(--bg-secondary);
  border-radius: 6px;
  border: 1px solid var(--border-light);
  max-height: 6em;
  overflow-y: auto;
  line-height: 1.5;
}

/* ── Assessment Status Pills (User Cards) ────────────────────────── */

.admin-user-assessment-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 0.375rem;
  padding: 0.5rem 0;
}

.assessment-pill {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  padding: 0.2rem 0.5rem;
  border-radius: 12px;
  font-size: calc(0.7rem + var(--text-bump));
  font-weight: 500;
  white-space: nowrap;
}

.assessment-pill.loaded {
  background: var(--teal-light);
  color: var(--teal-ink);
  border: 1px solid var(--teal-accent);
}

.assessment-pill.loaded i {
  font-size: calc(0.65rem + var(--text-bump));
}

.assessment-pill.empty {
  background: var(--bg-secondary);
  color: var(--text-muted);
  border: 1px solid var(--border-light);
}

/* Upload Progress Overlay */

.assessment-upload-overlay {
  position: absolute;
  inset: 0;
  background: rgba(255, 255, 255, 0.9);
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  z-index: 10;
}

.assessment-upload-spinner {
  display: flex;
  align-items: center;
  gap: 0.625rem;
  font-size: calc(0.875rem + var(--text-bump));
  color: var(--teal-ink);
  font-weight: 500;
}

.assessment-upload-spinner .spinner-border-sm {
  width: 1rem;
  height: 1rem;
  border-width: 2px;
}

/* ── Responsive ───────────────────────────────────────────────────── */

@media (max-width: 768px) {
  .assessment-modal-dialog,
  .assessment-modal {
    max-height: 92dvh;
  }

  /* The score table keeps its six columns and scrolls sideways inside the
     modal body rather than reflowing — half a rater's scores wrapped onto a
     second line is worse than a swipe. */
  .foundation-score-table {
    min-width: 560px;
  }

  .foundation-score-table th,
  .foundation-score-table td {
    padding: 0.35rem 0.3rem;
  }

  .foundation-area-cell {
    font-size: calc(0.78rem + var(--text-bump));
  }

  .foundation-score-input {
    width: 3rem;
    font-size: calc(0.8rem + var(--text-bump));
  }

  .foundation-rater-name,
  .foundation-rater-rel {
    font-size: calc(0.7rem + var(--text-bump));
  }

  .clifton-domain {
    display: none;
  }

  .assessment-checklist-item {
    flex-wrap: wrap;
  }

  .assessment-item-actions {
    width: 100%;
    justify-content: flex-end;
    margin-top: 0.25rem;
  }

  .extraction-review-modal {
    max-width: 100%;
  }

  .extraction-review-header,
  .extraction-review-row {
    grid-template-columns: 40px 1fr;
    gap: 0.25rem;
  }

  .er-col-domain,
  .extraction-review-header .er-col-domain {
    display: none;
  }

  .er-col-snippet {
    grid-column: 1 / -1;
    padding-top: 0.25rem;
  }

  .extraction-review-header .er-col-snippet {
    display: none;
  }

  .er-field-columns {
    grid-template-columns: 1fr;
  }
}