/* =============================================================================
   SHELL — the single base every app renders inside.

   Structure, top to bottom:

     #auth        the role-picker sign-in screen
     #app         topbar (brand · app title · search · launcher · alerts · me)
                  rail   (nav for the CURRENT app only)
                  main   (the app's screens)
     overlays     launcher · theme picker · notifications · palette · story bar

   Switching app swaps the rail and the main region. It never re-mounts the
   topbar, so the identity, the alert count and the theme survive every jump —
   which is the whole point of "one platform, many apps".
   ========================================================================== */

:root {
  --topbar-h: 54px;
  --rail-w: 232px;
  --rail-w-min: 60px;
}

/* =============================================================================
   AUTH — role picker
   ========================================================================== */
.auth {
  position: fixed; inset: 0; z-index: 40;
  display: grid; grid-template-columns: 1.05fr 1.35fr;
  background: var(--bg);
}
@media (max-width: 1080px) { .auth { grid-template-columns: 1fr; } }

.auth-hero {
  position: relative; overflow: hidden;
  background: var(--rail);
  color: var(--rail-text);
  padding: 40px 44px;
  display: flex; flex-direction: column; justify-content: space-between;
}
@media (max-width: 1080px) { .auth-hero { display: none; } }
.auth-hero::before {
  content: ""; position: absolute; inset: 0;
  background: var(--bg-fx); opacity: .9;
}
.auth-dots {
  position: absolute; inset: 0;
  background-image: radial-gradient(rgba(255,255,255,.30) 1px, transparent 1px);
  background-size: 22px 22px;
  -webkit-mask-image: radial-gradient(120% 100% at 12% 8%, #000 38%, transparent 84%);
          mask-image: radial-gradient(120% 100% at 12% 8%, #000 38%, transparent 84%);
}
.auth-hero > * { position: relative; }
.auth-hero h1 { font-size: 40px; line-height: 1.08; letter-spacing: -.028em; }
.auth-hero .tag { color: var(--rail-muted); font-size: 14px; margin-top: 12px; max-width: 40ch; line-height: 1.6; }
.auth-stat { display: flex; gap: 28px; flex-wrap: wrap; }
.auth-stat .n { font-size: 25px; font-weight: 800; letter-spacing: -.02em; }
.auth-stat .l { font-size: 10.5px; color: var(--rail-muted); text-transform: uppercase; letter-spacing: .08em; font-weight: 700; margin-top: 1px; }

.auth-panel { padding: 32px 40px; overflow: auto; display: flex; flex-direction: column; }
@media (max-width: 620px) { .auth-panel { padding: 20px 16px; } }

/* The role grid is the sign-in. There is no password step: this is a
   prototype, and a fake password field would be the one interaction in the
   demo that teaches the audience nothing. */
.role-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 10px; }
@media (max-width: 1280px) { .role-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }
@media (max-width: 560px)  { .role-grid { grid-template-columns: 1fr; } }

.role-card {
  text-align: left; padding: 13px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: var(--elev-1);
  cursor: pointer; position: relative; overflow: hidden;
  transition: transform .18s cubic-bezier(.4,0,.2,1), box-shadow .18s ease, border-color .18s ease;
}
.role-card:hover { transform: translateY(-3px); box-shadow: var(--elev-3); border-color: var(--primary); }
.role-card.on { border-color: var(--primary); box-shadow: 0 0 0 3px color-mix(in srgb, var(--primary) 18%, transparent), var(--elev-2); }
.role-card .rc-top { position: absolute; inset: 0 0 auto 0; height: 3px; background: var(--brand-grad); }
.role-card .rc-name { font-size: 13px; font-weight: 700; margin-top: 8px; }
.role-card .rc-who { font-size: 11px; color: var(--muted); }
.role-card .rc-apps { font-size: 10.5px; color: var(--faint); margin-top: 8px; display: flex; align-items: center; gap: 5px; }

/* The panel that explains what the selected role can actually do. This exists
   because the first question in every demo is "and what does a procurement
   manager see?" — better to answer it on the login screen than to be asked. */
.role-detail {
  border: 1px solid var(--border); border-radius: var(--radius);
  background: var(--surface); box-shadow: var(--elev-2);
  overflow: hidden;
}
.role-detail-hd { padding: 14px 16px; background: var(--brand-grad); color: #fff; }
.feat-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 6px 14px; }
@media (max-width: 720px) { .feat-grid { grid-template-columns: 1fr; } }
.feat { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; line-height: 1.45; }
.feat svg { width: 13px; height: 13px; color: var(--rag-green); flex: none; margin-top: 2px; }
.feat.no svg { color: var(--faint); }
.feat.no { color: var(--muted); text-decoration: line-through; text-decoration-color: color-mix(in srgb, var(--muted) 45%, transparent); }

.app-pill {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600;
  background: var(--surface-2); color: var(--muted);
  border: 1px solid var(--border);
}
.app-pill svg { width: 12px; height: 12px; }
.app-pill.def { background: color-mix(in srgb, var(--primary) 12%, transparent); color: var(--primary); border-color: color-mix(in srgb, var(--primary) 28%, transparent); }

/* =============================================================================
   APP SHELL
   ========================================================================== */
/* `minmax(0, 1fr)` on the main column, not `1fr`.
   A bare `1fr` is `minmax(auto, 1fr)`, and `auto` means "at least min-content".
   The main column contains twelve-column dashboards and wide tables, so its
   min-content width is large — the shell grew wider than the viewport and the
   whole page scrolled sideways instead of the tables scrolling inside their own
   containers. Same trap as the inline grids in base.css, one level up. */
.shell {
  position: fixed; inset: 0; z-index: 1;
  display: grid;
  grid-template-columns: var(--rail-w) minmax(0, 1fr);
  grid-template-rows: var(--topbar-h) minmax(0, 1fr);
  grid-template-areas: "top top" "rail main";
}
.shell.rail-min { grid-template-columns: var(--rail-w-min) minmax(0, 1fr); }
@media (max-width: 900px) {
  .shell { grid-template-columns: minmax(0, 1fr); grid-template-areas: "top" "main"; }
}

/* ------------------------------------------------------------------ topbar */
.topbar {
  grid-area: top;
  display: flex; align-items: center; gap: 10px;
  padding: 0 12px 0 0;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  z-index: 20;
}
.tb-brand {
  width: var(--rail-w); flex: none;
  display: flex; align-items: center; gap: 9px;
  padding-left: 14px; height: 100%;
  background: var(--rail); color: var(--rail-text);
  transition: width .2s cubic-bezier(.4,0,.2,1);
}
.shell.rail-min .tb-brand { width: var(--rail-w-min); padding-left: 0; justify-content: center; }
.shell.rail-min .tb-brand .bn { display: none; }
@media (max-width: 900px) { .tb-brand { width: auto; padding: 0 12px; } }
.logo {
  width: 28px; height: 28px; border-radius: 8px; flex: none;
  display: grid; place-items: center;
  background: var(--accent-grad); color: #071120;
  font-weight: 900; font-size: 13px; letter-spacing: -.03em;
  box-shadow: 0 2px 10px color-mix(in srgb, var(--accent) 40%, transparent);
}
.bn .b1 { font-size: 13px; font-weight: 800; letter-spacing: -.015em; line-height: 1.1; }
.bn .b2 { font-size: 9px; color: var(--rail-muted); letter-spacing: .1em; text-transform: uppercase; font-weight: 700; }

.tb-title { display: flex; align-items: center; gap: 9px; padding-left: 14px; min-width: 0; }
.tb-title .ti { width: 26px; height: 26px; border-radius: 8px; display: grid; place-items: center; background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); flex: none; }
.tb-title .ti svg { width: 14px; height: 14px; }
.tb-title .tn { font-size: 13.5px; font-weight: 700; letter-spacing: -.01em; }
.tb-title .ts { font-size: 10.5px; color: var(--muted); }

.tb-act { display: flex; align-items: center; gap: 4px; margin-left: auto; }
.tb-btn {
  position: relative;
  width: 34px; height: 34px; border-radius: 9px;
  display: grid; place-items: center; color: var(--muted);
  transition: background .15s ease, color .15s ease;
}
.tb-btn:hover { background: var(--surface-2); color: var(--text); }
.tb-btn.on { background: color-mix(in srgb, var(--primary) 13%, transparent); color: var(--primary); }
.tb-btn svg { width: 17px; height: 17px; }
.tb-btn .count { position: absolute; top: -2px; right: -2px; }

.tb-me {
  display: flex; align-items: center; gap: 8px;
  padding: 3px 9px 3px 3px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface);
  transition: border-color .15s ease, background .15s ease;
}
.tb-me:hover { border-color: var(--border-strong); background: var(--surface-2); }
.tb-me .mn { font-size: 12px; font-weight: 700; line-height: 1.15; }
.tb-me .mr { font-size: 10px; color: var(--muted); }
@media (max-width: 760px) { .tb-me .mtxt { display: none; } }

/* -------------------------------------------------------------------- rail */
.rail {
  grid-area: rail;
  background: var(--rail); color: var(--rail-text);
  display: flex; flex-direction: column;
  overflow: hidden; z-index: 15;
  transition: width .2s cubic-bezier(.4,0,.2,1);
}
@media (max-width: 900px) {
  .rail {
    position: fixed; top: var(--topbar-h); left: 0; bottom: 0; width: var(--rail-w);
    transform: translateX(-100%); transition: transform .24s cubic-bezier(.4,0,.2,1);
    box-shadow: var(--elev-3);
  }
  .rail.open { transform: none; }
}
.rail-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 10px 8px; scrollbar-width: thin; scrollbar-color: var(--rail-line) transparent; }
.rail-scroll::-webkit-scrollbar { width: 5px; }
.rail-scroll::-webkit-scrollbar-thumb { background: var(--rail-line); border-radius: 999px; }

.rail-sec {
  font-size: 9.5px; font-weight: 800; letter-spacing: .1em; text-transform: uppercase;
  color: var(--rail-muted); opacity: .8;
  padding: 12px 10px 5px;
}
.shell.rail-min .rail-sec { text-align: center; padding: 10px 0 4px; font-size: 8px; }

.rail-item {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 10px; border-radius: 9px;
  color: var(--rail-muted); font-size: 12.5px; font-weight: 600;
  cursor: pointer; position: relative;
  transition: background .15s ease, color .15s ease;
  width: 100%; text-align: left;
}
.rail-item:hover { color: var(--rail-text); background: rgba(255,255,255,.07); }
.rail-item.on { color: var(--rail-text); background: var(--rail-2); }
.rail-item.on::before {
  content: ""; position: absolute; left: -8px; top: 7px; bottom: 7px; width: 3px;
  border-radius: 0 3px 3px 0; background: var(--rail-accent);
}
.rail-item svg { width: 16px; height: 16px; flex: none; }
/* The icon carries its own colour (set per item from the --nav-* tokens) while
   the label keeps the rail's text colour, so the two are independent. Muted a
   little when the row is idle and full strength on hover or when active —
   enough of a shift to feel responsive without the rail turning into bunting. */
.rail-item .rail-ic { display: flex; color: var(--ic, var(--rail-muted)); opacity: .88; transition: opacity .15s ease; }
.rail-item:hover .rail-ic,
.rail-item.on .rail-ic { opacity: 1; }
.rail-item .rl { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail-item .count { font-size: 9.5px; min-width: 16px; height: 16px; }
.shell.rail-min .rail-item { justify-content: center; padding: 9px 0; }
.shell.rail-min .rail-item .rl, .shell.rail-min .rail-item .count { display: none; }
.shell.rail-min .rail-item.on::before { left: 0; }

/* Sub-items under a rail entry (Suppliers / RFQs / POs under Procurement). */
.rail-sub { padding-left: 26px; font-size: 12px; font-weight: 500; }
.shell.rail-min .rail-sub { display: none; }

/* The collapse control lives in the top bar now, next to the brand, where a
   sidebar toggle is conventionally found and where it is reachable without
   travelling to the bottom of a scrolling nav. The footer is just the app
   caption. */
.rail-ft { flex: none; padding: 10px 12px; border-top: 1px solid var(--rail-line); }
.rail-note {
  font-size: 10px; color: var(--rail-muted); line-height: 1.45;
  padding: 8px 10px; border-radius: 8px; background: rgba(255,255,255,.05);
}
.shell.rail-min .rail-note { display: none; }

/* -------------------------------------------------------------------- main */
.main { grid-area: main; overflow: hidden; display: flex; flex-direction: column; position: relative; min-width: 0; }
.page { flex: 1; min-width: 0; overflow-y: auto; overflow-x: hidden; padding: 16px 18px 40px; }
@media (max-width: 620px) { .page { padding: 12px 12px 32px; } }
.page-max { max-width: 1560px; margin: 0 auto; }

.page-hd { display: flex; align-items: flex-start; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; }
.page-hd h1 { font-size: 21px; letter-spacing: -.022em; }
.page-hd .psub { font-size: 12.5px; color: var(--muted); margin-top: 2px; }

.sec-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 9px; }
.sec-hd h2 { font-size: 13px; font-weight: 700; letter-spacing: -.005em; }

/* A sticky sub-header inside a page (project 360 tab strip, filter bars). */
.sticky-bar {
  position: sticky; top: -16px; z-index: 5;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px);
  margin: -16px -18px 12px; padding: 10px 18px;
  border-bottom: 1px solid var(--border);
}
@media (max-width: 620px) { .sticky-bar { margin: -12px -12px 10px; padding: 8px 12px; } }

/* =============================================================================
   APP LAUNCHER — the waffle. The thing that makes this a platform of apps
   rather than one app with a long menu.
   ========================================================================== */
.launcher {
  position: fixed; z-index: 92;
  top: calc(var(--topbar-h) + 6px); right: 12px;
  width: min(520px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: var(--radius);
  box-shadow: var(--elev-3);
  overflow: hidden;
  animation: pop .17s cubic-bezier(.4,0,.2,1) backwards;
}
.launcher-hd { padding: 12px 14px; border-bottom: 1px solid var(--border); background: color-mix(in srgb, var(--surface-2) 55%, transparent); }
.launcher-bd { padding: 10px; max-height: min(66vh, 560px); overflow-y: auto; }
.launcher-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 7px; }
@media (max-width: 520px) { .launcher-grid { grid-template-columns: repeat(2, minmax(0,1fr)); } }

.app-tile {
  display: flex; flex-direction: column; gap: 7px;
  padding: 11px; border-radius: calc(var(--radius) - 3px);
  border: 1px solid transparent; text-align: left; cursor: pointer;
  transition: background .15s ease, border-color .15s ease, transform .15s ease;
  position: relative;
}
.app-tile:hover { background: var(--surface-2); border-color: var(--border); transform: translateY(-1px); }
.app-tile.on { background: color-mix(in srgb, var(--primary) 10%, transparent); border-color: color-mix(in srgb, var(--primary) 30%, transparent); }
.app-tile .at-n { font-size: 12px; font-weight: 700; line-height: 1.25; }
.app-tile .at-d { font-size: 10.5px; color: var(--muted); line-height: 1.35; }
.app-tile .at-def {
  position: absolute; top: 8px; right: 8px;
  font-size: 8.5px; font-weight: 800; letter-spacing: .06em;
  color: var(--primary); background: color-mix(in srgb, var(--primary) 14%, transparent);
  border-radius: 999px; padding: 1px 6px;
}

/* Apps a role is not entitled to are not rendered at all — see openLauncher()
   in shell.js. The entitlement matrix on #/admin is where the gaps are shown. */

/* ======================================================================= menus */
.menu {
  position: fixed; z-index: 92;
  min-width: 190px;
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: calc(var(--radius) - 2px);
  box-shadow: var(--elev-3);
  padding: 5px; overflow: hidden;
  animation: pop .15s cubic-bezier(.4,0,.2,1) backwards;
}
.menu-item {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 7px 9px; border-radius: 7px;
  font-size: 12.5px; text-align: left; color: var(--text);
  transition: background .12s ease;
}
.menu-item:hover { background: var(--surface-2); }
.menu-item svg { width: 15px; height: 15px; color: var(--muted); flex: none; }
.menu-item.on { color: var(--primary); }
.menu-item.on svg { color: var(--primary); }
.menu-sec { font-size: 9.5px; font-weight: 800; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); padding: 8px 9px 4px; }
.menu-sep { height: 1px; background: var(--border); margin: 4px 0; }

/* ------------------------------------------------------------ theme picker */
.theme-panel { position: fixed; z-index: 92; top: calc(var(--topbar-h) + 6px); right: 12px; width: min(380px, calc(100vw - 24px)); background: var(--surface); border: 1px solid var(--border-strong); border-radius: var(--radius); box-shadow: var(--elev-3); overflow: hidden; animation: pop .17s cubic-bezier(.4,0,.2,1) backwards; }
.theme-bd { padding: 10px; max-height: min(70vh, 600px); overflow-y: auto; }
.theme-grid { display: grid; grid-template-columns: repeat(2, minmax(0,1fr)); gap: 7px; }
.theme-tile {
  border: 1px solid var(--border); border-radius: calc(var(--radius) - 4px);
  padding: 8px; cursor: pointer; text-align: left;
  transition: border-color .15s ease, transform .15s ease;
}
.theme-tile:hover { border-color: var(--primary); transform: translateY(-1px); }
.theme-tile.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.theme-swatch { display: flex; height: 26px; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); }
.theme-swatch i { flex: 1; }
.theme-tile .tt-n { font-size: 11px; font-weight: 700; margin-top: 6px; }

/* Typeface picker. Each row previews itself: the name is set in the font it
   selects, which is the only honest way to choose one. The specimen line
   underneath carries digits and a currency figure on purpose — this is a
   dashboard, and how a face renders tabular numerals matters more here than
   how its lowercase g looks. */
.font-row {
  display: flex; align-items: center; gap: 11px;
  width: 100%; text-align: left;
  padding: 9px 11px; border-radius: calc(var(--radius) - 4px);
  border: 1px solid var(--border); background: var(--surface);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.font-row:hover { border-color: var(--primary); background: var(--surface-2); }
.font-row.on { border-color: var(--primary); box-shadow: 0 0 0 2px color-mix(in srgb, var(--primary) 22%, transparent); }
.font-row .fr-name { font-size: 14px; font-weight: 700; line-height: 1.2; }
.font-row .fr-spec { font-size: 11.5px; color: var(--muted); margin-top: 1px; font-variant-numeric: tabular-nums; }
.font-row .fr-tick { flex: none; width: 15px; height: 15px; color: var(--primary); opacity: 0; }
.font-row.on .fr-tick { opacity: 1; }

/* ============================================================ notifications */
.notif-item {
  display: flex; gap: 10px; padding: 11px 14px;
  border-bottom: 1px solid var(--border); cursor: pointer;
  transition: background .12s ease;
}
.notif-item:hover { background: var(--surface-2); }
.notif-item.unread { background: color-mix(in srgb, var(--primary) 5%, transparent); }
.notif-item.unread .nt { font-weight: 700; }
.notif-item .nt { font-size: 12.5px; line-height: 1.35; }
.notif-item .nm { font-size: 11px; color: var(--muted); margin-top: 3px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }

/* ========================================================= command palette */
.palette {
  position: fixed; z-index: 93; top: 12vh; left: 50%; transform: translateX(-50%);
  width: min(620px, calc(100vw - 24px));
  background: var(--surface); border: 1px solid var(--border-strong);
  border-radius: var(--radius); box-shadow: var(--elev-3); overflow: hidden;
  animation: pop-cx .17s cubic-bezier(.4,0,.2,1) backwards;
}
.palette-in { display: flex; align-items: center; gap: 10px; padding: 13px 15px; border-bottom: 1px solid var(--border); }
.palette-in input { flex: 1; background: none; border: 0; outline: none; font-size: 15px; }
.palette-in svg { width: 18px; height: 18px; color: var(--muted); }
.palette-bd { max-height: 52vh; overflow-y: auto; padding: 6px; }
.pal-item { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; cursor: pointer; width: 100%; text-align: left; }
.pal-item:hover, .pal-item.cur { background: var(--surface-2); }
.pal-item .pi-t { font-size: 12.5px; font-weight: 600; }
.pal-item .pi-s { font-size: 10.5px; color: var(--muted); }
.pal-item svg { width: 15px; height: 15px; color: var(--muted); flex: none; }

/* =============================================================================
   DEMO STORY BAR — the guided walkthrough.

   The requirement is emphatic that the prototype has to tell one continuous
   story rather than show a pile of screens. This bar is that story made
   operable: it drives role, app and route from a script, so the person
   presenting cannot lose their place and the audience always knows which of
   the 17 steps they are watching.
   ========================================================================== */
.story {
  position: fixed; z-index: 60; left: 50%; bottom: 16px; transform: translateX(-50%);
  width: min(760px, calc(100vw - 24px));
  background: var(--surface);
  border: 1px solid var(--border-strong);
  border-radius: 999px;
  box-shadow: var(--elev-3);
  display: flex; align-items: center; gap: 10px;
  padding: 7px 8px 7px 14px;
  animation: up-cx .3s cubic-bezier(.4,0,.2,1) backwards;   /* -cx keeps translateX(-50%) */
}
@media (max-width: 700px) { .story { border-radius: var(--radius); flex-wrap: wrap; } }
.story-n { font-size: 10px; font-weight: 800; letter-spacing: .08em; color: var(--muted); white-space: nowrap; }
.story-t { font-size: 12.5px; font-weight: 700; flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.story-d { font-size: 11px; color: var(--muted); }
.story-prog { position: absolute; left: 14px; right: 14px; bottom: 2px; height: 2px; border-radius: 999px; background: var(--surface-3); overflow: hidden; }
.story-prog i { display: block; height: 100%; background: var(--accent-grad); transition: width .35s ease; }

/* The spotlight ring the story puts around whatever it wants you to look at. */
.spot {
  position: relative; z-index: 55;
  box-shadow: 0 0 0 3px var(--accent), 0 0 0 10px color-mix(in srgb, var(--accent) 26%, transparent) !important;
  border-radius: var(--radius);
  animation: spot-pulse 1.6s ease-in-out infinite;
}
@keyframes spot-pulse { 0%,100% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 8px color-mix(in srgb, var(--accent) 22%, transparent); } 50% { box-shadow: 0 0 0 3px var(--accent), 0 0 0 14px color-mix(in srgb, var(--accent) 8%, transparent); } }
@media (prefers-reduced-motion: reduce) { .spot { animation: none; } }

/* ============================================================== impersonate */
/* The strip that appears when an admin is viewing the platform as another
   role. Deliberately loud: nothing is more dangerous in an RBAC demo than not
   knowing whose screen you are looking at. */
.imp-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 14px; font-size: 11.5px; font-weight: 600;
  background: var(--accent-grad); color: #16202e;
}
.imp-bar button { font-weight: 800; text-decoration: underline; }

/* ================================================================= density */
/* Comfortable mode for a projector at the back of a boardroom. Set on <html>
   so it reaches everything including overlays. */
[data-density="comfy"] {
  --topbar-h: 60px;
}
[data-density="comfy"] body { font-size: 15px; }
[data-density="comfy"] .tbl td { height: 44px; }
[data-density="comfy"] .kpi-val { font-size: 31px; }
[data-density="comfy"] .btn { min-height: 38px; font-size: 13.5px; }