/* Polyfetti - policy document layout.
   Loads after style.css and reuses its tokens; only adds document-reading styles. */

.doc-head {
  background: var(--paper);
  border-bottom: 1px solid var(--line);
  padding: 60px max(32px, calc((100vw - 1176px) / 2)) 44px;
}
.doc-head .eyebrow { margin-bottom: 14px; }
.doc-head h1 {
  font-size: clamp(32px, 4.2vw, 52px);
  margin: 0 0 16px;
  max-width: 20ch;
}
.doc-head .ja {
  color: var(--muted);
  font-size: 15px;
  margin: 0 0 22px;
}
.doc-meta {
  border-top: 1px solid var(--line);
  color: var(--muted);
  display: flex;
  flex-wrap: wrap;
  font: 11px var(--mono);
  gap: 26px;
  letter-spacing: .06em;
  margin-top: 30px;
  padding-top: 18px;
  text-transform: uppercase;
}
.doc-meta b { color: var(--ink); font-weight: 500; }

.doc {
  margin: auto;
  max-width: 1176px;
  padding: 56px 32px 90px;
}
.draft {
  background: var(--accent-tint);
  border: 1px solid var(--accent);
  border-left: 4px solid var(--accent);
  margin-bottom: 44px;
  padding: 20px 22px;
}
.draft b {
  color: var(--accent-deep);
  display: block;
  font: 11px var(--mono);
  letter-spacing: .1em;
  margin-bottom: 8px;
  text-transform: uppercase;
}
.draft p { font-size: 13.5px; margin: 0; max-width: 78ch; }
.draft p + p { margin-top: 9px; }

.doc h2 {
  border-top: 1px solid var(--line);
  font-size: 21px;
  margin: 46px 0 6px;
  padding-top: 26px;
}
.doc h2:first-of-type { border-top: 0; margin-top: 0; padding-top: 0; }
.doc h2 .ja-h {
  color: var(--muted);
  display: block;
  font: 12px var(--mono);
  letter-spacing: .04em;
  margin-top: 6px;
}
.doc p, .doc li { font-size: 14.5px; max-width: 74ch; }
.doc p { margin: 14px 0 0; }
.doc ul, .doc ol { margin: 14px 0 0; padding-left: 20px; }
.doc li { margin-bottom: 7px; }

.fill {
  background: var(--accent-tint);
  border-bottom: 1px dashed var(--accent);
  color: var(--accent-deep);
  font: 500 13px var(--mono);
  padding: 1px 5px;
  white-space: nowrap;
}

.tbl { border-collapse: collapse; margin-top: 20px; width: 100%; }
.tbl th {
  border-bottom: 1.5px solid var(--ink);
  color: var(--ink);
  font: 500 10px var(--mono);
  letter-spacing: .11em;
  padding: 0 18px 10px 0;
  text-align: left;
  text-transform: uppercase;
  white-space: nowrap;
}
.tbl td {
  border-bottom: 1px solid var(--line);
  font-size: 14px;
  padding: 14px 18px 14px 0;
  vertical-align: top;
}
.tbl td:first-child { width: 30%; }
.tbl td b { display: block; }
.tbl td .ja-l {
  color: var(--muted);
  display: block;
  font: 11px var(--mono);
  margin-top: 3px;
}
.tbl-wrap { overflow-x: auto; }

.policy-nav {
  border-top: 1px solid var(--line);
  display: grid;
  gap: 2px 30px;
  grid-template-columns: repeat(2, 1fr);
  margin-top: 60px;
  padding-top: 26px;
}
.policy-nav a {
  border-bottom: 1px solid var(--line);
  display: flex;
  font-size: 13.5px;
  gap: 14px;
  padding: 13px 0;
}
.policy-nav a span { color: var(--muted); font: 10px var(--mono); padding-top: 3px; }
.policy-nav a:hover b { color: var(--accent-deep); }
.policy-nav a b { font-weight: 500; }
.policy-nav .todo { opacity: .45; }
.policy-nav .todo b { text-decoration: line-through; }

@media (max-width: 760px) {
  .doc-head { padding: 40px 20px 30px; }
  .doc { padding: 36px 20px 60px; }
  .tbl td:first-child { width: auto; }
  .tbl, .tbl tbody, .tbl tr, .tbl td { display: block; width: 100%; }
  .tbl thead { display: none; }
  .tbl tr { border-bottom: 1px solid var(--line); padding: 14px 0; }
  .tbl td { border: 0; padding: 3px 0; }
  .tbl td:first-child b { color: var(--muted); font: 10px var(--mono); letter-spacing: .09em; text-transform: uppercase; }
  .policy-nav { grid-template-columns: 1fr; }
}

/* The list of things measurement counts, generated onto the privacy page by
   scripts/build-privacy.js. A definition list because that is what it is: a name
   the reader can match against the code, and a plain sentence saying what it means. */
.counted {
  border-left: 2px solid var(--line);
  display: grid;
  gap: 4px 18px;
  grid-template-columns: minmax(9rem, max-content) 1fr;
  margin: 18px 0 22px;
  padding-left: 20px;
}
.counted dt {
  color: var(--accent-deep);
  font: 12px var(--mono);
}
.counted dt code { background: none; padding: 0; }
.counted dd {
  color: var(--muted);
  margin: 0;
}
@media (max-width: 560px) {
  .counted { grid-template-columns: 1fr; gap: 2px; }
  .counted dd { margin-bottom: 10px; }
}

/* A wide table scrolls inside its own box rather than pushing the page sideways.
   Declared in guides/guides.css since the guides were written; policies/reseller.html
   has a tier table and loads no sheet that had it. Added 2026-09-08, same rule. */
.table-wrap { overflow-x: auto; margin: 1.5rem 0; }

/* A bordered block inside a policy page.

   contact.html has carried `<div class="card" id="complain">` since it was written and
   no sheet it loads declared `.card` - so the complaints block, which is the one thing
   on that page somebody arrives angry looking for, rendered as undifferentiated text in
   the middle of the document.

   Built from style.css's own tokens rather than copied from counter.css, which uses a
   token set these pages do not load. Found 2026-09-08 by the style-coverage scan. */
.card {
  background: var(--paper);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 1.4rem 1.5rem;
  margin: 1.6rem 0;
}