/* hire.css
   Shared styles for the How to Hire reference pages and the GTM Hiring Scope Builder.
   Tokens match the verified site design system (Fraunces + IBM Plex, ink/teal/amber/paper). */

:root {
  --ink: #0F2033;
  --ink-900: #0E141C;
  --teal: #1B6E76;
  --teal-soft: #7BAFA6;
  --amber: #D98F3E;
  --amber-bright: #F2A93B;
  --paper: #F3EFE7;
  --paper-2: #ECE5D8;
  --card: #FBF8F1;
  --white: #FFFFFF;
  --line: rgba(15, 32, 51, .14);
  --line-strong: rgba(15, 32, 51, .28);
  --ink-60: rgba(15, 32, 51, .60);
  --ink-45: rgba(15, 32, 51, .45);
  --rust: #9C4221;
  --display: 'Fraunces', Georgia, serif;
  --body: 'IBM Plex Sans', system-ui, -apple-system, sans-serif;
  --mono: 'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --radius: 10px;
  --maxw: 1080px;
  --readw: 720px;
  --shadow: 0 1px 2px rgba(15, 32, 51, .06), 0 8px 24px rgba(15, 32, 51, .06);
}

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

body.hire {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.62;
  -webkit-font-smoothing: antialiased;
}

/* Plain body links. Scoped to :not(.btn) because `.hire a` (0,1,1) outranks
   `.btn-solid` (0,1,0), which was repainting every anchor styled as a solid
   button with teal text on the navy fill and making it unreadable. */
.hire a:not(.btn):not(.role-card) { color: var(--teal); }
.hire a:not(.btn):not(.role-card):hover { color: var(--ink); }

.wrap { max-width: var(--maxw); margin: 0 auto; padding: 0 20px; }
.read { max-width: var(--readw); }

.hire h1, .hire h2, .hire h3, .hire h4 {
  font-family: var(--display); font-weight: 600; line-height: 1.1; margin: 0 0 .5em; letter-spacing: -.01em;
}
.hire h1 { font-size: clamp(2.1rem, 5vw, 3.1rem); }
.hire h2 { font-size: clamp(1.4rem, 3.4vw, 1.85rem); margin-top: 2.4rem; }
.hire h3 { font-size: 1.18rem; margin-top: 1.8rem; }
.hire p { margin: 0 0 1.1em; }

.eyebrow {
  font-family: var(--mono); font-size: .74rem; letter-spacing: .16em; text-transform: uppercase;
  font-weight: 600; color: var(--teal); margin: 0 0 .7rem;
}
.eyebrow.on-dark { color: var(--amber-bright); }


/* ---------------------------------------------------------------- hero */

.hero { padding: 3.4rem 0 2.6rem; border-bottom: 1px solid var(--line); }
.hero h1 { color: var(--ink); margin-bottom: .6rem; }
.hero .lede { font-size: 1.12rem; color: var(--ink-60); max-width: 46rem; margin-bottom: 1.4rem; }

.hero-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: center; }
@media (min-width: 860px) { .hero-grid { grid-template-columns: 1fr 230px; gap: 2.4rem; } }
.hero-art { display: none; }
@media (min-width: 860px) { .hero-art { display: block; } }
.hero-art svg { width: 100%; height: auto; display: block; }
.hero-art .anim-b1 { animation: heroSlideB1 9s ease-in-out infinite; }
.hero-art .anim-b2 { animation: heroSlideB2 9s ease-in-out .15s infinite; }
.hero-art .anim-b3 { animation: heroSlideB3 9s ease-in-out .3s infinite; }
@keyframes heroSlideB1 { 0%, 18% { transform: translateX(0); } 52%, 78% { transform: translateX(132px); } 100% { transform: translateX(0); } }
@keyframes heroSlideB2 { 0%, 18% { transform: translateX(0); } 52%, 78% { transform: translateX(88px); } 100% { transform: translateX(0); } }
@keyframes heroSlideB3 { 0%, 18% { transform: translateX(0); } 52%, 78% { transform: translateX(44px); } 100% { transform: translateX(0); } }
@media (prefers-reduced-motion: reduce) { .hero-art .anim-b1, .hero-art .anim-b2, .hero-art .anim-b3 { animation: none !important; } }


.hero-chips { display: flex; flex-wrap: wrap; gap: .5rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.hero-chips li {
  font-family: var(--mono); font-size: .74rem; padding: .38rem .75rem; border-radius: 100px;
  background: var(--card); border: 1px solid var(--line); color: var(--ink-60);
}
.hero-chips li strong { color: var(--ink); font-weight: 600; }

.breadcrumb { font-family: var(--mono); font-size: .78rem; color: var(--ink-45); margin-bottom: 1.1rem; }
.breadcrumb a { color: var(--teal); text-decoration: none; }
.breadcrumb a:hover { color: var(--ink); text-decoration: underline; }

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

.btn {
  display: inline-block; padding: .78rem 1.4rem; border-radius: 8px;
  font-weight: 600; font-size: .95rem; text-decoration: none; border: 2px solid transparent;
  cursor: pointer; font-family: var(--body); transition: background .15s, color .15s, border-color .15s;
}
.hire a.btn, .hire button.btn { text-decoration: none; }

.btn-primary, .hire a.btn-primary { background: var(--ink); color: var(--paper); }
.btn-primary:hover, .hire a.btn-primary:hover { background: var(--teal); color: var(--paper); }
.btn-solid, .hire a.btn-solid { background: var(--ink); color: var(--paper); }
.btn-solid:hover, .hire a.btn-solid:hover { background: var(--teal); color: var(--paper); }
.btn-ghost, .hire a.btn-ghost { border-color: var(--line-strong); color: var(--ink); background: transparent; }
.btn-ghost:hover, .hire a.btn-ghost:hover { border-color: var(--teal); color: var(--teal); }
.btn-quiet, .hire a.btn-quiet { border-color: var(--line); color: var(--teal); background: var(--card); }
.btn-quiet:hover, .hire a.btn-quiet:hover { border-color: var(--teal); color: var(--ink); }
.btn[disabled] { opacity: .45; cursor: not-allowed; }

/* Buttons sitting on the dark panel need the inverse treatment, otherwise
   an ink fill on an ink background disappears entirely. */
.panel-dark .btn-solid, .panel-dark a.btn-solid { background: var(--amber); color: var(--ink-900); }
.panel-dark .btn-solid:hover, .panel-dark a.btn-solid:hover { background: var(--amber-bright); color: var(--ink-900); }
.panel-dark .btn-quiet, .panel-dark a.btn-quiet { background: transparent; border-color: rgba(243,239,231,.4); color: var(--paper); }
.panel-dark .btn-quiet:hover, .panel-dark a.btn-quiet:hover { border-color: var(--amber-bright); color: var(--amber-bright); }

.btn:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; }

.btn-row { display: flex; flex-wrap: wrap; gap: .7rem; align-items: center; }

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

section.band { padding: 2.8rem 0; }
section.band.alt { background: var(--paper-2); border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }

.card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow); display: flex; flex-direction: column; align-items: stretch;
}
.card h3 { margin-top: 0; margin-bottom: 0.7rem; font-size: 1.15rem; }
.card p { margin: 0 0 1rem; }
.card p:last-child { margin-bottom: 0; }
.card em { display: block; font-style: italic; color: var(--ink-60); margin-bottom: 0.8rem; }
.card + .card { margin-top: 1rem; }

.mode-grid { display: grid; gap: 1.6rem; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 760px) { .mode-grid { grid-template-columns: repeat(2, 1fr); gap: 1.6rem; } }
@media (min-width: 1000px) { .mode-grid.three { grid-template-columns: repeat(3, 1fr); gap: 1.6rem; } }

.role-card {
  display: block; text-decoration: none; color: inherit; background: var(--card);
  border: 1px solid var(--line); border-left: 4px solid var(--amber); border-radius: var(--radius);
  padding: 1.05rem 1.2rem; transition: transform .12s, box-shadow .12s, border-left-color .12s;
}
.role-card:hover { transform: translateY(-2px); box-shadow: var(--shadow); color: inherit; }
.role-card strong { font-family: var(--display); display: block; font-size: 1.08rem; font-weight: 600; color: var(--ink); margin-bottom: .25rem; }
.role-card span { display: block; font-size: .88rem; color: var(--ink-60); line-height: 1.5; }
.role-card .band-note { margin-top: .55rem; font-family: var(--mono); font-size: .76rem; color: var(--teal); font-weight: 600; }

/* ---------------------------------------------------------------- lists */

.split { display: grid; gap: 1.2rem; grid-template-columns: 1fr; }
@media (min-width: 860px) { .split.three { grid-template-columns: repeat(3, 1fr); gap: 1.2rem; } .split.two { grid-template-columns: repeat(2, 1fr); gap: 1.2rem; } }

ul.ticks, ul.crosses, ul.shares { list-style: none; padding: 0; margin: 0; }
ul.ticks li, ul.crosses li, ul.shares li {
  position: relative; padding-left: 1.5rem; margin-bottom: .55rem; font-size: .95rem; line-height: 1.55;
}
ul.ticks li::before { content: "\2713"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
ul.crosses li::before { content: "\2715"; position: absolute; left: 0; color: var(--rust); font-weight: 700; }
ul.shares li::before { content: "\21C4"; position: absolute; left: 0; color: var(--amber); font-weight: 700; }

.tag-row { display: flex; flex-wrap: wrap; gap: .4rem; margin: .8rem 0 0; padding: 0; list-style: none; }
.tag-row li {
  font-family: var(--mono); font-size: .76rem; padding: .26rem .65rem; border-radius: 100px;
  background: var(--paper-2); border: 1px solid var(--line); color: var(--ink-60);
}

/* ---------------------------------------------------------------- compare */

.compare { border-top: 1px solid var(--line); padding-top: 1.1rem; margin-top: 1.1rem; }
.compare:first-of-type { border-top: 0; padding-top: 0; margin-top: 0; }
.compare h4 { font-family: var(--display); margin: 0 0 .4rem; font-size: 1.05rem; font-weight: 600; color: var(--ink); }
.compare p { margin: 0; font-size: .94rem; color: var(--ink-60); }
.compare a.more { font-size: .84rem; font-weight: 600; text-decoration: none; }

/* `.compare p` zeroes out margins, so a button sitting in one of these cards
   had nothing separating it from the next section heading. The wrapper gives
   the block its own bottom margin instead of relying on the paragraph. */
.alt-roles { margin-bottom: 2rem; }
.alt-roles .compare:last-child { padding-bottom: .2rem; }
.btn-sm { padding: .45rem .85rem; font-size: .85rem; border-radius: 6px; }

/* ---------------------------------------------------------------- flags */

.flag {
  border-left: 4px solid var(--rust); background: #FBF3EF;
  padding: .85rem 1rem; border-radius: 0 8px 8px 0; margin-bottom: .8rem; font-size: .94rem;
}
.note {
  border-left: 4px solid var(--amber); background: #FBF6EA;
  padding: .85rem 1rem; border-radius: 0 8px 8px 0; margin: 1rem 0; font-size: .92rem;
}

/* ---------------------------------------------------------------- dark panel */

.panel-dark {
  background: var(--ink); color: var(--paper); border-radius: var(--radius);
  padding: 1.6rem 1.6rem 1.7rem;
}
.panel-dark h2, .panel-dark h3 { font-family: var(--display); color: var(--paper); margin-top: 0; }
.panel-dark p { color: rgba(243, 239, 231, .78); }
.panel-dark .eyebrow { color: var(--amber-bright); }

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

.tbl-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
table.grid { width: 100%; border-collapse: collapse; font-size: .9rem; background: var(--card); min-width: 520px; }
table.grid th, table.grid td { text-align: left; padding: .62rem .8rem; border-bottom: 1px solid var(--line); vertical-align: top; }
table.grid thead th { background: var(--paper-2); font-size: .76rem; letter-spacing: .07em; text-transform: uppercase; color: var(--ink-60); }
table.grid tbody tr:last-child td { border-bottom: 0; }

/* ---------------------------------------------------------------- faq */

.faq details {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  margin-bottom: .7rem; overflow: hidden;
}
.faq summary {
  cursor: pointer; padding: .95rem 1.15rem; font-weight: 700; font-size: .98rem; list-style: none;
  display: flex; justify-content: space-between; gap: 1rem; align-items: flex-start;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; color: var(--teal); font-size: 1.3rem; line-height: 1; flex: 0 0 auto; }
.faq details[open] summary::after { content: "\2013"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq .answer { padding: .95rem 1.15rem 1.05rem; font-size: .95rem; color: var(--ink-60); }
.faq .answer p:last-child { margin-bottom: 0; }

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

.steps { display: flex; flex-wrap: wrap; gap: .35rem; margin: 0 0 1.4rem; padding: 0; list-style: none; }
.steps li {
  font-size: .74rem; padding: .3rem .65rem; border-radius: 100px; border: 1px solid var(--line);
  color: var(--ink-60); background: var(--card); white-space: nowrap;
}
.steps li[data-state="done"] { background: var(--teal); border-color: var(--teal); color: var(--card); }
.steps li[data-state="current"] { border-color: var(--teal); color: var(--ink); font-weight: 700; }

fieldset.q { border: 0; padding: 0; margin: 0 0 1.6rem; }
fieldset.q legend { padding: 0; font-weight: 700; font-size: 1.02rem; margin-bottom: .2rem; }
fieldset.q .help { font-size: .88rem; color: var(--ink-60); margin: 0 0 .8rem; }

.opts { display: grid; gap: .5rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .opts.two { grid-template-columns: repeat(2, 1fr); } .opts.three { grid-template-columns: repeat(3, 1fr); } }

label.opt {
  display: flex; gap: .65rem; align-items: flex-start; cursor: pointer;
  background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .7rem .85rem;
  font-size: .93rem; transition: border-color .12s, background .12s;
}
label.opt:hover { border-color: var(--teal-soft); }
label.opt input { margin: .28rem 0 0; accent-color: var(--teal); flex: 0 0 auto; }
label.opt.checked { border-color: var(--teal); background: #F0F7F7; }
label.opt .opt-label { font-weight: 600; display: block; }
label.opt .opt-note { display: block; font-size: .82rem; color: var(--ink-60); margin-top: .12rem; }

input[type="text"], input[type="number"], input[type="email"], select, textarea {
  width: 100%; font-family: inherit; font-size: .95rem; padding: .6rem .75rem;
  border: 1px solid var(--line); border-radius: 8px; background: var(--card); color: var(--ink);
}
input:focus, select:focus, textarea:focus { outline: 2px solid var(--teal-soft); outline-offset: 1px; border-color: var(--teal); }
.field { margin-bottom: 1rem; }
.field label.lbl { display: block; font-weight: 700; font-size: .9rem; margin-bottom: .3rem; }
.field .hint { font-size: .82rem; color: var(--ink-60); margin-top: .25rem; }
.field-row { display: grid; gap: 1rem; grid-template-columns: 1fr; }
@media (min-width: 620px) { .field-row.two { grid-template-columns: repeat(2, 1fr); } }

/* coverage grid */
.cov-group { background: var(--card); border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: .9rem; overflow: hidden; }
.cov-group > header { padding: .85rem 1rem; background: var(--paper-2); border-bottom: 1px solid var(--line); }
.cov-group > header strong { display: block; font-size: .97rem; }
.cov-group > header span { display: block; font-size: .84rem; color: var(--ink-60); }

/* A group the role only sometimes touches is marked rather than hidden, so
   the user can see the tool made a judgement and can overrule it. */
.cov-group[data-rel="secondary"] { border-style: dashed; }
.rel-tag {
  display: inline-block; font-family: var(--mono); font-style: normal;
  font-size: .66rem; letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-45); border: 1px solid var(--line-strong);
  border-radius: 100px; padding: .1rem .5rem; margin: .25rem 0 .35rem;
}
.bulk-row { display: flex; flex-wrap: wrap; gap: .9rem; margin-top: .5rem; }

.cov-intro { font-size: .92rem; color: var(--ink-60); margin-bottom: 1rem; }

/* Everything outside the role's reach, collapsed and pre-answered. */
.cov-aside {
  border: 1px dashed var(--line-strong); border-radius: var(--radius);
  background: transparent; padding: .2rem .2rem 0; margin: 1.2rem 0 .9rem;
}
.cov-aside > summary {
  cursor: pointer; padding: .85rem 1rem; font-size: .92rem; font-weight: 600;
  color: var(--ink-60); list-style: none;
}
.cov-aside > summary::-webkit-details-marker { display: none; }
.cov-aside > summary::before { content: "+ "; color: var(--teal); font-weight: 700; }
.cov-aside[open] > summary::before { content: "\2013 "; }
.cov-aside[open] > summary { border-bottom: 1px solid var(--line); margin-bottom: .8rem; }
.cov-aside-note { font-size: .88rem; color: var(--ink-60); padding: 0 1rem; }
.cov-aside .cov-group { margin: 0 .55rem .8rem; }

.cov-progress {
  font-size: .9rem; color: var(--ink-60); background: var(--paper-2);
  border: 1px solid var(--line); border-radius: 8px;
  padding: .7rem .9rem; margin: 0 0 1.1rem;
}
.cov-progress strong { color: var(--ink); }

.cov-row { padding: .8rem 1rem; border-bottom: 1px solid var(--line); }
.cov-row:last-child { border-bottom: 0; }
.cov-row .cov-name { font-weight: 600; font-size: .93rem; }
.cov-row .cov-detail { font-size: .82rem; color: var(--ink-60); margin: .1rem 0 .55rem; }
.cov-choices { display: grid; grid-template-columns: repeat(2, 1fr); gap: .35rem; }
@media (min-width: 700px) { .cov-choices { grid-template-columns: repeat(4, 1fr); } }
.cov-choices label {
  position: relative; display: flex; align-items: center; justify-content: center;
  min-height: 44px; font-size: .8rem; text-align: center; padding: .45rem .4rem;
  border: 1px solid var(--line); border-radius: 6px; cursor: pointer;
  background: var(--card); user-select: none;
  transition: border-color .12s, background .12s, color .12s;
}
.cov-choices label:hover { border-color: var(--teal-soft); }
/* Clipped rather than absolutely positioned. The old rule positioned the
   input against whatever the nearest positioned ancestor happened to be,
   which let a 0x0 input land on top of a neighbouring control and swallow
   its first click. */
.cov-choices input {
  position: absolute; width: 1px; height: 1px; margin: 0; padding: 0;
  opacity: 0; clip: rect(0 0 0 0); clip-path: inset(50%); overflow: hidden;
}
.cov-choices label:focus-within { outline: 3px solid var(--amber); outline-offset: 2px; }
.cov-choices label.checked { background: var(--teal); border-color: var(--teal); color: var(--card); font-weight: 700; }
/* Not applicable reads as a dismissal, not a selection, so it is styled
   quietly instead of in the same confident teal as a real answer. */
.cov-choices label.checked[data-choice="na"] {
  background: var(--paper-2); border-color: var(--line-strong);
  color: var(--ink-60); font-weight: 600;
}
.bulk { font-size: .8rem; background: none; border: 0; color: var(--teal); cursor: pointer; padding: 0; text-decoration: underline; font-family: inherit; }

/* scope meter */
.meter { margin: 1rem 0 0; }
.meter-track { height: 12px; border-radius: 100px; background: var(--paper-2); overflow: hidden; border: 1px solid var(--line); }
.meter-fill { height: 100%; background: var(--teal); transition: width .35s ease, background .35s ease; }
.meter-fill[data-status="stretched"] { background: var(--amber); }
.meter-fill[data-status="overloaded"], .meter-fill[data-status="unicorn"] { background: var(--rust); }
.meter-fill[data-status="light"] { background: var(--teal-soft); }
.meter-label { display: flex; justify-content: space-between; gap: 1rem; margin-top: .45rem; font-size: .84rem; }
.meter-label strong { font-size: .95rem; }

.stat-row { display: grid; gap: .8rem; grid-template-columns: repeat(2, 1fr); margin: 1rem 0; }
@media (min-width: 700px) { .stat-row { grid-template-columns: repeat(4, 1fr); } }
.stat { background: var(--card); border: 1px solid var(--line); border-radius: 8px; padding: .8rem .9rem; }
.stat .k { font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-60); font-weight: 700; }
.stat .v { font-size: 1.25rem; font-weight: 700; color: var(--ink); line-height: 1.25; margin-top: .2rem; }
.stat .s { font-size: .78rem; color: var(--ink-60); }

/* output */
.jd-output {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.6rem 1.7rem; font-size: .95rem;
}
.jd-output h1 { font-size: 1.5rem; margin-bottom: .3rem; }
.jd-output h2 { font-size: 1.05rem; margin-top: 1.6rem; text-transform: uppercase; letter-spacing: .07em; color: var(--teal); }
.jd-output ul { padding-left: 1.15rem; }
.jd-output li { margin-bottom: .4rem; }
.jd-output .jd-meta { font-size: .88rem; color: var(--ink-60); border-bottom: 1px solid var(--line); padding-bottom: .9rem; margin-bottom: .3rem; }

.tabs { display: flex; gap: .3rem; flex-wrap: wrap; border-bottom: 1px solid var(--line); margin-bottom: 1.2rem; }
.tabs button {
  background: none; border: 0; border-bottom: 3px solid transparent; padding: .6rem .85rem;
  font-family: inherit; font-size: .9rem; font-weight: 600; color: var(--ink-60); cursor: pointer;
}
.tabs button[aria-selected="true"] { color: var(--ink); border-bottom-color: var(--teal); }

.sticky-bar {
  position: sticky; bottom: 0; background: var(--paper); border-top: 1px solid var(--line);
  padding: .8rem 0; margin-top: 1.6rem; z-index: 5;
}
.sticky-bar .wrap { display: flex; gap: .7rem; justify-content: space-between; align-items: center; flex-wrap: wrap; }

/* The sticky bar floats over whatever is directly above it. Without this
   reserve the last control in the card sits underneath the bar and the first
   click lands on the bar instead of the control, which reads as a button
   that needs two clicks. */
#builder-app { padding-bottom: .5rem; }
#builder-app > .card:last-of-type { margin-bottom: .5rem; }
.sticky-bar::before {
  content: ""; position: absolute; left: 0; right: 0; top: -12px; height: 12px;
  background: linear-gradient(to top, var(--paper), rgba(243, 239, 231, 0));
  pointer-events: none;
}

.hidden { display: none !important; }
.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; }

@media print {
  .hero, .sticky-bar, .tabs, #cc-nav-mount, #cc-footer-mount, .no-print { display: none !important; }
  body.hire { background: #fff; font-size: 12pt; }
  .jd-output { border: 0; box-shadow: none; padding: 0; }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ------------------------------------------------- compensation provenance */

/* The benchmark and the live posted range are shown as two separate blocks
   because they answer different questions. The live block is tinted so the
   distinction is visible at a glance rather than only in the label. */
.comp-note { margin-bottom: .8rem; }
.comp-live { border-left-color: var(--teal); background: #F0F7F7; }

.comp-src { font-size: .9rem; color: var(--ink-60); margin: .2rem 0 .6rem; }

/* A button that behaves like a link. Using a real button keeps it keyboard
   reachable and announced correctly, which an anchor with no href is not. */
.linklike {
  background: none; border: 0; padding: 0; margin: 0;
  font: inherit; color: var(--teal); font-weight: 600;
  text-decoration: underline; cursor: pointer;
}
.linklike:hover { color: var(--ink); }
.linklike:focus-visible { outline: 3px solid var(--amber); outline-offset: 2px; border-radius: 2px; }

.comp-sources {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--card); padding: 1rem 1.15rem; margin: 0 0 1rem;
  font-size: .9rem; color: var(--ink-60);
}
.comp-sources p { margin: 0 0 .8rem; }
.src-list { list-style: none; padding: 0; margin: 0 0 .8rem; }
.src-list li { padding: .55rem 0; border-top: 1px solid var(--line); line-height: 1.5; }
.src-list li:first-child { border-top: 0; padding-top: 0; }
.src-list a { font-weight: 600; }
.src-kind {
  font-family: var(--mono); font-size: .68rem; letter-spacing: .08em;
  text-transform: uppercase; color: var(--ink-45);
  border: 1px solid var(--line); border-radius: 100px; padding: .08rem .45rem; margin-left: .35rem;
}
.src-scope { font-size: .85rem; color: var(--ink-45); }
.src-disclaimer { font-size: .84rem; color: var(--ink-45); margin: 0; }

/* ------------------------------------------------------------ start here */

/* The two entry cards and the four-door explanation were separate sections
   saying overlapping things. Merged into one block: the choice on top, the
   detail for each choice directly underneath it. */
.start-grid { display: grid; gap: 1.2rem; grid-template-columns: 1fr; margin-top: 1.2rem; }
@media (min-width: 860px) { .start-grid { grid-template-columns: repeat(2, 1fr); } }

.start-card {
  background: var(--card); border: 1px solid var(--line); border-radius: var(--radius);
  padding: 1.5rem 1.6rem; box-shadow: var(--shadow);
  display: flex; flex-direction: column;
}
.start-card h3 { margin: 0 0 .5rem; font-size: 1.22rem; }
.start-card > p { margin-bottom: 1rem; }
.start-card .btn { align-self: flex-start; }

.start-doors {
  margin-top: 1.1rem; padding-top: 1rem; border-top: 1px solid var(--line);
  font-size: .92rem; color: var(--ink-60);
}
.start-doors dt {
  font-weight: 700; color: var(--ink); font-size: .92rem;
  margin-top: .7rem;
}
.start-doors dt:first-of-type { margin-top: 0; }
.start-doors dd { margin: .15rem 0 0; }
.start-outcome {
  margin-top: .9rem; padding-top: .8rem; border-top: 1px dashed var(--line);
  font-size: .9rem; color: var(--ink-60);
}
.start-outcome strong { color: var(--ink); }

/* Inline validation, replacing the alert() and confirm() dialogs. A native
   modal steals focus, cannot be styled, and on a phone covers the exact
   controls it is asking the user to fix. */
.form-error {
  background: #FBEDE8; border: 1px solid var(--rust); border-left-width: 4px;
  border-radius: 8px; color: var(--rust); font-size: .92rem; font-weight: 600;
  padding: .7rem .9rem; margin: 1rem 0 0;
}

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

[data-role-toggle] {
  cursor: pointer; transition: background .2s, border-color .2s, color .2s;
}
[data-role-toggle]:not(.active) { opacity: .65; }
[data-role-toggle].active { opacity: 1; }
.form-error.hidden { display: none !important; }