/* ==========================================================
   MNDL — Legal & policy pages (Privacy Policy, Terms of
   Service, Honor Code)
   Loaded IN ADDITION to css/style.css, which supplies every
   design token, the navbar/footer/button/utility classes and
   the reveal-on-scroll system. This file only adds what the
   long-form policy layout needs, so the homepage never has to
   download rules it doesn't use.
   ========================================================== */

/* ---------- doc switcher (top of every legal page) ---------- */
.doc-nav{
  display:flex; flex-wrap:wrap; gap:10px; margin-top:22px;
}
.doc-nav a{
  display:inline-flex; align-items:center; gap:8px;
  font-family: var(--font-display); font-weight:600; font-size:.88rem;
  padding:.55em 1.1em; border-radius:999px; text-decoration:none;
  background: var(--paper-2); color: var(--ink-muted);
  box-shadow: var(--shadow-pop-sm);
  border: 2px solid transparent;
  transition: transform .2s var(--ease), color .2s ease, border-color .2s ease;
}
.doc-nav a:hover{ transform: translateY(-2px); color: var(--ink); }
.doc-nav a.active{ color: var(--ink); border-color: var(--ink); background: var(--paper-fold); }

/* ---------- hero ---------- */
.policy-hero{ padding-bottom:12px; }
.policy-meta{
  display:flex; flex-wrap:wrap; gap:10px 22px; margin: 18px 0 6px;
  font-family: var(--font-display); font-weight:600; font-size:.92rem; color: var(--ink-soft);
}
.policy-meta strong{ color: var(--ink); font-weight:700; }

/* ---------- two-column layout: sticky TOC + prose ---------- */
.policy-layout{
  display:grid; grid-template-columns: 240px minmax(0,1fr); gap: 52px;
  align-items:start; padding-top: 26px;
}
.policy-toc{
  position: sticky; top: calc(var(--nav-h) + 24px);
  display:flex; flex-direction:column; gap:2px;
  max-height: calc(100vh - var(--nav-h) - 48px); overflow:auto;
  padding-right: 6px;
}
.policy-toc-label{
  font-family: var(--font-display); font-weight:700; font-size:.74rem;
  letter-spacing:.6px; text-transform:uppercase; color: var(--ink-soft); margin: 0 0 8px;
}
.policy-toc a{
  display:block; text-decoration:none; color: var(--ink-muted); font-size:.9rem;
  padding:7px 12px; border-radius:10px; border-left:2px solid transparent;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.policy-toc a:hover{ background: var(--paper-fold); color: var(--ink); }
.policy-toc a.active{ color: var(--ink); border-left-color: var(--brand-gold); background: var(--paper-fold); font-weight:600; }

/* mobile "jump to section" — native <details>, hidden on desktop */
.policy-toc-mobile{ display:none; }
.policy-toc-mobile summary{
  cursor:pointer; list-style:none; font-family: var(--font-display); font-weight:700;
  display:flex; align-items:center; justify-content:space-between;
  padding: .9em 1.15em; border-radius: var(--radius-md); background: var(--paper-2);
  box-shadow: var(--shadow-pop-sm); color: var(--ink);
}
.policy-toc-mobile summary::-webkit-details-marker{ display:none; }
.policy-toc-mobile summary::after{ content:"▾"; transition: transform .2s ease; color: var(--ink-soft); }
.policy-toc-mobile[open] summary::after{ transform: rotate(180deg); }
.policy-toc-mobile-list{
  display:flex; flex-direction:column; gap:2px; margin-top:8px; padding:8px;
  background: var(--paper-2); border-radius: var(--radius-md); box-shadow: var(--shadow-pop-sm);
}
.policy-toc-mobile-list a{ text-decoration:none; color: var(--ink-muted); font-size:.92rem; padding:8px 10px; border-radius:8px; }
.policy-toc-mobile-list a:hover{ background: var(--paper-fold); color: var(--ink); }

/* ---------- prose ---------- */
.policy-content{ max-width: 74ch; overflow-wrap: break-word; }
.policy-content h2{
  font-size: clamp(1.35rem, 2.2vw, 1.7rem); scroll-margin-top: calc(var(--nav-h) + 20px);
  margin-top: 2.6em; padding-top:.2em; display:flex; align-items:baseline; gap:.5em;
}
.policy-content h2:first-of-type{ margin-top:0; }
.policy-content h2 .num{ color: var(--brand-gold); font-variant-numeric: tabular-nums; }
.policy-content h3{
  font-size: 1.12rem; margin-top:1.8em; color: var(--ink); scroll-margin-top: calc(var(--nav-h) + 20px);
}
.policy-content h4{ font-size:1rem; margin-top:1.4em; color: var(--ink); }
.policy-content p{ font-size:1.02rem; }
.policy-content > p:first-of-type{ font-size:1.1rem; color: var(--ink); }
.policy-content ul, .policy-content ol{ padding-left:1.35em; margin:0 0 1.2em; color: var(--ink-muted); }
.policy-content li{ margin-bottom:.55em; line-height:1.6; }
.policy-content li::marker{ color: var(--brand-gold); font-weight:700; }
.policy-content li > ul, .policy-content li > ol{ margin-top:.55em; }
.policy-content strong{ color: var(--ink); }
.policy-content a:not(.btn){ color: var(--jal); text-decoration-thickness:1.5px; text-underline-offset:3px; }
.policy-content a:not(.btn):hover{ color: var(--jal-2); }
.policy-content hr{ border:none; border-top:1px dashed var(--paper-line); margin: 2.6em 0; }

/* ---------- callouts ---------- */
.callout{
  display:flex; gap:14px; padding: 20px 22px; margin: 1.6em 0;
  border-radius: var(--radius-md); background: var(--paper-2); box-shadow: var(--shadow-pop-sm);
  border-left: 4px solid var(--brand-gold);
}
.callout-icon{ font-size:1.4rem; line-height:1; flex:none; }
.callout > div{ min-width:0; }
.callout h4{ margin:0 0 .3em; font-size:1.02rem; }
.callout p, .callout ul{ margin-bottom:0; font-size:.96rem; }
.callout p + ul{ margin-top:.6em; }
.callout-safety{ border-left-color: var(--vriksha); }
.callout-safety .callout-icon{ color: var(--vriksha); }

/* ---------- tables ---------- */
.table-wrap{ overflow-x:auto; margin: 1.4em 0 1.8em; border-radius: var(--radius-md); box-shadow: var(--shadow-pop-sm); }
.policy-table{ width:100%; border-collapse:collapse; background: var(--paper-2); font-size:.94rem; min-width:520px; }
.policy-table caption{ caption-side:top; text-align:left; font-family:var(--font-display); font-weight:700; padding:12px 16px 0; color:var(--ink); }
.policy-table th, .policy-table td{ text-align:left; padding:13px 16px; border-bottom:1px solid var(--paper-line); vertical-align:top; }
.policy-table thead th{
  font-family: var(--font-display); font-weight:700; font-size:.78rem; letter-spacing:.3px; text-transform:uppercase;
  color: var(--ink-soft); background: var(--paper-fold);
}
.policy-table tbody tr:last-child td{ border-bottom:none; }
.policy-table tbody tr:hover{ background: color-mix(in srgb, var(--paper-fold) 55%, transparent); }

/* Phones: the three-column policy tables carry full sentences per cell,
   so scroll-to-read at min-width:520px is uncomfortable. Stack each row
   into a card instead; data-label (added in the HTML) restates the
   column header above each value. */
@media (max-width: 640px){
  .table-wrap{ overflow-x: visible; margin: 1.2em 0 1.6em; box-shadow: none; border-radius: 0; }
  .policy-table{ min-width: 0; width: 100%; display: block; }
  .policy-table thead{ display: none; }
  .policy-table tbody{ display: block; }
  .policy-table tr{
    display: block; width: 100%; margin-bottom: 12px;
    border: 1px solid var(--paper-line); border-radius: var(--radius-md);
    background: var(--paper-2); box-shadow: var(--shadow-pop-sm); overflow: hidden;
  }
  .policy-table tr:last-child{ margin-bottom: 0; }
  .policy-table td{
    display: block; width: auto; padding: 12px 16px; border-bottom: 1px solid var(--paper-line);
    font-size: 0.92rem; overflow-wrap: anywhere;
  }
  .policy-table td:last-child{ border-bottom: none; }
  .policy-table td::before{
    content: attr(data-label); display: block; margin-bottom: 4px;
    font-family: var(--font-display); font-weight: 700; font-size: 0.68rem;
    letter-spacing: .4px; text-transform: uppercase; color: var(--ink-soft);
  }
}

/* ---------- five elements ethos (honor code) ---------- */
.elements-grid{ display:grid; grid-template-columns: repeat(auto-fit, minmax(210px,1fr)); gap:16px; margin: 1.4em 0 2em; }
.element-card{
  padding: 18px 18px 20px; border-radius: var(--radius-md); background: var(--paper-2);
  box-shadow: var(--shadow-pop-sm); border-top:4px solid currentColor;
}
.element-card .emoji{ font-size:1.5rem; display:block; margin-bottom:8px; }
.element-card h4{ margin:0 0 .3em; font-size:1rem; color: var(--ink); }
.element-card p{ margin:0; font-size:.9rem; color: var(--ink-muted); }

/* ---------- restorative tier flow ---------- */
.tier-flow{ display:flex; flex-direction:column; gap:0; margin: 1.4em 0 1.8em; }
.tier-step{
  display:flex; align-items:flex-start; gap:14px; padding:16px 18px; border-radius: var(--radius-md);
  background: var(--paper-2); box-shadow: var(--shadow-pop-sm); position:relative;
}
.tier-step + .tier-step{ margin-top:26px; }
.tier-step + .tier-step::before{
  content:"↓"; position:absolute; left:34px; top:-26px; font-size:1.1rem; color: var(--ink-soft);
}
.tier-num{
  flex:none; width:34px; height:34px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-family: var(--font-display); font-weight:800; font-size:.95rem; background: var(--grad-hub); color:#fff;
}
.tier-step > div{ min-width:0; }
.tier-step h4{ margin:0 0 .25em; font-size:1rem; }
.tier-step p{ margin:0; font-size:.9rem; color: var(--ink-muted); }

.tier-detail{ margin:0 0 1.6em; padding-left:0; list-style:none; }
.tier-detail li{ margin-bottom:1.1em; padding:14px 16px; border-radius: var(--radius-sm); background: var(--paper-fold); }
.tier-detail li::marker{ content:none; }
.tier-detail strong{ display:block; margin-bottom:.3em; }

/* ---------- honor pledge ---------- */
.pledge-card{
  margin: 2em 0 1em; padding: 34px 30px; border-radius: var(--radius-lg);
  background: var(--grad-hub); color: #fff; box-shadow: var(--shadow-card); position:relative; overflow:hidden;
}
.pledge-card::before{
  content:"“"; position:absolute; top:-30px; left:14px; font-family: var(--font-display); font-size:9rem;
  color: rgba(255,255,255,.12); line-height:1;
}
.pledge-card p{
  position:relative; margin:0; font-size:1.18rem; line-height:1.65; font-style:italic;
  font-family: var(--font-display); color:#fff;
}

/* ---------- contact / grievance card ---------- */
.contact-card{
  display:grid; grid-template-columns: repeat(auto-fit,minmax(190px,1fr)); gap:18px 26px;
  padding: 22px 24px; margin: 1.4em 0; border-radius: var(--radius-md);
  background: var(--paper-2); box-shadow: var(--shadow-pop-sm);
}
.contact-card div span{ display:block; font-size:.74rem; text-transform:uppercase; letter-spacing:.4px; color: var(--ink-soft); margin-bottom:4px; }
.contact-card div strong{ font-size:.98rem; color: var(--ink); }
.contact-card a{ color: var(--jal); text-decoration:none; }
.contact-card a:hover{ text-decoration:underline; }

/* ---------- back-to-docs footer nav ---------- */
.policy-end-nav{
  display:flex; flex-wrap:wrap; gap:14px; justify-content:space-between; align-items:center;
  margin-top: 3.2em; padding-top: 2em; border-top:1px solid var(--paper-line);
}

/* ---------- responsive ---------- */
@media (max-width: 960px){
  .policy-layout{ grid-template-columns: minmax(0,1fr); gap:22px; }
  .policy-toc{ display:none; }
  .policy-toc-mobile{ display:block; }
}
@media (max-width: 640px){
  .pledge-card{ padding:26px 20px; }
  .pledge-card p{ font-size:1.05rem; }
}

/* ---------- print ---------- */
@media print{
  .navbar, .footer, .to-top, .scroll-progress, .policy-toc, .policy-toc-mobile, .doc-nav, .policy-end-nav{ display:none !important; }
  .policy-layout{ grid-template-columns: 1fr; }
  .policy-content{ max-width:none; }
  body{ background:#fff; }
}