/* Shared shell for the hosted pages. Tokens match custody-calendar.html so the
   login screen and the dashboard feel like the same app. Dark only. */
:root{
  --bg:#0e1418;
  --s1:#161e24;
  --s2:#1d272e;
  --s3:#26323a;
  --line:#2a363e;
  --line-2:#374751;
  --text:#e8eef2;
  --dim:#93a3ae;
  --faint:#768793;

  --dan:#45bdd8;
  --dan-dim:#2b8ba3;
  --dan-bg:rgba(69,189,216,.11);
  --dan-edge:rgba(69,189,216,.32);

  --stav:#c47ae4;
  --stav-bg:rgba(196,122,228,.11);

  --gold:#d9a441;
  --gold-bg:rgba(217,164,65,.13);

  --good:#5fbf8f;
  --good-bg:rgba(95,191,143,.13);
  --bad:#e07a7a;
  --bad-bg:rgba(224,122,122,.13);

  --r:12px;
  --mono:ui-monospace,"SF Mono","Roboto Mono","DejaVu Sans Mono",Menlo,monospace;
  --sans:system-ui,-apple-system,"Segoe UI",Roboto,"Helvetica Neue",sans-serif;
  --safe:env(safe-area-inset-bottom,0px);
  --tap:44px;
}

*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html{background:var(--bg);-webkit-text-size-adjust:100%}
body{
  margin:0;background:var(--bg);color:var(--text);
  font-family:var(--sans);font-size:15px;line-height:1.5;
  padding-bottom:calc(1.5rem + var(--safe));
  overscroll-behavior-y:none;
}
h1,h2,h3{margin:0;font-weight:650;letter-spacing:-.015em}
p{margin:0}
button,input,select,textarea{font:inherit;color:inherit}
button{cursor:pointer;background:none;border:0}
a{color:var(--dan)}
:focus-visible{outline:2px solid var(--dan);outline-offset:2px;border-radius:6px}
[hidden]{display:none!important}
.num{font-family:var(--mono);font-variant-numeric:tabular-nums}
.dim{color:var(--dim)}
.faint{color:var(--faint);font-size:13px}

.wrap{max-width:52rem;margin:0 auto;width:100%;padding:0 1rem}

header.top{
  padding:1.25rem 0 1rem;border-bottom:1px solid var(--line);
  margin-bottom:1.25rem;display:flex;gap:1rem;align-items:baseline;
  flex-wrap:wrap;
}
header.top h1{font-size:1.25rem;flex:1}

.card{
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r);
  padding:1rem;margin-bottom:1rem;
}
.card h2{font-size:1rem;margin-bottom:.5rem}

.tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:.6rem;margin-bottom:1rem}
.tile{
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r);
  padding:.8rem;text-align:left;
}
.tile .n{font-family:var(--mono);font-size:1.6rem;font-weight:650;display:block;line-height:1.2}
.tile .k{color:var(--dim);font-size:12px;text-transform:uppercase;letter-spacing:.05em}
.tile.requested .n{color:var(--gold)}
.tile.approved  .n{color:var(--good)}
.tile.rejected  .n{color:var(--bad)}

.btn{
  display:inline-flex;align-items:center;justify-content:center;gap:.5rem;
  min-height:var(--tap);padding:0 1.1rem;border-radius:var(--r);
  background:var(--s3);border:1px solid var(--line-2);font-weight:600;
}
.btn:hover{background:var(--s2)}
.btn.primary{background:var(--dan-bg);border-color:var(--dan-edge);color:var(--dan)}
.btn.good{background:var(--good-bg);border-color:var(--good);color:var(--good)}
.btn.bad{background:var(--bad-bg);border-color:var(--bad);color:var(--bad)}
.btn:disabled{opacity:.45;cursor:not-allowed}
.btn.small{min-height:36px;padding:0 .8rem;font-size:13px}

label{display:block;margin-bottom:.75rem}
label .lab{display:block;font-size:13px;color:var(--dim);margin-bottom:.3rem}
input,select,textarea{
  width:100%;min-height:var(--tap);padding:.55rem .7rem;
  background:var(--s2);border:1px solid var(--line-2);border-radius:10px;
}
textarea{min-height:5rem;resize:vertical}
input:invalid,textarea:invalid{border-color:var(--bad)}
.row{display:flex;gap:.6rem;flex-wrap:wrap}
.row > *{flex:1;min-width:9rem}

.req{border-top:1px solid var(--line);padding:.85rem 0}
.req:first-of-type{border-top:0}
.req .head{display:flex;gap:.6rem;align-items:baseline;flex-wrap:wrap}
.req .head strong{flex:1;min-width:12rem}
.req .actions{display:flex;gap:.5rem;margin-top:.6rem;flex-wrap:wrap}

.pill{
  font-size:12px;font-weight:650;padding:.15rem .5rem;border-radius:99px;
  text-transform:uppercase;letter-spacing:.04em;white-space:nowrap;
}
.pill.requested{background:var(--gold-bg);color:var(--gold)}
.pill.approved {background:var(--good-bg);color:var(--good)}
.pill.rejected {background:var(--bad-bg);color:var(--bad)}

.reason{
  margin-top:.6rem;padding:.6rem .7rem;border-radius:10px;
  background:var(--bad-bg);border:1px solid rgba(224,122,122,.3);font-size:14px;
}

.note{
  padding:.75rem .85rem;border-radius:10px;background:var(--s2);
  border:1px solid var(--line);color:var(--dim);font-size:14px;
}

.toast{
  position:fixed;left:50%;transform:translateX(-50%);
  bottom:calc(1rem + var(--safe));z-index:50;
  background:var(--s3);border:1px solid var(--line-2);border-radius:var(--r);
  padding:.7rem 1rem;max-width:calc(100% - 2rem);box-shadow:0 8px 24px rgba(0,0,0,.5);
}

@media (max-width:560px){
  .tiles{grid-template-columns:repeat(2,1fr)}
}

/* ==========================================================================
   Landing, login and access-denied shell.
   Everything below is built from the tokens above, so the marketing page, the
   sign-in card and the dashboard read as one app. No web fonts, and the only
   image is the brand logo served from this origin — the CSP is
   default-src 'self', so nothing may be fetched from anywhere else.
   ========================================================================== */

.wrap.wide{max-width:60rem}

/* Ambient backdrop: two coloured washes, one per parent, over a faint grid
   that fades out before it reaches the fold. Painted with gradients rather
   than blurred elements so it stays cheap on a phone. */
.aurora{
  position:fixed;inset:0;z-index:-1;pointer-events:none;
  background:
    radial-gradient(60rem 38rem at 10% -12%, rgba(69,189,216,.16), transparent 60%),
    radial-gradient(50rem 34rem at 94% 2%,  rgba(196,122,228,.13), transparent 62%),
    radial-gradient(46rem 30rem at 50% 112%,rgba(217,164,65,.07),  transparent 60%);
}
.aurora::after{
  content:"";position:absolute;inset:0;opacity:.3;
  background-image:
    linear-gradient(var(--line) 1px,transparent 1px),
    linear-gradient(90deg,var(--line) 1px,transparent 1px);
  background-size:64px 64px;
  -webkit-mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
          mask-image:radial-gradient(70% 55% at 50% 0%,#000,transparent 78%);
}

/* ----------------------------------------------------------------- brand */

.brand{
  display:inline-flex;align-items:center;gap:.6rem;
  text-decoration:none;color:var(--text);font-weight:700;letter-spacing:-.02em;
}
/* logo.png is drawn in dark ink for light paper and this site is dark only.
   invert() flips the lightness and hue-rotate(180deg) puts the hues back, so
   the wordmark reads near --text and its teal lands on --dan — no second
   copy of the artwork to keep in step with the first. */
.brand .wordmark{
  height:30px;width:auto;flex:none;display:block;
  filter:invert(1) hue-rotate(180deg);
}
.brand.big .wordmark{height:44px}

/* The brand takes the place the page heading used to hold in the header row. */
header.top{align-items:center}
header.top .brand{flex:1}

.eyebrow{
  display:inline-flex;align-items:center;gap:.45rem;
  font-size:12px;font-weight:650;letter-spacing:.08em;text-transform:uppercase;
  color:var(--dim);background:var(--s1);border:1px solid var(--line);
  padding:.32rem .7rem;border-radius:99px;
}
.eyebrow .dot{
  width:6px;height:6px;border-radius:50%;background:var(--good);
  box-shadow:0 0 0 3px var(--good-bg);
}

/* ------------------------------------------------------------------ hero */

.site{display:flex;flex-direction:column;min-height:100vh;min-height:100svh}
.site > .wrap{flex:1}

.hero{padding:clamp(2rem,9vh,5rem) 0 0;max-width:40rem}
.hero h1{
  font-size:clamp(2.1rem,7.5vw,3.5rem);line-height:1.04;
  letter-spacing:-.035em;margin:1.1rem 0 0;
}
.hero h1 .grad{
  background:linear-gradient(100deg,var(--dan),var(--stav));
  -webkit-background-clip:text;background-clip:text;color:transparent;
}
.lede{color:var(--dim);font-size:clamp(1rem,2.6vw,1.15rem);margin-top:1rem;max-width:34rem}
.cta{display:flex;gap:.7rem;flex-wrap:wrap;margin-top:1.7rem}

.btn{text-decoration:none}
.btn.solid{
  background:linear-gradient(135deg,var(--dan),var(--dan-dim));
  border-color:transparent;color:#06181e;
  box-shadow:0 10px 26px -12px rgba(69,189,216,.7);
}
.btn.solid:hover{background:linear-gradient(135deg,var(--dan),var(--dan-dim));filter:brightness(1.08)}
.btn.ghost{background:transparent;border-color:var(--line-2);color:var(--text)}
.btn.ghost:hover{background:var(--s1)}
/* Google's own guidance is a light surface with the full-colour mark. */
.btn.google{background:#fff;border-color:#fff;color:#1f1f1f}
.btn.google:hover{background:#eef1f3}

/* ------------------------------------------------- two-week rotation strip */

.strip{
  margin-top:clamp(2rem,6vh,3rem);
  background:var(--s1);border:1px solid var(--line);border-radius:16px;
  padding:1rem;box-shadow:0 30px 60px -40px #000;
}
.strip .cap{display:flex;gap:.75rem;align-items:center;margin-bottom:.85rem;flex-wrap:wrap}
.strip .cap h3{font-size:.9rem;flex:1}
.strip .dow,.strip .days{display:grid;grid-template-columns:repeat(7,1fr);gap:.35rem}
.strip .dow span{
  text-align:center;font-size:11px;letter-spacing:.06em;
  color:var(--faint);text-transform:uppercase;padding-bottom:.3rem;
}
.strip .d{
  height:clamp(38px,6vw,54px);border-radius:9px;display:grid;place-items:center;
  border:1px solid transparent;font-family:var(--mono);
  font-size:12px;font-weight:650;
}
.strip .d.dan{background:var(--dan-bg);border-color:var(--dan-edge);color:var(--dan)}
.strip .d.stav{background:var(--stav-bg);border-color:rgba(196,122,228,.32);color:var(--stav)}
.strip .d.mark-hol{box-shadow:inset 0 0 0 1px var(--gold)}
.legend{display:flex;gap:1.1rem;margin-top:.85rem;flex-wrap:wrap;font-size:12px;color:var(--faint)}
.legend i{width:9px;height:9px;border-radius:3px;display:inline-block;margin-right:.4rem}

/* --------------------------------------------------------------- features */

.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:.8rem;margin-top:clamp(2rem,6vh,3rem)}
.feat{
  background:var(--s1);border:1px solid var(--line);border-radius:var(--r);
  padding:1.1rem;position:relative;overflow:hidden;
}
.feat::before{
  content:"";position:absolute;inset:0 0 auto;height:1px;
  background:linear-gradient(90deg,transparent,var(--dan-edge),transparent);
}
.feat .ico{
  width:34px;height:34px;border-radius:10px;display:grid;place-items:center;
  background:var(--s2);border:1px solid var(--line);color:var(--dan);margin-bottom:.75rem;
}
.feat h3{font-size:.95rem;margin-bottom:.35rem}
.feat p{color:var(--dim);font-size:14px}

.foot{
  border-top:1px solid var(--line);margin-top:clamp(2.5rem,8vh,4rem);
  padding:1.25rem 0;color:var(--faint);font-size:13px;
  display:flex;gap:1rem;justify-content:space-between;flex-wrap:wrap;
}

/* ------------------------------------------------------- login / denied */

.auth-shell{
  min-height:100vh;min-height:100svh;display:grid;place-items:center;
  padding:2rem 1rem calc(2rem + var(--safe));
}
.auth{width:100%;max-width:25rem;text-align:center}
.auth .brand{justify-content:center;margin-bottom:1.4rem}
.auth .panel{
  background:var(--s1);border:1px solid var(--line);border-radius:18px;
  padding:1.7rem 1.4rem;box-shadow:0 40px 70px -45px #000;
}
.auth h1{font-size:1.4rem;letter-spacing:-.025em}
.auth .sub{color:var(--dim);font-size:14px;margin-top:.5rem}
.auth .btn{width:100%;margin-top:1.35rem}
.auth .fine{color:var(--faint);font-size:12.5px;margin-top:1.1rem}
.auth.bad .panel{border-color:rgba(224,122,122,.28)}

.crest{
  width:54px;height:54px;border-radius:16px;margin:0 auto 1rem;
  display:grid;place-items:center;
  background:var(--dan-bg);border:1px solid var(--dan-edge);color:var(--dan);
}
.crest.warn{background:var(--bad-bg);border-color:rgba(224,122,122,.35);color:var(--bad)}

.who{
  font-family:var(--mono);font-size:13px;word-break:break-all;
  background:var(--s2);border:1px solid var(--line);border-radius:10px;
  padding:.55rem .7rem;margin-top:.9rem;
}
.hr{display:flex;align-items:center;gap:.75rem;color:var(--faint);font-size:12px;margin:1.3rem 0 .1rem}
.hr::before,.hr::after{content:"";height:1px;background:var(--line);flex:1}

.rise{animation:rise .55s cubic-bezier(.2,.7,.3,1) both}
@keyframes rise{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}

@media (max-width:640px){
  .grid3{grid-template-columns:1fr}
  .foot{flex-direction:column;gap:.4rem}
}
@media (prefers-reduced-motion:reduce){
  .rise{animation:none}
}

/* ------------------------------------------------------------------ legal */

.legal{padding:clamp(1.75rem,7vh,3.5rem) 0 0;max-width:44rem}
.legal h1{font-size:clamp(1.5rem,5vw,2rem);letter-spacing:-.025em}
.legal .updated{color:var(--faint);font-size:13px;margin-top:.5rem}
.legal .lede{margin-top:1rem}
.legal section{margin-top:2rem}
.legal h2{
  font-size:1rem;padding-bottom:.5rem;margin-bottom:.7rem;
  border-bottom:1px solid var(--line);
}
.legal h3{font-size:.9rem;color:var(--text);margin-top:1.2rem;margin-bottom:.3rem}
.legal p{color:var(--dim);font-size:14.5px;line-height:1.65;margin-top:.7rem}
.legal p:first-of-type{margin-top:0}
.legal ul{color:var(--dim);font-size:14.5px;line-height:1.65;margin:.7rem 0 0;padding-left:1.1rem}
.legal li{margin-top:.45rem}
.legal li strong{color:var(--text);font-weight:600}
.legal .card p{font-size:14px}

/* ------------------------------------------------------------------ signup

   The one form on this site that runs before anybody has an account, so it is
   built from the same tokens as the login card rather than from the dashboard's
   sheets. Three questions, one on screen at a time, with the bar across the top
   as the only thing that says how much is left.
   ========================================================================== */

.signup{max-width:34rem;margin:0 auto;width:100%}

/* Sticky, because on a phone the last step is taller than the viewport and a
   progress bar that has scrolled away is not a progress bar. */
.steps{
  position:sticky;top:0;z-index:5;
  background:var(--bg);padding:.9rem 0 1rem;
}
.steps .bar{
  height:6px;border-radius:99px;background:var(--s2);
  border:1px solid var(--line);overflow:hidden;
}
.steps .fill{
  height:100%;width:0;border-radius:99px;
  background:linear-gradient(90deg,var(--dan),var(--stav));
  transition:width .35s cubic-bezier(.2,.7,.3,1);
}
.steps .marks{
  display:flex;gap:.35rem;margin-top:.55rem;
  font-size:11px;letter-spacing:.05em;text-transform:uppercase;color:var(--faint);
}
.steps .marks span{flex:1;text-align:center}
.steps .marks .done{color:var(--dim)}
.steps .marks .now{color:var(--dan);font-weight:650}

.step h2{font-size:1.15rem;letter-spacing:-.02em}
.step .why{color:var(--dim);font-size:14px;margin:.4rem 0 1.2rem}
.step label:last-of-type{margin-bottom:0}

.nav{display:flex;gap:.6rem;margin-top:1.3rem}
.nav .btn{flex:1}

/* Only English is read off an agreement, and a parent who learns that after
   uploading has uploaded the wrong file. Loud enough to be read before the
   picker under it, which is what it is standing in front of. */
.heads-up{
  margin:0 0 1.2rem;padding:.85rem .9rem;border-radius:var(--r);
  background:var(--gold-bg);border:1px solid rgba(217,164,65,.35);
  color:var(--text);font-size:14.5px;line-height:1.45;
}
.heads-up .big{
  display:block;color:var(--gold);font-weight:700;font-size:1.02rem;
  letter-spacing:-.01em;margin-bottom:.2rem;
}

/* The file input itself is kept off screen — every browser draws it
   differently and none of them draw it like this site. */
.pick{
  display:block;border:1px dashed var(--line-2);border-radius:var(--r);
  padding:1.4rem 1rem;text-align:center;cursor:pointer;background:var(--s2);
}
.pick:hover{border-color:var(--dan-edge);background:var(--s3)}
.pick input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.pick .big{display:block;font-weight:650;margin-bottom:.25rem}
.pick .sub{color:var(--faint);font-size:12.5px}
.picked{
  margin-top:.75rem;display:flex;gap:.6rem;align-items:center;
  background:var(--good-bg);border:1px solid rgba(95,191,143,.3);
  border-radius:10px;padding:.6rem .7rem;font-size:14px;
}
.picked .name{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.picked .size{color:var(--faint);font-size:12.5px;font-family:var(--mono)}

/* Last look at the two parents before their accounts are actually created. */
.recap{
  background:var(--s2);border:1px solid var(--line);border-radius:var(--r);
  padding:.8rem .85rem;margin-bottom:1.2rem;font-size:14px;
}
.recap .line{display:flex;gap:.75rem;padding:.28rem 0}
.recap .line .k{color:var(--faint);width:7.5rem;flex:none;font-size:12.5px}
.recap .line .v{flex:1;min-width:0;word-break:break-word}

@media (prefers-reduced-motion:reduce){
  .steps .fill{transition:none}
}