/* ============================================================================ Agentimus — admin UI Aesthetic: "technical broadsheet". Warm paper, dark ink masthead, editorial serif headings + monospace data. Scoped under #agentimus-app so nothing leaks into wp-admin. No external fonts (wordpress.org rule); system stacks. ========================================================================= */ /* Page-level: make our admin screen full-bleed. This file loads only on the Agentimus page, so these wp-admin overrides never touch other screens. */ #wpcontent { padding-left: 0; } .wrap { margin: 0; } /* Design tokens — defined globally rather than only on #agentimus-app. Custom properties are inert (they paint nothing until a property references them), so this leaks no visuals into wp-admin, but it DOES let UI we Teleport to (toasts, the reset modal) read the same tokens. Visual rules below stay scoped to .ar-* / #agentimus-app. */ :root { /* Type */ --ar-serif: "Iowan Old Style", "Palatino Linotype", Palatino, "Book Antiqua", Georgia, serif; --ar-mono: ui-monospace, "SF Mono", "JetBrains Mono", "Cascadia Code", Menlo, Consolas, monospace; --ar-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif; /* Paper & ink */ --ar-paper: #f3f0e7; --ar-surface: #fffdf7; --ar-surface-2: #faf6ec; --ar-ink: #1b1913; --ar-ink-soft: #6c675a; --ar-ink-faint: #9a937f; --ar-line: #e4ddcb; --ar-line-strong: #d3cab2; /* Signal */ --ar-accent: #146b64; --ar-good: #2f7a4c; --ar-warn: #ad7b18; --ar-bad: #b93c2b; --ar-radius: 4px; /* Shared height for the nav bar and the page-head below it, so the two strips are always exactly the same height. Change here, both follow. */ --ar-bar-h: 72px; } #agentimus-app { /* Full-bleed: wp-admin's content padding is neutralized below, so the app fills the admin body edge-to-edge with no left/right gap. Transparent so it sits on wp-admin's own background — no floating "document" panel. */ margin: 0 0 24px; container-type: inline-size; color: var(--ar-ink); font-family: var(--ar-sans); font-size: 14px; line-height: 1.5; background: transparent; } #agentimus-app * { box-sizing: border-box; } /* Breathing room when a tile or readiness link scrolls a target to the top. */ #agentimus-app [id^="ar-"] { scroll-margin-top: 16px; } #agentimus-app code { font-family: var(--ar-mono); font-size: 0.86em; } /* 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 rgba(20, 107, 100, 0.16); } to { box-shadow: 0 0 0 2px rgba(20, 107, 100, 0), 0 0 0 7px rgba(20, 107, 100, 0); } } #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. */ .ar-dash-note { margin: 2px 0 16px; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-faint); } /* ---- Header bar (brand · tabs · gauge in one slim row) ------------------ */ .ar__bar { display: flex; align-items: stretch; gap: 26px; /* Match .ar__body's 34px so the brand mark and gauge line up with the content cards' left/right edges. */ padding: 0 34px; min-height: var(--ar-bar-h); background: var(--ar-surface); border-bottom: 1px solid var(--ar-line); } /* Brand — clickable, returns to the default (Settings) tab. */ .ar__brand { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; align-self: center; appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; transition: opacity 0.15s; } .ar__brand:hover { opacity: 0.82; } .ar__brand:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 4px; border-radius: 6px; } .ar__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ar-ink); color: var(--ar-paper); /* Framed-icon look: a gap in the bar colour, then an offset accent ring, so the ring reads as a clean frame rather than a muddy edge. */ box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent), 0 1px 5px -1px rgba(27, 25, 19, 0.25); } /* Name + version stacked, both flush-left, within the 30px mark height. The wordmark sets the column width; the version line is justified (spread by letter-spacing) to fill that exact width — so line 2 matches line 1's width. */ .ar__brandtext { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; } /* SVG "AR" monogram — paper strokes with a gold accent on the A's crossbar. */ .ar__logo { width: 18px; height: auto; display: block; } .ar__logo-line { stroke: var(--ar-paper); stroke-width: 2.4; } .ar__logo-accent { stroke: var(--ar-warn); stroke-width: 2.2; } .ar__name { font-family: var(--ar-serif); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: var(--ar-ink); } .ar__ver { /* Same gold as the readiness gauge / 6-of-11 figure. */ font-family: var(--ar-sans); font-size: 9px; line-height: 1; color: var(--ar-warn); text-align: justify; text-align-last: justify; text-justify: inter-character; -moz-text-align-last: justify; } /* Brand / nav separator — a small right-pointing arrow whose tip is a gold gem: two angled bars meet at a framed gold node that points toward the menu. The gold echoes the version line + logo crossbar, the ring echoes the logo's framed mark. Sets the masthead apart from the menu; no motion, no layout shift. */ .ar__sep { flex: 0 0 auto; align-self: center; display: inline-flex; /* The bar uses a uniform 26px gap; pull the arrow in toward the brand so it sits closer to the logo/wordmark, leaving the arrow → menu spacing untouched. */ margin-left: -10px; } .ar__sep svg { display: block; } .ar__sep-chev { stroke: var(--ar-line-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } .ar__sep-ring { stroke: rgba(173, 123, 24, 0.45); stroke-width: 1; } .ar__sep-node { fill: var(--ar-warn); filter: drop-shadow(0 0 2px rgba(173, 123, 24, 0.45)); } /* Tabs — inline in the bar, active item underlined at the bar's base. The strip takes the space left of the brand and scrolls horizontally when it can't fit, so no tab is ever clipped on narrow screens. */ .ar__tabs { flex: 1 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ar__tabs::-webkit-scrollbar { display: none; } .ar__tab { appearance: none; background: none; border: 0; cursor: pointer; flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; padding: 0 2px; font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; } .ar__tab:hover { color: var(--ar-ink-soft); } .ar__tab.is-active { color: var(--ar-ink); border-bottom-color: var(--ar-accent); } /* ---- Nav "Activity to review" badge + dropdown ------------------------- */ .ar__review { flex: 0 0 auto; align-self: center; position: relative; } .ar__review-btn { appearance: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; padding: 5px 9px; border-radius: 999px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink-soft); transition: color 0.15s ease, border-color 0.15s ease, background 0.15s ease; } .ar__review-btn:hover, .ar__review.is-open .ar__review-btn { color: var(--ar-ink); border-color: var(--ar-ink-faint); background: var(--ar-surface-2); } /* Resting state — logging on, nothing flagged: a calm anchor with a softer border and no red count, so a populated queue (red badge) is what draws the eye. */ .ar__review.is-quiet .ar__review-btn { border-color: var(--ar-line); } .ar__review-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar__review-count { font-family: var(--ar-mono); font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-bad); color: var(--ar-paper); } .ar__review-pop { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 400px; max-width: calc(100cqw - 32px); max-height: 72vh; overflow-y: auto; background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); box-shadow: 0 14px 36px -12px rgba(27, 25, 19, 0.45); padding: 16px 18px; } .ar__review-pop-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; flex-wrap: wrap; } .ar__review-title { font-family: var(--ar-serif); font-size: 16px; font-weight: 600; color: var(--ar-ink); } .ar__review-lead { margin: 6px 0 12px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); } .ar__review-empty { margin: 6px 0; font-size: 13px; color: var(--ar-ink-soft); } /* Dropdown rows always stack (container queries key off the app width, not the popover). */ .ar__review-pop .ar-susp-row { grid-template-columns: 1fr; row-gap: 8px; padding: 12px 0; } .ar__review-pop .ar-susp-row:first-child { padding-top: 6px; } .ar__review-pop .ar-susp-row__action { justify-self: start; text-align: left; max-width: none; } /* 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. */ height: var(--ar-bar-h); display: flex; flex-direction: column; justify-content: center; padding: 0 34px; background: var(--ar-surface); border-bottom: 1px solid var(--ar-line); } /* #agentimus-app lifts specificity (1,1,0) above wp-admin's core .wrap h1 (0,1,1), which would otherwise force 23px / weight 400 / 5px padding onto our title and inflate the page header. padding:0 explicitly drops the .wrap h1 5px. */ #agentimus-app .ar__pagehead-title { margin: 0; padding: 0; font-family: var(--ar-serif); font-weight: 600; font-size: 22px; line-height: 1.1; letter-spacing: -0.01em; color: var(--ar-ink); } .ar__pagehead-desc { margin: 0; font-size: 13px; line-height: 1.5; color: var(--ar-ink-soft); /* Keep to one line so the header height stays locked to the nav's 72px; truncates with an ellipsis only on very narrow viewports. */ white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } /* Readiness rail widget — gauge + stat, lives in the side panel on every tab. */ .ar-rail-readiness { display: flex; align-items: center; gap: 15px; } /* 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; } .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: 14px 0 0; padding: 0; display: grid; gap: 8px; } .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; } .ar-rung__tick { position: relative; flex: 0 0 auto; width: 13px; height: 13px; border-radius: 50%; border: 1.5px solid currentColor; } .ar-rung__name { flex: 1; min-width: 0; } .ar-rung__count { font-size: 11px; opacity: 0.85; } .ar-rung[data-state="done"] { color: #5cc08a; } .ar-rung[data-state="done"] .ar-rung__tick { background: currentColor; } .ar-rung[data-state="current"] { color: #e0b24c; } .ar-rung[data-state="current"] .ar-rung__tick::after { content: ""; position: absolute; inset: 3px; border-radius: 50%; background: currentColor; } @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; } /* Dark variant of the Readiness rail card. Double class so it outranks the base .ar-rail-card background regardless of source order. */ .ar-rail-card.ar-rail-card--readiness { background: var(--ar-ink); border-color: var(--ar-ink); } .ar-rail-card--readiness .ar-rail-card__label { color: rgba(243, 240, 231, 0.5); } .ar-rail-card--readiness .ar-rail-gauge__track { stroke: rgba(243, 240, 231, 0.15); } .ar-rail-card--readiness .ar-rail-gauge__num { color: rgba(243, 240, 231, 0.62); } .ar-rail-card--readiness .ar-rail-allgood { color: #5cc08a; } /* Brightened gauge tones for contrast on the dark card. */ .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="good"] { stroke: #5cc08a; } .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="ok"] { stroke: #e0b24c; } .ar-rail-card--readiness .ar-rail-gauge__fill[data-tone="low"] { stroke: #e08a72; } .ar-rail-card--readiness .ar-rail-link { color: #57b6a6; } .ar-rail-card--readiness .ar-rail-link:hover { color: #6fc7b8; } /* ---- Toast (teleported to , 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: 100000; 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; } /* 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; } .ar__main { display: grid; gap: 22px; min-width: 0; } /* On wide screens the rail owns the endpoints list (the form's copy hides). */ .ar__body.is-railed .ar-card--endpoints { display: none; } /* ---- Right rail --------------------------------------------------------- */ .ar__rail { position: sticky; top: 46px; display: grid; gap: 14px; align-content: start; } .ar-rail-card { background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); padding: 16px 18px; } .ar-rail-card__label { margin: 0 0 11px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.15em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-rail-link { appearance: none; background: none; border: 0; padding: 10px 0 0; cursor: pointer; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-accent); } /* No underline-on-hover — feedback is the colour shift (brightened on the dark readiness card), so the next-step line reads as an affordance, not a hyperlink. */ .ar-rail-link:hover { color: var(--ar-ink-soft); } .ar-rail-allgood { margin: 9px 0 0; font-size: 12px; color: var(--ar-good); } .ar-rail-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 9px; } .ar-rail-links a { display: inline-flex; align-items: center; gap: 7px; font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink); text-decoration: none; } .ar-rail-links a::before { content: "↳"; color: var(--ar-accent); } .ar-rail-links a:hover { color: var(--ar-accent); } /* 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 { margin: 0 4px; text-align: center; font-size: 10px; line-height: 1.4; color: var(--ar-ink-faint); } .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; } } /* 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; } /* Repurpose the brand→nav arrow as an invisible full-width line break: it bumps the tabs + bell onto the row below while leaving the brand its own top row — without turning the brand button itself into a full-width tap target. */ .ar__sep { display: block; flex-basis: 100%; height: 0; margin: 0; } .ar__sep svg { display: none; } /* Condense the masthead: drop the version line, shrink the mark + wordmark. */ .ar__ver { display: none; } .ar__mark { width: 26px; height: 26px; } .ar__logo { width: 16px; } .ar__name { font-size: 15px; } /* Navbar row: 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; } .ar__pagehead { padding-left: 16px; padding-right: 16px; } .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; } } /* 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); } .ar-card__head { display: flex; align-items: center; justify-content: space-between; gap: 12px; } .ar-card__title { margin: 0 0 3px; font-family: var(--ar-serif); font-weight: 600; font-size: 19px; letter-spacing: -0.01em; color: var(--ar-ink); } .ar-card__lead { margin: 0 0 18px; color: var(--ar-ink-soft); font-size: 13px; max-width: 95ch; } /* Quiet aside that clarifies a control's scope (e.g. "advertises, not enforces"). */ .ar-card__note { margin: 14px 0 0; padding: 9px 12px; max-width: 88ch; border-left: 2px solid var(--ar-line-strong); border-radius: 0 var(--ar-radius) var(--ar-radius) 0; background: #faf8f2; color: var(--ar-ink-faint); font-size: 12px; line-height: 1.5; } .ar-card__note strong { color: var(--ar-ink-soft); font-weight: 600; } .ar-card__note code { font-size: 11px; } /* Grouped panel for the AI opt-out channels published beyond robots.txt: a quiet inset card so the eyebrow + explainer + channel toggles read as one intentional unit rather than loose lines on the card. */ .ar-channels-panel { margin-top: 18px; padding: 15px 18px 16px; background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); } .ar-channels-panel__head { display: flex; align-items: center; gap: 9px; margin-bottom: 9px; font-family: var(--ar-mono); font-size: 11px; font-weight: 600; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-soft); } .ar-channels-panel__head .ar-field__tag { margin: 0; } .ar-channels-panel__lead { margin: 0; color: var(--ar-ink-soft); font-size: 13px; line-height: 1.55; } .ar-channels-panel__note { margin: 9px 0 0; color: var(--ar-ink-faint); font-size: 12px; line-height: 1.5; } .ar-channels-panel details { margin-top: 14px; padding-top: 13px; border-top: 1px solid var(--ar-line); } /* Small scope chip next to a card title, e.g. "Last 30 days". */ .ar-card__tag { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); padding: 2px 7px; border-radius: 999px; margin-left: 9px; vertical-align: 3px; white-space: nowrap; } /* 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 { background: var(--ar-surface); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); /* 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; } .ar-tabpanel__tabs { display: flex; gap: 0; background: var(--ar-surface-2); border-bottom: 1px solid var(--ar-line); border-radius: var(--ar-radius) var(--ar-radius) 0 0; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ar-tabpanel__tabs::-webkit-scrollbar { display: none; } .ar-subnav__item { appearance: none; cursor: pointer; background: transparent; border: 0; flex: 1 1 0; min-width: max-content; white-space: nowrap; text-align: center; padding: 14px 20px; 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; } .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); margin-bottom: -1px; /* cover the tab-row rule… */ border-bottom: 1px solid var(--ar-surface); /* …so the body merges in */ box-shadow: inset 0 2px 0 0 var(--ar-accent); /* top accent indicator */ } .ar-subnav__item:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: -2px; } /* On a phone, clamp the tabs so all five fit one row instead of scrolling off the edge: smaller type, tighter tracking, slimmer padding. Their total max-content then fits a typical (≥360px) viewport; the strip keeps overflow-x:auto as a graceful fallback for anything narrower. */ @media (max-width: 600px) { .ar-tabpanel__tabs .ar-subnav__item { padding: 12px 6px; font-size: 10px; letter-spacing: 0.02em; } } /* Slim section description, a band under the tabs. */ .ar-tabpanel__body { min-width: 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; } .ar-tabpanel__caption { margin: 0; padding: 11px 26px; font-size: 12.5px; color: var(--ar-ink-soft); border-bottom: 1px solid var(--ar-line); } /* 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: 0; counter-reset: arcard; } .ar-tabpanel .ar-card { border: 0; border-radius: 0; background: transparent; border-top: 1px solid var(--ar-line); } .ar-tabpanel .ar-group > .ar-card:first-child { border-top: 0; } .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; 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); } /* Numbered sections inside the settings form, spec-sheet style. */ .ar-form { counter-reset: arcard; display: grid; gap: 22px; } .ar-form .ar-card { counter-increment: arcard; } .ar-form .ar-card .ar-card__title::before { content: counter(arcard, decimal-leading-zero); margin-right: 12px; font-family: var(--ar-mono); font-size: 12px; font-weight: 400; color: var(--ar-accent); vertical-align: 3px; } /* ---- Toggles ------------------------------------------------------------ */ .ar-toggle { display: flex; align-items: flex-start; gap: 14px; padding: 13px 0; border-top: 1px solid var(--ar-line); cursor: pointer; } .ar-toggle:first-of-type { border-top: 0; padding-top: 2px; } .ar-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .ar-toggle__track { position: relative; flex: 0 0 auto; width: 40px; height: 22px; margin-top: 1px; background: #d8d2c2; border-radius: 999px; transition: background 0.18s; } .ar-toggle__track::after { content: ""; position: absolute; top: 2px; left: 2px; width: 18px; height: 18px; background: #fff; border-radius: 50%; transition: transform 0.18s; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25); } .ar-toggle input:checked + .ar-toggle__track { background: var(--ar-accent); } .ar-toggle input:checked + .ar-toggle__track::after { transform: translateX(18px); } .ar-toggle input:focus-visible + .ar-toggle__track { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-toggle__text { display: flex; flex-direction: column; gap: 1px; } .ar-toggle__text strong { font-size: 14px; font-weight: 600; } .ar-toggle__text small { color: var(--ar-ink-soft); font-size: 12px; } /* 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; } /* Small inline tag in a field label, e.g. "Content-Signal" / "optional". */ .ar-field__tag { font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em; color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); padding: 1px 6px; border-radius: 999px; margin-left: 6px; vertical-align: 1px; } /* ---- Fields ------------------------------------------------------------- */ .ar-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 16px; margin-top: 18px; } /* The identity block sets its own top padding, so its leading grid stays flush. */ .ar-id-block > .ar-grid { margin-top: 0; } .ar-field { display: flex; flex-direction: column; gap: 6px; margin-top: 18px; } .ar-field:first-child { margin-top: 0; } /* Grid fields sit side by side — keep their tops aligned, not stair-stepped. */ .ar-grid .ar-field { margin-top: 0; } .ar-field > label { font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-soft); } .ar-field__hint { color: var(--ar-ink-soft); font-size: 12px; line-height: 1.5; margin-top: 2px; } .ar-field--inline { flex-direction: row; align-items: center; gap: 12px; margin-top: 20px; } .ar-field--inline label { font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-soft); } .ar-input { width: 100%; padding: 9px 11px; font-size: 14px; font-family: var(--ar-sans); border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); background: #fffefb; color: var(--ar-ink); transition: border-color 0.15s, box-shadow 0.15s; } .ar-input:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(20, 107, 100, 0.13); } .ar-input--sm { width: 96px; font-family: var(--ar-mono); } textarea.ar-input { resize: vertical; line-height: 1.55; } /* Custom chevron so the select matches the text inputs' height exactly. */ select.ar-input { cursor: pointer; appearance: none; -webkit-appearance: none; 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: #eef5f3; } /* 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); } /* Content types — compact, scalable selectable cards */ /* Same grid as the cards below, so the search lines up to the columns. */ .ar-types-bar { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 9px; align-items: center; margin: 4px 0 14px; } .ar-types-search { grid-column: 1 / span 2; padding: 9px 13px; } /* exactly two cards wide */ .ar-types-meta { grid-column: 3 / -1; display: flex; align-items: center; justify-content: flex-end; gap: 14px; } .ar-types-count { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); } .ar-types-bar .ar-linkbtn { font-family: var(--ar-mono); font-size: 11px; text-decoration: none; } .ar-types-bar .ar-linkbtn:hover { text-decoration: underline; } /* Scroll only when the list gets long; small sites never scroll. */ .ar-types-scroll { max-height: 336px; overflow-y: auto; margin: 4px -4px 0; padding: 8px 4px; /* Fade rows in/out at the edges so scrolled cards don't visually merge into the filter above (or run hard against the bottom). */ -webkit-mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask-image: linear-gradient(to bottom, transparent, #000 14px, #000 calc(100% - 14px), transparent); } .ar-types-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(205px, 1fr)); gap: 9px; } .ar-types-empty { grid-column: 1 / -1; margin: 6px 2px; font-size: 12.5px; color: var(--ar-ink-soft); } /* Identity "compose then save" block — free text grouped as its own unit with a footer Save. The chip fields below it (expertise, profile URLs) autosave. */ .ar-id-block { border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: #fffefb; padding: 16px 16px 0; margin: 2px 0 16px; } .ar-id-block > .ar-field:last-of-type { margin-bottom: 0; } .ar-id-foot { display: flex; align-items: center; gap: 14px; border-top: 1px solid var(--ar-line); margin: 14px -16px 0; padding: 12px 16px; } .ar-id-foot__status { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); margin-right: auto; } .ar-id-foot__status.is-dirty { color: var(--ar-accent); } .ar-id-foot__status.is-saved { color: #2f9e5e; } .ar-type { position: relative; display: flex; align-items: center; gap: 11px; padding: 10px 26px 10px 14px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: #fffefb; cursor: pointer; transition: border-color 0.15s, background 0.15s; } .ar-type:hover { border-color: var(--ar-line-strong); } .ar-type.is-on { border-color: var(--ar-accent); background: #f0f6f4; } .ar-type input { position: absolute; opacity: 0; width: 0; height: 0; } /* No visible checkbox — the whole card is the control. Selected reads as the accent border + tint (above) plus a small corner tick. */ .ar-type__check { display: none; } .ar-type.is-on::after { content: "✓"; position: absolute; top: 8px; right: 11px; font-size: 11px; line-height: 1; font-weight: 700; color: var(--ar-accent); } /* The real 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 ---------------------------------------------------------- */ .ar-tags { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 7px; border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); background: #fffefb; } .ar-tags:focus-within { border-color: var(--ar-accent); box-shadow: 0 0 0 3px rgba(20, 107, 100, 0.13); } .ar-tags__list { display: contents; margin: 0; padding: 0; list-style: none; } .ar-tags__chip { display: inline-flex; align-items: center; gap: 7px; padding: 4px 6px 4px 9px; background: var(--ar-ink); color: var(--ar-paper); border-radius: 3px; font-family: var(--ar-mono); font-size: 12px; } /* 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); } /* Always sits on its own full-width row beneath the chips. */ .ar-tags__input { flex: 1 0 100%; border: 0; outline: none; padding: 6px; font-size: 14px; background: none; } /* ---- Live endpoints ----------------------------------------------------- */ .ar-links { margin: 0; padding: 0; list-style: none; display: grid; gap: 8px; } .ar-links li { position: relative; padding-left: 18px; } .ar-links li::before { content: "↳"; position: absolute; left: 0; color: var(--ar-accent); } .ar-links a { font-family: var(--ar-mono); font-size: 12.5px; color: var(--ar-ink); text-decoration: none; border-bottom: 1px solid var(--ar-line-strong); } .ar-links a:hover { color: var(--ar-accent); border-bottom-color: var(--ar-accent); } /* ---- Actions ------------------------------------------------------------ */ .ar-actions { display: flex; justify-content: flex-end; } .ar-btn { appearance: none; cursor: pointer; font-family: var(--ar-mono); font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase; padding: 12px 26px; border-radius: var(--ar-radius); background: var(--ar-ink); color: var(--ar-paper); border: 1px solid var(--ar-ink); transition: transform 0.12s, background 0.15s, box-shadow 0.15s; } .ar-btn:hover:not(:disabled) { background: #000; box-shadow: 0 6px 18px -8px rgba(27, 25, 19, 0.7); } .ar-btn:active:not(:disabled) { transform: translateY(1px); } .ar-btn:disabled { opacity: 0.5; cursor: default; } .ar-btn--danger { background: transparent; color: var(--ar-bad); border-color: var(--ar-bad); } .ar-btn--danger:hover:not(:disabled) { background: var(--ar-bad); color: var(--ar-paper); box-shadow: 0 6px 18px -8px rgba(185, 60, 43, 0.6); } /* ---- Reset to defaults -------------------------------------------------- */ .ar-card--reset { border-color: var(--ar-line); } .ar-reset { display: flex; align-items: center; gap: 20px; } .ar-reset__text { flex: 1; display: flex; flex-direction: column; gap: 3px; } .ar-reset__text strong { font-size: 14px; font-weight: 600; } .ar-reset__text small { color: var(--ar-ink-soft); font-size: 12.5px; line-height: 1.5; } .ar-reset .ar-btn { flex: 0 0 auto; } /* ---- Modal (reset confirmation + preview) ------------------------------ */ .ar-modal { position: fixed; inset: 0; z-index: 100001; display: flex; align-items: center; justify-content: center; padding: 20px; background: rgba(27, 25, 19, 0.42); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); } .ar-modal__panel { display: flex; flex-direction: column; width: 100%; max-width: 560px; max-height: min(calc(100vh - 40px), 600px); overflow: hidden; background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: 10px; box-shadow: 0 24px 60px -20px rgba(27, 25, 19, 0.5); } .ar-modal__panel:focus { outline: none; } /* Header + footer stay put; only the preview body scrolls, so the actions are always reachable on a short screen. */ .ar-modal__head { flex: 0 0 auto; padding: 24px 28px 16px; border-bottom: 1px solid var(--ar-line); } /* Nested-flex scroll: each level needs flex + min-height:0 so the scroller gets a resolved height. A percentage height here would NOT resolve (the flex item's height is auto) and the content would overflow instead of scrolling. */ .ar-modal__body { position: relative; flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; } .ar-modal__scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 8px 28px 10px; } /* Scroll affordance: a bottom fade + chevron, shown only while more is below. */ .ar-modal__fade { position: absolute; left: 0; right: 0; bottom: 0; height: 52px; display: flex; align-items: flex-end; justify-content: center; padding-bottom: 6px; pointer-events: none; opacity: 0; transition: opacity 0.18s ease; background: linear-gradient(to bottom, rgba(255, 253, 247, 0), var(--ar-surface) 80%); } .ar-modal__fade.is-visible { opacity: 1; } /* The chevron is a real button: click to nudge the scroll body down (it also scrolls on its own). The fade gradient stays click-through; the button re-enables pointer events. Disabled = nothing more below. */ .ar-modal__fade-btn { pointer-events: auto; cursor: pointer; display: flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; margin: 0; border: 0; border-radius: 999px; background: transparent; color: var(--ar-ink-faint); transition: color 0.15s ease, background 0.15s ease; } .ar-modal__fade-btn:hover { color: var(--ar-ink); background: var(--ar-surface-2); } .ar-modal__fade-btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-modal__fade-btn:disabled { pointer-events: none; } .ar-modal__chev { display: block; } .ar-modal__title { margin: 0 0 8px; font-size: 19px; letter-spacing: -0.01em; color: var(--ar-ink); } .ar-modal__lead { margin: 0; font-size: 13px; line-height: 1.55; color: var(--ar-ink-soft); } .ar-preview { display: grid; gap: 16px; } .ar-preview__group { display: grid; gap: 6px; } .ar-preview__label { margin: 0; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-preview__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .ar-preview__list li { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--ar-line); font-size: 13px; } .ar-preview__list li:last-child { border-bottom: 0; } .ar-preview__state { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.06em; padding: 2px 8px; border-radius: 3px; border: 1px solid; } .ar-preview__state.is-on { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; } .ar-preview__state.is-off { color: var(--ar-ink-soft); border-color: var(--ar-line-strong); background: #f4f1e8; } .ar-preview__muted { color: var(--ar-ink-soft); font-size: 12.5px; } .ar-modal__actions { flex: 0 0 auto; display: flex; justify-content: flex-end; gap: 10px; padding: 14px 28px 18px; border-top: 1px solid var(--ar-line); } .ar-btn--ghost { background: transparent; color: var(--ar-ink); border-color: var(--ar-line-strong); } .ar-btn--ghost:hover:not(:disabled) { background: var(--ar-paper); box-shadow: none; } .ar-modal-enter-active { transition: opacity 0.2s ease; } .ar-modal-leave-active { transition: opacity 0.16s ease; } .ar-modal-enter-from, .ar-modal-leave-to { opacity: 0; } .ar-modal-enter-active .ar-modal__panel { transition: transform 0.24s cubic-bezier(0.22, 1, 0.36, 1), opacity 0.24s ease; } .ar-modal-enter-from .ar-modal__panel { transform: translateY(10px) scale(0.98); opacity: 0; } @media (prefers-reduced-motion: reduce) { .ar-modal-enter-active .ar-modal__panel { transition: none; } .ar-modal-enter-from .ar-modal__panel { transform: none; } } /* Small / short viewports: tighten the gap and let the panel use more height. Placed after the base rules so it wins the cascade. */ @media (max-width: 600px), (max-height: 560px) { .ar-modal { padding: 10px; } .ar-modal__panel { max-height: calc(100vh - 20px); } } /* ---- 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: 600px; } .ar-wiz__steps { display: flex; align-items: center; gap: 6px; } .ar-wiz__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--ar-line-strong); transition: background 0.2s ease; } .ar-wiz__dot.is-on { background: var(--ar-accent); } .ar-wiz__count { margin: 8px 0 0; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-wiz__step { display: flex; flex-direction: column; gap: 14px; } .ar-wiz__step > * { margin: 0; } .ar-wiz__subhead { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-wiz__skip { margin-right: auto; } .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); } .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; } .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; } } /* ---- Readiness ---------------------------------------------------------- */ /* Each rung is a titled group of checks, with its own pass tally. */ .ar-checkgroup { margin-top: 26px; } .ar-checkgroup:first-of-type { margin-top: 16px; } .ar-checkgroup__head { position: relative; display: flex; align-items: center; gap: 11px; padding: 0 4px 11px; } /* A slim full-width 1px divider, colour-keyed to the rung's status (pass / warn / fail) so the header reads as one signal with its dot and count. */ .ar-checkgroup__head::after { content: ""; position: absolute; left: 0; right: 0; bottom: 0; height: 1px; background: var(--ar-line-strong); } .ar-checkgroup.is-pass .ar-checkgroup__head::after { background: rgba(47, 122, 76, 0.55); } .ar-checkgroup.is-warn .ar-checkgroup__head::after { background: rgba(173, 123, 24, 0.5); } .ar-checkgroup.is-fail .ar-checkgroup__head::after { background: rgba(185, 60, 43, 0.5); } .ar-checkgroup__rung { flex: 0 0 auto; width: 9px; height: 9px; border-radius: 50%; background: var(--ar-line-strong); } .ar-checkgroup.is-pass .ar-checkgroup__rung { background: var(--ar-good); } .ar-checkgroup.is-warn .ar-checkgroup__rung { background: var(--ar-warn); } .ar-checkgroup.is-fail .ar-checkgroup__rung { background: var(--ar-bad); } .ar-checkgroup__text { flex: 1; min-width: 0; } .ar-checkgroup__name { margin: 0; font-family: var(--ar-serif); font-size: 16px; font-weight: 600; color: var(--ar-ink); } .ar-checkgroup__blurb { margin: 2px 0 0; font-size: 12.5px; line-height: 1.4; color: var(--ar-ink-soft); } .ar-checkgroup__count { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 13px; font-weight: 600; color: var(--ar-ink-soft); } .ar-checkgroup.is-pass .ar-checkgroup__count { color: var(--ar-good); } .ar-checkgroup.is-warn .ar-checkgroup__count { color: var(--ar-warn); } .ar-checkgroup.is-fail .ar-checkgroup__count { color: var(--ar-bad); } .ar-checkgroup .ar-checks { margin-top: 0; border-top: 0; } .ar-checks { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ar-line); } .ar-check { display: flex; align-items: flex-start; gap: 16px; padding: 15px 4px; border-bottom: 1px solid var(--ar-line); /* Clear the fixed WordPress admin bar when the rail's next-step link jumps here. */ scroll-margin-top: 40px; } .ar-check__text { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ar-check__text strong { font-size: 14px; font-weight: 600; } .ar-check__text small { color: var(--ar-ink-soft); font-size: 12.5px; } .ar-check__fix { margin: 8px 0 0; padding: 8px 11px; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink); background: var(--ar-paper); border-radius: 6px; border-left: 2px solid var(--ar-line-strong); } .ar-check.is-warn .ar-check__fix { border-left-color: var(--ar-warn); } .ar-check.is-fail .ar-check__fix { border-left-color: var(--ar-bad); } .ar-check__action { align-self: flex-start; margin: 8px 0 0; padding: 0; background: none; border: 0; cursor: pointer; font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.04em; color: var(--ar-accent); } .ar-check__action:hover { text-decoration: underline; } .ar-check__action:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 3px; border-radius: 3px; } /* The status tag sits on the first text line even though the row is top-aligned. */ .ar-check__tag { margin-top: 1px; } .ar-check__tag { flex: 0 0 auto; min-width: 64px; text-align: center; font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.1em; padding: 4px 10px; border-radius: 3px; border: 1px solid; } .ar-check__tag.is-pass { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; } .ar-check__tag.is-warn { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; } .ar-check__tag.is-fail { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; } .ar-check__rule { flex: 0 0 auto; width: 3px; align-self: stretch; border-radius: 2px; background: var(--ar-line-strong); } .ar-check.is-pass .ar-check__rule { background: var(--ar-good); } .ar-check.is-warn .ar-check__rule { background: var(--ar-warn); } .ar-check.is-fail .ar-check__rule { background: var(--ar-bad); } /* Two buttons in the report head (Verify live + Re-run). */ .ar-card__actions { display: flex; align-items: center; gap: 8px; } /* Live self-check results — "what agents actually receive". */ /* 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: 540px; } .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__list { margin: 0; padding: 0; list-style: none; display: grid; gap: 0; } .ar-live__row { display: flex; align-items: center; gap: 10px; padding: 8px 2px; border-top: 1px solid var(--ar-line); font-size: 13px; } .ar-live__row:first-child { border-top: 0; } .ar-live__dot { flex: 0 0 auto; width: 8px; height: 8px; border-radius: 50%; background: var(--ar-good); } .ar-live__row.is-bad .ar-live__dot { background: var(--ar-bad); } .ar-live__label { flex: 1; min-width: 0; color: var(--ar-ink); } .ar-live__detail { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); text-align: right; } .ar-live__row.is-bad .ar-live__detail { color: var(--ar-bad); } /* 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; font-family: var(--ar-mono); font-size: 13.5px; color: var(--ar-ink); } .ar-wd-canonical__ext { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; margin: -4px -4px -4px 0; border-radius: 4px; color: var(--ar-ink-faint); font-size: 15px; text-decoration: none; transition: color 0.15s, background 0.15s; } .ar-wd-canonical__ext:hover { color: var(--ar-accent); background: rgba(20, 107, 100, 0.08); } .ar-wd-canonical__ext:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 1px; } .ar-wd-altlinks { margin-bottom: 18px; } /* Stat tiles */ .ar-wd-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); gap: 1px; background: var(--ar-line); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); overflow: hidden; } .ar-wd-stat { display: flex; flex-direction: column; gap: 2px; padding: 14px 16px; background: var(--ar-surface); text-align: center; } .ar-wd-stat strong { font-family: var(--ar-mono); font-size: 24px; font-weight: 600; } .ar-wd-stat span { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-wd-stat small { margin-top: 2px; font-size: 11px; line-height: 1.3; color: var(--ar-ink-soft); } .ar-wd-stat.is-bad strong { color: var(--ar-bad); } /* A stat count that doesn't divide evenly into a fixed grid (the Discovery hub's five totals) flex-fills instead, so the last row stretches to the full width rather than leaving an empty bordered cell. */ .ar-wd-stats--fill { display: flex; flex-wrap: wrap; } /* Basis matches the grid's 108px min so it keeps the same per-row count as before (e.g. five-up when wide); flex-grow just lets a short last row fill the width. */ .ar-wd-stats--fill .ar-wd-stat { flex: 1 1 108px; } .ar-wd-empty { margin: 8px 0 0; color: var(--ar-ink-soft); font-size: 13px; } /* ---- Small screens: ease the chrome down so cards aren't desktop-sized on a phone — titles + big stat numbers shrink a notch, buttons stop hogging the row, and header action rows / the Discovery endpoint stack vertically. ---- */ @container (max-width: 560px) { /* Card header: title/lead on its own line, action buttons below it rather than squeezed beside it (mainly Endpoint activity, whose long lead needs the room). */ .ar-card__head { flex-direction: column; align-items: stretch; gap: 12px; } .ar-card__actions { width: 100%; } /* …but a header that's just a short title + a couple of buttons (Readiness report) stays on one row — with the smaller buttons it fits — and only wraps the buttons below if it truly can't. */ .ar-card__head--inline { flex-direction: row; flex-wrap: wrap; align-items: center; gap: 10px 12px; } .ar-card__head--inline .ar-card__actions { width: auto; } /* Buttons sit nearer the text size and don't dominate. */ .ar-btn { padding: 9px 16px; font-size: 11px; } /* Headings + prominent numbers ease down. */ .ar-card__title { font-size: 16.5px; } .ar-wd-stat strong { font-size: 20px; } .ar-checkgroup__name { font-size: 15px; } /* Discovery endpoint: stack the URL box and Re-scan so the path keeps one line and the button spans the width instead of crowding it. */ .ar-wd-endpoint-row { flex-direction: column; align-items: stretch; } .ar-wd-endpoint-row .ar-btn { width: 100%; } .ar-wd-canonical__path { font-size: 12px; } } /* Provider groups: Declared (always shown) and Auto-discovered (collapsible). */ .ar-wd-group { margin-top: 18px; } .ar-wd-group__title { margin: 0; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-wd-group__toggle { display: flex; align-items: center; gap: 7px; width: 100%; padding: 0; border: 0; background: none; cursor: pointer; font: inherit; text-align: left; font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-wd-group__toggle:hover { color: var(--ar-ink-soft); } .ar-wd-group__caret { font-size: 9px; transition: transform 0.15s ease; } .ar-wd-group__caret.is-open { transform: rotate(90deg); } .ar-wd-group__count { font-family: var(--ar-mono); font-size: 10px; font-weight: 600; letter-spacing: 0; padding: 1px 7px; border-radius: 999px; border: 1px solid var(--ar-line-strong); color: var(--ar-ink-faint); } /* Tighten the list when it sits directly under a group header. */ .ar-wd-group .ar-wd-list { margin-top: 10px; } /* Inline engine status under the "Found automatically" header: which places Agentimus scanned, each with a ✓/✕. Always visible, even when rows collapse. */ .ar-wd-engines { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin: 8px 0 0; font-size: 12px; color: var(--ar-ink-soft); } .ar-wd-engine { font-family: var(--ar-mono); font-size: 11px; padding: 1px 8px; border-radius: 999px; border: 1px solid var(--ar-line-strong); } .ar-wd-engine.is-on { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; } .ar-wd-engine.is-off { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; } /* Provider rows */ .ar-wd-list { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 0; border-top: 1px solid var(--ar-line); } .ar-wd-prov { display: flex; gap: 14px; padding: 16px 4px; border-bottom: 1px solid var(--ar-line); } .ar-wd-prov__bar { flex: 0 0 auto; width: 3px; border-radius: 2px; background: var(--ar-accent); } .ar-wd-prov__body { flex: 1; min-width: 0; } .ar-wd-prov__head { display: flex; flex-wrap: wrap; align-items: center; gap: 9px; } .ar-wd-prov__head strong { font-size: 14.5px; font-weight: 600; } .ar-wd-type { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-accent); border: 1px solid #bcd9d4; background: #eef5f3; padding: 2px 7px; border-radius: 3px; } .ar-wd-type--agent { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; } .ar-wd-ver { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); } .ar-wd-prov__desc { margin: 7px 0 0; font-size: 13px; color: var(--ar-ink-soft); } .ar-wd-prov__provider { margin: 6px 0 0; } .ar-wd-prov__provider code { font-size: 11px; color: var(--ar-ink-faint); } .ar-wd-caps { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 11px; } .ar-wd-cap { font-family: var(--ar-mono); font-size: 11.5px; color: var(--ar-ink); background: var(--ar-surface-2); border: 1px solid var(--ar-line); padding: 3px 8px; border-radius: 3px; } .ar-wd-eps { margin: 11px 0 0; padding: 0; list-style: none; display: grid; gap: 7px; } .ar-wd-eps li { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; } .ar-wd-ep__type { font-family: var(--ar-mono); font-size: 9.5px; letter-spacing: 0.1em; text-transform: uppercase; color: var(--ar-ink-faint); border: 1px solid var(--ar-line-strong); padding: 2px 6px; border-radius: 3px; } .ar-wd-eps code { font-size: 12px; color: var(--ar-ink); } .ar-wd-auth { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.06em; padding: 2px 7px; border-radius: 3px; border: 1px solid; } .ar-wd-auth.is-open { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; } .ar-wd-auth.is-locked { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; } @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: #bcd9d4; background: #eef5f3; } .ar-wd-wk { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; } .ar-wd-wk li { display: flex; align-items: center; justify-content: space-between; gap: 10px; } .ar-wd-wk a { text-decoration: none; } .ar-wd-wk code { font-size: 12px; color: var(--ar-ink); border-bottom: 1px solid var(--ar-line-strong); } .ar-wd-wk a:hover code { color: var(--ar-accent); border-bottom-color: var(--ar-accent); } .ar-wd-src { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em; padding: 2px 7px; border-radius: 3px; border: 1px solid var(--ar-line-strong); color: var(--ar-ink-faint); } .ar-wd-src.is-file { color: var(--ar-good); border-color: #bcdcc6; background: #eef5f0; } .ar-wd-src.is-managed { color: var(--ar-accent); border-color: #bcd9d4; background: #eef5f3; } .ar-wd-notices { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 9px; } .ar-wd-notice { display: flex; align-items: flex-start; gap: 10px; font-size: 12.5px; line-height: 1.45; } .ar-wd-notice__tag { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 9px; letter-spacing: 0.08em; padding: 2px 6px; border-radius: 3px; border: 1px solid; } .ar-wd-notice.is-error .ar-wd-notice__tag { color: var(--ar-bad); border-color: #e6c1b9; background: #f8ebe8; } .ar-wd-notice.is-warning .ar-wd-notice__tag { color: var(--ar-warn); border-color: #e6d5a8; background: #f7f1df; } /* ---- Dashboard ---------------------------------------------------------- */ .ar-act { display: grid; gap: 22px; min-width: 0; } /* Clickable at-a-glance summary row. Fixed 4-up (not auto-fit) so the four tiles always span the full width as one row; auto-fit would orphan the 4th tile on its own line at in-between widths. Collapses to a tidy 2×2 below. */ .ar-dash-sum { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; } .ar-dash-tile { appearance: none; cursor: pointer; text-align: left; display: flex; flex-direction: column; gap: 4px; padding: 15px 18px; border: 1px solid var(--ar-line); border-radius: var(--ar-radius); background: var(--ar-surface); transition: border-color 0.15s, box-shadow 0.15s, transform 0.12s; } .ar-dash-tile:hover { border-color: var(--ar-line-strong); box-shadow: 0 5px 16px -9px rgba(27, 25, 19, 0.4); } .ar-dash-tile:active { transform: translateY(1px); } .ar-dash-tile:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-dash-tile__k { font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.12em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-dash-tile__v { font-family: var(--ar-mono); font-size: 24px; font-weight: 600; line-height: 1; color: var(--ar-ink); } .ar-dash-tile__v[data-tone="good"] { color: var(--ar-good); } .ar-dash-tile__v[data-tone="ok"] { color: var(--ar-warn); } .ar-dash-tile__v[data-tone="low"] { color: var(--ar-bad); } .ar-dash-tile__sub { font-size: 11px; color: var(--ar-ink-soft); } .ar-act-controls { display: flex; align-items: center; gap: 16px; flex: 0 0 auto; } /* 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); } /* Styled hover tooltip, floating above the bars with a downward caret. JS sets `left` (clamped centre) on the body and `left` on the caret (so it keeps pointing at the bar even when the body is clamped at an edge). */ /* left stays 0 and the whole tooltip is moved via transform, so its width is computed against the full chart (not the gap to the right edge) — otherwise a right-side bar squeezes the tooltip narrow and the text wraps weirdly. */ .ar-act-tip { position: absolute; bottom: calc(100% + 8px); left: 0; z-index: 6; pointer-events: none; display: grid; gap: 1px; width: max-content; max-width: 240px; padding: 8px 11px; background: var(--ar-ink); color: var(--ar-surface); border-radius: 7px; box-shadow: 0 10px 24px -10px rgba(27, 25, 19, 0.55); font-size: 12px; line-height: 1.45; } .ar-act-tip__date { font-family: var(--ar-mono); font-size: 10.5px; letter-spacing: 0.04em; opacity: 0.72; white-space: nowrap; } .ar-act-tip__hits { font-weight: 600; white-space: nowrap; } .ar-act-tip__top { opacity: 0.82; } .ar-act-tip__caret { position: absolute; top: 100%; left: 0; transform: translateX(-50%); width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 6px solid var(--ar-ink); } .ar-tip-enter-active, .ar-tip-leave-active { transition: opacity 0.12s ease; } .ar-tip-enter-from, .ar-tip-leave-to { opacity: 0; } @media (prefers-reduced-motion: reduce) { .ar-tip-enter-active, .ar-tip-leave-active { transition: none; } } /* The modal lists every hit individually (ungrouped), each with its exact time. Reuses the feed cell styles (agent/endpoint/UA) in its own 4-column grid; the modal body owns the scroll. */ /* Day-report modal: a wider panel; header with prev/next + a day dropdown. */ .ar-modal__panel--day { max-width: 640px; } .ar-day-head { display: flex; align-items: center; justify-content: space-between; gap: 10px 12px; margin-bottom: 8px; flex-wrap: wrap; } .ar-day-head .ar-modal__title { margin: 0; } .ar-day-nav { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; } .ar-day-select { height: 30px; max-width: 220px; min-width: 0; padding: 0 8px; border: 1px solid var(--ar-line-strong); border-radius: 7px; background: var(--ar-surface); color: var(--ar-ink); font: inherit; font-size: 12.5px; cursor: pointer; } .ar-day-select:hover:not(:disabled) { background: var(--ar-surface-2); } .ar-day-select:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-day-select:disabled { opacity: 0.5; cursor: default; } .ar-day-nav__btn { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; padding: 0; border: 1px solid var(--ar-line-strong); border-radius: 7px; background: var(--ar-surface); color: var(--ar-ink-soft); cursor: pointer; transition: color 0.15s ease, background 0.15s ease, border-color 0.15s ease; } .ar-day-nav__btn:hover:not(:disabled) { color: var(--ar-ink); background: var(--ar-surface-2); } .ar-day-nav__btn:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-day-nav__btn:disabled { opacity: 0.4; cursor: default; } /* The day report's two-column breakdown (by client / by endpoint), above the log. */ .ar-daybreak { display: grid; grid-template-columns: 1fr 1fr; gap: 16px 28px; } .ar-daybreak__h { margin: 0 0 9px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-faint); font-weight: 600; display: flex; align-items: baseline; gap: 6px; } .ar-daybreak__n { font-size: 11px; color: var(--ar-ink-soft); letter-spacing: 0; text-transform: none; font-weight: 400; } .ar-daylog { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--ar-line); } @media (max-width: 600px) { .ar-daybreak { grid-template-columns: 1fr; gap: 14px; } } .ar-act-log { margin: 0; padding: 0; list-style: none; } .ar-act-log li { display: grid; align-items: center; gap: 10px; padding: 7px 2px; grid-template-columns: max-content minmax(0, max-content) minmax(0, 1fr) max-content; border-bottom: 1px solid var(--ar-line); } .ar-act-log li:last-child { border-bottom: 0; } .ar-act-log__at { font-family: var(--ar-mono); font-size: 11px; color: var(--ar-ink-faint); white-space: nowrap; text-align: right; } /* Loading / error / empty states live in the modal's content area, centered, with enough height that the panel doesn't jump in size when rows arrive. */ .ar-act-log__state { margin: 0; display: flex; align-items: center; justify-content: center; min-height: 180px; padding: 24px; text-align: center; font-size: 13px; color: var(--ar-ink-soft); } .ar-act-log__state.is-error { color: var(--ar-bad); } .ar-act-sparkcap { margin: 0; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; color: var(--ar-ink-faint); } /* Ranked lists (top agents / by endpoint) */ .ar-act-rank { margin: 14px 0 0; padding: 0; list-style: none; display: grid; gap: 11px; } .ar-act-rank li { display: grid; grid-template-columns: minmax(0, 1fr) 90px auto; align-items: center; gap: 12px; } .ar-act-rank__label { font-size: 13px; color: var(--ar-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ar-act-rank__label code { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink); } .ar-act-rank__track { height: 7px; background: var(--ar-surface-2); border-radius: 999px; overflow: hidden; } .ar-act-rank__bar { display: block; height: 100%; background: var(--ar-accent); border-radius: 999px; } .ar-act-rank__n { font-family: var(--ar-mono); font-size: 12px; color: var(--ar-ink-soft); text-align: right; min-width: 24px; } .ar-act-more { margin: 11px 0 0; font-size: 11px; color: var(--ar-ink-faint); } /* 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); } /* ---- 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; width: 100%; margin: 0; padding: 6px 0; border: 0; background: transparent; cursor: pointer; text-align: left; color: inherit; } .ar-aiday__row:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; border-radius: 4px; } .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); } .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); } /* Flex (not grid): a grid item defaults to justify-self:stretch, which made the

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

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

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

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

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

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

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

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

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

/* 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); }
.ar-about-item {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 14px;
  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;
}
.ar-about-item__desc { margin: 4px 0 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); max-width: 80ch; }
.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; }
  .ar-about-item { flex-direction: column; }
  .ar-about-tag { align-self: flex-start; }
}