/* ───────────────────────────────────────────────────────────────────────────
   Snugdays — Guides and the legal pages' extras

   Loaded after styles.css, which owns the tokens; this file only adds layout for
   docs/design/2026-09-20/Cosydays Guides.dc.html and the Legal board's placeholders, tables
   and basis tags. Every colour is a styles.css token or a role in
   packages/core/src/theme/palette.ts (verdict.worseText / worseBg, dayStrip.ratePeak), and
   `npm run check:palette` scans this file with the rest of the folder.
   ─────────────────────────────────────────────────────────────────────────── */

/* ── Legal pages ──────────────────────────────────────────────────────── */

/* A value still open before launch — an address, a registration number, a retention period.
   Amber so it cannot be mistaken for a settled statement (Legal board). */
.tbc {
  display: inline;
  background: #F7EDE3;
  color: #92400E;
  border-radius: 6px;
  padding: 1px 6px;
  font-weight: 500;
  -webkit-box-decoration-break: clone;
  box-decoration-break: clone;
}

/* The lawful basis beside each "what we collect" heading. */
.legal h3 .basis {
  display: inline-block;
  margin-left: 8px;
  font-size: 13.5px;
  font-weight: 500;
  color: var(--label-strong);
  background: var(--wash-tertiary);
  border-radius: var(--r-pill);
  padding: 2px 8px;
  vertical-align: 2px;
}

.legal-contents {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-block: 0 24px;
}

.legal-contents a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 8px 12px;
  border: 1px solid var(--edge);
  border-radius: var(--r-pill);
  font-size: 14.5px;
  text-decoration: none;
}

.legal-contents a:hover {
  background: var(--wash-operate);
}

/* Beside the text on a wide screen, as on the Legal board: a sticky list of plain links. */
@media (min-width: 1024px) {
  .legal-contents {
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
    flex-direction: column;
    flex-wrap: nowrap;
    gap: 0;
    margin: 0;
  }
  .legal-contents a {
    min-height: 36px;
    padding: 4px 0;
    border: 0;
    border-radius: 0;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--action);
  }
  .legal-contents a:hover {
    background: none;
    text-decoration: underline;
  }
}

.legal ol {
  padding-left: 24px;
  margin-block: 12px;
}

.legal h2[id],
.legal h3[id] {
  scroll-margin-top: 80px;
}

/* Two-column facts: retention periods and cookies. */
.retention {
  margin: 16px 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  overflow: hidden;
}

.retention > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 16px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}

.retention > div:first-child {
  border-top: 0;
}

.retention dt {
  font-weight: 600;
  flex: 1 1 14em;
}

.retention dd {
  margin: 0;
  color: var(--ink-body);
  flex: 1 1 16em;
}

/* ── Guides ───────────────────────────────────────────────────────────── */

.guide {
  max-width: 72ch;
}

/* The Guides board: every guide listed down the left beside the one being read, on a wide
   screen. Narrower, the list goes; the breadcrumb, "More guides like this" and All guides stay. */
.guide-nav {
  display: none;
}

@media (min-width: 1024px) {
  .guide-split {
    display: grid;
    grid-template-columns: 240px minmax(0, 760px);
    column-gap: 48px;
    align-items: start;
  }
  .guide-split-index {
    display: block;
  }
  .guide-split .guide {
    max-width: 760px;
  }
  .guide-nav {
    display: flex;
    flex-direction: column;
    position: sticky;
    top: 88px;
    max-height: calc(100vh - 104px);
    overflow-y: auto;
  }
  .guide-nav a {
    display: flex;
    align-items: center;
    min-height: 36px;
    padding-block: 4px;
    font-size: 15.5px;
    line-height: 1.4;
    color: var(--action);
    text-decoration: none;
  }
  .guide-nav a:hover {
    text-decoration: underline;
  }
  .guide-nav a[aria-current="page"] {
    color: var(--ink);
    font-weight: 600;
  }
}

.guide-nav-group {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--label-strong);
  margin-top: 12px;
}

.guide-nav-group:first-child {
  margin-top: 0;
}

.guide h1 {
  font-size: clamp(30px, 4.4vw, 42px);
  margin-top: 16px;
  margin-bottom: 8px;
}

.guide .updated {
  font-size: 13.5px;
  color: var(--ink-body);
  margin-bottom: 24px;
}

.guide p,
.guide li,
.guide dd {
  font-size: 17px;
  line-height: 1.65;
}

.guide > p + p,
.guide > p + .guide-list,
.guide > .guide-list + p,
.guide > .rates + p,
.guide > .checks + p {
  margin-top: 16px;
}

.guide a {
  color: var(--action);
}

.crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  font-size: 14.5px;
  color: var(--ink-body);
}

.crumbs a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  font-weight: 600;
  text-decoration: none;
}

/* The bolded short answer first — the line search and answer engines quote. */
.short-answer {
  background: var(--wash-tertiary);
  border-radius: var(--r-card);
  padding: 16px;
  margin-bottom: 24px;
}

.short-answer strong {
  font-weight: 600;
}

.guide-list {
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  padding: 16px;
  margin-top: 16px;
}

.guide-list h2 {
  font-size: 17px;
  letter-spacing: -0.01em;
  margin-bottom: 8px;
}

.guide-list ul {
  padding-left: 20px;
  margin: 0;
}

.guide-list li + li {
  margin-top: 4px;
}

.checks {
  margin: 16px 0;
}

.checks > div + div {
  margin-top: 12px;
}

.checks dt {
  font-weight: 600;
  font-size: 17px;
}

.checks dd {
  margin: 0;
}

/* Cosy Octopus times. Cheap takes cost's amber (SOURCE-NOTES), peak the solid rate mark. */
.rates {
  margin: 16px 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  overflow: hidden;
}

.rates > div {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 4px 12px;
  padding: 12px 16px;
  border-top: 1px solid var(--hairline);
}

.rates > div:first-child {
  border-top: 0;
}

.rates dt {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 17px;
}

.rates dd {
  margin: 0;
  font-weight: 500;
}

.rates dd span {
  white-space: nowrap;
}

.rate-mark {
  width: 12px;
  height: 12px;
  border-radius: var(--r-mark);
  background: var(--track);
}

.rate-mark-cheap {
  background: var(--rate-cheap);
}

.rate-mark-peak {
  background: #B45309;
}

.rates .rate-peak {
  color: #92400E;
}

.guide-source,
.in-app {
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--ink-body);
  margin-top: 16px;
}

.guide .guide-source,
.guide .in-app {
  font-size: 15.5px;
}

.related {
  margin-top: 40px;
  padding-top: 24px;
  border-top: 1px solid var(--hairline);
}

.related h2 {
  font-size: 22px;
  margin-bottom: 8px;
}

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

.related li a,
.related p a {
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  text-decoration: none;
}

.related li a:hover,
.related p a:hover {
  text-decoration: underline;
}

/* The one lead surface on each guide page. */
.guide-cta {
  margin-top: 40px;
  background: var(--lead);
  color: var(--ink-inverse);
  border-radius: 24px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 12px;
}

.guide-cta p {
  color: var(--ink-inverse);
}

.guide .guide-cta .guide-cta-title {
  font-size: 22px;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.15;
}

.guide .guide-cta a.btn {
  color: var(--label-strong);
}

/* Index */

.guide-groups {
  margin-top: 40px;
  display: flex;
  flex-direction: column;
  gap: 40px;
}

.guide-group h2 {
  font-size: 22px;
  margin-bottom: 12px;
}

.guide-index {
  list-style: none;
  padding: 0;
  margin: 0;
  border: 1px solid var(--edge);
  border-radius: var(--r-card);
  overflow: hidden;
}

.guide-index li + li {
  border-top: 1px solid var(--hairline);
}

.guide .guide-index a {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-height: 44px;
  padding: 12px 16px;
  color: var(--ink);
  text-decoration: none;
}

.guide-index a:hover {
  background: var(--wash-operate);
}

.guide-q {
  font-size: 17px;
  font-weight: 600;
  letter-spacing: -0.01em;
}

.guide-label {
  font-size: 14.5px;
  color: var(--ink-body);
}

@media (max-width: 640px) {
  .guide-cta {
    padding: 16px;
  }
}