/* =====================================================================
   Time Tracker — legal pages (Terms & Conditions, Privacy Policy).

   Loaded after landing.css and guides.css and built on both: the hero, the
   contents box, the prose column, the cards and the buttons are theirs.
   This file only adds what a legal page needs and an article does not: the
   switch between documents, a contents list that scrolls and follows the
   reader, numbered sections, the key points row and a print layout.
   Hand-written and unbuilt, like the other two.
   ===================================================================== */

/* ---------- Hero ---------- */

.legal-hero { padding-top: 0; padding-bottom: clamp(44px, 5vw, 64px); }

/* The switch between documents: a second row of navigation under the site
   header, with the open document underlined. */
.legal-tabs {
    display: flex;
    align-items: center;
    gap: 4px;
    margin-bottom: clamp(36px, 5vw, 56px);
    border-bottom: 1px solid var(--night-line);
    overflow-x: auto;
}
.legal-tabs-label {
    flex: none;
    margin-right: 14px;
    font-size: 12px;
    font-weight: 700;
    letter-spacing: .13em;
    text-transform: uppercase;
    color: var(--sky);
}
.legal-tab {
    flex: none;
    padding: 17px 14px 15px;
    border-bottom: 2px solid transparent;
    font-size: 14.5px;
    font-weight: 600;
    color: var(--night-text);
    /* The row scrolls sideways on a phone, which would clip an outer ring. */
    outline-offset: -3px;
    transition: color .15s ease, border-color .15s ease;
}
a.legal-tab:hover { color: var(--white); }
/* The open document. It is a <span>, so it cannot be clicked. */
.legal-tab[aria-current="page"] { color: var(--white); border-bottom-color: var(--sky); }

.legal-hero-grid {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: clamp(32px, 5vw, 72px);
}
.legal-hero-art { flex: none; height: auto; }

.legal-meta {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 12px 14px;
    margin-top: 30px;
}
.legal-updated {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    padding: 8px 16px 8px 13px;
    background: rgba(255, 255, 255, .06);
    border: 1px solid var(--night-line);
    border-radius: 999px;
    font-size: 14px;
    font-weight: 600;
    color: var(--white);
}
.legal-updated svg { flex: none; color: var(--sky); }

.legal-print { display: none; }
.js .legal-print { display: inline-flex; }

/* ---------- Contents list ---------- */

.legal-body { padding-top: clamp(40px, 5vw, 64px); }

/* A legal page has more sections than a screen has height, so the box
   scrolls on its own instead of running off the bottom. */
.legal-toc {
    max-height: calc(100vh - var(--header-h) - 48px);
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
}
.legal-toc summary {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    list-style: none;
    cursor: pointer;
}
.legal-toc summary::-webkit-details-marker { display: none; }
.legal-toc summary::after {
    content: "";
    flex: none;
    width: 7px;
    height: 7px;
    margin-right: 3px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: translateY(-2px) rotate(45deg);
    transition: transform .2s ease;
}
.legal-toc details[open] summary::after { transform: translateY(2px) rotate(-135deg); }
.legal-toc details:not([open]) summary { margin-bottom: 0; }

.legal-toc a { font-size: 14px; }
/* Set by legal.js as the reader scrolls. */
.legal-toc a[aria-current="true"] {
    background: var(--white);
    box-shadow: 0 0 0 1px var(--line);
    font-weight: 600;
    color: var(--brand);
}
.guide-toc .legal-toc-part { margin-top: 14px; }
.guide-toc .legal-toc-part:first-child { margin-top: 0; }
.legal-toc-part a { font-weight: 700; color: var(--ink); }

/* ---------- Key points ---------- */

.legal-summary {
    margin-bottom: clamp(36px, 5vw, 52px);
    padding-bottom: clamp(32px, 4vw, 44px);
    border-bottom: 1px solid var(--line);
}
.prose .legal-summary h2 { margin-bottom: 0; font-size: clamp(22px, 2.2vw, 26px); }
.prose .legal-summary .card-grid { margin-top: 18px; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }

.legal-point { display: flex; flex-direction: column; padding: 22px 22px 20px; }
.legal-point .card-icon { margin-bottom: 14px; }
.prose .legal-point p { margin-top: 7px; }
.prose a.legal-point-link {
    margin-top: auto;
    padding-top: 14px;
    font-size: 14px;
    font-weight: 600;
    text-decoration: none;
}
.prose a.legal-point-link::after { content: " \2192"; }
.prose a.legal-point-link:hover { text-decoration: underline; }

.prose .legal-summary-note { margin-top: 16px; font-size: 14px; color: var(--faint); }

/* ---------- The document ---------- */

.legal-doc > section + section { margin-top: 38px; }

.prose .legal-section > h2,
.prose .legal-section > h3 {
    margin: 0 0 10px;
    font-size: clamp(20px, 2vw, 23px);
    line-height: 1.3;
    letter-spacing: -.012em;
    color: var(--ink);
}
.prose .legal-section > h2 + p,
.prose .legal-section > h3 + p { margin-top: 0; }
.prose .legal-section > h2 + ul,
.prose .legal-section > h3 + ul { margin-top: 4px; }

/* The heading of one document on a page that holds two. */
.prose .legal-part { margin: 0 0 26px; }
.prose .legal-section + .legal-part {
    margin-top: clamp(48px, 6vw, 64px);
    padding-top: clamp(40px, 5vw, 52px);
    border-top: 1px solid var(--line);
}

.legal-note {
    margin-bottom: clamp(32px, 4vw, 44px);
    padding: 16px 20px;
    background: #EEF1FF;
    border: 1px solid #DCE2FA;
    border-radius: 12px;
}
.prose .legal-note p { margin: 0; font-size: 16px; color: var(--ink); }

/* ---------- Closing block ---------- */

.legal-contact {
    margin-top: clamp(48px, 6vw, 72px);
    padding: 26px 28px;
    background: var(--paper);
    border: 1px solid var(--line);
    border-radius: var(--radius-lg);
}
.prose .legal-contact h2 { margin-bottom: 8px; font-size: 22px; }
.prose .legal-contact p { margin-top: 0; font-size: 16.5px; }
.prose .legal-contact .legal-contact-also { margin-top: 6px; font-size: 15px; color: var(--muted); }

.prose .legal-top { margin-top: 26px; font-size: 14.5px; }

/* ---------- Responsive ---------- */

@media (max-width: 1000px) {
    .legal-toc { max-height: none; overflow: visible; }
    .legal-toc li { break-inside: avoid; }
}

@media (max-width: 860px) {
    .legal-hero-art { display: none; }
    .legal-hero-grid { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 640px) {
    .legal-tabs-label { display: none; }
    .legal-tabs-label + .legal-tab { padding-left: 0; }
    .prose .legal-summary .card-grid { grid-template-columns: minmax(0, 1fr); }
    .legal-contact { padding: 22px 20px; }
}

/* ---------- Print ----------
   The document, its title and its date, in black on white. landing.css
   already drops the site header and guides.css the contents list. */

@media print {
    .skip-link,
    .legal-tabs,
    .legal-hero-art,
    .legal-print,
    .legal-top,
    .legal-contact-also,
    .site-footer { display: none !important; }

    .legal-hero { padding: 0 0 12pt; background: none; color: #000; }
    .legal-hero::before { display: none; }
    .legal-hero h1,
    .legal-hero .hero-lede,
    .legal-updated { color: #000; }
    .legal-updated { padding: 0; background: none; border: 0; }
    .legal-updated svg { display: none; }

    .legal-body { padding: 0; }
    .guide-layout { display: block; }
    .prose { max-width: none; }
    .prose p,
    .prose ul { font-size: 11pt; color: #000; }
    .prose a:not(.btn) { color: #000; text-decoration: none; }
    .prose h2,
    .prose h3 { break-after: avoid; }

    .legal-point { break-inside: avoid; box-shadow: none; }
    .legal-note,
    .legal-contact { background: none; }
}