/* ==========================================================================
   KEKO — shared layout for the long-form content pages
   Used by strength.html, faq.html and legal.html.
   Depends entirely on the tokens declared in styles.css. No new colours
   except the per-card --flavor overrides set inline on .strength-card.
   ========================================================================== */

/* ------------------------------------------------------------ page head -- */
.content-head { max-width: 68ch; }
.content-head h1 {
  font-size: var(--fs-2xl);
  letter-spacing: -.035em;
  margin-top: var(--s-3);
}
.content-head .lede {
  margin-top: var(--s-4);
  font-size: var(--fs-md);
  color: var(--text-dim);
}
@media (max-width: 640px) {
  .content-head h1 { font-size: var(--fs-xl); }
  .content-head .lede { font-size: var(--fs-base); }
}

/* ------------------------------------------------------------ prose flow -- */
.prose { max-width: 68ch; overflow-wrap: break-word; }
.prose--wide { max-width: 82ch; }
.prose--full { max-width: none; }

.prose > * + * { margin-top: var(--s-4); }
.prose p { color: var(--text-dim); }
.prose h2 { font-size: var(--fs-lg); margin-top: var(--s-7); }
.prose h3 { font-size: var(--fs-md); margin-top: var(--s-6); }
.prose h4 { font-size: var(--fs-base); margin-top: var(--s-5); }
.prose > :first-child { margin-top: 0; }
.prose strong { color: var(--text); font-weight: 600; }

.prose ul, .prose ol { padding-left: var(--s-5); color: var(--text-dim); }
.prose ul > li { list-style: disc; }
.prose ol > li { list-style: decimal; }
.prose li::marker { color: var(--text-faint); }
.prose li + li { margin-top: var(--s-2); }

.prose a:not(.btn):not(.chip):not(.strength-card) {
  color: var(--brand-bright);
  text-decoration: underline;
  text-underline-offset: 3px;
  text-decoration-thickness: 1px;
}
.prose a:not(.btn):not(.chip):not(.strength-card):hover { color: var(--text); }

.prose hr {
  border: 0;
  border-top: 1px solid var(--border-soft);
  margin-block: var(--s-6);
}

/* ------------------------------------------------------- anchor targets -- */
/* The header is sticky at var(--header-h); nudge jump targets clear of it. */
.anchor { scroll-margin-top: calc(var(--header-h) + var(--s-5)); }

/* ---------------------------------------------------------- notice body -- */
.notice__body > * + * { margin-top: var(--s-2); }
.notice__body strong { color: var(--text); }
.notice__body a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }

/* --------------------------------------------------- in-page contents -- */
.toc { display: flex; flex-wrap: wrap; gap: var(--s-2); }

/* ---------------------------------------------------------------- table -- */
.table-scroll {
  overflow-x: auto;
  border: 1px solid var(--border);
  border-radius: var(--r-lg);
  background: var(--bg-elev);
}
.data-table {
  width: 100%;
  min-width: 660px;
  border-collapse: collapse;
  font-size: var(--fs-sm);
  text-align: left;
}
.data-table caption {
  caption-side: bottom;
  padding: var(--s-3) var(--s-4);
  font-size: var(--fs-xs);
  color: var(--text-faint);
  text-align: left;
  border-top: 1px solid var(--border-soft);
}
.data-table th,
.data-table td {
  padding: var(--s-3) var(--s-4);
  vertical-align: top;
  border-bottom: 1px solid var(--border-soft);
}
.data-table thead th {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: .1em;
  text-transform: uppercase;
  color: var(--text-faint);
  background: var(--surface);
  white-space: nowrap;
}
.data-table tbody td { color: var(--text-dim); }
.data-table tbody th {
  color: var(--text);
  font-weight: 800;
  white-space: nowrap;
  font-size: var(--fs-base);
  letter-spacing: -.02em;
}
.data-table tbody tr:hover td,
.data-table tbody tr:hover th { background: var(--surface); }

/* --------------------------------------------------------- accordions --- */
.faq-group + .faq-group { margin-top: var(--s-7); }
.faq-group h2 { font-size: var(--fs-lg); margin-bottom: var(--s-4); }

.faq-item {
  border: 1px solid var(--border-soft);
  border-radius: var(--r-md);
  background: var(--bg-elev);
  overflow: hidden;
}
.faq-item + .faq-item { margin-top: var(--s-3); }
.faq-item > summary {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--s-4);
  padding: var(--s-4);
  cursor: pointer;
  list-style: none;
  font-weight: 600;
  color: var(--text);
  transition: background .16s var(--ease);
}
.faq-item > summary::-webkit-details-marker { display: none; }
.faq-item > summary::after {
  content: "+";
  flex: none;
  font-size: var(--fs-lg);
  font-weight: 400;
  line-height: 1.1;
  color: var(--text-faint);
}
.faq-item[open] > summary::after { content: "\2212"; }
.faq-item[open] > summary { border-bottom: 1px solid var(--border-soft); }
.faq-item > summary:hover { background: var(--surface); }
.faq-item:target { border-color: color-mix(in srgb, var(--brand) 60%, var(--border)); }

.faq-body { padding: var(--s-4); font-size: var(--fs-sm); color: var(--text-dim); }
.faq-body > * + * { margin-top: var(--s-3); }
.faq-body ul { padding-left: var(--s-5); }
.faq-body ul > li { list-style: disc; }
.faq-body li + li { margin-top: var(--s-2); }
.faq-body li::marker { color: var(--text-faint); }
.faq-body strong { color: var(--text); font-weight: 600; }
.faq-body a { color: var(--brand-bright); text-decoration: underline; text-underline-offset: 3px; }

/* ------------------------------------------------------ strength cards --- */
.strength-cards {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(210px, 1fr));
  gap: var(--s-4);
}
.strength-card {
  display: flex;
  flex-direction: column;
  gap: var(--s-2);
  padding: var(--s-5);
  border-radius: var(--r-lg);
  background:
    radial-gradient(circle at 88% -20%, color-mix(in srgb, var(--flavor) 22%, transparent), transparent 60%),
    var(--bg-elev);
  border: 1px solid var(--border-soft);
  transition: border-color .2s var(--ease), transform .2s var(--ease), box-shadow .2s var(--ease);
}
.strength-card:hover {
  border-color: color-mix(in srgb, var(--flavor) 55%, var(--border));
  transform: translateY(-3px);
  box-shadow: var(--shadow-md);
}
.strength-card__mg {
  font-size: var(--fs-2xl);
  font-weight: 800;
  line-height: 1;
  letter-spacing: -.05em;
  color: var(--flavor);
}
.strength-card__mg small {
  font-size: var(--fs-md);
  font-weight: 700;
  letter-spacing: -.02em;
  margin-left: 2px;
}
.strength-card__label { font-size: var(--fs-base); font-weight: 700; }
.strength-card__note { font-size: var(--fs-xs); color: var(--text-faint); line-height: 1.5; }
.strength-card__go {
  margin-top: auto;
  padding-top: var(--s-4);
  font-size: var(--fs-sm);
  font-weight: 600;
  color: var(--text-dim);
}
.strength-card:hover .strength-card__go { color: var(--text); }

/* ------------------------------------------------------------- steps ----- */
.steps { display: grid; gap: var(--s-4); }
.step { display: grid; grid-template-columns: 30px 1fr; gap: var(--s-4); align-items: start; }
.step__n {
  width: 30px; height: 30px; border-radius: var(--r-pill);
  display: grid; place-items: center;
  background: color-mix(in srgb, var(--brand) 20%, transparent);
  color: var(--brand-bright);
  font-size: var(--fs-xs); font-weight: 800;
}
.step h3 { font-size: var(--fs-base); margin: 0 0 var(--s-1); }
.step p { font-size: var(--fs-sm); color: var(--text-dim); margin: 0; }

/* ------------------------------------------------------------- panel ----- */
.panel {
  background: var(--bg-elev);
  border: 1px solid var(--border-soft);
  border-radius: var(--r-lg);
  padding: var(--s-6);
}
@media (max-width: 520px) { .panel { padding: var(--s-4); } }
.panel--brand { border-color: color-mix(in srgb, var(--brand) 40%, var(--border)); }

.def-list { display: grid; gap: var(--s-3); font-size: var(--fs-sm); }
.def-list > div {
  display: grid;
  grid-template-columns: 12ch 1fr;
  gap: var(--s-4);
}
.def-list dt { color: var(--text-faint); }
.def-list dd { margin: 0; color: var(--text-dim); }
@media (max-width: 480px) {
  .def-list > div { grid-template-columns: 1fr; gap: var(--s-1); }
}

/* --------------------------------------------------------- placeholder --- */
/* [SQUARE BRACKET] fill-ins in the legal template. */
.ph {
  font-family: var(--font-mono);
  font-size: .9em;
  padding: 1px 5px;
  border-radius: var(--r-sm);
  background: var(--surface-2);
  border: 1px solid var(--border);
  color: var(--warn);
  /* Some placeholders are long sentences — they must wrap on a 360px screen,
     and each wrapped fragment keeps its own padding and border. */
  overflow-wrap: anywhere;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}