/* ============================================================================ Agentimus — admin UI Aesthetic: "technical broadsheet". Warm paper, dark ink masthead, editorial serif headings + monospace data. Scoped under #agentimus-app so nothing leaks into wp-admin. No external fonts (wordpress.org rule); system stacks. ========================================================================= */ /* Page-level: make our admin screen full-bleed. This file loads only on the Agentimus page, so these wp-admin overrides never touch other screens. Below 960px wp-admin's `.auto-fold/.folded #wpcontent` adds a 10px LEFT padding — a (0,2,0) selector that out-specifies a bare `#wpcontent`, so it left an uneven gap on the left of our full-bleed app. Match that specificity to zero it; leave margin-left alone so content still clears the folded admin menu when it's shown. */ #wpcontent, .auto-fold #wpcontent, .folded #wpcontent { padding-left: 0; } .wrap { margin: 0; } /* WP core gives #wpbody-content a 65px bottom padding. That space lives inside the sticky readiness rail's scroll box, so at the page bottom it is *also* exactly how far the rail's top tucks under the sticky header — footer gap and rail tuck are one dial. 16px keeps the footer off the content while barely clipping the gauge. */ #wpbody-content { padding-bottom: 16px; } /* A narrower-breakpoint core rule drops the admin footer's side padding to 20px, which pulls its text left of our content. Hold it at 34px — the app's content gutter (.ar__body's side padding) — so both footer lines land flush with the card edges. */ #wpfooter { padding-left: 34px; padding-right: 34px; color: #a7a7a7; } /* Design tokens — defined globally rather than only on #agentimus-app. Custom properties are inert (they paint nothing until a property references them), so this leaks no visuals into wp-admin, but it DOES let UI we Teleport to (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; /* Fields (inputs, textareas): in light the near-white surface already reads as a well against the cream cards, so the field tone IS the surface. Dark re-keys this — see the dark block. */ --ar-field: var(--ar-surface); --ar-ink: #1b1913; --ar-ink-soft: #6c675a; --ar-ink-faint: #9a937f; --ar-line: #e4ddcb; --ar-line-strong: #d3cab2; /* Signal */ --ar-accent: #146b64; --ar-good: #2f7a4c; --ar-warn: #ad7b18; --ar-bad: #b93c2b; --ar-info: #2f5f9e; /* blue — for informational actions (distinct from teal/green) */ /* The hover pill behind text buttons. ONE colour for every such button, whatever colour its own text is: hover means "your cursor is here", and a mark that changed hue per button would read as meaning something. Mixed rather than a flat hex so it washes over cream cards and white panels alike instead of stamping a rectangle of the wrong white on one of them. */ --ar-hover: color-mix(in srgb, #8bc34a 22%, transparent); /* Signal tints — the wash/tint/deep steps each signal family paints chips, card washes and borders with. Values are the hand-picked originals; the dark theme redefines the whole scale rather than each site. */ --ar-good-wash: #eef5f0; --ar-good-tint: #bcdcc6; --ar-good-bright: #5cc08a; --ar-good-strong: #2f9e5e; --ar-good-deep: #1d7a45; --ar-warn-wash: #f7f1df; --ar-warn-tint: #e6d5a8; --ar-warn-bright: #f2b23a; --ar-warn-mid: #e0b24c; --ar-warn-deep: #96690f; /* The Worth-knowing card's gold family: ink-strength gold for its text and chips, and his pale gold (#ebc98a, 2026-08-11) for the card's STRUCTURE — ground, border, glow — where a light tone belongs. Dark overrides below. */ --ar-note-gold: var(--ar-warn-deep); --ar-note-glow: #ebc98a; --ar-bad-wash: #f8ebe8; --ar-bad-tint: #e6c1b9; --ar-bad-mid: #e08a72; --ar-bad-strong: #c0392b; --ar-bad-deep: #8c2f22; --ar-info-wash: #e9eff7; --ar-info-tint: #c3d2e6; --ar-info-strong: #3a6ea5; --ar-info-deep: #2c5680; /* Accents tuned for ink-coloured surfaces (the dark score card, code blocks). In the dark theme those surfaces invert to cream, so these flip to the deep on-light values. */ --ar-teal-on-ink: #57b6a6; --ar-teal-on-ink-hover: #6fc7b8; --ar-good-on-ink: #5cc08a; --ar-warn-on-ink: #e0b24c; --ar-bad-on-ink: #e08a72; /* Accent washes (hover/selected fills behind accent-bordered controls). */ --ar-accent-wash: #f0f6f4; --ar-accent-soft: #e3efec; /* Text on a signal-coloured fill, and ink pushed past itself (the black a hovered ink button deepens to). Both flip with the theme. */ --ar-on-signal: #fff; --ar-ink-hard: #000; /* What darkness is made of: scrims and shades mix from this, NOT from ink — ink flips to cream in the dark theme, but a scrim must always dim. */ --ar-shade: #1b1913; /* The loading sheen that sweeps a skeleton. Bright over cream; in the dark theme it drops to a breath — a 45% white band over a night surface reads as a searchlight, not a shimmer. */ --ar-skel-sheen: rgba(255, 255, 255, 0.45); --ar-radius: 4px; /* Shared height for the nav bar and the page-head below it, so the two strips are always exactly the same height. Change here, both follow. */ --ar-bar-h: 72px; /* WP admin-bar height — the sticky header sits flush below it. 32px on desktop; 46px in the responsive-admin band; 0 once the bar stops being fixed (≤600px) and scrolls away. */ --ar-adminbar: 32px; } @media screen and (max-width: 782px) { :root { --ar-adminbar: 46px; } } @media screen and (max-width: 600px) { :root { --ar-adminbar: 0px; } } /* ---- Dark theme ---------------------------------------------------------- The palette inverts rather than restyles: paper becomes warm near-black, ink becomes cream, and every ink-coloured surface (the score card, the dark buttons, code blocks) flips to cream with dark type — same broadsheet, read under a desk lamp. Signals brighten one step for the dark ground; the tint scales derive from the signal hues against the dark surface, so they stay in key without a second hand-picked set. The switch is the data-ar-theme attribute on , set by theme.js (light / dark, with "system" resolved there); wp-admin around the app keeps its own colors. */ :root[data-ar-theme="dark"] { /* His pick: the cards wear wp-admin's own sidebar charcoal, so the app and the admin chrome around it read as one night. Page darker in the same hue; raised surfaces one step up. */ --ar-paper: #161c20; --ar-surface: #262d31; --ar-surface-2: #303940; /* Fields: the surface itself with ONLY its lightness raised — hue and saturation untouched, so the base colour genuinely stays the scheme's own (his formula, 2026-08-12: "slightly bright from its surface but same base color"; white-mixing washed the saturation and read as a different colour). +3.5% lightness lands on his hand-picked #2c2b2b under Modern. Every dialect re-keys via its own surface. */ /* Hand-tuned like every other dark token: the surface's own hue and saturation, lightness +3.5 points (his formula, 2026-08-12: "slightly bright from its surface but same base color"). A LITERAL on purpose — deriving it live (color-mix washed the saturation; relative-color resolved against the wrong scheme's surface) kept changing the base colour. Each scheme dialect sets its own in schemes.css. */ --ar-field: #2e363b; /* Off-white, deliberately shy of white: full-bright serif headings on black glare (his call) — and COOL, because the charcoal ground is cool; a warm cream here would clash in temperature. */ --ar-ink: #dde0e2; --ar-ink-soft: #a2a8ad; /* Raised from #6e757b (owner, 2026-08-11): at 11-12px the faint tier was unreadable against the dark surfaces. Still a clear step below soft. */ --ar-ink-faint: #8a9197; --ar-line: #39434a; --ar-line-strong: #47525a; /* One accent family at night: the brand's own teal, brightened for the charcoal — it leads everywhere an action or the chrome speaks (links, icon chips, the active tab, the brand ring), sits naturally beside the blue-charcoal ground, and keeps dark and light one brand. Green stays what it means: a good state. (The violet round was tried and retired — it read foreign against the charcoal.) */ /* Sage green at night (his pick, 2026-08-13: #8ab685 over the lighter #95c290 — 4 points darker, so the accent stops weighing exactly what secondary ink does, and the whole night reads calmer). Green also says what the one-accent law already means here: --ar-good IS the accent. Light mode keeps its teal; Coffee keeps the teal at night too (its own dialect below), so the green is Fresh/Midnight/Modern's night voice. */ --ar-accent: #8ab685; /* ONE accent at night. Green and the brand teal sat 22 degrees apart with the same weight — too close to read as a deliberate pair, too far to read as one colour — so "good" IS the accent here, and a verdict is carried by the word (PASS), the filled dot, and amber/red for anything needing you. A scheme block below that re-keys --ar-accent should re-key these two with it: they resolve the accent at :root, not at body. */ --ar-good: var(--ar-accent); --ar-warn: #e0b24c; --ar-bad: #e08a72; --ar-info: #8ab0e0; /* The dark chrome accent: the violet the rail cards, score identity and section labels wear at night. Light mode has no equivalent — its chrome is the ink itself. */ /* The chrome IS the good green — the same identity the light theme's score card has always worn. Two teal-greens side by side fought; one green doesn't. */ --ar-chrome: var(--ar-accent); --ar-chrome-bright: #a0c99c; --ar-chrome-line: color-mix(in srgb, #8ab685 24%, var(--ar-line)); --ar-hover: color-mix(in srgb, #8ab685 16%, transparent); --ar-good-wash: color-mix(in srgb, var(--ar-good) 10%, var(--ar-surface)); --ar-good-tint: color-mix(in srgb, var(--ar-good) 26%, var(--ar-surface)); --ar-good-strong: #a0c99c; --ar-good-deep: #b6d7b2; --ar-warn-wash: color-mix(in srgb, var(--ar-warn) 10%, var(--ar-surface)); --ar-warn-tint: color-mix(in srgb, var(--ar-warn) 26%, var(--ar-surface)); --ar-warn-deep: #eecd8d; /* His pick for the Worth-knowing card at night (2026-08-11): antique gold, one hex driving the card's text, chips, dividers, border and glow. */ --ar-note-gold: #c2a157; --ar-note-glow: #c2a157; --ar-bad-wash: color-mix(in srgb, var(--ar-bad) 10%, var(--ar-surface)); --ar-bad-tint: color-mix(in srgb, var(--ar-bad) 26%, var(--ar-surface)); --ar-bad-strong: #eda28d; --ar-bad-deep: #f2b5a3; --ar-info-wash: color-mix(in srgb, var(--ar-info) 10%, var(--ar-surface)); --ar-info-tint: color-mix(in srgb, var(--ar-info) 26%, var(--ar-surface)); --ar-info-strong: #93b6e2; --ar-info-deep: #b3cbeb; --ar-accent-wash: color-mix(in srgb, var(--ar-accent) 12%, var(--ar-surface)); --ar-accent-soft: color-mix(in srgb, var(--ar-accent) 20%, var(--ar-surface)); /* The state on-ink accents (good/warn/bad) keep their light values: the surfaces that wear them stay dark at night. The teal ACTION pair follows the violet — same family as every other link. */ --ar-teal-on-ink: #57b6a6; --ar-teal-on-ink-hover: #6fc7b8; --ar-on-signal: #14120e; --ar-ink-hard: #fff; --ar-shade: #000; --ar-skel-sheen: rgba(255, 255, 255, 0.05); } /* ---- Teleported surfaces re-ink themselves ----------------------------- Every dialog, drawer and toast is , because a modal rendered inside a panel is clipped by its ancestors' overflow. The cost is that it also leaves the app wrapper — so it stops inheriting our ink and inherits WordPress's instead (#3c434a, set on the admin body). In light that grey is close enough to pass unnoticed. In dark it is a catastrophe: his Client Decisions dialog rendered #3c434a bot names on a #2e2e2e chip — about 1.1:1, invisible. Backgrounds were fine throughout, because those are explicit vars; only `color` was left to inheritance, and inheritance is exactly what teleporting breaks. So each teleported ROOT states its ink. Anything descending from these is covered; anything new that teleports must be added here. The rule lives outside the dark block on purpose — the inheritance is wrong in both themes, and only the consequence differs. */ .ar-modal, .ar-drawer, .ar-toasts { color: var(--ar-ink); } /* Ink-coloured surfaces hold their ground at night: background var(--ar-ink) would flip them cream, and a cream slab on a black page is a glare panel. Each becomes a quiet dark card instead. */ :root[data-ar-theme="dark"] .ar__mark, :root[data-ar-theme="dark"] .ar-wiz__welcome-mark--brand { background: var(--ar-surface-2); color: var(--ar-ink); } :root[data-ar-theme="dark"] .ar-btn { background: var(--ar-surface-2); color: var(--ar-ink); border-color: var(--ar-line-strong); } :root[data-ar-theme="dark"] .ar-btn:hover:not(:disabled) { background: #3a454d; border-color: var(--ar-ink-faint); box-shadow: none; } :root[data-ar-theme="dark"] .ar-srcpick__btn.is-on { background: var(--ar-accent); color: var(--ar-on-signal); } :root[data-ar-theme="dark"] .ar-tags__chip { background: var(--ar-surface-2); color: var(--ar-ink); } /* The service tray recedes GENTLY at night: full paper made a pit in the charcoal card, and the card-coloured fields inside drowned among borders. Half-way between paper and surface mirrors light's cream-wash proportion, so the fields pop the way the white ones do by day. */ :root[data-ar-theme="dark"] .ar-svc { background: color-mix(in srgb, var(--ar-paper) 45%, var(--ar-surface)); } /* The nav ladder is faint -> soft -> ink; on the dark grounds the faint rung measures ~2.6:1 — below reading. Dark lifts the whole ladder one step: soft at rest, ink on hover, active unchanged (already ink). */ :root[data-ar-theme="dark"] .ar__tab { color: var(--ar-ink-soft); } :root[data-ar-theme="dark"] .ar__tab:hover { color: var(--ar-ink); } /* (.ar-about-priv__cell--head needs no dark block any more — it stopped being an inverted panel and now shares its siblings' ground and ink in both themes.) */ :root[data-ar-theme="dark"] .ar-about-snippet { background: #0d1114; color: var(--ar-ink-soft); } /* The rail is where the violet chrome lives: card borders, section labels, the score identity. Content cards to the left stay neutral. */ :root[data-ar-theme="dark"] .ar-rail-card { border-color: var(--ar-chrome-line); } :root[data-ar-theme="dark"] .ar-rail-card__label { color: var(--ar-chrome); } :root[data-ar-theme="dark"] .ar-rail-card.ar-rail-card--readiness { background: var(--ar-surface); border-color: var(--ar-chrome-line); } /* The tier/rung text outside the readiness card is paper-tinted for the old ink ground — paper is near-black now, so those lines re-ink from the grays. (The readiness card itself no longer needs this: it names --rail-face.) */ :root[data-ar-theme="dark"] .ar-rail-tier__name { color: var(--ar-ink); } :root[data-ar-theme="dark"] .ar-rail-tier__sub { color: var(--ar-ink-faint); } :root[data-ar-theme="dark"] .ar-rung { color: color-mix(in srgb, var(--ar-ink) 55%, transparent); } /* Those two base re-inks outrank the light theme's state rules by source order, so the states re-assert here (values unchanged from light — these surfaces are dark in both themes). */ :root[data-ar-theme="dark"] .ar-rung[data-state="current"] { color: var(--ar-warn-on-ink); } :root[data-ar-theme="dark"] .ar-rung__todo { color: var(--ar-warn-on-ink); } /* The big score numerals read as ink at night, like the gauge number — color belongs to words and marks; a neon number bites. */ :root[data-ar-theme="dark"] .ar-today__score-n { color: var(--ar-ink); } /* A 0.3-alpha black shadow reads on cream but not on near-black: the stuck pagehead deepens to true black and gains a hairline edge (as a shadow layer, so nothing shifts by a pixel). */ :root[data-ar-theme="dark"] .ar__sticky.is-stuck { box-shadow: 0 1px 0 var(--ar-line-strong), 0 8px 18px -12px rgba(0, 0, 0, 0.9), 0 2px 5px -3px rgba(0, 0, 0, 0.6); } :root[data-ar-theme="dark"] .ar-rail-tier[data-state="floor"] .ar-rail-tier__name { color: var(--ar-bad-on-ink); } :root[data-ar-theme="dark"] .ar-rail-tier[data-state="local"] .ar-rail-tier__name { color: var(--ar-warn-on-ink); } /* The brand A drew its legs in paper on the ink tile; on the dark tile they re-ink light (the gold crossbar needs no help). */ :root[data-ar-theme="dark"] .ar__logo-line { stroke: var(--ar-ink); } :root[data-ar-theme="dark"] .ar-rail-tier[data-state="top"] .ar-rail-tier__name, :root[data-ar-theme="dark"] .ar-rung[data-state="done"] { color: var(--ar-chrome); } /* The app is transparent in light mode (it sits on wp-admin's own gray); in dark it must paint its own ground or the admin backdrop shines through. */ :root[data-ar-theme="dark"] #agentimus-app, :root[data-ar-theme="dark"] #wpbody { background: var(--ar-paper); } /* Native form controls otherwise keep wp-admin's white: repaint them from the tokens, and let color-scheme flip the browser-drawn parts (date-picker icons, select arrows, scrollbars). Checkboxes/radios/ranges stay native. */ :root[data-ar-theme="dark"] #agentimus-app, :root[data-ar-theme="dark"] .ar-modal, :root[data-ar-theme="dark"] .ar-drawer { color-scheme: dark; } :root[data-ar-theme="dark"] :is(#agentimus-app, .ar-modal, .ar-drawer) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) { /* --ar-field, not --ar-surface: surface-on-surface left every field distinguishable only by its border (his catch, 2026-08-12) — fields recess into a well near the page tone instead. */ background-color: var(--ar-field); color: var(--ar-ink); border-color: var(--ar-line-strong); } /* The repaint above outranks the shared focus rule by specificity, so the focused border re-asserts here — accent border + accent glow, same as day. */ :root[data-ar-theme="dark"] :is(#agentimus-app, .ar-modal, .ar-drawer) :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select):focus { border-color: var(--ar-accent); } /* The same for the LIGHT theme, which never got the twin: a key file, a doc link, a "view the file" all fell back to wp-admin's blue underline while the dark theme had been painting them in the accent since 1.35 (2026-08-15). :where() again — zero specificity, so the rail's own ink, the .ar-go rule and every other class-styled link still outrank it. Underline on hover only, matching the in-app links; the ↗ is what says this one leaves. */ /* Class-less only. This was written for prose links — an anchor that carries a class already has a dress, and repainting it here means every styled link in the app has to defend itself against a rule it never asked for (the masthead lost that fight). The :not() rides INSIDE :where() so it costs nothing: the selector keeps the plain `a` weight it has always had, which is exactly what it needs to beat wp-admin's own `a { color: #2271b1 }` on source order. Written as :where(a:not([class])) the whole thing falls to zero and core wins — a prose link goes admin-blue. Measured, not guessed. */ :where(#agentimus-app, .ar-modal, .ar-drawer) a:where(:not([class])) { color: var(--ar-accent); text-decoration: none; } :where(#agentimus-app, .ar-modal, .ar-drawer) a:where(:not([class])):hover, :where(#agentimus-app, .ar-modal, .ar-drawer) a:where(:not([class])):focus-visible { color: color-mix(in srgb, var(--ar-accent) 55%, var(--ar-ink)); text-decoration: underline; text-decoration-thickness: 1px; text-underline-offset: 3px; } /* Bare anchors — prose links that carry no .ar-* class — otherwise inherit wp-admin's link blue, a stranger at night. :where() keeps this at element specificity so every class-styled link still outranks it. */ :where(:root[data-ar-theme="dark"] #agentimus-app, :root[data-ar-theme="dark"] .ar-modal, :root[data-ar-theme="dark"] .ar-drawer) a { color: var(--ar-accent); } :where(:root[data-ar-theme="dark"] #agentimus-app, :root[data-ar-theme="dark"] .ar-modal, :root[data-ar-theme="dark"] .ar-drawer) a:hover, :where(:root[data-ar-theme="dark"] #agentimus-app, :root[data-ar-theme="dark"] .ar-modal, :root[data-ar-theme="dark"] .ar-drawer) a:focus { color: var(--ar-chrome-bright); } #agentimus-app { /* Full-bleed: wp-admin's content padding is neutralized below, so the app fills the admin body edge-to-edge with no left/right gap. Transparent so it sits on wp-admin's own background — no floating "document" panel. */ margin: 0 0 24px; container-type: inline-size; color: var(--ar-ink); font-family: var(--ar-sans); font-size: 14px; line-height: 1.5; background: transparent; /* iOS WebKit inflates text inside long-prose blocks ("font boosting") unless told not to; the inflated nowrap/mono runs then exceed the phone's viewport and the whole page pans sideways. Pin the size — the layout is already responsive. */ -webkit-text-size-adjust: 100%; text-size-adjust: 100%; } #agentimus-app * { box-sizing: border-box; } /* Breathing room when a tile or readiness link scrolls a target to the top. */ #agentimus-app [id^="ar-"] { scroll-margin-top: 16px; } /* overflow-wrap only bites when a token can't fit its line at all, so desktop is untouched — but on a phone a long unbroken path (/.well-known/…, agentimus/…) wraps instead of widening its row past the viewport. */ #agentimus-app code { font-family: var(--ar-mono); font-size: 0.86em; overflow-wrap: anywhere; } /* A jumped-to target (a readiness "fix" link, a rail rung, a dashboard tile) briefly rings so the eye lands on the exact control to change. */ @keyframes ar-jump-flash { from { box-shadow: 0 0 0 2px var(--ar-accent), 0 0 0 7px color-mix(in srgb, var(--ar-accent) 16%, transparent); } to { box-shadow: 0 0 0 2px color-mix(in srgb, var(--ar-accent) 0%, transparent), 0 0 0 7px color-mix(in srgb, var(--ar-accent) 0%, transparent); } } #agentimus-app .ar-jump-flash { animation: ar-jump-flash 1.5s ease-out forwards; } @media (prefers-reduced-motion: reduce) { #agentimus-app .ar-jump-flash { animation: none; box-shadow: 0 0 0 2px var(--ar-accent); } } /* Quiet privacy framing under the dashboard summary tiles. */ /* No own margins — the parent .ar-act grid's 22px gap spaces it equally above and below (grid gaps DON'T collapse with margins, they add, so any margin here desyncs the two). */ .ar-dash-note { margin: 0; font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-faint); } /* Privacy-fact mark: a small shield-check opens an honesty footnote. One meaning — "this data stays here" — and never interactive (small circles that LOOK clickable are the ? explainer buttons; this is a mark, not a control). Compose with the note's own class; the icon inherits its colour. */ .ar-privnote::before { content: ""; display: inline-block; width: 14px; height: 14px; margin-right: 7px; vertical-align: -2.5px; /* The version line's own gold, not the note's faint ink (his call, 2026-08-12): the one mark that says "this stays here" earns the one warm accent, and stops disappearing in dark. */ background: var(--ar-warn); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.3-2.9 7.9-7 9.3-4.1-1.4-7-5-7-9.3V5.8z'/%3E%3Cpath d='M9 11.6l2.1 2.1 3.9-4.3'/%3E%3C/svg%3E") center / contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3l7 2.8v5.4c0 4.3-2.9 7.9-7 9.3-4.1-1.4-7-5-7-9.3V5.8z'/%3E%3Cpath d='M9 11.6l2.1 2.1 3.9-4.3'/%3E%3C/svg%3E") center / contain no-repeat; } /* ---- Header bar (brand · tabs · gauge in one slim row) ------------------ */ /* The nav bar + page-head travel together and STAY at the top on scroll — wrapped in one sticky block so a nav row that wraps on a narrow screen can never desync from the title strip below it. Flush below the WP admin bar; z-index keeps it over the scrolling content while staying under the modals/toasts (which teleport to at 100000+). */ .ar__sticky { position: sticky; top: var(--ar-adminbar); z-index: 40; transition: box-shadow 0.24s ease; } /* Once the page is scrolled, the pinned header lifts above the content with a soft shadow (the pagehead's hairline stays as the crisp edge) so the two never merge. The .is-stuck class is toggled from App.vue on scroll. */ .ar__sticky.is-stuck { box-shadow: 0 8px 18px -12px rgba(38, 32, 24, 0.32), 0 2px 5px -3px rgba(38, 32, 24, 0.12); } @media (prefers-reduced-motion: reduce) { .ar__sticky { transition: none; } } .ar__bar { display: flex; align-items: stretch; gap: 26px; /* Match .ar__body's 34px so the brand mark and gauge line up with the content cards' left/right edges. */ padding: 0 34px; min-height: var(--ar-bar-h); background: var(--ar-surface); border-bottom: 1px solid var(--ar-line); } /* Brand — clickable, returns to the default (Settings) tab. */ .ar__brand { flex: 0 0 auto; display: flex; align-items: center; gap: 11px; align-self: center; appearance: none; background: none; border: 0; margin: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; text-decoration: none; /* it's a real now — no underline on the masthead */ transition: opacity 0.15s; } .ar__brand:hover { opacity: 0.82; } /* The masthead is a link, but it is not prose: the app-wide bare-anchor hover was drawing a rule under the version line (his catch, 2026-08-15). Its own `text-decoration: none` could not win — a hover selector outranks a plain class — so the hover state says it itself. Fading is the whole feedback. */ .ar__brand:hover, .ar__brand:focus-visible { text-decoration: none; color: inherit; } /* As a real the masthead inherits wp-admin's global a:focus blue ring (it fires on right-click too); silence that and keep OUR ring for keyboard focus. A logo-link isn't prose either — no text selection on click. */ .ar__brand { user-select: none; -webkit-user-select: none; } .ar__brand:focus { outline: 0; box-shadow: none; } .ar__brand:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 4px; border-radius: 6px; } .ar__mark { display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 8px; background: var(--ar-ink); color: var(--ar-paper); /* Framed-icon look: a gap in the bar colour, then an offset accent ring, so the ring reads as a clean frame rather than a muddy edge. */ box-shadow: 0 0 0 2px var(--ar-surface), 0 0 0 3px var(--ar-accent), 0 1px 5px -1px color-mix(in srgb, var(--ar-shade) 25%, transparent); } /* Name + version stacked, both flush-left, within the 30px mark height. The wordmark sets the column width; the version line is justified (spread by letter-spacing) to fill that exact width — so line 2 matches line 1's width. */ .ar__brandtext { display: inline-flex; flex-direction: column; align-items: stretch; justify-content: center; gap: 5px; } /* SVG "AR" monogram — paper strokes with a gold accent on the A's crossbar. */ .ar__logo { width: 18px; height: auto; display: block; } .ar__logo-line { stroke: var(--ar-paper); stroke-width: 2.4; } .ar__logo-accent { stroke: var(--ar-warn); stroke-width: 2.2; } .ar__name { font-family: var(--ar-serif); font-weight: 600; font-size: 16px; line-height: 1; letter-spacing: -0.01em; color: var(--ar-ink); } .ar__ver { /* Same gold as the readiness gauge / 6-of-11 figure. */ font-family: var(--ar-sans); font-size: 9px; line-height: 1; color: var(--ar-warn); text-align: justify; text-align-last: justify; text-justify: inter-character; -moz-text-align-last: justify; } /* The gold-gem arrow — part of the BRAND BUTTON now, so the whole masthead including it is one clickable unit. Two angled bars meet at a framed gold node pointing toward the menu; the gold echoes the version line + logo crossbar, the ring echoes the logo's framed mark. */ .ar__brandarrow { display: inline-flex; margin-left: 5px; } .ar__brandarrow svg { display: block; } .ar__sep-chev { stroke: var(--ar-line-strong); stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; } /* Dark: the bars vanished into the bar's ground — they go gold-warmed (his call, 2026-08-12), a quieter echo of the node they point through. */ :root[data-ar-theme="dark"] .ar__sep-chev { stroke: color-mix(in srgb, var(--ar-warn) 55%, var(--ar-line-strong)); } .ar__sep-ring { stroke: color-mix(in srgb, var(--ar-warn) 45%, transparent); stroke-width: 1; } .ar__sep-node { fill: var(--ar-warn); filter: drop-shadow(0 0 2px color-mix(in srgb, var(--ar-warn) 45%, transparent)); } /* Brand / nav break — invisible on wide screens; on narrow screens the media block below turns it into a full-width flex line break. */ .ar__sep { display: none; } /* Tabs — inline in the bar, active item underlined at the bar's base. The strip takes the space left of the brand and scrolls horizontally when it can't fit, so no tab is ever clipped on narrow screens. */ .ar__tabs { /* `0 1 auto`, not `1 1 auto`: the nav no longer absorbs the bar's free space, so the More menu can sit immediately after Discovery instead of being pushed to the far right. .ar__review takes the slack with margin-left:auto. */ flex: 0 1 auto; min-width: 0; display: flex; align-items: stretch; gap: 24px; overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; } .ar__tabs::-webkit-scrollbar { display: none; } .ar__tab { appearance: none; background: none; border: 0; cursor: pointer; flex: 0 0 auto; white-space: nowrap; display: flex; align-items: center; padding: 0 2px; font-family: var(--ar-mono); font-size: 11px; letter-spacing: 0.14em; text-transform: uppercase; color: var(--ar-ink-faint); border-bottom: 2px solid transparent; margin-bottom: -1px; transition: color 0.15s; } .ar__tab:hover { color: var(--ar-ink-soft); } .ar__tab.is-active { color: var(--ar-ink); border-bottom-color: var(--ar-accent); } /* The Findings tab's open count — the findings' amber, never the bell's red (red means clients waiting on a verdict, amber means work worth doing). Inline after the label, not a corner bubble: a bar tab owns its text line, and the tab's flex row seats it without new layout. */ .ar__tab-count { margin-left: 7px; min-width: 16px; height: 16px; padding: 0 4px; display: inline-flex; align-items: center; justify-content: center; border-radius: 999px; background: var(--ar-warn); color: var(--ar-paper); font-size: 10px; font-weight: 700; letter-spacing: 0; } /* The tab's third weight. A number means DO something; this dot means LOOK at something — a finding whose work is finished and waiting on a report, or one that has just moved. Deliberately smaller and quieter than the count: it is an invitation, not a debt. It never appears alongside a count, so the tab carries exactly one signal at a time. */ .ar__tab-dot { margin-left: 7px; width: 6px; height: 6px; border-radius: 999px; display: inline-block; background: var(--ar-ink-faint); } .ar__tab-dot.is-news { background: var(--ar-good); } /* Each tab's mark — inherits the label's ink so it dims, wakes and activates with the text as one unit. */ .ar__tab-ic { display: inline-flex; margin-right: 7px; } .ar__tab-ic svg { width: 13px; height: 13px; display: block; } /* ---- Nav "Activity to review" badge + dropdown ------------------------- */ /* NOT position:relative — the queue pop positions against .ar__controls (the whole cluster), because the bell stopped being the rightmost control when the gear took that seat: anchored to the bell alone, the pop hung off the left edge of a phone and stopped 38px short of the content edge on desktop. */ .ar__review { flex: 0 0 auto; align-self: center; margin-left: auto; } .ar__review-btn { appearance: none; cursor: pointer; position: relative; /* anchors the corner count bubble */ 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; } /* Count badges ride the CORNER of their control, out of flow — one badge grammar for the whole trio. Inline counts forced the bell into a pill and deformed the Attention circle into a blob; a corner bubble leaves every control a clean circle and costs the row no width at all. */ .ar__review-count { position: absolute; top: -5px; right: -6px; z-index: 1; font-family: var(--ar-mono); font-size: 10px; font-weight: 700; line-height: 1; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 999px; display: inline-flex; align-items: center; justify-content: center; background: var(--ar-bad); color: var(--ar-paper); /* A paper ring so the bubble reads as sitting ABOVE the circle it overlaps — including the filled is-here disc — not as a bite out of its edge. */ box-shadow: 0 0 0 2px var(--ar-paper); } /* ---- Loading skeletons ------------------------------------------------------ A data screen's first paint used to be its header over a blank page while the fetch ran. Each screen now sketches its own real layout in quiet surface blocks with one slow sheen — enough to say "coming", never a spinner. Shapes are composed per screen from these primitives; the sheen stands down under prefers-reduced-motion. -------------------------------- */ .ar-skel { position: relative; overflow: hidden; border-radius: 6px; background: var(--ar-surface-2); } .ar-skel::after { content: ''; position: absolute; inset: 0; background: linear-gradient(100deg, transparent 32%, var(--ar-skel-sheen) 50%, transparent 68%); transform: translateX(-100%); animation: ar-skel-sheen 1.7s ease-in-out infinite; } @keyframes ar-skel-sheen { to { transform: translateX(100%); } } @media (prefers-reduced-motion: reduce) { .ar-skel::after { animation: none; } } .ar-skel--title { height: 17px; width: 210px; } .ar-skel--line { height: 12px; } .ar-skel--tile { height: 82px; border-radius: var(--ar-radius); flex: 1 1 0; } .ar-skel-tiles { display: flex; gap: 14px; margin: 0 0 18px; } .ar-skel-lines { display: grid; gap: 11px; align-content: start; } .ar-skel-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 26px; margin-top: 22px; } .ar-skel-head { margin: 0 0 18px; display: grid; gap: 10px; } @container (max-width: 720px) { .ar-skel-cols { grid-template-columns: 1fr; } .ar-skel-tiles { flex-wrap: wrap; } .ar-skel--tile { flex: 1 1 40%; } } /* ---- Writing assistant: quill launcher + guidance popover + drawer ---------- */ /* The quill shares the bell's chrome (.ar__review-btn). Dimmed = prerequisites missing — visible but quiet, per the "never hidden, say how to turn it on" rule. */ /* The quill takes the bell's old margin-left:auto job (it now sits first in the right-edge pair); the bell then nestles beside it with a small gap. */ .ar__assist { flex: 0 0 auto; align-self: center; position: relative; margin-left: auto; } .ar__assist + .ar__review { margin-left: -16px; } .ar__assist-btn.is-dim { opacity: 0.45; } .ar__assist-btn.is-dim:hover { opacity: 0.7; } .ar__assist-guide { position: absolute; top: calc(100% + 8px); right: 0; z-index: 60; width: 340px; max-width: calc(100cqw - 32px); background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); box-shadow: 0 14px 36px -12px color-mix(in srgb, var(--ar-shade) 45%, transparent); padding: 14px 16px; } .ar__assist-guide__title { display: block; font-size: 13px; color: var(--ar-ink); } .ar__assist-guide__lead { margin: 6px 0 8px; font-size: 12px; color: var(--ar-ink-soft); } .ar__assist-guide__list { list-style: none; margin: 0; padding: 0; display: grid; gap: 9px; } .ar__assist-guide__list li { display: flex; gap: 8px; font-size: 12px; line-height: 1.5; color: var(--ar-ink-soft); } .ar__assist-guide__list li.is-done { opacity: 0.66; } .ar__assist-guide__mark { flex: 0 0 auto; width: 17px; height: 17px; margin-top: 1px; border-radius: 50%; display: grid; place-items: center; font-size: 10px; font-weight: 700; color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 9%, var(--ar-surface)); border: 1px solid color-mix(in srgb, var(--ar-accent) 30%, var(--ar-surface)); } .ar__assist-guide__foot { margin: 10px 0 0; padding-top: 9px; border-top: 1px solid var(--ar-line); font-size: 11px; color: var(--ar-ink-faint); } /* The drawer: right panel desktop, full sheet on phones (svh — the real viewport). */ .ar-drawer { position: fixed; inset: 0; z-index: 100060; } .ar-drawer__scrim { position: absolute; inset: 0; background: color-mix(in srgb, var(--ar-shade) 38%, transparent); } .ar-drawer__panel { position: absolute; top: 0; right: 0; bottom: 0; width: 600px; max-width: 100vw; display: flex; flex-direction: column; background: var(--ar-surface); border-left: 1px solid var(--ar-line-strong); box-shadow: -18px 0 48px -18px color-mix(in srgb, var(--ar-shade) 50%, transparent); outline: none; } @media (max-width: 782px) { .ar-drawer__panel { width: 100%; border-left: 0; height: 100vh; height: 100svh; } } .ar-drawer-enter-active, .ar-drawer-leave-active { transition: opacity 0.18s ease; } .ar-drawer-enter-active .ar-drawer__panel, .ar-drawer-leave-active .ar-drawer__panel { transition: transform 0.22s ease; } .ar-drawer-enter-from, .ar-drawer-leave-to { opacity: 0; } .ar-drawer-enter-from .ar-drawer__panel, .ar-drawer-leave-to .ar-drawer__panel { transform: translateX(100%); } .ar-drawer__head { flex: 0 0 auto; display: flex; align-items: flex-start; gap: 11px; padding: 18px 20px 14px; border-bottom: 1px solid var(--ar-line-strong); background: var(--ar-surface); } .ar-drawer__quill { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: var(--ar-accent); background: color-mix(in srgb, var(--ar-accent) 9%, var(--ar-surface)); border: 1px solid color-mix(in srgb, var(--ar-accent) 26%, var(--ar-surface)); } .ar-drawer__titles { min-width: 0; flex: 1; } .ar-drawer__title { margin: 0; font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); line-height: 1.2; } .ar-drawer__sub { margin: 3px 0 0; font-size: 12px; color: var(--ar-ink-faint); } /* Sits beside the close: same 30px row, so the pair reads as one corner unit. */ .ar-drawer__back { flex: 0 0 auto; align-self: flex-start; height: 30px; display: inline-flex; align-items: center; margin-right: 10px; white-space: nowrap; } .ar-drawer__close { flex: 0 0 auto; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: transparent; border: 1px solid var(--ar-line); color: var(--ar-ink-soft); cursor: pointer; } .ar-drawer__close:hover { border-color: var(--ar-line-strong); color: var(--ar-ink); } .ar-drawer__body { flex: 1 1 auto; min-height: 0; overflow-y: auto; padding: 18px 20px; } /* Screens with a pinned foot own their bottom spacing — the foot must sit flush. Flex column so a SHORT outline's foot still anchors to the drawer's bottom edge (margin-top:auto) instead of floating mid-panel; when content overflows, sticky takes over and pins it exactly the same. */ .ar-drawer__body--footed { padding-bottom: 0; display: flex; flex-direction: column; } .ar-drawer__body--footed > * { flex: 0 0 auto; } .ar-drawer__body--footed .ar-assist__foot { margin-top: auto; padding-top: 13px; } /* Whatever ends the scrolled content gets daylight before the pinned foot — flush against the foot's rule + shadow it read as clipped even fully scrolled. */ .ar-drawer__body--footed > :nth-last-child(2) { margin-bottom: 14px; } /* A quiet, thin scrollbar with a permanently reserved gutter: on systems with classic (space-taking) scrollbars, content appearing/disappearing can't nudge the layout sideways when the bar pops in. overscroll-behavior keeps a wheel that reaches the list's end from chaining into the page behind. */ .ar-drawer__body { scrollbar-gutter: stable; scrollbar-width: thin; scrollbar-color: var(--ar-line-strong) transparent; overscroll-behavior: contain; } /* Brief */ .ar-assist__label { display: block; font-size: 12.5px; font-weight: 600; color: var(--ar-ink); margin-bottom: 7px; } .ar-assist__prompt { width: 100%; resize: vertical; min-height: 120px; font-size: 13px; line-height: 1.55; color: var(--ar-ink); background: var(--ar-surface); border: 1px solid var(--ar-line-strong); border-radius: 9px; padding: 10px 12px; } .ar-assist__prompt:focus { outline: none; border-color: var(--ar-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-accent) 15%, transparent); } .ar-assist__hint { margin: 8px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ar-ink-faint); } .ar-assist__error { margin: 10px 0 0; font-size: 11.5px; font-weight: 500; line-height: 1.55; color: var(--ar-bad); } .ar-assist__actions { display: flex; align-items: center; gap: 10px; margin-top: 14px; } .ar-assist__actions .ar-assist__go { margin-left: auto; display: inline-flex; align-items: center; gap: 7px; } .ar-assist__spacer { flex: 1; } /* Compound selector on purpose: the base .ar-spinner (26px) is declared LATER in this file and would win the tie — this must outrank it, or every button spinner inflates to 26px and bumps the button height mid-call. border-box, because without it the borders render OUTSIDE the 12px (16px total — taller than the button's text line, which is the height bump all over again). */ .ar-spinner.ar-assist__spin { box-sizing: border-box; width: 12px; height: 12px; border-width: 2px; flex: 0 0 auto; } .ar-assist__status { font-size: 12px; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--ar-line-strong); background: var(--ar-surface); color: var(--ar-ink); } /* The held-draft bar: a paid generation is never silently unreachable. */ .ar-assist__held { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; padding: 8px 11px; border-radius: 9px; border: 1px solid color-mix(in srgb, var(--ar-accent) 26%, var(--ar-surface)); background: color-mix(in srgb, var(--ar-accent) 5%, var(--ar-surface)); } .ar-assist__heldtext { font-size: 12px; color: var(--ar-ink-soft); } /* The outline gate: the skeleton the owner shapes before the expensive draft. */ .ar-assist__otitle { display: block; width: 100%; margin-bottom: 14px; font-family: var(--ar-serif); font-size: 14.5px; font-weight: 600; } .ar-assist__osections { display: grid; gap: 9px; margin-bottom: 9px; } .ar-assist__osection { position: relative; /* Anchors the corner remove button. */ display: grid; gap: 6px; padding: 10px 38px 10px 10px; border-radius: 9px; border: 1px solid var(--ar-line); background: var(--ar-surface-2); } .ar-assist__osecrow { display: flex; align-items: center; gap: 8px; } .ar-assist__onum { flex: 0 0 auto; font-family: var(--ar-mono); font-size: 10px; color: var(--ar-ink-faint); width: 16px; text-align: right; } .ar-assist__osecrow .ar-assist__refineinput { font-weight: 600; } /* The note is a textarea so a full sentence stays fully visible — it grows to its content where the browser supports field-sizing, and falls back to two comfortable rows elsewhere. Never a horizontal one-line peephole. The left inset mirrors the number gutter, so heading and note share the exact same width — the remove button lives in the card's right gutter, not the row. */ .ar-drawer textarea.ar-assist__onote, .ar-assist__onote { display: block; margin-left: 24px; width: calc(100% - 24px); font-size: 12.5px; line-height: 1.5; color: var(--ar-ink-soft); resize: none; field-sizing: content; min-height: 30px; } .ar-assist__oremove { position: absolute; top: 15px; right: 7px; display: grid; place-items: center; width: 24px; height: 24px; appearance: none; border: 0; border-radius: 7px; cursor: pointer; color: var(--ar-ink-faint); background: transparent; } .ar-assist__oremove:hover { color: var(--ar-bad); background: color-mix(in srgb, var(--ar-bad) 8%, transparent); } .ar-assist__oremove:disabled { opacity: 0.5; cursor: default; } /* Staged write: the outline screen doubles as the progress screen — a mark per * part, and slim dashed rows for the bookends (introduction, closing, dressing) * that aren't editable sections. */ .ar-assist__opart { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 9px 0 0; padding: 8px 11px; border-radius: 9px; border: 1px dashed var(--ar-line); } .ar-assist__opart--lead { margin: 0 0 9px; } .ar-assist__opartlabel { flex: 1; font-size: 12px; color: var(--ar-ink-soft); } /* One 16px state dot: hollow while waiting, a turning ring while writing, * a check when landed, a cross when the part must be retried. border-box * everywhere — the same tie the button spinner already fights. */ .ar-assist__omark { box-sizing: border-box; flex: 0 0 auto; display: grid; place-items: center; width: 16px; height: 16px; border-radius: 50%; } .ar-assist__omark.is-pending { border: 1.5px dashed var(--ar-line-strong); } .ar-assist__omark.is-busy { border: 2px solid var(--ar-line-strong); border-top-color: var(--ar-accent); animation: ar-spin 0.7s linear infinite; } .ar-assist__omark.is-done::after { content: ''; box-sizing: border-box; width: 5px; height: 9px; margin-top: -2px; border-right: 2px solid var(--ar-good); border-bottom: 2px solid var(--ar-good); transform: rotate(45deg); } .ar-assist__omark.is-error { color: var(--ar-bad); font-size: 14px; font-weight: 700; } .ar-assist__omark.is-error::after { content: '×'; line-height: 1; } @media (prefers-reduced-motion: reduce) { .ar-assist__omark.is-busy { animation-duration: 1.6s; } } /* A failed part's sentence, under its row. Inside a section card it aligns * with the note's inset gutter. */ .ar-assist__oparterror { flex: 1 1 100%; margin: 0; font-size: 11.5px; line-height: 1.45; color: var(--ar-bad); } .ar-assist__oparterror--insec { margin-left: 24px; } /* The outline screen's pinned foot: the section list scrolls, the actions * never leave the viewport. Bleeds over the body's padding so content slides * beneath it edge-to-edge (same idea as the review queue's pinned footer). */ .ar-assist__foot { position: sticky; bottom: 0; z-index: 4; margin: 16px -20px 0; padding: 11px 20px 15px; background: var(--ar-surface); border-top: 1px solid var(--ar-line-strong); box-shadow: 0 -12px 22px -16px color-mix(in srgb, var(--ar-shade) 40%, transparent); } .ar-assist__footrow { display: flex; align-items: center; gap: 13px; flex-wrap: wrap; } .ar-assist__footrow--commit { margin-top: 10px; } .ar-assist__footrow .ar-assist__go { display: inline-flex; align-items: center; gap: 7px; } /* …unless it is reserving width. The rule above is more specific than .ar-btn--reserve, so inline-flex won and the hidden reserve text stopped being a stacked grid cell and became a FLEX SIBLING — sitting beside the label, shoving it off centre and doubling the button's width. Restated at matching specificity, the same way the Findings refresh does it. */ .ar-assist__footrow .ar-assist__go.ar-btn--reserve { display: inline-grid; justify-items: center; } .ar-assist__footerror { margin: 0 0 9px; } .ar-assist__resetlink { color: var(--ar-ink-faint); } .ar-assist__resetlink:hover { color: var(--ar-bad); } .ar-assist__postlist { display: grid; gap: 8px; margin-top: 12px; } /* A row is an now, so it carries link resets rather than button ones — and no blocked state: the list stopped refusing rows when it stopped rewriting them. */ .ar-assist__postitem { text-align: left; cursor: pointer; text-decoration: none; display: grid; gap: 4px; padding: 10px 12px; border: 1px solid var(--ar-line); border-radius: 9px; background: var(--ar-surface); } .ar-assist__postitem:hover { border-color: var(--ar-accent); } .ar-assist__postitem:focus-visible { outline: 2px solid var(--ar-accent); outline-offset: 2px; } .ar-assist__posttitle { font-size: 13px; font-weight: 600; color: var(--ar-ink); } .ar-assist__postmeta { display: flex; align-items: center; gap: 8px; font-size: 11px; color: var(--ar-ink-faint); } /* Where the row goes, said once per row but only on hover/focus — every row goes to the same place, so saying it constantly is noise. */ .ar-assist__postgo { margin-left: auto; color: var(--ar-accent); opacity: 0; transition: opacity 0.15s ease; } .ar-assist__postitem:hover .ar-assist__postgo, .ar-assist__postitem:focus-visible .ar-assist__postgo { opacity: 1; } /* Start over's confirm, wherever it's armed — the brief's action row and both pinned feet share these two. (The brief screen's separate dashed strip is gone: it lived under the buttons and duplicated the link now sitting in the action row beside them.) */ /* The reset confirm holds its two answers on ONE line. The row wraps by design — four controls on a narrow drawer need to — but a question whose "Yes, clear it" and "Keep it" land on different lines stops reading as a pair and becomes two unrelated links, one of them destructive. The PROSE gives way instead: it shrinks and wraps within itself, which costs nothing. */ .ar-assist__footrow--confirm { flex-wrap: nowrap; } .ar-assist__footrow--confirm .ar-assist__resettext { flex: 1 1 auto; min-width: 0; } .ar-assist__footrow--confirm .ar-linkbtn { flex: 0 0 auto; white-space: nowrap; } .ar-assist__resettext { font-size: 11.5px; color: var(--ar-ink-faint); } .ar-assist__resetdanger { color: var(--ar-bad); } /* Preview */ .ar-assist__preview { border: 1px solid var(--ar-line); border-left: 3px solid var(--ar-accent); border-radius: 10px; background: color-mix(in srgb, var(--ar-accent) 2%, var(--ar-surface)); padding: 14px 16px; } .ar-assist__ptitle { margin: 0 0 6px; font-family: var(--ar-serif); font-size: 17px; font-weight: 600; color: var(--ar-ink); line-height: 1.25; } .ar-assist__pexcerpt { margin: 0 0 10px; font-size: 12.5px; font-style: italic; color: var(--ar-ink-soft); } .ar-assist__pbody { max-height: 320px; overflow-y: auto; padding-right: 6px; font-size: 12.5px; line-height: 1.62; color: var(--ar-ink-soft); } .ar-assist__pbody h2 { font-size: 14px; color: var(--ar-ink); margin: 14px 0 6px; } .ar-assist__pbody h3 { font-size: 13px; color: var(--ar-ink); margin: 12px 0 5px; } .ar-assist__pbody p { margin: 0 0 9px; } .ar-assist__pbody ul, .ar-assist__pbody ol { margin: 0 0 9px 18px; padding: 0; } .ar-assist__pbody li { margin-bottom: 4px; } .ar-assist__meta { display: grid; gap: 7px; margin-top: 12px; } .ar-assist__metarow { display: flex; gap: 10px; align-items: baseline; font-size: 12px; } .ar-assist__metakey { flex: 0 0 92px; font-family: var(--ar-mono); font-size: 10px; letter-spacing: 0.04em; text-transform: uppercase; color: var(--ar-ink-faint); } .ar-assist__metaval { color: var(--ar-ink-soft); } .ar-assist__chips { display: flex; flex-wrap: wrap; gap: 5px; } .ar-assist__chip { font-size: 11px; padding: 1px 8px; border-radius: 999px; color: var(--ar-ink-soft); background: var(--ar-surface-2); border: 1px solid var(--ar-line); } /* Images have no drawer UI — just the one-line note about what the editor will hold. (The image workshop lives in the block editor now.) */ .ar-assist__imagesnote { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--ar-line); } .ar-assist__librow { display: flex; gap: 8px; align-items: center; } /* ---- Brief screen ------------------------------------------------------- Two labelled fields, stacked: the content type, then the brief. Each opens with a head row carrying its label on the left and — on the type field — the way into the OTHER door on the right, so both paths are visible before anything is typed. */ /* The field and the way out to the other door share a row, centred on each other — they're alternatives, so they read as one choice, not as a heading with a stray link beside it. The field takes the row; the link keeps only the width of its own words. */ .ar-assist__typerow2 { display: flex; align-items: center; gap: 14px; } .ar-assist__typefield { flex: 1 1 auto; min-width: 0; } .ar-assist__editdoor { flex: 0 0 auto; } .ar-assist__typenote { margin: 7px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ar-ink-faint); } /* The brief's own label, sized as a section heading — it's the screen's real question, and the small-label treatment made it read as a form field. */ .ar-assist__section { display: block; margin: 20px 0 9px; font-size: 16px; font-weight: 600; letter-spacing: -0.01em; color: var(--ar-ink); } /* Starting frames. Pills rather than buttons: they type for you, they don't commit you to anything, and the weight should say so. */ .ar-assist__presets { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 10px; } .ar-assist__preset { padding: 6px 12px; border: 1px solid var(--ar-line-strong); border-radius: 999px; background: var(--ar-surface); color: var(--ar-ink-soft); font-size: 12px; line-height: 1.2; cursor: pointer; transition: border-color 0.15s ease, color 0.15s ease, background 0.15s ease; } .ar-assist__preset:hover:not(:disabled) { border-color: var(--ar-accent); color: var(--ar-accent); background: var(--ar-surface-2); } .ar-assist__preset:disabled { opacity: 0.5; cursor: default; } /* Held work, as a card rather than a sentence: after a day away, "your drafted post" identifies nothing — the card carries the actual title. */ .ar-assist__heldcard { display: flex; gap: 11px; align-items: flex-start; margin-top: 16px; padding: 12px 13px; background: var(--ar-surface-2); border: 1px solid var(--ar-line); border-radius: var(--ar-radius); } .ar-assist__heldicon { flex: 0 0 auto; display: inline-flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: var(--ar-radius); background: var(--ar-surface); border: 1px solid var(--ar-line); color: var(--ar-accent); } .ar-assist__heldbody { min-width: 0; } .ar-assist__heldlabel { margin: 0; font-size: 11.5px; color: var(--ar-ink-faint); } .ar-assist__heldtitle { margin: 1px 0 3px; font-size: 13px; font-weight: 600; color: var(--ar-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; } /* ---- Input group --------------------------------------------------------- A label welded to its control: one border around both, the label in a shaded segment on the left. Reads as a single object ("Filter by type: Everything") instead of a caption hovering over a field, and it costs a row of height. Generic on purpose — any .ar-input or SelectMenu can be dropped inside. NOT overflow:hidden, tempting as that is for the corners: SelectMenu's popup is absolutely positioned inside .ar-select, so clipping the group would clip the open menu. The addon rounds its own left corners instead. */ .ar-inputgroup { display: flex; align-items: stretch; border: 1px solid var(--ar-line-strong); border-radius: var(--ar-radius); background: var(--ar-field); } .ar-inputgroup__addon { display: flex; align-items: center; flex: 0 0 auto; padding: 0 12px; border-right: 1px solid var(--ar-line); border-radius: calc(var(--ar-radius) - 1px) 0 0 calc(var(--ar-radius) - 1px); background: var(--ar-surface-2); font-size: 12.5px; font-weight: 600; color: var(--ar-ink-soft); white-space: nowrap; } .ar-inputgroup > .ar-select { flex: 1 1 auto; min-width: 0; } /* The control gives up its own frame — the group wears it now. The id prefix is here to out-specify SelectMenu's scoped rules, which otherwise tie on weight and win or lose on build order. */ #agentimus-app .ar-inputgroup .ar-select__btn, #agentimus-app .ar-inputgroup .ar-input { border: 0; border-radius: 0; background: transparent; box-shadow: none; height: 40px; } /* One focus ring, drawn by the group, whether the inner control is focused or its menu is open. */ #agentimus-app .ar-inputgroup:focus-within, #agentimus-app .ar-inputgroup:has(.ar-select.is-open) { border-color: var(--ar-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--ar-accent) 13%, transparent); } /* Full width, so it lines up with the search row above it — a filter that stops short of the field it filters reads as an afterthought. */ .ar-assist__filtergroup { margin: 10px 0 8px; } /* What the chosen type will do to the writing, under the field that chose it. */ .ar-assist__typenote { margin: 7px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ar-ink-faint); } /* Refine: revise-in-place bar under the preview. */ .ar-assist__refine { display: flex; gap: 8px; margin-top: 12px; } /* Inside the pinned foot the bar owns the top slot; the rows follow below. */ .ar-assist__foot .ar-assist__refine { margin: 0 0 11px; } .ar-assist__foot .ar-assist__undoline { margin: -4px 0 10px; } /* The foot's two right-edge buttons (Revise above, Update/Create below) share one width, so the stack reads as a single aligned column — and both wear a trimmer cut here than the full-size ar-btn: the foot is a toolbar, not a hero, and the input deserves the room. */ .ar-assist__foot .ar-assist__refinebtn, .ar-assist__foot .ar-assist__go { min-width: 132px; height: 40px; padding: 0 16px; font-size: 11px; display: inline-flex; align-items: center; justify-content: center; gap: 7px; } /* The input matches the buttons' height exactly — one 40px line, no seams. */ .ar-assist__foot .ar-assist__refine .ar-assist__refineinput { height: 40px; } /* Qualified selectors on purpose: wp-admin's forms.css styles bare `input[type=text]` (background, border, blue focus ring) at higher specificity than a lone class — without these, an field and a