*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

/* ── Mail HTML is not page HTML ──────────────────────────────────────
   The reset above is right for this application and wrong for the thing
   it is previewing. A signature is written to be read in a mail client,
   which has no stylesheet of ours and keeps the browser's own defaults -
   so a `<p>` there has a one-line gap above and below it, and here it had
   none. The editor drew the name, the job title and the three contact
   lines packed together while Outlook drew them a line apart, and both
   were faithfully showing what *their* stylesheet said. A preview that
   disagrees with the send is worse than no preview: somebody designs
   against it.

   Every mail surface restores the content-box and type defaults. Paragraph
   spacing instead matches SignatureRenderService.NormalizeParagraphStyles:
   0 0 6px 0 when the author supplies no margin. Browser-default 1em gaps
   were wrong too, because the send renderer has already replaced them.
   The shared designer's live preview opts in through `.mail-body`.

   `box-sizing` matters for the same reason and is easier to miss: a cell
   with a width and padding is content-box everywhere this markup is going
   to be read, and border-box here made it narrower in the editor than in
   the inbox.

   **A new preview surface has to be added to this list.** Nothing fails if
   it is not - it just quietly lies - which is why `MailPreviewCssTests`
   names each one and why `.mail-body` exists for anything added later.

   The surfaces are: `.mail-body` (anything added later), `.sig-design-edit`
   (the shared design canvas, both editors), `.sig-preview-content` (the
   signature editor's live preview), `.ms-preview` (My signature),
   `.tst-preview-content` (the tester), `.cm-preview` and `.dc-preview` (the
   campaign and disclaimer editors), and the three card wrappers -
   `.sig-ov-preview-inner`, `.lib-shot-inner`, `.tpl-card-preview-inner`.

   The portal's own chrome inside these containers - the variable chips, the
   empty-state notes - is matched by a longer selector and keeps its own
   spacing, so only the previewed markup moves. */

/* And the type the signature inherits when it sets none of its own, which
   is most of them: a mail client gives it the reader's default, and for
   the Outlook this product is aimed at that is 11pt Calibri at the
   browser's own line spacing. The application's body type - 14px Manrope
   at 1.5 - was reaching in instead, so every line in the canvas was a
   quarter taller and a point smaller than it will be in the inbox.

   `line-height: normal` is the one that shows: 21px against the ~17px a
   mail client gives the same text. */
.mail-body,
.sig-design-edit,
.sig-preview-content,
.ms-preview,
.tst-preview-content,
.cm-preview,
.dc-preview,
.sig-ov-preview-inner,
.lib-shot-inner,
.tpl-card-preview-inner {
  font-family: Calibri, Arial, sans-serif;
  font-size: 11pt;
  line-height: normal;
}

.mail-body *,
.sig-design-edit *,
.sig-preview-content *,
.ms-preview *,
.tst-preview-content *,
.cm-preview *,
.dc-preview *,
.sig-ov-preview-inner *,
.lib-shot-inner *,
.tpl-card-preview-inner * { box-sizing: content-box; }

.mail-body p,
.sig-design-edit p,
.sig-preview-content p,
.ms-preview p,
.tst-preview-content p,
.cm-preview p,
.dc-preview p,
.sig-ov-preview-inner p,
.lib-shot-inner p,
.tpl-card-preview-inner p { margin: 0 0 6px 0; }

.mail-body ul, .mail-body ol,
.sig-design-edit ul, .sig-design-edit ol,
.sig-preview-content ul, .sig-preview-content ol,
.ms-preview ul, .ms-preview ol,
.tst-preview-content ul, .tst-preview-content ol,
.cm-preview ul, .cm-preview ol,
.dc-preview ul, .dc-preview ol,
.sig-ov-preview-inner ul, .sig-ov-preview-inner ol,
.lib-shot-inner ul, .lib-shot-inner ol,
.tpl-card-preview-inner ul, .tpl-card-preview-inner ol { margin: 1em 0; padding-left: 40px; }

.mail-body blockquote,
.sig-design-edit blockquote,
.sig-preview-content blockquote,
.ms-preview blockquote,
.tst-preview-content blockquote,
.cm-preview blockquote,
.dc-preview blockquote,
.sig-ov-preview-inner blockquote,
.lib-shot-inner blockquote,
.tpl-card-preview-inner blockquote { margin: 1em 40px; }

/* Signatures use headings rarely and the library uses them for a name, so
   the sizes have to be the browser's rather than this application's. */
.mail-body h1, .sig-design-edit h1, .sig-preview-content h1, .ms-preview h1,
.tst-preview-content h1, .cm-preview h1, .dc-preview h1,
.sig-ov-preview-inner h1, .lib-shot-inner h1, .tpl-card-preview-inner h1
{ font-size: 2em; margin: .67em 0; font-weight: bold; }

.mail-body h2, .sig-design-edit h2, .sig-preview-content h2, .ms-preview h2,
.tst-preview-content h2, .cm-preview h2, .dc-preview h2,
.sig-ov-preview-inner h2, .lib-shot-inner h2, .tpl-card-preview-inner h2
{ font-size: 1.5em; margin: .83em 0; font-weight: bold; }

.mail-body h3, .sig-design-edit h3, .sig-preview-content h3, .ms-preview h3,
.tst-preview-content h3, .cm-preview h3, .dc-preview h3,
.sig-ov-preview-inner h3, .lib-shot-inner h3, .tpl-card-preview-inner h3
{ font-size: 1.17em; margin: 1em 0; font-weight: bold; }

.mail-body h4, .sig-design-edit h4, .sig-preview-content h4, .ms-preview h4,
.tst-preview-content h4, .cm-preview h4, .dc-preview h4,
.sig-ov-preview-inner h4, .lib-shot-inner h4, .tpl-card-preview-inner h4
{ font-size: 1em; margin: 1.33em 0; font-weight: bold; }

html, body {
  height: 100%;
  background: var(--bg-void);
  color: var(--text-body);
  font-family: var(--font-display);
  font-size: 14px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}

/* ── Scrollbar ────────────────────────────────────────────────── */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--border-mid); border-radius: 3px; }
::-webkit-scrollbar-thumb:hover { background: var(--border-hi); }

/* ── Layout ───────────────────────────────────────────────────── */
/* The same frame as the rest of the suite (TS_Shell/wwwroot/css/shell.css):
   the mark on navy above a navy sidebar, a white bar across the content.
   The signature workspace keeps its own page styles below; only the chrome
   is shared, so moving between the apps does not feel like changing
   product. */
#app {
  display: grid;
  grid-template-rows: 60px 1fr;
  grid-template-columns: 280px minmax(0, 1fr);
  grid-template-areas:
    "brandbar topbar"
    "sidebar  main";
  height: 100vh;
  overflow: hidden;
}

#app.no-sidebar {
  grid-template-columns: 1fr;
  grid-template-areas:
    "topbar"
    "main";
}

#brandbar {
  grid-area: brandbar;
  display: flex;
  align-items: center;
  padding: 0 18px;
  background: var(--brand-navy);
}
#app.no-sidebar #brandbar { display: none; }

/* ── Top bar ──────────────────────────────────────────────────── */
#topbar {
  grid-area: topbar;
  display: flex;
  align-items: center;
  gap: 0;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  position: relative;
  z-index: 100;
  box-shadow: var(--shadow-sm);
}

.logo {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-right: 32px;
  text-decoration: none;
}

.logo svg {
  width: 30px;
  height: 34px;
  flex-shrink: 0;
}

.logo-text-group {
  display: flex;
  flex-direction: column;
  gap: 2px;
  border-left: 2px solid rgba(43, 127, 255, 0.4);
  padding-left: 11px;
  line-height: 1;
}

.logo-text {
  font-weight: 800;
  font-size: 13px;
  color: var(--text-white);
  letter-spacing: 0.8px;
}

.logo-sub {
  font-size: 8px;
  color: var(--accent);
  font-family: var(--font-mono);
  font-weight: 300;
  letter-spacing: 3px;
  text-transform: uppercase;
  margin-top: 3px;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-left: auto;
}

.user-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px 5px 6px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 20px;
  cursor: pointer;
  transition: border-color .15s;
  position: relative;
}

.user-chip:hover { border-color: var(--border-hi); }

.user-avatar {
  width: 24px; height: 24px; border-radius: 50%;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 11px;
  font-weight: 600;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--font-mono);
}

.user-name { font-size: 12px; color: var(--text-hi); font-weight: 500; }

.user-menu {
  position: absolute;
  top: 100%;
  right: 0;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-width: 150px;
  box-shadow: var(--shadow);
  display: none;
  z-index: 1000;
  margin-top: 4px;
}

.user-chip:hover .user-menu { display: block; }

.sign-out-link {
  display: block;
  padding: 8px 12px;
  color: var(--text-body);
  text-decoration: none;
  font-size: 13px;
  transition: all .15s;
}

.sign-out-link:hover { background: var(--bg-raised); color: var(--text-hi); }

/* ── Sidebar ──────────────────────────────────────────────────── */
#sidebar {
  grid-area: sidebar;
  background: var(--brand-navy);
  border-right: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* The menu begins at the top of the sidebar. There was a search box
   above it in a .sidebar-header, with a magnifying glass and a filtering
   behaviour; both are gone - see the note in site.js. The nav's own 8px
   of padding is what holds the first group off the header now. */

.sidebar-nav {
  flex: 1;
  overflow-y: auto;
  padding: 8px 0;
}

.nav-group {
  position: relative;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1px 10px;
  border-radius: 9px;
  padding: 8px 12px;
  width: auto;
  color: #c8d6ee;
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  transition: all .15s;
  cursor: pointer;
  background: transparent;
  border: none;
  text-align: left;
}

.nav-item:hover {
  background: rgba(255, 255, 255, .07);
  color: #fff;
}
.nav-item:hover i { color: var(--brand-sky); }

.nav-item.active {
  color: #fff;
  background: var(--accent);
}
.nav-item.active i { color: #fff; }

.nav-item i {
  width: 18px;
  text-align: center;
  font-size: 14px;
  flex-shrink: 0;
  color: #8fa6cd;
}

.nav-group-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin: 1px 10px;
  border-radius: 9px;
  padding: 8px 12px;
  width: auto;
  background: none;
  border: none;
  cursor: pointer;
  color: #c8d6ee;
  font-size: 13px;
  font-weight: 500;
  font-family: var(--font-display);
  text-align: left;
  width: 100%;
  transition: all .15s;
}

.nav-group-header:hover {
  color: #fff;
  background: rgba(255, 255, 255, .07);
}
/* The leading icon is a fixed box, on a group header as much as on a
   plain item.
   
   Font Awesome glyphs are not the same width - a bullhorn is wider than a
   gear, scales wider than both - so without a box the label starts
   wherever the glyph happens to end and every line in the menu begins at
   a different place. The plain items had this; the group headers never
   did, which is exactly the set that looked out of alignment. */
.nav-item > i:first-child,
.nav-group-header > i:first-child {
  width: 18px;
  flex: none;
  text-align: center;
  font-size: 14px;
}

.nav-group-header i { color: #8fa6cd; }
.nav-group-header:hover i { color: var(--brand-sky); }

.nav-group-header i:last-child {
  margin-left: auto;
  font-size: 10px;
  transition: transform .15s;
}

.nav-group-header[aria-expanded="true"] i:last-child {
  transform: rotate(180deg);
}

.nav-sub-item {
  padding: 6px 16px 6px 44px;
  font-size: 12px;
  color: var(--text-mute);
}

.nav-sub-item:hover {
  color: var(--text-hi);
  background: var(--bg-float);
}

/* ── Collapsing groups ────────────────────────────────────────────
   The sidebar's groups are Bootstrap collapses, and its JavaScript is
   loaded - but its stylesheet never was, and on purpose: this app has a
   design system of its own and did not want 280KB of another one.

   Collapse is CSS, though. Without these three rules every submenu
   renders open and the toggle class does nothing visible, which is
   exactly how it behaved: a menu that would not collapse. Bootstrap's JS
   sets the inline height during the animation, so this is all it needs
   from a stylesheet. */
.collapse:not(.show) { display: none; }
.collapsing {
  position: relative;
  height: 0;
  overflow: hidden;
  transition: height .25s ease;
}
@media (prefers-reduced-motion: reduce) {
  .collapsing { transition: none; }
}

/* A page the menu describes but the product does not have yet. Shown
   rather than hidden, because the shape of what is coming is useful and a
   link to nothing pretending to work is not. */
.nav-soon {
  color: #5f7290;
  cursor: default;
}
.nav-soon:hover { background: transparent; color: #5f7290; }
.nav-soon::after {
  content: "soon";
  margin-left: auto;
  font-size: 9px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #7f93bb;
  opacity: .75;
}

.sidebar-footer {
  padding: 12px 16px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.sidebar-footer .nav-item {
  padding: 6px 8px;
  font-size: 12px;
}

/* ── Main content ─────────────────────────────────────────────── */
#main {
  grid-area: main;
  display: flex;
  flex-direction: column;
  overflow-y: auto;
  overflow-x: hidden;
  background: var(--bg-void);
  padding: 20px;
}

/* Content area */
main {
  flex: 1;
  overflow-y: auto;
}

/* Utility classes */
.d-block { display: block; }
.text-muted { color: var(--text-mute); }
.text-soft { color: var(--text-soft); }
.bg-raised { background: var(--bg-raised); }
.border { border: 1px solid var(--border); }

/* Links */
a {
  color: var(--accent);
  text-decoration: none;
  transition: color .15s;
}

a:hover {
  color: var(--accent-hi);
  text-decoration: underline;
}

/* One action style for the portal, editors and their legacy class names. */
.btn, .sig-pane-btn, .cm-btn, .dc-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 32px;
  gap: 6px;
  padding: 6px 14px;
  border-radius: var(--radius-sm);
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-display);
  line-height: 18px;
  cursor: pointer;
  border: 1px solid var(--border);
  background: var(--bg-raised);
  color: var(--text-hi);
  transition: all .15s;
  /* A button's label is what the button is, so it never wraps. Left to
     wrap, "Start from the library" became three stacked words in a bar
     52px tall and spilled out of it. A label that has to break is a
     sign the layout around it is wrong, not something to break. */
  white-space: nowrap;
}

/* The hidden attribute is display:none at the lowest specificity there is,
   so the display above beats it and a hidden button stays on screen - the
   colleagues-version Add, Remove and pills were always visible. Said once
   here, for every button that wears these classes. */
.btn[hidden], .sig-pane-btn[hidden], .cm-btn[hidden], .dc-btn[hidden], .pm-seg[hidden] { display: none; }

.btn:hover, .sig-pane-btn:hover, .cm-btn:hover, .dc-btn:hover {
  background: var(--bg-float);
  border-color: var(--border-hi);
  color: var(--text-white);
}

.btn-primary, .cm-btn-primary, .dc-btn-primary {
  background: var(--accent);
  color: white;
  border-color: var(--accent);
}

.btn-primary:hover, .cm-btn-primary:hover, .dc-btn-primary:hover {
  background: var(--accent-dim);
  border-color: var(--accent-dim);
  color: #fff;
}

.btn:disabled, .sig-pane-btn:disabled, .cm-btn:disabled, .dc-btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  box-shadow: none;
}
.btn:focus-visible, .sig-pane-btn:focus-visible, .cm-btn:focus-visible, .dc-btn:focus-visible,
.sig-tb-btn:focus-visible, .sig-layout-map button:focus-visible, .sig-layout-presets button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}
.cm-btn-danger, .dc-btn-danger { margin-left: auto; }
.cm-btn-quiet, .dc-btn-quiet { background: transparent; color: var(--accent); }

/* ── Landing page ─────────────────────────────────────────────── */
.landing-wrapper {
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  background: var(--bg-void);
}

#landing-topbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 20px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  padding: 0 20px;
  height: 56px;
  box-shadow: var(--shadow-sm);
}

#landing-topbar .logo {
  margin-right: 0;
}

.landing-content {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
}

.landing-container {
  width: 100%;
  max-width: 600px;
  margin: 0 auto;
}

.landing-content h1 {
  font-size: 48px;
  font-weight: 800;
  color: var(--accent);
  margin-bottom: 20px;
  text-align: center;
  font-family: var(--font-display);
}

.landing-content p {
  font-size: 18px;
  color: var(--text-soft);
  text-align: center;
  margin-bottom: 20px;
}

.landing-content .btn {
  display: inline-flex;
  margin: 30px auto 0;
  padding: 10px 28px;
  font-size: 14px;
}

.landing-footer {
  padding: 20px;
  background: var(--bg-base);
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}

.footer-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 13px;
  color: var(--text-mute);
}

.footer-row a {
  color: var(--text-soft);
}

.footer-row a:hover {
  color: var(--accent);
}

#workspace-menu { display: none; }

/* Responsive */
@media (max-width: 768px) {
  /* The sidebar is hidden on a phone, so the brand bar takes the whole
     width above the content rather than leaving its column empty. */
  /* The topbar's row is auto, not a second fixed 52px: it holds the
     actions on a line of their own here, and a fixed row would clip
     exactly what the rule above stopped being squeezed. */
  #app {
    grid-template-columns: 1fr;
    grid-template-rows: 52px auto 1fr;
    grid-template-areas:
      "brandbar"
      "topbar"
      "main";
  }

  #brandbar { padding: 0 14px; }
  #topbar { min-height: 52px; padding-left: 14px; padding-right: 14px; }

  #workspace-menu {
    display: inline-flex;
    align-items: center;
    margin-left: auto;
    padding: 8px 14px;
    background: transparent;
    border: 1px solid var(--on-navy-muted);
    border-radius: var(--radius);
    color: white;
    font: inherit;
  }
  #sidebar { display: none; }
  #app.menu-open {
    grid-template-rows: 52px auto minmax(0, auto) minmax(0, 1fr);
    grid-template-areas: "brandbar" "topbar" "sidebar" "main";
  }
  #app.menu-open #sidebar { display: flex; max-height: 48vh; }

  .landing-content h1 {
    font-size: 32px;
  }

  .landing-content p {
    font-size: 14px;
  }

  .footer-row {
    flex-direction: column;
    gap: 10px;
    text-align: center;
  }

}

/* ── Dashboard ────────────────────────────────────────────────── */
#main {
  padding: 24px;
}

/* The whole dashboard was rewritten around what the organisation has
   actually done rather than what its licence permits. The old styles -
   a marketing hero, four cards of label-above-value, a progress bar
   dividing by 365 - went with the markup they dressed.

   What survived: .license-badge, .progress-bar, .progress-fill and
   .status-indicator, which LicenseDetails also uses. */

.dash {
  max-width: 1180px;
  display: flex;
  flex-direction: column;
  gap: 22px;
}

/* ── The one line that says what this is ──────────────────────── */
.dash-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  flex-wrap: wrap;
}

.dash-head h1 {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -.01em;
  color: var(--text-hi);
}

.dash-sub {
  display: flex;
  align-items: center;
  gap: 7px;
  flex-wrap: wrap;
  margin-top: 5px;
  font-size: 13px;
  color: var(--text-mute);
}

.dash-head-actions { display: flex; gap: 8px; flex-wrap: wrap; }

.dash-pill {
  display: inline-flex;
  align-items: center;
  height: 20px;
  padding: 0 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .02em;
  background: var(--bg-float);
  color: var(--text-mute);
}

.dash-pill-trial { background: #fdf3e3; color: #7a4a06; }
.dash-pill-basic { background: #e7f0fd; color: var(--accent-dim); }
.dash-pill-pro { background: #e8f7ee; color: #11633a; }
.dash-pill-progress { background: var(--bg-float); color: var(--text-soft); }

/* ── Four figures ─────────────────────────────────────────────── */
.dash-figures {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}

.dash-figure {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 15px 16px 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dash-figure-label { font-size: 12px; font-weight: 600; color: var(--text-mute); }

.dash-figure-value {
  font-size: 26px;
  font-weight: 700;
  line-height: 1.1;
  letter-spacing: -.02em;
  color: var(--text-hi);
  /* Every figure here is data, so the digits are the same width: a
     column of them lines up and a changing one stops jittering. */
  font-variant-numeric: tabular-nums;
}

.dash-figure-of { font-size: 15px; font-weight: 600; color: var(--text-dim); }
.dash-figure-unknown { color: var(--text-dim); }
.dash-figure-foot { font-size: 11.5px; color: var(--text-dim); }
.dash-foot-warn { color: #b4530a; font-weight: 600; }

.dash-meter {
  height: 4px;
  margin-top: 6px;
  border-radius: 2px;
  background: var(--bg-float);
  overflow: hidden;
}

.dash-meter span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

.dash-meter.is-tight span { background: var(--amber); }

/* ── Needs a look ─────────────────────────────────────────────── */
.dash-block-title {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.dash-attention {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.dash-attn {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  border-bottom: 1px solid var(--border);
}

.dash-attn:last-child { border-bottom: 0; }

.dash-attn-ico {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  display: grid;
  place-items: center;
  font-size: 11px;
}

.dash-attn-ico.is-warn { background: #fdf3e3; color: #7a4a06; }
.dash-attn-ico.is-info { background: #e7f0fd; color: var(--accent-dim); }
.dash-attn-ico.is-ok { background: #e8f7ee; color: #11633a; }

.dash-attn-text { flex: 1; font-size: 13px; color: var(--text-body); }
.dash-attn-text b { color: var(--text-hi); font-weight: 600; }
.dash-attn-when { font-size: 11.5px; color: var(--text-dim); white-space: nowrap; }

/* ── The two panels ───────────────────────────────────────────── */
.dash-cols {
  display: grid;
  grid-template-columns: 1.35fr 1fr;
  gap: 16px;
  align-items: start;
}

/* On its own once there is nothing left to set up. */
.dash-cols > .dash-card:only-child { max-width: 520px; }

.dash-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.dash-card-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
}

.dash-card-head h2 { font-size: 14px; font-weight: 700; color: var(--text-hi); }
.dash-card-body { padding: 14px 16px; }

.dash-card-actions {
  display: flex;
  gap: 8px;
  margin-top: 14px;
  flex-wrap: wrap;
}

/* ── Setting up ───────────────────────────────────────────────── */
.dash-steps { list-style: none; }

.dash-steps li {
  display: flex;
  gap: 11px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px solid var(--bg-float);
}

.dash-steps li:last-child { border-bottom: 0; padding-bottom: 0; }
.dash-steps li:first-child { padding-top: 0; }

.dash-step-mark {
  flex-shrink: 0;
  width: 18px;
  height: 18px;
  margin-top: 1px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  font-size: 10px;
  font-weight: 700;
}

.dash-steps li.is-done .dash-step-mark { background: var(--green); color: #fff; font-size: 9px; }

.dash-steps li.is-todo .dash-step-mark {
  background: var(--bg-float);
  border: 1px solid var(--border-mid);
  color: var(--text-dim);
}

.dash-step-t { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.dash-steps li.is-done .dash-step-t { font-weight: 500; color: var(--text-mute); }
.dash-step-d { font-size: 12px; color: var(--text-mute); margin-top: 1px; }
.dash-step-d a { color: var(--accent); text-decoration: none; font-weight: 600; }
.dash-step-d a:hover { text-decoration: underline; }

/* ── The licence, as facts ────────────────────────────────────── */
.dash-facts {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 9px 20px;
  font-size: 13px;
}

.dash-facts dt { color: var(--text-mute); }

.dash-facts dd {
  text-align: right;
  font-weight: 600;
  color: var(--text-hi);
  font-variant-numeric: tabular-nums;
}

@media (max-width: 1100px) {
  .dash-figures { grid-template-columns: repeat(2, 1fr); }
  .dash-cols { grid-template-columns: 1fr; }
}

@media (max-width: 640px) {
  .dash-figures { grid-template-columns: 1fr; }
  .dash-attn { flex-wrap: wrap; }
}

.btn-block {
  width: 100%;
}

.mt-3 {
  margin-top: 12px;
}
/* ── The top bar says where you are ───────────────────────────── */
.topbar-crumbs {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--text-mute);
  white-space: nowrap;
}

.topbar-crumbs b { color: var(--text-hi); font-weight: 600; }
.topbar-crumbs i { font-size: 9px; color: var(--text-dim); }

/* Where a page puts the action it is for. Takes the slack so the user
   chip stays on the right, and is empty on pages that have no one
   action - which is most of them. */
.topbar-slot {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
  padding-right: 14px;
}

.topbar-slot:empty { padding-right: 0; }

/* Nothing in this bar is squeezed to make room.
   A flex child may be shrunk below the width its own content needs,
   and that is what was happening here: from 900px down all three
   actions were squashed narrower than their labels, wrapped onto two
   and three lines, and overflowed a bar with a fixed height. The
   actions keep their width; the bar gives way instead, by letting them
   take a line of their own (the rule below). */
.topbar-slot > * { flex-shrink: 0; }

/* The crumb is the one thing here that may give way, because it is the
   one thing said twice - the page carries its own title underneath. It
   shrinks, and the page's own name ellipses, before an action is
   touched. */
.topbar-crumbs { min-width: 0; flex-shrink: 1; }
.topbar-crumbs b { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.topbar-crumbs > span { flex-shrink: 0; }

/* Below this the crumb, the actions and the user chip no longer fit on
   one line at any honest size. The actions drop to a line of their own
   rather than being made to fit, and the bar is auto-height from here
   down so a second line makes it taller instead of spilling out of it.
   900px rather than the 768px phone breakpoint because that is where it
   measurably breaks - with the sidebar still on screen, on a laptop
   with a narrow window. */
/* Only down to the phone breakpoint, where the grid becomes three
   stacked rows and states its own. This block is lower in the file than
   that one, so an unscoped `grid-template-rows` here would win and
   leave a three-area layout with two rows - which stretches the bar to
   most of the window. Measured, after doing exactly that. */
@media (max-width: 900px) and (min-width: 769px) {
  #app { grid-template-rows: auto 1fr; }
}

@media (max-width: 900px) {
  #topbar {
    flex-wrap: wrap;
    row-gap: 8px;
    padding-top: 8px;
    padding-bottom: 8px;
    min-height: 60px;
  }

  .topbar-slot {
    order: 2;
    flex: 1 1 100%;
    justify-content: flex-start;
    padding-right: 0;
    /* And if even one line will not hold them, they stack rather than
       squeeze - which is the whole point of the rule above. */
    flex-wrap: wrap;
    row-gap: 8px;
  }

  .topbar-right { margin-left: auto; }
}

/* Said once beside the name. The organisation is created named after its
   own tenant GUID and most people do not know it can be changed. */
.dash-rename {
  font-size: 12px;
  color: var(--text-dim);
  margin-top: 4px;
}

.dash-pill-ok { background: #e8f7ee; color: #11633a; }
.dash-pill-ok i { font-size: 9px; margin-right: 4px; }

/* Finished, so it recedes rather than disappearing. It used to hide
   itself at four of four, which reads as a section having gone missing. */
.dash-card.is-complete .dash-steps li.is-done .dash-step-d { color: var(--text-dim); }

/* ── Usage: who the mail was going to ─────────────────────────── */
.us-split {
  display: flex;
  height: 34px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
}

.us-split > div {
  display: grid;
  place-items: center;
  font-size: 11.5px;
  font-weight: 700;
  color: #fff;
  white-space: nowrap;
  overflow: hidden;
  font-variant-numeric: tabular-nums;
}

/* One hue, three weights. Three different colours would read as three
   unrelated things, and mixed is a kind of external.
   The weights are chosen for contrast against the label drawn on them,
   measured rather than picked: white is 8:1 on #0b4ea2 and 5.25:1 on
   #2d6eb4. The middle weight used to be #4a8fd4, which is 3.4:1 - a
   WCAG failure on 11.5px bold, and invisible to everything except a
   contrast check. */
.us-split-int { background: #2d6eb4; }
.us-split-ext { background: #0b4ea2; }
.us-split-mix { background: #9db9d8; }

/* The pale band carries ink rather than white: 5.68:1 against 2.03:1.
   It needs the child selector because `.us-split > div` sets white and
   wins on specificity - which is why `.us-split-mix { color: ... }`
   had been declared, and silently overridden, since this bar was
   written. */
.us-split > .us-split-mix,
.us-split > .us-cov-off { color: var(--text-hi); }

.us-legend {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 20px;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
}

.us-key {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 2px;
  margin-right: 6px;
}

.us-key-int { background: #2d6eb4; }

/* ── Usage: who has the add-in ────────────────────────────────── */
/* The same hue and the same three weights as the audience bar above,
   because it is the same kind of bar - but its own names, because the
   meaning is coverage rather than audience and the strongest band is
   the good one. Borrowing .us-split-ext for "never set it up" would
   have drawn the worst state in the boldest colour. */
.us-cov-on    { background: #0b4ea2; }
.us-cov-quiet { background: #2d6eb4; }
.us-cov-off   { background: #9db9d8; }

.us-key-cov-on    { background: #0b4ea2; }
.us-key-cov-quiet { background: #2d6eb4; }
.us-key-cov-off   { background: #9db9d8; }

/* The names behind a gap. A heading rather than a card inside a card:
   these are two lists in one panel, not two panels. */
.us-gap { min-width: 0; }

.us-gap-title {
  margin: 18px 0 8px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--text-mute);
}

.us-key-ext { background: #0b4ea2; }
.us-key-mix { background: #9db9d8; }

/* A count against the busiest count, in the cell. */
.us-rowbar {
  display: block;
  height: 4px;
  margin-top: 4px;
  border-radius: 2px;
  background: var(--bg-float);
  overflow: hidden;
}

.us-rowbar span {
  display: block;
  height: 100%;
  border-radius: 2px;
  background: var(--accent);
}

/* Every number on this page is data, so the digits are the same width. */
.us-num, .us-stat-value { font-variant-numeric: tabular-nums; }

/* ── Permissions: the list view, and one person's access ───────── */

.pm-header-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }

/* A choice of two, both visible. A <select> with two options hides
   which one you are on behind a click. */
.pm-seg {
  display: inline-flex;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  overflow: hidden;
  background: var(--bg-base);
}

.pm-seg button {
  height: 32px;
  padding: 0 12px;
  border: 0;
  border-right: 1px solid var(--border);
  background: transparent;
  color: var(--text-mute);
  font: 600 12px/1 var(--font-display);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background .15s, color .15s;
}

.pm-seg button:last-child { border-right: 0; }
.pm-seg button:hover { background: var(--bg-hover); color: var(--text-hi); }
.pm-seg button[aria-pressed="true"] { background: var(--text-hi); color: #fff; }
.pm-seg button:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

/* What somebody can do, said in words rather than counted across a row
   of ticks under headings - half of which were off the side of the
   screen at 1440px. */
.pm-chips { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }

.pm-chip {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  height: 20px;
  padding: 0 7px;
  border-radius: 4px;
  background: var(--bg-float);
  color: var(--text-soft);
  font-size: 11px;
  font-weight: 600;
}

/* Held through Org Admin rather than chosen, so it reads as inherited. */
.pm-chip-inherited { background: #eef4fe; color: var(--accent-dim); }
.pm-chip-inherited i { font-size: 8px; }
.pm-chip-view { background: #fdf3e3; color: #7a4a06; }

/* Holding none is the normal state for anybody who only administers, so
   it is grey and quiet rather than an absence somebody has to notice. */
.pm-chip-none { background: transparent; color: var(--text-dim); font-weight: 500; }

.pm-pill-admin { background: #e7f0fd; color: var(--accent-dim); }
.pm-pill-plain { background: var(--bg-float); color: var(--text-mute); }

.pm-user-mail { font-size: 12px; color: var(--text-dim); }

.pm-note {
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 78ch;
}

.pm-note i { color: var(--text-dim); margin-right: 4px; }

/* ── One person's access ────────────────────────────────────────── */
.pm-panel {
  position: fixed;
  inset: 0;
  z-index: 200;
  background: rgba(8, 22, 56, .28);
  display: flex;
  justify-content: flex-end;
}

.pm-panel[hidden] { display: none; }

.pm-panel-card {
  width: min(460px, 100%);
  height: 100%;
  background: var(--bg-base);
  border-left: 1px solid var(--border);
  box-shadow: -12px 0 40px rgba(8, 22, 56, .14);
  display: flex;
  flex-direction: column;
  animation: pm-panel-in .18s ease-out;
}

@keyframes pm-panel-in {
  from { transform: translateX(14px); opacity: .6; }
  to { transform: none; opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
  .pm-panel-card { animation: none; }
}

.pm-panel-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  padding: 16px 18px;
  border-bottom: 1px solid var(--border);
}

.pm-panel-head h3 { font-size: 15px; font-weight: 700; color: var(--text-hi); }
.pm-panel-head p { font-size: 12.5px; color: var(--text-dim); margin-top: 2px; }

.pm-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 18px;
}

/* ── Permissions: which part of the organisation ──────────────── */
/* The scope's own controls. Everything else in the panel is a right,
   and this is not one: it says to whom, not what. */
/* A scope on the row, so the list can answer "who else can do this"
   without opening four panels. Its own colour: it is the one chip that
   narrows rather than grants. */
/* ── Setup checklist ──────────────────────────────────────────── */
/* Three states, and the page must be readable without colour: the
   mark is a tick, a number or a question mark, so the state is in the
   glyph rather than only in the hue. */
/* ── Campaign reports ─────────────────────────────────────────── */
/* A destination is a URL and will be long. It wraps anywhere rather
   than stretching the table past the window, and it is monospace
   because it is an address rather than prose - the same rule the rest
   of the product uses for source and token content. */
/* ── Your plan ────────────────────────────────────────────────── */
/* ── Usage: the host that is failing ──────────────────────────── */
/* Drawn only when there is one, so it is allowed to be loud. Amber
   rather than red: a client failing more than its neighbours is
   something to look at, not an outage. */
.us-concern {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 14px;
  background: #fff4e5;
  border: 1px solid #f0d6b0;
  border-radius: var(--radius);
  font-size: 12.5px;
  color: #6b3a00;
}

.us-concern i { font-size: 16px; flex-shrink: 0; margin-top: 1px; }

/* The row the panel above is about, so the two cannot be read apart. */
.us-row-bad td { background: #fff9f2; }
.us-row-bad td:first-child { font-weight: 700; }

.bl-note {
  margin: 8px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 70ch;
}

.bl-inline { display: inline-block; margin-left: 10px; margin-top: 0; }

.bl-current {
  padding: 14px 16px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-left: 3px solid #11633a;
  border-radius: var(--radius);
  margin-bottom: 16px;
}

/* A payment failed and the product still works. Amber rather than red:
   it is a conversation, not an outage, and colouring it as a failure
   sends somebody looking for an outage that is not happening. */
.bl-current.needs-attention { border-left-color: #8a4b00; background: #fff9f2; }

.bl-current-head {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px 14px;
}

.bl-status { font-size: 13.5px; font-weight: 700; color: var(--text-hi); }
.bl-plan { font-size: 13px; color: var(--text-mute); }

/* Two things are paying. The one state on this page that costs money
   while nobody notices, so it is the loudest thing on it. */
.bl-warn {
  display: flex;
  gap: 12px;
  padding: 14px 16px;
  margin-bottom: 16px;
  background: #fff4e5;
  border: 1px solid #f0d6b0;
  border-radius: var(--radius);
  font-size: 12.5px;
  color: #6b3a00;
}

.bl-warn i { font-size: 16px; flex-shrink: 0; }

.bl-buy {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.bl-buy label {
  font-size: 12.5px;
  font-weight: 600;
  color: var(--text-mute);
}

.bl-buy select { min-width: 120px; }
.bl-buy input[type="number"] { width: 90px; }
.bl-buy .bl-note { flex-basis: 100%; }

.bl-status-msg {
  font-size: 12.5px;
  color: var(--text-mute);
  min-height: 1em;
}

.bl-current .bl-status-msg { display: block; margin-top: 8px; }

.cr-url {
  font-family: var(--mono, ui-monospace, SFMono-Regular, Menlo, Consolas, monospace);
  font-size: 12px;
  word-break: break-all;
  max-width: 60ch;
}

.su-progress {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 18px;
}

.su-progress-count {
  font-size: 13px;
  font-weight: 700;
  color: var(--text-hi);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.su-progress-bar {
  flex: 1;
  height: 6px;
  border-radius: 3px;
  background: var(--bg-float);
  overflow: hidden;
}

.su-progress-bar > span {
  display: block;
  height: 100%;
  background: #0b4ea2;
  border-radius: 3px;
}

/* One thing to do next, said once. Not the first unfinished row - that
   is "send your first message" on a brand new tenant. */
.su-lead {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  margin-bottom: 18px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-left: 3px solid #0b4ea2;
  border-radius: var(--radius);
}

.su-lead.is-done { border-left-color: #11633a; }
.su-lead.is-done i { color: #11633a; font-size: 18px; }

.su-lead-why {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 70ch;
}

.su-lead .btn { margin-left: auto; flex-shrink: 0; }

.su-note {
  margin: 0 0 18px;
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 75ch;
}

.su-steps {
  list-style: none;
  margin: 0;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.su-step {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  background: var(--bg-float);
  border-top: 1px solid var(--border);
}

.su-step:first-child { border-top: 0; }

.su-step-mark {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  font-size: 11.5px;
  font-weight: 700;
  background: var(--bg-base);
  border: 1px solid var(--border);
  color: var(--text-mute);
}

.su-step.is-done .su-step-mark {
  background: #e8f7ee;
  border-color: #b7e3c8;
  color: #11633a;
}

/* Could not be checked. Amber rather than red: it is not a failure, it
   is an unanswered question, and colouring it as a fault sends somebody
   looking for a problem that may not exist. */
.su-step.is-unknown .su-step-mark {
  background: #fff4e5;
  border-color: #f0d6b0;
  color: #8a4b00;
}

.su-step-main { flex: 1; min-width: 0; }

.su-step-title {
  font-size: 13.5px;
  font-weight: 700;
  color: var(--text-hi);
}

.su-step-detail {
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--text);
  max-width: 75ch;
}

/* Why it matters, which is the half a checklist usually leaves out.
   Quieter than the measurement above it: colour rather than size,
   because shrinking text to make it recede costs legibility. */
.su-step-why {
  margin-top: 4px;
  font-size: 12px;
  color: var(--text-mute);
  max-width: 75ch;
}

.su-step-go {
  flex-shrink: 0;
  align-self: center;
  font-size: 12.5px;
  font-weight: 600;
  white-space: nowrap;
}

@media (max-width: 640px) {
  .su-lead { flex-wrap: wrap; }
  .su-lead .btn { margin-left: 0; }
  .su-step { flex-wrap: wrap; }
  .su-step-go { margin-left: 38px; }
}

.pm-chip-scope {
  background: #fff4e5;
  color: #8a4b00;
  border-color: #f0d6b0;
}

.pm-chip-scope i { margin-right: 4px; font-size: 10px; }

.pm-scope-parts {
  margin: 8px 0 0 24px;
  padding: 10px 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

/* `hidden` loses to any display a class sets, and this one does not set
   one - but it is toggled from script, so it is stated anyway. The three
   places that forgot are written up in CLAUDE.md. */
.pm-scope-parts[hidden] { display: none; }

.pm-scope-list h5 {
  margin: 10px 0 4px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.pm-scope-list h5:first-child { margin-top: 0; }

.pm-scope-save { margin-top: 12px; }

.pm-access-group h4 {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 8px;
}

.pm-access-group > select {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-hi);
  font: 500 13px var(--font-display);
}

/* The whole row is the target. A bare checkbox is about 16px of it and
   the words beside it did nothing, eight times down a column. */
.pm-access-row {
  display: grid;
  grid-template-columns: 18px 1fr;
  gap: 2px 10px;
  align-items: start;
  padding: 9px 10px;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: background .12s;
}

.pm-access-row:hover { background: var(--bg-raised); }
.pm-access-row input { margin-top: 2px; }
.pm-access-row.is-inherited { background: var(--bg-raised); cursor: default; }
.pm-access-row.is-inherited:hover { background: var(--bg-raised); }

.pm-access-label { font-size: 13px; font-weight: 600; color: var(--text-hi); }

.pm-access-why {
  grid-column: 2;
  font-size: 12px;
  color: var(--text-mute);
  line-height: 1.45;
}

.pm-access-note {
  font-size: 12px;
  color: var(--text-mute);
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
}

.pm-panel-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 12px 18px;
  border-top: 1px solid var(--border);
  flex-wrap: wrap;
}

.pm-panel-spacer { flex: 1; }

/* The one action here that takes everything away, so it is the only one
   wearing the colour. */
.pm-panel-foot .pm-remove-admin { border-color: transparent; color: var(--red-dim); }
.pm-panel-foot .pm-remove-admin:hover { background: #fdeef1; color: var(--red-dim); }

/* ── Branding: the brands beside the one being edited ──────────── */
.bk-page { max-width: 1180px; }

/* The brand list that used to sit beside the form is the overview now,
   so the form has the width - and the page is the editor view, with the
   same toolbar the other two carry. */
.bk-layout {
  display: block;
}
.bk-page { max-width: 1180px; }

.bk-layout[hidden] { display: none; }

.bk-brands { position: sticky; top: 16px; }

.bk-brands-head {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .07em;
  text-transform: uppercase;
  color: var(--text-dim);
  margin-bottom: 10px;
}

.bk-list { display: flex; flex-direction: column; gap: 6px; }

/* A row, not an option in a <select>. The colours are the fastest way
   to recognise a brand and a dropdown could not show them. */
.bk-brand {
  display: flex;
  align-items: center;
  gap: 11px;
  width: 100%;
  padding: 10px 12px;
  text-align: left;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-family: var(--font-display);
  transition: border-color .15s, background .15s;
}

.bk-brand:hover { border-color: var(--border-hi); background: var(--bg-raised); }
.bk-brand:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

.bk-brand.is-on {
  border-color: var(--accent);
  background: #f6faff;
  box-shadow: inset 3px 0 0 var(--accent);
}

.bk-swatches { display: flex; gap: 3px; flex-shrink: 0; }

.bk-swatch {
  width: 13px;
  height: 13px;
  border-radius: 3px;
  border: 1px solid rgba(8, 22, 56, .12);
}

/* A brand with no colour set is not a white swatch - that reads as
   white being the colour. */
.bk-swatch.is-unset {
  background: repeating-linear-gradient(45deg, var(--bg-float) 0 3px, var(--bg-base) 3px 6px);
}

.bk-brand-text { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }

.bk-brand-name {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* The number that makes Delete a decision rather than a gamble. */
.bk-brand-used { font-size: 11.5px; color: var(--text-dim); font-variant-numeric: tabular-nums; }

.bk-brand-default {
  flex-shrink: 0;
  height: 19px;
  padding: 0 7px;
  display: inline-flex;
  align-items: center;
  border-radius: 4px;
  background: #e7f0fd;
  color: var(--accent-dim);
  font-size: 10.5px;
  font-weight: 700;
}

.bk-brands-note { margin-top: 10px; font-size: 11.5px; color: var(--text-dim); }

/* ── The three images, all of them visible ─────────────────────── */
.bk-tiles {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 10px;
  padding: 0 16px 14px;
}

.bk-tile {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 0 0 10px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-align: left;
  overflow: hidden;
  font-family: var(--font-display);
  transition: border-color .15s;
}

.bk-tile:hover { border-color: var(--border-hi); }
.bk-tile:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.bk-tile.is-on { border-color: var(--accent); box-shadow: inset 0 -2px 0 var(--accent); }

.bk-tile-frame {
  height: 68px;
  display: grid;
  place-items: center;
  background: var(--bg-void);
  border-bottom: 1px solid var(--border);
  margin-bottom: 8px;
  overflow: hidden;
}

.bk-tile-img { max-width: 80%; max-height: 52px; object-fit: contain; }
.bk-tile-empty { color: var(--text-dim); font-size: 15px; }
.bk-tile-name { padding: 0 10px; font-size: 12.5px; font-weight: 600; color: var(--text-hi); }
.bk-tile-state { padding: 0 10px; font-size: 11px; color: var(--text-dim); }

/* An image with no alt text is one most recipients will see as nothing
   at all, since their client blocks it by default. */
.bk-tile-warn { color: #b4530a; font-weight: 600; }

.bk-image-detail { border-top: 1px solid var(--border); padding: 14px 16px 16px; }
.bk-detail-head { margin-bottom: 12px; }
.bk-detail-head h3 { font-size: 13px; font-weight: 700; color: var(--text-hi); }
.bk-detail-head p { font-size: 12px; color: var(--text-mute); margin-top: 2px; }

/* ── A specimen is a signature, not a sentence ─────────────────── */
.bk-specimen {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 11px 13px;
  background: var(--bg-void);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.bk-specimen-name { font-size: 15px; font-weight: 700; color: #081638; line-height: 1.2; }
.bk-specimen-role { font-size: 12.5px; color: var(--text-mute); }
.bk-specimen-detail { font-size: 11.5px; color: var(--text-dim); }

@media (max-width: 1080px) {
  .bk-layout { grid-template-columns: 1fr; }
  .bk-brands { position: static; }
  .bk-list { flex-direction: row; flex-wrap: wrap; }
  .bk-brand { width: auto; flex: 1 1 220px; }
}

/* ── Branding: the action bar at the foot of the form ─────────── */
.bk-bar {
  position: sticky;
  bottom: 0;
  z-index: 20;
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 4px -28px -24px;
  padding: 12px 28px;
  background: rgba(255, 255, 255, .92);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--border);
}

.bk-bar-spacer { flex: 1; }

.bk-dirty {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 600;
  color: #7a4a06;
}

/* Hidden means hidden - see .ms-dirty.
   `hidden` is a UA rule of display:none at the lowest possible
   specificity, so any display: of our own beats it and the
   element never hides. The flag read "Unsaved changes" on a
   page nobody had touched. */
.bk-dirty[hidden] { display: none; }

.bk-dirty i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--amber);
}

/* The one action on this page that costs a round trip to undo, so it
   carries no fill and sits at the other end of the bar from Save. */
.bk-bar .bk-delete { border-color: transparent; color: var(--red-dim); }
.bk-bar .bk-delete:hover { background: #fdeef1; color: var(--red-dim); }
.bk-bar .bk-delete:disabled:hover { background: var(--bg-base); }

.bk-bar .bk-save {
  background: var(--accent);
  border-color: var(--accent);
  color: #fff;
}

.bk-bar .bk-save:hover { background: #0049c4; border-color: #0049c4; color: #fff; }
.bk-bar .bk-save.is-dirty { box-shadow: 0 0 0 3px var(--accent-glow); }

@media (prefers-reduced-transparency: reduce) {
  .bk-bar { background: var(--bg-base); backdrop-filter: none; }
}

/* ── License Details Page ────────────────────────────────────── */
.details-container {
  max-width: 900px;
}

.details-header {
  margin-bottom: 32px;
}

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  color: var(--accent);
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  margin-bottom: 16px;
  transition: color .15s;
}

.back-link:hover {
  color: var(--accent-hi);
}

.details-header h1 {
  color: var(--text-white);
  font-size: 32px;
  font-weight: 700;
  margin-bottom: 8px;
}

.details-content {
  display: flex;
  flex-direction: column;
  gap: 20px;
}

.detail-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: all .15s;
}

.detail-card:hover {
  box-shadow: var(--shadow);
  border-color: var(--border-hi);
}

.detail-card .card-header {
  padding: 20px;
  border-bottom: 1px solid var(--border);
}

.detail-card .card-header h2 {
  margin: 0;
  font-size: 16px;
  font-weight: 600;
  color: var(--text-white);
}

.detail-card .card-body {
  padding: 20px;
}

.detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 24px;
}

.detail-item {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.detail-item label {
  font-size: 12px;
  font-weight: 600;
  color: var(--text-dim);
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.detail-value {
  font-size: 14px;
  color: var(--text-body);
  font-weight: 500;
}

.detail-value.mono {
  font-family: var(--font-mono);
  font-size: 12px;
  background: var(--bg-float);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
  word-break: break-all;
}

.status-active,
.status-inactive {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 14px;
  font-weight: 500;
}

.status-active {
  color: var(--green);
}

.status-inactive {
  color: var(--red);
}

.role-badge {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 8px 12px;
  border-radius: var(--radius);
  font-size: 13px;
  font-weight: 600;
  width: fit-content;
}

.role-badge.primary-admin {
  background: rgba(34, 197, 94, 0.1);
  color: var(--green);
  border: 1px solid var(--green);
}

.detail-item.full-width {
  grid-column: 1 / -1;
}

.limit-item {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.limit-display {
  display: flex;
  align-items: baseline;
  gap: 8px;
}

.limit-value {
  font-size: 20px;
  font-weight: 700;
  color: var(--text-white);
}

.limit-current {
  font-size: 12px;
  color: var(--text-dim);
}

.actions-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
}

.btn-outline-secondary {
  border: 1px solid var(--border);
  color: var(--text-body);
  background: transparent;
  transition: all .15s;
}

.btn-outline-secondary:hover {
  background: var(--bg-raised);
  border-color: var(--border-hi);
}

/* ═══════════════════════════════════════════════════════════════
   TENANT CONFIGURATION STYLES
   ═══════════════════════════════════════════════════════════════ */
.tenant-form-container {
  background: var(--bg-void);
  padding: 32px;
  border-radius: var(--radius-lg);
}

.tenant-form {
  max-width: 1000px;
  margin: 0 auto;
}

.form-section {
  margin-bottom: 28px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--border);
}

.form-section:last-of-type {
  border-bottom: none;
  margin-bottom: 32px;
}

.section-title {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text-white);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 16px;
  margin-top: 0;
}

.section-title i {
  color: var(--accent);
  font-size: 16px;
}

.form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 20px;
}

.form-group {
  display: flex;
  flex-direction: column;
}

.form-group label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  margin-bottom: 8px;
  display: flex;
  align-items: center;
  gap: 4px;
}

.form-group label .required {
  color: var(--red);
  font-weight: 700;
}

.form-group input[type="text"],
.form-group input[type="password"],
.form-group textarea,
.form-group select {
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font-family: inherit;
  font-size: 13px;
  color: var(--text-body);
  background: var(--bg-base);
  transition: all .2s;
}

.form-group input[type="text"]:focus,
.form-group input[type="password"]:focus,
.form-group textarea:focus,
.form-group select:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
  background: var(--bg-base);
}

.form-group textarea {
  resize: vertical;
  font-family: var(--font-mono);
  font-size: 12px;
}

.form-group small {
  margin-top: 6px;
  font-size: 12px;
  color: var(--text-dim);
  line-height: 1.4;
}

.form-check-group {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-top: 8px;
}

.form-check {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 12px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  cursor: pointer;
  transition: all .2s;
}

.form-check:hover {
  background: var(--bg-raised);
  border-color: var(--border-hi);
}

.form-check-input {
  margin-top: 2px;
  cursor: pointer;
  accent-color: var(--accent);
}

.form-check-label {
  display: flex;
  flex-direction: column;
  gap: 4px;
  cursor: pointer;
  margin: 0;
}

.check-title {
  font-weight: 600;
  color: var(--text-hi);
  font-size: 13px;
}

.check-subtitle {
  font-size: 12px;
  color: var(--text-dim);
}

.form-actions {
  display: flex;
  gap: 12px;
  margin-top: 32px;
  padding-top: 24px;
  border-top: 1px solid var(--border);
}

.btn-lg {
  padding: 12px 28px;
  font-size: 14px;
  font-weight: 600;
  display: flex;
  align-items: center;
  gap: 8px;
}

/* Tenant Table Styles */
.tenant-table {
  margin-bottom: 0;
  width: 100%;
  table-layout: auto;
}

.tenant-table th,
.tenant-table td {
  white-space: normal;
}

.tenant-table th:nth-child(1),
.tenant-table td:nth-child(1) { width: 25%; }
.tenant-table th:nth-child(2),
.tenant-table td:nth-child(2) { width: auto; }
.tenant-table th:nth-child(3),
.tenant-table td:nth-child(3) { width: 110px; }
.tenant-table th:nth-child(4),
.tenant-table td:nth-child(4) { width: 130px; white-space: nowrap; }

.tenant-table thead {
  background: var(--bg-raised);
  border-top: 1px solid var(--border);
  border-bottom: 2px solid var(--border);
}

.tenant-table thead th {
  padding: 12px;
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: var(--text-white);
  border-bottom: none;
}

.tenant-table tbody tr {
  border-bottom: 1px solid var(--border);
  transition: background .2s;
}

.tenant-table tbody tr:hover {
  background: var(--bg-float);
}

.tenant-table td {
  padding: 14px 12px;
  font-size: 13px;
  color: var(--text-body);
  vertical-align: middle;
}

.tenant-info {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.tenant-info strong {
  color: var(--text-white);
  font-size: 14px;
}

.tenant-info code {
  background: var(--bg-raised);
  padding: 2px 6px;
  border-radius: 3px;
  font-size: 11px;
  color: var(--accent);
}

.domain-list {
  font-family: var(--font-mono);
  font-size: 12px;
  word-break: break-word;
  white-space: pre-wrap;
}

.actions-column {
  text-align: right;
  width: 160px;
  white-space: nowrap;
}

.actions-column .btn {
  margin-left: 6px;
}

/* Modal Styles */
.modal-header.bg-light {
  background: var(--bg-raised) !important;
  border-bottom: 1px solid var(--border);
}

.modal-header .modal-title {
  display: flex;
  align-items: center;
  gap: 8px;
  color: var(--text-white);
  font-weight: 600;
  font-size: 16px;
}

.modal-footer.bg-light {
  background: var(--bg-raised) !important;
  border-top: 1px solid var(--border);
}

.form-section-modal {
  margin-bottom: 20px;
  padding-bottom: 16px;
  border-bottom: 1px solid var(--border);
}

.form-section-modal:last-child {
  border-bottom: none;
  margin-bottom: 0;
}

.section-title-modal {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin-bottom: 12px;
  margin-top: 0;
}

.card-subtitle {
  font-size: 13px;
  color: var(--text-dim);
  margin-top: 4px;
  margin-bottom: 0;
  font-weight: 400;
}

/* Action Bar */
.action-bar {
  display: flex;
  gap: 12px;
  margin-bottom: 24px;
  padding-bottom: 20px;
  border-bottom: 1px solid var(--border);
}

.action-bar .btn-lg {
  white-space: nowrap;
}

/* Bootstrap Modal Fixes */
.modal {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100% !important;
  height: 100% !important;
  z-index: 1050 !important;
  background-color: rgba(0, 0, 0, 0) !important;
}

.modal.show {
  display: flex !important;
  align-items: center;
  justify-content: center;
}

.modal-dialog {
  position: relative !important;
  z-index: 1051 !important;
  width: 90% !important;
  max-width: 900px !important;
  margin: auto !important;
}

.modal-content {
  border: 1px solid var(--border) !important;
  border-radius: 6px !important;
  box-shadow: 0 10px 40px rgba(0, 0, 0, 0.2) !important;
  background-color: #ffffff !important;
}

.modal-header {
  border-bottom: 1px solid var(--border) !important;
  padding: 20px !important;
  background-color: #ffffff !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
}

.modal-header .close {
  position: absolute !important;
  top: 16px !important;
  right: 16px !important;
  margin: 0 !important;
  padding: 0 !important;
  border: none !important;
  background: none !important;
  font-size: 24px !important;
  font-weight: 400 !important;
  line-height: 1 !important;
  color: var(--text-dim) !important;
  cursor: pointer !important;
}

.modal-header .close:hover {
  color: var(--text-hi) !important;
}

.modal-body {
  padding: 24px !important;
  max-height: calc(100vh - 200px) !important;
  overflow-y: auto !important;
}

.modal-footer {
  border-top: 1px solid var(--border) !important;
  padding: 16px 24px !important;
  gap: 8px !important;
}

.modal-backdrop {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  z-index: 1040 !important;
  width: 100% !important;
  height: 100% !important;
  background-color: rgba(0, 0, 0, 0.5) !important;
}

.modal-backdrop.show {
  display: block !important;
}

/* Delete Confirmation Modal Styles */
.modal-header.border-danger {
  border-bottom: 2px solid var(--red) !important;
}

.modal-header.border-danger .modal-title {
  color: var(--red) !important;
}

.delete-message {
  font-size: 14px;
  color: var(--text-body);
  margin-bottom: 0;
  line-height: 1.6;
}

.delete-confirm-btn {
  background-color: var(--red) !important;
  border-color: var(--red) !important;
  color: white !important;
}

.delete-confirm-btn:hover {
  background-color: var(--red-dim) !important;
  border-color: var(--red-dim) !important;
}

/* Tenant Configuration Styles */

.tenant-config-alert {
  margin-bottom: 24px;
  border-left: 4px solid #ffc107;
}

.tenant-config-alert .alert-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
}

.tenant-config-alert .alert-heading {
  margin-bottom: 2px;
  margin-top: 0;
  margin-left: 10px;
  font-size: 16px;
  font-weight: 600;
  color: #856404;
}

.tenant-config-alert p {
  margin: 5px 0 12px 0;
  color: #856404;
  font-size: 14px;
}

.alert-actions {
  margin-top: 0px;
}

.tenant-config-alert .btn-close {
  padding: 0.375rem;
}

/* ── Users Page ──────────────────────────────────────────────── */
.details-container-wide {
  max-width: none;
  width: 100%;
}

.users-toolbar {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 24px;
  flex-wrap: wrap;
}

.users-toolbar .form-group {
  margin-bottom: 0;
}

.users-toolbar-tenant {
  flex: 0 1 320px;
  min-width: 220px;
}

.users-toolbar-tenant select {
  width: 100%;
}

.users-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  margin-left: auto;
}

/* Expanded user detail (DataTables child row) */
.user-detail-layout {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
}

.user-detail-photo {
  width: 96px;
  height: 96px;
  border-radius: 50%;
  object-fit: cover;
  border: 2px solid var(--border-hi);
  flex-shrink: 0;
}

.user-detail-layout .user-detail-grid {
  flex: 1;
  padding: 0;
  background: transparent;
  border-radius: 0;
}

/* Grouped sections inside the expanded user detail */
.user-detail-sections {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 16px;
}

.user-detail-section .user-detail-grid {
  padding: 0;
  background: transparent;
  border-radius: 0;
}

.user-detail-section-title {
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
  margin-bottom: 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid var(--border-hi);
}

.user-detail-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px 24px;
  padding: 12px 16px;
  background: var(--bg-raised);
  border-radius: var(--radius-sm);
}

.user-detail-field small {
  display: block;
  margin-bottom: 3px;
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

#usersTable tbody tr {
  cursor: pointer;
}

#usersTable tbody tr.shown,
#usersTable tbody tr.shown + tr {
  cursor: default;
  background: var(--bg-raised);
}

/* DataTables is skinned once for the whole suite, in
   TS_Shell/wwwroot/css/datatables.css - the controls it generates look the
   same here, in the control plane and in the provider console because all
   three load that one file. Only this page's own child rows are below. */

/* ── Signature Editor ────────────────────────────────────────── */
.sig-editor {
  display: flex;
  height: calc(100vh - 96px);
  margin: -20px;
  overflow: hidden;
}

/* The search and tenant picker, which moved onto the overview when the
   panel they lived in went. The panel listed every signature by name
   beside a page already showing those signatures as cards - two lists of
   one thing, and with the app's own sidebar, 570 of 1440 pixels spent on
   navigation before any content. */
.sig-search,
.sig-select,
.sig-input,
.sig-link-dialog input,
.sig-style-row input[type="text"],
.sig-style-row input[type="number"],
.sig-style-row select,
.sig-style-pair input,
.sig-style-pair select,
.sig-side-search,
.cm-field input[type="text"],
.cm-field input[type="number"],
.cm-field input[type="datetime-local"],
.cm-field textarea,
.cm-field select,
.cm-rules input[type="text"],
.cm-rules select,
.dc-rule-match select,
.dc-page input[type="text"],
.dc-page input[type="number"],
.dc-page textarea,
.dc-page select {
  width: 100%;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  min-height: 32px;
  padding: 6px 10px;
  color: var(--text-hi);
  font-size: 13px;
  font-family: var(--font-display);
  line-height: 18px;
  outline: none;
  transition: border-color .15s;
}

.sig-search:focus,
.sig-select:focus,
.sig-input:focus,
.sig-link-dialog input:focus,
.sig-style-row input:focus,
.sig-style-row select:focus,
.sig-style-pair input:focus,
.sig-style-pair select:focus,
.sig-side-search:focus {
  border-color: var(--accent);
  background-color: var(--bg-float);
}

.sig-search::placeholder { color: var(--text-dim); }
.sig-select option { background: var(--bg-float); }
.sig-link-dialog input:disabled,
.sig-select:disabled,
.sig-style-row input:disabled,
.sig-style-row select:disabled {
  background: var(--bg-float);
  color: var(--text-mute);
  cursor: not-allowed;
}

/* Used by the cards on the overview. */
.sig-badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 10px;
  font-size: 10px;
  font-weight: 600;
  font-family: var(--font-mono);
  letter-spacing: .3px;
}

.sig-badge-default { background: rgba(43,127,255,.15); color: var(--accent-hi); }
.sig-badge-active { background: rgba(34,197,94,.12); color: #22c55e; }
.sig-badge-inactive { background: rgba(90,112,144,.15); color: var(--text-mute); }
/* A signature carrying a second version for mail to colleagues. Violet
   rather than another blue: it is not a state of this signature the way
   live and default are, it is a second thing inside it. */
.sig-badge-paired { background: rgba(124,92,255,.14); color: #6d4bff; }

/* ── The version switch, under the editor's tab strip ──────────────
   Which half of a paired signature the body tabs are editing. The pills
   are the shared .pm-seg; this is only the row they sit in. */
.sig-audience {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 8px 20px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sig-audience-note { font-size: 12px; color: var(--text-mute); }

/* Editing the version colleagues get, said in more than the pills: the
   HTML and the preview beside it look like a signature either way, and
   the one thing somebody must not do here is write the internal wording
   into the version that leaves the building. */
.sig-editor-view.editing-internal .sig-audience {
  background: rgba(124,92,255,.07);
  box-shadow: inset 2px 0 0 #6d4bff;
}

/* A fact that is only true of a signature with two versions. */
.sig-shared-note i { margin-right: 5px; color: #6d4bff; }

.sig-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.sig-empty {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 14px;
  color: var(--text-dim);
  padding: 40px;
}

.sig-empty-icon {
  width: 72px;
  height: 72px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 28px;
  color: var(--text-mute);
}

.sig-empty-title { font-size: 18px; font-weight: 700; color: var(--text-soft); }
.sig-empty-desc { font-size: 13px; color: var(--text-mute); text-align: center; max-width: 320px; line-height: 1.6; }

.sig-editor-view {
  display: flex;
  flex-direction: column;
  flex: 1;
  overflow: hidden;
}

/* Toolbar */
.sig-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 20px;
  height: 52px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sig-title-input {
  flex: 1;
  background: transparent;
  border: none;
  outline: none;
  font-family: var(--font-display);
  font-size: 17px;
  font-weight: 700;
  color: var(--text-white);
  min-width: 0;
}

.sig-title-input::placeholder { color: var(--text-dim); }

.sig-toolbar-actions {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-shrink: 0;
}

.sig-btn-ghost {
  background: transparent;
  color: var(--text-soft);
  border: 1px solid var(--border);
}

.sig-btn-ghost:hover { background: var(--bg-raised); color: var(--text-hi); border-color: var(--border-hi); }

.sig-btn-danger, .sig-pane-btn-danger, .cm-btn-danger, .dc-btn-danger {
  background: rgba(244,63,94,.12);
  color: var(--red-dim);
  border: 1px solid rgba(244,63,94,.2);
}

.sig-btn-danger:hover, .sig-pane-btn-danger:hover, .cm-btn-danger:hover, .dc-btn-danger:hover {
  background: rgba(244,63,94,.22); color: var(--red-dim); border-color: var(--red);
}

.sig-divider { width: 1px; height: 24px; background: var(--border); flex-shrink: 0; }

.sig-status-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 5px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--border);
  background: var(--bg-raised);
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
}

.sig-status-toggle.active { border-color: rgba(34,197,94,.3); background: rgba(34,197,94,.08); color: #22c55e; }
.sig-status-toggle.inactive { color: var(--text-mute); }
.sig-toggle-dot { width: 6px; height: 6px; border-radius: 50%; background: var(--text-dim); }
.sig-status-toggle.active .sig-toggle-dot { background: #22c55e; box-shadow: 0 0 6px #22c55e; }

.sig-unsaved-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #f59e0b;
  display: none;
  box-shadow: 0 0 6px #f59e0b;
  flex-shrink: 0;
}

.sig-unsaved-dot.show { display: inline-block; }

/* Tabs */
.sig-tabs {
  display: flex;
  align-items: center;
  padding: 0 20px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sig-tab {
  padding: 10px 16px;
  font-size: 12px;
  font-weight: 600;
  font-family: var(--font-mono);
  color: var(--text-mute);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  letter-spacing: .3px;
  text-transform: uppercase;
  transition: all .15s;
}

.sig-tab:hover { color: var(--text-soft); }
.sig-tab.active { color: var(--accent-hi); border-bottom-color: var(--accent); }

/* Split editor body */
.sig-body {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1px 1fr;
  overflow: hidden;
}

.sig-pane {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  min-width: 0;
}

.sig-pane-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 16px;
  background: var(--bg-base);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}

.sig-pane-label {
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 1.2px;
  text-transform: uppercase;
  color: var(--text-dim);
  font-family: var(--font-mono);
}

.sig-pane-actions { display: flex; gap: 4px; }

.sig-rules-toolbar { margin: 0 0 10px; }
.sig-rules-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
}
.sig-rules-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 8px 10px;
  border-bottom: 1px solid var(--border);
}
.sig-rules-table td {
  padding: 6px 8px;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
}
.sig-rules-table select,
.sig-rules-table input[type="text"] {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 12px;
}
.sig-rules-empty {
  text-align: center;
  padding: 18px;
  color: var(--text-mute);
  font-style: italic;
}
.sig-rule-del {
  color: #f43f5e !important;
  font-size: 18px;
  line-height: 1;
  padding: 0 8px !important;
}

.sig-version-badge {
  display: inline-block;
  padding: 2px 9px;
  margin-left: 10px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  font-family: var(--font-mono, ui-monospace, monospace);
  cursor: help;
}

.sig-size-badge,
.tst-size-badge {
  display: inline-block;
  padding: 1px 8px;
  margin: 0 8px;
  border-radius: 10px;
  background: var(--accent-glow);
  color: var(--accent);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .02em;
  font-family: var(--font-mono, ui-monospace, monospace);
}

.sig-pane-btn.active-btn { background: var(--accent); color: #fff; border-color: var(--accent); }

.sig-splitter {
  background: var(--border);
  cursor: col-resize;
  transition: background .15s;
}

.sig-splitter:hover,
.sig-splitter.dragging { background: var(--accent); }

.sig-code {
  flex: 1;
  background: var(--bg-void);
  border: none;
  outline: none;
  resize: none;
  color: var(--text-hi);
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.7;
  padding: 16px 20px;
  tab-size: 2;
  overflow-y: auto;
  caret-color: var(--accent-hi);
}

/* Preview */
.sig-preview-wrapper {
  flex: 1;
  overflow: auto;
  background: var(--bg-raised);
  padding: 20px;
}

.sig-preview-card {
  background: #fff;
  border-radius: var(--radius);
  overflow: hidden;
  box-shadow: var(--shadow);
}

.sig-preview-bar {
  background: #f1f3f5;
  padding: 8px 12px;
  display: flex;
  align-items: center;
  gap: 6px;
  border-bottom: 1px solid #e0e0e0;
}

.sig-mac-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.sig-preview-bar-label { font-size: 11px; color: #999; margin-left: 8px; font-family: monospace; }

.sig-preview-content {
  padding: 20px 24px;
  font-family: Calibri, Arial, sans-serif;
  font-size: 11pt;
  color: #333;
}

/* Plain text pane */
.sig-plain {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

/* Settings / variables panes */
.sig-settings {
  flex: 1;
  overflow-y: auto;
  padding: 24px;
}

.sig-section-heading {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--font-mono);
  margin-bottom: 16px;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--border);
}

.sig-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 16px;
  max-width: 720px;
}

.sig-form-group { display: flex; flex-direction: column; gap: 6px; }
.sig-span2 { grid-column: span 2; display: flex; flex-direction: column; gap: 10px; }

.sig-form-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .5px;
  text-transform: uppercase;
  color: var(--text-mute);
  font-family: var(--font-mono);
}

.sig-toggle-wrap {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 14px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}

.sig-toggle-info { display: flex; flex-direction: column; gap: 2px; }
.sig-toggle-name { font-size: 13px; font-weight: 600; color: var(--text-hi); }
.sig-toggle-desc { font-size: 11px; color: var(--text-mute); }

.sig-switch { position: relative; width: 36px; height: 20px; flex-shrink: 0; }
.sig-switch input { display: none; }

.sig-switch-track {
  position: absolute;
  inset: 0;
  background: var(--bg-float);
  border-radius: 10px;
  border: 1px solid var(--border);
  cursor: pointer;
  transition: all .2s;
}

.sig-switch input:checked + .sig-switch-track { background: var(--accent); border-color: var(--accent); }

.sig-switch-track::after {
  content: '';
  position: absolute;
  width: 14px;
  height: 14px;
  background: var(--text-mute);
  border-radius: 50%;
  top: 2px;
  left: 2px;
  transition: all .2s;
}

.sig-switch input:checked + .sig-switch-track::after { transform: translateX(16px); background: #fff; }

/* Variables grid */
.sig-vars-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px;
  max-width: 720px;
  margin-bottom: 24px;
}

.sig-var-chip {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all .12s;
}

.sig-var-chip:hover { border-color: var(--accent); background: var(--accent-glow); }

.sig-var-code {
  font-family: var(--font-mono);
  font-size: 11px;
  color: var(--accent-hi);
  flex: 1;
}

.sig-var-desc { font-size: 11px; color: var(--text-mute); }

.sig-vars-help {
  font-size: 12px;
  color: var(--text-mute);
  font-family: var(--font-mono);
  line-height: 1.7;
}

.sig-vars-help code { color: var(--accent-hi); }

/* Variable picker popup */
.sig-var-picker {
  position: fixed;
  background: var(--bg-float);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  z-index: 500;
  padding: 8px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 4px;
  max-width: 500px;
  min-width: 320px;
}

.sig-var-picker-btn {
  background: var(--bg-raised);
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 5px 8px;
  cursor: pointer;
  text-align: left;
  color: var(--accent-hi);
  font-family: var(--font-mono);
  font-size: 11px;
  transition: all .12s;
}

.sig-var-picker-btn:hover { background: var(--accent-glow); }

/* Modal */
.sig-modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,.7);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  backdrop-filter: blur(4px);
}

.sig-modal-overlay.open { display: flex; }

.sig-modal {
  background: var(--bg-float);
  border: 1px solid var(--border-hi);
  border-radius: var(--radius-lg);
  padding: 28px;
  max-width: 400px;
  width: 90%;
  box-shadow: var(--shadow-lg);
}

.sig-modal-title { font-size: 18px; font-weight: 700; color: var(--text-white); margin-bottom: 10px; }
.sig-modal-desc { font-size: 13px; color: var(--text-soft); line-height: 1.6; margin-bottom: 24px; }
.sig-modal-actions { display: flex; gap: 10px; justify-content: flex-end; }

/* Toasts */
#sig-toast-area {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

.sig-toast {
  padding: 10px 16px;
  border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  font-size: 13px;
  font-weight: 500;
  border: 1px solid;
  background: var(--bg-float);
  animation: sigToastIn .25s ease forwards;
}

.sig-toast-success { border-color: rgba(34,197,94,.4); color: #22c55e; }
.sig-toast-error { border-color: rgba(244,63,94,.4); color: #f43f5e; }
.sig-toast-info { border-color: rgba(43,127,255,.4); color: var(--accent-hi); }

@keyframes sigToastIn {
  from { opacity: 0; transform: translateX(24px); }
  to { opacity: 1; transform: translateX(0); }
}

/* WYSIWYG Design pane */
.sig-design {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg-base);
}

.sig-design-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px;
  padding: 8px 12px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-float);
}

.sig-tb-btn {
  min-width: 32px;
  height: 32px;
  padding: 0 8px;
  background: transparent;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  cursor: pointer;
  font: 600 12px var(--font-display);
  line-height: 1;
  transition: background .15s ease, border-color .15s ease;
}

.sig-tb-btn:hover { background: var(--bg-hover); border-color: var(--border); color: var(--text-hi); }
.sig-tb-btn:active { background: var(--accent-glow); color: var(--accent); }
.sig-tb-btn > b { font-weight: 700; }
.sig-tb-btn > i:not([class]) { font-style: italic; font-weight: 700; }
.sig-tb-btn > u { font-weight: 700; }

.sig-tb-sep {
  width: 1px;
  height: 20px;
  background: var(--border);
  margin: 0 4px;
}

.sig-tb-color {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border: 1px solid transparent;
  border-radius: var(--radius-sm);
  cursor: pointer;
  position: relative;
  color: var(--text-soft);
  font-weight: 700;
  font-size: 13px;
}
.sig-tb-color:hover { background: var(--bg-hover); border-color: var(--border); }
.sig-tb-color input[type="color"] {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  border: none;
  padding: 0;
  background: none;
}

.sig-tb-select {
  height: 32px;
  padding: 0 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font: 400 13px var(--font-display);
  cursor: pointer;
}

.sig-design-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 300px 1fr;
  min-height: 0;
}

.sig-design-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
}

.sig-design-preview-wrap {
  border-top: 1px solid var(--border);
  background: var(--bg-float);
  padding: 12px 16px 16px;
  max-height: 45%;
  overflow: auto;
}

.sig-design-preview-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 8px;
}

.sig-design-preview-frame {
  background: #ffffff;
  padding: 18px;
  border-radius: var(--radius-sm);
  box-shadow: var(--shadow-sm);
  font-family: Calibri, Arial, sans-serif;
  color: #222;
}

.sig-style-pair {
  display: grid;
  grid-template-columns: 1fr 64px;
  gap: 4px;
}

.sig-design-side {
  border-right: 1px solid var(--border);
  background: var(--bg-float);
  overflow-y: auto;
  /* No padding on the scroller, and that is the whole of why the
     Variables / Formatting strip stays at the top. A sticky child is
     pinned to the scroll container's CONTENT box, not to the edge you
     can see, so `top: 0` against `padding: 16px` parked the strip 16px
     down the panel - and chips scrolled up through that 16px band and
     were drawn above the tabs they belong under. Padding does not clip.
     The gutter is on the panes instead; put it back here and the strip
     comes unstuck again. */
  padding: 0;
}

.sig-side-section + .sig-side-section {
  margin-top: 20px;
  padding-top: 16px;
  border-top: 1px solid var(--border);
}

.sig-side-title {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin-bottom: 10px;
}

.sig-side-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.sig-chip {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: 12px;
  color: var(--text-soft);
  font-size: 11px;
  padding: 4px 10px;
  /* Grab rather than pointer: a chip is dragged into place as well as
     clicked, and the cursor is the only thing that says so before you try. */
  cursor: grab;
  font-family: var(--font-mono, ui-monospace, monospace);
  transition: background .15s ease, border-color .15s ease, color .15s ease;
}

.sig-chip:hover {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.sig-chip:active { cursor: grabbing; }

/* Left behind in the palette while its copy is under the cursor. */
.sig-chip.is-dragging { opacity: .4; }

.sig-side-tag {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 12px;
  color: var(--accent);
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  margin-bottom: 10px;
}

.sig-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  margin-bottom: 8px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
}

.sig-crumb {
  padding: 2px 6px;
  border-radius: 4px;
  color: var(--text-mute);
  cursor: pointer;
  border: 1px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.sig-crumb:hover { background: var(--bg-hover); color: var(--text-hi); }
.sig-crumb.active {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.sig-crumb-sep {
  color: var(--text-dim);
  font-size: 12px;
  padding: 0 1px;
}

.sig-side-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-body);
  margin-bottom: 10px;
  cursor: pointer;
}

.sig-side-subtitle {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  margin: 14px 0 8px;
}

.sig-style-grid {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 4px;
}

.sig-style-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-body);
}

.sig-style-row > span { color: var(--text-mute); }

.sig-style-row input[type="color"] {
  width: 100%;
  height: 28px;
  padding: 0;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  cursor: pointer;
}

.sig-border-sides {
  display: flex;
  gap: 2px;
  margin-bottom: 8px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}

.sig-border-side {
  flex: 1;
  height: 24px;
  background: transparent;
  border: none;
  border-radius: 3px;
  color: var(--text-mute);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: .04em;
  text-transform: uppercase;
  cursor: pointer;
  transition: background .12s ease, color .12s ease;
}
.sig-border-side:hover { background: var(--bg-hover); color: var(--text-hi); }
.sig-border-side.active {
  background: var(--accent);
  color: #ffffff;
}

.sig-side-remove {
  margin-top: 12px;
  width: 100%;
  border-color: rgba(244,63,94,.4) !important;
  color: #f43f5e !important;
}
.sig-side-remove:hover { background: rgba(244,63,94,.1) !important; }

.sig-design-canvas {
  flex: 1 1 auto;
  min-height: 200px;
  overflow: auto;
  padding: 24px;
  background:
    linear-gradient(45deg, #f4f6f9 25%, transparent 25%, transparent 75%, #f4f6f9 75%) 0 0/20px 20px,
    linear-gradient(45deg, #f4f6f9 25%, #fff 25%, #fff 75%, #f4f6f9 75%) 10px 10px/20px 20px;
}

.sig-design-edit {
  background: #ffffff;
  min-height: 260px;
  padding: 24px;
  border-radius: var(--radius);
  box-shadow: var(--shadow);
  outline: none;
  font-family: Calibri, Arial, sans-serif;
  color: #222;
  max-width: 760px;
  margin: 0 auto;
}

.sig-design-edit:focus { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

/* Holding a variable over the canvas. The caret moves with the cursor to
   show where it lands; this says which surface is being aimed at. */
.sig-design-edit.is-drop-target { box-shadow: 0 0 0 2px var(--accent), var(--shadow); }

.sig-design-edit .sig-design-filtered {
  outline: 1px dashed var(--accent);
  outline-offset: 2px;
  position: relative;
}

.sig-design-edit .sig-design-selected {
  outline: 2px solid var(--accent) !important;
  outline-offset: 1px;
}

.sig-design-edit .sig-token {
  display: inline-block;
  padding: 0 6px;
  margin: 0 1px;
  background: var(--accent-glow);
  color: var(--accent);
  border: 1px solid var(--accent);
  border-radius: 10px;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 0.78em;
  font-weight: 600;
  line-height: 1.45;
  white-space: nowrap;
  /* Selectable as one unit: "none" left chips impossible to select, so they
     could not be deleted or replaced. */
  user-select: all;
  cursor: pointer;
  vertical-align: baseline;
}

/* The chip the next Delete or variable click will act on. */
.sig-design-edit .sig-token-selected {
  background: var(--accent);
  color: #fff;
  box-shadow: 0 0 0 2px var(--accent-glow);
}

/* ── The signatures overview ──────────────────────────────────────
   What the Signatures page opens on. The cards are a reading surface, not
   a form: one per signature the organisation sends, in the order selection
   happens, each with the signature actually rendered rather than described.
*/
.sig-overview { flex: 1 1 auto; overflow: auto; padding: 24px 28px 32px; }

.sig-overview-head {
  display: flex; align-items: flex-end; justify-content: space-between;
  gap: 16px; flex-wrap: wrap; margin-bottom: 20px;
}
.sig-overview-title {
  font-family: var(--font-display); font-size: 22px; color: var(--text-hi); margin: 0;
}
.sig-overview-sub { color: var(--text-mute); font-size: 13px; margin: 4px 0 0; }

/* ── The overview's toolbar ───────────────────────────────────── */
.sig-overview-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}

.sig-overview-tools .sig-search { width: 240px; }

/* ── Signatures: what a recipient change does ──────────────────── */
/* A standing preference rather than a form, so the choices read as
   three sentences with their consequences rather than a dropdown
   with three words in it. This is the setting that decides what
   somebody watches happen while they are writing. */
.sig-reselect {
  margin-top: 28px;
  padding: 18px 20px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius);
}

.sig-reselect-title {
  margin: 0 0 4px;
  font-size: 14px;
  font-weight: 700;
  color: var(--text-hi);
}

.sig-reselect-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 70ch;
}

.sig-reselect-opts {
  display: grid;
  gap: 10px;
}

/* The radio, the choice and why it matters, on a grid rather than
   inline: the consequence is the longest part and has to line up
   under the label rather than wrap around the control. */
.sig-reselect-opt {
  display: grid;
  grid-template-columns: auto 1fr;
  column-gap: 10px;
  row-gap: 2px;
  align-items: start;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  cursor: pointer;
}

.sig-reselect-opt:hover { border-color: var(--accent); }

.sig-reselect-opt input { margin-top: 2px; }

.sig-reselect-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--text-hi);
}

.sig-reselect-why {
  grid-column: 2;
  font-size: 12.5px;
  color: var(--text-mute);
  max-width: 70ch;
}

.sig-reselect-status {
  display: inline-block;
  margin-top: 10px;
  font-size: 12px;
  color: var(--text-mute);
}

.sig-overview-tools .sig-select { width: auto; min-width: 160px; }
.sig-overview-tools .sig-select[hidden] { display: none; }

/* The counts, where the list is. They used to be two lowercase rows in
   the bottom corner of the panel, which is where nobody looks. */
.sig-overview-count {
  margin-left: auto;
  font-size: 12.5px;
  color: var(--text-mute);
  font-variant-numeric: tabular-nums;
}

.sig-overview-count b { color: var(--text-hi); font-weight: 700; }

.sig-overview-grid {
  display: grid; gap: 16px;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
}

.sig-ov-card {
  position: relative; display: flex; flex-direction: column;
  background: #fff; border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; cursor: pointer;
  transition: border-color .12s, box-shadow .12s;
}
.sig-ov-card:hover { border-color: var(--accent); box-shadow: var(--shadow); }
/* The default is the end of the line, so it is marked rather than ranked. */
.sig-ov-card.is-default { border-left: 3px solid var(--accent); }

/* Its place in the order, which is the point of the page. */
.sig-ov-rank {
  position: absolute; top: 10px; right: 12px;
  font-family: var(--font-display); font-size: 26px; font-weight: 800;
  color: var(--line); line-height: 1; pointer-events: none;
}

/* The grip, and where a drop would land. Both are only on the cards that
   can move: the default is pinned last by the selection rule, so offering
   to drag it would be an order the page undoes a moment later. */
.sig-ov-grip {
  position: absolute; top: 12px; left: 10px;
  font-size: 12px; color: var(--line); cursor: grab;
}
.sig-ov-card.is-movable:hover .sig-ov-grip { color: var(--text-mute); }
.sig-ov-grip-pinned { cursor: default; color: var(--accent); opacity: .5; }

.sig-ov-card.is-movable { user-select: none; }
.sig-ov-card.is-dragging { opacity: .4; }

/* A line down the edge the card would land on, rather than moving the
   others out of the way: the grid reflows on every hover otherwise, and
   the cards jump around under the cursor. */
.sig-ov-card.drop-before { box-shadow: inset 3px 0 0 var(--accent); }
.sig-ov-card.drop-after { box-shadow: inset -3px 0 0 var(--accent); }

.sig-ov-hint { color: var(--accent); }

.sig-ov-head { padding: 14px 16px 10px 30px; border-bottom: 1px solid var(--line); }
.sig-ov-name {
  font-weight: 600; font-size: 14px; color: var(--text-hi);
  padding-right: 36px;                        /* clear of the rank */
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.sig-ov-meta { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 7px; }

.sig-badge-rank { background: var(--accent-glow); color: var(--accent); }
.sig-ov-rules { font-size: 11px; color: var(--text-mute); }
.sig-ov-rules-none { font-style: italic; }
/* Not a warning. It was orange and said "never selected" about
   signatures that anybody could pick out of the add-in's list. */
.sig-ov-rules-open { color: var(--text-mute); font-style: italic; }

/* The signature at 55%, by transform rather than by narrowing it: a
   signature re-flowed into a 340px column is a different layout that
   happens to use the same words. */
.sig-ov-preview {
  height: 190px; overflow: hidden; background: #fff;
  padding: 12px 16px;
  background-image:
    linear-gradient(45deg, #fafbfc 25%, transparent 25%, transparent 75%, #fafbfc 75%) 0 0/16px 16px,
    linear-gradient(45deg, #fafbfc 25%, #fff 25%, #fff 75%, #fafbfc 75%) 8px 8px/16px 16px;
}
.sig-ov-preview-inner {
  transform: scale(.55); transform-origin: top left;
  width: 181.8%;                               /* 100 / .55, so it fills */
  font-family: Calibri, Arial, sans-serif; color: #222;
  pointer-events: none;                        /* the card owns the click */
}
.sig-ov-preview-inner img { max-width: 100%; }

.sig-ov-actions {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--line); background: var(--surface-2, #fbfcfd);
}
.sig-ov-isdefault { font-size: 11.5px; color: var(--accent); font-weight: 600; }

@media (max-width: 720px) {
  .sig-overview { padding: 16px; }
  .sig-overview-grid { grid-template-columns: 1fr; }
}

/* The canvas does NOT style the signature's own tables. It used to force
   border-collapse on every one of them, and in the collapsing border model a
   table's own padding is ignored (CSS 2.1 17.6.2) - so a template whose outer
   table carries padding:20px 24px was drawn flush to its own background in the
   designer and correctly padded in the preview below it. The inner 100%-width
   table then measured the full 620px instead of 572px and overflowed the dark
   panel, which is how "Follow us on" ended up outside the signature.
   Nothing needs the rule: the editor's own inserted table sets
   border-collapse inline, and mail templates use cellspacing="0". Whatever a
   mail client would do with the markup is what the canvas should show. */

/* Permissions */
.pm-page { padding: 24px 28px; display: flex; flex-direction: column; gap: 16px; }

.pm-header { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.pm-header h1.pm-title { font-family: var(--font-display); font-size: 24px; color: var(--text-hi); margin: 0; }
.pm-subtitle { color: var(--text-mute); font-size: 13px; margin: 4px 0 0; }

.pm-btn {
  height: 32px;
  padding: 0 14px;
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 13px;
  cursor: pointer;
}
.pm-btn:hover { background: var(--bg-hover); color: var(--text-hi); }
.pm-btn-sm { height: 26px; padding: 0 10px; font-size: 12px; }
.pm-btn:disabled { opacity: .5; cursor: default; }
.pm-btn:disabled:hover { background: var(--bg-base); color: var(--text-soft); }

.pm-primary-note { font-size: 12px; color: var(--text-mute); margin: 6px 0 0; }
.pm-primary-note i { margin-right: 5px; opacity: .8; }
.pm-primary-note strong { color: var(--text-soft); font-weight: 600; }
.pm-primary-note-warn { color: #f59e0b; }
.pm-primary-note-warn i { opacity: 1; }

.pm-table-wrap {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}

.pm-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.pm-table th {
  text-align: left;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-float);
}
.pm-table td {
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  color: var(--text-body);
  vertical-align: middle;
}
.pm-table tr:last-child td { border-bottom: none; }

.pm-loading { padding: 30px; text-align: center; color: var(--text-mute); }

.pm-user { display: flex; align-items: center; gap: 10px; }
.pm-avatar {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--accent);
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 13px;
}
.pm-user-name { font-weight: 600; color: var(--text-hi); }
.pm-you {
  display: inline-block;
  margin-left: 6px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--accent);
  background: var(--accent-glow);
  padding: 1px 6px;
  border-radius: 8px;
}
.pm-email { color: var(--text-mute); font-family: var(--font-mono, ui-monospace, monospace); font-size: 12px; }

.pm-pill {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .04em;
}
.pm-pill-ok { background: rgba(34,197,94,.15); color: #22c55e; }
/* Holding no seat is the normal, correct state for anybody who only
   administers - it was red, which made a five-admin organisation look like
   five problems. Red is for a licence that was taken away, not for one
   that was never needed. */
.pm-pill-off { background: rgba(100,116,139,.14); color: var(--text-mute); }
/* The state the comment above was holding this colour for: a licence an
   administrator took away. It is the one seat state that does not resolve
   itself - a reclaimed seat comes back on the person's next message and
   this one does not - so it is the one worth a colour that stops the eye. */
.pm-pill-bad { background: rgba(239,68,68,.15); color: #ef4444; }

/* Giving a licence back is the one action in this cell that adds something.
   .pm-link is red because the only thing that had ever used it was "Remove
   admin", and inheriting that would make the undo look like a second
   delete.

   Both classes in the selector on purpose: .pm-link is declared a thousand
   lines further down this file, so at equal specificity it wins and a
   single-class rule here draws the restore button red anyway. Found by
   rendering it. */
.pm-link.pm-seat-restore { color: var(--accent); }

/* The rights columns: a box to tick and nothing else. Each cell used to
   repeat its own label, so a row read "Via Org Admin" seven times. */
.pm-right { text-align: center; }
.pm-right .pm-check { display: inline-flex; justify-content: center; margin: 0; }
.pm-right input[type="checkbox"] { margin: 0; cursor: pointer; }
.pm-right input[type="checkbox"]:disabled { cursor: not-allowed; }
/* Held through Org Admin rather than granted: ticked, locked, and visibly
   not the same kind of thing as a tick somebody chose. */
.pm-right-inherited { background: var(--accent-glow); }
.pm-right-inherited input[type="checkbox"] { opacity: .55; }
.pm-pill-primary { background: var(--accent-glow); color: var(--accent); }

.pm-primary-cell { white-space: nowrap; }
.pm-primary-na { color: var(--text-mute); }

.pm-role-select {
  height: 30px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 12px;
  min-width: 130px;
}
.pm-row-status { font-size: 11px; color: var(--text-mute); }
/* The action cell holds more than one thing now - Edit access or Remove
   admin, and the licence button beside it. Wrapping rather than squeezing:
   this column is the last one in a table that has already been cut off at
   1440 once. */
.pm-row-status { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; }

.fr-field {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-mute);
  background: var(--bg-float);
  padding: 2px 6px;
  border-radius: 4px;
}

.fr-label,
.fr-label-static {
  font-size: 13px;
  color: var(--text-body);
}

.fr-label {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
}
.fr-label:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

.fr-label-static { color: var(--text-mute); font-style: italic; }

.fr-toggle {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 12px;
  color: var(--text-body);
  cursor: pointer;
}

.fonts-url,
.fonts-family {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 12px;
  font-family: var(--font-mono, ui-monospace, monospace);
}
.fonts-url:focus,
.fonts-family:focus { border-color: var(--accent); outline: none; box-shadow: 0 0 0 3px var(--accent-glow); }

#pm-toast-area {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

/* Signature tester */
.tst-page { padding: 24px 28px; display: flex; flex-direction: column; gap: 18px; min-height: 100%; }

.tst-header h1.tst-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-hi);
  margin: 0;
}
.tst-subtitle { color: var(--text-mute); font-size: 13px; margin: 4px 0 0; }

.tst-body {
  flex: 1 1 auto;
  display: grid;
  grid-template-columns: 320px 1fr;
  gap: 18px;
  min-height: 0;
}

.tst-side {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-y: auto;
  max-height: calc(100vh - 180px);
}

.tst-side-section { display: flex; flex-direction: column; gap: 8px; }
.tst-side-label {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.tst-select {
  width: 100%;
  height: 34px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 13px;
}

.tst-scope {
  display: flex;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 2px;
}
.tst-scope-opt {
  flex: 1;
  height: 28px;
  background: transparent;
  border: none;
  border-radius: 4px;
  color: var(--text-mute);
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
}
.tst-scope-opt:hover { background: var(--bg-hover); color: var(--text-hi); }
.tst-scope-opt.active { background: var(--accent); color: #ffffff; }

.tst-fields { display: flex; flex-direction: column; gap: 6px; }
.tst-field-row {
  display: grid;
  grid-template-columns: 110px 1fr;
  align-items: center;
  gap: 8px;
}
.tst-field-label { font-size: 11px; color: var(--text-mute); }
.tst-field-row input {
  width: 100%;
  height: 28px;
  padding: 0 8px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 12px;
}
.tst-field-row input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); outline: none; }

.tst-user-results {
  display: flex;
  flex-direction: column;
  gap: 2px;
  max-height: 220px;
  overflow-y: auto;
  margin-top: 4px;
}

.tst-user-row {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  padding: 6px 10px;
  color: var(--text-body);
  cursor: pointer;
  text-align: left;
}
.tst-user-row:hover { background: var(--bg-hover); border-color: var(--accent); }

.tst-user-name { font-size: 12px; font-weight: 600; color: var(--text-hi); }
.tst-user-mail { font-size: 11px; color: var(--text-mute); }

.tst-user-empty {
  font-size: 11px;
  color: var(--text-mute);
  padding: 8px 4px;
  text-align: center;
}

.tst-side-actions { display: flex; gap: 8px; margin-top: 4px; }

/* "Which signature would they get?" - the trace the selector produced.
   Indented by nesting depth, because the shape of a rule set is half of
   what somebody is trying to see: an exclusion sitting under an "all of"
   reads as an exception, and the same two lines in a flat list do not. */
.tst-sim-note { font-size: 11.5px; color: var(--text-dim); line-height: 1.45; margin-bottom: 8px; }
.tst-sim-result:empty { display: none; }
.tst-sim-result { margin-top: 10px; }

.tst-sim-answer {
  display: flex; flex-direction: column; gap: 2px;
  padding: 10px 12px; border-radius: 6px;
  background: var(--accent-glow); color: var(--text-body);
  font-size: 13px;
}
.tst-sim-why { font-size: 11.5px; color: var(--text-mute); }

.tst-sim-list { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 8px; }
.tst-sim-item { border: 1px solid var(--border); border-radius: 6px; padding: 8px 10px; }
/* The one that won is the answer; everything else is working. */
.tst-sim-item.is-won { border-color: var(--accent); }
.tst-sim-head { display: flex; justify-content: space-between; gap: 8px; align-items: baseline; }
.tst-sim-name { font-size: 12.5px; font-weight: 600; }
.tst-sim-flag { font-size: 11px; color: var(--text-mute); white-space: nowrap; }
.tst-sim-empty { font-size: 12px; color: var(--text-mute); margin-top: 8px; }

.tst-trace-line { font-size: 11.5px; line-height: 1.5; padding-left: 14px; position: relative; }
.tst-trace-line::before { position: absolute; left: 0; }
.tst-trace-line.is-yes { color: var(--text-mute); }
.tst-trace-line.is-yes::before { content: "¹3"; color: #22c55e; }
/* The failing line is the one somebody is looking for, so it is the one
   that is legible rather than the one that is loud: full-strength text
   against the muted passes, not red on everything. */
.tst-trace-line.is-no { color: var(--text-body); font-weight: 500; }
.tst-trace-line.is-no::before { content: "d7"; color: #ef4444; }
.tst-trace-kids { padding-left: 12px; border-left: 1px solid var(--border); margin-left: 4px; }
.tst-btn-ghost {
  flex: 1;
  height: 30px;
  background: var(--bg-float);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
}
.tst-btn-ghost:hover { background: var(--bg-hover); color: var(--text-hi); }

.tst-main {
  display: flex;
  flex-direction: column;
  gap: 18px;
  min-width: 0;
}

.tst-pane {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.tst-pane-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-float);
}
.tst-pane-title { font-size: 12px; font-weight: 600; color: var(--text-soft); text-transform: uppercase; letter-spacing: .04em; }
.tst-pane-actions { display: flex; gap: 6px; }
.tst-btn {
  height: 28px;
  padding: 0 10px;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  font-size: 12px;
  cursor: pointer;
}
.tst-btn:hover { background: var(--bg-hover); color: var(--text-hi); }
.tst-btn.active { background: var(--accent); border-color: var(--accent); color: #ffffff; }

.tst-preview-wrapper { padding: 20px; background: var(--bg-float); }
.tst-preview-card {
  background: #ffffff;
  border-radius: 8px;
  box-shadow: var(--shadow);
  overflow: hidden;
  transition: max-width .2s ease;
  margin: 0 auto;
  max-width: 760px;
}
.tst-preview-mobile { max-width: 380px; }
.tst-preview-bar {
  display: flex;
  align-items: center;
  gap: 6px;
  background: #f3f4f6;
  padding: 8px 12px;
  border-bottom: 1px solid #e5e7eb;
}
.tst-mac-dot { width: 10px; height: 10px; border-radius: 50%; display: inline-block; }
.tst-preview-bar-label { font-size: 11px; color: #6b7280; margin-left: 10px; }
.tst-preview-content {
  padding: 24px;
  font-family: Calibri, Arial, sans-serif;
  color: #222;
  min-height: 100px;
}
.tst-empty {
  color: #9ca3af;
  font-size: 13px;
  text-align: center;
  padding: 40px 0;
}

.tst-code {
  margin: 0;
  padding: 14px 16px;
  background: var(--bg-base);
  color: var(--text-soft);
  font-family: ui-monospace, Consolas, monospace;
  font-size: 12px;
  white-space: pre-wrap;
  word-break: break-word;
  max-height: 280px;
  overflow: auto;
}

#tst-toast-area {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}

/* Template gallery */
.tpl-gallery { padding: 24px 28px; }

.tpl-header {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 20px;
}

.tpl-title {
  font-family: var(--font-display);
  font-size: 24px;
  color: var(--text-hi);
  margin: 0;
}

.tpl-subtitle {
  color: var(--text-mute);
  font-size: 13px;
  margin: 4px 0 0;
}

.tpl-toolbar {
  display: flex;
  gap: 10px;
  align-items: center;
}

.tpl-search,
.tpl-select {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-body);
  font-size: 13px;
  padding: 8px 12px;
  outline: none;
}

.tpl-search { min-width: 220px; }
.tpl-search:focus,
.tpl-select:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.tpl-search::placeholder { color: var(--text-dim); }
.tpl-select option { background: var(--bg-float); }

.tpl-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(340px, 1fr));
  gap: 18px;
}

.tpl-loading,
.tpl-empty {
  grid-column: 1 / -1;
  padding: 48px 0;
  text-align: center;
  color: var(--text-mute);
  font-size: 14px;
}

.tpl-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  box-shadow: var(--shadow-sm);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  transition: box-shadow .15s ease, border-color .15s ease;
}

.tpl-card:hover { box-shadow: var(--shadow); border-color: var(--border-hi); }

.tpl-card-head {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
}

.tpl-card-icon {
  width: 34px;
  height: 34px;
  flex: 0 0 34px;
  border-radius: var(--radius-sm);
  background: var(--bg-float);
  color: var(--accent);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
}

.tpl-card-titles { flex: 1 1 auto; min-width: 0; }

.tpl-card-name {
  font-weight: 600;
  color: var(--text-hi);
  font-size: 14px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.tpl-card-cat {
  display: inline-block;
  margin-top: 2px;
  font-size: 10px;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--text-mute);
}

.tpl-copy-btn {
  flex: 0 0 auto;
  background: transparent;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  color: var(--text-soft);
  width: 32px;
  height: 32px;
  cursor: pointer;
  transition: background .15s ease, color .15s ease;
}

.tpl-copy-btn:hover { background: var(--bg-hover); color: var(--accent); }

.tpl-card-desc {
  padding: 10px 14px 0;
  color: var(--text-mute);
  font-size: 12px;
  line-height: 1.5;
}

.tpl-card-preview {
  margin: 12px 14px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: #ffffff;
  padding: 16px;
  overflow: auto;
}

.tpl-card-preview-inner { font-family: Calibri, Arial, sans-serif; }

.tpl-card-actions {
  padding: 0 14px 14px;
  margin-top: auto;
}

.tpl-add-btn {
  width: 100%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  background: var(--accent);
  border: none;
  border-radius: var(--radius-sm);
  color: #ffffff;
  font-size: 13px;
  font-weight: 600;
  padding: 9px 14px;
  cursor: pointer;
  transition: opacity .15s ease;
}

.tpl-add-btn:hover { opacity: .9; }
.tpl-add-btn:disabled { opacity: .55; cursor: default; }

#tpl-toast-area {
  position: fixed;
  bottom: 20px;
  right: 20px;
  display: flex;
  flex-direction: column;
  gap: 8px;
  z-index: 9999;
  pointer-events: none;
}



/* Footersly identity: navy, electric blue and cyan from the approved reference.
   The lockup now sits on the navy brand bar above the sidebar, as it does in
   the other apps, so it is light on dark rather than dark on white. */
.logo { gap: 10px; }
.footersly-mark { flex-shrink: 0; object-fit: contain; }
.logo-text-group { border: 0; padding: 0; gap: 3px; }
.logo-text { font-size: 19px; letter-spacing: -.6px; font-weight: 800; color: #fff; }
.logo-sub { font-family: var(--font-display); font-size: 7px; letter-spacing: 1.05px; color: var(--on-navy-muted); font-weight: 600; }
#sidebar { background: var(--brand-navy); border-right: 0; }
#sidebar .nav-item, #sidebar .nav-group-header { color: #e1edff; }
#sidebar .nav-item i, #sidebar .nav-group-header i { color: #a8d9ff; }
#sidebar .nav-item:hover, #sidebar .nav-group-header:hover { background: #ffffff12; color: #fff; }
#sidebar .nav-item.active { background: var(--accent); color: #fff; border-left-color: var(--brand-sky); }
#sidebar .sidebar-footer { border-color: #ffffff20; }
.brand-promise { color: #c0eaff; padding: 12px 8px; font-size: 17px; font-style: italic; }
.landing-brand-mark { margin-bottom: 24px; }
.landing-page .display-3 { font-size: clamp(36px, 6vw, 66px); line-height: 1.1; letter-spacing: -2px; color: #081638; }
.landing-page .lead { color: #124699; font-size: clamp(18px, 2.4vw, 24px); }
.landing-page { padding: 48px 20px; background: radial-gradient(ellipse at 80% 15%, #d8efff, transparent 65%); border-radius: 20px; }
.logo:focus-visible, #sidebar a:focus-visible, #sidebar button:focus-visible { outline: 2px solid var(--on-navy-muted); outline-offset: 3px; }
@media (max-width: 480px) {
    .logo-sub { display: none; }
    .logo { margin-right: 12px; }
    .logo-text { font-size: 23px; }
    .landing-page { padding: 32px 12px; }
}

/* Footersly workspace surfaces and dashboard. */
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { transition: none !important; animation: none !important; scroll-behavior: auto !important; } }
/* ── Editor side panel: Variables / Formatting ────────────────── */
.sig-side-tabs {
  display: flex;
  gap: 4px;
  padding: 8px 8px 0;
  border-bottom: 1px solid var(--border);
  position: sticky;
  top: 0;
  /* The panel's own surface, and opaque: this is what the list passes
     behind. It was --bg-base, which read as a white box floating in a
     grey panel - and made the active tab, also --bg-base, the same
     colour as the strip it sits in. */
  background: var(--bg-float);
  z-index: 2;
}
.sig-side-tab {
  flex: 1;
  border: 1px solid transparent;
  border-bottom: none;
  background: transparent;
  color: var(--text-mute);
  font: 600 12px var(--font-display);
  padding: 8px 10px;
  border-radius: var(--radius) var(--radius) 0 0;
  cursor: pointer;
}
.sig-side-tab:hover { background: var(--bg-raised); color: var(--text-hi); }
.sig-side-tab.active {
  background: var(--bg-base);
  border-color: var(--border);
  color: var(--text-hi);
  box-shadow: inset 0 2px 0 var(--accent);
}
/* The panel's gutter lives here rather than on the scroller above, so
   the sticky tab strip can reach the panel's real top edge. */
.sig-side-pane { padding: 4px 16px 16px; }

.sig-side-search {
  margin-bottom: 8px;
}

/* Variable chips, grouped */
.sig-chip-group {
  width: 100%;
  margin: 10px 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.sig-chip-group:first-child { margin-top: 0; }
.sig-side-hint { margin: 8px 0 0; font-size: 12px; color: var(--text-mute); }

/* Row / column tools */
.sig-table-tools {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 6px;
  margin-bottom: 8px;
}
.sig-table-tools .sig-pane-btn { margin: 0; }

/* Tester: grouped variable inputs */
.tst-field-group {
  margin: 12px 0 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--text-dim);
}
.tst-field-group:first-child { margin-top: 0; }

/* Diagnostics
   Reuses .pm-* for the page frame and tables; everything here is the
   findings list and the card grid the sections sit in. */
.dg-findings { display: flex; flex-direction: column; gap: 8px; }

.dg-finding {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-left-width: 3px;
  border-radius: var(--radius);
  background: var(--bg-base);
  font-size: 13px;
}
.dg-finding i { margin-top: 2px; font-size: 14px; }
.dg-finding div { display: flex; flex-direction: column; gap: 3px; }
.dg-finding strong { color: var(--text-hi); font-weight: 600; }
.dg-finding span { color: var(--text-mute); font-size: 12px; line-height: 1.5; }

.dg-finding-ok { border-left-color: #22c55e; }
.dg-finding-ok i { color: #22c55e; }
.dg-finding-warning { border-left-color: #f59e0b; }
.dg-finding-warning i { color: #f59e0b; }
.dg-finding-error { border-left-color: #f43f5e; }
.dg-finding-error i { color: #f43f5e; }
.dg-finding-info { border-left-color: var(--border); }
.dg-finding-info i { color: var(--text-mute); }

.dg-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(340px, 1fr));
  gap: 16px;
  align-items: start;
}

.dg-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  overflow: hidden;
}
.dg-card-title {
  margin: 0;
  padding: 10px 14px;
  border-bottom: 1px solid var(--border);
  background: var(--bg-float);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.dg-card-error {
  margin: 0;
  padding: 10px 14px;
  color: #f43f5e;
  font-size: 12px;
  border-bottom: 1px solid var(--border);
}
/* Cards hold their own table, so the outer .pm-table-wrap border would
   double up. The Indexes card keeps one because it is a real table. */
.dg-card > .pm-table-wrap { border: none; border-radius: 0; }

/* Label/value rows: the label column is a <th> so it reads correctly, but
   it must not look like a column heading. */
.dg-kv th {
  width: 45%;
  text-transform: none;
  letter-spacing: normal;
  font-size: 12px;
  font-weight: 500;
  background: transparent;
  border-bottom: 1px solid var(--border);
  vertical-align: middle;
  padding: 9px 14px;
}
.dg-kv td { padding: 9px 14px; font-size: 12px; }
.dg-kv tr:last-child th { border-bottom: none; }

.dg-mono {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 11px;
  color: var(--text-body);
  background: var(--bg-float);
  padding: 2px 6px;
  border-radius: 4px;
}
/* Neither good nor bad, so not one of the pm-pill-ok/off colours. */
.dg-pill-scope { background: var(--bg-float); color: var(--text-mute); }

.dg-muted { color: var(--text-mute); font-size: 11px; }
.dg-generated { color: var(--text-mute); font-size: 11px; margin: 0; }

/* ── Usage report ──────────────────────────────────────────────────
   Reuses the diagnostics cards (.dg-card) for the panels; only the
   headline figures, the bar chart and the range picker are its own. */

.us-range {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  color: var(--text-body);
  font-size: 13px;
  padding: 7px 10px;
}

.us-stats {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 16px;
}
.us-stat {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius);
  padding: 14px 16px;
}
.us-stat-value {
  font-family: var(--font-display);
  font-size: 26px;
  color: var(--text-hi);
  line-height: 1.1;
}
.us-stat-label {
  display: block;
  margin-top: 4px;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--text-mute);
}
.us-stat-hint { display: block; margin-top: 6px; font-size: 11px; color: var(--text-mute); }

/* Day-by-day columns. Bars are sized as a percentage of the busiest day,
   so an organisation with three inserts a week and one with three
   thousand both read the same way. */
.us-chart {
  display: flex;
  align-items: flex-end;
  gap: 2px;
  height: 120px;
  padding: 14px;
}
.us-bar { flex: 1 1 0; min-width: 2px; background: var(--accent, #3b82f6); border-radius: 2px 2px 0 0; opacity: .85; }
.us-bar-empty { background: var(--border); opacity: 1; }
.us-chart-axis {
  display: flex;
  justify-content: space-between;
  padding: 0 14px 12px;
  font-size: 11px;
  color: var(--text-mute);
}

.us-num { text-align: right; font-variant-numeric: tabular-nums; }

/* Working in somebody else's organisation, as their provider. Loud on
   purpose: the one mistake that matters here is forgetting whose tenant
   this is. */
.delegate-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 18px;
  padding: 10px 14px;
  border: 1px solid #f2c94c;
  border-left: 4px solid #f2994a;
  background: #fff8e6;
  border-radius: 8px;
  color: #6b4b00;
  font-size: 13px;
}
.delegate-banner i { color: #c47f17; }
.delegate-leave {
  margin-left: auto;
  white-space: nowrap;
  font-weight: 600;
  color: #6b4b00;
  text-decoration: underline;
}

/* Licence page: the seat-reclaim policy and the notes around it. */
.detail-note {
  margin: 6px 0 0;
  font-size: 12.5px;
  color: var(--text-mute);
  line-height: 1.5;
}
.seat-policy {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
  margin: 12px 0 4px;
}
.seat-policy select {
  padding: 7px 10px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}

/* Field Rules: the coarse self-service switch above the per-field rules. */
.fr-policy {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 16px;
  padding: 14px 16px;
  background: #fff;
  border: 1px solid #e6eaf2;
  border-radius: 10px;
}
.fr-policy select {
  padding: 7px 10px;
  border: 1px solid #dde3ec;
  border-radius: 8px;
  font: inherit;
  background: #fff;
}
.fr-policy .pm-subtitle { margin: 0; flex: 1 1 260px; }

/* ---------- Image library (signature editor) ---------- */
.sig-modal-wide { max-width: 720px; width: 92vw; }

.sig-asset-upload {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 16px;
}
.sig-asset-upload input[type="file"] { flex: 1 1 220px; font-size: 13px; color: var(--text-soft); }
.sig-asset-hint { font-size: 12px; color: var(--text-mute); }

.sig-asset-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(132px, 1fr));
  gap: 12px;
  max-height: 46vh;
  overflow-y: auto;
  padding: 2px;
}
.sig-asset {
  position: relative;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, .12);
  border-radius: 10px;
  overflow: hidden;
  background: rgba(255, 255, 255, .04);
}
.sig-asset-pick {
  display: block;
  width: 100%;
  height: 96px;
  padding: 8px;
  border: 0;
  background: #fff;
  cursor: pointer;
}
.sig-asset-pick img { max-width: 100%; max-height: 100%; object-fit: contain; }
.sig-asset figcaption { display: block; padding: 7px 9px; }
.sig-asset-name {
  display: block;
  font-size: 12px;
  font-weight: 600;
  color: var(--text-white);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sig-asset-meta { display: block; font-size: 11px; color: var(--text-mute); }
.sig-asset-del {
  position: absolute;
  top: 4px;
  right: 4px;
  width: 22px;
  height: 22px;
  border: 0;
  border-radius: 50%;
  background: rgba(0, 0, 0, .55);
  color: #fff;
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
}
.sig-asset-empty { grid-column: 1 / -1; font-size: 13px; color: var(--text-mute); margin: 0; }

.sig-asset-url { margin-top: 14px; font-size: 13px; color: var(--text-soft); }
.sig-asset-url-row { display: flex; gap: 8px; margin-top: 8px; }
.sig-asset-url-row input {
  flex: 1;
  padding: 7px 10px;
  border: 1px solid rgba(255, 255, 255, .15);
  border-radius: 8px;
  background: rgba(255, 255, 255, .05);
  color: var(--text-white);
  font: inherit;
}

/* ---------- Directory connection (Tenant Configuration) ---------- */
.dir-modes {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(300px, 1fr));
  gap: 16px;
  margin: 8px 0 18px;
}
.dir-mode {
  border: 1px solid #e0e7f1;
  border-radius: 12px;
  padding: 16px 18px;
  background: #fbfdff;
}
.dir-mode.is-current { border-color: var(--accent); box-shadow: 0 0 0 3px rgba(0, 91, 234, .08); }
.dir-mode h3 { margin: 0 0 8px; font-size: 15px; color: var(--text-hi); }
.dir-mode h3 i { color: var(--accent); margin-right: 6px; }
.dir-mode p { font-size: 13px; color: var(--text-soft); margin: 0 0 10px; }
.dir-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 0; }
.dir-state { font-size: 13px; font-weight: 600; margin: 0 0 8px; }
.dir-state.ok { color: var(--green-dim); }
.dir-state.bad { color: var(--red-dim); }
.dir-state.warn { color: var(--amber-dim); }
.dir-facts { margin-top: 6px; }

/* ---------- Permissions: adding from the synced directory ---------- */
.pm-add {
  background: #fff;
  border: 1px solid #e0e7f1;
  border-radius: 12px;
  padding: 18px 20px;
  margin-bottom: 18px;
}
.pm-add-head { display: flex; align-items: baseline; gap: 12px; margin-bottom: 12px; }
.pm-add-head h2 { margin: 0; font-size: 15px; color: var(--text-hi); }
.pm-seats { margin-left: auto; font-size: 12.5px; color: var(--text-mute); }

.pm-add-row { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; }
.pm-add-row input[type="search"] {
  flex: 1 1 320px;
  padding: 9px 12px;
  border: 1px solid #dde3ec;
  border-radius: 9px;
  font: inherit;
}
.pm-add-row select {
  padding: 9px 11px;
  border: 1px solid #dde3ec;
  border-radius: 9px;
  font: inherit;
  background: #fff;
}

.pm-add-rights {
  display: flex;
  gap: 14px;
  flex-wrap: wrap;
  align-items: center;
  margin-top: 12px;
  font-size: 13px;
  color: var(--text-soft);
}
.pm-add-rights label { display: inline-flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }

.pm-add-table { margin-top: 14px; }
.pm-add-table td { padding: 9px 10px; border-bottom: 1px solid #eef2f7; vertical-align: middle; }
.pm-add-table tr:last-child td { border-bottom: 0; }
.pm-add-action { text-align: right; white-space: nowrap; }
.pm-link {
  background: none;
  border: 0;
  padding: 0;
  font: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--red-dim);
  cursor: pointer;
  text-decoration: underline;
}
.pm-link:hover { color: var(--red); }
.pm-link:disabled { opacity: .5; cursor: default; }

/* ── Signatures → Branding ────────────────────────────────────────
   A brand kit is a long form, so it is broken into cards with the same
   shape as the rest of the admin pages: an icon, a heading that says what
   the section is for, and the fields under it. Wide screens get the font
   specimens and the image fields beside their controls, because seeing
   the font and the picture is the point of choosing them. */
.bk-header-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.bk-header-actions .pm-role-select { min-width: 190px; }
.bk-save { background: var(--accent); border-color: var(--accent); color: #fff; }
.bk-save:hover { background: var(--accent-hi); border-color: var(--accent-hi); color: #fff; }

.bk-card {
  background: var(--bg-base);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 20px 22px;
  margin-bottom: 16px;
}

.bk-card-head { display: flex; gap: 14px; align-items: flex-start; margin-bottom: 16px; }
.bk-card-head h2 { margin: 0 0 2px; font-size: 16px; color: var(--text-white); }
.bk-card-head p { margin: 0; font-size: 13px; color: var(--text-mute); max-width: 70ch; }
.bk-card-icon {
  flex: none;
  width: 34px;
  height: 34px;
  display: grid;
  place-items: center;
  border-radius: var(--radius);
  background: var(--bg-float);
  color: var(--accent);
  font-size: 15px;
}

.bk-field { display: block; margin-bottom: 14px; max-width: 360px; }
.bk-field-wide { max-width: 560px; }
.bk-field > span { display: block; font-size: 12px; font-weight: 600; color: var(--text-mute); margin-bottom: 5px; }
.bk-field input, .bk-field select, .bk-field textarea {
  width: 100%;
  height: 32px;
  padding: 0 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  font-family: var(--font-display);
  font-size: 13px;
  color: var(--text-body);
}
.bk-field input:focus, .bk-field select:focus, .bk-field textarea:focus {
  outline: none;
  border-color: var(--accent);
  box-shadow: 0 0 0 3px var(--accent-glow);
}
.bk-field small { display: block; margin-top: 4px; font-size: 11.5px; color: var(--text-mute); }

.bk-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; color: var(--text-body); }

/* Fonts: controls on the left, the specimen on the right, so the choice
   and its consequence are on one line. */
.bk-font-row {
  display: flex;
  gap: 24px;
  align-items: flex-start;
  padding: 14px 0;
  border-top: 1px solid var(--border);
}
.bk-font-row:first-of-type { border-top: 0; padding-top: 0; }
.bk-font-fields { flex: 0 0 320px; }
.bk-font-fields .bk-field { max-width: none; }
.bk-font-previews { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 23px; padding-top: 19px; }
/* The older rule, from when a specimen was one line of text set on the
   right. It is a small signature now - a name, a role and a contact
   line - so it is left-aligned like the thing it is a specimen of, and
   it wraps rather than being cut off with an ellipsis. The block that
   replaces this one is in the branding section above. */
.bk-specimen {
  margin: 0;
  color: var(--text-hi);
  text-align: left;
}

.bk-colours { display: flex; gap: 24px; flex-wrap: wrap; }
/* Named with .bk-field so it beats `.bk-field > span { display: block }`,
   which was turning this row into a stack and dropping the swatch under
   the hex box. */
.bk-field > span.bk-colour { display: flex; gap: 8px; align-items: center; margin-bottom: 0; }
/* The hex box takes the room that is left rather than all of it - its
   100% width was pushing the swatch onto the next line. */
.bk-colour input[type="text"] {
  /* width:auto as well as the flex basis: the 100% from .bk-field input
     is the flex basis otherwise, and 100% + a swatch does not fit on one
     line, so the swatch wrapped underneath. */
  width: auto;
  flex: 1 1 auto;
  min-width: 0;
  font-family: var(--font-mono);
  text-transform: uppercase;
}
.bk-colour input[type="color"] {
  flex: none;
  width: 34px;
  height: 32px;
  padding: 2px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  cursor: pointer;
}

/* Images: the drop zone beside the three things every picture in a
   signature needs - where it goes, what it says when it is blocked, and
   what a screen reader reads out. */
.bk-image { display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-start; }
.bk-drop {
  flex: 1 1 320px;
  min-height: 170px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 18px;
  border: 1px dashed var(--border-hi);
  border-radius: var(--radius);
  background: var(--bg-raised);
  color: var(--text-mute);
  text-align: center;
}
.bk-drop > i { font-size: 20px; color: var(--text-dim); }
.bk-upload-label {
  font-size: 13px;
  font-weight: 600;
  color: var(--accent);
  text-decoration: underline;
  cursor: pointer;
}
.bk-upload-label input { display: none; }
.bk-drop-hint { margin: 0; font-size: 12px; }
.bk-drop-types { margin: 0; font-size: 11px; color: var(--text-dim); }
.bk-thumb { max-width: 100%; max-height: 110px; }
.bk-thumb-meta { font-size: 11px; color: var(--text-dim); font-family: var(--font-mono); }
.bk-image-fields { flex: 1 1 320px; min-width: 0; }
.bk-image-fields .bk-field { max-width: none; }

.bk-disclaimer {
  width: 100%;
  min-height: 120px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  font-family: var(--font-display);
  font-size: 13px;
  line-height: 1.5;
  color: var(--text-body);
  resize: vertical;
}
.bk-disclaimer:focus { outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-glow); }
.bk-counter { margin-top: 6px; text-align: right; font-size: 11.5px; color: var(--text-mute); }

@media (max-width: 900px) {
  .bk-font-row { flex-direction: column; gap: 8px; }
  .bk-font-fields { flex: none; width: 100%; }
  .bk-font-previews { padding-top: 0; gap: 8px; }
  .bk-specimen { font-size: 15px; }
}

/* AND or OR across a rule set. One rule used to be enough, always, with
   no way to say otherwise - so "the London office, but only sales" was
   two rules that matched all of London and all of sales. */
.dc-rule-match, .sig-rule-match {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
  font-size: 12px;
  color: var(--text-mute);
}
.dc-rule-match select, .sig-rule-match select {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-float);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-body);
}
.dc-rule-match select:focus, .sig-rule-match select:focus {
  outline: none;
  border-color: var(--accent);
}

/* The disclaimer editor's conditional builder: pick a field, a test and a
   value, and the selected wording is wrapped in it. */
.dc-conditional {
  margin-top: 10px;
  padding: 10px 12px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}
.dc-conditional-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 8px; }
.dc-conditional-head strong { font-size: 12px; color: var(--text-hi); }
.dc-conditional-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.dc-conditional-row select, .dc-conditional-row input {
  height: 28px;
  padding: 0 8px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  font-family: var(--font-display);
  font-size: 12px;
  color: var(--text-body);
}
.dc-conditional-row select { min-width: 150px; }
.dc-conditional-row input { flex: 1 1 140px; min-width: 0; }
.dc-conditional-row input:disabled { background: var(--bg-float); color: var(--text-dim); }

/* The conditional inputs in the signature designer's inspector stack, so
   they get the same spacing as the selects already there. */
#sig-design-filter-op, #sig-design-filter-value { margin-top: 6px; }
#sig-design-filter-value:disabled { color: var(--text-dim); }

/* The photograph and card settings on a template, which are settings about
   how it is produced rather than fields in it - so they are grouped and
   labelled rather than dropped into the form grid. */
.sig-photo-settings {
  margin-bottom: 14px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius-sm);
  background: var(--bg-raised);
}
.sig-photo-settings > .sig-form-label { margin-bottom: 8px; }
.sig-photo-settings .sig-hint { margin: 8px 0 0; font-size: 11.5px; color: var(--text-mute); }
.sig-photo-settings .sig-input:disabled { background: var(--bg-float); color: var(--text-dim); }

/* ── Designer: the canvas controls, and the shortcuts ─────────────
   These sit on the right of the toolbar because they are about the canvas
   rather than the selection - the buttons to their left all act on
   whatever is highlighted. */
.sig-tb-spacer { flex: 1 1 auto; }

.sig-tb-width {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  color: var(--text-mute);
  font-size: 12px;
}
.sig-tb-width i { font-size: 11px; }

/* Written down beside the toolbar rather than in a manual nobody opens:
   every one of these already worked and none of them was discoverable. */
.sig-shortcuts {
  margin: 0 12px 10px;
  padding: 12px 14px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  background: var(--bg-base);
  box-shadow: var(--shadow-sm);
}
.sig-shortcuts-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.sig-shortcuts-head strong { font-size: 13px; color: var(--text-hi); }
.sig-shortcuts dl {
  display: grid;
  grid-template-columns: max-content 1fr;
  gap: 4px 16px;
  margin: 0;
  font-size: 12px;
}
.sig-shortcuts dt { color: var(--text-hi); font-weight: 600; white-space: nowrap; }
.sig-shortcuts dd { margin: 0; color: var(--text-mute); }

/* ── Letting colleagues share your details ────────────────────────
   On My Signature, beside the person's own details, because it is their
   decision and not an administrator's. */
.ms-check { display: flex; align-items: center; gap: 8px; margin: 6px 0; font-size: 13px; }
.ms-check-inline { display: inline-flex; margin: 2px 12px 2px 0; }
.ms-check em { color: var(--text-mute); font-style: normal; font-size: 12px; }
.ms-actions-inline { margin-top: 14px; }

.sh-grant-add { display: flex; gap: 8px; margin: 8px 0; }
.sh-grant-add .ms-input { flex: 1 1 auto; }

.sh-results:empty { display: none; }
.sh-results { border: 1px solid var(--line); border-radius: var(--radius); margin-bottom: 12px; }
.sh-result {
  display: block; width: 100%; text-align: left; padding: 8px 12px;
  background: none; border: 0; border-bottom: 1px solid var(--line);
  font: inherit; font-size: 13px; cursor: pointer;
}
.sh-result:last-child { border-bottom: 0; }
.sh-result:hover { background: var(--accent-glow); }
.sh-result-mail { color: var(--text-mute); margin-left: 6px; }

.sh-grants td { vertical-align: top; }

/* ══ Drafts and earlier versions ════════════════════════════════════
   A panel beside the editor rather than a page of its own: it is read
   next to the thing it describes, and leaving the editor to look at the
   history of what you are editing loses your place. */
.sig-history {
    position: absolute;
    top: 56px;
    right: 0;
    width: 420px;
    max-width: 100%;
    max-height: calc(100% - 56px);
    overflow: auto;
    z-index: 40;
    background: var(--surface, #fff);
    border: 1px solid var(--line, #e3e8ef);
    border-radius: 12px;
    box-shadow: 0 12px 32px rgba(12, 27, 51, .14);
    padding: 16px;
}

.sig-history-head { display: flex; align-items: center; justify-content: space-between; }
.sig-history-head h3 { margin: 0; font-size: 15px; }
.sig-history-actions { margin: 12px 0; }

/* The dot on the toolbar button. A draft nobody can see is a draft
   nobody publishes. */
.sig-history .sig-hist-list { list-style: none; margin: 0; padding: 0; }
.sig-hist-dot {
    position: absolute;
    top: 4px; right: 4px;
    width: 8px; height: 8px;
    border-radius: 50%;
    background: var(--caution, #8a5a00);
}
#sig-history-btn { position: relative; }

.sig-hist-row {
    display: grid;
    grid-template-columns: 38px 1fr;
    gap: 2px 8px;
    align-items: baseline;
    padding: 10px 0;
    border-bottom: 1px solid var(--line, #e3e8ef);
    font-size: 13px;
}
.sig-hist-row:last-child { border-bottom: 0; }
.sig-hist-row.live { font-weight: 600; }
.sig-hist-v { color: var(--ink-muted, #5b6675); font-variant-numeric: tabular-nums; }
.sig-hist-what { min-width: 0; }
.sig-hist-when { color: var(--ink-muted, #5b6675); white-space: nowrap; }
.sig-hist-row-actions { grid-column: 2; display: flex; gap: 6px; margin-top: 6px; }
.sig-hist-row-actions .btn { padding: 4px 10px; font-size: 12px; }
.sig-hist-actions .btn { padding: 6px 12px; font-size: 13px; }
.sig-hist-empty, .sig-hist-foot { color: var(--ink-muted, #5b6675); font-size: 12px; padding: 8px 0; }

.sig-hist-draft {
    background: var(--caution-soft, #fbf1df);
    border-radius: 10px;
    padding: 12px;
    margin-bottom: 12px;
}
.sig-hist-draft-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
/* The address is the longest thing in the panel and the least important
   part of it - truncate it rather than let it push the card open. */
.sig-hist-draft-head .sig-hist-when {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 12px;
}
.sig-hist-chip { flex: none; }
.sig-hist-chip {
    font-size: 11px;
    font-weight: 700;
    letter-spacing: .3px;
    text-transform: uppercase;
    padding: 3px 8px;
    border-radius: 999px;
    background: var(--caution, #8a5a00);
    color: #fff;
}
.sig-hist-warn { margin: 8px 0 0; font-size: 12px; color: var(--caution, #8a5a00); }
.sig-hist-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }

/* ── The comparison ──────────────────────────────────────────────── */
.sig-diff-modal {
    position: fixed;
    inset: 0;
    z-index: 60;
    background: rgba(8, 22, 56, .45);
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 24px;
}
.sig-diff-modal[hidden] { display: none; }
.sig-diff-card {
    background: var(--surface, #fff);
    border-radius: 12px;
    width: 900px;
    max-width: 100%;
    max-height: 80vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}
.sig-diff-head {
    display: flex; align-items: center; justify-content: space-between;
    padding: 14px 16px;
    border-bottom: 1px solid var(--line, #e3e8ef);
}
.sig-diff-head h3 { margin: 0; font-size: 15px; }
.sig-diff-body {
    overflow: auto;
    padding: 12px 0;
    font-family: ui-monospace, SFMono-Regular, Consolas, monospace;
    font-size: 12px;
    line-height: 1.5;
}
.sig-diff-line { padding: 0 16px; white-space: pre-wrap; word-break: break-word; }
.sig-diff-line.added { background: #e7f5ec; }
.sig-diff-line.removed { background: #fdecea; }
.sig-diff-sign { display: inline-block; width: 1.2em; color: var(--ink-muted, #5b6675); }
.sig-diff-skip {
    padding: 4px 16px;
    margin: 4px 0;
    color: var(--ink-muted, #5b6675);
    background: var(--surface-sunken, #f4f6f9);
    font-style: italic;
}

/* The caveat under the card numbers. Every one of them is an upper bound
   and somebody will quote them at a renewal, so the qualification sits on
   the panel rather than in a tooltip - but quietly, or it competes with
   the numbers it is qualifying. */
.us-note {
    margin: 12px 0 16px;
    padding: 10px 14px;
    border-left: 3px solid var(--line, #e3e8ef);
    color: var(--ink-muted, #5b6675);
    font-size: 12.5px;
    line-height: 1.55;
    max-width: 78ch;
}

/* ══ The shared library dialog ═══════════════════════════════════
   One library browser, worn by two: the campaign library (an editor
   dialog, and Campaigns -> Templates) and the signature library (the
   same dialog on the signature editor). It lived in campaigns.css
   under .cm-lib-* until the signatures needed exactly the same thing;
   a second copy under a second prefix is how two pages that are meant
   to be the same control start drifting a pixel at a time.

   .lib-backdrop/.lib is the dialog; .lib-page is the same browser laid
   out as a page, with no dialog around it. */
.lib-backdrop {
  position: fixed;
  inset: 0;
  z-index: 1200;
  display: flex;
  align-items: flex-start;
  justify-content: center;
  padding: 32px 24px;
  background: rgba(14, 18, 27, 0.55);
  overflow-y: auto;
}
/* `hidden` is a user-agent rule at the lowest possible specificity, so the
   `display: flex` above beats it and the panel never hides. Stated
   explicitly, as every other display-setting class in this product has to. */
.lib-backdrop[hidden] { display: none; }
/* Nothing scrolls behind an overlay that is itself scrollable. */
body.lib-shown { overflow: hidden; }

.lib {
  width: min(1180px, 100%);
  background: var(--bg-base);
  border: 1px solid var(--cm-line);
  border-radius: var(--radius-lg);
  box-shadow: 0 24px 60px rgba(10, 14, 22, 0.35);
  display: flex;
  flex-direction: column;
  max-height: 100%;
}

.lib-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 16px;
  padding: 18px 20px 14px;
  border-bottom: 1px solid var(--cm-line);
}
.lib-head h2 { margin: 0 0 4px; font-size: 19px; font-weight: 700; color: var(--text-white); }
.lib-lead { margin: 0; font-size: 12.5px; color: var(--text-mute); max-width: 76ch; }

.lib-tools {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  padding: 12px 20px;
  border-bottom: 1px solid var(--cm-line);
  background: var(--bg-raised);
}
/* The editor page styles every field under it - `.cm-page select {
   width: 100% }` for the form - and the library's tools are inside that
   page, dialog and all. So the search box and both filters were each a
   full-width row: four stacked controls where the design is one line.
   Stated here rather than by narrowing the form rule, because a form
   field filling its column is right and these are not form fields. */
.lib-tools input[type="search"] { flex: 1 1 220px; min-width: 180px; width: auto; }
.lib-tools select { width: auto; flex: 0 0 auto; }
.lib-tools input[type="search"],
.lib-tools select {
  border: 1px solid var(--cm-line);
  border-radius: var(--radius-sm);
  background: var(--bg-base);
  color: var(--text-body);
  padding: 7px 10px;
  font: 500 13px var(--font-display);
}
.lib-count { margin-left: auto; font-size: 12px; color: var(--text-dim); }

.lib-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(360px, 1fr));
  /* A card is as tall as the design inside it, and the grid scrolls.
     Without this the dialog drew a hundred rows of five pixels: the grid
     is a flex item in a panel capped at the window height, so its own
     height is definite, and `auto` rows then share that height out
     between them instead of each taking what its card needs. Measured:
     `grid-template-rows` computed to 5.15625px a row, every preview
     clipped to a line, the whole library a stack of empty strips.
     `min-height: 0` is the other half - a flex item will not shrink
     below its content without it, so the scroller never scrolls. */
  grid-auto-rows: max-content;
  align-content: start;
  min-height: 0;
  gap: 14px;
  padding: 16px 20px 20px;
  overflow-y: auto;
}
.lib-empty { margin: 0; padding: 0 20px 24px; font-size: 13px; color: var(--text-mute); }
.lib-empty[hidden] { display: none; }

.lib-card {
  border: 1px solid var(--cm-line);
  border-radius: var(--radius);
  background: var(--bg-base);
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
.lib-card:hover { border-color: var(--accent); }

/* The design is 600px wide and the card is not, so it is scaled rather
   than reflowed - a banner laid out narrower is a different design. */
.lib-shot {
  height: 150px;
  overflow: hidden;
  padding: 10px;
  background: #fff;
  background-image:
    linear-gradient(45deg, #fafbfc 25%, transparent 25%, transparent 75%, #fafbfc 75%) 0 0/16px 16px,
    linear-gradient(45deg, #fafbfc 25%, #fff 25%, #fff 75%, #fafbfc 75%) 8px 8px/16px 16px;
}
.lib-shot-inner {
  transform: scale(.58);
  transform-origin: top left;
  width: 172.4%;                               /* 100 / .58, so it fills */
  font-family: Calibri, Arial, sans-serif;
  color: #222;
  pointer-events: none;                        /* the button owns the click */
}
.lib-shot-inner img { max-width: 100%; }

.lib-meta { padding: 10px 12px 0; }
.lib-name { font-size: 13.5px; font-weight: 600; color: var(--text-hi); }
.lib-tags { display: flex; flex-wrap: wrap; gap: 5px; margin-top: 6px; }
.lib-use { margin: 10px 12px 12px; justify-content: center; }


/* ── The library as a page ──────────────────────────────────────
   Campaigns -> Templates is the same browser without the dialog around
   it, so it reuses every .lib-* rule above and adds only its own
   heading and the frame those rules expected a panel to provide. */
.lib-page { max-width: 1400px; }
.lib-page-head { padding: 0 0 14px; }
.lib-page-title { margin: 0 0 4px; font-size: 22px; font-weight: 700; color: var(--text-white); }
.lib-page-lead { margin: 0; font-size: 13px; color: var(--text-mute); max-width: 82ch; line-height: 1.5; }
.lib-page-lead a { color: var(--accent); }

.lib-page .lib-tools {
  border: 1px solid var(--cm-line);
  border-radius: var(--radius) var(--radius) 0 0;
}
.lib-page .lib-grid {
  border: 1px solid var(--cm-line);
  border-top: 0;
  border-radius: 0 0 var(--radius) var(--radius);
  background: var(--bg-raised);
  /* On a page the grid is as tall as it needs to be and the window
     scrolls; the dialog's own scroller would trap it in a box. */
  overflow: visible;
}
.lib-page .lib-empty { padding-top: 16px; }

/* ── The editor's tabs ──────────────────────────────────────────
   Same shape and the same metrics as the signature editor's
   (.sig-tabs in site.css), because they are the same control doing the
   same job on the neighbouring page. What sits above them is what is
   true of the campaign whichever tab is open: its name and whether it
   is switched on. */
.cm-editor-head {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 0 0 12px;
}
.cm-title-input {
  flex: 1 1 auto;
  border: 1px solid transparent;
  background: transparent;
  color: var(--text-white);
  font: 700 17px/1.3 var(--font-display);
  padding: 6px 8px;
  border-radius: var(--radius-sm);
}
.cm-title-input:hover { border-color: var(--cm-line); }
.cm-title-input:focus { border-color: var(--accent); background: var(--bg-base); outline: none; }
.cm-title-input::placeholder { color: var(--text-dim); font-weight: 600; }

.cm-tabs {
  display: flex;
  align-items: center;
  gap: 2px;
  border-bottom: 1px solid var(--cm-line);
  margin: 0 0 16px;
}
.cm-tab {
  padding: 10px 16px;
  font: 600 12px var(--font-mono);
  letter-spacing: .3px;
  text-transform: uppercase;
  color: var(--text-mute);
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  cursor: pointer;
  transition: color .15s, border-color .15s;
}
.cm-tab:hover { color: var(--text-soft); }
.cm-tab.active { color: var(--accent-hi); border-bottom-color: var(--accent); }

/* A pane hidden with the attribute, said explicitly: `hidden` is a
   user-agent rule at the lowest specificity and loses to any display
   this file sets. */
.cm-pane[hidden] { display: none; }
.cm-pane > .cm-field:last-child { margin-bottom: 0; }

/* A chip on a library card: what the design is filed under, and what
   shape it is. Its own rule rather than the campaign page's .cm-tag,
   because the signature library wears the same card. */
.lib-tag {
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding: 2px 6px;
  border-radius: 999px;
  background: var(--bg-raised);
  color: var(--text-mute);
}
.lib-loading { padding: 16px 14px; color: var(--text-mute); font-size: 12px; }

@media (max-width: 800px) {
  .lib-backdrop { padding: 12px; }
  .lib-grid { grid-template-columns: 1fr; }
}

/* ── Branding, in the editor shape ──────────────────────────────
   The brands are an overview of cards and the form is a view you open,
   as on Signatures and Campaigns. What a brand is - two colours and a
   typeface - is shown on the card rather than named. */
.bk-ov-preview {
  display: flex;
  align-items: center;
  gap: 14px;
  padding: 14px 16px;
  background: #fff;
}
.bk-ov-specimen {
  margin: 0;
  font-size: 15px;
  font-weight: 700;
  color: #1f2a37;
  line-height: 1.35;
}
.bk-ov-specimen span { display: block; font-size: 12px; font-weight: 400; color: #6b7686; }
.bk-toolbar-check { margin: 0 4px 0 0; white-space: nowrap; }

/* ── Sending identities ─────────────────────────────────────────
   The page is the Permissions page's list and panel; these are the
   few things that page has no equivalent of - an address with its
   name under it, and the two ways a signature can be put together
   stated as a choice rather than as two words in a dropdown. */
.si-addr { font-weight: 600; color: var(--text-hi); }
.si-sub { font-size: 12px; color: var(--text-dim); }
.si-nobody { font-style: italic; }
.si-from-directory { color: var(--text-mute); }

.si-field { display: block; margin-bottom: 14px; }
.si-field > span, .si-field-label {
  display: block;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .05em;
  color: var(--text-dim);
  margin-bottom: 5px;
}
.si-field input[type="text"], .si-field input[type="email"], .si-field select {
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--border);
  border-radius: var(--radius);
  font: 500 13px var(--font-display);
  color: var(--text-body);
  background: var(--bg-base);
}
.si-field input:disabled { background: var(--bg-raised); color: var(--text-dim); }
.si-field small { display: block; margin-top: 5px; font-size: 11.5px; color: var(--text-mute); }
.si-row { display: flex; gap: 12px; }
.si-row .si-field { flex: 1; }
.si-field[hidden] { display: none; }

.si-modes { border: 0; margin: 0 0 16px; padding: 0; }
.si-modes legend {
  font-size: 11px; font-weight: 600; text-transform: uppercase;
  letter-spacing: .05em; color: var(--text-dim); margin-bottom: 6px; padding: 0;
}
.si-mode {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 10px 12px; margin-bottom: 8px;
  border: 1px solid var(--border); border-radius: var(--radius);
  cursor: pointer;
}
.si-mode:hover { border-color: var(--border-hi); }
.si-mode input { margin-top: 3px; }
.si-mode span { display: block; font-size: 12.5px; color: var(--text-mute); line-height: 1.45; }
.si-mode strong { display: block; font-size: 13px; color: var(--text-hi); margin-bottom: 2px; }
.si-mode code { font-size: 12px; }

.si-granted { display: flex; flex-wrap: wrap; gap: 5px; margin-bottom: 8px; min-height: 24px; }
.si-chip { display: inline-flex; align-items: center; gap: 5px; }
.si-chip-x {
  border: 0; background: none; cursor: pointer; padding: 0 1px;
  font-size: 14px; line-height: 1; color: inherit; opacity: .6;
}
.si-chip-x:hover { opacity: 1; }

.si-granted-add { position: relative; }
.si-granted-add input {
  width: 100%; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font: 500 13px var(--font-display); background: var(--bg-base); color: var(--text-body);
}
.si-person-results {
  position: absolute; left: 0; right: 0; top: calc(100% + 4px); z-index: 10;
  max-height: 230px; overflow-y: auto;
  background: var(--bg-base); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 10px 26px rgba(8, 22, 56, .14);
}
.si-person-results[hidden] { display: none; }
.si-person-results p { padding: 10px 12px; margin: 0; }
.si-person {
  display: block; width: 100%; text-align: left;
  padding: 8px 12px; border: 0; background: none; cursor: pointer;
}
.si-person:hover { background: var(--bg-raised); }
.si-person span { display: block; font-size: 13px; color: var(--text-hi); }
.si-person small { display: block; font-size: 11.5px; color: var(--text-dim); }

.si-check { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; }
/* Shared signature/campaign link editor. Scoped controls avoid campaign form widths. */
.sig-link-dialog {
    width: min(440px, calc(100vw - 32px));
    margin: auto;
    padding: 28px;
    border: 1px solid var(--border-hi);
    border-radius: var(--radius-lg);
    color: var(--text-body);
    background: var(--bg-float);
    font-family: var(--font-display);
    box-shadow: var(--shadow-lg);
}
.sig-link-dialog::backdrop { background: rgba(0,0,0,.7); backdrop-filter: blur(4px); }
.sig-link-dialog h2 { margin: 0 0 10px; font-size: 18px; font-weight: 700; color: var(--text-white); }
.sig-link-dialog label { display: block; margin: 12px 0 6px; font-size: 12px; font-weight: 600; color: var(--text-mute); }
.sig-link-dialog [role="alert"] { color: var(--red-dim); font-size: 13px; }
.sig-crumb { font: inherit; background: transparent; }

/* Structural editing shares the portal's controls; the miniature grid is
   a map of actual cells, including nested tables and merged cells. */
.sig-layout-panel { display: grid; gap: 12px; }
.sig-layout-panel label { font-size: 12px; font-weight: 600; }
.sig-layout-panel .sig-side-hint { margin: 0; }
.sig-layout-map { overflow: auto; }
.sig-layout-map table { width: 100%; border-collapse: separate; border-spacing: 3px; table-layout: fixed; }
.sig-layout-map td { padding: 0; vertical-align: top; }
.sig-layout-map button {
    width: 100%; min-height: 48px; padding: 8px;
    border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-base); color: var(--text-hi);
    font: 500 12px var(--font-display); overflow-wrap: anywhere; cursor: pointer;
}
.sig-layout-map button:hover { border-color: var(--accent); }
.sig-layout-map button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-glow); }
.sig-layout-panel [hidden] { display: none; }
.sig-layout-panel .sig-table-tools { margin: 12px 0; }
.sig-design-edit.sig-layout-guides td,
.sig-design-edit.sig-layout-guides th { outline: 1px dashed var(--border-hi); outline-offset: -1px; }
.sig-layout-dialog { width: min(560px, calc(100vw - 32px)); }
.sig-layout-presets { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; margin: 16px 0; }
.sig-layout-presets button {
    padding: 10px 6px; border: 1px solid var(--border); border-radius: var(--radius-sm);
    background: var(--bg-base); color: var(--text-hi); font: 500 12px var(--font-display); cursor: pointer;
}
.sig-layout-presets button[aria-pressed="true"] { border-color: var(--accent); background: var(--accent-glow); }
.sig-layout-sketch { display: grid; gap: 4px; height: 42px; margin-bottom: 8px; }
.sig-layout-sketch i { background: var(--accent-glow); border: 1px solid var(--border-hi); border-radius: var(--radius-sm); }
.sig-layout-fields { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.sig-layout-dialog .sig-select { width: 100%; }
@media (max-width: 600px) {
    .sig-layout-presets { grid-template-columns: repeat(2, 1fr); }
}


/* ── The shared rule builder (Views/Shared/_RuleBuilder.cshtml) ──────
   Signatures, disclaimers and campaigns had three rule tables between
   them; this is the one editor they share. Nesting is shown by an inset
   rule rather than by indentation alone, because a bracket three deep
   read as four unrelated rows otherwise - and the bracket is the whole
   reason this exists. */
.rb-help { font-size: 12.5px; color: var(--text-mute); line-height: 1.5; margin-bottom: 14px; max-width: 70ch; }

.rb-group {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 10px 12px;
  background: var(--bg-base);
}
.rb-group + .rb-group, .rb-row + .rb-group { margin-top: 8px; }
/* A nested group sits inside its parent and says so. */
.rb-group .rb-group { background: var(--bg-float); border-left: 3px solid var(--border); }
/* An exception is the one kind of group that removes people, so it is the
   one that is coloured - everything else here adds. */
.rb-group.is-negated { border-left-color: #ef4444; }

.rb-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.rb-match { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--text-mute); }
.rb-head .rb-negate, .rb-head .rb-del-group { margin-left: auto; }
.rb-negate.is-on { border-color: #ef4444; color: #ef4444; }

.rb-body { display: grid; gap: 6px; }
.rb-row { display: grid; grid-template-columns: minmax(0,1.2fr) minmax(0,1fr) minmax(0,1.2fr) auto; gap: 6px; align-items: center; }
/* Below this the four controls are unreadable side by side, and a rule
   somebody cannot read is one they will not trust. */
@media (max-width: 900px) { .rb-row { grid-template-columns: 1fr 1fr; } }

.rb-empty { font-size: 12px; color: var(--text-dim); margin: 2px 0; }
.rb-foot { display: flex; gap: 8px; align-items: center; margin-top: 10px; }
.rb-deep { font-size: 11.5px; color: var(--text-dim); }

/* Said in words under the tree: a run of dropdowns is read by decoding
   and a sentence is read. */
.rb-summary {
  margin-top: 12px; padding: 10px 12px; border-radius: 6px;
  background: var(--accent-glow); color: var(--text-body);
  font-size: 12.5px; line-height: 1.5;
}

/* These are the page's own controls, so they take the page's own styles
   rather than a private set - the thing the portal-controls pass removed
   from the editors once already. */
.rb-foot button, .rb-negate, .rb-del-group, .rb-del {
  font: inherit; font-size: 12px; font-weight: 600;
  height: 28px; padding: 0 10px;
  border: 1px solid var(--border); border-radius: 5px;
  background: var(--bg-base); color: var(--text-body); cursor: pointer;
}
.rb-del, .rb-del-group { width: 28px; padding: 0; line-height: 1; }
.rb-foot button:hover, .rb-negate:hover, .rb-del:hover, .rb-del-group:hover { border-color: var(--accent); }
.rb-row select, .rb-row input { min-width: 0; }