/* components.css: core components shared by every page.
   Buttons, status markers, approval markers and the gate list, callout, ledger table, steps,
   timeline, facts list, FAQ, copy button. One class per hook; no outer margins. */

/* Buttons. Labels say what happens; no arrows. */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  min-height: 2.75rem;
  padding: 0.625rem 1.125rem;
  font: inherit;
  font-size: var(--step-0);
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  border: var(--rule-w) solid transparent;
  border-radius: var(--radius-btn);
  cursor: pointer;
}
.btn--primary { background: var(--green); color: var(--on-green); border-color: var(--green); }
.btn--primary:hover { background: color-mix(in srgb, var(--green) 84%, var(--ink)); }
.btn--secondary { background: transparent; color: var(--green); border-color: var(--green); }
.btn--secondary:hover { background: var(--green-wash); }
.btn--small { min-height: 2.25rem; padding: 0.375rem 0.875rem; font-size: 0.9375rem; }
.btn[aria-disabled="true"] { opacity: 0.55; cursor: default; }
.btn-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); margin: 0; }

/* Text-style button for small secondary controls (demo clock, replay). */
.link-btn {
  display: inline;
  min-height: 1.5rem;
  padding: 0.125rem 0;
  font: inherit;
  color: var(--green);
  background: none;
  border: 0;
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 0.22em;
  cursor: pointer;
}
.link-btn:hover { text-decoration-thickness: 2px; }

/* Status markers: shape plus text. Live = filled dot, Planned = hollow ring. */
.status {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  font-size: var(--step--1);
  font-weight: 500;
  line-height: 1.3;
  color: var(--ink);
  white-space: nowrap;
}
.status::before {
  content: "";
  flex: none;
  box-sizing: border-box;
  width: 0.625rem;
  height: 0.625rem;
  border-radius: 50%;
}
.status--live::before { border: 0.3125rem solid var(--green); }   /* a border, not a fill: survives forced colours */
.status--planned { color: var(--ink-2); }
.status--planned::before { border: 1.5px solid var(--muted); }

/* Approval semantics (인주 red). Empty seal square = "waits for your stamp". */
.status--approval::before,
.tag-approval::before,
.gate-list li::before {
  content: "";
  flex: none;
  width: 0.75rem;
  height: 0.75rem;
  border: 1.5px solid var(--seal);
  border-radius: 2px;
}
.status--approval { color: var(--seal); }
.tag-approval {
  display: inline-flex;
  align-items: center;
  gap: 0.5em;
  padding: 0.125rem 0.5rem;
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--seal);
  background: var(--seal-wash);
  border-radius: 2px;
  white-space: nowrap;
}
.legend { display: flex; flex-wrap: wrap; gap: var(--space-2) var(--space-5); margin: 0; padding: 0; list-style: none; }
.legend li { margin: 0; color: var(--ink-2); font-size: var(--step--1); }

/* "Always needs your approval" list: one ruled row per action, each with an empty seal square. */
.gate-list {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(14rem, 100%), 1fr));
  column-gap: var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: var(--rule-w) solid var(--rule-strong);
}
.gate-list li {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin: 0;
  padding: var(--space-3) 0;
  border-bottom: var(--rule-w) solid var(--rule);
  font-weight: 500;
}

/* Callout: a paper slip for notices that change how you read the page. */
.callout {
  padding: var(--space-4) var(--space-5);
  background: var(--sheet);
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  max-width: 52rem;
}
.callout > :last-child { margin-bottom: 0; }
.callout__title { font-weight: 600; color: var(--ink); }
.callout--wash { background: var(--green-wash); border-color: transparent; }

/* Ledger table: green rules, double rule under the head, tabular figures. */
.table-wrap {
  overflow-x: auto;
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius);
  /* Scroll cue: shadows appear at an edge only when more table hides behind it. */
  background:
    linear-gradient(to right, var(--sheet) 40%, transparent) left / 2.5rem 100% no-repeat local,
    linear-gradient(to left, var(--sheet) 40%, transparent) right / 2.5rem 100% no-repeat local,
    radial-gradient(farthest-side at 0 50%, rgb(21 32 27 / 0.2), transparent) left / 0.75rem 100% no-repeat scroll,
    radial-gradient(farthest-side at 100% 50%, rgb(21 32 27 / 0.2), transparent) right / 0.75rem 100% no-repeat scroll,
    var(--sheet);
}
.table-wrap:focus-visible { outline-offset: 2px; }
.ledger { width: 100%; margin: 0; border-collapse: collapse; font-size: 0.9375rem; line-height: 1.5; }
.ledger caption {
  caption-side: top;
  padding: var(--space-3) var(--space-4);
  text-align: left;
  font-weight: 600;
  color: var(--ink);
  border-bottom: var(--rule-w) solid var(--rule);
}
.table-note { margin: calc(var(--space-3) - var(--space-5)) 0 var(--space-4); font-size: var(--step--1); color: var(--muted); max-width: 60rem; }
.ledger th, .ledger td { padding: 0.625rem var(--space-4); text-align: left; vertical-align: top; }
.ledger th + th, .ledger td + td, .ledger th + td, .ledger td + th { border-left: var(--rule-w) solid var(--rule); }
.ledger thead th {
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-2);
  white-space: nowrap;
  border-bottom: 3px double var(--rule-strong);
}
.ledger tbody tr + tr > * { border-top: var(--rule-w) solid var(--rule); }
.ledger tbody th { font-weight: 600; }
.ledger .num { text-align: right; white-space: nowrap; }
.ledger .nowrap { white-space: nowrap; }
.ledger .is-planned > * { color: var(--ink-2); }

/* Stacked rows on phones: add .ledger--stack and data-label="Column" on each td. */
@media (max-width: 39.99em) {
  .ledger--stack thead { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); }
  .ledger--stack tr, .ledger--stack th, .ledger--stack td { display: block; }
  .ledger--stack tbody tr { padding: var(--space-3) var(--space-4); }
  .ledger--stack th, .ledger--stack td { padding: var(--space-1) 0; border-left: 0 !important; }
  .ledger--stack tbody tr + tr > * { border-top: 0; }
  .ledger--stack tbody tr + tr { border-top: var(--rule-w) solid var(--rule); }
  .ledger--stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: var(--step--1);
    color: var(--muted);
  }
  /* Roster: name and status on one line, description underneath. */
  .ledger--roster tbody tr { display: grid; grid-template-columns: 1fr auto; column-gap: var(--space-3); }
  .ledger--roster tbody th { grid-column: 1; grid-row: 1; }
  .ledger--roster .ledger__status { grid-column: 2; grid-row: 1; }
  .ledger--roster td:not(.ledger__status) { grid-column: 1 / -1; color: var(--ink-2); }
}

/* Steps: only for real sequences. Number over a green rule; the rules line up like a track. */
.steps {
  display: grid;
  gap: var(--space-6) var(--gutter);
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: step;
}
@media (min-width: 48em) { .steps { grid-template-columns: repeat(var(--steps, 3), minmax(0, 1fr)); } }
.steps > li { counter-increment: step; margin: 0; }
.steps > li::before {
  content: counter(step);
  display: block;
  padding-bottom: var(--space-2);
  margin-bottom: var(--space-4);
  font-size: var(--step-2);
  font-weight: 600;
  line-height: 1;
  color: var(--green);
  font-variant-numeric: tabular-nums;
  border-bottom: 2px solid var(--green);
}
.steps h3 { font-size: var(--step-1); margin-bottom: var(--space-2); }
.steps p:last-child { margin-bottom: 0; }

/* Timeline: time label | what happens, one ruled row each. */
.timeline { margin: 0; padding: 0; list-style: none; border-top: var(--rule-w) solid var(--rule-strong); }
.timeline > li {
  display: grid;
  gap: var(--space-1) var(--gutter);
  margin: 0;
  padding: var(--space-4) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 40em) { .timeline > li { grid-template-columns: minmax(7rem, 11rem) minmax(0, 1fr); } }
.timeline__when { margin: 0; font-size: var(--step--1); font-weight: 600; color: var(--ink-2); font-variant-numeric: tabular-nums; }
.timeline__what { margin: 0; }
.timeline__what > :last-child { margin-bottom: 0; }
.timeline__what h3 { font-size: var(--step-0); margin-bottom: var(--space-1); }
/* Numbered variant for a real sequence (a day in the pilot, the 8 weeks). */
.timeline--numbered { counter-reset: tl; }
.timeline--numbered > li { counter-increment: tl; }
.timeline--numbered .timeline__when { padding-left: 1.75rem; text-indent: -1.75rem; }
.timeline--numbered .timeline__when::before {
  content: counter(tl);
  display: inline-block;
  min-width: 1.75rem;
  text-indent: 0;
  color: var(--green);
  font-weight: 600;
}
.timeline .is-planned .timeline__when { color: var(--muted); font-weight: 500; }

/* Facts: a definition list laid out as form rows. */
.facts { margin: 0; border-top: var(--rule-w) solid var(--rule-strong); }
.facts > div {
  display: grid;
  gap: 0 var(--space-4);
  padding: var(--space-2) 0;
  border-bottom: var(--rule-w) solid var(--rule);
}
@media (min-width: 30em) { .facts > div { grid-template-columns: minmax(8rem, 13rem) minmax(0, 1fr); } }
.facts dt { color: var(--muted); }
.facts--compact { border-top: 0; }
.facts--compact > div { grid-template-columns: minmax(7rem, 12rem) minmax(0, 1fr); padding: var(--space-1) 0; border-bottom: 0; }

/* FAQ: details/summary with a +/− indicator, separated by rules. */
.faq { border-top: var(--rule-w) solid var(--rule-strong); max-width: 48rem; }
.faq details { border-bottom: var(--rule-w) solid var(--rule); }
.faq summary {
  position: relative;
  padding: var(--space-4) 2.5rem var(--space-4) 0;
  font-weight: 600;
  cursor: pointer;
  list-style: none;
}
.faq summary::-webkit-details-marker { display: none; }
/* +/− drawn with two bars (borders), so nothing is added to the summary's accessible name. */
.faq summary::before, .faq summary::after {
  content: "";
  position: absolute;
  right: 0.25rem;
  top: calc(var(--space-4) + 0.75em);
  width: 0.875rem;
  border-top: 2px solid var(--green);
}
.faq summary::after { transform: rotate(90deg); }
.faq details[open] summary::after { transform: rotate(0deg); opacity: 0; }
.faq summary:hover { color: var(--green); }
.faq__answer { padding-bottom: var(--space-4); color: var(--ink-2); max-width: 44rem; }
.faq__answer > :last-child { margin-bottom: 0; }

/* Copy button: hidden until site.js confirms the Clipboard API works. */
.copy-btn {
  display: inline-flex;
  align-items: center;
  min-height: 2rem;
  margin-left: var(--space-2);
  padding: 0.125rem 0.625rem;
  font: inherit;
  font-size: var(--step--1);
  font-weight: 500;
  color: var(--green);
  background: transparent;
  border: var(--rule-w) solid var(--rule-strong);
  border-radius: var(--radius-btn);
  cursor: pointer;
  vertical-align: middle;
}
.copy-btn:hover { border-color: var(--green); }
.copy-btn.is-copied { color: var(--ink); background: var(--green-wash); border-color: var(--green); }