/* Datum Kit — CMS screens (draft)
   Built only from kit parts and role variables, so every theme and both languages work.
   Layout uses logical properties (inline-start / inline-end), so right-to-left needs no extra rules. */

@layer kit.cms {

  /* ── shell ────────────────────────────────────────────────────────────────── */
  .cms-app {
    --cms-sidebar: 20rem;
    display: grid;
    grid-template-columns: var(--cms-sidebar) minmax(0, 1fr);
    min-height: 100vh;
    background: var(--color-canvas);
    color: var(--color-text);
    --cms-title: 2rem;
    --cms-cool: #4a5f8a;      /* a cool blue-grey. It tints the greys, so none of them looks warm */
  }

  /* ── day look (light mode) ──────────────────────────────────────────────────
     White page. Anything "in front" (cards, tables, tiles) is a very light grey, with no outline or shadow.
     Fields sitting on the page are grey; fields inside a card are white, so they still stand out.
     Dark mode keeps the kit's normal surfaces. */
  :root[data-mode="light"] .cms-app {
    --cms-grey: color-mix(in srgb, var(--cms-cool) 7%, var(--color-light));
    --color-canvas: var(--color-bg);
    --color-surface: var(--cms-grey);
    --color-surface-alt: color-mix(in srgb, var(--cms-cool) 11%, var(--color-light));
    --color-border: color-mix(in srgb, var(--cms-cool) 16%, transparent);
    --color-border-strong: color-mix(in srgb, var(--cms-cool) 50%, transparent);
    --color-text-muted: color-mix(in srgb, var(--cms-cool) 60%, color-mix(in srgb, var(--color-dark) 64%, var(--color-light)));
    --shadow-1: 0 0 0 0 transparent;
  }
  :root[data-mode="light"] .cms-app :is(.kit-card:not(.kit-card--inset), .kit-table-wrap, .cms-tile, .cms-icon-tile) {
    background-color: var(--cms-grey);
    --color-surface: var(--color-bg);
  }
  :root[data-mode="light"] .cms-app .kit-table thead th { background: transparent; }
  :root[data-mode="light"] .cms-app .kit-menu { background: var(--color-bg); }

  /* ── fields: a softer outline ─────────────────────────────────────────────────
     The kit's field border is the "strong" border. In the CMS it is about half as strong (still visible),
     back to full strength on hover, and focus and error colours are kept. Checkboxes and switches keep the strong border. */
  .cms-app :is(.kit-input, .kit-textarea, .kit-select) { border-color: color-mix(in srgb, var(--color-border-strong) 55%, transparent); }
  .cms-app :is(.kit-input, .kit-textarea, .kit-select):hover { border-color: var(--color-border-strong); }
  .cms-app :is(.kit-input, .kit-textarea, .kit-select):focus-visible { border-color: var(--color-focus); }
  .cms-app :is(.kit-input, .kit-textarea, .kit-select)[aria-invalid="true"] { border-color: var(--color-danger); }

  /* ── day / dark switch: no ring, a solid moon and sun ─────────────────────── */
  .cms-app [data-kit-mode="toggle"] { --btn-bd: transparent; }
  .cms-app [data-kit-mode="toggle"] .kit-icon { fill: currentColor; }

  /* ── status badges: solid colour, a little larger ────────────────────────────
     Strong background, white text, except green (Published, Active), which is a light green #37D38A with dark text, and Draft (and other neutral ones), which is dark text on a light grey.
     The box is bigger (taller, wider) but the text keeps its size. Plain badges (language chips, "You") are left as they are.
     A badge with kit-badge--soft keeps the shared soft colours but takes the bigger box (the SEO overview checks use it). */
  .cms-app .kit-badge:not(.kit-badge--plain) {
    min-height: 2rem;
    padding: 0.2rem var(--space-4);
    gap: 0.5rem;
  }
  .cms-app .kit-badge:not(.kit-badge--plain)::before { width: 0.5rem; height: 0.5rem; }
  .cms-app .kit-badge:not(.kit-badge--plain):not(.kit-badge--soft) {
    background: color-mix(in srgb, var(--color-text) 11%, var(--color-surface));      /* Draft: a light grey, dark text */
    color: var(--color-text);
  }
  .cms-app .kit-badge:not(.kit-badge--plain):not(.kit-badge--soft)::before { opacity: 1; }
  .cms-app .kit-badge--success:not(.kit-badge--plain):not(.kit-badge--soft) { background: var(--color-success-solid); color: var(--color-on-success-solid); }
  .cms-app .kit-badge--warning:not(.kit-badge--plain):not(.kit-badge--soft) { background: var(--color-warning-solid); color: var(--color-on-warning-solid); }
  .cms-app .kit-badge--danger:not(.kit-badge--plain):not(.kit-badge--soft)  { background: var(--color-danger-solid);  color: var(--color-on-solid); }
  .cms-app .kit-badge--primary:not(.kit-badge--plain):not(.kit-badge--soft) { background: var(--color-info-solid);    color: var(--color-on-solid); }   /* scheduled, invited: blue in every theme, so it never looks like Published */

  /* ── dark mode: lift the sidebar ────────────────────────────────────────────
     In day mode the sidebar is black on white. In dark mode a black sidebar would melt into the page,
     so it gets its own lifted, slightly cool background and a faint edge. */
  :root[data-mode="dark"] .cms-sidebar {
    --color-bg: color-mix(in srgb, var(--cms-cool) 16%, color-mix(in srgb, var(--color-dark) 84%, var(--color-light)));
    --color-surface: color-mix(in srgb, var(--color-text) 7%, var(--color-bg));
    box-shadow: 0 0 0 1px var(--color-border);
  }

  .cms-sidebar {
    /* The main navigation is always black (the theme's dark colour), in light and dark mode. */
    position: sticky;
    top: var(--space-3);
    z-index: calc(var(--z-modal) - 5);
    display: flex;
    flex-direction: column;
    gap: var(--space-3);
    height: calc(100vh - var(--space-5));
    margin-block: var(--space-3);
    margin-inline: var(--space-3) 0;
    padding: var(--space-4) var(--space-4) var(--space-4);
    border-radius: var(--radius-card);
    overflow: hidden;
  }
  .cms-brand { padding-inline: var(--space-3); display: flex; align-items: center; justify-content: space-between; }
  .cms-brand .kit-logo { --logo-height: 2.125rem; }
  .cms-nav {
    display: grid;
    align-content: start;
    gap: var(--space-2);
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    scrollbar-width: thin;
    padding-bottom: var(--space-1);
  }
  .cms-nav[data-more="true"] {
    padding-bottom: var(--space-6);
    -webkit-mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
    mask-image: linear-gradient(to bottom, #000 calc(100% - 1.75rem), transparent);
  }
  .cms-sidebar__foot { display: grid; gap: var(--space-2); flex: none; }
  .cms-nav__group { display: grid; gap: 1px; }
  /* a faint line between the groups (Content, Search and SEO, Settings), the same line as the one under the email */
  .cms-nav__group + .cms-nav__group { padding-top: var(--space-2); border-top: 1px solid var(--color-border); }
  .cms-nav__label {
    margin: 0 0 2px;
    padding-inline: var(--space-3);
    font-family: var(--font-body-active);
    font-size: var(--text-xs);
    font-weight: var(--weight-strong);
    line-height: 1.5;                 /* fixed, so Arabic does not make the group labels taller and push the menu past a 900 px screen */
    letter-spacing: 0;
    color: var(--color-text-muted);
  }
  .cms-nav a {
    display: flex;
    align-items: center;
    gap: var(--space-3);
    min-height: 1.875rem;
    padding-inline: var(--space-3);
    border-radius: var(--radius-md);
    color: var(--color-text-muted);
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
    text-decoration: none;
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .cms-nav a:hover { color: var(--color-text); background: color-mix(in srgb, var(--color-text) 6%, transparent); }
  .cms-nav a[aria-current="page"] { background: var(--color-text); color: var(--color-bg); }
  .cms-nav a[aria-disabled="true"] { opacity: 0.6; cursor: default; }
  .cms-nav a[aria-disabled="true"]:hover { background: none; color: var(--color-text-muted); }
  .cms-nav__soon {
    margin-inline-start: auto;
    padding: 0 var(--space-2);
    border-radius: var(--radius-pill);
    font-size: 0.6875rem;
    background-image: repeating-linear-gradient(135deg, var(--color-border-strong) 0 1px, transparent 1px 5px);
  }
  .cms-nav__count { margin-inline-start: auto; font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: 0.7; }

  .cms-user {
    /* sits right under the logo: who is signed in, and sign out. No card, just a line below. */
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: 0 var(--space-3) var(--space-4);
    border-bottom: 1px solid var(--color-border);
  }
  .cms-user__who { display: grid; min-width: 0; flex: 1; line-height: 1.3; }
  .cms-user__who strong { font-size: var(--text-sm); font-weight: var(--weight-strong); min-width: 0; }
  .cms-user__who strong bdi { display: block; overflow-wrap: anywhere; text-align: start; }
  .cms-user__who span { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

  .cms-main { display: flex; flex-direction: column; min-width: 0; }
  .cms-topbar {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    display: flex;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-4) var(--space-6);
    background: color-mix(in srgb, var(--color-canvas) 86%, transparent);
    -webkit-backdrop-filter: blur(12px);
    backdrop-filter: blur(12px);
  }
  .cms-topbar__spacer { flex: 1; }
  .cms-topbar__menu { display: none; }
  .cms-crumbs { display: flex; align-items: center; gap: var(--space-2); flex: 0 1 auto; font-size: var(--text-sm); color: var(--color-text-muted); min-width: 0; white-space: nowrap; }
  .cms-crumbs .kit-icon { flex: none; }
  .cms-crumbs a { color: inherit; text-decoration: none; }
  .cms-crumbs a:hover { color: var(--color-text); text-decoration: underline; }
  .cms-crumbs [aria-current] { color: var(--color-text); font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; }
  .cms-demo-label { font-size: var(--text-xs); color: var(--color-text-muted); }

  .cms-content {
    display: grid;
    grid-template-columns: minmax(0, 1fr);
    align-content: start;
    gap: var(--space-6);
    width: 100%;
    padding: var(--space-4) var(--space-6) var(--space-9);
  }

  .cms-scrim { display: none; }

  /* ── page head, toolbar ───────────────────────────────────────────────────── */
  .cms-head {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    justify-content: space-between;
    gap: var(--space-4);
  }
  .cms-head h1, .cms-title-row h1 { font-size: var(--cms-title); font-weight: var(--weight-heading); line-height: 1.25; letter-spacing: var(--tracking-heading); }
  .cms-head__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }

  .cms-toolbar { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-4); }
  .cms-toolbar .kit-input-icon { flex: 1 1 14rem; max-width: 24rem; }
  .cms-toolbar .kit-select-wrap { min-width: 10rem; }
  .cms-toolbar__end { margin-inline-start: auto; display: flex; align-items: center; gap: var(--space-3); }
  .cms-count { font-size: var(--text-sm); color: var(--color-text-muted); }

  .cms-bulk {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
    padding: var(--space-3) var(--space-4);
    border-radius: var(--radius-card);
    animation: kit-pop 0.2s var(--ease);
  }
  .cms-bulk strong { font-weight: var(--weight-strong); font-size: var(--text-sm); margin-inline-end: auto; }

  .cms-langs { display: inline-flex; gap: var(--space-2); }
  .cms-lang {
    /* a perfect circle, the same height as a status badge (2 rem) */
    display: inline-grid;
    place-items: center;
    flex: none;
    width: 2rem;
    height: 2rem;
    padding: 0;
    border-radius: 50%;
    font-size: 0.6875rem;
    font-weight: 600;
  }
  .cms-lang[data-on="true"] { background: var(--color-primary-soft); color: var(--color-primary-text); }
  .cms-lang[data-on="false"] { color: var(--color-text-muted); box-shadow: inset 0 0 0 1px var(--color-border-strong); }

  .cms-table-title { display: grid; gap: 2px; min-width: 14rem; }
  .cms-table-title a {
    color: var(--color-text);
    font-weight: var(--weight-strong);
    text-decoration: none;
  }
  .cms-table-title a:hover { color: var(--color-primary-text); text-decoration: underline; }
  .cms-table-title span { font-size: var(--text-xs); color: var(--color-text-muted); }
  .cms-table-title bdi { unicode-bidi: isolate; }

  /* ── login ────────────────────────────────────────────────────────────────── */
  .cms-app[data-screen="login"] { display: block; background: var(--color-bg); }
  .cms-app[data-screen="login"] .cms-sidebar,
  .cms-app[data-screen="login"] .cms-topbar { display: none; }
  .cms-app[data-screen="login"] .cms-content { max-width: none; padding: 0; gap: 0; }

  .cms-login {
    display: grid;
    grid-template-columns: minmax(0, 1.05fr) minmax(0, 1fr);
    min-height: 100vh;
  }
  .cms-login__brand {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    gap: var(--space-8);
    padding: clamp(var(--space-6), 5vw, var(--space-9));
    overflow: hidden;
  }
  .cms-login__brand .kit-logo { align-self: flex-start; }
  .cms-login__brand h1 { max-width: 14ch; font-size: var(--text-4xl); }
  .cms-login__brand p { max-width: 38ch; color: var(--color-text-muted); font-size: var(--text-lg); }
  .cms-login__points { display: grid; gap: var(--space-4); margin: 0; padding: 0; list-style: none; }
  .cms-login__points li { display: flex; align-items: center; gap: var(--space-3); font-size: var(--text-sm); }
  .cms-login__points .kit-icon { width: 1.5rem; height: 1.5rem; padding: 0.3rem; border-radius: 50%; background: var(--color-primary-soft); box-sizing: content-box; }
  .cms-login__big {
    position: absolute;
    inset-inline-end: -0.06em;
    bottom: -0.16em;
    font-family: var(--font-number);
    font-size: clamp(14rem, 26vw, 24rem);
    font-variant-numeric: lining-nums;
    line-height: 1;
    letter-spacing: -0.04em;
    color: color-mix(in srgb, var(--color-on-primary) 9%, transparent);
    pointer-events: none;
    user-select: none;
    direction: ltr;
  }
  .cms-login__controls { position: absolute; inset-block-start: var(--space-5); inset-inline-end: var(--space-5); display: flex; gap: var(--space-3); z-index: 2; }
  .cms-login__panel { position: relative; display: grid; place-items: center; padding: var(--space-9) var(--space-5) var(--space-6); background: var(--color-bg); }
  .cms-login__card { display: grid; gap: var(--space-5); width: min(25rem, 100%); }
  .cms-login__card h2 { font-size: var(--text-2xl); }
  .cms-login__card form { display: grid; gap: var(--space-4); }
  .cms-login__fine { font-size: var(--text-xs); color: var(--color-text-muted); }
  .cms-login__demo { display: grid; gap: var(--space-2); padding: var(--space-4); border-radius: var(--radius-md); background: var(--color-surface-alt); font-size: var(--text-xs); color: var(--color-text-muted); }
  .cms-login__demo .kit-cluster { --cluster-gap: var(--space-2); }

  .cms-code {
    direction: ltr;
    text-align: center;
    font-family: var(--font-number);
    font-size: var(--text-2xl);
    letter-spacing: 0.5em;
    padding-inline-start: calc(var(--space-4) + 0.5em);
    font-variant-numeric: lining-nums;
  }

  /* ── edit screen ──────────────────────────────────────────────────────────── */
  .cms-edit {
    display: grid;
    align-items: start;
    gap: var(--space-6);
    grid-template-columns: minmax(0, 1fr) 22rem;
  }
  .cms-edit__main, .cms-edit__side { display: grid; gap: var(--space-6); min-width: 0; }
  .cms-card-title { font-size: var(--text-md); letter-spacing: 0; }

  .cms-lang-tab__dot {
    width: 0.5rem;
    height: 0.5rem;
    border-radius: 50%;
    background: var(--color-warning);
  }
  .cms-lang-tab__dot[data-done="true"] { background: var(--color-success-solid); }

  .cms-fields { display: grid; gap: var(--space-6); padding-top: var(--space-5); }
  .cms-richbar { display: flex; flex-wrap: wrap; gap: var(--space-1); }

  .cms-serp {
    display: grid;
    gap: 2px;
    padding: var(--space-4);
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
  }
  .cms-serp__url { font-size: var(--text-xs); color: var(--color-text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cms-serp__title { font-family: var(--font-body-active); font-size: var(--text-lg); font-weight: var(--weight-strong); color: var(--color-primary-text); line-height: 1.3; letter-spacing: 0; }
  .cms-serp__desc { font-size: var(--text-sm); color: var(--color-text-muted); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }

  .cms-share {
    display: grid;
    overflow: hidden;
    border-radius: var(--radius-md);
    background: var(--color-surface-alt);
  }
  .cms-share__img { aspect-ratio: 1.91 / 1; display: grid; place-items: center; color: var(--color-text-muted); }
  .cms-share__body { padding: var(--space-3) var(--space-4); display: grid; gap: 2px; }
  .cms-share__body strong { font-size: var(--text-sm); }
  .cms-share__body span { font-size: var(--text-xs); color: var(--color-text-muted); }

  .cms-hreflang { display: grid; gap: var(--space-2); margin: 0; padding: 0; list-style: none; font-size: var(--text-xs); }
  .cms-hreflang li { display: flex; align-items: center; gap: var(--space-3); }
  .cms-hreflang code { color: var(--color-text-muted); overflow-wrap: anywhere; }

  .cms-cover {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 16 / 10;
    overflow: hidden;
    border-radius: var(--radius-md);
    background-color: var(--color-surface-alt);
    color: var(--color-text-muted);
  }
  .cms-cover img { width: 100%; height: 100%; object-fit: cover; }

  .cms-savebar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-3);
  }
  .cms-meta-line { font-size: var(--text-xs); color: var(--color-text-muted); }

  /* ── small shared bits ────────────────────────────────────────────────────── */
  .cms-skip {
    position: fixed;
    inset-block-start: var(--space-3);
    inset-inline-start: var(--space-3);
    z-index: calc(var(--z-modal) + 10);
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
    padding: 0;
    border-radius: var(--radius-pill);
    background: var(--color-text);
    color: var(--color-bg);
    font-size: var(--text-sm);
    font-weight: var(--weight-strong);
    text-decoration: none;
  }
  .cms-skip:focus { width: auto; height: auto; clip-path: none; padding: var(--space-2) var(--space-4); }
  .cms-screen { display: contents; }
  .cms-screen > div:empty { display: none; }
  main[tabindex="-1"]:focus, .cms-screen h1[tabindex="-1"]:focus { outline: none; }
  .cms-title-row { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-3); }
  .cms-back { align-self: start; margin-inline-start: calc(var(--space-3) * -1); color: var(--color-text-muted); }
  .cms-panel:not([hidden]) { display: grid; gap: var(--space-6); }
  .cms-edit__main > .kit-tabs { margin-bottom: calc(var(--space-2) * -1); }
  .cms-pick { display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-2) var(--space-3); }
  .cms-pick__thumb { display: grid; place-items: center; flex: none; width: 3rem; height: 2.25rem; overflow: hidden; border-radius: var(--radius-sm); color: var(--color-text-muted); }
  .cms-pick__thumb img { width: 100%; height: 100%; object-fit: cover; }
  .cms-pick__name { font-size: var(--text-xs); color: var(--color-text-muted); overflow-wrap: anywhere; }
  .cms-cover .kit-icon, .cms-share__img .kit-icon { width: 2rem; height: 2rem; }
  .cms-share__img img { width: 100%; height: 100%; object-fit: cover; }
  .cms-share__img { overflow: hidden; }
  .cms-detail .cms-thumb { aspect-ratio: 16 / 10; }
  .cms-detail .kit-card__header { align-items: center; }
  .cms-role { display: grid; gap: var(--space-2); padding-inline: var(--space-3); }
  .cms-role__label { font-size: var(--text-xs); font-weight: var(--weight-strong); color: var(--color-text-muted); }
  .cms-hreflang .kit-badge { min-width: 2.25rem; justify-content: center; }

  /* People screen */
  .cms-person { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
  .cms-person__mail { font-weight: var(--weight-strong); white-space: nowrap; }   /* on a phone the table scrolls sideways instead of breaking the email */
  .cms-person-role { min-inline-size: 8.5rem; max-inline-size: 11rem; }
  .cms-person-role .kit-select { min-height: var(--control-height-sm); font-size: var(--text-sm); }
  .cms-person__lock { display: inline-grid; place-items: center; width: 2rem; height: 2rem; color: var(--color-text-muted); }

  /* SEO overview, Redirects, Sitemap and robots */
  .cms-issues { display: grid; gap: var(--space-1); justify-items: start; min-width: 0; }
  .cms-issues > span:not(.kit-badge):not(.cms-warn) { font-size: var(--text-xs); color: var(--color-text-muted); }
  .cms-warn { display: inline-flex; align-items: center; gap: var(--space-1); font-size: var(--text-xs); color: var(--color-warning); }
  .cms-warn .kit-icon { width: 1em; height: 1em; flex: none; }
  .cms-path { overflow-wrap: anywhere; }
  .kit-table .cms-path { display: inline-block; min-inline-size: 11rem; }   /* on a phone the table scrolls sideways instead of breaking addresses letter by letter */
  .cms-app .kit-card > p.kit-muted { font-size: var(--text-sm); line-height: var(--leading-body); }
  .cms-two { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-6); align-items: start; }
  .cms-switch-list { display: grid; }
  .cms-switch-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding-block: var(--space-3); cursor: pointer; }
  .cms-switch-list .cms-switch-row + .cms-switch-row { border-top: 1px solid var(--color-border); }
  .cms-switch-row__text { display: grid; gap: 2px; min-width: 0; }
  .cms-switch-row__text span { font-size: var(--text-sm); color: var(--color-text-muted); }
  .cms-pre, .cms-mono { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, "Liberation Mono", monospace; }
  .cms-pre {
    margin: 0;
    padding: var(--space-4);
    max-height: 18rem;
    overflow: auto;
    border: 1px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-surface);
    font-size: var(--text-xs);
    line-height: 1.6;
    white-space: pre;
    tab-size: 2;
    text-align: left;
  }
  .cms-mono { font-size: var(--text-sm); }
  #sm-blocked-wrap[data-off="true"] { opacity: 0.5; }
  .cms-card-title { margin: 0; }
  .cms-share { max-width: 26rem; }
  .cms-detail .kit-alert .kit-btn { margin-top: var(--space-2); }

  /* the row menus must not be clipped by the table box on wide screens */
  @media (min-width: 64rem) {
    .cms-tablewrap { overflow: visible; }
    .cms-tablewrap .kit-table thead th:first-child { border-start-start-radius: var(--radius-card); }
    .cms-tablewrap .kit-table thead th:last-child { border-start-end-radius: var(--radius-card); }
    .cms-tablewrap > .kit-pagination { border-end-start-radius: var(--radius-card); border-end-end-radius: var(--radius-card); }
    .cms-tablewrap > .kit-table:last-child tbody tr:last-child td:first-child { border-end-start-radius: var(--radius-card); }
    .cms-tablewrap > .kit-table:last-child tbody tr:last-child td:last-child { border-end-end-radius: var(--radius-card); }
  }

  /* ── media library ────────────────────────────────────────────────────────── */
  .cms-media { display: grid; align-items: start; gap: var(--space-6); grid-template-columns: minmax(0, 1fr); }
  .cms-media[data-detail="open"] { grid-template-columns: minmax(0, 1fr) 22rem; }
  .cms-tiles { display: grid; gap: var(--space-5); grid-template-columns: repeat(auto-fill, minmax(min(11rem, 100%), 1fr)); }

  .cms-tile {
    position: relative;
    display: grid;
    gap: var(--space-2);
    padding: var(--space-2);
    border: 0;
    border-radius: var(--radius-card);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
    color: inherit;
    text-align: start;
    cursor: pointer;
    transition: box-shadow var(--duration) var(--ease), transform var(--duration) var(--ease);
  }
  .cms-tile:hover { transform: translateY(-2px); }
  .cms-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-text), var(--shadow-1); }
  .cms-thumb {
    position: relative;
    display: grid;
    place-items: center;
    aspect-ratio: 4 / 3;
    overflow: hidden;
    border-radius: calc(var(--radius-card) - var(--space-2));
    background-color: var(--thumb-bg, var(--color-surface-alt));
    color: color-mix(in srgb, var(--color-text) 55%, transparent);
  }
  .cms-thumb img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
  .cms-thumb .kit-icon { width: 1.75rem; height: 1.75rem; }
  .cms-tile__flags { position: absolute; inset-block-start: var(--space-2); inset-inline-start: var(--space-2); display: flex; gap: var(--space-1); }
  .cms-flag {
    display: inline-grid;
    place-items: center;
    width: 1.6rem;
    height: 1.6rem;
    border-radius: 50%;
    background: var(--color-surface);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
  }
  .cms-flag .kit-icon { width: 0.9rem; height: 0.9rem; }
  .cms-flag[data-kind="warn"] { color: var(--color-warning); }
  .cms-tile__info { display: grid; gap: 1px; padding: 0 var(--space-2) var(--space-1); min-width: 0; }
  .cms-tile__name { font-size: var(--text-xs); font-weight: var(--weight-strong); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; direction: ltr; text-align: start; unicode-bidi: plaintext; }
  .cms-tile__meta { font-size: 0.6875rem; color: var(--color-text-muted); }

  .cms-detail { position: sticky; top: 5rem; }
  .cms-detail dl { display: grid; grid-template-columns: auto 1fr; gap: var(--space-1) var(--space-4); margin: 0; font-size: var(--text-xs); }
  .cms-detail dt { color: var(--color-text-muted); }
  .cms-detail dd { margin: 0; text-align: end; }
  .cms-used { display: grid; gap: var(--space-1); margin: 0; padding: 0; list-style: none; font-size: var(--text-sm); }
  .cms-used li { display: flex; align-items: center; gap: var(--space-2); color: var(--color-text-muted); }

  .cms-icons { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fill, minmax(5.75rem, 1fr)); }
  .cms-icon-tile {
    display: grid;
    justify-items: center;
    gap: var(--space-2);
    padding: var(--space-4) var(--space-2) var(--space-3);
    border: 0;
    border-radius: var(--radius-md);
    background-color: var(--color-surface);
    box-shadow: var(--shadow-1);
    color: var(--color-text);
    font-size: 0.6875rem;
    cursor: pointer;
  }
  .cms-icon-tile .kit-icon, .cms-icon-tile img { width: 1.75rem; height: 1.75rem; }
  .cms-icon-tile span { color: var(--color-text-muted); direction: ltr; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  .cms-icon-tile[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--color-text), var(--shadow-1); }

  .cms-picker-body { display: grid; gap: var(--space-4); }
  .cms-picker-body .cms-tiles { grid-template-columns: repeat(auto-fill, minmax(9rem, 1fr)); max-height: 52vh; overflow-y: auto; padding: var(--space-1); }

  /* role-based visibility: JS sets hidden; this keeps a locked look for read-only controls */
  [data-readonly="true"] { pointer-events: none; opacity: 0.6; }

  /* ── room to breathe ──────────────────────────────────────────────────────── */
  .cms-content .kit-card { padding: var(--space-6); gap: var(--space-5); }
  .cms-content .kit-card--tight { padding: var(--space-5); gap: var(--space-4); }
  .cms-content .kit-card__header h2,
  .cms-content .kit-card__header h3 { font-size: var(--text-lg); }
  .cms-content .kit-form-grid { gap: var(--space-5); }
  .cms-content .kit-table th,
  .cms-content .kit-table td { padding: calc(var(--space-4) + var(--space-1)) var(--space-5); }
  .cms-tablewrap .kit-table thead th { padding-block: var(--space-5) var(--space-4); }
  /* Lists: the content sits well inside the card, but the lines between rows still run from edge to edge.
     The lines are the cells' own bottom borders, so the extra room is padding on the first and last cell, never a margin on the table. */
  @media (min-width: 64.01rem) {
    .cms-tablewrap .kit-table :is(th, td):first-child { padding-inline-start: var(--space-6); }
    .cms-tablewrap .kit-table :is(th, td):last-child { padding-inline-end: var(--space-6); }
    .cms-tablewrap > .kit-pagination { padding: var(--space-4) var(--space-6); }
  }

  /* ── small screens ────────────────────────────────────────────────────────── */
  @media (max-width: 64rem) {
    .cms-app { grid-template-columns: minmax(0, 1fr); }
    .cms-sidebar {
      position: fixed;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: var(--z-modal);
      width: min(20rem, 86vw);
      height: auto;
      margin: 0;
      border-radius: 0;
      background: var(--color-bg);
      box-shadow: none;                       /* the shadow only shows while the menu is open, so it does not leak onto the page edge */
      translate: -105% 0;
      transition: translate var(--duration-slow) var(--ease), box-shadow var(--duration-slow) var(--ease);
    }
    .cms-sidebar:dir(rtl) { translate: 105% 0; }
    .cms-app[data-nav-open="true"] .cms-sidebar { translate: 0 0; box-shadow: var(--shadow-3); }
    .cms-app[data-nav-open="true"] .cms-scrim {
      display: block;
      position: fixed;
      inset: 0;
      z-index: calc(var(--z-modal) - 1);
      background: color-mix(in srgb, var(--color-dark) 50%, transparent);
    }
    .cms-topbar { padding-inline: var(--space-4); }
    .cms-nav a { min-height: 2.5rem; }              /* a bigger touch target in the phone menu */
    .cms-topbar__menu { display: inline-flex; }
    .cms-content { padding-inline: var(--space-4); }
    .cms-edit { grid-template-columns: minmax(0, 1fr); }
      .cms-media[data-detail="open"] { grid-template-columns: minmax(0, 1fr); }
    .cms-detail { position: static; }
    .cms-login { grid-template-columns: minmax(0, 1fr); }
    .cms-login__brand { display: none; }
  }
  @media (max-width: 64rem) {
    .cms-two { grid-template-columns: minmax(0, 1fr); }
  }
  @media (max-width: 40rem) {
    .cms-topbar .cms-hide-sm { display: none; }
    .cms-crumbs > :not(:last-child) { display: none; }
    .cms-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--space-3); }
    .cms-app { --cms-title: 1.625rem; }
    .cms-content { gap: var(--space-5); }
    .cms-content .kit-card { padding: var(--space-5); }
  }

  /* ── Overview ─────────────────────────────────────────────────────────────── */
  .cms-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 10.5rem), 1fr)); gap: var(--space-4); }
  /* each tile takes three rows of the grid (label, number, foot) so the numbers line up across a row even when a label wraps to two lines */
  .cms-stat { display: grid; grid-row: span 3; grid-template-rows: subgrid; row-gap: var(--space-3); align-content: start; color: inherit; text-decoration: none; transition: transform var(--duration) var(--ease); }
  .cms-stat__foot { display: grid; gap: var(--space-3); align-content: start; }
  .cms-stat:hover { transform: translateY(-2px); }
  .cms-stat__row { display: flex; align-items: flex-end; justify-content: space-between; gap: var(--space-3); }
  .cms-stat__label { font-size: var(--text-sm); font-weight: var(--weight-strong); color: var(--color-text-muted); }
  .cms-stat__go {
    display: inline-grid; place-items: center; flex: none; width: 2rem; height: 2rem; border-radius: 50%;
    box-shadow: inset 0 0 0 1px var(--color-border-strong);
    transition: background-color var(--duration) var(--ease), color var(--duration) var(--ease);
  }
  .cms-stat__go .kit-icon { width: 1rem; height: 1rem; }
  .cms-stat:hover .cms-stat__go { background: var(--color-text); color: var(--color-bg); box-shadow: none; }
  .cms-stat__num { font-family: var(--font-heading-active); font-size: 3rem; font-weight: var(--weight-heading); line-height: 1; letter-spacing: var(--tracking-heading); font-variant-numeric: tabular-nums; }
  .cms-stat__hint { font-size: var(--text-xs); color: var(--color-text-muted); }
  .cms-meter { height: 0.5rem; }
  .cms-meter > span { background: var(--color-success-solid); }          /* the green part is the share that is fine; the hatched rest still needs work */
  /* same as the lists: the text sits inside the card's padding, the lines between rows run edge to edge */
  .cms-next-card { --next-pad: var(--space-6); }
  .cms-next { list-style: none; margin: 0; margin-inline: calc(-1 * var(--next-pad)); padding: 0; display: grid; }
  .cms-next li + li { border-top: 1px solid var(--color-border); }
  .cms-next__row { display: flex; align-items: center; gap: var(--space-4); padding: var(--space-4) var(--next-pad); color: inherit; text-decoration: none; }
  .cms-next__text { display: grid; gap: 2px; min-width: 0; flex: 1; }
  .cms-next__text strong { font-weight: var(--weight-strong); overflow-wrap: anywhere; }
  .cms-next__text span { font-size: var(--text-sm); color: var(--color-text-muted); }
  .cms-next__row:hover strong { text-decoration: underline; }
  .cms-next__go { display: inline-grid; color: var(--color-text-muted); }

  /* ── motion ───────────────────────────────────────────────────────────────────
     Small and quick (under half a second). A screen fades up as it opens, things you touch answer back,
     and messages ease in. Everything here is switched off when the visitor asks for reduced motion.
     The shared parts already animate their own hover, focus, switches, menus, dialogs and toasts. */
  @media (prefers-reduced-motion: no-preference) {
    :root { --cms-rise: 0.5rem; --cms-enter: 0.42s; }
    @keyframes cms-rise { from { opacity: 0; transform: translateY(var(--cms-rise)); } }
    @keyframes cms-fade-in { from { opacity: 0; } }
    @keyframes cms-ease-in { from { opacity: 0; transform: translateY(-0.25rem); } }
    @keyframes cms-grow { from { opacity: 0; transform: scaleX(0.2); } }

    /* a new screen: each block fades up, one just after the other. "backwards" means nothing is left on the element afterwards */
    .cms-screen > * { animation: cms-rise var(--cms-enter) var(--ease) backwards; }
    .cms-screen > :nth-child(2) { animation-delay: 60ms; }
    .cms-screen > :nth-child(3) { animation-delay: 120ms; }
    .cms-screen > :nth-child(4) { animation-delay: 180ms; }
    .cms-screen > :nth-child(n+5) { animation-delay: 240ms; }

    /* the navigation fades in when you sign in (it only restarts when it appears, not on every page) */
    .cms-app:not([data-screen="login"]) .cms-sidebar { animation: cms-fade-in 0.5s var(--ease) backwards; }
    .cms-app[data-nav-open="true"] .cms-scrim { animation: cms-fade-in var(--duration-slow) var(--ease); }

    /* navigation: the icon grows a little under the pointer */
    .cms-nav a .kit-icon { transition: transform var(--duration) var(--ease); }
    .cms-nav a:not([aria-disabled="true"]):hover .kit-icon { transform: scale(1.14); }

    /* buttons: a tiny lift on the main button, a press on every button */
    .kit-btn--primary:not(:disabled):hover { transform: translateY(-1px); }
    .kit-btn:not(:disabled):active { transform: scale(0.97); }

    /* things that appear: error messages, the other language tab, the active tab line */
    .kit-error:not([hidden]) { animation: cms-ease-in 0.24s var(--ease); }
    .cms-panel:not([hidden]) { animation: cms-fade-in 0.3s var(--ease); }
    .kit-tabs > [role="tab"][aria-selected="true"]::after { animation: cms-grow 0.26s var(--ease); }
  }
}