/* =====================================================================
   paperwork-chrome.css  ·  Paperwork Designer chrome refresh
   Load AFTER editor.css and design-content.css.
   Scope: app chrome only. Every rule sits under one of
     .main-header  .main-sidebar  .main-footer  .pages-view  .modal  .dropdown-menu
   No bare element selectors, no new .btn/.card/.nav definitions, nothing that
   can match inside .ck-content, .CodeMirror or CKEditor UI (.ck).
   Theme: .dark-mode on <body> (absent = light). Brand: --brand-color (portal-overridable).
   ===================================================================== */
/* Barlow and Barlow Condensed are loaded by a <link> in index.html. */

/* ---------- 1. Tokens ---------- */
:root {
  --brand-color: #00b6b6;                 /* unchanged default; portals redeclare this */
  --pw-accent: var(--brand-color);
  --pw-accent-ink: color-mix(in srgb, var(--brand-color) 62%, #000);   /* accent as text on light */
  --pw-accent-strong: color-mix(in srgb, var(--brand-color) 62%, #000);/* primary button fill, light */
  --pw-on-accent: #ffffff;
  --pw-ground: #eef1f2;
  --pw-surface: #ffffff;
  --pw-raised: #f6f8f9;
  --pw-ink: #2b3038;
  --pw-muted: #5f6670;
  --pw-divider: #d3d8db;
  --pw-control-border: #b4bcc2;            /* the edge of something you can press or type in: a step stronger than a divider */
  --pw-tint: color-mix(in srgb, var(--brand-color) 12%, #fff);
  --pw-tint-border: color-mix(in srgb, var(--brand-color) 40%, #fff);
  --pw-head: #3a4049;                     /* header bar, both themes keep a slate bar */
  --pw-head-ink: #ffffff;
  --pw-head-muted: #c9d0d5;
  --pw-side: #ffffff;
  --pw-side-ink: #2b3038;
  --pw-side-muted: #5f6670;
  --pw-warn: #e0a33a; --pw-warn-tint: #fbf0dc; --pw-warn-ink: #7a4f0a;
  --pw-danger: #c0453e; --pw-danger-tint: #fbeceb; --pw-danger-border: #e8b4b0;
  --pw-neutral: #e6e9eb;
  --pw-shadow-pop: 0 16px 40px rgba(26,30,35,.22);
  --pw-font: "Barlow", "Nunito", system-ui, sans-serif;
  --pw-font-head: "Barlow Condensed", "Arial Narrow", sans-serif;
  --pw-header-height: 65px;               /* matches editor.css; do not change without the offsets */
  --pw-rule: 4px;
  --pw-radius: 0;
  --pw-space-1: 4px; --pw-space-2: 8px; --pw-space-3: 12px; --pw-space-4: 16px; --pw-space-5: 24px; --pw-space-6: 32px;
}
.dark-mode {
  --pw-accent-ink: color-mix(in srgb, var(--brand-color) 70%, #fff);
  --pw-accent-strong: var(--brand-color);
  --pw-on-accent: #1a1e23;
  --pw-ground: #262b31;
  --pw-surface: #353b44;
  --pw-raised: #2b3138;
  --pw-ink: #eef1f2;
  --pw-muted: #aab3ba;
  --pw-divider: #4a525c;
  --pw-control-border: #6b747d;
  --pw-tint: color-mix(in srgb, var(--brand-color) 18%, #262b31);
  --pw-tint-border: color-mix(in srgb, var(--brand-color) 45%, #262b31);
  --pw-head: #1a1e23;
  --pw-side: #353b44;
  --pw-side-ink: #eef1f2;
  --pw-side-muted: #c9d0d5;
  --pw-warn-tint: #3d3220; --pw-warn-ink: #f0c674;
  --pw-danger: #e5726b; --pw-danger-tint: #3a2a2c; --pw-danger-border: #6b3a38;
  --pw-neutral: #2b3138;
  --pw-shadow-pop: 0 16px 40px rgba(0,0,0,.55);
}

/* ---------- 2. Type (chrome only) ---------- */
:is(.main-header,.main-sidebar,.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) { font-family: var(--pw-font); }
:is(.pages-view,.modal) :is(.card-title,.modal-title,.pam-title,.info-box-text,.page-title),
.pages-view > :is(h1,h2,h3,h4), .pages-view .content-header :is(h1,h2,h3) {
  font-family: var(--pw-font-head); font-weight: 600; letter-spacing: 0; line-height: 1.1;
}
.pages-view .text-muted, .modal .text-muted { color: var(--pw-muted) !important; }

/* ---------- 3. Header ---------- */
.main-header.navbar, .dark-mode .main-header.navbar {
  background: var(--pw-head); border-bottom: var(--pw-rule) solid var(--pw-accent);
  box-shadow: none; height: var(--pw-header-height);
}
.main-header .nav-link, .main-header .brand-link, .main-header .file-name { color: var(--pw-head-ink); }
.main-header .nav-link:hover { color: var(--pw-accent); }
.main-header .breadcrumb-wrapper, .main-header .breadcrumb-wrapper a { color: var(--pw-head-muted); font-size: 13px; }
.main-header .file-name { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; }
.main-header .file-saving-error { color: var(--pw-warn) !important; }
.main-header .search-toogle, .main-header .navbar-search-block { display: none !important; } /* no global search */
.main-header .user-sign-in.btn-success { background: var(--pw-accent); border-color: var(--pw-accent); color: #1a1e23; }

/* ---------- 4. Sidebar (expanded, collapsed rail, editing) ---------- */
.main-sidebar, .dark-mode .main-sidebar,
.main-sidebar.sidebar-dark-primary { background: var(--pw-side); box-shadow: none; border-right: 1px solid var(--pw-divider); }
.main-sidebar .brand-link { border-bottom: var(--pw-rule) solid var(--pw-accent); background: var(--pw-head); height: var(--pw-header-height); }
.main-sidebar .user-panel { border-bottom: 1px solid var(--pw-divider); color: var(--pw-side-ink); }
.main-sidebar .sidebar .nav-group, .main-sidebar .nav-group { border: 0 !important; margin: 0 0 var(--pw-space-2) !important; padding: 0; }
.main-sidebar .nav-group:not(:has(.nav-header)) { border-top: 1px solid var(--pw-divider) !important; padding-top: var(--pw-space-2); }
.main-sidebar .nav-sidebar .nav-header {          /* optional mark-up edit: <li class="nav-header">Library</li> */
  font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
  color: var(--pw-accent-ink); padding: var(--pw-space-3) var(--pw-space-4) var(--pw-space-1);
}
.main-sidebar .nav-sidebar .nav-link {
  color: var(--pw-side-muted); border-radius: 0; margin: 0; padding: 8px 16px;
}
.main-sidebar .nav-sidebar .nav-link .nav-icon { color: var(--pw-accent-ink); width: 1.6rem; }
.main-sidebar .nav-sidebar .nav-link:hover { background: var(--pw-raised); color: var(--pw-side-ink); }
.main-sidebar .nav-sidebar .nav-link.active,
.main-sidebar .nav-pills .nav-link.active {
  background: var(--pw-tint); color: var(--pw-accent-ink); font-weight: 600; box-shadow: inset var(--pw-rule) 0 0 var(--pw-accent);
}
.main-sidebar .nav-sidebar .nav-link.disabled { opacity: .45; }
.main-sidebar .nav-sidebar .nav-link:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: -2px; }
.main-sidebar .nav-link .badge { border-radius: 0; }
/* Expanded: full-width 250px sidebar with sections. Collapsed (body.sidebar-collapse): sidebar fully hidden
   for full-screen editing; the header keeps the icon logo, which reveals the menu button on hover. No icon rail. */
@media (min-width: 992px) {
  body:not(.sidebar-collapse) .content-wrapper, body:not(.sidebar-collapse) .main-footer { margin-left: 250px !important; }
  .sidebar-collapse .main-sidebar, .sidebar-collapse .main-sidebar::before { margin-left: -250px !important; width: 250px !important; }
  .sidebar-collapse .content-wrapper, .sidebar-collapse .main-footer { margin-left: 0 !important; }
}
/* Logo lives in the header bar only; header spans the full width above the sidebar */
.main-sidebar .brand-link { display: none !important; }
.main-sidebar .user-panel { display: none !important; }       /* name and avatar move to the profile dropdown */
@media (min-width: 992px) {
  .main-header { margin-left: 0 !important; left: 0 !important; z-index: 1040; }
  .main-sidebar { top: var(--pw-header-height) !important; height: calc(100vh - var(--pw-header-height)) !important; }
}

/* ---------- 5. Buttons: Bootstrap colour classes restyled in place ---------- */
:is(.main-header,.main-sidebar,.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn { border-radius: 0; font-weight: 600; box-shadow: none; }
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-primary,.btn-success) {
  background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-primary,.btn-success):hover {
  background: color-mix(in srgb, var(--pw-accent-strong) 85%, #000); border-color: transparent; color: var(--pw-on-accent);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-secondary,.btn-dark,.btn-light) {
  background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-ink);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-info {
  background: var(--pw-surface); border-color: var(--pw-tint-border); color: var(--pw-accent-ink);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-secondary,.btn-dark,.btn-light,.btn-info):hover {
  background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-warning {
  background: var(--pw-warn-tint); border-color: var(--pw-warn); color: var(--pw-warn-ink);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-danger {
  background: transparent; border-color: var(--pw-danger-border); color: var(--pw-danger);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-danger:hover { background: var(--pw-danger-tint); border-color: var(--pw-danger); color: var(--pw-danger); }
/* outline = the quiet version of the same meaning */
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-outline-primary,.btn-outline-success,.btn-outline-info) {
  background: transparent; border-color: var(--pw-tint-border); color: var(--pw-accent-ink);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn-outline-secondary,.btn-outline-dark,.btn-outline-light) {
  background: transparent; border-color: var(--pw-control-border); color: var(--pw-muted);
}
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-outline-warning { background: transparent; border-color: var(--pw-warn); color: var(--pw-warn-ink); }
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-outline-danger { background: transparent; border-color: var(--pw-danger-border); color: var(--pw-danger); }
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) [class*="btn-outline-"]:hover { background: var(--pw-tint); }
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn-outline-danger:hover { background: var(--pw-danger-tint); }
/* states */
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) .btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; box-shadow: none; }
:is(.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn.disabled,.btn:disabled) { opacity: .45; pointer-events: none; }

/* ---------- 6. Badges, bg-*, ribbons -> square tags ---------- */
:is(.main-header,.main-sidebar,.pages-view,.modal,.dropdown-menu) .badge { border-radius: 0; font-weight: 600; letter-spacing: .4px; }
:is(.pages-view,.modal,.main-sidebar) :is(.badge-primary,.badge-success,.badge-info) { background: var(--pw-tint); color: var(--pw-accent-ink); border: 1px solid var(--pw-accent); }
:is(.pages-view,.modal,.main-sidebar) :is(.badge-secondary,.badge-dark,.badge-light) { background: var(--pw-neutral); color: var(--pw-muted); border: 1px solid var(--pw-divider); }
:is(.pages-view,.modal,.main-sidebar) .badge-warning { background: var(--pw-warn-tint); color: var(--pw-warn-ink); border: 1px solid var(--pw-warn); }
:is(.pages-view,.modal,.main-sidebar,.main-header) .badge-danger { background: var(--pw-danger); color: #fff; }
.pages-view .ribbon-wrapper, .pages-view .ribbon-wrapper:is(.ribbon-lg,.ribbon-xl) { width: max-content; height: auto; overflow: visible; z-index: 2; }
/* grid card: tag sits under the title, inside the content (card is a flex column) */
.pages-view .card > .ribbon-wrapper { position: static; order: 2; margin: 0 16px 4px; }
.pages-view .card > .card-header { order: 1; border-bottom: 0; padding-bottom: 6px; }
.pages-view .card > .card-body { order: 3; padding-top: 6px; }
.pages-view .card > .card-footer { order: 4; }
/* list row: tag sits at the end of the content line */
.pages-view .info-box > .ribbon-wrapper, .pages-view .info-box .ribbon-wrapper { top: 12px; right: 12px; left: auto; }
.pages-view .ribbon-wrapper .ribbon, .pages-view .ribbon-wrapper:is(.ribbon-lg,.ribbon-xl) .ribbon {
  position: static; transform: none; width: max-content; white-space: nowrap; padding: 2px 8px; box-shadow: none;
  font-size: 11px; font-weight: 600; letter-spacing: .8px; text-transform: uppercase; line-height: 1.6;
}
.pages-view .ribbon::before, .pages-view .ribbon::after { display: none; }
.pages-view .ribbon.bg-success { background: var(--pw-tint) !important; color: var(--pw-accent-ink) !important; border: 1px solid var(--pw-accent); }
.pages-view .ribbon.bg-warning { background: var(--pw-neutral) !important; color: var(--pw-muted) !important; border: 1px solid var(--pw-divider); }

/* ---------- 7. Cards (grid) and info-box (list) ---------- */
.pages-view .card { border-radius: 0; border: 1px solid var(--pw-divider); background: var(--pw-surface); box-shadow: none; }
.pages-view .card .card-header, .pages-view .card .card-footer { background: transparent; border-color: var(--pw-divider); }
.pages-view .card .card-header .card-title { float: none; width: 100%; }
.pages-view .card .pam-title { font-size: 20px; color: var(--pw-ink); }
.pages-view .pam-thumb { border: 1px solid var(--pw-divider); box-shadow: none; border-radius: 0; background: #fff; }
.pages-view .card-img-top { padding: 12px 12px 0; background: var(--pw-raised); border-radius: 0; }
.pages-view .card:hover { border-color: var(--pw-tint-border); }
.pages-view .pam-checked-outline .card, .pages-view .card.card-outline.card-warning { border-left: var(--pw-rule) solid var(--pw-warn); border-top: 1px solid var(--pw-divider); }
.pages-view .card.card-outline.card-success, .pages-view .card.card-outline.card-primary { border-left: var(--pw-rule) solid var(--pw-accent); border-top: 1px solid var(--pw-divider); }
.pages-view .card.card-outline.card-danger { border-left: var(--pw-rule) solid var(--pw-danger); border-top: 1px solid var(--pw-divider); }
.pages-view .info-box { border-radius: 0; box-shadow: none; border: 1px solid var(--pw-divider); background: var(--pw-surface); color: var(--pw-ink); }
.pages-view .info-box .info-box-icon { border-radius: 0; }
.pages-view .info-box .info-rule { border-color: var(--pw-divider); }

/* ---------- 8. Dialogs ---------- */
.modal .modal-content { border-radius: 0; border: 1px solid var(--pw-divider); border-top: var(--pw-rule) solid var(--pw-accent); background: var(--pw-surface); color: var(--pw-ink); box-shadow: var(--pw-shadow-pop); }
.modal .modal-header, .modal .modal-header:is(.bg-dark,.bg-primary,.bg-success,.bg-secondary) {
  background: var(--pw-surface) !important; color: var(--pw-ink) !important; border-bottom: 1px solid var(--pw-divider); border-radius: 0;
}
.modal .modal-header .modal-title { flex: 1 1 auto; min-width: 0; font-size: 26px; color: var(--pw-ink) !important; }
.modal .modal-header.bg-warning { background: var(--pw-surface) !important; box-shadow: inset 0 var(--pw-rule) 0 var(--pw-warn); margin-top: calc(-1 * var(--pw-rule)); }
.modal .modal-header.bg-danger  { background: var(--pw-surface) !important; box-shadow: inset 0 var(--pw-rule) 0 var(--pw-danger); margin-top: calc(-1 * var(--pw-rule)); }
.modal .modal-header .close { color: var(--pw-muted); text-shadow: none; opacity: 1; }
.modal .modal-footer { background: var(--pw-raised); border-top: 1px solid var(--pw-divider); border-radius: 0; }
.modal .modal-footer .btn-secondary { background: transparent; border-color: transparent; color: var(--pw-accent-ink); }  /* Cancel reads as a text button */
.modal .form-control { border-radius: 0; background: var(--pw-ground); border-color: var(--pw-divider); color: var(--pw-ink); }
.modal .form-control:focus { border-color: var(--pw-accent); box-shadow: 0 0 0 2px var(--pw-tint-border); }
.modal .alert { border-radius: 0; border: 1px solid var(--pw-divider); border-left-width: var(--pw-rule); color: var(--pw-ink); }
.modal .alert-warning { background: var(--pw-warn-tint); border-color: var(--pw-warn); }
.modal .alert-danger  { background: var(--pw-danger-tint); border-color: var(--pw-danger); }
.modal .alert-info, .modal .alert-success { background: var(--pw-tint); border-color: var(--pw-accent); }

/* ---------- 9. Dropdowns (profile, layout menu) ---------- */
:is(body,.dark-mode) .dropdown-menu, .dropdown-menu.dropdown-menu { border-radius: 0; border: 1px solid var(--pw-divider); border-top: 3px solid var(--pw-accent); background: var(--pw-surface); color: var(--pw-ink); box-shadow: var(--pw-shadow-pop); }
.dropdown-menu .dropdown-header.bg-secondary { background: var(--pw-surface) !important; color: var(--pw-ink); border-bottom: 1px solid var(--pw-divider); font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; }
.dropdown-menu .dropdown-item { color: var(--pw-ink); }
.dropdown-menu .dropdown-item:hover, .dropdown-menu .dropdown-item.active { background: var(--pw-tint); color: var(--pw-accent-ink); }
.dropdown-menu .dropdown-divider { border-color: var(--pw-divider); }
.dropdown-menu .form-control-plaintext { color: var(--pw-ink); }
.dropdown-menu label, .dropdown-menu .small { color: var(--pw-muted); }
.dropdown-menu .btn { white-space: nowrap; }

/* ---------- 10. Footer / execution log row ---------- */
.main-footer, .dark-mode .main-footer { background: var(--pw-head); border-top: 1px solid var(--pw-divider); color: var(--pw-head-muted); }

/* ---------- 11. Dialog content: tabs, fields form, assets ---------- */
.modal .nav-tabs { border-bottom: 1px solid var(--pw-divider); }
.modal .nav-tabs .nav-link { border: 0; border-radius: 0; color: var(--pw-muted); font-weight: 600; background: transparent; border-bottom: 3px solid transparent; margin-bottom: -1px; }
.modal .nav-tabs .nav-link:hover { color: var(--pw-ink); }
.modal .nav-tabs .nav-link.active { color: var(--pw-accent-ink); background: transparent; border-bottom-color: var(--pw-accent); }
.modal .asset-view-switch .btn { padding: 4px 10px; }
.modal .col-form-label, .modal label { color: var(--pw-ink); font-weight: 600; }
.modal .form-check-label, .modal .custom-control-label { font-weight: 400; }
.modal .form-check-input, .modal .custom-control-input { accent-color: var(--pw-accent); }
.modal code { color: var(--pw-accent-ink); background: var(--pw-tint); border: 1px solid var(--pw-tint-border); padding: 1px 5px; }
.modal :is(select.form-control, textarea.form-control, .form-control-file) { border-radius: 0; }
.modal .form-control-file { border: 1px dashed var(--pw-tint-border); background: var(--pw-ground); padding: 18px; width: 100%; color: var(--pw-muted); }
.modal .form-control-file::file-selector-button { border: 1px solid var(--pw-tint-border); background: var(--pw-surface); color: var(--pw-accent-ink); font-weight: 600; padding: 6px 12px; margin-right: 12px; cursor: pointer; }
.modal .file-types .badge { background: var(--pw-neutral); color: var(--pw-muted); border: 1px solid var(--pw-divider); font-family: "JetBrains Mono", monospace; font-weight: 400; }
.modal .progress { border-radius: 0; height: 6px; background: var(--pw-neutral); }
.modal .progress-bar { background: var(--pw-accent); }
.modal .asset-list-content.asset-grid { display: grid; grid-template-columns: repeat(3, minmax(0,1fr)); gap: 12px; }
.modal .asset-row { background: var(--pw-surface); border: 1px solid var(--pw-divider) !important; gap: 8px; }
.modal .asset-grid .asset-row { flex-direction: column; align-items: stretch !important; padding: 10px !important; position: relative; }
.modal .asset-row:hover { border-color: var(--pw-tint-border) !important; }
.modal .asset-row.selected { background: var(--pw-tint); border-color: var(--pw-accent) !important; box-shadow: inset 0 0 0 1px var(--pw-accent); }
.modal .asset-row-select { color: var(--pw-accent-ink); }
.modal .asset-grid .asset-row-select { position: absolute; top: 14px; left: 14px; z-index: 1; width: 26px; height: 26px; display: flex; align-items: center; justify-content: center; background: var(--pw-surface); border: 1px solid var(--pw-divider); margin: 0 !important; }
.modal .asset-grid .asset-row.selected .asset-row-select { background: var(--pw-accent); border-color: var(--pw-accent); color: var(--pw-on-accent); }
.modal .asset-thumb { display: flex; align-items: center; justify-content: center; background: var(--pw-raised); border: 1px solid var(--pw-divider); color: var(--pw-muted); min-width: 40px; min-height: 40px; }
.modal .asset-grid .asset-thumb { aspect-ratio: 4/3; }
.modal .asset-thumb .asset-thumb-icon { font-size: 1.4rem; }
.modal .asset-grid .asset-thumb .asset-thumb-icon { font-size: 2.6rem; }
.modal .asset-thumb .fa-file-pdf { color: var(--pw-danger); }
.modal .asset-row-name { color: var(--pw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
.modal .asset-type-pill { background: var(--pw-neutral); color: var(--pw-muted); border: 1px solid var(--pw-divider); }
.modal .asset-grid .asset-row-actions { position: absolute; top: 14px; right: 14px; }
.modal .asset-selected { background: var(--pw-ground); font-family: "JetBrains Mono", monospace; font-size: 13px; }

/* ---------- 12. Header brand: logo + wordmark always in the top bar ---------- */
.main-header .brand-link { display: inline-flex !important; align-items: center; gap: 0; width: auto !important; height: auto !important; padding: 0 24px 0 4px !important; top: 0 !important; }
.main-header .brand-link .brand-logo { width: auto; padding: 0; display: inline-flex; }
.main-header .brand-link .brand-logo svg { width: 30px; height: auto; }
/* Wordmark: <span class="brand-text">paperwork<span>.design</span></span> in TopHeader */
.main-header .brand-link .brand-text { font-family: var(--pw-font-head); font-weight: 600; font-size: 24px; color: var(--pw-head-ink); margin-left: 10px; line-height: 1; }
.main-header .brand-link .brand-text > span { color: var(--pw-accent); }
.main-header .brand-link > i.brand-logo { display: none !important; }
/* The menu (bars) icon takes the logo's own place on hover, same box, so nothing moves. */
.main-header .brand-link .brand-expand { display: none !important; order: -1; width: 30px; height: 27px; line-height: 27px; padding: 0; font-size: 22px; text-align: center; color: var(--pw-accent); }
/* Menu closed, at any width: hovering swaps the logo for the menu icon. Both halves of the swap must
   apply together - editor.css already hides the logo on hover, so showing nothing in its place
   made the link collapse, lose the hover and flicker. */
.sidebar-collapse .main-header .brand-link:hover .brand-expand { display: inline-block !important; }
.sidebar-collapse .main-header .brand-link:hover span.brand-logo { display: none !important; }
/* Logo block is the same width as the sidebar, so the breadcrumb lines up with the content edge */
@media (min-width: 992px) {
  body:not(.sidebar-collapse) .main-header .brand-link { width: 250px !important; margin-left: -1rem; padding-left: 20px !important; border-right: 1px solid rgba(255,255,255,.08); }
  .main-header .bars-link { display: none !important; }
}

/* ---------- 13. Dialog details ---------- */
.modal :is(input[type="radio"], input[type="checkbox"]) { accent-color: var(--pw-accent); }
.modal .thumb-wrapper { border: 0 !important; background: transparent !important; box-shadow: none !important; padding: 0; }
.modal .thumb-wrapper img { border: 1px solid var(--pw-divider); box-shadow: none !important; max-width: 100%; }
.modal .asset-list-container, .modal .asset-list-wrapper { border: 1px solid var(--pw-divider) !important; border-radius: 0; box-shadow: none !important; }
.modal .asset-row.selected { outline: 0 !important; border-color: var(--pw-accent) !important; box-shadow: inset 0 0 0 1px var(--pw-accent) !important; }
.modal .asset-row-select i { color: inherit !important; }
.modal .asset-view-switch .btn.active, .modal .asset-view-switch .btn:active { background: var(--pw-tint); color: var(--pw-accent-ink); border-color: var(--pw-accent); }
.modal .asset-grid .asset-row .asset-row-select { border-radius: 0 !important; background: var(--pw-surface) !important; border: 1px solid var(--pw-divider) !important; color: var(--pw-muted) !important; width: 26px !important; height: 26px !important; }
.modal .asset-grid .asset-row.selected .asset-row-select { background: var(--pw-accent) !important; border-color: var(--pw-accent) !important; color: var(--pw-on-accent) !important; }
.modal .asset-thumb { border-radius: 0 !important; }

/* ---------- 14. Thumbnails ---------- */
.pages-view .card .pam-thumb { display: block; width: 100%; height: auto; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; }
.pages-view .card .card-img-top.pam-thumb { padding: 0; border: 0; border-bottom: 1px solid var(--pw-divider); }
.pages-view .info-box .pam-thumb { width: 64px; height: 80px; flex: none; object-fit: cover; object-position: top center; margin: 8px 12px 8px 8px; }
.pages-view .card > .pam-link-view { display: block; width: 100%; height: auto !important; max-height: none !important; padding: 12px 12px 0; background: var(--pw-raised); }
.pages-view .card img.pam-thumb { display: block;  width: 100% !important; height: auto !important; max-height: none !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; padding: 0 !important; border: 1px solid var(--pw-divider) !important; }
.pages-view .info-box .info-box-icon { width: 76px !important; height: auto !important; padding: 8px; background: var(--pw-raised) !important; border-right: 1px solid var(--pw-divider); align-self: stretch; }
.pages-view .info-box img.pam-thumb { width: 100% !important; height: auto !important; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; margin: 0; border: 1px solid var(--pw-divider); }
.pages-view .info-box .info-box-content { padding: 12px 16px; }
.pages-view .info-box .pam-desc, .pages-view .info-box .info-box-number { font-family: var(--pw-font); font-weight: 400; font-size: 14px; color: var(--pw-muted); }
.pages-view .info-box .pam-title { font-size: 20px; color: var(--pw-ink); }
.main-sidebar.elevation-4 { box-shadow: none !important; }
/* ---------- 15. List row (info-box) thumbnail and spacing ---------- */
.pages-view .info-box { min-height: 0; padding: 0; align-items: stretch; margin-bottom: var(--pw-space-3); }
.pages-view .info-box .info-box-icon { display: block !important; width: 130px !important; flex: none; padding: 12px !important; font-size: inherit; background: var(--pw-raised) !important; }
.pages-view .info-box .info-box-icon .pam-link-view { display: block; padding: 0 !important; background: transparent !important; }
.pages-view .info-box img.pam-thumb { display: block; width: 100% !important; height: auto !important; padding: 0 !important; margin: 0 !important; background: #fff; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; border: 1px solid var(--pw-divider); }
.pages-view .info-box .info-box-content { padding: 14px 18px !important; display: flex; flex-direction: column; justify-content: space-between; gap: 6px; line-height: 1.4; }
.pages-view .info-box .info-box-body { display: flex; flex-direction: column; gap: 4px; }
.pages-view .info-box .info-box-number { margin: 0; }
.pages-view .info-box .info-rule { margin: 6px 0; border-top: 1px solid var(--pw-divider); }
.pages-view .info-box .info-box-bottom { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.pages-view .info-box .ribbon-wrapper { position: absolute; }
/* grid card spacing */
.pages-view .card .card-header { padding: 12px 16px 4px; }
.pages-view .card .card-body { padding: 6px 16px 12px; }
.pages-view .card .card-footer { padding: 10px 16px; }
/* ---------- 16. Spinners: keep a gap and never wrap away from their label ---------- */
:is(.main-header,.main-sidebar,.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.fa-spinner,.fa-spin,.working) { margin-right: .4em; }
:is(.main-header,.main-sidebar,.main-footer,.pages-view,.modal,.dropdown-menu,.content-fields,.content-preview-fields) :is(.btn,.working-text,.file-saving,.checking):has(.fa-spinner,.fa-spin) { white-space: nowrap; }

/* ---------- 17. Integration (added when wiring into the app) ---------- */
/* A group whose items are all hidden for this user's role shows no label either.
   menuMgr.js hides items with an inline display:none. */
.main-sidebar .nav-group:not(:has(> .nav-item:not([style*="display: none"]))) { display: none !important; }
/* The header logo: AdminLTE pins every .brand-link (position: fixed) and editor.css holds this one
   to 55px for phones. In the header it sits in the bar's own flow; at desktop width and with the
   sidebar open it is the 250px logo block. Below 992px it stays the 55px icon with no wordmark,
   so the template title keeps its room. */
body.layout-navbar-fixed .wrapper .main-header .brand-link { position: static !important; }
@media (min-width: 992px) {
  body.layout-navbar-fixed:not(.sidebar-collapse) .wrapper .main-header .brand-link { width: 250px !important; }
  body.layout-navbar-fixed.sidebar-collapse .wrapper .main-header .brand-link { width: auto !important; }
  .sidebar-collapse .main-header.navbar .nav-item.file-name { margin-left: 0; }
}
@media (max-width: 991.98px) {
  .main-header .brand-link .brand-text { display: none; }
}
/* The header is dark in both themes, but in light mode script puts .navbar-light on it and Bootstrap
   then darkens the links and the title. Keep them in the header's own ink. */
.main-header.navbar .navbar-nav .nav-link,
.main-header.navbar .file-name .info,
.main-header.navbar .file-name .info #templateName,
.main-header.navbar .file-name .file-edit-properties,
.main-header.navbar .file-name .file-saving { color: var(--pw-head-ink); }
.main-header.navbar .navbar-nav .nav-link:hover { color: var(--pw-accent); }
.main-header.navbar .file-name .info { padding-left: 12px; }
/* "Get in touch" at the foot of the sidebar follows the sidebar's own surface. */
.main-sidebar .nav-bottom { background: var(--pw-side); border-top: 1px solid var(--pw-divider); }
/* Outbound links in the header (wide screens only). */
.main-header.navbar .header-links { align-items: center; margin-right: 8px; }
.main-header.navbar .header-links .nav-link { font-size: 14px; font-weight: 500; padding: 0 10px; height: auto; color: var(--pw-head-muted); white-space: nowrap; }
.main-header.navbar .header-links .nav-link:hover { color: var(--pw-accent); }
/* Side menu items: text only, inset under their section label. */
.main-sidebar .nav-sidebar .nav-link .nav-icon { display: none; }
.main-sidebar .nav-sidebar .nav-header { padding-left: 20px; }
.main-sidebar .nav-sidebar .nav-link { padding: 8px 16px 8px 40px; color: var(--pw-side-ink); }
.main-sidebar .nav-sidebar .nav-link p { margin: 0; }
.main-sidebar .nav-group.nav-group-first { border-top: 0 !important; padding-top: var(--pw-space-3); }
/* Roll-over: teal, bold, tinted, with the thick left edge. */
.main-sidebar .nav-sidebar .nav-item:not(.disabled) > .nav-link:hover,
.main-sidebar .nav-sidebar .nav-item:not(.disabled) > .nav-link:focus-visible {
  background: var(--pw-tint); color: var(--pw-accent-ink); font-weight: 600; box-shadow: inset var(--pw-rule) 0 0 var(--pw-accent);
}
/* Not available to this user: dulled, and no roll-over. (menuMgr.js puts .disabled on the li.) */
.main-sidebar .nav-sidebar .nav-item.disabled > .nav-link,
.main-sidebar .nav-sidebar .nav-item.disabled > .nav-link:hover {
  color: color-mix(in srgb, var(--pw-side-ink) 38%, var(--pw-side)) !important; /* editor.css forces #666 here */
  background: transparent; font-weight: 400; box-shadow: none; cursor: default;
}
/* Items run edge to edge: AdminLTE pads the sidebar by .5rem each side and narrows the links to match. */
.main-sidebar .sidebar { padding-left: 0; padding-right: 0; }
.main-sidebar .nav-sidebar > .nav-item { margin: 0; width: 100%; }
.main-sidebar .nav-sidebar > .nav-item > .nav-link { width: 100%; margin: 0; }

/* ---------- 18. Signed-out home page (.pw-anon in Index.razor) ---------- */
/* Registration marks at the four corners, drawn by the element itself (no extra mark-up). */
.pages-view .pw-marks { position: relative; --pw-mark: color-mix(in srgb, var(--pw-ink) 55%, transparent); }
.pages-view .pw-marks::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px top 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px top 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px bottom 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 bottom 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px bottom 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 bottom 5px / 11px 1px;
  background-repeat: no-repeat;
}
.pages-view .pw-anon { --pw-anon-pad: clamp(20px, 5.5vw, 76px); color: var(--pw-ink); background: var(--pw-ground); }
.pages-view .pw-anon-top {
  padding: clamp(28px, 4.5vw, 64px) var(--pw-anon-pad) clamp(28px, 4vw, 56px);
  background-color: var(--pw-ground);
  background-image:
    linear-gradient(color-mix(in srgb, var(--pw-ink) 6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--pw-ink) 6%, transparent) 1px, transparent 1px);
  background-size: 40px 40px;
  border-bottom: var(--pw-rule) solid var(--pw-accent);
}
.pages-view .pw-anon-brand { display: flex; align-items: center; gap: clamp(12px, 1.6vw, 20px); margin-bottom: clamp(18px, 2.4vw, 30px); }
.pages-view .pw-anon-logo {
  flex: none; width: clamp(44px, 5vw, 62px); aspect-ratio: 318 / 286; background: var(--pw-accent);
  -webkit-mask: url("/images/PaperworkLogoTransparent.svg") center / contain no-repeat;
          mask: url("/images/PaperworkLogoTransparent.svg") center / contain no-repeat;
}
.pages-view .pw-anon-name { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(34px, 4vw, 52px); line-height: .95; color: var(--pw-accent-ink); }
.pages-view .pw-anon-tagline { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(15px, 1.6vw, 20px); line-height: 1.2; color: var(--pw-ink); }
.pages-view .pw-anon-title { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(30px, 4.6vw, 60px); line-height: 1.08; letter-spacing: 0; margin: 0; max-width: 20em; color: var(--pw-ink); }

.pages-view .pw-anon-hero { display: grid; grid-template-columns: 1fr; }
.pages-view .pw-anon-photo { min-height: 220px; aspect-ratio: 3 / 2; background: var(--pw-neutral); overflow: hidden; }
.pages-view .pw-anon-photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.pages-view .pw-anon-pitch {
  background: var(--pw-head); color: var(--pw-head-muted); --pw-mark: rgba(255,255,255,.6);
  padding: clamp(28px, 5vw, 72px) var(--pw-anon-pad); display: flex; flex-direction: column; justify-content: center;
}
.pages-view .pw-anon-pitch h2 { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(24px, 2.8vw, 38px); line-height: 1.12; color: var(--pw-head-ink); margin: 0 0 var(--pw-space-4); }
.pages-view .pw-anon-pitch p { font-size: 16px; line-height: 1.6; margin: 0 0 var(--pw-space-4); max-width: 34em; }
.pages-view .pw-anon-actions { display: flex; flex-wrap: wrap; gap: 14px 12px; margin-top: var(--pw-space-3); }
@media (min-width: 992px) {
  .pages-view .pw-anon-hero { grid-template-columns: 1fr 1fr; }
  .pages-view .pw-anon-photo { aspect-ratio: auto; min-height: 420px; }
  .pages-view .pw-anon-pitch { padding-left: clamp(32px, 4.5vw, 64px); }
}

.pages-view .pw-anon-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--pw-font-head); font-weight: 600; font-size: 17px; line-height: 1.2; white-space: nowrap;
  padding: 13px 22px; border: 1px solid transparent; border-radius: 0; background: transparent;
}
.pages-view .pw-anon-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.pages-view .pw-anon-btn-primary, .dark-mode .pages-view a.pw-anon-btn-primary { background: var(--pw-accent); border-color: var(--pw-accent); color: #1a1e23; }
.pages-view .pw-anon-btn-primary:hover { background: color-mix(in srgb, var(--pw-accent) 85%, #fff); color: #1a1e23; }
.pages-view .pw-anon-btn-secondary, .dark-mode .pages-view a.pw-anon-btn-secondary { border-color: rgba(255,255,255,.3); color: var(--pw-head-ink); }
.pages-view .pw-anon-btn-secondary:hover { background: rgba(255,255,255,.08); color: var(--pw-head-ink); }
.pages-view .pw-anon-btn-outline { width: 100%; font-size: 15px; padding: 10px 16px; border-color: var(--pw-tint-border); color: var(--pw-accent-ink); background: var(--pw-surface); }
.pages-view .pw-anon-btn-outline:hover { background: var(--pw-tint); }

.pages-view .pw-anon-help { display: grid; grid-template-columns: 1fr; gap: clamp(28px, 4vw, 56px); padding: clamp(32px, 4.5vw, 60px) var(--pw-anon-pad) clamp(40px, 5vw, 72px); align-items: start; }
@media (min-width: 992px) { .pages-view .pw-anon-help { grid-template-columns: minmax(0, 1fr) 300px; } }
.pages-view .pw-anon-kicker { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(26px, 2.8vw, 36px); line-height: 1.1; margin: 0 0 var(--pw-space-4); color: var(--pw-ink); display: flex; align-items: center; gap: 12px; }
.pages-view .pw-anon-kicker::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--pw-accent); }
.pages-view .pw-anon-list { list-style: none; margin: 0; padding: 0; counter-reset: pw-why; border-top: 1px solid var(--pw-divider); }
.pages-view .pw-anon-list li { counter-increment: pw-why; display: flex; align-items: baseline; gap: clamp(16px, 2.6vw, 36px); padding: 22px 0 30px; border-bottom: 1px solid var(--pw-divider); font-size: 17px; line-height: 1.5; }
.pages-view .pw-anon-list li:last-child { border-bottom: 0; }
.pages-view .pw-anon-list li::before { content: counter(pw-why, decimal-leading-zero); flex: none; font-family: var(--pw-font-head); font-weight: 600; font-size: 28px; line-height: 1; color: var(--pw-accent-ink); min-width: 1.3em; }
.pages-view .pw-anon-talk { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-top: var(--pw-rule) solid var(--pw-accent); padding: 28px 24px 24px; }
.pages-view .pw-anon-talk > i { font-size: 26px; color: var(--pw-accent-ink); display: block; margin-bottom: 18px; }
.pages-view .pw-anon-talk h3 { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1.15; margin: 0 0 14px; max-width: 9em; color: var(--pw-ink); }
/* The signed-out page runs edge to edge under the header. Only here: while .pw-anon is showing
   (welcomeView.js hides it with an inline display:none once someone is signed in), the 30px top
   padding of .content-views and the view's own 10px gutter are dropped, and the signed-in rows
   below it take no room. Every other view keeps its padding. */
.content-views:has(> .welcome-view.active > .pw-anon:not([style*="display: none"])) { padding-top: 0; }
.pages-view.welcome-view:has(> .pw-anon:not([style*="display: none"])) { padding: 0; }
.pages-view.welcome-view:has(> .pw-anon:not([style*="display: none"])) > .container-fluid { display: none; }
/* Logo mark: its top sits level with the top of the "p"; sizes follow the wordmark. */
.pages-view .pw-anon-brand { font-size: clamp(34px, 4vw, 52px); align-items: flex-start; }
.pages-view .pw-anon-name { font-size: 1em; }
.pages-view .pw-anon-logo { width: 1.2em; margin-top: .27em; }
.pages-view .pw-anon-tagline { margin-top: .32em; }
/* On the dark panel the marks are light in both themes. Set on the marked element itself:
   .pw-marks declares its own colour, so a value on the panel alone is never inherited. */
.pages-view .pw-anon-pitch .pw-marks { --pw-mark: rgba(255,255,255,.75); }

/* ---------- 19. Shared page pieces ---------- */
/* Page title block: <div class="pw-page-head"><h1 class="pw-page-title">…</h1></div> then <p class="pw-page-desc">. */
.pages-view .pw-page-head { display: flex; align-items: center; gap: 10px; margin: 0 0 6px; }
.pages-view .pw-page-title { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; letter-spacing: 0; margin: 0; color: var(--pw-ink); }
.pages-view .pw-page-kicker { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin: 0 0 4px; }
.pages-view .pw-page-desc { font-size: 16px; line-height: 1.55; color: var(--pw-muted); max-width: 56em; margin: 0 0 var(--pw-space-4); font-style: normal; font-weight: 400; }
.pages-view .pw-page-desc a { color: var(--pw-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
/* Small uppercase label above a title. */
.pages-view .pw-kicker { font-size: 11px; font-weight: 500; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); }
/* Buttons for the new pages (the Bootstrap .btn classes are restyled separately, in section 5). */
.pages-view .pw-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px; cursor: pointer; text-decoration: none;
  font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; line-height: 1.2; white-space: nowrap;
  padding: 11px 20px; border: 1px solid transparent; border-radius: 0; background: transparent;
}
.pages-view .pw-btn-block { display: flex; width: 100%; }
.pages-view .pw-btn:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.pages-view a.pw-btn-primary, .pages-view .pw-btn-primary, .dark-mode .pages-view a.pw-btn-primary { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view a.pw-btn-primary:hover { background: color-mix(in srgb, var(--pw-accent-strong) 86%, #000); color: var(--pw-on-accent); }
.pages-view a.pw-btn-outline, .pages-view .pw-btn-outline, .dark-mode .pages-view a.pw-btn-outline { border-color: var(--pw-tint-border); color: var(--pw-accent-ink); background: var(--pw-surface); }
.pages-view a.pw-btn-outline:hover { background: var(--pw-tint); color: var(--pw-accent-ink); }
/* Call-out with a label tab in its top-left corner. .pw-callout-accent is the teal one. */
.pages-view .pw-callout { background: var(--pw-surface); border: 1px solid var(--pw-divider); margin-top: 24px; padding: 0 0 18px; }
.pages-view .pw-callout-label { display: inline-block; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; padding: 5px 12px; background: var(--pw-muted); color: var(--pw-surface); }
.pages-view .pw-callout-body { padding: 16px 20px 0; font-size: 16px; line-height: 1.55; color: var(--pw-ink); }
.pages-view .pw-callout-accent { border-color: var(--pw-accent); }
.pages-view .pw-callout-accent .pw-callout-label { background: var(--pw-accent); color: #1a1e23; }
.pages-view .pw-callout code { font-size: 15px; padding: 2px 7px; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); color: var(--pw-accent-ink); border-radius: 0; }
/* Ticked list. */
.pages-view .pw-check-list { list-style: none; margin: 14px 0 0; padding: 0; }
.pages-view .pw-check-list li { display: flex; align-items: baseline; gap: 12px; padding: 5px 0; font-size: 15px; line-height: 1.5; color: var(--pw-ink); }
.pages-view .pw-check-list li > i { flex: none; font-size: 12px; color: var(--pw-accent-ink); }
.license-roles-view .card-body ul.pw-check-list li { padding-left: 0; padding-top: 5px; }
.license-roles-view .card-body ul.pw-check-list li:before { content: none; }

/* ---------- 20. Licence options page ---------- */
.pages-view.license-roles-view .pw-role-card { border-top: var(--pw-rule) solid var(--pw-accent); }
.pages-view.license-roles-view .pw-role-card .card-img-top { padding: 0; background: var(--pw-neutral); aspect-ratio: 16 / 9; object-fit: cover; border-bottom: 1px solid var(--pw-divider); }
.pages-view.license-roles-view .pw-role-card .card-body { padding: 22px 20px 12px; }
.pages-view.license-roles-view .pw-role-card .role-title { font-family: var(--pw-font-head); font-weight: 600; font-size: 30px; line-height: 1.1; margin: 10px 0 8px; color: var(--pw-ink); }
.pages-view.license-roles-view .pw-role-card .role-headline { font-size: 16px; font-weight: 400; line-height: 1.45; color: var(--pw-muted); padding-bottom: 0; }
.pages-view.license-roles-view .pw-role-card .card-footer { padding: 16px 20px 20px; border-top: 0; color: var(--pw-ink); min-height: 0 !important; }
.pages-view.license-roles-view .pw-role-card .card-footer .btn { min-width: 60%; }
.pages-view .pw-stripe-note { display: flex; align-items: center; gap: 16px; margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--pw-divider); font-size: 15px; color: var(--pw-muted); }
.pages-view .pw-stripe-note strong { color: var(--pw-ink); }
.pages-view .pw-stripe-badge { flex: none; background: #635bff; color: #fff; font-weight: 700; font-size: 14px; padding: 8px 10px; letter-spacing: -.2px; }
/* Label row on a role card: the "<Role> licence" label, and a small tag where the role has one. */
.pages-view .pw-role-labels { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; }
.pages-view .pw-tag { display: inline-flex; align-items: center; font-size: 11px; font-weight: 500; letter-spacing: .3px; line-height: 1.2; padding: 3px 9px; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); color: var(--pw-accent-ink); white-space: nowrap; }

/* ---------- 21. Feature comparison page ---------- */
/* The header row sticks under the app header while the page scrolls. Sticky positioning follows the
   nearest ancestor that can scroll, and both <body> and .content-views are set up as scroll boxes
   (without ever scrolling on these pages), which would pin the row to them and so not at all.
   On this view only, they stop being scroll boxes and the page itself scrolls. */
body:not(.modal-open):has(.license-features-view.active) { overflow: visible !important; }
html:has(.license-features-view.active) { overflow-x: hidden; }
.content-views:has(> .license-features-view.active) { overflow: visible; }

.pages-view .pw-compare { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; background: var(--pw-surface); border: 1px solid var(--pw-divider); border-top: 0; margin: 8px 0 var(--pw-space-5); font-size: 15px; color: var(--pw-ink); }
.pages-view .pw-compare th, .pages-view .pw-compare td { font-weight: 400; text-align: left; vertical-align: middle; }
.pages-view .pw-compare .pw-compare-role { width: 11%; text-align: center; }

.pages-view .pw-compare thead th {
  position: sticky; top: var(--pw-header-height); z-index: 3;
  background: var(--pw-head); color: var(--pw-head-ink); padding: 0; height: 44px;
  font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase;
}
.pages-view .pw-compare thead th a, .dark-mode .pages-view .pw-compare thead th a { display: flex; align-items: center; justify-content: center; height: 44px; padding: 0 6px; color: inherit; text-decoration: none; }
.pages-view .pw-compare thead th a:hover { color: var(--pw-accent); }
.pages-view .pw-compare thead th.is-current { background: var(--pw-accent); color: #1a1e23; }
.pages-view .pw-compare thead th.is-current a:hover { color: #1a1e23; text-decoration: underline; }

.pages-view .pw-compare .pw-compare-section th { background: var(--pw-raised); padding: 22px 16px 14px; border-top: 1px solid var(--pw-divider); border-bottom: 1px solid var(--pw-divider); }
.pages-view .pw-compare tbody:first-of-type .pw-compare-section th { border-top: 0; }
.pages-view .pw-compare-section-name { display: block; font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--pw-ink); }
.pages-view .pw-compare-section-desc { display: block; font-size: 14px; line-height: 1.5; color: var(--pw-muted); max-width: 62em; margin-top: 4px; }

.pages-view .pw-compare tbody th.pw-compare-feature { padding: 10px 16px 10px 28px; border-bottom: 1px solid var(--pw-divider); }
.pages-view .pw-compare tbody td.pw-compare-role { padding: 7px 4px; border-bottom: 1px solid var(--pw-divider); }
.pages-view .pw-compare tbody td.is-current { background: var(--pw-tint); }
.pages-view .pw-compare tbody:last-of-type tr:last-child > * { border-bottom: 0; }
.pages-view .pw-compare tbody tr:not(.pw-compare-section):hover th.pw-compare-feature { color: var(--pw-accent-ink); }

/* Yes and no as small square marks. */
.pages-view .pw-compare-mark { display: inline-flex; align-items: center; justify-content: center; width: 24px; height: 24px; font-size: 11px; border: 1px solid transparent; }
.pages-view .pw-compare-mark.is-yes { background: var(--pw-tint); border-color: var(--pw-tint-border); color: var(--pw-accent-ink); }
.pages-view .pw-compare-mark.is-no { background: var(--pw-neutral); border-color: var(--pw-divider); color: var(--pw-muted); }
.pages-view .pw-compare td.is-current .pw-compare-mark.is-yes { background: var(--pw-surface); }
.pages-view .pw-compare .pw-compare-caption td { padding: 10px 16px 14px 28px; font-size: 13px; color: var(--pw-muted); border-bottom: 1px solid var(--pw-divider); }

/* Narrow screens: the four role columns close up and their labels shrink, so the table still fits
   without a sideways scroll (a scrolling wrapper would also stop the header sticking). */
@media (max-width: 767.98px) {
  .pages-view .pw-compare { font-size: 14px; }
  .pages-view .pw-compare .pw-compare-role { width: 52px; }
  .pages-view .pw-compare thead th { font-family: var(--pw-font-head); font-size: 11px; letter-spacing: .3px; }
  .pages-view .pw-compare-you { display: none; }
  .pages-view .pw-compare tbody th.pw-compare-feature { padding: 9px 8px 9px 12px; }
  .pages-view .pw-compare .pw-compare-section th { padding: 18px 12px 12px; }
  .pages-view .pw-compare .pw-compare-caption td { padding-left: 12px; }
  .pages-view .pw-compare-mark { width: 22px; height: 22px; }
}

/* ---------- 22. Profile panel (built by profileMgr.js into the header's user dropdown) ---------- */
/* Initials in a teal square: in the panel's header, and small in the top bar. */
.main-header .pw-avatar { flex: none; display: inline-flex; align-items: center; justify-content: center; width: 48px; height: 48px; background: var(--pw-accent); color: #1a1e23; font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; line-height: 1; letter-spacing: .3px; }
.main-header .pw-avatar.pw-avatar-sm { width: 34px; height: 34px; font-size: 15px; outline: 2px solid rgba(255,255,255,.85); outline-offset: 1px; }
.main-header .user-signed-in:has(.pw-avatar) > i { display: none; }
.main-header .user-actions .user-signed-in { padding-top: 0; padding-bottom: 0; display: inline-flex; align-items: center; }
.main-header .user-actions:not(.logged-in) .user-signed-in { display: none; }

.main-header .user-actions .dropdown-menu { width: 340px; max-width: calc(100vw - 16px); padding: 0; border-top: var(--pw-rule) solid var(--pw-accent); }
.main-header .user-actions .dropdown-menu .dropdown-divider { margin: 0; }
.main-header .user-actions .dropdown-header.pw-profile-head { display: flex; align-items: center; gap: 14px; padding: 18px 20px; white-space: normal; text-transform: none; letter-spacing: 0; }
.main-header .user-actions .pw-profile-who { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.main-header .user-actions .pw-profile-name { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1.15; color: var(--pw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-header .user-actions .pw-profile-email { font-family: var(--pw-font); font-weight: 400; font-size: 13px; line-height: 1.3; color: var(--pw-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.main-header .user-actions .btn-refresh-profile { flex: none; background: none; border: 0; box-shadow: none; color: var(--pw-accent-ink); padding: 4px 6px; }

.main-header .user-actions .pw-profile { padding: 4px 20px 14px !important; font-size: 14px; }
.main-header .user-actions .pw-profile .form-group { margin: 0; padding: 12px 0; }
.main-header .user-actions .pw-profile .dropdown-divider { margin: 0 !important; }
.main-header .user-actions .pw-profile-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.main-header .user-actions .pw-profile-fact { flex: 1 1 auto; min-width: 0; }
.main-header .user-actions .pw-profile label { display: block; margin: 0 0 3px; font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); }
.main-header .user-actions .pw-profile .form-check-label { display: inline; font-size: 13px; font-weight: 400; letter-spacing: 0; text-transform: none; color: var(--pw-ink); }
.main-header .user-actions .pw-profile .form-control-plaintext { padding: 0; margin: 0; height: auto; font-size: 15px; line-height: 1.4; color: var(--pw-ink); }
.main-header .user-actions .pw-profile-row > .btn { flex: none; min-width: 70px; }
.main-header .user-actions .pw-profile .cancel-details { flex-basis: 100%; }
.main-header .user-actions .pw-profile-accepted { display: flex; align-items: baseline; gap: 10px; padding: 3px 0; font-size: 13px; color: var(--pw-muted); }
.main-header .user-actions .pw-profile-accepted:first-of-type { padding-top: 14px; }
.main-header .user-actions .pw-profile-accepted > i { font-size: 11px; color: var(--pw-accent-ink); }
.main-header .user-actions .pw-profile a, .dark-mode .main-header .user-actions .pw-profile a:not(.btn) { color: var(--pw-accent-ink); text-decoration: underline; text-underline-offset: 3px; }
.main-header .user-actions .pw-profile a.btn { text-decoration: none; }

.main-header .user-actions .dropdown-footer { padding: 0; text-align: left; }
.main-header .user-actions .dropdown-footer > .btn-confirm { margin: 14px 20px 0; }
.main-header .user-actions .dropdown-footer > .profile-error { margin: 8px 20px 0; }
.main-header .user-actions .pw-profile-foot { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 20px; margin-top: 14px; border-top: 1px solid var(--pw-divider); }
.main-header .user-actions .dropdown-footer > .pw-profile-foot:first-child { margin-top: 0; }
.main-header .user-actions .btn-profile-contact { font-size: 14px; color: var(--pw-muted); text-decoration: none; }
.main-header .user-actions .btn-profile-contact:hover { color: var(--pw-accent-ink); }

/* Profile panel held open because something needs the user (li.user-actions.always-show.required):
   a new profile to confirm, new terms to accept, or an organisation to name. Same frame as a dialog
   that needs attention - a neutral header under an amber top rule, never a solid red block.
   (editor.css paints the header, border and avatar red with !important, hence the weight here.) */
body .main-header li.dropdown.user-actions.always-show.required .dropdown-menu,
body.dark-mode .main-header li.dropdown.user-actions.always-show.required .dropdown-menu { border-color: var(--pw-divider) !important; border-top: var(--pw-rule) solid var(--pw-warn) !important; }
body .main-header li.dropdown.user-actions.always-show.required .dropdown-header,
body.dark-mode .main-header li.dropdown.user-actions.always-show.required .dropdown-header { background: var(--pw-surface) !important; color: var(--pw-ink); border-bottom: 1px solid var(--pw-divider); }
body .main-header li.dropdown.user-actions.always-show.required a.nav-link,
body.dark-mode .main-header li.dropdown.user-actions.always-show.required a.nav-link { background: transparent !important; border-radius: 0; }
.main-header li.dropdown.user-actions.always-show.required .pw-avatar.pw-avatar-sm { outline-color: var(--pw-warn); }
.main-header .user-actions .pw-profile-kicker { font-family: var(--pw-font); font-size: 10.5px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-warn-ink); margin-bottom: 3px; }
.main-header .user-actions .pw-profile-notice { display: flex; align-items: baseline; gap: 10px; padding: 12px 20px; background: var(--pw-warn-tint); color: var(--pw-warn-ink); border-bottom: 1px solid var(--pw-divider); font-size: 14px; line-height: 1.4; }

/* Fields in the panel. */
.main-header .user-actions .pw-profile .form-control { border-radius: 0; height: 36px; font-size: 15px; background: var(--pw-raised); border: 1px solid var(--pw-divider); color: var(--pw-ink); box-shadow: none; }
.main-header .user-actions .pw-profile .form-control[readonly] { color: var(--pw-muted); }
.main-header .user-actions .pw-profile .form-control:focus { border-color: var(--pw-accent); outline: 0; }
.main-header .user-actions .pw-profile .form-control.is-invalid { border-color: var(--pw-danger); background-image: none; }
.main-header .user-actions .pw-profile .input-group-text { border-radius: 0; background: var(--pw-neutral); border: 1px solid var(--pw-divider); border-left: 0; color: var(--pw-muted); min-width: 38px; justify-content: center; }
.main-header .user-actions .pw-profile .input-group-text.bg-danger { background: var(--pw-danger-tint) !important; border-color: var(--pw-danger-border); color: var(--pw-danger); }
.main-header .user-actions .pw-profile .form-text, .main-header .user-actions .pw-profile .invalid-feedback { font-size: 13px; line-height: 1.4; }
.main-header .user-actions .pw-profile .text-danger { color: var(--pw-danger) !important; }
.main-header .user-actions .pw-profile .form-check { padding-top: 6px; padding-bottom: 6px; padding-left: 1.5rem; }
.main-header .user-actions .pw-profile .form-check-input { accent-color: var(--pw-accent); }
.main-header .user-actions .pw-profile-form .form-group:first-child { padding-top: 14px; }

/* Foot: Confirm is the one solid button, whatever colour class script has on it at the time. */
.main-header .user-actions .pw-profile-foot-actions { display: inline-flex; align-items: center; gap: 10px; }
.main-header .user-actions .dropdown-footer .btn-confirm,
.main-header .user-actions .dropdown-footer .btn-confirm.btn-danger,
.main-header .user-actions .dropdown-footer .btn-confirm.btn-success { background: var(--pw-accent-strong); border: 1px solid var(--pw-accent-strong); color: var(--pw-on-accent); border-radius: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; padding: 7px 20px; margin: 0; min-width: 96px; }
.main-header .user-actions .dropdown-footer .btn-confirm:hover { background: color-mix(in srgb, var(--pw-accent-strong) 86%, #000); }
.main-header .user-actions .dropdown-footer .btn-confirm.btn-secondary, .main-header .user-actions .dropdown-footer .btn-confirm.disabled { background: var(--pw-neutral); border-color: var(--pw-divider); color: var(--pw-muted); }
.main-header .user-actions .dropdown-footer .btn-link.btn-sign-out { color: var(--pw-muted); padding-left: 0; text-decoration: none; font-size: 14px; }
.main-header .user-actions .dropdown-footer .btn-link.btn-sign-out:hover { color: var(--pw-danger); }
.main-header .user-actions .dropdown-footer > .profile-error { margin: 12px 20px 0; }
/* A terms or privacy box left unticked when Confirm is pressed: red outline on the box, the line in red,
   and what to do said after it. (The panel's own label colour was hiding Bootstrap's red here.) */
.main-header .user-actions .pw-profile .form-check-input.is-invalid { outline: 2px solid var(--pw-danger); outline-offset: 1px; }
.main-header .user-actions .pw-profile .form-check-input.is-invalid ~ .form-check-label { color: var(--pw-danger); }
.main-header .user-actions .pw-profile .form-check-input.is-invalid ~ .form-check-label::after { content: "Please tick this to continue."; display: block; font-size: 12px; margin-top: 2px; }

/* ---------- 23. Signed-in home page ---------- */
/* Section heading with a short teal rule before it; an optional text link sits at the right of its row. */
.pages-view .pw-section-title { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 24px; line-height: 1.15; letter-spacing: 0; color: var(--pw-ink); }
.pages-view .pw-section-title::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--pw-accent); }
.pages-view a.pw-section-link, .dark-mode .pages-view a.pw-section-link { font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; color: var(--pw-accent-ink); text-decoration: none; white-space: nowrap; }
.pages-view a.pw-section-link:hover { text-decoration: underline; text-underline-offset: 3px; }
.pages-view.welcome-view .welcome-title { margin-bottom: 0; padding-bottom: 0; }
.pages-view.welcome-view .welcome-title .pw-page-desc { margin-bottom: 0; }
.pages-view.welcome-view .welcome-title-group { display: flex; align-items: center; justify-content: space-between; gap: 16px; border-bottom: 0; margin: 28px 0 14px; }
.pages-view .pw-tag-neutral { background: var(--pw-neutral); border-color: var(--pw-divider); color: var(--pw-muted); }
.pages-view .pw-tag-warn { background: var(--pw-warn-tint); border-color: var(--pw-warn); color: var(--pw-warn-ink); }
.pages-view .pw-tag > i { font-size: 9px; margin-right: 6px; }

/* Create tiles. */
.pages-view .pw-tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 16px; padding: 6px; margin: 0 -6px; }
.pages-view .pw-tile {
  display: grid; grid-template-columns: 1fr auto; grid-template-rows: auto 1fr; align-items: end; gap: 22px 10px; min-height: 132px;
  padding: 20px 18px 18px; background: var(--pw-surface); border: 1px solid var(--pw-divider); color: var(--pw-ink); cursor: pointer;
}
.pages-view .pw-tile > i { grid-column: 1 / -1; align-self: start; font-size: 22px; color: var(--pw-accent-ink); }
.pages-view .pw-tile-label { font-size: 16px; font-weight: 600; line-height: 1.35; }
.pages-view .pw-tile-arrow { font-size: 18px; line-height: 1.35; color: var(--pw-accent-ink); }
.pages-view .pw-tile:hover, .pages-view .pw-tile:focus-visible, .pages-view .pw-tile-primary { background: var(--pw-tint); border-color: var(--pw-accent); }
.pages-view .pw-tile:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
/* Phones: one tile per row, icon beside the label; importing from Word and pasting are left for wider screens. */
@media (max-width: 575.98px) {
  .pages-view .pw-tiles { grid-template-columns: 1fr; gap: 12px; }
  .pages-view .pw-tile { grid-template-columns: auto 1fr auto; grid-template-rows: auto; align-items: center; gap: 14px; min-height: 0; padding: 14px 16px; }
  .pages-view .pw-tile > i { grid-column: auto; align-self: center; width: 24px; text-align: center; }
  .pages-view .pw-tile-wide-only { display: none !important; }
}

/* Recent template cards: the page preview on a mat, then status, title and when it changed. */
.pages-view.welcome-view .template-set.card-deck { padding: 6px 0 2px; margin-left: -8px; margin-right: -8px; }
.pages-view .pw-recent-card { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-radius: 0; box-shadow: none; margin: 0; }
.pages-view .pw-recent-card .pw-recent-thumb { display: block; padding: 12px 12px 0; background: var(--pw-neutral); border-bottom: 1px solid var(--pw-divider); }
.pages-view .pw-recent-card .card-img-top { display: block; width: 100%; aspect-ratio: 4 / 5; object-fit: cover; object-position: top center; padding: 0; background: #fff; border: 1px solid var(--pw-divider); border-bottom: 0; border-radius: 0; }
.pages-view .pw-recent-card .card-body { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; padding: 14px 14px 16px; background: transparent; }
.pages-view .pw-recent-card a.card-title, .dark-mode .pages-view .pw-recent-card a.card-title { float: none; margin: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; line-height: 1.15; color: var(--pw-ink); text-decoration: none; }
.pages-view .pw-recent-card a.card-title:hover { color: var(--pw-accent-ink); }
.pages-view .pw-recent-modified { font-size: 12px; color: var(--pw-muted); }
.pages-view .pw-recent-modified:empty, .pages-view .pw-recent-status:empty { display: none; }
.pages-view .pw-recent-status { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 10.5px; }
/* The welcome line is the biggest title in the app. */
.pages-view.welcome-view .pw-page-title { font-size: clamp(40px, 4.6vw, 64px); margin-bottom: 6px; }

/* Empty state: a dashed tinted frame with a title, a line of explanation and (optionally) a button. */
.pages-view .pw-empty { border: 1px dashed var(--pw-tint-border); background: transparent; padding: 28px 28px 26px; text-align: left; color: var(--pw-muted); border-radius: 0; }
.pages-view .pw-empty-title { font-family: var(--pw-font-head); font-weight: 600; font-size: 24px; line-height: 1.15; margin: 0 0 8px; color: var(--pw-ink); }
.pages-view .pw-empty-desc { font-size: 15px; line-height: 1.5; margin: 0; color: var(--pw-muted); }
.pages-view .pw-empty-note { font-size: 13px; margin: 8px 0 0; color: var(--pw-warn-ink); }
.pages-view .pw-empty-note:empty { display: none; }
.pages-view .pw-empty .pw-btn { margin-top: 16px; }
.pages-view.welcome-view .welcome-recent .welcome-recent-empty { padding: 28px 28px 26px; text-align: left; color: var(--pw-muted); }

/* The recent row lines up with the tiles above it; its scroll arrows sit over the row's own edges. */
.pages-view.welcome-view .scroll-row-wrapper { margin-left: 0; margin-right: 0; }
.pages-view.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.scroll-left { left: 0; }
.pages-view.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.scroll-right { right: 0; }
.pages-view.welcome-view .scroll-row-wrapper.is-scrollable .row-wrapper-scroll.active { background: color-mix(in srgb, var(--pw-surface) 85%, transparent); color: var(--pw-accent-ink); border-radius: 0; }
.pages-view .pw-recent-go { display: none; }
/* The home page's rows lay their cards out over as many lines as they need, rather than
   scrolling sideways behind arrows (editor.css). Kept as an override so it's easy to undo
   if the rows grow (recent collections, blueprints...). */
.pages-view.welcome-view .template-set.card-deck { flex-wrap: wrap; overflow-x: visible; scroll-snap-type: none; touch-action: auto; }
.pages-view.welcome-view .scroll-row-wrapper .row-wrapper-scroll { display: none !important; }

/* Phones: the create tiles join into one list, and recent templates become rows -
   a small preview, then status, title and date, with a chevron at the right. */
@media (max-width: 575.98px) {
  .pages-view .pw-tiles { gap: 0; }
  .pages-view .pw-tiles .pw-tile + .pw-tile { margin-top: -1px; }
  .pages-view .pw-tiles .pw-tile-primary, .pages-view .pw-tiles .pw-tile:hover { position: relative; z-index: 1; }
  .pages-view .pw-tiles .pw-tile.pw-marks::before { content: none; }

  .pages-view.welcome-view .template-set.card-deck { flex-wrap: wrap; overflow-x: visible; margin-left: 0; margin-right: 0; padding: 0; gap: 12px; }
  .pages-view.welcome-view .template-set.card-deck > .card-container { flex: 0 0 100%; max-width: 100%; padding: 0; margin: 0 !important; }
  .pages-view.welcome-view .scroll-row-wrapper .row-wrapper-scroll { display: none !important; }
  .pages-view .pw-recent-card { flex-direction: row; align-items: center; gap: 12px; padding: 10px 12px 10px 10px; }
  .pages-view .pw-recent-card.pw-marks::before { content: none; }
  .pages-view .pw-recent-card .pw-recent-thumb { flex: none; width: 58px; padding: 0; background: transparent; border: 0; }
  .pages-view .pw-recent-card .card-img-top { aspect-ratio: 4 / 5; border: 1px solid var(--pw-divider); }
  .pages-view .pw-recent-card .card-body { flex: 1 1 auto; min-width: 0; padding: 0; gap: 4px; }
  .pages-view .pw-recent-card a.card-title { font-size: 19px; }
  .pages-view .pw-recent-go { display: block; flex: none; font-size: 13px; color: var(--pw-accent-ink); }
}
/* Recent cards roll over like the create tiles (tint and teal edge), at every width. The old lift -
   a drop shadow and a sideways shove from editor.css's .template-set .card:hover - is switched off:
   it pushed the card past its own bounds. */
.pages-view .template-set .pw-recent-card:hover, .pages-view .template-set .pw-recent-card:focus-within { margin: 0; filter: none; background: var(--pw-tint); border-color: var(--pw-accent); }
.pages-view .pw-recent-card:hover a.card-title { color: var(--pw-accent-ink); }
/* ---------- 24. Template listing pages (My Templates and the pages that share its list) ---------- */
/* Page head with an action at the right. */
/* Kicker, title and intro stack in the first column; the page's action sits in the second, beside the
   intro - or beside the title when the intro is collapsed, and always on a phone (where it is just its icon). */
.pages-view .pw-page-head-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; column-gap: 20px; align-items: center; margin-bottom: var(--pw-space-4); }
.pages-view .pw-page-head-row > * { grid-column: 1; }
.pages-view .pw-page-head-row > .pw-page-kicker { grid-row: 1; }
.pages-view .pw-page-head-row > .pw-page-head { grid-row: 2; margin-bottom: 0; }
.pages-view .pw-page-head-row > .help-text-body { grid-row: 3; font-style: normal; }
.pages-view .pw-page-head-row .pw-page-desc { margin: 6px 0 0; }
.pages-view .pw-page-head-row > .pw-page-action { grid-column: 2; grid-row: 3; align-self: center; white-space: nowrap; }
body.help-text-collapsed .pages-view .pw-page-head-row > .pw-page-action { grid-row: 2; }
.pages-view .pw-page-action > i + .pw-btn-label { margin-left: 2px; }
@media (max-width: 575.98px) {
  .pages-view .pw-page-head-row > .pw-page-action { grid-row: 2; width: 44px; height: 44px; padding: 0; }
  .pages-view .pw-page-head-row > .help-text-body { grid-column: 1 / -1; }
  .pages-view .pw-page-action .pw-btn-label { display: none; }
}
.pages-view .pw-page-head .help-text-toggle { color: var(--pw-muted); }

/* Filter panel: small teal labels, square controls, the chosen view in teal. */
.pages-view .pam-filters h6 { font-family: var(--pw-font); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin: 0 0 6px; border: 0; padding: 0; }
.pages-view .pam-filters .pam-filter-group { margin-bottom: 4px; }
.pages-view .pam-filters .btn-group { display: flex; width: 100%; }
.pages-view .pam-filters .form-control { border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); box-shadow: none; }
.pages-view .pam-filters .form-control:focus { border-color: var(--pw-accent); }
.pages-view .pam-filters .btn { border-radius: 0; font-family: var(--pw-font); font-weight: 500; font-size: 14px; }
.pages-view .pam-filters .pam-action-list-mode { flex: 1 1 50%; }
.pages-view .pam-filters .list-group-item { border-radius: 0; background: var(--pw-surface); border-color: var(--pw-divider); color: var(--pw-ink); font-size: 14px; padding: 8px 12px; gap: 8px; cursor: pointer; }
.pages-view .pam-filters .list-group-item:hover, .pages-view .pam-filters .list-group-item.active { background: var(--pw-tint); color: var(--pw-accent-ink); border-color: var(--pw-tint-border); }

/* Cards and rows roll over like the home page tiles: tint and a teal edge. The old lift
   (editor.css: a drop shadow and a sideways shove on hover) is switched off everywhere. */
/* The card keeps one size: the same side margins at rest and on hover. (Bootstrap's card-deck gives a
   card side margins and the old hover rule changed them; zeroing them on hover alone made it grow.) */
.pages-view :is(.template-set, .collection-set) .card,
.pages-view :is(.template-set, .collection-set) .card:hover { margin-left: 0; margin-right: 0; }
.pages-view :is(.template-set, .collection-set) .card:hover { filter: none; }
.pages-view :is(.template-set, .collection-set) .info-box:hover { margin: 5px 0 16px; filter: none; }
.pages-view .template-set .pam-item .card:hover, .pages-view .template-set .info-box.pam-item:hover { background: var(--pw-tint); border-color: var(--pw-accent); }
.pages-view .template-set .pam-item:hover .pam-title { color: var(--pw-accent-ink); }
.pages-view .template-set .info-box.pam-item { margin: 0 0 var(--pw-space-3); }
.pages-view .template-set .info-box.pam-item:hover { margin: 0 0 var(--pw-space-3); }

/* Status is said by a tag, not by a coloured edge. */
.pages-view .template-set .pam-checked-outline .card, .pages-view .template-set .pam-checked-outline.info-box { border-left: 1px solid var(--pw-divider); }
.pages-view .template-set .pam-checked-outline .card:hover, .pages-view .template-set .pam-checked-outline.info-box:hover { border-left-color: var(--pw-accent); }
.pages-view .pam-status-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.pages-view .pam-status-tags:empty { display: none; }
.pages-view .pam-status-tags .pw-tag { text-transform: uppercase; letter-spacing: 1px; font-weight: 600; font-size: 10.5px; }
.pages-view .card > .pam-status-tags { order: 2; margin: 0 16px 4px; }
.pages-view .info-box .pam-status-tags .ribbon-wrapper { position: static; }
/* Status tags never wrap inside themselves; on the narrowest screens the checked-out
   tag drops its version number (pamphletListView.js _setCheckoutTag) to save width. */
.pages-view .pam-status-tags :is(.pw-tag, .ribbon) { white-space: nowrap; }
@media (max-width: 575.98px) {
  .pages-view .pam-status-tags .pam-tag-ver { display: none; }
}
.pages-view .pam-status-tags:not(:has(> :not([style*="display: none"]):not([style*="display:none"]))) { display: none; }

/* Card foot: the everyday actions at the left, Delete set apart at the right. */
.pages-view .template-set .pam-item .btn-grouping { display: flex; align-items: center; gap: 6px; text-align: left !important; width: 100%; }
.pages-view .template-set .pam-item .btn-grouping .btn { width: 34px; height: 34px; padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; }
.pages-view .template-set .pam-item .btn-grouping .pam-action-delete { margin-left: auto; }
.pages-view .template-set .info-box .info-box-bottom > .btn-grouping { width: auto; flex: none; }
.pages-view .template-set .info-box .info-box-bottom .btn-grouping .btn-grouping { width: auto; }
.pages-view .template-set .info-box .btn-grouping .pam-action-delete { margin-left: 10px; }
.pages-view .template-set .card .pam-desc { font-size: 14px; color: var(--pw-muted); }
.pages-view .template-set .pam-modified { font-size: 12px; color: var(--pw-muted); }

/* Nothing matched, or it could not be loaded: the empty-state frame. */
.pages-view .template-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) { background: transparent !important; border: 1px dashed var(--pw-tint-border); color: var(--pw-muted) !important; padding: 24px 28px; align-items: center; gap: 18px; }
.pages-view .template-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-icon { width: auto !important; padding: 0 !important; background: transparent !important; border: 0; font-size: 26px; color: var(--pw-accent-ink); align-self: center; }
.pages-view .template-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-content { padding: 0 !important; gap: 4px; }
.pages-view .template-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-text { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; color: var(--pw-ink); white-space: normal; }
.pages-view .template-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-number { font-family: var(--pw-font); font-weight: 400; font-size: 15px; color: var(--pw-muted); }
.pages-view .template-set .info-box.bg-gradient-warning { border-color: var(--pw-warn); }
/* Fixes found on the real page: the old amber top edge on a checked-out card or row, the action
   buttons stretching to share the card's width, and the help toggle drifting away from the title. */
.pages-view .template-set .pam-checked-outline .card, .pages-view .template-set .info-box.pam-checked-outline { border-top: 1px solid var(--pw-divider) !important; }
.pages-view .template-set .pam-checked-outline .card:hover, .pages-view .template-set .info-box.pam-checked-outline:hover { border-top-color: var(--pw-accent) !important; }
.pages-view .template-set .pam-item .btn-grouping .btn { flex: 0 0 34px; margin: 0 !important; }
.pages-view .template-set .pam-item .btn-grouping .pam-action-delete { margin-left: auto !important; }
.pages-view .template-set .info-box .btn-grouping .pam-action-delete { margin-left: 10px !important; }
.pages-view .pw-page-head .help-text-toggle { margin-left: 6px; }

/* The filter row (shown in place of the side panel below 1200px, on every listing page):
   search first and widest, then view, sort and filter. Labelled buttons from 992px; icons only below. */
.pages-view .pam-filters-top .btn-toolbar { gap: 8px; align-items: stretch; }
.pages-view .pam-filters-top .btn-toolbar > * { margin-right: 0 !important; }
.pages-view .pam-filters-top .pam-filter-search { order: -1; flex: 1 1 260px !important; min-width: 0; width: auto; }
.pages-view .pam-filters-top .pam-filter-search .form-control { height: 42px; font-size: 16px; padding-left: 14px; }
.pages-view .pam-filters-top .pam-filter-search .btn { height: 42px; width: 46px; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); border-left: 0; color: var(--pw-accent-ink); }
.pages-view .pam-filters-top .btn-group { width: auto; flex: 0 0 auto; }
.pages-view .pam-filters-top .btn-group > .btn, .pages-view .pam-filters-top .btn-group > .btn-group > .btn { height: 42px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; flex-grow: 0 !important; white-space: nowrap; }
.pages-view .pam-filters-top .pam-action-list-mode { flex: 0 0 auto; padding-left: 14px; padding-right: 14px; }
.pages-view .pam-filters-top .pam-filters-compact > .btn-group > .btn { width: 46px; padding: 0; }
.pages-view .pam-filters-top .pam-filters-compact > .btn-group > .btn.dropdown-toggle::after { display: none; }
.pages-view .pam-filters-top .pam-filters-compact > .btn-group + .btn-group { margin-left: 8px !important; }
.pages-view .pam-filters-top .pam-filters-status > .btn.pam-filtered { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
/* A chosen tag, in the side list and in the row's menu (script marks it with bg-primary). */
.pages-view .pam-filters .pam-action-tag.bg-primary { background: var(--pw-tint) !important; color: var(--pw-accent-ink) !important; border-color: var(--pw-tint-border); font-weight: 600; }
.pages-view .pam-filters .dropdown-item.pam-action-sort-order.bg-primary { background: var(--pw-tint) !important; color: var(--pw-accent-ink) !important; }
/* Filter controls share one height (38px: search, view buttons, drop-downs and tag rows), the search
   button always has its border (it had none in dark mode), and the drop-downs read in regular weight. */
.pages-view .pam-filters .pam-action-search { border: 1px solid var(--pw-control-border); border-left: 0; border-radius: 0; background: var(--pw-surface); color: var(--pw-accent-ink); }
.pages-view .pam-filters .pam-action-search:hover { background: var(--pw-tint); color: var(--pw-accent-ink); }
.pages-view .pam-filters-side .form-control, .pages-view .pam-filters-side .pam-action-search { height: 38px; }
.pages-view .pam-filters-side .btn-group > .btn { min-height: 38px; padding: 7px 12px; display: inline-flex; align-items: center; }
.pages-view .pam-filters-side .btn-group > .pam-action-list-mode, .pages-view .pam-filters-side .btn-group > .pam-action-sort-order { justify-content: center; gap: 6px; }
.pages-view .pam-filters-side .btn-group > .dropdown-toggle { justify-content: space-between; }
.pages-view .pam-filters .btn.dropdown-toggle { font-weight: 400; }
.pages-view .pam-filters-side .list-group-item { min-height: 38px; }
/* The search box and its button are one control: the same edge on both, in both themes. (In dark mode
   AdminLTE's form build was setting the input's border, lighter than the button's.) */
.pages-view .pam-filters .form-control, .dark-mode .pages-view .pam-filters .form-control { border-color: var(--pw-control-border); background: var(--pw-surface); color: var(--pw-ink); }
.pages-view .pam-filters .form-control:focus, .dark-mode .pages-view .pam-filters .form-control:focus { border-color: var(--pw-accent); }

/* ---------- 25. Template details page ---------- */
/* A card with a list keeps its heading above the list (section 6 reorders card parts for the listing cards). */
.pages-view .card > .list-group { order: 2; }
.pages-view .card > h5.card-header { order: 0; }

/* Head: label, title with its edit button, status tags, description, tags. */
.pages-view.template-view .row-top-info .form-group { padding-bottom: 8px !important; margin-bottom: 0; }
.pages-view.template-view .row-top-info .info-title-wrapper { border-bottom: 0; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.pages-view.template-view .info-title-wrapper .info-title { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; color: var(--pw-ink); }
.pages-view.template-view .row-top-info .edit-info { width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--pw-control-border); color: var(--pw-muted); border-radius: 0; }
.pages-view.template-view .row-top-info .edit-info:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.template-view .info-status-tags { margin: 0 0 10px; }
.pages-view.template-view .info-desc { font-size: 16px; line-height: 1.55; color: var(--pw-muted); }
.pages-view.template-view .info-tags .badge-pill { background: transparent; border: 0; padding: 0; margin: 6px 14px 0 0; font-size: 14px; font-weight: 500; letter-spacing: 0; color: var(--pw-accent-ink); }
.pages-view.template-view .info-tags .badge-pill::before { content: "#"; background: transparent; margin: 0; padding: 0; border-radius: 0; }
.pages-view.template-view .row-top-info .form-control { border-radius: 0; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-ink); }

/* The preview sits on a mat, with no shadow; the published ribbon is replaced by the tag in the head. */
.pages-view.template-view .thumb-wrapper { float: none; min-width: 0; padding: 14px; background: var(--pw-neutral); border: 1px solid var(--pw-divider); margin-bottom: 0; }
.pages-view.template-view .thumb-wrapper img { display: block; filter: none; border: 1px solid var(--pw-divider); background: #fff; }
.pages-view.template-view .thumb-wrapper .ribbon-wrapper { display: none !important; }

/* Action bar: one row above the page's content. Create document is the one solid button;
   the rest are neutral, and Delete stands apart at the end. */
.pages-view.template-view .btn-grouping { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; gap: 8px; width: 100%; }
.pages-view.template-view .btn-grouping > .btn, .pages-view.template-view .btn-grouping > .btn-group { margin: 0; flex: 0 0 auto; width: auto; }
.pages-view.template-view .btn-grouping .btn { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 16px; border-radius: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); }
.pages-view.template-view .btn-grouping .btn:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.template-view .btn-grouping .btn.pam-action-preview { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view.template-view .btn-grouping .btn.pam-action-preview:hover { background: color-mix(in srgb, var(--pw-accent-strong) 86%, #000); color: var(--pw-on-accent); }
.pages-view.template-view .btn-grouping .btn.pam-action-delete { margin-left: auto; background: transparent; border-color: var(--pw-danger-border); color: var(--pw-danger); }
.pages-view.template-view .btn-grouping .btn.pam-action-delete:hover { background: var(--pw-danger-tint); border-color: var(--pw-danger); color: var(--pw-danger); }
.pages-view.template-view .btn-grouping .btn.disabled, .pages-view.template-view .btn-grouping .btn:disabled { opacity: .45; background: transparent; border-color: var(--pw-divider); color: var(--pw-muted); }
.pages-view.template-view .btn-grouping .btn-group > .btn + .btn { border-left: 0; padding: 0 10px; max-width: none; }
/* Below 768px: Create document runs the full width, the others share a row with the icon above the label. */
@media (max-width: 767.98px) {
  .pages-view.template-view .temp-actions .btn-grouping > .pam-action-preview { flex: 0 0 100%; height: 46px; }
  .pages-view.template-view .temp-actions .btn-grouping > .btn:not(.pam-action-preview), .pages-view.template-view .temp-actions .btn-grouping > .btn-group { flex: 1 1 0; min-width: 62px; }
  .pages-view.template-view .temp-actions .btn-grouping > .btn-group > .pam-action-embed { flex: 1 1 auto; }
  .pages-view.template-view .temp-actions .btn-grouping .btn:not(.pam-action-preview) { flex-direction: column; height: 56px; padding: 0 4px; gap: 3px; font-size: 13px; }
  .pages-view.template-view .temp-actions .btn-grouping .btn .btn-label { display: inline !important; }
  .pages-view.template-view .temp-actions .btn-grouping .pam-action-delete { margin-left: 0; }
}

/* Cards on this page: a condensed heading, then plain rows. */
.pages-view.template-view .card { margin-bottom: 20px; }
.pages-view.template-view .card > h5.card-header { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--pw-divider); font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; color: var(--pw-ink); }
.pages-view.template-view .card > h5.card-header > i { font-size: 14px; color: var(--pw-accent-ink); }
.pages-view.template-view .card .list-group-item { background: transparent; border-color: var(--pw-divider); color: var(--pw-ink); padding: 12px 18px; font-size: 15px; }
/* Details as an attribute table: the label in a fixed column. */
.pages-view.template-view .pam-details-list .list-group-item { display: flex; align-items: baseline; gap: 12px; }
.pages-view.template-view .pam-details-list .details-label { flex: 0 0 120px; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-muted); }
.pages-view.template-view .pam-details-list .details-value { flex: 1 1 auto; min-width: 0; }

/* Version rows: a coloured left edge and a status tag, not a filled row. */
.pages-view .pam-vers-list .list-group-item.card-outline, .dark-mode .pages-view .pam-vers-list .list-group-item.card-outline { background: transparent !important; color: var(--pw-ink) !important; border-left: var(--pw-rule) solid var(--pw-divider); }
.pages-view .pam-vers-list .list-group-item.card-outline.card-success, .dark-mode .pages-view .pam-vers-list .list-group-item.card-outline.card-success { border-left-color: var(--pw-accent); }
.pages-view .pam-vers-list .list-group-item.card-outline.card-warning, .dark-mode .pages-view .pam-vers-list .list-group-item.card-outline.card-warning { border-left-color: var(--pw-warn); }
.pages-view .pam-vers-list .list-group-item.card-outline.card-danger, .dark-mode .pages-view .pam-vers-list .list-group-item.card-outline.card-danger { border-left-color: var(--pw-danger); }
.pages-view .pam-vers-list .temp-version { font-family: var(--pw-font-head); font-weight: 600; font-size: 18px; }
.pages-view .pam-vers-list .temp-modified { font-size: 13px; color: var(--pw-muted); }
.pages-view .pam-vers-card .list-group-item > span.temp-status { display: inline-block; width: max-content; margin-top: 6px; padding: 3px 9px; font-size: 10.5px; font-weight: 600; letter-spacing: 1px; text-transform: uppercase; line-height: 1.2; background: var(--pw-neutral); border: 1px solid var(--pw-divider); color: var(--pw-muted); }
.pages-view .pam-vers-card .card-success > span.temp-status { background: var(--pw-tint); border-color: var(--pw-tint-border); color: var(--pw-accent-ink); }
.pages-view .pam-vers-card .card-warning > span.temp-status { background: var(--pw-warn-tint); border-color: var(--pw-warn); color: var(--pw-warn-ink); }
.pages-view .pam-vers-card .card-danger > span.temp-status { background: var(--pw-danger-tint); border-color: var(--pw-danger-border); color: var(--pw-danger); }
.pages-view .pam-vers-card .temp-thumb-wrapper img { border: 1px solid var(--pw-divider); background: #fff; }
/* Order in the bar: Create document, Edit, then the rest, Delete last. */
.pages-view.template-view .btn-grouping > .pam-action-preview { order: 0; }
.pages-view.template-view .btn-grouping > .pam-action-edit { order: 1; }
.pages-view.template-view .btn-grouping > * { order: 2; }
.pages-view.template-view .btn-grouping > .pam-action-delete { order: 3; }
@media (max-width: 767.98px) {
  /* All five fit one row under Create document. */
  .pages-view.template-view .temp-actions .btn-grouping { gap: 6px; }
  .pages-view.template-view .temp-actions .btn-grouping > .btn:not(.pam-action-preview), .pages-view.template-view .temp-actions .btn-grouping > .btn-group { min-width: 0; }
  .pages-view.template-view .temp-actions .btn-grouping .btn:not(.pam-action-preview) { font-size: 12.5px; }
}

/* Layout. The page is a 12-column grid in place of the Bootstrap columns:
     actions                      (full width, so Delete ends level with the details)
     preview (4)  | details (8)
     preview      | fields, and data connections when there are any
     versions (6) | documents (6)
   Below 768px everything is one column and the preview runs the full width.
   The page grows with the window like every other page (no width cap of its own). */
.pages-view.template-view .row-details { display: grid; grid-template-columns: repeat(12, minmax(0, 1fr)); column-gap: 24px; margin-left: 0; margin-right: 0; align-items: start; }
.pages-view.template-view .row-details > div { grid-column: 1 / -1; max-width: none; width: auto; flex: none; padding: 0; margin: 0 !important; min-width: 0; }
.pages-view.template-view .row-details > .d-lg-none.d-sm-block:not(.temp-actions) { display: none !important; }
.pages-view.template-view .row-details > :is(.temp-actions, .template-actions) { grid-row: 1; margin-bottom: 20px !important; }
.pages-view.template-view .row-details > div:has(> .thumb-wrapper) { margin-bottom: 24px !important; }
@media (min-width: 768px) {
  .pages-view.template-view .row-details > div:has(> .thumb-wrapper) { grid-column: 1 / span 4; grid-row: 2 / span 3; }
  .pages-view.template-view .row-details > div:has(> .pam-details-card) { grid-column: 5 / -1; grid-row: 2; }
  .pages-view.template-view .row-details > div:has(> .pam-connect-card) { grid-column: 5 / -1; grid-row: 3; }
  .pages-view.template-view .row-details > div.d-xl-none:has(> .pam-param-card) { grid-column: 5 / -1; grid-row: 4; }
  .pages-view.template-view .row-details > div:has(> .pam-vers-card) { grid-column: 1 / span 6; grid-row: 5; }
  .pages-view.template-view .row-details > div:has(> .pam-activity-card) { grid-column: 7 / -1; grid-row: 5; }
  /* One of the pair missing (script hides the card): the other takes the row. */
  .pages-view.template-view .row-details:has(.pam-vers-card[style*="display: none"]) > div:has(> .pam-activity-card),
  .pages-view.template-view .row-details:has(.pam-activity-card[style*="display: none"]) > div:has(> .pam-vers-card) { grid-column: 1 / -1; }
  /* Fields come before data connections in their shared column. */
  .pages-view.template-view .row-details > div:has(> .pam-connect-card) { display: flex; flex-direction: column; }
  .pages-view.template-view .row-details > div:has(> .pam-connect-card) > .pam-param-card { order: -1; }
}
@media (max-width: 767.98px) {
  /* One column in reading order: preview, actions, then details and the rest. */
  .pages-view.template-view .row-details { display: flex; flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
  .pages-view.template-view .row-details > div:has(> .thumb-wrapper) { order: -2; }
  .pages-view.template-view .row-details > :is(.temp-actions, .template-actions) { order: -1; }
}

/* Section headings as on the home page (a short teal rule, then the name; no icon and no box),
   with the rows in their own bordered panel beneath and room above each section. */
.pages-view.template-view .card { background: transparent; border: 0; margin: 0 0 28px; }
.pages-view.template-view .card > h5.card-header { padding: 0 0 12px; border: 0; background: transparent !important; font-size: 24px; gap: 12px; color: var(--pw-ink) !important; }
.pages-view.template-view .card > h5.card-header::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--pw-accent); }
.pages-view.template-view .card > h5.card-header > i { display: none; }
.pages-view.template-view .card > .list-group, .pages-view.template-view .card > .card-body { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-radius: 0; }
.pages-view.template-view .card > .card-footer { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-top: 0; }
.pages-view.template-view .card > .list-group > .list-group-item:first-child { border-top: 0; }
.pages-view.template-view .card > .list-group > .list-group-item:last-child { border-bottom: 0; }
.pages-view.template-view .card > .list-group > .list-group-item { border-left-width: 0; border-right: 0; }
.pages-view.template-view .pam-vers-list > .list-group-item.card-outline { border-left-width: var(--pw-rule); }

/* Tags look the same shown and while editing: a bordered square with a # before the word. */
.pages-view.template-view .info-tags .badge-pill,
.pages-view.template-view .tag-input .tag, .dark-mode .pages-view.template-view .tag-input .tag {
  display: inline-flex; align-items: center; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); border-radius: 0;
  padding: 3px 10px; margin: 6px 8px 0 0; font-family: var(--pw-font); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--pw-accent-ink);
}
.pages-view.template-view .info-tags .badge-pill::before { content: "#"; margin-right: 1px; }
.pages-view.template-view .tag-input .tag { padding-right: 26px; }
.pages-view.template-view .tag-input .tag span { background: transparent; border-radius: 0; margin: 0 1px 0 0; padding: 0; color: inherit; }
.pages-view.template-view .tag-input .tag .tag-i { color: var(--pw-accent-ink); right: 8px; top: 50%; height: auto; line-height: 1; transform: translateY(-50%); font-size: 16px; }
.pages-view.template-view .tag-input .tag .tag-i:hover { color: var(--pw-danger); text-decoration: none; }
.pages-view.template-view .tag-input.tagging, .dark-mode .pages-view.template-view .tag-input.tagging { background: transparent; }
/* Confirm and cancel while editing the title: square, at the right edge. */
.pages-view.template-view .row-top-info .info-actions .btn { width: 40px; height: 40px; padding: 0; border-radius: 0; }

/* Create document is just a play icon in the bar (its tooltip says what it does). */
.pages-view.template-view .btn-grouping .btn.pam-action-icon-only { width: 44px; padding: 0; font-size: 14px; }
/* Between 768px and 1200px there is less room (the side menu is open from 992px): the preview and
   details share a row, the fields take the full width beneath, and the bar's buttons close up. */
@media (min-width: 768px) and (max-width: 1199.98px) {
  .pages-view.template-view .row-details > div:has(> .thumb-wrapper) { grid-row: 2; }
  .pages-view.template-view .row-details > div:has(> .pam-connect-card) { grid-column: 1 / -1; }
  .pages-view.template-view .row-details > div.d-xl-none:has(> .pam-param-card) { grid-column: 1 / -1; }
  .pages-view.template-view .btn-grouping { gap: 6px; }
  .pages-view.template-view .btn-grouping .btn { padding: 0 11px; font-size: 15px; }
  .pages-view.template-view .btn-grouping .btn.pam-action-icon-only { width: 40px; padding: 0; }
}
/* The script hides a section by hiding its column: the other of the pair then takes the row. */
@media (min-width: 768px) {
  .pages-view.template-view .row-details:has(> div[style*="display: none"] > .pam-vers-card) > div:has(> .pam-activity-card),
  .pages-view.template-view .row-details:has(> div[style*="display: none"] > .pam-activity-card) > div:has(> .pam-vers-card) { grid-column: 1 / -1; }
}
/* Share menu on narrow screens: its items carry the script's button classes, which must not draw as buttons. */
.pages-view.template-view .dropdown-menu .dropdown-item:is(.btn-info, .btn-outline-info, .pam-action-export-dropdown) { background: transparent; border: 0; max-width: none; color: var(--pw-ink); padding: 8px 16px; font-family: var(--pw-font); font-weight: 400; font-size: 15px; height: auto; display: block; text-align: left; }
.pages-view.template-view .dropdown-menu .dropdown-item:is(.btn-info, .btn-outline-info, .pam-action-export-dropdown):hover { background: var(--pw-tint); color: var(--pw-accent-ink); }
.pages-view.template-view .dropdown-menu .dropdown-item.disabled { opacity: .45; pointer-events: none; }
.pages-view.template-view .dropdown-menu .dropdown-item > i { width: 20px; color: var(--pw-accent-ink); }
.pages-view.template-view .pam-share-group > .dropdown-toggle::after { display: none; }
/* Documents: the refresh button is small and teal, level with the heading. */
.pages-view.template-view .pam-activity-card .activity-refresh { top: 6px !important; right: 2px !important; font-size: 14px; color: var(--pw-accent-ink) !important; }
.pages-view.template-view .pam-activity-card .activity-refresh:hover { color: var(--pw-accent) !important; }
.pages-view.template-view .pam-activity-card .activity-refresh i { font-size: 14px; }
.pages-view.template-view .temp-actions .pam-share-group > .btn { flex: 1 1 auto; width: 100%; }

/* ---------- 26. Collections lists (My Collections, Shared Collections) ---------- */
/* The page action can be a wrapper holding the button and its pop-out (New collection). */
.pages-view .pw-page-head-row > .new-collection-wrapper.pw-page-action { margin: 0 !important; }
.pages-view .new-collection-wrapper > .btn { display: inline-flex; align-items: center; gap: 6px; height: 44px; padding: 0 20px; border-radius: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; white-space: nowrap; }
@media (max-width: 575.98px) {
  .pages-view .pw-page-head-row > .new-collection-wrapper.pw-page-action { width: auto; height: auto; padding: 0; }
  .pages-view .new-collection-wrapper > .btn { width: 44px; padding: 0; justify-content: center; }
}
.pages-view .new-collection-popout, .dark-mode .pages-view .new-collection-popout { border-radius: 0; border: 1px solid var(--pw-divider); border-top: var(--pw-rule) solid var(--pw-accent); background: var(--pw-surface); box-shadow: var(--pw-shadow-pop); color: var(--pw-ink); }
.pages-view .new-collection-popout label { font-size: 11px !important; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink) !important; }
.pages-view .new-collection-popout .form-control { border-radius: 0; background: var(--pw-raised); border-color: var(--pw-control-border); color: var(--pw-ink); }
.pages-view .new-collection-accent { border-radius: 0; }
.pages-view .new-collection-accent.bg-none, .dark-mode .pages-view .new-collection-accent.bg-none { background: var(--pw-raised); border-color: var(--pw-control-border); color: var(--pw-ink); }

/* Collection cards and rows behave like the template ones: corner marks come from the card's own
   class, the roll-over is the tile's, and the buttons keep their size with Delete at the right. */
.pages-view .collection-set .col-item .card:hover, .pages-view .collection-set .info-box.col-item:hover { background: var(--pw-tint); border-color: var(--pw-accent); }
.pages-view .collection-set .info-box.col-item, .pages-view .collection-set .info-box.col-item:hover { margin: 0 0 var(--pw-space-3); }
.pages-view .collection-set .col-item .col-title { font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; }
.pages-view .collection-set .col-item .col-desc { font-size: 14px; color: var(--pw-muted); }
.pages-view .collection-set .col-item .col-owners { font-size: 12px; color: var(--pw-muted); }
.pages-view .collection-set .col-item .btn-grouping { display: flex; align-items: center; gap: 6px; text-align: left !important; width: 100%; }
.pages-view .collection-set .col-item .btn-grouping .btn { flex: 0 0 34px; width: 34px; height: 34px; padding: 0; margin: 0 !important; display: inline-flex; align-items: center; justify-content: center; border-radius: 0; }
.pages-view .collection-set .col-item .btn-grouping .col-action-delete { margin-left: auto !important; }
.pages-view .collection-set .info-box .info-box-bottom > .btn-grouping { width: auto; flex: none; }
.pages-view .collection-set .info-box .info-box-bottom .btn-grouping .btn-grouping { width: auto; }
.pages-view .collection-set .info-box .btn-grouping .col-action-delete { margin-left: 10px !important; }
/* The folder icon panel of a list row keeps the collection's own colour. */
.pages-view .collection-set .info-box .info-box-icon.col-accent { display: flex !important; align-items: center; justify-content: center; font-size: 26px; }

/* Nothing matched, or it could not be loaded: the same empty-state frame as the template lists. */
.pages-view .collection-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) { background: transparent !important; border: 1px dashed var(--pw-tint-border); color: var(--pw-muted) !important; padding: 24px 28px; align-items: center; gap: 18px; }
.pages-view .collection-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-icon { width: auto !important; padding: 0 !important; background: transparent !important; border: 0; font-size: 26px; color: var(--pw-accent-ink); align-self: center; }
.pages-view .collection-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-content { padding: 0 !important; gap: 4px; }
.pages-view .collection-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-text { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; color: var(--pw-ink); white-space: normal; }
.pages-view .collection-set .info-box:is(.bg-gradient-secondary, .bg-gradient-warning) .info-box-number { font-family: var(--pw-font); font-weight: 400; font-size: 15px; color: var(--pw-muted); }
.pages-view .collection-set .info-box.bg-gradient-warning { border-color: var(--pw-warn); }

/* ---------- 27. Collection page ---------- */
/* Help text reads as plain text everywhere, not italic. */
.pages-view .help-text-body, .pages-view .help-text-body p.thin { font-style: normal; font-weight: 400; font-size: 15px; line-height: 1.5; color: var(--pw-muted); }

/* Head: the folder tile and title block, with the details beside them; then one row of actions; then the tabs. */
.pages-view.collection-view .row-top-info { display: grid; grid-template-columns: auto minmax(0, 1fr) minmax(260px, 360px); column-gap: 20px; margin-left: 0; margin-right: 0; align-items: start; }
.pages-view.collection-view .row-top-info > div { max-width: none; width: auto; flex: none; padding: 0; margin: 0; min-width: 0; grid-column: 1 / -1; }
.pages-view.collection-view .row-top-info > div:has(> .info-icon) { grid-column: 1; grid-row: 1; }
.pages-view.collection-view .row-top-info > div:has(> .form-group) { grid-column: 2; grid-row: 1; padding-left: 0 !important; }
.pages-view.collection-view .row-top-info > .col-collection-details { grid-column: 3; grid-row: 1; }
.pages-view.collection-view .row-top-info > .temp-actions { grid-row: 2; margin: 4px 0 8px; }
.pages-view.collection-view .row-top-info > .col-tabs-row { grid-row: 3; margin-top: 16px !important; }
.pages-view.collection-view .row-top-info > .col-tabs-dropdown { grid-row: 4; }
@media (max-width: 991.98px) {
  .pages-view.collection-view .row-top-info { grid-template-columns: auto minmax(0, 1fr); }
  .pages-view.collection-view .row-top-info > .col-collection-details { grid-column: 1 / -1; grid-row: 2; }
  .pages-view.collection-view .row-top-info > .temp-actions { grid-row: 3; }
  .pages-view.collection-view .row-top-info > .col-tabs-row { grid-row: 4; }
  .pages-view.collection-view .row-top-info > .col-tabs-dropdown { grid-row: 5; }
}
.pages-view.collection-view .row-top-info .info-icon { width: 64px; min-width: 64px; min-height: 64px; height: 64px; border-radius: 0; border-width: 1px; font-size: 26px; }
.pages-view.collection-view .row-top-info .info-accent-action { width: 64px; min-width: 64px; min-height: 64px; border-radius: 0; padding: 0; }
.pages-view.collection-view .row-top-info .info-accent-action.bg-none, .dark-mode .pages-view.collection-view .row-top-info .info-accent-action.bg-none { background: var(--pw-raised); border-color: var(--pw-control-border); color: var(--pw-ink); }
.pages-view.collection-view .row-top-info .form-group { padding-bottom: 8px !important; margin-bottom: 0; }
.pages-view.collection-view .row-top-info .info-title-wrapper { border-bottom: 0; margin: 0 0 8px; display: flex; align-items: center; gap: 12px; }
.pages-view.collection-view .info-title-wrapper .info-title { font-family: var(--pw-font-head); font-weight: 600; font-size: clamp(32px, 3.4vw, 46px); line-height: 1.08; color: var(--pw-ink); }
.pages-view.collection-view .row-top-info .edit-info { width: 32px; height: 32px; padding: 0; background: transparent; border: 1px solid var(--pw-control-border); color: var(--pw-muted); border-radius: 0; }
.pages-view.collection-view .row-top-info .edit-info:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.collection-view .info-desc { font-size: 16px; line-height: 1.55; color: var(--pw-muted); }
.pages-view.collection-view .row-top-info .form-control { border-radius: 0; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-ink); }
.pages-view.collection-view .row-top-info .info-actions .btn { width: 40px; height: 40px; padding: 0; border-radius: 0; }
.pages-view.collection-view .info-tags .badge-pill,
.pages-view.collection-view .tag-input .tag, .dark-mode .pages-view.collection-view .tag-input .tag {
  display: inline-flex; align-items: center; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); border-radius: 0;
  padding: 3px 10px; margin: 6px 8px 0 0; font-family: var(--pw-font); font-size: 14px; font-weight: 500; line-height: 1.3; letter-spacing: 0; color: var(--pw-accent-ink);
}
.pages-view.collection-view .info-tags .badge-pill::before { content: "#"; background: transparent; margin: 0 1px 0 0; padding: 0; border-radius: 0; }
.pages-view.collection-view .tag-input .tag { padding-right: 26px; }
.pages-view.collection-view .tag-input .tag span { background: transparent; border-radius: 0; margin: 0 1px 0 0; padding: 0; color: inherit; }
.pages-view.collection-view .tag-input .tag .tag-i { color: var(--pw-accent-ink); right: 8px; top: 50%; height: auto; line-height: 1; transform: translateY(-50%); font-size: 16px; }
.pages-view.collection-view .tag-input.tagging, .dark-mode .pages-view.collection-view .tag-input.tagging { background: transparent; }

/* Details as an attribute table, without a boxed heading. */
.pages-view.collection-view .col-details-card { background: transparent; border: 0; margin: 0; }
.pages-view.collection-view .col-details-card > h5.card-header { display: none; }
.pages-view.collection-view .col-details-card > .list-group { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-radius: 0; }
.pages-view.collection-view .col-details-list .list-group-item { display: flex; align-items: baseline; gap: 12px; padding: 10px 16px; background: transparent; border-color: var(--pw-divider); border-left: 0; border-right: 0; font-size: 15px; color: var(--pw-ink); }
.pages-view.collection-view .col-details-list .list-group-item:first-child { border-top: 0; }
.pages-view.collection-view .col-details-list .list-group-item:last-child { border-bottom: 0; }
.pages-view.collection-view .col-details-list .details-label { flex: 0 0 110px; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-muted); }
.pages-view.collection-view .col-details-list .details-value { flex: 1 1 auto; min-width: 0; }
.pages-view.collection-view .col-details-list a, .dark-mode .pages-view.collection-view .col-details-list a { color: var(--pw-accent-ink); }

/* Action bar: Add new template is the one solid button; Delete stands apart at the end. */
.pages-view.collection-view .temp-actions > .btn-grouping { display: flex; flex-direction: row; flex-wrap: wrap; align-items: stretch; justify-content: flex-start; gap: 8px; width: 100%; }
.pages-view.collection-view .temp-actions > .btn-grouping > .btn { margin: 0; flex: 0 0 auto; width: auto; display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 40px; padding: 0 16px; border-radius: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); }
.pages-view.collection-view .temp-actions > .btn-grouping > .btn:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.collection-view .temp-actions > .btn-grouping > .col-action-add { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view.collection-view .temp-actions > .btn-grouping > .col-action-add:hover { background: color-mix(in srgb, var(--pw-accent-strong) 86%, #000); color: var(--pw-on-accent); }
.pages-view.collection-view .temp-actions > .btn-grouping > .col-action-delete { margin-left: auto; background: transparent; border-color: var(--pw-danger-border); color: var(--pw-danger); }
.pages-view.collection-view .temp-actions > .btn-grouping > .col-action-delete:hover { background: var(--pw-danger-tint); border-color: var(--pw-danger); color: var(--pw-danger); }
.pages-view.collection-view .temp-actions .btn .btn-label { display: inline !important; }
@media (max-width: 575.98px) {
  .pages-view.collection-view .temp-actions > .btn-grouping > .col-action-add { flex: 0 0 100%; height: 46px; }
  .pages-view.collection-view .temp-actions > .btn-grouping > .btn:not(.col-action-add) { flex: 1 1 0; }
  .pages-view.collection-view .temp-actions > .btn-grouping > .col-action-delete { margin-left: 0; }
}

/* Tabs: text with an underline in the collection's own colour (teal when it has none). */
.pages-view.collection-view .col-tabs-row { border-bottom: 1px solid var(--pw-divider); }
.pages-view.collection-view .col-tabs { gap: 2px; padding: 0; border: 0; }
.pages-view.collection-view .col-tabs .nav-link, .dark-mode .pages-view.collection-view .col-tabs .nav-link { display: inline-flex; align-items: center; gap: 4px; padding: 10px 14px; margin: 0 0 -1px; border-radius: 0; border: 0; border-bottom: 3px solid transparent; background: transparent; font-family: var(--pw-font-head); font-weight: 600; font-size: 17px; color: var(--pw-muted); }
.pages-view.collection-view .col-tabs .nav-link > i { font-size: 13px; color: var(--pw-accent-ink); }
.pages-view.collection-view .col-tabs .nav-link:hover { color: var(--pw-ink); background: var(--pw-tint); }
.pages-view.collection-view .col-tabs .nav-link.active, .dark-mode .pages-view.collection-view .col-tabs .nav-link.active { background: transparent; color: var(--pw-ink); border-bottom-color: var(--tab-accent, var(--pw-accent)); }
.pages-view.collection-view .col-tabs-dropdown .btn.dropdown-toggle { border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); border-bottom: 3px solid var(--tab-accent, var(--pw-accent)); color: var(--pw-ink); text-align: left; font-family: var(--pw-font-head); font-weight: 600; font-size: 17px; }

/* Custom fields tab. */
.pages-view.collection-view .fields-table { background: var(--pw-surface); border: 1px solid var(--pw-divider); color: var(--pw-ink); font-size: 15px; }
.pages-view.collection-view .fields-table thead th { border: 0; border-bottom: 1px solid var(--pw-divider); background: var(--pw-raised); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-muted); padding: 10px 16px; }
.pages-view.collection-view .fields-table td { border-top: 1px solid var(--pw-divider); padding: 10px 16px; background: transparent !important; color: var(--pw-ink); }
.pages-view.collection-view .fields-empty-msg, .pages-view.collection-view .col-asset-list-empty { border: 1px dashed var(--pw-tint-border); padding: 24px 28px; font-size: 15px !important; text-align: left !important; color: var(--pw-muted) !important; }
/* Assets tab. */
.pages-view.collection-view .col-asset-list-container { border-radius: 0 !important; border-color: var(--pw-divider) !important; background: var(--pw-surface); }
.pages-view.collection-view .asset-view-switch .btn { border-radius: 0; }
.pages-view.collection-view .asset-view-switch .btn.active { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }

/* Permissions: the three roles as neutral cards with a small label, not red, amber and green. */
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-top: var(--pw-rule) solid var(--pw-accent); margin-bottom: 20px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-header, .dark-mode .pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-header { order: 0; display: flex; align-items: flex-start; justify-content: space-between; flex-wrap: wrap; background: transparent !important; color: var(--pw-ink) !important; border-bottom: 0; padding: 18px 20px 4px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-header::before { flex: 0 0 100%; font-family: var(--pw-font); font-size: 11px; font-weight: 500; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin-bottom: 6px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-owners > .card-header::before { content: "Publisher licence"; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-editors > .card-header::before { content: "Editor licence"; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-readers > .card-header::before { content: "Writer licence"; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-header::after { display: none; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-title { float: none; width: auto; flex: 1 1 auto; font-family: var(--pw-font-head); font-weight: 600; font-size: 24px; line-height: 1.15; color: var(--pw-ink); }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools { float: none; margin: 0; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools .btn-tool { color: var(--pw-muted); }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-body { order: 1; padding: 8px 20px 14px; font-size: 15px; line-height: 1.5; color: var(--pw-muted); }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .list-group { order: 2; border-radius: 0; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .card-footer { order: 3; background: transparent; border-top: 1px solid var(--pw-divider); padding: 14px 20px 18px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-body :is(.text-danger, .text-warning, .text-success) { color: var(--pw-ink) !important; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-body u { text-decoration: none; font-weight: 600; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-footer label { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin-bottom: 6px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .form-control { border-radius: 0; background: var(--pw-raised); border-color: var(--pw-control-border); color: var(--pw-ink); font-size: 14px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .look-up-group { border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); border-left: 0; color: var(--pw-accent-ink); }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .user-list .list-group-item { background: transparent; border-color: var(--pw-divider); border-left: 0; border-right: 0; border-radius: 0; color: var(--pw-ink); padding: 10px 20px; font-size: 14px; }
/* Fixes found on the real page: the member rows (room for the avatar, a hairline above the list, not a
   teal bar) and the assets tab when it is empty (no blank panel above the message). */
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card > .user-list { border-top: 1px solid var(--pw-divider); border-bottom: 0; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .user-list:empty { border-top: 0; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .user-list .list-group-item { padding-left: 46px; border-top: 0; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .user-list .list-group-item + .list-group-item { border-top: 1px solid var(--pw-divider); }
.pages-view.collection-view .col-asset-list-container:has(> .col-asset-list-content:empty) { display: none; }

/* Template details on very wide screens: the page keeps growing, but the preview takes a smaller share
   of it so it does not become enormous - a quarter from 1600px, a sixth from 2400px. */
@media (min-width: 1600px) {
  .pages-view.template-view .row-details > div:has(> .thumb-wrapper) { grid-column: 1 / span 3; }
  .pages-view.template-view .row-details > div:has(> .pam-details-card),
  .pages-view.template-view .row-details > div:has(> .pam-connect-card),
  .pages-view.template-view .row-details > div.d-xl-none:has(> .pam-param-card) { grid-column: 4 / -1; }
}
@media (min-width: 2400px) {
  .pages-view.template-view .row-details > div:has(> .thumb-wrapper) { grid-column: 1 / span 2; }
  .pages-view.template-view .row-details > div:has(> .pam-details-card),
  .pages-view.template-view .row-details > div:has(> .pam-connect-card),
  .pages-view.template-view .row-details > div.d-xl-none:has(> .pam-param-card) { grid-column: 3 / -1; }
}

/* ---------- 28. Listing pages: spacing ---------- */
/* Beside the filter panel, the list takes all the remaining width (it was held to three quarters,
   which left it short of the page head's right edge on a wide screen). */
@media (min-width: 1200px) {
  .pages-view .row-wrapper > .col-xl-9 { flex: 1 1 0; max-width: none; min-width: 0; }
}
/* Cards in a grid have a 16px gap (8px each side), the same at rest and on hover; list rows take the
   same side margins so both views line up, and the deck is pulled out by that much to stay flush. */
.pages-view :is(.template-set, .collection-set).card-deck { margin-left: -8px; margin-right: -8px; }
.pages-view :is(.template-set, .collection-set).card-deck > .card-container { padding-left: 0; padding-right: 0; }
.pages-view :is(.template-set, .collection-set) .card-container > .card,
.pages-view :is(.template-set, .collection-set) .card-container > .card:hover { margin-left: 8px; margin-right: 8px; }
.pages-view :is(.template-set, .collection-set) .info-box.card-container,
.pages-view :is(.template-set, .collection-set) .info-box.card-container:hover { margin: 0 8px 14px; width: auto; flex: 1 1 100%; }
.pages-view :is(.template-set, .collection-set) > [class*="col-"] > .info-box { margin-left: 8px; margin-right: 8px; }
/* The home page's recent row keeps its own spacing. */
.pages-view.welcome-view .template-set.card-deck { margin-left: -8px; margin-right: -8px; }
.pages-view.welcome-view .template-set .card-container > .pw-recent-card,
.pages-view.welcome-view .template-set .card-container > .pw-recent-card:hover { margin-left: 8px; margin-right: 8px; }
/* The filter panel starts on the same left edge as the page title. */
.pages-view .row-wrapper > .col-xl-3 > .pam-filters-side { margin-left: -8px; }

/* ---------- 29. Dialogs: the shared frame ---------- */
/* Every dialog: a teal top rule, a condensed title (with a small label above it where script supplies
   one), a plain body, and a foot with Cancel as text at the left and the action as the one solid button.
   Amber is kept for status inside a dialog, not for its frame; red marks a destructive dialog. */
.modal .modal-content { border-top: var(--pw-rule) solid var(--pw-accent); }
.modal .modal-header.bg-warning, .modal .modal-header.bg-info { box-shadow: none; margin-top: 0; background: var(--pw-surface) !important; color: var(--pw-ink) !important; }
.modal .modal-content:has(> .modal-header.bg-danger) { border-top-color: var(--pw-danger); }
.modal .modal-header.bg-danger { box-shadow: none; margin-top: 0; }
.modal .modal-header { align-items: flex-start; padding: 18px 24px 14px; }
.modal .modal-header .modal-title, .modal .modal-header .modal-title.text-white { font-family: var(--pw-font-head); font-weight: 600; font-size: 26px; line-height: 1.15; letter-spacing: 0; color: var(--pw-ink) !important; }
.modal .modal-header .modal-title > i { font-size: 16px; margin-right: 4px; color: var(--pw-accent-ink); }
.modal .pw-dlg-kicker { display: block; font-family: var(--pw-font); font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin-bottom: 4px; }
.modal .pw-dlg-name { display: block; }
.modal .modal-header .close, .modal .modal-header .close.text-white { color: var(--pw-muted) !important; font-weight: 400; font-size: 26px; padding: 12px 16px; margin: -14px -16px -12px auto; }
.modal .modal-header .close:hover { color: var(--pw-ink) !important; }
.modal .modal-body { padding: 20px 24px; font-size: 15px; line-height: 1.5; color: var(--pw-ink); }
.modal .modal-body .small, .modal .modal-body small { color: var(--pw-muted); }
.modal .modal-body a:not(.btn):not(.dropdown-item):not(.nav-link), .dark-mode .modal .modal-body a:not(.btn):not(.dropdown-item):not(.nav-link) { color: var(--pw-accent-ink); text-decoration: underline; text-underline-offset: 3px; }

/* Foot. Bootstrap's colour classes say what each button is for; here they say only "the action". */
.modal .modal-footer { padding: 14px 24px; gap: 10px; align-items: center; }
.modal .modal-footer > * { margin: 0; }
.modal .modal-footer .btn { border-radius: 0; min-height: 40px; padding: 0 20px; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; }
.modal .modal-footer .btn:is(.btn-secondary, .btn-outline-secondary, .btn-default, .btn-light, .btn-link) { background: transparent; border-color: transparent; color: var(--pw-muted); padding-left: 0; margin-right: auto; }
.modal .modal-footer .btn:is(.btn-secondary, .btn-outline-secondary, .btn-default, .btn-light, .btn-link):hover { color: var(--pw-accent-ink); background: transparent; }
.modal .modal-footer .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark) { background: var(--pw-accent-strong); border: 1px solid var(--pw-accent-strong); color: var(--pw-on-accent); }
.modal .modal-footer .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark):hover { background: color-mix(in srgb, var(--pw-accent-strong) 86%, #000); color: var(--pw-on-accent); }
.modal .modal-footer .btn.btn-danger { background: transparent; border: 1px solid var(--pw-danger); color: var(--pw-danger); }
.modal .modal-footer .btn.btn-danger:hover { background: var(--pw-danger-tint); color: var(--pw-danger); }
.modal .modal-footer .btn.disabled, .modal .modal-footer .btn:disabled { opacity: .45; }
.modal .modal-footer .working { color: var(--pw-muted); font-size: 14px; margin-right: 4px; }

/* Fields in a dialog. */
.modal .modal-body label, .modal .modal-body .col-form-label { font-size: 14px; font-weight: 600; color: var(--pw-ink); }
.modal .form-control, .modal .custom-select { border-radius: 0; background: var(--pw-raised); border: 1px solid var(--pw-control-border); color: var(--pw-ink); box-shadow: none; }
.modal .form-control:focus, .modal .custom-select:focus { border-color: var(--pw-accent); box-shadow: none; }
.modal .form-control::placeholder { color: color-mix(in srgb, var(--pw-muted) 70%, transparent); }
.modal .input-group-text { border-radius: 0; background: var(--pw-neutral); border: 1px solid var(--pw-control-border); color: var(--pw-muted); }
.modal .input-group > .input-group-append > .btn, .modal .input-group > .input-group-prepend > .btn { border-radius: 0; }
.modal .form-text, .modal .text-muted { color: var(--pw-muted) !important; }
.modal .invalid-feedback, .modal .text-danger { color: var(--pw-danger) !important; }
.modal .modal-body .btn { border-radius: 0; }
.modal .modal-body .list-group-item { background: transparent; border-color: var(--pw-divider); color: var(--pw-ink); border-radius: 0; }
.modal .modal-body .table { color: var(--pw-ink); }
.modal .modal-body .table td, .modal .modal-body .table th { border-color: var(--pw-divider); }

/* ---------- 30. Check in, check out and publish ---------- */
.modal .thumb-wrapper { float: none !important; min-width: 0 !important; min-height: 0 !important; margin-bottom: 0 !important; padding: 12px !important; background: var(--pw-neutral) !important; border: 1px solid var(--pw-divider) !important; align-self: flex-start; }
.modal .thumb-wrapper img { display: block; width: 100%; filter: none !important; background: #fff; }
.modal .checkin-wrapper { align-items: flex-start; margin: 0; gap: 0; }
.modal .checkin-options-wrapper { padding-left: 24px; padding-right: 0; }
/* Each choice is a row you can pick: bordered, tinted when chosen. The line under it (a tick-box or a
   note) hangs from the row above. */
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) { display: flex !important; align-items: flex-start; gap: 12px; margin: 0; padding: 12px 14px; border: 1px solid var(--pw-control-border); background: var(--pw-surface); font-size: 15px; font-weight: 600; cursor: pointer; }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):hover { border-color: var(--pw-accent); }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):has(input:checked) { background: var(--pw-tint); border-color: var(--pw-accent); }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) > input { margin-top: 4px; flex: none; }
.modal .checkin-options-wrapper form label.checkin-options { display: flex !important; align-items: center; gap: 8px; margin: 0 0 14px !important; padding: 8px 14px 10px 40px; border: 1px solid var(--pw-divider); border-top: 0; background: var(--pw-raised); font-size: 13px; font-weight: 400; color: var(--pw-muted); }
.modal .checkin-options-wrapper .checkin-publish-scope { margin: -6px 0 14px !important; padding: 10px 14px; border: 1px solid var(--pw-divider); background: var(--pw-raised); }
.modal .checkin-options-wrapper :is(.public-publish, .private-publish, .no-publish-permission) { font-size: 13px !important; font-weight: 400 !important; line-height: 1.5; color: var(--pw-muted); margin: 4px 0 0; }
@media (max-width: 991.98px) {
  .modal .checkin-wrapper > .thumb-wrapper { display: flex; justify-content: center; flex: 0 0 100%; max-width: 100%; min-width: 0; min-height: 0; float: none; margin: 0 0 20px; padding: 0; }
  .modal .checkin-wrapper > .thumb-wrapper img { width: auto; max-width: 100%; max-height: 240px; }
  .modal .checkin-options-wrapper { padding-left: 0; flex: 0 0 100%; max-width: 100%; }
}

/* ---------- 31. Dialogs: second pass ---------- */
/* 1. The default (solid) button in every dialog foot carries the corner marks. */
.modal .modal-footer { overflow: visible; }
.modal .modal-footer .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-danger) { position: relative; overflow: visible; --pw-mark: color-mix(in srgb, var(--pw-ink) 55%, transparent); }
.modal .modal-footer .btn:is(.btn-primary, .btn-success, .btn-warning, .btn-info, .btn-dark, .btn-danger)::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px top 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px top 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px bottom 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 bottom 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px bottom 0 / 1px 11px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 bottom 5px / 11px 1px;
  background-repeat: no-repeat;
}
.modal .modal-footer .btn:is(.disabled, :disabled)::before { content: none; }

/* 2. Validation: a field marked invalid has a red edge, and its message shows beneath it.
   (The dialog's own field edge was hiding Bootstrap's red.) */
.modal .form-control.is-invalid, .modal .was-validated .form-control:invalid, .modal .custom-select.is-invalid { border-color: var(--pw-danger) !important; box-shadow: inset 0 0 0 1px var(--pw-danger); }
.modal .form-control.is-invalid:focus { box-shadow: inset 0 0 0 1px var(--pw-danger); }
.modal .is-invalid ~ .invalid-feedback, .modal .is-invalid + .invalid-feedback, .modal .was-validated :invalid ~ .invalid-feedback, .modal .invalid-feedback.d-block { display: block; }
.modal .invalid-feedback { font-size: 13px; line-height: 1.4; margin-top: 5px; color: var(--pw-danger) !important; }
.modal .input-group:has(.is-invalid) .input-group-text { border-color: var(--pw-danger); background: var(--pw-danger-tint); color: var(--pw-danger); }
.modal .form-check-input.is-invalid { outline: 2px solid var(--pw-danger); outline-offset: 1px; }
.modal .form-check-input.is-invalid ~ .form-check-label { color: var(--pw-danger); }

/* Larger radios and tick-boxes wherever a dialog offers a choice. */
.modal .modal-body :is(input[type="radio"], input[type="checkbox"]) { width: 18px; height: 18px; flex: none; }

/* 3. Check in / publish: bigger, and each choice is one box - the choice on top, its tick-box or note
   inside the same box beneath it - tinted when chosen. */
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) { font-size: 17px; padding: 16px 18px 6px; border-bottom: 0; align-items: center; gap: 14px; }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) > input { width: 20px; height: 20px; margin: 0; }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) + label.checkin-options { padding: 2px 18px 16px 52px; border: 1px solid var(--pw-control-border); border-top: 0; background: var(--pw-surface); font-size: 15px; color: var(--pw-muted); margin: 0 0 14px !important; }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):has(input:checked) + label.checkin-options { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-ink); }
.modal .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):hover + label.checkin-options { border-color: var(--pw-accent); }
.modal .checkin-options-wrapper form label.checkin-options > input { width: 18px; height: 18px; margin: 0; }
.modal .checkin-options-wrapper form label.checkin-options .text-muted { color: inherit !important; }

/* 4. Check out: the question and its note in one bordered box, the question larger. */
.modal .checkin-options-wrapper form label.checkout-minor { display: block; margin: 0; padding: 16px 18px 6px; border: 1px solid var(--pw-control-border); border-bottom: 0; background: var(--pw-surface); font-size: 17px; font-weight: 600; color: var(--pw-ink); }
.modal .checkin-options-wrapper form label.checkout-minor + label.checkin-options { display: block !important; padding: 2px 18px 16px; border: 1px solid var(--pw-control-border); border-top: 0; background: var(--pw-surface); font-size: 15px; font-weight: 400; color: var(--pw-muted); margin: 0 !important; }

/* 5. Embed: the references in a quiet box with teal code, not a magenta border. */
.modal .embed-code-block { border: 1px solid var(--pw-control-border); background: var(--pw-raised); padding: 12px 52px 12px 14px; }
.modal .embed-code-block code { background: transparent; border: 0; padding: 0; font-size: 14px; color: var(--pw-accent-ink); word-break: break-all; }
.modal .embed-code-block .embed-copy-link { top: 7px; right: 7px; height: 32px; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-accent-ink); }
.modal .embed-code-block .embed-copy-link:hover { background: var(--pw-tint); border-color: var(--pw-accent); }

/* 6 and 7. Room between the preview and the fields beside it (blueprint, export, check in and out). */
.modal .row > .thumb-wrapper + [class*="col-"] { padding-left: 28px; }
.modal .existing-options-wrapper .form-group > label:has(> input[type="radio"]) { display: inline-flex; align-items: center; gap: 10px; font-size: 16px; cursor: pointer; }
.modal .existing-options-wrapper .form-group > label > input[type="radio"] { width: 20px; height: 20px; margin: 0; }
/* Tags in a dialog look like tags everywhere else: a bordered teal square with #. */
.modal .tag-input .tag, .dark-mode .modal .tag-input .tag {
  display: inline-flex; align-items: center; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); border-radius: 0;
  padding: 3px 26px 3px 10px; margin: 4px 8px 4px 0; font-family: var(--pw-font); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--pw-accent-ink);
}
.modal .tag-input .tag span { background: transparent; border-radius: 0; margin: 0 1px 0 0; padding: 0; color: inherit; }
.modal .tag-input .tag .tag-i { color: var(--pw-accent-ink); right: 8px; top: 50%; height: auto; line-height: 1; transform: translateY(-50%); font-size: 16px; }
.modal .tag-input .tag .tag-i:hover { color: var(--pw-danger); text-decoration: none; }
.modal .tag-input.tagging, .dark-mode .modal .tag-input.tagging { background: transparent; border: 0; }
.modal .tag-edit-wrapper { background: var(--pw-raised); }

/* Row buttons on the template page (versions, fields, connections): square, and a delete always reads
   as danger - red edge and icon, a red tint on hover - whichever list it is in, in both themes. */
.pages-view :is(.pam-vers-card, .pam-param-card, .pam-connect-card) .list-group-item .btn { border-radius: 0; }
.pages-view :is(.pam-vers-card, .pam-param-card, .pam-connect-card) .btn:is(.pam-delete-version, .pam-delete-parameter, .btn-outline-danger),
.dark-mode .pages-view :is(.pam-vers-card, .pam-param-card, .pam-connect-card) .btn:is(.pam-delete-version, .pam-delete-parameter, .btn-outline-danger) { background: transparent; border: 1px solid var(--pw-danger) !important; color: var(--pw-danger) !important; }
.pages-view :is(.pam-vers-card, .pam-param-card, .pam-connect-card) .btn:is(.pam-delete-version, .pam-delete-parameter, .btn-outline-danger):hover { background: var(--pw-danger-tint); }

/* ---------- 32. Collections: fixes from the real pages ---------- */
/* Permissions: when the role descriptions are hidden they go completely (my card padding was leaving
   one clipped line showing), and the card buttons are one colour in every card. */
.pages-view:is(.collection-view, .license-assign-view) .row-permissions.collapsed .card > .card-body { padding: 0 20px; max-height: 0; overflow: hidden; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools .btn-tool, .dark-mode .pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools .btn-tool { color: var(--pw-muted) !important; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools .btn-tool:hover { color: var(--pw-accent-ink) !important; }
/* Manage Licences is an ordinary secondary button, not amber. */
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .manage-licenses-link { border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); font-family: var(--pw-font-head); font-weight: 600; font-size: 15px; padding: 6px 14px; }
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .manage-licenses-link:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
/* Custom fields: the required tick in teal. */
.pages-view.collection-view .fields-table :is(.text-success, .fa-check) { color: var(--pw-accent-ink) !important; }
.pages-view.collection-view .fields-table tbody tr:nth-of-type(odd) { background: transparent; }

/* Collection cards and rows: the title in ink (not Bootstrap's link blue) and the description in plain text. */
.pages-view .collection-set .col-item a.col-title, .pages-view .collection-set .col-item .col-link-view:not(.col-accent),
.dark-mode .pages-view .collection-set .col-item a.col-title { color: var(--pw-ink); text-decoration: none; }
.pages-view .collection-set .card .card-header:not([class*="bg-"]) .col-link-view, .dark-mode .pages-view .collection-set .card .card-header:not([class*="bg-"]) .col-link-view { color: var(--pw-ink); }
.pages-view .collection-set .col-item:hover a.col-title { color: var(--pw-accent-ink); }
.pages-view .collection-set .info-box .col-desc { font-family: var(--pw-font); font-weight: 400; font-size: 14px; color: var(--pw-muted); }

/* Template rows: the lock icon is replaced by the checked-out tag, which says the same thing. */
.pages-view .template-set .pam-item .pam-checkedout { display: none !important; }

/* New collection pop-out: Cancel reads as text, as in a dialog. */
.pages-view .new-collection-popout .new-collection-cancel { background: transparent; border-color: transparent; color: var(--pw-muted); border-radius: 0; }
.pages-view .new-collection-popout .new-collection-cancel:hover { color: var(--pw-accent-ink); background: transparent; }
.pages-view .new-collection-popout .new-collection-add { border-radius: 0; }
.pages-view .new-collection-popout .text-right { display: flex; justify-content: space-between; align-items: center; }

/* Listing rows (templates, collections, blueprints): a long title or description stays on one line and
   ends in an ellipsis, so it can never push the row past the page. The row's content column must be
   allowed to shrink for that to work. Grid cards break a long unbroken word rather than overflow. */
.pages-view :is(.template-set, .collection-set) .info-box .info-box-content,
.pages-view :is(.template-set, .collection-set) .info-box .info-box-body { min-width: 0; flex: 1 1 auto; }
.pages-view :is(.template-set, .collection-set) .info-box :is(.pam-title, .col-title, .pam-desc, .col-desc, .pam-modified, .col-owners) { display: block; min-width: 0; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.pages-view :is(.template-set, .collection-set) .info-box .info-box-number { display: block !important; min-width: 0; max-width: 100%; overflow: hidden; }
.pages-view :is(.template-set, .collection-set) .info-box .info-box-bottom { min-width: 0; }
.pages-view :is(.template-set, .collection-set) .info-box .info-box-bottom > .pam-modified,
.pages-view :is(.template-set, .collection-set) .info-box .info-box-bottom > .col-owners { flex: 1 1 auto; }
.pages-view :is(.template-set, .collection-set) .card :is(.pam-title, .col-title, .pam-desc, .col-desc) { overflow-wrap: anywhere; }
/* The row itself must be allowed to shrink too, or a long line widens the whole row past the page. */
.pages-view :is(.template-set, .collection-set) .info-box.card-container { min-width: 0; max-width: calc(100% - 16px); }

/* Collection accent colour. Script marks the coloured parts with bg-<accent>; instead of filling them,
   the accent becomes an edge (left on a list row, top on a grid card) and the colour of the icon.
   "light" and "dark" are adjusted so they stay visible on either theme. */
.pages-view .collection-set .col-item { --col-accent: transparent; --col-accent-ink: var(--pw-muted); }
.pages-view .collection-set .col-item:has(.col-accent.bg-primary)   { --col-accent: #3b82f6; --col-accent-ink: #3b82f6; }
.pages-view .collection-set .col-item:has(.col-accent.bg-success)   { --col-accent: #28a745; --col-accent-ink: #28a745; }
.pages-view .collection-set .col-item:has(.col-accent.bg-danger)    { --col-accent: #dc3545; --col-accent-ink: #dc3545; }
.pages-view .collection-set .col-item:has(.col-accent.bg-warning)   { --col-accent: #e0a33a; --col-accent-ink: #d4930f; }
.pages-view .collection-set .col-item:has(.col-accent.bg-info)      { --col-accent: #17a2b8; --col-accent-ink: #17a2b8; }
.pages-view .collection-set .col-item:has(.col-accent.bg-secondary) { --col-accent: #6c757d; --col-accent-ink: #6c757d; }
.pages-view .collection-set .col-item:has(.col-accent.bg-light)     { --col-accent: #c9d0d5; --col-accent-ink: #9aa3aa; }
.pages-view .collection-set .col-item:has(.col-accent.bg-dark)      { --col-accent: #343a40; --col-accent-ink: #343a40; }
.dark-mode .pages-view .collection-set .col-item:has(.col-accent.bg-dark) { --col-accent: #aab3ba; --col-accent-ink: #c9d0d5; }
.pages-view .collection-set .col-accent[class*="bg-"] { background: transparent !important; color: var(--col-accent-ink) !important; }
.pages-view .collection-set .col-item .col-icon { color: var(--col-accent-ink); }
.pages-view .collection-set .col-item .card-header.col-accent .col-link-view { color: var(--pw-ink) !important; }
.pages-view .collection-set .col-item .card-header.col-accent .col-link-view .col-icon { color: var(--col-accent-ink) !important; }
/* List: a left edge in the accent. Grid: a top edge. (Nothing when the collection has no accent.) */
.pages-view .collection-set .info-box.col-item:has(.col-accent[class*="bg-"]):not(:has(.col-accent.bg-none)) { border-left: var(--pw-rule) solid var(--col-accent); }
.pages-view .collection-set .col-item:has(.col-accent[class*="bg-"]):not(:has(.col-accent.bg-none)) > .card { border-top: var(--pw-rule) solid var(--col-accent); }
.pages-view .collection-set .col-item .card > .card-header.col-accent { border-bottom: 0; }
.pages-view .collection-set .info-box.col-item:has(.col-accent[class*="bg-"]):not(:has(.col-accent.bg-none)):hover { border-left-color: var(--col-accent); }
.pages-view .collection-set .col-item:has(.col-accent[class*="bg-"]):not(:has(.col-accent.bg-none)) > .card:hover { border-top-color: var(--col-accent); }

/* Collection page: the folder tile takes the collection's colour the same way as the cards - a top edge
   and the icon in that colour, not a filled square. The tab underline uses the same (adjusted) colour. */
.pages-view.collection-view { --col-accent: var(--pw-accent); --col-accent-ink: var(--pw-muted); }
.pages-view.collection-view:has(.info-icon.bg-primary)   { --col-accent: #3b82f6; --col-accent-ink: #3b82f6; }
.pages-view.collection-view:has(.info-icon.bg-success)   { --col-accent: #28a745; --col-accent-ink: #28a745; }
.pages-view.collection-view:has(.info-icon.bg-danger)    { --col-accent: #dc3545; --col-accent-ink: #dc3545; }
.pages-view.collection-view:has(.info-icon.bg-warning)   { --col-accent: #e0a33a; --col-accent-ink: #d4930f; }
.pages-view.collection-view:has(.info-icon.bg-info)      { --col-accent: #17a2b8; --col-accent-ink: #17a2b8; }
.pages-view.collection-view:has(.info-icon.bg-secondary) { --col-accent: #6c757d; --col-accent-ink: #6c757d; }
.pages-view.collection-view:has(.info-icon.bg-light)     { --col-accent: #c9d0d5; --col-accent-ink: #9aa3aa; }
.pages-view.collection-view:has(.info-icon.bg-dark)      { --col-accent: #343a40; --col-accent-ink: #343a40; }
.dark-mode .pages-view.collection-view:has(.info-icon.bg-dark) { --col-accent: #aab3ba; --col-accent-ink: #c9d0d5; }
.pages-view.collection-view .row-top-info :is(.info-icon, .info-accent-action)[class*="bg-"] { background: var(--pw-surface) !important; color: var(--col-accent-ink) !important; border: 1px solid var(--pw-control-border) !important; }
.pages-view.collection-view .row-top-info :is(.info-icon, .info-accent-action)[class*="bg-"]:not(.bg-none) { border-top: var(--pw-rule) solid var(--col-accent) !important; }
.pages-view.collection-view .col-tabs .nav-link.active, .dark-mode .pages-view.collection-view .col-tabs .nav-link.active { border-bottom-color: var(--col-accent); }
.pages-view.collection-view .col-tabs-dropdown .btn.dropdown-toggle { border-bottom-color: var(--col-accent); }

/* Editing a template's or collection's details: a missing title or description shows a red edge and
   its own message beneath (each message belongs to the field just before it). */
.pages-view .row-top-info .invalid-feedback { display: none; font-size: 13px; margin: -4px 0 10px; color: var(--pw-danger); }
.pages-view .row-top-info .form-control.is-invalid + .invalid-feedback { display: block; }
.pages-view .row-top-info .form-control.is-invalid, .dark-mode .pages-view .row-top-info .form-control.is-invalid { border-color: var(--pw-danger) !important; box-shadow: inset 0 0 0 1px var(--pw-danger); background-image: none; }
.pages-view .form-control.is-invalid { border-color: var(--pw-danger) !important; }
/* Collection grid cards: a hairline between the title and the description and status below it. */
.pages-view .collection-set .col-item .card > .card-header,
.pages-view .collection-set .col-item .card > .card-header.col-accent { border-bottom: 1px solid var(--pw-divider) !important; }

/* ---------- 33. Import wizard (Upload.razor) and New template (Create.razor) ---------- */
/* One column, full width of the page container; the old side spacers go. */
.pages-view.pw-wizard > .container { max-width: 1100px; margin-left: 0; }
.pages-view.pw-wizard .container > .row { margin-left: 0; margin-right: 0; }
.pages-view.pw-wizard .container > .row > .col-1 { display: none; }
.pages-view.pw-wizard .container > .row > [class*="col-"] { flex: 0 0 100%; max-width: 100%; padding-left: 0; padding-right: 0; }
.pages-view.pw-wizard .pw-wizard-head { margin-bottom: 20px; }
.pages-view.pw-wizard .pw-wizard-head .pw-page-desc { margin-bottom: 18px; }

/* Step bar: numbered steps on a line; the current one in teal, finished ones ticked. Which step is current
   follows the row the script is showing. */
.pages-view .pw-steps { display: flex; gap: 0; list-style: none; margin: 0; padding: 0; border-bottom: 1px solid var(--pw-divider); }
.pages-view .pw-step { display: flex; align-items: center; gap: 10px; padding: 0 22px 12px 0; margin-right: 22px; font-family: var(--pw-font-head); font-weight: 600; font-size: 17px; color: var(--pw-muted); border-bottom: 3px solid transparent; margin-bottom: -1px; }
.pages-view .pw-step-num { display: inline-flex; align-items: center; justify-content: center; width: 26px; height: 26px; border: 1px solid var(--pw-control-border); font-family: var(--pw-font); font-size: 13px; font-weight: 600; color: var(--pw-muted); background: var(--pw-surface); }
.pages-view .pw-step.is-current, .pages-view .pw-step.is-current .pw-step-num { color: var(--pw-ink); }
.pages-view .pw-step.is-current { border-bottom-color: var(--pw-accent); }
.pages-view .pw-step.is-current .pw-step-num { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view .pw-step.is-done .pw-step-num { background: var(--pw-tint); border-color: var(--pw-tint-border); color: transparent; position: relative; }
.pages-view .pw-step.is-done .pw-step-num::after { content: "\2713"; position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; color: var(--pw-accent-ink); }
/* Source by default; Review while pasting or previewing a Word conversion; Details at the end. */
.pages-view.upload-view .pw-step-source { color: var(--pw-ink); border-bottom-color: var(--pw-accent); }
.pages-view.upload-view .pw-step-source .pw-step-num { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-source,
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-source { color: var(--pw-muted); border-bottom-color: transparent; }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-source .pw-step-num,
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-source .pw-step-num,
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-review .pw-step-num { background: var(--pw-tint); border-color: var(--pw-tint-border); color: var(--pw-accent-ink); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-review,
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-details { color: var(--pw-ink); border-bottom-color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-review .pw-step-num,
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-details .pw-step-num { background: var(--pw-accent-strong); border-color: var(--pw-accent-strong); color: var(--pw-on-accent); }
.pages-view.upload-view:has(.row-anon:not([style*="display: none"])) .pw-steps { display: none; }

/* Each step is one panel: a condensed heading, the body, and a foot with the way back (or Cancel) at the
   left, "Step n of 3" and the way on at the right. */
.pages-view.pw-wizard .card { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-radius: 0; box-shadow: none; margin-bottom: 20px; }
.pages-view.pw-wizard .card > .card-header, .dark-mode .pages-view.pw-wizard .card > .card-header { display: flex; align-items: center; gap: 12px; background: transparent !important; color: var(--pw-ink) !important; border-bottom: 1px solid var(--pw-divider); padding: 16px 24px; font-family: var(--pw-font-head); font-weight: 600; font-size: 20px; }
.pages-view.pw-wizard .card > .card-header > i { display: none; }
.pages-view.pw-wizard .card > .card-header::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--pw-accent); }
.pages-view.pw-wizard .card.card-warning > .card-header::before { background: var(--pw-warn); }
.pages-view.pw-wizard .card > .card-body { padding: 22px 24px; color: var(--pw-ink); }
.pages-view.pw-wizard .card > .card-footer, .pages-view.pw-wizard .card > .card-footer > div:not(.text-muted):not(.creating-template) { display: flex; align-items: center; flex-wrap: wrap; gap: 10px; }
.pages-view.pw-wizard .card > .card-footer { background: var(--pw-raised); border-top: 1px solid var(--pw-divider); padding: 14px 24px; }
.pages-view.pw-wizard .card > .card-footer > div:not(.text-muted):not(.creating-template) { width: 100%; margin: 0 !important; }
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) .btn { border-radius: 0; min-height: 40px; padding: 0 20px; font-family: var(--pw-font-head); font-weight: 600; font-size: 16px; display: inline-flex; align-items: center; float: none !important; }
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) .btn-secondary { order: 0; background: transparent; border-color: transparent; color: var(--pw-muted); padding-left: 0; }
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) .btn-secondary:hover { color: var(--pw-accent-ink); background: transparent; }
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) :is(.btn-primary, .btn-success) { order: 3; background: var(--pw-accent-strong); border: 1px solid var(--pw-accent-strong); color: var(--pw-on-accent); position: relative; overflow: visible; --pw-mark: color-mix(in srgb, var(--pw-ink) 55%, transparent); }
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) :is(.btn-primary, .btn-success)::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px top 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px top 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px bottom 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 bottom 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px bottom 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 bottom 5px / 11px 1px;
  background-repeat: no-repeat;
}
.pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) .text-muted, .pages-view.pw-wizard :is(.card-footer, .pw-wizard-actions) .creating-template { order: 2; margin-left: auto !important; font-size: 14px; }
.pages-view.pw-wizard .card-footer small.text-muted { order: 5; flex: 0 0 100%; margin: 4px 0 0 !important; }
/* "Step n of 3" sits just before the way on. */
.pages-view.upload-view .card > .card-footer::after, .pages-view.upload-view .card > .card-footer > .direct-upload::after { order: 2; margin-left: auto; font-size: 13px; color: var(--pw-muted); }
.pages-view.upload-view :is(.row-type, .row-word) .card > .card-footer::after,
.pages-view.upload-view .row-upload .card > .card-footer > .direct-upload::after { content: "Step 1 of 3"; }
.pages-view.upload-view :is(.row-paste, .row-word-preview) .card > .card-footer::after { content: "Step 2 of 3"; }
.pages-view.upload-view .row-details .card > .card-footer > div::after { content: "Step 3 of 3"; order: 2; margin-left: auto; font-size: 13px; color: var(--pw-muted); }
.pages-view.upload-view .card-footer:has(> .text-muted:not([style*="display: none"]):not([style*="display:none"]):not(small))::after { margin-left: 12px; }

/* Step 1: the three kinds of source as selectable panels, side by side (stacked on a phone). */
.pages-view.upload-view .import-type { display: grid !important; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
.pages-view.upload-view .import-type > .pw-choice { display: flex !important; flex-direction: column; align-items: flex-start; gap: 14px; text-align: left; white-space: normal; margin: 0; padding: 18px; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); height: auto; }
.pages-view.upload-view .import-type > .pw-choice:hover { border-color: var(--pw-accent); background: var(--pw-surface); color: var(--pw-ink); }
.pages-view.upload-view .import-type > .pw-choice:is(.active, .btn-dark), .dark-mode .pages-view.upload-view .import-type > .pw-choice:is(.active, .btn-dark) { background: var(--pw-tint) !important; border-color: var(--pw-accent) !important; color: var(--pw-ink) !important; box-shadow: inset 0 0 0 1px var(--pw-accent); }
.pages-view.upload-view .pw-choice-icon { display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; font-size: 26px; color: var(--pw-accent-ink); }
.pages-view.upload-view .import-type .pw-choice-icon i { font-size: 26px; line-height: 1; margin: 0; display: block; color: inherit; }
.pages-view.upload-view .pw-choice-icon { overflow: hidden; }
/* New template has no card foot - its Create button sits in an actions row at the foot of the form */
.pages-view.pw-wizard .pw-wizard-actions { display: flex; align-items: center; justify-content: flex-end; gap: 10px; border-top: 1px solid var(--pw-divider); padding-top: 18px; margin-top: 8px; }
.pages-view.upload-view .pw-choice-icon svg { width: 40px !important; min-width: 0 !important; height: 40px !important; padding: 0 !important; margin: 0 !important; }
.pages-view.upload-view .pw-choice-text { display: flex; flex-direction: column; gap: 4px; }
.pages-view.upload-view .pw-choice-text > strong { display: flex; align-items: center; gap: 8px; font-family: var(--pw-font-head); font-size: 19px; font-weight: 600; }
.pages-view.upload-view .pw-choice-text > span { font-size: 14px; line-height: 1.45; color: var(--pw-muted); font-weight: 400; }
.pages-view.upload-view .upload-type-ok { font-size: 14px; color: var(--pw-muted); margin: 0 !important; }
@media (max-width: 767.98px) {
  .pages-view.upload-view .import-type { grid-template-columns: 1fr; }
  .pages-view.upload-view .import-type > .pw-choice { flex-direction: row; align-items: center; }
  .pages-view .pw-step:not(.is-current) { font-size: 0; gap: 0; padding-right: 8px; margin-right: 8px; }
}

/* Choosing a file: a dashed drop area with the file's name, and a Browse button. */
.pages-view.upload-view .custom-file { height: auto; }
.pages-view.upload-view .custom-file-input { height: 96px; cursor: pointer; }
.pages-view.upload-view .custom-file-label { height: 96px; display: flex; align-items: center; padding: 0 130px 0 20px; border-radius: 0; border: 1px dashed var(--pw-tint-border); background: var(--pw-raised); color: var(--pw-muted) !important; font-size: 15px; }
.pages-view.upload-view .custom-file-label.selected { color: var(--pw-ink) !important; border-style: solid; border-color: var(--pw-accent); background: var(--pw-tint); font-weight: 600; }
.pages-view.upload-view .custom-file-label::after { content: "Browse…"; height: 40px; top: 50%; transform: translateY(-50%); right: 20px; display: flex; align-items: center; padding: 0 16px; border-radius: 0; border: 1px solid var(--pw-control-border); background: var(--pw-surface); color: var(--pw-accent-ink); font-family: var(--pw-font-head); font-weight: 600; }
.pages-view.upload-view .progress { border-radius: 0; height: 6px; background: var(--pw-neutral); }
.pages-view.upload-view .progress-bar { background: var(--pw-accent) !important; }
.pages-view.upload-view :is(.progress-text-message, .word-progress-message) { font-size: 13px; color: var(--pw-muted); margin-top: 6px; }
.pages-view.upload-view :is(.progress-error, .word-error) { padding: 12px 16px; border: 1px solid var(--pw-danger-border); border-left: var(--pw-rule) solid var(--pw-danger); background: var(--pw-danger-tint); color: var(--pw-danger) !important; font-size: 14px; }

/* Step 2: the paste and Word editors sit on a mat, as in the Designer. */
.pages-view.upload-view :is(.row-paste, .row-word-preview) .card-body { background: var(--pw-raised); }
.pages-view.upload-view .row-word-preview .alert { border-radius: 0; }

/* Step 3 and New template: the fields. */
.pages-view.pw-wizard form label.form-label { font-size: 14px; font-weight: 600; color: var(--pw-ink); margin-bottom: 6px; }
.pages-view.pw-wizard form .req { color: var(--pw-danger); margin-left: 2px; }
.pages-view.pw-wizard form .form-control, .pages-view.pw-wizard form select.form-control { border-radius: 0; background: var(--pw-raised); border: 1px solid var(--pw-control-border); color: var(--pw-ink); box-shadow: none; }
.pages-view.pw-wizard form .form-control:focus { border-color: var(--pw-accent); }
.pages-view.pw-wizard form .form-control.is-invalid { border-color: var(--pw-danger) !important; box-shadow: inset 0 0 0 1px var(--pw-danger); }
.pages-view.pw-wizard form .invalid-feedback { font-size: 13px; color: var(--pw-danger); }
.pages-view.pw-wizard form :is(.text-muted, .small) { color: var(--pw-muted); }
.pages-view.pw-wizard form .form-check-input { accent-color: var(--pw-accent); width: 18px; height: 18px; margin-top: 2px; }
.pages-view.pw-wizard form .form-check-label { font-size: 15px; padding-left: 4px; }
.pages-view.pw-wizard form .tag-edit-wrapper { background: var(--pw-raised); }
.pages-view.pw-wizard .tag-input .tag, .dark-mode .pages-view.pw-wizard .tag-input .tag {
  display: inline-flex; align-items: center; background: var(--pw-tint); border: 1px solid var(--pw-tint-border); border-radius: 0;
  padding: 3px 26px 3px 10px; margin: 4px 8px 4px 0; font-family: var(--pw-font); font-size: 14px; font-weight: 500; line-height: 1.3; color: var(--pw-accent-ink);
}
.pages-view.pw-wizard .tag-input .tag span { background: transparent; border-radius: 0; margin: 0 1px 0 0; padding: 0; color: inherit; }
.pages-view.pw-wizard .tag-input .tag .tag-i { color: var(--pw-accent-ink); right: 8px; top: 50%; height: auto; line-height: 1; transform: translateY(-50%); font-size: 16px; }
.pages-view.pw-wizard .tag-input.tagging, .dark-mode .pages-view.pw-wizard .tag-input.tagging { background: transparent; border: 0; }
.pages-view.pw-wizard .alert { border-radius: 0; }
/* Some step feet carry Bootstrap's flex-column; the foot is always one row. */
.pages-view.pw-wizard .card > .card-footer.flex-column, .pages-view.pw-wizard .card-footer .flex-column { flex-direction: row !important; }

/* ---------- 34. Import wizard, second pass ---------- */
/* Step bar as in the design: "01 Source", "02 Review", "03 Details", each a third of the width; the
   current one in ink with a teal number and underline, finished ones ticked. */
.pages-view .pw-steps { counter-reset: pwstep; margin: 0 0 24px; }
.pages-view .pw-step { counter-increment: pwstep; flex: 1 1 0; gap: 10px; padding: 10px 0 12px; margin: 0 0 -1px; font-family: var(--pw-font); font-weight: 500; font-size: 15px; color: var(--pw-muted); border-bottom: 3px solid transparent; }
.pages-view .pw-step::before { content: counter(pwstep, decimal-leading-zero); font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1; color: var(--pw-divider); }
.pages-view.upload-view .pw-step-source { color: var(--pw-ink); font-weight: 600; border-bottom-color: var(--pw-accent); }
.pages-view.upload-view .pw-step-source::before { color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview, .row-details, .row-duplicate):not([style*="display: none"])) .pw-step-source { color: var(--pw-accent-ink); font-weight: 500; border-bottom-color: transparent; }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview, .row-details, .row-duplicate):not([style*="display: none"])) .pw-step-source::before { content: "\2713"; color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-review { color: var(--pw-ink); font-weight: 600; border-bottom-color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-paste, .row-word-preview):not([style*="display: none"])) .pw-step-review::before { color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-details { color: var(--pw-ink); font-weight: 600; border-bottom-color: var(--pw-accent); }
.pages-view.upload-view:has(:is(.row-details, .row-duplicate):not([style*="display: none"])) .pw-step-details::before { color: var(--pw-accent); }
/* A template file goes straight from Source to Details: Review is shown as skipped. */
.pages-view.upload-view:has(.row-details:not([style*="display: none"])) .pw-step-review::before { content: "\2014"; }
@media (max-width: 767.98px) {
  .pages-view .pw-step, .pages-view .pw-step:not(.is-current) { font-size: 13px; gap: 6px; padding-right: 0; margin-right: 0; }
  .pages-view .pw-step::before { font-size: 18px; }
}
/* Steps still to come: readable, just quieter than the current one (the divider colour vanished in dark mode). */
.pages-view .pw-step::before { color: var(--pw-muted); }
.pages-view .pw-step { color: color-mix(in srgb, var(--pw-ink) 70%, transparent); }

/* No panel around a step: no heading, border, padding or background. Its foot is a ruled line of actions. */
.pages-view.pw-wizard .card, .dark-mode .pages-view.pw-wizard .card { background: transparent; border: 0; box-shadow: none; margin-bottom: 0; }
.pages-view.pw-wizard .card > .card-header { display: none !important; }
.pages-view.pw-wizard .card > .card-body { padding: 0; background: transparent !important; }
.pages-view.pw-wizard .card > .card-footer { background: transparent; border-top: 1px solid var(--pw-divider); padding: 16px 0 0; margin-top: 24px; }
.pages-view.pw-wizard .card.card-warning { border: 1px solid var(--pw-warn); border-left: var(--pw-rule) solid var(--pw-warn); background: var(--pw-warn-tint); padding: 16px 20px; margin-bottom: 20px; }
/* Choosing a template file or a Word document shows its upload beneath the choices, on the same step:
   the choices' own foot gives way to the upload's (Cancel, Step 1 of 3). */
.pages-view.upload-view:has(:is(.row-upload, .row-word):not([style*="display: none"])) .row-type .card > .card-footer { display: none; }
.pages-view.upload-view .row-type .upload-type-ok { margin-top: 14px !important; }
.pages-view.upload-view :is(.row-upload, .row-word) { margin-top: 18px; }
.pages-view.upload-view :is(.row-upload, .row-word) .custom-file { margin-bottom: 0 !important; }
.pages-view.upload-view :is(.row-upload, .row-word) :is(.progress-wrapper, .word-progress-wrapper) { margin: 12px 0 0 !important; }
.pages-view.upload-view :is(.row-upload, .row-word) :is(.progress-wrapper, .word-progress-wrapper)[style*="hidden"] { display: none; }
.pages-view.upload-view :is(.progress-error, .word-error) { margin: 12px 0 0; }

/* Word review: the merge fields that will become template fields. */
.pages-view.upload-view .word-merge-fields { display: flex; align-items: center; flex-wrap: wrap; gap: 8px 10px; padding: 12px 16px; margin-bottom: 14px; border: 1px solid var(--pw-tint-border); background: var(--pw-tint); }
.pages-view.upload-view .word-merge-fields > i { color: var(--pw-accent-ink); }
.pages-view.upload-view .word-merge-fields strong { font-size: 14px; color: var(--pw-ink); margin-right: 4px; }
.pages-view.upload-view .word-merge-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.pages-view.upload-view :is(.row-paste, .row-word-preview) .card-body { background: transparent !important; }

/* Details for a template file: its thumbnail and what it carries beside the fields. */
.pages-view.upload-view .row-details.has-summary .card-body { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 28px; align-items: start; }
.pages-view.upload-view .import-summary-thumb { padding: 12px; background: var(--pw-neutral); border: 1px solid var(--pw-divider); margin-bottom: 14px; }
.pages-view.upload-view .import-summary-thumb img { display: block; width: 100%; background: #fff; border: 1px solid var(--pw-divider); }
.pages-view.upload-view .import-summary-meta { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.pages-view.upload-view .import-summary-meta dt { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-muted); align-self: center; }
.pages-view.upload-view .import-summary-meta dd { margin: 0; color: var(--pw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 767.98px) {
  .pages-view.upload-view .row-details.has-summary .card-body { grid-template-columns: 1fr; }
  .pages-view.upload-view .import-summary-thumb { max-width: 200px; }
}
/* The drop area: the file input covers the whole area (so a drop anywhere on it lands), and the area has
   its own height so the step's foot sits below it. A converted file shows its name and a note. */
.pages-view.upload-view :is(.row-upload, .row-word) .custom-file { position: relative; height: 96px; }
.pages-view.upload-view :is(.row-upload, .row-word) .custom-file form { position: absolute; inset: 0; margin: 0; }
.pages-view.upload-view :is(.row-upload, .row-word) .custom-file input[type="file"] { position: absolute; inset: 0; width: 100%; height: 96px; opacity: 0; z-index: 2; cursor: pointer; margin: 0; }
.pages-view.upload-view :is(.row-upload, .row-word) .custom-file-label { position: absolute; inset: 0; z-index: 1; margin: 0; }
.pages-view.upload-view .custom-file-label .pw-file-name { font-weight: 600; color: var(--pw-ink); }
.pages-view.upload-view .custom-file-label .pw-file-note { display: block; font-size: 13px; font-weight: 400; color: var(--pw-muted); }
.pages-view.upload-view .custom-file-label:has(.pw-file-name) { flex-direction: column; align-items: flex-start; justify-content: center; gap: 2px; }
/* Tighter spacing on the source step. */
.pages-view.upload-view .row-type .upload-type-ok { margin-top: 12px !important; }
.pages-view.upload-view :is(.row-upload, .row-word) { margin-top: 12px; }
/* The import and new template pages sit centred in the content area. */
.pages-view.pw-wizard > .container { margin-left: auto; margin-right: auto; }
/* Choosing a collection: the list takes the full width; a new collection's name and colour go beneath it. */
.pages-view.pw-wizard .add-to-collection .form-row > .col-lg-5 { flex: 0 0 100%; max-width: 100%; }
.pages-view.pw-wizard .add-to-collection .form-row > .new-collection:not(.col-2) { flex: 1 1 0; max-width: none; }
.pages-view.pw-wizard .add-to-collection .form-row > .new-collection.col-2 { flex: 0 0 auto; max-width: none; }
.pages-view.pw-wizard .add-to-collection .color-picker .btn { border-radius: 0; height: 38px; background: var(--pw-raised); border: 1px solid var(--pw-control-border); }

/* Portal configuration head: the portal's url and type tags wrap under the title on a narrow screen. */
.pages-view.portal-configuration-view .title-row { flex-wrap: wrap; row-gap: 8px; }
.pages-view.portal-configuration-view .title-row > .badge { white-space: normal; overflow-wrap: anywhere; max-width: 100%; text-align: left; }
.pages-view.portal-configuration-view .row-groups dd, .pages-view.portal-configuration-view .row-groups li { overflow-wrap: anywhere; }
/* editor.css colours every icon in a warning header black; the Authors card's tools follow the others. */
.pages-view:is(.collection-view, .license-assign-view) .row-permissions .card-tools .btn-tool :is(.fa, .fas, .far) { color: inherit !important; }
/* A long field value (a map url, say) is cut off with an ellipsis rather than widening the fields list. */
.pages-view.template-view .pam-param-list, .pages-view.template-view .pam-param-list > .list-group-item { min-width: 0; max-width: 100%; }

/* Template and collection details: no heading and no panel - a strong rule above the rows. */
.pages-view.template-view .pam-details-card > h5.card-header { display: none; }
.pages-view.template-view .card.pam-details-card > .list-group,
.pages-view.collection-view .col-details-card > .list-group { background: transparent; border: 0; border-top: 3px solid var(--pw-ink); border-bottom: 1px solid var(--pw-divider); }
.pages-view.template-view .pam-details-list .list-group-item,
.pages-view.collection-view .col-details-list .list-group-item { background: transparent; padding-left: 0; padding-right: 0; }

/* Embed and Export are links at the top of the template head, not buttons in the bar. */
.pages-view .pw-head-links { float: right; display: flex; gap: 20px; margin: 0 0 0 16px; }
.pages-view .pw-head-links .pw-head-link, .pages-view .pw-head-links .pw-head-link:is(.btn-info, .btn-outline-info) { display: inline-flex; align-items: center; gap: 2px; background: transparent !important; border: 0 !important; box-shadow: none !important; padding: 0; font-family: var(--pw-font); font-size: 14px; font-weight: 500; color: var(--pw-accent-ink) !important; text-decoration: none; }
.pages-view .pw-head-links .pw-head-link:hover { text-decoration: underline; }
.pages-view .pw-head-links .pw-head-link.disabled { color: var(--pw-muted) !important; opacity: .6; cursor: default; text-decoration: none; }

/* Phones and tablets: the slide-out menu carries the logo and name at its top, then the menu list
   (which scrolls on its own, however short the screen), then "Get in touch" beneath it rather than over it. */
@media (max-width: 991.98px) {
  .main-sidebar { display: flex; flex-direction: column; }
  .main-sidebar .brand-link { display: flex !important; flex: none; align-items: center; gap: 10px; position: static !important; width: 250px !important; height: var(--pw-header-height); padding: 0 20px !important; margin: 0; background: var(--pw-head); border-bottom: var(--pw-rule) solid var(--pw-accent); text-decoration: none; }
  .main-sidebar .brand-link .brand-logo { display: inline-flex; width: auto; padding: 0; font-size: inherit; }
  .main-sidebar .brand-link .brand-logo svg { width: 30px; height: auto; }
  .main-sidebar .brand-link .brand-text { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1; color: var(--pw-head-ink); }
  .main-sidebar .brand-link .brand-text > span { color: var(--pw-accent); }
  .main-sidebar .sidebar { flex: 1 1 auto; min-height: 0; height: auto !important; margin-top: 0 !important; overflow-y: auto; overscroll-behavior: contain; -webkit-overflow-scrolling: touch; }
  .main-sidebar .nav-bottom { position: static !important; flex: none; }
  /* The template name / breadcrumb sits next to the logo, not 65px along. */
  .main-header.navbar .nav-item.file-name, .sidebar-collapse .main-header.navbar .nav-item.file-name { margin-left: 0; }
}
/* On a touch screen a tap leaves the logo "hovered", which swapped it for the menu icon just as the
   menu slid out - so the swap is for mouse pointers only. */
@media (hover: none) {
  .sidebar-collapse .main-header .brand-link:hover .brand-expand { display: none !important; }
  .sidebar-collapse .main-header .brand-link:hover span.brand-logo { display: inline-flex !important; }
}
/* The slide-out menu's logo and name are sized to fill the menu's width. */
@media (max-width: 991.98px) {
  .main-sidebar .brand-link { padding: 0 16px !important; }
  .main-sidebar .brand-link .brand-logo svg { width: 34px; }
  .main-sidebar .brand-link .brand-text { font-size: 25px; }
}
/* editor.css pins every brand link to 240px under .layout-navbar-fixed .wrapper; the menu's own is the menu's 250px. */
@media (max-width: 991.98px) {
  .layout-navbar-fixed .wrapper .main-sidebar .brand-link { width: 250px !important; }
}

/* Check in / Publish: the dialog does one of the two, so its option has no radio and no selected state. */
#checkinChanges .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) > input[type="radio"] { display: none; }
#checkinChanges .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major),
#checkinChanges .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):has(input:checked) { background: var(--pw-surface); border-color: var(--pw-control-border); cursor: default; }
#checkinChanges .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major) + label.checkin-options,
#checkinChanges .checkin-options-wrapper form label:is(.checkin-minor, .checkin-major):has(input:checked) + label.checkin-options { padding-left: 18px; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-muted); }
#checkinChanges .checkin-options-wrapper form label.checkin-options:has(#checkinKeepCheckOut) { color: var(--pw-ink); }
#checkinChanges :is(.checkin-note, .public-publish, .private-publish, .no-publish-permission) { font-size: 13px; line-height: 1.5; color: var(--pw-muted); }
/* The script hides the option it wasn't opened for with Bootstrap's d-none, which the option's own
   display: flex !important above would otherwise beat. */
.modal .checkin-options-wrapper form label.d-none { display: none !important; }

/* Assign licenses: the same role cards as a collection's permissions - role notes, then members, then
   Add members. The card title already names the licence, so no kicker; members have no avatar. */
.pages-view.license-assign-view .row-permissions .card > .card-header::before { display: none; }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item { padding-left: 20px; }
.pages-view.license-assign-view .row-permissions .user-list .count-available { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--pw-raised); font-weight: 600; }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn { float: right; border-radius: 0; min-width: 32px; height: 32px; padding: 0 10px; font-family: var(--pw-font-head); font-weight: 600; font-size: 14px; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); }
.pages-view.license-assign-view .row-permissions .user-list .count-available .btn { float: none; flex: none; color: var(--pw-accent-ink); }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn.user-remove-license { background: transparent; color: var(--pw-danger); border-color: var(--pw-danger); }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn.user-remove-license:hover { background: var(--pw-danger-tint); border-color: var(--pw-danger); color: var(--pw-danger); }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn.user-retract-license { background: transparent; color: var(--pw-warn-ink); border-color: var(--pw-warn); }
.pages-view.license-assign-view .row-permissions .user-list .text-muted { font-size: 13px; }
.pages-view.license-assign-view .manage-billing { flex: none; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); font-family: var(--pw-font-head); font-weight: 600; font-size: 15px; padding: 6px 14px; }
.pages-view.license-assign-view .manage-billing:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view.license-assign-view .assign-info-row { gap: 16px; justify-content: space-between; }
/* Undo check-out in the version history is a warning action: our amber, like the Checked out tag. */
.pages-view .pam-vers-card .btn.pam-rollback-version,
.dark-mode .pages-view .pam-vers-card .btn.pam-rollback-version { background: transparent; border: 1px solid var(--pw-warn) !important; color: var(--pw-warn-ink) !important; }
.pages-view .pam-vers-card .btn.pam-rollback-version:hover { background: var(--pw-warn-tint); }
.pages-view.license-assign-view .row-permissions .user-list .list-group-item .btn.user-retract-license:hover { background: var(--pw-warn-tint); border-color: var(--pw-warn); color: var(--pw-warn-ink); }

/* ===================================================================================================
   35. The designer: only the frame around the editors changes (pane tabs, the option rows, the
   CKEditor toolbar's colours, the zone chips, the canvas, the execution log and the run bar).
   Nothing here may reach into .ck-content (the page being edited) or .CodeMirror.
   =================================================================================================== */

/* Pane tabs: square, on one strip colour; the active tab joins its pane with a 2px teal underline
   (2px, not the 4px rule, so it never stacks on the header's rule). */
.content-wrapper .content-pane > .nav-tabs, .main-footer .exec-log > .nav-tabs,
.dark-mode .content-wrapper .content-pane > .nav-tabs, .dark-mode .main-footer .exec-log > .nav-tabs { background: var(--pw-raised) !important; border-bottom: 1px solid var(--pw-divider); padding: 0; }
.content-wrapper .content-pane > .nav-tabs .nav-link, .main-footer .exec-log > .nav-tabs .nav-link { display: flex; align-items: center; gap: 8px; height: 45px; border: 0; border-right: 1px solid transparent; border-left: 1px solid transparent; border-bottom: 2px solid transparent; border-radius: 0; margin-bottom: -1px; background: transparent; padding: 0 16px; font-family: var(--pw-font-head); font-weight: 600; font-size: 15px; color: var(--pw-muted); }
.content-wrapper .content-pane > .nav-tabs .nav-link:hover, .main-footer .exec-log > .nav-tabs .nav-link:hover { color: var(--pw-ink); }
.content-wrapper .content-pane > .nav-tabs .nav-link.item-tab-link.active, .main-footer .exec-log > .nav-tabs .nav-link.active { background: var(--pw-surface); border-left-color: var(--pw-divider); border-right-color: var(--pw-divider); border-bottom-color: var(--pw-accent); color: var(--pw-accent-ink); }
.content-wrapper .content-pane > .nav-tabs .nav-item:first-child .nav-link.active { border-left-color: transparent; }
.content-wrapper .content-pane > .nav-tabs .nav-link.item-dropdown-link, .content-wrapper .content-pane > .nav-tabs .nav-link.item-dropdown-link.active { background: transparent; border-color: transparent; color: var(--pw-muted); }
.content-wrapper .content-pane > .nav-tabs .nav-link i { font-size: 13px; }

/* The row under the tabs (search, source, zoom and page controls): square controls on the strip colour. */
.content-wrapper .content-pane .content-options, .dark-mode .content-wrapper .content-pane .content-options { background: var(--pw-raised); border-bottom: 1px solid var(--pw-divider); }
.content-wrapper .content-pane .content-options .form-control { border-radius: 0; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-ink); font-size: 14px; }
.content-wrapper .content-pane .content-options .btn { border-radius: 0 !important; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-muted); }
.content-wrapper .content-pane .content-options .btn:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }

/* CKEditor's toolbar, recoloured through its own variables: muted icons, teal when on, hairline separators. */
.content-wrapper .content-editor-toolbar-bar, .content-wrapper .content-editor-add-zones,
.dark-mode .content-wrapper .content-switch.content-designer .content-editor-toolbar-bar, .dark-mode .content-wrapper .content-editor-add-zones { background: var(--pw-raised); border-color: var(--pw-divider); }
.content-wrapper .content-editor-toolbar .ck.ck-toolbar, .dark-mode .content-wrapper .content-editor-toolbar .ck.ck-toolbar {
  --ck-border-radius: 0;
  --ck-color-toolbar-background: var(--pw-raised);
  --ck-color-toolbar-border: transparent;
  --ck-color-button-default-background: transparent;
  --ck-color-button-default-hover-background: var(--pw-neutral);
  --ck-color-button-default-active-background: var(--pw-tint);
  --ck-color-button-on-background: var(--pw-tint);
  --ck-color-button-on-hover-background: var(--pw-tint);
  --ck-color-button-on-color: var(--pw-accent-ink);
  --ck-color-text: var(--pw-muted);
  --ck-color-base-border: var(--pw-divider);
  border: 0; background: var(--pw-raised);
}
.content-wrapper .content-editor-toolbar .ck.ck-toolbar .ck-toolbar__separator, .dark-mode .content-wrapper .content-editor-toolbar .ck.ck-toolbar .ck-toolbar__separator { background: var(--pw-divider); }
.content-wrapper .content-editor-toolbar .ck.ck-toolbar .ck-button.ck-on { color: var(--pw-accent-ink); }

/* Header and footer chips: dashed teal squares. */
.content-wrapper .content-editor-zone-pill, .dark-mode .content-wrapper .content-editor-zone-pill { border-radius: 0; border: 1px dashed var(--pw-tint-border); background: transparent; color: var(--pw-accent-ink); font-size: 12px; font-weight: 500; }
.content-wrapper .content-editor-zone-pill:hover, .dark-mode .content-wrapper .content-editor-zone-pill:hover { border-style: solid; border-color: var(--pw-accent); background: var(--pw-tint); color: var(--pw-accent-ink); }

/* The page sits on a mid-tone canvas with a hairline edge and no shadow, like the template thumbnails. */
.content-wrapper .content-switch.content-designer .custom-editor-background { background: var(--pw-neutral); }
.dark-mode .content-wrapper .content-switch.content-designer .custom-editor-background { background: var(--pw-ground); }
.content-wrapper .content-switch.content-designer .word-preview-page { box-shadow: none !important; border: 1px solid var(--pw-divider); }

/* Execution log: options on the strip colour, a striped table with small uppercase headings. */
.main-footer .exec-log .exec-log-options, .dark-mode .main-footer .exec-log .exec-log-options { background: var(--pw-raised); border-bottom: 1px solid var(--pw-divider); color: var(--pw-ink); }
.main-footer .exec-log .exec-log-options label { font-size: 11px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pw-accent-ink); }
.main-footer .exec-log .exec-log-options .exec-show-overlay-grid label { text-transform: none; letter-spacing: 0; font-size: 13px; font-weight: 400; color: var(--pw-ink); }
.main-footer .exec-log .exec-log-options select.form-control { border-radius: 0; background: var(--pw-surface); border-color: var(--pw-control-border); color: var(--pw-ink); }
.main-footer .exec-log .exec-log-history, .dark-mode .main-footer .exec-log .exec-log-history { background: var(--pw-surface); color: var(--pw-ink); }
.main-footer .exec-log .exec-log-history table.table { color: var(--pw-ink); border-color: var(--pw-divider); }
.main-footer .exec-log .exec-log-history table :is(th, td) { border-color: var(--pw-divider) !important; border-left: 0 !important; border-right: 0 !important; }
.main-footer .exec-log .exec-log-history table th { background: var(--pw-raised); font-size: 10.5px; font-weight: 600; letter-spacing: 1.2px; text-transform: uppercase; color: var(--pw-muted); }
.main-footer .exec-log .exec-log-history .exec-log-history-entries table tbody > tr:nth-child(odd) > td { background: var(--pw-raised); }
.main-footer .exec-log .exec-log-history .log-entry-marker { border-right-color: var(--pw-divider) !important; color: var(--pw-muted); }

/* Run bar: the status on the left; Run is the one solid button on the screen, flush right and full height. */
.main-footer .exec-status { padding: 0 0 0 16px; display: flex; align-items: center; }
.main-footer .exec-status .exec-result { display: inline-flex !important; align-items: center; gap: 8px; color: var(--pw-head-muted); font-size: 14px; }
.main-footer .exec-action, .dark-mode .main-footer .exec-action { top: 0; bottom: 0; width: auto; padding: 0; background: transparent; display: flex; }
.main-footer .exec-action .command-execute { height: 100%; margin: 0; padding: 0 24px; border: 0; font-family: var(--pw-font-head); font-size: 17px; display: inline-flex; align-items: center; gap: 8px; }

/* Layout menu: a hairline frame, square toggle, and the chosen layout marked with the teal bar and tint. */
.main-header .layout-menu { border: 1px solid var(--pw-divider); border-radius: 0; padding: 0; min-width: 300px; }
.main-header .layout-menu .dropdown-item-title { font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; color: var(--pw-accent-ink); margin: 0; }
.main-header .layout-menu .dropdown-divider { margin: 0; border-color: var(--pw-divider); }
.main-header .layout-menu a.dropdown-item { border-left: var(--pw-rule) solid transparent; padding: 10px 14px; }
.main-header .layout-menu a.dropdown-item .media { align-items: center; gap: 12px; }
.main-header .layout-menu a.dropdown-item svg { margin-top: 0 !important; flex: none; }
.main-header .layout-menu a.dropdown-item svg rect { rx: 0; }
.main-header .layout-menu a.dropdown-item h3.dropdown-item-title { text-transform: none; letter-spacing: 0; font-family: var(--pw-font-head); font-size: 17px; color: var(--pw-ink); }
.main-header .layout-menu a.dropdown-item p { margin: 0; color: var(--pw-muted); white-space: normal; }
.main-header .layout-menu a.dropdown-item:hover { background: var(--pw-raised); }
.main-header .layout-menu a.dropdown-item.is-current { border-left-color: var(--pw-accent); background: var(--pw-tint); }
.main-header .layout-menu .toggle span:before { border-radius: 0; width: 44px; height: 24px; background: var(--pw-neutral); border: 1px solid var(--pw-control-border); }
.main-header .layout-menu .toggle span:after { border-radius: 0; width: 18px; height: 18px; top: 3px; left: 3px; background: var(--pw-surface); border: 1px solid var(--pw-control-border); }
.main-header .layout-menu .toggle-code.is-code-view .toggle span:before { background: var(--pw-accent); border-color: var(--pw-accent); }
.main-header .layout-menu .toggle-code.is-code-view .toggle span:after { left: 23px; border-color: var(--pw-accent); }
/* The layout button turns teal while its menu is open. */
.main-header .layout-toggle.show > .nav-link { background: var(--pw-accent-strong); color: var(--pw-on-accent) !important; }
/* Dark mode turns the tab strip the other way round: the strip and inactive tabs are the lighter
   surface, and the active tab (with the option row beneath it) is the darker pane, its controls darker still. */
.dark-mode .content-wrapper .content-pane > .nav-tabs, .dark-mode .main-footer .exec-log > .nav-tabs { background: var(--pw-surface) !important; }
.dark-mode .content-wrapper .content-pane > .nav-tabs .nav-link.item-tab-link.active, .dark-mode .main-footer .exec-log > .nav-tabs .nav-link.active { background: var(--pw-raised); }
.dark-mode .content-wrapper .content-pane .content-options .form-control,
.dark-mode .content-wrapper .content-pane .content-options .btn,
.dark-mode .main-footer .exec-log .exec-log-options select.form-control { background: var(--pw-ground); }
.dark-mode .content-wrapper .content-pane .content-options .btn:hover { background: var(--pw-tint); }

/* Execution log rows: a quiet stripe that counts only the step rows (the folded-away detail rows
   in between no longer upset the pattern), lighter text, and slimmer timing bars. */
.main-footer .exec-log .exec-log-history .exec-log-history-entries table tbody > tr:nth-child(odd) > td { background: transparent; }
.main-footer .exec-log .exec-log-history .exec-log-history-entries table tbody > tr:nth-child(odd of :not(.table-inner-row)) > td { background: color-mix(in srgb, var(--pw-ink) 4%, transparent); }
.main-footer .exec-log .exec-log-history table td { font-weight: 400; }
.main-footer .exec-log .exec-log-history table th { font-weight: 500; }
.main-footer .exec-log .exec-log-history .log-entry-meter { top: 25% !important; height: 50% !important; }

/* "Hit Run" before the first run: on the canvas colour, a framed PDF mark with corner cross-hairs,
   a condensed title, the muted second line and the shortcut as a key chip. */
.content-wrapper .content-preview:not(.running):not(.failed):not(.loaded) .content-preview-none { height: 100%; display: flex; align-items: center; justify-content: center; background: var(--pw-neutral); }
.dark-mode .content-wrapper .content-preview .content-preview-none { background: var(--pw-ground); }
.content-wrapper .content-preview .none-wrapper, .dark-mode .content-wrapper .content-preview .none-wrapper { margin: 0; padding: 24px; width: auto; opacity: 1; font-size: inherit; color: var(--pw-ink); display: flex; flex-direction: column; align-items: center; gap: 14px; text-align: center; }
.content-wrapper .content-preview .none-wrapper .none-icon { position: relative; width: 84px; height: 84px; display: flex; align-items: center; justify-content: center; border: 1px solid var(--pw-divider); font-size: 36px; color: var(--pw-accent-ink); --pw-mark: var(--pw-muted); }
.content-wrapper .content-preview .none-wrapper .none-icon::before {
  content: ""; position: absolute; inset: -6px; pointer-events: none;
  background:
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px top 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px top 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 top 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) left 5px bottom 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) left 0 bottom 5px / 11px 1px,
    linear-gradient(var(--pw-mark), var(--pw-mark)) right 5px bottom 0 / 1px 11px, linear-gradient(var(--pw-mark), var(--pw-mark)) right 0 bottom 5px / 11px 1px;
  background-repeat: no-repeat;
}
.content-wrapper .content-preview .none-wrapper .none-msg1 { font-family: var(--pw-font-head); font-weight: 600; font-size: 28px; line-height: 1.1; color: var(--pw-ink); }
.content-wrapper .content-preview .none-wrapper .none-msg2 { margin-top: -10px; font-size: 15px; color: var(--pw-muted); }
.content-wrapper .content-preview .none-wrapper::after { content: "\2318 \21B5"; font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; color: var(--pw-muted); border: 1px solid var(--pw-divider); padding: 2px 8px; white-space: nowrap; }
/* Dark-mode execution log: Richard's colours. */
.dark-mode .main-footer .exec-log .exec-log-history, .dark-mode .main-footer .exec-log .exec-log-history table.table { background: #2f353d; }
.dark-mode .main-footer .exec-log .exec-log-history .exec-log-history-entries table tbody > tr:nth-child(odd of :not(.table-inner-row)) > td { background: color-mix(in srgb, #353b44 50%, transparent); }

/* Save state beside the template title: Saving… (spinner), ✓ Saved (muted, teal tick), and a failed
   save in amber with a Retry. */
.main-header.navbar .file-name :is(.file-saving, .file-saved, .file-saving-error) { align-items: center; margin-left: 12px; border-left: 0; padding: 0; font-size: 13px; font-weight: 400; white-space: nowrap; }
.main-header.navbar .file-name .file-saving, .main-header.navbar .file-name .file-saved { color: var(--pw-head-muted); }
/* All three sit on the same line as the title (jQuery's show() would make them blocks). */
.main-header.navbar .file-name :is(.file-saving, .file-saved, .file-saving-error):not([style*="none"]) { display: inline-flex !important; align-self: center; line-height: 1; }
.main-header.navbar .file-name :is(.file-saving, .file-saved) i { color: var(--pw-accent); font-size: 12px; }
.main-header.navbar .file-name .file-saved i { color: var(--pw-accent); font-size: 12px; }
.main-header.navbar .file-name .file-saving-error strong { font-weight: 600; }
.main-header.navbar .file-name .file-saving-retry { margin-left: 6px; color: var(--pw-warn) !important; text-decoration: underline; }
.main-header.navbar .file-name .file-saving-retry:hover { color: var(--pw-head-ink) !important; }
/* Run status: muted until a run succeeds, then a teal tick before "Success · pages · time". */
.main-footer .exec-status .exec-result-message { color: var(--pw-head-muted); }
.main-footer .exec-status:not(.exec-has-run) .exec-result-message { color: color-mix(in srgb, var(--pw-head-muted) 70%, transparent); }
.main-footer .exec-status.exec-has-run .exec-result-message::before { content: "\f058"; font-family: "Font Awesome 6 Free"; font-weight: 900; color: var(--pw-accent); margin-right: 6px; }

/* Code view: a slightly smaller face (14px, was 16px) on the same 24px leading, line numbers included. */
.content-wrapper .CodeMirror { font-size: 14px; line-height: 24px; }
.content-wrapper .CodeMirror .CodeMirror-linenumber { font-size: 14px; line-height: 24px; }
.main-header.navbar .file-name .file-saved { transition: opacity .4s ease; }
.main-header.navbar .file-name .file-saved.is-fading { opacity: 0; }

/* Opening a template: the highlight call-out from the designs, centred and pushed down the page -
   a teal label tab in its corner, then the spinner and message. A failed open is the same with a red label. */
.content-wrapper .editor-loading, .content-wrapper.failed .editor-loading-failed { position: relative; top: 0; max-width: 520px; height: auto; margin: 0 auto; padding: 0 0 20px; background: var(--pw-surface); border: 1px solid var(--pw-accent); border-radius: 0; color: var(--pw-ink); font-family: var(--pw-font); font-size: 18px; text-align: left; }
.content-wrapper.loading .editor-loading { display: block; }
.content-wrapper .editor-loading::before, .content-wrapper.failed .editor-loading-failed::before { display: block; width: max-content; margin-bottom: 18px; padding: 5px 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; content: "Loading"; background: var(--pw-accent); color: #1a1e23; }
.content-wrapper .editor-loading .loading-icon, .content-wrapper .editor-loading .loading-text { display: inline-block; vertical-align: middle; }
.content-wrapper .editor-loading .loading-icon { margin-left: 20px; }
.content-wrapper .editor-loading i.fa { font-size: 20px; margin-right: 12px; color: var(--pw-accent); }
.content-wrapper .editor-loading .loading-text { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; }
.content-wrapper.failed .editor-loading-failed { border-color: var(--pw-danger); padding: 0 20px 20px; font-size: 16px; line-height: 1.55; }
.content-wrapper.failed .editor-loading-failed::before { content: "Could not open"; margin-left: -20px; background: var(--pw-danger); color: #fff; }
.dark-mode .content-wrapper.failed .editor-loading-failed { color: var(--pw-ink); }
/* The space above the call-out is padding in the page area, so it doesn't collapse up and push the area itself down. */
.content-wrapper:is(.loading, .failed) > .actions-list { display: flow-root; padding: 18vh 20px 0; }

/* Field values pane: on the designer's canvas colour, so it doesn't merge with the tab strip. */
.content-wrapper .content-switch.content-fields { background: var(--pw-neutral); }
.dark-mode .content-wrapper .content-switch.content-fields { background: var(--pw-ground); }

/* Overlay grid: the Show overlay grid check box - an empty square, full teal with a black tick when on -
   and a teal opacity slider in its options dialog. */
.main-footer .exec-log .exec-show-overlay-grid input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 16px !important; height: 16px !important; min-height: 0; margin: 0 8px 0 0; padding: 0; border: 1.5px solid var(--pw-control-border); border-radius: 0; background: transparent; box-shadow: none; display: inline-grid; place-content: center; cursor: pointer; }
.main-footer .exec-log .exec-show-overlay-grid input[type="checkbox"]:checked { background: var(--pw-accent); border-color: var(--pw-accent); }
.main-footer .exec-log .exec-show-overlay-grid input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #1a1e23; border-bottom: 2px solid #1a1e23; transform: translateY(-1px) rotate(-45deg); }
.main-footer .exec-log .exec-show-overlay-grid input[type="checkbox"]:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }
.main-footer .exec-log .exec-show-overlay-grid .form-info-overlay-options { color: var(--pw-muted); margin-left: 6px; }
#dlgOverlayOptions input[type="range"] { accent-color: var(--pw-accent); background: transparent; border: 0; box-shadow: none; }

/* Designer canvas and Field values pane: Richard's background colours. */
.content-wrapper .content-switch.content-designer .custom-editor-background, .content-wrapper .content-switch.content-fields { background: #f5f8f9; }
.dark-mode .content-wrapper .content-switch.content-designer .custom-editor-background, .dark-mode .content-wrapper .content-switch.content-fields { background: #343a40; }

/* The Cancel (cross) on a pushed field form in the pane toolbar is a danger action. */
.content-wrapper .content-pane .content-options .btn.fields-pushed-cancel { color: var(--pw-danger); border-color: var(--pw-danger-border); }
.content-wrapper .content-pane .content-options .btn.fields-pushed-cancel:hover { background: var(--pw-danger-tint); border-color: var(--pw-danger); color: var(--pw-danger); }

/* Field forms in the designer (the Field values pane, and the fields panel in the Preview pane) look the same as
   in the Modify field values dialog. */
.content-wrapper :is(.content-fields, .content-preview-fields) :is(label, .col-form-label) { font-size: 14px; font-weight: 600; color: var(--pw-ink); }
.content-wrapper :is(.content-fields, .content-preview-fields) :is(.form-control, .custom-select) { border-radius: 0; background: var(--pw-raised); border: 1px solid var(--pw-control-border); color: var(--pw-ink); box-shadow: none; }
.content-wrapper :is(.content-fields, .content-preview-fields) :is(.form-control, .custom-select):focus { border-color: var(--pw-accent); box-shadow: none; }
.content-wrapper :is(.content-fields, .content-preview-fields) .form-control::placeholder { color: color-mix(in srgb, var(--pw-muted) 70%, transparent); }
.content-wrapper :is(.content-fields, .content-preview-fields) .input-group-text { border-radius: 0; background: var(--pw-neutral); border: 1px solid var(--pw-control-border); color: var(--pw-muted); }
.content-wrapper :is(.content-fields, .content-preview-fields) :is(.form-text, .text-muted, .text-desc) { color: var(--pw-muted) !important; }
.content-wrapper :is(.content-fields, .content-preview-fields) .form-control.is-invalid { border-color: var(--pw-danger) !important; box-shadow: inset 0 0 0 1px var(--pw-danger); }
.content-wrapper :is(.content-fields, .content-preview-fields) .asset-thumb { border-radius: 0 !important; background: var(--pw-raised); border: 1px solid var(--pw-divider); }
.content-wrapper :is(.content-fields, .content-preview-fields) span.required { color: var(--pw-danger); }

/* Lists in field forms (and in dialogs): no box round each item - one hairline between items, with a rule
   across the top. A table-style list's heading row already carries that top rule. Borders use the divider
   colour, which in dark mode is far quieter than Bootstrap's own. */
:is(.modal, .content-fields, .content-preview-fields) .border { border-color: var(--pw-divider) !important; }
:is(.modal, .content-fields, .content-preview-fields) .rounded { border-radius: 0 !important; }
:is(.modal, .content-fields, .content-preview-fields) :is(.form-list-entries, .form-map-markers-entries) { border-top: 1px solid var(--pw-divider); }
:is(.modal, .content-fields, .content-preview-fields) .form-list-entries:has(> .form-table-header-row) { border-top: 0; }
:is(.modal, .content-fields, .content-preview-fields) .form-table-header-row { border-bottom: 1px solid var(--pw-divider) !important; margin-bottom: 0 !important; color: var(--pw-muted); }
:is(.modal, .content-fields, .content-preview-fields) .form-list-entry { border: 0 !important; border-bottom: 1px solid var(--pw-divider) !important; border-radius: 0 !important; margin: 0 !important; padding-top: 6px !important; padding-bottom: 6px !important; background: transparent; }
:is(.modal, .content-fields, .content-preview-fields) .form-list-add-entry { margin-top: 10px !important; }
:is(.modal, .content-fields, .content-preview-fields) .form-single-inline-group { border-left: 0 !important; border-right: 0 !important; border-radius: 0 !important; }

/* List groups and tables inside dialogs follow the same pattern: a top rule, hairlines between rows, no side edges. */
.modal .list-group { border-radius: 0; border-top: 1px solid var(--pw-divider); }
.modal .list-group > .list-group-item { border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--pw-divider); border-radius: 0 !important; margin: 0; }
.modal .table { border-color: var(--pw-divider); color: var(--pw-ink); }
.modal .table :is(th, td) { border-left: 0 !important; border-right: 0 !important; border-color: var(--pw-divider) !important; }

/* Template page: Modify Values (above the field list) in the plain bordered button style. */
.pages-view .pam-param-card .card-action { top: 0 !important; right: 0 !important; }
.pages-view .pam-param-card .btn.modify-parameter { width: auto !important; height: 32px !important; padding: 0 12px !important; display: inline-flex; align-items: center; gap: 2px; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border) !important; color: var(--pw-ink) !important; font-family: var(--pw-font-head); font-weight: 600; font-size: 14px; }
.pages-view .pam-param-card .btn.modify-parameter .btn-text { display: inline !important; }
.pages-view .pam-param-card .btn.modify-parameter i { color: var(--pw-accent-ink); }
.pages-view .pam-param-card .btn.modify-parameter:hover { background: var(--pw-tint); border-color: var(--pw-accent) !important; color: var(--pw-accent-ink) !important; }

/* Designer editing marks in teal, not CKEditor's cyan-blue. CKEditor's own focus and selection colours are its
   variables (set on body, so they reach the editor and its floating panels); our field chips, Repeats badges
   and repeating-region outlines get their own --pw-field-* variables. The page itself stays white in both
   themes, so these keep their light values. Only marks drawn while designing change - not template output. */
body {
  --pw-field-ink: #078886;
  --pw-field-edge: #0bb3b0;
  --pw-field-tint: #e3f6f5;
  --pw-field-select: #c6eeec;
  --ck-color-focus-border: var(--pw-field-edge);
  --ck-color-focus-outer-shadow: rgba(11, 179, 176, .25);
  --ck-color-focus-disabled-shadow: rgba(11, 179, 176, .3);
  --ck-color-widget-editable-focus-background: #ffffff;
  --ck-color-widget-type-around-button-active: var(--pw-field-edge);
  --ck-color-widget-type-around-button-hover: var(--pw-field-edge);
  --ck-color-table-focused-cell-background: rgba(11, 179, 176, .10);
  --ck-color-selector-focused-cell-background: rgba(11, 179, 176, .14);
  --ck-table-selected-cell-background: rgba(11, 179, 176, .14);
  --ck-color-table-caption-highlighted-background: var(--pw-field-tint);
  --ck-color-image-caption-highlighted-background: var(--pw-field-tint);
  --ck-color-widget-blurred-border: #b6e3e1;
  --ck-color-base-active: var(--pw-field-edge);
  --ck-color-base-active-focus: #099c99;
  --ck-color-button-action-background: var(--pw-field-edge);
  --ck-color-link-selected-background: rgba(11, 179, 176, .12);
}
var.merge-field, .ck-content var.merge-field, .word-content var.merge-field { border-color: var(--pw-field-edge); }
.word-merge-pill { border-color: var(--pw-field-edge); }
.word-merge-pill:hover { background: var(--pw-field-select); }
.ck-content .each-block { border-color: var(--pw-field-edge); }
.ck-content .each-block::before,
.ck-content :is(td, th, li).each-repeat-cell::before { color: var(--pw-field-ink); background: var(--pw-field-tint); border-color: var(--pw-field-edge); }
.ck-content :is(tr, li).each-repeat-row { outline-color: var(--pw-field-edge); }
.ck-content tr.each-repeat-row > :is(td, th), .ck-content li.each-repeat-row { background: color-mix(in srgb, var(--pw-field-tint) 55%, #fff); }

/* "Only my templates" on the public list: the same square check box as the overlay grid's. */
.pages-view .pam-filter-mine { display: flex; align-items: center; gap: 8px; margin: 0 0 12px; font-size: 14px; font-weight: 400; color: var(--pw-ink); cursor: pointer; white-space: nowrap; }
.pages-view .dropdown-menu .pam-filter-mine { margin: 0; padding: 8px 16px; }
.pages-view .pam-filter-mine input[type="checkbox"] { -webkit-appearance: none; appearance: none; flex: none; width: 16px; height: 16px; margin: 0; border: 1.5px solid var(--pw-control-border); border-radius: 0; background: transparent; display: inline-grid; place-content: center; cursor: pointer; }
.pages-view .pam-filter-mine input[type="checkbox"]:checked { background: var(--pw-accent); border-color: var(--pw-accent); }
.pages-view .pam-filter-mine input[type="checkbox"]:checked::after { content: ""; width: 9px; height: 5px; border-left: 2px solid #1a1e23; border-bottom: 2px solid #1a1e23; transform: translateY(-1px) rotate(-45deg); }
.pages-view .pam-filter-mine input[type="checkbox"]:focus-visible { outline: 2px solid var(--pw-accent); outline-offset: 2px; }

/* Below 992px the logo opens the menu. The separate menu (bars) link is only hidden while the page carries
   sidebar-collapse, and closing the designer can leave the page without it - so the bars stacked on top of the
   logo until the next navigation. Outside the designer it is never needed. */
@media (max-width: 991.98px) {
  body:not(.editing) .main-header .bars-link { display: none !important; }
}

/* ---------- Blueprints ---------- */
/* List and grid cards: tags as small squares. */
.pages-view .template-set .pam-tags .pw-tag { font-size: 12px; padding: 1px 7px; margin: 0 4px 0 0; }
.pages-view .template-set .card .pam-tags { margin: 0; }

/* The blueprint page uses the template page's layout (it also carries template-view). Its sections - added by
   portal admins - read like the other cards: a condensed heading (with the section's own icon, in teal), then the
   body panel. While editing, the fields are square and the actions sit at the right. */
.pages-view.reference-view .sample-desc-card .card-desc-icon { display: inline-block !important; color: var(--pw-accent-ink); margin-right: 4px; }
.pages-view.reference-view .sample-desc-card > div.card-header,
.pages-view.reference-view .card-desc-edit > .card-header { background: transparent !important; border: 0; padding: 0 0 12px; }
.pages-view.reference-view .sample-desc-card > div.card-header h4 { display: flex; align-items: center; gap: 12px; margin: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 24px; color: var(--pw-ink); }
.pages-view.reference-view .sample-desc-card > div.card-header h4::before { content: ""; flex: none; width: 22px; height: 2px; background: var(--pw-accent); }
.pages-view.reference-view .sample-desc-card .card-desc-content { color: var(--pw-ink); line-height: 1.55; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-control { border-radius: 0; background: var(--pw-raised); border: 1px solid var(--pw-control-border); color: var(--pw-ink); box-shadow: none; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-control:focus { border-color: var(--pw-accent); }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-row { margin-left: 0; margin-right: 0; gap: 12px; flex-wrap: nowrap; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-row > .form-control { margin: 0 !important; max-width: none; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-row > #sectionIconValue { flex: 0 0 30%; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) .form-row > #sectionTitleValue { flex: 1 1 auto; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) textarea.form-control { min-height: 120px; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) > .card-footer { display: flex; justify-content: flex-end; }
/* Kept weaker than editor.css's show/hide-while-editing rules (:where adds no weight). */
:where(.pages-view.reference-view) .card-desc-sample-actions > .reading { display: flex; gap: 8px; }
.reference-view.is-editing .card.is-editing .card-desc-sample-actions > .edit { display: flex; gap: 8px; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) > .card-footer .btn { width: 40px; height: 40px; padding: 0; display: inline-flex; align-items: center; justify-content: center; margin: 0; }
.pages-view.reference-view :is(.sample-desc-card, .card-desc-edit) > .card-footer .btn i.shadow { box-shadow: none !important; }
.pages-view.reference-view .card-desc-edit > .card-footer { gap: 8px; }
.pages-view.reference-view .card-desc-new { margin: 0 0 24px; }
/* The section editor (CKEditor) while a section is edited, and the section's HTML when it is shown. */
.pages-view.reference-view .card .ck.ck-editor { margin-top: 8px; }
.pages-view.reference-view .card .ck.ck-editor .ck-editor__editable { min-height: 180px; border-radius: 0; }
.pages-view.reference-view .card .ck.ck-editor .ck-toolbar { border-radius: 0; }
.pages-view.reference-view .card-desc-content > :first-child { margin-top: 0; }
.pages-view.reference-view .card-desc-content :is(h2, h3) { font-family: var(--pw-font-head); font-weight: 600; color: var(--pw-ink); margin: 18px 0 8px; }
.pages-view.reference-view .card-desc-content h2 { font-size: 22px; }
.pages-view.reference-view .card-desc-content h3 { font-size: 18px; }
.pages-view.reference-view .card-desc-content :is(ul, ol) { padding-left: 22px; }
.pages-view.reference-view .card-desc-content a { color: var(--pw-accent-ink); text-decoration: underline; }
.pages-view.reference-view .card-desc-content table { border-collapse: collapse; margin: 12px 0; max-width: 100%; }
.pages-view.reference-view .card-desc-content :is(td, th) { border: 1px solid var(--pw-divider); padding: 6px 10px; vertical-align: top; }
.pages-view.reference-view .card-desc-content th { background: var(--pw-raised); font-weight: 600; }
.pages-view.reference-view .card-desc-content figure.table { margin: 12px 0; display: block; }

/* Portal configuration: each group's Edit button on one line (icon beside the word). */
.pages-view.portal-configuration-view .config-group .group-edit-btn { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; flex: none; width: auto !important; height: 32px; padding: 0 12px !important; white-space: nowrap; }
.pages-view.portal-configuration-view .config-group .group-edit-btn i { margin: 0; }

/* ---------- Licence: accept an invite ---------- */
.pages-view.license-accept-view .row-loading { color: var(--pw-muted); }
/* A problem (no invites, already licensed, couldn't load) as an amber call-out, not a filled box. */
.pages-view.license-accept-view .row-error .info-box { min-height: 0; margin: 0 0 24px; padding: 14px 18px; display: flex; align-items: flex-start; gap: 14px; background: var(--pw-warn-tint) !important; border: 1px solid var(--pw-warn); border-radius: 0; box-shadow: none; color: var(--pw-ink) !important; }
.pages-view.license-accept-view .row-error .info-box .info-box-icon { width: auto !important; height: auto; padding: 2px 0 0 !important; background: transparent !important; color: var(--pw-warn-ink); font-size: 18px; flex: none; }
.pages-view.license-accept-view .row-error .info-box .info-box-content { padding: 0 !important; }
.pages-view.license-accept-view .row-error .info-box .msg { display: block; font-size: 15px; font-weight: 600; color: var(--pw-ink); white-space: normal; }
.pages-view.license-accept-view .row-error .info-box .msg-details { display: block; font-size: 14px; color: var(--pw-muted); white-space: normal; }

/* Signed out: the explanation, then the sign-in options as a ruled list. */
.pages-view.license-accept-view .row-anon p { color: var(--pw-ink); line-height: 1.55; }
.pages-view:is(.license-accept-view, .login-view) .auth-list { border-top: 1px solid var(--pw-divider); }
.pages-view:is(.license-accept-view, .login-view) .auth-list > .list-group-item { background: transparent; border-left: 0; border-right: 0; border-top: 0; border-bottom: 1px solid var(--pw-divider); border-radius: 0; padding: 14px 0; color: var(--pw-ink); }
.pages-view:is(.license-accept-view, .login-view) .auth-list > .list-group-item p { margin: 6px 0 0; font-size: 14px; color: var(--pw-muted); }
.pages-view:is(.license-accept-view, .login-view) .auth-list .btn-lg { display: inline-flex; align-items: center; gap: 8px; height: 42px; padding: 0 18px; font-size: 16px; border-radius: 0; background: var(--pw-surface); border: 1px solid var(--pw-control-border); color: var(--pw-ink); }
.pages-view:is(.license-accept-view, .login-view) .auth-list .btn-lg i { color: var(--pw-accent-ink); }
.pages-view:is(.license-accept-view, .login-view) .auth-list .btn-lg:hover { background: var(--pw-tint); border-color: var(--pw-accent); color: var(--pw-accent-ink); }
.pages-view:is(.license-accept-view, .login-view) .auth-email-form .form-control { border-radius: 0; background: var(--pw-raised); border: 1px solid var(--pw-control-border); color: var(--pw-ink); }
.pages-view:is(.license-accept-view, .login-view) .auth-email-form label { font-size: 13px; font-weight: 600; color: var(--pw-ink); }

/* Signed in: like the My Templates listing - a "Your Invites" heading, the summary and note, then each invite
   as a card with its role as a call-out tab, the sender, the offer, a rule, when it was sent, and big buttons. */
.pages-view.license-accept-view .invite-head { margin-bottom: 8px; }
.pages-view.license-accept-view .invite-summary { font-size: 17px; color: var(--pw-ink); margin: 0 0 6px; }
.pages-view.license-accept-view .invite-note { font-size: 14px; line-height: 1.55; color: var(--pw-muted); margin: 0 0 18px; }
.pages-view.license-accept-view .invite-note strong { color: var(--pw-ink); }
.pages-view.license-accept-view .invite-list { display: flex; flex-direction: column; gap: 16px; }
.pages-view.license-accept-view .invite-item { background: var(--pw-surface); border: 1px solid var(--pw-divider); border-radius: 0; }
.pages-view.license-accept-view .invite-item.is-active { border-color: var(--pw-tint-border); }
.pages-view.license-accept-view .invite-role { display: inline-block; padding: 5px 12px; font-size: 11px; font-weight: 600; letter-spacing: 1.3px; text-transform: uppercase; background: var(--pw-accent); color: #1a1e23; }
.pages-view.license-accept-view .invite-item.is-inactive .invite-role { background: var(--pw-muted); color: var(--pw-surface); }
.pages-view.license-accept-view .invite-body { padding: 14px 20px 18px; }
.pages-view.license-accept-view .invite-from { font-family: var(--pw-font-head); font-weight: 600; font-size: 22px; line-height: 1.2; margin: 0 0 6px; color: var(--pw-ink); overflow-wrap: anywhere; }
.pages-view.license-accept-view .invite-desc { margin: 0; font-size: 15px; line-height: 1.55; color: var(--pw-ink); }
.pages-view.license-accept-view .invite-rule { margin: 14px 0 12px; border: 0; border-top: 1px solid var(--pw-divider); }
.pages-view.license-accept-view .invite-foot { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 12px; }
.pages-view.license-accept-view .invite-date { font-size: 13px; color: var(--pw-muted); }
.pages-view.license-accept-view .invite-actions { display: flex; gap: 10px; margin-left: auto; }
.pages-view.license-accept-view .invite-actions .btn { display: inline-flex; align-items: center; gap: 8px; height: 46px; padding: 0 26px; border-radius: 0; font-family: var(--pw-font-head); font-weight: 600; font-size: 17px; }
.pages-view.license-accept-view .invite-item.is-inactive { color: var(--pw-muted); }
.pages-view.license-accept-view .invite-list .toggle-inactive .btn-link { padding: 0; color: var(--pw-accent-ink); font-weight: 500; }
@media (max-width: 575.98px) {
  .pages-view.license-accept-view .invite-actions { width: 100%; }
  .pages-view.license-accept-view .invite-actions .btn { flex: 1 1 0; justify-content: center; }
}
.pages-view.license-accept-view .pw-page-desc .invite-summary { display: block; font-size: 17px; color: var(--pw-ink); margin: 0 0 6px; }
.pages-view.license-accept-view .pw-page-desc .invite-note { display: block; margin: 0; }
.pages-view.license-accept-view .row-details { margin-top: 8px; }

/* Home: the outstanding-invitations notice - a teal-edged call-out with a properly sized icon. */
.pages-view .welcome-invites-outstanding .info-box { display: flex; align-items: center; gap: 16px; min-height: 0; margin: 0; padding: 14px 18px; background: var(--pw-tint) !important; border: 1px solid var(--pw-tint-border); border-radius: 0; box-shadow: none; }
.pages-view .welcome-invites-outstanding .info-box .info-box-icon { width: auto !important; height: auto; padding: 0 !important; background: transparent !important; font-size: 28px; color: var(--pw-accent-ink); flex: none; }
.pages-view .welcome-invites-outstanding .info-box .info-box-content { flex: 1 1 auto; display: flex !important; flex-direction: row; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px 16px; padding: 0 !important; }
.pages-view .welcome-invites-outstanding .info-box .info-box-text { font-size: 15px; font-weight: 600; color: var(--pw-ink); }
.pages-view .welcome-invites-outstanding .info-box .info-box-number { margin: 0; }
.pages-view .welcome-invites-outstanding .info-box .btn { height: 36px; display: inline-flex; align-items: center; padding: 0 16px; font-size: 15px; }

/* A teal button that is a link (<a class="btn btn-success">) keeps the button's text colour - page and panel link
   colours (teal) were winning, leaving teal text on a teal button. */
:is(.pages-view, .modal, .dropdown-menu, .main-header .user-actions) a.btn:is(.btn-primary, .btn-success),
:is(.pages-view, .modal, .dropdown-menu, .main-header .user-actions) a.btn:is(.btn-primary, .btn-success):hover { color: var(--pw-on-accent) !important; text-decoration: none; }
/* Sign-in providers not available yet: disabled, and marked Coming soon. */
.pages-view:is(.license-accept-view, .login-view) .auth-list .btn-lg:disabled { opacity: .5; cursor: not-allowed; background: var(--pw-surface); border-color: var(--pw-divider); color: var(--pw-muted); }
.pages-view:is(.license-accept-view, .login-view) .auth-list .btn-lg:disabled i { color: var(--pw-muted); }
.pages-view:is(.license-accept-view, .login-view) .auth-list .auth-coming-soon { font-weight: 600; color: var(--pw-warn-ink); }

/* ---------- Sign in (/login) ---------- */
.pages-view.login-view .row-title { margin-bottom: 8px; }
.pages-view.login-view .pw-section-title { margin-bottom: 12px; }
.pages-view.login-view .login-can { padding-left: 20px; margin: 0 0 16px; color: var(--pw-ink); line-height: 1.7; }
.pages-view.login-view .login-note { font-size: 14px; color: var(--pw-muted); line-height: 1.55; font-style: normal; }
.pages-view.login-view .login-about { margin-bottom: 24px; }
.pages-view.login-view .auth-list .not-available { display: block; margin-top: 2px; font-weight: 600; color: var(--pw-warn-ink); }
/* viewMgr disables the providers that aren't ready with the .disabled class as well as the attribute. */
.pages-view.login-view .auth-list .btn-lg:is(:disabled, .disabled) { opacity: .5; cursor: not-allowed; background: var(--pw-surface); border-color: var(--pw-divider); color: var(--pw-muted); }
.pages-view.login-view .auth-list .btn-lg:is(:disabled, .disabled) i { color: var(--pw-muted); }