/* =============================================================================
   Albasrawie admin shell — OneDrive structure, Claude warmth, Ionic components
   Loaded after admin.css. Left rail + slim top bar + calm paper-white surfaces.
   ========================================================================== */

/* ---- Warm paper palette (replaces the cool greys) ------------------------ */
:root {
  --cf-bg: #FAF9F5;
  --cf-surface: #FFFFFF;
  --cf-surface-2: #F3F1EA;
  --cf-surface-hover: #EFEDE5;
  --cf-border: #E8E5DC;
  --cf-border-strong: #D6D2C6;
  --cf-text: #1F1E1D;
  --cf-text-secondary: #55534E;
  --cf-text-muted: #85827A;
  --cf-card-shadow: none;
  --cf-header-h: 3.25rem;
  --cf-side-w: 15rem;
  --cf-side-collapsed-w: 4rem;
  --od-serif: 'Newsreader', 'Iowan Old Style', Georgia, serif;
  --ion-background-color: var(--cf-bg);
  --ion-text-color: var(--cf-text);
}
:root[data-theme="dark"] {
  --cf-bg: #1F1E1D;
  --cf-surface: #262624;
  --cf-surface-2: #30302E;
  --cf-surface-hover: #3A3A37;
  --cf-border: #3A3A37;
  --cf-border-strong: #4A4A46;
  --cf-text: #F5F4EE;
  --cf-text-secondary: #CFCDC4;
  --cf-text-muted: #9C9A92;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --cf-bg: #1F1E1D; --cf-surface: #262624; --cf-surface-2: #30302E; --cf-surface-hover: #3A3A37;
    --cf-border: #3A3A37; --cf-border-strong: #4A4A46; --cf-text: #F5F4EE; --cf-text-secondary: #CFCDC4; --cf-text-muted: #9C9A92;
  }
}
ion-card { border-radius: 0.75rem; box-shadow: none; }

/* ---- Frame ---------------------------------------------------------------- */
/* Ionic's own stylesheet pins <body> (position: fixed; height: 100%; overflow: hidden) for its full-screen
   app layout. The admin is a normal scrolling page, so undo that or long pages can't scroll. */
html:has(body.admin-cf), body.admin-cf { height: auto; min-height: 100%; }
/* Ionic also gives <body> a transform, which makes every position: fixed child (drawer, scrim, toasts,
   modals) measure from the whole tall page instead of the window. Remove it. */
body.admin-cf { position: static; max-height: none; overflow: visible; overscroll-behavior-y: auto; transform: none; }
/* Ionic overlays are position: absolute and expect that fixed body; pin them to the window instead. */
body.admin-cf ion-modal, body.admin-cf ion-popover, body.admin-cf ion-toast, body.admin-cf ion-alert,
body.admin-cf ion-loading, body.admin-cf ion-action-sheet { position: fixed; }
.cf-shell { display: flex; align-items: flex-start; min-height: 100dvh; }
.cf-shell > .cf-main { align-self: stretch; }
.cf-main { flex: 1; display: flex; flex-direction: column; min-width: 0; background: var(--cf-bg); }
.cf-content { flex: 1; padding: 1.25rem 1.75rem 2.5rem; max-width: 1280px; width: 100%; margin: 0 auto; }

/* ---- Left rail ------------------------------------------------------------ */
.rail {
  width: var(--cf-side-w); flex: none; position: sticky; top: 0; height: 100dvh; overflow: hidden;
  display: flex; flex-direction: column; background: var(--cf-surface); border-right: 1px solid var(--cf-border);
  transition: width 0.22s cubic-bezier(0.2, 0.8, 0.2, 1); z-index: 40;
}
.rail__top { flex: none; padding: 0.9rem 1rem 0.5rem; }
.rail__brand { display: flex; align-items: center; gap: 0.6rem; font-family: var(--od-serif); font-size: 1.2rem; font-weight: 500; letter-spacing: -0.01em; }
.rail__create { padding: 0.5rem 0.9rem 0.75rem; }
.rail__create-btn { --background: var(--al-blue); --border-radius: 9999px; --box-shadow: none; margin: 0; height: 2.5rem; font-weight: 600; text-transform: none; letter-spacing: 0; }
.rail__create-inner { display: inline-flex; align-items: center; gap: 0.45rem; }
.rail__nav { flex: 1 1 auto; min-height: 0; padding: 0 0.6rem; display: flex; flex-direction: column; gap: 0.1rem;
  overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: var(--cf-border-strong) transparent; }
.rail__nav::-webkit-scrollbar { width: 6px; }
.rail__nav::-webkit-scrollbar-thumb { background: var(--cf-border-strong); border-radius: 9999px; }
.rail__link {
  display: flex; align-items: center; gap: 0.75rem; padding: 0.5rem 0.7rem; border-radius: 0.5rem;
  color: var(--cf-text-secondary); font-size: 0.875rem; font-weight: 500; white-space: nowrap; position: relative;
  transition: background 0.16s, color 0.16s;
}
.rail__link:hover { background: var(--cf-surface-2); color: var(--cf-text); }
.rail__link.is-active { background: var(--al-blue-subtle); color: var(--al-blue); font-weight: 600; }
.rail__link.is-active::before { content: ''; position: absolute; left: -0.6rem; top: 0.45rem; bottom: 0.45rem; width: 3px; border-radius: 0 3px 3px 0; background: var(--al-blue); }
.rail__link.is-soon { opacity: 0.55; cursor: not-allowed; }
.rail__link .ico { flex: none; }
.rail__label { flex: 1; overflow: hidden; text-overflow: ellipsis; transition: opacity 0.16s; }
.rail__badge { background: var(--cf-warning-subtle); color: #8a5a00; border-radius: 9999px; padding: 0 0.45rem; font-size: 0.72rem; font-weight: 600; }
:root[data-theme="dark"] .rail__badge { color: #f6c453; }
.rail__soon { font-size: 0.62rem; padding: 0.05rem 0.4rem; border-radius: 9999px; background: var(--cf-surface-2); color: var(--cf-text-muted); }
.rail__group { font-size: 0.72rem; color: var(--cf-text-muted); padding: 0.9rem 0.7rem 0.25rem; white-space: nowrap; }
.rail__foot { flex: none; padding: 0.5rem 0.6rem 0.75rem; display: flex; flex-direction: column; gap: 0.35rem; }
.rail__storage { padding: 0.6rem 0.7rem; border-top: 1px solid var(--cf-border); font-size: 0.78rem; color: var(--cf-text-secondary); }
.rail__storage-title { font-weight: 500; margin-bottom: 0.35rem; color: var(--cf-text); }
.rail__storage ion-progress-bar { --background: var(--cf-border); --progress-background: var(--al-blue); height: 4px; border-radius: 9999px; }
.rail__storage-note { margin-top: 0.3rem; color: var(--cf-text-muted); }
.rail__collapse { display: flex; align-items: center; gap: 0.75rem; width: 100%; padding: 0.5rem 0.7rem; border-radius: 0.5rem; color: var(--cf-text-muted); font-size: 0.875rem; font-weight: 500; text-align: left; white-space: nowrap; }
.rail__collapse .rail__label { text-align: left; }
.rail__collapse:hover { background: var(--cf-surface-2); color: var(--cf-text); }

/* Icon-only rail: chosen by the person (collapse button) or automatic on mid-size screens */
.side-collapsed .rail { width: var(--cf-side-collapsed-w); }
.side-collapsed .rail__label, .side-collapsed .rail__badge, .side-collapsed .rail__soon, .side-collapsed .rail__group,
.side-collapsed .rail__storage, .side-collapsed .rail__brand-name { display: none; }
.side-collapsed .rail__link, .side-collapsed .rail__collapse { justify-content: center; padding: 0.65rem 0; }
.side-collapsed .rail__top { padding-inline: 0; display: grid; place-items: center; }
.side-collapsed .rail__create { padding-inline: 0.5rem; }
.side-collapsed .rail__create-btn { --border-radius: 9999px; width: 2.75rem; margin-inline: auto; display: block; }
.side-collapsed .rail__create-inner .rail__label { display: none; }
.side-collapsed .rail__link.is-active::before { left: 0; }
.side-collapsed .rail__section + .rail__section { border-top: 1px solid var(--cf-border); margin-top: 0.2rem; padding-top: 0.4rem; }
@media (max-width: 1100px) and (min-width: 701px) {
  .rail { width: var(--cf-side-collapsed-w); }
  .rail__label, .rail__badge, .rail__soon, .rail__group, .rail__storage, .rail__brand-name { display: none; }
  .rail__link, .rail__collapse { justify-content: center; padding: 0.65rem 0; }
  .rail__top { padding-inline: 0; display: grid; place-items: center; }
  .rail__create { padding-inline: 0.5rem; }
  .rail__create-btn { width: 2.75rem; margin-inline: auto; display: block; }
  .rail__link.is-active::before { left: 0; }
  .rail__section + .rail__section { border-top: 1px solid var(--cf-border); margin-top: 0.2rem; padding-top: 0.4rem; }
  .rail__collapse { display: none; }
}

/* ---- Top bar --------------------------------------------------------------- */
.topbar {
  position: sticky; top: 0; z-index: 30; height: var(--cf-header-h); display: flex; align-items: center; gap: 1rem;
  padding: 0 1.25rem; background: var(--cf-bg); border-bottom: 1px solid var(--cf-border);
}
.topbar__left { display: flex; align-items: center; gap: 0.5rem; min-width: 0; flex: 1 1 0; }
.topbar__title { font-weight: 600; font-size: 0.9rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; margin-left: 0.25rem; }
.topbar__search {
  flex: 0 1 28rem; width: 100%; display: flex; align-items: center; gap: 0.55rem; padding: 0.45rem 0.9rem; border-radius: 9999px;
  border: 1px solid var(--cf-border); background: var(--cf-surface); color: var(--cf-text-muted); font-size: 0.84rem; text-align: left;
  transition: border-color 0.16s;
}
.topbar__search:hover { border-color: var(--cf-border-strong); }
.topbar__search span { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar__search kbd { font: inherit; font-size: 0.68rem; padding: 0.05rem 0.4rem; border-radius: 0.25rem; border: 1px solid var(--cf-border); }
.topbar__right { display: flex; align-items: center; gap: 0.35rem; flex: 1 1 0; justify-content: flex-end; }
.topbar__menu, .topbar__search-icon { display: none !important; }

.cf-icon-btn { display: inline-grid; place-items: center; width: 2.25rem; height: 2.25rem; border-radius: 9999px; color: var(--cf-text-secondary); position: relative; transition: background 0.16s, color 0.16s; }
.cf-icon-btn:hover { background: var(--cf-surface-2); color: var(--cf-text); }
.cf-dot-badge { position: absolute; top: 0.45rem; right: 0.5rem; width: 0.5rem; height: 0.5rem; border-radius: 9999px; background: #d4572a; }
.cf-user-btn { display: inline-flex; padding: 0.15rem; border-radius: 9999px; }

/* ---- Mobile: rail becomes a drawer ------------------------------------------ */
@media (max-width: 700px) {
  .rail { position: fixed; inset: 0 auto 0 0; transform: translateX(-100%); width: min(18rem, 86vw); z-index: 200; box-shadow: none; visibility: hidden;
    transition: transform 0.26s cubic-bezier(0.2, 0.8, 0.2, 1), visibility 0s linear 0.26s, box-shadow 0.26s; }
  .nav-open .rail { transform: translateX(0); visibility: visible; box-shadow: var(--cf-dropdown-shadow); transition-delay: 0s; }
  html.nav-open { overflow: hidden; }
  .rail__close { display: inline-grid !important; }
  .side-collapsed .rail { width: min(18rem, 86vw); }
  .side-collapsed .rail__label, .side-collapsed .rail__badge, .side-collapsed .rail__soon, .side-collapsed .rail__group,
  .side-collapsed .rail__storage, .side-collapsed .rail__brand-name { display: revert; }
  .side-collapsed .rail__link { justify-content: flex-start; padding: 0.5rem 0.7rem; }
  .side-collapsed .rail__top { display: block; padding: 0.9rem 1rem 0.5rem; }
  .rail__collapse { display: none; }
  .cf-scrim { position: fixed; inset: 0; background: rgba(0, 0, 0, 0.42); z-index: 150; opacity: 0; pointer-events: none; transition: opacity 0.26s ease; }
  .nav-open .cf-scrim { opacity: 1; pointer-events: auto; }
  .topbar { padding: 0 0.6rem; gap: 0.4rem; }
  .topbar__menu, .topbar__search-icon { display: inline-grid !important; }
  .topbar__search { display: none; }
  .topbar__left, .topbar__right { flex: 1 1 auto; }
  .cf-content { padding: 1rem 0.9rem 5rem; }
}

/* ---- Ionic overlays ----------------------------------------------------------- */
ion-popover.cf-pop { --width: 17rem; --background: var(--cf-surface); --box-shadow: var(--cf-dropdown-shadow); --max-height: 80dvh; }
ion-popover.cf-pop::part(content) { border-radius: 0.75rem; border: 1px solid var(--cf-border); }
ion-popover.cf-pop--menu { --width: 15rem; }
.cf-pop__head { padding: 0.85rem 1rem 0.5rem; }
.cf-pop__name { font-weight: 600; font-size: 0.9rem; }
.cf-pop__mail { font-size: 0.78rem; color: var(--cf-text-muted); margin-bottom: 0.35rem; overflow-wrap: anywhere; }
.cf-pop__role { margin: 0; }
.cf-pop__section { padding: 0.25rem 1rem 0.5rem; }
.cf-pop__label { font-size: 0.72rem; font-weight: 600; color: var(--cf-text-muted); margin-bottom: 0.35rem; }
.cf-pop__form { padding: 0 1rem 1rem; margin: 0; }
ion-popover.cf-pop ion-list { background: transparent; padding: 0.25rem; }
ion-popover.cf-pop ion-item { --background: transparent; --border-radius: 0.5rem; font-size: 0.875rem; }
.launcher__label { padding: 0.8rem 1rem 0; }
.launcher { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.25rem; padding: 0.5rem 0.6rem 0.8rem; }
.launcher__app { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; padding: 0.75rem 0.25rem; border-radius: 0.6rem; font-size: 0.78rem; color: var(--cf-text); }
.launcher__app:hover { background: var(--cf-surface-2); }
.launcher__app.is-soon { opacity: 0.5; cursor: not-allowed; }
ion-popover.cf-launcher { --width: 17rem; }
ion-toast.cf-toast { --border-radius: 0.6rem; font-size: 0.875rem; }
ion-alert.cf-alert { --background: var(--cf-surface); --border-radius: 1rem; --max-width: 26rem; }
ion-segment { --background: var(--cf-surface-2); }
.cf-loading { position: fixed; inset: var(--cf-header-h) 0 0 var(--cf-side-w); z-index: 60; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.5rem; background: color-mix(in srgb, var(--cf-bg) 85%, transparent); color: var(--cf-text-secondary); font-size: 0.9rem; }
.side-collapsed .cf-loading { left: var(--cf-side-collapsed-w); }
@media (max-width: 1100px) { .cf-loading { left: var(--cf-side-collapsed-w); } }
@media (max-width: 700px) { .cf-loading { left: 0; } }

/* ---- Home -------------------------------------------------------------------- */
.home__greeting { font-family: var(--od-serif); font-size: clamp(1.6rem, 3vw, 2.1rem); font-weight: 500; letter-spacing: -0.015em; margin: 0.5rem 0 1.25rem; }
.home__section { font-size: 0.95rem; font-weight: 600; margin: 0 0 0.6rem; }
.tiles { display: grid; grid-template-columns: repeat(auto-fit, minmax(10.5rem, 1fr)); gap: 0.75rem; margin-bottom: 1.75rem; }
.tile-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.8rem 0.9rem; border: 1px solid var(--cf-border); border-radius: 0.75rem; background: var(--cf-surface); transition: border-color 0.16s, background 0.16s; }
.tile-link:hover { border-color: var(--cf-border-strong); background: var(--cf-surface-2); }
.tile-link__ico { width: 2.25rem; height: 2.25rem; border-radius: 0.6rem; display: grid; place-items: center; background: var(--al-blue-subtle); color: var(--al-blue); flex: none; }
.tile-link__ico--warn { background: var(--cf-warning-subtle); color: #8a5a00; }
:root[data-theme="dark"] .tile-link__ico--warn { color: #f6c453; }
.tile-link strong { display: block; font-size: 0.875rem; font-weight: 600; }
.tile-link span.tile-link__sub { font-size: 0.75rem; color: var(--cf-text-muted); }

.recent { display: grid; grid-template-columns: minmax(0, 1fr); gap: 1rem; align-items: start; }
.recent.has-detail { grid-template-columns: minmax(0, 1fr) 17rem; }
.recent__bar { display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; margin-bottom: 0.5rem; }
.recent__bar h2 { font-size: 0.95rem; font-weight: 600; margin-right: auto; }
.recent__chips ion-chip { margin: 0; --background: transparent; border: 1px solid var(--cf-border); font-size: 0.8rem; cursor: pointer; }
.recent__chips ion-chip.is-on { --background: var(--al-blue-subtle); color: var(--al-blue); border-color: transparent; }
.recent__views { --background: transparent; min-height: 2rem; width: auto; }

.selbar { display: none; align-items: center; gap: 0.5rem; padding: 0.35rem 0.5rem; border: 1px solid var(--cf-border); border-radius: 0.6rem; background: var(--cf-surface); margin-bottom: 0.5rem; font-size: 0.84rem; }
.selbar.is-on { display: flex; }
.selbar__count { margin-right: auto; color: var(--cf-text-secondary); }

.rows { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--cf-border); }
.row { display: grid; grid-template-columns: 2rem 1.75rem minmax(0, 1fr) 6rem 5rem 4.5rem; align-items: center; gap: 0.6rem; padding: 0.55rem 0.4rem; border-bottom: 1px solid var(--cf-border); cursor: pointer; font-size: 0.875rem; }
.row:hover { background: var(--cf-surface-2); }
.row.is-selected { background: var(--al-blue-subtle); }
.row__title { font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row__title small { display: block; font-weight: 400; color: var(--cf-text-muted); font-size: 0.75rem; }
.row__status { font-size: 0.78rem; }
.row__status.is-published { color: #2f7a4d; } .row__status.is-in_review, .row__status.is-scheduled { color: #8a5a00; } .row__status.is-draft, .row__status.is-archived { color: var(--cf-text-muted); }
:root[data-theme="dark"] .row__status.is-published { color: #6fcf97; } :root[data-theme="dark"] .row__status.is-in_review { color: #f6c453; }
.row__lang, .row__date { font-size: 0.78rem; color: var(--cf-text-muted); }
.row__date { text-align: right; }
.rows--compact .row { padding-block: 0.3rem; }
.rows--compact .row__title small { display: none; }
.rows--tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr)); gap: 0.6rem; border-top: 0; }
.rows--tiles .row { grid-template-columns: 1fr; border: 1px solid var(--cf-border); border-radius: 0.75rem; padding: 0.8rem; gap: 0.3rem; background: var(--cf-surface); }
.rows--tiles .row ion-checkbox, .rows--tiles .row__ico { display: none; }
.rows--tiles .row__title { white-space: normal; }
.rows--tiles .row__date { text-align: left; }

.detail-pane { border: 1px solid var(--cf-border); border-radius: 0.75rem; background: var(--cf-surface); padding: 1rem; position: sticky; top: 4.25rem; }
.detail-pane__art { height: 5.5rem; border-radius: 0.6rem; background: var(--al-blue-subtle); display: grid; place-items: center; color: var(--al-blue); margin-bottom: 0.7rem; }
.detail-pane h3 { font-family: var(--od-serif); font-size: 1.15rem; font-weight: 500; line-height: 1.3; margin-bottom: 0.2rem; }
.detail-pane__meta { color: var(--cf-text-muted); font-size: 0.8rem; margin-bottom: 0.8rem; }
.detail-pane__actions { display: grid; gap: 0.35rem; }
.detail-pane__x { position: absolute; top: 0.4rem; right: 0.4rem; }
ion-modal.detail-sheet { --border-radius: 1rem 1rem 0 0; }
.detail-sheet .detail-pane { border: 0; position: static; }
.empty-home { padding: 2.5rem 1rem; text-align: center; color: var(--cf-text-secondary); }
.empty-home h3 { font-family: var(--od-serif); font-size: 1.25rem; font-weight: 500; color: var(--cf-text); margin-bottom: 0.3rem; }

@media (max-width: 1180px) { .recent.has-detail { grid-template-columns: minmax(0, 1fr); } .recent .detail-pane { display: none; } }
@media (max-width: 700px) {
  .row { grid-template-columns: 2rem minmax(0, 1fr) 4.5rem; }
  .row__ico, .row__lang { display: none; }
  .row__status { grid-column: 2; font-size: 0.75rem; }
  .row__date { grid-column: 3; grid-row: 1; }
  .row__title { grid-column: 2; }
  .tiles { grid-template-columns: repeat(2, 1fr); }
}
@media (prefers-reduced-motion: reduce) { .rail, .cf-subnav, .cf-scrim { transition: none !important; } }

.recent__views { max-width: 15rem; --background: var(--cf-surface-2); }
ion-segment-button { --indicator-color: var(--cf-surface); font-size: 0.8rem; min-height: 2rem; text-transform: none; }
.home__more { margin-top: 0.5rem; }

/* =============================================================================
   Cloudflare-style sidebar details (account, quick search, sections, sub-items)
   ========================================================================== */
.rail__top { display: flex; align-items: center; gap: 0.5rem; padding: 0.75rem 0.75rem 0.4rem; }
.rail__logo { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; }
.rail__account { flex: 1; min-width: 0; display: flex; align-items: center; justify-content: space-between; gap: 0.4rem; padding: 0.35rem 0.5rem; border-radius: 0.375rem; font-size: 0.84rem; font-weight: 600; text-align: left; }
.rail__account:hover { background: var(--cf-surface-2); }
.rail__account-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rail__search { display: flex; align-items: center; gap: 0.5rem; margin: 0.25rem 0.75rem 0.5rem; padding: 0.4rem 0.6rem; border: 1px solid var(--cf-border); border-radius: 0.375rem; background: var(--cf-surface-2); color: var(--cf-text-muted); font-size: 0.8125rem; text-align: left; }
.rail__search:hover { background: var(--cf-surface); border-color: var(--cf-border-strong); }
.rail__search .rail__label { flex: 1; }
.rail__kbd { font: inherit; font-size: 0.66rem; padding: 0.05rem 0.35rem; border-radius: 0.25rem; border: 1px solid var(--cf-border); background: var(--cf-surface); }
.rail__nav { padding: 0.25rem 0.625rem; gap: 0.6rem; }
.rail__section { display: flex; flex-direction: column; gap: 0.1rem; }
.rail__group { font-size: 0.7rem; font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; color: var(--cf-text-muted); padding: 0.4rem 0.7rem 0.2rem; }
.rail__section > .rail__link, .cf-nav-item > .rail__link, .cf-row > .rail__link { width: 100%; }
button.rail__link { text-align: left; }
.rail__chev { display: inline-flex; color: var(--cf-text-muted); transition: transform 0.18s; }
.cf-nav-item.is-expanded .rail__chev { transform: rotate(90deg); }
.cf-nav-item > .rail__link.is-active { background: transparent; color: var(--cf-text); font-weight: 600; }
.cf-nav-item > .rail__link.is-active::before { display: none; }
.cf-subnav { display: grid; grid-template-rows: 0fr; margin-left: 1.26rem; transition: grid-template-rows 0.24s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cf-subnav__inner { min-height: 0; overflow: hidden; display: flex; flex-direction: column; gap: 0.08rem; padding-left: 0.5rem; border-left: 1px solid var(--cf-border-strong); visibility: hidden; transition: visibility 0s linear 0.24s; }
.cf-nav-item.is-expanded > .cf-subnav { grid-template-rows: 1fr; }
.cf-nav-item.is-expanded > .cf-subnav > .cf-subnav__inner { visibility: visible; transition-delay: 0s; padding: 0.1rem 0 0.2rem 0.5rem; }
.cf-subnav__link { display: flex; align-items: center; justify-content: space-between; gap: 0.5rem; padding: 0.34rem 0.6rem; border-radius: 0.3rem; font-size: 0.8125rem; color: var(--cf-text-secondary); }
.cf-subnav__link:hover { background: var(--cf-surface-2); color: var(--cf-text); }
.cf-subnav__link.is-active { background: var(--al-blue-subtle); color: var(--al-blue); font-weight: 600; }
.rail__foot { border-top: 1px solid var(--cf-border); gap: 0.1rem; padding-top: 0.5rem; }
.side-collapsed .rail__search, .side-collapsed .rail__account, .side-collapsed .cf-subnav, .side-collapsed .rail__chev { display: none; }
.side-collapsed .rail__top { display: grid; place-items: center; padding-inline: 0; }
.side-collapsed .rail__search { display: none; }
@media (max-width: 1100px) and (min-width: 701px) {
  .rail__search, .rail__account, .cf-subnav, .rail__chev { display: none; }
  .rail__top { display: grid; place-items: center; padding-inline: 0; }
}
@media (max-width: 700px) {
  .side-collapsed .rail__search, .side-collapsed .rail__account, .side-collapsed .rail__chev { display: flex; }
  .side-collapsed .cf-subnav { display: grid; }
}
.topbar__crumbs { display: flex; align-items: center; gap: 0.5rem; font-size: 0.8125rem; color: var(--cf-text-muted); min-width: 0; }
.topbar__crumbs a:hover { color: var(--cf-text); }
.topbar__link { font-size: 0.8125rem; font-weight: 500; color: var(--cf-text-secondary); padding: 0.35rem 0.6rem; border-radius: 0.375rem; }
.topbar__link:hover { background: var(--cf-surface-2); color: var(--cf-text); }
.topbar { background: var(--cf-surface); }
.cf-footer { display: flex; justify-content: center; gap: 1.5rem; flex-wrap: wrap; padding: 1rem 1.5rem; font-size: 0.75rem; color: var(--cf-text-muted); border-top: 1px solid var(--cf-border); }
.cf-footer a:hover { color: var(--cf-text); }

/* ---- Cloudflare-style dashboard cards ------------------------------------------- */
.cf-page-title { font-size: 1.4rem; font-weight: 600; margin-bottom: 1rem; }
.cf-banner-card { display: flex; align-items: center; gap: 0.9rem; padding: 0.8rem 1rem; margin: 0 0 1.5rem; flex-wrap: nowrap; }
.cf-banner-card__art { flex: none; align-self: center; width: 2.5rem; height: 2.5rem; border-radius: 0.625rem; display: grid; place-items: center;
  color: var(--al-blue); background: var(--al-blue-subtle); box-shadow: inset 0 0 0 1px rgba(29, 104, 189, 0.16); }
.cf-banner-card__art .ico { width: 20px; height: 20px; }
.cf-banner-card__body { flex: 1 1 auto; min-width: 0; padding: 0; }
.cf-banner-card > ion-button { flex: none; margin: 0; }
.cf-section-head { display: flex; align-items: center; justify-content: space-between; gap: 1rem; margin: 0 0 0.75rem; }
.cf-section-head h2 { font-size: 1.05rem; font-weight: 600; }
.cf-section-tools { display: flex; align-items: center; gap: 0.5rem; }
ion-select.cf-range { min-width: 9.5rem; --min-height: 2.25rem; font-size: 0.84rem; }
.cf-metrics-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(11rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.cf-metric { padding: 0.9rem 1rem; }
.cf-metric__label { font-size: 0.78rem; color: var(--cf-text-muted); font-weight: 500; }
.cf-metric__value { font-size: 1.9rem; font-weight: 600; line-height: 1.2; margin: 0.1rem 0; display: flex; align-items: baseline; gap: 0.5rem; }
.cf-metric__note { font-size: 0.75rem; color: var(--cf-text-muted); }
.cf-trend { font-size: 0.75rem; font-weight: 600; }
.cf-trend.is-up { color: #2f7a4d; } .cf-trend.is-down { color: #c0392b; }
.cf-chart-card { padding: 0.9rem 1rem 0.5rem; margin-bottom: 0.75rem; }
.cf-chart-card ion-card-header, .cf-three ion-card-header, .cf-two ion-card-header { padding: 0.9rem 1rem 0.25rem; }
.cf-chart-card > ion-card-header { padding-inline: 0; }
.cf-chart-card ion-card-content, .cf-two ion-card-content, .cf-three ion-card-content { padding: 0.4rem 1rem 1rem; }
.cf-chart-card > ion-card-content { padding-inline: 0; }
ion-card-subtitle { text-transform: none; letter-spacing: 0; font-size: 0.8rem; font-weight: 500; color: var(--cf-text-muted); }
.cf-chart-card__head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.cf-chart { position: relative; margin-top: 0.4rem; }
.cf-chart svg { display: block; }
.cf-tip { position: absolute; pointer-events: none; padding: 0.4rem 0.6rem; font-size: 0.75rem; background: var(--cf-surface); border: 1px solid var(--cf-border-strong); border-radius: 0.5rem; box-shadow: var(--cf-dropdown-shadow); white-space: nowrap; z-index: 2; }
.cf-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(19rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.cf-two > ion-card, .cf-three > ion-card { margin: 0; }
.cf-three { display: grid; grid-template-columns: repeat(auto-fit, minmax(17rem, 1fr)); gap: 0.75rem; margin-bottom: 0.75rem; }
.cf-donut-wrap { display: flex; align-items: center; gap: 1.5rem; flex-wrap: wrap; }
.cf-legend { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.35rem; font-size: 0.84rem; }
.cf-legend strong { margin-left: 0.35rem; font-weight: 600; }
.cf-legend--row { display: flex; flex-wrap: wrap; gap: 0.35rem 1.1rem; margin-top: 0.75rem; }
.cf-dot, .cf-swatch { display: inline-block; width: 0.6rem; height: 0.6rem; border-radius: 9999px; margin-right: 0.45rem; }
.cf-dot--1 { background: #3B82F6; } .cf-dot--2 { background: #F59E0B; } .cf-dot--3 { background: #10B981; } .cf-dot--4 { background: #8B5CF6; }
.cf-stack { display: flex; height: 0.9rem; border-radius: 0.3rem; overflow: hidden; gap: 2px; background: var(--cf-border); }
.cf-stack__seg--published { background: #3B82F6; } .cf-stack__seg--in_review { background: #F59E0B; } .cf-stack__seg--scheduled { background: #EC4899; }
.cf-stack__seg--draft { background: #8B5CF6; } .cf-stack__seg--archived { background: #94A3B8; }
.cf-swatch.cf-stack__seg--published, .cf-swatch.cf-stack__seg--in_review, .cf-swatch.cf-stack__seg--scheduled, .cf-swatch.cf-stack__seg--draft, .cf-swatch.cf-stack__seg--archived { border-radius: 9999px; }
.cf-bars { list-style: none; margin: 0; padding: 0; display: grid; gap: 0.6rem; }
.cf-bars li { display: grid; grid-template-columns: minmax(5rem, 38%) 1fr 2rem; align-items: center; gap: 0.6rem; font-size: 0.84rem; }
.cf-bars__label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cf-bars__n { text-align: right; color: var(--cf-text-muted); font-variant-numeric: tabular-nums; }
.cf-bars ion-progress-bar { --background: var(--cf-border); --progress-background: var(--al-blue); border-radius: 9999px; height: 0.4rem; }
.cf-empty { color: var(--cf-text-muted); font-size: 0.84rem; padding: 0.4rem 0; }
.cf-mono { font-family: ui-monospace, monospace; font-size: 0.72rem !important; }
.cf-activity ion-item, .cf-actions ion-item { --background: transparent; --padding-start: 1rem; }
.cf-health { display: flex; flex-wrap: wrap; gap: 0.25rem; margin-top: 0.5rem; }
.home__alert { border-radius: 0.6rem; margin-bottom: 1rem; }
@media (max-width: 560px) { .cf-banner-card { flex-wrap: wrap; } .cf-banner-card__body { flex: 1 1 calc(100% - 3.4rem); } .cf-banner-card > ion-button { margin-left: auto; } }

/* =============================================================================
   Drawer close button, command palette, skeleton loading
   ========================================================================== */
.rail__close { display: none; margin-left: auto; width: 2rem; height: 2rem; border-radius: 9999px; place-items: center; color: var(--cf-text-secondary); flex: none; }
.rail__close:hover { background: var(--cf-surface-2); color: var(--cf-text); }
.cf-scrim { display: none; }
@media (max-width: 700px) { .cf-scrim { display: block; } }


.cf-section-head { flex-wrap: wrap; }
.cf-section-head .cf-page-title { margin: 0; font-size: 1.4rem; min-width: 0; }
.topbar__link, .topbar__title { white-space: nowrap; }
@media (max-width: 700px) { .cf-section-head .cf-page-title { flex: 1 1 100%; font-size: 1.25rem; } .cf-section-tools { flex: 1 1 100%; } ion-select.cf-range { flex: 1; } }
.sk-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.sk { display: block; border-radius: 0.375rem; background: linear-gradient(90deg, var(--cf-surface-2) 25%, var(--cf-surface-hover) 37%, var(--cf-surface-2) 63%); background-size: 400% 100%; animation: sk-shimmer 1.5s ease-in-out infinite; }
@keyframes sk-shimmer { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.sk--line { height: 0.7rem; width: 100%; }
.sk--w20 { width: 20%; } .sk--w60 { width: 60%; } .sk--w70 { width: 70%; } .sk--w80 { width: 80%; }
.sk--value { height: 1.6rem; width: 45%; margin: 0.45rem 0 0.55rem; }
.sk--donut { width: 140px; height: 140px; border-radius: 9999px; flex: none; -webkit-mask: radial-gradient(circle, transparent 36px, #000 37px); mask: radial-gradient(circle, transparent 36px, #000 37px); }
.sk--stack { height: 0.9rem; width: 100%; border-radius: 0.3rem; }
.sk-legend { display: grid; gap: 0.6rem; flex: 1; min-width: 6rem; }
.sk-legend--row { display: flex; gap: 1.1rem; margin-top: 0.85rem; }
.sk-rows { display: grid; gap: 0.85rem; }
.sk-row { display: grid; grid-template-columns: minmax(5rem, 38%) 1fr 2rem; align-items: center; gap: 0.6rem; }
.sk--bar { height: 0.4rem; border-radius: 9999px; }
.sk--num { height: 0.7rem; }
.sk-chart { position: relative; height: 220px; margin: 0.4rem 0 0.5rem; color: var(--cf-border-strong); overflow: hidden; border-radius: 0.375rem; }
.sk-chart::after { content: ""; position: absolute; inset: 0; background: linear-gradient(90deg, transparent 25%, color-mix(in srgb, var(--cf-surface) 70%, transparent) 50%, transparent 75%); background-size: 300% 100%; animation: sk-shimmer 1.5s ease-in-out infinite; }
.sk-wave { width: 100%; height: 100%; display: block; opacity: 0.8; }
.cf-banner-card__body .sk { margin-top: 0.4rem; height: 0.8rem; }
.dash-in > * { animation: dash-in 0.42s cubic-bezier(0.2, 0.8, 0.2, 1) both; }
.dash-in > *:nth-child(2) { animation-delay: 0.04s; } .dash-in > *:nth-child(3) { animation-delay: 0.08s; }
.dash-in > *:nth-child(4) { animation-delay: 0.12s; } .dash-in > *:nth-child(5) { animation-delay: 0.16s; }
.dash-in > *:nth-child(n+6) { animation-delay: 0.2s; }
@keyframes dash-in { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.dash-error ion-card-content { display: grid; gap: 0.4rem; justify-items: start; padding: 1.25rem; }
@media (prefers-reduced-motion: reduce) { .sk, .sk-chart::after, .dash-in > * { animation: none !important; } }

/* =============================================================================
   Buttons — Anthropic style
   Solid = ink with cream text. Outline = hairline border. Clear = text that tints on hover.
   Destructive actions use a muted red. In dark mode the solid button flips to cream on ink.
   Every action button in the admin is an ion-button, so this is the one place they are styled.
   ========================================================================== */
:root {
  --btn-ink: #141413; --btn-ink-hover: #30302E; --btn-ink-press: #000000; --btn-ink-text: #FAF9F5;
  --btn-line: rgba(20, 20, 19, 0.24); --btn-line-hover: rgba(20, 20, 19, 0.5); --btn-soft: rgba(20, 20, 19, 0.06);
  --btn-danger: #B42318; --btn-danger-hover: #912018; --btn-danger-rgb: 180, 35, 24;
}
:root[data-theme="dark"] {
  --btn-ink: #F5F4EE; --btn-ink-hover: #FFFFFF; --btn-ink-press: #D9D7CC; --btn-ink-text: #1F1E1D;
  --btn-line: rgba(245, 244, 238, 0.28); --btn-line-hover: rgba(245, 244, 238, 0.55); --btn-soft: rgba(245, 244, 238, 0.09);
  --btn-danger: #F97066; --btn-danger-hover: #FDA29B; --btn-danger-rgb: 249, 112, 102;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --btn-ink: #F5F4EE; --btn-ink-hover: #FFFFFF; --btn-ink-press: #D9D7CC; --btn-ink-text: #1F1E1D;
    --btn-line: rgba(245, 244, 238, 0.28); --btn-line-hover: rgba(245, 244, 238, 0.55); --btn-soft: rgba(245, 244, 238, 0.09);
    --btn-danger: #F97066; --btn-danger-hover: #FDA29B; --btn-danger-rgb: 249, 112, 102;
  }
}

ion-button {
  --border-radius: 0.625rem; --box-shadow: none; --padding-start: 1rem; --padding-end: 1rem;
  --ripple-color: transparent;
  height: 2.5rem; margin: 0; font-size: 0.875rem; font-weight: 500; letter-spacing: 0; text-transform: none;
  transition: transform 0.12s ease;
}
ion-button[size="small"] { height: 2rem; font-size: 0.8125rem; --padding-start: 0.8rem; --padding-end: 0.8rem; }
ion-button[size="large"] { height: 3rem; font-size: 0.95rem; }
ion-button:active { transform: scale(0.98); }
ion-button ion-ripple-effect { display: none; }
ion-button::part(native) { transition: background-color 0.16s ease, border-color 0.16s ease, color 0.16s ease; }
ion-button:focus-visible::part(native) { outline: 2px solid var(--al-blue); outline-offset: 2px; }

/* Primary */
ion-button.button-solid:not(.ion-color) {
  --background: var(--btn-ink); --background-hover: var(--btn-ink-hover); --background-hover-opacity: 1;
  --background-activated: var(--btn-ink-press); --background-activated-opacity: 1; --background-focused: var(--btn-ink-hover); --background-focused-opacity: 1;
  --color: var(--btn-ink-text); --color-hover: var(--btn-ink-text);
}
/* Secondary */
ion-button.button-outline:not(.ion-color) {
  --background: transparent; --background-hover: var(--btn-soft); --background-hover-opacity: 1;
  --background-activated: var(--btn-soft); --background-activated-opacity: 1; --background-focused: var(--btn-soft); --background-focused-opacity: 1;
  --color: var(--cf-text); --border-color: var(--btn-line); --border-width: 1px; --border-style: solid;
}
ion-button.button-outline:not(.ion-color):hover { --border-color: var(--btn-line-hover); }
/* Tertiary (and the text buttons in modal headers) */
ion-button.button-clear:not(.ion-color) {
  --background: transparent; --background-hover: var(--btn-soft); --background-hover-opacity: 1;
  --background-activated: var(--btn-soft); --background-activated-opacity: 1; --background-focused: var(--btn-soft); --background-focused-opacity: 1;
  --color: var(--cf-text);
}
ion-button[strong] { font-weight: 600; }

/* Destructive */
ion-button[color="danger"] {
  --ion-color-base: var(--btn-danger); --ion-color-base-rgb: var(--btn-danger-rgb); --ion-color-contrast: #FFFFFF;
  --ion-color-shade: var(--btn-danger-hover); --ion-color-tint: var(--btn-danger-hover);
}
/* For coloured buttons Ionic paints the hover/press layer in the button's own colour, so it must stay a faint tint. */
ion-button.button-outline[color="danger"], ion-button.button-clear[color="danger"] {
  --background-hover-opacity: 0.08; --background-focused-opacity: 0.1; --background-activated-opacity: 0.14;
}
ion-button.button-outline[color="danger"] { --border-color: rgba(var(--btn-danger-rgb), 0.45); }
ion-button.button-outline[color="danger"]:hover { --border-color: var(--btn-danger); }

ion-button[disabled], ion-button.button-disabled { opacity: 0.45; }
ion-button[expand="block"] { height: 2.5rem; }
ion-button[expand="block"][size="small"] { height: 2.25rem; }
@media (prefers-reduced-motion: reduce) { ion-button, ion-button::part(native) { transition: none; } ion-button:active { transform: none; } }

/* =============================================================================
   Avatar, account menus, theme switch, header controls
   ========================================================================== */
:root { --cf-clay: #CC785C; --cf-clay-ink: #FFFFFF; }
.cf-avatar { width: 2rem; height: 2rem; border-radius: 9999px; display: grid; place-items: center; flex: none;
  background: var(--cf-clay); color: var(--cf-clay-ink); font-weight: 600; font-size: 0.75rem; letter-spacing: 0.02em; line-height: 1;
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, 0.06); transition: filter 0.16s ease, transform 0.12s ease; }
.cf-avatar--lg { width: 2.5rem; height: 2.5rem; font-size: 0.9rem; }
.cf-user-btn { padding: 0.15rem; border-radius: 9999px; }
.cf-user-btn:hover .cf-avatar { filter: brightness(1.06); }
.cf-user-btn:active .cf-avatar { transform: scale(0.96); }
.cf-user-btn:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 2px; }

ion-popover.cf-pop { --width: 17.5rem; }
.cf-pop__body { padding: 0.35rem; background: var(--cf-surface); color: var(--cf-text); }
.cf-pop__head { display: flex; align-items: center; gap: 0.7rem; padding: 0.65rem 0.65rem 0.5rem; }
.cf-pop__logo { flex: none; }
.cf-pop__who { min-width: 0; }
.cf-pop__name { margin: 0; font-weight: 600; font-size: 0.9rem; line-height: 1.25; overflow-wrap: anywhere; }
.cf-pop__mail { margin: 0.1rem 0 0; font-size: 0.78rem; color: var(--cf-text-muted); overflow-wrap: anywhere; }
.cf-pop__role { display: inline-flex; align-items: center; gap: 0.35rem; margin: 0 0 0.35rem 0.65rem; padding: 0.15rem 0.55rem 0.15rem 0.45rem; border-radius: 9999px;
  background: var(--cf-surface-2); color: var(--cf-text-secondary); font-size: 0.72rem; font-weight: 500; }
.cf-pop__list { display: grid; gap: 0.1rem; margin: 0; padding: 0.2rem 0; border-top: 1px solid var(--cf-border); }
.cf-pop__list:first-of-type { border-top: 0; }
.cf-pop__row { display: flex; align-items: center; gap: 0.7rem; width: 100%; padding: 0.5rem 0.65rem; border-radius: 0.5rem; text-align: left;
  font-size: 0.875rem; font-weight: 500; color: var(--cf-text); transition: background-color 0.14s ease; }
.cf-pop__row .ico { color: var(--cf-text-muted); flex: none; }
.cf-pop__row:hover, .cf-pop__row:focus-visible { background: var(--cf-surface-2); outline: 0; }
.cf-pop__row--danger, .cf-pop__row--danger .ico { color: var(--btn-danger); }
.cf-pop__row--danger:hover, .cf-pop__row--danger:focus-visible { background: rgba(var(--btn-danger-rgb), 0.08); }
.cf-pop__section { padding: 0.5rem 0.65rem 0.6rem; border-top: 1px solid var(--cf-border); }
.cf-pop__label { margin: 0 0 0.4rem; font-size: 0.72rem; font-weight: 600; color: var(--cf-text-muted); }

ion-segment.cf-theme { --background: var(--cf-surface-2); min-height: 2.25rem; border-radius: 0.625rem; padding: 0.15rem; }
ion-segment.cf-theme ion-segment-button { --indicator-color: var(--cf-surface); --indicator-box-shadow: 0 1px 2px rgba(0, 0, 0, 0.12);
  --color: var(--cf-text-muted); --color-checked: var(--cf-text); --border-radius: 0.5rem; --padding-top: 0; --padding-bottom: 0;
  min-height: 1.95rem; margin: 0; }
ion-segment.cf-theme ion-segment-button::part(indicator-background) { border-radius: 0.5rem; }

/* Range picker and refresh: one height, one radius, one border */
.cf-section-tools { align-items: center; }
ion-select.cf-range { --min-height: 2rem; min-height: 2rem; height: 2rem; width: auto; min-width: 9.5rem;
  --border-radius: 0.625rem; --border-width: 1px; --border-color: var(--btn-line); --highlight-color-focused: var(--btn-line-hover);
  --padding-start: 0.8rem; --padding-end: 0.6rem; font-size: 0.8125rem; font-weight: 500; }
ion-select.cf-range::part(container) { border-radius: 0.625rem; }
ion-select.cf-range:hover { --border-color: var(--btn-line-hover); }
.cf-section-tools ion-button[data-refresh] { --padding-start: 0; --padding-end: 0; width: 2rem; height: 2rem; }

/* =============================================================================
   Pinning: a pin appears on hover; pinned rows are collected under "Pinned" at the top
   ========================================================================== */
.rail__section[hidden] { display: none; }
.cf-row { position: relative; display: flex; align-items: center; }
.cf-row > a { flex: 1 1 auto; min-width: 0; }
.cf-row > .rail__link, .cf-row > .cf-subnav__link { padding-right: 2rem; }
.cf-pin { position: absolute; right: 0.3rem; top: 50%; translate: 0 -50%; width: 1.6rem; height: 1.6rem; display: grid; place-items: center;
  border-radius: 0.375rem; color: var(--cf-text-muted); opacity: 0; transition: opacity 0.14s ease, background-color 0.14s ease, color 0.14s ease; }
.cf-row:hover .cf-pin, .cf-row:focus-within .cf-pin, .cf-pin[aria-pressed="true"] { opacity: 1; }
.cf-pin:hover { background: var(--cf-surface-hover); color: var(--cf-text); }
.cf-pin:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 1px; }
.cf-pin[aria-pressed="true"] { color: var(--al-blue); }
.cf-pin[aria-pressed="true"] .ico { fill: currentColor; }
.cf-row:hover .rail__badge, .cf-row:focus-within .rail__badge { visibility: hidden; }
@media (hover: none) { .cf-pin { opacity: 0.65; } }

.rail__pinned-list { display: flex; flex-direction: column; gap: 0.1rem; }
.rail__pinned-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.rail__pinned-text small { font-size: 0.7rem; font-weight: 400; color: var(--cf-text-muted); }
.rail__section--pinned .rail__link { padding-top: 0.4rem; padding-bottom: 0.4rem; }
.side-collapsed .cf-pin, .side-collapsed .rail__section--pinned .rail__group { display: none; }
@media (max-width: 1100px) and (min-width: 701px) { .cf-pin, .rail__section--pinned .rail__group { display: none; } }
@media (max-width: 700px) { .side-collapsed .cf-pin { display: grid; } .side-collapsed .rail__section--pinned .rail__group { display: block; } }
@media (prefers-reduced-motion: reduce) { .cf-pin { transition: none; } }

/* =============================================================================
   Sidebar alignment: the logo sits over the icon column and the name over the label column,
   and in the icon-only rail every icon (including rows with a pin button) is centred.
   ========================================================================== */
.rail__top { padding: 0.75rem 0.625rem 0.4rem; gap: 0; }
.rail__logo { width: 22px; height: 32px; margin-left: calc(0.7rem - 2px); }
.rail__logo img { width: 22px; height: 22px; display: block; }
.rail__account { margin-left: 2px; padding-left: 0.5rem; }
.rail__search { margin-inline: 0.625rem; padding-left: calc(0.7rem + 1.5px); }

/* Icon-only rail (chosen with the collapse button, or automatic on mid-size screens) */
.side-collapsed .rail__logo { width: 2rem; margin-left: 0; }
.side-collapsed .rail__logo img { width: 26px; height: 26px; }
.side-collapsed .cf-row > .rail__link, .side-collapsed .cf-row > .cf-subnav__link { padding-right: 0; }
@media (max-width: 1100px) and (min-width: 701px) {
  .rail__logo { width: 2rem; margin-left: 0; }
  .rail__logo img { width: 26px; height: 26px; }
  .cf-row > .rail__link, .cf-row > .cf-subnav__link { padding-right: 0; }
}
/* On a phone the drawer is always the full sidebar, even if the desktop rail is collapsed */
@media (max-width: 700px) {
  .side-collapsed .rail__logo { width: 22px; margin-left: calc(0.7rem - 2px); }
  .side-collapsed .rail__logo img { width: 22px; height: 22px; }
  .side-collapsed .cf-row > .rail__link, .side-collapsed .cf-row > .cf-subnav__link { padding-right: 2rem; }
}

.cf-pop__note { margin-left: auto; font-size: 0.7rem; color: var(--cf-text-muted); }
.cf-nudge { display: flex; align-items: center; gap: 0.8rem; flex-wrap: wrap; margin: 0 0 1rem; padding: 0.75rem 1rem; border-radius: 0.8rem; border: 1px solid color-mix(in srgb, #f59e0b 45%, transparent); background: color-mix(in srgb, #f59e0b 10%, transparent); font-size: 0.88rem; color: var(--cf-text); }
.cf-nudge a { margin-left: auto; font-weight: 600; color: var(--cf-text); text-underline-offset: 3px; }


/* =====================================================================================================================
   Interface size. The admin is built in rem, so the page size is one number.
   Auto (the default) follows the screen: full size on phones and small tablets (under 900px), compact (75%, what many people
   zoom to) on laptops and desktops, a little larger on very big monitors. Compact, Cozy and Large are fixed choices in the
   name menu. Icons carry their size in pixels, so they follow with --ui-scale.
   ================================================================================================================== */
:root { --ui-scale: 1; }
@media (min-width: 900px) { html { --ui-scale: 0.75; font-size: 75%; } }
@media (min-width: 1600px) { html { --ui-scale: 0.875; font-size: 87.5%; } }
@media (min-width: 1800px) { html { --ui-scale: 1; font-size: 100%; } }
@media (min-width: 600px) {
  html[data-scale="compact"] { --ui-scale: 0.75; font-size: 75%; }
  html[data-scale="cozy"] { --ui-scale: 0.875; font-size: 87.5%; }
  html[data-scale="large"] { --ui-scale: 1; font-size: 100%; }
}
body.admin-cf svg[width]:not([width$="%"]):not(.keep-size) { zoom: var(--ui-scale); }
.cf-scale { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0.2rem; padding: 0.15rem; border-radius: 0.65rem; background: var(--cf-surface-2); }
.cf-scale button { height: 1.9rem; border-radius: 0.5rem; font-size: 0.78rem; font-weight: 500; color: var(--cf-text-secondary); }
.cf-scale button[aria-pressed="true"] { background: var(--cf-surface); color: var(--cf-text); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.14); }
.cf-scale button:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 1px; }
.cf-scale--4 { grid-template-columns: repeat(4, 1fr); }
.cf-scale--icons button { display: inline-flex; align-items: center; justify-content: center; gap: 0.35rem; }
.cf-pop__hint { margin: 0.45rem 0.1rem 0; font-size: 0.7rem; line-height: 1.35; color: var(--cf-text-muted); }

/* =====================================================================================================================
   Apps: the window button, the app chooser and the app title in the sidebar
   ================================================================================================================== */
.rail__apps { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.5rem; color: var(--cf-text-secondary); transition: background-color 0.14s, color 0.14s; }
.rail__apps:hover, .rail__apps[aria-expanded="true"] { background: var(--cf-surface-2); color: var(--cf-text); }
.rail__apps:focus-visible { outline: 2px solid var(--al-blue); outline-offset: 1px; }
.side-collapsed .rail__apps { margin-top: 0.35rem; }
.rail__app[hidden] { display: none; }
.rail__apptitle { display: flex; align-items: center; gap: 0.55rem; margin: 0.35rem 0.4rem 0.1rem; padding: 0.4rem 0.45rem; font-size: 0.86rem; font-weight: 600; color: var(--cf-text); }
.side-collapsed .rail__apptitle span:last-child { display: none; }
.side-collapsed .rail__apptitle { justify-content: center; margin-inline: 0; padding-inline: 0; }

.app-ico { flex: none; display: inline-grid; place-items: center; width: 1.9rem; height: 1.9rem; border-radius: 0.55rem; background: color-mix(in srgb, var(--tone) 16%, transparent); color: var(--tone); }
.rail__apptitle .app-ico { width: 1.5rem; height: 1.5rem; border-radius: 0.45rem; }
.app-ico--blue { --tone: #2f6fed; }
.app-ico--green { --tone: #12805c; }
.app-ico--amber { --tone: #b7791f; }
.app-ico--purple { --tone: #7c4dcc; }
:root[data-theme="dark"] .app-ico--blue { --tone: #7ea6ff; }
:root[data-theme="dark"] .app-ico--green { --tone: #4cc79a; }
:root[data-theme="dark"] .app-ico--amber { --tone: #f0b85a; }
:root[data-theme="dark"] .app-ico--purple { --tone: #b692f6; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .app-ico--blue { --tone: #7ea6ff; }
  :root:not([data-theme="light"]) .app-ico--green { --tone: #4cc79a; }
  :root:not([data-theme="light"]) .app-ico--amber { --tone: #f0b85a; }
  :root:not([data-theme="light"]) .app-ico--purple { --tone: #b692f6; }
}

ion-popover.cf-apps { --width: 19.5rem; }
.cf-apps__label { margin: 0.45rem 0.6rem 0.3rem; }
.cf-apps__grid { display: grid; gap: 0.15rem; padding: 0 0.15rem 0.15rem; }
.app-tile { position: relative; display: flex; align-items: center; gap: 0.75rem; padding: 0.55rem 0.6rem; border-radius: 0.7rem; color: var(--cf-text); text-decoration: none; transition: background-color 0.14s; }
a.app-tile:hover, a.app-tile:focus-visible { background: var(--cf-surface-2); outline: 0; }
.app-tile.is-current { background: var(--cf-surface-2); }
.app-tile .app-ico { width: 2.3rem; height: 2.3rem; border-radius: 0.7rem; }
.app-tile__t { display: grid; gap: 0.1rem; min-width: 0; line-height: 1.25; }
.app-tile__t strong { font-size: 0.88rem; font-weight: 600; }
.app-tile__t small { font-size: 0.74rem; color: var(--cf-text-muted); }
.app-tile__on { margin-left: auto; color: var(--al-blue); display: grid; }
.app-tile.is-soon { opacity: 0.55; cursor: default; }
.app-tile.is-soon .rail__soon { margin-left: auto; }

/* ---- Middle-sized screens: the icon-only rail hides every label, and the top bar keeps to one tidy line ------------------- */
@media (max-width: 1100px) and (min-width: 701px) {
  .rail__apptitle span:last-child, .rail__pinned-text { display: none; }
  .rail__apptitle { justify-content: center; margin-inline: 0; padding-inline: 0; }
  .rail__section--pinned .rail__link { justify-content: center; }
  .rail__apps { margin-top: 0.35rem; }
}
.topbar__crumbs > a, .topbar__crumbs > span { flex: none; white-space: nowrap; }
.topbar__crumbs > .topbar__title { flex: 0 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
@media (max-width: 1180px) {
  .topbar__crumbs a:nth-of-type(n+2), .topbar__crumbs a:nth-of-type(n+2) + span { display: none; }     /* Home / title only */
}
.editor-top-actions { flex: none; flex-wrap: nowrap; white-space: nowrap; }
.editor-top-actions ion-button { flex: none; white-space: nowrap; }
.save-indicator { white-space: nowrap; flex: none; }
@media (max-width: 1180px) { .editor-top-actions .save-text { display: none; } }

/* "Add ..." items in an accordion: a small plus before the label */
.cf-subnav__link--add { display: flex; align-items: center; justify-content: flex-start; gap: 0.4rem; }
.cf-subnav__link--add .ico { color: var(--cf-text-muted); flex: none; }
.cf-subnav__link--add.is-active .ico, .cf-subnav__link--add:hover .ico { color: inherit; }

/* The "Add" entry of an accordion: one row that opens a small menu of what can be added */
.cf-subnav__link--add { width: 100%; text-align: left; }
.cf-subnav__link--add > span { flex: 1; min-width: 0; }
.cf-subnav__link--add[aria-expanded="true"] { background: var(--cf-surface-2); color: var(--cf-text); }
.cf-addmenu { position: fixed; z-index: 24000; width: 16rem; padding: 0.3rem; background: var(--cf-surface); color: var(--cf-text); border: 1px solid var(--cf-border); border-radius: 0.8rem; box-shadow: 0 18px 44px -10px rgba(0, 0, 0, 0.4); }
.cf-addmenu[hidden] { display: none; }
.cf-addmenu__i { display: flex; align-items: center; gap: 0.7rem; padding: 0.5rem 0.55rem; border-radius: 0.6rem; color: inherit; text-decoration: none; }
.cf-addmenu__i:hover, .cf-addmenu__i:focus-visible { background: var(--cf-surface-2); outline: 0; }
.cf-addmenu__ico { flex: none; display: grid; place-items: center; width: 2rem; height: 2rem; border-radius: 0.55rem; border: 1px solid var(--cf-border); background: var(--cf-surface); color: var(--cf-text-secondary); }
.cf-addmenu__t { display: grid; line-height: 1.25; }
.cf-addmenu__t strong { font-size: 0.86rem; font-weight: 600; }
.cf-addmenu__t small { font-size: 0.74rem; color: var(--cf-text-muted); }

/* Pop-ups fade and glide in and out instead of appearing at once */
.cf-addmenu { opacity: 0; transform: translateX(-8px) scale(0.98); transform-origin: left top; pointer-events: none; transition: opacity 0.18s ease, transform 0.18s cubic-bezier(0.2, 0.8, 0.2, 1); }
.cf-addmenu.is-open { opacity: 1; transform: none; pointer-events: auto; }
@media (prefers-reduced-motion: reduce) { .cf-addmenu { transition: none; } }