/* ════════════════════════════════════════════════════════════════════
   L8 OS · OFFICE + MODULES CHROME
   ──────────────────────────────────────────────────────────────────
   Mail, Calendar, Contacts, Cloud Files, Web Office, Office Accounts,
   and the Modules installer.

   Same rule as l8-apps.css: every value comes from the shell's tokens —
   var(--panel), var(--accent), var(--mono) — so changing the accent in
   Settings restyles all of this, and light mode needs no second ruleset.

   The one deliberate exception is the mail reading frame. HTML mail is
   the artefact, not the interface: it renders in its own sandboxed
   document with its own colours, because it was written by someone else
   and this OS does not get to restyle their words.
   ══════════════════════════════════════════════════════════════════ */

/* ── shared across the office apps ──────────────────────────────── */
.of-empty,.md-empty,.mail-empty{padding:34px 30px;max-width:620px;color:var(--muted);font-size:13px;line-height:1.62;}
.of-empty h3,.md-empty h3,.mail-empty h3{color:var(--text);font-size:15.5px;margin:0 0 10px;}
.of-empty p,.md-empty p,.mail-empty p{margin:0 0 11px;}
.of-cmd,.mail-cmd,.oa-cmd,.md-cmd{font-family:var(--mono);font-size:11.5px;background:var(--panel-3);
  border:1px solid var(--border-2);border-radius:8px;padding:9px 12px;margin:9px 0;
  color:var(--accent);overflow-x:auto;white-space:pre;}
.of-acts,.mail-acts,.oa-acts,.md-acts,.mb-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:13px;}
.of-acts button,.mail-acts button,.oa-acts button,.md-acts button,.mb-acts button{
  height:32px;padding:0 15px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);font-size:12.5px;}
.of-acts button:hover,.mail-acts button:hover,.oa-acts button:hover,.md-acts button:hover{border-color:var(--accent);}
.of-acts .primary,.mail-acts .primary,.oa-acts .primary,.md-acts .primary,.mb-acts .primary,
.md-c-a .primary,.cm-foot .primary{border-color:var(--accent);background:var(--accent);color:#04121c;font-weight:600;}
.of-wait,.mail-wait,.oa-wait,.md-wait{padding:26px;color:var(--dim);font-size:12.5px;}
.of-none,.mail-none,.md-note{padding:22px;color:var(--dim);font-size:12.5px;line-height:1.6;}
.of-fail,.mail-fail{margin:9px 0;padding:9px 12px;border-radius:9px;font-size:12px;line-height:1.55;
  background:rgba(251,106,130,.09);border-left:2px solid var(--red);color:var(--text);}
.of-fail button,.mail-fail button{margin-left:7px;height:22px;padding:0 9px;border-radius:6px;font-size:11px;
  border:1px solid var(--red);background:transparent;color:var(--red);}

/* ══════════════════════ MAIL ═══════════════════════════════════ */
.mail{display:grid;grid-template-columns:216px minmax(260px,360px) 1fr;height:100%;background:var(--panel-2);}
.mail-side{border-right:1px solid var(--border);background:var(--panel);display:flex;flex-direction:column;
  overflow:auto;padding:8px 7px;gap:2px;}
.mail-side-h{font-size:10px;text-transform:uppercase;letter-spacing:1.3px;color:var(--dim);
  padding:11px 9px 5px;}
.mail-a,.mail-f{display:flex;align-items:center;gap:9px;width:100%;text-align:left;padding:8px 9px;
  border-radius:9px;border:1px solid transparent;background:transparent;color:var(--muted);font-size:12.5px;}
.mail-a:hover,.mail-f:hover{background:var(--panel-3);color:var(--text);}
.mail-a.on,.mail-f.on{background:rgba(125,211,252,.13);color:var(--accent);border-color:rgba(125,211,252,.28);}
.mail-a.bad{color:var(--red);}
.mail-a span:last-child{display:flex;flex-direction:column;min-width:0;}
.mail-a b{font-size:12.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mail-a em{font-style:normal;font-size:10.5px;color:var(--dim);}
.mail-a-i{flex-shrink:0;width:19px;text-align:center;}
.mail-side-f{margin-top:auto;padding-top:10px;}
.mail-manage{width:100%;height:30px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);font-size:11.5px;}
.mail-manage:hover{border-color:var(--accent);color:var(--accent);}

.mail-list{border-right:1px solid var(--border);display:flex;flex-direction:column;min-width:0;}
.mail-bar{display:flex;gap:7px;padding:9px;border-bottom:1px solid var(--border);background:var(--panel);}
.mail-compose{height:30px;padding:0 14px;border-radius:9px;border:1px solid var(--accent);
  background:var(--accent);color:#04121c;font-size:12px;font-weight:600;flex-shrink:0;}
.mail-q{flex:1;min-width:0;height:30px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);padding:0 11px;font-size:12px;}
.mail-q:focus{outline:none;border-color:var(--accent);}
.mail-refresh{width:30px;height:30px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);flex-shrink:0;}
.mail-asof{display:flex;align-items:center;justify-content:space-between;gap:8px;padding:6px 11px;
  font-size:10.5px;color:var(--dim);border-bottom:1px solid var(--border);}
.mail-clearq{height:20px;padding:0 8px;border-radius:6px;border:1px solid var(--border-2);
  background:transparent;color:var(--muted);font-size:10.5px;}
.mail-rows{flex:1;overflow:auto;padding:6px;}
.mail-r{display:block;width:100%;text-align:left;padding:9px 11px;border-radius:10px;
  border:1px solid transparent;background:transparent;margin-bottom:2px;}
.mail-r:hover{background:var(--panel-3);}
.mail-r.on{background:rgba(125,211,252,.11);border-color:rgba(125,211,252,.26);}
.mail-r-t{display:flex;justify-content:space-between;gap:9px;align-items:baseline;}
.mail-r-t b{font-size:12.5px;color:var(--muted);font-weight:500;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.mail-r.un .mail-r-t b{color:var(--text);font-weight:700;}
.mail-r-t time{font-size:10.5px;color:var(--dim);flex-shrink:0;}
.mail-r-s{font-size:12.5px;color:var(--text);margin-top:2px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.mail-r.un .mail-r-s{font-weight:600;}
.mail-r-p{font-size:11.5px;color:var(--dim);margin-top:3px;overflow:hidden;
  text-overflow:ellipsis;white-space:nowrap;}
.mail-r-a{font-size:10px;color:var(--dim);margin-top:4px;opacity:.8;font-family:var(--mono);}
.mail-star{color:var(--amber);font-style:normal;margin-right:5px;}
.mail-clip{font-style:normal;opacity:.7;}

.mail-read{display:flex;flex-direction:column;overflow:hidden;min-width:0;}
.mail-read-b{flex:1;display:flex;flex-direction:column;overflow:auto;}
.mail-h{padding:17px 20px 13px;border-bottom:1px solid var(--border);}
.mail-h h2{font-size:17px;margin:0 0 9px;line-height:1.35;}
.mail-meta{display:flex;align-items:baseline;gap:8px;flex-wrap:wrap;font-size:12.5px;}
.mail-meta span{color:var(--muted);font-size:11.5px;}
.mail-meta time{margin-left:auto;color:var(--dim);font-size:11px;}
.mail-meta2{font-size:11px;color:var(--dim);margin-top:5px;line-height:1.55;}
.mail-meta2 em{font-style:normal;color:var(--muted);}
.mail-tools{display:flex;gap:6px;flex-wrap:wrap;margin-top:13px;}
.mail-tools button{height:27px;padding:0 11px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);font-size:11.5px;}
.mail-tools button:hover{border-color:var(--accent);color:var(--accent);}
.mail-atts{display:flex;gap:7px;flex-wrap:wrap;padding:11px 20px;border-bottom:1px solid var(--border);}
.mail-att{height:28px;padding:0 11px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);font-size:11.5px;}
.mail-att em{font-style:normal;color:var(--dim);margin-left:5px;}
.mail-body{padding:0;flex:1;display:flex;flex-direction:column;min-height:280px;}
.mail-text{margin:0;padding:17px 20px;font-family:var(--mono);font-size:12.5px;line-height:1.62;
  white-space:pre-wrap;word-break:break-word;color:var(--text);}
/* HTML mail is the artefact, not the interface — it keeps its own document
   and its own colours, because someone else wrote it */
.mail-html{flex:1;width:100%;min-height:280px;border:0;display:block;background:#0f1620;}
.mail-remote{margin:0;padding:10px 20px;font-size:11.5px;color:var(--amber);
  background:rgba(240,180,41,.08);border-top:1px solid var(--border);line-height:1.55;}
.mail-loadimg{margin-left:8px;height:23px;padding:0 10px;border-radius:7px;
  border:1px solid var(--amber);background:transparent;color:var(--amber);font-size:11px;}
.mail-err{padding:24px;color:var(--red);font-size:12.5px;}
.mail-broken{margin:0 0 11px;padding-left:19px;font-size:12.5px;line-height:1.7;}

/* ── compose ───────────────────────────────────────────────────── */
.cm{display:flex;flex-direction:column;height:100%;padding:13px;gap:8px;background:var(--panel-2);}
.cm-row{display:flex;align-items:center;gap:10px;}
.cm-row label{width:64px;flex-shrink:0;font-size:11px;text-transform:uppercase;
  letter-spacing:1.1px;color:var(--dim);}
.cm-row input,.cm-row select{flex:1;min-width:0;height:31px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--text);padding:0 11px;font-size:12.5px;}
.cm-row input:focus,.cm-row select:focus{outline:none;border-color:var(--accent);}
.cm-body{flex:1;resize:none;border-radius:11px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);padding:12px 13px;font-size:13px;line-height:1.62;
  font-family:var(--sans);}
.cm-body:focus{outline:none;border-color:var(--accent);}
.cm-foot{display:flex;align-items:center;gap:9px;}
.cm-warn{flex:1;font-size:11.5px;color:var(--amber);line-height:1.5;}
.cm-foot button{height:33px;padding:0 16px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);font-size:12.5px;}

/* ══════════════════════ OFFICE ACCOUNTS ════════════════════════ */
.oa{display:flex;flex-direction:column;height:100%;background:var(--panel-2);}
.oa-h{display:flex;align-items:center;justify-content:space-between;padding:11px 15px;
  border-bottom:1px solid var(--border);background:var(--panel);font-size:13.5px;}
.oa-re{height:27px;padding:0 12px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);font-size:11.5px;}
.oa-b{flex:1;overflow:auto;padding:14px;display:flex;flex-direction:column;gap:12px;}
.oa-card{border:1px solid var(--border);border-radius:13px;background:var(--panel);padding:15px 17px;
  font-size:12.5px;line-height:1.62;color:var(--muted);}
.oa-card.ok{border-color:rgba(52,211,153,.28);}
.oa-card.bad{border-color:rgba(251,106,130,.3);}
.oa-card p{margin:0 0 10px;}
.oa-card h4{margin:15px 0 7px;font-size:12px;color:var(--text);}
.oa-t{display:flex;align-items:center;gap:9px;margin-bottom:9px;color:var(--text);font-size:13.5px;}
.oa-dot{width:8px;height:8px;border-radius:50%;background:var(--dim);flex-shrink:0;}
.oa-dot.on{background:var(--green);box-shadow:0 0 0 3px rgba(52,211,153,.18);}
.oa-dot.off{background:var(--red);}
.oa-badge{margin-left:auto;font-size:10.5px;color:var(--dim);font-family:var(--mono);}
.oa-warn,.mi-warn{margin:9px 0;padding:9px 12px;border-radius:9px;font-size:11.5px;line-height:1.55;
  background:rgba(240,180,41,.09);border-left:2px solid var(--amber);color:var(--text);}
.oa-steps{margin:0 0 11px;padding-left:20px;line-height:1.75;}
.oa-steps code{color:var(--accent);}
.oa-reg,.oa-unlock,.mb-row{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
.oa-reg input,.oa-unlock input,.mb-row input{flex:1;min-width:160px;height:31px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--text);padding:0 11px;
  font-size:12px;font-family:var(--mono);}
.oa-reg input:focus,.oa-unlock input:focus,.mb-row input:focus{outline:none;border-color:var(--accent);}
.oa-save,.oa-unlock-go,.mb-row button{height:31px;padding:0 14px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--text);font-size:12px;}
.oa-reg-out,.oa-unlock-out,.mb-out,.mb-out2{margin-top:8px;font-size:11.5px;color:var(--muted);}
.oa-accts{list-style:none;margin:0 0 11px;padding:0;}
.oa-accts li{display:flex;align-items:center;gap:9px;flex-wrap:wrap;padding:8px 0;
  border-bottom:1px solid var(--border);font-size:12px;}
.oa-accts b{color:var(--text);}
.oa-accts em{font-style:normal;font-size:11px;color:var(--dim);}
.oa-accts em.bad{color:var(--red);}
.oa-drop{margin-left:auto;height:24px;padding:0 10px;border-radius:7px;
  border:1px solid var(--border-2);background:transparent;color:var(--muted);font-size:11px;}
.oa-drop:hover{border-color:var(--red);color:var(--red);}
.oa-scopes{margin-top:12px;border-top:1px solid var(--border);padding-top:10px;}
.oa-scopes summary{cursor:pointer;font-size:11.5px;color:var(--accent);}
.oa-scopes ul{margin:9px 0 0;padding-left:19px;line-height:1.75;font-size:11.5px;}
.oa-scopes code{color:var(--text);font-size:11px;}
.oa-note,.mi-note,.mb-note{font-size:11px;color:var(--dim);line-height:1.55;margin:8px 0 0;}
.oa-not{margin:0;padding-left:19px;line-height:1.75;font-size:12px;}

/* ══════════════════════ CALENDAR ═══════════════════════════════ */
.cal{display:flex;flex-direction:column;height:100%;background:var(--panel-2);}
.cal-bar{display:flex;align-items:center;gap:7px;padding:9px 12px;flex-wrap:wrap;
  background:var(--panel);border-bottom:1px solid var(--border);}
.cal-bar button,.cal-bar select{height:29px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--text);font-size:12px;}
.cal-bar .primary{border-color:var(--accent);background:var(--accent);color:#04121c;font-weight:600;}
.cal-range{flex:0 0 auto;min-width:190px;text-align:center;font-size:12.5px;}
.cal-asof{padding:6px 13px;font-size:10.5px;color:var(--dim);border-bottom:1px solid var(--border);}
.cal-fail{color:var(--red);}
.cal-b{flex:1;overflow:auto;padding:10px;display:flex;flex-direction:column;gap:5px;}
.cal-day{display:grid;grid-template-columns:64px 1fr;gap:12px;padding:9px 11px;border-radius:11px;
  border:1px solid var(--border);background:var(--panel);}
.cal-day.idle{opacity:.55;}
.cal-day.now{border-color:var(--accent);background:rgba(125,211,252,.06);}
.cal-d-h{text-align:center;}
.cal-d-h b{display:block;font-size:10.5px;text-transform:uppercase;letter-spacing:1.2px;color:var(--dim);}
.cal-d-h span{font-size:21px;font-weight:300;}
.cal-d-b{display:flex;flex-direction:column;gap:4px;min-width:0;}
.cal-e{display:flex;align-items:baseline;gap:9px;padding:6px 9px;border-radius:8px;
  background:var(--panel-3);font-size:12.5px;flex-wrap:wrap;}
.cal-e time{font-family:var(--mono);font-size:11px;color:var(--accent);flex-shrink:0;}
.cal-e em{font-style:normal;font-size:11px;color:var(--dim);}
.cal-e-a{margin-left:auto;font-size:10px;color:var(--dim);font-family:var(--mono);}
.cal-none{color:var(--dim);font-size:12px;padding:4px 0;}

/* ══════════════════════ CONTACTS ═══════════════════════════════ */
.ct{display:flex;flex-direction:column;height:100%;background:var(--panel-2);}
.ct-bar{display:flex;gap:7px;padding:9px 12px;background:var(--panel);border-bottom:1px solid var(--border);}
.ct-q{flex:1;height:30px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);padding:0 11px;font-size:12px;}
.ct-q:focus{outline:none;border-color:var(--accent);}
.ct-re{width:30px;height:30px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);}
.ct-asof{padding:6px 13px;font-size:10.5px;color:var(--dim);border-bottom:1px solid var(--border);}
.ct-b{flex:1;overflow:auto;padding:9px;}
.ct-c{display:flex;align-items:center;gap:12px;padding:9px 11px;border-radius:11px;
  border:1px solid transparent;}
.ct-c:hover{background:var(--panel);border-color:var(--border);}
.ct-av{width:34px;height:34px;border-radius:50%;flex-shrink:0;display:grid;place-items:center;
  background:rgba(125,211,252,.15);color:var(--accent);font-weight:600;font-size:14px;}
.ct-i{display:flex;flex-direction:column;min-width:0;gap:1px;}
.ct-i b{font-size:13px;}
.ct-i em{font-style:normal;font-size:11px;color:var(--muted);}
.ct-i span{font-size:11.5px;color:var(--dim);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.ct-mail{margin-left:auto;height:26px;padding:0 12px;border-radius:8px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--muted);font-size:11.5px;}
.ct-mail:hover{border-color:var(--accent);color:var(--accent);}
.ct-src{font-size:10px;color:var(--dim);width:66px;text-align:right;flex-shrink:0;}

/* ══════════════════════ CLOUD FILES ════════════════════════════ */
.cf{display:flex;flex-direction:column;height:100%;background:var(--panel-2);}
.cf-bar{display:flex;gap:7px;padding:9px 12px;background:var(--panel);
  border-bottom:1px solid var(--border);flex-wrap:wrap;}
.cf-bar select,.cf-bar button{height:30px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-2);background:var(--panel-3);color:var(--text);font-size:12px;}
.cf-bar .primary{border-color:var(--accent);background:var(--accent);color:#04121c;font-weight:600;margin-left:auto;}
.cf-asof{padding:6px 13px;font-size:10.5px;color:var(--dim);border-bottom:1px solid var(--border);}
.cf-scope code{color:var(--accent);}
.cf-b{flex:1;overflow:auto;padding:8px;}
.cf-f{display:flex;align-items:center;gap:12px;width:100%;text-align:left;padding:9px 12px;
  border-radius:10px;border:1px solid transparent;background:transparent;color:var(--text);}
.cf-f:hover{background:var(--panel);border-color:var(--border);}
.cf-ic{font-size:16px;width:22px;flex-shrink:0;}
.cf-n{display:flex;flex-direction:column;min-width:0;}
.cf-n b{font-size:12.5px;font-weight:500;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.cf-n em{font-style:normal;font-size:10.5px;color:var(--dim);}
.cf-go{margin-left:auto;font-size:11px;color:var(--accent);opacity:0;flex-shrink:0;}
.cf-f:hover .cf-go{opacity:1;}

/* ══════════════════════ WEB OFFICE ═════════════════════════════ */
.wo{height:100%;overflow:auto;padding:16px;background:var(--panel-2);}
.wo-h b{display:block;font-size:14px;}
.wo-h span{display:block;font-size:11.5px;color:var(--muted);line-height:1.6;margin:6px 0 16px;max-width:640px;}
.wo-g h4{font-size:10.5px;text-transform:uppercase;letter-spacing:1.3px;color:var(--dim);margin:16px 0 9px;}
.wo-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(178px,1fr));gap:8px;}
.wo-t{display:flex;flex-direction:column;align-items:flex-start;gap:4px;padding:12px 13px;
  border-radius:11px;border:1px solid var(--border);background:var(--panel);color:var(--text);text-align:left;}
.wo-t:hover{border-color:var(--accent);background:var(--panel-3);}
.wo-i{font-size:17px;}
.wo-t b{font-size:12.5px;}
.wo-t em{font-style:normal;font-size:10.5px;color:var(--dim);line-height:1.45;}
.wo-f{margin-top:20px;font-size:11px;color:var(--dim);line-height:1.6;max-width:640px;}

/* ══════════════════════ MODULES ════════════════════════════════ */
.md{display:flex;flex-direction:column;height:100%;background:var(--panel-2);position:relative;}
.md-tabs{display:flex;align-items:center;gap:4px;padding:9px 11px;
  background:var(--panel);border-bottom:1px solid var(--border);}
.md-t{height:28px;padding:0 13px;border-radius:9px;border:1px solid transparent;
  background:transparent;color:var(--muted);font-size:12px;}
.md-t:hover{background:var(--panel-3);color:var(--text);}
.md-t.on{background:rgba(125,211,252,.13);color:var(--accent);border-color:rgba(125,211,252,.28);}
.md-sp{flex:1;}
.md-open{height:28px;padding:0 13px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);font-size:12px;}
.md-b{flex:1;overflow:auto;padding:13px;display:flex;flex-direction:column;gap:11px;}
.md-drop{position:absolute;inset:0;display:none;place-items:center;background:rgba(8,11,18,.9);
  border:2px dashed var(--accent);border-radius:12px;color:var(--accent);font-size:15px;z-index:5;}
.md-drop.on{display:grid;}

.md-c{border:1px solid var(--border);border-radius:13px;background:var(--panel);padding:14px 16px;}
.md-c.off{opacity:.62;}
.md-c.bad{border-color:rgba(251,106,130,.35);}
.md-c-h{display:flex;align-items:center;gap:12px;}
.md-ic{font-size:21px;width:28px;text-align:center;flex-shrink:0;}
.md-c-n{min-width:0;flex:1;}
.md-c-n b{display:block;font-size:13.5px;}
.md-c-n b em{font-style:normal;font-weight:400;color:var(--dim);font-size:11.5px;margin-left:5px;}
.md-c-n span{display:block;font-size:10.5px;color:var(--dim);font-family:var(--mono);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-d{font-size:12px;color:var(--muted);line-height:1.6;margin:10px 0 0;}
.md-meta{display:flex;gap:14px;flex-wrap:wrap;margin-top:10px;font-size:11px;color:var(--dim);}
.md-meta .good{color:var(--green);}
.md-meta .bad{color:var(--red);font-weight:600;}
.md-perms{display:flex;gap:5px;flex-wrap:wrap;margin-top:9px;}
.md-perms i{font-style:normal;font-size:10.5px;padding:2px 8px;border-radius:99px;
  font-family:var(--mono);border:1px solid var(--border-2);color:var(--dim);}
.md-perms i.on{border-color:rgba(52,211,153,.4);color:var(--green);}
.md-perms i.off{border-color:rgba(251,106,130,.35);color:var(--red);text-decoration:line-through;}
.md-perms i.none{border-style:dashed;}
.md-c-a{display:flex;gap:6px;flex-wrap:wrap;margin-top:12px;}
.md-c-a button{height:27px;padding:0 12px;border-radius:8px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--muted);font-size:11.5px;}
.md-c-a button:hover{border-color:var(--accent);color:var(--accent);}
.md-c-a .md-rm:hover{border-color:var(--red);color:var(--red);}
.md-sw{position:relative;width:38px;height:21px;flex-shrink:0;}
.md-sw input{opacity:0;width:100%;height:100%;margin:0;cursor:pointer;}
.md-sw span{position:absolute;inset:0;border-radius:99px;background:var(--panel-3);
  border:1px solid var(--border-2);pointer-events:none;transition:background .14s;}
.md-sw span::after{content:'';position:absolute;top:2px;left:2px;width:15px;height:15px;
  border-radius:50%;background:var(--dim);transition:transform .14s,background .14s;}
.md-sw input:checked+span{background:rgba(52,211,153,.2);border-color:var(--green);}
.md-sw input:checked+span::after{transform:translateX(17px);background:var(--green);}

.md-log-h{font-size:11.5px;color:var(--muted);line-height:1.6;max-width:640px;}
.md-log{display:flex;flex-direction:column;gap:3px;}
.md-le{display:grid;grid-template-columns:74px 150px 1fr;gap:10px;padding:7px 11px;border-radius:8px;
  background:var(--panel);border-left:2px solid var(--border-2);font-size:11.5px;align-items:baseline;}
.md-le.no{border-left-color:var(--amber);}
.md-le.bad{border-left-color:var(--red);}
.md-le time{font-family:var(--mono);font-size:10.5px;color:var(--dim);}
.md-le b{font-family:var(--mono);font-size:10.5px;color:var(--muted);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.md-le span{color:var(--text);line-height:1.5;}

.mb{max-width:660px;font-size:12.5px;color:var(--muted);line-height:1.62;}
.mb h3{color:var(--text);font-size:13.5px;margin:20px 0 8px;}
.mb h3:first-child{margin-top:0;}
.mb p{margin:0 0 10px;}
.mb code{color:var(--accent);}
.mb-seal{display:flex;align-items:center;gap:8px;margin-top:10px;font-size:12px;}
.mb-out .good,.mb-out2 .good{color:var(--green);line-height:1.6;}
.mb-out .bad,.mb-out2 .bad{color:var(--red);line-height:1.6;}
.mb-out code{font-size:10.5px;word-break:break-all;}

/* ── the install consent sheet ─────────────────────────────────── */
.mi{font-size:12.5px;color:var(--muted);line-height:1.6;}
.mi-top{display:flex;align-items:center;gap:12px;margin-bottom:11px;}
.mi-ico{font-size:26px;width:34px;text-align:center;}
.mi-top b{font-size:14.5px;color:var(--text);}
.mi-top b em{font-style:normal;font-weight:400;color:var(--dim);font-size:12px;}
.mi-id{display:block;font-size:10.5px;color:var(--dim);font-family:var(--mono);}
.mi-d{margin:0 0 13px;}
.mi-facts{display:flex;flex-direction:column;gap:7px;padding:11px 13px;border-radius:11px;
  background:var(--panel-3);border:1px solid var(--border);margin-bottom:14px;}
.mi-facts>div{display:grid;grid-template-columns:82px 1fr;gap:10px;font-size:11.5px;align-items:baseline;}
.mi-facts b{color:var(--dim);font-weight:500;font-size:10.5px;text-transform:uppercase;letter-spacing:1px;}
.mi-facts .good{color:var(--green);}
.mi-facts .bad{color:var(--red);font-weight:600;}
.mi-facts code{grid-column:2;font-size:10px;color:var(--dim);word-break:break-all;}
.mi-h{font-size:12px;color:var(--text);margin:0 0 9px;}
.mi-perms{display:flex;flex-direction:column;gap:5px;}
.mi-perm{display:grid;grid-template-columns:auto 1fr auto;gap:10px;align-items:center;
  padding:9px 12px;border-radius:10px;background:var(--panel-3);border:1px solid var(--border);cursor:pointer;}
.mi-perm.high{border-color:rgba(240,180,41,.4);}
.mi-perm input{margin:0;width:15px;height:15px;}
.mi-perm b{display:block;font-size:12px;color:var(--text);font-family:var(--mono);}
.mi-perm em{display:block;font-style:normal;font-size:11px;color:var(--dim);line-height:1.45;}
.mi-perm i{font-style:normal;font-size:9.5px;text-transform:uppercase;letter-spacing:1px;color:var(--dim);}
.mi-perm.high i{color:var(--amber);}
.mi-none{padding:11px;color:var(--dim);}
.mi-src{margin-top:13px;}
.mi-view{height:29px;padding:0 13px;border-radius:9px;border:1px solid var(--border-2);
  background:var(--panel-3);color:var(--text);font-size:12px;}

.ms{display:flex;flex-direction:column;height:100%;background:var(--panel-2);}
.ms-tabs{display:flex;gap:3px;padding:8px;overflow-x:auto;background:var(--panel);
  border-bottom:1px solid var(--border);}
.ms-t{height:26px;padding:0 11px;border-radius:8px;border:1px solid transparent;background:transparent;
  color:var(--muted);font-size:11.5px;font-family:var(--mono);white-space:nowrap;}
.ms-t.on{background:rgba(125,211,252,.13);color:var(--accent);}
.ms-code{flex:1;overflow:auto;margin:0;padding:15px 17px;font-family:var(--mono);font-size:11.5px;
  line-height:1.65;white-space:pre;color:var(--text);}

/* ── a module's own window ─────────────────────────────────────── */
.mdx{display:flex;flex-direction:column;height:100%;}
.mdx-f{flex:1;width:100%;border:0;background:#0c121a;}
.mdx-bar{display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:5px 11px;background:var(--panel);border-top:1px solid var(--border);font-size:10px;color:var(--dim);}
.mdx-p{font-family:var(--mono);opacity:.85;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mdx-err{padding:22px;font-size:12.5px;color:var(--muted);line-height:1.6;}
.mdx-err b{color:var(--red);display:block;margin-bottom:9px;}
.mdx-err pre{background:var(--panel-3);border-radius:9px;padding:11px;font-size:11.5px;
  overflow-x:auto;color:var(--text);}

/* ── narrow windows · all of this stays usable ─────────────────── */
@media (max-width:900px){
  /* the three panes stay reachable by scrolling rather than one of them
     being hidden — a mail client with no reading pane is not a smaller
     mail client, it is a broken one */
  .mail{grid-template-columns:190px 290px 480px;overflow-x:auto;}
  .cal-day{grid-template-columns:52px 1fr;}
  .md-le{grid-template-columns:1fr;gap:2px;}
  .mi-facts>div{grid-template-columns:1fr;gap:2px;}
  .mi-facts code{grid-column:1;}
}