/* Veyora console — light only.
   Restrained warm-neutral surface, one accent, dense tabular data. */

/* The palette is derived from the brand orange in OKLab rather than picked by
   eye, so the tints step evenly and every pairing has a measured contrast ratio.
   Two of the semantic colours had to move when the accent became orange: the old
   warn (#866300) and danger (#aa1b38) sat 23 and 8 degrees from the brand hue,
   close enough that a warning would have read as brand furniture. Both are now
   held away from it. See the generator in the branding notes for the arithmetic. */
:root {
  color-scheme: light;

  /* surfaces — a shade warm, so white cards read as paper next to the orange */
  --bg: #f9f5f3;
  --surface: #ffffff;
  --surface-2: #fdfaf9;
  --surface-3: #f2eeeb;
  --line: #e9e4e0;
  --line-2: #f0ecea;
  --line-strong: #d1cbc7;

  /* ink — warm near-black, so text sits with the accent instead of fighting it */
  --ink: #1d1512;
  --ink-2: #615955;
  --ink-3: #8c8580;
  --ink-4: #aea8a3;

  /* brand — Veyora orange. accent fills, accent-text writes */
  --accent: #e65125;
  --accent-hover: #d04113;
  --accent-text: #c64016;
  --accent-deep: #8e1a00;
  --accent-line: #f2c3b4;
  --accent-soft-2: #f9e0d8;
  --accent-soft: #fcf2ee;

  /* semantics — warn and danger are held away from the brand hue on purpose */
  --ok: #247448;
  --ok-soft: #e1f7e7;
  --warn: #866300;
  --warn-soft: #fff1d3;
  --danger: #aa1b38;
  --danger-soft: #ffe7e8;
  --violet: #5e3d9e;
  --gold: #85612b;
  --gold-soft: #fff1d7;
  --gold-line: #ebd4af;

  --shadow-accent: 0 1px 2px rgba(230, 81, 37, .30), 0 4px 12px rgba(230, 81, 37, .22);

  --r: 12px;
  --r-sm: 8px;
  --sidebar: 232px;
}

* { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font: 13.5px/1.5 -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Inter, "Helvetica Neue", Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  font-variant-numeric: tabular-nums;
}
a { color: var(--accent-text); text-decoration: none; }
a:hover { text-decoration: underline; }
button, input, select, textarea { font: inherit; color: inherit; }
h1, h2, h3, h4 { margin: 0; font-weight: 640; letter-spacing: -.015em; }
hr { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--line-strong); border-radius: 8px; border: 3px solid transparent; background-clip: content-box; }
::-webkit-scrollbar-thumb:hover { background: var(--ink-4); background-clip: content-box; }

/* Icons are UIcons glyphs, so they are sized with font-size and inherit colour. */
.ico { vertical-align: -.11em; }

/* micro label used above groups of data */
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-3);
}
.num { font-variant-numeric: tabular-nums; }
.muted { color: var(--ink-3); }

/* ---------- shell ---------- */
#app { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar); flex: 0 0 var(--sidebar);
  background: var(--surface); border-right: 1px solid var(--line);
  display: flex; flex-direction: column; position: sticky; top: 0; height: 100vh;
  transition: width .16s ease, flex-basis .16s ease;
}
.sidebar.collapsed { width: 60px; flex-basis: 60px; }
.sidebar.collapsed .nav-label, .sidebar.collapsed .brand-text, .sidebar.collapsed .nav-caption,
.sidebar.collapsed .sidebar-foot span { display: none; }
.sidebar.collapsed .nav-item { justify-content: center; padding-left: 0; padding-right: 0; }
/* the collapse chevron points the way it will move the menu */
.sidebar-foot [data-collapse] .ico { transition: transform .18s ease; transform: rotate(180deg); }
.sidebar.collapsed .sidebar-foot [data-collapse] .ico { transform: rotate(0deg); }

.brand { display: flex; align-items: center; justify-content: center; gap: 10px; padding: 18px 14px 16px; }
.brand-mark {
  width: 32px; height: 32px; border-radius: 9px; flex: none;
  display: block; object-fit: contain;
  box-shadow: 0 2px 8px rgba(74, 47, 17, .28);
}

/* The full lockup while the menu is open; the square mark once it narrows to
   60px, which is the size the mark was drawn for. Only one is ever in the flow,
   so the header does not reserve space for the other. */
.brand-lockup { display: block; width: 100%; height: auto; max-width: 184px; margin-inline: auto; }
.brand:has(.brand-lockup) .brand-mark { display: none; }
.sidebar.collapsed .brand { padding: 14px 0; justify-content: center; }
.sidebar.collapsed .brand-lockup { display: none; }
.sidebar.collapsed .brand:has(.brand-lockup) .brand-mark { display: block; }
.brand-text { font-weight: 660; font-size: 14px; letter-spacing: -.01em; line-height: 1.2; min-width: 0; }
.brand-text small {
  display: block; font-size: 10px; font-weight: 650; color: var(--ink-4);
  letter-spacing: .1em; text-transform: uppercase; margin-top: 1px;
}

.nav { padding: 4px 10px 12px; flex: 1; overflow-y: auto; }
.nav-caption {
  font-size: 10.5px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-4); padding: 15px 10px 5px;
}
.nav-item {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 7px 10px; border: 0; background: none; border-radius: var(--r-sm);
  color: var(--ink-2); cursor: pointer; text-align: left; margin-bottom: 1px;
  font-weight: 550; font-size: 13.5px; transition: background .1s, color .1s;
}
.nav-item:hover { background: var(--surface-3); color: var(--ink); text-decoration: none; }
.nav-item.active {
  background: var(--accent-soft); color: var(--accent-text); font-weight: 620;
  box-shadow: inset 2px 0 0 var(--accent);
}
.nav-item .ico { font-size: 17px; opacity: .8; }
.nav-item.active .ico { opacity: 1; }
.sidebar-foot {
  padding: 10px 12px; border-top: 1px solid var(--line);
  display: flex; gap: 8px; align-items: center; color: var(--ink-4); font-size: 11px;
}

.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  height: 54px; display: flex; align-items: center; gap: 10px;
  padding: 0 22px; border-bottom: 1px solid var(--line); background: var(--surface);
  position: sticky; top: 0; z-index: 30;
}
.topbar .spacer { flex: 1; }
.avatar {
  width: 33px; height: 33px; border-radius: 50%; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text); font-weight: 700; font-size: 12px;
  cursor: pointer; border: 1px solid var(--accent-line);
}
.avatar:hover { background: var(--accent-soft-2); }

.content { padding: 24px 26px 72px; flex: 1; max-width: 1520px; width: 100%; }
.page-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; margin-bottom: 20px; flex-wrap: wrap; }
.page-head h1 { font-size: 22px; letter-spacing: -.025em; }
.page-head .sub { color: var(--ink-3); margin-top: 3px; font-size: 13px; }
.head-actions { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---------- buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 7px;
  padding: 7px 13px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); color: var(--ink); cursor: pointer; font-weight: 570; font-size: 13px;
  white-space: nowrap; box-shadow: var(--shadow-xs);
  transition: background .11s, border-color .11s, color .11s, box-shadow .11s;
}
.btn:hover:not(:disabled) { background: var(--surface-2); border-color: var(--ink-4); text-decoration: none; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.btn.primary {
  background: var(--accent); border-color: var(--accent-text); color: #fff;
  box-shadow: var(--shadow-accent);
}
.btn.primary:hover:not(:disabled) { background: var(--accent-hover); border-color: var(--accent-hover); }
.btn.primary:active:not(:disabled) { box-shadow: 0 1px 2px rgba(230, 81, 37, .3); }
.btn.danger { background: var(--danger); border-color: var(--danger); color: #fff; }
.btn.danger:hover:not(:disabled) { filter: brightness(1.06); background: var(--danger); border-color: var(--danger); }
.btn.ghost { border-color: transparent; background: transparent; color: var(--ink-2); box-shadow: none; }
.btn.ghost:hover:not(:disabled) { background: var(--surface-3); color: var(--ink); }
.btn.sm { padding: 5px 10px; font-size: 12.5px; }
.btn.icon { padding: 0; width: 34px; height: 34px; }
.btn.icon.sm { width: 28px; height: 28px; }
.btn .ico { font-size: 15px; }
.btn.sm .ico { font-size: 13.5px; }
.linkbtn {
  background: none; border: 0; padding: 0; color: var(--accent-text); cursor: pointer;
  font-weight: 570; font-size: 13px;
}
.linkbtn:hover { text-decoration: underline; }

/* ---------- surfaces ---------- */
.card { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); box-shadow: var(--shadow-xs); }
.card-pad { padding: 18px; }
.card-head {
  padding: 14px 18px; border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
}
.card-head h3 { font-size: 14px; font-weight: 640; }
.card-head .sub { font-size: 12px; color: var(--ink-3); margin-top: 2px; font-weight: 400; }

.grid { display: grid; gap: 16px; }
.g2 { grid-template-columns: repeat(auto-fit, minmax(330px, 1fr)); }
.g3 { grid-template-columns: repeat(auto-fit, minmax(290px, 1fr)); }
.g4 { grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); }

/* KPI strip: one card, hairline-divided cells — not four floating tiles */
.kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(190px, 1fr)); }
.kpis .kpi { padding: 16px 20px; border-right: 1px solid var(--line); }
.kpis .kpi:last-child { border-right: 0; }
.kpi .k-label { display: flex; align-items: center; gap: 7px; font-size: 12px; color: var(--ink-2); font-weight: 570; }
.kpi .k-label .ico { font-size: 14px; color: var(--ink-3); }
.kpi .k-value { font-size: 27px; font-weight: 660; letter-spacing: -.03em; margin-top: 9px; line-height: 1; }
.kpi .k-foot { color: var(--ink-3); font-size: 12px; margin-top: 7px; }

/* horizontal stacked bar */
.stack { display: flex; height: 10px; border-radius: 6px; overflow: hidden; background: var(--surface-3); }
.stack i { display: block; height: 100%; }
.stack-key { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 12px; }
.stack-key div { display: flex; align-items: baseline; gap: 7px; font-size: 12.5px; }
.stack-key i { width: 8px; height: 8px; border-radius: 2px; flex: none; transform: translateY(-1px); }
.stack-key b { font-weight: 650; }
.stack-key span { color: var(--ink-3); }

.progress { height: 6px; border-radius: 99px; background: var(--surface-3); overflow: hidden; margin-top: 9px; }
.progress > i { display: block; height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #4a5ae2); }

/* metric rows with an inline bar */
.metrics { display: flex; flex-direction: column; }
.metric { display: flex; align-items: center; gap: 12px; padding: 9px 0; border-bottom: 1px solid var(--line-2); }
.metric:last-child { border-bottom: 0; }
.metric .m-name { width: 106px; flex: none; color: var(--ink-2); font-size: 12.5px; }
.metric .m-track { flex: 1; height: 7px; border-radius: 99px; background: var(--surface-3); overflow: hidden; }
.metric .m-fill { height: 100%; border-radius: 99px;
  background: linear-gradient(90deg, var(--accent), #5566e6); }
.metric .m-value { width: 46px; text-align: right; font-weight: 620; font-size: 13px; }
.metric .m-pct { width: 40px; text-align: right; color: var(--ink-3); font-size: 12px; }

/* ---------- tables ---------- */
.tablewrap { overflow-x: auto; }
table.data { width: 100%; border-collapse: collapse; }
table.data th {
  text-align: left; font-size: 11.5px; font-weight: 650; color: var(--ink-3); letter-spacing: .03em;
  padding: 11px 16px; border-bottom: 1px solid var(--line);
  background: linear-gradient(var(--surface-2), var(--surface-3)); white-space: nowrap;
}
table.data th:first-child { border-top-left-radius: var(--r); }
table.data th:last-child { border-top-right-radius: var(--r); }
table.data td { padding: 11px 16px; white-space: nowrap; border-bottom: 1px solid var(--line-2); vertical-align: middle; }
table.data tbody tr:hover { background: var(--surface-2); }
table.data tbody tr:last-child td { border-bottom: 0; }
table.data td.wrap { white-space: normal; min-width: 200px; }
.cell-title { font-weight: 600; }
.cell-sub { display: block; color: var(--ink-3); font-size: 12px; margin-top: 1px; }
.tfoot {
  display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap;
  padding: 11px 16px; border-top: 1px solid var(--line); color: var(--ink-3); font-size: 12.5px;
}

/* compact list rows inside panels */
.rows { display: flex; flex-direction: column; }
.rows .r {
  display: flex; align-items: center; gap: 11px; padding: 10px 18px;
  border-bottom: 1px solid var(--line-2);
}
.rows .r:last-child { border-bottom: 0; }
.rows .r:hover { background: var(--surface-2); }
.rows .r .grow { flex: 1; min-width: 0; }
.rows .r .name { font-weight: 570; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---------- bits ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px;
  font-size: 11.5px; font-weight: 620; border: 1px solid transparent; white-space: nowrap;
}
.pill .dot { width: 5px; height: 5px; border-radius: 99px; background: currentColor; }
.pill.online { background: var(--ok-soft); color: var(--ok); }
.pill.offline { background: var(--surface-3); color: var(--ink-2); }
.pill.stale { background: var(--danger-soft); color: var(--danger); }
.pill.neutral { background: var(--surface-3); color: var(--ink-2); }
.pill.warn { background: var(--warn-soft); color: var(--warn); }
.pill.info { background: var(--accent-soft); color: var(--accent-text); }

.tag {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 8px; border-radius: 5px;
  background: var(--surface-3); font-size: 11.5px; color: var(--ink-2); font-weight: 550;
}
.tag button { border: 0; background: none; cursor: pointer; color: var(--ink-4); padding: 0; line-height: 1; }

.tabs { display: flex; gap: 0; border-bottom: 1px solid var(--line); margin-bottom: 16px; overflow-x: auto; }
.tabs button {
  padding: 9px 14px; border: 0; background: none; cursor: pointer; color: var(--ink-2); font-size: 13px;
  border-bottom: 2px solid transparent; margin-bottom: -1px; font-weight: 570; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.active { color: var(--ink); border-bottom-color: var(--accent-text); font-weight: 620; }

.toolbar { display: flex; gap: 8px; align-items: center; margin-bottom: 14px; flex-wrap: wrap; }
.search { position: relative; flex: 1; min-width: 210px; max-width: 360px; }
.search input {
  width: 100%; padding: 8px 12px 8px 34px; border-radius: var(--r-sm);
  border: 1px solid var(--line-strong); background: var(--surface); outline: none;
}
.search input:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft-2); }
.search .ico { position: absolute; left: 11px; top: 50%; transform: translateY(-50%); font-size: 14px; color: var(--ink-4); }

.field { margin-bottom: 15px; }
.field label { display: block; font-size: 12.5px; font-weight: 620; margin-bottom: 5px; }
.field .hint { color: var(--ink-3); font-size: 12px; margin-top: 5px; }
.input, select.input, textarea.input {
  width: 100%; padding: 8px 11px; border-radius: var(--r-sm); border: 1px solid var(--line-strong);
  background: var(--surface); outline: none; transition: border-color .11s, box-shadow .11s;
}
.input:focus { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft-2); }
textarea.input { min-height: 80px; resize: vertical; }
input[type="color"].input { padding: 3px; height: 36px; cursor: pointer; }
/* field rows wrap rather than push the card wider than its column */
.row { display: flex; gap: 11px; flex-wrap: wrap; }
.row > * { flex: 1 1 170px; min-width: 0; }

.switch { position: relative; display: inline-block; width: 38px; height: 22px; flex: none; }
.switch input { opacity: 0; width: 0; height: 0; }
.switch span { position: absolute; inset: 0; background: var(--line-strong); border-radius: 99px; cursor: pointer; transition: .15s; }
.switch span::before { content: ""; position: absolute; width: 16px; height: 16px; left: 3px; top: 3px;
  background: #fff; border-radius: 99px; transition: .15s; box-shadow: var(--shadow-xs); }
.switch input:checked + span { background: var(--accent); }
.switch input:checked + span::before { transform: translateX(16px); }

.empty { padding: 58px 24px; text-align: center; color: var(--ink-2); }
.empty .big {
  width: 44px; height: 44px; margin: 0 auto 14px; border-radius: 11px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-3);
}
.empty .big .ico { font-size: 21px; }
.empty h3 { margin-bottom: 6px; font-size: 15px; }
.empty p { max-width: 440px; margin: 0 auto; color: var(--ink-3); font-size: 13px; }

.skel { background: linear-gradient(90deg, var(--surface-3) 25%, var(--surface-2) 50%, var(--surface-3) 75%);
  background-size: 200% 100%; animation: sk 1.3s infinite; border-radius: var(--r-sm); }
@keyframes sk { to { background-position: -200% 0; } }

.thumb {
  width: 58px; height: 36px; border-radius: 6px; object-fit: cover; background: var(--surface-3);
  border: 1px solid var(--line); flex: none; display: grid; place-items: center; color: var(--ink-4);
}
.thumb .ico { font-size: 16px; }
.thumb.lg { width: 92px; height: 56px; }
.thumb.sq { width: 40px; height: 40px; }

/* ---------- modal ---------- */
.modal-back {
  position: fixed; inset: 0; background: rgba(29, 21, 18, .46); backdrop-filter: blur(3px);
  display: grid; place-items: center; z-index: 100; padding: 24px;
}
.modal {
  background: var(--surface); border-radius: 14px; box-shadow: var(--shadow-lg);
  width: min(560px, 100%); max-height: 88vh; display: flex; flex-direction: column;
}
.modal.wide { width: min(920px, 100%); }
.modal.xwide { width: min(1200px, 100%); }
.modal-head { padding: 20px 22px 12px; display: flex; justify-content: space-between; align-items: flex-start; gap: 14px; }
.modal-head h3 { font-size: 16.5px; }
.modal-head .sub { color: var(--ink-3); font-size: 12.5px; margin-top: 3px; }
.modal-body { padding: 4px 22px 18px; overflow: auto; flex: 1; }
.modal-foot { padding: 14px 22px; border-top: 1px solid var(--line); display: flex; justify-content: flex-end; gap: 9px; }

.menu {
  position: fixed; background: var(--surface); border: 1px solid var(--line); border-radius: 11px;
  box-shadow: var(--shadow-lg); padding: 5px; z-index: 200; min-width: 205px;
}
.menu button {
  display: flex; align-items: center; gap: 10px; width: 100%; padding: 8px 10px;
  border: 0; background: none; border-radius: 7px; cursor: pointer; text-align: left;
  color: var(--ink); font-weight: 550; font-size: 13px;
}
.menu button:hover { background: var(--surface-3); }
.menu button.danger { color: var(--danger); }
.menu button .ico { font-size: 16px; opacity: .65; }
.menu .sep { height: 1px; background: var(--line); margin: 4px 0; }

#toasts { position: fixed; right: 20px; bottom: 20px; display: flex; flex-direction: column; gap: 8px; z-index: 400; }
.toast {
  background: var(--ink); color: #fff; padding: 11px 15px; border-radius: 10px;
  box-shadow: var(--shadow-lg); max-width: 390px; font-weight: 540; font-size: 13px; animation: tin .18s ease;
}
.toast.err { background: var(--danger); }
.toast.ok { background: var(--ok); }
@keyframes tin { from { transform: translateY(8px); opacity: 0; } }

/* ---------- donut (used sparingly) ---------- */
.donut-row { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.donut { position: relative; flex: none; }
/* one centred stack, not a two-row grid — the label used to slide down to the ring */
.donut .mid {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 1px; text-align: center; line-height: 1.15;
}
.donut .mid b { font-size: 22px; font-weight: 660; letter-spacing: -.03em; }
.donut .mid span { font-size: 11px; color: var(--ink-3); }
/* four aligned columns — dot, label, count, share — that hug their content
   instead of stretching the count to the far edge of a wide panel */
.legend {
  display: grid; grid-template-columns: auto minmax(0, max-content) auto auto;
  gap: 10px 12px; align-items: center; font-size: 12.5px; flex: 0 1 auto; min-width: 0;
}
.legend div { display: contents; }
.legend i { width: 9px; height: 9px; border-radius: 2px; }
.legend .k { color: var(--ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.legend .v { font-weight: 640; text-align: right; font-variant-numeric: tabular-nums; }
.legend .p { color: var(--ink-4); text-align: right; font-variant-numeric: tabular-nums; }

/* ---------- login ---------- */
.login-wrap {
  min-height: 100vh; display: grid; place-items: center; padding: 24px; background: var(--bg);
}
.login { width: min(392px, 100%); }
.login .card { box-shadow: var(--shadow); }
.login .card-pad { padding: 28px; }
.login .brand { padding: 0 0 20px; justify-content: flex-start; }

/* ---------- composition editor ---------- */
.editor { display: grid; grid-template-columns: 380px 1fr 320px; gap: 14px; align-items: start; }
.stage-wrap { background: var(--surface); border: 1px solid var(--line); border-radius: var(--r); padding: 16px; }
.stage { position: relative; margin: 0 auto; background: #0e1117; border-radius: 6px; overflow: hidden; }
.zone-box { position: absolute; border: 1.5px solid rgba(255,255,255,.28); background: rgba(255,255,255,.04); cursor: pointer; overflow: hidden; }
.zone-box.sel { border-color: #7ba0ff; box-shadow: inset 0 0 0 1.5px #7ba0ff; }
.zone-box .zlabel { position: absolute; top: 5px; left: 6px; font-size: 10.5px; color: #fff; background: rgba(0,0,0,.62);
  padding: 2px 6px; border-radius: 4px; z-index: 2; font-weight: 620; letter-spacing: .02em; }
.zone-box img, .zone-box video { width: 100%; height: 100%; object-fit: contain; display: block; }

.playlist { display: flex; flex-direction: column; gap: 6px; }
.pl-item {
  display: flex; align-items: center; gap: 9px; padding: 8px; border: 1px solid var(--line);
  border-radius: 9px; background: var(--surface);
}
.pl-item.drag { opacity: .35; }
.pl-item .grip { cursor: grab; color: var(--ink-4); display: grid; place-items: center; }
.pl-item .grip .ico { font-size: 14px; }
.pl-item .n { width: 20px; text-align: center; color: var(--ink-4); font-size: 11.5px; font-weight: 640; }
.pl-item .meta { flex: 1; min-width: 0; }
.pl-item .meta b { display: block; font-size: 12.5px; font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pl-item .meta span { font-size: 11px; color: var(--ink-3); }
.dur { display: flex; align-items: center; gap: 3px; }
.dur input { width: 52px; text-align: center; padding: 4px; border-radius: 6px; border: 1px solid var(--line-strong); background: var(--surface); font-size: 12.5px; }

.picker-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid var(--line-2); cursor: pointer;
}
.picker-row:hover { background: var(--surface-2); }
.picker-row.sel { background: var(--accent-soft); }

.layout-card {
  border: 1px solid var(--line); border-radius: var(--r); padding: 12px; background: var(--surface);
  cursor: pointer; transition: border-color .12s, box-shadow .12s;
}
.layout-card:hover { border-color: var(--line-strong); box-shadow: var(--shadow); }
.layout-card.sel { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.layout-prev { background: var(--surface-3); border-radius: 8px; height: 118px; display: grid; place-items: center; margin-bottom: 11px; }
.layout-prev .frame { position: relative; background: var(--surface); border: 1px solid var(--line-strong); border-radius: 2px; }
.layout-prev .z { position: absolute; border: 1px solid var(--accent); background: var(--accent-soft); }

/* ---------- schedule calendar ---------- */
.cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; }
.cal .dow { text-align: center; font-size: 11px; color: var(--ink-4); padding: 5px 0; font-weight: 700; letter-spacing: .07em; text-transform: uppercase; }
.cal .day {
  min-height: 78px; min-width: 0; border: 1px solid var(--line); border-radius: 9px; padding: 7px;
  background: var(--surface); cursor: pointer; transition: border-color .11s, background .11s;
}
.cal .day .row1 { min-width: 0; }
.cal .day:hover { border-color: var(--line-strong); background: var(--surface-2); }
.cal .day.out { opacity: .32; cursor: default; }
.cal .day.out:hover { border-color: var(--line); background: var(--surface); }
.cal .day .n { font-size: 12px; color: var(--ink-3); font-weight: 600; }
.cal .day .chip { font-size: 10.5px; padding: 2px 6px; border-radius: 5px; color: #fff; margin-top: 5px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 620; }
.cal .day.today { border-color: var(--accent-text); }
.cal .day.today .n { color: var(--accent-text); font-weight: 720; }

.timeline { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.tl-hour { display: flex; border-bottom: 1px solid var(--line-2); height: 46px; }
.tl-hour:last-child { border-bottom: 0; }
.tl-hour .lab { width: 64px; flex: none; font-size: 11px; color: var(--ink-4); padding: 4px 9px;
  border-right: 1px solid var(--line); background: var(--surface-2); font-weight: 600; }
.tl-hour .slot { flex: 1; position: relative; }
.tl-hour .slot:hover { background: var(--accent-soft); }
/* An earlier version of the timeline block was dark with white text. The block
   became cream but the colour was never taken back, so the name was drawn white
   on near-white and could not be read. Its <b> and .x are long gone from the
   markup too — the live rules are further down. */

@media (max-width: 1180px) { .editor { grid-template-columns: 1fr; } }
@media (max-width: 760px) {
  .sidebar { position: fixed; z-index: 60; transform: translateX(-100%); box-shadow: var(--shadow-lg); }
  .sidebar.open { transform: none; }
  .content { padding: 16px 14px 56px; }
  .kpis .kpi { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* champagne marker — plan, licences, anything worth a second look */
.pill.gold { background: var(--gold-soft); color: var(--gold); border-color: var(--gold-line); }
.tag.gold { background: var(--gold-soft); color: var(--gold); }

/* ---------- schedule calendar, assign mode ---------- */
.cal-head { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 5px; margin-bottom: 6px; }
.cal-head label {
  display: flex; align-items: center; justify-content: center; gap: 6px; padding: 7px 0;
  font-size: 11px; font-weight: 700; letter-spacing: .07em; text-transform: uppercase;
  color: var(--ink-3); cursor: pointer; border-radius: 8px;
}
.cal-head label:hover { background: var(--surface-3); color: var(--ink-2); }

.cal .day { position: relative; display: flex; flex-direction: column; gap: 4px; }
.cal .day .row1 { display: flex; align-items: center; justify-content: space-between; }
.cal .day .clear {
  position: absolute; top: 5px; right: 5px; width: 17px; height: 17px; border-radius: 5px;
  border: 0; background: var(--surface-3); color: var(--ink-3); cursor: pointer; display: none;
  align-items: center; justify-content: center; font-size: 11px; line-height: 1;
}
.cal .day:hover .clear { display: flex; }
.cal .day .clear:hover { background: var(--danger-soft); color: var(--danger); }
.cal .day.assign { cursor: pointer; }
.cal .day.picked { border-color: var(--accent-text); background: var(--accent-soft); }

/* sequence card in the left rail */
.seq-card {
  padding: 11px 12px 11px 14px;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  position: relative; overflow: hidden; margin-bottom: 9px;
}
.seq-card .top { display: flex; align-items: flex-start; gap: 6px; }
.seq-card .paint { width: 100%; margin-top: 10px; justify-content: center; white-space: nowrap; }
.seq-card::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--seq, var(--accent)); }
.seq-card .meta { flex: 1; min-width: 0; }
.seq-card .meta b { display: block; font-size: 13px; font-weight: 620; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.seq-card .meta span { font-size: 11.5px; color: var(--ink-3); }
.seq-card.active { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }

/* day sequence timeline */
.tl-wrap { position: relative; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.tl-scroll { position: relative; max-height: 62vh; overflow-y: auto; }
.tl-row { display: flex; border-bottom: 1px solid var(--line-2); height: 52px; position: relative; }
.tl-row:last-child { border-bottom: 0; }
.tl-row .gutter {
  width: 74px; flex: none; border-right: 1px solid var(--line); background: var(--surface-2);
  font-size: 11px; color: var(--ink-3); font-weight: 600; padding: 5px 8px;
  display: flex; align-items: flex-start; justify-content: space-between; gap: 4px;
}
.tl-row .gutter button {
  border: 0; background: none; color: var(--ink-4); cursor: pointer; font-size: 14px; line-height: 1; padding: 0 2px;
}
.tl-row .gutter button:hover { color: var(--accent-text); }
.tl-row .lane { flex: 1; position: relative; }
.tl-row .sub { position: absolute; left: 0; right: 0; border-top: 1px dashed var(--line-2); }

.tl-block {
  position: absolute; left: 80px; right: 10px; border-radius: 9px; overflow: hidden; z-index: 3;
  background: var(--warn-soft); border: 1px solid #e8cfa4; display: flex; align-items: center;
  gap: 9px; padding: 6px 9px; cursor: grab; min-height: 34px;
}
.tl-block:hover, .tl-block.sel { border-color: var(--warn); box-shadow: 0 0 0 3px rgba(163, 90, 8, .12); }
.tl-block img, .tl-block .ph {
  width: 40px; height: 26px; border-radius: 5px; object-fit: cover; flex: none;
  background: var(--surface-3); display: grid; place-items: center; color: var(--ink-4);
}
.tl-block { color: var(--ink); }
.tl-block .nm {
  flex: 1; min-width: 0; font-size: 12.5px; font-weight: 600; color: var(--ink);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.tl-block .when {
  background: var(--warn); color: #fff; border-radius: 6px; padding: 3px 9px;
  font-size: 11.5px; font-weight: 650; white-space: nowrap;
}
.tl-block .grab {
  position: absolute; left: 0; right: 0; bottom: 0; height: 7px; cursor: ns-resize;
  display: flex; align-items: center; justify-content: center;
}
.tl-block .grab::after { content: ""; width: 26px; height: 3px; border-radius: 99px; background: rgba(163,90,8,.45); }
.tl-actions {
  position: absolute; z-index: 6; display: flex; gap: 6px; background: var(--surface);
  border: 1px solid var(--line); border-radius: 9px; padding: 5px; box-shadow: var(--shadow-lg);
}

/* segmented control — three mutually exclusive choices in one strip */
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: var(--r-sm); overflow: hidden; background: var(--surface-2); }
.seg button {
  border: 0; background: none; font: inherit; font-size: 12.5px; font-weight: 550; color: var(--ink-2);
  padding: 7px 13px; cursor: pointer; border-right: 1px solid var(--line);
}
.seg button:last-child { border-right: 0; }
.seg button:hover { background: var(--surface-3); color: var(--ink); }
.seg button.active { background: var(--accent); color: #fff; }

/* ---------- custom layout builder ---------- */
.lay-stage { position: relative; width: 100%; border: 1px solid var(--line); border-radius: var(--r); background: var(--surface); overflow: hidden; }
.lay-canvas { position: absolute; inset: 0; }
.lay-canvas.grid {
  background-image:
    linear-gradient(to right, var(--line-2) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line-2) 1px, transparent 1px);
  background-size: calc(100% / var(--cells, 40)) calc(100% / var(--cells, 40));
}
.lay-zone {
  position: absolute; border: 1.5px solid var(--accent); background: var(--accent-soft);
  border-radius: 3px; cursor: move; display: grid; place-items: center; touch-action: none;
}
.lay-zone .nm { font-size: 12px; font-weight: 600; color: var(--accent-deep); pointer-events: none;
  padding: 0 6px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.lay-zone.sel { border-width: 2px; background: var(--accent-soft-2); box-shadow: 0 0 0 3px rgba(230, 81, 37, .12); }
.lay-zone .hd { position: absolute; width: 10px; height: 10px; background: #fff; border: 1.5px solid var(--accent); border-radius: 2px; }
.lay-zone .hd.nw { left: -5px; top: -5px; cursor: nwse-resize; }
.lay-zone .hd.n  { left: calc(50% - 5px); top: -5px; cursor: ns-resize; }
.lay-zone .hd.ne { right: -5px; top: -5px; cursor: nesw-resize; }
.lay-zone .hd.e  { right: -5px; top: calc(50% - 5px); cursor: ew-resize; }
.lay-zone .hd.se { right: -5px; bottom: -5px; cursor: nwse-resize; }
.lay-zone .hd.s  { left: calc(50% - 5px); bottom: -5px; cursor: ns-resize; }
.lay-zone .hd.sw { left: -5px; bottom: -5px; cursor: nesw-resize; }
.lay-zone .hd.w  { left: -5px; top: calc(50% - 5px); cursor: ew-resize; }

.lay-row { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 9px 10px; margin-bottom: 8px; cursor: pointer; background: var(--surface); }
.lay-row.sel { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.lay-row .top { display: flex; align-items: center; gap: 7px; font-size: 13px; }
.lay-row .grip { color: var(--ink-4); cursor: grab; font-size: 13px; line-height: 1; touch-action: none; }
.lay-row .nums { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 12px; margin-top: 10px; }
.lay-row .nf { display: flex; align-items: center; gap: 8px; font-size: 11.5px; color: var(--ink-3); }
.lay-row .nf span { width: 42px; flex: none; }
.lay-row .nf input { padding: 5px 8px; font-size: 12.5px; }

/* custom-layout ribbon on a layout card */
.layout-card { position: relative; }
.layout-card .ribbon {
  position: absolute; top: 0; right: 0; z-index: 2;
  background: var(--gold); color: #fff; font-size: 10.5px; font-weight: 700;
  letter-spacing: .04em; padding: 3px 10px; border-radius: 0 var(--r) 0 var(--r-sm);
}

/* composition step 2 — zone map + total duration */
.zonemap { position: relative; width: 128px; flex: none; border: 1px solid var(--line);
  border-radius: var(--r-sm); background: var(--surface-2); overflow: hidden; }
.zonemap .mz { position: absolute; border: 1px solid var(--accent); background: var(--accent-soft); overflow: hidden; }
.zonemap .mz.sel { background: var(--accent-soft-2); border-width: 1.5px; }
.zonemap .mz img { width: 100%; height: 100%; object-fit: cover; display: block; opacity: .85; }
.totalbox { border: 1px solid var(--line); border-radius: var(--r-sm); padding: 7px 11px;
  font-size: 14px; font-weight: 650; background: var(--surface); font-variant-numeric: tabular-nums; }

/* playlist row actions stay out of the way until the row is hovered */
.pl-item .act { visibility: hidden; }
.pl-item:hover .act, .pl-item:focus-within .act { visibility: visible; }

/* ---------- Add Screen wizard ---------- */
.wiz-steps { display: flex; align-items: center; gap: 9px; margin: -4px 0 20px; flex-wrap: wrap; }
.wiz-step { display: flex; align-items: center; gap: 8px; }
.wiz-step .bar { width: 26px; height: 1px; background: var(--line-strong); margin-right: 8px; }
.wiz-step .n {
  width: 19px; height: 19px; border-radius: 99px; display: grid; place-items: center;
  font-size: 10.5px; font-weight: 700; background: var(--surface-3); color: var(--ink-3);
}
.wiz-step .l { font-size: 12px; color: var(--ink-4); font-weight: 500; }
.wiz-step.on .n { background: var(--accent); color: #fff; }
.wiz-step.on .l { color: var(--accent-text); font-weight: 650; }
.wiz-step.done .n { background: var(--ok); color: #fff; }
.wiz-step.done .l { color: var(--ink-2); }

.input.good { border-color: var(--ok); box-shadow: 0 0 0 3px rgba(10, 111, 74, .1); }

.pick-card {
  width: 100%; display: flex; align-items: center; gap: 12px; text-align: left; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--r); background: var(--surface);
  padding: 12px 14px; font: inherit; color: inherit; transition: border-color .12s, box-shadow .12s;
}
.pick-card:hover { border-color: var(--accent-text); box-shadow: 0 0 0 3px var(--accent-soft); }
.pick-card .ic { width: 34px; height: 34px; flex: none; border-radius: 8px; display: grid; place-items: center;
  background: var(--surface-3); color: var(--ink-2); }
.pick-card .tx { flex: 1; min-width: 0; }
.pick-card .tx b { display: block; font-size: 13px; }
.pick-card .tx span { font-size: 12px; color: var(--ink-3); }
.pick-card > .ico:last-child { color: var(--ink-4); }

.loc-suggest {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20; margin-top: 4px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--r-sm);
  box-shadow: var(--shadow-md); overflow: hidden; max-height: 210px; overflow-y: auto;
}
.loc-suggest button {
  width: 100%; display: flex; align-items: flex-start; gap: 9px; padding: 8px 11px; border: 0;
  background: none; font: inherit; font-size: 12.5px; text-align: left; cursor: pointer; color: var(--ink);
}
.loc-suggest button:hover { background: var(--surface-2); }
.loc-suggest button .ico { color: var(--ink-4); }

/* a hidden element stays hidden whatever its own display rule says */
[hidden] { display: none !important; }

/* donut panels need room for the ring plus a full legend line */
.donut-grid { grid-template-columns: repeat(auto-fit, minmax(360px, 1fr)); }

/* tag picker: chosen tags read as chosen, the rest stay pickable */
.tag.sel { background: var(--ok-soft, #e7f5ef); color: var(--ok); border-color: #b8e0ce; font-weight: 600; }
.tag.sel button { border: 0; background: none; color: inherit; cursor: pointer; font: inherit;
  margin-left: 5px; padding: 0 1px; opacity: .7; line-height: 1; }
.tag.sel button:hover { opacity: 1; }
.tag.pick { cursor: pointer; }
.tag.pick:hover { border-color: var(--accent-text); color: var(--accent-text); background: var(--accent-soft); }

/* .menu styles its children as full-width rows; a popover is a small form, not a menu */
.menu.pop button { width: auto; display: inline-flex; padding: unset; border-radius: unset;
  font-weight: unset; font-size: unset; text-align: unset; }
.menu.pop button:hover { background: unset; }
.menu.pop .btn { padding: 7px 12px; border-radius: var(--r-sm); font-size: 12.5px; font-weight: 570; }
.menu.pop .btn.sm { padding: 6px 11px; }
.menu.pop .tag { padding: 3px 9px; border-radius: 99px; font-size: 11.5px; }

/* place lookup field */
.place-field { position: relative; }
.place-field .search { position: relative; }
.place-field .search .clear {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: none; cursor: pointer; color: var(--ink-4); padding: 2px; line-height: 1;
}
.place-field .search .clear:hover { color: var(--ink-2); }
.place-field .input.bad { border-color: var(--danger); }
.place-field .hint { color: var(--danger); }
.loc-suggest button.on { background: var(--accent-soft); }

/* app catalogue icons */
.app-ico { width: 20px; height: 20px; display: block; }
.app-tile {
  width: 38px; height: 38px; border-radius: 10px; flex: none; display: grid; place-items: center;
  background: var(--accent-soft); color: var(--accent-text);
}
.app-tile.sm { width: 30px; height: 30px; border-radius: 8px; }
.app-tile.sm .app-ico { width: 16px; height: 16px; }

/* ---------- assign screens dialog ---------- */
.assign-bar {
  display: flex; align-items: center; gap: 16px; font-size: 12.5px;
  padding: 8px 2px; border-bottom: 1px solid var(--line);
}
.assign-bar b { color: var(--accent-text); font-weight: 640; }
.assign-bar label { display: flex; align-items: center; gap: 7px; cursor: pointer; color: var(--ink-2); }
.data th.sortable { cursor: pointer; user-select: none; white-space: nowrap; }
.data th.sortable:hover { color: var(--ink); }
.data th .arrow { color: var(--accent-text); font-size: 11px; margin-left: 3px; }
tr.pickrow { cursor: pointer; }
tr.pickrow:hover > td { background: var(--surface-2); }
tr.pickrow.on > td { background: var(--accent-soft); }
.ico-dim { color: var(--ink-4); display: inline-flex; }

/* ---------- email alert rules ---------- */
.alert-row {
  display: flex; align-items: center; gap: 14px; padding: 13px 2px;
  border-bottom: 1px solid var(--line-2);
}
.alert-row:last-child { border-bottom: 0; }
.alert-row .tx { flex: 1; min-width: 0; }
.alert-row .tx b { display: block; font-size: 13px; font-weight: 620; }
.alert-row .tx span { font-size: 12px; color: var(--ink-3); }
.alert-row .thr {
  display: flex; align-items: center; gap: 7px; flex: none; flex-wrap: wrap;
  font-size: 12px; color: var(--ink-3); opacity: .45; transition: opacity .15s;
}
.alert-row.on .thr { opacity: 1; }
.alert-row .thr input { width: 66px; padding: 5px 8px; font-size: 12.5px; text-align: center; }
@media (max-width: 1180px) {
  .alert-row { flex-wrap: wrap; }
  .alert-row .thr { width: 100%; min-width: 0; padding-left: 46px; box-sizing: border-box; }
}
.switch.sm { width: 32px; height: 19px; }
.switch.sm span::before { width: 13px; height: 13px; }
.switch.sm input:checked + span::before { transform: translateX(13px); }

/* roles: the permission matrix scrolls on its own instead of pushing the page */
.roles-split { display: grid; grid-template-columns: 250px minmax(0, 1fr); }
@media (max-width: 900px) {
  .roles-split { grid-template-columns: 1fr; }
  .roles-split > div:first-child { border-right: 0; border-bottom: 1px solid var(--line); }
}

/* ================= motion =================
   Small, quick, and only where it explains something: a page arriving, rows
   settling in order, a dialog stepping forward, a number that just changed.
   Nothing loops, nothing waits for the user. */

@keyframes viewIn   { from { opacity: 0; transform: translateY(6px); } }
@keyframes rowIn    { from { opacity: 0; transform: translateY(5px); } }
@keyframes popIn    { from { opacity: 0; transform: translateY(6px) scale(.985); } }
@keyframes backIn   { from { opacity: 0; } }
@keyframes menuIn   { from { opacity: 0; transform: translateY(-4px) scale(.98); } }
@keyframes countIn  { from { opacity: 0; transform: translateY(4px); } }
@keyframes pillIn   { from { transform: scale(.82); opacity: 0; } }
@keyframes ringPulse{ 0% { box-shadow: 0 0 0 0 rgba(10,111,74,.35); } 70%,100% { box-shadow: 0 0 0 6px rgba(10,111,74,0); } }
@keyframes barGrow  { from { transform: scaleX(0); } }

/* a page swapping in */
#view > * { animation: viewIn .22s cubic-bezier(.2,.8,.3,1) both; }
#view { animation: backIn .18s ease both; }

/* table rows and list rows settle in sequence — capped so a long list is not a wave */
.data tbody tr { animation: rowIn .26s cubic-bezier(.2,.8,.3,1) both; }
.data tbody tr:nth-child(1) { animation-delay: .00s }
.data tbody tr:nth-child(2) { animation-delay: .02s }
.data tbody tr:nth-child(3) { animation-delay: .04s }
.data tbody tr:nth-child(4) { animation-delay: .06s }
.data tbody tr:nth-child(5) { animation-delay: .08s }
.data tbody tr:nth-child(6) { animation-delay: .10s }
.data tbody tr:nth-child(7) { animation-delay: .12s }
.data tbody tr:nth-child(n+8) { animation-delay: .14s }

.rows > .r { animation: rowIn .24s cubic-bezier(.2,.8,.3,1) both; }
.rows > .r:nth-child(2) { animation-delay: .03s }
.rows > .r:nth-child(3) { animation-delay: .06s }
.rows > .r:nth-child(n+4) { animation-delay: .09s }

/* cards that arrive as a set */
.kpis .kpi   { animation: rowIn .3s cubic-bezier(.2,.8,.3,1) both; }
.kpis .kpi:nth-child(2) { animation-delay: .04s }
.kpis .kpi:nth-child(3) { animation-delay: .08s }
.kpis .kpi:nth-child(4) { animation-delay: .12s }
.kpi .k-value { animation: countIn .34s cubic-bezier(.2,.8,.3,1) both; animation-delay: .06s; }

.layout-card, .grid > .card { animation: rowIn .28s cubic-bezier(.2,.8,.3,1) both; }
.grid > .card:nth-child(2), .layout-card:nth-child(2) { animation-delay: .04s }
.grid > .card:nth-child(3), .layout-card:nth-child(3) { animation-delay: .08s }
.grid > .card:nth-child(n+4), .layout-card:nth-child(n+4) { animation-delay: .12s }

/* dialogs, menus, popovers */
.modal-back { animation: backIn .16s ease both; }
.modal-back .modal { animation: popIn .2s cubic-bezier(.2,.9,.3,1) both; }
.menu { animation: menuIn .13s cubic-bezier(.2,.9,.3,1) both; transform-origin: top left; }
.loc-suggest { animation: menuIn .12s ease both; }
.tl-actions { animation: menuIn .13s cubic-bezier(.2,.9,.3,1) both; }

/* status and progress */
.pill { animation: pillIn .2s cubic-bezier(.3,1.3,.5,1) both; }
.pill.online .dot, .pill.online::before { animation: ringPulse 2.6s ease-out infinite; }
.progress > i { transform-origin: left; animation: barGrow .5s cubic-bezier(.2,.8,.3,1) both; }
.donut svg circle { transition: stroke-dasharray .62s cubic-bezier(.2,.85,.3,1); }
.donut .mid b { font-variant-numeric: tabular-nums; }
.legend div > * { animation: rowIn .3s cubic-bezier(.2,.8,.3,1) both; }
.legend div:nth-child(2) > * { animation-delay: .05s }
.legend div:nth-child(3) > * { animation-delay: .1s }
.legend div:nth-child(n+4) > * { animation-delay: .15s }

/* things that respond to the pointer */
.btn { transition: background .13s, border-color .13s, color .13s, transform .09s, box-shadow .13s; }
.btn:active:not(:disabled) { transform: translateY(1px); }
.nav-item { transition: background .13s, color .13s; }
.card { transition: box-shadow .16s, border-color .16s; }
.picker-row, .pick-card, .seq-card, .alert-row { transition: background .13s, border-color .13s, box-shadow .13s; }
.tag.pick { transition: background .12s, border-color .12s, color .12s; }
.thumb { transition: transform .18s cubic-bezier(.2,.8,.3,1); }
.data tbody tr:hover .thumb, .picker-row:hover .thumb { transform: scale(1.06); }

/* the sidebar opening and closing */
.sidebar { transition: width .18s cubic-bezier(.2,.8,.3,1), flex-basis .18s cubic-bezier(.2,.8,.3,1); }

/* someone who asked the system to calm down gets no movement at all */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: .001ms !important; animation-delay: 0ms !important;
    transition-duration: .001ms !important;
  }
}

/* ================= narrow screens =================
   Below this the sidebar cannot simply sit there — 232px of a 390px phone is most
   of the screen. It becomes a drawer over the content, opened from the topbar,
   and closes as soon as you pick something. */
@media (max-width: 860px) {
  .sidebar {
    position: fixed; top: 0; left: 0; z-index: 60;
    height: 100dvh; width: 264px; flex-basis: 264px;
    transform: translateX(-100%);
    transition: transform .22s cubic-bezier(.32, .72, 0, 1);
    box-shadow: var(--shadow-lg);
  }
  .sidebar.open { transform: none; }
  /* collapsing is meaningless in a drawer */
  .sidebar.collapsed { width: 264px; flex-basis: 264px; }
  .sidebar.collapsed .nav-label,
  .sidebar.collapsed .brand-text,
  .sidebar.collapsed .nav-caption,
  .sidebar.collapsed .sidebar-foot span { display: revert; }
  .sidebar.collapsed .nav-item { justify-content: flex-start; padding-left: 12px; padding-right: 12px; }
  /* a drawer is never narrow, so the lockup belongs here too */
  .sidebar.collapsed .brand { padding: 18px 14px 16px; justify-content: center; }
  .sidebar.collapsed .brand-lockup { display: block; }
  .sidebar.collapsed .brand:has(.brand-lockup) .brand-mark { display: none; }
  .sidebar-foot [data-collapse] { display: none; }

  [data-mobile-nav] { display: inline-flex !important; }

  .nav-backdrop {
    position: fixed; inset: 0; z-index: 59;
    background: rgba(29, 21, 18, .42);
    opacity: 0; pointer-events: none; transition: opacity .22s ease;
  }
  .nav-backdrop.on { opacity: 1; pointer-events: auto; }

  .content { padding-left: 14px; padding-right: 14px; }
}

@media (prefers-reduced-motion: reduce) {
  .sidebar { transition: none; }
}

/* ================= select =================
   The native control draws the operating system's own menu, which is the one
   piece of the console that never matched the rest of it. The real <select> stays
   in the DOM and stays the source of truth — every existing .value read and
   change handler keeps working — and this is drawn over the top of it. */
.pick { position: relative; }
.pick > select { position: absolute; inset: 0; opacity: 0; pointer-events: none; }

.pick-btn {
  display: flex; align-items: center; gap: 8px;
  font: inherit; color: var(--ink); text-align: left; cursor: pointer;
}
.pick-btn .pick-label { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pick-btn > .ico { flex: none; font-size: 12px; color: var(--ink-3); transition: transform .16s ease; }
.pick-btn[aria-expanded="true"] > .ico { transform: rotate(180deg); }
.pick-btn:disabled { opacity: .55; cursor: not-allowed; }
.pick-btn.placeholder .pick-label { color: var(--ink-3); }

.pick-list { display: flex; flex-direction: column; gap: 1px; max-height: 46vh; overflow: auto; }
/* .menu.pop resets every button inside it, so these need saying explicitly */
.menu.pop .pick-opt {
  display: flex; align-items: center; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 6px; background: none;
  font: inherit; font-size: 13px; font-weight: 500; color: var(--ink);
  text-align: left; cursor: pointer;
}
.menu.pop .pick-opt > span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.menu.pop .pick-opt > .ico { flex: none; font-size: 12px; color: var(--accent-text); }
.menu.pop .pick-opt:hover, .menu.pop .pick-opt:focus-visible { background: var(--surface-3); outline: none; }
.menu.pop .pick-opt.on { color: var(--accent-text); font-weight: 620; }
.menu.pop .pick-opt.on:hover { background: var(--accent-soft); }
.menu.pop .pick-opt:disabled { opacity: .45; cursor: not-allowed; }