/* Give Back: page rules on top of fadeaway's app.css (src/fadeaway/app.css, brooklynse/fadeaway@7899f61), which
   carries the tokens, buttons, chips, tiles, toast and the Beam unchanged. DESIGN.md ("The Arena at Night") is the
   rulebook: one amber light per screen, pills for everything you press, rail-grey hairlines, tabular numbers,
   Big Shoulders only for the one number or title a page answers.

   One deliberate difference from fadeaway: its screens are tools that fill the window, ours are pages you read, so
   #screen scrolls (the header stays put) instead of each panel owning its scroll. */

/* ---------- shell ---------- */
#screen{overflow-y:auto;overflow-x:hidden;display:block;padding-right:2px}
#screen::-webkit-scrollbar{width:6px}#screen::-webkit-scrollbar-thumb{background:#2a2e35;border-radius:3px}
.page{max-width:1240px;margin:0 auto;padding:4px 0 28px;display:flex;flex-direction:column;gap:var(--g)}
.hdr .logo{background:var(--ink);border-radius:10px;padding:3px 7px;height:auto}
.hdr .logo img{height:34px}
.tab .lk{margin-left:4px;font-size:11px;opacity:.8}
.mock{position:fixed;left:16px;bottom:16px;z-index:40;font:var(--f-chip);color:var(--mute);background:var(--panel);border:1px solid var(--line);
  border-radius:999px;padding:4px 10px;box-shadow:var(--lift-chip)}
.mock b{color:var(--soft)}

/* ---------- page head ---------- */
.phd{display:flex;align-items:flex-end;gap:12px;flex-wrap:wrap;padding:6px 2px 2px}
.phd .t-over{display:block;margin-bottom:4px}
.phd h1{margin:0;font:var(--f-page)}
.phd p{margin:4px 0 0;color:var(--soft);font:var(--f-prose);max-width:62ch}
.phd .acts{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.sec{display:flex;align-items:baseline;gap:10px;margin:0 0 10px}
.sec h2{margin:0;font:var(--f-panel)}
.sec .m{margin-left:auto}
.card p,.panel p{margin:0;color:var(--soft);font:var(--f-prose)}
.panel.pad{padding:14px 16px}

/* ---------- home ---------- */
.hero{display:grid;grid-template-columns:minmax(0,1.6fr) minmax(280px,1fr);gap:var(--g)}
.hero .say{background:radial-gradient(120% 140% at 0% 0%,#f59e2c1f,#13161c 55%);border:1px solid var(--line);border-radius:16px;padding:26px 26px 22px;
  display:flex;flex-direction:column;gap:12px;box-shadow:var(--lift-card)}
.hero h1{margin:0;font:900 64px/56px var(--display);text-transform:uppercase;letter-spacing:.4px}
.hero h1 span{color:transparent;-webkit-text-stroke:1.5px var(--ink)}
.hero .say p{max-width:60ch}
.hero .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:auto;padding-top:6px}
.score{isolation:isolate;border-radius:16px;margin:2px}
.score .card{height:100%;display:flex;flex-direction:column;gap:6px;padding:18px;border-radius:16px}
.score .big{font:var(--f-total);font-variant-numeric:tabular-nums;color:var(--ink)}
.score .big small{font:var(--f-panel);color:var(--mute);margin-left:6px;font-family:var(--ui)}
.goal{display:flex;align-items:center;gap:8px;margin-top:4px}
.quick{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.quick a{text-decoration:none;color:var(--ink);display:flex;gap:12px;align-items:center}
.quick .ic{font-size:22px;width:40px;height:40px;border-radius:12px;background:var(--panel2);border:1px solid var(--line);display:flex;align-items:center;justify-content:center;flex:none}
.quick b{font:var(--f-item);display:block}
.quick small{font:var(--f-meta);color:var(--mute)}
.quick i{margin-left:auto;color:var(--mute);font-style:normal}
.quick a:hover i{color:var(--amber2)}
.quote{font:var(--f-prose);font-size:16px;line-height:24px;color:var(--soft);font-style:italic;margin:0}

/* ---------- stat tiles ---------- */
.tiles{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--g)}
.tile .v{font:var(--f-stat);font-variant-numeric:tabular-nums;letter-spacing:-.3px}
.tile .v.hot{color:var(--amber);text-shadow:0 0 18px #f59e2c66}

/* ---------- partners ---------- */
.partners{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.partners .tile{padding:12px;gap:6px}
.partners .tile p{font:var(--f-meta);color:var(--mute);margin:0}
.partners .tile .chips{display:flex;gap:4px;flex-wrap:wrap;margin-top:auto;padding-top:4px}

/* ---------- opportunities ---------- */
.filters{display:flex;gap:6px;flex-wrap:wrap;align-items:center}
.filters input.txt{flex:1 1 260px;padding:7px 12px;border-radius:999px}
.filters select.txt{padding:7px 10px;border-radius:999px}
.evs{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:var(--g)}
.ev{display:flex;flex-direction:column;gap:10px;padding:14px}
.ev .top{display:flex;gap:10px;align-items:center}
.dt{width:56px;flex:none;text-align:center;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:6px 0 7px}
.dt small{display:block;font:var(--f-over);letter-spacing:.6px;color:var(--mute);text-transform:uppercase}
.dt b{display:block;font:900 30px/30px var(--display);font-variant-numeric:tabular-nums}
.ev h3{margin:0;font:var(--f-item);font-size:15px}
.ev .org{font:var(--f-meta);color:var(--soft)}
.ev .meta{display:grid;gap:3px;font:var(--f-meta);color:var(--mute)}
.ev .chips{display:flex;gap:4px;flex-wrap:wrap}
.ev .foot{display:flex;align-items:center;gap:8px;margin-top:auto;padding-top:10px;border-top:1px solid var(--line)}
.ev .foot .left{font:var(--f-field);color:var(--soft);font-variant-numeric:tabular-nums}
.ev .foot .sp{flex:1}
.meter{height:4px;border-radius:999px;background:#ffffff0a;overflow:hidden;margin-top:2px}
.meter i{display:block;height:100%;border-radius:999px;background:#7f7a72}
.ev.full .meter i{background:#ff7a66}

/* ---------- calendar ---------- */
.calbar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.calbar h2{margin:0 6px;font:var(--f-panel);min-width:130px;text-align:center}
.months{display:flex;gap:3px;flex-wrap:wrap;margin-left:auto}
.wk,.cal{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px}
.wk b{font:var(--f-over);letter-spacing:.6px;text-transform:uppercase;color:var(--mute);padding:0 4px}
.day{min-height:104px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:6px;display:flex;flex-direction:column;gap:4px;min-width:0}
.day.out{background:transparent;border-style:dashed;border-color:#1c1f25}
.day .n{font:var(--f-section);color:var(--mute);font-variant-numeric:tabular-nums}
.day.today{border-color:#f59e2c88}.day.today .n{color:var(--amber)}
.ce{display:block;width:100%;text-align:left;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:4px 6px;
  font:var(--f-chip);cursor:pointer;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:var(--lift-chip)}
.ce:hover{border-color:#f59e2c88}
.ce.past{color:var(--mute);cursor:default;box-shadow:none;background:transparent}
.ce.past:hover{border-color:var(--line)}
.ce.mine{border-color:#2f7a5799;color:var(--green);background:#0d2a1d}

/* ---------- tables ---------- */
.tbl{width:100%;border-collapse:collapse;font:var(--f-body)}
.tbl th{font:var(--f-over);letter-spacing:.6px;text-transform:uppercase;color:var(--mute);text-align:left;padding:6px 10px;border-bottom:1px solid var(--line);white-space:nowrap}
.tbl td{padding:9px 10px;border-bottom:1px solid #1c1f25;vertical-align:middle}
.tbl tr:last-child td{border-bottom:0}
.tbl td.n,.tbl th.n{text-align:right;font-variant-numeric:tabular-nums}
.tbl tbody tr:hover td{background:#ffffff05}
.tw{overflow-x:auto}

/* ---------- my impact ---------- */
.me{display:grid;grid-template-columns:minmax(260px,1fr) minmax(0,1.6fr);gap:var(--g)}
.rows{display:flex;flex-direction:column;gap:6px}
.row{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 11px;cursor:pointer;color:var(--ink);font:inherit;text-align:left;width:100%}
.row:hover{border-color:#f59e2c66}
.row b{font:var(--f-item);display:block}.row small{font:var(--f-meta);color:var(--mute)}
.row .go{margin-left:auto;color:var(--amber2);font:var(--f-control);white-space:nowrap}
.badges{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:var(--g)}
.badge{display:flex;gap:10px;align-items:center}
.badge .ic{width:42px;height:42px;border-radius:50%;display:flex;align-items:center;justify-content:center;font-size:20px;flex:none;background:#0d2a1d;border:1px solid #2f7a5799}
.badge.locked{opacity:.5}.badge.locked .ic{background:var(--panel2);border-color:var(--line);filter:grayscale(1)}

/* ---------- resources ---------- */
.acc details{border-bottom:1px solid var(--line)}
.acc details:last-child{border-bottom:0}
.acc summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;padding:12px 14px;font:var(--f-item)}
.acc summary::-webkit-details-marker{display:none}
.acc summary .ic{font-size:17px;width:24px;text-align:center}
.acc summary:after{content:"＋";margin-left:auto;color:var(--mute)}
.acc details[open] summary:after{content:"－";color:var(--amber2)}
.acc details>div{padding:0 14px 14px 48px;color:var(--soft);font:var(--f-prose)}
.two{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.help{display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.help .ic{font-size:26px}

/* ---------- admin ---------- */
.cols{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--g)}
.q{display:flex;align-items:center;gap:10px;background:var(--panel2);border:1px solid var(--line);border-radius:12px;padding:9px 11px}
.q b{font:var(--f-item);display:block}.q small{font:var(--f-meta);color:var(--mute)}
.q .acts{margin-left:auto;display:flex;gap:6px}
.hbars{display:flex;flex-direction:column;gap:7px}
.hb{display:grid;grid-template-columns:130px 1fr 44px;align-items:center;gap:8px;font:var(--f-meta);color:var(--soft)}
.hb i{height:8px;border-radius:999px;background:#ffffff0a;overflow:hidden}
.hb i em{display:block;height:100%;border-radius:999px;background:#55524c}
.hb.top i em{background:var(--amber);box-shadow:0 0 12px #f59e2c88}
.hb b{text-align:right;font-variant-numeric:tabular-nums;color:var(--ink)}
.vbars{display:flex;align-items:flex-end;gap:10px;height:140px;padding-top:8px}
.vb{flex:1;display:flex;flex-direction:column;align-items:center;gap:4px;min-width:0;font:var(--f-meta);color:var(--mute)}
.vb i{width:100%;max-width:42px;border-radius:8px 8px 3px 3px;background:#55524c}
.vb.now i{background:var(--amber-face);box-shadow:0 0 16px #f59e2c66}
.vb.now{color:var(--amber2)}
.vb.empty i{background:#ffffff0a}
.vb b{font-variant-numeric:tabular-nums;color:var(--ink);font-size:12px}

/* ---------- dialogs: fadeaway's pop-out window, as a modal ---------- */
dialog{background:#161a21f2;color:var(--ink);border:1px solid #ffffff22;border-radius:16px;box-shadow:0 26px 70px #000e,0 0 0 1px #00000080;
  padding:0;width:min(640px,calc(100vw - 24px));max-height:calc(100vh - 40px);-webkit-backdrop-filter:blur(18px);backdrop-filter:blur(18px)}
dialog[open]{animation:pop .22s cubic-bezier(.2,.8,.2,1)}
dialog::backdrop{background:#05060899;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px)}
dialog .wh{cursor:default}
dialog .wb{padding:14px 16px;overflow:auto;max-height:calc(100vh - 160px)}
dialog .ft{display:flex;gap:8px;justify-content:flex-end;padding:12px 16px;border-top:1px solid #ffffff14}
.facts{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px;margin-bottom:12px}
.facts .tile b{font:var(--f-item);font-size:13px}
.grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
.grid label,.fld{display:flex;flex-direction:column;gap:4px;font:var(--f-field);color:var(--soft)}
.grid .full{grid-column:1/-1}
.grid .txt{width:100%;font:var(--f-body);padding:7px 9px}
.att{border:1px solid var(--line);border-radius:12px;padding:10px;background:var(--panel2);display:flex;flex-direction:column;gap:8px}
.att .ar{display:grid;grid-template-columns:1.2fr 1.4fr 1fr .8fr auto;gap:6px;align-items:end}
.att .ar .txt{padding:6px 8px}
.chk,.grid label.chk{display:flex;flex-direction:row;gap:8px;align-items:flex-start;font:var(--f-body);color:var(--soft)}
.chk input{accent-color:var(--amber);margin-top:2px}

/* ---------- More (phones) ---------- */
.more .mrow .ic{font-size:19px}

/* ---------- smaller desktops ---------- */
@media (max-width:1080px){
  .hero,.me{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .partners{grid-template-columns:repeat(2,minmax(0,1fr))}
  .tab .tx{display:none}.tab{padding:6px 10px;font-size:15px}
}

/* ---------- phones: fadeaway's pattern (mobile.css) — the page scrolls, the tabs move to a bottom bar ---------- */
.tabbar{display:none}
@media (max-width:720px){
  html,body{height:auto;overflow:visible;font-size:14px}
  .shell{display:block;height:auto;min-height:100dvh;padding:0 16px calc(96px + env(safe-area-inset-bottom))}
  #screen{overflow:visible}
  .hdr{position:sticky;top:0;z-index:30;margin:0 -16px 10px;padding:calc(env(safe-area-inset-top) + 8px) 16px 8px;background:#0b0d11f0;
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-bottom:1px solid #ffffff0a}
  .hdr .tabs,.who-n{display:none}
  .hdr .logo img{height:28px}
  .tabbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:40;background:#0f1217f2;border-top:1px solid var(--line);
    -webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);padding:6px 6px calc(6px + env(safe-area-inset-bottom))}
  .tabbar a{flex:1;display:flex;flex-direction:column;align-items:center;gap:2px;padding:6px 0;min-height:48px;text-decoration:none;color:var(--mute);font:var(--f-chip);border-radius:12px}
  .tabbar a .ic{font-size:19px}
  .tabbar a.on{color:var(--amber);background:#f59e2c14}
  .mock{bottom:calc(84px + env(safe-area-inset-bottom))}
  .hero h1{font-size:44px;line-height:40px}
  .tiles,.quick,.partners,.badges,.two,.cols,.facts,.grid{grid-template-columns:1fr}
  .tiles{grid-template-columns:repeat(2,minmax(0,1fr))}
  .phd .acts{margin-left:0;width:100%}
  .wk{display:none}
  .cal{grid-template-columns:1fr}.day.out,.day.none{display:none}.day{min-height:0;flex-direction:row;flex-wrap:wrap;align-items:center}
  .day .n{width:100%}
  .att .ar{grid-template-columns:1fr 1fr}
  .btn,.ghost{min-height:40px}
  dialog{width:100vw;max-width:100vw;max-height:92vh;margin:auto 0 0;border-radius:18px 18px 0 0}
}