/* ═══════════════════════════════════════════════════════════════════════════
   pro.css — v5 design layer
   ---------------------------------------------------------------------------
   Loaded AFTER assets/ux.css. It does three things and nothing else:

     1. COLOUR — replaces the token values with a measured palette. Every pair
        of text-on-surface meets WCAG AA (4.5:1 body, 3:1 large). Status
        colours are used for meaning only; decoration stays on one brand hue.

     2. TYPE & NUMBERS — a real numeric style. Every figure in the product uses
        tabular, lining figures with a slashed zero, so columns line up and a
        3 can never shift a table sideways. One scale, six steps.

     3. COMPONENTS — the panel, stat, bar, chip and row primitives that the
        dashboard, analytics, calendar list and notebook are built from.

   Layout rules the old sheet got wrong (sidebar height, dense rows) are fixed
   here with dvh units and height-based media queries, so the app looks right
   at 100% and 90% zoom and on a 768 px-tall laptop.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────────────────────
   1. PALETTE
   ─────────────────────────────────────────────────────────────────────────── */
:root{
  /* dark — deep neutral navy, one violet accent, muted status ramps */
  --bg:#080a11; --panel:#0d1017; --card:#12161f; --card2:#181d28;
  --line:#232936; --line-2:#2e3646;
  --text:#eceff7; --muted:#9aa3b7; --dim:#77808f;

  --accent:#8b93ff; --accent2:#c08bfa; --accenth:#737dff;
  --accentq:rgba(139,147,255,.14);
  --brand:#8b93ff; --brand-2:#c08bfa;

  --success:#4ade80; --success-q:rgba(74,222,128,.14);
  --danger:#fb7185;  --danger-q:rgba(251,113,133,.14);
  --warn:#fbbf24;    --warn-q:rgba(251,191,36,.14);
  --stage-3:#f0a92e; --stage-3-q:rgba(240,169,46,.14);
  --info:#7fb2ff;    --info-q:rgba(127,178,255,.14);
  --purple:#c4a2ff;  --purple-q:rgba(196,162,255,.14);

  --office:#8fb8ff;  --officeq:rgba(143,184,255,.13);
  --personal:#c4a2ff;--personalq:rgba(196,162,255,.13);
  --blue:var(--info); --crit:#fb7185;

  --shadow-sm:0 1px 1px rgba(0,0,0,.35);
  --shadow:0 1px 2px rgba(0,0,0,.4), 0 10px 26px -14px rgba(0,0,0,.85);
  --shadow-lg:0 2px 8px rgba(0,0,0,.45), 0 28px 60px -20px rgba(0,0,0,.9);
  --ring:0 0 0 3px rgba(139,147,255,.34);
}

[data-theme="light"]{
  /* day — paper, ink, the same single accent */
  --bg:#f2f4fa; --panel:#ffffff; --card:#ffffff; --card2:#f6f8fd;
  --line:#e3e7f1; --line-2:#cfd6e6;
  --text:#0e1424; --muted:#545e73; --dim:#6d768a;

  --accent:#4054e8; --accent2:#8b3ae0; --accenth:#2f43dc;
  --accentq:rgba(64,84,232,.09);
  --brand:#4054e8; --brand-2:#8b3ae0;

  --success:#137a3c; --success-q:rgba(19,122,60,.09);
  --danger:#c02b45;  --danger-q:rgba(192,43,69,.08);
  --warn:#9a5b06;    --warn-q:rgba(154,91,6,.09);
  --stage-3:#c2750a; --stage-3-q:rgba(194,117,10,.12);
  --info:#1d4ed8;    --info-q:rgba(29,78,216,.08);
  --purple:#6d28d9;  --purple-q:rgba(109,40,217,.08);

  --office:#1d4ed8;  --officeq:rgba(29,78,216,.08);
  --personal:#6d28d9;--personalq:rgba(109,40,217,.08);
  --blue:var(--info); --crit:#a3122b;

  --shadow-sm:0 1px 2px rgba(16,24,64,.05);
  --shadow:0 1px 2px rgba(16,24,64,.05), 0 10px 26px -16px rgba(16,24,64,.22);
  --shadow-lg:0 2px 6px rgba(16,24,64,.06), 0 30px 60px -24px rgba(16,24,64,.28);
  --ring:0 0 0 3px rgba(64,84,232,.22);
}

/* the app frame: one height unit that does not change with zoom rounding */
:root{
  --bb-h:58px;
  --r-xs:8px; --r-sm:10px; --r:14px; --r-lg:18px; --r-xl:22px;
  --font-ui:'Plus Jakarta Sans','Jakarta Fallback','Segoe UI',system-ui,-apple-system,sans-serif;
  --font-num:'JetBrains Mono','Jakarta Fallback',ui-monospace,SFMono-Regular,Menlo,monospace;
  --t-1:28px; --t-2:20px; --t-3:16px; --t-4:14px; --t-5:13px; --t-6:12px; --t-7:11px;
}

/* ───────────────────────────────────────────────────────────────────────────
   2. NUMBERS — one rule, used everywhere
   ─────────────────────────────────────────────────────────────────────────── */
/* Two numeric roles, and only two.
     · Figures you READ — KPI values, headline metrics — are set in the interface
       face with tabular figures. Equal-width digits stop the layout jumping
       between 9 and 10, and a 0 is a 0, not a boxed glyph or a dotted circle.
     · Figures you COMPARE down a column — times, dates, IDs, deltas — are set in
       the monospace face, because there the fixed pitch does the aligning. */
.stat-v, .hero-metric .v, .kpi .v, .dash-tile .dv, .pro-metric, .ring-num{
  font-family:var(--font-ui);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  letter-spacing:-.025em;
}
.num, .rd-tbl td, .tbl td, .tbl th, .cal-tbl td, .cal-tbl th, .nb-count, .bell-badge,
.trow-when, .when, time, .mono{
  font-family:var(--font-num);
  font-variant-numeric:tabular-nums lining-nums;
  font-feature-settings:'tnum' 1,'lnum' 1;
  letter-spacing:-.01em;
}
/* column figures right-align so digits stack */
.tbl .r, .rd-tbl .r, .cal-tbl .r{ text-align:right; }

/* ───────────────────────────────────────────────────────────────────────────
   3. SHELL — the sidebar must fit the window, at any zoom
   ─────────────────────────────────────────────────────────────────────────── */
/* The app is exactly one viewport tall: header + frame, nothing to clip.
   --bb-h is measured at runtime (pro.js) because the header height changes
   with the breakpoint; the fallback keeps the first paint stable. */
@media (min-width: 761px){
  html, body{ height:100dvh; overflow:hidden; }
  .app{
    grid-template-columns:246px minmax(0,1fr);
    height:calc(100dvh - var(--bb-h)) !important;
    margin:0 !important;
    min-height:0;
    overflow:hidden;
  }
  .side{
    height:100%; min-height:0; overflow:hidden;
    padding:14px 12px 10px !important;
    display:flex; flex-direction:column;
  }
  .side .nav{ flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
              scrollbar-width:thin; padding-right:2px; }
  /* Exactly one sticky element in the content column: the status strip.
     The filter toolbar used to stick as well, at the same `top`, so the two
     bars competed for the same row — and because the toolbar is a rounded
     card, the first task card appeared to slide underneath a floating box.
     Now the toolbar scrolls away and the strip alone is pinned, painting a
     full-bleed opaque background so rows pass cleanly behind it. */
  .main .toolbar{ position:static; }
  .main .stabwrap{
    position:sticky; top:0; z-index:9;
    padding-top:6px;
    background:var(--panel);
  }
  .main .stabwrap::before{
    content:""; position:absolute; z-index:-1;
    left:-24px; right:-24px; top:-10px; bottom:-1px;
    background:var(--panel);
    border-bottom:1px solid color-mix(in srgb, var(--line) 70%, transparent);
    box-shadow:0 10px 16px -18px rgba(16,24,64,.55);
  }
  .side .me{ flex:0 0 auto; margin-top:10px; }
  .main{ height:100% !important; min-height:0; }
  .content{ min-height:0; overscroll-behavior:contain; }
}

.nav-gt{ font-size:9px; letter-spacing:.14em; padding:0 12px 6px; color:var(--dim); }
.nav button{
  padding:8px 11px; font-size:13px; border-radius:10px; gap:10px;
  color:var(--muted);
}
.nav button .ic, .nav button svg.ico{ width:17px; height:17px; flex:0 0 17px; }
.nav-group + .nav-group{ margin-top:12px; }
.nav button.on{
  background:var(--accentq); color:var(--accent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--accent) 22%, transparent);
  font-weight:700;
}
[data-theme="dark"] .nav button.on{ background:rgba(139,147,255,.16); color:#fff; }
.nav .count{ font-size:10px; min-width:18px; height:18px; background:var(--accent); color:#fff; }
.nav button.on .count{ background:var(--accent); }

/* short windows: tighten rather than clip */
@media (max-height: 820px){
  .nav button{ padding:6.5px 10px; font-size:12.5px; }
  .nav-group + .nav-group{ margin-top:9px; }
  .nav-gt{ font-size:8.5px; padding-bottom:4px; }
  .side{ padding:10px 10px 8px !important; }
  .side .me{ margin-top:7px; }
}
@media (max-height: 700px){
  .nav button{ padding:5px 9px; font-size:12px; }
  .side .me{ padding:6px; }
  .mechip-in .dg{ display:none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   4. PRIMITIVES
   ─────────────────────────────────────────────────────────────────────────── */
.pro{ display:flex; flex-direction:column; gap:16px; padding-bottom:26px; }

.pro-head{
  display:flex; align-items:flex-end; justify-content:space-between; gap:16px; flex-wrap:wrap;
  padding:2px 2px 0;
}
.pro-head h2{
  font-size:var(--t-1); font-weight:750; letter-spacing:-.035em; margin:2px 0 4px;
  line-height:1.15;
}
.pro-head .meta{ font-size:var(--t-5); color:var(--muted); }
.eyebrow{
  font-size:10px; font-weight:700; letter-spacing:.14em; text-transform:uppercase;
  color:var(--dim);
}

.panel{
  background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg);
  box-shadow:var(--shadow-sm); overflow:hidden;
}
.panel-h{
  display:flex; align-items:center; justify-content:space-between; gap:12px;
  padding:14px 16px 12px; border-bottom:1px solid var(--line);
}
.panel-h > div:first-child{ min-width:0; }
.panel-t{ font-size:var(--t-3); font-weight:720; letter-spacing:-.02em; display:flex; align-items:center; gap:8px; }
.panel-s{ font-size:var(--t-6); color:var(--muted); margin-top:2px; }
.panel-b{ padding:14px 16px; }
.panel-b.flush{ padding:0; }
.panel-f{ padding:10px 16px; border-top:1px solid var(--line); background:var(--card2); }

.split2{ display:grid; grid-template-columns:1fr 1fr; gap:16px; }
.grid-2-1{ display:grid; grid-template-columns:1.55fr 1fr; gap:16px; align-items:start; }
@media (max-width: 1100px){
  .split2, .grid-2-1{ grid-template-columns:1fr; }
}

/* stat — the number is the point */
.stat-grid{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.stat{
  position:relative; display:flex; flex-direction:column; gap:6px;
  padding:14px 15px 13px; border-radius:var(--r); background:var(--card);
  border:1px solid var(--line); box-shadow:var(--shadow-sm); text-align:left;
  transition:border-color .16s, transform .16s, box-shadow .16s;
}
button.stat{ cursor:pointer; font:inherit; color:inherit; }
button.stat:hover{ transform:translateY(-1px); box-shadow:var(--shadow); border-color:var(--line-2); }
.stat .k{ font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); display:flex; align-items:center; gap:6px; }
.stat-v{ font-size:27px; font-weight:700; line-height:1.05; letter-spacing:-.03em; }
.stat .u{ font-size:.58em; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0;
          vertical-align:.06em; }
.hero-metric .u{ font-size:.56em; font-weight:600; color:var(--muted); margin-left:3px; letter-spacing:0;
                 vertical-align:.06em; }
.stat .sub{ font-size:11.5px; color:var(--muted); }
.stat.tone-danger .stat-v{ color:var(--danger); }
.stat.tone-warn   .stat-v{ color:var(--warn); }
.stat.tone-ok     .stat-v{ color:var(--success); }
.stat.tone-info   .stat-v{ color:var(--info); }
.stat.tone-brand  .stat-v{ color:var(--accent); }

/* bar + segmented bar */
.bar{ height:6px; border-radius:99px; background:var(--card2); overflow:hidden; display:flex; }
.bar > i{ display:block; height:100%; border-radius:99px; }
.segbar{ display:flex; height:8px; border-radius:99px; overflow:hidden; background:var(--card2); }
.segbar > i{ height:100%; }
.legend{ display:flex; flex-wrap:wrap; gap:10px 14px; margin-top:10px; }
.legend span{ display:inline-flex; align-items:center; gap:6px; font-size:11.5px; color:var(--muted); }
.legend b{ color:var(--text); font-weight:700; }
.dot{ width:8px; height:8px; border-radius:99px; display:inline-block; flex:0 0 8px; }

/* chips */
.chipx{
  display:inline-flex; align-items:center; gap:5px; height:21px; padding:0 8px;
  border-radius:99px; font-size:11px; font-weight:700; letter-spacing:.01em;
  background:var(--card2); color:var(--muted); white-space:nowrap;
  border:1px solid var(--line);
}
.chipx.ok    { background:var(--success-q); color:var(--success); border-color:transparent; }
.chipx.late  { background:var(--danger-q);  color:var(--danger);  border-color:transparent; }
.chipx.soon  { background:var(--warn-q);    color:var(--warn);    border-color:transparent; }
.chipx.info  { background:var(--info-q);    color:var(--info);    border-color:transparent; }
.chipx.pers  { background:var(--personalq); color:var(--personal);border-color:transparent; }

/* task row — the horizontal unit used by dashboard, calendar list, modals */
.trow{
  display:grid; grid-template-columns:4px minmax(0,1fr) auto auto auto;
  align-items:center; gap:12px; width:100%;
  padding:10px 16px; background:transparent; border:0; border-bottom:1px solid var(--line);
  text-align:left; cursor:pointer; color:inherit; font:inherit;
}
.trow:last-child{ border-bottom:0; }
.trow:hover{ background:var(--card2); }
.trow .mark{ width:4px; height:26px; border-radius:99px; background:var(--line-2); }
.trow-t{
  font-weight:650; font-size:var(--t-4); letter-spacing:-.012em;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.trow-m{ font-size:11.5px; color:var(--muted); margin-top:2px; display:flex; gap:6px; flex-wrap:wrap; align-items:center; }
.trow-when{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:11.5px; color:var(--muted); text-align:right; white-space:nowrap; }
.trow-when b{ display:block; color:var(--text); font-weight:600; font-size:12px; }
.trow.is-late .trow-when b{ color:var(--danger); }
.trow.is-late .mark{ background:var(--danger); }
.trow.is-soon .mark{ background:var(--warn); }
.trow.is-ok .mark{ background:var(--success); }
.trow.is-idle .mark{ background:var(--info); }

/* empty state */
.pro-empty{
  display:flex; flex-direction:column; align-items:center; justify-content:center; gap:8px;
  padding:30px 16px; text-align:center; color:var(--muted); font-size:13px;
}
.pro-empty .big{ font-size:26px; opacity:.75; }

/* ───────────────────────────────────────────────────────────────────────────
   5. TABLES
   ─────────────────────────────────────────────────────────────────────────── */
.tbl-wrap{ overflow:auto; max-height:min(62vh, 560px); border-radius:0 0 var(--r-lg) var(--r-lg); }
.tbl{ width:100%; border-collapse:separate; border-spacing:0; font-size:var(--t-5); }
.tbl th{
  position:sticky; top:0; z-index:2; text-align:left; font-weight:650; font-size:10.5px;
  letter-spacing:.06em; text-transform:uppercase; color:var(--muted);
  background:var(--card); padding:9px 12px; border-bottom:1px solid var(--line);
  white-space:nowrap;
}
.tbl td{ padding:9px 12px; border-bottom:1px solid var(--line); vertical-align:middle; }
.tbl tbody tr:last-child td{ border-bottom:0; }
.tbl tbody tr:hover td{ background:var(--card2); }
.tbl tbody tr.clickable{ cursor:pointer; }
.tbl .n{ font-family:var(--font-num); font-variant-numeric:tabular-nums; }
.tbl .strong{ font-weight:650; }

/* ───────────────────────────────────────────────────────────────────────────
   6. CALENDAR
   ─────────────────────────────────────────────────────────────────────────── */
.calbar{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; margin-bottom:12px; }
/* the old grid was drawn from heights; it now scales inside its column */
.calgrid{ display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:8px; }
.calgrid .cdow{
  font-size:10px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:0 2px 4px; text-align:left;
}
.calgrid .cell{
  min-height:104px; border-radius:12px; border:1px solid var(--line);
  background:var(--card); padding:7px 8px 8px; display:flex; flex-direction:column; gap:4px;
  overflow:hidden;
}
.calgrid .cell.empty{ background:transparent; border-color:transparent; }
.calgrid .cell.today{ border-color:color-mix(in srgb,var(--accent) 45%,transparent); background:var(--accentq); }
.calgrid .cell.clickable{ cursor:pointer; }
.calgrid .cell.clickable:hover{ border-color:var(--line-2); }
.cnum{ display:flex; align-items:center; justify-content:space-between; gap:4px; }
.cnum > span:first-child{ font-family:var(--font-num); font-size:11.5px; font-weight:600; color:var(--muted); }
.calgrid .cell.today{ box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--accent) 55%,transparent); }
.calgrid .cell.today .cnum > span:first-child{
  color:var(--accent); font-weight:700;
}
.cdy-cnt{
  font-family:var(--font-num); font-size:9.5px; font-weight:700; color:var(--muted);
  background:var(--card2); border-radius:99px; padding:1px 5px;
}
.cchip{
  font-size:10.5px; line-height:1.25; padding:2px 5px 2px 6px; border-radius:6px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}
.cmore{ font-size:10px; font-weight:700; color:var(--accent); padding-left:2px; }

/* agenda (horizontal list) */
.cal-list{ display:flex; flex-direction:column; }
.cal-day{
  display:flex; align-items:baseline; gap:10px; padding:12px 16px 6px;
  background:var(--card); position:sticky; top:0; z-index:1;
}
.cal-day .d{ font-weight:720; font-size:var(--t-4); }
.cal-day .w{ font-size:11.5px; color:var(--muted); }
.cal-day .line{ flex:1; height:1px; background:var(--line); }
.cal-day.today .d{ color:var(--accent); }
@media (max-width: 780px){
  .calgrid{ grid-template-columns:repeat(7,minmax(0,1fr)); gap:4px; }
  .calgrid .cell{ min-height:66px; padding:4px; }
  .cchip{ display:none; }
  .trow{ grid-template-columns:4px minmax(0,1fr) auto; }
  .trow-when{ display:none; }
  .trow .chipx.hide-sm{ display:none; }
}

/* ───────────────────────────────────────────────────────────────────────────
   7. NOTEBOOK — collapsed entries
   ─────────────────────────────────────────────────────────────────────────── */
.nb-entry{
  border:1px solid var(--line); border-radius:var(--r); background:var(--card);
  margin-bottom:8px; overflow:hidden;
}
.nb-entry-head{
  display:grid; grid-template-columns:56px minmax(0,1fr) auto 18px; align-items:center; gap:10px;
  padding:11px 14px; cursor:pointer;
}
.nb-entry-head:hover{ background:var(--card2); }
.nb-subj{ font-weight:650; font-size:var(--t-4); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.nb-date{ font-family:var(--font-num); font-size:11.5px; color:var(--muted); }
.nb-time{ font-size:11px; color:var(--dim); }
.nb-chev{ color:var(--dim); transition:transform .18s; }
.nb-entry.open .nb-chev{ transform:rotate(180deg); }
.nb-prev{
  padding:0 14px 12px 80px; font-size:12.5px; color:var(--muted); line-height:1.55;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden;
  white-space:normal; word-break:break-word;
}
.nb-entry.open .nb-prev{ display:none; }
.nb-body{ padding:0 14px 12px 80px; font-size:13.5px; line-height:1.7; white-space:pre-wrap; color:var(--text); }
.nb-entry:not(.open) .nb-body{ display:none; }
.nb-entry:not(.open) .nb-entry-foot{ display:none; }
.nb-entry-foot{ padding:0 14px 12px 80px; display:flex; gap:8px; }
.nb-meta{ font-size:11px; color:var(--dim); }
@media (max-width: 640px){
  .nb-entry-head{ grid-template-columns:minmax(0,1fr) auto 16px; }
  .nb-date{ display:none; }
  .nb-prev, .nb-body, .nb-entry-foot{ padding-left:14px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   8. ANALYTICS
   ─────────────────────────────────────────────────────────────────────────── */
.hero{
  display:grid; grid-template-columns:auto minmax(0,1fr); gap:22px; align-items:center;
  padding:18px 20px; border-radius:var(--r-lg); border:1px solid var(--line);
  background:var(--card); box-shadow:var(--shadow-sm);
}
.hero-metrics{ display:grid; grid-template-columns:repeat(auto-fit,minmax(112px,1fr)); gap:18px 20px; }
.hero{ grid-template-columns:auto minmax(0,1fr); }
.hero-metric .k{ font-size:10.5px; font-weight:650; letter-spacing:.06em; text-transform:uppercase; color:var(--muted); }
.hero-metric .v{ font-size:23px; font-weight:700; margin-top:3px; }
.hero-metric .d{ font-size:11px; color:var(--muted); margin-top:2px; }
@media (max-width: 720px){ .hero{ grid-template-columns:1fr; } }

.ring{ position:relative; width:112px; height:112px; }
.ring svg{ transform:rotate(-90deg); }
.ring .val{
  position:absolute; inset:0; display:grid; place-content:center; text-align:center;
  font-family:var(--font-num); font-size:24px; font-weight:700; letter-spacing:-.03em;
}
.ring .val small{ display:block; font-family:'Plus Jakarta Sans',sans-serif; font-size:9.5px;
  letter-spacing:.12em; text-transform:uppercase; color:var(--muted); font-weight:700; margin-top:2px; }

.hbar{ display:grid; grid-template-columns:minmax(90px,160px) minmax(0,1fr) 52px; gap:12px; align-items:center; padding:7px 0; }
.hbar .lbl{ font-size:12.5px; color:var(--text); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.hbar .track{ height:8px; background:var(--card2); border-radius:99px; overflow:hidden; }
.hbar .fill{ height:100%; border-radius:99px; }
.hbar .val{ font-family:var(--font-num); font-variant-numeric:tabular-nums; font-size:12.5px; font-weight:650; text-align:right; }

.sect{ display:flex; flex-direction:column; gap:0; }
.sect-h{ display:flex; align-items:flex-start; justify-content:space-between; gap:14px; padding:16px 18px 12px; }
.sect-h h3{ font-size:var(--t-3); letter-spacing:-.02em; margin:0 0 3px; }
.sect-h p{ font-size:var(--t-6); color:var(--muted); margin:0; max-width:62ch; line-height:1.5; }

/* ───────────────────────────────────────────────────────────────────────────
   9. MISC
   ─────────────────────────────────────────────────────────────────────────── */
.btn.sm{ padding:6px 11px; font-size:12px; border-radius:9px; }
.btn.ghost.sm{ background:transparent; border:1px solid var(--line); }
.link{ color:var(--accent); font-weight:650; font-size:12.5px; cursor:pointer; background:none; border:0; padding:0; }
.link:hover{ text-decoration:underline; }
.stack{ display:flex; flex-direction:column; gap:10px; }
.row{ display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.grow{ flex:1 1 auto; }

/* wide modal for the day list + long tables */
.modal.wide{ max-width:1040px; }
@media (max-width:1100px){ .modal.wide{ max-width:100%; } }

/* dialogs that must never trap content */
.modal{ max-height:min(88dvh, 900px); }

/* skeleton shimmer respects the new surfaces */
.skeleton{ background:linear-gradient(90deg,var(--card) 25%,var(--card2) 37%,var(--card) 63%); }

/* focus visibility everywhere */
:where(button,a,input,select,textarea,[tabindex]):focus-visible{
  outline:2px solid var(--accent); outline-offset:2px; border-radius:8px;
}

/* ───────────────────────────────────────────────────────────────────────────
   10. ALERTS — bottom-left, so they never sit on top of a table's last column
   ─────────────────────────────────────────────────────────────────────────── */
/* top-right, under the header: never over the sidebar, never over a table's
   last column, and it matches where the eye already goes for account chrome */
/* Bottom-right: the conventional place for a transient notice, out of the way
   of the header actions and the first rows of any table. Transient by design —
   the permanent record lives in the bell's alert centre. */
.alert-host{
  right:18px !important; left:auto !important;
  top:auto !important;
  bottom:calc(18px + env(safe-area-inset-bottom)) !important;
  width:min(330px, calc(100vw - 36px)) !important;
}
.alert-toast{ position:relative; padding-right:30px !important; }
.alert-toast::after{
  content:"×"; position:absolute; top:6px; right:9px; font-size:15px; line-height:1;
  color:var(--muted); font-weight:600;
}
.alert-toast:hover::after{ color:var(--text); }
.alert-toast{ animation:alertDown .22s ease-out; }
@keyframes alertDown{ from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
@media (max-width: 760px){
  .alert-host{ left:10px !important; right:10px !important; width:auto !important;
    top:auto !important; bottom:calc(78px + env(safe-area-inset-bottom)) !important; }
}
.alert-toast{
  background:var(--panel) !important; border:1px solid var(--line) !important;
  border-left:3px solid var(--accent) !important; border-radius:12px;
  box-shadow:var(--shadow-lg) !important; padding:10px 13px !important;
}
.alert-toast{ display:flex; gap:9px; align-items:flex-start; }
.alert-toast .at-ic{ flex:0 0 auto; width:24px; height:24px; border-radius:8px; display:grid; place-items:center;
  background:var(--accent-q); color:var(--accent); margin-top:1px; }
.alert-toast .at-tx{ min-width:0; flex:1 1 auto; }
.alert-toast .at-t{ font-weight:700; font-size:12.5px; letter-spacing:-.01em; }
.alert-toast .at-b{ font-size:11.5px; color:var(--muted); }

.nb-quick{
  width:100%; display:flex; align-items:center; gap:10px; margin:0 0 14px;
  padding:13px 15px; border:1px dashed var(--line-2); border-radius:var(--r);
  background:var(--card); color:var(--muted); font:inherit; font-size:13.5px;
  text-align:left; cursor:text; transition:.16s;
}
.nb-quick:hover{ border-color:var(--accent); color:var(--text); background:var(--card2); }
.nb-quick svg{ color:var(--accent); flex:0 0 auto; }
.nb-quick span{ flex:1 1 auto; }
.nb-kbd{
  font-family:var(--font-num); font-size:10px; line-height:1; padding:3px 6px;
  border:1px solid var(--line-2); border-radius:5px; color:var(--dim); background:var(--panel);
}
/* onboarding: a first-run card, not a permanent fixture */
.onb{ border-radius:var(--r-lg) !important; border:1px solid var(--line); box-shadow:var(--shadow-sm); }
.onb h3{ font-size:15px; }

/* today: the number carries the mark, not a floating blob */
.calgrid .cell.today .cnum{ background:none !important; box-shadow:none !important; width:auto !important; height:auto !important; display:flex !important; }
.cnum .dnum.now{
  display:inline-grid; place-items:center; min-width:20px; height:20px; padding:0 5px;
  border-radius:99px; background:var(--accent); color:#fff; font-weight:700;
  box-shadow:0 3px 8px -3px color-mix(in srgb,var(--accent) 80%,transparent);
}

/* ───────────────────────────────────────────────────────────────────────────
   11. PHONE CHROME
   ─────────────────────────────────────────────────────────────────────────── */
@media (max-width: 760px){
  /* the bottom bar floats over the page — leave room to scroll clear of it */
  .pro{ padding-bottom: calc(76px + env(safe-area-inset-bottom)); }
}
@media (max-width: 560px){
  /* "TeamControlSh…" is worse than no words at all — the mark still identifies
     the product, and the page header repeats the name. */
  .brandbar .bb-name{ display:none; }
  .brandbar .bb-tag{ display:none; }
  .brandbar .bb-titles{ display:none; }
  .top-actions{ gap:6px; }
}

/* ───────────────────────────────────────────────────────────────────────────
   8. THE STATUS STRIP — ten filters that must never sit on the content
   The old bar was `position:sticky` with a transparent background and fixed
   minimum widths. At 1366 px the ten pills were wider than the page, so they
   both overlapped each other and slid over the task cards beneath them.
   Now: one row, no minimum width, a real opaque surface, and it scrolls
   sideways with a fade at the edge instead of wrapping into two rows.
   ─────────────────────────────────────────────────────────────────────────── */
.stabbar{
  position:sticky; top:0; z-index:6;
  display:flex; align-items:center; gap:6px;
  padding:8px 2px 10px; margin-bottom:2px;
  background:var(--bg);
  box-shadow:0 10px 12px -10px rgba(9,12,26,.18);
  overflow-x:auto; overflow-y:hidden;
  scrollbar-width:none; -ms-overflow-style:none;
  overscroll-behavior-x:contain;
  scroll-snap-type:x proximity;
}
.stabbar::-webkit-scrollbar{ display:none; }
.stab{
  flex:0 0 auto; min-width:0; scroll-snap-align:start;
  display:inline-flex; flex-direction:row; align-items:center; gap:5px;
  padding:8px 9px; border-radius:10px; white-space:nowrap;
  font-size:12px; font-weight:650; letter-spacing:-.014em;
  background:var(--card); border:1px solid var(--line); color:var(--muted);
  box-shadow:none;
}
.stab .s-l{ font-size:12px; }
/* Ten filters, one row, no scrolling on a laptop: the counter is what people
   scan, so it keeps its own box and the words give up the slack. */
@media (min-width: 1200px){ .stab{ padding:8px 8px; gap:4px; font-size:11.8px; } .stab .s-l{ font-size:11.8px; } }
/* Laptop widths: the words lose half a point of weight before anything hides. */
@media (min-width: 1100px) and (max-width: 1439px){
  .stab{ padding:7px 6px; gap:3px; font-size:11.2px; letter-spacing:-.02em; }
  .stab .s-l{ font-size:11.2px; }
  .stab .s-c{ padding:1px 4px; min-width:16px; font-size:10px; }
}
.stab .s-c{
  font-family:var(--font-num); font-size:10.5px; font-weight:600; opacity:1;
  min-width:18px; padding:1px 5px; border-radius:6px; text-align:center;
  background:var(--card2); color:var(--muted); border:1px solid var(--line);
}
.stab.on{ background:var(--grad); color:#fff; border-color:transparent; box-shadow:0 8px 18px -12px rgba(124,140,255,.95); }
.stab.on .s-c{ background:rgba(255,255,255,.22); color:#fff; border-color:transparent; }
.stab .s-dot{ position:static; width:6px; height:6px; }
/* a fade on both ends says "there is more to the right", without a scrollbar */
.stabwrap{ position:relative; }
.stabwrap::after{
  content:''; position:sticky; right:0; float:right; width:34px; height:100%;
  margin-left:-34px; pointer-events:none;
  background:linear-gradient(to right,transparent,var(--bg));
}
@media (max-width:760px){
  .stabbar{ padding:8px 0 10px; }
  .stab{ padding:8px 11px; font-size:12px; }
}

/* an emoji replaced by an icon sits on the text baseline, not in a box */
.em-ic{ display:inline-flex; align-items:center; justify-content:center; vertical-align:-.18em; margin-right:.3em; }
.em-ic svg{ display:block; }
.stab .em-ic, .btn .em-ic, .pal-ic .em-ic{ margin-right:.25em; }
.stab .em-ic + .s-l{ margin-left:0; }

/* ───────────────────────────────────────────────────────────────────────────
   9. CHAT — two panes that both behave
   ─────────────────────────────────────────────────────────────────────────── */
.chatx{
  display:grid; grid-template-columns:248px minmax(0,1fr);
  height:100%; min-height:0; gap:0;
  border:1px solid var(--line); border-radius:var(--r-lg); overflow:hidden;
  background:var(--card); box-shadow:var(--shadow-sm);
}
.chatx-side{
  display:flex; flex-direction:column; gap:4px; padding:10px;
  border-right:1px solid var(--line); background:color-mix(in srgb,var(--panel) 55%,transparent);
  overflow-y:auto; min-height:0;
}
.cx-h{
  font-size:9.5px; font-weight:700; letter-spacing:.1em; text-transform:uppercase;
  color:var(--dim); padding:10px 8px 5px;
}
.cx-none{ font-size:12px; color:var(--muted); line-height:1.5; padding:8px; }
.cx-add{ margin-top:auto; justify-content:center; }
.chx{
  display:flex; align-items:center; gap:9px; width:100%; text-align:left;
  padding:7px 8px; border-radius:10px; border:1px solid transparent;
  background:none; color:var(--text); font:inherit; cursor:pointer; transition:.14s;
}
.chx:hover{ background:var(--card2); }
.chx.on{ background:var(--card); border-color:var(--line); box-shadow:var(--shadow-sm); }
.chx.on .chx-nm{ color:var(--accent); }
.chx-av{ position:relative; flex:0 0 auto; display:grid; place-items:center; }
.chx-av .avatar{ border-radius:9px; }
.chx-av.team{ width:30px; height:30px; border-radius:9px; background:var(--accent-q); color:var(--accent); }
.chx-av .dot{
  position:absolute; right:-2px; bottom:-2px; width:9px; height:9px; border-radius:50%;
  border:2px solid var(--card);
}
.chx-av .dot.live{ background:var(--success); }
.chx-av .dot.idle{ background:var(--dim); }
.chx-tx{ display:flex; flex-direction:column; min-width:0; flex:1 1 auto; }
.chx-nm{ font-size:12.5px; font-weight:650; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chx-sub{ font-size:10.5px; color:var(--muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.chx.pending .chx-nm{ color:var(--muted); }
.chx .ch-badge{ margin-left:auto; background:var(--danger); color:#fff; font-size:10px; font-weight:800;
  border-radius:9px; padding:1px 6px; }
.chatx-main{ display:flex; flex-direction:column; min-width:0; min-height:0; }
.cx-head{
  display:flex; align-items:center; justify-content:space-between; gap:10px;
  padding:12px 16px; border-bottom:1px solid var(--line); flex:0 0 auto;
}
.cx-t{ font-size:14.5px; font-weight:700; letter-spacing:-.015em; }
.cx-s{ font-size:11.5px; color:var(--muted); margin-top:1px; }
.chatx .msgs{ flex:1 1 auto; min-height:0; overflow-y:auto; padding:16px 16px 8px; gap:10px; display:flex; flex-direction:column; }
.msgr{ display:flex; gap:8px; align-items:flex-end; max-width:min(76%,560px); }
.msgr.me{ align-self:flex-end; flex-direction:row-reverse; }
.msgr .bb{ min-width:0; }
.msgr .who{ font-size:10px; font-weight:700; letter-spacing:.05em; text-transform:uppercase; color:var(--accent); margin:0 0 3px 2px; }
.msgr .bd{ font-size:13.4px; line-height:1.55; white-space:pre-wrap; word-break:break-word; }
.msgr .tm{ font-family:var(--font-num); font-size:9.5px; opacity:.55; margin-top:4px; text-align:right; }
.msgr .bb{
  background:var(--card2); border:1px solid var(--line); border-radius:13px 13px 13px 4px; padding:8px 12px;
}
.msgr.me .bb{ background:var(--grad); border-color:transparent; color:#fff; border-radius:13px 13px 4px 13px; }
.msgr.me .tm{ color:rgba(255,255,255,.85); opacity:.9; }
.msgr .bb img{ border-radius:10px; max-width:240px; display:block; }
.chat-empty{ margin:auto; text-align:center; max-width:340px; color:var(--muted); }
.ce-ic{ width:44px; height:44px; border-radius:14px; margin:0 auto 10px; display:grid; place-items:center;
  background:var(--accent-q); color:var(--accent); }
.ce-t{ font-size:13.5px; font-weight:650; color:var(--text); }
.ce-s{ font-size:12px; margin-top:3px; line-height:1.55; }
.chatx .composer{
  display:flex; align-items:flex-end; gap:6px; margin:0; padding:10px 12px 12px;
  border-top:1px solid var(--line); border-radius:0; background:var(--card); flex:0 0 auto;
}
.chatx .composer .attach{
  width:34px; height:34px; border-radius:9px; display:grid; place-items:center;
  background:var(--card2); border:1px solid var(--line); color:var(--muted); cursor:pointer;
}
.chatx .composer .attach:hover{ color:var(--text); border-color:var(--line-2); }
.chatx .composer textarea{
  flex:1 1 auto; min-height:34px; max-height:120px; padding:8px 10px; resize:none;
  border:1px solid var(--line); border-radius:9px; background:var(--card2); color:var(--text);
  font:inherit; font-size:13.4px; outline:none;
}
.chatx .composer textarea:focus{ border-color:var(--accent); box-shadow:var(--ring); }
.chatx .composer .btn{ height:34px; }
.chatx .preview-strip{ padding:0 12px; }
@media (max-width: 900px){
  /* the pane stack needs a real height to divide; without it the chatbox grew
     to the height of its content and left a gap under the composer */
  .chatwrap{ height:100%; min-height:0; }
  .chatx{ grid-template-columns:1fr; grid-template-rows:auto minmax(0,1fr); height:100%; }
  .chatx-side{ flex-direction:row; overflow-x:auto; overflow-y:hidden; border-right:0;
    border-bottom:1px solid var(--line); padding:8px; gap:6px; }
  .chatx-side .cx-h, .cx-none, .cx-add{ display:none; }
  .chx{ flex:0 0 auto; min-width:132px; }
  .chatx .msgs{ padding:12px; }
  .chatx .composer .attach{ display:none; }
}

/* the chat page owns the whole column: no page scroll, the message list scrolls */
.content.content-chat{ display:flex; flex-direction:column; overflow:hidden; padding-bottom:16px; }
.content.content-chat > .view{ flex:1 1 auto; min-height:0; display:flex; flex-direction:column; }
.content.content-chat .chatwrap{ flex:1 1 auto; min-height:0; height:auto; }

/* ── KPI tiles: one grid, not two competing ones ──────────────────────────
   The Overview, My Tasks and the Team screens all draw the same tile. With
   `auto-fit` and a fixed minimum the last row left a lonely tile and the
   count changed the shape of the page. A fixed six-column grid at desktop
   widths gives every tile the same size and every row the same rhythm. */
/* auto-fill with a generous minimum gives five tiles a row at a laptop width,
   which balances nine of them as 5 + 4 instead of stranding three. */
.kpis{ display:grid !important; gap:12px;
       grid-template-columns:repeat(auto-fill, minmax(196px, 1fr)) !important; }
@media (max-width: 1180px){ .kpis{ grid-template-columns:repeat(4, minmax(0,1fr)) !important; } }
@media (max-width: 900px){ .kpis{ grid-template-columns:repeat(3, minmax(0,1fr)) !important; } }
@media (max-width: 620px){ .kpis{ grid-template-columns:repeat(2, minmax(0,1fr)) !important; } }
.kpi{ min-width:0; }

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 · A — the top-bar pair reads as two different things
   Day is an amber sun, Night is an indigo moon, Alerts is a bell that is
   either on (accent) or off (muted + a small amber flag). Each also keeps a
   distinct ring so shape, colour and state all say the same thing.
   ═══════════════════════════════════════════════════════════════════════ */
#themeBtn, #notifBtn{ position:relative; transition:color .16s, background .16s, box-shadow .16s; }

#themeBtn.is-day{ color:#b4620a; }
#themeBtn.is-day:hover{ color:#8f4e05; }
#themeBtn.is-day .ico{ filter:drop-shadow(0 0 6px rgba(240,170,60,.45)); }
[data-theme="dark"] #themeBtn.is-day{ color:#ffcf6b; }

#themeBtn.is-night{ color:#5b58d6; }
[data-theme="dark"] #themeBtn.is-night{ color:#aab4ff; }
#themeBtn.is-night .ico{ filter:drop-shadow(0 0 6px rgba(120,130,255,.45)); }

#notifBtn.alerts-on{ color:var(--accent); }
[data-theme="dark"] #notifBtn.alerts-on{ color:#aab4ff; }
#notifBtn.alerts-off{ color:var(--muted); }
#notifBtn.alerts-off::after{
  content:""; position:absolute; top:6px; right:7px; width:6px; height:6px;
  border-radius:50%; background:var(--warn); box-shadow:0 0 0 2px var(--card);
}
#notifBtn.has-alerts{ box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--danger) 55%, transparent); }
#notifBtn.has-alerts.alerts-off::after{ display:none; }
.top-actions{ overflow:visible; }

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 · B — Day mode: the count inside the selected pill was white on a
   near-white chip. The label had already gone indigo; the count had not.
   ═══════════════════════════════════════════════════════════════════════ */
[data-theme="light"] .stab.on .s-c,
[data-theme="light"] .chip.on .s-c,
[data-theme="light"] .subnav button.on .s-c{
  background:rgba(59,73,224,.14); color:#3b49e0; opacity:1;
  box-shadow:inset 0 0 0 1px rgba(59,73,224,.06);
}
[data-theme="light"] .stab.on .s-dot{ background:var(--danger); box-shadow:0 0 0 2px #fff; }
[data-theme="light"] .stab.on{ box-shadow:0 1px 2px rgba(16,24,64,.06); }

/* Native widgets (selects, date pickers, scrollbars) must follow the theme. */
html[data-theme="dark"]{ color-scheme:dark; }
html[data-theme="light"]{ color-scheme:light; }

/* ROUND 5 · J — the roster shows everyone, so the signed-in profile needs a
   quiet marker rather than a second "role" line. */
.chx.is-self .chx-sub{ color:var(--dim); }
.you-tag{
  display:inline-block; margin-left:5px; padding:1px 5px; border-radius:99px;
  background:var(--accentq); color:var(--accent);
  font-size:9.5px; font-weight:800; letter-spacing:.05em; text-transform:uppercase;
  vertical-align:1px;
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 · F — phones: the bar shows five things, not eight in a scroller
   ═══════════════════════════════════════════════════════════════════════ */
.as-gt{
  font-size:9.5px;font-weight:800;letter-spacing:.12em;text-transform:uppercase;
  color:var(--dim);margin:14px 0 7px;
}
.as-grid{ display:grid;grid-template-columns:repeat(auto-fill,minmax(132px,1fr));gap:8px; }
.as-it{
  display:flex;align-items:center;gap:9px;text-align:left;
  padding:11px 12px;border-radius:12px;border:1px solid var(--line);
  background:var(--card2);color:var(--text);font:inherit;font-size:13px;font-weight:650;
  cursor:pointer;transition:.14s;
}
.as-it:hover{ border-color:var(--line-2);transform:translateY(-1px);box-shadow:var(--shadow-sm); }
.as-it.on{ border-color:color-mix(in srgb,var(--accent) 40%,var(--line));color:var(--accent); }
.as-ic{ display:grid;place-items:center;width:26px;height:26px;border-radius:8px;background:var(--accentq);color:var(--accent);flex:0 0 auto; }

@media (max-width:760px){
  .side .nav{ justify-content:space-between; }
  .side .nav button{ flex:1 1 0;min-width:0;padding:6px 4px; }
  .side .nav button .lb{ font-size:9px;letter-spacing:-.01em;max-width:100%;overflow:hidden;text-overflow:ellipsis; }
}

/* ROUND 5 · F/J — chat on a phone: compact avatar chips, so the whole roster
   is reachable by thumb instead of one row with the rest off-screen. */
@media (max-width:900px){
  .chatx-side{ gap:2px; padding:7px 8px; scroll-snap-type:x proximity; }
  .chatx-side .chx{
    flex:0 0 auto; min-width:0; width:auto; flex-direction:column; gap:2px;
    padding:6px 7px; border-radius:11px; scroll-snap-align:start;
  }
  .chatx-side .chx-tx{ align-items:center; }
  .chatx-side .chx-nm{ font-size:10px;max-width:66px;text-align:center; }
  .chatx-side .chx-sub{ display:none; }
  .chatx-side .chx-av .dot{ display:none; }
  .chatx-side .chx .ch-badge{ position:absolute;top:2px;right:2px;margin:0;font-size:9px;padding:0 4px; }
  .chatx-side .chx{ position:relative; }
  .chatx-side .chx-av .avatar{ width:30px !important;height:30px !important;font-size:11px !important; }
  .chatx-side .cx-add{ display:none; }
}

/* ROUND 5 · F — the chat page must end above the phone bar, not under it. The
   composer was being clipped by the fixed nav because the chat layout keeps its
   own 16px padding, which overrode the 118px the rest of the app reserves. */
@media (max-width:760px){
  .content.content-chat{ padding-bottom:86px; }
  .chatx-side .chx{ width:60px; }
  .chatx-side .chx-nm{ max-width:100%; }
}
@media (max-width:430px){
  /* the send glyph alone is enough once the label starts stealing the input */
  .chatx .composer .btn .snd-label{ display:none; }
  .chatx .composer .btn{ padding:0 11px; }
}

@media (max-width:760px){
  /* the group must take the row, or five buttons shrink to 35px and every
     label becomes an ellipsis */
  .side .nav .nav-group{ flex:1 1 auto;min-width:0; }
  .side .nav button{ flex:1 1 0;min-width:0; }
  .side .nav button .lb{ display:block;width:100%;text-align:center; }
}

/* chat chips: the name stays inside its 60px cell */
@media (max-width:900px){
  .chatx-side .chx{ width:60px;min-width:60px;max-width:60px;overflow:hidden; }
  .chatx-side .chx-tx{ width:100%;min-width:0; }
  .chatx-side .chx-nm{ display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
  .chatx-side .you-tag{ display:none; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 · F — Analytics / Reports on a phone
   The hero was one column, so six metrics pushed the actual analysis five
   screens down. Two columns, a smaller heading, and the same numbers.
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width:760px){
  .pro-head{ flex-direction:column; align-items:flex-start; gap:10px; }
  .pro-head h2{ font-size:21px; line-height:1.22; letter-spacing:-.01em; }
  .pro-head .row{ width:100%; flex-wrap:wrap; }
  .pro-head .meta{ font-size:12px; }
  .hero{ grid-template-columns:1fr !important; gap:14px; }
  .hero-metrics{ grid-template-columns:1fr 1fr !important; gap:12px 14px; }
  .hero-metric .v{ font-size:20px; }
  .hero-metric .k{ font-size:9.5px; }
  .stat-grid{ grid-template-columns:1fr 1fr !important; }
  .panel-b{ padding:12px !important; }
  .panel-b[style*="grid-template-columns:1fr 1fr"]{ grid-template-columns:1fr !important; }
  .sect-h h3, .panel-t{ font-size:13px; }
  .chart, .spark{ width:100%; }
  .tbl-wrap{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .tbl{ min-width:520px; }
  .rd-tbl{ min-width:0; }
}

/* ═══════════════════════════════════════════════════════════════════════
   ROUND 5 · F — the demo strip must never sit on the login card's actions
   ═══════════════════════════════════════════════════════════════════════ */
body.login-open #demobar{
  left:0 !important;right:0 !important;bottom:0 !important;
  transform:none !important;width:auto !important;max-width:none !important;
  border-radius:0 !important;justify-content:center;text-align:center;
  border-left:0 !important;border-right:0 !important;border-bottom:0 !important;
}
body.login-open .login-wrap{ padding-bottom:72px; }

/* the wrapper sticks; the bar inside it must not stick as well (two sticky
   boxes at top:0 fight for the same row) */
.main .stabwrap .stabbar{ position:static; }