/* ================================================================
   CHEK ACCOUNTING — UNIFIED DESIGN SYSTEM (ChekSign)
   Visual identity derived from the Chek Accounting logo:
     · Primary hue:   #47BED9  (sky-blue cerulean from the mark)
     · Form language: geometric precision, clean radii
     · Type:          Montserrat — wide-tracked, purposeful weight

   PORTED from Chek Audit's chek-theme.css. The brand tokens, type scale, shell geometry and
   component surfaces are IDENTICAL — the two products must read as one suite. What changed is
   what sits underneath:

     Chek Audit                          ChekSign
     ------------------------------      ------------------------------
     Bootstrap 5.3 + Now UI Dashboard    Bootstrap 5.3 (no admin template)
     Radzen + DevExpress + Syncfusion    Syncfusion only
     ~4,980 lines, mostly !important     self-contained; !important only where a
                                         vendor sheet genuinely outranks us

   Chek Audit's sheet spends most of its length UNDOING Now UI Dashboard and retinting Radzen.
   ChekSign has neither, so the shell geometry (.sidebar / .main-panel / .content / the 64px
   collapsed rail) is DECLARED here rather than overridden, and the component retint is done by
   redefining Syncfusion's own --color-sf-* custom properties in section 1c — one block instead
   of several hundred selectors.

   Load order in App.razor is bootstrap -> syncfusion -> this file. This file must be last.
   ================================================================ */

/* ----------------------------------------------------------------
   1. DESIGN TOKENS (CSS Custom Properties)
   Values are identical to Chek Audit's. Do not drift them
   independently — a shared brand is the whole point.
   ---------------------------------------------------------------- */
:root {
  /* Brand blues — extracted directly from logo mark */
  --ck-blue:           #47BED9;
  --ck-blue-hover:     #2DADC9;
  --ck-blue-active:    #1A90AB;
  --ck-blue-light:     #79D3E8;
  --ck-blue-ghost:     #EBF8FC;
  --ck-blue-border:    #C4E8F4;

  /* A BLUE THAT IS SAFE AGAINST WHITE IN BOTH DIRECTIONS, AND IT IS A SECOND TOKEN RATHER THAN A
     NEW VALUE FOR --ck-blue ON PURPOSE. The brand blue is CORRECT where it is used on the dark
     sidebar (7.1:1 on --ck-sidebar-mid) and wrong as text on white (2.18:1) or under white text
     (2.18:1). Solved against --ck-page-bg #F2F6F9, the DARKEST light surface these are drawn on,
     rather than against white: solving against white left them at 4.15 and 4.18 on the page itself.
     One value cannot serve both, and a modifier that is right on one background and wrong
     on another is not a modifier - it is two things sharing a name, which section 18d already paid
     for once. So the identity keeps --ck-blue, and anything carrying WORDS against white uses these. */
  --ck-blue-strong:        #1D798E;
  --ck-blue-strong-hover:  #196779;
  --ck-blue-strong-active: #145563;

  /* Sidebar — deep navy derived from the logo's blue, darkened */
  --ck-sidebar-top:    #0B2736;
  --ck-sidebar-mid:    #0E3347;
  --ck-sidebar-bot:    #104258;

  /* Surfaces */
  --ck-page-bg:        #F2F6F9;
  --ck-surface:        #FFFFFF;
  --ck-surface-subtle: #F8FBFD;

  /* Borders */
  --ck-border:         #DDE8EE;
  --ck-border-strong:  #B8D2DC;

  /* Typography */
  --ck-text:           #0F2535;
  --ck-text-secondary: #4A6475;
  --ck-text-muted:     #547586;
  --ck-text-inverse:   #FFFFFF;

  /* Semantic */
  --ck-success:        #27AE60;
  --ck-success-light:  #EAFAF1;
  --ck-warning:        #E67E22;
  --ck-warning-light:  #FEF5EC;
  --ck-danger:         #E74C3C;
  --ck-danger-light:   #FDECEA;
  --ck-info:           var(--ck-blue);
  --ck-info-light:     var(--ck-blue-ghost);

  /* Shape */
  --ck-radius-xs:      4px;
  --ck-radius-sm:      6px;
  --ck-radius-md:      10px;
  --ck-radius-lg:      16px;
  --ck-radius-xl:      24px;

  /* Elevation */
  --ck-shadow-xs:      0 1px 3px rgba(11, 39, 54, 0.06);
  --ck-shadow-sm:      0 2px 8px rgba(11, 39, 54, 0.08);
  --ck-shadow-md:      0 4px 16px rgba(11, 39, 54, 0.10);
  --ck-shadow-lg:      0 8px 32px rgba(11, 39, 54, 0.14);
  --ck-shadow-xl:      0 16px 48px rgba(11, 39, 54, 0.18);

  /* Transitions */
  --ck-transition:     150ms ease;
  --ck-transition-md:  250ms ease;

  /* Design-system token aliases (unprefixed) — used in component CSS */
  --gradient-sidebar:  linear-gradient(180deg, var(--ck-sidebar-top) 0%, var(--ck-sidebar-mid) 50%, var(--ck-sidebar-bot) 100%);
  --radius-xs:         var(--ck-radius-xs);
  --radius-sm:         var(--ck-radius-sm);
  --radius-md:         var(--ck-radius-md);
  --radius-lg:         var(--ck-radius-lg);
  --radius-pill:       999px;
  --shadow-xs:         var(--ck-shadow-xs);
  --shadow-sm:         var(--ck-shadow-sm);
  --shadow-md:         var(--ck-shadow-md);
  --shadow-lg:         var(--ck-shadow-lg);
  --shadow-xl:         var(--ck-shadow-xl);
  --shadow-primary:       0 2px 6px rgba(71, 190, 217, 0.25);
  --shadow-primary-hover: 0 4px 14px rgba(71, 190, 217, 0.40);
  --ring-focus:        0 0 0 3px rgba(71, 190, 217, 0.18);
  --transition:        var(--ck-transition);
  --transition-md:     var(--ck-transition-md);
  --font-sans:         'Montserrat', -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
  --font-mono:         'IBM Plex Mono', ui-monospace, SFMono-Regular, Menlo, monospace;
  --card-pad:          20px;
  --content-pad:       24px;
  --sidebar-width:     260px;
  --sidebar-rail:      64px;
  --topnav-height:     60px;
}

/* ---- 1b. Bootstrap 5 token overrides ---------------------------------------------------- */
:root {
  --bs-primary:           var(--ck-blue);
  --bs-primary-rgb:       71, 190, 217;
  --bs-body-font-family:  var(--font-sans);
  --bs-body-font-size:    16px;
  --bs-body-color:        var(--ck-text);
  --bs-body-bg:           var(--ck-page-bg);
  --bs-border-color:      var(--ck-border);
  --bs-border-radius:     var(--ck-radius-md);
  --bs-border-radius-sm:  var(--ck-radius-sm);
  --bs-border-radius-lg:  var(--ck-radius-lg);
  --bs-link-color:        var(--ck-blue);
  --bs-link-color-rgb:    71, 190, 217;
  --bs-link-hover-color:  var(--ck-blue-hover);
}

/* ---- 1c. SYNCFUSION TOKEN OVERRIDES ----------------------------------------------------
   Chek Audit retints Radzen with a --rz-* block and then writes ~1,500 further lines of .rz-*
   selector overrides on top of it. That second half exists because Radzen's default theme
   hardcodes most of its colour OUTSIDE its own variables.

   Syncfusion's bootstrap5.3 theme does not have that problem: it drives essentially every control
   off the --color-sf-* custom properties below, so redefining them here retints the whole suite —
   Grid, DropDownList, DatePicker, Dialog, Toast, Tab, Menu, Button — from one block. That is also
   why App.razor loads bootstrap5.3.css rather than the bootstrap5.css Chek Audit uses:
   bootstrap5.css is the pre-variable build and CANNOT be retinted this way. If someone swaps the
   theme link back to bootstrap5.css, this entire block silently stops doing anything and the
   controls go Bootstrap-blue.

   Anything below this block that names an .e-* class is about SHAPE or TYPE (radius, font,
   density) — never colour. If you find yourself writing a colour rule against an .e-* selector,
   the token you actually want is almost certainly declared here.
   ---------------------------------------------------------------- */
:root {
  /* Primary ramp */
  --color-sf-primary:                      rgba(71, 190, 217, 1);
  --color-sf-primary-text-color:           #FFFFFF;
  --color-sf-primary-light:                var(--ck-blue-light);
  --color-sf-primary-lighter:              var(--ck-blue-ghost);
  --color-sf-primary-dark:                 var(--ck-blue-hover);
  --color-sf-primary-darker:               var(--ck-blue-active);
  --color-sf-primary-shadow:               71, 190, 217;
  --color-sf-primary-bg-color-hover:       var(--ck-blue-hover);
  --color-sf-primary-border-color-hover:   var(--ck-blue-hover);
  --color-sf-primary-bg-color-pressed:     var(--ck-blue-active);
  --color-sf-primary-border-color-pressed: var(--ck-blue-active);
  --color-sf-primary-bg-color-disabled:    rgba(71, 190, 217, 0.55);

  /* Secondary ramp. NOT decorative — a bare <SfButton> with no CssClass renders from these, so
     leaving them at the theme default puts a near-black Bootstrap-grey button on the page (that is
     what "Import" looked like before this block existed). The Chek neutral button is .btn-secondary
     in section 7: white surface, strong border, secondary text, ghost-blue on hover. Mirror it here
     so the default Syncfusion button and .btn-secondary are the same object. */
  --color-sf-secondary:                      var(--ck-surface);
  --color-sf-secondary-bg-color:             var(--ck-surface);
  --color-sf-secondary-border-color:         var(--ck-border-strong);
  --color-sf-secondary-text-color:           var(--ck-text-secondary);
  --color-sf-secondary-bg-color-hover:       var(--ck-blue-ghost);
  --color-sf-secondary-border-color-hover:   var(--ck-blue-border);
  --color-sf-secondary-text-color-hover:     var(--ck-blue-active);
  --color-sf-secondary-bg-color-pressed:     var(--ck-blue-ghost);
  --color-sf-secondary-border-color-pressed: var(--ck-blue-border);
  --color-sf-secondary-text-color-pressed:   var(--ck-blue-active);
  --color-sf-secondary-bg-color-disabled:    var(--ck-surface-subtle);
  --color-sf-secondary-border-color-disabled: var(--ck-border);
  --color-sf-secondary-text-color-disabled:  var(--ck-text-muted);
  --color-sf-secondary-shadow:               71, 190, 217;

  /* Content surfaces + text */
  --color-sf-content-bg-color:             var(--ck-surface);
  --color-sf-content-bg-color-alt1:        var(--ck-surface-subtle);
  --color-sf-content-bg-color-alt2:        var(--ck-blue-ghost);
  --color-sf-content-bg-color-alt3:        var(--ck-border);
  --color-sf-content-bg-color-hover:       var(--ck-blue-ghost);
  --color-sf-content-bg-color-pressed:     var(--ck-blue-ghost);
  --color-sf-content-bg-color-focus:       var(--ck-blue-ghost);
  --color-sf-content-bg-color-selected:    var(--ck-blue);
  --color-sf-content-bg-color-disabled:    var(--ck-surface-subtle);
  --color-sf-content-text-color:           var(--ck-text);
  --color-sf-content-text-color-alt1:      var(--ck-text-secondary);
  --color-sf-content-text-color-alt2:      var(--ck-text-muted);
  --color-sf-content-text-color-hover:     var(--ck-blue-active);
  --color-sf-content-text-color-focus:     var(--ck-blue-active);
  --color-sf-content-text-color-selected:  #FFFFFF;
  --color-sf-content-text-color-disabled:  var(--ck-text-muted);
  --color-sf-placeholder-text-color:       var(--ck-text-muted);

  /* Flyouts (dropdown popups, menus) */
  --color-sf-flyout-bg-color:              var(--ck-surface);
  --color-sf-flyout-bg-color-hover:        var(--ck-blue-ghost);
  --color-sf-flyout-bg-color-pressed:      var(--ck-blue);
  --color-sf-flyout-bg-color-focus:        var(--ck-blue-ghost);
  --color-sf-flyout-border:                var(--ck-border);

  /* Tables (Grid rows) */
  --color-sf-table-bg-color-hover:         var(--ck-blue-ghost);
  --color-sf-table-bg-color-pressed:       var(--ck-blue-ghost);
  --color-sf-table-bg-color-selected:      var(--ck-blue-ghost);

  /* Icons */
  --color-sf-icon-color:                   var(--ck-text-secondary);
  --color-sf-icon-color-hover:             var(--ck-blue);
  --color-sf-icon-color-pressed:           var(--ck-blue-active);
  --color-sf-icon-color-disabled:          var(--ck-text-muted);

  /* Borders */
  --color-sf-border-light:                 var(--ck-border);
  --color-sf-border:                       var(--ck-border);
  --color-sf-border-dark:                  var(--ck-border-strong);
  --color-sf-border-hover:                 var(--ck-border-strong);
  --color-sf-border-focus:                 var(--ck-blue);
  --color-sf-border-selected:              var(--ck-blue);
  --color-sf-border-disabled:              var(--ck-border);
  --color-sf-border-warning:               var(--ck-warning);
  --color-sf-border-error:                 var(--ck-danger);
  --color-sf-border-success:               var(--ck-success);

  /* Semantic ramps — mapped to the Chek palette so a Syncfusion Toast or Message reads the same
     as an .alert rendered by the design system. */
  --color-sf-success:                      rgba(39, 174, 96, 1);
  --color-sf-warning:                      rgba(230, 126, 34, 1);
  --color-sf-danger:                       rgba(231, 76, 60, 1);
  --color-sf-info:                         rgba(71, 190, 217, 1);
  --color-sf-success-light:                var(--ck-success-light);
  --color-sf-warning-light:                var(--ck-warning-light);
  --color-sf-danger-light:                 var(--ck-danger-light);
  --color-sf-info-light:                   var(--ck-blue-ghost);
  --color-sf-success-light-alt:            var(--ck-success-light);
  --color-sf-warning-light-alt:            var(--ck-warning-light);
  --color-sf-danger-light-alt:             var(--ck-danger-light);
  --color-sf-info-light-alt:               var(--ck-blue-ghost);
  --color-sf-warning-text:                 #FFFFFF;
  --color-sf-info-text:                    #FFFFFF;
  --color-sf-success-shadow:               39, 174, 96;
  --color-sf-warning-shadow:               230, 126, 34;
  --color-sf-danger-shadow:                231, 76, 60;
  --color-sf-info-shadow:                  71, 190, 217;

  /* Tooltip */
  --color-sf-tooltip-bg-color:             var(--ck-sidebar-top);
  --color-sf-tooltip-border:               var(--ck-sidebar-top);
  --color-sf-tooltip-text-color:           #FFFFFF;
}

/* ----------------------------------------------------------------
   2. GLOBAL RESET & BASE
   ---------------------------------------------------------------- */
*, *::before, *::after {
  box-sizing: border-box;
}

/* THE REM BASIS, AND IT WAS THE WHOLE PROBLEM. At 14px every rem-based size in this sheet rendered
   two points smaller than its number reads - .875rem is "a bit under 14" and was 12.25px - and every
   Syncfusion control that sizes in em came down with it. 16px is the browser default and the usual
   accessibility baseline; the px sizes below were scaled by the same 16/14 in the same change, so the
   relationships between sizes are unchanged and only the whole scale moved. */
html {
  font-size: 16px;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

body {
  margin: 0;
  font-family: var(--font-sans);
  font-size: 16px;
  font-weight: 400;
  line-height: 1.6;
  color: var(--ck-text);
  background-color: var(--ck-page-bg);
}

a {
  color: var(--ck-blue-strong);
  text-decoration: none;
  transition: color var(--ck-transition);
}

a:hover {
  color: var(--ck-blue-hover);
}

/* ----------------------------------------------------------------
   3. TYPOGRAPHY
   ---------------------------------------------------------------- */
h1, h2, h3, h4, h5, h6,
.h1, .h2, .h3, .h4, .h5, .h6 {
  font-family: var(--font-sans);
  font-weight: 700;
  color: var(--ck-text);
  line-height: 1.25;
  letter-spacing: -0.015em;
  margin-bottom: 0.5em;
}

h1, .h1 { font-size: 30px; }
h2, .h2 { font-size: 24px; }
h3, .h3 { font-size: 19px; }
h4, .h4 { font-size: 17px; }
h5, .h5 { font-size: 15px; }
h6, .h6 { font-size: 14px; letter-spacing: 0.04em; text-transform: uppercase; }

/* THE HEADING IS FOCUSED BY THE ROUTER, AND CHROME DRAWS A BOX ROUND IT.
   ------------------------------------------------------------------------------------------------
   Routes.razor carries <FocusOnNavigate Selector="h1" />, which is the framework's accessibility
   answer to a navigation that changes the page without moving focus: it puts tabindex="-1" on the
   first h1 and focuses it. Where the arrival was a keystroke — Enter in the address bar, Enter on a
   link — the heading then matches :focus-visible and the user agent paints its default ring.
   MEASURED on /Account/Login, 21 September 2026: document.activeElement is the H1.ck-login-title
   with tabindex="-1" still on it, matching :focus-visible, outline `auto rgb(16,16,16)` — a black
   rectangle drawn tight around "Sign in to ChekSign", which is what was reported.

   Suppressed rather than the focus removed, because the focus is the half that is doing a job: a
   screen reader still lands on the heading, which is the whole point of the component. What the ring
   communicates on a heading is nothing — there is no action to take and no field to type in — so it
   is a box round the first sentence of the page for every sighted visitor.

   THIS WAS SCOPED TO .ck-site, AND THE SCOPE WAS THE DEFECT. The superseded comment in section 26
   read: "SCOPED TO .ck-site, so it is a statement about these five pages rather than a blanket rule
   about headings. Every interactive control keeps its own focus ring, here and everywhere else."
   The second sentence still stands and the first was written from /welcome, which is simply where
   the ring was first seen. It is not a property of those five pages: the router focuses the first h1
   at EVERY address in this product, so the same box was drawn round the sign-in card, round /verify,
   round the heading on /sign/{token} that a firm's client meets, and round every page head inside
   the shell. An h1 is never an interactive control here, so an unscoped rule takes nothing away from
   anything — and it covers the next page as well, which a list of scopes does not. */
h1:focus { outline: none; }

.page-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
}

.section-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ck-text-muted);
}

/* IBM Plex Mono earns its place on exactly two things: keyboard-shortcut chips (this is a key you
   press) and reference identifiers (digit groups line up between one row and the next). Do not
   reach for it as a general "technical" face. */

.ck-ref{
  font-family: var(--font-mono);
  font-size: 14px;
  color: var(--ck-text-secondary);
  white-space: nowrap;
}

/* ----------------------------------------------------------------
   4. APP SHELL LAYOUT
   Declared, not overridden. Chek Audit inherits this geometry from Now UI Dashboard and then
   fights it; here it is stated once.

   The sidebar is position:fixed, so an expanded sidebar FLOATS over the content and the content
   offset is driven solely by .main-panel's margin-left. Three states:

     · PINNED OPEN  (no .sidebar-mini)                 260px sidebar, full nav, panel offset 260px
     · COLLAPSED    (.sidebar-mini, not :hover)         64px icon rail, labels hidden, offset 64px
     · HOVER-EXPAND (.sidebar-mini + .sidebar:hover)   260px overlay, labels fade in, offset STAYS
                                                       64px so the sidebar floats over the content

   #minimizeSidebar toggles .sidebar-mini on <body> and persists it (see js/chek-app.js).
   ---------------------------------------------------------------- */
.sidebar {
  position: fixed;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--sidebar-width);
  z-index: 1030;
  display: flex;
  flex-direction: column;
  background: var(--gradient-sidebar);
  overflow: hidden;
}

.main-panel {
  position: relative;
  display: flex;
  flex-direction: column;
  min-height: 100vh;
  margin-left: var(--sidebar-width);
  background: var(--ck-page-bg);
}

.content {
  flex: 1 0 auto;
  background: var(--ck-page-bg);
  padding: 20px var(--content-pad) 40px;
}

/* Width/offset animate in BOTH directions — the pin toggle and the hover-expand both change them.
   The transition lives on the unconditional selector, not only the .sidebar-mini one, or the
   expand direction would snap. */
@media (min-width: 992px) {
  .sidebar,
  .sidebar .sidebar-wrapper {
    transition: width 0.2s ease;
  }
  .main-panel {
    transition: margin-left 0.2s ease;
  }
}

/* ---- Sidebar header (logo + pin toggle) ------------------------------------------------- */
.sidebar .logo {
  position: relative;
  flex: 0 0 auto;
  padding: 14px 0;
  border-bottom: 1px solid rgba(71, 190, 217, 0.12);
}

.sidebar .logo a.logo-container {
  display: block;
}

.sidebar .logo img {
  /* Logo PNG has a transparent background, so the sidebar gradient shows through and it blends
     with the menu bar. Centred, reduced by a third. */
  display: block;
  width: 45%;
  height: auto;
  margin: 0 auto;
}

.sidebar .navbar-minimize {
  position: absolute;
  right: 12px;
  top: 14px;
}

.sidebar .navbar-minimize .btn {
  background: rgba(71, 190, 217, 0.12);
  border: 1px solid rgba(71, 190, 217, 0.2);
  color: rgba(255, 255, 255, 0.7);
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: var(--ck-radius-sm);
  display: flex;
  align-items: center;
  justify-content: center;
  transition: all var(--ck-transition);
}

.sidebar .navbar-minimize .btn:hover {
  background: rgba(71, 190, 217, 0.22);
  color: #FFFFFF;
}

/* ---- Sidebar scroll region -------------------------------------------------------------- */
.sidebar .sidebar-wrapper {
  flex: 1 1 auto;
  width: var(--sidebar-width);
  overflow-x: hidden;
  overflow-y: auto;
}

/* ---- No user block ------------------------------------------------------------------------
   The sidebar used to carry an avatar above the signed-in address. It is gone: the top bar already
   shows both, so the pair appeared twice on every page, once in the place a person looks for
   navigation. The nav now starts directly under the logo. ~85 lines of .sidebar .user rules were
   deleted with it rather than left behind - dead CSS that still matches nothing is the kind of thing
   somebody later reads as a component that exists. */

/* ----------------------------------------------------------------
   4b. SIDEBAR NAVIGATION
   The nav CONTAINER is display:block on purpose. Bootstrap's .nav is display:flex;flex-wrap:wrap,
   which in a fixed-height sidebar wraps the items into a SECOND COLUMN with the labels clipped.
   Each nav ITEM is a single-row, no-wrap flexbox [icon][label] so the icon keeps a constant left
   anchor and the label is simply clipped by the rail when collapsed.
   ---------------------------------------------------------------- */
.sidebar .nav {
  display: block;
  list-style: none;
  padding: 8px 0;
  margin: 0;
}

.sidebar .nav li {
  position: relative;
  display: block;
  width: 100%;
}

.sidebar .nav li > a,
.sidebar .nav li > .nav-link {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  gap: 10px;
  margin: 2px 12px;
  padding: 10px 14px;
  border-radius: var(--ck-radius-sm);
  font-size: 15px;
  font-weight: 500;
  color: rgba(255, 255, 255, 0.65);
  letter-spacing: 0.015em;
  line-height: 1.4;
  white-space: nowrap;
  /* overflow VISIBLE, not hidden: a wide Font Awesome glyph (fa-hospital-user, fa-award, ...) is
     drawn slightly wider than its box and overflow:hidden clips that right-hand overhang. The
     label does not need clipping here — it is faded out when collapsed and the 64px wrapper
     (overflow-x:hidden) clips any residual width. */
  overflow: visible;
  transition: all var(--ck-transition);
}

.sidebar .nav li > a i,
.sidebar .nav li > .nav-link i {
  flex: 0 0 auto;
  width: 18px;
  margin: 0;
  font-size: 16px;
  line-height: 1;
  text-align: center;
  color: rgba(71, 190, 217, 0.6);
  transition: color var(--ck-transition);
}

.sidebar .nav li > a p,
.sidebar .nav li > .nav-link p {
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  font-size: 15px;
  font-weight: 500;
  letter-spacing: 0.01em;
  line-height: 1.4;
  text-transform: none;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  transition: opacity 0.2s ease;
}

.sidebar .nav li > a:hover,
.sidebar .nav li > .nav-link:hover {
  background: rgba(71, 190, 217, 0.10);
  color: rgba(255, 255, 255, 0.90);
}

.sidebar .nav li > a:hover i,
.sidebar .nav li > .nav-link:hover i {
  color: var(--ck-blue);
}

.sidebar .nav li.active > a,
.sidebar .nav li > a.active,
.sidebar .nav li > .nav-link.active {
  background: rgba(71, 190, 217, 0.16);
  color: #FFFFFF;
  padding-left: 22px;
}

.sidebar .nav li.active > a i,
.sidebar .nav li > a.active i,
.sidebar .nav li > .nav-link.active i {
  color: var(--ck-blue);
}

/* Active indicator bar */
.sidebar .nav li.active > a::before,
.sidebar .nav li > a.active::before,
.sidebar .nav li > .nav-link.active::before {
  content: '';
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  width: 3px;
  height: 60%;
  border-radius: 3px;
  background: var(--ck-blue);
}

/* A COLLAPSIBLE GROUP (Help). The head is a <button> so it is reachable by keyboard and announces its
   own expanded state; it is styled to match a nav link exactly, because to a reader it IS one - the only
   difference is the chevron and what happens when it is pressed. */

/* The chevron points down when closed and up when open, which is the one piece of state a reader needs
   before they click. It is narrower than a nav icon on purpose - it is punctuation, not a subject. */

/* CLOSED IS max-height:0 RATHER THAN display:none, so the group animates open instead of appearing. The
   height is generous enough for several children and is never reached. */

/* A child sits further in than its parent, which is what says it belongs to the group. */

/* Section heading inside the nav (e.g. "Workspace"). Hidden with the labels when collapsed. */
.sidebar .nav .ck-nav-section {
  padding: 14px 26px 6px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.10em;
  color: rgba(255, 255, 255, 0.35);
  white-space: nowrap;
  overflow: hidden;
  transition: opacity 0.2s ease;
}

/* Nav item count badge. Teal pill at the end of the label when expanded; a small overlay on the
   icon's top-right when collapsed. Absolutely positioned against the .nav li (position:relative)
   so it never shifts the row layout. */

/* ----------------------------------------------------------------
   4c. COLLAPSED (MINI) SIDEBAR — 64px icon rail + hover-to-expand overlay
   Desktop only (>= 992px). On smaller screens the sidebar is an off-canvas drawer instead (4d),
   where collapsing to a rail would leave nothing to tap.
   ---------------------------------------------------------------- */
@media (min-width: 992px) {

  body.sidebar-mini .sidebar,
  body.sidebar-mini .sidebar .sidebar-wrapper {
    width: var(--sidebar-rail);
  }

  /* Offset stays at the rail width even on hover, so the expanded sidebar overlays the content
     rather than pushing it. */
  body.sidebar-mini .main-panel {
    margin-left: var(--sidebar-rail);
  }

  body.sidebar-mini .sidebar:hover,
  body.sidebar-mini .sidebar:hover .sidebar-wrapper {
    width: var(--sidebar-width);
  }

  /* A native vertical scrollbar sits at the right edge of the 64px rail and cuts into the icons.
     Hide it while collapsed — the rail still scrolls by wheel/touch, and the bar returns on
     hover-expand where 260px has room for it. */
  body.sidebar-mini .sidebar:not(:hover) .sidebar-wrapper {
    scrollbar-width: none;
  }
  body.sidebar-mini .sidebar:not(:hover) .sidebar-wrapper::-webkit-scrollbar {
    width: 0;
    height: 0;
  }

  /* ITEM: margin-left(8) + padding-left(14) + half-icon(10) = 32px, so the icon centre sits at the
     centre of the 64px rail AND stays at that exact x when the sidebar expands. The icon never
     moves horizontally. */
  body.sidebar-mini .sidebar .nav li > a,
  body.sidebar-mini .sidebar .nav li > .nav-link {
    margin: 2px 8px;
    padding: 9px 14px;
    border-radius: 8px;
  }

  body.sidebar-mini .sidebar .nav li > a i,
  body.sidebar-mini .sidebar .nav li > .nav-link i {
    width: 20px;
    font-size: 23px;
  }

  /* Collapsed: label invisible (and clipped). Hover: label fades in. The icon, being the first
     flex child at flex-start, does not move when the label appears. */
  body.sidebar-mini .sidebar:not(:hover) .nav li > a p,
  body.sidebar-mini .sidebar:not(:hover) .nav li > .nav-link p,
  body.sidebar-mini .sidebar:not(:hover) .nav .ck-nav-section {
    opacity: 0;
    pointer-events: none;
  }

  /* Active: filled teal pill, same in both states. Keep the padding-left anchor so the active icon
     does not shift, and drop the left indicator bar (there is no room for it on the rail). */
  body.sidebar-mini .sidebar .nav li.active > a,
  body.sidebar-mini .sidebar .nav li > a.active {
    padding-left: 14px;
  }
  body.sidebar-mini .sidebar .nav li.active > a::before,
  body.sidebar-mini .sidebar .nav li > a.active::before {
    display: none;
  }

  /* Collapsed-only chrome (logo + pin toggle + profile), scoped to :not(:hover). On hover these
     stop matching and the expanded styles above take over. */
  body.sidebar-mini .sidebar:not(:hover) .logo {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 6px;
    padding: 8px 6px;
  }
  body.sidebar-mini .sidebar:not(:hover) .navbar-minimize {
    position: static;
    align-self: flex-end;
    margin: 0;
  }
  body.sidebar-mini .sidebar:not(:hover) .navbar-minimize .btn {
    width: 28px;
    height: 28px;
  }
  body.sidebar-mini .sidebar:not(:hover) .logo img {
    width: 40px;
  }
  body.sidebar-mini .sidebar:not(:hover) .user {
    padding: 12px 6px;
  }
  body.sidebar-mini .sidebar:not(:hover) .user .info {
    display: none;
  }
}

/* ----------------------------------------------------------------
   4d. MOBILE — sidebar becomes an off-canvas drawer
   ---------------------------------------------------------------- */
@media (max-width: 991.98px) {
  .sidebar {
    transform: translateX(-100%);
    transition: transform 0.25s ease;
    z-index: 1045;
  }

  body.nav-open .sidebar {
    transform: translateX(0);
    box-shadow: var(--ck-shadow-xl);
  }

  .main-panel {
    margin-left: 0;
  }

  /* Scrim. Rendered by the layout, shown only while the drawer is open. */
  .ck-nav-scrim {
    position: fixed;
    inset: 0;
    z-index: 1040;
    background: rgba(11, 39, 54, 0.45);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.25s ease;
  }

  body.nav-open .ck-nav-scrim {
    opacity: 1;
    pointer-events: auto;
  }

  .content {
    padding: 16px 16px 32px;
  }
}

/* The hamburger only exists below the drawer breakpoint. */
.ck-topbar-burger {
  display: none;
}

@media (max-width: 991.98px) {
  .ck-topbar-burger {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    padding: 0;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text-secondary);
    cursor: pointer;
    transition: all var(--ck-transition);
  }

  .ck-topbar-burger:hover {
    background: var(--ck-blue-ghost);
    border-color: var(--ck-blue-border);
    color: var(--ck-blue-active);
  }
}

/* ----------------------------------------------------------------
   5. TOP BAR (app shell header)
   Sticky 60px white bar: page title on the left, tenant chip and user menu on the right.
   ---------------------------------------------------------------- */
.ck-topbar {
  position: sticky;
  top: 0;
  z-index: 1029;
  height: var(--topnav-height);
  min-height: var(--topnav-height);
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-border);
  box-shadow: var(--ck-shadow-xs);
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 0 var(--content-pad);
}

/* flex-grow is the fix for the title ellipsising with space to spare. The bar is
   justify-content:space-between, so the free middle space belongs to NEITHER group and the left
   group sits at its content width — the title's overflow:hidden then clips the moment that width
   is short. Letting the left group grow hands it that middle space. */
.ck-topbar-left {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 1 1 auto;
}

.ck-topbar-crumb {
  font-size: 15px;
  font-weight: 500;
  color: var(--ck-text-muted);
  white-space: nowrap;
}

.ck-topbar-crumb .ck-topbar-crumb-sep {
  margin: 0 4px;
}

.ck-topbar-title {
  flex: 0 1 auto;
  min-width: 0;
  font-size: 19px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin: 0;
}

.ck-topbar-right {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-shrink: 0;
}

.ck-topbar-tenant {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-secondary);
  background: var(--ck-surface-subtle);
  border: 1px solid var(--ck-border);
  border-radius: 999px;
  padding: 4px 12px;
  white-space: nowrap;
}

/* Tenant switcher. Sits where the .ck-topbar-tenant chip sits and must not be taller than it, or the
   60px bar grows and the whole shell shifts down. */
.ck-tenant-switch {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
}

/* Match the chip's quiet register: this is context, not a call to action, so it stays lighter than
   the page's own controls until you reach for it. */
.ck-tenant-switch .ck-tenant-switch-input.e-input-group {
  background: var(--ck-surface-subtle);
  border-color: var(--ck-border);
  border-radius: 999px;
  height: 32px;
}

.ck-tenant-switch .ck-tenant-switch-input.e-input-group:hover {
  border-color: var(--ck-blue-border);
}

.ck-tenant-switch .ck-tenant-switch-input .e-input {
  font-size: 14px;
  font-weight: 600;
  color: var(--ck-text-secondary);
  padding-left: 12px;
}

.ck-tenant-switch .e-btn {
  height: 32px;
  padding: 0 14px;
  font-size: 14px;
}

/* THE DRAWER'S COPY OF THE SWITCHER, and it exists because the top bar's disappears. P28.
   Hidden here and shown below 768px, which is the exact inverse of the rule underneath — so a person
   sees one switcher at every width and never two. Before this a phone user who belonged to two
   workspaces had no way to change between them at all: not an awkward one, none. */
.ck-side-tenant-switch {
  display: none;
}

@media (max-width: 767.98px) {
  /* The top bar's switcher is the first thing to go when the bar runs out of room — the page title and
     the way out matter more there. The drawer picks it up rather than the control simply vanishing. */
  .ck-topbar .ck-tenant-switch {
    display: none;
  }

  .ck-side-tenant-switch {
    display: block;
    padding: 10px 16px 4px;
  }

  /* The dropdown has a fixed 200px width for the top bar; in the drawer it takes the drawer's. */
  .ck-side-tenant-switch .ck-tenant-switch,
  .ck-side-tenant-switch .e-input-group {
    width: 100%;
  }
}

/* THE SEARCH BUTTON, and it is the only way into the palette - there is no keyboard shortcut. Sized and
   coloured as a sibling of .ck-topbar-user so the two read as one group of controls rather than a button
   bolted beside a link. */
.ck-topbar-search {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  font-size: 16px;
  color: var(--ck-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 0;
  border-radius: var(--ck-radius-sm);
  transition: var(--ck-transition);
}

.ck-topbar-search:hover {
  background: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
}

/* An initials avatar. The brand blue rather than a grey silhouette, and a fixed circle so a one-letter
   and a two-letter set occupy the same space - a chrome element that changes width between accounts
   makes the whole bar shift. */
.ck-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 auto;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  background: var(--ck-blue, #17a2c0);
  color: #FFFFFF;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .02em;
  line-height: 1;
  user-select: none;
}

/* THE AVATAR IS THE BUTTON. It holds one circle and nothing else, so it is sized to the circle and its
   hover ring is a circle too - a rounded rectangle around a round avatar reads as two shapes. */
.ck-topbar-user {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  cursor: pointer;
  padding: 2px;
  border-radius: 50%;
  text-decoration: none;
  transition: box-shadow var(--ck-transition);
}

.ck-topbar-user:hover {
  box-shadow: 0 0 0 2px var(--ck-blue-ghost);
}

/* ----------------------------------------------------------------
   6. CARDS
   ---------------------------------------------------------------- */
.card {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-sm);
  transition: box-shadow var(--ck-transition-md);
}

.card:hover {
  box-shadow: var(--ck-shadow-md);
}

.card-header {
  background: transparent;
  border-bottom: 1px solid var(--ck-border);
  padding: 16px 20px;
}

.card-header .card-title,
.card-header h1,
.card-header h2,
.card-header h3,
.card-header h4,
.card-header h5,
.card-header h6,
.card-header p {
  font-size: 17px;
  font-weight: 700;
  color: var(--ck-text);
  margin: 0;
  letter-spacing: -0.01em;
}

.card-header .card-category,
.card-header .card-subtitle {
  font-size: 13px;
  font-weight: 600;
  color: var(--ck-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.07em;
  margin: 2px 0 0;
}

.card-body {
  padding: var(--card-pad);
}

.card-footer {
  background: transparent;
  border-top: 1px solid var(--ck-border);
  padding: 12px 20px;
}

/* ----------------------------------------------------------------
   7. BUTTONS (Bootstrap .btn)
   Syncfusion's own .e-btn is retinted by the tokens in 1c; this section is for the plain
   Bootstrap buttons the shell itself uses (the sidebar pin toggle, form footers).
   ---------------------------------------------------------------- */
.btn {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--ck-radius-sm);
  padding: 8px 18px;
  line-height: 1.4;
  white-space: nowrap;
  transition: all var(--ck-transition);
}

.btn-primary,
.btn-info {
  background-color: var(--ck-blue);
  border-color: var(--ck-blue);
  color: #FFFFFF;
  box-shadow: var(--shadow-primary);
}

.btn-primary:hover,
.btn-info:hover {
  background-color: var(--ck-blue-hover);
  border-color: var(--ck-blue-hover);
  color: #FFFFFF;
  box-shadow: var(--shadow-primary-hover);
  transform: translateY(-1px);
}

.btn-primary:active,
.btn-info:active,
.btn-primary:focus,
.btn-info:focus {
  background-color: var(--ck-blue-active);
  border-color: var(--ck-blue-active);
  color: #FFFFFF;
  box-shadow: 0 0 0 3px rgba(71, 190, 217, 0.25);
  transform: translateY(0);
}

.btn-outline-primary,
.btn-outline-info {
  background-color: transparent;
  border-color: var(--ck-blue);
  color: var(--ck-blue);
}

.btn-outline-primary:hover,
.btn-outline-info:hover {
  background-color: var(--ck-blue);
  border-color: var(--ck-blue);
  color: #FFFFFF;
}

.btn-secondary,
.btn-default {
  background-color: var(--ck-surface);
  border-color: var(--ck-border-strong);
  color: var(--ck-text-secondary);
  box-shadow: var(--ck-shadow-xs);
}

.btn-secondary:hover,
.btn-default:hover {
  background-color: var(--ck-blue-ghost);
  border-color: var(--ck-blue-border);
  color: var(--ck-blue-active);
}

.btn-danger {
  background-color: var(--ck-danger);
  border-color: var(--ck-danger);
  color: #FFFFFF;
}

.btn-danger:hover {
  background-color: #C0392B;
  border-color: #C0392B;
  color: #FFFFFF;
}

.btn-success {
  background-color: var(--ck-success);
  border-color: var(--ck-success);
  color: #FFFFFF;
}

.btn-light {
  background-color: var(--ck-surface);
  border-color: var(--ck-border);
  color: var(--ck-text-secondary);
}

.btn-light:hover {
  background-color: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
}

.btn-icon.btn-round {
  border-radius: 50%;
  width: 38px;
  height: 38px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.btn:focus-visible {
  outline: 3px solid rgba(71, 190, 217, 0.4);
  outline-offset: 2px;
}

/* ---- ck-btn — the design system's own button, used on anonymous surfaces (login, portal)
   where no Syncfusion circuit is guaranteed to be connected yet. Inside the app shell, use a
   Syncfusion SfButton instead. ---------------------------------------------------------- */
.ck-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  font-family: inherit;
  font-weight: 600;
  font-size: 16px;
  line-height: 1;
  border: 1px solid transparent;
  border-radius: var(--ck-radius-sm);
  padding: 10px 18px;
  cursor: pointer;
  text-decoration: none;
  transition: background var(--ck-transition), border-color var(--ck-transition),
              color var(--ck-transition), box-shadow var(--ck-transition);
}

.ck-btn:disabled,
.ck-btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

.ck-btn--primary {
  background: var(--ck-blue-strong);
  border-color: var(--ck-blue-strong);
  color: #FFFFFF;
}

.ck-btn--primary:hover {
  background: var(--ck-blue-strong-hover);
  border-color: var(--ck-blue-strong-hover);
  color: #FFFFFF;
}

.ck-btn--primary:active {
  background: var(--ck-blue-strong-active);
  border-color: var(--ck-blue-strong-active);
}

.ck-btn--lg {
  font-size: 17px;
  font-weight: 700;
  padding: 13px 22px;
  border-radius: var(--ck-radius-md);
}

/* ----------------------------------------------------------------
   8. FORMS & INPUTS
   ---------------------------------------------------------------- */
.form-control,
.form-select,
.ck-input {
  display: block;
  width: 100%;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 400;
  color: var(--ck-text);
  background-color: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  padding: 8px 12px;
  line-height: 1.5;
  transition: border-color var(--ck-transition), box-shadow var(--ck-transition);
}

.form-control:focus,
.form-select:focus,
.ck-input:focus {
  border-color: var(--ck-blue);
  box-shadow: var(--ring-focus);
  outline: none;
  background-color: var(--ck-surface);
}

.form-control::placeholder,
.ck-input::placeholder {
  color: var(--ck-text-muted);
  font-weight: 400;
}

.form-control:disabled,
.form-control[readonly],
.ck-input:disabled,
.ck-input[readonly] {
  background-color: var(--ck-surface-subtle);
  color: var(--ck-text-muted);
  border-color: var(--ck-border);
}

/* Field labels — scoped to explicit label components only. Do NOT use a bare `label` selector
   here: Syncfusion renders float labels and list-item labels as <label> too, and catching them
   turns every dropdown caption into an uppercase micro-label. */
.form-label,
.col-form-label{
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-secondary);
  margin-bottom: 5px;
}

.form-text,
.form-hint {
  font-size: 13px;
  color: var(--ck-text-muted);
  margin-top: 4px;
}

.input-group-text {
  background-color: var(--ck-surface-subtle);
  border-color: var(--ck-border);
  color: var(--ck-text-secondary);
  font-size: 15px;
  border-radius: var(--ck-radius-sm);
}

/* Validation. Blazor stamps these classes on inputs inside an EditForm. */
.valid.modified:not([type=checkbox]) {
  outline: none;
}

.invalid {
  border-color: var(--ck-danger);
}

.validation-message,
.ck-field-error {
  display: block;
  font-size: 14px;
  color: #A93226;
  margin-top: 4px;
}

/* Every form submit path must render its errors somewhere. A per-field message covers only the
   fields that have one; a model-level rule or a binding failure has nowhere to land and the
   button just reads as broken. This is the summary that catches those. */
/* BLAZOR EMITS `validation-errors`, AND THIS RULE NAMED MVC's `validation-summary-errors` ALONE.
   Found by the stylesheet-reference sweep. <ValidationSummary /> renders <ul class="validation-errors">
   with <li class="validation-message"> inside it - so the ITEMS were painted and the box around them
   never was, on every form in this product including the two on the anonymous /verify. The comment
   above is what the rule was written to do; the selector is what it actually matched. */
.validation-summary-errors,
.validation-errors {
  background: var(--ck-danger-light);
  border: 1px solid #F5B7B1;
  border-radius: var(--ck-radius-sm);
  color: #A93226;
  padding: 10px 14px;
  font-size: 15px;
  margin-bottom: 14px;
}

.validation-summary-errors ul,
ul.validation-errors {
  margin: 0;
  padding-left: 18px;
}

/* ----------------------------------------------------------------
   9. TABLES
   For tabular DATA use a Syncfusion SfGrid; this styles the plain tables that appear in prose
   (a summary of terms, a small key/value block).
   ---------------------------------------------------------------- */
.table {
  font-size: 15px;
  color: var(--ck-text);
  border-color: var(--ck-border);
  margin-bottom: 0;
}

.table thead {
  border-bottom: 2px solid var(--ck-border);
}

.table thead th {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-muted);
  background-color: transparent;
  border-bottom: none;
  padding: 10px 16px;
  white-space: nowrap;
}

.table tbody td {
  padding: 12px 16px;
  border-bottom: 1px solid var(--ck-border);
  border-top: none;
  vertical-align: middle;
  color: var(--ck-text);
}

.table tbody tr:last-child td {
  border-bottom: none;
}

.table tbody tr:hover td {
  background-color: var(--ck-blue-ghost);
}

.table-striped tbody tr:nth-of-type(odd) td {
  background-color: rgba(71, 190, 217, 0.03);
}

/* ----------------------------------------------------------------
   10. BADGES & STATUS CHIPS
   ---------------------------------------------------------------- */
.badge {
  font-family: var(--font-sans);
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0.05em;
  padding: 4px 9px;
  border-radius: var(--ck-radius-xs);
}

/* !important is required here and is not laziness. Bootstrap's .bg-* are UTILITY classes, declared
   `background-color: rgba(var(--bs-success-rgb), var(--bs-bg-opacity)) !important`. Specificity
   cannot beat !important, so without a matching !important the status chips render in Bootstrap's
   own palette — and .bg-danger in particular came out as saturated red behind dark red text, which
   is close to unreadable. Retinting --bs-success-rgb and friends is not an option either: those
   same variables drive .text-success, .alert-success and .btn-success, where the SOLID colour is
   correct and only the chip wants the tint. */
.badge.bg-primary,
.badge-primary {
  background-color: var(--ck-blue) !important;
  color: #FFFFFF !important;
}

.badge.bg-info,
.badge-info {
  background-color: var(--ck-blue-ghost) !important;
  color: var(--ck-blue-active) !important;
}

.badge.bg-success,
.badge-success {
  background-color: var(--ck-success-light) !important;
  color: var(--ck-success) !important;
}

.badge.bg-warning,
.badge-warning {
  background-color: var(--ck-warning-light) !important;
  color: var(--ck-warning) !important;
}

.badge.bg-danger,
.badge-danger {
  background-color: var(--ck-danger-light) !important;
  color: var(--ck-danger) !important;
}

.badge.bg-secondary,
.badge-secondary {
  background-color: var(--ck-surface-subtle) !important;
  color: var(--ck-text-secondary) !important;
  box-shadow: inset 0 0 0 1px var(--ck-border);
}

/* A tidy reference pill shown beside a section heading. */

/* ----------------------------------------------------------------
   11. ALERTS
   ---------------------------------------------------------------- */
.alert {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  border-radius: var(--ck-radius-sm);
  padding: 12px 16px;
  border: none;
  border-left: 4px solid transparent;
}

.alert-info {
  background: var(--ck-blue-ghost);
  border-left-color: var(--ck-blue);
  color: #1E7B91;
}

.alert-success {
  background: var(--ck-success-light);
  border-left-color: var(--ck-success);
  color: #1D8148;
}

.alert-warning {
  background: var(--ck-warning-light);
  border-left-color: var(--ck-warning);
  color: #A04000;
}

.alert-danger {
  background: var(--ck-danger-light);
  border-left-color: var(--ck-danger);
  color: #922B21;
}

/* ----------------------------------------------------------------
   12. DROPDOWN MENUS & MODALS (Bootstrap)
   ---------------------------------------------------------------- */
.dropdown-menu {
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-md);
  padding: 6px;
  min-width: 180px;
  background: var(--ck-surface);
}

.dropdown-item {
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  color: var(--ck-text);
  padding: 8px 12px;
  border-radius: var(--ck-radius-xs);
  transition: all var(--ck-transition);
}

.dropdown-item:hover,
.dropdown-item:focus {
  background-color: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
}

.dropdown-divider {
  border-color: var(--ck-border);
}

.modal-content {
  border-radius: var(--ck-radius-md);
  border: 1px solid var(--ck-border);
  box-shadow: var(--ck-shadow-xl);
}

.modal-header {
  background: var(--ck-surface);
  border-bottom: 1px solid var(--ck-border);
  padding: 16px 20px;
}

.modal-title {
  font-family: var(--font-sans);
  font-size: 17px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.01em;
}

.modal-body {
  padding: 20px;
}

.modal-footer {
  background: var(--ck-surface-subtle);
  border-top: 1px solid var(--ck-border);
  padding: 12px 20px;
}

/* ----------------------------------------------------------------
   13. STAT / KPI CARDS
   Large tinted icon, 26px number, uppercase micro-label.
   ---------------------------------------------------------------- */
.ck-stat-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
  margin-bottom: 16px;
}

@media (max-width: 1199.98px) {
  .ck-stat-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (max-width: 575.98px) {
  .ck-stat-grid { grid-template-columns: 1fr; }
}

/* THE CELL A CARD SITS IN, AND WHY EVERY CARD HAS ONE. P48: the outstanding figure carries a note
   underneath it that goes somewhere the card does not, and an anchor cannot hold another anchor - so the
   note is a sibling. The cell is the grid item; the card stretches to fill whatever height the tallest
   one in the row needs, so a note on one card does not leave the other three short. */
.ck-stat-cell {
  display: flex;
  flex-direction: column;
  gap: 6px;
  min-width: 0;
}

.ck-stat-cell > .ck-stat-card {
  flex: 1 1 auto;
}

/* THE ALLOWANCE LINE UNDER THE CARDS. Quiet on purpose: it is context for the row above rather than a
   figure of its own, and a firm on no plan reads it once and never again. */
.ck-stat-allowance {
  margin: -8px 0 16px;
  font-size: .8125rem;
  color: var(--ck-text-muted);
  text-align: right;
}

.ck-stat-allowance a {
  color: inherit;
}

.ck-stat-allowance a:hover {
  color: var(--ck-blue-hover);
  text-decoration: underline;
}

.ck-stat-note {
  display: block;
  /* THE LINE IS HELD OPEN WHETHER OR NOT THERE IS A NOTE, so all four cards in the row are the same
     height. See CkStatCard: a card sharing its cell with a note is shorter than the ones beside it. */
  min-height: 1.15em;
  font-size: .8125rem;
  line-height: 1.15;
  color: var(--ck-text-muted);
  padding-left: 4px;
}

a.ck-stat-note:hover {
  color: var(--ck-blue-hover);
  text-decoration: underline;
}

.ck-stat-card {
  display: flex;
  align-items: center;
  gap: 16px;
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-sm);
  padding: 18px 20px;
  transition: box-shadow var(--ck-transition-md), transform var(--ck-transition-md);
}

.ck-stat-card.is-clickable {
  cursor: pointer;
}

.ck-stat-card.is-clickable:hover {
  box-shadow: var(--ck-shadow-md);
  transform: translateY(-2px);
}

.ck-stat-icon {
  display: flex;
  font-size: 39px;
  line-height: 1;
  color: var(--ck-blue);
  flex-shrink: 0;
}

.ck-stat-card--success .ck-stat-icon { color: var(--ck-success); }
.ck-stat-card--warning .ck-stat-icon { color: var(--ck-warning); }
.ck-stat-card--danger  .ck-stat-icon { color: var(--ck-danger); }
.ck-stat-card--info    .ck-stat-icon { color: var(--ck-blue); }

.ck-stat-value {
  font-size: 30px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
  line-height: 1.1;
}

.ck-stat-label {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-muted);
  margin-top: 3px;
}

/* ----------------------------------------------------------------
   14. PAGE HEADERS
   In-content header row: title (+ subtitle) left, actions right. Used where a page needs context
   beyond the top-bar title.
   ---------------------------------------------------------------- */
.ck-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 18px;
}

.ck-page-head-left {
  display: flex;
  align-items: center;
  gap: 12px;
  min-width: 0;
}

.ck-page-head-title {
  font-size: 23px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.02em;
  margin: 0;
  line-height: 1.25;
}

.ck-page-head-subtitle {
  font-size: 15px;
  color: var(--ck-text-muted);
  margin: 1px 0 0;
}

.ck-page-head-actions {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}

/* ON A PHONE THE HEAD'S BUTTONS WRAP RATHER THAN WIDEN THE PAGE. 7 October 2026: Contacts' two buttons, one of them
   "Bring across signed documents", made a row 514px wide that would not shrink, so the whole page was laid out at
   546px on a 390px phone. The page scrolled sideways, and the Undo bar, fixed to a screen that was now wider than
   the phone, sat past its edge where a tap landed on a card instead. */
@media (max-width: 767.98px) {
  .ck-page-head { flex-wrap: wrap; }
  .ck-page-head-actions { flex-shrink: 1; flex-wrap: wrap; min-width: 0; max-width: 100%; }
  .ck-page-head-actions .e-btn { white-space: normal; max-width: 100%; }
}

/* A panel — the plain content surface a page sits on when it is not a .card. */
.ck-panel {
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-sm);
  padding: var(--card-pad);
}

.ck-panel-title {
  font-size: 17px;
  font-weight: 700;
  color: var(--ck-text);
  letter-spacing: -0.01em;
  margin: 0 0 4px;
}

.ck-panel-subtitle {
  font-size: 14px;
  color: var(--ck-text-muted);
  margin: 0 0 16px;
}

/* Empty state — what a surface shows before it has anything in it. */
.ck-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  gap: 6px;
  padding: 44px 20px;
  color: var(--ck-text-muted);
}

.ck-empty-icon {
  font-size: 39px;
  color: var(--ck-border-strong);
  margin-bottom: 4px;
}

.ck-empty-title {
  font-size: 16px;
  font-weight: 700;
  color: var(--ck-text-secondary);
}

.ck-empty-text {
  font-size: 15px;
  max-width: 380px;
}

/* ----------------------------------------------------------------
   15. FOOTER
   ---------------------------------------------------------------- */
.footer {
  flex: 0 0 auto;
  background: transparent;
  border-top: 1px solid var(--ck-border);
  padding: 16px var(--content-pad);
  margin-top: auto;
}

.footer .copyright {
  font-size: 14px;
  font-weight: 500;
  color: var(--ck-text-muted);
  letter-spacing: 0.02em;
}

.ck-footer-sep {
  margin: 0 6px;
  color: var(--ck-border-strong);
}

/* Legal links on the anonymous surfaces (login, account pages). margin-top:auto pins it to the
   bottom of the flex column without needing the page above to fill the viewport, so a short page
   still puts it at the foot rather than mid-screen. */
.ck-anon-legal {
  margin-top: auto;
  padding: 16px;
  text-align: center;
  font-size: 14px;
  color: rgba(255, 255, 255, 0.55);
}

.ck-anon-legal a {
  color: rgba(255, 255, 255, 0.75);
}

.ck-anon-legal a:hover {
  color: #FFFFFF;
}

.ck-anon-legal span {
  margin: 0 6px;
}

/* ----------------------------------------------------------------
   16. LOGIN / ANONYMOUS SCREENS
   ---------------------------------------------------------------- */
/* The anonymous shell BlankLayout renders. It carries the gradient, not just .ck-login-bg, because
   the legal strip sits after the card in the column: with the gradient only on .ck-login-bg (which
   is min-height:100vh) the strip was pushed past the viewport and landed on a bare white band. */
.ck-anon-shell {
  min-height: 100vh;
  width: 100%;
  display: flex;
  flex-direction: column;
  background: var(--gradient-sidebar);
}

.ck-login-bg {
  min-height: 100vh;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--gradient-sidebar);
  position: relative;
  overflow: hidden;
}

/* Inside the shell the height belongs to the shell, so the card region takes the remaining space
   instead of demanding a second full viewport of its own. */
.ck-anon-shell > .ck-login-bg {
  flex: 1 1 auto;
  min-height: 0;
}

.ck-login-glow {
  position: absolute;
  border-radius: 50%;
  pointer-events: none;
}

.ck-login-glow-tr {
  width: 520px;
  height: 520px;
  background: radial-gradient(circle, rgba(71, 190, 217, 0.18), transparent 70%);
  top: -160px;
  right: -120px;
}

.ck-login-glow-bl {
  width: 420px;
  height: 420px;
  background: radial-gradient(circle, rgba(71, 190, 217, 0.12), transparent 70%);
  bottom: -140px;
  left: -100px;
}

.ck-login-card {
  position: relative;
  width: 380px;
  max-width: calc(100vw - 32px);
  background: #FFFFFF;
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-xl);
  padding: 32px 32px 28px;
}

.ck-login-logo {
  display: flex;
  justify-content: center;
  margin-bottom: 22px;
}

.ck-login-logo img {
  height: 64px;
}

.ck-login-title {
  font-size: 21px;
  font-weight: 700;
  color: var(--ck-text);
  text-align: center;
  margin: 0 0 4px;
  letter-spacing: -0.01em;
}

.ck-login-subtitle {
  font-size: 15px;
  color: var(--ck-text-muted);
  text-align: center;
  margin: 0 0 22px;
}

.ck-login-field {
  margin-bottom: 14px;
}

/* WHO AN INVITATION IS FOR AND WHO SENT IT, as two labelled rows under the heading. 1 October 2026:
   both addresses used to sit in one centred sentence, which made somebody work out which was theirs. */
.ck-invite-facts {
  margin: -8px 0 22px;
  padding: 12px 14px;
  background: var(--ck-surface-subtle);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  font-size: 14px;
}

/* Label ABOVE the value: beside it, "Invited by" wrapped and a long address broke mid-word. */
.ck-invite-facts > div + div {
  margin-top: 10px;
}

.ck-invite-facts dt {
  margin-bottom: 2px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ck-text-secondary);
}

.ck-invite-facts dd {
  margin: 0;
  min-width: 0;
  overflow-wrap: anywhere;
  color: var(--ck-text);
  font-weight: 600;
}

.ck-invite-note {
  font-size: 14px;
  line-height: 1.5;
  color: var(--ck-text-muted);
  margin: 0 0 18px;
}

.ck-login-field label {
  display: block;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-secondary);
  margin-bottom: 5px;
}

.ck-login-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
}

.ck-login-remember {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 15px;
  color: var(--ck-text);
  cursor: pointer;
  user-select: none;
  /* Two flex items sharing the row shrink together, so without this "Remember me" broke onto two
     lines beside a link that had broken onto two as well - on a card with room for both on one. */
  white-space: nowrap;
}

.ck-login-remember input[type="checkbox"] {
  width: 16px;
  height: 16px;
  accent-color: var(--ck-blue);
  cursor: pointer;
}

/* THE AGREEMENT BOX ON SIGN-UP, ON AN INVITATION AND ON THE CHANGED-TERMS PROMPT. 29 September 2026.
   Not .ck-login-remember, which holds "Remember me" on one line on purpose: this is a sentence with two
   links in it, and held on one line at phone width it ran the links past the right edge of the page.
   The box stays at the top of the first line and the words wrap beside it.
   THE SENTENCE IS ONE <span>, AND IT HAS TO BE. This is a flex row, so every child is a flex item: a
   bare text run and each link beside it became a COLUMN of its own, and the invitation page rendered
   "I understand I am joining" / "Terms of Service" / "and I acknowledge the" / "Privacy Notice" as four
   narrow columns side by side. Reported from production, 1 October 2026.
   AND IT IS `label.ck-agree`, NOT `.ck-agree`: sign-up puts the box inside .ck-login-field, whose
   `.ck-login-field label` rule is more specific and was turning the sentence into a bold uppercase
   field caption, display:block. Every property that rule sets is reset here. */
label.ck-agree,
.ck-login-field label.ck-agree {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  font-size: 14px;
  font-weight: 400;
  text-transform: none;
  letter-spacing: normal;
  line-height: 1.5;
  color: var(--ck-text);
  margin-bottom: 0;
  cursor: pointer;
}

.ck-agree input[type="checkbox"] {
  flex: none;
  width: 16px;
  height: 16px;
  margin-top: 3px;
  accent-color: var(--ck-blue);
  cursor: pointer;
}

.ck-agree > span {
  flex: 1;
  min-width: 0;
}

.ck-login-link {
  font-size: 14px;
  font-weight: 600;
  white-space: nowrap;
  color: var(--ck-blue-strong);
  text-decoration: none;
  transition: color var(--ck-transition);
}

.ck-login-link:hover {
  color: var(--ck-blue-strong-hover);
}

.ck-login-submit {
  width: 100%;
  justify-content: center;
  margin-top: 2px;
}

.ck-login-error {
  background: var(--ck-danger-light);
  border: 1px solid #F5B7B1;
  border-radius: var(--ck-radius-sm);
  color: #A93226;
  padding: 10px 14px;
  font-size: 15px;
  margin-bottom: 14px;
}

.ck-login-warning {
  background: #FEF8E7;
  border: 1px solid #F4D58A;
  border-radius: var(--ck-radius-sm);
  color: #8A6100;
  padding: 10px 14px;
  font-size: 15px;
  margin-bottom: 14px;
}

/* ----------------------------------------------------------------
   YOUR OWN ACCOUNT (/Account/Manage). P29.
   The Identity scaffold's own markup, given this product's vocabulary. It renders inside MainLayout, so
   it is app-shell chrome rather than a Syncfusion surface - the /Account set is statically rendered and
   exception 1 applies to every control on it.
   ---------------------------------------------------------------- */
.ck-account-shell {
  display: grid;
  grid-template-columns: 15rem 1fr;
  gap: 16px;
  align-items: start;
}

.ck-account-rail { padding: 10px; }

.ck-account-body { max-width: 44rem; }

/* A phone has no room for a 15rem rail beside a form, and the rail is six items. */
@media (max-width: 768px) {
  .ck-account-shell { grid-template-columns: 1fr; }
}

.ck-account-nav { gap: 2px; }

.ck-account-nav .nav-link {
  color: var(--ck-text-secondary);
  border-radius: var(--ck-radius-sm);
  padding: 8px 12px;
  font-weight: 500;
}

.ck-account-nav .nav-link:hover { background: var(--ck-surface-subtle); color: var(--ck-text); }

/* THE ONE THAT WAS WRONG. Bootstrap paints .nav-pills .active from --bs-primary, which this sheet does
   not redefine, so the selected item came out Bootstrap purple next to a brand-blue shell. */
.ck-account-nav .nav-link.active {
  background: var(--ck-blue);
  color: var(--ck-text-inverse);
}

/* THE ERROR PAGE'S REQUEST ID. Deliberately NOT .ck-ref, whose `white-space: nowrap` is correct for a
   short verification reference in a grid cell and wrong for a 55-character trace id inside a 480px card:
   it ran out of the coloured box and off the edge, so the last third of the identifier was unreadable.
   `anywhere` rather than `break-all` so it wraps at the hyphens the id already has. */
.ck-error-ref {
  display: block;
  font-family: var(--font-mono);
  font-size: 13px;
  line-height: 1.5;
  color: #8A6100;
  overflow-wrap: anywhere;
}

.ck-error-hint {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.45;
  opacity: .85;
}

.ck-login-footer {
  border-top: 1px solid var(--ck-border);
  margin-top: 22px;
  padding-top: 16px;
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}

.ck-login-footer span {
  font-size: 14px;
  color: var(--ck-text-muted);
}

.ck-login-divider {
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 18px 0;
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-muted);
}

.ck-login-divider::before,
.ck-login-divider::after {
  content: '';
  flex: 1 1 auto;
  height: 1px;
  background: var(--ck-border);
}

/* ---- Show / hide password ----------------------------------------------------------------
   Generic on purpose: the sign-in field is the first user, but register, invite and reset have
   the same problem and adopt it by wrapping their field the same way. Behaviour is in
   js/chek-app.js (ckReveal) — see the markup contract documented there. */
.ck-input-reveal {
  position: relative;
  display: block;
}

.ck-input-reveal .ck-input,
.ck-input-reveal .form-control {
  width: 100%;
  /* Room for the button, so a long password never runs underneath it. */
  padding-right: 44px;
}

.ck-input-reveal-btn {
  position: absolute;
  top: 50%;
  right: 7px;
  transform: translateY(-50%);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  padding: 0;
  border: 0;
  border-radius: var(--ck-radius-sm);
  background: transparent;
  color: var(--ck-text-muted);
  cursor: pointer;
  transition: color var(--ck-transition), background var(--ck-transition);
}

.ck-input-reveal-btn:hover {
  color: var(--ck-blue);
  background: var(--ck-blue-ghost);
}

.ck-input-reveal-btn:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 1px;
}

.ck-input-reveal-btn.is-revealed {
  color: var(--ck-blue);
}

.ck-input-reveal-btn svg {
  width: 17px;
  height: 17px;
  display: block;
}

/* Two icons, one shown at a time. Swapping by class keeps the script free of markup building. */
.ck-input-reveal-btn .ck-reveal-off { display: none; }
.ck-input-reveal-btn.is-revealed .ck-reveal-on { display: none; }
.ck-input-reveal-btn.is-revealed .ck-reveal-off { display: block; }

/* ----------------------------------------------------------------
   17. SIGNATURE SURFACES
   ChekSign's reason for existing. Dancing Script is declared in chek-fonts.css and used ONLY
   here — a typed signature has to read as handwriting or it does not read as a signature.
   ---------------------------------------------------------------- */

/* ----------------------------------------------------------------
   18. SYNCFUSION COMPONENT ALIGNMENT
   SHAPE AND TYPE ONLY. Colour is handled by the --color-sf-* tokens in section 1c — if you are
   about to add a colour here, go put it there instead.

   Syncfusion's theme sets its own font stack and a 12px base on .e-control. Both are overridden
   so a Syncfusion control and a hand-written .ck-panel beside it read as the same design system
   rather than two different products bolted together.
   ---------------------------------------------------------------- */
.e-control,
.e-css,
.e-btn,
.e-input,
.e-input-group,
.e-dropdownbase,
.e-grid,
.e-dlg-container,
.e-toast,
.e-tab,
.e-menu-wrapper {
  font-family: var(--font-sans);
}

.e-control,
.e-css {
  font-size: 15px;
}

/* Buttons — match the .btn metrics above so a Syncfusion action and a Bootstrap one can sit in
   the same row without a height jump. */
.e-btn,
.e-css.e-btn {
  font-size: 15px;
  font-weight: 600;
  letter-spacing: 0.02em;
  border-radius: var(--ck-radius-sm);
  padding: 8px 18px;
  line-height: 1.4;
  text-transform: none;
}

.e-btn.e-primary:hover {
  box-shadow: var(--shadow-primary-hover);
}

/* A FLAT BUTTON RENDERED WHITE ON WHITE, AND ALL EIGHT OF THEM IN THIS PRODUCT WERE INVISIBLE.
   ------------------------------------------------------------------------------------------------
   This is the one colour rule in this sheet that is allowed to be an .e-* rule rather than a token in
   section 1c, and the reason is that ONE TOKEN CANNOT SERVE BOTH CONTROLS. bootstrap5.3 paints a flat
   button's resting TEXT from --color-sf-secondary-bg-color — the same property that fills a secondary
   button's BACKGROUND. Section 1c sets it to --ck-surface, which is correct for the fill and fatal for
   the text: measured on /templates, the Archive button (then called "File away") computed to
   rgb(255,255,255) on a white panel, with a
   real bounding box, display:inline-block and visibility:visible. Present, reported by nothing, and not
   on the screen — A53's shape arriving through the stylesheet instead of through a grid width.

   IT IS WORSE THAN A PLAIN MISSING CONTROL BECAUSE HOVER REPAIRS IT. Syncfusion's :hover and :focus
   rules read --color-sf-secondary-text-color-hover, which this sheet sets properly — so the button
   appears the moment a mouse passes over it, and anybody checking by pointing at it sees a working
   control. The eight affected: Templates' Archive/Restore and its Remove-a-person, Contacts' "open
   the contact who has that address", PlaceFields' Remove, two on RequestDetail, and Branding's
   Remove logo.

   PAINTED FROM A TOKEN, NOT A LITERAL, so a retint still flows from section 1c. A flat button is a
   plain button with the box taken off, so it takes the plain button's text colour and keeps
   Syncfusion's own hover lift to blue. */
.e-btn.e-flat,
.e-css.e-btn.e-flat {
  color: var(--color-sf-secondary-text-color);
}

.e-btn:focus-visible {
  outline: 3px solid rgba(71, 190, 217, 0.4);
  outline-offset: 2px;
}

/* Inputs — same radius and focus ring as .form-control. */
.e-input-group,
.e-input-group.e-control-wrapper,
.e-outline.e-input-group {
  border-radius: var(--ck-radius-sm);
}

.e-input-group:not(.e-disabled):not(.e-float-icon-left)::before,
.e-input-group:not(.e-disabled):not(.e-float-icon-left)::after {
  /* Kill the material-style underline animation; the border + ring is the Chek idiom. */
  display: none;
}

.e-input-group.e-input-focus,
.e-input-group.e-control-wrapper.e-input-focus {
  box-shadow: var(--ring-focus);
}

/* Labels rendered by Syncfusion float-label inputs are captions, not the uppercase field labels
   of section 8 — keep them as content type. */
.e-float-input label.e-float-text,
.e-float-input.e-control-wrapper label.e-float-text {
  font-size: 14px;
  font-weight: 500;
  text-transform: none;
  letter-spacing: normal;
}

/* Grid — the app's primary data surface. Header type matches .table thead th so a grid and a
   plain table are visibly the same object. */
.e-grid {
  border-radius: var(--ck-radius-md);
  border-color: var(--ck-border);
}

.e-grid .e-headercell,
.e-grid .e-detailheadercell {
  padding: 10px 16px;
}

.e-grid .e-headercelldiv {
  font-size: 13px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.07em;
  color: var(--ck-text-muted);
}

.e-grid .e-rowcell {
  font-size: 15px;
  padding: 11px 16px;
}

.e-grid .e-gridheader {
  border-top-left-radius: var(--ck-radius-md);
  border-top-right-radius: var(--ck-radius-md);
}

/* Dialog / popup elevation matches .modal-content and .dropdown-menu. */
.e-dialog,
.e-dlg-container .e-dialog {
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-xl);
}

.e-dialog .e-dlg-header {
  font-size: 17px;
  font-weight: 700;
  letter-spacing: -0.01em;
}

.e-popup,
.e-ddl.e-popup,
.e-dropdownbase .e-popup {
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-md);
}

.e-toast {
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-lg);
}

.e-tab .e-tab-header .e-item .e-tab-text {
  font-size: 15px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0.01em;
}

/* The read-only invite link on the Users page. Fills the row so a long URL is readable rather than
   truncated into something nobody can check before sending it. */
.ck-invite-link.e-input-group {
  flex: 1 1 auto;
  min-width: 0;
}

.ck-invite-link .e-input {
  font-family: var(--font-mono);
  font-size: 14px;
}

/* Chips (multi-select tags, tag inputs) */
.e-chip-list .e-chip,
.e-chip {
  border-radius: var(--ck-radius-xs);
  font-size: 14px;
  font-weight: 500;
}

/* ----------------------------------------------------------------
   19. BLAZOR ERROR UI
   ---------------------------------------------------------------- */
#blazor-error-ui {
  color-scheme: light only;
  background: var(--ck-warning-light);
  border-top: 3px solid var(--ck-warning);
  color: var(--ck-text);
  font-family: var(--font-sans);
  font-size: 15px;
  bottom: 0;
  box-shadow: 0 -1px 2px rgba(11, 39, 54, 0.2);
  display: none;
  left: 0;
  padding: 0.6rem 1.25rem 0.7rem 1.25rem;
  position: fixed;
  width: 100%;
  z-index: 1080;
}

#blazor-error-ui .dismiss {
  cursor: pointer;
  position: absolute;
  right: 0.75rem;
  top: 0.5rem;
}

/* What an <ErrorBoundary> renders when it catches. Ported here from the template's app.css (now
   deleted) so the fallback is on-brand rather than the template's red block, and so it survives —
   app.css was no longer linked at all, which would have left a caught error rendering as bare,
   unstyled text. */
.blazor-error-boundary {
  background: var(--ck-danger-light);
  border: 1px solid #F5B7B1;
  border-left: 4px solid var(--ck-danger);
  border-radius: var(--ck-radius-sm);
  color: #922B21;
  font-family: var(--font-sans);
  font-size: 15px;
  font-weight: 500;
  padding: 12px 16px;
}

.blazor-error-boundary::after {
  content: "Something went wrong in this section. Reload the page to try again.";
}

/* ----------------------------------------------------------------
   20. SCROLLBAR (Chromium)
   ---------------------------------------------------------------- */
::-webkit-scrollbar {
  width: 5px;
  height: 5px;
}

::-webkit-scrollbar-track {
  background: transparent;
}

::-webkit-scrollbar-thumb {
  background: var(--ck-border-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ck-blue-light);
}

/* ----------------------------------------------------------------
   21. UTILITY OVERRIDES
   ---------------------------------------------------------------- */
.text-primary   { color: var(--ck-blue) !important; }
.text-muted     { color: var(--ck-text-muted) !important; }
.text-secondary { color: var(--ck-text-secondary) !important; }
.text-dark      { color: var(--ck-text) !important; }

.bg-primary     { background-color: var(--ck-blue) !important; }
.bg-light       { background-color: var(--ck-blue-ghost) !important; }

.border         { border-color: var(--ck-border) !important; }
.border-primary { border-color: var(--ck-blue) !important; }

/* ── /verify: the public evidence surface ──────────────────────────────────────────────────────────
   Widens the auth card and lays out the answer. Product-branded and never firm-branded, deliberately:
   the page exists so nobody has to take the firm's word for it, so firm chrome here would imply the
   firm vouches for a check whose whole value is that they do not.                                    */
.ck-verify-card { max-width: 34rem; }

.ck-verify-or {
    margin: 1.25rem 0 .75rem;
    text-align: center;
    font-size: .75rem;
    letter-spacing: .08em;
    color: var(--ck-text-muted, #6c757d);
}

.ck-verify-facts {
    display: grid;
    grid-template-columns: max-content 1fr;
    gap: .3rem .9rem;
    margin: .85rem 0 0;
    font-size: .875rem;
}

.ck-verify-facts dt { color: var(--ck-text-muted, #6c757d); font-weight: 500; }
.ck-verify-facts dd { margin: 0; }

/* ── The trusted-timestamp block, and the instructions folded under it ───────────────────────────────

   .ck-verify-stamp WAS REFERENCED AND NEVER DEFINED, which is the third time this sheet has had that
   exact shape - 18d's own comment below records .ck-label and .ck-btn--quiet arriving the same way. The
   block rendered, said the right thing, and ran straight on from the facts above it with nothing
   between the product's own answer and an independent authority's, which is the one distinction on this
   page worth drawing a line for.

   THE INSTRUCTIONS ARE COLLAPSED AND MARKED AS A CONTROL. They are a seeded help article rendered in
   place, because /help/{slug} carries [Authorize] and the reader of this page has no account. The
   summary is TEXT COLOURED rather than brand coloured: --ck-blue on white is about 2:1, which is fine
   for a 26px wordmark and not for a 13px control, and this page is measured by no contrast walk.       */
.ck-verify-stamp {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px solid var(--ck-border, #DDE8EE);
}

.ck-verify-stamp p { margin: 0 0 10px; }

.ck-verify-stamp p:last-child { margin-bottom: 0; }

.ck-verify-how {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px dashed var(--ck-border, #DDE8EE);
}

.ck-verify-how > summary {
    cursor: pointer;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ck-text, #0F2535);
}

/* NARROWER THAN THE ARTICLE PAGE'S, because this card is 34rem and the 68ch measure written for a full
   page would simply never bind here. The command block keeps its own overflow-x, which is what stops a
   wrapped openssl invocation being copied with a newline in the middle of it. */
.ck-verify-how .ck-help-body {
    margin-top: 12px;
    max-width: none;
    font-size: .8125rem;
}

/* ── /sign: the signer's surface ───────────────────────────────────────────────────────────────────
   Document on the left, the act on the right, so the thing being agreed to is never off-screen while
   somebody agrees to it. Stacks on narrow screens with the document FIRST, for the same reason.       */

/* ---- 18d. Firm-side signing surfaces, and two primitives the signer page was already using ----------
   .ck-label and the quiet button modifier were referenced by Sign.razor from the day it landed and were
   never defined here, so the label rendered as a bare span and the modifier did nothing. Both are real
   now, and the modifier is spelt the way the rest of this sheet spells one: ck-btn--quiet, not
   ck-btn-quiet. */
.ck-label {
    display: block;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ck-text, #212529);
    margin-bottom: .25rem;
}

/* A WORKING CONTROL MUST NOT READ AS A DISABLED ONE AT REST. Item 2.9 of the brief of 23 September
   2026, reported against "Signed copy" and "Audit report" on a request's own page.
   -------------------------------------------------------------------------------------------------
   IT PAINTED ITS TEXT --ck-text-muted ON A TRANSPARENT GROUND, which is the recipe this sheet uses for
   something that cannot be pressed: .ck-btn[disabled] is the same idea expressed as opacity, and a
   reader has no way to tell the two apart. Both controls reported are ordinary anchors to endpoints
   that answer.

   HOVER REPAIRED IT, WHICH IS WHY NOBODY CAUGHT IT - the rule below has always restored full text
   colour on :hover, so anybody who pointed at one saw a working button. That is A67's own lesson
   arriving on a different modifier: a control has to be read AT REST.

   THE HIERARCHY IS KEPT, AND IT WAS NEVER THE COLOUR DOING THAT WORK. A quiet button is still
   transparent where a primary is filled, and still bordered where a primary is not, which is what
   makes it read as secondary. What it no longer does is whisper. */
.ck-btn--quiet {
    background: transparent;
    color: var(--ck-text, #212529);
    border-color: var(--ck-border, #dee2e6);
}

.ck-btn--quiet:hover { background: var(--ck-surface-muted, #f8f9fa); color: var(--ck-text, #212529); }

/* One card per recipient. The action matrix is sliced this way rather than drawn as a grid: the question
   a firm is answering is "what is this person being asked to do", and that needs no column per document. */
.ck-recipient-card {
    border: 1px solid var(--ck-border, #dee2e6);
    border-radius: .5rem;
    padding: 12px 14px;
    margin-bottom: 10px;
    background: #fff;
}

.ck-recipient-head {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 8px;
}

.ck-recipient-actions { display: flex; flex-direction: column; gap: 6px; }

.ck-recipient-action {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    padding: 4px 0;
    border-top: 1px solid var(--ck-border, #dee2e6);
}

.ck-recipient-action-doc { font-size: .8125rem; }

/* How hard this person has to prove who they are. Above the action matrix on purpose: it is a fact
   about the PERSON, and everything below it is a fact about a document. */
.ck-recipient-verify {
    display: flex;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
    padding: 6px 0 2px;
}

.ck-recipient-verify-label { font-size: .8125rem; color: var(--ck-text-muted, #6c757d); }

/* Said where a tier is chosen, because a code that cannot be sent refuses the signature (D20) and this
   is the last moment the firm can pick differently. Sized down and kept tight: it sits inside a
   recipient card, not at the top of the page. */
.ck-tier-warning {
    margin: 6px 0 0;
    padding: 8px 10px;
    font-size: .8125rem;
}

.ck-recipient-link {
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid var(--ck-border, #dee2e6);
    font-size: .8125rem;
}

/* A FIELD OF RECORD IS LABELLED, AND A PLACEHOLDER IS NOT A LABEL. D14.
   ------------------------------------------------------------------------------------------------
   Reported from the deployed build: the contacts form held zero <label> elements, so a screen reader
   announced four consecutive fields all called "textbox", and a password manager had nothing to map.
   A placeholder disappears the moment somebody types, which is exactly when they most need to know
   which box they are in.

   flex-end rather than center, so a button on the same row still lines up with the BOXES once the
   labels have pushed them down. Rows without labels are unaffected: their items are the same height,
   where flex-end and center are the same thing. */
.ck-add-recipient { display: flex; gap: 8px; flex-wrap: wrap; align-items: flex-end; margin-top: 12px; }

/* A VIEWER INSIDE A SCROLLING PAGE KEEPS ITS WHEEL TO ITSELF. D19.
   ------------------------------------------------------------------------------------------------
   The PDF viewer scrolls; the page it sits on also scrolls. Without this, a wheel gesture that runs
   the viewer to its last page CHAINS to the outer page — so the document stops moving, the page
   scrolls instead, and the viewer is left showing whitespace while the reader is looking somewhere
   else entirely. Reported as "the viewer ends up showing blank whitespace while the document is
   scrolled elsewhere".

   overscroll-behavior rather than a wheel handler, because a handler has to decide when to stop
   propagating and gets it wrong at exactly the boundary this is about. The browser already knows. */
.ck-viewer-pane { overscroll-behavior: contain; }

/* WHO SENT IT, AND WHAT THEY WROTE. D17.
   ------------------------------------------------------------------------------------------------
   Both sit outside the document card, on the dark gradient, so both are coloured FOR it — the
   signing page's own hard-won rule: .ck-sign-head h1 once set a size and no colour, inherited the
   default body text, and rendered the document's title invisible on the one page a firm's client
   ever sees. */
.ck-sign-sender {
  margin-top: 4px;
  font-size: .8125rem;
  color: var(--ck-text-muted, #8BA8B6);
}

.ck-sign-message {
  grid-column: 1 / -1;
  max-width: 760px;
  margin: 0 auto 16px;
  padding: 12px 16px;
  background: rgba(255, 255, 255, .06);
  border-left: 3px solid var(--ck-blue, #2F80B5);
  border-radius: var(--ck-radius-sm, 6px);
  color: var(--ck-text-muted, #8BA8B6);
  font-size: .875rem;
}

.ck-sign-message p { margin: 0; white-space: pre-wrap; }

/* THE PANE SAYS IT IS LOADING RATHER THAN SITTING WHITE. D11.
   ------------------------------------------------------------------------------------------------
   Over the viewport rather than beside it, because the viewer takes its own full height and a
   message underneath would be below the fold of the one region the reader is waiting on. It is
   removed the moment the control reports the document drawn, so nothing has to guess at a duration. */
.ck-sign-loading {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ck-surface, #FFFFFF);
}

.ck-labelled { display: flex; flex-direction: column; gap: 4px; }

.ck-labelled > label {
  font-size: .75rem;
  font-weight: 600;
  color: var(--ck-text-muted, #8BA8B6);
}

/* The firm's actions on a live request. One reason box shared by the actions that need one. */
.ck-manage-actions { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-top: 10px; }

/* TWO ADDRESSES DRAWN AS TABS. P23.
   ------------------------------------------------------------------------------------------------
   Real anchors, not buttons, because each one IS a route - so middle-click, bookmark and the back
   button all behave, which a tab holding component state cannot offer. The current one is marked with
   aria-current as well as a class, so it is the same fact to a screen reader and to the eye. */
.ck-scope-tabs {
    display: flex;
    gap: 4px;
    margin-bottom: 12px;
    border-bottom: 1px solid var(--ck-border, #DDE8EE);
}

.ck-scope-tab {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 9px 16px;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
    color: var(--ck-text-secondary, #4A6475);
    font-size: .9375rem;
    font-weight: 500;
    text-decoration: none;
}

.ck-scope-tab:hover { color: var(--ck-text, #0F2535); }

/* SIX TABS DID NOT FIT A LAPTOP, MEASURED. 1 October 2026: the Templates page's row scrolled the whole page
   45px sideways at 1150px. Tighter below 1400px, and a row that still runs out WRAPS rather than pushing the
   page wider, because a tab past the edge is one nobody can see. */
.ck-scope-tabs { flex-wrap: wrap; }

@media (max-width: 1400px) {
    .ck-scope-tab { padding: 9px 10px; }
}

.ck-scope-tab.is-current {
    color: var(--ck-blue, #47BED9);
    border-bottom-color: var(--ck-blue, #47BED9);
}

/* The count is the reason the split is safe - see the comment on the strip in Contacts.razor. */
.ck-scope-count {
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ck-surface-subtle, #F8FBFD);
    border: 1px solid var(--ck-border, #DDE8EE);
    font-size: .75rem;
    font-weight: 600;
    color: var(--ck-text-secondary, #4A6475);
}

.ck-scope-tab.is-current .ck-scope-count {
    background: var(--ck-blue-ghost, #EBF8FC);
    border-color: var(--ck-blue-border, #C4E8F4);
    color: var(--ck-blue, #47BED9);
}

/* Search and filter sit above the grid, because both narrow the QUERY rather than the rendered rows. */
.ck-list-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: center; margin-bottom: 12px; }
.ck-pager { display: flex; gap: 10px; align-items: center; justify-content: flex-end; margin-top: 12px; }
.ck-pager-label { font-size: .8125rem; color: var(--ck-text-muted, #6c757d); }

@media (max-width: 700px) {
    .ck-recipient-action { flex-direction: column; align-items: flex-start; gap: 4px; }
    .ck-recipient-verify { align-items: flex-start; }
}

/* The one-time code gate. Used both as a whole card (when a code is owed before the documents may be
   opened) and inline in the signing panel (when it is owed before signing), so it carries no assumption
   about how wide it is. */
.ck-sign-code { display: flex; flex-direction: column; gap: 8px; margin: 10px 0 14px; }

.ck-sign-code-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* Declining sits beside signing rather than hidden behind it: a signer with an objection and nowhere to
   put it either signs something they disagree with or abandons the link silently. */
.ck-sign-decline { margin-top: 14px; font-size: .8125rem; }
.ck-sign-decline > summary { cursor: pointer; color: var(--ck-text-muted, #6c757d); }
.ck-sign-decline > * { margin-top: 8px; }
.ck-sign-doc-refused { margin-left: 6px; color: var(--ck-danger, #c0392b); }

/* A COLUMN, BECAUSE THE HELP BLOCK IS A SIBLING OF THE SHELL RATHER THAN PART OF IT.
   -------------------------------------------------------------------------------------------------
   `.ck-login-bg` is `display:flex` with everything centred, which is right for a login card and wrong
   for a page with two stacked regions. `.ck-sign-bg` used to override only the padding and the cross
   axis, so `.ck-sign-shell` and `.ck-sign-help` were laid out as a ROW: the help block - written as a
   centred 760px footer, and described to a firm on the settings page as "shown at the foot of the
   signing page" - took a full-height column down the right-hand side of the screen, three lines of
   text in 626px, with the document viewer squeezed beside it.
   It reads as a grid problem and is not one; `grid-column` on it does nothing, because its parent is
   this flex container and not the shell's grid. Measured 11 September 2026. */
.ck-sign-bg { padding: 0; align-items: stretch; flex-direction: column; }

.ck-sign-shell {
    display: grid;
    grid-template-columns: 1fr 22rem;
    grid-template-rows: auto 1fr;
    gap: 0 1.25rem;
    width: 100%;
    max-width: 78rem;
    margin: 0 auto;
    padding: 1.25rem;

    /* NOT 100vh. `.ck-login-bg` already guarantees the viewport height, so demanding it here as well
       pushed `.ck-sign-help` - now stacked below rather than beside - off the bottom of every screen.
       The one thing that block cannot afford is to be hard to find: a signer who cannot get past an
       identity check and sees no way to ask a person concludes the link is a scam and stops, which is
       the single failure this page can produce that nobody ever hears about. */
    min-height: 0;
}

/* THE HEADING SITS ON THE GRADIENT, NOT ON A CARD, SO IT HAS TO BE COLOURED FOR IT.
   -------------------------------------------------------------------------------------------------
   `.ck-sign-bg` is `.ck-login-bg` with the padding removed, so the signing page inherits the dark
   sidebar gradient - and this header is the only thing on the page outside a white panel. Without a
   colour here the h1 inherits the default body text, #0F2535, which is within a point or two of
   --ck-sidebar-top (#0B2736): the document's title rendered invisible on the one page a firm's client
   ever sees, and nothing reported it because the element was present and correctly sized.

   The subtitle survived only by accident - --ck-text-muted is light enough to read on navy - which is
   why it is now stated in the same terms as the rest of the on-dark text in this sheet
   (`.ck-anon-legal`), rather than left to chance. Measured 11 September 2026. */
.ck-sign-head { grid-column: 1 / -1; }

/* AND SO IS EVERY CARD THAT IS THE WHOLE PAGE. Item 1.3 of the brief of 23 September 2026.
   -------------------------------------------------------------------------------------------------
   THE THIRD TIME THIS SHELL HAS CAUGHT SOMETHING, AND THE FIRST WHERE A STRANGER SAW IT. The rule
   directly above exists because `.ck-sign-head` was auto-placed into column one; `.ck-sign-help` has
   its own note further down for the same reason. `.ck-sign-shell` is `grid-template-columns: 1fr
   22rem`, so ANY block dropped into it that is not told otherwise lands in the left column beside a
   sidebar that is not being rendered.

   MEASURED, AND THE ARITHMETIC IS EXACTLY WHAT WAS REPORTED: in a 938px window the shell's padding
   leaves 898px, the 22rem sidebar column and the gap take 372 of it, so column one is 526px wide and
   a 380px `.ck-login-card` sits from x=20 to x=400. The report said "x 20 to 400 in a 938px-wide
   window", which is this rule's absence to the pixel.

   IT IS THE STATES WHERE THERE IS NOTHING ELSE ON THE PAGE - a refused link, an identity check before
   anything can be opened, a signature recorded, a decline recorded. `/sign/notarealtoken` is the one a
   stranger meets, and an off-centre box on a page that already says "this link is not available" is
   the difference between a product that refused them and a product that looks broken.

   A CHILD SELECTOR RATHER THAN A CLASS ON EACH STATE, because the failure is a property of being
   dropped into this grid: the next state somebody adds is centred without their having to know. */
.ck-sign-shell > .ck-login-card {
  grid-column: 1 / -1;
  margin-inline: auto;
}
.ck-sign-head h1 { font-size: 1.15rem; margin: 0; color: #FFFFFF; }
.ck-sign-head p { margin: .15rem 0 .9rem; color: rgba(255, 255, 255, 0.72); font-size: .875rem; }

.ck-sign-doc {
    min-height: 30rem;
    border: 1px solid var(--ck-border, #dee2e6);
    border-radius: .5rem;
    overflow: hidden;
    background: #fff;
    /* A column so the document strip can sit above the viewer INSIDE the frame. The strip is part of what
       is being read, not part of the act, so it belongs on this side of the shell rather than in the
       panel — and putting it in the grid instead would have given the single-document case an empty row. */
    display: flex;
    flex-direction: column;
}

/* One button per document, for a request that holds several. Hidden entirely when there is one, because a
   tab strip with a single tab is chrome that teaches nothing. */
.ck-sign-docs {
    display: flex;
    flex-wrap: wrap;
    gap: .35rem;
    padding: .5rem;
    border-bottom: 1px solid var(--ck-border, #dee2e6);
    background: var(--ck-surface-muted, #f8f9fa);
}

.ck-sign-docs .e-btn { font-size: .8125rem; }

/* The tick says "you have had this on screen", which is what enables the button. It is a nudge and not a
   control — see the AllOpened comment on the page. */
.ck-sign-doc-seen { margin-left: .4rem; }

.ck-sign-viewport {
  position: relative;   /* the loading cover is absolute within it. D11. */ flex: 1; min-height: 0; }

.ck-sign-outstanding { color: var(--ck-warning-text, #856404); }

.ck-sign-panel {
    display: flex;
    flex-direction: column;
    gap: .6rem;
    padding: 1.1rem;
    border: 1px solid var(--ck-border, #dee2e6);
    border-radius: .5rem;
    background: #fff;
    align-self: start;
}

.ck-sign-explainer summary { cursor: pointer; font-size: .8125rem; font-weight: 600; }
.ck-sign-explainer p { font-size: .8125rem; margin: .5rem 0 0; }

.ck-sign-consent {
    margin: .35rem 0 0;
    padding-left: .65rem;
    border-left: 3px solid var(--ck-border, #dee2e6);
    font-size: .8125rem;
    font-style: italic;
}

/* P34 - the witness's panel on the signing page.
   -------------------------------------------------------------------------------------------------
   IT IS MARKED OFF FROM THE REST OF THE PANEL ON PURPOSE. A witness arrives from a link that looks
   exactly like a signer's, and the one thing they must not do is read the consent statement as theirs.
   The tint is the product's own info surface rather than a warning colour: being asked to witness is
   ordinary, and an alarming panel would read as something having gone wrong. */
/* P34 - the chips beside a person on a request. Spacing only; the colours are Bootstrap's own
   utilities, retinted by section 1c like every other badge here. */
.ck-recipient-tags {
    display: flex;
    align-items: center;
    gap: .35rem;
    flex-wrap: wrap;
}

.ck-sign-witness {
    display: flex;
    flex-direction: column;
    gap: .4rem;
    padding: .7rem .8rem;
    border: 1px solid var(--ck-blue-border, #C4E8F4);
    border-left: 3px solid var(--ck-blue, #47BED9);
    border-radius: .35rem;
    background: var(--ck-blue-ghost, #EBF8FC);
}

.ck-sign-witness-lede { margin: 0; font-size: .8125rem; }
.ck-sign-witness-how { display: flex; flex-direction: column; gap: .3rem; }

.ck-sign-capture { display: flex; flex-direction: column; gap: .35rem; }
.ck-sign-capture .e-signature { border: 1px dashed var(--ck-border, #dee2e6); border-radius: .35rem; height: 8rem; }

/* P7 M3 - the firm's mark on the signing page, and the alternative to drawing.
   -------------------------------------------------------------------------------------------------
   THE ACCENT ARRIVES AS --ck-brand-accent, set inline on the signing shell by Sign.razor, because it
   is per-recipient and cannot be a token in section 1c. Every rule that uses it falls back to the
   product's own colour, so a workspace that has chosen nothing looks exactly as it did before.
   These are shape rules on our own classes - not .e-* colour rules, which section 1c forbids. */
.ck-sign-brand {
    max-height: 2.75rem;
    max-width: 60%;
    margin-bottom: .75rem;
    /* CONTAIN, never cover: a logo is stored exactly as supplied and nothing crops it here either. */
    object-fit: contain;
    object-position: left center;
}

/* P7 M4 - templates, labels and the usage list. Layout only; every colour is a token. */
.ck-template-list { list-style: none; margin: 0 0 .75rem; padding: 0; }
.ck-template-list > li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .75rem;
    flex-wrap: wrap;
    padding: .5rem 0;
    border-bottom: 1px solid var(--ck-border, #dee2e6);
}

.ck-template-list > li:last-child{ border-bottom: 0; }

.ck-template-actions { display: flex; gap: .5rem; flex-wrap: wrap; }

.ck-tag-panel { padding-block: .85rem; }
.ck-tag-row { display: flex; align-items: center; gap: .5rem; flex-wrap: wrap; margin: .35rem 0; }
.ck-tag { display: inline-flex; align-items: center; gap: .35rem; }

.ck-tag-remove {
    border: 0;
    background: transparent;
    color: inherit;
    font-size: 1rem;
    line-height: 1;
    padding: 0 0 0 .1rem;
    cursor: pointer;
}

.ck-usage-list { margin: 0; }
.ck-usage-list > div {
    display: flex;
    justify-content: space-between;
    gap: 1rem;
    padding: .4rem 0;
    border-bottom: 1px solid var(--ck-border, #dee2e6);
}
.ck-usage-list > div:last-child { border-bottom: 0; }
/* EVERY LABEL HERE IS BODY COLOUR, AND ONE OF THEM USED TO BE. Item 2.9 of the brief of
   23 September 2026: "Signatures collected" and "Completed" read as greyed out beside
   "Envelopes sent", which did not.

   THE DIFFERENCE WAS REAL AND WAS NEVER MEANT TO SAY WHAT IT SAID. Only the row carrying an
   explanatory sentence stepped up to the body colour, under RELEASE E ITEM I4, so that a muted
   label would not read as one wrapped line with the muted sentence beneath it. That reasoning was
   about ONE row and the side effect was on every other: a muted term beside a figure reads as
   inactive, and "Completed" is a LINK, so it read as a link that could not be followed.

   THE SUB-LINE STILL SEPARATES ITSELF WITHOUT THE CONTRAST. It is smaller as well as muted, which
   is what actually tells the two apart; the colour step was belt and braces that cost more
   elsewhere than it bought here. The modifier is gone rather than left as a rule that now sets
   what everything already has. */
.ck-usage-list dt { font-weight: 400; color: var(--ck-text, #0F2535); margin: 0; }
.ck-usage-explains {
    display: block;
    margin-top: .1rem;
    font-size: .8125rem;
    font-weight: 400;
    color: var(--ck-text-muted, #6c757d);
    max-width: 52ch;
}
.ck-usage-list dd { margin: 0; font-variant-numeric: tabular-nums; font-weight: 600; }

.ck-sign-upload { margin-top: .65rem; }

/* The label IS the button: InputFile's own input is taken out of the flow and the label around it
   carries the design system's button surface, so the control looks like every other button here. */

.ck-sign-upload-label {
    display: block;
    margin-bottom: .3rem;
    font-size: .8125rem;
    /* THE DARKENED VARIANT, NOT THE RAW ACCENT. This is the accent used as TEXT on the white card,
       so a firm's light brand colour would be unreadable to their own client. Sign.razor computes it
       through BrandAccent; the fallback chain is unchanged for a workspace that sets no colour. */
    color: var(--ck-brand-accent-text, var(--ck-text-muted, #6c757d));
}

.ck-sign-upload-preview {
    display: flex;
    align-items: center;
    gap: .6rem;
    margin: .5rem 0;
}

.ck-sign-upload-preview img {
    max-height: 3.5rem;
    max-width: 60%;
    object-fit: contain;
    border: 1px solid var(--ck-border, #dee2e6);
    border-radius: .35rem;
    padding: .25rem;
    background: #fff;
}

/* The one place the firm's colour touches the act itself: the rule above the signature block, so the
   page reads as theirs without recolouring a control. */
.ck-sign-shell .ck-sign-capture { border-top: 2px solid var(--ck-brand-accent, transparent); padding-top: .6rem; }

.ck-sign-submit { width: 100%; }
.ck-sign-note { margin: 0; font-size: .75rem; color: var(--ck-text-muted, #6c757d); }

@media (max-width: 900px) {
    .ck-sign-shell { grid-template-columns: 1fr; }
    /* The document stays above the act on a phone: scrolling past what you are agreeing to in order to
       reach the button is not the same as having been shown it. */
    .ck-sign-doc { min-height: 22rem; }
    .ck-sign-panel { margin-top: 1rem; }
}

/* The drawing pad when a picture has been chosen instead. Off-screen, NOT display:none — a Syncfusion
   control initialised while hidden comes up half-built, and this one has to survive being put away and
   brought back when the signer changes their mind. */
.ck-sign-pad--away {
    position: absolute;
    left: -9999px;
    width: 1px;
    height: 1px;
    overflow: hidden;
}

/* The add-a-picture step. A full card, because it replaces the document rather than sitting over it —
   the viewer must be out of the render tree for the uploader on it to reach the server at all. */
.ck-sign-mark-step { max-width: 34rem; }
.ck-sign-mark-step .e-upload { margin-top: .75rem; }
.ck-sign-mark-step .ck-sign-upload-preview img { max-height: 5rem; }

.ck-sign-mark-step-actions {
    display: flex;
    gap: .6rem;
    flex-wrap: wrap;
    margin-top: 1rem;
}

/* ============================================================================================
   19. THE SUPPORT CONSOLE (/chekadmin). P11 M1.
   --------------------------------------------------------------------------------------------
   Deliberately NOT the app's chrome. A support operator is not working inside a firm, and a
   screenshot of this must never be mistaken for a screenshot of a customer's workspace — hence a
   distinct bar colour rather than the product's own. Everything else reuses .ck-panel and the
   design system's tokens, because a second visual language is a second thing to maintain.
   ============================================================================================ */

.ck-admin-top {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: #12303f;
    color: #fff;
}

.ck-admin-brand { font-weight: 600; letter-spacing: .01em; }
.ck-admin-brand i { margin-right: 8px; opacity: .85; }

.ck-admin-exit {
    color: #cfe6ef;
    font-size: .8125rem;
    text-decoration: none;
}

.ck-admin-exit:hover { color: #fff; text-decoration: underline; }

.ck-admin-main { padding: 20px; }

.ck-admin-shell {
    display: flex;
    gap: 20px;
    align-items: flex-start;
}

.ck-admin-nav {
    flex: 0 0 200px;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.ck-admin-nav-group {
    margin-top: 14px;
    font-size: .6875rem;
    letter-spacing: .08em;
    text-transform: uppercase;
    color: var(--ck-text-muted, #6c757d);
}

.ck-admin-nav-group:first-child { margin-top: 0; }

.ck-admin-nav-item {
    padding: 6px 10px;
    border-radius: 6px;
    font-size: .875rem;
    color: var(--ck-body, #212529);
    text-decoration: none;
}

.ck-admin-nav-item:hover { background: rgba(0, 0, 0, .04); }

.ck-admin-nav-item.active {
    background: rgba(23, 162, 192, .12);
    font-weight: 600;
}

.ck-admin-body { flex: 1 1 auto; min-width: 0; }

/* The console is an operator's tool on a desk, not a phone. Below this the nav stacks above the
   body rather than pretending a two-column layout fits. */
@media (max-width: 768px) {
    .ck-admin-shell { flex-direction: column; }
    .ck-admin-nav { flex: 1 1 auto; width: 100%; }
}

/* ============================================================================================
   20. THE COMMAND PALETTE. P12 M1; opened from the top bar since P13, with no keyboard shortcut.
   --------------------------------------------------------------------------------------------
   A jump, not a page. Anchored near the top rather than centred, because the list grows downward
   and a centred box moves under the reader's eye as they type.
   ============================================================================================ */

.ck-palette-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(10, 30, 40, .45);
    z-index: 2000;
    display: flex;
    justify-content: center;
    align-items: flex-start;
    padding-top: 12vh;
}

.ck-palette {
    width: min(640px, calc(100vw - 32px));
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 18px 48px rgba(0, 0, 0, .28);
    overflow: hidden;
}

.ck-palette-input {
    width: 100%;
    border: 0;
    border-bottom: 1px solid var(--ck-border, #dee2e6);
    padding: 16px 18px;
    font-size: 1rem;
    outline: none;
}

/* A <div> of <div> rows rather than a <ul> of <li>. A section header is not a list item, and putting
   one inside a <ul> is invalid markup that browsers repair differently; the list semantics bought
   nothing here that the header costs. */
.ck-palette-results { margin: 0; padding: 6px; max-height: 52vh; overflow-y: auto; }

.ck-palette-row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 9px 12px;
    border-radius: 6px;
    cursor: pointer;
}

/* Hover and keyboard selection are the SAME state, so the two cannot disagree about which row
   Enter would open — a palette where the mouse highlights one row and Enter opens another is
   worse than one with no hover at all. */
.ck-palette-row.active { background: rgba(23, 162, 192, .12); }

/* Section header - "Did you mean", and from P12 M4 "Go to" and "Help & docs". Quiet on purpose: a
   divider that happens to be readable, not a heading competing with the rows under it. The size and
   weight are Chek Audit's own .ck-palette-section values, because the two sheets must not drift.
   No dark variant: this sheet has no [data-theme] rule anywhere, so one here would be dead CSS and
   would make this the only selector in the file pretending otherwise. */
.ck-palette-section {
    font-size: .65625rem;
    font-weight: 600;
    letter-spacing: .01em;
    color: var(--ck-text-muted, #6c757d);
    padding: 10px 10px 3px;
}

.ck-palette-section:first-child { padding-top: 4px; }

/* A help row is a step quieter than a destination - P12 M4. An article is something you read, not
   somewhere you go, and the icon carries that distinction without another word of chrome. */
.ck-palette-row i.help { color: var(--ck-text-muted, #6c757d); }

.ck-palette-title { font-weight: 500; }
.ck-palette-sub { color: var(--ck-text-muted, #6c757d); font-size: .8125rem; margin-left: auto; }
.ck-palette-note { padding: 18px; color: var(--ck-text-muted, #6c757d); font-size: .875rem; }

/* THE TICKET REFERENCE, ON THE PANEL THAT CONFIRMS A REQUEST ARRIVED. P23.
   Mono, because it is a reference identifier - the second of the two uses chek-fonts.css reserves IBM
   Plex Mono for, alongside keyboard chips. Sized and spaced to be read off a screen and typed into an
   email by somebody who may have no other copy of it. */
.ck-support-reference {
    display: inline-flex;
    align-items: baseline;
    gap: 10px;
    margin: 4px 0 18px;
    padding: 10px 16px;
    border: 1px solid var(--ck-border, #dee2e6);
    border-radius: 8px;
    background: var(--ck-surface-subtle, #F8FBFD);
}

.ck-support-reference-label {
    font-size: .75rem;
    letter-spacing: .06em;
    text-transform: uppercase;
    color: var(--ck-text-muted, #6c757d);
}

.ck-support-reference strong {
    font-family: 'IBM Plex Mono', monospace;
    font-size: 1.125rem;
    letter-spacing: .04em;
    color: var(--ck-text, #0F2535);
}

/* ============================================================================================
   21. THE HELP CENTRE. P12 M3.
   NOTE ON TOKEN NAMES: the ones here are --ck-text, --ck-text-muted, --ck-blue and --ck-border,
   which are the names section 1 actually DECLARES. Sections 20-22 first shipped referring to
   --ck-muted, --ck-heading and --ck-primary, none of which exist anywhere in this sheet, so every
   rule using them silently painted from its fallback literal and the brand palette was not in
   force. A var() with a fallback cannot fail loudly, which is what made it survive a walk-through:
   the colours looked plausible because the fallbacks were copied from the tokens. Check a new token
   name against section 1 before using it.
   FOUR REFERENCES ARE STILL UNDECLARED and are deliberately left alone, because pointing them at a
   real token would CHANGE what renders and they are all on or near the signing page, which is not
   this phase's to restyle: --ck-surface-muted (2447, 2580), --ck-warning-text (2591),
   --ck-brand-accent (2698, 2720) and --ck-body (2815). Each currently paints from its fallback.
   --ck-brand-accent at 2720 falls back to `transparent`, so giving it a value draws a border that
   is not there today.
   Tokens only, no .e-* colour rules, no !important. Prose gets a real measure: a paragraph
   running the full width of a wide panel is read by nobody twice.
   ============================================================================================ */

.ck-help-search { max-width: 480px; }

/* THE SEARCH IS A GET FORM SINCE THE HELP CENTRE WENT PUBLIC (4 October 2026): a box and a button on one
   row, wrapping under each other on a phone rather than squeezing the box to nothing. */
.ck-help-search-form {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    align-items: center;
}

.ck-help-search-form .ck-input { flex: 1 1 220px; }

/* A STRANGER READS HELP INSIDE THE PUBLIC SITE'S FRAME, where the app's panels sit on the site's band.
   Capped at the measure the app gives them, so an article is not a 1200px line on a wide screen. */
.ck-help-public {
    max-width: 960px;
    margin: 0 auto;
}

.ck-help-category {
    font-size: 1rem;
    font-weight: 600;
    margin: 0 0 14px;
    color: var(--ck-text, #2c3e50);
}

/* auto-FIT, not auto-fill. With one article in a category, auto-fill leaves the card 260px wide in a
   full-width panel and the section reads as broken rather than short; auto-fit collapses the empty
   tracks so the card takes the row, and three articles still lay out in three columns. */
.ck-help-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 12px;
}

.ck-help-card,
.ck-help-hit {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 14px 16px;
    border: 1px solid var(--ck-border, #e6e9ef);
    border-radius: 8px;
    text-decoration: none;
    color: inherit;
    transition: border-color .15s ease, background-color .15s ease;
}

.ck-help-card:hover,
.ck-help-hit:hover {
    border-color: var(--ck-blue, #17a2c0);
    background: rgba(23, 162, 192, .05);
}

.ck-help-card-title,
.ck-help-hit-title {
    font-weight: 600;
    display: flex;
    align-items: center;
    gap: 9px;
}

.ck-help-card-excerpt,
.ck-help-hit-excerpt {
    color: var(--ck-text-muted, #6c757d);
    font-size: .875rem;
    line-height: 1.5;
}

.ck-help-hits {
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ck-help-body {
    max-width: 68ch;
    line-height: 1.65;
}

.ck-help-body h2 {
    font-size: 1.0625rem;
    font-weight: 600;
    margin: 26px 0 10px;
    color: var(--ck-text, #2c3e50);
}

.ck-help-body h2:first-child { margin-top: 0; }

.ck-help-body p { margin: 0 0 14px; }

.ck-help-body ul { margin: 0 0 14px; padding-left: 22px; }

.ck-help-body li { margin-bottom: 7px; }

/* A COMMAND SOMEBODY IS MEANT TO COPY.

   IBM Plex Mono, which section 1 already reserves for keyboard chips and reference identifiers - a
   command line is the same class of thing: characters that have to be read one at a time, where an
   l and a 1 telling each other apart decides whether the paste works.

   overflow-x rather than a wrap, and the .ck-help-body max-width of 68ch is exactly why: an openssl
   invocation is longer than that, and a wrapped command is one somebody copies with a newline in the
   middle of it. Scrolling one block sideways is the tables-and-code exception rather than a page that
   scrolls sideways. */
.ck-help-command {
    margin: 0 0 14px;
    padding: 10px 12px;
    border: 1px solid var(--ck-border, #e6e9ef);
    border-radius: var(--ck-radius-sm, 6px);
    background: var(--ck-surface-subtle, #F8FBFD);
    color: var(--ck-text, #2c3e50);
    font-family: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: .8125rem;
    line-height: 1.5;
    overflow-x: auto;
}

/* A VERSION OF THE CERTIFICATE ARTICLE SAYS WHICH IT IS AND PRINTS ITS HASH (4 October 2026). Muted and small:
   it is provenance beneath the text, not part of it. The hash wraps rather than running off a phone. */
.ck-help-version-note {
    font-size: .875rem;
    color: var(--ck-text-muted, #6c7a89);
    margin-top: 16px;
}

.ck-help-version-note .ck-ref { white-space: normal; word-break: break-all; }

.ck-help-back {
    margin: 22px 0 0;
    padding-top: 16px;
    border-top: 1px solid var(--ck-border, #e6e9ef);
    font-size: .875rem;
}

/* ============================================================================================
   22. THE HELP EDITOR, in the support console. P12 M4.
   ============================================================================================ */

.ck-help-admin-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    max-width: 720px;
    margin-top: 18px;
}

/* SHAPE, NOT COLOUR, so an .e-* selector is the right tool here - and the extra classes are specificity
   rather than decoration. CssClass lands on Syncfusion's WRAPPER, so the height has to reach the
   textarea inside it; the sheet's own rule for that element is .e-float-input.e-control-wrapper
   textarea, which outranks a plain .ck-help-admin-body textarea and leaves an article body being typed
   into three visible lines. Measured in the browser, not guessed: the rule was present and losing. */
.ck-help-admin-body.e-multi-line-input.e-control-wrapper textarea,
textarea.ck-help-admin-body {
    min-height: 340px;
    font-family: inherit;
    line-height: 1.6;
}

.ck-help-admin-note {
    margin: -8px 0 0;
    color: var(--ck-text-muted, #6c757d);
    font-size: .8125rem;
    line-height: 1.55;
}

.ck-help-admin-actions {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-top: 16px;
}

.ck-help-admin-preview { font-size: .875rem; margin-left: 4px; }

.ck-help-admin-problems { margin: 8px 0 0; padding-left: 20px; }

/* ============================================================================================
   23. CONTACT SUPPORT. P13.
   ============================================================================================ */

.ck-support-form { max-width: 720px; }

.ck-support-fields {
    display: flex;
    flex-direction: column;
    gap: 18px;
    margin-top: 18px;
}

/* Same specificity problem as the help editor: CssClass lands on Syncfusion's wrapper and the sheet's
   own rule for the textarea inside it outranks a plain descendant selector. See section 22. */
.ck-support-message.e-multi-line-input.e-control-wrapper textarea,
textarea.ck-support-message {
    min-height: 200px;
    font-family: inherit;
    line-height: 1.6;
}

.ck-support-note {
    margin: -6px 0 0;
    color: var(--ck-text-muted, #6c757d);
    font-size: .8125rem;
    line-height: 1.55;
}

.ck-support-actions { margin-top: 6px; }

.ck-support-problems { margin: 8px 0 0; padding-left: 20px; }

/* A ticket's message, shown exactly as it was typed. <pre> so the writer's own line breaks survive -
   somebody describing steps numbered one per line should not have them run together - with wrapping on,
   because a <pre> that scrolls sideways is a message nobody reads to the end of. */
.ck-ticket-message {
    margin: 16px 0 0;
    padding: 16px 18px;
    background: var(--ck-surface-subtle, #f8f9fa);
    border: 1px solid var(--ck-border, #e6e9ef);
    border-radius: 8px;
    font-family: inherit;
    font-size: .9375rem;
    line-height: 1.65;
    white-space: pre-wrap;
    word-break: break-word;
    max-width: 72ch;
}

/* A bulk-action bar above a grid that has tick boxes. It sits inside the panel so it reads as part of
   the list rather than as page chrome, and it always says how many are selected - a button that acts on
   an invisible count is one nobody presses twice. */

.ck-bulk-count {
    color: var(--ck-text-muted, #6c757d);
    font-size: .875rem;
}

/* A request list is five columns of badges, counts and short phrases plus one name, and on a wide
   monitor it has no business spanning two thousand pixels: whichever column is left to absorb the
   slack ends up as a field of white, and it looks wrong whether that column is the name or the one
   holding an em dash.

   THE CARD IS CAPPED, NOT THE GRID. A max-width on .e-grid loses - Syncfusion sets the grid's own
   width, so the rule is overridden and nothing visibly changes, which is exactly what happened on the
   first attempt. Capping the panel constrains the grid by giving it less room to fill, which it
   respects because it is simply laying out inside its container. */
/* NO CAP ANY MORE, and the reason is the column set. An earlier version capped this panel because six
   columns stranded on a wide monitor looked like a mostly-empty table - but the answer to a table with
   too little in it is not a narrower table, it is more columns. There are fourteen now, with a chooser
   for the ones a firm does not want, so the list earns the width it is given. */
.ck-list-panel { width: 100%; }

/* THE ONE COLUMN THAT HAS TO BE READ RATHER THAN SCANNED. Item 8: the membership history's Detail
   column is the sentence that answers "what actually happened", and a grid clips by default - measured
   at 275px against a sentence that needs about 420, so it arrived as "Removed from the workspace, as…"
   with the part that matters cut off. It wraps rather than being widened, because the four columns
   beside it are an instant, a word and two addresses and none of them has slack to give.

   SCOPED ON A WRAPPER THIS PAGE OWNS, because SfGrid takes a CssClass and drops it - the rendered root
   carries `sf-grid e-grid e-control` and nothing of ours, so a rule written against a grid class loses
   silently. `.ck-list-panel` is the same technique two pages over. */
.ck-history-panel .e-grid td.e-rowcell { white-space: normal; line-height: 1.45; vertical-align: top; }

/* AND AN ADDRESS OR A LONG KIND BREAKS RATHER THAN WIDENING ITS COLUMN. 29 September 2026: the grid was
   sized to its longest address and its longest badge, 1,105px in a panel of 798 at a laptop, so it
   scrolled sideways at every width below 1920. An address has nothing a browser may break at, so it is
   allowed to break anywhere; a badge is nowrap in Bootstrap, so it is allowed to wrap here. */
.ck-history-panel .e-grid td.e-rowcell { overflow-wrap: anywhere; }
.ck-history-panel .e-grid td.e-rowcell .badge { white-space: normal; text-align: left; }

/* PEOPLE AND LABELS AS CHIPS. A row can carry four or five names and a wall of comma-separated text is
   read by nobody; a chip per person is scannable, and the colour says where each one is without the
   name being read at all. They wrap, because a request with five recipients is normal. */
.ck-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
    padding: 2px 0;
}

.ck-chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: .75rem;
    font-weight: 500;
    line-height: 1.6;
    white-space: nowrap;
}

.ck-chip i { font-size: .625rem; opacity: .7; }

/* Waiting on them, and they can act now. */
.ck-chip-waiting { background: #fdf0d5; color: #7a5300; }

/* On the request but not their turn yet - no link exists for them, so nothing is expected. */
.ck-chip-later { background: #eef1f5; color: #5c6b7a; }

.ck-chip-done { background: #dff3e6; color: #1c6b3a; }

.ck-chip-refused { background: #fae3e3; color: #8b2020; }

/* Somebody inside the firm, not a signer. */
.ck-chip-firm { background: #e3f1f6; color: #146b80; }

/* A chip inside a sized grid cell. It was clipped at the cell edge with no sign that anything was
   missing - an email address cut mid-domain. It shrinks to the cell and ends in an ellipsis instead,
   and the page puts the whole value in the tooltip. */
.ck-chip-fit { max-width: 100%; min-width: 0; }
.ck-chip-fit > span { overflow: hidden; text-overflow: ellipsis; }

.ck-chip-tag { background: #eceef3; color: #4a5568; }

/* The clock beside an overdue subject. Muted red rather than a badge - it marks a row without
   competing with the state column, which is the thing that actually says what is going on. */
.ck-overdue-mark {
    color: #c0392b;
    margin-right: 6px;
    font-size: .75rem;
}

/* NOBODY HAS OPENED IT. Item 3. Beside the overdue clock in the Subject cell, and deliberately a
   different colour from it: overdue is a deadline this business set and missed, and an unopened link
   is usually a message that never arrived. Amber rather than red, because the second is a thing to
   look into and the first is already late. */
.ck-unopened-mark {
    color: var(--ck-warning);
    margin-right: 6px;
    font-size: .75rem;
}

/* THE SAME FACT AS A CELL RATHER THAN A MARK. Second-week block: a column of "Not yet" down a list of
   forty is what a firm scans, and it is painted the same colour as the mark beside the subject so the
   two read as one signal rather than two. */
.ck-unopened-cell { color: var(--ck-warning); font-weight: 600; }

/* THE ROUND OF CHASING, ABOVE THE LIST IT ACTS ON. It is a panel rather than a toolbar button because
   the confirmation NAMES every recipient, and a list of names needs somewhere to be. */
.ck-chase { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }

/* THE NAMES, CAPPED SO A ROUND OF A HUNDRED DOES NOT PUSH THE BUTTON OFF THE SCREEN. Scrolling a list
   somebody is being asked to agree to is better than a page they have to scroll past to answer. */
.ck-chase-people { max-height: 240px; overflow-y: auto; }

/* The selection banner above a list with tick boxes. It lights up once something is ticked so the bar
   is not a permanent strip of chrome saying nothing. */
.ck-select-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    padding: 10px 14px;
    border-radius: 8px;
    background: var(--ck-surface-subtle, #f8f9fa);
    border: 1px solid transparent;
    transition: background-color .15s ease, border-color .15s ease;
}

.ck-select-bar.on {
    background: rgba(23, 162, 192, .08);
    border-color: rgba(23, 162, 192, .3);
}

.ck-select-count {
    color: var(--ck-text-muted, #6c757d);
    font-size: .875rem;
    margin-right: auto;
}

/* WHAT A BULK DELETE IS ABOUT, NAMED INSIDE THE QUESTION. A confirmation that only counts is one
   people learn to press through, so the drafts are listed - and a firm that has let fourteen pile up
   can let forty, so the list SCROLLS rather than growing the dialog past the bottom of the window,
   where the buttons would be. Capped in rem so it follows the type scale. */
.ck-confirm-list {
    margin: 0 0 12px;
    padding-left: 20px;
    max-height: 13rem;
    overflow-y: auto;
    font-size: .875rem;
    color: var(--ck-text, #0F2535);
}

.ck-confirm-list li {
    /* A REQUEST TITLE IS TYPED BY A FIRM AND ONE WILL EVENTUALLY BE A FILE NAME WITH NO SPACES IN IT.
       Nothing in a long unbroken string gives a browser a place to break, so it would run out of the
       dialog rather than wrap. */
    overflow-wrap: anywhere;
    margin-bottom: 2px;
}

/* Full screen: the list fills the window, over everything else. Escape is not wired to it on purpose -
   the toolbar button toggles back, and a page that traps a keystroke people use to dismiss things is
   worse than one more click. */
.ck-fullscreen {
    position: fixed;
    inset: 0;
    z-index: 1200;
    margin: 0;
    border-radius: 0;
    overflow: auto;
    background: var(--ck-surface, #FFFFFF);
}

/* Sub-tabs inside a view (Active / Overdue). Underline rather than a pill, so they read as two views of
   one thing rather than two separate destinations - which is exactly what they are. */
.ck-subtabs {
    display: flex;
    gap: 22px;
    margin: 0 0 16px;
    border-bottom: 1px solid var(--ck-border, #e6e9ef);
}

.ck-subtab {
    padding: 8px 2px 10px;
    font-size: .875rem;
    font-weight: 500;
    color: var(--ck-text-muted, #6c757d);
    text-decoration: none;
    border-bottom: 2px solid transparent;
    margin-bottom: -1px;
}

.ck-subtab:hover { color: var(--ck-text, #212529); }

.ck-subtab.on {
    color: var(--ck-blue, #17a2c0);
    border-bottom-color: var(--ck-blue, #17a2c0);
    font-weight: 600;
}

/* The per-row ellipsis. Quiet until hovered, because a row of grey dots down the left of a list is
   chrome nobody asked for - the actions behind it are occasional by definition. */
.ck-row-menu.e-dropdown-btn,
.ck-row-menu.e-dropdown-btn.e-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--ck-text-muted, #6c757d);
    padding: 4px 8px;
    min-width: 0;
}

.ck-row-menu.e-dropdown-btn:hover { background: var(--ck-surface-subtle, #f1f3f6); }

/* THE LIST TOOLBAR: SMALL, MUTED, AND ALL OF IT IN THE TOP-RIGHT OF THE CARD. It used to be two
   labelled buttons on the left and two controls on the right, which read as four unrelated things and
   gave the loudest treatment to the two used least. They are occasional tools on a page whose subject
   is the list, so they sit together in the corner and say what they are on hover.

   THE SPACER IS HIDDEN RATHER THAN MOVED. Syncfusion injects an e-spacer of its own between the custom
   items and Search/ColumnChooser and its position is not ours to choose; removing it and justifying the
   row to the end puts every item on the right in DOM order, whatever the grid injects and wherever it
   decides to inject it. */
/* SCOPED ON OUR OWN PANEL, NOT ON THE GRID. SfGrid takes a CssClass and drops it: the rendered root
   carries sf-grid e-grid e-control ... and nothing of ours, so every rule written against it lost
   silently - no error, just a toolbar that stayed where it was. The wrapper is markup this page owns,
   which is the one selector Syncfusion cannot rewrite. */
.ck-list-panel .e-toolbar .e-toolbar-items { justify-content: flex-end; }
.ck-list-panel .e-toolbar .e-toolbar-item.e-spacer { display: none; }

.ck-list-panel .e-toolbar {
    border: none;
    background: transparent;
}

.ck-list-panel .e-toolbar .e-tbar-btn,
.ck-list-panel .e-toolbar .e-tbar-btn.e-btn {
    background: transparent;
    border: none;
    box-shadow: none;
    color: var(--ck-text-muted, #6c757d);
}

.ck-list-panel .e-toolbar .e-tbar-btn:hover,
.ck-list-panel .e-toolbar .e-tbar-btn.e-btn:hover {
    background: var(--ck-surface-subtle, #f1f3f6);
    color: var(--ck-text, #212529);
}

.ck-list-panel .e-toolbar .e-tbar-btn .e-btn-icon {
    font-size: 17px;
    color: inherit;
}

/* The column chooser keeps its word. It is the one control here whose icon alone would not say what it
   does, and "Columns" is what somebody hunting a hidden column is looking for. */
.ck-list-panel .e-toolbar .e-cc-toolbar .e-tbar-btn {
    font-size: .8125rem;
    font-weight: 500;
}

/* The grid's own search, which narrows the rows already on screen. Kept narrow so it reads as part of
   the corner rather than as the page's main search - that one is the glass in the top bar. */
.ck-list-panel .e-toolbar .e-input-group.e-search {
    max-width: 190px;
}

/* A stat card that opens the requests behind it. Only the ones with something to show are links, so
   the affordance is never a promise of an empty list. */
.ck-stat-card--link {
    text-decoration: none;
    color: inherit;
    position: relative;
    transition: border-color var(--ck-transition), box-shadow var(--ck-transition),
                transform var(--ck-transition);
}

.ck-stat-card--link:hover {
    color: inherit;
    border-color: var(--ck-blue, #17a2c0);
    box-shadow: var(--ck-shadow-md, 0 6px 16px rgba(16, 32, 48, .10));
    transform: translateY(-1px);
}

/* The chevron is the only thing that appears on hover. The card already reads as a card; what a reader
   needs to learn is that this one goes somewhere. */
.ck-stat-go {
    position: absolute;
    right: 16px;
    top: 50%;
    transform: translateY(-50%);
    font-size: 13px;
    color: var(--ck-text-muted, #6c757d);
    opacity: 0;
    transition: opacity var(--ck-transition);
}

.ck-stat-card--link:hover .ck-stat-go,
.ck-stat-card--link:focus-visible .ck-stat-go { opacity: 1; }

/* The window a dashboard card carried in with it. Stated, because a list narrowed by something nobody
   can see is a list that looks wrong - a firm would count the rows and conclude the page is broken. */
.ck-window-chip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 10px;
    margin-bottom: 14px;
    padding: 9px 14px;
    border-radius: 8px;
    font-size: .875rem;
    background: var(--ck-blue-ghost, rgba(23, 162, 192, .1));
    color: var(--ck-text-secondary, #495057);
}

.ck-window-chip i {
    font-size: .75rem;
    color: var(--ck-blue-active, #12889f);
}

.ck-window-chip span { margin-right: auto; }

/* A usage figure that opens its own requests. Underlined on hover only, so a column of numbers does not
   read as a column of links when most of them are zero. */
.ck-usage-list dd a {
    color: inherit;
    text-decoration: none;
    border-bottom: 1px dashed var(--ck-border, #e6e9ef);
}

.ck-usage-list dd a:hover {
    color: var(--ck-blue-active, #12889f);
    border-bottom-color: currentColor;
}

/* A miniature of the signing page, on the branding settings page. It borrows .ck-sign-brand for the
   logo so the two cannot drift on the one thing that matters most - how big the mark renders. */
.ck-brand-preview {
    padding: 18px;
    border-radius: 10px;
    border: 1px solid var(--ck-border, #e6e9ef);
    background: var(--ck-surface, #FFFFFF);
    max-width: 420px;
}

.ck-brand-preview-nologo {
    display: block;
    font-size: .8125rem;
    color: var(--ck-text-muted, #6c757d);
    margin-bottom: 10px;
}

.ck-brand-preview-line {
    margin: 12px 0 10px;
    font-size: .8125rem;
    color: var(--ck-text-secondary, #495057);
}

/* Paints from the same custom property the signing page's own button reads, so the colour shown here is
   the colour that renders there. */
.ck-brand-preview-button {
    display: inline-block;
    padding: 8px 18px;
    border-radius: var(--ck-radius-sm, 6px);
    font-size: .875rem;
    font-weight: 600;
    /* WHICHEVER INK READS ON THE FIRM'S COLOUR, rather than always white. One of dark and white
       always clears AA against any colour, so this never has to refuse anybody's brand. */
    color: var(--ck-brand-accent-ink, #FFFFFF);
    background: var(--ck-brand-accent, var(--ck-blue, #17a2c0));
}

/* One decision on the security page: what it is set to, and both sides of it. The two columns are
   deliberately equal weight - a layout that made the cost a footnote would be making the same argument
   the page exists to stop. */
.ck-tradeoff-head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 6px;
}

.ck-tradeoff-head .ck-panel-title { margin: 0; }

.ck-tradeoff-setting {
    font-size: .8125rem;
    font-weight: 600;
    padding: 3px 11px;
    border-radius: 999px;
    background: var(--ck-blue-ghost, rgba(23, 162, 192, .1));
    color: var(--ck-blue-active, #12889f);
    white-space: nowrap;
}

.ck-tradeoff-explains {
    margin: 0 0 14px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ck-text-secondary, #495057);
}

.ck-tradeoff-sides {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 14px;
}

.ck-tradeoff-side {
    padding: 12px 14px;
    border-radius: 8px;
    background: var(--ck-surface-subtle, #f8f9fa);
}

.ck-tradeoff-side p {
    margin: 0;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ck-text-secondary, #495057);
}

.ck-tradeoff-side-label {
    display: block;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    margin-bottom: 7px;
}

.ck-tradeoff-gains .ck-tradeoff-side-label { color: #1c6b3a; }

.ck-tradeoff-costs .ck-tradeoff-side-label { color: #a33a2c; }

.ck-tradeoff-footnote,
.ck-tradeoff-where {
    margin: 12px 0 0;
    font-size: .8125rem;
    color: var(--ck-text-muted, #6c757d);
}

.ck-tradeoff-where { margin-top: 8px; }

/* Statements rather than settings - the things this product deliberately will not claim. */
.ck-settings-plainlist {
    margin: 0;
    padding-left: 20px;
}

.ck-settings-plainlist li {
    margin-bottom: 12px;
    font-size: .875rem;
    line-height: 1.6;
    color: var(--ck-text-secondary, #495057);
}

.ck-settings-plainlist li:last-child { margin-bottom: 0; }

/* The three figures after an import. Side by side rather than in a sentence, because the one somebody
   is looking for is the middle one - how many did NOT go in. */
.ck-import-tally {
    display: flex;
    flex-wrap: wrap;
    gap: 22px;
    margin-bottom: 16px;
}

.ck-import-figure {
    font-size: .875rem;
    color: var(--ck-text-secondary, #495057);
}

.ck-import-figure strong {
    display: block;
    font-size: 1.5rem;
    line-height: 1.2;
    color: var(--ck-text, #212529);
}

.ck-import-good strong { color: #1c6b3a; }

.ck-import-bad strong { color: #c0392b; }

/* A settings row whose control is too wide to sit beside its label - a text area, mostly. */
.ck-settings-row-stacked {
    display: block;
}

.ck-settings-row-stacked .ck-settings-label {
    margin-bottom: 10px;
}

/* SPECIFIC ENOUGH TO BEAT SYNCFUSION'S OWN RULE. A bare `.ck-settings-textarea textarea` loses to
   `.e-multi-line-input.e-control-wrapper textarea`, which is how the help editor's box ended up the
   wrong height twice. Matching their selector's shape is what wins. */
.ck-settings-textarea.e-multi-line-input.e-control-wrapper textarea {
    min-height: 96px;
    line-height: 1.5;
}

/* A MESSAGE BOX GROWS WITH WHAT IS IN IT. Reported 1 October 2026: the covering message on a request and
   the body of an email template opened two lines tall, so a picked template showed its first sentence
   and a scrollbar, and the resize grip that would have fixed it is a few pixels in a corner nobody finds.
   field-sizing sizes the box to its text between the two limits; the grip still works past the maximum.
   A browser without field-sizing gets the minimum, which is already four times what it had. Same
   selector shape as the rule above, for the same reason: a bare descendant selector loses. */
.ck-message-textarea.e-multi-line-input.e-control-wrapper textarea {
    field-sizing: content;
    min-height: 140px;
    max-height: 420px;
    line-height: 1.5;
}

/* A worked example of what somebody else will see, beside the controls that decide it. The firm cannot
   open one of their own signing links to check, so a preview is the only way to look. */
.ck-settings-preview {
    margin-top: 18px;
    padding-top: 16px;
    border-top: 1px dashed var(--ck-border, #e6e9ef);
}

.ck-settings-preview-label {
    display: block;
    font-size: .75rem;
    font-weight: 600;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ck-text-muted, #6c757d);
    margin-bottom: 10px;
}

/* Inside the preview the help block is not the page footer, so it does not centre itself. */
.ck-settings-preview .ck-sign-help {
    margin: 0;
    max-width: none;
}

/* The way to ask a person, at the foot of the signing page. Quiet - it is not competing with the
   document - but always present, because a signer who cannot get past a check and finds nobody to ask
   simply stops, and that is the one failure this page can produce that nobody ever hears about. */
.ck-sign-help {
    /* IT IS A FOOTER, AND WHAT MAKES IT ONE IS `flex-direction: column` ON ITS PARENT - see
       `.ck-sign-bg`. This block is a SIBLING of `.ck-sign-shell`, not a child of it, so nothing here
       interacts with the shell's grid; the centring below is all that is left to do once the parent
       stacks rather than rows. The Recipient-signing-page settings screen tells a firm this is "shown
       at the foot of the signing page", so the layout has to match the promise. */
    max-width: 760px;
    margin: 24px auto 40px;
    padding: 16px 18px;
    border-radius: 10px;
    background: var(--ck-surface-subtle, #f8f9fa);
    border: 1px solid var(--ck-border, #e6e9ef);
}

.ck-sign-help-title {
    display: block;
    font-weight: 600;
    font-size: .9375rem;
    margin-bottom: 6px;
    color: var(--ck-text, #212529);
}

.ck-sign-help-title i {
    margin-right: 6px;
    color: var(--ck-text-muted, #6c757d);
}

.ck-sign-help-text {
    margin: 0 0 6px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ck-text-secondary, #495057);

    /* A firm types this, so it can arrive as one very long unbroken string. */
    overflow-wrap: anywhere;
}

.ck-sign-help-text:last-child { margin-bottom: 0; }

/* A NOTE FROM CHEKSIGN, after a signature. The signer offer brief, part C, 7 October 2026.
   QUIET AND NEUTRAL, AND IT READS NONE OF THE BUSINESS'S OWN PROPERTIES. `--ck-brand-accent` and its two
   partners are set on `.ck-sign-bg` where the business's branding applies, and nothing below reads them: a
   note drawn in the business's colour under the business's logo would read as the business's message,
   which is the one thing it must not be. Product tokens only, so it looks the same on every signing page.
   Under the help block and set apart by a rule, so the confirmation and the copies come first. */
.ck-sign-offer {
    /* FULL WIDTH UP TO THE HELP BLOCK'S CAP, so the two line up: centred by auto margins in a flex column,
       a box with no width shrinks to its words and sat 50px narrower than the block above it. */
    width: 100%;
    box-sizing: border-box;
    max-width: 760px;
    margin: -16px auto 40px;
    padding: 16px 18px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-top: 3px solid var(--ck-blue-border);
}

.ck-sign-offer-title {
    margin: 0 0 6px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ck-text);
}

.ck-sign-offer-text {
    margin: 0 0 6px;
    font-size: .875rem;
    line-height: 1.55;
    color: var(--ck-text-secondary);
}

/* A LINK, BECAUSE IT GOES SOMEWHERE: a new tab on the sign-up page. Drawn as a small button in the
   product's own strong blue, which carries white text at a readable contrast. */
.ck-sign-offer-link {
    display: inline-block;
    margin: 6px 0 10px;
    padding: 9px 16px;
    min-height: 44px;
    line-height: 26px;
    border-radius: var(--ck-radius-sm);
    background: var(--ck-blue-strong);
    color: var(--ck-text-inverse);
    font-size: .875rem;
    font-weight: 600;
    text-decoration: none;
}

.ck-sign-offer-link:hover,
.ck-sign-offer-link:focus-visible {
    background: var(--ck-blue-strong-hover);
    color: var(--ck-text-inverse);
}

.ck-sign-offer-small {
    margin: 0;
    font-size: .8125rem;
    color: var(--ck-text-muted);

    /* The business's name is typed by them, so it can arrive as one long unbroken string. */
    overflow-wrap: anywhere;
}

/* ============================================================================================
   24. THE ACCOUNT MENU, behind the avatar. P16.
   Everything about the signed-in person lives here, sign out at the bottom - the most destructive
   control in the chrome does not get the most prominent position.
   ============================================================================================ */

.ck-usermenu { position: relative; }

.ck-usermenu-panel {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    padding: 6px;
    border-radius: 10px;
    background: var(--ck-surface, #FFFFFF);
    border: 1px solid var(--ck-border, #e6e9ef);
    box-shadow: var(--ck-shadow-lg, 0 12px 28px rgba(16, 32, 48, .16));
    z-index: 1100;

    /* CLOSED IS display:none, not opacity - an invisible panel that still catches clicks sits over the
       page swallowing them, and nothing about that looks like a bug worth reporting. */
    display: none;
}

.ck-usermenu.open .ck-usermenu-panel { display: block; }

.ck-usermenu-head {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px 12px;
    border-bottom: 1px solid var(--ck-border, #e6e9ef);
    margin-bottom: 6px;
}

.ck-usermenu-who { display: flex; flex-direction: column; min-width: 0; }

.ck-usermenu-name {
    font-size: 15px;
    font-weight: 600;
    color: var(--ck-text, #212529);
}

/* The REAL address, under a name that was guessed from it. */
.ck-usermenu-email {
    font-size: 13px;
    color: var(--ck-text-muted, #6c757d);
    overflow: hidden;
    text-overflow: ellipsis;
}

/* P44. THE BILLING CHIP IN THE ACCOUNT MENU.
   It is pushed to the end of the row rather than sitting against the label, because the label is what
   somebody reads and the chip is what they notice — and it only ever exists when something is wrong,
   so it is painted in the warning colour rather than the brand one. A chip in --ck-blue would read as
   a count of something good. */
.ck-usermenu-chip {
    margin-left: auto;
    padding: 1px 8px;
    border-radius: 999px;
    background: var(--ck-warning, #E08C1A);
    color: #fff;
    font-size: .6875rem;
    font-weight: 600;
    letter-spacing: .01em;
    white-space: nowrap;
}

.ck-usermenu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    width: 100%;
    padding: 9px 12px;
    border: none;
    background: transparent;
    border-radius: 6px;
    font-family: inherit;
    font-size: 15px;
    color: var(--ck-text-secondary, #495057);
    text-align: left;
    text-decoration: none;
    cursor: pointer;
    transition: background-color var(--ck-transition);
}

.ck-usermenu-item i { width: 15px; font-size: 14px; opacity: .75; text-align: center; }

.ck-usermenu-item:hover {
    background: var(--ck-blue-ghost, rgba(23, 162, 192, .08));
    color: var(--ck-blue-active, #12798f);
}

/* Sign out is separated and red on hover: it is the one item here that ends something. */
.ck-usermenu-signout {
    margin: 6px 0 0;
    padding-top: 6px;
    border-top: 1px solid var(--ck-border, #e6e9ef);
}

.ck-usermenu-signout .ck-usermenu-item:hover {
    background: rgba(192, 57, 43, .08);
    color: #c0392b;
}

/* ============================================================================================
   25. SETTINGS: the hub, and the pages under it. P17.
   ============================================================================================ */

.ck-settings-search { max-width: 420px; }

/* EVERY CARD THE SAME SIZE, ACROSS ROWS AND NOT ONLY WITHIN ONE. `align-items: start` let each card
   take the height of its own contents, so a group of two settings sat shorter than the group of three
   beside it and the page read as a ragged pile rather than a directory. `grid-auto-rows: 1fr` sizes
   every implicit row to the tallest card in the whole grid, and the columns were already equal - so the
   only thing that varies between cards is what is written in them. */
.ck-settings-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
    grid-auto-rows: 1fr;
    gap: 16px;
}

.ck-settings-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 14px;
    background: var(--ck-surface, #FFFFFF);
    border: 1px solid var(--ck-border, #e6e9ef);
    border-radius: 10px;
}

.ck-settings-card-head {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 12px;
    font-size: .9375rem;
    font-weight: 600;
    color: var(--ck-text, #212529);
}

.ck-settings-card-head i { color: var(--ck-blue, #17a2c0); font-size: .875rem; }

.ck-settings-links { list-style: none; margin: 0; padding: 0; }

.ck-settings-links li { margin: 0 0 7px; }

.ck-settings-links a { font-size: .875rem; }

/* An entry whose page does not exist yet. Deliberately not a link - a plausible name that bounces to
   Home reads as the app being broken, which is what the dead "Documents" nav item taught. */
.ck-settings-soon {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: .875rem;
    color: var(--ck-text-muted, #6c757d);
}

.ck-settings-soon-tag {
    font-size: .625rem;
    text-transform: uppercase;
    letter-spacing: .04em;
    padding: 1px 6px;
    border-radius: 999px;
    background: var(--ck-surface-subtle, #f1f3f6);
    border: 1px solid var(--ck-border, #e6e9ef);
}

/* The way back, on every settings page. */
.ck-crumb {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 14px;
    font-size: .8125rem;
    color: var(--ck-text-muted, #6c757d);
}

/* THE WAY BACK, BUILT AS A CONTROL RATHER THAN AS A WORD IN A TRAIL.
   ------------------------------------------------------------------------------------------------
   This was `.ck-crumb a` — an unstyled link the colour of the muted text beside it — and a walk-through
   found somebody asking for "a back button on each page" while looking straight at it. A breadcrumb
   states a LOCATION; it takes a reader who already knows the convention to see a control in one, and the
   people who most need the way out are the ones who do not.
   It carries the same border, radius and hover as every real control on these pages, because that is the
   vocabulary the page has already taught them. */
.ck-crumb-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 5px 12px 5px 10px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
    color: var(--ck-text);
    font-weight: 600;
    text-decoration: none;
    transition: background-color .15s ease, border-color .15s ease, color .15s ease;
}

.ck-crumb-back:hover,
.ck-crumb-back:focus-visible {
    border-color: var(--ck-blue-border);
    background: var(--ck-blue-ghost);
    color: var(--ck-blue-active);
    text-decoration: none;
}

.ck-crumb-back i { font-size: .625rem; opacity: .75; }

/* Where you are. Still muted, because it is not a control and must not read as one. */
.ck-crumb-here { color: var(--ck-text-muted); }

.ck-crumb i { font-size: .5625rem; opacity: .6; }

.ck-settings-panel { max-width: 860px; }

/* A label beside its control, stacking on a narrow screen. The explanation sits UNDER the label rather
   than as a tooltip: a setting that needs a sentence to be safe should not hide that sentence. */
.ck-settings-row {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 24px;
    padding: 16px 0;
    border-bottom: 1px solid var(--ck-border, #e6e9ef);
}

.ck-settings-row:last-of-type { border-bottom: none; }

.ck-settings-label { display: flex; flex-direction: column; gap: 4px; max-width: 420px; }

.ck-settings-label span {
    font-size: .8125rem;
    color: var(--ck-text-muted, #6c757d);
    line-height: 1.5;
}

/* A SETTING THAT IS NOT ONE. P24.
   ------------------------------------------------------------------------------------------------
   A45's rule with one shape instead of three. The row is an ordinary .ck-settings-row so it lines up
   with the real settings above and below it; only the control position differs, and it differs
   deliberately — a struck chip carrying the ANSWER rather than an absence.

   DELIBERATELY NOT STYLED AS A DISABLED CONTROL. A greyed switch reads as "not yet" and sends somebody
   looking for how to turn it on; these have no downstream and are not going to. The ban glyph and the
   muted ground say "this is settled", which is the true thing. */
.ck-not-offered .ck-settings-label strong { color: var(--ck-text-secondary, #4A6475); }

.ck-not-offered-answer {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 8px;
    max-width: 380px;
}

.ck-not-offered-chip {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 5px 12px;
    border: 1px dashed var(--ck-border-strong, #B8D2DC);
    border-radius: 999px;
    background: var(--ck-surface-subtle, #F8FBFD);
    color: var(--ck-text-secondary, #4A6475);
    font-size: .8125rem;
    font-weight: 600;
    white-space: nowrap;
}

/* DASHED, not solid: every real control on these pages has a solid edge, so the outline itself carries
   "this is not one of those" before a word is read. */
.ck-not-offered-chip i { font-size: .75rem; color: var(--ck-text-muted, #8BA8B6); }

/* RIGHT-ALIGNED AS A BLOCK, LEFT-ALIGNED AS TEXT, and both halves are needed. The block has to sit in
   the control column, under the chip, or it stops reading as this row's answer. The TEXT has to keep a
   straight left edge, because `text-align: right` on three lines of prose gives a ragged left margin the
   eye has to find again on every line — fine for a two-word chip, bad for a sentence. Measured on
   /settings/output, where both reasons run to three lines. */
.ck-not-offered-detail {
    margin: 0;
    font-size: .8125rem;
    line-height: 1.5;
    color: var(--ck-text-muted, #8BA8B6);
    text-align: left;
}

@media (max-width: 700px) {
    /* The row already stacks; the chip goes back to reading left-to-right when it does. */
    .ck-not-offered-answer { align-items: flex-start; max-width: none; }
}

.ck-settings-example {
    margin: 14px 0 0;
    padding-top: 14px;
    border-top: 1px solid var(--ck-border, #e6e9ef);
    font-size: .875rem;
    color: var(--ck-text-muted, #6c757d);
}

.ck-settings-matrix { width: 100%; border-collapse: collapse; margin-top: 6px; }

.ck-settings-matrix th {
    text-align: left;
    font-size: .6875rem;
    text-transform: uppercase;
    letter-spacing: .05em;
    color: var(--ck-text-muted, #6c757d);
    padding: 8px 10px;
    border-bottom: 1px solid var(--ck-border, #e6e9ef);
}

.ck-settings-matrix td {
    padding: 12px 10px;
    border-bottom: 1px solid var(--ck-border, #e6e9ef);
    vertical-align: top;
}

.ck-settings-matrix tr:last-child td { border-bottom: none; }

.ck-matrix-col { width: 110px; text-align: center; }

.ck-matrix-note {
    display: block;
    margin-top: 3px;
    font-size: .8125rem;
    color: var(--ck-text-muted, #6c757d);
}

.ck-settings-note { margin-top: 18px; }

.ck-settings-actions { margin: 18px 0 0; }

/* The control that makes the decision, on the card that argues it. P22.
   -------------------------------------------------------------------------------------------------
   The security dashboard used to end each card with a link to the page that owned the setting, which
   left it reading as an essay about settings rather than a place to change them. The control sits
   between the two sides and the "everything else is under…" line, so the argument is read first and
   the decision is made without leaving. */
.ck-tradeoff-control {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-top: 14px;
    padding-top: 14px;
    border-top: 1px solid var(--ck-border, #e6e9ef);
}

.ck-tradeoff-control .ck-label { margin: 0; }

/* A switch says nothing on its own, so the words beside it carry the setting. */
.ck-switch-label { font-size: .875rem; color: var(--ck-text, #212529); }

/* ============================================================================================
   THE PLACEMENT OVERLAY — where each person's mark will be drawn, shown ON the document.
   --------------------------------------------------------------------------------------------
   These rules are injected by chek-app.js into the element Syncfusion draws each page into, so the
   positions are PERCENTAGES and the browser handles zoom and scroll. Nothing here is rendered by Blazor.

   POINTER-EVENTS IS LOAD-BEARING, NOT COSMETIC. The whole placement flow is a click on the page: a box
   that accepted the click would make the area around every placed field dead, so placing a second field
   beside the first would silently do nothing. The layer and the marks are both transparent to the mouse,
   and `title` still works because a tooltip does not need a hit test.

   SIX TINTS, matching FieldPalette.Count. Raising one without the other paints a box from no rule at all —
   no background, which reads as a defect rather than as a wrap. A test holds the two together.
   ============================================================================================ */
.ck-field-layer {
    position: absolute;
    inset: 0;
    pointer-events: none;
    overflow: hidden;
    /* ABOVE THE VIEWER'S OWN LAYERS, AND MOVING A BOX NEVER WORKED WITHOUT IT. Overnight, item 4, measured:
       the viewer draws its text layer (.e-pv-text-layer) into the same page element AFTER this layer, so
       with no stacking order it sat on top, and the element under a box's grip was the text layer. Every
       drag and resize landed on the document instead of the box, silently; only the service path had ever
       been tested. The layer stays pointer-events: none, so a click anywhere else still places a box. */
    z-index: 10;
}

/* THE BOX CAN BE TAKEN HOLD OF, AND THE LAYER AROUND IT STILL CANNOT.
   ------------------------------------------------------------------------------------------------
   pointer-events was none on the mark, which is why a placed field could never be moved or resized -
   the only correction was Remove and aim again. The reason it was none is still true of the LAYER:
   the whole flow is a click on the page, so a transparent sheet that swallowed clicks would make
   every part of the document dead. So the layer stays none and the mark takes its own events back.

   What this costs is placing a new field ON TOP of an existing one, which now moves the old one
   instead. That is the trade, and it is the right way round: a box in the way can be dragged aside,
   where before it could only be deleted. */
.ck-field-mark {
    position: absolute;
    box-sizing: border-box;
    border: 1.5px solid var(--ck-mark);
    border-radius: 3px;
    pointer-events: auto;
    cursor: grab;
    touch-action: none;
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 0 4px;
    overflow: hidden;
    color: var(--ck-mark);
    /* Enough to read the page through, enough to see the box against white. */
    background: color-mix(in srgb, var(--ck-mark) 16%, transparent);
}

/* A BOX TOO NARROW FOR ITS WORDS SHOWS ITS INITIALS ALONE. 7 October 2026. chekFieldOverlay._fit decides, by whether
   the words are being cut; the whole "who · what" is the box's tooltip. */
.ck-field-mark.is-tight .ck-field-mark-what { visibility: hidden; }

/* HELD. Denser while it is being moved, so the one being dragged is obvious among its neighbours -
   which is the case this exists for, since boxes that overlap are exactly what somebody is sorting
   out. */
.ck-field-mark.is-moving {
    cursor: grabbing;
    background: color-mix(in srgb, var(--ck-mark) 30%, transparent);
    box-shadow: 0 2px 10px rgba(15, 37, 53, .25);
}

/* THE CORNER THAT RESIZES. A real element rather than an edge test on the mark: "am I within six
   pixels of the corner" is arithmetic that goes wrong at every zoom the viewer offers, and a grip is
   a thing somebody can see and aim at. Small, because the box it lives in is often only 48pt tall. */
.ck-field-mark-grip {
    position: absolute;
    right: -1px;
    bottom: -1px;
    width: 11px;
    height: 11px;
    border: 1.5px solid var(--ck-mark);
    border-radius: 2px;
    background: var(--ck-surface, #FFFFFF);
    cursor: nwse-resize;
    touch-action: none;
}

/* The initials, so the tint never carries the identity alone — a seventh recipient shares a colour.
   ------------------------------------------------------------------------------------------------
   THE HUE IS A CUSTOM PROPERTY AND NOT `currentColor`, AND THAT IS A BUG FIX RATHER THAN A STYLE.
   `background: currentColor` resolves against the COMPUTED `color` OF THE SAME ELEMENT, so setting
   `color: #FFFFFF` here to knock the letters out also turned the background white — white on white. The
   initials rendered, sat in the DOM, and were read back correctly by script; the screen showed an empty
   chip. Measured in a browser, not reasoned about: `getComputedStyle` returned rgb(255,255,255) for both.
   A variable is immune because it is inherited from the tint class and nothing here overrides it. */
.ck-field-mark-tag {
    flex: none;
    font-size: 10px;
    font-weight: 700;
    line-height: 1;
    padding: 2px 4px;
    border-radius: 2px;
    background: var(--ck-mark);
    color: #FFFFFF;
}

/* WHAT THE BOX DRAWS, IN THE PAGE'S OWN TEXT COLOUR RATHER THAN THE PERSON'S. It was the person's
   colour on that colour's own tint, and FieldColourVerification measured six of the seven at 3.99 to
   4.29:1 - under AA at 10px. The border and the initials chip still carry whose box it is. */
.ck-field-mark-what {
    color: var(--ck-text);
    font-size: 10px;
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* One hue per recipient, set on `color` so the border, the fill and the tag all follow from it.
   Chosen to stay distinguishable on white paper and apart from each other for the commonest forms of
   colour blindness — they differ in lightness as well as hue, so a greyscale print still separates them. */
.ck-field-mark--0 { --ck-mark: #6D4AC8; }  /* violet  */
.ck-field-mark--1 { --ck-mark: #C2410C; }  /* coral   */
.ck-field-mark--2 { --ck-mark: #0E7490; }  /* teal    */
.ck-field-mark--3 { --ck-mark: #A16207; }  /* ochre   */
.ck-field-mark--4 { --ck-mark: #9333EA; }  /* magenta */
.ck-field-mark--5 { --ck-mark: #15803D; }  /* green   */

/* THE SIGNER'S OWN BOXES, ON THE SIGNING PAGE. One colour meaning "you", not one of the six: those
   tell a firm its people apart, and which of them a signer happens to be means nothing to the signer.
   Other people's boxes are not drawn for a signer at all; see FieldPalette.Mine. */
.ck-field-mark--mine { --ck-mark: var(--ck-blue-strong); }

/* ON THE SIGNING PAGE AND THE PREVIEW A BOX IS A MARKER, NOT A CONTROL: no grab cursor, no grip, and
   clicks go through to the document, which is what a reader is trying to scroll. */
.ck-field-layer.is-readonly .ck-field-mark { pointer-events: none; cursor: default; }
.ck-field-layer.is-readonly .ck-field-mark-grip { display: none; }

/* A PERSON'S COLOUR IN A LIST, with their initials on it, so the list beside a document and the boxes
   on it say the same thing. White on the colour, which PaletteContrastVerification holds to AA for
   every tint, and the initials mean the colour is never the only signal. */
.ck-person-tint { background: var(--ck-mark); color: #FFFFFF; }

.ck-person-swatch {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 24px;
    height: 20px;
    padding: 0 5px;
    margin-right: 6px;
    border-radius: 3px;
    font-size: .6875rem;
    font-weight: 700;
    line-height: 1;
    vertical-align: middle;
}

/* ============================================================================================
   22. THE CREATION GALLERY — /compose. P28.

   The six shipped starters spent a day behind an SfDropDownList: written, seeded, reachable,
   tested, and invisible in a walk-through of the product. A dropdown shows one line at a time,
   cannot be searched, and gives a firm no way to see what it is choosing between.

   These are LAYOUT PRIMITIVES under exception 3, not a widget standing in for a Syncfusion
   control — Syncfusion has no card. The tile itself is a real <button>, so it is reachable by
   keyboard and announced as the action it performs.
   ============================================================================================ */

/* THE GALLERY'S SEARCH IS THE WIDTH OF THE GALLERY, which is what the reference does and the
   reason is discoverability rather than taste: a 260px box beside a heading, above a grid of
   twenty-two covers, reads as part of the heading rather than as the way through the grid.
   The icon is FontAwesome 5 — fa-search, NOT FA6's fa-magnifying-glass, which renders an empty
   box here and nothing in the console. */
/* THE TWO OTHER WAYS TO START, on the page + Template opens. Written as rows rather than as tiles
   on purpose: a tile here would read as a third gallery item, and there are exactly two of these. */

/* colour: inherit, because a heading inside a link takes the link colour otherwise and this one
   has to read as a heading. A50's trap, which this sheet has now met four times. */

/* THE GALLERY'S TABS ARE BUTTONS WEARING THE PAGE'S TAB CLASS. The four tabs above them are links,
   because each is an address; a category narrows one catalogue and is not a place, so these are
   controls. The class carries the look either way - what a button needs is its own chrome removed. */

button.ck-scope-tab {
  background: none;
  border: 0;
  border-bottom: 2px solid transparent;
  font-family: inherit;
  cursor: pointer;
}

button.ck-scope-tab.is-current { border-bottom-color: var(--ck-blue, #47BED9); }

/* A control that reads as a sentence rather than as a button, for the one inside a line of prose. */

/* AMBER RATHER THAN RED. This is not an error and not a refusal — it is a document that belongs to
   the business, and a red chip on a perfectly good template teaches somebody to ignore red.
   The colour is set here because .ck-gallery-tag paints its children muted, which is right for the
   category beside it and wrong for the one word on the tile that has to be read. */
/* THE SAME SHAPE AS THE INTERNAL CHIP AND A DIFFERENT COLOUR, because they say different things:
   one is about who may receive this, the other about what this product cannot do for it. */

.ck-gallery-search {
  position: relative;
  margin-bottom: 14px;
}

.ck-gallery-search > i {
  position: absolute;
  left: 12px;
  top: 50%;
  transform: translateY(-50%);
  z-index: 2;
  font-size: .875rem;
  color: var(--ck-text-muted);
  /* THE ICON SITS OVER THE FIELD, so a click on it must reach the field underneath rather than
     landing on a decoration and doing nothing. */
  pointer-events: none;
}

/* SPECIFICITY, NOT !important: the Syncfusion theme pads this input through
   .e-input-group.e-control-wrapper .e-input, which beats a two-class selector — measured at 8px
   with the rule below present and matching, so the placeholder sat under the icon. */
.ck-gallery-search .e-input-group.e-control-wrapper input.e-input {
  padding-left: 32px;
}

/* auto-fill rather than auto-fit: with two tiles, auto-fit stretches them across the whole row
   and the blank tile ends up the width of a panel. Cards keep their size and the row fills up. */
/* =================================================================================================
   P40 - THE BUILDER AND THE THREE STEPS. A document on the left, its workflow on the right.
   -------------------------------------------------------------------------------------------------
   THE POINT OF THIS BLOCK IS THAT NONE OF IT IS A DIALOG. Choosing a template used to throw a modal
   over the gallery with six controls in it and the document nowhere on screen; composing a request
   was one long page holding every control at once. Both are a paper pane and a sidebar now, with the
   one action in a bar across the top. */

/* THE BAR AND THE SIDEBAR DO NOT SCROLL AWAY, BECAUSE WHAT THEY HOLD IS THE WHOLE POINT OF THE
   PAGE. These documents run to several pages; with the bar in the flow, "Use this template" and the
   step somebody is on left the screen on the first scroll, and the workflow they are building went
   with them. Both stick against the WINDOW, which is what scrolls here — `.main-panel` is a flex
   column with min-height:100vh and `.content` does not scroll on its own, so an `overflow` container
   would have to be invented for them to stick inside.

   --ck-build-bar-h is what the bar actually MEASURES, and the first value written here was a guess
   at 50px that was wrong by eleven: the row is as tall as the Syncfusion button in it, not as tall
   as the back-arrow beside it. 61.3px measured, rounded up, so the sidebar below clears it by the
   16px it is written to. A bar that ever gains a second line moves this number with it. */
:root {
  --ck-build-bar-h: 62px;

  /* WHAT SITS BETWEEN THE SIDEBAR AND THE BOTTOM OF THE WINDOW, and every part of it had to be
     measured: 16px of gap under the bar, the 40px `.content` pads at the foot of every page, and
     the 56px FOOTER below that. The footer is the one that caught this out — reserving for the
     padding alone still let the last 55px of scroll drag the sidebar up behind the bar, because a
     sticky element stops at its container's bottom and the container ends where the footer begins. */
  --ck-build-reserve: 112px;
}

.ck-build-bar {
  position: sticky;
  top: var(--topnav-height);
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 16px;
  padding: 10px 14px;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-surface, #FFFFFF);
}

/* NO COVER STRIP ABOVE IT, AND THAT WAS WORTH MEASURING RATHER THAN ASSUMING. The first version
   painted a band over the 20px `.content` pads above this bar, on the reasoning that a scrolling
   document would show through between the app's bar and this one. It cannot: this one sticks at
   exactly `--topnav-height`, which is where the app's bar ENDS, so the gap is zero the moment it
   sticks and the band was drawn underneath an opaque bar at z-index 1029. A rule that decides
   nothing is worse than no rule, because the next person has to work out what it was for. */

/* THE TITLE SHRINKS BEFORE ANYTHING ELSE DOES. P46 (W8): at 1150px the bar ran past the end of its
   own panel — the primary button clipped on the right and the page scrolling sideways by 20px, which
   is A53's shape for the fourth time in this file: laid out past the container, painted, reporting a
   bounding box, and not on the screen. A request title is a firm's own sentence and can be any length,
   so it is the one thing here that must be allowed to end in an ellipsis. */
.ck-build-name {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  flex: 0 1 auto;
  font-size: .9375rem;
}

.ck-build-name strong {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* AND THE ACTION NEVER SHRINKS, because a button whose words are cut off is a button nobody presses. */
.ck-build-bar > .e-btn { flex: 0 0 auto; }

.ck-build-back {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: var(--ck-radius-sm, 4px);
  color: var(--ck-text-secondary, #4A6475);
  text-decoration: none;
}

.ck-build-back:hover { background: var(--ck-surface-subtle, #F8FBFD); color: var(--ck-text, #0F2535); }

/* THE STEPS SIT BETWEEN THE TITLE AND THE ACTION, which is where a reader looking at the button
   already is. Pushed right so the button stays at the end of the bar at every width.

   A REACHED STEP IS A CONTROL AND THE REST ARE NOT, and the difference has to be visible without
   hovering: the current one is filled, the ones behind it carry the text colour of something you can
   press, and the ones ahead are muted and disabled. This replaced a "Step 2 of 3" label, which said
   where you were and gave somebody who had added the wrong person nowhere to go. */

/* WHAT ONE PERSON IS ASKED FOR, under their row rather than beside it: the row already runs name,
   address and group to the edge of a 22rem sidebar, and a fourth column would truncate the address
   that a signing link is sent to. */
.ck-side-ask { margin: 0 0 6px 40px; max-width: 160px; }

/* ONE PERSON'S CARD, AND EVERYTHING DECIDED ABOUT THEM IS INSIDE IT.
   ------------------------------------------------------------------------------------------------
   The ask used to be a lone control indented 40px under a name, belonging visibly to nothing - and
   the group and the identity check were not on this step at all. A border is what makes four
   controls read as four answers about ONE person rather than as a column of unrelated pickers. */

/* A LABEL ABOVE ITS CONTROL, NOT BESIDE IT. At 22rem a label and a control on one line leave the
   control too narrow to read a tier name in, which is the thing it exists to show. */
.ck-side-field { margin-bottom: 8px; }

/* EVERY CONTROL IN THIS PANEL IS THE SAME WIDTH AS EVERY BOX IN IT.
   ------------------------------------------------------------------------------------------------
   The contact picker wore .ck-side-ask, which is indented under an avatar and capped at 160px, so
   beside the full-width Full name and Email boxes it read as a smaller, centred, different kind of
   thing. A form is a column of controls of one width; anything narrower has to be narrower FOR a
   reason a reader can see. */

/* INSIDE A CARD THE NOTE IS NOT HANGING OFF AN AVATAR, so it does not carry the avatar's indent. */

/* TWO COLUMNS, AND THE SIDEBAR IS FIXED WHILE THE PAPER TAKES THE SLACK. A document that narrows as
   the workflow grows would reflow while somebody reads it. */
/* THE GRID IS AT LEAST AS TALL AS THE SIDEBAR WANTS TO BE, OR THE LAST INCH OF SCROLL DRAGS IT UP
   BEHIND THE BAR. A sticky element cannot be pushed past the bottom of its own container, so with a
   document barely taller than the workflow beside it, the final stretch of the page pulled "Build
   your workflow" up under the toolbar — measured at the end of the scroll, not reasoned about. This
   min-height and the sidebar's max-height are the SAME expression on purpose, so the grid can never
   end above the point the sidebar is trying to stop at. */
/* A GRID ITEM'S MIN-WIDTH IS AUTO, SO ITS CONTENTS CAN PUSH THE COLUMN WIDER THAN THE COLUMN. That
   is what turns a wide editor toolbar into a page that scrolls sideways; the pane scrolls itself
   instead. P46 (W8). */
.ck-build > * { min-width: 0; }

.ck-build {
  display: grid;
  grid-template-columns: 1fr 22rem;
  gap: 20px;
  align-items: start;
  min-height: calc(100vh - var(--topnav-height) - var(--ck-build-bar-h) - var(--ck-build-reserve));
}

.ck-build-paper {
  padding: 22px;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius, 6px);
  background: var(--ck-surface, #FFFFFF);
}

/* THE EDITOR NEEDS A HEIGHT IN PIXELS, WHICH IS WHY THIS EXISTS AT ALL.
   ------------------------------------------------------------------------------------------------
   SfDocumentEditorContainer is given Height="100%", and a percentage height resolves against a
   parent that HAS one — inside a grid item that sizes to its content there is nothing to be 100% of,
   so the control collapses and the document is there, correct, and nought pixels tall. Measuring it
   would report a box; the screen would show a blank pane, which is this codebase's most-repeated
   shape and the reason the number is here rather than left to the layout.

   The same window arithmetic the sidebar uses, so the two panes end level. */

/* BELOW THE BAR, AND NEVER TALLER THAN WHAT IS LEFT OF THE WINDOW. The workflow form is long — a
   name, the people, an identity check, three step cards and whatever notes the document earns — so
   without the cap its last control sits below the fold with nothing able to reach it: the page
   itself has stopped scrolling by then, because the sidebar is stuck. It scrolls itself instead. */
.ck-build-side {
  position: sticky;
  top: calc(var(--topnav-height) + var(--ck-build-bar-h) + 16px);
  max-height: calc(100vh - var(--topnav-height) - var(--ck-build-bar-h) - var(--ck-build-reserve));
  overflow-y: auto;
  padding: 18px;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius, 6px);
  background: var(--ck-surface, #FFFFFF);
}

.ck-side-title { margin: 0 0 4px; font-size: 1.125rem; font-weight: 700; }
.ck-side-sub { margin: 0 0 16px; font-size: .8125rem; color: var(--ck-text-secondary, #4A6475); }

/* A STEP CARD IS NOT A BUTTON. It states what a step will do; where it carries an action that action
   is a link inside it, so nothing about the card invites a click that does nothing. */
.ck-step-card {
  display: flex;
  gap: 12px;
  margin-bottom: 10px;
  padding: 12px 14px;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-surface, #FFFFFF);
}

.ck-step-icon { color: var(--ck-blue-active, #1A90AB); }
.ck-step-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.ck-step-name { font-size: .875rem; font-weight: 700; }
.ck-step-detail { font-size: .75rem; line-height: 1.4; color: var(--ck-text-secondary, #4A6475); }

.ck-side-note {
  margin-top: 14px;
  padding: 10px 12px;
  border-left: 3px solid var(--ck-blue, #47BED9);
  border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-blue-ghost, #EBF8FC);
  font-size: .75rem;
  line-height: 1.5;
}

.ck-side-note--warn {
  border-left-color: #8C3A3A;
  background: #FBF3F3;
}

.ck-side-list { margin: 6px 0 0; padding-left: 18px; }
.ck-side-wide { width: 100%; margin-top: 12px; }

/* ONE PERSON, ONE ROW. Initials rather than a photograph, because this product has never had one and
   an empty avatar circle reads as a picture that failed to load. */

/* IN A RECIPIENT CARD THE AVATAR IS THAT PERSON'S BOX COLOUR. Two classes, so it beats the ghost
   background above whatever order the two rules sit in. */

.ck-side-add { display: flex; flex-direction: column; gap: 8px; margin: 14px 0; }

/* THE PICKER'S EMPTY STATE CARRIES THE WAY TO ADD SOMEBODY NEW. 30 September 2026. A search that finds
   nobody is the moment the person is not in the book, so the control to add them is where the search
   ended rather than somewhere else on the panel. */
.ck-picker-empty { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 10px 12px; }
.ck-picker-empty > span { color: var(--ck-text-muted); font-size: .875rem; }
.ck-picker-add { font-weight: 600; }

/* The new-contact popup: the same stacked labelled rows as the side panel, with room between them. */
.ck-new-person .ck-labelled { margin-bottom: 12px; }

/* What they are asked for and when, on one line: two short controls read as one question about one
   person, where two full-width boxes read as two more things to fill in. */
.ck-side-add-row { display: flex; gap: 8px; align-items: center; }

/* ONE LINE OF THE WORKFLOW. A role and a person read the same here on purpose: the difference is
   whether it carries an address, and that is said in words rather than by two shapes. */
.ck-side-roles { margin: 8px 0; padding: 0; list-style: none; }

.ck-side-roles li {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 0;
  border-bottom: 1px solid var(--ck-border, #DDE8EE);
}

.ck-side-role-name { font-size: .8125rem; font-weight: 600; }

.ck-side-role-what {
  flex: 1 1 auto;
  min-width: 0;
  font-size: .6875rem;
  color: var(--ck-text-muted, #8BA8B6);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.ck-side-field { margin: 14px 0; }

/* THE SHIPPED LINE-UP, ONE ROW PER ROLE THE WORKFLOW NAMES.
   --------------------------------------------------------------------------
   Release E item 5. A sentence saying "Client, then Partner" over a panel that
   offered one slot is what let a request go out with no countersignature; each
   line says who is standing in it, and an empty one says "nobody yet" in the
   colour this sheet already uses for something that still needs doing. */

/* WHO THE DOCUMENT IS WRITTEN FOR, DRAWN ON TWO STEPS FROM ONE FRAGMENT. P46 (W5). Ruled off, because
   on the recipients step it sits between the people and the form that adds one and would otherwise
   read as part of whichever it was nearer. */

/* TAKING SOMEBODY OFF. P46 (W2). Quiet until it is wanted: this is the least likely thing anybody
   does on a card, and a destructive control drawn as loudly as the four questions above it would be
   the first thing a reader's eye lands on. */

.ck-side-add-row .ck-side-ask { margin: 0; flex: 1 1 auto; max-width: none; }

/* A PHONE HAS NO ROOM FOR A SIDEBAR BESIDE A PAGE, so the workflow goes under the document rather
   than squeezing it - the same call .ck-sign-shell makes, and for the same reason. */
@media (max-width: 900px) {
  .ck-build { grid-template-columns: 1fr; min-height: 0; }

  /* STACKED, SO IT STOPS BEING A SIDEBAR AND STOPS BEHAVING LIKE ONE. Stuck to the top of a phone
     screen it would cover the document it is about, and capped to the window it would scroll inside
     a page that is already scrolling — two scrollbars for one list. */
  .ck-build-side { position: static; max-height: none; overflow: visible; }

  /* THE BAR WRAPS RATHER THAN PUSHING ITS BUTTON PAST THE EDGE. A53's shape, which this codebase has
     now paid for three times: an element laid out past the end of its container renders, reports
     itself visible, has a bounding box, and is not on the screen. */
  .ck-build-bar { flex-wrap: wrap; }
}

/* P40 - THE SELECTION BAR. Picking a starter is not using it, so the gallery says what is picked
   and offers the next step rather than acting on the click. */
.ck-select-bar {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0 0 16px;
  padding: 10px 14px;
  border: 1px solid var(--ck-blue-border, #C4E8F4);
  border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-blue-ghost, #EBF8FC);
}

.ck-select-count { font-size: .8125rem; color: var(--ck-text, #0F2535); }
/* THE ACTIONS SIT TOGETHER AT THE RIGHT. This was on the primary button alone, so a second action
   placed before it sat stranded in the middle of the bar with Continue at the far edge - two buttons
   about one selection, drawn as though they were about different things. */

/* P45 - NAMING A REQUEST THAT HAS NOTHING TO BE NAMED AFTER. Every other tile names the request from
   the document or the file; the blank page has neither, so the box appears on that one selection and
   nowhere else. It wraps rather than squeezing the bar, because at phone width a label, a box and two
   buttons on one line is a box four characters wide. */
.ck-select-bar { flex-wrap: wrap; }

/* THE COPY THEY HAVE IS NOT THE ONE WE SHIP. Release C walk, item 1.
   Two buttons and a sentence, so it takes the whole width of the bar rather than sitting in the row
   with "Clear selection" - a question is not another control. The bar already wraps, so this is one
   flex item that happens to be the width of the line. */

/* The chosen tile. A ring rather than a tint, because the page under it is the document and a tint
   would change what the cover looks like - which is the one thing a firm is comparing. */
.ck-tile.is-current .ck-tile-page {
  border-color: var(--ck-blue, #47BED9);
  box-shadow: 0 0 0 2px var(--ck-blue, #47BED9), 0 6px 18px rgba(15, 37, 53, .16);
}

/* P36 - THE CATEGORY PILLS. Grey and filled until chosen, then outlined in the brand colour, which
   is the reference's treatment and reads at a glance in a row of fourteen. Distinct from
   .ck-scope-tab above them ON PURPOSE: those name which LIBRARY is open and these narrow what is in
   it, and drawing two different questions the same way is how somebody presses one expecting the
   other. */
.ck-pills {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 16px;
}

.ck-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  /* A VISIBLE EDGE, because the fill alone cannot carry the shape. --ck-surface-subtle is #F8FBFD on
     a #FFFFFF panel: three points of difference, which renders as text in a row rather than as a row
     of pills. The reference fills its pills with a real grey; this palette has no such token and
     inventing one would drift from Chek Audit, so the border does the work. */
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: 999px;
  background: var(--ck-surface-subtle, #F8FBFD);
  color: var(--ck-text-secondary, #4A6475);
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1;
  cursor: pointer;
  transition: background .12s ease, border-color .12s ease, color .12s ease;
}

.ck-pill:hover { background: var(--ck-blue-ghost, #EBF8FC); color: var(--ck-text, #0F2535); }

.ck-pill.is-current {
  background: var(--ck-surface, #FFFFFF);
  border-color: var(--ck-blue, #47BED9);
  color: var(--ck-blue-active, #1A90AB);
}

.ck-pill-count {
  font-size: .6875rem;
  font-weight: 700;
  color: var(--ck-text-muted, #8BA8B6);
}

.ck-pill.is-current .ck-pill-count { color: var(--ck-blue-active, #1A90AB); }

/* The caret is the half that says which way this control goes; "More" that never becomes "Less" is
   the one people press twice. */
.ck-pill--more { color: var(--ck-text-muted, #8BA8B6); }
.ck-pill--more i { font-size: .625rem; }

/* =================================================================================================
   P36 - THE STARTER TILE. A page, and its name under it.
   -------------------------------------------------------------------------------------------------
   WHAT WAS WRONG, MEASURED RATHER THAN FELT. The old thumbnail asked for `aspect-ratio: 816/1056`
   and then capped itself with `max-height: 148px`. At the width the grid actually gives a tile the
   page wanted to be 261px tall, so the cap was not trimming an edge case - it was throwing away 113
   pixels and INVERTING the shape, rendering every cover 202x148 at a ratio of 1.36. A landscape
   swatch. Nothing on the screen looked like paper, which is most of why a gallery of 221 real
   documents read as a colour chart.

   An aspect-ratio and a max-height on one element are two rules for one number, and the loser is
   silent: the box still has a size, still paints, still reports itself visible. Set the ratio and
   let the column width decide the rest.

   THE SECOND HALF WAS THAT THERE WERE TWO KINDS OF TILE. A covered starter drew a cover; a firm's
   own document drew a 16px file icon inside a card of a different height. Ragged rows, two species,
   in the one grid where a firm compares one document with another. Every tile is a page now,
   including the ones with nothing to put on the page but a name. */

.ck-tile {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0;
  border: 0;
  background: none;
  text-align: center;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

.ck-tile:disabled { cursor: default; opacity: .6; }

/* THE PAGE ITSELF. The border and the lifted shadow are what make it read as a sheet rather than as
   a coloured rectangle - the reference's plainest templates are a white page with four lines of grey
   text on them and they still read as documents, which is the whole point. */
.ck-tile-page {
  position: relative;
  display: block;
  width: 100%;
  aspect-ratio: 816 / 1056;
  overflow: hidden;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-surface, #FFFFFF);
  color: #FFFFFF;
  transition: box-shadow .12s ease, transform .12s ease;
}

.ck-tile:hover:not(:disabled) .ck-tile-page,
.ck-tile:focus-visible .ck-tile-page {
  box-shadow: 0 6px 18px rgba(15, 37, 53, .16);
  transform: translateY(-2px);
}

.ck-tile:focus-visible { outline: none; }
.ck-tile:focus-visible .ck-tile-page { border-color: var(--ck-blue, #47BED9); }

/* Section 22's finding, and it applies here for the same reason: the title is the one element that
   does not inherit, and white on the pale ground is a thumbnail with nothing on it. */
.ck-tile-page--dark { color: var(--ck-text, #0F2535); }

.ck-tile-art { position: absolute; inset: 0; }
.ck-tile-art svg { display: block; width: 100%; height: 100%; }

/* THE COVER'S TYPE, LAID OUT AS THE FULL-SIZE COVER LAYS IT OUT. Percentages rather than pixels
   throughout, so one rule serves the 150px tile and the 420px preview and the two cannot drift into
   different documents. */
.ck-tile-type {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 9% 9% 8%;
  text-align: left;
  color: inherit;
}

.ck-tile-kicker {
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .12em;
  text-transform: uppercase;
  opacity: .8;
}

.ck-tile-middle { flex: 1; display: flex; flex-direction: column; justify-content: center; }

.ck-tile-heading {
  display: block;
  font-size: .8125rem;
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.01em;
  overflow-wrap: anywhere;
}

.ck-tile-sub {
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  margin-top: 4%;
  font-size: .5rem;
  line-height: 1.35;
  opacity: .85;
}

.ck-tile-meta {
  display: flex;
  gap: 8%;
  font-size: .4375rem;
  line-height: 1.3;
  opacity: .8;
}

.ck-tile-meta > span { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-tile-label { display: block; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; }

/* A DOCUMENT WITH NO COVER. The firm's own work, and the blank tile's neighbour - a plain sheet with
   its name at the top, which is exactly what the reference's brief and bill-of-sale templates are. */
.ck-tile-plain {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  padding: 12% 11% 8%;
  text-align: left;
  color: var(--ck-text, #0F2535);
}

.ck-tile-plain-heading {
  flex: 1;
  font-size: .75rem;
  font-weight: 700;
  line-height: 1.2;
  overflow-wrap: anywhere;
}

.ck-tile-plain .ck-tile-meta { color: var(--ck-text-muted, #8BA8B6); opacity: 1; }

.ck-tile-blank {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--ck-text-muted, #8BA8B6);
  font-size: 1.5rem;
}

.ck-tile:hover:not(:disabled) .ck-tile-blank { color: var(--ck-blue, #47BED9); }

/* THE WARNINGS RIDE ON THE PAGE so every tile is the same height and the rows line up. Solid grounds
   rather than tints, because they sit over six different cover colours and a translucent chip would
   be legible on some of them. */
.ck-tile-flags {
  position: absolute;
  top: 6px;
  right: 6px;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 4px;
}

.ck-tile-flag {
  display: block;
  padding: 2px 6px;
  border-radius: 999px;
  font-size: .5rem;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  white-space: nowrap;
}

.ck-tile-flag--internal { background: #8C3A3A; color: #FFFFFF; }
.ck-tile-flag--witness { background: var(--ck-text, #0F2535); color: #FFFFFF; }

/* THE NAME, UNDER THE PAGE. Two lines, then it stops - a caption that grows makes the row it is in
   grow, and a grid whose rows are different heights is the thing this whole block is fixing. */
.ck-tile-name {
  display: -webkit-box;
  /* THREE LINES, 7 October 2026, so a document and its "(copy)" can be told apart; the whole name is on hover. */
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
  min-height: 2.3rem;
  font-size: .8125rem;
  font-weight: 600;
  line-height: 1.15;
  color: var(--ck-text, #0F2535);
}

/* ONE LINE, AND IT STOPS AT THE EDGE OF ITS OWN TILE. P46 (W11): this had no overflow rule, so two
   adjacent tiles captioned with a login ran together into one unbroken string —
   "KENT@CHEKACCOUNTING.COM.AUKENT@…" — because an address has nothing in it a browser may break at.
   The caption is one word about whose it is; anything longer is something to cut. */

/* NARROWER COLUMNS THAN THE CARD NEEDED, because a page is taller than it is wide and five or six
   across is what lets somebody compare covers at a glance. The list view keeps the old card. */
.ck-gallery {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(180px, 1fr));
  gap: 20px 16px;
  align-items: start;
}

/* The line under a library grid that is not all drawn yet: how many are showing, and the button that draws
   more. It is also what chekMoreOnScroll watches, so it must stay in the flow below the last tile. */
.ck-gallery-more {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 16px;
  margin-top: 24px;
}

/* THE TEMPLATES PAGE'S CARD. 1 October 2026. A tile with a menu beside its name: the page and the name
   are one button that opens the item, and the menu is a sibling of that button rather than inside it,
   because a button cannot hold another control and a press on the menu must never also open the document.
   The page keeps .ck-tile-page, so every card on every tab is the same sheet at the same size. */
.ck-card-tile { cursor: default; text-align: left; }

.ck-card-open {
  display: block;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  font: inherit;
  color: inherit;
  text-decoration: none;
}

.ck-card-open:disabled { cursor: default; opacity: .6; }

/* WHAT PRESSING THE PAGE DOES, ON THE PAGE. 7 October 2026: nothing said the page opens the editor, so a firm went to
   the menu for Edit. Shown on hover and keyboard focus, and always where there is no hover to find it with. */
.ck-card-open { position: relative; }
.ck-card-open-label {
  position: absolute;
  left: 50%;
  bottom: 12px;
  transform: translateX(-50%);
  padding: 4px 12px;
  border-radius: 999px;
  background: var(--ck-text);
  color: var(--ck-text-inverse);
  font-size: .8125rem;
  font-weight: 600;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--ck-transition);
}
.ck-card-open:hover:not(:disabled) .ck-card-open-label,
.ck-card-open:focus-visible .ck-card-open-label { opacity: 1; }
@media (hover: none) {
  .ck-card-open:not(:disabled) .ck-card-open-label { opacity: .92; }
}

.ck-card-open:hover:not(:disabled) .ck-tile-page,
.ck-card-open:focus-visible .ck-tile-page {
  box-shadow: 0 6px 18px rgba(15, 37, 53, .16);
  transform: translateY(-2px);
}

.ck-card-open:focus-visible { outline: none; }
.ck-card-open:focus-visible .ck-tile-page { border-color: var(--ck-blue, #47BED9); }

.ck-card-foot { display: flex; align-items: flex-start; gap: 4px; }
.ck-card-words { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-card-tile .ck-tile-name { min-height: 0; }

/* WHO STARTED IT, OR WHAT IT IS. One line that stops at the edge of its own card, for the reason
   .ck-tile-origin does: a name or an address has nothing in it a browser may break at. */
.ck-card-caption {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: .75rem;
  color: var(--ck-text-muted, #8BA8B6);
}

.ck-card-menu.e-dropdown-btn { flex: none; }

/* USE, ON THE CARD. 8 October 2026: the main action was hidden in the menu. A row under the name, the primary
   first and the library's Make it yours beside it; each fills its share so the two read as a pair. */
/* NEVER CUT SHORT: the first version shared the row and read "Make it y..." on a 200px card. A label that does
   not fit moves the second button to its own line instead, so every word of both is always on the card. The
   card is a column and the row sits at its foot, so cards whose names take two lines still line up. */
.ck-gallery > .ck-card-tile { align-self: stretch; display: flex; flex-direction: column; }
.ck-card-buttons { display: flex; flex-wrap: wrap; gap: 8px; margin-top: auto; padding-top: 8px; }
.ck-card-buttons .e-btn { flex: 1 0 auto; white-space: nowrap; padding-inline: 12px; font-size: .875rem; }
.ck-card-buttons .ck-card-use { min-width: 64px; }
.ck-card-buttons .ck-card-second { flex-basis: auto; }

/* THE PREVIEW A CARD'S PAGE OPENS: every page down a grey desk, the actions fixed at the top. */
.ck-template-preview .e-dlg-header-content { padding: 12px 16px; }
.ck-template-preview .e-dlg-header { width: 100%; }
.ck-template-preview .e-dlg-content { padding: 0; background: var(--ck-page-bg); }
.ck-preview-head { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; width: 100%; }
.ck-preview-words { flex: 1 1 240px; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.ck-preview-title { font-size: 1.0625rem; font-weight: 700; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-preview-caption { font-size: .8125rem; font-weight: 400; color: var(--ck-text-muted); }
.ck-preview-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.ck-preview-actions .ck-preview-close { margin-left: 4px; }
.ck-preview-body {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 20px 16px 32px;
}
.ck-preview-page,
.ck-preview-sheet {
  display: block;
  width: 100%;
  max-width: 816px;
  border: 1px solid var(--ck-border);
  background: var(--ck-surface);
  box-shadow: 0 2px 8px rgba(15, 37, 53, .08);
}
.ck-preview-page { height: auto; }
.ck-preview-sheet .ck-cover { margin: 0; border: 0; border-radius: 0; box-shadow: none; max-height: none; max-width: none; }
.ck-preview-text { padding: 48px 56px; min-height: 320px; }
.ck-preview-text-head { font-weight: 700; margin-bottom: 16px; }
.ck-preview-text-body { white-space: pre-line; margin: 0; }

/* THE DRAWN FIRST PAGE, laid over the name it covers once it has loaded. */
.ck-tile-picture {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: top center;
  background: transparent;
}

/* AN EMAIL TEMPLATE OR A PARAGRAPH ON ITS CARD: its own words on the sheet, because those are what it is.
   Clipped at the foot of the page rather than ellipsised, as a page of a document is. */
.ck-text-page {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  padding: 11% 10%;
  overflow: hidden;
  text-align: left;
  color: var(--ck-text, #0F2535);
}

.ck-text-page-head { font-size: .6875rem; font-weight: 700; line-height: 1.25; overflow-wrap: anywhere; }

.ck-text-page-body {
  font-size: .5625rem;
  line-height: 1.45;
  white-space: pre-line;
  overflow-wrap: anywhere;
  color: var(--ck-text-muted, #8BA8B6);
}

/* THE WORD UPLOAD BESIDE THE PRIMARY, drawn as a button rather than as the control's own drop panel. */
.ck-upload-inline .e-upload { border: 0; background: none; }
.ck-upload-inline .e-upload .e-file-select-wrap { padding: 0; }
.ck-upload-inline .e-upload .e-file-drop { display: none; }

.ck-delete-list { margin: 0 0 12px; padding-left: 18px; }

/* A FIRM'S OWN DOCUMENT ON THE TEMPLATE BUILDER, drawn as its first page. */
.ck-builder-thumb {
  display: block;
  width: 100%;
  max-width: 360px;
  border: 1px solid var(--ck-border, #DDE8EE);
  border-radius: var(--ck-radius-sm, 4px);
  margin-bottom: 12px;
}

/* BLANK IS THE SAME SIZE AS EVERY OTHER CARD, deliberately. Starting from nothing is a choice
   among the others rather than a different mechanism somewhere else on the page. */

/* List view — the same cards, one per row, summary beside the title rather than under it. */

/* A phone gets one column and the summary back under the title, or the row wraps to three lines
   and reads worse than the grid it was meant to simplify. */
@media (max-width: 575.98px) {
  .ck-gallery { grid-template-columns: 1fr; }

}

/* ------------------------------------------------------------------------------------------------
   23. THE STARTER PREVIEW — /templates. P28.

   A template you cannot look at is not a template. The first version of the starter cards carried a
   name, a summary and a signing order, with a footnote saying the document was on another page —
   which is this codebase's internal split between a request's shape and a document's body, handed to
   a firm as a thing to understand.
   ------------------------------------------------------------------------------------------------ */

/* The document at full size on the left, the workflow beside it. The first version of this was a
   monospace dump in a 760px box - it read as source code, and what a template LOOKS like is most of
   what it is. */

/* A PAGE. Proportional type, generous margins, a white ground and a shadow, capped at a readable
   measure - the things that make a document read as a document rather than as data. */
.ck-starter-page {
  background: #FFFFFF;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  box-shadow: var(--ck-shadow-sm);
  padding: 36px 40px;
  max-height: 58vh;
  overflow-y: auto;
}

/* PRE-LINE: a paragraph's own line breaks are structure here - "Prepared for:" and "Prepared by:" are
   two lines of one block - but runs of blank lines are already gone, because blocks were split on them. */

/* A placeholder is marked rather than left as bare brackets, so a reader can see at a glance which
   holes the request fills and which are the firm's own writing to do. */
.ck-ph {
  font-family: var(--font-mono);
  font-size: .8125em;
  /* TIGHT, because a chip sits INSIDE a sentence: 5px of padding either side put a visible gap before
     the comma in "[Client.LastName], [Client.Company]" and it read as "] , [", and "Dear [Client.FirstName] ,"
     read worse. Two pixels keeps the chip legible without opening a gap before punctuation. */
  padding: 1px 2px;
  border-radius: 4px;
  background: var(--ck-blue-ghost);
  color: var(--ck-blue-active);
  border: 1px solid var(--ck-blue-border);
  white-space: nowrap;
}

/* AMBER FOR THE FIRM'S OWN, because these are the ones nobody will ever be asked for - they stay in
   the finished document until somebody writes them, which is the thing worth noticing. */
.ck-ph--own {
  background: #FEF6E7;
  color: #8A5A00;
  border-color: #F0DCB4;
}

/* A phone puts the workflow under the page rather than in a column 19rem wide on a 400px screen. */
/* The Width parameter is a fixed pixel value because Syncfusion writes it onto the element's style and
   a CSS min() there did not take. The cap belongs here instead, or the dialog runs off a narrow screen. */

@media (max-width: 767.98px) {
  .ck-starter-page { padding: 22px 20px; max-height: 46vh; }
}

/* ================================================================================================
   22. THE STARTER COVER. P30.
   ------------------------------------------------------------------------------------------------
   Page 1 of a starter document, drawn rather than photographed. The background is an SVG from
   CoverArt at viewBox 816x1056 — A4 at 96dpi — and everything here is the type laid over it.

   THE TYPE IS NOT IN THE SVG, DELIBERATELY. Text inside the background would be markup this page
   injects, and the title, kicker and subtitle are the three things a firm could eventually edit.
   Kept as real elements they are escaped by Blazor like everything else, and they reflow.

   MONTSERRAT RATHER THAN THE SERIF THE BRIEF ASKS FOR. This sheet self-hosts three faces —
   Montserrat, IBM Plex Mono and Dancing Script — and never fetches a font, because a
   fonts.googleapis.com request discloses every visitor's IP on every page load. Vendoring a serif
   is a licensing decision and a new file, not a CSS change, so the title is set in the UI face at a
   heavy weight with tight tracking. Recorded here so the gap is a choice rather than an oversight.
   ================================================================================================ */

/* The cover and the document are ONE grid item. Dropping either straight into .ck-starter-view
   would auto-place it as a COLUMN — A50's .ck-sign-shell finding, one surface over. */

.ck-cover {
  position: relative;
  aspect-ratio: 816 / 1056;
  max-height: 58vh;
  margin-inline: auto;
  width: 100%;
  max-width: calc(58vh * 816 / 1056);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  box-shadow: var(--ck-shadow-sm);
  overflow: hidden;
  color: #FFFFFF;
}

/* THE ONE STYLE ON A PALE GROUND NEEDS DARK TEXT, and CoverArt decides which one that is — not this
   sheet. White on #F2F0EC is a cover with no title on it: present, correctly sized, and reported by
   nothing, which is what shipped on /sign/{token} once already. */
.ck-cover--dark { color: var(--ck-text); }

.ck-cover-art {
  position: absolute;
  inset: 0;
}

.ck-cover-art svg {
  display: block;
  width: 100%;
  height: 100%;
}

.ck-cover-type {
  position: relative;
  height: 100%;
  display: flex;
  flex-direction: column;
  padding: 11% 10%;
  box-sizing: border-box;
}

.ck-cover-kicker {
  font-family: var(--font-mono);
  font-size: .6875rem;
  letter-spacing: .22em;
  text-transform: uppercase;
  opacity: .72;
}

/* The flexible space either side is what puts the title on the optical middle and the meta at the
   foot, at any cover height, without either being positioned absolutely. */
.ck-cover-middle {
  margin-block: auto;
  min-width: 0;
}

/* COLOUR: INHERIT, AND IT IS THE WHOLE REASON THIS RULE EXISTS.
   --------------------------------------------------------------------------------------------
   A heading does not inherit here. Section 4 sets a colour on h1..h6, which beats .ck-cover's
   inherited white, so the title came out #0F2535 on a #1B3A5C ground — measured, not guessed:
   the kicker and subtitle were white and the title alone was dark, on the largest words on the
   page. That is A50's finding exactly (.ck-sign-head h1 set a size and no colour and rendered
   the document's title invisible to a firm's own client), reached from a second direction.
   Inherit rather than a literal, because .ck-cover--dark has to be able to flip it. */
.ck-cover-title {
  color: inherit;
  font-size: clamp(1.5rem, 3.4vw, 2.25rem);
  font-weight: 700;
  line-height: 1.04;
  letter-spacing: -0.02em;
  margin: 0;
  max-width: 13ch;
}

.ck-cover-subtitle {
  font-size: .9375rem;
  line-height: 1.4;
  opacity: .82;
  margin: .6rem 0 0;
  max-width: 26ch;
}

.ck-cover-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px 22px;
  font-size: .75rem;
  opacity: .86;
  min-width: 0;
}

.ck-cover-meta > span {
  display: flex;
  flex-direction: column;
  gap: 2px;
  font-family: var(--font-mono);
  overflow-wrap: anywhere;
}

.ck-cover-label {
  font-family: var(--font-sans);
  font-size: .625rem;
  letter-spacing: .14em;
  text-transform: uppercase;
  opacity: .62;
}

/* Below the dialog's two-column width the rail stacks under the paper; the cover keeps its ratio
   and simply gets narrower. No rule here may set a min-width — the page must not scroll sideways. */
@media (max-width: 900px) {
  .ck-cover { max-width: 100%; max-height: none; }
}

/* ================================================================================================
   23. STARTING A TEMPLATE. P30.
   ------------------------------------------------------------------------------------------------
   /templates/new: a drop zone above a gallery whose tiles SHOW their document. The tile art is the
   same CoverArt SVG the preview draws at full size, so a thumbnail can never advertise a cover the
   document will not have.
   ================================================================================================ */

/* THE DROP ZONE THAT STOOD HERE WENT WITH /templates/new, 1 October 2026. Your documents uploads a Word
   file from a button beside + Document instead (.ck-upload-inline), because the page it sat on is gone. */

/* The tile's cover sits where the icon does on an untiled card, so a gallery of both reads as one
   grid. A4's ratio is kept — a thumbnail at the wrong proportions is a preview of a document that
   does not exist. */

/* Section 22's finding, and it applies here for the same reason: the title is the one element that
   does not inherit, and white on the pale ground is a thumbnail with nothing on it. */

.ck-tile-art { position: absolute; inset: 0; }

.ck-tile-art svg { display: block; width: 100%; height: 100%; }

/* ================================================================================================
   24. THE FILTER BAR. P31.
   ------------------------------------------------------------------------------------------------
   Four dropdowns above a list. A button that is narrowing something carries a count, so a firm can
   see the list is filtered without opening anything — a bar that looked identical filtered and
   unfiltered would let somebody read a short list as all they have.
   ================================================================================================ */

.ck-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 14px;
}

.ck-filter { position: relative; }

.ck-filter-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 7px 12px;
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-surface-subtle, #F8FBFD);
  color: var(--ck-text-secondary);
  font-size: .875rem;
  font-weight: 500;
  cursor: pointer;
}

.ck-filter-btn:hover { color: var(--ck-text); border-color: var(--ck-border-strong, #C7D8E2); }

.ck-filter-btn > i { font-size: .625rem; opacity: .7; }

/* A THUMB'S TARGET ON A PHONE: 38px tall was measured on Your documents, under the 44px every other control there meets. */
@media (max-width: 767.98px) { .ck-filter-btn { min-height: 44px; } }

/* A SOLID EDGE AND THE BRAND COLOUR MEAN THIS ONE IS DOING SOMETHING. The count beside it is what
   the list has been cut to, so a reader can undo it without opening the panel to find out what it
   was. */
.ck-filter-btn.is-on {
  border-color: var(--ck-blue);
  color: var(--ck-blue-active, #1B8DAA);
  background: var(--ck-blue-ghost, #EAF7FB);
}

.ck-filter-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: var(--ck-blue);
  color: #FFFFFF;
  font-size: .6875rem;
  font-weight: 700;
}

.ck-filter-panel {
  position: absolute;
  z-index: 30;
  top: calc(100% + 6px);
  left: 0;
  width: 290px;
  max-width: calc(100vw - 32px);
  background: var(--ck-surface);
  border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-md);
  box-shadow: var(--ck-shadow-md, 0 8px 24px rgba(15, 37, 53, .12));
  overflow: hidden;
}

.ck-filter-search { padding: 10px 12px; border-bottom: 1px solid var(--ck-border); }

.ck-filter-options { max-height: 260px; overflow-y: auto; padding: 6px 0; }

.ck-filter-option {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 8px 14px;
  border: 0;
  background: none;
  text-align: left;
  font-size: .875rem;
  color: var(--ck-text);
  cursor: pointer;
}

.ck-filter-option:hover { background: var(--ck-surface-subtle, #F8FBFD); }

.ck-filter-option > i { width: 14px; font-size: .75rem; color: var(--ck-blue); }

.ck-filter-option > i.fa-none { visibility: hidden; }

.ck-filter-option.is-chosen { color: var(--ck-blue-active, #1B8DAA); font-weight: 600; }

.ck-filter-detail {
  display: block;
  width: 100%;
  padding-left: 34px;
  margin-top: -2px;
  font-size: .75rem;
  color: var(--ck-text-muted);
}

/* NOT A DISABLED CONTROL, DELIBERATELY. A disabled filter reads as "not yet, or not for you" and
   sends somebody looking for the switch; a sentence says what the answer is. Same reasoning as
   CkNotOffered's dashed chip, in the one place a dropdown can hold it. */
.ck-filter-none {
  margin: 0;
  padding: 18px 16px;
  font-size: .8125rem;
  line-height: 1.45;
  color: var(--ck-text-muted);
}

.ck-filter-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--ck-border);
  background: var(--ck-surface-subtle, #F8FBFD);
}

.ck-filter-clear {
  border: 0;
  background: none;
  padding: 7px 4px;
  color: var(--ck-text-secondary);
  font-size: .8125rem;
  text-decoration: underline;
  cursor: pointer;
}

.ck-filter-clear:hover { color: var(--ck-text); }

/* The bar wraps rather than scrolling sideways; nothing in it may set a min-width. */
@media (max-width: 640px) {
  .ck-filter-panel { width: 260px; }
}

/* ================================================================================================
   25. FOLDERS, SELECTION AND MOVING. P32.
   ------------------------------------------------------------------------------------------------
   Folder rows sit above the list they contain, a breadcrumb is the way back out, and a bar appears
   only once something is ticked — an unselected list should not be carrying a row of dead verbs.
   ================================================================================================ */

.ck-crumbs {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  margin-bottom: 12px;
  font-size: .875rem;
  color: var(--ck-text-muted);
}

.ck-crumbs a { color: var(--ck-text-secondary); text-decoration: none; }

.ck-crumbs a:hover { color: var(--ck-blue-active, #1B8DAA); text-decoration: underline; }

.ck-crumb-sep { color: var(--ck-text-muted); }

/* WHERE YOU ARE IS NOT A LINK. A66 records that a breadcrumb reads as a location rather than a
   control; making the last step clickable would offer a way to somewhere already open. */
.ck-crumb-here { color: var(--ck-text); font-weight: 600; }

.ck-crumb-btn {
  border: 0;
  background: none;
  padding: 2px 4px;
  color: var(--ck-text-secondary);
  font-size: .875rem;
  cursor: pointer;
}

.ck-crumb-btn:hover { color: var(--ck-blue-active, #1B8DAA); text-decoration: underline; }

.ck-bulk {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 14px;
  margin-bottom: 12px;
  border: 1px solid var(--ck-blue);
  border-radius: var(--ck-radius-sm);
  background: var(--ck-blue-ghost, #EAF7FB);
}

.ck-bulk-count { font-size: .875rem; font-weight: 600; color: var(--ck-blue-active, #1B8DAA); }

.ck-bulk-actions { display: flex; flex-wrap: wrap; gap: 4px; }

/* THE ONE IRREVERSIBLE VERB IN THIS BAR IS COLOURED LIKE ONE. Restore and Delete forever sit side by
   side and read identically in a flat button, which is the one arrangement where a mis-click costs
   something — the colour is the only thing separating them at a glance. Written against the page's
   own class rather than .e-flat, so the control suite's flat buttons are untouched: section 1c owns
   what a Syncfusion button looks like, and this says what THIS action is. */
.e-btn.e-flat.ck-bulk-danger { color: var(--ck-danger); }

.e-btn.e-flat.ck-bulk-danger:hover,
.e-btn.e-flat.ck-bulk-danger:focus { color: var(--ck-danger); background: var(--ck-danger-light); }

.ck-folder-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-bottom: 1px solid var(--ck-border);
}

.ck-folder-open {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  text-decoration: none;
  color: var(--ck-text);
}

.ck-folder-open:hover .ck-folder-name { color: var(--ck-blue-active, #1B8DAA); }

.ck-folder-open > i { color: var(--ck-text-muted); font-size: 1rem; }

.ck-folder-name { font-weight: 600; overflow-wrap: anywhere; }

/* WHAT IS INSIDE, SO A FIRM DOES NOT OPEN EACH ONE LOOKING FOR IT. */
.ck-folder-count { font-size: .8125rem; color: var(--ck-text-muted); white-space: nowrap; }

/* A ticked row is tinted rather than only having a ticked box, so a long list makes plain which
   rows the bar above it is about. */
.ck-template-list li.is-selected { background: var(--ck-blue-ghost, #EAF7FB); }

/* A TICKED ROW IS THREE ITEMS IN A `space-between` ROW, AND THAT SPREADS THEM.
   The tick, the detail and the actions were laid out left / CENTRE / right, so every template name
   floated to the middle of the panel the moment checkboxes arrived. The detail grows instead, which
   puts the name beside its tick and keeps the actions on the right where they were. Seen on screen. */
.ck-template-list > li > .e-checkbox-wrapper + div { flex: 1 1 auto; min-width: 0; }

/* The folder row is a BUTTON rather than a link — see Templates.razor's currentFolder, which records
   why an <a href> could not carry this. It still has to read as a row, not as a control. */
button.ck-folder-open {
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  text-align: left;
  cursor: pointer;
  flex: 1 1 auto;
}

/* ==================================================================================================
   22. BILLING — the section-and-card language, taken from Chek Audit's own billing screens.
   ==================================================================================================
   WHY THESE EXIST. The billing pages were one flat panel of grey rows: a heading, a run-on sentence,
   and three lines of label-plus-pale-link. Nothing on them carried weight, so nothing on them could be
   scanned, and beside Chek Audit's billing screen they read as unfinished. What Chek Audit does and
   this did not: an UPPERCASE section heading above each group, real cards under it rather than rows,
   an icon to anchor each card, and figures large enough to be the thing you see first.

   NO NEW COLOUR, RADIUS OR TYPE SIZE. Every value below is an existing token or an existing primitive
   — `h6` was already uppercase and letter-spaced, `.ck-settings-card` already drew a card with an icon
   head. This is arrangement, which is what was missing, rather than a second visual language. */

.ck-section {
    margin: 26px 0 12px;
    font-size: 14px;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--ck-text-muted);
}

.ck-section:first-child { margin-top: 6px; }

/* The plan, as a statement rather than a paragraph. An icon, a headline, a chip, and the reassurance
   underneath — the state every workspace on this build is in, drawn as a state rather than as the
   absence of one. */
.ck-plan {
    display: flex;
    align-items: flex-start;
    gap: 16px;
    padding: 20px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
}

.ck-plan-mark {
    flex: 0 0 auto;
    width: 44px;
    height: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 10px;
    background: var(--ck-blue-ghost);
    color: var(--ck-blue);
    font-size: 1.125rem;
}

.ck-plan-body { flex: 1 1 auto; min-width: 0; }

.ck-plan-head {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ck-plan-name {
    font-size: 1.0625rem;
    font-weight: 700;
    color: var(--ck-text);
}

.ck-plan-price {
    font-size: 1.75rem;
    font-weight: 700;
    color: var(--ck-text);
    line-height: 1.1;
}

.ck-plan-price span {
    font-size: .875rem;
    font-weight: 500;
    color: var(--ck-text-muted);
}

.ck-plan-note {
    margin: 6px 0 0;
    font-size: .8125rem;
    color: var(--ck-text-muted);
}

/* The plans, as cards. Chek Audit's own plan grid, read-only here because nothing in this product can
   start a subscription yet - which is why there is no button on them. */
.ck-plan-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 14px;
}

@media (max-width: 1180px) { .ck-plan-grid { grid-template-columns: repeat(2, 1fr); } }
@media (max-width: 680px)  { .ck-plan-grid { grid-template-columns: 1fr; } }

.ck-plan-card {
    display: flex;
    flex-direction: column;
    padding: 18px 20px 16px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: 10px;
}

.ck-plan-card-name {
    font-size: .9375rem;
    font-weight: 700;
    color: var(--ck-text);
}

.ck-plan-points {
    list-style: none;
    margin: 12px 0 0;
    padding: 0;
    flex: 1 1 auto;
}

.ck-plan-points li {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    margin-bottom: 7px;
    font-size: .8125rem;
    color: var(--ck-text-secondary);
}

.ck-plan-points i { margin-top: 3px; color: var(--ck-success); font-size: .75rem; }

.ck-plan-card-note {
    margin: 10px 0 0;
    padding-top: 10px;
    border-top: 1px solid var(--ck-border);
    font-size: .75rem;
    color: var(--ck-text-muted);
}

/* P44 stage C. THE ONE CONTROL ON A PLAN CARD, and it is pushed to the bottom rather than left to
   float after the description. The cards are flex columns of differing text length - a description
   runs two lines on one plan and four on another - so without the auto margin the buttons sit at
   four different heights across one row, which reads as four different kinds of card rather than
   one choice repeated. margin-top:auto is what makes a row of them line up. */
.ck-plan-choose {
    margin-top: auto;
    padding-top: 0;
}

.ck-plan-card .ck-plan-choose.e-btn,
.ck-plan-card a.ck-plan-choose {
    width: 100%;
    margin-top: 14px;
}

/* Monthly / Annual. The word either side of the switch, the live one in full colour — a switch whose
   labels are both grey makes the reader work out which way is on. */
.ck-interval {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 0 0 14px;
    font-size: .875rem;
    color: var(--ck-text-muted);
}

.ck-interval span.on { color: var(--ck-text); font-weight: 600; }

.ck-plan-saving {
    margin-top: 4px;
    font-size: .75rem;
    font-weight: 600;
    color: var(--ck-success);
}

/* A statement of fact in good standing — "no invoices yet" — rather than an error or an apology.
   Chek Audit's billing page uses the same tinted band for the same sentence. */
.ck-note {
    display: flex;
    align-items: flex-start;
    gap: 10px;
    padding: 14px 16px;
    background: var(--ck-blue-ghost);
    border: 1px solid var(--ck-blue-border);
    border-radius: 10px;
    font-size: .875rem;
    color: var(--ck-text-secondary);
}

.ck-note i { margin-top: 2px; color: var(--ck-blue); }

/* THE SIGNER'S OWN COPY. Release C walk, items 4 and 5 — on the thank-you card and on the closed
   card, which is the page somebody reaches months later looking for exactly this. Plain rows on the
   dark sign-page card, so they read as things to take rather than as navigation. */
.ck-signed-copies { list-style: none; margin: 12px 0 0; padding: 0; display: flex;
  flex-direction: column; gap: 8px; }

.ck-signed-copies a { display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border: 1px solid var(--ck-blue-border, #C4E8F4); border-radius: var(--ck-radius-sm, 4px);
  background: var(--ck-blue-ghost, #EBF8FC); color: var(--ck-text, #0F2535);
  text-decoration: none; font-size: .875rem; }

.ck-signed-copies a:hover { border-color: var(--ck-blue, #47BED9); }
.ck-signed-copies a i { color: var(--ck-blue, #47BED9); }

/* ==================================================================================================
   26. THE PUBLIC SITE — cheksign.com. Release E item E1; restyled to match Chek Audit's site.
   ==================================================================================================
   WHY IT EXISTS AT ALL. cheksign.com is the domain every message this product sends is FROM, so it is
   the domain a client checks when they want to know who wrote to them — and it showed a registrar's
   parked page reading "This domain is registered, but may still be available". That is the worst
   possible answer at the one moment somebody is deciding whether a signing link is genuine.

   THIS BLOCK NOW DRIFTS FROM THE APP ON PURPOSE, AND THAT REVERSES WHAT IT USED TO SAY.
   --------------------------------------------------------------------------------------------------
   The superseded comment read: "NO NEW COLOUR, RADIUS OR TYPE SIZE, AND NO SECOND VISUAL LANGUAGE.
   Every value below is an existing token or an existing primitive — the gradient is the sidebar's, the
   cards are the surface and border the whole product uses, and the plan grid is literally
   `.ck-plan-grid` from the Subscription page, so a prospect and a customer are shown the same thing
   twice rather than two designs of it."

   That was the right rule for the wrong surface. CLAUDE.md's "do not drift a colour, a radius or a
   font size without changing it in Chek Audit too" is about the PRODUCT's design system — the shell,
   the controls, the surfaces a customer works in all day — and those are untouched here. The public
   pages are marketing, and the sister marketing site they have to read alongside is chek-audit.com,
   which is a different palette, two different faces and a different rhythm from either app shell.
   Matching the app here made cheksign.com look like a screenshot of the product rather than like the
   other half of one suite.

   SO EVERY TOKEN BELOW IS SCOPED TO .ck-site AND NOTHING ESCAPES IT. A rule written on a bare element
   or on a name the app already uses would reach the app shell through one cascade, which is exactly
   how .ck-btn--quiet came to be painted white on white (A67). The two faces are declared here and
   nowhere else, so no page inside the shell ever selects them and no browser inside the shell ever
   fetches them.

   MEASURED FROM THE SISTER SITE rather than eyeballed: the navy, the overlay, the button gradient, the
   card borders and the heading weights below are the values chek-audit.com actually serves, read out
   of its own stylesheets on 21 September 2026.

   STATICALLY RENDERED, so there is not a Syncfusion control on any of it and nothing here needs a
   circuit. Exception 1, for the reason Login.razor takes it: a page read by somebody with no account
   must draw before a circuit exists. */

.ck-site {
  /* ---- the sister site's palette, read from its own stylesheets ---- */
  --site-navy:        #0B2733;   /* every dark band, including the foot */
  --site-navy-deep:   #071C26;   /* the foot, a shade under the hero */
  --site-ink:         #11182E;   /* a heading on a light band */
  --site-ink-soft:    #172039;   /* a card heading */
  --site-body:        #667597;   /* body text on a light band */
  --site-body-dark:   #AEB9D0;   /* body text on a dark band */
  --site-line:        #E0E5EF;   /* a card edge on a light band */
  --site-line-dark:   #2AA5C6;   /* a card edge on a dark band */
  --site-tint:        #F6FAFB;   /* the alternate light band */
  --site-teal:        #4EC3E0;   /* the brand mark's own blue */
  --site-teal-deep:   #2AA5C6;   /* an EDGE on a light ground - a chip border, a card border */
  --site-chip:        #DBE6EB;

  /* SOMETHING WENT WRONG, ON A LIGHT CARD. Item 6: the sign-up page has to be able to say the mail
     server refused the message, and section 26 carries its own palette rather than the shell's - the
     app's --ck-warning (#E67E22) is about 2.3:1 on white, which is a warning nobody can read.
     MEASURED: #B3541E on white is 4.96:1, against WCAG AA's 4.5 for body text. */
  --site-warn:        #B3541E;

  /* A THIRD TEAL, FOR TEXT ON A LIGHT GROUND, BECAUSE THE SISTER SITE'S IS NOT READABLE THERE.
     ----------------------------------------------------------------------------------------------
     Measured: #2AA5C6 on white is 2.88:1 and on the #DBE6EB chip it is 2.27:1, against WCAG AA's 4.5
     for body text. chek-audit.com paints its eyebrow chips and links that way and we are matching its
     LOOK rather than its contrast — a link nobody can read is not a design decision anybody took, it
     is one nobody measured. #15687F is the same hue at 6.3:1 on white and 5.0:1 on the chip, and at
     the sizes these are used it still reads as the brand teal rather than as navy.

     THE HARNESS WOULD NOT HAVE CAUGHT THIS. Measure.cs flags a ratio below 1.5 on purpose — it is
     looking for a control painted the colour behind it, and its own comment says a real contrast
     standard would flag half the product's muted text. So this is the kind of thing that has to be
     worked out rather than waited for. */
  --site-teal-ink:    #15687F;

  /* THE BUTTON GRADIENT AND THE HEADLINE GRADIENT ARE DIFFERENT ON PURPOSE. The button runs teal to
     mint and carries dark text; the headline runs cyan through violet to magenta and is clipped to
     the glyphs. Using one for both would make the primary button read as decoration. */
  --site-cta:         linear-gradient(308deg, #72E4FF 0%, #86F0DA 100%);
  --site-headline:    linear-gradient(145deg, #72E4FF 0%, #806BFF 58%, #A727BD 100%);

  /* The hero's own wash, over the navy rather than instead of it. */
  --site-wash:        linear-gradient(145deg, #72E4FF21 0%, #806BFF33 82%);

  --site-radius:      10px;
  --site-radius-lg:   20px;
  --site-radius-pill: 999px;

  /* MANROPE FOR HEADINGS, OPEN SANS FOR BODY — declared once, here, and nowhere else in this sheet.
     Both are self-hosted; see chek-fonts.css for how the faces were generated and why. */
  --site-display: 'Manrope', var(--font-sans);
  --site-text:    'Open Sans', var(--font-sans);

  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--ck-surface);
  font-family: var(--site-text);
  color: var(--site-body);
}

.ck-site h1, .ck-site h2, .ck-site h3, .ck-site h4 {
  font-family: var(--site-display);
  letter-spacing: -0.02em;
}

/* The router focuses the first h1 on arrival and the user agent paints a ring round it; section 3
   suppresses that, unscoped, because it happens at every address in this product rather than on
   these five pages. This rule used to live here, scoped to .ck-site — see section 3 for why it no
   longer is. */

/* ---- the bar --------------------------------------------------------------------------------- */

.ck-site-bar {
  display: flex; align-items: center; justify-content: space-between; gap: 20px;
  padding: 14px clamp(16px, 5vw, 48px);
  border-bottom: 1px solid var(--site-line);
  background: var(--ck-surface);
  position: sticky; top: 0; z-index: 20;
}

.ck-site-mark { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ck-site-mark img { height: 38px; width: auto; display: block; }

/* THE NAME BESIDE THE MARK, AS TEXT. 6 October 2026: the stacked wordmark drew "SIGN" too small to read at
   bar size. Both halves the same size now; "Sign" in the darker teal on white, because the brand's own
   light teal is too faint to read as text on a white bar. */
.ck-site-wordmark {
  font-family: var(--site-display); font-weight: 800; font-size: 1.5rem; line-height: 1;
  letter-spacing: -0.02em; color: var(--site-ink);
}
.ck-site-wordmark span { color: var(--site-teal-ink); }

.ck-site-nav { display: flex; align-items: center; gap: clamp(4px, 1.4vw, 12px); }

/* A NAV ITEM IS A PILL, WHICH IS WHAT MAKES THE CURRENT PAGE SAYABLE WITHOUT A SECOND COLOUR. The
   sister site marks the page you are on as a white pill with a shadow and teal text; here the pill is
   drawn on hover and on .on, so the same shape does both jobs. */
.ck-site-nav a {
  color: var(--site-ink); text-decoration: none;
  font-family: var(--site-text); font-size: .9375rem; font-weight: 600;
  padding: 8px 14px; border-radius: var(--site-radius);
}

.ck-site-nav a:hover { background: var(--site-tint); color: var(--site-teal-ink); }

.ck-site-nav a.on {
  background: var(--ck-surface); color: var(--site-teal);
  box-shadow: 0 1px 3px rgba(20, 27, 37, .12);
}

/* THE LOGIN BUTTON IS THE BAR'S ONLY FILLED CONTROL. The trial button lives in the hero and at the
   foot of every page; two primary actions in one bar is two things competing for the same press. */
.ck-site-login {
  background: var(--site-cta); color: var(--site-navy);
  padding: 9px 22px; border-radius: var(--site-radius);
  font-weight: 700; box-shadow: 0 1px 2px rgba(11, 39, 54, .12);
}

.ck-site-login:hover { background: var(--site-cta); color: var(--site-navy); filter: brightness(1.04); }

/* ---- bands and the reading column ------------------------------------------------------------ */

.ck-site-main { flex: 1 1 auto; }

.ck-site-wrap { max-width: 1140px; margin: 0 auto; padding: 0 clamp(16px, 4vw, 24px); }
.ck-site-narrow { max-width: 760px; }
.ck-site-centred { text-align: center; }

.ck-site-band { padding: clamp(44px, 7vw, 92px) 0; background: var(--ck-surface); }
.ck-site-band--tint { background: var(--site-tint); }

/* A DARK BAND IS THE SAME NAVY AS THE HERO, WASH AND ALL, so the page reads as two materials rather
   than four. Every rule inside it sets its own colour — A50: an element on a dark ground that only
   sets a size inherits the body ink and disappears. */
.ck-site-band--dark { background: var(--site-navy); position: relative; isolation: isolate; }

.ck-site-band--dark::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--site-wash);
}

.ck-site-band--dark h2, .ck-site-band--dark h3 { color: var(--ck-text-inverse); }
.ck-site-band--dark p, .ck-site-band--dark li { color: var(--site-body-dark); }

.ck-site-h2 {
  font-size: clamp(1.75rem, 3.6vw, 2.75rem); line-height: 1.1; font-weight: 700;
  margin: 0 0 18px; color: var(--site-ink);
}

.ck-site-h2--sm { font-size: clamp(1.5rem, 2.6vw, 2.125rem); }

.ck-site-lead {
  font-size: clamp(1rem, 1.5vw, 1.125rem); line-height: 1.65; margin: 0 0 26px;
  max-width: 64ch; color: var(--site-body);
}

.ck-site-centred .ck-site-lead { margin-left: auto; margin-right: auto; }
.ck-site-centred .ck-site-actions { justify-content: center; }
.ck-site-centred .ck-site-eyebrow { margin-left: auto; margin-right: auto; }

.ck-site-note { font-size: .875rem; margin: 18px 0 0; color: var(--site-body); }

/* WHAT EVERY PLAN INCLUDES, WHICH IS THE FLOOR RATHER THAN THE SMALL PRINT. P49: it sits directly under
   the cards and is read as part of them, so it is the heavier of the two notes - the one below it is
   about currency and card handling and is genuinely small print. */
.ck-site-note--every {
  margin-top: 26px;
  font-size: .9375rem;
  color: var(--site-ink);
}

/* ---- the eyebrow chip ------------------------------------------------------------------------ */

.ck-site-eyebrow {
  display: inline-block; margin: 0 0 16px;
  background: var(--site-chip); border: 1px solid var(--site-teal-deep);
  border-radius: var(--site-radius-pill); padding: 8px 16px;
  font-family: var(--site-text); font-size: .8125rem; font-weight: 600;
  color: var(--site-teal-ink); letter-spacing: .01em;
}

/* ON A DARK BAND THE CHIP INVERTS RATHER THAN KEEPING ITS PALE FILL. #DBE6EB on #0B2733 is a bright
   lozenge that pulls the eye off the heading under it. */
.ck-site-band--dark .ck-site-eyebrow,
.ck-site-hero .ck-site-eyebrow {
  background: rgba(78, 195, 224, .12); border-color: rgba(78, 195, 224, .5); color: var(--site-teal);
}

/* ---- the buttons ----------------------------------------------------------------------------- */

/* THEIR OWN NAMES RATHER THAN .ck-btn MODIFIERS, AND THAT IS A67's LESSON APPLIED BEFORE THE FACT.
   .ck-btn--quiet is already a transparent, bordered secondary button in section 18d, and is used by
   the signature pad's Clear button on the signing page; a second definition of it here won the
   cascade and painted four controls white on white. A marketing button is a different control from an app button, so it
   gets a different name and cannot reach anything else. */
.ck-site-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  font-family: var(--site-text); font-size: .9375rem; font-weight: 700;
  padding: 13px 26px; border-radius: var(--site-radius);
  text-decoration: none; border: 1px solid transparent; cursor: pointer;
  transition: filter .15s ease, background-color .15s ease, border-color .15s ease;
}

.ck-site-btn--primary { background: var(--site-cta); color: var(--site-navy); }
.ck-site-btn--primary:hover { filter: brightness(1.05); color: var(--site-navy); }

/* THE OUTLINED ONE IS LIGHT-FILLED RATHER THAN TRANSPARENT, which is what the sister site does and is
   also what keeps it legible on both grounds: transparent, it would need one colour on the navy and
   another on white, and that is the two-controls-one-name failure again. */
.ck-site-btn--outline {
  background: var(--site-tint); color: var(--site-navy); border-color: var(--site-teal);
}

.ck-site-btn--outline:hover {
  background: var(--ck-surface); color: var(--site-navy); border-color: var(--site-teal-deep);
}

.ck-site-btn--lg { font-size: 1rem; padding: 15px 32px; }
.ck-site-btn--block { width: 100%; }

.ck-site-actions { display: flex; flex-wrap: wrap; gap: 12px; margin: 0; }

/* ---- the hero -------------------------------------------------------------------------------- */

.ck-site-hero {
  background: var(--site-navy); color: var(--ck-text-inverse);
  padding: clamp(40px, 6vw, 76px) 0 clamp(40px, 6vw, 72px);
  position: relative; isolation: isolate; overflow: hidden;
}

.ck-site-hero::before {
  content: ''; position: absolute; inset: 0; z-index: -1; background: var(--site-wash);
}

/* A PAGE WHOSE JOB IS TO BE READ GETS A SHORTER BAND. Terms and Privacy have no screenshot and no
   call to action in the hero, so the full height would be an inch and a half of navy above the one
   thing somebody came for. The heading also stops being a marketing line: a legal page's h1 is its
   own name, and a gradient across it would be the only decorated word on a page of plain terms. */
.ck-site-hero--short { padding: clamp(32px, 4.5vw, 56px) 0 clamp(28px, 4vw, 48px); }

.ck-site-hero--short h1 { font-size: clamp(1.875rem, 3.6vw, 2.5rem); margin-bottom: 14px; }

.ck-site-hero--short .ck-site-lead { margin-bottom: 0; }

.ck-site-hero-grid {
  display: grid; grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  gap: clamp(24px, 4vw, 52px); align-items: center;
}

.ck-site-hero-copy { min-width: 0; }

/* THE HEADLINE IS TWO LINES AND THE SECOND ONE IS THE GRADIENT, which is the sister site's own shape.
   1.02 line height and the negative tracking are what make two short lines read as one mark rather
   than as two sentences. */
.ck-site-hero h1 {
  margin: 0 0 20px;
  font-size: clamp(2rem, 4.4vw, 3rem);
  font-weight: 800; line-height: 1.04; letter-spacing: -0.035em;
  color: var(--ck-text-inverse);
}

.ck-site-hero h1 span { display: block; }

/* CLIPPED TO THE GLYPHS, AND IT FALLS BACK TO A REAL COLOUR RATHER THAN TO TRANSPARENT. A browser
   without background-clip:text would otherwise paint the second line in transparent ink on navy —
   the headline's own half, invisible, on the page this product is judged by. The colour below is
   declared first and only overwritten where the clip is supported. */
.ck-site-gradient { color: var(--site-teal); }

@supports (-webkit-background-clip: text) or (background-clip: text) {
  .ck-site-gradient {
    background-image: var(--site-headline);
    -webkit-background-clip: text; background-clip: text;
    -webkit-text-fill-color: transparent; color: transparent;
  }
}

.ck-site-hero .ck-site-lead { color: #CFE6F0; max-width: 52ch; }

/* ---- the tick row ---------------------------------------------------------------------------- */

.ck-site-ticks {
  display: flex; flex-wrap: wrap; gap: 10px clamp(12px, 1.9vw, 22px);
  margin: 26px 0 0; padding: 0; list-style: none;
}

.ck-site-ticks li {
  display: flex; align-items: center; gap: 8px;
  font-size: .8125rem; font-weight: 600; color: #CFE6F0;
}

.ck-site-ticks i { color: var(--site-teal); font-size: .8125rem; }

/* ---- a product screenshot -------------------------------------------------------------------- */

/* A SCREENSHOT IS FRAMED RATHER THAN DROPPED ON THE BACKGROUND. Unframed, a white screenshot on a
   navy band has no edge of its own and reads as a hole in the page. */
.ck-site-shot {
  border-radius: var(--site-radius-lg); overflow: hidden;
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(4, 15, 22, .45);
  background: var(--ck-surface);
  min-width: 0;
}

.ck-site-shot img { display: block; width: 100%; height: auto; }

.ck-site-shot--light {
  border-color: var(--site-line);
  box-shadow: 0 18px 44px rgba(11, 39, 54, .12);
}

.ck-site-figure-note { margin: 12px 0 0; font-size: .8125rem; color: var(--site-body); }

.ck-site-band--dark .ck-site-figure-note { color: var(--site-body-dark); }

/* ---- a two-column row: words one side, a figure the other ------------------------------------ */

.ck-site-split {
  display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: clamp(28px, 5vw, 64px); align-items: center;
}

.ck-site-split + .ck-site-split { margin-top: clamp(44px, 6vw, 80px); }

/* THE FIGURE GOES LEFT ON AN ALTERNATE ROW, and it is done with grid ORDER rather than by writing the
   markup backwards: read aloud, a section should still be heading-then-picture. */
.ck-site-split--flip .ck-site-split-figure { order: -1; }

.ck-site-split-copy { min-width: 0; }
.ck-site-split-figure { min-width: 0; }

/* ---- a ticked list with a rule under each line ----------------------------------------------- */

.ck-site-checklist { margin: 22px 0 0; padding: 0; list-style: none; }

/* THE TICK IS POSITIONED, NOT A FLEX ITEM, AND THE DIFFERENCE IS VISIBLE THE MOMENT A LINE HAS A
   <strong> IN IT.
   ------------------------------------------------------------------------------------------------
   Written as display:flex, every child of the li becomes a flex ITEM — so "5 requests to send, to up
   to 3 recipients each" laid out as four boxes with the flex gap between them, and wrapped as four
   boxes too: on a phone the emphasised words ended up on their own lines with the words either side
   stranded. The line still read as a sentence in the markup and did not on the screen.

   A line of prose is not a row of items. The tick is taken out of the flow and the text is left as
   one inline run, which is also what .ck-site-steps does with its number. */
.ck-site-checklist li {
  position: relative; padding: 12px 0 12px 26px;
  border-bottom: 1px solid var(--site-line);
  font-size: .9375rem; line-height: 1.55; color: var(--site-ink-soft);
}

.ck-site-checklist li:last-child { border-bottom: 0; }

.ck-site-checklist i {
  position: absolute; left: 0; top: 16px; color: var(--site-teal); font-size: .875rem;
}

/* A LINE THAT SAYS WHAT IS *NOT* INCLUDED DOES NOT GET THE TICK COLOUR. A cross painted in the same
   teal as every tick above it reads at a glance as one more thing you get, which on a trial's own
   limits is the reading that costs somebody an afternoon. */
.ck-site-checklist li.ck-site-not { color: var(--site-body); }
.ck-site-checklist li.ck-site-not i { color: var(--site-body); }

/* THE HERO IS A DARK GROUND TOO, AND LEAVING IT OUT OF THIS SELECTOR WAS A50 HAPPENING AGAIN.
   ------------------------------------------------------------------------------------------------
   The list above sets #172039 because its ordinary home is a white band. Written as
   .ck-site-band--dark alone, this override reached every dark BAND and not the HERO — so the
   sign-up page drew four lines of near-black text on navy, present, correctly sized, reported by
   nothing, and unreadable. That is the same failure as .ck-sign-head h1 setting a size and no
   colour, arriving through a selector that was one class short.

   Both grounds are named here rather than the list being given a dark default, because the light
   band is where it is used most and a component whose default is wrong on its commonest ground is
   the next version of this. */
.ck-site-band--dark .ck-site-checklist li,
.ck-site-hero .ck-site-checklist li {
  border-bottom-color: rgba(255, 255, 255, .12); color: #DCE4F2;
}

.ck-site-hero .ck-site-checklist li strong { color: var(--ck-text-inverse); }
.ck-site-band--dark .ck-site-checklist li strong { color: var(--ck-text-inverse); }

.ck-site-hero .ck-site-checklist a { color: var(--site-teal); }

/* ---- cards ----------------------------------------------------------------------------------- */

.ck-site-cards {
  display: grid; gap: 20px;
  grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
}

.ck-site-card {
  background: var(--ck-surface); border: 1px solid var(--site-line);
  border-radius: var(--site-radius-lg); padding: 26px 24px 24px;
}

.ck-site-card i { color: var(--site-teal); font-size: 1.25rem; }

.ck-site-card h3 {
  font-size: 1.0625rem; font-weight: 600; margin: 14px 0 8px; color: var(--site-ink);
}

.ck-site-card p { margin: 0; font-size: .9375rem; line-height: 1.6; color: var(--site-body); }

/* ON A DARK BAND A CARD IS AN OUTLINE RATHER THAN A FILL, which is the sister site's own treatment
   and is what stops a row of pale boxes cutting the band into six. */
.ck-site-band--dark .ck-site-card {
  background: transparent; border-color: var(--site-line-dark);
}

.ck-site-band--dark .ck-site-card h3 { color: var(--ck-text-inverse); }
.ck-site-band--dark .ck-site-card p { color: var(--site-body-dark); }

/* ONE CODE RULE FOR THE WHOLE SITE rather than one per block it turns up in. A merge token is the
   thing this product asks a firm to type, so it appears in a card, in a checklist and in the legal
   pages, and three copies of the same five declarations would drift on the first retint. */
.ck-site code {
  font-family: var(--font-mono); font-size: .8125rem;
  background: var(--site-tint); border: 1px solid var(--site-line);
  border-radius: var(--ck-radius-xs); padding: 1px 5px; color: var(--site-ink);
}

.ck-site-band--dark code {
  background: rgba(255, 255, 255, .06); border-color: rgba(255, 255, 255, .16);
  color: var(--ck-text-inverse);
}

.ck-site-card a,
.ck-site-checklist a { color: var(--site-teal-ink); }

.ck-site-band--dark .ck-site-card a,
.ck-site-band--dark .ck-site-checklist a { color: var(--site-teal); }

/* ---- numbered steps -------------------------------------------------------------------------- */

.ck-site-steps {
  margin: 0; padding: 0; list-style: none; counter-reset: ck-step; display: grid; gap: 16px;
}

.ck-site-steps li {
  counter-increment: ck-step; position: relative; padding-left: 54px;
  font-size: 1rem; line-height: 1.6; color: var(--site-body);
}

.ck-site-steps li::before {
  content: counter(ck-step);
  position: absolute; left: 0; top: -3px;
  width: 36px; height: 36px; border-radius: var(--site-radius-pill);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--site-display); font-weight: 700; font-size: .9375rem;
  background: var(--site-chip); color: var(--site-teal-ink);
  border: 1px solid var(--site-teal-deep);
}

.ck-site-steps li strong { color: var(--site-ink); font-weight: 700; }

/* ---- pricing --------------------------------------------------------------------------------- */

/* TWO ADDRESSES RATHER THAN A SWITCH, because this page has no circuit. It also makes the annual
   grid something a firm can bookmark and send to a partner. */
.ck-site-interval {
  display: inline-flex; gap: 4px; padding: 4px; margin: 0 0 22px;
  border: 1px solid var(--site-line); border-radius: var(--site-radius-pill);
  background: var(--site-tint);
}

.ck-site-interval a {
  padding: 8px 22px; border-radius: var(--site-radius-pill);
  font-size: .875rem; font-weight: 700;
  color: var(--site-body); text-decoration: none;
}

.ck-site-interval a.on {
  background: var(--ck-surface); color: var(--site-teal-ink);
  box-shadow: 0 1px 3px rgba(20, 27, 37, .12);
}

.ck-site-interval-note {
  font-size: .9375rem; color: var(--site-body); margin: 0 0 24px; max-width: 64ch;
}

/* THE PLAN CARDS ARE THE PUBLIC SITE'S OWN, not .ck-plan-grid from the Subscription page.
   ------------------------------------------------------------------------------------------------
   The superseded rule shared that component so "a prospect and a customer are shown the same thing
   twice rather than two designs of it". The figures still come from one place — PlanWording, reading
   the seeder's own list — and that is the half that mattered; the SHAPE now belongs to whichever
   surface is drawing it, because a card built for a settings page inside the app shell is the wrong
   object on a marketing page in a different face. */
.ck-site-plans {
  display: grid; gap: 18px;
  grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
}

.ck-site-plan {
  display: flex; flex-direction: column;
  background: var(--ck-surface); border: 1px solid var(--site-line);
  border-radius: var(--site-radius-lg); padding: 26px 22px 24px;
}

.ck-site-plan-name {
  font-family: var(--site-display); font-weight: 700; font-size: 1.0625rem; color: var(--site-ink);
}

.ck-site-plan-price {
  font-family: var(--site-display); font-weight: 800; font-size: 1.875rem;
  color: var(--site-ink); margin: 10px 0 2px; letter-spacing: -0.03em;
}

.ck-site-plan-price span {
  font-family: var(--site-text); font-weight: 600; font-size: .8125rem; color: var(--site-body);
  letter-spacing: 0;
}

.ck-site-plan-saving { font-size: .8125rem; font-weight: 700; color: var(--site-teal-ink); }

.ck-site-plan-points { margin: 18px 0 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.ck-site-plan-points li {
  display: flex; align-items: flex-start; gap: 9px;
  font-size: .875rem; line-height: 1.5; color: var(--site-ink-soft);
}

.ck-site-plan-points i { color: var(--site-teal); font-size: .75rem; margin-top: 4px; }

.ck-site-plan-note {
  margin: 16px 0 0; font-size: .8125rem; line-height: 1.55; color: var(--site-body);
}

/* PUSHED TO THE FOOT OF THE CARD so five cards of different prose length still line their buttons up.
   A row of buttons at five different heights is the tell that a grid is a list of boxes. */
.ck-site-plan .ck-site-btn { margin-top: auto; }
.ck-site-plan-note + .ck-site-btn { padding-top: 13px; }

/* ---- the legal pages ------------------------------------------------------------------------- */

.ck-site-prose h2 {
  font-size: 1.25rem; font-weight: 700; margin: 36px 0 12px; color: var(--site-ink);
}

.ck-site-prose h2:first-child { margin-top: 0; }

.ck-site-prose p,
.ck-site-prose li { font-size: .9375rem; line-height: 1.75; color: var(--site-body); }

.ck-site-prose p { margin: 0 0 14px; }

/* A HASH IN LEGAL PROSE BREAKS. .ck-ref is nowrap for a reference in a grid cell, and a 64-character
   SHA-256 held on one line ran every version page 158px off a phone. 29 September 2026. */
.ck-site-prose .ck-ref { white-space: normal; overflow-wrap: anywhere; }

.ck-site-prose ul {
  margin: 0 0 16px; padding-left: 20px; display: flex; flex-direction: column; gap: 8px;
}

.ck-site-prose strong { color: var(--site-ink); }
.ck-site-prose a { color: var(--site-teal-ink); }

/* ---- the closing call ------------------------------------------------------------------------ */

.ck-site-close { padding: clamp(48px, 7vw, 96px) 0 clamp(40px, 6vw, 72px); text-align: center; }

.ck-site-close h2 {
  font-size: clamp(1.75rem, 3.8vw, 2.75rem); font-weight: 700; line-height: 1.1;
  color: var(--ck-text-inverse); margin: 0 0 14px;
}

.ck-site-close p {
  color: var(--site-body-dark); max-width: 60ch; margin: 0 auto 28px;
  font-size: 1rem; line-height: 1.65;
}

.ck-site-close .ck-site-actions { justify-content: center; }

/* TWO CLASSES DEEP, BECAUSE A ONE-CLASS RULE LOSES TO .ck-site-band--dark p AND THE LOSS IS SILENT.
   That rule is a class and an element — 0-1-1 — and this kicker is a <p>; written as a bare class it
   scored 0-1-0, lost, and rendered in the muted body grey instead of teal. Nothing reports a rule
   that was overruled: the page draws, the words are there, and the only tell is a colour that is
   almost right. Same shape as A42's var() with a plausible fallback. */
.ck-site .ck-site-kicker {
  font-family: var(--font-mono); font-size: .6875rem; font-weight: 600;
  letter-spacing: .18em; text-transform: uppercase; color: var(--site-teal);
  margin: 0 0 14px;
}

/* ---- the foot -------------------------------------------------------------------------------- */

.ck-site-foot { background: var(--site-navy-deep); color: var(--site-body-dark); }

.ck-site-foot-inner {
  max-width: 1140px; margin: 0 auto; padding: clamp(36px, 5vw, 56px) clamp(16px, 4vw, 24px) 24px;
  display: grid; gap: clamp(24px, 4vw, 48px);
  grid-template-columns: minmax(0, 1.4fr) repeat(3, minmax(0, 1fr));
}

.ck-site-foot-brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; }
.ck-site-foot-mark img { height: 34px; width: auto; display: block; }
/* On the dark foot the name is white and "Sign" takes the brand's own light teal, which reads there. */
.ck-site-foot-mark .ck-site-wordmark { color: var(--ck-text-inverse); font-size: 1.375rem; }
.ck-site-foot-mark .ck-site-wordmark span { color: var(--site-teal); }

.ck-site-foot-blurb {
  margin: 14px 0 0; font-size: .875rem; line-height: 1.6; color: var(--site-body-dark);
  max-width: 34ch;
}

.ck-site-foot-col h3 {
  font-family: var(--site-display); font-size: 1rem; font-weight: 700;
  color: var(--ck-text-inverse); margin: 0 0 14px;
}

.ck-site-foot-col ul { margin: 0; padding: 0; list-style: none; display: grid; gap: 10px; }

.ck-site-foot-col a { font-size: .875rem; color: var(--site-teal); text-decoration: none; }
.ck-site-foot-col a:hover { color: var(--ck-text-inverse); text-decoration: underline; }

.ck-site-foot-base {
  max-width: 1140px; margin: 0 auto;
  padding: 20px clamp(16px, 4vw, 24px) 32px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  display: flex; flex-wrap: wrap; gap: 8px 20px; justify-content: space-between;
  font-size: .8125rem; color: var(--site-body-dark);
}

/* ---- the sign-up card ------------------------------------------------------------------------ */

/* THE FORM IS A WHITE CARD ON THE HERO'S OWN NAVY rather than a second full-page design. The page
   sells and asks in one screen: the reasons on the left, the fields on the right, and the header and
   foot of the site around both — which is the evidence a stranger has that there is a company behind
   the form they are typing a password into.

   THE FIELDS THEMSELVES ARE UNCHANGED AND SHARED. .ck-input, .ck-input-reveal, .ck-login-field and
   .ck-field-error are the anonymous-surface primitives this product has used since P1, and the
   sign-in page uses the same ones. What is site-specific is the CARD and the TYPE around them, which
   is why nothing below reaches a class Login.razor draws. */
.ck-site-hero-grid--form { align-items: start; }

.ck-site-form-solo { max-width: 520px; margin: 0 auto; }

.ck-site-form-card {
  background: var(--ck-surface); border-radius: var(--site-radius-lg);
  border: 1px solid rgba(255, 255, 255, .18);
  box-shadow: 0 24px 60px rgba(4, 15, 22, .45);
  padding: clamp(24px, 3vw, 34px);
}

.ck-site-form-title {
  font-family: var(--site-display); font-weight: 700; letter-spacing: -0.02em;
  font-size: 1.5rem; color: var(--site-ink); margin: 0 0 8px;
}

.ck-site-form-sub {
  font-size: .9375rem; line-height: 1.6; color: var(--site-body); margin: 0 0 18px;
}

.ck-site-form-sub strong { color: var(--site-ink); }

/* THE CHECK-YOUR-EMAIL CARD. 6 October 2026. Its heading is an h1 inside the hero, and `.ck-site-hero h1`
   (white, hero-sized) out-ranked `.ck-site-form-title`, so the card opened on an empty band: the heading
   was there, white on white. Scoped back here, where the card is the more specific thing. */
.ck-site-hero .ck-site-form-card .ck-site-form-title {
  font-size: 1.5rem; line-height: 1.2; letter-spacing: -0.02em; color: var(--site-ink); margin: 0 0 10px;
}
.ck-site-sent { text-align: center; }
.ck-site-sent .ck-site-form-sub { text-align: left; }
.ck-site-sent-icon {
  width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--site-tint); color: var(--site-teal-ink); font-size: 1.75rem;
}
.ck-site-sent-hint { color: var(--site-body); font-size: .875rem; }
.ck-site-sent form + form { margin-top: 10px; }
.ck-site-sent-change { min-height: 44px; }
.ck-site-sent-foot { text-align: center; }

/* THE SAME PARAGRAPH, SAYING SOMETHING DID NOT WORK. Item 6. It is a colour change and nothing else:
   the shape, the spacing and the weight are the sub's, because this is the same sentence in the same
   place reporting a different answer - not a different kind of block. */
.ck-site-form-warn, .ck-site-form-warn strong { color: var(--site-warn); }

.ck-site-form-card label {
  font-family: var(--site-text); font-size: .8125rem; font-weight: 700; color: var(--site-ink);
}

.ck-site-form-foot {
  font-size: .8125rem; line-height: 1.6; color: var(--site-body); margin: 16px 0 0;
}

.ck-site-form-foot a { color: var(--site-teal-ink); }

/* THE TWO FIELD HELPERS ARE RETINTED RATHER THAN REDEFINED. They are the app's own classes and are
   read here inside .ck-site, where the app's muted grey sits a shade too light against this card. */
.ck-site .ck-field-optional,
.ck-site .ck-field-hint { color: var(--site-body); font-family: var(--site-text); }

/* ---- laptop ---------------------------------------------------------------------------------- */

@media (max-width: 1000px) {
  .ck-site-hero-grid { grid-template-columns: minmax(0, 1fr); }
  .ck-site-form-card { max-width: 560px; }
  .ck-site-split { grid-template-columns: minmax(0, 1fr); }

  /* THE FIGURE GOES BACK UNDER THE WORDS ON EVERY ROW. Left in place, the flipped row would put a
     screenshot above a heading that has not been read yet, on the width where there is least room
     to recover from it. */
  .ck-site-split--flip .ck-site-split-figure { order: 0; }

  .ck-site-foot-inner { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---- phone ----------------------------------------------------------------------------------- */

@media (max-width: 640px) {
  .ck-site-bar { padding: 12px 16px; gap: 8px; }
  .ck-site-mark img { height: 30px; }
  .ck-site-mark .ck-site-wordmark { font-size: 1.25rem; }
  .ck-site-nav { gap: 2px; }
  .ck-site-nav a { font-size: .8125rem; padding: 7px 9px; }
  .ck-site-login { padding: 8px 14px; }

  /* THE SECONDARY LINKS GO AND THE LOGIN BUTTON STAYS. A bar that wraps to two lines on a phone
     pushes the page's own first line below the fold, and both of these are one scroll away in the
     foot of every page — signing in is what somebody came to the bar for. */
  .ck-site-nav a.ck-site-nav-extra { display: none; }

  .ck-site-actions .ck-site-btn { width: 100%; }
  .ck-site-foot-inner { grid-template-columns: minmax(0, 1fr); }
  .ck-site-ticks { gap: 8px 16px; }
}

/* ==================================================================================================
   27. SIGN-UP, AND THE TRIAL BANNER. Release E, Parts F and G.
   ==================================================================================================
   THE SIGN-UP FORM SHARES THE PRIMITIVES AND NOT THE CARD, WHICH REVERSES HALF OF WHAT WAS HERE.
   --------------------------------------------------------------------------------------------------
   The superseded note read: "THE SIGN-UP FORM IS THE LOGIN CARD WITH FIVE FIELDS IN IT rather than a
   second design. It is the same anonymous surface, drawn on the same gradient, with the same
   primitives." The primitives half still holds and is load-bearing - .ck-input, .ck-input-reveal,
   .ck-login-field and .ck-field-error are shared, because the page renders statically for the reason
   the sign-in page does: a rate limit cannot see SignalR, so the page has to post.

   The CARD half is gone. That page now draws on the public site's own layout, beside the reasons to
   start a trial, because it is the page a stranger is sent to by an advertisement rather than the
   page somebody who already knows what this is comes back to. .ck-login-card-wide went with it - a
   rule nothing selects is a rule that reads as still in use. See section 26.

   NO NEW COLOUR OR RADIUS. Everything below is an existing token. */

/* "optional" beside a label, so nobody hunts for an ABN they do not have to hand. Small, quiet, and
   in the label rather than in a hint below it, where it would be read after the decision. */
.ck-field-optional {
  font-weight: 400; font-size: .75rem; color: var(--ck-text-muted); margin-left: 6px;
}

.ck-field-hint {
  font-size: .75rem; line-height: 1.5; color: var(--ck-text-muted); margin: 6px 0 0;
}

.ck-login-foot { margin-top: 14px; }

/* ---- the trial banner ------------------------------------------------------------------------- */

/* G1. IN THE APP, ABOVE THE PAGE, AND ONLY WHILE A TRIAL IS RUNNING. It says the two things a firm
   needs - how long is left and how much of the allowance is spent - and offers the one action that
   changes either. A banner that merely announced the trial would be an advertisement on a page
   somebody opened to do work. */
.ck-trial-bar {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  margin: 0 0 16px; padding: 10px 16px;
  border: 1px solid var(--ck-blue-border); border-radius: var(--ck-radius-md);
  background: var(--ck-blue-ghost);
  font-size: .875rem; color: var(--ck-text);
}

.ck-trial-bar i { color: var(--ck-blue-active); }

.ck-trial-bar-fact { color: var(--ck-text-secondary); }

.ck-trial-bar-fact strong { color: var(--ck-text); font-weight: 600; }

.ck-trial-bar-sep { color: var(--ck-text-muted); }

/* THE ACTION SITS AT THE END OF THE ROW AND NEVER IN THE MIDDLE OF THE SENTENCE. margin-left:auto
   rather than a spacer element, so the bar still reads left to right when it wraps on a phone. */
.ck-trial-bar-action { margin-left: auto; }

/* ENDING SOON AND ENDED ARE TWO DIFFERENT SENTENCES AND TWO DIFFERENT COLOURS. A54's rule: a firm
   with three days left is being told something they can act on, and a firm whose trial has ended is
   being told why a button stopped working. */

.ck-trial-bar-ended {
  border-color: #F6CFCB; background: var(--ck-danger-light);
}

.ck-trial-bar-ended i { color: var(--ck-danger); }

@media (max-width: 640px) {
  .ck-trial-bar { font-size: .8125rem; }
  .ck-trial-bar-action { margin-left: 0; width: 100%; }
}

/* ---- the first-run checklist. Release E, item F4 -------------------------------------------- */

/* IT LOOKS LIKE A PANEL AND NOT LIKE AN ADVERTISEMENT. A coloured band across the dashboard would
   read as a promotion on a page somebody opened to do work; this is the product's own panel surface
   with a rule of its own colour, so it belongs to the page rather than interrupting it. */
/* NO LEFT ACCENT RAIL. It made the one card on Home that is temporary look like a different KIND
   of thing from the panels beside it - and a rail on a rounded card is one of the shapes this
   sheet's own note about generated-looking design warns about. It is a panel like the others; what
   makes it stand out is that it says "Getting started". */
.ck-welcome {
  background: var(--ck-surface); border: 1px solid var(--ck-blue-border);
  border-radius: var(--ck-radius-md); padding: 18px 20px; margin: 0 0 16px;
}

.ck-welcome-head {
  display: flex; align-items: flex-start; justify-content: space-between; gap: 16px;
  margin-bottom: 12px;
}

.ck-welcome-title { font-size: 1rem; margin: 0; color: var(--ck-text); }

.ck-welcome-subtitle {
  font-size: .8125rem; margin: 4px 0 0; color: var(--ck-text-secondary);
}

/* A FLAT BUTTON IS NOT PAINTED THE COLOUR OF THE SURFACE BEHIND IT - A67. This is a .ck-btn with no
   variant, so it needs its own resting colour: left to inherit it would be the body text on a white
   panel, which is the white-on-white failure that shipped eight times. */
.ck-welcome-dismiss {
  background: transparent; border-color: transparent;
  color: var(--ck-text-secondary); font-size: .8125rem; padding: 4px 8px; flex: 0 0 auto;
}

.ck-welcome-dismiss:hover { color: var(--ck-text); background: var(--ck-surface-subtle); }

.ck-welcome-steps {
  list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px;
}

.ck-welcome-steps li {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border: 1px solid var(--ck-border);
  border-radius: var(--ck-radius-sm); background: var(--ck-surface-subtle);
}

.ck-welcome-steps li > i { color: var(--ck-blue); width: 18px; text-align: center; }

.ck-welcome-step-words { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }

.ck-welcome-step-words strong { font-size: .9375rem; color: var(--ck-text); font-weight: 600; }

.ck-welcome-step-words span { font-size: .8125rem; color: var(--ck-text-secondary); }

.ck-welcome-step-go { flex: 0 0 auto; font-size: .875rem; padding: 7px 14px; }

.ck-welcome-step-skip {
  flex: 0 0 auto; background: none; border: 0; padding: 4px 6px; cursor: pointer;
  font-family: inherit; font-size: .8125rem; color: var(--ck-text-muted); text-decoration: underline;
}

.ck-welcome-step-skip:hover { color: var(--ck-text-secondary); }

@media (max-width: 720px) {
  .ck-welcome-steps li { flex-wrap: wrap; }
  .ck-welcome-step-go { width: 100%; }
}

/* ---------------------------------------------------------------------------
   THE RECONNECT NOTICE. Release E, item 8b.

   IT IS THE FRAMEWORK'S DIALOG AND THESE RULES ONLY DRESS IT. .NET 10 renders
   <dialog id="components-reconnect-modal"> itself and toggles the classes
   below as the connection drops, retries and gives up - so there is nothing
   here deciding when anything is shown, which is what stops this being a
   second thing that can be wrong.

   THE WORDS ARE REPLACED BECAUSE THE FRAMEWORK'S ARE THIS PRODUCT'S PLUMBING.
   "Rejoining the server" is a sentence about a circuit, and the person most
   likely to read it is a firm's client part-way through signing a document.
   Replaced through ::after rather than by a script, so a class Blazor renames
   simply stops matching and its own words come back - the safe direction.
   --------------------------------------------------------------------------- */
#components-reconnect-modal {
  color-scheme: light only;
  border: 1px solid var(--ck-border-strong, #B8D2DC);
  border-radius: var(--ck-radius-md, 8px);
  box-shadow: 0 6px 24px rgba(15, 37, 53, .18);
  color: var(--ck-text, #0F2535);
  font-family: var(--font-sans);
  font-size: .9375rem;
  padding: 20px 24px;
  max-width: 420px;
  text-align: center;
}

#components-reconnect-modal::backdrop { background: rgba(15, 37, 53, .35); }

/* THE THREE SENTENCES, IN WORDS SOMEBODY OUTSIDE THIS PRODUCT WOULD USE. The
   originals are hidden by zeroing the font rather than by display:none, so the
   element keeps its place in the dialog's own layout and an unmatched class
   leaves the framework's text exactly where it was. */
#components-reconnect-modal .components-reconnect-first-attempt-visible,
#components-reconnect-modal .components-reconnect-repeated-attempt-visible,
#components-reconnect-modal .components-reconnect-failed-visible { font-size: 0; }

#components-reconnect-modal .components-reconnect-first-attempt-visible::after {
  content: "Reconnecting…";
  font-size: .9375rem;
}

#components-reconnect-modal .components-reconnect-repeated-attempt-visible::after {
  content: "Still reconnecting. Nothing you have typed or drawn is lost.";
  font-size: .9375rem;
}

#components-reconnect-modal p.components-reconnect-failed-visible::after {
  content: "The connection has not come back. Reloading brings back what you had.";
  font-size: .9375rem;
}

/* THE BUTTON KEEPS ITS OWN LABEL, because the framework puts its retry handler
   on that element and replacing the element would replace the handler. */
#components-reconnect-modal button { font-size: .875rem; }

#components-reconnect-modal button::after { content: none; }

/* ==================================================================================================
   28. YOUR SERVICES. Phase 4, the "Your services library" artboard.
   ==================================================================================================
   A list on the left and the service being edited beside it, as the artboard draws them. Below the width
   where both fit, the editor drops under the list rather than squeezing it: a fee column that truncates
   is the defect this sheet already records three times. */

.ck-page-lede {
    margin: 0 0 16px;
    color: var(--ck-text-secondary);
}

/* ONE COLUMN AT REST, TWO WHILE A SERVICE IS OPEN. Overnight walk: the second column was reserved for the
   editor whether or not it was open, so the list sat in half the page with the other half empty and every
   service name cut short. */
.ck-services {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    gap: 20px;
    align-items: start;
}

.ck-services.is-editing { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }

@media (max-width: 1280px) {
    .ck-services.is-editing { grid-template-columns: minmax(0, 1fr); }
}

/* A GRID CELL THAT HOLDS A SENTENCE WRAPS RATHER THAN RUNNING OFF THE PANEL. The export history's contents ran
   past the grid's edge, cut mid-word, because a grid cell does not wrap by default. */
.ck-cell-wrap {
    display: block;
    white-space: normal;
}

.ck-services-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 12px;
    flex-wrap: wrap;
}

.ck-services-head .ck-scope-tabs {
    display: flex;
    gap: 8px;
}

.ck-services-editor {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-services-editor-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-bottom: 4px;
}

.ck-services-charging {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 20px;
    margin-bottom: 4px;
}

.ck-services-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    margin-top: 12px;
    flex-wrap: wrap;
}

/* ==================================================================================================
   29. THE REQUEST SCREEN. Phase 5, the "1. Building the request" artboard.
   ==================================================================================================
   One page in place of the four-step wizard: the email across the top, the signing steps as boxes of
   cards left to right, and the documents as rows with a None / View / Sign switch under each person.
   A person's colour is the placer's own (.ck-field-mark--N, FieldPalette), so a card, a column head and
   the boxes placed for them later are one colour throughout. */

.ck-build-bar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.ck-build-actions {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.ck-btn-danger-quiet.e-btn {
    color: var(--ck-danger);
    border-color: var(--ck-danger-light);
    background: var(--ck-surface);
}

.ck-build-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(280px, 380px);
    gap: 18px;
    margin-bottom: 18px;
}

@media (max-width: 1200px) {
    .ck-build-top { grid-template-columns: minmax(0, 1fr); }
}

.ck-build-email,
.ck-build-settings {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0;
}

.ck-build-email-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
}

.ck-build-email-template {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.ck-build-email-preview {
    display: flex;
    justify-content: flex-end;
}

/* THE EMAIL PREVIEW. 14 October 2026. The envelope is the three lines an inbox shows; the frame holds the card
   the send produces, with its own styles, so nothing here reaches inside it. A fixed height because a sandboxed
   frame cannot report how tall its contents are, and the card scrolls inside it. */
.ck-email-preview-who {
    margin-bottom: 12px;
}

.ck-email-preview-envelope {
    display: grid;
    grid-template-columns: max-content minmax(0, 1fr);
    gap: 4px 14px;
    margin: 0 0 12px 0;
    font-size: .875rem;
}

.ck-email-preview-envelope dt {
    color: var(--ck-text-muted);
    font-weight: 600;
}

.ck-email-preview-envelope dd {
    margin: 0;
    overflow-wrap: anywhere;
}

/* ON A PHONE the dialog is asked for 720px and takes what the screen has, and its buttons are thumb-sized. */
.ck-email-preview.e-dialog {
    max-width: calc(100vw - 16px);
    max-height: calc(100vh - 16px);
}

@media (max-width: 767.98px) {
    .ck-email-preview .e-footer-content .e-btn,
    .ck-email-editor-body .e-btn.ck-email-editor-preview { min-height: 44px; }
    .ck-email-preview .e-dlg-header-content .e-dlg-closeicon-btn { min-width: 44px; min-height: 44px; }
    .ck-email-preview .e-input-group, .ck-email-preview .e-ddl { min-height: 44px; }
    .ck-email-preview .e-input-group input.e-input { min-height: 44px; font-size: 1rem; }
}

.ck-email-preview-frame {
    display: block;
    width: 100%;
    height: min(560px, 55vh);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: #F2F6F9;
    margin-bottom: 8px;
}

.ck-build-link {
    font-size: .8125rem;
    font-weight: 600;
}

.ck-build-pair {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 12px;
}

.ck-build-steps,
.ck-build-docs {
    margin-bottom: 18px;
}

.ck-step-row {
    display: flex;
    gap: 14px;
    align-items: stretch;
    overflow-x: auto;
    padding-bottom: 6px;
}

.ck-step {
    border: 1px dashed var(--ck-border-strong);
    border-radius: var(--ck-radius-lg);
    padding: 10px;
    background: var(--ck-surface-subtle);
    display: flex;
    flex-direction: column;
    gap: 8px;
    flex-shrink: 0;
}

.ck-step-droppable {
    border-color: var(--ck-blue);
    background: var(--ck-blue-ghost);
}

.ck-step-name {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ck-text-secondary);
}

.ck-step-cards {
    display: flex;
    gap: 10px;
    align-items: stretch;
}

.ck-rcard {
    width: 240px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-top: 4px solid var(--ck-mark);
    border-radius: var(--ck-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: grab;
}

.ck-rcard-head {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-rcard-initials {
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--ck-mark);
    color: var(--ck-text-inverse);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .6875rem;
    font-weight: 700;
    flex-shrink: 0;
}

.ck-rcard-initials--small {
    width: 20px;
    height: 20px;
    font-size: .5625rem;
}

.ck-rcard-name {
    flex-grow: 1;
    font-weight: 600;
    min-width: 0;
    overflow-wrap: anywhere;
}

.ck-rcard-email,
.ck-rcard-note {
    font-size: .75rem;
    color: var(--ck-text-muted);
    overflow-wrap: anywhere;
}

.ck-rcard-mobile {
    display: flex;
    flex-direction: column;
    gap: 4px;
    font-size: .75rem;
}

.ck-step-add.e-btn,
.ck-step-new.e-btn {
    border: 1px dashed var(--ck-border-strong);
    background: var(--ck-surface);
    min-width: 110px;
    white-space: normal;
}

.ck-step-picker {
    display: flex;
    align-items: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    margin-top: 12px;
    max-width: 760px;
}

.ck-step-picker .e-ddl {
    flex: 1 1 320px;
}

.ck-docs-grid {
    display: grid;
    /* THE NAME AND THE ACTIONS SHARE WHAT THE PEOPLE LEAVE, AND THE ACTIONS WRAP INSIDE THEIR OWN TRACK. 7 October 2026:
       fixed pixels ran the buttons past the card's right edge. A person's switch needs about 104px. */
    grid-template-columns: minmax(0, 1.4fr) repeat(var(--ck-docs-people, 1), minmax(104px, 150px)) minmax(130px, 1fr);
    gap: 10px;
    align-items: center;
}

/* NO PHONE LAYOUT HERE, deliberately: below 768px this page is CkLargerScreen's notice and the card is not drawn. */

.ck-docs-head {
    font-size: .75rem;
    font-weight: 700;
    color: var(--ck-text-secondary);
    padding-bottom: 6px;
}

.ck-docs-person {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
}

.ck-docs-row {
    padding: 12px 0;
    border-top: 1px solid var(--ck-border);
}

.ck-docs-title {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.ck-docs-name {
    font-weight: 600;
    overflow-wrap: anywhere;
}

.ck-docs-meta {
    font-size: .75rem;
    color: var(--ck-text-muted);
}

.ck-docs-meta--owed {
    color: var(--ck-warning);
    font-weight: 600;
}

.ck-ask-switch {
    display: flex;
}

.ck-ask-switch .e-btn {
    flex: 1 1 0;
    min-width: 0;
    padding-left: 4px;
    padding-right: 4px;
}

.ck-ask-switch .e-btn.ck-ask-on {
    background: var(--ck-text);
    border-color: var(--ck-text);
    color: var(--ck-text-inverse);
}

.ck-docs-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    flex-wrap: wrap;
    min-width: 0;
}

.ck-docs-actions .e-btn { max-width: 100%; white-space: normal; }

.ck-docs-add {
    display: flex;
    gap: 12px;
    padding-top: 12px;
    border-top: 1px solid var(--ck-border);
    flex-wrap: wrap;
}

.ck-build-full {
    font-size: .875rem;
    white-space: nowrap;
}

.ck-drop {
    flex: 1 1 360px;
    min-height: 64px;
    border: 2px dashed var(--ck-blue-border);
    border-radius: var(--ck-radius-md);
    background: var(--ck-blue-ghost);
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 8px 12px;
    color: var(--ck-blue-strong);
    flex-wrap: wrap;
}

/* THE UPLOADER'S OWN BOX WOULD BE A SECOND DASHED RECTANGLE INSIDE THIS ONE, measured on the first walk.
   The drop target is .ck-drop through DropArea, so the control keeps its Browse button and loses its
   border, its ground and its "Or drop files here", which the sentence beside it already says. */
.ck-drop .e-upload {
    border: 0;
    background: transparent;
    width: auto;
}

.ck-drop .e-file-drop { display: none; }

.ck-docs-template.e-btn {
    border: 1px dashed var(--ck-border-strong);
    min-height: 64px;
    flex: 0 0 220px;
}

.ck-blockers,
.ck-send-summary {
    margin: 0 0 8px;
    padding-left: 20px;
}

/* ==================================================================================================
   30. FILLING IN A TEMPLATE. Phase 6, the "2. Filling in a template" artboard.
   ==================================================================================================
   Questions on the left, the document on the right. Each stretch of the document is marked by where
   its words came from: the people on the request, the firm's services, an answer, or still to answer.
   "Still to answer" is dashed and amber and is a button, because pressing it goes to its question. */

.ck-fill-bar {
    display: flex;
    align-items: center;
    gap: 12px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

/* WHAT A CHOSEN PERSON OR THE BUSINESS DOES NOT HAVE. Overnight, item 6: said where it is fixed, under the
   people it belongs to. */
.ck-fill-missing {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--ck-border);
}

.ck-fill-missing-row {
    display: flex;
    gap: 8px;
    align-items: center;
}

.ck-fill-missing-row .ck-input { flex: 1 1 auto; min-width: 0; }

.ck-fill-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    color: var(--ck-text);
}

.ck-fill-progress {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-left: auto;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ck-text-secondary);
}

.ck-fill-meter {
    width: 160px;
    height: 8px;
    border-radius: 4px;
    background: var(--ck-border);
    overflow: hidden;
}

.ck-fill-meter-done {
    height: 8px;
    background: var(--ck-blue);
}

.ck-fill {
    display: grid;
    grid-template-columns: minmax(360px, 560px) minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

@media (max-width: 1280px) {
    .ck-fill { grid-template-columns: minmax(0, 1fr); }
}

.ck-fill-questions {
    display: flex;
    flex-direction: column;
    gap: 16px;
    min-width: 0;
}

.ck-fill-card {
    margin: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.ck-fill-card-head {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 12px;
    flex-wrap: wrap;
}

.ck-fill-heading {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
}

.ck-fill-question.is-owed > label {
    color: var(--ck-text);
}

.ck-fill-unit {
    display: flex;
    align-items: center;
    gap: 8px;
}

.ck-fill-service {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
}

.ck-fill-service.is-ticked {
    border-color: var(--ck-blue-border);
    background: var(--ck-blue-ghost);
}

.ck-fill-service-fee {
    font-weight: 600;
    white-space: nowrap;
}

.ck-fill-option {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    min-height: 44px;
}

.ck-fill-option > span {
    display: flex;
    flex-direction: column;
}

.ck-fill-document {
    background: var(--ck-page-bg);
    border-radius: var(--ck-radius-lg);
    padding: 20px;
    display: flex;
    flex-direction: column;
    gap: 14px;
    min-width: 0;
}

.ck-fill-legend {
    display: flex;
    align-items: center;
    gap: 14px;
    flex-wrap: wrap;
    font-size: .75rem;
    font-weight: 600;
}

.ck-fill-document-title {
    font-size: .8125rem;
    font-weight: 700;
    color: var(--ck-text-secondary);
    margin-right: auto;
}

.ck-fill-key::before {
    content: "";
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 3px;
    margin-right: 6px;
    vertical-align: -2px;
}

.ck-fill-key--contact::before { background: var(--ck-blue-light); }
.ck-fill-key--services::before { background: var(--ck-info-light); }
.ck-fill-key--owed::before { border: 2px dashed var(--ck-warning); background: var(--ck-warning-light); }

.ck-fill-paper {
    background: var(--ck-surface);
    border-radius: var(--ck-radius-xs);
    padding: 40px 48px;
    line-height: 1.65;
    color: var(--ck-text);
    box-shadow: var(--ck-shadow-sm);
}

.ck-fill-paper p {
    margin: 0 0 4px;
    white-space: pre-wrap;
    overflow-wrap: anywhere;
}

.ck-fill-paper p.ck-fill-gap {
    min-height: .8em;
}

.ck-fill-mark {
    padding: 0 4px;
    border-radius: 3px;
}

.ck-fill-mark--fromcontact { background: var(--ck-blue-light); }
.ck-fill-mark--fromservices { background: var(--ck-info-light); }
.ck-fill-mark--answered { background: var(--ck-success-light); }

.ck-fill-mark--box {
    border: 1px solid var(--ck-border-strong);
    font-size: .75rem;
    color: var(--ck-text-muted);
}

.ck-fill-mark--owed {
    border: 2px dashed var(--ck-warning);
    background: var(--ck-warning-light);
    color: var(--ck-text);
    font: inherit;
    font-size: .8125rem;
    font-weight: 600;
    cursor: pointer;
}

/* ================================================================================================
   31. BOXES A SIGNER FILLS IN, ON THE SIGNING PAGE. Phase 7.
   ------------------------------------------------------------------------------------------------
   Listed above the name they sign with, each saying which document and page it lands on, because a
   question with no place attached reads as a form about something else.
   ================================================================================================ */
.ck-sign-boxes {
    display: flex;
    flex-direction: column;
    gap: 10px;
    margin-bottom: 14px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--ck-border);
}

.ck-sign-box {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ck-sign-box-tick {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    font-weight: 600;
    color: var(--ck-text);
}

.ck-sign-box-tick input { margin-top: 3px; }

.ck-sign-box-where {
    font-size: .8125rem;
    color: var(--ck-text-muted);
}

/* ================================================================================================
   32. PLACING BOXES: TWO SIDEBARS AND THE PAGE BETWEEN THEM. 1 October 2026.
   ------------------------------------------------------------------------------------------------
   Who and what on the left, the document in the middle, what has been placed on the right, so the
   page somebody clicks on is never below the fold. The columns scroll on their own and the row is
   sized to the window, because a sidebar that scrolled with the page would leave the choice behind
   as soon as somebody scrolled down to page three.

   BELOW 1300px THE RIGHT COLUMN GOES UNDER THE OTHER TWO. At laptop width three columns leave the
   document about 370px wide, which is a page nobody can aim a click at; the list of what was placed
   is the one that can afford to be further away.
   ================================================================================================ */
.ck-place-layout {
    display: grid;
    grid-template-columns: 270px minmax(0, 1fr) 330px;
    gap: 16px;
    height: calc(100vh - 230px);
    min-height: 560px;
}

.ck-place-side {
    display: flex;
    flex-direction: column;
    gap: 10px;
    min-height: 0;
    overflow-y: auto;
    overscroll-behavior: contain;
    padding: 14px;
}

.ck-place-side-title {
    margin: 0;
    font-size: 1rem;
    font-weight: 700;
    color: var(--ck-text);
}

.ck-place-hint {
    margin: 0;
    font-size: .8125rem;
    color: var(--ck-text-muted);
}

.ck-place-doc {
    display: flex;
    min-height: 0;
    padding: 8px;
}

.ck-place-viewer {
    flex: 1 1 auto;
    min-height: 0;
    height: 100%;
}

.ck-place-person {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 8px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-sm);
    background: var(--ck-surface);
}

/* THE PERSON THE NEXT CLICK PLACES A BOX FOR. A border and a tint, not the tint alone. */
.ck-place-person--on {
    border-color: var(--ck-blue-strong);
    background: var(--ck-blue-ghost);
    box-shadow: inset 3px 0 0 var(--ck-blue-strong);
}

.ck-place-person .ck-place-person-pick {
    display: flex;
    align-items: center;
    width: 100%;
    padding: 2px 4px;
    text-align: left;
    text-transform: none;
}

.ck-place-person-name {
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-weight: 600;
    color: var(--ck-text);
}

.ck-place-person-group {
    flex: 0 0 auto;
    font-size: .75rem;
    color: var(--ck-text-muted);
}

.ck-place-group {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ck-place-kinds {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
}

.ck-place-kinds .ck-place-kind {
    min-width: 0;
    padding-left: 6px;
    padding-right: 6px;
    white-space: normal;
}

.ck-place-kinds .ck-place-kind.ck-ask-on {
    background: var(--ck-text);
    border-color: var(--ck-text);
    color: var(--ck-text-inverse);
}

/* DOCUMENTS SIGNED ELSEWHERE, CHECKED BEFORE THEY ARE KEPT. 6 October 2026. One card per file. */
.ck-elsewhere-card {
  border: 1px solid var(--ck-border);
  border-radius: 8px;
  padding: 14px 16px;
  margin-bottom: 12px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ck-elsewhere-head {
  display: flex;
  align-items: center;
  gap: 10px;
}

.ck-elsewhere-head strong { flex: 1; overflow-wrap: anywhere; }

.ck-elsewhere-problem { color: var(--ck-danger); margin: 0; }

.ck-elsewhere-fields {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 10px;
}

.ck-elsewhere-signer {
  display: grid;
  /* EVERY COLUMN BUT THE DATE MAY SHRINK, so the row always fits its card. 7 October 2026: with the Company box
     added, the minimums summed past the card and Remove was drawn outside it. A box too narrow for what it
     holds clips the text, which is still all there to read and edit. */
  grid-template-columns: minmax(0, 1.1fr) minmax(0, 1.4fr) minmax(0, 1.2fr) minmax(128px, .9fr) minmax(0, 1fr) auto;
  gap: 8px;
  align-items: center;
}

.ck-elsewhere-signer > * { min-width: 0; }

.ck-elsewhere-match { font-size: .875rem; overflow-wrap: anywhere; }

@media (max-width: 767.98px) {
  .ck-elsewhere-signer { grid-template-columns: 1fr; }
}

/* THE CONTACT PAGE'S TWO TABS SAY WHAT THEY SAY. Syncfusion capitalises every word of a tab header, which
   turned "Signed in ChekSign" into "Signed In ChekSign". */
.ck-contact-tabs .e-tab .e-tab-header .e-toolbar-item .e-tab-text { text-transform: none; }

/* A SIGNED COPY ON THE CONTACT PAGE: Preview and Download side by side, one line per document, with the
   document named first where a request held several. */
.ck-contact-copy { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.ck-contact-copy + .ck-contact-copy { margin-top: 6px; }
.ck-contact-copy-title { font-size: .875rem; overflow-wrap: anywhere; flex-basis: 100%; }

/* THE SIGNED-ELSEWHERE ROW'S ACTIONS ON ONE LINE, and both tabs' links at the size of a control in a grid row
   rather than a page's own button: at full size Remove ran past the grid's edge. */
.ck-contact-actions { display: flex; flex-wrap: nowrap; align-items: center; gap: 6px; }

/* A LINE UNDER A ROW'S TITLE: the name a request went out under, the people a document names. */
.ck-contact-row-note { font-size: .8125rem; color: var(--ck-text-muted); overflow-wrap: anywhere; white-space: normal; }
.ck-elsewhere-unlinked { margin-left: 6px; }
.ck-elsewhere-link { margin-left: 4px; }

/* THE LIST'S DOWNLOAD IS THE COMPACT SIZE, as on a contact's page; at full size it dwarfed Preview beside it. */
#documents-brought-across .ck-btn { font-size: .875rem; padding: 6px 10px; gap: 6px; white-space: nowrap; }
.ck-elsewhere-likeness { display: flex; flex-direction: column; gap: 6px; margin: 0; }
.ck-contact-tabs .ck-btn { font-size: .875rem; padding: 6px 10px; gap: 6px; white-space: nowrap; }

/* THE PREVIEW DIALOG'S DOCUMENT FILLS IT. The dialog is 90vh; the pane takes what its header leaves. */
.ck-document-preview .e-dlg-content { padding: 0; overflow: hidden; }
.ck-document-preview-pane { height: calc(90vh - 70px); }

/* A DOCUMENT DRAWN IN PLACE, on the Fill in page. Tall enough to read a page without the whole screen. */
.ck-dialog-subject { overflow-wrap: anywhere; }

.ck-place-status { min-height: 1.35rem; margin: 2px 0 0; font-size: .875rem; font-weight: 600; color: var(--ck-success, #2e7d32); }

.ck-document-pane { height: 75vh; min-height: 420px; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); overflow: hidden; }
/* A VIEWER STILL LOADING WHEN ITS VIEW IS LEFT, kept off screen until it has loaded (RequestFillIn), because taking it
   out of the page mid-load ends in Syncfusion calling back through a disposed reference. */
/* WHERE THE SPINNER GOES WHILE THE DOCUMENT IS FIRST DRAWN: the pane's own size, so nothing moves when it arrives, and
   its own positioned box, so the spinner's cover stops at it rather than reaching the view buttons above. */
.ck-fill-drawing { position: relative; height: 75vh; min-height: 420px; }
.ck-fill-page-settling { position: fixed; left: -10000px; top: 0; width: 800px; visibility: hidden; pointer-events: none; }
.ck-fill-legend .e-btn { margin-left: 4px; }

/* WHERE A PASTED SCREENSHOT GOES. The page takes a paste anywhere; this says so where somebody is looking. */
.ck-import-paste-shot {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 14px 16px;
  margin-bottom: 10px;
  border: 1px dashed var(--ck-border-strong);
  border-radius: 8px;
  color: var(--ck-text-muted);
}

.ck-import-paste-shot:focus-visible {
  outline: 2px solid var(--ck-blue);
  outline-offset: 2px;
}

/* SUGGESTED BY CLAUDE, PLACED BY YOU. 6 October 2026. A block below the box kinds, ruled off from them
   because it is a different act: asking for boxes rather than placing one. */
.ck-place-suggest {
  margin-top: 16px;
  padding-top: 14px;
  border-top: 1px solid var(--ck-border);
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.ck-place-suggest-refusal {
  color: var(--ck-danger);
}

.ck-place-suggest-list {
  list-style: none;
  margin: 0;
  padding: 0;
  max-height: 260px;
  overflow-y: auto;
  font-size: .8125rem;
}

.ck-place-suggest-list li {
  padding: 6px 0;
  border-bottom: 1px solid var(--ck-border);
}

.ck-place-suggest-why {
  display: block;
  color: var(--ck-text-muted);
  overflow-wrap: anywhere;
}

.ck-place-options {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding-top: 8px;
    border-top: 1px solid var(--ck-border);
}

.ck-place-apply { margin-top: 14px; }

/* TWO TABS IN A 330px COLUMN. Syncfusion's own header padding and capitalisation push the second
   one behind a scroll arrow at this width, which hides "Saved arrangements" entirely. */
.ck-place-side .e-tab .e-tab-header .e-toolbar-item .e-tab-wrap {
    padding-left: 8px;
    padding-right: 8px;
}

.ck-place-side .e-tab .e-tab-header .e-tab-text {
    font-size: .8125rem;
    text-transform: none;
}

.ck-placed-person {
    display: flex;
    align-items: center;
    margin-top: 12px;
    font-weight: 600;
    font-size: .875rem;
    color: var(--ck-text);
}

.ck-placed-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 6px 0 6px 8px;
    border-bottom: 1px solid var(--ck-border);
}

.ck-placed-body {
    flex: 1 1 auto;
    min-width: 0;
}

.ck-placed-what {
    font-size: .875rem;
    color: var(--ck-text);
}

.ck-placed-meta {
    font-size: .75rem;
    color: var(--ck-text-muted);
}

.ck-placed-actions {
    display: flex;
    flex-direction: column;
}

@media (max-width: 1300px) {
    .ck-place-layout {
        grid-template-columns: 240px minmax(0, 1fr);
        grid-template-rows: minmax(560px, calc(100vh - 230px)) auto;
        height: auto;
    }

    .ck-place-right {
        grid-column: 1 / -1;
        max-height: 420px;
    }
}

@media (max-width: 900px) {
    .ck-place-layout {
        grid-template-columns: minmax(0, 1fr);
        height: auto;
    }

    .ck-place-doc { height: 70vh; }
}

/* ================================================================================================
   33. PHONES. Mobile pass, 3 October 2026.
   ------------------------------------------------------------------------------------------------
   CLIENTS MOSTLY SIGN ON PHONES, and the signer path measured in an emulated iPhone 13 and Pixel 7
   fitted the screen everywhere and was built for a mouse everywhere: twenty-odd controls between
   18px and 39px tall, against the 44px a thumb reliably hits (Apple's figure, and WCAG 2.5.5's). The
   summaries that open "What is this?" and "I cannot sign this" were 21px; the code box was 30.

   `pointer: coarse` OR a narrow window, because they answer different questions and either is enough:
   a tablet is wide and still a finger, and a narrow desktop window is still a page somebody may be
   reading on a phone-sized screen. Sizes only - colour stays in section 1c.
   ================================================================================================ */
@media (pointer: coarse), (max-width: 767.98px) {
    /* EVERY ANONYMOUS SURFACE: the signing page, /verify, the sign-in and the refusals. */
    .ck-anon-shell .e-btn,
    .ck-anon-shell .ck-btn,
    .ck-anon-shell .ck-input,
    .ck-anon-shell select,
    .ck-anon-shell .e-input-group,
    .ck-anon-shell .e-input-group input.e-input {
        min-height: 44px;
    }

    .ck-anon-shell .e-btn,
    .ck-anon-shell .ck-btn { min-width: 44px; }

    /* A summary is a control - it opens the decline and the explainer - and was 21px of text. */
    .ck-anon-shell details > summary {
        min-height: 44px;
        padding-block: 11px;
        box-sizing: border-box;
    }

    /* The whole row takes the tap, so the row is the target. */
    .ck-sign-box-tick {
        min-height: 44px;
        align-items: center;
    }

    /* The legal links at the foot of every anonymous page: padded rather than enlarged, so the line
       still reads as a footer. */
    .ck-anon-legal a {
        display: inline-block;
        min-height: 44px;
        min-width: 44px;
        padding: 13px 6px;
        box-sizing: border-box;
        text-align: center;
    }

    /* THE VIEWER'S OWN TOOLBAR AND SIDE RAIL, at 30x32 out of the box. Syncfusion sizes these for a
       mouse; the toolbar already pans sideways when it runs out of room, so larger buttons cost a
       swipe to reach Download rather than a missed tap on Next page. */
    .ck-viewer-pane .e-pv-toolbar .e-toolbar-item .e-btn,
    .ck-viewer-pane .e-pv-toolbar .e-hor-nav,
    .ck-viewer-pane .e-pv-sidebar-toolbar .e-btn {
        min-width: 44px;
        min-height: 44px;
    }

    /* AND THE ICON BUTTONS CARRY A FIXED WIDTH OF THEIR OWN, which a min-width on the same specificity
       loses to: measured 30px wide and 44 tall after the rule above. Named by the icon-button class the
       viewer gives them, so a text button in the same strip keeps its own width. */
    .ck-viewer-pane .e-pdfviewer .e-pv-toolbar .e-toolbar-item .e-btn.e-tbar-btn {
        width: 44px;
        min-width: 44px;
    }

    .ck-viewer-pane .e-pv-toolbar .e-toolbar-items,
    .ck-viewer-pane .e-pv-toolbar .e-toolbar-item { min-height: 44px; }

    .ck-viewer-pane .e-pv-toolbar input.e-input { min-height: 44px; }
}

/* The help block ran edge to edge on a phone while the card above it has a gutter. Width only: on a
   wide touch screen it is centred by its own auto margins and must stay so. */
@media (max-width: 791.98px) {
    .ck-sign-help { margin-inline: 16px; }
    .ck-sign-offer { margin-inline: 16px; width: auto; }
}

/* THE LISTS: one card per row on a phone, the grid everywhere else. Both are rendered from the same
   rows; this decides which is drawn. `.ck-phone-hide` also takes the bulk-selection bar away, because
   the cards carry no tick boxes and a bar about ticking nothing is a control with no downstream. */
.ck-phone-cards { display: none; }

/* THE EDITORS' NOTICE, drawn only on a phone - see CkLargerScreen. */
.ck-larger-screen { display: none; }

@media (max-width: 767.98px) {
    .ck-phone-hide,
    .ck-select-bar.ck-phone-hide { display: none; }

    .ck-phone-cards {
        display: flex;
        flex-direction: column;
        gap: 8px;
        list-style: none;
        margin: 0;
        padding: 0;
    }

    .ck-phone-card > a,
    .ck-phone-card .ck-swipe-face > a {
        display: flex;
        flex-direction: column;
        gap: 4px;
        min-height: 44px;
        padding: 12px 14px;
        border: 1px solid var(--ck-border);
        border-radius: var(--ck-radius-md);
        background: var(--ck-surface);
        color: var(--ck-text);
        text-decoration: none;
    }

    .ck-phone-card > a:active { border-color: var(--ck-blue); }
    .ck-phone-card .ck-swipe-face:active { border-color: var(--ck-blue); }

    .ck-phone-card-head {
        display: flex;
        align-items: flex-start;
        justify-content: space-between;
        gap: 8px;
    }

    .ck-phone-card-title {
        font-weight: 600;
        color: var(--ck-blue-strong);
        overflow-wrap: anywhere;
    }

    .ck-phone-card-line {
        font-size: .875rem;
        color: var(--ck-text-secondary);
        overflow-wrap: anywhere;
    }

    .ck-phone-card-line i { width: 1rem; color: var(--ck-text-muted); }

    .ck-phone-card-meta { font-size: .8125rem; color: var(--ck-text-muted); }

    .ck-phone-card-flag { color: var(--ck-danger); }

    /* THE SHELL'S OWN CONTROLS, at a thumb's size. Width rather than pointer here: a tablet in the
       shell lays out the desktop pages, and growing every box on the request screen at 1024px would
       be a redesign of a page this pass deliberately leaves alone. */
    .content .e-btn,
    .content .ck-btn,
    .content .e-input-group,
    .content .e-input-group input.e-input,
    .content .ck-input,
    .content select,
    .content .ck-subtab {
        min-height: 44px;
    }

    .content .e-btn,
    .content .ck-btn { min-width: 44px; }

    .content .e-input-group .e-input-group-icon { min-width: 44px; }

    .content details > summary {
        min-height: 44px;
        padding-block: 11px;
        box-sizing: border-box;
    }

    /* The editors give way to a notice on a phone; the notice is the page. Everything the page draws
       after it is taken off screen, so the component needs placing first and nothing else. */
    .ck-larger-screen { display: block; }
    .ck-larger-screen ~ * { display: none; }
}

/* THE REST OF WHAT A THUMB MEETS: the sign-in card's small links and the password reveal, the public
   site's header, interval toggle and footer, and the figures on Home that are links. Padded rather than
   enlarged wherever the thing is a line of text, so a footer still reads as a footer and a figure still
   reads as a figure - the tap area grows and the type does not. */
@media (pointer: coarse), (max-width: 767.98px) {
    .ck-input-reveal-btn {
        min-width: 44px;
        min-height: 44px;
    }

    .ck-login-remember,
    .ck-login-link {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
    }

    .ck-site-bar a,
    .ck-site-interval a,
    .ck-site-foot a {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    .ck-site .ck-input { min-height: 44px; }
}

@media (max-width: 767.98px) {
    .content a.ck-stat-note,
    .content dd > a,
    .content .ck-welcome-step-skip {
        display: inline-flex;
        align-items: center;
        min-height: 44px;
        min-width: 44px;
    }

    .content .e-multi-select-wrapper { min-height: 44px; }
    .content .e-multi-select-wrapper input.e-dropdownbase { min-height: 44px; }
}

@media (max-width: 575.98px) {
    /* A button whose words are longer than a phone is wide wraps rather than running out of its panel:
       "Send a reminder to everyone waiting" was 352px in a 314px panel. */
    .content .e-btn {
        max-width: 100%;
        white-space: normal;
        height: auto;
    }
}

@media (max-width: 767.98px) {
    /* THE PAGE TITLE OR THE WORKSPACE, AND ON A PHONE IT WAS THE TITLE THAT LOST: "All re...", "Signat...",
       and still "All req..." with the chip squeezed to a quarter of the bar. The chip goes to the drawer,
       which already draws the same TenantSwitcher for exactly this reason below 768px - so a phone has the
       workspace one tap away, in the place a firm in several workspaces already finds its switcher, and
       at no width is it drawn twice. */
    .ck-topbar .ck-topbar-tenant { display: none; }
}

/* ============================================================================================================
   34. SENDING FROM A PHONE. 4 October 2026, the phone row of the approved mockup.
   ------------------------------------------------------------------------------------------------------------
   The screens under /phone: what needs signing, who signs, placing boxes, review and send. They are built for
   a phone and work at any width (a tablet that follows a link here sees a column, not a broken page), so most
   rules are not inside a media query. Colours come from section 1's tokens and from each person's --ck-mark,
   set by the .ck-field-mark--N class FieldPalette chose; nothing here invents a colour.
   ============================================================================================================ */

.ck-phone {
    max-width: 560px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
    padding-bottom: 96px;
}

.ck-phone-back {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    min-height: 44px;
    color: var(--ck-text);
    font-weight: 600;
    text-decoration: none;
}

.ck-phone-lead { margin: 0; font-size: 1rem; color: var(--ck-text-secondary); }
.ck-phone-step { margin: 0; font-size: .8125rem; font-weight: 700; color: var(--ck-text-muted); }
.ck-phone-heading { margin: 8px 0 0; font-size: 1rem; font-weight: 700; color: var(--ck-text); }

.ck-phone-choice {
    position: relative;
    min-height: 96px;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-lg);
    background: var(--ck-surface);
    padding: 16px;
    display: flex;
    align-items: center;
    gap: 14px;
    color: var(--ck-text);
    text-decoration: none;
}

.ck-phone-choice--lead { border: 2px solid var(--ck-blue); background: var(--ck-blue-ghost); }
.ck-phone-choice:hover { color: var(--ck-text); border-color: var(--ck-blue-border); }

.ck-phone-choice-icon {
    width: 48px;
    height: 48px;
    flex-shrink: 0;
    border-radius: var(--ck-radius-md);
    background: var(--ck-blue-light);
    color: var(--ck-blue-strong);
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 1.25rem;
}

.ck-phone-choice-text { display: flex; flex-direction: column; gap: 4px; }
.ck-phone-choice-title { font-size: 1rem; font-weight: 700; }
.ck-phone-choice-sub { font-size: .8125rem; line-height: 1.4; color: var(--ck-text-muted); }

/* THE UPLOADER'S BROWSE BUTTON IS THE WHOLE CARD: laid over it, transparent, so a thumb anywhere on the card
   opens the phone's own picker, and the uploader's own chrome is not drawn twice. */
.ck-phone-choice--upload .e-upload { position: absolute; inset: 0; border: 0; background: transparent; }
.ck-phone-choice--upload .e-upload .e-file-select-wrap { position: absolute; inset: 0; padding: 0; }
.ck-phone-choice--upload .e-upload .e-file-select-wrap .e-btn {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    opacity: 0;
}
.ck-phone-choice--upload .e-upload .e-file-drop { display: none; }
.ck-phone-choice--upload.is-working { opacity: .6; }

.ck-phone-list { display: flex; flex-direction: column; gap: 8px; }

.ck-phone-row,
.ck-phone .e-btn.ck-phone-row {
    min-height: 56px;
    width: 100%;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    color: var(--ck-text);
    text-decoration: none;
    text-align: left;
    white-space: normal;
    height: auto;
}

.ck-phone-row-text { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.ck-phone-row-title { font-size: .9375rem; font-weight: 600; overflow-wrap: anywhere; }
.ck-phone-row-sub { font-size: .8125rem; color: var(--ck-text-muted); overflow-wrap: anywhere; }

.ck-phone-card {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 14px;
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.ck-phone-card-title { font-size: .9375rem; font-weight: 700; }
.ck-phone-card-label { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--ck-text-muted); }

.ck-phone-doc {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    padding: 12px 14px;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    color: var(--ck-text);
    text-decoration: none;
}

.ck-phone-doc-page {
    width: 36px;
    height: 48px;
    flex-shrink: 0;
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-xs);
    background: var(--ck-surface-subtle);
}

.ck-phone-reasons { margin: 6px 0; padding-left: 20px; }

.ck-phone-step-name { font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--ck-text-muted); text-transform: uppercase; }

.ck-phone-people { display: flex; flex-direction: column; gap: 8px; }

/* A PERSON'S CARD IN THEIR OWN COLOUR, from --ck-mark, the same hue as their boxes on the page. */
.ck-phone-person {
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-left: 5px solid var(--ck-mark);
    border-radius: var(--ck-radius-md);
    padding: 10px 12px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    transition: box-shadow var(--ck-transition);
}

.ck-phone-person.is-dragging { box-shadow: var(--ck-shadow-lg); position: relative; z-index: 2; }
.ck-phone-person-head { display: flex; align-items: center; gap: 10px; }
.ck-phone-person .ck-rcard-initials,
.ck-phone-who .ck-rcard-initials { background: var(--ck-mark); color: var(--ck-text-inverse); }

/* THE GRIP IS WHERE A DRAG STARTS, and it alone stops the page scrolling under the finger. */
.ck-phone-grip {
    width: 32px;
    min-height: 44px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    color: var(--ck-text-muted);
    touch-action: none;
    cursor: grab;
}

.ck-phone .e-btn.ck-phone-more { min-width: 44px; min-height: 44px; }

.ck-phone-mobile { display: flex; flex-direction: column; gap: 6px; }

.ck-phone-pair { display: flex; gap: 10px; }
.ck-phone-pair > .e-btn { flex: 1 1 0; min-height: 48px; }

.ck-phone-actions { display: flex; flex-direction: column; gap: 10px; }
.ck-phone .e-btn.ck-phone-wide { width: 100%; min-height: 52px; }

/* THE PRIMARY ACTION STAYS UNDER THE THUMB: fixed to the foot of the screen on a phone, sticky on a wider one.
   The page keeps padding-bottom so nothing scrolls underneath it out of reach. */
.ck-phone-bar {
    position: sticky;
    bottom: 0;
    background: var(--ck-surface);
    border-top: 1px solid var(--ck-border);
    padding: 12px 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    z-index: 3;
}

.ck-phone-shelves { display: flex; }
.ck-phone-shelves .e-btn { flex: 1 1 0; min-height: 44px; white-space: normal; height: auto; }

.ck-phone-who { display: flex; gap: 10px; align-items: flex-start; }

/* ---- placing boxes ---------------------------------------------------------------------------------- */

.ck-phone-boxes-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.ck-phone-pager { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; font-weight: 600; color: var(--ck-text-muted); }
.ck-phone-pager .e-btn { min-width: 44px; min-height: 44px; }

/* THE TOOLS STAY UNDER THE TOP BAR WHILE THE DOCUMENT SCROLLS: who the next box is for, which page this is, and
   Add a box with Quick start beside it as the smaller shortcut. */
.ck-phone-tools {
    position: sticky;
    top: var(--topnav-height);
    z-index: 4;
    background: var(--ck-surface);
    padding: 8px 0;
    border-bottom: 1px solid var(--ck-border);
    display: flex;
    flex-direction: column;
    gap: 8px;
}
.ck-phone-tools .ck-phone-pager { align-self: center; }
.ck-phone-tool-row { display: flex; gap: 8px; align-items: center; }
.ck-phone .e-btn.ck-phone-add { flex: 1 1 auto; min-height: 48px; font-weight: 700; }
.ck-phone .e-btn.ck-phone-quick-go { flex: 0 0 auto; min-height: 44px; font-size: .8125rem; color: var(--ck-text-muted); }
.ck-phone-hint {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    font-size: .8125rem;
    font-weight: 600;
    color: var(--ck-blue-strong);
    background: var(--ck-blue-ghost);
    border: 1px solid var(--ck-blue-border);
    border-radius: var(--ck-radius-md);
    padding: 6px 10px;
}
.ck-phone-hint .e-btn { min-height: 44px; }

.ck-phone-viewer { height: 62vh; min-height: 360px; }

/* ONE ROW THAT SCROLLS SIDEWAYS, so a long list of signers does not push the page down under the tools. */
.ck-phone-chips { display: flex; flex-wrap: nowrap; gap: 8px; overflow-x: auto; }
.ck-phone .e-btn.ck-phone-chip {
    flex: 1 0 auto;
    min-height: 48px;
    border-radius: 24px;
    border: 2px solid var(--ck-mark);
    background: var(--ck-surface);
    color: var(--ck-mark);
    font-weight: 700;
}
.ck-phone .e-btn.ck-phone-chip.is-chosen { background: var(--ck-mark); color: var(--ck-text-inverse); }

.ck-phone-placed summary { min-height: 44px; display: flex; align-items: center; font-weight: 600; cursor: pointer; }
.ck-phone-placed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ck-phone-placed li { display: flex; align-items: center; justify-content: space-between; gap: 8px; font-size: .8125rem; }
.ck-phone-placed .e-btn { min-height: 44px; }

/* THE THREE LOOKS ON THE PAGE: solid for signing, outlined for what they fill in, dashed for what fills itself.
   Scoped to the phone placer, so the desktop placer draws exactly what it drew before. A box is dragged by a
   finger, so it takes the touch itself rather than scrolling the page under it. */
.ck-phone-boxes .ck-field-mark { touch-action: none; }
.ck-phone-boxes .ck-field-mark.ck-field-look--outlined { background: var(--ck-surface); border-width: 2px; border-style: solid; }
.ck-phone-boxes .ck-field-mark.ck-field-look--dashed { background: var(--ck-surface); border-width: 2px; border-style: dashed; }

/* ---- the bottom sheets: D2, From contacts, New person -------------------------------------------------- */

/* THE SHEET'S CLOSE IS A THUMB'S TARGET TOO: Syncfusion draws it 28px, measured on both phones. */
.e-dialog.ck-phone-sheet .e-dlg-closeicon-btn,
.e-dialog.ck-new-person--phone .e-dlg-closeicon-btn { min-width: 44px; min-height: 44px; }

.ck-phone-kind-group { display: block; margin: 10px 0 6px; font-size: .75rem; font-weight: 700; letter-spacing: .04em; color: var(--ck-mark); }
.ck-phone-kinds { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

.ck-phone-sheet .e-btn.ck-phone-kind {
    min-height: 48px;
    height: auto;
    white-space: normal;
    border-radius: var(--ck-radius-md);
    font-weight: 600;
    border: 2px solid var(--ck-mark);
}
.ck-phone-sheet .e-btn.ck-phone-kind.ck-field-look--solid { background: var(--ck-mark); color: var(--ck-text-inverse); }
.ck-phone-sheet .e-btn.ck-phone-kind.ck-field-look--outlined { background: var(--ck-surface); color: var(--ck-text); }
.ck-phone-sheet .e-btn.ck-phone-kind.ck-field-look--dashed { background: var(--ck-surface); color: var(--ck-text); border-style: dashed; }

@media (max-width: 767.98px) {
    /* ON A PHONE THE SHEETS RISE FROM THE FOOT OF THE SCREEN. */
    .e-dialog.ck-phone-sheet,
    .e-dialog.ck-new-person--phone {
        position: fixed !important; /* !important: Syncfusion positions a dialog inline; a sheet belongs at the foot. */
        left: 0 !important; /* !important: as above. */
        right: 0;
        bottom: 0;
        top: auto !important; /* !important: as above. */
        width: 100% !important; /* !important: as above. */
        max-height: 88vh;
        border-radius: 18px 18px 0 0;
    }

    .ck-phone-bar { position: fixed; left: 0; right: 0; padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

    /* ROOM FOR THE BAR, WHICH HOLDS TWO BUTTONS ON REVIEW: 96px left the last box under it, measured. */
    .ck-phone { padding-bottom: 200px; }
}

/* ---- the fill-in screen, laid out for a phone (?phone=1) ------------------------------------------------ */

.ck-fill-phone-switch { display: flex; }
.ck-fill-phone-switch .e-btn { flex: 1 1 0; min-height: 44px; }
/* WHO IT IS FOR, ON A PHONE. 8 October 2026: the people on the request as buttons, then the full-screen contacts
   picker and a new person, each a 44px target. */
.ck-fill-phone-chosen { display: block; font-weight: 600; margin-bottom: .5rem; }
.ck-fill-phone-choices { display: flex; flex-wrap: wrap; gap: .5rem; }
.ck-fill-phone-choices .e-btn { min-height: 44px; }
.ck-fill-phone-role + .ck-fill-phone-role { margin-top: 1rem; }
/* WITHDRAWING A REQUEST. 8 October 2026: who is told, said before anybody presses, and why it is not on offer. */
.ck-withdraw-dialog .e-dlg-content p { margin-bottom: .75rem; }
/* Never wider than a phone: the dialog is 520px on a desktop. */
.e-dialog.ck-withdraw-dialog { max-width: calc(100vw - 24px); }
.ck-withdraw-told { color: var(--ck-text-muted); }
.ck-withdraw-why { color: var(--ck-text-muted); font-weight: 600; }
/* A ROLE PICKER WITH ITS ADD BUTTON BESIDE IT, outside the dropdown. 8 October 2026. */
.ck-fill-role-row { display: flex; gap: .5rem; align-items: center; }
.ck-fill-role-row > .e-ddl { flex: 1 1 auto; min-width: 0; }
.ck-fill-add-person { flex: 0 0 auto; white-space: nowrap; }
/* The prompt above the role pickers when nobody is on the request yet. */
.ck-fill-who-prompt { margin-bottom: .75rem; }

.ck-fill.ck-fill--phone { display: flex; flex-direction: column; }
/* A LINK IS TAPPED BY A THUMB HERE: "Manage your services" measured 26px tall on both phones. */
.ck-fill.ck-fill--phone a { display: inline-flex; align-items: center; min-height: 44px; }
.ck-fill.ck-fill--phone .ck-fill-document { display: none; }
.ck-fill.ck-fill--phone.ck-fill--previewing .ck-fill-document { display: block; }
.ck-fill.ck-fill--phone.ck-fill--previewing .ck-fill-questions { display: none; }

/* ---- scanning paper on a phone (Phone A and B), 4 October 2026 --------------------------------------------
   The live view fills the width with the outline drawn over it in a canvas the same size; the shutter sits in
   the middle of the bar under the thumb, with Cancel and Done either side. */

.ck-scan-stage {
    position: relative;
    width: 100%;
    aspect-ratio: 3 / 4;
    max-height: 62vh;
    background: var(--ck-sidebar-top);
    border-radius: 12px;
    overflow: hidden;
}

.ck-scan-video,
.ck-scan-outline { position: absolute; inset: 0; width: 100%; height: 100%; }
.ck-scan-video { object-fit: cover; }
.ck-scan-outline { pointer-events: none; }

.ck-scan-count {
    position: absolute;
    top: 10px;
    left: 10px;
    padding: 4px 12px;
    border-radius: 999px;
    background: var(--ck-surface);
    color: var(--ck-text);
    font-weight: 600;
}

.ck-phone-bar.ck-scan-bar { flex-direction: row; align-items: center; justify-content: space-between; }
.ck-phone-bar.ck-scan-bar .e-btn.ck-scan-side { flex: 1 1 0; min-height: 48px; }
.ck-phone .e-btn.ck-scan-take { flex: 0 0 84px; width: 84px; height: 84px; border-radius: 50%; font-size: 1.75rem; }

/* THE FALLBACK'S INPUT IS PRESSED THROUGH ITS LABEL, which is the whole card, so a thumb can hit it. */
.ck-scan-photo { cursor: pointer; }
.ck-scan-photo-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }

.ck-scan-paper-label { font-weight: 600; }
.ck-scan-paper { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.ck-scan-preview { height: 60vh; }

.ck-scan-page.is-blurry { border-color: var(--ck-warning); }
.ck-scan-blur {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 10px 12px;
    border-radius: 8px;
    background: var(--ck-warning-light);
}

/* ---- undo and redo on the placement screens (CkUndoRedo) ------------------------------------------------- */

/* TWO BUTTONS ALWAYS IN THE SAME PLACE, disabled rather than hidden when there is nothing to take back. */
.ck-undo-redo { display: inline-flex; gap: 4px; align-items: center; }

/* ON A PHONE, IN THE BOTTOM BAR BESIDE NEXT: one row, the two small buttons first, Next taking what is left. */
.ck-phone-bar.ck-phone-bar--undo { flex-direction: row; align-items: center; }
.ck-phone-bar--undo .ck-phone-undo .e-btn { min-height: 48px; min-width: 48px; }
.ck-phone-bar--undo .e-btn.ck-phone-next { flex: 1 1 auto; min-height: 52px; }
/* ICONS ONLY AT PHONE WIDTH: three labelled buttons did not fit 390px. The name is kept in aria-label and title. */
.ck-phone-bar--undo .ck-phone-undo .e-btn { font-size: 0; padding: 0 12px; }
.ck-phone-bar--undo .ck-phone-undo .e-btn .e-btn-icon { font-size: 18px; margin: 0; }

/* ---- Scan paper pages: the phone's own scanner first (PhoneScan, Mode.Choose) ------------------------------ */
.ck-scan-steps { margin: 0 0 4px; }
.ck-scan-steps dt { font-weight: 600; margin-top: 8px; }
.ck-scan-steps dd { margin: 2px 0 0; color: var(--ck-text-muted); }
/* A BUTTON DRAWN AS A CHOICE CARD: the card's own look, none of the browser's button chrome. */
.e-btn.ck-phone-choice.ck-scan-own { width: 100%; text-align: left; justify-content: flex-start; height: auto; white-space: normal; text-transform: none; }

/* ---- ChekSign's scanner: auto capture and the corners by hand -------------------------------------------------- */
.ck-scan-auto { display: flex; align-items: center; gap: 10px; margin: 6px 0 10px; }
/* THE ADJUSTER FILLS WHAT THE SCREEN HAS ABOVE THE BAR; touch-action none so a drag moves a corner, not the page. */
.ck-scan-adjust { display: block; width: 100%; height: calc(100vh - 220px); touch-action: none; background: #111; border-radius: 8px; }

/* ---- swipe actions, the Undo bar and pull to refresh on phone lists. 5 October 2026 ---------------- */

/* A SWIPE CARD IS ITS FACE OVER ITS ACTIONS. The face slides; the actions sit behind it at each end and are
   seen only as it moves. The face keeps vertical movement for the browser (pan-y), which is what stops a
   swipe ever fighting a scroll. */
.ck-phone-cards > .ck-swipe {
    position: relative;
    overflow: hidden;
    padding: 0;
    gap: 0;
    border: 0;
    background: transparent;
    border-radius: var(--ck-radius-md);
}

.ck-swipe-face {
    position: relative;
    z-index: 1;
    display: flex;
    align-items: stretch;
    gap: 4px;
    background: var(--ck-surface);
    border: 1px solid var(--ck-border);
    border-radius: var(--ck-radius-md);
    touch-action: pan-y;
}

.ck-phone-cards .ck-swipe-face > a {
    flex: 1 1 auto;
    min-width: 0;
    border: 0;
}

.ck-swipe-face .ck-phone-card-tick { display: flex; align-items: center; padding-left: 12px; }
.ck-swipe-face .ck-row-menu.e-btn { align-self: center; min-width: 44px; min-height: 44px; margin-right: 4px; }

.ck-swipe-actions {
    position: absolute;
    top: 0;
    bottom: 0;
    display: flex;
}
.ck-swipe-actions--end { right: 0; justify-content: flex-end; }
.ck-swipe-actions--start { left: 0; }

.ck-swipe-actions .e-btn.ck-swipe-btn {
    min-width: 96px;
    height: 100%;
    border: 0;
    border-radius: 0;
    font-weight: 700;
    color: var(--ck-text-inverse);
    background: var(--ck-blue-strong);
    white-space: normal;
}
.ck-swipe-actions .e-btn.ck-swipe-btn--blue { background: var(--ck-blue-strong); }
.ck-swipe-actions .e-btn.ck-swipe-btn--danger { background: var(--ck-danger); }
.ck-swipe-actions .e-btn.ck-swipe-btn--quiet { background: var(--ck-text-secondary); }

/* PAST THE POINT WHERE LETTING GO ACTS, the action says so by taking the whole row. */
.ck-swipe.is-full .ck-swipe-actions--end .e-btn.ck-swipe-btn[data-swipe-full] { min-width: 100vw; }

/* A TEMPLATE TILE THAT SWIPES: the tile is the face, drawn exactly as it is without the swipe. */
.ck-tile-swipe { position: relative; overflow: hidden; border-radius: var(--ck-radius-md); }
/* ITS FACE IS OPAQUE, 7 October 2026: it was transparent, so wherever the tile itself paints nothing - its caption
   - the Archive button behind it showed through as a dark block over the author's name, at rest. The panel behind
   the tiles is the surface colour, so nothing else changes. */
.ck-tile-swipe > .ck-swipe-face { display: block; border: 0; background: var(--ck-surface); }

/* AND NOTHING SWIPES ON A COMPUTER, so its actions are not drawn there at all. */
@media (min-width: 768px) {
    .ck-swipe-actions { display: none; }
}

.ck-phone-select-bar { display: none; }

@media (max-width: 767.98px) {
    .ck-phone-select-bar {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        margin-bottom: 8px;
    }
    .ck-phone-select-bar .e-btn { min-height: 44px; }
}

/* WORDS FOR ONE SCREEN AND NOT THE OTHER. A sentence about swiping is false on a computer and a sentence about
   tick boxes is false on a phone, so a page says each where it is true: .ck-phone-only beside .ck-phone-hide. */
.ck-phone-only { display: none; }

@media (max-width: 767.98px) {
    .ck-phone-only { display: revert; }
}

/* THE UNDO BAR, at the foot of the screen for six seconds after an action that can be put back. */
.ck-undo-bar {
    position: fixed;
    left: 16px;
    right: 16px;
    max-width: 520px;
    margin-inline: auto;
    bottom: calc(16px + env(safe-area-inset-bottom));
    z-index: 1050;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 8px 8px 8px 16px;
    border-radius: var(--ck-radius-md);
    background: var(--ck-text);
    color: var(--ck-text-inverse);
    box-shadow: 0 6px 20px rgba(15, 37, 53, .25);
}
.ck-undo-bar-text { font-size: .9375rem; font-weight: 600; }
.ck-undo-bar .e-btn.ck-undo-bar-undo { min-height: 44px; min-width: 64px; color: var(--ck-blue-light); font-weight: 700; }

/* THE PULL INDICATOR, hidden above the list until a pull draws it down. */
.ck-pull-refresh {
    position: fixed;
    left: 50%;
    top: calc(var(--topnav-height) - 36px);
    z-index: 5;
    width: 36px;
    height: 36px;
    margin-left: -18px;
    display: flex;
    align-items: center;
    justify-content: center;
    border-radius: 50%;
    background: var(--ck-surface);
    color: var(--ck-blue-strong);
    box-shadow: 0 2px 8px rgba(15, 37, 53, .2);
    opacity: 0;
    pointer-events: none;
}
.ck-pull-refresh.is-ready i { transform: rotate(180deg); }
.ck-pull-refresh.is-refreshing i { animation: ck-pull-spin .8s linear infinite; }
@keyframes ck-pull-spin { to { transform: rotate(360deg); } }

/* ---- the phone's full-screen contact picker. 5 October 2026 ----------------------------------------- */

/* THE WHOLE SCREEN, because the list is the task: a sheet a third of the height showed four names. */
.e-dialog.ck-contact-picker {
    position: fixed !important; /* !important: Syncfusion positions a dialog inline; this one is the screen. */
    inset: 0 !important; /* !important: as above. */
    width: 100% !important; /* !important: as above. */
    height: 100% !important; /* !important: as above. */
    max-height: 100% !important; /* !important: as above. */
    border-radius: 0;
}
.e-dialog.ck-contact-picker .e-dlg-header-content { padding: 8px 8px 0; }
.e-dialog.ck-contact-picker .e-dlg-content { padding: 0 16px; }
.e-dialog.ck-contact-picker .e-footer-content { padding: 12px 16px calc(12px + env(safe-area-inset-bottom)); }

.ck-picker-head { display: flex; align-items: center; gap: 8px; }
.ck-picker-title { flex: 1 1 auto; font-weight: 700; font-size: 1rem; }
.ck-picker-head .e-btn { min-width: 44px; min-height: 44px; }
/* PAINTED, because an icon-only flat button took its colour from nothing here and drew a blank corner. */
.ck-picker-head .e-btn.ck-picker-close { color: var(--ck-text); font-size: 1.25rem; }
.ck-picker-head .e-btn.ck-picker-new { color: var(--ck-blue-strong); font-weight: 700; }
/* THE HEADER SETS ITS OWN FACE ON EVERYTHING IN IT, the icons included, and drew them as blanks. */
.ck-picker-head .e-btn-icon.fas { font-family: "Font Awesome 5 Free"; font-weight: 900; color: inherit; }

.ck-picker-search {
    position: sticky;
    top: 0;
    z-index: 1;
    background: var(--ck-surface);
    padding: 8px 0;
}

/* A THUMB'S TARGET: the dialog sits outside the shell, so the shell's phone sizing does not reach its box. */
.ck-picker-search .e-input-group input.e-input { min-height: 44px; font-size: 1rem; }
.ck-picker-search .e-input-group .e-clear-icon { min-width: 44px; min-height: 44px; }

.ck-picker-list { list-style: none; margin: 0; padding: 0; }

.ck-picker-heading {
    padding: 12px 0 4px;
    font-size: .75rem;
    font-weight: 700;
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--ck-text-muted);
}

.ck-picker-row {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 56px;
    border-bottom: 1px solid var(--ck-border);
}
.ck-picker-row .e-checkbox-wrapper { min-width: 44px; min-height: 44px; display: flex; align-items: center; justify-content: center; }
.ck-picker-text { flex: 1 1 auto; min-width: 0; min-height: 44px; display: flex; flex-direction: column; justify-content: center; cursor: pointer; }
.ck-picker-name { font-weight: 600; overflow-wrap: anywhere; }
.ck-picker-sub { font-size: .8125rem; color: var(--ck-text-secondary); overflow-wrap: anywhere; }
.ck-picker-already { font-size: .75rem; font-weight: 700; color: var(--ck-text-muted); }

/* ALREADY ON THE REQUEST: greyed and not a target. */
.ck-picker-row.is-already .ck-picker-text { opacity: .55; cursor: default; }

.ck-picker-more { display: flex; justify-content: center; padding: 12px 0; }
.ck-picker-more .e-btn { min-height: 44px; }

.ck-contact-picker .e-btn.ck-picker-add { width: 100%; min-height: 52px; }
/* Add what was typed as a new person, on the list itself. 8 October 2026. */
.ck-contact-picker .e-btn.ck-picker-add-new { width: 100%; min-height: 52px; justify-content: flex-start; font-weight: 600; }

/* EXTRA ENVELOPES ONLY WITH CONSENT. 5 October 2026. The choice drawn on a send screen while a send waits, and
   the Usage tab's "this month" panel. Amount buttons are 44px so they are a target on a phone too. */
.ck-extra { margin-bottom: 16px; }
.ck-extra--waiting:not(.ck-panel) { border: 1px solid var(--ck-border); border-radius: 8px; padding: 12px 14px; }
.ck-extra-line { margin: 0 0 6px; font-size: 1rem; }
.ck-extra-limit { margin: 0 0 12px; color: var(--ck-text-muted); }
.ck-extra-ask { margin: 0 0 10px; }
.ck-extra-options { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.ck-extra-options .e-btn.ck-extra-amount { min-height: 44px; min-width: 88px; }
.ck-extra-custom-row { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.ck-extra-custom-row .e-btn { min-height: 44px; }

/* THE PHONE'S DUE DATE. A 44px target, like every other control on a phone screen. */
.ck-phone-due .e-input-group { min-height: 44px; }
.ck-phone-due .e-input-group input.e-input { min-height: 44px; font-size: 1rem; }
/* The reminder schedule under it: one line, label then picker. */
.ck-phone-remind { display: flex; align-items: center; gap: 10px; margin-top: 10px; }
.ck-phone-remind-label { flex: 0 0 auto; font-size: .875rem; color: var(--ck-text-muted); }
.ck-phone-remind .e-input-group { flex: 1 1 auto; min-height: 44px; }
.ck-phone-remind .e-input-group input.e-input { min-height: 44px; font-size: .9375rem; }

/* THE PHONE'S LABELS LINE: compact, wrapping chips, each a 44px target with a small pill inside it. */
.ck-phone-labels { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; flex-direction: row; }
.ck-phone-labels-name { font-size: .875rem; color: var(--ck-text-muted); }
.ck-phone-labels-none { font-size: .875rem; color: var(--ck-text-muted); }
.ck-phone .e-btn.ck-phone-label-chip { min-height: 44px; padding: 0 12px; border-radius: 22px; font-size: .8125rem; text-transform: none; }
.ck-phone .e-btn.ck-phone-labels-add { min-height: 44px; min-width: 56px; }
.ck-label-picker .e-btn.ck-label-new { min-height: 44px; }

/* THE PHONE'S EMAIL CARD AND EDITOR. The first line of the message on one line; the message box grows. */
.ck-phone-email-head { display: flex; align-items: center; justify-content: space-between; }
.ck-phone .e-btn.ck-phone-email-edit { min-height: 44px; min-width: 56px; }
.ck-phone-email-line { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ck-email-editor-body { display: flex; flex-direction: column; gap: 8px; padding: 4px 0 12px; }
.ck-email-editor-body .e-input-group, .ck-email-editor-body .e-ddl { min-height: 44px; }
.ck-email-editor-body .e-input-group input.e-input { min-height: 44px; font-size: 1rem; }
.ck-email-editor-body .e-input-group.e-multi-line-input.ck-grow textarea.e-input { min-height: 120px; overflow: hidden; resize: none; font-size: 1rem; }

/* ============================================================================================================
   35. "STILL THERE?" 6 October 2026. Shown by chek-session.js two minutes before an inactivity sign-out, over
   whatever page is open. Shell chrome, so plain markup: it has to work when the live connection has gone.
   ============================================================================================================ */
.ck-session-prompt { position: fixed; inset: 0; z-index: 2000; display: flex; align-items: center; justify-content: center; padding: 16px; }
.ck-session-prompt[hidden] { display: none; }
.ck-session-scrim { position: absolute; inset: 0; background: rgba(11, 39, 54, 0.45); }
.ck-session-card { position: relative; width: 100%; max-width: 420px; background: var(--ck-surface); border-radius: var(--ck-radius-lg); box-shadow: var(--ck-shadow-xl); padding: 24px; }
.ck-session-title { margin: 0 0 8px; font-size: 1.25rem; font-weight: 700; color: var(--ck-text); }
.ck-session-text { margin: 0 0 20px; font-size: .9375rem; line-height: 1.5; color: var(--ck-text-muted); }
.ck-session-actions { display: flex; justify-content: flex-end; gap: 8px; }
.ck-session-actions .ck-btn { min-height: 44px; }
/* ============================================================================================================
   36. TWO-FACTOR SIGN-IN, UNDER YOUR ACCOUNT. 6 October 2026. Static pages (exception 1), so plain markup. The
   QR code is a PNG drawn on the server; pixelated so a scaled code keeps hard edges a camera can read.
   ============================================================================================================ */
.ck-twofactor { max-width: 36rem; }
.ck-twofactor-steps { padding-left: 1.25rem; margin: 16px 0 0; }
.ck-twofactor-steps > li { margin-bottom: 24px; }
.ck-twofactor-steps > li::marker { font-weight: 700; color: var(--ck-text); }
.ck-twofactor-qr { display: block; width: 216px; height: 216px; max-width: 100%; image-rendering: pixelated; border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); background: #FFFFFF; }
.ck-twofactor-key { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 6px; }
.ck-twofactor-key code { font-family: var(--font-mono); font-size: 1rem; letter-spacing: .04em; color: var(--ck-text); background: var(--ck-surface-subtle); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); padding: 8px 10px; overflow-wrap: anywhere; }
.ck-twofactor-key .ck-btn, .ck-twofactor-entry .ck-btn, .ck-twofactor-actions .ck-btn { min-height: 44px; }
.ck-twofactor-open { display: flex; align-items: center; justify-content: center; min-height: 48px; margin: 4px 0 12px; text-decoration: none; }
.ck-twofactor-label { display: block; font-weight: 600; font-size: .875rem; color: var(--ck-text); margin-bottom: 6px; }
.ck-twofactor-entry { display: flex; flex-wrap: wrap; gap: 8px; align-items: stretch; }
.ck-input.ck-twofactor-code { width: 10rem; min-height: 44px; font-size: 1.25rem; letter-spacing: .2em; font-variant-numeric: tabular-nums; }
.ck-twofactor-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ck-twofactor-actions form { margin: 0; }
.ck-twofactor-codes { display: grid; grid-template-columns: repeat(2, minmax(0, max-content)); gap: 8px 24px; margin: 16px 0; padding: 16px; list-style: none; background: var(--ck-surface-subtle); border: 1px solid var(--ck-border); border-radius: var(--ck-radius-sm); font-family: var(--font-mono); font-size: 1rem; }
.ck-btn--danger { background: var(--ck-danger); border-color: var(--ck-danger); color: #FFFFFF; }
.ck-btn--danger:hover { background: #C0392B; border-color: #C0392B; color: #FFFFFF; }

/* ============================================================================================================
   37. A FREE TRIAL ON THE BILLING TAB. 6 October 2026. "0 of 5" and a date are one figure each; on a phone the
   settings row's value column is narrow enough to break both across two lines.
   ============================================================================================================ */
.ck-trial-figure { white-space: nowrap; }

/* ============================================================================================================
   38. SCAN PAPER PAGES, WITH CHEKSIGN'S SCANNER FIRST. 6 October 2026. Where our scanner is on for the person, its
   button leads, primary and large; the phone's own scanner folds beneath it. The summary is a 44px target.
   ============================================================================================================ */
.e-btn.ck-phone-choice.ck-scan-own--lead { min-height: 112px; border: 2px solid var(--ck-blue-strong); background: var(--ck-blue-strong); color: #FFFFFF; }
.e-btn.ck-phone-choice.ck-scan-own--lead:hover { background: var(--ck-blue-strong-hover); border-color: var(--ck-blue-strong-hover); }
.e-btn.ck-phone-choice.ck-scan-own--lead .ck-phone-choice-title { font-size: 1.125rem; color: #FFFFFF; }
.e-btn.ck-phone-choice.ck-scan-own--lead .ck-phone-choice-sub { color: rgba(255, 255, 255, .88); }
.e-btn.ck-phone-choice.ck-scan-own--lead .ck-phone-choice-icon { background: rgba(255, 255, 255, .18); color: #FFFFFF; }
.ck-scan-builtin { margin-top: 14px; }
.ck-scan-builtin-summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; font-size: .875rem; font-weight: 600; color: var(--ck-text); }

/* ============================================================================================================
   39. CHEKSIGN'S SCANNER: AUTO AT THE TOP, THE FLASH, AND RETAKE LAST. 6 October 2026. The shutter is the default
   and larger (84px); Auto is a choice at the top. A capture flashes the picture white for a moment, and the last
   page can be undone under the picture without going to the review.
   ============================================================================================================ */
.ck-scan-auto-hint { font-size: .8125rem; color: var(--ck-text-muted); }
.ck-scan-flash { position: absolute; inset: 0; background: #FFFFFF; opacity: 0; pointer-events: none; transition: opacity .2s ease-out; }
.ck-scan-flash.is-on { opacity: .85; transition: none; }
.ck-scan-under { display: flex; justify-content: flex-start; margin-top: 8px; }
.ck-phone .e-btn.ck-scan-retake-last { min-height: 44px; }

/* =====================================================================================================
   40. BRINGING CONTACTS IN. 6 October 2026. /contacts/import: two ways in side by side (one above the other on
   a phone), the column picker, and the review, a grid on a computer and cards on a phone. A row that needs
   fixing is edged red, one with something guessed amber, and one already in the book grey, so a long list can
   be scanned for the rows that need a look; the words beside each say why.
   ===================================================================================================== */
.ck-import-ways { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; margin-bottom: 16px; }
.ck-import-way { margin-bottom: 0; }
.ck-import-paste { width: 100%; min-height: 12rem; font-family: inherit; resize: vertical; }
.ck-import-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ck-import-summary { font-size: 1.0625rem; margin-bottom: 4px; }
.ck-import-columns { margin-top: 12px; }
.ck-import-review { margin-top: 12px; }
.ck-import-cell { width: 100%; min-width: 0; padding: 4px 8px; font-size: .875rem; }
.ck-import-notes { display: flex; flex-direction: column; gap: 3px; white-space: normal; font-size: .8125rem; }
.ck-import-notes .badge { align-self: flex-start; }
.ck-import-note { color: var(--ck-text-secondary); }
.ck-import-note--problem { color: var(--ck-danger); }
.ck-import-note--doubt { color: #9A5B13; }
.ck-import-note--merged { color: var(--ck-text-secondary); font-style: italic; }
.ck-import-where { color: var(--ck-text-muted); }
.ck-import-changes { margin: 0 0 0 18px; padding: 0; }
.ck-import-what { font-size: .875rem; color: var(--ck-text-secondary); }
.ck-import-added { margin: 0 0 12px 18px; padding: 0; }
.ck-import-added li { margin-bottom: 2px; }
.ck-import-bar { position: sticky; bottom: 0; background: var(--ck-surface); padding: 10px 0; border-top: 1px solid var(--ck-border); }

.ck-import-cards { list-style: none; margin: 12px 0 0; padding: 0; }
.ck-import-card { border: 1px solid var(--ck-border); border-left-width: 4px; border-radius: var(--ck-radius-sm); padding: 12px; margin-bottom: 10px; background: var(--ck-surface); }
.ck-import-card.is-fix { border-left-color: var(--ck-danger); }
.ck-import-card.is-doubt { border-left-color: var(--ck-warning); }
.ck-import-card.is-there { border-left-color: var(--ck-border-strong); }
.ck-import-card-where { font-size: .8125rem; color: var(--ck-text-muted); margin-bottom: 6px; }
.ck-import-card-field { display: block; font-size: .8125rem; color: var(--ck-text-secondary); margin-bottom: 8px; }
.ck-import-card-field .ck-import-cell { margin-top: 2px; min-height: 44px; font-size: 1rem; }
.ck-import-card-what { margin-top: 8px; }

/* THE EMPTY CONTACTS PAGE leads with bringing them across. */
.ck-import-lead { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; border-left: 4px solid var(--ck-blue); }
.ck-import-lead-text { flex: 1 1 320px; }

@media (max-width: 767.98px) {
    .ck-import-ways { grid-template-columns: 1fr; }
    .ck-import-bar .e-btn { min-height: 44px; }
}

/* THE CARD'S BUTTONS AND THE PREVIEW ON A PHONE. 8 October 2026: Use stays on every card and is a 44px target. */
@media (max-width: 767.98px) {
    .ck-card-buttons .e-btn { min-height: 44px; }
    .ck-preview-actions { width: 100%; }
    .ck-preview-actions .e-btn { min-height: 44px; flex: 1 1 auto; }
    .ck-preview-body { padding: 12px 8px 24px; }
    .ck-preview-text { padding: 24px 20px; }
}