/* ===========================================================================
   Cratelog subpages - Privacy, Terms, Support.
   Desktop values are transcribed from "Privacy Page.dc.html", "Terms
   Page.dc.html" and "Support Page.dc.html".

   These pages reuse the landing page's chrome verbatim (.wrap, .nav, .eyebrow,
   .skip-link from landing.css) so the header can't drift between pages. Only
   the document body below is new. Everything past "Responsive" is added: the
   source designs stop at a single 820px breakpoint.
   =========================================================================== */

.doc-page {
  /* One measure for every prose column on these pages, so the header, the
     clauses and the footnote can never drift apart. */
  --doc-measure: 620px;

  background: var(--paper-200);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* "Common questions", "Short version" and "On this page" are section labels,
   so they are headings - the class only carries the visual treatment. Without
   this they'd inherit the UA heading margin and break the flex gaps. */
h2.eyebrow,
h3.eyebrow {
  margin: 0;
}

/* The nav brand is a link back to the landing page here, not a bare wordmark,
   so it needs the DS link treatment switched back off. */
.nav__brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* The current page's own nav entry. */
.nav__link--current {
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

/* landing.css drops the nav links below 760px because they are anchors into a
   page you can just scroll. Here they are the only way between the three
   subpages, so they stay at every width; the Download CTA gives way instead.
   The declared value is inert - a flex container blockifies its children - but
   overriding `display: none` is the whole point, and specificity (0,2,0 over
   0,1,0), not source order, is what beats the media query. */
.doc-page .nav__link {
  display: inline;
}

/* ===========================================================================
   Document layout
   The legal pages carry a table of contents; Support is a single column.
   =========================================================================== */
.doc {
  flex: 1;
  width: 100%;
  max-width: 1080px;
  margin: 0 auto;
  padding: 72px var(--page-pad) 96px;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  column-gap: 64px;
  row-gap: 40px;
  align-items: start;
}

/* `align-items: start` above is for the grid, where it holds the sticky
   contents column at the top. Switching to flex re-reads it as the cross axis,
   which sizes every child to its content instead of the column - so the cards
   read narrow until an answer opens and widens them. Stretch is the flex
   equivalent of what `start` means on the grid. */
.doc--plain {
  max-width: 760px;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 40px;
}

/* The title reads before the contents list in source order - so mobile and
   screen readers get "Privacy policy" before seven clause links - while
   `grid-column: 2` keeps it in the article column on desktop. Auto-placement
   then drops the TOC into row 2 column 1 and the article beside it. */
.doc__header {
  grid-column: 2;
}

.doc--plain .doc__header {
  grid-column: auto;
}

/* --- Table of contents ---------------------------------------------------- */
.toc {
  position: sticky;
  top: 98px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

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

/* 44px minimum so seven stacked links are thumb-safe, with a 2px dead zone
   between them from the list gap. */
.toc__link {
  display: flex;
  align-items: center;
  min-height: 44px;
  padding: 4px 0;
  font-size: 14px;
  line-height: 1.35;
  color: var(--text-secondary);
}

/* --- Article --------------------------------------------------------------
   680px at 15.5px ran to ~85 characters a line; --doc-measure holds it near
   78, which is where a reader stops losing the return sweep. The source
   design used 680 - see README, "Where this differs from the design". */
.doc__body {
  display: flex;
  flex-direction: column;
  gap: 56px;
  max-width: var(--doc-measure);
}

.doc__header {
  display: flex;
  flex-direction: column;
  gap: 12px;
  max-width: var(--doc-measure);
}

.doc__title {
  margin: 0;
  font-size: clamp(30px, 4.6vw, 40px);
  line-height: 1.1;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.03em;
  color: var(--text-primary);
}

.doc__lede {
  margin: 0;
  max-width: 520px;
  font-size: 16px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.doc__version {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.doc__effective {
  font-size: 13px;
  color: var(--text-secondary);
}

.doc__supersedes {
  font-size: 12px;
  color: var(--text-secondary);
}

/* --- "Short version" card ------------------------------------------------- */
.doc-block {
  display: flex;
  flex-direction: column;
  gap: 9px;
}

.summary-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 22px 24px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.summary-card__lead {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.55;
  color: var(--text-primary);
  text-wrap: pretty;
}

.summary-card__caveat {
  padding-top: 10px;
  border-top: 1px solid var(--border-hairline);
  font-size: 12px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* --- Bullets --------------------------------------------------------------
   The dot is a pseudo-element rather than list-style so it can sit on the
   first line's baseline at any font size. */
.doc-bullets {
  display: flex;
  flex-direction: column;
  gap: 7px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.doc-bullets li {
  position: relative;
  padding-left: 13px;
  font-size: 14px;
  line-height: 1.5;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.doc-bullets li::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0.55em;
  width: 4px;
  height: 4px;
  border-radius: 50%;
  background: var(--text-tertiary);
}

/* The variant inside a clause is prose-sized, not caption-sized. */
.doc-bullets--body {
  gap: 8px;
}

.doc-bullets--body li {
  font-size: 15.5px;
  line-height: 1.6;
  color: var(--text-primary);
}

/* --- Clauses --------------------------------------------------------------
   gap was 12px against ~26px leading, so sub-clauses merged into one grey
   block; 20px separates them without breaking the section apart. */
.doc-section {
  scroll-margin-top: 92px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* The sub-clause number is the document's middle structural level and had no
   typographic existence at all. A hanging indent pulls the numbers into a rail
   you can scan, and each is now a link target for cross-references. */
.doc-section {
  /* One value drives both the hanging indent and the number's box, so the
     first line and every wrapped line land on the same rail. */
  --clause-indent: 2.9em;
}

.doc-section p[id] {
  padding-left: var(--clause-indent);
  text-indent: calc(var(--clause-indent) * -1);
  scroll-margin-top: 92px;
}

.clause-num {
  display: inline-block;
  width: var(--clause-indent);
  text-indent: 0;
  font-family: var(--font-num);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum" 1;
  font-weight: var(--weight-semibold);
  color: var(--text-secondary);
}

.doc-section__title {
  margin: 0;
  font-size: 21px;
  line-height: 1.3;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  color: var(--text-primary);
}

.doc-section__subtitle {
  margin: 4px 0 0;
  font-size: 15.5px;
  line-height: 1.4;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.doc-section p {
  margin: 0;
  font-size: 15.5px;
  line-height: 1.7;
  color: var(--text-primary);
  text-wrap: pretty;
}

.doc__footnote {
  margin: 0;
  padding-top: 20px;
  border-top: 1px solid var(--border-hairline);
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ===========================================================================
   Support page
   =========================================================================== */
.contact-card {
  display: flex;
  flex-direction: column;
  gap: 12px;
  padding: 24px;
  border-radius: var(--radius-lg);
  background: var(--surface-card);
}

.contact-card__head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
}

.contact-card__address {
  font-size: 20px;
  font-weight: var(--weight-semibold);
  letter-spacing: -0.01em;
  /* "support@cratelog.club" at 20px/600 is close to the card's interior width
     at 320px, and an email address has no natural break opportunity. */
  overflow-wrap: anywhere;
}

.contact-card__sla {
  font-size: 13px;
  color: var(--text-secondary);
}

.contact-card__text {
  margin: 0;
  font-size: 14.5px;
  line-height: 1.55;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* A card whose children divide themselves with hairlines. */
/* Block, not flex. The children are block-level and stack on their own, and as
   flex items a <details> sizes on the cross axis instead of simply filling -
   so the rows read narrow, and opening one re-runs flex layout across the
   whole card. Normal flow gives full width and leaves an opening row alone. */
.rows-card {
  border-radius: var(--radius-lg);
  background: var(--surface-card);
  padding: 4px 24px;
}

.rows-card > * {
  border-bottom: 1px solid var(--border-hairline);
}

.rows-card > *:last-child {
  border-bottom: none;
}




/* --- FAQ accordion --------------------------------------------------------
   Native <details>, so it opens with JS off and is keyboard-operable for free.
   The default disclosure triangle is removed in favour of the DS caret. */
.faq > summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-height: 56px;
  padding: 16px 0;
  cursor: pointer;
  list-style: none;
  font-size: 15.5px;
  font-weight: var(--weight-semibold);
  color: var(--text-primary);
}

.faq > summary::-webkit-details-marker {
  display: none;
}

/* The question takes the slack so the caret is pinned right and a long
   question wraps instead of shoving it off the row. */
.faq__question {
  flex: 1 1 auto;
  min-width: 0;
}

.faq__caret {
  flex: none;
  --icon-size: 16px;
  color: var(--text-tertiary);
  transition: transform var(--dur-base) var(--ease-standard);
}

.faq[open] > summary .faq__caret {
  transform: rotate(180deg);
}

/* A row is a target before it is a heading, so it says so on hover. */
.faq > summary:hover {
  color: var(--text-link);
}

/* Open and close as a height, not as a switch.
   ::details-content is the answer's anonymous box; interpolate-size is what
   makes `auto` a transitionable value, and allow-discrete keeps the content
   painted through the closing half instead of vanishing on frame one.
   Where any of the three is unsupported the selector simply never matches and
   the accordion falls back to the native instant toggle - which is why this
   needs no JS and no wrapper element. */
@supports (interpolate-size: allow-keywords) {
  .doc-page {
    interpolate-size: allow-keywords;
  }

  .faq::details-content {
    block-size: 0;
    overflow: hidden;
    opacity: 0;
    transition:
      block-size var(--dur-base) var(--ease-standard),
      opacity var(--dur-fast) var(--ease-out),
      content-visibility var(--dur-base) allow-discrete;
  }

  .faq[open]::details-content {
    block-size: auto;
    opacity: 1;
  }
}

.faq__answer {
  margin: 0;
  padding: 0 0 18px;
  font-size: 15px;
  line-height: 1.65;
  color: var(--text-secondary);
  text-wrap: pretty;
}

.doc__seealso {
  margin: 0;
  font-size: 13px;
  line-height: 1.6;
  color: var(--text-secondary);
  text-wrap: pretty;
}

/* ===========================================================================
   Footer
   The same .footer component the landing page ends on, on the same dark
   ground: data-theme="dark" flips the semantic aliases, so every value below
   the wrapper comes from landing.css unchanged. The only addition is the
   brand, which is a link home here rather than a bare wordmark.
   =========================================================================== */
.doc-footer {
  background: var(--bg-app);
}

.doc-footer .footer__brand:hover {
  color: var(--text-primary);
  text-decoration: none;
}

/* ===========================================================================
   Responsive
   =========================================================================== */

@media (max-width: 1000px) {
  .doc {
    grid-template-columns: 180px minmax(0, 1fr);
    gap: 40px;
  }
}

/* --- Table of contents unpins and stacks ---------------------------------- */
@media (max-width: 820px) {
  .doc {
    grid-template-columns: 1fr;
    gap: 28px;
    padding-top: 48px;
    padding-bottom: 72px;
  }

  .doc__header {
    grid-column: 1;
  }

  .doc--plain {
    gap: 36px;
  }

  /* Sticky needs a column beside the text to stick in; once stacked it would
     just pin a block of links over the clauses. So it becomes a normal
     header, boxed to read as an index rather than as body content. */
  .toc {
    position: static;
    padding: 16px 18px;
    border-radius: var(--radius-lg);
    background: var(--surface-card);
    gap: 6px;
  }

  .toc__list {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(210px, 1fr));
    gap: 0 20px;
  }

  .toc__link {
    padding: 6px 0;
  }
}

/* --- Phone ---------------------------------------------------------------- */
@media (max-width: 600px) {
  /* Download is one tap away via the footer's Cratelog link. */
  .doc-page .nav__cta {
    display: none;
  }

  .doc-page .nav__link {
    font-size: 14px;
  }

  .doc-page .nav__links {
    gap: 18px;
  }

  .contact-card,
  .rows-card {
    padding-inline: 18px;
  }

  .summary-card {
    padding: 18px 18px;
  }

  /* 2.9em of a 280px column is a lot of margin; the rail still reads at 2.4. */
  .doc-section {
    --clause-indent: 2.4em;
  }

  /* The address and its response time stack rather than squeezing onto one
     line. */
  .contact-card__head {
    flex-direction: column;
    gap: 4px;
  }
}

@media (max-width: 380px) {
  .doc-page .nav__links {
    gap: 13px;
  }

  .doc-page .nav__link {
    font-size: 13.5px;
  }
}

/* ===========================================================================
   Print
   Terms and privacy get saved and filed. Unstick the chrome, open every
   answer, flatten the cards to hairlines, and expose destinations that a
   sheet of paper cannot click.
   =========================================================================== */
@media print {
  .doc-page {
    background: #ffffff;
  }

  .nav,
  .skip-link,
  .faq__caret {
    display: none;
  }

  .doc {
    display: block;
    max-width: none;
    padding: 0;
  }

  /* The contents list is a scroll affordance; on paper the reader has the
     whole document in hand. */
  .toc {
    display: none;
  }

  .doc__body,
  .doc__header {
    max-width: none;
  }

  .summary-card,
  .rows-card,
  .contact-card {
    background: none;
    border: 1px solid #cccccc;
    border-radius: 0;
  }

  /* Answers are the content; a collapsed accordion prints as eight questions
     and no information. The first rule beats the UA's
     `details:not([open]) > *`, the second undoes the disclosure animation's
     collapsed height. */
  .faq > summary {
    min-height: 0;
    padding-bottom: 4px;
  }

  .faq .faq__answer {
    display: block;
  }

  .faq::details-content {
    block-size: auto;
    overflow: visible;
    opacity: 1;
  }

  .doc-section,
  .faq {
    break-inside: avoid;
  }

  .doc-section__title,
  .doc__title {
    break-after: avoid;
  }

  /* Backgrounds drop out on paper but the theme's bone text would not, so the
     footer's aliases go back to their light values. */
  .doc-footer {
    background: none;
    --text-primary: var(--ink-900);
    --text-secondary: var(--ink-700);
    --text-tertiary: var(--ink-700);
    --border-hairline: var(--paper-400);
  }

  .footer {
    margin-top: 16px;
    padding-bottom: 0;
  }

  a[href^="mailto:"]::after {
    content: " (" attr(href) ")";
    font-size: 0.85em;
  }
}

/* ===========================================================================
   Reduced motion
   landing.css resets `*`, `::before` and `::after`; ::details-content is none
   of the three, so the disclosure needs saying explicitly.
   =========================================================================== */
@media (prefers-reduced-motion: reduce) {
  .faq::details-content {
    transition-duration: 0.01ms;
  }
}