/* ============================================================================
   Cloud layer — login, entity dashboard, sharing, floating bar.
   Uses the BUILDER's own design tokens (:root vars from app.css, which loads
   first) so it matches the app exactly and follows the active theme.
   ========================================================================== */
:root {
  --accent-brd: var(--color-linestrong);
  --cns-scrim: rgba(6,10,18,.8);
}
:root[data-mode="light"] {
  --accent-brd: var(--color-linestrong);
  --cns-scrim: rgba(0,0,0,.52);
}

#cloudRoot, #cloudRoot * { box-sizing: border-box; }

.cloud-screen {
  position: fixed; inset: 0; z-index: 4000;
  display: flex; align-items: flex-start; justify-content: center;
  padding: 44px 24px; overflow: auto;
  background:
    radial-gradient(120% 90% at 50% -10%, var(--accent-muted) 0%, rgba(0,0,0,0) 55%),
    var(--bg);
  font-family: var(--font-body);
  color: var(--text);
  letter-spacing: .01em;
}
.cloud-screen.center { align-items: center; }
/* Build/version stamp on the dashboard — sits right-aligned on the search row,
   opposite the search input (muted, never wraps). */
.cloud-version { margin-left: auto; flex: none; white-space: nowrap; font-size:12px; letter-spacing: .04em; color: var(--muted2); }

.cloud-card {
  width: 100%; max-width: 416px;
  background: var(--paper2);
  border-radius: var(--radius-lg);
  padding: 30px 28px;
}
.cloud-card.wide { max-width: 860px; }

/* AXD Intelligence suite signature — a faint footer lockup at the bottom of the dashboard
   card. Low-key on purpose: it signs the product, it does not co-brand the header. */
.cloud-axdi-sig { margin-top: 40px; padding-top: 22px; border-top: 1px solid var(--line); display: flex; flex-direction: column; align-items: center; gap: 9px; }
.cloud-axdi-cap { font-size:11px; font-weight: var(--fw-control); letter-spacing: .13em; text-transform: uppercase; color: var(--muted2); }
.cloud-axdi-lockup { height: 30px; width: auto; opacity: .5; }
.cloud-axdi-lockup-light { display: none; }
:root[data-mode="light"] .cloud-axdi-lockup { display: none; }
:root[data-mode="light"] .cloud-axdi-lockup-light { display: block; opacity: .55; }

.cloud-brand { display: flex; align-items: center; gap: 11px; color: var(--text-strong); }
.cloud-brand.lg { flex-direction: column; gap: 13px; align-items: center; text-align: center; margin-bottom: 2px; }
.cloud-logo-mark { height: 26px; width: auto; flex: none; display: block; }
.cloud-brand.lg .cloud-logo-mark { height: 54px; width: auto; }
.cloud-wordmark { font-size: var(--fs-body-lg); color: var(--text-strong); letter-spacing: .02em; font-weight: 400; white-space: nowrap; }
.cloud-wordmark b { font-weight: 700; }
.cloud-brand.lg .cloud-wordmark { font-size:16px; }

.cloud-sub { color: var(--muted); font-size: var(--fs-meta); margin: 10px 0 22px; line-height: 1.5; }
.cloud-sub.center { text-align: center; }

.cloud-field { margin-bottom: 14px; }
.cloud-field label { display: block; font-size: var(--fs-label-sm); color: var(--muted); margin-bottom: 6px; font-weight: var(--fw-control); }
.cloud-field input, .cloud-field select {
  width: 100%; padding: 12px 14px;
  border: 1px solid var(--line2); border-radius: var(--radius-sm);
  background: var(--paper3); color: var(--text);
  font-size: var(--fs-body); font-weight: var(--fw-body); font-family: inherit;
}
.cloud-field input::placeholder { color: var(--muted2); }
.cloud-field input:focus, .cloud-field select:focus { outline: none; border-color: var(--accent-strong); background: var(--surface-dark); box-shadow: 0 0 0 3px var(--accent-muted); }

/* buttons mirror the app's .btn */
.cloud-btn {
  padding: 9px 15px; min-height: 42px;
  border: 1px solid var(--primary); border-radius: var(--radius-control);
  background: var(--primary); color: var(--color-onprimary);
  font-size: 14px; font-weight: var(--fw-control); font-family: inherit;
  letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  transition: background .15s ease, border-color .15s ease;
}
.cloud-btn.block { width: 100%; }
.cloud-btn:hover { background: color-mix(in srgb, var(--color-primary) 92%, var(--color-onprimary)); border-color: color-mix(in srgb, var(--color-primary) 92%, var(--color-onprimary)); }
.cloud-btn:active { transform: translateY(1px); }
.cloud-btn:disabled { opacity: .55; cursor: default; }
.cloud-btn.ghost { background: transparent; border-color: var(--line2); color: var(--text-soft); }
.cloud-btn.ghost:hover { background: rgba(255,255,255,.05); border-color: rgba(255,255,255,.38); color: #fff; }
.cloud-btn.sm { min-height: 32px; padding: 0 12px; font-size: var(--fs-label-sm); }
.cloud-btn.danger { background: transparent; border-color: rgba(180,35,24,.62); color: #F1C4C0; }
.cloud-btn.danger:hover { background: rgba(180,35,24,.16); border-color: rgba(180,35,24,.85); }
.cloud-btn.google { background: var(--paper3); color: var(--text-soft); border-color: var(--line2); }
.cloud-btn.google:hover { background: var(--color-hover); border-color: rgba(255,255,255,.38); }

.cloud-or { display: flex; align-items: center; gap: 12px; color: var(--muted2); font-size: var(--fs-label-sm); margin: 16px 0 8px; }
.cloud-or::before, .cloud-or::after { content: ''; flex: 1; height: 1px; background: var(--line); }

.cloud-toggle { margin-top: 18px; text-align: center; font-size: var(--fs-meta); color: var(--muted); }
.cloud-toggle button { background: none; border: none; color: var(--text-soft); cursor: pointer; font-size: var(--fs-meta); font-family: inherit; font-weight: var(--fw-control); padding: 0 2px; }
.cloud-toggle button:hover { text-decoration: underline; }

.cloud-msg { margin-top: 14px; font-size: var(--fs-meta); line-height: 1.5; padding: 10px 12px; border-radius: var(--radius-sm); }
.cloud-msg.err  { background: rgba(180,35,24,.14); border: 1px solid rgba(180,35,24,.5); color: #F1C4C0; }
.cloud-msg.ok   { background: rgba(70,185,138,.14); border: 1px solid rgba(70,185,138,.45); color: #A9E2C4; }
.cloud-msg.info { background: var(--accent-muted); border: 1px solid var(--accent); color: var(--text-soft); }

/* ---------- dashboard ---------- */
.cloud-dash-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.cloud-dash-head .who { font-size: var(--fs-meta); color: var(--muted); display: flex; align-items: center; gap: 10px; }
.cloud-dash-head .who button { background: transparent; border: 1px solid var(--line2); color: var(--text-soft); border-radius: var(--radius-sm); padding: 7px 12px; font-size: var(--fs-label-sm); font-weight: var(--fw-control); cursor: pointer; font-family: inherit; white-space: nowrap; display: inline-flex; align-items: center; }
.cloud-dash-head .who button:hover { border-color: rgba(255,255,255,.38); background: rgba(255,255,255,.05); color: #fff; }

.cloud-section-title { display: flex; align-items: center; justify-content: space-between; margin: 26px 0 12px; }
.cloud-section-title h2 { font-size: var(--fs-label-sm); font-weight: 600; color: var(--muted); letter-spacing: .09em; text-transform: uppercase; margin: 0; }

.cloud-entity { border-radius: var(--radius-md); background: var(--paper2); margin-bottom: 12px; overflow: hidden; }
.cloud-entity-head { display: flex; align-items: center; gap: 12px; padding: 14px 16px; cursor: pointer; }
.cloud-entity-head:hover { background: var(--paper3); }
.cloud-entity-head .caret { color: var(--muted2); transition: transform .15s ease; flex: none; }
.cloud-entity.open .cloud-entity-head .caret { transform: rotate(90deg); }
.cloud-entity-head .ent-name { font-size: var(--fs-body); font-weight: 600; flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-strong); }
.cloud-entity-head .ent-count { font-size: var(--fs-label-sm); color: var(--muted2); flex: none; min-width: 54px; text-align: right; }
.cloud-badge { font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: var(--radius-chip); flex: none; letter-spacing: .02em; }
/* access levels are app-fixed roles (not statuses) -> monochrome (D3) */
.cloud-badge.owner  { background: var(--color-surface2); color: var(--color-ink); border: 1px solid var(--color-linestrong); }
.cloud-badge.editor { background: var(--color-control); color: var(--color-muted); border: 1px solid var(--color-line); }
.cloud-badge.viewer { background: var(--color-control); color: var(--color-faint); border: 1px solid var(--color-line); }

.cloud-entity-body { display: none; padding: 4px 12px 14px; }
.cloud-entity.open .cloud-entity-body { display: block; }
.cloud-entity-actions { display: flex; flex-wrap: wrap; gap: 8px; padding: 6px 4px 12px; }

.cloud-sop { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 13px; background: var(--paper); border-radius: var(--radius-sm); margin-bottom: 7px; cursor: pointer; transition: border-color .15s ease, background .15s ease; }
.cloud-sop:hover { border-color: var(--accent-strong); background: var(--surface-dark); }
.cloud-sop .meta { min-width: 0; }
.cloud-sop .title { font-size: var(--fs-meta); font-weight: 600; color: var(--text-soft); display: flex; align-items: center; gap: 7px; min-width: 0; }
.cloud-sop .title .t-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; }
/* Content-version tag, right beside the SOP title — see which version each SOP is before opening it
   (there can be several SOPs per entity). flex:none so it never shrinks or clips when the title is long. */
.cloud-sop .cloud-sop-ver { flex: none; font-size:11px; font-weight: 600; letter-spacing: .03em; padding: 2px 8px; border-radius: var(--radius-chip); background: var(--surface-dark, rgba(255,255,255,.06)); color: var(--text-soft); border: 1px solid var(--line); white-space: nowrap; }
.cloud-sop .sub { font-size:12px; color: var(--muted2); margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.cloud-sop .row-actions { display: flex; gap: 6px; flex: none; }
.cloud-sop .row-actions button { background: transparent; border: 1px solid var(--line2); color: var(--muted); border-radius: var(--radius-sm); padding: 5px 9px; font-size:12px; cursor: pointer; font-family: inherit; }
.cloud-sop .row-actions button:hover { border-color: rgba(255,255,255,.38); color: #fff; }
.cloud-sop .row-actions button.del:hover { border-color: rgba(180,35,24,.85); color: #F1C4C0; }
.cloud-sop .meta { flex: 1; }

.cloud-compare-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  margin: 0 4px 10px;
  padding: 10px 12px;
  background: var(--accent-muted);
  border: 1px solid var(--accent);
  border-radius: var(--radius-sm);
}
.cloud-compare-status {
  min-width: 0;
  color: var(--text-soft);
  font-size: var(--fs-label-sm);
  line-height: 1.35;
}
.cloud-compare-actions {
  flex: none;
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
}
.cloud-compare-check {
  display: none;
  flex: none;
  width: 18px;
  height: 18px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  background: var(--paper3);
  position: relative;
}
.cloud-entity.compare-mode .cloud-compare-check { display: inline-flex; }
.cloud-entity.compare-mode .cloud-sop { cursor: pointer; }
.cloud-entity.compare-mode .cloud-sop.compare-selected {
  border-color: var(--accent-strong);
  background: var(--accent-muted);
}
.cloud-sop.compare-selected .cloud-compare-check {
  background: var(--primary);
  border-color: var(--primary);
}
.cloud-sop.compare-selected .cloud-compare-check::after {
  content: '';
  position: absolute;
  left: 4px;
  top: 4px;
  width: 8px;
  height: 5px;
  border-left: 2px solid #fff;
  border-bottom: 2px solid #fff;
  transform: rotate(-45deg);
}

/* reorder controls — minimal up/down chevrons, revealed on hover */
.cloud-move-group { flex: none; display: inline-flex; gap: 1px; margin-left: 4px; opacity: 0; transition: opacity .14s ease; }
.cloud-entity-head:hover .cloud-move-group, .cloud-sop:hover .cloud-move-group,
.cloud-move-group:focus-within { opacity: 1; }
.cloud-move { width: 22px; height: 22px; display: inline-flex; align-items: center; justify-content: center; padding: 0; border: 0; background: transparent; color: var(--muted2); border-radius: var(--radius-sm); cursor: pointer; font-family: inherit; }
.cloud-move:hover:not(:disabled) { background: rgba(255,255,255,.08); color: var(--text); }
.cloud-move:disabled { opacity: .28; cursor: default; }
.cloud-move svg { display: block; }
/* touch devices have no hover — keep the controls visible but quiet */
@media (hover: none) { .cloud-move-group { opacity: .6; } }

.cloud-empty { color: var(--muted2); font-size: var(--fs-meta); padding: 10px 6px; line-height: 1.6; }
.cloud-empty.big { text-align: center; padding: 26px 10px; }

.cloud-spinner { width: 28px; height: 28px; margin: 30px auto; border-radius: 50%; border: 3px solid var(--line2); border-top-color: var(--text-soft); animation: cloudspin .8s linear infinite; }
@keyframes cloudspin { to { transform: rotate(360deg); } }

/* ---------- modal ---------- */
.cloud-modal-back { position: fixed; inset: 0; z-index: 4200; background: rgba(0,0,0,.62); display: flex; align-items: center; justify-content: center; padding: 24px; }
.cloud-modal { width: 100%; max-width: 460px; background: var(--paper2); border: 1px solid var(--line); border-radius: var(--radius-lg); padding: 24px; max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px); overflow-y: auto; }
/* Many users: the admin modal is a flex column so the header + Done stay pinned and only the
   user list scrolls — keeps everything reachable even on short / mobile screens. */
.cloud-modal.wide { display: flex; flex-direction: column; }
.cloud-modal.wide > * { flex: none; }
#adminScroll { flex: 1 1 auto; min-height: 0; overflow-y: auto; margin-right: -6px; padding-right: 6px; }
.cloud-modal h3 { margin: 0 0 4px; font-size: var(--fs-body-lg); font-weight: 600; color: var(--text-strong); }
.cloud-modal .hint { color: var(--muted); font-size: var(--fs-meta); margin: 0 0 16px; line-height: 1.5; }
.cloud-modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 18px; }

.cloud-share-section { margin-top: 16px; min-width: 0; }
.cloud-share-section:first-of-type { margin-top: 4px; }
.cloud-share-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 0 0 8px; }
.cloud-share-head h4 { margin: 0; font-size: var(--fs-label-sm); font-weight: 700; color: var(--muted); text-transform: uppercase; letter-spacing: .08em; }
.cloud-share-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 9px 11px; background: var(--paper); border-radius: var(--radius-sm); margin-bottom: 7px; }
.cloud-share-row .em { font-size: var(--fs-meta); min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--text-soft); }
.cloud-share-row .ctl { display: flex; gap: 7px; align-items: center; flex: none; }
.cloud-share-row select, .cloud-add-row select { background: var(--paper3); border: 1px solid var(--line2); color: var(--text); border-radius: var(--radius-sm); padding: 7px 8px; font-size: var(--fs-label-sm); font-family: inherit; }
.cloud-add-row { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; min-width: 0; }
.cloud-add-row input { flex: 1 1 180px; min-width: 0; padding: 10px 12px; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--paper3); color: var(--text); font-size: var(--fs-meta); font-family: inherit; }
.cloud-add-row select { flex: 0 0 auto; min-width: 96px; }
.cloud-add-row .cloud-share-group-select { flex: 1 1 180px; min-width: 0; }
.cloud-add-row input::placeholder { color: var(--muted2); }
.cloud-add-row input:focus { outline: none; border-color: var(--accent-strong); background: var(--surface-dark); }

@media (max-width: 560px) {
  .cloud-share-row { flex-wrap: wrap; align-items: flex-start; }
  .cloud-share-row .em { flex: 1 1 100%; }
  .cloud-share-row .ctl { margin-left: auto; flex-wrap: wrap; justify-content: flex-end; }
  .cloud-add-row { flex-direction: column; }
  .cloud-add-row input, .cloud-add-row select, .cloud-add-row .cloud-btn { width: 100%; flex-basis: auto; }
}

/* ---------- approval / pending screen ---------- */
.cloud-pending { text-align: center; margin-top: 18px; }
.cloud-pending-icon { font-size: 40px; line-height: 1; margin-bottom: 12px; }
.cloud-pending h2 { font-size: var(--fs-body-lg); font-weight: 600; color: var(--text-strong); margin: 0 0 4px; }
.cloud-pending .cloud-sub { margin: 10px 0 16px; }
.cloud-pending-who { font-size: var(--fs-label-sm); color: var(--muted2); margin: 0 0 18px; }
.cloud-pending.rejected .cloud-pending-icon { filter: grayscale(.2); }

/* ---------- admin: manage users ---------- */
.cloud-dash-head .who button.admin-link { border-color: var(--accent); color: var(--color-muted); }
.cloud-dash-head .who button.admin-link:hover { background: var(--color-hover); border-color: var(--color-linestrong); color: var(--color-ink); }
.cloud-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 5px; border-radius: var(--radius-chip); background: var(--color-danger); color: #fff; font-size: 11px; font-weight: 700; }
.cloud-badge.pending { background: color-mix(in srgb, var(--mark-warn) 16%, transparent); color: var(--mark-warn); }
.cloud-badge.danger { background: color-mix(in srgb, var(--error) 14%, transparent); color: var(--error); }

/* Shared dashboard search and share-modal group preview. */
.cloud-search { flex: 1 1 160px; min-width: 120px; max-width: 260px; padding: 6px 10px; border: 1px solid var(--line2); border-radius: var(--radius-sm); background: var(--paper3); color: var(--text); font-size: var(--fs-label-sm); font-family: inherit; }
.cloud-search::placeholder { color: var(--muted2); }
.cloud-search:focus { outline: 2px solid var(--accent-brd); outline-offset: 2px; border-color: var(--accent-strong); background: var(--surface-dark); }
.cloud-dash-search { margin: 26px 0 18px; display: flex; align-items: center; gap: 12px; }
.cloud-dash-search .cloud-search { flex: 0 1 360px; min-width: 0; padding: 9px 13px; font-size: var(--fs-meta); }
.cloud-share-members-preview { margin: 9px 0 2px; padding: 9px 11px; border-radius: var(--radius-sm); background: var(--paper); }
.cloud-share-members-h { margin-bottom: 6px; color: var(--muted2); font-size: var(--fs-label-sm); font-weight: var(--fw-control); }
.cloud-share-members-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cloud-member-chip { padding: 3px 9px; border: 1px solid var(--line2); border-radius: var(--radius-chip); background: var(--paper3); color: var(--text-soft); font-size: var(--fs-label-sm); white-space: nowrap; }

/* Per-SOP activity remains a small modal, but no longer depends on retired admin-history styles. */
.cloud-activity-list { max-height: 300px; overflow: auto; margin: 4px 0 8px; padding: 10px 12px; border-radius: var(--radius-sm); background: var(--paper); }
.cloud-activity-row { display: flex; flex-wrap: wrap; align-items: baseline; gap: 6px 9px; padding: 7px 0; border-top: 1px solid var(--line); font-size: var(--fs-label-sm); }
.cloud-activity-row:first-child { border-top: 0; }
.cloud-activity-who { color: var(--text); font-weight: 600; }
.cloud-activity-detail { color: var(--muted2); }
.cloud-activity-when { margin-left: auto; color: var(--muted2); white-space: nowrap; }

/* ---------- compact users & access overlay ---------- */
html.cns-open { overflow: hidden; }
.cns-overlay, .cns-overlay * { box-sizing: border-box; }
.cns-overlay {
  position: fixed;
  inset: 0;
  z-index: 4600;
  display: grid;
  place-items: center;
  min-width: 0;
  min-height: 0;
  padding: 14px;
  background: var(--cns-scrim);
  color: var(--text);
  font-family: var(--font-body);
  font-size: var(--fs-body);
}
.cns-win {
  position: relative;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: min(1440px, 97vw);
  height: min(97vh, 1200px);
  max-height: 97vh;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  border: 1px solid var(--line2);
  border-radius: var(--radius-lg);
  background: var(--paper);
  box-shadow: var(--shadow-float);
}
.cns-overlay button,
.cns-overlay input,
.cns-overlay select { font: inherit; }
.cns-overlay button { color: inherit; }
.cns-overlay button:focus-visible,
.cns-overlay input:focus-visible,
.cns-overlay select:focus-visible,
.cns-overlay summary:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cns-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
}
.cns-spacer { flex: 1 1 auto; min-width: 0; }

/* Header */
.cns-head {
  display: flex;
  flex: none;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 18px 20px 12px;
}
.cns-title {
  min-width: 0;
  margin: 0;
  color: var(--text);
  font-size: var(--fs-title);
  font-weight: var(--fw-display);
  line-height: 1.15;
}
.cns-help-wrap { position: relative; flex: none; }
/* The help BUTTON is a small round "?" — it must NOT inherit the popover's box. */
.cns-help {
  display: inline-grid;
  place-items: center;
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.cns-help:hover { background: var(--paper2); color: var(--text); }
/* Only the POPOVER gets the floating box. */
.cns-help-pop {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 8;
  width: min(440px, calc(100vw - 48px));
  padding: 12px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--paper2);
  color: var(--text-soft);
  font-size: var(--fs-meta);
  line-height: 1.5;
  box-shadow: var(--shadow-float);
}

/* Tabs */
.cns-tabs {
  display: flex;
  flex: none;
  gap: 2px;
  min-width: 0;
  padding: 0 10px;
  overflow: hidden;
  border-bottom: 1px solid var(--line);
}
.cns-tab {
  flex: none;
  min-height: 42px;
  margin-bottom: -1px;
  padding: 9px 10px 10px;
  border: 0;
  border-bottom: 2px solid transparent;
  background: transparent;
  color: var(--text-soft);
  white-space: nowrap;
  cursor: pointer;
}
.cns-tab:hover { color: var(--text); }
/* Active = colour + accent underline only. Do NOT change font-weight — a heavier
   active label reflows and nudges the sibling tabs on every switch. */
.cns-tab.active,
.cns-tab[aria-selected="true"] {
  border-bottom-color: var(--accent);
  color: var(--text);
}

/* Scroll region and notices */
.cns-content {
  flex: 1 1 auto;
  width: 100%;
  min-width: 0;
  min-height: 0;
  padding: 14px 20px 28px;
  overflow-x: hidden;
  overflow-y: auto;
  overscroll-behavior: contain;
}

/* Read-only analytics band: part of the content scroll, above each route's controls. */
.cns-board {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px;
  min-width: 0;
  margin: -14px -20px 14px;
  padding: 14px 20px 16px;
  border-bottom: 1px solid var(--line);
  background: var(--paper2);
  font-variant-numeric: tabular-nums;
}
.cns-board-groups,
.cns-board-usage {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}
.cns-acard {
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
  min-height: 96px;
  padding: 12px 13px;
  border-radius: 14px;
  background: var(--paper);
  box-shadow: none;
  overflow: hidden;
}
.cns-acard-wide { grid-column: span 2; }
.cns-acard-k {
  color: var(--muted2);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
  letter-spacing: .08em;
  line-height: 1.2;
  text-transform: uppercase;
}
.cns-acard-sub,
.cns-stat-sub {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-label-sm);
  line-height: 1.35;
  overflow-wrap: anywhere;
}
.cns-stat-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}
.cns-stat-value {
  min-width: 0;
  color: var(--text);
  font-size: var(--fs-title);
  font-weight: var(--fw-control);
  letter-spacing: -.02em;
  line-height: 1;
  overflow-wrap: anywhere;
}
.cns-acard-feature .cns-stat-value {
  font-size: var(--fs-body-lg);
  letter-spacing: 0;
  line-height: 1.2;
}
.cns-stat-delta {
  flex: none;
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
  white-space: nowrap;
}
.cns-stat-delta.up { color: var(--mark-ok); }
.cns-stat-delta.down { color: var(--mark-err); }
.cns-chart {
  display: block;
  width: 100%;
  min-width: 0;
  overflow: visible;
  font-family: var(--font-body);
  font-variant-numeric: tabular-nums;
}
.cns-sparkline { height: 42px; margin-top: auto; }
.cns-chart-grid {
  stroke: var(--color-line);   /* g448 — 58% of a hairline is not a baseline */
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}
/* g448 — same --accent fault: a DARK fill at 8% on a dark card is nothing at all. The area now
   takes the line's own tone at low alpha, which is what gives a sparkline its body. */
.cns-chart-area {
  fill: var(--chart-2);
  opacity: .14;
}
.cns-chart-line {
  fill: none;
  stroke: var(--chart-1);   /* g448 — the data line is the primary mark on its card */
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
  vector-effect: non-scaling-stroke;
}
.cns-chart-dot { fill: var(--color-ink); }
.cns-stack {
  height: 12px;
  margin-top: auto;
  display: flex;
  gap: 2px;
  border-radius: var(--radius-data);
  overflow: hidden;
  background: var(--paper2);
}
.cns-stack-seg { height: 100%; min-width: 0; }
/* A CHART RAMP, BECAUSE THE PALETTE DID NOT HAVE ONE (g448)
   =====================================================================================
   Owner: "the graphs aren't readable because some of the colours are the same."
   Measured, and he is describing one root cause with several faces. `--accent` was the NAVY
   data colour before the reskin; it now resolves to `--color-surface2`, a dark SURFACE. Every
   chart element still using it as a data fill therefore paints a dark shape on a dark card:
     · .cns-bar-fill    contrast 1.09:1 against its own track, and DARKER than it, so the
                        filled part read as the empty part. (The 76% width was always correct —
                        it just could not be seen, which is why it looked like a 35% bar.)
     · .cns-chart-area  the sparkline's area fill, --accent at 8% — invisible.
   The third face is different: seg-3 used `--line2`, a HAIRLINE token pressed into service as a
   data colour, which measured 1.53:1 against the track it sits on.
   So the fix is a ramp built for data rather than borrowed from surfaces and lines. Three rungs
   with real separation, and a track dark enough that the darkest rung still clears it:
     chart-1  L* 95   ink
     chart-2  L* 61   faint          ΔL* 34 from chart-1
     chart-3  L* ~38  mixed          ΔL* ~23 from chart-2, ~30 from the track
   Monochrome throughout — §2 keeps chromatics for status alone, and a role split is not status.
   Separation comes from lightness distance, which is what this palette has to spend. */
:root{
  --chart-1: var(--color-ink);
  --chart-2: var(--color-faint);
  /* 62%, and the number was found by sweeping it. chart-3 is pulled two ways: it must clear its
     TRACK (a graphical mark wants 3:1) while staying apart from chart-2 above it. 52% gave only
     2.52 against the track; 70% cleared it comfortably but closed on chart-2. 62% is where both
     hold — 3.08 against the track, ΔL* 18.5 from chart-2, still far above the book's 5.46 step. */
  --chart-3: color-mix(in srgb, var(--color-faint) 62%, var(--color-surface2));
  --chart-track: color-mix(in srgb, var(--color-line) 72%, transparent);
  /* A BAR IS A RECTANGLE, NOT A PILL (g449). Owner: "there are a lot of pills as bars — they
     should be more square-ish bars, rectangles with rounded corners, in all the graphs."
     The radius scale is a ROLE scale (chip 8 / control 10 / card 16 / modal 20) and every bar
     was taking `--radius-chip`. On a mark that is only 8-12px TALL, an 8px radius is half its
     height, so both ends round off completely and it reads as a lozenge — the quantity looks
     like a label. A data mark is its own role and wants the smallest radius that still softens
     a corner: the bar stays a bar, and its length stays readable as a length. */
  --radius-data: 4px;
}
.cns-chart-seg-1 {
  fill: var(--chart-1);
  background: var(--chart-1);
}
.cns-chart-seg-2 {
  fill: var(--chart-2);
  background: var(--chart-2);
}
.cns-chart-seg-3 {
  fill: var(--chart-3);
  background: var(--chart-3);
}
.cns-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 5px 10px;
  min-width: 0;
  color: var(--text-soft);
  font-size: var(--fs-label-sm);
  line-height: 1.25;
}
.cns-legend span {
  min-width: 0;
  white-space: nowrap;
}
.cns-legend b { color: var(--text); font-weight: var(--fw-control); }
/* g448 — 8, not 9: the ramp has no 9, and a legend dot is the smallest thing that has to be
   matched by eye to a bar segment, so it should sit on the grid like everything else. */
.cns-legend-swatch {
  display: inline-block;
  width: 8px;
  height: 8px;
  margin-right: 4px;
  border-radius: var(--radius-data);   /* g449 — a swatch should look like the mark it labels */
  vertical-align: -1px;
}
.cns-bar {
  height: 8px;
  margin-top: auto;
  border-radius: var(--radius-data);
  background: var(--chart-track);
}
/* g448 — was `var(--accent)`, i.e. --color-surface2: the fill was DARKER than its own track
   (L* 7.7 on 11.8, contrast 1.09:1). The data was there and correct; it simply could not be
   seen, and where it could it read inverted. */
.cns-bar-fill {
  height: 100%;
  border-radius: var(--radius-data);
  background: var(--chart-1);
}
.cns-bar-ok .cns-bar-fill { background: var(--mark-ok); }
.cns-hbars {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
  margin-top: 2px;
}
.cns-hbar {
  display: grid;
  grid-template-columns: minmax(0, auto) minmax(24px, 1fr) auto;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cns-hbar-label {
  min-width: 0;
  overflow: hidden;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  line-height: 1.3;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cns-hbar-track {
  min-width: 0;
  height: 8px;
  overflow: hidden;
  border-radius: var(--radius-chip);
  background: var(--paper3);
}
.cns-hbar-fill {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--color-muted);
}
.cns-hbar-value {
  color: var(--text);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  font-weight: var(--fw-control);
  white-space: nowrap;
}
.cns-board-empty {
  display: grid;
  grid-column: 1 / -1;
  place-items: center;
  min-width: 0;
  min-height: 82px;
  border-radius: 14px;
  background: var(--paper);
  color: var(--muted);
  font-size: var(--fs-meta);
}
.cns-acard-skeleton {
  justify-content: center;
  pointer-events: none;
}
.cns-acard-skeleton span {
  display: block;
  width: 72%;
  height: 10px;
  border-radius: 10px;
  background: linear-gradient(
    90deg,
    var(--paper3),
    color-mix(in srgb, var(--muted2) 18%, var(--paper3)),
    var(--paper3)
  );
  background-size: 200% 100%;
  animation: cns-board-pulse 1.4s linear infinite;
}
.cns-acard-skeleton span:nth-child(2) { width: 44%; height: 18px; }
.cns-acard-skeleton span:nth-child(3) { width: 86%; }
@keyframes cns-board-pulse {
  from { background-position: 100% 0; }
  to { background-position: -100% 0; }
}
/* Floating toast, centred just above the Done footer — clear of the tabs and
   the analytics band (it used to sit at top:66px, overlapping the header). */
.cns-messages {
  position: absolute;
  left: 50%;
  bottom: 76px;
  transform: translateX(-50%);
  z-index: 12;
  width: max-content;
  max-width: min(440px, calc(100% - 32px));
  pointer-events: none;
}
.cns-notice {
  padding: 10px 14px;
  border-radius: var(--radius-chip);
  background: var(--paper2);
  color: var(--text);
  font-size: var(--fs-meta);
  line-height: 1.4;
  text-align: center;
  box-shadow: var(--shadow-float);
  pointer-events: auto;
}
.cns-notice.ok { border-color: var(--mark-ok); }
.cns-notice.err { border-color: var(--mark-err); }
.cns-notice.info { border-color: var(--accent); }

/* Status chips */
.cns-status-chips {
  display: flex;
  flex-wrap: nowrap;
  gap: 8px;
  min-width: 0;
  padding-bottom: 10px;
}
.cns-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 10px;
  border: none;
  border-radius: var(--radius-chip);
  background: var(--paper3);
  color: var(--text-soft);
  font-size: var(--fs-meta);
  font-weight: var(--fw-control);
  line-height: 1.3;
  white-space: nowrap;
}
button.cns-chip { cursor: pointer; }
button.cns-chip:hover { background: color-mix(in srgb, var(--text-soft) 14%, var(--paper3)); }
button.cns-chip-warn:hover { background: color-mix(in srgb, var(--mark-warn) 22%, var(--paper)); }
.cns-chip > span { color: var(--muted2); font-variant-numeric: tabular-nums; }
.cns-chip-warn {
  border: none;
  background: color-mix(in srgb, var(--mark-warn) 14%, var(--paper));
  color: var(--mark-warn);
}
.cns-chip-warn > span { color: inherit; }
.cns-chip[aria-pressed="true"] {
  border: none;
  background: var(--accent);
  color: var(--neutral);
}
.cns-chip[aria-pressed="true"] > span { color: inherit; }
.cns-chip-neutral {
  min-height: 24px;
  padding: 2px 8px;
  border: none;
  background: var(--paper3);
  color: var(--text-soft);
  font-size: var(--fs-label-sm);
}
.cns-chip-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  min-width: 0;
}

/* Toolbar, bulk bar, and controls */
.cns-toolbar,
.cns-bulk {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
  min-height: 48px;
  margin-bottom: 12px;
  padding: 5px 0;
}
.cns-bulk {
  flex-wrap: wrap;
  padding: 7px 10px;
  border-radius: var(--radius-md);
  background: var(--paper2);
}
.cns-bulk strong {
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: var(--fw-control);
  white-space: nowrap;
}
.cns-bulk-dot { color: var(--muted2); }
.cns-search {
  display: block;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
}
.cns-search input,
.cns-stack-form input,
.cns-invite-form input {
  width: 100%;
  min-width: 0;
  height: 38px;
  padding: 0 12px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--text);
}
.cns-search input::placeholder,
.cns-stack-form input::placeholder,
.cns-invite-form input::placeholder { color: var(--muted2); }
.cns-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  min-height: 38px;
  padding: 6px 14px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--text);
  font-size: var(--fs-meta);
  font-weight: var(--fw-control);
  line-height: 1.2;
  white-space: nowrap;
  cursor: pointer;
}
.cns-btn:hover { background: var(--paper2); }
.cns-btn.cns-btn-primary {
  border-color: var(--color-primary);
  background: var(--color-primary);
  color: var(--color-onprimary);
}
.cns-btn.cns-btn-primary:hover { border-color: color-mix(in srgb, var(--color-primary) 92%, var(--color-onprimary)); background: color-mix(in srgb, var(--color-primary) 92%, var(--color-onprimary)); color: var(--color-onprimary); }
.cns-btn-danger { color: var(--mark-err); }
.cns-btn-danger:hover { background: color-mix(in srgb, var(--mark-err) 10%, var(--paper)); }
.cns-btn:disabled,
.cns-overlay select:disabled { cursor: not-allowed; }
.cns-link-btn {
  min-height: 30px;
  padding: 3px 6px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.cns-link-btn:hover { background: var(--paper3); color: var(--text); }
.cns-link-btn.danger { color: var(--mark-err); }
.cns-select {
  width: auto;
  min-width: 88px;
  height: 36px;
  padding: 0 26px 0 8px !important;
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
  background-color: var(--paper);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%238A93A0' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat;
  background-position: right 9px center;
  background-size: 12px;
  color: var(--text);
  font-size: var(--fs-meta);
  cursor: pointer;
}
.cns-bulk-role { min-width: 108px; }

/* People table */
.cns-table-wrap {
  width: 100%;
  max-width: 100%;
  min-width: 0;
  overflow: visible;
  border-radius: var(--radius-md);
  background: var(--paper);
}
.cns-table {
  width: 100%;
  min-width: 0;
  margin: 0;
  border: 0;
  border-collapse: collapse;
  table-layout: fixed;
}
.cns-table th,
.cns-table td {
  min-width: 0;
  padding: 12px 8px;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-meta);
  line-height: 1.35;
  text-align: left;
  vertical-align: middle;
  overflow: hidden;
}
.cns-table th {
  background: var(--paper2);
  color: var(--muted2);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
  white-space: nowrap;
}
.cns-table th:nth-child(1) { width: 40px; }
.cns-table th:nth-child(2) { width: 27%; }
.cns-table th:nth-child(3) { width: 13%; }
.cns-table th:nth-child(4) { width: 15%; }
.cns-table th:nth-child(5) { width: 18%; }
.cns-table th:nth-child(6) { width: 13%; }
.cns-table th:nth-child(7) { width: 44px; }
.cns-table tbody tr { border-bottom: 1px solid var(--line); }
.cns-table tbody tr:last-child { border-bottom: 0; }
.cns-row { position: relative; }
/* Highlight the whole ROW, not each td — the .cns-person cell is display:flex and
   sits 4-5px short of the row box, so a per-td background leaves a dark seam under
   the name. A tr background paints the full row rectangle behind every cell. */
.cns-row:hover { background: var(--paper2); }
.cns-sort {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  max-width: 100%;
  padding: 0;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  letter-spacing: inherit;
  text-transform: inherit;
  white-space: nowrap;
  cursor: pointer;
}
.cns-sort:hover { color: var(--text); }
.cns-check-cell { text-align: center !important; }
.cns-check-cell input { width: 16px; height: 16px; accent-color: var(--accent); }
.cns-person {
  display: flex;
  align-items: center;
  gap: 9px;
  min-width: 0;
}
.cns-person > span:last-child {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.cns-person strong {
  min-width: 0;
  overflow: hidden;
  color: var(--text);
  font-weight: var(--fw-control);
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cns-person small { color: var(--muted2); font-size: var(--fs-label-sm); }
.cns-avatar {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: var(--radius-chip);
  background: var(--paper3);
  color: var(--text-soft);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
}
.cns-inline-role { width: 100%; min-width: 0; }
.cns-num { color: var(--muted); font-variant-numeric: tabular-nums; }
.cns-muted { color: var(--muted2); font-size: var(--fs-label-sm); }
.cns-pill {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  max-width: 100%;
  padding: 2px 10px;
  border: 0;
  border-radius: var(--radius-chip);
  background: var(--paper3);
  color: var(--text-soft);
  font-size: var(--fs-meta);
  font-weight: var(--fw-control);
  line-height: 1.3;
  white-space: nowrap;
  text-transform: capitalize;
}
.cns-pill-approved {
  background: color-mix(in srgb, var(--mark-ok) 12%, var(--paper));
  color: var(--mark-ok);
}
.cns-pill-pending {
  background: color-mix(in srgb, var(--mark-warn) 14%, var(--paper));
  color: var(--mark-warn);
}
.cns-pill-rejected {
  background: color-mix(in srgb, var(--mark-err) 12%, var(--paper));
  color: var(--mark-err);
}
.cns-pill-removed { background: var(--paper3); color: var(--muted); }
.cns-groups-cell .cns-chip-list {
  /* Wrap instead of hard-clipping a group name mid-word in the narrow Groups column
     (~721-1024px). Wide widths stay one line; wrap only kicks in when chips overflow. */
  flex-wrap: wrap;
  overflow: visible;
}
.cns-actions-cell {
  position: relative;
  overflow: visible !important;
  text-align: right !important;
}
.cns-menu {
  position: relative;
  display: inline-flex;
  justify-content: flex-end;
}
.cns-more {
  display: inline-grid;
  place-items: center;
  min-width: 30px;
  min-height: 30px;
  padding: 0 6px;
  border: 1px solid transparent;
  border-radius: var(--radius-chip);
  background: transparent;
  color: var(--muted);
  font-size: var(--fs-body-lg);
  line-height: 1;
  cursor: pointer;
}
.cns-more:hover { border-color: var(--line2); background: var(--paper3); color: var(--text); }
.cns-menu-pop {
  position: absolute;
  top: calc(100% + 4px);
  right: 0;
  z-index: 7;
  display: flex;
  flex-direction: column;
  width: max-content;
  min-width: 176px;
  max-width: min(220px, calc(100vw - 48px));
  padding: 5px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--paper2);
}
.cns-menu-pop button {
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  text-align: left;
  cursor: pointer;
}
.cns-menu-pop button:hover { background: var(--paper3); color: var(--text); }
.cns-menu-pop button.danger { color: var(--mark-err); }
.cns-menu-sep { height: 1px; margin: 4px 3px; background: var(--line); }
.cns-menu-label,
.cns-section-label {
  display: block;
  color: var(--muted2);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cns-menu-label { padding: 6px 8px 8px; }
.cns-menu-groups .cns-chip-list { padding: 0 8px 8px; }
/* Interactive group-assignment checklist in the Users-row menu */
.cns-group-toggle-list {
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 232px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 2px 0;
}
.cns-group-toggle {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 32px;
  padding: 6px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  text-align: left;
  cursor: pointer;
}
.cns-group-toggle:hover { background: var(--paper3); color: var(--text); }
.cns-group-toggle[aria-pressed="true"] { color: var(--text); }
.cns-group-toggle-check {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 16px;
  height: 16px;
  border: 1px solid var(--line2);
  border-radius: 4px;
  color: transparent;
}
.cns-menu-groups .cns-menu-sep { margin-top: 5px; margin-bottom: 5px; }
.cns-menu-back { display: flex; align-items: center; gap: 5px; }
.cns-menu-back svg { flex: none; opacity: .7; }
.cns-group-toggle[aria-pressed="true"] .cns-group-toggle-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--neutral);
}
.cns-group-toggle-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cns-menu-empty { padding: 8px 9px 10px; color: var(--muted); font-size: var(--fs-meta); }

/* Invitations, groups, and empty states */
.cns-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 190px;
  padding: 26px 18px;
  border-radius: var(--radius-md);
  background: var(--paper);
  color: var(--text-soft);
  text-align: center;
}
.cns-empty h2 {
  margin: 0 0 7px;
  color: var(--text);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-display);
}
.cns-empty p { max-width: 500px; margin: 0 0 14px; line-height: 1.5; }
.cns-empty-success {
  border-color: var(--mark-ok);
  background: color-mix(in srgb, var(--mark-ok) 8%, var(--paper));
}
.cns-empty-compact { min-height: 82px; padding: 14px; }
.cns-empty-compact p { margin: 0; }
.cns-card {
  min-width: 0;
  padding: 14px;
  border-radius: var(--radius-md);
  background: var(--paper);
}
.cns-card h2,
.cns-card h3 {
  margin: 0;
  color: var(--text);
  font-size: var(--fs-body-lg);
  font-weight: var(--fw-display);
}
.cns-card p { margin: 3px 0 0; color: var(--muted2); font-size: var(--fs-meta); line-height: 1.45; }
.cns-card-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 12px;
}
.cns-card-head > div:first-child { min-width: 0; }
.cns-card-actions { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 7px; }
.cns-icon-btn {
  display: inline-grid;
  flex: none;
  place-items: center;
  width: 36px;
  height: 36px;
  padding: 0;
  border: 1px solid var(--line2);
  border-radius: var(--radius-sm);
  background: var(--paper);
  color: var(--text-soft);
  cursor: pointer;
}
.cns-icon-btn:hover { background: var(--paper2); color: var(--text); }
.cns-invite-form {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) auto auto auto;
  align-items: end;
  gap: 9px;
  margin-bottom: 12px;
}
.cns-invite-form label {
  min-width: 0;
  margin: 0;
  color: var(--muted2);
  font-size: var(--fs-label-sm);
  font-weight: var(--fw-control);
  letter-spacing: var(--tracking-label);
  text-transform: uppercase;
}
.cns-invite-form label input,
.cns-invite-form label .cns-select { width: 100%; margin-top: 5px; }
.cns-invite-table th:nth-child(1) { width: 34%; }
.cns-invite-table th:nth-child(2) { width: 15%; }
.cns-invite-table th:nth-child(3) { width: 17%; }
.cns-invite-table th:nth-child(4) { width: auto; }
.cns-invite-table th:nth-child(5) { width: 44px; }
.cns-groups {
  display: grid;
  grid-template-columns: minmax(220px, .8fr) minmax(0, 1.4fr);
  gap: 12px;
  min-width: 0;
}
.cns-group-buttons { display: flex; flex-direction: column; gap: 4px; }
.cns-group-buttons button {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 9px;
  width: 100%;
  min-height: 36px;
  padding: 7px 9px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  text-align: left;
  cursor: pointer;
}
.cns-group-buttons button > span:first-child {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cns-group-buttons button:hover { background: var(--paper2); color: var(--text); }
.cns-group-buttons button.active { background: var(--paper3); color: var(--text); font-weight: var(--fw-control); }
.cns-stack-form {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
  margin: 12px 0;
}
.cns-stack-form input { flex: 1 1 auto; }
.cns-member-list { min-width: 0; }
.cns-member {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  min-width: 0;
  padding: 9px 0;
  border-top: 1px solid var(--line);
  color: var(--text-soft);
  font-size: var(--fs-meta);
}
.cns-member > span { min-width: 0; overflow-wrap: anywhere; }
/* Add-member typeahead: a suggestion popover above the input (the form sits low
   in the editor, so it opens upward). Click a person to add them fast. */
.cns-typeahead-field { position: relative; flex: 1 1 auto; min-width: 0; }
.cns-typeahead-field input { width: 100%; }
.cns-typeahead {
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(100% + 6px);
  z-index: 14;
  display: flex;
  flex-direction: column;
  gap: 1px;
  max-height: 236px;
  overflow-y: auto;
  overscroll-behavior: contain;
  padding: 5px;
  border: 1px solid var(--line2);
  border-radius: var(--radius-md);
  background: var(--paper2);
  box-shadow: var(--shadow-float);
}
.cns-typeahead[hidden] { display: none; }
.cns-typeahead-opt {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  min-height: 38px;
  padding: 5px 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  text-align: left;
  cursor: pointer;
}
.cns-typeahead-opt:hover { background: var(--paper3); color: var(--text); }
.cns-typeahead-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Activity and Usage */
.cns-route-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  margin-bottom: 8px;
}
.cns-route-head p { min-width: 0; margin: 0; color: var(--text-soft); line-height: 1.45; }
.cns-audit-table th:nth-child(1) { width: 18%; }
.cns-audit-table th:nth-child(2) { width: 20%; }
.cns-audit-table th:nth-child(3) { width: 28%; }
.cns-audit-table th:nth-child(4) { width: 20%; }
.cns-audit-table th:nth-child(5) { width: 14%; }
.cns-audit-table td:nth-child(3) { white-space: normal; overflow-wrap: anywhere; }
.cns-usage-section + .cns-usage-section { margin-top: 18px; }
.cns-section-label { margin: 0 0 8px 2px; }
.cns-usage-card { padding: 10px; }
.cns-usage-list {
  display: flex;
  flex-direction: column;
  gap: 7px;
  min-width: 0;
}
.cns-usage-row {
  display: grid;
  grid-template-columns: minmax(140px, 1.2fr) minmax(100px, 2fr) auto auto;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 7px 8px;
  border-radius: var(--radius-sm);
  background: var(--paper2);
}
.cns-usage-name {
  min-width: 0;
  color: var(--text-soft);
  font-size: var(--fs-meta);
  font-weight: var(--fw-control);
  line-height: 1.3;
  overflow-wrap: anywhere;
}
.cns-usage-bar-wrap {
  display: block;
  min-width: 0;
  height: 10px;
  overflow: hidden;
  border-radius: var(--radius-data);
  background: var(--chart-track);
}
/* g449 — THE USAGE BARS WERE READING BACKWARDS. Same --accent fault g448 fixed on .cns-bar-fill,
   in a component that pass missed: the fill was --accent (= --color-surface2, L* 7.7) sitting on
   a --paper3 track (L* 11.8), so the FILL was darker than the TRACK. What you actually saw was
   the track, which is the REMAINING portion — so "Axi chat opened / 42" at 100% showed nothing
   and "Current diagram PDF / 0" showed a full-width bar. The ranking read inverted, which is the
   owner's "you can't see what's being used and what isn't". */
.cns-usage-bar {
  display: block;
  width: var(--cns-bar);
  height: 100%;
  border-radius: inherit;
  background: var(--chart-1);
}
.cns-usage-total,
.cns-usage-users {
  color: var(--text);
  font-size: var(--fs-meta);
  font-variant-numeric: tabular-nums;
  text-align: right;
  white-space: nowrap;
}
.cns-usage-total { font-weight: var(--fw-control); }
.cns-usage-users { color: var(--muted2); }
.cns-usage-users-list { display: grid; gap: 8px; min-width: 0; }
.cns-usage-person {
  min-width: 0;
  border-radius: var(--radius-md);
  background: var(--paper);
}
.cns-usage-person summary {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
  padding: 10px 12px;
  color: var(--text);
  cursor: pointer;
}
.cns-usage-person summary span { min-width: 0; overflow-wrap: anywhere; }
.cns-usage-person summary strong { flex: none; font-variant-numeric: tabular-nums; }
.cns-usage-person .cns-usage-list { padding: 0 10px 10px; }
.cns-spinner {
  width: 30px;
  height: 30px;
  margin: 42px auto;
  border: 3px solid var(--line2);
  border-top-color: var(--text-soft);
  /* Full circle (was radius-chip → a rotating rounded-square) to match .cloud-spinner
     and the app's .spin — one consistent monochrome loader across the whole experience. */
  border-radius: 50%;
  animation: cloudspin .8s linear infinite;
}

/* ---- overlay footer: Done always in view, list scrolls above it (house .cloud-modal-actions scheme) ---- */
.cns-foot {
    display: flex;
    flex: none;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--line);
    background: var(--paper2);
}
.cns-foot .cns-spacer { flex: 1 1 auto; }
/* Match the AXD SOP's own primary "Done" button (app.css .btn.primary):
   --primary navy, white text, radius-sm, 42px. The .cns-overlay prefix lifts
   specificity above the overlay's `font/color: inherit` button reset. */
/* Secondary, not primary: full-white fill read as harsh AND was white-on-white in dark
   (background+color both var(--primary)=white). Invite is the one primary action. */
.cns-overlay .cns-done {
    flex: none;
    min-height: 42px;
    padding: 7px 15px;
    border: 1px solid var(--line2);
    border-radius: var(--radius-sm);
    background: var(--paper);
    color: var(--text);
    font-size: 14px;
    font-weight: var(--fw-control);
    line-height: 20px;
    letter-spacing: .02em;
    cursor: pointer;
}
@media (prefers-reduced-motion: no-preference) {
  .cns-overlay .cns-done { transition: background .15s var(--ease-soft), border-color .15s var(--ease-soft); }
}
.cns-overlay .cns-done:hover { background: var(--paper2); border-color: var(--line2); color: var(--text); }
.cns-overlay .cns-done:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


@media (max-width: 1100px) {
  .cns-board,
  .cns-board-groups,
  .cns-board-usage {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
  .cns-tabs {
    overflow-x: auto;
    scrollbar-width: none;
  }
  .cns-tabs::-webkit-scrollbar { display: none; }
  .cns-status-chips { flex-wrap: wrap; }
  .cns-groups { grid-template-columns: minmax(0, 1fr); }
}

@media (max-width: 720px) {
  .cns-overlay { display: block; padding: 0; }
  .cns-win {
    width: 100%;
    max-width: none;
    height: 100vh;
    height: 100dvh;
    max-height: none;
    border: 0;
    border-radius: 0;
  }
  .cns-head { padding: 12px 14px 8px; }
  .cns-title { font-size: var(--fs-body-lg); }
  .cns-help { width: 26px; height: 26px; }
  .cns-help-pop {
    left: -80px;
    width: min(420px, calc(100vw - 28px));
  }
  .cns-tabs { padding: 0 6px; }
  .cns-tab { min-height: 40px; padding: 8px 9px 9px; }
  .cns-content { padding: 12px 10px 18px; }
  .cns-board {
    gap: 10px;
    margin: -12px -10px 12px;
    padding: 12px 10px 14px;
  }
  .cns-acard {
    min-height: 92px;
    padding: 10px;
  }
  .cns-board-groups .cns-acard-hbars,
  .cns-board-activity .cns-acard-hbars {
    grid-column: 1 / -1;
  }
  .cns-status-chips { gap: 6px; padding-bottom: 8px; }
  .cns-chip { padding-right: 9px; padding-left: 9px; }
  .cns-toolbar { gap: 7px; min-height: 46px; margin-bottom: 9px; }
  .cns-toolbar .cns-btn { padding-right: 12px; padding-left: 12px; }
  .cns-bulk {
    position: sticky;
    bottom: 0;
    z-index: 6;
    justify-content: center;
    margin-bottom: 9px;
    border-color: var(--accent);
  }
  .cns-bulk strong { flex: 1 1 100%; text-align: center; }
  .cns-bulk-dot { display: none; }
  .cns-table-wrap { background: transparent; }
  .cns-table,
  .cns-table thead,
  .cns-table tbody,
  .cns-table tr,
  .cns-table td {
    display: block;
    width: 100%;
    min-width: 0;
  }
  .cns-table thead { display: none; }
  .cns-table { background: transparent; }
  .cns-table .cns-row {
    position: relative;
    margin-bottom: 9px;
    padding: 12px 13px;
    border-radius: var(--radius-md);
    background: var(--paper2);
  }
  .cns-table .cns-row:hover td { background: transparent; }
  .cns-table td {
    display: grid;
    grid-template-columns: 78px minmax(0, 1fr);
    align-items: center;
    gap: 8px;
    min-height: 32px;
    padding: 4px 0;
    border: 0;
    overflow: visible;
  }
  .cns-table td::before {
    content: attr(data-label);
    color: var(--muted2);
    font-size: var(--fs-label-sm);
    font-weight: var(--fw-control);
    letter-spacing: var(--tracking-label);
    text-transform: uppercase;
  }
  .cns-table .cns-person {
    display: flex;
    min-width: 0;
    min-height: 44px;
    margin: 0 34px 7px 22px;
    padding: 0 0 8px;
    border-bottom: 1px solid var(--line);
  }
  .cns-table .cns-person::before,
  .cns-table .cns-check-cell::before,
  .cns-table .cns-actions-cell::before { display: none; }
  .cns-person strong {
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .cns-table .cns-check-cell {
    position: absolute;
    top: 18px;
    left: 12px;
    z-index: 2;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  .cns-table .cns-actions-cell {
    position: absolute;
    top: 9px;
    right: 9px;
    z-index: 3;
    display: block;
    width: auto;
    min-height: 0;
    padding: 0;
  }
  .cns-table .cns-inline-role { width: min(160px, 100%); }
  .cns-table .cns-groups-cell { display: grid; }
  .cns-table .cns-groups-cell .cns-chip-list { flex-wrap: wrap; overflow: visible; }
  .cns-menu-pop { right: 0; }
  .cns-invite-table .cns-person {
    margin-left: 0;
    padding-right: 34px;
  }
  .cns-audit-table td:first-child { padding-right: 0; }
  .cns-invite-form { grid-template-columns: minmax(0, 1fr); }
  .cns-invite-form .cns-btn { width: 100%; }
  .cns-card { padding: 12px; }
  .cns-card-head { flex-direction: column; }
  .cns-card-actions { width: 100%; justify-content: flex-start; }
  .cns-stack-form { flex-direction: column; align-items: stretch; }
  .cns-stack-form .cns-btn { width: 100%; }
  .cns-route-head { align-items: flex-start; }
  .cns-usage-row {
    grid-template-columns: minmax(0, 1fr) auto;
    gap: 6px 8px;
    padding: 9px;
  }
  .cns-usage-name,
  .cns-usage-bar-wrap { grid-column: 1 / -1; }
  .cns-usage-total { text-align: left; }
}

@media (prefers-reduced-motion: reduce) {
  .cns-overlay *,
  .cns-overlay *::before,
  .cns-overlay *::after {
    scroll-behavior: auto !important;
    transition-duration: .01ms !important;
    animation-duration: .01ms !important;
    animation-iteration-count: 1 !important;
  }
}
/* ---------- floating account bar ---------- */
#cloudBar { position: fixed; right: 14px; bottom: 14px; z-index: 3500; display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; align-items: center; max-width: calc(100vw - 28px); font-family: var(--font-body); }
#cloudBar button { display: inline-flex; align-items: center; gap: 7px; padding: 8px 13px; background: var(--toolbar); border: 1px solid var(--line2); border-radius: var(--radius-chip); color: var(--text-soft); font-size: var(--fs-label-sm); font-weight: var(--fw-control); font-family: inherit; cursor: pointer; }
#cloudBar button:hover { border-color: rgba(255,255,255,.38); background: var(--paper3); color: #fff; }
#cloudBar .cloud-offline { max-width: min(430px, calc(100vw - 28px)); padding: 8px 12px; border: 1px solid rgba(192,136,58,.5); border-radius: var(--radius-lg); background: rgba(54,40,20,.94); color: #F2D7A7; font-size:12px; line-height: 1.35; box-shadow: var(--shadow); }
#cloudBar .cloud-status { font-size:12px; color: var(--muted2); padding-right: 2px; }
#cloudBar .cloud-status.saving { color: #E3C08A; }
#cloudBar .cloud-status.saved  { color: #A9E2C4; }
/* Concurrent-edit conflict: a teammate saved since you opened the SOP. Stands out so it's not missed. */
#cloudBar .cloud-status.conflict { color: #F1C4C0; font-weight: var(--fw-control); cursor: help; }
#cloudBar .cloud-ro { font-size:12px; color: #C7CDD7; background: rgba(156,163,175,.16); padding: 7px 12px; border-radius: var(--radius-chip); }
/* Presence: stacked avatar initials of who else has this SOP open. Hidden when nobody else is here. */
#cloudBar .cloud-presence { display: none; }
#cloudBar .cloud-presence.has { display: inline-flex; align-items: center; padding: 3px 7px 3px 4px; background: var(--toolbar); border: 1px solid var(--line2); border-radius: var(--radius-chip); }
/* g449 — a person mark is a rounded square everywhere, presence included. */
#cloudBar .cloud-who { width: 22px; height: 22px; border-radius: var(--radius-chip); display: inline-flex; align-items: center; justify-content: center; font-size:11px; font-weight: 700; color: #fff; border: 1.5px solid var(--toolbar); margin-left: -6px; }
#cloudBar .cloud-who:first-child { margin-left: 0; }
#cloudBar .cloud-who.editing { box-shadow: 0 0 0 1.5px var(--toolbar), 0 0 0 3px #E3C08A; }  /* amber ring = the active editor */
#cloudBar .cloud-who-more { font-size:11px; color: var(--muted2); margin-left: 5px; }
/* Edit-lock banner: someone else holds the single-editor lock; you're read-only until they finish or you take over. */
#cloudBar .cloud-lock { display: none; }
#cloudBar .cloud-lock.has { display: inline-flex; align-items: center; gap: 8px; padding: 5px 6px 5px 12px; background: rgba(192,136,58,.16); border: 1px solid rgba(192,136,58,.45); border-radius: var(--radius-chip); color: #E3C08A; font-size:12px; }
#cloudBar .cloud-lock-msg { white-space: nowrap; }
#cloudBar .cloud-lock-take { padding: 4px 11px; background: var(--primary); border: 1px solid var(--primary); border-radius: var(--radius-chip); color: #fff; font-size: 11px; font-weight: var(--fw-control); font-family: inherit; cursor: pointer; }
#cloudBar .cloud-lock-take:hover { background: var(--accent-strong); border-color: var(--accent-strong); }
:root[data-mode="light"] #cloudBar .cloud-lock.has { color: #8a5a16; }
/* The brand mark ships as a white PNG (for the dark theme); on the light-mode dashboard/entity
   screen it would wash out on the light background, so flip it to a dark mark to match the wordmark. */
:root[data-mode="light"] .cloud-logo-mark { filter: invert(1); }

/* view-only: hide editing affordances for viewers (refined per real markup at 2.0 integration) */
body.cloud-viewonly [data-action="toggle-edit"], body.cloud-viewonly #editToggle { display: none !important; }

@media (max-width: 560px) {
  #cloudBar { right: 10px; bottom: 10px; max-width: calc(100vw - 20px); }
  #cloudBar .cloud-offline { flex: 1 0 100%; max-width: calc(100vw - 20px); }
  #cloudBar .label-text { display: none; }
  .cloud-card { padding: 22px 18px; }

  /* dashboard header stacks: brand row, then email + actions below */
  .cloud-dash-head { flex-direction: column; align-items: stretch; gap: 14px; }
  .cloud-dash-head .cloud-brand { justify-content: flex-start; }
  .cloud-dash-head .who { flex-wrap: wrap; gap: 8px; }
  .cloud-dash-head .who > span { flex: 1 1 100%; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cloud-dash-head .who button { flex: 1 1 auto; justify-content: center; min-height: 40px; }

  /* section title: keep heading + action on one tidy row */
  .cloud-section-title { gap: 10px; }
  .cloud-section-title .cloud-btn.sm { flex: none; }

  .cloud-compare-bar { flex-direction: column; align-items: stretch; }
  .cloud-compare-actions { width: 100%; }
  .cloud-compare-actions .cloud-btn { flex: 1 1 auto; }
  .cloud-entity.compare-mode .cloud-sop { align-items: flex-start; flex-wrap: wrap; }
  .cloud-entity.compare-mode .cloud-sop .meta { flex: 1 1 calc(100% - 34px); }
  .cloud-entity.compare-mode .cloud-sop .row-actions { margin-left: 28px; flex-wrap: wrap; justify-content: flex-end; }

  /* modals fill the small screen with comfortable padding */
  .cloud-modal-back { padding: 14px; }
  .cloud-modal, .cloud-modal.wide { max-width: 100%; padding: 20px 18px; }
  .cloud-modal-actions .cloud-btn { flex: 1 1 auto; }
  /* On short phone screens the fixed header/hint/tools/invite can fill the modal and
     starve the flex:1 scroll region to zero height. Let the whole modal scroll instead so
     the lists show at natural height (invited + removed sections flow below the users). */
  .cloud-modal.wide #adminScroll { flex: 0 0 auto; overflow-y: visible; }
}

/* ============================================================================
   Beta 2.6 — Templates: gallery / chooser / preview.
   Additive layer that reuses the cloud dashboard tokens and card patterns
   (.cloud-card / .cloud-entity / .cloud-sop / .cloud-modal) so the template UI
   is visually indistinguishable from the rest of the dashboard.
   ========================================================================== */

/* ---------- chooser modal (Start blank / From a template) ----------
   A centered modal + backdrop mirroring .cloud-modal-back / .cloud-modal, but
   roomy enough for a card gallery. Column flex keeps the header + tabs pinned
   while the gallery scrolls; caps to the viewport so it never overflows off
   short screens, and drops to full-width on phones. */
.tmpl-modal {
  width: 100%; max-width: 720px;
  background: var(--paper2);
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  padding: 24px;
  max-height: calc(100vh - 48px); max-height: calc(100dvh - 48px);
  display: flex; flex-direction: column; min-height: 0;
  overflow: hidden;
}
.tmpl-modal > h3 { margin: 0 0 4px; font-size: var(--fs-body-lg); font-weight: 600; color: var(--text-strong); flex: none; }
.tmpl-modal > .hint { color: var(--muted); font-size: var(--fs-meta); margin: 0 0 16px; line-height: 1.5; flex: none; }

/* ---------- tabs (blank / from-template switcher) ---------- */
.tmpl-tabs { display: flex; gap: 6px; padding: 4px; margin-bottom: 16px; background: var(--paper); border-radius: var(--radius-md); flex: none; }
.tmpl-tabs button {
  flex: 1 1 0; min-width: 0;
  padding: 9px 12px; min-height: 40px;
  border: 1px solid transparent; border-radius: var(--radius-sm);
  background: transparent; color: var(--muted);
  font-size: var(--fs-meta); font-weight: var(--fw-control); font-family: inherit;
  letter-spacing: .02em; cursor: pointer;
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.tmpl-tabs button:hover { color: var(--text-soft); background: var(--paper3); }
.tmpl-tabs button[aria-selected="true"], .tmpl-tabs button.active {
  background: var(--accent-muted); border-color: var(--accent); color: var(--text-strong);
}
.tmpl-tabs button:focus-visible { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-muted); }

/* ---------- tab panels ----------
   The template panel is the flex-growing, internally-scrolling child so the
   gallery scrolls inside the modal while header + tabs + footer stay pinned.
   The blank panel is short and flows naturally. */
.tmpl-modal.wide { max-width: 760px; }
.tmpl-tab-panel { min-width: 0; }
.tmpl-tab-panel[hidden] { display: none; }
.tmpl-tab-panel[data-panel="template"] {
  flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column;
  overflow-y: auto; margin-right: -6px; padding-right: 6px;
}
.tmpl-tab-panel[data-panel="template"] > #tmplChooserGallery { min-height: 0; }

/* ---------- gallery ----------
   The gallery stacks the curated / my-templates sections vertically; the
   responsive card grid lives on each category group (.tmpl-group) so cards —
   not sections — are the grid items. */
.tmpl-gallery { display: flex; flex-direction: column; gap: 18px; }
.tmpl-section { min-width: 0; }
.tmpl-section-head {
  margin: 0 0 10px; font-size: var(--fs-label-sm); font-weight: 600; color: var(--muted);
  letter-spacing: .09em; text-transform: uppercase;
}

/* a category group: full-width heading + a responsive grid of cards.
   auto-fill + minmax(min(220px,100%),1fr) guarantees no horizontal overflow at 320px. */
.tmpl-group {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(min(220px, 100%), 1fr));
  gap: 12px; align-content: start; margin-bottom: 12px;
}
.tmpl-group:last-child { margin-bottom: 0; }
.tmpl-group-head {
  grid-column: 1 / -1;
  font-size: var(--fs-meta); font-weight: 600; color: var(--muted2);
  letter-spacing: .04em; margin: 2px 0 0;
}

/* ---------- template card (matches .cloud-sop / .cloud-entity) ---------- */
.tmpl-card {
  display: flex; flex-direction: column; gap: 9px;
  min-width: 0;
  padding: 14px 15px;
  background: var(--paper);
  border-radius: var(--radius-md);
  cursor: pointer;
  transition: border-color .15s ease, background .15s ease;
}
.tmpl-card:hover { border-color: var(--accent-strong); background: var(--surface-dark); }
.tmpl-card:focus-visible { outline: none; border-color: var(--accent-strong); box-shadow: 0 0 0 3px var(--accent-muted); }
.tmpl-card-title {
  font-size: var(--fs-body); font-weight: 600; color: var(--text-strong);
  line-height: 1.35; min-width: 0;
  overflow-wrap: anywhere; word-break: break-word;   /* title wraps, never clips */
}
.tmpl-card-summary {
  font-size: var(--fs-meta); color: var(--muted); line-height: 1.5; min-width: 0;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical;
  overflow: hidden;   /* summary clamps gracefully instead of overflowing */
}

/* category chip (own line in the card) */
.tmpl-card-cat {
  align-self: flex-start;
  font-size:11px; font-weight: 600; letter-spacing: .03em;
  padding: 2px 8px; border-radius: var(--radius-chip);
  background: var(--accent-muted); color: var(--color-muted); border: 1px solid var(--accent);
  white-space: nowrap;
}
/* meta row: workflow / step counts */
.tmpl-card-meta { font-size:12px; color: var(--muted2); min-width: 0; }

/* actions: Preview (ghost) + Use (primary), pushed to the card's foot */
.tmpl-card-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 2px; }
.tmpl-card-actions .cloud-btn { flex: 1 1 auto; }

/* ---------- read-only preview panel (outline + role legend) ----------
   Sits inside .tmpl-modal (replacing the gallery) or standalone; scrolls
   internally so long outlines never blow past the viewport. */
.tmpl-preview {
  flex: 1 1 auto; min-height: 0; overflow-y: auto;
  margin-right: -6px; padding-right: 6px; border-radius: var(--radius-md);
  background: var(--paper); padding: 14px 16px;
  font-size: var(--fs-meta); color: var(--text-soft); line-height: 1.6;
}
.tmpl-preview-title { margin: 0 0 4px; font-size: var(--fs-body); font-weight: 600; color: var(--text-strong); display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.tmpl-preview-summary { margin: 0 0 8px; color: var(--muted); }
.tmpl-preview .tmpl-card-meta { margin-bottom: 12px; }
/* role legend */
.tmpl-preview-roles { display: flex; flex-wrap: wrap; gap: 6px 8px; margin: 4px 0 14px; }
.tmpl-role-chip {
  font-size: 11px; font-weight: 600; color: #141414;
  padding: 2px 9px; border-radius: var(--radius-chip);
  border: 1px solid rgba(0,0,0,.14); white-space: nowrap;
}
/* section -> workflow outline */
.tmpl-preview-sec { margin-top: 14px; }
.tmpl-preview-sec:first-of-type { margin-top: 0; }
.tmpl-preview-sec-head {
  font-size: var(--fs-label-sm); font-weight: 600; color: var(--muted);
  letter-spacing: .08em; text-transform: uppercase; margin: 0 0 6px;
}
.tmpl-preview-wf-list { list-style: none; margin: 0; padding: 0; }
.tmpl-preview-wf-list li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 5px 0; border-bottom: 1px solid var(--line); min-width: 0;
}
.tmpl-preview-wf-list li:last-child { border-bottom: 0; }
.tmpl-preview-wf-title { min-width: 0; overflow-wrap: anywhere; }
.tmpl-preview-wf-count { color: var(--muted2); white-space: nowrap; flex: none; }

/* ---------- dashboard "Templates" section (below "Shared with me") ----------
   Collapsible block using the existing .cloud-section-title heading; the caret
   rotates when expanded. The gallery inside flows at natural page height. */
.cloud-templates-toggle {
  display: inline-flex; align-items: center; gap: 8px;
  background: none; border: 0; padding: 0; margin: 0; cursor: pointer;
  font: inherit; color: inherit;
}
.cloud-templates-toggle .caret { transition: transform .15s ease; display: inline-block; }
.cloud-templates-toggle[aria-expanded="true"] .caret { transform: rotate(90deg); }
.cloud-templates-body { margin-top: 14px; }

@media (max-width: 560px) {
  .tmpl-modal { max-width: 100%; padding: 20px 18px; }
  .tmpl-card-actions .cloud-btn { min-height: 38px; }
}

/* ---------- dashboard SOP comparison print host ---------- */
#comparePrint { display: none; }

@media print {
  @page { size: A4; margin: 14mm; }

  body.printing-compare {
    background: #fff !important;
    color: #141414 !important;
  }
  body.printing-compare > *:not(#comparePrint) { display: none !important; }
  body.printing-compare #comparePrint {
    display: block !important;
    background: #fff !important;
    color: #141414 !important;
  }
  body.printing-compare #comparePrint,
  body.printing-compare #comparePrint * {
    box-sizing: border-box;
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  .cmp-doc {
    width: 100%;
    max-width: 180mm;
    margin: 0 auto;
    font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Arial, sans-serif;
    font-size: 10.5pt;
    line-height: 1.45;
    color: #141414;
  }
  .cmp-cover {
    padding: 0 0 10mm;
    border-bottom: 1px solid #D8DEE8;
    margin-bottom: 7mm;
  }
  .cmp-kicker {
    color: var(--color-info);
    font-size: 9pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
    margin-bottom: 3mm;
  }
  .cmp-cover h1 {
    margin: 0 0 6mm;
    font-size: 24pt;
    line-height: 1.12;
    color: #141414;
    letter-spacing: 0;
  }
  .cmp-route {
    display: grid;
    grid-template-columns: minmax(0, 1fr) 10mm minmax(0, 1fr);
    gap: 4mm;
    align-items: stretch;
  }
  .cmp-sop-card {
    padding: 4.5mm;
    border: 1px solid #D8DEE8;
    border-radius: 3mm;
    background: #F8FAFC;
    min-width: 0;
  }
  .cmp-sop-card span {
    display: block;
    margin-bottom: 2mm;
    color: #5F5F5F;
    font-size: 8pt;
    font-weight: 700;
    letter-spacing: .08em;
    text-transform: uppercase;
  }
  .cmp-sop-card h2 {
    margin: 0 0 2mm;
    font-size: 14pt;
    line-height: 1.25;
    color: #141414;
    letter-spacing: 0;
    overflow-wrap: anywhere;
  }
  .cmp-sop-card p {
    margin: 1mm 0 0;
    color: #5F5F5F;
    font-size: 9pt;
  }
  .cmp-arrow {
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--color-info);
    font-size: 18pt;
    font-weight: 700;
  }
  .cmp-generated {
    margin-top: 5mm;
    color: #5F5F5F;
    font-size: 9pt;
  }
  .cmp-summary {
    display: inline-flex;
    align-items: baseline;
    gap: 2mm;
    margin: 0 0 5mm;
    padding: 2.5mm 4mm;
    border-radius: var(--radius-chip);
    background: #EEF4FF;
    color: var(--color-info);
    font-weight: 700;
  }
  .cmp-summary strong {
    font-size: 15pt;
    color: var(--color-info);
  }
  .cmp-zero {
    margin: 8mm 0;
    padding: 5mm;
    border: 1px solid #BFE0CB;
    border-radius: 3mm;
    background: #ECFDF3;
    color: var(--color-success);
    font-weight: 700;
  }
  .cmp-doc .vd-group {
    break-inside: avoid;
    margin: 0 0 6mm;
  }
  .cmp-doc .vd-group h4 {
    margin: 0 0 2.5mm;
    padding-bottom: 1.5mm;
    border-bottom: 1px solid #D8DEE8;
    color: #141414;
    font-size: 13pt;
    letter-spacing: 0;
  }
  .cmp-doc .vd-list {
    list-style: none;
    margin: 0;
    padding: 0;
  }
  .cmp-doc .vd-list > li {
    break-inside: avoid;
    display: flex;
    gap: 2.5mm;
    margin: 0 0 2mm;
    padding: 2.7mm 3mm;
    border-radius: 2.2mm;
    border: 1px solid #E4E7EC;
    background: #F9FAFB;
    overflow-wrap: anywhere;
  }
  .cmp-doc .vd-mark {
    flex: 0 0 5mm;
    width: 5mm;
    height: 5mm;
    border-radius: var(--radius-chip);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    font-weight: 800;
    font-size: 8pt;
    line-height: 1;
  }
  .cmp-doc .vd-add .vd-mark { background: #039855; }
  .cmp-doc .vd-rem .vd-mark { background: #D92D20; }
  .cmp-doc .vd-chg .vd-mark { background: #DC6803; }
  .cmp-doc .vd-add { border-color: #A6F4C5; background: #ECFDF3; }
  .cmp-doc .vd-rem { border-color: #FECDCA; background: #FEF3F2; }
  .cmp-doc .vd-chg { border-color: #FEDF89; background: #FFFAEB; }
  .cmp-step-line, .cmp-step-change { flex-direction: column; }
  .cmp-step-line { position: relative; padding-left: 11mm !important; }
  .cmp-step-line > .vd-mark { position: absolute; left: 3mm; top: 2.7mm; }
  .cmp-step-main {
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1mm;
  }
  .cmp-step-wf {
    color: #5F5F5F;
    font-size: 8.5pt;
    font-weight: 700;
  }
  .cmp-step-desc { color: #141414; }
  .cmp-step-head {
    display: grid;
    grid-template-columns: 5mm minmax(0, 1fr) auto;
    gap: 2.5mm;
    align-items: start;
    width: 100%;
  }
  .cmp-fields {
    align-self: start;
    color: #93370D;
    background: #FEF0C7;
    border: 1px solid #FEDF89;
    border-radius: var(--radius-chip);
    padding: .8mm 2.4mm;
    font-size: 8pt;
    font-weight: 700;
    white-space: nowrap;
  }
  .cmp-step-diff {
    margin: 2.5mm 0 0 7.5mm;
    padding: 3mm;
    border: 1px solid #E4E7EC;
    border-radius: 2mm;
    background: #fff;
    color: #141414;
  }
  .cmp-doc ins {
    text-decoration: none;
    background: #D1FADF;
    color: var(--color-success);
    padding: 0 .5mm;
    border-radius: .8mm;
  }
  .cmp-doc del {
    text-decoration: line-through;
    background: #FEE4E2;
    color: var(--color-danger);
    padding: 0 .5mm;
    border-radius: .8mm;
  }
  .cmp-step-fields {
    margin: 2.5mm 0 0 7.5mm;
    display: grid;
    gap: 1.5mm;
  }
  .cmp-step-fields div {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 1.5mm;
    padding: 1.8mm 2.4mm;
    border: 1px solid #FEDF89;
    border-radius: 2mm;
    background: #fff;
  }
  .cmp-step-fields span {
    color: #93370D;
    font-weight: 700;
  }
  .cmp-step-fields b {
    color: #141414;
    font-weight: 600;
  }
  .cmp-step-fields em {
    color: #5F5F5F;
    font-style: normal;
  }
  .cmp-legend {
    display: flex;
    flex-wrap: wrap;
    gap: 3mm;
    margin-top: 8mm;
    padding-top: 3mm;
    border-top: 1px solid #D8DEE8;
    color: #5F5F5F;
    font-size: 9pt;
  }
  .cmp-legend span { font-weight: 700; }
  .cmp-legend .vd-add, .cmp-legend .vd-rem, .cmp-legend .vd-chg {
    background: transparent;
    border: 0;
    padding: 0;
  }
  .cmp-legend .vd-add { color: var(--color-success); }
  .cmp-legend .vd-rem { color: var(--color-danger); }
  .cmp-legend .vd-chg { color: #93370D; }
}

/* =====================================================================
   AXI PASS — dashboard/login. Tokens come from app.css; this block only
   retunes the cloud components that hardcode the old texture.
   ===================================================================== */
.cloud-card{border-radius:var(--radius-lg)}
.cloud-entity{border-radius:var(--radius-md)}
.cloud-sop{border-radius:var(--radius-sm);
  transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft)}
@media(hover:hover){
  .cloud-sop:hover{border-color:rgba(255,255,255,.34);background:var(--hover-fill)}
  :root[data-mode="light"] .cloud-sop:hover{border-color:rgba(20,24,30,.28)}
}
.cloud-entity-head:hover{background:var(--hover-fill)}

/* version chip picks up the navy accent */
.cloud-sop .cloud-sop-ver{background:var(--accent-muted);color:var(--color-muted);border-color:rgba(255,255,255,.2)}
:root[data-mode="light"] .cloud-sop .cloud-sop-ver{background:rgba(20,24,30,.08);color:var(--accent-strong);border-color:rgba(20,24,30,.25)}

/* row actions: quiet until hover */
.cloud-sop .row-actions button{border-color:transparent;border-radius:8px;
  transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft),color .18s var(--ease-soft)}
.cloud-sop .row-actions button:hover{border-color:var(--line2);background:var(--hover-fill)}

/* buttons: same vocabulary as the app */
.cloud-btn{border-radius:var(--radius-sm);
  transition:transform .18s var(--ease-soft),background .18s var(--ease-soft),border-color .18s var(--ease-soft),color .18s var(--ease-soft)}
.cloud-btn:active{transform:scale(.985)}
.cloud-dash-head .who button{border-radius:8px;transition:border-color .18s var(--ease-soft),background .18s var(--ease-soft),color .18s var(--ease-soft)}

/* section headers: the one micro-label voice */
.cloud-section-title h2{letter-spacing:var(--tracking-label)}

/* fields: hairline + offset focus ring instead of the glow box */
.cloud-field input:focus,.cloud-field select:focus{outline:2px solid rgba(242,242,242,.45);outline-offset:2px;border-color:var(--accent-strong);box-shadow:none}
:root[data-mode="light"] .cloud-field input:focus,:root[data-mode="light"] .cloud-field select:focus{outline-color:rgba(20,24,30,.45)}
.cloud-msg{border-radius:var(--radius-sm)}

/* AXI PASS 2 — control scale on the cloud screens (tokens from app.css). */
.cloud-btn{min-height:var(--ctl-h,40px);padding-top:0;padding-bottom:0}
.cloud-btn.sm{min-height:var(--ctl-h-sm,32px)}
.cloud-field input,.cloud-field select{height:var(--ctl-h,40px);padding-top:0;padding-bottom:0}
.cloud-dash-head .who button{height:var(--ctl-h-sm,32px);padding-top:0;padding-bottom:0}
.cloud-sop .row-actions button{height:var(--ctl-h-xs,28px);padding-top:0;padding-bottom:0}

/* ============================================================================
   AXD-I reskin — cloud surfaces (Pass B screens 12 Dashboard + 13 Console).
   Everything below was verified on screen via the project's own localhost
   dashboard preview (?dash=demo → "Manage users"), not reasoned from source.
   ========================================================================== */

/* 1 · Radius. cloud.css resolves radii through the ALIAS tokens, and those are
   still 10/14/18 — batch 6 repointed only app.css's card and modal SELECTORS at
   the semantic tokens. So the cloud surfaces stayed at 14px cards / 18px modals
   while the builder moved to 16/20. Repoint the surfaces confirmed on screen.
   Deliberately narrow: the remaining --radius-md uses are chips, rows and inputs
   at control scale, which the mockups do not give card radius. */
.cns-win{border-radius:var(--radius-modal)}
.cloud-card{border-radius:var(--radius-modal)}
.cloud-modal{border-radius:var(--radius-modal)}
.cloud-entity{border-radius:var(--radius-card)}

/* 2 · Scrim. --cns-scrim was rgba(6,10,18,.8) — a blue-tinted overlay left from
   before the monochrome reskin, and the same class of blue leak batch 3 cleared
   out of assets/workflow-view/. The console dimmed the page toward navy. */
:root{--cns-scrim:var(--color-scrim)}
:root[data-mode="light"]{--cns-scrim:var(--color-scrim)}

/* 3 · Console tab state was INVISIBLE. The reskin made --accent #111111 (a near
   black surface colour), and .cns-tab.active drew its underline in --accent — 2px
   of #111 on a #0A0A0A window. Worse, --text-soft now equals --text, so the
   inactive and active labels were the same colour too: nothing indicated which
   tab you were on. Mute the resting label and draw the underline in ink. */
/* g448 — the tab strip answers the way every other list in the app now does (g433/g434):
   pointing at it fades the row of tabs and lifts the one under the cursor, so an inactive tab
   reads as reachable instead of as a static label. The ACTIVE tab is exempt and holds ink — it
   answers "where you are", not "where you are pointing", and it keeps its underline.
   (hover:hover) so a tap on a touchscreen cannot strand the strip faded. */
.cns-tabs .cns-tab{color:var(--color-muted);transition:color .14s}
@media (hover:hover){
  .cns-tabs:hover .cns-tab{color:var(--color-faint)}
  .cns-tabs .cns-tab:hover{color:var(--color-ink)}
  .cns-tabs:hover .cns-tab.active,
  .cns-tabs:hover .cns-tab[aria-selected="true"]{color:var(--color-ink)}
}
.cns-tabs .cns-tab.active,.cns-tabs .cns-tab[aria-selected="true"]{
  color:var(--color-ink);border-bottom-color:var(--color-ink)}
/* .cns-tabs .cns-tab, not .cns-tab: `.cns-overlay button{color:inherit}` is (0,1,1)
   and out-specifies a bare (0,1,0) class, so the ORIGINAL .cns-tab colour rule never
   applied either — every tab simply inherited the window's ink. */

/* ===== Dashboard (screen 12) =====
   The cloud layer is its own stylesheet and its own component set, so nothing the app-side
   screen passes fixed reaches here. Everything below is measured against
   docs/design/axdi-v12-mockups/html/kimi-screen12.html. */

/* The card was on --control; the locked screen puts it on --surface, with the entity rows on
   the SAME tone separated by hairlines (that relationship was already right — only the tone
   was a tier off). Wider, too: 860 -> 1120. */
.cloud-screen{padding:48px 24px}
.cloud-card{background:var(--color-surface)}
.cloud-card.wide{max-width:1120px}
@media (min-width:641px){.cloud-card.wide{padding:32px 36px 28px}}

/* Brand: scale the mark + wordmark to the mockup's 56px lockup weight without swapping
   assets (owner call — the single-image lockup belongs to the rename kit's own pass). */
.cloud-dash-head .cloud-brand{gap:12px}
.cloud-dash-head .cloud-logo-mark{height:56px}
.cloud-dash-head .cloud-wordmark{font-size:22px}
.cloud-dash-head .who{font-size:14px;gap:20px}
/* "Manage Users" is a text link in the mockup, not an outlined button on an opaque near-black
   border. Sign Out stays a secondary button (see the .cloud-btn tier below). */
/* MANAGE USERS IS A BUTTON, SO IT LOOKS LIKE ONE (g448)
   Owner: "the Manage Users button is not really a button — it should have a full box hover at
   least." It had been stripped to plain text on purpose: `padding:0; min-height:0;` and a
   transparent border, with hover changing nothing but the colour. Sitting beside the signed-in
   email, which is also 14px muted text, there was nothing to tell them apart — Gemini read it as
   a label too, independently.
   It takes the control geometry now (36px rung, control radius, real padding) and answers to the
   pointer with the standard hover fill plus a hairline. It stays SECONDARY: transparent at rest,
   so the filled Sign out beside it is still the one button with weight, per §6's rationing of the
   primary. The box appears on hover, which is exactly what was asked for. */
.cloud-dash-head .who button.admin-link{
  border:1px solid transparent;background:transparent;
  min-height:36px;padding:0 12px;border-radius:var(--radius-control);
  font-size:14px;font-weight:var(--weight-body);color:var(--color-muted);
  transition:background .14s,border-color .14s,color .14s}
.cloud-dash-head .who button.admin-link:hover{
  background:var(--color-hover);border-color:var(--color-line);color:var(--color-ink)}
.cloud-dash-head .who button.admin-link:focus-visible{
  border-color:var(--color-focus);color:var(--color-ink)}

/* Search row: the mockup's field is the 44px control at body size on a 420 measure, with a
   transparent resting border that goes to ink on focus. */
.cloud-dash-search .cloud-search{
  flex:0 1 420px;max-width:420px;min-height:44px;padding:0 16px;
  font-size:14px;border-color:transparent;background:var(--color-control)}
.cloud-dash-search .cloud-search:focus{border-color:var(--color-ink);background:var(--color-control)}
.cloud-version{font-size:12px;letter-spacing:normal;color:var(--color-faint)}

/* Section heading is the house eyebrow: 11/500/.12em on --faint, not 10.5/600 on --muted. */
.cloud-section-title{margin:32px 0 12px}
.cloud-section-title h2{
  font-size:var(--text-eyebrow);font-weight:var(--weight-eyebrow);
  letter-spacing:var(--tracking-eyebrow);color:var(--color-faint)}

/* Entity rows: --surface, 18/20 padding, gap 14, a 16px drawn chevron (see cloud.js),
   16/500 name, and the SOP count at body-adjacent 13 rather than 10.5. */
/* v1.7: with the container hairline gone, TONE is the only separation left — and these are
   sibling objects in a list, each its own expandable entity, so they earn one rung (§2
   layering rule 2). At --color-surface they sat on a --color-surface card and merged into
   one field: measured ΔL* 0.00 against the parent in BOTH themes before this. */
.cloud-entity{background:var(--color-surface2);border-radius:var(--radius-card)}
.cloud-entity-head .caret{display:inline-flex;width:16px;height:16px;color:var(--color-faint)}
.cloud-entity-head .ent-name{font-size:16px;font-weight:var(--fw-control)}
.cloud-entity-head .ent-count{font-size:14px;color:var(--color-faint)}
/* The row's spacing increases are >=641 only. This build's row carries a move-up/down group
   the mockup's does not, so at 320 the mockup's 14px gap and 64px count column overflowed it
   by 23px (measured; pristine was clean). The 16px chevron stays at every width — it is the
   drawn icon this pass added and shrinking it would defeat the point. */
@media (min-width:641px){
  .cloud-entity-head{gap:14px;padding:18px 20px}
  .cloud-entity-head .ent-count{min-width:64px}
}
/* At <=640 the row runs out of width before .ent-name can shrink any further (it is already
   flex:1;min-width:0 and collapses to 0). The drawn chevron steps down to 12px and the gap to
   10 — still a real icon, unlike the 6px text glyph it replaced. Measured: clears at 320. */
@media (max-width:640px){
  .cloud-entity-head{gap:10px}
  .cloud-entity-head .caret{width:12px;height:12px}
  .cloud-entity-head .caret svg{width:12px;height:12px}
}
.cloud-entity-head .cloud-badge{font-weight:var(--fw-control);padding:4px 10px}
.cloud-badge.owner{border-color:var(--color-line)}

/* Footer signature: the mockup's tracking is .18em and the lockup sits at 34px. */
.cloud-axdi-sig{margin-top:36px;padding-top:24px;text-align:center}
.cloud-axdi-cap{letter-spacing:.18em}
.cloud-axdi-lockup{height:34px}

/* ===== Cloud button tier (owner-confirmed, applies across the cloud layer) =====
   .cloud-btn.sm was 32 tall at --fs-label-sm (10.5px) — below the rulebook's 11px floor —
   and rendered at 28 next to 44px fields. The mockups use ONE button size on these screens:
   the 36px control at 13/500 on r10.

   Deliberately NOT the base .cloud-btn: that one is 42px and is the SIGN-IN screen's
   full-width block button, which no mockup in the set covers — raising the tier there would
   have *shrunk* it. The console is untouched too; it has its own .cns-btn* family.
   >=641px only: below that the cloud screens keep their taller touch targets. */
@media (min-width:641px){
  .cloud-btn.sm{min-height:36px;padding:0 16px;font-size:var(--text-button);letter-spacing:.01em}
  /* Sign Out is a head button, not a .cloud-btn — same 36px secondary as the mockup. */
  .cloud-dash-head .who button:not(.admin-link){
    min-height:36px;padding:0 16px;font-size:var(--text-button);
    border-radius:var(--radius-control);border-color:var(--color-linestrong)}
}

/* ===== AXD SOP lockup =====
   The head mark is now the brand lockup itself rather than a node glyph plus a "AXD SOP"
   caption, matching screen 12. Light/dark pair, same mechanism as .cloud-axdi-lockup. */
.cloud-logo-mark-light{display:none}
:root[data-mode="light"] .cloud-logo-mark{display:none}
:root[data-mode="light"] .cloud-logo-mark-light{display:block}
/* the lockup carries the name, so no wordmark sits beside it */
.cloud-brand .cloud-wordmark{display:none}
.cloud-brand.lg .cloud-logo-mark{height:72px}

/* ===== User Management console (screen 13) =====
   SHAPE IS DELIBERATELY KEPT (owner call): the compact full-bleed overlay, the full-width
   analytics strip and the boxed table are a later rebuild that shipped to prod (g240–g244);
   the locked screen draws a centred 1200px modal with the analytics as four loose cards.
   Recorded as a standing divergence. Everything below is type and tokens only. */

/* Head + tabs. The title was the page-display tier (28/300); this is a modal-class overlay,
   so it takes the 22/400 modal title. Tabs were 14/400 on a 10px gutter — the mockup's are
   13/500 on a 22px gap with the padding carrying the row height. */
.cns-title{font-size:28px;font-weight:var(--weight-body);letter-spacing:var(--tracking-display)}
.cns-tabs{gap:22px}
.cns-tabs .cns-tab{font-size:14px;font-weight:var(--fw-control);padding:12px 0}

/* Analytics cards: card radius and the mockup's 16/18 padding; the value is the display tier
   (30/300), not a 28/500 bold; label tracking to the eyebrow's .12em; sub/delta off 10.5. */
.cns-acard{border-radius:var(--radius-card);padding:12px 13px}
@media (min-width:721px){.cns-acard{padding:16px 18px}}
.cns-acard-k{letter-spacing:var(--tracking-eyebrow)}
.cns-stat-value{font-size:28px;font-weight:var(--fw-display);letter-spacing:var(--tracking-display)}
.cns-stat-sub{font-size:12px;color:var(--color-faint)}
.cns-stat-delta{font-size:12px}

/* Filter tiles. Scoped to the FILTER ROW: `.cns-chip` is shared with the inline status pills
   in the table (span.cns-chip.cns-chip-neutral, a 24px 10.5/500 pill), which the mockup draws
   as .grp/.badge and which must stay small. Only the row's buttons become the mockup's
   34-tall .ftile. */
.cns-status-chips>button.cns-chip{
  min-height:36px;padding:0 14px;border-radius:var(--radius-control);
  font-size:14px;font-weight:var(--fw-control);
  background:transparent;border:1px solid var(--color-line);color:var(--color-muted)}
.cns-status-chips>button.cns-chip:hover{color:var(--color-ink)}
.cns-status-chips>button.cns-chip.active,.cns-status-chips>button.cns-chip[aria-pressed="true"]{
  background:var(--color-surface2);border-color:var(--color-linestrong);color:var(--color-ink)}
/* the warn chip was an off-palette warm brown (srgb .129/.116/.097) — onto the status recipe */
.cns-chip-warn{
  background:var(--sev-warn-fill)!important;border:1px solid var(--sev-warn-line)!important;
  color:var(--color-warning)!important}

/* Toolbar: the search field and its button are the 44px control tier, r10 not r14, and the
   field sits on --control with a .08 hairline at body size (it was 12.5/500 on --surface). */
.cns-btn,.cns-btn-primary{border-radius:var(--radius-control)}
.cns-search input{
  border-radius:var(--radius-control);background:var(--color-control);
  border-color:var(--color-line);font-size:14px;font-weight:var(--weight-body);padding:0 16px}
@media (min-width:721px){
  .cns-search input{min-height:44px}
  .cns-toolbar .cns-btn{min-height:44px;padding:0 22px}
}

/* Person cell: the email is the row's content, so 13.5/ink rather than the flat 12.5 every
   cell shared. The avatar is a round dot with a hairline, not an r8 tile.
   The mockup's `.pp-you` sub-caption has NO counterpart here — this build's person cell is
   just avatar + email — so nothing was invented for it. */
/* g449 — a rounded SQUARE, not a circle. Owner: "the avatars are circles that have to be
   square-ish, rounded squares." The base .cns-avatar was already r8; this override was the only
   thing rounding it to a dot, and it also carried two initials' worth of width for one letter. */
.cns-person .cns-avatar{
  border-radius:var(--radius-chip);border:1px solid var(--color-line);
  background:var(--color-control);color:var(--color-muted);font-size:12px;
  letter-spacing:.02em}
.cns-person strong{font-size:14px;font-weight:var(--weight-body)}