/* ============================================================================
   Agentimus — admin UI
   Aesthetic: "technical broadsheet". Warm paper, dark ink masthead, editorial
   serif headings + monospace data. Scoped under #agentimus-app so nothing
   leaks into wp-admin. No external fonts (wordpress.org rule); system stacks.
   ========================================================================= */

/* Page-level: make our admin screen full-bleed. This file loads only on the
   Agentimus page, so these wp-admin overrides never touch other screens. */
#wpcontent { padding-left: 0; }
.wrap { margin: 0; }

/* Design tokens — defined globally rather than only on #agentimus-app. Custom
   properties are inert (they paint nothing until a property references them),
   so this leaks no visuals into wp-admin, but it DOES let UI we Teleport to
   <body> (toasts, the reset modal) read the same tokens. Visual rules below
   stay scoped to .ar-* / #agentimus-app. */
:root {
  /* Type */
  --ar-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif;
  --ar-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace;
  --ar-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;

  /* Paper & ink */
  --ar-paper: #f3f0e7;
  --ar-surface: #fffdf7;
  --ar-surface-2: #faf6ec;
  --ar-ink: #1b1913;
  --ar-ink-soft: #6c675a;
  --ar-ink-faint: #9a937f;
  --ar-line: #e4ddcb;
  --ar-line-strong: #d3cab2;

  /* Signal */
  --ar-accent: #146b64;
  --ar-good: #2f7a4c;
  --ar-warn: #ad7b18;
  --ar-bad: #b93c2b;

  --ar-radius: 4px;
  /* Shared height for the nav bar and the page-head below it, so the two strips
     are always exactly the same height. Change here, both follow. */
  --ar-bar-h: 72px;
}

#agentimus-app {

  /* Full-bleed: wp-admin's content padding is neutralized below, so the app
     fills the admin body edge-to-edge with no left/right gap. Transparent so it
     sits on wp-admin's own background — no floating "document" panel. */
  margin: 0 0 24px;
  container-type: inline-size;
  color: var(--ar-ink);
  font-family: var(--ar-sans);
  font-size: 14px;
  line-height: 1.5;
  background: transparent;
}
#agentimus-app * { box-sizing: border-box; }
/* Breathing room when a dashboard tile scrolls a section to the top. */
#agentimus-app [id^="ar-wd-"] { scroll-margin-top: 16px; }
#agentimus-app code { font-family: var(--ar-mono); font-size: 0.86em; }

/* ---- Header bar (brand · tabs · gauge in one slim row) ------------------ */
.ar__bar {
  display: flex;
  align-items: stretch;
  gap: 26px;
  /* Match .ar__body's 34px so the brand mark and gauge line up with the
     content cards' left/right edges. */
  padding: 0 34px;
  min-height: var(--ar-bar-h);
  background: var(--ar-surface);
  border-bottom: 1px solid var(--ar-line);
}

/* Brand — clickable, returns to the default (Settings) tab. */
.ar__brand {
  flex: 0 0 auto;
  display: flex; align-items: center; gap: 11px; align-self: center;
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer;
  transition: opacity 0.15s;
}
.ar__brand:hover { opacity: 0.82; }
.ar__brand:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 4px; border-radius: 6px; }
.ar__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border-radius: 8px;
  background: var(--ar-ink); color: var(--ar-paper);
  /* Framed-icon look: a gap in the bar colour, then an offset accent ring,
     so the ring reads as a clean frame rather than a muddy edge. */
  box-shadow:
    0 0 0 2px var(--ar-surface),
    0 0 0 3px var(--ar-accent),
    0 1px 5px -1px rgba(27, 25, 19, 0.25);
}
/* Name + version stacked, both flush-left, within the 30px mark height. The
   wordmark sets the column width; the version line is justified (spread by
   letter-spacing) to fill that exact width — so line 2 matches line 1's width. */
.ar__brandtext {
  display: inline-flex; flex-direction: column; align-items: stretch;
  justify-content: center; gap: 5px;
}
/* SVG "AR" monogram — paper strokes with a gold accent on the A's crossbar. */
.ar__logo { width: 18px; height: auto; display: block; }
.ar__logo-line { stroke: var(--ar-paper); stroke-width: 2.4; }
.ar__logo-accent { stroke: var(--ar-warn); stroke-width: 2.2; }

.ar__name {
  font-family: var(--ar-serif); font-weight: 600; font-size: 16px; line-height: 1;
  letter-spacing: -0.01em; color: var(--ar-ink);
}
.ar__ver {
  /* Same gold as the readiness gauge / 6-of-11 figure. */
  font-family: var(--ar-sans); font-size: 9px; line-height: 1; color: var(--ar-warn);
  text-align: justify;
  text-align-last: justify;
  text-justify: inter-character;
  -moz-text-align-last: justify;
}

/* Brand / nav separator — a small right-pointing arrow whose tip is a gold gem:
   two angled bars meet at a framed gold node that points toward the menu. The gold
   echoes the version line + logo crossbar, the ring echoes the logo's framed mark.
   Sets the masthead apart from the menu; no motion, no layout shift. */
.ar__sep {
  flex: 0 0 auto;
  align-self: center;
  display: inline-flex;
  /* The bar uses a uniform 26px gap; pull the arrow in toward the brand so it sits
     closer to the logo/wordmark, leaving the arrow → menu spacing untouched. */
  margin-left: -10px;
}
.ar__sep svg { display: block; }
.ar__sep-chev {
  stroke: var(--ar-line-strong);
  stroke-width: 1.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}
.ar__sep-ring { stroke: rgba(173, 123, 24, 0.45); stroke-width: 1; }
.ar__sep-node { fill: var(--ar-warn); filter: drop-shadow(0 0 2px rgba(173, 123, 24, 0.45)); }

/* Tabs — inline in the bar, active item underlined at the bar's base. The strip
   takes the space left of the brand and scrolls horizontally when it can't fit,
   so no tab is ever clipped on narrow screens. */
.ar__tabs {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: stretch; gap: 24px;
  overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none;
}
.ar__tabs::-webkit-scrollbar { display: none; }
.ar__tab {
  appearance: none; background: none; border: 0; cursor: pointer;
  flex: 0 0 auto; white-space: nowrap;
  display: flex; align-items: center; padding: 0 2px;
  font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase;
  color: var(--ar-ink-faint);
  border-bottom: 2px solid transparent; margin-bottom: -1px;
  transition: color 0.15s;
}
.ar__tab:hover { color: var(--ar-ink-soft); }
.ar__tab.is-active { color: var(--ar-ink); border-bottom-color: var(--ar-accent); }

/* ---- Nav "Activity to review" badge + dropdown ------------------------- */
.ar__review { flex: 0 0 auto; align-self: center; position: relative; }
.ar__review-btn {
  appearance: none; cursor: pointer;
  display: inline-flex; align-items: center; gap: 6px;
  padding: 5px 9px; border-radius: 999px;
  border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink-soft);
  transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease;
}
.ar__review-btn:hover,
.ar__review.is-open .ar__review-btn { color: var(--ar-ink); border-color: var(--ar-ink-faint); background: var(--ar-surface-2); }
/* Resting state — logging on, nothing flagged: a calm anchor with a softer border
   and no red count, so a populated queue (red badge) is what draws the eye. */
.ar__review.is-quiet .ar__review-btn { border-color: var(--ar-line); }
.ar__review-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar__review-count {
  font-family: var(--ar-mono); font-size: 10px; font-weight: 700; line-height: 1;
  min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--ar-bad); color: var(--ar-paper);
}
.ar__review-caret { color: var(--ar-ink-faint); transition: transform 0.18s ease; }
.ar__review.is-open .ar__review-caret { transform: rotate(180deg); }
.ar__review-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 400px; max-width: calc(100cqw - 32px);
  max-height: 72vh; overflow-y: auto;
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius);
  box-shadow: 0 14px 36px -12px rgba(27, 25, 19, 0.45);
  padding: 16px 18px;
}
.ar__review-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ar__review-title { font-family: var(--ar-serif); font-size: 16px; font-weight: 600; color: var(--ar-ink); }
.ar__review-lead { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar__review-empty { margin: 6px 0; font-size: 13px; color: var(--ar-ink-soft); }
/* Dropdown rows always stack (container queries key off the app width, not the popover). */
.ar__review-pop .ar-susp-row { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 0; }
.ar__review-pop .ar-susp-row:first-child { padding-top: 6px; }
.ar__review-pop .ar-susp-row__action { justify-self: start; text-align: left; max-width: none; }

/* ---- Page header (per-tab title + intro, below the nav bar) ------------- */
.ar__pagehead {
  /* Locked to the nav bar's exact height (shared token) and the content is
     vertically centred — so the title/intro never make this strip taller or
     shorter than the nav above it, whatever the per-tab text. */
  height: var(--ar-bar-h);
  display: flex; flex-direction: column; justify-content: center;
  padding: 0 34px;
  background: var(--ar-surface);
  border-bottom: 1px solid var(--ar-line);
}
/* #agentimus-app lifts specificity (1,1,0) above wp-admin's core .wrap h1
   (0,1,1), which would otherwise force 23px / weight 400 / 5px padding onto our
   title and inflate the page header. padding:0 explicitly drops the .wrap h1 5px. */
#agentimus-app .ar__pagehead-title {
  margin: 0; padding: 0;
  font-family: var(--ar-serif); font-weight: 600; font-size: 22px;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--ar-ink);
}
.ar__pagehead-desc {
  margin: 0; font-size: 13px; line-height: 1.5; color: var(--ar-ink-soft);
  /* Keep to one line so the header height stays locked to the nav's 72px;
     truncates with an ellipsis only on very narrow viewports. */
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Readiness rail widget — gauge + stat, lives in the side panel on every tab. */
.ar-rail-readiness { display: flex; align-items: center; gap: 15px; }
.ar-rail-gauge { position: relative; flex: 0 0 auto; width: 62px; height: 62px; }
.ar-rail-gauge svg { width: 62px; height: 62px; transform: rotate(-90deg); }
.ar-rail-gauge__track { fill: none; stroke: var(--ar-line); stroke-width: 7; }
.ar-rail-gauge__fill {
  fill: none;
  stroke: var(--ar-accent);
  stroke-width: 7;
  stroke-linecap: round;
  transition: stroke-dashoffset 1.1s cubic-bezier(0.22, 1, 0.36, 1);
}
.ar-rail-gauge__fill[data-tone="good"] { stroke: var(--ar-good); }
.ar-rail-gauge__fill[data-tone="ok"] { stroke: var(--ar-warn); }
.ar-rail-gauge__fill[data-tone="low"] { stroke: var(--ar-bad); }
.ar-rail-gauge__num {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--ar-mono); font-size: 15px; font-weight: 600; color: var(--ar-ink);
}
.ar-rail-gauge__num small { font-size: 9px; opacity: 0.55; }

/* Tier badge beside the gauge: the one-word standing on the ladder. */
.ar-rail-tier { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-rail-tier__name {
  font-family: var(--ar-serif); font-size: 19px; font-weight: 600; line-height: 1.05;
  color: rgba(243, 240, 231, 0.92);
}
.ar-rail-tier[data-state="top"] .ar-rail-tier__name { color: #5cc08a; }
.ar-rail-tier[data-state="floor"] .ar-rail-tier__name { color: #e08a72; }
.ar-rail-tier__sub {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(243, 240, 231, 0.45);
}

/* The three-rung strip under the gauge: name + tally, with a state dot. */
.ar-rungs { list-style: none; margin: 14px 0 0; padding: 0; display: grid; gap: 8px; }
.ar-rung {
  display: flex; align-items: center; gap: 9px;
  font-family: var(--ar-mono); font-size: 12px; color: rgba(243, 240, 231, 0.4);
}
.ar-rung__tick {
  position: relative; flex: 0 0 auto; width: 13px; height: 13px;
  border-radius: 50%; border: 1.5px solid currentColor;
}
.ar-rung__name { flex: 1; min-width: 0; }
.ar-rung__count { font-size: 11px; opacity: 0.85; }
.ar-rung[data-state="done"] { color: #5cc08a; }
.ar-rung[data-state="done"] .ar-rung__tick { background: currentColor; }
.ar-rung[data-state="current"] { color: #e0b24c; }
.ar-rung[data-state="current"] .ar-rung__tick::after {
  content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor;
}
/* The next-step CTA: always a single centred line — clip with an ellipsis rather
   than wrap, since the check label that fills it varies in length. */
.ar-rail-next {
  display: block; width: 100%; text-align: center;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* Dark variant of the Readiness rail card. Double class so it outranks the base
   .ar-rail-card background regardless of source order. */
.ar-rail-card.ar-rail-card--readiness { background: var(--ar-ink); border-color: var(--ar-ink); }
.ar-rail-card--readiness .ar-rail-card__label { color: rgba(243, 240, 231, 0.5); }
.ar-rail-card--readiness .ar-rail-gauge__track { stroke: rgba(243, 240, 231, 0.15); }
.ar-rail-card--readiness .ar-rail-gauge__num { color: rgba(243, 240, 231, 0.62); }
.ar-rail-card--readiness .ar-rail-allgood { color: #5cc08a; }
/* Brightened gauge tones for contrast on the dark card. */
.ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="good"] { stroke: #5cc08a; }
.ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="ok"] { stroke: #e0b24c; }
.ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="low"] { stroke: #e08a72; }
.ar-rail-card--readiness .ar-rail-link { color: #57b6a6; }
.ar-rail-card--readiness .ar-rail-link:hover { color: #6fc7b8; }

/* ---- Toast (teleported to <body>, so no UI shift & viewport-fixed) ------- */
/* Self-contained: it lives outside #agentimus-app, so it can't rely on the CSS
   variables defined there — radius/font are hardcoded. */
.ar-toast {
  position: fixed;
  top: 36px;   /* tucked into the nav-bar band, just below the wp-admin bar */
  right: 34px; /* aligns with the content's right edge (.ar__body padding) */
  z-index: 100000;
  display: flex;
  align-items: stretch;
  min-width: 268px;
  max-width: 400px;
  background: #fffefb;
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 0 14px 36px -10px rgba(27, 25, 19, 0.42), 0 0 0 1px rgba(27, 25, 19, 0.06);
  font-family: ui-monospace, "SF Mono", "JetBrains Mono", Menlo, Consolas, monospace;
}
.ar-toast__bar { flex: 0 0 4px; background: #9a937f; }
.ar-toast__body { display: flex; flex-direction: column; gap: 3px; padding: 11px 15px; min-width: 0; }
.ar-toast__title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: #1b1913;
}
.ar-toast__msg { font-size: 13px; line-height: 1.4; color: #4a463d; }

.ar-toast.is-success .ar-toast__bar { background: #2f9e5e; }
.ar-toast.is-success .ar-toast__title { color: #1d7a45; }
.ar-toast.is-error .ar-toast__bar { background: #c0392b; }
.ar-toast.is-error .ar-toast__title { color: #a3271a; }
.ar-toast.is-warning .ar-toast__bar { background: #d99a1c; }
.ar-toast.is-warning .ar-toast__title { color: #936713; }

/* Slide in from the right (right-to-left), out to the right. */
.ar-toast-enter-active { transition: opacity 0.3s ease, transform 0.4s cubic-bezier(0.22, 1, 0.36, 1); }
.ar-toast-leave-active { transition: opacity 0.25s ease, transform 0.3s ease; }
.ar-toast-enter-from, .ar-toast-leave-to { opacity: 0; transform: translateX(calc(100% + 24px)); }
@media (prefers-reduced-motion: reduce) {
  .ar-toast-enter-active, .ar-toast-leave-active { transition: opacity 0.2s; }
  .ar-toast-enter-from, .ar-toast-leave-to { transform: none; }
}

/* ---- Body / cards ------------------------------------------------------- */
.ar__body { padding: 26px 34px; }
.ar__body.is-railed {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 286px;
  gap: 26px;
  align-items: start;
}
.ar__main { display: grid; gap: 22px; min-width: 0; }
/* On wide screens the rail owns the endpoints list (the form's copy hides). */
.ar__body.is-railed .ar-card--endpoints { display: none; }

/* ---- Right rail --------------------------------------------------------- */
.ar__rail { position: sticky; top: 46px; display: grid; gap: 14px; align-content: start; }
.ar-rail-card {
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  padding: 16px 18px;
}
.ar-rail-card__label {
  margin: 0 0 11px;
  font-family: var(--ar-mono);
  font-size: 10px;
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ar-ink-faint);
}
.ar-rail-link {
  appearance: none; background: none; border: 0; padding: 10px 0 0; cursor: pointer;
  font-family: var(--ar-mono); font-size: 12px; color: var(--ar-accent);
}
/* No underline-on-hover — feedback is the colour shift (brightened on the dark
   readiness card), so the next-step line reads as an affordance, not a hyperlink. */
.ar-rail-link:hover { color: var(--ar-ink-soft); }
.ar-rail-allgood { margin: 9px 0 0; font-size: 12px; color: var(--ar-good); }
.ar-rail-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ar-rail-links a {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink); text-decoration: none;
}
.ar-rail-links a::before { content: "↳"; color: var(--ar-accent); }
.ar-rail-links a:hover { color: var(--ar-accent); }

/* Save block — bottom of the rail; full-width black button. */
/* Autosave status — a centred pill that only appears while saving / just saved /
   on error (the idle state renders nothing, so there's no standing "Auto-save on"). */
.ar-rail-save {
  display: flex; align-items: center; justify-content: center; gap: 8px;
  width: fit-content; margin: 0 auto;
  padding: 8px 16px; border-radius: 999px;
  border: 1px solid transparent;
  transition: background 0.2s ease, border-color 0.2s ease;
}
.ar-rail-save__dot {
  width: 9px; height: 9px; border-radius: 50%; flex: 0 0 auto;
  background: var(--ar-line-strong); transition: background 0.15s ease;
}
.ar-rail-save__label {
  font-family: var(--ar-mono); font-size: 12px; letter-spacing: 0.04em;
  color: var(--ar-ink-faint); font-weight: 600;
}
/* Saving — the prominent, eye-catching state, with a gentle activity pulse that
   runs only while a save is in flight, then settles into "Saved". */
.ar-rail-save.is-saving { background: rgba(20, 107, 100, 0.10); border-color: rgba(20, 107, 100, 0.32); }
.ar-rail-save.is-saving .ar-rail-save__dot { background: var(--ar-accent); animation: ar-save-pulse 1s ease-in-out infinite; }
.ar-rail-save.is-saving .ar-rail-save__label { color: var(--ar-accent); font-size: 13px; }
.ar-rail-save.is-saved { background: rgba(47, 158, 94, 0.10); border-color: rgba(47, 158, 94, 0.28); }
.ar-rail-save.is-saved .ar-rail-save__dot { background: #2f9e5e; }
.ar-rail-save.is-saved .ar-rail-save__label { color: #2f9e5e; }
.ar-rail-save.is-error { background: rgba(173, 123, 24, 0.10); border-color: rgba(173, 123, 24, 0.32); }
.ar-rail-save.is-error .ar-rail-save__dot { background: var(--ar-warn); }
.ar-rail-save.is-error .ar-rail-save__label { color: var(--ar-warn); }
@keyframes ar-save-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .ar-rail-save.is-saving .ar-rail-save__dot { animation: none; } }
.ar-btn--block { width: 100%; }
/* Stack the rail below the form when the panel gets narrow (sidebar-aware), so
   the Save block at its foot stays reachable. The rail keeps the endpoints, so
   the form's duplicate endpoints card stays hidden. */
@container (max-width: 900px) {
  .ar__body.is-railed { display: block; }
  .ar__rail { position: static; margin-top: 22px; }
}

/* Narrow widths: stack the header into two rows so no tab is ever hidden. Below
   ~720px the inline tab strip can't fit all four and would scroll silently (the
   rightmost tabs vanish with no scrollbar to hint at them). Row 1 is the brand
   alone; row 2 is the navbar itself — tabs spread across it with the bell pinned
   to the right (a touch smaller) so the notification sits on the menu row. */
@container (max-width: 720px) {
  .ar__bar {
    flex-wrap: wrap;
    align-items: center;
    /* Row-gap applies twice across the invisible break line → ~12px brand↔nav. */
    gap: 6px 16px;
    padding: 11px 16px;
    min-height: 0;
  }
  /* Repurpose the brand→nav arrow as an invisible full-width line break: it bumps
     the tabs + bell onto the row below while leaving the brand its own top row —
     without turning the brand button itself into a full-width tap target. */
  .ar__sep { display: block; flex-basis: 100%; height: 0; margin: 0; }
  .ar__sep svg { display: none; }
  /* Condense the masthead: drop the version line, shrink the mark + wordmark. */
  .ar__ver { display: none; }
  .ar__mark { width: 26px; height: 26px; }
  .ar__logo { width: 16px; }
  .ar__name { font-size: 15px; }
  /* Navbar row: tabs sit together at the left (a calm menu-style gap, not spread
     edge-to-edge) and wrap instead of scrolling; the bell stays pinned to the
     right. flex-basis:0 lets the tab strip shrink-to-fit beside the bell so the
     bell never gets bumped onto its own line on a phone. */
  .ar__tabs {
    flex: 1 1 0; min-width: 0;
    flex-wrap: wrap;
    overflow: visible;
    gap: 9px 22px;
  }
  .ar__review { flex: 0 0 auto; align-self: center; }
  /* Slightly smaller bell so it reads as a peer of the tab labels, not a button
     looming over them. */
  .ar__review-btn { padding: 4px 7px; gap: 5px; }
  .ar__review-btn > svg:first-child { width: 13px; height: 13px; }
  .ar__review-caret { width: 10px; height: 10px; }
  .ar__pagehead { padding-left: 16px; padding-right: 16px; }
  .ar__body { padding: 20px 16px; }
}

.ar-card {
  position: relative;
  background: var(--ar-surface);
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  padding: 24px 26px;
}
.ar-card--muted { background: var(--ar-surface-2); }
.ar-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ar-card__title {
  margin: 0 0 3px;
  font-family: var(--ar-serif);
  font-weight: 600;
  font-size: 19px;
  letter-spacing: -0.01em;
  color: var(--ar-ink);
}
.ar-card__lead { margin: 0 0 18px; color: var(--ar-ink-soft); font-size: 13px; max-width: 95ch; }
/* Quiet aside that clarifies a control's scope (e.g. "advertises, not enforces"). */
.ar-card__note {
  margin: 14px 0 0; padding: 9px 12px; max-width: 88ch;
  border-left: 2px solid var(--ar-line-strong); border-radius: 0 var(--ar-radius) var(--ar-radius) 0;
  background: #faf8f2; color: var(--ar-ink-faint); font-size: 12px; line-height: 1.5;
}
.ar-card__note strong { color: var(--ar-ink-soft); font-weight: 600; }
.ar-card__note code { font-size: 11px; }
/* Grouped panel for the AI opt-out channels published beyond robots.txt:
   a quiet inset card so the eyebrow + explainer + channel toggles read as one
   intentional unit rather than loose lines on the card. */
.ar-channels-panel {
  margin-top: 18px;
  padding: 15px 18px 16px;
  background: var(--ar-surface-2);
  border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
}
.ar-channels-panel__head {
  display: flex; align-items: center; gap: 9px; margin-bottom: 9px;
  font-family: var(--ar-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-soft);
}
.ar-channels-panel__head .ar-field__tag { margin: 0; }
.ar-channels-panel__lead { margin: 0; color: var(--ar-ink-soft); font-size: 13px; line-height: 1.55; }
.ar-channels-panel__note { margin: 9px 0 0; color: var(--ar-ink-faint); font-size: 12px; line-height: 1.5; }
.ar-channels-panel details { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ar-line); }

/* Small scope chip next to a card title, e.g. "Last 30 days". */
.ar-card__tag {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong);
  padding: 2px 7px; border-radius: 999px; margin-left: 9px; vertical-align: 3px; white-space: nowrap;
}

/* Numbered sections inside the settings form, spec-sheet style. */
.ar-form { counter-reset: arcard; display: grid; gap: 22px; }
.ar-form .ar-card { counter-increment: arcard; }
.ar-form .ar-card .ar-card__title::before {
  content: counter(arcard, decimal-leading-zero);
  margin-right: 12px;
  font-family: var(--ar-mono);
  font-size: 12px;
  font-weight: 400;
  color: var(--ar-accent);
  vertical-align: 3px;
}

/* ---- Toggles ------------------------------------------------------------ */
.ar-toggle {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 13px 0; border-top: 1px solid var(--ar-line); cursor: pointer;
}
.ar-toggle:first-of-type { border-top: 0; padding-top: 2px; }
.ar-toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.ar-toggle__track {
  position: relative; flex: 0 0 auto; width: 40px; height: 22px; margin-top: 1px;
  background: #d8d2c2; border-radius: 999px; transition: background 0.18s;
}
.ar-toggle__track::after {
  content: ""; position: absolute; top: 2px; left: 2px;
  width: 18px; height: 18px; background: #fff; border-radius: 50%;
  transition: transform 0.18s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.ar-toggle input:checked + .ar-toggle__track { background: var(--ar-accent); }
.ar-toggle input:checked + .ar-toggle__track::after { transform: translateX(18px); }
.ar-toggle input:focus-visible + .ar-toggle__track { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-toggle__text { display: flex; flex-direction: column; gap: 1px; }
.ar-toggle__text strong { font-size: 14px; font-weight: 600; }
.ar-toggle__text small { color: var(--ar-ink-soft); font-size: 12px; }

/* Provider-integration row: a metadata line (type · plugin · capabilities). */
.ar-prov-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-top: 2px; }
.ar-prov-meta > * { position: relative; }
.ar-prov-meta > * + *::before { content: "·"; position: absolute; left: -7px; color: var(--ar-line-strong); }
.ar-prov-meta code { font-size: 11px; }
.ar-prov { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-accent); }

/* Allowed / Blocked status pill on each signal toggle. */
.ar-signal-state {
  margin-left: auto; align-self: center; flex: 0 0 auto;
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 999px; border: 1px solid;
}
.ar-signal-state.is-allow { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-signal-state.is-block { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; }

/* Crawler hard-block editor body (shown when training is Allowed, or on Customize). */
.ar-enforce-body { margin-top: 10px; }

/* Small inline tag in a field label, e.g. "Content-Signal" / "optional". */
.ar-field__tag {
  font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em;
  color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong);
  padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px;
}

/* ---- Fields ------------------------------------------------------------- */
.ar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 18px; }
/* The identity block sets its own top padding, so its leading grid stays flush. */
.ar-id-block > .ar-grid { margin-top: 0; }
.ar-field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; }
.ar-field:first-child { margin-top: 0; }
/* Grid fields sit side by side — keep their tops aligned, not stair-stepped. */
.ar-grid .ar-field { margin-top: 0; }
.ar-field > label {
  font-family: var(--ar-mono);
  font-size: 11px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--ar-ink-soft);
}
.ar-field__hint { color: var(--ar-ink-soft); font-size: 12px; line-height: 1.5; margin-top: 2px; }
.ar-field--inline { flex-direction: row; align-items: center; gap: 12px; margin-top: 20px; }
.ar-field--inline label {
  font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ar-ink-soft);
}

.ar-input {
  width: 100%; padding: 9px 11px; font-size: 14px; font-family: var(--ar-sans);
  border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius);
  background: #fffefb; color: var(--ar-ink);
  transition: border-color 0.15s, box-shadow 0.15s;
}
.ar-input:focus {
  outline: none; border-color: var(--ar-accent);
  box-shadow: 0 0 0 3px rgba(20, 107, 100, 0.13);
}
.ar-input--sm { width: 96px; font-family: var(--ar-mono); }
textarea.ar-input { resize: vertical; line-height: 1.55; }
/* Custom chevron so the select matches the text inputs' height exactly. */
select.ar-input {
  cursor: pointer;
  appearance: none;
  -webkit-appearance: none;
  padding-right: 34px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath d='M2 4.5l4 4 4-4' fill='none' stroke='%236c675a' stroke-width='1.4' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 12px center;
}

.ar-warn { color: var(--ar-bad); }

/* Services: each service is its own compact card — two rows (name + url, then
   description), with a × in the top corner to remove. */
.ar-svc {
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 10px 11px;
  margin-top: 8px;
  border: 1px solid var(--ar-line-strong);
  border-radius: var(--ar-radius);
  background: var(--ar-paper);
  box-shadow: 0 1px 3px rgba(27, 25, 19, 0.06);
}
.ar-svc:first-of-type { margin-top: 6px; }
.ar-svc__row { display: flex; flex-wrap: wrap; gap: 8px; padding-right: 24px; }
.ar-svc__name { flex: 3 1 180px; min-width: 0; }
.ar-svc__url { flex: 1 1 150px; min-width: 0; }
/* Compact the fields so a service reads in one glance. */
.ar-svc .ar-input { padding: 6px 9px; font-size: 13px; }
.ar-svc__x {
  position: absolute;
  top: 5px;
  right: 6px;
  width: 22px;
  height: 22px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  font-size: 18px;
  line-height: 1;
  color: var(--ar-ink-soft);
  background: transparent;
  border: 0;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
}
.ar-svc__x:hover { background: rgba(27, 25, 19, 0.08); color: var(--ar-ink); }
/* Plain text button, right-aligned. */
.ar-svc__add {
  display: block;
  width: fit-content;
  margin: 8px 0 0 auto;
  padding: 2px 0;
  font-size: 13px;
  color: var(--ar-accent);
  background: transparent;
  border: 0;
  cursor: pointer;
}
.ar-svc__add:hover { text-decoration: underline; }
.ar-signals { display: flex; flex-direction: column; }

/* Known-crawler suggestions */
.ar-suggest { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin-top: 8px; }
.ar-suggest__label {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ar-ink-faint); margin-right: 2px;
}
.ar-suggest__chip {
  appearance: none; cursor: pointer;
  font-family: var(--ar-mono); font-size: 12px;
  padding: 3px 9px; border-radius: 3px;
  background: transparent; color: var(--ar-ink-soft);
  border: 1px dashed var(--ar-line-strong);
  transition: border-color 0.15s, color 0.15s, background 0.15s;
}
.ar-suggest__chip:hover { border-style: solid; border-color: var(--ar-accent); color: var(--ar-accent); background: #eef5f3; }

.ar-linkbtn {
  appearance: none; background: none; border: 0; padding: 0; margin-left: 4px; cursor: pointer;
  font: inherit; color: var(--ar-accent); text-decoration: underline;
}
.ar-linkbtn:hover { color: var(--ar-ink); }

/* Content types — compact, scalable selectable cards */
/* Same grid as the cards below, so the search lines up to the columns. */
.ar-types-bar {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr));
  gap: 9px; align-items: center; margin: 4px 0 14px;
}
.ar-types-search { grid-column: 1 / span 2; padding: 9px 13px; } /* exactly two cards wide */
.ar-types-meta { grid-column: 3 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.ar-types-count { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
.ar-types-bar .ar-linkbtn { font-family: var(--ar-mono); font-size: 11px; text-decoration: none; }
.ar-types-bar .ar-linkbtn:hover { text-decoration: underline; }

/* Scroll only when the list gets long; small sites never scroll. */
.ar-types-scroll {
  max-height: 336px; overflow-y: auto; margin: 4px -4px 0; padding: 8px 4px;
  /* Fade rows in/out at the edges so scrolled cards don't visually merge into
     the filter above (or run hard against the bottom). */
  -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
          mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent);
}
.ar-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 9px; }
.ar-types-empty { grid-column: 1 / -1; margin: 6px 2px; font-size: 12.5px; color: var(--ar-ink-soft); }

/* Identity "compose then save" block — free text grouped as its own unit with a
   footer Save. The chip fields below it (expertise, profile URLs) autosave. */
.ar-id-block { border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: #fffefb; padding: 16px 16px 0; margin: 2px 0 16px; }
.ar-id-block > .ar-field:last-of-type { margin-bottom: 0; }
.ar-id-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--ar-line); margin: 14px -16px 0; padding: 12px 16px; }
.ar-id-foot__status { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); margin-right: auto; }
.ar-id-foot__status.is-dirty { color: var(--ar-accent); }
.ar-id-foot__status.is-saved { color: #2f9e5e; }

.ar-type {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 10px 26px 10px 14px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
  background: #fffefb; cursor: pointer; transition: border-color 0.15s, background 0.15s;
}
.ar-type:hover { border-color: var(--ar-line-strong); }
.ar-type.is-on { border-color: var(--ar-accent); background: #f0f6f4; }
.ar-type input { position: absolute; opacity: 0; width: 0; height: 0; }

/* No visible checkbox — the whole card is the control. Selected reads as the
   accent border + tint (above) plus a small corner tick. */
.ar-type__check { display: none; }
.ar-type.is-on::after {
  content: "✓"; position: absolute; top: 8px; right: 11px;
  font-size: 11px; line-height: 1; font-weight: 700; color: var(--ar-accent);
}
/* The real <input> is visually hidden, so ring the whole card on keyboard focus. */
.ar-type:focus-within { border-color: var(--ar-accent); outline: 2px solid var(--ar-accent); outline-offset: 2px; }

.ar-type__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-type__label {
  font-size: 13.5px; font-weight: 600; color: var(--ar-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-type__meta { display: flex; align-items: center; gap: 6px; min-width: 0; }
.ar-type__src { font-family: var(--ar-mono); font-size: 10px; color: var(--ar-accent); white-space: nowrap; }
.ar-type__meta code {
  font-family: var(--ar-mono); font-size: 10px; color: var(--ar-ink-faint);
  background: var(--ar-surface-2); padding: 1px 5px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}

/* ---- Tag input ---------------------------------------------------------- */
.ar-tags {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  padding: 7px; border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); background: #fffefb;
}
.ar-tags:focus-within { border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(20, 107, 100, 0.13); }
.ar-tags__list { display: contents; margin: 0; padding: 0; list-style: none; }
.ar-tags__chip {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 4px 6px 4px 9px;
  background: var(--ar-ink); color: var(--ar-paper);
  border-radius: 3px; font-family: var(--ar-mono); font-size: 12px;
}
.ar-tags__x {
  appearance: none; border: 0; background: none; cursor: pointer;
  color: rgba(243, 240, 231, 0.6); font-size: 15px; line-height: 1; padding: 0;
}
.ar-tags__x:hover { color: var(--ar-paper); }
/* Always sits on its own full-width row beneath the chips. */
.ar-tags__input { flex: 1 0 100%; border: 0; outline: none; padding: 6px; font-size: 14px; background: none; }

/* ---- Live endpoints ----------------------------------------------------- */
.ar-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; }
.ar-links li { position: relative; padding-left: 18px; }
.ar-links li::before { content: "↳"; position: absolute; left: 0; color: var(--ar-accent); }
.ar-links a { font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink); text-decoration: none; border-bottom: 1px solid var(--ar-line-strong); }
.ar-links a:hover { color: var(--ar-accent); border-bottom-color: var(--ar-accent); }

/* ---- Actions ------------------------------------------------------------ */
.ar-actions { display: flex; justify-content: flex-end; }
.ar-btn {
  appearance: none; cursor: pointer;
  font-family: var(--ar-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 12px 26px; border-radius: var(--ar-radius);
  background: var(--ar-ink); color: var(--ar-paper); border: 1px solid var(--ar-ink);
  transition: transform 0.12s, background 0.15s, box-shadow 0.15s;
}
.ar-btn:hover:not(:disabled) { background: #000; box-shadow: 0 6px 18px -8px rgba(27, 25, 19, 0.7); }
.ar-btn:active:not(:disabled) { transform: translateY(1px); }
.ar-btn:disabled { opacity: 0.5; cursor: default; }
.ar-btn--danger { background: transparent; color: var(--ar-bad); border-color: var(--ar-bad); }
.ar-btn--danger:hover:not(:disabled) { background: var(--ar-bad); color: var(--ar-paper); box-shadow: 0 6px 18px -8px rgba(185, 60, 43, 0.6); }

/* ---- Reset to defaults -------------------------------------------------- */
.ar-card--reset { border-color: var(--ar-line); }
.ar-reset { display: flex; align-items: center; gap: 20px; }
.ar-reset__text { flex: 1; display: flex; flex-direction: column; gap: 3px; }
.ar-reset__text strong { font-size: 14px; font-weight: 600; }
.ar-reset__text small { color: var(--ar-ink-soft); font-size: 12.5px; line-height: 1.5; }
.ar-reset .ar-btn { flex: 0 0 auto; }

/* ---- Modal (reset confirmation + preview) ------------------------------ */
.ar-modal {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(27, 25, 19, 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ar-modal__panel {
  display: flex; flex-direction: column;
  width: 100%; max-width: 560px; max-height: min(calc(100vh - 40px), 600px); overflow: hidden;
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong);
  border-radius: 10px;
  box-shadow: 0 24px 60px -20px rgba(27, 25, 19, 0.5);
}
.ar-modal__panel:focus { outline: none; }
/* Header + footer stay put; only the preview body scrolls, so the actions are
   always reachable on a short screen. */
.ar-modal__head { flex: 0 0 auto; padding: 24px 28px 16px; border-bottom: 1px solid var(--ar-line); }
/* Nested-flex scroll: each level needs flex + min-height:0 so the scroller gets
   a resolved height. A percentage height here would NOT resolve (the flex item's
   height is auto) and the content would overflow instead of scrolling. */
.ar-modal__body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.ar-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 28px 10px; }
/* Scroll affordance: a bottom fade + chevron, shown only while more is below. */
.ar-modal__fade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 52px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px;
  pointer-events: none; opacity: 0; transition: opacity 0.18s ease;
  background: linear-gradient(to bottom, rgba(255, 253, 247, 0), var(--ar-surface) 80%);
}
.ar-modal__fade.is-visible { opacity: 1; }
/* The chevron is a real button: click to nudge the scroll body down (it also
   scrolls on its own). The fade gradient stays click-through; the button
   re-enables pointer events. Disabled = nothing more below. */
.ar-modal__fade-btn {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ar-ink-faint); transition: color 0.15s ease, background 0.15s ease;
}
.ar-modal__fade-btn:hover { color: var(--ar-ink); background: var(--ar-surface-2); }
.ar-modal__fade-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-modal__fade-btn:disabled { pointer-events: none; }
.ar-modal__chev { display: block; }
.ar-modal__title { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; color: var(--ar-ink); }
.ar-modal__lead { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ar-ink-soft); }

.ar-preview { display: grid; gap: 16px; }
.ar-preview__group { display: grid; gap: 6px; }
.ar-preview__label {
  margin: 0; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-preview__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ar-preview__list li {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 7px 0; border-bottom: 1px solid var(--ar-line); font-size: 13px;
}
.ar-preview__list li:last-child { border-bottom: 0; }
.ar-preview__state {
  font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.06em;
  padding: 2px 8px; border-radius: 3px; border: 1px solid;
}
.ar-preview__state.is-on { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-preview__state.is-off { color: var(--ar-ink-soft); border-color: var(--ar-line-strong); background: #f4f1e8; }
.ar-preview__muted { color: var(--ar-ink-soft); font-size: 12.5px; }

.ar-modal__actions {
  flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px;
  padding: 14px 28px 18px; border-top: 1px solid var(--ar-line);
}
.ar-btn--ghost { background: transparent; color: var(--ar-ink); border-color: var(--ar-line-strong); }
.ar-btn--ghost:hover:not(:disabled) { background: var(--ar-paper); box-shadow: none; }

.ar-modal-enter-active { transition: opacity 0.2s ease; }
.ar-modal-leave-active { transition: opacity 0.16s ease; }
.ar-modal-enter-from, .ar-modal-leave-to { opacity: 0; }
.ar-modal-enter-active .ar-modal__panel { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease; }
.ar-modal-enter-from .ar-modal__panel { transform: translateY(10px) scale(0.98); opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ar-modal-enter-active .ar-modal__panel { transition: none; }
  .ar-modal-enter-from .ar-modal__panel { transform: none; }
}
/* Small / short viewports: tighten the gap and let the panel use more height.
   Placed after the base rules so it wins the cascade. */
@media (max-width: 600px), (max-height: 560px) {
  .ar-modal { padding: 10px; }
  .ar-modal__panel { max-height: calc(100vh - 20px); }
}

/* ---- Onboarding wizard (reuses the modal shell) ------------------------ */
.ar-modal__panel.ar-wiz { max-width: 600px; }
.ar-wiz__steps { display: flex; align-items: center; gap: 6px; }
.ar-wiz__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-line-strong); transition: background 0.2s ease; }
.ar-wiz__dot.is-on { background: var(--ar-accent); }
.ar-wiz__count { margin: 8px 0 0; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-wiz__step { display: flex; flex-direction: column; gap: 14px; }
.ar-wiz__step > * { margin: 0; }
.ar-wiz__subhead { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-wiz__skip { margin-right: auto; }

/* ---- Readiness ---------------------------------------------------------- */
/* Each rung is a titled group of checks, with its own pass tally. */
.ar-checkgroup { margin-top: 26px; }
.ar-checkgroup:first-of-type { margin-top: 16px; }
.ar-checkgroup__head {
  position: relative;
  display: flex; align-items: center; gap: 11px;
  padding: 0 4px 11px;
}
/* A slim full-width 1px divider, colour-keyed to the rung's status (pass / warn /
   fail) so the header reads as one signal with its dot and count. */
.ar-checkgroup__head::after {
  content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px;
  background: var(--ar-line-strong);
}
.ar-checkgroup.is-pass .ar-checkgroup__head::after { background: rgba(47, 122, 76, 0.55); }
.ar-checkgroup.is-warn .ar-checkgroup__head::after { background: rgba(173, 123, 24, 0.5); }
.ar-checkgroup.is-fail .ar-checkgroup__head::after { background: rgba(185, 60, 43, 0.5); }
.ar-checkgroup__rung {
  flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%;
  background: var(--ar-line-strong);
}
.ar-checkgroup.is-pass .ar-checkgroup__rung { background: var(--ar-good); }
.ar-checkgroup.is-warn .ar-checkgroup__rung { background: var(--ar-warn); }
.ar-checkgroup.is-fail .ar-checkgroup__rung { background: var(--ar-bad); }
.ar-checkgroup__text { flex: 1; min-width: 0; }
.ar-checkgroup__name {
  margin: 0; font-family: var(--ar-serif); font-size: 16px; font-weight: 600; color: var(--ar-ink);
}
.ar-checkgroup__blurb { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ar-ink-soft); }
.ar-checkgroup__count {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 13px; font-weight: 600; color: var(--ar-ink-soft);
}
.ar-checkgroup.is-pass .ar-checkgroup__count { color: var(--ar-good); }
.ar-checkgroup.is-warn .ar-checkgroup__count { color: var(--ar-warn); }
.ar-checkgroup.is-fail .ar-checkgroup__count { color: var(--ar-bad); }
.ar-checkgroup .ar-checks { margin-top: 0; border-top: 0; }

.ar-checks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ar-line); }
.ar-check {
  display: flex; align-items: flex-start; gap: 16px;
  padding: 15px 4px; border-bottom: 1px solid var(--ar-line);
  /* Clear the fixed WordPress admin bar when the rail's next-step link jumps here. */
  scroll-margin-top: 40px;
}
.ar-check__text { flex: 1; display: flex; flex-direction: column; gap: 2px; }
.ar-check__text strong { font-size: 14px; font-weight: 600; }
.ar-check__text small { color: var(--ar-ink-soft); font-size: 12.5px; }
.ar-check__fix {
  margin: 8px 0 0; padding: 8px 11px;
  font-size: 12.5px; line-height: 1.5; color: var(--ar-ink);
  background: var(--ar-paper); border-radius: 6px;
  border-left: 2px solid var(--ar-line-strong);
}
.ar-check.is-warn .ar-check__fix { border-left-color: var(--ar-warn); }
.ar-check.is-fail .ar-check__fix { border-left-color: var(--ar-bad); }
.ar-check__action {
  align-self: flex-start; margin: 8px 0 0; padding: 0;
  background: none; border: 0; cursor: pointer;
  font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.04em;
  color: var(--ar-accent);
}
.ar-check__action:hover { text-decoration: underline; }
.ar-check__action:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: 3px; }
/* The status tag sits on the first text line even though the row is top-aligned. */
.ar-check__tag { margin-top: 1px; }
.ar-check__tag {
  flex: 0 0 auto; min-width: 64px; text-align: center;
  font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.1em;
  padding: 4px 10px; border-radius: 3px; border: 1px solid;
}
.ar-check__tag.is-pass { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-check__tag.is-warn { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; }
.ar-check__tag.is-fail { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; }
.ar-check__rule { flex: 0 0 auto; width: 3px; align-self: stretch; border-radius: 2px; background: var(--ar-line-strong); }
.ar-check.is-pass .ar-check__rule { background: var(--ar-good); }
.ar-check.is-warn .ar-check__rule { background: var(--ar-warn); }
.ar-check.is-fail .ar-check__rule { background: var(--ar-bad); }

/* Two buttons in the report head (Verify live + Re-run). */
.ar-card__actions { display: flex; align-items: center; gap: 8px; }

/* Live self-check results — "what agents actually receive". */
.ar-live {
  margin: 16px 0 4px; padding: 14px 16px;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
}
.ar-live__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ar-live__title { margin: 0; font-family: var(--ar-serif); font-size: 15px; font-weight: 600; color: var(--ar-ink); }
.ar-live__meta { display: flex; align-items: center; gap: 12px; }
.ar-live__close {
  appearance: none; background: none; border: 0; cursor: pointer; padding: 0 2px;
  font-size: 18px; line-height: 1; color: var(--ar-ink-faint);
}
.ar-live__close:hover { color: var(--ar-ink); }
.ar-live__tally { font-family: var(--ar-mono); font-size: 12px; font-weight: 600; color: var(--ar-good); }
.ar-live__tally.is-bad { color: var(--ar-bad); }
.ar-live__lead { margin: 5px 0 12px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar-live__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ar-live__row {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; border-top: 1px solid var(--ar-line); font-size: 13px;
}
.ar-live__row:first-child { border-top: 0; }
.ar-live__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ar-good); }
.ar-live__row.is-bad .ar-live__dot { background: var(--ar-bad); }
.ar-live__label { flex: 1; min-width: 0; color: var(--ar-ink); }
.ar-live__detail { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); text-align: right; }
.ar-live__row.is-bad .ar-live__detail { color: var(--ar-bad); }
.ar-live__running { margin: 6px 0 0; font-size: 12.5px; color: var(--ar-ink-soft); }

/* ---- Discovery Hub ------------------------------------------------------ */
.ar-wd { display: grid; gap: 22px; min-width: 0; }

/* Canonical endpoint */
/* GET bar + Re-scan button on one row. */
.ar-wd-endpoint-row { display: flex; align-items: stretch; gap: 12px; margin: 4px 0 16px; }
.ar-wd-endpoint-row .ar-wd-canonical { flex: 1; min-width: 0; margin: 0; }
.ar-wd-endpoint-row .ar-btn { flex: 0 0 auto; white-space: nowrap; }

.ar-wd-canonical {
  display: flex; align-items: center; gap: 12px;
  margin: 4px 0 16px; padding: 13px 15px;
  background: #faf8f1; border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius);
}
.ar-wd-canonical__method {
  font-family: var(--ar-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.12em;
  color: #fff; background: var(--ar-accent); padding: 3px 7px; border-radius: 3px;
}
.ar-wd-canonical__path { flex: 1; font-family: var(--ar-mono); font-size: 13.5px; color: var(--ar-ink); }
.ar-wd-canonical__ext {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; margin: -4px -4px -4px 0; border-radius: 4px;
  color: var(--ar-ink-faint); font-size: 15px; text-decoration: none;
  transition: color 0.15s, background 0.15s;
}
.ar-wd-canonical__ext:hover { color: var(--ar-accent); background: rgba(20, 107, 100, 0.08); }
.ar-wd-canonical__ext:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-wd-altlinks { margin-bottom: 18px; }

/* Stat tiles */
.ar-wd-stats {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 1px;
  background: var(--ar-line); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); overflow: hidden;
}
.ar-wd-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--ar-surface); text-align: center; }
.ar-wd-stat strong { font-family: var(--ar-mono); font-size: 24px; font-weight: 600; }
.ar-wd-stat span { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-wd-stat small { margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--ar-ink-soft); }
.ar-wd-stat.is-bad strong { color: var(--ar-bad); }
/* A stat count that doesn't divide evenly into a fixed grid (the Discovery hub's
   five totals) flex-fills instead, so the last row stretches to the full width
   rather than leaving an empty bordered cell. */
.ar-wd-stats--fill { display: flex; flex-wrap: wrap; }
/* Basis matches the grid's 108px min so it keeps the same per-row count as before
   (e.g. five-up when wide); flex-grow just lets a short last row fill the width. */
.ar-wd-stats--fill .ar-wd-stat { flex: 1 1 108px; }

.ar-wd-empty { margin: 8px 0 0; color: var(--ar-ink-soft); font-size: 13px; }

/* ---- Small screens: ease the chrome down so cards aren't desktop-sized on a
   phone — titles + big stat numbers shrink a notch, buttons stop hogging the
   row, and header action rows / the Discovery endpoint stack vertically. ---- */
@container (max-width: 560px) {
  /* Card header: title/lead on its own line, action buttons below it rather than
     squeezed beside it (mainly Endpoint activity, whose long lead needs the room). */
  .ar-card__head { flex-direction: column; align-items: stretch; gap: 12px; }
  .ar-card__actions { width: 100%; }
  /* …but a header that's just a short title + a couple of buttons (Readiness
     report) stays on one row — with the smaller buttons it fits — and only wraps
     the buttons below if it truly can't. */
  .ar-card__head--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
  .ar-card__head--inline .ar-card__actions { width: auto; }
  /* Buttons sit nearer the text size and don't dominate. */
  .ar-btn { padding: 9px 16px; font-size: 11px; }
  /* Headings + prominent numbers ease down. */
  .ar-card__title { font-size: 16.5px; }
  .ar-wd-stat strong { font-size: 20px; }
  .ar-checkgroup__name { font-size: 15px; }
  /* Discovery endpoint: stack the URL box and Re-scan so the path keeps one line
     and the button spans the width instead of crowding it. */
  .ar-wd-endpoint-row { flex-direction: column; align-items: stretch; }
  .ar-wd-endpoint-row .ar-btn { width: 100%; }
  .ar-wd-canonical__path { font-size: 12px; }
}

/* Provider groups: Declared (always shown) and Auto-discovered (collapsible). */
.ar-wd-group { margin-top: 18px; }
.ar-wd-group__title {
  margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ar-ink-faint);
}
.ar-wd-group__toggle {
  display: flex; align-items: center; gap: 7px; width: 100%; padding: 0; border: 0; background: none;
  cursor: pointer; font: inherit; text-align: left;
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-wd-group__toggle:hover { color: var(--ar-ink-soft); }
.ar-wd-group__caret { font-size: 9px; transition: transform 0.15s ease; }
.ar-wd-group__caret.is-open { transform: rotate(90deg); }
.ar-wd-group__count {
  font-family: var(--ar-mono); font-size: 10px; font-weight: 600; letter-spacing: 0;
  padding: 1px 7px; border-radius: 999px; border: 1px solid var(--ar-line-strong); color: var(--ar-ink-faint);
}
/* Tighten the list when it sits directly under a group header. */
.ar-wd-group .ar-wd-list { margin-top: 10px; }

/* Inline engine status under the "Found automatically" header: which places
   Agentimus scanned, each with a ✓/✕. Always visible, even when rows collapse. */
.ar-wd-engines {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px;
  margin: 8px 0 0; font-size: 12px; color: var(--ar-ink-soft);
}
.ar-wd-engine {
  font-family: var(--ar-mono); font-size: 11px;
  padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ar-line-strong);
}
.ar-wd-engine.is-on { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-wd-engine.is-off { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; }

/* Provider rows */
.ar-wd-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ar-line); }
.ar-wd-prov { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--ar-line); }
.ar-wd-prov__bar { flex: 0 0 auto; width: 3px; border-radius: 2px; background: var(--ar-accent); }
.ar-wd-prov__body { flex: 1; min-width: 0; }
.ar-wd-prov__head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; }
.ar-wd-prov__head strong { font-size: 14.5px; font-weight: 600; }
.ar-wd-type {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
  color: var(--ar-accent); border: 1px solid #bcd9d4; background: #eef5f3; padding: 2px 7px; border-radius: 3px;
}
.ar-wd-type--agent { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; }
.ar-wd-ver { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
.ar-wd-prov__desc { margin: 7px 0 0; font-size: 13px; color: var(--ar-ink-soft); }
.ar-wd-prov__provider { margin: 6px 0 0; }
.ar-wd-prov__provider code { font-size: 11px; color: var(--ar-ink-faint); }

.ar-wd-caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; }
.ar-wd-cap {
  font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); padding: 3px 8px; border-radius: 3px;
}

.ar-wd-eps { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; }
.ar-wd-eps li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ar-wd-ep__type {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); padding: 2px 6px; border-radius: 3px;
}
.ar-wd-eps code { font-size: 12px; color: var(--ar-ink); }
.ar-wd-auth { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; border: 1px solid; }
.ar-wd-auth.is-open { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-wd-auth.is-locked { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; }

/* Well-known + validation columns */
.ar-wd-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; }
@container (max-width: 760px) { .ar-wd-cols { grid-template-columns: 1fr; } .ar-wd-mcp { grid-template-columns: repeat(2, 1fr) !important; } }

/* MCP & tools */
.ar-wd-mcp {
  display: grid; grid-template-columns: repeat(4, 1fr); gap: 1px; margin: 14px 0 0;
  background: var(--ar-line); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); overflow: hidden;
}
.ar-wd-mcp__cell { display: flex; flex-direction: column; gap: 3px; padding: 12px 14px; background: var(--ar-surface); }
.ar-wd-mcp__cell span {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-wd-mcp__cell strong { font-family: var(--ar-mono); font-size: 13px; }
.ar-wd-mcp__cell strong.is-on { color: var(--ar-good); }
.ar-wd-mcp__cell strong.is-off { color: var(--ar-ink-faint); }
.ar-wd-mcp-endpoint { margin: 12px 0 0; }
.ar-wd-note {
  margin: 12px 0 0; padding: 10px 13px; font-size: 12.5px; line-height: 1.45; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); border-left: 2px solid var(--ar-warn); border-radius: 0 var(--ar-radius) var(--ar-radius) 0;
}
.ar-wd-tools { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ar-line); }
.ar-wd-tool {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 12px 4px; border-bottom: 1px solid var(--ar-line);
}
.ar-wd-tool__id { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ar-wd-tool__id code { font-size: 12.5px; color: var(--ar-ink); }
.ar-wd-tool__title { font-size: 12px; color: var(--ar-ink-soft); }
.ar-wd-tool__meta { display: flex; align-items: center; gap: 7px; flex: 0 0 auto; }
.ar-wd-badge {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.06em; color: var(--ar-ink-soft);
  border: 1px solid var(--ar-line-strong); padding: 2px 7px; border-radius: 3px;
}
.ar-wd-badge--schema { color: var(--ar-accent); border-color: #bcd9d4; background: #eef5f3; }

.ar-wd-wk { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }
.ar-wd-wk li { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.ar-wd-wk a { text-decoration: none; }
.ar-wd-wk code { font-size: 12px; color: var(--ar-ink); border-bottom: 1px solid var(--ar-line-strong); }
.ar-wd-wk a:hover code { color: var(--ar-accent); border-bottom-color: var(--ar-accent); }
.ar-wd-src {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em;
  padding: 2px 7px; border-radius: 3px; border: 1px solid var(--ar-line-strong); color: var(--ar-ink-faint);
}
.ar-wd-src.is-file { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }
.ar-wd-src.is-managed { color: var(--ar-accent); border-color: #bcd9d4; background: #eef5f3; }

.ar-wd-valid { display: flex; flex-direction: column; }
.ar-wd-allclear {
  flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center;
  text-align: center; gap: 4px; margin: 0; padding: 28px 16px 32px;
}
.ar-wd-allclear__badge {
  display: inline-flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; margin-bottom: 10px; border-radius: 50%;
  color: var(--ar-accent); background: rgba(20, 107, 100, 0.1);
  box-shadow: 0 0 0 6px rgba(20, 107, 100, 0.05);
}
.ar-wd-allclear__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--ar-ink); }
.ar-wd-allclear__sub { margin: 0; font-size: 12.5px; color: var(--ar-ink-soft); }
.ar-wd-notices { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; }
.ar-wd-notice { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; }
.ar-wd-notice__tag {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em;
  padding: 2px 6px; border-radius: 3px; border: 1px solid;
}
.ar-wd-notice.is-error .ar-wd-notice__tag { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; }
.ar-wd-notice.is-warning .ar-wd-notice__tag { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; }

/* ---- Dashboard ---------------------------------------------------------- */
.ar-act { display: grid; gap: 22px; min-width: 0; }

/* Clickable at-a-glance summary row. Fixed 4-up (not auto-fit) so the four
   tiles always span the full width as one row; auto-fit would orphan the 4th
   tile on its own line at in-between widths. Collapses to a tidy 2×2 below. */
.ar-dash-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ar-dash-tile {
  appearance: none; cursor: pointer; text-align: left;
  display: flex; flex-direction: column; gap: 4px;
  padding: 15px 18px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
  background: var(--ar-surface); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s;
}
.ar-dash-tile:hover { border-color: var(--ar-line-strong); box-shadow: 0 5px 16px -9px rgba(27, 25, 19, 0.4); }
.ar-dash-tile:active { transform: translateY(1px); }
.ar-dash-tile:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-dash-tile__k { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-dash-tile__v { font-family: var(--ar-mono); font-size: 24px; font-weight: 600; line-height: 1; color: var(--ar-ink); }
.ar-dash-tile__v[data-tone="good"] { color: var(--ar-good); }
.ar-dash-tile__v[data-tone="ok"] { color: var(--ar-warn); }
.ar-dash-tile__v[data-tone="low"] { color: var(--ar-bad); }
.ar-dash-tile__sub { font-size: 11px; color: var(--ar-ink-soft); }
.ar-act-controls { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; }
.ar-act-stats { margin-top: 4px; }
/* Each stat strip fills its row with a fixed column count matching its number of
   totals — never the generic .ar-wd-stats auto-fit, which orphaned a lone cell
   beside an empty bordered box. Endpoint activity has 4 totals, Traffic-from-AI 3. */
.ar-act-stats--4 { grid-template-columns: repeat(4, 1fr); }
.ar-act-stats--3 { grid-template-columns: repeat(3, 1fr); }
/* Narrow: the summary tiles need room, so drop them to a tidy 2×2; the 4-up stat
   strip folds to 2×2 on phones (the 3-up strip stays — three short stats fit). */
@container (max-width: 720px) { .ar-dash-sum { grid-template-columns: repeat(2, 1fr); } }
@container (max-width: 480px) { .ar-act-stats--4 { grid-template-columns: repeat(2, 1fr); } }

/* Daily bars */
.ar-act-sparkwrap { position: relative; margin: 18px 0 6px; }
.ar-act-spark {
  display: flex; align-items: flex-end; gap: 3px; height: 64px; margin: 0;
}
/* Each bar is a button: click it to drill the recent feed into that day. */
.ar-act-bar {
  flex: 1 1 0; display: flex; align-items: flex-end; height: 100%;
  appearance: none; -webkit-appearance: none; padding: 0; border: 0; background: none;
  font: inherit; cursor: pointer; border-radius: 3px 3px 0 0;
}
.ar-act-bar:hover .ar-act-bar__fill { filter: brightness(0.92); }
.ar-act-bar:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-act-bar__fill {
  width: 100%; min-height: 2px; border-radius: 2px 2px 0 0;
  background: var(--ar-accent); transition: height 0.4s cubic-bezier(0.22, 1, 0.36, 1), filter 0.2s ease;
}
.ar-act-bar__fill.is-zero { background: var(--ar-line); }
/* The selected day's bar is highlighted (darker, richer) so it stands out —
   the other bars keep their normal colour rather than washing out. */
.ar-act-bar.is-active .ar-act-bar__fill { filter: brightness(0.7); }

/* Styled hover tooltip, floating above the bars with a downward caret. JS sets
   `left` (clamped centre) on the body and `left` on the caret (so it keeps
   pointing at the bar even when the body is clamped at an edge). */
/* left stays 0 and the whole tooltip is moved via transform, so its width is
   computed against the full chart (not the gap to the right edge) — otherwise a
   right-side bar squeezes the tooltip narrow and the text wraps weirdly. */
.ar-act-tip {
  position: absolute; bottom: calc(100% + 8px); left: 0;
  z-index: 6; pointer-events: none;
  display: grid; gap: 1px; width: max-content; max-width: 240px; padding: 8px 11px;
  background: var(--ar-ink); color: var(--ar-surface);
  border-radius: 7px; box-shadow: 0 10px 24px -10px rgba(27, 25, 19, 0.55);
  font-size: 12px; line-height: 1.45;
}
.ar-act-tip__date { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.72; white-space: nowrap; }
.ar-act-tip__hits { font-weight: 600; white-space: nowrap; }
.ar-act-tip__top { opacity: 0.82; }
.ar-act-tip__caret {
  position: absolute; top: 100%; left: 0; transform: translateX(-50%);
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid var(--ar-ink);
}
.ar-tip-enter-active, .ar-tip-leave-active { transition: opacity 0.12s ease; }
.ar-tip-enter-from, .ar-tip-leave-to { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  .ar-tip-enter-active, .ar-tip-leave-active { transition: none; }
}

/* The modal lists every hit individually (ungrouped), each with its exact time.
   Reuses the feed cell styles (agent/endpoint/UA) in its own 4-column grid; the
   modal body owns the scroll. */
/* Day-report modal: a wider panel; header with prev/next + a day dropdown. */
.ar-modal__panel--day { max-width: 640px; }
.ar-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 8px; flex-wrap: wrap; }
.ar-day-head .ar-modal__title { margin: 0; }
.ar-day-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.ar-day-select {
  height: 30px; max-width: 220px; min-width: 0;
  padding: 0 8px; border: 1px solid var(--ar-line-strong); border-radius: 7px;
  background: var(--ar-surface); color: var(--ar-ink); font: inherit; font-size: 12.5px; cursor: pointer;
}
.ar-day-select:hover:not(:disabled) { background: var(--ar-surface-2); }
.ar-day-select:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-day-select:disabled { opacity: 0.5; cursor: default; }
.ar-day-nav__btn {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 1px solid var(--ar-line-strong); border-radius: 7px; background: var(--ar-surface);
  color: var(--ar-ink-soft); cursor: pointer;
  transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease;
}
.ar-day-nav__btn:hover:not(:disabled) { color: var(--ar-ink); background: var(--ar-surface-2); }
.ar-day-nav__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-day-nav__btn:disabled { opacity: 0.4; cursor: default; }
/* The day report's two-column breakdown (by client / by endpoint), above the log. */
.ar-daybreak { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; }
.ar-daybreak__h {
  margin: 0 0 9px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ar-ink-faint); font-weight: 600;
  display: flex; align-items: baseline; gap: 6px;
}
.ar-daybreak__n { font-size: 11px; color: var(--ar-ink-soft); letter-spacing: 0; text-transform: none; font-weight: 400; }
.ar-daylog { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ar-line); }
@media (max-width: 600px) {
  .ar-daybreak { grid-template-columns: 1fr; gap: 14px; }
}

.ar-act-log { margin: 0; padding: 0; list-style: none; }
.ar-act-log li {
  display: grid; align-items: center; gap: 10px; padding: 7px 2px;
  grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) max-content;
  border-bottom: 1px solid var(--ar-line);
}
.ar-act-log li:last-child { border-bottom: 0; }
.ar-act-log__at {
  font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint);
  white-space: nowrap; text-align: right;
}
/* Loading / error / empty states live in the modal's content area, centered,
   with enough height that the panel doesn't jump in size when rows arrive. */
.ar-act-log__state {
  margin: 0; display: flex; align-items: center; justify-content: center;
  min-height: 180px; padding: 24px; text-align: center;
  font-size: 13px; color: var(--ar-ink-soft);
}
.ar-act-log__state.is-error { color: var(--ar-bad); }
.ar-act-sparkcap {
  margin: 0; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ar-ink-faint);
}

/* Ranked lists (top agents / by endpoint) */
.ar-act-rank { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; }
.ar-act-rank li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 12px; }
.ar-act-rank__label { font-size: 13px; color: var(--ar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-act-rank__label code { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink); }
.ar-act-rank__track { height: 7px; background: var(--ar-surface-2); border-radius: 999px; overflow: hidden; }
.ar-act-rank__bar { display: block; height: 100%; background: var(--ar-accent); border-radius: 999px; }
.ar-act-rank__n { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); text-align: right; min-width: 24px; }
.ar-act-more { margin: 11px 0 0; font-size: 11px; color: var(--ar-ink-faint); }

/* Recent feed */
/* Capped, scrollable feed with a bottom fade cue (same pattern as the modal). */
.ar-act-feedwrap { position: relative; margin: 14px 0 0; }
/* padding-right is a gutter for the scroll thumb: macOS overlay scrollbars sit
   on top of content, so without it the bar overlaps the right-aligned time/count
   column. scrollbar-gutter keeps the layout stable for classic scrollbars too. */
/* The Requests card's scroll container owns the cap/scroll/border/gutter; the
   list inside (grouped feed OR per-day log) is just a grid. */
.ar-act-reqs { margin: 0; border-top: 1px solid var(--ar-line); max-height: 340px; overflow-y: auto; scrollbar-gutter: stable; padding-right: 14px; }
.ar-act-reqs__empty { padding: 12px 0; }
.ar-act-feed { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ar-act-feedfade {
  position: absolute; left: 0; right: 0; bottom: 0; height: 44px;
  display: flex; align-items: flex-end; justify-content: center; padding-bottom: 4px;
  pointer-events: none; opacity: 0; transition: opacity 0.18s ease;
  background: linear-gradient(to bottom, rgba(255, 253, 247, 0), var(--ar-surface) 82%);
}
.ar-act-feedfade.is-visible { opacity: 1; }
/* The chevron is a real button: click it to nudge the feed down (the list also
   scrolls on its own). pointer-events is re-enabled here because the fade
   gradient above is click-through; disabled = nothing more to scroll. */
.ar-act-feedfade__btn {
  pointer-events: auto; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; padding: 0; margin: 0;
  border: 0; border-radius: 999px; background: transparent;
  color: var(--ar-ink-faint); transition: color 0.15s ease, background 0.15s ease;
}
.ar-act-feedfade__btn:hover { color: var(--ar-ink); background: var(--ar-surface-2); }
.ar-act-feedfade__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-act-feedfade__btn:disabled { pointer-events: none; }
.ar-act-feedfade__chev { display: block; }
.ar-act-feed li {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--ar-line);
}
.ar-act-feed__agent { font-size: 13px; font-weight: 600; color: var(--ar-ink); flex: 0 0 auto; white-space: nowrap; }
.ar-act-feed__ep {
  font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); padding: 2px 7px; border-radius: 3px; white-space: nowrap;
  /* Shrink + truncate a long endpoint (e.g. http-message-signatures-directory)
     so one row can never force the feed — and the whole dashboard grid — wider
     than the container at narrow widths. */
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* UA takes the remaining space and truncates — the row never wraps. */
.ar-act-feed__ua {
  flex: 1 1 auto; min-width: 0;
  font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ar-act-feed__ua.is-empty { font-style: italic; }
.ar-act-feed__count {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); padding: 1px 6px; border-radius: 3px;
}
.ar-act-feed__count:empty { background: none; padding: 0; } /* count=1: keep the cell, hide the pill */
.ar-act-feed__at { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
/* Align every row's columns. Subgrid lets each <li> share the <ul>'s column
   tracks, so the agent, endpoint, count and time columns line up across rows
   (the User-Agent fills the slack). Falls back to the flex layout above where
   subgrid is unsupported. */
@supports (grid-template-columns: subgrid) {
  .ar-act-feed {
    /* Endpoint column is minmax(0, max-content) — full width when there's room,
       but able to shrink (its cell truncates) so a long endpoint can't blow the
       feed past the container and break the dashboard layout. */
    grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) max-content max-content;
  }
  .ar-act-feed li {
    grid-column: 1 / -1;
    display: grid;
    grid-template-columns: subgrid;
    align-items: center;
  }
  .ar-act-feed__at { text-align: right; }
}

/* ---- Suspicious activity (UA-only abuse signals) ----------------------- */
.ar-susp-counts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; flex: 0 0 auto; }
/* Small status pills — colours mirror the readiness notices (bad/warn/neutral). */
.ar-susp-badge {
  font-family: var(--ar-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; border: 1px solid; white-space: nowrap;
}
.ar-susp-badge.is-spoof { color: var(--ar-bad); background: #f8ebe8; border-color: #e6c1b9; }
.ar-susp-badge.is-heavy { color: var(--ar-warn); background: #f7f1df; border-color: #e6d5a8; }
.ar-susp-badge.is-new { color: var(--ar-ink-soft); background: var(--ar-surface-2); border-color: var(--ar-line); }

.ar-susp-banner {
  margin: 0 0 14px; padding: 9px 13px; border-radius: var(--ar-radius);
  background: #f7f1df; border: 1px solid #e6d5a8; color: var(--ar-ink-soft); font-size: 12.5px;
}
.ar-susp-banner .ar-linkbtn { font-size: 12.5px; }

.ar-susp-list { margin: 6px 0 0; padding: 0; list-style: none; }
.ar-susp-row {
  display: grid; grid-template-columns: minmax(0, 1fr) auto;
  column-gap: 18px; align-items: center;
  padding: 13px 0; border-bottom: 1px solid var(--ar-line);
}
.ar-susp-row:first-child { padding-top: 4px; }
.ar-susp-row:last-child { border-bottom: 0; padding-bottom: 2px; }
.ar-susp-row__info { min-width: 0; display: grid; gap: 4px; }
.ar-susp-row__head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-susp-row__agent { font-size: 13px; font-weight: 600; color: var(--ar-ink); }
.ar-susp-badges { display: inline-flex; gap: 5px; }
/* Identity card for a recognised crawler: a factual "who is this" (kind + operator
   + docs link), NOT a severity badge — it informs the Block/Allow choice without
   the plugin taking a side. */
.ar-susp-row__known { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-susp-kind {
  font-family: var(--ar-mono); font-size: 9.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 3px; border: 1px solid; white-space: nowrap;
  color: var(--ar-ink-soft); background: var(--ar-surface-2); border-color: var(--ar-line);
}
.ar-susp-kind.is-ai { color: var(--ar-accent); background: #eef5f3; border-color: #bcd9d3; }
.ar-susp-row__by { font-size: 11.5px; color: var(--ar-ink-soft); }
.ar-susp-row__learn { font-size: 11px; color: var(--ar-accent); text-decoration: none; white-space: nowrap; }
.ar-susp-row__learn:hover { text-decoration: underline; }
.ar-susp-row__learn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 2px; }
.ar-susp-row__unverified { font-size: 10.5px; color: var(--ar-ink-faint); font-style: italic; }
/* UA is quiet mono text, NOT a chip — neutralise wp-admin's <code> background/padding. */
.ar-susp-row__ua {
  font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%;
  background: none; padding: 0; border: 0;
}
.ar-susp-row__meta { font-family: var(--ar-mono); font-size: 10.5px; color: var(--ar-ink-faint); }
.ar-susp-row__action { justify-self: end; text-align: right; max-width: 230px; }
/* Text-style action link (not a heavy boxed button) — compact in the dropdown row. */
.ar-susp-block {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: 0.02em;
  padding: 0; border: 0; background: none; color: var(--ar-bad);
  transition: color 0.15s ease;
}
.ar-susp-block:hover { text-decoration: underline; }
.ar-susp-block:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 2px; }
.ar-susp-block:disabled { color: var(--ar-ink-faint); cursor: default; text-decoration: none; }
/* Secondary "Allow" (trust) link — quieter than Block, set off to its right. */
.ar-susp-allow {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: 0.02em;
  padding: 0; border: 0; background: none; color: var(--ar-ink-soft); margin-left: 16px;
  transition: color 0.15s ease;
}
.ar-susp-allow:hover { color: var(--ar-ink); text-decoration: underline; }
.ar-susp-allow:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 2px; }
.ar-susp-allow:disabled { color: var(--ar-ink-faint); cursor: default; text-decoration: none; }
.ar-susp-blocked { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-good); white-space: nowrap; }
.ar-susp-reason { font-size: 11px; font-style: italic; color: var(--ar-ink-faint); line-height: 1.45; }

@container (max-width: 600px) {
  /* Stack the action under the info so a long "Block <token>" never crushes the row. */
  .ar-susp-row { grid-template-columns: 1fr; row-gap: 9px; }
  .ar-susp-row__action { justify-self: start; text-align: left; max-width: none; }
}

/* ---- Loading skeleton (activity first load) ---------------------------- */
.ar-skel { display: grid; gap: 14px; margin-top: 16px; }
.ar-skel__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.ar-skel__box { height: 58px; border-radius: var(--ar-radius); }
.ar-skel__line { height: 13px; border-radius: 4px; }
.ar-skel__box, .ar-skel__line {
  background: linear-gradient(90deg, var(--ar-surface-2) 25%, var(--ar-line) 50%, var(--ar-surface-2) 75%);
  background-size: 200% 100%;
  animation: ar-shimmer 1.3s ease-in-out infinite;
}
@keyframes ar-shimmer { 0% { background-position: 200% 0; } 100% { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) {
  .ar-skel__box, .ar-skel__line { animation: none; background: var(--ar-surface-2); }
}

/* ---- One-time load reveal (no perpetual motion) ------------------------- */
.ar__body > * { animation: ar-rise 0.5s cubic-bezier(0.22, 1, 0.36, 1) both; }
.ar__body > *:nth-child(1) { animation-delay: 0.04s; }
.ar__body > *:nth-child(2) { animation-delay: 0.10s; }
.ar__body > *:nth-child(3) { animation-delay: 0.16s; }
.ar__body > *:nth-child(4) { animation-delay: 0.22s; }
.ar__body > *:nth-child(5) { animation-delay: 0.28s; }
@keyframes ar-rise { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }

.ar-fade-enter-active, .ar-fade-leave-active { transition: opacity 0.2s; }
.ar-fade-enter-from, .ar-fade-leave-to { opacity: 0; }

@media (prefers-reduced-motion: reduce) {
  .ar__body > *, .ar-rail-gauge__fill { animation: none !important; transition: none !important; }
}