/* docgrit.css — the 2026 design (landing page look) for the rest of the app.
   A page opts in with <body class="dg"> and this stylesheet, loaded AFTER the
   older sheets (main / modern-2025 / responsive / mobile-fixes) so it wins.
   Tokens match the <style> block at the top of index.html. */

:root {
    --paper:   #F5F3EE;
    --card:    #FFFFFF;
    --wash:    #FBFAF7;
    --line:    #E2DED5;
    --line-2:  #C9C3B6;
    --ink:     #121316;
    --ink-2:   #45484F;
    --muted:   #5B5E66;
    --accent:  #FF6A2B;
    --accent-ink:  #B8400F;
    --accent-wash: #FFF4EE;
    --ok:      #1F7A4D;
    --ok-wash: #E3F2EA;
    --danger:  #B42318;
    --dark:    #121316;
    --dark-2:  #1B1C20;
    --dark-line: #2A2C31;
    --serif: 'Instrument Serif', Georgia, 'Times New Roman', serif;
    --sans: 'Geist', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
    --mono: 'JetBrains Mono', ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}

body.dg { background: var(--paper) !important; color: var(--ink); font-family: var(--sans); -webkit-font-smoothing: antialiased; }
body.dg h1, body.dg h2, body.dg h3, body.dg h4, body.dg button, body.dg input,
body.dg select, body.dg textarea, body.dg a { font-family: var(--sans); }
body.dg :focus-visible { outline: 2px solid var(--accent-ink); outline-offset: 2px; }

/* ── Shared nav (nav.js) restyled: full-width paper bar like the landing ── */
body.dg .header-sticky {
    position: sticky; top: 0; left: 0; right: 0; transform: none;
    width: 100%; max-width: none; border-radius: 0; box-shadow: none;
    background: rgba(245, 243, 238, 0.9);
    border: 0; border-bottom: 1px solid var(--line);
}
body.dg .header-sticky:hover { box-shadow: none; border-color: var(--line); }
body.dg .header-nav { max-width: 1248px; margin: 0 auto; padding: 0 1.5rem; height: 4.25rem; min-height: 4.25rem; }
body.dg .header-logo { color: var(--ink); font-weight: 700; font-size: 1.125rem; letter-spacing: -0.02em; height: auto; }
body.dg .header-logo img { width: 28px !important; height: 28px !important; border-radius: 7px !important; }
body.dg .nav-link { color: var(--ink-2); font-size: 0.9375rem; font-weight: 500; }
body.dg .nav-link:hover { color: var(--ink); }
body.dg .nav-link.active { color: var(--accent-ink); font-weight: 600; }
body.dg .nav-back-link { color: var(--ink-2); }
body.dg .nav-plan-badge { font-family: var(--mono); letter-spacing: 0.04em; border-radius: 6px; }
body.dg .nav-plan-badge.pro  { background: var(--ink); color: #fff; }
body.dg .nav-plan-badge.free { background: transparent; color: var(--muted); border: 1px solid var(--line-2); }
body.dg .avatar-chip { background: var(--card); border-color: var(--line); }
body.dg .avatar-circle { background: var(--dark); border-color: var(--dark); color: #fff; }
body.dg .dash-dropdown { border-color: var(--line); border-radius: 10px; }
body.dg .dash-dropdown a:hover, body.dg .dash-dropdown button:hover { background: var(--paper); }
body.dg .btn-pro { background: var(--ink); border-radius: 10px; }
body.dg .nav-mobile-toggle { border-color: var(--line); background: var(--card); }
@media (max-width: 768px) {
    body.dg .header-sticky { position: sticky !important; background: rgba(245, 243, 238, 0.95) !important; }
    body.dg .header-nav { padding: 0 1rem !important; height: 3.75rem !important; min-height: 3.75rem !important; }
}

/* ── Layout ── */
.dg-wrap { max-width: 1248px; margin: 0 auto; padding: 0 1.5rem; }
.dg-eyebrow {
    font-family: var(--mono); font-size: 0.75rem; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--accent-ink); margin: 0 0 1rem;
}
.dg-h1 {
    font-family: var(--serif) !important; font-weight: 400; color: var(--ink);
    font-size: clamp(2.5rem, 5vw, 4rem); line-height: 1; letter-spacing: -0.02em; margin: 0;
}
.dg-h1 em { font-style: italic; color: var(--accent-ink); }
.dg-lead { font-size: 1.0625rem; line-height: 1.55; color: var(--ink-2); margin: 1rem 0 0; max-width: 34rem; }

/* ── Surfaces ── */
.dg-card { background: var(--card); border: 1px solid var(--line); border-radius: 12px; }
.dg-dark { background: var(--dark); color: #E7E5E0; border: 1px solid var(--dark-line); border-radius: 12px; }

/* ── Buttons ── */
.dg-btn {
    display: inline-flex; align-items: center; justify-content: center; gap: 0.5rem;
    height: 2.875rem; padding: 0 1.25rem; border-radius: 10px; border: 1px solid transparent;
    font-family: var(--sans); font-size: 0.9375rem; font-weight: 600; cursor: pointer;
    text-decoration: none; white-space: nowrap; transition: background 0.15s, border-color 0.15s, color 0.15s;
}
.dg-btn:disabled { opacity: 0.45; cursor: not-allowed; }
.dg-btn-dark { background: var(--ink); color: #fff; }
.dg-btn-dark:hover:not(:disabled) { background: #2A2C31; color: #fff; }
.dg-btn-accent { background: var(--accent); color: var(--ink); }
.dg-btn-accent:hover:not(:disabled) { background: #FF7D45; }
.dg-btn-ghost { background: transparent; color: var(--ink); border-color: var(--line-2); }
.dg-btn-ghost:hover:not(:disabled) { background: var(--card); border-color: var(--ink); }
.dg-btn-sm { height: 2.25rem; padding: 0 0.875rem; font-size: 0.8125rem; border-radius: 8px; }

/* ── Forms ── */
.dg-label { display: block; font-size: 0.8125rem; font-weight: 600; color: var(--ink); margin: 0 0 0.375rem; }
.dg-label .dg-opt { font-weight: 400; color: var(--muted); }
.dg-input {
    width: 100%; background: var(--card); color: var(--ink);
    border: 1px solid var(--line-2); border-radius: 8px; padding: 0.625rem 0.75rem;
    font-family: var(--sans); font-size: 0.9375rem; line-height: 1.4; transition: border-color 0.15s, box-shadow 0.15s;
}
.dg-input::placeholder { color: #9A9CA3; }
.dg-input:focus { outline: none; border-color: var(--ink); box-shadow: 0 0 0 3px rgba(18, 19, 22, 0.08); }
.dg-input.dg-mono { font-family: var(--mono); font-size: 0.875rem; }
textarea.dg-input { resize: vertical; }
.dg-help { font-size: 0.8125rem; color: var(--muted); margin: 0.375rem 0 0; }

/* ── HTTP method tags ── */
.dg-method {
    display: inline-flex; align-items: center; justify-content: center; min-width: 3.75rem;
    padding: 0.1875rem 0.5rem; border-radius: 6px; font-family: var(--mono);
    font-size: 0.6875rem; font-weight: 500; letter-spacing: 0.04em;
}
.dg-method-GET    { background: #E3F2EA; color: #145C39; }
.dg-method-POST   { background: #E6EEFB; color: #1D4A8F; }
.dg-method-PUT    { background: #FBF0DB; color: #7A4A06; }
.dg-method-PATCH  { background: #EFE8F8; color: #5A2E8C; }
.dg-method-DELETE { background: #FBE7E4; color: #9A2415; }

/* Old sheets force phone button/heading sizes with !important */
@media (max-width: 768px) {
    body.dg .dg-h1 { font-size: 2.5rem !important; line-height: 1.02 !important; }
    body.dg button.dg-btn { width: auto !important; min-height: 0 !important; font-size: 0.9375rem !important; padding: 0 1.125rem !important; }
    body.dg button.dg-btn-sm { font-size: 0.8125rem !important; padding: 0 0.875rem !important; }
    body.dg .dg-input { font-size: 16px !important; }
}

/* ── Page hero (inner pages) ── */
.dg-hero { padding: 4.5rem 0 3rem; border-bottom: 1px solid var(--line); }
.dg-hero .dg-lead { max-width: 38rem; }
.dg-meta { display: flex; flex-wrap: wrap; gap: 0.5rem 2rem; margin-top: 2rem; font-family: var(--mono); font-size: 0.75rem; color: var(--muted); }
.dg-meta b { font-weight: 500; color: var(--ink); }
.dg-link { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; text-decoration-thickness: 1px; }
.dg-link:hover { color: var(--ink); }

/* ── Legal pages (privacy, terms): sticky contents + long-form text ── */
.dg-legal { display: grid; grid-template-columns: 220px minmax(0, 720px); gap: 4.5rem; padding: 3.5rem 0 6rem; }
.dg-toc { position: sticky; top: 5.75rem; align-self: start; }
.dg-toc p { font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.08em; text-transform: uppercase; color: var(--muted); margin: 0 0 0.875rem; }
.dg-toc ol { list-style: none; margin: 0; padding: 0; border-left: 1px solid var(--line); }
.dg-toc a { display: block; padding: 0.3125rem 0 0.3125rem 0.875rem; margin-left: -1px; border-left: 1px solid transparent; font-size: 0.8125rem; line-height: 1.4; color: var(--ink-2); text-decoration: none; }
.dg-toc a:hover { color: var(--ink); border-left-color: var(--ink); }
.dg-toc a.is-on { color: var(--accent-ink); border-left-color: var(--accent-ink); }

.dg-legal .doc-section-title {
    font-family: var(--serif) !important; font-weight: 400; font-size: 2rem; line-height: 1.1; letter-spacing: -0.01em;
    color: var(--ink); margin: 0 0 1rem; scroll-margin-top: 5.5rem;
}
.dg-legal .doc-sub-title { font-size: 1rem; font-weight: 600; color: var(--ink); margin: 1.5rem 0 0.5rem; }
.dg-legal .doc-p { font-size: 1rem; line-height: 1.75; color: var(--ink-2); margin: 0 0 0.875rem; }
.dg-legal .doc-p a { color: var(--accent-ink) !important; text-decoration: underline; text-underline-offset: 3px; }
.dg-legal .doc-list { list-style: none; padding: 0; margin: 0 0 1rem; }
.dg-legal .doc-list li { position: relative; padding: 0.25rem 0 0.25rem 1.5rem; font-size: 1rem; line-height: 1.65; color: var(--ink-2); }
.dg-legal .doc-list li::before { content: ''; position: absolute; left: 0.125rem; top: 0.95rem; width: 0.625rem; height: 1px; background: var(--accent-ink); }
.dg-legal .doc-divider { border: 0; border-top: 1px solid var(--line); margin: 2.5rem 0; }

.dg-rows { border: 1px solid var(--line); border-radius: 10px; background: var(--card); overflow: hidden; margin: 0.75rem 0 1rem; }
.dg-rows > div { display: flex; gap: 1rem; align-items: flex-start; padding: 0.875rem 1.125rem; border-top: 1px solid var(--line); }
.dg-rows > div:first-child { border-top: 0; }
.dg-rows .provider-name, .dg-rows .plan-name { font-weight: 600; font-size: 0.9375rem; color: var(--ink); }
.dg-rows .provider-name { min-width: 10rem; }
.dg-rows .provider-desc, .dg-rows .plan-desc { font-size: 0.9375rem; line-height: 1.55; color: var(--ink-2); }
.dg-rows .plan-badge { flex-shrink: 0; min-width: 5.5rem; margin-top: 0.125rem; font-family: var(--mono); font-size: 0.6875rem; letter-spacing: 0.04em; text-transform: uppercase; color: var(--muted); }
.dg-rows .plan-badge.pro { color: var(--accent-ink); }

.dg-note { margin-top: 2rem; padding: 1.25rem 1.5rem; border-radius: 10px; background: var(--card); border: 1px solid var(--line); border-left: 3px solid var(--ink); }
.dg-note.is-warn { border-left-color: var(--accent); background: var(--accent-wash); }
.dg-note .info-box-title, .dg-note .warn-box-title { font-weight: 600; color: var(--ink); font-size: 0.9375rem; margin: 0 0 0.375rem; }
.dg-note p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }
.dg-note a, .contact-block a { color: var(--accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.dg-legal .contact-block { margin-top: 0.875rem; padding: 1rem 1.25rem; border: 1px solid var(--line); border-radius: 10px; background: var(--card); }
.dg-legal .contact-block p { margin: 0; font-size: 0.9375rem; line-height: 1.7; color: var(--ink-2); }

@media (max-width: 960px) {
    .dg-legal { grid-template-columns: minmax(0, 1fr); gap: 2rem; padding-top: 2.5rem; }
    .dg-toc { position: static; }
    .dg-toc ol { columns: 2; column-gap: 1.5rem; }
}
@media (max-width: 640px) {
    .dg-hero { padding: 3rem 0 2.25rem; }
    .dg-toc { display: none; }
    .dg-legal .doc-section-title { font-size: 1.75rem !important; }
    .dg-rows > div { flex-direction: column; gap: 0.25rem; }
}