/* Tech requests — Natura Líderes design system */
@font-face { font-family:"Whyte Inktrap"; src:url("/static/fonts/WhyteInktrap-Regular.ttf") format("truetype"); font-weight:400; font-display:swap; ascent-override:80%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"Whyte Inktrap"; src:url("/static/fonts/WhyteInktrap-Medium.ttf") format("truetype"); font-weight:500; font-display:swap; ascent-override:80%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"Whyte Inktrap"; src:url("/static/fonts/WhyteInktrap-Bold.ttf") format("truetype"); font-weight:700; font-display:swap; ascent-override:80%; descent-override:20%; line-gap-override:0%; }
@font-face { font-family:"PP Hatton"; src:url("/static/fonts/PPHatton-Medium.otf") format("opentype"); font-weight:500; font-display:swap; }
@font-face { font-family:"PP Hatton"; src:url("/static/fonts/PPHatton-Bold.otf") format("opentype"); font-weight:700; font-display:swap; }
@font-face { font-family:"JetBrains Mono"; src:url("/static/fonts/JetBrainsMono-Variable.ttf") format("truetype-variations"); font-weight:100 800; font-display:swap; }

:root {
  --natura-orange:#D5571A; --natura-orange-deep:#B8430C; --natura-orange-soft:#E97D3F;
  --cocoa:#5C2E15; --umber:#3D1F0E; --sand:#E8D6BC; --sand-light:#F2E5D0; --cream:#FAF5EC;
  --ink:#1F1611; --ink-2:#4A3A30; --ink-3:#7A6A5E; --line:#E5D9C5; --line-strong:#C9B89C;
  --ochre:#C68B3C; --danger:#B23B22; --paper:#FFFFFF;
  --shadow-2:0 2px 10px rgba(60,30,10,.08);
  --font-display:"PP Hatton", Georgia, serif;
  --font-sans:"Whyte Inktrap", ui-sans-serif, system-ui, sans-serif;
  --font-mono:"JetBrains Mono", ui-monospace, Menlo, monospace;
}
* { box-sizing:border-box; margin:0; padding:0; }
body { background:var(--cream); color:var(--ink); font-family:var(--font-sans); font-size:16px; line-height:1.55; -webkit-font-smoothing:antialiased; }

/* gate (login) */
.gate { min-height:100vh; display:flex; align-items:center; justify-content:center; padding:24px; }
.gate-card { background:var(--paper); border:1px solid var(--line); border-radius:20px; box-shadow:var(--shadow-2); padding:40px 36px; width:min(400px,100%); display:flex; flex-direction:column; gap:14px; }
.gate-card .logo { width:96px; margin-bottom:6px; }
.gate-card h1 { font-family:var(--font-display); font-weight:700; font-size:34px; letter-spacing:-.02em; }
.gate-card .hint { color:var(--ink-3); font-size:14px; }
.gate-card input { font-family:var(--font-sans); font-size:16px; line-height:1.2; height:48px; padding:0 18px; border:1px solid var(--line-strong); border-radius:999px; background:var(--cream); color:var(--ink); outline:none; }
.gate-card input::placeholder { color:var(--ink-3); opacity:1; }
.gate-card input:focus { border-color:var(--natura-orange); box-shadow:0 0 0 2px rgba(213,87,26,.18); }
.gate-card button { font-family:var(--font-sans); font-weight:700; font-size:15px; padding:12px 18px; border:0; border-radius:999px; background:var(--natura-orange); color:#fff; cursor:pointer; transition:background .15s; }
.gate-card button:hover { background:var(--natura-orange-soft); }
.gate-card button:active { transform:scale(.98); background:var(--natura-orange-deep); }
.error { color:var(--danger); font-size:13.5px; font-weight:500; }

/* home */
.wrap { max-width:900px; margin:0 auto; padding:44px 28px 64px; }
.top { display:flex; align-items:center; justify-content:space-between; margin-bottom:44px; }
.top .logo { width:104px; }
.logout { font-family:var(--font-sans); font-size:13px; font-weight:500; color:var(--ink-2); background:var(--paper); border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px; cursor:pointer; }
.logout:hover { background:var(--sand-light); }
.eyebrow { font-size:12px; font-weight:700; letter-spacing:.12em; color:var(--ink-3); margin-bottom:12px; }
h1 { font-family:var(--font-display); font-weight:700; font-size:clamp(36px,5.5vw,54px); line-height:1.06; letter-spacing:-.02em; max-width:18ch; }
h1 .o { color:var(--natura-orange); }
.sub { margin-top:16px; color:var(--ink-2); max-width:58ch; font-size:16.5px; }
.cards { margin-top:40px; display:flex; flex-direction:column; gap:14px; }
.card { background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:26px 28px; box-shadow:var(--shadow-2); }
.card-top { display:flex; align-items:center; gap:10px; margin-bottom:10px; }
.num { font-family:var(--font-display); font-weight:700; font-size:22px; color:var(--natura-orange); }
.tag { font-size:11px; font-weight:700; letter-spacing:.08em; color:var(--ink-3); border:1px solid var(--line-strong); border-radius:999px; padding:3px 10px; }
.status { margin-left:auto; font-size:11.5px; font-weight:700; background:var(--ochre); color:#fff; border-radius:999px; padding:4px 12px; }
.card h2 { font-size:19px; font-weight:700; letter-spacing:-.01em; }
.card p { margin-top:6px; color:var(--ink-2); font-size:14.5px; max-width:62ch; }
.endpoint { display:inline-block; margin-top:10px; font-family:var(--font-mono); font-size:12px; background:var(--sand-light); color:var(--cocoa); border:1px solid var(--line); border-radius:8px; padding:6px 12px; word-break:break-all; }
.links { margin-top:12px; display:flex; gap:8px; flex-wrap:wrap; }
.ext { font-family:var(--font-mono); font-size:12px; color:var(--cocoa); background:var(--sand-light); border:1px solid var(--line); border-radius:999px; padding:6px 14px; text-decoration:none; }
.ext:hover { border-color:var(--natura-orange); color:var(--natura-orange-deep); }
.cta { display:inline-block; margin-top:14px; font-weight:700; font-size:14px; background:var(--natura-orange); color:#fff; border-radius:999px; padding:10px 20px; text-decoration:none; }
.cta:hover { background:var(--natura-orange-soft); }
footer { margin-top:48px; padding-top:20px; border-top:1px solid var(--line); color:var(--ink-3); font-size:12.5px; letter-spacing:.06em; }

/* páginas internas (neptune, auth) */
.wrap.wide { max-width:980px; }
.back { font-size:13.5px; font-weight:500; color:var(--ink-2); text-decoration:none; border:1px solid var(--line-strong); border-radius:999px; padding:7px 16px; }
.back:hover { background:var(--sand-light); }
.sect { font-family:var(--font-display); font-weight:500; font-size:24px; margin-top:44px; letter-spacing:-.01em; }
.factgrid { display:grid; grid-template-columns:repeat(auto-fit,minmax(210px,1fr)); gap:12px; margin-top:20px; }
.fact { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 18px; display:flex; flex-direction:column; gap:4px; box-shadow:var(--shadow-2); }
.fact strong { font-size:14.5px; }
.fact span { font-size:12.5px; color:var(--ink-3); }
.note { margin-top:20px; font-size:14px; color:var(--ink-2); background:var(--sand-light); border:1px solid var(--line); border-radius:16px; padding:16px 20px; max-width:none; }
.note code { font-family:var(--font-mono); font-size:12px; color:var(--cocoa); }

/* code blocks */
.codeblock { margin-top:26px; border:1px solid var(--line); border-radius:20px; overflow:hidden; box-shadow:var(--shadow-2); background:#2B1A0E; }
.codehead { background:var(--umber); padding:12px 20px; border-bottom:1px solid rgba(250,245,236,.12); }
.codehead code { font-family:var(--font-mono); font-size:12.5px; color:rgba(250,245,236,.85); }
.chl { padding:18px 20px; overflow-x:auto; }
.chl pre { margin:0; font-family:var(--font-mono); font-size:12.8px; line-height:1.6; color:#F2E5D0; }
/* tema warm p/ tokens do pygments sobre marrom escuro */
.chl .c, .chl .c1, .chl .cm { color:#A98E76; font-style:italic; }   /* comentários */
.chl .k, .chl .kd, .chl .kr, .chl .nb { color:#E97D3F; }            /* keywords: resource, variable */
.chl .nc, .chl .nn, .chl .nf { color:#E5A85B; }                     /* nomes/classes */
.chl .s, .chl .s1, .chl .s2, .chl .sd { color:#A8B27A; }            /* strings */
.chl .si, .chl .se { color:#C9D4B5; }                               /* interpolação */
.chl .m, .chl .mi, .chl .mf { color:#E5A85B; }                      /* números */
.chl .o, .chl .p, .chl .pm { color:#D9C6AE; }                       /* operadores/pontuação */
.chl .na, .chl .nv, .chl .vc { color:#F4D9C2; }                     /* atributos/variáveis */
.chl .kc { color:#E97D3F; }                                         /* true/false */

/* auth: cards de pergunta */
.qcard h2 { font-size:16.5px; }
.qcard .why { font-size:13px; color:var(--ink-3); margin-top:6px; }
.status.open { background:var(--sand); color:var(--cocoa); border:1px solid var(--line-strong); }
.answer { margin-top:14px; border:1px dashed var(--line-strong); border-radius:12px; padding:14px 16px; font-size:13.5px; color:var(--ink-3); font-style:italic; background:var(--cream); }
.codehead { display:flex; align-items:center; justify-content:space-between; gap:12px; }
.copy { font-family:var(--font-sans); font-size:12px; font-weight:700; color:rgba(250,245,236,.9); background:transparent; border:1px solid rgba(250,245,236,.35); border-radius:999px; padding:5px 14px; cursor:pointer; transition:all .15s; }
.copy:hover { background:rgba(250,245,236,.12); }

/* comentários */
.comments { margin-top:52px; }
.comments .count { font-family:var(--font-sans); font-size:14px; font-weight:700; color:var(--natura-orange); vertical-align:middle; margin-left:6px; }
.comment-list { margin-top:18px; display:flex; flex-direction:column; gap:10px; }
.comment { background:var(--paper); border:1px solid var(--line); border-radius:16px; padding:16px 20px; box-shadow:var(--shadow-2); }
.comment-head { display:flex; align-items:baseline; gap:10px; }
.comment-head strong { font-size:14px; }
.comment .when { font-size:11.5px; color:var(--ink-3); }
.comment p { margin-top:6px; font-size:14px; color:var(--ink-2); white-space:pre-line; }
.empty { font-size:13.5px; color:var(--ink-3); font-style:italic; }
.comment-form { margin-top:18px; background:var(--paper); border:1px solid var(--line); border-radius:20px; padding:20px; display:flex; flex-direction:column; gap:12px; box-shadow:var(--shadow-2); }
.comment-form input[type="text"] { font-family:var(--font-sans); font-size:15px; line-height:1.2; height:44px; padding:0 16px; border:1px solid var(--line-strong); border-radius:999px; background:var(--cream); color:var(--ink); outline:none; max-width:320px; }
.comment-form textarea { font-family:var(--font-sans); font-size:15px; line-height:1.5; padding:12px 16px; border:1px solid var(--line-strong); border-radius:14px; background:var(--cream); color:var(--ink); outline:none; resize:vertical; }
.comment-form input:focus, .comment-form textarea:focus { border-color:var(--natura-orange); box-shadow:0 0 0 2px rgba(213,87,26,.18); }
.comment-form button { align-self:flex-start; font-family:var(--font-sans); font-weight:700; font-size:14px; padding:11px 24px; border:0; border-radius:999px; background:var(--natura-orange); color:#fff; cursor:pointer; }
.comment-form button:hover { background:var(--natura-orange-soft); }
.comments-link { display:inline-block; margin-top:14px; margin-left:10px; font-size:13px; font-weight:500; color:var(--natura-orange-deep); text-decoration:none; border-bottom:1px solid var(--natura-orange-tint); }
.comments-link:hover { border-color:var(--natura-orange-deep); }
.status.done { background:#357021; }
.done-row { margin-top:18px; }
.done-link { display:inline-block; font-size:13.5px; font-weight:500; color:var(--ink-2); background:var(--paper); border:1px solid var(--line-strong); border-radius:999px; padding:9px 20px; text-decoration:none; }
.done-link:hover { background:var(--sand-light); }
.status.validating { background:var(--honey); color:var(--ink); }
