/* Wingward parent portal. Tokens from docs/BRAND.md ("Forest"); light only, no dark mode at launch. */

@font-face { font-family:"Fraunces"; src:url("/fonts/fraunces.woff2") format("woff2"); font-weight:300 500; font-style:normal; font-display:swap; }
@font-face { font-family:"Figtree"; src:url("/fonts/figtree.woff2") format("woff2"); font-weight:400 600; font-style:normal; font-display:swap; }

:root {
  --forest:#1D3830; --oat:#F4F0E8; --card:#FFFDF8; --sage:#E0E8DC; --rule:#DCD5C7;
  --muted:#4F625B; --clay:#A34B27; --field-line:#7E8B84; --error:#B42318;
  --serif:"Fraunces", Georgia, serif; --sans:"Figtree", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme:light;
}
*, *::before, *::after { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; }
body { margin:0; min-height:100vh; display:grid; place-items:center; padding:24px 16px; background:var(--oat); color:var(--forest); font-family:var(--sans); font-size:17px; line-height:1.5; -webkit-font-smoothing:antialiased; }
p { margin:0; }
a { color:var(--clay); text-underline-offset:3px; }
:focus-visible { outline:2px solid var(--clay); outline-offset:3px; border-radius:4px; }

.card { width:100%; max-width:440px; background:var(--card); border:1px solid var(--rule); border-radius:20px; padding:36px 28px; display:grid; gap:16px; }
.lockup { display:flex; align-items:center; gap:12px; margin-bottom:8px; }
.lockup img { display:block; width:46px; height:40px; }
.name { font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-weight:500; font-size:30px; line-height:1.1; }
.slogan { color:var(--muted); font-weight:500; font-size:15px; }
h1 { margin:0; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-weight:400; font-size:34px; line-height:1.1; }
h2 { margin:0 0 10px; font-family:var(--serif); font-variation-settings:"SOFT" 60, "WONK" 0; font-weight:400; font-size:22px; }
.muted { color:var(--muted); font-size:15px; }
.small { font-size:14px; }
section { display:grid; gap:8px; padding-top:8px; border-top:1px solid var(--rule); }

.form { display:grid; gap:14px; }
label { display:grid; gap:6px; font-weight:500; font-size:15px; }
input { font:17px var(--sans); color:var(--forest); padding:12px 14px; border:1px solid var(--field-line); border-radius:12px; background:var(--card); width:100%; }
input.code { font-size:24px; letter-spacing:.3em; text-align:center; }
.error { color:var(--error); font-size:15px; }
.error:empty, .notice:empty { display:none; }
.notice { background:var(--sage); border-radius:12px; padding:10px 14px; font-size:15px; }
.notice.error { background:#FBEAE8; }

.btn { display:inline-flex; align-items:center; justify-content:center; min-height:48px; padding:0 24px; border:0; border-radius:99px; background:var(--forest); color:#F7F3EA; font:500 16px/1.2 var(--sans); cursor:pointer; }
.btn:hover { background:#2C4A40; }
.btn:disabled { opacity:.6; cursor:default; }
.btn.ghost { background:transparent; color:var(--forest); border:1px solid var(--field-line); }
.btn.ghost:hover { background:var(--sage); }
button.link { background:none; border:0; padding:4px 0; font:500 15px var(--sans); color:var(--clay); cursor:pointer; text-decoration:underline; text-underline-offset:3px; }
button.link.danger { color:var(--error); }

.parents { list-style:none; margin:0; padding:0; display:grid; gap:12px; }
.parent { display:flex; justify-content:space-between; gap:12px; align-items:flex-start; }
.chips { display:flex; gap:6px; margin-top:6px; flex-wrap:wrap; }
.chip { display:inline-block; padding:2px 10px; border-radius:99px; background:var(--sage); font-size:13px; font-weight:500; }
.chip.outline { background:transparent; border:1px solid var(--field-line); color:var(--muted); }
.row-actions { display:grid; justify-items:end; gap:2px; }
details { margin-top:4px; }
summary { cursor:pointer; color:var(--clay); font-weight:500; padding:6px 0; }
details .form { margin-top:10px; }