/* ─── Platytutor legal / doc pages ─────────────────────────────────────────
   Shared base for the simple standalone legal pages (privacy.html and
   data-deletion.html). Plain paper body — no grain overlay or app chrome.
   Privacy retention table and data-deletion .step cards are below. */

* { box-sizing: border-box; 
}

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--font-body);
  line-height: 1.65;
}

.doc {
  max-width: 760px;
  margin: 0 auto;
  padding: 2.5rem 1.25rem 4rem;
  /* viewport-fit=cover: clear of the notch on a phone held sideways (env()
     is 0 everywhere else). */
  padding-left: max(1.25rem, var(--safe-l, 0px));
  padding-right: max(1.25rem, var(--safe-r, 0px));
  /* Long addresses (myaccount.google.com/…) break instead of widening the page. */
  overflow-wrap: break-word;
}

.doc-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  text-decoration: none;
  color: var(--ink);
  font-weight: 800;
  font-size: var(--fs-body-lg);
  margin-bottom: 2rem;
}

.doc-brand .mark {
  width: 32px;
  height: 32px;
  display: grid;
  place-items: center;
  background: var(--coral);
  color: var(--on-color);
  border-radius: 50%;
  font-family: var(--font-display);
  box-shadow: var(--shadow-stamp-sm);
}

.doc-brand em { font-style: normal; color: var(--coral); 
}

h1 {
  font-family: var(--font-display);
  font-size: clamp(1.8rem, 5vw, 2.6rem);
  line-height: 1.1;
  margin: 0 0 0.4rem;
}

h2 {
  font-family: var(--font-display);
  font-size: var(--fs-title);
  margin: 2.2rem 0 0.6rem;
}

.updated { color: var(--ink-muted); font-size: var(--fs-body); margin: 0 0 1.6rem; 
}

a { color: var(--coral-deep); 
}
ol, ul { padding-left: 1.25rem; 
}
li { margin: 0.3rem 0; 
}

.note {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 0.9rem 1.1rem;
  margin: 1.4rem 0;
  box-shadow: var(--shadow-stamp-sm);
}

.placeholder {
  background: var(--warning-soft);
  border-bottom: 2px dotted var(--sun-deep);
  padding: 0 0.25rem;
  border-radius: var(--r-xs);
  font-weight: 700;
}

.back {
  display: inline-block;
  margin-top: 2.5rem;
  font-weight: 700;
  text-decoration: none;
  color: var(--ink-soft);
}

@media (hover: hover) and (pointer: fine) {
  .back:hover { color: var(--coral-deep); }
}

/* ─── privacy.html ───────────────────────────────────────────────────────── */
/* Page-specific: extra heading spacing + the data-retention table. */
h2 { padding-top: 0.4rem; 
}
h3 { font-size: var(--fs-body-lg); margin: 1.3rem 0 0.3rem; 
}
table {
  width: 100%;
  border-collapse: collapse;
  margin: 0.8rem 0;
  font-size: var(--fs-body);
}
th, td {
  text-align: left;
  padding: 0.55rem 0.7rem;
  border: 1px solid var(--line-strong);
  vertical-align: top;
}
th { background: var(--card-soft); 
}

/* ─── data-deletion.html ─────────────────────────────────────────────────── */
/* Page-specific: numbered instruction step cards. */
.step {
  background: var(--card);
  border: 1.5px solid var(--line-strong);
  border-radius: var(--r-md);
  padding: 1rem 1.2rem;
  margin: 1rem 0;
  box-shadow: var(--shadow-stamp-sm);
}
.step h2 { margin-top: 0; 
}

/* ─── Phone (< 768px) ────────────────────────────────────────────────────
   The way back is a 44px target, and on a narrow screen every table row
   becomes a small card: the first cell its title, the others below it, each
   under its column's name (data-label) where the table has more than two
   columns. A 3-column GDPR table was 510px wide on a 375px phone. */
@media (max-width: 767.98px) {
  .doc { padding-top: 1.25rem; padding-bottom: calc(3rem + var(--safe-b, 0px)); }
  .doc-brand { min-height: 44px; margin-bottom: 1.25rem; }
  .back { display: inline-flex; align-items: center; min-height: 44px; margin-top: 1.75rem; }
}

@media (max-width: 576px) {
  table.table-stack,
  table.table-stack tbody,
  table.table-stack tr,
  table.table-stack td { display: block; width: auto; }
  table.table-stack { border: 0; }
  table.table-stack tr:first-child { display: none; }   /* the header row: its names move into the cards */
  table.table-stack tr {
    margin: 0 0 0.75rem;
    padding: 0.7rem 0.9rem;
    background: var(--card);
    border: 1.5px solid var(--line-strong);
    border-radius: var(--r-md);
    box-shadow: var(--shadow-stamp-sm);
  }
  table.table-stack td { padding: 0.2rem 0; border: 0; }
  table.table-stack td:first-child { font-weight: 800; color: var(--ink); }
  table.table-stack td[data-label]::before {
    content: attr(data-label);
    display: block;
    margin-top: 0.35rem;
    font-size: 0.875rem;
    font-weight: 800;
    color: var(--ink-muted);
  }
}