/**
 * CubeWP Agency — the redesign layer.
 *
 * The client dashboard's redesign (CTO-approved 2026-10-26), carried into the
 * agency console. The shell is already the dashboard's (.dash-shell,
 * .dash-sidebar, .cw-header), so dashboard/assets/css/redesign.css restyles it
 * as-is; this file maps the AGENCY'S OWN vocabulary — the .ax-* and .ag-*
 * components views.js emits — onto the design's components:
 *
 *   .ax-head        → the page head (.ph)       24px/700, sub in ink-3
 *   .ax-tiles       → the figures (.metrics)    a quiet card each, as Billing
 *   .ax-card        → the card (.card)          12px radius, one border
 *   .ax-t           → the table (.tbl)          quiet sentence-case headings
 *   .ax-st          → the status badge (.badge) tinted, never colour alone
 *   .ax-pill/.ax-seg→ the index tabs / segmented control
 *   .ax-alert       → the notice (.banner)      white, a tinted edge and icon
 *   .ax-empty       → the empty state (.empty)
 *
 * EVERYTHING IS UNDER .cwv2-shell, which redesign.js puts on <body> only while
 * the workspace is on screen. The marketing page and the sign-in gate share
 * this document and must never pick any of it up.
 *
 * Markup is NOT changed. Every handler keys on data-* attributes and ids that
 * this file never touches; it restyles classes in place, exactly as the
 * dashboard's own skin does for its static-markup flows.
 */

/* ── The frame ────────────────────────────────────────────────────────────── */

/* The drawer, the phone-width bar, the one-line breadcrumb and the menu button
   are shared with /client: dashboard/assets/css/portal-v2.css. What follows is
   the agency's own. */

/* The design's 1180px column. dashboard.css caps .dash-tab-panel at 960px and
   app.css never lifted it; an id outranks that class rule, so this wins
   without !important. */
.cwv2-shell #ag-view{ max-width:1180px;margin:0 auto; }

/* The view's own action in the bar, when a view puts one there. */
.cwv2-shell #ag-topbar-right{ display:inline-flex;align-items:center;gap:8px; }
.cwv2-shell #ag-topbar-right:empty{ display:none; }
@media (max-width:768px){
  /* It stays on a phone — Billing's portal link, Code's upload — but at the
     size of the bar, not of a page button. */
  .cwv2-shell #ag-topbar-right .cw-btn{ height:32px;min-height:32px;padding:0 10px;font-size:12.5px;border-radius:8px; }
}

/* The sidebar's footer: the way across to the customer dashboard, as the
   design's outlined button. */
.cwv2-shell .ag-app .dash-sidebar-footer .btn-sm{
  display:flex;align-items:center;justify-content:center;gap:6px;
  height:34px;padding:0 12px;border-radius:9px;
  border:1px solid var(--border-2);background-color:var(--surface);color:var(--ink);
  font-size:13.5px;font-weight:600;text-decoration:none;
}
.cwv2-shell .ag-app .dash-sidebar-footer .btn-sm:hover{ background-color:var(--hover); }

/* The lifecycle banner at the top of every view. */
.cwv2-shell .ag-banner{
  display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap;
  max-width:1180px;margin:20px auto 0;padding:14px 16px;border-radius:12px;
  background-color:var(--surface);border:1px solid var(--border);color:var(--ink-2);
  font-size:13.5px;line-height:1.5;
}
.cwv2-shell .ag-banner strong{ color:var(--ink);font-weight:650; }
.cwv2-shell .ag-banner-warn{ border-color:var(--warn-line);background-color:var(--warn-bg); }
.cwv2-shell .ag-banner-bad{ border-color:var(--bad-line);background-color:var(--bad-bg); }
@media (min-width:769px){
  .cwv2-shell .ag-banner{ margin:20px 40px 0; }
}

/* ── One typeface ─────────────────────────────────────────────────────────── */

/* The design has ONE face, set in --cw-font. app.css put Bricolage Grotesque
   on every heading and big number, which is most of why the agency read as a
   different product from the dashboard beside it. */
.cwv2-shell .ax-head-t,.cwv2-shell .ax-head-sm .ax-head-t,.cwv2-shell .ag-hero-title,
.cwv2-shell .ax-tile-v,.cwv2-shell .ax-cap-n,.cwv2-shell .ax-capbar-n,
.cwv2-shell .ax-tpl-blank,.cwv2-shell .ag-offer-card h3,.cwv2-shell .ag-offer-price strong,
.cwv2-shell .ag-tpl-thumb span{
  font-family:var(--cw-font);
}

/* ── Page head ────────────────────────────────────────────────────────────── */

.cwv2-shell .ax-head,.cwv2-shell .ag-hero{ margin-bottom:24px;gap:14px; }
.cwv2-shell .ax-head-t,.cwv2-shell .ag-hero-title{
  font-size:24px;font-weight:700;line-height:32px;letter-spacing:-.02em;color:var(--ink);
}
/* Every screen's head is the design's 24px. views.js marks them all
   .ax-head-sm, which app.css shrank to the title size — so the screens sat a
   step below the dashboard's, page after page. */
.cwv2-shell .ax-head-sm .ax-head-t{ font-size:24px;line-height:32px;font-weight:700; }
.cwv2-shell .ax-head-s,.cwv2-shell .ag-hero-sub{
  font-size:14px;line-height:1.5;color:var(--ink-3);margin-top:3px;
}
.cwv2-shell .ax-head-a,.cwv2-shell .ag-hero-actions{ gap:8px;align-items:center; }
@media (max-width:860px){
  .cwv2-shell .ax-head-t{ font-size:22px;line-height:30px; }
}

/* ── Sections ─────────────────────────────────────────────────────────────── */

.cwv2-shell .ax-sec{ margin-bottom:28px; }
.cwv2-shell .ax-sec-h{ margin-bottom:14px;gap:10px; }
.cwv2-shell .ax-sec-t,.cwv2-shell .ag-section-title{
  font-size:16px;font-weight:650;line-height:1.3;letter-spacing:-.01em;color:var(--ink);
}
/* The count beside a heading is a quiet number, as in the design's index
   tabs — not a bordered chip. */
.cwv2-shell .ax-sec-n,.cwv2-shell .ag-count{
  padding:0;border:0;background:none;font-size:13px;font-weight:600;color:var(--ink-4);
}
.cwv2-shell .ax-sec-s{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ax-sec-a{ gap:8px; }

/* ── Cards ────────────────────────────────────────────────────────────────── */

.cwv2-shell .ax-card,.cwv2-shell .ax-capbar,.cwv2-shell .ag-setup,
.cwv2-shell .ag-placeholder,.cwv2-shell .ag-offer-card,.cwv2-shell .ag-stat{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;box-shadow:none;
}
.cwv2-shell .ag-stat:hover,.cwv2-shell .ag-offer-card:hover{ box-shadow:none;border-color:var(--border-2); }
.cwv2-shell .ax-card-p{ padding:20px; }
.cwv2-shell .ax-card-h{ padding:16px 20px;border-bottom-color:var(--border); }
.cwv2-shell .ax-card-t{ font-size:15px;font-weight:650;color:var(--ink); }
.cwv2-shell .ax-card + .ax-card{ margin-top:20px; }
.cwv2-shell .ax-cols{ gap:20px; }
.cwv2-shell .ax-cols > .ax-card + .ax-card{ margin-top:0; }
/* ...and in every other GRID of cards, where the gap already spaces them: the
   stacking margin above pushed the second card in a row 20px lower than the
   first (Code's plugin shelf, measured). */
.cwv2-shell .ax-code-grid > .ax-card + .ax-card,
.cwv2-shell .ax-tpl-grid > .ax-card + .ax-card,
.cwv2-shell .ax-imp-facts > .ax-card + .ax-card{ margin-top:0; }
.cwv2-shell .ag-placeholder{ border-style:solid;padding:44px 24px; }
.cwv2-shell .ag-placeholder h2{ font-size:16px;font-weight:650; }
.cwv2-shell .ag-placeholder p{ font-size:13.5px;color:var(--ink-3);margin-top:6px; }

/* The muted note under a card: the design's helper text. */
.cwv2-shell .ax-note,.cwv2-shell .ag-card-sub{ font-size:12.5px;line-height:1.5;color:var(--ink-3); }
.cwv2-shell .ag-muted,.cwv2-shell .ax-muted{ color:var(--ink-3); }

/* ── Figures ──────────────────────────────────────────────────────────────── */

/* The figures as the dashboard draws them today — one quiet card each, 14px
   apart (its Billing rebuild set this for every .metrics on the product, and
   the client portal renders through that same rule). Label above value, the
   value at 24px/700, one muted line under it. auto-fit so five figures sit in
   one row on a laptop and wrap evenly on anything narrower. */
.cwv2-shell .ax-tiles{
  grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:14px;
  background:none;border:0;border-radius:0;overflow:visible;margin-bottom:20px;
}
.cwv2-shell .ax-tile{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:14px 16px;gap:0;margin:0;
}
.cwv2-shell .ax-tile-l{
  font:400 12.5px/1.5 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink-3);
  margin:0 0 6px;
}
.cwv2-shell .ax-tile-v{
  font-size:24px;font-weight:700;line-height:1.2;letter-spacing:-.02em;margin:0;color:var(--ink);
}
.cwv2-shell .ax-tile-of{ font-size:13px;font-weight:500;color:var(--ink-3);letter-spacing:0;margin-left:3px; }
.cwv2-shell .ax-tile-s{ font-size:12.5px;font-weight:400;color:var(--ink-3);margin-top:6px; }
.cwv2-shell .ax-tile-s-ok{ color:var(--ok); }
.cwv2-shell .ax-tile-s-warn{ color:var(--warn); }
.cwv2-shell .ax-tile-s-bad{ color:var(--bad); }
@media (max-width:640px){
  .cwv2-shell .ax-tiles{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
  .cwv2-shell .ax-tile{ padding:12px 14px; }
}

/* The older stat dialect some screens still emit. */
.cwv2-shell .ag-stats{ gap:12px; }
.cwv2-shell .ag-stat{ padding:16px 20px; }
.cwv2-shell .ag-stat-sub{ font-size:12.5px;color:var(--ink-3); }

/* ── Capacity ─────────────────────────────────────────────────────────────── */

.cwv2-shell .ax-cap-n,.cwv2-shell .ax-capbar-n{
  font-size:24px;line-height:32px;font-weight:650;letter-spacing:-.02em;
}
.cwv2-shell .ax-cap-of,.cwv2-shell .ax-capbar-l{ font-size:14px;color:var(--ink-3); }
.cwv2-shell .ax-capbar{ padding:16px 20px;margin-bottom:20px; }
/* The design's meter: 5px, a hairline inside, the fill in the accent. */
.cwv2-shell .ax-meter,.cwv2-shell .ag-meter{
  height:6px;border-radius:3px;background-color:var(--surface-2);
  box-shadow:inset 0 0 0 1px var(--border);
}
.cwv2-shell .ax-meter > span,.cwv2-shell .ag-meter-fill{ border-radius:3px; }
.cwv2-shell .ax-meter-ok,.cwv2-shell .ag-meter-ok{ background-color:var(--ok-fill); }
.cwv2-shell .ax-meter-warn,.cwv2-shell .ag-meter-warn{ background-color:var(--warn-fill); }
.cwv2-shell .ax-meter-danger,.cwv2-shell .ag-meter-danger{ background-color:var(--bad-fill); }
.cwv2-shell .ax-meter-own{ background-color:var(--accent-fill); }
.cwv2-shell .ax-meter-client{ background-color:var(--accent-line); }
.cwv2-shell .ax-meter-rest{ background-color:var(--border-2); }
.cwv2-shell .ax-legend{ font-size:12.5px;color:var(--ink-3); }

/* ── Tables ───────────────────────────────────────────────────────────────── */

/* Sentence-case headings in the muted ink, as the design draws them. The
   uppercase tracked labels were the loudest thing on every list. */
.cwv2-shell .ax-t,.cwv2-shell .ag-table{ font-size:14px; }
.cwv2-shell .ax-t thead th,.cwv2-shell .ax-t-sites thead th,.cwv2-shell .ag-table th{
  font:500 12.5px/1.4 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink-3);
  padding:10px 14px;border-bottom:1px solid var(--border);background:none;
}
.cwv2-shell .ax-t tbody td,.cwv2-shell .ag-table td{
  padding:12px 14px;border-top:0;border-bottom:1px solid var(--border);
}
.cwv2-shell .ax-t-sites tbody td{ padding-top:12px;padding-bottom:12px; }
.cwv2-shell .ax-t thead th:first-child,.cwv2-shell .ax-t tbody td:first-child,
.cwv2-shell .ag-table th:first-child,.cwv2-shell .ag-table td:first-child{ padding-left:20px; }
.cwv2-shell .ax-t thead th:last-child,.cwv2-shell .ax-t tbody td:last-child,
.cwv2-shell .ag-table th:last-child,.cwv2-shell .ag-table td:last-child{ padding-right:20px; }
.cwv2-shell .ax-t tbody tr:last-child td{ border-bottom:0; }
.cwv2-shell .ax-t tbody tr:hover,.cwv2-shell .ax-t-sites tbody tr:hover,
.cwv2-shell .ag-table tbody tr:hover td{ background-color:var(--surface-2); }
.cwv2-shell .ag-table{ border-radius:12px;border-color:var(--border); }
/* The key/value table keeps its own label column. */
.cwv2-shell .ax-t-kv tbody th{ font-size:13.5px;font-weight:500;color:var(--ink-3); }
.cwv2-shell .ag-kv th{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ag-kv td{ font-size:14px; }

/* ── Identity in a row ────────────────────────────────────────────────────── */

/* The design's thumb: a tinted square with the initials, no outline. */
.cwv2-shell .ax-mark,.cwv2-shell .ax-sid-m{
  width:36px;height:36px;border:0;border-radius:9px;
  background-color:var(--accent-bg);color:var(--accent);font:700 12.5px/1 var(--cw-font);
}
.cwv2-shell .ax-mark-n{ background-color:var(--surface-2);color:var(--ink-3); }
.cwv2-shell .ax-t-sites tbody tr:hover .ax-sid-m{ background-color:var(--accent-fill);color:var(--on-accent); }
.cwv2-shell .ax-id-t,.cwv2-shell .ax-sid-n{ font-size:14px;font-weight:600;line-height:1.3;color:var(--ink); }
.cwv2-shell .ax-id-s,.cwv2-shell .ax-sid-d,.cwv2-shell .ax-own-s,.cwv2-shell .ag-sub{
  font-size:13px;font-weight:400;color:var(--ink-3);
}
.cwv2-shell .ax-ob-l{ font:600 11px/14px var(--cw-font);letter-spacing:.02em;text-transform:none;color:var(--ink-4); }
.cwv2-shell .ax-ob-l-agency{ color:var(--accent); }
.cwv2-shell .ax-ob-n,.cwv2-shell .ax-own{ font-size:13.5px;color:var(--ink-2); }
.cwv2-shell .ax-sid-tag{
  height:20px;padding:0 6px;border-radius:5px;font-size:11px;font-weight:600;letter-spacing:0;
  text-transform:none;display:inline-flex;align-items:center;
  background-color:var(--surface-2);color:var(--ink-3);
}
.cwv2-shell .ax-sid-tag-agency{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .ax-kind{ border-color:var(--border-2);color:var(--ink-3);border-radius:5px; }

/* ── Status ───────────────────────────────────────────────────────────────── */

/* The design's status badge: a tinted label with a dot. Dot AND word, so it
   never depends on colour alone. */
.cwv2-shell .ax-st{
  display:inline-flex;align-items:center;gap:6px;height:22px;padding:0 8px;border-radius:6px;
  font-size:12px;font-weight:600;line-height:22px;white-space:nowrap;
  background-color:var(--mut-bg);color:var(--mut);
}
.cwv2-shell .ax-st i{ width:6px;height:6px; }
.cwv2-shell .ax-st-ok{ background-color:var(--ok-bg);color:var(--ok); }
.cwv2-shell .ax-st-warn{ background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .ax-st-bad{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .ax-st-info{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .ax-st-mute{ background-color:var(--mut-bg);color:var(--mut); }
.cwv2-shell .ax-st-why{ font-size:12.5px;color:var(--ink-3);margin-top:4px; }
.cwv2-shell .ag-state{ font-weight:600; }
.cwv2-shell .ag-tone-ok{ color:var(--ok); }
.cwv2-shell .ag-tone-warn{ color:var(--warn); }
.cwv2-shell .ag-tone-bad{ color:var(--bad); }


/* ── Filters, tabs and search ─────────────────────────────────────────────── */

/* Filter pills → the design's index tabs: borderless, the selected one sits
   on a tinted ground with a hairline. The count is a quiet number. */
.cwv2-shell .ax-pills{ gap:2px; }
.cwv2-shell .ax-pill,.cwv2-shell .aga-pill{
  height:30px;padding:0 11px;border:0;border-radius:8px;background:none;
  font-size:13.5px;font-weight:600;color:var(--ink-3);gap:6px;
}
.cwv2-shell .ax-pill:hover,.cwv2-shell .aga-pill:hover{ background-color:var(--surface-2);color:var(--ink); }
.cwv2-shell .ax-pill.on,.cwv2-shell .aga-pill.is-on{
  background-color:var(--surface-2);color:var(--ink);box-shadow:inset 0 0 0 1px var(--border);font-weight:600;
}
.cwv2-shell .ax-pill-n,.cwv2-shell .ax-pill.on .ax-pill-n{
  padding:0;background:none;font-size:12px;font-weight:600;color:var(--ink-4);
}
.cwv2-shell .ax-pill:focus-visible,.cwv2-shell .aga-pill:focus-visible{ outline:2px solid var(--accent-fill);outline-offset:1px; }

/* The segmented control. */
.cwv2-shell .ax-seg,.cwv2-shell .ags-pk-seg{
  padding:3px;gap:2px;border-radius:9px;background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2-shell .ax-seg button,.cwv2-shell .ags-pk-segb{
  height:28px;padding:0 11px;border-radius:7px;font-size:13px;font-weight:600;color:var(--ink-3);
}
.cwv2-shell .ax-seg button.on,.cwv2-shell .ags-pk-segb.is-on{
  background-color:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(20,21,31,.08),0 0 0 1px var(--border);
}

/* Template categories → the design's chips: the selected one is solid ink. */
.cwv2-shell .ax-cats{ gap:6px; }
.cwv2-shell .ax-cat{
  height:30px;padding:0 11px;border-radius:8px;font-size:13px;font-weight:600;
  color:var(--ink-2);border:1px solid var(--border-2);background-color:var(--surface);
}
.cwv2-shell .ax-cat:hover{ background-color:var(--surface-2);color:var(--ink); }
.cwv2-shell .ax-cat.on{ background-color:var(--ink);color:var(--surface);border-color:var(--ink); }

/* Search → the design's search: one bordered box, a ring on focus. The left
   padding clears the magnifier: the skin's generic input rule
   (`.cwv2-skin input[type="search"]`, padding 0 12px) outranks app.css's
   `.ax-search input` and put the placeholder underneath the icon. */
.cwv2-shell .ax-search input{
  padding:0 12px 0 34px;
  height:34px;border:1px solid var(--border-2);border-radius:9px;
  background-color:var(--surface);color:var(--ink);font-size:13.5px;
}
.cwv2-shell .ax-search input::placeholder{ color:var(--ink-4); }
.cwv2-shell .ax-search input:focus{
  outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}
.cwv2-shell .ax-search svg{ color:var(--ink-4); }
.cwv2-shell .ax-pk-find{ height:34px; }

/* ── Notices ──────────────────────────────────────────────────────────────── */

/* The design's banner: white, with a tinted edge and a small tinted icon.
   The colour says how serious it is; the box does not have to shout. */
.cwv2-shell .ax-alerts{ gap:10px;margin-bottom:20px; }
.cwv2-shell .ax-alert{
  padding:14px 16px;border-radius:12px;border:1px solid var(--border);border-left-width:1px;
  background-color:var(--surface);gap:12px;
}
.cwv2-shell .ax-alert-warn{ border-color:var(--warn-line); }
.cwv2-shell .ax-alert-danger{ border-color:var(--bad-line); }
.cwv2-shell .ax-alert-info{ border-color:var(--info-line); }
.cwv2-shell .ax-alert-ico{ width:30px;height:30px;border-radius:8px; }
.cwv2-shell .ax-alert-warn .ax-alert-ico{ background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .ax-alert-danger .ax-alert-ico{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .ax-alert-info .ax-alert-ico{ background-color:var(--info-bg);color:var(--info); }
.cwv2-shell .ax-alert-t{ font-size:14px;font-weight:600;color:var(--ink); }
.cwv2-shell .ax-alert-p{ font-size:13.5px;color:var(--ink-3);margin-top:2px; }
.cwv2-shell .ax-calm{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ax-calm svg{ color:var(--ok-fill); }

/* The older action-card dialect. */
.cwv2-shell .ag-action{
  border-radius:12px;border:1px solid var(--border);border-left-width:1px;padding:14px 16px;
  background-color:var(--surface);
}
.cwv2-shell .ag-action-info{ border-color:var(--info-line); }
.cwv2-shell .ag-action-warn{ border-color:var(--warn-line); }
.cwv2-shell .ag-action-danger{ border-color:var(--bad-line); }
.cwv2-shell .ag-action-title{ font-size:14px;font-weight:600; }
.cwv2-shell .ag-action-text{ font-size:13.5px;color:var(--ink-3); }

/* A note inside a form, before a consequence. */
.cwv2-shell .ag-form-note{
  font-size:13.5px;line-height:1.5;color:var(--ink-2);border-radius:10px;padding:12px 14px;
  background-color:var(--warn-bg);border-color:var(--warn-line);
}
.cwv2-shell .ag-explain{ border-radius:10px;background-color:var(--surface-2);border-color:var(--border); }

/* ── Empty states and skeletons ───────────────────────────────────────────── */

.cwv2-shell .ax-empty{ padding:44px 24px; }
.cwv2-shell .ax-empty-sm{ padding:32px 20px; }
.cwv2-shell .ax-empty-i,.cwv2-shell .aga-empty-i{
  width:48px;height:48px;margin:0 auto 14px;border-radius:12px;
  background-color:var(--surface-2);border:1px solid var(--border);color:var(--ink-2);
}
.cwv2-shell .ax-empty-t,.cwv2-shell .aga-empty-t{ font-size:16px;font-weight:650;color:var(--ink); }
.cwv2-shell .ax-empty-s,.cwv2-shell .aga-empty-s{ font-size:14px;line-height:1.55;color:var(--ink-3);margin-top:6px; }
.cwv2-shell .ax-empty-a{ margin-top:18px; }

/* The design's skeleton: a soft sweep across the surface tint. The white
   sheen app.css used flashed as a bright stripe in dark mode. */
.cwv2-shell .ax-sk{ background-color:var(--surface-2);border-radius:6px; }
.cwv2-shell .ax-sk::after{
  background:linear-gradient(90deg,transparent,var(--hover),transparent);
}
.cwv2-shell .ax-sk-tile,.cwv2-shell .ax-sk-tpl{ border-radius:12px; }
.cwv2-shell .ax-sk-row{ border-radius:9px; }
.cwv2-shell .cwa-booting #ag-avatar{ background-color:var(--surface-2); }

/* ── Forms ────────────────────────────────────────────────────────────────── */

/* The address field with its domain suffix: one box, the suffix tinted. */
.cwv2-shell .ag-input-suffix{
  border-color:var(--border-2);background-color:var(--surface-2);color:var(--ink-3);
  border-radius:0 9px 9px 0;font-size:13.5px;
}
.cwv2-shell .ag-input-row .cw-input{ border-radius:9px 0 0 9px; }
.cwv2-shell .ax-field-l{ font-size:13px;font-weight:600;color:var(--ink-2); }
.cwv2-shell .ax-field-h{ font-size:12.5px;color:var(--ink-3); }
.cwv2-shell .ax-textarea{
  border:1px solid var(--border-2);border-radius:9px;background-color:var(--surface);
  font-size:14px;color:var(--ink);
}
.cwv2-shell .ax-textarea:focus,.cwv2-shell .ax-textarea:focus-visible{
  outline:none;border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg);
}

/* A choice between two trade-offs: the design's selectable card. */
.cwv2-shell .ag-choice-opt,.cwv2-shell .ax-dep{
  border-radius:10px;border-color:var(--border);background-color:var(--surface);
}
.cwv2-shell .ag-choice-opt:hover,.cwv2-shell .ax-dep:hover{ border-color:var(--border-2); }
.cwv2-shell .ag-choice-opt:has(input:checked),.cwv2-shell .ax-dep:has(input:checked){
  border-color:var(--accent-fill);background-color:var(--accent-bg);
}
.cwv2-shell .ag-choice-title,.cwv2-shell .ax-dep-t{ font-size:14px;font-weight:600; }
.cwv2-shell .ag-choice-note,.cwv2-shell .ax-dep-s{ font-size:13px;color:var(--ink-3); }

/* Links that are buttons. */
.cwv2-shell .ag-link,.cwv2-shell .ag-linkish{ color:var(--accent);font-weight:600; }
.cwv2-shell .ag-link:hover{ background-color:var(--accent-bg); }
.cwv2-shell .ag-link.ag-danger{ color:var(--bad); }

/* ── Steps (the guided flows) ─────────────────────────────────────────────── */

.cwv2-shell .ag-step{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .ag-step-n{
  width:22px;height:22px;background-color:var(--surface-2);color:var(--ink-3);
  border:1px solid var(--border-2);font:600 11.5px/1 var(--cw-font);
}
.cwv2-shell .ag-step.current{ color:var(--ink);font-weight:600; }
.cwv2-shell .ag-step.current .ag-step-n{ background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent); }
.cwv2-shell .ag-step.done .ag-step-n{ background-color:var(--ok-bg);border-color:var(--ok-line);color:var(--ok); }
.cwv2-shell .ag-step + .ag-step::before{ background-color:var(--border-2); }
.cwv2-shell .ag-setup{ padding:20px; }
.cwv2-shell .ag-setup-note{ font-size:12.5px;color:var(--ink-3); }
.cwv2-shell .ax-imp-steps span{ border-radius:8px;height:28px;display:inline-flex;align-items:center;font-weight:600; }
.cwv2-shell .ax-imp-steps span.on{ background-color:var(--accent-bg);color:var(--accent); }

/* ── Templates and the design picker ──────────────────────────────────────── */

.cwv2-shell .ax-tpl{ border-radius:12px;border-color:var(--border); }
.cwv2-shell .ax-tpl:hover{ border-color:var(--border-2);box-shadow:var(--e2);transform:translateY(-1px); }
.cwv2-shell .ax-tpl-shot{ background-color:var(--surface-2);border-bottom:1px solid var(--border); }
.cwv2-shell .ax-tpl-n{ font-size:14px;font-weight:600; }
.cwv2-shell .ax-tpl-c{ font-size:12.5px;color:var(--ink-3); }
/* The category is capitalised (it arrives as a slug); a sentence in the
   card's foot is not — "We Are Still Preparing This One" read as shouting. */
.cwv2-shell .ax-tpl-f .ax-tpl-c{ text-transform:none; }
.cwv2-shell .ax-tpl-flag{ border-radius:6px;font:600 11px/1 var(--cw-font);letter-spacing:0;text-transform:none;padding:5px 7px; }
.cwv2-shell .ax-tpl-flag-soon{ background-color:var(--surface);color:var(--ink-3);box-shadow:0 0 0 1px var(--border); }
.cwv2-shell .ax-pk-shot{ border-radius:10px;border-width:1px;border-color:var(--border); }
.cwv2-shell .ax-pk:hover .ax-pk-shot{ border-color:var(--border-2); }
.cwv2-shell .ax-pk.is-on .ax-pk-shot{ border-color:var(--accent-fill);box-shadow:0 0 0 3px var(--accent-bg); }
.cwv2-shell .ax-pk-tick{ background-color:var(--accent-fill); }
.cwv2-shell .ax-pk-n{ font-size:13px;font-weight:600; }
.cwv2-shell .ax-pk-c{ font-size:12px;color:var(--ink-3); }

/* ── Code library ─────────────────────────────────────────────────────────── */

.cwv2-shell .ax-code-mark{ border-radius:9px;background-color:var(--accent-bg);color:var(--accent);font:700 14px/1 var(--cw-font); }
.cwv2-shell .ax-code-name{ font-size:14px;font-weight:600; }
.cwv2-shell .ax-code-slug,.cwv2-shell .ax-code-ver,.cwv2-shell .ax-code-uses{ font-size:12.5px;color:var(--ink-3); }
.cwv2-shell .ax-code-hit:hover{ background-color:var(--surface-2); }
.cwv2-shell .ax-code-foot{ border-top-color:var(--border); }
.cwv2-shell .ax-up-drop{ border-radius:12px;border-color:var(--border-2);background-color:var(--surface-2); }
.cwv2-shell .ax-up-drop:hover{ border-color:var(--accent-fill);background-color:var(--accent-bg); }
.cwv2-shell .ax-up-ico{ color:var(--accent); }
.cwv2-shell .ax-up-t{ font-size:14px;font-weight:600; }
.cwv2-shell .ax-up-s,.cwv2-shell .ax-up-msg{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .ax-up-prog .ax-meter > span{ background-color:var(--accent-fill); }

/* ── Domain records ───────────────────────────────────────────────────────── */

.cwv2-shell .ax-dns{ border-radius:10px;background-color:var(--surface-2);border-color:var(--border); }
.cwv2-shell .ax-dns-l{ font:500 12.5px/1.4 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink-3); }
.cwv2-shell .ax-dns-n{ font-size:12.5px;color:var(--ink-3); }

/* ── Support ──────────────────────────────────────────────────────────────── */

.cwv2-shell .ax-thread + .ax-thread{ border-top-color:var(--border); }
.cwv2-shell .ax-thread-btn{ padding:14px 20px; }
.cwv2-shell .ax-thread-btn:hover{ background-color:var(--surface-2); }
.cwv2-shell .ax-thread-av,.cwv2-shell .ax-conv-av{
  width:36px;height:36px;border-radius:50%;
  background-color:var(--surface-2);color:var(--ink-3);font:700 12px/1 var(--cw-font);
}
.cwv2-shell .ax-thread.is-unread .ax-thread-av,.cwv2-shell .ax-conv-av{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .ax-thread-subject{ font-size:14px;font-weight:600; }
.cwv2-shell .ax-thread.is-unread .ax-thread-subject{ font-weight:700; }
.cwv2-shell .ax-thread-preview{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ax-thread-who{ font-size:13px;font-weight:600;color:var(--ink-2); }
.cwv2-shell .ax-thread-when{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .ax-thread-tag{ border-radius:5px;font-size:11px;letter-spacing:0;text-transform:none;background-color:var(--surface-2);color:var(--ink-3); }
.cwv2-shell .ax-thread-dot{ background-color:var(--accent-fill); }
.cwv2-shell .ax-thread-dot.is-empty{ background-color:transparent; }
.cwv2-shell .ax-conv-head{ padding:16px 20px;border-bottom-color:var(--border); }
.cwv2-shell .ax-conv-subject{ font-size:15px;font-weight:650; }
.cwv2-shell .ax-conv-who{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .ax-msgs{ padding:20px;gap:16px; }
.cwv2-shell .ax-msg-who{ font-size:12.5px;font-weight:600;color:var(--ink-2); }
.cwv2-shell .ax-msg-at{ color:var(--ink-4); }
.cwv2-shell .ax-msg-body{
  font-size:14px;line-height:1.55;background-color:var(--surface-2);
  border:1px solid var(--border);border-radius:12px 12px 12px 4px;padding:10px 14px;
}
.cwv2-shell .ax-msg.is-mine .ax-msg-body{
  background-color:var(--accent-bg);border-color:var(--accent-line);border-radius:12px 12px 4px 12px;
}
.cwv2-shell .ax-composer{ padding:16px 20px;border-top-color:var(--border); }

/* ── Activity ─────────────────────────────────────────────────────────────── */

/* One tint per group, from the design's tones rather than raw hex, so the
   feed follows the theme: the fixed colours app.css used went muddy on the
   dark surface. */
.cwv2-shell .aga-row{ border-top-color:var(--border); }
.cwv2-shell .aga-ic{ width:32px;height:32px;border-radius:8px;background-color:var(--surface-2);color:var(--ink-2); }
.cwv2-shell .aga-g-sites  { background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .aga-g-clients{ background-color:var(--ok-bg);color:var(--ok); }
.cwv2-shell .aga-g-support{ background-color:var(--info-bg);color:var(--info); }
.cwv2-shell .aga-g-domains{ background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .aga-g-team   { background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .aga-g-code   { background-color:var(--mut-bg);color:var(--mut); }
.cwv2-shell .aga-g-billing{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .aga-t{ font-size:14px;color:var(--ink); }
.cwv2-shell .aga-d{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .aga-m{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .aga-who{ color:var(--ink-3); }
.cwv2-shell .aga-card{ padding:4px 20px; }
.cwv2-shell .aga-day{ font:600 12.5px/1.4 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink-3); }

/* ── Notifications (the bell) ─────────────────────────────────────────────── */

.cwv2-shell .agn-btn{
  width:36px;height:36px;border:0;border-radius:9px;background:none;color:var(--ink-3);
  display:inline-flex;align-items:center;justify-content:center;padding:0;
}
.cwv2-shell .agn-btn:hover{ background-color:var(--surface-2);color:var(--ink); }
/* A dot, as the design marks "something new" — not a red counter. */
.cwv2-shell .agn-badge{
  top:8px;right:8px;width:8px;height:8px;min-width:0;padding:0;border-radius:50%;
  font-size:0;line-height:0;color:transparent;overflow:hidden;
  background-color:var(--warn-fill);box-shadow:0 0 0 1.5px var(--side);
}
.cwv2-shell .agn-panel{ border-radius:12px;border-color:var(--border);box-shadow:var(--e2); }
.cwv2-shell .agn-h{ padding:14px 16px;border-bottom-color:var(--border); }
.cwv2-shell .agn-ht{ font-size:15px;font-weight:650; }
.cwv2-shell .agn-item{ padding:12px 16px;border-top-color:var(--border); }
.cwv2-shell .agn-item:hover{ background-color:var(--surface-2); }
.cwv2-shell .agn-item.is-unread{ background-color:transparent; }
.cwv2-shell .agn-it{ font-size:14px; }
.cwv2-shell .agn-ix{ font-size:13px;color:var(--ink-3); }
.cwv2-shell .agn-im{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .agn-new{ border-radius:5px;background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .agn-sev-success{ background-color:var(--ok-fill); }
.cwv2-shell .agn-sev-warn{ background-color:var(--warn-fill); }
.cwv2-shell .agn-sev-danger{ background-color:var(--bad-fill); }
.cwv2-shell .agn-sev-info{ background-color:var(--accent-fill); }
.cwv2-shell .agn-f{ border-top-color:var(--border); }

/* ── Billing ──────────────────────────────────────────────────────────────── */

.cwv2-shell .ag-bill-tier{ font-size:20px;font-weight:700;letter-spacing:-.01em; }
.cwv2-shell .ag-bill-price{ font-size:14px;color:var(--ink-3); }
.cwv2-shell .ax-plan-opt{ border-top-color:var(--border); }

/* ── File editor ──────────────────────────────────────────────────────────── */


/* ── Toast ────────────────────────────────────────────────────────────────── */

/* The inverse of the page, as the dashboard's toast is. */
.cwv2-shell .ag-toast{
  background-color:var(--ink);color:var(--surface);border-radius:9px;
  font-size:13.5px;font-weight:600;padding:10px 16px;box-shadow:var(--e2);
}
.cwv2-shell .ag-toast-error{ background-color:var(--bad-fill);color:#fff; }

/* ── Sites: the dashboard's Websites list ─────────────────────────────────── */

/* The filters and the search are the list card's own top row, divided from
   the table by a hairline, as on the dashboard. */
.cwv2-shell .ax-sites-card .ax-bar-in{
  margin:0;padding:12px 16px;border-bottom:1px solid var(--border);gap:12px;
}
.cwv2-shell .ax-sites-card .ax-bar-in .ax-bar-end{ min-width:220px; }
.cwv2-shell .ax-sites-card .ax-bar-in .ax-search{ max-width:300px; }

/* The name, and the kind as a small label after it on the same line. */
.cwv2-shell .ax-sid-nl{ display:flex;align-items:center;gap:8px;min-width:0; }
.cwv2-shell .ax-sid-nl .ax-sid-n{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-kind{
  flex:0 0 auto;display:inline-flex;align-items:center;height:20px;padding:0 7px;margin:0;
  border:0;border-radius:5px;background-color:var(--mut-bg);color:var(--mut);
  font:600 11px/1 var(--cw-font);letter-spacing:.02em;vertical-align:middle;
}

/* Belongs to: WHO first, in the row's ink, and the relationship under it in
   the muted line the website cell uses for its address — the same two-line
   shape across the row, instead of a tracked uppercase label on top. */
.cwv2-shell .ax-t-sites .ax-ob{ flex-direction:column-reverse;gap:1px; }
.cwv2-shell .ax-t-sites .ax-ob-n{ font-size:14px;font-weight:500;color:var(--ink); }
.cwv2-shell .ax-t-sites .ax-ob-l{
  font:400 13px/1.4 var(--cw-font);letter-spacing:0;text-transform:none;color:var(--ink-3);
}
.cwv2-shell .ax-t-sites .ax-ob-l-agency{ color:var(--accent); }
.cwv2-shell .ax-t-sites .ax-ob-mute .ax-ob-n{ color:var(--ink-3); }

/* Visit and More: the dashboard's square icon buttons. */
.cwv2-shell .ax-ibtn{
  width:30px;height:30px;min-height:30px;padding:0;border-radius:8px;
  justify-content:center;color:var(--ink-2);
}
.cwv2-shell .ax-ibtn:hover{ color:var(--ink); }
.cwv2-shell .ax-row-a{ gap:6px; }
.cwv2-shell .ax-t-sites .ax-c-act{ width:92px; }

/* On a phone the rows are cards already (app.css), so the list's own card
   steps back — cards inside a card read as a mistake — and the toolbar sits
   above them on the page. */
@media (max-width:640px){
  .cwv2-shell .ax-sites-card{ background:none;border:0;border-radius:0;overflow:visible; }
  .cwv2-shell .ax-sites-card .ax-bar-in{ padding:0 0 12px;border-bottom:0; }
  .cwv2-shell .ax-sites-card .ax-bar-in .ax-bar-end{ min-width:0;width:100%; }
  .cwv2-shell .ax-sites-card .ax-bar-in .ax-search{ max-width:none; }
  .cwv2-shell .ax-t-sites tbody tr{ border-radius:12px;border-color:var(--border);background-color:var(--surface); }
  .cwv2-shell .ax-ibtn{ flex:0 0 auto; }
}
/* EVERY LIST, as cards on a phone. The desktop table rules above (cell
   padding, the hairline under each cell, the 20px edge on the first and last
   cell) outrank app.css's card reset, so each card came out padded twice and
   ruled between its lines. The card is one object: one padding, no rules. */
@media (max-width:640px){
  .cwv2-shell .ax-t tbody tr{ padding:14px 16px; }
  .cwv2-shell .ax-t tbody td,
  .cwv2-shell .ax-t tbody td:first-child,
  .cwv2-shell .ax-t tbody td:last-child{ border:0;padding:3px 0; }
  .cwv2-shell .ax-t tbody td.ax-t-end{ padding-top:10px; }
}

/* ── Sites as cards ───────────────────────────────────────────────────────── */

/* The dashboard's cards / list switch, in the page head. */
.cwv2-shell .ax-viewtog{
  display:inline-flex;gap:2px;padding:3px;border-radius:9px;
  background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2-shell .ax-viewtog button{
  width:30px;height:28px;display:inline-flex;align-items:center;justify-content:center;
  border:0;border-radius:7px;background:none;color:var(--ink-3);cursor:pointer;padding:0;
}
.cwv2-shell .ax-viewtog button:hover{ color:var(--ink); }
.cwv2-shell .ax-viewtog button.on{
  background-color:var(--surface);color:var(--ink);
  box-shadow:0 1px 2px rgba(20,21,31,.08),0 0 0 1px var(--border);
}

/* The grid sits in the list card under its toolbar, as the dashboard's does.
   It is a .cwv2 block (the design's card rules live there), whose own page
   background would otherwise paint a grey panel inside the white card. */
.cwv2-shell .ax-sgrid.cwv2{ background:none;padding:20px; }
.cwv2-shell .ax-sgrid .sitegrid,.cwv2-shell .ax-ov .sitegrid{ grid-template-columns:repeat(auto-fill,minmax(300px,1fr)); }
/* The name and the kind on one line; the name gives way, never the label. */
.cwv2-shell .ax-sgrid .ax-sc-nl,.cwv2-shell .ax-ov .ax-sc-nl{ display:flex;align-items:center;gap:6px;min-width:0; }
.cwv2-shell .ax-sgrid .ax-sc-nl b,.cwv2-shell .ax-ov .ax-sc-nl b{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
/* Belongs to: who, then the relationship in the muted ink. */
.cwv2-shell .ax-sgrid .ax-sc-own,.cwv2-shell .ax-ov .ax-sc-own{ min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-sgrid .ax-sc-rel,.cwv2-shell .ax-ov .ax-sc-rel{ font-weight:400;color:var(--ink-3);flex:0 0 auto; }
/* Open takes the room; the menu stays a square beside it. */
.cwv2-shell .ax-sgrid .sc-act .btn.icon,.cwv2-shell .ax-ov .sc-act .btn.icon{ flex:0 0 30px; }
.cwv2-shell .ax-sgrid .sc-act .btn svg,.cwv2-shell .ax-ov .sc-act .btn svg{ color:var(--ink-3); }
/* A removed website stays listed but stops competing for attention. */
.cwv2-shell .ax-sgrid .ax-scard-mute .sc-mono,.cwv2-shell .ax-ov .ax-scard-mute .sc-mono{ background-color:var(--surface-2);color:var(--ink-4); }
.cwv2-shell .ax-sgrid .ax-scard-mute .sc-n b,.cwv2-shell .ax-ov .ax-scard-mute .sc-n b{ color:var(--ink-3); }
@media (max-width:640px){
  .cwv2-shell .ax-sgrid.cwv2{ padding:0; }
.cwv2-shell .ax-sgrid .sitegrid,.cwv2-shell .ax-ov .sitegrid{ grid-template-columns:minmax(0,1fr); }
}

/* ══ Start your agency — the plan builder ═════════════════════════════════════
 *
 * The first screen of the product, for a signed-in account with no agency
 * yet. .cwv2-shell sits on #ag-start itself, so the design's tokens reach
 * this screen and nothing else in the document. Drawn like the dashboard's
 * create flow: its bar, its step indicator, a builder card beside a summary
 * card, sentence-case labels and the small counter. */

.cwv2-shell.ag-start{ background-color:var(--bg);color:var(--ink); }

/* The bar: the design's 64px strip, brand left, the account's way out right. */
.cwv2-shell .ags-top{
  height:64px;padding:0 20px;gap:12px;
  background-color:var(--side);border-bottom:1px solid var(--side-line);
}
.cwv2-shell .ags-brand img{ height:36px;width:auto; }
html[data-theme="dark"] .cwv2-shell .ags-brand img{ filter:invert(.9) hue-rotate(180deg); }
.cwv2-shell .ags-who{ font-size:13.5px;color:var(--ink-3);margin-right:4px; }
.cwv2-shell .ags-top-r .cw-btn{
  height:34px;min-height:34px;padding:0 12px;border-radius:9px;
  font-size:13.5px;font-weight:600;box-shadow:none;
}
.cwv2-shell .ags-top-r a.cw-btn{ border:1px solid var(--border-2);background-color:var(--surface);color:var(--ink); }
.cwv2-shell .ags-top-r a.cw-btn:hover{ background-color:var(--hover); }
.cwv2-shell .ags-top-r button.cw-btn{ border:0;background:none;color:var(--ink-3); }
.cwv2-shell .ags-top-r button.cw-btn:hover{ background-color:var(--surface-2);color:var(--ink); }

/* The column: the design's page, left-aligned under its steps. */
.cwv2-shell .ags-main{ max-width:1080px;padding:32px 24px 72px;text-align:left; }

/* The steps, exactly as the create flow draws them. */
.cwv2-shell .ags-steps{ display:flex;justify-content:flex-start;gap:10px;margin:0 0 22px; }
.cwv2-shell .ags-steps li{ gap:8px;font-size:13.5px;font-weight:500;color:var(--ink-4); }
.cwv2-shell .ags-steps li + li::before{ width:28px;height:1px;margin-right:2px;background-color:var(--border-2); }
.cwv2-shell .ags-step-i{
  width:22px;height:22px;border:1px solid var(--border-2);background-color:var(--surface);
  font:600 12px/1 var(--cw-font);color:var(--ink-3);
}
.cwv2-shell .ags-steps .is-now{ color:var(--ink);font-weight:600; }
.cwv2-shell .ags-steps .is-now .ags-step-i{ background-color:var(--accent-fill);border-color:var(--accent-fill);color:var(--on-accent); }
.cwv2-shell .ags-steps .is-done{ color:var(--ink-2); }
.cwv2-shell .ags-steps .is-done .ags-step-i{ background-color:var(--ok-bg);border-color:var(--ok-line);color:var(--ok); }

/* The head: the design's 24px title, one muted line under it. */
.cwv2-shell .ags-title{ font:700 24px/32px var(--cw-font);letter-spacing:-.02em;color:var(--ink);text-align:left; }
.cwv2-shell .ags-sub{ font-size:14px;line-height:1.55;color:var(--ink-3);margin:4px 0 0;max-width:640px;text-align:left; }
.cwv2-shell .ags-settling{
  max-width:none;margin:20px 0 0;border-radius:12px;padding:14px 16px;
  background-color:var(--ok-bg);border-color:var(--ok-line);
}
.cwv2-shell .ags-settling-h{ font-size:14px;font-weight:600;color:var(--ink); }
.cwv2-shell .ags-settling-p{ font-size:13.5px;color:var(--ink-2); }

/* Two cards side by side, as the create flow's review: the builder, and the
   summary that follows the page down. Not one card holding another. */
.cwv2-shell .ags-plans.is-picker{ margin-top:24px; }
.cwv2-shell .ags-pk{
  grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start;
  background:none;border:0;border-radius:0;padding:0;box-shadow:none;
}
.cwv2-shell .ags-pk-l{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;padding:20px;
}

/* Labels in sentence case, as every label in the design is. */
.cwv2-shell .ags-pk-k{ font:600 12.5px/1.4 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink-3);margin:0; }
.cwv2-shell .ags-pk-n{ font:650 18px/1.35 var(--cw-font);letter-spacing:-.01em;color:var(--ink);margin:4px 0 0; }
.cwv2-shell .ags-pk-d{ font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:4px 0 0; }
.cwv2-shell .ags-pk-lbl{ font:600 13.5px/1.4 var(--cw-font);text-transform:none;letter-spacing:0;color:var(--ink); }
/* Each section of the builder starts on a hairline. */
.cwv2-shell .ags-pk-row,
.cwv2-shell .ags-pk-l > #ags-cat-l{ margin:18px 0 10px;padding-top:18px;border-top:1px solid var(--border); }
.cwv2-shell .ags-pk-row .ags-pk-lbl{ margin:0; }
.cwv2-shell .ags-pk-inc{ font-size:12.5px;color:var(--ink-3); }

/* The counter, small, as the create flow's slice counter. */
.cwv2-shell .ags-sz{ gap:10px; }
.cwv2-shell .ags-sz-ctl{ gap:6px; }
.cwv2-shell .ags-sz-btn{
  width:32px;height:32px;border-radius:8px;border:1px solid var(--border-2);
  background-color:var(--surface);color:var(--ink-2);
}
.cwv2-shell .ags-sz-btn:hover:not(:disabled){ border-color:var(--accent-fill);background-color:var(--accent-bg);color:var(--accent); }
.cwv2-shell .ags-sz-val{ min-width:88px; }
.cwv2-shell .ags-sz-val b{ font:700 18px/1 var(--cw-font);color:var(--ink); }
.cwv2-shell .ags-sz-val span{ font-size:12.5px;color:var(--ink-3); }
.cwv2-shell .ags-sz-bar{ gap:3px; }
.cwv2-shell .ags-sz-bar i{ height:6px;border-radius:3px;background-color:var(--surface-2);box-shadow:inset 0 0 0 1px var(--border); }
.cwv2-shell .ags-sz-bar i.is-inc{ background-color:var(--accent-line);box-shadow:none; }
.cwv2-shell .ags-sz-bar i.is-on{ background-color:var(--accent-fill);box-shadow:none; }
.cwv2-shell .ags-sz-note,.cwv2-shell .ags-pk-note{ font-size:12.5px;line-height:1.5;color:var(--ink-3); }
.cwv2-shell .ags-pk-note{ margin:8px 0 0; }

/* What the plan buys, as the design's summary list: label left, value right. */
.cwv2-shell .ags-pk-res{
  margin-top:18px;padding:18px 0 0;background:none;border:0;border-top:1px solid var(--border);border-radius:0;
}
.cwv2-shell .ags-pk-res ul{ margin:8px 0 0;gap:0; }
.cwv2-shell .ags-pk-res li{
  display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  padding:9px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--ink-3);
}
.cwv2-shell .ags-pk-res li:first-child{ border-top:0; }
.cwv2-shell .ags-pk-res b{ font-weight:600;color:var(--ink); }

/* The summary card: the plan's name, the price as the largest thing on the
   screen, the one action, and what is included. It follows the page down so
   the price stays in view while the size is changed. */
.cwv2-shell .ags-plan{
  background-color:var(--surface);border:1px solid var(--border);border-radius:12px;
  padding:20px;box-shadow:none;position:sticky;top:24px;
}
.cwv2-shell .ags-plan.is-pro{ border-color:var(--accent-line); }
.cwv2-shell .ags-plan.is-picked{
  border:1px solid var(--accent-fill);padding:20px;box-shadow:0 0 0 3px var(--accent-bg);
}
.cwv2-shell .ags-flag{
  top:-10px;left:16px;padding:4px 8px;border-radius:6px;
  font:600 11.5px/1 var(--cw-font);background-color:var(--accent-fill);color:var(--on-accent);
}
.cwv2-shell .ags-flag-soft{ background-color:var(--accent-bg);color:var(--accent);border:1px solid var(--accent-line); }
.cwv2-shell .ags-plan-n{ font:600 13.5px/1.4 var(--cw-font);color:var(--ink-3);margin:0; }
.cwv2-shell .ags-plan-price{ margin:6px 0 0;gap:6px; }
.cwv2-shell .ags-plan-price b{ font:700 32px/1.1 var(--cw-font);letter-spacing:-.02em;color:var(--ink); }
.cwv2-shell .ags-plan-price span{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ags-plan-calc{ font-size:12.5px;color:var(--ink-3);margin:6px 0 0; }
.cwv2-shell .ags-plan-d{ font-size:13.5px;line-height:1.55;color:var(--ink-3);margin:12px 0 0;min-height:0; }
.cwv2-shell .ags-plan-btn{ height:40px;min-height:40px;margin-top:16px;border-radius:9px;font-size:14px;font-weight:600; }
.cwv2-shell .ags-feats{ margin:18px 0 0;padding:16px 0 0;border-top:1px solid var(--border);gap:10px; }
.cwv2-shell .ags-feats li{ padding-left:26px;font-size:13.5px;line-height:18px;color:var(--ink-2); }
.cwv2-shell .ags-feats li::before{ top:0;width:18px;height:18px;background-color:var(--ok-bg); }

/* Under the cards: one muted line and the way to read more. */
.cwv2-shell .ags-foot{ font-size:13px;color:var(--ink-3);margin:24px 0 0;text-align:left; }
.cwv2-shell .ags-link{ color:var(--accent);font-weight:600; }
.cwv2-shell .ags-empty{ font-size:14px;color:var(--ink-3);text-align:left; }

@media (max-width:820px){
  .cwv2-shell .ags-pk{ grid-template-columns:minmax(0,1fr); }
  .cwv2-shell .ags-plan{ position:static; }
}
@media (max-width:720px){
  .cwv2-shell .ags-top{ padding:0 12px; }
  .cwv2-shell .ags-brand img{ height:28px; }
  .cwv2-shell .ags-main{ padding:24px 16px 56px; }
  .cwv2-shell .ags-title{ font-size:22px;line-height:30px; }
}

/* ── Overview: the dashboard's Home, for an agency ────────────────────────── */

/* Five figures in a row on a laptop, wrapping evenly on anything narrower. */
.cwv2-shell .ax-ov .metrics.ax-ov-figs{ grid-template-columns:repeat(auto-fit,minmax(170px,1fr));margin-bottom:20px; }
.cwv2-shell .ax-ov .metric .mf.ok{ color:var(--ok); }
.cwv2-shell .ax-ov .metric .mf.warn{ color:var(--warn); }
.cwv2-shell .ax-ov .metric .mf.bad{ color:var(--bad); }

/* Needs your attention: the design's list, each row led by a tinted icon in
   its tone and carrying its one action. */
.cwv2-shell .ax-ov .attn{ margin:0;padding:0; }
.cwv2-shell .ax-attn-ic{
  flex:0 0 auto;width:32px;height:32px;border-radius:8px;
  display:inline-flex;align-items:center;justify-content:center;
  background-color:var(--mut-bg);color:var(--ink-2);
}
.cwv2-shell .ax-attn-ic.warn{ background-color:var(--warn-bg);color:var(--warn); }
.cwv2-shell .ax-attn-ic.bad{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .ax-attn-ic.info{ background-color:var(--info-bg);color:var(--info); }
.cwv2-shell .ax-attn-p{ display:block;font-size:13px;line-height:1.5;color:var(--ink-3);white-space:normal; }
.cwv2-shell .ax-attn-p strong{ color:var(--ink-2);font-weight:600; }

/* Capacity: the number as the card's largest thing, the split meter under
   it, its legend, one muted note. */
.cwv2-shell .ax-ov-big{ font-size:14px;color:var(--ink-3);margin:0 0 12px; }
.cwv2-shell .ax-ov-big b{ font-size:24px;font-weight:700;letter-spacing:-.02em;color:var(--ink);margin-right:4px; }
.cwv2-shell .ax-ov .ax-meter{ margin:0 0 10px; }
.cwv2-shell .ax-ov-note{ font-size:12.5px;line-height:1.5;color:var(--ink-3);margin-top:10px; }
.cwv2-shell .ax-ov-foot{ margin-top:14px; }

/* Your server: the design's quiet label/value list. */
.cwv2-shell .ax-dl{ display:flex;flex-direction:column; }
.cwv2-shell .ax-dl > div{
  display:grid;grid-template-columns:minmax(96px,40%) minmax(0,1fr);gap:12px;
  padding:9px 0;border-top:1px solid var(--border);
}
.cwv2-shell .ax-dl > div:first-child{ border-top:0;padding-top:0; }
.cwv2-shell .ax-dl dt{ font-size:13.5px;color:var(--ink-3); }
.cwv2-shell .ax-dl dd{ font-size:14px;color:var(--ink);min-width:0;overflow-wrap:anywhere; }

/* Recent activity follows the block with the design's section spacing. */
.cwv2-shell .ax-ov + .ax-sec{ margin-top:36px; }

/* ── Create a website: the dashboard's create flow, as a page ─────────────── */

/* The way back, the steps, then the title — the order the dashboard's
   create flow reads in. */
.cwv2-shell .ax-cf-head{ margin-bottom:24px; }
.cwv2-shell .ax-cf-up{
  display:inline-flex;align-items:center;gap:2px;margin:0 0 14px;padding:0;
  border:0;background:none;cursor:pointer;
  font-size:13px;font-weight:600;color:var(--ink-3);
}
.cwv2-shell .ax-cf-up:hover{ color:var(--ink); }
.cwv2-shell .ax-cf-steps{ margin:0 0 18px; }
.cwv2-shell .ax-cf-t{ margin:0; }

/* The step in a card, its summary beside it. */
.cwv2-shell .ax-cf-grid{
  display:grid;grid-template-columns:minmax(0,1.6fr) minmax(0,1fr);gap:20px;align-items:start;
}
.cwv2-shell .ax-cf-grid.is-single{ grid-template-columns:minmax(0,1fr); }
.cwv2-shell .ax-cf-card{ overflow:visible; }
.cwv2-shell .ax-cf-body{ padding:20px; }
.cwv2-shell .ax-cf-body .ag-step-body{ gap:18px; }
.cwv2-shell .ax-cf-foot{
  display:flex;align-items:center;justify-content:space-between;gap:10px;
  padding:12px 20px;border-top:1px solid var(--border);
}
/* In a page there is room for the gallery to be a gallery: no inner scroll,
   larger cards. */
.cwv2-shell .ax-cf-body .ax-pk-grid{
  max-height:none;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:14px;
}

/* The summary: the chosen design's picture, then the website in words. It
   follows the page down so it stays beside a long gallery. */
.cwv2-shell .ax-cf-side{ position:sticky;top:88px;overflow:hidden; }
.cwv2-shell .ax-cf-shot{
  aspect-ratio:16 / 10;background-color:var(--surface-2);border-bottom:1px solid var(--border);
  display:flex;align-items:center;justify-content:center;overflow:hidden;
}
.cwv2-shell .ax-cf-shot img{ width:100%;height:100%;object-fit:cover;object-position:top center;display:block; }
.cwv2-shell .ax-cf-shot span{
  width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;
  background-color:var(--accent-bg);color:var(--accent);font:700 18px/1 var(--cw-font);
}
.cwv2-shell .ax-cf-sb{ padding:16px 20px 20px; }
.cwv2-shell .ax-cf-k{ font-size:12.5px;font-weight:600;color:var(--ink-3);margin:0; }
.cwv2-shell .ax-cf-n{
  font-size:16px;font-weight:650;color:var(--ink);margin:4px 0 0;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
}
.cwv2-shell .ax-cf-a{ font-size:13px;color:var(--ink-3);margin:2px 0 14px;overflow-wrap:anywhere; }

@media (max-width:1000px){
  .cwv2-shell .ax-cf-grid{ grid-template-columns:minmax(0,1fr); }
  .cwv2-shell .ax-cf-side{ position:static; }
}
@media (max-width:640px){
  .cwv2-shell .ax-cf-steps .ax-cf-sl{ display:none; }
  .cwv2-shell .ax-cf-steps li.now .ax-cf-sl{ display:inline; }
  .cwv2-shell .ax-cf-body{ padding:16px; }
  .cwv2-shell .ax-cf-foot{ padding:12px 16px; }
  .cwv2-shell .ax-cf-body .ax-pk-grid{ grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
}

/* The step's Back / Continue stay on screen: the bar sticks to the foot of
   the window while a long gallery scrolls under it, and settles back into
   the card at its end. The summary beside it carries the same buttons. */
.cwv2-shell .ax-cf-foot{
  position:sticky;bottom:0;z-index:3;background-color:var(--surface);
  border-radius:0 0 12px 12px;
}
.cwv2-shell .ax-cf-sact{ display:flex;flex-direction:column;gap:8px;padding:0 20px 20px; }
.cwv2-shell .ax-cf-sact .cw-btn{ width:100%;height:40px;min-height:40px;font-size:14px; }
/* Below 1000px the summary sits under the step, where its buttons would only
   repeat the bar directly above them. */
@media (max-width:1000px){
  .cwv2-shell .ax-cf-sact{ display:none; }
}

/* What kind of website: two choice cards, side by side. The chosen one takes
   the accent edge and tint; the radio stays the source of truth. */
.cwv2-shell .ax-kpick{ border:0;margin:0;padding:0;min-width:0; }
.cwv2-shell .ax-kpick legend{ padding:0;margin:0 0 8px; }
.cwv2-shell .ax-kopts{ display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:10px; }
.cwv2-shell .ax-kopt{
  display:flex;align-items:flex-start;gap:10px;padding:12px 14px;cursor:pointer;
  border:1px solid var(--border-2);border-radius:10px;background-color:var(--surface);
  transition:border-color .12s ease,background-color .12s ease;
}
.cwv2-shell .ax-kopt:hover{ border-color:var(--ink-4); }
.cwv2-shell .ax-kopt:has(input:checked){ border-color:var(--accent-fill);background-color:var(--accent-bg); }
.cwv2-shell .ax-kopt:focus-within{ outline:2px solid var(--accent-fill);outline-offset:2px; }
.cwv2-shell .ax-kopt input{ margin:3px 0 0;flex:0 0 auto;accent-color:var(--accent-fill); }
.cwv2-shell .ax-kopt-b{ display:flex;flex-direction:column;gap:2px;min-width:0; }
.cwv2-shell .ax-kopt-b b{ font-size:14px;font-weight:600;color:var(--ink); }
.cwv2-shell .ax-kopt-b span{ font-size:12.5px;line-height:1.45;color:var(--ink-3); }
@media (max-width:560px){ .cwv2-shell .ax-kopts{ grid-template-columns:minmax(0,1fr); } }

/* On Review the summary says what happens next, in place of a second list. */
.cwv2-shell .ax-cf-next{
  display:flex;flex-direction:column;gap:4px;padding:12px 14px;border-radius:10px;
  background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2-shell .ax-cf-next b{ font-size:13.5px;font-weight:650;color:var(--ink); }
.cwv2-shell .ax-cf-next span{ font-size:13px;line-height:1.5;color:var(--ink-2); }

/* The address's status line: muted while checking, green when free, red when
   taken or malformed. Words carry the meaning; colour only reinforces it. */
.cwv2-shell .ax-addr-st b{ font-weight:600; }
.cwv2-shell .ax-addr-st.is-checking{ color:var(--ink-3); }
.cwv2-shell .ax-addr-st.is-ok{ color:var(--ok); }
.cwv2-shell .ax-addr-st.is-taken,.cwv2-shell .ax-addr-st.is-bad{ color:var(--bad); }
.cwv2-shell .ax-addr-st.is-unknown{ color:var(--warn); }

/* ── Activity: the dashboard's feed ───────────────────────────────────────── */

/* The time column a little wider than the dashboard's 106px: an agency feed
   reaches back months, so its entries carry a date and a time
   ("4 Oct, 16:30"), not just a time. */
.cwv2-shell .ax-actv .act-feed li,
.cwv2-shell .ax-ov .act-feed li{ grid-template-columns:128px minmax(0,1fr); }
.cwv2-shell .ax-actv .act-card,
.cwv2-shell .ax-ov .act-card{ overflow:hidden; }
.cwv2-shell .ax-actv .act-feed .sk,
.cwv2-shell .ax-ov .act-feed .sk{ display:block; }
@media (max-width:560px){
  .cwv2-shell .ax-actv .act-feed li,
  .cwv2-shell .ax-ov .act-feed li{ grid-template-columns:minmax(0,1fr); }
}

/* ── Clients: the dashboard's list ────────────────────────────────────────── */

/* The name is the row's link: the row's ink, the accent on hover. */
.cwv2-shell .ax-clv .site .nm a{ color:var(--ink); }
.cwv2-shell .ax-clv .site .nm a:hover{ color:var(--accent);text-decoration:none; }
/* An archived client stays listed but steps back. */
.cwv2-shell .ax-clv .ax-thumb-mute{ background-color:var(--surface-2);color:var(--ink-4); }
.cwv2-shell .ax-clv .ax-row-arch .site .nm a{ color:var(--ink-3); }
/* The count beside a section heading is a quiet number. */
.cwv2-shell .ax-clv .ax-cl-n{ font-size:13px;font-weight:600;color:var(--ink-4);margin-left:2px; }
.cwv2-shell .ax-clv .sec-h{ align-items:center; }
/* A login is a person: a round, tinted mark. */
.cwv2-shell .ax-clv .ax-cl-av{
  width:34px;height:34px;font-size:12.5px;background-color:var(--accent-bg);color:var(--accent);
}
.cwv2-shell .ax-clv .idx-tools .search input{ width:220px; }
@media (max-width:640px){
  .cwv2-shell .ax-clv .idx-tabs{ flex-wrap:wrap; }
  .cwv2-shell .ax-clv .idx-tools{ margin-left:0;width:100%; }
  .cwv2-shell .ax-clv .idx-tools .search{ width:100%; }
  .cwv2-shell .ax-clv .idx-tools .search input{ width:100%; }
}

/* ── Support: the dashboard's inbox and ticket thread ─────────────────────── */

/* The back link is a button (it changes the view's own state, not the URL),
   drawn as the design's .up link. */
.cwv2-shell .ax-supv .ph .up{ border:0;background:none;cursor:pointer;font-family:inherit;padding:0; }
.cwv2-shell .ax-supv .ph h1 .badge{ vertical-align:middle;margin-left:4px;font-size:12px; }
.cwv2-shell .ax-supv .idx-tools .search input{ width:220px; }

/* The inbox: a row opens its conversation. */
.cwv2-shell .ax-sup-tbl tr[data-supthread]{ cursor:pointer; }
.cwv2-shell .ax-sup-tbl tr[data-supthread]:hover{ background-color:var(--surface-2); }
.cwv2-shell .ax-sup-tbl tr[data-supthread]:focus-visible{ outline:2px solid var(--accent-fill);outline-offset:-2px; }
.cwv2-shell .ax-sup-tbl .ax-sup-av{
  width:32px;height:32px;flex:0 0 auto;font-size:11.5px;
  background-color:var(--surface-2);color:var(--ink-2);border:1px solid var(--border);
}
.cwv2-shell .ax-sup-tbl tr.unread .ax-sup-av{ background-color:var(--accent-bg);color:var(--accent);border-color:var(--accent-line); }
.cwv2-shell .ax-sup-tbl tr.unread .nm{ font-weight:700; }
.cwv2-shell .ax-sup-tbl .nm .supv2-dot{ display:inline-block;vertical-align:middle;margin:-2px 7px 0 0; }
/* The conversation column takes what the others leave (width:100% with
   max-width:0 is how a table cell is told that), so a long preview ends in an
   ellipsis instead of pushing the table sideways. */
.cwv2-shell .ax-sup-tbl td.full{ width:100%;max-width:0; }
.cwv2-shell .ax-sup-tbl .st{ min-width:0; }
.cwv2-shell .ax-sup-tbl .nm,
.cwv2-shell .ax-sup-tbl .hs{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-sup-tbl td:not(.full){ white-space:nowrap; }
.cwv2-shell .ax-sup-tbl .sk{ display:block; }

/* The thread: the client's bubbles marked in their own colour, as the
   design marks the other party; line breaks kept as they were typed. */
.cwv2-shell .ax-supt .msg .av{ width:30px;height:30px;flex:0 0 auto; }
.cwv2-shell .ax-supt .msg .ax-sup-them{ background-color:var(--ok-fill); }
.cwv2-shell .ax-supt .ax-sup-body{ white-space:pre-wrap; }
.cwv2-shell .ax-supt .ax-sup-msgs > .msg:last-child{ margin-bottom:0; }
.cwv2-shell .ax-supt .ax-sup-msgs .sk,
.cwv2-shell .ax-supt .card-b .sk{ display:block; }
.cwv2-shell .ax-supt .ph h1 .sk{ display:inline-block;vertical-align:middle; }

/* The reply: the box across the card, then the status, the shortcut and
   Send on one line. */
.cwv2-shell .ax-supt .ax-sup-reply{ flex-direction:column;align-items:stretch;gap:10px;padding:14px 20px 16px; }
.cwv2-shell .ax-supt .ax-sup-reply .ta{ min-height:92px; }
.cwv2-shell .ax-supt .ax-sup-foot{ justify-content:flex-end; }
.cwv2-shell .ax-supt .ax-sup-foot .ax-composer-hint{ margin-right:auto;font-size:13px;color:var(--ink-3); }
.cwv2-shell .ax-supt .ax-sup-foot .ax-composer-hint.is-error{ color:var(--bad); }
.cwv2-shell .ax-supt .ax-sup-keys{ font-size:12.5px;color:var(--ink-4); }
.cwv2-shell .ax-supt .ax-sup-foot .is-error ~ .ax-sup-keys{ display:none; }
.cwv2-shell .ax-supt .ax-sup-note{
  font-size:13px;color:var(--ink-2);background-color:var(--surface-2);
  border:1px solid var(--border);border-radius:9px;padding:8px 12px;
}
.cwv2-shell .ax-supt .ax-sup-who{ font-size:13.5px;line-height:1.55;color:var(--ink-2); }
.cwv2-shell .ax-supt .ax-sup-who + .ax-sup-who{ margin-top:8px;color:var(--ink-3); }
@media (max-width:767px){
  .cwv2-shell .ax-supt .ax-sup-keys{ display:none; }
  .cwv2-shell .ax-sup-tbl td.full{ max-width:none; }
  .cwv2-shell .ax-sup-tbl .nm,
  .cwv2-shell .ax-sup-tbl .hs{ white-space:normal; }
}
@media (max-width:640px){
  .cwv2-shell .ax-supv .idx-tabs{ flex-wrap:wrap; }
  .cwv2-shell .ax-supv .idx-tools{ margin-left:0;width:100%; }
  .cwv2-shell .ax-supv .idx-tools .search{ width:100%; }
  .cwv2-shell .ax-supv .idx-tools .search input{ width:100%; }
}

/* ── Settings: the dashboard's settings sections ──────────────────────────── */

.cwv2-shell .ax-setv .sec-h{ align-items:center; }
.cwv2-shell .ax-setv .card .list li{ padding:16px 20px; }
.cwv2-shell .ax-setv .card .list .lt > b{ font-size:15px; }

/* Where clients sign in, and a DNS record: the value, then its Copy. */
.cwv2-shell .ax-setv .dl dd{ display:flex;align-items:center;flex-wrap:wrap;gap:6px 10px;min-width:0; }
.cwv2-shell .ax-setv .dl dd .cw-code{ overflow-wrap:anywhere; }
.cwv2-shell .ax-setv .dl dd .hint{ flex:1 1 100%;margin-top:0; }
.cwv2-shell .ax-setv .ax-set-copy{ height:26px;padding:0 9px;font-size:12.5px; }
.cwv2-shell .ax-setv .ax-set-p{ font-size:14px;line-height:1.55;color:var(--ink-2);margin-top:14px; }
.cwv2-shell .ax-setv .ax-set-p.mut{ color:var(--ink-3); }
.cwv2-shell .ax-setv .ax-set-dns{
  margin-top:12px;padding:14px 16px;border-radius:10px;
  background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2-shell .ax-setv .ax-set-why{
  margin-top:12px;padding:10px 14px;border-radius:9px;font-size:13.5px;line-height:1.55;
  background-color:var(--warn-bg);color:var(--ink-2);
}
.cwv2-shell .ax-setv .ax-set-why p + p{ margin-top:4px; }
.cwv2-shell .ax-setv .ax-set-field{ margin-top:16px;max-width:420px; }
.cwv2-shell .ax-setv .ax-set-owner{ font-size:13px;color:var(--ink-3);margin-right:auto; }

/* Branding: a preview of what clients see, beside the two facts. */
.cwv2-shell .ax-setv .ax-set-brand{ display:flex;align-items:flex-start;gap:24px; }
.cwv2-shell .ax-setv .ax-set-logo{
  flex:0 0 220px;height:88px;display:flex;align-items:center;justify-content:center;padding:12px 16px;
  border-radius:10px;background-color:var(--surface-2);border:1px solid var(--border);
}
.cwv2-shell .ax-setv .ax-set-logo img{ display:block;max-width:100%;max-height:56px;width:auto;height:auto; }
.cwv2-shell .ax-setv .ax-set-logo-name{
  font-size:18px;font-weight:700;color:var(--ink);text-align:center;overflow-wrap:anywhere;line-height:1.25;
}
.cwv2-shell .ax-setv .ax-set-brand .dl{ flex:1 1 auto;min-width:0; }

/* Details: the value, then which screen owns it, on its own line. */
.cwv2-shell .ax-setv .ax-set-facts{ gap:14px 32px; }
.cwv2-shell .ax-setv .ax-set-facts dt{ color:var(--ink-3); }
.cwv2-shell .ax-setv .ax-set-facts dd{ display:block; }
.cwv2-shell .ax-setv .ax-set-facts .ax-set-val{ display:block;font-weight:600;color:var(--ink); }
.cwv2-shell .ax-setv .ax-set-facts .hint{ display:block;margin-top:2px; }

@media (max-width:640px){
  .cwv2-shell .ax-setv .ax-set-brand{ flex-direction:column;gap:14px; }
  .cwv2-shell .ax-setv .ax-set-logo{ flex:0 0 auto;width:100%; }
  .cwv2-shell .ax-setv .ax-set-facts{ grid-template-columns:minmax(0,1fr);gap:2px; }
  .cwv2-shell .ax-setv .ax-set-facts dd{ margin-bottom:12px; }
  .cwv2-shell .ax-setv .card .list li{ flex-wrap:wrap; }
}

/* ── The file editor: a full screen of its own ─────────────────────────────
   files.js mounts #ax-ed on <body> with the .cwv2 class, so the design's
   tokens and buttons apply. The code area carries its own palette: syntax
   colours in light and dark, tuned for reading code rather than UI. */

.cwv2-shell.ax-ed-lock,.cwv2-shell.ax-ed-lock body{ overflow:hidden; }

.cwv2-shell .ax-ed{
  position:fixed;inset:0;z-index:900;display:flex;flex-direction:column;
  background-color:var(--bg);color:var(--ink);font-size:14px;
  --ed-bg:#ffffff;--ed-gutter:#f7f8fa;--ed-num:#a3aab6;--ed-text:#1f2328;
  --ed-line:rgba(91,95,239,.06);--ed-sel:rgba(91,95,239,.22);--ed-caret:#4f46e5;
  --t-tag:#116329;--t-an:#0550ae;--t-av:#0a3069;--t-pu:#6e7781;--t-c:#6e7781;--t-m:#6e7781;
  --t-k:#cf222e;--t-s:#0a3069;--t-n:#0550ae;--t-l:#0550ae;--t-f:#8250df;
  --t-sel:#6639ba;--t-p:#0550ae;--t-v:#1f2328;--t-x:#953800;--t-e:#953800;
}
html[data-theme="dark"] .cwv2-shell .ax-ed{
  --ed-bg:#0e1116;--ed-gutter:#0e1116;--ed-num:#4b5563;--ed-text:#e6edf3;
  --ed-line:rgba(255,255,255,.045);--ed-sel:rgba(129,140,248,.30);--ed-caret:#a5b4fc;
  --t-tag:#7ee787;--t-an:#79c0ff;--t-av:#a5d6ff;--t-pu:#8b949e;--t-c:#8b949e;--t-m:#8b949e;
  --t-k:#ff7b72;--t-s:#a5d6ff;--t-n:#79c0ff;--t-l:#79c0ff;--t-f:#d2a8ff;
  --t-sel:#d2a8ff;--t-p:#79c0ff;--t-v:#e6edf3;--t-x:#ffa657;--t-e:#ffa657;
}

/* The top bar: the way back, which site, and the two things that matter —
   what is unpublished, and Publish. */
.cwv2-shell .ax-ed-top{
  flex:0 0 auto;display:flex;align-items:center;gap:12px;height:58px;padding:0 16px 0 10px;
  background-color:var(--surface);border-bottom:1px solid var(--border);
}
.cwv2-shell .ax-ed-back,.cwv2-shell .ax-ed-sidetg{
  display:inline-flex;align-items:center;gap:4px;height:34px;padding:0 10px 0 6px;border-radius:8px;
  border:0;background:none;color:var(--ink-2);font:inherit;font-size:13.5px;font-weight:600;cursor:pointer;
}
.cwv2-shell .ax-ed-back:hover,.cwv2-shell .ax-ed-sidetg:hover{ background-color:var(--surface-2);color:var(--ink); }
.cwv2-shell .ax-ed-sidetg{ display:none;padding:0 8px; }
.cwv2-shell .ax-ed-id{
  display:flex;flex-direction:column;min-width:0;padding-left:12px;border-left:1px solid var(--border);
}
.cwv2-shell .ax-ed-id b{ font-size:14.5px;font-weight:650;white-space:nowrap;overflow:hidden;text-overflow:ellipsis; }
.cwv2-shell .ax-ed-id > span{ display:flex;gap:8px;font-size:12.5px;color:var(--ink-3);white-space:nowrap;overflow:hidden; }
.cwv2-shell .ax-ed-id > span > span:empty{ display:none; }
.cwv2-shell .ax-ed-id > span > span + span:not(:empty)::before{ content:"·";margin-right:8px;color:var(--ink-4); }
.cwv2-shell .ax-ed-acts{ margin-left:auto;display:flex;align-items:center;gap:8px;flex:0 0 auto; }
.cwv2-shell .ax-ed-acts .btn{ white-space:nowrap; }
.cwv2-shell .ax-ed-acts .btn svg{ margin-right:2px; }
.cwv2-shell .ax-ed-pend{
  display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:999px;
  font-size:12.5px;font-weight:600;background-color:var(--warn-bg);color:var(--warn);
}
.cwv2-shell .ax-ed-pend::before{ content:"";width:6px;height:6px;border-radius:50%;background-color:var(--warn-fill); }
.cwv2-shell .ax-ed-pend[hidden]{ display:none; }

.cwv2-shell .ax-ed-msg{
  flex:0 0 auto;padding:9px 18px;font-size:13.5px;border-bottom:1px solid var(--border);
  background-color:var(--surface-2);color:var(--ink-2);
}
.cwv2-shell .ax-ed-msg.is-bad{ background-color:var(--bad-bg);color:var(--bad); }
.cwv2-shell .ax-ed-msg.is-ok{ background-color:var(--ok-bg);color:var(--ok); }
.cwv2-shell .ax-ed-msg.is-info{ background-color:var(--info-bg);color:var(--info); }
.cwv2-shell .ax-ed-msg[hidden]{ display:none; }

.cwv2-shell .ax-ed-body{ flex:1 1 auto;display:flex;min-height:0;position:relative; }

/* The explorer. */
.cwv2-shell .ax-ed-side{
  flex:0 0 280px;display:flex;flex-direction:column;min-height:0;
  background-color:var(--surface);border-right:1px solid var(--border);
}
.cwv2-shell .ax-ed-side-h{
  display:flex;align-items:center;justify-content:space-between;padding:14px 16px 8px;
  font-size:11.5px;font-weight:700;letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3);
}
.cwv2-shell .ax-ed-side-h .n{ font-weight:600;letter-spacing:0;color:var(--ink-4); }
.cwv2-shell .ax-ed .ax-ed-filter{ margin:0 12px 8px;height:32px; }
.cwv2-shell .ax-ed .ax-ed-filter input{ width:100%;font-size:13px; }
.cwv2-shell .ax-ed-tree{ flex:1 1 auto;overflow:auto;padding:2px 6px 16px; }
.cwv2-shell .ax-ed-row{
  display:flex;align-items:center;gap:7px;width:100%;height:30px;padding-right:8px;border-radius:7px;
  border:0;background:none;font:inherit;font-size:13.5px;color:var(--ink-2);text-align:left;cursor:pointer;
  text-decoration:none;
}
.cwv2-shell .ax-ed-row:hover{ background-color:var(--surface-2);color:var(--ink);text-decoration:none; }
.cwv2-shell .ax-ed-row.is-on{ background-color:var(--accent-bg);color:var(--accent);font-weight:600; }
.cwv2-shell .ax-ed-row .nm{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-ed-row .sz{ flex:0 0 auto;font-size:11.5px;color:var(--ink-4);font-variant-numeric:tabular-nums; }
.cwv2-shell .ax-ed-row .dot,.cwv2-shell .ax-ed-tab .dot{
  flex:0 0 auto;width:7px;height:7px;border-radius:50%;background-color:var(--warn-fill);
}
.cwv2-shell .ax-ed-row.is-locked{ color:var(--ink-3); }
.cwv2-shell .ax-ed-row.is-locked .nm{ color:var(--ink-3); }
.cwv2-shell .ax-ed-row .chev{ display:inline-flex;color:var(--ink-4);transition:transform .12s ease; }
.cwv2-shell .ax-ed-row.is-dir.is-open .chev{ transform:rotate(90deg); }
.cwv2-shell .ax-ed-row.is-dir{ font-weight:500;color:var(--ink); }
.cwv2-shell .ax-ed-fi{ display:inline-flex;flex:0 0 auto; }
.cwv2-shell .ax-ed-fi.k-html{ color:#e4572e; }
.cwv2-shell .ax-ed-fi.k-css{ color:#2965f1; }
.cwv2-shell .ax-ed-fi.k-js{ color:#c99a06; }
.cwv2-shell .ax-ed-fi.k-json{ color:#8250df; }
.cwv2-shell .ax-ed-fi.k-xml{ color:#d97706; }
.cwv2-shell .ax-ed-fi.k-img{ color:#0e9f6e; }
.cwv2-shell .ax-ed-fi.k-dir{ color:#8b93a1; }
.cwv2-shell .ax-ed-fi.k-text,.cwv2-shell .ax-ed-fi.k-font{ color:var(--ink-4); }
.cwv2-shell .ax-ed-none{ padding:12px 10px;font-size:13px;color:var(--ink-3); }
.cwv2-shell .ax-ed-sk{
  display:block;height:12px;margin:12px 10px;border-radius:6px;background-color:var(--surface-2);
  animation:axEdPulse 1.2s ease-in-out infinite;
}
@keyframes axEdPulse{ 50%{ opacity:.45; } }
.cwv2-shell .ax-ed-scrim{ display:none; }

/* The editor column: tabs, the path, the code, the status bar. */
.cwv2-shell .ax-ed-main{ flex:1 1 auto;display:flex;flex-direction:column;min-width:0;background-color:var(--ed-bg); }
.cwv2-shell .ax-ed-tabs{
  flex:0 0 auto;display:flex;align-items:stretch;height:40px;overflow-x:auto;overflow-y:hidden;
  background-color:var(--surface-2);border-bottom:1px solid var(--border);scrollbar-width:thin;
}
.cwv2-shell .ax-ed-tabs:empty{ display:none; }
.cwv2-shell .ax-ed-tab{
  position:relative;display:flex;align-items:center;flex:0 0 auto;max-width:240px;
  border-right:1px solid var(--border);color:var(--ink-3);
}
.cwv2-shell .ax-ed-tab.is-on{ background-color:var(--ed-bg);color:var(--ink); }
.cwv2-shell .ax-ed-tab.is-on::after{
  content:"";position:absolute;left:0;right:0;bottom:-1px;height:1px;background-color:var(--ed-bg);
}
.cwv2-shell .ax-ed-tab.is-on::before{
  content:"";position:absolute;left:0;right:0;top:0;height:2px;background-color:var(--accent-fill);
}
.cwv2-shell .ax-ed-tab .go{
  display:flex;align-items:center;gap:7px;height:100%;padding:0 4px 0 14px;min-width:0;
  border:0;background:none;font:inherit;font-size:13px;color:inherit;cursor:pointer;
}
.cwv2-shell .ax-ed-tab .go span:last-child{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-ed-tab .x{
  display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:6px;
  border:0;border-radius:6px;background:none;color:var(--ink-4);cursor:pointer;flex:0 0 auto;
}
.cwv2-shell .ax-ed-tab .x:hover{ background-color:var(--hover);color:var(--ink); }
.cwv2-shell .ax-ed-tab .x .dot{ display:none; }
.cwv2-shell .ax-ed-tab.is-edited .x .dot{ display:block; }
.cwv2-shell .ax-ed-tab.is-edited .x svg{ display:none; }
.cwv2-shell .ax-ed-tab.is-edited .x:hover .dot{ display:none; }
.cwv2-shell .ax-ed-tab.is-edited .x:hover svg{ display:block; }

.cwv2-shell .ax-ed-crumb{
  flex:0 0 auto;display:flex;align-items:center;gap:10px;min-height:38px;padding:0 10px 0 18px;
  border-bottom:1px solid var(--border);background-color:var(--ed-bg);font-size:12.5px;color:var(--ink-3);
}
.cwv2-shell .ax-ed-crumb[hidden]{ display:none; }
.cwv2-shell .ax-ed-crumb .path{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-ed-crumb .path b{ color:var(--ink);font-weight:600; }
.cwv2-shell .ax-ed-crumb .sep{ margin:0 5px;color:var(--ink-4); }
.cwv2-shell .ax-ed-crumb .acts{ display:flex;gap:4px;flex:0 0 auto; }
.cwv2-shell .ax-ed-crumb .btn{ height:28px;font-size:12.5px;gap:5px; }

.cwv2-shell .ax-ed-stage{ flex:1 1 auto;position:relative;min-height:0;display:flex; }
.cwv2-shell .ax-ed-empty,.cwv2-shell .ax-ed-loading{ flex:1 1 auto;display:flex;align-items:center;justify-content:center;padding:24px; }
.cwv2-shell .ax-ed-empty[hidden],.cwv2-shell .ax-ed-loading[hidden],.cwv2-shell .ax-ed-code[hidden]{ display:none; }
.cwv2-shell .ax-ed-empty-in{ max-width:560px;text-align:center; }
.cwv2-shell .ax-ed-empty-in .ic{
  display:inline-flex;align-items:center;justify-content:center;width:52px;height:52px;margin-bottom:14px;
  border-radius:14px;background-color:var(--accent-bg);color:var(--accent);
}
.cwv2-shell .ax-ed-empty-in h2{ font-size:18px;font-weight:650; }
.cwv2-shell .ax-ed-empty-in p{ margin-top:6px;color:var(--ink-3);line-height:1.55; }
.cwv2-shell .ax-ed-pages{ display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:8px;margin-top:20px;text-align:left; }
.cwv2-shell .ax-ed-page{
  display:flex;align-items:center;gap:8px;padding:10px 12px;border-radius:9px;min-width:0;
  border:1px solid var(--border);background-color:var(--surface);font:inherit;font-size:13.5px;color:var(--ink);cursor:pointer;text-align:left;
}
.cwv2-shell .ax-ed-page:hover{ border-color:var(--accent-line);background-color:var(--accent-bg); }
.cwv2-shell .ax-ed-page span{ flex:1 1 auto;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.cwv2-shell .ax-ed-page small{ color:var(--ink-4);font-size:11.5px; }
.cwv2-shell .ax-ed-loading{ gap:10px;color:var(--ink-3);font-size:13.5px; }
.cwv2-shell .ax-ed-loading .spin{
  width:16px;height:16px;border-radius:50%;border:2px solid var(--border-2);border-top-color:var(--accent-fill);
  animation:axEdSpin .8s linear infinite;
}
@keyframes axEdSpin{ to{ transform:rotate(360deg); } }

/* THE CODE. The textarea and the coloured <pre> under it must lay text out
   identically — same font, size, line height, padding, tab width, and no
   wrapping — or the caret drifts away from the letters. */
.cwv2-shell .ax-ed-code{ flex:1 1 auto;display:flex;min-width:0;min-height:0;background-color:var(--ed-bg); }
.cwv2-shell .ax-ed-gutter{
  flex:0 0 auto;min-width:56px;overflow:hidden;position:relative;
  background-color:var(--ed-gutter);border-right:1px solid var(--border);
}
.cwv2-shell .ax-ed-gutter pre,
.cwv2-shell .ax-ed-hl,
.cwv2-shell .ax-ed .ax-ed-ta{
  font-family:ui-monospace,"JetBrains Mono","SFMono-Regular","Cascadia Code",Menlo,Consolas,"Liberation Mono",monospace;
  font-size:13px;line-height:20px;tab-size:2;-moz-tab-size:2;font-variant-ligatures:none;
  letter-spacing:0;word-spacing:0;white-space:pre;overflow-wrap:normal;word-break:normal;
}
.cwv2-shell .ax-ed-gutter pre{
  margin:0;padding:14px 12px 14px 14px;text-align:right;color:var(--ed-num);user-select:none;will-change:transform;
}
.cwv2-shell .ax-ed-area{ position:relative;flex:1 1 auto;min-width:0;overflow:hidden; }
.cwv2-shell .ax-ed-line{
  position:absolute;left:0;right:0;top:0;height:20px;background-color:var(--ed-line);pointer-events:none;will-change:transform;
}
.cwv2-shell .ax-ed-hl{
  position:absolute;inset:0;margin:0;padding:0;overflow:hidden;pointer-events:none;color:var(--ed-text);background:none;
}
.cwv2-shell .ax-ed-hl code{
  display:block;min-width:max-content;padding:14px 48px 14px 18px;font:inherit;background:none;color:inherit;will-change:transform;
}
.cwv2-shell .ax-ed .ax-ed-ta,
.cwv2-shell .ax-ed .ax-ed-ta:focus{
  position:absolute;inset:0;width:100%;height:100%;margin:0;padding:14px 48px 14px 18px;
  border:0;border-radius:0;outline:none;box-shadow:none;resize:none;overflow:auto;
  background:transparent;color:transparent;-webkit-text-fill-color:transparent;caret-color:var(--ed-caret);
}
.cwv2-shell .ax-ed .ax-ed-ta::selection{ background-color:var(--ed-sel);-webkit-text-fill-color:transparent; }

.cwv2-shell .ax-ed-hl .t-tag{ color:var(--t-tag); }
.cwv2-shell .ax-ed-hl .t-an{ color:var(--t-an); }
.cwv2-shell .ax-ed-hl .t-av{ color:var(--t-av); }
.cwv2-shell .ax-ed-hl .t-pu{ color:var(--t-pu); }
.cwv2-shell .ax-ed-hl .t-c{ color:var(--t-c);font-style:italic; }
.cwv2-shell .ax-ed-hl .t-m{ color:var(--t-m); }
.cwv2-shell .ax-ed-hl .t-k{ color:var(--t-k); }
.cwv2-shell .ax-ed-hl .t-s{ color:var(--t-s); }
.cwv2-shell .ax-ed-hl .t-n{ color:var(--t-n); }
.cwv2-shell .ax-ed-hl .t-l{ color:var(--t-l); }
.cwv2-shell .ax-ed-hl .t-f{ color:var(--t-f); }
.cwv2-shell .ax-ed-hl .t-sel{ color:var(--t-sel); }
.cwv2-shell .ax-ed-hl .t-p{ color:var(--t-p); }
.cwv2-shell .ax-ed-hl .t-v{ color:var(--t-v); }
.cwv2-shell .ax-ed-hl .t-x{ color:var(--t-x); }
.cwv2-shell .ax-ed-hl .t-e{ color:var(--t-e); }

/* The status bar. */
.cwv2-shell .ax-ed-status{
  flex:0 0 auto;display:flex;align-items:center;gap:16px;height:28px;padding:0 16px;
  font-size:12px;color:var(--ink-3);background-color:var(--surface);border-top:1px solid var(--border);
  white-space:nowrap;overflow:hidden;font-variant-numeric:tabular-nums;
}
.cwv2-shell .ax-ed-status .r{ margin-left:auto; }
.cwv2-shell .ax-ed-status .warn{ color:var(--warn); }
.cwv2-shell .ax-ed-status .ed{ color:var(--warn);font-weight:600; }

/* Narrow screens: the explorer becomes a drawer over the code. */
@media (max-width:900px){
  .cwv2-shell .ax-ed-sidetg{ display:inline-flex; }
  .cwv2-shell .ax-ed-back span{ display:none; }
  .cwv2-shell .ax-ed-side{
    position:absolute;top:0;bottom:0;left:0;z-index:3;width:min(300px,86vw);
    transform:translateX(-102%);transition:transform .18s ease;box-shadow:var(--e3);
  }
  .cwv2-shell .ax-ed.side-open .ax-ed-side{ transform:none; }
  .cwv2-shell .ax-ed.side-open .ax-ed-scrim{ display:block;position:absolute;inset:0;z-index:2;background-color:var(--scrim); }
  .cwv2-shell .ax-ed-status span:not(.r):not(:first-child){ display:none; }
}
@media (max-width:640px){
  .cwv2-shell .ax-ed-top{ gap:8px;padding:0 10px 0 6px; }
  .cwv2-shell .ax-ed-id{ padding-left:8px; }
  .cwv2-shell .ax-ed-acts .btn:not(.pri){ display:none; }
  .cwv2-shell .ax-ed-pend{ display:none; }
  .cwv2-shell .ax-ed-crumb .acts .btn{ font-size:0;gap:0;width:30px;padding:0;justify-content:center; }
}

/* ── Screens (CWPortalV2.screen): the agency's own content inside them ── */
.cwv2-shell .cwv2-screen .ax-up-drop{ padding:36px 20px; }
.cwv2-shell .ax-up-drop.is-over{ border-color:var(--accent-fill);background-color:var(--accent-bg); }
.cwv2-shell .ax-pub-steps{ list-style:none;margin:6px 0 0;padding:0;display:grid;gap:10px; }
.cwv2-shell .ax-pub-steps li{
  position:relative;margin:0;padding-left:26px;font-size:13.5px;line-height:1.55;color:var(--ink-3);
}
.cwv2-shell .ax-pub-steps li::before{
  content:"";position:absolute;left:4px;top:5px;width:12px;height:12px;border-radius:50%;
  background-color:var(--ok-bg);box-shadow:inset 0 0 0 3px var(--ok-fill);
}
.cwv2-shell .ax-pub-steps b{ color:var(--ink);font-weight:600; }

/* Inside the create page's .cwv2 block the design's reset zeroes the drop
   zone's own padding and spacing; given back here. */
.cwv2-shell .cwv2 .ax-bundle-drop{ display:flex;flex-direction:column;align-items:center;gap:6px;margin-top:12px;padding:28px 20px;border:1px dashed var(--border-2);text-align:center;cursor:pointer; }