/* Nightfly on Ionic (iOS mode). Tokens first: the protocol's colour roles (§9.5) as variables, light
   and dark; a palette (§8.2) overrides them on a scope's header or card. Then the app's own pieces.
   Ionic's own variables (--ion-*) are the platform skin; another mode (md) would restyle the chrome. */

:root {
  --role-surface: #ffffff;
  --role-text: #000000;
  --role-muted: #8a8a8e;
  --role-accent: #007aff;
  --role-good: #34c759;
  --role-info: #007aff;
  --role-warning: #ff9500;
  --role-alert: #ff3b30;
  --grouped-bg: #f2f2f7;
  --row-sep: rgba(60, 60, 67, 0.18);
  --ion-color-primary: #007aff;
  --ion-font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Helvetica Neue", system-ui, sans-serif;
}
@media (prefers-color-scheme: dark) {
  :root {
    --role-surface: #1c1c1e;
    --role-text: #ffffff;
    --role-muted: #98989f;
    --role-accent: #0a84ff;
    --role-good: #30d158;
    --role-info: #0a84ff;
    --role-warning: #ff9f0a;
    --role-alert: #ff453a;
    --grouped-bg: #000000;
    --row-sep: rgba(84, 84, 88, 0.6);
    --ion-color-primary: #0a84ff;
  }
}

/* `hidden` always wins over a component's own display (grid, flex). */
[hidden] { display: none !important; }

/* A stack set at once (ui/router.js setAll) has nothing to animate in: its page shows without waiting
   for Ionic's frame callback, which WebKit sometimes holds back until a touch. */
ion-nav.nav-setting > .ion-page-invisible { opacity: 1; }

/* Grouped pages (Settings, an entry, Home) sit on the grouped background, like iOS Settings. */
ion-content.grouped { --background: var(--grouped-bg); }
/* Inset lists on a grouped page: cells on their own surface (white; dark grey in dark mode), as iOS. */
ion-content.grouped ion-list[inset], ion-content.grouped ion-list.list-inset { --ion-item-background: var(--role-surface); background: var(--role-surface); }
ion-content.grouped ion-header.condense ion-toolbar { --background: var(--grouped-bg); }
.ion-page:has(> ion-content.grouped) > ion-header ion-toolbar { --background: var(--grouped-bg); }

/* ---------- colour roles and icons ---------- */
.role-surface { --role: var(--role-surface); } .role-text { --role: var(--role-text); }
.role-muted { --role: var(--role-muted); } .role-accent { --role: var(--role-accent); }
.role-good { --role: var(--role-good); } .role-info { --role: var(--role-info); }
.role-warning { --role: var(--role-warning); } .role-alert { --role: var(--role-alert); }
.role-secondary { --role: var(--role-secondary, var(--role-accent)); } .role-tertiary { --role: var(--role-tertiary, var(--role-accent)); }
.role-on-accent { --role: var(--role-on-accent, #fff); } .role-on-secondary { --role: var(--role-on-secondary, #fff); } .role-on-tertiary { --role: var(--role-on-tertiary, #fff); }
ion-icon.role-accent { color: var(--role-accent); }

/* A content icon: the server's PNG as a mask, tinted by its role (§9.8). */
.ph { display: inline-block; background-color: var(--role, var(--role-muted)); mask-size: contain; mask-repeat: no-repeat;
  mask-position: center; -webkit-mask-size: contain; -webkit-mask-repeat: no-repeat; -webkit-mask-position: center; flex: none; }
.ph-s { width: 14px; height: 14px; } .ph-m { width: 22px; height: 22px; } .ph-l { width: 40px; height: 40px; }
.emoji { font-size: 20px; line-height: 22px; width: 22px; text-align: center; }
.letter-icon { width: 22px; height: 22px; border-radius: 6px; font-size: 13px; font-weight: 600; line-height: 22px; text-align: center;
  color: var(--role-muted); background: color-mix(in srgb, var(--role-muted) 16%, transparent); flex: none; }
.entry-mark .letter-icon { width: 44px; height: 44px; line-height: 44px; font-size: 22px; border-radius: 11px; }
.logo { width: 40px; height: 40px; border-radius: 9px; object-fit: contain; }

/* ---------- the tab bar and the sidebar ---------- */
ion-tab-bar ion-icon { font-size: 26px; }
@media (min-width: 900px) {
  #tab-bar { display: none; }
}
#sidebar { --width: 280px; }
#sidebar ion-content { --background: var(--grouped-bg); }
#sidebar ion-content { --padding-top: env(safe-area-inset-top); } /* no heading: the title bar says Nightfly */
#sidebar ion-list { background: transparent; padding: 14px 8px 4px; }
.side-item { --background: transparent; --border-radius: 10px; --min-height: 40px; border-radius: 10px; font-size: 15px; }
.side-item.current { --background: rgba(120, 120, 128, 0.16); font-weight: 600; }
.side-item.nested { --padding-start: 30px; }
.side-icon { display: flex; align-items: center; width: 24px; margin-inline-end: 10px; color: var(--role-accent); }
.side-icon ion-icon { font-size: 20px; }
/* Section headings as in Mail or Notes: a normal gap above, none of Ionic's iOS list-header height. */
#sidebar ion-list-header { font-size: 13px; font-weight: 600; text-transform: uppercase; color: var(--role-muted);
  min-height: 0; margin-top: 18px; padding-top: 0; padding-bottom: 2px; }
#sidebar ion-list-header ion-label { margin: 0; }
.side-gap { height: 18px; }

/* ---------- the title menu ("Inbox ▾") ---------- */
.title-menu { all: unset; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; font: inherit; color: inherit; }
.title-menu .caret { font-size: 14px; color: var(--role-accent); }
.title-menu.large .caret { font-size: 20px; }
.scope-popover { --width: 300px; --max-height: 70vh; }
.scope-choice.depth-1 { --padding-start: 32px; }
.scope-choice.current { font-weight: 600; }
.segment-bar { padding: 2px 16px 10px; }

/* ---------- rows (Inbox, topic pages, Home's latest) ---------- */
ion-list.rows { padding: 0; }
.row { --padding-start: 10px; --inner-padding-end: 14px; --min-height: 64px; }
.row .lead { display: flex; align-items: center; gap: 6px; margin: 10px 10px 10px 0; align-self: flex-start; padding-top: 2px; }
.unread-dot { width: 9px; height: 9px; border-radius: 50%; background: transparent; flex: none; }
.row.unread .unread-dot { background: var(--role-accent); }
.row ion-label { margin: 9px 0; }
.row-top { display: flex; align-items: baseline; gap: 8px; }
.row-top h3 { flex: 1; margin: 0; font-size: 16px; font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: var(--role-text); }
.row.unread .row-top h3 { font-weight: 600; }
.row-time { flex: none; font-size: 14px; color: var(--role-muted); }
/* Two lines at most, ending in "…" as in Mail. Ionic's `.sc-ion-label-ios-s p { overflow: inherit }` is
   more specific, and Safari then drew the clamped lines over the topic below: hence the !important,
   and a height of two lines whatever the clamp does. */
.row-msg { margin: 2px 0 0; font-size: 14px !important; line-height: 1.3 !important; max-height: 2.6em; color: var(--role-muted) !important;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden !important; white-space: normal !important; }
.row-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 4px 0 0 !important; font-size: 12px !important; }
.row-topic { color: var(--role-muted); }
.row-stale, .row-note { color: var(--role-muted); font-style: italic; }
ion-item-divider.day { --background: var(--ion-background-color, #fff); --color: var(--role-text); font-size: 15px; font-weight: 600; min-height: 34px; --padding-start: 16px; border: none; }
ion-item-option ion-icon[slot="top"] { font-size: 22px; margin-bottom: 2px; }

/* A level is word and icon, never colour alone (§9.3). Stale shows greyed (§5). */
.level-pill, .sev-pill { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px 1px 5px; border-radius: 999px;
  font-size: 12px; font-weight: 500; color: var(--role); background: color-mix(in srgb, var(--role) 14%, transparent); }
.level-pill.stale { text-decoration: line-through; }
.sev-pill.sev-info { --role: var(--role-info); } .sev-pill.sev-warning { --role: var(--role-warning); } .sev-pill.sev-critical { --role: var(--role-alert); }

/* ---------- a topic or cluster page's header (its palette, logo, icon) ---------- */
.scope-header { display: flex; gap: 14px; align-items: center; margin: 4px 16px 12px; padding: 14px; border-radius: 14px;
  background: color-mix(in srgb, var(--role-accent) 12%, var(--role-surface)); border: 1px solid color-mix(in srgb, var(--role-accent) 25%, transparent); }
.scope-mark { flex: none; width: 48px; height: 48px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--role-surface); }
.scope-mark ion-icon { font-size: 28px; color: var(--role-accent); }
.scope-name { font-weight: 600; font-size: 15px; word-break: break-word; }
.scope-desc { font-size: 14px; color: var(--role-muted); margin-top: 2px; }
.scope-counts { font-size: 13px; color: var(--role-accent); margin-top: 4px; }
.scope-counts:empty { display: none; }

/* ---------- an entry ---------- */
.entry-hero { text-align: center; padding: 8px 20px 14px; }
.entry-mark { display: flex; justify-content: center; margin: 6px 0 8px; }
.entry-mark .ph-m { width: 44px; height: 44px; } .entry-mark .emoji { font-size: 40px; line-height: 44px; width: auto; }
.entry-hero h1 { font-size: 22px; font-weight: 700; margin: 0 0 4px; }
.entry-topic { all: unset; cursor: pointer; color: var(--role-accent); font-size: 14px; word-break: break-word; }
.entry-state { display: flex; gap: 8px; justify-content: center; align-items: center; flex-wrap: wrap; margin-top: 8px; font-size: 13px; }
.entry-message { white-space: pre-wrap; font-size: 17px; line-height: 1.45; color: var(--role-text); margin: 6px 22px 14px;
  overflow-wrap: anywhere; user-select: text; -webkit-user-select: text; }
.alert-card { margin: 0 16px 8px; padding: 12px 14px; border-radius: 12px; background: var(--role-surface);
  border-left: 4px solid var(--role-alert); }
.alert-card.sev-warning { border-left-color: var(--role-warning); } .alert-card.sev-info { border-left-color: var(--role-info); }
.alert-card.closed { border-left-color: var(--role-muted); opacity: 0.85; }
.alert-head { display: flex; align-items: center; gap: 8px; font-size: 16px; }
.alert-card p { margin: 6px 0 0; font-size: 14px; color: var(--role-muted); }
.alert-buttons { margin-top: 10px; }
.list-heading { margin: 22px 32px 6px; font-size: 13px; text-transform: uppercase; color: var(--role-muted); letter-spacing: 0.02em; }

/* ---------- Home's open alerts ---------- */
.alert-cards { display: grid; gap: 10px; margin: 0 16px; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); }
.home-alert { display: flex; align-items: center; gap: 10px; padding: 12px; border-radius: 14px; background: var(--role-surface); }
.home-alert-main { all: unset; cursor: pointer; flex: 1; display: flex; gap: 10px; align-items: center; min-width: 0; }
.home-alert-main strong { display: block; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- Settings ---------- */
.account-row { --min-height: 76px; }
.avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--role-accent); color: #fff; font-size: 26px; font-weight: 600;
  display: flex; align-items: center; justify-content: center; margin-inline-end: 14px; }
pre.diag { font-size: 12px; white-space: pre-wrap; }

/* ---------- the push banner, empty states ---------- */
.push-banner { display: flex; align-items: center; gap: 10px; padding: 10px 14px; padding-top: max(10px, env(safe-area-inset-top));
  background: color-mix(in srgb, var(--role-warning) 18%, var(--role-surface)); font-size: 14px; z-index: 20; }
.push-banner span { flex: 1; }
.push-banner ion-icon { font-size: 20px; color: var(--role-warning); flex: none; }
.empty { text-align: center; padding: 60px 24px; color: var(--role-muted); }
.empty-icon { font-size: 44px; opacity: 0.5; }
.muted { color: var(--role-muted); } .small { font-size: 13px; } .pad { padding: 0 32px; } .center { text-align: center; }
.center-spin { display: flex; justify-content: center; padding: 40px; }

/* ---------- search and filters (1.1) ---------- */
.inbox-search { padding: 0 8px 4px; }
.filter-chips { display: flex; flex-wrap: wrap; gap: 4px; padding: 0 12px 8px; }
.filter-chips ion-chip { margin: 0; height: 28px; font-size: 13px; --background: color-mix(in srgb, var(--role-accent) 14%, transparent); --color: var(--role-accent); }
.chip-x { font-size: 16px; margin-inline-start: 4px; }
ion-button.active ion-icon { color: var(--role-accent); }
.sheet-seg { padding: 0 16px; }
.filter-sheet ion-content.grouped { --background: var(--grouped-bg); }
/* Inset lists on a grouped page: cells on their own surface (white; dark grey in dark mode), as iOS. */
ion-content.grouped ion-list[inset], ion-content.grouped ion-list.list-inset { --ion-item-background: var(--role-surface); background: var(--role-surface); }

/* ---------- welcome: signing in, which device ---------- */
.welcome { position: fixed; inset: 0; z-index: 1000; overflow-y: auto; background: var(--grouped-bg);
  padding: max(40px, env(safe-area-inset-top)) 20px max(24px, env(safe-area-inset-bottom)); }
.welcome-inner { max-width: 420px; margin: 0 auto; text-align: center; }
.welcome-logo { width: 76px; height: 76px; border-radius: 18px; margin: 24px auto 12px; display: block; }
.welcome h1 { font-size: 28px; font-weight: 700; margin: 0 0 6px; }
.welcome p { margin: 0 0 18px; line-height: 1.4; }
.welcome-form { display: grid; gap: 10px; text-align: start; }
.welcome-or { display: flex; align-items: center; gap: 10px; margin: 18px 0; color: var(--role-muted); font-size: 13px; }
.welcome-or::before, .welcome-or::after { content: ''; flex: 1; height: 1px; background: var(--row-sep); }
.welcome-note { min-height: 1.4em; margin-top: 14px !important; color: var(--role-muted); }
.welcome-note.bad { color: var(--role-alert); }
.welcome-list { text-align: start; margin: 0 0 16px; }
body.welcoming ion-app { visibility: hidden; }

/* ---------- Settings pages ---------- */
.list-foot { margin: 6px 32px 0; font-size: 13px; line-height: 1.35; color: var(--role-muted); }
.list-foot.warn { color: var(--role-warning); font-weight: 500; margin-top: 14px; }
ion-item.danger-row { --color: var(--role-alert); }
ion-item ion-label p { color: var(--role-muted); }
.toggle-sub { font-size: 13px; color: var(--role-muted); margin: 2px 0 0; }
.device-head { margin: 10px 32px 0; font-size: 15px; }
.depth-1 { --padding-start: 36px; }
.day-pills { display: flex; gap: 6px; flex-wrap: wrap; padding: 6px 0; }
.day-pill { all: unset; cursor: pointer; padding: 6px 10px; border-radius: 999px; font-size: 14px;
  background: color-mix(in srgb, var(--role-muted) 16%, transparent); color: var(--role-text); }
.day-pill.on { background: var(--role-accent); color: #fff; }
.status-card { margin: 12px 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--role-surface);
  border-left: 4px solid var(--role); }
.status-card strong { color: var(--role); font-size: 17px; }
.status-card p { margin: 6px 0 0; font-size: 14px; color: var(--role-muted); }
code.secret { display: block; font-size: 13px; word-break: break-all; user-select: all; -webkit-user-select: all; margin-top: 4px; color: var(--role-text); }

/* ---------- Home: the board of cards (§11) ---------- */
.home-body { padding-bottom: 24px; }
.board { display: grid; gap: 12px; padding: 4px 16px 24px; grid-template-columns: repeat(2, minmax(0, 1fr));
  grid-auto-rows: 128px; grid-auto-flow: row dense; }
.board-card.size-s { grid-column: span 1; }
.board-card.size-m { grid-column: span 2; }
.board-card.size-l { grid-column: span 2; grid-row: span 2; }
@media (min-width: 700px) {
  .board { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); grid-auto-rows: 150px; gap: 16px; padding: 8px 24px 32px; }
}
.board-card { position: relative; border-radius: 20px; overflow: hidden; cursor: pointer; background: var(--role-surface);
  transition: transform 0.12s ease; }
.board-card:active { transform: scale(0.98); }
.board-card:focus-visible { outline: 3px solid var(--role-accent); outline-offset: 2px; }
/* Editing the board: cards wiggle (not with reduced motion), with − and their size on them. */
@keyframes wiggle { 0% { transform: rotate(-0.7deg); } 50% { transform: rotate(0.7deg); } 100% { transform: rotate(-0.7deg); } }
.board-card.editing { animation: wiggle 0.32s ease-in-out infinite; overflow: visible; touch-action: pan-y; user-select: none; -webkit-user-select: none;
  -webkit-touch-callout: none; }
/* Held long enough to move (a finger): still, and a little bigger. */
.board-card.grabbed { animation: none; transform: scale(1.04); transition: transform 0.15s ease; z-index: 4; }
/* On Home a card is held to move it: no long-press menu or text selection to take the hold. */
.board:not(.editing-board) > .board-card { touch-action: pan-y; -webkit-touch-callout: none; user-select: none; -webkit-user-select: none; }
.board-card.editing > .card { border-radius: 20px; pointer-events: none; }
.board-card.dragging { animation: none; z-index: 5; opacity: 0.92; box-shadow: 0 12px 32px rgba(0, 0, 0, 0.25); transition: none; }
@media (prefers-reduced-motion: reduce) { .board-card.editing { animation: none; } }
.card-remove { all: unset; cursor: pointer; position: absolute; top: -8px; left: -8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grouped-bg); display: flex; align-items: center; justify-content: center; }
.card-remove ion-icon { font-size: 26px; color: var(--role-muted); }
.card-cog { all: unset; cursor: pointer; position: absolute; top: -8px; right: -8px; z-index: 2; width: 26px; height: 26px; border-radius: 50%;
  background: var(--grouped-bg); display: flex; align-items: center; justify-content: center; }
.card-cog ion-icon { font-size: 22px; color: var(--role-muted); }
ion-popover.card-settings { --width: 290px; }
.card-settings-body { padding: 4px 0 6px; }
.card-settings-body ion-segment { margin: 0 12px 6px; width: auto; }
.card-update { all: unset; cursor: pointer; position: absolute; right: 8px; bottom: 8px; z-index: 2; padding: 3px 10px; border-radius: 999px;
  font-size: 12px; font-weight: 600; background: var(--role-accent); color: #fff; }
.edit-dot { display: inline-block; width: 8px; height: 8px; margin-left: 5px; border-radius: 50%; background: var(--role-alert); vertical-align: 2px; }
.edit-dot[hidden] { display: none; }
/* "Add a card": suggestions drawn as they'll look, each with Add. */
.add-sheet .section-title { margin: 22px 20px 2px; font-size: 22px; font-weight: 700; }
.preview-board { padding-top: 4px; grid-auto-rows: auto; }
.suggest-item { display: flex; flex-direction: column; gap: 6px; }
.suggest-item.size-s { grid-column: span 1; } .suggest-item.size-m, .suggest-item.size-l { grid-column: span 2; }
.suggest-item .board-card { height: 128px; cursor: default; } .suggest-item.size-l .board-card { height: 268px; }
.suggest-foot { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 0 4px; min-height: 30px; }
.promoted-mark { position: absolute; top: 8px; right: 8px; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 600;
  background: var(--role-alert); color: #fff; }

.card { height: 100%; box-sizing: border-box; padding: 12px 14px; display: flex; flex-direction: column; gap: 4px; overflow: hidden;
  color: var(--role-text); }
.card.filled { background: var(--card-bg); }
/* The ink on a card (a fill's readable text, or the set's `card.text`), and its muted shade. */
.card.inked { --role-text: var(--card-ink); --role-muted: var(--card-muted, color-mix(in srgb, var(--card-ink) 70%, var(--card-bg, var(--role-surface)))); color: var(--card-ink); }
/* What a card emphasises with its accent (the set's `card.accent`, or a template's): icons too. */
.card .ph.role-accent { --role: var(--card-accent, var(--role-accent)); }
.card.stale { filter: grayscale(1); opacity: 0.75; }
.slot { min-width: 0; }
.slot-head { display: flex; align-items: center; gap: 8px; }
.slot-head .logo { width: 24px; height: 24px; border-radius: 6px; }
.slot-headline { font-size: 15px; font-weight: 600; line-height: 1.25; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--role, var(--card-accent, inherit)); }
.slot-subhead { font-size: 13px; color: var(--role, var(--role-muted)); }
.slot-body { font-size: 13px; color: var(--role, var(--role-muted)); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.slot-metric .metric-value { font-size: 28px; font-weight: 700; line-height: 1.1; color: var(--role, var(--card-accent, inherit)); font-variant-numeric: tabular-nums; }
.slot-metric.size-xl .metric-value { font-size: 40px; }
.slot-metric.size-l .metric-value { font-size: 34px; }
.slot-metric.size-s .metric-value { font-size: 20px; }
.metric-label { font-size: 12px; color: var(--role-muted); }
.slot-metrics { display: flex; gap: 16px; flex-wrap: wrap; }
.metrics-item .metric-value { font-size: 20px; font-weight: 600; color: var(--role, var(--role-text)); font-variant-numeric: tabular-nums; }
.slot-time { font-size: 12px; color: var(--role, var(--role-muted)); }
.slot-facts { display: grid; grid-template-columns: auto 1fr; gap: 1px 10px; margin: 0; font-size: 12px; }
.slot-facts dt { color: var(--role-muted); } .slot-facts dd { margin: 0; color: var(--role, inherit); }
.slot-logo { margin-top: auto; } .slot-logo .logo { width: 32px; height: 32px; }
.badge-pill { display: inline-block; align-self: flex-start; padding: 1px 8px; border-radius: 999px; font-size: 12px; font-weight: 600;
  background: color-mix(in srgb, var(--role) 16%, transparent); color: var(--role); }
.slot-steps { display: flex; gap: 4px; } .slot-steps .step { flex: 1; height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--role) 22%, transparent); }
.slot-steps .step.done { background: var(--role); }
.slot-progress { height: 6px; border-radius: 3px; background: color-mix(in srgb, var(--role-muted) 25%, transparent); overflow: hidden; }
.slot-progress-bar { height: 100%; background: var(--role-accent); }
.stale-note { font-size: 12px; font-style: italic; color: var(--role-muted); margin-top: auto; }
.card-ack { all: unset; cursor: pointer; align-self: flex-start; margin-top: auto; padding: 4px 10px; border-radius: 8px; font-size: 13px; font-weight: 600;
  background: var(--alert-solid); color: #fff; }
/* The alert colour as the page has it: a filled card may draw its own --role-alert in its ink. */
:root { --alert-solid: var(--role-alert); }
/* Fitting (§9.2): the highest-numbered priority goes first; priority 1 always stays. */
.card[data-fit="4"] .p-5,
.card[data-fit="3"] :is(.p-4, .p-5),
.card[data-fit="2"] :is(.p-3, .p-4, .p-5),
.card[data-fit="1"] :is(.p-2, .p-3, .p-4, .p-5) { display: none; }

.setup-card { margin: 8px 16px 0; padding: 16px; border-radius: 14px; background: var(--role-surface); }
.setup-card p { margin: 6px 0 12px; font-size: 14px; }

/* ---------- takeover (§6.3) ---------- */
.takeover-banner { position: fixed; z-index: 900; left: 8px; right: 8px; top: max(8px, env(safe-area-inset-top)); display: flex; align-items: center; gap: 8px;
  padding: 10px 12px; border-radius: 14px; background: var(--role-surface); box-shadow: 0 6px 24px rgba(0, 0, 0, 0.25); border-left: 4px solid var(--role-alert); }
.takeover-banner.sev-warning { border-left-color: var(--role-warning); } .takeover-banner.sev-info { border-left-color: var(--role-info); }
.takeover-text { flex: 1; min-width: 0; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.takeover { position: fixed; inset: 0; z-index: 950; display: flex; align-items: center; justify-content: center; padding: 24px;
  background: color-mix(in srgb, var(--role-alert) 22%, rgba(0, 0, 0, 0.75)); backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.takeover.sev-warning { background: color-mix(in srgb, var(--role-warning) 20%, rgba(0, 0, 0, 0.75)); }
.takeover-inner { width: 100%; max-width: 440px; display: grid; gap: 14px; }
.takeover-head { display: flex; align-items: center; gap: 10px; color: #fff; font-size: 20px; }
.takeover-head .muted { color: rgba(255, 255, 255, 0.75); font-size: 14px; }
.takeover .card { min-height: 160px; border-radius: 18px; background: var(--role-surface); }
.takeover .card.filled { background: var(--card-bg); } /* a set's own fill (1.2) */
.takeover-buttons { display: grid; gap: 6px; }

/* ---------- Appearance (Settings → a topic or cluster) ---------- */
.appearance-preview { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); padding: 12px 16px 4px; }
.appearance-preview .board-card { grid-column: span 2; height: 128px; cursor: default; }
.swatch-slot { display: flex; align-items: center; justify-content: center; width: 28px; margin-right: 4px; }
.swatch { display: inline-block; width: 24px; height: 24px; border-radius: 6px; box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.2); }
.swatch-slot .logo { width: 28px; height: 28px; border-radius: 7px; }
.colour-input { position: fixed; left: -100px; top: 0; width: 1px; height: 1px; opacity: 0; }

/* Trial (Settings → Diagnostics): solid headers, no see-through blur behind the top bar. */
html.solid-headers ion-header .header-background { -webkit-backdrop-filter: none; backdrop-filter: none; }
html.solid-headers ion-header ion-toolbar { --opacity: 1; }
html.solid-headers ion-header.header-translucent { --opacity: 1; }