/* ==========================================================================
   Strategrity Insights - console and shared UI

   Palette roles are fixed and measured. Do not swap a colour into a role it
   does not pass contrast for:

     navy      #222E50  body text, headers, dark surfaces        white text
     cerulean  #007991  buttons, links, focus - only non-navy    white text
                        brand colour carrying white text at AA (5.07:1)
     zomp      #439A86  chart fills, large headings, rules       navy text
                        3.38:1 on white, so never a button label
     celadon   #BCD8C1  highlight bars, tints, section washes    navy text
     flax      #E9D985  accents, callouts, one chart series      navy text
     terracotta #B3402F detractors, errors, destructive actions  white text
   ========================================================================== */

:root {
  /* Brand */
  --navy: #222E50;
  --cerulean: #007991;
  --zomp: #439A86;
  --celadon: #BCD8C1;
  --flax: #E9D985;
  --terracotta: #B3402F;

  /* Derived */
  --navy-deep: #171F38;
  --navy-soft: #33406B;
  --cerulean-deep: #00637722;
  --cerulean-dark: #005E71;
  --celadon-wash: #EEF6F0;
  --promoter: #83C1B0;   /* lightened zomp: 46% greyscale, so print works */
  --passive: #E9D985;    /* 69% greyscale */
  --detractor: #B3402F;  /* 13% greyscale */

  /* Neutrals */
  --ink: #12172A;
  --muted: #5F6880;
  --line: #DFE3EC;
  --line-soft: #EDEFF5;
  --surface: #F6F7FB;
  --white: #FFFFFF;

  /* Status */
  --ok: #2E7D5B;
  --warn: #9A6B12;
  --danger: #B3402F;

  --radius: 14px;
  --radius-sm: 9px;
  --shadow: 0 6px 24px rgba(18, 23, 42, .09);
  --shadow-lift: 0 10px 32px rgba(18, 23, 42, .14);

  --font: "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Roboto, Helvetica, Arial, sans-serif;
  --font-display: "BBH Bogle", "Inter", "Segoe UI", -apple-system, BlinkMacSystemFont, Helvetica, Arial, sans-serif;
}

* { box-sizing: border-box; }

/* Visually hidden but still announced. The rating grid carries a caption for
   screen readers; without this rule it prints on screen and duplicates the
   question title. Defined here as well as in survey.css because the console
   renders the same markup. */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

html, body {
  margin: 0;
  padding: 0;
  font-family: var(--font);
  font-size: 15px;
  line-height: 1.55;
  color: var(--ink);
  background: var(--surface);
  -webkit-text-size-adjust: 100%;
}

a { color: var(--cerulean); }
a:hover { color: var(--cerulean-dark); }

h1, h2, h3 { font-family: var(--font-display); letter-spacing: -.01em; }
h1 { font-size: 26px; margin: 0 0 6px; color: var(--navy); }
h2 { font-size: 19px; margin: 0 0 10px; color: var(--navy); }
h3 { font-size: 16px; margin: 0 0 8px; color: var(--navy); }

.wrap { max-width: 720px; margin: 0 auto; padding: 20px 18px 72px; }
.wrap-wide { max-width: 1080px; }

.muted { color: var(--muted); }
.small { font-size: 13px; }
.tight { margin-top: 0; }
.stack > * + * { margin-top: 14px; }
.row { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.row-between { display: flex; gap: 12px; align-items: center; justify-content: space-between; flex-wrap: wrap; }
.grow { flex: 1 1 auto; min-width: 0; }

/* ------------------------------------------------------------ brand header */

.brand {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 18px 0 20px;
}

.brand-mark {
  width: 38px;
  height: 38px;
  border-radius: var(--radius-sm);
  background: var(--navy);
  color: var(--white);
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  display: grid;
  place-items: center;
  flex: none;
}

.brand-text { line-height: 1.2; }
.brand-name { font-family: var(--font-display); font-weight: 700; font-size: 16px; color: var(--navy); }
.brand-sub { font-size: 12.5px; color: var(--muted); }

.brand-rule {
  height: 6px;
  background: var(--celadon);
  border-radius: 3px;
  width: 74px;
  margin: 0 0 22px;
}

/* -------------------------------------------------------------------- card */

.card {
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 20px;
  box-shadow: var(--shadow);
}

.card + .card { margin-top: 16px; }
.card-flat { box-shadow: none; }
.card-head { margin: -20px -20px 18px; padding: 16px 20px; border-bottom: 1px solid var(--line); background: var(--celadon-wash); border-radius: var(--radius) var(--radius) 0 0; }
.card-head h2 { margin: 0; }

/* ------------------------------------------------------------------ fields */

label { display: block; font-weight: 600; font-size: 13.5px; color: var(--navy); margin-bottom: 5px; }
.field + .field { margin-top: 16px; }
.hint { font-size: 12.5px; color: var(--muted); margin-top: 5px; }

input[type=text], input[type=email], input[type=password], input[type=number], input[type=date], select, textarea {
  width: 100%;
  padding: 10px 12px;
  font: inherit;
  color: var(--ink);
  background: var(--white);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  transition: border-color .12s, box-shadow .12s;
}

textarea { min-height: 96px; resize: vertical; }

input:focus, select:focus, textarea:focus {
  outline: none;
  border-color: var(--cerulean);
  box-shadow: 0 0 0 3px rgba(0, 121, 145, .18);
}

input[aria-invalid=true], textarea[aria-invalid=true] { border-color: var(--terracotta); }

/* Visible focus for keyboard users, everywhere. */
:focus-visible { outline: 3px solid rgba(0, 121, 145, .45); outline-offset: 2px; }

/* ----------------------------------------------------------------- buttons */

.btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 10px 16px;
  font: inherit;
  font-weight: 600;
  line-height: 1.2;
  color: var(--white);
  background: var(--cerulean);
  border: 1px solid var(--cerulean);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  min-height: 42px;
  transition: background .12s, border-color .12s;
}

.btn:hover { background: var(--cerulean-dark); border-color: var(--cerulean-dark); color: var(--white); }

.btn-secondary { color: var(--navy); background: var(--white); border-color: var(--line); }
.btn-secondary:hover { color: var(--navy); background: var(--surface); border-color: var(--muted); }

.btn-danger { background: var(--terracotta); border-color: var(--terracotta); }
.btn-danger:hover { background: #8F3325; border-color: #8F3325; }

.btn-small { padding: 6px 11px; min-height: 34px; font-size: 13px; }
.btn[disabled] { opacity: .5; cursor: not-allowed; }

/* ---------------------------------------------------------------- messages */

.note {
  border: 1px solid var(--line);
  border-left: 4px solid var(--cerulean);
  background: var(--white);
  border-radius: var(--radius-sm);
  padding: 12px 14px;
  font-size: 14px;
}

.note-ok { border-left-color: var(--zomp); background: var(--celadon-wash); }
.note-warn { border-left-color: var(--flax); background: #FDFBF0; }
.note-error { border-left-color: var(--terracotta); background: #FDF3F1; }
.note strong { display: block; margin-bottom: 3px; color: var(--navy); }

/* ------------------------------------------------------------------- table */

table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 11px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: middle; }
th { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
tbody tr:hover { background: var(--celadon-wash); }
td.right, th.right { text-align: right; }

.table-scroll { overflow-x: auto; margin: 0 -20px; padding: 0 20px; }

/* ------------------------------------------------------------------ pills */

.pill {
  display: inline-block;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
  background: var(--line-soft);
  color: var(--muted);
  white-space: nowrap;
}

.pill-draft { background: var(--line-soft); color: var(--muted); }
.pill-open { background: var(--celadon); color: var(--navy); }
.pill-closed { background: var(--navy); color: var(--white); }
.pill-warn { background: var(--flax); color: var(--navy); }
.pill-danger { background: var(--terracotta); color: var(--white); }

/* --------------------------------------------------------------- empty state */

.empty { text-align: center; padding: 42px 20px; color: var(--muted); }
.empty h2 { color: var(--navy); }
.empty p { max-width: 46ch; margin: 0 auto 18px; }

/* ------------------------------------------------------------------ footer */

.foot {
  margin-top: 34px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
  font-size: 12.5px;
  color: var(--muted);
  display: flex;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
}

/* ------------------------------------------------------------------ mobile */

@media (max-width: 560px) {
  .wrap { padding: 16px 14px 60px; }
  .card { padding: 16px; }
  .card-head { margin: -16px -16px 14px; padding: 14px 16px; }
  .table-scroll { margin: 0 -16px; padding: 0 16px; }
  h1 { font-size: 22px; }
  .btn { width: 100%; justify-content: center; }
  .row .btn { width: auto; }
}

@media (prefers-reduced-motion: reduce) {
  * { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   Phase 1 additions
   ========================================================================== */

/* ------------------------------------------------------- length estimate */

.estimate {
  display: flex;
  align-items: center;
  gap: 20px;
  flex-wrap: wrap;
  background: var(--white);
  border: 1px solid var(--line);
  border-left: 5px solid var(--zomp);
  border-radius: var(--radius);
  padding: 16px 20px;
  margin-bottom: 16px;
}

.estimate-ok    { border-left-color: var(--zomp); }
.estimate-warn  { border-left-color: var(--flax); background: #FDFBF0; }
.estimate-error { border-left-color: var(--terracotta); background: #FDF3F1; }

.estimate-time  { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.estimate-label { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.estimate-text  { margin: 0; flex: 1 1 240px; font-size: 14px; }

/* ---------------------------------------------------------- builder rows */

.builder-q {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 15px 17px;
  margin-bottom: 12px;
  transition: border-color .12s;
}

.builder-q:hover { border-color: var(--muted); }

/*
 * The preview is the participant's view shown small. It is not interactive, so
 * pointer events are off, but it has to be an honest likeness: if a question
 * looks cramped or unreadable here, it will look that way to a respondent, and
 * that is the whole reason for showing it.
 */
.builder-q-preview {
  margin-top: 12px;
  pointer-events: none;
  padding: 13px 15px;
  background: var(--surface);
  border-radius: var(--radius-sm);
}

.builder-q-preview .q-title {
  display: block;
  font-size: 14.5px;
  font-weight: 600;
  color: var(--ink);
  margin: 0 0 3px;
  line-height: 1.4;
}

.builder-q-preview .q-required { font-weight: 400; font-size: 12px; color: var(--muted); }
.builder-q-preview .q-help { font-size: 12.5px; color: var(--muted); margin: 0 0 8px; }
.builder-q-preview .q-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }

/* Options sit beside their control, not under it. The console's global label
   rule is display:block and would otherwise push every option onto its own
   line, which reads as a list of headings rather than a set of choices. */
.builder-q-preview .choices { margin-top: 8px; }

.builder-q-preview .choice {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}

.builder-q-preview .choice input { width: 15px; height: 15px; margin: 0; flex: none; accent-color: var(--cerulean); }

.builder-q-preview .choice label {
  display: inline;
  margin: 0;
  font-size: 13px;
  font-weight: 400;
  color: var(--ink);
}

/* The NPS scale has to fit the preview column without overflowing the card, so
   the cells shrink rather than the row scrolling. minmax(0, 1fr) is what stops
   the numbers forcing the grid wider than its container. */
.builder-q-preview .nps { margin-top: 8px; }

.builder-q-preview .nps-scale {
  display: grid;
  grid-template-columns: repeat(11, minmax(0, 1fr));
  gap: 3px;
}

.builder-q-preview .nps-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }

.builder-q-preview .nps-cell label {
  display: grid;
  place-items: center;
  min-height: 30px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--white);
  font-size: 12px;
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  color: var(--ink);
  margin: 0;
}

.builder-q-preview .nps-ends {
  display: flex;
  justify-content: space-between;
  gap: 10px;
  font-size: 11.5px;
  color: var(--muted);
  margin-top: 6px;
}

.builder-q-preview .nps-ends span { flex: 1 1 0; }
.builder-q-preview .nps-ends span:last-child { text-align: right; }

/* Star rating */
.builder-q-preview .rating { display: flex; gap: 5px; margin-top: 8px; flex-wrap: wrap; }
.builder-q-preview .rating-cell input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.builder-q-preview .rating-cell label {
  display: grid;
  place-items: center;
  gap: 1px;
  min-width: 40px;
  min-height: 40px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
  margin: 0;
}
.builder-q-preview .rating-star { font-size: 15px; line-height: 1; color: var(--line); }
.builder-q-preview .rating-num { font-size: 10.5px; font-weight: 600; color: var(--muted); }

/* Rating grid */
.builder-q-preview .matrix-scroll { overflow-x: auto; margin-top: 8px; }
.builder-q-preview .matrix {
  width: 100%;
  min-width: 320px;
  border-collapse: separate;
  border-spacing: 0;
  border: 1px solid var(--line);
  border-radius: 7px;
  overflow: hidden;
  background: var(--white);
}
.builder-q-preview .matrix th {
  font-size: 11px;
  font-weight: 600;
  color: var(--muted);
  text-align: center;
  padding: 6px 4px;
  background: var(--celadon-wash);
  border-bottom: 1px solid var(--line);
  margin: 0;
  /* The console's table rule uppercases headers, which is right for a data
     table and wrong for a respondent's own words shown back to them. */
  text-transform: none;
  letter-spacing: 0;
}
.builder-q-preview .matrix th[scope=row] {
  text-align: left;
  font-size: 12.5px;
  font-weight: 400;
  color: var(--ink);
  background: var(--white);
  width: 40%;
  padding: 7px 10px;
  text-transform: none;
  letter-spacing: 0;
}
.builder-q-preview .matrix td { text-align: center; padding: 0; }
.builder-q-preview .mcell { display: grid; place-items: center; min-height: 28px; margin: 0; padding: 4px; }
.builder-q-preview .matrix tbody tr + tr th,
.builder-q-preview .matrix tbody tr + tr td { border-top: 1px solid var(--line-soft); }
.builder-q-preview .matrix input { width: 14px; height: 14px; margin: 0; accent-color: var(--cerulean); }

/* Ranking */
.builder-q-preview .ranks { margin-top: 8px; }
.builder-q-preview .rank-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 5px 9px;
  margin-bottom: 4px;
  border: 1px solid var(--line);
  border-radius: 7px;
  background: var(--white);
}
.builder-q-preview .rank-label { flex: 1; margin: 0; font-size: 13px; font-weight: 400; color: var(--ink); }
.builder-q-preview .rank-row select {
  width: auto;
  min-width: 54px;
  padding: 3px 7px;
  font-size: 12px;
  margin: 0;
}

/* Text, textarea, select, date */
.builder-q-preview input[type=text],
.builder-q-preview input[type=date],
.builder-q-preview select,
.builder-q-preview textarea {
  margin-top: 8px;
  padding: 7px 10px;
  font-size: 13px;
  border-radius: 7px;
  background: var(--white);
}

.builder-q-preview textarea { min-height: 54px; }

/* Information block */
.builder-q-preview .q-section { border-left: 3px solid var(--celadon); padding-left: 12px; }
.builder-q-preview .q-section-title { font-size: 14px; margin: 0 0 4px; color: var(--navy); }
.builder-q-preview .q-section p { font-size: 12.5px; color: var(--muted); margin: 0 0 5px; }

.builder-q-actions { display: flex; gap: 6px; flex-wrap: wrap; flex: none; }

.adder { margin-top: 6px; }
.adder summary { cursor: pointer; font-weight: 600; color: var(--cerulean); padding: 8px 0; }
.adder summary:hover { color: var(--cerulean-dark); }

.consent-frozen {
  white-space: pre-wrap;
  font-family: var(--font);
  font-size: 14px;
  background: var(--celadon-wash);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  padding: 16px;
  margin: 0;
}

/* -------------------------------------------------------- survey cards */

.survey-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 14px; }
.survey-card { border: 1px solid var(--line); border-radius: var(--radius); padding: 16px; }
.survey-card h3 { font-size: 16px; }

.rate { margin-top: 12px; }
.rate-bar { height: 8px; background: var(--line); border-radius: 999px; overflow: hidden; }
.rate-bar span { display: block; height: 100%; background: var(--zomp); border-radius: 999px; }
.rate-text { font-size: 13px; color: var(--muted); margin: 7px 0 0; }

/* ------------------------------------------------------------- figures */

.figures { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 16px; }
.figure { text-align: center; padding: 8px; }
.figure-n { font-family: var(--font-display); font-size: 30px; font-weight: 700; color: var(--navy); line-height: 1.1; }
.figure-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-top: 4px; }

/* ----------------------------------------------------------------- NPS */

.nps-headline {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  padding: 4px 0 18px;
  border-bottom: 1px solid var(--line-soft);
  margin-bottom: 18px;
}

.nps-score-n { font-family: var(--font-display); font-size: 46px; font-weight: 700; color: var(--navy); line-height: 1; }
.nps-score-l { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; margin-top: 6px; }
.nps-interval { padding-left: 24px; border-left: 4px solid var(--celadon); }
.nps-interval-range { font-family: var(--font-display); font-size: 22px; font-weight: 700; color: var(--navy); line-height: 1.2; }
.nps-interval-l { font-size: 13px; color: var(--muted); margin-top: 4px; max-width: 30ch; }

/* Counts, not a stacked percentage bar. Three ordered categories cannot be
   carried by colour alone: reports print in mono, and under deuteranopia the
   promoter green and passive gold collapse together. The number and the word
   are the encoding; the swatch only confirms. */
.nps-breakdown { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; margin-bottom: 18px; }
.nps-cat { display: flex; align-items: center; gap: 10px; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.nps-cat-n { font-family: var(--font-display); font-size: 24px; font-weight: 700; color: var(--navy); }
.nps-cat-l { font-size: 13.5px; line-height: 1.3; }

.swatch { width: 14px; height: 34px; border-radius: 4px; flex: none; }
.swatch-promoter  { background: var(--promoter); }
.swatch-passive   { background: var(--passive); }
.swatch-detractor { background: var(--detractor); }

/* ------------------------------------------------------------ bar table */

.bars { width: 100%; }
.bars th { text-transform: none; letter-spacing: 0; font-size: 14px; font-weight: 500; color: var(--ink); width: 34%; padding-left: 0; }
.bars td { border-bottom: 1px solid var(--line-soft); }
.bars-track { width: 50%; }
.bars-fill { display: block; height: 20px; background: var(--zomp); border-radius: 4px; min-width: 2px; }
.bars-n { white-space: nowrap; font-variant-numeric: tabular-nums; width: 16%; text-align: right; padding-right: 0; }

/* ------------------------------------------------------------ verbatims */

.verbatims { list-style: none; margin: 0; padding: 0; }
.verbatims li {
  border-left: 4px solid var(--celadon);
  background: var(--celadon-wash);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  padding: 12px 16px;
  margin-bottom: 10px;
  font-size: 14.5px;
}

/* --------------------------------------------------------------- fields */

.link-field {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 11.5px;
  padding: 7px 9px;
  min-width: 210px;
}

.logo-preview {
  display: inline-block;
  padding: 10px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  margin-bottom: 10px;
}

.logo-preview img { max-height: 54px; max-width: 220px; display: block; }

@media (max-width: 560px) {
  .nps-interval { padding-left: 0; border-left: 0; border-top: 4px solid var(--celadon); padding-top: 12px; }
  .builder-q-actions { width: 100%; margin-top: 10px; }
  .builder-q-actions .btn { width: auto; }
}

/* ==========================================================================
   Phase 2 additions
   ========================================================================== */

.logic-summary {
  font-size: 12.5px;
  color: var(--muted);
  margin: 6px 0 0;
  padding-left: 10px;
  border-left: 3px solid var(--flax);
}

.asked-note {
  font-size: 13.5px;
  color: var(--muted);
  background: #FDFBF0;
  border: 1px solid var(--line);
  border-left: 4px solid var(--flax);
  border-radius: var(--radius-sm);
  padding: 11px 14px;
  margin: 0 0 16px;
}

.asked-note strong { color: var(--navy); }

/* Phase 2 preview overrides folded into the builder rows block above. */