/* ══════════════════════════════════════════════════════════════════════════
   MaxBooster — "Afterburn" identity layer  (loads LAST, after components.css)

   The chamfered corner-cut is the brand's button identity (approved 2026-07-10).
   Every clickable control wears it. Because clip-path clips ANY paint outside the
   shape, three things change together with it:
     • borders vanish under the clip  → re-expressed as an inset "edge" ring
     • the global outset focus ring is clipped → re-expressed as an inset focus ring (a11y)
     • ghost fills that were told apart from the page only by their border now need a
       surface that is itself distinct from the body bg (both themes)
   Status chips (.chip) now wear the chamfer too (2026-07-13) — only the round status dots and
   avatars stay round.
   ══════════════════════════════════════════════════════════════════════════ */

:root,
[data-theme="dark"] {
  /* ghost-control surface — clearly distinct from --bg-app in this theme */
  --ctl: #1B1F27;
  --ctl-hover: #232732;
  --ctl-edge: rgba(255,255,255,0.16);
  /* chamfer corner cuts, matched to each control height */
  --chamfer: polygon(9px 0, 100% 0, 100% calc(100% - 9px), calc(100% - 9px) 100%, 0 100%, 0 9px);
  --chamfer-sm: polygon(7px 0, 100% 0, 100% calc(100% - 7px), calc(100% - 7px) 100%, 0 100%, 0 7px);
  --chamfer-xs: polygon(6px 0, 100% 0, 100% calc(100% - 6px), calc(100% - 6px) 100%, 0 100%, 0 6px);
}
[data-theme="light"] {
  --ctl: #E4EAF2;
  --ctl-hover: #D5DEEA;
  --ctl-edge: #C2CEDE;
}

/* ── Buttons — the chamfer identity ──────────────────────────────────────── */
.btn {
  border: none;
  border-radius: 0;
  clip-path: var(--chamfer);
}
.btn-sm { clip-path: var(--chamfer-sm); }

/* Ghost / default button: distinct surface + an inset ring that follows the chamfer
   (replaces the border the clip-path removes) so it always reads as a raised button. */
.btn-ghost {
  background: var(--ctl);
  color: var(--text-primary);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.btn-ghost:hover { background: var(--ctl-hover); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--ctl-edge); }

/* Solid variants keep their fills; the clip just cuts the corners. Live/Danger are
   washes that leaned on a border — give them the same inset edge so they still frame. */
.btn-live   { box-shadow: inset 0 0 0 1px var(--status-live-border); }
.btn-live:hover   { box-shadow: inset 0 0 0 1px var(--status-live); }
.btn-danger { box-shadow: inset 0 0 0 1px var(--status-failed-border); }
.btn-danger:hover { box-shadow: inset 0 0 0 1px var(--status-failed); }

/* Focus — the global outset ring (base.css) is clipped away by the chamfer, so
   restore a clearly-visible focus indicator with an INSET double ring that survives
   the clip and contrasts on any fill (light inner, accent outer). */
.btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 4px var(--accent);
}

/* ── Filter chips (clickable status filters) — button-family, so chamfered too ── */
.filter-chip {
  border: none;
  border-radius: 0;
  background: var(--ctl);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
  clip-path: var(--chamfer-xs);
}
.filter-chip:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
.filter-chip.is-active {
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--brand-navy) 100%);
  box-shadow: none;
}
.filter-chip.is-active b { color: var(--text-on-accent); }
.filter-chip:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 3px var(--accent);
}

/* ── Status chips — the theme concept now applies to chips too (they used to stay pills).
   border:none so the clip doesn't slice a real border; the frame becomes an inset edge ring
   tinted per status. The .chip-dot inside stays round — it's a status dot, not the chip shape. ── */
.chip {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.chip.live, .chip.ok { box-shadow: inset 0 0 0 1px var(--status-live-border); }
.chip.warn { box-shadow: inset 0 0 0 1px var(--status-warn-border); }
.chip.bad  { box-shadow: inset 0 0 0 1px var(--status-failed-border); }
.chip.cobalt { box-shadow: inset 0 0 0 1px var(--accent-border); }
.chip.status-link:hover { box-shadow: inset 0 0 0 1px currentColor; }
a.chip.chip-link:hover { box-shadow: inset 0 0 0 1px var(--accent); }
/* the two admin chips join the family too — keep their own border, just cut the corners */
.admin-chip, .admin-issue-chip { border-radius: 0; clip-path: var(--chamfer-xs); }

/* ── Pager controls — chamfered squares ──────────────────────────────────── */
.pager-num, .pager-btn {
  border: none;
  border-radius: 0;
  background: var(--ctl);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
  clip-path: var(--chamfer-xs);
}
.pager-num:hover, .pager-btn:hover { color: var(--text-primary); background: var(--ctl-hover); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
.pager-num.is-current { background: var(--accent-solid); color: var(--text-on-accent); box-shadow: none; }
.pager-num:focus-visible, .pager-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 3px var(--accent);
}

/* ── Kebab summary button — chamfer to match ─────────────────────────────── */
.kebab > summary { border-radius: 0; clip-path: var(--chamfer-xs); }
.kebab > summary:hover, .kebab[open] > summary { background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge); }

/* ── Topbar controls — rectangular 38px pills on every page, so they wear the chamfer too.
   Borders are lost to the clip → restored as inset edge rings. The notification bell is a
   square control just like the theme toggle, so it joins the group; its unread badge is
   rendered OUTSIDE the summary (see _NotificationBell) so the clip can't slice it — critical
   in RTL, where the badge lands on the cut top-left corner. Genuinely round icon buttons
   (avatar, what's-new) still stay round — a corner-cut circle reads as a mistake. ── */
.nav-toggle, .theme-toggle, .lang-switch > summary, .cmdk-hint, .support-menu > summary,
.notif-bell > summary {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.nav-toggle:hover, .theme-toggle:hover, .lang-switch[open] > summary,
.lang-switch > summary:hover, .cmdk-hint:hover, .support-menu > summary:hover,
.notif-bell > summary:hover, .notif-bell[open] > summary {
  color: var(--text-primary); background: var(--ctl-hover); box-shadow: inset 0 0 0 1px var(--accent);
}
.credit-pill {   /* keep its accent wash; just cut the corners + accent edge ring */
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  box-shadow: inset 0 0 0 1px var(--accent-border);
}
.credit-pill:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.nav-toggle:focus-visible, .theme-toggle:focus-visible, .cmdk-hint:focus-visible,
.lang-switch > summary:focus-visible, .support-menu > summary:focus-visible, .credit-pill:focus-visible,
.notif-bell > summary:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 3px var(--accent);
}

/* ── Choice cards (add-account / add-payment modals) — big clickable cards get the cut too ── */
.choice-card { border-radius: 0; clip-path: var(--chamfer); }

/* ── Pricing duration tabs — button-family toggles, so chamfered like the filter chips ── */
.duration-tab {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.duration-tab:hover { color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--ctl-edge); }
.duration-tab.is-active {
  color: var(--text-on-accent);
  background: linear-gradient(135deg, var(--accent) 0%, var(--brand-navy) 100%);
  box-shadow: none;
}
.duration-tab-badge { border-radius: 0; clip-path: var(--chamfer-xs); }

/* ── Secondary controls missed by the first identity pass — bring them into the chamfer so no
   clickable control reads as a rounded holdover next to its cut siblings. Same discipline as
   above: drop the border (the clip slices it anyway) → inset edge ring that follows the cut;
   the outset focus ring is clipped → restore an inset double ring (a11y). ── */

/* Selectable option cards (audience target / when-to-run) — the .choice-card's smaller cousin.
   Keep its surface + checked accent-wash from components; swap the border for a chamfered ring. */
.seg .check {
  border: none; border-radius: 0; clip-path: var(--chamfer-sm);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.seg .check:hover { box-shadow: inset 0 0 0 1px var(--border-strong); }
.seg .check:has(input:checked) { box-shadow: inset 0 0 0 1px var(--accent); }

/* Account-filter dropdown trigger — a ghost button, so give it the ghost surface + edge ring. */
.acct-filter-btn {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  background: var(--ctl); box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.acct-filter-btn:hover, .acct-filter-btn[aria-expanded="true"] { background: var(--ctl-hover); box-shadow: inset 0 0 0 1px var(--accent); }
.acct-filter-btn:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 3px var(--accent);
}

/* Template-picker rows (save/load modal) — the .choice-card idiom, so cut them the same way. */
.modal-list .row-pick {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  box-shadow: inset 0 0 0 1px var(--ctl-edge);
}
.modal-list .row-pick:hover { box-shadow: inset 0 0 0 1px var(--accent); }
.modal-list .row-pick:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--text-on-accent) 80%, transparent),
              inset 0 0 0 3px var(--accent);
}

/* Collapse icon-buttons (inbox toolbar) — small ghost squares, chamfered like the kebab summary. */
.ptb-fetch-collapse, .ptb-acct-collapse { border-radius: 0; clip-path: var(--chamfer-xs); }
.ptb-fetch-collapse:hover, .ptb-acct-collapse:hover { box-shadow: inset 0 0 0 1px var(--ctl-edge); }
.ptb-fetch-collapse:focus-visible, .ptb-acct-collapse:focus-visible {
  outline: none; box-shadow: inset 0 0 0 2px var(--accent);
}

/* ══════════════════════════════════════════════════════════════════════════
   Category B — form controls, popover panels, and the remaining cards join the
   identity so the whole surface, not just the buttons, reads as one system.
   ══════════════════════════════════════════════════════════════════════════ */

/* Form controls — chamfered like the buttons they sit beside. The real border is sliced by the
   clip, so it becomes an inset edge ring; the outset focus ring (base.css --ring) is sliced too,
   so it becomes an inset accent ring (a11y). Scoped to text-like fields only — never checkboxes
   or radios (their native focus ring must stay). */
.input, .select, textarea,
input[type=text], input[type=email], input[type=password], input[type=date],
input[type=datetime-local], input[type=time], input[type=number], input[type=search], select,
.file-input {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  box-shadow: inset 0 0 0 1px var(--border-strong);
}
.input:focus, textarea:focus, select:focus, .file-input:focus-visible,
input[type=text]:focus, input[type=email]:focus, input[type=password]:focus, input[type=date]:focus,
input[type=datetime-local]:focus, input[type=time]:focus, input[type=number]:focus, input[type=search]:focus {
  box-shadow: inset 0 0 0 2px var(--accent);
}
.input-validation-error,
input.input-validation-error, textarea.input-validation-error, select.input-validation-error {
  box-shadow: inset 0 0 0 2px var(--status-failed) !important;
}
/* the file-picker button — a small ghost button, so cut it to match */
.file-input::file-selector-button {
  border: none; border-radius: 0; clip-path: var(--chamfer-xs);
  background: var(--ctl); color: var(--text-primary); box-shadow: inset 0 0 0 1px var(--ctl-edge);
}

/* Popover panels — the open menu should echo its chamfered trigger. clip-path slices the outset
   drop shadow away, so elevation moves to a drop-shadow FILTER (which follows the cut silhouette)
   while the border becomes an inset ring (inset shadows survive the clip). */
.notif-panel, .lang-menu, .user-menu-panel, .kebab-menu, .acct-filter-panel, .combo-panel {
  border: none; border-radius: 0; clip-path: var(--chamfer-sm);
  box-shadow: inset 0 0 0 1px var(--border-strong);
  filter: drop-shadow(0 10px 18px var(--shadow-color));
}

/* HUD corner brackets extend to the remaining container cards. These stay rounded + shadowed on
   purpose — the brackets ARE the card treatment (the chamfer is only for controls). .list-item is
   left out deliberately: it repeats many-per-page, where brackets would read as noise. */
.card, .modal-card, .board-panel { position: relative; }
.card::before, .modal-card::before, .board-panel::before,
.card::after,  .modal-card::after,  .board-panel::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none; opacity: .5; z-index: 1;
}
.card::before, .modal-card::before, .board-panel::before {
  top: 7px; inset-inline-start: 7px;
  border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent);
}
.card::after, .modal-card::after, .board-panel::after {
  bottom: 7px; inset-inline-end: 7px;
  border-bottom: 2px solid var(--accent); border-inline-end: 2px solid var(--accent);
}

/* ── Alerts — the cockpit "message strip": keep the wash, add a bright accent edge on the
   inline-start so it reads as a HUD callout rather than a plain rounded box. ── */
.alert { border-inline-start-width: 3px; }
.alert-info { border-inline-start-color: var(--accent); }
.alert-warn, .alert-bad, .alert-danger { }   /* their own status border already leads */

/* ── Tables — an accent rule under the header so data reads as an instrument panel ── */
.table th { border-bottom-color: var(--accent-border); }
.table thead { position: relative; }

/* ── Live progress track (campaign detail Send Pulse) — the artifact's thrust bar:
   navy→accent fill with a glowing leading node. ── */
.pulse-fill { box-shadow: 0 0 12px var(--afterburn-glow); }
.pulse-node { box-shadow: 0 0 0 3px var(--accent-wash), 0 0 14px var(--afterburn-glow); }

/* ── Toggle switch — the "on" state glows like a lit control ── */
.switch > input:checked + .switch-track { box-shadow: 0 0 10px var(--afterburn-glow); }

/* ── HUD signature — a faint cockpit corner bracket on the primary surfaces.
   Two short accent ticks (top-inline-start, bottom-inline-end). Purely decorative,
   pointer-transparent, and drawn INSIDE the card so nothing clips or overflows. ── */
/* Scope note: this 7px-inset variant exists for the app's ROUNDED (--r-3, 18px) card surfaces,
   where a flush bracket would be eaten by the corner radius. Sharp 6px cockpit panels use the
   artifact's own flush `.hud` class (afterburn.css) instead — that's what the settings rack and
   the Overview hero wear. Don't add a 6px panel to this list; give it `.hud`. */
.metric-card, .data-card, .edit-section, .dash-hero, .plan-card, .pulse-card { position: relative; }
.metric-card::before, .data-card::before, .edit-section::before, .dash-hero::before, .plan-card::before, .pulse-card::before,
.metric-card::after,  .data-card::after,  .edit-section::after,  .dash-hero::after,  .plan-card::after,  .pulse-card::after {
  content: ''; position: absolute; width: 12px; height: 12px; pointer-events: none;
  opacity: .5; z-index: 1;
}
.metric-card::before, .data-card::before, .edit-section::before, .dash-hero::before, .plan-card::before, .pulse-card::before {
  top: 7px; inset-inline-start: 7px;
  border-top: 2px solid var(--accent); border-inline-start: 2px solid var(--accent);
}
.metric-card::after, .data-card::after, .edit-section::after, .dash-hero::after, .plan-card::after, .pulse-card::after {
  bottom: 7px; inset-inline-end: 7px;
  border-bottom: 2px solid var(--accent); border-inline-end: 2px solid var(--accent);
}
/* the corner ticks would collide with a card's own top-inline-start checkbox — nudge clear */
.data-card:has(.page-pick)::before { inset-inline-start: 9px; top: 9px; }
/* a featured plan card already has an accent ring — drop its brackets to avoid doubling */
.plan-card.is-featured::before, .plan-card.is-featured::after { display: none; }

@media (prefers-reduced-motion: reduce) {
  .btn:active { transform: none; }
}

/* ══════════════════════════════════════════════════════════════════════════
   AFTERBURN ATMOSPHERE + DISPLAY TYPE — the second half of the look.
   The chamfer above is the *shape* identity; this is the *world*: the angular
   Chakra Petch display face, italic glowing page titles + KPI numerals, and the
   blue-flame velocity field behind everything. Theme-aware (light keeps contrast),
   RTL keeps Cairo (Chakra Petch is Latin-only), and reduced-motion kills the drift.
   ══════════════════════════════════════════════════════════════════════════ */

/* The cockpit display face — angular, technical. Two static cuts (upright + italic). */
@font-face { font-family:'Chakra Petch'; font-style:normal; font-weight:400 700; font-display:swap; src:url('../fonts/chakra-petch.woff2') format('woff2'); }
@font-face { font-family:'Chakra Petch'; font-style:italic; font-weight:400 700; font-display:swap; src:url('../fonts/chakra-petch-italic.woff2') format('woff2'); }

:root, [data-theme="dark"] {
  /* Chakra Petch leads the display role; Space Grotesk + Cairo remain as fallbacks
     (Cairo carries Arabic per-glyph even inside a Latin-first stack). */
  --font-display: "Chakra Petch", "Space Grotesk", "Space Grotesk Fallback", "Cairo", system-ui, sans-serif;
  --afterburn-glow: rgba(8,126,252,0.55);
  --streak-a: rgba(8,126,252,0.030);
  --streak-b: rgba(255,255,255,0.016);
}
[data-theme="light"] {
  --afterburn-glow: rgba(8,126,252,0.26);
  --streak-a: rgba(2,62,138,0.035);
  --streak-b: rgba(2,62,138,0.012);
}
/* Arabic never renders in Chakra Petch — keep Cairo leading the display role in RTL. */
[dir="rtl"] { --font-display: "Cairo", system-ui, sans-serif; }

/* Velocity field — the whole app slides through space. Fixed, behind everything,
   pointer-transparent, whisper-faint so it never fights text legibility. */
body::before {
  content: ''; position: fixed; inset: 0; z-index: 0; pointer-events: none;
  background:
    repeating-linear-gradient(115deg, var(--streak-a) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(115deg, var(--streak-b) 0 1px, transparent 1px 52px);
}
[dir="rtl"] body::before { background:
    repeating-linear-gradient(65deg, var(--streak-a) 0 1px, transparent 1px 96px),
    repeating-linear-gradient(65deg, var(--streak-b) 0 1px, transparent 1px 52px); }
.app { position: relative; z-index: 1; }   /* keep app chrome above the velocity field */
@media (prefers-reduced-motion: no-preference) {
  body::before { animation: afterburn-streaks 16s linear infinite; }
  @keyframes afterburn-streaks { to { background-position: 636px 0, 1040px 0; } }
}

/* Page title — the hero heading enters the cockpit: italic, uppercase, blue glow.
   Kept to the page-header H1 only (short, single-line titles) so long body headings
   and Arabic (case-insensitive, but glow still reads) aren't distorted. */
.page-title h1, .auth-card h1, .auth-hero-word {
  font-style: italic; letter-spacing: .01em;
  text-shadow: 0 0 24px var(--afterburn-glow);
}
.page-title h1 { text-transform: uppercase; }
[dir="rtl"] .page-title h1 { font-style: normal; letter-spacing: 0; }  /* Cairo has no italic — never synthesize oblique Arabic */

/* KPI numerals — the big figures glow and lean, the artifact's signature readout.
   They already inherit Chakra Petch via --font-display; add the italic + glow. */
.metric-value, .metric-value-hero, .data-stat-num, .stat-strip-item b, .dash-count, .dash-pct {
  font-style: italic; text-shadow: 0 0 18px var(--afterburn-glow);
}
[dir="rtl"] .metric-value, [dir="rtl"] .metric-value-hero, [dir="rtl"] .data-stat-num,
[dir="rtl"] .stat-strip-item b, [dir="rtl"] .dash-count, [dir="rtl"] .dash-pct { font-style: normal; }
/* the gradient-filled KPI value can't carry a text-shadow (transparent fill hides it) —
   give it a drop-shadow filter glow instead so the shimmer AND the glow both read. */
.metric-value:not(.mint):not(.danger) { text-shadow: none; filter: drop-shadow(0 0 14px var(--afterburn-glow)); }

/* ══════════════════════════════════════════════════════════════════════════
   MOBILE BOTTOM TAB BAR (≤860px) — the Afterburn cockpit's thumb-reachable nav.
   Desktop keeps the sidebar; on phones the sidebar becomes a drawer opened by the
   "More" tab (the top hamburger is hidden here since More replaces it). Theme-aware
   to match this app's surfaces (the real sidebar is light in light mode too).
   ══════════════════════════════════════════════════════════════════════════ */
.tabbar { display: none; }
@media (max-width: 860px) {
  .nav-toggle { display: none; }   /* the bottom "More" tab replaces the top hamburger */

  .tabbar {
    display: grid; grid-template-columns: repeat(5, 1fr);
    position: fixed; inset-inline: 0; bottom: 0; z-index: 55;
    background: var(--bg-surface);
    border-top: 1px solid var(--border-strong);
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -8px 24px -16px var(--shadow-color);
  }
  .tabbar .tab {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    min-height: 54px; padding: 6px 2px; position: relative;
    border: none; background: none; cursor: pointer; text-decoration: none;
    color: var(--text-tertiary); font: 600 10px var(--font-body); letter-spacing: .02em;
  }
  .tabbar .tab svg { width: 21px; height: 21px; }
  .tabbar .tab span { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .tabbar .tab.active { color: var(--accent-hover); }
  .tabbar .tab.active::before {
    content: ''; position: absolute; top: 0; inset-inline: 22%; height: 2px;
    background: var(--accent); box-shadow: 0 0 10px var(--accent);
  }
  .tabbar .tab:focus-visible { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }

  /* clear the fixed bar so nothing hides behind it */
  .content { padding-bottom: calc(72px + env(safe-area-inset-bottom)); }
  .toast-host { bottom: calc(76px + env(safe-area-inset-bottom)); }
  /* the sticky form footer (edit pages) must sit above the tab bar */
  .form-footer { bottom: calc(58px + env(safe-area-inset-bottom)); }
}