/* =========================================================================
   Arc.UI — Design system bundle (tokens + utility classes)

   This file is the canonical Arc design system. Sites build on Arc consume
   it via the Razor Class Library static-asset pipeline:

       <link rel="stylesheet" href="_content/YourHealth.Arc.UI/css/arc-ui.css" />

   Theming: override the CSS variables on :root (or under a more specific
   selector) in your own site stylesheet, loaded AFTER this file. See
   /docs/recipes/theming for examples.

   Two sections:
       1. TOKENS + BASE TYPE — the design tokens + semantic HTML defaults
       2. UTILITY CLASSES    — .arc-* primitives (button / card / badge / ...)

   Source: extracted U1 wave 1 from site/src/Arc.Site.Client/wwwroot/css/
   {colors_and_type,shared}.css. arc-site itself dogfoods this package
   (wave 5 migration), so this file is the single source of truth.
   ========================================================================= */


/* =========================================================================
   1. TOKENS + BASE TYPE
   Dark-first developer tooling. One luminous accent. Geist sans + mono.
   ========================================================================= */

/* ---------- Webfonts ----------
   Geist + Geist Mono are loaded from Google Fonts. Both are variable.
   If self-hosting, drop the .woff2 files into /fonts and override the @font-face below.
*/
@import url("https://fonts.googleapis.com/css2?family=Geist:wght@300..900&family=Geist+Mono:wght@300..800&display=swap");

:root {
  /* =========================
     COLOR — Dark mode (primary identity)
     ========================= */

  /* Backgrounds — flat, near-black, slightly cool */
  --arc-bg-0: #08090B;        /* page / deepest */
  --arc-bg-1: #0F1012;        /* default surface */
  --arc-bg-2: #16181B;        /* card / panel */
  --arc-bg-3: #1D1F23;        /* hover / row-hover */
  --arc-bg-4: #25282D;        /* pressed / active row */

  /* Borders — graduated subtlety */
  --arc-border-1: #1B1D21;    /* hairline, barely-there */
  --arc-border-2: #2A2C31;    /* default */
  --arc-border-3: #3A3D43;    /* strong / hover */
  --arc-border-focus: #43F5A1; /* focus ring */

  /* Foreground — text & icons */
  --arc-fg-1: #F4F5F7;        /* primary text, headlines */
  --arc-fg-2: #B4B6BC;        /* body, secondary */
  --arc-fg-3: #797C84;        /* muted, captions, placeholders */
  --arc-fg-4: #4A4D54;        /* faint, decorative */
  --arc-fg-on-accent: #07120C; /* text/icons sitting ON the accent fill */

  /* Accent — the only chromatic color. Use sparingly. */
  --arc-accent: #43F5A1;      /* signature luminous mint */
  --arc-chart-bar: #666A72;            /* recessive data fill — >=3:1 on bg-0..bg-2 */
  --arc-chart-bar-emphasis: #43F5A1;   /* accent as-is; separates from the gray at deltaE 36 (deutan) */
  --arc-accent-hi: #6FF8B5;   /* hover lift */
  --arc-accent-lo: #2EDB8A;   /* pressed */
  --arc-accent-dim: #1A3326;  /* tint fill (10–12% over bg-0) */
  --arc-accent-soft: rgba(67, 245, 161, 0.14); /* hover tints, badge bg */
  --arc-accent-glow: 0 0 32px -4px rgba(67, 245, 161, 0.45);

  /* Semantic — used minimally */
  --arc-info: #5BA8F7;
  --arc-warn: #F5C443;
  --arc-danger: #F5636B;
  --arc-success: var(--arc-accent);

  /* Syntax highlighting (Arc code samples) */
  --arc-syn-fg: #E5E7EB;
  --arc-syn-comment: #5C6068;
  --arc-syn-keyword: #C792EA;   /* purple — types, keywords */
  --arc-syn-string: #43F5A1;    /* mint — matches accent */
  --arc-syn-number: #F5C443;    /* amber */
  --arc-syn-fn: #5BA8F7;        /* blue — identifiers/methods */
  --arc-syn-class: #FFD9A1;     /* warm — class names */
  --arc-syn-punct: #797C84;

  /* =========================
     TYPE — base stacks
     ========================= */
  --arc-font-sans: "Geist", ui-sans-serif, system-ui, -apple-system, "Segoe UI",
                   Roboto, "Helvetica Neue", Arial, sans-serif;
  --arc-font-mono: "Geist Mono", ui-monospace, "SF Mono", "JetBrains Mono",
                   Menlo, Consolas, monospace;

  /* Type scale (px) */
  --arc-size-display-2xl: 72px;
  --arc-size-display-xl:  56px;
  --arc-size-display-lg:  40px;
  --arc-size-h1: 32px;
  --arc-size-h2: 24px;
  --arc-size-h3: 18px;
  --arc-size-body-lg: 17px;
  --arc-size-body: 15px;
  --arc-size-body-sm: 13px;
  --arc-size-caption: 12px;
  --arc-size-eyebrow: 11px;
  --arc-size-mono: 13.5px;

  /* Line heights */
  --arc-lh-tight: 1.05;
  --arc-lh-snug:  1.2;
  --arc-lh-base:  1.55;
  --arc-lh-loose: 1.7;

  /* Tracking (letter-spacing) */
  --arc-track-display: -0.03em;
  --arc-track-tight:   -0.015em;
  --arc-track-base:    -0.005em;
  --arc-track-wide:     0.12em;

  /* Weights */
  --arc-weight-regular: 400;
  --arc-weight-medium:  500;
  --arc-weight-semibold: 600;
  --arc-weight-bold:    700;

  /* =========================
     SPACING — 4px base grid
     ========================= */
  --arc-space-1: 4px;
  --arc-space-2: 8px;
  --arc-space-3: 12px;
  --arc-space-4: 16px;
  --arc-space-5: 20px;
  --arc-space-6: 24px;
  --arc-space-8: 32px;
  --arc-space-10: 40px;
  --arc-space-12: 48px;
  --arc-space-16: 64px;
  --arc-space-20: 80px;
  --arc-space-24: 96px;
  --arc-space-32: 128px;

  /* =========================
     RADII
     ========================= */
  --arc-radius-0: 0px;
  --arc-radius-1: 4px;    /* default small (buttons, inputs, code chips) */
  --arc-radius-2: 6px;    /* default medium */
  --arc-radius-3: 8px;    /* cards */
  --arc-radius-4: 12px;   /* large containers */
  --arc-radius-5: 16px;   /* hero cards */
  --arc-radius-pill: 999px;

  /* =========================
     SHADOWS / GLOWS
     Dark UI leans on borders, not drop shadows.
     ========================= */
  --arc-shadow-1: 0 1px 0 0 rgba(255, 255, 255, 0.04) inset,
                  0 1px 2px 0 rgba(0, 0, 0, 0.4);
  --arc-shadow-2: 0 1px 0 0 rgba(255, 255, 255, 0.05) inset,
                  0 8px 24px -8px rgba(0, 0, 0, 0.6);
  --arc-shadow-3: 0 1px 0 0 rgba(255, 255, 255, 0.06) inset,
                  0 24px 60px -16px rgba(0, 0, 0, 0.8);
  --arc-ring-focus: 0 0 0 1px var(--arc-bg-0),
                    0 0 0 3px rgba(67, 245, 161, 0.55);

  /* =========================
     INTERACTION STATE — semantic surface + opacity aliases
     Intent names layered over the raw palette so a component (or a consumer) expresses a state
     once and re-themes it in one place — instead of hard-coding bg-3 / opacity:.5 inline. The
     surface aliases reference the palette vars, so they track light/dark automatically.
     ========================= */
  --arc-surface-hover: var(--arc-bg-3);            /* neutral hover fill — rows, ghost/secondary buttons, menu + option items */
  --arc-surface-active: var(--arc-bg-4);           /* pressed / active row */
  --arc-surface-selected: var(--arc-accent-soft);  /* selected / current item tint */

  --arc-opacity-disabled: 0.5;    /* disabled controls — the single source for "this is inactive" */
  --arc-opacity-muted: 0.6;       /* de-emphasized / secondary content */
  --arc-opacity-dragging: 0.45;   /* the element currently being dragged (ghost) */

  /* =========================
     DENSITY — control & row padding
     One systemic switch for how tightly the UI packs. The COMFORTABLE values below equal the
     historical control/row paddings exactly, so default rendering is unchanged. Setting
     data-arc-density="compact" on a scope (the whole <html> via ArcThemeProvider, or any
     subtree wrapper) re-tunes the whole set together — see the [data-arc-density="compact"]
     block. Explicit size variants (.arc-btn-sm/-lg, .arc-list-dense) keep their own absolute
     paddings and are not affected; density re-tunes the DEFAULT size only.
     ========================= */
  --arc-density-control-py: 10px;  /* buttons + text fields — vertical */
  --arc-density-btn-px: 14px;      /* button — horizontal */
  --arc-density-field-px: 12px;    /* text field — horizontal */
  --arc-density-row-py: 8px;       /* list / option rows — vertical */
  --arc-density-row-px: 10px;      /* list + menu rows — horizontal */
  --arc-density-menu-py: 7px;      /* menu / context-menu items — vertical */
  --arc-density-cell-py: 10px;     /* data-grid header + body cells — vertical */
  --arc-density-cell-px: 12px;     /* data-grid header + body cells — horizontal */

  /* =========================
     MOTION
     ========================= */
  --arc-ease: cubic-bezier(0.2, 0.7, 0.2, 1);     /* default — quick, settled */
  --arc-ease-out: cubic-bezier(0.16, 1, 0.3, 1);  /* entrance, lift */
  --arc-ease-in: cubic-bezier(0.7, 0, 0.84, 0);   /* exit */
  --arc-dur-fast: 120ms;
  --arc-dur-base: 180ms;
  --arc-dur-slow: 320ms;

  /* =========================
     LAYOUT
     ========================= */
  --arc-container-sm: 720px;
  --arc-container-md: 960px;
  --arc-container-lg: 1200px;
  --arc-container-xl: 1440px;

  /* =========================
     Z-INDEX — named layering scale
     Layer components against names, not magic numbers. Ordered low→high; gaps leave room to slot
     a layer between two without renumbering. Purely-local micro-stacking inside one component's own
     positioning context (e.g. a sticky table head vs its frozen column at z 1/2/3) intentionally
     stays literal — these tokens are for CROSS-component layering only.
     ========================= */
  --arc-z-base: 0;          /* default flow (reserved — for explicit base layering) */
  --arc-z-sticky: 100;      /* sticky headers / toolbars / command bars / page headers */
  --arc-z-fab: 300;         /* fixed floating affordances: FAB, quick-bar, speed-dial, scroll-to-top, nav toggle */
  --arc-z-dropdown: 1000;   /* anchored floating panels: menus, popovers, selects, pickers, autocompletes */
  --arc-z-tooltip: 1100;    /* tooltips (above dropdowns) */
  --arc-z-drawer: 1200;     /* drawers / off-canvas nav — a modal ArcDrawer uses the native <dialog> top layer; Modal="false" drawers stack here */
  --arc-z-dialog: 1300;     /* modal dialogs (intent only — native <dialog> top layer); applied to .arc-lightbox, which isn't a <dialog> */
  --arc-z-toast: 1400;      /* toasts / transient notifications — top of the in-page stack (below any native top-layer <dialog>) */
}

/* =========================
   LIGHT MODE — secondary
   Applied via [data-theme="light"] on root.
   ========================= */
[data-theme="light"] {
  --arc-bg-0: #FFFFFF;
  --arc-bg-1: #FAFAFB;
  --arc-bg-2: #F4F5F7;
  --arc-bg-3: #ECEDEF;
  --arc-bg-4: #E3E4E8;
  --arc-border-1: #EFEFF2;
  --arc-border-2: #DDDEE2;
  --arc-border-3: #C4C6CC;
  --arc-fg-1: #0A0B0E;
  --arc-fg-2: #3F4147;
  --arc-fg-3: #6B6E76;
  --arc-fg-4: #A6A9B0;
  --arc-accent: #0E9F66;        /* darker, accessible mint on light */
  --arc-chart-bar: #868B94;
  /* NOT --arc-accent (#0E9F66): against the gray above it lands at deltaE 5.9 (deutan) /
     14.5 (normal), i.e. the highlight all but vanishes in light mode. Re-stepped darker to
     clear the separation floor while keeping >=3:1 on white through bg-2. */
  --arc-chart-bar-emphasis: #087046;
  --arc-accent-hi: #14B574;
  --arc-accent-lo: #0A7E50;
  --arc-accent-soft: rgba(14, 159, 102, 0.10);
  --arc-fg-on-accent: #FFFFFF;
}

/* =========================
   COMPACT DENSITY — secondary
   Applied via data-arc-density="compact" on root (whole app, via ArcThemeProvider) or on any
   wrapper element (a single dense subtree). Orthogonal to theme — only re-tunes padding, never
   color. Re-tunes the control/row rhythm ~30–40% tighter for pointer-dense desktop layouts
   (dashboards, data tables). Comfortable stays the default + the right choice for touch.
   ========================= */
[data-arc-density="compact"] {
  --arc-density-control-py: 6px;
  --arc-density-btn-px: 11px;
  --arc-density-field-px: 10px;
  --arc-density-row-py: 5px;
  --arc-density-row-px: 8px;
  --arc-density-menu-py: 4px;
  --arc-density-cell-py: 6px;
  --arc-density-cell-px: 10px;
}

/* =========================
   SEMANTIC TYPE — base elements
   Apply to any plain HTML. Components can override with utility classes.
   ========================= */
html, body {
  font-family: var(--arc-font-sans);
  font-size: var(--arc-size-body);
  line-height: var(--arc-lh-base);
  letter-spacing: var(--arc-track-base);
  font-weight: var(--arc-weight-regular);
  color: var(--arc-fg-1);
  background: var(--arc-bg-0);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  font-feature-settings: "ss01", "cv11";   /* Geist stylistic alts */
}

h1, .arc-h1 {
  font-size: var(--arc-size-h1);
  line-height: var(--arc-lh-snug);
  letter-spacing: var(--arc-track-tight);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}
h2, .arc-h2 {
  font-size: var(--arc-size-h2);
  line-height: var(--arc-lh-snug);
  letter-spacing: var(--arc-track-tight);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}
h3, .arc-h3 {
  font-size: var(--arc-size-h3);
  line-height: 1.4;
  letter-spacing: var(--arc-track-base);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}
p, .arc-p {
  font-size: var(--arc-size-body);
  line-height: var(--arc-lh-base);
  color: var(--arc-fg-2);
  text-wrap: pretty;
}
small, .arc-caption {
  font-size: var(--arc-size-caption);
  line-height: var(--arc-lh-base);
  color: var(--arc-fg-3);
}

/* Display — hero / section openers */
.arc-display-2xl {
  font-size: var(--arc-size-display-2xl);
  line-height: var(--arc-lh-tight);
  letter-spacing: var(--arc-track-display);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}
.arc-display-xl {
  font-size: var(--arc-size-display-xl);
  line-height: var(--arc-lh-tight);
  letter-spacing: var(--arc-track-display);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}
.arc-display-lg {
  font-size: var(--arc-size-display-lg);
  line-height: var(--arc-lh-tight);
  letter-spacing: var(--arc-track-display);
  font-weight: var(--arc-weight-semibold);
  color: var(--arc-fg-1);
}

/* Eyebrow — uppercase tag above titles */
.arc-eyebrow {
  font-size: var(--arc-size-eyebrow);
  text-transform: uppercase;
  letter-spacing: var(--arc-track-wide);
  font-weight: var(--arc-weight-medium);
  color: var(--arc-accent);
  font-family: var(--arc-font-mono);
}

/* Mono — code, file paths, tokens, terminal */
code, kbd, samp, pre, .arc-mono {
  font-family: var(--arc-font-mono);
  font-size: var(--arc-size-mono);
  font-feature-settings: "zero", "ss01";
}
code {
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  padding: 1px 6px;
  border-radius: var(--arc-radius-1);
  color: var(--arc-fg-1);
  font-size: 0.9em;
}

/* Links — accent on hover only, never default colored */
a {
  color: var(--arc-fg-1);
  text-decoration: none;
  border-bottom: 1px solid var(--arc-border-3);
  transition: color var(--arc-dur-fast) var(--arc-ease),
              border-color var(--arc-dur-fast) var(--arc-ease);
}
a:hover {
  color: var(--arc-accent);
  border-bottom-color: var(--arc-accent);
}

/* Selection */
::selection {
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
}

/* Focus — accessible & on-brand */
:focus-visible {
  outline: none;
  box-shadow: var(--arc-ring-focus);
  border-radius: var(--arc-radius-1);
}
/* Consumer bridge: the same ring for markup that isn't on an Arc component yet. At (0,2,0) it
   outranks a single-class `box-shadow` in an app stylesheet, which the bare rule above cannot. */
.arc-focusable:focus-visible {
  outline: none;
  box-shadow: var(--arc-ring-focus);
}


/* =========================================================================
   2. UTILITY CLASSES — the .arc-* primitives
   ========================================================================= */

/* Reset */
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; }
body {
  margin: 0;
  /* Defensive horizontal-overflow guard. IMPORTANT: must be `clip`, not `hidden`.
     `overflow-x: hidden` on body establishes a new scrolling context in Chrome
     Android (and some iOS Safari builds), which re-anchors `position: fixed`
     descendants to the body box instead of the viewport — symptom is the
     chatbot FAB getting positioned at document-bottom, only visible after
     scrolling to the end of the page. `overflow-x: clip` clips the same way
     WITHOUT creating that containing block, so fixed-positioned UI keeps
     pinning to the visual viewport. */
  overflow-x: clip;
}
button { font-family: inherit; }

/* Container */
.arc-container { max-width: var(--arc-container-lg); margin: 0 auto; padding: 0 24px; }
.arc-container-md { max-width: var(--arc-container-md); margin: 0 auto; padding: 0 24px; }
.arc-container-sm { max-width: var(--arc-container-sm); margin: 0 auto; padding: 0 24px; }

/* Buttons */
.arc-btn {
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  line-height: 1;
  letter-spacing: -0.005em;
  padding: var(--arc-density-control-py) var(--arc-density-btn-px);
  border-radius: var(--arc-radius-1);
  cursor: pointer;
  transition: all var(--arc-dur-fast) var(--arc-ease);
  border: 1px solid transparent;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  text-decoration: none;
  white-space: nowrap;
}
.arc-btn-primary {
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
}
.arc-btn-primary:hover { background: var(--arc-accent-hi); color: var(--arc-fg-on-accent); border-bottom-color: transparent; }
.arc-btn-primary:active { background: var(--arc-accent-lo); transform: translateY(1px); }
.arc-btn-secondary {
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  border-color: var(--arc-border-2);
}
.arc-btn-secondary:hover { background: var(--arc-surface-hover); border-color: var(--arc-border-3); color: var(--arc-fg-1); border-bottom-color: var(--arc-border-3); }
.arc-btn-ghost {
  background: transparent;
  color: var(--arc-fg-2);
}
.arc-btn-ghost:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); border-bottom-color: transparent; }
.arc-btn-lg { padding: 12px 18px; font-size: 14.5px; }

/* Glow border (for signature CTAs) */
.arc-glow { box-shadow: var(--arc-accent-glow); }

/* Cards */
.arc-card {
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-3);
  padding: 24px;
  box-shadow: var(--arc-shadow-1);
  transition: border-color var(--arc-dur-base) var(--arc-ease);
}
.arc-card:hover { border-color: var(--arc-border-3); }

/* Badges */
.arc-badge {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: var(--arc-radius-pill);
  font-size: 11.5px;
  font-weight: 500;
  line-height: 1.4;
  border: 1px solid;
  font-family: var(--arc-font-sans);
  white-space: nowrap;
}
.arc-badge-accent { background: var(--arc-accent-soft); color: var(--arc-accent); border-color: rgba(67,245,161,0.22); }
.arc-badge-neutral { background: var(--arc-bg-2); color: var(--arc-fg-2); border-color: var(--arc-border-2); }
.arc-badge-info { background: rgba(91,168,247,0.12); color: var(--arc-info); border-color: rgba(91,168,247,0.25); }
.arc-badge-warn { background: rgba(245,196,67,0.12); color: var(--arc-warn); border-color: rgba(245,196,67,0.25); }
.arc-badge-dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; }

/* Chips */
.arc-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  font-family: var(--arc-font-mono);
  font-size: 12px;
  color: var(--arc-fg-1);
}

/* Dot grid background (optional) */
.arc-dotgrid {
  background-image: radial-gradient(circle at 1px 1px, var(--arc-fg-4) 0.5px, transparent 0);
  background-size: 24px 24px;
}

/* Section dividers */
.arc-divider { height: 1px; background: var(--arc-border-1); border: 0; margin: 0; }

/* Eyebrow tag */
.arc-eyebrow-tag {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
}

/* Headings unset for components */
.arc-h-display {
  font-size: clamp(40px, 6vw, 72px);
  line-height: 1.05;
  letter-spacing: -0.03em;
  font-weight: 600;
  color: var(--arc-fg-1);
  margin: 0;
}

/* Lucide icon helper */
.lucide { width: 1em; height: 1em; vertical-align: -0.125em; fill: none; stroke: currentColor; stroke-width: 1.75; stroke-linecap: round; stroke-linejoin: round; }

/* Focus override for buttons */
.arc-btn:focus-visible { outline: none; box-shadow: var(--arc-ring-focus); }

/* ===========================================================================
 * Form inputs — text/email/password/number, textarea, select, checkbox.
 * Used by the standalone Arc.UI.Blazor primitives (ArcInput / ArcTextarea /
 * ArcSelect / ArcCheckbox) AND the Arc.Forms.Blazor field renderers which
 * compose on top. Migrated from Arc.Forms.Blazor/wwwroot/arc-forms.css in
 * U1 wave 2.5 so the form aesthetic isn't tied to using Form<T>.
 * =========================================================================== */

/* ---- Field wrapper ---- */
.arc-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 16px;
}
.arc-field:last-child {
  margin-bottom: 0;
}

/* ---- Label ---- */
.arc-label {
  display: block;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  font-weight: 500;
  line-height: 1.2;
  color: var(--arc-fg-2);
  letter-spacing: -0.005em;
}

/* ---- Input / textarea / select ---- */
.arc-input {
  display: block;
  width: 100%;
  box-sizing: border-box;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  line-height: 1.45;
  color: var(--arc-fg-1);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  padding: var(--arc-density-control-py) var(--arc-density-field-px);
  transition: border-color 120ms ease, box-shadow 120ms ease, background 120ms ease;
}
.arc-input::placeholder { color: var(--arc-fg-3); }
.arc-input:hover { border-color: var(--arc-border-3); }
.arc-input:focus-visible {
  outline: none;
  border-color: var(--arc-border-focus);
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.18);
}
.arc-input:disabled {
  background: var(--arc-bg-2);
  color: var(--arc-fg-3);
  cursor: not-allowed;
}

textarea.arc-input { resize: vertical; min-height: 84px; }

select.arc-input {
  appearance: none;
  -webkit-appearance: none;
  background-image:
    linear-gradient(45deg, transparent 50%, var(--arc-fg-3) 50%),
    linear-gradient(135deg, var(--arc-fg-3) 50%, transparent 50%);
  background-position:
    right 14px center,
    right 9px center;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
}

/* ---- Invalid state ---- */
.arc-field-invalid .arc-input { border-color: var(--arc-danger); }
.arc-field-invalid .arc-input:focus-visible {
  border-color: var(--arc-danger);
  box-shadow: 0 0 0 3px rgba(245, 99, 107, 0.20);
}
.arc-field-invalid .arc-label { color: var(--arc-danger); }

/* ---- Toolbar variants (ArcInput / ArcSelect) ---- */
/* Dense: a shorter control for filter rows, so a search box and the selects beside it sit level. */
.arc-input-dense { padding: 4px 10px; font-size: 13px; }
select.arc-input-dense { padding-right: 28px; }

/* Adorned: a leading glyph inside the border and/or a trailing ✕. The wrapper is positioned so
   the adornments overlay the input; the input keeps `.arc-input` and its full width. */
.arc-input-adorned { position: relative; display: flex; align-items: center; }
.arc-input-adorned-leading .arc-input { padding-left: 32px; }
.arc-input-adorned-clearable .arc-input { padding-right: 32px; }
.arc-input-leading {
  position: absolute;
  left: 11px;
  display: inline-flex;
  align-items: center;
  color: var(--arc-fg-3);
  pointer-events: none;
}
.arc-input-clear {
  position: absolute;
  right: 8px;
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--arc-fg-3);
  line-height: 1;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-input-clear:hover { background: var(--arc-surface-hover); color: var(--arc-fg-1); }

/* ---- Error region ---- */
.arc-error {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  line-height: 1.3;
  color: var(--arc-danger);
}

/* ---- Help text ---- */
.arc-help {
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  line-height: 1.4;
  color: var(--arc-fg-3);
}

/* ---- Checkbox ---- */
.arc-field-checkbox { flex-direction: column; gap: 4px; }

.arc-checkbox-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  color: var(--arc-fg-1);
}
.arc-checkbox-label .arc-label {
  display: inline;
  margin: 0;
  color: inherit;
  font-size: inherit;
  font-weight: 400;
}

.arc-checkbox {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--arc-border-3);
  border-radius: 3px;
  background: var(--arc-bg-1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 120ms ease, border-color 120ms ease, box-shadow 120ms ease;
}
.arc-checkbox:hover { border-color: var(--arc-accent); }
.arc-checkbox:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20);
}
.arc-checkbox:checked {
  background: var(--arc-accent);
  border-color: var(--arc-accent);
}
.arc-checkbox:checked::after {
  content: "";
  position: absolute;
  inset: 2px;
  background: var(--arc-fg-on-accent);
  clip-path: polygon(14% 49%, 0 63%, 38% 100%, 100% 22%, 84% 8%, 38% 73%);
}
.arc-checkbox:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===========================================================================
 * Layout primitives — shell, sticky header, footer, page-level chrome.
 * Consumed by Arc.UI.Blazor's ArcShell / ArcHeader / ArcNav / ArcFooter /
 * ArcPageHeader / ArcSection components. Migrated from arc-site/css/app.css
 * in U1 wave 3 so the chrome doesn't require an arc-site dependency.
 * =========================================================================== */

/* ---- Shell ---- */
.arc-shell { min-height: 100vh; display: flex; flex-direction: column; }
.arc-main { flex: 1; }

/* ---- Header (sticky, blurred) ---- */
.arc-header {
  position: sticky;
  top: 0;
  z-index: var(--arc-z-sticky);
  height: 56px;
  border-bottom: 1px solid var(--arc-border-1);
  background: rgba(8, 9, 11, 0.72);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
}
.arc-header-inner {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 24px;
}

/* ---- Primary nav (horizontal, in-header) ---- */
.arc-nav {
  display: flex;
  gap: 28px;
  align-items: center;
  margin-left: auto;
}
.arc-nav a {
  font-size: 13.5px;
  color: var(--arc-fg-2);
  font-weight: 500;
  border-bottom: 0;
  text-decoration: none;
  transition: color var(--arc-dur-fast) var(--arc-ease);
}
.arc-nav a:hover,
.arc-nav a.active { color: var(--arc-fg-1); }

/* ---- Header right-side action group ---- */
.arc-header-actions { display: flex; gap: 10px; align-items: center; }

/* ---- Footer ---- */
.arc-footer {
  border-top: 1px solid var(--arc-border-1);
  padding: 80px 0 32px;
  margin-top: 96px;
}
.arc-footer-grid {
  display: grid;
  grid-template-columns: 1.4fr repeat(3, 1fr);
  gap: 48px;
  margin-bottom: 64px;
}
.arc-footer-col-title {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-fg-3);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  margin-bottom: 16px;
  font-weight: 500;
}
.arc-footer-col ul { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 10px; }
.arc-footer-col a { font-size: 13.5px; color: var(--arc-fg-2); border-bottom: 0; text-decoration: none; }
.arc-footer-col a:hover { color: var(--arc-fg-1); }
.arc-footer-bottom {
  padding-top: 24px;
  border-top: 1px solid var(--arc-border-1);
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 16px;
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
}

/* ---- Page header (eyebrow + title + description) ---- */
.arc-page-header { margin-bottom: 48px; }
.arc-page-header-title {
  font-size: clamp(32px, 4.4vw, 48px);
  line-height: 1.1;
  letter-spacing: -0.025em;
  font-weight: 600;
  color: var(--arc-fg-1);
  margin: 8px 0 12px;
}
.arc-page-header-desc {
  font-size: 16px;
  line-height: 1.5;
  color: var(--arc-fg-2);
  max-width: 720px;
  margin: 0;
}

/* ---- Section (semantic block with optional title) ---- */
.arc-section { margin: 64px 0; }
.arc-section-title {
  font-size: 22px;
  line-height: 1.25;
  letter-spacing: -0.015em;
  font-weight: 600;
  color: var(--arc-fg-1);
  margin: 0 0 16px;
}
.arc-section-eyebrow {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-accent);
  letter-spacing: 0.12em;
  text-transform: uppercase;
  font-weight: 500;
  margin-bottom: 6px;
}

/* ---- Responsive: collapse header nav at 860px, footer grid at 860/560px ----
   These breakpoints intentionally match the values the site shipped with
   pre-migration so wave 5's app.css deletion is byte-for-byte identical.
   - 860px → primary nav hides (mobile drawer takes over) + footer drops to 2 cols
   - 560px → footer drops to 1 col + bottom row stacks vertically */
@media (max-width: 860px) {
  .arc-nav { display: none; }
  .arc-footer-grid { grid-template-columns: minmax(0, 1fr) 1fr; gap: 32px; }
}
@media (max-width: 560px) {
  .arc-footer-grid { grid-template-columns: minmax(0, 1fr); gap: 28px; }
  .arc-footer-bottom { flex-direction: column; align-items: flex-start; }
}

/* ===========================================================================
 * U2 wave 1 — zero-JS feedback / control components.
 * ArcAlert, ArcSpinner, ArcProgress, ArcSwitch.
 * =========================================================================== */

/* ---- Alert (inline message box) ---- */
.arc-alert {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px 14px;
  border-radius: var(--arc-radius-1);
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  font-size: 14px;
  line-height: 1.5;
  color: var(--arc-fg-1);
}
.arc-alert-icon {
  flex-shrink: 0;
  font-size: 16px;
  line-height: 1.3;
  font-weight: 600;
}
.arc-alert-body { flex: 1; min-width: 0; }
.arc-alert-title { font-weight: 600; margin-bottom: 2px; }
.arc-alert-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: var(--arc-radius-1);
}
.arc-alert-dismiss:hover { color: var(--arc-fg-1); }
.arc-alert-dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}

.arc-alert-info {
  background: color-mix(in srgb, var(--arc-info) 12%, var(--arc-bg-1));
  border-color: color-mix(in srgb, var(--arc-info) 40%, var(--arc-border-2));
}
.arc-alert-info .arc-alert-icon { color: var(--arc-info); }

.arc-alert-success {
  background: color-mix(in srgb, var(--arc-accent) 10%, var(--arc-bg-1));
  border-color: color-mix(in srgb, var(--arc-accent) 35%, var(--arc-border-2));
}
.arc-alert-success .arc-alert-icon { color: var(--arc-accent); }

.arc-alert-warn {
  background: color-mix(in srgb, var(--arc-warn) 12%, var(--arc-bg-1));
  border-color: color-mix(in srgb, var(--arc-warn) 40%, var(--arc-border-2));
}
.arc-alert-warn .arc-alert-icon { color: var(--arc-warn); }

.arc-alert-error {
  background: color-mix(in srgb, var(--arc-danger) 12%, var(--arc-bg-1));
  border-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2));
}
.arc-alert-error .arc-alert-icon { color: var(--arc-danger); }

/* ---- Spinner (indeterminate loader) ---- */
.arc-spinner {
  display: inline-block;
  width: 18px;
  height: 18px;
  border: 2px solid var(--arc-border-2);
  border-top-color: var(--arc-accent);
  border-radius: 50%;
  animation: arc-spin 0.75s linear infinite;
  flex-shrink: 0;
  vertical-align: -3px;
}
.arc-spinner-sm { width: 12px; height: 12px; border-width: 1.5px; }
.arc-spinner-lg { width: 28px; height: 28px; border-width: 3px; }

@keyframes arc-spin {
  to { transform: rotate(360deg); }
}

/* ---- Progress bar (determinate + indeterminate) ---- */
.arc-progress {
  position: relative;
  width: 100%;
  height: 6px;
  background: var(--arc-bg-2);
  border-radius: var(--arc-radius-pill);
  overflow: hidden;
}
.arc-progress-fill {
  height: 100%;
  background: var(--arc-accent);
  border-radius: var(--arc-radius-pill);
  transition: width 240ms var(--arc-ease);
}
.arc-progress-lg { height: 10px; }
.arc-progress-sm { height: 4px; }

.arc-progress-indeterminate .arc-progress-fill {
  width: 30% !important;
  animation: arc-progress-slide 1.4s ease-in-out infinite;
}
@keyframes arc-progress-slide {
  0%   { transform: translateX(-110%); }
  100% { transform: translateX(360%); }
}

/* ---- Switch (toggle) ----
   Custom-painted using a checkbox under the hood so native a11y (Space toggles,
   focus ring, label-for linkage) still works. Mirrors the .arc-checkbox pattern. */
.arc-switch-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  color: var(--arc-fg-1);
}
.arc-switch {
  appearance: none;
  -webkit-appearance: none;
  width: 34px;
  height: 20px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-3);
  border-radius: var(--arc-radius-pill);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background 160ms var(--arc-ease), border-color 160ms var(--arc-ease);
}
.arc-switch::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 14px;
  height: 14px;
  background: var(--arc-fg-2);
  border-radius: 50%;
  transition: transform 160ms var(--arc-ease), background 160ms var(--arc-ease);
}
.arc-switch:hover { border-color: var(--arc-accent); }
.arc-switch:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20);
}
.arc-switch:checked {
  background: var(--arc-accent);
  border-color: var(--arc-accent);
}
.arc-switch:checked::after {
  transform: translateX(14px);
  background: var(--arc-fg-on-accent);
}
.arc-switch:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ===========================================================================
 * U2 wave 2 — overlays / coordination components.
 * ArcDialog (native <dialog>), ArcToast + ArcToastHost, ArcTabs + ArcTabPanel.
 * =========================================================================== */

/* ---- Dialog — styles the native <dialog> + ::backdrop pseudo ----
   Using HTML5 <dialog> with .showModal() means the browser gives us a focus
   trap, Esc-close, and inert background automatically. We just style the
   chrome. ::backdrop is the dim layer behind the dialog. */
dialog.arc-dialog {
  padding: 0;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  max-width: min(560px, 92vw);
  max-height: 90vh;
  overflow: hidden;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.20);
}
dialog.arc-dialog::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}
.arc-dialog-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  border-bottom: 1px solid var(--arc-border-1);
}
.arc-dialog-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0;
  color: var(--arc-fg-1);
  letter-spacing: -0.005em;
}
.arc-dialog-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--arc-radius-1);
  cursor: pointer;
}
.arc-dialog-close:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-dialog-close:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}
.arc-dialog-body {
  padding: 20px;
  font-size: 14px;
  line-height: 1.55;
  color: var(--arc-fg-2);
  overflow-y: auto;
  max-height: calc(90vh - 130px);
}
.arc-dialog-footer {
  display: flex;
  gap: 10px;
  justify-content: flex-end;
  padding: 14px 20px;
  border-top: 1px solid var(--arc-border-1);
  background: var(--arc-bg-0);
}

/* ---- Toast host + toast cards ----
   Fixed-position stack in the top-right. Each toast slides in from the right
   and slides out on dismiss. Aria-live=polite so screen readers announce
   without preempting current speech. */
.arc-toast-host {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: var(--arc-z-toast);
  display: flex;
  flex-direction: column;
  gap: 10px;
  max-width: min(380px, calc(100vw - 40px));
  pointer-events: none;
}
.arc-toast-host > * { pointer-events: auto; }

.arc-toast {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 12px 14px;
  border-radius: var(--arc-radius-1);
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  font-size: 13.5px;
  line-height: 1.5;
  color: var(--arc-fg-1);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.30), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-toast-in 220ms var(--arc-ease);
}
.arc-toast-icon {
  flex-shrink: 0;
  font-size: 14px;
  font-weight: 600;
  margin-top: 1px;
}
.arc-toast-body { flex: 1; min-width: 0; }
.arc-toast-title { font-weight: 600; margin-bottom: 2px; }
.arc-toast-dismiss {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 0 4px;
  cursor: pointer;
  border-radius: var(--arc-radius-1);
}
.arc-toast-dismiss:hover { color: var(--arc-fg-1); }
.arc-toast-dismiss:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}

.arc-toast-info { border-color: color-mix(in srgb, var(--arc-info) 40%, var(--arc-border-2)); }
.arc-toast-info .arc-toast-icon { color: var(--arc-info); }
.arc-toast-success { border-color: color-mix(in srgb, var(--arc-accent) 40%, var(--arc-border-2)); }
.arc-toast-success .arc-toast-icon { color: var(--arc-accent); }
.arc-toast-warn { border-color: color-mix(in srgb, var(--arc-warn) 40%, var(--arc-border-2)); }
.arc-toast-warn .arc-toast-icon { color: var(--arc-warn); }
.arc-toast-error { border-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2)); }
.arc-toast-error .arc-toast-icon { color: var(--arc-danger); }

@keyframes arc-toast-in {
  from { transform: translateX(20px); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}

/* ---- Tabs + tab panels ---- */
.arc-tabs { display: block; }
.arc-tabs-strip {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--arc-border-2);
  margin-bottom: 20px;
  overflow-x: auto;
  scrollbar-width: none;
}
.arc-tabs-strip::-webkit-scrollbar { display: none; }
.arc-tab {
  flex-shrink: 0;
  background: transparent;
  border: 0;
  border-bottom: 2px solid transparent;
  color: var(--arc-fg-2);
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  font-weight: 500;
  padding: 10px 14px;
  margin-bottom: -1px;
  cursor: pointer;
  transition: color var(--arc-dur-fast) var(--arc-ease), border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-tab:hover { color: var(--arc-fg-1); }
.arc-tab-active {
  color: var(--arc-fg-1);
  border-bottom-color: var(--arc-accent);
}
.arc-tab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.20);
  border-radius: var(--arc-radius-1) var(--arc-radius-1) 0 0;
}
.arc-tab:disabled {
  color: var(--arc-fg-3);
  cursor: not-allowed;
}
.arc-tab-panel { display: block; }

/* ===========================================================================
 * U2 wave 3 — Tier 2 zero-JS catalog additions.
 * Accordion, Radio, Avatar, Tooltip, Skeleton, Breadcrumbs, Pagination.
 * =========================================================================== */

/* ---- Accordion (collapsible sections) ---- */
.arc-accordion {
  display: flex;
  flex-direction: column;
  border-radius: var(--arc-radius-1);
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  overflow: hidden;
}
.arc-accordion-item { border-bottom: 1px solid var(--arc-border-1); }
.arc-accordion-item:last-child { border-bottom: 0; }

.arc-accordion-trigger {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 14px 16px;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-fg-1);
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-accordion-trigger:hover { background: var(--arc-bg-2); }
.arc-accordion-trigger:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px rgba(67, 245, 161, 0.30);
}
.arc-accordion-trigger:disabled {
  color: var(--arc-fg-3);
  cursor: not-allowed;
}
.arc-accordion-chevron {
  display: inline-flex;
  color: var(--arc-fg-3);
  transition: transform var(--arc-dur-fast) var(--arc-ease);
  flex-shrink: 0;
  margin-left: 12px;
}
.arc-accordion-item-open .arc-accordion-chevron { transform: rotate(90deg); }

.arc-accordion-content {
  padding: 4px 16px 16px;
  font-size: 13.5px;
  line-height: 1.55;
  color: var(--arc-fg-2);
}

/* ---- Radio + RadioGroup ----
   .arc-radio mirrors the .arc-checkbox custom-painted pattern but with a circular
   shape + filled inner dot when checked. Native <input type="radio"> under the hood. */
.arc-radio-group {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arc-radio-group[data-direction="row"] {
  flex-direction: row;
  flex-wrap: wrap;
  gap: 16px;
}
.arc-radio-label {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  color: var(--arc-fg-1);
}
.arc-radio {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border: 1px solid var(--arc-border-3);
  border-radius: 50%;
  background: var(--arc-bg-1);
  cursor: pointer;
  position: relative;
  flex-shrink: 0;
  transition: background var(--arc-dur-fast) var(--arc-ease), border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-radio:hover { border-color: var(--arc-accent); }
.arc-radio:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20);
}
.arc-radio:checked { border-color: var(--arc-accent); }
.arc-radio:checked::after {
  content: "";
  position: absolute;
  inset: 3px;
  background: var(--arc-accent);
  border-radius: 50%;
}
.arc-radio:disabled {
  cursor: not-allowed;
  opacity: 0.5;
}

/* ---- Avatar (image with initials fallback) ---- */
.arc-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  font-weight: 600;
  letter-spacing: 0;
  overflow: hidden;
  border: 1px solid var(--arc-border-2);
  flex-shrink: 0;
}
.arc-avatar img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: inherit;
  display: block;
}
.arc-avatar-sm { width: 24px; height: 24px; font-size: 11px; }
.arc-avatar-lg { width: 48px; height: 48px; font-size: 16px; }
.arc-avatar-xl { width: 72px; height: 72px; font-size: 22px; }

/* ---- Tooltip (pure CSS, attached to a parent .arc-tooltip-wrap) ----
   Renders the tooltip text via a data-tooltip attribute. Hover/focus the
   wrapper to show. The arrow uses ::before; the body uses ::after. */
.arc-tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.arc-tooltip-wrap::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 8px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  padding: 6px 10px;
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  font-family: var(--arc-font-sans);
  font-size: 12px;
  font-weight: 500;
  line-height: 1.3;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--arc-dur-fast) var(--arc-ease), transform var(--arc-dur-fast) var(--arc-ease);
  z-index: var(--arc-z-tooltip);
}
.arc-tooltip-wrap::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 2px);
  left: 50%;
  transform: translateX(-50%);
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid var(--arc-border-2);
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
  z-index: calc(var(--arc-z-tooltip) - 1);
}
.arc-tooltip-wrap:hover::after,
.arc-tooltip-wrap:focus-within::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.arc-tooltip-wrap:hover::before,
.arc-tooltip-wrap:focus-within::before { opacity: 1; }

/* ---- Skeleton (shimmering placeholder for loading content) ---- */
.arc-skeleton {
  display: block;
  background: linear-gradient(
    90deg,
    var(--arc-bg-1) 0%,
    var(--arc-bg-2) 50%,
    var(--arc-bg-1) 100%
  );
  background-size: 200% 100%;
  animation: arc-skeleton-shimmer 1.4s linear infinite;
  border-radius: var(--arc-radius-1);
  height: 14px;
  width: 100%;
}
.arc-skeleton-text { height: 14px; }
.arc-skeleton-heading { height: 22px; }
.arc-skeleton-circle { border-radius: 50%; }
.arc-skeleton-rect { border-radius: var(--arc-radius-1); }

@keyframes arc-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* ---- Breadcrumbs ---- */
.arc-breadcrumbs {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 4px 6px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  margin: 0;
  padding: 0;
  list-style: none;
}
.arc-breadcrumbs li { display: inline-flex; align-items: center; gap: 6px; }
.arc-breadcrumbs a {
  color: var(--arc-fg-3);
  text-decoration: none;
  border-bottom: 0;
  transition: color var(--arc-dur-fast) var(--arc-ease);
}
.arc-breadcrumbs a:hover { color: var(--arc-fg-1); }
.arc-breadcrumb-current {
  color: var(--arc-fg-1);
  font-weight: 500;
}
.arc-breadcrumb-sep {
  color: var(--arc-fg-3);
  font-family: var(--arc-font-mono);
  font-size: 11px;
  user-select: none;
}

/* ---- Pagination ---- */
.arc-pagination {
  display: flex;
  /* Long page runs wrap onto a second row on narrow screens. */
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
}
.arc-page-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  color: var(--arc-fg-2);
  font-family: inherit;
  font-size: inherit;
  font-weight: 500;
  padding: 6px 11px;
  border-radius: var(--arc-radius-1);
  cursor: pointer;
  min-width: 34px;
  transition: color var(--arc-dur-fast) var(--arc-ease),
              background var(--arc-dur-fast) var(--arc-ease),
              border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-page-btn:hover {
  color: var(--arc-fg-1);
  border-color: var(--arc-border-3);
}
.arc-page-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}
.arc-page-btn:disabled {
  color: var(--arc-fg-3);
  cursor: not-allowed;
  background: transparent;
}
.arc-page-btn-active {
  background: var(--arc-accent);
  border-color: var(--arc-accent);
  color: var(--arc-fg-on-accent);
}
.arc-page-btn-active:hover {
  background: var(--arc-accent-hi);
  border-color: var(--arc-accent-hi);
  color: var(--arc-fg-on-accent);
}
.arc-page-ellipsis {
  color: var(--arc-fg-3);
  padding: 0 6px;
  user-select: none;
}

/* ===========================================================================
 * U2 wave 4 — Menu (dropdown).
 * ArcMenu + ArcMenuItem + ArcMenuDivider. Click-outside-to-close + Esc handled
 * via JS interop in Arc.UI.Blazor's arc-menu.js.
 * =========================================================================== */

.arc-menu-wrap {
  position: relative;
  display: inline-flex;
}

/* ── ArcMultiSelect — chips-in-trigger multi selection ─── */
.arc-multiselect-wrap { position: relative; }
.arc-multiselect-trigger {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px 4px;  /* roomier row gap when chips wrap to a second line */
  width: 100%;
  min-height: 38px;
  height: auto;
  padding: 6px 28px 6px 8px;
  text-align: left;
  cursor: pointer;
}
.arc-multiselect-trigger:disabled { cursor: not-allowed; }
.arc-multiselect-placeholder { color: var(--arc-fg-3); font-size: 13.5px; }
.arc-multiselect-caret {
  position: absolute;
  right: 10px;
  top: 50%;
  transform: translateY(-50%);
  color: var(--arc-fg-3);
  font-size: 11px;
  pointer-events: none;
}
.arc-multiselect-chip {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 6px 2px 8px;
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  font-size: 12.5px;
  color: var(--arc-fg-1);
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-multiselect-chip-x {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 0 2px;
  border-radius: 3px;
}
.arc-multiselect-chip-x:hover { color: var(--arc-fg-1); background: var(--arc-surface-hover); }
.arc-multiselect-panel {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  z-index: var(--arc-z-dropdown);
  max-height: min(40vh, 320px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}
.arc-multiselect-option {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: var(--arc-fg-1);
  font-size: 13.5px;
  text-align: left;
  cursor: pointer;
}
.arc-multiselect-option:hover { background: var(--arc-bg-2); }
.arc-multiselect-option-selected { color: var(--arc-accent); }
.arc-multiselect-check {
  width: 14px;
  flex: 0 0 14px;
  font-size: 12px;
  color: var(--arc-accent);
}
.arc-multiselect-option-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Searchable: filter box pinned above the options; sticky so it stays put while the list scrolls. */
.arc-multiselect-search {
  position: sticky;
  top: -4px;              /* cancel the panel's 4px padding so it hugs the top edge */
  margin: -4px -4px 4px;  /* full-bleed across the panel */
  padding: 6px;
  background: var(--arc-bg-1);
  border-bottom: 1px solid var(--arc-border-1);
  z-index: 1;
}
.arc-multiselect-search-input {
  width: 100%;
  box-sizing: border-box;
  padding: 6px 9px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
}
.arc-multiselect-search-input::placeholder { color: var(--arc-fg-3); }
.arc-multiselect-search-input:focus-visible { outline: none; border-color: var(--arc-border-focus); }
.arc-multiselect-no-matches {
  padding: 10px;
  font-size: 13px;
  color: var(--arc-fg-3);
  text-align: center;
}

/* ── ArcContextMenu — right-click menu at the pointer ─── */
.arc-context-target { display: contents; }
.arc-context-menu-panel {
  position: fixed;
  z-index: var(--arc-z-dropdown);
  min-width: 180px;
  max-width: 320px;
  max-height: min(60vh, 480px);
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}

/* ── ArcPopover — generic anchored overlay (panel chrome matches the menu) ─── */
.arc-popover-wrap { position: relative; display: inline-block; }
.arc-popover-anchor { display: inline-block; }
.arc-popover-panel {
  position: absolute;
  z-index: var(--arc-z-dropdown);
  min-width: 200px;
  max-width: min(360px, 92vw);
  padding: 12px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}
.arc-popover-panel[data-placement="bottom-start"] { top: calc(100% + 6px); left: 0; }
.arc-popover-panel[data-placement="bottom-end"] { top: calc(100% + 6px); right: 0; }
.arc-popover-panel[data-placement="top-start"] { bottom: calc(100% + 6px); left: 0; }
.arc-popover-panel[data-placement="top-end"] { bottom: calc(100% + 6px); right: 0; }
.arc-popover-panel[data-placement="right-start"] { left: calc(100% + 6px); top: 0; }
.arc-popover-panel[data-placement="left-start"] { right: calc(100% + 6px); top: 0; }

.arc-menu-panel {
  position: absolute;
  top: calc(100% + 6px);
  z-index: var(--arc-z-dropdown);
  min-width: 180px;
  max-width: 320px;
  padding: 4px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}

/* Alignment — Start (default) aligns the panel's left edge with the trigger;
   End aligns the panel's right edge with the trigger. */
.arc-menu-panel[data-align="start"] { left: 0; }
.arc-menu-panel[data-align="end"] { right: 0; }

@keyframes arc-menu-in {
  from { transform: translateY(-4px); opacity: 0; }
  to   { transform: translateY(0); opacity: 1; }
}

.arc-menu-item {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: var(--arc-density-menu-py) var(--arc-density-row-px);
  background: transparent;
  border: 0;
  border-radius: var(--arc-radius-1);
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  color: var(--arc-fg-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-menu-item:hover { background: var(--arc-bg-2); }
.arc-menu-item:focus-visible {
  outline: none;
  background: var(--arc-bg-2);
  box-shadow: inset 0 0 0 1px rgba(67, 245, 161, 0.30);
}
.arc-menu-item:disabled {
  color: var(--arc-fg-3);
  cursor: not-allowed;
  background: transparent;
}
.arc-menu-item-danger { color: var(--arc-danger); }
.arc-menu-item-danger:hover {
  background: color-mix(in srgb, var(--arc-danger) 12%, var(--arc-bg-1));
}

.arc-menu-divider {
  height: 1px;
  background: var(--arc-border-1);
  margin: 4px 2px;
  border: 0;
}

/* ===========================================================================
 * U2 wave 5 — Tier 3 form-input additions: ArcDatePicker + ArcAutocomplete.
 * Both popover-style; share the click-outside JS module with ArcMenu.
 * =========================================================================== */

/* ---- DatePicker — input button + calendar popover ---- */
.arc-datepicker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  min-width: 200px;
}
.arc-datepicker-input {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  padding: 9px 12px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  cursor: pointer;
  text-align: left;
  transition: border-color var(--arc-dur-fast) var(--arc-ease), box-shadow var(--arc-dur-fast) var(--arc-ease);
}
.arc-datepicker-input:hover { border-color: var(--arc-border-3); }
.arc-datepicker-input:focus-visible {
  outline: none;
  border-color: var(--arc-border-focus);
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.18);
}
.arc-datepicker-input[data-empty="true"] { color: var(--arc-fg-3); }
.arc-datepicker-input-icon {
  display: inline-flex;
  color: var(--arc-fg-3);
  margin-left: 8px;
}

.arc-datepicker-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--arc-z-dropdown);
  min-width: 280px;
  padding: 10px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}

.arc-datepicker-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
  padding: 0 4px;
}
.arc-datepicker-title {
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  font-weight: 600;
  color: var(--arc-fg-1);
  margin: 0;
}
.arc-datepicker-nav-btn {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 4px 8px;
  border-radius: var(--arc-radius-1);
  cursor: pointer;
}
.arc-datepicker-nav-btn:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-datepicker-nav-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}

.arc-datepicker-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}
.arc-datepicker-weekday {
  text-align: center;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  color: var(--arc-fg-3);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 6px 0 4px;
}
.arc-datepicker-day {
  background: transparent;
  border: 0;
  border-radius: var(--arc-radius-1);
  padding: 7px 0;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  color: var(--arc-fg-1);
  cursor: pointer;
  text-align: center;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-datepicker-day:hover { background: var(--arc-bg-2); }
.arc-datepicker-day:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(67, 245, 161, 0.30);
}
.arc-datepicker-day-other { color: var(--arc-fg-3); opacity: 0.5; }
.arc-datepicker-day-today {
  font-weight: 700;
  color: var(--arc-accent);
}
.arc-datepicker-day-selected {
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
  font-weight: 600;
}
.arc-datepicker-day-selected:hover {
  background: var(--arc-accent-hi);
  color: var(--arc-fg-on-accent);
}
.arc-datepicker-day-disabled {
  color: var(--arc-fg-3);
  opacity: 0.35;
  cursor: not-allowed;
  pointer-events: none;
}

/* ---- Autocomplete — typeahead input + filtered options ---- */
.arc-autocomplete {
  position: relative;
  display: flex;
  flex-direction: column;
}
.arc-autocomplete .arc-input { padding-right: 32px; }
.arc-autocomplete-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  position: absolute;
  top: 50%;
  right: 8px;
  transform: translateY(-50%);
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  padding: 4px;
  cursor: pointer;
  border-radius: var(--arc-radius-1);
}
.arc-autocomplete-clear:hover { color: var(--arc-fg-1); }

.arc-autocomplete-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  z-index: var(--arc-z-dropdown);
  max-height: 240px;
  overflow-y: auto;
  padding: 4px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  box-shadow: 0 12px 32px rgba(0, 0, 0, 0.40), 0 2px 6px rgba(0, 0, 0, 0.20);
  animation: arc-menu-in 140ms var(--arc-ease);
}
.arc-autocomplete-option {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 7px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--arc-radius-1);
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  color: var(--arc-fg-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-autocomplete-option:hover { background: var(--arc-bg-2); }
.arc-autocomplete-option-active {
  background: var(--arc-bg-2);
  box-shadow: inset 0 0 0 1px rgba(67, 245, 161, 0.30);
}
.arc-autocomplete-empty {
  padding: 10px 12px;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
}

/* ===========================================================================
 * U2 wave 6 — Command palette (cmd-k overlay).
 * Native <dialog> shell. Search input top, filtered command list below,
 * optional grouped headers, keyboard-shortcut hint per command.
 * =========================================================================== */

/* A closed dialog must stay hidden: the display:flex below (needed for the open layout)
   would otherwise override the UA's `dialog:not([open]) { display:none }` and leave a
   visible empty palette box parked in the page. */
dialog.arc-cmd-palette:not([open]) {
  display: none;
}
dialog.arc-cmd-palette {
  padding: 0;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  width: min(560px, 92vw);
  /* Inline showcases render the palette inside a card: never exceed the
     container (a top-layer modal is unaffected — its container is the viewport). */
  max-width: 100%;
  max-height: 70vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 64px rgba(0, 0, 0, 0.45), 0 4px 12px rgba(0, 0, 0, 0.20);
  margin-top: 12vh;
}
dialog.arc-cmd-palette::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
  -webkit-backdrop-filter: blur(2px);
}

.arc-cmd-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--arc-border-1);
  background: var(--arc-bg-1);
}
.arc-cmd-search-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--arc-fg-3);
  flex-shrink: 0;
}
.arc-cmd-search input {
  flex: 1;
  background: transparent;
  border: 0;
  font-family: var(--arc-font-sans);
  font-size: 14.5px;
  color: var(--arc-fg-1);
  outline: none;
  padding: 0;
}
.arc-cmd-search input::placeholder { color: var(--arc-fg-3); }
.arc-cmd-search-hint {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  color: var(--arc-fg-3);
  padding: 2px 6px;
  border: 1px solid var(--arc-border-2);
  border-radius: 3px;
  background: var(--arc-bg-2);
  flex-shrink: 0;
}

.arc-cmd-list {
  flex: 1;
  overflow-y: auto;
  padding: 6px;
}
.arc-cmd-group-header {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  color: var(--arc-fg-3);
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 10px 10px 4px;
  font-weight: 500;
}
.arc-cmd-item {
  display: flex;
  align-items: center;
  width: 100%;
  gap: 10px;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: var(--arc-radius-1);
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  color: var(--arc-fg-1);
  text-align: left;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-cmd-item:hover { background: var(--arc-bg-2); }
.arc-cmd-item-active {
  background: var(--arc-bg-2);
  box-shadow: inset 0 0 0 1px rgba(67, 245, 161, 0.30);
}
.arc-cmd-item-body { flex: 1; min-width: 0; }
.arc-cmd-item-label { color: var(--arc-fg-1); }
.arc-cmd-item-desc {
  font-size: 12px;
  color: var(--arc-fg-3);
  margin-top: 2px;
}
.arc-cmd-item-shortcut {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  color: var(--arc-fg-3);
  padding: 2px 6px;
  border: 1px solid var(--arc-border-2);
  border-radius: 3px;
  background: var(--arc-bg-2);
  flex-shrink: 0;
}

.arc-cmd-empty {
  padding: 24px 16px;
  text-align: center;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
}

/* ─── DG1 wave 1 — ArcDataGrid ────────────────────────────────────────────────
   Three responsive modes via wrapper class:
     .arc-datagrid-mode-table     — classic table, horizontal scroll on overflow
     .arc-datagrid-mode-cards     — always vertical card-stack
     .arc-datagrid-mode-adaptive  — table above breakpoint, cards below

   Card-stack uses pure CSS: render <td data-label="Header">, the @media block
   below rewrites display + injects the label via ::before { content: attr(...) }.
   No JS, no DOM duplication, no resize observer.
*/

.arc-datagrid {
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  width: 100%;
}

.arc-datagrid-scroll {
  width: 100%;
  overflow-x: auto;
}
/* overflow-x:auto forces overflow-y to auto too, so an anchored panel opened from a header
   HeaderTemplate (e.g. ArcAdvancedColumnFilter) clips when the grid body is short. While such
   a panel is open, give the container room to show it — reverts the moment it closes.
   ponytail: 360px covers every current filter variant; portal the panel if one ever outgrows it. */
.arc-datagrid-scroll:has(.arc-advanced-column-filter-panel, .arc-popover-panel) {
  min-height: 360px;
}

/* Aligned with the /components page's .component-api table — same subtle
   bg-1 header band, mono uppercase tracked header labels, border-2 strong
   separator below the header, hairline border-1 between body rows. */
.arc-datagrid-table {
  width: 100%;
  border-collapse: collapse;
  background: transparent;
  font-size: 13.5px;
  font-family: var(--arc-font-sans);
}

.arc-datagrid-table th {
  text-align: left;
  background: var(--arc-bg-1);
  color: var(--arc-fg-3);
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: var(--arc-density-cell-py) var(--arc-density-cell-px);
  border-bottom: 1px solid var(--arc-border-2);
  white-space: nowrap;
}

.arc-datagrid-th-sortable {
  cursor: pointer;
  user-select: none;
  transition: color var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-th-sortable:hover { color: var(--arc-fg-1); }

/* Header chrome slot (HeaderTemplate) — sits inline after the label/sort glyph. */
.arc-datagrid-header-extra {
  display: inline-flex;
  align-items: center;
  margin-left: 6px;
  vertical-align: middle;
}

.arc-datagrid-sort-indicator {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 6px;
  color: var(--arc-fg-3);
  opacity: 0.4;
  transition: opacity var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-th-sortable[data-sort="asc"] .arc-datagrid-sort-indicator,
.arc-datagrid-th-sortable[data-sort="desc"] .arc-datagrid-sort-indicator {
  opacity: 1;
  color: var(--arc-accent);
}

.arc-datagrid-table td {
  padding: var(--arc-density-cell-py) var(--arc-density-cell-px);
  color: var(--arc-fg-2);
  border-bottom: 1px solid var(--arc-border-1);
  vertical-align: top;
}

.arc-datagrid-row:last-child td { border-bottom: 0; }

.arc-datagrid-align-start  { text-align: left; }
.arc-datagrid-align-center { text-align: center; }
.arc-datagrid-align-end    { text-align: right; }

/* Stripes start at the SECOND row (nth-child(even)) so the first body row
   stays transparent — keeps the visual continuation from the header
   separator clean. Stripe tint is the same bg-1 as the header band; the
   header's border-2 separator makes the boundary unambiguous. */
.arc-datagrid-striped .arc-datagrid-row:nth-child(even) td { background: var(--arc-bg-1); }
.arc-datagrid-hover .arc-datagrid-row { transition: background var(--arc-dur-fast) var(--arc-ease); }
.arc-datagrid-hover .arc-datagrid-row:hover td { background: var(--arc-bg-2); }

.arc-datagrid-empty {
  padding: 32px 16px;
  text-align: center;
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  margin: 8px 0;
}

.arc-datagrid-pagination-wrap {
  display: flex;
  justify-content: center;
  padding: 16px 8px 4px;
}

/* ─── DG1 wave 2 — Filters + selection + sticky header ───────────────────── */

/* Sticky header — Table mode only. CardStack flattens the table, so sticky
   doesn't apply there. The bg is already solid bg-1 from the base .arc-datagrid-table
   rule above (matches the /components page API table). */
.arc-datagrid-sticky .arc-datagrid-table thead {
  position: sticky;
  top: 0;
  z-index: 2;
}

/* Grid-level search bar above the table. */
.arc-datagrid-search {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 4px 14px;
}
.arc-datagrid-search-input {
  flex: 1;
  padding: 8px 12px;
  font-size: 13.5px;
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  outline: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-search-input:focus {
  border-color: var(--arc-accent);
}
.arc-datagrid-search-input::placeholder { color: var(--arc-fg-3); }
.arc-datagrid-search-count {
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
  white-space: nowrap;
}

/* Per-column filter row — a second <tr> in <thead>. Background matches the
   header band (bg-1); border is the strong border-2 to keep the header
   block visually unified before the body's hairline rows. */
.arc-datagrid-filter-row th {
  padding: 6px 12px 10px;
  background: var(--arc-bg-1);
  border-bottom: 1px solid var(--arc-border-2);
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
}
.arc-datagrid-filter-input {
  width: 100%;
  padding: 5px 8px;
  font-size: 12.5px;
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: 3px;
  outline: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-filter-input:focus {
  border-color: var(--arc-accent);
}
.arc-datagrid-filter-input::placeholder { color: var(--arc-fg-3); opacity: 0.7; }

/* Leading selection column — checkbox / radio. */
/* Detail/hierarchy rows — chevron toggle column + full-width expansion row. */
.arc-datagrid-detail-col { width: 34px; text-align: center; }
.arc-datagrid-detail-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  cursor: pointer;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 4px;
}
.arc-datagrid-detail-toggle:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-datagrid-detail-row > td {
  background: var(--arc-bg-0);
  padding: 0;
}
.arc-datagrid-detail-content { padding: 12px 16px; }

.arc-datagrid-select-col {
  width: 40px;
  text-align: center;
}
.arc-datagrid-select-col input {
  margin: 0;
  cursor: pointer;
}
.arc-datagrid-row-selected td {
  background: rgba(67, 245, 161, 0.06);
}
.arc-datagrid-hover .arc-datagrid-row-selected:hover td {
  background: rgba(67, 245, 161, 0.10);
}

/* Hide the filter row in CardStack mode — filtering inputs there would be
   confusing (no header rendered). Same below the Adaptive breakpoint. */
.arc-datagrid-mode-cards .arc-datagrid-filter-row { display: none; }
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-filter-row { display: none; }
}

/* ─── Row grouping — collapsible group headers + aggregate footers ──────── */
.arc-datagrid-group-header > td {
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  font-weight: 600;
  padding: 8px 12px;
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-datagrid-group-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  cursor: pointer;
  line-height: 1;
  padding: 4px 7px;
  margin-right: 4px;
  border-radius: 4px;
}
.arc-datagrid-group-toggle:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-datagrid-group-count {
  color: var(--arc-fg-3);
  font-weight: 400;
  font-size: 12px;
  margin-left: 6px;
}
.arc-datagrid-group-footer > td {
  color: var(--arc-fg-1);
  font-weight: 600;
  font-variant-numeric: tabular-nums;
  border-bottom: 1px solid var(--arc-border-2);
}
/* Card mode: group headers become section bands; footer cells without an
   aggregate carry no data-label — hide them rather than rendering blank pairs. */
.arc-datagrid-mode-cards .arc-datagrid-group-header > td {
  border-radius: var(--arc-radius-1);
  margin: 4px 0 8px;
}
.arc-datagrid-mode-cards .arc-datagrid-group-footer td:not([data-label]) { display: none; }
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-group-header > td {
    border-radius: var(--arc-radius-1);
    margin: 4px 0 8px;
  }
  .arc-datagrid-mode-adaptive .arc-datagrid-group-footer td:not([data-label]) { display: none; }
}

/* ─── TreeList mode — chevron + indent in the first data column ──────────── */
.arc-datagrid-tree-indent { display: inline-block; height: 1px; vertical-align: middle; }
.arc-datagrid-tree-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  cursor: pointer;
  line-height: 1;
  padding: 2px 6px;
  margin-right: 4px;
  border-radius: 4px;
  vertical-align: middle;
}
.arc-datagrid-tree-toggle:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-datagrid-tree-toggle-spacer { display: inline-block; width: 24px; }
/* Card mode flattens the hierarchy visually — keep the toggle (it still
   expands/collapses the child cards) but drop the indentation. */
.arc-datagrid-mode-cards .arc-datagrid-tree-indent,
.arc-datagrid-mode-cards .arc-datagrid-tree-toggle-spacer { display: none; }
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-tree-indent,
  .arc-datagrid-mode-adaptive .arc-datagrid-tree-toggle-spacer { display: none; }
}

/* ─── Frozen / locked columns ─────────────────────────────────────────────
   Locked cells stick against the .arc-datagrid-scroll container; inline
   left/right offsets come from the grid (cumulative declared px widths).
   The base table is transparent, so every state needs an explicit OPAQUE
   background here — translucent tints composite over bg-0 via gradient
   layering, otherwise scrolled content ghosts through the frozen cells. */
.arc-datagrid-col-locked-start,
.arc-datagrid-col-locked-end {
  position: sticky;
  z-index: 1;
  background: var(--arc-bg-0);
}
.arc-datagrid-table th.arc-datagrid-col-locked-start,
.arc-datagrid-table th.arc-datagrid-col-locked-end {
  /* Re-declare sticky at th specificity — the column-resize feature's
     `.arc-datagrid-table th { position: relative }` would win otherwise. */
  position: sticky;
  z-index: 3; /* over scrolling header cells; the sticky thead itself is z-2 */
  background: var(--arc-bg-1);
}
/* Divider where the frozen region meets scrolling content. */
.arc-datagrid-table .arc-datagrid-col-locked-start-edge { border-right: 1px solid var(--arc-border-2); }
.arc-datagrid-table .arc-datagrid-col-locked-end-edge { border-left: 1px solid var(--arc-border-2); }

/* State backgrounds — same selectors as the row rules above plus the lock
   class, so locked cells keep the exact striped/hover/selected hierarchy. */
.arc-datagrid-striped .arc-datagrid-row:nth-child(even) td.arc-datagrid-col-locked-start,
.arc-datagrid-striped .arc-datagrid-row:nth-child(even) td.arc-datagrid-col-locked-end {
  background: var(--arc-bg-1);
}
.arc-datagrid-hover .arc-datagrid-row:hover td.arc-datagrid-col-locked-start,
.arc-datagrid-hover .arc-datagrid-row:hover td.arc-datagrid-col-locked-end {
  background: var(--arc-bg-2);
}
.arc-datagrid-row-selected td.arc-datagrid-col-locked-start,
.arc-datagrid-row-selected td.arc-datagrid-col-locked-end {
  background: linear-gradient(rgba(67, 245, 161, 0.06), rgba(67, 245, 161, 0.06)), var(--arc-bg-0);
}
.arc-datagrid-hover .arc-datagrid-row-selected:hover td.arc-datagrid-col-locked-start,
.arc-datagrid-hover .arc-datagrid-row-selected:hover td.arc-datagrid-col-locked-end {
  background: linear-gradient(rgba(67, 245, 161, 0.10), rgba(67, 245, 161, 0.10)), var(--arc-bg-0);
}

/* Locks are meaningless once rows flatten to cards — neutralize fully. */
.arc-datagrid-mode-cards .arc-datagrid-table .arc-datagrid-col-locked-start,
.arc-datagrid-mode-cards .arc-datagrid-table .arc-datagrid-col-locked-end {
  position: static;
  background: transparent;
  border-right: 0;
  border-left: 0;
}
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-table .arc-datagrid-col-locked-start,
  .arc-datagrid-mode-adaptive .arc-datagrid-table .arc-datagrid-col-locked-end {
    position: static;
    background: transparent;
    border-right: 0;
    border-left: 0;
  }
}

/* ─── DG1 wave 3 — Virtualize + column visibility + CSV export ──────────── */

/* Toolbar above the table — holds the column-toggle ArcMenu trigger. The
   search bar lives in its own .arc-datagrid-search row above this when both
   are enabled. */
.arc-datagrid-toolbar {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 4px 4px 10px;
}

/* Column-visibility menu items — checkbox inline-aligned with the header label. */
.arc-datagrid-col-toggle-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  width: 100%;
}
.arc-datagrid-col-toggle-item input[type="checkbox"] {
  margin: 0;
  pointer-events: none; /* the ArcMenuItem already handles the click */
}

/* Virtualize-mode container. Consumers usually wrap the grid in their own
   fixed-height div; this class is a sensible default with min-height + a
   scroll fallback. */
.arc-datagrid-virtualize {
  /* The Virtualize component requires a scroll container with a fixed height.
     Consumers can override via style="height:N" on the wrapper. Default 400px. */
  height: 400px;
  overflow-y: auto;
}

/* Style the spacer that Microsoft.AspNetCore.Components.Web.Virtualization
   emits before/after the rendered items. The spacers are <div> elements
   inside <tbody>, which is technically invalid HTML but browsers tolerate
   it; we keep them transparent so they don't add visual noise. */
.arc-datagrid-table .arc-datagrid-virt-placeholder {
  display: block;
}

/* ─── CardStack — always render rows as cards ────────────────────────────── */
.arc-datagrid-mode-cards .arc-datagrid-table,
.arc-datagrid-mode-cards .arc-datagrid-table tbody,
.arc-datagrid-mode-cards .arc-datagrid-table tr {
  display: block;
}
.arc-datagrid-mode-cards .arc-datagrid-table thead { display: none; }
.arc-datagrid-mode-cards .arc-datagrid-row {
  display: block;
  padding: 12px 14px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  margin-bottom: 10px;
  background: var(--arc-bg-1);
}
.arc-datagrid-mode-cards .arc-datagrid-row:last-child { margin-bottom: 0; }
.arc-datagrid-mode-cards .arc-datagrid-table td {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 16px;
  padding: 6px 0;
  border: 0;
  text-align: left;
}
.arc-datagrid-mode-cards .arc-datagrid-table td:last-child { padding-bottom: 0; }
.arc-datagrid-mode-cards .arc-datagrid-table td::before {
  content: attr(data-label);
  font-family: var(--arc-font-mono);
  font-weight: 500;
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  flex-shrink: 0;
  min-width: 90px;
}
.arc-datagrid-mode-cards td[data-hide-mobile="true"] { display: none; }
.arc-datagrid-mode-cards .arc-datagrid-striped .arc-datagrid-row:nth-child(odd) {
  background: var(--arc-bg-2);
}
.arc-datagrid-mode-cards .arc-datagrid-striped .arc-datagrid-row:nth-child(odd) td { background: transparent; }

/* ─── Adaptive — flip to cards below breakpoint ──────────────────────────── */
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-table,
  .arc-datagrid-mode-adaptive .arc-datagrid-table tbody,
  .arc-datagrid-mode-adaptive .arc-datagrid-table tr {
    display: block;
  }
  .arc-datagrid-mode-adaptive .arc-datagrid-table thead { display: none; }
  .arc-datagrid-mode-adaptive .arc-datagrid-row {
    display: block;
    padding: 12px 14px;
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-1);
    margin-bottom: 10px;
    background: var(--arc-bg-1);
  }
  .arc-datagrid-mode-adaptive .arc-datagrid-table td {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 16px;
    padding: 6px 0;
    border: 0;
    text-align: left;
  }
  .arc-datagrid-mode-adaptive .arc-datagrid-table td::before {
    content: attr(data-label);
    font-family: var(--arc-font-mono);
    font-weight: 500;
    font-size: 10.5px;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--arc-fg-3);
    flex-shrink: 0;
    min-width: 90px;
  }
  .arc-datagrid-mode-adaptive td[data-hide-mobile="true"] { display: none; }
  .arc-datagrid-mode-adaptive .arc-datagrid-striped .arc-datagrid-row:nth-child(odd) {
    background: var(--arc-bg-2);
  }
  .arc-datagrid-mode-adaptive .arc-datagrid-striped .arc-datagrid-row:nth-child(odd) td { background: transparent; }
}

/* ─── U3 wave 1 — Universal polish (StatusDot, Collapsible, EmptyState, ConfirmDialog, KeyDisplay) ─── */

/* ArcStatusDot — small colored circle + optional inline label. */
.arc-status-dot {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 13px;
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-2);
  vertical-align: middle;
}
.arc-status-dot-glyph {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arc-status-dot-color, var(--arc-accent));
  flex-shrink: 0;
}
.arc-status-dot-sm .arc-status-dot-glyph { width: 6px; height: 6px; }
.arc-status-dot-lg .arc-status-dot-glyph { width: 12px; height: 12px; }
.arc-status-dot-online   { --arc-status-dot-color: var(--arc-accent); }
.arc-status-dot-offline  { --arc-status-dot-color: var(--arc-fg-3); }
.arc-status-dot-busy     { --arc-status-dot-color: var(--arc-warn); }
.arc-status-dot-error    { --arc-status-dot-color: var(--arc-danger); }
.arc-status-dot-info     { --arc-status-dot-color: var(--arc-info); }
.arc-status-dot-pulse .arc-status-dot-glyph {
  animation: arc-status-dot-pulse-anim 1.6s ease-in-out infinite;
}
@keyframes arc-status-dot-pulse-anim {
  0%, 100% { box-shadow: 0 0 0 0 var(--arc-status-dot-color, var(--arc-accent)); opacity: 1; }
  50%      { box-shadow: 0 0 0 5px transparent; opacity: 0.7; }
}
.arc-status-dot-label {
  color: var(--arc-fg-2);
  line-height: 1;
}

/* ArcCollapsible — styled <details>/<summary>. */
.arc-collapsible {
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  overflow: hidden;
}
.arc-collapsible + .arc-collapsible { margin-top: 8px; }
.arc-collapsible-trigger {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 14px;
  cursor: pointer;
  list-style: none;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  color: var(--arc-fg-1);
  user-select: none;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-collapsible-trigger::-webkit-details-marker { display: none; }
.arc-collapsible-trigger:hover { background: var(--arc-bg-2); }
.arc-collapsible-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--arc-fg-3);
  transition: transform var(--arc-dur-base) var(--arc-ease);
  width: 12px;
}
.arc-collapsible-open .arc-collapsible-chevron { transform: rotate(90deg); }
.arc-collapsible-title { flex: 1; display: inline-flex; align-items: center; gap: 8px; }
.arc-collapsible-content {
  padding: 4px 14px 14px;
  border-top: 1px solid var(--arc-border-1);
  font-size: 14px;
  color: var(--arc-fg-2);
}

/* ArcEmptyState — centered no-data block. */
.arc-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 48px 24px;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  background: transparent;
  color: var(--arc-fg-2);
}
.arc-empty-state-icon {
  font-size: 36px;
  line-height: 1;
  margin-bottom: 12px;
  opacity: 0.6;
}
.arc-empty-state-title {
  margin: 0 0 6px;
  font-size: 18px;
  font-weight: 500;
  color: var(--arc-fg-1);
}
.arc-empty-state-subtitle {
  margin: 0;
  font-size: 14px;
  color: var(--arc-fg-3);
  max-width: 420px;
  line-height: 1.5;
}
.arc-empty-state-actions {
  display: flex;
  gap: 8px;
  margin-top: 16px;
  flex-wrap: wrap;
  justify-content: center;
}
.arc-empty-state-body {
  margin-top: 12px;
  font-size: 13px;
  color: var(--arc-fg-3);
}
.arc-empty-state-compact {
  padding: 24px 16px;
}
.arc-empty-state-compact .arc-empty-state-icon { font-size: 24px; margin-bottom: 8px; }
.arc-empty-state-compact .arc-empty-state-title { font-size: 15px; }
.arc-empty-state-compact .arc-empty-state-subtitle { font-size: 12.5px; }

/* ArcConfirmDialog — uses ArcDialog under the hood; this is just the message + footer button row. */
.arc-confirm-dialog-message {
  margin: 0;
  color: var(--arc-fg-2);
  font-size: 14px;
  line-height: 1.55;
}

/* ArcKeyDisplay — boxed mono value + copy / show toggle. */
.arc-key-display {
  display: flex;
  flex-direction: column;
  gap: 6px;
}
.arc-key-display-label {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--arc-fg-3);
}
.arc-key-display-box {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 12px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
}
.arc-key-display-value {
  flex: 1;
  font-family: var(--arc-font-mono);
  font-size: 13px;
  color: var(--arc-fg-1);
  word-break: break-all;
  user-select: all;
  background: transparent;
}
.arc-key-display-actions {
  display: flex;
  gap: 4px;
  flex-shrink: 0;
}
.arc-key-display-copy,
.arc-key-display-toggle {
  padding: 4px 10px;
  font-family: var(--arc-font-sans);
  font-size: 12px;
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: 4px;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-key-display-copy:hover,
.arc-key-display-toggle:hover {
  background: var(--arc-bg-0);
  color: var(--arc-fg-1);
}

/* ─── U3 wave 2 — Studio polish (TreeView, JsonViewer, Timeline, DiffViewer) ─── */

/* ArcTreeView — generic hierarchical tree. */
.arc-tree-view {
  font-family: var(--arc-font-mono);
  font-size: 13px;
  color: var(--arc-fg-2);
}
.arc-tree-view-node { display: block; }
.arc-tree-view-row {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 100%;
  padding: 3px calc(8px + var(--arc-tree-depth, 0) * 18px);
  background: transparent;
  border: 0;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  border-radius: 3px;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-tree-view-row:hover { background: var(--arc-bg-1); color: var(--arc-fg-1); }
.arc-tree-view-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: var(--arc-fg-3);
  flex-shrink: 0;
}
.arc-tree-view-icon { flex-shrink: 0; }
.arc-tree-view-label { color: var(--arc-fg-2); }
.arc-tree-view-row:hover .arc-tree-view-label { color: var(--arc-fg-1); }
.arc-tree-view-children { display: block; }

/* ArcJsonViewer — collapsible JSON tree with type-aware colors. */
.arc-json-viewer {
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  color: var(--arc-fg-2);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  padding: 10px 12px;
  overflow-x: auto;
}
.arc-json-node { display: block; }
.arc-json-row {
  display: flex;
  align-items: baseline;
  gap: 6px;
  background: transparent;
  border: 0;
  padding: 1px 0;
  text-align: left;
  font-family: inherit;
  font-size: inherit;
  color: inherit;
  cursor: pointer;
  width: 100%;
}
.arc-json-row-leaf { cursor: default; }
.arc-json-row:hover:not(.arc-json-row-leaf) { color: var(--arc-fg-1); }
.arc-json-chevron {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 12px;
  color: var(--arc-fg-3);
  flex-shrink: 0;
}
.arc-json-key { color: var(--arc-fg-1); }
.arc-json-summary { color: var(--arc-fg-3); }
.arc-json-children { padding-left: 18px; border-left: 1px solid var(--arc-border-1); margin-left: 5px; }
.arc-json-string { color: var(--arc-accent); }
.arc-json-number { color: var(--arc-info); }
.arc-json-bool   { color: #c084fc; }                /* purple */
.arc-json-null   { color: var(--arc-fg-3); font-style: italic; }
.arc-json-other  { color: var(--arc-fg-2); }
.arc-json-error  {
  color: var(--arc-danger);
  background: rgba(207, 34, 46, 0.08);
  padding: 8px 10px;
  border-radius: 3px;
  margin: 0 0 8px;
  font-size: 12px;
}
.arc-json-raw {
  color: var(--arc-fg-3);
  margin: 0;
  font-size: 12px;
}

/* ArcTimeline — vertical event log. */
.arc-timeline { display: flex; flex-direction: column; }
.arc-timeline-entry {
  display: flex;
  gap: 12px;
  padding: 12px 0;
  position: relative;
}
.arc-timeline-entry:not(:last-child) .arc-timeline-rail::after {
  content: "";
  position: absolute;
  top: 22px;
  bottom: -12px;
  left: 5px;
  width: 1px;
  background: var(--arc-border-2);
}
.arc-timeline-rail {
  position: relative;
  width: 12px;
  flex-shrink: 0;
  padding-top: 4px;
}
.arc-timeline-dot {
  display: block;
  width: 11px;
  height: 11px;
  border-radius: 50%;
  background: var(--arc-accent);
  position: relative;
  z-index: 1;
  border: 2px solid var(--arc-bg-0);
}
.arc-timeline-dot-online   { background: var(--arc-accent); }
.arc-timeline-dot-offline  { background: var(--arc-fg-3); }
.arc-timeline-dot-busy     { background: var(--arc-warn); }
.arc-timeline-dot-error    { background: var(--arc-danger); }
.arc-timeline-dot-info     { background: var(--arc-info); }
.arc-timeline-body {
  flex: 1;
  font-size: 14px;
  color: var(--arc-fg-2);
  line-height: 1.5;
  padding-top: 0;
}
.arc-timeline-compact .arc-timeline-entry { padding: 6px 0; }
.arc-timeline-compact .arc-timeline-body { font-size: 13px; }

/* ArcDiffViewer — line-level before/after with colored markers. */
.arc-diff-viewer {
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  overflow: hidden;
}
.arc-diff-pane {
  margin: 0;
  padding: 10px 12px;
  background: var(--arc-bg-1);
  color: var(--arc-fg-2);
  overflow-x: auto;
  white-space: pre;
}
.arc-diff-pane code { font-family: inherit; }
.arc-diff-line { display: block; padding: 0 4px; }
.arc-diff-line-context { color: var(--arc-fg-2); }
.arc-diff-line-add {
  background: rgba(67, 245, 161, 0.10);
  color: #6ee7b7;
}
.arc-diff-line-remove {
  background: rgba(207, 34, 46, 0.10);
  color: #fca5a5;
}
.arc-diff-line-empty { background: transparent; color: var(--arc-fg-3); }
/* Mode-marker classes on the wrapper — consumers can target them to override per-layout. */
.arc-diff-mode-unified .arc-diff-pane { padding: 10px 12px; }
.arc-diff-mode-split   .arc-diff-pane { padding: 10px 12px; }
.arc-diff-split { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.arc-diff-split .arc-diff-pane-before { border-right: 1px solid var(--arc-border-2); }
@media (max-width: 720px) {
  .arc-diff-split { grid-template-columns: 1fr; }
  .arc-diff-split .arc-diff-pane-before { border-right: 0; border-bottom: 1px solid var(--arc-border-2); }
}

/* ─── U3 wave 3 — Forms maturity (Stepper, TagInput, FileUpload, OtpInput) ─── */

/* ArcStepper — horizontal numbered steps. */
.arc-stepper {
  display: flex;
  align-items: center;
  gap: 0;
  flex-wrap: nowrap;
  font-family: var(--arc-font-sans);
  overflow-x: auto;
}
.arc-stepper-step {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 8px 4px;
  cursor: default;
  flex-shrink: 0;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--arc-fg-3);
}
.arc-stepper-step:not([disabled]) { cursor: pointer; }
.arc-stepper-circle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  font-size: 12px;
  font-weight: 500;
  color: var(--arc-fg-3);
  flex-shrink: 0;
  transition: all var(--arc-dur-fast) var(--arc-ease);
}
.arc-stepper-label { color: var(--arc-fg-3); white-space: nowrap; }
.arc-stepper-step-current .arc-stepper-circle {
  background: var(--arc-accent);
  border-color: var(--arc-accent);
  color: var(--arc-fg-on-accent);
}
.arc-stepper-step-current .arc-stepper-label { color: var(--arc-fg-1); font-weight: 500; }
.arc-stepper-step-complete .arc-stepper-circle {
  background: var(--arc-accent-lo);
  border-color: var(--arc-accent);
  color: var(--arc-accent);
}
.arc-stepper-step-complete .arc-stepper-label { color: var(--arc-fg-2); }
.arc-stepper-connector {
  flex: 1 1 16px;
  min-width: 16px;
  height: 1px;
  background: var(--arc-border-2);
  margin: 0 4px;
}
.arc-stepper-connector-complete { background: var(--arc-accent); }

/* ArcTagInput — chips inside an input-style wrapper. */
.arc-tag-input {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 6px 8px;
  min-height: 40px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  font-family: var(--arc-font-sans);
  cursor: text;
  transition: border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-tag-input:focus-within { border-color: var(--arc-accent); }
.arc-tag-input-disabled { opacity: 0.6; cursor: not-allowed; }
.arc-tag-input-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 4px 2px 10px;
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  border-radius: var(--arc-radius-pill);
  font-size: 12.5px;
  border: 1px solid var(--arc-border-2);
}
.arc-tag-input-chip-remove {
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  width: 20px;
  height: 20px;
  border-radius: 50%;
  cursor: pointer;
  line-height: 1;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arc-tag-input-chip-remove:hover { background: var(--arc-bg-0); color: var(--arc-fg-1); }
.arc-tag-input-field {
  flex: 1;
  min-width: 80px;
  background: transparent;
  border: 0;
  outline: none;
  font-family: inherit;
  font-size: 13.5px;
  color: var(--arc-fg-1);
  padding: 4px;
}
.arc-tag-input-field::placeholder { color: var(--arc-fg-3); }

/* ArcFileUpload — drag-drop zone + selected-files list. */
.arc-file-upload { display: flex; flex-direction: column; gap: 10px; }
.arc-file-upload-disabled { opacity: 0.6; pointer-events: none; }
.arc-file-upload-zone {
  display: block;
  padding: 28px 20px;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  background: var(--arc-bg-1);
  text-align: center;
  cursor: pointer;
  font-family: var(--arc-font-sans);
  transition: border-color var(--arc-dur-fast) var(--arc-ease), background var(--arc-dur-fast) var(--arc-ease);
  position: relative;
}
.arc-file-upload-zone:hover {
  border-color: var(--arc-accent);
  background: var(--arc-bg-2);
}
.arc-file-upload-input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
.arc-file-upload-icon { display: flex; justify-content: center; font-size: 28px; margin-bottom: 8px; opacity: 0.7; }
.arc-file-upload-title { font-size: 14px; color: var(--arc-fg-1); }
.arc-file-upload-hint { font-size: 12px; color: var(--arc-fg-3); margin-top: 4px; }
.arc-file-upload-list { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.arc-file-upload-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 8px 12px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  font-size: 13px;
  font-family: var(--arc-font-mono);
}
.arc-file-upload-item-name { color: var(--arc-fg-1); }
.arc-file-upload-item-size { color: var(--arc-fg-3); font-size: 11.5px; }
.arc-file-upload-error {
  padding: 8px 12px;
  background: rgba(207, 34, 46, 0.08);
  color: var(--arc-danger);
  border-radius: var(--arc-radius-1);
  font-size: 13px;
}

/* ArcOtpInput — N boxes side-by-side. */
.arc-otp-input {
  display: inline-flex;
  gap: 8px;
  font-family: var(--arc-font-mono);
  /* Six boxes + gaps exceed very narrow containers: cap and let boxes shrink. */
  max-width: 100%;
}
.arc-otp-input-box {
  width: 40px;
  min-width: 0;
  flex: 0 1 40px;
  height: 48px;
  text-align: center;
  font-size: 20px;
  font-family: var(--arc-font-mono);
  color: var(--arc-fg-1);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  outline: none;
  transition: border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-otp-input-box:focus {
  border-color: var(--arc-accent);
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.15);
}
.arc-otp-input-box:disabled {
  opacity: 0.6;
  background: var(--arc-bg-2);
  cursor: not-allowed;
}

/* ─── U3 wave 4 — Multiplayer + Telemetry (PresenceStack, LiveCursor, MetricCard, Sparkline) ─── */

/* ArcPresenceStack — overlapping avatar cluster. */
.arc-presence-stack { display: inline-flex; align-items: center; }
.arc-presence-stack-slot {
  display: inline-flex;
  margin-left: -8px;
  border-radius: 50%;
  outline: 2px solid var(--arc-bg-0);
}
.arc-presence-stack-slot:first-child { margin-left: 0; }
.arc-presence-stack-slot[style*="--arc-presence-ring"] {
  outline-color: var(--arc-presence-ring);
}
.arc-presence-stack-overflow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  margin-left: -8px;
  outline: 2px solid var(--arc-bg-0);
  cursor: default;
}

/* ArcLiveCursor — positioned SVG pointer + label. */
.arc-live-cursor {
  display: inline-flex;
  align-items: flex-start;
  user-select: none;
  pointer-events: none;
}
.arc-live-cursor svg {
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.35));
  flex-shrink: 0;
}
.arc-live-cursor-label {
  margin-top: 14px;
  margin-left: 4px;
  padding: 2px 6px;
  font-family: var(--arc-font-sans);
  font-size: 11px;
  color: #0a0c10;
  border-radius: 3px;
  white-space: nowrap;
  font-weight: 500;
  letter-spacing: 0.02em;
}

/* ArcMetricCard — big-number stat block. */
.arc-metric-card {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 16px 18px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  font-family: var(--arc-font-sans);
}
.arc-metric-card-header {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  font-weight: 500;
}
.arc-metric-card-icon { font-size: 14px; opacity: 0.8; }
.arc-metric-card-label { line-height: 1; }
.arc-metric-card-value {
  font-size: 28px;
  font-weight: 600;
  color: var(--arc-fg-1);
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
/* Color-coded value tones (opt-in via ArcMetricCard.ValueTone) — mirror the delta chip palette. */
.arc-metric-card-value-positive { color: var(--arc-accent); }
.arc-metric-card-value-negative { color: #f87171; }
.arc-metric-card-value-warning { color: var(--arc-warn); }
.arc-metric-card-value-info { color: var(--arc-info); }
.arc-metric-card-footer {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 4px;
  min-height: 18px;
}
.arc-metric-card-delta {
  font-size: 12.5px;
  font-family: var(--arc-font-mono);
  color: var(--arc-fg-3);
  background: var(--arc-bg-2);
  padding: 1px 6px;
  border-radius: 3px;
}
.arc-metric-card-delta-positive {
  color: var(--arc-accent);
  background: color-mix(in srgb, var(--arc-accent) 14%, transparent);
}
.arc-metric-card-delta-negative {
  color: #f87171;
  background: rgba(207, 34, 46, 0.12);
}

/* Text style: same tone colour, no pill. Comes after the tone rules so it wins on
   background / padding while inheriting whichever tone colour was applied. */
.arc-metric-card-delta-text {
  background: none;
  padding: 0;
  border-radius: 0;
  font-size: 12px;
}
.arc-metric-card-trend {
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* ArcSparkline — inline SVG trendline. */
.arc-sparkline { display: inline-block; vertical-align: middle; }
.arc-sparkline-line {
  fill: none;
  stroke-width: 1.5;
  stroke-linejoin: round;
  stroke-linecap: round;
  vector-effect: non-scaling-stroke;
}
.arc-sparkline-fill {
  fill: currentColor;
  opacity: 0.15;
}
.arc-sparkline { color: var(--arc-accent); }

/* ─── U4 wave 1 — Slider, Drawer, CodeBlock, LogViewer, KeyValueGrid ─── */

/* ArcSlider — styled native <input type="range">. */
.arc-slider { display: flex; flex-direction: column; gap: 6px; font-family: var(--arc-font-sans); }
.arc-slider-label {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--arc-fg-3);
}
.arc-slider-track-row { display: flex; align-items: center; gap: 10px; }
.arc-slider-input {
  flex: 1;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  height: 24px;
  cursor: pointer;
}
.arc-slider-input::-webkit-slider-runnable-track {
  height: 4px;
  background: var(--arc-bg-2);
  border-radius: 2px;
}
.arc-slider-input::-moz-range-track {
  height: 4px;
  background: var(--arc-bg-2);
  border-radius: 2px;
}
.arc-slider-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  background: var(--arc-accent);
  border: 2px solid var(--arc-bg-0);
  border-radius: 50%;
  margin-top: -6px;
  cursor: grab;
  transition: transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-slider-input::-moz-range-thumb {
  width: 16px;
  height: 16px;
  background: var(--arc-accent);
  border: 2px solid var(--arc-bg-0);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-slider-input:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.arc-slider-input:active::-moz-range-thumb { transform: scale(1.15); cursor: grabbing; }
.arc-slider-input:focus { outline: none; }
.arc-slider-input:focus-visible::-webkit-slider-thumb {
  box-shadow: 0 0 0 4px rgba(67, 245, 161, 0.18);
}
.arc-slider-input:focus-visible::-moz-range-thumb {
  box-shadow: 0 0 0 4px rgba(67, 245, 161, 0.18);
}
.arc-slider-value {
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
  padding: 2px 8px;
  border-radius: 3px;
  min-width: 40px;
  text-align: center;
  font-variant-numeric: tabular-nums;
}
.arc-slider-bounds {
  display: flex;
  justify-content: space-between;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-fg-3);
}
.arc-slider-disabled .arc-slider-input { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }

/* ArcDrawer — slide-in panel anchored to a viewport edge. */
dialog.arc-drawer {
  position: fixed;
  margin: 0;
  border: 0;
  padding: 0;
  max-width: 100vw;
  max-height: 100vh;
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
}
dialog.arc-drawer::backdrop {
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
/* --arc-drawer-size is set inline from ArcDrawer.Width (Left/Right) / Height (Top/Bottom). */
.arc-drawer-left   { left: 0; top: 0; bottom: 0; height: 100vh; width: min(var(--arc-drawer-size, 360px), 100vw); border-right: 1px solid var(--arc-border-2); }
.arc-drawer-right  { right: 0; top: 0; bottom: 0; height: 100vh; width: min(var(--arc-drawer-size, 360px), 100vw); border-left: 1px solid var(--arc-border-2); }
.arc-drawer-top    { left: 0; right: 0; top: 0; width: 100vw; height: min(var(--arc-drawer-size, 360px), 80vh); border-bottom: 1px solid var(--arc-border-2); }
.arc-drawer-bottom { left: 0; right: 0; bottom: 0; width: 100vw; height: min(var(--arc-drawer-size, 360px), 80vh); border-top: 1px solid var(--arc-border-2); }
/* Modal="false": opened with show(), so it isn't in the top layer and needs its own stacking. */
dialog.arc-drawer-nonmodal { z-index: var(--arc-z-drawer); box-shadow: var(--arc-shadow-3); }
.arc-drawer-inner {
  display: flex;
  flex-direction: column;
  height: 100%;
  max-height: 100%;
}
.arc-drawer-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
}
.arc-drawer-title {
  flex: 1;
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--arc-fg-1);
  letter-spacing: -0.01em;
}
.arc-drawer-close {
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  width: 28px;
  height: 28px;
  border-radius: 4px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arc-drawer-close:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.arc-drawer-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
}
.arc-drawer-footer {
  padding: 12px 18px;
  border-top: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}

/* ArcCodeBlock — styled pre/code with optional header + copy. */
.arc-code-block {
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  overflow: hidden;
  font-family: var(--arc-font-mono);
}
.arc-code-block-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 6px 12px;
  background: var(--arc-bg-2);
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-code-block-language {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--arc-fg-3);
}
.arc-code-block-copy {
  background: transparent;
  border: 1px solid var(--arc-border-2);
  color: var(--arc-fg-2);
  font-family: var(--arc-font-sans);
  font-size: 11.5px;
  padding: 2px 8px;
  border-radius: 3px;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-code-block-copy:hover { background: var(--arc-bg-0); color: var(--arc-fg-1); }
.arc-code-block-pre {
  margin: 0;
  padding: 12px 14px;
  background: var(--arc-bg-1);
  overflow-x: auto;
  color: var(--arc-fg-2);
}
.arc-code-block-code {
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
  color: inherit;
  background: transparent;
}

/* ArcLogViewer — terminal-style log block. */
.arc-log-viewer {
  display: flex;
  flex-direction: column;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  overflow: hidden;
  font-family: var(--arc-font-mono);
}
.arc-log-viewer-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 8px 12px;
  background: var(--arc-bg-2);
  border-bottom: 1px solid var(--arc-border-2);
  flex-wrap: wrap;
}
.arc-log-viewer-filter {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  align-items: center;
}
.arc-log-viewer-filter-toggle {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  cursor: pointer;
  user-select: none;
}
.arc-log-viewer-filter-toggle input { cursor: pointer; }
.arc-log-viewer-toolbar-actions { display: flex; gap: 8px; }
.arc-log-viewer-body {
  flex: 1;
  overflow-y: auto;
  padding: 6px 0;
  max-height: 400px;
  font-size: 12px;
  line-height: 1.55;
  color: var(--arc-fg-2);
}
.arc-log-viewer-entry {
  display: grid;
  grid-template-columns: auto auto 1fr;
  gap: 10px;
  padding: 2px 14px;
  align-items: baseline;
  white-space: pre-wrap;
  word-break: break-word;
}
.arc-log-viewer-entry:hover { background: var(--arc-bg-2); }
.arc-log-viewer-time {
  color: var(--arc-fg-3);
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
}
.arc-log-viewer-level {
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  padding: 0 4px;
  border-radius: 2px;
  flex-shrink: 0;
}
.arc-log-viewer-level-debug { color: var(--arc-fg-3); background: rgba(120, 120, 130, 0.15); }
.arc-log-viewer-level-info  { color: var(--arc-info); background: rgba(96, 165, 250, 0.15); }
.arc-log-viewer-level-warn  { color: var(--arc-warn); background: rgba(251, 191, 36, 0.15); }
.arc-log-viewer-level-error { color: var(--arc-danger); background: rgba(207, 34, 46, 0.15); }
.arc-log-viewer-message { color: var(--arc-fg-2); }
.arc-log-viewer-entry-error .arc-log-viewer-message { color: #fca5a5; }
.arc-log-viewer-empty {
  padding: 24px 14px;
  text-align: center;
  color: var(--arc-fg-3);
  font-style: italic;
  font-family: var(--arc-font-sans);
  font-size: 13px;
}

/* ArcKeyValueGrid — record-detail key/value display. */
.arc-key-value-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin: 0;
  font-family: var(--arc-font-sans);
}
.arc-key-value-grid-row {
  display: grid;
  grid-template-columns: minmax(120px, 30%) 1fr;
  gap: 16px;
  padding: 8px 0;
}
.arc-key-value-grid-key {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  font-weight: 500;
  color: var(--arc-fg-3);
  padding-top: 1px;
}
.arc-key-value-grid-value {
  margin: 0;
  color: var(--arc-fg-1);
  font-size: 14px;
  word-break: break-word;
}
.arc-key-value-grid-bordered .arc-key-value-grid-row {
  border-bottom: 1px solid var(--arc-border-1);
}
.arc-key-value-grid-bordered .arc-key-value-grid-row:last-child { border-bottom: 0; }
.arc-key-value-grid-compact .arc-key-value-grid-row { padding: 4px 0; }
.arc-key-value-grid-compact .arc-key-value-grid-value { font-size: 13px; }
@media (max-width: 560px) {
  .arc-key-value-grid-row { grid-template-columns: 1fr; gap: 2px; }
}

/* ─── U4 wave 2 — SegmentedControl, ButtonGroup, Rating, Splitter, Gauge ─── */

/* ArcSegmentedControl — pill-style toggle group. */
.arc-segmented-control {
  display: inline-flex;
  align-items: stretch;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  padding: 3px;
  gap: 0;
  font-family: var(--arc-font-sans);
}
.arc-segmented-control-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  background: transparent;
  border: 0;
  color: var(--arc-fg-2);
  font-family: inherit;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  border-radius: var(--arc-radius-pill);
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
  white-space: nowrap;
}
.arc-segmented-control-item:hover:not(.arc-segmented-control-item-active) {
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
}
.arc-segmented-control-item-active {
  background: var(--arc-bg-0);
  color: var(--arc-fg-1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.arc-segmented-control-icon { font-size: 14px; line-height: 1; }
.arc-segmented-control-label { line-height: 1; }
.arc-segmented-control-disabled {
  opacity: 0.5;
  pointer-events: none;
}
.arc-segmented-control-item:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
/* Per-segment tone (ToneSelector) — the text takes the tone colour, muted until pressed. */
.arc-segmented-control-item-accent  { color: color-mix(in srgb, var(--arc-accent) 70%, var(--arc-fg-2)); }
.arc-segmented-control-item-info    { color: color-mix(in srgb, var(--arc-info) 70%, var(--arc-fg-2)); }
.arc-segmented-control-item-warn    { color: color-mix(in srgb, var(--arc-warn) 70%, var(--arc-fg-2)); }
.arc-segmented-control-item-danger  { color: color-mix(in srgb, var(--arc-danger) 70%, var(--arc-fg-2)); }
.arc-segmented-control-item-success { color: color-mix(in srgb, var(--arc-success) 70%, var(--arc-fg-2)); }
.arc-segmented-control-item-accent.arc-segmented-control-item-active  { color: var(--arc-accent); }
.arc-segmented-control-item-info.arc-segmented-control-item-active    { color: var(--arc-info); }
.arc-segmented-control-item-warn.arc-segmented-control-item-active    { color: var(--arc-warn); }
.arc-segmented-control-item-danger.arc-segmented-control-item-active  { color: var(--arc-danger); }
.arc-segmented-control-item-success.arc-segmented-control-item-active { color: var(--arc-success); }

/* ArcButtonGroup — joined-button toolbar. */
.arc-button-group {
  display: inline-flex;
  align-items: stretch;
}
.arc-button-group-horizontal { flex-direction: row; }
.arc-button-group-vertical { flex-direction: column; }

/* Strip internal corner radii so adjacent buttons join visually.
   Horizontal: first child keeps left corners, last child keeps right. */
.arc-button-group-horizontal > .arc-btn {
  border-radius: 0;
  margin-left: -1px;
}
.arc-button-group-horizontal > .arc-btn:first-child {
  border-top-left-radius: var(--arc-radius-1);
  border-bottom-left-radius: var(--arc-radius-1);
  margin-left: 0;
}
.arc-button-group-horizontal > .arc-btn:last-child {
  border-top-right-radius: var(--arc-radius-1);
  border-bottom-right-radius: var(--arc-radius-1);
}
.arc-button-group-vertical > .arc-btn {
  border-radius: 0;
  margin-top: -1px;
}
.arc-button-group-vertical > .arc-btn:first-child {
  border-top-left-radius: var(--arc-radius-1);
  border-top-right-radius: var(--arc-radius-1);
  margin-top: 0;
}
.arc-button-group-vertical > .arc-btn:last-child {
  border-bottom-left-radius: var(--arc-radius-1);
  border-bottom-right-radius: var(--arc-radius-1);
}
/* Make pressed/focused buttons sit above neighbors so their border isn't clipped. */
.arc-button-group > .arc-btn:hover,
.arc-button-group > .arc-btn:focus-visible { z-index: 1; }

/* ArcRating — star input + display. */
.arc-rating {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  font-family: var(--arc-font-sans);
}
.arc-rating-star {
  position: relative;
  display: inline-block;
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  color: transparent;
  user-select: none;
}
.arc-rating-readonly .arc-rating-star { cursor: default; }
.arc-rating-star-bg {
  position: relative;
  color: var(--arc-border-2);
  z-index: 0;
}
.arc-rating-star-fill {
  position: absolute;
  inset: 0;
  color: var(--arc-warn);
  overflow: hidden;
  white-space: nowrap;
  z-index: 1;
}
.arc-rating-star-bg .arc-icon,
.arc-rating-star-fill .arc-icon {
  display: block;
  fill: currentColor;
}
.arc-rating-value {
  margin-left: 8px;
  font-family: var(--arc-font-mono);
  font-size: 13px;
  color: var(--arc-fg-2);
  font-variant-numeric: tabular-nums;
}

/* ArcGauge — circular SVG progress. */
.arc-gauge {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--arc-gauge-size, 100px);
  height: var(--arc-gauge-size, 100px);
}
.arc-gauge-svg {
  width: 100%;
  height: 100%;
  overflow: visible;
}
.arc-gauge-track {
  stroke: var(--arc-bg-2);
}
.arc-gauge-fill {
  transition: stroke-dashoffset var(--arc-dur-base) var(--arc-ease);
}
.arc-gauge-center {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: var(--arc-font-mono);
  font-size: 16px;
  font-weight: 600;
  color: var(--arc-fg-1);
  font-variant-numeric: tabular-nums;
  text-align: center;
  pointer-events: none;
}
.arc-gauge-label { display: inline-block; }

/* ArcSplitter — drag-resizable two-pane container. */
.arc-splitter {
  display: flex;
  width: 100%;
  height: 100%;
  position: relative;
  overflow: hidden;
}
.arc-splitter-horizontal { flex-direction: row; }
.arc-splitter-vertical   { flex-direction: column; }
.arc-splitter-pane {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}
.arc-splitter-pane-second { flex: 1 1 auto; }
.arc-splitter-pane-first  { flex: 0 0 auto; }
.arc-splitter-handle {
  flex-shrink: 0;
  background: var(--arc-bg-1);
  border: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  user-select: none;
  touch-action: none;
}
.arc-splitter-handle:hover,
.arc-splitter-handle:focus-visible { background: var(--arc-bg-2); outline: none; }
.arc-splitter-horizontal > .arc-splitter-handle {
  width: 8px;
  cursor: col-resize;
  border-left: 1px solid var(--arc-border-2);
  border-right: 1px solid var(--arc-border-2);
}
.arc-splitter-vertical > .arc-splitter-handle {
  height: 8px;
  cursor: row-resize;
  border-top: 1px solid var(--arc-border-2);
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-splitter-handle-grip {
  display: block;
  background: var(--arc-border-2);
  border-radius: 1px;
}
.arc-splitter-horizontal .arc-splitter-handle-grip { width: 2px; height: 24px; }
.arc-splitter-vertical   .arc-splitter-handle-grip { width: 24px; height: 2px; }
.arc-splitter-handle:hover .arc-splitter-handle-grip,
.arc-splitter-handle:focus-visible .arc-splitter-handle-grip { background: var(--arc-accent); }

/* ─── U4 wave 3 — Drag/resize (Resizable, SortableList, DataGrid resize + reorder) ─── */

/* ArcResizable — wrapper with native CSS resize. Drag handle in bottom-right. */
.arc-resizable {
  overflow: auto;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  padding: 12px;
  background: var(--arc-bg-1);
  box-sizing: border-box;
}

/* ArcSortableList — drag-reorderable list. Drop targets get a top/left highlight bar. */
.arc-sortable-list {
  display: flex;
  gap: 8px;
}
.arc-sortable-list-vertical   { flex-direction: column; }
.arc-sortable-list-horizontal { flex-direction: row; flex-wrap: wrap; }
.arc-sortable-list-item {
  display: flex;
  align-items: stretch;
  gap: 8px;
  position: relative;
  transition: opacity var(--arc-dur-fast) var(--arc-ease);
  cursor: move;
}
.arc-sortable-list-item-dragging { opacity: 0.4; }
.arc-sortable-list-item-drop-target::before {
  content: "";
  position: absolute;
  background: var(--arc-accent);
  border-radius: 2px;
  z-index: 1;
}
.arc-sortable-list-vertical .arc-sortable-list-item-drop-target::before {
  top: -4px; left: 0; right: 0; height: 2px;
}
.arc-sortable-list-horizontal .arc-sortable-list-item-drop-target::before {
  left: -4px; top: 0; bottom: 0; width: 2px;
}
.arc-sortable-list-handle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0 6px;
  color: var(--arc-fg-3);
  cursor: grab;
  user-select: none;
}
.arc-sortable-list-handle:active { cursor: grabbing; }
.arc-sortable-list-content { flex: 1; min-width: 0; }

/* ArcDataGrid — column resize handle (right edge of resizable th). */
.arc-datagrid-table th {
  position: relative; /* anchor for the resize handle */
}
.arc-datagrid-col-resize-handle {
  position: absolute;
  top: 0;
  right: 0;
  width: 6px;
  height: 100%;
  cursor: col-resize;
  user-select: none;
  touch-action: none;
  z-index: 2;
}
.arc-datagrid-col-resize-handle::after {
  content: "";
  position: absolute;
  top: 25%;
  bottom: 25%;
  right: 2px;
  width: 1px;
  background: var(--arc-border-2);
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-col-resize-handle:hover::after,
.arc-datagrid-col-resize-handle:active::after { background: var(--arc-accent); }

/* ArcDataGrid — dragging row visual. */
.arc-datagrid-row-dragging td { opacity: 0.4; }

/* ArcDataGrid — inline cell edit (U5.5). Cells in editable columns get a subtle
   text cursor + edge to advertise click-to-edit; the active cell flips to an
   accent ring + light highlight so the editor stands out from regular content. */
.arc-datagrid-cell-editable {
    cursor: text;
}
.arc-datagrid-cell-editable:hover {
    background: var(--arc-bg-2);
    outline: 1px dashed var(--arc-border-2);
    outline-offset: -2px;
}
.arc-datagrid-cell-editing {
    background: var(--arc-bg-1);
    outline: 2px solid var(--arc-accent);
    outline-offset: -2px;
    padding: 2px 4px;
}
/* Strip default padding off form inputs inside the editing cell so the editor
   fills it cleanly. Inner inputs reset their background since the cell is
   already accent-ringed. */
.arc-datagrid-cell-editing input,
.arc-datagrid-cell-editing select,
.arc-datagrid-cell-editing textarea {
    width: 100%;
    box-sizing: border-box;
}

/* ─── U4 wave 4 — Date pair (Calendar + DateRangePicker) ─── */

/* ArcCalendar — full month grid view. */
.arc-calendar {
  display: inline-block;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  padding: 12px;
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  /* Never wider than the container: the day grid shrinks (minmax below) on
     narrow phones instead of bulging out of cards. */
  max-width: 100%;
}
.arc-calendar-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.arc-calendar-title {
  margin: 0;
  font-size: 14px;
  font-weight: 500;
  color: var(--arc-fg-1);
  letter-spacing: -0.01em;
}
.arc-calendar-nav-btn {
  background: transparent;
  border: 1px solid var(--arc-border-2);
  color: var(--arc-fg-2);
  width: 26px;
  height: 26px;
  border-radius: 4px;
  cursor: pointer;
  line-height: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arc-calendar-nav-btn:hover {
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
}
.arc-calendar-grid {
  display: grid;
  /* 36px cap, shrinkable: 7 columns + gaps fit a ~280px container with the
     buttons narrowing a few px instead of overflowing. */
  grid-template-columns: repeat(7, minmax(0, 36px));
  gap: 4px;
}
.arc-calendar-weekday {
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  text-align: center;
  padding: 4px 0;
  font-weight: 500;
}
.arc-calendar-day {
  position: relative;
  background: transparent;
  border: 0;
  border-radius: 4px;
  width: 100%;
  max-width: 36px;
  min-width: 0;
  height: 36px;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  color: var(--arc-fg-1);
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 0;
}
.arc-calendar-day:hover:not(:disabled) {
  background: var(--arc-bg-2);
}
.arc-calendar-day-number { line-height: 1; }
.arc-calendar-day-content {
  font-size: 9.5px;
  color: var(--arc-fg-3);
  line-height: 1;
  margin-top: 2px;
}
.arc-calendar-day-other { color: var(--arc-fg-3); opacity: 0.55; }
.arc-calendar-day-today {
  box-shadow: inset 0 0 0 1px var(--arc-accent);
}
.arc-calendar-day-selected {
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
}
.arc-calendar-day-selected:hover:not(:disabled) {
  background: var(--arc-accent-hi);
}
.arc-calendar-day-highlighted:not(.arc-calendar-day-selected) {
  background: var(--arc-accent-lo);
  color: var(--arc-accent);
}
.arc-calendar-day-in-range:not(.arc-calendar-day-selected) {
  background: color-mix(in srgb, var(--arc-accent) 14%, transparent);
  color: var(--arc-accent);
  border-radius: 2px;
}
/* Range-band bridging: the 4px grid gap leaves a visible break between
   start/end (solid accent) and the tinted middle. Extend the tint 4px
   rightward whenever the next sibling continues the range. This works
   on both boundary days and middle days; the chain forms a continuous
   horizontal band even though IsInRange is exclusive of endpoints.
   `:has()` is supported in all evergreen browsers (Chrome 105+,
   Safari 15.4+, Firefox 121+); pre-:has() browsers degrade to the
   pre-fix appearance (visible 4px gaps) — acceptable. */
.arc-calendar-day-selected:has(+ .arc-calendar-day-in-range),
.arc-calendar-day-in-range:has(+ .arc-calendar-day-in-range),
.arc-calendar-day-in-range:has(+ .arc-calendar-day-selected) {
  box-shadow: 4px 0 0 0 color-mix(in srgb, var(--arc-accent) 14%, transparent);
}
.arc-calendar-day-disabled {
  opacity: 0.3;
  cursor: not-allowed;
  pointer-events: none;
}

.arc-calendar-compact .arc-calendar-grid {
  grid-template-columns: repeat(7, minmax(0, 28px));
  gap: 2px;
}
.arc-calendar-compact .arc-calendar-day {
  width: 100%;
  max-width: 28px;
  height: 28px;
  font-size: 11.5px;
}

/* ArcDateRangePicker — popover with preset rail + embedded calendar. */
.arc-daterange { position: relative; display: inline-block; }
.arc-daterange-input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13.5px;
  padding: 8px 12px;
  cursor: pointer;
  min-width: 220px;
}
.arc-daterange-input[data-empty="true"] { color: var(--arc-fg-3); }
.arc-daterange-input:hover { border-color: var(--arc-accent); }
.arc-daterange-input-icon { display: inline-flex; color: var(--arc-fg-3); }
.arc-daterange-popover {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: var(--arc-z-dropdown);
  display: flex;
  background: var(--arc-bg-0);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-2);
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.35);
  overflow: hidden;
}
.arc-daterange-presets {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 10px;
  min-width: 150px;
  background: var(--arc-bg-1);
  border-right: 1px solid var(--arc-border-2);
}
.arc-daterange-preset {
  background: transparent;
  border: 0;
  text-align: left;
  padding: 6px 10px;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  color: var(--arc-fg-2);
  border-radius: 4px;
  cursor: pointer;
}
.arc-daterange-preset:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.arc-daterange-calendar-wrap {
  display: flex;
  flex-direction: column;
}
.arc-daterange-calendar-wrap .arc-calendar {
  border: 0;
  background: transparent;
  border-radius: 0;
  padding: 12px 16px;
}
.arc-daterange-summary {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 10px 16px;
  border-top: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  color: var(--arc-fg-2);
  flex-wrap: wrap;
}
.arc-daterange-summary-label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-daterange-summary-sep { display: inline-flex; align-items: center; color: var(--arc-fg-3); }
.arc-daterange-summary strong { color: var(--arc-fg-1); font-weight: 500; }
.arc-daterange-apply {
  margin-left: auto;
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
  border: 0;
  border-radius: var(--arc-radius-1);
  padding: 6px 14px;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
}
.arc-daterange-apply:disabled {
  background: var(--arc-bg-2);
  color: var(--arc-fg-3);
  cursor: not-allowed;
}
@media (max-width: 560px) {
  .arc-daterange-popover { flex-direction: column; }
  .arc-daterange-presets {
    flex-direction: row;
    flex-wrap: wrap;
    border-right: 0;
    border-bottom: 1px solid var(--arc-border-2);
    min-width: 0;
  }
}

/* ─── U4 wave 5 — ImagePreview + Countdown ─── */

/* ArcImagePreview — thumbnail trigger + dialog lightbox. */
.arc-image-preview { display: inline-block; }
.arc-image-preview-thumb {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  background: transparent;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  padding: 4px;
  cursor: zoom-in;
  font-family: var(--arc-font-sans);
  font-size: 12px;
  color: var(--arc-fg-3);
  transition: border-color var(--arc-dur-fast) var(--arc-ease);
  max-width: 100%;
}
.arc-image-preview-thumb:hover { border-color: var(--arc-accent); }
.arc-image-preview-thumb img {
  display: block;
  max-width: 100%;
  height: auto;
  border-radius: 3px;
}
.arc-image-preview-caption { font-size: 11px; color: var(--arc-fg-3); }
dialog.arc-image-preview-dialog {
  position: fixed;
  padding: 0;
  border: 0;
  background: transparent;
  max-width: 95vw;
  max-height: 95vh;
}
dialog.arc-image-preview-dialog::backdrop {
  background: rgba(0, 0, 0, 0.85);
  backdrop-filter: blur(4px);
}
.arc-image-preview-content {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: 95vw;
  max-height: 95vh;
}
.arc-image-preview-full {
  display: block;
  max-width: 95vw;
  max-height: 85vh;
  border-radius: var(--arc-radius-1);
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.5);
}
.arc-image-preview-full-caption {
  text-align: center;
  color: rgba(255, 255, 255, 0.85);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  padding: 4px 12px;
}
.arc-image-preview-close {
  position: absolute;
  top: -36px;
  right: 0;
  background: rgba(255, 255, 255, 0.1);
  border: 0;
  color: white;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.arc-image-preview-close:hover { background: rgba(255, 255, 255, 0.2); }

/* ArcCountdown — segmented timer display. */
.arc-countdown {
  display: inline-flex;
  align-items: baseline;
  gap: 12px;
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
}
.arc-countdown-segment {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  min-width: 36px;
}
.arc-countdown-value {
  font-family: var(--arc-font-mono);
  font-size: 22px;
  font-weight: 600;
  color: var(--arc-fg-1);
  letter-spacing: -0.02em;
  font-variant-numeric: tabular-nums;
  line-height: 1;
}
.arc-countdown-label {
  font-family: var(--arc-font-mono);
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  margin-top: 4px;
}
.arc-countdown-complete {
  font-family: var(--arc-font-sans);
  font-size: 13px;
  color: var(--arc-danger);
  font-weight: 500;
  align-self: center;
}
.arc-countdown-compact { gap: 6px; }
.arc-countdown-compact .arc-countdown-segment { min-width: 0; }
.arc-countdown-compact .arc-countdown-value { font-size: 14px; font-weight: 500; }
.arc-countdown-compact .arc-countdown-label { font-size: 9px; margin-top: 2px; }

/* ===== ArcMarkdown — themed typography for Markdig output ===== */
.arc-markdown {
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  font-size: 14px;
  line-height: 1.65;
}
.arc-markdown h1,
.arc-markdown h2,
.arc-markdown h3,
.arc-markdown h4,
.arc-markdown h5,
.arc-markdown h6 {
  font-family: var(--arc-font-sans);
  color: var(--arc-fg-1);
  font-weight: 600;
  line-height: 1.25;
  margin: 1.6em 0 0.6em;
}
.arc-markdown h1 { font-size: 28px; letter-spacing: -0.01em; }
.arc-markdown h2 { font-size: 22px; letter-spacing: -0.005em; }
.arc-markdown h3 { font-size: 18px; }
.arc-markdown h4 { font-size: 16px; }
.arc-markdown h5 { font-size: 14px; color: var(--arc-fg-2); }
.arc-markdown h6 { font-size: 13px; color: var(--arc-fg-3); text-transform: uppercase; letter-spacing: 0.06em; }
.arc-markdown > :first-child { margin-top: 0; }
.arc-markdown > :last-child { margin-bottom: 0; }
.arc-markdown p { margin: 0 0 1em; }
.arc-markdown a { color: var(--arc-accent); text-decoration: underline; text-underline-offset: 2px; text-decoration-thickness: 1px; }
.arc-markdown a:hover { text-decoration-thickness: 2px; }
.arc-markdown strong { font-weight: 600; color: var(--arc-fg-1); }
.arc-markdown em { font-style: italic; }
.arc-markdown del { color: var(--arc-fg-3); }
.arc-markdown ul,
.arc-markdown ol { margin: 0 0 1em; padding-left: 1.5em; }
.arc-markdown li { margin: 0.2em 0; }
.arc-markdown li > ul,
.arc-markdown li > ol { margin: 0.2em 0; }
.arc-markdown blockquote {
  margin: 0 0 1em;
  padding: 6px 14px;
  border-left: 3px solid var(--arc-accent);
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  border-radius: 0 var(--arc-radius-md) var(--arc-radius-md) 0;
}
.arc-markdown blockquote > :first-child { margin-top: 0; }
.arc-markdown blockquote > :last-child { margin-bottom: 0; }
.arc-markdown code {
  font-family: var(--arc-font-mono);
  font-size: 0.9em;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: 4px;
  padding: 1px 5px;
  color: var(--arc-fg-1);
}
.arc-markdown pre {
  margin: 0 0 1em;
  padding: 12px 14px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow-x: auto;
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  line-height: 1.55;
}
.arc-markdown pre code {
  background: transparent;
  border: none;
  padding: 0;
  font-size: inherit;
}
.arc-markdown hr {
  border: none;
  border-top: 1px solid var(--arc-border-2);
  margin: 1.5em 0;
}
.arc-markdown table {
  border-collapse: collapse;
  margin: 0 0 1em;
  width: 100%;
  font-size: 13px;
}
.arc-markdown th,
.arc-markdown td {
  border: 1px solid var(--arc-border-2);
  padding: 6px 10px;
  text-align: left;
}
.arc-markdown th {
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  font-weight: 600;
}
.arc-markdown img {
  max-width: 100%;
  height: auto;
  border-radius: var(--arc-radius-md);
}

/* ===== ArcKanban — multi-column drag-and-drop board ===== */
.arc-kanban {
  display: flex;
  gap: 14px;
  align-items: flex-start;
  overflow-x: auto;
  padding: 4px;
  font-family: var(--arc-font-sans);
}
.arc-kanban-column {
  flex: 0 0 280px;
  display: flex;
  flex-direction: column;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  min-height: 120px;
  transition: border-color 120ms ease, background 120ms ease;
}
.arc-kanban-column-drop-target {
  border-color: var(--arc-accent);
  background: var(--arc-bg-3);
}
.arc-kanban-column-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-bottom: 1px solid var(--arc-border-2);
  position: relative;
}
.arc-kanban-column-header::before {
  content: '';
  position: absolute;
  left: 0; top: 0; bottom: 0;
  width: 3px;
  background: var(--arc-kanban-accent, var(--arc-accent));
  border-top-left-radius: var(--arc-radius-md);
  border-bottom-left-radius: var(--arc-radius-md);
}
.arc-kanban-column-title {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--arc-fg-1);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.arc-kanban-column-count {
  font-size: 11px;
  color: var(--arc-fg-3);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  padding: 1px 7px;
  min-width: 22px;
  text-align: center;
}
.arc-kanban-column-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px;
  min-height: 60px;
}
.arc-kanban-card {
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  padding: 10px 12px;
  cursor: grab;
  font-size: 13px;
  color: var(--arc-fg-1);
  transition: transform 100ms ease, box-shadow 100ms ease, opacity 100ms ease;
}
.arc-kanban-card:hover { border-color: var(--arc-border-3); }
.arc-kanban-card:active { cursor: grabbing; }
.arc-kanban-card-dragging { opacity: var(--arc-opacity-dragging); transform: scale(0.98); }
/* Insertion indicator while dragging — an accent line above the card the drop will land before. */
.arc-kanban-card-drop-before { box-shadow: 0 -3px 0 -1px var(--arc-accent); }
.arc-kanban-column-empty {
  font-size: 12px;
  color: var(--arc-fg-3);
  font-style: italic;
  text-align: center;
  padding: 16px 8px;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-md);
}

/* ===== ArcQuickBar — floating action toolbar ===== */
.arc-quick-bar {
  position: fixed;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-lg);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: var(--arc-quick-bar-z, var(--arc-z-fab));
  font-family: var(--arc-font-sans);
}
.arc-quick-bar-vertical { flex-direction: column; }
.arc-quick-bar-horizontal { flex-direction: row; }
.arc-quick-bar-bottom-right {
  right: var(--arc-quick-bar-offset, 24px);
  bottom: var(--arc-quick-bar-offset, 24px);
}
.arc-quick-bar-bottom-left {
  left: var(--arc-quick-bar-offset, 24px);
  bottom: var(--arc-quick-bar-offset, 24px);
}
.arc-quick-bar-top-right {
  right: var(--arc-quick-bar-offset, 24px);
  top: var(--arc-quick-bar-offset, 24px);
}
.arc-quick-bar-top-left {
  left: var(--arc-quick-bar-offset, 24px);
  top: var(--arc-quick-bar-offset, 24px);
}
.arc-quick-bar-bottom-center {
  left: 50%;
  bottom: var(--arc-quick-bar-offset, 24px);
  transform: translateX(-50%);
}

/* ===== ArcFab — single-action floating action button ============================
   Pinned to a viewport corner. Round 56px primary action; extends to a pill
   shape when Label is set. Primary variant gets an accent glow ring.

   Both sit on the --arc-z-fab tier. The runtime ZIndex params keep the FAB above
   ArcQuickBar (60 vs 50) when both appear on a page; the CSS fallback floor mirrors
   that with calc(--arc-z-fab + 1) so the FAB stays on top even if only the CSS var is
   set. Both accept a ZIndex param to override. ==================================== */
.arc-fab {
  position: fixed;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 56px;
  height: 56px;
  padding: 0;
  border-radius: var(--arc-radius-pill);
  font-family: var(--arc-font-sans);
  font-size: 15px;
  font-weight: 600;
  line-height: 1;
  border: 1px solid transparent;
  cursor: pointer;
  z-index: var(--arc-fab-z, calc(var(--arc-z-fab) + 1));
  isolation: isolate;
  transition: background var(--arc-dur-fast) var(--arc-ease),
              transform var(--arc-dur-fast) var(--arc-ease),
              border-color var(--arc-dur-fast) var(--arc-ease),
              box-shadow var(--arc-dur-fast) var(--arc-ease);
}
.arc-fab:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}
.arc-fab-extended {
  width: auto;
  min-width: 56px;
  padding: 0 22px;
  border-radius: var(--arc-radius-pill);
}
.arc-fab-content {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
  line-height: 1;
}
.arc-fab-label {
  font-size: 14px;
  letter-spacing: -0.005em;
  font-weight: 600;
}

/* Variants */
.arc-fab-primary {
  background: var(--arc-accent);
  color: var(--arc-fg-on-accent);
  border-color: var(--arc-accent-lo);
  box-shadow: var(--arc-shadow-2);
}
.arc-fab-primary:hover:not(:disabled) { background: var(--arc-accent-hi); transform: translateY(-1px); }
.arc-fab-primary:active:not(:disabled) { background: var(--arc-accent-lo); transform: translateY(0); }
.arc-fab-glow { box-shadow: var(--arc-accent-glow), var(--arc-shadow-2); }

.arc-fab-secondary {
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  border-color: var(--arc-border-2);
  box-shadow: var(--arc-shadow-2);
}
.arc-fab-secondary:hover:not(:disabled) { background: var(--arc-surface-hover); border-color: var(--arc-border-3); }

.arc-fab-ghost {
  background: transparent;
  color: var(--arc-fg-2);
  border-color: var(--arc-border-2);
}
.arc-fab-ghost:hover:not(:disabled) { background: var(--arc-bg-2); color: var(--arc-fg-1); }

.arc-fab:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.35);
}

/* Position variants — same vocabulary as ArcQuickBar. */
.arc-fab-bottom-right {
  right: var(--arc-fab-offset, 24px);
  bottom: var(--arc-fab-offset, 24px);
}
.arc-fab-bottom-left {
  left: var(--arc-fab-offset, 24px);
  bottom: var(--arc-fab-offset, 24px);
}
.arc-fab-top-right {
  right: var(--arc-fab-offset, 24px);
  top: var(--arc-fab-offset, 24px);
}
.arc-fab-top-left {
  left: var(--arc-fab-offset, 24px);
  top: var(--arc-fab-offset, 24px);
}
.arc-fab-bottom-center {
  left: 50%;
  bottom: var(--arc-fab-offset, 24px);
  transform: translateX(-50%);
}
/* When hovered/active, preserve the centering translate while applying motion. */
.arc-fab-bottom-center:hover:not(:disabled) { transform: translateX(-50%) translateY(-1px); }
.arc-fab-bottom-center:active:not(:disabled) { transform: translateX(-50%); }

/* Mobile tweak — tap-comfortable spacing from the edge. */
@media (max-width: 640px) {
  .arc-fab { width: 52px; height: 52px; }
  .arc-fab-extended { padding: 0 18px; }
}

/* ===== ArcSubscriptionStatus — typed billing-state pill ===== */
.arc-subscription-status {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 3px 10px 3px 9px;
  border-radius: var(--arc-radius-pill);
  font-family: var(--arc-font-sans);
  font-size: 12px;
  line-height: 1.5;
  font-weight: 500;
  border: 1px solid;
  white-space: nowrap;
}
.arc-subscription-status-dot {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  flex: 0 0 auto;
}
.arc-subscription-status-label { color: inherit; }
.arc-subscription-status-date {
  color: var(--arc-fg-3);
  font-weight: 400;
  font-size: 11px;
  padding-left: 4px;
  border-left: 1px solid currentColor;
  margin-left: 2px;
  opacity: 0.85;
}
.arc-subscription-status-active {
  background: var(--arc-accent-soft);
  color: var(--arc-accent);
  border-color: rgba(67, 245, 161, 0.22);
}
.arc-subscription-status-trial {
  background: rgba(91, 168, 247, 0.12);
  color: var(--arc-info);
  border-color: rgba(91, 168, 247, 0.25);
}
.arc-subscription-status-pastdue {
  background: rgba(245, 196, 67, 0.12);
  color: var(--arc-warn);
  border-color: rgba(245, 196, 67, 0.25);
}
.arc-subscription-status-cancelled {
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  border-color: var(--arc-border-2);
}
.arc-subscription-status-suspended {
  background: rgba(245, 99, 107, 0.12);
  color: var(--arc-danger);
  border-color: rgba(245, 99, 107, 0.25);
}
.arc-subscription-status-pending {
  background: var(--arc-bg-3);
  color: var(--arc-fg-2);
  border-color: var(--arc-border-3);
}
.arc-subscription-status-expired {
  background: var(--arc-bg-2);
  color: var(--arc-fg-3);
  border-color: var(--arc-border-2);
}

/* ===== ArcColorPicker — swatch + hex text field ===== */
.arc-color-picker {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-color-picker-row {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arc-color-picker-swatch {
  position: relative;
  width: 36px;
  height: 36px;
  flex: 0 0 auto;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  cursor: pointer;
  overflow: hidden;
  display: inline-block;
  transition: border-color 120ms ease;
}
.arc-color-picker-swatch:hover { border-color: var(--arc-border-3); }
.arc-color-picker-native {
  /* Native picker is a hidden overlay — the swatch background reflects the value. */
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: 0;
  padding: 0;
}
.arc-color-picker-text {
  font-family: var(--arc-font-mono);
  letter-spacing: 0.02em;
  text-transform: lowercase;
  width: 100%;
  min-width: 0;
}
.arc-color-picker-presets {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 4px;
}
.arc-color-picker-preset {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  border: 1px solid var(--arc-border-2);
  cursor: pointer;
  padding: 0;
  transition: transform 100ms ease, box-shadow 120ms ease;
}
.arc-color-picker-preset:hover {
  transform: scale(1.08);
  border-color: var(--arc-border-3);
}
.arc-color-picker-preset-selected {
  box-shadow: 0 0 0 2px var(--arc-bg-1), 0 0 0 4px var(--arc-accent);
}
.arc-color-picker-preset:disabled { cursor: not-allowed; opacity: var(--arc-opacity-disabled); }

/* ===== ArcNumberInput — number entry with optional steppers ===== */
.arc-number-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-number-input-row {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.arc-number-input-row:focus-within { border-color: var(--arc-border-focus); }
.arc-number-input-field {
  border: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 64px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  background: transparent !important;
}
.arc-number-input-field:focus { outline: none; }
/* Hide native number-input spin buttons; we provide our own. */
.arc-number-input-field::-webkit-outer-spin-button,
.arc-number-input-field::-webkit-inner-spin-button {
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
.arc-number-input-field[type="number"] { -moz-appearance: textfield; }
.arc-number-input-step {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 32px;
  background: var(--arc-bg-2);
  border: 0;
  color: var(--arc-fg-1);
  line-height: 1;
  font-weight: 500;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.arc-number-input-step:hover:not(:disabled) {
  background: var(--arc-bg-3);
  color: var(--arc-accent);
}
.arc-number-input-step:disabled {
  cursor: not-allowed;
  color: var(--arc-fg-3);
  opacity: 0.6;
}
.arc-number-input-step-decrement { border-right: 1px solid var(--arc-border-2); }
.arc-number-input-step-increment { border-left: 1px solid var(--arc-border-2); }

/* ===== ArcTimePicker — themed wrapper around <input type="time"> ===== */
.arc-time-picker .arc-time-picker-input {
  font-variant-numeric: tabular-nums;
  font-family: var(--arc-font-mono);
}
/* Recolor the native picker indicator in dark mode so it stays visible. */
.arc-time-picker-input::-webkit-calendar-picker-indicator {
  filter: invert(0.75);
  cursor: pointer;
}
[data-theme="light"] .arc-time-picker-input::-webkit-calendar-picker-indicator {
  filter: none;
}

/* ===== ArcCopyButton — one-click clipboard with confirmation state ===== */
.arc-copy-button {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  font-weight: 500;
  cursor: pointer;
  transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
  white-space: nowrap;
  line-height: 1;
}
.arc-copy-button:disabled { cursor: not-allowed; opacity: var(--arc-opacity-disabled); }
.arc-copy-button-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 13px;
  width: 14px;
  height: 14px;
}
.arc-copy-button-label { line-height: 1.4; }
.arc-copy-button-default {
  padding: 5px 10px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
}
.arc-copy-button-default:hover:not(:disabled) {
  border-color: var(--arc-border-3);
  background: var(--arc-bg-2);
}
.arc-copy-button-inline {
  padding: 2px 6px;
  border: 1px solid transparent;
  border-radius: 4px;
  background: transparent;
  color: var(--arc-fg-3);
}
.arc-copy-button-inline:hover:not(:disabled) {
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
}
.arc-copy-button-copied {
  color: var(--arc-accent) !important;
  border-color: rgba(67, 245, 161, 0.35) !important;
}

/* ===== ArcEmptyResults — search/filter zero-results variant ===== */
.arc-empty-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 48px 24px;
  gap: 10px;
  font-family: var(--arc-font-sans);
}
.arc-empty-results-icon {
  font-size: 36px;
  line-height: 1;
  opacity: 0.85;
  color: var(--arc-fg-3);
  margin-bottom: 4px;
}
.arc-empty-results-title {
  font-size: 17px;
  font-weight: 600;
  color: var(--arc-fg-1);
  margin: 0;
  letter-spacing: -0.005em;
}
.arc-empty-results-subtitle {
  font-size: 13.5px;
  color: var(--arc-fg-3);
  margin: 0;
  line-height: 1.5;
  max-width: 380px;
}
.arc-empty-results-query {
  margin: 0;
  font-size: 13px;
  color: var(--arc-fg-3);
}
.arc-empty-results-query-text {
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  padding: 1px 6px;
  border-radius: 4px;
  color: var(--arc-fg-1);
  margin-left: 4px;
}
.arc-empty-results-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
  margin-top: 8px;
}
.arc-empty-results-compact {
  padding: 24px 16px;
  gap: 8px;
}
.arc-empty-results-compact .arc-empty-results-icon { font-size: 22px; }
.arc-empty-results-compact .arc-empty-results-icon .arc-icon { width: 22px; height: 22px; }
.arc-empty-results-compact .arc-empty-results-title { font-size: 14px; }
.arc-empty-results-compact .arc-empty-results-subtitle { font-size: 12.5px; }

/* ===== ArcCommandBar — primary/secondary action toolbar above content ===== */
.arc-command-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  padding: 12px 16px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  font-family: var(--arc-font-sans);
}
.arc-command-bar-sticky {
  position: sticky;
  top: 0;
  z-index: var(--arc-z-sticky);
  border-radius: 0;
  border-left: none;
  border-right: none;
  border-top: none;
}
.arc-command-bar-compact { padding: 8px 12px; gap: 8px; }
.arc-command-bar-eyebrow {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  padding: 2px 8px;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
}
.arc-command-bar-leading {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--arc-fg-2);
  font-size: 13.5px;
}
.arc-command-bar-spacer { flex: 1 1 auto; }
.arc-command-bar-secondary,
.arc-command-bar-primary {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.arc-command-bar-secondary { padding-right: 4px; }

/* ===== ArcFilterBar — applied filter chips + clear-all ===== */
.arc-filter-bar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  padding: 8px 10px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  font-family: var(--arc-font-sans);
}
.arc-filter-bar-leading { display: inline-flex; align-items: center; }
.arc-filter-bar-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  margin-right: 6px;
}
.arc-filter-bar-empty {
  font-size: 12.5px;
  color: var(--arc-fg-3);
  font-style: italic;
}
.arc-filter-bar-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 3px 4px 3px 9px;
  font-size: 12px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  color: var(--arc-fg-1);
}
.arc-filter-bar-chip-label { font-weight: 500; }
.arc-filter-bar-chip-sep { color: var(--arc-fg-3); }
.arc-filter-bar-chip-value { color: var(--arc-fg-2); }
.arc-filter-bar-chip-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  margin-left: 2px;
  line-height: 1;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--arc-fg-3);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.arc-filter-bar-chip-remove:hover {
  background: var(--arc-bg-3);
  color: var(--arc-danger);
}
.arc-filter-bar-clear {
  margin-left: 4px;
  padding: 3px 8px;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  color: var(--arc-fg-3);
  cursor: pointer;
  transition: color 100ms ease, border-color 100ms ease;
}
.arc-filter-bar-clear:hover {
  color: var(--arc-fg-1);
  border-color: var(--arc-border-3);
}
.arc-filter-bar-trailing { margin-left: auto; }

/* ===== ArcMentionInput — textarea with @-trigger suggestion popover ===== */
.arc-mention-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-mention-input-wrap {
  position: relative;
}
.arc-mention-input-field {
  width: 100%;
  resize: vertical;
  font-family: var(--arc-font-sans);
  line-height: 1.45;
}
.arc-mention-input-popover {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 240px;
  overflow-y: auto;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.35);
  z-index: var(--arc-z-dropdown);
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.arc-mention-input-option {
  display: block;
  width: 100%;
  text-align: left;
  padding: 6px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 80ms ease;
}
.arc-mention-input-option:hover,
.arc-mention-input-option-selected {
  background: var(--arc-bg-2);
}
.arc-mention-input-option-selected { color: var(--arc-accent); }

/* ===== ArcRichTextEditor — toolbar + contenteditable surface ===== */
.arc-rich-text-editor {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-rich-text-editor-toolbar {
  display: flex;
  flex-wrap: wrap;
  gap: 2px;
  padding: 6px 8px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-bottom: none;
  border-top-left-radius: var(--arc-radius-md);
  border-top-right-radius: var(--arc-radius-md);
}
.arc-rich-text-editor-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 28px;
  height: 28px;
  padding: 0 7px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: 4px;
  color: var(--arc-fg-2);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  line-height: 1;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease, border-color 80ms ease;
}
.arc-rich-text-editor-button:hover:not(:disabled) {
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
}
.arc-rich-text-editor-button:active:not(:disabled) {
  background: var(--arc-bg-3);
}
.arc-rich-text-editor-button:disabled { cursor: not-allowed; opacity: var(--arc-opacity-disabled); }
.arc-rich-text-editor-toolbar-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 4px;
  background: var(--arc-border-2);
}
.arc-rich-text-editor-surface {
  padding: 12px 14px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-bottom-left-radius: var(--arc-radius-md);
  border-bottom-right-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 14px;
  line-height: 1.55;
  outline: none;
  transition: border-color 120ms ease;
}
.arc-rich-text-editor-surface:focus {
  border-color: var(--arc-border-focus);
}
/* When no toolbar, the editor surface gets the full rounded box. */
.arc-rich-text-editor:not(:has(.arc-rich-text-editor-toolbar)) .arc-rich-text-editor-surface {
  border-radius: var(--arc-radius-md);
}
/* Placeholder via data attribute + :empty pseudo — pure CSS, no JS. */
.arc-rich-text-editor-surface:empty::before {
  content: attr(data-placeholder);
  color: var(--arc-fg-3);
  pointer-events: none;
}
.arc-rich-text-editor-surface h2 { font-size: 19px; font-weight: 600; margin: 0.6em 0 0.3em; }
.arc-rich-text-editor-surface h3 { font-size: 16px; font-weight: 600; margin: 0.6em 0 0.3em; }
.arc-rich-text-editor-surface p { margin: 0 0 0.7em; }
.arc-rich-text-editor-surface > :last-child { margin-bottom: 0; }
.arc-rich-text-editor-surface ul,
.arc-rich-text-editor-surface ol { margin: 0 0 0.7em; padding-left: 1.5em; }
.arc-rich-text-editor-surface a { color: var(--arc-accent); text-decoration: underline; }
.arc-rich-text-editor-surface blockquote {
  margin: 0 0 0.7em;
  padding: 4px 12px;
  border-left: 3px solid var(--arc-accent);
  background: var(--arc-bg-2);
  color: var(--arc-fg-2);
  border-radius: 0 4px 4px 0;
}
.arc-rich-text-editor-surface pre {
  margin: 0 0 0.7em;
  padding: 10px 12px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: 4px;
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  overflow-x: auto;
}
.arc-rich-text-editor-disabled .arc-rich-text-editor-surface {
  background: var(--arc-bg-2);
  color: var(--arc-fg-3);
  cursor: not-allowed;
}

/* ===== ArcNotificationCenter — bell trigger + popover list ===== */
.arc-notification-center {
  position: relative;
  display: inline-block;
  font-family: var(--arc-font-sans);
}
.arc-notification-center-trigger {
  position: relative;
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  cursor: pointer;
  font-size: 16px;
  color: var(--arc-fg-1);
  transition: background 100ms ease, border-color 100ms ease;
}
.arc-notification-center-trigger:hover {
  background: var(--arc-bg-2);
  border-color: var(--arc-border-3);
}
.arc-notification-center-bell { line-height: 1; }
.arc-notification-center-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 8px;
  background: var(--arc-accent);
  color: var(--arc-bg-0);
  font-size: 10px;
  font-weight: 600;
  line-height: 16px;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-family: var(--arc-font-sans);
}
.arc-notification-center-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  width: min(360px, calc(100vw - 24px));
  max-height: 480px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  z-index: var(--arc-z-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arc-notification-center-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--arc-border-2);
  background: var(--arc-bg-2);
}
.arc-notification-center-title {
  font-weight: 600;
  font-size: 13.5px;
  color: var(--arc-fg-1);
}
.arc-notification-center-mark-all {
  background: transparent;
  border: 0;
  padding: 0;
  font-size: 12px;
  color: var(--arc-fg-3);
  cursor: pointer;
  transition: color 100ms ease;
}
.arc-notification-center-mark-all:hover { color: var(--arc-accent); }
.arc-notification-center-filter {
  display: flex;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-notification-center-filter-button {
  padding: 3px 10px;
  background: transparent;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  font-size: 11.5px;
  color: var(--arc-fg-3);
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease, border-color 100ms ease;
}
.arc-notification-center-filter-button:hover {
  color: var(--arc-fg-1);
  border-color: var(--arc-border-3);
}
.arc-notification-center-filter-button-active {
  background: var(--arc-accent-soft);
  color: var(--arc-accent);
  border-color: rgba(67, 245, 161, 0.25);
}
.arc-notification-center-list {
  flex: 1 1 auto;
  overflow-y: auto;
}
.arc-notification-center-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 36px 16px;
  color: var(--arc-fg-3);
  font-size: 12.5px;
  text-align: center;
}
/* Empty-state icon (ArcIcon) — inherits the muted fg-3 above; softened a touch. */
.arc-notification-center-empty-icon {
  display: inline-flex;
  opacity: 0.75;
}
.arc-notification-center-item {
  display: block;
  width: 100%;
  text-align: left;
  padding: 10px 14px;
  background: transparent;
  border: 0;
  border-bottom: 1px solid var(--arc-border-1);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 80ms ease;
}
.arc-notification-center-item:hover { background: var(--arc-bg-2); }
.arc-notification-center-item:last-child { border-bottom: 0; }
.arc-notification-center-item-unread {
  background: rgba(67, 245, 161, 0.04);
  border-left: 2px solid var(--arc-accent);
}
.arc-notification-center-item-unread:hover {
  background: rgba(67, 245, 161, 0.08);
}
.arc-notification-center-footer {
  padding: 10px 14px;
  border-top: 1px solid var(--arc-border-2);
  background: var(--arc-bg-2);
  font-size: 12.5px;
  text-align: center;
}
.arc-notification-center-footer a { color: var(--arc-accent); }

/* ===== ArcUserPicker — avatar + name combobox ===== */
.arc-user-picker {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-user-picker-trigger {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 4px 8px 4px 6px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  font-size: 13px;
  color: var(--arc-fg-1);
  cursor: pointer;
  min-width: 180px;
  transition: border-color 120ms ease, background 120ms ease;
}
.arc-user-picker-trigger:hover { border-color: var(--arc-border-3); }
.arc-user-picker-trigger:disabled { cursor: not-allowed; opacity: var(--arc-opacity-disabled); }
.arc-user-picker-trigger-name {
  flex: 1 1 auto;
  text-align: left;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-user-picker-trigger-placeholder {
  flex: 1 1 auto;
  color: var(--arc-fg-3);
  text-align: left;
  padding-left: 4px;
}
.arc-user-picker-trigger-clear {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  line-height: 1;
  color: var(--arc-fg-3);
  cursor: pointer;
}
.arc-user-picker-trigger-clear:hover { background: var(--arc-surface-hover); color: var(--arc-danger); }
.arc-user-picker-trigger-chevron {
  display: inline-flex;
  align-items: center;
  color: var(--arc-fg-3);
  margin-left: 2px;
}
.arc-user-picker-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  min-width: 240px;
  max-height: 360px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  z-index: var(--arc-z-dropdown);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}
.arc-user-picker-search {
  padding: 8px;
  border-bottom: 1px solid var(--arc-border-2);
  background: var(--arc-bg-2);
}
.arc-user-picker-search-input { width: 100%; }
.arc-user-picker-options {
  flex: 1 1 auto;
  overflow-y: auto;
  padding: 4px;
}
.arc-user-picker-empty {
  padding: 18px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--arc-fg-3);
}
.arc-user-picker-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  padding: 6px 8px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 80ms ease;
}
.arc-user-picker-option:hover,
.arc-user-picker-option-highlighted {
  background: var(--arc-bg-2);
}
.arc-user-picker-option-current { color: var(--arc-accent); }
.arc-user-picker-option-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
  flex: 1 1 auto;
  min-width: 0;
}
.arc-user-picker-option-name {
  font-weight: 500;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-user-picker-option-subtitle {
  font-size: 11.5px;
  color: var(--arc-fg-3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.arc-user-picker-option-check {
  display: inline-flex;
  align-items: center;
  color: var(--arc-accent);
  flex: 0 0 auto;
}

/* ===== ArcPhoneInput — country-code select + number field ===== */
.arc-phone-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-phone-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.arc-phone-input-row:focus-within { border-color: var(--arc-border-focus); }
.arc-phone-input-country {
  flex: 0 0 auto;
  max-width: 130px;
  padding: 0 8px;
  border: 0;
  border-right: 1px solid var(--arc-border-2);
  background: var(--arc-bg-2);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  cursor: pointer;
}
.arc-phone-input-country:focus { outline: none; }
.arc-phone-input-number {
  border: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  min-width: 0;
  background: transparent !important;
  font-variant-numeric: tabular-nums;
}
.arc-phone-input-number:focus { outline: none; }

/* ===== ArcCurrencyInput — symbol prefix + locale-formatted number ===== */
.arc-currency-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-currency-input-row {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  overflow: hidden;
  transition: border-color 120ms ease;
}
.arc-currency-input-row:focus-within { border-color: var(--arc-border-focus); }
.arc-currency-input-prefix,
.arc-currency-input-suffix {
  display: inline-flex;
  align-items: center;
  padding: 0 10px;
  background: var(--arc-bg-2);
  color: var(--arc-fg-3);
  font-family: var(--arc-font-mono);
  font-size: 12.5px;
  font-weight: 500;
}
.arc-currency-input-prefix { border-right: 1px solid var(--arc-border-2); }
.arc-currency-input-suffix {
  border-left: 1px solid var(--arc-border-2);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.arc-currency-input-field {
  border: none !important;
  border-radius: 0 !important;
  flex: 1 1 auto;
  text-align: right;
  font-variant-numeric: tabular-nums;
  background: transparent !important;
}
.arc-currency-input-field:focus { outline: none; }

/* ===== ArcDurationInput — natural-language duration text input ===== */
.arc-duration-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-duration-input-field {
  font-variant-numeric: tabular-nums;
  font-family: var(--arc-font-mono);
  font-size: 13px;
}

/* ===== ArcTableOfContents — sidebar-style heading nav ===== */
.arc-toc {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
  padding: 12px 14px;
  border-left: 1px solid var(--arc-border-2);
}
.arc-toc-sticky {
  position: sticky;
  top: 16px;
  max-height: calc(100vh - 32px);
  overflow-y: auto;
}
.arc-toc-title {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  margin: 0 0 4px;
}
.arc-toc-empty {
  font-size: 12.5px;
  color: var(--arc-fg-3);
  font-style: italic;
}
.arc-toc-list {
  list-style: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arc-toc-item-level-1 { padding-left: 0; }
.arc-toc-item-level-2 { padding-left: 12px; }
.arc-toc-item-level-3 { padding-left: 24px; }
.arc-toc-item-level-4 { padding-left: 36px; }
.arc-toc-link {
  display: block;
  padding: 3px 6px;
  border-radius: 4px;
  text-decoration: none;
  color: var(--arc-fg-3);
  font-size: 13px;
  line-height: 1.45;
  transition: color 100ms ease, background 100ms ease;
  border-left: 2px solid transparent;
}
.arc-toc-link:hover {
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
}
.arc-toc-link-active {
  color: var(--arc-accent);
  border-left-color: var(--arc-accent);
  background: var(--arc-accent-soft);
}

/* ===== ArcCarousel — slide carousel with prev/next + dots ===== */
.arc-carousel {
  display: flex;
  flex-direction: column;
  gap: 12px;
  font-family: var(--arc-font-sans);
}
.arc-carousel-viewport {
  position: relative;
  overflow: hidden;
  border-radius: var(--arc-radius-md);
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
}
.arc-carousel-track {
  display: flex;
  width: 100%;
  transition: transform 320ms cubic-bezier(0.4, 0, 0.2, 1);
}
.arc-carousel-slide {
  flex: 0 0 100%;
  min-width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  box-sizing: border-box;
}
.arc-carousel-control {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  color: var(--arc-fg-1);
  line-height: 1;
  cursor: pointer;
  z-index: 2;
  transition: background 120ms ease, border-color 120ms ease, opacity 120ms ease;
}
.arc-carousel-control:hover { background: var(--arc-surface-hover); border-color: var(--arc-border-3); }
.arc-carousel-control:disabled { opacity: 0.35; cursor: not-allowed; }
.arc-carousel-control-prev { left: 10px; }
.arc-carousel-control-next { right: 10px; }
.arc-carousel-dots {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 6px;
}
.arc-carousel-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--arc-border-3);
  border: 0;
  padding: 0;
  cursor: pointer;
  transition: background 120ms ease, width 120ms ease;
}
.arc-carousel-dot:hover { background: var(--arc-fg-3); }
.arc-carousel-dot-active {
  background: var(--arc-accent);
  width: 18px;
  border-radius: 4px;
}
.arc-carousel-pause-on-hover:hover .arc-carousel-track {
  /* Hook for consumer-extended pause behavior — JS auto-advance respects PauseOnHover. */
}

/* ===== ArcQrCode — QRCoder-emitted SVG with Arc chrome ===== */
.arc-qr-code {
  display: inline-flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-qr-code-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 12px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
}
.arc-qr-code-frame svg {
  display: block;
  width: 100% !important;
  height: 100% !important;
}
.arc-qr-code-empty {
  font-size: 12px;
  color: var(--arc-fg-3);
  font-style: italic;
}
.arc-qr-code-caption {
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
  word-break: break-all;
  text-align: center;
  max-width: 240px;
}

/* ===== ArcSignaturePad — canvas signature capture ===== */
.arc-signature-pad {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-signature-pad-frame {
  position: relative;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow: hidden;
  touch-action: none; /* Prevent scroll-on-drag during a signature gesture. */
}
.arc-signature-pad-canvas {
  display: block;
  cursor: crosshair;
  background: var(--arc-bg-2);
}
.arc-signature-pad-placeholder {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--arc-fg-3);
  font-size: 14px;
  pointer-events: none;
  user-select: none;
}
.arc-signature-pad-actions {
  display: flex;
  gap: 8px;
  justify-content: flex-end;
}
.arc-signature-pad-disabled .arc-signature-pad-canvas { cursor: not-allowed; }
/* Marker classes — present on the buttons so consumers can target them
   without overriding the underlying .arc-btn-* variant styles. */
.arc-signature-pad-clear { /* marker */ }
.arc-signature-pad-save { /* marker */ }

/* ===== ArcImageCropper — rect overlay + corner handles ===== */
.arc-image-cropper {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-image-cropper-frame {
  position: relative;
  overflow: hidden;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  user-select: none;
  touch-action: none;
}
.arc-image-cropper-image {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.arc-image-cropper-rect {
  position: absolute;
  border: 2px solid var(--arc-accent);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.45);
  cursor: move;
  z-index: 2;
}
.arc-image-cropper-handle {
  position: absolute;
  width: 12px;
  height: 12px;
  background: var(--arc-accent);
  border: 2px solid var(--arc-bg-0);
  border-radius: 50%;
  z-index: 3;
}
.arc-image-cropper-handle-nw { top: -7px; left: -7px; cursor: nwse-resize; }
.arc-image-cropper-handle-ne { top: -7px; right: -7px; cursor: nesw-resize; }
.arc-image-cropper-handle-sw { bottom: -7px; left: -7px; cursor: nesw-resize; }
.arc-image-cropper-handle-se { bottom: -7px; right: -7px; cursor: nwse-resize; }
.arc-image-cropper-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
}

/* ===== ArcVirtualList — windowed scroller ===== */
.arc-virtual-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-virtual-list-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-virtual-list-viewport {
  overflow-y: auto;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
}
.arc-virtual-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 0 14px;
  border-bottom: 1px solid var(--arc-border-1);
  color: var(--arc-fg-1);
  font-size: 13px;
  box-sizing: border-box;
}
.arc-virtual-list-item:last-child { border-bottom: 0; }
.arc-virtual-list-placeholder {
  display: flex;
  align-items: center;
  padding: 0 14px;
  box-sizing: border-box;
}
.arc-virtual-list-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--arc-fg-3);
  font-size: 13px;
  font-style: italic;
}

/* ===== ArcAddressInput — autocomplete address field ===== */
.arc-address-input {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-address-input-wrap {
  position: relative;
}
.arc-address-input-field {
  width: 100%;
  padding-right: 32px; /* room for the clear button */
}
.arc-address-input-clear {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  width: 18px;
  height: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: 0;
  border-radius: 50%;
  color: var(--arc-fg-3);
  line-height: 1;
  cursor: pointer;
  transition: background 100ms ease, color 100ms ease;
}
.arc-address-input-clear:hover { background: var(--arc-surface-hover); color: var(--arc-danger); }
.arc-address-input-panel {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  max-height: 280px;
  overflow-y: auto;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  z-index: var(--arc-z-dropdown);
  display: flex;
  flex-direction: column;
  padding: 4px;
}
.arc-address-input-empty {
  padding: 14px 12px;
  text-align: center;
  font-size: 12.5px;
  color: var(--arc-fg-3);
}
.arc-address-input-option {
  display: flex;
  flex-direction: column;
  gap: 2px;
  width: 100%;
  text-align: left;
  padding: 8px 10px;
  background: transparent;
  border: 0;
  border-radius: 4px;
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 13px;
  cursor: pointer;
  transition: background 80ms ease;
}
.arc-address-input-option:hover,
.arc-address-input-option-highlighted {
  background: var(--arc-bg-2);
}
.arc-address-input-option-formatted { font-weight: 500; }
.arc-address-input-option-subtitle {
  font-size: 11.5px;
  color: var(--arc-fg-3);
}

/* ===== ArcMapView — OSM iframe wrapper ===== */
.arc-map-view {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
}
.arc-map-view-frame {
  position: relative;
  width: 100%;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow: hidden;
}
.arc-map-view-iframe {
  width: 100%;
  height: 100%;
  display: block;
}
/* Leaflet host div for ArcMapView's interactive mode (U5.5). Sized 100% so the
   wrapper's inline height defines the actual pixel size. */
.arc-map-view-leaflet {
  width: 100%;
  height: 100%;
}

/* ArcGoogleMapView — sibling component using Google Maps JS SDK. */
.arc-gmap-view {
    display: flex;
    flex-direction: column;
    gap: 6px;
}
.arc-gmap-view-frame {
    position: relative;
    width: 100%;
    border-radius: var(--arc-radius);
    overflow: hidden;
    border: 1px solid var(--arc-border-1);
}
.arc-gmap-view-canvas {
    width: 100%;
    height: 100%;
}
.arc-gmap-view-overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
}
.arc-gmap-view-overlay > * { pointer-events: auto; }
.arc-map-view-overlay {
  position: absolute;
  inset: 0;
  pointer-events: none; /* let the iframe handle clicks; consumer slot opts into pointer events per child */
}
.arc-map-view-overlay > * { pointer-events: auto; }
.arc-map-view-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
}
.arc-map-view-attribution {
  font-size: 10.5px;
  color: var(--arc-fg-3);
  text-align: right;
  padding: 0 4px;
}
.arc-map-view-attribution a { color: var(--arc-fg-3); text-decoration: underline; }
.arc-map-view-attribution a:hover { color: var(--arc-accent); }

/* ===== ArcChatBubble — single message bubble ===== */
.arc-chat-bubble {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  font-family: var(--arc-font-sans);
  max-width: 100%;
}
.arc-chat-bubble-sent {
  flex-direction: row-reverse;
  align-self: flex-end;
}
.arc-chat-bubble-received {
  align-self: flex-start;
}
.arc-chat-bubble-avatar {
  flex: 0 0 auto;
  margin-bottom: 4px;
}
.arc-chat-bubble-content {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-width: min(560px, 75%);
}
.arc-chat-bubble-header {
  display: flex;
  align-items: baseline;
  gap: 6px;
  font-size: 11.5px;
  color: var(--arc-fg-3);
}
.arc-chat-bubble-sender { font-weight: 500; color: var(--arc-fg-2); }
.arc-chat-bubble-timestamp { font-variant-numeric: tabular-nums; }
.arc-chat-bubble-body {
  padding: 8px 12px;
  font-size: 13.5px;
  line-height: 1.45;
  border-radius: 14px;
  word-wrap: break-word;
}
/* Received bubbles blend into the thread (no panel surface) so an assistant/agent answer reads as
   flowing text rather than a box — this also stops a streaming reply from looking like a single
   lighter box that grows taller as tokens arrive. Body padding collapses to the inline edges so the
   text aligns under the sender name. Sent bubbles keep their accent pill (below). */
.arc-chat-bubble-received .arc-chat-bubble-body {
  background: transparent;
  color: var(--arc-fg-1);
  padding-left: 0;
  padding-right: 0;
}
.arc-chat-bubble-sent .arc-chat-bubble-body {
  background: var(--arc-accent-soft);
  color: var(--arc-accent);
  border-bottom-right-radius: 4px;
}
.arc-chat-bubble-status {
  font-size: 10.5px;
  color: var(--arc-fg-3);
  text-align: right;
  margin-top: 1px;
  letter-spacing: 0.5px;
}
.arc-chat-bubble-status-read .arc-chat-bubble-status { color: var(--arc-accent); }
.arc-chat-bubble-status-failed .arc-chat-bubble-status { color: var(--arc-danger); }

/* Speaker-grouped bubbles — a run of consecutive same-author messages reads as one continuous turn.
   Continuation bubbles drop their avatar; the spacer keeps the body aligned under the run's avatar
   (matches ArcAvatar Sm = 24px). Stacked inner corners square off so the run looks like one block. */
.arc-chat-bubble-avatar-spacer {
  flex: 0 0 auto;
  width: 24px;
}
.arc-chat-bubble-group-middle.arc-chat-bubble-received .arc-chat-bubble-body,
.arc-chat-bubble-group-last.arc-chat-bubble-received .arc-chat-bubble-body {
  border-top-left-radius: 4px;
}
.arc-chat-bubble-group-middle.arc-chat-bubble-sent .arc-chat-bubble-body,
.arc-chat-bubble-group-last.arc-chat-bubble-sent .arc-chat-bubble-body {
  border-top-right-radius: 4px;
}

/* ===== ArcStreamingText — live token stream (agent-style) ===== */
/* min-width:0 + max-width:100% so that as a flex child (e.g. inside a chat bubble) it can shrink and
   inner <pre> code blocks / long tokens scroll instead of overflowing the container. */
.arc-streaming-text { font-family: var(--arc-font-sans); min-width: 0; max-width: 100%; }

.arc-streaming-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 0;
}
.arc-streaming-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arc-fg-3);
  animation: arc-streaming-dots-blink 1.2s infinite ease-in-out both;
}
.arc-streaming-dot:nth-child(2) { animation-delay: 0.18s; }
.arc-streaming-dot:nth-child(3) { animation-delay: 0.36s; }
@keyframes arc-streaming-dots-blink {
  0%, 80%, 100% { opacity: 0.25; transform: translateY(0); }
  40% { opacity: 1; transform: translateY(-2px); }
}

/* Blinking caret inline at the end of the last streamed line. */
.arc-streaming-text.has-caret .arc-markdown > :last-child::after,
.arc-streaming-text.has-caret .arc-streaming-plain::after {
  content: "";
  display: inline-block;
  width: 0.5ch;
  height: 1em;
  margin-left: 1px;
  background: var(--arc-accent);
  vertical-align: text-bottom;
  animation: arc-streaming-caret-blink 1s steps(2, start) infinite;
}
@keyframes arc-streaming-caret-blink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0; }
}

.arc-streaming-plain { white-space: pre-wrap; }

.arc-streaming-error {
  margin-top: 6px;
  font-size: 12.5px;
  color: var(--arc-danger);
}

@media (prefers-reduced-motion: reduce) {
  .arc-streaming-dot { animation: none; opacity: 0.6; }
  .arc-streaming-text.has-caret .arc-markdown > :last-child::after,
  .arc-streaming-text.has-caret .arc-streaming-plain::after { animation: none; opacity: 0.7; }
}

/* ===== ArcChatThread — scrollable list of bubbles ===== */
.arc-chat-thread {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  font-family: var(--arc-font-sans);
}
.arc-chat-thread-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 16px;
  overflow-y: auto;
}
/* Fill: take the container's remaining space (flex parent) or its full height (block parent); the list scrolls. */
.arc-chat-thread-fill {
  flex: 1 1 0;
  min-height: 0;
  height: 100%;
}
.arc-chat-thread-fill .arc-chat-thread-list {
  flex: 1 1 0;
  min-height: 0;
}
/* Bordered="false": the container (drawer, card) owns the chrome. */
.arc-chat-thread-borderless {
  border: 0;
  border-radius: 0;
  background: transparent;
}
.arc-chat-thread-row {
  display: flex;
}
/* Continuation rows (Middle/Last of a speaker run) tighten against their predecessor so the
   squared inner corners butt together and the run reads as one block (list gap is 6px → ~2px). */
.arc-chat-thread-row-cont {
  margin-top: -4px;
}
.arc-chat-thread-divider {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 12px 0 4px;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-chat-thread-divider span {
  padding: 2px 10px;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
}
.arc-chat-thread-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  color: var(--arc-fg-3);
  font-size: 13px;
  font-style: italic;
}
/* EmptyContent: consumer markup (intro + suggestion chips), so no italic/centering opinions. */
.arc-chat-thread-empty-content {
  padding: 8px 0;
}
.arc-chat-thread-load-older {
  display: flex;
  justify-content: center;
  margin-bottom: 8px;
}

/* ===== ArcAudioPlayer + ArcVideoPlayer — shared control bar styles ===== */
.arc-audio-player,
.arc-video-player {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-audio-player-header,
.arc-video-player-header {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.arc-audio-player-title,
.arc-video-player-title {
  font-weight: 500;
  font-size: 13.5px;
  color: var(--arc-fg-1);
}
.arc-audio-player-caption,
.arc-video-player-caption {
  font-size: 12px;
  color: var(--arc-fg-3);
}
.arc-audio-player-native {
  display: none;
}
.arc-audio-player-controls,
.arc-video-player-controls {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 12px;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
}
.arc-audio-player-play,
.arc-audio-player-mute,
.arc-audio-player-download,
.arc-video-player-play,
.arc-video-player-mute,
.arc-video-player-fullscreen {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  flex: 0 0 auto;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
  font-size: 14px;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  transition: background 100ms ease, border-color 100ms ease;
}
.arc-audio-player-play:hover:not(:disabled),
.arc-audio-player-mute:hover,
.arc-audio-player-download:hover,
.arc-video-player-play:hover:not(:disabled),
.arc-video-player-mute:hover,
.arc-video-player-fullscreen:hover {
  background: var(--arc-bg-3);
  border-color: var(--arc-border-3);
}
.arc-audio-player-play:disabled,
.arc-video-player-play:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-audio-player-time,
.arc-video-player-time {
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
  font-variant-numeric: tabular-nums;
  flex: 0 0 auto;
}
.arc-audio-player-progress,
.arc-video-player-progress {
  flex: 1 1 auto;
  min-width: 80px;
}
.arc-audio-player-speed,
.arc-video-player-speed {
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
  padding: 4px 8px;
  font-size: 12px;
  cursor: pointer;
}

/* Video-specific frame + overlay */
.arc-video-player-frame {
  position: relative;
  background: var(--arc-bg-0);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow: hidden;
  aspect-ratio: 16 / 9;
}
.arc-video-player-native {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: var(--arc-bg-0);
  cursor: pointer;
}
.arc-video-player-overlay {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: rgba(0, 0, 0, 0.6);
  border: 0;
  color: #fff;
  font-size: 22px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background 120ms ease;
}
.arc-video-player-overlay:hover { background: rgba(0, 0, 0, 0.8); }

/* ===== ArcHeatmap — GitHub-style calendar density grid ===== */
.arc-heatmap {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-heatmap-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-heatmap-scroll {
  overflow-x: auto;
  padding-bottom: 4px;
}
.arc-heatmap-svg {
  display: block;
}
.arc-heatmap-day-label,
.arc-heatmap-month-label {
  font-family: var(--arc-font-sans);
  font-size: 10px;
  fill: var(--arc-fg-3);
}
.arc-heatmap-cell { transition: filter 80ms ease; }
.arc-heatmap-cell:hover { filter: brightness(1.2); }
.arc-heatmap-cell-level-0 { fill: var(--arc-bg-3); }
.arc-heatmap-cell-level-1 { fill: rgba(67, 245, 161, 0.22); }
.arc-heatmap-cell-level-2 { fill: rgba(67, 245, 161, 0.45); }
.arc-heatmap-cell-level-3 { fill: rgba(67, 245, 161, 0.7); }
.arc-heatmap-cell-level-4 { fill: var(--arc-accent); }
.arc-heatmap-legend {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 11px;
  color: var(--arc-fg-3);
}
.arc-heatmap-legend-label { letter-spacing: 0.02em; }
.arc-heatmap-legend-cell {
  display: inline-block;
  width: 12px;
  height: 12px;
  border-radius: 2px;
}
.arc-heatmap-legend-cell.arc-heatmap-cell-level-0 { background: var(--arc-bg-3); }
.arc-heatmap-legend-cell.arc-heatmap-cell-level-1 { background: rgba(67, 245, 161, 0.22); }
.arc-heatmap-legend-cell.arc-heatmap-cell-level-2 { background: rgba(67, 245, 161, 0.45); }
.arc-heatmap-legend-cell.arc-heatmap-cell-level-3 { background: rgba(67, 245, 161, 0.7); }
.arc-heatmap-legend-cell.arc-heatmap-cell-level-4 { background: var(--arc-accent); }

/* ===== ArcFilterBuilder — recursive AND/OR group editor ===== */
.arc-filter-builder {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-filter-builder-empty {
  font-size: 12.5px;
  color: var(--arc-fg-3);
  font-style: italic;
}
.arc-filter-builder-group {
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
  padding: 10px 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arc-filter-builder-group-depth-1 { background: var(--arc-bg-2); }
.arc-filter-builder-group-depth-2 { background: var(--arc-bg-3); }
.arc-filter-builder-group-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.arc-filter-builder-logic-toggle {
  display: inline-flex;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-pill);
  background: var(--arc-bg-2);
  overflow: hidden;
}
.arc-filter-builder-logic {
  padding: 3px 10px;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.arc-filter-builder-logic-active {
  background: var(--arc-accent);
  color: var(--arc-bg-0);
}
.arc-filter-builder-remove {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: auto;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: transparent;
  border: 0;
  color: var(--arc-fg-3);
  line-height: 1;
  cursor: pointer;
  transition: background 80ms ease, color 80ms ease;
}
.arc-filter-builder-remove:hover { background: var(--arc-surface-hover); color: var(--arc-danger); }
.arc-filter-builder-children {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.arc-filter-builder-row {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}
.arc-filter-builder-field,
.arc-filter-builder-op,
.arc-filter-builder-value {
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
  font-family: var(--arc-font-sans);
  font-size: 12.5px;
  padding: 5px 8px;
  flex: 0 1 auto;
  min-width: 80px;
}
.arc-filter-builder-value { flex: 1 1 140px; }
.arc-filter-builder-actions {
  display: flex;
  gap: 6px;
  margin-top: 2px;
}
.arc-filter-builder-add {
  background: transparent;
  border: 1px dashed var(--arc-border-3);
  border-radius: var(--arc-radius-md);
  padding: 4px 10px;
  color: var(--arc-fg-3);
  font-size: 12px;
  font-family: var(--arc-font-sans);
  cursor: pointer;
  transition: color 80ms ease, border-color 80ms ease;
}
.arc-filter-builder-add:hover {
  color: var(--arc-accent);
  border-color: var(--arc-accent);
}

/* ===== ArcAdvancedColumnFilter — popover column filter ===== */
.arc-advanced-column-filter {
  position: relative;
  display: inline-block;
  font-family: var(--arc-font-sans);
}
.arc-advanced-column-filter-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-3);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
  transition: color 80ms ease, background 80ms ease, border-color 80ms ease;
}
.arc-advanced-column-filter-trigger:hover {
  color: var(--arc-fg-1);
  background: var(--arc-bg-2);
}
.arc-advanced-column-filter-trigger-active {
  color: var(--arc-accent);
  border-color: var(--arc-accent);
}
.arc-advanced-column-filter-dot {
  position: absolute;
  top: -2px;
  right: -2px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arc-accent);
}
.arc-advanced-column-filter-panel {
  position: absolute;
  top: calc(100% + 6px);
  right: 0;
  min-width: 240px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 14px 38px rgba(0, 0, 0, 0.4);
  z-index: var(--arc-z-dropdown);
  display: flex;
  flex-direction: column;
}
.arc-advanced-column-filter-body {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 10px 12px;
}
.arc-advanced-column-filter-op {
  font-size: 12px;
}
.arc-advanced-column-filter-choices {
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 200px;
  overflow-y: auto;
}
.arc-advanced-column-filter-choice {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12.5px;
  color: var(--arc-fg-1);
  cursor: pointer;
}
.arc-advanced-column-filter-footer {
  display: flex;
  justify-content: flex-end;
  gap: 6px;
  padding: 8px 12px;
  border-top: 1px solid var(--arc-border-2);
  background: var(--arc-bg-2);
  border-bottom-left-radius: var(--arc-radius-md);
  border-bottom-right-radius: var(--arc-radius-md);
}
.arc-advanced-column-filter-footer .arc-btn { padding: 4px 10px; font-size: 12px; }

/* ===== ArcOrgChart — flexbox tree with connecting line pseudo-elements ===== */
.arc-org-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-org-chart-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-org-chart-scroll {
  overflow-x: auto;
  padding: 12px 8px;
}
.arc-org-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--arc-fg-3);
  font-size: 13px;
  font-style: italic;
}
.arc-org-chart-tree,
.arc-org-chart-children {
  display: flex;
  flex-direction: row;
  align-items: flex-start;
  /* `safe center` keeps the tree centered when it fits the scroll container, but
     falls back to flex-start when it overflows — without `safe`, the leftmost
     subtree gets pushed off the start edge and is unreachable via scroll. */
  justify-content: safe center;
  gap: 12px;
  list-style: none;
  padding: 0;
  margin: 0;
  position: relative;
}
.arc-org-chart-children { padding-top: 20px; }
/* Vertical line dropping from each parent to the children's horizontal bus. */
.arc-org-chart-children::before {
  content: '';
  position: absolute;
  top: 0;
  left: 50%;
  width: 1px;
  height: 12px;
  background: var(--arc-border-3);
}
/* Horizontal bus connecting siblings (only when 2+ siblings). */
.arc-org-chart-children:has(> li + li)::after {
  content: '';
  position: absolute;
  top: 12px;
  left: 0;
  right: 0;
  height: 1px;
  background: var(--arc-border-3);
}
.arc-org-chart-node {
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;
  flex: 0 0 auto;
}
/* Stub line from each child up to the horizontal bus. */
.arc-org-chart-children > .arc-org-chart-node::before {
  content: '';
  position: absolute;
  top: -8px;
  left: 50%;
  width: 1px;
  height: 8px;
  background: var(--arc-border-3);
}
/* When there's only one child, no horizontal bus is needed — the parent's drop line connects directly. */
.arc-org-chart-children:not(:has(> li + li)) > .arc-org-chart-node::before { display: none; }
.arc-org-chart-card {
  min-width: 140px;
  padding: 8px 12px;
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  color: var(--arc-fg-1);
  font-size: 13px;
  text-align: center;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}

/* ===== ArcGanttChart — task timeline with positioned bars ===== */
.arc-gantt-chart {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-gantt-chart-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-gantt-chart-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  color: var(--arc-fg-3);
  font-size: 13px;
  font-style: italic;
}
.arc-gantt-chart-grid {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow: hidden;
  background: var(--arc-bg-1);
}
.arc-gantt-chart-header {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--arc-bg-2);
  border-bottom: 1px solid var(--arc-border-2);
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-fg-3);
}
.arc-gantt-chart-header-label {
  padding: 8px 12px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.arc-gantt-chart-axis {
  position: relative;
  height: 32px;
}
.arc-gantt-chart-tick {
  position: absolute;
  top: 0;
  bottom: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  font-size: 10.5px;
  color: var(--arc-fg-3);
  transform: translateX(-50%);
}
.arc-gantt-chart-tick-label {
  padding: 4px 4px 0;
  white-space: nowrap;
}
.arc-gantt-chart-tick-mark {
  width: 1px;
  flex: 1 1 auto;
  background: var(--arc-border-1);
  margin: 0 0 0 0;
}
.arc-gantt-chart-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  border-bottom: 1px solid var(--arc-border-1);
}
.arc-gantt-chart-row:last-child { border-bottom: 0; }
.arc-gantt-chart-row-label {
  padding: 8px 12px;
  color: var(--arc-fg-1);
  font-size: 13px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-right: 1px solid var(--arc-border-1);
}
.arc-gantt-chart-row-bar-track {
  position: relative;
  height: 32px;
}
.arc-gantt-chart-row-bar {
  position: absolute;
  top: 6px;
  bottom: 6px;
  background: var(--arc-accent-soft);
  border: 1px solid var(--arc-accent);
  border-radius: var(--arc-radius-md);
  display: flex;
  align-items: center;
  overflow: hidden;
  padding: 0 6px;
}
.arc-gantt-chart-row-bar-fill {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  background: rgba(67, 245, 161, 0.4);
}
.arc-gantt-chart-row-bar-label {
  position: relative;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  color: var(--arc-accent);
  white-space: nowrap;
  text-overflow: ellipsis;
  overflow: hidden;
  z-index: 1;
}
.arc-gantt-chart-group-row {
  display: grid;
  grid-template-columns: 200px 1fr;
  background: var(--arc-bg-3);
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-gantt-chart-group-label {
  padding: 6px 12px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  color: var(--arc-fg-2);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  font-weight: 500;
}
.arc-gantt-chart-group-spacer { /* layout-only; intentionally empty */ }

/* ===== ArcSpreadsheet — inline-editable grid ===== */
.arc-spreadsheet {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-family: var(--arc-font-sans);
  outline: none;
  /* Without these, the flex container's default `min-width: auto` lets the
     inner table dictate width — the outer spreadsheet expands past the
     viewport and the `.arc-spreadsheet-scroll` overflow:auto never engages.
     Same fix pattern as ArcHeatmap / ArcOrgChart (in the Mobile UX sweep
     section). Belt + suspenders. */
  max-width: 100%;
  min-width: 0;
}
.arc-spreadsheet-label {
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
}
.arc-spreadsheet-empty {
  padding: 24px;
  text-align: center;
  color: var(--arc-fg-3);
  font-size: 13px;
  font-style: italic;
}
.arc-spreadsheet-scroll {
  overflow: auto;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  background: var(--arc-bg-1);
}
.arc-spreadsheet-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: 13px;
  color: var(--arc-fg-1);
}
.arc-spreadsheet-table thead { background: var(--arc-bg-2); position: sticky; top: 0; z-index: 1; }
.arc-spreadsheet-colhead,
.arc-spreadsheet-rowhead {
  padding: 6px 10px;
  font-family: var(--arc-font-mono);
  font-size: 11px;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  text-align: left;
  border-bottom: 1px solid var(--arc-border-2);
  border-right: 1px solid var(--arc-border-1);
}
.arc-spreadsheet-rowhead {
  background: var(--arc-bg-2);
  font-variant-numeric: tabular-nums;
  text-align: center;
  position: sticky;
  left: 0;
  z-index: 1;
}
.arc-spreadsheet-cell {
  padding: 6px 10px;
  border-bottom: 1px solid var(--arc-border-1);
  border-right: 1px solid var(--arc-border-1);
  cursor: cell;
  min-width: 100px;
}
.arc-spreadsheet-cell:last-child { border-right: 0; }
.arc-spreadsheet-cell-readonly { color: var(--arc-fg-3); cursor: default; }
.arc-spreadsheet-cell-focused {
  outline: 2px solid var(--arc-accent);
  outline-offset: -2px;
  background: var(--arc-accent-soft);
}
.arc-spreadsheet-input {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--arc-fg-1);
  font: inherit;
  outline: none;
}

/* ===== ArcBarcodeScanner — camera-backed scan with scan-target overlay ===== */
.arc-barcode-scanner {
  display: flex;
  flex-direction: column;
  gap: 8px;
  font-family: var(--arc-font-sans);
}
.arc-barcode-scanner-frame {
  position: relative;
  width: 100%;
  background: var(--arc-bg-0);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-md);
  overflow: hidden;
}
.arc-barcode-scanner-video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.arc-barcode-scanner-target {
  position: absolute;
  top: 18%;
  left: 12%;
  right: 12%;
  bottom: 18%;
  border: 2px solid rgba(67, 245, 161, 0.7);
  border-radius: var(--arc-radius-md);
  box-shadow: 0 0 0 9999px rgba(0, 0, 0, 0.35);
  pointer-events: none;
}
.arc-barcode-scanner-result {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 6px 12px;
  background: var(--arc-accent);
  color: var(--arc-bg-0);
  border-radius: var(--arc-radius-pill);
  font-family: var(--arc-font-mono);
  font-size: 12px;
}
.arc-barcode-scanner-result-format {
  text-transform: uppercase;
  font-size: 10px;
  letter-spacing: 0.06em;
  opacity: 0.85;
}
.arc-barcode-scanner-fallback {
  padding: 16px;
  background: var(--arc-bg-2);
  border: 1px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-md);
}
.arc-barcode-scanner-error {
  font-size: 13px;
  color: var(--arc-fg-3);
  font-style: italic;
  text-align: center;
}
.arc-barcode-scanner-actions {
  display: flex;
  justify-content: center;
  gap: 8px;
}

/* ===== Mobile UX sweep overrides ============================================
   Targeted fixes for /components mobile bugs. Each block notes the symptom
   it addresses. Keep this section close to the bottom so it always wins
   the cascade against earlier defaults. ===================================== */

/* --- Native <dialog> on mobile -----------------------------------------------
   The UA stylesheet pins dialog:modal to inset:0 + margin:auto. Our drawer
   anchors set right/top/bottom on the dialog but never override inset, so
   `dialog:modal` (higher specificity than `.arc-drawer-right`) keeps the
   drawer centered. Restate via inset for each anchor so the drawer actually
   pins. Same issue affects centered dialogs on iOS Safari — explicit inset
   keeps them centered consistently. */
dialog.arc-dialog[open] {
  inset: 0;
  margin: auto;
}
dialog.arc-drawer[open].arc-drawer-left   { inset: 0 auto 0 0; margin: 0; }
dialog.arc-drawer[open].arc-drawer-right  { inset: 0 0 0 auto; margin: 0; }
dialog.arc-drawer[open].arc-drawer-top    { inset: 0 0 auto 0; margin: 0; }
dialog.arc-drawer[open].arc-drawer-bottom { inset: auto 0 0 0; margin: 0; }
dialog.arc-image-preview-dialog[open] {
  inset: 0;
  margin: auto;
}

/* --- ArcToastHost positioning ------------------------------------------------
   Previously hardcoded to top-right. Add position modifier classes so the
   host can render in any corner or bottom-center. Default (no class) still
   pins to top-right for back-compat. Bottom-* variants are essential on
   mobile where users tend to look at the lower portion of the screen near
   the action they just triggered. */
.arc-toast-host {
  /* Reset the original hardcoded top/right; modifier classes restore them. */
  top: auto;
  right: auto;
  bottom: auto;
  left: auto;
}
/* Each position class fully specifies all four offsets — the base .arc-toast-host
   rule pins top/right for back-compat, so non-default corners must reset the other
   sides to auto or the fixed box becomes over-constrained and stretches. */
.arc-toast-host-top-right    { top: 20px; right: 20px; bottom: auto; left: auto; align-items: flex-end; }
.arc-toast-host-top-left     { top: 20px; left: 20px; bottom: auto; right: auto; align-items: flex-start; }
.arc-toast-host-bottom-right { bottom: 20px; right: 20px; top: auto; left: auto; align-items: flex-end; flex-direction: column-reverse; }
.arc-toast-host-bottom-left  { bottom: 20px; left: 20px; top: auto; right: auto; align-items: flex-start; flex-direction: column-reverse; }
.arc-toast-host-top-center {
  top: 20px;
  left: 50%;
  right: auto;
  bottom: auto;
  transform: translateX(-50%);
  align-items: center;
}
.arc-toast-host-bottom-center {
  bottom: 20px;
  left: 50%;
  right: auto;
  top: auto;
  transform: translateX(-50%);
  align-items: center;
  flex-direction: column-reverse;
}

/* --- AdvancedColumnFilter panel: clamp inside viewport on mobile -------------
   The panel anchors to the trigger's right edge (right:0) and grows leftward,
   which can push it off the left side of narrow viewports. Clamp width and
   on small screens drop to a near-fullwidth layout pinned to the right edge. */
.arc-advanced-column-filter-panel {
  max-width: calc(100vw - 24px);
}
@media (max-width: 640px) {
  .arc-advanced-column-filter-panel {
    min-width: 0;
    width: min(320px, calc(100vw - 24px));
  }
}

/* --- Heatmap + OrgChart + Spreadsheet + Carousel + Audio/Video Player: -------
   respect parent width inside cards. Each is a `display: flex; flex-direction:
   column;` outer container, and flex children default to `min-width: auto`
   (i.e. shrink only to fit content, not parent). Without an explicit
   min-width:0, a wide child (SVG, table, video frame, controls bar) pushes
   the outer wider than its card, and any inner *-scroll wrapper's overflow:auto
   never engages. This is the documented sweep-pattern for in-card overflow. */
.arc-heatmap,
.arc-org-chart,
.arc-spreadsheet,
.arc-carousel,
.arc-audio-player,
.arc-video-player {
  max-width: 100%;
  min-width: 0;
}
.arc-heatmap-scroll,
.arc-org-chart-scroll,
.arc-spreadsheet-scroll {
  max-width: 100%;
}

/* --- AudioPlayer + VideoPlayer controls: scroll horizontally when narrow ----
   The control bar is `display: flex; gap: 10px;` with play + time + progress
   + mute + speed + (download | fullscreen) — totals ~400px minimum even with
   the progress slider at its 80px min-width. On phones at 360-412px viewport
   width minus card padding, that overflows. Allow horizontal scroll within
   the bar so every control stays reachable via a swipe instead of bleeding
   the page width. Hide the scrollbar visually but keep the scroll behavior. */
.arc-audio-player-controls,
.arc-video-player-controls {
  overflow-x: auto;
  scrollbar-width: thin;
  -webkit-overflow-scrolling: touch;
}
.arc-audio-player-controls::-webkit-scrollbar,
.arc-video-player-controls::-webkit-scrollbar {
  height: 4px;
}
.arc-audio-player-controls::-webkit-scrollbar-thumb,
.arc-video-player-controls::-webkit-scrollbar-thumb {
  background: var(--arc-border-3);
  border-radius: 2px;
}

/* --- Carousel slides: clamp slide-content max-width to the viewport ---------
   Slides have `flex: 0 0 100%; min-width: 100%`, so they're sized to the
   carousel viewport — that part's fine. The risk is *content* inside a slide
   (an image, a wide div with a fixed-width inline style) blowing the slide.
   `min-width: 0` on the slide flex item lets content honor `max-width: 100%`. */
.arc-carousel-slide {
  min-width: 100%;
  max-width: 100%;
  overflow-x: auto;
}

/* --- Defensive media-element clamp inside /components demos -----------------
   The `.example-demo` wrapper on /components is a flex row. Once a <video>'s
   metadata loads, its intrinsic content size (the native video resolution)
   defeats `width: 100%` because flex `min-width: auto` uses that intrinsic
   measure. Same risk for <img>/<canvas>/<iframe> with intrinsic dimensions.
   Clamp these explicitly so they can't push past their container. Lives in
   arc-ui.css (not Components.razor's inline <style>) because Razor's parser
   trips on a bare `<iframe>` etc. in CSS selectors. */
.example-demo video,
.example-demo img,
.example-demo canvas,
.example-demo iframe {
  max-width: 100%;
  height: auto;
}

/* --- TimePicker: even widths when two are side-by-side in a flex row --------
   Without explicit min-width:0 the native <input type="time"> sizes to its
   placeholder content which differs slightly per platform — visually uneven.
   Forcing the field to flex-fill with a sane min keeps both pickers the same
   width in any flex row demo. */
.arc-time-picker {
  flex: 1 1 0;
  min-width: 140px;
}
.arc-time-picker .arc-time-picker-input {
  width: 100%;
  box-sizing: border-box;
}

/* --- QuickBar: touch-comfortable sizing on mobile ---------------------------
   The desktop sizes are too small to tap precisely on a phone. Bump padding
   + button hit areas below 640px so the bar is comfortably reachable. */
@media (max-width: 640px) {
  .arc-quick-bar { padding: 10px; gap: 10px; }
  .arc-quick-bar .arc-btn { min-height: 40px; padding: 8px 14px; }
  .arc-quick-bar-bottom-center {
    left: 12px;
    right: 12px;
    bottom: 12px;
    transform: none;
    justify-content: center;
  }
}

/* --- Resizable: visible touch-friendly handle on mobile ---------------------
   Native CSS `resize:both` works only with a mouse — iOS Safari ignores the
   drag handle entirely. Show an obvious bottom-right corner indicator so
   touch users at least see the affordance. (True touch-drag resizing needs
   a pointer-events handle in the component; the indicator is a stop-gap.) */
.arc-resizable {
  position: relative;
  -webkit-overflow-scrolling: touch;
}
.arc-resizable::after {
  content: '';
  position: absolute;
  right: 2px;
  bottom: 2px;
  width: 12px;
  height: 12px;
  background: linear-gradient(135deg,
    transparent 0%,
    transparent 40%,
    var(--arc-border-2) 40%,
    var(--arc-border-2) 45%,
    transparent 45%,
    transparent 55%,
    var(--arc-border-2) 55%,
    var(--arc-border-2) 60%,
    transparent 60%);
  pointer-events: none;
  opacity: 0.75;
}

/* --- /components demo layout primitives -------------------------------------
   `.demo-row` is the standard "lay these out side-by-side" container used in
   the catalog demos. `.demo-stack` is the vertical sibling. Both use flexbox
   so block-level components (inputs, viewers, cards) and inline ones (buttons,
   chips, badges) coexist predictably instead of relying on each child's
   default display mode.

   Mobile collapses `.demo-row` to a column so demos that pair a component
   with a "Selected: …" status label don't render the label crammed alongside
   a wider component below 640px. */
.demo-row {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: 12px;
}
.demo-stack {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
@media (max-width: 640px) {
  .demo-row {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }
  .demo-row > * { max-width: 100%; }
}

/* --- Carousel touch targets -------------------------------------------------
   32px arrow controls and 8px dots are below the WCAG 24-pixel touch-target
   minimum. On phones, bump arrows to 44px (Apple HIG target) and dots to
   16px so the controls are actually tappable. */
@media (max-width: 640px) {
  .arc-carousel-control { width: 44px; height: 44px; }
  .arc-carousel-control .arc-icon { width: 22px; height: 22px; }
  .arc-carousel-control-prev { left: 6px; }
  .arc-carousel-control-next { right: 6px; }
  .arc-carousel-dot { width: 14px; height: 14px; }
  .arc-carousel-dot-active { width: 28px; }
}

/* --- AudioPlayer / VideoPlayer touch targets --------------------------------
   The custom controls bar uses small icon buttons that are tap-unfriendly on
   mobile. Bump the bar's button hit area without changing the visual icon. */
@media (max-width: 640px) {
  .arc-audio-player-btn, .arc-video-player-btn {
    min-width: 40px;
    min-height: 40px;
  }
}

/* --- ImagePreview lightbox: ensure the close × is reachable on tall mobiles -*/
@media (max-width: 640px) {
  .arc-image-preview-close {
    top: -32px;
    right: -2px;
    width: 36px;
    height: 36px;
  }
  .arc-image-preview-close .arc-icon { width: 20px; height: 20px; }
}

/* --- QR code: don't let the frame exceed the viewport width on small phones */
@media (max-width: 480px) {
  .arc-qr-code-frame {
    max-width: calc(100vw - 56px);
    height: auto !important;
    aspect-ratio: 1 / 1;
  }
}


/* ── ArcCalendarPlanner ──────────────────────────────────────────────────────────
   Event calendar with month / week / day views. The CSS lays out three view
   shells; events are positioned absolutely in week/day views (top/height from
   per-event percentages computed in C#) and laid out as inline chips in month.
   --------------------------------------------------------------------------- */
.arc-calendar-planner {
    display: flex;
    flex-direction: column;
    gap: 16px;
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-3);
    background: var(--arc-bg-1);
    padding: 16px;
    min-width: 0;
}
.arc-calendar-planner-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 12px;
}
.arc-calendar-planner-nav {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 0;
}
.arc-calendar-planner-title {
    margin: 0;
    font-size: 18px;
    font-weight: 600;
    color: var(--arc-fg-1);
    letter-spacing: -0.01em;
    white-space: nowrap;
    /* Shrinkable flex item: on narrow viewports the date-range title ellipsizes
       instead of pushing the toolbar past its container. */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
}
.arc-calendar-planner-nav-btn {
    width: 28px;
    height: 28px;
    background: transparent;
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-1);
    color: var(--arc-fg-2);
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    flex-shrink: 0;
}
.arc-calendar-planner-nav-btn:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.arc-calendar-planner-views {
    display: inline-flex;
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-2);
    overflow: hidden;
}
.arc-calendar-planner-view-btn {
    padding: 6px 14px;
    background: transparent;
    border: 0;
    border-right: 1px solid var(--arc-border-2);
    color: var(--arc-fg-2);
    cursor: pointer;
    font-size: 12.5px;
    font-weight: 500;
}
.arc-calendar-planner-view-btn:last-child { border-right: 0; }
.arc-calendar-planner-view-btn:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.arc-calendar-planner-view-btn-active {
    background: var(--arc-accent);
    color: var(--arc-fg-on-accent);
}
.arc-calendar-planner-view-btn-active:hover { background: var(--arc-accent-hi); color: var(--arc-fg-on-accent); }
.arc-calendar-planner-body { min-width: 0; }

/* ── Month view ─── */
.arc-calendar-month {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 1px;
    background: var(--arc-border-2);
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-2);
    overflow: hidden;
}
.arc-calendar-month-weekday {
    background: var(--arc-bg-2);
    padding: 8px;
    font-size: 11px;
    font-weight: 600;
    color: var(--arc-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: center;
}
.arc-calendar-month-cell {
    background: var(--arc-bg-1);
    padding: 6px;
    min-height: 88px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 3px;
    transition: background-color var(--arc-dur-fast) var(--arc-ease);
    min-width: 0;
}
.arc-calendar-month-cell:hover { background: var(--arc-bg-2); }
.arc-calendar-month-cell-other .arc-calendar-month-daynum { color: var(--arc-fg-3); opacity: 0.5; }
.arc-calendar-month-cell-today { background: var(--arc-accent-dim); }
.arc-calendar-month-cell-today:hover { background: var(--arc-accent-soft); }
.arc-calendar-month-cell-droptarget {
    outline: 2px solid var(--arc-accent);
    outline-offset: -2px;
    z-index: 1;
}
.arc-calendar-month-daynum {
    font-size: 13px;
    font-weight: 500;
    color: var(--arc-fg-1);
    line-height: 1;
}
.arc-calendar-event-chip {
    background: var(--arc-accent);
    border: 1px solid var(--arc-accent);
    border-radius: var(--arc-radius-1);
    color: var(--arc-fg-on-accent);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    width: 100%;
    min-width: 0;
}
.arc-calendar-event-chip:hover { opacity: 0.9; }
.arc-calendar-event-chip-title { display: block; overflow: hidden; text-overflow: ellipsis; }
/* All-day chips in the month grid read as banners: bolder, and flattened on the side(s)
   where the span continues into the neighboring day cell. */
.arc-calendar-event-chip-allday { font-weight: 600; }
.arc-calendar-event-chip-cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; }
.arc-calendar-event-chip-cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; }
.arc-calendar-event-more {
    font-size: 10.5px;
    color: var(--arc-fg-3);
    padding-left: 4px;
    font-weight: 500;
}

/* Interactive affordances — applied only when the matching callback is wired (HasDelegate),
   so a planner without the handler shows no misleading pointer/hover. */
.arc-calendar-event-more-clickable { cursor: pointer; }
.arc-calendar-event-more-clickable:hover { color: var(--arc-fg-1); text-decoration: underline; }
.arc-calendar-week-dayhead-clickable,
.arc-calendar-day-dayhead-clickable,
.arc-calendar-day-lanehead-clickable { cursor: pointer; }
.arc-calendar-week-dayhead-clickable:hover,
.arc-calendar-day-dayhead-clickable:hover,
.arc-calendar-day-lanehead-clickable:hover { background: var(--arc-bg-2); }


/* ── ArcGrid — responsive 12-column layout grid ───────────────────────────────
   Mobile-first: an item's xs span applies everywhere until a larger breakpoint
   overrides it (sm ≥600, md ≥960, lg ≥1280, xl ≥1920 — MudBlazor-compatible
   thresholds, deliberately independent of the site's own page breakpoints).
   Spans set grid-column-end so they compose with offsets (grid-column-start);
   an offset of 0 at a larger breakpoint cancels a smaller breakpoint's offset. */
.arc-grid {
  display: grid;
  grid-template-columns: repeat(12, minmax(0, 1fr));
  align-items: stretch;
}
.arc-grid-item { min-width: 0; grid-column-end: span 12; }
.arc-grid-item-xs-1 { grid-column-end: span 1; }
.arc-grid-item-xs-2 { grid-column-end: span 2; }
.arc-grid-item-xs-3 { grid-column-end: span 3; }
.arc-grid-item-xs-4 { grid-column-end: span 4; }
.arc-grid-item-xs-5 { grid-column-end: span 5; }
.arc-grid-item-xs-6 { grid-column-end: span 6; }
.arc-grid-item-xs-7 { grid-column-end: span 7; }
.arc-grid-item-xs-8 { grid-column-end: span 8; }
.arc-grid-item-xs-9 { grid-column-end: span 9; }
.arc-grid-item-xs-10 { grid-column-end: span 10; }
.arc-grid-item-xs-11 { grid-column-end: span 11; }
.arc-grid-item-xs-12 { grid-column-end: span 12; }
.arc-grid-item-offset-xs-0 { grid-column-start: 1; }
.arc-grid-item-offset-xs-1 { grid-column-start: 2; }
.arc-grid-item-offset-xs-2 { grid-column-start: 3; }
.arc-grid-item-offset-xs-3 { grid-column-start: 4; }
.arc-grid-item-offset-xs-4 { grid-column-start: 5; }
.arc-grid-item-offset-xs-5 { grid-column-start: 6; }
.arc-grid-item-offset-xs-6 { grid-column-start: 7; }
.arc-grid-item-offset-xs-7 { grid-column-start: 8; }
.arc-grid-item-offset-xs-8 { grid-column-start: 9; }
.arc-grid-item-offset-xs-9 { grid-column-start: 10; }
.arc-grid-item-offset-xs-10 { grid-column-start: 11; }
.arc-grid-item-offset-xs-11 { grid-column-start: 12; }
@media (min-width: 600px) {
  .arc-grid-item-sm-1 { grid-column-end: span 1; }
  .arc-grid-item-sm-2 { grid-column-end: span 2; }
  .arc-grid-item-sm-3 { grid-column-end: span 3; }
  .arc-grid-item-sm-4 { grid-column-end: span 4; }
  .arc-grid-item-sm-5 { grid-column-end: span 5; }
  .arc-grid-item-sm-6 { grid-column-end: span 6; }
  .arc-grid-item-sm-7 { grid-column-end: span 7; }
  .arc-grid-item-sm-8 { grid-column-end: span 8; }
  .arc-grid-item-sm-9 { grid-column-end: span 9; }
  .arc-grid-item-sm-10 { grid-column-end: span 10; }
  .arc-grid-item-sm-11 { grid-column-end: span 11; }
  .arc-grid-item-sm-12 { grid-column-end: span 12; }
  .arc-grid-item-offset-sm-0 { grid-column-start: 1; }
  .arc-grid-item-offset-sm-1 { grid-column-start: 2; }
  .arc-grid-item-offset-sm-2 { grid-column-start: 3; }
  .arc-grid-item-offset-sm-3 { grid-column-start: 4; }
  .arc-grid-item-offset-sm-4 { grid-column-start: 5; }
  .arc-grid-item-offset-sm-5 { grid-column-start: 6; }
  .arc-grid-item-offset-sm-6 { grid-column-start: 7; }
  .arc-grid-item-offset-sm-7 { grid-column-start: 8; }
  .arc-grid-item-offset-sm-8 { grid-column-start: 9; }
  .arc-grid-item-offset-sm-9 { grid-column-start: 10; }
  .arc-grid-item-offset-sm-10 { grid-column-start: 11; }
  .arc-grid-item-offset-sm-11 { grid-column-start: 12; }
}
@media (min-width: 960px) {
  .arc-grid-item-md-1 { grid-column-end: span 1; }
  .arc-grid-item-md-2 { grid-column-end: span 2; }
  .arc-grid-item-md-3 { grid-column-end: span 3; }
  .arc-grid-item-md-4 { grid-column-end: span 4; }
  .arc-grid-item-md-5 { grid-column-end: span 5; }
  .arc-grid-item-md-6 { grid-column-end: span 6; }
  .arc-grid-item-md-7 { grid-column-end: span 7; }
  .arc-grid-item-md-8 { grid-column-end: span 8; }
  .arc-grid-item-md-9 { grid-column-end: span 9; }
  .arc-grid-item-md-10 { grid-column-end: span 10; }
  .arc-grid-item-md-11 { grid-column-end: span 11; }
  .arc-grid-item-md-12 { grid-column-end: span 12; }
  .arc-grid-item-offset-md-0 { grid-column-start: 1; }
  .arc-grid-item-offset-md-1 { grid-column-start: 2; }
  .arc-grid-item-offset-md-2 { grid-column-start: 3; }
  .arc-grid-item-offset-md-3 { grid-column-start: 4; }
  .arc-grid-item-offset-md-4 { grid-column-start: 5; }
  .arc-grid-item-offset-md-5 { grid-column-start: 6; }
  .arc-grid-item-offset-md-6 { grid-column-start: 7; }
  .arc-grid-item-offset-md-7 { grid-column-start: 8; }
  .arc-grid-item-offset-md-8 { grid-column-start: 9; }
  .arc-grid-item-offset-md-9 { grid-column-start: 10; }
  .arc-grid-item-offset-md-10 { grid-column-start: 11; }
  .arc-grid-item-offset-md-11 { grid-column-start: 12; }
}
@media (min-width: 1280px) {
  .arc-grid-item-lg-1 { grid-column-end: span 1; }
  .arc-grid-item-lg-2 { grid-column-end: span 2; }
  .arc-grid-item-lg-3 { grid-column-end: span 3; }
  .arc-grid-item-lg-4 { grid-column-end: span 4; }
  .arc-grid-item-lg-5 { grid-column-end: span 5; }
  .arc-grid-item-lg-6 { grid-column-end: span 6; }
  .arc-grid-item-lg-7 { grid-column-end: span 7; }
  .arc-grid-item-lg-8 { grid-column-end: span 8; }
  .arc-grid-item-lg-9 { grid-column-end: span 9; }
  .arc-grid-item-lg-10 { grid-column-end: span 10; }
  .arc-grid-item-lg-11 { grid-column-end: span 11; }
  .arc-grid-item-lg-12 { grid-column-end: span 12; }
  .arc-grid-item-offset-lg-0 { grid-column-start: 1; }
  .arc-grid-item-offset-lg-1 { grid-column-start: 2; }
  .arc-grid-item-offset-lg-2 { grid-column-start: 3; }
  .arc-grid-item-offset-lg-3 { grid-column-start: 4; }
  .arc-grid-item-offset-lg-4 { grid-column-start: 5; }
  .arc-grid-item-offset-lg-5 { grid-column-start: 6; }
  .arc-grid-item-offset-lg-6 { grid-column-start: 7; }
  .arc-grid-item-offset-lg-7 { grid-column-start: 8; }
  .arc-grid-item-offset-lg-8 { grid-column-start: 9; }
  .arc-grid-item-offset-lg-9 { grid-column-start: 10; }
  .arc-grid-item-offset-lg-10 { grid-column-start: 11; }
  .arc-grid-item-offset-lg-11 { grid-column-start: 12; }
}
@media (min-width: 1920px) {
  .arc-grid-item-xl-1 { grid-column-end: span 1; }
  .arc-grid-item-xl-2 { grid-column-end: span 2; }
  .arc-grid-item-xl-3 { grid-column-end: span 3; }
  .arc-grid-item-xl-4 { grid-column-end: span 4; }
  .arc-grid-item-xl-5 { grid-column-end: span 5; }
  .arc-grid-item-xl-6 { grid-column-end: span 6; }
  .arc-grid-item-xl-7 { grid-column-end: span 7; }
  .arc-grid-item-xl-8 { grid-column-end: span 8; }
  .arc-grid-item-xl-9 { grid-column-end: span 9; }
  .arc-grid-item-xl-10 { grid-column-end: span 10; }
  .arc-grid-item-xl-11 { grid-column-end: span 11; }
  .arc-grid-item-xl-12 { grid-column-end: span 12; }
  .arc-grid-item-offset-xl-0 { grid-column-start: 1; }
  .arc-grid-item-offset-xl-1 { grid-column-start: 2; }
  .arc-grid-item-offset-xl-2 { grid-column-start: 3; }
  .arc-grid-item-offset-xl-3 { grid-column-start: 4; }
  .arc-grid-item-offset-xl-4 { grid-column-start: 5; }
  .arc-grid-item-offset-xl-5 { grid-column-start: 6; }
  .arc-grid-item-offset-xl-6 { grid-column-start: 7; }
  .arc-grid-item-offset-xl-7 { grid-column-start: 8; }
  .arc-grid-item-offset-xl-8 { grid-column-start: 9; }
  .arc-grid-item-offset-xl-9 { grid-column-start: 10; }
  .arc-grid-item-offset-xl-10 { grid-column-start: 11; }
  .arc-grid-item-offset-xl-11 { grid-column-start: 12; }
}

/* ── Week view ─── */
.arc-calendar-week {
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-2);
    /* overflow-x: auto lets the grid horizontally scroll on narrow viewports
       instead of squishing day columns to single-character widths. min-width
       on the inner grid sections ensures the columns stay readable; consumers
       on mobile can swipe to see the full week. */
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--arc-bg-1);
}
.arc-calendar-week-header,
.arc-calendar-week-allday,
.arc-calendar-week-body {
    /* Each day column needs ~80px to render an event chip + time label
       readably; 56px time column + 7×80px ≈ 616px floor. All three grid
       sections share the floor so their columns stay aligned while the
       outer container scrolls. */
    min-width: 616px;
}
.arc-calendar-week-allday {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    border-bottom: 1px solid var(--arc-border-2);
    background: var(--arc-bg-1);
}
.arc-calendar-week-allday-corner {
    padding: 4px 6px;
    font-size: 10px;
    color: var(--arc-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: right;
    align-self: center;
}
.arc-calendar-week-allday-cell {
    border-left: 1px solid var(--arc-border-2);
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 26px;
}
.arc-calendar-event-banner {
    background: var(--arc-accent);
    border: 1px solid var(--arc-accent);
    border-radius: var(--arc-radius-1);
    color: var(--arc-fg-on-accent);
    padding: 2px 6px;
    font-size: 11px;
    font-weight: 600;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    text-align: left;
    cursor: pointer;
    min-width: 0;
}
.arc-calendar-event-banner:hover { opacity: 0.9; }
/* Continuation edges: a banner that flows in from / out to an adjacent day flattens the
   shared corner and bleeds over the cell border so consecutive days read as one band. */
.arc-calendar-event-banner-cont-left { border-top-left-radius: 0; border-bottom-left-radius: 0; margin-left: -3px; }
.arc-calendar-event-banner-cont-right { border-top-right-radius: 0; border-bottom-right-radius: 0; margin-right: -2px; }
.arc-calendar-week-header {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-2);
}
.arc-calendar-week-corner { padding: 8px; }
.arc-calendar-week-dayhead {
    padding: 8px;
    text-align: center;
    border-left: 1px solid var(--arc-border-2);
    min-width: 0;
}
.arc-calendar-week-dayname { font-size: 11px; color: var(--arc-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.arc-calendar-week-daynum { font-size: 18px; font-weight: 600; color: var(--arc-fg-1); margin-top: 2px; }
.arc-calendar-week-dayhead-today .arc-calendar-week-daynum { color: var(--arc-accent); }
.arc-calendar-week-body {
    display: grid;
    grid-template-columns: 56px repeat(7, minmax(0, 1fr));
    --arc-cal-row-h: 48px;
}
.arc-calendar-week-timecol {
    display: flex;
    flex-direction: column;
}
.arc-calendar-week-hour-label {
    height: var(--arc-cal-row-h);
    border-top: 1px solid var(--arc-border-2);
    padding: 2px 6px;
    font-size: 10.5px;
    color: var(--arc-fg-3);
    text-align: right;
    box-sizing: border-box;
}
.arc-calendar-week-timecol .arc-calendar-week-hour-label:first-child { border-top: 0; }
.arc-calendar-week-daycol {
    position: relative;
    border-left: 1px solid var(--arc-border-2);
    min-width: 0;
}
.arc-calendar-week-daycol-today { background: var(--arc-accent-dim); }
.arc-calendar-week-daycol-droptarget {
    background: var(--arc-accent-soft);
}
.arc-calendar-week-slot {
    /* Sub-hour granularity: --arc-cal-slot-h is the SlotMinutes-tall row; falls back to the full
       hour height so the classic 1-hour grid renders unchanged. */
    height: var(--arc-cal-slot-h, var(--arc-cal-row-h));
    border-top: 1px solid var(--arc-border-2);
    cursor: pointer;
    transition: background-color var(--arc-dur-fast) var(--arc-ease);
}
/* Within-hour divisions read fainter than the solid hour lines so the hour boundaries still anchor the eye. */
.arc-calendar-week-slot-subhour { border-top-style: dotted; border-top-color: var(--arc-border-1); }
.arc-calendar-week-daycol .arc-calendar-week-slot:first-child { border-top: 0; }
.arc-calendar-week-slot:hover { background: var(--arc-bg-2); }
.arc-calendar-event-box {
    position: absolute;
    left: 2px;
    right: 2px;
    /* Short events stay clickable: a 15-minute slot at 48px/hour is 12px tall. */
    min-height: 18px;
    background: var(--arc-accent);
    border: 1px solid var(--arc-accent);
    border-radius: var(--arc-radius-1);
    color: var(--arc-fg-on-accent);
    padding: 4px 6px;
    text-align: left;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    gap: 2px;
    overflow: hidden;
    min-width: 0;
    z-index: 2;
}
.arc-calendar-event-box:hover { opacity: 0.92; }
.arc-calendar-event-box-title { font-size: 12px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.arc-calendar-event-box-time { font-size: 10.5px; opacity: 0.85; }
/* Clipped edges: the event continues before/after the visible window (or day) — the dashed
   edge says "there's more", so a 6 AM start in a 7 AM window isn't mistaken for a 7 AM event. */
.arc-calendar-event-box-clipped-top { border-top-style: dashed; border-top-left-radius: 0; border-top-right-radius: 0; }
.arc-calendar-event-box-clipped-bottom { border-bottom-style: dashed; border-bottom-left-radius: 0; border-bottom-right-radius: 0; }

/* "Now" indicator — a thin line (with a dot at the left edge) drawn across today's column at the
   current local time. Positioned absolutely inside a positioned day/lane column. */
.arc-calendar-now-line {
    position: absolute;
    left: 0;
    right: 0;
    height: 0;
    border-top: 2px solid var(--arc-danger);
    z-index: 3;
    pointer-events: none;
}
.arc-calendar-now-dot {
    position: absolute;
    left: -1px;
    top: -4px;
    width: 7px;
    height: 7px;
    border-radius: 50%;
    background: var(--arc-danger);
}
/* Off-hours shading — slots outside the configured working-hours window read dimmer so the work day stands out. */
.arc-calendar-week-slot-offhours,
.arc-calendar-day-slot-offhours {
    background-color: color-mix(in srgb, var(--arc-fg-3) 8%, transparent);
}

/* ── Week view · resource grouping (day × resource grid) ─── */
.arc-calendar-weekg {
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-2);
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--arc-bg-1);
}
.arc-calendar-weekg-dayrow,
.arc-calendar-weekg-lanerow,
.arc-calendar-weekg-allday,
.arc-calendar-weekg-body {
    display: grid;
    /* One column per (day × resource); the minmax floor keeps sub-columns readable and lets the
       view scroll horizontally on narrow screens / many people. */
    grid-template-columns: 56px repeat(var(--arc-cal-cols, 7), minmax(var(--arc-cal-lane-min, 116px), 1fr));
    min-width: 360px;
}
.arc-calendar-weekg-dayrow,
.arc-calendar-weekg-lanerow {
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-2);
}
.arc-calendar-weekg-allday {
    border-bottom: 1px solid var(--arc-border-2);
    background: var(--arc-bg-1);
}
/* Heavier separator at each day boundary so the resource sub-columns read as grouped under their day. */
.arc-calendar-weekg-dayfirst { border-left: 2px solid var(--arc-border-1); }

/* ── Day view ─── */
/* Note: outer container uses `.arc-calendar-day-view`, not `.arc-calendar-day`.
   The latter is the date-picker's per-day button (36×36px rounded button) and
   leaks `width: 36px; height: 36px; display: inline-flex` into anything that
   shares the class, compressing this entire schedule grid into a button cell.
   The inner classes (`.arc-calendar-day-header`, `-body`, `-timecol`, etc.) are
   day-view-only and don't collide. */
.arc-calendar-day-view {
    border: 1px solid var(--arc-border-2);
    border-radius: var(--arc-radius-2);
    overflow-x: auto;
    overflow-y: hidden;
    background: var(--arc-bg-1);
}
.arc-calendar-day-view .arc-calendar-day-header,
.arc-calendar-day-view .arc-calendar-day-body {
    min-width: 320px;  /* readable single-day schedule on a 360px phone */
}
.arc-calendar-day-header {
    display: grid;
    /* One column per lane when --arc-cal-lanes is set (resource mode); the
       minmax floor keeps multi-lane schedules readable and lets the view's
       overflow-x scroll on narrow screens. Classic mode resolves to 56px 1fr. */
    grid-template-columns: 56px repeat(var(--arc-cal-lanes, 1), minmax(var(--arc-cal-lane-min, 0px), 1fr));
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-2);
}
.arc-calendar-day-lanehead {
    display: flex;
    align-items: center;
    gap: 7px;
    border-left: 1px solid var(--arc-border-2);
}
.arc-calendar-lane-dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    flex-shrink: 0;
}
.arc-calendar-lane-label {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.arc-calendar-day-allday {
    display: grid;
    grid-template-columns: 56px repeat(var(--arc-cal-lanes, 1), minmax(var(--arc-cal-lane-min, 0px), 1fr));
    border-bottom: 1px solid var(--arc-border-2);
    background: var(--arc-bg-1);
    min-width: 320px;
}
.arc-calendar-day-allday-corner {
    padding: 4px 6px;
    font-size: 10px;
    color: var(--arc-fg-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    text-align: right;
    align-self: center;
}
.arc-calendar-day-allday-cell {
    border-left: 1px solid var(--arc-border-2);
    padding: 2px;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-width: 0;
    min-height: 26px;
}
.arc-calendar-day-corner { padding: 8px; }
.arc-calendar-day-dayhead {
    padding: 12px 16px;
    border-left: 1px solid var(--arc-border-2);
}
.arc-calendar-day-dayname { font-size: 11px; color: var(--arc-fg-3); text-transform: uppercase; letter-spacing: 0.06em; font-weight: 600; }
.arc-calendar-day-daydate { font-size: 18px; font-weight: 600; color: var(--arc-fg-1); margin-top: 2px; }
.arc-calendar-day-dayhead-today .arc-calendar-day-daydate { color: var(--arc-accent); }
.arc-calendar-day-body {
    display: grid;
    grid-template-columns: 56px repeat(var(--arc-cal-lanes, 1), minmax(var(--arc-cal-lane-min, 0px), 1fr));
    --arc-cal-row-h: 64px;
}
.arc-calendar-day-timecol {
    display: flex;
    flex-direction: column;
}
.arc-calendar-day-hour-label {
    height: var(--arc-cal-row-h);
    border-top: 1px solid var(--arc-border-2);
    padding: 2px 6px;
    font-size: 10.5px;
    color: var(--arc-fg-3);
    text-align: right;
    box-sizing: border-box;
}
.arc-calendar-day-timecol .arc-calendar-day-hour-label:first-child { border-top: 0; }
.arc-calendar-day-col {
    position: relative;
    border-left: 1px solid var(--arc-border-2);
}
.arc-calendar-day-slot {
    /* Sub-hour granularity: --arc-cal-slot-h is the SlotMinutes-tall row; falls back to the full
       hour height so the classic 1-hour grid renders unchanged. */
    height: var(--arc-cal-slot-h, var(--arc-cal-row-h));
    border-top: 1px solid var(--arc-border-2);
    cursor: pointer;
    transition: background-color var(--arc-dur-fast) var(--arc-ease);
}
/* Within-hour divisions read fainter than the solid hour lines so the hour boundaries still anchor the eye. */
.arc-calendar-day-slot-subhour { border-top-style: dotted; border-top-color: var(--arc-border-1); }
.arc-calendar-day-col .arc-calendar-day-slot:first-child { border-top: 0; }
.arc-calendar-day-slot:hover { background: var(--arc-bg-2); }

/* ===== ArcChart family — Line / Area / Bar / HorizontalBar / Scatter / Pie / Donut ===== */

/* Outer wrapper — drives layout, hosts title + body. The {Width;Height} inline-styles
   come from component parameters. Body is a flex container so the legend can wrap
   around the SVG on any side. */
.arc-chart {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--arc-font);
    color: var(--arc-fg-1);
    /* default sizing — overridable via Width/Height parameters */
    min-height: 200px;
}
.arc-chart-title {
    font-size: 14px;
    font-weight: 600;
    color: var(--arc-fg-2);
    text-align: center;
}
.arc-chart-body {
    display: flex;
    gap: 12px;
    flex: 1 1 auto;
    min-height: 0;
}
.arc-chart-svg {
    flex: 1 1 auto;
    width: 100%;
    height: 100%;
    min-height: 0;
    display: block;
}
.arc-chart-svg-circular {
    /* pie / donut — keep square so the circle stays a circle */
    aspect-ratio: 1 / 1;
    max-height: 100%;
}
.arc-chart-svg-wrap {
    position: relative;
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 0;
}
.arc-chart-donut-center {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 2px;
    pointer-events: none;
    font-size: 13px;
    color: var(--arc-fg-2);
}
.arc-chart-donut-center strong {
    font-size: 22px;
    color: var(--arc-fg-1);
    font-weight: 600;
}

/* SVG-element styles. Strokes/fills inherit from the data palette via attributes;
   sizes/colors for axes + gridlines come from theme tokens. */
.arc-chart-grid-line { stroke: var(--arc-border-2); stroke-width: 1; stroke-dasharray: 2 3; }
.arc-chart-axis-line { stroke: var(--arc-border-1); stroke-width: 1; }
.arc-chart-tick-label {
    fill: var(--arc-fg-3);
    font-size: 10px;
    font-family: var(--arc-font);
}
/* text-anchor is set as an SVG attribute by the SvgText helper in ArcChartBase. */

.arc-chart-line { transition: stroke-width var(--arc-dur-fast) var(--arc-ease); }
.arc-chart-marker { transition: r var(--arc-dur-fast) var(--arc-ease); }
.arc-chart-marker:hover { r: 5; }
.arc-chart-area-fill { transition: fill-opacity var(--arc-dur-fast) var(--arc-ease); }
.arc-chart-bar { transition: filter var(--arc-dur-fast) var(--arc-ease); }
.arc-chart-bar:hover { filter: brightness(1.1); }
.arc-chart-scatter-point { transition: r var(--arc-dur-fast) var(--arc-ease); }
.arc-chart-scatter-point:hover { r: 6; }
.arc-chart-pie-slice {
    stroke: var(--arc-bg-1);
    stroke-width: 1;
    transition: filter var(--arc-dur-fast) var(--arc-ease);
}
.arc-chart-pie-slice:hover { filter: brightness(1.1); }
.arc-chart-pie-empty { fill: var(--arc-bg-2); stroke: var(--arc-border-2); }

/* Legend. Position class on the outer .arc-chart flips body flex direction so
   legend lands top / bottom / left / right of the plot. */
.arc-chart-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 4px 12px;
    font-size: 12px;
    color: var(--arc-fg-2);
    align-items: center;
    justify-content: center;
}
.arc-chart-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.arc-chart-legend-swatch {
    display: inline-block;
    width: 10px;
    height: 10px;
    border-radius: 2px;
    flex-shrink: 0;
}
.arc-chart-legend-label { white-space: nowrap; }

.arc-chart-legend-top .arc-chart-body,
.arc-chart-legend-bottom .arc-chart-body {
    flex-direction: column;
}
.arc-chart-legend-top .arc-chart-legend { order: -1; }
.arc-chart-legend-left .arc-chart-body { flex-direction: row-reverse; }
.arc-chart-legend-left .arc-chart-legend,
.arc-chart-legend-right .arc-chart-legend {
    flex-direction: column;
    align-items: flex-start;
    max-width: 30%;
    align-self: center;
}
.arc-chart-legend-none .arc-chart-legend { display: none; }

/* ===== ArcDocumentEditor — full-document editor (sibling to ArcRichTextEditor) ===== */

/* Wrapper — stacks label / toolbar / page / help vertically. The page itself
   centers inside the wrapper with a chrome-gray backdrop so the surface reads
   as a piece of paper. */
.arc-doc-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
    font-family: var(--arc-font);
    color: var(--arc-fg-1);
}

.arc-doc-editor-toolbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 2px;
    padding: 6px 8px;
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    background: var(--arc-bg-2);
}
.arc-doc-editor-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 13px;
    color: var(--arc-fg-1);
    transition: background-color var(--arc-dur-fast) var(--arc-ease),
                border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-doc-editor-button:hover {
    background: var(--arc-bg-1);
    border-color: var(--arc-border-2);
}
.arc-doc-editor-button:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.arc-doc-editor-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 6px;
    background: var(--arc-border-1);
}

/* The "page" — a soft-edged container around the editable surface. Backdrop is
   the canvas color (slightly off-white in light mode, near-black in dark). */
.arc-doc-editor-page {
    background: var(--arc-bg-3, var(--arc-bg-2));
    padding: 16px;
    border-radius: var(--arc-radius);
    overflow: auto;
    display: flex;
    justify-content: center;
}
.arc-doc-editor-surface {
    background: var(--arc-bg-1);
    color: var(--arc-fg-1);
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
    width: 100%;
    padding: 48px 56px;
    overflow-y: auto;
    outline: none;
    line-height: 1.6;
    font-size: 15px;
}
.arc-doc-editor-surface:focus {
    border-color: var(--arc-accent);
    box-shadow: 0 0 0 3px var(--arc-accent-2, rgba(59, 130, 246, 0.18)),
                0 2px 8px rgba(0, 0, 0, 0.06);
}
.arc-doc-editor-surface[data-placeholder]:empty::before {
    content: attr(data-placeholder);
    color: var(--arc-fg-3);
    pointer-events: none;
}

/* In-document element styling — headings, paragraphs, lists, blockquotes,
   tables. Scoped to the surface so it doesn't leak into the rest of the app. */
.arc-doc-editor-surface h1 { font-size: 28px; font-weight: 700; margin: 1.2em 0 0.4em; }
.arc-doc-editor-surface h2 { font-size: 22px; font-weight: 600; margin: 1em 0 0.3em; }
.arc-doc-editor-surface h3 { font-size: 18px; font-weight: 600; margin: 0.8em 0 0.25em; }
.arc-doc-editor-surface p  { margin: 0.4em 0; }
.arc-doc-editor-surface ul, .arc-doc-editor-surface ol { margin: 0.4em 0 0.4em 1.5em; }
.arc-doc-editor-surface blockquote {
    margin: 0.6em 0;
    padding-left: 12px;
    border-left: 3px solid var(--arc-border-1);
    color: var(--arc-fg-2);
}
.arc-doc-editor-surface a {
    color: var(--arc-accent);
    text-decoration: underline;
}
.arc-doc-editor-surface hr {
    border: 0;
    border-top: 1px solid var(--arc-border-2);
    margin: 1em 0;
}
.arc-doc-editor-surface .arc-doc-editor-table,
.arc-doc-editor-surface table {
    border-collapse: collapse;
    margin: 0.8em 0;
    width: 100%;
}
.arc-doc-editor-surface .arc-doc-editor-table td,
.arc-doc-editor-surface table td,
.arc-doc-editor-surface table th {
    border: 1px solid var(--arc-border-2);
    padding: 6px 10px;
    min-width: 60px;
    vertical-align: top;
}

.arc-doc-editor-disabled .arc-doc-editor-surface {
    background: var(--arc-bg-2);
    cursor: not-allowed;
}

/* Print stylesheet — hide chrome so only the document surface ends up on paper. */
@media print {
    .arc-doc-editor-toolbar { display: none !important; }
    .arc-doc-editor-page {
        background: transparent !important;
        padding: 0 !important;
        overflow: visible !important;
    }
    .arc-doc-editor-surface {
        box-shadow: none !important;
        border: none !important;
        padding: 0 !important;
        height: auto !important;
        overflow: visible !important;
    }
}

/* ===== ArcPdfViewer — thin chrome around PDF.js ===== */

/* Wrapper is a flex column: toolbar on top, canvas-wrap fills the rest. The
   canvas-wrap is the scrollable region — PDF.js paints into a sized canvas
   that may exceed the wrap's dimensions; the wrap clips + scrolls. */
.arc-pdf-viewer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    background: var(--arc-bg-2);
    overflow: hidden;
    font-family: var(--arc-font);
    color: var(--arc-fg-1);
}

.arc-pdf-toolbar {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 6px 8px;
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-1);
    flex-wrap: wrap;
}

.arc-pdf-button {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 30px;
    padding: 0 8px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 14px;
    color: var(--arc-fg-1);
    text-decoration: none;
    transition: background-color var(--arc-dur-fast) var(--arc-ease),
                border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-pdf-button:hover {
    background: var(--arc-bg-1);
    border-color: var(--arc-border-2);
}
.arc-pdf-button:disabled,
.arc-pdf-button[disabled] {
    opacity: 0.4;
    cursor: not-allowed;
    pointer-events: none;
}

.arc-pdf-toolbar-sep {
    display: inline-block;
    width: 1px;
    height: 18px;
    margin: 0 4px;
    background: var(--arc-border-1);
}

.arc-pdf-page-indicator,
.arc-pdf-zoom-indicator {
    font-size: 13px;
    color: var(--arc-fg-2);
    padding: 0 6px;
    font-variant-numeric: tabular-nums;
}

.arc-pdf-canvas-wrap {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    background: var(--arc-bg-3, var(--arc-bg-2));
    display: flex;
    align-items: flex-start;
    justify-content: center;
    padding: 12px;
}
/* Continuous mode (U5.5b) — pages stack vertically, JS creates them dynamically
   inside the wrap. Switch to a column flexbox so each page sits on its own row
   and the scroll bar reflects the full document height. */
.arc-pdf-canvas-wrap.arc-pdf-continuous {
    flex-direction: column;
    align-items: center;
}

/* "Page" wrapper introduced in U5.5b alongside the text layer. Keeps the canvas
   + text-layer overlay aligned on a single positioning root so they don't drift
   apart when the scroll wrap moves. */
.arc-pdf-page {
    position: relative;
    line-height: 0;
    background: var(--arc-bg-1);
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}
.arc-pdf-canvas {
    display: block;
    /* PDF.js sizes the canvas — keep CSS hands-off width/height here. */
    max-width: 100%;
}
/* Selectable-text overlay (U5.5b). The text inside is transparent so the canvas
   shows through; selection highlight remains visible because user-select still
   works on transparent text. PDF.js stamps each text item as a positioned <span>
   inside this container — we don't touch the content, only the visual styling. */
.arc-pdf-text-layer {
    position: absolute;
    inset: 0;
    overflow: hidden;
    opacity: 1;
    line-height: 1;
    text-align: initial;
    forced-color-adjust: none;
    /* PDF.js uses CSS variables that scale internal text spans with the viewport. */
    --scale-factor: 1;
}
.arc-pdf-text-layer span,
.arc-pdf-text-layer br {
    color: transparent;
    position: absolute;
    white-space: pre;
    cursor: text;
    transform-origin: 0% 0%;
    user-select: text;
}
.arc-pdf-text-layer ::selection {
    background: rgba(0, 100, 255, 0.3);
}

/* ===== ArcSpreadsheetViewer — read-only .xlsx / .csv preview (U5.5b) ===== */

.arc-spreadsheet-viewer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    background: var(--arc-bg-2);
    overflow: hidden;
    font-family: var(--arc-font);
    color: var(--arc-fg-1);
}
.arc-spreadsheet-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 8px;
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-1);
    gap: 8px;
}
.arc-spreadsheet-viewer-tabs {
    display: flex;
    gap: 2px;
    flex-wrap: wrap;
}
.arc-spreadsheet-viewer-tab {
    height: 28px;
    padding: 0 10px;
    background: transparent;
    border: 1px solid transparent;
    border-radius: 6px;
    cursor: pointer;
    font-size: 12.5px;
    color: var(--arc-fg-2);
    transition: background-color var(--arc-dur-fast) var(--arc-ease),
                border-color var(--arc-dur-fast) var(--arc-ease),
                color var(--arc-dur-fast) var(--arc-ease);
}
.arc-spreadsheet-viewer-tab:hover {
    background: var(--arc-bg-1);
    border-color: var(--arc-border-2);
    color: var(--arc-fg-1);
}
.arc-spreadsheet-viewer-tab-active {
    background: var(--arc-bg-1);
    border-color: var(--arc-accent);
    color: var(--arc-fg-1);
    font-weight: 600;
}
.arc-spreadsheet-viewer-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--arc-fg-1);
    transition: background-color var(--arc-dur-fast) var(--arc-ease),
                border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-spreadsheet-viewer-download:hover {
    background: var(--arc-bg-1);
    border-color: var(--arc-border-2);
}
.arc-spreadsheet-viewer-body {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    background: var(--arc-bg-1);
}
.arc-spreadsheet-viewer-sheet {
    padding: 8px;
}
/* Skin the SheetJS-generated <table> so it matches the Arc design tokens. The
   table is injected via innerHTML — these selectors target descendants only. */
.arc-spreadsheet-viewer-sheet table {
    border-collapse: collapse;
    font-size: 13px;
    color: var(--arc-fg-1);
}
.arc-spreadsheet-viewer-sheet td,
.arc-spreadsheet-viewer-sheet th {
    border: 1px solid var(--arc-border-2);
    padding: 4px 8px;
    min-width: 60px;
    white-space: nowrap;
    vertical-align: top;
}
.arc-spreadsheet-viewer-sheet tr:first-child td,
.arc-spreadsheet-viewer-sheet th {
    background: var(--arc-bg-2);
    font-weight: 600;
}
/* SheetJS stamps the cell type on data-t — right-align numerics (dates, currency,
   percents all carry t="n") so columns read like they do in Excel. */
.arc-spreadsheet-viewer-sheet td[data-t="n"] {
    text-align: right;
    font-variant-numeric: tabular-nums;
}
.arc-spreadsheet-viewer-loading,
.arc-spreadsheet-viewer-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 18px;
    border-radius: var(--arc-radius);
    background: var(--arc-bg-1);
    color: var(--arc-fg-2);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.arc-spreadsheet-viewer-error {
    color: var(--arc-danger, #ef4444);
    border: 1px solid var(--arc-danger, #ef4444);
}

/* ===== ArcDocxViewer — read-only .docx preview (mammoth.js wrapper) =====
   Shape mirrors ArcSpreadsheetViewer: outer shell + optional toolbar + body.
   The inner .arc-docx-viewer-page is a paper-shaped surface that hosts the
   mammoth-converted HTML; descendant selectors style mammoth's output
   (paragraphs, headings, tables, images) so the document reads as Arc-themed
   regardless of what the source Word file specified for fonts/sizes.
*/
.arc-docx-viewer {
    display: flex;
    flex-direction: column;
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    background: var(--arc-bg-2);
    overflow: hidden;
    font-family: var(--arc-font);
    color: var(--arc-fg-1);
}
.arc-docx-viewer-toolbar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    padding: 4px 8px;
    background: var(--arc-bg-2);
    border-bottom: 1px solid var(--arc-border-1);
    gap: 8px;
}
.arc-docx-viewer-download {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 30px;
    height: 28px;
    padding: 0 8px;
    border-radius: 6px;
    border: 1px solid transparent;
    text-decoration: none;
    color: var(--arc-fg-1);
    transition: background-color var(--arc-dur-fast) var(--arc-ease),
                border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-docx-viewer-download:hover {
    background: var(--arc-bg-1);
    border-color: var(--arc-border-2);
}
.arc-docx-viewer-body {
    position: relative;
    flex: 1 1 auto;
    overflow: auto;
    background: var(--arc-bg-1);
    padding: 24px;
    /* Center the page within wider hosts. */
    display: flex;
    justify-content: center;
}
/* The "paper" — a single column capped at US-Letter-ish width so long
   documents read at a sensible line length instead of stretching to the
   full viewer width. */
.arc-docx-viewer-page {
    width: 100%;
    max-width: 816px;            /* ≈ US-Letter at 96dpi */
    min-height: 100%;
    padding: 56px 64px;          /* Word's "Normal" 1-inch margins */
    background: var(--arc-bg-2);
    border: 1px solid var(--arc-border-1);
    border-radius: var(--arc-radius);
    color: var(--arc-fg-1);
    font-size: 15px;
    line-height: 1.6;
    box-shadow: 0 4px 18px rgba(0, 0, 0, 0.18);
}
/* Skin mammoth's output so it matches the Arc design tokens. The HTML
   arrives via innerHTML — these selectors target descendants only. */
.arc-docx-viewer-page > :first-child { margin-top: 0; }
.arc-docx-viewer-page > :last-child { margin-bottom: 0; }
.arc-docx-viewer-page p {
    margin: 0 0 12px;
    color: var(--arc-fg-1);
}
.arc-docx-viewer-page h1,
.arc-docx-viewer-page h2,
.arc-docx-viewer-page h3,
.arc-docx-viewer-page h4,
.arc-docx-viewer-page h5,
.arc-docx-viewer-page h6 {
    color: var(--arc-fg-1);
    line-height: 1.25;
    margin: 24px 0 10px;
    font-weight: 600;
    letter-spacing: -0.005em;
}
.arc-docx-viewer-page h1 { font-size: 28px; }
.arc-docx-viewer-page h2 { font-size: 22px; }
.arc-docx-viewer-page h3 { font-size: 18px; }
.arc-docx-viewer-page h4 { font-size: 16px; }
.arc-docx-viewer-page ul,
.arc-docx-viewer-page ol {
    margin: 0 0 12px;
    padding-left: 24px;
    color: var(--arc-fg-1);
}
.arc-docx-viewer-page li { margin: 4px 0; }
.arc-docx-viewer-page a {
    color: var(--arc-accent);
    text-decoration: underline;
    text-underline-offset: 2px;
}
.arc-docx-viewer-page a:hover { color: var(--arc-accent-hi, var(--arc-accent)); }
.arc-docx-viewer-page strong { font-weight: 600; }
.arc-docx-viewer-page em { font-style: italic; }
.arc-docx-viewer-page blockquote {
    margin: 12px 0;
    padding: 8px 14px;
    border-left: 3px solid var(--arc-border-2);
    color: var(--arc-fg-2);
    background: var(--arc-bg-1);
}
.arc-docx-viewer-page table {
    border-collapse: collapse;
    margin: 12px 0;
    width: 100%;
    font-size: 14px;
}
.arc-docx-viewer-page td,
.arc-docx-viewer-page th {
    border: 1px solid var(--arc-border-2);
    padding: 6px 10px;
    vertical-align: top;
}
.arc-docx-viewer-page th {
    background: var(--arc-bg-1);
    font-weight: 600;
}
.arc-docx-viewer-page img {
    max-width: 100%;
    height: auto;
    margin: 8px 0;
    border-radius: var(--arc-radius);
}
.arc-docx-viewer-loading,
.arc-docx-viewer-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 18px;
    border-radius: var(--arc-radius);
    background: var(--arc-bg-1);
    color: var(--arc-fg-2);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.arc-docx-viewer-error {
    color: var(--arc-danger, #ef4444);
    border: 1px solid var(--arc-danger, #ef4444);
}

.arc-pdf-loading,
.arc-pdf-error {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    padding: 12px 18px;
    border-radius: var(--arc-radius);
    background: var(--arc-bg-1);
    color: var(--arc-fg-2);
    font-size: 14px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.06);
}
.arc-pdf-error {
    color: var(--arc-danger, #ef4444);
    border: 1px solid var(--arc-danger, #ef4444);
}

/* ===========================================================================
 * UTILITIES — atomic, token-backed classes.
 *
 * Naming style follows Tailwind shorthand (m/p/gap/text-*) but every value
 * maps 1:1 to an existing --arc-* token, so there's no drift between
 * utility shortcuts and the design system's source of truth. Rule of thumb:
 * if a utility doesn't reference a token, it doesn't belong here — push it
 * back into a token first.
 *
 * Sized scales follow the existing space-token set: 0, 1, 2, 3, 4, 5, 6, 8,
 * 10, 12, 16, 20, 24, 32 (px values 0/4/8/12/16/20/24/32/40/48/64/80/96/128).
 * The gaps (no 7/9/11/etc.) are intentional — they match the spec; consumers
 * who need them can drop to inline style + design-token CSS variable.
 *
 * Why these and not "all of Tailwind"? Three answers:
 *   - Scope discipline: a 5000-class utility kit invites the "we don't need
 *     components anymore" path, which contradicts Arc's typed-Razor positioning.
 *   - Token coverage: every Arc design token gets a utility, but utilities for
 *     non-token values (arbitrary px sizes, raw colors) are rejected by the
 *     `.arc-ui-css-drift-tests` baseline rather than welcomed in.
 *   - Audit-ability: ~250 utilities is small enough to read end-to-end when
 *     reviewing the design system, and easy to grep for usage across pages.
 * =========================================================================== */

/* ---- Spacing: margin ---- */
.arc-m-0  { margin: 0; }
.arc-m-1  { margin: var(--arc-space-1); }
.arc-m-2  { margin: var(--arc-space-2); }
.arc-m-3  { margin: var(--arc-space-3); }
.arc-m-4  { margin: var(--arc-space-4); }
.arc-m-5  { margin: var(--arc-space-5); }
.arc-m-6  { margin: var(--arc-space-6); }
.arc-m-8  { margin: var(--arc-space-8); }
.arc-m-10 { margin: var(--arc-space-10); }
.arc-m-12 { margin: var(--arc-space-12); }
.arc-m-16 { margin: var(--arc-space-16); }
.arc-m-auto { margin: auto; }

.arc-mx-0  { margin-left: 0; margin-right: 0; }
.arc-mx-1  { margin-left: var(--arc-space-1); margin-right: var(--arc-space-1); }
.arc-mx-2  { margin-left: var(--arc-space-2); margin-right: var(--arc-space-2); }
.arc-mx-3  { margin-left: var(--arc-space-3); margin-right: var(--arc-space-3); }
.arc-mx-4  { margin-left: var(--arc-space-4); margin-right: var(--arc-space-4); }
.arc-mx-5  { margin-left: var(--arc-space-5); margin-right: var(--arc-space-5); }
.arc-mx-6  { margin-left: var(--arc-space-6); margin-right: var(--arc-space-6); }
.arc-mx-8  { margin-left: var(--arc-space-8); margin-right: var(--arc-space-8); }
.arc-mx-auto { margin-left: auto; margin-right: auto; }

.arc-my-0  { margin-top: 0; margin-bottom: 0; }
.arc-my-1  { margin-top: var(--arc-space-1); margin-bottom: var(--arc-space-1); }
.arc-my-2  { margin-top: var(--arc-space-2); margin-bottom: var(--arc-space-2); }
.arc-my-3  { margin-top: var(--arc-space-3); margin-bottom: var(--arc-space-3); }
.arc-my-4  { margin-top: var(--arc-space-4); margin-bottom: var(--arc-space-4); }
.arc-my-5  { margin-top: var(--arc-space-5); margin-bottom: var(--arc-space-5); }
.arc-my-6  { margin-top: var(--arc-space-6); margin-bottom: var(--arc-space-6); }
.arc-my-8  { margin-top: var(--arc-space-8); margin-bottom: var(--arc-space-8); }
.arc-my-12 { margin-top: var(--arc-space-12); margin-bottom: var(--arc-space-12); }

.arc-mt-0 { margin-top: 0; }
.arc-mt-1 { margin-top: var(--arc-space-1); }
.arc-mt-2 { margin-top: var(--arc-space-2); }
.arc-mt-3 { margin-top: var(--arc-space-3); }
.arc-mt-4 { margin-top: var(--arc-space-4); }
.arc-mt-5 { margin-top: var(--arc-space-5); }
.arc-mt-6 { margin-top: var(--arc-space-6); }
.arc-mt-8 { margin-top: var(--arc-space-8); }
.arc-mt-12 { margin-top: var(--arc-space-12); }

.arc-mb-0 { margin-bottom: 0; }
.arc-mb-1 { margin-bottom: var(--arc-space-1); }
.arc-mb-2 { margin-bottom: var(--arc-space-2); }
.arc-mb-3 { margin-bottom: var(--arc-space-3); }
.arc-mb-4 { margin-bottom: var(--arc-space-4); }
.arc-mb-5 { margin-bottom: var(--arc-space-5); }
.arc-mb-6 { margin-bottom: var(--arc-space-6); }
.arc-mb-8 { margin-bottom: var(--arc-space-8); }
.arc-mb-12 { margin-bottom: var(--arc-space-12); }

.arc-ml-0 { margin-left: 0; } .arc-ml-1 { margin-left: var(--arc-space-1); }
.arc-ml-2 { margin-left: var(--arc-space-2); } .arc-ml-3 { margin-left: var(--arc-space-3); }
.arc-ml-4 { margin-left: var(--arc-space-4); } .arc-ml-auto { margin-left: auto; }

.arc-mr-0 { margin-right: 0; } .arc-mr-1 { margin-right: var(--arc-space-1); }
.arc-mr-2 { margin-right: var(--arc-space-2); } .arc-mr-3 { margin-right: var(--arc-space-3); }
.arc-mr-4 { margin-right: var(--arc-space-4); } .arc-mr-auto { margin-right: auto; }

/* ---- Spacing: padding ---- */
.arc-p-0  { padding: 0; }
.arc-p-1  { padding: var(--arc-space-1); }
.arc-p-2  { padding: var(--arc-space-2); }
.arc-p-3  { padding: var(--arc-space-3); }
.arc-p-4  { padding: var(--arc-space-4); }
.arc-p-5  { padding: var(--arc-space-5); }
.arc-p-6  { padding: var(--arc-space-6); }
.arc-p-8  { padding: var(--arc-space-8); }
.arc-p-10 { padding: var(--arc-space-10); }
.arc-p-12 { padding: var(--arc-space-12); }
.arc-p-16 { padding: var(--arc-space-16); }

.arc-px-0 { padding-left: 0; padding-right: 0; }
.arc-px-1 { padding-left: var(--arc-space-1); padding-right: var(--arc-space-1); }
.arc-px-2 { padding-left: var(--arc-space-2); padding-right: var(--arc-space-2); }
.arc-px-3 { padding-left: var(--arc-space-3); padding-right: var(--arc-space-3); }
.arc-px-4 { padding-left: var(--arc-space-4); padding-right: var(--arc-space-4); }
.arc-px-5 { padding-left: var(--arc-space-5); padding-right: var(--arc-space-5); }
.arc-px-6 { padding-left: var(--arc-space-6); padding-right: var(--arc-space-6); }
.arc-px-8 { padding-left: var(--arc-space-8); padding-right: var(--arc-space-8); }

.arc-py-0 { padding-top: 0; padding-bottom: 0; }
.arc-py-1 { padding-top: var(--arc-space-1); padding-bottom: var(--arc-space-1); }
.arc-py-2 { padding-top: var(--arc-space-2); padding-bottom: var(--arc-space-2); }
.arc-py-3 { padding-top: var(--arc-space-3); padding-bottom: var(--arc-space-3); }
.arc-py-4 { padding-top: var(--arc-space-4); padding-bottom: var(--arc-space-4); }
.arc-py-5 { padding-top: var(--arc-space-5); padding-bottom: var(--arc-space-5); }
.arc-py-6 { padding-top: var(--arc-space-6); padding-bottom: var(--arc-space-6); }
.arc-py-8 { padding-top: var(--arc-space-8); padding-bottom: var(--arc-space-8); }
.arc-py-12 { padding-top: var(--arc-space-12); padding-bottom: var(--arc-space-12); }

.arc-pt-0 { padding-top: 0; } .arc-pt-1 { padding-top: var(--arc-space-1); }
.arc-pt-2 { padding-top: var(--arc-space-2); } .arc-pt-3 { padding-top: var(--arc-space-3); }
.arc-pt-4 { padding-top: var(--arc-space-4); } .arc-pt-6 { padding-top: var(--arc-space-6); }
.arc-pt-8 { padding-top: var(--arc-space-8); }

.arc-pb-0 { padding-bottom: 0; } .arc-pb-1 { padding-bottom: var(--arc-space-1); }
.arc-pb-2 { padding-bottom: var(--arc-space-2); } .arc-pb-3 { padding-bottom: var(--arc-space-3); }
.arc-pb-4 { padding-bottom: var(--arc-space-4); } .arc-pb-6 { padding-bottom: var(--arc-space-6); }
.arc-pb-8 { padding-bottom: var(--arc-space-8); }

.arc-pl-0 { padding-left: 0; } .arc-pl-1 { padding-left: var(--arc-space-1); }
.arc-pl-2 { padding-left: var(--arc-space-2); } .arc-pl-3 { padding-left: var(--arc-space-3); }
.arc-pl-4 { padding-left: var(--arc-space-4); }

.arc-pr-0 { padding-right: 0; } .arc-pr-1 { padding-right: var(--arc-space-1); }
.arc-pr-2 { padding-right: var(--arc-space-2); } .arc-pr-3 { padding-right: var(--arc-space-3); }
.arc-pr-4 { padding-right: var(--arc-space-4); }

/* ---- Gap (for flex / grid containers) ---- */
.arc-gap-0  { gap: 0; }
.arc-gap-1  { gap: var(--arc-space-1); }
.arc-gap-2  { gap: var(--arc-space-2); }
.arc-gap-3  { gap: var(--arc-space-3); }
.arc-gap-4  { gap: var(--arc-space-4); }
.arc-gap-5  { gap: var(--arc-space-5); }
.arc-gap-6  { gap: var(--arc-space-6); }
.arc-gap-8  { gap: var(--arc-space-8); }

/* ---- Typography: size ---- */
.arc-text-xs  { font-size: var(--arc-size-eyebrow); }
.arc-text-sm  { font-size: var(--arc-size-caption); }
.arc-text-base { font-size: var(--arc-size-body-sm); }
.arc-text-md  { font-size: var(--arc-size-body); }
.arc-text-lg  { font-size: var(--arc-size-body-lg); }
.arc-text-xl  { font-size: var(--arc-size-h3); }
.arc-text-2xl { font-size: var(--arc-size-h2); }
.arc-text-3xl { font-size: var(--arc-size-h1); }

/* ---- Typography: color (foreground) ---- */
.arc-text-fg1 { color: var(--arc-fg-1); }
.arc-text-fg2 { color: var(--arc-fg-2); }
.arc-text-fg3 { color: var(--arc-fg-3); }
.arc-text-fg4 { color: var(--arc-fg-4); }
.arc-text-accent { color: var(--arc-accent); }
.arc-text-danger { color: var(--arc-danger); }
.arc-text-info   { color: var(--arc-info); }
.arc-text-warn   { color: var(--arc-warn); }
.arc-text-on-accent { color: var(--arc-fg-on-accent); }

/* ---- Typography: family ---- */
.arc-text-mono { font-family: var(--arc-font-mono); }
.arc-text-sans { font-family: var(--arc-font-sans); }

/* ---- Typography: weight ---- */
.arc-font-regular  { font-weight: var(--arc-weight-regular); }
.arc-font-medium   { font-weight: var(--arc-weight-medium); }
.arc-font-semibold { font-weight: var(--arc-weight-semibold); }
.arc-font-bold     { font-weight: var(--arc-weight-bold); }

/* ---- Typography: style + tracking + features ---- */
.arc-text-uppercase   { text-transform: uppercase; }
.arc-text-track-tight { letter-spacing: var(--arc-track-tight); }
.arc-text-track-display { letter-spacing: var(--arc-track-display); }
.arc-text-track-wide  { letter-spacing: var(--arc-track-wide); }
.arc-text-tabular     { font-feature-settings: "tnum"; }
.arc-text-leading-tight { line-height: var(--arc-lh-tight); }
.arc-text-leading-snug  { line-height: var(--arc-lh-snug); }
.arc-text-leading-base  { line-height: var(--arc-lh-base); }
.arc-text-leading-loose { line-height: var(--arc-lh-loose); }
.arc-text-center { text-align: center; }
.arc-text-left   { text-align: left; }
.arc-text-right  { text-align: right; }

/* ---- Display ---- */
.arc-block        { display: block; }
.arc-inline-block { display: inline-block; }
.arc-inline       { display: inline; }
.arc-flex         { display: flex; }
.arc-inline-flex  { display: inline-flex; }
.arc-grid         { display: grid; }
.arc-hidden       { display: none; }

/* ---- Flex / grid alignment ---- */
.arc-items-start    { align-items: flex-start; }
.arc-items-center   { align-items: center; }
.arc-items-end      { align-items: flex-end; }
.arc-items-baseline { align-items: baseline; }
.arc-items-stretch  { align-items: stretch; }

.arc-justify-start   { justify-content: flex-start; }
.arc-justify-center  { justify-content: center; }
.arc-justify-end     { justify-content: flex-end; }
.arc-justify-between { justify-content: space-between; }
.arc-justify-around  { justify-content: space-around; }

.arc-self-start  { align-self: flex-start; }
.arc-self-center { align-self: center; }
.arc-self-end    { align-self: flex-end; }

.arc-flex-row  { flex-direction: row; }
.arc-flex-col  { flex-direction: column; }
.arc-flex-wrap { flex-wrap: wrap; }
.arc-flex-1    { flex: 1 1 0%; }
.arc-flex-none { flex: none; }

/* ---- Grid columns (equal-width tracks; pair with .arc-gap-*). For responsive 12-col
   layouts use the ArcGrid component instead. minmax(0,1fr) lets cells shrink so content
   can scroll rather than overflow the track. ---- */
.arc-grid       { display: grid; }
.arc-grid-cols-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
.arc-grid-cols-3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.arc-grid-cols-4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); }

/* ---- Width / max-width ---- */
.arc-w-full { width: 100%; }
.arc-w-auto { width: auto; }
.arc-max-w-xs  { max-width: 320px; }
.arc-max-w-sm  { max-width: 480px; }
.arc-max-w-md  { max-width: 640px; }
.arc-max-w-lg  { max-width: 800px; }
.arc-max-w-xl  { max-width: 1080px; }
.arc-max-w-2xl { max-width: 1280px; }
.arc-max-w-full { max-width: 100%; }
.arc-max-w-prose { max-width: 65ch; }

/* ---- Border radius (mapping --arc-radius-N) ---- */
.arc-rounded-0    { border-radius: var(--arc-radius-0); }
.arc-rounded-1    { border-radius: var(--arc-radius-1); }
.arc-rounded-2    { border-radius: var(--arc-radius-2); }
.arc-rounded-3    { border-radius: var(--arc-radius-3); }
.arc-rounded-4    { border-radius: var(--arc-radius-4); }
.arc-rounded-5    { border-radius: var(--arc-radius-5); }
.arc-rounded-pill { border-radius: var(--arc-radius-pill); }

/* ---- Background fills (semantic surface tokens) ---- */
.arc-bg-0 { background: var(--arc-bg-0); }
.arc-bg-1 { background: var(--arc-bg-1); }
.arc-bg-2 { background: var(--arc-bg-2); }
.arc-bg-3 { background: var(--arc-bg-3); }
.arc-bg-4 { background: var(--arc-bg-4); }

/* ---- Borders ---- */
.arc-border-1 { border: 1px solid var(--arc-border-1); }
.arc-border-2 { border: 1px solid var(--arc-border-2); }
.arc-border-3 { border: 1px solid var(--arc-border-3); }
.arc-border-t-1 { border-top: 1px solid var(--arc-border-1); }
.arc-border-b-1 { border-bottom: 1px solid var(--arc-border-1); }
.arc-border-t-2 { border-top: 1px solid var(--arc-border-2); }
.arc-border-b-2 { border-bottom: 1px solid var(--arc-border-2); }

/* ---- Cursor + select ---- */
.arc-cursor-pointer { cursor: pointer; }
.arc-cursor-default { cursor: default; }
.arc-select-none    { user-select: none; }

/* ---- Overflow ---- */
.arc-overflow-hidden { overflow: hidden; }
.arc-overflow-auto   { overflow: auto; }
.arc-overflow-x-auto { overflow-x: auto; }
.arc-overflow-y-auto { overflow-y: auto; }
.arc-overflow-x-hidden { overflow-x: hidden; }

/* ---- Position helpers ---- */
.arc-relative { position: relative; }
.arc-absolute { position: absolute; }
.arc-sticky   { position: sticky; }
.arc-fixed    { position: fixed; }

/* ---- Visibility ---- */
.arc-invisible { visibility: hidden; }
.arc-visible   { visibility: visible; }

/* ═══ Tier 1 stragglers (gap-review T1.5–T1.9) ═════════════════════════════ */

/* ─── ArcList / ArcListItem — styled selection list ──────────────────────── */
.arc-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  font-family: var(--arc-font-sans);
}
.arc-list-li { margin: 0; }
.arc-list-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  text-align: left;
  background: transparent;
  border: 0;
  border-radius: 6px;
  padding: var(--arc-density-row-py) var(--arc-density-row-px);
  cursor: pointer;
  color: var(--arc-fg-2);
  font-family: inherit;
  font-size: 13.5px;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-list-item:hover:not(:disabled) { background: var(--arc-bg-2); }
.arc-list-item:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-list-item-selected { background: rgba(67, 245, 161, 0.08); color: var(--arc-fg-1); }
.arc-list-item-selected:hover:not(:disabled) { background: rgba(67, 245, 161, 0.12); }
.arc-list-item-icon { flex-shrink: 0; display: inline-flex; align-items: center; }
.arc-list-item-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.arc-list-item-primary { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-list-item-secondary { color: var(--arc-fg-3); font-size: 12px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-list-item-trailing { flex-shrink: 0; margin-left: auto; color: var(--arc-fg-3); }
.arc-list-dense .arc-list-item { padding: 5px 8px; }

/* ─── ArcDateTimePicker — calendar + time in one popup ───────────────────── */
.arc-datetimepicker-time-row {
  display: flex;
  align-items: center;
  gap: 8px;
  border-top: 1px solid var(--arc-border-1);
  padding: 10px 4px 2px;
  margin-top: 8px;
}
.arc-datetimepicker-time-label { display: inline-flex; color: var(--arc-fg-3); }
.arc-datetimepicker-time-input { flex: 1; min-width: 0; }
.arc-datetimepicker-done { white-space: nowrap; }

/* ─── ArcRangeSlider — two thumbs over one track ─────────────────────────── */
.arc-range-slider-track-row { display: flex; align-items: center; gap: 10px; }
.arc-range-slider-track { position: relative; flex: 1; height: 24px; }
.arc-range-slider-track::before {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--arc-bg-2);
  border-radius: 2px;
}
.arc-range-slider-fill {
  position: absolute;
  top: 50%;
  height: 4px;
  transform: translateY(-50%);
  background: var(--arc-accent);
  border-radius: 2px;
  opacity: 0.7;
}
/* Both native inputs overlay the full track; only the THUMBS take pointer events. */
.arc-range-slider-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 24px;
  margin: 0;
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  pointer-events: none;
}
.arc-range-slider-input::-webkit-slider-runnable-track { height: 4px; background: transparent; }
.arc-range-slider-input::-moz-range-track { height: 4px; background: transparent; }
.arc-range-slider-input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background: var(--arc-accent);
  border: 2px solid var(--arc-bg-0);
  border-radius: 50%;
  margin-top: -6px;
  cursor: grab;
  transition: transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-range-slider-input::-moz-range-thumb {
  pointer-events: auto;
  width: 16px;
  height: 16px;
  background: var(--arc-accent);
  border: 2px solid var(--arc-bg-0);
  border-radius: 50%;
  cursor: grab;
  transition: transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-range-slider-input:active::-webkit-slider-thumb { transform: scale(1.15); cursor: grabbing; }
.arc-range-slider-input:active::-moz-range-thumb { transform: scale(1.15); cursor: grabbing; }
.arc-range-slider-input:focus { outline: none; }
.arc-range-slider-input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 4px rgba(67, 245, 161, 0.18); }
.arc-range-slider-input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 4px rgba(67, 245, 161, 0.18); }
.arc-range-slider-values { min-width: 64px; }

/* ─── ArcMaskedInput ─────────────────────────────────────────────────────── */
.arc-masked-input { font-family: var(--arc-font-mono); letter-spacing: 0.04em; }

/* ─── ArcSideNav — collapsible grouped vertical navigation ───────────────── */
.arc-sidenav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 200px;
  width: var(--arc-sidenav-w, auto);
  font-family: var(--arc-font-sans);
}
.arc-sidenav-header { padding: 8px 10px 12px; }
.arc-sidenav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--arc-fg-2);
  text-decoration: none;
  text-align: left;
  font-family: inherit;
  font-size: 13.5px;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-sidenav-item:hover { background: var(--arc-bg-2); color: var(--arc-fg-1); }
.arc-sidenav-item.active { background: rgba(67, 245, 161, 0.10); color: var(--arc-accent); font-weight: 600; }
.arc-sidenav-item:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-sidenav-icon { display: inline-flex; width: 18px; justify-content: center; flex-shrink: 0; }
.arc-sidenav-item-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.arc-sidenav-item-trailing { margin-left: auto; flex-shrink: 0; color: var(--arc-fg-3); font-size: 11.5px; }
.arc-sidenav-group { display: flex; flex-direction: column; gap: 2px; }
.arc-sidenav-group-header {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 7px 10px;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--arc-fg-3);
  cursor: pointer;
  text-align: left;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-sidenav-group-header:hover { color: var(--arc-fg-1); background: var(--arc-bg-2); }
.arc-sidenav-group-label { flex: 1; }
.arc-sidenav-group-chevron { display: inline-flex; align-items: center; }
.arc-sidenav-group-items {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-left: 14px;
  padding-left: 8px;
  border-left: 1px solid var(--arc-border-1);
}

/* ═══ Tier 4 utilities (gap-review) ════════════════════════════════════════ */

/* ─── ArcPopconfirm ──────────────────────────────────────────────────────── */
.arc-popconfirm { min-width: 220px; max-width: 320px; }
.arc-popconfirm-message { font-size: 13.5px; color: var(--arc-fg-1); margin-bottom: 10px; }
.arc-popconfirm-actions { display: flex; justify-content: flex-end; gap: 8px; }

/* ─── ArcSpeedDial ───────────────────────────────────────────────────────── */
.arc-speeddial { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 10px; }
.arc-speeddial-down { flex-direction: column-reverse; }
.arc-speeddial-fixed { position: fixed; right: 24px; bottom: 24px; z-index: var(--arc-z-fab); }
.arc-speeddial-fab {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 50%;
  border: 0;
  background: var(--arc-accent);
  color: var(--arc-bg-0);
  font-size: 22px;
  line-height: 1;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
  transition: transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-speeddial-fab:hover:not(:disabled) { transform: scale(1.06); }
.arc-speeddial-fab:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-speeddial-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.arc-speeddial-down .arc-speeddial-actions { flex-direction: column-reverse; }
.arc-speeddial-action {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  border-radius: 999px;
  padding: 6px 8px 6px 12px;
  font-size: 12.5px;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-speeddial-action:hover:not(:disabled) { background: var(--arc-bg-2); }
.arc-speeddial-action:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-speeddial-action-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: var(--arc-bg-2);
}

/* ─── ArcDropZone ────────────────────────────────────────────────────────── */
.arc-dropzone {
  position: relative;
  display: block;
  border: 1.5px dashed var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  padding: 22px 16px;
  text-align: center;
  cursor: pointer;
  transition: border-color var(--arc-dur-fast) var(--arc-ease), background var(--arc-dur-fast) var(--arc-ease);
}
.arc-dropzone:hover { border-color: var(--arc-fg-3); }
.arc-dropzone-active { border-color: var(--arc-accent); background: rgba(67, 245, 161, 0.06); }
.arc-dropzone-disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
/* The input stretches invisibly over the zone so native drag-drop + click both hit it. */
.arc-dropzone-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
.arc-dropzone-disabled .arc-dropzone-input { cursor: not-allowed; }
.arc-dropzone-content { pointer-events: none; color: var(--arc-fg-3); font-size: 13px; }
.arc-dropzone-prompt { font-size: 13px; }

/* ─── ArcInfiniteScroll ──────────────────────────────────────────────────── */
.arc-infinite-scroll-sentinel { height: 1px; }
.arc-infinite-scroll-loading {
  padding: 12px;
  text-align: center;
  color: var(--arc-fg-3);
  font-size: 12.5px;
}

/* ─── ArcTransfer ────────────────────────────────────────────────────────── */
.arc-transfer { display: flex; align-items: stretch; gap: 10px; font-family: var(--arc-font-sans); }
.arc-transfer-panel {
  flex: 1;
  min-width: 0;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  display: flex;
  flex-direction: column;
}
.arc-transfer-title {
  padding: 8px 10px;
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--arc-fg-3);
  border-bottom: 1px solid var(--arc-border-1);
}
.arc-transfer-count { opacity: 0.7; }
.arc-transfer-list {
  list-style: none;
  margin: 0;
  padding: 4px;
  overflow-y: auto;
  max-height: 220px;
  flex: 1;
}
.arc-transfer-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 8px;
  border-radius: 5px;
  font-size: 13px;
  color: var(--arc-fg-2);
  cursor: pointer;
}
.arc-transfer-item:hover { background: var(--arc-bg-2); }
.arc-transfer-item input { margin: 0; }
.arc-transfer-controls {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 6px;
}

/* ─── ArcLightbox ────────────────────────────────────────────────────────── */
.arc-lightbox {
  position: fixed;
  inset: 0;
  z-index: var(--arc-z-dialog);
  background: rgba(0, 0, 0, 0.82);
  display: flex;
  align-items: center;
  justify-content: center;
  outline: none;
}
.arc-lightbox-figure { margin: 0; max-width: min(86vw, 1100px); max-height: 86vh; display: flex; flex-direction: column; gap: 8px; }
.arc-lightbox-img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: var(--arc-radius-1); }
.arc-lightbox-caption {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  color: var(--arc-fg-2);
  font-size: 13px;
}
.arc-lightbox-counter { color: var(--arc-fg-3); font-variant-numeric: tabular-nums; }
.arc-lightbox-close,
.arc-lightbox-nav {
  position: absolute;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
  cursor: pointer;
  border-radius: 50%;
  width: 40px;
  height: 40px;
  line-height: 1;
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-lightbox-close:hover,
.arc-lightbox-nav:hover { background: rgba(255, 255, 255, 0.18); }
.arc-lightbox-close { top: 18px; right: 18px; }
.arc-lightbox-prev { left: 18px; top: 50%; transform: translateY(-50%); }
.arc-lightbox-next { right: 18px; top: 50%; transform: translateY(-50%); }

/* ─── ArcScrollToTop ─────────────────────────────────────────────────────── */
.arc-scrolltotop {
  position: fixed;
  right: 24px;
  bottom: 24px;
  z-index: var(--arc-z-fab);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 1px solid var(--arc-border-2);
  background: var(--arc-bg-1);
  color: var(--arc-fg-1);
  border-radius: 999px;
  padding: 10px 14px;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3);
  transition: background var(--arc-dur-fast) var(--arc-ease), transform var(--arc-dur-fast) var(--arc-ease);
}
.arc-scrolltotop:hover { background: var(--arc-bg-2); transform: translateY(-2px); }
.arc-scrolltotop-left { left: 24px; right: auto; }
.arc-scrolltotop-label { font-size: 12.5px; }


/* ===== ArcAppShell — horizontal app frame (fixed sidebar + scrollable fill-height main) ===== */
.arc-app-shell {
  display: flex;
  min-height: 100vh;
  background: var(--arc-bg-0);
  color: var(--arc-fg-2);
  font-family: var(--arc-font-sans);
}
.arc-app-shell-sidebar {
  flex: 0 0 var(--arc-app-shell-sidebar-w, 252px);
  width: var(--arc-app-shell-sidebar-w, 252px);
  background: var(--arc-bg-1);
  border-right: 1px solid var(--arc-border-1);
  overflow-y: auto;
}
.arc-app-shell-sidebar-sticky {
  position: sticky;
  top: 0;
  align-self: flex-start;
  height: 100vh;
}
.arc-app-shell-main {
  flex: 1;
  min-width: 0;
  overflow-y: auto;
  background: var(--arc-bg-0);
}
/* Persistent app header: pinned to the top of the scrolling main pane. */
.arc-app-shell-topbar {
  position: sticky;
  top: 0;
  z-index: var(--arc-z-sticky);
  display: flex;
  align-items: center;
  gap: var(--arc-space-3);
  min-height: 56px;
  padding: 0 var(--arc-space-5);
  background: var(--arc-bg-0);
  border-bottom: 1px solid var(--arc-border-1);
}

/* ===== ArcOptionCards — single-select grid of rich choice cards (icon + title + description) ===== */
.arc-option-cards {
  display: grid;
  gap: 10px;
  grid-template-columns: repeat(var(--arc-option-cards-cols, 2), 1fr);
  font-family: var(--arc-font-sans);
}
.arc-option-card {
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 14px;
  text-align: left;
  background: var(--arc-bg-2);
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-3);
  color: var(--arc-fg-2);
  font-family: inherit;
  cursor: pointer;
  transition: border-color var(--arc-dur-fast) var(--arc-ease),
              background var(--arc-dur-fast) var(--arc-ease),
              box-shadow var(--arc-dur-fast) var(--arc-ease);
}
.arc-option-card:hover:not(.selected) {
  border-color: var(--arc-border-3);
  background: var(--arc-bg-3);
}
.arc-option-card:focus-visible {
  outline: none;
  box-shadow: var(--arc-ring-focus);
}
.arc-option-card.selected {
  border-color: var(--arc-accent);
  box-shadow: 0 0 0 1px var(--arc-accent);
}
.arc-option-card-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--arc-radius-2);
  background: var(--arc-bg-1);
  border: 1px solid var(--arc-border-2);
  color: var(--arc-fg-2);
}
.arc-option-card.selected .arc-option-card-icon {
  background: var(--arc-accent-soft);
  border-color: var(--arc-accent);
  color: var(--arc-accent);
}
.arc-option-card-title {
  color: var(--arc-fg-1);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
}
.arc-option-card-desc {
  color: var(--arc-fg-3);
  font-size: 12.5px;
  line-height: 1.4;
}
.arc-option-cards-disabled {
  opacity: 0.5;
}
.arc-option-cards-disabled .arc-option-card {
  pointer-events: none;
  cursor: not-allowed;
}
/* Per-option Disabled: dimmed but still hit-testable so the DisabledReason tooltip can show. */
.arc-option-card:disabled { opacity: var(--arc-opacity-disabled); cursor: not-allowed; }
.arc-option-card:disabled:hover { border-color: var(--arc-border-2); background: var(--arc-bg-2); }

/* ===== ArcSplitView — preset (non-drag) two-pane grid, Mode-driven ===== */
.arc-split-view {
  display: grid;
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  /* grid-template-columns + gap come from the component's inline style. */
}
.arc-split-view-pane {
  overflow: auto;
  min-width: 0;
  min-height: 0;
}
/* Reverse: swap visual order via CSS only — no DOM reorder, pane state survives. */
.arc-split-view-reverse .arc-split-view-primary   { order: 2; }
.arc-split-view-reverse .arc-split-view-secondary { order: 1; }

/* Badge — additive variants + appearance modifiers (Success/Danger, runtime Color, Outline, Mono) */
.arc-badge-success { background: color-mix(in srgb, var(--arc-success) 12%, var(--arc-bg-1)); color: var(--arc-success); border-color: color-mix(in srgb, var(--arc-success) 35%, var(--arc-border-2)); }
.arc-badge-danger { background: color-mix(in srgb, var(--arc-danger) 12%, var(--arc-bg-1)); color: var(--arc-danger); border-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2)); }

/* Custom: runtime Color drives the whole palette via --arc-badge-color (set inline). */
.arc-badge-custom {
  background: color-mix(in srgb, var(--arc-badge-color, var(--arc-accent)) 12%, var(--arc-bg-1));
  color: var(--arc-badge-color, var(--arc-accent));
  border-color: color-mix(in srgb, var(--arc-badge-color, var(--arc-accent)) 40%, var(--arc-border-2));
}

/* Outline: transparent fill + color-mix tinted border + colored text. Layers over any
   variant or custom color by reading the text color the variant already set (currentColor). */
.arc-badge-outline {
  background: transparent;
  border-color: color-mix(in srgb, currentColor 45%, transparent);
}

/* Mono: compact uppercase monospace "type pill" treatment. */
.arc-badge-mono {
  font-family: var(--arc-font-mono);
  text-transform: uppercase;
  font-size: 10.5px;
  letter-spacing: 0.04em;
}

/* Chip tones — semantic bg / text / border tints. Layer over .arc-chip; default (Neutral)
   stays bg-2 / fg-1 / border-2 (the base .arc-chip rule, no tone class). */
.arc-chip-info { background: color-mix(in srgb, var(--arc-info) 12%, var(--arc-bg-1)); color: var(--arc-info); border-color: color-mix(in srgb, var(--arc-info) 30%, var(--arc-border-2)); }
.arc-chip-warn { background: color-mix(in srgb, var(--arc-warn) 12%, var(--arc-bg-1)); color: var(--arc-warn); border-color: color-mix(in srgb, var(--arc-warn) 35%, var(--arc-border-2)); }
.arc-chip-danger { background: color-mix(in srgb, var(--arc-danger) 12%, var(--arc-bg-1)); color: var(--arc-danger); border-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2)); }
.arc-chip-success { background: color-mix(in srgb, var(--arc-success) 12%, var(--arc-bg-1)); color: var(--arc-success); border-color: color-mix(in srgb, var(--arc-success) 35%, var(--arc-border-2)); }
.arc-chip-accent { background: var(--arc-accent-soft); color: var(--arc-accent); border-color: color-mix(in srgb, var(--arc-accent) 30%, var(--arc-border-2)); }

/* Interactive chip (OnClick) — a real <button>; the global :focus-visible ring applies. Selected
   borrows the chip's own tone colour for the border so every tone has an on-state for free. */
.arc-chip-interactive {
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), border-color var(--arc-dur-fast) var(--arc-ease);
}
.arc-chip-interactive:hover { border-color: var(--arc-border-3); background: var(--arc-bg-3); }
.arc-chip-selected { border-color: currentColor; font-weight: 600; }

/* Leading glyph: nudge to optical center; inherits the chip's currentColor (tone-aware). */
.arc-chip-icon { flex: none; margin-inline-start: -1px; }

/* Compact: denser micro-token treatment. */
.arc-chip-compact { padding: 2px 7px; gap: 4px; font-size: 10.5px; }


/* ArcStatusDot — additive: icon-in-marker, filled badge, static glow, Xl size, pill container. */
.arc-status-dot-xl .arc-status-dot-glyph { width: 24px; height: 24px; }
.arc-status-dot-glyph-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--arc-status-dot-color, var(--arc-accent));
  background: transparent;
}
/* Filled marker — solid tinted circular badge that hosts an icon (icon flips to bg color). */
.arc-status-dot-filled .arc-status-dot-glyph {
  background: var(--arc-status-dot-color, var(--arc-accent));
}
.arc-status-dot-filled .arc-status-dot-glyph-icon { color: var(--arc-bg-1); }
/* Static glow — a persistent halo, distinct from the animated pulse. */
.arc-status-dot-glow .arc-status-dot-glyph {
  box-shadow: 0 0 0 4px color-mix(in srgb, var(--arc-status-dot-color, var(--arc-accent)) 22%, transparent);
}
/* Pill container — padded, bordered, pill-rounded, tinted by the variant / custom color. */
.arc-status-dot-pill {
  padding: 3px 10px;
  border: 1px solid color-mix(in srgb, var(--arc-status-dot-color, var(--arc-accent)) 40%, var(--arc-border-2));
  border-radius: var(--arc-radius-pill);
  background: color-mix(in srgb, var(--arc-status-dot-color, var(--arc-accent)) 10%, var(--arc-bg-1));
}
.arc-status-dot-pill .arc-status-dot-label { color: var(--arc-fg-1); }


/* Interactive card (whole-card click / navigation via ArcCard OnClick / Href) */
.arc-card-interactive {
  display: block;
  color: inherit;
  text-decoration: none;
  cursor: pointer;
}
.arc-card-interactive:hover {
  border-color: var(--arc-border-3);
  background: var(--arc-bg-3);
}
.arc-card-interactive:active { background: var(--arc-bg-4); }

/* Compact card density — tighter padding for dense list rows */
.arc-card-compact { padding: 14px; --arc-card-pad: 14px; }

/* Structured card (Title / Header / HeaderTrailing / Note / Footer): the surface drops its own
   padding and each section carries it, so a hairline can run the full width between them. */
.arc-card-structured { padding: 0; }
.arc-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px var(--arc-card-pad, 24px);
  border-bottom: 1px solid var(--arc-border-2);
}
.arc-card-title {
  margin: 0;
  font-family: var(--arc-font-sans);
  font-size: 14px;
  font-weight: 600;
  line-height: 1.3;
  color: var(--arc-fg-1);
  letter-spacing: -0.005em;
}
.arc-card-header-trailing {
  margin-left: auto;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--arc-fg-3);
  font-size: 12px;
}
.arc-card-body { padding: var(--arc-card-pad, 24px); }
.arc-card-note {
  margin: 0;
  padding: 0 var(--arc-card-pad, 24px) 14px;
  color: var(--arc-fg-3);
  font-size: 12px;
  line-height: 1.5;
}
.arc-card-footer {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding: 12px var(--arc-card-pad, 24px);
  border-top: 1px solid var(--arc-border-2);
}
/* Flush: the body loses its padding so rows and their dividers reach the card edge; header,
   note and footer keep theirs. A list inside sheds its own frame — the card is the frame now. */
.arc-card-flush { padding: 0; }
.arc-card-flush .arc-card-body { padding: 0; }
.arc-card-flush .arc-card-body + .arc-card-note { padding-top: 12px; }
.arc-card-flush .arc-list,
.arc-card-flush .arc-card-body > .arc-list { border: 0; border-radius: 0; background: transparent; }


/* ---- Section: leading header status dot, empty placeholder, divider variant (additive) ---- */
.arc-section-header {
  display: flex;
  align-items: flex-start;
  gap: 10px;
}
.arc-section-marker {
  display: inline-flex;
  align-items: center;
  /* Nudge the dot to sit on the title's cap height. */
  margin-top: 7px;
  flex-shrink: 0;
}
/* Muted hollow marker — a bordered ring rather than a solid dot. */
.arc-section-marker-empty .arc-status-dot-glyph {
  background: transparent;
  box-shadow: inset 0 0 0 1px var(--arc-fg-3);
}
.arc-section-heading { min-width: 0; }
/* Keep the header's heading block flush so the marker aligns to the title. */
.arc-section-header .arc-section-eyebrow,
.arc-section-header .arc-section-title { margin-bottom: 0; }
.arc-section-header .arc-section-eyebrow + .arc-section-title { margin-top: 6px; }
.arc-section-placeholder {
  font-style: italic;
  color: var(--arc-fg-4);
  margin: 0;
}
.arc-section-divider {
  border-bottom: 1px solid var(--arc-border-1);
  padding-bottom: 64px;
}


/* ArcContainer — additive runtime overrides (opt-in via .arc-container-custom).
   --arc-container-max pins any max-width over the Size enum; --arc-container-py adds
   top/bottom padding. Both no-op until the component sets the matching inline var. */
.arc-container-custom[style*="--arc-container-max"] { max-width: var(--arc-container-max); }
.arc-container-custom[style*="--arc-container-py"] { padding-top: var(--arc-container-py); padding-bottom: var(--arc-container-py); }


/* ArcEmptyState — additive: Success accent badge, supporting-text slot, inline single-line variant. */
.arc-empty-state-supporting {
  margin-top: 8px;
  font-size: 14px;
  color: var(--arc-fg-2);
  max-width: 420px;
  line-height: 1.55;
}
.arc-empty-state-badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 64px;
  height: 64px;
  margin-bottom: 12px;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-accent-soft);
  color: var(--arc-accent);
}
.arc-empty-state-badge .arc-empty-state-icon {
  margin-bottom: 0;
  opacity: 1;
  color: var(--arc-accent);
}
.arc-empty-state-compact .arc-empty-state-badge {
  width: 44px;
  height: 44px;
  margin-bottom: 8px;
}
.arc-empty-state-inline {
  display: block;
  flex-direction: row;
  align-items: baseline;
  justify-content: flex-start;
  text-align: left;
  padding: 4px 0;
  border: 0;
  border-radius: 0;
  background: transparent;
  color: var(--arc-fg-3);
  font-style: italic;
  font-size: 13px;
  line-height: 1.5;
}
.arc-empty-state-inline .arc-empty-state-title {
  display: inline;
  margin: 0 6px 0 0;
  font-size: 13px;
  font-weight: 500;
  font-style: italic;
  color: var(--arc-fg-3);
}
.arc-empty-state-inline .arc-empty-state-subtitle {
  display: inline;
  margin: 0;
  max-width: none;
  font-size: 13px;
  color: var(--arc-fg-3);
}
.arc-empty-state-inline .arc-empty-state-supporting,
.arc-empty-state-inline .arc-empty-state-actions,
.arc-empty-state-inline .arc-empty-state-body {
  font-style: normal;
}


/* ---- Page header — additive: trailing actions, badge row, size scale, sticky ---- */
/* These rules only engage when the matching ArcPageHeader params are set; a bare
 * .arc-page-header keeps its existing margin/title/desc rendering untouched. */
.arc-page-header-title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--arc-space-4);
  flex-wrap: wrap;
}
/* The title inside a flex row keeps its own margins but must be able to shrink so
 * the trailing actions stay on the row at narrow widths. */
.arc-page-header-title-row .arc-page-header-title {
  flex: 1 1 auto;
  min-width: 0;
}
.arc-page-header-actions {
  display: flex;
  align-items: center;
  gap: var(--arc-space-3);
  flex-shrink: 0;
}
.arc-page-header-badges {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--arc-space-2);
  margin: var(--arc-space-2) 0 0;
}

/* Compact title scale — denser 28px heading for queue/list pages. */
.arc-page-header-compact .arc-page-header-title {
  font-size: 28px;
}
/* Hero title scale — fixed 34px (non-fluid) heading for review/detail pages. */
.arc-page-header-hero .arc-page-header-title {
  font-size: 34px;
}

/* Sticky variant — pins the header to the top of its scroll container on a
 * translucent backdrop-blurred surface, mirroring the .arc-header chrome. */
.arc-page-header-sticky {
  position: sticky;
  top: 0;
  z-index: var(--arc-z-sticky);
  padding: var(--arc-space-4) 0;
  background: color-mix(in srgb, var(--arc-bg-1) 72%, transparent);
  backdrop-filter: blur(16px) saturate(140%);
  -webkit-backdrop-filter: blur(16px) saturate(140%);
  border-bottom: 1px solid var(--arc-border-1);
}


/* ArcButton — additive: compact size, true bare variant, semantic soft tones, leading glyph.
   All layer over the base .arc-btn rule; none alter the existing primary/secondary/ghost/lg
   rules, so a bare <ArcButton> renders exactly as before. */

/* Compact size — denser in-row / toolbar treatment. */
.arc-btn-sm { padding: 6px 10px; font-size: 13px; gap: 5px; }

/* Bare — no padding, no border, no hover fill. For icon-only or link-like buttons. */
.arc-btn-bare {
  background: transparent;
  color: var(--arc-fg-2);
  border-color: transparent;
  padding: 0;
}
.arc-btn-bare:hover { background: transparent; color: var(--arc-fg-1); border-bottom-color: transparent; }
.arc-btn-bare:active { transform: none; }

/* Soft tones — tinted bg / colored text / mixed border drawn from the matching --arc-* token.
   Mirrors the .arc-chip-{tone} soft-tint convention; layered after the variant rules so they
   take visual precedence over the solid fill. */
.arc-btn-accent-soft {
  background: color-mix(in srgb, var(--arc-accent) 14%, var(--arc-bg-1));
  color: var(--arc-accent);
  border-color: color-mix(in srgb, var(--arc-accent) 32%, var(--arc-border-2));
}
.arc-btn-accent-soft:hover { background: color-mix(in srgb, var(--arc-accent) 22%, var(--arc-bg-1)); color: var(--arc-accent); border-bottom-color: color-mix(in srgb, var(--arc-accent) 32%, var(--arc-border-2)); }
.arc-btn-info-soft {
  background: color-mix(in srgb, var(--arc-info) 12%, var(--arc-bg-1));
  color: var(--arc-info);
  border-color: color-mix(in srgb, var(--arc-info) 30%, var(--arc-border-2));
}
.arc-btn-info-soft:hover { background: color-mix(in srgb, var(--arc-info) 20%, var(--arc-bg-1)); color: var(--arc-info); border-bottom-color: color-mix(in srgb, var(--arc-info) 30%, var(--arc-border-2)); }
.arc-btn-warn-soft {
  background: color-mix(in srgb, var(--arc-warn) 12%, var(--arc-bg-1));
  color: var(--arc-warn);
  border-color: color-mix(in srgb, var(--arc-warn) 35%, var(--arc-border-2));
}
.arc-btn-warn-soft:hover { background: color-mix(in srgb, var(--arc-warn) 20%, var(--arc-bg-1)); color: var(--arc-warn); border-bottom-color: color-mix(in srgb, var(--arc-warn) 35%, var(--arc-border-2)); }
.arc-btn-danger-soft {
  background: color-mix(in srgb, var(--arc-danger) 12%, var(--arc-bg-1));
  color: var(--arc-danger);
  border-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2));
}
.arc-btn-danger-soft:hover { background: color-mix(in srgb, var(--arc-danger) 20%, var(--arc-bg-1)); color: var(--arc-danger); border-bottom-color: color-mix(in srgb, var(--arc-danger) 40%, var(--arc-border-2)); }

/* Leading glyph: hold its box, inherit the button's currentColor (variant- and tone-aware). */
.arc-btn-icon { flex: none; }
.arc-btn-icon-trailing { margin-left: 2px; }

/* Disabled state (driven by ArcButton's Disabled / Loading params, or a native disabled attr). */
.arc-btn:disabled,
.arc-btn[disabled] {
  opacity: 0.55;
  cursor: not-allowed;
  pointer-events: none;
}

/* Full-width block button. */
.arc-btn-block {
  width: 100%;
  justify-content: center;
}

/* Loading spinner (replaces the leading glyph while ArcButton.Loading is true). */
.arc-btn-spinner {
  flex: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  border: 2px solid currentColor;
  border-top-color: transparent;
  animation: arc-btn-spin 0.6s linear infinite;
}
@keyframes arc-btn-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .arc-btn-spinner { animation-duration: 1.4s; }
}


/* ─── ArcSideNav enhancement — fixed-width var, footer slot, static label ─── */
.arc-sidenav-footer {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin-top: auto;
  padding-top: 8px;
}
.arc-sidenav-label {
  padding: 10px 10px 4px;
  color: var(--arc-fg-3);
  font-family: var(--arc-font-mono);
  font-size: 10.5px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-weight: 500;
}


/* ===== ArcKanban — additive: click-to-open cards + dot-accent column header ===== */
.arc-kanban-card-clickable {
  cursor: pointer;
}
.arc-kanban-card-clickable:focus-visible {
  outline: none;
  box-shadow: var(--arc-ring-focus);
}
.arc-kanban-column-dot {
  flex: 0 0 auto;
  width: 8px;
  height: 8px;
  margin-right: 8px;
  border-radius: var(--arc-radius-pill);
  background: var(--arc-kanban-accent, var(--arc-accent));
}

/* ArcTimeline — arbitrary per-event dot color via DotColorSelector. Reads the
   consumer-supplied color from the inline --arc-timeline-dot-color var, falling
   back to the accent when unset. Additive: the fixed variant classes are unchanged. */
.arc-timeline-dot-custom { background: var(--arc-timeline-dot-color, var(--arc-accent)); }


/* ===== ArcChatBubble — footer slot + typing indicator (additive) ===== */
.arc-chat-bubble-footer {
  display: flex;
  flex-wrap: wrap;
  gap: var(--arc-space-1);
  margin-top: var(--arc-space-1);
}
.arc-chat-bubble-sent .arc-chat-bubble-footer {
  justify-content: flex-end;
}
.arc-chat-bubble-dots {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  min-height: 1em;
  line-height: 1.45;
}
.arc-chat-bubble-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--arc-fg-3);
  animation: arc-chat-bubble-typing-anim 1.4s ease-in-out infinite;
}
.arc-chat-bubble-sent .arc-chat-bubble-dot {
  background: var(--arc-accent);
}
.arc-chat-bubble-dot:nth-child(2) { animation-delay: 0.2s; }
.arc-chat-bubble-dot:nth-child(3) { animation-delay: 0.4s; }
@keyframes arc-chat-bubble-typing-anim {
  0%, 60%, 100% { opacity: 0.35; transform: translateY(0); }
  30%           { opacity: 1; transform: translateY(-3px); }
}


/* ---- Textarea composer affordances (ArcTextarea AutoGrow + trailing slot) ---- */
.arc-textarea-autogrow .arc-input {
  field-sizing: content;
  max-height: calc(var(--arc-textarea-max-rows, 8) * 1.45em + 20px);
  overflow-y: auto;
}

/* Fallback for engines without field-sizing: keep the rows-driven resting height
   but cap growth so the field never runs off the composer. */
@supports not (field-sizing: content) {
  .arc-textarea-autogrow .arc-input {
    max-height: calc(var(--arc-textarea-max-rows, 8) * 1.45em + 20px);
    overflow-y: auto;
  }
}

/* Shell docks a trailing affordance (e.g. a send button) inside the bordered field. */
.arc-textarea-shell {
  position: relative;
  display: block;
}
.arc-textarea-shell .arc-input {
  padding-right: 44px;
}
.arc-textarea-trailing {
  position: absolute;
  right: var(--arc-space-2);
  bottom: var(--arc-space-2);
  display: inline-flex;
  align-items: center;
}


/* ===== ArcSideNav collapsible drawer + ArcAppShell mobile collapse (opt-in) ===== */
/* The slide-in panel reuses ArcDrawer (native <dialog>) — backdrop, focus-trap, Esc, and
   body-scroll-lock are handled there, so this only styles the hamburger + the rail hide. */
.arc-sidenav-toggle { display: none; }
.arc-sidenav-toggle-bar { display: block; width: 16px; height: 1.5px; background: var(--arc-fg-1); border-radius: 2px; }
.arc-sidenav-in-drawer { width: 100%; min-width: 0; height: 100%; border: 0; }
.arc-sidenav-brand { padding: 2px 10px 12px; }

@media (max-width: 860px) {
  /* Hide the fixed rail; the hamburger + ArcDrawer take over. */
  .arc-sidenav-collapsible { display: none; }
  .arc-sidenav-toggle {
    display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
    position: fixed; top: 12px; left: 12px; z-index: var(--arc-z-fab);
    width: 38px; height: 36px; padding: 8px 10px; cursor: pointer;
    background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: var(--arc-radius-1);
  }
  .arc-sidenav-toggle:hover { background: var(--arc-bg-2); }
  .arc-sidenav-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20); }

  /* ArcAppShell Responsive: collapse the sidebar column so main goes full-width; the
     fixed hamburger + ArcDrawer render over the viewport. */
  .arc-app-shell-responsive .arc-app-shell-sidebar {
    flex: 0 0 0; width: 0; min-width: 0; border-right: 0; overflow: visible;
  }
}

/* ── ArcStack responsive direction (DirectionMd) ───────────────────────────────
   Emitted only when ArcStack.DirectionMd is set. The base class carries the
   below-Md direction (flex-direction leaves the inline style in that case so the
   media query below can win), and the -md- class overrides it at/above the Md
   breakpoint (960px — the same breakpoint as .arc-grid-item-md-*). Same selector
   specificity, so the media-query rules win by source order. */
.arc-stack-vertical { flex-direction: column; }
.arc-stack-horizontal { flex-direction: row; }

@media (min-width: 960px) {
  .arc-stack-md-vertical { flex-direction: column; }
  .arc-stack-md-horizontal { flex-direction: row; }
}

/* ArcDataGrid — whole-row click (OnRowClick). Opt-in: rows only gain this when a
   consumer wires OnRowClick, so default grids are visually unchanged. Mirrors the
   ArcCard interactive affordance — pointer cursor, hover wash + focus ring. */
.arc-datagrid-row-clickable {
  cursor: pointer;
}
.arc-datagrid-row-clickable td {
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-datagrid-row-clickable:hover td {
  background: var(--arc-bg-2);
}
.arc-datagrid-row-clickable:focus-visible {
  outline: none;
  box-shadow: var(--arc-ring-focus);
}
/* Card-stack / adaptive layouts render the row as a block — keep the clickable
   wash + focus ring legible when the <tr> is the visible card surface. */
.arc-datagrid-mode-cards .arc-datagrid-row-clickable:hover,
.arc-datagrid-mode-cards .arc-datagrid-row-clickable:focus-visible {
  background: var(--arc-bg-2);
}
@media (max-width: 720px) {
  .arc-datagrid-mode-adaptive .arc-datagrid-row-clickable:hover,
  .arc-datagrid-mode-adaptive .arc-datagrid-row-clickable:focus-visible {
    background: var(--arc-bg-2);
  }
}



/* ===== Responsive-visibility utilities + ArcMenuToggle (additive) =====
   General-purpose show/hide helpers for arbitrary markup at Arc's grid breakpoints
   (same px as ArcGrid / ArcGridItem). Mobile-first: base state is visible, the @media
   blocks flip display at the named breakpoint.

   Breakpoints (min-width):
     sm = 600px   md = 960px   lg = 1280px

   - .arc-hide-below-{sm|md|lg}  hidden until the viewport REACHES the breakpoint
                                 (i.e. shown only at/above it). E.g. arc-hide-below-md
                                 mirrors ArcDataGrid's HideOnMobile for arbitrary content.
   - .arc-hide-from-{sm|md|lg}   hidden once the viewport reaches the breakpoint
                                 (i.e. shown only below it).
   - .arc-show-only-mobile       convenience alias: shown only below sm (600px),
                                 hidden at/above — pair with a desktop nav rail. */

/* hide until breakpoint (visible from breakpoint up) — base = hidden */
.arc-hide-below-sm,
.arc-hide-below-md,
.arc-hide-below-lg { display: none; }

@media (min-width: 600px) { .arc-hide-below-sm { display: revert; } }
@media (min-width: 960px) { .arc-hide-below-md { display: revert; } }
@media (min-width: 1280px) { .arc-hide-below-lg { display: revert; } }

/* hide from breakpoint up (visible only below it) — base = visible */
@media (min-width: 600px) { .arc-hide-from-sm, .arc-show-only-mobile { display: none; } }
@media (min-width: 960px) { .arc-hide-from-md { display: none; } }
@media (min-width: 1280px) { .arc-hide-from-lg { display: none; } }

/* ArcMenuToggle — standalone hamburger button. Reuses .arc-sidenav-toggle-bar for the
   three bars; unlike .arc-sidenav-toggle this is always visible (scope it with the
   responsive-visibility utilities above). */
.arc-menu-toggle {
  display: inline-flex; flex-direction: column; justify-content: center; gap: 4px;
  width: 38px; height: 36px; padding: 8px 10px; cursor: pointer;
  background: var(--arc-bg-1); border: 1px solid var(--arc-border-2); border-radius: var(--arc-radius-1);
}
.arc-menu-toggle:hover { background: var(--arc-bg-2); }
.arc-menu-toggle:focus-visible { outline: none; box-shadow: 0 0 0 3px rgba(67, 245, 161, 0.20); }


/* ===== ArcDiagram — interactive node/edge canvas (pan/zoom SVG) ===== */
.arc-diagram {
  position: relative;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-3);
  background: var(--arc-bg-0);
  overflow: hidden;
  touch-action: none;   /* pointer-event panning owns touch gestures inside the canvas */
  user-select: none;    /* dragging a node must not text-select its label */
  cursor: grab;
}
/* Grid backdrop. MUST stay after .arc-diagram — that rule sets the `background` shorthand, which
   resets background-image. The component supplies background-size/-position inline so the lattice
   pans and zooms with the content. */
.arc-diagram-grid {
  background-image:
    linear-gradient(to right, var(--arc-border-1) 1px, transparent 1px),
    linear-gradient(to bottom, var(--arc-border-1) 1px, transparent 1px);
}
.arc-diagram-panning { cursor: grabbing; }
.arc-diagram-svg { width: 100%; height: 100%; display: block; }
.arc-diagram-empty {
  display: flex;
  align-items: center;
  justify-content: center;
  height: 100%;
  color: var(--arc-fg-3);
  font-size: 13px;
}
.arc-diagram-controls {
  position: absolute;
  top: 10px;
  right: 10px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  z-index: 2;
}
.arc-diagram-ctrl {
  width: 28px;
  height: 28px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  color: var(--arc-fg-2);
  line-height: 1;
  cursor: pointer;
  transition: background var(--arc-dur-fast) var(--arc-ease), color var(--arc-dur-fast) var(--arc-ease);
}
.arc-diagram-ctrl:hover { background: var(--arc-surface-hover); color: var(--arc-fg-1); }
.arc-diagram-ctrl:focus-visible { outline: none; box-shadow: var(--arc-ring-focus); }
.arc-diagram-node { cursor: pointer; }
.arc-diagram-node-rect {
  fill: var(--arc-bg-2);
  stroke: var(--arc-border-2);
  stroke-width: 1;
  transition: stroke var(--arc-dur-fast) var(--arc-ease);
}
.arc-diagram-node:hover .arc-diagram-node-rect { stroke: var(--arc-border-3); }
.arc-diagram-node:focus-visible { outline: none; }
.arc-diagram-node:focus-visible .arc-diagram-node-rect { stroke: var(--arc-border-focus); }
.arc-diagram-node-selected .arc-diagram-node-rect,
.arc-diagram-node-selected:hover .arc-diagram-node-rect {
  stroke: var(--arc-accent);
  stroke-width: 1.5;
  filter: drop-shadow(0 0 4px var(--arc-accent-soft));
}
.arc-diagram-node-body {
  box-sizing: border-box;
  width: 100%;
  height: 100%;
  padding: 10px 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: center;
  font-family: var(--arc-font-sans);
  font-size: 13px;
  line-height: 1.35;
  color: var(--arc-fg-1);
}
.arc-diagram-edge {
  fill: none;
  stroke: var(--arc-border-3);
  stroke-width: 1.5;
  stroke-linejoin: round;   /* orthogonal routing turns 90 degrees — miters would spike */
}
.arc-diagram-edge-label {
  font-family: var(--arc-font-sans);
  font-size: 11px;
  fill: var(--arc-fg-3);
  /* keep the label legible where it crosses its own edge */
  paint-order: stroke;
  stroke: var(--arc-bg-0);
  stroke-width: 3;
  /* the label paints above the fat hit path — let clicks fall through to it */
  pointer-events: none;
}
/* Invisible fat twin of the visible edge path — the actual click/focus target. */
.arc-diagram-edge-hit {
  fill: none;
  stroke: transparent;
  stroke-width: 14;
  stroke-linejoin: round;   /* a 14px miter would jut ~10px past an orthogonal corner */
  pointer-events: stroke;
  cursor: pointer;
  outline: none;
}
.arc-diagram-edge-selected {
  stroke: var(--arc-accent);
  stroke-width: 2;
  filter: drop-shadow(0 0 4px var(--arc-accent-soft));
}
/* The hit path can't style its earlier sibling directly — light up the pair via the wrapper.
   :not() keeps these (0,3,1) rules from out-ranking the selected accent on hover/focus. */
g:has(> .arc-diagram-edge-hit:hover) > .arc-diagram-edge:not(.arc-diagram-edge-selected) { stroke: var(--arc-border-focus); }
g:has(> .arc-diagram-edge-hit:focus-visible) > .arc-diagram-edge:not(.arc-diagram-edge-selected) { stroke: var(--arc-border-focus); }
.arc-diagram-edge-ghost {
  stroke: var(--arc-accent);
  stroke-width: 1.5;
  stroke-dasharray: 6 4;
  fill: none;
  pointer-events: none;
}
/* Port dots fade in on node hover; dragging one draws the ghost edge. Hit-testing ignores
   opacity, so an invisible port must not swallow pointer input — it only becomes a target
   while revealed (mouse hover). Touch has no hover: ports stay inert there rather than
   silently stealing node drags at the edge midpoints. */
.arc-diagram-port {
  fill: var(--arc-accent);
  stroke: var(--arc-bg-0);
  stroke-width: 1.5;
  opacity: 0;
  pointer-events: none;
  transition: opacity 80ms ease;
  cursor: crosshair;
}
/* Hover reveals them for mouse; selection reveals them for touch, which has no hover state
   (tap the node, then drag a port). Focus does the same for the keyboard-adjacent path. */
.arc-diagram-node:hover .arc-diagram-port,
.arc-diagram-node:focus-visible .arc-diagram-port,
.arc-diagram-node-selected .arc-diagram-port {
  opacity: 1;
  pointer-events: all;
}
.arc-diagram-connecting { cursor: crosshair; }
/* Applied from arc-diagram.js during a connect drag — pointer capture retargets boundary
   events to the host, so a plain :hover rule can never match the node under the cursor. */
.arc-diagram-node.arc-diagram-drop-target .arc-diagram-node-rect { stroke: var(--arc-accent); }
/* Minimap — overview + camera puck. Bottom-right; the zoom cluster owns top-right. */
.arc-diagram-minimap {
  position: absolute;
  right: 10px;
  bottom: 10px;
  z-index: 2;
  padding: 0;              /* OffsetX/Y are padding-box relative — the svg must start at (0,0) */
  line-height: 0;          /* no inline descender gap under the svg */
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  overflow: hidden;        /* a viewport rect wider than the content clips instead of spilling */
  cursor: pointer;
  touch-action: none;
}
/* The div must be the pointer target for every event: Blazor's OffsetX/OffsetY are relative to
   the TARGET, so a hit on a node rect would report coordinates inside that rect. pointer-events
   inherits, so one declaration covers the whole subtree. */
.arc-diagram-minimap-svg { display: block; pointer-events: none; }
.arc-diagram-minimap-node { fill: var(--arc-border-3); }
.arc-diagram-minimap-view {
  fill: var(--arc-accent-soft);
  stroke: var(--arc-accent);
  stroke-width: 1;
}
/* Swimlanes / containers — first inside the world <g>, so nodes and edges draw on top.
   pointer-events:none is load-bearing: a lane must never become a gesture surface, or a marquee
   started inside one would die and a connect drop would hit-test the wrong element. */
.arc-diagram-lane { pointer-events: none; }
.arc-diagram-lane-rect {
  fill: var(--arc-bg-1);        /* between the page and the card, so cards still read as raised */
  stroke: var(--arc-border-2);
  stroke-width: 1;
  stroke-dasharray: 4 4;        /* dashed reads "region"; solid 1px is the node card's language */
}
.arc-diagram-lane-head { fill: var(--arc-border-2); fill-opacity: 0.18; }
.arc-diagram-lane-title {
  font-family: var(--arc-font-sans);
  font-size: 12px;
  font-weight: 600;
  fill: var(--arc-fg-2);
}
.arc-diagram-minimap-lane { fill: var(--arc-bg-3); }

/* Shape palette — top-left; the zoom cluster owns top-right, the minimap bottom-right. */
.arc-diagram-palette {
  position: absolute;
  top: 10px;
  left: 10px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.arc-diagram-palette-btn {
  display: grid;
  place-items: center;
  width: 30px;
  height: 26px;
  padding: 0;
  border: 1px solid var(--arc-border-2);
  border-radius: var(--arc-radius-1);
  background: var(--arc-bg-1);
  color: var(--arc-fg-3);
  cursor: pointer;
}
.arc-diagram-palette-btn:hover { background: var(--arc-surface-hover); color: var(--arc-fg-1); }
.arc-diagram-palette-btn:focus-visible { outline: none; box-shadow: var(--arc-ring-focus); }
.arc-diagram-palette-btn svg { width: 20px; height: 14px; }
/* currentColor so the swatch tracks the button's hover/focus state */
.arc-diagram-palette-btn svg :is(rect, ellipse, path) {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.5;
}

/* Canvas annotations — free-floating text notes. Same <g class="arc-diagram-node"> as a card, so
   drag / marquee / selection / group delete / keyboard / minimap / export apply unchanged; only the
   frame paint and the graph-participation gates differ. No stroke declaration on purpose: it
   inherits --arc-border-2 from .arc-diagram-node-rect, which keeps the higher-specificity hover,
   focus-visible and selected rules working on a note for free. */
.arc-diagram-annotation-rect {
  /* transparent, NOT none: pointer-events defaults to visiblePainted, under which fill:none makes
     the interior a hole and the note is grabbable only by its glyphs. transparent is a paint, so
     the whole box stays a drag target and lane tints still show through. */
  fill: transparent;
  stroke-dasharray: 4 4;   /* the same "region, not card" language as .arc-diagram-lane-rect */
}
.arc-diagram-annotation-body {
  justify-content: flex-start;  /* notes read top-down; a card centres its single line */
  white-space: pre-wrap;        /* authored line breaks survive; FO_PROPS already exports this */
  color: var(--arc-fg-2);
}

/* Marquee rubber band. Positioned by arc-diagram.js during the drag; hidden otherwise. */
.arc-diagram-marquee {
  position: absolute;
  display: none;
  z-index: 1;              /* above the canvas, below the controls and minimap (z-index 2) */
  pointer-events: none;
  border: 1px solid var(--arc-accent);
  background: var(--arc-accent-soft);
  border-radius: 2px;
}
/* A marquee-enabled canvas no longer pans on a bare drag, so the inherited grab hand would lie.
   These out-specify the shipped single-class cursor rules, so those are restated one level up —
   the originals stay, and still serve every diagram without an overlay. */
.arc-diagram:has(> .arc-diagram-marquee) { cursor: default; }
.arc-diagram.arc-diagram-panning { cursor: grabbing; }
.arc-diagram.arc-diagram-marqueeing { cursor: crosshair; }
.arc-diagram.arc-diagram-pan-ready { cursor: grab; }
.arc-diagram.arc-diagram-connecting { cursor: crosshair; }

/* ===== Reduced motion — global guard =====
   Honor `prefers-reduced-motion: reduce` across the whole system: collapse every transition and
   animation (and smooth scroll) to ~instant so motion-sensitive users land on the end state
   without each component opting in. 0.01ms (not 0) keeps `transitionend`/`animationend` firing so
   JS that waits on them still completes. Components may layer richer, intentional motion on top
   via `@media (prefers-reduced-motion: no-preference)`. */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ─── ArcActivityChart — dense volume-over-time bars ──────────────────────────
   Flex, not SVG: bars need a pixel-exact 2px gutter and a radius on the top corners
   only, at any width. A stretched viewBox distorts both. */
.arc-activity-chart {
  display: flex;
  flex-direction: column;
  gap: 10px;
  font-family: var(--arc-font-sans);
}
.arc-activity-chart-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.arc-activity-chart-title {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--arc-fg-1);
  letter-spacing: -0.005em;
}
.arc-activity-chart-subtitle {
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
  flex: none;
}
.arc-activity-chart-plot {
  display: flex;
  align-items: flex-end;
  width: 100%;
  min-height: 24px;
}
/* One slot per bucket. Carries the hover/tooltip so the hit area spans the gutter too,
   and the 1px side padding is what creates the 2px gap between neighbouring bars. */
.arc-activity-chart-band {
  flex: 1 1 0;
  display: flex;
  align-items: flex-end;
  justify-content: center;
  height: 100%;
  min-width: 0;
  padding: 0 1px;
}
.arc-activity-chart-bar {
  width: 100%;
  max-width: 24px;              /* mark spec: cap the thickness, let the slot's leftover be air */
  min-height: 2px;              /* a small-but-nonzero bucket stays visible */
  border-radius: 4px 4px 0 0;   /* rounded data-end, square at the baseline */
  background: var(--arc-chart-bar);
  transition: background var(--arc-dur-fast) var(--arc-ease);
}
.arc-activity-chart-bar-emphasis { background: var(--arc-chart-bar-emphasis); }

/* Stacked form: the bar becomes a column of segments. Series[0] is rendered last in markup
   so it lands at the bottom, which makes :first-child the top of the stack. */
.arc-activity-chart-bar-stacked {
  display: flex;
  flex-direction: column;
  background: none;              /* the segments carry the fill */
  overflow: hidden;              /* clip segment corners to the bar's radius */
}
.arc-activity-chart-seg {
  min-height: 2px;
  /* The 2px surface gap between touching fills, as a transparent bottom border rather than
     flex `gap`: a gap would compete with the percentage flex-basis and distort the segment
     proportions. background-clip stops the fill at the padding edge so the border shows the
     surface behind it. */
  border-bottom: 2px solid transparent;
  background-clip: padding-box;
}
.arc-activity-chart-seg:last-child { border-bottom: 0; }
.arc-activity-chart-band:hover .arc-activity-chart-seg { filter: brightness(1.18); }
/* The shared chart legend centres itself under an SVG plot; here the title, bars and axis
   labels all start at the left edge, so a centred legend reads as misaligned. */
.arc-activity-chart .arc-chart-legend { justify-content: flex-start; }

@media (prefers-reduced-motion: reduce) {
  .arc-activity-chart-seg { transition: none; }
}
.arc-activity-chart-band:hover .arc-activity-chart-bar { background: var(--arc-fg-2); }
.arc-activity-chart-band:hover .arc-activity-chart-bar-emphasis {
  background: color-mix(in srgb, var(--arc-chart-bar-emphasis) 80%, var(--arc-fg-1));
}
.arc-activity-chart-axis {
  display: flex;
  justify-content: space-between;
  font-family: var(--arc-font-mono);
  font-size: 11.5px;
  color: var(--arc-fg-3);
}
/* A single label would sit hard left under space-between; centre it instead. */
.arc-activity-chart-axis:has(.arc-activity-chart-axis-label:only-child) { justify-content: center; }

@media (prefers-reduced-motion: reduce) {
  .arc-activity-chart-bar { transition: none; }
}