/* ============================================================
   Envesta HQ — dark house style
   Deep green ground, Lora display, Poppins UI, gold accents.
   Matches the ad set and the app's own chrome.
   ============================================================ */
:root{
  /* ground → surface → raised: three steps so panels read as objects */
  --bg:#0A2A21;
  --surface:#10382C;
  --raised:#164536;
  --line:rgba(216,188,130,.16);
  --line-strong:rgba(216,188,130,.32);

  --cream:#F6EDE4;
  --ink:#F6EDE4;
  --muted:#9DB3A7;
  --faint:#6F8A7D;

  --gold:#D8BC82;
  --gold-solid:#B9913F;
  --gold-deep:#8C6B27;

  --up:#5FCF9A;
  --down:#E4855C;

  --serif:'Lora', Georgia, serif;
  --sans:'Poppins', -apple-system, system-ui, sans-serif;

  --r:14px; --r-lg:20px;
  --nav:248px;
}
*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
html,body{height:100%}
body{
  font-family:var(--sans); font-size:14px; line-height:1.55;
  background:var(--bg); color:var(--ink);
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}

/* ---------- shell ---------- */
.shell{display:flex;min-height:100%}

.side{
  width:var(--nav); flex:none; position:sticky; top:0; align-self:flex-start;
  height:100vh; padding:22px 14px; display:flex; flex-direction:column; gap:4px;
  background:linear-gradient(180deg,#0C3226,#0A2A21);
  border-right:1px solid var(--line);
}
.brand{display:flex;align-items:center;gap:11px;padding:2px 8px 18px}
.brand img{width:34px;height:34px;border-radius:11px;flex:none}
.brand .bt{font:700 15px var(--serif);color:var(--cream);letter-spacing:.2px;line-height:1.1}
.brand .bs{font:600 8.5px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-top:2px}

.nav{display:flex;flex-direction:column;gap:2px}
.nav a{
  display:flex;align-items:center;gap:11px;padding:10px 11px;border-radius:11px;
  font:600 13px var(--sans);color:var(--muted);transition:background .15s,color .15s;
}
.nav a svg{width:18px;height:18px;flex:none;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round;opacity:.9}
.nav a:hover{background:rgba(216,188,130,.07);color:var(--cream)}
.nav a.on{background:var(--raised);color:var(--cream)}
.nav a.on svg{stroke:var(--gold);opacity:1}
.nav .grp{font:700 8.5px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);padding:16px 11px 6px}
.side .foot{margin-top:auto;padding:12px 11px 0;border-top:1px solid var(--line);font:600 10.5px var(--sans);color:var(--faint)}
.side .foot b{display:block;color:var(--muted);font-weight:600;font-size:11.5px}

/* ---------- page ---------- */
.page{flex:1;min-width:0;padding:30px 34px 60px}
/* No max-width. HQ is a desktop back office and the 1180px cap left half a
   large monitor empty while tables scrolled sideways inside it. Content that
   needs a reading measure sets its own (.lede is 60ch); everything else —
   tables, the roster, the stat grid — is better wide. */
@media (min-width:1500px){ .page{padding:34px 48px 70px} }
.head{margin-bottom:24px}
.eyebrow{font:700 9.5px var(--sans);letter-spacing:1.8px;text-transform:uppercase;color:var(--gold);margin-bottom:9px}
h1{font:600 30px/1.15 var(--serif);color:var(--cream);letter-spacing:-.2px}
.rule{width:46px;height:2px;background:var(--gold-solid);border-radius:2px;margin:14px 0 12px}
.lede{font:400 13.5px/1.65 var(--sans);color:var(--muted);max-width:60ch}

/* ---------- panels ---------- */
.c{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:20px 22px;margin-bottom:14px}
.c.pad0{padding:0;overflow:hidden}
.c h3{font:600 16px var(--serif);color:var(--cream);margin-bottom:3px}
.c .sub{font:400 12px var(--sans);color:var(--muted)}
.tag{font:700 9px var(--sans);letter-spacing:1.5px;text-transform:uppercase;color:var(--gold);margin-bottom:9px;display:flex;align-items:center;gap:7px}
.tag svg{width:14px;height:14px;stroke:var(--gold);fill:none;stroke-width:1.7}
.chead{display:flex;align-items:flex-end;justify-content:space-between;gap:14px;padding:18px 22px 14px;border-bottom:1px solid var(--line)}

/* ---------- stats ---------- */
.statgrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:12px;margin-bottom:14px}
.stat{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:18px 20px}
.stat b{font:600 30px/1 var(--serif);color:var(--gold);display:block;margin-bottom:6px}
.stat span{font:600 9px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted)}

/* ---------- table ---------- */
table{width:100%;border-collapse:collapse}
th{font:700 9px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--faint);text-align:left;padding:12px 22px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:14px 22px;border-bottom:1px solid rgba(216,188,130,.08);vertical-align:middle}
tr:last-child td{border-bottom:none}
tbody tr:hover{background:rgba(216,188,130,.04)}
.who{display:flex;align-items:center;gap:12px}
.av{width:36px;height:36px;border-radius:12px;background:var(--raised);border:1px solid var(--line);
    color:var(--gold);font:600 13px var(--sans);display:flex;align-items:center;justify-content:center;flex:none}
.nm{font:600 13.5px var(--sans);color:var(--cream);line-height:1.3}
.em{font:400 11.5px var(--sans);color:var(--faint)}

/* ---------- pills ---------- */
.pill{display:inline-flex;align-items:center;gap:5px;font:600 10.5px var(--sans);padding:4px 10px;border-radius:99px;white-space:nowrap;border:1px solid transparent}
.pill.up{background:rgba(95,207,154,.12);color:var(--up);border-color:rgba(95,207,154,.28)}
.pill.dn{background:rgba(228,133,92,.12);color:var(--down);border-color:rgba(228,133,92,.3)}
.pill.gold{background:rgba(216,188,130,.13);color:var(--gold);border-color:var(--line-strong)}
.pill.quiet{background:rgba(246,237,228,.06);color:var(--muted);border-color:rgba(246,237,228,.12)}
.badge{display:inline-flex;align-items:center;gap:4px;font:600 10px var(--sans);color:var(--gold);
  background:rgba(216,188,130,.1);border:1px solid var(--line-strong);padding:3px 8px;border-radius:99px}
.badge svg{width:11px;height:11px}

/* ---------- controls ---------- */
.btn{background:var(--gold-solid);border:none;border-radius:12px;padding:11px 18px;
  font:600 13px var(--sans);color:#17281F;cursor:pointer;transition:filter .15s}
.btn:hover{filter:brightness(1.08)}
.btn.ghost{background:transparent;color:var(--cream);border:1px solid var(--line-strong)}
.btn.ghost:hover{background:rgba(216,188,130,.08);filter:none}
.btn.sm{padding:7px 13px;font-size:11.5px;border-radius:10px}
.btn.danger{background:transparent;color:var(--down);border:1px solid rgba(228,133,92,.4)}
.btn:disabled{opacity:.45;cursor:default}

input[type=text],input[type=search],input[type=password],input[type=email],input[type=date],input[type=datetime-local],select,textarea{
  width:100%;background:rgba(10,42,33,.6);border:1px solid var(--line);border-radius:12px;
  padding:12px 15px;font:400 13.5px var(--sans);color:var(--cream);outline:none;transition:border-color .15s}
input::placeholder{color:var(--faint)}
input:focus,select:focus,textarea:focus{border-color:var(--gold-solid)}
label{display:block;font:700 9px var(--sans);letter-spacing:1.4px;text-transform:uppercase;color:var(--muted);margin:16px 0 7px}

.chips{display:flex;gap:8px;flex-wrap:wrap;margin:14px 0}
.chip{background:transparent;border:1px solid var(--line);color:var(--muted);
  font:600 11.5px var(--sans);padding:7px 14px;border-radius:99px;cursor:pointer;transition:.15s}
.chip:hover{border-color:var(--line-strong);color:var(--cream)}
.chip.on{background:var(--gold-solid);border-color:var(--gold-solid);color:#17281F}

.row{display:flex;align-items:center;gap:12px}
.row .grow{flex:1;min-width:0}
.actions{display:flex;gap:7px;flex-wrap:wrap;justify-content:flex-end}

.banner{padding:14px 18px;border-radius:var(--r);background:rgba(216,188,130,.08);
  border:1px solid var(--line);font:400 12.5px/1.6 var(--sans);color:var(--muted);margin-bottom:18px}
.banner b{color:var(--gold);font-weight:600}
.loading,.empty{text-align:center;padding:44px 16px;font:400 13px var(--sans);color:var(--faint)}
/* ---------- iPhone safe areas ----------

   Four rules in this file are pinned to a screen edge, and on a notched device
   in standalone (viewport-fit=cover) the system draws over all four: the status
   bar and clock at the top, the home indicator at the bottom, and the notch
   cutout at the sides in landscape.

   EVERY ONE DECLARES THE PLAIN VALUE FIRST AND THE calc() SECOND. A browser
   that does not understand env() treats the calc line as invalid and DROPS IT,
   keeping the plain declaration above. Written the other way round — a single
   `padding:calc(12px + env(...)) 16px` — the whole declaration is dropped and
   the element ends up with NO padding at all, which is worse than the bug.

   Every inset is 0 off a notched device, so desktop is byte-identical. */
.toast{position:fixed;left:50%;bottom:30px;transform:translateX(-50%) translateY(90px);
  background:var(--raised);border:1px solid var(--line-strong);color:var(--cream);
  font:600 12.5px var(--sans);padding:13px 22px;border-radius:99px;box-shadow:0 14px 40px rgba(0,0,0,.45);
  transition:transform .25s;z-index:99;
  /* a toast at bottom:30px lands UNDER the ~34px home indicator */
  bottom:calc(30px + env(safe-area-inset-bottom))}
.toast.on{transform:translateX(-50%) translateY(0)}

/* ---------- mobile ---------- */
.topbar{display:none;position:sticky;top:0;z-index:40;align-items:center;gap:12px;
  padding:12px 16px;
  /* the one that sits under the notch: measured at 0-61px against a 59px
     status bar, so the logo, title and burger were all underneath it */
  padding-top:calc(12px + env(safe-area-inset-top));
  background:#0C3226;border-bottom:1px solid var(--line)}
.topbar img{width:30px;height:30px;border-radius:10px}
.topbar .tt{font:600 14px var(--serif);color:var(--cream)}
.burger{margin-left:auto;background:transparent;border:1px solid var(--line-strong);border-radius:10px;
  padding:7px 10px;cursor:pointer}
.burger svg{width:17px;height:17px;stroke:var(--cream);fill:none;stroke-width:1.8}

@media (max-width:900px){
  .topbar{display:flex}
  /* the drawer spans the full height, so its first nav item runs under the
     status bar and its "name / role" footer under the home indicator. The
     plain 22px 14px on the base .side rule is the fallback for both. */
  .side{position:fixed;inset:0 auto 0 0;z-index:50;transform:translateX(-100%);transition:transform .22s;width:270px;
    /* restated here rather than leaned on from the base rule, so the plain
       fallback and its calc override live together and cannot drift apart */
    padding:22px 14px;
    padding-top:calc(22px + env(safe-area-inset-top));
    padding-bottom:calc(22px + env(safe-area-inset-bottom));
    /* The drawer ALREADY overflowed before any of this: measured at a 560px
       viewport with every inset at 0, its content is 596px against a 560px
       box with overflow-y:visible, so the "name / role" footer was 36px below
       the fold and unreachable. The insets add 93px more and would have made
       an existing bug look like a new one. A drawer taller than the screen has
       to scroll; with the bottom inset in the padding, scrolling to the end
       leaves the footer clear of the home indicator. */
    overflow-y:auto}
  .side.open{transform:none}
  /* 50px already clears the ~34px home indicator, so the bottom is left alone
     rather than over-padded. The sides are for LANDSCAPE on a notched device,
     where the cutout takes ~44px off one edge. */
  .page{padding:18px 16px 50px;
    padding-left:calc(16px + env(safe-area-inset-left));
    padding-right:calc(16px + env(safe-area-inset-right))}
  h1{font-size:23px}
  .c{padding:16px 16px;border-radius:var(--r)}
  .chead{padding:15px 16px 12px}
  th{display:none}
  td{display:block;padding:0;border:none}
  tbody tr{display:block;padding:15px 16px;border-bottom:1px solid rgba(216,188,130,.09)}
  .actions{justify-content:flex-start;margin-top:11px}
  .mlabel{font:700 8.5px var(--sans);letter-spacing:1.3px;text-transform:uppercase;color:var(--faint);margin:11px 0 3px}
}
@media (min-width:901px){ .mlabel{display:none} }

/* ---------- legacy class names the page scripts emit ----------
   The redesign rule is presentation-only: every page keeps its <script>
   exactly as it is. Those scripts build markup with the OLD status
   vocabulary — pill draft/published/scheduled/warn/bad, and .datechip —
   which nothing above defines, so the pills would render as bare text on
   the dark ground. Mapped onto the new tokens here, in one place, rather
   than repeated in five page <style> blocks or worked around by editing
   the scripts.

   Retire these by changing the class strings in the scripts, once
   presentation and behaviour are being touched in the same pass. */
.pill.published,
.pill.up        { background:rgba(95,207,154,.12); color:var(--up); border-color:rgba(95,207,154,.28) }
.pill.bad,
.pill.dn        { background:rgba(228,133,92,.12); color:var(--down); border-color:rgba(228,133,92,.3) }
.pill.scheduled,
.pill.warn,
.pill.gold      { background:rgba(216,188,130,.13); color:var(--gold); border-color:var(--line-strong) }
.pill.draft,
.pill.quiet     { background:rgba(246,237,228,.06); color:var(--muted); border-color:rgba(246,237,228,.12) }

.datechip{
  display:inline-block; font:700 8.5px var(--sans); letter-spacing:1.4px;
  text-transform:uppercase; color:var(--faint); margin:22px 0 10px;
}

/* Editor-sheet header buttons. content.html and institute-admin.html both
   put bare <button>s in .ehead; without this they fall back to the browser
   default and render as grey chrome on the dark ground. */
.ehead button{background:rgba(216,188,130,.12);border:1px solid var(--line-strong);color:var(--cream);
  border-radius:10px;padding:8px 14px;font:600 12px var(--sans);cursor:pointer}
.ehead button:hover{background:rgba(216,188,130,.2)}

/* ---------- inline icons inside headings, chips and row bullets ---------- */
.hicon{width:15px;height:15px;stroke:var(--gold);fill:none;stroke-width:1.7;
       stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px;margin-right:7px}
.line .e svg{width:16px;height:16px;stroke:var(--gold);fill:none;stroke-width:1.7;
       stroke-linecap:round;stroke-linejoin:round}

/* Two places invert the ground to gold — an active chip and the new-article
   button — where a gold stroke would be gold-on-gold and effectively
   invisible. Follow the text colour there instead. */
.chip.on .hicon,
.newbtn .hicon{stroke:currentColor}