/* emerald-bear.org — partner & client portal.
   EBMSOL brand: rich black ground, emerald accent, Inter with Barlow Condensed
   for headings. Layout is fluid: column counts follow available width rather
   than a list of device breakpoints, so it holds from 360px upward. */
:root{
  color-scheme:dark;
  --onyx:#07090b; --graphite:#0e1114; --panel:rgba(8,18,21,.92);
  --line:#1d252b; --line-2:#28343c; --border:#28544d;
  --white:#f6f8f8; --silver:#d9e0e2; --muted:#91a0a4;
  --emerald:#00c99a; --emerald-2:#00a882; --emerald-br:#38edc2;
  --focus:#fff; --r:.65rem;
}
*{box-sizing:border-box}
html,body{margin:0;background:var(--onyx);color:var(--silver);
  font:400 15.5px/1.65 Inter,ui-sans-serif,system-ui,"Segoe UI",sans-serif;
  -webkit-font-smoothing:antialiased}
body{min-height:100vh;display:flex;flex-direction:column;overflow-x:hidden}
h1,h2,h3{margin:0;font-family:"Barlow Condensed",Inter,sans-serif;font-weight:700;
  color:var(--white);line-height:1.04;text-wrap:balance}
p{margin:0}
a{color:inherit}
img,svg{max-width:100%}
:where(a,button,input,select,textarea,[tabindex]):focus-visible{
  outline:3px solid var(--focus);outline-offset:3px;border-radius:3px}
.skip{position:absolute;left:-9999px;top:0;z-index:200;background:var(--emerald);
  color:#04120b;padding:12px 18px;font-weight:700}
.skip:focus{left:0}

/* ---------- header ---------- */
.hdr{position:sticky;top:0;z-index:50;background:rgba(7,9,11,.94);
  backdrop-filter:blur(8px);border-bottom:1px solid var(--line)}
.hdr-in{width:min(100% - 2rem,1500px);margin-inline:auto;min-height:62px;
  display:flex;align-items:center;gap:16px;flex-wrap:wrap}
.brand{display:flex;align-items:center;gap:11px;text-decoration:none;padding:9px 0}
.brand .mk{width:34px;height:34px;flex:0 0 auto;border-radius:9px;
  background:var(--emerald-2);color:#04120b;display:grid;place-items:center;
  font:800 13px/1 Inter}
.brand b{display:block;font:700 14.5px/1.2 Inter;color:var(--white);letter-spacing:.01em}
.brand i{display:block;font:600 10px/1.5 Inter;font-style:normal;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.hdr-end{margin-left:auto;display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.who{font-size:13px;color:var(--silver)}
.switch{font-size:13px;color:var(--emerald);text-decoration:none}
.switch:hover{color:var(--emerald-br);text-decoration:underline;text-underline-offset:.2em}
.out{margin:0}
.out button{min-height:38px;padding:.4rem .9rem;border-radius:var(--r);
  background:transparent;border:1px solid var(--line-2);color:var(--silver);
  font:600 13px/1 Inter;cursor:pointer}
.out button:hover{border-color:var(--emerald);color:var(--white)}

/* ---------- layout ---------- */
.layout{flex:1 0 auto;width:min(100% - 2rem,1500px);margin-inline:auto;
  display:grid;grid-template-columns:minmax(0,236px) minmax(0,1fr);
  gap:clamp(1.2rem,3vw,2.6rem);padding-block:clamp(20px,3vw,34px)}
.main{min-width:0}
.plain{flex:1 0 auto;width:min(100% - 2rem,1500px);margin-inline:auto;
  padding-block:clamp(28px,5vw,64px)}
@media (max-width:860px){ .layout{grid-template-columns:minmax(0,1fr)} }

/* ---------- sidebar ---------- */
.side{display:flex;flex-direction:column;gap:2px;align-self:start;
  position:sticky;top:calc(62px + 1rem)}
.acct{margin:0 0 14px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--panel)}
.acct span{display:block;font:700 9.5px/1 Inter;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.acct b{display:block;margin-top:6px;font:700 16px/1.2 Inter;color:var(--white)}
.acct i{display:block;margin-top:4px;font-style:normal;font-size:12px;color:var(--emerald)}
.grp{margin:16px 0 5px;font:700 9.5px/1 Inter;letter-spacing:.2em;
  text-transform:uppercase;color:var(--muted)}
.side .s{min-height:40px;display:flex;align-items:center;padding:.45rem .7rem;
  border-radius:.45rem;border-left:2px solid transparent;color:var(--silver);
  text-decoration:none;font-size:14px}
.side .s:hover{background:rgba(0,201,154,.07);color:var(--white)}
.side .s.on{border-left-color:var(--emerald);background:rgba(0,201,154,.1);color:var(--white)}
@media (max-width:860px){
  .side{position:static;flex-direction:row;flex-wrap:wrap;gap:6px;
    padding-bottom:14px;border-bottom:1px solid var(--line)}
  .acct{width:100%;margin-bottom:8px}
  .grp{width:100%;margin:8px 0 2px}
  .side .s{border-left:0;border:1px solid var(--line);border-radius:999px;
    padding:.4rem .8rem;font-size:13px}
  .side .s.on{border-color:var(--emerald)}
}

/* ---------- panes ---------- */
.pane{max-width:100%}
.pane.narrow{max-width:min(100%,62ch)}
.eyebrow{font:700 10.5px/1 Inter;letter-spacing:.22em;text-transform:uppercase;
  color:var(--emerald);margin-bottom:10px}
.pane h1{font-size:clamp(28px,4vw,44px);margin-bottom:12px}
.lede{color:var(--silver);font-size:16px;line-height:1.7;max-width:62ch}
.fine{margin-top:14px;color:var(--muted);font-size:13px}
.fine a{color:var(--emerald)}
.alert{margin:16px 0;padding:.9rem 1.1rem;border-radius:var(--r);
  border:1px solid #e06a6a;background:rgba(224,106,106,.1);color:#ffd9d9;font-size:14px}
.crumb{display:flex;gap:.45rem;flex-wrap:wrap;align-items:center;color:var(--muted);
  font-size:13px;margin-bottom:14px}
.crumb a{color:var(--silver);text-decoration:none}
.crumb a:hover{color:var(--emerald-br);text-decoration:underline;text-underline-offset:.2em}

.btn{display:inline-flex;align-items:center;justify-content:center;gap:.6rem;
  min-height:48px;padding:.72rem clamp(1.15rem,2vw,2rem);border-radius:var(--r);
  color:var(--white);background:linear-gradient(180deg,#12332d,#07110f);
  border:1px solid var(--emerald);text-decoration:none;font-weight:650;
  transition:background .18s ease,border-color .18s ease,box-shadow .18s ease}
.btn:hover{background:linear-gradient(180deg,#155044,#091914);
  border-color:var(--emerald-br);box-shadow:0 0 24px rgba(0,201,154,.18)}

/* ---------- grids ---------- */
.grid{display:grid;gap:.9rem;margin-top:clamp(20px,3vw,30px);
  grid-template-columns:repeat(auto-fit,minmax(min(100%,250px),1fr))}
.tile{display:flex;flex-direction:column;gap:7px;padding:1.05rem 1.15rem;
  border:1px solid var(--border);border-radius:.7rem;background:var(--panel);
  text-decoration:none;color:var(--silver);min-height:128px;
  transition:border-color .18s ease,box-shadow .18s ease}
.tile:hover{border-color:var(--emerald);box-shadow:0 0 26px rgba(0,201,154,.11)}
.tile b{font:700 15.5px/1.25 Inter;color:var(--white)}
.tile span{font-size:13px;line-height:1.55;color:var(--muted);flex:1 1 auto}
.tile .soon{font-style:normal;font:600 10px/1 Inter;letter-spacing:.16em;
  text-transform:uppercase;color:var(--muted);align-self:flex-start;
  padding:4px 8px;border:1px solid var(--line-2);border-radius:999px}

.cards{display:grid;gap:.75rem;margin-top:22px;
  grid-template-columns:repeat(auto-fit,minmax(min(100%,240px),1fr))}
.card{display:flex;align-items:center;gap:12px;min-height:66px;padding:.85rem 1.1rem;
  border:1px solid var(--border);border-radius:var(--r);background:var(--panel);
  text-decoration:none;color:var(--silver)}
.card:hover{border-color:var(--emerald);color:var(--white)}
.card b{display:block;font:700 15px/1.3 Inter;color:var(--white)}
.card span{display:block;font-size:12.5px;color:var(--muted)}
.card i{margin-left:auto;font-style:normal;color:var(--emerald)}

.note{margin-top:clamp(22px,3vw,34px);padding:1.1rem 1.25rem;border-radius:.7rem;
  border:1px solid rgba(0,201,154,.34);background:rgba(0,201,154,.06)}
.note b{display:block;color:var(--white);margin-bottom:6px;font-size:15px}
.note p{color:var(--silver);font-size:14px;line-height:1.65;margin-top:6px}
.note a{color:var(--emerald-br)}

/* ---------- footer ---------- */
.ftr{flex:0 0 auto;margin-top:auto;border-top:1px solid var(--line);
  padding-block:22px;color:var(--muted);font-size:13px}
.ftr p{width:min(100% - 2rem,1500px);margin-inline:auto}
.ftr p+p{margin-top:8px;display:flex;gap:16px;flex-wrap:wrap}
.ftr a{color:var(--muted);text-decoration:none}
.ftr a:hover{color:var(--emerald)}

@media (prefers-reduced-motion:reduce){*{transition-duration:.01ms!important}}

/* ---------- section content ---------- */
.stack{display:grid;gap:.8rem;margin-top:clamp(18px,2.4vw,26px)}
.row{padding:1rem 1.15rem;border:1px solid var(--ebm-border);border-radius:.7rem;
  background:var(--ebm-panel)}
.row b{display:block;font:700 15.5px/1.3 Inter;color:var(--ebm-white)}
.row p{margin:.5rem 0 0;font-size:14.5px;line-height:1.65;color:var(--ebm-silver)}
.row .meta{display:block;margin-top:.5rem;font-size:12.5px;color:var(--ebm-muted);
  font-variant-numeric:tabular-nums}
.empty{margin-top:clamp(18px,2.4vw,26px);padding:1.6rem 1.2rem;text-align:center;
  border:1px dashed var(--ebm-border);border-radius:.7rem;color:var(--ebm-muted);font-size:14.5px}
.scrollx{overflow-x:auto;-webkit-overflow-scrolling:touch;margin-top:clamp(18px,2.4vw,26px)}
.tbl{width:100%;border-collapse:collapse;font-size:14.5px;min-width:min(100%,520px)}
.tbl th{text-align:left;padding:.6rem .9rem;font:700 10.5px/1 Inter;letter-spacing:.16em;
  text-transform:uppercase;color:var(--ebm-muted);border-bottom:1px solid var(--ebm-border);
  white-space:nowrap}
.tbl td{padding:.85rem .9rem;border-bottom:1px solid var(--line);vertical-align:top;
  color:var(--ebm-silver)}
.tbl td b{display:block;color:var(--ebm-white);font-weight:600}
.tbl td .meta{display:block;margin-top:2px;font-size:12.5px;color:var(--ebm-muted)}
.pill{display:inline-block;padding:4px 10px;border-radius:999px;font:600 11.5px/1.4 Inter;
  border:1px solid var(--ebm-border);color:var(--ebm-silver);white-space:nowrap}
.pill.on{color:var(--ebm-emerald);border-color:rgba(0,201,154,.44);background:rgba(0,201,154,.1)}