/* doc.css: the reading pages that sit beside a Dixith Labs app (privacy,
 * contact), in the app's own design. Master copy: dixith-labs-design/doc.css.
 * Each app carries an identical copy at its root; the deploy checks they match.
 *
 * The page takes the person's chosen theme and accent from the app (a line of
 * script in each page reads the app's saved settings before the first paint),
 * so the privacy page of an app set to Lagoon and dark is Lagoon and dark.
 * Tokens, glass, colour fields and type follow DESIGN-PHILOSOPHY.md.
 */
@font-face { font-family: 'Fraunces'; src: url('fonts/fraunces-latin-700.woff2') format('woff2'); font-weight: 700; font-display: swap; }

:root {
  --display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --body: -apple-system, BlinkMacSystemFont, 'SF Pro Text', 'Segoe UI', Roboto, 'Noto Sans', 'Noto Sans Kannada', 'Noto Sans Devanagari', 'Helvetica Neue', Arial, sans-serif;
  --ease: cubic-bezier(.2, .8, .2, 1);
  --bg: #F6F4EF; --bg-2: #EEEBE4; --surface: #FFFFFF; --surface-2: #FAF9F6;
  --ink: #1C1E24; --ink-2: #5A5F6B; --ink-3: #8D919B; --line: rgba(28, 30, 36, .08); --line-2: rgba(28, 30, 36, .15);
  --late: #C4453A; --good: #2F8F5B;
  --glass: rgba(255, 255, 255, .66); --milk: rgba(255, 255, 255, .74); --on-accent: #fff;
  --shadow-1: 0 1px 2px rgba(20, 22, 30, .05), 0 2px 8px rgba(20, 22, 30, .04);
  --blob-b: .20; --warm: #FFC996;
  color-scheme: light;
}
:root[data-accent="ink"]    { --accent: #3552A8; --accent-2: #5C6FD8; --accent-ink: #2B4491; --accent-soft: rgba(53, 82, 168, .11); --accent-line: rgba(53, 82, 168, .28); }
:root[data-accent="lagoon"] { --accent: #0E7C73; --accent-2: #2AA898; --accent-ink: #0A665E; --accent-soft: rgba(14, 124, 115, .11); --accent-line: rgba(14, 124, 115, .28); }
:root[data-accent="clay"]   { --accent: #B4532F; --accent-2: #D97A4D; --accent-ink: #9A4526; --accent-soft: rgba(180, 83, 47, .11); --accent-line: rgba(180, 83, 47, .28); --warm-a: .16; }

:root[data-theme="dark"], :root.auto-dark {
  --bg: #111317; --bg-2: #16191E; --surface: #1A1D23; --surface-2: #1F232A;
  --ink: #ECEDEF; --ink-2: #A8ACB5; --ink-3: #737882; --line: rgba(255, 255, 255, .07); --line-2: rgba(255, 255, 255, .13);
  --late: #F07A6E; --good: #5FC58E;
  --glass: rgba(22, 25, 31, .64); --milk: #1A1D23; --on-accent: #0D1018;
  --shadow-1: 0 1px 2px rgba(0, 0, 0, .3);
  --blob-b: .14;
  color-scheme: dark;
}
:root[data-theme="dark"][data-accent="ink"], :root.auto-dark[data-accent="ink"]       { --accent: #94A8F2; --accent-2: #B3A6F5; --accent-ink: #AEBCF6; --accent-soft: rgba(148, 168, 242, .14); --accent-line: rgba(148, 168, 242, .34); }
:root[data-theme="dark"][data-accent="lagoon"], :root.auto-dark[data-accent="lagoon"] { --accent: #52C8B8; --accent-2: #7FD9C2; --accent-ink: #72D6C8; --accent-soft: rgba(82, 200, 184, .14); --accent-line: rgba(82, 200, 184, .34); }
:root[data-theme="dark"][data-accent="clay"], :root.auto-dark[data-accent="clay"]     { --accent: #F0916B; --accent-2: #F5B27F; --accent-ink: #F4A585; --accent-soft: rgba(240, 145, 107, .14); --accent-line: rgba(240, 145, 107, .34); }

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
body { margin: 0; min-height: 100dvh; background: var(--bg); color: var(--ink); font: 16px/1.65 var(--body); overflow-wrap: anywhere; }
:root:not([data-theme="dark"]):not(.auto-dark) body { background: linear-gradient(180deg, #F9F7F2, #F1EFEA) fixed; }

/* The colour fields the glass catches (section 4.4), and the sunrise field in light mode. */
.backdrop { position: fixed; inset: 0; z-index: -1; pointer-events: none; overflow: hidden; }
.backdrop i { position: absolute; border-radius: 50%; filter: blur(80px) saturate(140%); }
.backdrop i:nth-child(1) { width: 60vmax; height: 60vmax; left: -20vmax; top: -20vmax; background: var(--accent); opacity: var(--blob-b); }
.backdrop i:nth-child(2) { width: 46vmax; height: 46vmax; right: -16vmax; top: 22vh; background: var(--accent-2); opacity: calc(var(--blob-b) * .8); }
.backdrop i:nth-child(3) { width: 50vmax; height: 50vmax; left: 10vw; bottom: -30vmax; background: var(--accent); opacity: calc(var(--blob-b) * .6); }
:root:not([data-theme="dark"]):not(.auto-dark) .backdrop::after { content: ''; position: absolute; width: 40vmax; height: 40vmax; right: -10vmax; top: -14vmax; border-radius: 50%;
  background: var(--warm); opacity: var(--warm-a, .30); filter: blur(80px); }

/* The bar: the app's mark and name, and the way back into the app. Glass (section 4.1). */
.doc-top { position: sticky; top: 0; z-index: 5; background: var(--glass); -webkit-backdrop-filter: saturate(180%) blur(22px); backdrop-filter: saturate(180%) blur(22px);
  border-bottom: 1px solid var(--line); padding: max(10px, env(safe-area-inset-top)) 16px 10px; }
:root:not([data-theme="dark"]):not(.auto-dark) .doc-top { background: linear-gradient(180deg, rgba(255, 255, 255, .82), var(--glass)); box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .75); }
.doc-top-in { max-width: 720px; margin: 0 auto; display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.doc-brand { display: flex; align-items: center; gap: 10px; color: var(--ink); text-decoration: none; }
.doc-brand img { width: 30px; height: 30px; border-radius: 10px; }
.doc-brand b { font: 700 21px/1 var(--display); letter-spacing: -.01em; }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 42px; padding: 0 18px; border-radius: 13px; border: 0;
  font: 600 15px/1 var(--body); text-decoration: none; cursor: pointer; transition: transform .15s var(--ease), background .15s var(--ease), opacity .15s; }
.btn:active { transform: scale(.97); }
.btn.small { min-height: 34px; padding: 0 14px; border-radius: 11px; font-size: 14px; }
.btn.soft { background: var(--accent-soft); color: var(--accent-ink); box-shadow: inset 0 1px 0 rgba(255, 255, 255, .25); }
.btn.primary { background: linear-gradient(145deg, var(--accent-2), var(--accent)); color: var(--on-accent); font-weight: 700;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 30%, transparent), inset 0 1px 0 rgba(255, 255, 255, .28); }
.btn:disabled { opacity: .45; cursor: default; }

main.doc { max-width: 720px; margin: 0 auto; padding: 26px 16px calc(56px + env(safe-area-inset-bottom)); animation: enter .32s var(--ease); }
@keyframes enter { from { opacity: 0; transform: translateY(6px); } }
.doc h1 { font: 700 34px/1.12 var(--display); letter-spacing: -.015em; margin: 4px 0 8px; }
.doc h2 { font: 700 21px/1.3 var(--display); margin: 34px 0 8px; letter-spacing: -.005em; }
.doc h3 { font-size: 16px; margin: 18px 0 4px; }
.doc .lede { font-size: 18px; color: var(--ink-2); margin: 0 0 6px; }
.doc .updated { color: var(--ink-2); font-size: 14px; margin: 0; }
.doc a { color: var(--accent-ink); text-underline-offset: 2px; }
.doc ul, .doc ol { padding-left: 22px; margin: 8px 0 12px; }
.doc li { margin: 5px 0; }
.doc p { margin: 10px 0; }
.doc .muted { color: var(--ink-2); font-size: 15px; }

/* In short: the one tinted card. Cards otherwise milk glass (light) or solid (dark), section 4.2. */
.summary { background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent-line); border-radius: 20px; padding: 16px 20px; margin: 22px 0 0; }
.summary p, .summary ul { margin: 6px 0; }
.card { background: var(--milk); -webkit-backdrop-filter: blur(16px); backdrop-filter: blur(16px); border-radius: 20px; padding: 6px 20px 8px; margin: 12px 0;
  box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
:root:not([data-theme="dark"]):not(.auto-dark) .card { box-shadow: 0 6px 22px color-mix(in srgb, var(--accent) 8%, transparent), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 0 0 1px var(--line); }
.card > h2:first-child { margin-top: 16px; }
.card > h2 { margin-top: 26px; }
.note { border-left: 3px solid var(--accent); padding: 2px 0 2px 14px; margin: 18px 0; }
.doc table { width: 100%; border-collapse: collapse; margin: 6px 0; font-size: 15px; }
.doc th, .doc td { text-align: left; vertical-align: top; padding: 11px 6px; border-bottom: 1px solid var(--line); }
.doc tr:last-child th, .doc tr:last-child td { border-bottom: 0; }
.doc th { font-weight: 600; width: 34%; }

/* A contents line under the title, for long pages. */
.toc { display: flex; flex-wrap: wrap; gap: 8px; margin: 18px 0 0; padding: 0; list-style: none; }
.toc a { display: inline-block; padding: 6px 12px; border-radius: 99px; background: var(--surface-2); box-shadow: inset 0 0 0 1px var(--line-2); color: var(--ink-2); font-size: 14px; text-decoration: none; }
.toc a:hover { color: var(--accent-ink); box-shadow: inset 0 0 0 1px var(--accent-line); }

footer.doc-foot { max-width: 720px; margin: 0 auto; padding: 0 16px calc(40px + env(safe-area-inset-bottom)); color: var(--ink-2); font-size: 14px; display: flex; flex-wrap: wrap; gap: 6px 16px; }
footer.doc-foot a { color: var(--accent-ink); }

/* The contact form (contact/index.html and contact.js). */
.form { display: grid; gap: 14px; margin: 18px 0 0; }
.field { display: grid; gap: 6px; }
.field > span { font-weight: 600; font-size: 15px; }
.field small { color: var(--ink-2); font-weight: 400; }
.input, textarea.input, select.input { width: 100%; font: 16px/1.4 var(--body); color: var(--ink); background: var(--surface); border: 1px solid var(--line-2); border-radius: 13px; padding: 11px 14px; }
textarea.input { min-height: 150px; resize: vertical; }
.input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft); }
.hp { position: absolute; left: -9999px; width: 1px; height: 1px; overflow: hidden; }
.form-status { min-height: 1.4em; font-size: 15px; color: var(--ink-2); }
.form-status.bad { color: var(--late); }
.form-status.good { color: var(--good); font-weight: 600; }
.sent { text-align: center; padding: 26px 8px 10px; }
.sent h2 { margin-top: 6px; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) { .doc-top { background: var(--surface-2); } .card { background: var(--surface); } }
@media print { .doc-top, .backdrop, footer.doc-foot { display: none; } body { background: #fff; } .card, .summary { box-shadow: none; border: 1px solid #ccc; } }