/* ============================================================
   TechSyntar Admin Console — layered on styles.css tokens
   ============================================================ */
.admin-body{min-height:100vh;}
.btn--block{width:100%;justify-content:center;}
.btn{line-height:1.4;}
.btn--sm{padding:.5em 1em;font-size:.88rem;border-radius:11px;box-shadow:0 3px 0 var(--edge),0 5px 12px rgba(20,30,80,.14);}
.btn--sm:active{box-shadow:0 1px 0 var(--edge);}

/* ---------- form fields ---------- */
.afield{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.82rem;color:var(--navy);letter-spacing:.01em;}
.afield input,.afield select{
  font-family:var(--font-body);font-size:1rem;font-weight:500;color:var(--ink);
  padding:.72em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  transition:border-color .15s ease,box-shadow .15s ease;width:100%;
}
.afield input:focus,.afield select:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.pw-wrap{position:relative;display:block;}
.pw-wrap input{padding-right:2.6em;}
.pw-toggle{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:none;background:none;cursor:pointer;font-size:1.05rem;padding:6px;opacity:.7;}
.pw-toggle:hover{opacity:1;}
.form-err{color:var(--red);font-weight:700;font-size:.88rem;margin:0;}
.form-ok{color:#2f9e6f;font-weight:700;font-size:.88rem;margin:0;}

/* ============================================================
   LOGIN
   ============================================================ */
.login{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:28px;
  background:
    radial-gradient(60% 60% at 85% 10%,rgba(198,57,43,.10),transparent 70%),
    radial-gradient(60% 60% at 10% 90%,rgba(30,42,107,.12),transparent 70%),
    var(--bg);}
.login__card{width:100%;max-width:420px;background:var(--card);border:1px solid var(--line);
  border-radius:24px;box-shadow:var(--shadow-lg);padding:34px 32px 26px;}
.login__brand{display:flex;align-items:center;gap:12px;color:var(--ink);margin-bottom:22px;}
.login__brand img{border-radius:12px;box-shadow:var(--shadow-sm);}
.login__brand span{display:flex;flex-direction:column;line-height:1.05;}
.login__brand strong{font-family:var(--font-head);font-size:1.18rem;color:var(--navy);}
.login__brand em{font-style:normal;font-size:.76rem;color:var(--red);font-weight:700;}
.login h1{font-family:var(--font-head);font-size:2rem;color:var(--navy);}
.login__sub{color:var(--muted);margin:8px 0 22px;font-size:.98rem;}
.login form{display:flex;flex-direction:column;gap:16px;}
.login form .btn{margin-top:4px;}
.login__note{font-size:.8rem;color:var(--muted);text-align:center;margin:18px 0 10px;line-height:1.4;}
.login__back{display:block;text-align:center;font-weight:700;font-size:.9rem;}

/* ============================================================
   APP SHELL
   ============================================================ */
.app{display:flex;flex-direction:column;min-height:100vh;}
.abar{display:flex;align-items:center;gap:18px;padding:10px 20px;position:sticky;top:0;z-index:20;
  background:linear-gradient(180deg,#1e2a6b,#182158);color:#fff;box-shadow:var(--shadow-md);}
.abar__brand{display:flex;align-items:center;gap:9px;color:#fff;
  font-family:var(--font-head);font-size:1.05rem;
  flex:0 0 auto;min-width:max-content;}
.abar__brand span{white-space:nowrap;}
.abar__brand img{border-radius:9px;flex:0 0 auto;}
.atabs{display:flex;gap:4px;margin:0 auto 0 10px;flex-wrap:wrap;}
.atab{font-family:var(--font-body);font-weight:700;font-size:.94rem;color:#c3cbf0;background:none;border:none;
  padding:9px 15px;border-radius:11px;cursor:pointer;transition:background .15s ease,color .15s ease;}
.atab:hover{background:rgba(255,255,255,.12);color:#fff;}
.atab.is-active{background:#fff;color:var(--navy);}
.abar__user{display:flex;align-items:center;gap:12px;margin-left:auto;
  flex:0 0 auto;min-width:max-content;}
.who{font-size:.9rem;color:#dfe3f4;font-weight:600;}
.rolebadge{font-size:.72rem;font-weight:800;letter-spacing:.04em;text-transform:uppercase;
  background:#e23b2e;color:#fff;padding:4px 10px;border-radius:999px;
  white-space:nowrap;flex:0 0 auto;}
.abar__user .btn--ghost{--edge:rgba(0,0,0,.25);background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}
.abar__user .btn--ghost:hover{background:rgba(255,255,255,.28);}

.apanel{padding:32px clamp(20px,4vw,52px) 60px;max-width:1180px;width:100%;margin:0 auto;flex:1;}
.tabview{display:none;animation:rise .25s ease;}
.tabview.is-active{display:block;}
.view-head{margin-bottom:24px;max-width:760px;}
.view-head h1{font-family:var(--font-head);font-size:clamp(1.7rem,3vw,2.4rem);color:var(--navy);}
.view-head p{color:var(--muted);margin:10px 0 0;font-size:1.02rem;}

.acard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);}
.acard h2{font-family:var(--font-head);font-size:1.2rem;color:var(--navy);margin-bottom:16px;}

/* ---------- analytics ---------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;margin-bottom:26px;}
.statbox{background:var(--card);border:1px solid var(--line);border-radius:16px;padding:18px 20px;box-shadow:var(--shadow-sm);}
.statbox strong{font-family:var(--font-head);font-size:2rem;color:var(--navy);display:block;line-height:1;}
.statbox span{font-size:.82rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.05em;}
.statbox em{font-style:normal;color:#2f9e6f;font-weight:800;font-size:.82rem;}
.analytics-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:18px;}
.tool-tabs{margin-bottom:20px;}
.tool-pick{display:inline-flex;align-items:center;gap:12px;background:var(--card);
  border:1.5px solid var(--line);border-radius:12px;padding:8px 14px;
  box-shadow:var(--shadow-sm);max-width:100%;}
.tool-pick__l{font-size:.68rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);flex:0 0 auto;}
.tool-pick__w{display:inline-flex;align-items:center;gap:9px;min-width:0;}
.tool-pick__w .dot{width:11px;height:11px;border-radius:50%;background:var(--d,#1e2a6b);
  flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--d) 22%,transparent);}
.tool-pick select{font-family:var(--font-body);font-weight:800;font-size:1rem;
  color:var(--navy);background:transparent;border:none;cursor:pointer;
  min-width:0;max-width:100%;padding:2px 0;}
.tool-pick select:focus-visible{outline:2px solid #2f6bfe;outline-offset:3px;border-radius:6px;}
.tool-pick__n{font-size:.78rem;color:var(--muted);font-weight:600;flex:0 0 auto;
  padding-left:12px;border-left:1px solid var(--line);}
.tool-detail{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);}
.tool-detail__head{display:flex;align-items:center;gap:10px;margin-bottom:18px;}
.tool-detail__head .dot{width:14px;height:14px;border-radius:50%;background:var(--d,#1e2a6b);}
.tool-detail__head h3{font-family:var(--font-head);font-size:1.35rem;color:var(--navy);}
.tool-detail__head a{margin-left:auto;font-size:.85rem;font-weight:700;}
.spark-lg{display:flex;align-items:flex-end;gap:4px;height:120px;margin-top:16px;}
.spark-lg i{flex:1;background:linear-gradient(180deg,#5b8cff,#2f6bfe);border-radius:4px 4px 0 0;min-height:3px;position:relative;}
.spark-cap{display:flex;justify-content:space-between;font-size:.72rem;color:var(--muted);font-weight:600;margin-top:6px;}
.empty-note{color:var(--muted);font-size:.92rem;margin-top:16px;padding:14px;border:1px dashed var(--line);border-radius:12px;}

/* ---------- site editor ---------- */
.site-sub{margin-bottom:20px;flex-wrap:wrap;}
.site-sub button,#srcPick button{font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--navy);
  background:none;border:none;padding:8px 15px;border-radius:999px;cursor:pointer;transition:.15s;}
.site-sub button:hover,#srcPick button:hover{background:rgba(30,42,107,.10);}
.site-sub button.is-on,#srcPick button.is-on{background:var(--navy);color:#fff;}
#srcPick{margin-bottom:2px;}
.site-pane[data-pane="history"].is-on{grid-template-columns:1fr;gap:18px;}
.danger-card{border-color:rgba(192,57,43,.35);background:linear-gradient(160deg,#fffdf8,#fdf1ee);}
.logrow{display:flex;align-items:center;gap:14px;padding:12px 0;border-bottom:1px solid var(--line);font-size:.9rem;}
.logrow:last-child{border-bottom:none;}
.logrow .lk{font-weight:800;color:var(--navy);min-width:96px;}
.logrow .lwhen{color:var(--muted);font-size:.84rem;margin-left:auto;white-space:nowrap;}
.logrow .lnote{color:var(--red);font-weight:700;}
.logrow .lwho{color:var(--muted);font-size:.84rem;}
.kchip{display:inline-block;background:rgba(30,42,107,.08);color:var(--navy);font-weight:700;
  font-size:.76rem;padding:3px 9px;border-radius:999px;margin-right:5px;}

.acctrow{border:1px solid var(--line);border-radius:14px;padding:14px;margin-bottom:12px;background:rgba(30,42,107,.02);}

/* ---------- tool database cards ---------- */
.srccard{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;margin-bottom:14px;box-shadow:var(--shadow-sm);}
.srccard__top{display:flex;align-items:center;gap:10px;margin-bottom:14px;flex-wrap:wrap;}
.srccard__top .dot{width:12px;height:12px;border-radius:50%;background:var(--d,#1e2a6b);box-shadow:0 0 0 3px color-mix(in srgb,var(--d) 20%,transparent);}
.srccard__top strong{color:var(--navy);font-size:1rem;}
.srcid{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.76rem;background:rgba(30,42,107,.08);
  color:var(--muted);padding:2px 8px;border-radius:6px;}
.srccard__top .status{margin-left:auto;font-size:.7rem;font-weight:800;text-transform:uppercase;
  letter-spacing:.04em;padding:4px 10px;border-radius:999px;}
.srcmsg{font-size:.82rem;font-weight:700;}

/* ---------- native tool boards ---------- */
.nboard{display:flex;flex-direction:column;gap:18px;margin-top:22px;}
.nb-head h3{font-family:var(--font-head);font-size:1.45rem;color:var(--navy);}
.nb-head p{color:var(--muted);margin:6px 0 0;font-size:.98rem;}
.nb-cols{display:grid;grid-template-columns:1fr 1fr;gap:18px;align-items:start;}
.nb-h4{font-family:var(--font-head);font-size:1rem;color:var(--navy);margin-bottom:12px;}
.nb{margin-bottom:14px;}
.nb-top{display:flex;justify-content:space-between;align-items:baseline;gap:8px;}
.nb-top b{color:var(--navy);font-size:.95rem;}
.nb-top span{color:var(--muted);font-weight:700;font-size:.82rem;}
.nb-bar{background:rgba(30,42,107,.09);border-radius:999px;height:10px;overflow:hidden;margin:6px 0 3px;}
.nb-bar>i{display:block;height:100%;border-radius:999px;transition:width .6s ease;}
.nb-sub{color:var(--muted);font-size:.8rem;font-weight:600;}
.nb-plans{display:flex;flex-wrap:wrap;gap:12px;}
.planchip{background:rgba(47,107,254,.08);border:1px solid var(--line);border-radius:14px;padding:12px 16px;
  display:flex;flex-direction:column;min-width:120px;}
.planchip strong{font-family:var(--font-head);font-size:1.5rem;color:var(--navy);line-height:1;}
.planchip span{font-size:.8rem;color:var(--muted);font-weight:700;margin-top:4px;}
.nb-tbl{overflow-x:auto;}
.nb-tbl table{width:100%;border-collapse:collapse;font-size:.9rem;}
.nb-tbl th{text-align:left;font-size:.7rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted);padding:8px 10px;border-bottom:2px solid var(--line);}
.nb-tbl td{padding:9px 10px;border-bottom:1px solid var(--line);font-weight:600;color:var(--ink);}
@media (max-width:900px){ .nb-cols{grid-template-columns:1fr;} }
.pane-hint code{word-break:break-all;}
.logrow .lrestore{border:none;background:rgba(30,42,107,.08);color:var(--navy);font-weight:700;font-size:.8rem;
  padding:6px 12px;border-radius:999px;cursor:pointer;}
.logrow .lrestore:hover{background:var(--navy);color:#fff;}
.site-pane{display:none;}
.site-pane.is-on{display:grid;grid-template-columns:1.25fr .75fr;gap:20px;align-items:start;}
.site-pane[data-pane="content"].is-on,
.site-pane[data-pane="css"].is-on,
.site-pane[data-pane="js"].is-on,
.site-pane[data-pane="keys"].is-on,
.site-pane[data-pane="source"].is-on{grid-template-columns:1fr;}
/* grid/flex children must be allowed to shrink below min-content */
.site-pane.is-on > *{min-width:0;}
.pane-hint{color:var(--muted);font-size:.9rem;margin:-6px 0 14px;line-height:1.5;}
.pane-hint code{background:rgba(30,42,107,.08);padding:2px 6px;border-radius:6px;font-size:.86em;}
.swatch-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:14px;}
.sw{display:flex;flex-direction:column;gap:6px;font-weight:700;font-size:.8rem;color:var(--navy);}
.sw input[type=color]{width:100%;height:42px;border:1.5px solid var(--line);border-radius:12px;background:#fff;cursor:pointer;padding:3px;}
.theme-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;}
.rng-val{font-weight:800;color:var(--muted);}
.theme-row input[type=range]{width:100%;accent-color:#2f6bfe;}
.site-preview .prev{border:1px solid var(--line);border-radius:var(--radius);padding:22px;display:flex;flex-direction:column;gap:10px;}
.prev-kicker{font-size:.72rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;}
.prev-title{font-size:1.6rem;line-height:1.1;}
.prev-body{font-size:.94rem;margin:0;}
.prev-btn{align-self:flex-start;font-weight:700;font-size:.9rem;padding:.6em 1.2em;border-radius:12px;color:#fff;}
#contentFields{display:flex;flex-direction:column;gap:14px;margin-bottom:18px;}
#contentFields textarea{font-family:var(--font-body);font-size:.95rem;padding:.7em .9em;border:1.5px solid var(--line);border-radius:12px;resize:vertical;min-height:70px;width:100%;color:var(--ink);}
#contentFields textarea:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.code{width:100%;min-height:320px;font-family:ui-monospace,"SF Mono",Menlo,Consolas,monospace;font-size:.85rem;line-height:1.6;
  padding:14px;border:1.5px solid var(--line);border-radius:14px;background:#12172e;color:#e6ebff;resize:vertical;margin-bottom:14px;}
.code:focus{outline:none;border-color:#2f6bfe;}
.code--ro{max-height:520px;overflow:auto;white-space:pre;margin:14px 0 0;tab-size:2;}

/* ---------- code editor ---------- */
.editor{margin-top:14px;border:1.5px solid var(--line);border-radius:14px;overflow:hidden;background:#12172e;}
.ed-bar{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;background:#1b2140;border-bottom:1px solid rgba(255,255,255,.10);}
.ed-bar button{font-family:var(--font-body);font-weight:700;font-size:.82rem;color:#dfe3f4;background:rgba(255,255,255,.10);
  border:none;padding:7px 12px;border-radius:9px;cursor:pointer;transition:.15s;}
.ed-bar button:hover{background:rgba(255,255,255,.22);color:#fff;}
.ed-bar button.is-on{background:#2f6bfe;color:#fff;}
.ed-bar .ed-primary{background:#2f6bfe;color:#fff;}
.ed-bar .ed-primary:hover{background:#4a80ff;}
.ed-sep{width:1px;height:20px;background:rgba(255,255,255,.16);margin:0 4px;}
.ed-find{display:flex;flex-wrap:wrap;align-items:center;gap:6px;padding:8px 10px;background:#171d38;border-bottom:1px solid rgba(255,255,255,.10);}
.ed-find[hidden]{display:none;}
.ed-in{font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;color:#e6ebff;background:#0d1226;
  border:1px solid rgba(255,255,255,.16);border-radius:8px;padding:7px 10px;min-width:150px;}
.ed-in:focus{outline:none;border-color:#2f6bfe;}
.ed-find button{font-family:var(--font-body);font-weight:700;font-size:.8rem;color:#dfe3f4;background:rgba(255,255,255,.10);
  border:none;padding:7px 11px;border-radius:8px;cursor:pointer;}
.ed-find button:hover{background:rgba(255,255,255,.22);}
.ed-count{font-size:.78rem;color:#9aa4cc;font-weight:700;margin-left:2px;}
.ed-x{margin-left:auto;}
.ed-body{display:flex;height:480px;}
.ed-gutter{flex:0 0 auto;min-width:3.6em;padding:12px 10px 12px 0;text-align:right;overflow:hidden;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.82rem;line-height:1.65;color:#5d6790;
  background:#0f1428;border-right:1px solid rgba(255,255,255,.10);white-space:pre;user-select:none;}
.ed-wrap{position:relative;flex:1;overflow:hidden;}
.ed-hl,.ed-ta{margin:0;padding:12px 14px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.65;white-space:pre;tab-size:2;}
.ed-hl{position:absolute;inset:0;pointer-events:none;color:#e6ebff;overflow:visible;}
.ed-ta{position:absolute;inset:0;width:100%;height:100%;border:none;resize:none;background:transparent;
  color:transparent;caret-color:#ffcb3d;overflow:auto;}
.ed-ta:focus{outline:none;}
.editor.is-wrapped .ed-hl,.editor.is-wrapped .ed-ta{white-space:pre-wrap;word-break:break-word;}
/* fold view */
.ed-fold{position:absolute;inset:0;overflow:auto;padding:12px 0;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:.82rem;line-height:1.65;color:#e6ebff;}
.ed-fold[hidden]{display:none;}
.fl{display:flex;align-items:flex-start;white-space:pre;}
.fl.is-hidden{display:none;}
.fl-n{flex:0 0 auto;min-width:3.4em;padding-right:.7em;text-align:right;color:#5d6790;user-select:none;}
.fl-t{flex:0 0 auto;width:1.4em;text-align:center;color:#6b7699;user-select:none;}
.fl-t.can{cursor:pointer;color:#7fd4ff;}
.fl-t.can:hover{color:#fff;}
.fl-c{flex:1;}
.fl.is-collapsed .fl-c::after{content:" \\2026";color:#7c86a8;background:rgba(127,212,255,.14);
  border-radius:5px;padding:0 6px;margin-left:6px;}
.ed-status{padding:7px 12px;background:#1b2140;border-top:1px solid rgba(255,255,255,.10);
  font-size:.76rem;color:#9aa4cc;font-weight:600;}
/* token colours */
.ed-hl i{font-style:normal;}
.c-com{color:#7c86a8;font-style:italic;}
.c-str{color:#8ee38a;}
.c-kw{color:#ff8fa3;font-weight:700;}
.c-num{color:#ffcb3d;}
.c-fn{color:#7fd4ff;}
.c-tag{color:#ff8fa3;}
.c-attr{color:#ffcb3d;}
.c-punc{color:#8891b8;}
.c-prop{color:#7fd4ff;}
.c-at{color:#c9a3ff;font-weight:700;}
.c-var{color:#c9a3ff;}
@media (max-width:700px){ .ed-body{height:360px;} }
.code--ro .lnum{display:none;}
@media (max-width:900px){ .site-pane.is-on{grid-template-columns:1fr;} }

/* ---------- geo maps ---------- */
.geo-sec{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:24px;box-shadow:var(--shadow-sm);margin-bottom:22px;}
.geo-sec--tool{background:linear-gradient(170deg,#fffdf8,#f7efe2);}
.geo-sec__head{display:flex;flex-wrap:wrap;gap:14px;align-items:flex-start;justify-content:space-between;margin-bottom:18px;}
.geo-sec__head h3{font-family:var(--font-head);font-size:1.3rem;color:var(--navy);}
.geo-sec__head p{margin:5px 0 0;color:var(--muted);font-size:.9rem;max-width:520px;}
.geo-sec__chart{margin:18px 0 22px;}
.seg-per{display:inline-flex;background:rgba(30,42,107,.07);border-radius:999px;padding:4px;gap:2px;}
.per-opt{font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--navy);background:none;border:none;
  padding:7px 14px;border-radius:999px;cursor:pointer;transition:.15s;}
.per-opt:hover{background:rgba(30,42,107,.10);}
.per-opt.is-active{background:var(--navy);color:#fff;}
.cmp{display:block;margin-top:6px;font-size:.8rem;font-weight:800;}
.cmp small{display:block;font-weight:600;font-size:.72rem;color:var(--muted);margin-top:1px;}
.cmp.up{color:#2f9e6f;}
.cmp.down{color:var(--red);}
.cmp.flat{color:var(--muted);}
.map-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:18px;margin-top:20px;}
.map-card{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:18px;box-shadow:var(--shadow-sm);}
.map-card--wide{padding:20px;background:#fffdf8;}
.map-card h4{font-family:var(--font-head);font-size:1.02rem;color:var(--navy);margin-bottom:3px;}
.map-card .map-sub{font-size:.8rem;color:var(--muted);font-weight:600;margin:0 0 12px;}
.map-holder{width:100%;aspect-ratio:2/1.05;background:linear-gradient(165deg,#dceafc,#c9dcf7);border-radius:14px;overflow:hidden;}
.map-holder--big{aspect-ratio:960/440;}
.map-holder svg{width:100%;height:100%;display:block;}
.map-holder .land{fill:#cbb98f;stroke:#8d7a52;stroke-width:.8;}
.map-holder .land.has-hits{fill:#2f6bfe;stroke:#1c47c9;stroke-width:.9;}
.map-holder .hit{fill:#12235c;fill-opacity:.85;stroke:#fff;stroke-width:1.4;}
.map-holder .hit.tool{fill:#8c1e12;}
.geo-sec--tool .map-holder .land.has-hits{fill:#e05243;stroke:#a5301f;}
.map-legend{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:11px;}
.map-legend span{font-size:.78rem;color:var(--muted);font-weight:600;display:inline-flex;align-items:center;gap:6px;}
.map-legend b{color:var(--navy);}
.map-legend i{width:9px;height:9px;border-radius:50%;background:#2f6bfe;display:inline-block;}
.map-legend i.tool{background:#c0392b;}
.map-pending{display:flex;align-items:center;justify-content:center;height:100%;text-align:center;color:var(--muted);font-size:.86rem;font-weight:600;padding:20px;}
.map-holder .map-wait{fill:#1e2a6b;font-family:var(--font-body);font-size:14px;font-weight:700;}
.spark-lg i:hover{filter:brightness(1.15);}
.geo-sec--tool .spark-lg i{background:linear-gradient(180deg,#ff8a7a,#c0392b);}
@media (max-width:700px){
  .geo-sec{padding:16px;}
  .seg-per{width:100%;justify-content:space-between;}
  .per-opt{flex:1;padding:7px 4px;font-size:.8rem;}
  .spark-lg{height:90px;}
}
.acard--metric{display:flex;flex-direction:column;gap:14px;}
.acard--metric .metric-head{display:flex;align-items:center;gap:10px;}
.acard--metric .dot{width:12px;height:12px;border-radius:50%;background:var(--d,#1e2a6b);flex:0 0 auto;box-shadow:0 0 0 3px color-mix(in srgb,var(--d) 20%,transparent);}
.acard--metric h3{font-family:var(--font-head);font-size:1.1rem;color:var(--navy);}
.metric-nums{display:flex;gap:18px;}
.metric-nums div strong{font-size:1.35rem;color:var(--ink);font-family:var(--font-head);display:block;line-height:1;}
.metric-nums div span{font-size:.72rem;color:var(--muted);font-weight:700;text-transform:uppercase;letter-spacing:.04em;}
.spark{display:flex;align-items:flex-end;gap:5px;height:44px;}
.spark i{flex:1;background:linear-gradient(180deg,#5b8cff,#2f6bfe);border-radius:4px 4px 0 0;min-height:6px;}
.badge-soon{align-self:flex-start;font-size:.66rem;font-weight:800;letter-spacing:.06em;text-transform:uppercase;
  color:var(--navy);background:rgba(30,42,107,.09);padding:4px 10px;border-radius:999px;}

/* ---------- tools admin ---------- */
.tools-admin{display:grid;grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:18px;}
.tool-edit{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);display:flex;flex-direction:column;gap:12px;}
.tool-edit__top{display:flex;align-items:center;gap:10px;}
.tool-edit__top .dot{width:12px;height:12px;border-radius:50%;background:var(--d,#1e2a6b);box-shadow:0 0 0 3px color-mix(in srgb,var(--d) 20%,transparent);}
.tool-edit__top .status{margin-left:auto;font-size:.7rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px;}
.status.live{background:#e4efdd;color:#2f7d52;}
.status.hidden{background:#f1e2e0;color:#a5301f;}
.tool-edit__row{display:flex;gap:10px;align-items:flex-end;}
.tool-edit__actions{display:flex;flex-wrap:wrap;gap:10px;align-items:center;margin-top:2px;}
.toggle{display:inline-flex;align-items:center;gap:8px;font-weight:700;font-size:.85rem;color:var(--navy);cursor:pointer;user-select:none;}
.toggle{position:relative;}
.toggle input{position:absolute;opacity:0;width:auto;height:auto;
  inset:0;margin:0;pointer-events:none;}
.toggle .track{width:42px;height:24px;border-radius:999px;background:#cfd2e6;position:relative;transition:background .2s ease;flex:0 0 auto;}
.toggle .track::after{content:"";position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.3);transition:transform .2s ease;}
.toggle input:checked + .track{background:#2f9e6f;}
.toggle input:checked + .track::after{transform:translateX(18px);}
.save-note{font-size:.82rem;color:#2f9e6f;font-weight:700;opacity:0;transition:opacity .2s ease;}
.save-note.show{opacity:1;}

/* ---------- team ---------- */
.invite{display:flex;gap:14px;flex-wrap:wrap;align-items:flex-end;background:var(--card);border:1px solid var(--line);
  border-radius:var(--radius);padding:20px;box-shadow:var(--shadow-sm);margin-bottom:22px;}
.invite .afield{flex:1;min-width:200px;}
.team-list{display:flex;flex-direction:column;gap:10px;}
.member{display:flex;align-items:center;gap:14px;background:var(--card);border:1px solid var(--line);
  border-radius:16px;padding:14px 18px;box-shadow:var(--shadow-sm);}
.member__ava{width:40px;height:40px;border-radius:50%;background:linear-gradient(140deg,#2f6bfe,#1e2a6b);color:#fff;
  display:flex;align-items:center;justify-content:center;font-weight:800;font-family:var(--font-head);flex:0 0 auto;}
.member__info{display:flex;flex-direction:column;min-width:0;}
.member__info strong{color:var(--navy);font-size:.98rem;}
.member__info span{color:var(--muted);font-size:.82rem;}
.member__meta{margin-left:auto;display:flex;align-items:center;gap:12px;}
.member .stat-invited{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#a5301f;background:#f1e2e0;padding:4px 9px;border-radius:999px;}
.member .stat-active{font-size:.72rem;font-weight:800;text-transform:uppercase;letter-spacing:.04em;color:#2f7d52;background:#e4efdd;padding:4px 9px;border-radius:999px;}
.member select{padding:.5em .7em;border:1.5px solid var(--line);border-radius:10px;font-family:var(--font-body);font-weight:700;font-size:.85rem;color:var(--navy);background:#fff;cursor:pointer;}
.member select:disabled{opacity:.55;cursor:not-allowed;}
.member__remove{border:none;background:none;color:var(--muted);cursor:pointer;font-size:1.2rem;padding:4px 8px;border-radius:8px;line-height:1;}
.member__remove:hover{background:#f1e2e0;color:var(--red);}

.settings-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:20px;align-items:start;}
#pwForm{display:flex;flex-direction:column;gap:14px;}
.acct{margin:0 0 18px;display:grid;grid-template-columns:auto 1fr;gap:8px 18px;}
.acct dt{color:var(--muted);font-weight:700;font-size:.85rem;}
.acct dd{margin:0;color:var(--ink);font-weight:600;font-size:.9rem;}

@media (max-width:700px){
  .atabs{order:3;width:100%;margin:6px 0 0;}
  .abar{flex-wrap:wrap;}
  .abar__user{margin-left:auto;}
  .who{display:none;}
}

/* analytics comparisons: up green, DOWN ORANGE, flat grey */
.statbox .cmp.up{color:#2f9e6f;}
.statbox .cmp.down{color:#e07f2e;}
.statbox .cmp.flat{color:var(--muted);}

.statbox em.cmp.down, .cmp.down{color:#e07f2e !important;}
.statbox em.cmp.up, .cmp.up{color:#2f9e6f;}
.statbox em.cmp.flat, .cmp.flat{color:var(--muted);}


/* ---------- SEO health check ---------- */
.seo-pane{display:none;}
.seo-pane.is-on{display:block;}
.auditblk{margin-top:18px;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.auditscore{display:flex;align-items:center;gap:12px;padding:12px 16px;background:rgba(30,42,107,.06);flex-wrap:wrap;}
.auditscore strong{font-family:var(--font-head);font-size:1.5rem;color:var(--navy);line-height:1;}
.auditscore span{font-size:.85rem;color:var(--muted);font-weight:600;}
.auditscore em{margin-left:auto;font-style:normal;font-weight:800;color:var(--navy);font-size:.88rem;}
.ckrow{display:flex;align-items:center;gap:11px;padding:10px 16px;border-top:1px solid var(--line);font-size:.9rem;flex-wrap:wrap;}
.ckico{width:20px;height:20px;border-radius:50%;display:flex;align-items:center;justify-content:center;
  font-size:.72rem;font-weight:800;color:#fff;flex:0 0 auto;}
.ck-pass .ckico{background:#2f9e6f;}
.ck-warn .ckico{background:#d98324;}
.ck-fail .ckico{background:var(--red);}
.cklabel{font-weight:700;color:var(--navy);min-width:150px;}
.ckdetail{color:var(--muted);font-size:.85rem;word-break:break-word;}
.dropping{outline:3px dashed #2f6bfe;outline-offset:-6px;}


/* ---------- AI Expert Services ---------- */
.atab--hot{position:relative;background:#e23b2e;color:#fff;box-shadow:0 3px 0 #a5271c;}
.atab--hot:hover{background:#c93226;color:#fff;}
.atab--hot.is-active{background:#fff;color:#c93226;box-shadow:0 3px 0 rgba(0,0,0,.18);}
.atab--hot::after{content:"";position:absolute;top:5px;right:7px;width:7px;height:7px;border-radius:50%;
  background:#ffd84d;box-shadow:0 0 0 2px rgba(0,0,0,.12);}
/* Full-bleed AND flush to the header: the console body is a centred, padded
   column, so pull the embed out to both screen edges and up to the bar. */
.ai-embed{padding:0;overflow:hidden;border:none;border-radius:0;box-shadow:none;
  width:100vw;max-width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);
  margin-top:0;margin-bottom:0;}
/* When this tab is active the guide owns the screen below the header:
   the panel loses its padding, ONLY the iframe scrolls, and the frame
   flexes into whatever is left — so the guide's own fixed sidebar (pinned
   to the iframe viewport) can never be scrolled off by the outer page. */
body:has(.tabview[data-view="aiexpert"].is-active){overflow:hidden;}
.apanel:has(.tabview[data-view="aiexpert"].is-active){
  padding:0;max-width:none;flex:1;min-height:0;display:flex;flex-direction:column;}
.tabview[data-view="aiexpert"].is-active{
  display:flex;flex-direction:column;flex:1;min-height:0;}
/* nothing sits between the header and the guide */
.tabview[data-view="aiexpert"] .view-head{display:none;}
.ai-embed{flex:1;min-height:0;display:flex;flex-direction:column;}
@media (max-width:640px){
  .tabview[data-view="aiexpert"] .site-sub{padding:7px 10px;gap:5px;}
  .tabview[data-view="aiexpert"] .site-sub button{font-size:.78rem;padding:6px 11px;}
}
/* height is set from the frame's own content in admin.js — this is only
   the starting value before the first measurement lands */
.ai-embed__frame{display:block;width:100%;border:none;background:#fff;
  flex:1;min-height:0;}


/* ---------- Documents ---------- */
.doc-row{display:flex;align-items:flex-start;gap:20px;flex-wrap:wrap;}
.doc-row__info{flex:1;min-width:240px;}
.doc-row__info h2{font-family:var(--font-head);font-size:1.15rem;color:var(--navy);margin-bottom:6px;}
.doc-row__info p{margin:0;color:var(--muted);font-size:.92rem;line-height:1.5;max-width:56ch;}
.doc-row__acts{display:flex;gap:10px;flex-wrap:wrap;align-items:center;}
@media (max-width:620px){
  .doc-row__acts{width:100%;}
  .doc-row__acts .btn{flex:1;justify-content:center;}
}


/* ---------- in-page document preview ---------- */
.docview{position:fixed;inset:0;z-index:120;background:var(--bg);display:flex;flex-direction:column;}
.docview__bar{display:flex;align-items:center;gap:14px;padding:10px 18px;
  background:linear-gradient(180deg,#1e2a6b,#182158);color:#fff;box-shadow:var(--shadow-md);}
.docview__bar .btn--ghost{--edge:rgba(0,0,0,.25);background:rgba(255,255,255,.16);color:#fff;box-shadow:none;}
.docview__bar .btn--ghost:hover{background:rgba(255,255,255,.3);}
.docview__name{font-family:var(--font-head);font-size:1.05rem;}
.docview__frame{flex:1;width:100%;border:none;background:#fff;}


/* ---------- receipts ---------- */
.rcrow{display:grid;grid-template-columns:1fr 90px 120px 110px 34px;gap:10px;align-items:center;margin-bottom:9px;}
.rcrow input{font-family:var(--font-body);font-size:.92rem;padding:.6em .8em;border:1.5px solid var(--line);
  border-radius:11px;background:#fff;color:var(--ink);width:100%;}
.rcrow input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.rcrow .rc-line{font-weight:800;color:var(--navy);font-size:.92rem;text-align:right;}
.rcrow .rc-del,.invrow .rc-del,.dutyrow .rc-del{border:none;background:none;
  color:var(--muted);cursor:pointer;font-size:1.05rem;font-family:var(--font-body);
  padding:5px 7px;border-radius:8px;line-height:1;}
.rcrow .rc-del:hover,.invrow .rc-del:hover,.dutyrow .rc-del:hover{background:#f1e2e0;color:var(--red);}
.rctot{display:flex;gap:22px;justify-content:flex-end;align-items:baseline;margin-top:12px;padding-top:12px;
  border-top:1px solid var(--line);font-size:.86rem;color:var(--muted);font-weight:600;flex-wrap:wrap;}
.rctot b{color:var(--navy);font-weight:800;margin-left:5px;}
.rctot .grand{font-family:var(--font-head);font-size:1.12rem;color:var(--navy);}
.rctot .grand b{font-size:1.15rem;}

.rcitem{display:grid;grid-template-columns:110px minmax(0,1fr) 100px 110px max-content auto;
  gap:12px;align-items:center;padding:12px 0;border-bottom:1px solid var(--line);}
/* a status in a list row is a pill like everywhere else, and never narrower
   than the word it holds */
.rcitem .status{justify-self:start;white-space:nowrap;font-size:.7rem;font-weight:800;
  text-transform:uppercase;letter-spacing:.04em;padding:4px 10px;border-radius:999px;}
.rcitem:last-child{border-bottom:none;}
.rcitem__no{font-weight:800;color:var(--navy);font-size:.88rem;}
.rcitem__who{display:flex;flex-direction:column;min-width:0;}
.rcitem__who strong{color:var(--ink);font-size:.94rem;}
.rcitem__who span{color:var(--muted);font-size:.8rem;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.rcitem__date{color:var(--muted);font-size:.84rem;font-weight:600;}
.rcitem__amt{font-family:var(--font-head);color:var(--navy);font-size:1.02rem;text-align:right;}
.rcitem__acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;}

@media (max-width:820px){
  .rcrow{grid-template-columns:1fr 70px 96px;grid-auto-rows:auto;}
  .rcrow .rc-line{grid-column:1/-1;text-align:left;}
  .rcrow .rc-del{grid-column:1/-1;justify-self:start;}
  .rcitem{grid-template-columns:1fr auto;gap:8px;}
  .rcitem__date,.rcitem__no{font-size:.8rem;}
  .rcitem__acts{grid-column:1/-1;justify-content:flex-start;}
}

.rcrow.is-orphan input{border-color:#e0a79c;background:#fdf6f4;}
.rcrow.is-orphan .rc-line{color:var(--red);font-weight:700;font-size:.78rem;}

.rcrow.rcfee{grid-template-columns:1fr 120px 34px;}


/* ---------- bookings ---------- */
.avrow{display:flex;align-items:center;gap:14px;padding:11px 0;border-bottom:1px solid var(--line);}
.avrow:last-child{border-bottom:none;}
.avrow.is-off{opacity:.5;}
.avrow__day{font-weight:800;color:var(--navy);min-width:96px;font-size:.9rem;}
.avrow__time{font-family:var(--font-head);color:var(--navy);font-size:1rem;min-width:118px;}
.avrow__meta{color:var(--muted);font-size:.85rem;font-weight:600;flex:1;}
.avrow .toggle{flex:0 0 auto;}

.bkrow{display:grid;grid-template-columns:132px 1fr 92px auto;gap:14px;align-items:start;
  padding:14px 0;border-bottom:1px solid var(--line);}
.bkrow:last-child{border-bottom:none;}
.bkrow__when{display:flex;flex-direction:column;font-weight:800;color:var(--navy);font-size:.88rem;}
.bkrow__when em{font-style:normal;font-weight:600;color:var(--muted);font-size:.78rem;margin-top:2px;}
.bkrow__who{display:flex;flex-direction:column;gap:3px;min-width:0;}
.bkrow__who strong{color:var(--ink);font-size:.96rem;}
.bkrow__who span{color:var(--muted);font-size:.82rem;}
.bkrow__topic{color:var(--navy) !important;font-weight:700;}
.bkrow__note{background:var(--bg);border-radius:9px;padding:7px 10px;margin-top:3px;
  font-size:.82rem;line-height:1.45;color:var(--muted) !important;}
.bkrow__acts{display:flex;gap:8px;align-items:center;justify-content:flex-end;flex-wrap:wrap;}

@media (max-width:820px){
  .bkrow{grid-template-columns:1fr auto;}
  .bkrow__acts{grid-column:1/-1;justify-content:flex-start;}
  .avrow{flex-wrap:wrap;gap:9px;}
  .avrow__meta{flex:1 0 100%;}
}


/* ---------- the owner's month calendar ---------- */
.lg-open{color:#2f7d52;}
.lg-booked{color:var(--red);}
.lg-away{color:var(--muted);}

.cc-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.cc-head strong{font-family:var(--font-head);font-size:1.15rem;color:var(--navy);min-width:150px;text-align:center;}
.cc-arrow{width:32px;height:32px;border-radius:50%;border:1.5px solid var(--line);background:#fff;
  color:var(--navy);cursor:pointer;font-size:1rem;line-height:1;}
.cc-arrow:hover{background:rgba(30,42,107,.08);border-color:#2f6bfe;}
.cc-today{font-family:var(--font-body);font-weight:800;font-size:.82rem;color:var(--navy);background:#fff;
  border:1.5px solid var(--navy);border-radius:999px;padding:.45em 1em;cursor:pointer;}
.cc-today:hover{background:var(--navy);color:#fff;}
.cc-sum{margin-left:auto;font-size:.85rem;color:var(--muted);font-weight:600;}

.cc-dows{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;margin-bottom:6px;}
.cc-dows span{font-size:.64rem;font-weight:800;letter-spacing:.08em;color:var(--muted);padding-left:4px;}
.cc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:6px;}
.cc-cell{min-height:62px;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  text-align:left;padding:7px 8px;cursor:pointer;font-family:var(--font-body);
  display:flex;flex-direction:column;gap:2px;transition:transform .13s ease,box-shadow .13s ease;}
.cc-pad{border:none;background:none;cursor:default;min-height:0;}
.cc-cell b{font-weight:700;font-size:.9rem;color:var(--ink);line-height:1;}
.cc-cell em{font-style:normal;font-size:.64rem;font-weight:700;line-height:1.25;}
.cc-cell .cc-o{color:#2f7d52;}
.cc-cell .cc-b{color:var(--red);}
.cc-cell .cc-a{color:var(--muted);}
.cc-cell.has-open{background:#f1f7f0;border-color:rgba(47,125,82,.24);}
.cc-cell.has-booked{background:#fdf0ee;border-color:rgba(192,57,43,.30);}
.cc-cell.is-away{background:repeating-linear-gradient(135deg,#f4f1ea,#f4f1ea 5px,#eae6dd 5px,#eae6dd 10px);}
.cc-cell.is-today{outline:2px solid var(--navy);outline-offset:-2px;}
.cc-cell.is-picked{box-shadow:0 0 0 3px rgba(47,107,254,.30);}
.cc-cell:hover{transform:translateY(-2px);box-shadow:var(--shadow-sm);}

.cc-day{margin-top:16px;padding:16px 18px;border-radius:16px;border:1px solid var(--line);
  background:var(--bg);}
.cc-day__head{display:flex;align-items:center;gap:12px;margin-bottom:10px;}
.cc-day__head h3{font-family:var(--font-head);font-size:1.1rem;color:var(--navy);}
.cc-day__head .bk-close,.cc-x{margin-left:auto;border:none;background:rgba(30,42,107,.08);
  color:var(--navy);width:28px;height:28px;border-radius:50%;cursor:pointer;font-size:.8rem;}
.cc-x:hover{background:var(--red);color:#fff;}
.cc-day__lbl{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);margin:14px 0 7px;}
.cc-bk{display:flex;align-items:flex-start;gap:12px;background:#fff;border-radius:11px;
  padding:10px 12px;margin-bottom:7px;border:1px solid var(--line);}
.cc-bk__t{font-family:var(--font-head);color:var(--navy);font-size:.98rem;min-width:52px;}
.cc-bk__w{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.cc-bk__w strong{font-size:.92rem;color:var(--ink);}
.cc-bk__w span{font-size:.8rem;color:var(--muted);}
.cc-bk__topic{color:var(--navy) !important;font-weight:700;}
.cc-bk__note{background:var(--bg);border-radius:8px;padding:6px 9px;margin-top:3px;line-height:1.45;}
.cc-open{display:flex;flex-wrap:wrap;gap:7px;}
.cc-open span{background:#fff;border:1.5px solid rgba(47,125,82,.28);color:#2f7d52;
  border-radius:999px;padding:.4em .85em;font-size:.84rem;font-weight:700;}

@media (max-width:700px){
  .cc-sum{margin-left:0;flex:1 0 100%;}
  .cc-cell{min-height:54px;padding:6px;}
  .cc-cell em{font-size:.58rem;}
}


/* settings on the left, the month they produce on the right */
.bk-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(360px,.92fr);
  gap:20px;align-items:start;}
.bk-cols__left{display:flex;flex-direction:column;gap:20px;min-width:0;}
.bk-cols__left .acard{margin-top:0 !important;}
.bk-cols__right{min-width:0;position:sticky;top:84px;}
@media (max-width:1080px){
  .bk-cols{grid-template-columns:1fr;}
  .bk-cols__right{position:static;}
}

.cc-tz{font-size:.68rem;font-weight:800;letter-spacing:.06em;color:var(--muted);
  background:rgba(30,42,107,.07);padding:4px 9px;border-radius:999px;white-space:nowrap;}


/* bookings · phone: the CMS month view and its editors */
@media (max-width:560px){
  .cc-head{gap:8px;}
  .cc-head strong{font-size:1rem;min-width:0;flex:1;text-align:left;}
  .cc-grid{gap:5px;}
  .cc-cell{min-height:50px;padding:5px;border-radius:10px;overflow:hidden;}
  .cc-cell b{font-size:.82rem;}
  .cc-cell em{font-size:.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%;line-height:1.35;}
  .cc-day{padding:13px;}
  .cc-bk{flex-wrap:wrap;gap:8px;}
  .cc-bk__t{min-width:auto;}
  .cc-tz{font-size:.6rem;}
  .avrow__day{min-width:0;}
  .avrow__time{min-width:0;}
}
.cc-grid,.cc-dows,.bk-cols,.bk-cols__left,.bk-cols__right{min-width:0;}
.cc-bk__w strong,.cc-bk__w span{overflow-wrap:anywhere;}
.bkrow__who span{overflow-wrap:anywhere;}


/* ---------- invoices ---------- */
.inv-cols{display:grid;grid-template-columns:minmax(320px,1fr) 856px;
  gap:22px;align-items:start;}
.inv-cols__left{display:flex;flex-direction:column;min-width:0;}
.inv-cols__left .acard:first-child{margin-top:0;}
.inv-cols__right{min-width:0;position:sticky;top:84px;}
.inv-prev{border:1px solid var(--line);border-radius:14px;overflow:hidden;background:#fff;
  box-shadow:var(--shadow-sm);position:relative;}
/* the frame is rendered at full page width, then scaled down to fit the
   panel, so the whole document is visible rather than its top third */
.inv-prev__fit{position:relative;width:100%;overflow:hidden;}
.inv-prev iframe{display:block;width:816px;border:none;background:#fff;
  transform-origin:top left;}
.inv-prev__fit{background:#f3efe6;}
.inv-prev__bar{display:flex;align-items:center;gap:10px;padding:8px 12px;
  border-top:1px solid var(--line);background:var(--bg);font-size:.78rem;
  color:var(--muted);font-weight:600;flex-wrap:wrap;}
.inv-prev__bar .r{margin-left:auto;display:flex;gap:6px;}
.inv-zoom{border:1.5px solid var(--line);background:#fff;color:var(--navy);
  font-family:var(--font-body);font-weight:800;font-size:.76rem;
  padding:.3em .7em;border-radius:999px;cursor:pointer;}
.inv-zoom:hover{border-color:#2f6bfe;}
.inv-zoom.is-on{background:var(--navy);color:#fff;border-color:var(--navy);}


.invrow{display:grid;grid-template-columns:1fr 62px 92px auto 32px;
  gap:8px;align-items:center;margin-bottom:12px;
  padding-bottom:11px;border-bottom:1px solid var(--line);}
.invrow .iv-desc{grid-column:1/-1;}
.invrow input{font-family:var(--font-body);font-size:.9rem;padding:.55em .75em;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);
  width:100%;min-width:0;}
.invrow input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.invrow .iv-unit{font-size:.82rem;color:var(--muted);}
.invrow .iv-line{font-weight:800;color:var(--navy);font-size:.9rem;text-align:right;}
.invrow.is-orphan input{border-color:#e0a79c;background:#fdf6f4;}
.invrow.is-orphan .iv-line{color:var(--red);font-weight:700;font-size:.76rem;}

@media (max-width:520px){
  .invrow{grid-template-columns:1fr 1fr;}
  .invrow .iv-line{grid-column:1/-1;text-align:left;}
}

.inv-pages{margin-left:auto;font-size:.78rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:var(--muted);background:rgba(30,42,107,.08);
  padding:4px 11px;border-radius:999px;}
.inv-pages.is-multi{color:#9a5b18;background:#fbf0dd;}

.size-pills{display:inline-flex;gap:4px;background:rgba(30,42,107,.07);
  padding:3px;border-radius:999px;align-self:flex-start;}
.size-pills button{font-family:var(--font-body);font-weight:800;font-size:.8rem;
  color:var(--navy);background:none;border:none;padding:.42em 1em;
  border-radius:999px;cursor:pointer;transition:background .14s ease,color .14s ease;}
.size-pills button:hover{background:rgba(30,42,107,.10);}
.size-pills button.is-on{background:var(--navy);color:#fff;}

/* the invoices view carries a full sheet beside its form, so it is given
   more room than the rest of the console */
.tabview[data-view="invoices"]{max-width:none;}
.apanel:has(.tabview[data-view="invoices"].is-active),
.apanel:has(.tabview[data-view="receipts"].is-active),
.apanel:has(.tabview[data-view="payroll"].is-active),
.apanel:has(.tabview[data-view="certs"].is-active){max-width:1420px;}
@media (max-width:1400px){
  .inv-cols{grid-template-columns:1fr;}
  .inv-cols__right{position:static;}
}

.inv-head{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-bottom:6px;}
.inv-head h2{margin-bottom:0;}
.inv-head .btn{margin-left:auto;}

.bk-more{display:flex;gap:10px;align-items:center;flex-wrap:wrap;
  padding-top:14px;margin-top:4px;border-top:1px solid var(--line);}
.bk-more__n{margin-left:auto;font-size:.82rem;color:var(--muted);font-weight:600;}


/* ---------- mail ---------- */
.ml{display:grid;grid-template-columns:236px minmax(0,1fr);gap:18px;align-items:start;}
.ml-side{background:var(--card);border:1px solid var(--line);border-radius:var(--radius);
  padding:18px;box-shadow:var(--shadow-sm);position:sticky;top:84px;}
.ml-main{min-width:0;}

.ml-boxes{display:flex;flex-direction:column;gap:4px;margin:16px 0 4px;}
.ml-box{text-align:left;background:none;border:none;cursor:pointer;padding:10px 12px;
  border-radius:12px;font-family:var(--font-body);display:flex;flex-direction:column;gap:3px;
  transition:background .14s ease;}
.ml-box:hover{background:rgba(30,42,107,.07);}
.ml-box.is-on{background:rgba(30,42,107,.10);}
.ml-box__t{font-weight:700;font-size:.95rem;color:var(--navy);display:flex;align-items:center;gap:8px;}
.ml-box__n{font-size:.76rem;color:var(--muted);font-weight:600;}
.ml-badge{font-style:normal;font-size:.66rem;font-weight:800;letter-spacing:.04em;
  text-transform:uppercase;background:#fbe3e3;color:var(--red);padding:3px 9px;border-radius:999px;}

.ml-side__lbl{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:18px 0 8px;padding-top:14px;border-top:1px solid var(--line);}
.ml-fold{display:flex;align-items:center;gap:8px;padding:8px 12px;border-radius:11px;
  cursor:pointer;font-size:.9rem;font-weight:600;color:var(--ink);}
.ml-fold:hover{background:rgba(30,42,107,.07);}
.ml-fold.is-on{background:rgba(30,42,107,.12);color:var(--navy);}
.ml-fold span{flex:1;}
/* hidden until the row is hovered, so a folder cannot be lost to a stray
   click, and it asks twice before removing */
.x-fold{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.72rem;
  padding:5px 7px;border-radius:6px;line-height:1;opacity:0;transition:opacity .14s ease;}
.ml-fold:hover .x-fold,.ml-fold:focus-within .x-fold{opacity:.65;}
.x-fold:hover{background:#f1e2e0;color:var(--red);opacity:1 !important;}
.ml-newfold{display:flex;gap:8px;align-items:center;margin-top:8px;}
.ml-newfold input{flex:1;min-width:0;font-family:var(--font-body);font-size:.88rem;
  padding:.5em .75em;border:1.5px solid var(--line);border-radius:11px;background:#fff;}
.ml-newfold input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}

.ml-head{display:flex;align-items:center;gap:12px;margin-bottom:14px;flex-wrap:wrap;}
.ml-head h2{font-family:var(--font-head);font-size:1.35rem;color:var(--navy);margin:0;}
.ml-head__n{font-size:.84rem;color:var(--muted);font-weight:600;}
.ml-head .btn{margin-left:auto;}
.ml-head .btn + .btn{margin-left:0;}

.ml-bulk{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:var(--bg);
  border-radius:12px;padding:10px 14px;margin-bottom:12px;font-size:.86rem;color:var(--navy);}
.ml-bulk .btn,.ml-bulk .ml-move{padding-left:.85em;padding-right:.85em;font-size:.84rem;}
.ml-bulk__hint{color:var(--muted);font-weight:600;margin-right:auto;}
.ml-check{position:relative;display:inline-flex;cursor:pointer;flex:0 0 auto;}
.ml-check input{position:absolute;opacity:0;width:0;height:0;}
.ml-check span{width:18px;height:18px;border:1.5px solid var(--line);border-radius:5px;
  background:#fff;display:block;transition:background .14s ease,border-color .14s ease;}
.ml-check input:checked + span{background:var(--navy);border-color:var(--navy);}
.ml-check input:checked + span::after{content:"\2713";color:#fff;font-size:.7rem;font-weight:800;
  position:absolute;left:4px;top:0;}

.mlday{font-size:.68rem;font-weight:800;letter-spacing:.1em;text-transform:uppercase;
  color:var(--muted);background:var(--bg);padding:7px 14px;margin:0 -14px;}
.mlrow{display:flex;gap:12px;align-items:flex-start;padding:11px 14px;cursor:pointer;
  border-bottom:1px solid var(--line);border-left:3px solid transparent;
  transition:background .13s ease;}
.mlrow:hover{background:rgba(47,107,254,.045);}
.mlrow.unread{border-left-color:#2f6bfe;background:rgba(47,107,254,.035);}
.mlrow__ico{color:var(--muted);font-size:.95rem;line-height:1.5;flex:0 0 auto;}
.mlrow.unread .mlrow__ico{color:#2f6bfe;}
.mlrow__main{display:flex;flex-direction:column;gap:2px;flex:1;min-width:0;}
.mlrow__top{display:flex;align-items:baseline;gap:8px;min-width:0;}
.mlrow__who{font-weight:700;font-size:.92rem;color:var(--navy);
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mlrow.unread .mlrow__who{font-weight:800;}
.mlrow__tag{font-style:normal;font-size:.6rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#2f6bfe;background:rgba(47,107,254,.12);
  padding:2px 7px;border-radius:999px;flex:0 0 auto;}
.mlrow__clip{font-style:normal;font-size:.74rem;opacity:.6;flex:0 0 auto;}
.mlrow__when{margin-left:auto;font-size:.78rem;color:var(--muted);font-weight:600;
  white-space:nowrap;flex:0 0 auto;}
.mlrow__low{display:flex;gap:8px;min-width:0;align-items:baseline;}
.mlrow__sub{font-size:.88rem;color:var(--ink);flex:0 1 auto;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.mlrow.unread .mlrow__sub{font-weight:700;color:var(--navy);}
.mlrow__peek{font-size:.84rem;color:var(--muted);flex:1 1 auto;min-width:0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

.ml-meta{font-size:.86rem;color:var(--muted);margin:0 0 14px;padding-bottom:12px;
  border-bottom:1px solid var(--line);}
.ml-meta b{color:var(--navy);}
.ml-body{font-size:.96rem;line-height:1.6;color:var(--ink);}
.ml-body blockquote{border-left:3px solid var(--line);margin:12px 0;padding-left:14px;color:var(--muted);}
.ml-file{display:inline-flex;align-items:center;gap:7px;background:var(--bg);border-radius:10px;
  padding:7px 11px;margin:0 7px 7px 0;font-size:.84rem;color:var(--navy);font-weight:600;}
.ml-file em{font-style:normal;color:var(--muted);font-weight:500;}
.f-x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.78rem;
  padding:2px 4px;border-radius:5px;line-height:1;}
.f-x:hover{background:#f1e2e0;color:var(--red);}

.ml-to{display:flex;align-items:center;gap:10px;flex-wrap:wrap;margin-bottom:12px;}
#ml_to,#ml_subject{width:100%;font-family:var(--font-body);font-size:.98rem;color:var(--ink);
  padding:.7em .9em;border:1.5px solid var(--line);border-radius:12px;background:#fff;
  margin-bottom:12px;resize:vertical;}
#ml_to:focus,#ml_subject:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}

.ml-tools{display:flex;align-items:center;gap:5px;flex-wrap:wrap;background:var(--bg);
  border:1.5px solid var(--line);border-radius:12px 12px 0 0;border-bottom:none;padding:8px 10px;}
.ml-tools button{min-width:34px;height:34px;border:none;background:none;cursor:pointer;
  border-radius:9px;font-family:var(--font-body);font-size:.9rem;color:var(--navy);
  display:flex;align-items:center;justify-content:center;transition:background .14s ease;}
.ml-tools button:hover{background:rgba(30,42,107,.10);}
.ml-sep{width:1px;height:22px;background:var(--line);margin:0 4px;}
.ml-sw{width:22px;height:22px;min-width:22px;border-radius:50% !important;
  background:var(--c) !important;box-shadow:inset 0 0 0 1.5px rgba(0,0,0,.12);}
.ml-sw:hover{transform:scale(1.12);}

.ml-edit{min-height:240px;border:1.5px solid var(--line);border-radius:0 0 12px 12px;
  background:#fff;padding:14px 16px;font-size:.98rem;line-height:1.6;color:var(--ink);
  overflow-y:auto;max-height:460px;}
.ml-edit:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.ml-edit h3{font-family:var(--font-head);font-size:1.15rem;color:var(--navy);margin:12px 0 6px;}
.ml-edit p{margin:0 0 10px;}
.ml-edit a{color:#2f6bfe;}
.ml-files{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-top:14px;}

.mlc{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:12px;align-items:center;
  padding:12px 0;border-bottom:1px solid var(--line);}
.mlc:last-child{border-bottom:none;}
.mlc__n{display:flex;flex-direction:column;gap:2px;min-width:0;}
.mlc__n strong{font-size:.94rem;color:var(--ink);}
.mlc__n span{font-size:.82rem;color:var(--muted);overflow-wrap:anywhere;}
.mlc__a{display:flex;gap:8px;align-items:center;}

@media (max-width:1000px){
  .ml{grid-template-columns:1fr;}
}
@media (max-width:700px){
  .mlrow{grid-template-columns:auto minmax(0,1fr) 58px;gap:9px;}
  .mlrow__peek{grid-column:2/-1;}
  .mlrow__sub{grid-column:2/-1;}
  .ml-head h2{font-size:1.15rem;}
  .ml-head .btn{margin-left:0;}
  .mlc{grid-template-columns:1fr;}
  .mlc__a{justify-content:flex-start;}
}


/* ---------- audience ---------- */
.au-head{display:flex;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
.au-head h1{font-family:var(--font-head);font-size:1.7rem;color:var(--navy);margin:0;}
.au-n{font-size:.86rem;color:var(--muted);font-weight:600;}
.au-search{flex:1;min-width:220px;font-family:var(--font-body);font-size:.95rem;
  padding:.65em .95em;border:1.5px solid var(--line);border-radius:12px;background:#fff;color:var(--ink);}
.au-search:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}

.au-bulk{display:flex;align-items:center;gap:11px;flex-wrap:wrap;margin-bottom:10px;
  font-size:.88rem;color:var(--navy);}
.au-sel{color:var(--muted);font-weight:600;}
.au-del{--edge:#e0a79c;color:var(--red);}
.au-del:hover{background:#fdf2f0;}

.au-add{background:var(--bg);border:1px solid var(--line);border-radius:16px;
  padding:16px 18px;margin:14px 0 18px;}
.au-add__lbl{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);margin:0 0 12px;}
.au-add__row{display:grid;grid-template-columns:repeat(auto-fit,minmax(170px,1fr));gap:11px;margin-bottom:12px;}
.au-add__row input{font-family:var(--font-body);font-size:.92rem;padding:.62em .85em;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);width:100%;min-width:0;}
.au-add__row input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}

.au-table{border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.au-thead,.au-row{display:grid;
  grid-template-columns:auto minmax(90px,.85fr) minmax(150px,1.15fr) minmax(110px,1fr)
    minmax(110px,1fr) minmax(80px,.75fr) 92px 96px;
  gap:12px;align-items:center;padding:12px 14px;}
.au-thead{background:rgba(30,42,107,.07);font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.au-row{border-top:1px solid var(--line);font-size:.9rem;}
.au-row:hover{background:rgba(30,42,107,.035);}
.au-name{font-weight:700;color:var(--ink);}
.au-mail a{color:#2f6bfe;text-decoration:underline;overflow-wrap:anywhere;}
.au-cell{color:var(--muted);overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
.au-when{color:var(--muted);font-size:.82rem;font-weight:600;}
.au-act{display:flex;justify-content:flex-end;}
.au-lock{opacity:.4;font-size:.85rem;}
.au-row.is-edit input{font-family:var(--font-body);font-size:.86rem;padding:.45em .6em;
  border:1.5px solid var(--line);border-radius:9px;background:#fff;color:var(--ink);width:100%;min-width:0;}
.au-row.is-edit input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}

@media (max-width:1100px){
  .au-thead{display:none;}
  .au-row{grid-template-columns:auto minmax(0,1fr) auto;gap:9px;}
  .au-mail,.au-cell,.au-when{grid-column:2/-1;}
  .au-act{grid-column:1/-1;justify-content:flex-start;}
  .au-row.is-edit input{grid-column:2/-1;}
}
@media (max-width:560px){
  .au-head h1{font-size:1.4rem;}
  .au-search{min-width:0;flex:1 0 100%;}
}


/* ---------- grouped console tabs ---------- */
.agrp{position:relative;}
.agrp__btn{font-family:var(--font-body);font-weight:700;font-size:.94rem;color:#c3cbf0;
  background:none;border:none;padding:9px 15px;border-radius:11px;cursor:pointer;
  display:inline-flex;align-items:center;gap:7px;line-height:1.4;
  transition:background .15s ease,color .15s ease;}
.agrp__btn em{font-style:normal;font-size:.7rem;opacity:.8;}
.agrp__btn:hover{background:rgba(255,255,255,.12);color:#fff;}
.agrp.is-open-view .agrp__btn{background:#fff;color:var(--navy);}
.agrp.is-open-view .agrp__btn em{opacity:.55;}

.agrp__menu{position:absolute;top:100%;left:0;z-index:40;
  background:transparent;box-shadow:none;padding:8px 0 0;
  min-width:196px;display:none;flex-direction:column;gap:2px;}
/* the visible panel, inset from the hoverable padding */
.agrp__menu-in{background:#fff;border-radius:16px;box-shadow:var(--shadow-lg);
  padding:8px;display:flex;flex-direction:column;gap:2px;}
.agrp:hover .agrp__menu,.agrp.is-open .agrp__menu{display:flex;}
.agrp__menu .atab{text-align:left;color:var(--ink);background:none;padding:10px 13px;
  border-radius:11px;font-size:.92rem;width:100%;}
.agrp__menu .atab:hover{background:rgba(30,42,107,.08);color:var(--navy);}
.agrp__menu .atab.is-active{background:var(--navy);color:#fff;}
.agrp__menu .atab--super{color:var(--red);}
.agrp__menu .atab--super.is-active{color:#fff;}

@media (max-width:700px){
  .agrp__menu{position:static;padding:4px 0 4px 12px;min-width:0;}
  .agrp__menu-in{background:transparent;box-shadow:none;padding:0;}
  .agrp.is-open .agrp__menu{display:flex;}
  .agrp:hover .agrp__menu{display:none;}
  .agrp.is-open:hover .agrp__menu{display:flex;}
  .agrp__menu .atab{color:#c3cbf0;}
  .agrp__menu .atab:hover{background:rgba(255,255,255,.12);color:#fff;}
}

/* ---------- appointment reminder ---------- */
.rembar{position:fixed;right:18px;bottom:18px;z-index:200;display:flex;align-items:center;gap:12px;
  background:#fff;border:1px solid var(--line);border-left:4px solid var(--red);border-radius:16px;
  padding:13px 16px;box-shadow:var(--shadow-lg);max-width:min(420px,calc(100vw - 36px));
  animation:rise .25s ease;}
.rembar__t{font-weight:800;font-size:.8rem;letter-spacing:.03em;color:var(--red);white-space:nowrap;}
.rembar__w{display:flex;flex-direction:column;gap:2px;min-width:0;}
.rembar__w strong{font-size:.94rem;color:var(--navy);}
.rembar__w span{font-size:.8rem;color:var(--muted);}
.rembar__x{border:none;background:none;color:var(--muted);cursor:pointer;font-size:.9rem;
  padding:6px;border-radius:8px;line-height:1;}
.rembar__x:hover{background:#f1e2e0;color:var(--red);}
.cc-bk__r{display:flex;flex-direction:column;gap:6px;align-items:flex-end;}
.zoomlink{white-space:nowrap;}
@media (max-width:560px){
  .rembar{left:12px;right:12px;bottom:12px;flex-wrap:wrap;}
}

/* ---------- sender row ---------- */
.ml-from{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;background:var(--bg);
  border:1px solid var(--line);border-left:3px solid var(--navy);border-radius:12px;
  padding:10px 14px;margin-bottom:12px;}
.ml-from__l{font-size:.66rem;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--muted);}
.ml-from__v{font-weight:800;font-size:.94rem;color:var(--navy);overflow-wrap:anywhere;}
.ml-from__v.is-unset{color:var(--red);font-weight:700;font-size:.86rem;}
.ml-from__r{margin-left:auto;font-size:.78rem;color:var(--muted);font-weight:600;}

/* ---------- boxes, each its own accent ---------- */

.ml-box--in .ml-box__t{color:#1e3d8f;}
.ml-box--out .ml-box__t{color:#0f6b6b;}
.ml-box--draft .ml-box__t{color:#9a5b18;}
.ml-box--in.is-on{background:rgba(47,107,254,.10);}
.ml-box--out.is-on{background:rgba(15,107,107,.10);}
.ml-box--draft.is-on{background:rgba(217,131,36,.12);}

/* ---------- a toolbar that reads as a toolbar ---------- */
.ml-tools{gap:4px;padding:9px 11px;background:#fff;border-color:rgba(30,42,107,.16);}
.ml-tools button{min-width:38px;height:38px;font-size:1rem;font-weight:800;
  border:1.5px solid transparent;color:var(--navy);}
.ml-tools button:hover{background:rgba(47,107,254,.12);border-color:rgba(47,107,254,.28);}
.ml-tools button:active{background:var(--navy);color:#fff;}
.ml-tools button[data-cmd="bold"] b{font-weight:900;}
.ml-tools button[data-cmd="italic"] i{font-weight:800;}
.ml-tools button[data-cmd="underline"] u{font-weight:800;text-underline-offset:2px;}
.ml-sep{height:26px;background:rgba(30,42,107,.18);}
.ml-sw{width:26px;height:26px;min-width:26px;border:2px solid #fff !important;
  background:var(--c,var(--navy)) !important;
  box-shadow:0 0 0 1.5px rgba(30,42,107,.22),0 2px 5px rgba(20,30,80,.18);}
.ml-sw:hover{transform:scale(1.18);box-shadow:0 0 0 2px var(--navy),0 3px 8px rgba(20,30,80,.24);}
.ml-edit{border-color:rgba(30,42,107,.16);}

.zoomdead{display:inline-flex;align-items:center;white-space:nowrap;font-family:var(--font-body);
  font-weight:700;font-size:.88rem;color:var(--muted);background:rgba(30,42,107,.06);
  border:1.5px dashed var(--line);border-radius:11px;padding:.5em 1em;
  cursor:not-allowed;opacity:.75;}

.ml-tag{display:inline-block;font-size:.66rem;font-weight:800;letter-spacing:.06em;
  text-transform:uppercase;color:#2f6bfe;background:rgba(47,107,254,.12);
  padding:3px 9px;border-radius:999px;margin-left:6px;}

/* ---------- mailbox list: separated, clearly differentiated ---------- */
.ml-boxes{gap:0;margin:16px 0 0;border:1px solid var(--line);border-radius:14px;overflow:hidden;}
.ml-boxes .ml-box{border-radius:0;padding:12px 14px;border-left:4px solid transparent;}
.ml-boxes .ml-box + .ml-box{border-top:1px solid var(--line);}
/* the active box's accent, at the same depth as the reset above so order
   cannot silently return it to transparent */
.ml-boxes .ml-box--in.is-on{border-left-color:#2f6bfe;}
.ml-boxes .ml-box--out.is-on{border-left-color:#0f6b6b;}
.ml-boxes .ml-box--draft.is-on{border-left-color:#d98324;}
.ml-box__t{font-size:.97rem;}
.ml-box__n{font-size:.74rem;}

/* the folders are their own group, ruled off from the three fixed boxes */
.ml-folds-wrap{margin-top:18px;padding-top:16px;border-top:2px solid var(--line);}
#ml_folders .ml-fold{border-radius:0;padding:10px 14px;border-left:4px solid transparent;
  border-bottom:1px solid var(--line);}
#ml_folders .ml-fold:last-child{border-bottom:none;}
#ml_folders .ml-fold.is-on{border-left-color:var(--navy);}
#ml_folders:not(:empty){border:1px solid var(--line);border-radius:14px;overflow:hidden;
  margin-bottom:10px;}

.statbox__n{display:block;margin-top:5px;font-style:normal;font-size:.72rem;
  font-weight:600;color:var(--muted);line-height:1.35;text-transform:none;letter-spacing:0;}

/* ---------- an opened message: toolbar, then the message ---------- */
.ml-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;
  padding-bottom:14px;margin-bottom:16px;border-bottom:1px solid var(--line);}
.ml-bar .btn{white-space:nowrap;}
.ml-subject{font-family:var(--font-head);font-size:1.55rem;color:var(--navy);
  margin:0 0 8px;line-height:1.2;}
.ml-move{font-family:var(--font-body);font-weight:700;font-size:.86rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:11px;
  padding:0 .8em;cursor:pointer;}
/* one height for every control in the two action rows */
.ml-bar .btn,.ml-bar .ml-move,
.ml-bulk .btn,.ml-bulk .ml-move{height:36px;min-height:36px;line-height:1;
  display:inline-flex;align-items:center;}
.ml-move:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.ml-move:disabled{opacity:.45;cursor:not-allowed;}
.ml-danger{color:var(--red);--edge:#e0a79c;}
.ml-danger:hover{background:#fdf2f0;}
/* the message itself gets room to read */
.ml-body{max-width:68ch;padding-top:4px;}
.ml-body p{margin:0 0 12px;}
@media (max-width:620px){
  .ml-bar{gap:6px;}
  .ml-bar .btn,.ml-move{font-size:.8rem;padding:.45em .7em;}
  .ml-subject{font-size:1.25rem;}
}

/* the sender's details, below the message */
.ml-det{margin-top:18px;padding-top:12px;border-top:1px solid var(--line);max-width:68ch;}
.ml-det__l{font-size:.62rem;font-weight:800;letter-spacing:.11em;text-transform:uppercase;
  color:var(--muted);margin:0 0 6px;}
.ml-det__r{display:flex;gap:12px;padding:1px 0;font-size:.8rem;line-height:1.45;align-items:baseline;}
.ml-det__r span{flex:0 0 84px;color:var(--muted);font-weight:600;}
.ml-det__r b{color:var(--muted);font-weight:700;overflow-wrap:anywhere;}
.ml-det__r b a{font-weight:700;}
.ml-when{color:var(--muted);}
@media (max-width:560px){
  .ml-det__r{gap:10px;}
  .ml-det__r span{flex:0 0 84px;}
}

#ml_list{border-top:1px solid var(--line);margin:0 -14px;padding:0;}
#ml_list .mlrow:last-child{border-bottom:none;}

/* ---------- compose header: labelled rows ---------- */
.cw{border:1px solid var(--line);border-radius:14px;overflow:hidden;margin-bottom:12px;background:#fff;}
.cw-row{display:flex;align-items:center;gap:12px;padding:9px 14px;border-bottom:1px solid var(--line);}
.cw-row:last-child{border-bottom:none;}
.cw-l{flex:0 0 62px;font-size:.78rem;font-weight:800;letter-spacing:.04em;color:var(--muted);}
.cw-row textarea,.cw-row input{flex:1;min-width:0;border:none;background:none;outline:none;
  font-family:var(--font-body);font-size:.95rem;color:var(--ink);resize:none;line-height:1.5;padding:0;}
.cw-r{display:flex;gap:6px;flex:0 0 auto;}
.cw-t{border:none;background:none;font-family:var(--font-body);font-weight:700;font-size:.78rem;
  color:var(--muted);cursor:pointer;padding:4px 8px;border-radius:8px;}
.cw-t:hover{background:rgba(30,42,107,.08);color:var(--navy);}
.cw-t.is-on{background:var(--navy);color:#fff;}

.ml-sigtog{display:inline-flex;align-items:center;gap:8px;cursor:pointer;user-select:none;
  font-size:.84rem;font-weight:700;color:var(--navy);}
.ml-sigtog input{position:absolute;opacity:0;}
.ml-sigtog span{width:36px;height:20px;border-radius:999px;background:#cfd2e6;position:relative;
  transition:background .18s ease;flex:0 0 auto;}
.ml-sigtog span::after{content:"";position:absolute;top:3px;left:3px;width:14px;height:14px;
  border-radius:50%;background:#fff;transition:transform .18s ease;}
.ml-sigtog input:checked + span{background:#2f6bfe;}
.ml-sigtog input:checked + span::after{transform:translateX(16px);}
.ml-body .sig,.ml-edit .sig{margin-top:14px;padding-top:10px;border-top:1px solid var(--line);
  font-size:.9rem;color:var(--muted);}
@media (max-width:560px){
  .cw-row{flex-wrap:wrap;gap:4px;}
  .cw-l{flex:1 0 100%;}
}

.ml-tools{row-gap:6px;}
/* one height for every control in the toolbar, matching the message bar */
.ml-tools button,.ml-tools .ml-pick{height:36px;min-height:36px;}
.ml-tools .ml-sw{width:26px;height:26px;min-width:26px;min-height:26px;}
.ml-pick{font-family:var(--font-body);font-weight:700;font-size:.8rem;color:var(--navy);
  background:#fff;border:1.5px solid var(--line);border-radius:9px;
  padding:0 .5em;cursor:pointer;max-width:118px;}
.ml-pick--n{max-width:92px;}
.ml-pick:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.ml-edit blockquote{border-left:3px solid var(--line);margin:10px 0;padding-left:14px;color:var(--muted);}
.ml-edit pre{background:rgba(30,42,107,.06);border-radius:9px;padding:10px 12px;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.86rem;overflow-x:auto;}
.ml-edit hr{border:none;border-top:1px solid var(--line);margin:14px 0;}

.ml-tools .ml-ico{justify-content:flex-start;padding-left:9px;letter-spacing:-.06em;}
.ml-tools .ml-ico--c{justify-content:center;padding-left:0;}
.ml-tools .ml-ico--r{justify-content:flex-end;padding-left:0;padding-right:9px;}


/* ============================================================
   MOBILE — the console as an app, not a squeezed desktop
   ============================================================ */
.aburger{display:none;width:42px;height:42px;border:none;background:rgba(255,255,255,.14);
  border-radius:11px;cursor:pointer;flex-direction:column;align-items:center;
  justify-content:center;gap:5px;flex:0 0 auto;}
.aburger span{width:20px;height:2.5px;background:#fff;border-radius:2px;transition:.2s;}
.aburger[aria-expanded="true"] span:nth-child(1){transform:translateY(7.5px) rotate(45deg);}
.aburger[aria-expanded="true"] span:nth-child(2){opacity:0;}
.aburger[aria-expanded="true"] span:nth-child(3){transform:translateY(-7.5px) rotate(-45deg);}
.ascrim{position:fixed;inset:0;background:rgba(10,14,30,.5);z-index:18;}
.ml-menu{display:none;}

@media (max-width:1330px){
  .aburger{display:flex;}
  .abar{gap:12px;padding:9px 14px;flex-wrap:nowrap;}
  .abar{flex-wrap:nowrap;}
  .abar__user{margin-left:auto;gap:8px;}
  .who{display:none;}          /* the email is on the Settings tab */

  /* the tabs become a drawer, one per line, with room to tap */
  .atabs{position:fixed;top:0;left:0;bottom:0;width:270px;z-index:19;
    background:linear-gradient(180deg,#1e2a6b,#141c40);
    flex-direction:column;align-items:stretch;gap:2px;
    padding:66px 12px 20px;overflow-y:auto;margin:0;
    transform:translateX(-104%);transition:transform .26s ease;
    box-shadow:var(--shadow-lg);flex-wrap:nowrap;}
  body.anav-open .atabs{transform:none;}
  .atabs .atab{text-align:left;justify-content:flex-start;width:100%;
    min-height:46px;font-size:.98rem;border-radius:11px;}
  .atabs .agrp{width:100%;}
  .atabs .agrp__btn{width:100%;text-align:left;justify-content:flex-start;min-height:46px;}
  /* a hover menu is meaningless without a pointer — show groups inline */
  .agrp__menu{position:static;display:block;padding:2px 0 6px 14px;min-width:0;}
  .agrp__menu-in{background:transparent;box-shadow:none;padding:0;border:none;}
  .agrp__menu .atab{min-height:42px;font-size:.92rem;color:#c3cbf0;}
  .agrp__btn em{display:none;}

}

/* the console's own density only needs to change on a small screen */
@media (max-width:860px){
  .apanel{padding:18px 14px 48px;}
  .view-head h1{font-size:1.5rem;}
  .acard{padding:16px;}
  .theme-row{grid-template-columns:1fr;}
}

/* ---------- mail: the phone pattern ----------
   Begins where .ml stops being two columns, so the sidebar is never a
   full-width block sitting above the messages. */
@media (max-width:1000px){
  .ml-menu{display:flex;align-items:center;gap:8px;width:100%;
    font-family:var(--font-body);font-weight:800;font-size:.92rem;color:var(--navy);
    background:#fff;border:1.5px solid var(--line);border-radius:12px;
    min-height:44px;padding:0 14px;margin-bottom:12px;cursor:pointer;}
  .ml-menu:hover{border-color:#2f6bfe;}

  .ml{grid-template-columns:1fr;gap:0;}
  /* the mailbox list is a drawer, not a column stacked above the mail */
  .ml-side{position:fixed;top:0;left:0;bottom:0;width:272px;z-index:22;
    background:#fff;padding:18px 14px;overflow-y:auto;
    border-right:1px solid var(--line);box-shadow:var(--shadow-lg);
    transform:translateX(-104%);transition:transform .26s ease;}
  body.ml-side-open .ml-side{transform:none;}

  /* opening a message replaces the list, as a phone mail app does */
  body.ml-reading #ml_listCard{display:none;}
  body.ml-reading .ml-menu{display:none;}
  .ml-read,.ml-compose{padding:0;border:none;box-shadow:none;background:transparent;}

  /* one scrolling row of tools rather than four wrapped rows */
  .ml-tools{flex-wrap:nowrap;overflow-x:auto;padding:8px 10px;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .ml-tools::-webkit-scrollbar{display:none;}
  .ml-tools .ml-sep{flex:0 0 auto;}

  /* the message toolbar: back stays put, the rest scrolls */
  .ml-bar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;padding-bottom:2px;}
  .ml-bar::-webkit-scrollbar{display:none;}
  .ml-bar .btn{flex:0 0 auto;}

  .ml-subject{font-size:1.15rem;}
  .ml-body{max-width:none;}
  .mlrow{padding:12px 12px;}
  .ml-edit{min-height:300px;}
  .cw-row{flex-wrap:wrap;}
  .cw-l{flex:1 0 100%;padding-bottom:2px;}
}


/* mobile · rows of chips scroll rather than stacking into a wall
   ------------------------------------------------------------------
   Eleven tool tabs wrapping over six rows pushed the analytics off the
   screen entirely; a bulk bar shown before anything is selected did the
   same to the mail list. Both are now one scrolling row, and the bulk
   actions appear only once they can act on something. */
@media (max-width:860px){

  /* the same treatment for every other chip row in the console */
  .seg-per,.site-sub,.geo-sec .seg-per{flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;justify-content:flex-start;}
  .seg-per::-webkit-scrollbar,.site-sub::-webkit-scrollbar{display:none;}
  .seg-per>*,.site-sub>*{flex:0 0 auto;}

  /* mail: nothing selected, nothing to show */
  .ml-bulk{display:none;}
  body.ml-picked .ml-bulk{display:flex;flex-wrap:nowrap;overflow-x:auto;
    scrollbar-width:none;align-items:center;gap:7px;}
  body.ml-picked .ml-bulk::-webkit-scrollbar{display:none;}
  .ml-bulk>*{flex:0 0 auto;}
  .ml-bulk__hint{display:none;}          /* the buttons are the instruction */

  .ml-head{flex-wrap:wrap;gap:8px;}
  .ml-head h2{flex:1 0 auto;font-size:1.2rem;}
  .ml-head .btn{flex:0 0 auto;}
}

/* the sender block is a footnote to the message, so it is quiet and compact */
.ml-det{border-radius:12px;background:var(--bg);padding:12px 14px;margin-top:16px;}
.ml-det__l{margin:0 0 8px;font-size:.66rem;font-weight:800;letter-spacing:.1em;
  text-transform:uppercase;color:var(--muted);}
.ml-det__r{display:flex;align-items:baseline;gap:12px;padding:3px 0;font-size:.86rem;}
.ml-det__r span{flex:0 0 96px;color:var(--muted);}
.ml-det__r b{font-weight:600;color:var(--ink);min-width:0;overflow-wrap:anywhere;}


/* nothing in a scrolling row may force the page wider than the screen */
.tool-tabs,.seg-per,.site-sub,.ml-tools,.ml-bar,.ml-bulk{min-width:0;max-width:100%;}
.geo-sec,.acard,.apanel,.tabview{min-width:0;}

@media (max-width:560px){
  .tool-pick{width:100%;gap:9px;padding:8px 12px;}
  .tool-pick__l{display:none;}          /* the picker explains itself */
  .tool-pick select{flex:1;min-height:34px;}
}

@media (max-width:700px){
  .abar__brand span{display:none;}       /* the mark is enough on a phone */
}


/* mobile · action rows read as a decision, not a heap
   ------------------------------------------------------------------
   Four or five buttons of different widths wrapping into ragged rows
   gives no clue which one matters. On a narrow screen the primary
   action takes the full width and the alternatives share a row of
   equal thirds beneath it, so the shape of the choice is legible. */
@media (max-width:700px){
  /* a permission tick carries a permissions consequence, so it gets the
     same touch floor as every other control */
  .perm-tick{width:44px;height:44px;min-width:44px;min-height:44px;}
  .perm td{padding:5px 4px;}
  .perm{min-width:560px;}

  .tool-edit__actions{display:flex;flex-wrap:wrap;gap:8px;align-items:stretch;}
  .tool-edit__actions .btn{flex:1 1 calc(50% - 4px);justify-content:center;min-height:44px;}
  .tool-edit__actions .btn--primary{flex:1 1 100%;}
  /* a note under the row keeps its own line rather than wedging between buttons */
  .tool-edit__actions .srcmsg,
  .tool-edit__actions .save-note{flex:1 0 100%;text-align:left;}

  /* the same shape for the other action clusters in the console */
  .doc-row__acts,.bkrow__acts,.rcitem__acts{width:100%;gap:8px;}
  .doc-row__acts .btn,.bkrow__acts .btn,.rcitem__acts .btn{flex:1 1 calc(50% - 4px);
    justify-content:center;min-height:44px;}

  /* full-width fields, so a label is never squeezed beside its input */
  .invrow,.rcrow{grid-template-columns:1fr;}
  .invrow .iv-line,.rcrow .rc-line{text-align:left;}
  .invrow .rc-del,.rcrow .rc-del,.dutyrow .rc-del{justify-self:start;}
  .afield input,.afield select,.afield textarea{width:100%;}
}


/* ============================================================
   THE DRAWER — sections, a way out, and a way back to the site
   ============================================================ */
.adrawer__head,.adrawer__foot,.agrp__lbl,.adrawer__x{display:none;}

@media (max-width:1330px){
  /* the drawer holds its own title bar, so the console header is not the
     only place to close it */
  .adrawer__head{display:flex;align-items:center;gap:10px;
    position:sticky;top:0;z-index:2;margin:-66px -12px 10px;padding:14px 14px 12px;
    background:linear-gradient(180deg,#1e2a6b,#1b2560);
    border-bottom:1px solid rgba(255,255,255,.14);}
  .adrawer__t{font-family:var(--font-head);font-size:1.05rem;color:#fff;flex:1;}
  .adrawer__x{display:flex;align-items:center;justify-content:center;
    width:38px;height:38px;border:none;border-radius:10px;
    background:rgba(255,255,255,.14);color:#fff;font-size:.9rem;cursor:pointer;}
  .adrawer__x:hover{background:rgba(255,255,255,.28);}

  /* a group is a section of the list, not a menu hanging off a button */
  .agrp__btn{display:none;}
  .agrp__lbl{display:block;margin:16px 0 4px;padding:0 12px;
    font-size:.64rem;font-weight:800;letter-spacing:.13em;text-transform:uppercase;
    color:#8f97c4;}
  .agrp__menu{position:static;display:block;padding:0;min-width:0;}
  .agrp__menu-in{background:transparent;box-shadow:none;padding:0;border:none;}
  .agrp__menu .atab{min-height:44px;font-size:.95rem;color:#dfe3f4;}

  /* the way back to the public site, and out */
  .adrawer__foot{display:flex;gap:8px;align-items:center;
    position:sticky;bottom:0;z-index:2;
    margin:22px -12px -32px;padding:12px 12px 16px;
    background:linear-gradient(180deg,rgba(20,28,64,.92),#141c40 40%);
    border-top:1px solid rgba(255,255,255,.16);
    backdrop-filter:blur(4px);}
  .adrawer__site{flex:1;}
  .adrawer__out{flex:0 0 auto;padding:0 14px;}
  .adrawer__site{display:flex;align-items:center;min-height:46px;padding:0 12px;
    border-radius:11px;background:rgba(255,255,255,.10);
    color:#fff;font-weight:700;font-size:.95rem;text-decoration:none;}
  .adrawer__site:hover{background:rgba(255,255,255,.2);color:#fff;}
  .adrawer__out{min-height:44px;border:1.5px solid rgba(255,255,255,.28);
    border-radius:11px;background:transparent;color:#f7a89b;
    font-family:var(--font-body);font-weight:800;font-size:.92rem;cursor:pointer;}
  .adrawer__out:hover{background:rgba(226,59,46,.22);color:#fff;}

  /* momentum scrolling, and room to clear a phone's home bar */
  .atabs{-webkit-overflow-scrolling:touch;overscroll-behavior:contain;
    padding-bottom:32px;}
}

/* the console title is a link home — say so rather than leaving it to chance */
.abar__brand{position:relative;}
.abar__brand:hover{opacity:.9;}
@media (min-width:1331px){
  .abar__brand::after{content:"↩ site";margin-left:9px;font-family:var(--font-body);
    font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
    color:#9fa8d6;background:rgba(255,255,255,.10);padding:4px 8px;border-radius:999px;}
  .abar__brand:hover::after{background:rgba(255,255,255,.22);color:#fff;}
}

/* the console must not scroll behind an open drawer, or the gesture chains
   to it and the overscroll snap reads as shaking */
body.anav-open,body.ml-side-open{
  position:fixed;left:0;right:0;width:100%;
  top:calc(-1 * var(--__scrollY, 0px));
  overflow:hidden;
}
/* touch-action stays off the body: intersected with the drawer's pan-y it
   would block the very scrolling the drawer needs */
.atabs,.ml-side{overscroll-behavior:contain;-webkit-overflow-scrolling:touch;touch-action:pan-y;}
.ascrim{touch-action:none;}


/* ---------- payroll ---------- */
.pr-pane{display:none;}
.pr-pane.is-on{display:block;}
/* withholding does not apply to a contractor, so the card reads as closed
   rather than merely empty */
#pr_dedCard.is-off{opacity:.62;}
#pr_dedCard.is-off .afield{pointer-events:none;}
.rcitem.is-off{opacity:.55;}
.invrow .pi-desc{grid-column:1;}

/* duties: numbered so the order reads as a list, not a heap */
.dutyrow{display:grid;grid-template-columns:26px 1fr 34px;gap:9px;align-items:center;margin-bottom:8px;}
.dutyrow__n{font-family:var(--font-head);font-size:.92rem;color:var(--muted);text-align:center;}
.dutyrow input{font-family:var(--font-body);font-size:.92rem;padding:.55em .75em;
  border:1.5px solid var(--line);border-radius:11px;background:#fff;color:var(--ink);
  width:100%;min-width:0;}
.dutyrow input:focus{outline:none;border-color:#2f6bfe;box-shadow:0 0 0 3px rgba(47,107,254,.16);}
.rcitem__who span.rcitem__duties{display:flex;flex-wrap:wrap;gap:5px;margin-top:5px;
  white-space:normal;overflow:visible;text-overflow:clip;}
.rcitem__duties em{font-style:normal;font-size:.72rem;font-weight:600;color:var(--navy);
  background:rgba(30,42,107,.07);padding:3px 9px;border-radius:999px;
  white-space:normal;max-width:100%;}
.rcitem__duties em.more{color:var(--muted);background:transparent;}
@media (max-width:700px){
  .dutyrow{grid-template-columns:22px 1fr 32px;gap:7px;}
}

/* in payroll the name-and-duties column carries the prose, so it is given
   the room rather than losing it to five fixed tracks */
.tabview[data-view="payroll"] .rcitem{grid-template-columns:86px minmax(0,1fr) 64px 92px max-content auto;}
@media (max-width:900px){
  .tabview[data-view="payroll"] .rcitem{grid-template-columns:1fr auto;}
}

/* an overflowing certificate loses the line that makes it checkable, so the
   warning sits in the preview bar rather than in a console message */
.ct-warn{flex:1 1 100%;margin-top:6px;font-size:.78rem;font-weight:700;line-height:1.45;
  color:#9a5b18;background:#fbf0dd;border-radius:9px;padding:7px 11px;}

/* tick lists: several programmes, several achievements */
.ct-picks{display:grid;grid-template-columns:repeat(auto-fit,minmax(230px,1fr));gap:7px;}
.ct-pick{display:flex;align-items:flex-start;gap:9px;background:#fff;
  border:1.5px solid var(--line);border-radius:11px;padding:9px 12px;cursor:pointer;
  font-size:.86rem;color:var(--ink);line-height:1.4;min-height:44px;
  transition:border-color .14s ease,background .14s ease;}
.ct-pick:hover{border-color:#2f6bfe;}
.ct-pick input{width:17px;height:17px;flex:0 0 auto;margin-top:1px;accent-color:#2f6bfe;}
.ct-pick:has(input:checked){background:rgba(47,107,254,.07);border-color:#2f6bfe;}
.ct-pick:has(input:checked) span{font-weight:700;color:var(--navy);}
@media (max-width:700px){ .ct-picks{grid-template-columns:1fr;} }

.ct-grp{margin-bottom:12px;}
.ct-grp__h{display:block;font-size:.7rem;font-weight:800;letter-spacing:.09em;
  text-transform:uppercase;color:var(--navy);margin-bottom:6px;}

/* the two recovery boxes read as quieter than the working ones */
.ml-boxes .ml-box--spam.is-on{border-left-color:#d98324;}
.ml-boxes .ml-box--trash.is-on{border-left-color:var(--muted);}

/* the role badge distinguishes super admin from admin at a glance */
.rolebadge.rb-super_admin{background:var(--red);color:#fff;}
.rolebadge.rb-admin{background:#2f6bfe;color:#fff;}
.rolebadge.rb-manager{background:#0f6b6b;color:#fff;}
.rolebadge.rb-editor{background:#7c5cff;color:#fff;}
.rolebadge.rb-viewer{background:rgba(255,255,255,.22);color:#fff;}

/* what this role reaches, and what it does not */
#roleGrid{display:grid;grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:7px;}
.rolerow{display:flex;align-items:center;gap:9px;padding:8px 12px;border-radius:10px;
  font-size:.88rem;font-weight:600;border:1.5px solid var(--line);background:#fff;}
.rolerow__i{width:19px;height:19px;border-radius:50%;display:flex;align-items:center;
  justify-content:center;font-size:.66rem;font-weight:800;color:#fff;flex:0 0 auto;}
.rolerow.is-yes{border-color:rgba(47,125,82,.3);}
.rolerow.is-yes .rolerow__i{background:#2f7d52;}
.rolerow.is-no{opacity:.6;}
.rolerow.is-no .rolerow__i{background:var(--muted);}

/* the permissions matrix */
.perm-wrap{overflow-x:auto;}
.perm{width:100%;border-collapse:collapse;min-width:520px;}
.perm th{font-size:.68rem;font-weight:800;letter-spacing:.08em;text-transform:uppercase;
  color:var(--muted);text-align:center;padding:0 8px 9px;border-bottom:2px solid var(--line);}
.perm th:first-child{text-align:left;}
.perm td{padding:9px 8px;border-bottom:1px solid var(--line);text-align:center;}
.perm .perm-a{text-align:left;font-weight:700;color:var(--navy);font-size:.9rem;}
.perm .perm-a em{display:block;font-style:normal;font-size:.68rem;font-weight:600;
  color:var(--muted);margin-top:2px;}
.perm-tick{display:inline-flex;align-items:center;justify-content:center;
  width:34px;height:34px;border-radius:9px;cursor:pointer;
  transition:background .14s ease;}
.perm-tick:hover{background:rgba(47,107,254,.10);}
.perm-tick input{width:17px;height:17px;accent-color:#2f6bfe;cursor:pointer;}
.perm-tick.is-fixed{cursor:default;opacity:.5;}
.perm-tick.is-fixed:hover{background:none;}

/* access list, folded inside the Account card */
.rolebox{margin:16px 0 18px;border:1px solid var(--line);border-radius:12px;background:var(--bg);}
.rolebox summary{list-style:none;cursor:pointer;display:flex;align-items:center;gap:10px;
  padding:11px 14px;font-weight:800;font-size:.9rem;color:var(--navy);}
.rolebox summary::-webkit-details-marker{display:none;}
.rolebox summary::after{content:"";width:8px;height:8px;margin-left:6px;flex:0 0 auto;
  border-right:2px solid currentColor;border-bottom:2px solid currentColor;
  transform:rotate(45deg) translateY(-2px);transition:transform .2s ease;}
.rolebox[open] summary::after{transform:rotate(-135deg) translateY(-2px);}
.rolebox summary em{margin-left:auto;font-style:normal;font-size:.76rem;font-weight:700;
  color:#1f6b45;background:#e3f4ea;padding:3px 10px;border-radius:999px;}
.rolebox > :not(summary){margin-left:14px;margin-right:14px;}
.rolebox[open]{padding-bottom:12px;}
/* the rows sit in two compact columns rather than a long single list */
.rolebox #roleGrid{display:grid;grid-template-columns:repeat(auto-fill,minmax(150px,1fr));gap:6px;}
.rolebox .rolerow{padding:6px 9px;font-size:.84rem;}