/* DriveNexus brand identity applied to DriveNexus Office.
   Source: "DriveNexus Brand Identity" (Fleet Green, Ink, Brass; Archivo, Source Sans 3, IBM Plex Mono; flat colour, square corners,
   no gradients or effects). This file loads LAST (after app.css, cc-theme.css, cc-polish.css, cc-features.css) and overrides them,
   so the whole re-skin is in one place and can be switched off by removing its <link> in base.html.
   Rules the brand sets that this file follows:
     - Brass is a graphic colour (the active-nav bar, one accent per page). It is never text on a light ground.
     - Status is never colour alone: RAG chips keep their text label.
     - Square corners everywhere except app icon tiles and phone screenshots. No gradients. No shadows except on floating panels.
     - Archivo for headings, Source Sans 3 for reading, IBM Plex Mono for data and small caps labels. */

/* ── Tokens: light (the brand's primary look, on Paper) ─────────────────── */
:root,
[data-theme="light"] {
  --bg: #F5F4EF;              /* Paper */
  --bg-2: #ECEFEE;            /* Grey 100 */
  --panel: #FFFFFF;
  --panel-2: #F5F4EF;
  --panel-3: #ECEFEE;
  --line: #D5DADA;            /* Grey 200 */
  --line-soft: #ECEFEE;
  --ink: #0B1719;             /* Ink */
  --ink-2: #3C4749;           /* Grey 700 */
  --ink-3: #596466;           /* Grey 500, 6:1 on white and 5:1 on the light table-head grey */
  --accent: #0B4A43;          /* Fleet Green */
  --accent-deep: #0B4A43;
  --accent-rgb: 11, 74, 67;
  --accent-light: rgba(11, 74, 67, .08);
  --green: #1B7A3E;           /* Success */
  --amber: #9C4A08;           /* Warning (text: 5:1 on the amber tint; the fill under white text is --amber-fill) */
  --red: #B42318;             /* Error */
  --blue: #1D5FA7;            /* Information */
  --green-rgb: 27, 122, 62;  --amber-rgb: 156, 74, 8;  --red-rgb: 180, 35, 24;  --blue-rgb: 29, 95, 167;
  --green-bg: rgba(27, 122, 62, .08);
  --amber-bg: rgba(180, 83, 9, .08);
  --red-bg: rgba(180, 35, 24, .07);
  --blue-bg: rgba(29, 95, 167, .08);

  /* the left rail is Ink in both themes, as on the brand's software board */
  --sidebar-bg: #0B1719;
  --sidebar-hover: #1F2A2C;
  --sidebar-active: #1F2A2C;
  --sidebar-ink: #A9B2B3;     /* Grey 300 on Ink: 8:1 */
  --sidebar-ink-2: #F5F4EF;
  --sidebar-ink-3: #A9B2B3;
  --sidebar-line: #1F2A2C;
  --sidebar-brand: #FFFFFF;
  --sidebar-user: #D5DADA;
  --sidebar-active-text: #FFFFFF;
  --sidebar-active-bg: #1F2A2C;
  --sidebar-border: #1F2A2C;
  --sidebar-shadow: none;

  --radius: 0;
  --radius-sm: 0;
  --radius-lg: 0;
  --shadow-sm: none;
  --shadow: none;
  --shadow-lg: 0 8px 24px rgba(11, 23, 25, .16);   /* floating panels only: menus, dialogs */

  --sans: "Source Sans 3", "Calibri", "Segoe UI", sans-serif;
  --display: "Archivo", "Arial", sans-serif;
  --mono: "IBM Plex Mono", "Consolas", monospace;

  /* the Command Centre theme's own tokens, flattened */
  --cc-gradient-brand: #0B4A43;
  --cc-gradient-hero: #F5F4EF;
  --cc-gradient-kpi: #0B4A43;
  --cc-gradient-page: #F5F4EF;
  --cc-input-bg: #FFFFFF;
  --cc-quick-link-bg: #FFFFFF;
  --cc-table-head-bg: #ECEFEE;
  --cc-table-hover: rgba(11, 74, 67, .05);
  --cc-tbody-border: #ECEFEE;
  --cc-kpi-label: #667173;
  --cc-badge-green-bg: #E6F2EA;  --cc-badge-green-fg: #1B7A3E;
  --cc-badge-amber-bg: #FBF0E3;  --cc-badge-amber-fg: #9C4A08;
  --cc-badge-red-bg: #FBEAE8;    --cc-badge-red-fg: #B42318;
  --cc-badge-blue-bg: #E6EEF7;   --cc-badge-blue-fg: #1D5FA7;
  --cc-link: #0B4A43;
  --cc-link-hover: #2E6F66;
  --cc-kpi-red-bg: #FFFFFF;
  --cc-kpi-amber-bg: #FFFFFF;
  --cc-kpi-green-bg: #FFFFFF;
  --cc-kpi-default-bg: #FFFFFF;
  --cc-bar-track: #D5DADA;
  --cc-focus-ring: 0 0 0 3px rgba(11, 74, 67, .35);
  --focus: #0B4A43;           /* the 3 px keyboard focus outline */
  --accent-fill: #0B4A43;     /* the accent as a FILL under white text (the plain accent is for text and graphics) */
  --btn-bg: #0B4A43;
  --btn-bg-hover: #2E6F66;
  --btn-edge: #0B4A43;
}

/* ── Tokens: dark (Ink ground, Grey 900 panels) ─────────────────────────── */
[data-theme="dark"] {
  --bg: #0B1719;
  --bg-2: #0B1719;
  --panel: #1F2A2C;
  --panel-2: #172123;
  --panel-3: #2A3638;
  --line: #3C4749;
  --line-soft: #2A3638;
  --ink: #F5F4EF;
  --ink-2: #D5DADA;
  --ink-3: #A9B2B3;
  --accent: #DFE8E5;          /* Mist: links, icons and bars read on dark */
  --accent-deep: #DFE8E5;
  --accent-rgb: 223, 232, 229;
  --accent-light: rgba(223, 232, 229, .08);
  --green: #5CBF84;
  --amber: #F0A35E;
  --red: #F08A80;
  --blue: #7DB1E8;
  --green-rgb: 92, 191, 132;  --amber-rgb: 240, 163, 94;  --red-rgb: 240, 138, 128;  --blue-rgb: 125, 177, 232;
  --green-bg: rgba(92, 191, 132, .12);
  --amber-bg: rgba(240, 163, 94, .12);
  --red-bg: rgba(240, 138, 128, .12);
  --blue-bg: rgba(125, 177, 232, .12);
  --sidebar-bg: #0B1719;
  --sidebar-border: #1F2A2C;
  --shadow-lg: 0 8px 24px rgba(0, 0, 0, .5);
  --cc-gradient-hero: #0B1719;
  --cc-gradient-page: #0B1719;
  --cc-input-bg: #0B1719;
  --cc-quick-link-bg: #1F2A2C;
  --cc-table-head-bg: #172123;
  --cc-table-hover: rgba(223, 232, 229, .06);
  --cc-tbody-border: #2A3638;
  --cc-kpi-label: #A9B2B3;
  --cc-badge-green-bg: rgba(92, 191, 132, .16);  --cc-badge-green-fg: #8AD6A9;
  --cc-badge-amber-bg: rgba(240, 163, 94, .16);  --cc-badge-amber-fg: #F5B97F;
  --cc-badge-red-bg: rgba(240, 138, 128, .16);   --cc-badge-red-fg: #F5A8A0;
  --cc-badge-blue-bg: rgba(125, 177, 232, .16);  --cc-badge-blue-fg: #A3C8EE;
  --cc-link: #DFE8E5;
  --cc-link-hover: #FFFFFF;
  --cc-kpi-red-bg: #1F2A2C;
  --cc-kpi-amber-bg: #1F2A2C;
  --cc-kpi-green-bg: #1F2A2C;
  --cc-kpi-default-bg: #1F2A2C;
  --cc-bar-track: #3C4749;
  --cc-focus-ring: 0 0 0 3px rgba(201, 161, 59, .5);
  --focus: #C9A13B;           /* Brass on Ink: 7.5:1 */
  --accent-fill: #2E6F66;     /* Pine: white text 5.9:1 on it, and it stays visible on Ink */
  --btn-bg: #0B4A43;
  --btn-bg-hover: #2E6F66;
  --btn-edge: #2E6F66;
}

/* ── Type ───────────────────────────────────────────────────────────────── */
body {
  font-family: var(--sans);
  font-size: 14px;
  /* Source Sans 3 has a smaller x-height than Inter, which Office was built around. Keeping lower-case letters the same visual size
     preserves the dense layouts without changing every pixel size. */
  font-size-adjust: .52;
  background: var(--bg);
  color: var(--ink);
}
h1, h2, h3, h4, .page-title, .card-title, .pcard-title, .dash-card-title, .section-title, .modal-title {
  font-family: var(--display);
  letter-spacing: -.005em;
}
.page-title { font-weight: 700; letter-spacing: -.01em; }
code, kbd, pre, .mono, [class*="reg-"], .reg { font-family: var(--mono); }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; }
a { text-underline-offset: 3px; }

/* ── Left rail ──────────────────────────────────────────────────────────── */
.sidebar { box-shadow: none; border-right: 1px solid var(--sidebar-border); }
.brand { gap: 10px; padding: 18px 18px 16px; align-items: center; }
.brand-logo { display: block; height: 24px; width: auto; flex: none; }
.brand-divider { width: 1px; height: 22px; background: #667173; flex: none; }   /* the product lockup: logo, divider, product name */
.brand-product { font-family: var(--display); font-weight: 500; font-size: 15px; color: #FFFFFF; letter-spacing: 0; line-height: 1; }

.nav-section-label, .nav-subgroup-label {
  font-family: var(--mono); font-size: 10.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--sidebar-ink-3);
}
.nav-link { border-radius: 0; font-family: var(--sans); font-size: 14px; font-weight: 600; color: var(--sidebar-ink); }
.nav-link:hover { background: var(--sidebar-hover); color: #FFFFFF; transform: none; }
.nav-link.active { background: var(--sidebar-active-bg); color: #FFFFFF; box-shadow: inset 3px 0 0 #C9A13B; }   /* the one brass accent */
.nav-link.active::after { display: none; }
.nav-link.active .nav-icon { color: #FFFFFF; }
.nav-link.active .nav-dot { background: #C9A13B; }
.sidebar-search-btn { border-radius: 0; background: var(--sidebar-hover); border: 1px solid #3C4749; color: var(--sidebar-ink); }
.sidebar-search-kbd, .kbd { border-radius: 0; font-family: var(--mono); }
.sidebar-user-avatar { border-radius: 0; background: #0B4A43; color: #FFFFFF; border: 1px solid #2E6F66; font-family: var(--display); }
.sidebar-user-name { color: #FFFFFF; }
.sidebar-user-company { color: var(--sidebar-ink); }
.sidebar .pill {
  border-radius: 0; font-family: var(--mono); letter-spacing: .06em; color: #DFE8E5; background: transparent; border: 1px solid #667173;
}
.sidebar-signout, .ver, .sidebar-user-role { color: var(--sidebar-ink-3); }
.theme-toggle { border-radius: 0 !important; border-color: #3C4749 !important; color: var(--sidebar-ink) !important; }
.theme-toggle:hover { border-color: #A9B2B3 !important; color: #FFFFFF !important; background: var(--sidebar-hover) !important; }

/* ── Top bar: a flat bar, not a teal banner ─────────────────────────────── */
.topbar {
  background: var(--panel); color: var(--ink); border-bottom: 1px solid var(--line); box-shadow: none; min-height: 60px; padding: 12px 28px;
}
[data-theme="light"] .topbar, [data-theme="dark"] .topbar { box-shadow: none; }
.page-title { color: var(--ink); text-shadow: none; font-size: 1.3rem; }
.topbar .btn, .topbar select.btn {
  background: var(--panel) !important; border: 1px solid var(--line) !important; color: var(--ink) !important; backdrop-filter: none; transform: none;
}
.topbar .btn:hover, .topbar select.btn:hover { background: var(--panel-3) !important; border-color: var(--ink-3) !important; color: var(--ink) !important; transform: none; }
.topbar .btn-primary, .topbar a.btn-primary {
  background: var(--btn-bg) !important; border-color: var(--btn-edge) !important; color: #FFFFFF !important;
}
.topbar .btn-primary:hover { background: var(--btn-bg-hover) !important; }
.main { background: var(--bg); }
.cc-preview-ribbon { background: #0B4A43; box-shadow: none; }
.content { animation: none; }
.content > *:not(.dn-layout-chrome) { animation: none !important; }

/* ── Cards, panels and KPIs ─────────────────────────────────────────────── */
.card, .pcard, .stat-card, .dash-card, .table-wrap, .kp, .co-card, .filters, .feature-card {
  border-radius: 0; box-shadow: none; transition: border-color .15s;
}
[data-theme="light"] .card, [data-theme="light"] .dash-card, [data-theme="light"] .pcard, [data-theme="light"] .table-wrap { box-shadow: none; }
.card:hover, .pcard:hover, .stat-card:hover, .dash-card:hover, .co-card:hover { border-color: var(--ink-3); box-shadow: none; }
[data-theme="dark"] .card:hover, [data-theme="dark"] .dash-card:hover { border-color: var(--ink-3); box-shadow: none; }
.pcard-title, .dash-card-title {
  font-family: var(--mono); font-size: 11.5px; font-weight: 500; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2);
}
[data-theme="dark"] .pcard-title, [data-theme="dark"] .dash-card-title { color: var(--ink-2); }
.stat-label, .kpi .lbl, .stat-card .stat-label, .kp-lbl {
  font-family: var(--mono); font-size: .68rem; font-weight: 500; letter-spacing: .08em;
}
.stat-value, .kpi .val, .kp-val { font-family: var(--mono); font-weight: 600; letter-spacing: -.02em; }
/* the lead tile is marked by a thick green top edge: a plain tile that works with any page's own text classes */
.stat-card:first-child, .kpi-grid .kpi:first-child, .kpi-strip .kp:first-child {
  background: var(--cc-kpi-default-bg) !important; border-color: var(--line) !important; border-top: 3px solid var(--accent-fill) !important; box-shadow: none;
}
.stat-card:first-child .stat-label, .stat-card:first-child .stat-sub, .kpi:first-child .lbl, .kpi:first-child .sub,
.kpi-strip .kp:first-child .kp-lbl { color: var(--cc-kpi-label) !important; opacity: 1; }
.stat-card:first-child .stat-value, .kpi:first-child .val,
.kpi-strip .kp:not(.red):not(.amber):not(.green):not(.teal):first-child .kp-val { color: var(--ink) !important; }
.kpi.red, .stat-card.red, .kp.red { border-color: var(--red) !important; }
.kpi.amber, .stat-card.amber, .kp.amber { border-color: var(--amber) !important; }
.kpi.green, .stat-card.green, .kp.green { border-color: var(--green) !important; }
.kp.teal .kp-val { color: var(--accent); }
/* cc-theme turns the lead tile's value white (it used to sit on a gradient); the tile is flat now, so keep the accent text colour */
.kpi-strip .kp.teal:first-child .kp-val { color: var(--accent) !important; }

.bar, .bar-track { border-radius: 0; }
.bar > i, .bar-fill { border-radius: 0; background: var(--accent); }
[data-theme="light"] .bar-fill { opacity: 1; }

/* ── Buttons ────────────────────────────────────────────────────────────── */
.btn { border-radius: 0; font-family: var(--display); font-weight: 600; transform: none; }
.btn:hover { transform: none; }
.btn:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; box-shadow: none; }
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger) { background: #FFFFFF; border: 1px solid #667173; color: var(--ink); }
[data-theme="light"] .btn:not(.btn-primary):not(.btn-danger):hover { background: var(--panel-3); border-color: var(--ink); }
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger), [data-theme="dark"] select.btn {
  background: transparent !important; border: 1px solid #A9B2B3 !important; color: #F5F4EF !important;
}
[data-theme="dark"] .btn:not(.btn-primary):not(.btn-danger):hover { background: #2A3638 !important; border-color: #F5F4EF !important; color: #FFFFFF !important; }
.btn-primary, .submit-btn {
  background: var(--btn-bg) !important; border: 1px solid var(--btn-edge); color: #FFFFFF !important; box-shadow: none !important; background-image: none !important;
}
.btn-primary:hover, .submit-btn:hover { background: var(--btn-bg-hover) !important; box-shadow: none !important; }
.btn-danger { border-radius: 0; background: transparent; border: 1px solid var(--red); color: var(--red) !important; }
.btn-danger:hover { background: var(--red-bg); }
.tab, .tab-btn, button.tab, button.tab-btn, .chip, .chip-btn, .pill-btn, .filter-chip, .seg, .seg-btn {
  border-radius: 0; font-family: var(--sans); font-weight: 600;
}
.tab.active, .tab-btn.active { border-color: var(--accent); }

/* ── Badges, chips and status: square and labelled ──────────────────────── */
.badge, .rag-pill, .tier-pill, .status-pill, .pill-badge, [class^="badge-"], [class*=" badge-"] {
  border-radius: 0; font-family: var(--sans); font-weight: 700; letter-spacing: .02em; border: 1px solid currentColor;
}
.badge.teal, .tier-enterprise { background: var(--accent-light); color: var(--accent); }
[data-theme="dark"] .badge.teal, [data-theme="dark"] .tier-enterprise { color: var(--accent); }

/* ── Forms ──────────────────────────────────────────────────────────────── */
select, input[type=text], input[type=number], input[type=email], input[type=password], input[type=date], input[type=tel],
input[type=search], input[type=url], input[type=time], input[type=datetime-local], textarea {
  border-radius: 0; border: 1px solid #667173; font-family: var(--sans); color: var(--ink); background: var(--cc-input-bg);
}
[data-theme="dark"] select, [data-theme="dark"] input[type=text], [data-theme="dark"] input[type=number], [data-theme="dark"] input[type=email],
[data-theme="dark"] input[type=password], [data-theme="dark"] input[type=date], [data-theme="dark"] input[type=tel],
[data-theme="dark"] input[type=search], [data-theme="dark"] textarea { border-color: #A9B2B3; }
select:focus, input:focus, textarea:focus { outline: 3px solid var(--focus); outline-offset: 2px; border-color: var(--ink); box-shadow: none; }
input[type=checkbox], input[type=radio] { accent-color: #0B4A43; }
[data-theme="dark"] input[type=checkbox], [data-theme="dark"] input[type=radio] { accent-color: #DFE8E5; }
label { font-family: var(--sans); }

/* ── Tables ─────────────────────────────────────────────────────────────── */
thead th {
  font-family: var(--mono); font-size: .66rem; font-weight: 500; letter-spacing: .08em; color: var(--ink-2); border-bottom: 1px solid var(--line);
}
tbody td { font-family: var(--sans); }
.cmd-tabs-scroll, .cmd-tab { border-radius: 0; }
.cmd-tab { font-family: var(--sans); }
.cmd-tab.active { color: var(--accent) !important; border-bottom-color: var(--accent) !important; }
[data-theme="dark"] .cmd-tab.active { border-bottom-color: #C9A13B !important; }
.cmd-tabs-wrap::before, .cmd-tabs-wrap::after { display: none; }

/* ── Links, quick links, alerts, banners ────────────────────────────────── */
.content a:not(.btn):not(.nav-link):not(.quick-link) { color: var(--cc-link); text-decoration: underline; text-decoration-thickness: 1px; }
.content a:not(.btn):not(.nav-link):not(.quick-link):hover { color: var(--cc-link-hover); }
.quick-link { border-radius: 0; transform: none; box-shadow: none; }
.quick-link:hover { transform: none; box-shadow: none; border-color: var(--ink-3); }
.muted a:not(.btn):not(.nav-link):not(.quick-link) { color: var(--accent) !important; }
.section-eyebrow { color: var(--ink-2); font-family: var(--mono); letter-spacing: .08em; text-transform: uppercase; }
.trial-banner { border-radius: 0; }
.toast, .modal, .dn-modal-box, .modal-box, [role="dialog"], #notif-panel { border-radius: 0; }
.toast { box-shadow: var(--shadow-lg); }
#cookie-banner { box-shadow: none !important; border-top: 3px solid #C9A13B !important; }

/* ── Scrollbars and motion ──────────────────────────────────────────────── */
*::-webkit-scrollbar-thumb, .cmd-tabs::-webkit-scrollbar-thumb { border-radius: 0; }
@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* ── Tab-style chips read as tabs, not as text links ────────────────────── */
.hub-subnav a, .hub-subnav-link, .hub-subnav-all, .content .tab, .content .tab-btn, .content a.btn, .content .cmd-tab,
.content a.quick-link { text-decoration: none; }
.hub-subnav-link { font-family: var(--sans); }
.hub-subnav-link.is-active { border-color: var(--accent); color: var(--accent); background: var(--accent-light); font-weight: 700; }
.hub-subnav-label { font-family: var(--mono); font-weight: 500; letter-spacing: .08em; }

/* ── Top-bar search hint: was white-on-teal, now a plain bordered key hint ── */
.cmd-kbd-hint { background: var(--panel); border: 1px solid var(--line); color: var(--ink-2); font-family: var(--sans); }
.cmd-kbd-hint:hover { background: var(--panel-3); border-color: var(--ink-3); }
.cmd-kbd-hint kbd { background: var(--panel-3); border: 1px solid var(--line); color: var(--ink); font-family: var(--mono); }

/* hover states that fill with the accent carry white text */
.ds-photo-dl:hover, .doc-card .doc-dl:hover { background: var(--accent-fill); color: #FFFFFF; }

/* ── Logos swap with the theme ──────────────────────────────────────────── */
.brand-logo { display: block; height: 30px; width: auto; }
.logo-on-dark { display: none; }
[data-theme="dark"] .logo-on-light { display: none; }
[data-theme="dark"] .logo-on-dark { display: block; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0; }

/* ── Sign-up, password and two-step screens: a flat card on Paper ───────── */
.auth-wrap { background: var(--bg); }
.auth-brand .auth-logo { height: 44px; margin: 0 auto 14px; }
.auth-brand h1 { font-family: var(--display); }
.auth-brand p { font-family: var(--sans); color: var(--ink-2); }
.auth-card { box-shadow: none; border: 1px solid var(--line); border-radius: 0; padding: 32px; }
.auth-card h2, .auth-card h1 { font-family: var(--display); }
.auth-card .form-field label { font-family: var(--sans); font-weight: 600; color: var(--ink); font-size: 14px; }
.auth-card .form-field input, .auth-card .form-field select {
  min-height: 44px; border: 1px solid #667173 !important; border-radius: 0; font-size: 16px; font-family: var(--sans);
}
[data-theme="dark"] .auth-card .form-field input, [data-theme="dark"] .auth-card .form-field select { border-color: #A9B2B3 !important; }
.auth-card .submit-btn { min-height: 48px; font-family: var(--display); font-size: 16px; }
.auth-footer a, .auth-card a { color: var(--accent); text-decoration: underline; font-weight: 600; }
.role-card { border-radius: 0; }
.role-card.selected { border-color: var(--accent); }

/* ── Error and empty-page marker: one brass bar and a mono label, no emoji ─ */
.brand-bar { display: block; width: 56px; height: 6px; background: #C9A13B; margin: 0 auto 14px; }
.err-label { font-family: var(--mono); font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-2); margin-bottom: 14px; }

/* ── Flat, no lift: hover changes the border, nothing floats; gradients and glows removed ─ */
.card:hover, .dash-card:hover, .stat-card:hover, .kpi:hover, .kp:hover, .co-card:hover,
.nav-hub-card:hover, .trainer-card:hover, .btn:hover, .topbar .btn:hover, .topbar select.btn:hover { transform: none !important; box-shadow: none !important; }
.nav-hub-card:hover, .trainer-card:hover { border-color: var(--ink-3) !important; }
.brand-mark, .sidebar-user-avatar { background: var(--accent-fill) !important; background-image: none !important; box-shadow: none !important; }
.btn-primary { box-shadow: none; }
[style*="background:var(--red)"] { background: var(--red) !important; background-image: none !important; box-shadow: none !important; }

/* ── Outline icons (replace emoji): 24 grid, 1.75 stroke, square caps, current text colour ─ */
.ic { width: 1.1em; height: 1.1em; vertical-align: -.17em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: square; stroke-linejoin: miter; flex: none; }

/* ── Small laptop screens (about 1000-1300 px): nothing may run off the right edge ─ */
.main, .content { min-width: 0; }
.topbar { flex-wrap: wrap; gap: 8px 14px; height: auto; }
.topbar > :first-child { min-width: 0; }
.topbar-actions { flex-wrap: wrap; justify-content: flex-end; min-width: 0; }
.nav-link { text-overflow: ellipsis; }
.nav-link.active::after { display: none; animation: none; box-shadow: none; }
#ast-list { overflow-x: auto; }
.card, .pcard, .a-card, .chart-card, .stat-card { min-width: 0; }
.content img, .content canvas, .content video { max-width: 100%; }
.topbar-actions > *, .topbar-actions select, .topbar-actions select.btn, .topbar-actions .btn { flex: 0 0 auto; width: auto !important; max-width: 220px; }
@media (max-width: 1300px) { .topbar { position: relative; } }