/* Home pages and text pages of help.draften.ai.
   draften brand tokens (draften-brand/tokens, docs/design/draften-theme.css).
   Guides have their own layout in the draften-help skill — this is the portal. */

:root{
 --paper:#F3F3F0; --surface:#FFFFFF;
 --ink:#1B1B1F; --muted:#55555B; --pebble:#B4B4BA;
 --line:#E4E4DF; --line-soft:#EDEDE9;
 --send:#E0462B; --send-600:#C53E26; --send-hover:#A93420; --send-tint:#FAEDEA;
 --signal:#E0462B; --signal-soft:#FAEDEA;
 --warn-bg:#F8F1E9; --warn-border:#E4E4DF; --warn-text:#A15C07;
 --ok-bg:#E3EFE9; --ok-text:#17784E; --err-bg:#F6E5E3; --err-text:#B42318;
 --r-chip:8px; --r-btn:10px; --r-panel:12px; --r-card:16px;
 --shadow-1:0 1px 2px rgba(27,27,31,.06), 0 2px 6px rgba(27,27,31,.06);
 --shadow-2:0 4px 10px rgba(27,27,31,.08), 0 10px 24px rgba(27,27,31,.08);
 --gutter:32px;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0}
body{
 background:var(--paper); color:var(--ink);
 font:400 17px/1.55 'Outfit',system-ui,-apple-system,'Segoe UI',Roboto,sans-serif;
 -webkit-font-smoothing:antialiased;
}
a{color:var(--send-600)}
a:hover{text-decoration:none;color:var(--send-hover)}
.wrap{max-width:1080px;margin:0 auto;padding:0 var(--gutter) 90px}

/* ---------- top bar ---------- */
.top{position:sticky;top:0;z-index:20;background:rgba(243,243,240,.95);
 backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.top-in{max-width:1080px;margin:0 auto;padding:12px var(--gutter);
 display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.home{text-decoration:none}
.brand{display:flex;align-items:center;gap:12px;white-space:nowrap}
.brand .brandmark{height:24px;width:auto;display:block}
.brand .brandmark-dark{display:none}   /* specificity must be higher than .brand .brandmark */
.brandline{font-size:12px;font-weight:500;letter-spacing:.13em;text-transform:uppercase;
 color:var(--muted);border-left:1px solid var(--line);padding-left:12px}
.topnav{margin-left:auto;display:flex;align-items:center;gap:14px}
.switch{font-size:15px;color:var(--muted);text-decoration:none;border:1px solid var(--line);
 background:var(--surface);border-radius:99px;padding:6px 14px;white-space:nowrap}
.switch:hover{border-color:var(--ink);color:var(--ink)}
.langs{display:flex;gap:2px}
.lang{font-size:13px;font-weight:500;color:var(--muted);text-decoration:none;
 padding:5px 9px;border-radius:var(--r-chip)}
.lang.on{background:var(--surface);color:var(--ink);border:1px solid var(--line)}
.iconbtn{width:34px;height:34px;border-radius:99px;cursor:pointer;border:1px solid var(--line);
 background:var(--surface);color:var(--muted);display:grid;place-items:center;padding:0;font-size:15px}
.iconbtn::before{content:'\263D'}
:root[data-theme='dark'] .iconbtn::before{content:'\2600'}
.iconbtn:hover{border-color:var(--ink);color:var(--ink)}

/* ---------- home page ---------- */
.home h1,.page h1{font-size:44px;line-height:1.1;font-weight:500;letter-spacing:-.02em;margin:48px 0 14px}
.lead{font-size:19px;color:var(--muted);max-width:60ch;margin:0 0 30px}
.searchbox{margin:0 0 10px}
#q{width:100%;max-width:640px;font:inherit;font-size:18px;padding:14px 18px;
 border:1px solid var(--line);border-radius:var(--r-btn);background:var(--surface);color:var(--ink)}
#q:focus{outline:3px solid var(--signal);outline-offset:2px;border-color:var(--signal)}
.hint{color:var(--pebble);font-size:14px;margin:8px 0 0}
.group{margin:44px 0 0}
.group h2{font-size:14px;font-weight:500;letter-spacing:.14em;text-transform:uppercase;
 color:var(--muted);margin:0 0 16px;display:flex;align-items:center;gap:10px}
.sec-ico{display:flex;flex:none;width:34px;height:34px;border-radius:10px;align-items:center;justify-content:center;
 background:var(--surface);border:1px solid var(--line);color:var(--ink)}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(310px,1fr));gap:16px}
/* the hidden attribute must win over display:grid above — otherwise the search results
   stay on the page after the search field is cleared */
[hidden]{display:none !important}
.card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-card);
 padding:20px 22px;text-decoration:none;color:inherit;box-shadow:var(--shadow-1);
 transition:box-shadow .18s,border-color .18s,transform .18s}
.card:hover{box-shadow:var(--shadow-2);border-color:var(--pebble);transform:translateY(-1px)}
.card h3{margin:0 0 6px;font-size:19px;font-weight:500;line-height:1.25}
.card p{margin:0;color:var(--muted);font-size:15px;line-height:1.5}
.card .where{display:block;margin:10px 0 0;font-size:12px;letter-spacing:.12em;
 text-transform:uppercase;color:var(--pebble)}

/* ---------- page ---------- */
.back{display:inline-block;margin:36px 0 0;color:var(--muted);text-decoration:none;font-size:15px}
.back:hover{color:var(--ink)}
.page h1{margin-top:18px}
.toc{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
 padding:16px 20px;margin:0 0 30px;max-width:60ch}
.toc-h{margin:0 0 8px;font-size:12px;font-weight:500;letter-spacing:.14em;
 text-transform:uppercase;color:var(--muted)}
.toc ul{margin:0;padding-left:18px}
.toc li{margin:3px 0}
/* text pages use the full width of the page, like the guides */
.page .lead{max-width:none}
.text h2{font-size:28px;font-weight:500;letter-spacing:-.01em;margin:44px 0 12px;scroll-margin-top:80px}
.text h3{font-size:21px;font-weight:500;margin:30px 0 8px;scroll-margin-top:80px}
.text h4{font-size:18px;font-weight:500;margin:22px 0 6px}
.text p{margin:0 0 14px}
.text ul,.text ol{margin:0 0 16px;padding-left:22px}
.text li{margin:5px 0}
.text code{font:500 .92em ui-monospace,'Cascadia Mono',Consolas,monospace;
 background:var(--line-soft);padding:2px 6px;border-radius:var(--r-chip)}
.text pre{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);
 padding:14px 18px;overflow:auto;margin:0 0 18px}
.text pre code{background:none;padding:0}
.text table{border-collapse:collapse;width:100%;margin:0 0 20px;font-size:16px;
 background:var(--surface);border:1px solid var(--line);border-radius:var(--r-panel);overflow:hidden}
.text th,.text td{text-align:left;padding:10px 14px;border-bottom:1px solid var(--line-soft);vertical-align:top}
.text th{font-weight:500;color:var(--muted);font-size:13px;letter-spacing:.06em;text-transform:uppercase}
.text tr:last-child td{border-bottom:0}
.text .note,.warn{border-radius:var(--r-panel);padding:14px 18px;margin:0 0 18px;font-size:16px}
.text .note{background:var(--surface);border:1px solid var(--line);color:var(--muted)}
.warn{background:var(--warn-bg);border:1px solid var(--warn-border);color:var(--warn-text)}
.plain{margin:40px 0 0;font-size:14px;color:var(--pebble)}
.plain a{color:var(--muted)}

/* ---------- footer ---------- */
.foot{border-top:1px solid var(--line);margin-top:60px}
.foot-in{max-width:1080px;margin:0 auto;padding:22px var(--gutter);display:flex;gap:18px;
 justify-content:space-between;color:var(--muted);font-size:15px;flex-wrap:wrap}
.foot p{margin:0}

/* ---------- dark theme ----------
   Values from the designer. Send stays as the fill #E0462B on dark too; the lighter
   #F08A74 is only for Send as text (links), #F6AB9A on hover.
   Status colours are temporary until phase 5 — keep them together. */
@media (prefers-color-scheme:dark){
 :root:not([data-theme='light']){color-scheme:dark;
  --paper:#141417; --surface:#1E1E22; --ink:#F2F2EF; --muted:#A7A7AD; --pebble:#6E6E75;
  --line:#303036; --line-soft:#26262B; --send:#E0462B; --send-600:#F08A74; --send-hover:#F6AB9A;
  --signal:#E0462B; --signal-soft:#2E1B16;
  --warn-bg:#2A2113; --warn-border:#4A3A1C; --warn-text:#E0A23C;
  --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 20px rgba(0,0,0,.45);
 }
 :root:not([data-theme='light']) .top{background:rgba(20,20,23,.95)}
 :root:not([data-theme='light']) .brand .brandmark-light{display:none}
 :root:not([data-theme='light']) .brand .brandmark-dark{display:block}
}
:root[data-theme='dark']{color-scheme:dark;
 --paper:#141417; --surface:#1E1E22; --ink:#F2F2EF; --muted:#A7A7AD; --pebble:#6E6E75;
 --line:#303036; --line-soft:#26262B; --send:#E0462B; --send-600:#F08A74; --send-hover:#F6AB9A;
 --signal:#E0462B; --signal-soft:#2E1B16;
 --warn-bg:#2A2113; --warn-border:#4A3A1C; --warn-text:#E0A23C;
 --shadow-1:0 1px 2px rgba(0,0,0,.4); --shadow-2:0 8px 20px rgba(0,0,0,.45);
}
:root[data-theme='dark'] .top{background:rgba(20,20,23,.95)}
:root[data-theme='dark'] .brand .brandmark-light{display:none}
:root[data-theme='dark'] .brand .brandmark-dark{display:block}

@media (max-width:760px){
 :root{--gutter:18px}
 /* on a narrow screen the section switch wraps below the logo so the bar does not overflow */
 .top-in{gap:10px}
 .topnav{gap:8px}
 .switch{font-size:13px;padding:5px 10px}
 .lang{font-size:12px;padding:4px 7px}
 .home h1,.page h1{font-size:32px;margin-top:30px}
 .lead{font-size:17px}
 .brandline{display:none}
 .switch{font-size:14px;padding:6px 10px}
 .cards{grid-template-columns:1fr}
}
@media print{
 .top,.foot,.searchbox,.toc,.back{display:none}
 body{background:#fff;font-size:11pt}
}