/* ============================================================
   Banyan member portal: retro (beige) layer, 2026-10-03.
   Same look as the public site (css/banyan.css): square corners,
   2px ink outlines, hard offset shadows, Silkscreen for labels.
   Everything is scoped to html[data-theme="light"], which is the
   default; dark mode keeps the original look. Colours and behaviour
   come from portal.html; this file only changes shape and type.
   ============================================================ */
html[data-theme="light"]{
  --px-ink:#1b1a17; --px-paper:#fbf8f1; --px-pixel:'Silkscreen',monospace;
  --radius:0px;
}
html[data-theme="light"] body{background:var(--bg)}

/* ---- every rounded thing becomes square ---- */
html[data-theme="light"] .card,html[data-theme="light"] .sheet,html[data-theme="light"] .item,
html[data-theme="light"] .ann,html[data-theme="light"] .mtg,html[data-theme="light"] .mrow,
html[data-theme="light"] .wk-card,html[data-theme="light"] .curr-intro,html[data-theme="light"] .curr-adminbar,
html[data-theme="light"] .filterbar,html[data-theme="light"] .cal,html[data-theme="light"] .acct-card,
html[data-theme="light"] .earn-row,html[data-theme="light"] .wk-struct,html[data-theme="light"] .sub-mine,
html[data-theme="light"] .erow,html[data-theme="light"] .att-drop,html[data-theme="light"] .msg,
html[data-theme="light"] .opt,html[data-theme="light"] .pill,html[data-theme="light"] .tag,
html[data-theme="light"] .closed,html[data-theme="light"] .obj-st,html[data-theme="light"] .acct-role,
html[data-theme="light"] .acct-pts,html[data-theme="light"] .seg-n,html[data-theme="light"] .tl-n,
html[data-theme="light"] .erow-t,html[data-theme="light"] .ebtn,html[data-theme="light"] .mbtn,
html[data-theme="light"] .att-link,html[data-theme="light"] .att-file,html[data-theme="light"] .att-fig img,
html[data-theme="light"] .st-fig img,html[data-theme="light"] .erow-img,html[data-theme="light"] .cal-ev,
html[data-theme="light"] .segbtns,html[data-theme="light"] .vbtn,html[data-theme="light"] .vbtn .n,
html[data-theme="light"] .deliv-name .lbl,html[data-theme="light"] .mrow .rl,html[data-theme="light"] .prog,
html[data-theme="light"] .prog>i,html[data-theme="light"] .ptbadge,html[data-theme="light"] .acctchip,
html[data-theme="light"] .asg,html[data-theme="light"] .tick,
html[data-theme="light"] .tl-dot,html[data-theme="light"] input,html[data-theme="light"] textarea,
html[data-theme="light"] select,html[data-theme="light"] .btn{border-radius:0}

/* ---- surfaces: paper card, ink outline, hard shadow ---- */
html[data-theme="light"] .item,html[data-theme="light"] .ann,html[data-theme="light"] .mtg,
html[data-theme="light"] .wk-card,html[data-theme="light"] .acct-card,html[data-theme="light"] .cal{
  background:var(--px-paper);border:2px solid var(--px-ink);box-shadow:4px 4px 0 var(--px-ink)}
html[data-theme="light"] .item:hover,html[data-theme="light"] .wk-card:hover{border-color:var(--px-ink)}
html[data-theme="light"] .ann{border-left:8px solid var(--red)}
html[data-theme="light"] .ann.pin{border-left-color:var(--gold)}
html[data-theme="light"] .mrow,html[data-theme="light"] .earn-row,html[data-theme="light"] .curr-intro,
html[data-theme="light"] .curr-adminbar,html[data-theme="light"] .filterbar,html[data-theme="light"] .wk-struct{
  background:var(--px-paper);border:2px solid var(--px-ink)}
html[data-theme="light"] .cardlist{gap:18px}
html[data-theme="light"] .item .foot,html[data-theme="light"] .wk-deliv,html[data-theme="light"] .comments{border-top:2px dashed rgba(27,26,23,.25)}
html[data-theme="light"] .cmt{border-bottom:2px dashed rgba(27,26,23,.18)}

/* gate (sign-in / onboarding) and modal sheets: a retro window */
html[data-theme="light"] .gate{background:var(--bg)}
html[data-theme="light"] .gate::before{display:none}
html[data-theme="light"] .card,html[data-theme="light"] .sheet{
  background:var(--px-paper);border:2px solid var(--px-ink);box-shadow:8px 8px 0 var(--px-ink);backdrop-filter:none}
html[data-theme="light"] .card{border-top:22px solid var(--green)}
html[data-theme="light"] .modal{background:rgba(27,26,23,.45);backdrop-filter:none}
html[data-theme="light"] .sheet .x{color:var(--px-ink)}

/* ---- type: pixel font for every small label ---- */
html[data-theme="light"] .kicker,html[data-theme="light"] .stepcount,html[data-theme="light"] .brandrow .wm,
html[data-theme="light"] .tab,html[data-theme="light"] .tag,html[data-theme="light"] .closed,
html[data-theme="light"] .obj-st,html[data-theme="light"] .acct-role,html[data-theme="light"] .acct-pts,
html[data-theme="light"] .mrow .rl,html[data-theme="light"] .meta,html[data-theme="light"] .wk-when,
html[data-theme="light"] .phase-hdr .ph-t,html[data-theme="light"] .deliv-name .lbl,html[data-theme="light"] .sub-adm,
html[data-theme="light"] .cal-lab,html[data-theme="light"] .cal-hd span,html[data-theme="light"] .tl-lab,
html[data-theme="light"] .ofl>span,html[data-theme="light"] .wl-h,html[data-theme="light"] .cab-l,
html[data-theme="light"] .erow-t,html[data-theme="light"] .att-kind,html[data-theme="light"] .ptbadge,
html[data-theme="light"] .loader,html[data-theme="light"] .cmt .rl,html[data-theme="light"] .cmt .tm,
html[data-theme="light"] label.fld .lbl,html[data-theme="light"] .acct-row .k,html[data-theme="light"] .brand-sub{
  font-family:var(--px-pixel);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:400}
html[data-theme="light"] .meta{text-transform:none}
html[data-theme="light"] .kicker{color:var(--red)}
html[data-theme="light"] .wk-no{font-family:var(--px-pixel);font-size:22px;color:var(--red)}

/* ---- tabs: a row of window tabs ---- */
html[data-theme="light"] .tabs{background:var(--bg);border-bottom:2px solid var(--px-ink);gap:6px;padding-top:14px}
html[data-theme="light"] .tab{padding:10px 14px;color:var(--ink-dim);border:2px solid transparent;border-bottom:none;margin-bottom:-2px}
html[data-theme="light"] .tab:hover{color:var(--px-ink)}
html[data-theme="light"] .tab.on{color:var(--px-ink);background:var(--px-paper);border-color:var(--px-ink);border-bottom:2px solid var(--px-paper)}
html[data-theme="light"] .tab .cnt{font-family:var(--px-pixel);font-size:12px;color:var(--red)}

/* ---- buttons: square, pixel label, offset shadow that presses in ---- */
html[data-theme="light"] .btn{border:2px solid var(--px-ink);font-family:var(--px-pixel);font-weight:400;font-size:12px;
  letter-spacing:.05em;text-transform:uppercase;box-shadow:3px 3px 0 var(--px-ink);transition:transform .08s,box-shadow .08s}
html[data-theme="light"] .btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--px-ink)}
html[data-theme="light"] .btn.primary{background:var(--red);color:#fff;border-color:var(--px-ink)}
html[data-theme="light"] .btn.primary:hover{background:var(--red)}
html[data-theme="light"] .btn.ghost{background:var(--px-paper);color:var(--px-ink);border-color:var(--px-ink)}
html[data-theme="light"] .topbar .who .btn{box-shadow:none}
html[data-theme="light"] .topbar .who .btn:hover{transform:none;background:#fff}
html[data-theme="light"] .ptbadge,html[data-theme="light"] .acctchip{background:var(--px-paper);border:2px solid var(--px-ink)}
html[data-theme="light"] .ptbadge{color:var(--px-ink)}

/* vote and discuss controls */
html[data-theme="light"] .vbtn{border:2px solid var(--px-ink);background:var(--px-paper);color:var(--px-ink);
  font-family:var(--px-pixel);font-weight:400;font-size:12px;text-transform:uppercase}
html[data-theme="light"] .vbtn .n{background:transparent;border-left:2px solid currentColor;padding:2px 0 2px 7px}
html[data-theme="light"] .vbtn.approve.on{background:var(--green);color:#fff;border-color:var(--px-ink)}
html[data-theme="light"] .vbtn.pass.on{background:var(--red);color:#fff;border-color:var(--px-ink)}
html[data-theme="light"] .vbtn.abstain.on{background:var(--px-ink);color:var(--bg);border-color:var(--px-ink)}
html[data-theme="light"] .cbtn{font-family:var(--px-pixel);font-size:12px;text-transform:uppercase;color:var(--px-ink)}
html[data-theme="light"] .segbtns{border:2px solid var(--px-ink)}
html[data-theme="light"] .segb{font-family:var(--px-pixel);font-weight:400;font-size:12px;text-transform:uppercase}
html[data-theme="light"] .segb+.segb{border-left:2px solid var(--px-ink)}

/* chips and tags */
html[data-theme="light"] .tag,html[data-theme="light"] .closed,html[data-theme="light"] .obj-st,
html[data-theme="light"] .acct-role,html[data-theme="light"] .mrow .rl,html[data-theme="light"] .seg-n,
html[data-theme="light"] .tl-n,html[data-theme="light"] .erow-t,html[data-theme="light"] .deliv-name .lbl{
  border:2px solid var(--px-ink);background:var(--px-paper);color:var(--px-ink)}
html[data-theme="light"] .tag.stage{background:var(--px-ink);color:var(--bg)}
html[data-theme="light"] .pill,html[data-theme="light"] .opt{border:2px solid var(--px-ink);background:var(--px-paper)}
html[data-theme="light"] .pill.sel,html[data-theme="light"] .opt.sel{background:var(--red);color:#fff;border-color:var(--px-ink)}
html[data-theme="light"] .mbtn,html[data-theme="light"] .att-link,html[data-theme="light"] .att-file{
  border:2px solid var(--px-ink);background:var(--px-paper);color:var(--px-ink)}
html[data-theme="light"] .mbtn:hover,html[data-theme="light"] .att-link:hover,html[data-theme="light"] .att-file:hover{background:#fff}
html[data-theme="light"] .att-drop{border:2px dashed var(--px-ink)}
html[data-theme="light"] .erow,html[data-theme="light"] .ebtn{border:2px solid var(--px-ink)}
html[data-theme="light"] .att-fig img,html[data-theme="light"] .st-fig img,html[data-theme="light"] .erow-img{border:2px solid var(--px-ink)}

/* inputs: the same fields as the public submit-startup form */
html[data-theme="light"] input[type=text],html[data-theme="light"] input[type=email],html[data-theme="light"] input[type=password],
html[data-theme="light"] input[type=url],html[data-theme="light"] textarea,html[data-theme="light"] select{
  border:2px solid var(--px-ink);background-color:#fff}
html[data-theme="light"] input:focus,html[data-theme="light"] textarea:focus,html[data-theme="light"] select:focus{
  border-color:var(--px-ink);box-shadow:3px 3px 0 var(--red)}
html[data-theme="light"] .msg{border-width:2px}
html[data-theme="light"] .prog{height:10px;border:2px solid var(--px-ink);background:var(--px-paper)}
html[data-theme="light"] .prog>i{background:var(--green)}

/* avatars stay round (a photo, or initials on a red disc) */
html[data-theme="light"] .avatar{border-radius:50%;border:2px solid var(--px-ink)}
.avatar.has-photo{background-color:transparent!important}

/* small pieces */
html[data-theme="light"] .tick{border:2px solid var(--px-ink)}
html[data-theme="light"] .tick.on{background:var(--green)}
html[data-theme="light"] .tl-dot{box-shadow:none;border:2px solid var(--px-ink)}
html[data-theme="light"] .tl-items{border-left:2px dashed rgba(27,26,23,.35)}
html[data-theme="light"] .cal-hd{border-bottom:2px solid var(--px-ink)}
html[data-theme="light"] .cal-ev{border:2px solid var(--red);background:#fff}
html[data-theme="light"] .cal-c.today{background:rgba(198,166,103,.18)}
html[data-theme="light"] .acct-banner{background:var(--green)}
html[data-theme="light"] .phase-hdr .ph-l{height:2px;background:repeating-linear-gradient(90deg,var(--px-ink) 0 6px,transparent 6px 10px)}

/* pixel icons and trees (js/pixel.js) */
canvas.px{image-rendering:pixelated;image-rendering:crisp-edges}
.pxi{display:inline-block;vertical-align:-3px}
.empty .em .pxi,.big-emoji .pxi{display:block;margin:0 auto}
.pxtree{display:block;width:180px;height:auto;margin:0 auto 8px}
.empty .em{opacity:1}

/* your own banyan on the Curriculum tab */
.mytree{display:flex;flex-direction:column;align-items:center;gap:6px;flex:none}
.mytree canvas{width:148px;height:auto;border:2px solid var(--line-3);background:var(--panel-2)}
html[data-theme="light"] .mytree canvas{border-color:var(--px-ink);background:#f3ecdc}
.mytree-l{font-family:var(--px-pixel,'Silkscreen',monospace);font-size:12px;text-transform:uppercase;color:var(--ink-dim)}
@media (max-width:560px){.mytree canvas{width:120px}}

/* account: side menu + sections (3 Oct) */
html[data-theme="light"] .acct-tab{border-radius:0;border:2px solid transparent;font-family:var(--px-pixel);font-size:12px;letter-spacing:.05em;text-transform:uppercase;font-weight:400}
html[data-theme="light"] .acct-tab:hover{background:var(--px-paper);color:var(--px-ink)}
html[data-theme="light"] .acct-tab.on{background:var(--px-paper);color:var(--px-ink);border-color:var(--px-ink);box-shadow:3px 3px 0 var(--px-ink)}
html[data-theme="light"] .acct-tab .n{font-family:var(--px-pixel);color:var(--red)}
html[data-theme="light"] .acct-tab.out{border-top:2px dashed rgba(27,26,23,.25)}
html[data-theme="light"] .acct-stat{border-radius:0;border:2px solid var(--px-ink);background:var(--px-paper);box-shadow:3px 3px 0 var(--px-ink);transition:transform .08s,box-shadow .08s}
html[data-theme="light"] .acct-stat:hover{transform:translate(2px,2px);box-shadow:1px 1px 0 var(--px-ink)}
html[data-theme="light"] .acct-stat span,html[data-theme="light"] .acct-kv dt{font-family:var(--px-pixel);font-size:12px;letter-spacing:.05em;text-transform:uppercase}
html[data-theme="light"] .acct-li{border-radius:0;border:2px solid var(--px-ink);background:#fff}
html[data-theme="light"] .acct-lvl .bar{border-radius:0;border:2px solid var(--px-ink);background:var(--px-paper);height:12px}
html[data-theme="light"] .acct-lvl .bar i{background:var(--green)}
html[data-theme="light"] .acct-tree canvas{border-color:var(--px-ink);background:#f3ecdc}
html[data-theme="light"] .acct-li .ok{color:var(--green)}
@media(max-width:760px){html[data-theme="light"] .acct-tab.out{border-top:2px solid transparent}}

/* ---- "Sign in with AIC" (assets/aic-signin.js): same square pixel button, ink fill ---- */
html[data-theme="light"] .aic-btn{border-radius:0;border:2px solid var(--px-ink);background:var(--px-ink);color:var(--px-paper);
  font-family:var(--px-pixel);font-weight:400;font-size:12px;letter-spacing:.05em;text-transform:uppercase;
  box-shadow:3px 3px 0 var(--red);transition:transform .08s,box-shadow .08s}
html[data-theme="light"] .aic-btn:hover:not(:disabled){transform:translate(2px,2px);box-shadow:1px 1px 0 var(--red)}
html[data-theme="light"] .aic-tile{border-radius:0;font-family:var(--px-pixel);font-weight:400;font-size:12px}
