/* RUDO Weather Challenge · family hub (/play/) · student desk.
   Tokens only (rudo.css), so light and explicit dark both work. No OS-dark queries. */

.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);border:0}
.wrap .btn-sm{min-height:44px}
.ferr{display:block;margin:0;color:var(--err-ink);font-weight:600;font-size:.9375rem}
.ferr:empty{display:none}
.msg.warn{color:var(--warn-ink);background:var(--warn-tint);font-weight:600;padding:8px 12px;border-radius:8px}
.msg:empty{padding:0;background:none}
#boot{margin:24px 0}

/* ---------- signed out ---------- */
.so-choose{display:flex;flex-wrap:wrap;gap:10px;margin:0 0 20px}
.so-choose .btn{flex:1 1 220px}
@media(min-width:900px){.so-choose{display:none}}
.so-grid{display:grid;gap:20px;align-items:start}
@media(min-width:900px){.so-grid{grid-template-columns:minmax(0,1.15fr) minmax(0,1fr);gap:28px}}
.so-new h2,.so-back h2{margin-top:0}
.keywarn{border-left:4px solid var(--warn-ink);background:var(--warn-tint);color:var(--ink);padding:12px 16px;border-radius:var(--radius-sm);font-size:.9375rem;margin:0 0 18px}
.seg{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin:0 0 18px;padding:4px;border:1px solid var(--line);border-radius:12px;background:var(--page)}
.seg .btn{border-color:transparent;background:transparent;font-weight:600}
.seg .btn[aria-pressed="true"]{background:var(--surface);border-color:var(--primary);color:var(--primary)}
.so-back form h3{font-size:1rem;margin-top:0}
.lostkey{margin-top:18px;border-top:1px solid var(--line);padding-top:12px}
.lostkey summary{cursor:pointer;font-weight:600;min-height:32px;display:flex;align-items:center}
#key-reveal{max-width:720px}
.keyactions{margin:14px 0}

/* ---------- hub chrome ---------- */
/* Signed in, the page's job is the task: the marketing lead goes, the title shrinks. */
body.signed-in main{padding-top:14px}
/* The heading stays for assistive tech; the tabs carry the page visually. */
body.signed-in main>h1{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0,0,0,0);border:0}
body.signed-in main>.lead{display:none}
.deskbar .tabs{margin:0}
.deskbar{display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center;margin:0 0 10px}
.deskbar .tabs{flex-basis:100%}
@media(min-width:760px){.deskbar .tabs{flex-basis:auto}}
.deskbar #logout{margin-left:auto}
.deskbar-who{margin:0;color:var(--muted);font-size:.875rem;flex:1 1 0;min-width:0}
@media(min-width:760px){.deskbar-who{flex:0 1 auto}}
.who{margin:0 0 14px}
.who-pick{max-width:420px}

/* ---------- five states: shape + label + border style, never colour alone ---------- */
.st{display:inline-flex;align-items:center;gap:6px;font:600 14px/1.3 var(--font-body);padding:.25em .7em .25em .55em;border-radius:999px;border:2px solid var(--control);background:var(--surface);color:var(--ink);vertical-align:middle}
.st svg{flex:0 0 auto}
.st-ontime{border-style:solid;border-color:var(--primary);background:var(--primary-tint)}
.st-ontime svg{color:var(--primary)}
.st-late{border-style:dashed;border-color:var(--warn-ink);background:var(--warn-tint)}
.st-late svg{color:var(--warn-ink)}
.st-pending{border-style:dotted;border-color:var(--control);background:var(--page)}
.st-provisional{border-style:solid;border-color:var(--info);background:var(--surface)}
.st-provisional svg{color:var(--info)}
.st-final{border-style:double;border-width:4px;border-color:var(--ink);background:var(--surface);padding-top:.15em;padding-bottom:.15em}
.st-void{border-style:solid;border-color:var(--err-ink);background:var(--err-tint)}
.st-void svg{color:var(--err-ink)}
.legend{list-style:none;margin:12px 0 0;padding:0;display:grid;gap:12px}
.legend li{display:grid;gap:6px;align-items:start}
.legend .lg-b{display:flex;flex-wrap:wrap;gap:6px}
@media(min-width:760px){.legend li{grid-template-columns:230px minmax(0,1fr);gap:16px}}
.legend-d>summary,.fam-area>summary,.audit>summary,.fconv>summary{cursor:pointer;font-weight:600;min-height:32px}
.stnote{margin:8px 0 12px}

/* ---------- layer 1: the task ---------- */
.desk{display:grid;gap:20px;align-items:start}
@media(min-width:1000px){.desk{grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);gap:28px}}
.task{padding:16px}
@media(min-width:760px){.task{padding:20px 24px}}
.task .eyebrow,.layer2 .eyebrow,.layer3 .eyebrow{margin-bottom:0}
.task-head{display:flex;flex-wrap:wrap;gap:0 12px;align-items:baseline;justify-content:space-between;margin:0 0 8px}
.task-title{font:400 1.125rem/1.25 var(--font-display);margin:0}
.rounds{border:0;padding:0;margin:0 0 12px}
.rounds legend{padding:0;margin-bottom:8px}
.roundopt{display:flex;gap:10px;align-items:flex-start;padding:8px 12px;margin:0 0 6px;min-height:44px;border:1px solid var(--line);border-radius:var(--radius-sm);background:var(--page);cursor:pointer}
.roundopt.single{cursor:default}
.roundopt.single input{position:absolute;opacity:0;width:1px;height:1px;pointer-events:none}
.roundopt:has(input:checked){border-color:var(--primary);background:var(--primary-tint)}
.roundopt:has(input:focus-visible){outline:3px solid var(--focus);outline-offset:2px}
.roundopt>input{margin-top:5px;flex:0 0 auto}
.ro-body{display:flex;flex-wrap:wrap;gap:2px 14px;align-items:center;flex:1;min-width:0}
.ro-head{display:contents}
.ro-pills{display:inline-flex;flex-wrap:wrap;gap:6px;order:3;margin-left:auto}
.ro-pills .st{font-size:13px}
.ro-lab{font:600 13px/1.4 var(--font-body);color:var(--muted)}
.ro-head>.ro-lab{margin-right:-6px}
.ro-day{font-size:1.125rem;line-height:1.25;color:var(--ink);font-variant-numeric:tabular-nums}
.roundopt:has(input:checked) .ro-day{font-size:1.375rem}
.ro-cut{display:flex;flex-wrap:wrap;gap:2px 8px;align-items:baseline;flex-basis:100%;order:4;font-size:.9375rem}
/* Only the chosen round carries its detail, so input and submit stay on the first screen. */
.ro-detail{display:flex;flex-wrap:wrap;gap:0 14px;order:5;flex-basis:100%}
.ro-detail .ro-var,.ro-detail .ro-late{flex-basis:100%}
.roundopt:not(:has(input:checked)) .ro-detail,.roundopt:not(:has(input:checked)) .ro-utc{display:none}
@media(max-width:619px){.ro-id{display:none}}
.ro-var{font-size:.9375rem}
.ro-late{color:var(--warn-ink);background:var(--warn-tint);padding:8px 12px;border-radius:8px;font-weight:600}
.ro-id{font-size:12.5px}
.rstate{border:1px dashed var(--control);border-radius:var(--radius-sm);padding:16px;margin:0 0 18px;background:var(--page)}
.rstate p{margin:0 0 8px}

.temp{margin:0 0 12px}
.temp-label{font:600 1rem/1.4 var(--font-body)}
.temp-row{display:flex;align-items:center;gap:10px;max-width:420px}
.field .temp-input,.temp-input{flex:1;min-width:0;width:100%;font:600 36px/1.2 var(--font-body);font-variant-numeric:tabular-nums;min-height:56px;padding:.1em .5em;border:2px solid var(--control);border-radius:12px;background:var(--surface);color:var(--ink)}
.temp-input::placeholder{color:var(--muted);opacity:.7;font-weight:400}
.temp-unit{font:600 1.75rem/1 var(--font-body);color:var(--ink)}
@media(min-width:760px){.field .temp-input,.temp-input{font-size:40px;min-height:60px}.temp-unit{font-size:2rem}}
.temp-input:focus-visible{outline:3px solid var(--focus);outline-offset:2px}
.field.invalid .temp-input{border-color:var(--err-ink);background:var(--err-tint)}
.temp .help{max-width:60ch}
.temp-label{margin-bottom:2px}
.temp-label .mono{white-space:nowrap}
.ro-utc{white-space:nowrap}
.aiq{margin-bottom:6px;border:0;padding:0}
.aiq legend{padding:0;font-weight:600}
.ai-opts{display:grid;grid-template-columns:auto 1fr;gap:4px 20px}
.aiq .check{margin:0;min-height:44px;align-items:center}
.fconv{margin:10px 0 0;padding:6px 14px;border:1px solid var(--line);border-radius:var(--radius-sm)}
.fconv[open]>summary{margin-bottom:10px}
.btn-seal{width:100%;min-height:56px;font-size:1.0625rem}
@media(min-width:620px){.btn-seal{width:auto;min-width:280px}}
#fc-msg{margin-top:10px}

/* ---------- layer 2: what I submitted ---------- */
.layer2{display:grid;gap:14px}
.layer2>*{margin:0}
.receipt .kv{margin-top:6px}
.hashrow{margin:12px 0 4px;display:grid;gap:6px}
.hk{font-size:.85rem;color:var(--muted)}
.hash-clamp{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;padding:8px 10px;border:1px solid var(--line);border-radius:8px;background:var(--page);color:var(--ink);word-break:normal;overflow-wrap:normal}
.hash-clamp.open{white-space:normal;overflow:visible;word-break:break-all;overflow-wrap:anywhere}
.audit{margin-top:10px}
.eff{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center;margin:0 0 12px}
#versions td,#versions th{vertical-align:middle}

/* ---------- layer 3 ---------- */
.layer3{margin-top:24px}
.layer3 p{margin:.6em 0}
.layer3 .legend-d{margin-top:12px}
.fam-area{margin-top:24px}
.fam-area>summary{font-size:1.0625rem}
#family-body{margin-top:16px}
.empty{max-width:560px}

/* ---------- family ---------- */
.fam h3,.keypolicy h3{margin-top:0}
.fam .plist{margin-bottom:20px}
.pmeta{margin:.3em 0 .8em}
.pact{margin:0 0 14px}
.pdata{margin:0 0 6px;padding-top:12px;border-top:1px solid var(--line)}
.extra{margin-top:12px}
#add-form{max-width:640px;margin-bottom:20px}
.keypolicy{max-width:720px}
.pcard .keybox{font-size:clamp(1.1rem,4vw,1.4rem)}

/* Phone: the step label yields its row so the primary action stays on the first screen. */
@media(max-width:619px){.task-head{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0,0,0,0)}}

/* Results: a table with room, labelled rows on a phone, so forecast and error are never scrolled out of sight. */
.res-round a{white-space:nowrap}
@media(max-width:619px){
  .res-wrap{overflow:visible;border:0;background:none}
  .res-wrap table.res-table{min-width:0;display:block}
  .res-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0,0,0,0)}
  .res-table tbody{display:grid;gap:12px}
  .res-table tr{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--radius-sm);padding:10px 14px}
  .res-table td{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:8px 0;border-bottom:1px solid var(--line);text-align:right;font-size:.9375rem}
  .res-table td:last-child{border-bottom:0}
  .res-table td[data-label]::before{content:attr(data-label);color:var(--muted);font:600 .8125rem/1.3 var(--font-body);text-align:left}
  .res-table td.res-round{justify-content:space-between;text-align:left}
  .res-table td.res-round br{display:none}
  .res-table td.mono br{display:none}
  .res-table td.res-act:empty{display:none}
}
#rc-title{scroll-margin-top:84px}