/* ============================================================================
   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.
   Below 960px wp-admin's `.auto-fold/.folded #wpcontent` adds a 10px LEFT padding —
   a (0,2,0) selector that out-specifies a bare `#wpcontent`, so it left an uneven gap
   on the left of our full-bleed app. Match that specificity to zero it; leave
   margin-left alone so content still clears the folded admin menu when it's shown. */
#wpcontent,
.auto-fold #wpcontent,
.folded #wpcontent { padding-left: 0; }
.wrap { margin: 0; }

/* WP core gives #wpbody-content a 65px bottom padding. That space lives inside the
   sticky readiness rail's scroll box, so at the page bottom it is *also* exactly how
   far the rail's top tucks under the sticky header — footer gap and rail tuck are one
   dial. 16px keeps the footer off the content while barely clipping the gauge. */
#wpbody-content { padding-bottom: 16px; }

/* A narrower-breakpoint core rule drops the admin footer's side padding to 20px, which
   pulls its text left of our content. Hold it at 34px — the app's content gutter
   (.ar__body's side padding) — so both footer lines land flush with the card edges. */
#wpfooter { padding-left: 34px; padding-right: 34px; color: #a7a7a7; }

/* 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-info: #2f5f9e; /* blue — for informational actions (distinct from teal/green) */

  --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;
  /* WP admin-bar height — the sticky header sits flush below it. 32px on desktop; 46px in
     the responsive-admin band; 0 once the bar stops being fixed (≤600px) and scrolls away. */
  --ar-adminbar: 32px;
}
@media screen and (max-width: 782px) { :root { --ar-adminbar: 46px; } }
@media screen and (max-width: 600px) { :root { --ar-adminbar: 0px; } }

#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;
  /* iOS WebKit inflates text inside long-prose blocks ("font boosting") unless told
     not to; the inflated nowrap/mono runs then exceed the phone's viewport and the
     whole page pans sideways. Pin the size — the layout is already responsive. */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}
#agentimus-app * { box-sizing: border-box; }
/* Breathing room when a tile or readiness link scrolls a target to the top. */
#agentimus-app [id^="ar-"] { scroll-margin-top: 16px; }
/* overflow-wrap only bites when a token can't fit its line at all, so desktop is
   untouched — but on a phone a long unbroken path (/.well-known/…, agentimus/…) wraps
   instead of widening its row past the viewport. */
#agentimus-app code { font-family: var(--ar-mono); font-size: 0.86em; overflow-wrap: anywhere; }

/* A jumped-to target (a readiness "fix" link, a rail rung, a dashboard tile)
   briefly rings so the eye lands on the exact control to change. */
@keyframes ar-jump-flash {
  from { box-shadow: 0 0 0 2px var(--ar-accent), 0 0 0 7px color-mix(in srgb, var(--ar-accent) 16%, transparent); }
  to   { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ar-accent) 0%, transparent), 0 0 0 7px color-mix(in srgb, var(--ar-accent) 0%, transparent); }
}
#agentimus-app .ar-jump-flash { animation: ar-jump-flash 1.5s ease-out forwards; }
@media (prefers-reduced-motion: reduce) {
  #agentimus-app .ar-jump-flash { animation: none; box-shadow: 0 0 0 2px var(--ar-accent); }
}

/* Quiet privacy framing under the dashboard summary tiles. */
/* No own margins — the parent .ar-act grid's 22px gap spaces it equally above and below
   (grid gaps DON'T collapse with margins, they add, so any margin here desyncs the two). */
.ar-dash-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-faint); }
/* Privacy-fact mark: a small shield-check opens an honesty footnote. One meaning
   — "this data stays here" — and never interactive (small circles that LOOK
   clickable are the ? explainer buttons; this is a mark, not a control).
   Compose with the note's own class; the icon inherits its colour. */
.ar-privnote::before {
  content: ""; display: inline-block; width: 14px; height: 14px;
  margin-right: 7px; vertical-align: -2.5px;
  background: currentColor;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.3-2.9 7.9-7 9.3-4.1-1.4-7-5-7-9.3V5.8z'/%3E%3Cpath d='M9 11.6l2.1 2.1 3.9-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.3-2.9 7.9-7 9.3-4.1-1.4-7-5-7-9.3V5.8z'/%3E%3Cpath d='M9 11.6l2.1 2.1 3.9-4.3'/%3E%3C/svg%3E") center / contain no-repeat;
}

/* ---- Header bar (brand · tabs · gauge in one slim row) ------------------ */
/* The nav bar + page-head travel together and STAY at the top on scroll — wrapped in one
   sticky block so a nav row that wraps on a narrow screen can never desync from the title
   strip below it. Flush below the WP admin bar; z-index keeps it over the scrolling content
   while staying under the modals/toasts (which teleport to <body> at 100000+). */
.ar__sticky { position: sticky; top: var(--ar-adminbar); z-index: 40; transition: box-shadow 0.24s ease; }
/* Once the page is scrolled, the pinned header lifts above the content with a soft
   shadow (the pagehead's hairline stays as the crisp edge) so the two never merge.
   The .is-stuck class is toggled from App.vue on scroll. */
.ar__sticky.is-stuck { box-shadow: 0 8px 18px -12px rgba(38, 32, 24, 0.32), 0 2px 5px -3px rgba(38, 32, 24, 0.12); }
@media (prefers-reduced-motion: reduce) { .ar__sticky { transition: none; } }

.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;
  text-decoration: none; /* it's a real <a> now — no underline on the masthead */
  transition: opacity 0.15s;
}
.ar__brand:hover { opacity: 0.82; }
/* As a real <a> the masthead inherits wp-admin's global a:focus blue ring (it
   fires on right-click too); silence that and keep OUR ring for keyboard focus.
   A logo-link isn't prose either — no text selection on click. */
.ar__brand { user-select: none; -webkit-user-select: none; }
.ar__brand:focus { outline: 0; box-shadow: none; }
.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;
}

/* The gold-gem arrow — part of the BRAND BUTTON now, so the whole masthead
   including it is one clickable unit. Two angled bars meet at a framed gold
   node pointing toward the menu; the gold echoes the version line + logo
   crossbar, the ring echoes the logo's framed mark. */
.ar__brandarrow { display: inline-flex; margin-left: 5px; }
.ar__brandarrow 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)); }

/* Brand / nav break — invisible on wide screens; on narrow screens the media
   block below turns it into a full-width flex line break. */
.ar__sep { display: none; }

/* 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 {
  /* `0 1 auto`, not `1 1 auto`: the nav no longer absorbs the bar's free space, so the
     More menu can sit immediately after Discovery instead of being pushed to the far
     right. .ar__review takes the slack with margin-left:auto. */
  flex: 0 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); }
/* Each tab's mark — inherits the label's ink so it dims, wakes and activates
   with the text as one unit. */
.ar__tab-ic { display: inline-flex; margin-right: 7px; }
.ar__tab-ic svg { width: 13px; height: 13px; display: block; }

/* ---- Nav "Activity to review" badge + dropdown ------------------------- */
.ar__review { flex: 0 0 auto; align-self: center; position: relative; margin-left: auto; }
.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);
}
/* ---- Writing assistant: quill launcher + guidance popover + drawer ---------- */
/* The quill shares the bell's chrome (.ar__review-btn). Dimmed = prerequisites
   missing — visible but quiet, per the "never hidden, say how to turn it on" rule. */
/* The quill takes the bell's old margin-left:auto job (it now sits first in the
   right-edge pair); the bell then nestles beside it with a small gap. */
.ar__assist { flex: 0 0 auto; align-self: center; position: relative; margin-left: auto; }
.ar__assist + .ar__review { margin-left: -16px; }
.ar__assist-btn.is-dim { opacity: 0.45; }
.ar__assist-btn.is-dim:hover { opacity: 0.7; }

.ar__assist-guide {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 340px; max-width: calc(100cqw - 32px);
  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: 14px 16px;
}
.ar__assist-guide__title { display: block; font-size: 13px; color: var(--ar-ink); }
.ar__assist-guide__lead { margin: 6px 0 8px; font-size: 12px; color: var(--ar-ink-soft); }
.ar__assist-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; }
.ar__assist-guide__list li { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar__assist-guide__list li.is-done { opacity: 0.66; }
.ar__assist-guide__mark {
  flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%;
  display: grid; place-items: center; font-size: 10px; font-weight: 700;
  color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 9%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 30%, var(--ar-surface));
}
.ar__assist-guide__foot { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--ar-line); font-size: 11px; color: var(--ar-ink-faint); }

/* The drawer: right panel desktop, full sheet on phones (svh — the real viewport). */
.ar-drawer { position: fixed; inset: 0; z-index: 100060; }
.ar-drawer__scrim { position: absolute; inset: 0; background: rgba(27, 25, 19, 0.38); }
.ar-drawer__panel {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 600px; max-width: 100vw;
  display: flex; flex-direction: column;
  background: var(--ar-surface);
  border-left: 1px solid var(--ar-line-strong);
  box-shadow: -18px 0 48px -18px rgba(27, 25, 19, 0.5);
  outline: none;
}
@media (max-width: 782px) {
  .ar-drawer__panel { width: 100%; border-left: 0; height: 100vh; height: 100svh; }
}
.ar-drawer-enter-active, .ar-drawer-leave-active { transition: opacity 0.18s ease; }
.ar-drawer-enter-active .ar-drawer__panel, .ar-drawer-leave-active .ar-drawer__panel { transition: transform 0.22s ease; }
.ar-drawer-enter-from, .ar-drawer-leave-to { opacity: 0; }
.ar-drawer-enter-from .ar-drawer__panel, .ar-drawer-leave-to .ar-drawer__panel { transform: translateX(100%); }

.ar-drawer__head {
  flex: 0 0 auto; display: flex; align-items: flex-start; gap: 11px;
  padding: 18px 20px 14px; border-bottom: 1px solid var(--ar-line-strong);
  background: var(--ar-surface);
}
.ar-drawer__quill {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center;
  color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 9%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 26%, var(--ar-surface));
}
.ar-drawer__titles { min-width: 0; flex: 1; }
.ar-drawer__title { margin: 0; font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); line-height: 1.2; }
.ar-drawer__sub { margin: 3px 0 0; font-size: 12px; color: var(--ar-ink-faint); }
/* Sits beside the close: same 30px row, so the pair reads as one corner unit. */
.ar-drawer__back {
  flex: 0 0 auto; align-self: flex-start; height: 30px;
  display: inline-flex; align-items: center;
  margin-right: 10px; white-space: nowrap;
}
.ar-drawer__close {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center;
  background: transparent; border: 1px solid var(--ar-line); color: var(--ar-ink-soft); cursor: pointer;
}
.ar-drawer__close:hover { border-color: var(--ar-line-strong); color: var(--ar-ink); }
.ar-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; }
/* Screens with a pinned foot own their bottom spacing — the foot must sit
   flush. Flex column so a SHORT outline's foot still anchors to the drawer's
   bottom edge (margin-top:auto) instead of floating mid-panel; when content
   overflows, sticky takes over and pins it exactly the same. */
.ar-drawer__body--footed { padding-bottom: 0; display: flex; flex-direction: column; }
.ar-drawer__body--footed > * { flex: 0 0 auto; }
.ar-drawer__body--footed .ar-assist__foot { margin-top: auto; padding-top: 13px; }
/* Whatever ends the scrolled content gets daylight before the pinned foot —
   flush against the foot's rule + shadow it read as clipped even fully scrolled. */
.ar-drawer__body--footed > :nth-last-child(2) { margin-bottom: 14px; }
/* A quiet, thin scrollbar with a permanently reserved gutter: on systems with
   classic (space-taking) scrollbars, content appearing/disappearing can't
   nudge the layout sideways when the bar pops in. overscroll-behavior keeps a
   wheel that reaches the list's end from chaining into the page behind. */
.ar-drawer__body {
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  scrollbar-color: var(--ar-line-strong) transparent;
  overscroll-behavior: contain;
}

/* Brief */
.ar-assist__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ar-ink); margin-bottom: 7px; }
.ar-assist__prompt {
  width: 100%; resize: vertical; min-height: 120px;
  font-size: 13px; line-height: 1.55; color: var(--ar-ink);
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: 9px;
  padding: 10px 12px;
}
.ar-assist__prompt:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-accent) 15%, transparent); }
.ar-assist__hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ar-ink-faint); }
.ar-assist__error { margin: 10px 0 0; font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--ar-bad); }
.ar-assist__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; }
.ar-assist__actions .ar-assist__go { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; }
.ar-assist__actions--preview { flex-wrap: wrap; }
.ar-assist__spacer { flex: 1; }
/* Compound selector on purpose: the base .ar-spinner (26px) is declared LATER
   in this file and would win the tie — this must outrank it, or every button
   spinner inflates to 26px and bumps the button height mid-call. border-box,
   because without it the borders render OUTSIDE the 12px (16px total — taller
   than the button's text line, which is the height bump all over again). */
.ar-spinner.ar-assist__spin { box-sizing: border-box; width: 12px; height: 12px; border-width: 2px; flex: 0 0 auto; }
.ar-assist__status {
  font-size: 12px; padding: 6px 8px; border-radius: 8px;
  border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink);
}

/* The held-draft bar: a paid generation is never silently unreachable. */
.ar-assist__held {
  display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap;
  margin-top: 12px; padding: 8px 11px; border-radius: 9px;
  border: 1px solid color-mix(in srgb, var(--ar-accent) 26%, var(--ar-surface));
  background: color-mix(in srgb, var(--ar-accent) 5%, var(--ar-surface));
}
.ar-assist__heldtext { font-size: 12px; color: var(--ar-ink-soft); }

/* The outline gate: the skeleton the owner shapes before the expensive draft. */
.ar-assist__otitle { display: block; width: 100%; margin-bottom: 14px; font-family: var(--ar-serif); font-size: 14.5px; font-weight: 600; }
.ar-assist__osections { display: grid; gap: 9px; margin-bottom: 9px; }
.ar-assist__osection {
  position: relative; /* Anchors the corner remove button. */
  display: grid; gap: 6px; padding: 10px 38px 10px 10px; border-radius: 9px;
  border: 1px solid var(--ar-line); background: var(--ar-surface-2);
}
.ar-assist__osecrow { display: flex; align-items: center; gap: 8px; }
.ar-assist__onum {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 10px; color: var(--ar-ink-faint);
  width: 16px; text-align: right;
}
.ar-assist__osecrow .ar-assist__refineinput { font-weight: 600; }
/* The note is a textarea so a full sentence stays fully visible — it grows to
   its content where the browser supports field-sizing, and falls back to two
   comfortable rows elsewhere. Never a horizontal one-line peephole. The left
   inset mirrors the number gutter, so heading and note share the exact same
   width — the remove button lives in the card's right gutter, not the row. */
.ar-drawer textarea.ar-assist__onote,
.ar-assist__onote {
  display: block; margin-left: 24px; width: calc(100% - 24px);
  font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft);
  resize: none; field-sizing: content; min-height: 30px;
}
.ar-assist__oremove {
  position: absolute; top: 15px; right: 7px;
  display: grid; place-items: center; width: 24px; height: 24px;
  appearance: none; border: 0; border-radius: 7px; cursor: pointer;
  color: var(--ar-ink-faint); background: transparent;
}
.ar-assist__oremove:hover { color: var(--ar-bad); background: color-mix(in srgb, var(--ar-bad) 8%, transparent); }
.ar-assist__oremove:disabled { opacity: 0.5; cursor: default; }

/* Staged write: the outline screen doubles as the progress screen — a mark per
 * part, and slim dashed rows for the bookends (introduction, closing, dressing)
 * that aren't editable sections. */
.ar-assist__opart {
  display: flex; align-items: center; flex-wrap: wrap; gap: 8px;
  margin: 9px 0 0; padding: 8px 11px; border-radius: 9px;
  border: 1px dashed var(--ar-line);
}
.ar-assist__opart--lead { margin: 0 0 9px; }
.ar-assist__opartlabel { flex: 1; font-size: 12px; color: var(--ar-ink-soft); }
/* One 16px state dot: hollow while waiting, a turning ring while writing,
 * a check when landed, a cross when the part must be retried. border-box
 * everywhere — the same tie the button spinner already fights. */
.ar-assist__omark {
  box-sizing: border-box; flex: 0 0 auto;
  display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%;
}
.ar-assist__omark.is-pending { border: 1.5px dashed var(--ar-line-strong); }
.ar-assist__omark.is-busy {
  border: 2px solid var(--ar-line-strong); border-top-color: var(--ar-accent);
  animation: ar-spin 0.7s linear infinite;
}
.ar-assist__omark.is-done::after {
  content: ''; box-sizing: border-box; width: 5px; height: 9px; margin-top: -2px;
  border-right: 2px solid var(--ar-good); border-bottom: 2px solid var(--ar-good);
  transform: rotate(45deg);
}
.ar-assist__omark.is-error { color: var(--ar-bad); font-size: 14px; font-weight: 700; }
.ar-assist__omark.is-error::after { content: '×'; line-height: 1; }
@media (prefers-reduced-motion: reduce) {
  .ar-assist__omark.is-busy { animation-duration: 1.6s; }
}
/* A failed part's sentence, under its row. Inside a section card it aligns
 * with the note's inset gutter. */
.ar-assist__oparterror { flex: 1 1 100%; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ar-bad); }
.ar-assist__oparterror--insec { margin-left: 24px; }

/* The outline screen's pinned foot: the section list scrolls, the actions
 * never leave the viewport. Bleeds over the body's padding so content slides
 * beneath it edge-to-edge (same idea as the review queue's pinned footer). */
.ar-assist__foot {
  position: sticky; bottom: 0; z-index: 4;
  margin: 16px -20px 0; padding: 11px 20px 15px;
  background: var(--ar-surface);
  border-top: 1px solid var(--ar-line-strong);
  box-shadow: 0 -12px 22px -16px rgba(27, 25, 19, 0.4);
}
.ar-assist__footrow { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; }
.ar-assist__footrow--commit { margin-top: 10px; }
.ar-assist__footrow .ar-assist__go { display: inline-flex; align-items: center; gap: 7px; }
.ar-assist__footerror { margin: 0 0 9px; }
.ar-assist__resetlink { color: var(--ar-ink-faint); }
.ar-assist__resetlink:hover { color: var(--ar-bad); }

/* Edit-existing: the second door on the brief screen, the post picker, and
 * the editing banner + status note on the preview. */
.ar-assist__editentry {
  margin-top: 16px; padding-top: 12px; border-top: 1px dashed var(--ar-line);
  font-size: 11.5px; color: var(--ar-ink-faint); text-align: right;
}
/* Beside the brief's title the second door needs no divider of its own. */
.ar-assist__labelrow {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 6px 12px; flex-wrap: wrap; margin-bottom: 7px;
}
.ar-assist__labelrow .ar-assist__label { margin-bottom: 0; }
.ar-assist__editentry--top { margin: 0; padding: 0; border-top: 0; }
.ar-assist__postlist { display: grid; gap: 8px; margin-top: 12px; }
.ar-assist__postitem {
  appearance: none; text-align: left; cursor: pointer;
  display: grid; gap: 4px; padding: 10px 12px;
  border: 1px solid var(--ar-line); border-radius: 9px; background: var(--ar-surface);
}
.ar-assist__postitem:hover:not(:disabled) { border-color: var(--ar-accent); }
.ar-assist__postitem.is-blocked { cursor: default; opacity: 0.65; background: var(--ar-surface-2); }
.ar-assist__posttitle { font-size: 13px; font-weight: 600; color: var(--ar-ink); }
.ar-assist__postmeta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ar-ink-faint); }
.ar-assist__postreason { font-size: 11px; color: var(--ar-warn, #a15c00); }
.ar-assist__editingbar { margin: 0 0 12px; }
.ar-assist__statusnote { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ar-ink-faint); }

/* Start over: the one way out, tucked under a rule at the drawer's foot. */
.ar-assist__reset {
  display: flex; justify-content: flex-end; align-items: center; gap: 12px; flex-wrap: wrap;
  margin-top: 16px; padding-top: 10px; border-top: 1px dashed var(--ar-line);
}
.ar-assist__resettext { font-size: 11.5px; color: var(--ar-ink-faint); }
.ar-assist__resetdanger { color: var(--ar-bad); }

/* Preview */
.ar-assist__preview {
  border: 1px solid var(--ar-line); border-left: 3px solid var(--ar-accent);
  border-radius: 10px; background: color-mix(in srgb, var(--ar-accent) 2%, var(--ar-surface));
  padding: 14px 16px;
}
.ar-assist__ptitle { margin: 0 0 6px; font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); line-height: 1.25; }
.ar-assist__pexcerpt { margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: var(--ar-ink-soft); }
.ar-assist__pbody {
  max-height: 320px; overflow-y: auto; padding-right: 6px;
  font-size: 12.5px; line-height: 1.62; color: var(--ar-ink-soft);
}
.ar-assist__pbody h2 { font-size: 14px; color: var(--ar-ink); margin: 14px 0 6px; }
.ar-assist__pbody h3 { font-size: 13px; color: var(--ar-ink); margin: 12px 0 5px; }
.ar-assist__pbody p { margin: 0 0 9px; }
.ar-assist__pbody ul, .ar-assist__pbody ol { margin: 0 0 9px 18px; padding: 0; }
.ar-assist__pbody li { margin-bottom: 4px; }
.ar-assist__meta { display: grid; gap: 7px; margin-top: 12px; }
.ar-assist__metarow { display: flex; gap: 10px; align-items: baseline; font-size: 12px; }
.ar-assist__metakey { flex: 0 0 92px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-assist__metaval { color: var(--ar-ink-soft); }
.ar-assist__chips { display: flex; flex-wrap: wrap; gap: 5px; }
.ar-assist__chip {
  font-size: 11px; padding: 1px 8px; border-radius: 999px;
  color: var(--ar-ink-soft); background: var(--ar-surface-2); border: 1px solid var(--ar-line);
}

/* Images have no drawer UI — just the one-line note about what the editor
   will hold. (The image workshop lives in the block editor now.) */
.ar-assist__imagesnote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ar-line); }
.ar-assist__librow { display: flex; gap: 8px; align-items: center; }

/* Refine: revise-in-place bar under the preview. */
.ar-assist__refine { display: flex; gap: 8px; margin-top: 12px; }
/* Inside the pinned foot the bar owns the top slot; the rows follow below. */
.ar-assist__foot .ar-assist__refine { margin: 0 0 11px; }
.ar-assist__foot .ar-assist__undoline { margin: -4px 0 10px; }
/* The foot's two right-edge buttons (Revise above, Update/Create below) share
   one width, so the stack reads as a single aligned column — and both wear a
   trimmer cut here than the full-size ar-btn: the foot is a toolbar, not a
   hero, and the input deserves the room. */
.ar-assist__foot .ar-assist__refinebtn,
.ar-assist__foot .ar-assist__go {
  min-width: 132px; height: 40px; padding: 0 16px; font-size: 11px;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
}
/* The input matches the buttons' height exactly — one 40px line, no seams. */
.ar-assist__foot .ar-assist__refine .ar-assist__refineinput { height: 40px; }
/* Qualified selectors on purpose: wp-admin's forms.css styles bare
   `input[type=text]` (background, border, blue focus ring) at higher
   specificity than a lone class — without these, an <input> field and a
   <textarea> field wearing the SAME class render visibly different. */
.ar-drawer input.ar-assist__refineinput,
.ar-drawer textarea.ar-assist__refineinput,
.ar-assist__refineinput {
  box-sizing: border-box; margin: 0; /* wp-admin gives inputs `margin: 0 1px` —
  the phantom pixel that made an input and a textarea measure differently */
  flex: 1; min-width: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink);
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: 9px;
  padding: 8px 11px; box-shadow: none;
}
/* Re-asserted AFTER the unified rule (same specificity — order decides):
   the note keeps its number-gutter indent, and the title must NOT flex-grow —
   it's a direct child of the footed body's flex column, and the unified rule's
   `flex: 1` would otherwise stretch it to fill the drawer. */
.ar-drawer textarea.ar-assist__onote { margin-left: 24px; }
.ar-drawer input.ar-assist__otitle { flex: 0 0 auto; }
/* Focus is a tinted border + a soft halo — visible without the chunky
   double-ring the 2px offset outline drew around rounded fields. */
.ar-drawer input.ar-assist__refineinput:focus,
.ar-drawer textarea.ar-assist__refineinput:focus,
.ar-assist__refineinput:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-accent) 15%, transparent); }
.ar-assist__refinebtn { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 7px; font-size: 12.5px; padding: 7px 14px; }
.ar-assist__undoline { margin: 8px 0 0; font-size: 11.5px; color: var(--ar-ink-faint); }

/* Done */
.ar-assist__done { text-align: center; padding: 26px 10px 6px; }
.ar-assist__doneicon {
  display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 50%;
  color: var(--ar-good); background: color-mix(in srgb, var(--ar-good) 10%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-good) 30%, var(--ar-surface));
  margin-bottom: 12px;
}
.ar-assist__donetitle { margin: 0 0 6px; font-family: var(--ar-serif); font-size: 17px; color: var(--ar-ink); }
.ar-assist__donetext { margin: 0 0 16px; font-size: 13px; color: var(--ar-ink-soft); }
.ar-assist__doneactions { display: flex; justify-content: center; gap: 10px; }
.ar-assist__nudge {
  margin: 18px auto 0; max-width: 380px; text-align: left;
  font-size: 11.5px; line-height: 1.6; color: var(--ar-ink-faint);
  padding: 10px 12px; border: 1px dashed var(--ar-line-strong); border-radius: 9px;
}

.ar__review-pop {
  position: absolute; top: calc(100% + 8px); right: 0; z-index: 60;
  width: 400px; max-width: calc(100cqw - 32px);
  /* Flex column: the list region (.ar-rev-scroll) scrolls, the footer is a fixed
     sibling below it — never sticky-pinned over content, so nothing shows through. */
  max-height: 72vh; display: flex; flex-direction: column; overflow: hidden;
  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);
}
/* Fixed header block — title/count/auto-refresh + filter tabs. Mirror of .ar-rev-foot;
   raised (z-index) so its downward shadow paints over the cards scrolling beneath. */
.ar-rev-top {
  flex: 0 0 auto; position: relative; z-index: 1;
  padding: 16px 18px 12px;
  background: var(--ar-surface); border-bottom: 1px solid var(--ar-line-strong);
  box-shadow: 0 8px 14px -10px rgba(27, 25, 19, 0.28);
}
.ar-rev-top .ar-rev-tabs { margin: 12px 0 0; }
.ar-rev-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 0 18px 16px; }
.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; }
/* Hairline between the descriptive header and the actionable list (only when there are rows). */
.ar__review-list { margin-top: 2px; padding-top: 6px; border-top: 1px solid var(--ar-line); }

/* Live-updates toggle (opt-in polling) — sits top-right of the dropdown head. */
.ar__review-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.ar__live {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 8px 3px 7px; border-radius: 999px;
  border: 1px solid var(--ar-line-strong); background: var(--ar-surface);
  font: inherit; font-size: 9.5px; font-weight: 600; letter-spacing: 0.07em; text-transform: uppercase;
  color: var(--ar-ink-soft); cursor: pointer;
  transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease;
}
.ar__live:hover { border-color: var(--ar-ink-soft); color: var(--ar-ink); }
.ar__live-dot { width: 6px; height: 6px; border-radius: 50%; border: 1.5px solid currentColor; background: transparent; }
.ar__live.is-on { border-color: rgba(47, 122, 76, 0.45); color: var(--ar-good); background: rgba(47, 122, 76, 0.08); }
.ar__live.is-on .ar__live-dot { border-color: var(--ar-good); background: var(--ar-good); }

/* ---- 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. A row now: the
     title/intro column on the left, a tools slot on the right edge that a
     panel can teleport into (the About search lives there, always in reach). */
  height: var(--ar-bar-h);
  display: flex; align-items: center; gap: 18px;
  padding: 0 34px;
  background: var(--ar-surface);
  border-bottom: 1px solid var(--ar-line);
}
.ar__pagehead-text { display: flex; flex-direction: column; justify-content: center; min-width: 0; }
.ar__pagehead-tools { margin-left: auto; flex: 0 1 auto; min-width: 0; }
.ar__pagehead-tools .ar-about-toc .ar-input { width: 230px; max-width: 30vw; }
/* #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; }
/* The gauge + tier block doubles as a quiet link to the full readiness report:
   button reset, no underline, just a faint brighten on hover. */
.ar-rail-readiness--link {
  width: 100%; margin: 0; padding: 0; border: 0; background: transparent;
  color: inherit; text-align: left; text-decoration: none; cursor: pointer;
  transition: filter 0.15s ease;
}
.ar-rail-readiness--link:hover { filter: brightness(1.08); }
.ar-rail-readiness--link:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: 8px; }
.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; }
/* Local site with search engines discouraged: a launch-day to-do, amber not red. */
.ar-rail-tier[data-state="local"] .ar-rail-tier__name { color: #e0b24c; }
.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. Each row
   is a quiet link that jumps to that rung's group in the Readiness tab — no
   underline, just a subtle brighten on hover (it stays a stat panel, not a menu). */
.ar-rungs { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.ar-rung {
  font-family: var(--ar-mono); font-size: 12px; color: rgba(243, 240, 231, 0.4);
}
.ar-rung__btn {
  display: flex; align-items: center; gap: 9px; width: 100%;
  margin: 0; padding: 0; border: 0; background: transparent;
  font: inherit; color: inherit; text-align: left; text-decoration: none;
  cursor: pointer; transition: filter 0.15s ease;
}
.ar-rung__btn:hover { filter: brightness(1.18); }
.ar-rung__btn:focus-visible { outline: 2px solid currentColor; outline-offset: 3px; border-radius: 4px; }
/* The Optimized rung has no tab to jump to (it's per-post), so it's a plain stat row. */
.ar-rung__btn--static { cursor: default; }
.ar-rung__btn--static:hover { filter: none; }
.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; }
/* A fixed right-aligned slot ("100%" wide), so the percentages hold a perfect
   column and the todo chips right-align against it without wobbling it. */
.ar-rung__count { font-size: 11px; opacity: 0.85; flex: 0 0 auto; min-width: 4ch; text-align: right; }
.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;
}
@media (prefers-reduced-motion: reduce) { .ar-rung__btn { transition: none; } }
/* 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;
  /* Belt and braces with `.ar__rail > * { min-width: 0 }`: a button won't shrink past its
     own content unless told to, however roomy the box around it. */
  min-width: 0; max-width: 100%;
}
/* A per-post content gap has no in-app page to jump to, so the next-step reads as a
   plain informational line (no arrow, no link) rather than a click that goes nowhere. */
.ar-rail-next--info { margin: 11px 0 0; font-family: var(--ar-mono); font-size: 12px; color: rgba(243, 240, 231, 0.5); }

/* Dark variant of the Readiness rail card. Double class so it outranks the base
   .ar-rail-card background regardless of source order. Scheme-aware: on a
   non-default admin colour scheme PHP (Admin::scheme_css) re-declares --ar-ink
   on this card, the buttons and the editable chips — those dark surfaces take
   the scheme's flavour while the rest of the app keeps the designed palette. */
.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. */
/* Fixed top-right stack: toasts pile downward, newest at the bottom, each on its
   own dismiss timer. (top: 36px tucks into the nav-bar band below the wp-admin bar;
   right: 34px aligns with the content's right edge.) */
.ar-toasts {
  position: fixed; top: 36px; right: 34px; z-index: 100003; /* above the modal (100001), so a "copied"/"saved" toast is visible over an open dialog */
  display: flex; flex-direction: column; align-items: flex-end; gap: 10px;
  pointer-events: none;
}
.ar-toast {
  pointer-events: auto;
  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; }
.ar-toast.is-info .ar-toast__bar { background: #3a6ea5; }
.ar-toast.is-info .ar-toast__title { color: #2c5680; }

/* Slide in from the right (right-to-left), out to the right. The leaving toast is
   taken out of flow so the survivors slide up smoothly via the move transition. */
.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; position: absolute; right: 0; }
.ar-toast-move { transition: 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, .ar-toast-move { 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;
}
/* The column must be minmax(0,1fr), NOT the implied auto: an auto track sizes to its
   widest item's min-content, so ONE rigid leaf (a pre snippet, a nowrap row, a table)
   silently widens the track past a phone's viewport and the whole page pans sideways.
   minmax(0,1fr) pins the track to the container; overflow-x:clip is the backstop for
   any leaf that still can't shrink — it clips instead of panning the page (clip, unlike
   hidden, creates no scroll container, so sticky children keep working). */
.ar__main { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; min-width: 0; overflow-x: clip; }
/* The same trap one level down: every single-column card stack re-declares its own
   grid, and each implied auto track would again size to its widest item — the About
   pre snippet proved one rigid leaf widens (then clips) EVERY sibling card on a
   phone. Pin them all. */
.ar-form, .ar-group, .ar-about, .ar-wd, .ar-act, .ar-aitraffic, .ar-preview, .ar-preview__group {
  grid-template-columns: minmax(0, 1fr);
}
/* And keep a <pre>'s intrinsic width out of ancestor sizing entirely: it can never
   wrap, so it must take its container's width and scroll inside it (the snippets all
   set overflow-x:auto). contain:inline-size zeroes its min-content contribution. */
#agentimus-app pre { min-width: 0; contain: inline-size; }
/* 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 --------------------------------------------------------- */
/* Rail sticks BELOW the now-sticky header (admin bar + the two 72px strips). It's only
   sticky above 900px (it goes static below), where the header is always exactly 144px. */
/* The rail sticks below the sticky header and flows with the page (no internal scroll
   or scrollbar) — the main column is always taller, so the whole rail stays reachable
   as you scroll. */
.ar__rail { position: sticky; top: calc(var(--ar-adminbar) + 2 * var(--ar-bar-h)); display: grid; gap: 11px; align-content: start; padding-bottom: 6px; }
/* A grid item's min-width defaults to `auto`, so it refuses to shrink below its content's
   min-content width — and a <button> ignores its own `overflow: hidden` when contributing
   to that minimum. So one long next-step label ("Next: AI Visibility is failing")
   made the readiness card WIDER than the rail column it lives in, and the dark card bled
   out over the page. The ellipsis on .ar-rail-next never got a chance to do its job.
   Letting the cards shrink to their column is what lets the label clip as intended. */
.ar__rail > * { min-width: 0; }
.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 { display: flex; align-items: center; justify-content: center; gap: 6px; margin: 9px 0 0; font-size: 12px; color: var(--ar-good); }
.ar-rail-allgood svg { flex: 0 0 auto; }
/* Registration status — its own compact one-line card, separate from the black card.
   Inherits .ar-rail-card (bg/border/radius) with tighter padding for a single row; the
   → is always visible. Green ✓ when valid, amber throughout when a registration breaks. */
.ar-rail-regcard {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 13px 18px; appearance: none; text-align: left; cursor: pointer;
  font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink-soft);
  transition: border-color 0.15s ease;
}
.ar-rail-regcard__icon { flex: 0 0 auto; }
.ar-rail-regcard__text { flex: 1; min-width: 0; }
.ar-rail-regcard__go { flex: 0 0 auto; color: var(--ar-ink-faint); }
.ar-rail-regcard.is-ok .ar-rail-regcard__icon { color: var(--ar-good); }
.ar-rail-regcard.is-alert { color: var(--ar-warn); }
.ar-rail-regcard.is-alert .ar-rail-regcard__icon,
.ar-rail-regcard.is-alert .ar-rail-regcard__go { color: var(--ar-warn); }
.ar-rail-regcard:hover { border-color: var(--ar-line-strong); }
.ar-rail-regcard:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.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); }
/* Every link here opens in a new tab — the ↗ answers the ↳ and says so up
   front. \FE0E pins the text glyph so no platform swaps in an emoji. */
.ar-rail-links a::after { content: "\2197\FE0E"; font-size: 10.5px; color: var(--ar-ink-faint); transition: color 0.15s; }
.ar-rail-links a:hover { color: var(--ar-accent); }
.ar-rail-links a:hover::after { color: var(--ar-accent); }

/* Validation chip — compact at-a-glance status. The all-clear state lives here
   so it stops eating a half-empty card in the Discovery column; real issues get
   a tone + a one-click jump to the full list. */
.ar-rail-valid {
  appearance: none; width: 100%; padding: 0; border: 0; background: none; cursor: pointer;
  display: flex; align-items: center; gap: 9px; text-align: left;
}
.ar-rail-valid__check {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; flex: 0 0 auto; border-radius: 50%;
  background: rgba(47, 122, 76, 0.12); color: var(--ar-good);
}
.ar-rail-valid__text { font-size: 12.5px; color: var(--ar-ink); }
/* Arrow sits at the right edge and is the click affordance (no underline-on-hover,
   matching the rail's other links — the colour shift is the feedback). */
.ar-rail-valid__go { margin-left: auto; font-family: var(--ar-mono); font-size: 13px; color: var(--ar-ink-faint); transition: color 0.15s ease; }
.ar-rail-valid:hover .ar-rail-valid__go { color: var(--ar-accent); }
.ar-rail-valid:hover .ar-rail-valid__text { color: var(--ar-accent); }
/* Quiet maker credit BENEATH the last rail card — plain text on the page
   background (no card, no divider), dimmed, with a muted (not loud red) heart
   so it sits calmly in the restrained palette. */
.ar-rail-foot {
  display: flex; align-items: center; justify-content: center; gap: 10px;
  margin: 0 4px;
  font-size: 10px; line-height: 1.4; color: var(--ar-ink-faint);
}
/* Two short hairlines flanking the credit, each dissolving toward the outer edge. */
.ar-rail-foot::before,
.ar-rail-foot::after { content: ''; flex: 0 1 34px; height: 1px; }
.ar-rail-foot::before { background: linear-gradient(to right, transparent, currentColor); }
.ar-rail-foot::after { background: linear-gradient(to left, transparent, currentColor); }
.ar-rail-foot__text { flex: 0 0 auto; white-space: nowrap; }
.ar-rail-foot__heart { color: #d29991; }
/* Quiet self-link: reads as plain dimmed text, reveals it's a link only on
   intent (darkens + underlines on hover/focus). */
.ar-rail-foot__link {
  color: inherit; text-decoration: none; box-shadow: none;
}
.ar-rail-foot__link:hover,
.ar-rail-foot__link:focus-visible {
  color: var(--ar-ink); text-decoration: underline;
}
.ar-rail-card--validation.is-warn { border-color: rgba(173, 123, 24, 0.45); }
.ar-rail-card--validation.is-bad { border-color: rgba(185, 60, 43, 0.45); }
.ar-rail-valid__alert { padding: 0; font-size: 12.5px; line-height: 1.45; text-align: left; }
.ar-rail-card--validation.is-warn .ar-rail-valid__alert { color: var(--ar-warn); }
.ar-rail-card--validation.is-bad .ar-rail-valid__alert { color: var(--ar-bad); }
.ar-rail-card--validation .ar-rail-valid__alert:hover { color: var(--ar-ink-soft); }

.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; max-height: none; overflow: visible; }
}

/* Narrow widths: stack the header into two rows. Row 1 is the brand alone; row 2
   is the navbar — all tabs on a single line at the left with the bell pinned to
   the right (a touch smaller) so the notification sits on the menu row. The tab
   strip keeps every item on one line, scrolling horizontally only if the screen
   is too narrow for all of them. */
@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;
  }
  /* The brand→nav break becomes a 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; }
  /* The quill→bell pull-in assumes the desktop bar's 26px gap (26−16 = 10px
     between the pills); this row's gap is 16px, where −16 left them TOUCHING.
     Ease it so the pair keeps the same 10px daylight here. */
  .ar__assist + .ar__review { margin-left: -6px; }
  /* Condense the masthead: drop the version line and the arrow, shrink the
     mark + wordmark. */
  .ar__ver { display: none; }
  .ar__brandarrow { display: none; }
  .ar__mark { width: 26px; height: 26px; }
  .ar__logo { width: 16px; }
  .ar__name { font-size: 15px; }
  /* Navbar row: all tabs stay on ONE line at the left; the labels tighten a
     touch so every one fits on typical small screens, and if the viewport is
     narrower than that the strip scrolls horizontally (scrollbar hidden) rather
     than wrapping a tab onto its own row. The bell stays pinned right;
     flex-basis:0 lets the strip shrink-to-fit beside it. */
  .ar__tabs {
    flex: 1 1 0; min-width: 0;
    flex-wrap: nowrap;
    overflow-x: auto;
    gap: 16px;
    /* Spread the tabs across the full strip so they reach toward the bell instead
       of bunching at the left with dead space before it. space-between only
       distributes EXISTING free space, so when the strip is too narrow it collapses
       to the gap and scrolls — it can never force an overflow. */
    justify-content: space-between;
  }
  .ar__tab { letter-spacing: 0.07em; font-size: 10.5px; white-space: nowrap; }
  .ar__review { flex: 0 0 auto; align-self: center; }
  /* Phones: clamp the five nav labels harder so the last one (About) clears the
     bell instead of scrolling under it. Tighter tracking, smaller type, slimmer
     gaps + bar padding reclaim ~60px; the strip still scrolls below ~360px. */
  /* 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; }
  /* Small screens: the nav above already wraps taller here, so the desktop
     height-lock pairing is moot — let the strip grow and show the whole
     tagline instead of ellipsis-truncating it. */
  .ar__pagehead { padding: 12px 16px; height: auto; min-height: var(--ar-bar-h); flex-wrap: wrap; row-gap: 10px; }
  .ar__pagehead-desc { white-space: normal; overflow: visible; text-overflow: clip; }
  /* The tools slot takes its own full-width row under the title (a wrapping
     flex row wraps before it shrinks — title and tools never share a line
     at phone width), and the jump menu stretches edge to edge. */
  .ar__pagehead-tools { flex: 1 1 100%; margin-left: 0; }
  .ar__pagehead-tools .ar-about-toc, .ar__pagehead-tools .ar-about-toc .ar-select { width: 100%; }
  .ar__pagehead-tools .ar-about-toc .ar-input { width: 100%; max-width: none; }
  .ar__body { padding: 20px 16px; }
}

/* Narrow phones: trim padding + the inter-tab gap floor so all five tabs + the
   bell fit one row. The labels keep their readable size — space-between (set in
   the ≤720 block) spreads them to fill the strip, so no extra type-shrinking is
   needed; the strip still scrolls below ~360px. */
@container (max-width: 460px) {
  .ar__bar { padding: 11px 12px; }
  .ar__tabs { gap: 8px; }
  .ar__tab { letter-spacing: 0.04em; }
  /* The icons would cost ~80px the all-five-tabs-on-one-row fit can't spare. */
  .ar__tab-ic { display: none; }
}

/* Mainstream small phones (~360–412): the readable size above would push ABOUT
   off the strip and scroll it under the bell. Tighten type + gap just enough that
   all five fit unscrolled here; space-between still spreads them to fill. */
@container (max-width: 430px) {
  .ar__bar { padding: 11px 8px; }
  .ar__tabs { gap: 3px; }
  .ar__tab { letter-spacing: 0; font-size: 9px; }
  .ar__review-btn { padding: 4px 6px; gap: 4px; }
}

.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); }

/* The Advanced tab's closing zone (developer & maintenance): its cards wear the
   normal surface — this labeled hairline on the canvas marks the boundary. */
.ar-zonebreak { display: flex; align-items: center; gap: 12px; margin: 0; }
.ar-zonebreak span { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-ink-soft); white-space: nowrap; }
.ar-zonebreak::after { content: ""; flex: 1; border-top: 1px solid var(--ar-line); }

/* Once-per-release "What's new" card (plugin Dashboard only). A calm accent-tinted
   card, not an alert: the left accent bar + spark mark say "new", the grid keeps the
   highlights scannable, and the single Got-it dismiss makes it leave for good. */
.ar-whatsnew {
  margin-bottom: 18px; border-left: 3px solid var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 3%, var(--ar-surface));
}
.ar-whatsnew__head { display: flex; align-items: center; gap: 10px; }
.ar-whatsnew__spark {
  width: 30px; height: 30px; border-radius: 9px; display: grid; place-items: center; flex: 0 0 auto;
  color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 9%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 26%, var(--ar-surface));
}
.ar-whatsnew__title { margin: 0; font-family: var(--ar-serif); font-size: 18px; font-weight: 600; color: var(--ar-ink); }
.ar-whatsnew__tag {
  font-family: var(--ar-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 7px; border-radius: 999px; color: var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 8%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface));
}
.ar-whatsnew__grid {
  display: grid; grid-template-columns: 1fr 1fr; gap: 14px 26px; margin-top: 16px;
}
.ar-whatsnew__itemtitle { display: block; font-size: 13.5px; color: var(--ar-ink); margin-bottom: 3px; }
.ar-whatsnew__itemtext { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-whatsnew__foot { display: flex; align-items: center; justify-content: flex-end; gap: 16px; margin-top: 16px; }
.ar-whatsnew__gotit { font-size: 12.5px; padding: 7px 18px; }
@media (max-width: 720px) {
  .ar-whatsnew__grid { grid-template-columns: 1fr; }
}

/* The review ask — What's-New family: one row of words, one row of answers. */
.ar-reviewask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 14px 24px; }
.ar-reviewask__body { display: flex; align-items: flex-start; gap: 12px; flex: 1 1 380px; }
.ar-reviewask__stars { color: #e0a32e; font-size: 15px; letter-spacing: 2px; line-height: 1.7; white-space: nowrap; }
.ar-reviewask__title { margin: 0 0 4px; font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); }
.ar-reviewask__text { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ar-ink-soft); max-width: 640px; }
.ar-reviewask__actions { display: flex; align-items: center; gap: 16px; }

/* The in-admin changelog dialog body: one section per release, quiet version
   headings, readable note bullets. Rendered notes carry only server-made
   <strong>/<code>/<a> — escaped before formatting. */
.ar-chlog__entry { padding: 14px 0 4px; border-top: 1px solid var(--ar-line); }
.ar-chlog__entry:first-child { border-top: 0; padding-top: 4px; }
.ar-chlog__ver { margin: 0 0 8px; font-family: var(--ar-mono); font-size: 13px; font-weight: 700; color: var(--ar-ink); }
.ar-chlog__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-chlog__note { font-size: 12.5px; line-height: 1.6; color: var(--ar-ink-soft); padding-left: 14px; position: relative; }
.ar-chlog__note::before { content: ''; position: absolute; left: 0; top: 0.62em; width: 5px; height: 5px; border-radius: 50%; background: var(--ar-accent); }
.ar-chlog__note strong { color: var(--ar-ink); }
.ar-chlog__note code {
  font-family: var(--ar-mono); font-size: 11.5px; padding: 0 4px; border-radius: 3px;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
}

.ar-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
/* When the title + a row of buttons can't share a line, let the button group drop to
   its own row (labels stay on one line) rather than squeezing + wrapping mid-button. */
.ar-card__head--inline { flex-wrap: wrap; }
.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);
}
/* The standfirst: a section's lead runs full width in the serif voice — visibly the
   section's own introduction (same family as its header), never mistakable for one
   more settings hint in the sans body. The masthead rule beneath it (a step stronger
   than the row hairlines) closes the header zone before the settings begin. */
.ar-card__lead {
  margin: 0 0 20px; padding-bottom: 14px; max-width: none;
  border-bottom: 1px solid var(--ar-line-strong);
  font-family: var(--ar-serif); font-size: 15px; line-height: 1.6;
  color: var(--ar-ink-soft);
}
/* Ruled head: when buttons share the header, the masthead rule moves from the
   lead to the head's OWN bottom edge — full card width, always below the
   buttons — and the lead keeps its tight old gap under the title. */
.ar-card__head--ruled { border-bottom: 1px solid var(--ar-line-strong); padding-bottom: 14px; margin-bottom: 20px; }
.ar-card__head--ruled .ar-card__lead { border-bottom: 0; padding-bottom: 0; margin: 0; }
/* (A full-width tinted band behind the header zone was tried and reverted: the tab strip
   already uses the secondary surface, so the panel opened as three stacked tinted strips,
   and the band's edge swallowed the masthead rule's contrast. Flat surface + rule wins.) */
/* 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; }
/* A note whose payload is a chip list needs the full card width, not the 88ch
   reading measure — chips wrap far better across the whole row. */
.ar-card__note--wide { max-width: none; }
.ar-card__note--wide code { white-space: nowrap; }
/* 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;
}

/* Tabbed settings panel — the section nav is docked onto the top of a single
   content surface, so the tabs and the content read as one unit, not a floating
   control above separate cards. The active tab is white (the panel-body colour)
   with a top accent rule; its bottom edge drops over the tab-row border so the
   body merges seamlessly into it. */
.ar-tabpanel {
  /* Transparent shell: the masthead (tabs + headline) and each section card carry
     their own sheets, and wp-admin's real background shows in the gaps between them. */
  background: transparent;
  /* As a grid item of .ar__main, the default min-width:auto would refuse to
     shrink below the tab strip's intrinsic width — so once the tabs no longer
     fit (5+ tabs on a phone) the whole panel overflowed the viewport instead of
     the strip scrolling. min-width:0 lets it shrink to the column; the strip's
     own overflow-x:auto then scrolls, and the form body wraps to width. */
  min-width: 0;
}
/* Deliberately NOT a scroll container: overflow-x:auto here made the strip scrollable
   on BOTH axes (a trackpad swipe panned the tabs sideways, and the active tab's 1px
   overhang even let them shift vertically). The tabs share the row equally and
   compress to fit instead — the strip itself can never move. */
.ar-tabpanel__tabs {
  display: flex; gap: 0;
  background: var(--ar-surface); /* one tone with the active tab — selection reads from the accent bar and ink alone */
  border: 1px solid var(--ar-line);
  border-bottom: 1px solid var(--ar-line-strong); /* the strip's base rule must actually read */
  border-radius: var(--ar-radius) var(--ar-radius) 0 0;
}
.ar-subnav__item {
  appearance: none; cursor: pointer; background: transparent; border: 0;
  flex: 1 1 0; min-width: 0; white-space: nowrap; text-align: center;
  overflow: hidden; text-overflow: ellipsis; /* the label yields; the row never does */
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  padding: 14px 10px;
  font-family: var(--ar-mono); font-size: 11px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint);
  transition: color 0.15s ease, background 0.15s ease;
}
/* Each tab's mark, bare before its label — inherits the label's ink, wakes to teal
   with the active tab. */
.ar-subnav__icon { display: inline-flex; flex: 0 0 auto; }
.ar-subnav__icon svg { width: 15px; height: 15px; display: block; }
.ar-subnav__item.is-active .ar-subnav__icon { color: var(--ar-accent); }
.ar-subnav__item + .ar-subnav__item { box-shadow: inset 1px 0 0 var(--ar-line); }
.ar-subnav__item:hover { color: var(--ar-ink-soft); }
.ar-subnav__item.is-active {
  color: var(--ar-ink); background: var(--ar-surface);
  box-shadow: inset 0 2px 0 0 var(--ar-accent);          /* top accent indicator */
  /* No merge trick: the strip's bottom rule runs unbroken under the active tab too —
     Heera's call (2026-07-19); the white fill + top accent already mark selection. */
}
.ar-subnav__item:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: -2px; }
/* On a phone, clamp the tabs further so all five labels stay whole on one row:
   smaller type, tighter tracking, slimmer padding. Anything narrower still and
   the longest labels ellipsize (see overflow above) — the row never scrolls. */
@media (max-width: 600px) {
  .ar-tabpanel__tabs .ar-subnav__item {
    padding: 12px 6px;
    font-size: 10px;
    letter-spacing: 0.02em;
  }
  .ar-tabpanel__tabs .ar-subnav__icon { display: none; } /* five labels must fit one row */
}

/* Transparent: wp-admin's real background shows between the masthead and the cards. */
.ar-tabpanel__body { min-width: 0; padding: 16px 0 0; }
/* Per-control save lock: only the switch/card the user just changed carries
   [data-busy] while ITS save is in flight — it dims and ignores further clicks,
   exactly like a button mid-action, while every other control stays live. We
   deliberately do NOT set a native [disabled] on the inputs: wp-admin's forms.css
   repaints a disabled checkbox as a bordered box (its :disabled rule out-specifies
   our hide), which leaked a stray border onto every switch.
   pointer-events must sit on the whole LABEL, not just the input: clicking a
   label-wrapped checkbox toggles it via label activation even when the input
   itself is pointer-events:none, so the card would still flip (and show its tick)
   while looking disabled. Locking the label blocks the click outright.
   Marked via a data-attribute, not a class: a `.ar-type` card carries a Vue
   `:class` (is-on) that Vue rewrites on the same change that starts the save, which
   would wipe a manually-added class — Vue leaves unknown attributes alone. */
.ar-toggle[data-busy],
.ar-type[data-busy] {
  cursor: default;
  opacity: 0.6;
  pointer-events: none;
  transition: opacity 0.12s ease;
}
/* Master-off lock: a child block whose master switch is off stays on screen — the page
   keeps its shape and the parent→child relationship stays visible — but it's `inert`
   (no mouse, no keyboard focus) and clearly asleep. Deeper dim than the busy-lock so
   "saving" and "disabled" never read as the same state. */
#agentimus-app [inert] { opacity: 0.45; }
/* A sleeping child switch also RENDERS off — teal in a disabled block reads as "this is
   still happening", and it isn't while the master is off. Presentation only: the saved
   value is untouched and shows again the moment the master turns back on. */
[inert] .ar-toggle input:checked + .ar-toggle__track,
.ar-toggle[inert] input:checked + .ar-toggle__track { background: #d8d2c2; }
[inert] .ar-toggle input:checked + .ar-toggle__track::after,
.ar-toggle[inert] input:checked + .ar-toggle__track::after { transform: none; }
#agentimus-app .ar-webmcp-tools,
#agentimus-app .ar-enforce-body,
#agentimus-app .ar-card { transition: opacity 0.18s ease; }
/* The group's own headline — "Who owns this site" describes everything under the active
   tab, so it speaks in the serif voice with real ink: above the card titles in rank,
   never mistakable for one more hint. */
.ar-tabpanel__caption {
  margin: 0; padding: 13px 26px;
  /* Fluid: 18px on a desktop app column, easing to 15px on a phone (cqi = 1% of the
     app container's width, so the wp-admin sidebar is accounted for, unlike vw). */
  font-size: clamp(15px, 8px + 1.6cqi, 18px);
  font-family: var(--ar-serif); color: var(--ar-ink);
  /* Bottom half of the masthead sheet (the strip above completes the frame). */
  background: var(--ar-surface);
  border: 1px solid var(--ar-line); border-top: 0;
  border-radius: 0 0 var(--ar-radius) var(--ar-radius);
}

/* Inside the panel the cards drop their own frame and become segments of the one
   surface, divided by a hairline — so the whole thing reads as a single panel.
   Each group restarts the spec-sheet numbering (hidden groups are display:none,
   so they neither lay out nor count). */
.ar-group { display: grid; gap: 18px; counter-reset: arcard; }
/* Each section: its own complete card on wp-admin's gray — the base .ar-card look
   (surface, hairline frame, rounded corners) with real background showing in the
   gaps. (Hairlines, double rules, letterpress and slab variants were each tried on
   the way here; free-standing cards on the admin background won.) */
.ar-tabpanel .ar-card--muted { background: var(--ar-surface-2); }

/* WebMCP per-tool list, revealed under the Browser-tools master toggle. */
.ar-webmcp-tools { margin-top: 4px; margin-left: 22px; padding-top: 2px; border-top: 1px solid var(--ar-line); }
.ar-webmcp-tools__head { margin: 13px 0 0; font-size: 12px; color: var(--ar-ink-faint); }

/* MCP-server connection details, revealed under the MCP master toggle. */
.ar-mcp-connect { margin-top: 10px; padding-top: 18px; border-top: 1px solid var(--ar-line); }
.ar-mcp-connect__endpoint { display: flex; align-items: center; gap: 8px; margin: 8px 0 0; flex-wrap: wrap; }
.ar-mcp-connect__endpoint code { word-break: break-all; }

/* The connect helper: status strip, numbered steps, client picker (borrows the
   review-tabs look), the key row, and the ready-to-paste config. */

/* Status: a quiet fact bar, not a dashboard hero. The dot is the state. */
.ar-mcp-status {
  display: flex; align-items: baseline; justify-content: space-between; gap: 6px 16px;
  flex-wrap: wrap; margin: 12px 0 0; padding: 9px 12px;
  background: var(--ar-surface-2); border-radius: 9px;
}
.ar-mcp-status__state { margin: 0; font-size: 12.5px; color: var(--ar-ink-soft); display: flex; align-items: center; gap: 8px; }
.ar-mcp-status__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-ink-faint); flex: none; }
.ar-mcp-status__state[data-state="running"] { color: var(--ar-ink); }
.ar-mcp-status__state[data-state="running"] .ar-mcp-status__dot {
  background: var(--ar-good);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-good) 18%, transparent);
}
.ar-mcp-status__state[data-state="unreachable"] .ar-mcp-status__dot { background: var(--ar-bad); }
.ar-mcp-status__state[data-state="unsaved"] .ar-mcp-status__dot { background: var(--ar-warn); }
.ar-mcp-status__last { margin: 0; font-size: 12px; color: var(--ar-ink-faint); }
.ar-mcp-status__last a { color: var(--ar-accent); text-decoration: none; white-space: nowrap; }
.ar-mcp-status__last a:hover { text-decoration: underline; }

/* Connection token — the primary connect path: one revocable secret, then a
   card per assistant. The cards stay visible (dimmed) before a token exists so
   the shape of the work is legible before the owner commits to anything. */
.ar-mcp-token__lead { margin: -4px 0 12px; }
.ar-mcp-scopes { display: flex; flex-direction: column; gap: 8px; margin-bottom: 14px; }
.ar-mcp-scope-opt {
  display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px;
  border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
  background: var(--ar-surface-2); cursor: pointer;
}
.ar-mcp-scope-opt.is-sel { border-color: var(--ar-accent); box-shadow: 0 0 0 1px var(--ar-accent); }
.ar-mcp-scope-opt.is-off { opacity: 0.6; cursor: default; }
.ar-mcp-scope-opt input { margin: 3px 0 0; flex: none; accent-color: var(--ar-accent); }
.ar-mcp-scope-opt__body { display: flex; flex-direction: column; gap: 2px; }
.ar-mcp-scope-opt__body strong { font-size: 12.5px; }
.ar-mcp-scope-opt__body small { font-size: 12px; color: var(--ar-ink-soft); }
.ar-mcp-token__actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.ar-mcp-token__once {
  margin: 12px 0; padding: 12px 14px; border-radius: var(--ar-radius);
  border: 1px solid var(--ar-warn); background: color-mix(in srgb, var(--ar-warn) 8%, var(--ar-surface));
}
.ar-mcp-token__row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ar-mcp-token__value {
  font-family: var(--ar-mono); font-size: 12.5px; padding: 6px 10px; border-radius: var(--ar-radius);
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong); word-break: break-all;
}
/* ---- MCP card: status rail, address hero, roster ---------------------- */
.ar-btn--small { padding: 7px 14px; font-size: 11px; }
.ar-mcp-eyebrow {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.13em; text-transform: uppercase;
  color: var(--ar-ink-faint); margin: 0 0 8px;
}

/* One line of state: running · tools · last call · link to the log. */
.ar-mcp-rail {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 10px 14px; background: var(--ar-surface-2);
  border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
  font-size: 12.5px; color: var(--ar-ink-soft);
}
.ar-mcp-rail__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-line-strong); flex: none; }
.ar-mcp-rail[data-state="running"] .ar-mcp-rail__dot { background: var(--ar-good); }
.ar-mcp-rail[data-state="unreachable"] .ar-mcp-rail__dot { background: var(--ar-bad); }
.ar-mcp-rail[data-state="unsaved"] .ar-mcp-rail__dot { background: var(--ar-warn); }
.ar-mcp-rail strong { color: var(--ar-ink); }
.ar-mcp-rail__sep { color: var(--ar-line-strong); }
.ar-mcp-rail a { margin-left: auto; color: var(--ar-accent); text-decoration: none; white-space: nowrap; }
.ar-mcp-rail a:hover { text-decoration: underline; }

/* The address: with one-click approval this IS the setup, so it leads. */
.ar-mcp-addr { margin-top: 16px; }
.ar-mcp-addr__row { display: flex; gap: 8px; align-items: center; min-width: 0; }
.ar-mcp-addr__url {
  font-family: var(--ar-mono); font-size: 12.5px; background: var(--ar-surface-2);
  border: 1px solid var(--ar-line); border-radius: var(--ar-radius); padding: 10px 12px;
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
}
.ar-mcp-addr__hint { margin-top: 9px; }

/* The roster — the loudest block: every key that opens the door. */
.ar-mcp-roster { margin-top: 22px; }
.ar-mcp-roster__head {
  font-family: var(--ar-serif); font-size: 17px; margin: 0 0 3px;
  display: flex; align-items: baseline; gap: 9px;
}
.ar-mcp-roster__count {
  font-family: var(--ar-mono); font-size: 10.5px; background: var(--ar-accent);
  color: var(--ar-paper); border-radius: 999px; padding: 1px 8px;
}
.ar-mcp-roster__count.is-zero { background: var(--ar-line-strong); color: var(--ar-ink-soft); }
.ar-mcp-roster__note { margin: 0 0 10px; }
.ar-mcp-roster__empty {
  border: 1px dashed var(--ar-line-strong); border-radius: var(--ar-radius);
  background: var(--ar-surface-2); padding: 16px; margin: 10px 0 0;
  text-align: center; font-size: 12.5px; color: var(--ar-ink-soft);
}
.ar-mcp-roster__empty strong { display: block; color: var(--ar-ink); font-size: 13.5px; margin-bottom: 2px; }

/* Setup help: one assistant at a time. */
.ar-mcp-picker { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 8px; margin: 10px 0 14px; }
.ar-mcp-pick {
  border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink);
  border-radius: var(--ar-radius); padding: 9px 11px; cursor: pointer; text-align: left;
  font-family: var(--ar-sans); font-size: 12.5px;
}
.ar-mcp-pick.is-on { border-color: var(--ar-accent); box-shadow: inset 0 0 0 1px var(--ar-accent); }
.ar-mcp-pick small { display: block; color: var(--ar-ink-faint); font-size: 11px; }
/* ── The edge panel (Request Log screen) ──────────────────────────────────────
   Conflicts pin ABOVE the log — same left-rule status-box grammar as the Agent
   Access states — and only exist while something actually disagrees. The edge
   cards themselves sit BELOW the log they annotate. */
.ar-edge-pins { display: grid; gap: 12px; }
.ar-edge-pin {
  padding: 14px 16px; border: 1px solid var(--ar-line); border-left-width: 3px;
  border-radius: 4px; background: var(--ar-surface-2);
}
.ar-edge-pin--warn { border-left-color: var(--ar-warn); }
.ar-edge-pin--info { border-left-color: var(--ar-info); }
.ar-edge-pin__badge {
  display: inline-block; font-family: var(--ar-mono); font-size: 9px;
  letter-spacing: 0.1em; text-transform: uppercase; padding: 2px 6px;
  border-radius: 3px; margin: 0 0 6px;
}
.ar-edge-pin--warn .ar-edge-pin__badge { color: var(--ar-warn); border: 1px solid #e6d5a8; background: #f7f1df; }
.ar-edge-pin--info .ar-edge-pin__badge { color: var(--ar-info); border: 1px solid #c3d2e6; background: #e9eff7; }
.ar-edge-pin__title { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--ar-ink); }
.ar-edge-pin__body { margin: 0 0 6px; font-size: 13px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-edge-pin__actions { display: flex; flex-wrap: wrap; gap: 6px 18px; align-items: baseline; }
/* The quiet exit: same link grammar as "Review", but faint — acting is the
   primary path, hiding is the deliberate second choice. */
.ar-edge-pin__hide { color: var(--ar-ink-faint); }
.ar-edge-pin__hide:hover { color: var(--ar-ink); }

/* One column that is ALLOWED to shrink. Left implicit ("auto"), the track sizes
   to its content, so the crawler table's 620px floor became every edge card's
   minimum width — and .ar__main's overflow-x:clip then cut the whole panel at
   the viewport edge on phones: lead text chopped mid-sentence, no scrollbar.
   minmax(0,1fr) pins the track to the screen, min-width:0 lets the cards obey
   it, and the wide table scrolls inside its own .ar-edge__scroll wrapper. */
.ar-edge { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ar-edge > * { min-width: 0; }
.ar-edge__offlead { margin: 0; padding: 0; border-bottom: 0; }
/* The stat strip above ends flush; the table's heading needs its own air.
   Compound selector: .ar-ai__sub is defined LATER in this file, so a lone
   class here would lose the cascade and the heading would stay cramped. */
.ar-edge__sub.ar-ai__sub { margin: 26px 0 14px; }
.ar-edge__scroll { overflow-x: auto; }
/* The connected rail holds ONE line: fixed facts keep their width and never
   wrap; the zone name and a failure note — the only pieces of unbounded
   length — shrink behind an ellipsis instead of folding the rail. */
.ar-edge .ar-mcp-rail { flex-wrap: wrap; gap: 5px 7px; }
.ar-edge .ar-mcp-rail > * { flex: 0 0 auto; white-space: nowrap; }
.ar-edge .ar-mcp-rail .ar-edge__zone {
  flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
/* A failed poll is news, not a footnote: the warning always takes a full line
   of its own under the info line, wrapping like a sentence — never inline,
   never ellipsized. Its leading dot goes with it. */
.ar-edge .ar-mcp-rail .ar-warn { flex: 1 1 100%; white-space: normal; }
.ar-edge .ar-mcp-rail .ar-edge__sep-warn { display: none; }
.ar-edge__railbreak { display: none; }
/* Narrow containers can't hold every segment on one line — instead of letting
   the shrinkables crush to "h…", fold deliberately: identity line, action
   line, and the warning gets a full line of its own. 490 is the true limit:
   above it the healthy rail fits one line whole. */
@container (max-width: 490px) {
  .ar-edge .ar-mcp-rail .ar-edge__railbreak { display: block; flex-basis: 100%; height: 0; }
  .ar-edge .ar-mcp-rail .ar-edge__sep-upd { display: none; }
}
.ar-edge__n { text-align: right; padding-right: 26px !important; font-family: var(--ar-mono); font-size: 12.5px; font-variant-numeric: tabular-nums; }
.ar-edge__ico { display: none; }
/* Card-mode glyphs for the request tables — invisible in the wide tables. */
.ar-cardico { display: none; }
td.ar-edge__n { color: var(--ar-ink-soft); }
td.ar-edge__n.is-bad { color: var(--ar-bad); font-weight: 600; }
.ar-edge__op { color: var(--ar-ink-faint); font-size: 12px; }
.ar-edge__hot { color: var(--ar-warn); }
.ar-edge__subnote { margin: -6px 0 12px; }

/* ── Found by AI Search (Bing) — same shrink discipline as .ar-edge ─────── */
.ar-bing { display: grid; grid-template-columns: minmax(0, 1fr); gap: 22px; }
.ar-bing > * { min-width: 0; }
.ar-bing__offlead { margin: 0; padding: 0; border-bottom: 0; }
.ar-bing__sub.ar-ai__sub { margin: 26px 0 14px; }
.ar-bing__hot { color: var(--ar-warn); }
.ar-bing .ar-mcp-rail { flex-wrap: wrap; gap: 5px 7px; }
.ar-bing .ar-mcp-rail > * { flex: 0 0 auto; white-space: nowrap; }
.ar-bing .ar-mcp-rail .ar-bing__site { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ar-bing .ar-mcp-rail .ar-warn { flex: 1 1 100%; white-space: normal; }
.ar-bing .ar-mcp-rail .ar-bing__sep-warn { display: none; }
/* The index trend: min→max scaled bars (the base is big, the moves are small —
   a zero-scaled chart would render as a flat wall). Newest bar full-ink. */
.ar-bing__trend { display: flex; align-items: flex-end; gap: 3px; height: 56px; margin: 0 0 6px; }
.ar-bing__bar {
  flex: 1 1 0; align-self: flex-end; background: var(--ar-accent); opacity: 0.82;
  border: 0; border-radius: 2px 2px 0 0; min-height: 2px; padding: 0;
  appearance: none; -webkit-appearance: none; cursor: pointer; transition: filter 0.15s ease;
}
.ar-bing__bar:last-child { opacity: 1; }
.ar-bing__bar:hover { filter: brightness(0.85); }
.ar-bing__bar.is-active { filter: brightness(0.7); opacity: 1; }
.ar-bing__bar:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
/* The day report's warn bars — errors and robots blocks read in the warn hue. */
.ar-act-rank__bar.ar-bing__bar--warn { background: var(--ar-warn); }
/* The Bing day report body: one full-width story. */
.ar-bing__daybody { min-width: 0; }
.ar-bing__daybody .ar-act-rank__label { flex: 0 0 200px; }
.ar-bing__cap { display: flex; justify-content: space-between; gap: 12px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.06em; color: var(--ar-ink-faint); }
/* Phones: 30 columns squeeze below a usable tap size, so the chart keeps its
   bars touch-wide and scrolls sideways instead — rtl scroller so it OPENS at
   the newest days, ltr inner so time still runs left → right (the dashboard
   charts' exact recipe). */
@media (max-width: 600px) {
  .ar-bing__scrollwrap { overflow-x: auto; direction: rtl; scrollbar-width: thin; padding-bottom: 4px; }
  .ar-bing__scrollwrap > * { direction: ltr; min-width: 100%; width: max-content; }
  .ar-bing__trend { gap: 4px; }
  .ar-bing__bar { min-width: 16px; }
}
/* ── In Google's Index (AI Visibility screen) ────────────────────────────────
   The Bing card's Google sibling: a watchlist of verdict rows, not a trend —
   Google's inspection API answers per URL, so the card speaks per page. */
.ar-gidx__offlead { margin: 0; padding: 0; border-bottom: 0; }
.ar-gidx .ar-mcp-rail { margin-top: 14px; }
.ar-gidx__quota { color: var(--ar-warn); }
.ar-gidx__hot { color: var(--ar-warn); }
/* One thin ratio track under the tiles: green = in, amber = out, red = check
   failed. The tiles carry the numbers; this carries the proportion at a glance. */
.ar-gidx__ratio {
  display: flex; height: 6px; margin: 10px 0 0; border-radius: 3px; overflow: hidden;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
}
.ar-gidx__ratio-seg.is-ok { background: var(--ar-good); }
.ar-gidx__ratio-seg.is-warn { background: var(--ar-warn); }
.ar-gidx__ratio-seg.is-err { background: var(--ar-bad); }
/* The scope sentence, seated with the tiles it scopes. */
.ar-gidx__scope { margin: 8px 0 0; font-size: 12px; color: var(--ar-ink-faint); }
.ar-gidx__list { list-style: none; margin: 12px 0 0; padding: 0; }
.ar-gidx__row { padding: 12px 0; border-bottom: 1px solid var(--ar-line); }
.ar-gidx__row:last-child { border-bottom: 0; }
/* Three real columns — title | date | verdict — so every row's date and chip
   sit on the same vertical lines instead of trailing each title. */
/* One row = one line, four fixed lanes: title | date | door | chip. Fixed
   widths, not max-content — each row is its own grid, so only fixed lanes
   align ACROSS rows (max-content sized per-row is exactly the old zigzag). */
.ar-gidx__main { display: grid; grid-template-columns: minmax(0, 1fr) 150px 158px 104px; gap: 2px 16px; align-items: baseline; }
.ar-gidx__meta { display: contents; }
.ar-gidx__door { text-align: right; white-space: nowrap; }
.ar-gidx__page { display: inline-flex; align-items: baseline; gap: 8px; min-width: 0; }
.ar-gidx__title { font-size: 13px; color: var(--ar-ink); text-decoration: none; overflow-wrap: anywhere; }
.ar-gidx__title:hover { text-decoration: underline; }
/* Why this page is on the watchlist — the label that keeps a quiet new post
   from reading like an odd pick. */
.ar-gidx__why {
  font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em;
  text-transform: uppercase; color: var(--ar-ink-faint); white-space: nowrap;
}
.ar-gidx__crawl { font-size: 11px; color: var(--ar-ink-faint); white-space: nowrap; text-align: right; }
/* A fixed minimum makes every chip the same width, so both chip edges align
   down the column. */
.ar-gidx__chip {
  font-size: 11px; font-weight: 600; padding: 2px 8px; border-radius: 10px;
  border: 1px solid var(--ar-line); white-space: nowrap;
  min-width: 104px; text-align: center; justify-self: end;
}
.ar-gidx__chip.is-ok { color: var(--ar-good); border-color: color-mix(in srgb, var(--ar-good) 35%, var(--ar-line)); background: color-mix(in srgb, var(--ar-good) 8%, var(--ar-surface)); }
.ar-gidx__chip.is-warn { color: var(--ar-warn); border-color: color-mix(in srgb, var(--ar-warn) 40%, var(--ar-line)); background: color-mix(in srgb, var(--ar-warn) 9%, var(--ar-surface)); }
.ar-gidx__chip.is-err { color: var(--ar-bad); border-color: color-mix(in srgb, var(--ar-bad) 35%, var(--ar-line)); background: color-mix(in srgb, var(--ar-bad) 7%, var(--ar-surface)); }
.ar-gidx__chip.is-dim { color: var(--ar-ink-faint); }
.ar-gidx__note { margin: 4px 0 0; font-size: 12px; line-height: 1.5; grid-column: 1; min-width: 0; }
.ar-gidx__note.is-warn { color: var(--ar-warn); }
.ar-gidx__note.is-err { color: var(--ar-bad); }
/* The quiet door to Search Console — where "Request indexing" lives. */
.ar-gidx__gsc { margin-left: 10px; font-size: 11px; color: var(--ar-info); text-decoration: none; white-space: nowrap; }
.ar-gidx__gsc:hover { text-decoration: underline; }
/* The whole-site section under the watchlist. */
.ar-gidx__siteeyebrow { margin-top: 24px; }
.ar-gidx__siteline { margin: 8px 0 0; font-size: 13px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-gidx__siteclear { margin: 8px 0 0; font-size: 12px; color: var(--ar-good); }
/* Problem groups: the state is a real heading with its count — the
   Opportunities group grammar — so rows below stop repeating it. */
.ar-gidx__group {
  margin: 18px 0 0; font-size: 13px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.02em; color: var(--ar-ink);
}
.ar-gidx__groupcount {
  margin-left: 6px; font-weight: 600; font-size: 12px;
  color: var(--ar-warn);
}
.ar-gidx__list--grouped { margin-top: 4px; }
.ar-gidx__list--grouped .ar-gidx__row { padding: 9px 0; }
.ar-gidx__more { margin: 6px 0 0; font-size: 12px; color: var(--ar-ink-faint); }
.ar-gidx__hoist { margin-top: 10px; }
.ar-gidx__gsc--cell { margin-left: 0; text-align: right; }
/* Registration health: one quiet line, amber only when the owner should act. */
.ar-gidx__sitemap { margin: 16px 0 0; font-size: 12px; color: var(--ar-ink-faint); }
.ar-gidx__sitemap.is-warn { color: var(--ar-warn); }
/* Section headers: eyebrow + the amber count pill (his crop's grammar). */
.ar-gidx__sec { display: flex; align-items: baseline; gap: 8px; margin-top: 22px; }
.ar-gidx__sec .ar-gidx__secname { margin: 0; }
.ar-gidx__seccount {
  font: 600 10.5px/1 var(--ar-mono); color: var(--ar-warn);
  background: color-mix(in srgb, var(--ar-warn) 10%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-warn) 30%, var(--ar-line));
  border-radius: 9px; padding: 2px 7px;
}
.ar-gidx__group .ar-gidx__groupcount {
  margin-left: 6px; font: 600 10.5px/1 var(--ar-mono); color: var(--ar-warn);
  background: color-mix(in srgb, var(--ar-warn) 10%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-warn) 30%, var(--ar-line));
  border-radius: 9px; padding: 2px 7px;
}
/* Google's exact phrase, once per group — the footnote promises "Google's
   own wording", so the plain-words heading must show its source. */
.ar-gidx__gsub { margin: 2px 0 0; font-size: 11px; color: var(--ar-ink-faint); }
.ar-gidx__fold {
  display: block; width: 100%; background: none; border: 0; border-top: 1px solid var(--ar-line);
  margin-top: -1px; padding: 10px 0 2px; font: inherit; font-size: 12px; color: var(--ar-info);
  cursor: pointer; text-align: center;
}
.ar-gidx__fold:hover { text-decoration: underline; }
.ar-gidx__morebtn {
  background: none; border: 0; padding: 6px 0 0; font: inherit; font-size: 12px;
  color: var(--ar-info); cursor: pointer; text-align: left;
}
.ar-gidx__morebtn:hover { text-decoration: underline; }
/* The page lookup: stored answers only — styled like the house inputs. */
.ar-gidx__lookup { margin: 10px 0 0; }
.ar-gidx__lookup input {
  width: 100%; box-sizing: border-box; background: var(--ar-surface);
  border: 1px solid var(--ar-line-strong); border-radius: 3px;
  padding: 7px 10px; font: inherit; color: var(--ar-ink);
}
.ar-gidx__lookup input:focus { outline: 2px solid var(--ar-accent); outline-offset: 1px; border-color: var(--ar-accent); }
.ar-gidx__lookupmsg { margin-top: 8px; }
.ar-gidx__lookuphint { margin: 6px 0 0; font-size: 11.5px; color: var(--ar-ink-faint); }
@media (max-width: 600px) {
  /* Tiles go 2×2 — four abreast crushed the labels into vertical shards. */
  .ar-gidx .ar-act-stats--4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ar-gidx .ar-wd-stat strong { white-space: nowrap; }
  /* Rows: the title takes its own line; date left, door and chip right share
     the second — the request-log byline rule, in grid form. */
  .ar-gidx__main { grid-template-columns: minmax(0, 1fr) max-content max-content; }
  .ar-gidx__page { grid-column: 1 / -1; }
  .ar-gidx__crawl { text-align: left; }
  .ar-gidx__note { grid-column: 1 / -1; }
}

/* Settings: the two setup steps breathe — the first eyebrow was hugging the
   connection rail. */
#ar-sec-bing .ar-mcp-eyebrow { margin-top: 24px; }
/* Settings: the printed-tag confirmation box. */
.ar-bing__code {
  font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: 6px;
  padding: 8px 11px; margin: 8px 0 0; overflow-x: auto; white-space: nowrap;
}
/* The Settings warnings ledger — every active conflict pin, readable, minus
   the Hide action. Sits under the Disconnect button; the top hairline is PART
   of the block, so it exists only when pins do. */
.ar-cf-hiddenblk { margin: 18px 0 4px; padding-top: 16px; border-top: 1px solid var(--ar-line); }
.ar-cf-hiddenblk .ar-edge-pins { margin-top: 12px; }
.ar-cf-hiddenmark { font-size: 11.5px; color: var(--ar-ink-faint); }
.ar-edge__conduct { list-style: none; margin: 0; padding: 0; }
.ar-edge__conduct li {
  display: flex; align-items: center; gap: 10px; padding: 7px 0;
  border-bottom: 1px solid var(--ar-line); font-size: 13px;
}
.ar-edge__conduct li:last-child { border-bottom: 0; }
.ar-edge__tag {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.1em;
  text-transform: uppercase; padding: 3px 9px; border-radius: 3px;
  min-width: 52px; text-align: center; flex: none;
}
.ar-edge__tag--pass { color: var(--ar-good); border: 1px solid #bcdcc6; background: #eef5f0; }
.ar-edge__tag--warn { color: var(--ar-warn); border: 1px solid #e6d5a8; background: #f7f1df; }
.ar-edge__who { color: var(--ar-ink); }
.ar-edge__what { color: var(--ar-ink-soft); font-size: 12.5px; }

/* The Cloudflare connect row (Data sources group): field + button on one line,
   button shortened to the filter-bar height so the pair reads as one control. */
.ar-cf-row { display: flex; gap: 8px; margin: 14px 0 8px; }
.ar-cf-row .ar-input { flex: 1; }
/* Choosing the downloaded file beats pasting 2 KB of JSON: one control, one
   line, and the file name confirms the right thing was picked. */
.ar-google__pick { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 12px 0 4px; }
.ar-google__choose { position: relative; overflow: hidden; cursor: pointer; }
.ar-google__file { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.ar-google__filename { font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-soft); overflow-wrap: anywhere; }
.ar-google__pastelink { font-size: 12px; }
/* The paste fallback keeps its monospace shape for the rare hand-paste. */
.ar-google__key { font-family: var(--ar-mono); font-size: 11.5px; line-height: 1.5; resize: vertical; min-height: 62px; width: 100%; margin-top: 4px; }
.ar-google__connect { margin-top: 4px; }
/* Reads the pasted key back to the owner: the one address Search Console needs,
   lifted out of the JSON so nobody has to go hunting in it. */
.ar-google__found {
  margin: 10px 0 4px; padding: 12px 14px; border-radius: 8px;
  background: color-mix(in srgb, var(--ar-good) 7%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-good) 28%, transparent);
}
.ar-google__found-lead { margin: 0; font-size: 12.5px; line-height: 1.55; color: var(--ar-ink-soft); }
/* The "this is safe and small" line, before the steps that look intimidating. */
.ar-google__reassure { margin-top: 12px; }
.ar-google__reassure strong { color: var(--ar-ink); }
.ar-google__found-lead strong { color: var(--ar-ink); }
.ar-google__found-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 7px 0; }
.ar-google__email {
  font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink);
  background: var(--ar-paper); border: 1px solid var(--ar-line); border-radius: 5px;
  padding: 4px 9px; overflow-wrap: anywhere;
}

/* ---- Search Performance (AI Visibility → beside Found by AI Search) ------ */
.ar-perf__head { display: flex; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.ar-perf__head > div:first-child { flex: 1 1 320px; min-width: 0; }
/* The source picker — shared by Search Performance and Search Opportunities,
   so "whose numbers am I looking at?" is answered the same way in both rooms. */
.ar-srcpick { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-srcpick__label { font-size: 12px; color: var(--ar-ink-soft); }
/* One-source state: the engine named in the switch's seat — a label, not a
   disabled-looking button. */
.ar-srcpick__solo { font-size: 12.5px; font-weight: 600; color: var(--ar-ink); }
.ar-srcpick__set { display: flex; gap: 0; border: 1px solid var(--ar-line); border-radius: 999px; overflow: hidden; }
.ar-srcpick__btn {
  appearance: none; background: var(--ar-surface); border: 0; cursor: pointer;
  font-size: 12px; color: var(--ar-ink-soft); padding: 5px 14px;
}
.ar-srcpick__btn.is-on { background: var(--ar-ink); color: var(--ar-paper); font-weight: 600; }
.ar-srcpick__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: -2px; }
/* The provenance line: plain words, always visible, never a footnote. */
.ar-srcline { margin: 12px 0 0; font-size: 12.5px; color: var(--ar-ink-soft); }
.ar-srcline strong { color: var(--ar-ink); }
.ar-perf__empty { margin: 14px 0 0; font-size: 13px; color: var(--ar-ink-soft); }
.ar-perf__tiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; margin: 16px 0 0; }
.ar-perf__tile {
  background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: 8px;
  padding: 12px 14px; display: flex; flex-direction: column; gap: 3px; min-width: 0;
}
.ar-perf__label {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-perf__num { font-size: 21px; font-weight: 650; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
/* One plain sentence under each figure — the difference between a number and a
   number someone understands. */
.ar-perf__hint { font-size: 11px; line-height: 1.35; color: var(--ar-ink-faint); }
.ar-perf__meta { margin: 8px 0 0; font-family: var(--ar-mono); font-size: 10.5px; color: var(--ar-ink-faint); }
.ar-perf__cols { display: grid; grid-template-columns: 1fr 1fr; gap: 22px; margin-top: 18px; }
.ar-perf__col { min-width: 0; }
.ar-perf__eyebrow {
  margin: 0 0 6px; font-family: var(--ar-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink);
}
.ar-perf__table { border-collapse: collapse; width: 100%; table-layout: fixed; }
.ar-perf__table th {
  text-align: right; font-family: var(--ar-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint);
  padding: 0 0 4px 12px; border-bottom: 1px solid var(--ar-line); width: 4.6em;
}
.ar-perf__table th:first-child { text-align: left; padding-left: 0; width: auto; }
.ar-perf__table td {
  padding: 6px 0 6px 12px; border-bottom: 1px solid var(--ar-line);
  text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap;
}
.ar-perf__table tr:last-child td { border-bottom: 0; }
.ar-perf__table td.ar-perf__q {
  text-align: left; padding-left: 0; white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis; color: var(--ar-ink);
}
.ar-perf__page { color: var(--ar-ink); text-decoration: none; }
.ar-perf__page:hover { text-decoration: underline; }
.ar-perf__n--dim { color: var(--ar-ink-faint); }
.ar-perf__table td.ar-perf__none { text-align: left; padding-left: 0; color: var(--ar-ink-faint); font-size: 12px; white-space: normal; }
.ar-perf__probe {
	display: inline-block;
	margin-left: 6px;
	padding: 0 5px;
	border: 1px solid var(--ar-line, #ddd);
	border-radius: 9px;
	color: var(--ar-ink-faint, #777);
	font-size: 10.5px;
	line-height: 15px;
	letter-spacing: .03em;
	text-transform: uppercase;
	vertical-align: 1px;
}
.ar-perf__foot { margin: 8px 0 0; color: var(--ar-ink-faint, #777); font-size: 12px; }
/* The two-reports notice borrows the edge-pin grammar; only the seat is ours. */
.ar-perf__pin { margin-top: 12px; }
.ar-perf__pin .ar-edge-pin__body { margin-bottom: 0; }
.ar-perf__probeline { margin-bottom: 4px; }
@container (max-width: 720px) {
  .ar-perf__tiles { grid-template-columns: 1fr 1fr; }
  .ar-perf__cols { grid-template-columns: 1fr; gap: 18px; }
}

/* ---- Search Opportunities (Readiness → sibling of Optimize) -------------- */
.ar-opp__state { margin: 4px 0 2px; }
/* The provenance line and the scope note sit tight together (both describe where
   these numbers came from); the finding below is a different kind of statement, so
   it gets real air rather than stacking into one undifferentiated block. */
.ar-opp__noise { margin: 13px 0 0; }
/* The disclosure is the audit trail for a filter that removed real numbers, so it
   wears the weight of a record: a full-width bordered card that opens in place —
   the same language as the Settings folds — not a pill floating between
   paragraphs with its contents spilling straight onto the page. */
.ar-opp__noiselist {
	margin: 14px 0 16px;
	padding: 0 16px;
	font-size: 12.5px;
	border: 1px solid var(--ar-line-strong);
	border-radius: var(--ar-radius);
	background: var(--ar-surface-2);
}
.ar-opp__noiselist[open] { background: var(--ar-surface); padding-bottom: 13px; }
.ar-opp__noiselist > summary {
	display: flex;
	align-items: center;
	gap: 9px;
	padding: 11px 0;
	color: var(--ar-ink);
	font-size: 13px;
	font-weight: 600;
	cursor: pointer;
	/* Both are needed to drop the native marker: `display` handles WebKit, the
	   list-style pair handles Firefox. We draw our own caret so it can rotate. */
	list-style: none;
	transition: color .15s ease;
}
.ar-opp__noiselist > summary::-webkit-details-marker { display: none; }
.ar-opp__noiselist > summary::before {
	content: "";
	width: 0;
	height: 0;
	border-left: 5px solid currentColor;
	border-top: 4px solid transparent;
	border-bottom: 4px solid transparent;
	transition: transform .15s ease;
}
.ar-opp__noiselist[open] > summary::before { transform: rotate(90deg); }
.ar-opp__noiselist > summary:hover { color: var(--ar-accent); }
.ar-opp__noiselist > summary:focus-visible {
	outline: 2px solid var(--ar-accent);
	outline-offset: 2px;
}
.ar-opp__noiselist[open] > summary {
	border-bottom: 1px solid var(--ar-line);
	margin-bottom: 12px;
}
@media (prefers-reduced-motion: reduce) {
	.ar-opp__noiselist > summary,
	.ar-opp__noiselist > summary::before { transition: none; }
}

.ar-opp__noiselist .ar-opp__qwrap { margin-top: 0; }
.ar-opp__noiselist .ar-opp__queries { margin-top: 0; }
/* The dropped searches ARE operator syntax — set them in mono so the list itself
   shows why each row is here. */
.ar-opp__noiselist td.ar-opp__q { font-family: var(--ar-mono); font-size: 11px; }
.ar-opp__noisefoot {
	margin: 0;
	padding-top: 10px;
	border-top: 1px solid var(--ar-line);
	color: var(--ar-ink-soft);
	font-size: 12px;
	line-height: 1.55;
}
.ar-opp__noise code,
.ar-opp__noisefoot code {
	font-size: 0.92em;
	padding: 1px 4px;
	border-radius: 3px;
	background: var(--ar-surface-2, rgba(0, 0, 0, .05));
	white-space: nowrap;
}
/* The provenance line sits on the group's own grid row, with the switch pushed
   to the far edge so "whose numbers?" and "show the other one" read as one idea. */
.ar-opp__srcline { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ar-opp__srcline .ar-srcpick { margin-left: auto; }
/* Sits directly under the provenance line it qualifies — tighter than the 12px
   .ar-srcline default, so the two read as one statement about these numbers. */
.ar-opp__scope { margin-top: 4px; }
.ar-opp__eyebrow {
  margin: 16px 0 2px; font-family: var(--ar-mono); font-size: 10.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink);
}
.ar-opp__why { margin-left: 8px; letter-spacing: 0.04em; text-transform: none; color: var(--ar-ink-faint); }
/* The two worklist groups are the structure of this section, so their headers
   speak a tier above the table eyebrows: a real heading plus the SAME rank pill
   the rows below carry — the header explains its group's chips before the
   reader meets them. The set-aside ledger stays on the quiet eyebrow tier on
   purpose. */
.ar-opp__grouphead { display: flex; align-items: center; gap: 9px; margin: 18px 0 0; }
.ar-opp__grouptitle {
  margin: 0; font-size: 13px; font-weight: 700; letter-spacing: 0.05em;
  text-transform: uppercase; color: var(--ar-ink);
}
.ar-opp__groupwhy { margin: 3px 0 0; font-size: 12.5px; color: var(--ar-ink-soft); }
.ar-opp__list { margin-top: 6px; }
/* The instruction under each group heading: the difference between "here is a
   problem" and "here is what to do about it". It wears a quiet card — the
   NEUTRAL surface, not the amber of the warn pills, because this is guidance,
   not a warning. */
.ar-opp__todo {
  margin: 8px 0 0; padding: 10px 14px;
  font-size: 12.5px; line-height: 1.55; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius);
  text-align: justify; hyphens: auto; -webkit-hyphens: auto;
}
.ar-opp__todo strong { color: var(--ar-ink); }
.ar-opp__body { min-width: 0; grid-column: 2 / -1; }
.ar-opp__top { display: flex; align-items: baseline; gap: 9px; flex-wrap: wrap; }
.ar-opp__title { font-weight: 650; font-size: 13px; color: var(--ar-ink); text-decoration: none; }
a.ar-opp__title:hover { text-decoration: underline; }
.ar-opp__path {
  font-family: var(--ar-mono); font-size: 10.5px; color: var(--ar-ink-soft);
  background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: 4px; padding: 1px 6px;
  max-width: 34ch; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* "This page is on the other worklist too" — amber, because it is a nudge to
   combine two visits, not a fault of its own. */
.ar-opp__alsoflag {
  font-size: 10.5px; color: var(--ar-warn); white-space: nowrap;
  background: color-mix(in srgb, var(--ar-warn) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--ar-warn) 30%, transparent);
  border-radius: 999px; padding: 1px 9px;
}
.ar-opp__qwrap { overflow-x: auto; margin-top: 8px; }
.ar-opp__queries { border-collapse: collapse; width: 100%; min-width: 520px; }
.ar-opp__queries th {
  text-align: right; font-family: var(--ar-mono); font-weight: 400; font-size: 9.5px;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint);
  padding: 0 0 4px 16px; border-bottom: 1px solid var(--ar-line);
}
.ar-opp__queries th:first-child { text-align: left; padding-left: 0; }
.ar-opp__queries td {
  padding: 6px 0 6px 16px; border-bottom: 1px solid var(--ar-line);
  text-align: right; font-variant-numeric: tabular-nums; font-size: 12px; white-space: nowrap;
}
.ar-opp__queries tr:last-child td { border-bottom: 0; }
/* Element-qualified to outrank `.ar-opp__queries td` above (class+element beats
   a lone class) — without it the query text right-aligns with the numbers. */
/* The search column absorbs ALL the slack, so the numeric columns stay grouped at
   the right instead of being spread evenly across a wide card — on a 1900px screen
   an even split puts each figure ~400px from the label it belongs to, and the row
   stops reading as one record. */
.ar-opp__queries td.ar-opp__q,
.ar-opp__queries th:first-child { width: 100%; }
.ar-opp__queries td.ar-opp__q { text-align: left; padding-left: 0; white-space: normal; color: var(--ar-ink); }
.ar-opp__queries th:not(:first-child),
.ar-opp__queries td:not(.ar-opp__q) { white-space: nowrap; }
.ar-opp__num.is-dim { color: var(--ar-ink-faint); }
.ar-opp__num.is-low { color: var(--ar-warn); font-weight: 650; }
.ar-opp__pos {
  display: inline-block; min-width: 40px; text-align: center; border-radius: 999px;
  font-family: var(--ar-mono); font-size: 10.5px; padding: 1px 7px;
}
.ar-opp__pos.is-two { color: var(--ar-warn); background: color-mix(in srgb, var(--ar-warn) 14%, transparent); }
.ar-opp__pos.is-one { color: var(--ar-good); background: color-mix(in srgb, var(--ar-good) 14%, transparent); }
.ar-opp__more { margin: 6px 0 0; font-size: 11.5px; color: var(--ar-ink-faint); }
.ar-opp__actions { display: flex; align-items: center; gap: 10px; margin-top: 9px; flex-wrap: wrap; }
/* A quiet link-shaped action, not the page's heaviest button: this is a row in
   a worklist, and a black slab per card would shout over the numbers. */
.ar-opp__edit {
  font-size: 12px; color: var(--ar-accent); text-decoration: none;
  border: 1px solid color-mix(in srgb, var(--ar-accent) 40%, transparent);
  border-radius: 6px; padding: 4px 11px; background: var(--ar-surface);
}
.ar-opp__edit:hover { border-color: var(--ar-accent); text-decoration: none; }
/* The action most likely to move the number carries a little more weight —
   never a filled slab, which would shout over the figures it belongs to. */
.ar-opp__edit.is-primary { border-color: var(--ar-accent); font-weight: 600; }
.ar-opp__actions .ar-optcheck__restore { margin-left: auto; }
.ar-cf-row .ar-btn { padding: 9px 22px; }
.ar-cf-note { margin-top: 18px; }
.ar-mcp-recipe { border-left: 2px solid var(--ar-accent); padding: 2px 0 2px 14px; }
.ar-mcp-recipe__steps { margin: 0 0 10px; padding-left: 18px; font-size: 13px; color: var(--ar-ink-soft); }
.ar-mcp-recipe__steps li { margin-bottom: 4px; }
.ar-mcp-adv__aside { color: var(--ar-ink-faint); font-size: 12px; font-weight: 400; }
.ar-mcp-apppw { margin-top: 22px; }

/* Connected agents — one row per approved OAuth grant. */
.ar-grants { list-style: none; margin: 12px 0 0; padding: 0; border-top: 1px solid var(--ar-line); }
.ar-grant {
  display: flex; align-items: center; gap: 12px; min-width: 0;
  padding: 12px 2px; border-bottom: 1px solid var(--ar-line);
}
.ar-grant__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-good); flex: none; }
.ar-grant__dot.is-idle { background: var(--ar-line-strong); }
.ar-grant__who { min-width: 0; }
.ar-grant__who strong { font-size: 13.5px; }
.ar-grant__who small { display: block; font-size: 12px; color: var(--ar-ink-faint); }
.ar-grant__host { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); margin-left: 8px; }
/* How this key got in — the same three nouns the card's intro sentence uses:
   approval, token, application password (that one in its own section). */
.ar-grant__how {
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--ar-ink-faint); margin-left: 8px; border: 1px dotted var(--ar-line-strong);
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
/* Pills and buttons are fixed-width columns — the widest label ("Read · Write",
   "Disconnect") sets the size for every row, so both edges line up down the list. */
.ar-grant__scope {
  margin-left: auto; flex: none; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.06em;
  text-transform: uppercase; border: 1px solid var(--ar-line-strong); border-radius: 999px;
  padding: 2px 9px; color: var(--ar-ink-faint); white-space: nowrap;
  min-width: 104px; text-align: center;
}
.ar-grant__scope.is-write { border-color: var(--ar-good); color: var(--ar-good); }
/* The shared token wears a different colour from an approved connection: one
   secret many assistants can hold is a different kind of thing. */
.ar-grant__scope.is-token { border-color: var(--ar-warn); color: var(--ar-warn); }
.ar-grant .ar-btn--small { min-width: 140px; }
.ar-grants__note { margin-top: 12px; }
@media screen and (max-width: 782px) {
  .ar-grant { flex-wrap: wrap; }
  .ar-grant__scope { margin-left: 20px; }
}

.ar-mcp-token__state { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 12px 0 2px; font-size: 12.5px; }
.ar-mcp-token__state span:not(.ar-mcp-token__dot) { color: var(--ar-ink-soft); }
.ar-mcp-token__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-good); flex: none; }
.ar-mcp-token__used { margin: 0; font-size: 12px; color: var(--ar-ink-faint); }
.ar-mcp-token__used a { color: var(--ar-accent); text-decoration: none; white-space: nowrap; }
.ar-mcp-token__used a:hover { text-decoration: underline; }

.ar-mcp-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-top: 16px; }
@media screen and (max-width: 782px) { .ar-mcp-cards { grid-template-columns: 1fr; } }
.ar-mcp-cards.is-waiting .ar-mcp-card { opacity: 0.72; }
.ar-mcp-card {
  border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: var(--ar-surface-2);
  padding: 12px 14px; display: flex; flex-direction: column; gap: 8px; min-width: 0;
}
.ar-mcp-card.is-soon { border-style: dashed; opacity: 0.66; }
.ar-mcp-card__title { margin: 0; font-size: 13px; display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ar-mcp-card__kind {
  font-size: 10px; font-weight: 600; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); padding: 1px 6px; border-radius: 999px;
}
.ar-mcp-card__soon { margin: 0; font-size: 12px; color: var(--ar-warn); font-weight: 600; }
.ar-mcp-card__steps { margin: 0; padding-left: 18px; font-size: 12px; color: var(--ar-ink-soft); display: flex; flex-direction: column; gap: 3px; }
.ar-mcp-card__copyrow { display: flex; gap: 8px; align-items: center; min-width: 0; margin-top: auto; }
.ar-mcp-card__code {
  font-family: var(--ar-mono); font-size: 11px; background: var(--ar-surface);
  border: 1px solid var(--ar-line); padding: 5px 8px; border-radius: var(--ar-radius);
  flex: 1; min-width: 0; overflow-x: auto; white-space: nowrap;
}
.ar-mcp-card__deeplink { text-decoration: none; }

/* Numbered steps — small circled figures, distinct from the card counters. */
.ar-mcp-step { margin-top: 18px; }
.ar-mcp-step__head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; margin: 0 0 9px; font-size: 12.5px; font-weight: 600; color: var(--ar-ink); }
.ar-mcp-step__n {
  width: 20px; height: 20px; flex: none; display: inline-flex; align-items: center; justify-content: center;
  border-radius: 50%; border: 1px solid var(--ar-line-strong);
  font-family: var(--ar-mono); font-size: 11px; font-weight: 400; color: var(--ar-ink-soft);
}
.ar-mcp-step .ar-rev-tabs { margin-top: 0; }
.ar-mcp-step .ar-mcp-key { margin-top: 0; }

/* One primary action; the raw config a click away. */
.ar-mcp-copyrow { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.ar-mcp-copybtn { padding-left: 22px; padding-right: 22px; }

/* The live test: verdicts as a quiet list, colored marks only. */
.ar-mcp-test { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.ar-mcp-test__list { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ar-mcp-test__list li { font-size: 12.5px; color: var(--ar-ink-soft); display: flex; gap: 8px; align-items: baseline; }
.ar-mcp-test__list li[data-state="fail"] { color: var(--ar-ink); }
.ar-mcp-test__mark { font-weight: 700; flex: none; }
.ar-mcp-test__list li[data-state="ok"] .ar-mcp-test__mark { color: var(--ar-good); }
.ar-mcp-test__list li[data-state="fail"] .ar-mcp-test__mark { color: var(--ar-bad); }

/* The raw facts, boxed — these folds hold real settings (setup recipes, the
   shared token, application passwords), so they wear the weight of settings:
   a bordered card each, not a footnote line. */
.ar-mcp-adv {
  margin-top: 12px; padding: 0 16px;
  border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius);
  background: var(--ar-surface-2);
}
.ar-mcp-adv[open] { background: var(--ar-surface); padding-bottom: 16px; }
.ar-mcp-adv summary { cursor: pointer; padding: 13px 0; font-size: 13px; font-weight: 600; color: var(--ar-ink); }
.ar-mcp-adv summary:hover { color: var(--ar-accent); }
.ar-mcp-adv[open] > summary { border-bottom: 1px solid var(--ar-line); margin-bottom: 14px; }

.ar-mcp-tabs { margin: 8px 0 0; }
.ar-mcp-key { margin-top: 10px; }
/* Two labelled paths, side by side: the normal one (mint a key) and the rare
   one (a password saved at creation). Separate columns, so the name field
   visibly belongs to "create" and not to a pasted password. */
.ar-mcp-key__paths { display: flex; gap: 14px 34px; flex-wrap: wrap; align-items: flex-start; }
.ar-mcp-key__path { flex: 1 1 320px; min-width: 280px; }
.ar-mcp-key__pathlabel {
  display: flex; align-items: center; gap: 10px;
  margin: 0 0 8px; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-mcp-key__row { display: flex; align-items: stretch; gap: 8px; flex-wrap: wrap; }
/* .ar-input's width:100% (declared later) would blow each input onto its own
   line inside the flex row, so the row pins its own widths. */
.ar-mcp-key__row .ar-mcp-key__name { width: auto; flex: 1 1 170px; min-width: 140px; }
/* The row stretches everything to the tallest item (the inputs), so the button
   only needs its horizontal padding — height comes from the row. */
.ar-mcp-key__create { padding-top: 0; padding-bottom: 0; padding-left: 18px; padding-right: 18px; }
.ar-mcp-key__pastewrap { position: relative; display: inline-flex; flex: 1 1 220px; min-width: 200px; }
.ar-mcp-key__pastewrap .ar-mcp-key__paste { width: 100%; padding-right: 40px; font-family: var(--ar-mono); font-size: 12px; }
/* Icon-only copy, nested in the field's right edge; swaps to a check when done. */
.ar-mcp-key__copy {
  position: absolute; top: 50%; right: 5px; transform: translateY(-50%);
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0; border: 0; border-radius: 7px;
  background: transparent; color: var(--ar-ink-faint); cursor: pointer;
}
.ar-mcp-key__copy:hover { color: var(--ar-ink); background: var(--ar-surface-2); }
.ar-mcp-key__copy:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-mcp-key__copy.is-copied { color: var(--ar-good); }
.ar-mcp-key__err { color: var(--ar-bad); }
/* The duplicate-name case: a compact amber flag beside the path label; the full
   story (why, and what to do) lives one "?" away in a small dialog. */
.ar-mcp-key__taken {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: var(--ar-sans); font-size: 12px; font-weight: 600;
  letter-spacing: 0; text-transform: none; color: var(--ar-warn);
}
.ar-mcp-key__whybtn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 16px; height: 16px; padding: 0; border-radius: 50%;
  border: 1px solid rgba(173, 123, 24, 0.55);
  background: transparent; color: var(--ar-warn);
  font-size: 10.5px; font-weight: 700; line-height: 1; cursor: pointer;
}
.ar-mcp-key__whybtn:hover { background: rgba(173, 123, 24, 0.14); }
.ar-mcp-key__whybtn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
/* Informational variant — teal, for standing facts rather than warnings. */
.ar-mcp-key__whybtn--info {
  border-color: color-mix(in srgb, var(--ar-accent) 55%, transparent);
  color: var(--ar-accent);
}
.ar-mcp-key__whybtn--info:hover { background: color-mix(in srgb, var(--ar-accent) 12%, transparent); }

/* The key-scope fact, riding the step-2 head: always visible, one glance,
   full story behind the "?". Sans and lighter than the head it sits in. */
.ar-mcp-scope {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 400; color: var(--ar-ink-soft);
}
.ar-mcp-scope strong { font-weight: 600; color: var(--ar-ink); }
/* position:relative pins the copy button inside the dark block's top-right, so it
   stays put while the <pre> scrolls horizontally under it. */
.ar-mcp-snippet { position: relative; margin-top: 10px; }
.ar-mcp-snippet__code { margin: 0; }
.ar-mcp-snippet__copy { position: absolute; top: 8px; right: 8px; }

/* 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);
  /* The switch and its NAME toggle the setting; the rest of the row does not. The row is a
     <label>, so natively every pixel of it flips the checkbox — including the hint, which
     runs to two lines and which you may well be trying to select or to click a link inside.
     So the row opts out of pointer events and the two parts that should respond opt back in.
     Keyboard focus/activation and the label→input association (the screen-reader name) are
     unaffected: pointer-events is mouse/touch only. */
  cursor: default; pointer-events: none;
}
.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;
  pointer-events: auto; cursor: pointer; /* the one part of the row that flips it. */
}
.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; }
/* Links inside a hint stay clickable; the busy-lock still disables the switch mid-save. */
.ar-toggle a { pointer-events: auto; }
.ar-toggle[data-busy] .ar-toggle__track,
.ar-toggle[data-busy] .ar-toggle__text strong { pointer-events: none; }
.ar-toggle__text { display: flex; flex-direction: column; gap: 1px; }
/* The setting's name is a second hit target for the switch beside it — a small control
   deserves a big label. The hint below stays inert, so selecting it or following a link in
   it can't flip the setting by accident. */
.ar-toggle__text strong {
  font-size: 14px; font-weight: 600;
  pointer-events: auto; cursor: pointer;
  align-self: flex-start; /* don't stretch the hit area across the row's full width. */
}
.ar-toggle__text small { color: var(--ar-ink-soft); font-size: 12px; }
/* A child switch that only exists because the switch above it is on. The indent comes
   from the wrapper (.ar-webmcp-tools / .ar-enforce-body), so depth compounds for a
   grandchild; this modifier shrinks the switch itself so the subordination reads at
   a glance. */
.ar-toggle--nested .ar-toggle__track { width: 34px; height: 19px; }
.ar-toggle--nested .ar-toggle__track::after { width: 15px; height: 15px; }
.ar-toggle--nested input:checked + .ar-toggle__track::after { transform: translateX(15px); }
.ar-toggle--nested .ar-toggle__text strong { font-size: 13px; }

/* "Check an IP" tool (AI Access) — a quiet inset utility below the verification toggles. */
.ar-ipcheck { margin: 4px 0 2px; padding: 14px 15px; border-radius: 9px; background: var(--ar-surface-2); border: 1px solid var(--ar-line); }
.ar-ipcheck__head { font-size: 13px; font-weight: 600; color: var(--ar-ink); }
.ar-ipcheck__intro { margin: 3px 0 10px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar-ipcheck__row { display: flex; gap: 8px; max-width: 460px; }
.ar-ipcheck__input {
  flex: 1 1 auto; min-width: 0; font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink);
  padding: 7px 10px; border-radius: 7px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface);
}
.ar-ipcheck__input:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 0; border-color: var(--ar-accent); }
.ar-ipcheck__btn {
  appearance: none; cursor: pointer; white-space: nowrap; font-family: var(--ar-sans); font-size: 12.5px; font-weight: 600;
  color: #fff; background: var(--ar-accent); padding: 7px 15px; border-radius: 7px; border: 1px solid var(--ar-accent);
  transition: opacity 0.12s ease;
}
.ar-ipcheck__btn:hover:not(:disabled) { opacity: 0.9; }
.ar-ipcheck__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-ipcheck__btn:disabled { opacity: 0.5; cursor: default; }
.ar-ipcheck__result { display: flex; flex-direction: column; gap: 2px; margin: 11px 0 0; font-size: 12.5px; line-height: 1.5; max-width: 560px; }
.ar-ipcheck__result strong { font-weight: 700; }
.ar-ipcheck__result span { color: var(--ar-ink-soft); }
.ar-ipcheck__result.is-ok strong { color: var(--ar-good); }
.ar-ipcheck__result.is-danger strong { color: var(--ar-bad); }
.ar-ipcheck__result.is-muted strong { color: var(--ar-ink); }

/* Exposure tab: WordPress debug posture — a subtle green line when fine, a prominent
   amber/red card when debug logging/display is left on in production. */
.ar-dbgcard { margin: 2px 0 16px; }
.ar-dbgcard.is-pass { font-size: 12.5px; color: var(--ar-good); }
.ar-dbgcard.is-warn,
.ar-dbgcard.is-fail { padding: 12px 14px; border-radius: 8px; font-size: 13px; line-height: 1.55; color: var(--ar-ink); }
.ar-dbgcard.is-warn { background: rgba(173, 123, 24, 0.08); border: 1px solid rgba(173, 123, 24, 0.35); }
.ar-dbgcard.is-fail { background: rgba(180, 40, 40, 0.07); border: 1px solid rgba(180, 40, 40, 0.35); }
.ar-dbgcard__title { display: block; margin-bottom: 5px; }
.ar-dbgcard.is-warn .ar-dbgcard__title { color: var(--ar-warn); }
.ar-dbgcard.is-fail .ar-dbgcard__title { color: var(--ar-bad); }
.ar-dbgcard__fix { margin: 0; font-size: 12.5px; color: var(--ar-ink-soft); }
.ar-dbgcard__fix a { white-space: nowrap; font-weight: 600; }
.ar-dbgcard.is-warn .ar-dbgcard__fix a { color: var(--ar-warn); }
.ar-dbgcard.is-fail .ar-dbgcard__fix a { color: var(--ar-bad); }
/* In-hint links to the standard each file/format implements (llms.txt, robots.txt,
   JSON-LD …). Kept subtle — accent + underline — so the hint still reads as a hint;
   no external-arrow glyph, which reads awkwardly on a term mid-sentence. */
.ar-spec-link {
  color: var(--ar-accent);
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.ar-spec-link:hover { text-decoration-thickness: 2px; }
.ar-spec-link:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 2px; }

/* 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; margin-left: 22px; }

/* 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,
.ar-field .ar-field__head > 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);
}
/* Post-count row: the live size estimate sits beside the input as one aligned line —
   not a stray paragraph beneath — and wraps under the input on narrow screens. */
/* Compound selector on purpose: this row leads its wrapper, and the `.ar-field:first-child`
   margin reset above (0,1,1) would zero a single-class top margin — two classes out-rank it. */
.ar-field--inline.ar-field--estimate { flex-wrap: wrap; margin: 14px 0 16px; }
.ar-field--estimate .ar-field__hint { margin: 0; flex: 1 1 240px; min-width: 0; }

.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 color-mix(in srgb, var(--ar-accent) 13%, transparent);
}
/* Compact numeric inputs (counts and caps): a two-digit number doesn't need a full-height
   box. Scoped under the app id because wp-admin forms.css targets input[type=number] at
   (0,1,1) — a bare class loses that fight and the box stays at admin height. */
#agentimus-app .ar-input--sm {
  width: 96px; min-height: 0; padding: 3px 10px;
  font-size: 13px; line-height: 1.6; font-family: var(--ar-mono);
}
/* A field row that is a PEER of the toggle above it (not its sub-setting): the same
   hairline the toggle rows use marks it as its own entry. */
.ar-field--divided { border-top: 1px solid var(--ar-line); margin-top: 16px; padding-top: 16px; }
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;
  max-width: none; /* override wp-admin's `.wp-core-ui select { max-width: 25rem }`, which otherwise caps our full-width field */
  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: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); }

/* Read-only enumeration of the built-in always-allowed search engines: present
   in the trust set but not editable, so they render as static muted chips —
   distinct from the dark editable chips and the dashed suggestion chips. A top
   divider sets the whole (label + chips + note) apart as one "automatic" group. */
.ar-builtin {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--ar-line);
}
.ar-builtin__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-builtin__chip {
  font-family: var(--ar-mono); font-size: 12px;
  padding: 3px 9px; border-radius: 3px;
  background: var(--ar-surface); color: var(--ar-ink-soft);
  border: 1px solid var(--ar-line);
}
.ar-builtin__note {
  flex-basis: 100%; margin-top: 8px;
  color: var(--ar-ink-soft); font-size: 12px; line-height: 1.5;
}

.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); }
/* Disabled must LOOK disabled — a full-color underlined link that silently
   ignores clicks reads as broken, not busy. */
.ar-linkbtn:disabled, .ar-linkbtn:disabled:hover { color: var(--ar-ink-faint); text-decoration: none; cursor: default; opacity: 0.7; }

/* 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: "\2713"; position: absolute; top: 8px; right: 11px; /* \2713 (not a literal ✓): encoding-proof if the CSS is ever served as latin-1. */
  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
   only. Using :has(:focus-visible) (not :focus-within) is deliberate: after a
   mouse click the checkbox keeps DOM focus, and :focus-within would leave the
   accent ring on a card the click just DESELECTED — making it look still-on. */
.ar-type:has(:focus-visible) { 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 ---------------------------------------------------------- */
/* The field itself is a plain .ar-input and the chips flow BELOW it, so a chip list can
   never change the input's height — it stays row-aligned with the plain inputs next to it
   in a grid, however many chips there are.
   `display: contents` drops the component's own wrapper out of the layout so the input and
   the chip list become items of the surrounding .ar-field flex column. That is what lets
   `order: 1` push the chips PAST the hint text — the hint is a sibling of this component,
   not a child, so it can't be reordered from inside. Net effect: label → field → hint sit
   at exactly the same heights as a plain text field, and the chips hang below all of it.
   Where the parent isn't a flex column, `order` is inert and the chips simply follow the
   input — still correct, just not past the hint. */
.ar-tags { display: contents; }
.ar-tags__list {
  display: flex; flex-wrap: wrap; gap: 6px; align-items: center;
  margin: 8px 0 0; padding: 0; list-style: none;
}
/* Opt-in (`after-hint`): drop the chips below the hint line too. The hint is a SIBLING of
   this component, so it can only be jumped by flex `order` — which is exactly why this is
   opt-in and not the default: a field that appends anything else after its hint would have
   its chips pushed past that as well. */
.ar-tags__list--after-hint { order: 1; margin-top: 2px; }
.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;
}
/* The chip label doubles as an "edit" button — click to pop it back into the input. */
.ar-tags__edit {
  appearance: none; border: 0; background: none; cursor: pointer; padding: 0;
  color: inherit; font-family: inherit; font-size: inherit; line-height: 1.3;
}
.ar-tags__edit:hover { text-decoration: underline; text-underline-offset: 2px; }
.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); }

/* ---- 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); }
/* Same new-tab cue as the rail's endpoint links — one list, one language. */
.ar-links a::after { content: "\2197\FE0E"; margin-left: 5px; font-size: 10px; color: var(--ar-ink-faint); }
.ar-links a:hover::after { 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); white-space: nowrap;
  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); }
/* A label that swaps to a longer busy form ("Refresh" → "Refreshing…") reserves
   the longer form's width up front via an invisible twin (data-reserve), so the
   swap can never shift the layout around it. The twin inherits the button's own
   type, so the reserved width is always exactly right. */
.ar-btn--reserve { display: inline-grid; justify-items: center; align-items: center; }
.ar-btn--reserve > span { grid-area: 1 / 1; }
.ar-btn--reserve::after { content: attr(data-reserve); grid-area: 1 / 1; visibility: hidden; }
.ar-btn:disabled { opacity: 0.5; cursor: default; }
/* .ar-btn worn by an ANCHOR (the drawer's "Open in editor"): wp-admin styles bare
   links globally, and its a:hover / a:visited / a:focus pseudo-classes outrank a
   lone class — the label went admin-blue on hover and visited-dark (invisible on
   the ink background) after the click. Pin every state, kill the underline. */
a.ar-btn, a.ar-btn:link, a.ar-btn:visited, a.ar-btn:hover, a.ar-btn:focus, a.ar-btn:active {
  color: var(--ar-paper); text-decoration: none; display: inline-flex; align-items: center;
}
a.ar-btn--ghost, a.ar-btn--ghost:link, a.ar-btn--ghost:visited, a.ar-btn--ghost:hover, a.ar-btn--ghost:focus, a.ar-btn--ghost:active {
  color: var(--ar-ink);
}
a.ar-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; box-shadow: none; }
.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) ------------------------------ */
/* While ANY dialog is open, the page behind it must not scroll — a stray wheel
   flick would silently lose the user's place. Every dialog here renders a
   .ar-modal node only while open (all v-if, none v-show), so :has() doubles as
   the global open-state signal: no per-dialog wiring, and future dialogs are
   covered by construction. Panels keep their own inner scrolling
   (.ar-modal__scroll) — only the document locks. The lock sits on html, not
   body: wp-admin styles html's own overflow, which stops a body-level
   overflow from ever propagating to the viewport (the page kept scrolling). */
html:has(.ar-modal) { overflow: hidden; }
/* Reserve the scrollbar gutter permanently on this screen, so hiding the
   document scrollbar during the lock can't shift the layout sideways. Overlay
   scrollbars (macOS default) are unaffected either way. */
html { scrollbar-gutter: stable; }

.ar-modal {
  position: fixed; inset: 0; z-index: 100001;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  /* Worst-case escape hatch: should a panel ever end up taller than the screen
     anyway, the overlay itself scrolls (with margin:auto on the panel keeping both
     edges reachable) instead of clipping the Close button away. Inert otherwise. */
  overflow-y: auto;
  background: rgba(27, 25, 19, 0.42);
  -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px);
}
.ar-modal__panel {
  display: flex; flex-direction: column;
  margin: auto;
  /* Every height cap here is a vh/svh PAIR: on iOS, 100vh is the LARGE viewport (it
     extends under the browser's collapsed URL/tool bars), so a vh-sized panel clips
     top and bottom — with Close in the hidden part. 100svh is the small viewport
     (bars shown), which always fits; older browsers ignore it and keep the vh line.
     NOTE the small-screen media override further down — it MUST keep the same pair,
     it deliberately wins the cascade on phones (where this bug actually bit). */
  width: 100%; max-width: 560px; overflow: hidden;
  max-height: min(calc(100vh - 40px), 600px);
  max-height: min(calc(100svh - 40px), 600px);
  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; }
  /* Same vh/svh pair as the base rule — a bare 100vh here is what originally trapped
     phone users: on iOS it overshoots the visible screen and hides the Close button. */
  .ar-modal__panel { max-height: calc(100vh - 20px); max-height: calc(100svh - 20px); }
}

/* ---- Confirm dialog (reusable styled replacement for window.confirm) ---- */
/* Reuses the .ar-modal shell. There's no scrolling body between head and actions,
   so drop the adjacent borders that would otherwise stack into a double rule. */
.ar-modal__panel--confirm { max-width: 440px; }
.ar-modal__panel--confirm .ar-modal__head { border-bottom: 0; padding-bottom: 4px; }
.ar-modal__panel--confirm .ar-modal__actions { border-top: 0; padding-top: 8px; }

/* ---- Onboarding wizard (reuses the modal shell) ------------------------ */
.ar-modal__panel.ar-wiz {
  max-width: 720px;
  /* Roomier than the base modal; SAME vh/svh pair discipline (iOS large-viewport
     trap) — and note this compound selector outranks the small-screen media
     override below, so the offsets here must stay viewport-safe on their own. */
  max-height: min(calc(100vh - 40px), 740px);
  max-height: min(calc(100svh - 40px), 740px);
}
/* The stepper rail: five stations, a connector line at dot height, ✓ when
   passed. House colors carry the meaning — accent = where you are, good-green
   = done, quiet lines for what's ahead. */
.ar-stepper { list-style: none; display: flex; margin: 0; padding: 0; counter-reset: none; }
.ar-stepper li {
  position: relative; flex: 1 1 0; min-width: 0;
  display: flex; flex-direction: column; align-items: center; gap: 2px; text-align: center;
}
/* Connector: from this centered dot's right edge to the next one's left edge. */
.ar-stepper li:not(:last-child)::after {
  content: ""; position: absolute; top: 13px; height: 2px;
  left: calc(50% + 20px); right: calc(-50% + 20px);
  background: var(--ar-line-strong);
}
.ar-stepper__dot {
  width: 28px; height: 28px; border-radius: 50%; margin-bottom: 6px;
  display: grid; place-items: center;
  background: var(--ar-surface); border: 2px solid var(--ar-line-strong);
  font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-faint);
}
.ar-stepper__label { font-size: 12.5px; font-weight: 600; color: var(--ar-ink-soft); }
.ar-stepper__desc { font-size: 10.5px; color: var(--ar-ink-faint); line-height: 1.35; padding-inline: 4px; }
.ar-stepper .is-now .ar-stepper__dot { border-color: var(--ar-accent); color: var(--ar-accent); }
.ar-stepper .is-now .ar-stepper__label { color: var(--ar-ink); }
.ar-stepper .is-done .ar-stepper__dot { border-color: var(--ar-good); color: var(--ar-good); }
.ar-stepper .is-done .ar-stepper__label { color: var(--ar-good); }
@media (max-width: 600px) {
  .ar-stepper__desc { display: none; }
  .ar-stepper__label { font-size: 10px; }
}
.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; }
.ar-wiz__protect { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
.ar-wiz__protect li { display: flex; gap: 8px; font-size: 13px; color: var(--ar-ink-soft); line-height: 1.45; }
.ar-wiz__protect li::before { content: "✓"; color: var(--ar-good); font-weight: 700; flex: 0 0 auto; }

/* Welcome screen (first run) */
.ar-wiz__welcome { text-align: center; padding: 6px 0 2px; }
.ar-wiz__welcome-mark { width: 56px; height: 56px; border-radius: 50%; background: var(--ar-surface-2); border: 1px solid var(--ar-line); display: flex; align-items: center; justify-content: center; margin: 2px auto 16px; color: var(--ar-accent); }
/* The brand variant: the header tile's ink ground so the paper/amber "A" reads.
   The size override outranks the header's 18px/16px .ar__logo rules. */
.ar-wiz__welcome-mark--brand { background: var(--ar-ink); border-color: var(--ar-ink); }
.ar-wiz__welcome-mark--brand .ar__logo { width: 26px; }
.ar-wiz__welcome-title { font-family: var(--ar-serif); font-size: 24px; font-weight: 600; margin: 0 0 10px; }
.ar-wiz__welcome-lead { color: var(--ar-ink-soft); font-size: 14px; line-height: 1.6; max-width: 46ch; margin: 0 auto 18px; }
.ar-wiz__welcome-points { list-style: none; margin: 0 auto; padding: 0; display: inline-flex; flex-direction: column; gap: 9px; text-align: left; }
.ar-wiz__welcome-points li { display: flex; gap: 10px; font-size: 13.5px; color: var(--ar-ink); }
.ar-wiz__welcome-points li::before { content: ""; flex: 0 0 auto; width: 7px; height: 7px; margin-top: 6px; border-radius: 50%; background: var(--ar-accent); }

/* Done / first-run celebration */
.ar-wiz__done { position: relative; text-align: center; padding: 10px 0 4px; }
.ar-wiz__done-check { width: 66px; height: 66px; border-radius: 50%; background: var(--ar-good); color: #fff; display: flex; align-items: center; justify-content: center; margin: 4px auto 18px; animation: ar-pop 360ms cubic-bezier(0.2, 0.8, 0.2, 1.5) both; }
.ar-wiz__done-title { font-family: var(--ar-serif); font-size: 23px; font-weight: 600; margin: 0 0 9px; }
.ar-wiz__done-lead { color: var(--ar-ink-soft); font-size: 14px; line-height: 1.6; max-width: 44ch; margin: 0 auto; }
/* "Now explore" — jump-off cards to the capabilities added since first-run setup. */
.ar-wiz__explore-label {
  margin: 22px 0 8px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ar-ink-faint); text-align: left;
}
.ar-wiz__explore { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-wiz__explore button,
.ar-wiz__explore a {
  appearance: none; cursor: pointer; width: 100%; text-align: left;
  display: flex; flex-direction: column; gap: 2px;
  padding: 11px 14px; background: var(--ar-surface); border: 1px solid var(--ar-line);
  border-radius: var(--ar-radius); font: inherit; color: var(--ar-ink); text-decoration: none;
}
.ar-wiz__explore button:hover, .ar-wiz__explore a:hover { border-color: var(--ar-line-strong); background: var(--ar-surface-2); }
.ar-wiz__explore button:focus-visible, .ar-wiz__explore a:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-wiz__explore-name { font-weight: 600; font-size: 13.5px; }
.ar-wiz__explore-name::after { content: " ↗"; color: var(--ar-ink-faint); font-weight: 400; }
.ar-wiz__explore-desc { font-size: 12px; color: var(--ar-ink-soft); line-height: 1.4; }
.ar-wiz__done-btn { width: 100%; }
.ar-wiz__confetti { position: absolute; left: 0; right: 0; top: -8px; height: 1px; pointer-events: none; }
.ar-wiz__confetti span { position: absolute; top: 0; width: 8px; height: 14px; border-radius: 1px; opacity: 0; animation-name: ar-confetti; animation-timing-function: ease-in; animation-iteration-count: 1; animation-fill-mode: forwards; }
@keyframes ar-pop { 0% { transform: scale(0.4); opacity: 0; } 100% { transform: scale(1); opacity: 1; } }
@keyframes ar-confetti { 0% { transform: translateY(0) rotate(0); opacity: 1; } 100% { transform: translateY(340px) rotate(560deg); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .ar-wiz__done-check { animation: none; }
  .ar-wiz__confetti { display: none; }
}

.ar-wiz__moretypes { margin-top: 2px; align-self: flex-start; font-family: var(--ar-mono); font-size: 11px; text-decoration: none; }
.ar-wiz__moretypes:hover { text-decoration: underline; }

/* The services repeater: one bordered block per service, the fields inside. */
.ar-wiz__svc { border: 1px solid var(--ar-line); border-radius: 6px; padding: 12px 14px 14px; }
.ar-wiz__svc-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 2px; }
.ar-wiz__svc .ar-field { margin-top: 12px; }
.ar-wiz__svc .ar-field:first-of-type { margin-top: 0; }
.ar-wiz__centernote { margin-inline: auto; text-align: center; }

/* The celebration's "live right now" ticks: real, verifiable accomplishments —
   the ✓ list idiom, centered as a block, reading left like the welcome points.
   No width cap: each line's copy is sized to fit on ONE line at panel width. */
.ar-wiz__protect--live {
  display: inline-flex; text-align: left; margin: 14px auto 0;
}
.ar-wiz__protect--live a { color: var(--ar-ink); }
.ar-wiz__protect--live a:hover code { color: var(--ar-accent); }
.ar-wiz__protect--live code { font-size: 12px; }

/* ---- About: in-page search + the screens manual -------------------------- */
/* Jump-menu targets sit under two sticky bars (nav + pagehead) — without this
   margin a jump lands with its heading hidden behind them. The #agentimus-app
   prefix is load-bearing: the global `#agentimus-app [id^="ar-"]` 16px rule
   carries an id selector, so a class-only selector here would lose to it.
   NO --ar-adminbar term: WordPress already shifts the whole document with
   html { margin-top } for the admin bar, so adding it here double-counts —
   the jump lands a bar-height too low, and the scrollspy (whose reading line
   sits just under the sticky stack) then blames the PREVIOUS section. */
#agentimus-app .ar-about section[id],
#agentimus-app .ar-about .ar-about-screen[id],
#agentimus-app .ar-about .ar-about-feat[id] {
  scroll-margin-top: calc((2 * var(--ar-bar-h)) + 12px);
}
.ar-about-screen { padding: 16px 0 4px; }
.ar-about-screen + .ar-about-screen { border-top: 1px solid var(--ar-line); }
.ar-about-screen__where { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.08em; color: var(--ar-ink-faint); margin-left: 8px; }
/* Full card width, justified, hyphenated at breaks — the manual reads like a
   set page, not a narrow column. */
.ar-about-screen__purpose,
.ar-about-screen__do,
.ar-about-screen__ft {
  text-align: justify;
  hyphens: auto; -webkit-hyphens: auto;
}
.ar-about-screen__purpose { margin: 6px 0 0; font-size: 13px; line-height: 1.6; color: var(--ar-ink); }
.ar-about-screen__do { margin: 8px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ar-ink-soft); }
.ar-about-screen__k { margin: 14px 0 6px; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); }
.ar-about-screen__facts { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.ar-about-screen__facts li { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-about-screen__ico { flex: 0 0 auto; margin-top: 1px; display: inline-flex; }
.ar-about-screen__facts .is-info .ar-about-screen__ico { color: var(--ar-info); }
.ar-about-screen__facts .is-warn .ar-about-screen__ico { color: var(--ar-warn); }
.ar-about-screen__facts .is-tip .ar-about-screen__ico { color: var(--ar-accent); }
.ar-about-screen__ft { flex: 1; min-width: 0; }

/* ---- "Worth a look next" — the post-setup dashboard map ------------------ */
/* One-time guidance, not another data card: the accent rail + tinted surface
   (the What's New dress), and numbered accent chips carrying the priority. */
.ar-next {
  border-left: 3px solid var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 3%, var(--ar-surface));
}
.ar-next__n {
  flex: 0 0 auto; width: 24px; height: 24px; border-radius: 50%; margin-top: 1px;
  background: var(--ar-accent); color: var(--ar-paper);
  display: grid; place-items: center;
  font-family: var(--ar-mono); font-size: 11px;
}
.ar-next__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; }
.ar-next__title { margin: 0 0 4px; font-size: 17px; letter-spacing: -0.01em; }
.ar-next__sub { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar-next__head .ar-linkbtn { flex: 0 0 auto; white-space: nowrap; }
.ar-next__list { list-style: none; margin: 14px 0 0; padding: 0; }
.ar-next__list li {
  display: flex; align-items: center; gap: 18px;
  padding: 13px 0; border-top: 1px solid var(--ar-line);
}
.ar-next__body { flex: 1 1 auto; min-width: 0; }
.ar-next__body strong { display: block; font-size: 13.5px; margin-bottom: 2px; }
.ar-next__body p { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); max-width: 70ch; }
.ar-next__list .ar-btn { flex: 0 0 auto; }
@media (max-width: 640px) {
  .ar-next__list li { flex-direction: column; align-items: flex-start; gap: 9px; }
}

/* Form-like proof states put their title in the modal's fixed head; the title
   is the head's only line, so it drops its usual bottom margin. */
.ar-wiz__proofttl { margin: 0; }

/* The empty-"about" nudge: a tip, not a problem — amber, never the error red
   (.ar-warn wears --ar-bad, which reads as "something broke"). */
.ar-wiz__tip { color: var(--ar-warn); }

/* overflow:hidden — falling confetti transforms otherwise extend the modal's
   scroll area past this now-short screen and flash a phantom scrollbar. */
.ar-wiz__done { padding: 2px 0 0; overflow: hidden; }
.ar-wiz__done .ar-wiz__done-check { width: 52px; height: 52px; margin: 2px auto 12px; }
.ar-wiz__done .ar-wiz__done-check svg { width: 26px; height: 26px; }

/* The ceremonial proof states (watching, success) have no head — they carry
   the head's top breathing room themselves, or their first line would sit 8px
   from the panel edge while every headed screen's sits 24px. */
.ar-wiz__proof { padding-top: 16px; }

/* The proof screen: assistant pick cards (the .ar-type idiom, button-flavoured). */
.ar-ask-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 9px; }
.ar-ask {
  appearance: none; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--ar-line); border-radius: 6px; background: var(--ar-surface);
  padding: 13px 15px; transition: border-color 0.15s, background 0.15s; font-family: var(--ar-sans);
}
.ar-ask:hover { border-color: var(--ar-accent); background: #f0f6f4; }
.ar-ask:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-ask__mark {
  flex: 0 0 auto; width: 30px; height: 30px; border-radius: 50%;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
  display: flex; align-items: center; justify-content: center; color: var(--ar-ink);
}
.ar-ask__body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ar-ask__name { font-size: 13.5px; font-weight: 600; color: var(--ar-ink); }
.ar-ask__name::after { content: " ↗"; color: var(--ar-ink-faint); font-weight: 400; }
.ar-ask__sub { font-size: 11.5px; color: var(--ar-ink-soft); }

/* Watching the log: one quiet pulse and an honest clock. */
.ar-watch { display: flex; flex-direction: column; align-items: center; gap: 14px; padding: 8px 0; text-align: center; }
.ar-watch__pulse { width: 14px; height: 14px; border-radius: 50%; background: var(--ar-accent); animation: ar-watch-pulse 1.4s ease-in-out infinite; }
@keyframes ar-watch-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(20, 107, 100, 0.35); }
  50% { box-shadow: 0 0 0 12px rgba(20, 107, 100, 0); }
}
@media (prefers-reduced-motion: reduce) { .ar-watch__pulse { animation: none; } }
.ar-watch__title { font-family: var(--ar-serif); font-size: 19px; font-weight: 600; margin: 0; }
.ar-watch__clock { margin: 0; font-family: var(--ar-mono); font-size: 13px; color: var(--ar-ink-faint); font-variant-numeric: tabular-nums; }
.ar-watch__lead { max-width: 44ch; }

/* The payoff: the owner's own log line (the .is-on capsule palette). */
.ar-logline {
  display: flex; align-items: center; flex-wrap: wrap; gap: 10px; text-align: left;
  margin: 18px 0 0; padding: 13px 16px;
  border: 1px solid #bcdcc6; border-radius: 6px; background: #eef5f0;
}
.ar-logline__dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ar-good); flex: 0 0 auto; }
.ar-logline__name { font-weight: 700; font-size: 14px; }
.ar-logline__chip { font-family: var(--ar-mono); font-size: 11px; background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: 4px; padding: 2px 8px; }
.ar-logline__net { font-size: 12px; color: var(--ar-ink-soft); }
.ar-logline__time { margin-left: auto; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-soft); }
@media (max-width: 640px) { .ar-logline__time { margin-left: 0; flex-basis: 100%; } }

/* The honest timeout: numbered plain-words reasons, firewall first. */
.ar-reasons { margin: 6px 0 0; padding: 0; list-style: none; display: grid; gap: 12px; text-align: left; }
.ar-reasons li { display: flex; gap: 12px; font-size: 13px; line-height: 1.5; color: var(--ar-ink); }
.ar-reasons li strong { font-weight: 600; }
.ar-reasons li small { display: block; color: var(--ar-ink-soft); font-size: 12.5px; margin-top: 1px; }
.ar-reasons__n {
  flex: 0 0 auto; width: 22px; height: 22px; border-radius: 50%; margin-top: 1px;
  border: 1px solid var(--ar-line-strong); background: var(--ar-surface-2);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-soft);
}

/* The optional second wow: the one-click connect card, dashed = an offer, not a step. */
.ar-connect {
  margin-top: 20px; text-align: left; border: 1px dashed var(--ar-line-strong);
  border-radius: 6px; background: var(--ar-surface-2); padding: 15px 17px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
}
.ar-connect__body { flex: 1 1 260px; display: flex; flex-direction: column; gap: 3px; }
.ar-connect__title { font-size: 13.5px; font-weight: 600; }
.ar-connect__sub { font-size: 12.5px; color: var(--ar-ink-soft); line-height: 1.5; }

/* ---- Readiness ---------------------------------------------------------- */
/* Each rung is a titled group of checks, with its own pass tally. */
/* The report is a stack of cards (header card + one card per rung group); the grid
   gap replaces the old in-card margins between groups. min-width:0 on the stack AND
   its cards for the same reason .ar-tabpanel carries it: as grid items, the default
   min-width:auto refuses to shrink below the content's intrinsic width, so on a
   phone the whole report overflowed the viewport instead of wrapping. */
.ar-readiness-stack { display: grid; gap: 18px; min-width: 0; }
.ar-readiness-stack > * { min-width: 0; }
.ar-checkgroup { margin-top: 0; }
.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; }

/* minmax(0,1fr): let the single column shrink below its content's min-content, so a
   nowrap child (e.g. an Optimize page link) truncates instead of overflowing the panel. */
.ar-checks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; grid-template-columns: minmax(0, 1fr); gap: 0; border-top: 1px solid var(--ar-line); }
.ar-check {
  /* Grid, not flex: the fix note and action live at row level so the note can
     span the FULL row width (flush with the status chip), while the color rule
     still stretches every row via grid-row 1/-1. */
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto;
  column-gap: 16px; align-items: start;
  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 { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
/* The AgentReady citation chip: quiet spec ID beside the label, linking out. */
.ar-check__arid {
  display: inline-block; vertical-align: 1px; margin-left: 7px; padding: 1px 7px;
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.06em; font-weight: 400;
  color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); border-radius: 999px;
  text-decoration: none;
}
.ar-check__arid:hover { color: var(--ar-accent); border-color: var(--ar-accent); }
.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 {
  grid-column: 2 / -1;
  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 {
  grid-column: 2; justify-self: start;
  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; }
/* span 3 = the max possible rows (text / fix / action) — "1 / -1" can't reach
   IMPLICIT grid rows, so it left the bar one row tall. Unused spanned rows are
   zero-height and invisible. */
.ar-check__rule { grid-row: 1 / span 3; 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; flex-wrap: wrap; align-items: center; gap: 8px; }

/* Readiness: the report-refresh sits beside the title as a ↻ icon, kept apart from the
   "open a view/test" buttons so it's never mistaken for a live check. Reuses ar-spin. */
.ar-card__titlewrap { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ar-card__titlewrap .ar-card__title { margin-bottom: 0; }
/* The report-wide total beside the title — the same dot-and-count signal each rung
   card carries, summed, and coloured by the worst rung so it never over-reassures. */
.ar-readiness__total {
  display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--ar-mono); font-size: 13px; font-weight: 600; color: var(--ar-ink-soft);
}
.ar-readiness__total-dot {
  width: 9px; height: 9px; border-radius: 50%; background: var(--ar-line-strong);
}
.ar-readiness__total.is-pass { color: var(--ar-good); }
.ar-readiness__total.is-warn { color: var(--ar-warn); }
.ar-readiness__total.is-fail { color: var(--ar-bad); }
.ar-readiness__total.is-pass .ar-readiness__total-dot { background: var(--ar-good); }
.ar-readiness__total.is-warn .ar-readiness__total-dot { background: var(--ar-warn); }
.ar-readiness__total.is-fail .ar-readiness__total-dot { background: var(--ar-bad); }
.ar-readiness__refresh, .ar-log__refresh {
  flex: 0 0 auto;
  display: inline-flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 8px;
  background: transparent; color: var(--ar-ink-soft);
  cursor: pointer;
}
.ar-readiness__refresh:hover:not(:disabled), .ar-log__refresh:hover:not(:disabled) { background: var(--ar-surface-2); color: var(--ar-ink); }
.ar-readiness__refresh:focus-visible, .ar-log__refresh:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-readiness__refresh:disabled, .ar-log__refresh:disabled { cursor: default; opacity: 0.65; }
.ar-readiness__refresh.is-busy svg, .ar-log__refresh.is-busy svg { animation: ar-spin 0.8s linear infinite; }
@media (prefers-reduced-motion: reduce) {
  .ar-readiness__refresh.is-busy svg, .ar-log__refresh.is-busy svg { animation: none; }
}

/* Live self-check results — "what agents actually receive". */
/* Verify-live result modal. Reuses the .ar-modal shell; the title shares its head
   row with the n/n tally, and the result rows scroll in the body. */
.ar-modal__panel--live { max-width: 680px; }
.ar-live-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ar-live-head .ar-modal__title { margin: 0; }
.ar-live__tally { flex: 0 0 auto; 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__tally.is-warn { color: var(--ar-warn); }
.ar-live__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; }
.ar-live__row {
  display: flex; flex-wrap: wrap; align-items: center; gap: 3px 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); }
/* The path is the identifier — keep it readable. A min-width forces the detail + tag to
   wrap to their own line (right-aligned, below) when they can't fit beside it, rather than
   squeezing the path into a mid-word stack; overflow-wrap only kicks in if a single path
   is genuinely wider than the row. */
.ar-live__label { flex: 1 1 auto; min-width: 45%; overflow-wrap: anywhere; color: var(--ar-ink); }
.ar-live__detail { flex: 0 0 auto; margin-left: 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); }
/* CDN / edge-cache warning: a shared cache served stored copies, so those fetches
   bypassed WordPress — the activity log under-counts and discovery can go stale. */
.ar-live-cache {
  margin: 0 0 14px; padding: 12px 14px;
  background: rgba(173, 123, 24, 0.08);
  border: 1px solid rgba(173, 123, 24, 0.35); border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--ar-ink);
}
.ar-live-cache__title { display: block; margin-bottom: 5px; color: var(--ar-warn); font-size: 13px; }
.ar-live-cache p { margin: 0; }
.ar-live-cache__fix { margin-top: 7px !important; }
.ar-live-cache code { font-family: var(--ar-mono); font-size: 11.5px; background: rgba(173, 123, 24, 0.12); padding: 1px 5px; border-radius: 4px; }
.ar-live-cache a { color: var(--ar-warn); font-weight: 600; }
/* Per-row "cached" marker + amber dot when a cache served that endpoint. */
.ar-live__cachetag {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase;
  color: var(--ar-warn); background: rgba(173, 123, 24, 0.12); padding: 1px 6px; border-radius: 999px; cursor: help;
}
.ar-live__row.is-cached .ar-live__dot { background: var(--ar-warn); }
/* Exposed-files scan: green all-clear box, red "exposed" dot/tag, muted skipped row. */
.ar-live-allclear {
  margin: 0 0 14px; padding: 12px 14px;
  background: rgba(74, 124, 89, 0.09);
  border: 1px solid rgba(74, 124, 89, 0.35); border-radius: 8px;
  font-size: 12.5px; line-height: 1.55; color: var(--ar-ink);
}
.ar-live-allclear strong { color: var(--ar-good); }
.ar-live__row.is-skip { opacity: 0.55; }
.ar-live__row.is-bad .ar-live__cachetag { color: var(--ar-bad); background: rgba(180, 40, 40, 0.12); }
.ar-live__row.is-warn .ar-live__dot { background: var(--ar-warn); }
.ar-live__row.is-warn .ar-live__detail { color: var(--ar-warn); }
/* Red variant of the alert box for a leaking (non-empty) exposed file; empty ones reuse
   the base amber .ar-live-cache. */
.ar-live-cache--bad { background: rgba(180, 40, 40, 0.07); border-color: rgba(180, 40, 40, 0.35); }
.ar-live-cache__title--bad { color: var(--ar-bad); }
.ar-live-cache--bad a { color: var(--ar-bad); }
.ar-live__foot { margin: 12px 0 0; font-size: 11.5px; line-height: 1.5; color: var(--ar-ink-faint); }
/* Loading state while the browser fetches the live endpoints (~1s). */
.ar-live__loading {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 13px; padding: 34px 0 38px;
}
.ar-live__loading-label { font-size: 12.5px; color: var(--ar-ink-soft); }
/* A clean ring spinner: faint track with one accent arc rotating. */
.ar-spinner {
  width: 26px; height: 26px; border-radius: 50%;
  border: 2.5px solid var(--ar-line-strong);
  border-top-color: var(--ar-accent);
  animation: ar-spin 0.7s linear infinite;
}
@keyframes ar-spin { to { transform: rotate(360deg); } }
/* A progress spinner is functional, not decorative — keep it turning under
   reduce-motion (a frozen ring reads as broken), just slow it right down. */
@media (prefers-reduced-motion: reduce) {
  .ar-spinner { animation-duration: 1.6s; }
}

/* ---- 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; min-width: 0; font-family: var(--ar-mono); font-size: 13.5px; color: var(--ar-ink); overflow-wrap: anywhere; }
.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: color-mix(in srgb, var(--ar-accent) 8%, transparent); }
.ar-wd-canonical__ext:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
/* Copy affordance for auth-gated agent addresses (opening them in a browser can
   only ever produce a 401 — copying into an agent's config is the real intent). */
.ar-wd-copy {
  width: auto; padding: 0 8px; border: 0; background: none; cursor: pointer;
  font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase;
}
.ar-wd-copy.is-copied { color: var(--ar-good); }
.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 clickable stat: reset the button chrome, add a quiet hover so it reads as a
   jump link to its own section. */
button.ar-wd-stat { border: 0; font: inherit; cursor: pointer; transition: background 0.12s; }
button.ar-wd-stat:hover { background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); }
button.ar-wd-stat:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: -2px; }
/* 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; }

/* Medium container: the Readiness header carries four buttons, so shrink just those a bit
   earlier than the phone breakpoint — they stay a tidy single-line row instead of
   dominating the header. Scoped to the inline header, so buttons elsewhere are untouched. */
@container (max-width: 720px) {
  .ar-card__head--inline .ar-btn { padding: 9px 16px; font-size: 11px; }
}

/* ---- 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; }
}

/* Readiness header carries FOUR actions — too many to sit beside the title on a
   narrow container without a ragged two-row wrap. Below this width, drop the actions
   under the title and stack them full-width: one clear, un-truncated tap target per
   row. Scoped to the Readiness header (--stack-sm), so other inline headers (which
   carry a button or two) keep their compact single-row treatment. Placed AFTER the
   560px block so it wins the equal-specificity ties at every width it covers. */
@container (max-width: 640px) {
  .ar-card__head--stack-sm { flex-direction: column; align-items: stretch; gap: 12px; }
  .ar-card__head--stack-sm .ar-card__actions { width: 100%; flex-direction: column; align-items: stretch; }
  .ar-card__head--stack-sm .ar-card__actions .ar-btn { width: 100%; }
}

/* 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 color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface)); background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); 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; }

@container (max-width: 760px) { .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: color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface)); background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); }
.ar-wd-cap-src { font-size: 12px; color: var(--ar-ink-soft); }
.ar-card__count {
  font-family: var(--ar-mono); font-size: 12px; font-weight: 600; color: var(--ar-ink-soft);
  border: 1px solid var(--ar-line-strong); border-radius: 999px; padding: 1px 9px; margin-left: 6px; vertical-align: middle;
}

.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: color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface)); background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); }

.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; align-items: center; gap: 12px;
  padding: 14px 16px; 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;
}
/* The tile's mark: an accent-tinted chip, quiet enough not to shout four times
   in a row; the number stays the loudest thing on the tile. */
.ar-dash-tile__ic {
  flex: 0 0 auto; width: 38px; height: 38px; border-radius: 10px;
  display: grid; place-items: center; color: var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 8%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 22%, var(--ar-line));
}
.ar-dash-tile__ic svg { width: 19px; height: 19px; }
.ar-dash-tile__body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* "6 PROVIDERS" — the number leads and the label rides its baseline. */
.ar-dash-tile__row { display: inline-flex; align-items: baseline; gap: 7px; }
.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; }
/* Tiny passive "auto-refresh is on" marker, tucked beside the card title.
   Steady (no motion); mirrors the bell pill's green dot. */
.ar-act-titlerow { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.ar-act-live {
  display: inline-flex; align-items: center; gap: 4px;
  font-family: var(--ar-mono); font-size: 8.5px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-good);
  position: relative; top: 1px;
}
.ar-act-live__dot { width: 5px; height: 5px; border-radius: 50%; background: var(--ar-good); 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); }

/* Phones: 30 columns squeeze below a usable tap size, so the charts keep their
   bars touch-wide and scroll sideways instead. The scroller is rtl so it OPENS
   at the newest days (and a data refresh never yanks the scroll position); the
   inner chart restores ltr so time still runs left → right. Tablets and up fit
   the full month as before and never scroll. */
@media (max-width: 600px) {
  .ar-act-sparkscroll { overflow-x: auto; direction: rtl; scrollbar-width: thin; padding-bottom: 4px; }
  .ar-act-sparkscroll > * { direction: ltr; min-width: 100%; width: max-content; }
  .ar-act-spark, .ar-refspark { gap: 4px; }
  .ar-act-bar, .ar-refspark__bar { min-width: 16px; }
  /* The AI chart's buttons ARE the bars, so a quiet day is a 2px-tall target —
     an invisible full-column extension makes every day tappable to the top. */
  .ar-refspark__bar { position: relative; }
  .ar-refspark__bar:not(.is-zero)::after { content: ""; position: absolute; left: -2px; right: -2px; bottom: 0; height: 52px; }
}

/* 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; }
}

/* Styled hover tooltip for a long inline value (a full User-Agent) — the dark
   alternative to a native title="…". position:fixed (placed off the cell's rect in
   JS) so the scrolling request feed / day modal never clips it; same look as the
   chart tooltip above (--ar-ink on --ar-surface, soft shadow, a caret). */
.ar-act-uatip {
  position: fixed; z-index: 100002; pointer-events: none; /* teleported to <body>, above the modal (100001) */
  max-width: 360px; padding: 8px 11px;
  background: var(--ar-ink); color: var(--ar-surface);
  /* The hairline light ring is for DARK surfaces (the score rail card) — an
     ink bubble over an ink card would otherwise have no visible edge. On light
     tables it reads as part of the shadow. */
  border-radius: 7px;
  box-shadow: 0 0 0 1px rgba(255, 253, 247, 0.22), 0 10px 24px -10px rgba(27, 25, 19, 0.55);
  font-family: var(--ar-mono); font-size: 11.5px; line-height: 1.5;
  white-space: normal; word-break: break-word;
  transform: translateY(-100%); /* anchored ABOVE: the box's bottom sits at top:y */
}
.ar-act-uatip.is-below { transform: none; } /* anchored BELOW: the box's top sits at top:y */
/* Info variant: plain prose (not a mono code value), e.g. the unverified-network hint.
   Same dark bubble + caret, readable sans font, a touch narrower for a comfortable measure. */
.ar-act-uatip--info {
  max-width: 300px;
  font-family: inherit; font-size: 12px; word-break: normal;
}
.ar-act-uatip__caret {
  position: absolute; left: 16px; top: 100%;
  width: 0; height: 0;
  border-left: 6px solid transparent; border-right: 6px solid transparent;
  border-top: 6px solid var(--ar-ink);
}
.ar-act-uatip.is-below .ar-act-uatip__caret {
  top: auto; bottom: 100%;
  border-top: 0; border-bottom: 6px solid var(--ar-ink);
}
.ar-act-uatip__ua { display: block; }
.ar-act-uatip__hint {
  display: block; margin-top: 5px;
  font-size: 9.5px; letter-spacing: 0.06em; text-transform: uppercase; opacity: 0.55;
}
/* Rail variant, hovering the DARK score card: an amber-paper bubble (the ink one
   would melt into the card), CSS-centred — `left` receives the CARD's centre and
   translateX(-50%) does the rest, so width never enters the JS and a re-render
   can't misplace it. The caret sits at the bubble's centre (the rows it
   annotates span the card). */
.ar-act-uatip--rail {
  transform: translate(-50%, -100%);
  /* width: max-content, because a fixed box's shrink-to-fit width is capped by
     the space from its `left` to the viewport edge — and `left` here is the
     card's centre, so the bubble was squeezed to half the room it had. The
     transform centres AFTER layout; max-content + max-width restores the cap
     we actually meant. */
  width: max-content;
  /* The rail cards' own surface — the bubble reads as one of them, floating;
     the amber lives in the ring and the hint line, not the fill. */
  background: var(--ar-surface); color: var(--ar-ink);
  box-shadow: 0 0 0 1px #e6d5a8, 0 10px 24px -10px rgba(27, 25, 19, 0.45);
  /* border-box so the card-width cap means the box's FULL width — with the
     default content-box, max-width excluded the padding and the clamp overshot. */
  box-sizing: border-box;
}
.ar-act-uatip--rail.is-below { transform: translateX(-50%); }
.ar-act-uatip--rail .ar-act-uatip__caret { left: 50%; margin-left: -6px; border-top-color: var(--ar-surface); }
.ar-act-uatip--rail.is-below .ar-act-uatip__caret { border-top-color: transparent; border-bottom-color: var(--ar-surface); }
.ar-act-uatip--rail .ar-act-uatip__hint { color: var(--ar-warn); opacity: 0.9; }

/* The Optimized rung's worklist total — the Next line only names the top issue;
   this is the honest "how much altogether", amber like every nudge. */
/* Rides the right edge, tucked against the %: the spec-sheet grammar is label
   left, values right — and the chip is metadata about the value ("80%, and 2
   things to do about it"). Deliberately MUTED, not amber: the row's state
   already carries the color, and a gold chip beside a gold name and a gold %
   turned every warn row into one solid band. This is the card's own
   secondary-text tone (what "AEO / GEO" wears), warm where #848484 is cold. */
.ar-rung__todo {
  font-style: normal; font-family: var(--ar-mono);
  font-size: 10px; letter-spacing: 0.05em;
  color: rgba(243, 240, 231, 0.55); white-space: nowrap;
}
/* The User-Agent cell copies its full value on click (it's shown truncated). */
.ar-act-feed__ua.is-copyable { cursor: pointer; transition: background-color 0.12s ease; }
.ar-act-feed__ua.is-copyable:hover { background: #e6e4dd; }

/* 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. */
/* "Optimize your content" — the fourth section on the Readiness tab (the Optimized
   rung's destination). Reuses .ar-checkgroup / .ar-check; each issue lists the pages
   that trip it as edit links, matching the rung → tab-section model of the others. */
.ar-optcheck__n { font-family: var(--ar-mono); font-size: 11px; font-weight: 400; color: var(--ar-warn); }
.ar-optcheck__head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.ar-optcheck__asided { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-start; gap: 2px; }
.ar-optcheck__asided .ar-optcheck__page { flex: none; max-width: 100%; }
/* Same guard as the page link above: in an align-items:flex-start column the item
   shrink-wraps its content, so this nowrap line overflowed instead of ellipsizing. */
.ar-optcheck__asided .ar-optcheck__flags { max-width: 100%; }
.ar-optcheck__flags { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-optcheck__pages { display: flex; flex-direction: column; gap: 5px; margin: 8px 0 0; }
.ar-optcheck__row { display: flex; align-items: center; gap: 12px; }
/* flex 0-grow: the link hugs its own text, so only the words hover — not the empty
   run of row beside them. shrink 1 + min-width 0 keep long titles truncating. */
.ar-optcheck__page { flex: 0 1 auto; min-width: 0; font-size: 13px; color: var(--ar-accent); text-decoration: none; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ar-optcheck__page:hover, .ar-optcheck__page:focus-visible { text-decoration: underline; }
.ar-optcheck__page--muted { color: var(--ar-ink-soft); }
.ar-optcheck__more { margin: 7px 0 0; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
/* Set-aside / set-all-aside / restore actions — one treatment for all three: a quiet
   uppercase accent label, right-pinned, no chrome. Identical padding is what keeps every
   right edge on the same vertical line, from the section header down through each row.
   Hover darkens to ink rather than underlining — these are buttons, not links. */
.ar-optcheck__aside, .ar-optcheck__restore {
  flex: 0 0 auto; margin-left: auto; appearance: none; background: none; cursor: pointer;
  border: 0; padding: 3px 4px; font-family: var(--ar-mono); font-size: 10px;
  letter-spacing: 0.08em; text-transform: uppercase; white-space: nowrap;
  color: var(--ar-accent); transition: color 0.15s ease;
}
.ar-optcheck__aside:hover, .ar-optcheck__aside:focus-visible,
.ar-optcheck__restore:hover, .ar-optcheck__restore:focus-visible { color: var(--ar-ink); }
.ar-optcheck__aside:disabled, .ar-optcheck__restore:disabled { opacity: 0.4; cursor: default; }
.ar-optcheck__clear { margin: 4px 0 0; font-size: 13px; color: var(--ar-ink-soft); }
/* Set-aside block: a quiet, dashed-off list under the issues so it reads as "parked".
   Each parked page is its own small card — title + its flags inside one boundary, the
   Restore pinned right — so the list reads as tidy rows, not interleaved lines. */
.ar-setaside { margin: 16px 0 0; padding: 14px 0 0; border-top: 1px dashed var(--ar-line); }
/* The head reads like the issue headers above it — a dark title with a warn-mono count —
   so the parked block registers as a section, not a footnote. */
.ar-setaside__head { display: flex; align-items: baseline; gap: 8px; margin: 0 0 10px; }
.ar-setaside__title { font-size: 14px; color: var(--ar-ink); }
.ar-setaside__note { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
/* Restore All sits on the header line, on the same right edge as every row's RESTORE. */
.ar-setaside__restoreall { margin-left: auto; }
.ar-setaside .ar-optcheck__pages { gap: 8px; }
.ar-setaside .ar-optcheck__row {
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: 6px;
  padding: 9px 12px;
}

/* Day-report modal: a wider panel; header with prev/next + a day dropdown. */
/* Fixed height, not content-sized: the day report renders in two beats (spinner,
   then the full day) and days vary from 3 rows to hundreds — content sizing made
   the dialog visibly grow on load and jump between days. One constant size. */
.ar-modal__panel--day { max-width: 640px; height: min(calc(100vh - 40px), 600px); height: min(calc(100svh - 40px), 600px); }
.ar-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 8px; flex-wrap: wrap; }
/* Day-switch loading: the body content is fully withheld while the day loads
   (a breakdown appearing ahead of the request rows read as inconsistent), so
   the centered ring spinner is the only thing shown. The panel's fixed height
   (see .ar-modal__panel--day) keeps the dialog the same size in both beats. */
.ar-modal__scroll.is-loading { pointer-events: none; }
.ar-day-loadover {
  position: absolute; inset: 0; z-index: 3;
  display: flex; align-items: center; justify-content: center; gap: 12px;
}
.ar-day-loadover__label {
  font-family: var(--ar-mono); font-size: 12px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ar-ink-soft);
}
.ar-day-head .ar-modal__title { margin: 0; }
.ar-day-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
/* The day picker is the custom SelectMenu; size its trigger to sit compactly between
   the prev/next buttons (the shared .ar-input is a touch taller by default). */
.ar-day-picker { min-width: 190px; max-width: 260px; flex: 0 1 auto; }
.ar-day-picker .ar-select__btn { height: 32px; padding: 0 10px; font-size: 12.5px; }
.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); }
/* The top divider separates this section FROM THE BREAKDOWN ABOVE it in the
   endpoint-activity dialog. When the log is the dialog's only section (the AI
   day report), that rule would float under the header as a stray double line. */
.ar-daylog--solo { margin-top: 0; padding-top: 0; border-top: 0; }

/* ---- Client manager (Settings → AI access → "Manage client decisions") ----
   Three sections of decision rows: who (token/name + catalog identity),
   when (decision date, where recorded), and an instant undo per row. */
/* The "Manage clients" launcher sits on the right of each list's label row —
   the same dialog from both, since it manages all decisions at once. The head
   row flexes so the label keeps its place and the launcher hugs the right edge
   (Heera's placement call, 2026-07-13). */
.ar-field__head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; }
.ar-field__head label { margin-bottom: 0; }
.ar-field__manage { font-size: 12px; flex: 0 0 auto; }
/* Verified-bots registry manager (Settings → Bots): one compact row per entry —
   name + UA needle + method chips — built-ins toggle, customs remove. */
.ar-verreg__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 7px; }
.ar-verreg__row {
  display: flex; align-items: center; gap: 9px; min-width: 0; flex-wrap: wrap;
  padding: 7px 10px; border: 1px solid var(--ar-line); border-radius: 8px; background: var(--ar-surface);
}
.ar-verreg__row.is-off { opacity: 0.55; }
.ar-verreg__check { display: flex; align-items: center; gap: 7px; min-width: 0; cursor: pointer; }
/* Custom-drawn checkbox: the native control restyled to the design system (WP core's
   blue default was the one off-palette control left in the admin). appearance:none
   keeps the REAL input — label click, keyboard, screen readers all intact — and the
   check glyph is a clip-path box painted in palette vars, so admin color schemes
   restyle it for free (no hardcoded-color SVG). The ::before overrides WP core's own
   checked-state dashicon; focus clears core's blue box-shadow for our outline. */
.ar-verreg__check input {
  appearance: none; -webkit-appearance: none;
  width: 16px; height: 16px; margin: 0; flex: 0 0 auto;
  border: 1px solid var(--ar-line-strong); border-radius: 5px;
  background: var(--ar-surface); cursor: pointer;
  display: inline-grid; place-items: center;
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ar-verreg__check input:hover { border-color: var(--ar-accent); }
.ar-verreg__check input:focus { box-shadow: none; }
.ar-verreg__check input:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-verreg__check input:checked { background: var(--ar-accent); border-color: var(--ar-accent); }
.ar-verreg__check input:checked::before {
  content: ''; width: 10px; height: 10px; margin: 0;
  background: var(--ar-surface);
  clip-path: polygon(14% 46%, 0 62%, 38% 100%, 100% 18%, 84% 4%, 36% 68%);
}
.ar-verreg__name { font-size: 13px; font-weight: 600; color: var(--ar-ink); white-space: nowrap; }
.ar-verreg__custom {
  font-family: var(--ar-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 1px 5px; border-radius: 4px; color: var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface));
  border: 1px solid color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface));
}
.ar-verreg__ua {
  font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-soft);
  padding: 1px 6px; border-radius: 3px; background: var(--ar-surface-2); border: 1px solid var(--ar-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 180px;
}
.ar-verreg__methods { display: flex; gap: 5px; margin-left: auto; }
.ar-verreg__chip {
  font-size: 10.5px; padding: 1px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--ar-ink-soft); background: var(--ar-surface-2); border: 1px solid var(--ar-line);
}
/* The IP-ranges chip is a real <button> (click copies the ranges URL) — reset the
   browser button chrome so both chip flavors render identically, and show a hand. */
button.ar-verreg__chip { appearance: none; font-family: inherit; line-height: inherit; cursor: pointer; }
.ar-verreg__chip.is-copyable:hover { border-color: var(--ar-accent); color: var(--ar-ink); }
.ar-verreg__chip.is-copyable:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-verreg__remove { font-size: 11.5px; flex: 0 0 auto; }
.ar-verreg__add { margin-top: 10px; padding: 11px; border: 1px dashed var(--ar-line-strong); border-radius: 9px; }
.ar-verreg__grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.ar-verreg__grid input { width: 100%; }
.ar-verreg__intro { display: block; margin: 0 0 10px; }
.ar-verreg__addrow { display: flex; align-items: center; gap: 12px; margin-top: 9px; }
.ar-verreg__missing { color: var(--ar-warn); font-weight: 600; }
.ar-verreg__addbtn { margin-left: auto; } /* Button hugs the right edge, message (if any) reads on the left. */
.ar-verreg__addbtn { flex: 0 0 auto; font-size: 12.5px; padding: 6px 14px; }
@media (max-width: 640px) {
  .ar-verreg__grid { grid-template-columns: 1fr; }
  .ar-verreg__methods { margin-left: 0; }
}

.ar-cm__section { padding-top: 6px; }
.ar-cm__list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 9px; }
.ar-cm__row { display: flex; align-items: baseline; gap: 10px; min-width: 0; font-size: 13px; }
.ar-cm__who { display: flex; align-items: baseline; gap: 8px; min-width: 0; flex: 0 1 auto; }
.ar-cm__token {
  font-family: var(--ar-mono); font-size: 12.5px; padding: 1px 6px; border-radius: 3px;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 220px;
}
.ar-cm__known { color: var(--ar-ink-soft); font-size: 12px; white-space: nowrap; }
.ar-cm__name { font-weight: 600; }
.ar-cm__name--anon { color: var(--ar-ink-soft); font-style: italic; font-weight: 400; }
.ar-cm__meta { margin-left: auto; flex: 0 0 auto; font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-faint); }
.ar-cm__undo {
  appearance: none; cursor: pointer; flex: 0 0 auto;
  font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 3px; background: transparent;
  color: var(--ar-ink-soft); border: 1px solid var(--ar-line-strong);
  transition: color 0.12s, border-color 0.12s;
}
.ar-cm__undo:hover:not(:disabled) { color: var(--ar-bad); border-color: var(--ar-bad); }
.ar-cm__undo:disabled { opacity: 0.55; cursor: default; }
.ar-cm__none { margin: 8px 0 0; color: var(--ar-ink-faint); font-size: 12.5px; }
.ar-cm__note { margin: 10px 0 0; color: var(--ar-ink-faint); font-size: 12px; line-height: 1.5; }
@media (max-width: 600px) {
  .ar-cm__row { flex-wrap: wrap; }
  .ar-cm__meta { margin-left: 0; width: 100%; order: 3; }
}
@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; }
/* Trend variant (Top clients / By endpoint only): a calm growth/down delta sits in a
   FIXED-width column between the label and the bar, so bars stay aligned row to row. Only
   real movers get a colored arrow + %; everything else is a quiet "–". The plain
   .ar-act-rank (referral lists) keeps its 3-column layout. */
.ar-act-rank--trend li { grid-template-columns: minmax(0, 1fr) 62px 90px auto; }
/* A rank row that drills somewhere: the button IS the row (it takes over the
   li's grid), styled invisibly — the hover tint on the label is the only cue,
   matching how the day-bars and summary tiles advertise themselves. */
.ar-act-rank li:has(.ar-act-rank__btn) { display: block; }
.ar-act-rank__btn {
  appearance: none; background: none; border: 0; margin: 0; padding: 0;
  font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%;
  display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 12px;
  border-radius: 6px;
}
.ar-act-rank--trend .ar-act-rank__btn { grid-template-columns: minmax(0, 1fr) 62px 90px auto; }
.ar-act-rank__btn:hover .ar-act-rank__label,
.ar-act-rank__btn:hover .ar-act-rank__label code { color: var(--ar-accent); }
.ar-act-rank__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; }
.ar-act-delta { font-family: var(--ar-mono); font-size: 11px; white-space: nowrap; text-align: right; }
.ar-act-delta.is-up { color: var(--ar-good); }
/* Down is NOT red: red is this app's danger color (impostors, blocking, errors), and a
   traffic dip is information, not a fault — owners read a red ▼ as "something broke".
   Amber = "worth a glance": distinct from the up-green at a squint (plain ink wasn't —
   both sit at the same darkness at 11px), without red's alarm. */
.ar-act-delta.is-down { color: var(--ar-warn); }
.ar-act-delta.is-flat { color: var(--ar-ink-faint); }
.ar-act-more { margin: 11px 0 0; font-size: 11px; color: var(--ar-ink-faint); }
/* As a button: expand/collapse the day breakdown. Caret signals it unfolds (no underline). */
button.ar-act-more { appearance: none; background: none; border: 0; padding: 0; cursor: pointer; font-family: inherit; display: inline-flex; align-items: center; gap: 4px; transition: color 0.15s ease; }
button.ar-act-more:hover { color: var(--ar-ink); }
.ar-act-more__caret { font-size: 8px; line-height: 1; }
.ar-act-more-note { margin: 4px 0 0; font-size: 10px; font-style: italic; color: var(--ar-ink-faint); }

/* ---- Traffic from AI: one consolidated report card ---------------------- */
/* Composition (sources + pages) side by side; collapses to one column when the
   app (the inline-size container) gets narrow. */
.ar-ai__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px 44px; margin-top: 22px; }
@container (max-width: 760px) { .ar-ai__cols { grid-template-columns: 1fr; gap: 20px; } }
.ar-ai__col .ar-act-rank { margin-top: 0; }
/* Small section labels inside the card — distinct from the serif card title. */
.ar-ai__sub {
  margin: 0 0 12px; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 600;
  letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint);
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
}
.ar-ai__subnote {
  font-family: var(--ar-sans); font-size: 11px; font-weight: 400; letter-spacing: 0;
  text-transform: none; color: var(--ar-ink-faint);
}
.ar-ai__byday { margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--ar-line); }

/* Dashboard summary: a read-only sparkline of AI-referred visits per day. Deliberately
   NOT the interactive .ar-act-spark (whose bars are buttons that open a day report) —
   this one only shows the shape of the month, and the drill-down lives on its own screen. */
.ar-refspark { display: flex; align-items: flex-end; gap: 3px; height: 52px; margin: 20px 0 6px; }
/* When the AI sparkline sits in the positioned tooltip wrapper, the wrapper owns
   the outer margin so the two charts' tooltip geometry matches. */
.ar-act-sparkwrap--ref { margin: 20px 0 6px; }
.ar-act-sparkwrap--ref .ar-refspark { margin: 0; }
/* Each bar is a real <button> — click opens that day's report, same as the
   endpoint-activity chart. Zero-days are disabled but keep their title. */
.ar-refspark__bar {
  appearance: none; border: 0; padding: 0; cursor: pointer;
  flex: 1 1 0; 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.12s ease;
}
.ar-refspark__bar:hover:not(:disabled), .ar-refspark__bar.is-active { filter: brightness(0.72); }
.ar-refspark__bar:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-refspark__bar.is-zero { background: var(--ar-line); height: 2px !important; cursor: default; }

/* The link at the foot of a dashboard summary card, through to the screen that holds the
   same data in full. Shared by "Traffic from AI" → AI traffic and "Recent requests" →
   Request log: one pattern, because it is one relationship. */
.ar-card__more {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  margin: 22px 0 0; padding-top: 16px; border-top: 1px solid var(--ar-line);
}
.ar-card__more .ar-linkbtn { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; }
.ar-card__more .ar-linkbtn svg { transition: transform 0.18s ease; }
.ar-card__more .ar-linkbtn:hover svg { transform: translateX(2px); }
@media (prefers-reduced-motion: reduce) { .ar-card__more .ar-linkbtn svg { transition: none; } }
.ar-card__morenote { font-size: 12px; color: var(--ar-ink-faint); }

/* AI traffic screen: the cards stack, and the report card's title carries a refresh. */
.ar-aitraffic { display: grid; gap: 20px; }
/* The filters sit inside the card, not above it, so they read as narrowing THIS report. */
.ar-aitraffic .ar-log__filters { margin: 18px 0 22px; }
/* This row has four controls, not the request log's seven, so it wraps to two lines rather
   than three or four — and a wrapped line holding only "To" would let that date field grow
   to the full card width. The shared wrap rule zeroes the date basis along with everything
   else; here it must not. A date input has one right size, whatever room is going spare. */
/* Between the wrap breakpoint and the phone one, the shared bases are cut for seven fields
   and a full User-Agent. Four fields and a short path prefix fit one line at bases this
   size, so the row stays a row until the card is genuinely too narrow for it. */
@media (max-width: 1200px) and (min-width: 783px) {
  .ar-aitraffic .ar-log__field { flex: 1 1 130px; }
  .ar-aitraffic .ar-log__field--ua { flex: 1 1 170px; }
}
/* AFTER the rules above, and matching their specificity, so it wins on source order: a date
   input has one right size, whatever room is going spare. Otherwise a wrapped line holding
   only "To" lets it grow to the full card width. */
.ar-aitraffic .ar-log__field--date { flex: 0 1 150px; }
/* Says out loud what the numbers below are a slice of — a filtered card that looks exactly
   like an unfiltered one is how a reader mistakes a subset for the whole. */
.ar-ai__filternote {
  margin: 14px 0 0; font-size: 12.5px; color: var(--ar-ink-soft);
}
.ar-ai__filternote strong { color: var(--ar-ink); }

/* ---- Traffic from AI: per-day drill-down -------------------------------- */
.ar-aiday { margin: 0; padding: 0; list-style: none; display: grid; gap: 4px; }
.ar-aiday__row {
  display: grid; grid-template-columns: minmax(0, 1fr) 90px auto auto; align-items: center; gap: 12px;
  /* Bleed 8px each side (width + negative margin) so the hover highlight has breathing
     room past the content, while the padding keeps the resting content aligned as before. */
  width: calc(100% + 16px); margin: 0 -8px; padding: 6px 8px; border: 0; background: transparent;
  cursor: pointer; text-align: left; color: inherit;
  border-radius: 6px; transition: background-color 0.12s ease;
}
.ar-aiday__row:hover { background: #f4f0e6; }
.ar-aiday__row:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 6px; }
.ar-aiday__date { font-size: 13px; color: var(--ar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-aiday__n { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); text-align: right; min-width: 24px; }
.ar-aiday__chev { color: var(--ar-ink-faint); opacity: 0.7; transition: transform 0.2s ease, opacity 0.15s ease; }
.ar-aiday__row:hover .ar-aiday__chev { opacity: 1; color: var(--ar-ink-soft); }
.ar-aiday__chev.is-open { transform: rotate(180deg); }
/* min-width:0 at BOTH list levels. A grid item's default is min-width:auto — its
   min-content width — and here that is the un-wrappable <code> path, so the row simply
   refused to shrink: on a narrow card the path ran past the edge and pushed the hit count
   clean out of view. The path's own ellipsis can only bite once its ancestors may shrink. */
.ar-aiday__item { min-width: 0; }
.ar-aiday__detail {
  margin: 0 0 8px 2px; padding: 6px 0 2px 12px; list-style: none; display: grid; gap: 7px;
  border-left: 2px solid var(--ar-line);
  min-width: 0;
}
/* The same pairing rows inside the day-report dialog: the indent + left border
   belong to the inline expand-under-a-row layout, not to a modal body. */
.ar-aiday__detail--modal { margin: 0; padding: 2px 0 0; border-left: 0; gap: 9px; }
/* Flex (not grid): a grid item defaults to justify-self:stretch, which made the
   <code> path fill its column — and wp-admin's global code background then painted
   a full-width bar. Flex items size to content, so the path stays a small chip. */
.ar-aivis { display: flex; align-items: center; gap: 8px; font-size: 12.5px; padding: 1px 0; min-width: 0; }
.ar-aivis__src { flex: 0 0 auto; font-weight: 600; color: var(--ar-ink); white-space: nowrap; }
.ar-aivis__arr { flex: 0 0 auto; color: var(--ar-ink-faint); }
.ar-aivis__path {
  flex: 0 1 auto; min-width: 0; font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); padding: 1px 6px; border-radius: 3px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* The loading / error line inside an opened day, before its rows arrive. */
.ar-aivis--muted { color: var(--ar-ink-faint); font-size: 12px; gap: 10px; }
.ar-aivis__path.is-copyable { cursor: pointer; transition: background-color 0.12s ease; }
.ar-aivis__path.is-copyable:hover { background: #e6e4dd; }
.ar-aivis__n { margin-left: auto; flex: 0 0 auto; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); }
@media (prefers-reduced-motion: reduce) { .ar-aiday__chev { transition: opacity 0.15s ease; } }

/* Recent feed */
/* Capped, scrollable feed with a bottom fade cue (same pattern as the modal). */
/* Let the card and feed wrapper shrink below the table's min-width, so the scroll box (.ar-act-reqs)
   actually scrolls horizontally instead of the whole card stretching off-screen. A grid item's
   default min-width:auto refuses to shrink below its content — this overrides that down the chain. */
.ar-act .ar-card { min-width: 0; }
.ar-act-feedwrap { position: relative; margin: 14px 0 0; min-width: 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; overflow-x: 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;
}
/* Endpoint + owning-network chips share ONE grid cell (this wrapper), so turning on Identify
   never changes a row's column count — the UA / count / time columns stay aligned across every
   row, with a network or without. The endpoint truncates under pressure; the short network chip
   doesn't. */
/* Endpoint + network on ONE line (never wrap — wrapping made the cell size to just the widest
   chip and stack even with room to spare). Both shrink+truncate under real pressure; the UA fills
   whatever's left. So every row keeps all its columns, and the pair only ellipses when genuinely tight. */
.ar-act-feed__loc { display: flex; align-items: center; gap: 8px; min-width: 0; }
/* "from <network>" attribution chip (opt-in Identify mode), beside the endpoint. */
.ar-act-feed__net {
  flex: 0 1 auto; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  font-family: var(--ar-mono); font-size: 11px; color: var(--ar-accent);
  background: color-mix(in srgb, var(--ar-accent) 8%, transparent); padding: 2px 7px; border-radius: 3px;
}
.ar-act-feed__net-lbl { color: var(--ar-ink-faint); }
/* An unverified network is the visitor IP's self-declared reverse-DNS (PTR) name — not
   forward-confirmed, and possibly not even a reachable domain. Strip the accent (which
   here reads as "verified") back to neutral metadata and mark it, so it never passes for
   a trusted network or a site the visitor came from. Only forward-confirmed (verdict 1)
   networks keep the teal chip. */
.ar-act-feed__net.is-unverified {
  color: var(--ar-ink-soft); background: var(--ar-surface-2); cursor: help;
}
.ar-act-feed__net-mark {
  margin-left: 3px; font-size: 9px; font-weight: 600; vertical-align: super;
  color: var(--ar-ink-faint);
}
/* 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; }
}

/* Recent-requests table. A real table with a header row: the "Network" column is named once in
   the header instead of repeating "from" on every row, and the whole thing scrolls HORIZONTALLY
   inside its box on narrow screens — the table's min-width forces a real scroll rather than
   crushing columns to an ellipsis. The header sticks while the body scrolls vertically. */
.ar-act-table { width: 100%; min-width: 620px; border-collapse: collapse; }
.ar-act-table th, .ar-act-table td { padding: 9px 14px 9px 0; text-align: left; vertical-align: middle; white-space: nowrap; }
/* Real first/last-column insets: row washes (spoofed rows) made the old 2px edges
   visible — text sat pressed against the tint's edge. */
.ar-act-table th:first-child, .ar-act-table td:first-child { padding-left: 10px; }
.ar-act-table thead th {
  position: sticky; top: 0; z-index: 1; background: var(--ar-surface);
  font-family: var(--ar-sans); font-size: 11.5px; font-weight: 700; letter-spacing: 0.07em;
  text-transform: uppercase; color: var(--ar-ink-faint);
  padding-top: 9px; padding-bottom: 9px; border-bottom: 1px solid var(--ar-line-strong);
}
.ar-act-table tbody td { border-bottom: 1px solid var(--ar-line); }
.ar-act-table tbody tr:last-child td { border-bottom: 0; }
.ar-act-table__agent { font-size: 13px; font-weight: 500; color: var(--ar-ink); }
.ar-act-table__at { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }
.ar-act-table__dash { color: var(--ar-ink-faint); }
/* User-Agent column takes the slack and truncates; the custom tooltip (hover) reveals it in full. */
.ar-act-table td.ar-act-table__uacol { width: 100%; max-width: 0; overflow: hidden; text-overflow: ellipsis; }

/* ---- 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: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); border-color: color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface)); }
.ar-susp-kind.is-danger { color: var(--ar-bad); background: #f8ebe8; border-color: #e6c1b9; }
.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__ua.is-copyable { cursor: pointer; }
.ar-susp-row__ua.is-copyable:hover { color: var(--ar-ink-soft); }
.ar-susp-row__ua.is-empty { font-style: italic; }
.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 buttons — one per row, each a DISTINCT colour so the choice is
   scannable at a glance: Block (red) · Allow (green) · Check this bot (teal) · Ignore
   (grey). Sans, not mono, so a multi-word label like "Check this bot" reads tight. */
.ar-susp-block,
.ar-susp-allow,
.ar-susp-check-btn,
.ar-susp-ignore-btn {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--ar-sans); font-size: 12px; font-weight: 600; letter-spacing: 0;
  padding: 0; border: 0; background: none; margin: 0;
  transition: color 0.15s ease;
}
.ar-susp-block { color: var(--ar-bad); }        /* deny — red */
.ar-susp-allow { color: var(--ar-good); }       /* trust — green */
.ar-susp-check-btn { color: var(--ar-info); }   /* inspect — blue (distinct from Allow) */
.ar-susp-ignore-btn { color: var(--ar-ink-soft); } /* set aside — grey */
.ar-susp-block:hover,
.ar-susp-allow:hover,
.ar-susp-check-btn:hover,
.ar-susp-ignore-btn:hover { text-decoration: underline; }
.ar-susp-ignore-btn:hover { color: var(--ar-ink); }
.ar-susp-check-btn.is-on { text-decoration: underline; }
.ar-susp-block:focus-visible,
.ar-susp-allow:focus-visible,
.ar-susp-check-btn:focus-visible,
.ar-susp-ignore-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 2px; }
.ar-susp-block:disabled,
.ar-susp-allow:disabled,
.ar-susp-check-btn:disabled,
.ar-susp-ignore-btn: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 { margin: 0; font-size: 11px; font-style: italic; color: var(--ar-ink-faint); line-height: 1.45; }
/* A caught impersonator has no safe one-click action — its status line is a red alert,
   not a faint aside. */
.ar-susp-reason.is-alert { color: var(--ar-bad); font-style: normal; font-weight: 400; }

/* Action cell: an optional status line above a SINGLE row that holds every action —
   Block · Allow · Check this bot · Ignore — so they never split across two lines. */
.ar-susp-row__action { display: flex; flex-direction: column; gap: 7px; }
.ar__review-pop .ar-susp-row__action { align-items: flex-start; }
.ar-susp-row__buttons { display: flex; flex-flow: row wrap; align-items: baseline; column-gap: 16px; row-gap: 6px; }

/* "Check this bot" verdict card — spans the row, tinted by verdict tone. */
.ar-susp-check {
  grid-column: 1 / -1; margin-top: 2px;
  padding: 11px 13px; border-radius: var(--ar-radius);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line);
  border-left: 3px solid var(--ar-ink-faint);
  display: grid; gap: 6px;
}
.ar-susp-check.is-danger { border-left-color: var(--ar-bad); background: #f8ebe8; border-color: #e6c1b9; }
.ar-susp-check.is-warn { border-left-color: var(--ar-warn); }
.ar-susp-check.is-ok { border-left-color: var(--ar-good); }
.ar-susp-check.is-info { border-left-color: var(--ar-accent); }
.ar-susp-check__title { margin: 0; font-size: 12.5px; font-weight: 600; color: var(--ar-ink); }
.ar-susp-check.is-danger .ar-susp-check__title { color: var(--ar-bad); }
.ar-susp-check__detail { margin: 0; font-size: 12px; color: var(--ar-ink-soft); line-height: 1.5; }
.ar-susp-check__rec { margin: 0; font-size: 12px; color: var(--ar-ink); line-height: 1.5; }
.ar-susp-check__doclink {
  justify-self: start; font-size: 11.5px; color: var(--ar-accent); text-decoration: none; white-space: nowrap;
}
.ar-susp-check__doclink:hover { text-decoration: underline; }
.ar-susp-check__doclink.is-unverified { color: var(--ar-ink-soft); font-style: italic; }
.ar-susp-check__research { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; margin-top: 1px; }
.ar-susp-check__reslabel { font-size: 11px; color: var(--ar-ink-faint); }
.ar-susp-check__reslink { font-size: 11.5px; color: var(--ar-accent); text-decoration: none; white-space: nowrap; }
.ar-susp-check__reslink:hover { text-decoration: underline; }
.ar-susp-check__note {
  margin: 3px 0 0; padding-top: 7px; border-top: 1px dashed var(--ar-line);
  font-size: 11px; color: var(--ar-ink-faint); font-style: italic; line-height: 1.5;
}
.ar-susp-check__note .ar-linkbtn { font-style: normal; }

@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; }
}

/* ======================================================================
   Review queue (redesign) — honest, calm, inbox-style.
   Shows only real signals (verification verdict, identity, volume, novelty);
   never a fabricated trust %, ASN/IP breakdown, or "Block IP" button.
   ====================================================================== */
.ar-rev-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; }
.ar-rev-head__titles { display: flex; flex-direction: column; gap: 1px; }
.ar-rev-head__title { font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); line-height: 1.15; }
.ar-rev-head__sub { font-size: 12px; color: var(--ar-ink-faint); }

/* Segmented filter tabs. */
.ar-rev-tabs { display: flex; gap: 3px; margin: 14px 0 2px; padding: 3px; background: var(--ar-surface-2); border-radius: 9px; }
.ar-rev-tab {
  flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  appearance: none; cursor: pointer; border: 0; background: none; padding: 6px 8px; border-radius: 7px;
  font-family: var(--ar-sans); font-size: 12px; font-weight: 500; color: var(--ar-ink-soft);
  transition: background 0.15s ease, color 0.15s ease;
}
.ar-rev-tab:hover { color: var(--ar-ink); }
.ar-rev-tab:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-rev-tab.is-active { background: var(--ar-surface); color: var(--ar-ink); font-weight: 600; box-shadow: 0 1px 2px rgba(27, 25, 19, 0.09); }
.ar-rev-tab__n { font-size: 11px; color: var(--ar-ink-faint); font-variant-numeric: tabular-nums; }
.ar-rev-tab.is-active .ar-rev-tab__n { color: var(--ar-ink-soft); }
.ar-rev-tab.is-attention .ar-rev-tab__n { color: var(--ar-bad); }
.ar-rev-tab.is-attention.is-active { color: var(--ar-bad); }

.ar-rev-banner {
  margin: 12px 0 0; padding: 8px 11px; border-radius: 8px;
  background: #faf3e4; font-size: 11.5px; line-height: 1.5; color: var(--ar-ink-soft);
}

/* Items — an inbox, not a wall of cards: soft border + a severity accent on the left. */
.ar-rev-list { list-style: none; margin: 12px 0 0; padding: 0; display: flex; flex-direction: column; gap: 9px; }
.ar-rev-item {
  border: 1px solid var(--ar-line); border-left: 3px solid var(--ar-line-strong);
  border-radius: 10px; background: var(--ar-surface); padding: 12px 13px;
}
.ar-rev-item.is-danger { border-left-color: var(--ar-bad); border-color: #eccdc6; background: #fdf6f4; }
.ar-rev-item.is-warn { border-left-color: var(--ar-warn); }
.ar-rev-item.is-ok { border-left-color: var(--ar-good); }
.ar-rev-item.is-calm { border-left-color: var(--ar-line-strong); }

.ar-rev-item__main { display: flex; gap: 11px; align-items: flex-start; }
.ar-rev-avatar {
  flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center;
  background: var(--ar-surface-2); color: var(--ar-ink-soft); border: 1px solid var(--ar-line);
}
.ar-rev-avatar.is-danger { background: #f8e5e0; color: var(--ar-bad); border-color: #eccdc6; }
.ar-rev-avatar.is-warn { background: #f6eeda; color: var(--ar-warn); border-color: #e6d6b0; }
.ar-rev-avatar.is-ok { background: #e7f2ea; color: var(--ar-good); border-color: #c4ddca; }
.ar-rev-body { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 5px; }

.ar-rev-nameline { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.ar-rev-name { font-size: 14px; font-weight: 600; color: var(--ar-ink); }
.ar-rev-tag {
  font-family: var(--ar-mono); font-size: 9px; font-weight: 600; letter-spacing: 0.05em; text-transform: uppercase;
  padding: 2px 6px; border-radius: 4px; white-space: nowrap;
  color: var(--ar-ink-soft); background: var(--ar-surface-2); border: 1px solid var(--ar-line);
}
.ar-rev-tag.is-new { color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); border-color: color-mix(in srgb, var(--ar-accent) 28%, var(--ar-surface)); }
.ar-rev-tag.is-heavy { color: var(--ar-warn); background: #f7efdd; border-color: #e6d6ad; }

/* The hero: verification / identity state. */
.ar-rev-state { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 12.5px; font-weight: 600; color: var(--ar-ink-soft); }
.ar-rev-state.is-danger { color: var(--ar-bad); }
.ar-rev-state.is-warn { color: var(--ar-warn); }
.ar-rev-state.is-ok { color: var(--ar-good); }
.ar-rev-state__ic { flex: 0 0 auto; }
.ar-rev-state__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-accent); flex: 0 0 auto; }
.ar-rev-state__by { font-weight: 400; color: var(--ar-ink-soft); }
.ar-rev-state__note { font-weight: 400; font-style: italic; font-size: 11px; color: var(--ar-ink-faint); }

.ar-rev-why { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); }
.ar-rev-meta { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); }

.ar-rev-rec { margin-top: 2px; padding: 7px 10px; border-radius: 7px; font-size: 12px; line-height: 1.45; color: var(--ar-ink-soft); }
.ar-rev-rec strong { font-weight: 600; }
.ar-rev-rec.is-danger { background: #f8e9e5; color: #8c2f22; }
.ar-rev-rec.is-danger strong { color: var(--ar-bad); }

/* Actions — real decisions as buttons, utilities as quiet links. */
.ar-rev-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 12px; margin-top: 4px; }
/* Why a card has NO Allow/Block: the server's reason said out loud in the button
   row — missing buttons must read as a decision, not an oversight. Soft ink with
   a leading info glyph for noticeability: it stands in for two buttons, so it
   must be read, not skimmed past. */
.ar-rev-noact { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--ar-ink-soft); }
.ar-rev-noact__ic { flex: none; }
.ar-rev-btn {
  appearance: none; cursor: pointer; white-space: nowrap;
  font-family: var(--ar-sans); font-size: 12px; font-weight: 600;
  padding: 5px 13px; border-radius: 7px; border: 1px solid var(--ar-line-strong);
  background: var(--ar-surface); color: var(--ar-ink); transition: background 0.14s ease, border-color 0.14s ease;
}
.ar-rev-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }
.ar-rev-btn:disabled { opacity: 0.5; cursor: default; }
.ar-rev-btn--allow { color: var(--ar-good); border-color: #bcdcc6; }
.ar-rev-btn--allow:hover:not(:disabled) { background: #edf5ef; }
.ar-rev-btn--block { color: var(--ar-bad); border-color: #e6c1b9; }
.ar-rev-btn--block:hover:not(:disabled) { background: #f9ece9; }
.ar-rev-link {
  appearance: none; cursor: pointer; border: 0; background: none; padding: 0;
  font-family: var(--ar-sans); font-size: 12px; font-weight: 500; color: var(--ar-ink-soft);
  transition: color 0.14s ease;
}
.ar-rev-link:hover { color: var(--ar-ink); text-decoration: underline; }
.ar-rev-link:disabled { color: var(--ar-ink-faint); cursor: default; text-decoration: none; }
.ar-rev-link--details { color: var(--ar-info); }
.ar-rev-link--details.is-on { text-decoration: underline; }

/* Details panel — the honest evidence (verification + UA), collapsed by default. */
.ar-rev-details { margin-top: 11px; padding-top: 11px; border-top: 1px solid var(--ar-line); display: flex; flex-direction: column; gap: 8px; }
.ar-rev-kv { display: grid; grid-template-columns: 82px 1fr; gap: 10px; align-items: start; font-size: 12px; }
.ar-rev-kv__k { color: var(--ar-ink-faint); font-size: 11px; padding-top: 1px; }
.ar-rev-kv__v { color: var(--ar-ink); min-width: 0; }
.ar-rev-kv__v.is-danger { color: var(--ar-bad); font-weight: 600; }
.ar-rev-kv__v.is-ok { color: var(--ar-good); font-weight: 600; }
.ar-rev-kv__v.is-muted { color: var(--ar-ink-soft); }
.ar-rev-ua { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-soft); word-break: break-all; background: none; padding: 0; border: 0; }
.ar-rev-ua.is-copyable { cursor: pointer; }
.ar-rev-ua.is-copyable:hover { color: var(--ar-ink); }
.ar-rev-ua.is-empty { font-style: italic; color: var(--ar-ink-faint); }
.ar-rev-network { font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink); word-break: break-all; }
.ar-rev-network__note { font-family: var(--ar-sans); font-size: 11px; margin-left: 5px; }
.ar-rev-network__note.is-ok { color: var(--ar-good); }
.ar-rev-network__note.is-danger { color: var(--ar-bad); }
.ar-rev-network__note.is-muted { color: var(--ar-ink-faint); }
/* Captured flagged-client IPs — copyable mono chips. */
.ar-rev-ips { display: flex; flex-wrap: wrap; gap: 6px; }
.ar-rev-ip {
  appearance: none; cursor: pointer; font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink);
  padding: 2px 7px; border-radius: 5px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface-2);
  transition: background 0.12s ease, border-color 0.12s ease;
}
.ar-rev-ip:hover { background: #f1e7d7; border-color: var(--ar-ink-faint); }
.ar-rev-ip:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
/* Admin "Re-check" controls (Details) — a quiet inset block, not a primary action. */
.ar-rev-recheck { display: flex; flex-direction: column; gap: 7px; padding: 9px 10px; border-radius: 7px; background: var(--ar-surface-2); border: 1px solid var(--ar-line); }
.ar-rev-recheck__row { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; }
.ar-rev-recheck__btn {
  appearance: none; display: inline-flex; align-items: center; gap: 5px; cursor: pointer;
  font-family: var(--ar-sans); font-size: 11.5px; font-weight: 600; color: var(--ar-accent);
  padding: 4px 9px; border-radius: 6px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface);
  transition: background 0.12s ease, border-color 0.12s ease, color 0.12s ease;
}
.ar-rev-recheck__btn:hover:not(:disabled) { border-color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 7%, var(--ar-surface)); }
.ar-rev-recheck__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; }
.ar-rev-recheck__btn:disabled { opacity: 0.55; cursor: default; }
.ar-rev-recheck__ago { font-size: 11px; color: var(--ar-ink-faint); }
.ar-rev-recheck__ip { display: flex; gap: 6px; }
.ar-rev-recheck__input {
  flex: 1 1 auto; min-width: 0; font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink);
  padding: 4px 8px; border-radius: 6px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface);
}
.ar-rev-recheck__input:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 0; border-color: var(--ar-accent); }
.ar-rev-recheck__hint { margin: 0; font-size: 10.5px; line-height: 1.45; color: var(--ar-ink-faint); }
.ar-rev-recheck__result { margin: 0; font-size: 11.5px; font-weight: 600; line-height: 1.4; }
.ar-rev-recheck__result.is-ok { color: var(--ar-good); }
.ar-rev-recheck__result.is-danger { color: var(--ar-bad); }
.ar-rev-recheck__result.is-muted { color: var(--ar-ink-soft); font-weight: 500; }
.ar-rev-details__why { margin: 0; font-size: 12px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-rev-details__research { display: flex; align-items: baseline; flex-wrap: wrap; gap: 10px; }
.ar-rev-details__reslabel { font-size: 11px; color: var(--ar-ink-faint); }
.ar-rev-details__reslink { font-size: 11.5px; color: var(--ar-info); text-decoration: none; white-space: nowrap; }
.ar-rev-details__reslink:hover { text-decoration: underline; }
.ar-rev-details__note { margin: 2px 0 0; padding-top: 7px; border-top: 1px dashed var(--ar-line); font-size: 11px; font-style: italic; line-height: 1.5; color: var(--ar-ink-faint); }
.ar-rev-details__note .ar-linkbtn { font-style: normal; }

.ar-rev-empty { margin: 14px 0 4px; font-size: 13px; color: var(--ar-ink-soft); text-align: center; }

/* Pinned footer: sticky at the pop's bottom edge, so the "why New rows leave" note and
   the client-manager link never scroll away with the list. Full-bleed over the pop's
   16px/18px padding (the negative margins mirror it; the -16px bottom swallows the
   pop's own padding so rest and stuck positions are both flush — no jump), with an
   opaque surface so list items slide under it, not through it. */
.ar-rev-foot {
  flex: 0 0 auto; padding: 9px 18px 12px;
  background: var(--ar-surface); border-top: 1px solid var(--ar-line-strong);
  /* Lift it off the rows scrolling past above — the border alone gets lost against
     a card edge stopping right at it. */
  box-shadow: 0 -8px 14px -10px rgba(27, 25, 19, 0.28);
  display: flex; flex-direction: column; gap: 4px; align-items: flex-end;
}
.ar-rev-foot__note {
  margin: 0; align-self: stretch;
  font-size: 11px; line-height: 1.55; color: var(--ar-ink-faint);
}
.ar-rev-foot__manage { font-size: 11.5px; }

/* ---- 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; }
}

/* Advanced / Authenticated API ------------------------------------- */
.ar-adv__toggle { width: 100%; background: none; border: 0; padding: 0; cursor: pointer; text-align: left; color: inherit; font: inherit; }
.ar-adv__toggle:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: var(--ar-radius); }
.ar-adv__chev { flex: 0 0 auto; color: var(--ar-ink-faint); transition: transform 0.18s ease; }
.ar-adv__chev.is-open { transform: rotate(180deg); }
.ar-adv__body { margin-top: 18px; border-top: 1px solid var(--ar-line); padding-top: 18px; }
.ar-adv__title { font-family: var(--ar-serif); font-size: 16px; font-weight: 600; margin: 0 0 8px; }
.ar-oauth { display: flex; gap: 8px; align-items: stretch; }
.ar-oauth .ar-input { flex: 1 1 auto; min-width: 0; } /* min-width:0 lets the field shrink below its intrinsic size on narrow screens */
.ar-oauth__check { flex: 0 0 auto; }
.ar-oauth__msg { font-size: 12.5px; line-height: 1.5; margin-top: 8px; overflow-wrap: anywhere; } /* break the long /.well-known/… token instead of overflowing */
/* The hint embeds a long, space-free URL path — let it wrap on mobile. */
.ar-adv__body .ar-field__hint, .ar-adv__body .ar-field__hint code { overflow-wrap: anywhere; }
.ar-oauth__msg.is-ok { color: var(--ar-good); }
.ar-oauth__msg.is-bad { color: var(--ar-bad); }
.ar-oauth__msg.is-info { color: var(--ar-ink-soft); }

@media (prefers-reduced-motion: reduce) {
  .ar-adv__chev { transition: none !important; }
}

/* Manage-setup block (Setup guide + Reset, grouped) ---------------- */
.ar-manage { display: flex; flex-direction: column; gap: 18px; }
.ar-manage__sep { border: 0; border-top: 1px solid var(--ar-line); margin: 0; width: 100%; }
.ar-manage .ar-btn { min-width: 160px; } /* equal-width action buttons, sized to the longer "Review setup" label */
.ar-reset__text em { font-style: normal; font-weight: 600; color: var(--ar-ink-soft); }

/* ======================================================================
   About tab — capabilities, transparency, protocol, FAQ
   ====================================================================== */
.ar-about { display: grid; gap: 22px; min-width: 0; }

/* Features list */
.ar-about-feat { margin-top: 22px; }
.ar-about-feat:first-of-type { margin-top: 6px; }
.ar-about-feat__head { margin-bottom: 8px; }
.ar-about-feat__title {
  margin: 0; font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.12em;
  text-transform: uppercase; color: var(--ar-ink);
}
.ar-about-feat__lead { margin: 3px 0 0; font-size: 12.5px; color: var(--ar-ink-faint); }
.ar-about-list { margin: 0; padding: 0; list-style: none; border-top: 1px solid var(--ar-line); }
/* The tag pill lives in the title cluster (name · where · tag), not exiled to the row's
   far edge — space-between left it orphaned across a wide dead middle. */
.ar-about-item {
  padding: 12px 2px; border-bottom: 1px solid var(--ar-line);
}
.ar-about-item__main { min-width: 0; }
.ar-about-item__top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 10px; }
.ar-about-item__name { font-size: 13.5px; font-weight: 600; color: var(--ar-ink); }
.ar-about-item__where {
  font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: 3px; padding: 1px 6px;
  overflow-wrap: anywhere;
}
/* Same set-page dress as the screens manual — full card width, justified,
   hyphenated — so the two halves of the page read as one document (the old
   80ch cap left these as a narrow ragged column beside full-width intros). */
.ar-about-item__desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); text-align: justify; hyphens: auto; -webkit-hyphens: auto; }
.ar-about-tag {
  flex: 0 0 auto; font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em; text-transform: uppercase;
  padding: 3px 8px; border-radius: 999px; border: 1px solid var(--ar-line-strong); color: var(--ar-ink-faint);
  white-space: nowrap;
}
.ar-about-tag.is-on { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; }

/* Privacy & data */
.ar-about-priv__grid { display: grid; gap: 14px; margin-top: 4px; }
.ar-about-priv__cell {
  padding: 16px 18px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: var(--ar-surface-2);
}
.ar-about-priv__cell h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--ar-ink); }
.ar-about-priv__cell p { margin: 0; font-size: 12.5px; line-height: 1.6; color: var(--ar-ink-soft); }
.ar-about-priv__cell--head {
  display: flex; gap: 14px; align-items: flex-start; background: var(--ar-ink); border-color: var(--ar-ink);
}
.ar-about-priv__cell--head h3 { color: var(--ar-paper); }
.ar-about-priv__cell--head p { color: rgba(243, 240, 231, 0.72); }
.ar-about-priv__cell--head .ar-linkbtn { color: #57b6a6; }
.ar-about-priv__icon {
  flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%; color: #5cc08a; background: rgba(92, 192, 138, 0.14);
}
.ar-about-not { margin: 10px 0 0; padding: 0; list-style: none; display: grid; gap: 5px; }
.ar-about-not li { position: relative; padding-left: 20px; font-size: 12px; color: var(--ar-ink-soft); }
.ar-about-not li::before {
  content: "\2715"; position: absolute; left: 2px; top: 0; color: var(--ar-bad); font-size: 11px; font-weight: 700;
}
.ar-about-priv__foot { margin-top: 12px !important; font-size: 12px !important; color: var(--ar-ink-faint) !important; }

/* WP_Discovery protocol */
.ar-about-chips { display: flex; flex-wrap: wrap; gap: 7px; margin: 0 0 18px; padding: 0; list-style: none; }
.ar-about-chip {
  font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.03em; color: var(--ar-ink-soft);
  padding: 4px 9px; border: 1px solid var(--ar-line-strong); border-radius: 999px; background: var(--ar-surface-2);
}
.ar-about-proto__meta {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 1px; margin: 0 0 22px;
  background: var(--ar-line); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); overflow: hidden;
}
.ar-about-proto__fact { display: flex; flex-direction: column; gap: 4px; padding: 13px 15px; background: var(--ar-surface); }
.ar-about-proto__k {
  font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint);
}
.ar-about-proto__v { font-size: 13px; color: var(--ar-ink); }
a.ar-about-proto__v { color: var(--ar-accent); text-decoration: none; }
a.ar-about-proto__v:hover { text-decoration: underline; }
.ar-about-proto__dev h3 { margin: 0 0 6px; font-size: 13.5px; color: var(--ar-ink); }
.ar-about-proto__dev p { margin: 0 0 12px; font-size: 12.5px; line-height: 1.6; color: var(--ar-ink-soft); max-width: 80ch; }
.ar-about-snippet {
  margin: 0; padding: 14px 16px; overflow-x: auto; border-radius: var(--ar-radius);
  background: var(--ar-ink); color: #e9e4d6; font-family: var(--ar-mono); font-size: 12px; line-height: 1.55;
}
.ar-about-snippet code { color: inherit; background: none; padding: 0; border: 0; }

/* FAQ accordion */
.ar-about-faq { margin: 0; padding: 0; list-style: none; }
.ar-about-faq__item { border-bottom: 1px solid var(--ar-line); }
.ar-about-faq__item:first-child { border-top: 1px solid var(--ar-line); }
.ar-about-faq__q {
  appearance: none; width: 100%; background: none; border: 0; cursor: pointer; text-align: left;
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  padding: 14px 2px; font-size: 13.5px; font-weight: 600; color: var(--ar-ink); font-family: var(--ar-sans);
}
.ar-about-faq__q:hover { color: var(--ar-accent); }
.ar-about-faq__caret { flex: 0 0 auto; color: var(--ar-ink-faint); transition: transform 0.15s ease; }
.ar-about-faq__item.is-open .ar-about-faq__caret { transform: rotate(90deg); color: var(--ar-accent); }
.ar-about-faq__a { margin: 0 0 14px; padding-right: 28px; font-size: 12.5px; line-height: 1.65; color: var(--ar-ink-soft); max-width: 90ch; }

@media (prefers-reduced-motion: reduce) { .ar-about-faq__caret { transition: none; } }
@media (max-width: 600px) {
  .ar-about-proto__meta { grid-template-columns: 1fr; }
}

/* Letterpress (debossed) | separator in the admin-footer version line
   ("Agentimus - x | WordPress - y"). Surface-adaptive on purpose: a translucent white
   catch beneath the glyph plus a translucent dark lip above make it read as pressed-in
   on ANY footer surface — the white shows on the light default admin, the dark lip gives
   depth if a dark-mode scheme/plugin darkens it. No prefers-color-scheme query, because
   WP keeps the footer light even under an OS dark preference, so keying off it would
   misfire. Lives on core's #wpfooter (rendered by PHP), loaded alongside this stylesheet
   on our screen. */
#wpfooter .agentimus-footer-sep {
  color: #9a9ea4;
  text-shadow: 0 1px 0 rgba(255, 255, 255, 0.55), 0 -1px 0 rgba(0, 0, 0, 0.28);
  margin: 0 5px;
}

/* Footer text: size + tracking so both footer lines sit evenly around the separator. */
#wpfooter p {
  font-size: 13px;
  margin: 0;
  line-height: 1.55;
  letter-spacing: 0.09em;
}

/* ---- Request log ---------------------------------------------------------
   The per-request view. Reuses .ar-act-table/.ar-act-reqs from the activity
   feed so a row looks identical in both places; only the filter bar, the
   pivot affordance and the pager are new. */

/* A grid item's default min-width:auto is its CONTENT's minimum, so a wide table
   of nowrap User-Agents blows the column open and slides under the rail. .ar__main
   already sets min-width:0 on itself; each child has to opt in too (see .ar-act). */
.ar-log { min-width: 0; }
.ar-log .ar-card__head { margin-bottom: 18px; }

/* The activity feed caps its table at 340px because it's one card among many. This is a
   page whose whole job is the table: let it run its full height and scroll the page. */
.ar-log .ar-act-reqs { max-height: none; }

/* A full User-Agent is ~120 chars and pushes the table past the column, which shoves
   "Seen" — the column you actually scan — off the right edge behind a horizontal
   scrollbar. Truncate it; the full string stays in the title attribute. */
.ar-log .ar-act-feed__ua {
  display: inline-block; max-width: 46ch; vertical-align: middle;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.ar-log .ar-act-table { min-width: 0; }
.ar-log .ar-act-table td:last-child, .ar-log .ar-act-table th:last-child { text-align: right; padding-right: 10px; width: 24ch; min-width: 24ch; }

.ar-log__filters {
  padding: 14px 16px; margin-bottom: 18px;
  /* A half-step tint: full surface-2 read too heavy as a band across the card. */
  background: color-mix(in srgb, var(--ar-surface-2) 45%, var(--ar-surface));
  border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
}
/* One line of controls. Every field is flex:1 with min-width:0 so they compress together
   rather than the last one wrapping alone; the User-Agent box takes the slack because it
   holds the longest value, and the two dates size to their own picker. */
.ar-log__row { display: flex; flex-wrap: nowrap; gap: 10px; align-items: flex-end; }
.ar-log__field { display: flex; flex-direction: column; gap: 5px; flex: 1 1 0; min-width: 0; }
.ar-log__field--ua { flex: 1.5 1 0; }
/* `0 1 138px` not `0 0 auto`: a rigid basis leaves sub-pixel flex remainders nowhere to go
   and the row overflows its container by a pixel. */
.ar-log__field--date { flex: 0 1 138px; }
.ar-log__label {
  font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.09em;
  text-transform: uppercase; color: var(--ar-ink-faint); white-space: nowrap;
  overflow: hidden; text-overflow: ellipsis;
}
/* A SelectMenu trigger is a button (it grows for its caret); the others are inputs. Pin one
   height so the row's bottoms — and therefore its labels — line up. */
/* WP admin's forms.css pins `min-height: 40px` on inputs, which outranks any height we set
   on them — so the SelectMenu's <button> trigger was 38px and the inputs 40px, and the
   labels above drifted 2px out of line. Adopt core's 40 rather than fight it. */
.ar-log__field .ar-input { box-sizing: border-box; height: 40px; padding: 0 10px; font-size: 13px; }
.ar-log__field--date .ar-input { font-family: var(--ar-mono); font-size: 12px; }

/* A dropdown's trigger is as wide as its longest option ("Bytespider (ByteDance)") because
   the value is nowrap. In a flex row that intrinsic minimum props every other control open
   and the line overflows. Let the trigger shrink and ellipsis its own label instead. */
.ar-log__field .ar-select, .ar-log__field .ar-select__btn { min-width: 0; }
.ar-log__field .ar-select__value {
  display: block; min-width: 0;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}

.ar-log__actions { display: flex; gap: 10px; justify-content: flex-end; margin-top: 14px; }
.ar-log__actions .ar-btn { padding: 9px 22px; }

/* A cell that filters the log onto its own value. Styled as text, not a button —
   the affordance is the underline on hover, so the table stays a table. */
.ar-log__pivot {
  appearance: none; background: none; border: 0; padding: 0; cursor: pointer;
  font: inherit; color: inherit; text-align: left;
  border-bottom: 1px solid transparent;
}
.ar-log__pivot:hover { border-bottom-color: var(--ar-accent); }
.ar-log__pivot:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; }

/* Identity/outcome marks live in their own narrow column, so every mark starts
   at the same x down the whole table instead of drifting after each client
   name. Slim by design: one short word, hairline border, no fill — the table is
   scanned, and a row of loud chips is harder to read than a quiet column. */
.ar-log__statuscol { width: 92px; white-space: nowrap; }
.ar-log__mark {
  display: block; width: max-content; padding: 0 5px; border-radius: 3px;
  font-family: var(--ar-mono); font-size: 9.5px; line-height: 16px; letter-spacing: 0.06em;
  text-transform: uppercase; cursor: help;
}
/* One mark per row by design; a row with nothing to say shows a dash, the
   same way the Network column does, so the column never looks broken. */
/* "unchecked" / "unknown" are answers too, so they get a word like every other
   row — but the quietest one on the screen: no border, muted ink, and a dotted
   underline that says "there's more if you want it" without competing with the
   verdicts around it. */
.ar-log__mark.is-none {
  color: var(--ar-ink-soft); border: 1px solid transparent;
  border-bottom: 1px dotted var(--ar-line-strong); border-radius: 0;
  padding: 0; opacity: 0.85;
}
.ar-log__mark.is-none:hover { opacity: 1; border-bottom-color: var(--ar-accent); }
.ar-log__mark.is-verified { color: color-mix(in srgb, var(--ar-good) 80%, var(--ar-ink-soft)); border: 1px solid color-mix(in srgb, var(--ar-good) 38%, var(--ar-line)); }
.ar-log__mark.is-spoofed  { color: color-mix(in srgb, var(--ar-bad) 85%, var(--ar-ink-soft));  border: 1px solid color-mix(in srgb, var(--ar-bad) 38%, var(--ar-line)); }
/* Proof outranks inference, so a signature-backed mark gets a faint wash — still
   quiet, but distinguishable from a DNS-based verdict at a glance. */
.ar-log__mark.is-verified.is-signed { background: color-mix(in srgb, var(--ar-good) 10%, transparent); border-color: color-mix(in srgb, var(--ar-good) 50%, var(--ar-line)); }
.ar-log__mark.is-spoofed.is-signed  { background: color-mix(in srgb, var(--ar-bad) 10%, transparent);  border-color: color-mix(in srgb, var(--ar-bad) 50%, var(--ar-line)); }
/* "Refused" is an OUTCOME, not one more verification state — the only solid mark
   in the column, so it reads as different in kind, not merely in colour. */
.ar-log__mark.is-refused {
  color: var(--ar-paper); background: color-mix(in srgb, var(--ar-bad) 82%, var(--ar-ink));
  border: 1px solid transparent;
}
.ar-act-table tr.is-refused td { opacity: 0.72; }
.ar-act-table tr.is-spoofed td { background: color-mix(in srgb, var(--ar-bad) 5%, transparent); }

/* Small screens, everywhere a request table wears the --cards modifier (the
   Request Log and the dashboard's Recent Requests): each row re-stacks as a
   card in the Agent Access idiom — bordered, rounded, a quiet label in front
   of every value — instead of scrolling sideways. */
@media (max-width: 782px) {
  .ar-log .ar-act-reqs, .ar-act-reqs:has(.ar-act-table--cards) { border-top: 0; padding-right: 0; max-height: 60vh; }
  .ar-act-table.ar-act-table--cards { min-width: 0; display: block; }
  .ar-act-table.ar-act-table--cards tbody tr, .ar-act-table.ar-act-table--cards tbody td { display: block; }
  .ar-act-table.ar-act-table--cards thead { display: none; }
  .ar-act-table.ar-act-table--cards tbody { display: flex; flex-direction: column; gap: 8px; }
  /* Each row re-seats as the edge card's anatomy: identity + a right-corner
     capsule on the header line, labeled facts below, the timestamp as a
     ruled-off footer. Orders do the seating — the wide table keeps its DOM. */
  .ar-act-table.ar-act-table--cards tbody tr {
    display: flex; flex-wrap: wrap; align-items: flex-start; gap: 10px 12px;
    padding: 12px 14px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
    background: var(--ar-surface);
  }
  .ar-act-table.ar-act-table--cards tbody td {
    display: flex; flex-direction: column; align-items: flex-start; gap: 3px;
    padding: 0; margin: 0; border: 0; white-space: normal; min-width: 0;
  }
  /* Header: the client leads and the moment sits in the right corner — no
     footer row, the corner was already paid for (his mock B). The 1px
     ::before item is both the line break after the header and the hairline
     that rules it off. */
  .ar-act-table.ar-act-table--cards tbody tr::before { content: ""; order: 3; width: 100%; height: 1px; background: var(--ar-line); }
  /* Content-width, not greedy: the status word must land right beside the
     name, and the date's auto margin claims whatever is left. */
  /* The name ELLIPSIZES rather than pushing the date off the header row — a
     wrapped, right-floating date reads as a layout accident. Full identity
     still lives in the UA box below. */
  .ar-act-table.ar-act-table--cards tbody td:first-child {
    order: 1; flex: 0 1 auto; min-width: 0; padding-left: 0;
    display: block; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .ar-act-table.ar-act-table--cards tbody td.ar-log__seen,
  .ar-act-table.ar-act-table--cards tbody td.ar-act-table__at {
    order: 2; flex: 0 0 auto; flex-direction: row; align-items: center; gap: 6px;
    font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint);
  }
  .ar-act-table.ar-act-table--cards tbody td.ar-log__seen { margin-left: auto; }
  /* Log cards carry name + status + date — at phone width that trio can never
     share a line (wrapping flex rows wrap before they shrink), and a date
     wrapped to a right-floating line reads as an accident. Rows WITH a status
     (the log) seat the date as a deliberate left byline under the name; the
     dashboard feed (no status) keeps its corner date, which fits. */
  .ar-act-table.ar-act-table--cards tbody tr:has(td.ar-log__statuscol) td.ar-log__seen {
    margin-left: 0; flex: 1 1 100%;
  }
  .ar-act-table.ar-act-table--cards tbody td[data-label="Hits"] { order: 2; margin-left: auto; flex: 0 0 auto; }
  .ar-act-table.ar-act-table--cards tbody tr:has(td[data-label="Hits"].is-empty-cell) td.ar-act-table__at { margin-left: auto; }
  /* Facts: icon-anchored slots — glyph left, label over value right, a seam
     before every slot after the first. The log leads with Status, the
     dashboard feed with Network; Endpoint takes the remaining width. */
  .ar-act-table.ar-act-table--cards tbody td[data-label="Endpoint"],
  .ar-act-table.ar-act-table--cards tbody td[data-label="Network"] {
    /* Fixed icon column + 1fr: excess width must pool AFTER the value —
       "auto auto" tracks both stretch under normal alignment and float the
       label away from its glyph. */
    display: grid; grid-template-columns: 17px minmax(0, 1fr);
    column-gap: 9px; row-gap: 4px; align-items: center; justify-items: start;
    flex: 0 1 auto; margin-left: 0; text-align: left;
  }
  .ar-act-table.ar-act-table--cards tbody td[data-label="Network"] { order: 5; }
  .ar-act-table.ar-act-table--cards tbody td[data-label="Endpoint"] { order: 6; flex: 1 1 auto; }
  .ar-act-table.ar-act-table--cards tbody tr:has(td[data-label="Network"]) td[data-label="Endpoint"] {
    border-left: 1px solid var(--ar-line); padding-left: 12px;
  }
  /* Status rides the header, right after the name: a plain verdict word in its
     own color — no capsule, no icon, no slot (his call). The td's ::before
     becomes the joining dash. */
  .ar-act-table.ar-act-table--cards tbody td.ar-log__statuscol {
    order: 1; display: flex; flex-direction: row; align-items: baseline; gap: 7px;
    flex: 0 0 auto;
  }
  .ar-act-table.ar-act-table--cards tbody td.ar-log__statuscol::before {
    content: "–"; display: block; color: var(--ar-ink-faint); font-size: 13px;
  }
  .ar-act-table.ar-act-table--cards td.ar-log__statuscol .ar-cardico { display: none; }
  .ar-act-table.ar-act-table--cards td.ar-log__statuscol .ar-log__mark {
    border: 0; background: none; padding: 0; font-size: 12px;
    letter-spacing: 0.04em; text-transform: none; line-height: inherit; cursor: default;
  }
  .ar-act-table.ar-act-table--cards td.ar-log__statuscol .ar-log__mark.is-none { color: var(--ar-warn); opacity: 1; }
  .ar-act-table.ar-act-table--cards td.ar-log__statuscol .ar-log__mark.is-refused { color: var(--ar-bad); }
  .ar-act-table.ar-act-table--cards tbody td[data-label="Endpoint"]::before,
  .ar-act-table.ar-act-table--cards tbody td[data-label="Network"]::before { grid-row: 1; grid-column: 2; }
  .ar-act-table.ar-act-table--cards .ar-cardico {
    display: block; grid-row: 1 / 3; grid-column: 1; width: 17px; height: 17px;
    fill: none; stroke: currentColor; stroke-width: 1.6; color: var(--ar-ink-soft);
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ar-act-table.ar-act-table--cards td[data-label="Endpoint"] .ar-log__pivot,
  .ar-act-table.ar-act-table--cards td[data-label="Endpoint"] > .ar-act-feed__ep,
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-act-feed__net,
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-log__mark,
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-act-table__dash {
    grid-row: 2; grid-column: 2;
  }
  /* The network value wears the endpoint chip's dress — "unknown" included, as
     a plain quiet word: a dotted hover-underline means nothing to a thumb. */
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-act-feed__net,
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-log__mark,
  .ar-act-table.ar-act-table--cards td[data-label="Network"] .ar-act-table__dash {
    display: inline-block; font-family: var(--ar-mono); font-size: 11.5px;
    line-height: 1.6; letter-spacing: 0; text-transform: none; color: var(--ar-ink-soft);
    background: var(--ar-surface-2); padding: 2px 8px; border: 0; border-radius: 3px;
    opacity: 1; cursor: default;
  }
  /* The UA cell IS the box: label inside at the top-left, the string below —
     one object, label included. The code chip sheds its own dress for it. */
  .ar-act-table.ar-act-table--cards tbody td[data-label="User-Agent"] {
    order: 7; flex: 1 1 100%; gap: 4px; padding: 8px 10px;
    background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: 8px;
  }
  /* Outranks the spoofed row's td-background reset — the box stays a box. */
  .ar-act-table.ar-act-table--cards tbody tr.is-spoofed td[data-label="User-Agent"] { background: var(--ar-surface-2); }
  /* Pinned column widths and right alignment belong to the wide table — inside
     a card they squeeze values into word-per-line wraps. Undo them here. */
  .ar-act-table.ar-act-table--cards tbody td:last-child { width: auto; min-width: 0; text-align: left; padding-right: 0; }
  .ar-act-table.ar-act-table--cards tbody td.ar-act-table__uacol { width: auto; max-width: none; overflow: visible; }
  /* The edge crawler cards: identity left; a dashed TOTAL badge (glyph beside
     the big count) and the bytes pill share the top-right; a hairline rules
     off the header; the three funnel facts sit centered in equal thirds below.
     Flex + order does the seating — the bytes td renders after the facts in
     DOM (the wide table's column order), order pulls it into the header line,
     and the ::after hairline is a full-width item that forces the wrap. */
  .ar-edge .ar-act-table--cards tbody tr {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 12px 10px; padding: 14px 16px;
  }
  /* The generic card's header/facts line break sits at order 3 — here that
     seat belongs to the bytes pill, and the ::after hairline breaks the line. */
  .ar-edge .ar-act-table--cards tbody tr::before { content: none; }
  .ar-edge .ar-act-table--cards tbody tr::after {
    content: ""; order: 4; width: 100%; height: 1px; background: var(--ar-line);
  }
  .ar-edge .ar-act-table--cards tbody td { margin-top: 0; }
  .ar-edge .ar-act-table--cards tbody td.ar-edge__crawler { order: 1; flex: 1 1 120px; min-width: 0; font-weight: 500; }
  .ar-edge .ar-act-table--cards tbody td.ar-edge__crawler::before { display: none; }
  /* Identity stacks: bold name, quiet operator beneath — the joining dash is a
     wide-table word; a stack doesn't need it. */
  .ar-edge .ar-act-table--cards .ar-edge__op { display: block; margin-top: 1px; }
  .ar-edge .ar-act-table--cards .ar-edge__dash { display: none; }
  /* Hairline between the bottom fact slots, echoing the summary strip's cell
     seams. Total (header badge) neither wears nor causes one. */
  .ar-edge .ar-act-table--cards tbody td.ar-edge__n:not([data-label="Total"]) + td.ar-edge__n:not([data-label="Data"]) {
    border-left: 1px solid var(--ar-line);
  }
  .ar-edge .ar-act-table--cards tbody td.ar-edge__n {
    order: 5; flex: 1 1 0; min-width: 0;
    flex-direction: column; align-items: center; gap: 6px;
    font-size: 18px; text-align: center; padding-right: 0 !important;
  }
  /* Slot order: chip, number, label — the label renders via ::before, so order
     properties place it last. */
  .ar-edge .ar-act-table--cards .ar-edge__ico {
    display: block; order: 1; width: 30px; height: 30px; padding: 7px;
    border: 1px solid var(--ar-line); border-radius: 9px;
    background: var(--ar-surface-2); color: var(--ar-ink-soft);
    fill: none; stroke: currentColor; stroke-width: 1.7;
    stroke-linecap: round; stroke-linejoin: round;
  }
  .ar-edge .ar-act-table--cards .ar-edge__v { order: 2; }
  .ar-edge .ar-act-table--cards tbody td.ar-edge__n::before {
    order: 3; width: auto; font-family: var(--ar-mono); font-size: 9.5px;
    font-weight: 400; letter-spacing: 0.08em; text-transform: uppercase;
    color: var(--ar-ink-faint);
  }
  /* Blocked with a count: the chip and the number warm up together — the ONLY
     color in the card row, so it stays an alarm. The label keeps quiet. */
  .ar-edge .ar-act-table--cards tbody td.ar-edge__n.is-bad .ar-edge__ico {
    color: var(--ar-bad);
    border-color: color-mix(in srgb, var(--ar-bad) 28%, var(--ar-line));
    background: color-mix(in srgb, var(--ar-bad) 6%, var(--ar-surface));
  }
  /* Total is the headline, not a funnel stage: a slim dashed capsule in the
     header — glyph, count, quiet TOTAL label on one line. Slot order comes
     free: glyph 1, value 2, ::before label 3. The bytes pill is its solid
     twin — same height, same radius, so the pair reads as one family. */
  .ar-edge .ar-act-table--cards tbody td[data-label="Total"] {
    order: 2; margin-left: auto; flex: 0 0 auto;
    flex-direction: row; align-items: center; gap: 7px;
    height: 28px; padding: 0 12px; padding-right: 12px !important;
    border: 1px dashed var(--ar-line-strong); border-radius: 999px;
    font-size: 14px;
  }
  .ar-edge .ar-act-table--cards tbody td[data-label="Total"] .ar-edge__ico { display: none; }
  /* Bytes: value only, wearing the card-tag pill dress beside the badge —
     "20.5 MB" explains itself. */
  .ar-edge .ar-act-table--cards tbody td[data-label="Data"] {
    order: 3; flex: 0 0 auto;
    flex-direction: row; align-items: center; font-size: 14px; color: var(--ar-ink-soft);
    white-space: nowrap; height: 28px; padding: 0 11px; padding-right: 11px !important;
    border: 1px solid var(--ar-line); border-radius: 999px;
    background: var(--ar-surface-2);
  }
  .ar-edge .ar-act-table--cards tbody td[data-label="Data"]::before { display: none; }
  .ar-act-table.ar-act-table--cards tbody td::before {
    content: attr(data-label); flex: 0 0 auto;
    font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.08em;
    text-transform: uppercase; color: var(--ar-ink-faint);
  }
  /* Self-explanatory cells carry no label: the name IS the header, ×3 and a
     date read alone. Status keeps its label — his mock names every fact. */
  .ar-act-table.ar-act-table--cards tbody td:first-child::before,
  .ar-act-table.ar-act-table--cards tbody td[data-label="Hits"]::before,
  .ar-act-table.ar-act-table--cards tbody td.ar-log__seen::before,
  .ar-act-table.ar-act-table--cards tbody td.ar-act-table__at::before { display: none; }
  /* A one-hit row has nothing to say under "Hits" — drop the empty line. */
  .ar-act-table.ar-act-table--cards tbody td.is-empty-cell { display: none; }
  .ar-act-table.ar-act-table--cards tbody tr.is-spoofed td { background: none; }
  .ar-act-table.ar-act-table--cards tbody tr.is-spoofed { background: color-mix(in srgb, var(--ar-bad) 5%, var(--ar-surface)); }
  .ar-act-table.ar-act-table--cards tbody tr.is-refused { border-left: 2px solid var(--ar-warn); }
  /* Long strings wrap inside the card instead of forcing it wide. */
  /* The UA string wears a quiet code box — the card's one long string reads as
     one object, and a click still copies it (the cell's existing contract). */
  .ar-act-table.ar-act-table--cards .ar-act-feed__ua {
    white-space: normal; word-break: break-all;
    display: block; width: 100%; max-width: none; padding: 0;
    background: none; border: 0; border-radius: 0;
  }
  /* Break at word seams first, mid-word only as a last resort. */
  .ar-act-table.ar-act-table--cards .ar-act-feed__ep { white-space: normal; word-break: normal; overflow-wrap: anywhere; }
  .ar-act-table.ar-act-table--cards .ar-log__pivot { text-align: left; }
}

/* Phone-narrow containers: the fact slots can't share a line anyway, so they
   stack as clean full-width rows — a wrapped slot dragging its seam border to
   a line start read as a stray mark (iPhone-width finding). */
@container (max-width: 430px) {
  .ar-act-table.ar-act-table--cards tbody td[data-label="Endpoint"],
  .ar-act-table.ar-act-table--cards tbody td[data-label="Network"] { flex: 1 1 100%; }
  .ar-act-table.ar-act-table--cards tbody tr:has(td[data-label="Network"]) td[data-label="Endpoint"] {
    border-left: 0; padding-left: 0;
  }
}

.ar-log__seen { color: var(--ar-ink-faint); font-family: var(--ar-mono); font-size: 11px; letter-spacing: -0.02em; white-space: nowrap; cursor: help; font-variant-numeric: tabular-nums; }

.ar-log__empty, .ar-log__error {
  padding: 28px 0; color: var(--ar-ink-soft); font-size: 13px; text-align: center;
}
.ar-log__error { color: var(--ar-bad); text-align: left; }

.ar-log__foot {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin-top: 16px;
}
.ar-log__count { margin: 0; font-size: 13px; color: var(--ar-ink-soft); }
.ar-log__pager { display: flex; gap: 10px; }
.ar-log__pager .ar-btn { padding: 9px 18px; }

/* The rule spans the card; only the prose is measured. `max-width` on the <p> itself would
   shorten the border with it, leaving it stopping short of the right edge. */
.ar-log__note {
  margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--ar-line);
  font-size: 12px; line-height: 1.6; color: var(--ar-ink-faint);
}
.ar-log__note > span { display: block; max-width: 90ch; }

/* Seven controls stop being readable well before the phone breakpoint — let them wrap
   into rows as soon as each would be squeezed under ~120px. */
@media (max-width: 1200px) {
  .ar-log__row { flex-wrap: wrap; gap: 12px 14px; }
  .ar-log__field { flex: 1 1 150px; }
  .ar-log__field--ua { flex: 1 1 220px; }
}
@media (max-width: 782px) {
  .ar-log__field, .ar-log__field--ua { flex: 1 1 100%; }
  .ar-log__field--date { width: 100%; }
  /* Matches the specificity of the wide-screen `.ar-aitraffic` date rule —
     without this, its 150px flex-basis beats the width above (basis outranks
     width on a flex item) and the date boxes stay narrow on phones. */
  .ar-aitraffic .ar-log__field--date { flex: 1 1 100%; }
  .ar-log__actions .ar-btn { flex: 1 1 auto; }
}

/* Phones: the settings group strip scrolls sideways with natural-width tabs —
   never crushes labels into clipped fragments ("ATA SOURCE"). Scrollbar hidden;
   the half-visible neighbour tab is the scroll affordance. */
@media (max-width: 782px) {
  .ar-tabpanel__tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .ar-tabpanel__tabs::-webkit-scrollbar { display: none; }
  .ar-subnav__item { flex: 0 0 auto; white-space: nowrap; }
}

/* iOS Safari auto-links emails/phones it detects inside the UA boxes (the
   underlined searchbot@… on iPhone). A UA is text, and the box is click-to-copy
   — neutralise the injected anchors so they read and behave as plain text. */
.ar-act-feed__ua a,
.ar-act-feed__ua a[x-apple-data-detectors] {
  color: inherit !important;
  text-decoration: none !important;
  pointer-events: none;
}

/* ---- "More" nav menu -----------------------------------------------------
   Holds the occasional screens (Request log, AI Visibility, About). A sibling of
   .ar__tabs rather than a child, because that nav is an overflow-x scroller and
   would clip this menu. */
.ar__more { flex: 0 0 auto; position: relative; display: flex; align-items: stretch; }
.ar__more-btn { gap: 6px; }
.ar__more-caret { display: inline-flex; align-items: center; transition: transform 0.15s; }
.ar__more.is-open .ar__more-caret { transform: rotate(180deg); }

/* The panel floats ABOVE the bar, so it sits on --ar-surface (the lightest paper), not on
   --ar-paper — which is the page background and made the menu read as a sunken box rather
   than a sheet lifted off the page. Two shadows: a tight contact edge, and a long soft cast. */
.ar__more-menu {
  /* `left` is set inline by positionMore(), which slides the panel inward when the trigger
     sits near the window edge. The value here is only the pre-measurement default. */
  position: absolute; top: calc(100% + 5px); left: -6px; z-index: 30;
  min-width: 208px; max-width: calc(100vw - 24px); padding: 5px;
  display: flex; flex-direction: column;
  background: var(--ar-surface);
  border: 1px solid var(--ar-line-strong);
  /* One step up from --ar-radius (4px): a lifted sheet is softer than a flush card. */
  border-radius: 7px;
  box-shadow: 0 1px 2px rgba(27, 25, 19, 0.05), 0 18px 36px -20px rgba(27, 25, 19, 0.5);
  animation: ar-more-in 0.13s cubic-bezier(0.22, 1, 0.36, 1);
  transform-origin: top left;
}
@keyframes ar-more-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) { .ar__more-menu { animation: none; } }

/* Sentence-case SANS, not the bar's mono eyebrow. Uppercase mono gives every row the same
   rectangular silhouette, so a stacked column of them has no word-shape to scan and reads
   as a pile of tags. In this design system sans is what a human reads; mono-uppercase is
   metadata. A destination name is the former. */
.ar__more-item {
  appearance: none; background: none; border: 0; cursor: pointer;
  /* Third column carries the unread badge. `auto` collapses to nothing on the items that
     don't have one, so the existing rows are untouched. */
  display: grid; grid-template-columns: 16px minmax(0, 1fr) auto; align-items: center;
  column-gap: 10px; width: 100%;
  text-align: left; white-space: nowrap;
  padding: 8px 10px; border-radius: var(--ar-radius);
  font-family: var(--ar-sans); font-size: 13.5px; font-weight: 500; letter-spacing: 0;
  text-transform: none; line-height: 1.25;
  color: var(--ar-ink-soft);
  transition: background-color 0.12s ease, color 0.12s ease;
}
@media (prefers-reduced-motion: reduce) { .ar__more-item { transition: none; } }
.ar__more-icon { grid-column: 1; color: var(--ar-ink-faint); transition: color 0.12s ease; }
.ar__more-item-label { grid-column: 2; }

.ar__more-item:hover:not(:disabled) { background: var(--ar-surface-2); color: var(--ar-ink); }
.ar__more-item:hover:not(:disabled) .ar__more-icon { color: var(--ar-ink-soft); }
.ar__more-item:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: -2px; }

/* The screen you're on. A wash of the accent at 8% plus an accent icon — no inset rail,
   which is the tab bar's idiom and the very thing that made this feel like tabs. */
.ar__more-item.is-active { background: color-mix(in srgb, var(--ar-accent) 8%, transparent); color: var(--ar-ink); }
.ar__more-item.is-active .ar__more-icon { color: var(--ar-accent); }

/* Listed but unreachable: the feature exists, it's just switched off. Greying it out
   teaches where the feature lives; hiding it leaves a hole nobody discovers. */
.ar__more-item.is-disabled { cursor: default; color: var(--ar-ink-faint); }
.ar__more-item.is-disabled .ar__more-icon { opacity: 0.55; }
.ar__more-item-note {
  grid-column: 2; margin-top: 2px;
  font-family: var(--ar-sans); font-size: 11px; font-weight: 400; letter-spacing: 0;
  color: var(--ar-ink-faint);
}

/* About is reference material, not a working screen. Full-bleed through the panel padding:
   an inset rule reads as decoration, a rule that touches both walls reads as a division. */
.ar__more-sep { height: 1px; margin: 5px -5px; background: var(--ar-line); }

/* On a narrow admin the bar gets tight: shrink the gap before anything scrolls. */
@media (max-width: 960px) {
  .ar__bar { gap: 16px; }
  .ar__tabs { gap: 16px; }
}

/* A feature named for the screen it unlocks, with the literal mechanism in a quieter
   aside beside it: "AI Visibility (Track AI citations)". */
.ar-toggle__sub {
  margin-left: 7px;
  font-weight: 400; font-size: 11px;
  color: var(--ar-ink-faint);
}

/* The Visit-log retention note: says what the Dashboard shows vs what the log keeps, and
   which data this setting deliberately does NOT govern (flagged IPs). Full-width and
   lightly tinted — it states the rule that outranks the controls above it, so it gets
   a touch more presence than a plain footnote. */
.ar-log-note {
  margin: 18px 0 0; padding: 12px 16px;
  background: color-mix(in srgb, var(--ar-accent) 6%, var(--ar-surface));
  border-left: 3px solid var(--ar-accent);
  border-radius: 0 var(--ar-radius) var(--ar-radius) 0;
  font-size: 12px; line-height: 1.65; color: var(--ar-ink-soft);
}
.ar-log-note strong { color: var(--ar-ink); font-weight: 600; }
/* The two dropdowns sit in .ar-field--inline rows; give the control a sane width so the
   "50,000 rows · ≈ 14–33 MB" label isn't crushed. */
.ar-field--inline .ar-select { flex: 0 1 320px; min-width: 0; }
/* "Keep records for" is twice the width of "Size cap", so without a reserved label column
   the two dropdowns start at different x. Fixed basis, no shrink: one column, aligned. */
.ar-field--log > label { flex: 0 0 132px; }
/* The weekly email's day+hour row: two dropdowns joined by "at". Each label+dropdown
   pair is one unbreakable flex unit (nowrap labels — "SEND IT EVERY" must never fold
   mid-phrase), so a mid-width screen wraps BETWEEN the pairs; under the admin's 782px
   mobile breakpoint each pair takes its own full line and the control stretches.
   Two-class selector on purpose: the row leads .ar-webmcp-tools, and the
   `.ar-field:first-child` margin reset would zero a single-class margin-top —
   without it the wrapper's border-top sat flush against the controls. */
.ar-field--inline.ar-field--digest { flex-wrap: wrap; margin-top: 16px; }
.ar-digest-slot { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.ar-digest-slot > label { white-space: nowrap; }
.ar-field--digest .ar-select { flex: 0 1 180px; min-width: 140px; }
@media (max-width: 782px) {
  .ar-digest-slot { flex: 1 1 100%; }
  /* Reserved label column (the .ar-field--log trick): "SEND IT EVERY" and "AT"
     occupy the same width, so the two dropdowns align and match exactly. */
  .ar-digest-slot > label { flex: 0 0 108px; }
  .ar-field--digest .ar-select { flex: 1 1 auto; }
}

/* ---------------------------------------------------------------------------
   Agent access — who authenticated to, and ACTED on, the machine surface.

   The screen's design problem is the opposite of most: its resting state is EMPTY,
   and an empty table quietly reads as "all clear". So the state box and the limits
   footer are not decoration around the data — on most sites they ARE the content,
   and they are styled to be read, not skimmed past.
   --------------------------------------------------------------------------- */

/* Unread count, on the More menu's Agent access row. Matches the review bell's badge. */
.ar__more-item-badge {
  grid-column: 3;
  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);
}

/* A dot on the "More" trigger itself: enough to say "something in here is unread"
   from any screen, without putting a number on a button that aggregates several. */
.ar__more-dot {
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--ar-bad);
  display: inline-block; margin-left: 5px; vertical-align: middle;
}

/* The head sits directly above the coverage box / table now that the lead moved
   to the page header — give it the same 16px rhythm the state box carries below. */
.ar-aa .ar-card__head { margin-bottom: 16px; }
.ar-aa__error { color: var(--ar-bad); font-size: 13px; margin: 0 0 12px; }

/* The coverage box: what we can and cannot see on THIS site. */
.ar-aa__state {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 14px 16px; margin: 0 0 16px;
  border: 1px solid var(--ar-line); border-left-width: 3px;
  border-radius: var(--ar-radius);
  background: var(--ar-surface-2);
}
.ar-aa__state--ok   { border-left-color: var(--ar-good); }
.ar-aa__state--warn { border-left-color: var(--ar-warn); }
.ar-aa__state--info { border-left-color: var(--ar-info); }

.ar-aa__badge {
  flex: 0 0 auto;
  font-family: var(--ar-mono); font-size: 10px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 3px 7px; border-radius: 999px;
  background: var(--ar-surface); border: 1px solid var(--ar-line-strong);
  color: var(--ar-ink-soft); white-space: nowrap;
}
.ar-aa__statebody { min-width: 0; }
/* The headline facts under the coverage sentence: quiet, mono, one line where
   there's room. The separator is drawn in CSS rather than typed between the
   values, so a narrow screen can stack whole facts instead of wrapping one in
   half — "last activity" and "3 days ago" must never land on separate lines. */
.ar-aa__facts { margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 2px 8px; font-family: var(--ar-mono); font-size: 11.5px; letter-spacing: -0.02em; color: var(--ar-ink-soft); }
.ar-aa__facts strong { color: var(--ar-ink); font-weight: 600; }
.ar-aa__fact { white-space: nowrap; }
.ar-aa__fact:not(:last-child)::after { content: '·'; margin-left: 8px; color: var(--ar-ink-faint); }
@media (max-width: 782px) {
  /* Stacked: one fact per line, no dangling separators. */
  .ar-aa__facts { flex-direction: column; gap: 3px; }
  .ar-aa__fact:not(:last-child)::after { content: none; }
}
.ar-aa__statebody p { margin: 4px 0 0; font-size: 13px; line-height: 1.55; color: var(--ar-ink-soft); }
.ar-aa__statetitle { margin: 0; font-family: var(--ar-sans); font-size: 14px; font-weight: 600; color: var(--ar-ink); }
/* The actionable line — the point of showing an unavailable state at all. */
.ar-aa__action { font-weight: 600; color: var(--ar-ink) !important; }

/* On a phone the four columns exceed the card: scroll the table inside its own box
   rather than letting it widen (or get clipped by) the page — columns stay reachable. */

/* The access log wears the Request Log's table dress (.ar-act-table on the same
   element), so the two logs read and behave as one family — same header band, same
   cell rhythm, same sideways scroll on narrow screens instead of crushed columns.
   Only the honest differences live below: the "What happened" column wraps its
   sentences (with a floor so the wrapper scrolls rather than the column collapsing),
   and multi-line rows align to the top. */
.ar-aa__table { width: 100%; border-collapse: collapse; margin: 0; }
/* Rows breathe: a security record read once a week is not a spreadsheet, and
   9px of vertical padding made five facts feel like one block. 16px each side —
   the critique suggested 24, which on an 80-row log is a lot of scrolling for
   air. */
.ar-aa__table td { font-size: 13px; color: var(--ar-ink-soft); border-bottom: 1px solid var(--ar-line); vertical-align: top; padding-top: 16px; padding-bottom: 16px; }
/* The count earns a shape rather than a sentence — same beige, no new colour. */
.ar-aa__uses {
  display: inline-block; font-family: var(--ar-mono); font-size: 11px;
  letter-spacing: -0.02em; color: var(--ar-ink-soft);
  background: var(--ar-surface-2); padding: 2px 8px; border-radius: 999px; white-space: nowrap;
}
.ar-aa__table td:first-child { white-space: normal; min-width: 260px; }
/* The third line, folded into a marker on the who line: same words, one hover
   away, and every row is two lines tall whatever the event. */
.ar-aa__noteicon {
  display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; width: 15px; height: 15px; margin-right: 6px; padding: 0; border-radius: 50%;
  border: 1px solid var(--ar-line-strong); background: transparent; cursor: help;
  font-family: var(--ar-mono); font-size: 10px; line-height: 1; color: var(--ar-ink-soft);
  vertical-align: -2px;
}
.ar-aa__noteicon:hover, .ar-aa__noteicon:focus-visible { border-color: var(--ar-accent); color: var(--ar-accent); }
/* The one advisory that is a warning, not a note, keeps its weight. */
.ar-aa__noteicon.is-warn { border-color: color-mix(in srgb, var(--ar-warn) 55%, var(--ar-line)); color: var(--ar-warn); }
/* Unlike the Request Log, a footer sentence follows this table — keep the last row's
   rule so the table visibly ends before it. */
.ar-aa__table tbody tr:last-child td { border-bottom: 1px solid var(--ar-line); }
.ar-aa__table tr.is-unseen td { background: color-mix(in srgb, var(--ar-accent) 4.5%, transparent); }
/* Two lines, two jobs: the kind is a quiet label that repeats down the table,
   the subject is the part that varies and carries the weight. */
/* Typographically identical to the timestamp columns — same face, same 11px,
   same -0.02em tracking, same faint tone and normal weight. Only the uppercase
   remains, because that is what makes it read as a label rather than a value. */
/* LEVEL 3 — the kind, now a subtitle under the name it describes. The name is
   what varies and what you scan for; the kind repeats down the table, so it sits
   below and quieter. */
.ar-aa__kindline {
  display: block; margin-top: 2px; font-family: var(--ar-mono); font-size: 10.5px;
  letter-spacing: 0.02em; text-transform: uppercase;
  color: var(--ar-ink-faint); font-weight: 400;
}
/* ONE face for both kinds of subject — that is what fixes the mismatched
   weights (mono sits lighter than the prose face, so "the same" weight wasn't).
   No chip: in the request log those boxes are one column among five and read as
   secondary, but here the subject IS the row, and boxing every one makes the
   column read boxy while adding height for nothing. The label line above already
   says whether it names an ability or a key. */
/* LEVEL 1 — the hero. The one thing on the row that is unique to it. */
.ar-aa__what {
  display: flex; align-items: center; gap: 7px;
  font-family: var(--ar-mono); font-size: 14px; letter-spacing: -0.01em;
  font-weight: 500; color: var(--ar-ink-soft);
  overflow-wrap: anywhere; cursor: help;
}
/* A key or a spark ahead of the name: the row's family is recognisable before a
   word is read, and hovering says what the name IS and where to act on it —
   "verify-tax" alone tells an admin nothing. */
.ar-aa__whaticon { flex: 0 0 auto; color: var(--ar-ink-faint); }
.ar-aa__what:hover .ar-aa__whaticon { color: var(--ar-accent); }

/* WHO did it — quieter than the hint sentences, but always present when known. */
/* WHO has its own column now, so the row is a single line. Never truncated —
   hiding "app password (since revoked)" hides the part that matters; if a value
   is genuinely long the table scrolls, which at least keeps it readable. */
/* Marker and person on one line; the credential drops beneath. */
.ar-aa__whotop { display: flex; align-items: center; gap: 0; }
/* LEVEL 2 — metadata. */
.ar-aa__who { font-size: 12.5px; color: var(--ar-ink-soft); }
/* What the request came in WITH — the quieter half of "who", on its own line so
   the eye doesn't have to find a middot to know where the second fact starts.
   Mono, like every other machine-side value in these tables. */
.ar-aa__cred {
  display: block; margin-top: 2px; font-family: var(--ar-mono); font-size: 11px;
  letter-spacing: -0.02em; color: var(--ar-ink-faint);
}
.ar-aa__who--none { opacity: 0.6; }
.ar-aa__whocol { white-space: nowrap; }
/* Timestamps right-align, header included — a column of dates reads as a column
   when its edges line up. Scoped through .ar-act-table so it out-specifies that
   table's blanket `text-align: left` (the reason a bare .ar-aa__seencol rule did
   nothing), exactly how the request log pins its own last column.
   Same mono face, size and tone as the log's "Requested at", so a timestamp
   looks the same wherever it appears. */
/* Fixed width, in ch of the mono face, so both date columns are the SAME width
   and neither reflows when "9:39 pm" becomes "10:33 pm". tabular-nums keeps the
   digits themselves on a common grid, so the values line up down the column
   rather than shimmering row to row. */
/* 22ch is the width of a full "July 15, 2026 10:33 pm" in this face — wide
   enough that the two columns stay identical and never reflow, tight enough
   that right-aligning doesn't park a column of dead space between them (24ch
   left ~3 characters of slack on each, which read as a gap). */
.ar-act-table th.ar-aa__seencol, .ar-act-table td.ar-aa__seencol {
  text-align: right; white-space: nowrap; width: 22ch; min-width: 22ch;
  padding-right: 8px; font-variant-numeric: tabular-nums;
}
.ar-act-table td.ar-aa__seencol { color: var(--ar-ink-faint); font-family: var(--ar-mono); font-size: 11px; letter-spacing: -0.02em; }
.ar-act-table th.ar-aa__seencol:last-child, .ar-act-table td.ar-aa__seencol:last-child { padding-right: 10px; }

/* The sentence the whole feature exists to deliver: an application password keeps working
   after a password change, so an unrecognised one has to be revoked, not just noted. */
.ar-aa__hint {
  display: block; margin-top: 4px;
  font-size: 12px; line-height: 1.5; color: var(--ar-ink-faint);
}

/* "Nothing yet" — deliberately NOT a cheerful all-clear. */
.ar-aa__empty {
  padding: 22px 18px; margin: 0 0 16px;
  border: 1px dashed var(--ar-line-strong); border-radius: var(--ar-radius);
  text-align: center;
}
.ar-aa__empty h3 { margin: 0 0 6px; font-family: var(--ar-sans); font-size: 15px; font-weight: 600; color: var(--ar-ink); }
.ar-aa__empty p { margin: 0 auto; max-width: 62ch; font-size: 13px; line-height: 1.6; color: var(--ar-ink-soft); }

/* Standing blind spots, always on screen. Same job as the request log's footer note. */
/* Styled as the app's quiet aside (left bar + tint), NOT as a hairline-topped block —
   a gray paragraph opening with a hairline reads as one more table row. */
.ar-aa__limits {
  margin: 4px 0 0; padding: 10px 14px;
  border-left: 2px solid var(--ar-line-strong);
  border-radius: 0 var(--ar-radius) var(--ar-radius) 0;
  background: #faf8f2;
  font-size: 12px; line-height: 1.6; color: var(--ar-ink-faint);
}
.ar-aa__limits strong { color: var(--ar-ink-soft); }

/* "New" on a row the owner has not read. The nav badge sends them here asking "which one?" —
   a faint row tint alone is too easy to lose on a long list, so the answer is spelled out. */
.ar-aa__new {
  display: inline-block; margin-left: 6px; vertical-align: 1px;
  font-family: var(--ar-mono); font-size: 9px; font-weight: 700;
  text-transform: uppercase; letter-spacing: 0.06em;
  padding: 2px 5px; border-radius: 999px;
  background: var(--ar-bad); color: var(--ar-paper);
}

/* What the VIEW is holding back — distinct from the standing blind spots in .ar-aa__limits.
   A list that stops at 100 without saying so reads as "that's everything". */
.ar-aa__more {
  display: flex; align-items: center; justify-content: space-between; gap: 16px;
  flex-wrap: wrap; margin: 0 0 16px;
}
.ar-aa__count {
  margin: 0; flex: 1 1 auto; min-width: 0;
  font-size: 12px; line-height: 1.6; color: var(--ar-ink-faint);
}
.ar-aa__count strong { color: var(--ar-ink-soft); font-weight: 600; }

/* Newer / Older — same cursor walk as the request log's pager, so the two log screens read as
   one control rather than two inventions. */
.ar-aa__pager { display: flex; gap: 8px; flex: 0 0 auto; }

/* "Not published" on a Discovery Hub row. The row is listed either way — the owner must be able
   to see (and reverse) what their site holds back — but listing it without a caveat would read
   as "this is live". */
.ar-wd-held {
  font-family: var(--ar-mono); font-size: 10px; font-weight: 600; letter-spacing: 0.04em;
  padding: 2px 7px; border-radius: 999px;
  background: var(--ar-surface-2); border: 1px solid var(--ar-line-strong);
  color: var(--ar-ink-faint); white-space: nowrap;
}
.ar-wd-prov__held {
  margin: 6px 0 0; padding: 8px 10px;
  border-left: 2px solid var(--ar-line-strong); border-radius: 0 var(--ar-radius) var(--ar-radius) 0;
  background: var(--ar-surface-2);
  font-size: 12px; line-height: 1.6; color: var(--ar-ink-faint);
}

/* A refusal or a probe: the first rows here that might mean someone is trying it on. A warn tone,
   never the word "attack" — we cannot know that, and the hit count is the honest signal. */
.ar-aa__table tr.is-refusal td { border-left: 2px solid var(--ar-warn); }
.ar-aa__table tr.is-refusal td:not(:first-child) { border-left: 0; }
.ar-aa__hint--warn { color: var(--ar-ink-soft); font-weight: 500; }

/* The default-share-image picker (Search basics): thumbnail beside its buttons.
   The thumb is a fixed square so a portrait pick can't stretch the row. */
.ar-media-pick { display: flex; align-items: center; gap: 10px; margin: 6px 0 4px; }
.ar-media-pick__thumb { width: 48px; height: 48px; object-fit: cover; border-radius: 6px; border: 1px solid var(--ar-line); }


/* ---- Agent Access: the event feed ----------------------------------------
   Cards, not table rows. These events are heterogeneous — an ability run, a key
   created, a probe turned away — and each is read on its own rather than
   compared down a column, which is the one job a table does better. Every fact
   still holds a fixed position inside the card, so the eye lands in the same
   place on every row. Same palette throughout: one beige, one ink, no new hues. */
/* Wide screens: a real table — the thead names each column once, and every row
   keeps the card's inner pieces (the disc, the eyebrow, the pill, the mono
   stamps), so nothing of the design is lost, only the repetition. */
.ar-aa__table { width: 100%; border-collapse: collapse; margin: 14px 0 16px; }
.ar-aa__thead th {
  text-align: left; font-family: var(--ar-mono); font-size: 10.5px; font-weight: 500;
  letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-soft);
  padding: 0 14px 9px 0; border-bottom: 1px solid var(--ar-line-strong);
}
.ar-aa__card > td { padding: 13px 14px 13px 0; border-bottom: 1px solid var(--ar-line); vertical-align: middle; }
.ar-aa__card.is-unseen > td { background: color-mix(in srgb, var(--ar-accent) 4.5%, var(--ar-surface)); }
.ar-aa__card.is-refusal > td:first-child { box-shadow: inset 2px 0 0 var(--ar-warn); }
/* The disc and the two text lines travel together as one grid, so the 40px
   icon column survives the move into a table cell — and, below, into a card. */
.ar-aa__evwrap { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 14px; align-items: center; }
/* The kind's glyph in a soft disc — recognisable before a word is read. */
.ar-aa__mark {
  display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 50%;
  background: var(--ar-surface-2); color: var(--ar-ink-soft);
}
.ar-aa__ev { min-width: 0; }
.ar-aa__whoblk { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.ar-aa__usesblk { display: flex; justify-content: flex-start; }
/* The kind line's card-mode count (" – 2 times") — wide table hides it. */
.ar-aa__kinduses { display: none; }
.ar-aa__seenblk { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
/* On the wide table the thead already says "First seen" — the in-row label
   only returns on small screens, where the thead is gone. */
.ar-aa__seenlab { display: none; font-size: 11px; color: var(--ar-ink-soft); }
.ar-aa__seenval {
  display: flex; align-items: center; gap: 6px;
  font-family: var(--ar-mono); font-size: 11px; letter-spacing: -0.02em;
  color: var(--ar-ink); font-variant-numeric: tabular-nums; white-space: nowrap;
}
.ar-aa__lineicon { flex: 0 0 auto; color: var(--ar-ink-faint); }
/* Phones and narrow admin columns: the rows re-stack as slim cards — the
   original anatomy he preferred over the seamed-slots family: disc + kind line
   (carrying the use count: "ABILITY USED – 2 TIMES") over the subject, the
   who/via lines and the two aligned seen-rows indented to the text column. */
@media (max-width: 1100px) {
  .ar-aa__table, .ar-aa__card, .ar-aa__card > td { display: block; }
  .ar-aa__thead { display: none; }
  .ar-aa__table tbody { display: flex; flex-direction: column; gap: 8px; }
  .ar-aa__card {
    padding: 14px 16px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius);
    background: var(--ar-surface);
  }
  .ar-aa__card > td { padding: 0; border: 0; background: none; min-width: 0; }
  .ar-aa__card.is-unseen { background: color-mix(in srgb, var(--ar-accent) 4.5%, var(--ar-surface)); }
  /* The card carries the unseen tint; the cells must not repeat it as patches —
     match the table-scoped base selectors' weight to silence them. */
  .ar-aa__card.is-unseen > td, .ar-aa__table tr.is-unseen td { background: none; }
  .ar-aa__table tbody tr:last-child td { border-bottom: 0; }
  .ar-aa__card.is-refusal { border-left: 2px solid var(--ar-warn); }
  .ar-aa__card.is-refusal > td:first-child { box-shadow: none; }
  .ar-aa__card.is-refusal .ar-aa__kindline { color: var(--ar-warn); }
  /* The count lives in the kind line up here; the Uses column is wide-table only. */
  .ar-aa__card > td.ar-aa__cell--uses { display: none; }
  .ar-aa__kinduses { display: inline; }
  /* Everything under the title indents to the text column, in one even rhythm. */
  .ar-aa__cell--who, .ar-aa__cell--seen { margin: 8px 0 0 54px; }
  .ar-aa__cell--seen + .ar-aa__cell--seen { margin-top: 6px; }
  /* The two seen-rows read as a pair: fixed-width labels land both dates on
     one vertical line. The dates speak the family's date voice — small mono,
     soft ink — instead of full-ink shouting. */
  .ar-aa__seenlab { display: inline-block; flex: 0 0 auto; width: 60px; }
  .ar-aa__seenblk { flex-direction: row; align-items: baseline; gap: 8px; }
  .ar-aa__seenval { color: var(--ar-ink-soft); }
}