/* Lawyers for Children.
   Brand is UNICEF cyan against NBA green - the two institutions behind the
   roster - with the conference yellow only as an accent rule.
   Light is the default; dark is a complete second theme, not an afterthought.
   Every colour is a token so both themes resolve from one place. */

:root{
  --paper:#fbfbf9;
  --surface:#ffffff;
  --surface-2:#f4f5f2;
  --ink:#16181a;
  --body:#3a3f45;
  --muted:#666c74;
  --faint:#8d949b;
  --line:#e0e2dd;
  --line-soft:#eef0ec;

  --green:#0A4A22;
  --green-mid:#146B32;
  --green-tint:#eaf1ea;
  --on-green:#ffffff;

  --cyan:#1CABE2;
  --cyan-deep:#0E7FB2;
  --cyan-tint:#e9f6fc;

  --yellow:#FCE300;

  --bad:#a3231f;
  --bad-tint:#fbeceb;
  --good:#1c7a44;

  --focus:var(--cyan-deep);
  --shadow:0 1px 2px rgba(16,24,20,.05), 0 8px 28px rgba(16,24,20,.07);

  --serif:"Newsreader",Georgia,"Times New Roman",serif;
  --sans:"Archivo Narrow","Arial Narrow",Arial,Helvetica,sans-serif;
  --wrap:1080px;
}

@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    --paper:#14171a;
    --surface:#1c2024;
    --surface-2:#23282d;
    --ink:#eef1f2;
    --body:#c3cace;
    --muted:#9aa3aa;
    --faint:#78828a;
    --line:#333a40;
    --line-soft:#282e33;

    --green:#3f9d63;
    --green-mid:#4fb173;
    --green-tint:#1b2f23;
    --on-green:#0b1410;

    --cyan:#4cc2f0;
    --cyan-deep:#7ad2f6;
    --cyan-tint:#132a35;

    --bad:#e6817a;
    --bad-tint:#3a1f1e;
    --good:#63c48d;

    --focus:var(--cyan);
    --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
  }
}

:root[data-theme="dark"]{
  --paper:#14171a;
  --surface:#1c2024;
  --surface-2:#23282d;
  --ink:#eef1f2;
  --body:#c3cace;
  --muted:#9aa3aa;
  --faint:#78828a;
  --line:#333a40;
  --line-soft:#282e33;

  --green:#3f9d63;
  --green-mid:#4fb173;
  --green-tint:#1b2f23;
  --on-green:#0b1410;

  --cyan:#4cc2f0;
  --cyan-deep:#7ad2f6;
  --cyan-tint:#132a35;

  --bad:#e6817a;
  --bad-tint:#3a1f1e;
  --good:#63c48d;

  --focus:var(--cyan);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 8px 28px rgba(0,0,0,.45);
}

*{ box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
body{
  margin:0; background:var(--paper); color:var(--body);
  font-family:var(--serif); font-size:17px; line-height:1.6;
}
.wrap{ max-width:var(--wrap); margin:0 auto; padding:0 22px; }

a{ color:var(--cyan-deep); text-underline-offset:2px; }
a:hover{ color:var(--green); }
:focus-visible{ outline:3px solid var(--focus); outline-offset:2px; border-radius:3px; }

.skip{
  position:absolute; left:-9999px; top:0; background:var(--green); color:var(--on-green);
  padding:10px 16px; z-index:50;
}
.skip:focus{ left:0; }

/* ------------------------------------------------------------- masthead */
.masthead{ background:var(--surface); border-bottom:1px solid var(--line);
           position:sticky; top:0; z-index:20; }
.masthead::before{ content:""; display:block; height:4px; background:var(--green); }
.masthead::before{ background:linear-gradient(to right, var(--yellow) 0 118px, var(--green) 118px); }
.masthead-in{ display:flex; align-items:center; justify-content:space-between;
              gap:18px; padding-top:12px; padding-bottom:12px; flex-wrap:wrap; }
.brand{ display:flex; align-items:center; gap:12px; text-decoration:none; color:inherit; }
.brand-mark{ width:34px; height:34px; border-radius:50%; flex:none;
             background:radial-gradient(circle at 32% 30%, var(--cyan), var(--green)); }
.brand-text b{ display:block; font-family:var(--sans); font-size:17px; font-weight:700;
               letter-spacing:.04em; text-transform:uppercase; color:var(--ink); line-height:1.15; }
.brand-text small{ display:block; font-family:var(--sans); font-size:11px; font-weight:500;
                   letter-spacing:.12em; text-transform:uppercase; color:var(--faint); }

.nav{ display:flex; align-items:center; gap:8px; font-family:var(--sans); }
.nav a{ padding:9px 13px; border-radius:6px; font-size:14px; font-weight:600;
        letter-spacing:.04em; text-transform:uppercase; text-decoration:none; color:var(--ink); }
.nav a:hover{ background:var(--surface-2); }
.nav a.cta{ background:var(--green); color:var(--on-green); }
.nav a.cta:hover{ background:var(--green-mid); }

.theme{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.1em;
        text-transform:uppercase; padding:9px 11px; border-radius:6px; cursor:pointer;
        border:1px solid var(--line); background:var(--surface-2); color:var(--muted); }
.theme:hover{ border-color:var(--green); color:var(--ink); }
.theme .theme-d{ display:none; }
:root[data-theme="dark"] .theme .theme-d{ display:inline; }
:root[data-theme="dark"] .theme .theme-l{ display:none; }
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]) .theme .theme-d{ display:inline; }
  :root:not([data-theme="light"]) .theme .theme-l{ display:none; }
}

/* ---------------------------------------------------------------- hero */
.hero{ background:var(--surface); border-bottom:1px solid var(--line); }
.hero-in{ padding:56px 22px 52px; max-width:var(--wrap); margin:0 auto; }
.eyebrow{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.2em;
          text-transform:uppercase; color:var(--green); margin:0 0 14px; }
h1{ font-family:var(--serif); font-weight:500; font-size:clamp(34px,5.4vw,52px);
    line-height:1.08; letter-spacing:-.02em; color:var(--ink); margin:0 0 16px; }
.standfirst{ font-size:clamp(18px,2.3vw,21px); line-height:1.5; color:var(--muted);
             max-width:60ch; margin:0 0 8px; font-weight:300; }
.yrule{ width:92px; height:4px; background:var(--yellow); margin:0 0 22px; }

.actions{ display:flex; gap:12px; flex-wrap:wrap; margin-top:26px; }
.btn{ font-family:var(--sans); font-size:15px; font-weight:700; letter-spacing:.06em;
      text-transform:uppercase; padding:14px 22px; border-radius:7px; border:1px solid transparent;
      text-decoration:none; cursor:pointer; display:inline-block; }
.btn-primary{ background:var(--green); color:var(--on-green); }
.btn-primary:hover{ background:var(--green-mid); color:var(--on-green); }
.btn-ghost{ background:transparent; color:var(--ink); border-color:var(--line); }
.btn-ghost:hover{ border-color:var(--green); background:var(--surface-2); color:var(--ink); }

/* --------------------------------------------------------------- cards */
section{ padding:44px 0; }
h2{ font-family:var(--serif); font-weight:500; font-size:clamp(24px,3vw,32px);
    line-height:1.15; color:var(--ink); margin:0 0 6px; letter-spacing:-.015em; }
h3{ font-family:var(--sans); font-size:13px; font-weight:700; letter-spacing:.14em;
    text-transform:uppercase; color:var(--green); margin:0 0 4px; }

.cards{ display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.card{ background:var(--surface); border:1px solid var(--line); border-radius:10px;
       padding:24px 22px; box-shadow:var(--shadow); }
.card p{ margin:8px 0 16px; color:var(--muted); }

/* ----------------------------------------------------------- resources */
.rgroup{ margin-bottom:34px; }
.rgroup > .blurb{ color:var(--muted); margin:2px 0 14px; font-size:16px; }
.rlist{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.rlist li{ border-bottom:1px solid var(--line); }
.rlist a{ display:flex; gap:14px; align-items:baseline; padding:14px 4px;
          text-decoration:none; color:inherit; }
.rlist a:hover{ background:var(--surface-2); }
.rlist .rtitle{ font-size:17.5px; color:var(--ink); font-weight:500; }
.rlist .rsub{ display:block; font-size:15px; color:var(--muted); font-weight:300; }
.rlist .rmeta{ margin-left:auto; display:flex; gap:8px; align-items:center; flex:none; }
.tag{ font-family:var(--sans); font-size:10.5px; font-weight:700; letter-spacing:.11em;
      text-transform:uppercase; padding:3px 8px; border-radius:4px;
      background:var(--cyan-tint); color:var(--cyan-deep); }
.tag.pdf{ background:var(--green-tint); color:var(--green); }
.count{ font-family:var(--sans); font-size:12px; letter-spacing:.12em; text-transform:uppercase;
        color:var(--faint); }

/* ---------------------------------------------------------------- form */
.formwrap{ max-width:820px; margin:0 auto; padding:34px 22px 70px; }
.fsec{ background:var(--surface); border:1px solid var(--line); border-radius:10px;
       padding:26px 24px; margin-bottom:20px; box-shadow:var(--shadow); }
.fsec > header{ display:flex; align-items:baseline; gap:12px; margin-bottom:6px; }
.fsec .letter{ font-family:var(--serif); font-size:30px; color:var(--green); line-height:1; }
.fsec h2{ font-size:23px; margin:0; }
.fsec > .rule{ height:3px; width:74px; background:var(--yellow); margin:12px 0 22px; }

.field{ margin-bottom:22px; }
.field > label, .field > .flabel{
  display:block; font-family:var(--sans); font-size:13px; font-weight:700;
  letter-spacing:.07em; text-transform:uppercase; color:var(--ink); margin-bottom:7px; }
.req{ color:var(--bad); margin-left:3px; }
.fhelp{ font-size:14.5px; color:var(--muted); margin:0 0 8px; line-height:1.45; }

.f-control{ width:100%; font-family:var(--serif); font-size:16.5px; color:var(--ink);
            background:var(--surface-2); border:1px solid var(--line); border-radius:7px;
            padding:11px 13px; }
.f-control::placeholder{ color:var(--faint); }
.f-control:focus{ border-color:var(--focus); background:var(--surface); }
.f-control:disabled{ background:var(--line-soft); color:var(--faint); }
select.f-control{ appearance:none;
  background-image:linear-gradient(45deg,transparent 50%,currentColor 50%),
                   linear-gradient(135deg,currentColor 50%,transparent 50%);
  background-position:calc(100% - 19px) 51%, calc(100% - 13px) 51%;
  background-size:6px 6px, 6px 6px; background-repeat:no-repeat; padding-right:40px; }
textarea.f-control{ resize:vertical; line-height:1.5; }

ul.opts{ list-style:none; margin:0; padding:0; display:grid; gap:7px; }
ul.opts.grid{ grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); }
ul.opts li{ margin:0; }
ul.opts label{ display:flex; gap:10px; align-items:flex-start; cursor:pointer;
               font-size:16px; line-height:1.4; color:var(--body);
               padding:9px 11px; border:1px solid var(--line); border-radius:7px;
               background:var(--surface-2); }
ul.opts label:hover{ border-color:var(--green); }
ul.opts input{ margin:3px 0 0; accent-color:var(--green); flex:none; width:17px; height:17px; }
ul.opts input:checked + span,
ul.opts label:has(input:checked){ color:var(--ink); }
ul.opts label:has(input:checked){ border-color:var(--green); background:var(--green-tint); }

.check{ display:flex; gap:11px; align-items:flex-start; padding:12px 13px;
        border:1px solid var(--line); border-radius:7px; background:var(--surface-2); }
.check input{ margin:3px 0 0; accent-color:var(--green); flex:none; width:17px; height:17px; }
.check label{ font-family:var(--serif); font-size:16px; font-weight:400; letter-spacing:0;
              text-transform:none; color:var(--body); margin:0; }
.check:has(input:checked){ border-color:var(--green); background:var(--green-tint); }

.errors{ list-style:none; margin:7px 0 0; padding:9px 12px; border-radius:6px;
         background:var(--bad-tint); border:1px solid var(--bad); }
.errors li{ font-size:15px; color:var(--bad); }
.field.has-error .f-control{ border-color:var(--bad); }

.summary{ background:var(--bad-tint); border:1px solid var(--bad); border-radius:9px;
          padding:16px 18px; margin-bottom:22px; }
.summary p{ margin:0 0 6px; color:var(--bad); font-weight:500; }
.summary ul{ margin:0; padding-left:20px; }
.summary a{ color:var(--bad); }

.declaration{ margin:0 0 20px; padding-left:22px; }
.declaration li{ margin-bottom:7px; color:var(--body); }

.hp{ position:absolute; left:-9999px; width:1px; height:1px; overflow:hidden; }

.privacy{ font-size:15px; color:var(--muted); background:var(--cyan-tint);
          border:1px solid var(--line); border-left:4px solid var(--cyan);
          border-radius:0 8px 8px 0; padding:15px 18px; margin:0 0 22px; }
.privacy b{ color:var(--ink); }

.submitbar{ display:flex; gap:16px; align-items:center; flex-wrap:wrap;
            padding-top:6px; }
.submitbar .note{ font-size:14.5px; color:var(--muted); }

/* --------------------------------------------------------------- thanks */
.thanks{ max-width:720px; margin:0 auto; padding:76px 22px 90px; text-align:center; }
.thanks .tick{ width:64px; height:64px; border-radius:50%; margin:0 auto 24px;
               background:var(--green-tint); border:2px solid var(--green);
               display:flex; align-items:center; justify-content:center;
               font-size:30px; color:var(--green); line-height:1; }
.thanks .yrule{ margin:0 auto 22px; }
.refbox{ display:inline-block; margin-top:26px; padding:14px 22px; border-radius:8px;
         background:var(--surface); border:1px solid var(--line); }
.refbox span{ display:block; font-family:var(--sans); font-size:11px; font-weight:700;
              letter-spacing:.16em; text-transform:uppercase; color:var(--faint); }
.refbox b{ font-family:var(--sans); font-size:26px; letter-spacing:.08em; color:var(--green); }

/* --------------------------------------------------------------- footer */
.foot{ background:var(--surface); border-top:1px solid var(--line); margin-top:40px; }
.foot-in{ padding:30px 22px 40px; }
.foot-line{ font-family:var(--sans); font-size:13px; letter-spacing:.1em;
            text-transform:uppercase; color:var(--muted); margin:0 0 8px; }
.foot-line b{ color:var(--green); }
.foot-meta{ font-size:14.5px; color:var(--faint); margin:0; max-width:70ch; }

@media (max-width:640px){
  body{ font-size:16px; }
  .masthead-in{ padding-top:10px; padding-bottom:10px; }
  .nav a{ padding:8px 10px; font-size:13px; }
  .hero-in{ padding:38px 22px 34px; }
  .fsec{ padding:20px 16px; }
  .rlist a{ flex-wrap:wrap; }
  .rlist .rmeta{ margin-left:0; }
}

@media print{
  .masthead,.foot,.nav,.theme,.skip,.actions{ display:none !important; }
  body{ background:#fff; color:#000; }
}

/* ------------------------------------------------------- stepped form */
.stepbar{ background:var(--surface); border-bottom:1px solid var(--line); }
.stepbar-in{ padding:22px 0 0; }
.stepcount{ font-family:var(--sans); font-size:12px; font-weight:700; letter-spacing:.18em;
            text-transform:uppercase; color:var(--green); margin:0 0 12px; }
.steps{ list-style:none; display:flex; gap:6px; margin:0 0 16px; padding:0;
        overflow-x:auto; scrollbar-width:none; }
.steps::-webkit-scrollbar{ display:none; }
.steps li{ display:flex; align-items:center; gap:8px; flex:none; padding:7px 13px 7px 8px;
           border-radius:20px; background:var(--surface-2); border:1px solid var(--line); }
.steps .dot{ width:23px; height:23px; border-radius:50%; flex:none;
             display:flex; align-items:center; justify-content:center;
             font-family:var(--sans); font-size:12px; font-weight:700;
             background:var(--line); color:var(--muted); }
.steps .lbl{ font-family:var(--sans); font-size:12.5px; font-weight:600; letter-spacing:.04em;
             text-transform:uppercase; color:var(--muted); white-space:nowrap; }
.steps li.done{ border-color:var(--green); }
.steps li.done .dot{ background:var(--green); color:var(--on-green); }
.steps li.done .lbl{ color:var(--green); }
.steps li.now{ background:var(--green); border-color:var(--green); }
.steps li.now .dot{ background:var(--on-green); color:var(--green); }
.steps li.now .lbl{ color:var(--on-green); }

.track{ height:4px; background:var(--line-soft); border-radius:2px; overflow:hidden; }
.track i{ display:block; height:100%; background:var(--green);
          transition:width .35s ease; }

.stephead{ margin-bottom:24px; }
.stephead h1{ font-size:clamp(28px,4vw,40px); margin-bottom:8px; }
.stephead .standfirst{ margin:0; font-size:18px; }

.restart{ text-align:center; margin-top:26px; font-size:14.5px; }
.restart a{ color:var(--muted); }

.submitbar .btn{ min-width:150px; text-align:center; }

@media (max-width:720px){
  .steps li .lbl{ display:none; }
  .steps li.now .lbl{ display:inline; }
  .submitbar{ position:sticky; bottom:0; background:var(--paper);
              padding:14px 0; border-top:1px solid var(--line); }
  .submitbar .note{ width:100%; order:3; }
}

/* conditional fields: hidden only once JS confirms they do not apply */
.field[hidden]{ display:none; }
/* short option sets read better as a row of chips than a tall stack */
ul.opts.grid{ grid-template-columns:repeat(auto-fit,minmax(215px,1fr)); }
ul.opts label{ min-height:44px; align-items:center; }

/* ------------------------------------------------------------- agenda */
.agenda{ list-style:none; margin:0; padding:0; border-top:1px solid var(--line); }
.agenda li{ display:grid; grid-template-columns:118px 1fr; gap:22px;
            padding:18px 4px; border-bottom:1px solid var(--line); }
.agenda .when{ font-family:var(--sans); }
.agenda .when b{ display:block; font-size:16px; font-weight:700; color:var(--green);
                 letter-spacing:.02em; }
.agenda .when span{ display:block; font-size:14px; color:var(--faint); }
.agenda .when i{ display:block; font-style:normal; font-size:11px; font-weight:600;
                 letter-spacing:.12em; text-transform:uppercase; color:var(--muted);
                 margin-top:5px; }
.agenda .seg{ font-family:var(--serif); font-size:20px; font-weight:600; color:var(--ink);
              letter-spacing:0; text-transform:none; margin:0 0 3px; line-height:1.25; }
.agenda .sub{ font-size:16px; font-style:italic; color:var(--muted); margin:0 0 6px;
              font-weight:300; }
.agenda .lead{ font-size:16px; color:var(--body); margin:6px 0 0; }
.agenda .lead span{ display:block; font-family:var(--sans); font-size:11.5px; font-weight:600;
                    letter-spacing:.08em; text-transform:uppercase; color:var(--muted);
                    margin-top:2px; }
@media (max-width:640px){
  .agenda li{ grid-template-columns:1fr; gap:6px; }
  .agenda .when{ display:flex; gap:10px; align-items:baseline; }
  .agenda .when i{ margin-top:0; }
}