/*
 * Internal ui 1.3.0 — shared component classes of Landings Admin and LP Constructor.
 * Loads after tokens.css. Every value is a token; no hex here.
 * Classes are global on purpose: the same file styles the design canvases and the code package.
 * .is-hover / .is-focus / .is-open are static stand-ins for :hover, :focus-visible and an open popup on canvases.
 */

/* ---------- base ---------- */
:root, [data-theme='light'] { color-scheme: light; }
[data-theme='dark'] { color-scheme: dark; }
.app { position: relative; display: flex; flex-direction: column; min-width: 0; background: var(--bg); color: var(--text);
  font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); -webkit-font-smoothing: antialiased; }
.app *, .app *::before, .app *::after { box-sizing: border-box; }
.app a { color: var(--accent-text); text-decoration: none; }
.app a:hover { text-decoration: underline; }
.app a:focus-visible { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.app h1, .app h2, .app h3, .app p { margin: 0; }
.app button { font-family: inherit; }
.mono { font-family: var(--font-mono); }
.muted { color: var(--text-muted); }
.strong { font-weight: 600; color: var(--text); }
.nowrap { white-space: nowrap; }
.num { font-variant-numeric: tabular-nums; }
.trunc { display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.row { display: flex; align-items: center; gap: var(--space-2); min-width: 0; }
.col { display: flex; flex-direction: column; min-width: 0; }
.sp { flex: 1; }
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }
.ic { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.ic-xs { width: 12px; height: 12px; }
.ic-sm { width: 14px; height: 14px; }
.ic-lg { width: 28px; height: 28px; stroke-width: 1.75; }
.ic-xl { width: 40px; height: 40px; stroke-width: 1.5; }
.code { padding: 1px 4px; border-radius: 3px; background: var(--bg-subtle); font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes pulse { 50% { opacity: 0.45; } }

/* ---------- Header ---------- */
.hdr { position: relative; display: flex; align-items: center; justify-content: space-between; gap: var(--space-4);
  height: var(--header-height); padding: 0 var(--space-5); background: var(--surface); border-bottom: 1px solid var(--border); flex-shrink: 0; }
.hdr-dev { box-shadow: inset 0 3px 0 var(--warning); }
.hdr-dev .logo-mark { background: var(--warning); }
.hdr-left, .hdr-right { display: flex; align-items: center; gap: var(--space-3); min-width: 0; }
.hdr-left { flex: 1; }
.logo { display: inline-flex; align-items: center; gap: var(--space-2); border-radius: var(--radius-md); font-size: var(--text-md); font-weight: 600; white-space: nowrap; }
.app a.logo { color: var(--text); }
.app a.logo:hover, .app a.logo.is-hover { color: var(--accent-text); text-decoration: none; }
.app a.logo:focus-visible, .app a.logo.is-focus { outline: none; box-shadow: var(--focus-ring); }
.logo-mark { display: flex; align-items: center; justify-content: center; width: 26px; height: 26px; border-radius: var(--radius-md); background: var(--accent); color: var(--accent-contrast); }
.logo-img { display: flex; width: 26px; height: 26px; flex-shrink: 0; }
.logo-img > img, .logo-img > svg { display: block; width: 100%; height: 100%; }
.nav { display: flex; align-items: center; gap: 2px; margin-left: var(--space-3); }
.nav a { display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 var(--space-3); border-radius: var(--radius-md); font-size: var(--text-md); font-weight: 500; white-space: nowrap; }
.app .nav a { color: var(--text-muted); text-decoration: none; }
.app .nav a:hover, .app .nav a.is-hover { color: var(--text); background: var(--bg-subtle); text-decoration: none; }
.app .nav a[aria-current='page'] { color: var(--accent-text); background: var(--accent-soft); }
.app .nav a:focus-visible, .app .nav a.is-focus { outline: none; box-shadow: var(--focus-ring); }
.user-btn { display: inline-flex; align-items: center; gap: var(--space-2); height: 40px; padding: 0 var(--space-2) 0 var(--space-1);
  border: 0; border-radius: var(--radius-md); background: transparent; color: var(--text); font: inherit; cursor: pointer; }
.user-btn:hover, .user-btn.is-hover, .user-btn.is-open { background: var(--bg-subtle); }
.user-btn:focus-visible, .user-btn.is-focus { outline: none; box-shadow: var(--focus-ring); }
.user-name { font-size: var(--text-base); font-weight: 500; white-space: nowrap; }
.avatar { display: flex; align-items: center; justify-content: center; width: 32px; height: 32px; border-radius: 50%; overflow: hidden;
  background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-base); font-weight: 600; flex-shrink: 0; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }
.avatar-sm { width: 24px; height: 24px; font-size: var(--text-xs); }
.user-card { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-2); }
.role-box { display: flex; flex-direction: column; gap: 4px; padding: var(--space-2); }
.role-box .hint { line-height: 1.4; }
.theme-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-1) var(--space-2) var(--space-2); }

/* ---------- Env tag: contour + environment pill, and the short chip ---------- */
.env { display: inline-flex; align-items: center; gap: var(--space-2); height: 26px; padding: 0 var(--space-1) 0 var(--space-2);
  border: 1px solid var(--border-strong); border-radius: var(--radius-md); font-size: var(--text-sm); color: var(--text-muted); white-space: nowrap; }
.env-contour { font-weight: 600; color: var(--text); }
.env-host { color: var(--text-muted); }
.env-tag { display: inline-flex; align-items: center; gap: 4px; height: 18px; padding: 0 6px; border-radius: var(--radius-sm);
  font-size: var(--text-xs); font-weight: 600; letter-spacing: 0.04em; text-transform: uppercase; }
.env-prod .env-tag { background: var(--bg-subtle); color: var(--text); }
.env-dev { border-color: var(--warning); background: var(--warning-soft); color: var(--warning-text); }
.env-dev .env-contour, .env-dev .env-host { color: var(--warning-text); }
.env-dev .env-tag { background: var(--warning-text); color: var(--surface); }
.env-chip { display: inline-flex; align-items: center; height: 18px; padding: 0 6px; border-radius: var(--radius-sm); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.04em; text-transform: uppercase; flex-shrink: 0; }
.tag-prod { background: var(--bg-subtle); color: var(--text); }
.tag-test { background: var(--warning-soft); color: var(--warning-text); }

/* ---------- 1.2: Breadcrumbs ---------- */
.crumbs { display: flex; align-items: center; gap: var(--space-1); min-width: 0; font-size: var(--text-base); color: var(--text-muted); }
.crumbs > .ic { width: 14px; height: 14px; color: var(--text-faint); }
.crumbs a { border-radius: var(--radius-sm); white-space: nowrap; }
.app .crumbs a { color: var(--text-muted); }
.app .crumbs a:hover, .app .crumbs a.is-hover { color: var(--text); text-decoration: none; }
.app .crumbs a:focus-visible, .app .crumbs a.is-focus { outline: none; box-shadow: var(--focus-ring); }
.crumbs .here { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; color: var(--text); font-weight: 500; }
/* In the header: the document title is the current item. */
.crumbs-lg { gap: var(--space-2); font-size: var(--text-md); }
.crumbs-lg a { font-weight: 500; }
.crumbs-lg .here { max-width: 360px; font-weight: 600; }

/* ---------- Page layout ---------- */
.page { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.page-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-4); padding: var(--space-5) var(--space-8) 0; }
.page-title { font-size: var(--text-2xl); font-weight: 700; letter-spacing: -0.01em; line-height: var(--leading-tight); }
.page-count { font-size: var(--text-md); font-weight: 500; color: var(--text-muted); }
.toolbar { display: flex; align-items: center; flex-wrap: wrap; gap: var(--space-2); padding: var(--space-4) var(--space-8); }
.content { padding: 0 var(--space-8) var(--space-8); min-width: 0; }
/* Fill: a list page takes the window, only the table scrolls.
   .page.is-fill is a direct child of .app; the header and banners are its siblings. */
.app:has(> .page.is-fill) { height: 100dvh; min-height: 560px; overflow: hidden; }
.app:has(> .page.is-fill) > :not(.page) { flex-shrink: 0; }
.app > .page.is-fill { flex: 1 1 0; min-height: 0; }
.page.is-fill > * { flex-shrink: 0; }
.page.is-fill > .content { flex: 1 1 0; min-height: 0; display: flex; flex-direction: column; }
.page.is-fill > .content > * { flex-shrink: 0; }
.page.is-fill > .content > .tbl-box { flex: 0 1 auto; min-height: 0; }
.page.is-fill .tbl-box > .tbl-scroll { flex: 0 1 auto; }
.page.is-fill .tbl-box > .tbl-foot { flex-shrink: 0; }

/* ---------- Button ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); height: var(--control-height-md);
  padding: 0 var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md); font: 500 var(--text-md) / 1 var(--font-ui);
  cursor: pointer; white-space: nowrap; text-decoration: none; transition: background var(--duration-fast), border-color var(--duration-fast), color var(--duration-fast); }
.app a.btn, .app a.btn:hover { text-decoration: none; }
.btn:focus-visible, .btn.is-focus { outline: none; box-shadow: var(--focus-ring); }
.btn:disabled, .btn[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.btn-sm { height: var(--control-height-sm); padding: 0 var(--space-3); border-radius: var(--radius-sm); font-size: var(--text-base); }
.btn-icon { padding: 0; width: var(--control-height-md); }
.btn-sm.btn-icon { width: var(--control-height-sm); }
.btn-block { width: 100%; }
.btn-primary { background: var(--accent); color: var(--accent-contrast); }
.app a.btn-primary { color: var(--accent-contrast); }
.btn-primary:hover:not(:disabled):not([aria-disabled='true']), .btn-primary.is-hover { background: var(--accent-hover); }
.btn-secondary { background: var(--surface); color: var(--text); border-color: var(--border-strong); }
.app a.btn-secondary { color: var(--text); }
.btn-secondary:hover:not(:disabled):not([aria-disabled='true']), .btn-secondary.is-hover { background: var(--surface-hover); }
.btn-secondary.is-active { background: var(--accent-soft); border-color: var(--accent); color: var(--accent-text); }
.btn-ghost { background: transparent; color: var(--text-muted); }
.app a.btn-ghost { color: var(--text-muted); }
.btn-ghost:hover:not(:disabled):not([aria-disabled='true']), .btn-ghost.is-hover { background: var(--bg-subtle); color: var(--text); }
.btn-ghost[aria-pressed='true'], .btn-ghost.is-on { background: var(--accent-soft); color: var(--accent-text); }
.btn-danger { background: var(--surface); color: var(--danger-text); border-color: var(--border-strong); }
.btn-danger:hover:not(:disabled):not([aria-disabled='true']), .btn-danger.is-hover { background: var(--danger-soft); border-color: var(--danger); }
.btn-ghost.danger-hover:hover:not(:disabled), .btn-ghost.danger-hover.is-hover { background: var(--danger-soft); color: var(--danger-text); }
.btn .count-pill, .count-pill { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px;
  border-radius: var(--radius-full); background: var(--accent); color: var(--accent-contrast); font-size: var(--text-xs); font-weight: 600; }
.btn .spinner { border-color: color-mix(in srgb, currentColor 35%, transparent); border-top-color: currentColor; }

/* ---------- Field ---------- */
.field { display: flex; flex-direction: column; gap: var(--space-1); min-width: 0; }
.label { font-size: var(--text-base); font-weight: 500; color: var(--text); }
.label .opt { font-weight: 400; color: var(--text-muted); }
.label-row { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); }
.required { color: var(--danger-text); margin-left: 2px; }
.hint { font-size: var(--text-sm); line-height: var(--leading-normal); color: var(--text-muted); }
.err { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--danger-text); }
.err > .ic, .ok > .ic, .warn > .ic { align-self: flex-start; margin-top: 2px; }
/* Warning under a field: the value is allowed but probably wrong. The control keeps its border; only invalid blocks. */
.warn { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--warning-text); }
/* Positive check under a field: neutral, green is kept for Live. */
.ok { display: flex; align-items: center; gap: var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
.control { width: 100%; min-height: var(--control-height-md); padding: 0 var(--space-3); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); color: var(--text); font: 400 var(--text-md) / 1.4 var(--font-ui);
  transition: border-color var(--duration-fast), box-shadow var(--duration-fast); }
.control::placeholder { color: var(--text-faint); }
.control:focus, .control:focus-visible, .control.is-focus { outline: none; border-color: var(--accent); box-shadow: var(--focus-ring); }
.control:disabled, .control[aria-disabled='true'] { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }
.control:disabled::placeholder, .control[aria-disabled='true']::placeholder { color: var(--text-muted); }
.control-sm { min-height: var(--control-height-sm); padding: 0 var(--space-2); border-radius: var(--radius-sm); font-size: var(--text-base); }
.control.mono { font-family: var(--font-mono); font-size: var(--text-base); }
.textarea { padding: var(--space-2) var(--space-3); min-height: 72px; resize: vertical; }
.invalid { border-color: var(--danger); background: var(--danger-soft); }
.invalid::placeholder { color: var(--text-muted); }
.invalid:focus, .invalid.is-focus { border-color: var(--danger); box-shadow: var(--focus-ring-danger); }
.checkbox { width: 16px; height: 16px; margin: 0; accent-color: var(--accent); cursor: pointer; flex-shrink: 0; }
.checkbox:focus-visible, .checkbox.is-focus { outline: none; box-shadow: var(--focus-ring); border-radius: 3px; }
.check-row { display: inline-flex; align-items: flex-start; gap: var(--space-2); font-size: var(--text-base); color: var(--text); cursor: pointer; }
.check-row > .checkbox { margin-top: 2px; }
.with-icon { position: relative; display: flex; align-items: center; min-width: 0; }
.with-icon > .ic { position: absolute; left: var(--space-3); color: var(--text-muted); pointer-events: none; }
.with-icon > .control { padding-left: calc(var(--space-3) + 16px + var(--space-2)); }
.with-icon > .control:has(+ .clear) { padding-right: calc(var(--control-height-sm) + 6px); }
.with-icon > .clear { position: absolute; right: 3px; }
.with-icon > .control::-webkit-search-cancel-button { -webkit-appearance: none; appearance: none; }
.select-btn { display: inline-flex; align-items: center; gap: var(--space-2); justify-content: space-between; text-align: left; cursor: pointer; }
.select-btn > .chev { color: var(--text-muted); margin-left: auto; }
.counter { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }

/* ---------- Switch ---------- */
.switch { display: inline-flex; align-items: center; gap: var(--space-2); height: var(--control-height-md); padding: 0 var(--space-2);
  font-size: var(--text-base); font-weight: 500; color: var(--text); cursor: pointer; white-space: nowrap; user-select: none; }
.switch input { appearance: none; -webkit-appearance: none; position: relative; width: 28px; height: 16px; margin: 0; border-radius: var(--radius-full);
  background: var(--text-faint); cursor: pointer; flex-shrink: 0; transition: background var(--duration-fast); }
.switch input::after { content: ''; position: absolute; top: 2px; left: 2px; width: 12px; height: 12px; border-radius: 50%; background: var(--text-inverse);
  box-shadow: var(--shadow-sm); transition: left var(--duration-fast); }
.switch input:checked { background: var(--accent); }
.switch input:checked::after { left: 14px; }
.switch input:focus-visible, .switch input.is-focus { outline: none; box-shadow: var(--focus-ring); }
.switch:has(input[aria-disabled='true']), .switch:has(input:disabled), .switch.is-disabled { opacity: 0.55; cursor: not-allowed; }
.switch input[aria-disabled='true'], .switch input:disabled { cursor: not-allowed; }

/* ---------- Segmented ---------- */
.seg { display: inline-flex; align-self: flex-start; gap: 2px; padding: 2px; border-radius: var(--radius-md); background: var(--bg-subtle); }
.seg button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 var(--space-3); border: 0; border-radius: var(--radius-sm); background: transparent;
  color: var(--text-muted); font: 500 var(--text-base) / 1 var(--font-ui); cursor: pointer; }
.seg button:hover:not([aria-pressed='true']):not([aria-disabled='true']), .seg button.is-hover { color: var(--text); }
.seg button[aria-pressed='true'], .seg button[aria-checked='true'] { background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); }
.seg button:focus-visible, .seg button.is-focus { outline: none; box-shadow: var(--focus-ring); }
.seg button:disabled, .seg button[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }
.seg-sm button { height: 26px; padding: 0 var(--space-2); font-size: var(--text-sm); }
.seg-icon button { width: 30px; padding: 0; justify-content: center; }
.seg-sm.seg-icon button { width: 26px; }

/* ---------- Popover and menu ---------- */
.anchor { position: relative; display: inline-flex; }
.pop { position: absolute; top: calc(100% + 4px); left: 0; z-index: var(--z-dropdown); min-width: 240px; padding: var(--space-1);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); color: var(--text); font-size: var(--text-base); }
.pop-right { left: auto; right: 0; }
.pop-static { position: static; }
.pop-scroll { max-height: 320px; overflow-y: auto; }
.menu-item { display: flex; align-items: center; gap: var(--space-2); width: 100%; min-height: 32px; padding: 0 var(--space-2); border: 0;
  border-radius: var(--radius-sm); background: none; font: inherit; font-size: var(--text-base); line-height: 1.4; color: var(--text); text-align: left; cursor: pointer; }
.menu-item > .ic { color: var(--text-muted); }
.menu-item:hover, .menu-item.is-hover, .menu-item:focus-visible, .menu-item.is-focus { outline: none; background: var(--bg-subtle); }
.menu-item:focus-visible, .menu-item.is-focus { box-shadow: inset 0 0 0 2px var(--accent); }
.menu-item.is-danger, .menu-item.is-danger > .ic { color: var(--danger-text); }
.menu-item:disabled, .menu-item[aria-disabled='true'] { color: var(--text-muted); opacity: 0.55; cursor: not-allowed; background: none; }
/* Selected option: check on the right, as on the agreed Publish window. */
.menu-item > .check { margin-left: auto; color: var(--accent-text); }
.menu-item[aria-selected='true'] { font-weight: 500; }
.menu-item .count, .menu-item .trail { margin-left: auto; font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.menu-item .count + .check, .menu-item .trail + .check { margin-left: 0; }
.menu-sep { height: 1px; margin: var(--space-1) 0; background: var(--border); }
.menu-label { padding: var(--space-2) var(--space-2) var(--space-1); font-size: var(--text-sm); color: var(--text-muted); }
/* State of a whole group, one line under its label. */
.menu-note { display: flex; align-items: flex-start; gap: var(--space-2); padding: 0 var(--space-2) 6px; font-size: var(--text-sm); color: var(--warning-text); }
.menu-note > .ic { margin-top: 1px; }
.menu-hint { padding: 0 var(--space-2) var(--space-2) calc(var(--space-2) + 16px + var(--space-2)); margin-top: -4px; font-size: var(--text-sm); color: var(--text-muted); }
.menu-search { padding: 4px 4px 6px; }
.menu-empty { display: flex; flex-direction: column; gap: 4px; padding: var(--space-3) var(--space-2); text-align: center; }
/* Combobox: a text field with suggestions; any typed value is kept. */
.combo { position: relative; display: block; min-width: 0; }
.combo > .control { padding-right: calc(var(--control-height-sm) + var(--space-1)); }
.combo > .combo-btn { position: absolute; top: 50%; right: 3px; transform: translateY(-50%); color: var(--text-muted); }
.combo > .control-sm + .combo-btn { right: 1px; width: 24px; height: 24px; }
.combo > .pop { left: 0; right: 0; min-width: 0; }
.menu-item mark { background: none; color: inherit; font-weight: 600; }
.menu-foot { display: flex; justify-content: space-between; align-items: center; gap: var(--space-2); padding: var(--space-2) var(--space-1) var(--space-1); border-top: 1px solid var(--border); margin-top: var(--space-1); }

/* ---------- Badge ---------- */
.badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 500; line-height: 1.4; white-space: nowrap; vertical-align: middle; }
.badge > .ic { flex-shrink: 0; }
.b-neutral { background: var(--bg-subtle); color: var(--text-muted); }
.b-outline { background: transparent; color: var(--text-muted); box-shadow: inset 0 0 0 1px var(--border-strong); }
.b-accent { background: var(--accent-soft); color: var(--accent-text); }
.b-success { background: var(--success-soft); color: var(--success-text); }
.b-warning { background: var(--warning-soft); color: var(--warning-text); }
.b-danger { background: var(--danger-soft); color: var(--danger-text); }
.b-solid { background: var(--accent); color: var(--accent-contrast); }
.dot { width: 6px; height: 6px; border-radius: 50%; background: currentColor; flex-shrink: 0; }
.dot-hollow { background: transparent; box-shadow: inset 0 0 0 1.5px currentColor; }
.mini-spin { width: 10px; height: 10px; border: 1.5px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }

/* Brand: favicon + name; the lettered tile is the fallback when the favicon doesn't load. */
.brand { display: inline-flex; align-items: center; gap: var(--space-2); min-width: 0; color: var(--text); }
.brand > .name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fav { display: inline-flex; align-items: center; justify-content: center; width: 16px; height: 16px; border-radius: var(--radius-sm); object-fit: contain;
  background: var(--bg-subtle); box-shadow: inset 0 0 0 1px var(--border-strong); color: var(--text); font-size: var(--text-xs); font-weight: 700; line-height: 1; flex-shrink: 0; }
.fav-lg { width: 20px; height: 20px; }

/* People and ownership */
.you { padding: 0 6px; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); font-size: var(--text-xs); font-weight: 600; line-height: 18px; flex-shrink: 0; }
.readonly { display: inline-flex; align-items: center; gap: var(--space-2); min-height: var(--control-height-md); max-width: 520px; padding: 0 var(--space-3);
  border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-muted); font-size: var(--text-base); }
.readonly .ic { color: var(--text-muted); }
.app .readonly a { color: var(--text); font-weight: 500; }
.owner-note { display: flex; align-items: center; gap: var(--space-2); font-size: var(--text-sm); color: var(--text-muted); }

/* Source of a landing or version: an icon, not a status pill. */
.src { display: inline-flex; align-items: center; gap: 4px; color: var(--text-muted); font-size: var(--text-sm); white-space: nowrap; min-width: 0; }
.src .ic { width: 13px; height: 13px; }
.src-mark { display: inline-flex; align-items: center; justify-content: center; width: 18px; height: 18px; border-radius: var(--radius-sm); color: var(--text-muted); flex-shrink: 0; }
.src-mark .ic { width: 14px; height: 14px; }

/* ---------- Alert ---------- */
.alert { display: flex; gap: var(--space-3); padding: var(--space-3) var(--space-4); border: 1px solid transparent; border-radius: var(--radius-md);
  font-size: var(--text-base); line-height: var(--leading-normal); }
.alert > .ic { margin-top: 2px; }
.alert-body { flex: 1; min-width: 0; }
.alert-title { font-weight: 600; margin-bottom: 2px; }
.alert-body ul, .alert-body ol { margin: var(--space-1) 0 0; padding-left: var(--space-5); }
.alert-actions { display: flex; gap: var(--space-2); margin-top: var(--space-2); }
.alert-info { background: var(--accent-soft); border-color: var(--accent-border); color: var(--accent-text); }
.alert-success { background: var(--success-soft); border-color: var(--success-border); color: var(--success-text); }
.alert-warning { background: var(--warning-soft); border-color: var(--warning-border); color: var(--warning-text); }
.alert-danger { background: var(--danger-soft); border-color: var(--danger-border); color: var(--danger-text); }
.alert .code { background: color-mix(in srgb, currentColor 10%, transparent); color: inherit; }

/* ---------- Banner: state of the whole page, under the header (pages) or the toolbar (editor) ---------- */
.banner { --banner-inset: var(--space-8); display: flex; align-items: center; gap: var(--space-3); min-height: 44px; padding: var(--space-2) var(--banner-inset);
  font-size: var(--text-base); line-height: var(--leading-normal); border-bottom: 1px solid var(--border); }
.banner-tight { --banner-inset: var(--space-4); }
.banner > .ic { flex-shrink: 0; }
.banner-text { flex: 1; min-width: 0; }
.banner-actions { display: flex; align-items: center; gap: var(--space-2); flex-shrink: 0; }
.banner-neutral { background: var(--bg-subtle); color: var(--text); }
.banner-accent { background: var(--accent-soft); color: var(--accent-text); border-bottom-color: var(--accent-border); }
.banner-warning { background: var(--warning-soft); color: var(--warning-text); border-bottom-color: var(--warning-border); }
.banner-danger { background: var(--danger-soft); color: var(--danger-text); border-bottom-color: var(--danger-border); }

/* ---------- Toast ---------- */
.toasts { position: absolute; right: calc(var(--toast-inset-end, 0px) + var(--space-6)); bottom: var(--space-6); display: flex; flex-direction: column; gap: var(--space-2); z-index: var(--z-toast);
  transition: right var(--duration-base) ease; }
@media (prefers-reduced-motion: reduce) { .toasts { transition: none; } }
.toast { display: flex; align-items: flex-start; gap: var(--space-3); width: 380px; max-width: 100%; padding: var(--space-3) var(--space-3) var(--space-3) var(--space-4);
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text);
  font-size: var(--text-base); line-height: var(--leading-normal); }
.toast > .ic { margin-top: 2px; }
.toast-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; overflow-wrap: anywhere; }
.toast-title { font-weight: 600; }
.toast-desc { font-size: var(--text-sm); color: var(--text-muted); }
.toast-act { display: flex; gap: var(--space-2); margin-top: var(--space-1); }
.t-neutral { color: var(--text-muted); }
.t-info { color: var(--accent); }
.t-success { color: var(--success); }
.t-warning { color: var(--warning); }
.t-danger { color: var(--danger); }

/* ---------- Tooltip ---------- */
.tip { position: absolute; z-index: var(--z-dropdown); width: max-content; max-width: 320px; padding: 6px var(--space-2); border-radius: var(--radius-sm);
  background: var(--text); color: var(--surface); font: 400 var(--text-sm) / 1.4 var(--font-ui); white-space: normal; overflow-wrap: anywhere;
  box-shadow: var(--shadow-md); pointer-events: none; }
.tip-static { position: static; display: inline-block; }

/* ---------- Skeleton, spinner ---------- */
.sk { display: block; height: 10px; border-radius: var(--radius-sm); background: var(--bg-subtle); animation: pulse 1.4s ease-in-out infinite; }
.sk-pill { height: 18px; border-radius: var(--radius-full); }
.sk-on-subtle { background: var(--border); }
/* bg-subtle is darker than surface in dark: the shapes take border there to stay visible. */
[data-theme='dark'] .sk { background: var(--border); }
[data-theme='dark'] .sk-on-subtle { background: var(--border-strong); }
.spinner { display: inline-block; border: 2px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.8s linear infinite; flex-shrink: 0; }
.spinner-sm { width: 16px; height: 16px; }
.spinner-md { width: 24px; height: 24px; }
.spinner-lg { width: 40px; height: 40px; border-width: 3px; }
.spinner-inverse { border-color: color-mix(in srgb, var(--accent-contrast) 35%, transparent); border-top-color: var(--accent-contrast); }
.spin16 { width: 14px; height: 14px; border: 2px solid currentColor; border-right-color: transparent; border-radius: 50%; animation: spin 0.8s linear infinite; }
.loading { display: flex; flex-direction: column; align-items: center; gap: var(--space-3); padding: var(--space-10) var(--space-5); color: var(--text-muted); font-size: var(--text-md); }
@media (prefers-reduced-motion: reduce) { .sk, .spinner, .spin16, .mini-spin { animation-duration: 2.4s; } }

/* ---------- Empty state ---------- */
.empty { display: flex; flex-direction: column; align-items: center; gap: var(--space-2); padding: var(--space-10) var(--space-5); text-align: center; color: var(--text-muted); }
.empty > .ic-xl { margin-bottom: var(--space-2); color: var(--text-faint); }
.empty-title { font-size: var(--text-lg); font-weight: 600; color: var(--text); }
.empty-text { margin: 0; max-width: 420px; font-size: var(--text-md); }
.empty-action { margin-top: var(--space-3); display: flex; gap: var(--space-2); }

/* ---------- Centered card: sign-in, no access, fatal errors ---------- */
.screen { flex: 1; display: flex; align-items: center; justify-content: center; padding: var(--space-5); background: var(--bg); }
.cc { display: flex; flex-direction: column; gap: var(--space-4); width: 100%; max-width: 440px; padding: var(--space-8); background: var(--surface);
  border: 1px solid var(--border); border-radius: var(--radius-lg); box-shadow: var(--shadow-md); }
.cc-icon { display: flex; align-items: center; justify-content: center; width: 56px; height: 56px; margin: 0 auto; border-radius: var(--radius-full); background: var(--accent-soft); color: var(--accent-text); }
.cc-icon-danger { background: var(--danger-soft); color: var(--danger-text); }
.cc-title { font-size: var(--text-2xl); font-weight: 700; text-align: center; letter-spacing: -0.01em; }
.cc-sub { margin-top: calc(-1 * var(--space-2)); text-align: center; font-size: var(--text-md); color: var(--text-muted); }

/* ---------- Card ---------- */
.card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); min-width: 0; }
.card-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-2); min-height: 44px; padding: var(--space-2) var(--space-4); border-bottom: 1px solid var(--border); }
.card-title { font-size: var(--text-md); font-weight: 600; }
.card-body { padding: var(--space-4); }
.kv { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2) var(--space-3); margin: 0; font-size: var(--text-base); }
.kv dt { color: var(--text-muted); }
.kv dd { margin: 0; min-width: 0; }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: var(--space-5); border-bottom: 1px solid var(--border); }
.tab { position: relative; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 2px; border: 0; background: none;
  font: 500 var(--text-md) / 1 var(--font-ui); color: var(--text-muted); cursor: pointer; }
.tab:hover, .tab.is-hover { color: var(--text); }
.tab:focus-visible, .tab.is-focus { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.tab.is-on, .tab[aria-selected='true'] { color: var(--text); }
.tab.is-on::after, .tab[aria-selected='true']::after { content: ''; position: absolute; left: 0; right: 0; bottom: -1px; height: 2px; border-radius: 2px; background: var(--accent); }
.tab[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; }

/* ---------- Copy field ---------- */
.copy { display: inline-flex; align-items: center; max-width: 100%; height: var(--control-height-md); border: 1px solid var(--border-strong);
  border-radius: var(--radius-md); background: var(--surface); overflow: hidden; min-width: 0; }
.copy-sm { height: var(--control-height-sm); border-radius: var(--radius-sm); }
.copy-url { flex: 1; min-width: 0; padding: 0 var(--space-3); font-family: var(--font-mono); font-size: var(--text-base); color: var(--text);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.copy-url.is-off { color: var(--text-muted); text-decoration: line-through; text-decoration-color: var(--text-faint); }
.copy-act { display: inline-flex; align-items: center; justify-content: center; gap: 4px; height: 100%; min-width: 34px; padding: 0 var(--space-2);
  border: 0; border-left: 1px solid var(--border-strong); background: transparent; color: var(--text-muted); font: 500 var(--text-sm) / 1 var(--font-ui); cursor: pointer; text-decoration: none; }
.app a.copy-act { color: var(--text-muted); text-decoration: none; }
.copy-act:hover, .copy-act.is-hover, .app a.copy-act:hover { background: var(--bg-subtle); color: var(--text); text-decoration: none; }
.copy-act:focus-visible, .copy-act.is-focus { outline: none; box-shadow: inset 0 0 0 2px var(--accent); }
/* Copied: neutral with a check; green is kept for Live. */
.copy-act.is-done, .app a.copy-act.is-done { color: var(--text); background: var(--bg-subtle); }
.copy-act:disabled, .copy-act[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; background: transparent; }

/* ---------- Modal ---------- */
/* Overlays and the toast stack are absolute inside an artboard; the app adds .is-fixed (portal to <body>). */
.overlay { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; padding: var(--space-4); background: var(--overlay); z-index: var(--z-modal); }
.overlay.is-fixed, .toasts.is-fixed { position: fixed; }
.modal { display: flex; flex-direction: column; width: 100%; max-width: var(--modal-width); max-height: 90%; background: var(--surface);
  border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); color: var(--text); font-family: var(--font-ui); font-size: var(--text-base); line-height: var(--leading-normal); }
.overlay.is-fixed .modal { max-height: 90vh; }
.modal-sm { --modal-width: 440px; }
.modal-md { --modal-width: 560px; }
.modal-lg { --modal-width: 800px; }
.modal-head { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--border); }
.modal-heading { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.modal-title { margin: 0; font-size: var(--text-lg); font-weight: 600; }
.modal-sub { font-size: var(--text-sm); color: var(--text-muted); }
.modal-body { flex: 1; display: flex; flex-direction: column; gap: var(--space-4); padding: var(--space-5); overflow-y: auto; }
.modal-body.flush { padding: 0; gap: 0; }
.modal-foot { display: flex; align-items: center; justify-content: flex-end; gap: var(--space-2); padding: var(--space-4) var(--space-5); border-top: 1px solid var(--border); }
/* Start slot: a note or a third action, pushed to the left. */
.modal-foot > .start, .modal-foot .left { margin-right: auto; }
.modal-foot > span.start, .modal-foot span.left { font-size: var(--text-sm); color: var(--text-muted); }

/* “What changes” block and the facts under it */
.change { display: grid; grid-template-columns: minmax(0, 1fr) 24px minmax(0, 1fr); align-items: center; gap: var(--space-3);
  padding: var(--space-3) var(--space-4); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--bg); }
.change > .ic { color: var(--text-muted); }
.change-side { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.change-label { font-size: var(--text-sm); font-weight: 500; color: var(--text-muted); }
.change-v { font-size: var(--text-xl); font-weight: 700; letter-spacing: -0.01em; }
.change-v-sm { font-size: var(--text-md); font-weight: 600; letter-spacing: 0; }
.change-v.is-target { color: var(--accent-text); }
.change-off { font-size: var(--text-md); font-weight: 600; line-height: 27px; color: var(--danger-text); }
.change-meta { font-size: var(--text-sm); color: var(--text-muted); }
.facts { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: var(--space-2) var(--space-3); align-items: center; margin: 0; }
.facts dt { color: var(--text-muted); }
.facts dd { margin: 0; min-width: 0; }

/* ---------- Table ---------- */
.tbl-box { display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-lg); overflow: hidden; min-width: 0; }
.tbl-scroll { overflow: auto; min-height: 0; }
.tbl { width: 100%; border-collapse: separate; border-spacing: 0; table-layout: fixed; font-size: var(--text-base); color: var(--text); }
.tbl th { position: sticky; top: 0; z-index: 1; height: var(--table-head-height); padding: 0 var(--space-3); text-align: left; font-size: var(--text-sm); font-weight: 600;
  color: var(--text-muted); background: var(--surface); border-bottom: 1px solid var(--border); white-space: nowrap; }
.tbl th .row { gap: 4px; }
.tbl th[aria-sort='ascending'], .tbl th[aria-sort='descending'], .tbl th.is-sorted { color: var(--text); }
.th-sort { display: inline-flex; align-items: center; gap: 4px; height: 100%; padding: 0; border: 0; background: none; color: inherit; font: inherit; cursor: pointer; }
.th-sort:hover, .th-sort.is-hover { color: var(--text); }
.th-sort:focus-visible, .th-sort.is-focus { outline: none; border-radius: var(--radius-sm); box-shadow: var(--focus-ring); }
.th-sort > .ic { width: 12px; height: 12px; }
.tbl td { height: var(--table-row-height); padding: var(--space-2) var(--space-3); border-bottom: 1px solid var(--border); vertical-align: middle; overflow: hidden; }
.tbl th:first-child, .tbl td:first-child { padding-left: var(--space-4); }
.tbl .end { text-align: right; }
.tbl tbody tr:last-child td { border-bottom: 0; }
.tbl tbody tr.is-link { cursor: pointer; }
.tbl tbody tr.is-link:hover td, .tbl tr.is-hover td { background: var(--surface-hover); }
.tbl tr.is-archived td { background: var(--bg-subtle); }
.tbl tr.is-archived .cell-main { color: var(--text-muted); }
/* Live version row: green tint in every environment; the version cell or the environment chip says where. */
.tbl tr.is-current td { background: color-mix(in srgb, var(--success-soft) 60%, var(--surface)); }
/* Group heading inside a table: Upcoming, Past 30 days. */
.tbl tr.grp td { height: 32px; padding-top: 0; padding-bottom: 0; background: var(--bg); font-size: var(--text-sm); font-weight: 600; color: var(--text-muted); }
.tbl tbody tr.grp:hover td { background: var(--bg); }
.cell-main { font-weight: 500; color: var(--text); }
.app a.cell-main { color: var(--text); }
.cell-sub { font-size: var(--text-sm); color: var(--text-muted); }
.row-actions { display: flex; justify-content: flex-end; gap: 2px; }
.tbl-foot { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-2) var(--space-4);
  border-top: 1px solid var(--border); font-size: var(--text-base); color: var(--text-muted); }
.pager { display: flex; align-items: center; gap: 2px; }
.pager .btn { min-width: var(--control-height-sm); padding: 0 var(--space-2); }
.pager .btn-icon { padding: 0; }

/* ---------- 1.1: Dropzone ---------- */
.drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--space-2); padding: var(--space-8) var(--space-5);
  border: 1px dashed var(--border-strong); border-radius: var(--radius-lg); background: var(--surface); text-align: center; color: var(--text-muted); cursor: pointer; }
.drop > .ic-lg { color: var(--text-muted); }
.drop-title { font-size: var(--text-md); font-weight: 500; color: var(--text); }
.drop-hint { font-size: var(--text-sm); color: var(--text-muted); }
.drop-actions { display: flex; gap: var(--space-2); margin-top: 6px; }
.drop:hover, .drop.is-hover { border-color: var(--accent); }
.drop:focus-within, .drop.is-focus { border-color: var(--accent); box-shadow: var(--focus-ring); }
.drop.is-over { border: 2px dashed var(--accent); padding: calc(var(--space-8) - 1px) calc(var(--space-5) - 1px); background: var(--accent-soft); color: var(--accent-text); }
.drop.is-over .drop-title, .drop.is-over .drop-hint, .drop.is-over > .ic-lg { color: var(--accent-text); }
.drop.is-error { border-color: var(--danger); }
.drop[aria-disabled='true'] { opacity: 0.55; cursor: not-allowed; border-color: var(--border-strong); box-shadow: none; }
.drop-sm { flex-direction: row; gap: var(--space-3); padding: var(--space-3) var(--space-4); text-align: left; }
.drop-sm.is-over { padding: calc(var(--space-3) - 1px) calc(var(--space-4) - 1px); }

/* ---------- 1.1: File row ---------- */
.file { display: flex; align-items: center; gap: var(--space-3); padding: var(--space-3); border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); min-width: 0; }
.file-ic { display: flex; align-items: center; justify-content: center; width: 36px; height: 36px; border-radius: var(--radius-md); background: var(--bg-subtle); color: var(--text-muted); flex-shrink: 0; }
.file-body { flex: 1; display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.file-name { font-weight: 500; color: var(--text); min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.file-meta { font-size: var(--text-sm); color: var(--text-muted); font-variant-numeric: tabular-nums; }
.file-actions { display: flex; align-items: center; gap: 2px; flex-shrink: 0; }
.file.is-error { border-color: var(--danger); }
.file.is-error .file-ic { background: var(--danger-soft); color: var(--danger-text); }

/* ---------- 1.1: Progress ---------- */
.progress { height: 4px; border-radius: var(--radius-full); background: var(--bg-subtle); overflow: hidden; }
[data-theme='dark'] .progress { background: var(--border); }
.progress > span { display: block; height: 100%; border-radius: inherit; background: var(--accent); transition: width var(--duration-base); }
.progress-ind > span { width: 35%; animation: pulse 1.2s ease-in-out infinite; }
/* Countdown before a result closes by itself: neutral, it is a timer, not a status. */
.progress-countdown > span { width: 100%; background: var(--text-faint); animation: countdown linear forwards; animation-duration: var(--countdown, 5s); }
@keyframes countdown { from { width: 100%; } to { width: 0; } }
.progress-label { display: flex; align-items: baseline; justify-content: space-between; gap: var(--space-3); font-size: var(--text-sm); color: var(--text-muted); }
.progress-label .num { color: var(--text); font-weight: 500; }
@media (prefers-reduced-motion: reduce) { .progress-ind > span { animation-duration: 2.4s; } }

/* ---------- 1.1: Result report ---------- */
.report { border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface); overflow: hidden; }
.report-head { display: flex; align-items: center; gap: var(--space-2); min-height: 40px; padding: var(--space-2) var(--space-4); background: var(--bg-subtle);
  border-bottom: 1px solid var(--border); font-size: var(--text-base); font-weight: 600; }
.report-head .sp { flex: 1; }
.report-head .hint { font-weight: 400; }
.report-row { display: flex; align-items: flex-start; gap: var(--space-3); padding: var(--space-2) var(--space-4); font-size: var(--text-base); }
.report-row + .report-row { border-top: 1px solid var(--border); }
.report-row > .ic { margin-top: 2px; }
.report-row > .report-text { flex: 1; min-width: 0; }
/* A passed check is neutral: green is kept for Live. */
.c-ok { color: var(--text-muted); }
.c-info { color: var(--accent); }
.c-warn { color: var(--warning); }
.c-err { color: var(--danger); }
.paths { margin: var(--space-2) 0 0; padding: var(--space-2) var(--space-3); list-style: none; border-radius: var(--radius-sm); background: var(--bg-subtle);
  font-family: var(--font-mono); font-size: var(--text-sm); color: var(--text); display: flex; flex-direction: column; gap: 2px; }
.paths li { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.paths .loc { color: var(--text-muted); }
.paths mark { background: var(--warning-soft); color: var(--warning-text); border-radius: 2px; padding: 0 2px; }

/* ---------- 1.1: Steps ---------- */
.steps { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.step { position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr) auto; gap: var(--space-3); align-items: start; padding: var(--space-2) 0; }
.step-ic { display: flex; align-items: center; justify-content: center; width: 24px; height: 24px; border-radius: 50%; font-size: var(--text-sm); font-weight: 700; }
.step-title { font-size: var(--text-md); font-weight: 500; line-height: 24px; }
.step-meta { font-size: var(--text-sm); color: var(--text-muted); }
.step-time { font-size: var(--text-sm); color: var(--text-muted); line-height: 24px; font-variant-numeric: tabular-nums; }
/* Done is neutral: the green comes with the result, and only for production. */
.step.is-done .step-ic { background: var(--bg-subtle); color: var(--text); }
[data-theme='dark'] .step.is-done .step-ic { background: var(--border); }
.step.is-run .step-ic { background: var(--accent-soft); color: var(--accent-text); }
.step.is-wait .step-ic { box-shadow: inset 0 0 0 1.5px var(--text-faint); }
.step.is-wait .step-title { color: var(--text-muted); }
.step.is-fail .step-ic { background: var(--danger-soft); color: var(--danger-text); }
.step.is-fail .step-title { color: var(--danger-text); }
.step-err { margin-top: 2px; font-size: var(--text-sm); color: var(--danger-text); }
/* Numbered instructions (How translations work): the number on accent-soft. */
.step.is-num .step-ic { background: var(--accent-soft); color: var(--accent-text); }