/* Interview Prepper, /things/interview-room/
   BRIEF-181 module 1.

   Bench tokens only. Every colour, radius, spacing step and type size
   below comes from tokens.css, so this tool follows the live skin and
   theme like everything else on the Bench. Nothing here invents a
   visual language: this is a functional first pass, structure only, and
   a Claude Design mockup informs the real visual brief later.

   Breakpoint is 899px, which is the Bench's own standard (the dominant
   breakpoint across the Drawer's stylesheets), not a number chosen for
   this tool. */

/* This is a working tool, not a reading document, so it opts out of the
   760px --stage-max the Bench caps prose at. A brief or a story wants a
   narrow column; a room full of people and meetings wants the width. */
.ir-wide {
  max-width: 1180px;
}

/* ── Head ─────────────────────────────────────────────────────────── */

.ir-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--s3);
  flex-wrap: wrap;
  margin-bottom: var(--s5);
}

.ir-head-title {
  font-family: var(--font-display);
  font-size: var(--t-title);
  color: var(--ink);
  margin: 0;
}

.ir-head-line {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: var(--s1) 0 0;
}

.ir-back {
  border: 0;
  background: none;
  padding: 0;
  margin: 0 0 var(--s2);
  font: inherit;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  cursor: pointer;
}

.ir-back:hover { color: var(--accent); }

/* ── Panels and columns ───────────────────────────────────────────── */

.ir-cols {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: var(--s4);
  align-items: start;
}

.ir-col {
  display: flex;
  flex-direction: column;
  gap: var(--s4);
  min-width: 0;
}

.ir-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}

.ir-panel-title {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
  margin: 0 0 var(--s3);
}

/* Placeholder copy says what arrives later and when, rather than
   sitting blank. An empty panel with no explanation reads as broken;
   this reads as unbuilt, which is what it actually is. */
.ir-placeholder {
  font-size: var(--t-small);
  color: var(--ink-faint);
  font-style: italic;
  margin: 0;
}

/* ── Home: the Opportunity list ───────────────────────────────────── */

.ir-opp-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: var(--s3);
}

.ir-opp-card {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ir-opp-open {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ir-opp-title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--ink);
}

.ir-opp-open:hover .ir-opp-title { color: var(--accent); }

.ir-opp-company {
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ir-opp-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s2);
  border-top: 1px solid var(--line);
  padding-top: var(--s2);
}

.ir-opp-expiry {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

/* Inside the renewal window the countdown stops being background
   information and becomes the reason to act, so it takes the warn
   token rather than staying faint. */
.ir-opp-expiry.is-soon { color: var(--warn); }

/* ── Empty state ──────────────────────────────────────────────────── */
/* Carries the Terry check: opened cold, this has to say what an
   Opportunity is and leave exactly one obvious thing to click. */

.ir-empty-state {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s5);
  max-width: 560px;
}

.ir-empty-title {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.ir-empty-line {
  font-size: var(--t-body);
  color: var(--ink-soft);
  margin: 0 0 var(--s3);
}

.ir-empty {
  font-size: var(--t-small);
  color: var(--ink-faint);
}

/* ── Expiry notices ───────────────────────────────────────────────── */
/* BRIEF-181 module 5. A Room disappearing with no explanation reads as
   data loss, so a deletion says so once. */

.ir-notice {
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--warn-soft);
  border-left: 2px solid var(--warn);
  border-radius: var(--radius);
  padding: var(--s2) var(--s3);
  margin: 0 0 var(--s4);
}

.ir-notice.is-good {
  background: var(--good-soft);
  border-left-color: var(--good);
}

.ir-life-note {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  margin: var(--s5) 0 0;
  padding-top: var(--s3);
  max-width: 62ch;
}

/* ── Inputs and inline adds ───────────────────────────────────────── */

.ir-input {
  width: 100%;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink);
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius);
  padding: 10px 12px;
}

.ir-input:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }

.ir-field-label {
  display: block;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin-bottom: var(--s1);
}

.ir-inline-add {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}

.ir-inline-add .ir-input { flex: 1 1 auto; }

.ir-create-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  margin-bottom: var(--s4);
  max-width: 460px;
}

.ir-create-actions {
  display: flex;
  gap: var(--s2);
  margin-top: var(--s3);
}

/* ── Opportunity: shared slots and meetings ───────────────────────── */

.ir-company-name {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.ir-company-summary {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

.ir-shared-slot {
  border-top: 1px solid var(--line);
  padding-top: var(--s3);
  margin-top: var(--s3);
}

.ir-shared-slot:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }

.ir-shared-label {
  display: block;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-soft);
  margin-bottom: var(--s1);
}

.ir-mtg-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ir-mtg-open {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
  padding: var(--s3);
  font: inherit;
  text-align: left;
  cursor: pointer;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ir-mtg-open:hover { border-color: var(--accent); }

.ir-mtg-label { font-size: var(--t-body); color: var(--ink); }
.ir-mtg-who   { font-size: var(--t-small); color: var(--ink-soft); }
.ir-mtg-date  { font-size: var(--t-micro); color: var(--ink-faint); }

/* ── Meeting: people ──────────────────────────────────────────────── */
/* The multi-person case is built and looked at now rather than assumed
   to work later: is-multi lays several people out as a real grid, not
   as a single card that happens to repeat. */

.ir-people {
  list-style: none;
  margin: 0;
  padding: 0;
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}

.ir-people.is-multi {
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
}

.ir-person {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.ir-person-name { font-size: var(--t-body); color: var(--ink); }
.ir-person-role { font-size: var(--t-small); color: var(--ink-soft); }

.ir-person-rel {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

/* The shared pill (.bench-tag, bench.css) covers confidence, meeting
   status, question source and every other small coloured label in
   this tool now. Nothing tool-specific belongs here beyond layout:
   confidence sits at the start of a row, one step down from whatever
   it is qualifying. */
.ir-person-conf {
  align-self: flex-start;
  margin-top: var(--s1);
}

/* The standing verify caveat. Module 4 gives it a real per-fact form;
   this is the tool-level version of the same promise, present from the
   first module rather than added once there is research to qualify. */
.ir-caveat {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  border-top: 1px solid var(--line);
  margin: var(--s3) 0 0;
  padding-top: var(--s2);
}

.ir-person-summary {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: var(--s2) 0 0;
}

.ir-person-lookup {
  align-self: flex-start;
  margin-top: var(--s2);
  font-size: var(--t-micro);
}

/* ── Lookup: search, candidates, confirm ──────────────────────────── */
/* BRIEF-181 module 2. The panel sits inside whichever card opened it
   rather than in a modal, so the thing being researched stays on screen
   next to the candidates being offered for it. */

.ir-lookup {
  border-top: 1px solid var(--line);
  margin-top: var(--s3);
  padding-top: var(--s3);
}

/* When the lookup is the only thing under a panel title, or sits inside
   one person's card, the rule above it separates nothing and is dropped. */
.ir-panel-title + .ir-lookup,
.ir-person > .ir-lookup {
  border-top: 0;
  margin-top: var(--s2);
  padding-top: 0;
}

.ir-lookup-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s3);
}

.ir-field-label--spaced { margin-top: var(--s3); }

.ir-lookup-hint,
.ir-lookup-note,
.ir-lookup-remaining {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: var(--s2) 0 0;
}

.ir-lookup-remaining { margin-top: var(--s3); }

.ir-lookup-lead {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

/* A lookup takes a few seconds because it is really searching, so the
   waiting state says that rather than showing a spinner and letting the
   delay read as a fault. */
.ir-lookup-status {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

.ir-lookup-error {
  font-size: var(--t-small);
  color: var(--stop);
  margin: 0;
}

/* The honest state. A search that ran and found nothing is a result,
   not a failure, so it gets a heading and a plain explanation rather
   than an empty list somebody has to interpret. */
.ir-lookup-thin-title {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0 0 var(--s1);
}

.ir-lookup-thin {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

.ir-cand-list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ir-cand {
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--panel-raised);
  padding: var(--s3);
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

/* Best match: the top-ranked candidate (the research function already
   orders most-likely-first) gets the heavier, shadowed treatment, same
   as a "well sourced" card in the redesign. */
.ir-cand--best {
  border: 2px solid var(--line-strong);
  box-shadow: var(--shadow);
}

/* Thin is a state one candidate can be in on its own, not only
   something the whole response falls into. bench.css's own
   .bench-unconfirmed carries the shared shape of "provisional"
   (dashed, unshadowed, ink softened); this compound rule is what
   makes it actually win here, written after .ir-cand's own border so
   a later-loading local rule can never quietly restore it. A person
   cannot mistake a thin candidate for a well-sourced one even sitting
   right next to one. */
.ir-cand.bench-unconfirmed {
  border-style: dashed;
  background: transparent;
}

.ir-cand.bench-unconfirmed .ir-cand-name { color: var(--ink-soft); }

.ir-cand-row {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
}

.ir-cand-avatar {
  width: 40px;
  height: 40px;
  flex: 0 0 auto;
  display: grid;
  place-items: center;
  border: 1px solid var(--line-strong);
  border-radius: var(--radius);
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 16px;
  color: var(--ink);
}

.ir-cand.bench-unconfirmed .ir-cand-avatar {
  border-style: dashed;
  color: var(--ink-faint);
}

.ir-cand-main {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ir-cand-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
}

.ir-cand-name {
  font-size: var(--t-lead);
  color: var(--ink);
}

.ir-cand-sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
  margin: 0;
}

/* The line that does the actual disambiguating. It is the reason the
   list is a list, so it reads louder than the summary under it. */
.ir-cand-dist {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0;
}

.ir-cand-summary {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: var(--s1) 0 0;
}

.ir-cand-foot {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--s2);
  margin-top: var(--s1);
}

.ir-cand-source {
  font-size: var(--t-micro);
  color: var(--ink-faint);
}

.ir-cand .bench-btn { align-self: flex-start; margin-top: var(--s2); }

/* ── Fact cards ───────────────────────────────────────────────────── */
/* BRIEF-181 module 4. One card per checkable claim, each carrying its
   own source and its own caveat. The caveat is written per confidence
   rather than being one line repeated six times, because identical
   boilerplate under every card trains somebody to stop reading it. */

.ir-fact-heading {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-faint);
  margin: var(--s4) 0 var(--s2);
}

.ir-fact-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s2);
}

.ir-fact {
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--panel-raised);
  padding: var(--s3);
}

/* A contested claim is the one thing on this screen somebody must not
   read past, so it is the one thing that changes the card's own edge. */
.ir-fact.is-disputed { border-color: var(--warn); }

.ir-fact-claim {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.5;
  margin: 0;
}

.ir-fact-dispute {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.5;
  background: var(--warn-soft);
  border-radius: var(--radius);
  padding: var(--s2);
  margin: var(--s2) 0 0;
}

.ir-fact-dispute-flag {
  color: var(--warn);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-size: var(--t-micro);
}

.ir-fact-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--s2);
  margin-top: var(--s2);
}

/* The source is a link when there is one page to point at, and plain
   text when there is not. Those look different on purpose: a fact
   nobody can click through to is a weaker fact. */
.ir-fact-source {
  font-size: var(--t-micro);
  color: var(--accent);
  min-width: 0;
  overflow-wrap: anywhere;
}

.ir-fact-source.is-plain { color: var(--ink-faint); }

.ir-fact-caveat {
  font-size: var(--t-micro);
  color: var(--ink-faint);
  margin: var(--s2) 0 0;
}

/* ── About them ───────────────────────────────────────────────────── */
/* Grouped by person, never pooled: a fact about one of three
   interviewers is useless once you cannot tell which one. */

.ir-about-person {
  border-top: 1px solid var(--line);
  margin-top: var(--s4);
  padding-top: var(--s3);
}

.ir-about-person:first-child { border-top: 0; margin-top: 0; padding-top: 0; }

.ir-about-name {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--ink);
  margin: 0 0 var(--s1);
}

.ir-about-person .ir-fact-list { margin-top: var(--s3); }

/* ── The Tell Me About A Time bank ────────────────────────────────── */
/* BRIEF-181 module 3. Three states per cluster and they never blur into
   each other: a told story is speakable, a filed bullet is not yet, and
   an empty cluster is a real gap. Colour carries that difference rather
   than the eight per-cluster hues TMAT's own map uses, because here the
   only question is whether you can say something out loud. */

.ir-cov-headline {
  font-family: var(--font-display);
  font-size: var(--t-lead);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.ir-cov-bar {
  height: 6px;
  border-radius: var(--radius-pill);
  background: var(--ground-sunk);
  overflow: hidden;
}

.ir-cov-bar-fill {
  display: block;
  height: 100%;
  background: var(--good);
}

.ir-cov-line {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: var(--s2) 0 0;
}

.ir-cov-list {
  list-style: none;
  margin: var(--s3) 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ir-cov-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s2);
  border-left: 2px solid var(--line);
  padding: 4px var(--s2);
}

.ir-cov-row.is-covered { border-left-color: var(--good); }
.ir-cov-row.is-matched { border-left-color: var(--warn); }

.ir-cov-label {
  font-size: var(--t-small);
  color: var(--ink);
  min-width: 0;
}

.ir-cov-row.is-empty .ir-cov-label { color: var(--ink-soft); }

.ir-cov-state {
  flex: 0 0 auto;
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
}

.ir-cov-row.is-covered .ir-cov-state { color: var(--good); }
.ir-cov-row.is-matched .ir-cov-state { color: var(--warn); }

.ir-cov-link {
  display: inline-block;
  margin-top: var(--s3);
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--accent);
}

.ir-bank-empty-line {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0 0 var(--s2);
}

.ir-bank-empty-line + .bench-btn { margin-top: var(--s2); }

/* ── Questions from them ──────────────────────────────────────────── */
/* Every question is matched to a told story by the tag that story
   already carries, so nothing here is a guess about the bank. What is a
   guess is which questions this round produces, and the lead line says
   so rather than letting the list read as a prediction. */

.ir-q-lead {
  font-size: var(--t-small);
  color: var(--ink-soft);
  line-height: 1.55;
  margin: 0;
}

.ir-q-block {
  border-top: 1px solid var(--line);
  margin-top: var(--s4);
  padding-top: var(--s3);
}

.ir-q-cluster {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--ink-soft);
  margin: 0 0 var(--s2);
}

.ir-q-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.ir-q-item {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.5;
}

.ir-q-answer-label {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  margin: var(--s3) 0 var(--s1);
}

.ir-q-stories {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--s1);
}

.ir-q-story {
  font-size: var(--t-small);
  color: var(--ink-soft);
  border-left: 2px solid var(--good);
  padding-left: var(--s2);
}

.ir-q-more { border-left-color: var(--line); color: var(--ink-faint); }

/* A gap says what it costs rather than sitting quiet. Somebody reading
   this before a round should know which question they would be working
   out on the spot. */
.ir-q-gap {
  font-size: var(--t-small);
  color: var(--warn);
  margin: var(--s3) 0 0;
}

/* ── Meeting: the tab rail ────────────────────────────────────────── */
/* A persistent vertical rail beside the panel, deliberately not a
   horizontal pill row. Five or more pills in a scrolling row has
   already caused real navigation trouble in an earlier prototype of
   this content, and nothing here recreates it: the rail never scrolls
   sideways at any width. */

.ir-meeting-body {
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  gap: var(--s4);
  margin-top: var(--s4);
  align-items: start;
}

.ir-tab-rail {
  display: flex;
  flex-direction: column;
  gap: 2px;
  position: sticky;
  top: var(--s4);
}

.ir-tab {
  border: 0;
  border-left: 2px solid transparent;
  background: none;
  font: inherit;
  font-size: var(--t-small);
  color: var(--ink-soft);
  text-align: left;
  padding: 10px var(--s3);
  cursor: pointer;
}

.ir-tab:hover { color: var(--ink); background: var(--ground-sunk); }

.ir-tab.is-active {
  color: var(--ink);
  border-left-color: var(--accent);
  background: var(--ground-sunk);
}

.ir-tab-panel {
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s4);
  min-height: 220px;
}

/* ── Terms gate ───────────────────────────────────────────────────── */
/* Redesigned against the Claude Design mockup: numbered cards for the
   promises that describe behaviour, one pulled-out warn callout for the
   promise that changes it. The locked copy itself is untouched, only
   split at sentence boundaries that already existed in it, never
   reworded. See renderTerms()'s own comment for exactly which sentence
   went where. */

.ir-terms-card {
  max-width: 700px;
  margin: 0 auto;
}

.ir-terms-eyebrow {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  font-weight: var(--label-weight);
  color: var(--accent);
  margin: 0 0 var(--s3);
}

.ir-terms-title {
  font-family: var(--font-display);
  font-size: var(--t-display);
  line-height: 1.05;
  color: var(--ink);
  margin: 0 0 var(--s3);
}

.ir-terms-lead {
  font-size: var(--t-lead);
  color: var(--ink-soft);
  margin: 0 0 var(--s4);
  max-width: 62ch;
}

.ir-terms-sub {
  font-size: var(--t-small);
  color: var(--ink);
  margin: 0 0 var(--s2);
}

.ir-terms-grid {
  display: grid;
  gap: var(--s2);
  margin-bottom: var(--s4);
}

.ir-terms-item {
  display: flex;
  gap: var(--s3);
  align-items: flex-start;
  background: var(--panel);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s3);
}

.ir-terms-item-num {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 26px;
  line-height: 1;
  color: var(--accent);
  width: 26px;
  flex: 0 0 auto;
}

.ir-terms-item-body {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.ir-terms-item-head {
  font-size: var(--t-lead);
  line-height: 1.3;
  color: var(--ink);
}

.ir-terms-item-sub {
  font-size: var(--t-small);
  color: var(--ink-soft);
}

.ir-terms-callout {
  background: var(--warn-soft);
  border: 1px solid var(--warn);
  border-radius: var(--radius-lg);
  padding: var(--s3);
  margin-bottom: var(--s4);
}

.ir-terms-callout p {
  font-size: var(--t-small);
  color: var(--ink);
  line-height: 1.55;
}

.ir-terms-callout strong { font-weight: 500; }

.ir-terms-check {
  display: flex;
  align-items: flex-start;
  gap: var(--s2);
  font-size: var(--t-small);
  color: var(--ink);
  margin-bottom: var(--s4);
  cursor: pointer;
}

.ir-terms-check input { margin-top: 3px; flex: 0 0 auto; }

.ir-terms-actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s2);
  align-items: center;
}

.ir-terms-shown-once {
  font-size: var(--t-small);
  color: var(--ink-faint);
  margin-left: auto;
}

/* ── Dev nav (BRIEF-181, this tool only) ──────────────────────────── */
/* Only ever rendered when the URL carries ?dev=1, so a real visitor
   never sees it. Fixed out of the way rather than in the layout, since
   it is scaffolding and not part of the tool. */

.dev-nav {
  position: fixed;
  right: var(--s3);
  /* Clears the Bench nav rather than sitting on top of it: at the very
     top right it covered the register pill and the theme toggle, which
     made the chrome untestable from the harness meant to test it. */
  top: 76px;
  z-index: 400;
  width: 210px;
  /* Module 2 added four more seed states. Capped and scrolled rather
     than left to grow, since a list long enough to run off the bottom
     of the viewport takes its own later entries out of reach. */
  max-height: calc(100vh - 96px);
  overflow-y: auto;
  background: var(--panel-raised);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: var(--s2);
  display: flex;
  flex-direction: column;
  gap: 2px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.18);
}

.dev-nav-head {
  font-size: var(--t-micro);
  text-transform: var(--label-case);
  letter-spacing: var(--label-track);
  color: var(--ink-faint);
  padding: var(--s1) var(--s2);
}

.dev-nav-btn {
  border: 0;
  background: none;
  font: inherit;
  font-size: var(--t-micro);
  color: var(--ink-soft);
  text-align: left;
  padding: 6px var(--s2);
  border-radius: var(--radius);
  cursor: pointer;
}

.dev-nav-btn:hover { background: var(--ground-sunk); color: var(--ink); }
.dev-nav-btn.is-active { background: var(--accent-soft); color: var(--accent); }

.dev-nav-note {
  font-size: 10px;
  color: var(--ink-faint);
  margin: var(--s1) 0 0;
  padding: 0 var(--s2);
}

/* ── Mobile ───────────────────────────────────────────────────────── */
/* Real handling, not reflow. The screens are already a drill down at
   every width (list, then one Opportunity, then one Meeting, one at a
   time, never a sidebar and detail together), so what changes below
   899px is that the side-by-side columns stack and the tab rail wraps
   onto its own lines instead of becoming a sideways scroller. */

@media (max-width: 899px) {
  .ir-cols { grid-template-columns: 1fr; }

  .ir-meeting-body { grid-template-columns: 1fr; }

  .ir-tab-rail {
    position: static;
    flex-direction: row;
    flex-wrap: wrap;
    gap: var(--s1);
  }

  .ir-tab {
    flex: 1 1 auto;
    min-width: 140px;
    text-align: center;
    border-left: 0;
    border-bottom: 2px solid transparent;
    border-radius: var(--radius);
  }

  .ir-tab.is-active { border-left: 0; border-bottom-color: var(--accent); }

  .ir-opp-list { grid-template-columns: 1fr; }

  .ir-people.is-multi { grid-template-columns: 1fr; }

  .ir-head { align-items: flex-start; }

  /* Two buttons side by side at 390px push each other off the edge, so
     the lookup actions stack and each one takes the full row. */
  .ir-lookup-actions { flex-direction: column; align-items: stretch; }
  .ir-lookup-actions > .bench-btn,
  .ir-lookup-actions > .bench-btn-plain { width: 100%; }

  .ir-cand-head { flex-wrap: wrap; }

  .dev-nav {
    right: var(--s2);
    top: auto;
    bottom: 56px;
    width: 170px;
  }
}