/* Scale: everything is ~60% of the first build (body text ~75% so it stays readable).
   To resize the whole CMS again, change --ui below and the px values in :root. */
:root {
  --ink: #3e4a6b;
  --ink-soft: #7a84a0;
  --line: #d5d8e2;
  --green: #3a8a2e;
  --green-dark: #2e7024;
  --red: #c8333f;
  --side: #7b7b7b;
  --side-line: #666;
  --side-dark: #383838;
  --brand-bg: #2d2d2d;
  --user-bg: #c3c3c3;
  --bg: #fff;
  --panel: #f6f7fa;
  --focus: #1b6fd1;

  --side-w: 210px;
  --head-h: 64px;
  --nav-h: 44px;
  --fs: 12px;        /* body text */
  --fs-sm: 10.5px;   /* hints, small print */
}
* { box-sizing: border-box; }
html { font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; color: var(--ink); background: var(--bg); }
@media (prefers-reduced-motion: no-preference) { html { scroll-behavior: smooth; } }
body { margin: 0; font-size: var(--fs); line-height: 1.45; }
a { color: var(--ink); }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; }
h1, h2 { font-weight: 400; margin: 0; }
h2 { font-size: 14px; font-weight: 600; margin-bottom: 8px; }
.muted { color: var(--ink-soft); }
.small { font-size: var(--fs-sm); }
.ok { color: var(--green); }
code { background: var(--panel); padding: 1px 4px; border-radius: 3px; word-break: break-all; }

/* brand (matches the supplied mock-up) */
.brand { background: var(--brand-bg); color: #fff; padding: 12px 14px; font: 700 21px/1 Georgia, "Times New Roman", serif; letter-spacing: -.3px; }
.brand .b3 { color: var(--red); }

/* layout */
.cms { display: grid; grid-template-columns: var(--side-w) 1fr; min-height: 100vh; }
.sidebar { background: var(--side); color: #fff; display: flex; flex-direction: column; }
.userbar { background: var(--user-bg); border-bottom: 3px solid var(--green); display: flex; align-items: center; justify-content: space-between; padding: 0 12px; height: var(--head-h); }
.userbar form { margin: 0; }
.userbar-name { color: #fff; text-decoration: none; display: flex; gap: 8px; align-items: center; font-size: 13px; min-width: 0; }
.userbar-name span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.icon-btn { background: none; border: 0; color: #fff; font-size: 14px; cursor: pointer; padding: 4px; }
.nav-item { display: flex; align-items: center; gap: 10px; color: #fff; text-decoration: none; font-size: 13px; height: var(--nav-h); padding: 0 12px; border-bottom: 1px solid var(--side-line); position: relative; }
.nav-item i { width: 18px; text-align: center; color: #e9e9e9; font-size: 13px; }
.nav-item:hover { background: #6e6e6e; }
.nav-item.is-active { background: var(--side-dark); }
.nav-item.is-active::after { content: ""; position: absolute; right: 0; top: 6px; bottom: 6px; width: 12px; background: var(--green); }

.main { min-width: 0; }
.topbar { height: var(--head-h); border-bottom: 1px solid var(--line); display: flex; align-items: center; gap: 14px; padding: 0 24px; flex-wrap: wrap; }
.topbar h1 { font-size: 18px; }
.menu-toggle { display: none; color: var(--ink); }
.siteinfo { margin-left: auto; display: flex; align-items: center; gap: 10px; font-size: var(--fs); flex-wrap: wrap; }
.siteinfo img { border-radius: 2px; width: 16px; height: 16px; }
.content { padding: 16px 24px 32px; max-width: 760px; }
.content:has(.table) { max-width: 960px; }

/* controls */
.btn { display: inline-flex; align-items: center; gap: 6px; background: var(--green); color: #fff; border: 0; border-radius: 2px; font: inherit; font-size: 12px; padding: 6px 12px; cursor: pointer; text-decoration: none; }
.btn:hover { background: var(--green-dark); }
.btn-small { font-size: 11px; padding: 3px 8px; }
.btn-secondary { background: #5d6a8a; }
.btn-secondary:hover { background: #4a5671; }
.btn-danger { background: var(--red); }
.btn-danger:hover { background: #a82934; }
.btn-link { background: none; color: var(--ink); text-decoration: underline; }
.btn-link:hover { background: none; }
.toolbar { margin-bottom: 14px; display: flex; gap: 10px; align-items: center; }
form.inline { display: inline; }

label { display: block; margin-bottom: 10px; font-size: var(--fs); font-weight: 600; }
label img { width: 14px; height: 14px; vertical-align: middle; }
input:not([type=radio]):not([type=checkbox]):not([type=file]), select { display: block; width: 100%; margin-top: 3px; font: inherit; font-weight: 400; color: var(--ink); padding: 5px 7px; border: 1px solid #aeb4c6; border-radius: 2px; background: #fff; }
input[type=file] { display: block; margin-top: 3px; font-weight: 400; font-size: var(--fs-sm); }
fieldset { border: 0; padding: 0; margin: 0 0 10px; }
legend { font-weight: 600; font-size: var(--fs); padding: 0; margin-bottom: 4px; }
label.radio { display: flex; gap: 7px; align-items: flex-start; font-weight: 400; margin-bottom: 6px; }
label.radio input { margin-top: 2px; }
.member-groups { margin: 0 0 6px 24px; }                    /* Add user: the user groups under “Member of user groups” */
/* user groups: the shield on private pages and sections uses the padlock's look (.node-add.node-lock) in the tree and the normal icon colour elsewhere */
.split-private { margin: 12px 0; }
.page-private .check, .split-private .check { margin: 4px 0; }                            /* site tree: a private page or section (user groups) */
.hint { display: block; font-weight: 400; font-size: var(--fs-sm); color: var(--ink-soft); margin-top: 2px; }
.block.has-problem > .block-bar { background: #fbeaec; border-color: var(--red); }
input.is-invalid { border-color: var(--red) !important; box-shadow: 0 0 0 1px var(--red); }
.field-error { display: block; color: var(--red); font-weight: 400; font-size: var(--fs-sm); margin-top: 2px; }
.form-actions { display: flex; gap: 10px; align-items: center; margin-top: 12px; }
.form-narrow { max-width: 320px; }
.panel { background: var(--panel); border: 1px solid var(--line); border-radius: 3px; padding: 12px 14px; margin-bottom: 14px; }
.panel form + form { margin-top: 8px; }
.two-col { display: grid; grid-template-columns: minmax(0, 340px) minmax(0, 1fr); gap: 14px; align-items: start; }
.three-col { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; align-items: start; }
.three-col > .panel { margin: 0; }
/* two equal columns inside a panel (Branding), one below 900px */
.split-2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px 28px; align-items: start; }
.split-2 h3 { margin-top: 0; }
@media (max-width: 900px) { .split-2 { grid-template-columns: 1fr; } }
@media (max-width: 1200px) { .three-col { grid-template-columns: 1fr 1fr; } }
.empty { padding: 20px; border: 1px dashed var(--line); border-radius: 3px; color: var(--ink-soft); }

.flash { padding: 7px 10px; border-radius: 2px; margin-bottom: 12px; border-left: 3px solid; word-break: break-word; }
.flash-success { background: #e9f5e7; border-color: var(--green); }
.flash-error { background: #fbeaec; border-color: var(--red); }
.flash-info { background: #eaf0fb; border-color: var(--focus); }

/* tables */
.table-wrap { overflow-x: auto; }
.table { width: 100%; border-collapse: collapse; }
.table th { text-align: left; font-weight: 600; padding: 5px 8px; border-bottom: 1px solid var(--line); white-space: nowrap; }
.table td { padding: 6px 8px; border-bottom: 1px solid var(--line); vertical-align: middle; }
.table tr:hover td { background: #fafbfd; }
.table .is-disabled td { color: var(--ink-soft); }
.actions-col { text-align: right; white-space: nowrap; }
.row-title { display: inline-flex; gap: 6px; align-items: center; font-weight: 600; text-decoration: none; }
.row-title img { width: 14px; height: 14px; }
.badge { display: inline-block; font-size: 10px; padding: 1px 7px; border-radius: 99px; background: #e4e7ef; }
/* role tints */
.badge-superdev { background: #1a1a1a; color: #fff; }
.badge-dev { background: #f8d0d0; }
.badge-support { background: #fbe0c4; }
.badge-designer { background: #fbf2b8; }
.badge-superadmin { background: #d6f0cf; }
.badge-admin { background: #cfeff1; }
.badge-editor { background: #d7e6f8; }
.badge-status { background: #eee; color: #555; margin-left: 6px; }
.activity { padding-left: 14px; margin: 0; }

/* page tree */
.tree, .tree ul { list-style: none; padding-left: 16px; margin: 0; }
.tree > li { padding-left: 0; }
.tree li { padding: 3px 0; font-size: 13px; }
.tree li > i { width: 16px; text-align: center; }
.tree .small { margin-left: 6px; }

/* modal */
.modal { border: 0; border-radius: 4px; padding: 16px; max-width: 300px; width: calc(100% - 24px); color: var(--ink); text-align: left; white-space: normal; font-size: var(--fs); }
.modal::backdrop { background: rgba(30, 34, 50, .55); }
.modal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 10px; }
.split-dialog { max-width: 820px; }
.split-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 0 16px; align-items: start; }
@media (max-width: 760px) { .split-fields { grid-template-columns: 1fr; } }
.split-dialog h2 { margin-top: 0; }
.section-address-field { grid-column: 1 / -1; margin-top: 4px; }
.section-addresses .set-list { margin-top: 0; }

/* sign-in */
.auth-body { background: #ececf0; display: grid; place-items: center; min-height: 100vh; margin: 0; padding: 12px; }
.auth-card { background: #fff; border-radius: 4px; padding: 20px; width: 100%; max-width: 280px; box-shadow: 0 1px 8px rgba(0,0,0,.12); }
.auth-card .btn { width: 100%; justify-content: center; }
.auth-card .btn-link { width: auto; }
.auth-h { font-size: 16px; margin-bottom: 10px; }
.qr { background: #fff; padding: 6px; display: inline-block; margin: 4px 0; }

@media (max-width: 900px) {
  .cms { grid-template-columns: 1fr; }
  .sidebar { display: none; }
  .sidebar.is-open { display: flex; }
  .menu-toggle { display: inline-block; }
  .topbar, .content { padding-left: 14px; padding-right: 14px; }
  .topbar { height: auto; min-height: 52px; padding-top: 8px; padding-bottom: 8px; }
  .siteinfo { margin-left: 0; }
  .two-col, .three-col { grid-template-columns: 1fr; }
}
@media (prefers-reduced-motion: no-preference) { .nav-item { transition: background .15s; } }

/* ---------- iteration 2: pages, assets, editor ---------- */
.count-badge { margin-left: auto; margin-right: 18px; background: var(--red); color: #fff; border-radius: 99px; font-size: 10px; min-width: 17px; height: 17px; display: grid; place-items: center; padding: 0 5px; }
.mt { margin-top: 18px; }
.wide-left { grid-template-columns: minmax(0, 1fr) minmax(0, 260px); }
.content:has(.edit-grid), .content:has(.wide-left) { max-width: 1060px; }
.edit-grid { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 14px; align-items: start; }
fieldset.bare { border: 0; padding: 0; margin: 0; min-width: 0; }
.page-head { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.form-narrow.wide { max-width: 520px; }
.indent { margin-left: 22px; }
.two-inputs { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
label.check { display: flex; gap: 6px; align-items: center; font-weight: 400; }
textarea { display: block; width: 100%; margin-top: 3px; font: inherit; font-weight: 400; color: var(--ink); padding: 5px 7px; border: 1px solid #aeb4c6; border-radius: 2px; background: #fff; resize: vertical; }
.inline-input { display: inline-block !important; width: auto !important; margin: 0 6px 0 0 !important; }
.wide-input { min-width: 240px; }
.block, details { scroll-margin-top: 12px; }        /* the small gap above a panel that has scrolled to the top */
.sticky-actions { position: sticky; bottom: 0; background: #fff; padding: 8px 0; border-top: 1px solid var(--line); }
small, .hint { line-height: 1.35; }

/* tree */
.tree-list { list-style: none; margin: 0; padding-left: 18px; }
.tree-root { padding-left: 0; }
.node-row { display: flex; align-items: center; gap: 8px; padding: 4px 0; }
.node-row i:first-of-type { width: 14px; text-align: center; }
.node-title { font-size: 13px; text-decoration: none; font-weight: 600; }
.node-title:hover { text-decoration: underline; }
.node-path { margin-left: 2px; }
.node-row input[type=checkbox] { display: none; }
.batch-on .node-row input[type=checkbox] { display: inline-block; }
.batch-bar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: 8px 12px; }
.batch-bar select { width: auto; margin: 0; padding: 4px 6px; font: inherit; border: 1px solid #aeb4c6; border-radius: 2px; }
.small-icon { font-size: 11px; color: var(--ink); padding: 3px 5px; }
.badge-draft { background: #eee; color: #555; }
.badge-scheduled { background: #fdf0d2; }
.badge-live { background: #dff0dc; }
.badge-expired { background: #f5dcdc; }
.badge-archived { background: #d9d9d9; color: #555; }
.badge-pending { background: #d7e6f8; }
.is-unread td { font-weight: 700; }
.message-body { white-space: normal; background: #fff; border: 1px solid var(--line); padding: 10px; border-radius: 3px; }
.reject-form { display: inline-flex; align-items: center; }

/* assets */
.crumbs { margin-bottom: 12px; font-size: var(--fs); }
.folder-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; margin-bottom: 14px; }
.folder { display: flex; align-items: center; justify-content: space-between; border: 1px solid var(--line); border-radius: 3px; padding: 6px 8px; background: var(--panel); position: relative; }
.folder a { text-decoration: none; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.folder-menu summary { list-style: none; cursor: pointer; }
.folder-menu__panel { position: absolute; z-index: 5; right: 0; top: 100%; width: 210px; background: #fff; border: 1px solid var(--line); padding: 10px; box-shadow: 0 2px 8px rgba(0,0,0,.15); border-radius: 3px; }
.folder-menu__panel form { margin: 0; }
.folder-menu__panel form + form { margin-top: 10px; padding-top: 10px; border-top: 1px solid var(--line); }
.folder-menu__panel label { margin-bottom: 8px; }
.asset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); gap: 10px; }
.asset-card { display: flex; flex-direction: column; gap: 3px; text-decoration: none; border: 1px solid var(--line); border-radius: 3px; padding: 6px; background: #fff; }
.asset-card:hover, .asset-card.is-chosen { border-color: var(--green); box-shadow: 0 0 0 2px var(--green) inset; }
.asset-thumb { display: grid; place-items: center; aspect-ratio: 4 / 3; background: var(--panel); overflow: hidden; font-size: 22px; color: var(--ink-soft); border-radius: 2px; }
.asset-thumb img { width: 100%; height: 100%; object-fit: cover; }
.asset-thumb.small { width: 44px; aspect-ratio: 1; flex: none; font-size: 14px; }
.asset-name { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.focal-wrap { position: relative; display: inline-block; cursor: crosshair; max-width: 100%; }
.focal-wrap img { display: block; max-width: 100%; max-height: 380px; }
.focal-dot { position: absolute; width: 16px; height: 16px; margin: -8px 0 0 -8px; border: 2px solid #fff; border-radius: 50%; background: rgba(200, 51, 63, .85); box-shadow: 0 0 0 1px #000; pointer-events: none; }
.set-list { list-style: none; padding: 0; margin: 14px 0 0; }
.set-list li, .set-plain li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px solid var(--line); }
.set-plain { list-style: none; padding: 0; margin: 0; }
.grow { flex: 1; min-width: 0; }
.picker { max-width: 640px; width: calc(100% - 24px); max-height: 80vh; overflow: auto; }
.picker-grid { grid-template-columns: repeat(auto-fill, minmax(100px, 1fr)); }

/* editor: blocks */
.block { border: 1px solid var(--line); border-radius: 3px; background: #fff; margin-bottom: 10px; }
.block-bar { display: flex; justify-content: space-between; align-items: center; background: var(--panel); border-bottom: 1px solid var(--line); padding: 3px 8px; }
.block-body { padding: 10px; }
.block-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-top: 8px; }
.wysiwyg-bar { display: flex; gap: 2px; flex-wrap: wrap; border: 1px solid #aeb4c6; border-bottom: 0; background: var(--panel); padding: 2px; border-radius: 2px 2px 0 0; }
.wysiwyg { min-height: 90px; border: 1px solid #aeb4c6; padding: 8px; border-radius: 0 0 2px 2px; background: #fff; font-size: 13px; line-height: 1.5; }
.wysiwyg h2 { font-size: 17px; } .wysiwyg h3 { font-size: 15px; font-weight: 600; } .wysiwyg blockquote { margin: 6px 0; padding-left: 10px; border-left: 3px solid var(--line); color: var(--ink-soft); }
.chip { display: inline-flex; align-items: center; gap: 6px; border: 1px solid var(--line); border-radius: 3px; padding: 2px 8px 2px 2px; background: var(--panel); }
.chip img { width: 32px; height: 24px; object-fit: cover; border-radius: 2px; }
.chip i { width: 32px; text-align: center; color: var(--ink-soft); }
.chip-missing { border-color: var(--red); color: var(--red); }
.chip-list { list-style: none; padding: 0; margin: 0 0 8px; }
.chip-list li { display: flex; align-items: center; gap: 4px; margin-bottom: 4px; }
.asset-field, .asset-field-inline { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }

@media (max-width: 900px) {
  .edit-grid, .wide-left { grid-template-columns: 1fr; }
  .two-inputs { grid-template-columns: 1fr; }
}
.inline-filter { margin: 0; }
.inline-label { display: flex; align-items: center; gap: 8px; margin: 0; font-weight: 600; }
.inline-label select { width: auto; margin: 0; padding: 4px 6px; font: inherit; border: 1px solid #aeb4c6; border-radius: 2px; }

/* ---------- iteration 3: branding, tabs, tree drag and drop, editor ---------- */
[hidden] { display: none !important; }
.sidebar { --brand-h: 58px; }
.brand-box { display: flex; align-items: center; justify-content: center; background: var(--brand-bg); height: var(--brand-h); padding: 0 12px; text-decoration: none; color: #fff; }
.brand-badge, .brand-tile { width: 116px; height: 58px; object-fit: contain; display: block; }
.brand-tile { display: grid; place-items: center; background: #3b3b3b; border-radius: 3px; overflow: hidden; font-size: 22px; color: #bbb; height: 46px; width: 92px; }
.brand-tile img { max-width: 70%; max-height: 34px; object-fit: contain; }
.brand-text { font: 800 15px/1 "Helvetica Neue", Arial, sans-serif; letter-spacing: -.2px; }
.badge-preview { background: var(--brand-bg); width: 232px; height: 116px; display: grid; place-items: center; border-radius: 4px; margin: 10px 0; overflow: hidden; }
.badge-preview img { width: 100%; height: 100%; object-fit: contain; }
.userbar { height: 46px; }
.count-badge.inline { margin: 0 0 0 4px; display: inline-grid; background: var(--red); color: #fff; }
.narrow-input { width: 64px !important; }
.inline-hint { display: inline; margin-left: 4px; }
.label-like { display: block; font-weight: 600; margin-bottom: 3px; }

/* tabs */
.tabs, .tabs-bar { display: flex; gap: 2px; border-bottom: 1px solid var(--line); margin-bottom: 14px; }
.tab { background: none; border: 0; border-bottom: 3px solid transparent; font: inherit; font-size: 13px; padding: 7px 14px; cursor: pointer; color: var(--ink); text-decoration: none; margin-bottom: -1px; }
.tab:hover { background: var(--panel); }
.tab.is-active { border-bottom-color: var(--green); font-weight: 700; }

/* page tree: drag and drop */
.grip { cursor: grab; color: var(--ink-soft); padding: 0 2px; }
.node-row { border-radius: 3px; border-top: 2px solid transparent; border-bottom: 2px solid transparent; }
.node-row.is-dragging { opacity: .4; }
.node-row.drop-before { border-top-color: var(--green); }
.node-row.drop-after { border-bottom-color: var(--green); }
.node-row.drop-inside { background: #e4f1e1; outline: 2px dashed var(--green); }
.node-spliced .node-row, .node-spliced .node-title { color: #a9aebd; font-weight: 400; font-style: italic; text-decoration: none; }
.virtual-kids { border-left: 1px dashed #c9cddb; margin-left: 6px; }
.vp-icon { display: inline-block; width: 11px; height: 14px; border: 1.5px dashed currentColor; border-radius: 2px; margin: 0 2px; vertical-align: -2px; }
.node-row .vp-icon, .page-head .vp-icon { margin: 0 1px; }

/* editor */
.wysiwyg-bar { align-items: center; gap: 3px; padding: 5px; }
.wysiwyg-btn { width: 38px; height: 36px; font-size: 16px; background: #fff; border: 1px solid #c3c8d6; border-radius: 3px; color: var(--ink); cursor: pointer; }
.wysiwyg-btn:hover { background: #e9ecf4; }
.wysiwyg-format { width: auto !important; margin: 0 !important; height: 36px; font-size: 13px !important; padding: 0 6px !important; }
.wysiwyg-sep { width: 1px; height: 24px; background: #c3c8d6; margin: 0 4px; }
.wysiwyg { min-height: 140px; }
.wysiwyg h5 { font-size: 13px; font-weight: 700; }
.table-grid { display: grid; gap: 2px; margin: 8px 0; }
.table-grid input { margin: 0 !important; }
.table-tools { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.inline-check { display: inline-flex; margin: 0 0 0 6px; }
.picker-top { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; }
.picker h3 { font-size: 13px; margin: 0 0 8px; }
.link-dialog { max-width: 420px; }
@media (max-width: 900px) { .brand-box { justify-content: flex-start; } }

/* "Actions" heading lines up with the buttons beneath it */
.table th.actions-col { text-align: right; }
/* sign-in screen badge (2:1) */
.login-brand { background: var(--brand-bg); border-radius: 4px; width: 232px; height: 116px; margin: 0 auto 18px; display: grid; place-items: center; overflow: hidden; color: #fff; font: 800 18px/1 "Helvetica Neue", Arial, sans-serif; }
.login-brand img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* ---------- refinements: brand box, menu colour bands, user bar ---------- */
/* Brand / favicon box: 2:1, light grey so favicons stand out */
.brand-box { display: block; width: 100%; height: auto; aspect-ratio: 2 / 1; background: #eeeeee; padding: 0; }
.brand-badge { width: 100%; height: 100%; object-fit: contain; display: block; }
.brand-tile { width: 100%; height: 100%; background: #eeeeee; border-radius: 0; display: grid; place-items: center; font-size: 38px; color: #888; }
.brand-tile img { max-width: 48%; max-height: 66%; width: auto; height: auto; object-fit: contain; }
.brand-text { display: grid; place-items: center; width: 100%; height: 100%; color: #2d2d2d; font: 800 17px/1.1 "Helvetica Neue", Arial, sans-serif; text-align: center; padding: 0 10px; }
.badge-preview { background: #eeeeee; width: 232px; height: 116px; }
.login-brand { background: #eeeeee; color: #2d2d2d; }

/* Menu: coloured band at the left of every item, no green marker at the right */
.nav-item { border-left: 6px solid transparent; padding-left: 10px; border-bottom: 1px solid var(--side-line); }
.nav-item.is-active::after { content: none; display: none; }
.band-blue { border-left-color: #2f7bd6; }
.band-red { border-left-color: #c8333f; }
.band-yellow { border-left-color: #e6b422; }
.band-green { border-left-color: #3a8a2e; }

/* User bar lines up with the menu items below, with a dark grey band and the same thin divider */
.userbar { border-left: 6px solid #3a3a3a; border-bottom: 1px solid var(--side-line); padding: 0 12px 0 10px; }
.userbar-name { gap: 10px; }
.userbar-name > i { width: 18px; text-align: center; font-size: 13px; }

/* ---------- menu colours ---------- */
.sidebar { background: #565c6b; }
.nav-item { color: #fff; border-bottom: 1px solid #fff; }
.nav-item i { color: #fff; }
.nav-item:hover { background: #373b45; }
.nav-item.is-active, .nav-item.is-active:hover { background: #fff; color: #3d4a6b; }
.nav-item.is-active i { color: #3d4a6b; }
.userbar { background: #8994ab; border-bottom: 1px solid #fff; }
.userbar-name, .userbar .icon-btn { color: #fff; }

/* ---------- clients index: larger favicons ---------- */
.row-title { gap: 12px; }
.row-title img { width: 36px; height: 36px; object-fit: contain; border-radius: 3px; }
.table td .row-title i { font-size: 24px; width: 36px; text-align: center; color: var(--ink-soft); }

/* ---------- CMS favicon preview ---------- */
.favicon-preview { margin: 10px 0; }

/* ---------- assets library: drag and drop ---------- */
.dnd-item { cursor: grab; }
.dnd-item.is-dragging { opacity: .4; }
.dnd-target.drop-inside { background: #e4f1e1; outline: 2px dashed var(--green); }
.folder-up { background: #fff; border-style: dashed; }

/* ---------- text editor: hints, code, alignment ---------- */
.wysiwyg-btn { position: relative; }
.wysiwyg-btn[data-tip]:hover::after, .wysiwyg-btn[data-tip]:focus-visible::after {
  content: attr(data-tip); position: absolute; bottom: calc(100% + 7px); left: 50%; transform: translateX(-50%);
  background: #2d2d2d; color: #fff; padding: 6px 9px; border-radius: 3px; font: 400 11px/1.35 "Helvetica Neue", Arial, sans-serif;
  width: max-content; max-width: 220px; text-align: left; white-space: normal; z-index: 30; pointer-events: none; box-shadow: 0 2px 6px rgba(0,0,0,.25);
}
.wysiwyg pre { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; font-size: 12px; background: #f3f4f8; border: 1px solid var(--line); border-radius: 3px; padding: 8px 10px; white-space: pre-wrap; margin: 6px 0; }
.text-left { text-align: left; } .text-center { text-align: center; } .text-right { text-align: right; } .text-justify { text-align: justify; }

/* ---------- round 4 ---------- */
/* client favicon above the menu */
.brand-tile img { max-width: 46%; max-height: 92%; width: auto; height: auto; object-fit: contain; }

/* menu colour bands drawn with ::before, so the white divider runs the full width to the left edge */
.nav-item, .userbar { position: relative; border-left: 0; }
.nav-item { padding-left: 16px; }
.userbar { padding: 0 12px 0 16px; }
.nav-item::before, .userbar::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 6px; background: transparent; }
.band-blue::before { background: #2f7bd6; }
.band-red::before { background: #c8333f; }
.band-yellow::before { background: #e6b422; }
.band-green::before { background: #3a8a2e; }
.userbar::before { background: #3a3a3a; }

/* every drop-down: custom arrow, set in from the edge */
select:not([multiple]) {
  -webkit-appearance: none; -moz-appearance: none; appearance: none;
  background-color: #fff;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%233d4a6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>");
  background-repeat: no-repeat; background-position: right 12px center; background-size: 12px 8px;
  padding-right: 34px !important;
}
select:disabled { background-color: #f1f2f6; }

/* code inputs */
.code-input { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace !important; font-size: 12px !important; line-height: 1.45; white-space: pre; tab-size: 2; background: #fbfbfd; }
.letter-input { text-align: center; font-size: 22px !important; text-transform: uppercase; }

/* content blocks: stand alone, full width, clear gaps, larger titles */
.block { margin-bottom: 18px; }
.block-bar strong { font-size: 14px; font-weight: 600; }
.block-bar { padding: 6px 10px; }
.block-title-row { display: flex; gap: 16px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 12px; padding-bottom: 10px; border-bottom: 1px dashed var(--line); }
.block-title-row .grow { flex: 1 1 220px; margin: 0; }
.block-title-row .check { margin: 0 0 6px; flex: 1 1 260px; }
.block-inner { background: var(--panel); margin-bottom: 12px; }
.wrapper-children { margin: 10px 0 12px 8px; padding-left: 14px; border-left: 3px solid #c9cddb; }

/* table block: single dotted outlines instead of separate boxes */
.table-grid { gap: 0; border-top: 1px dotted #7d86a0; border-left: 1px dotted #7d86a0; margin: 10px 0; }
.table-grid input { border: 0 !important; border-right: 1px dotted #7d86a0 !important; border-bottom: 1px dotted #7d86a0 !important; border-radius: 0 !important; margin: 0 !important; background: #fff; }
/* the header row looks like the public site's (Settings → Appearance → Blocks → Tables; Styles::tableEditorCss) */
.table-grid input.is-head { background: var(--table-head-bg, transparent) !important; color: var(--table-head-text, inherit) !important; font-weight: 700 !important; }
.table-grid { grid-auto-rows: minmax(34px, auto); }
.table-grid input { height: auto !important; min-height: 34px; align-self: stretch; }
.table-grid input.is-selected { z-index: 2; box-shadow: inset 0 0 0 2px var(--focus) !important; }
.table-tools button:disabled, .table-add-options button:disabled { opacity: .4; cursor: default; }
.table-grid.is-selecting input { user-select: none; cursor: cell; }
.table-add-options { display: flex; flex-wrap: wrap; gap: 8px; }
.table-align { display: inline-flex; gap: 4px; }
.wysiwyg-btn.is-on { background: #e9ecf4; }
.wysiwyg-btn:disabled { cursor: default; }
.stats-table th { width: 9em; border-bottom: 1px solid var(--line); }
.stats-table td { border-bottom: 1px solid var(--line); }
.stats-wide { margin-bottom: 14px; }
.stats-wide th { width: 11em; font-weight: 400; }
.stats-clients th a { color: inherit; text-decoration: none; white-space: nowrap; }
.stats-clients .num { text-align: right; white-space: nowrap; }

/* ---------- iteration 3: schemes ---------- */
.colour-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 7px 0; border-bottom: 1px solid var(--line); }
.colour-name { font-weight: 600; font-size: 13px; }
.colour-pair { display: inline-flex; align-items: center; gap: 8px; }
.colour-pair input[type="color"] { width: 44px; height: 32px; padding: 0; border: 1px solid #aeb4c6; border-radius: 3px; background: #fff; cursor: pointer; }
.hex-input { width: 92px !important; margin: 0 !important; font-family: ui-monospace, Menlo, Consolas, monospace !important; }
.inline-row { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.font-card { border: 1px solid var(--line); border-radius: 4px; padding: 10px 14px; margin: 0 0 12px; background: #fff; }
.font-card legend { font-weight: 700; font-size: 13px; padding: 0 6px; }
.el-table th, .el-table td { padding: 4px 6px; white-space: nowrap; }
.el-table select, .num-input { margin: 0 !important; width: auto !important; min-width: 70px; }
.num-input { width: 78px !important; }
.font-preview { border: 1px solid var(--line); border-radius: 4px; padding: 16px 20px; background: #fff; }
.preview-el { margin: 0 0 12px; }
blockquote.preview-el { border-left: 4px solid var(--line); padding-left: 12px; }
.style-preview { margin: 4px 0 12px; }
.style-preview__label { display: block; margin-bottom: 3px; font-size: var(--fs-sm); color: var(--ink-soft); }
.style-preview__frame { display: block; width: 100%; height: 60px; border: 1px dotted #7d86a0; }
.addr-show { margin-top: 8px; padding-top: 8px; border-top: 1px dotted var(--line); }
.icon-input { display: flex; align-items: center; gap: 8px; margin-top: 3px; }
.icon-input i { width: 28px; text-align: center; font-size: 18px; color: var(--ink); }
.icon-input input { margin: 0 !important; }
.dest { background: #fff; border: 1px dashed var(--line); border-radius: 3px; padding: 8px 10px; margin: 8px 0; }

/* ---------- round 5: sizes, width, blocks, files ---------- */
:root { --input-h: 34px; }

/* content fills the screen up to 1500px */
.content, .content:has(.table), .content:has(.edit-grid), .content:has(.wide-left) { max-width: 1500px; }

/* every input and select is 34px high with 4px corners; buttons scale with them */
input:not([type=radio]):not([type=checkbox]):not([type=file]):not([type=color]):not([type=hidden]), select:not([multiple]) {
  height: var(--input-h); padding-top: 0; padding-bottom: 0; border-radius: 4px;
}
textarea { border-radius: 4px; }
input[type="color"] { height: var(--input-h); width: 48px; padding: 0; border-radius: 4px; }
.btn { height: 42px; padding: 0 18px; font-size: 13px; border-radius: 4px; }
.btn-small { height: var(--input-h); padding: 0 12px; font-size: 12px; }
.letter-input { height: 52px !important; }
.num-input { height: var(--input-h) !important; }

/* space after lists and tables, before the next set of inputs */
.set-plain, .set-list, .activity, .chip-list { margin-bottom: 16px; }
.table-wrap { margin-bottom: 16px; }
.set-add-row { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.set-add-row select { flex: 1; margin: 0 !important; }

/* file inputs */
input[type="file"] { display: block; width: 100%; height: auto; box-sizing: border-box; padding: 10px; margin-top: 4px; border: 2px dashed #b9bfd0; border-radius: 6px; background: #fafbfd; font-size: 12px; color: var(--ink); cursor: pointer; }
input[type="file"]:hover { border-color: var(--green); background: #f3f9f1; }
input[type="file"]::file-selector-button { height: var(--input-h); padding: 0 14px; margin-right: 12px; border: 0; border-radius: 4px; background: #5d6a8a; color: #fff; font: inherit; font-size: 12px; cursor: pointer; }
input[type="file"]::file-selector-button:hover { background: #4a5671; }
.file-preview { margin-top: 8px; }
.file-preview img { display: block; max-width: 100%; max-height: 260px; border: 1px solid var(--line); border-radius: 4px; background: #eeeeee; object-fit: contain; }
/* image previews beside file inputs and single-asset choosers: shorter side 100px, longer at most 200px (cms.js fitThumb sets the
   sizes once the image has loaded; 100 × 100 until then). Lists of several assets keep their small chips. */
img.thumb-fit, .asset-field-preview > .chip img, .asset-field-inline > .chip img {
  display: block; width: var(--fit-w, 100px); height: var(--fit-h, 100px); max-width: none; max-height: none;
  object-fit: contain; background: #eeeeee; border: 1px solid var(--line); border-radius: 4px; }
.asset-field-preview > .chip, .asset-field-inline > .chip { flex-direction: column; align-items: flex-start; gap: 6px; padding: 4px 8px 6px 4px; }  /* name under the picture */
/* the asset block's list (owner 2026-11-13): every asset the same size — a 96 × 56 picture box (pictures fitted inside, icons centred)
   and the name to the right, cut short with … when long (the full name shows when pointed at) */
.chip-list--large .chip { box-sizing: border-box; width: 340px; max-width: 100%; height: 66px; gap: 12px; padding: 4px 12px 4px 4px; }
.chip-list--large .chip img, .chip-list--large .chip i { flex: 0 0 96px; box-sizing: border-box; width: 96px; height: 56px; border-radius: 2px; background: #e9ebf0; }
.chip-list--large .chip img { object-fit: contain; }
.chip-list--large .chip i { display: grid; place-items: center; font-size: 22px; }
.chip-list--large .chip > span { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.current-image { display: block; margin: 6px 0; }
/* Choose or upload… with the red Remove under it (owner 2026-11-12) */
.asset-field-actions { display: flex; flex-direction: column; align-items: stretch; gap: 6px; }
.file-meta { margin-top: 4px; }

/* colour picker in schemes: fills its box, same height as the hex input */
.colour-pair input[type="color"] { width: 48px !important; min-width: 48px; flex: none; height: var(--input-h) !important; padding: 0 !important; margin: 0 !important; border: 1px solid #aeb4c6; border-radius: 4px; background: none; cursor: pointer; }
.colour-pair input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
.colour-pair input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
.colour-pair input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }

/* table block: the cell being edited shows its outline above its neighbours */
.table-grid input { position: relative; }
.table-grid input:focus { z-index: 3; outline: 2px solid var(--focus); outline-offset: -1px; }

/* missing files */
.asset-card.is-missing { background: #c8333f; border-color: #a82934; color: #fff; }
.asset-card.is-missing .asset-name, .asset-card.is-missing .muted { color: #fff; }
.asset-thumb.missing { background: #a82934; color: #fff; }
.missing-text { color: #fff; font-weight: 700; font-size: 11px; text-align: center; padding: 4px; line-height: 1.2; }
.asset-thumb.small .missing-text { font-size: 8px; padding: 1px; }
.chip-error { background: #c8333f; border-color: #a82934; color: #fff; }
.chip-error i { color: #fff; }
.file-missing-panel { background: #c8333f; color: #fff; border-color: #a82934; }

/* text editor toolbar: same height as every input */
.wysiwyg-bar { padding: 4px; gap: 4px; }
.wysiwyg-btn { width: var(--input-h); height: var(--input-h); font-size: 13px; }
.wysiwyg-btn i { font-size: 13px; }
.wysiwyg-format { height: var(--input-h) !important; font-size: 12px !important; padding-top: 0 !important; padding-bottom: 0 !important; }
.wysiwyg-sep { height: 20px; }

/* content blocks: collapsed to a title bar, one open at a time */
.block { margin-bottom: 10px; }
.block.is-open { box-shadow: 0 0 0 2px #c9cddb; }
.block-bar { cursor: pointer; display: flex; justify-content: space-between; align-items: center; gap: 10px; user-select: none; }
.block-bar:hover { background: #eef1f8; }
.block-bar.is-open { background: #e7ebf4; border-bottom: 1px solid var(--line); }
.block-bar.is-hidden-block { opacity: .7; }
.bar-title { display: flex; align-items: center; gap: 8px; min-width: 0; font-size: 14px; }
.bar-title i { width: 14px; color: var(--ink-soft); }
.bar-title strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar-tools { display: flex; gap: 2px; flex: none; }
.icon-btn.is-on { color: var(--red); }
.block-inner { margin-bottom: 8px; }

/* ---------- round 6 ---------- */
/* disabled users and devs sit at the bottom, in lighter text */
.table tr.is-disabled td, .table tr.is-disabled td a { color: #a3a9bb; }
.table tr.is-disabled td .badge { opacity: .75; }

/* a tab you can see but can't use: red underline when selected */
.tab.is-blocked.is-active { border-bottom-color: var(--red); }
.tab.is-blocked { color: var(--ink-soft); }

/* drag handle and drop markers (pages, blocks, assets, addresses, links all work the same) */
.drag-handle { display: inline-grid; place-items: center; width: 22px; height: 24px; color: var(--ink-soft); cursor: grab; flex: none; border-radius: 3px; }
.drag-handle:hover { background: #dfe3ee; color: var(--ink); }
.is-dragging { opacity: .4; }
.drop-before { box-shadow: 0 -3px 0 0 var(--green); }
.drop-after { box-shadow: 0 3px 0 0 var(--green); }
.chip-item, .set-item { display: flex; align-items: center; gap: 6px; }
.set-item { padding: 6px 0; border-bottom: 1px solid var(--line); }
ol.set-list { list-style: none; padding: 0; margin: 14px 0 16px; }

/* blocks: plain 1px panel border whether open or closed */
.block.is-open { box-shadow: none; }
.block-bar { border-bottom: 0; }
.block-bar.is-open { border-bottom: 1px solid var(--line); }
.block.drop-before { box-shadow: 0 -3px 0 0 var(--green); }
.block.drop-after { box-shadow: 0 3px 0 0 var(--green); }

/* ---------- round 7: page tree rows, site splitters, larger drop zones ---------- */
/* every row is the same height, so the tree is evenly spaced whatever badges or buttons a row has */
.tree-list .node-row { box-sizing: border-box; height: 28px; padding: 0 4px; gap: 6px; }
.tree-list .node-row .badge { line-height: 1.4; }
.node-add { display: inline-grid; place-items: center; width: 22px; height: 22px; border-radius: 3px; color: var(--ink-soft); text-decoration: none; font-size: 12px; flex: none; }
.node-add:hover { background: #dfe3ee; color: var(--ink); }
.split-row { margin: 6px 0; }
.split-line { flex: 1 1 24px; height: 0; border-top: 2px dotted #b9c0d2; min-width: 24px; }
.split-title { font-weight: 700; font-size: 12px; text-transform: uppercase; letter-spacing: .4px; white-space: nowrap; }
.split-title i { color: var(--ink-soft); margin-right: 2px; }
.split-row form.inline { display: inline-flex; }
/* while dragging, rows and folders grow so they are easier to hit; the drop markers are thicker */
.tree-dragging .tree-list .node-row { height: 38px; }
.tree-list .node-row.drop-before { border-top: 4px solid var(--green); }
.tree-list .node-row.drop-after { border-bottom: 4px solid var(--green); }
.lib-dragging .folder.dnd-target { padding: 18px 10px; }
.drop-before, .block.drop-before { box-shadow: 0 -4px 0 0 var(--green); }
.drop-after, .block.drop-after { box-shadow: 0 4px 0 0 var(--green); }

/* round 7b: fixed splitters, virtual-page connector, two-column account page */
.grip { display: inline-block; width: 14px; padding: 0; text-align: center; }
.grip.is-fixed { cursor: default; opacity: .35; }
/* a locked page (Dev, Superdev, SuperAdmin, Support): a padlock the size of the policy pages' one, where its + and copy buttons would be */
.node-add.node-lock { font-size: inherit; color: var(--ink); cursor: default; }
.node-add.node-lock:hover { background: none; }
/* the dashed line under a virtual page runs from the centre of its grip down to its last shown page's icon */
.tree-list.virtual-kids { border-left: 0; margin-left: 10px; padding-left: 15px; }
.virtual-kids > li { position: relative; }
.virtual-kids > li::before { content: ""; position: absolute; left: -15px; top: 0; bottom: 0; border-left: 1px dashed #c9cddb; }
.virtual-kids > li:last-child::before { bottom: auto; height: 21px; }
.account-cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 0 14px; align-items: start; }
@media (max-width: 1100px) { .account-cols { grid-template-columns: 1fr; } }
/* every splitter row ends in the same-width action area (empty on Main and Policies), so all titles line up in the centre */
.split-actions { flex: 0 0 52px; display: flex; justify-content: flex-end; align-items: center; }

/* Policies editor: client schemes don't apply, so text boxes use plain black serif headings */
.policy-blocks .wysiwyg h1, .policy-blocks .wysiwyg h2, .policy-blocks .wysiwyg h3,
.policy-blocks .wysiwyg h4, .policy-blocks .wysiwyg h5, .policy-blocks .wysiwyg h6 { font-family: Georgia, "Times New Roman", Times, serif; color: #000; font-weight: 700; line-height: 1.25; margin: .6em 0 .35em; }
.policy-blocks .wysiwyg h1 { font-size: 30px; }
.policy-blocks .wysiwyg h2 { font-size: 26px; }
.policy-blocks .wysiwyg h3 { font-size: 22px; }
.policy-blocks .wysiwyg h4 { font-size: 19px; }
.policy-blocks .wysiwyg h5 { font-size: 17px; }
.policy-blocks .wysiwyg h6 { font-size: 15px; }

/* ---------- Sets: image set uploads, tagline set editor ---------- */
.upload-progress { list-style: none; margin: 12px 0 0; padding: 0; font-size: 13px; }
.upload-progress li { display: flex; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--line, #e3e6ee); }
.upload-progress li.is-ok > :last-child { color: #2e7d32; }
.upload-progress li.is-error, .upload-progress li.is-error > :last-child { color: #c62828; }
.icon-btn.is-disabled { opacity: .45; cursor: default; }
.field-row { display: flex; flex-wrap: wrap; gap: 0 16px; }
.field-row > label { flex: 1 1 180px; }
.field-row--halves { gap: 0 24px; }
.field-row--halves > label { flex: 1 1 320px; }
.tagline-link-value { padding: 8px 0; border-bottom: 1px dashed var(--line, #e3e6ee); margin-bottom: 8px; }

/* block look (background, text colour, animation) in the page editor */
/* an open block's sections: Content, Display, Background, Animation (one open at a time) */
.blk-sec { border: 1px solid var(--line); border-radius: 4px; margin-top: 8px; background: #fff; }
.blk-sec:first-child { margin-top: 0; }
.blk-sec > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 8px 10px; list-style: none; display: flex; align-items: center; gap: 6px; }
.blk-sec > summary::-webkit-details-marker { display: none; }
.blk-sec > summary::after { content: "\f078"; font-family: "Font Awesome 6 Free"; font-weight: 900; font-size: 11px; margin-left: auto; transition: transform .15s; }
.blk-sec[open] > summary::after { transform: rotate(180deg); }
.blk-sec[open] > summary { border-bottom: 1px solid var(--line); }
.blk-sec > summary .badge { margin-left: 4px; }
.blk-sec-note { font-weight: 400; }
.blk-sec > .look-body { padding: 10px; }
.look-panel { margin-top: 12px; border-top: 1px solid var(--line); padding-top: 8px; }
.look-panel > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
.look-panel > summary .badge { margin-left: 8px; }
.look-body { padding-top: 8px; }
.look-summary { margin-top: 12px; padding: 8px 12px; border: 1px dashed var(--line); border-radius: 4px; background: #f7f8fb; }
.look-summary ul { margin: 4px 0 0; padding-left: 18px; }
.colour-choice { display: flex; gap: 6px; align-items: center; }
/* every colour picker in the CMS: the whole box is the colour (no padding or inner border round the swatch) */
input[type="color"] { flex: none; width: 48px !important; min-width: 48px; height: var(--input-h) !important; padding: 0 !important; margin: 0 !important; border: 1px solid #aeb4c6; border-radius: 4px; background: none; cursor: pointer; }
input[type="color"]::-webkit-color-swatch-wrapper { padding: 0; }
input[type="color"]::-webkit-color-swatch { border: 0; border-radius: 3px; }
input[type="color"]::-moz-color-swatch { border: 0; border-radius: 3px; }
.colour-choice .hex-input { flex: none; width: 90px; }

/* Notifications → Missing assets */
.missing-uses { list-style: none; margin: 0; padding: 0; }
.missing-uses li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; padding: 4px 0; border-bottom: 1px solid var(--line); }
.missing-uses li:last-child { border-bottom: 0; }
.missing-uses .grow { flex: 1 1 220px; }

/* Settings → Appearance: style fields in collapsible groups (views/site/layout.php) */
.style-group > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 2px 0; }
.style-group > summary .badge { margin-left: 8px; }
.style-group[open] > summary { margin-bottom: 8px; }
.style-sub { padding: 8px 0 4px; border-top: 1px solid var(--line); }
.style-sub:first-of-type { border-top: 0; }
.style-sub h3 { margin: 0 0 6px; font-size: 12px; font-weight: 600; }
.style-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 0 18px; align-items: start; }
.style-field > label { margin-bottom: 3px; }
.style-field > select, .style-field > input, .style-field .colour-choice, .style-input > input { margin-bottom: 10px; }
.style-field .colour-choice select, .style-field .colour-choice input { margin-bottom: 0; }
.style-field--check label.check { margin: 6px 0 10px; }
.style-field select, .style-field input[type="text"], .style-field input[type="number"] { width: 100%; }
.style-field .colour-choice select { flex: 1 1 auto; min-width: 0; }
.style-field .style-hex { display: inline-flex; flex: none; gap: 6px; align-items: center; }
.style-field .style-hex[hidden] { display: none; }
.style-field .style-alpha { display: inline-flex; flex: none; gap: 4px; align-items: center; }
.style-field .style-alpha[hidden] { display: none; }
.style-field .colour-choice .alpha-input { flex: none; width: 64px; }
.style-field--check { align-self: center; }
.style-input { display: block; }
.style-unit { display: block; font-size: var(--fs-sm); color: var(--ink-soft); margin: -6px 0 8px; }
.style-note { grid-column: 1 / -1; margin: 0 0 8px; }
.style-field--wide { grid-column: 1 / -1; }
.style-field textarea { width: 100%; margin-bottom: 10px; }
.style-field .dest { display: flex; flex-wrap: wrap; gap: 0 18px; align-items: flex-start; margin-bottom: 10px; }
.style-field .dest > * { flex: 0 1 260px; }
/* Footer → Arrangement: the sections as evenly sized boxes across the panel, dragged left and right; addresses and links have their alignment inside */
.order-field { display: flex; gap: 10px; margin: 4px 0 12px; padding: 0; list-style: none; }
.order-chip { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 96px;
  padding: 10px; border: 1px solid var(--line); border-radius: 4px; background: #fff; cursor: grab; text-align: center; user-select: none; }
.order-chip:hover { border-color: var(--ink-soft); }
.order-chip[hidden] { display: none; }
.order-chip.is-dragging { opacity: .5; border-style: dashed; }
.order-chip__grip { color: var(--ink-soft); }
.order-chip__name { font-weight: 600; }
.order-chip__align { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 400; font-size: var(--fs-sm); cursor: default; }
.style-field .order-chip__align select { width: auto; margin: 0; }
.style-field .field-error { display: block; margin: -6px 0 8px; }
.style-field .field-error[hidden] { display: none; }
.style-form .sticky-actions { z-index: 5; }
.style-reference > summary { cursor: pointer; font-weight: 600; font-size: 13px; }
/* one-open panels (data-accordion: Settings → Appearance, Schemes and Code) */
.acc-panel > summary { cursor: pointer; font-weight: 600; font-size: 13px; padding: 2px 0; }
.acc-panel[open] > summary { margin-bottom: 8px; }
.style-reference h3 { margin: 12px 0 6px; font-size: 12px; font-weight: 600; }
.style-reference code { white-space: nowrap; }

/* Notifications → Ofsted alerts: requests per day, last 30 days (views/pages/ofsted_chart.php) */
.ofsted-chart__stats { margin: 4px 0 8px; }
.ofsted-chart__plot { position: relative; max-width: 540px; padding: 10px 10px 6px; background: #fff; border: 1px solid var(--line); border-radius: 4px; }
.ofsted-chart__plot svg { display: block; width: 100%; height: auto; overflow: visible; font-family: inherit; }
.ofsted-chart__grid { stroke: #eceef3; stroke-width: 1; }
.ofsted-chart__axis { fill: var(--ink-soft); font-size: 9px; }
.ofsted-chart__line { fill: none; stroke: #1b6fd1; stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }
.ofsted-chart__area { fill: #1b6fd1; opacity: .08; }
.ofsted-chart__dot { fill: #1b6fd1; stroke: #fff; stroke-width: 2; }
.ofsted-chart__cross { stroke: var(--ink-soft); stroke-width: 1; }
.ofsted-chart__hit { fill: transparent; cursor: crosshair; }
.ofsted-chart__tip { position: absolute; z-index: 2; transform: translate(-50%, calc(-100% - 10px)); padding: 4px 8px; background: #fff; border: 1px solid var(--line); border-radius: 4px;
  box-shadow: 0 2px 6px rgba(0, 0, 0, .08); font-size: var(--fs-sm); white-space: nowrap; pointer-events: none; color: var(--ink); }
.ofsted-chart__table { margin-top: 8px; }
.ofsted-chart__table .table-wrap { max-height: 260px; overflow-y: auto; max-width: 360px; }

/* Appearance → Taglines → Tagline structure: the weight list sits in the font row like the other fields */
.tagline-weight > label { display: block; }
.tagline-weight > label select { width: 100%; }
/* an inline SVG icon in a button, sized and coloured like a Font Awesome icon (Site tree block button) */
.icon-svg { display: inline-block; width: 1.15em; height: 1.15em; vertical-align: -0.2em; }

/* collection items (Collections → a collection, and collection blocks) */
.coll-editor .coll-field { display: block; margin-bottom: 12px; }
.coll-editor .coll-short { max-width: 200px; }
.coll-editor .bar-title .badge, .coll-editor .bar-title .coll-date { margin-left: 8px; font-weight: 400; }
/* Pages and Assets collections: index, order and the read-only list of items right now */
.coll-dynamic > label, .coll-dynamic > div { display: block; margin-bottom: 12px; max-width: 520px; }
.coll-dynamic .radio-row { display: flex; gap: 18px; flex-wrap: wrap; }
.coll-preview-list { list-style: decimal; margin: 4px 0 0; padding-left: 26px; max-width: 720px; }
.coll-preview-list li { padding: 5px 0; border-bottom: 1px solid #eceef3; }
.coll-preview-list li.is-muted { color: #8a8f99; }

/* the menu (user bar and items) stays in view while the page scrolls; the logo above it scrolls away.
   cms.js adds .can-stick only when the whole menu fits the screen's height, so a taller menu scrolls with the page. */
@media (min-width: 901px) { .side-sticky.can-stick { position: sticky; top: 0; z-index: 5; } }
/* a block dragged onto a Tabs block goes in as its last tab */
.block.drop-into { box-shadow: 0 0 0 3px var(--green); }
/* font scheme preview: the Blockquote indicator choice */
blockquote.preview-el.quote-open, blockquote.preview-el.quote-marks { border-left: 0; padding-left: 0; }
blockquote.preview-el.quote-open { position: relative; padding-left: 1.2em; padding-right: 1.2em; }
blockquote.preview-el.quote-open::before { content: "\201C"; position: absolute; left: 0; top: 0; display: inline; font-size: 2em; line-height: 1; }
blockquote.preview-el.quote-marks::before { content: "\201C"; }
blockquote.preview-el.quote-marks::after { content: "\201D"; }

/* page tree: the copy button sits beside "add a sub-page" and looks the same */
button.node-add { border: 0; background: none; padding: 0; cursor: pointer; }
/* block editor: "Paste …" flashes when a block has just been copied */
.paste-block.is-flash { box-shadow: 0 0 0 3px var(--green); }
/* Management → Activity */
.activity-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 14px; }
.activity-filters label { margin: 0; }
.activity-filters select, .activity-filters input[type="search"], .activity-filters input[type="date"] { width: auto; min-width: 140px; }
.activity-filters .check { align-self: center; }
.activity-table td { vertical-align: top; }
.nowrap { white-space: nowrap; }
/* the session timeout warning */
.session-dialog { max-width: 380px; }
.session-dialog h2 { margin-top: 0; }
/* page editor → History */
.version-list { list-style: none; margin: 0; padding: 0; }
.version-list li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-top: 1px solid var(--line); }
.version-list .grow { flex: 1 1 auto; min-width: 0; }
/* page tree: the find box */
.tree-filter { display: flex; align-items: center; gap: 10px; margin: 0 0 10px; }
.tree-filter input { max-width: 360px; }
.tree-root.is-filtering .node.is-match > .node-row .node-title { background: #fff3b0; }
.tree-root.is-filtering .grip { visibility: hidden; }
/* Assets: the search box beside the folder trail, and each result's folder */
.assets-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; margin-bottom: 12px; }
.assets-top .crumbs { margin: 0; }
.asset-search { display: flex; align-items: center; gap: 6px; flex: 0 1 460px; }
.asset-search input { flex: 1 1 auto; min-width: 0; }
.asset-where { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* asset picker: the search box */
.picker-search { flex: 1 1 200px; min-width: 0; max-width: 320px; }
/* page tree: the copy dialog */
.duplicate-dialog { max-width: 420px; }
.duplicate-dialog h2 { margin-top: 0; }
.duplicate-options { display: flex; flex-direction: column; align-items: stretch; gap: 8px; margin: 12px 0 6px; }

/* Feeds */
.error-text { color: var(--red); }
.feed-status dl { display: grid; grid-template-columns: max-content 1fr; gap: 4px 12px; margin: 0 0 10px; }
.feed-status dt { color: var(--ink-soft); }
.feed-status dd { margin: 0; }
.feed-items td { vertical-align: top; }
.feed-items .feed-when { white-space: nowrap; }
.feed-items .feed-body { white-space: pre-line; max-height: 4.5em; overflow: hidden; }
.feed-items img { width: 56px; height: 56px; object-fit: cover; border-radius: 3px; }
.fb-pages label { padding: 6px 0; }
.feed-actions { display: flex; flex-wrap: wrap; gap: 10px; }
.feed-actions form { margin: 0; }
.feed-month { margin-bottom: 10px; }
/* month title bars: the block editor's fold bar (grey, chevron, border); the events table sits below the bar, outside it */
.feed-month > summary.block-bar { list-style: none; border: 1px solid var(--line); border-radius: 3px; }
.feed-month > summary.block-bar::-webkit-details-marker { display: none; }
.feed-month > summary h3 { margin: 0; font-size: 14px; font-weight: 600; }
.feed-month > summary .fold-open, .feed-month[open] > summary .fold-closed { display: none; }
.feed-month[open] > summary .fold-open { display: inline-block; }
.feed-month[open] > summary.block-bar { background: #e7ebf4; margin-bottom: 4px; }
.feed-month > summary:focus-visible { outline: 2px solid var(--brand, #3d4a6b); outline-offset: 1px; }
.feed-items .actions-col { white-space: nowrap; }
.event-days { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 4px 0 8px; }
.event-days .check { margin: 0; }
.event-readonly dl { display: grid; grid-template-columns: max-content 1fr; gap: 6px 14px; margin: 0; }
.event-readonly dt { color: var(--ink-soft); }
.event-readonly dd { margin: 0; white-space: pre-line; }
.event-repeat { margin: 4px 0 10px; }
.event-days { flex-wrap: nowrap; gap: 4px 12px; }
.event-days .check { cursor: pointer; }
/* event page: Starts and Ends side by side; an ICS event's details (not editable) in lighter grey */
.event-dates { display: flex; flex-wrap: wrap; gap: 0 28px; align-items: flex-end; }
.event-dates > label { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.event-dates > label input { margin-top: 0 !important; }
.event-dates input[type=date] { width: 150px !important; }
.event-dates input[type=time] { width: 110px !important; }
.event-dates input[hidden] { display: none !important; }
.event-dates-hint { margin: -6px 0 10px; }
form.event-readonly input:disabled:not([type=checkbox]):not([type=radio]), form.event-readonly textarea:disabled { color: #a3a9bb; -webkit-text-fill-color: #a3a9bb; background: #fff; opacity: 1; cursor: default; }
.event-readonly input[type=checkbox]:disabled { opacity: .6; }
/* a Curator feed's networks: up to four small icons in the list's icon box */
.table td .row-title .feed-icons { width: 36px; display: grid; grid-template-columns: 1fr 1fr; gap: 2px; justify-items: center; }
.table td .row-title .feed-icons i { font-size: 15px; width: auto; }
.feed-network { white-space: nowrap; color: var(--ink); }
.feed-network i { width: 16px; text-align: center; }
/* page editor, Feed block: the feeds chosen */
.feed-pick { list-style: none; margin: 3px 0 10px; padding: 0; border: 1px solid var(--line); border-radius: 3px; }
.feed-pick li { display: flex; align-items: center; gap: 8px; padding: 4px 8px; }
.feed-pick li + li { border-top: 1px solid var(--line); }
.feed-pick li > i { width: 16px; text-align: center; color: var(--ink-soft); }
/* the progress dialog while social post pictures are copied (cms.js) */
.fi-dialog { max-width: 420px; }
.fi-dialog h2 { margin-top: 0; }
.fi-progress { display: block; width: 100%; height: 10px; margin: 10px 0 4px; accent-color: var(--green, #4a8a3a); }
/* assets locked by a developer */
.asset-card { position: relative; }
.asset-lock { position: absolute; top: 4px; right: 4px; z-index: 1; width: 22px; height: 22px; display: grid; place-items: center; border-radius: 50%; background: #2d2d2d; color: #fff; font-size: 11px; }
.asset-locked-panel { background: #f4f5f9; border-left: 4px solid #2d2d2d; }
.input-readonly { background: #f4f5f9; color: #6b7080; cursor: default; }         /* a name that can't be changed here */
.asset-lock--system { background: var(--red); }                 /* locked automatically: used in Development (can't be unlocked) */
.asset-locked-panel--system { border-left-color: var(--red); }
.asset-locked-panel--system > .fa-lock, .asset-lock-red { color: var(--red); }
.btn.btn-locked-system, .btn.btn-locked-system:disabled { background: color-mix(in srgb, var(--red) 55%, #fff); color: #fff; opacity: 1; cursor: not-allowed; }   /* white padlock on a light red tint */
.plain-fieldset { border: 0; margin: 0; padding: 0; min-width: 0; }
.is-readonly input:disabled:not([type=checkbox]):not([type=radio]) { color: #a3a9bb; -webkit-text-fill-color: #a3a9bb; background: #fff; opacity: 1; }

/* Billing (Sites index) and Management → Billing: account */
.billing-cols { display: grid; grid-template-columns: repeat(3, minmax(0, 380px)); gap: 14px; align-items: start; }
.billing-cols > .panel { margin: 0; }
@media (max-width: 1100px) { .billing-cols { grid-template-columns: 1fr; } }
.billing-table input { margin: 0 !important; }
.billing-table .num { text-align: right; white-space: nowrap; }
/* Management → Billing: Usage and Projected bill panels run full width, their parts side by side (stacked on narrow screens) */
.usage-cols { display: grid; grid-template-columns: minmax(0, 3fr) minmax(0, 2fr); gap: 24px; align-items: start; }
.usage-cols > div > h2:first-child { margin-top: 0; }
@media (max-width: 900px) { .usage-cols { grid-template-columns: 1fr; } }
.balance-owed { color: var(--red); }
.balance-credit { color: var(--green); }
.balance-big { font-size: 18px; font-weight: 600; }

/* the page picker (CMS.pagePicker): looks like a drop-down; opens a search box and an expandable site tree */
.page-pick { position: relative; margin-top: 3px; font-weight: 400; }
.page-pick-label { margin-bottom: 10px; }
.page-pick-label > .hint { margin: -2px 0 0; }
.page-pick-field {
  display: flex; align-items: center; width: 100%; height: var(--input-h); padding: 0 34px 0 7px;
  border: 1px solid #aeb4c6; border-radius: 4px; font: inherit; font-weight: 400; color: var(--ink); text-align: left; cursor: pointer;
  background: #fff url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'><path d='M1 1.5l5 5 5-5' fill='none' stroke='%233d4a6b' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/></svg>") no-repeat right 12px center / 12px 8px;
}
.page-pick.is-open .page-pick-field { border-color: var(--focus); }
.page-pick-text { overflow: hidden; white-space: nowrap; text-overflow: ellipsis; }
.page-pick-text.is-empty { color: var(--ink-soft); }
.page-pick-panel {
  position: absolute; z-index: 60; left: 0; top: calc(100% + 2px); min-width: 100%; width: max-content; max-width: min(560px, 92vw);
  background: #fff; border: 1px solid #aeb4c6; border-radius: 4px; box-shadow: 0 8px 24px rgba(30, 34, 50, .18); padding: 6px;
}
.page-pick--inline .page-pick-panel { position: static; width: auto; max-width: none; box-shadow: none; margin-top: 2px; }
.page-pick-panel .page-pick-search { margin: 0 0 6px; }
.page-pick-tree { list-style: none; margin: 0; padding: 0; max-height: 320px; overflow-y: auto; }
.page-pick-row { display: flex; align-items: center; gap: 4px; padding: 4px 8px 4px 6px; border-radius: 3px; cursor: pointer; line-height: 1.3; white-space: nowrap; }
.page-pick-row:hover, .page-pick-row:focus { background: #eef3fb; outline: none; }
.page-pick-row:focus-visible { box-shadow: inset 0 0 0 2px var(--focus); }
.page-pick-row.is-chosen { background: #dde9f9; font-weight: 600; }
.page-pick-row.is-muted .page-pick-title { color: var(--ink-soft); }
.page-pick-row.is-disabled { cursor: not-allowed; color: #a9aebd; }
.page-pick-row.is-disabled:hover { background: #f5f6f9; }
.page-pick-row .badge-status { margin-left: 4px; }
.page-pick-toggle { flex: 0 0 18px; width: 18px; text-align: center; color: var(--ink-soft); cursor: pointer; }
.page-pick-toggle.is-leaf { cursor: inherit; }
.page-pick-title { overflow: hidden; text-overflow: ellipsis; }
.page-pick-title mark { background: #fff1a8; color: inherit; padding: 0; }
.page-pick-count { color: var(--ink-soft); font-size: var(--fs-sm); }
.page-pick-head { padding: 9px 8px 3px; font-size: 10px; font-weight: 700; letter-spacing: .05em; text-transform: uppercase; color: var(--ink-soft); }
.page-pick-head:first-child { padding-top: 3px; }
.page-pick-empty { padding: 8px; color: var(--ink-soft); }

/* Tags: Settings -> Tags, and the tag picker on pages, assets, feeds and events (views/tags) */
.tag-swatch { display: inline-block; width: 14px; height: 14px; border-radius: 50%; vertical-align: -2px; border: 1px solid rgba(0,0,0,.2); }
.tag { display: inline-block; padding: 1px 10px; border-radius: 999px; background: var(--tag-colour, #555); color: var(--tag-ink, #fff); font-size: 13px; line-height: 20px; white-space: nowrap; }
.tag-admin-list { list-style: none; margin: 0 0 10px; padding: 0; }
.tag-admin-list li { display: flex; align-items: center; gap: 8px; padding: 5px 0; border-bottom: 1px solid #e3e6ee; flex-wrap: wrap; }
.tag-admin-list .grow { flex: 1; }
.tag-rename { display: inline-block; }
.tag-rename > summary { list-style: none; cursor: pointer; display: inline-flex; }
.tag-rename > summary::-webkit-details-marker { display: none; }
.tag-rename[open] { flex-basis: 100%; order: 5; }
.tag-rename[open] > summary { display: none; }
.tag-kinds { border: 0; padding: 0; margin: 10px 0; }
.tag-kinds .check { display: block; }
.tag-picker { margin: 12px 0; }
.tag-picker__set { border: 0; padding: 0; margin: 0 0 8px; }
.tag-picker__set legend { font-weight: 600; color: #555; margin-bottom: 4px; }
.tag-choice { display: inline-flex !important; align-items: center; margin: 0 14px 6px 0 !important; cursor: pointer; font-weight: normal !important; position: relative; }
.tag-choice input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.tag-choice span { display: inline-flex; align-items: center; gap: 7px; padding: 2px 4px 2px 2px; border-radius: 4px; color: var(--ink, #222); font-size: 13px; line-height: 20px; }
/* a dot in the tag set's colour (owner 2026-11-13): hollow when not chosen, filled when chosen, a ring round it when pointed at */
.tag-choice span::before { content: ""; flex: 0 0 auto; box-sizing: border-box; width: 12px; height: 12px; border: 2px solid var(--tag-colour, #555); border-radius: 50%;
  background: transparent; outline: 2px solid transparent; outline-offset: 2px; transition: background-color .15s, outline-color .15s; }
.tag-choice:hover span::before { outline-color: var(--tag-colour, #555); }
.tag-choice input:checked + span::before { background: var(--tag-colour, #555); }
.tag-choice input:focus-visible + span { outline: 2px solid #1f6feb; outline-offset: 2px; }
.tag-choice input:disabled + span { opacity: .6; cursor: default; }
.tag-choice:has(input:disabled):hover span::before { outline-color: transparent; }
.tag-filter-option { margin-top: 8px; }
.tag-add { gap: 6px; }
.tag-add input { flex: 1 1 auto; min-width: 0 !important; width: auto !important; margin: 0 !important; }
.tag-add .btn { flex: none; }
.tags--cms { display: flex; flex-wrap: wrap; gap: 4px; list-style: none; margin: 0; padding: 0; }
.tags--cms .tags__item { margin: 0; padding: 0; }
.feed-tags { min-width: 90px; }

/* Staff collections grouped by department (cms-content.js collectionEditor) */
.coll-group-dept { margin: 0 0 10px; }
.coll-grouped .coll-dept-group { border: 1px solid #d5d9e3; border-radius: 4px; margin: 0 0 10px; background: #f7f8fb; }
.coll-dept-bar { display: flex; align-items: center; gap: 8px; padding: 6px 10px; background: #eceff5; border-bottom: 1px solid #d5d9e3; border-radius: 4px 4px 0 0; }
.coll-dept-bar strong { flex: 1; }
.coll-dept-group--none .coll-dept-bar strong { font-style: italic; color: #555; }
.coll-dept-items { padding: 8px; min-height: 30px; }
.coll-dept-items > .block:last-child { margin-bottom: 0; }
.coll-dept-group.drop-target { outline: 2px dashed var(--green); outline-offset: 2px; }
.coll-dept-group.is-dragging, .coll-dept-items > .block.is-dragging { opacity: .5; }

/* Dashboard: a tile for each menu section (views/site/dashboard.php), about 200 × 200px, coloured by its menu band */
.dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 210px)); gap: 16px; margin-top: 4px; }
.dash-tile { --tile: var(--ink); position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center;
  min-height: 200px; padding: 22px 16px 18px; background: #fff; border: 1px solid var(--line); border-top: 5px solid var(--tile); border-radius: 4px;
  color: var(--ink); text-decoration: none; overflow: hidden; }
.dash-tile i { font-size: 46px; color: var(--tile); margin-bottom: 14px; }
.dash-tile strong { font-size: 16px; margin-bottom: 6px; }
.dash-tile .dash-desc { font-size: 12.5px; line-height: 1.45; color: #6b7280; }
.dash-tile .count-badge { position: absolute; z-index: 2; top: 10px; right: 10px; margin: 0; color: #fff; font-size: 11px; min-width: 20px; height: 20px; }
.dash-tile::after { content: ""; position: absolute; inset: auto 0 0 0; height: 0; background: var(--tile); opacity: .07; z-index: 0; pointer-events: none; }
.dash-tile > :not(.count-badge) { position: relative; z-index: 1; }
.dash-tile:hover, .dash-tile:focus-visible { border-color: var(--tile); box-shadow: 0 10px 24px rgba(30, 40, 70, .16); transform: translateY(-4px); }
.dash-tile:hover::after, .dash-tile:focus-visible::after { height: 100%; }
.dash-tile:hover i, .dash-tile:focus-visible i { transform: scale(1.12); }
.dash-tile:focus-visible { outline: 2px solid var(--tile); outline-offset: 2px; }
.tile-blue { --tile: #2f7bd6; }
.tile-red { --tile: #c8333f; }
.tile-yellow { --tile: #d19f12; }
.tile-green { --tile: #3a8a2e; }
@media (prefers-reduced-motion: no-preference) {
  .dash-tile { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease; }
  .dash-tile i { transition: transform .18s ease; }
  .dash-tile::after { transition: height .25s ease; }
}
@media (max-width: 480px) { .dash-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; } .dash-tile { min-height: 170px; } .dash-tile i { font-size: 36px; } }

/* Notifications (central menu): the dialog shown until "I have read this notification" is ticked, and the view */
.cms-notification { max-width: 640px; width: calc(100% - 32px); }
.cms-notification__kicker { margin: 0 0 6px; color: var(--ink-soft); font-size: 12px; }
.cms-notification h2 { margin: 0 0 10px; }
.cms-notification__body { max-height: 55vh; overflow: auto; line-height: 1.5; }
.cms-notification__body > :first-child { margin-top: 0; }
.cms-notification__confirm { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); font-weight: 600; }
.check-row { display: flex; flex-wrap: wrap; gap: 4px 18px; margin: 4px 0 12px; }
.field { margin: 0 0 12px; }