/*
  Humsana Hiring — Design v2
  Drop-in stylesheet for the existing semantic class contract.
  No template or application changes are required.
  Activate with: HR_STYLESHEET=design-v2.css
*/

:root {
  color-scheme: light;

  /* Existing handover tokens — keep these names stable. */
  --ink: #17243a;
  --paper: #f5f6f8;
  --card: #ffffff;
  --line: #dfe4eb;
  --muted: #667085;
  --navy: #14243d;
  --state-met: #216848;
  --state-partial: #966313;
  --state-none: #667085;
  --state-wrong: #a43d42;

  /* Additional design tokens. */
  --ink-soft: #344054;
  --muted-2: #8791a1;
  --surface-subtle: #f8fafc;
  --surface-raised: #ffffff;
  --surface-blue: #f0f5fb;
  --surface-green: #f0f7f3;
  --surface-amber: #fbf6eb;
  --surface-red: #fcf1f1;
  --accent: #315d86;
  --accent-hover: #244867;
  --focus: #6b9bc7;
  --shadow-xs: 0 1px 2px rgb(16 24 40 / 5%);
  --shadow-sm: 0 2px 8px rgb(16 24 40 / 6%), 0 1px 2px rgb(16 24 40 / 4%);
  --shadow-md: 0 8px 24px rgb(16 24 40 / 8%);
  --radius-sm: 7px;
  --radius-md: 11px;
  --radius-lg: 16px;
  --radius-pill: 999px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-5: 20px;
  --space-6: 24px;
  --space-8: 32px;
  --space-10: 40px;
  --page-width: 1240px;
  --reading-width: 820px;
  --body-size: 15px;
  --small-size: 13px;
}

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

html {
  min-width: 320px;
  scroll-behavior: smooth;
  scroll-padding-top: 84px;
  background: var(--paper);
}

body {
  margin: 0;
  min-width: 320px;
  overflow-x: clip;
  background: var(--paper);
  color: var(--ink);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  font-size: var(--body-size);
  font-weight: 400;
  line-height: 1.55;
  text-rendering: optimizeLegibility;
  -webkit-font-smoothing: antialiased;
}

img,
svg,
video,
canvas {
  max-width: 100%;
}

p,
li,
dd,
blockquote {
  max-width: 78ch;
}

p {
  margin: 0 0 0.85rem;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  margin: 0;
  color: var(--ink);
  font-weight: 650;
  letter-spacing: -0.025em;
  line-height: 1.22;
}

h1 {
  font-size: clamp(1.8rem, 2.6vw, 2.45rem);
  letter-spacing: -0.04em;
}

h2 {
  font-size: clamp(1.35rem, 1.8vw, 1.7rem);
}

h3 {
  font-size: 1.1rem;
}

h4 {
  font-size: 0.98rem;
}

small {
  font-size: var(--small-size);
}

strong,
b {
  font-weight: 650;
}

a {
  color: var(--accent);
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
  text-decoration-color: rgb(49 93 134 / 35%);
}

a:hover {
  color: var(--accent-hover);
  text-decoration-color: currentColor;
}

:focus-visible {
  outline: 3px solid rgb(107 155 199 / 55%);
  outline-offset: 2px;
  border-radius: 5px;
}

::selection {
  color: #10243b;
  background: #dce9f5;
}


/* Frame: wordmark and section navigation inside the top band, and the footer. */
.wordmark {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  color: var(--ink);
  font-size: 15px;
  font-weight: 750;
  letter-spacing: -0.01em;
  text-decoration: none;
}

.wordmark img {
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 6px;
}

.wordmark em {
  margin-left: 5px;
  color: var(--muted);
  font-style: normal;
  font-weight: 600;
}

.appnav {
  display: flex;
  gap: 24px;
  margin-left: auto;
  font-size: 13.5px;
  font-weight: 550;
}

.appnav a {
  padding: 6px 0;
  color: var(--ink-soft);
  border-bottom: 2px solid transparent;
  text-decoration: none;
}

.appnav a:hover {
  color: var(--ink);
  border-bottom-color: var(--line);
}

.appnav a[aria-current="page"] {
  color: var(--ink);
  border-bottom-color: var(--navy);
}

.badge {
  display: inline-block;
  min-width: 18px;
  margin-left: 5px;
  padding: 1px 6px;
  color: var(--ink-soft);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  vertical-align: 1px;
}

.shell {
  min-height: calc(100vh - 58px - 96px);
}

.foot {
  padding: 26px max(24px, calc((100vw - var(--page-width)) / 2));
  color: var(--muted);
  background: var(--card);
  border-top: 1px solid var(--line);
  font-size: 12.5px;
}

.foot p {
  margin: 0;
}

.foot a {
  color: var(--ink-soft);
}

@media (max-width: 640px) {
  .band {
    flex-wrap: wrap;
    gap: 8px 16px;
    padding: 10px 18px;
  }

  .appnav {
    width: 100%;
    margin-left: 0;
    gap: 18px;
    overflow-x: auto;
    font-size: 13px;
  }
}


/* ----------------------------------------------------------------------------------------------------------------
/* Cards and stacked forms fill their column instead of shrinking to the widest label. */
.sheet-door,
.sheet-door form,
.stack {
  align-items: stretch;
  width: 100%;
  box-sizing: border-box;
}

.sheet-door > *,
.stack > * {
  width: 100%;
  min-width: 0;
  box-sizing: border-box;
}

.posting-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 12px;
}

.posting-title {
  line-height: 1.35;
}

   Layout primitives.
   These names carry structure across the signed-in surfaces: the desk grid, the evidence stack, the facts list, the
   notice panels. They were previously defined only in brand.css, which is why pages lost their structure the moment the
   sheet changed. Defining them here keeps the contract complete: appearance still belongs to the design team, structure
   is guaranteed by the sheet.
   ---------------------------------------------------------------------------------------------------------------- */
.stack {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.inline {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.after {
  margin-top: 16px;
}

.actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.narrow {
  max-width: 46rem;
  margin: 0 auto;
}

.plain {
  margin: 0;
  padding: 0;
  list-style: none;
}

.mono {
  font-family: ui-monospace, SFMono-Regular, "SF Mono", Menlo, monospace;
  font-size: 0.86em;
}

.facts {
  display: grid;
  grid-template-columns: minmax(8rem, max-content) minmax(0, 1fr);
  gap: 6px 18px;
  margin: 12px 0 0;
}

.facts dt {
  color: var(--muted);
  font-size: 12px;
  letter-spacing: 0.02em;
}

.facts dd {
  margin: 0;
  color: var(--ink-soft);
  font-size: 13.5px;
}

.notice,
.notice.ok,
.notice.bad {
  margin: 14px 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-left: 3px solid var(--accent);
  border-radius: var(--radius-sm);
  font-size: 13.5px;
}

.notice.ok {
  border-left-color: var(--state-met);
  background: var(--surface-green);
}

.notice.bad {
  border-left-color: var(--state-wrong);
  background: var(--surface-red);
}

.notice p {
  margin: 0;
}

.blind {
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--surface-blue);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 13px;
}

.quote {
  margin: 10px 0;
  padding: 2px 0 2px 14px;
  color: var(--ink-soft);
  border-left: 3px solid var(--line);
  font-size: 13.5px;
  line-height: 1.55;
}

.claim {
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}

.why {
  color: var(--muted);
  font-size: 12.5px;
}

.findings,
.passages,
.evidence-list {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.criteria,
.two-up {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px;
}

.filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px;
  font-size: 13px;
}

.next {
  color: var(--muted);
  font-size: 12.5px;
}

.role-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 10px;
  margin-bottom: 14px;
}

.who {
  color: var(--muted);
  font-size: 12.5px;
}

.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 28px;
  align-items: start;
}

.desk-main {
  display: flex;
  flex-direction: column;
  gap: 22px;
  min-width: 0;
}

.connect-strip {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 14px 16px;
  background: var(--surface-blue);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.connect-strip h2,
.connect-strip p {
  margin: 0;
}

.connect-strip h2 {
  font-size: 14.5px;
}

.connect-actions {
  display: flex;
  align-items: center;
  gap: 10px;
}

.sheet-door {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 18px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.sheet-door h3 {
  margin: 0;
  font-size: 15.5px;
}

.queue-table {
  width: 100%;
  border-collapse: collapse;
}

@media (max-width: 980px) {
  .criteria,
  .two-up,
  .desk-grid {
    grid-template-columns: minmax(0, 1fr);
  }

  .facts {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* Global frame and type hierarchy */
.band {
  position: relative;
  display: flex;
  align-items: center;
  gap: 14px;
  min-height: 58px;
  padding: 12px max(24px, calc((100vw - var(--page-width)) / 2));
  color: var(--ink);
  background: var(--card);
  border-bottom: 1px solid var(--line);
}

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

.eyebrow {
  margin: 0 0 7px;
  color: var(--muted);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.095em;
  line-height: 1.35;
  text-transform: uppercase;
}

.lede {
  max-width: 70ch;
  margin: 10px 0 0;
  color: var(--ink-soft);
  font-size: 1.04rem;
  line-height: 1.55;
}

.hint,
.quiet {
  color: var(--muted);
  font-size: 0.88rem;
  line-height: 1.5;
}

.hint {
  margin-top: 5px;
}

.page {
  width: min(calc(100% - 48px), var(--page-width));
  margin: 0 auto;
  padding: 30px 0 64px;
}

.sheet {
  width: min(100%, var(--reading-width));
  margin: 22px auto;
  padding: clamp(20px, 3vw, 30px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.sheet.wide {
  width: 100%;
  max-width: var(--page-width);
}

.section-head {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 18px;
  margin: 0 0 18px;
}

.section-head > :first-child {
  min-width: 0;
}

.section-head p {
  margin: 6px 0 0;
  color: var(--muted);
}

.split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(260px, 0.72fr);
  align-items: start;
  gap: 22px;
  width: 100%;
}

.rule {
  height: 1px;
  margin: 22px 0;
  background: var(--line);
  border: 0;
}

.tag,
.state {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  width: fit-content;
  max-width: 100%;
  padding: 4px 9px;
  color: var(--ink-soft);
  background: #f0f2f5;
  border: 1px solid #e4e7ec;
  border-radius: var(--radius-pill);
  font-size: 11px;
  font-weight: 650;
  line-height: 1.35;
  white-space: normal;
}

.state {
  padding: 5px 10px;
  background: var(--surface-subtle);
  border-color: var(--line);
  font-size: 12px;
}

.state.met,
.tag.met {
  color: var(--state-met);
  background: var(--surface-green);
  border-color: #c9dfd1;
}

.state.partial,
.tag.partial {
  color: var(--state-partial);
  background: var(--surface-amber);
  border-color: #ead9b5;
}

.state.not-evidenced,
.tag.not-evidenced {
  color: var(--state-none);
  background: #f2f4f7;
  border-color: #e0e4e9;
}

.state.contradicted,
.tag.contradicted {
  color: var(--state-wrong);
  background: var(--surface-red);
  border-color: #eccaca;
}

/* Controls: record-changing actions must look like actions, never links. */
button,
.button,
.inline-button,
input,
select,
textarea {
  font: inherit;
}

button,
.button,
.inline-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 40px;
  padding: 9px 15px;
  color: #fff;
  background: var(--navy);
  border: 1px solid var(--navy);
  border-radius: var(--radius-sm);
  box-shadow: none;
  font-size: 13px;
  font-weight: 650;
  line-height: 1.25;
  text-align: center;
  text-decoration: none;
  cursor: pointer;
  transition: background-color 140ms ease, border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

button:hover,
.button:hover,
.inline-button:hover {
  color: #fff;
  background: #203b60;
  border-color: #203b60;
  text-decoration: none;
}

button:active,
.button:active,
.inline-button:active {
  transform: translateY(1px);
}

button:disabled,
.button[aria-disabled="true"],
.inline-button:disabled {
  opacity: 0.48;
  cursor: not-allowed;
  transform: none;
}

.button {
  width: auto;
}

.inline-button {
  min-height: 34px;
  padding: 7px 11px;
  font-size: 12px;
}

.quiet,
a.quiet {
  color: var(--muted);
}

.field {
  display: grid;
  gap: 6px;
  min-width: 0;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 600;
}

input:not([type="checkbox"]):not([type="radio"]),
select,
textarea {
  width: 100%;
  min-width: 0;
  min-height: 42px;
  padding: 10px 12px;
  color: var(--ink);
  background: #fff;
  border: 1px solid #cfd6df;
  border-radius: var(--radius-sm);
  box-shadow: inset 0 1px 1px rgb(16 24 40 / 2%);
  font-size: 14px;
  line-height: 1.45;
}

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

input::placeholder,
textarea::placeholder {
  color: #98a2b3;
  opacity: 1;
}

input:hover,
select:hover,
textarea:hover {
  border-color: #aeb9c7;
}

input:focus,
select:focus,
textarea:focus {
  border-color: var(--focus);
  outline: 3px solid rgb(107 155 199 / 15%);
}

.row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px 14px;
  min-width: 0;
}

.check {
  display: flex;
  align-items: flex-start;
  gap: 9px;
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

.check input {
  flex: 0 0 auto;
  width: 16px;
  height: 16px;
  margin: 2px 0 0;
  accent-color: var(--navy);
}

/* Details / disclosures */
details {
  min-width: 0;
  border-top: 1px solid var(--line);
}

details:last-child {
  border-bottom: 1px solid var(--line);
}

details > summary {
  position: relative;
  padding: 12px 28px 12px 2px;
  color: var(--ink-soft);
  font-size: 13px;
  font-weight: 620;
  line-height: 1.45;
  cursor: pointer;
  list-style-position: outside;
}

details > summary:hover {
  color: var(--accent);
}

details[open] > summary {
  margin-bottom: 8px;
  color: var(--ink);
}

details > :not(summary) {
  min-width: 0;
}


/* The two ways in sit side by side when there is room, and stack when there is not. */
.doors {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  align-items: start;
  gap: 16px;
  margin: 0 0 18px;
}

/* Desk: work first, attention alongside it. */
.connect-strip {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 22px;
  padding: 15px 18px;
  background: var(--surface-blue);
  border: 1px solid #d9e4ef;
  border-radius: var(--radius-md);
}

.connect-strip p {
  margin: 0;
}

.connect-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.7fr) minmax(290px, 0.92fr);
  align-items: start;
  gap: 24px;
  width: 100%;
}

.desk-main,
.attention-col {
  min-width: 0;
}

.attention-col {
  position: sticky;
  top: 20px;
  display: grid;
  gap: 14px;
}

.sheet-door,
.card {
  min-width: 0;
  padding: 19px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.sheet-door {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  min-height: 150px;
  text-decoration: none;
  transition: border-color 140ms ease, box-shadow 140ms ease, transform 140ms ease;
}

.sheet-door:hover {
  border-color: #afc2d5;
  box-shadow: var(--shadow-sm);
  transform: translateY(-1px);
}

.sheet-door h2,
.sheet-door h3 {
  color: var(--ink);
}

.card h2,
.card h3,
.card h4 {
  margin-bottom: 8px;
}

.card > :last-child,
.sheet-door > :last-child {
  margin-bottom: 0;
}

.postings,
.posting-list {
  display: grid;
  gap: 10px;
  min-width: 0;
}

.posting {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 8px;
  min-width: 0;
  padding: 15px 16px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.posting-title {
  display: block;
  color: var(--ink);
  font-weight: 650;
  text-decoration: none;
}

.posting-title:hover {
  color: var(--accent);
}

.posting-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px 12px;
  margin-top: 5px;
  color: var(--muted);
  font-size: 12px;
}

.posting-rule {
  height: 1px;
  background: var(--line);
}

/* Role setup and criteria */
.stepper {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0 0 22px;
  padding: 0;
  overflow-x: auto;
  list-style: none;
  scrollbar-width: thin;
}

.step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
  padding: 8px 11px;
  color: var(--muted);
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
}

.step[aria-current="step"],
.step.active,
.step.current {
  color: var(--navy);
  background: var(--surface-blue);
  border-color: #b8cadd;
}

.step-card {
  min-width: 0;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.criterion-card {
  min-width: 0;
  margin: 0 0 16px;
  padding: 20px;
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
}

.criterion-card > :first-child {
  margin-top: 0;
}

.criterion-card > :last-child {
  margin-bottom: 0;
}

.criterion-card h3,
.criterion-card h4 {
  margin-bottom: 10px;
}

.question {
  margin: 12px 0;
  padding: 13px 15px;
  color: var(--ink-soft);
  background: var(--surface-blue);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

.review {
  margin-top: 14px;
  padding: 15px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.next-step {
  margin: 14px 0;
  padding: 14px 16px;
  color: var(--ink);
  background: var(--surface-blue);
  border-left: 3px solid var(--accent);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}


/* Additions requested by the role page migration, one class each, no per-element hooks. */
.table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}

.table th {
  padding: 10px 11px;
  color: var(--muted);
  border-bottom: 1px solid var(--line);
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.065em;
  text-align: left;
  text-transform: uppercase;
}

.table td {
  padding: 11px;
  color: var(--ink-soft);
  border-bottom: 1px solid var(--line);
  vertical-align: top;
}

.table tbody tr:last-child td {
  border-bottom: 0;
}

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

@media (max-width: 980px) {
  .two-up {
    grid-template-columns: minmax(0, 1fr);
  }
}

.step.done {
  color: var(--state-met);
  background: var(--surface-green);
  border-color: #c9dfd1;
}

.tag.warn {
  color: var(--state-partial);
  background: var(--surface-amber);
  border-color: #ead9b5;
}

/* Candidate packet: conclusion first, evidence immediately accessible. */
.packet-nav {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  margin: 0 0 22px;
  padding: 9px 10px;
  overflow-x: auto;
  background: rgb(255 255 255 / 94%);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  backdrop-filter: blur(12px);
  scrollbar-width: thin;
}

.packet-nav a {
  flex: 0 0 auto;
  padding: 7px 10px;
  color: var(--ink-soft);
  border-radius: 6px;
  font-size: 12px;
  font-weight: 600;
  text-decoration: none;
}

.packet-nav a:hover,
.packet-nav a[aria-current="location"] {
  color: var(--navy);
  background: var(--surface-blue);
}

.overview {
  display: grid;
  gap: 12px;
  margin: 0 0 22px;
  padding: clamp(18px, 3vw, 26px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.overview h1,
.overview h2,
.overview h3 {
  margin: 0;
}

.overview p:last-child {
  margin-bottom: 0;
}

.criterion-card.s-met {
  border-left: 3px solid var(--state-met);
}

.criterion-card.s-partial {
  border-left: 3px solid var(--state-partial);
}

.criterion-card.s-not_evidenced {
  border-left: 3px solid var(--state-none);
}

.criterion-card.s-contradicted {
  border-left: 3px solid var(--state-wrong);
}

.links {
  display: grid;
  gap: 14px;
  margin: 18px 0;
  padding: 18px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.links h2,
.links h3 {
  margin: 0;
}

.passage-list {
  display: grid;
  gap: 10px;
  min-width: 0;
  margin: 12px 0;
}

.passage {
  min-width: 0;
  padding: 14px 15px;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}

.passage p {
  margin: 0 0 9px;
  font-size: 14px;
  line-height: 1.6;
}

.passage p:last-child {
  margin-bottom: 0;
}

.passage.needs-eye {
  background: var(--surface-amber);
  border-color: #e7d4ad;
}

.suggestion {
  display: grid;
  gap: 7px;
  margin: 10px 0;
  padding: 12px 14px;
  background: var(--surface-blue);
  border: 1px solid #d7e3ef;
  border-radius: var(--radius-sm);
}

.suggestion p {
  margin: 0;
}

.suggestion .row {
  justify-content: space-between;
}

.decision {
  margin: 12px 0;
  padding: 16px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.state-line {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin: 8px 0;
}

/* Cross-role queue */
table.queue {
  width: 100%;
  border: 1px solid var(--line);
  border-collapse: separate;
  border-spacing: 0;
  overflow: hidden;
  background: var(--card);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-xs);
  table-layout: fixed;
}

table.queue th,
table.queue td {
  min-width: 0;
  padding: 12px 11px;
  border-bottom: 1px solid var(--line);
  text-align: left;
  vertical-align: top;
  overflow-wrap: anywhere;
  word-break: normal;
}

table.queue th {
  color: var(--muted);
  background: #f7f8fa;
  font-size: 10px;
  font-weight: 750;
  letter-spacing: 0.065em;
  line-height: 1.35;
  text-transform: uppercase;
}

table.queue td {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.45;
}

table.queue tbody tr:last-child td {
  border-bottom: 0;
}

table.queue tbody tr:hover td {
  background: #fafbfd;
}

table.queue th:nth-child(1),
table.queue td:nth-child(1) { width: 11%; }
table.queue th:nth-child(2),
table.queue td:nth-child(2) { width: 15%; }
table.queue th:nth-child(3),
table.queue td:nth-child(3) { width: 12%; }
table.queue th:nth-child(4),
table.queue td:nth-child(4) { width: 30%; }
table.queue th:nth-child(5),
table.queue td:nth-child(5) { width: 24%; }
table.queue th:nth-child(6),
table.queue td:nth-child(6) { width: 8%; }

.filter-bar {
  display: flex;
  align-items: end;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0 0 18px;
  padding: 14px;
  background: var(--surface-subtle);
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
}

.filter-bar > * {
  min-width: 150px;
  max-width: 260px;
}


/* Secondary actions: the legacy class kept deliberately, so outline buttons do not become primary. */
button.secondary,
.secondary {
  color: var(--ink);
  background: #fff;
  border-color: #cfd6df;
}

button.secondary:hover,
.secondary:hover {
  color: var(--navy);
  background: var(--surface-subtle);
  border-color: #aeb9c7;
}

/* Desk posting source line: this element carries text, not a divider. */
.posting-source {
  margin: 0;
  color: var(--muted);
  font-size: 12px;
  line-height: 1.5;
}

/* Short pages: keep the footer below the fold instead of leaving a void under three lines. */
.page {
  min-height: calc(100vh - 220px);
}

/* Research and discovery cards */
.card {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 10px;
}

.card .row {
  justify-content: space-between;
}

.card blockquote {
  margin: 4px 0;
  padding: 12px 14px;
  color: var(--ink-soft);
  background: var(--surface-subtle);
  border-left: 3px solid #b9c9d9;
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  font-size: 14px;
}

.card .inline-button {
  width: auto;
  align-self: flex-start;
}

/* Founder recommendation pack */
.next-step {
  line-height: 1.55;
}

.overview + .criterion-card {
  margin-top: 0;
}

/* Interview plan */
.plan {
  width: min(100%, 900px);
  margin: 0 auto;
  padding: clamp(22px, 4vw, 40px);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
}

.plan h1 {
  margin-bottom: 8px;
}

.plan h2 {
  margin: 28px 0 12px;
  padding-bottom: 9px;
  border-bottom: 1px solid var(--line);
  font-size: 1.2rem;
}

.plan h3 {
  margin: 18px 0 8px;
}

.plan p,
.plan li {
  font-size: 14px;
  line-height: 1.6;
}

.plan-actions {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  flex-wrap: wrap;
  gap: 10px;
  width: min(100%, 900px);
  margin: 0 auto 14px;
}

.print-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: auto;
  min-height: 36px;
  padding: 7px 12px;
  color: var(--ink);
  background: var(--card);
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 650;
  text-decoration: none;
}

.print-link:hover {
  color: var(--accent);
  background: var(--surface-subtle);
  border-color: #b8cadd;
}

/* Notices, operational states and content safety */
[role="alert"],
.error,
.alert {
  padding: 12px 14px;
  color: var(--state-wrong);
  background: var(--surface-red);
  border: 1px solid #eccaca;
  border-radius: var(--radius-sm);
}

[role="status"],
.notice,
.success {
  padding: 12px 14px;
  color: var(--state-met);
  background: var(--surface-green);
  border: 1px solid #c9dfd1;
  border-radius: var(--radius-sm);
}

pre,
code {
  max-width: 100%;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

/* Responsive layouts: no horizontal scrolling on product surfaces. */
@media (max-width: 980px) {
  .desk-grid {
    grid-template-columns: minmax(0, 1fr) minmax(245px, 0.78fr);
    gap: 16px;
  }

  table.queue th,
  table.queue td {
    padding: 10px 8px;
    font-size: 12px;
  }

  .page {
    width: min(calc(100% - 36px), var(--page-width));
  }
}

@media (max-width: 820px) {
  .page {
    width: min(calc(100% - 32px), var(--page-width));
    padding-top: 22px;
    padding-bottom: 42px;
  }

  .band {
    min-height: 54px;
    padding: 10px 16px;
  }

  .desk-grid,
  .split {
    grid-template-columns: minmax(0, 1fr);
  }

  .attention-col {
    position: static;
    grid-row: auto;
  }

  .connect-strip {
    align-items: flex-start;
    flex-direction: column;
  }

  .connect-actions {
    width: 100%;
  }

  .connect-actions > * {
    flex: 1 1 auto;
  }

  .sheet {
    padding: 19px;
  }

  table.queue,
  table.queue tbody,
  table.queue tr,
  table.queue td {
    display: block;
    width: 100%;
  }

  table.queue {
    border: 0;
    background: transparent;
    box-shadow: none;
    overflow: visible;
  }

  table.queue thead {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    white-space: nowrap;
    border: 0;
  }

  table.queue tbody {
    display: grid;
    gap: 12px;
  }

  table.queue tbody tr {
    display: grid;
    gap: 0;
    padding: 7px 14px;
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: var(--radius-md);
    box-shadow: var(--shadow-xs);
  }

  table.queue tbody tr:hover td {
    background: transparent;
  }

  table.queue td,
  table.queue td:nth-child(n) {
    display: grid;
    grid-template-columns: minmax(92px, 0.34fr) minmax(0, 1fr);
    gap: 12px;
    width: 100%;
    padding: 9px 0;
    border-bottom: 1px solid #edf0f3;
    font-size: 13px;
  }

  table.queue td:last-child {
    border-bottom: 0;
  }

  table.queue td:nth-child(1)::before { content: "Candidate"; }
  table.queue td:nth-child(2)::before { content: "Role"; }
  table.queue td:nth-child(3)::before { content: "State"; }
  table.queue td:nth-child(4)::before { content: "Why"; }
  table.queue td:nth-child(5)::before { content: "Next action"; }
  table.queue td:nth-child(6)::before { content: "Added"; }

  table.queue td::before {
    color: var(--muted);
    font-size: 10px;
    font-weight: 750;
    letter-spacing: 0.06em;
    line-height: 1.5;
    text-transform: uppercase;
  }

  .filter-bar > * {
    flex: 1 1 180px;
    max-width: none;
  }

  .packet-nav {
    top: 0;
    margin-bottom: 16px;
    border-radius: var(--radius-sm);
  }

  .criterion-card {
    padding: 16px;
    margin-bottom: 12px;
  }

  .overview {
    padding: 18px;
  }

  .plan {
    padding: 20px;
  }
}

@media (max-width: 520px) {
  :root {
    --body-size: 14px;
  }

  .page {
    width: calc(100% - 24px);
    padding-top: 16px;
  }

  h1 {
    font-size: 1.72rem;
  }

  h2 {
    font-size: 1.3rem;
  }

  .sheet {
    margin: 14px auto;
    padding: 16px;
    border-radius: var(--radius-md);
  }

  .section-head {
    align-items: flex-start;
    flex-direction: column;
    gap: 8px;
  }

  .posting {
    grid-template-columns: minmax(0, 1fr);
  }

  .posting > .row {
    justify-content: flex-start;
  }

  .sheet-door,
  .card {
    padding: 16px;
  }

  .packet-nav {
    gap: 2px;
    padding: 6px;
  }

  .packet-nav a {
    padding: 7px 8px;
    font-size: 11px;
  }

  .passage {
    padding: 12px;
  }

  .suggestion {
    padding: 11px;
  }

  table.queue tbody tr {
    padding: 5px 11px;
  }

  table.queue td,
  table.queue td:nth-child(n) {
    grid-template-columns: 84px minmax(0, 1fr);
    gap: 9px;
  }

  .plan {
    padding: 16px;
    border-radius: var(--radius-md);
  }

  .plan-actions {
    justify-content: flex-start;
  }

  button,
  .button,
  .inline-button {
    max-width: 100%;
  }
}


/* Long unbroken URLs: wrap rather than widen the page. */
.links a,
.passage a,
.passage blockquote,
.card a,
.table td,
.hint,
.lede {
  overflow-wrap: anywhere;
}

/* Print: the interview artifact, not the application chrome. */
@media print {
  @page {
    size: A4;
    margin: 14mm 13mm 15mm;
  }

  html,
  body {
    min-width: 0;
    background: #fff !important;
    color: #17243a !important;
    font-size: 10.5pt;
    overflow: visible !important;
  }

  .band,
  header,
  nav,
  .packet-nav,
  .plan-actions,
  .print-link,
  footer,
  button,
  .button,
  .inline-button {
    display: none !important;
  }

  .page,
  .sheet,
  .sheet.wide,
  .plan {
    width: 100% !important;
    max-width: none !important;
    margin: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    background: #fff !important;
  }

  .plan {
    color: #17243a !important;
  }

  h1,
  h2,
  h3,
  h4 {
    break-after: avoid-page;
    page-break-after: avoid;
  }

  p,
  li,
  blockquote,
  .criterion-card,
  .passage,
  .decision {
    orphans: 3;
    widows: 3;
  }

  .criterion-card,
  .passage,
  .decision {
    break-inside: avoid-page;
    page-break-inside: avoid;
    box-shadow: none !important;
  }

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

  table,
  tr,
  td,
  th {
    break-inside: avoid-page;
    page-break-inside: avoid;
  }
}

@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    scroll-behavior: auto !important;
    transition-duration: 0.01ms !important;
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
  }
}


/* ==================================================================================================================
   Foundation pass.
   Everything above this line grew page by page, and that is why spacing and type drifted between surfaces. This block
   sets one grid, one type scale, one spacing rhythm and one set of component metrics. It sits last on purpose: it is
   the authority, so a page cannot inherit a different rhythm by accident. Values follow Swiss Modernism 2.0 from the
   design system search: a 12-column rational grid, Inter, paper background, navy ink, mathematical spacing.
   Scale: 4 8 12 16 24 32 48 64.
   ================================================================================================================== */
:root {
  --page-width: 1200px;
  --gutter: clamp(20px, 4vw, 40px);
  --radius: 10px;
  --rule: 1px solid var(--line);
}

body {
  color: var(--ink);
  background: var(--paper);
  font-size: 14.5px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* One container. Every surface uses it, at the same working width. */
.page,
.sheet {
  width: 100%;
  max-width: var(--page-width);
  margin: 0 auto;
  padding: 32px var(--gutter) 64px;
  box-sizing: border-box;
}

.page > * + *,
.sheet > * + * {
  margin-top: 28px;
}

/* Type scale: 34 / 21 / 16 / 14.5 / 12.5. Nothing else. */
.page h1,
.sheet h1,
.section-head h1,
h1 {
  margin: 0;
  color: var(--ink);
  font-size: clamp(25px, 2.6vw, 32px);
  font-weight: 700;
  letter-spacing: -0.022em;
  line-height: 1.14;
}

h2 {
  margin: 0 0 8px;
  color: var(--ink);
  font-size: 20px;
  font-weight: 680;
  letter-spacing: -0.012em;
  line-height: 1.28;
}

h3 {
  margin: 0 0 6px;
  color: var(--ink);
  font-size: 15.5px;
  font-weight: 660;
  line-height: 1.35;
}

p {
  margin: 0 0 12px;
  max-width: 70ch;
}

p:last-child {
  margin-bottom: 0;
}

.lede {
  max-width: 68ch;
  margin: 10px 0 0;
  font-size: 15px;
  line-height: 1.6;
}

.eyebrow {
  margin: 0 0 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.1em;
}

.section-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  margin: 0 0 20px;
  padding-bottom: 14px;
  border-bottom: var(--rule);
}

.section-head > div {
  min-width: 0;
}

/* Panels: one padding, one radius, one border. No nested borders inside them. */
.card,
.sheet-door,
.finding,
.criterion-card,
.posting,
.lead,
.artefact {
  padding: 20px 22px;
  background: var(--card);
  border: var(--rule);
  border-radius: var(--radius);
  box-shadow: none;
}

.card > * + *,
.sheet-door > * + *,
.finding > * + *,
.criterion-card > * + *,
.posting > * + * {
  margin-top: 12px;
}

.card h3,
.sheet-door h3,
.finding h3,
.criterion-card h3,
.posting h3 {
  margin: 0;
}

/* Notice panels keep their colour but share the metric. */
.notice,
.blocked,
.blind {
  padding: 14px 16px;
  border-radius: var(--radius);
}

/* Tables: quiet header, horizontal rules only, generous rows. */
.table,
.queue-table,
table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13.5px;
}

thead th {
  padding: 10px 14px;
  color: var(--muted);
  background: transparent;
  border-bottom: var(--rule);
  font-size: 10.5px;
  font-weight: 750;
  letter-spacing: 0.075em;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}

tbody td {
  padding: 14px;
  color: var(--ink-soft);
  border-bottom: var(--rule);
  vertical-align: top;
  line-height: 1.5;
}

tbody tr:last-child td {
  border-bottom: 0;
}

/* Controls: one height, one padding, one radius. Secondary is outlined, never filled. */
button,
.button,
.inline-button,
input[type="submit"],
input[type="button"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 38px;
  padding: 8px 16px;
  border: 1px solid transparent;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 620;
  line-height: 1.2;
  text-decoration: none;
  cursor: pointer;
}

button.secondary,
.button.secondary,
.secondary {
  color: var(--ink);
  background: var(--card);
  border-color: var(--line);
}

button.secondary:hover,
.secondary:hover {
  border-color: var(--muted);
}

.field {
  gap: 6px;
  font-size: 12.5px;
  font-weight: 600;
}

.field input,
.field textarea,
.field select {
  font-weight: 400;
  font-size: 13.5px;
}

/* Two-column working grid used by the desk, the packet and the role page. */
.split,
.desk-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(280px, 340px);
  gap: 32px;
  align-items: start;
}

@media (max-width: 1000px) {
  .split,
  .desk-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 24px;
  }

  .page,
  .sheet {
    padding: 24px var(--gutter) 48px;
  }
}


/* Role-card meta: chips and the occupant count belong on one line, and the source line reads as one sentence. */
.posting {
  padding: 16px 18px;
}

.posting-meta {
  gap: 8px;
  flex-wrap: nowrap;
}

.posting-meta > * {
  white-space: nowrap;
}

.posting-source {
  color: var(--muted);
  font-size: 12px;
  line-height: 1.45;
}

.appnav .badge {
  vertical-align: middle;
}

@media (max-width: 520px) {
  .posting-meta {
    flex-wrap: wrap;
  }
}


/* The right rail keeps its place while the working column scrolls, so the desk does not look half-empty. */
.attention-col {
  position: sticky;
  top: 20px;
  align-self: start;
  display: flex;
  flex-direction: column;
  gap: 24px;
  min-width: 0;
}

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

.asked {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 12px 0 0;
  padding-left: 18px;
}

.asked li {
  color: var(--ink-soft);
  font-size: 13px;
  line-height: 1.55;
}

.sheet-door p {
  margin-bottom: 8px;
}

.sheet-door .field + .field {
  margin-top: 4px;
}


/* A stacked form must not stretch its submit control: buttons size to their label, full stop. */
.stack > button,
.stack > input[type="submit"],
.stack > .inline-button,
.stack > .button,
.sheet-door > button,
.sheet-door > input[type="submit"],
.sheet-door > .actions {
  width: auto;
  align-self: flex-start;
}

.stack > .actions,
.sheet-door > .actions {
  display: flex;
}

textarea {
  min-height: 96px;
}


/* Criterion cards: same content, less air. Evidence and limitations are untouched. */
.criterion-card {
  padding: 18px 20px;
}

.criterion-card > * + * {
  margin-top: 10px;
}

.criterion-card h3 {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: 15px;
  line-height: 1.4;
}

.criterion-card > h3 + p {
  margin-top: 4px;
}

details.passages > summary,
details > summary {
  cursor: pointer;
}