/* ============================================================================
   ADAMIRO DASHBOARD SYSTEM v3
   Application layer of the Adamiro brand system. Ships inert until enqueued
   in a later phase; the a3- prefix lets it coexist with the v1 adm- system
   during the migration.

   Load order:
     1. adamiro-tokens.css   (this file, :root block), or keep as one file
     2. dashboard-v3.css (everything below)

   Rules for anyone editing this file:
     - No hardcoded hex outside the :root and [data-theme] blocks.
     - No module specific selectors. Modules use these classes, they don't
       add their own. A module that needs a new component adds it here first.
     - Every component must be checked in both themes and at 375 / 1024 / 1440.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   1. TOKENS
   -------------------------------------------------------------------------- */
:root{
  /* Brand palette. Do not use these directly in components. Use the
     semantic tokens below, so themes can move without touching markup. */
  --navy:#070425;
  --petrol:#11424B;
  --teal:#1F8A9A;
  --teal-deep:#17707E;
  --off-white:#F9FAFE;
  --light-blue:#DCE4F0;
  --pale-green:#E8F5F2;

  /* Semantic, light theme */
  --bg:#F9FAFE;
  --surface-1:#FFFFFF;          /* cards, rail, drawer */
  --surface-2:#F1F4FB;          /* inset, table hover, chips */
  --fg:#070425;
  --fg-muted:#4A5568;
  --fg-faint:#8A93A5;           /* labels, column heads */
  --border:#DCE4F0;
  --border-strong:#C3CEE2;
  --accent:#1F8A9A;
  --accent-quiet:rgba(31,138,154,.10);
  /* The accent as a bare triple, for the one case a fixed alpha cannot
     serve: a heat cell whose opacity IS the value it encodes. Keep it in
     step with --accent above -- they are the same colour said twice
     because CSS has no way to take one apart. */
  --accent-rgb:31,138,154;
  --heat-top:.40;               /* strongest cell on a light ground */
  --positive:#E8F5F2;
  --positive-fg:#1F6E5E;
  --amber:#B7791F;              /* watch */
  --rust:#9B3B2E;               /* urgent, destructive */

  /* Elevation */
  --shadow-sm:0 4px 6px rgba(7,4,37,.06);
  --shadow-md:0 10px 25px rgba(7,4,37,.10);
  --shadow-lg:0 25px 50px rgba(7,4,37,.15);

  /* Radius */
  --r-sm:6px; --r-md:12px; --r-lg:20px; --r-xl:28px; --r-full:9999px;

  /* Spacing, 8px ladder */
  --s1:4px; --s2:8px; --s3:12px; --s4:16px;
  --s5:24px; --s6:32px; --s7:48px; --s8:64px;

  /* Shell metrics */
  --rail-w:252px;
  --rail-w-collapsed:76px;
  --header-h:64px;
  --drawer-w:420px;
  --content-max:1200px;

  /* Motion */
  --t-fast:150ms ease; --t-base:250ms ease; --t-slow:400ms ease;

  --font:'Outfit',system-ui,-apple-system,sans-serif;
  /* The brand's mono face. Used where a value is meant to be read as data
     rather than as prose -- The Tank's advisor eyebrows, which is where the
     published board already sets it by name. */
  --font-mono:'JetBrains Mono',ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
}

/* Dark is the product default. Navy is the floor. Surfaces lift by blending
   petrol into navy, never by adding violet or grey. A dark surface that reads
   indigo is a bug. */
[data-theme="dark"]{
  --bg:#070425;
  --surface-1:#0A132E;
  --surface-2:#0D1B36;
  --fg:#F9FAFE;
  --fg-muted:#A0AEC0;
  --fg-faint:#6B7794;
  --border:rgba(31,138,154,.20);
  --border-strong:rgba(31,138,154,.38);
  --accent:#2AA3B5;             /* raised for contrast on navy */
  --accent-quiet:rgba(31,138,154,.14);
  --accent-rgb:42,163,181;
  --heat-top:.50;               /* the same tint is dimmer over navy */
  --positive:rgba(31,138,154,.12);
  --positive-fg:#7FD4C6;
  --amber:#D9A441;
  --rust:#D9705E;
  --shadow-sm:0 4px 6px rgba(0,0,0,.30);
  --shadow-md:0 10px 25px rgba(0,0,0,.40);
  --shadow-lg:0 25px 50px rgba(0,0,0,.50);
}

/* ----------------------------------------------------------------------------
   2. BASE
   -------------------------------------------------------------------------- */
*{box-sizing:border-box}
html{background:var(--navy); color-scheme:dark}
html[data-theme="light"]{background:var(--off-white); color-scheme:light}
html,body{margin:0; height:100%}
body{
  font-family:var(--font); background:var(--bg); color:var(--fg);
  font-size:15px; line-height:1.6; -webkit-font-smoothing:antialiased;
}
/* The background is painted by a real element, not by html or body.
   Embedded and previewed contexts sometimes drop document level rules,
   which leaves a white page sitting under dark cards. */
.a3-backdrop{position:fixed; inset:0; background:var(--bg); z-index:-1}

h1,h2,h3,h4{margin:0; line-height:1.2; letter-spacing:-.015em; font-weight:600}
p{margin:0}
a{color:var(--accent)}
:focus-visible{outline:2px solid var(--accent); outline-offset:3px}

/* ----------------------------------------------------------------------------
   3. TYPE ROLES  (app scale, tighter than the marketing scale)
   -------------------------------------------------------------------------- */
.a3-verdict-text{font-size:clamp(22px,2.6vw,32px); font-weight:600; line-height:1.25}
.a3-section-title{font-size:19px; font-weight:600}
.a3-card-title{font-size:16px; font-weight:600}
.a3-meta{font-size:13px; color:var(--fg-muted)}
.a3-figure-value{font-size:34px; font-weight:600; letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.a3-figure-value .unit{font-size:20px}
.a3-overline{font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--accent)}
.a3-overline.is-quiet{color:var(--fg-faint)}

/* ----------------------------------------------------------------------------
   4. SHELL
   -------------------------------------------------------------------------- */
/* The frame around the shell is the breakpoint container, not the window.
   In production it fills the viewport, so every breakpoint fires exactly
   where a viewport query would; in the mockup the width control resizes it,
   so the phone and tablet layouts can actually be looked at. It has to be a
   wrapper rather than the shell itself: the shell's own grid columns change
   at the tablet breakpoint, and an element cannot be restyled by a container
   query on itself. */
.a3-frame{container-type:inline-size; container-name:a3shell}

.a3-shell{
  display:grid; grid-template-columns:var(--rail-w) 1fr;
  min-height:100vh; background:var(--bg); color:var(--fg);
}
.a3-main{display:flex; flex-direction:column; min-width:0; background:var(--bg)}

/* --- Rail --- */
/* The rail itself no longer scrolls -- the module list inside it does.
   Measured: 926px of rail content against roughly 620px of viewport on a
   1366x768 laptop. No density that is still readable closes a 306px gap
   with eleven modules in it, so the question was never whether the rail
   scrolls but WHAT scrolls away. It was the task balance, the plan and the
   account link: the three things a customer most often opens the rail to
   read. Those are pinned now and the module list takes the overflow. */
.a3-rail{
  background:var(--surface-1); border-right:1px solid var(--border);
  display:flex; flex-direction:column; gap:var(--s4);
  padding:var(--s4) var(--s3) var(--s4);
  position:sticky; top:0; height:100vh; overflow:hidden;
}
.a3-rail__nav{
  flex:1 1 auto; min-height:0; overflow-y:auto; overscroll-behavior:contain;
  scrollbar-width:thin; scrollbar-color:var(--border) transparent;
  display:flex; flex-direction:column; gap:var(--s4);
}
.a3-rail__nav::-webkit-scrollbar{width:6px}
.a3-rail__nav::-webkit-scrollbar-thumb{background:var(--border); border-radius:999px}
.a3-rail__nav::-webkit-scrollbar-track{background:transparent}
/* The wordmark is a link out to the public site, so it carries link reset as
   well as layout. Without the colour and decoration reset it inherits the
   theme's link styling and reads as body copy that happens to be blue. */
.a3-brand{display:flex; align-items:center; gap:var(--s3); padding:0 var(--s3);
  font-weight:700; letter-spacing:-.02em; font-size:18px;
  color:var(--fg); text-decoration:none}
.a3-brand:hover{color:var(--fg)}
.a3-brand:hover .a3-brand__mark{background:var(--teal-strong, var(--teal))}
.a3-brand__mark{width:26px; height:26px; border-radius:7px; background:var(--teal);
  display:grid; place-items:center; color:#fff; font-size:13px; font-weight:700; flex:none}

/* With the real wordmark in place the lettermark is redundant -- the logo
   already carries the mark. It comes back in the collapsed rail, where a
   5.6:1 wordmark would be ten pixels tall. The logo is teal throughout with
   no white in it, so it reads on both themes without a filter. */
.a3-brand__logo{height:26px; width:auto; max-width:100%; display:block}
.a3-brand.has-logo .a3-brand__mark{display:none}

.a3-nav-group{display:flex; flex-direction:column; gap:2px}
.a3-nav-group__head{padding:0 var(--s3); margin-bottom:var(--s2)}
.a3-nav-group__sub{font-size:11px; color:var(--fg-faint); line-height:1.4; margin-top:1px}

/* A group whose order is a real sequence shows it. Beads on a string.
   Only for sequenced tracks. Never decorative. */
.a3-nav-group.is-flow{position:relative}
.a3-nav-group.is-flow::before{
  content:""; position:absolute; left:calc(var(--s3) + 13px); top:38px; bottom:22px;
  width:1px; background:var(--border);
}
.a3-nav-group.is-flow .a3-nav-item{position:relative; z-index:1}

.a3-nav-item{
  display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left;
  padding:7px var(--s3); border:0; border-radius:var(--r-md); background:transparent;
  font-family:var(--font); font-size:14px; font-weight:500; color:var(--fg-muted);
  cursor:pointer; position:relative;
  transition:background var(--t-fast), color var(--t-fast);
}
.a3-nav-item:hover{background:var(--accent-quiet); color:var(--fg)}
.a3-nav-item.is-active{background:var(--accent-quiet); color:var(--fg); font-weight:600}
.a3-nav-item.is-active .a3-glyph{background:var(--teal); color:#fff}
.a3-nav-item__label{flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a3-nav-item__count{font-size:11px; font-weight:600; color:var(--fg-faint); font-variant-numeric:tabular-nums}

/* Anything requiring a parent module nests beneath it and shows only when active */
.a3-nav-item.is-child{padding-left:var(--s7); font-size:13px}
.a3-nav-item.is-child .a3-glyph{display:none}
.a3-nav-item.is-child::before{content:""; position:absolute; left:26px; top:0; bottom:0;
  width:1px; background:var(--border)}

/* The tile is one size; the icon inside it is a variable, because the rail,
   the drawer and the phone's tab bar all render the same markup. Setting the
   icon size per container here -- rather than per screenshot, later -- is what
   stops a tab-bar fix from shrinking the rail. */
.a3-glyph{--a3-glyph-icon:15px;
  width:26px; height:26px; border-radius:8px; background:var(--surface-2);
  display:grid; place-items:center; color:var(--fg-faint); flex:none}
.a3-glyph svg{width:var(--a3-glyph-icon); height:var(--a3-glyph-icon); display:block}

/* Attention state. This is what makes the rail a router. */
.a3-dot{width:7px; height:7px; border-radius:50%; flex:none; background:transparent}
.a3-dot.is-urgent{background:var(--rust)}     /* needs you now */
.a3-dot.is-new{background:var(--teal)}        /* something new */
.a3-dot.is-watch{background:var(--amber)}     /* worth a look */

.a3-rail__foot{margin-top:auto; border-top:1px solid var(--border);
  padding-top:var(--s4); display:flex; flex-direction:column; gap:var(--s3)}
.a3-tasks{padding:var(--s3); border-radius:var(--r-md); background:var(--surface-2)}
.a3-tasks__n{margin-top:2px; font-size:14px; font-weight:600; font-variant-numeric:tabular-nums}
.a3-tasks__of{color:var(--fg-muted); font-weight:400}
/* 🚨 The answer to the question the meter just raised. A customer out of tasks
   mid-month could only wait or change plan; /adamiro-checkout/ has sold task
   packs the whole time with no caller anywhere in v3. */
.a3-tasks__more{display:inline-block; margin-top:var(--s2); font-size:12px}
.a3-account__who{font-size:13px; font-weight:500}
.a3-meter{height:5px; border-radius:var(--r-full); background:var(--border); margin-top:var(--s2); overflow:hidden}
.a3-meter span{display:block; height:100%; background:var(--teal); border-radius:var(--r-full)}
.a3-account{display:flex; align-items:center; gap:var(--s3); width:100%; padding:var(--s2) var(--s3);
  border:0; border-radius:var(--r-md); background:transparent; cursor:pointer;
  font-family:var(--font); color:var(--fg-muted)}
.a3-account:hover{background:var(--accent-quiet); color:var(--fg)}
.a3-avatar{width:26px; height:26px; border-radius:50%; background:var(--petrol); color:#fff;
  display:grid; place-items:center; font-size:11px; font-weight:700; flex:none}

/* An uploaded photo in the same 26px circle. object-fit:cover so a picture
   that is not square is filled rather than squashed -- the crop makes it
   square on the way in, but a photo uploaded before the crop existed is
   whatever shape it was. */
.a3-avatar--img{object-fit:cover; background:var(--surface-2)}

/* --- Header --- */
.a3-header{
  height:var(--header-h); display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); padding:0 var(--s6); border-bottom:1px solid var(--border);
  position:sticky; top:0; z-index:30; background:var(--bg);
}
.a3-header__left{display:flex; align-items:center; gap:var(--s3); min-width:0; flex:1 1 auto; overflow:hidden}
.a3-header__left h1{font-size:18px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis}
.a3-header__right{display:flex; align-items:center; gap:var(--s2); flex:none}

/* The question mark that opens a guide entry. Deliberately quiet at rest and
   obvious on hover: it should be findable when wanted and invisible when not,
   because it appears beside almost every heading in the product. */
.a3-guide-mark{
  width:18px; height:18px; flex:none; margin-left:var(--s2);
  border:1px solid var(--border-strong); border-radius:50%;
  background:transparent; color:var(--fg-faint);
  font:600 11px/1 var(--font); cursor:pointer;
  display:inline-grid; place-items:center; vertical-align:middle;
  transition:color var(--t-fast), border-color var(--t-fast), background var(--t-fast);
}
.a3-guide-mark:hover{color:var(--teal); border-color:var(--teal); background:var(--accent-quiet)}

/* --- View bar --- */
.a3-viewbar{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  padding:var(--s5) var(--s6) 0; background:var(--bg); flex-wrap:wrap}
.a3-viewbar__right{display:flex; align-items:center; gap:var(--s3); flex:none}
.a3-updated{white-space:nowrap; font-size:13px; color:var(--fg-muted)}

.a3-views{display:flex; gap:var(--s1); padding:var(--s1); max-width:100%;
  background:var(--surface-2); border:1px solid var(--border); border-radius:var(--r-full);
  overflow-x:auto; scrollbar-width:none}
.a3-views::-webkit-scrollbar{display:none}
.a3-view{padding:10px 18px; border:0; border-radius:var(--r-full); background:transparent;
  font:600 13px/1 var(--font); color:var(--fg-muted); white-space:nowrap; cursor:pointer;
  transition:background var(--t-fast), color var(--t-fast)}
.a3-view:hover{color:var(--fg)}
.a3-view[aria-selected="true"]{background:var(--teal); color:#fff}

.a3-scope{display:inline-flex; align-items:center; gap:var(--s2); padding:9px 14px;
  border:1px solid var(--border); border-radius:var(--r-full); background:var(--surface-2);
  font:500 13px/1 var(--font); color:var(--fg-muted); cursor:pointer}
.a3-scope:hover{border-color:var(--border-strong); color:var(--fg)}

/* --- Canvas --- */
.a3-canvas{display:flex; flex-direction:column; gap:var(--s6); flex:1;
  padding:var(--s5) var(--s6) var(--s8); background:var(--bg)}
.a3-canvas > *{max-width:var(--content-max); width:100%}
.a3-section-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s4); margin-bottom:var(--s4)}

/* ----------------------------------------------------------------------------
   5. ACTIONS
   One primary per screen. One secondary at most. Everything else quiet
   or in the overflow menu. Destructive never in the header.
   -------------------------------------------------------------------------- */
.a3-btn{
  display:inline-flex; align-items:center; gap:var(--s2); padding:12px 24px;
  border:1px solid transparent; border-radius:var(--r-full); cursor:pointer;
  font:600 14px/1 var(--font); white-space:nowrap;
  transition:background var(--t-fast), color var(--t-fast), transform var(--t-fast),
             box-shadow var(--t-fast), border-color var(--t-fast);
}
.a3-btn--primary{background:var(--teal); color:#fff}
.a3-btn--primary:hover{background:var(--teal-deep); transform:translateY(-1px); box-shadow:var(--shadow-md)}
.a3-btn--secondary{background:transparent; border-color:var(--teal); color:var(--accent)}
.a3-btn--secondary:hover{background:var(--teal); color:#fff}
/* No border and no fill leaves colour as the only thing saying this is a
   control at all, and muted grey does not say it: "Back to History" and "Add
   another" both read as captions. One colour for every one of them, so the
   affordance is learned once. -- Fredrik, 2026-08-25. */
.a3-btn--quiet{background:transparent; color:var(--accent); padding:10px 14px}
.a3-btn--quiet:hover{background:var(--accent-quiet); color:var(--accent)}
.a3-btn--danger{background:transparent; border-color:var(--rust); color:var(--rust)}
.a3-btn--danger:hover{background:var(--rust); color:#fff}
.a3-btn--sm{padding:8px 16px; font-size:13px}
.a3-btn[disabled]{opacity:.45; cursor:not-allowed; transform:none; box-shadow:none}

/* Icon buttons are sized by an explicit box, never by padding around a glyph.
   Padding sizing makes the target depend on how wide the glyph renders. */
.a3-btn--icon{
  width:40px; height:40px; padding:0; display:inline-grid; place-items:center;
  font-size:19px; line-height:1; background:transparent; color:var(--fg-muted);
  border-radius:var(--r-full);
}
.a3-btn--icon:hover{background:var(--accent-quiet); color:var(--fg)}
/* Card-corner size. The same explicit box, smaller -- an item row of 40px
   buttons is taller than the two lines of text it sits beside. */
.a3-btn--icon-sm{width:28px; height:28px; font-size:15px}
/* Delete is the only destructive thing in the row, and it is the one that
   stays visible, so it earns the colour on hover rather than at rest. */
.a3-btn--icon.is-danger:hover{background:var(--accent-quiet); color:var(--rust)}

/* The theme switch ships both icons and lets the theme choose. The
   alternative -- having the script write the SVG on every toggle -- puts icon
   markup in a JS string, which is a second icon set the moment Lucide moves a
   path. The script owns the label; the stylesheet owns which one you see. */
.a3-theme-btn > span{display:none}
:root:not([data-theme="light"]) .a3-theme-btn__to-light,
:root[data-theme="light"] .a3-theme-btn__to-dark{display:grid; place-items:center}

/* The hamburger belongs to the phone layout, where the rail is hidden. It
   must come AFTER .a3-btn--icon: it was written 55 lines above it, and since
   both selectors are (0,1,0) the icon rule's display:inline-grid won on
   source order alone. The button showed at every width, next to a rail that
   was already on screen. Third time today this exact trap has bitten -- see
   the Ask Adam pill and the section note at the foot of this file. */
.a3-menu-btn{display:none}

.a3-menu-wrap{position:relative}
.a3-menu{
  position:absolute; right:0; top:calc(100% + 8px); min-width:230px; z-index:60; display:none;
  padding:var(--s2); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg);
}
.a3-menu.is-open,
.a3-menu-wrap.is-open > .a3-menu{display:block}
/* 🚨 :not(.a3-btn) — the same shape of bug as the theme's button rule, one
   level in. This is the styling for a MENU ITEM, and .a3-menu button (0,1,1)
   beats .a3-btn--sm (0,1,0), so a real button that happens to sit inside a
   menu -- the notifications panel's "Mark all read" and "Clear read" -- came
   out wearing menu-item padding and weight. A button that declares its own
   family is not a menu item. */
.a3-menu button:not(.a3-btn){display:flex; width:100%; text-align:left; padding:10px 12px; border:0;
  border-radius:var(--r-sm); background:transparent; cursor:pointer;
  font:500 14px/1.4 var(--font); color:var(--fg)}
.a3-menu button:not(.a3-btn):hover{background:var(--accent-quiet)}
.a3-menu hr{border:0; border-top:1px solid var(--border); margin:var(--s2) 0}
.a3-menu .is-danger{color:var(--rust)}

/* ----------------------------------------------------------------------------
   6. VERDICT  (signature element, required on every view)
   -------------------------------------------------------------------------- */
.a3-verdict{
  position:relative; overflow:hidden;
  padding:var(--s6) var(--s6) var(--s6) var(--s7);
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg);
}
.a3-verdict::before{content:""; position:absolute; left:0; top:0; bottom:0; width:3px;
  background:linear-gradient(180deg,transparent,var(--teal) 25%,var(--teal) 75%,transparent)}
.a3-verdict::after{content:""; position:absolute; left:-70px; top:50%; width:240px; height:240px;
  transform:translateY(-50%); border-radius:50%; pointer-events:none;
  background:radial-gradient(circle,rgba(31,138,154,.16),transparent 70%)}
/* ::after is a 240px glow painted over everything static in here, so each
   part of the card has to lift itself out of it. The overline was the one
   part that never did, because nothing rendered one until Memory. */
.a3-verdict > .a3-overline{position:relative}
.a3-verdict h2{position:relative; max-width:28ch; margin-top:var(--s3);
  font-size:clamp(22px,2.6vw,32px); line-height:1.25}
.a3-verdict p{position:relative; max-width:64ch; margin-top:var(--s4); color:var(--fg-muted)}
.a3-verdict__acts{position:relative; display:flex; flex-wrap:wrap; gap:var(--s3); margin-top:var(--s5)}

/* ----------------------------------------------------------------------------
   7. FIGURES  (three maximum, each with a reading)
   -------------------------------------------------------------------------- */
.a3-figures{display:grid; grid-template-columns:repeat(3,1fr); gap:var(--s4)}
.a3-figure{padding:var(--s5); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-figure__value{margin-top:var(--s2); font-size:34px; font-weight:600;
  letter-spacing:-.02em; font-variant-numeric:tabular-nums}
.a3-figure__value .unit{font-size:20px}
.a3-figure__reading{margin-top:var(--s2); font-size:13px; color:var(--fg-muted)}
/* A figure worth interrupting someone for. Only the reading changes colour --
   a whole card in rust reads as an error rather than as a strong week. */
.a3-figure.is-urgent{border-color:var(--rust)}
.a3-figure.is-urgent .a3-overline{color:var(--rust)}
.a3-delta{font-weight:600; color:var(--positive-fg)}
.a3-delta.is-down{color:var(--rust)}
/* Taller than the bare 48px it was, because a row of numbers now sits above
   the bars and stealing the height from them would flatten the shape the
   chart exists to show. */
.a3-trend{display:flex; align-items:flex-end; gap:5px; height:72px; margin-top:var(--s4)}
.a3-trend--dense{height:48px}
.a3-trend__col{flex:1; display:flex; flex-direction:column; gap:4px; height:100%; min-width:0}
.a3-trend__n{font-size:11px; line-height:1; text-align:center; color:var(--muted);
  font-variant-numeric:tabular-nums}
/* The bar takes whatever the number left. Its own height is a percentage of
   THIS box, so the number never pushes a full-height bar out of the panel. */
.a3-trend__bar{flex:1; display:flex; align-items:flex-end; min-height:0}
.a3-trend i{display:block; width:100%; background:var(--accent-quiet); border-radius:3px 3px 0 0}
.a3-trend i.is-current{background:var(--teal)}
/* The newest reading is the one being read, so its number is too. */
.a3-trend__col:last-child .a3-trend__n{color:var(--ink); font-weight:600}


/* ----------------------------------------------------------------------------
   7b. TOOLBAR  (controls that shape the view below)
   The home most often forgotten. Filters, ranges, sort, grouping, mode
   switches. Quiet styling, left aligned, above the working area.
   -------------------------------------------------------------------------- */
/* Same gutter as the view bar and the canvas. It had none, so every filter
   row started one gutter to the left of the tabs above it. */
.a3-toolbar{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2);
  padding:var(--s3) var(--s6); border-bottom:1px solid var(--border)}
.a3-toolbar__group{display:flex; align-items:center; gap:var(--s2)}
.a3-toolbar__group + .a3-toolbar__group{padding-left:var(--s3); margin-left:var(--s1);
  border-left:1px solid var(--border)}
.a3-toolbar__spacer{margin-left:auto}
.a3-control{display:inline-flex; align-items:center; gap:6px; padding:7px 13px;
  border:1px solid var(--border); border-radius:var(--r-full); background:transparent;
  color:var(--fg-muted); font:500 13px/1 var(--font); cursor:pointer;
  transition:border-color var(--t-fast), color var(--t-fast), background var(--t-fast)}
.a3-control:hover{border-color:var(--border-strong); color:var(--fg)}
.a3-control.is-on{border-color:var(--teal); color:var(--accent); background:var(--accent-quiet)}
.a3-control__value{font-weight:600; color:var(--fg)}
/* Segmented control for mutually exclusive modes inside a toolbar */
.a3-segment{display:inline-flex; padding:3px; gap:2px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-full)}
.a3-segment button{padding:7px 14px; border:0; border-radius:var(--r-full); background:transparent;
  color:var(--fg-muted); font:600 12px/1 var(--font); cursor:pointer}
.a3-segment button[aria-pressed="true"]{background:var(--surface-1); color:var(--fg); box-shadow:var(--shadow-sm)}

/* ----------------------------------------------------------------------------
   7c. WORKBENCH  (a room, not a card)
   Dense interactive surfaces: editors, sessions, configurators, planners.
   The three figure limit and the evidence card pattern DO NOT apply inside.
   -------------------------------------------------------------------------- */
.a3-workbench{background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg); overflow:hidden}
.a3-workbench__head{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s5); border-bottom:1px solid var(--border);
  background:var(--surface-2)}
.a3-workbench__title{font-size:15px; font-weight:600}
.a3-workbench__body{padding:var(--s5)}
.a3-workbench__foot{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s4) var(--s5); border-top:1px solid var(--border)}
/* Optional side panel: context, history, options. Stacks below 1200. */
.a3-workbench.has-aside .a3-workbench__body{display:grid; grid-template-columns:1fr 300px; gap:var(--s5)}
.a3-workbench__aside{padding-left:var(--s5); border-left:1px solid var(--border)}
@container a3shell (max-width:1199px){
  .a3-workbench.has-aside .a3-workbench__body{grid-template-columns:1fr}
  .a3-workbench__aside{padding-left:0; padding-top:var(--s5);
    border-left:0; border-top:1px solid var(--border)}
}

/* ----------------------------------------------------------------------------
   7d. FOCUS MODE  (one sustained task, full screen, own rules)
   Canvas rules do not apply here. Escape returns.
   -------------------------------------------------------------------------- */
.a3-focus{position:fixed; inset:0; z-index:85; display:none; flex-direction:column; background:var(--bg)}
.a3-focus.is-open{display:flex}
.a3-focus__head{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  height:var(--header-h); padding:0 var(--s6); border-bottom:1px solid var(--border); flex:none}
.a3-focus__body{flex:1; overflow-y:auto; padding:var(--s6)}
.a3-focus__body > *{max-width:var(--content-max); margin-inline:auto; width:100%}
@container a3shell (max-width:899px){
  .a3-focus__head{padding:0 var(--s4)}
  .a3-focus__body{padding:var(--s4)}
}

/* ----------------------------------------------------------------------------
   7e. CONTEXT CHIPS  (what a module is working from, and what it isn't)
   Provenance made visible. Withheld context is shown, not hidden.
   -------------------------------------------------------------------------- */
.a3-ctx{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
/* One rule. There were two: this one, and a second .a3-chip further down in
   the ideas-card section that overrode the padding, the background, the font
   and added cursor:pointer to every chip in v3 -- including the twenty-odd
   that are static labels and click nowhere. Equal specificity, so source
   order decided, and the later one won everything it named while this one
   kept only what it did not. The values below are what was actually painting;
   the fake button is gone.

   white-space:nowrap because a chip is a label, and "LinkedIn post" broken
   across two lines in a list row makes that row taller than its neighbours. */
.a3-chip{display:inline-flex; align-items:center; gap:6px; padding:4px 10px;
  border:1px solid var(--border); border-radius:var(--r-full); background:transparent;
  color:var(--fg-muted); font:600 12px/1.3 var(--font); white-space:nowrap; flex:none}
.a3-chip__n{font-weight:700; color:var(--fg)}
.a3-chip.is-on{border-color:var(--teal); color:var(--accent)}
.a3-chip.is-withheld{opacity:.7}

/* ----------------------------------------------------------------------------
   8. CARDS AND PANELS
   -------------------------------------------------------------------------- */
.a3-cards{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(300px,1fr))}
.a3-cards.is-wide{grid-template-columns:repeat(auto-fit,minmax(360px,1fr))}
.a3-card{display:flex; flex-direction:column; padding:var(--s5); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg); box-shadow:var(--shadow-sm);
  transition:transform var(--t-base), box-shadow var(--t-base), border-color var(--t-base)}
.a3-card:hover{transform:translateY(-4px); box-shadow:var(--shadow-md); border-color:var(--border-strong)}
.a3-card__head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3); margin-bottom:var(--s3)}
/* A head whose two halves belong TOGETHER rather than at opposite ends: a face
   and the name beside it. The base pushes them apart, which is right for a
   title and an action row and wrong here -- on a card that stretches to fill
   its grid row the name ended up against the far edge, half a screen from the
   avatar it belongs to. Declared straight after the base so source order keeps
   the modifier winning at equal specificity. */
.a3-card__head--lead{justify-content:flex-start; align-items:center}
/* The head is space-between, so the text half has to be allowed to shrink or
   a long title pushes the action row off the card. */
.a3-card__main{min-width:0}
/* Radar's whole argument for existing: not what happened, but what it means
   here. Set apart from the summary so the eye can find it without reading. */
.a3-card__note{margin-top:var(--s3); padding-left:var(--s3);
  border-left:2px solid var(--accent); color:var(--fg) !important}
.a3-card h3{font-size:16px}
.a3-card p{font-size:14px; color:var(--fg-muted)}
.a3-menu__item{display:block; width:100%; text-align:left; padding:9px var(--s4);
  border:0; background:transparent; color:var(--fg); font:500 13px/1.3 var(--font);
  cursor:pointer; border-radius:var(--r-sm)}
.a3-menu__item:hover:not(:disabled){background:var(--accent-quiet)}
.a3-menu__item:disabled{color:var(--fg-faint); cursor:not-allowed}
.a3-menu__item.is-danger{color:var(--rust)}
/* Meta on the left, what you can do on the right. Both on one line until the
   card is too narrow to hold them, then the actions drop below. */
.a3-card__links{display:flex; flex-wrap:wrap; align-items:baseline; gap:var(--s2);
  margin-top:var(--s2)}
.a3-card__links a{text-decoration:underline; text-underline-offset:2px}
.a3-card__foot{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; margin-top:auto; padding-top:var(--s5)}
/* Bullets read as a list rather than as paragraphs that happen to be short. */
.a3-bullets{margin:var(--s4) 0 0; padding-left:var(--s5); display:flex;
  flex-direction:column; gap:var(--s2)}
.a3-bullets li{font-size:14px; line-height:1.6; color:var(--fg-muted)}
.a3-bullets strong{color:var(--fg)}

.a3-panel{padding:var(--s5); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}

/* ----------------------------------------------------------------------------
   9. STATUS PILLS
   Status is a pill, never a coloured border on the whole card.
   -------------------------------------------------------------------------- */
.a3-pill{display:inline-flex; align-items:center; gap:6px; padding:5px 12px;
  border-radius:var(--r-full); background:var(--accent-quiet); color:var(--accent);
  font-size:12px; font-weight:600; white-space:nowrap}
.a3-pill__dot{width:6px; height:6px; border-radius:50%; background:currentColor}
.a3-pill.is-positive{background:var(--positive); color:var(--positive-fg)}
.a3-pill.is-watch{background:rgba(183,121,31,.14); color:var(--amber)}
.a3-pill.is-urgent{background:rgba(155,59,46,.14); color:var(--rust)}
.a3-pill.is-quiet{background:var(--surface-2); color:var(--fg-faint)}

/* ----------------------------------------------------------------------------
   10. TABLES  (restack below 900, never scroll sideways)
   Every td needs data-label for the stacked view.
   -------------------------------------------------------------------------- */
.a3-table{width:100%; border-collapse:collapse; font-size:14px}
.a3-table th{text-align:left; padding:0 var(--s4) var(--s3); border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-table td{padding:var(--s4); border-bottom:1px solid var(--border)}
.a3-table tr:last-child td{border-bottom:0}
.a3-table tbody tr{transition:background var(--t-fast)}
.a3-table tbody tr:hover{background:var(--surface-2)}
.a3-table .is-num{text-align:right; font-variant-numeric:tabular-nums}
/* The when-you-post grid (Campaigns > Performance). .a3-table gives it the
   frame, the borders and the numerals; only the tint and the row header
   are new, so the heatmap cannot drift away from every other table here.
   --heat is written per cell inline as 0..1 and scaled by the theme's own
   ceiling: an alpha that reads as a strong slot on white is nearly
   invisible on navy. */
.a3-heat td{--heat:0; text-align:center;
  background:rgba(var(--accent-rgb), calc(var(--heat) * var(--heat-top)))}
.a3-heat th{white-space:nowrap}
/* A weekday is a label, not a column head: the uppercase micro-type that
   suits the header row makes seven of these shout down the numbers. */
.a3-heat tbody th{padding:var(--s4); font-size:12px; text-transform:none;
  letter-spacing:0; color:var(--fg-muted)}
/* The row hover paints UNDER the tint on a measured cell and over nothing
   on an empty one, so the same gesture reads as two different things. */
.a3-heat tbody tr:hover{background:transparent}

/* ----------------------------------------------------------------------------
   11. LIFECYCLE AND PROGRESS  (Campaigns, and anything with real stages)
   -------------------------------------------------------------------------- */
.a3-steps{display:flex; align-items:center; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}
.a3-step{display:inline-flex; align-items:center; gap:6px; font-size:12px; font-weight:600; color:var(--fg-faint)}
.a3-step__n{width:18px; height:18px; border-radius:50%; border:1px solid var(--border-strong);
  display:grid; place-items:center; font-size:10px}
.a3-step.is-done{color:var(--positive-fg)}
.a3-step.is-done .a3-step__n{background:var(--positive); border-color:transparent}
.a3-step.is-current{color:var(--accent)}
.a3-step.is-current .a3-step__n{background:var(--teal); border-color:transparent; color:#fff}
.a3-step__sep{color:var(--fg-faint); margin:0 2px}
.a3-progress{height:6px; margin-top:var(--s4); border-radius:var(--r-full);
  background:var(--surface-2); overflow:hidden}
.a3-progress span{display:block; height:100%; background:var(--teal); border-radius:var(--r-full)}

/* ----------------------------------------------------------------------------
   12. COMPARISON BARS  (AI Visibility)
   -------------------------------------------------------------------------- */
.a3-bars{display:flex; flex-direction:column; gap:var(--s4)}
.a3-bar-row{display:grid; grid-template-columns:150px 1fr 54px; gap:var(--s4); align-items:center}
.a3-bar-row__name{font-size:14px; font-weight:500}
.a3-bar{height:10px; border-radius:var(--r-full); background:var(--surface-2); overflow:hidden}
.a3-bar span{display:block; height:100%; background:var(--teal); border-radius:var(--r-full)}
.a3-bar.is-other span{background:var(--border-strong)}
.a3-bar-row__pct{text-align:right; font-size:13px; font-weight:600; font-variant-numeric:tabular-nums}

/* ----------------------------------------------------------------------------
   13. TIMELINE  (Reach)
   -------------------------------------------------------------------------- */
.a3-timeline{display:flex; flex-direction:column}
.a3-slot{display:flex; align-items:center; gap:var(--s5); padding:var(--s4) 0;
  border-bottom:1px solid var(--border)}
.a3-slot:last-child{border-bottom:0}
.a3-slot__when{width:112px; flex:none; font-size:13px; font-weight:600; color:var(--fg-faint)}
.a3-slot__what{flex:1; min-width:0}
.a3-slot__what h4{font-size:15px; font-weight:500}
.a3-slot__sub{margin-top:2px; font-size:13px; color:var(--fg-muted)}

/* ----------------------------------------------------------------------------
   14. THREAD  (Mentor)
   -------------------------------------------------------------------------- */
.a3-thread{display:flex; flex-direction:column; gap:var(--s4)}
.a3-msg{max-width:76%; padding:var(--s4) var(--s5); border-radius:var(--r-lg); font-size:14px; line-height:1.6}
.a3-msg.is-them{background:var(--surface-2); border:1px solid var(--border); border-bottom-left-radius:var(--r-sm)}
.a3-msg.is-you{background:var(--accent-quiet); border:1px solid var(--border);
  align-self:flex-end; border-bottom-right-radius:var(--r-sm)}
.a3-msg__who{margin-bottom:var(--s2); font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--accent)}
/* The composer is a field, a way to attach something, and a send button. All
   three visible: a bare field asks the reader to guess that Enter submits. */
.a3-composer{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s5);
  padding:var(--s3); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2)}
.a3-composer:focus-within{border-color:var(--teal)}
.a3-composer textarea{width:100%; resize:vertical; min-height:52px; padding:10px 12px;
  border:0; border-radius:var(--r-sm); background:transparent; color:var(--fg);
  font:400 15px/1.5 var(--font)}
.a3-composer textarea:focus{outline:none}
.a3-composer__tools{display:flex; align-items:center; justify-content:flex-end; gap:var(--s2)}

.a3-workbench__tools{display:flex; align-items:center; gap:var(--s2); flex:none}

/* Full screen. One sustained task, nothing else on the page competing with
   it. The rail and the header stay reachable; everything else steps back. */
/* 🚨 max-width:none is load-bearing and was missing. .a3-canvas > * caps every
   direct child at --content-max, and a focused workbench is still that child --
   so inset:0 spread it to the viewport and the cap immediately pulled it back
   to 1200px. On a 1872px screen it covered the rail and the header and then
   stopped 670px short of the right edge. Nothing was wrong with the rule that
   could be read; it had simply never been switched on, because until the chat
   landed nothing in the product entered focus mode. */
/* 🚨 top is a variable, not 0, because #wpadminbar is fixed at the top of the
   viewport at z-index 99999 and this pane is 60. At inset:0 the head -- the
   status line and the button that CLOSES full screen -- rendered under it and
   could not be seen or pressed. The script measures the bar's real bottom edge
   on the way in, because the height varies with the viewport and a fixed
   banner can push the bar down; it stays 0 for a reader with no admin bar. */
.a3-workbench.is-focus{position:fixed; top:var(--a3-focus-top, 0); right:0; bottom:0; left:0;
  z-index:60; border-radius:0; border:0;
  max-width:none; display:flex; flex-direction:column}
.a3-workbench.is-focus .a3-workbench__body{flex:1; overflow:auto}

/* One button, two faces: expand arrows while the pane is inline, an X while it
   fills the screen. Full screen used to be escapable only by the Escape key or
   by pressing a button still drawn as "expand", which reads as the control you
   have already used rather than the way out. */
.a3-chatfocus__grow{display:inline-flex; align-items:center; justify-content:center}
.a3-chatfocus__shut{display:none; align-items:center; justify-content:center}
.a3-workbench.is-focus .a3-chatfocus__grow{display:none}
.a3-workbench.is-focus .a3-chatfocus__shut{display:inline-flex}

/* What you can do to one item, on the item. */
.a3-actions{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
/* The item row. Top right of the card, never wrapping -- a wrapped action row
   pushes the card taller and moves the X the reader was aiming at. The 2px
   pulls the 28px boxes level with the title's cap height rather than its line
   box, which otherwise reads as a row sitting slightly low. */
.a3-actions--item{gap:2px; flex-wrap:nowrap; flex:none}
.a3-actions--item .a3-menu{right:0; left:auto}

.a3-composer input{flex:1; padding:14px 18px; border:1px solid var(--border);
  border-radius:var(--r-full); background:var(--surface-2); color:var(--fg); font:400 14px/1 var(--font)}
.a3-composer input:focus{outline:none; border-color:var(--teal)}

/* ----------------------------------------------------------------------------
   15. BOARD  (The Tank)
   -------------------------------------------------------------------------- */
.a3-board{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.a3-member{padding:var(--s5); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-member__face{width:44px; height:44px; margin-bottom:var(--s3); border-radius:50%;
  background:var(--petrol); color:#fff; display:grid; place-items:center; font-size:14px; font-weight:700}
.a3-member__role{margin-top:2px; font-size:12px; color:var(--fg-faint)}
.a3-member__stance{margin-top:var(--s3); font-size:13px; color:var(--fg-muted)}
.a3-member.is-chair{border-color:var(--border-strong)}
.a3-member.is-chair .a3-member__face{background:var(--teal)}

/* ----------------------------------------------------------------------------
   16. TODAY  (cross module home)
   -------------------------------------------------------------------------- */
.a3-today{display:flex; flex-direction:column; overflow:hidden;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-lg)}
/* Written for a <button> during the mockup phase and never used until Today
   was rebuilt on it. It renders an <a> now, so text-decoration is declared
   here rather than in a second base rule -- StylesheetTest refuses those, and
   it is right to: a class declared twice is one component silently inheriting
   another. */
.a3-today__row{display:flex; align-items:center; gap:var(--s4); width:100%; text-align:left;
  padding:var(--s4) var(--s5); border:0; border-bottom:1px solid var(--border);
  background:transparent; color:var(--fg); font-family:var(--font); cursor:pointer;
  text-decoration:none;
  transition:background var(--t-fast)}
.a3-today__row:last-child{border-bottom:0}
.a3-today__row:hover .a3-today__what strong{color:var(--accent)}
.a3-today__row:hover{background:var(--surface-2)}
.a3-today__who{display:flex; align-items:center; gap:var(--s3); width:140px; flex:none;
  font-size:13px; font-weight:600}
.a3-today__what{flex:1; min-width:0; font-size:14px; color:var(--fg-muted)}
.a3-today__what strong{color:var(--fg); font-weight:500}
.a3-today__go{flex:none; color:var(--fg-faint)}


/* ----------------------------------------------------------------------------
   16b. IDEAS  (cross module inbox, every module deposits, the user adds)
   -------------------------------------------------------------------------- */
.a3-capture{display:flex; gap:var(--s3); margin-bottom:var(--s4)}
.a3-capture input{flex:1; min-width:0; padding:13px 18px; border:1px solid var(--border);
  border-radius:var(--r-full); background:var(--surface-2); color:var(--fg); font:400 14px/1 var(--font)}
.a3-capture input:focus{outline:none; border-color:var(--teal)}
.a3-inbox{display:flex; flex-direction:column; overflow:hidden; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-idea{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) var(--s5);
  border-bottom:1px solid var(--border); transition:background var(--t-fast)}
.a3-idea:last-child{border-bottom:0}
.a3-idea:hover{background:var(--surface-2)}
.a3-idea__text{flex:1; min-width:0}
.a3-idea__text strong{font-size:14px; font-weight:500}
.a3-idea__from{margin-top:2px; font-size:12px; color:var(--fg-muted)}
.a3-idea__acts{display:flex; gap:var(--s2); flex:none}
/* Provenance chip. Every idea shows where it came from, always. */
.a3-src{flex:none; padding:4px 9px; border-radius:var(--r-full); background:var(--surface-2);
  color:var(--fg-faint); font-size:11px; font-weight:700; letter-spacing:.04em; text-transform:uppercase}
.a3-src.is-mine{background:var(--accent-quiet); color:var(--accent)}

/* ----------------------------------------------------------------------------
   17. ADAM  (persistent, not a destination)
   -------------------------------------------------------------------------- */
.a3-ask{display:flex; align-items:center; gap:var(--s3); width:100%; padding:10px var(--s3);
  border:1px solid var(--border); border-radius:var(--r-full); background:var(--surface-2);
  color:var(--fg-faint); font:500 13px/1 var(--font); cursor:pointer; transition:all var(--t-fast)}
.a3-ask:hover{border-color:var(--teal); color:var(--fg)}
.a3-ask__a{width:22px; height:22px; border-radius:50%; background:var(--teal); color:#fff;
  display:grid; place-items:center; flex:none}
.a3-ask__a svg{width:13px; height:13px; display:block}
.a3-ask__key{margin-left:auto; padding:2px 6px; border:1px solid var(--border);
  border-radius:var(--r-sm); font-size:11px; color:var(--fg-faint)}

/* Adam lives in the header, where a control that opens a full-screen modal
   belongs. Same component, sized to sit in a row of buttons rather than to
   fill a column.

   This block MUST stay below .a3-ask. It was written above it, and since the
   two selectors carry identical specificity the base rule's width:100% won:
   the pill stretched across the whole header and shoved the primary button
   off the edge. Nothing about the markup or the tokens was wrong, and no
   gate reads rule order. */
.a3-ask--bar{width:auto; flex:none; gap:var(--s2); padding:7px var(--s3)}
/* margin-left:auto is for the rail's full-width pill, where the key sits at
   the far edge. In a shrink-to-fit pill it just strands the slash. */
.a3-ask--bar .a3-ask__key{margin-left:0}

.a3-adam{position:fixed; inset:0; z-index:90; display:none;
  align-items:flex-start; justify-content:center; padding:12vh var(--s4) var(--s4);
  background:rgba(7,4,37,.62)}
.a3-adam.is-open{display:flex}
.a3-adam__panel,
.a3-adam-panel{width:min(660px,100%); overflow:hidden; background:var(--surface-1);
  border:1px solid var(--border-strong); border-radius:var(--r-lg); box-shadow:var(--shadow-lg)}
.a3-adam__input{display:flex; align-items:center; gap:var(--s3);
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--border)}
.a3-adam__input input{flex:1; border:0; background:transparent; outline:none;
  color:var(--fg); font:400 16px/1.4 var(--font)}
.a3-adam__body{padding:var(--s4) var(--s5) var(--s5)}
.a3-adam__sug{display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left;
  padding:11px var(--s3); border:0; border-radius:var(--r-md); background:transparent;
  color:var(--fg); font:400 14px/1.4 var(--font); cursor:pointer}
.a3-adam__sug:hover{background:var(--accent-quiet)}
/* The panel is a conversation with suggestions underneath, and both grow.
   Bounded here rather than by the viewport so the input row never leaves the
   screen on a long answer. */
.a3-adam__body{max-height:min(62vh, 560px); overflow-y:auto}
.a3-adam__group + .a3-adam__group{margin-top:var(--s5)}
.a3-adam__group > .a3-overline{display:block; margin-bottom:var(--s2)}
.a3-adam__title{flex:1; font-size:15px; font-weight:600; color:var(--fg)}

/* The conversation, in the message primitive the chat surfaces already use.
   A column, not a bubble field: Adam answers one question at a time and the
   answer is the point, so it runs the full width rather than aping a chat. */
.a3-adam__thread{display:flex; flex-direction:column; gap:var(--s4)}
.a3-adam__thread:not(:empty){margin-bottom:var(--s5); padding-bottom:var(--s5);
  border-bottom:1px solid var(--border)}
.a3-adam__thread .a3-msg{max-width:100%}
.a3-adam__thread .a3-msg p{margin:0 0 var(--s3)}
.a3-adam__thread .a3-msg p:last-child{margin-bottom:0}
.a3-adam__links{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}

/* What an action costs, said on the suggestion itself. The rule is that
   nothing quietly spends a task, and a list of things Adam could do is
   exactly where that has to hold. */
.a3-adam__cost{flex:none; padding:3px var(--s2); border-radius:var(--r-full);
  background:var(--accent-quiet); font-size:11px; font-weight:600; color:var(--fg)}

/* 🚨 The only in-product way to say something is broken, and v3 shipped
   without it. A <details> rather than a second dialog: the panel IS a dialog,
   and a dialog over a dialog is where focus goes to die. */
.a3-adam__report{margin-top:var(--s4); display:flex; flex-direction:column; gap:var(--s2)}
.a3-adam__report summary{cursor:pointer}
.a3-adam__report .a3-btn{align-self:flex-start}

.a3-adam__foot{margin-top:var(--s5); padding-top:var(--s4); border-top:1px solid var(--border);
  font-size:12px; line-height:1.5; color:var(--fg-faint)}

.a3-adam__tag{margin-left:auto; font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-faint)}

/* ----------------------------------------------------------------------------
   18. DRAWER  (every setting, grouped and searchable)
   -------------------------------------------------------------------------- */
.a3-scrim{position:fixed; inset:0; z-index:70; background:rgba(7,4,37,.55);
  opacity:0; pointer-events:none; transition:opacity var(--t-base)}
.a3-scrim.is-open{opacity:1; pointer-events:auto}
.a3-drawer{position:fixed; right:0; top:0; bottom:0; z-index:80; width:min(var(--drawer-w),100%);
  display:flex; flex-direction:column; background:var(--surface-1);
  border-left:1px solid var(--border); box-shadow:var(--shadow-lg);
  transform:translateX(100%); transition:transform var(--t-base)}
.a3-drawer.is-open{transform:none}
.a3-drawer__head{display:flex; align-items:center; justify-content:space-between;
  padding:var(--s4) var(--s5); border-bottom:1px solid var(--border)}
.a3-drawer__body{flex:1; overflow-y:auto; padding:var(--s4) var(--s5) var(--s7)}
/* ---- Publishing by hand -------------------------------------------------
   The seven platforms with no publish adapter go out by copy and paste, and
   the panel that carries the paste lives in the drawer rather than in a new
   overlay: it is a working surface you read WHILE you paste into the other
   window, not a question. .a3-confirm is the question.

   The drawer widens for it, because 420px of whitepaper preview is a column
   two words across. A modifier on the canonical drawer, not a second drawer.
   Two classes beat one, so the order below cannot silently lose to the base
   rule the way an equal-specificity modifier would.                        */
.a3-drawer.is-wide{width:min(720px,100%)}

.a3-handoff{display:flex; flex-direction:column; gap:var(--s4)}
.a3-handoff__for{margin:0; font-size:18px; font-weight:600; color:var(--fg)}
.a3-handoff__field{display:flex; flex-direction:column; gap:var(--s2)}
.a3-handoff__label{font-size:11px; font-weight:600; letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-muted)}
.a3-handoff__row{display:flex; gap:var(--s2); align-items:center}
.a3-handoff__row .a3-input{flex:1; min-width:0}

/* The platform's own caution, from the server. Reddit removing anything that
   reads as promotional is not a thing we can phrase once for all seven.     */
.a3-handoff__warn{margin:0; padding:var(--s3) var(--s4); border-radius:var(--r-sm);
  border:1px solid var(--amber); color:var(--fg); background:var(--surface-2);
  font-size:13px; line-height:1.5}

.a3-handoff__guide{padding:var(--s4); border-radius:var(--r-md);
  background:var(--accent-quiet); font-size:13px; line-height:1.55}
.a3-handoff__guide p{margin:0 0 var(--s2)}
.a3-handoff__steps{margin:0; padding-left:var(--s5); display:flex;
  flex-direction:column; gap:var(--s2)}
.a3-handoff__notes{margin:var(--s3) 0 0; padding:var(--s3) 0 0; list-style:none;
  display:flex; flex-direction:column; gap:var(--s2);
  border-top:1px solid var(--border); color:var(--fg-muted)}

.a3-handoff__cover{max-width:100%; height:auto; border-radius:var(--r-sm);
  border:1px solid var(--border)}

/* Bounded, because a whitepaper is a whitepaper and the actions underneath
   have to stay reachable without scrolling past the whole document.        */
.a3-handoff__body{max-height:320px; overflow:auto; padding:var(--s4);
  border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-2); font-size:14px; line-height:1.6}
.a3-handoff__body :first-child{margin-top:0}
.a3-handoff__body :last-child{margin-bottom:0}
.a3-handoff__body img{max-width:100%; height:auto}

.a3-handoff__acts{display:flex; flex-wrap:wrap; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--border)}

.a3-search{width:100%; margin-bottom:var(--s5); padding:11px 14px;
  border:1px solid var(--border); border-radius:var(--r-full);
  background:var(--surface-2); color:var(--fg); font:400 14px/1 var(--font)}
.a3-search:focus{outline:none; border-color:var(--teal)}
.a3-set-group{margin-bottom:var(--s6)}
.a3-set-group > .a3-overline{display:block; margin-bottom:var(--s3)}
.a3-set{display:flex; align-items:center; justify-content:space-between; gap:var(--s4);
  padding:var(--s3) 0; border-bottom:1px solid var(--border)}
.a3-set:last-child{border-bottom:0}
.a3-set__label{font-size:14px; font-weight:500}
.a3-set__text{min-width:0}
.a3-set__value{margin-top:3px; font-size:13px; font-weight:600; color:var(--fg)}
.a3-set__hint{margin-top:2px; font-size:12px; color:var(--fg-muted)}

/* What the drawer added to the row above: a real control on the right, a
   reason when it is switched off, and a full-width shape for a setting that
   is a list of one-liners rather than a single value. */
.a3-set{align-items:flex-start}
.a3-set[hidden]{display:none}
.a3-set__label{display:flex; align-items:center; gap:var(--s2)}
.a3-set__hint{max-width:46ch; line-height:1.5}
.a3-set__reading{max-width:220px; font-size:13px; color:var(--fg-muted); text-align:right; line-height:1.5}
.a3-set__hint.is-withheld{color:var(--amber)}
.a3-set__control{flex:none; display:flex; align-items:center; gap:var(--s2)}
.a3-set__control .a3-input{min-width:0; max-width:180px}
.a3-set--stack{flex-direction:column; align-items:stretch; gap:var(--s3)}
.a3-set--stack .a3-set__control{flex:1 1 auto; display:block}
.a3-set--stack .a3-set__control .a3-input{max-width:none; width:100%}

/* The panel that holds the bands. */
.a3-sets{display:flex; flex-direction:column; gap:var(--s6)}
.a3-sets + .a3-sets{margin-top:var(--s6)}
/* The two groups that belong to no module sit below the ones that do, and
   say plainly that they are declared rather than built. */
.a3-sets--shared{opacity:.75}
.a3-sets__foot{margin-top:var(--s6); padding-top:var(--s4);
  border-top:1px solid var(--border)}
.a3-toggle{width:42px; height:24px; flex:none; position:relative; border:0; cursor:pointer;
  border-radius:var(--r-full); background:var(--border-strong); transition:background var(--t-fast)}
.a3-toggle::after{content:""; position:absolute; top:3px; left:3px; width:18px; height:18px;
  border-radius:50%; background:#fff; transition:transform var(--t-fast)}
.a3-toggle[aria-pressed="true"]{background:var(--teal)}
.a3-toggle[aria-pressed="true"]::after{transform:translateX(18px)}

/* ----------------------------------------------------------------------------
   19. STATES  (empty, loading, failed: all three are required per view)
   -------------------------------------------------------------------------- */
.a3-state{text-align:center; padding:var(--s8) var(--s5);
  border:1px dashed var(--border-strong); border-radius:var(--r-lg)}
.a3-state.is-failed{border-style:solid; border-color:var(--rust)}
.a3-state__mark{width:44px; height:44px; margin:0 auto var(--s4); border-radius:var(--r-full);
  background:var(--accent-quiet); color:var(--accent); display:grid; place-items:center}
.a3-state.is-failed .a3-state__mark{background:rgba(155,59,46,.14); color:var(--rust)}
.a3-state p{max-width:44ch; margin:0 auto var(--s5); color:var(--fg-muted)}
.a3-skeleton{position:relative; overflow:hidden; background:var(--surface-2); border-radius:var(--r-sm)}
.a3-skeleton::after{content:""; position:absolute; inset:0; transform:translateX(-100%);
  background:linear-gradient(90deg,transparent,var(--accent-quiet),transparent);
  animation:a3-sweep 1.4s infinite}
@keyframes a3-sweep{100%{transform:translateX(100%)}}

/* ----------------------------------------------------------------------------
   20. BOTTOM BAR  (below 900 only)
   -------------------------------------------------------------------------- */
.a3-tabbar{display:none}

/* ----------------------------------------------------------------------------
   21. BREAKPOINTS
   Same DOM at every width. No separate mobile markup.
   -------------------------------------------------------------------------- */
@container a3shell (max-width:1199px){
  /* On .a3-shell, not :root. The breakpoint is a container query and :root
     is an ancestor of the container, so an override there is simply ignored
     — the rail stayed 252px wide at tablet width and the collapsed rail was
     never once actually rendered. */
  .a3-shell{--rail-w:var(--rail-w-collapsed)}
  .a3-rail{align-items:center; padding:var(--s5) var(--s2) var(--s4)}
  .a3-brand .a3-word,
  .a3-brand__logo,
  .a3-rail .a3-nav-item__label,
  .a3-rail .a3-nav-group__head,
  .a3-rail .a3-rail__foot .a3-word,
  .a3-rail .a3-account .a3-word{display:none}
  .a3-brand.has-logo .a3-brand__mark{display:grid}

  /* Everything below turns the rail into a column of icons, and every one of
     these selectors must name .a3-rail. The drawer's menu is the same markup
     and only ever exists BELOW this breakpoint, so an unscoped rule here does
     not adjust the rail -- it silently reshapes the menu as well.

     It already had: the sequence line is positioned through the glyphs by
     default and re-centred here for a 76px rail, and unscoped it drew itself
     down the middle of a 420px panel. Fredrik saw a stray vertical line in
     Outward. Two more were waiting behind it -- the attention counts were
     hidden, so a module reporting "3 waiting" would have shown nothing in the
     menu, and the group separators were the collapsed rail's, not the
     menu's. */
  .a3-rail .a3-nav-item{justify-content:center; padding:10px}
  .a3-rail .a3-nav-item.is-child{padding-left:10px}
  .a3-rail .a3-nav-item.is-child::before{display:none}
  .a3-rail .a3-nav-item .a3-dot{position:absolute; top:6px; right:8px}
  .a3-rail .a3-nav-item__count{display:none}
  .a3-rail .a3-nav-group{border-top:1px solid var(--border); padding-top:var(--s3)}
  .a3-rail .a3-nav-group:first-of-type{border-top:0; padding-top:0}
  .a3-rail .a3-nav-group.is-flow::before{left:50%; top:6px; bottom:6px}
  .a3-rail .a3-tasks{padding:var(--s2); text-align:center}
  .a3-header,.a3-viewbar,.a3-toolbar,.a3-canvas{padding-left:var(--s5); padding-right:var(--s5)}
}

@container a3shell (max-width:899px){
  .a3-shell{grid-template-columns:1fr}
  .a3-rail{display:none}
  .a3-menu-btn{display:inline-grid}
  /* The rail is gone at this width and Adam is the header's, not the rail's.
     `.a3-ask{display:none}` used to hide the rail copy here and let a bare
     icon take over; left as it was it would have deleted Adam from phones
     altogether. The pill stays and drops to its mark. */
  .a3-ask--bar .a3-word,
  .a3-ask--bar .a3-ask__key{display:none}
  .a3-ask--bar{padding:7px}
  .a3-header{padding:0 var(--s4); gap:var(--s2)}
  .a3-header__right{gap:var(--s1)}
  .a3-header__right .a3-btn--primary{padding:10px 16px; font-size:13px}
  .a3-btn--icon{width:44px; height:44px; font-size:21px}
  .a3-viewbar,.a3-toolbar,.a3-canvas{padding-left:var(--s4); padding-right:var(--s4)}
  .a3-canvas{padding-bottom:104px; gap:var(--s5)}
  .a3-views{flex:1 1 100%}
  .a3-updated{display:none}
  .a3-figures{grid-template-columns:1fr}
  .a3-verdict{padding:var(--s5) var(--s5) var(--s5) var(--s6)}
  .a3-panel{padding:var(--s4)}
  .a3-msg{max-width:92%}
  .a3-adam{padding:var(--s6) var(--s3) var(--s3)}

  .a3-today__row{flex-direction:column; align-items:flex-start; gap:var(--s2)}
  .a3-today__who{width:auto}

  .a3-idea{flex-wrap:wrap; align-items:flex-start}
  .a3-idea__acts{width:100%; justify-content:flex-end}

  .a3-bar-row{grid-template-columns:1fr 48px; gap:var(--s2) var(--s3);
    grid-template-areas:"name pct" "bar bar"}
  .a3-bar-row__name{grid-area:name}
  .a3-bar-row .a3-bar{grid-area:bar}
  .a3-bar-row__pct{grid-area:pct}

  .a3-slot{flex-direction:column; align-items:flex-start; gap:var(--s2)}
  .a3-slot__when{width:auto}

  .a3-table thead{display:none}
  .a3-table,.a3-table tbody,.a3-table tr,.a3-table td{display:block; width:100%}
  .a3-table tr{margin-bottom:var(--s3); padding:var(--s3);
    border:1px solid var(--border); border-radius:var(--r-md)}
  .a3-table td{display:flex; justify-content:space-between; gap:var(--s4); padding:6px 0; border:0}
  .a3-table td::before{content:attr(data-label); font-size:11px; font-weight:600;
    letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}

  .a3-tabbar{display:flex; position:fixed; left:0; right:0; bottom:0; z-index:50;
    background:var(--surface-1); border-top:1px solid var(--border);
    padding:var(--s2) var(--s2) calc(var(--s2) + env(safe-area-inset-bottom))}
  /* `> *`, not `button`. The design file's bar is five <button>s; this shell
     navigates server-side, so four of the five are <a href>. Ported as
     `.a3-tabbar button` the rules matched only the More button and every
     module tab rendered as an unstyled inline link -- 15px text in a row,
     no column, no teal on the open one. The markup changed and the selector
     did not follow it. */
  .a3-tabbar > *{flex:1; display:flex; flex-direction:column; align-items:center; gap:4px;
    position:relative; padding:var(--s2) 0; border:0; background:transparent; cursor:pointer;
    color:var(--fg-faint); font:600 10px/1 var(--font)}
  .a3-tabbar > .is-active{color:var(--accent)}
  .a3-tabbar .a3-glyph{--a3-glyph-icon:14px; width:22px; height:22px}
  .a3-tabbar > .is-active .a3-glyph{background:var(--teal); color:#fff}
  .a3-tabbar .a3-dot{position:absolute; top:4px; right:calc(50% - 16px)}
  .a3-tabbar > *{text-decoration:none}
}

/* ----------------------------------------------------------------------------
   22. PORTED FROM THE MOCKUP
   These components exist in docs/redesign 3/adamiro-dashboard-all-modules.html
   but not in the v1 production stylesheet above. Renamed to the a3- prefix
   and converted from the mockup's flat class names to this file's BEM
   convention (.gstep .mark -> .a3-gstep__mark, .gstep.done -> .a3-gstep--done).
   -------------------------------------------------------------------------- */

/* --- Guidance: welcome guide, checklists, help --- */
.a3-guide{display:flex; flex-direction:column; overflow:hidden; background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-gstep{display:flex; gap:var(--s4); padding:var(--s5); border-bottom:1px solid var(--border);
  align-items:flex-start}
.a3-gstep:last-child{border-bottom:0}
.a3-gstep__mark{width:28px; height:28px; border-radius:50%; flex:none; display:grid;
  place-items:center; font-size:12px; font-weight:700; border:1px solid var(--border-strong);
  color:var(--fg-faint)}
.a3-gstep--done .a3-gstep__mark{background:var(--positive); border-color:transparent; color:var(--positive-fg)}
.a3-gstep--now{background:var(--accent-quiet)}
.a3-gstep--now .a3-gstep__mark{background:var(--teal); border-color:transparent; color:#fff}
.a3-gstep__body{flex:1; min-width:0}
.a3-gstep__body h4{font-size:15px; font-weight:600}
.a3-gstep__body p{font-size:13px; color:var(--fg-muted); margin-top:4px; max-width:62ch}
.a3-gstep__go{flex:none; display:flex; align-items:center; gap:var(--s2)}
.a3-gstep--done .a3-gstep__body h4{color:var(--fg-muted); font-weight:500}
@container a3shell (max-width:899px){
  .a3-gstep{flex-wrap:wrap}
  .a3-gstep__go{width:100%; justify-content:flex-end}
}
.a3-howto{display:grid; grid-template-columns:repeat(auto-fit,minmax(260px,1fr)); gap:var(--s4)}
.a3-howto .a3-card p{margin-top:var(--s2)}
.a3-guides-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(220px,1fr)); gap:var(--s2)}
.a3-guide-link{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  border:1px solid var(--border); border-radius:var(--r-md); background:transparent; color:var(--fg);
  font:500 13px/1.3 var(--font); text-align:left; cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast)}
.a3-guide-link:hover{border-color:var(--teal); background:var(--accent-quiet)}
.a3-guide-link__arrow{margin-left:auto; color:var(--fg-faint)}

/* --- Pools: unassigned or grouped members (Mentor, The Tank) --- */
.a3-pool{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:var(--s2)}
.a3-pool-cat{display:flex; align-items:center; justify-content:space-between; gap:var(--s2);
  padding:10px var(--s3); border:1px solid var(--border); border-radius:var(--r-md); font-size:13px}
.a3-pool-cat__cnt{font-size:12px; font-weight:700; color:var(--fg-faint); font-variant-numeric:tabular-nums}
.a3-pool-cat--seated{border-color:var(--border-strong); background:var(--accent-quiet)}

/* --- People and seats --- */
/* One row implementation under two names. .a3-listrow is what it is -- a
   label, a title, a sub-line and some actions, divided by a hairline. .a3-seat
   is what the Account screen calls it, kept because a seat is a real thing
   there and the mockup names it. Adding a second implementation for Memory
   would have been a third row that looks the same and drifts. */
.a3-listrow,
.a3-seat{display:flex; align-items:center; gap:var(--s4); padding:var(--s4) 0;
  border-bottom:1px solid var(--border)}
.a3-listrow:last-child,
.a3-seat:last-child{border-bottom:0}
.a3-listrow__main,
.a3-seat__who{display:flex; align-items:center; gap:var(--s3); flex:1; min-width:0}
.a3-listrow__title,
.a3-seat__name{font-size:14px; font-weight:500}
.a3-listrow__sub,
.a3-seat__sub{font-size:12px; color:var(--fg-muted); margin-top:2px}
.a3-listrow__acts,
.a3-seat__acts{display:flex; align-items:center; gap:var(--s2); flex:none}
/* Title over subtitle rather than beside it. The row's default is one line --
   a briefing and its date read fine side by side -- but a rated thing carries
   its module, its direction and its age, which is a sentence, not a stamp. */
.a3-listrow__main--stack{flex-direction:column; align-items:flex-start; gap:2px}
@container a3shell (max-width:899px){
  .a3-seat{flex-wrap:wrap}
  .a3-seat__acts{width:100%; justify-content:flex-end}
}
.a3-face-sm{width:32px; height:32px; border-radius:50%; background:var(--petrol); color:#fff;
  flex:none; display:grid; place-items:center; font-size:12px; font-weight:700}
.a3-face-sm--pending{background:var(--surface-2); color:var(--fg-faint);
  border:1px dashed var(--border-strong)}
.a3-role-grid{width:100%; border-collapse:collapse; font-size:13px; margin-top:var(--s4)}
.a3-role-grid th{text-align:left; padding:0 var(--s3) var(--s3); border-bottom:1px solid var(--border);
  font-size:11px; font-weight:600; letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-role-grid td{padding:var(--s3); border-bottom:1px solid var(--border)}
.a3-role-grid tr:last-child td{border-bottom:0}
.a3-role-grid__yes{color:var(--positive-fg); font-weight:700}
.a3-role-grid__no{color:var(--fg-faint)}
@container a3shell (max-width:899px){
  .a3-role-grid{display:block; overflow:hidden}
}

/* --- Phone header: two rows ---------------------------------------------
   At 390px the header carried the menu button, the title, Adam, the primary
   action, the overflow menu and the settings gear on one line. The primary
   action alone is 192px once it states its task cost, which it must, so the
   title clipped: "The Tank" rendered as an ellipsis on the shortest module
   name in the product. Shrinking the primary would have meant dropping the
   task count, and the count before the click is the point.

   So the header wraps instead. Title and icons on the first row, the primary
   action full width on the second, where it also becomes an easier target.
   -------------------------------------------------------------------------- */
@container a3shell (max-width:639px){
  .a3-header{height:auto; flex-wrap:wrap; padding-top:var(--s3); padding-bottom:var(--s3);
    row-gap:var(--s3)}
  .a3-header__left{flex:1 1 auto; order:1; min-width:0}
  /* min-width:0, or the row is forced wider than the phone by its own
     contents: a flex item defaults to min-width:auto, and the primary
     button's label is long enough to push the whole header 12px past the
     screen. It was doing exactly that, and the notification panel -- which
     anchors to this row -- inherited the overflow. */
  .a3-header__right{flex:1 1 100%; order:2; min-width:0; flex-wrap:nowrap}
  .a3-header__right .a3-btn--primary{order:1; flex:1 1 auto; justify-content:center; min-width:0}
  .a3-header__left .a3-title{min-width:0; overflow:hidden; text-overflow:ellipsis}
  .a3-header__right .a3-ask--bar,
  .a3-header__right .a3-menu-wrap,
  .a3-header__right > .a3-btn--icon{order:2}
}

/* --- Forms ---------------------------------------------------------------
   The company profile, Your Voice, every settings screen and half of Signals
   are the same shape: a labelled control with a sentence above it saying what
   it is for. There was no such primitive, which is how the largest screen in
   the product came to have no screen at all.

   The hint sits ABOVE the control, not beside it. A right-hand hint column
   collapses under the field on a phone, where it reads as an answer rather
   than a question.
   -------------------------------------------------------------------------- */
.a3-fields{display:flex; flex-direction:column; gap:var(--s6); max-width:76ch}
.a3-fieldgroup{display:flex; flex-direction:column; gap:var(--s4)}
.a3-fieldgroup > .a3-overline{margin-bottom:calc(var(--s2) * -1)}

.a3-field{display:flex; flex-direction:column; gap:6px}
.a3-field__label{font-size:14px; font-weight:600; color:var(--fg)}
.a3-field__hint{font-size:13px; line-height:1.5; color:var(--fg-muted); max-width:68ch}
.a3-field__hint.is-quiet{color:var(--fg-faint)}
/* A hint that is waiting to say something should not reserve a line for it.
   .a3-field is a flex column with a gap, so an empty child costs 6px even
   with no text in it. */
.a3-field__hint:empty{display:none}
/* The hint is a <span> in Company and a <p> in Account. Both are the same
   thing on screen, so the paragraph gives up its margin -- .a3-field is a
   flex column with a gap, and a margin on top of that gap reads as a gap
   twice the size beside every other field on the page. */
p.a3-field__hint{margin:0}
.a3-field__static{font-size:14px; color:var(--fg)}
.a3-field__inline{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.a3-field__inline > .a3-input{flex:1 1 240px}
.a3-field__color{display:flex; align-items:center; gap:var(--s3)}
.a3-field__color > .a3-input{flex:1 1 auto; min-width:0}
/* The native colour input, wearing the swatch it already had. Browsers give it
   their own padding, border and background; without stripping those the well
   sits inside a grey box a few pixels smaller than every other swatch. */
input.a3-swatch{padding:0; background:transparent; cursor:pointer; appearance:none;
  -webkit-appearance:none}
input.a3-swatch::-webkit-color-swatch-wrapper{padding:0}
input.a3-swatch::-webkit-color-swatch{border:0; border-radius:calc(var(--r-sm) - 1px)}
input.a3-swatch::-moz-color-swatch{border:0; border-radius:calc(var(--r-sm) - 1px)}
input.a3-swatch:disabled{opacity:.55; cursor:not-allowed}

/* A search field with its own results underneath. The list stays in flow
   rather than floating over the page: this sits inside a form, and an overlay
   would cover the next field while you were reading the list. */
.a3-combo{position:relative}
.a3-combo__results{max-height:230px; overflow-y:auto; margin-top:6px; padding:var(--s1) 0;
  background:var(--surface-1); border:1px solid var(--border); border-radius:var(--r-md);
  box-shadow:var(--shadow-md)}
.a3-combo__results[hidden]{display:none}
.a3-combo__item{display:flex; align-items:center; justify-content:space-between; gap:var(--s3);
  width:100%; padding:9px var(--s4); background:transparent; border:0; cursor:pointer;
  font:500 14px/1.3 var(--font); color:var(--fg); text-align:left}
.a3-combo__item:hover,
.a3-combo__item:focus-visible{background:var(--accent-quiet); outline:0}
.a3-combo__note{flex:none; font:700 10px/1 var(--font); letter-spacing:.06em;
  text-transform:uppercase; color:var(--fg-faint)}
.a3-combo__empty{padding:10px var(--s4); font-size:13px; color:var(--fg-muted)}

/* A file input, worn by a <label> carrying .a3-field so the name of the face is
   part of the click target rather than a caption beside it. No wrapper class of
   its own: .a3-field already stacks a label over a control, and .a3-field-row
   already wraps a set of them. */
.a3-file{font:400 13px/1.4 var(--font); color:var(--fg-muted)}
.a3-file::file-selector-button{margin-right:var(--s3); padding:7px 14px; cursor:pointer;
  border:1px solid var(--border-strong); border-radius:var(--r-full);
  background:var(--surface-2); color:var(--fg); font:600 12px/1 var(--font)}
.a3-file:disabled{opacity:.55; cursor:not-allowed}

/* The hidden attribute means hidden.
   Every component here that sets its own display silently outranks it --
   .a3-btn is inline-flex, .a3-bulkbar and .a3-loadmore are flex -- and each of
   them ships with hidden set at least once. This was three one-off rules
   before it was one; the third was the one that made the pattern obvious. */
[hidden]{display:none !important}

/* A repeatable field -- a list of rows, each removable. Products stack a name
   over a description; everything else is a single input. Both share .a3-row so
   the remove button sits in one place. */
.a3-rows{display:flex; flex-direction:column; gap:var(--s3)}
/* A list of free-text rows. .a3-row is the row; this is the stack of them,
   and it existed only as a data attribute until Radar rendered one. */
/* A source catalogue is 144 publications. Grouped under the catalogue's own
   headings and laid out in columns, because a flat 144-row list is not a list
   anybody reads. */
/* Radar's source row. NOT .a3-src: that name is the provenance chip on an
   Ideas card, which is 11px, weight 700 and uppercase, and a row that took
   the name inherited all three -- 144 publication names and every
   suggestion's reason rendered in capitals. Grep the stylesheet before
   naming a class. */
.a3-feedgroup{margin-top:var(--s5)}
.a3-feedgroup > .a3-overline{display:block; margin-bottom:var(--s3)}
.a3-feedgrid{display:grid; gap:var(--s2);
  grid-template-columns:repeat(auto-fit,minmax(240px,1fr))}
.a3-feed{display:flex; align-items:flex-start; gap:var(--s3); padding:var(--s3);
  border:1px solid var(--border); border-radius:var(--r-md); cursor:pointer;
  background:var(--surface-2); transition:border-color var(--t-fast)}
.a3-feed:hover{border-color:var(--border-strong)}
.a3-feed__main{display:flex; flex-direction:column; gap:2px; min-width:0}
.a3-feed__name{font-size:14px; font-weight:500; color:var(--fg)}
/* The health line is the reason this row is worth reading twice: a source
   that has given you nothing in four months is one to turn off. */
.a3-feed__health{font-size:12px; color:var(--fg-faint)}
.a3-feed[data-a3-radar-health="quiet"] .a3-feed__health{color:var(--rust)}
.a3-feed[data-a3-radar-health="silent"] .a3-feed__health{color:var(--fg-faint)}
/* Why this one was picked. Longer than a health reading, so it wraps rather
   than sitting on one line. */
.a3-feed__why{font-size:12px; line-height:1.5; color:var(--fg-muted)}
.a3-feed[hidden]{display:none}
.a3-feedgroup[hidden]{display:none}

/* A proposal, not the catalogue. It borrows the source grid and marks itself
   as something waiting on an answer. */
.a3-suggest{border-color:var(--border-strong)}
.a3-suggest .a3-feedgrid{margin-bottom:var(--s5)}
.a3-suggest[hidden]{display:none}

/* Getting back out of something you opened from a list. */
.a3-backrow{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s4)}

.a3-list{display:flex; flex-direction:column; gap:var(--s2)}
/* 🚨 CENTRED, NOT TOP-ALIGNED. Every one of the 22 rows in v3 is one line of
   content with controls after it -- a title with a chip, a date, an Open
   button and a menu; an input with a remove button. Under flex-start each of
   those settled on its own centre line, because each has its own height and
   padding: on one Voice draft row the title read at 980, the date at 968, the
   chip at 971, the Open button at 973 and the menu at 978. Five things, five
   centre lines, and the Open button lowest of all -- which is what you see.
   A wrapping title made it worse: the checkbox centred against both lines
   while everything to its right stayed pinned to the first. */
.a3-row{display:flex; align-items:center; gap:var(--s3)}
/* A product is a name and a description. The name and the remove button share
   the first line; the description spans both columns underneath. Left to
   flex-wrap the button dropped below the description, a long way from the row
   it removes. */
.a3-row--stack{display:grid; grid-template-columns:1fr auto; align-items:start}
.a3-row--stack > input.a3-input{grid-column:1; grid-row:1}
.a3-row--stack > .a3-btn{grid-column:2; grid-row:1}
.a3-row--stack > textarea.a3-input{grid-column:1 / -1; grid-row:2}
.a3-field--list > .a3-btn{align-self:flex-start; gap:var(--s2)}

/* ----------------------------------------------------------------------------
   Running an action
   Ported from v2's .acp-btn-generating (class-adamiro-ui.php), which is the
   canonical long-job affordance in this product: a spinner in the button and
   a bar along its bottom edge. Renamed to a3-, tokens instead of hex, and the
   duration comes from the registry's duration_s rather than a fixed 30s.

   The bar stops at 95% and never reaches the end. A bar that fills and then
   sits there says "done" while the job is still running, and people close the
   tab. Only the response finishes it.
   -------------------------------------------------------------------------- */
.a3-btn.is-running{position:relative; overflow:hidden; cursor:wait; pointer-events:none}
.a3-btn.is-running::after{
  content:""; position:absolute; left:0; bottom:0; height:3px; width:0;
  background:linear-gradient(90deg, var(--teal) 0%, var(--accent) 100%);
  border-radius:inherit; pointer-events:none;
  animation:a3RunProgress var(--a3-run-duration, 30s) cubic-bezier(.05,.7,.25,1) forwards;
}
/* MUST stay below the base .a3-btn.is-running rule: both are (0,2,0), so
   source order decides. On the primary the default gradient ends in
   var(--accent) -- which IS the primary button's own background, so the right
   half of the bar was painted in the colour it sits on and the whole thing
   read as half a bar. White on teal is the same pairing the label uses. */
.a3-btn--primary.is-running::after{
  background:linear-gradient(90deg, rgba(255,255,255,.5) 0%, #fff 100%);
  box-shadow:0 0 8px rgba(255,255,255,.35);
}

@keyframes a3RunProgress{
  0%{width:0} 20%{width:35%} 50%{width:65%} 80%{width:85%} 100%{width:95%}
}
@media (prefers-reduced-motion:reduce){
  .a3-btn.is-running::after{animation:none; width:50%; opacity:.7}
}

.a3-spinner{
  display:inline-block; width:13px; height:13px; margin-right:7px; flex:none;
  border:2px solid currentColor; border-top-color:transparent; border-radius:50%;
  opacity:.85; animation:a3Spin .7s linear infinite; vertical-align:middle;
}
@keyframes a3Spin{to{transform:rotate(360deg)}}
@media (prefers-reduced-motion:reduce){.a3-spinner{animation-duration:2.4s}}

/* A run that costs tasks says so before it spends them, and says what it
   will overwrite. The product rule is that an action never quietly costs a
   task; this is where that gets enforced for every run button at once. */
/* The tint is on the dialog itself, not a child .a3-scrim. Nested, the scrim
   carries z-index:70 into the dialog's own stacking context and paints over
   the panel -- the copy showed through the form behind it. */
.a3-confirm{
  position:fixed; inset:0; z-index:80; display:none;
  align-items:center; justify-content:center; padding:var(--s5);
  background:rgba(7,4,37,.55);
}
.a3-confirm.is-open{display:flex}
/* Your photo, on Account -> You.

   🚨 THE PICTURE COMES FIRST AND STAYS PUT. `flex:none` on the image,
   because the sentence beside it wraps to two lines on a narrow canvas and a
   shrinking avatar reads as a rendering fault rather than a layout. */
.a3-photo{display:flex; gap:var(--s5); align-items:center;
  margin:0 0 var(--s6); padding:0 0 var(--s6); border-bottom:1px solid var(--border)}
.a3-photo__img{width:96px; height:96px; border-radius:50%; object-fit:cover;
  flex:none; background:var(--surface-2); border:1px solid var(--border)}
.a3-photo__say{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start}
.a3-photo__say .a3-meta{margin:0}

@media (max-width:560px){
  .a3-photo{flex-direction:column; align-items:flex-start}
}

/* The crop stage. A square that clips, with a circular mask over it so what
   the reader lines up is the shape the avatar actually is. */
.a3-crop{position:relative; width:280px; max-width:100%; aspect-ratio:1;
  margin:var(--s4) auto 0; overflow:hidden; border-radius:var(--r-md);
  background:var(--surface-2); cursor:grab; touch-action:none}
.a3-crop.is-grabbing{cursor:grabbing}
.a3-crop img{position:absolute; top:0; left:0; transform-origin:0 0;
  max-width:none; user-select:none; -webkit-user-drag:none}

/* The circle, drawn over the photo rather than clipping it: the reader needs
   to see what is being left out to know whether to move it.

   The pseudo-element IS the circle, and an OUTWARD 9999px shadow dims
   everything around it -- clipped back to the stage by overflow:hidden. An
   inset shadow under a clip-path does the opposite: it darkens the circle and
   leaves the discarded corners bright. */
.a3-crop::after{content:''; position:absolute; inset:0; pointer-events:none;
  border-radius:50%; box-shadow:0 0 0 9999px rgba(7,4,37,.55)}

.a3-crop__zoom{display:flex; gap:var(--s3); align-items:center;
  margin:var(--s4) auto 0; width:280px; max-width:100%}
.a3-crop__zoom span{font-size:13px; color:var(--fg-muted)}
.a3-crop__zoom input{flex:1}

.a3-confirm__panel{
  position:relative; width:min(440px, 100%); padding:var(--s6);
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg); box-shadow:var(--shadow-lg);
  /* The picklist scrolls on its own, but a panel that ALSO carries steer
     selects, a note field and a cost line can outgrow a short window -- and
     .a3-confirm centres it, so the overflow leaves the top and the bottom
     off-screen with nothing to scroll. The buttons are at the bottom. */
  max-height:100%; overflow-y:auto;
}

/* The crop stage needs room the confirm panel was never sized for. Declared
   BELOW its base: equal specificity, so source order decides and a modifier
   above the base it overrides is a rule that silently does nothing. */
.a3-confirm__panel--wide{width:min(520px, 100%)}
.a3-confirm__panel h2{margin:0 0 var(--s3); font-size:19px; font-weight:600; color:var(--fg)}
.a3-confirm__panel p{margin:0 0 var(--s5); font-size:14px; line-height:1.6; color:var(--fg-muted)}
.a3-confirm__cost{
  display:inline-block; margin:0 0 var(--s5); padding:5px var(--s3);
  border-radius:var(--r-full); background:var(--accent-quiet);
  font-size:12px; font-weight:600; color:var(--fg)
}
/* 🚨 THE BUTTONS NEED AIR ABOVE THEM, WHATEVER IS ABOVE THEM. Fredrik,
   2026-08-27, on the Draft it dialog: "needs empty space between field and
   buttons... Maybe this is a general issue?" It was. The panel gave its
   paragraph a bottom margin and nothing else, so a dialog whose last element
   is a bare .a3-input, a progress bar or a picklist put its buttons flush
   against it -- measured at exactly 0px on Draft it.
   The margin belongs on the actions, not on each thing that might precede
   them, because the panel is a block container: this collapses with the
   paragraph's existing 24px rather than adding to it, so a dialog that was
   already spaced correctly does not grow. */
/* A dialog that has somewhere to send you: the post that just went live, on
   the platform it went live on. Its own row above the buttons, because "open
   the thing" and "close this" are not the same kind of press.               */
/* The media library. A grid, because the whole point is recognising a picture
   you made three weeks ago -- a list of filenames is what the old view was.  */
.a3-media{display:grid; grid-template-columns:repeat(auto-fill,minmax(190px,1fr)); gap:var(--s4)}
.a3-media__item{position:relative; margin:0; padding:var(--s3); border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-2); display:flex; flex-direction:column; gap:var(--s2)}
.a3-media__pick{position:absolute; top:var(--s3); left:var(--s3); z-index:1}
.a3-media__img{display:block; width:100%; height:150px; object-fit:contain;
  background:var(--surface-1); border-radius:var(--r-sm)}
.a3-media__cap{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2); min-width:0}
/* A generated filename is long and the interesting half is the end of it, so
   it wraps rather than being cut off at a width nobody chose. */
.a3-media__name{flex:1 1 100%; min-width:0; font:600 13px/1.4 var(--font); color:var(--fg);
  overflow-wrap:anywhere}

/* Share cards, in the drawer. A grid rather than a column because the whole
   point is comparing three of them, and the tallest is a 9:16 story -- so the
   image is contained inside a fixed box instead of setting the row height.  */
.a3-share__grid{display:grid; grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:var(--s3); margin-top:var(--s4)}
.a3-share__card{margin:0; padding:var(--s3); border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2)}
.a3-share__img{display:block; width:100%; height:170px; object-fit:contain; background:var(--surface-1); border-radius:var(--r-sm)}
.a3-share__cap{display:flex; align-items:center; justify-content:space-between; gap:var(--s2); margin-top:var(--s2); font-size:12px; color:var(--fg-muted)}

.a3-confirm__links{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s4)}

.a3-confirm__acts{display:flex; gap:var(--s3); justify-content:flex-end;
  margin-top:var(--s5)}

/* A checkbox and its wording as one click target. Lives here rather than in
   the confirm because the next screen that needs a checkbox should inherit
   this one instead of drawing its own. The native control is kept -- the
   theme leaves checkboxes alone, and accent-color is enough to brand it. */
/* A set of choices inside a field. Scrolls, because the memory list is as
   long as the account is old and a dialog that grows past the viewport puts
   its own buttons off the screen. The .a3-check margin is reset here: inside
   a list the gap belongs to the container, not to every row. */
.a3-checklist{display:flex; flex-direction:column; gap:var(--s2);
  max-height:200px; overflow-y:auto; padding:var(--s2) 0}
.a3-checklist .a3-check{margin:0}
/* The 200px cap above is sized for a dialog, where the list sits over the
   page and its own buttons have to stay reachable. On a form that IS the
   page there is nothing to push off screen, and nine post kinds with their
   glosses in a 200px scroller is a list you read three lines at a time. A
   modifier, not a second class: the gap, the reset and the row shape all
   still come from .a3-checklist. */
.a3-checklist--tall{max-height:none; overflow-y:visible}
.a3-check{display:flex; align-items:flex-start; gap:var(--s3); margin:0 0 var(--s5);
  cursor:pointer; font-size:14px; line-height:1.5; color:var(--fg)}
.a3-check input{width:18px; height:18px; flex:none; margin:1px 0 0; cursor:pointer;
  accent-color:var(--teal)}

/* The Commission's own AI labels. Both pills ship and the theme picks one:
   the white pill is invisible on a light page and the black one on a dark
   page, and v2 only ever had to answer for dark.

   The size here is ours, but it has a floor: below it the mark stops being
   recognisable, which is the whole point of using the Commission's artwork
   rather than our own. Do not shrink these to fit a layout. */
.a3-eu-marks{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.a3-eu-mark img{height:22px; width:auto; display:block}
/* Qualified with img, because `.a3-eu-mark img` above is (0,1,1) and a bare
   `.a3-eu-mark__dark` is (0,1,0) -- the display:block won and BOTH pills
   showed, one under the other. Specificity, not source order, this time. */
.a3-eu-mark img.a3-eu-mark__dark{display:none}
:root:not([data-theme="light"]) .a3-eu-mark img.a3-eu-mark__light{display:none}
:root:not([data-theme="light"]) .a3-eu-mark img.a3-eu-mark__dark{display:block}

/* Name, role and contact read as one answer to one question, so they sit on
   one line and wrap together rather than stacking like three settings. */
/* Fields that answer one question together, and wrap together rather than
   stacking like separate settings: name/role/contact, or the four palette
   slots. Named for the shape, not for the count -- it was .a3-trio while
   editorial responsibility was its only user, and the palette has four. */
.a3-field-row{display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(var(--a3-field-min,180px),1fr))}

/* A hint that is telling you the setting above it is not doing what it says. */
.a3-field__hint.is-warn{color:var(--rust)}
/* ...and one saying it is. Used by the font status line, which is the only
   place in the product that can confirm a saved name reached real files. */
.a3-field__hint.is-good{color:var(--positive-fg)}

/* Said once, at the top: this profile is not yours to change. Not a warning --
   nothing is wrong -- so it reads as surface, not as an alert. */
.a3-note{display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5);
  padding:11px var(--s4); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2); font-size:13px; line-height:1.5; color:var(--fg-muted)}
.a3-note svg{flex:none}

/* Autosave's only visible surface. A field that has just been written to says
   so for a moment; a field that failed says so until it succeeds, because a
   screen with no Save button has no other way to tell you it did not. */
.a3-input.is-saving{border-color:var(--border-strong)}
.a3-input.is-saved{border-color:var(--teal)}
.a3-input.is-failed{border-color:var(--rust)}
/* 🚨 IT HAS TO BE SEEN TO BE FEEDBACK. Fredrik, 2026-08-27: "The info toast
   is too discreet. I missed and saw no feedback."
   Three things were working against it, and each on its own is enough to miss:
   muted grey text at 13px on the page's own surface colour; a fade with no
   movement, which peripheral vision does not register; and 1.8 seconds, which
   is under the time it takes to notice a thing and then read twelve words of
   it. It also appears bottom-centre while the reader's eye is on the card they
   just clicked, so it has to survive being found late.
   Full-strength text, an accent edge, and it rises into place. The dwell is
   set in JS from the length of the message -- see flash(). */
.a3-saved{position:fixed; left:50%; bottom:var(--s6);
  transform:translate(-50%, 14px);
  z-index:70; padding:13px var(--s5) 13px var(--s4);
  border-radius:var(--r-full);
  background:var(--surface-1); border:1px solid var(--border-strong);
  border-left:4px solid var(--accent);
  box-shadow:var(--shadow-lg);
  font:500 14px/1.4 var(--font); color:var(--fg);
  max-width:min(560px, calc(100vw - var(--s6)));
  opacity:0; pointer-events:none;
  transition:opacity var(--t-base), transform var(--t-base)}
.a3-saved.is-on{opacity:1; transform:translate(-50%, 0)}
/* Someone who has asked not to be moved still gets the contrast. */
@media (prefers-reduced-motion:reduce){
  .a3-saved{transform:translate(-50%, 0); transition:opacity var(--t-base)}
}

.a3-input{width:100%; padding:11px 14px; border:1px solid var(--border);
  border-radius:var(--r-md); background:var(--surface-2); color:var(--fg);
  font:400 15px/1.5 var(--font)}
/* The theme styles EVERY form control on the site at (0,6,1) --
   `input:not([type=submit]):not([type=button])...` six times over -- and
   again at (0,7,2) under html[data-theme]. One of those blocks sits inside
   `@media (prefers-color-scheme: dark)`, so a reader whose OS is dark got
   v3's light page with slate-navy inputs on it, and .a3-input (0,1,0) never
   applied at all: not the padding, not the radius, not the colour.

   Worse, `body:not(.is-light-bg) input[type="text"]` is already !important
   at (0,2,2), which is why the first attempt at this fixed the textareas and
   left the text inputs dark: .a3-shell .a3-input is (0,2,0), and between two
   !important rules specificity still decides. Hence .a3-body as well -- (0,3,0),
   scoped to the one body class only the v3 template sets.

   This block forces the properties the theme sets -- the same remedy the heading colour needed
   at the foot of this file, and for the same reason. Both are scoped to
   .a3-shell, which only the v3 document carries, so no v2 page changes.
   These two blocks and the reduced-motion reset are the only !important in
   the file; each answers a rule that is itself !important or unreachable by
   specificity. */
/* Third rule the theme owns: `body:not(.is-light-bg) label` paints EVERY
   label rgba(241,245,249,.72) !important. On a white confirm panel that is a
   contrast of 1.05 -- the checkbox wording read as blank. Same remedy, same
   scope. */
.a3-body .a3-shell .a3-check{color:var(--fg) !important; font-size:14px !important}
/* 🚨 And any REAL <label> element, which is the same rule biting again.
   Company writes its field captions as <span class="a3-field__label"> and so
   never met this; Account wrote them as <label for=...> -- correct markup,
   and it renders the caption in the theme's near-white on v3's light page.
   "First name" and "Last name" were ghosts above their own inputs.
   The class is styled either way; this is only about the element. */
.a3-body .a3-shell label.a3-field__label{color:var(--fg) !important}
.a3-body .a3-shell label{color:var(--fg)}

/* And the fourth: Adam's ask field is a bare input inside a white panel, and
   the theme paints every input it does not exclude by type -- its selector
   carries six :not() attribute tests, so it outruns anything reasonable. It
   came out v2 dark navy on white. */
.a3-body .a3-shell .a3-adam__input input{
  background:transparent !important; border:0 !important; color:var(--fg) !important;
  padding:0 !important; font:400 16px/1.4 var(--font) !important;
}
.a3-body .a3-shell .a3-adam__input input::placeholder{color:var(--fg-faint) !important}
/* Fifth: the toolbar. .a3-control is a pill for both a <select> and a
   <input type=search>, and the theme repaints both -- the whole row came out
   v2 navy above a light page. */
.a3-body .a3-shell .a3-control{
  background:transparent !important; border:1px solid var(--border) !important;
  border-radius:var(--r-full) !important; color:var(--fg-muted) !important;
  font:500 13px/1 var(--font) !important; padding:7px 13px !important;
}
.a3-body .a3-shell .a3-control--search{min-width:220px}
.a3-body .a3-shell .a3-control--search::placeholder{color:var(--fg-faint) !important}
.a3-body .a3-shell .a3-control:focus{outline:none; border-color:var(--teal) !important;
  box-shadow:none !important}
/* ...and its focus ring, which the theme draws as a 1px teal box-shadow. On a
   field with no border of its own that reads as a stray rectangle, so the row
   below the input carries the focus instead. */
.a3-body .a3-shell .a3-adam__input input:focus{box-shadow:none !important; outline:none !important}
.a3-adam__input:focus-within{border-bottom-color:var(--teal)}
/* Sixth: the conversation composer. Same rule, new field -- the theme paints
   every textarea it does not exclude, so Mentor's message box came out slate
   navy with near-white text sitting inside a light grey composer on a white
   page. .a3-composer textarea already said background:transparent and lost,
   because the theme's selector is !important and this one was not.
   🚨 Seen on a screenshot, not in a test. Nothing here is reachable by any
   gate we have: the markup is right, the class is painted, the property is
   declared -- another stylesheet simply outranks it. */
.a3-body .a3-shell .a3-composer textarea{
  background:transparent !important; border:0 !important; color:var(--fg) !important;
  font:400 15px/1.5 var(--font) !important; box-shadow:none !important;
}
.a3-body .a3-shell .a3-composer textarea::placeholder{color:var(--fg-faint) !important}
.a3-body .a3-shell .a3-composer textarea:focus{outline:none !important; box-shadow:none !important}

.a3-body .a3-shell .a3-input{
  padding:11px 14px !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important;
  background:var(--surface-2) !important;
  color:var(--fg) !important;
  font:400 15px/1.5 var(--font) !important;
}
.a3-body .a3-shell .a3-input::placeholder{color:var(--fg-faint) !important}
.a3-input:focus,
.a3-body .a3-shell .a3-input:focus{outline:none; border-color:var(--teal) !important}
.a3-input:disabled{opacity:.55; cursor:not-allowed}
textarea.a3-input{resize:vertical; min-height:88px}
select.a3-input{cursor:pointer}

.a3-swatch{width:36px; height:36px; flex:none; border-radius:var(--r-sm);
  border:1px solid var(--border-strong)}
.a3-thumb{width:40px; height:40px; flex:none; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--surface-2); border:1px solid var(--border);
  font:700 15px/1 var(--font); color:var(--fg-muted)}

/* --- Voice DNA: the five ways to teach a voice ----------------------------
   The editor writes the voice; these propose what it writes. Ported 2026-08-27
   so nothing about teaching a voice is left on the v2 screen.
   -------------------------------------------------------------------------- */
.a3-dna-flow{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s6);
  padding-top:var(--s5); border-top:1px solid var(--border)}
.a3-dna-flow .a3-subhead{margin:0}
/* 🚨 textarea.a3-dna-flow__area, not .a3-dna-flow__area. The floor it beats is
   textarea.a3-input{min-height:88px} at (0,1,1); a bare class at (0,1,0) loses
   and the box ships 88px tall. The pitch file shipped exactly that way. */
textarea.a3-dna-flow__area{min-height:150px}

/* One language, folded shut until opened -- a <details>, so the pack is only
   fetched when somebody actually looks at it. */
.a3-packs{display:flex; flex-direction:column; gap:var(--s2)}
.a3-pack{border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-1); overflow:hidden}
.a3-pack__head{display:flex; align-items:center; gap:var(--s3); padding:var(--s3) var(--s4);
  cursor:pointer; list-style:none}
.a3-pack__head::-webkit-details-marker{display:none}
.a3-pack__head::after{content:'+'; margin-left:auto; color:var(--fg-faint);
  font:600 15px/1 var(--font)}
.a3-pack[open] .a3-pack__head::after{content:'‘2'}
.a3-pack__code{font:600 13px/1 var(--font-mono); letter-spacing:.06em; color:var(--fg);
  padding:4px 8px; border-radius:var(--r-sm); background:var(--surface-2)}
.a3-pack__body{display:flex; flex-direction:column; gap:var(--s3);
  padding:0 var(--s4) var(--s4); border-top:1px solid var(--border)}
.a3-packs__code{max-width:140px}

/* The suggestions inbox. One card per proposal, with the evidence under it --
   the difference between a suggestion you can judge and one you can only
   guess at. */
.a3-dna-inbox{display:flex; flex-direction:column; gap:var(--s3)}
.a3-dna-prop{display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s4); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md)}
.a3-dna-prop__head{display:flex; align-items:flex-start; justify-content:space-between;
  gap:var(--s3)}
.a3-dna-prop__what{margin:0; font-size:15px; line-height:1.45; color:var(--fg)}

/* The sample post. Quoted rather than styled as a draft: it is not one, it is
   not stored, and it must not read like something that was saved. */
.a3-dna-sample{padding:var(--s4); border-left:3px solid var(--accent);
  background:var(--surface-2); border-radius:var(--r-sm);
  display:flex; flex-direction:column; gap:var(--s2)}
.a3-dna-sample__text{margin:0; font-size:15px; line-height:1.65; color:var(--fg);
  white-space:pre-wrap; word-break:break-word}

/* --- Data and privacy, and what has run -----------------------------------
   The last two v2 screens on the account surface, ported 2026-08-27.
   -------------------------------------------------------------------------- */
.a3-privacy,.a3-activity{display:flex; flex-direction:column; gap:var(--s5); max-width:760px}
.a3-privacy__head{display:flex; flex-direction:column; gap:var(--s2)}
.a3-privacy__block{display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s5); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg)}
.a3-privacy__block .a3-subhead{margin:0}

/* A consent switch. A REAL checkbox underneath -- this is the screen where
   being reachable by keyboard and announced as a switch matters most, so the
   input is styled rather than replaced by a div that looks like one. */
.a3-switchrow{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--border); cursor:pointer}
.a3-switchrow__text{display:flex; flex-direction:column; gap:2px; min-width:0}
.a3-switchrow__text strong{font-size:14px; font-weight:600; color:var(--fg)}

/* 🚨 .a3-body .a3-shell, and !important. The theme paints every checkbox on
   the site and wins on both specificity and a bang; without this the switch
   renders as a plain tick box with the track drawn around it. Same answer
   .a3-input gives, for the same reason. */
.a3-body .a3-shell input.a3-switch{
  appearance:none !important; -webkit-appearance:none !important;
  flex:none !important; position:relative !important;
  width:42px !important; height:24px !important; margin:0 !important; padding:0 !important;
  border:1px solid var(--border-strong) !important; border-radius:var(--r-full) !important;
  background:var(--surface-2) !important; cursor:pointer !important;
  transition:background .15s, border-color .15s !important;
}
.a3-body .a3-shell input.a3-switch::after{
  content:''; position:absolute; top:2px; left:2px; width:18px; height:18px;
  border-radius:var(--r-full); background:var(--surface-1);
  box-shadow:var(--shadow-sm); transition:transform .15s;
}
.a3-body .a3-shell input.a3-switch:checked{
  background:var(--accent) !important; border-color:var(--accent) !important;
}
.a3-body .a3-shell input.a3-switch:checked::after{transform:translateX(18px)}
.a3-body .a3-shell input.a3-switch:focus-visible{
  outline:2px solid var(--accent) !important; outline-offset:2px !important;
}
.a3-body .a3-shell input.a3-switch:disabled{opacity:.55 !important; cursor:wait !important}

/* --- Welcome: setup, and how it all fits together -------------------------
   Two v2 pages that had no v3 home until 2026-08-27. The ladder below reuses
   .a3-phases / .a3-steprow, which were written for it and never used; only
   the head and the guide page are new here.
   -------------------------------------------------------------------------- */
.a3-setup{display:flex; flex-direction:column; gap:var(--s5)}
.a3-setup__head{display:flex; flex-direction:column; gap:var(--s2);
  padding:var(--s5); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg)}
.a3-setup__count{display:flex; align-items:baseline; gap:var(--s3)}
/* The percentage is the figure, so it is sized as one. The count beside it is
   the sentence that says what the figure counts. */
.a3-setup__pct{font:700 34px/1 var(--font); color:var(--fg); letter-spacing:-.02em}

/* The pipeline, as a numbered run rather than a diagram: six stages that hand
   work to each other reads as an order, and an order is what this explains. */
.a3-pipeline{list-style:none; margin:0; padding:0; display:flex;
  flex-direction:column; gap:var(--s3)}
.a3-pipeline__step{display:flex; align-items:flex-start; gap:var(--s4)}
.a3-pipeline__step strong{font-size:15px; font-weight:600}
.a3-pipeline__n{flex:none; width:26px; height:26px; display:grid; place-items:center;
  border-radius:var(--r-full); background:var(--accent-quiet); color:var(--accent);
  font:600 12px/1 var(--font)}

.a3-guidepage{display:flex; flex-direction:column; gap:var(--s3); max-width:760px}
.a3-guidepage .a3-subhead{margin-top:var(--s5)}
.a3-meta--lead{font-size:15px; color:var(--fg)}
.a3-guidepage__list{margin:0; padding-left:var(--s5); display:flex;
  flex-direction:column; gap:var(--s2); font-size:14px; line-height:1.55;
  color:var(--fg-muted)}
.a3-guidepage__list strong{color:var(--fg); font-weight:600}
.a3-guidepage__mods{display:grid; gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(240px,1fr))}
.a3-guidepage__mod{display:flex; flex-direction:column; gap:var(--s1);
  padding:var(--s4); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); text-decoration:none; color:inherit}
.a3-guidepage__mod:hover{border-color:var(--border-strong); background:var(--surface-2)}
.a3-guidepage__mod strong{font-size:15px; font-weight:600; color:var(--fg)}

/* --- Sequenced checklist -------------------------------------------------
   The welcome guide. A phase says how far through it is; a locked step says
   what unlocks it, because a button that does nothing and gives no reason is
   read as broken rather than as not-yet.
   -------------------------------------------------------------------------- */
.a3-phases{display:flex; flex-direction:column; gap:var(--s5)}
.a3-phase{padding:var(--s5); border:1px solid var(--border); border-radius:var(--r-lg);
  background:var(--surface-1)}
.a3-phase.is-locked{opacity:.62}
.a3-phase.is-current{border-color:var(--teal)}
.a3-phase__head{display:flex; align-items:center; gap:var(--s4); margin-bottom:var(--s4)}
.a3-phase__text{flex:1; min-width:0}
.a3-phase__text p{margin-top:2px}
.a3-phase__n{font:700 15px/1 var(--font); color:var(--fg-faint); flex:none;
  width:34px; height:34px; display:grid; place-items:center; border-radius:var(--r-sm);
  background:var(--surface-2)}

.a3-stepslist{list-style:none; margin:0; padding:0; display:flex; flex-direction:column}
.a3-steprow{display:flex; align-items:flex-start; gap:var(--s4);
  padding:var(--s4) 0; border-top:1px solid var(--border)}
.a3-steprow__mark{flex:none; width:22px; height:22px; margin-top:2px; display:grid;
  place-items:center; border-radius:var(--r-full); font-size:12px;
  background:var(--surface-2); color:var(--fg-muted)}
.a3-steprow.is-done .a3-steprow__mark{background:var(--positive); color:var(--positive-fg)}
.a3-steprow.is-current .a3-steprow__mark{background:var(--accent-quiet); color:var(--accent)}
.a3-steprow__body{flex:1; min-width:0}
.a3-steprow__body strong{display:block; font-size:15px; font-weight:600}
.a3-steprow__body p{margin-top:3px}
.a3-steprow.is-done .a3-steprow__body strong{color:var(--fg-muted)}
.a3-steprow__cta{flex:none; display:flex; align-items:center; min-height:34px}

/* A foot nav item sits with the account row, not in either track. */
.a3-nav-item--foot{width:100%}

@container a3shell (max-width:639px){
  .a3-steprow{flex-wrap:wrap}
  .a3-steprow__cta{width:100%; padding-left:38px}
  .a3-steprow__cta .a3-btn{width:100%; justify-content:center}
}

/* --- Ideas grid ----------------------------------------------------------
   One card per idea, carrying what the live card carries: what kind it is,
   where it came from, when it arrived, what it says, what it was read from,
   whether you rated it, and whether it has already been written.
   -------------------------------------------------------------------------- */
.a3-idea-grid{display:grid; gap:var(--s4); grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.a3-idea-card{position:relative; display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s5); background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-lg)}
.a3-idea-card.is-used{border-color:var(--border-strong)}
/* The v3 twin of v2's canonical card-delete control: top-right, quiet until
   hovered, never in the flow. The shell borrowed the v2 class name, which
   this stylesheet does not define, so it rendered unstyled as a full-width
   grey bar across every card. */
.a3-card-delete{position:absolute; top:10px; right:10px; z-index:2;
  width:26px; height:26px; display:grid; place-items:center; padding:0;
  border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--fg-faint); font-size:13px; line-height:1; cursor:pointer}
.a3-card-delete:hover{background:var(--surface-2); color:var(--rust)}
.a3-idea-card__pick{position:absolute; top:10px; right:10px; z-index:2;
  display:flex; align-items:center; gap:6px; padding:3px 8px;
  border-radius:var(--r-sm); background:var(--surface-2); cursor:pointer}
.a3-idea-card__ribbon{align-self:flex-start; padding:3px 10px; border-radius:var(--r-full);
  background:var(--positive); color:var(--positive-fg); font:600 11px/1.4 var(--font)}
.a3-idea-card__meta{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap; padding-right:30px}
.a3-idea-card__tags{display:flex; gap:6px; flex-wrap:wrap}
.a3-tag{padding:3px 9px; border-radius:var(--r-full); background:var(--surface-2);
  color:var(--fg-muted); font:600 11px/1.4 var(--font)}
.a3-tag.is-origin{background:var(--accent-quiet); color:var(--accent)}
.a3-idea-card__title{font-size:16px; font-weight:600; line-height:1.35}
.a3-idea-card__desc{font-size:14px; color:var(--fg-muted); line-height:1.55}
.a3-idea-card__links{display:flex; gap:var(--s3); flex-wrap:wrap}
.a3-idea-card__source{font-size:12px; font-weight:600; color:var(--accent); text-decoration:none}
.a3-idea-card__source:hover{text-decoration:underline}
.a3-idea-card__foot{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); margin-top:auto; padding-top:var(--s3); border-top:1px solid var(--border)}
.a3-idea-card__made{display:flex; align-items:center; gap:8px; flex-wrap:wrap}

/* Useful / not useful. It feeds the weekly preference pass, so it sits on
   the card rather than behind a menu. */
.a3-rate{display:flex; gap:4px}
.a3-rate__btn{width:30px; height:30px; display:grid; place-items:center; padding:0;
  border:1px solid var(--border); border-radius:var(--r-sm); background:transparent;
  color:var(--fg-faint); font-size:11px; cursor:pointer}
.a3-rate__btn:hover:not(:disabled){color:var(--fg); border-color:var(--border-strong)}
.a3-rate__btn.is-on{background:var(--accent-quiet); border-color:var(--teal); color:var(--accent)}
.a3-rate__btn:disabled{opacity:.5; cursor:not-allowed}

/* The Write-as menu: fifteen formats in three groups, each stating its
   shape and its price. A format outside the plan is shown and refused. */
/* overflow-x is hidden, not auto. A dropdown that scrolls sideways is a
   dropdown whose content did not fit, and a horizontal scrollbar is a worse
   answer to that than wrapping. */
.a3-menu--wide{width:min(340px,86vw); width:min(340px,86cqw); max-height:380px;
  overflow-y:auto; overflow-x:hidden}
.a3-menu__head{padding:8px var(--s4) 4px}
.a3-menu__item--rich{display:flex; flex-direction:column; gap:2px; align-items:flex-start}
.a3-menu__label{font-weight:600}
.a3-menu__hint{font-size:11px; color:var(--fg-faint); font-weight:400; white-space:normal}
.a3-writeas .a3-menu{right:0; left:auto}

.a3-bulkbar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin-bottom:var(--s4); padding:var(--s3) var(--s4); border-radius:var(--r-md);
  background:var(--surface-2); border:1px solid var(--border)}
.a3-bulkbar .a3-meta{flex:1; min-width:200px}
.a3-btn--danger{background:var(--rust); color:#fff; border-color:var(--rust)}

.a3-loadmore{display:flex; justify-content:center; margin-top:var(--s5)}

/* ----------------------------------------------------------------------------
   MEMORY
   -------------------------------------------------------------------------- */
.a3-panel + .a3-panel{margin-top:var(--s5)}
.a3-panel__head{margin-bottom:var(--s5)}
.a3-panel__head h2{margin:0 0 var(--s2); font-size:19px; font-weight:600; color:var(--fg)}
.a3-panel__head .a3-meta{margin:0}

/* The three ways to teach are one panel, so they read as one job with three
   doors rather than three features stacked on top of each other. */
.a3-teach{display:flex; flex-direction:column; gap:var(--s5)}

/* A drop target that is also a button, because half the people will click it.
   The whole thing is a <label> wrapping a hidden file input, so the click
   target and the drop target are the same rectangle by construction. */
.a3-drop{display:flex; flex-direction:column; align-items:center; gap:var(--s2);
  padding:var(--s6) var(--s5); text-align:center; cursor:pointer;
  border:1px dashed var(--border-strong); border-radius:var(--r-md);
  background:var(--surface-2); transition:border-color var(--t-fast), background var(--t-fast)}
.a3-drop:hover,
.a3-drop.is-over{border-color:var(--teal); background:var(--accent-quiet)}
.a3-drop.is-busy{cursor:wait; opacity:.75}
.a3-drop__head{font-size:14px; font-weight:600; color:var(--fg)}
.a3-drop__caps{font-size:12px; color:var(--fg-faint)}

.a3-memlist{display:flex; flex-direction:column}
/* The checkbox only exists for someone who can act on it. It sits before the
   title rather than at the end, because selecting is the first thing you do
   and reading across to a far-right box loses the row you were on. */
.a3-memlist .a3-check{margin:0; flex:none}
.a3-memrow__meta{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}

/* A taught entry read back. Pre, because what was stored is the text as it
   arrived -- a pasted table keeps its columns and an extracted PDF keeps its
   line breaks. Wrapped, because pre would otherwise scroll a document
   sideways. */
.a3-memtext{margin:0; white-space:pre-wrap; word-break:break-word;
  font:400 15px/1.7 var(--font); color:var(--fg)}


.a3-control--select{padding-right:var(--s5); cursor:pointer}
.a3-control--search{min-width:240px; flex:1 1 240px; max-width:360px}
.a3-toolbar__group--end{margin-left:auto; display:flex; gap:var(--s2)}

.a3-ticklist{display:flex; flex-direction:column; gap:8px}
.a3-tick{display:flex; align-items:center; gap:8px; font-size:14px}
.a3-urls{display:flex; flex-direction:column; gap:var(--s2); align-items:flex-start}
.a3-urls .a3-input{width:100%}

.a3-focus__acts{display:flex; gap:var(--s3); margin-top:var(--s6)}

@container a3shell (max-width:639px){
  .a3-idea-grid{grid-template-columns:1fr}
  .a3-toolbar__group--end{margin-left:0; width:100%}
}

/* --- Notification bell ---------------------------------------------------
   v2 carries it on every dashboard screen. v3 had dropped it entirely, and a
   notification nobody can reach is a notification not sent.
   -------------------------------------------------------------------------- */
.a3-notif > .a3-btn{position:relative}
.a3-notif__badge{position:absolute; top:-3px; right:-3px; min-width:17px; height:17px;
  padding:0 4px; display:grid; place-items:center; border-radius:var(--r-full);
  background:var(--rust); color:#fff; font:700 10px/1 var(--font)}
/* The panel is a little wider than a plain menu: two named actions and a
   heading do not fit in 340px, and they were overflowing by twelve pixels
   -- enough to put a scrollbar across the bottom of the whole panel. */
/* cqw, not vw: the width that matters is the shell's, which is the window
   in production and the simulated frame in the mockup. With vw a 375px
   preview drew a 380px panel and looked fine only because the frame is
   centred in a wide window. */
.a3-notif > .a3-menu{width:min(380px,92vw); width:min(380px,92cqw)}
/* One line. The heading and the two actions come to 287px against 295px of
   room at the narrowest the panel ever gets, so wrapping was never buying
   anything -- it just made the head twice as tall on every screen. */
.a3-notif__head{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s2); flex-wrap:nowrap; padding:var(--s2) var(--s3) var(--s3);
  border-bottom:1px solid var(--border); margin-bottom:var(--s2)}
.a3-notif__head > .a3-overline{white-space:nowrap}
.a3-notif__acts{display:flex; gap:var(--s1); flex-wrap:nowrap; margin-left:auto}
.a3-notif__acts .a3-btn{padding-left:8px; padding-right:8px; white-space:nowrap}
/* Long titles wrap rather than widening the panel from the inside. */
.a3-menu__label,.a3-menu__hint{white-space:normal; overflow-wrap:anywhere}
.a3-menu__item--rich{min-width:0}
.a3-notif__item{position:relative}
.a3-notif__item.is-unread{background:var(--accent-quiet)}
.a3-notif__item.is-unread::before{content:''; position:absolute; left:4px; top:14px;
  width:6px; height:6px; border-radius:var(--r-full); background:var(--teal)}
/* A system message says what kind it is in the dot, the same three levels the
   v2 bell used: info keeps the default teal, maintenance is the urgent colour,
   a feature announcement is the watch colour. Existing tokens only. */
.a3-notif__item.is-unread.level-maintenance::before{background:var(--rust)}
.a3-notif__item.is-unread.level-feature::before{background:var(--amber)}
.a3-notif__when{margin-top:3px; font-size:11px}

@container a3shell (max-width:639px){
  /* The bell is not the rightmost control, so anchoring the panel to it
     pushed 38px of it off the left edge of a phone. Anchor it to the header
     row instead, which already spans the full width at this size.
     position:fixed was the obvious answer and the wrong one: the frame's
     container-type did not make it the containing block, and the panel came
     out 1394px wide against the window. */
  .a3-header__right{position:relative}
  .a3-notif{position:static}
  .a3-notif > .a3-menu{left:0; right:0; width:auto; top:calc(100% + 8px)}
}

@media (prefers-reduced-motion:reduce){
  *{transition:none !important; animation:none !important}
}

/* ---- Inside WordPress ----------------------------------------------------
   The shell renders into its own bare document, so nothing here fights a
   theme wrapper. What is still above it varies by environment: the admin bar
   pushes <html> down 32px (46px on phones), and staging adds its own banner
   on top of that. Production has the bar and no banner.

   Rather than name each of them and get the arithmetic wrong on one
   environment, --a3-top is measured once on load and on resize. The 0px
   fallback is what you get if the script never runs: the rail then overhangs
   by whatever sits above it, which is the behaviour this replaces, not a new
   failure.                                                                   */
.a3-body{margin:0}

.a3-shell{min-height:calc(100vh - var(--a3-top, 0px))}
.a3-rail{height:calc(100vh - var(--a3-top, 0px))}

/* The theme paints every heading with `body h1, ... { color: var(--ink)
   !important }`, and --ink is near-white because the site was made
   permanently dark. v3 brings light mode back, so in light mode the surface
   title and the canvas heading both arrived near-white on a near-white page.
   Measured at a 1.05 contrast ratio: present, correct in the markup, and
   unreadable. No gate could see it -- the class was right and the token was
   right.

   This is here because the rule it answers is itself !important: no
   specificity reaches past that. The form-control block above is the other
   one, for the same kind of reason. It is scoped to
   headings inside the shell, so it cannot leak into a page v3 does not own.
   Both themes take the shell's own token, which is the point -- v3 stops
   depending on a colour the rest of the site chose for one theme only.       */
.a3-shell h1,
.a3-shell h2,
.a3-shell h3,
.a3-shell h4,
.a3-shell h5,
.a3-shell h6{color:var(--fg) !important}

/* The drawer and the Adam panel are position:fixed at top:0, which puts them
   underneath the WordPress admin bar -- and the drawer's close button was
   entirely behind it, measured at 16-60px against a bar spanning 28-74px.
   The panel opened, the menu was right, and there was no way to shut it.
   They start below whatever sits above the shell, using the offset the
   script already measures for the rail. */
.a3-drawer{top:var(--a3-top, 0px)}
.a3-adam{top:var(--a3-top, 0px)}

/* ----------------------------------------------------------------------------
   SETTINGS, IN THE DRAWER
   Every row is the same shape: what it is on the left, the control on the
   right, and the reason it is switched off underneath when it is. A list
   setting takes the full width instead, because a column of addresses beside
   a label is 180px of column.
   -------------------------------------------------------------------------- */
/* ----------------------------------------------------------------------------
   THE GUIDE
   The drawer's third panel. Every ? in the product opens it at the entry it
   sits beside, which is why each section is an anchor and says so when it is
   the one you were sent to.
   -------------------------------------------------------------------------- */
.a3-gguide__lead{font:400 15px/1.6 var(--font); color:var(--fg-muted);
  margin:0 0 var(--s5)}
.a3-gplan{display:flex; flex-direction:column; gap:var(--s2); margin-bottom:var(--s6);
  padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2)}
.a3-gplan__row{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); font:400 13px/1.4 var(--font); color:var(--fg-muted)}
.a3-gplan__row strong{font-variant-numeric:tabular-nums; color:var(--fg)}

.a3-gsec{display:flex; gap:var(--s4); padding:var(--s4) 0;
  border-top:1px solid var(--border); scroll-margin-top:var(--s4)}
.a3-gsec:first-of-type{border-top:0}
.a3-gsec__mark{flex:none; width:36px; height:36px; display:grid; place-items:center;
  border-radius:var(--r-sm); background:var(--accent-quiet); color:var(--accent)}
.a3-gsec__body{min-width:0}
.a3-gsec__body h3{margin:0 0 var(--s2); font:600 15px/1.4 var(--font)}
.a3-gsec__body p{margin:0 0 var(--s3); font:400 14px/1.7 var(--font); color:var(--fg-muted)}
.a3-gsec__body p:last-child{margin-bottom:0}
.a3-gsec__body strong{color:var(--fg); font-weight:600}
/* A guide section can carry a list. Reach's AI-disclosure section is nine
   separate obligations and reads as a wall as one paragraph -- and without
   these three rules the bullets inherit the page reset and lose their markers
   and their indent, which is a list that no longer looks like one. */
.a3-gsec__body ul{margin:0 0 var(--s3); padding-left:var(--s5); list-style:disc;
  font:400 14px/1.7 var(--font); color:var(--fg-muted)}
.a3-gsec__body li{margin:0 0 var(--s2)}
.a3-gsec__body ul:last-child, .a3-gsec__body li:last-child{margin-bottom:0}
/* Sent here by a ? somewhere else on the page: say which one, briefly. */
.a3-gsec.is-landed{background:var(--accent-quiet); border-radius:var(--r-md);
  padding-left:var(--s3); padding-right:var(--s3)}

/* The menu inside the slide-in panel. The rail's own list owns the viewport
   height and scrolls itself; in the drawer the body already scrolls, so this
   copy just stacks and lets the body do it. */
.a3-drawer__nav{display:flex; flex-direction:column; gap:var(--s4)}
.a3-drawer__nav .a3-nav-item{width:100%}
.a3-drawer .a3-rail__foot{margin-top:var(--s4)}

/* ----------------------------------------------------------------------------
   THE DROPDOWN
   A native <select> renders its option list through the operating system, so
   no stylesheet reaches it: on a v3 page the pill was Adamiro and the list
   that dropped out of it was Windows. -- Fredrik, 2026-08-25.

   The site already has the answer. theme-select.js keeps the real <select>
   and draws a button and a listbox beside it, which is what every other
   Adamiro page uses; v3 opted out of it because the theme's skin is v2's dark
   chrome, and the comment in the shell said no v3 rule could reach it. A rule
   scoped to the wrapper reaches it fine. The panel is portalled to <body>
   while open, so it carries its own class rather than inheriting the scope,
   and both selectors are doubled because the theme's own are !important.
   -------------------------------------------------------------------------- */
.a3-select{position:relative; display:block}
.a3-select .adam-select-trigger{
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; color:var(--fg) !important;
  font:400 15px/1.5 var(--font) !important; padding:11px 14px !important;
  min-height:0; gap:var(--s3);
}
.a3-select .adam-select-trigger:hover{border-color:var(--border-strong) !important}
.a3-select.is-open .adam-select-trigger,
.a3-select .adam-select-trigger:focus-visible{
  border-color:var(--teal) !important; box-shadow:none !important; outline:none !important;
}
.a3-select .adam-select-caret{color:var(--fg-faint)}

/* In the toolbar the same control is a pill, because the row it sits in is a
   row of pills. Same component, one modifier -- not a second dropdown. */
.a3-select--control{display:inline-block}
.a3-select--control .adam-select-trigger{
  background:transparent !important; border-radius:var(--r-full) !important;
  color:var(--fg-muted) !important; font:500 13px/1 var(--font) !important;
  padding:7px 13px !important; gap:var(--s2);
}
.a3-select--control .adam-select-trigger:hover{color:var(--fg) !important}

.a3-select__panel.adam-select-panel{
  background:var(--surface-1); border:1px solid var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg); padding:var(--s1);
  scrollbar-color:var(--border-strong) transparent;
  /* The panel is given the trigger's width as an inline style, which on a
     114px pill folded "AI & Emerging Tech" onto three lines and added a
     sideways scrollbar. min-width beats width, so the list is as wide as its
     longest entry and the pill stays a pill. */
  min-width:max-content; max-width:min(340px, 90vw); overflow-x:hidden;
}
.a3-select__panel.adam-select-panel li{
  font:400 14px/1.4 var(--font); color:var(--fg-muted);
  padding:9px 12px; border-radius:var(--r-sm);
}
.a3-select__panel.adam-select-panel li:hover{background:var(--accent-quiet); color:var(--fg)}
.a3-select__panel.adam-select-panel li.is-selected,
.a3-select__panel.adam-select-panel li.is-selected:hover{
  background:var(--accent-quiet); color:var(--accent); font-weight:600;
}
.a3-select__panel.adam-select-panel li.is-disabled{color:var(--fg-faint); cursor:not-allowed}

/* v2's mobile navigation, off v3 pages.
   The v3 template calls wp_footer(), which is correct -- scripts, the consent
   banner and the admin bar all arrive through it. ADAMIRO_Mobile_Nav arrives
   too, and its bar is position:fixed at z-index 10001 against v3's 50, so on
   a phone it sat directly on top of the v3 tab bar: the visible bottom row
   read "Home / Create / Advise / More" while v3's own bar was underneath it,
   rendered and unreachable.
   Scoped to .a3-body, which only the v3 template sets, so v2's own pages keep
   their navigation untouched. Hiding the container takes the overlay and the
   More sheet with it; both were also live on every v3 page. */
.a3-body .adm-mnav{display:none}

/* ----------------------------------------------------------------------------
   23. JUMP TO  (long reads: Radar and Signals briefings)
   v2 built this in JavaScript, twice -- signals-dashboard/view.js and
   radar-dashboard/view.js each walked the rendered report, tagged the
   headings and injected an .asr-toc. Here the sections are known before the
   page is written, so the nav is server-rendered and the browser's own
   :target scrolling does the rest. No script, no walk, nothing to desync.
   -------------------------------------------------------------------------- */
.a3-jump{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap;
  padding:var(--s3) var(--s4); background:var(--surface-2);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-jump__label{font-size:11px; font-weight:600; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint); margin-right:var(--s1)}
.a3-jump__link{padding:5px 12px; border:1px solid var(--border);
  border-radius:var(--r-full); background:var(--surface-1);
  font:600 12px/1 var(--font); color:var(--fg-muted); text-decoration:none;
  white-space:nowrap; transition:color var(--t-fast), border-color var(--t-fast),
  background var(--t-fast)}
.a3-jump__link:hover{color:var(--accent); border-color:var(--teal);
  background:var(--accent-quiet)}

/* The sticky header is 64px, so an anchored panel would land underneath it.
   The scrolling element is the document, not .a3-canvas -- putting
   scroll-behavior on the canvas set it on a box that never scrolls, and the
   sheet only loads on a v3 page, so :root is the right place for both. */
:root{scroll-behavior:smooth}
.a3-panel[id]{scroll-margin-top:calc(var(--header-h) + var(--s4))}

/* ----------------------------------------------------------------------------
   24. PRIMITIVES THE MODULES ASKED FOR AND THE SHEET NEVER HAD
   Every class below was already being written by a view class in
   includes/ui/v3/ and matched no rule here, so it painted nothing: the
   element rendered, inherited body type, and looked like a data problem
   rather than a missing style. V3ClassNamesTest now fails on a new one.
   -------------------------------------------------------------------------- */

/* A note that wants reading before the thing under it. Not an error -- the
   rust reset is for failures, and a prerequisite is not a failure. */
.a3-note--warn{border-color:rgba(183,121,31,.35); background:rgba(183,121,31,.08)}
.a3-note--warn svg{color:var(--amber)}

/* Chips carry a state on lists (Reach, Voice, The Tank, Signals history).
   Same footprint as a plain chip; only the colour says anything. */
.a3-chip--good{border-color:rgba(58,122,90,.4); background:var(--positive);
  color:var(--positive-fg)}
.a3-chip--warn{border-color:rgba(183,121,31,.4); background:rgba(183,121,31,.12);
  color:var(--amber)}
.a3-chip--good:hover{border-color:rgba(58,122,90,.6); color:var(--positive-fg)}
.a3-chip--warn:hover{border-color:rgba(183,121,31,.6); color:var(--amber)}

/* The readable half of a list row: it takes the slack so the meta, the chips
   and the actions sit right. Without it every row's title was a bare span and
   the row's own flex gave it only its text width. */
.a3-row__title{flex:1 1 auto; min-width:0; font-size:14px; font-weight:600;
  color:var(--fg); overflow:hidden; text-overflow:ellipsis}
.a3-row__pick{display:flex; align-items:center; gap:var(--s3); flex:1 1 auto;
  min-width:0; cursor:pointer}
.a3-row__pick input{flex:none; accent-color:var(--teal)}
/* A round carries two lines -- the chair's heading and what the board
   concluded -- so the pick label holds a column rather than a title.
   🚨 NOT .a3-row--stack: that name is already Company's grid for an input, a
   button and a textarea, and borrowing it would have laid that grid over
   every round row. Same trap as .a3-slot, which was the schedule row first. */
.a3-row__lines{display:flex; flex-direction:column; gap:2px; flex:1 1 auto; min-width:0}
.a3-row__lines .a3-row__title{flex:none}
.a3-row__sub{font-size:12px; line-height:1.5; color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap}
.a3-row:has(.a3-row__lines){align-items:flex-start}
.a3-row:has(.a3-row__lines) > .a3-meta,
.a3-row:has(.a3-row__lines) > .a3-chip{margin-top:2px}
/* A date is not a paragraph. Left to shrink, "14 Aug" broke after the number
   and made that one row two lines taller than the eleven around it. */
.a3-row > .a3-meta{flex:none; white-space:nowrap}

/* A briefing stored as ready HTML, when it cannot be decomposed into panels.
   The fallback, never the plan -- see ADAMIRO_V3_Signals::body(). */
.a3-report{padding:var(--s5); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-lg)}
.a3-report h2{margin:var(--s6) 0 var(--s3); font-size:19px; font-weight:600}
.a3-report h2:first-child{margin-top:0}
.a3-report h3{margin:var(--s4) 0 var(--s2); font-size:16px; font-weight:600}
.a3-report p{margin:0 0 var(--s3); font-size:14px; line-height:1.6; color:var(--fg-muted)}
.a3-report ul{margin:0 0 var(--s4); padding-left:var(--s5)}
.a3-report li{font-size:14px; line-height:1.6; color:var(--fg-muted)}

/* Stored text shown exactly as stored -- The Tank's pitch file. Wraps, because
   a horizontal scrollbar on a paragraph of markdown is a worse read than a
   soft wrap. */
.a3-pre{margin:0; font:13px/1.65 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  color:var(--fg-muted); white-space:pre-wrap; overflow-wrap:anywhere}


/* ----------------------------------------------------------------------------
   25. THE CONVERSATION SURFACES  (Mentor, The Tank)

   Appended, not inserted, and that is load-bearing. Every rule below is a
   modifier or a state on a base defined further up -- .a3-workbench--chat on
   .a3-workbench, .a3-thread--chat on .a3-thread, .a3-msg.is-archived on
   .a3-msg -- and at equal specificity the later rule wins. A modifier written
   above its base loses silently, with every gate green: that is exactly how
   the header pill stretched across the whole top bar.
   -------------------------------------------------------------------------- */

/* A chat is a column with a fixed floor: the transcript takes the slack and
   scrolls, the composer stays put. Without the height the thread grows the
   page and the input walks off the bottom of the window. */
.a3-workbench--chat{display:flex; flex-direction:column;
  height:clamp(420px, calc(100vh - var(--header-h) - 220px), 760px)}
.a3-workbench--chat .a3-workbench__body{flex:1; min-height:0; padding:0}
/* The head carries a bar, a status line and a tool cluster, and on a narrow
   canvas that is more than one row's worth. */
.a3-workbench--chat .a3-workbench__head{flex-wrap:wrap; row-gap:var(--s2)}
/* The foot is a composer, not a left/right pair, so the base rule's
   space-between has nothing to do here. */
.a3-workbench__foot--composer{display:block; padding:var(--s3) var(--s4)}
.a3-workbench__foot--composer .a3-composer{margin-top:0}

/* Full screen: the chat takes the window and the height clamp above steps
   aside, because inset:0 already decides the box. */
.a3-workbench--chat.is-focus{height:auto}
body.a3-focus-open{overflow:hidden}

/* --- The session bar ----------------------------------------------------- */
.a3-chat-bar{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}

/* The timer earns its own colour states because "how long have I got" is the
   one question this bar exists to answer. */
.a3-timer{display:inline-flex; align-items:center; gap:var(--s2);
  padding:5px var(--s3); border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-1);
  font:600 13px/1 var(--font); color:var(--fg-muted);
  font-variant-numeric:tabular-nums}
.a3-timer__dot{width:7px; height:7px; border-radius:50%; background:var(--fg-faint)}
.a3-timer__of{font-weight:500; color:var(--fg-faint)}
.a3-timer.is-running{border-color:var(--border-strong); color:var(--fg)}
.a3-timer.is-running .a3-timer__dot{background:var(--accent)}
.a3-timer.is-expired{border-color:rgba(155,59,46,.35); color:var(--rust)}
.a3-timer.is-expired .a3-timer__dot{background:var(--rust)}

/* --- The memory write-back ------------------------------------------------ */
/* Named .a3-memsave, not .a3-mem: .a3-memlist and .a3-memrow are the Memory
   module, and a class one character away from two others is how a rule ends up
   painting a surface nobody was looking at. */
.a3-memsave{display:inline-flex; align-items:center; gap:var(--s2);
  padding:5px var(--s3); border-radius:var(--r-full);
  border:1px solid var(--border); background:var(--surface-2);
  font:600 12px/1 var(--font); color:var(--fg-muted)}
.a3-memsave__spin{width:11px; height:11px; flex:none; border-radius:50%;
  border:2px solid var(--border-strong); border-top-color:var(--accent);
  animation:a3Spin .8s linear infinite}
.a3-memsave__check{display:none; color:var(--positive-fg); font-weight:700}
.a3-memsave.is-done{border-color:rgba(31,138,154,.42); color:var(--fg)}
.a3-memsave.is-done .a3-memsave__spin{display:none}
.a3-memsave.is-done .a3-memsave__check{display:inline}
.a3-memsave.is-failed{border-color:rgba(155,59,46,.30); color:var(--rust)}
.a3-memsave.is-failed .a3-memsave__spin{animation:none; border-top-color:var(--rust)}

/* --- The transcript ------------------------------------------------------- */
.a3-thread--chat{height:100%; overflow-y:auto; padding:var(--s5);
  scroll-behavior:smooth}
@media (prefers-reduced-motion:reduce){.a3-thread--chat{scroll-behavior:auto}}

.a3-chat-empty{margin:auto; padding:var(--s7) var(--s4); text-align:center;
  color:var(--fg-faint)}
.a3-chat-empty__mark{display:block; margin:0 auto var(--s3); width:120px;
  max-width:160px; height:auto; opacity:.55}
.a3-chat-empty p{margin:0; font-size:14px}

/* A turn loaded from a session the reader walked back to. Still readable,
   visibly not part of the conversation they are having now. */
.a3-msg.is-archived{opacity:.62}
.a3-msg.is-error{border:1px solid rgba(155,59,46,.4); background:rgba(155,59,46,.06);
  color:var(--rust); max-width:100%}

/* Markdown inside a bubble. Mentor answers in prose with headings and lists,
   so the bubble has to render them or the structure it wrote is lost. */
.a3-msg p{margin:0 0 var(--s3)}
.a3-msg > *:last-child{margin-bottom:0}
.a3-msg h3,.a3-msg h4,.a3-msg h5,.a3-msg h6{margin:var(--s4) 0 var(--s2);
  font-size:15px; font-weight:600; line-height:1.4; color:var(--fg)}
.a3-msg > h3:first-child,.a3-msg > h4:first-child{margin-top:0}
.a3-msg ul,.a3-msg ol{margin:0 0 var(--s3); padding-left:var(--s5)}
.a3-msg li{margin-bottom:var(--s1)}
.a3-msg code{padding:1px 5px; border-radius:var(--r-sm); background:var(--surface-2);
  font:500 13px/1.4 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace}
.a3-msg blockquote{margin:0 0 var(--s3); padding-left:var(--s4);
  border-left:2px solid var(--border-strong); color:var(--fg-muted)}
.a3-msg hr{margin:var(--s4) 0; border:0; border-top:1px solid var(--border)}
.a3-msg a{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.a3-mdpre{margin:0 0 var(--s3); padding:var(--s3); border-radius:var(--r-sm);
  background:var(--surface-2); overflow-x:auto}
.a3-mdpre code{padding:0; background:transparent}

/* What you can say back about an answer. */
.a3-msg__foot{display:flex; align-items:center; gap:var(--s1);
  margin-top:var(--s3); padding-top:var(--s2); border-top:1px solid var(--border)}
/* .a3-vote, not .a3-thumb: .a3-thumb is already the Brand tab's 40px colour
   swatch, defined next to .a3-swatch. Borrowing it would have given every
   thumbs-up that box. */
.a3-vote{width:30px; height:30px; flex:none; display:grid; place-items:center;
  padding:0; border:0; border-radius:var(--r-sm); background:transparent;
  color:var(--fg-faint); cursor:pointer; transition:all var(--t-fast)}
.a3-vote svg{width:16px; height:16px; display:block}
.a3-vote:hover{background:var(--surface-2); color:var(--fg)}
.a3-vote:disabled{opacity:.5; cursor:progress}
.a3-vote.is-on{color:var(--positive-fg); background:var(--positive)}
.a3-vote.is-down.is-on{color:var(--rust); background:rgba(155,59,46,.10)}

/* Picking WHICH voice to send on. One advisor often says the post-worthy
   thing, so the board offers a choice -- and a choice has to be readable,
   which is why these are labelled buttons and not a row of identical icons.
   Inline rather than a positioned menu: the transcript clips its overflow and
   a dropdown would be cut off at the edge of the scroller. */
.a3-sendto{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin-top:var(--s3); padding-top:var(--s3); border-top:1px dashed var(--border)}
.a3-sendto .a3-overline{margin-right:auto}
.a3-sendto__toggle{margin-left:auto; gap:var(--s2)}
.a3-sendto__toggle svg{width:14px; height:14px}

/* --- Waiting -------------------------------------------------------------- */
/* Fredrik's standing rule: pushing a button always gives feedback. A reply
   takes seconds, and seconds with nothing moving read as broken. */
.a3-thinking{display:flex; align-items:center; gap:var(--s3); max-width:100%}
.a3-typing{display:inline-flex; gap:4px; flex:none}
.a3-typing i{width:6px; height:6px; border-radius:50%; background:var(--fg-faint);
  animation:a3Typing 1.2s ease-in-out infinite}
.a3-typing i:nth-child(2){animation-delay:.18s}
.a3-typing i:nth-child(3){animation-delay:.36s}
@keyframes a3Typing{0%,60%,100%{opacity:.28; transform:translateY(0)}
  30%{opacity:1; transform:translateY(-3px)}}
.a3-thinking__say{font-size:13px; color:var(--fg-muted); transition:opacity .2s ease}
@media (prefers-reduced-motion:reduce){
  .a3-typing i{animation:none; opacity:.6}
}

/* --- Session boundaries --------------------------------------------------- */
.a3-divider{display:flex; align-items:center; justify-content:center; gap:var(--s3);
  flex-wrap:wrap; margin:var(--s4) 0; padding:var(--s3) 0;
  border-top:1px dashed var(--border); border-bottom:1px dashed var(--border)}
.a3-divider__label{font-size:12px; color:var(--fg-faint)}
.a3-divider__link{padding:0; border:0; background:none; cursor:pointer;
  font:600 12px/1 var(--font); color:var(--accent); text-decoration:underline;
  text-underline-offset:2px}
.a3-divider__link:disabled{cursor:default; color:var(--fg-faint); text-decoration:none}
.a3-divider__meta{margin:var(--s3) 0 var(--s2); font-size:12px; font-weight:600;
  letter-spacing:.04em; text-transform:uppercase; color:var(--fg-faint)}

/* --- The board's own reply (The Tank) ------------------------------------- */
/* A board answer is five people disagreeing, not one voice, so it needs the
   full column. The 76% cap that makes a two-party chat readable turns an
   advisor card into a ladder of two-word lines. */
.a3-msg--board{max-width:100%}

/* The chairperson speaks rarely -- a check-in, a recalibration, a reset. In a
   normal round the advisors speak and the chair does not, which is why this
   is styled as an aside rather than as the main voice. */
.a3-chair{margin:0 0 var(--s3); font-size:14px; line-height:1.6; color:var(--fg-muted)}
.a3-chair strong{color:var(--fg)}

.a3-advisors{display:flex; flex-direction:column; gap:var(--s3); margin-top:var(--s3)}
/* The left border and the eyebrow are painted inline from the persona's
   category colour -- eight accents, one per discipline, matching the Board
   tab. Only the colour is inline; the box is here. */
.a3-advisor{display:flex; gap:var(--s3); align-items:flex-start;
  padding:var(--s2) var(--s3); border-left:3px solid var(--accent)}
.a3-advisor__face{flex:none; width:32px; height:32px; border-radius:50%;
  overflow:hidden; border:1px solid var(--border); display:block}
.a3-advisor__face img{width:100%; height:100%; object-fit:cover; display:block}
.a3-advisor__svg,
.a3-advisor__initial{display:flex; width:100%; height:100%;
  align-items:center; justify-content:center}
/* Folded into the rule above rather than declared a second time: the
   duplicate-name gate reads a second base rule as two components sharing one
   name, which is exactly the thing that lets one silently inherit the other. */
.a3-advisor__face .a3-advisor__initial{font:600 13px/1 var(--font-mono)}
.a3-advisor__body{flex:1; min-width:0}
.a3-advisor__who{margin-bottom:var(--s1); font-size:11px; letter-spacing:.04em;
  font-family:var(--font-mono)}
.a3-advisor__body > div:last-child{font-size:14px; line-height:1.6}

/* The board directory: thirty advisors in eight disciplines, on The board
   view. The discipline's colour is data off the persona catalogue rather than
   a token, so it arrives inline on the dot; everything else here is type. */
.a3-adv-cat{display:flex; align-items:center; gap:var(--s3); margin:var(--s6) 0 var(--s4)}
.a3-adv-cat__dot{flex:none; width:10px; height:10px; border-radius:50%}
/* A row of tags under an advisor's positioning. Named for what it holds so it
   reads beside .a3-tag rather than inventing a second word for the same idea. */
.a3-chips{display:flex; flex-wrap:wrap; gap:var(--s2); margin-top:var(--s3)}
/* Background and advisory style, folded shut. A native <details>: one
   advisor's history opening is not behaviour worth a listener, and the text
   stays in the page for anyone searching or printing it. */
.a3-adv-more{margin-top:var(--s3); border-top:1px solid var(--border); padding-top:var(--s3)}
.a3-adv-more > summary{cursor:pointer; font-size:13px; font-weight:600; color:var(--accent);
  list-style:none}
.a3-adv-more > summary::-webkit-details-marker{display:none}
.a3-adv-more > summary::after{content:' ▾'}
.a3-adv-more[open] > summary::after{content:' ▴'}
.a3-adv-more p{margin-top:var(--s3); font-size:13px; line-height:1.6; color:var(--fg-muted)}
/* --- Getting more from them ------------------------------------------------
   v2's tips modal, kept as content and drawn as a list under the directory.
   Same <details> behaviour as .a3-adv-more above it, because a reader who has
   just opened four advisers' backgrounds should not meet a second disclosure
   pattern one section later. */
.a3-tips{display:flex; flex-direction:column}
.a3-tip{border-bottom:1px solid var(--border)}
.a3-tip:last-child{border-bottom:0}
.a3-tip > summary{display:flex; align-items:center; gap:var(--s3); cursor:pointer;
  padding:var(--s4) 0; list-style:none; font-size:14px; font-weight:600; color:var(--fg)}
.a3-tip > summary::-webkit-details-marker{display:none}
.a3-tip > summary::after{content:'▾'; margin-left:auto; color:var(--fg-faint)}
.a3-tip[open] > summary::after{content:'▴'}
/* The number is the only thing anchoring nine sentences to an order, which is
   what made v2's list scannable. Fixed width so the titles line up. */
.a3-tip__n{flex:none; width:22px; height:22px; display:flex; align-items:center;
  justify-content:center; border-radius:50%; background:var(--accent-quiet);
  color:var(--accent); font-family:var(--font-mono); font-size:11px; font-weight:700}
.a3-tip__title{min-width:0}
.a3-tip__body{margin:0 0 var(--s4) 34px; font-size:13px; line-height:1.65;
  color:var(--fg-muted)}

/* The card grid gives each advisor equal height; the face keeps its size when
   the name beside it wraps to two lines. */
.a3-card > .a3-card__head > .a3-advisor__face{flex:none}

/* --- Where the room landed ------------------------------------------------ */
/* Rendered ONLY when the chair put a decision on the table. An exploring round
   has no ballot, and a tally strip over a conversation about the market is
   noise dressed as a result. */
.a3-tally{margin-top:var(--s4); padding:var(--s3) var(--s4);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2)}
.a3-tally__head{margin-bottom:var(--s3); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-tally__row{display:grid; grid-template-columns:minmax(88px,1fr) 96px minmax(0,1.4fr);
  align-items:center; gap:var(--s3); padding:var(--s1) 0; font-size:13px}
.a3-tally__label{font-weight:600; color:var(--fg-muted)}
.a3-tally__bar{height:6px; border-radius:var(--r-full); background:var(--border); overflow:hidden}
.a3-tally__bar span{display:block; height:100%; background:var(--border-strong)}
.a3-tally__who{font-size:12px; color:var(--fg-faint); overflow:hidden; text-overflow:ellipsis}
/* The option that carried. Colour is the only difference, because the row that
   won is a fact about the vote and not a call to action. */
.a3-tally__row.is-carried .a3-tally__label{color:var(--fg)}
.a3-tally__row.is-carried .a3-tally__bar span{background:var(--accent)}
.a3-tally__note{margin-top:var(--s2); font-size:12px; color:var(--fg-faint)}
.a3-tally__deal{margin-top:var(--s1); font-size:12px; color:var(--rust)}

@container a3shell (max-width:700px){
  .a3-tally__row{grid-template-columns:1fr; gap:var(--s1)}
  .a3-tally__bar{width:100%}
}

/* --- The chair proposes a pitch-file change ------------------------------- */
.a3-offer{margin-top:var(--s4); padding:var(--s3) var(--s4);
  border:1px solid rgba(183,121,31,.4); border-radius:var(--r-md);
  background:rgba(183,121,31,.06)}
.a3-offer .a3-overline{color:var(--amber)}
.a3-offer p{margin:var(--s2) 0 var(--s3); font-size:14px; line-height:1.6; color:var(--fg-muted)}

/* --- The composer's own furniture ----------------------------------------- */
/* Scoped, NOT a second base rule. .a3-composer__tools already exists further
   up as flex/flex-end/gap-8 for the editor composer, and re-declaring the name
   here would have given that one whatever this one said. The duplicate-name
   gate caught it; extend under a scope instead. */
.a3-workbench--chat .a3-composer__tools{flex-wrap:wrap; gap:var(--s3);
  justify-content:flex-start}
.a3-workbench--chat .a3-composer__tools .a3-btn--primary{margin-left:auto}
.a3-kbd{display:inline-flex; align-items:center; gap:4px; font-size:11px;
  color:var(--fg-faint)}
.a3-kbd kbd{padding:2px 5px; border:1px solid var(--border); border-radius:var(--r-sm);
  background:var(--surface-1); font:600 10px/1 var(--font); color:var(--fg-muted)}

/* 🚨 What the next click costs, said before the click. The product rule is
   that nothing quietly spends a task, and this is the composer's half of it:
   the reader sees the price while typing, not in a dialog afterwards. */
.a3-cost{display:inline-flex; align-items:center; gap:var(--s2); font-size:12px;
  color:var(--fg-muted)}
.a3-cost b{padding:3px var(--s2); border-radius:var(--r-full);
  background:var(--accent-quiet); font-size:11px; font-weight:600; color:var(--fg)}

.a3-meta--tiny{font-size:11px; color:var(--fg-faint)}
.a3-meta--foot{margin-top:var(--s4)}

/* The login went while the reader was mid-conversation. Fixed to the top of
   the viewport rather than inside the shell -- at that point the shell is
   about to be replaced by the login page. */
.a3-expired{position:fixed; top:0; left:0; right:0; z-index:999999;
  padding:12px var(--s4); text-align:center; background:var(--rust); color:#fff;
  font:600 14px/1.4 var(--font)}

/* The composer's tools stack before they overflow: on a phone the AI notice,
   the shortcut, the cost and the button do not fit on one line, and a send
   button pushed off the edge is worse than a taller composer. */
@container a3shell (max-width:700px){
  .a3-workbench--chat .a3-composer__tools{align-items:flex-start}
  .a3-kbd{display:none}
  .a3-workbench--chat{height:clamp(380px, calc(100vh - var(--header-h) - 160px), 640px)}
}

/* ----------------------------------------------------------------------------
   26. THE SHARED REACH DIALOGS, WEARING v3

   ADAMIRO_Reach_Inbox prints one inline handler that every surface offering
   Send-to-Voice depends on, and v3 now prints it too. Its dialogs were written
   for a v2 page and carry only inline styles, so on a v3 screen they arrived
   two ways wrong:

     - v2's dark navy panel over a LIGHT page, and
     - buttons with NO styling at all, because .acp-btn-tint / .acp-btn-ghost
       live in acp_styles(), which is a v2 stylesheet v3 does not enqueue. They
       came out as raw browser buttons: grey, 1px padding, square corners.

   !important throughout, because the thing being overridden is an inline
   style attribute and nothing else can reach it. Scoped to .a3-body, which
   only the v3 document carries, so every v2 page keeps exactly what it had.

   The alternative -- rewriting those dialogs in v3 markup -- would fork a
   handler five surfaces share, and the fork would drift.
   -------------------------------------------------------------------------- */
.a3-body .are-overlay{background:rgba(7,4,37,.55) !important; z-index:120 !important}

.a3-body .are-dialog{
  background:var(--surface-1) !important;
  border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important;
  color:var(--fg) !important;
  box-shadow:var(--shadow-lg) !important;
  font-family:var(--font) !important;
  padding:var(--s6) !important;
}
.a3-body .are-dialog h3{color:var(--fg) !important; font-size:19px !important;
  font-weight:600 !important; margin:0 0 var(--s3) !important}
.a3-body .are-dialog p{color:var(--fg-muted) !important; font-size:14px !important;
  line-height:1.6 !important}
.a3-body .are-dialog a:not([class]){color:var(--accent) !important}

/* 🚨 EVERY <label> IN THE DIALOG, EXPLICITLY. The theme paints
   `body:not(.is-light-bg) label` rgba(241,245,249,.72) !important -- the same
   rule .a3-check already had to answer. The first version of this block set
   the dialog's spans to color:inherit, which inherited that near-white from
   the label above them: on the white panel the four platform names and the
   Title caption were invisible, and the picker read as four empty boxes with
   checkboxes in them. Caught on a screenshot, which is the only thing that
   could have caught it. */
.a3-body .are-dialog label{color:var(--fg) !important}
.a3-body .are-dialog label span{color:var(--fg-muted) !important}
.a3-body .are-dialog label strong{color:var(--fg) !important; font-weight:600 !important}

/* The row of platforms in the picker. */
.a3-body .are-pick{border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; background:var(--surface-2) !important}
.a3-body .are-pick:hover{border-color:var(--border-strong) !important}
.a3-body .are-pick input{accent-color:var(--teal) !important}
.a3-body .are-dialog input[type="text"]{
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; color:var(--fg) !important;
  padding:11px 14px !important; font:400 15px/1.5 var(--font) !important;
}
.a3-body .are-dialog input[type="text"]:focus{outline:none !important;
  border-color:var(--teal) !important; box-shadow:none !important}

/* 🚨 NO RULES FOR v2'S BUTTON CLASSES HERE, and the gate is right to insist.
   The shared handler's buttons now carry BOTH vocabularies -- acp-btn-tint
   AND a3-btn a3-btn--primary -- so each dashboard's own stylesheet paints
   them and neither writes rules for the other's names. v3 loads no acp_styles
   and v2 loads no dashboard-v3.css, so exactly one set applies on each page.
   The only thing left to undo is the inline text-decoration on the link. */
.a3-body .are-dialog a.a3-btn{text-decoration:none !important}
/* The close X, which is absolutely positioned inside the panel. */
.a3-body .are-dialog [data-action="close"][aria-label="Close"]{
  color:var(--fg-faint) !important; background:transparent !important; border:0 !important;
}

/* The publish dialog's own extras: the date and time pair, and the two
   selects (which account to publish as, and the AI-disclosure choice). They
   carry .a3-input as well as v2's .acp-input, so the shell's own field rule
   paints them -- these two lines only undo the inline dark colour-scheme and
   give the date/time pair the same box as everything else. */
.a3-body #are-post-modal input[type="date"],
.a3-body #are-post-modal input[type="time"]{
  color-scheme:light !important; width:100% !important;
  background:var(--surface-2) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-md) !important; color:var(--fg) !important;
  padding:11px 14px !important; font:400 15px/1.5 var(--font) !important;
}
[data-theme="dark"] .a3-body #are-post-modal input[type="date"],
[data-theme="dark"] .a3-body #are-post-modal input[type="time"]{color-scheme:dark !important}
.a3-body #are-post-modal label{color:var(--fg-faint) !important}

/* 🚨 THE THEME'S DATE AND TIME PICKERS, ON A LIGHT PANEL.
   theme-datepicker.js enhances every input[type=date] on the page and has no
   opt-out, so the publish dialog's date and time fields get the theme's own
   calendar -- styled in style.css for the theme's dark surfaces. Dropped onto
   v3's white dialog it painted a near-white month label, near-white day
   numbers and near-white nav arrows on white: the calendar opened and read as
   an empty box with a teal Today link in it.

   Repainted rather than suppressed, because the widget itself is good and the
   alternative is a raw browser date input that looks like neither dashboard.
   Scoped to .a3-body so the theme's own pages keep exactly what they had. */
.a3-body .adam-datepicker-panel,
.a3-body .adam-timepicker-panel{
  background:var(--surface-1) !important; border:1px solid var(--border) !important;
  border-radius:var(--r-lg) !important; box-shadow:var(--shadow-lg) !important;
  color:var(--fg) !important;
}
.a3-body .adam-datepicker-label{color:var(--fg) !important; font-weight:600 !important}
.a3-body .adam-datepicker-nav{color:var(--fg-muted) !important; background:transparent !important}
.a3-body .adam-datepicker-nav:hover{background:var(--surface-2) !important; color:var(--fg) !important}
.a3-body .adam-datepicker-weekdays{color:var(--fg-faint) !important}
.a3-body .adam-datepicker-day{color:var(--fg) !important; background:transparent !important;
  border-radius:var(--r-sm) !important}
.a3-body .adam-datepicker-day:hover{background:var(--surface-2) !important}
.a3-body .adam-datepicker-day.is-outside{color:var(--fg-faint) !important}
.a3-body .adam-datepicker-day.is-today{color:var(--accent) !important; font-weight:700 !important}
.a3-body .adam-datepicker-day.is-selected,
.a3-body .adam-datepicker-day.is-selected:hover{
  background:var(--teal) !important; color:#fff !important;
}
.a3-body .adam-datepicker-footer{border-top:1px solid var(--border) !important}
.a3-body .adam-datepicker-action{color:var(--accent) !important; background:transparent !important}
.a3-body .adam-datepicker-action:hover{background:var(--accent-quiet) !important}
.a3-body .adam-timepicker-col{border-color:var(--border) !important}
.a3-body .adam-timepicker-hours li,
.a3-body .adam-timepicker-mins li{color:var(--fg) !important}
.a3-body .adam-timepicker-hours li:hover,
.a3-body .adam-timepicker-mins li:hover{background:var(--surface-2) !important}
.a3-body .adam-timepicker-hours li.is-selected,
.a3-body .adam-timepicker-mins li.is-selected{
  background:var(--teal) !important; color:#fff !important;
}

/* The toast the same handler raises. v2 paints it near-black with white text;
   in v3 it is the shell's own notice, bottom-right like flash(). */
.a3-body .are-toasts{top:auto !important; bottom:var(--s5) !important;
  right:var(--s5) !important; z-index:130 !important}
.a3-body .are-toast{
  background:var(--surface-1) !important; color:var(--fg) !important;
  border:1px solid var(--border) !important; border-left-width:3px !important;
  border-left-color:var(--border-strong) !important;
  border-radius:var(--r-md) !important; box-shadow:var(--shadow-md) !important;
  font:500 13px/1.5 var(--font) !important; padding:12px var(--s4) !important;
}
.a3-body .are-toast.is-success{border-left-color:var(--accent) !important}
.a3-body .are-toast.is-error{border-left-color:var(--rust) !important}
.a3-body .are-toast a{color:var(--accent) !important}
.a3-body .are-toast button{color:var(--fg-faint) !important}


/* ----------------------------------------------------------------------------
   27. THE CALENDAR  (Reach)

   Seven columns, one per day, because the question the view answers is which
   days are empty -- not what the next post is, which the Queue already says
   in one line. Ported from v2's calendar tab.
   -------------------------------------------------------------------------- */
.a3-cal-wrap{display:flex; flex-direction:column; gap:var(--s4)}
.a3-cal__bar{display:flex; align-items:flex-end; justify-content:space-between;
  gap:var(--s4); flex-wrap:wrap}
.a3-cal__label{margin:0; font-size:19px; font-weight:600; color:var(--fg)}
.a3-cal__when .a3-meta{margin-top:2px}
.a3-cal__tools{display:flex; align-items:center; gap:var(--s2); flex-wrap:wrap}
.a3-cal__note{margin:0}

/* Week and Month as one control, so it reads as a choice between two rather
   than two buttons that happen to sit together. */
.a3-seg{display:inline-flex; padding:3px; border:1px solid var(--border);
  border-radius:var(--r-full); background:var(--surface-2)}
.a3-seg__btn{padding:5px 14px; border:0; border-radius:var(--r-full);
  background:transparent; color:var(--fg-muted); cursor:pointer;
  font:600 12px/1 var(--font); transition:all var(--t-fast)}
a.a3-seg__btn{text-decoration:none; display:inline-flex; align-items:center}
.a3-seg__btn[disabled]{opacity:.45; cursor:default}
.a3-seg__btn:hover{color:var(--fg)}
.a3-seg__btn.is-on{background:var(--surface-1); color:var(--fg); box-shadow:var(--shadow-sm)}
/* Six modules do not fit one line on a phone, and a segmented control that
   scrolls sideways hides the chip you were looking for. */
.a3-seg--wrap{flex-wrap:wrap; border-radius:var(--r-lg)}
.a3-seg--wrap .a3-seg__btn{border-radius:var(--r-full)}
/* How many are in there, answered before the chip is clicked. */
.a3-seg__n{margin-left:5px; opacity:.6; font-variant-numeric:tabular-nums}
/* Two filters over one list: which module, and what you said. They wrap
   independently, so a narrow screen breaks between them rather than inside
   one of them. */
.a3-segs{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap;
  margin:0 0 var(--s4)}
/* Which thumb was pressed, read by scanning the left edge rather than by
   reading each subtitle.
   🚨 .a3-said, not .a3-thumb -- and not .a3-vote either. .a3-thumb is the
   Brand tab's 40px colour swatch (line ~1448) and .a3-vote is the pressable
   thumb on a chat reply. This is neither: a static badge saying what was
   already said. Borrowing the first would have put a 40px swatch box on every
   row; borrowing the second would have made a record look clickable.
   The colours ARE .a3-vote's, deliberately: the badge should read as the same
   up and down the reader pressed in the first place. */
.a3-said{display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; flex:none; border-radius:var(--r-full)}
.a3-said.is-up{color:var(--positive-fg); background:var(--positive)}
.a3-said.is-down{color:var(--rust); background:rgba(155,59,46,.10)}
.a3-said svg{width:15px; height:15px; display:block}

/* What an audience said back, under the post it answers. Indented and quieter
   than the row above it, because the row is yours and these are not. */
.a3-listrow--stack{flex-wrap:wrap}
.a3-followup__thread{flex:1 0 100%; margin:var(--s3) 0 0; padding:0 0 0 var(--s5);
  border-left:2px solid var(--border); display:flex; flex-direction:column; gap:var(--s3)}
/* One reply. It carries no rule of its own beyond holding its two lines
   together -- but it needs one, because a class the script paints and the
   stylesheet never names is the shape ClassNamesPaintTest exists to catch,
   and it caught this. */
.a3-reply{display:flex; flex-direction:column}
.a3-reply__body{margin:0; font:400 14px/1.6 var(--font); color:var(--fg);
  white-space:pre-wrap; word-break:break-word}
.a3-reply__meta{margin:2px 0 0; font-size:12px; color:var(--fg-faint)}

.a3-cal{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); gap:var(--s2)}
.a3-cal__hdr{padding:0 var(--s2) var(--s1); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-cal__day{min-height:132px; padding:var(--s3); background:var(--surface-1);
  border:1px solid var(--border); border-radius:var(--r-md);
  display:flex; flex-direction:column; gap:var(--s2)}
.a3-cal__day h5{margin:0; font-size:12px; font-weight:600; color:var(--fg-faint)}
.a3-cal__day h5 span{color:var(--fg); font-size:14px}
/* Today is the one cell the eye should find first. */
.a3-cal__day.is-today{border-color:var(--teal); background:var(--accent-quiet)}
.a3-cal__day.is-today h5 span{color:var(--accent)}
/* A month grid runs past its own month at both ends; those cells are context,
   not days you are looking at. */
.a3-cal__day.is-other{background:transparent; border-style:dashed}
.a3-cal__day.is-other h5,
.a3-cal__day.is-other h5 span{color:var(--fg-faint)}
.a3-cal--month .a3-cal__day{min-height:104px}

.a3-cal__events{display:flex; flex-direction:column; gap:var(--s1); min-width:0}
/* The chip is the whole click target -- clicking it moves the post -- so it
   has to look like one. The x sits inside and stops the click. */
.a3-cal__event{position:relative; display:flex; flex-direction:column; gap:1px;
  padding:6px 22px 6px var(--s2); border-radius:var(--r-sm);
  background:var(--surface-2); border:1px solid var(--border);
  cursor:pointer; transition:all var(--t-fast); min-width:0}
.a3-cal__event:hover{border-color:var(--teal); background:var(--accent-quiet)}
.a3-cal__event strong{font-size:12px; font-weight:700; color:var(--accent);
  font-variant-numeric:tabular-nums}
.a3-cal__event span{font-size:12px; line-height:1.35; color:var(--fg-muted);
  overflow:hidden; text-overflow:ellipsis; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical}
.a3-cal__off{position:absolute; top:2px; right:2px; width:18px; height:18px;
  display:grid; place-items:center; padding:0; border:0; border-radius:var(--r-sm);
  background:transparent; color:var(--fg-faint); font-size:14px; line-height:1;
  cursor:pointer}
.a3-cal__off:hover{background:rgba(155,59,46,.12); color:var(--rust)}

/* Seven columns need width. Below it the week becomes a readable stack rather
   than seven slivers -- a 40px column shows a time and nothing else. */
@container a3shell (max-width:900px){
  .a3-cal{grid-template-columns:repeat(2,minmax(0,1fr))}
  .a3-cal__hdr{display:none}
  .a3-cal__day{min-height:96px}
  .a3-cal--month .a3-cal__day.is-other{display:none}
}
@container a3shell (max-width:560px){
  .a3-cal{grid-template-columns:1fr}
}


/* ----------------------------------------------------------------------------
   28. THE WRITING DESK  (Voice draft editor)

   Ported from v2's #voice-draft-editor. Two panes side by side where there is
   room, stacked with a switch where there is not -- the same arrangement, in
   v3 tokens instead of thirty inline styles.

   The BODY pane holds the shared TipTap component, which paints itself; its
   own stylesheet grew a .a3-body block so it arrives light here instead of
   slate-navy on white. Nothing below names one of its classes, because v3's
   stylesheet is not allowed to (StylesheetTest), and the child selector is
   how the host gets a height without naming it.
   -------------------------------------------------------------------------- */
/* position:relative is not decoration -- the flag button is absolute against
   this box. See the note beside .a3-flag. */
.a3-workbench--write{display:flex; flex-direction:column; position:relative}
.a3-workbench--write .a3-workbench__head{flex-wrap:wrap; row-gap:var(--s3); align-items:flex-start}
.a3-write__ident{flex:1 1 260px; min-width:0}
.a3-write__ident .a3-workbench__title{font-size:19px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.a3-write__badges{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2);
  flex-wrap:wrap}
.a3-workbench--write .a3-workbench__tools{flex-wrap:wrap; row-gap:var(--s2)}

/* --------------------------------------------------------------------------
   Voice: teaching a voice
   Wears Reach's editor head (.a3-post__ident / __badges / __body) because it
   is the same shape of screen -- one thing, open, with a save state. What is
   its own is the four dials.
   -------------------------------------------------------------------------- */
.a3-workbench--dna{display:flex; flex-direction:column}
.a3-workbench--dna .a3-workbench__head{flex-wrap:wrap; row-gap:var(--s3);
  align-items:flex-start}
/* A preset is a starting point for the dials under it, so it sits above them
   and reads as a row of choices rather than a row of actions. */
.a3-dna-presets{display:flex; flex-wrap:wrap; align-items:center; gap:var(--s2);
  margin-bottom:var(--s4)}
.a3-dna-presets .a3-meta{flex:0 0 100%}
/* Same grid as the dials -- these are the other half of one decision. */
.a3-dna-mechanics{display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fit,minmax(220px,1fr))}
.a3-dna-axes{display:grid; gap:var(--s4);
  grid-template-columns:repeat(auto-fit, minmax(260px, 1fr))}
.a3-dna-axis{display:flex; flex-direction:column; gap:6px}
/* The two ends named on either side of the track, so a slider at 70% says
   what it means without a number nobody can interpret. */
.a3-dna-axis__row{display:flex; align-items:center; gap:var(--s3)}
.a3-dna-axis__row input[type="range"]{flex:1; min-width:0; accent-color:var(--teal)}
.a3-dna-axis__row .a3-meta{flex:none; white-space:nowrap}

/* --------------------------------------------------------------------------
   The Tank: the chair's interview
   Sits under the pitch file editor on the same view. It borrows .a3-thread,
   .a3-msg, .a3-composer and .a3-typing from the chat surfaces rather than
   drawing a second conversation -- it IS a conversation, just a short one
   with an outcome. What is its own is the interrogation card: five advisors
   asking about one answer, each named.
   -------------------------------------------------------------------------- */
.a3-pitchsession{display:flex; flex-direction:column; gap:var(--s4);
  margin-top:var(--s6); padding-top:var(--s6); border-top:1px solid var(--border)}
.a3-pitchsession__head{display:flex; flex-direction:column; gap:var(--s2)}
.a3-pitchsession__start{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
.a3-pitchsession__body{display:flex; flex-direction:column; gap:var(--s3)}
.a3-pitchsession__done{display:flex; flex-direction:column; gap:var(--s3)}
/* Bounded so a long interview scrolls inside itself instead of pushing the
   proposal and its two buttons off the bottom of the page. */
.a3-thread--ps{max-height:clamp(240px, 46vh, 520px); overflow-y:auto}
.a3-ps-asks{display:flex; flex-direction:column; gap:var(--s2); margin-top:var(--s3)}
.a3-ps-ask{padding:var(--s3); border-left:2px solid var(--teal);
  background:var(--surface-2); border-radius:0 var(--r-md) var(--r-md) 0}
.a3-ps-ask__who{display:block; font-size:11px; font-weight:700; letter-spacing:.04em;
  text-transform:uppercase; color:var(--fg-faint); margin-bottom:4px}
.a3-ps-ask__what{margin:0; font-size:14px; line-height:1.55; color:var(--fg)}

/* --------------------------------------------------------------------------
   Reach: one post, open for editing
   The queue's own editor. Shaped like the Voice one because it is the same
   job -- a head that says what this is and whether it is saved, a body you
   type in -- but with one pane per PLATFORM instead of per format, because a
   post going to two places is two different texts and always was.
   Declared after .a3-workbench, .a3-seg and .a3-input for the same reason
   the pitch file's block is: a modifier above its base loses in silence.
   -------------------------------------------------------------------------- */
.a3-workbench--post{display:flex; flex-direction:column}
.a3-workbench--post .a3-workbench__head{flex-wrap:wrap; row-gap:var(--s3);
  align-items:flex-start}
.a3-post__ident{flex:1 1 260px; min-width:0}
.a3-post__ident .a3-workbench__title{font-size:19px; line-height:1.3;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden}
.a3-post__badges{display:flex; align-items:center; gap:var(--s2); margin-top:var(--s2);
  flex-wrap:wrap}
.a3-workbench--post .a3-workbench__tools{flex-wrap:wrap; row-gap:var(--s2)}
.a3-post__body{display:flex; flex-direction:column; gap:var(--s4)}
/* Campaigns opens one campaign the same way, and wears the same head. Sharing
   .a3-post__ident / __badges / __body rather than a second set under a
   campaign- prefix: it is the same component doing the same job. */
.a3-workbench--campaign{display:flex; flex-direction:column}
.a3-workbench--campaign .a3-workbench__head{flex-wrap:wrap; row-gap:var(--s3);
  align-items:flex-start}
.a3-post__seg{align-self:flex-start}
.a3-post__pane{display:flex; flex-direction:column; gap:var(--s2)}
/* 🚨 textarea.a3-post__area, NOT .a3-post__area -- the floor it has to beat
   is textarea.a3-input{min-height:88px} at (0,1,1). The pitch file shipped
   88px tall for exactly this and the browser is what found it. */
textarea.a3-post__area{
  min-height:clamp(220px, calc(100vh - var(--header-h) - 420px), 520px);
}

/* The reason a send failed, beside the text that failed to send. */
.a3-meta--warn{color:var(--amber)}

/* The hero. It lives in media_slots rather than in the body, so an editor
   that does not draw it says "no image" while publish sends one. Capped so a
   tall portrait cannot push the text off the screen. */
.a3-post__hero{margin:0; display:flex; flex-direction:column; gap:var(--s1)}
.a3-post__hero img{max-width:min(100%, 420px); height:auto; display:block;
  border:1px solid var(--border); border-radius:var(--r-sm)}

/* What the platform will actually show. The field above it is the editable
   SOURCE and holds markup; this is the adapter's own serialize_for_platform()
   output, so the two cannot drift. Collapsed by default -- the writer's job is
   the text above, and this is the answer to "but what does it look like".
   A customer read the markup in the field as the outgoing post on 2026-08-29. */
.a3-post__out{margin:0}
.a3-post__out summary{cursor:pointer}
/* A refusal folded inside a <details> nobody opened is the same as no refusal.
   The serializer's errors block a publish, so the closed summary has to carry
   that the post is over its cap -- the count alone reads as information. */
.a3-post__out.is-over summary{color:var(--amber); font-weight:600}
.a3-post__out-text{margin:var(--s2) 0 0; padding:var(--s3);
  background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); font-family:inherit; font-size:14px;
  line-height:1.55; color:var(--fg); white-space:pre-wrap; overflow-wrap:anywhere}

/* Technical-track findings. Advisory, never a gate -- so it reads as a list
   to look over, not as an error. */
.a3-post__findings{margin:var(--s2) 0 0; padding-left:var(--s4); display:flex;
  flex-direction:column; gap:var(--s1); font-size:13px; color:var(--fg-muted)}

/* The team thread. Its own band under the panes, because it is about the post
   rather than about one platform's text. */
.a3-post__talk{display:flex; flex-direction:column; gap:var(--s3);
  padding-top:var(--s4); border-top:1px solid var(--border)}
.a3-post__thread{display:flex; flex-direction:column; gap:var(--s2)}
.a3-post__note{background:var(--surface-2); border:1px solid var(--border);
  border-radius:var(--r-sm); padding:var(--s3)}
.a3-post__note-head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s2); margin-bottom:var(--s1)}
.a3-post__note-who{font-weight:600; font-size:13px; color:var(--fg)}
.a3-post__note-body{margin:0; font-size:14px; line-height:1.55; color:var(--fg-muted);
  white-space:pre-wrap; word-break:break-word}

/* --------------------------------------------------------------------------
   The Tank: the pitch file editor
   One markdown document per account, so there is no ident block, no format
   row and no preview pane -- only the head, the field and what version it is
   on. Declared AFTER .a3-workbench so the modifier is not the rule that
   loses; equal specificity means source order decides, and that has gone
   wrong in this file before.
   -------------------------------------------------------------------------- */
.a3-workbench--pitch{display:flex; flex-direction:column}
/* The field is the view. It grows with the window rather than sitting at
   .a3-input's 88px floor with a 16 KB document scrolling inside it.
   🚨 textarea.a3-pitch__area, NOT .a3-pitch__area. The floor it has to beat
   is `textarea.a3-input{min-height:88px}` at (0,1,1); a bare class is (0,1,0)
   and loses to it. The first version of this rule did exactly that and the
   editor shipped 88px tall with the pitch scrolling inside three visible
   lines -- measured in the browser, invisible to every gate. Equal
   specificity now, so source order decides, and this block is below it.
   No font of its own: a pitch file is prose, and .a3-input already forces
   the body face at !important to outrank the theme. */
textarea.a3-pitch__area{
  min-height:clamp(280px, calc(100vh - var(--header-h) - 320px), 620px);
}

/* The save state says what is TRUE, not what was pressed. Three words, one
   per state, and the colour is the quieter half of the signal.
   data-a3-write-state is the component's state channel, not a Voice-only
   attribute: The Tank's pitch file editor uses the same pill and the same
   four values. A second spelling for the same three colours would be a
   second component. */
.a3-savestate{font-size:12px; font-weight:600; color:var(--fg-faint);
  font-variant-numeric:tabular-nums; white-space:nowrap}
.a3-savestate[data-a3-write-state="dirty"]{color:var(--amber)}
.a3-savestate[data-a3-write-state="saving"]{color:var(--fg-muted)}
.a3-savestate[data-a3-write-state="failed"]{color:var(--rust)}

.a3-write__body{display:flex; flex-direction:column; gap:var(--s4)}
.a3-write__title{font-size:20px; font-weight:700; line-height:1.3; padding:13px 16px}

/* .a3-note is a flex row already; these two are the variants the editor
   needs -- a hint it can dismiss, and a gate it has to act on. */
.a3-note--hint{align-items:flex-start; border-color:rgba(31,138,154,.35);
  background:var(--accent-quiet)}
.a3-note--review{align-items:center; flex-wrap:wrap; row-gap:var(--s2);
  border-color:rgba(183,121,31,.4); background:rgba(183,121,31,.08)}
.a3-note__body{display:flex; align-items:flex-start; gap:var(--s3); flex:1 1 320px;
  min-width:0; font-size:13px; line-height:1.55; color:var(--fg-muted)}
.a3-note__tag{flex:none; font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.1em; text-transform:uppercase; color:var(--accent); padding-top:2px}
.a3-note--review .a3-note__tag{color:var(--amber)}
/* Billing banners (account state, printed by the shell above every view).
   Two additions to the note vocabulary rather than a parallel primitive: a
   danger variant for the two hard-stop lifecycle states, and two urgency
   steps on the trial note -- three days or fewer, then nothing left. Both sit
   AFTER .a3-note--review deliberately: same specificity, so source order is
   what decides, and a modifier written above its base loses silently. */
.a3-note--danger{border-color:rgba(155,59,46,.4); background:rgba(155,59,46,.08)}
.a3-note--danger .a3-note__tag{color:var(--rust)}
.a3-note--review.is-low{border-color:rgba(183,121,31,.65); background:rgba(183,121,31,.14)}
.a3-note--review.is-empty{border-color:rgba(155,59,46,.55); background:rgba(155,59,46,.12)}
.a3-note--review.is-empty .a3-note__tag{color:var(--rust)}
/* The stacked variant: a label line and a version line, not one run-on
   string. flex-none on the base keeps the column from stretching, so the
   two lines sit against the note's left edge and the body text beside them. */
.a3-note__tag--stacked{display:flex; flex-direction:column; gap:3px; padding-top:1px}
.a3-note__tag-sub{color:var(--fg-faint); font-weight:600}
.a3-note__tools{display:flex; align-items:center; gap:var(--s2); margin-left:auto}

/* Subheading and tags. A tinted block rather than two loose fields, because
   they are one idea: how the piece looks where it lands. */
.a3-write__meta{display:flex; flex-direction:column; gap:var(--s3);
  padding:var(--s4); border:1px solid var(--border); border-radius:var(--r-md);
  background:var(--surface-2)}
.a3-write__meta-head{display:flex; align-items:center; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap}
.a3-write__meta .a3-field{margin:0}

/* Edit / Preview. Hidden wherever both panes fit, revealed by the stacking
   query below -- the CSS decides, not the script. */
.a3-write__seg{display:none; align-self:flex-start}

.a3-write__split{display:grid; grid-template-columns:1fr 1fr; gap:var(--s5); min-width:0}
.a3-write__pane{display:flex; flex-direction:column; gap:var(--s2); min-width:0}
.a3-write__pane > .a3-field__label{color:var(--fg-faint); font-size:11px;
  letter-spacing:.08em; text-transform:uppercase}
/* The child selector gives the shared editor's host a height without this
   stylesheet naming one of its classes. */
.a3-write__pane--edit > div:last-child{flex:1; min-height:460px; display:flex;
  flex-direction:column}
.a3-write__pane--edit > div:last-child > *{flex:1; min-height:0}

/* --surface-2, not --surface-1: the workbench card is already --surface-1,
   so a preview painted the same colour is a white rectangle on a white
   rectangle with only a hairline between them. The tint is what makes it
   read as a separate pane beside the editor, which sits on plain white. */
.a3-write__preview{flex:1; min-height:460px; overflow-y:auto; padding:20px 24px;
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2);
  color:var(--fg); font-size:15px; line-height:1.65}
.a3-write__preview > div > *:first-child{margin-top:0}
.a3-write__pv-title{margin:0 0 .6em; padding-bottom:.35em; font-size:1.9em;
  font-weight:800; line-height:1.2; border-bottom:2px solid var(--teal); color:var(--fg)}
.a3-write__preview h1,
.a3-write__preview h2,
.a3-write__preview h3,
.a3-write__preview h4{margin:1.4em 0 .55em; font-weight:700; line-height:1.25; color:var(--fg)}
.a3-write__preview h1{font-size:1.7em}
.a3-write__preview h2{font-size:1.3em}
.a3-write__preview h3{font-size:1.1em}
.a3-write__preview p{margin:0 0 1em}
.a3-write__preview a{color:var(--accent); text-decoration:underline}
.a3-write__preview ul,
.a3-write__preview ol{margin:0 0 1em 1.4em; padding:0}
.a3-write__preview li{margin:.25em 0}
.a3-write__preview blockquote{margin:1em 0; padding:.6em 1em; border-radius:0 var(--r-sm) var(--r-sm) 0;
  border-left:3px solid var(--teal); background:var(--surface-2); color:var(--fg-muted)}
.a3-write__preview code{padding:1px 5px; border-radius:3px; background:var(--surface-2);
  font-family:var(--font-mono); font-size:.9em}
.a3-write__preview pre{margin:0 0 1em; padding:14px; border-radius:var(--r-sm);
  overflow-x:auto; background:var(--navy); color:var(--off-white);
  font-family:var(--font-mono); font-size:12.5px}
.a3-write__preview pre code{padding:0; background:transparent; color:inherit}
.a3-write__preview img{max-width:100%; height:auto; border-radius:var(--r-sm); display:block;
  margin:.6em 0}
.a3-write__preview hr{border:0; border-top:1px solid var(--border); margin:1.5em 0}

/* Flag this phrase. Absolute against the workbench, never fixed: .a3-frame
   carries container-type:inline-size, which makes it the containing block for
   anything fixed inside it, and the button would sit relative to the frame
   rather than to the viewport it was measured against. */
.a3-flag{position:absolute; z-index:20; padding:6px 12px; border:0;
  border-radius:var(--r-sm); background:var(--amber); color:#fff;
  font:600 12px/1 var(--font); cursor:pointer; box-shadow:var(--shadow-md);
  white-space:nowrap}
.a3-flag:hover{filter:brightness(1.08)}

/* The choose-one dialog, shared: rewrite as, hand over to, flag because. */
/* The optional second question in a picker. .a3-field is a column and would
   stretch a segmented control to the panel's full width, where it reads as a
   text input rather than a choice of two. */
.a3-confirm__panel .a3-seg{align-self:flex-start}
.a3-confirm__panel .a3-field{gap:6px; margin:0 0 var(--s4)}

/* Which company Pages this account may publish to. A checkbox and its wording
   as one target, sitting in a connection row beside the platform chips. */
.a3-conn__use{display:inline-flex; align-items:center; gap:var(--s2); flex:none;
  cursor:pointer; font-size:13px; color:var(--fg-muted); white-space:nowrap}
.a3-conn__use input{width:17px; height:17px; margin:0; flex:none; cursor:pointer;
  accent-color:var(--teal)}
.a3-conn__use:hover{color:var(--fg)}
/* Where a company post goes when it names no Page. Sits under the switches
   because the two are one question asked twice. */
.a3-conn__default{max-width:420px; margin:var(--s5) 0 0; gap:6px}
.a3-conn__default .a3-meta{margin:0}

/* The sentence under the list explaining what the switches decide. */
.a3-conn__note{margin:var(--s4) 0 0; max-width:70ch; line-height:1.6}
.a3-conn__note strong{color:var(--fg); font-weight:600}

.a3-picklist{display:flex; flex-direction:column; gap:var(--s2); margin:0 0 var(--s4);
  max-height:280px; overflow-y:auto}
.a3-pick{margin:0; padding:10px 12px; border:1px solid var(--border);
  border-radius:var(--r-sm); background:var(--surface-1); cursor:pointer;
  transition:border-color var(--t-fast), background var(--t-fast)}
.a3-pick:hover{border-color:var(--teal); background:var(--accent-quiet)}
.a3-pick span{display:flex; flex-direction:column; gap:2px; min-width:0}
.a3-pick b{font-size:14px; font-weight:600; color:var(--fg)}
.a3-pick i{font-style:normal; font-size:12px; color:var(--fg-faint)}
.a3-pick:has(input:checked){border-color:var(--teal); background:var(--accent-quiet)}
.a3-picklist__group{margin:var(--s2) 0 0; font-size:11px; font-weight:700;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-picklist__group:first-child{margin-top:0}

/* Two panes need width. Below it they stack and the switch appears, because a
   440px preview beside a 440px editor is two columns of broken words. */
@container a3shell (max-width:1080px){
  .a3-write__split{grid-template-columns:1fr}
  .a3-write__seg{display:inline-flex}
  .a3-write__split .a3-write__pane--preview{display:none}
  .a3-write__split.is-preview .a3-write__pane--edit{display:none}
  .a3-write__split.is-preview .a3-write__pane--preview{display:flex}
}
@container a3shell (max-width:640px){
  .a3-write__pane--edit > div:last-child{min-height:320px}
  .a3-write__preview{min-height:320px}
  .a3-write__title{font-size:17px}
}


/* ----------------------------------------------------------------------------
   29. THE ACCOUNT  (team, plan and billing, connections)

   Three views that all answer "what is true of this account, and what may I
   change about it". Everything destructive or chargeable sits under a
   confirmation, so nothing here needs to look dangerous on its own -- the
   sentence does that work, not the colour.
   -------------------------------------------------------------------------- */
.a3-team,
.a3-plan,
.a3-conn{display:flex; flex-direction:column; gap:var(--s5)}

.a3-subhead{margin:0; font-size:11px; font-weight:700; letter-spacing:.08em;
  text-transform:uppercase; color:var(--fg-faint)}
/* The row a form ends on: what to press, and what happened. Beside each other
   rather than stacked, so the answer appears where the reader is already
   looking instead of below the fold on a short screen. */
.a3-field-actions{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}

/* The shared pool. .a3-tasks is the rail's own card and already paints; this
   only sets the rhythm inside it, because the sentence under the number is a
   .a3-meta and the card was built for a bare figure.

   🚨 The number in the rail is the OWNER'S balance, which on a Business
   account IS the pool -- so the owner watches it fall when a colleague spends
   and nothing said why. pool.available/pool.used have been on /team/overview
   since it was written and v3 rendered neither. */
.a3-team__pool{display:flex; flex-direction:column; gap:var(--s1)}
.a3-team__pool .a3-meta{margin:0}

/* Who changed whose allowance. A rule above it rather than a card around it:
   this sits under the member list and is about that list, so a second panel
   border would read as a separate screen.

   🚨 Its own top margin, not a gap on .a3-team -- the section is hidden on
   every account where nothing has been changed, and a flex gap would leave the
   space behind it. */
.a3-team__audit{margin-top:var(--s6); padding-top:var(--s5);
  border-top:1px solid var(--border)}
.a3-team__audit .a3-section-title{margin:0 0 var(--s1)}
.a3-team__audit > .a3-meta{margin:0 0 var(--s4)}

/* 🚨 .a3-check ships with margin:0 0 var(--s5) for a form; inside a row that
   is a five-step gap under one person's name. Scoped reset, the way
   .a3-memlist already does it -- not a second checkbox primitive. */
.a3-row .a3-check{margin:0; flex:none; align-items:center}

/* Seats first: it is the constraint every other control runs into. */
.a3-seats{display:flex; flex-direction:column; gap:var(--s3); padding:var(--s4);
  border:1px solid var(--border); border-radius:var(--r-md); background:var(--surface-2)}
.a3-seats__head{display:flex; align-items:baseline; justify-content:space-between;
  gap:var(--s3); flex-wrap:wrap}
.a3-seats__set{display:flex; align-items:center; gap:var(--s3); flex-wrap:wrap}
/* Was .a3-field, which this row stopped containing when the seat box was
   fixed: .a3-field is the STACKED field and its flex-direction:column was
   turning the 240px width basis below into a 240px HEIGHT. The row holds a
   bare .a3-field__inline now, and this override has to name what is there. */
.a3-seats__set .a3-field__inline{margin:0}
/* max-width alone clamped the input to 110px while its inherited
   flex:1 1 240px still asked the label around it for 240, so the label wrapped
   above its own input for want of space it was never going to use. */
.a3-seats__set .a3-input{max-width:110px; flex:0 0 110px}

/* A person is a row with more on it than a list item: a name, what they are,
   their address and what they have left. */
/* Name, then what they are, then the quiet facts, then the buttons hard right.
   Left to a plain flex row the chip floated into the middle of the line on the
   owner's row -- which has fewer cells than the others -- so the same column
   held a different thing on each row. */
.a3-row--person{flex-wrap:wrap; row-gap:var(--s2); align-items:center}
.a3-row--person .a3-row__title{flex:0 1 auto; min-width:0; font-weight:600}
.a3-row--person .a3-meta{flex:none; color:var(--fg-faint)}
.a3-row--person .a3-actions{margin-left:auto; flex:none}

.a3-plancard{display:flex; flex-direction:column; gap:var(--s4); padding:var(--s5);
  border:1px solid var(--border); border-radius:var(--r-lg); background:var(--surface-1);
  box-shadow:var(--shadow-sm)}
.a3-plancard__head{display:flex; flex-direction:column; gap:var(--s1)}
.a3-plancard__tag{font-family:var(--font-mono); font-size:10px; font-weight:700;
  letter-spacing:.1em; color:var(--accent)}
.a3-plancard__name{margin:0; font-size:24px; font-weight:700; color:var(--fg)}
.a3-plancard__price{margin:0; font-size:19px; font-weight:600; color:var(--fg)}
.a3-plancard__price span{font-size:14px; font-weight:400; color:var(--fg-muted)}
.a3-plancard__facts{margin:0}
.a3-plancard__acts{display:flex; gap:var(--s3); flex-wrap:wrap}

.a3-actions--wrap{display:flex; gap:var(--s3); flex-wrap:wrap}

/* A wide table stays inside its own scroller rather than pushing the page
   sideways. Below the table breakpoint the rows become cards and this box
   stops scrolling anything. */
.a3-scroll{overflow-x:auto; -webkit-overflow-scrolling:touch}
.a3-table tr.is-credit td{color:var(--fg-muted)}
.a3-link{color:var(--accent); text-decoration:underline; text-underline-offset:2px}
.a3-link:hover{color:var(--teal-deep)}

/* Several fields in one dialog.

   🚨 THE CAP IS THE VIEWPORT, NOT A NUMBER SOMEBODY PICKED. Fredrik,
   2026-08-27, on What they may spend: "Shouldn't have a scrollbar. Should fit
   all fields in one view." It had THREE fields -- 402px of content inside a
   340px window, in a 901px viewport with three hundred pixels going spare.
   A fixed max-height cannot know how much room it has, so it was scrolling a
   list that fitted twice over.
   The overflow stays for the case it was meant for: a plan with a long cap
   list on a short screen. It just no longer fires when there is room. */
.a3-fieldset{display:flex; flex-direction:column; gap:var(--s3); margin:0 0 var(--s4);
  max-height:calc(100vh - 300px); overflow-y:auto}
.a3-fieldset .a3-field{margin:0}

/* --------------------------------------------------------------------------
   Two-step sign-in, wearing v3
   -------------------------------------------------------------------------- */
/* 🚨 THIS SKINS A COMPONENT v3 DOES NOT OWN, ON PURPOSE.
   ADAMIRO_TwoFactor_Dashboard is a shortcode with its own REST routes, its own
   script and its own inline stylesheet. v3 prints the same shortcode rather
   than growing a second enrolment funnel -- recovery codes and TOTP secrets
   are the last thing in this product to want two implementations of.

   Its stylesheet was written for v2's dark surfaces: near-white text on a
   near-black card. v3 is light. Dropped in unskinned that is white on white,
   which is not "a bit off" -- it is an unreadable enrolment screen on an
   account that cannot sign in without finishing it.

   Every selector below out-specifies its inline counterpart rather than
   shouting !important at it. The inline sheet prints in wp_footer, AFTER this
   file, so ORDER cannot be relied on and specificity has to do the work:
   `#adm-sec .adm-sec-card` is (1,1,0), so `.a3-shell #adm-sec .adm-sec-card`
   is (1,2,0) and wins; `.adm-sec-btn` is (0,1,0), so `.a3-shell .adm-sec-btn`
   is (0,2,0) and wins. Nothing here is a copy of the layout -- padding, radius
   and flow all stay theirs. Only colour changes.

   When the v2 account block goes, this block does NOT go with it. The
   shortcode is what survives; the block was only ever the thing that printed
   it. */
/* 🚨 scroll-margin-top, or the fragment lands the heading UNDER the chrome.
   Measured: without it the section head sits at y=32 with a sticky header
   ending at y=64 and the admin bar over that -- elementFromPoint returns
   .ab-item, not the heading. The reader is looking at the right screen and
   cannot see the thing they were sent to. --a3-top is the shell's measured
   offset (admin bar included), --header-h is the sticky header. */
.a3-2fa{margin-top:var(--s6);
  scroll-margin-top:calc(var(--a3-top, 0px) + var(--header-h, 64px) + var(--s5))}
.a3-shell .adm-sec{color:var(--fg); font-family:inherit}
/* 🚨 The component's own head is hidden, and this is the only thing here that
   removes anything. It is a heading and one sentence, and v3 prints both
   itself, in v3's words, above the shortcode -- see ADAMIRO_V3_Account::you().
   Two headings saying "Two-Factor Authentication" and "Two-step sign-in" over
   one control is worse than either. display:none rather than a clip, so it
   leaves the accessibility tree too and a screen reader is not read the
   heading twice. Nothing below the head is touched. */
.a3-shell .adm-sec-head{display:none}
.a3-shell .adm-sec-loading{color:var(--fg-faint)}

.a3-shell #adm-sec .adm-sec-card{background:var(--surface-1); border-color:var(--border);
  border-radius:var(--r-md)}
.a3-shell #adm-sec .adm-sec-card-head h3{color:var(--fg)}
.a3-shell #adm-sec .adm-sec-card-desc{color:var(--fg-muted)}

.a3-shell .adm-sec-pill{font-family:inherit}
.a3-shell .adm-sec-pill-on{background:var(--positive); color:var(--positive-fg);
  border-color:var(--positive-fg)}
.a3-shell .adm-sec-pill-off{background:var(--surface-2); color:var(--fg-faint);
  border-color:var(--border)}
.a3-shell .adm-sec-pill-warn{background:var(--surface-2); color:var(--amber);
  border-color:var(--amber)}

.a3-shell .adm-sec-btn{border-radius:var(--r-sm); font-family:inherit}
.a3-shell .adm-sec-btn-primary{background:var(--accent); border-color:var(--accent);
  color:#FFFFFF}
.a3-shell .adm-sec-btn-primary:hover{background:var(--teal-deep); border-color:var(--teal-deep)}
.a3-shell .adm-sec-btn-ghost{background:var(--surface-1); border-color:var(--border-strong);
  color:var(--fg)}
.a3-shell .adm-sec-btn-ghost:hover{background:var(--surface-2); border-color:var(--fg-faint)}
.a3-shell .adm-sec-btn-danger{background:var(--surface-1); border-color:var(--rust);
  color:var(--rust)}
.a3-shell .adm-sec-btn-danger:hover{background:var(--rust); color:#FFFFFF}

.a3-shell .adm-sec-error{background:var(--surface-2); border-color:var(--rust);
  border-left-color:var(--rust); color:var(--rust)}
.a3-shell .adm-sec-success{background:var(--positive); border-color:var(--positive-fg);
  border-left-color:var(--positive-fg); color:var(--positive-fg)}

.a3-shell .adm-sec-trust-item{border-bottom-color:var(--border)}
.a3-shell .adm-sec-trust-meta{color:var(--fg-muted); font-family:inherit}

/* The modals. The overlay stays dark in both themes -- that is what an
   overlay is for -- but the box is a v3 card. */
.a3-shell .adm-sec-modal-overlay{background:rgba(7,4,37,.55)}
.a3-shell .adm-sec-modal-box{background:var(--surface-1); border-color:var(--border);
  border-radius:var(--r-md); box-shadow:var(--shadow-lg)}
.a3-shell .adm-sec-modal-head{border-bottom-color:var(--border)}
.a3-shell .adm-sec-modal-head h2{color:var(--fg)}
.a3-shell .adm-sec-close{color:var(--fg-faint)}
.a3-shell .adm-sec-close:hover{color:var(--fg)}
.a3-shell .adm-sec-modal-body p{color:var(--fg-muted)}

/* The code field. Letter-spacing, centring and the monospace face are theirs
   and stay -- a six-digit box reads better spaced out. Only the colours move.
   
   🚨 !important, AND the .a3-body prefix, because this is the one control on
   the screen the THEME also claims: style.css carries
   `body:not(.is-light-bg) input[type="text"] { background:… !important }` at
   (0,2,1) with a bang. Out-specifying the component's own sheet is not enough
   -- (0,2,0) loses to a bang no matter how specific it is. Measured in the
   browser, where the enrolment modal's code box was still painting near-white
   on slate while every other selector in this block had already landed. This
   is the same answer .a3-input gives on line 1431 and for the same reason. */
.a3-body .a3-shell .adm-sec-input{
  background:var(--surface-1) !important;
  border:1px solid var(--border-strong) !important;
  color:var(--fg) !important;
  border-radius:var(--r-sm) !important;
  /* The theme claims `font` here too, and a TOTP code is six digits typed
     against a 30-second clock. Monospace at 18px is the difference between
     reading it back and re-reading it, which is why the component asked for
     it in the first place. */
  font:400 18px/1.4 var(--font-mono) !important;
}
.a3-body .a3-shell .adm-sec-input:focus{border-color:var(--accent) !important;
  box-shadow:0 0 0 3px var(--accent-quiet) !important}
.a3-body .a3-shell .adm-sec-input::placeholder{color:var(--fg-faint) !important}

.a3-shell .adm-sec-secret{background:var(--surface-2); color:var(--fg);
  border-radius:var(--r-sm)}
/* 🚨 The QR stays on white and that is not an oversight -- a scanner needs
   the quiet zone and the contrast, so the one thing here that must NOT take
   a theme colour is the code itself. */
.a3-shell .adm-sec-codes{background:var(--surface-2); border-color:var(--border);
  border-radius:var(--r-sm)}
.a3-shell .adm-sec-codes-grid code{color:var(--fg); font-family:inherit}


/* ----------------------------------------------------------------------------
   AI VISIBILITY

   Four additions, and each one is a modifier or a state on a component that
   already exists rather than a second family under a new prefix. The one
   genuinely new primitive is the quote: nothing else in this stylesheet shows
   a sentence somebody else wrote about the customer, and .a3-msg blockquote
   belongs to a chat thread it would drag its whole context along with.
   -------------------------------------------------------------------------- */

/* What an engine said about you, in its own words.

   The rule reads a machine's sentence about a real company back to that
   company, so it is set as a quotation and not as body copy: the accent edge
   says this text is not ours, and the italic says it is being reported rather
   than asserted. */
.a3-quotes{display:flex; flex-direction:column; gap:var(--s4)}
.a3-quote{margin:0; padding:var(--s4) var(--s5); border-left:3px solid var(--accent);
  border-radius:0 var(--r-md) var(--r-md) 0; background:var(--surface-2)}
.a3-quote__who{margin-bottom:var(--s2); font-size:11px; font-weight:600;
  letter-spacing:.08em; text-transform:uppercase; color:var(--fg-faint)}
.a3-quote__text{margin:0; font-size:14px; line-height:1.6; font-style:italic;
  color:var(--fg-muted)}

/* A bar with a target on it.

   The stage bars carry a reading beside the number -- "0% - Not yet visible"
   -- which does not fit the 54px numeric column the base row gives its
   percentage, so the modifier lets that column size itself. */
.a3-bar-row--stage{grid-template-columns:150px 1fr auto}
.a3-bar--target{position:relative}
/* Where a company like this one usually sits. It is a reference line, so it
   is drawn quietly and never in the fill colour -- a marker the same colour
   as the bar reads as part of the measurement. */
.a3-bar__mark{position:absolute; top:-3px; bottom:-3px; width:2px;
  background:var(--fg-faint); opacity:.7; border-radius:1px; pointer-events:none}
.a3-bar.is-critical span{background:var(--rust)}

/* No change is a real answer and needs its own colour. Without this it
   inherits the positive green, so a run that moved nothing reads as a run
   that went well. */
.a3-delta.is-flat{color:var(--fg-faint); font-weight:500}

/* A question that is no longer being asked, or a competitor no longer being
   tracked. Still listed -- it is a setting you can switch back -- but it is
   not part of the reading, so it stops competing with the rows that are. */
.a3-row.is-off .a3-row__title{color:var(--fg-faint)}

@container a3shell (max-width:639px){
  /* The reading moves under the bar rather than fighting it for width. */
  .a3-bar-row--stage{grid-template-columns:1fr; row-gap:var(--s2)}
  .a3-bar-row--stage .a3-bar-row__pct{text-align:left}
}