/* doc.css - layout for the pages the design concept did not cover: legal documents,
   support, download, the changelog, the thanks page and 404. The concept ships heroes
   and demo surfaces but no long-form reading layout, so this builds one from the same
   tokens (style.css :root) and the same type language as interiors.css: a serif
   eyebrow, a large display heading, generous vertical rhythm. Nothing here restyles a
   concept page; every selector is scoped under .doc-page. */

.doc-page{background:#fff}

/* ---------------------------------------------------------------- hero */
.doc-hero{position:relative;isolation:isolate;background:var(--pale);padding:86px 0 74px;border-bottom:1px solid var(--line)}
.doc-hero:before{content:'';position:absolute;width:390px;height:120px;border-radius:100px;background:#e7e7fb;left:-250px;top:80px;transform:rotate(-28deg);z-index:-1}
.doc-hero .s-label{margin-bottom:18px}
.doc-hero h1{font-size:clamp(2.6rem,5.6vw,4.6rem);line-height:1.02;letter-spacing:-.035em;max-width:16ch}
.doc-hero .s-intro{margin:26px 0 0;max-width:640px;color:var(--muted)}
.doc-hero .doc-actions{margin-top:26px;align-items:center;gap:14px 18px}
.doc-hero .doc-actions .doc-note{margin:0;max-width:36ch}
.doc-updated{margin-top:26px;font-size:.8125rem;letter-spacing:.02em;color:var(--muted)}
.doc-updated b{font-weight:600;color:var(--ink)}

/* ---------------------------------------------------------------- shell */
.doc-shell{display:grid;grid-template-columns:minmax(0,1fr);gap:54px;padding:74px 0 96px;align-items:start}
@media(min-width:1000px){.doc-shell{grid-template-columns:230px minmax(0,1fr);gap:72px}}

.doc-toc{position:sticky;top:112px;font-size:.8125rem;line-height:1.5}
.doc-toc strong{display:block;font-family:var(--display);font-size:.75rem;letter-spacing:.14em;text-transform:uppercase;color:var(--muted);margin-bottom:14px}
.doc-toc a{display:block;padding:7px 0 7px 14px;border-left:2px solid var(--line);color:var(--muted);transition:color .2s,border-color .2s}
.doc-toc a:hover,.doc-toc a[aria-current="true"]{color:var(--purple);border-left-color:var(--purple)}
@media(max-width:999px){.doc-toc{position:static;border:1px solid var(--line);border-radius:14px;padding:22px 24px;background:var(--pale)}
  .doc-toc a{border-left:0;padding:5px 0}}

/* ---------------------------------------------------------------- prose */
/* The measure is capped on the prose itself, not on the column. Capping the column
   made a permissions matrix wrap inside 70ch while the page had room to spare; tables
   and cards now use the full column and only the reading line stays narrow. */
.doc-body{max-width:none;font-size:1rem;line-height:1.72;color:#3d4254}
.doc-body>section>p,.doc-body>section>ul,.doc-body>section>ol,
.doc-body>section>h2,.doc-body>section>h3,.doc-body>p,.doc-lead{max-width:70ch}
.doc-body>section+section{margin-top:58px}
.doc-body h2{font-size:clamp(1.6rem,2.6vw,2.1rem);line-height:1.14;letter-spacing:-.025em;color:var(--ink);scroll-margin-top:112px;margin-bottom:18px}
.doc-body h3{font-size:1.125rem;letter-spacing:-.01em;color:var(--ink);margin:34px 0 10px}
.doc-body p{margin:0 0 16px}
.doc-body p:last-child{margin-bottom:0}
.doc-body a:not(.button){color:var(--purple);text-decoration:underline;text-underline-offset:3px}
.doc-body ul,.doc-body ol{margin:0 0 18px;padding-left:22px}
.doc-body li{margin-bottom:9px}
.doc-body li::marker{color:#a8adc0}
.doc-body strong{color:var(--ink);font-weight:600}
.doc-body hr{border:0;border-top:1px solid var(--line);margin:44px 0}
.doc-lead{font-size:1.125rem;line-height:1.62;color:var(--muted)}

.doc-body code,.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.875em;background:var(--pale);border:1px solid var(--line);border-radius:5px;padding:2px 6px;word-break:break-all}
.doc-body pre{background:var(--pale);border:1px solid var(--line);border-radius:12px;padding:18px 20px;overflow-x:auto;margin:0 0 18px}
.doc-body pre code{background:none;border:0;padding:0}

/* tables read as data, not decoration */
.doc-table{width:100%;border-collapse:collapse;margin:0 0 20px;font-size:.9375rem}
.doc-table th,.doc-table td{text-align:left;padding:13px 16px;border-bottom:1px solid var(--line);vertical-align:top}
.doc-table th{font-family:var(--display);font-size:.75rem;letter-spacing:.12em;text-transform:uppercase;color:var(--muted);font-weight:700}
.doc-table tr:last-child td{border-bottom:0}
.doc-scroll{overflow-x:auto;margin-bottom:20px}

/* ---------------------------------------------------------------- cards */
.doc-card{border:1px solid var(--line);border-radius:16px;padding:28px 30px;background:#fff;margin:0 0 20px}
.doc-card--pale{background:var(--pale)}
.doc-card h3{margin-top:0}
.doc-grid{display:grid;gap:20px;margin-bottom:20px}
@media(min-width:760px){.doc-grid--2{grid-template-columns:1fr 1fr}}
.doc-tag{display:inline-block;font-family:var(--display);font-size:.75rem;letter-spacing:.14em;font-weight:700;color:var(--purple);margin-bottom:10px}
.doc-note{font-size:.8125rem;color:var(--muted);line-height:1.6}

/* a yes/no list, as the privacy summary uses */
/* padding-left wins from .doc-body ul otherwise, indenting a list that has no markers */
.doc-marks,.doc-body .doc-marks{list-style:none;padding-left:0;margin:0 0 20px}
.doc-marks li{display:flex;gap:12px;margin-bottom:14px}
.doc-mark{flex:0 0 22px;width:22px;height:22px;border-radius:50%;display:grid;place-items:center;font-size:12px;font-weight:700;margin-top:2px}
.doc-mark--yes{background:#e3f5ef;color:var(--teal)}
.doc-mark--no{background:#fdeaea;color:#c8393e}

/* ---------------------------------------------------------------- forms */
.doc-form{display:flex;flex-direction:column;gap:18px}
.doc-field{display:flex;flex-direction:column;gap:7px}
.doc-field label{font-family:var(--display);font-size:.8125rem;font-weight:650;color:var(--ink)}
.doc-field input{border:1px solid #d7d9e4;border-radius:9px;padding:13px 15px;font-size:1rem;background:#fff;color:var(--ink);transition:border-color .2s,box-shadow .2s}
.doc-field input:focus{border-color:var(--purple);outline:0;box-shadow:0 0 0 3px rgba(72,68,239,.15)}
.doc-field input:focus-visible{outline:3px solid #6864fa;outline-offset:3px}
.doc-consent{display:flex;gap:12px;font-size:.8125rem;line-height:1.6;color:var(--muted)}
.doc-consent input{margin-top:3px;flex:0 0 auto;accent-color:var(--purple);width:16px;height:16px}
.doc-form .button[aria-disabled="true"]{opacity:.6;cursor:progress}
.doc-out{font-size:.875rem;line-height:1.6;margin:0;min-height:1.2em}
.doc-out[data-state="working"]{color:var(--muted)}
.doc-out[data-state="error"]{color:#c8393e}
.doc-out[data-state="done"]{color:var(--teal)}

/* ---------------------------------------------------------------- changelog */
.doc-release{border-left:2px solid var(--line);padding:0 0 34px 26px;position:relative}
.doc-release:last-child{padding-bottom:0}
.doc-release:before{content:'';position:absolute;left:-6px;top:7px;width:10px;height:10px;border-radius:50%;background:var(--purple)}
.doc-release:not(:first-child):before{background:#c9cbd8}
.doc-release h3{margin:0 0 4px;font-size:1.25rem}
.doc-release-date{font-size:.75rem;letter-spacing:.1em;text-transform:uppercase;color:var(--muted);font-family:var(--display);font-weight:700}
.doc-release ul{margin-top:12px}

/* ---------------------------------------------------------------- closing */
.doc-closing{background:var(--pale);border-top:1px solid var(--line);padding:70px 0}
.doc-closing .s-label{margin-bottom:14px}
.doc-closing h2{font-size:clamp(1.9rem,3.6vw,2.9rem);line-height:1.08;letter-spacing:-.03em;max-width:18ch}
.doc-closing p{margin:18px 0 26px;color:var(--muted);max-width:52ch}
.doc-actions{display:flex;flex-wrap:wrap;gap:12px}

@media(max-width:760px){
  .doc-hero{padding:62px 0 54px}
  .doc-shell{padding:54px 0 70px;gap:40px}
  .doc-card{padding:24px}
  .doc-closing{padding:56px 0}
}

/* download page: prose left, the form card sticky on the right */
.doc-shell--download{grid-template-columns:minmax(0,1fr)}
.doc-aside{display:flex;flex-direction:column;gap:16px}
@media(min-width:1000px){
  .doc-shell--download{grid-template-columns:minmax(0,1fr) 400px}
  .doc-aside{position:sticky;top:112px}
}

/* Disclosure rows. The concept's feature pages mark a summary with a + on the right
   and no browser triangle; these pages get the same treatment without needing the
   span in the markup, so a plain <details> inside a card matches the FAQ elsewhere. */
.doc-body details>summary{cursor:pointer;font-family:var(--display);font-weight:650;color:var(--ink);display:flex;align-items:center;justify-content:space-between;gap:20px;list-style:none}
.doc-body details>summary::-webkit-details-marker{display:none}
.doc-body details>summary::after{content:'+';font-size:1.35rem;line-height:1;color:var(--muted);font-weight:400}
.doc-body details[open]>summary::after{content:'\2212'}
.doc-body details>summary:focus-visible{outline:3px solid #6864fa;outline-offset:5px}
.doc-body details>*:not(summary){margin-top:14px}
/* several disclosures grouped in one card still need a line between them */
.doc-body .doc-card details+details{border-top:1px solid var(--line);margin-top:18px;padding-top:18px}

/* notehand.js hides the copy button until a key has actually arrived, with
   el.hidden. .button sets display:inline-flex, an author rule that beats the user
   agent's [hidden]{display:none}, so without this the loading and error states keep
   a live "Copy key" button that copies the error heading. features.css carries the
   same correction for the pages that load it; these pages do not load it. */
.doc-page [hidden]{display:none!important}

/* a single-column shell: .doc-shell would otherwise put the only child in the
   230px table-of-contents track */
.doc-shell--full{grid-template-columns:minmax(0,1fr)}
@media(min-width:1000px){.doc-shell--full{grid-template-columns:minmax(0,1fr)}}

/* the licence-key box states, matching .doc-out */
.doc-card[data-state="error"]{border-color:#f0c9cb;background:#fdf7f7}
.doc-card[data-state="error"] .mono{color:#c8393e}
.doc-card[data-state="ready"]{border-color:#bfe6da;background:#f5fbf9}
.doc-card[data-state="ready"] .mono{color:var(--teal);font-size:1.05rem;letter-spacing:.04em}