/* =========================================================================
   OneMark platform styles — loaded ONCE from the root layout (cached), not
   inlined per component. Everything OneMark (the brand bar, the app switcher,
   the shared tab strip, the component kit + per-app reskins, and the /home
   dashboard) lives here. Components emit markup + classes only.

   Reskin selectors that override an app's own stylesheet (.cs-app / .ch-app)
   are written one class deeper (e.g. `.cs-app .btn.btn-primary`) so they win
   regardless of stylesheet load order.
   ========================================================================= */

/* ---- shared avatar component (<.avatar>) ----
   One initials-in-a-circle used everywhere. Color comes in via the inline
   `--av-c` custom property (a per-name palette hash, or an explicit/status
   color); a subtle same-hue gradient gives every avatar consistent depth. */
.om-av { display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto;
  border-radius: 50%; color: #fff; font-weight: 700; line-height: 1; letter-spacing: -.02em;
  background: linear-gradient(135deg, color-mix(in srgb, var(--av-c, #64748b) 82%, #000), var(--av-c, #64748b)); }
.om-av-square { border-radius: 26%; }
.om-av-ring { box-shadow: 0 0 0 1.5px #fff; }
.om-av-brand { background: linear-gradient(135deg, #1e3a5f, #2563eb); }
/* Overlapping cluster of avatars (presence chips, assignee stacks). */
.om-av-stack { display: inline-flex; align-items: center; }
.om-av-stack .om-av + .om-av { margin-left: -6px; }
.om-av-xs { width: 18px; height: 18px; font-size: 9px; }
.om-av-sm { width: 22px; height: 22px; font-size: 10.5px; }
.om-av-md { width: 28px; height: 28px; font-size: 12px; }
.om-av-lg { width: 36px; height: 36px; font-size: 15px; }
.om-av-xl { width: 48px; height: 48px; font-size: 19px; }
.om-av-2xl { width: 72px; height: 72px; font-size: 26px; }

/* ---- design tokens ---- */
:root {
  --om-accent: #2563eb; --om-accent-dark: #1d4ed8; --om-accent-bg: #eff6ff;
  --om-bg: #f8fafc; --om-surface: #ffffff;
  --om-border: #e2e8f0; --om-border-light: #f1f5f9;
  --om-text: #1e293b; --om-text-light: #64748b; --om-text-muted: #94a3b8;
  --om-success: #10b981; --om-warning: #f59e0b; --om-danger: #ef4444;
  --om-radius: 6px; --om-radius-lg: 12px;
  --om-shadow-sm: 0 1px 2px rgba(15,23,42,.05);
  --om-shadow: 0 1px 3px rgba(15,23,42,.1), 0 1px 2px rgba(15,23,42,.06);
}
/* per-app accent — everything inside the app wrapper inherits it */
.cs-app { --om-accent: #6366f1; --om-accent-dark: #4f46e5; --om-accent-bg: #eef2ff; }
.ch-app { --om-accent: #0ea5e9; --om-accent-dark: #0284c7; --om-accent-bg: #e0f2fe; }

/* ===== Brand bar ===== */
.om-bar {
  --om-bar-h: 52px;
  background: #ffffff;
  border-top: 2px solid var(--om-accent);
  border-bottom: 1px solid #e5e7eb;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  position: sticky; top: 0; z-index: 200;
  font-family: 'Inter', system-ui, -apple-system, sans-serif;
}
.om-bar .om-bar-inner {
  height: var(--om-bar-h);
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0 16px;
}
.om-bar .om-brandblock { position: relative; display: flex; align-items: center; gap: 10px; min-width: 0; }
.om-bar .om-home-link {
  display: inline-flex; align-items: center; padding: 4px 8px;
  border-radius: 8px; transition: background .12s; text-decoration: none;
}
.om-bar .om-home-link:hover { background: #f1f5f9; }
.om-bar .om-switch-toggle {
  display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; margin-left: 2px;
  border-radius: 9px; cursor: pointer; color: #475569;
  background: #f1f5f9; border: 1px solid var(--om-line, #e7eaf1);
  transition: background .12s, border-color .12s, color .12s;
}
.om-bar .om-switch-toggle:hover { background: #e2e8f0; border-color: #cbd5e1; color: #1e293b; }
.om-bar .om-brandblock.open .om-switch-toggle { background: #e0e7ff; border-color: #c7d2fe; color: #4f46e5; }
.om-bar .om-switch-grid { flex-shrink: 0; }
.om-bar .om-switch-label { font-size: 12.5px; font-weight: 650; letter-spacing: -.01em; }
.om-bar .om-logo { height: 26px; width: auto; display: block; }
.om-bar .om-caret { color: currentColor; opacity: .7; flex-shrink: 0; transition: transform .15s ease; }
.om-bar .om-brandblock.open .om-caret { transform: rotate(180deg); }
@media (max-width: 560px) { .om-bar .om-switch-label { display: none; } }
.om-bar .om-divider { width: 1px; height: 22px; background: #e2e8f0; flex-shrink: 0; }
.om-bar .om-appname {
  font-size: 14px; font-weight: 600; color: var(--om-accent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0;
  /* It is an <a> back to the app's own home — kill the default underline and
     give it a hover so it reads as clickable rather than as decoration. */
  text-decoration: none;
}
.om-bar a.om-appname:hover { text-decoration: underline; }

/* app switcher dropdown */
.om-bar .om-switcher {
  position: absolute; top: calc(100% + 8px); left: 0; width: 340px;
  padding: 16px; background: #fff; border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.05);
  border: 1px solid rgba(0,0,0,.06);
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98);
  transform-origin: top left; transition: opacity .15s ease, transform .15s ease;
  z-index: 300;
}
.om-bar .om-brandblock.open .om-switcher { opacity: 1; pointer-events: auto; transform: translateY(0) scale(1); }
.om-bar .om-switcher-title {
  font-size: 11px; color: #64748b; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; margin: 0 4px 10px;
}
.om-bar .om-switcher-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 4px; }
.om-bar .om-card {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  padding: 14px 8px; border-radius: 10px; text-decoration: none;
  color: #0f172a; transition: background .12s;
}
.om-bar .om-card:hover { background: #f1f5f9; }
.om-bar .om-card.current { background: #eff6ff; }
.om-bar .om-card.current .om-card-name { color: #1d4ed8; }
.om-bar .om-card-icon {
  width: 46px; height: 46px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center; color: #fff;
  box-shadow: 0 1px 3px rgba(0,0,0,.1);
}
.om-bar .om-card-name { font-size: 12px; font-weight: 600; text-align: center; line-height: 1.3; }
.om-bar .om-card-soon {
  margin-top: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 8px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em;
  background: #fef3c7; color: #92400e;
}
.om-bar .om-card-desc { font-size: 10px; color: #64748b; text-align: center; line-height: 1.3; }

/* user menu */
.om-bar .om-user { display: flex; align-items: center; gap: 10px; flex-shrink: 0; }
.om-bar .om-username { font-size: 13px; color: #334155; white-space: nowrap; max-width: 220px; overflow: hidden; text-overflow: ellipsis; }
.om-bar .om-role {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: #eef2ff; color: #4338ca; white-space: nowrap;
}

/* avatar -> hover/focus menu listing the user's roles by app */
.om-bar .om-userbadge { position: relative; display: inline-flex; cursor: default; outline: none; }
.om-bar .om-userbadge .om-av { cursor: pointer; }
.om-bar .om-roles-menu {
  position: absolute; top: calc(100% + 8px); right: 0; min-width: 200px; max-width: 280px;
  background: #fff; border: 1px solid rgba(0,0,0,.06); border-radius: 12px;
  box-shadow: 0 12px 40px rgba(0,0,0,.18), 0 1px 3px rgba(0,0,0,.05);
  padding: 10px 12px; z-index: 300;
  opacity: 0; pointer-events: none; transform: translateY(-6px) scale(.98); transform-origin: top right;
  transition: opacity .15s ease, transform .15s ease;
}
.om-bar .om-userbadge:hover .om-roles-menu,
.om-bar .om-userbadge:focus-within .om-roles-menu {
  opacity: 1; pointer-events: auto; transform: translateY(0) scale(1);
}
.om-bar .om-roles-title {
  font-size: 10px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase;
  color: #94a3b8; margin: 0 0 8px;
}
.om-bar .om-roles-group { display: flex; flex-direction: column; gap: 1px; margin-bottom: 8px; }
.om-bar .om-roles-group:last-child { margin-bottom: 0; }
.om-bar .om-roles-app { font-size: 11px; font-weight: 600; color: #94a3b8; }
.om-bar .om-roles-list { font-size: 13px; color: #1e293b; line-height: 1.35; }
.om-bar .om-logout {
  font-size: 13px; font-weight: 600; color: #475569; text-decoration: none;
  padding: 6px 10px; border-radius: 6px; transition: background .12s, color .12s; white-space: nowrap;
}
.om-bar .om-logout:hover { background: #f1f5f9; color: #0f172a; }

/* Notification bell → /inbox, with an unread badge. */
.om-bar .om-bell {
  position: relative; display: inline-flex; align-items: center; justify-content: center;
  width: 34px; height: 34px; border-radius: 9px; color: #475569; text-decoration: none;
  transition: background .12s, color .12s;
}
.om-bar .om-bell:hover { background: #f1f5f9; color: var(--om-accent, #2563eb); }
.om-bar .om-bell-badge {
  position: absolute; top: 1px; right: 0; min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #b91c1c; color: #fff; font-size: 10px; font-weight: 800;
  line-height: 16px; text-align: center; box-shadow: 0 0 0 2px #fff;
}
/* Siren severity on the bell: amber for a warning alert, pulsing red for critical. */
.om-bar .om-bell-badge.om-bell-warning { background: #d97706; }
.om-bar .om-bell-badge.om-bell-critical { background: #ef4444; animation: omBellPulse 1.6s ease-in-out infinite; }
@keyframes omBellPulse {
  0%, 100% { box-shadow: 0 0 0 2px #fff; }
  50% { box-shadow: 0 0 0 2px #fff, 0 0 0 5px rgba(239, 68, 68, .35); }
}

@media (max-width: 640px) {
  .om-bar .om-appname, .om-bar .om-username { display: none; }
  .om-bar .om-switcher { width: 280px; }
}

/* ===== Shared tab strip (each app's nav renders into this) ===== */
.om-tabs {
  background: #fff; border-bottom: 1px solid #e5e7eb;
  display: flex; align-items: center; gap: 2px; flex-wrap: wrap;
  padding: 0 12px; position: sticky; top: 52px; z-index: 190;
}
.om-tabs .om-tab {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 10px 12px; font-size: 13px; font-weight: 500; color: #475569;
  text-decoration: none; white-space: nowrap; border: none; background: transparent;
  cursor: pointer; border-bottom: 2px solid transparent; border-radius: 6px 6px 0 0;
  transition: color .12s, border-color .12s, background .12s;
}
.om-tabs .om-tab:hover { color: var(--om-accent); background: #f8fafc; }
.om-tabs .om-tab.om-tab--active { color: var(--om-accent); border-bottom-color: var(--om-accent); font-weight: 600; }

/* ===== Component kit — reusable primitives, accent-keyed ===== */
.om-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 14px; border-radius: var(--om-radius); border: 1px solid transparent;
  font-size: 13px; font-weight: 600; line-height: 1; cursor: pointer; text-decoration: none;
  transition: background .15s, border-color .15s, color .15s;
}
.om-btn--primary { background: var(--om-accent); color: #fff; }
.om-btn--primary:hover { background: var(--om-accent-dark); }
.om-btn--secondary { background: #fff; color: var(--om-text); border-color: var(--om-border); }
.om-btn--secondary:hover { border-color: var(--om-accent); color: var(--om-accent); }
.om-btn--ghost { background: transparent; color: var(--om-text-light); }
.om-btn--ghost:hover { background: var(--om-bg); color: var(--om-accent); }
.om-btn--danger { background: #fff; color: var(--om-danger); border-color: var(--om-danger); }
.om-btn--danger:hover { background: var(--om-danger); color: #fff; }
.om-btn--sm { padding: 5px 10px; font-size: 12px; }
.om-card-surface {
  background: var(--om-surface); border: 1px solid var(--om-border);
  border-radius: var(--om-radius-lg); box-shadow: var(--om-shadow-sm); padding: 20px;
}
.om-badge {
  display: inline-flex; align-items: center; padding: 2px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 600; background: var(--om-accent-bg); color: var(--om-accent-dark);
}
.om-table { width: 100%; border-collapse: collapse; }
.om-table th {
  background: var(--om-bg); color: var(--om-text-light); font-size: 11px; font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em; text-align: left;
  padding: 10px 12px; border-bottom: 2px solid var(--om-border); white-space: nowrap;
}
.om-table td { padding: 10px 12px; font-size: 13px; border-bottom: 1px solid var(--om-border-light); }
.om-input {
  width: 100%; padding: 8px 12px; border: 1px solid var(--om-border); border-radius: var(--om-radius);
  font-size: 13px; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s;
}
.om-input:focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px var(--om-accent-bg); }

/* ---- reskins of each app's existing classes (one class deeper so they
        win over .cs-app/.ch-app stylesheets regardless of load order) ---- */
.cs-app .btn.btn-primary, .ch-app .btn.btn-primary {
  background: var(--om-accent); border-color: var(--om-accent); color: #fff;
  box-shadow: none; border-radius: var(--om-radius);
}
.cs-app .btn.btn-primary:hover, .ch-app .btn.btn-primary:hover {
  background: var(--om-accent-dark); border-color: var(--om-accent-dark);
  box-shadow: none; transform: none;
}
.cs-app .btn.btn-secondary, .ch-app .btn.btn-secondary { border-radius: var(--om-radius); }
.cs-app .btn.btn-secondary:hover, .ch-app .btn.btn-secondary:hover {
  border-color: var(--om-accent); color: var(--om-accent);
}
.cs-app .btn.btn-ghost:hover { background: var(--om-bg); color: var(--om-accent); }
.ch-app .btn.btn-success { background: var(--om-success); border-color: var(--om-success); }
.ch-app table.rate-table th {
  background: var(--om-bg); color: var(--om-text-light);
  border-bottom: 2px solid var(--om-border); font-weight: 600;
  text-transform: uppercase; letter-spacing: .03em;
}
.cs-app input[type="text"]:focus, .cs-app input[type="search"]:focus,
.cs-app input[type="number"]:focus, .ch-app input[type="text"]:focus,
.ch-app input[type="search"]:focus {
  border-color: var(--om-accent); box-shadow: 0 0 0 3px var(--om-accent-bg);
}

/* ===== Coming-soon hero ===== */
.om-coming { --om-accent: #2563eb; min-height: 100vh; background: #f8fafc; font-family: 'Inter', system-ui, -apple-system, sans-serif; }
.om-coming-main { max-width: 720px; margin: 0 auto; padding: 72px 20px; }
.om-coming-card { text-align: center; padding: 48px 32px; }
.om-coming-icon {
  width: 76px; height: 76px; border-radius: 20px; margin: 0 auto 20px;
  display: flex; align-items: center; justify-content: center; background: var(--om-accent); color: #fff;
}
.om-coming-badge {
  display: inline-block; padding: 3px 12px; border-radius: 999px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; background: var(--om-accent); color: #fff; margin-bottom: 14px;
}
.om-coming-title { font-size: 26px; font-weight: 800; color: #0f172a; margin: 10px 0 8px; }
.om-coming-blurb { font-size: 15px; color: #475569; line-height: 1.5; max-width: 460px; margin: 0 auto; }
.om-coming-note { font-size: 13px; color: #94a3b8; margin-top: 24px; }

/* ===== Home dashboard ===== */
.om-home {
  --om-ink: #0f172a; --om-muted: #64748b; --om-line: #e7eaf1;
  position: relative; min-height: calc(100vh - 52px); overflow: hidden;
  background: #f5f6fb;
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: var(--om-ink);
}
.om-home-aurora {
  position: absolute; inset: -30% -10% auto -10%; height: 620px; z-index: 0; pointer-events: none;
  background:
    radial-gradient(40% 55% at 18% 20%, rgba(37,99,235,.22), transparent 70%),
    radial-gradient(38% 50% at 78% 8%, rgba(124,58,237,.18), transparent 70%),
    radial-gradient(45% 55% at 55% 40%, rgba(14,165,233,.16), transparent 72%);
  filter: blur(18px); opacity: .9;
  animation: omAuroraIn 1.7s cubic-bezier(.2,.7,.2,1) both, omAurora 22s ease-in-out 1.7s infinite alternate;
}
@keyframes omAuroraIn {
  from { opacity: 0; transform: scale(1.18) translateY(-4%); }
  60%  { opacity: 1; }
  to   { opacity: .9; transform: none; }
}
@keyframes omAurora {
  0%   { transform: translate3d(0,0,0) scale(1); }
  50%  { transform: translate3d(2%, 2%, 0) scale(1.06); }
  100% { transform: translate3d(-2%, 1%, 0) scale(1.02); }
}
.om-home-wrap { position: relative; z-index: 1; max-width: 1120px; margin: 0 auto; padding: 40px 24px 72px; }

@keyframes omRise { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.om-rise { opacity: 0; animation: omRise .7s cubic-bezier(.2,.7,.2,1) forwards; animation-delay: var(--d, 0ms); }

.om-hero { padding: 26px 4px 30px; }
.om-eyebrow { font-size: 12px; font-weight: 600; letter-spacing: .14em; text-transform: uppercase; color: var(--om-muted); margin: 0 0 12px; }
/* Hero entrance: date tracks in from wide letterspacing, each greeting line
   rises out of an overflow mask, the name gets a one-time gradient sheen,
   the period pops, and the tagline resolves out of a blur. */
.om-eyebrow-date {
  display: inline-block; opacity: 0;
  animation: omTrackIn 1.1s cubic-bezier(.2,.7,.2,1) .15s forwards;
}
@keyframes omTrackIn {
  from { opacity: 0; letter-spacing: .55em; filter: blur(4px); }
  to   { opacity: 1; letter-spacing: .14em; filter: none; }
}
.om-greet-mask {
  display: inline-block; overflow: hidden; vertical-align: bottom;
  padding-bottom: .10em; margin-bottom: -.10em;
}
.om-greet-word {
  display: inline-block; transform: translateY(118%);
  animation: omWordUp .85s cubic-bezier(.16,.84,.28,1) .3s forwards;
}
.om-greet-word2 { animation-delay: .5s; }
@keyframes omWordUp { to { transform: none; } }
.om-greet-dot {
  display: inline-block; opacity: 0; color: #2563eb;
  animation: omDotPop .5s cubic-bezier(.34,1.56,.64,1) 1.35s forwards;
}
@keyframes omDotPop {
  from { opacity: 0; transform: scale(0) rotate(-30deg); }
  to   { opacity: 1; transform: none; }
}
.om-greet {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600;
  font-size: clamp(38px, 6vw, 62px); line-height: .98; letter-spacing: -.02em; margin: 0; color: var(--om-ink);
}
.om-greet-name {
  background: linear-gradient(100deg, #1e3a5f 0%, #2563eb 30%, #7c3aed 52%, #0ea5e9 72%, #2563eb 88%, #1e3a5f 100%);
  background-size: 280% 100%; background-position: 0% 0;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  animation: omNameSheen 2.2s cubic-bezier(.3,.6,.2,1) .9s both;
}
@keyframes omNameSheen {
  from { background-position: 100% 0; }
  to   { background-position: 0% 0; }
}
.om-tagline {
  margin: 14px 0 0; font-size: 15px; color: var(--om-muted); max-width: none;
  opacity: 0; animation: omTagIn .9s ease 1.1s forwards;
}
@keyframes omTagIn {
  from { opacity: 0; filter: blur(8px); transform: translateY(8px); }
  to   { opacity: 1; filter: none; transform: none; }
}

.om-layout { display: grid; grid-template-columns: 1fr 348px; gap: 26px; margin-top: 30px; align-items: start; }
@media (max-width: 900px) { .om-layout { grid-template-columns: 1fr; } }
.om-sec-head { display: flex; align-items: baseline; justify-content: space-between; margin: 0 4px 14px; }
.om-sec-title { font-size: 15px; font-weight: 700; letter-spacing: -.01em; margin: 0; }
.om-sec-meta { font-size: 12px; font-weight: 600; color: var(--om-muted); }

.om-app-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 14px; }
@media (max-width: 560px) { .om-app-grid { grid-template-columns: 1fr; } }
.om-app {
  display: flex; align-items: center; gap: 14px; padding: 16px; text-decoration: none;
  background: var(--om-surface); border: 1px solid var(--om-line); border-radius: 16px;
  color: var(--om-ink); position: relative; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04);
  opacity: 0; transform: translateY(14px);
  animation: omRise .6s cubic-bezier(.2,.7,.2,1) forwards;
  animation-delay: calc(var(--i, 0) * 65ms + 140ms);
  transition: transform .18s ease, box-shadow .22s ease, border-color .18s ease;
}
.om-app::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 3px; background: var(--ac);
  opacity: 0; transition: opacity .2s ease;
}
.om-app--open:hover, .om-app--soon:hover {
  transform: translateY(-3px); border-color: color-mix(in srgb, var(--ac) 55%, var(--om-line));
  box-shadow: 0 16px 34px -16px color-mix(in srgb, var(--ac) 60%, transparent);
}
.om-app--open:hover::before, .om-app--soon:hover::before { opacity: 1; }
.om-app-icon {
  flex-shrink: 0; width: 44px; height: 44px; border-radius: 13px;
  display: inline-flex; align-items: center; justify-content: center;
  background: color-mix(in srgb, var(--ac) 14%, #fff); color: var(--ac);
}
.om-app-info { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.om-app-name { font-size: 14.5px; font-weight: 650; display: flex; align-items: center; gap: 7px; }
.om-app-desc { font-size: 12.5px; color: var(--om-muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.om-app-tag {
  font-size: 9px; font-weight: 800; text-transform: uppercase; letter-spacing: .05em;
  padding: 1px 6px; border-radius: 999px; background: #fef3c7; color: #92400e;
}
.om-app-tag--locked { background: #eef1f6; color: #64748b; }
.om-app-arrow { flex-shrink: 0; color: #cbd5e1; transition: transform .2s ease, color .2s ease; }
.om-app--open:hover .om-app-arrow, .om-app--soon:hover .om-app-arrow, .om-app--request:hover .om-app-arrow { color: var(--ac); transform: translateX(3px); }
/* Not locked and not open: a tile you may click, which leads to asking. Muted
   icon so it doesn't read as ready, but full opacity so it doesn't read as off. */
.om-app--request .om-app-icon { background: #f1f5f9; color: #94a3b8; }
.om-app--locked { opacity: .62; cursor: default; }
.om-app--locked .om-app-icon { background: #f1f5f9; color: #94a3b8; }

.om-side { display: flex; flex-direction: column; gap: 18px; }
.om-panel {
  background: var(--om-surface); border: 1px solid var(--om-line); border-radius: 18px;
  padding: 18px; box-shadow: 0 1px 2px rgba(15,23,42,.04);
}
.om-panel-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 14px; }
.om-panel-title { font-size: 14px; font-weight: 700; margin: 0; letter-spacing: -.01em; }
.om-pill { font-size: 11px; font-weight: 700; color: #2563eb; background: #eff6ff; padding: 2px 9px; border-radius: 999px; }

.om-todo-add { display: flex; gap: 8px; margin-bottom: 12px; }
.om-todo-input {
  flex: 1; min-width: 0; padding: 9px 13px; border: 1px solid var(--om-line); border-radius: 11px;
  font-size: 13.5px; background: #fff; outline: none; color: var(--om-ink); transition: border-color .15s, box-shadow .15s;
}
.om-todo-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #eff6ff; }
.om-todo-input::placeholder { color: #9aa6b8; }
.om-todo-btn {
  flex-shrink: 0; width: 38px; border: none; border-radius: 11px; cursor: pointer;
  background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: filter .15s, transform .1s;
}
.om-todo-btn:hover { filter: brightness(1.08); }
.om-todo-btn:active { transform: scale(.94); }
.om-todo-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.om-todo {
  display: flex; align-items: center; gap: 11px; padding: 9px 4px; border-top: 1px solid #f1f3f8;
  animation: omRise .35s ease forwards;
}
.om-todo:first-child { border-top: none; }
.om-check {
  flex-shrink: 0; width: 20px; height: 20px; border-radius: 7px; border: 2px solid #cdd5e2;
  background: #fff; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  color: #fff; transition: background .15s, border-color .15s, transform .1s;
}
.om-check:hover { border-color: #2563eb; }
.om-check:active { transform: scale(.9); }
.om-check svg { opacity: 0; transition: opacity .12s; }
.om-todo-text { flex: 1; font-size: 13.5px; color: var(--om-ink); transition: color .15s; word-break: break-word; }
.om-todo.is-done .om-check { background: #16a34a; border-color: #16a34a; }
.om-todo.is-done .om-check svg { opacity: 1; }
.om-todo.is-done .om-todo-text { color: #9aa6b8; text-decoration: line-through; }
.om-todo-del {
  flex-shrink: 0; width: 24px; height: 24px; border: none; background: transparent; cursor: pointer;
  color: #c2cad7; border-radius: 7px; display: inline-flex; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .15s, color .15s, background .15s;
}
.om-todo:hover .om-todo-del { opacity: 1; }
.om-todo-del:hover { color: #ef4444; background: #fef2f2; }
.om-todo-empty { padding: 18px 4px; text-align: center; font-size: 13px; color: #9aa6b8; }
/* "See all N →" — shown only when the 5-item cap is hiding to-dos. */
.om-todo-more { display: block; margin-top: 10px; padding: 6px 4px 0; border-top: 1px solid #f1f3f8;
  font-size: 12px; font-weight: 700; color: #2563eb; text-decoration: none; }
.om-todo-more:hover { text-decoration: underline; }

.om-notif-empty { text-align: center; padding: 16px 8px 10px; }
.om-notif-glyph {
  width: 46px; height: 46px; border-radius: 14px; margin: 0 auto 12px;
  display: inline-flex; align-items: center; justify-content: center; background: #eff6ff; color: #2563eb;
}
.om-notif-empty p { margin: 0; font-size: 13.5px; font-weight: 600; color: var(--om-ink); }
.om-notif-empty span { display: block; margin-top: 4px; font-size: 12px; color: var(--om-muted); }

/* ---- /home notifications list ------------------------------------------ */
.om-notif-readall { background: none; border: none; cursor: pointer; font-size: 11.5px; font-weight: 700; color: var(--om-accent, #2563eb); padding: 0; }
.om-notif-readall:hover { text-decoration: underline; }
.om-notif-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.om-notif {
  --om-accent: #2563eb;
  position: relative; display: flex; align-items: stretch; gap: 2px;
  border-radius: 12px; transition: background .12s;
}
.om-notif + .om-notif { border-top: 1px solid var(--om-line); }
.om-notif:hover { background: var(--om-bg, #f8fafc); }
.om-notif-main {
  flex: 1; min-width: 0; display: flex; align-items: flex-start; gap: 10px;
  padding: 11px 6px 11px 10px; background: none; border: none; text-align: left; cursor: pointer;
}
.om-notif-dot { width: 8px; height: 8px; border-radius: 50%; margin-top: 5px; flex-shrink: 0; background: var(--om-accent); box-shadow: 0 0 8px color-mix(in srgb, var(--om-accent) 60%, transparent); }
.om-notif-dot.is-read { background: transparent; box-shadow: none; }
.om-notif-content { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.om-notif-title { font-size: 13px; font-weight: 600; color: var(--om-ink); line-height: 1.35; }
.om-notif.is-unread .om-notif-title { font-weight: 700; }
.om-notif-body { font-size: 12px; color: var(--om-muted); line-height: 1.4; }
.om-notif-foot { font-size: 10.5px; font-weight: 700; letter-spacing: .01em; color: color-mix(in srgb, var(--om-accent) 55%, #94a3b8); text-transform: uppercase; margin-top: 2px; }
.om-notif-x {
  flex-shrink: 0; align-self: center; width: 26px; height: 26px; margin-right: 4px; border-radius: 8px;
  display: inline-flex; align-items: center; justify-content: center;
  background: none; border: none; color: #cbd5e1; cursor: pointer; opacity: 0;
  transition: opacity .12s, background .12s, color .12s;
}
.om-notif:hover .om-notif-x { opacity: 1; }
.om-notif-x:hover { background: #fee2e2; color: #dc2626; }

/* ===== Siren severity (alert-kind notifications) ===== */
.om-notif.om-sev-warning { box-shadow: inset 3px 0 0 #d97706; }
.om-notif.om-sev-critical { box-shadow: inset 3px 0 0 #ef4444; }
.om-notif-dot.om-sev-warning { background: #d97706; box-shadow: 0 0 8px rgba(217, 119, 6, .55); }
.om-notif-dot.om-sev-critical { background: #ef4444; box-shadow: 0 0 8px rgba(239, 68, 68, .6); }
.om-notif-dot.is-read.om-sev-warning, .om-notif-dot.is-read.om-sev-critical { opacity: .4; box-shadow: none; }
.om-sev-badge {
  display: inline-block; font-size: 9.5px; font-weight: 800; letter-spacing: .03em;
  padding: 1px 6px; border-radius: 999px; margin-right: 6px; text-transform: uppercase; color: #fff;
}
.om-sev-badge.om-sev-info { background: #2563eb; }
.om-sev-badge.om-sev-warning { background: #d97706; }
.om-sev-badge.om-sev-critical { background: #ef4444; }

/* ===== Unified inbox (/inbox) ===== */
.om-inbox { min-height: 100vh; background: var(--om-bg, #f8fafc); }
.om-inbox-wrap { max-width: 760px; margin: 0 auto; padding: 32px 24px 72px; }
.om-inbox-head { margin-bottom: 18px; }
.om-inbox-title { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 24px; font-weight: 800; color: var(--om-ink, #0f172a); letter-spacing: -.01em; }
.om-inbox-sub { margin: 4px 0 0; font-size: 13.5px; color: var(--om-muted, #64748b); }
.om-inbox-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--om-line, #e2e8f0); margin-bottom: 8px; flex-wrap: wrap; }
.om-inbox-tab {
  display: inline-flex; align-items: center; gap: 7px; padding: 9px 12px; font-size: 13px; font-weight: 600;
  color: var(--om-muted, #64748b); background: none; border: 0; border-bottom: 2px solid transparent;
  cursor: pointer; margin-bottom: -1px; transition: color .12s, border-color .12s;
}
.om-inbox-tab:hover { color: var(--om-ink, #0f172a); }
.om-inbox-tab.is-on { color: #2563eb; border-bottom-color: #2563eb; }
.om-inbox-count { font-size: 11px; font-weight: 700; min-width: 18px; text-align: center; padding: 1px 6px; border-radius: 999px; background: #eef2ff; color: #4338ca; }
.om-inbox-tab.is-on .om-inbox-count { background: #2563eb; color: #fff; }
.om-inbox-actions { display: flex; justify-content: flex-end; padding: 8px 4px 0; }
.om-inbox-list { margin-top: 4px; }
.om-inbox-empty { text-align: center; padding: 48px 16px; color: var(--om-muted, #64748b); }
.om-inbox-empty p { margin: 10px 0 2px; font-size: 14.5px; font-weight: 700; color: var(--om-ink, #0f172a); }
.om-inbox-empty span { font-size: 12.5px; }
/* Cross-board work rows (Assigned / Due soon). */
.om-inbox-work { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; }
.om-work-row + .om-work-row { border-top: 1px solid var(--om-line, #eef2f6); }
.om-work-link { display: flex; align-items: center; gap: 12px; padding: 12px 8px; text-decoration: none; border-radius: 10px; transition: background .12s; }
.om-work-link:hover { background: #fff; }
.om-work-due { flex: 0 0 auto; min-width: 62px; text-align: center; font-size: 11px; font-weight: 700; padding: 4px 8px; border-radius: 8px; background: #f1f5f9; color: #64748b; }
.om-work-due.is-overdue { background: #fef2f2; color: #b91c1c; }
.om-work-due.is-soon { background: #fffbeb; color: #b45309; }
.om-work-due.is-later { background: #eff6ff; color: #1d4ed8; }
.om-work-due.is-none { background: #f1f5f9; color: #94a3b8; }
.om-work-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.om-work-titletext { font-size: 13.5px; font-weight: 600; color: var(--om-ink, #0f172a); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-work-meta { font-size: 12px; color: var(--om-muted, #64748b); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.om-work-go { flex: 0 0 auto; color: #cbd5e1; }
.om-work-link:hover .om-work-go { color: #2563eb; }

/* Siren — calm feed: day-grouped cards with per-app identity */
.om-feed-wrap { margin-top: 10px; display: flex; flex-direction: column; gap: 20px; }
.om-feed-group { display: flex; flex-direction: column; gap: 8px; }
.om-feed-day { margin: 0 2px 2px; font-size: 11px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; color: var(--om-muted, #94a3b8); }
.om-feed { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.om-card { position: relative; background: #fff; border: 1px solid var(--om-line, #e2e8f0); border-radius: 12px; transition: box-shadow .14s, border-color .14s; }
.om-card:hover { border-color: color-mix(in srgb, var(--om-accent) 45%, var(--om-line, #e2e8f0)); box-shadow: 0 4px 14px rgba(15,23,42,.07); }
.om-card.is-unread { border-color: color-mix(in srgb, var(--om-accent) 30%, var(--om-line, #e2e8f0)); background: color-mix(in srgb, var(--om-accent) 4%, #fff); }
.om-card.om-sev-warning { box-shadow: inset 4px 0 0 #d97706; }
.om-card.om-sev-critical { box-shadow: inset 4px 0 0 #ef4444; }
.om-card.om-sev-warning:hover { box-shadow: inset 4px 0 0 #d97706, 0 4px 14px rgba(15,23,42,.08); }
.om-card.om-sev-critical:hover { box-shadow: inset 4px 0 0 #ef4444, 0 4px 14px rgba(15,23,42,.08); }
.om-card-hit { display: flex; align-items: flex-start; gap: 12px; width: 100%; padding: 13px 42px 13px 14px; background: none; border: 0; cursor: pointer; text-align: left; }
.om-card-icon { flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; display: grid; place-items: center; color: var(--om-accent); background: color-mix(in srgb, var(--om-accent) 12%, #fff); }
.om-card-body { display: flex; flex-direction: column; gap: 3px; min-width: 0; flex: 1; }
.om-card-meta { display: flex; align-items: center; gap: 8px; font-size: 11px; }
.om-card-app { font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: var(--om-accent); }
.om-card-time { margin-left: auto; color: var(--om-muted, #94a3b8); font-weight: 500; }
.om-card-sev { font-size: 10px; font-weight: 800; letter-spacing: .04em; text-transform: uppercase; color: #fff; padding: 1px 7px; border-radius: 999px; background: #64748b; }
.om-card-sev.om-sev-info { background: #2563eb; }
.om-card-sev.om-sev-warning { background: #d97706; }
.om-card-sev.om-sev-critical { background: #ef4444; }
.om-card-title { font-size: 13.5px; font-weight: 600; color: var(--om-ink, #0f172a); line-height: 1.35; }
.om-card.is-unread .om-card-title { font-weight: 700; }
.om-card-text { font-size: 12.5px; color: var(--om-muted, #64748b); line-height: 1.45; }
.om-card-x { position: absolute; top: 9px; right: 9px; display: grid; place-items: center; width: 26px; height: 26px; border: 0; border-radius: 7px; background: none; color: #cbd5e1; cursor: pointer; opacity: 0; transition: opacity .12s, background .12s, color .12s; }
.om-card:hover .om-card-x { opacity: 1; }
.om-card-x:hover { background: #fee2e2; color: #dc2626; }

@media (prefers-reduced-motion: reduce) {
  .om-rise, .om-app, .om-home-aurora, .om-login-aurora, .om-todo,
  .om-eyebrow-date, .om-greet-word, .om-greet-dot, .om-greet-name, .om-tagline {
    animation: none !important; opacity: 1 !important; transform: none !important;
  }
}

/* ===== Ask OneMark — the global assistant widget ===== */
.om-asst {
  position: fixed; right: 22px; bottom: 22px; z-index: 1000;
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
}
.om-asst-fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff;
  display: flex; align-items: center; justify-content: center; position: relative;
  box-shadow: 0 8px 24px -6px rgba(30,58,95,.5), 0 2px 6px rgba(0,0,0,.12);
  transition: transform .15s ease, box-shadow .2s ease;
}
.om-asst-fab:hover { transform: translateY(-2px); box-shadow: 0 12px 30px -6px rgba(30,58,95,.55); }
.om-asst-fab:active { transform: scale(.95); }
/* Pulse a few times after load, then rest: an infinite pulse on an element
   that is on EVERY page cost ~59 style recalculations a second in every idle
   tab (measured 2026-09-17), which is fan noise and battery all day for a
   button nobody is looking at. */
.om-asst-fab-spark { animation: omAsstPulse 3s ease-in-out 4; }
@keyframes omAsstPulse { 0%,100% { transform: scale(1); opacity: 1; } 50% { transform: scale(1.12); opacity: .85; } }
.om-asst-fab-close { display: none; }
.om-asst.is-open .om-asst-fab-spark { display: none; }
.om-asst.is-open .om-asst-fab-close { display: block; }

.om-asst-panel {
  position: absolute; right: 0; bottom: 70px; width: 380px; max-width: calc(100vw - 32px);
  height: 540px; max-height: calc(100vh - 120px);
  background: #fff; border: 1px solid #e7eaf1; border-radius: 18px;
  box-shadow: 0 24px 60px -18px rgba(15,23,42,.4), 0 4px 12px rgba(15,23,42,.08);
  display: flex; flex-direction: column; overflow: hidden;
  transform-origin: bottom right; animation: omAsstPanelIn .18s ease forwards;
}
@keyframes omAsstPanelIn {
  from { opacity: 0; transform: translateY(12px) scale(.98); }
  to { opacity: 1; transform: translateY(0) scale(1); }
}

.om-asst-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px; border-bottom: 1px solid #f1f3f8;
  background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff;
}
.om-asst-brand { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 700; letter-spacing: -.01em; }
.om-asst-logo { width: 24px; height: 24px; display: block; border-radius: 7px; }
.om-asst-actions { display: inline-flex; align-items: center; gap: 6px; }
.om-asst-act {
  border: none; background: rgba(255,255,255,.14); color: #fff; cursor: pointer;
  width: 28px; height: 28px; border-radius: 8px; display: inline-flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.om-asst-act:hover { background: rgba(255,255,255,.26); }
/* Obvious, labelled "new chat" affordance (was an unlabelled + icon). */
.om-asst-newchat {
  border: none; background: rgba(255,255,255,.16); color: #fff; cursor: pointer;
  height: 28px; padding: 0 11px; border-radius: 999px;
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 12.5px; font-weight: 650; letter-spacing: -.01em;
  transition: background .12s;
}
.om-asst-newchat:hover { background: rgba(255,255,255,.30); }
.om-asst-newchat svg { opacity: .9; }
/* One-click reset shown under a failure message (service error / too long). */
.om-asst-reset-cta {
  margin-top: 8px; display: inline-flex; align-items: center; gap: 5px;
  border: 1px solid #c7d2e3; background: #fff; color: #1d4ed8; cursor: pointer;
  font-size: 12.5px; font-weight: 650; padding: 5px 10px; border-radius: 8px;
  transition: background .12s, border-color .12s;
}
.om-asst-reset-cta:hover { background: #eff4ff; border-color: #93b4f0; }

.om-asst-body { flex: 1; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 14px; }
.om-asst-greeting { text-align: center; margin: auto 0; padding: 12px; }
.om-asst-greeting p { margin: 0; font-size: 14px; font-weight: 600; color: #0f172a; }
.om-asst-greeting span { display: block; margin-top: 6px; font-size: 12.5px; color: #64748b; line-height: 1.5; }

/* one message = a sender label + a bubble */
.om-asst-row { display: flex; flex-direction: column; gap: 3px; max-width: 88%; }
.om-asst-row--user { align-self: flex-end; align-items: flex-end; }
.om-asst-row--assistant { align-self: flex-start; align-items: flex-start; }
.om-asst-who { font-size: 10.5px; font-weight: 700; color: #94a3b8; padding: 0 5px; }

.om-asst-msg {
  padding: 9px 13px; border-radius: 14px; font-size: 13.5px; line-height: 1.5; word-break: break-word;
  animation: omRise .25s ease forwards;
}
.om-asst-msg--user { background: #2563eb; color: #fff; border-bottom-right-radius: 5px; white-space: normal; }
.om-asst-msg--assistant { background: #f1f4f9; color: #0f172a; border-bottom-left-radius: 5px; }
/* Links in assistant replies (board/form URLs etc.) — clearly clickable. */
.om-asst-msg--assistant a { color: #2563eb; text-decoration: underline; font-weight: 600; word-break: break-all; }
.om-asst-msg--assistant a:hover { color: #1d4ed8; }
.om-asst-thumb { display: block; max-width: 180px; max-height: 160px; border-radius: 8px; margin: 0 0 6px; border: 1px solid rgba(255,255,255,.4); }

/* markdown inside assistant replies */
.om-asst-msg--assistant p { margin: 0 0 8px; }
.om-asst-msg--assistant p:last-child { margin-bottom: 0; }
.om-asst-msg--assistant ul, .om-asst-msg--assistant ol { margin: 4px 0 8px; padding-left: 18px; }
.om-asst-msg--assistant li { margin: 2px 0; }
.om-asst-msg--assistant li:last-child { margin-bottom: 0; }
.om-asst-msg--assistant strong { font-weight: 700; }
.om-asst-msg--assistant em { font-style: italic; }
.om-asst-msg--assistant code { background: rgba(15,23,42,.07); padding: 1px 5px; border-radius: 5px; font-size: 12.5px; }
.om-asst-msg--assistant a { color: #2563eb; text-decoration: underline; }
.om-asst-msg--assistant h4 { font-size: 13.5px; font-weight: 700; margin: 6px 0 4px; }
/* Tables: scroll horizontally inside the narrow chat bubble rather than overflow. */
.om-asst-msg--assistant table {
  display: block; overflow-x: auto; border-collapse: collapse; margin: 6px 0 8px; font-size: 12px;
}
.om-asst-msg--assistant th, .om-asst-msg--assistant td {
  border: 1px solid #d8dee8; padding: 4px 8px; text-align: left; vertical-align: top; white-space: nowrap;
}
.om-asst-msg--assistant th { background: #e7ecf3; font-weight: 700; }

.om-asst-typing { align-self: flex-start; display: flex; gap: 4px; padding: 10px 13px; background: #f1f4f9; border-radius: 14px; }
.om-asst-typing span { width: 6px; height: 6px; border-radius: 50%; background: #94a3b8; animation: omAsstDot 1.2s infinite ease-in-out; }
.om-asst-typing span:nth-child(2) { animation-delay: .2s; }
.om-asst-typing span:nth-child(3) { animation-delay: .4s; }
@keyframes omAsstDot { 0%,60%,100% { transform: translateY(0); opacity: .4; } 30% { transform: translateY(-4px); opacity: 1; } }

.om-asst-clip { display: inline-flex; align-items: center; justify-content: center; width: 34px; height: 34px; border-radius: 8px; cursor: pointer; font-size: 16px; color: #64748b; flex: 0 0 auto; }
.om-asst-clip:hover { background: #f1f5f9; color: var(--om-accent, #0891b2); }
.om-asst-clip.is-attached { color: var(--om-accent, #0891b2); }
.om-asst-clip-input { position: absolute; width: 1px; height: 1px; opacity: 0; overflow: hidden; }
.om-asst-compose { display: flex; align-items: center; gap: 8px; padding: 12px; border-top: 1px solid #f1f3f8; }
.om-asst-input {
  flex: 1; min-width: 0; padding: 10px 14px; border: 1px solid #e7eaf1; border-radius: 12px;
  font-size: 13.5px; outline: none; color: #0f172a; transition: border-color .15s, box-shadow .15s;
}
.om-asst-input:focus { border-color: #2563eb; box-shadow: 0 0 0 3px #eff6ff; }
.om-asst-input:disabled { background: #f8fafc; }
.om-asst-send {
  flex-shrink: 0; width: 40px; height: 40px; border: none; border-radius: 12px; cursor: pointer;
  background: linear-gradient(135deg, #1e3a5f, #2563eb); color: #fff;
  display: inline-flex; align-items: center; justify-content: center; transition: filter .15s, transform .1s;
}
.om-asst-send:hover { filter: brightness(1.08); }
.om-asst-send:disabled { opacity: .5; cursor: default; }
/* Voice dictation mic (revealed by the VoiceDictation hook where supported). */
.om-asst-mic {
  flex-shrink: 0; width: 38px; height: 38px; border: none; border-radius: 12px; cursor: pointer;
  background: #f1f5f9; color: #475569; display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s, color .15s, box-shadow .15s;
}
.om-asst-mic:hover { background: #e2e8f0; color: #0f172a; }
.om-asst-mic:disabled { opacity: .5; cursor: default; }
.om-asst-compose.is-recording .om-asst-mic,
.om-asst-mic[aria-pressed="true"] {
  background: #ef4444; color: #fff; animation: om-mic-pulse 1.4s ease-in-out infinite;
}
@keyframes om-mic-pulse {
  0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, .5); }
  50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

@media (max-width: 480px) {
  .om-asst-panel { width: calc(100vw - 24px); right: -6px; }
}
@media (prefers-reduced-motion: reduce) {
  .om-asst-fab-spark, .om-asst-typing span, .om-asst-msg { animation: none !important; }
}

/* ---- /home org-activity pulse (admin-only, live) ------------------------ */
.om-pulse {
  position: relative; overflow: hidden; margin-top: 26px;
  border-radius: 22px; padding: 20px 22px 14px;
  background: radial-gradient(135% 150% at 0% 0%, #1e293b 0%, #0f172a 58%, #0b1120 100%);
  border: 1px solid rgba(148,163,184,.16);
  box-shadow: 0 30px 64px -34px rgba(2,6,23,.75);
}
.om-pulse::before {
  content: ""; position: absolute; top: -50%; left: -12%; width: 46%; height: 180%;
  background: radial-gradient(closest-side, rgba(99,102,241,.18), transparent);
  pointer-events: none; animation: omPulseDrift 9s ease-in-out infinite alternate;
}
@keyframes omPulseDrift { from { transform: translateX(0); } to { transform: translateX(240%); } }

.om-pulse-head { position: relative; display: flex; align-items: center; justify-content: space-between; margin: 0 2px 14px; }
.om-pulse-title-wrap { display: flex; align-items: center; gap: 10px; }
.om-pulse-title {
  font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 19px;
  letter-spacing: -.01em; color: #fff; margin: 0;
}
.om-pulse-meta { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; font-weight: 600; color: #cbd5e1; }
.om-online-dot { width: 7px; height: 7px; border-radius: 50%; background: #34d399; box-shadow: 0 0 8px #34d399; }
.om-pulse-live {
  width: 9px; height: 9px; border-radius: 50%; background: #34d399;
  box-shadow: 0 0 0 0 rgba(52,211,153,.6); animation: omLive 1.8s ease-out infinite;
}
@keyframes omLive {
  0% { box-shadow: 0 0 0 0 rgba(52,211,153,.55); }
  70% { box-shadow: 0 0 0 9px rgba(52,211,153,0); }
  100% { box-shadow: 0 0 0 0 rgba(52,211,153,0); }
}

.om-pulse-list { position: relative; max-height: 360px; overflow: auto; padding-right: 4px; }
.om-activity {
  --om-accent: #6366f1;
  position: relative; display: grid; grid-template-columns: 3px 38px 1fr; gap: 12px;
  align-items: center; padding: 11px 12px; margin-bottom: 8px; border-radius: 14px;
  background: rgba(255,255,255,.035); border: 1px solid rgba(148,163,184,.12);
  text-decoration: none; color: inherit; cursor: pointer;
  transition: background .18s ease, border-color .18s ease, transform .18s ease;
  animation: omActivityIn .6s cubic-bezier(.18,.8,.2,1) both;
}
.om-activity:hover {
  background: rgba(255,255,255,.07);
  border-color: color-mix(in srgb, var(--om-accent) 45%, rgba(148,163,184,.2));
  transform: translateX(2px);
}
.om-activity-go { margin-left: auto; color: color-mix(in srgb, var(--om-accent) 55%, #64748b); opacity: 0; transform: translateX(-4px); transition: opacity .18s ease, transform .18s ease; font-weight: 700; }
.om-activity:hover .om-activity-go { opacity: 1; transform: none; }
.om-activity::after {
  content: ""; position: absolute; inset: 0; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 1px color-mix(in srgb, var(--om-accent) 65%, transparent),
              0 0 28px -6px var(--om-accent);
  opacity: 0; animation: omActivityGlow 1.7s ease-out both;
}
@keyframes omActivityIn {
  0% { opacity: 0; transform: translateY(-12px) scale(.985); }
  60% { opacity: 1; }
  100% { opacity: 1; transform: none; }
}
@keyframes omActivityGlow { 0% { opacity: .85; } 100% { opacity: 0; } }
.om-activity-rail { width: 3px; height: 100%; min-height: 30px; border-radius: 3px; background: var(--om-accent); box-shadow: 0 0 12px var(--om-accent); }
.om-activity-body { min-width: 0; }
.om-activity-line { margin: 0; font-size: 13.5px; line-height: 1.35; color: #e2e8f0; }
.om-activity-actor { font-weight: 700; color: #fff; }
.om-activity-verb { color: #cbd5e1; }
.om-activity-subject { font-weight: 600; color: color-mix(in srgb, var(--om-accent) 50%, #fff); }
.om-activity-foot { margin-top: 3px; display: flex; align-items: center; gap: 7px; font-size: 11px; color: #94a3b8; }
.om-activity-app { font-size: 10px; font-weight: 700; letter-spacing: .03em; text-transform: uppercase; color: color-mix(in srgb, var(--om-accent) 55%, #cbd5e1); }
.om-activity-dot { color: #475569; }

.om-pulse-empty { display: none; align-items: center; gap: 10px; padding: 14px 12px 8px; color: #94a3b8; font-size: 13px; }
.om-pulse-list:empty { display: none; }
.om-pulse-list:empty + .om-pulse-empty { display: flex; }
.om-pulse-pulse { width: 8px; height: 8px; border-radius: 50%; background: #64748b; animation: omLive 2s infinite; }

@media (prefers-reduced-motion: reduce) {
  .om-activity, .om-activity::after, .om-pulse::before, .om-pulse-live, .om-pulse-pulse { animation: none !important; }
}

/* ---- pulse collapse / expand ------------------------------------------- */
.om-pulse-right { display: flex; align-items: center; gap: 12px; }
.om-pulse-toggle {
  display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
  background: rgba(255,255,255,.06); border: 1px solid rgba(148,163,184,.2);
  color: #cbd5e1; font-size: 11.5px; font-weight: 700; padding: 5px 11px; border-radius: 999px;
  transition: background .15s, color .15s, border-color .15s;
}
.om-pulse-toggle:hover { background: rgba(255,255,255,.13); color: #fff; border-color: rgba(148,163,184,.4); }
.om-pulse-chev { transition: transform .2s ease; }
.om-pulse-toggle[aria-expanded="true"] .om-pulse-chev { transform: rotate(180deg); }
/* Collapsed: show only the single most-recent item. */
.om-pulse-list:not(.is-expanded) .om-activity:nth-child(n+2) { display: none; }

/* ---- Ask OneMark, docked on /home (left column, under the apps) -------- */
/* The left column stacks apps over the chat as one grid cell, so the right
   column (to-dos) stays at the top instead of being pushed down. */
.om-main { display: flex; flex-direction: column; gap: 26px; min-width: 0; }
.om-asst-dock {
  position: relative; display: flex; flex-direction: column; height: 432px;
  background: #fff; border: 1px solid var(--om-line); border-radius: 20px; overflow: hidden;
  box-shadow: 0 22px 56px -34px rgba(15,23,42,.32);
}
.om-asst-dock::before {
  content: ""; position: absolute; inset: 0 0 auto 0; height: 3px; z-index: 1;
  background: linear-gradient(100deg, #1e3a5f, #2563eb 55%, #7c3aed);
}
.om-asst-dock-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 13px 18px; border-bottom: 1px solid var(--om-line);
}
/* The dock head is light (unlike the floating panel's dark gradient head), so
   restyle the brand + action button for contrast on white. */
.om-asst-dock-head .om-asst-brand { color: var(--om-ink); }
.om-asst-dock-head .om-asst-act {
  background: #eef2f7; color: #475569; border: 1px solid var(--om-line);
}
.om-asst-dock-head .om-asst-act:hover { background: #e2e8f0; color: #1e293b; }
/* The New chat button uses .om-asst-newchat (white-on-dark for the floating
   panel's gradient head); give it the same on-white contrast as .om-asst-act so
   it's legible in the light dock head instead of white-on-white. */
.om-asst-dock-head .om-asst-newchat {
  background: #eef2f7; color: #475569; border: 1px solid var(--om-line);
}
.om-asst-dock-head .om-asst-newchat:hover { background: #e2e8f0; color: #1e293b; }
.om-asst-dock-welcome { display: flex; flex-direction: column; align-items: center; text-align: center; margin: auto 0; padding: 8px 16px; gap: 5px; }
.om-asst-dock-mark { width: 48px; height: 48px; border-radius: 14px; margin-bottom: 4px; box-shadow: 0 10px 24px -10px rgba(37,99,235,.55); }
.om-asst-dock-hi { font-family: 'Fraunces', Georgia, serif; font-weight: 600; font-size: 22px; letter-spacing: -.01em; color: var(--om-ink); margin: 0; }
.om-asst-dock-sub { font-size: 13px; color: var(--om-muted); max-width: 360px; line-height: 1.5; }
.om-asst-suggest { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 14px; }
.om-asst-chip {
  border: 1px solid var(--om-line); background: #fff; color: #334155; border-radius: 999px;
  padding: 8px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: border-color .15s, color .15s, transform .12s, box-shadow .15s;
}
.om-asst-chip:hover { border-color: #2563eb; color: #2563eb; transform: translateY(-1px); box-shadow: 0 8px 18px -10px rgba(37,99,235,.5); }
.om-asst-chip:disabled { opacity: .5; cursor: default; }
.om-asst-compose--dock { padding: 14px 16px; }
@media (max-width: 900px) { .om-asst-dock { height: 70vh; max-height: 520px; } }

/* ============================================================
   OneMark Tasks — boards, kanban, item detail, settings
   ============================================================ */
.omt-page { min-height: 100vh; background:
    radial-gradient(1200px 480px at 80% -10%, color-mix(in srgb, var(--om-accent) 9%, transparent), transparent 60%),
    var(--om-bg); padding-bottom: 64px; }
/* Embedded board (nested in another app, e.g. the Case Staffing dashboard):
   flow with the host page instead of owning the viewport. */
.omt-page.omt-embedded { min-height: auto; background: transparent; padding-bottom: 16px; }
.omt-h1 { font-family: "Fraunces", Georgia, serif; font-size: 34px; font-weight: 600; color: #0f172a; margin: 4px 0 0; letter-spacing: -.01em; }

.omt-btn { display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 9px 16px;
  font-size: 13px; font-weight: 600; cursor: pointer; background: #fff; border: 1px solid var(--om-border); color: #475569; transition: transform .12s, box-shadow .15s, background .15s, border-color .15s, color .15s; }
.omt-btn:hover { border-color: var(--om-accent); color: var(--om-accent); }
.omt-btn-primary { background: var(--om-accent); border-color: var(--om-accent); color: #fff; }
.omt-btn-primary:hover { transform: translateY(-1px); color: #fff; box-shadow: 0 10px 22px -12px color-mix(in srgb, var(--om-accent) 80%, transparent); }
.omt-btn-ghost { background: #fff; border-color: var(--om-border); color: #475569; }
.omt-btn-ghost:hover { border-color: var(--om-accent); color: var(--om-accent); }
.omt-btn-danger { background: #fff; border-color: #fecaca; color: #b91c1c; }
.omt-btn-danger:hover { background: #fef2f2; border-color: #ef4444; color: #b91c1c; }
.omt-btn-sm { padding: 5px 12px; font-size: 12px; }
.omt-input, .omt-select, .omt-textarea { width: 100%; border: 1px solid var(--om-border); border-radius: 10px;
  padding: 10px 12px; font-size: 13.5px; color: #1e293b; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; font-family: inherit; }
.omt-input:focus, .omt-select:focus, .omt-textarea:focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 16%, transparent); }
.omt-select-sm { width: auto; padding: 6px 10px; }

/* Boards index */
.omt-boards { margin-top: 22px; }
.omt-newboard { display: flex; gap: 8px; margin: 12px 0 18px; }
.omt-newboard .omt-input { flex: 1; }
.omt-board-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 14px; margin-top: 14px; }
.omt-board-card { position: relative; display: flex; flex-direction: column; gap: 6px; padding: 18px 18px 16px;
  background: #fff; border: 1px solid var(--om-border); border-radius: 14px; text-decoration: none; overflow: hidden;
  box-shadow: 0 1px 2px rgba(15,23,42,.04); transition: transform .14s, box-shadow .18s, border-color .15s; }
.omt-board-card:hover { transform: translateY(-3px); box-shadow: 0 18px 36px -22px rgba(15,23,42,.4); border-color: color-mix(in srgb, var(--card-accent) 40%, var(--om-border)); }
/* Card + star live side by side in a wrap so the star isn't a button inside a
   link. The card keeps its full-tile click; the star floats over the corner. */
.omt-board-cardwrap { position: relative; display: flex; }
.omt-board-cardwrap > .omt-board-card { flex: 1; }
.omt-board-cardwrap .omt-board-badges { margin-right: 24px; }
.omt-board-star {
  position: absolute; top: 12px; right: 10px; z-index: 2;
  display: inline-flex; align-items: center; justify-content: center;
  width: 28px; height: 28px; border: 0; border-radius: 8px;
  background: transparent; color: #cbd5e1; cursor: pointer;
  opacity: 0; transition: opacity .12s, color .12s, transform .14s;
}
.omt-board-cardwrap:hover .omt-board-star,
.omt-board-star:focus-visible,
.omt-board-star.is-fav { opacity: 1; }
.omt-board-star:hover { color: #f59e0b; background: rgba(245,158,11,.08); }
.omt-board-star.is-fav { color: #f59e0b; }
/* keep the star riding the card's hover lift */
.omt-board-cardwrap:hover .omt-board-star { transform: translateY(-3px); }
.omt-board-rail { position: absolute; inset: 0 auto 0 0; width: 4px; background: var(--card-accent, var(--om-accent)); }
.omt-board-name { font-weight: 700; font-size: 15.5px; color: #0f172a; }
.omt-board-desc { font-size: 12.5px; color: var(--om-text-light); line-height: 1.4; }
.omt-board-foot { display: flex; align-items: center; justify-content: space-between; margin-top: 8px; }
.omt-board-count { font-size: 12px; font-weight: 600; color: var(--card-accent, var(--om-accent)); }
.omt-board-go { color: var(--om-text-muted); transition: transform .14s; }
.omt-board-card:hover .omt-board-go { transform: translateX(3px); }
.omt-board-empty { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 120px; border: 2px dashed var(--om-border); border-radius: 14px; background: transparent; color: var(--om-text-light);
  font-size: 13px; font-weight: 600; cursor: pointer; transition: border-color .15s, color .15s; }
.omt-board-empty:hover { border-color: var(--om-accent); color: var(--om-accent); }
.omt-board-welcome { max-width: 560px; margin: 8px auto; text-align: center; display: flex; flex-direction: column; gap: 10px; align-items: center; }
.omt-board-welcome-lead { font-size: 16px; color: #1e293b; margin: 0; line-height: 1.5; }
.omt-board-welcome-sub { font-size: 13.5px; color: #64748b; margin: 0; line-height: 1.55; }
.omt-board-welcome .omt-board-empty { width: 100%; }
.omt-board-welcome-tip { font-size: 12.5px; color: #94a3b8; margin: 4px 0 0; }

/* Board page */
.omt-board-page { padding-bottom: 0; }
/* Full-width board: use the whole viewport (minus gutters) before any view
   forces a horizontal scroll. The API docs page re-narrows via .omt-api-page. */
.omt-board-main { max-width: none; margin: 0; padding: 12px clamp(16px, 2.4vw, 36px) 0; }
/* Compact head: back link, title and description share ONE row so the grid
   starts as high as possible (the old stacked head cost ~92px). */
.omt-board-head { display: flex; align-items: center; justify-content: space-between; gap: 16px; flex-wrap: wrap; margin-bottom: 8px; }
.omt-board-head-left { display: flex; align-items: baseline; gap: 12px; min-width: 0; flex-wrap: nowrap; }
.omt-back { font-size: 12.5px; color: var(--om-text-light); text-decoration: none; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; max-width: 40ch; }
.omt-back:hover { color: var(--om-accent); }
.omt-board-title { font-family: "Fraunces", Georgia, serif; font-size: 20px; font-weight: 600; color: #0f172a; margin: 0; white-space: nowrap; min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.omt-board-sub { font-size: 12.5px; color: var(--om-text-light); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; max-width: min(60ch, 34vw); }
.omt-board-head-right { display: flex; align-items: center; gap: 10px; }
.omt-viewtoggle { display: inline-flex; background: #eef2f7; border-radius: 999px; padding: 3px; }
.omt-vt { border: 0; background: transparent; border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer; }
.omt-vt.is-on { background: #fff; color: var(--om-accent); box-shadow: 0 1px 3px rgba(15,23,42,.12); }

/* Kanban */
.omt-kanban { display: flex; gap: 16px; overflow-x: auto; padding-bottom: 28px; align-items: flex-start; }
/* min-width: 0 or one unbreakable card string (a pasted URL) inflates the
   whole column via min-content sizing — flex-basis alone can't hold it.
   (Front Desk rendered 1,332px-wide columns off one SharePoint link.) */
.omt-col { flex: 0 0 280px; min-width: 0; background: #f1f5f9; border-radius: 14px; padding: 12px; display: flex; flex-direction: column; gap: 10px; }
/* A card's empty assignee "—" is render-only (editable={false}) — pure noise
   repeated per card; the table's interactive empty state is untouched. */
.omt-card-foot .omt-assignees-empty { display: none; }
.omt-col-head { display: flex; align-items: center; gap: 8px; padding: 2px 4px; font-weight: 700; font-size: 13px; color: #334155; }
.omt-col-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--col, #64748b); }
.omt-col-name { flex: 1; }
.omt-col-count { font-size: 11.5px; color: var(--om-text-muted); background: #fff; border-radius: 999px; padding: 1px 8px; }
.omt-col-cards { display: flex; flex-direction: column; gap: 8px; min-height: 56px; border-radius: 10px; transition: background .15s, box-shadow .15s; }
.omt-col-cards.is-over { background: color-mix(in srgb, var(--om-accent) 8%, transparent); box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--om-accent) 35%, transparent); }
/* Status chips on sibling surfaces (subtask rows, live cells) share the
   grid pill's solid R10 treatment — style comes from status_pill_style/2. */
.omt-chip.omt-chip-status { background: var(--col, #94a3b8); border-color: transparent;
  color: var(--col-text, #fff); text-shadow: var(--col-shadow, 0 1px 1px rgba(15, 23, 42, .25)); }

/* Live insertion line shown between cards while dragging — the exact drop slot. */
.omt-drop-line { height: 0; border-top: 3px solid var(--om-accent, #0891b2); border-radius: 3px; margin: -1px 2px; pointer-events: none; box-shadow: 0 0 0 1px color-mix(in srgb, var(--om-accent) 30%, transparent); }
.omt-card { background: #fff; border: 1px solid var(--om-border); border-radius: 10px; padding: 11px 12px; cursor: grab;
  box-shadow: 0 1px 2px rgba(15,23,42,.05); transition: box-shadow .15s, transform .1s, border-color .15s; }
.omt-card:hover { border-color: color-mix(in srgb, var(--om-accent) 45%, var(--om-border)); box-shadow: 0 8px 18px -12px rgba(15,23,42,.45); }
.omt-card.is-dragging { opacity: .45; }
.omt-card-body { cursor: pointer; }
.omt-card-title { font-size: 13.5px; color: #1e293b; line-height: 1.35; margin: 0; overflow-wrap: anywhere; }
.omt-card-foot { display: flex; align-items: center; gap: 6px; justify-content: flex-start; margin-top: 9px; min-height: 18px; }
/* Compact non-drag "move to status" picker on each card (touch/low-tech friendly). */
.omt-card-move { margin-left: auto; }
.omt-card-move-select { font-size: 10.5px; color: #64748b; border: 1px solid var(--om-border); border-radius: 6px;
  padding: 2px 4px; max-width: 96px; background: #f8fafc; cursor: pointer; }
.omt-card-move-select:hover { border-color: var(--om-accent); color: var(--om-accent); }
.omt-card-due { font-size: 11px; font-weight: 600; color: #b45309; background: #fffbeb; border-radius: 6px; padding: 1px 7px; }

/* ── Assignee cluster: stacked avatar circles + hover names + click to edit ── */
.omt-assignees { display: inline-flex; align-items: center; position: relative; max-width: 100%; }
.omt-card-foot .omt-assignees { margin-left: auto; }
.omt-assignees.is-editable { cursor: pointer; }
.omt-assignees-avatars { display: inline-flex; align-items: center; }
.omt-assignees-avatars .om-av + .om-av { margin-left: -6px; }
.omt-assignees-empty { font-size: 11px; color: var(--om-text-muted); border: 1px dashed var(--om-border); border-radius: 999px; padding: 1px 8px; }
.omt-assignees.is-editable:hover .omt-assignees-empty { border-color: var(--om-accent); color: var(--om-accent); }
.omt-assignees-tip { display: none; position: absolute; bottom: calc(100% + 6px); left: 0; z-index: 60;
  background: #1e293b; color: #fff; border-radius: 7px; padding: 6px 9px; font-size: 12px; line-height: 1.5; white-space: nowrap;
  box-shadow: 0 6px 20px rgba(15, 23, 42, .28); pointer-events: none; }
.omt-assignees:hover .omt-assignees-tip { display: block; }
.omt-assignees-tip-row { white-space: nowrap; }

/* ── Assignee picker popup (search + toggle members) ── */
.omt-apick-overlay { position: fixed; inset: 0; z-index: 80; background: rgba(15, 23, 42, .35); display: flex; align-items: center; justify-content: center; padding: 16px; }
.omt-apick { width: 100%; max-width: 380px; max-height: 70vh; display: flex; flex-direction: column; background: #fff; border-radius: 12px; box-shadow: 0 20px 50px rgba(15, 23, 42, .35); overflow: hidden; }
.omt-apick-head { display: flex; align-items: center; justify-content: space-between; padding: 12px 14px; border-bottom: 1px solid var(--om-border); font-weight: 600; font-size: 13px; }
.omt-apick-x { border: 0; background: transparent; font-size: 20px; line-height: 1; color: #64748b; cursor: pointer; }
.omt-apick-x:hover { color: #0f172a; }
.omt-apick-search { margin: 10px 12px; padding: 8px 10px; border: 1px solid var(--om-border); border-radius: 8px; font-size: 13px; }
.omt-apick-search:focus { outline: none; border-color: var(--om-accent); }
.omt-apick-list { overflow-y: auto; padding: 0 8px 10px; }
.omt-apick-row { display: flex; align-items: center; gap: 9px; width: 100%; padding: 7px 8px; border: 0; background: transparent; border-radius: 8px; cursor: pointer; text-align: left; font-size: 13px; color: #0f172a; }
.omt-apick-row:hover { background: #f1f5f9; }
.omt-apick-row.is-on { background: color-mix(in srgb, var(--om-accent) 10%, #fff); }
.omt-apick-name { flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-apick-check { color: var(--om-accent); font-weight: 700; }
.omt-apick-empty { padding: 14px 10px; text-align: center; color: var(--om-text-muted); font-size: 12.5px; }
/* Dropdown (multi) picker: the people picker's box, scoped to one column's
   choices — narrower (choice labels are short) and closed by its own Done. */
.omt-choice-picker { max-width: 320px; }
.omt-choice-picker-foot { display: flex; justify-content: flex-end; padding: 8px 12px 12px; border-top: 1px solid var(--om-border); }
.omt-choice-picker-done { padding: 6px 14px; border: 1px solid var(--om-border); border-radius: 8px; background: #fff; font-size: 12.5px; font-weight: 600; color: #0f172a; cursor: pointer; }
.omt-choice-picker-done:hover { background: #f1f5f9; }
.omt-quickadd-input { width: 100%; border: 1px dashed transparent; background: transparent; border-radius: 8px; padding: 8px 10px; font-size: 12.5px; color: #475569; }
.omt-quickadd-input:focus { outline: none; border-color: var(--om-border); background: #fff; }
/* Group picker on the kanban quick-add — tight enough not to read as a field. */
.omt-quickadd-group {
  width: 100%; margin-top: 3px; border: 1px solid var(--om-border); border-radius: 7px;
  background: #fff; padding: 4px 7px; font-size: 11.5px; color: #64748b;
}

/* Board item-add row + shared status chip */
.omt-list-add { display: flex; gap: 8px; margin-bottom: 14px; max-width: 560px; }
.omt-list-add .omt-input { flex: 1; }
.omt-chip { display: inline-flex; align-items: center; font-size: 11.5px; font-weight: 600; color: #334155; border-radius: 999px; padding: 2px 10px; background: color-mix(in srgb, var(--col, #94a3b8) 16%, #fff); }

/* Slide-over panels (detail + settings) */
.omt-detail, .omt-settings { position: fixed; top: 52px; right: 0; bottom: 0; width: 380px; max-width: 92vw; background: #fff;
  border-left: 1px solid var(--om-border); box-shadow: -24px 0 60px -30px rgba(15,23,42,.5); z-index: 60; overflow-y: auto;
  padding: 16px 20px 28px; animation: omt-slide .2s ease; }
@keyframes omt-slide { from { transform: translateX(20px); opacity: .6; } to { transform: none; opacity: 1; } }

/* Board settings as a centered modal with a left-nav. */
.omt-settings-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 1140px; max-width: 96vw; height: 800px; max-height: 92vh; background: #fff; border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15,23,42,.5); z-index: 60; display: flex; flex-direction: column;
  overflow: hidden; animation: omt-pop .16s ease; }
@keyframes omt-pop { from { transform: translate(-50%, -48%) scale(.98); opacity: .6; } to { transform: translate(-50%, -50%) scale(1); opacity: 1; } }
.omt-settings-modal .omt-detail-head { padding: 16px 20px; border-bottom: 1px solid var(--om-line, #eef2f6); margin: 0; }
.omt-set-body { display: flex; flex: 1; min-height: 0; }
.omt-set-nav { flex: 0 0 180px; border-right: 1px solid var(--om-line, #eef2f6); padding: 12px 8px; overflow-y: auto;
  display: flex; flex-direction: column; gap: 2px; background: #fafbfc; }
.omt-set-navitem { text-align: left; border: 0; background: transparent; padding: 9px 12px; border-radius: 8px;
  font-size: 13.5px; color: #475569; cursor: pointer; font-weight: 500; }
.omt-set-navitem:hover { background: #eef2f7; color: #0f172a; }
.omt-set-navitem.is-on { background: var(--om-accent, #0891b2); color: #fff; }
/* Rail group headers (R20) — rendered only when the rail has >6 sections. */
.omt-set-navgroup { display: block; font-size: 10.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--om-text-muted); padding: 12px 12px 3px; }
.omt-set-navgroup:first-child { padding-top: 2px; }

/* (General-tab form styling lives with the other settings-form rules, after
   .omt-board-form / .omt-field — order matters for equal-specificity wins.) */
.omt-set-content { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; }
.omt-set-section { margin: 0; }
@media (max-width: 720px) {
  .omt-settings-modal { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
  .omt-set-body { flex-direction: column; }
  .omt-set-nav { flex-basis: auto; flex-direction: row; flex-wrap: wrap; border-right: 0; border-bottom: 1px solid var(--om-line, #eef2f6); }
  /* Group headers read as stray chips mid-row in the horizontal phone strip —
     break them onto their own full-width line instead. */
  .omt-set-navgroup { flex-basis: 100%; padding: 8px 4px 0; }
}

/* Item detail as a centered modal — fields on the left, activity/chat on the right. */
.omt-item-modal { position: fixed; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 980px; max-width: 95vw; height: 660px; max-height: 90vh; background: #fff; border-radius: 16px;
  box-shadow: 0 30px 80px -20px rgba(15,23,42,.5); z-index: 60; display: flex; flex-direction: column;
  overflow: hidden; animation: omt-pop .16s ease; }
/* Item panel fields: label-left rows (Monday-style) — half the height of
   stacked label-over-control, and the label column makes values scannable.
   Scoped: settings forms keep the stacked layout. */
.omt-item-modal .omt-field { flex-direction: row; align-items: center; gap: 12px; }
.omt-item-modal .omt-livedetail-field.omt-field { align-items: baseline; padding: 7px 0; }
.omt-item-modal .omt-field:has(textarea) { align-items: flex-start; }
.omt-item-modal .omt-field:has(textarea) > .omt-field-label { padding-top: 8px; }
.omt-item-modal .omt-field > .omt-field-label { flex: 0 0 150px; display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.omt-item-modal .omt-field > *:not(.omt-field-label):not(.omt-livedetail-k) { flex: 1 1 auto; min-width: 0; }
.omt-mp-field { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; min-height: 26px; }

/* One-click value copy — quiet until the row is pointed at (R6). */
.omt-field-copy { border: 0; background: transparent; color: #94a3b8; cursor: pointer; padding: 2px; border-radius: 5px; opacity: 0; transition: opacity .12s; flex: 0 0 auto; display: inline-flex; }
.omt-field:hover .omt-field-copy, .omt-field-copy:focus-visible { opacity: 1; }
.omt-field-copy:hover { color: var(--om-accent, #2563eb); background: #eef2f7; }
.omt-field-copy.is-copied { color: var(--om-success, #10b981); opacity: 1; }

/* Icon-only buttons in the detail head. The cluster floats over the title, so
   labels there cost content width (R44, below) — these carry their meaning in
   a tooltip + aria-label instead. Square, so two of them plus the ✕ read as one
   group rather than three differently-shaped things. */
.omt-iconbtn { padding: 5px; line-height: 0; border-radius: 8px; }
/* .omt-btn is display:flex, so the icon is a flex ITEM. A heroicon span is
   empty — its content is a mask-image — so its min-content width is 0, and with
   no text label left in the button to hold the line open it shrinks to nothing:
   full height, zero width, painting an invisible glyph. flex:0 0 auto plus an
   explicit box is what keeps it square. (The labelled buttons were being
   squeezed by the same rule, just less visibly — 14px instead of 16.) */
.omt-iconbtn > [class*="hero-"] { flex: 0 0 auto; display: block; width: 1rem; height: 1rem; }

/* Copy feedback. CopyValue flashes .is-copied rather than swapping textContent
   — textContent on a button containing an <svg> returns only the text, so
   assigning to it destroys the icon node and the restore never brings it back
   (see the hook's own comment, assets/js/hooks.js). Swapping WHICH icon shows
   gives a clearer signal than a colour flash, and works on a button with no
   label to swap. */
.omt-permalink .omt-permalink-done { display: none; }
.omt-permalink.is-copied .omt-permalink-idle { display: none; }
.omt-permalink.is-copied .omt-permalink-done { display: inline-block; }
.omt-permalink.is-copied { color: var(--om-success, #10b981); }
@media (hover: none), (pointer: coarse) { .omt-field-copy { opacity: .6; } }

/* The head is a FLOATING corner cluster, not a band: a full-height row whose
   only job was holding Watch + ✕ failed the chrome-must-pay-rent test (R44).
   The title is the modal's real header; ~55px returns to content. */
.omt-item-modal .omt-detail-head { position: absolute; top: 10px; right: 12px; z-index: 7;
  padding: 0; border: 0; margin: 0; justify-content: flex-end; gap: 8px; background: transparent; }
/* Clear the floating cluster: the rail's tab row (item panel) and the
   title (live-row card, no rail) shorten from the right. */
.omt-item-modal .omt-side-tabs { padding-right: 148px; }
/* The cluster must also END above the tab row's divider (~42px down): the
   default omt-btn height put Watch's bottom edge ACROSS the line (2026-08-12).
   sm scale matches the 12px tab labels it sits beside. */
.omt-item-modal .omt-detail-head .omt-watch { padding: 5px 12px; font-size: 12px; }
#omt-liverow-modal .omt-detail-title { padding-right: 160px; }
.omt-item-body { display: flex; flex: 1; min-height: 0; }
.omt-item-main { flex: 1; min-width: 0; overflow-y: auto; padding: 20px 24px; }
.omt-item-side { flex: 0 0 340px; max-width: 42%; border-left: 1px solid var(--om-line, #eef2f6);
  background: #fafbfc; display: flex; flex-direction: column; min-height: 0; padding: 14px 16px; }
.omt-side-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; margin: 0 0 10px; }
.omt-comment-feed { flex: 1; overflow-y: auto; min-height: 0; margin-bottom: 10px; }

/* Comments / Activity tab switcher in the item side column. */
.omt-side-tabs { display: flex; gap: 4px; margin-bottom: 10px; border-bottom: 1px solid var(--om-border); }
.omt-side-tab { padding: 6px 10px; font-size: 12px; font-weight: 600; color: var(--om-text-muted); background: none; border: 0; border-bottom: 2px solid transparent; cursor: pointer; margin-bottom: -1px; }
.omt-side-tab.is-on { color: var(--om-accent); border-bottom-color: var(--om-accent); }

/* Activity feed: one line per event, newest first. */
.omt-activity-feed { flex: 1; overflow-y: auto; min-height: 0; }
.omt-activity-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.omt-activity { display: flex; gap: 8px; align-items: flex-start; }
.omt-activity-ico { flex: 0 0 18px; text-align: center; font-size: 13px; line-height: 1.4; opacity: .8; }
.omt-activity-body { min-width: 0; }
.omt-activity-text { font-size: 12.5px; color: var(--om-text); line-height: 1.4; }
.omt-activity-when { font-size: 11px; color: var(--om-text-muted); }
.omt-activity-via { margin-left: 6px; font-size: 11px; font-weight: 600; color: var(--om-accent, #0891b2); background: #ecfeff; border-radius: 4px; padding: 0 5px; white-space: nowrap; }
.omt-activity-payload { margin: 4px 0 2px; }
.omt-activity-payload summary { font-size: 11px; color: var(--om-text-muted); cursor: pointer; user-select: none; }
.omt-activity-payload pre { margin: 4px 0 0; padding: 6px 8px; font-size: 11px; line-height: 1.45; background: var(--om-surface-2, #f8fafc); border: 1px solid var(--om-border, #e2e8f0); border-radius: 6px; overflow-x: auto; max-height: 260px; }

/* Connect columns: linked-item chips + the target-board picker. */
.omt-links { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.omt-link-chip { display: inline-flex; align-items: center; gap: 5px; background: #eff6ff; border: 1px solid #dbeafe; border-radius: 999px; padding: 2px 4px 2px 10px; font-size: 12.5px; }
.omt-link-chip-title { color: #1d4ed8; font-weight: 600; text-decoration: none; }
.omt-link-chip-title:hover { text-decoration: underline; }
.omt-link-locked, .omt-link-gone { color: var(--om-text-muted, #94a3b8); font-style: italic; }
.omt-link-x { border: 0; background: none; color: #94a3b8; cursor: pointer; font-size: 11px; line-height: 1; padding: 2px 4px; border-radius: 50%; }
.omt-link-x:hover { background: #fee2e2; color: #dc2626; }
.omt-link-add { border: 1px dashed #cbd5e1; background: #fff; color: #475569; border-radius: 999px; padding: 3px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.omt-link-add:hover { border-color: #2563eb; color: #2563eb; }
.omt-link-picker { margin-top: 8px; border: 1px solid var(--om-border, #e2e8f0); border-radius: 10px; padding: 8px; background: #f8fafc; }
.omt-link-picker .omt-input { width: 100%; box-sizing: border-box; }
.omt-link-results { list-style: none; margin: 6px 0; padding: 0; max-height: 200px; overflow-y: auto; display: flex; flex-direction: column; gap: 2px; }
.omt-link-result { width: 100%; text-align: left; border: 0; background: #fff; padding: 7px 10px; border-radius: 7px; font-size: 13px; color: #0f172a; cursor: pointer; }
.omt-link-result:hover { background: #2563eb; color: #fff; }
.omt-link-empty { font-size: 12.5px; color: var(--om-text-muted, #94a3b8); padding: 6px 10px; }
.omt-link-close { border: 0; background: none; color: #475569; font-size: 12.5px; font-weight: 600; cursor: pointer; padding: 2px; }
/* Mirror columns: read-only reflected value. */
.omt-mirror-val { display: flex; align-items: center; gap: 7px; padding: 9px 12px; border: 1px solid #e2e8f0; border-radius: 9px; background: #f8fafc; color: #475569; font-size: 13.5px; }
.omt-mirror-ico { color: #94a3b8; font-size: 13px; }
.omt-mirror-cell { color: #475569; }
/* Locked-form banner on the item detail panel + its unlock button. */
.omt-form-locked { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 10px; padding: 8px 12px; border-radius: 9px; background: #fff7ed; border: 1px solid #fed7aa; font-size: 12.5px; color: #9a3412; }
.omt-form-locked button { margin-left: auto; }
.omt-mention { color: var(--om-accent, #0891b2); font-weight: 600; background: #ecfeff; border-radius: 4px; padding: 0 2px; }
.omt-comment-add { position: relative; }
.omt-mention-menu { position: absolute; bottom: 100%; left: 0; margin-bottom: 4px; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px -8px rgba(15,23,42,.35);
  z-index: 5; min-width: 180px; max-height: 200px; overflow-y: auto; padding: 4px; }
.omt-mention-item { display: block; width: 100%; text-align: left; border: 0; background: transparent;
  padding: 7px 10px; border-radius: 6px; font-size: 13px; color: #0f172a; cursor: pointer; }
.omt-mention-item:hover { background: var(--om-accent, #0891b2); color: #fff; }

/* Email delivery panel (board settings): summary chips + a feed of sends. */
.omt-email-stats { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0 14px; }
.omt-empty-hint { font-size: 13px; color: var(--om-text-muted); line-height: 1.5; margin: 10px 0; }
.omt-email-chip { font-size: 11px; font-weight: 600; padding: 2px 9px; border-radius: 999px;
  background: #f1f5f9; color: var(--om-text-light); white-space: nowrap; }
.omt-email-send-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.omt-email-send-row { display: flex; gap: 10px; align-items: center; padding: 9px 2px;
  border-top: 1px solid var(--om-border); }
.omt-email-send-row:first-child { border-top: 0; }
.omt-email-dot { flex: 0 0 8px; width: 8px; height: 8px; border-radius: 50%; background: #cbd5e1; }
.omt-email-send-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.omt-email-send-main b { font-size: 13px; color: var(--om-text); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.omt-email-send-meta { font-size: 11.5px; color: var(--om-text-muted); overflow: hidden;
  text-overflow: ellipsis; white-space: nowrap; }
.omt-email-send-detail { color: var(--om-danger); }
.omt-email-send-side { display: flex; align-items: center; gap: 8px; flex: 0 0 auto; }
.omt-email-send-time { font-size: 11px; color: var(--om-text-muted); white-space: nowrap; }
/* Status colors, shared by dots and chips. */
.omt-email-dot.omt-email-delivered, .omt-email-dot.omt-email-opened { background: var(--om-success); }
.omt-email-dot.omt-email-sent, .omt-email-dot.omt-email-queued { background: #38bdf8; }
.omt-email-dot.omt-email-bounced, .omt-email-dot.omt-email-failed,
.omt-email-dot.omt-email-spam { background: var(--om-danger); }
.omt-email-dot.omt-email-skipped { background: var(--om-warning); }
.omt-email-chip.omt-email-delivered, .omt-email-chip.omt-email-opened {
  background: #ecfdf5; color: #047857; }
.omt-email-chip.omt-email-sent, .omt-email-chip.omt-email-queued {
  background: #eff6ff; color: #0369a1; }
.omt-email-chip.omt-email-bounced, .omt-email-chip.omt-email-failed,
.omt-email-chip.omt-email-spam { background: #fef2f2; color: #b91c1c; }
.omt-email-chip.omt-email-skipped { background: #fffbeb; color: #b45309; }

@media (max-width: 760px) {
  .omt-item-modal { width: 100%; height: 100%; max-width: 100vw; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
  .omt-item-body { flex-direction: column; }
  .omt-item-side { flex-basis: auto; max-width: none; border-left: 0; border-top: 1px solid var(--om-line, #eef2f6); }
}
.omt-detail-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 12px; }
.omt-x { border: 0; background: #f1f5f9; width: 30px; height: 30px; border-radius: 50%; cursor: pointer; color: #475569; font-size: 14px; }
.omt-x:hover { background: #e2e8f0; }
.omt-complete { color: var(--om-success); border-color: color-mix(in srgb, var(--om-success) 40%, var(--om-border)); }
.omt-detail-form { display: flex; flex-direction: column; gap: 14px; }
.omt-detail-title { border: 0; border-bottom: 2px solid transparent; font-size: 18px; font-weight: 700; color: #0f172a; padding: 4px 0; outline: none; font-family: inherit; }
.omt-detail-title:focus { border-color: var(--om-accent); }
.omt-detail-meta { font-size: 11.5px; color: #64748b; margin: 4px 0 14px; }
.omt-field { display: flex; flex-direction: column; gap: 5px; border-radius: 8px; }
/* Brief highlight when you jump to a field by clicking its cell in the table. */
.omt-field-flash { animation: omtFieldFlash 1.2s ease-out; }
@keyframes omtFieldFlash {
  0% { box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent, #0891b2) 45%, transparent); }
  100% { box-shadow: 0 0 0 3px transparent; }
}
.omt-field-label { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--om-text-muted); font-weight: 600; }
.omt-field-hint { font-size: 11px; color: var(--om-text-muted); }
.omt-textarea { resize: vertical; }
.omt-subtasks { margin-top: 20px; border-top: 1px solid var(--om-border-light); padding-top: 16px; }
.omt-sub-h { font-size: 12px; text-transform: uppercase; letter-spacing: .04em; color: var(--om-text-muted); margin: 0 0 10px; }
.omt-sub-list { list-style: none; margin: 0 0 8px; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.omt-sub { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; }
.omt-sub.is-done .omt-sub-text { text-decoration: line-through; color: var(--om-text-muted); }
.omt-sub-open { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; flex: 1; }
.omt-sub-open:hover { color: var(--om-accent); text-decoration: underline; }
.omt-parent-link { background: none; border: 0; padding: 0 0 8px; margin: 0; cursor: pointer; font-size: 12px; font-weight: 600; color: var(--om-accent); }
.omt-parent-link:hover { text-decoration: underline; }
.omt-sub-check { border: 1px solid var(--om-border); background: #fff; width: 20px; height: 20px; border-radius: 6px; color: var(--om-success); font-size: 11px; cursor: pointer; }
.omt-sub.is-done .omt-sub-check { background: var(--om-success); color: #fff; border-color: var(--om-success); }
.omt-sub-input { width: 100%; border: 1px solid var(--om-border); border-radius: 8px; padding: 7px 10px; font-size: 12.5px; }
.omt-del-link { display: block; margin-top: 24px; background: none; border: 0; color: var(--om-danger); font-size: 12.5px; cursor: pointer; }
.omt-del-link:hover { text-decoration: underline; }

/* Settings panel */
.omt-settings-h { font-size: 16px; font-weight: 700; color: #0f172a; margin: 0; }
.omt-set-block { margin-bottom: 22px; }

/* Collapsible settings sections (native <details>) — a clean carded accordion. */
.omt-set-disc { margin-bottom: 8px; border: 1px solid var(--om-border); border-radius: 10px; background: #fff; overflow: hidden; }
.omt-set-disc > summary.omt-set-summary {
  list-style: none; cursor: pointer; user-select: none;
  padding: 11px 12px; display: flex; align-items: center; gap: 8px;
  font-size: 12px; text-transform: uppercase; letter-spacing: .04em; font-weight: 700; color: #334155;
}
.omt-set-disc > summary.omt-set-summary::-webkit-details-marker { display: none; }
.omt-set-disc > summary.omt-set-summary::before { content: "▸"; color: var(--om-text-muted); font-size: 10px; transition: transform .15s; }
.omt-set-disc[open] > summary.omt-set-summary::before { transform: rotate(90deg); }
.omt-set-disc[open] > summary.omt-set-summary { border-bottom: 1px solid var(--om-line, #eef2f6); margin-bottom: 10px; }
.omt-set-disc > summary.omt-set-summary:hover { background: #f8fafc; }
.omt-set-disc > *:not(summary) { padding-left: 12px; padding-right: 12px; }
.omt-set-disc > *:last-child { padding-bottom: 12px; }
.omt-set-disc summary .omt-set-meta { text-transform: none; letter-spacing: 0; }
.omt-member-list, .omt-result-list, .omt-status-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
/* Pinned "add" bar at the top of a scrolling settings section (members, statuses). */
.omt-pinned-add { position: sticky; top: -20px; z-index: 2; background: #fff; margin: -20px -24px 18px; padding: 20px 24px 12px; border-bottom: 1px solid #eef2f7; }
/* The -20px pull is a bleed for the scroll container's own top padding, so the
   white bar sits flush against the top edge once it sticks. It only means that
   when the bar is the FIRST thing in the section. Put anything above it — the
   members tab's item-visibility block — and the pull instead drags the bar's
   opaque background up over the last line of that text, leaving the tops of the
   letters showing. Keep top: -20px paired with padding-top: 20px either way, or
   a stuck bar clips its own input. */
.omt-pinned-add:not(:first-child) { margin-top: 0; }
.omt-pinned-add + .omt-member-list, .omt-pinned-add + .omt-status-list { margin-top: 2px; }
.omt-set-subhint { margin: 8px 0 0; font-size: 11.5px; color: var(--om-text-muted); line-height: 1.4; }
.omt-member, .omt-result, .omt-status-row { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; }
.omt-member-name { flex: 1; }
.omt-member-role { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--om-text-muted); }
.omt-member-x { border: 0; background: transparent; color: var(--om-text-muted); cursor: pointer; font-size: 12px; }
.omt-member-x:hover { color: var(--om-danger); }
.omt-result-email { font-size: 11px; color: var(--om-text-muted); }
.omt-group-grants { margin-top: 16px; border-top: 1px solid var(--om-border, #e2e8f0); padding-top: 12px; }
.omt-group-grant { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin: 8px 0 4px; }
.omt-group-grant select { flex: 1 1 140px; min-width: 120px; }
.omt-visibility { margin: 14px 0; padding-top: 12px; border-top: 1px solid var(--om-border, #e2e8f0); }
.omt-visibility-form { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-top: 6px; }
.omt-visibility-form > select { flex: 1 1 200px; }
.omt-access-requests { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--om-border, #e2e8f0); }
.omt-access-req { gap: 8px; }
.omt-req-note { font-size: 11px; color: var(--om-text-muted); font-style: italic; margin-left: 4px; }
.omt-invite-locked { display: flex; flex-direction: column; align-items: flex-start; gap: 8px; margin: -8px -24px 16px; padding: 14px 24px; background: #f8fafc; border-bottom: 1px solid #eef2f7; }
.omt-invite-locked-msg { margin: 0; font-size: 12.5px; color: var(--om-text-muted, #64748b); }
.omt-invite-requested { display: inline-flex; align-items: center; font-size: 12.5px; font-weight: 500; color: #15803d; }
.omt-request-access { display: flex; align-items: center; justify-content: center; min-height: 70vh; padding: 24px; }
.omt-request-card { max-width: 420px; width: 100%; text-align: center; background: #fff; border: 1px solid var(--om-border, #e2e8f0); border-radius: 14px; padding: 28px 24px; box-shadow: 0 1px 3px rgba(15,23,42,.06); }
.omt-request-title { font-size: 20px; font-weight: 600; color: #0f172a; margin: 10px 0 4px; }
.omt-request-text { font-size: 13.5px; color: var(--om-text-muted); margin-bottom: 16px; }
.omt-request-form { display: flex; gap: 8px; align-items: center; justify-content: center; flex-wrap: wrap; }
.omt-request-form > input { flex: 1 1 200px; }
.omt-request-sent { font-size: 13px; color: #15803d; background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 12px; }
.omt-request-back { display: inline-block; margin-top: 16px; font-size: 12.5px; color: var(--om-text-muted); }
.omt-status-cat { font-size: 10.5px; color: var(--om-text-muted); margin-left: auto; }
.omt-inline-add { display: flex; gap: 6px; margin-top: 8px; align-items: center; flex-wrap: wrap; }

/* API & webhooks settings */
.omt-set-hint { font-size: 12px; color: var(--om-text-light); line-height: 1.45; margin: 0 0 8px; }
.omt-set-hint code { font-size: 11px; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; color: #334155; word-break: break-all; }
.omt-set-note { font-size: 12px; color: var(--om-text-light); margin: 8px 0 4px; }
.omt-set-note code { font-size: 11px; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }
.omt-token-reveal { background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.omt-token-label { display: block; font-size: 11px; font-weight: 600; color: #0e7490; margin-bottom: 6px; }
.omt-token { display: block; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; color: #0f172a; background: #fff; border: 1px solid var(--om-border); border-radius: 6px; padding: 7px 9px; word-break: break-all; user-select: all; }
/* Scoped-token list (Developer settings). */
.omt-token-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.omt-token-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 7px 10px; border: 1px solid var(--om-line, #eef2f6); border-radius: 8px; font-size: 12.5px; }
.omt-token-name { font-weight: 600; color: #0f172a; }
.omt-token-scope { font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; border-radius: 999px; padding: 1px 8px; }
.omt-token-write { color: #92400e; background: #fef3c7; }
.omt-token-read { color: #0e7490; background: #ecfeff; }
.omt-token-meta { font-size: 11.5px; color: #64748b; margin-left: auto; }
.omt-token-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.omt-webhook-active { margin-top: 10px; }
.omt-webhook-active .omt-btn { margin-top: 8px; }

/* Collapsible developer disclosure (hidden until a power user opens it) */
.omt-dev-toggle { display: flex; align-items: center; gap: 8px; width: 100%; background: none; border: 0; padding: 4px 0; cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748b; }
.omt-dev-toggle:hover { color: var(--om-accent); }
.omt-dev-caret { font-size: 10px; color: var(--om-text-muted); }
.omt-dev-body { margin-top: 10px; display: flex; flex-direction: column; gap: 18px; }
.omt-dev-block { padding-top: 2px; }
.omt-dev-h { font-size: 12.5px; font-weight: 700; color: #334155; margin: 0 0 8px; }
.omt-dev-ident { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; margin: 4px 0 14px; }
.omt-dev-ident .omt-field-label { margin: 0; }
.omt-codeblock { background: #0f172a; color: #e2e8f0; font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; line-height: 1.5; border-radius: 8px; padding: 10px 12px; overflow-x: auto; white-space: pre; margin: 0; }
/* Collapsible "what's actually sent" detail under a docs example. */
.omt-dev-details { margin: 8px 0 0; }
.omt-dev-details > summary { cursor: pointer; font-size: 12px; color: #475569; padding: 4px 0; user-select: none; }
.omt-dev-details > summary:hover { color: #0f172a; }
.omt-dev-details[open] > summary { margin-bottom: 8px; }

/* Overdue emphasis */
.omt-card-due.is-overdue { color: #b91c1c; background: #fef2f2; }
.omt-due-text { font-size: 12.5px; color: #475569; }
.omt-due-text.is-overdue { color: #b91c1c; font-weight: 600; }
.om-assigned-sub { display: inline-flex; gap: 4px; font-size: 10.5px; color: var(--om-text-muted, #94a3b8); }
.om-assigned-due.is-overdue { color: #b91c1c; font-weight: 600; }

/* Status editor rows */
.omt-set-meta { font-size: 11px; font-weight: 500; color: var(--om-text-muted); }
.omt-status-edit-row { display: flex; align-items: center; gap: 4px; }
.omt-status-edit { display: flex; align-items: center; gap: 5px; flex: 1; min-width: 0; }
.omt-livestream-row { gap: 8px; }
.omt-livestream-row .omt-set-subhint { margin: 0; font-size: 11px; }
.omt-color { width: 26px; height: 26px; padding: 0; border: 1px solid var(--om-border); border-radius: 6px; background: none; cursor: pointer; flex: 0 0 auto; }
.omt-input-sm { padding: 5px 8px; font-size: 12.5px; min-width: 0; }
.omt-icon-btn { display: inline-flex; align-items: center; justify-content: center; border: 1px solid var(--om-border); background: #fff; border-radius: 6px; width: 26px; height: 26px; font-size: 12px; color: #475569; cursor: pointer; flex: 0 0 auto; }
.omt-status-edit input[type="text"] { flex: 1 1 auto; min-width: 0; }
.omt-icon-btn:hover:not(:disabled) { border-color: var(--om-accent); color: var(--om-accent); }
.omt-icon-btn:disabled { opacity: .35; cursor: default; }
.omt-status-edit input[name="column[label]"] { flex: 1 1 auto; }
.omt-col-key { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--om-text-muted); background: #f1f5f9; border-radius: 4px; padding: 1px 6px; white-space: nowrap; flex: 0 0 auto; }

/* Columns settings: one shared grid so name / type / key / actions line up
   across every row. Forms use display:contents so their fields land directly
   in the grid (separate <form> per row, single visual table). The "Add column"
   row sits ABOVE the list so it's reachable without scrolling past every field
   — and the whole panel uses a single scrollbar (no nested scroll). */
/* Each column is a self-contained card so its extras (choices, colors, formula,
   click-action) can't bleed into the next column — the old shared CSS grid
   interleaved them. Hidden columns dim + dash. */
/* Legacy shared container look — `.omt-col-cards` is ALSO the kanban view's
   per-status drop zone (review 2026-08-11 caught the settings restyle leaking
   there), so anything list-card-specific below is scoped to the settings
   modal and this line keeps kanban exactly as it was. */
.omt-col-cards { display: flex; flex-direction: column; gap: 10px; margin: 14px 0 0; padding-top: 12px; border-top: 1px solid var(--om-border); }
/* R28 (settings only): the column list is ONE contained card of 40-48px rows
   separated by hairlines — not a stack of bordered mini-cards with a second
   control deck. */
.omt-set-section .omt-col-cards { gap: 0; margin: 4px 0 0; padding-top: 0; border: 1px solid var(--om-border, #e2e8f0); border-radius: 12px; background: #fff; overflow: hidden; }
.omt-col-card { display: flex; flex-direction: column; gap: 8px; border: 0; border-top: 1px solid var(--om-border-light, #f1f5f9); border-radius: 0; padding: 6px 12px; background: #fff; }
.omt-col-card:first-child { border-top: 0; }
.omt-col-card.is-hidden { opacity: .62; background: #f8fafc; }
.omt-col-cardhead { display: flex; align-items: center; flex-wrap: wrap; gap: 6px 10px; }
/* One row per column (R28/R29): identity flexes, type/scope fixed. */
/* Scoped: .omt-col-name is ALSO the kanban column-header name (R38). */
.omt-set-section .omt-col-name { flex: 1 1 180px; min-width: 140px; max-width: 480px; font-weight: 600; font-size: 13px; padding: 5px 8px; }
.omt-col-head .omt-col-name { flex: 1 1 auto; min-width: 0; font-weight: 600; font-size: 14px; }
/* min-width:0 or a select's longest option (min-content) silently beats the
   flex-basis and re-wraps the row. Closed state truncates; the open dropdown
   still shows full option text. */
.omt-col-cardhead .omt-select-sm { flex: 0 0 160px; min-width: 0; }
.omt-col-cardhead .omt-col-scope { flex: 0 0 116px; }
.omt-col-cardhead .omt-col-key { cursor: pointer; max-width: 90px; overflow: hidden; text-overflow: ellipsis; }
.omt-col-cardhead .omt-col-acts { gap: 2px; }
.omt-col-cardhead .omt-col-key:hover { color: var(--om-accent); background: #e0f2fe; }
.omt-col-acts { display: flex; gap: 4px; margin-left: auto; flex: 0 0 auto; }
/* Progressive disclosure: cards show name/type/badges; everything else behind Configure. */
.omt-col-badge { display: inline-flex; align-items: center; gap: 3px; font-size: 10.5px; font-weight: 600;
  color: #0e7490; background: #ecfeff; border: 1px solid #a5f3fc; border-radius: 999px; padding: 1px 7px;
  flex: 0 0 auto; white-space: nowrap; }
.omt-col-configure { display: inline-flex; align-items: center; gap: 4px; border: 1px solid #e2e8f0;
  background: #fff; border-radius: 999px; padding: 3px 10px; font-size: 12px; font-weight: 600;
  color: #475569; cursor: pointer; flex: 0 0 auto; }
.omt-col-configure:hover { border-color: #0891b2; color: #0891b2; }
.omt-col-configure.is-open { background: #f0fdff; border-color: #0891b2; color: #0e7490; }
.omt-col-configure-caret { font-size: 10px; display: inline-block; transition: transform .12s ease; }
.omt-col-configure.is-open .omt-col-configure-caret { transform: rotate(180deg); }
.omt-col-adv { border-top: 1px dashed #e2e8f0; padding-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.omt-icon-btn-save { color: #16a34a; }
.omt-col-choices { border-style: dashed; }
.omt-choice-swatches { display: flex; flex-wrap: wrap; gap: 6px; padding: 2px 0; }
/* Formula column config (function + date/expr) on its card. */
.omt-col-formula { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.omt-col-formula input[name="column[expr]"] { flex: 1 1 200px; min-width: 0; }
/* "Click a cell to [action]" augmentation control on a plain column's card. */
.omt-col-click { display: flex; align-items: center; gap: 8px; }
.omt-col-click-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--om-text-muted); white-space: nowrap; }
.omt-col-click select { flex: 0 1 auto; min-width: 0; }
/* "Default for new items" — the per-column starting value, on its card. */
.omt-col-default { display: flex; align-items: center; gap: 8px; }
.omt-col-default-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--om-text-muted); white-space: nowrap; }
.omt-col-default input, .omt-col-default textarea { flex: 1 1 200px; min-width: 0; }
/* A long-text default is multi-line, so its label sits at the top of the box. */
.omt-col-default.is-choices { align-items: flex-start; }
/* multi_select default: one compact checkbox per configured choice. */
.omt-col-default-choices { display: flex; flex-wrap: wrap; gap: 4px 12px; flex: 1 1 200px; min-width: 0; }
.omt-col-default-choices input { flex: 0 0 auto; }
.omt-col-default.is-long { align-items: flex-start; }
.omt-col-default.is-long .omt-col-default-l { padding-top: 6px; }
.omt-col-default textarea { resize: vertical; font: inherit; line-height: 1.45; }
/* Lookup-and-fill (connect columns): map this board's columns to the matched
   card's fields. Same label styling as .omt-col-default above. */
.omt-col-fill { display: flex; flex-direction: column; gap: 6px; }
.omt-col-fill-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--om-text-muted); white-space: nowrap; }
.omt-col-fill-row { padding-left: 18px; }
.omt-col-fill-row select { flex: 0 1 auto; min-width: 0; max-width: 260px; }
.omt-choice-swatch { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: #475569; background: #f8fafc; border: 1px solid var(--om-line, #e2e8f0); border-radius: 7px; padding: 2px 8px 2px 3px; cursor: pointer; }
.omt-choice-swatch input[type="color"] { width: 18px; height: 18px; border: 1px solid var(--om-line, #e2e8f0); border-radius: 4px; padding: 0; background: none; cursor: pointer; }
.omt-icon-btn-danger:hover:not(:disabled) { border-color: #ef4444; color: #ef4444; }
/* Add-column row: wrap instead of truncate (the type-specific config can be a
   long expression/choices field — better to wrap to a new line than clip it). */
.omt-col-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.omt-col-add > input[name="label"] { flex: 1 1 180px; min-width: 140px; max-width: 320px; }
.omt-col-add > select[name="type"] { flex: 0 0 160px; min-width: 0; }
/* R29: role-sized, never full-bleed — a select's width telegraphs its role. */
.omt-col-add .omt-input, .omt-col-add > select:not([name="type"]) { flex: 1 1 160px; min-width: 130px; max-width: 320px; }
.omt-col-add > button[type="submit"] { flex: 0 0 auto; margin-left: auto; }
.omt-detail-id { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 11px; color: var(--om-text-muted); opacity: .75; user-select: all; cursor: text; }
.omt-form-image { margin: 14px 0; }
.omt-form-image-preview { display: block; max-width: 100%; max-height: 110px; border-radius: 8px; border: 1px solid var(--om-border); margin-bottom: 8px; object-fit: contain; }
.omt-sig-view { border: 1px solid var(--om-border); border-radius: 8px; padding: 10px; background: #fff; }
.omt-sig-img { display: block; max-width: 100%; max-height: 120px; object-fit: contain; }
.omt-sig-typed-sig { font-family: "Fraunces", Georgia, serif; font-size: 1.4rem; color: #0f172a; margin: 4px 0; }
.omt-sig-meta { font-size: 11.5px; color: var(--om-text-muted); margin: 6px 0 0; }
.omt-sig-hash { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 10.5px; color: var(--om-text-light, #94a3b8); margin: 2px 0 0; }
/* In-app signing (e.g. internal RN signature, not on the public form). */
.omt-sig-signbox { border: 1px dashed var(--om-border); border-radius: 8px; padding: 10px; background: #fafbfc; }
.omt-sig-signform { display: flex; flex-direction: column; gap: 8px; }
.omt-sig-consent { display: flex; align-items: flex-start; gap: 7px; font-size: 12px; color: #475569; line-height: 1.4; }
.omt-sig-consent input { margin-top: 2px; flex: 0 0 auto; }
.omt-sig-draw { display: flex; flex-direction: column; gap: 4px; }
.omt-sig-canvas { width: 100%; height: 130px; background: #fff; border: 1px solid var(--om-border); border-radius: 8px; touch-action: none; cursor: crosshair; }
.omt-sig-clear { align-self: flex-start; font-size: 11.5px; color: #64748b; background: none; border: 0; cursor: pointer; padding: 2px 4px; text-decoration: underline; }
.omt-sig-actions { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.omt-sig-mode { font-size: 12px; color: #2563eb; background: none; border: 0; cursor: pointer; padding: 4px 6px; }
.omt-set-warn { font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fde68a; border-radius: 8px; padding: 8px 12px; margin: 8px 0; }
.omt-update-link { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--om-accent, #0891b2); text-decoration: none; white-space: nowrap; }
.omt-update-link:hover { text-decoration: underline; }
/* Live "days until due" computed column — recomputed each render, never stored. */
.omt-countdown { display: inline-flex; align-items: center; font-size: 12px; font-weight: 600; padding: 1px 9px; border-radius: 999px; white-space: nowrap; }
.omt-countdown--future { color: #475569; background: #f1f5f9; }
.omt-countdown--soon { color: #92400e; background: #fef3c7; }
.omt-countdown--due_today { color: #9a3412; background: #ffedd5; }
.omt-countdown--overdue { color: #b91c1c; background: #fee2e2; }
.omt-countdown--none { color: #94a3b8; background: transparent; font-weight: 500; }

/* Board rules (auto-assign) */
.omt-rule-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.omt-rule { display: flex; align-items: center; gap: 8px; background: #f8fafc; border: 1px solid var(--om-border); border-radius: 8px; padding: 7px 10px; }
.omt-rule.is-disabled { opacity: .55; }
.omt-rule.is-editing { border-color: var(--om-primary, #2563eb); box-shadow: 0 0 0 1px var(--om-primary, #2563eb) inset; background: #eff4ff; }
.omt-rule-paused { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #b45309; background: #fef3c7; border-radius: 4px; padding: 1px 5px; }
.omt-rule-id { margin-right: 6px; font-size: 10px; font-weight: 700; color: #64748b; background: #f1f5f9; border: 1px solid var(--om-border); border-radius: 4px; padding: 1px 5px; cursor: help; }

/* Per-status required-fields editor (transition validation) */
.omt-status-reqs { position: relative; }
.omt-status-reqs-btn { font-size: 11px; font-weight: 600; color: #64748b; cursor: pointer;
  border: 1px dashed var(--om-border); border-radius: 6px; padding: 3px 8px; list-style: none; }
.omt-status-reqs-btn:hover { color: var(--om-accent); border-color: var(--om-accent); }
.omt-status-reqs[open] .omt-status-reqs-btn { color: var(--om-accent); }
.omt-status-reqs-menu { position: absolute; z-index: 30; right: 0; margin-top: 4px; background: #fff;
  border: 1px solid var(--om-border); border-radius: 8px; box-shadow: 0 12px 28px -12px rgba(15,23,42,.25);
  padding: 8px 10px; display: grid; gap: 4px; min-width: 180px; max-height: 260px; overflow-y: auto; }
.omt-status-req { display: flex; align-items: center; gap: 7px; font-size: 12px; color: #334155;
  cursor: pointer; white-space: nowrap; }
.omt-rule-fired { font-size: 10.5px; color: var(--om-text-muted, #94a3b8); white-space: nowrap; }
/* Armed / disarmed pill on an HHAX write automation. Disarmed is the muted
   default; armed is red — it writes to a live caregiver record. */
.omt-rule-arm { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
.omt-rule-arm.is-armed { color: #b91c1c; background: #fef2f2; border-color: #fecaca; }
/* A column scoped to subitems — tint the scope select so subitem-only fields
   stand out in the Fields list. */
.omt-col-scope.is-subitem { color: #7c3aed; border-color: #ddd6fe; background: #f5f3ff; }
/* A rule that runs on subitems (Monday-style subitem automation). */
.omt-rule-scope { margin-left: 6px; font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em; color: #7c3aed; background: #f5f3ff; border: 1px solid #ddd6fe; border-radius: 4px; padding: 1px 5px; white-space: nowrap; }
/* The arm checkbox in the rule builder — a boxed, red-tinted safety toggle. */
.omt-arm-toggle { display: flex; gap: 8px; align-items: flex-start; margin-top: 6px; padding: 8px 10px; font-size: 12px; line-height: 1.4; color: #7f1d1d; background: #fef2f2; border: 1px solid #fecaca; border-radius: 6px; cursor: pointer; }
.omt-arm-toggle input[type="checkbox"] { margin-top: 2px; flex: none; }
.omt-arm-toggle strong { color: #991b1b; }
.omt-rule-actions { display: flex; align-items: center; gap: 8px; }
.omt-rule-activity { margin-top: 14px; border-top: 1px solid var(--om-border); padding-top: 10px; }
.omt-activity-feed { list-style: none; margin: 6px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow-y: auto; }
.omt-activity-line { display: flex; justify-content: space-between; gap: 10px; font-size: 12px; color: #475569; }
.omt-activity-when { color: var(--om-text-muted, #94a3b8); white-space: nowrap; }
.omt-rule-text { flex: 1; font-size: 12px; color: #475569; line-height: 1.4; }
.omt-rule-text strong { color: #1e293b; font-weight: 600; }
.omt-rule-add { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.omt-rule-add .omt-input-sm { width: 90px; }
.omt-rule-kw { font-size: 12px; color: var(--om-text-muted); }

/* Stacked rule builder: When ▸ condition / then ▸ action, one row each. */
.omt-rule-builder { display: flex; flex-direction: column; gap: 8px; margin-top: 10px;
  padding: 12px; background: #f8fafc; border: 1px solid #e2e8f0; border-radius: 10px; }
.omt-rule-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.omt-rule-row .omt-rule-kw { min-width: 38px; font-weight: 600; }
/* The and/or connector select sits where the keyword would — keep it that compact. */
.omt-rule-row .omt-rule-mode { width: 62px; min-width: 62px; flex: 0 0 auto; font-weight: 600; }

/* Duplicate-board block (settings → General) */
.omt-dup-board { margin: 14px 0; }
.omt-dup-row { display: flex; align-items: center; gap: 10px; margin-top: 6px; flex-wrap: wrap; }
.omt-dup-row input[name="name"] { max-width: 280px; }
.omt-dup-items { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--om-text-muted); white-space: nowrap; }

/* Move-item-to-board control (item detail panel footer) */
.omt-move-board { display: inline-flex; align-items: center; gap: 6px; }
.omt-move-board select { max-width: 170px; }

/* Watch toggle (item detail header) — quietly present, obvious when on */
.omt-watch { margin-left: auto; }
.omt-watch.is-watching { color: #0891b2; font-weight: 600; }
.omt-watch.is-watching .hero-eye { color: #0891b2; }

/* Automation button pills — per-row ⚡ buttons from button-trigger rules */
/* Board Files page: search bar + a plain table of every attachment. */
.omt-files-bar { display: flex; gap: 8px; align-items: center; margin-bottom: 12px; }
.omt-files-bar .omt-input { flex: 1 1 auto; }
.omt-files-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.omt-files-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .04em;
  color: #64748b; font-weight: 700; padding: 6px 8px; border-bottom: 1px solid var(--om-line, #e7eaf1);
}
.omt-files-table td { padding: 7px 8px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.omt-files-row:hover { background: #f8fafc; }
.omt-files-item a { color: #334155; text-decoration: none; }
.omt-files-item a:hover { color: var(--om-accent, #0891b2); text-decoration: underline; }
.omt-chip-muted { background: #f1f5f9; color: #64748b; margin-left: 6px; }
/* Count pill on the board header's Files button. */
.omt-files-count {
  margin-left: 5px; padding: 0 6px; border-radius: 999px; background: #eef2f7;
  color: #475569; font-size: 11px; font-weight: 700;
}

/* In-app file viewer: PDFs in an iframe (browser's own viewer), images full-size. */
.omt-viewer { position: fixed; inset: 0; z-index: 90; display: flex; align-items: center; justify-content: center; padding: 24px; }
.omt-viewer-scrim { position: absolute; inset: 0; background: rgba(15, 23, 42, .72); }
.omt-viewer-box {
  position: relative; display: flex; flex-direction: column; width: min(1100px, 100%);
  height: min(88vh, 100%); background: #fff; border-radius: 12px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(15, 23, 42, .35);
}
.omt-viewer-head {
  display: flex; align-items: center; gap: 10px; padding: 10px 12px;
  border-bottom: 1px solid var(--om-line, #e7eaf1); background: #f8fafc;
}
.omt-viewer-name { font-weight: 600; font-size: 13px; color: #0f172a; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-viewer-size { color: #64748b; font-size: 12px; flex: 1 1 auto; }
.omt-viewer-x { border: 0; background: transparent; font-size: 15px; color: #64748b; cursor: pointer; padding: 2px 6px; border-radius: 6px; }
.omt-viewer-x:hover { background: #e2e8f0; color: #0f172a; }
.omt-viewer-body { flex: 1 1 auto; min-height: 0; background: #475569; display: flex; align-items: center; justify-content: center; }
.omt-viewer-frame { width: 100%; height: 100%; border: 0; background: #fff; }
.omt-viewer-img { max-width: 100%; max-height: 100%; object-fit: contain; }
/* Download icon beside each file row. */
.omt-file-dl { flex: 0 0 auto; color: #64748b; display: inline-flex; padding: 2px; border-radius: 6px; }
.omt-file-dl:hover { color: var(--om-accent, #0891b2); background: #f1f5f9; }

/* Row attachment indicator — quiet until you look for it, opens the Files tab. */
.omt-row-clip {
  flex: 0 0 auto; margin-left: 6px; padding: 1px 7px; border-radius: 999px;
  border: 1px solid var(--om-line, #e7eaf1); background: #f8fafc; color: #475569;
  font-size: 11px; font-weight: 600; line-height: 18px; cursor: pointer;
  display: inline-flex; align-items: center; gap: 3px; white-space: nowrap;
}
.omt-row-clip:hover { border-color: var(--om-accent, #0891b2); color: var(--om-accent, #0891b2); }

.omt-rule-btn {
  flex: 0 0 auto; margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  border: 1px solid #fbbf24; background: #fffbeb; color: #92400e;
  font-size: 11.5px; font-weight: 600; line-height: 18px; cursor: pointer;
  white-space: nowrap; transition: background .12s, transform .06s;
}
.omt-rule-btn:hover { background: #fef3c7; }
.omt-rule-btn:active { transform: scale(.96); }
/* HHAX automation the viewer can't run — greyed, no hover lift, not clickable. */
.omt-rule-btn-locked, .omt-rule-btn-locked:hover {
  border-color: #e2e8f0; background: #f1f5f9; color: #94a3b8;
  cursor: not-allowed; opacity: .85;
}
.omt-rule-btn-locked:active { transform: none; }
/* Only ROW title cells flex (pill sits after the input); header/summary keep their layout. */
.omt-grid-row .omt-gcell-title { display: flex; align-items: center; }
.omt-grid-row .omt-gcell-title .omt-ginput { flex: 1 1 auto; min-width: 60px; }

/* >2 button rules fold into a per-row ⚡ +N menu (an overflowing pill row would
   slide under the next cell and become unclickable). */
.omt-rowbtn-wrap { position: relative; flex: 0 0 auto; }
.omt-rule-btn-more { margin-left: 4px; padding: 2px 8px; }
.omt-rowbtn-menu {
  position: absolute; top: 24px; right: 0; z-index: 40; min-width: 180px;
  display: flex; flex-direction: column; gap: 2px; padding: 6px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, .14);
}
.omt-rowbtn-item {
  text-align: left; padding: 6px 10px; border: 0; border-radius: 7px;
  background: transparent; font-size: 12.5px; font-weight: 600; color: #92400e; cursor: pointer;
}
.omt-rowbtn-item:hover { background: #fffbeb; }
.omt-rowbtn-item-locked, .omt-rowbtn-item-locked:hover {
  color: #94a3b8; background: transparent; cursor: not-allowed;
}

/* Searchable action picker (rule builder) */
.omt-actionpick-wrap { position: relative; display: inline-block; }
.omt-actionpick { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; min-width: 190px; justify-content: space-between; }
.omt-actionpick-caret { font-size: 10px; color: var(--om-text-muted); }
.omt-actionpick-menu {
  position: absolute; top: calc(100% + 4px); left: 0; z-index: 60; width: 380px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 12px;
  box-shadow: 0 14px 34px rgba(15, 23, 42, .16); padding: 8px;
}
.omt-actionpick-search { width: 100%; margin-bottom: 6px; }
.omt-actionpick-list { max-height: 380px; overflow-y: auto; }
.omt-actionpick-group {
  padding: 7px 8px 3px; font-size: 10.5px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #94a3b8;
}
.omt-actionpick-item {
  display: block; width: 100%; text-align: left; padding: 6px 8px; border: 0;
  border-radius: 8px; background: transparent; cursor: pointer;
}
.omt-actionpick-item:hover { background: #f1f5f9; }
.omt-actionpick-item.is-current { background: #ecfeff; }
.omt-actionpick-name { display: block; font-size: 13px; font-weight: 600; color: #0f172a; }
.omt-actionpick-desc { display: block; font-size: 11.5px; color: #64748b; line-height: 1.35; }
.omt-actionpick-empty { padding: 10px; font-size: 12.5px; color: #94a3b8; }

/* Activity log download strip */
.omt-activity-dl { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 10px 0 16px; }
.omt-activity-dl .omt-set-help { margin: 0; }

/* HHAX write audit block (Settings → Activity) */
.omt-hhax-audit { margin: 6px 0 18px; padding: 10px 12px; border: 1px solid #fde68a; border-radius: 10px; background: #fffbeb; }
.omt-hhax-audit .omt-activity-ico { color: #92400e; }
.omt-hhax-audit-msg { display: block; font-size: 12px; color: #64748b; }

/* Sidebar reorder: insert indicator on the row a dragged board will land before */
.omt-boardnav-row.omt-drop-before { box-shadow: inset 0 2px 0 #0891b2; }

/* Templates section (boards page) + save-as-template toggle */
.omt-tpl-section { margin-top: 26px; }
.omt-tpl-card .omt-board-card { cursor: default; }
.omt-tpl-use { display: flex; gap: 8px; margin-top: 10px; }
.omt-tpl-use input[name="name"] { flex: 1 1 auto; min-width: 0; }
.omt-tpl-edit { display: inline-block; margin-top: 8px; font-size: 12px; color: var(--om-text-muted); text-decoration: none; }
.omt-tpl-edit:hover { color: #0891b2; }
.omt-tpl-toggle { margin: 14px 0; }
.omt-rule-builder .omt-input-sm { width: 110px; }
.omt-rule-builder .omt-rule-offset { width: 70px; }

/* Recipe gallery — one-click starting points */
.omt-recipes { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 12px; }
.omt-recipe {
  display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600;
  color: #4338ca; background: #eef2ff; border: 1px solid #e0e7ff; border-radius: 999px;
  padding: 5px 11px; cursor: pointer; transition: background .12s, border-color .12s;
}
.omt-recipe:hover { background: #e0e7ff; border-color: #c7d2fe; }

/* Live plain-English preview of the rule being built */
.omt-rule-preview {
  display: flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569;
  background: #fff; border: 1px dashed #cbd5e1; border-radius: 8px; padding: 7px 10px;
}
.omt-rule-preview svg { color: #94a3b8; flex-shrink: 0; }
.omt-rule-addcond { font-size: 12px; color: #2563eb; background: none; border: 0; cursor: pointer; padding: 2px 6px; }
.omt-rule-addcond:hover { text-decoration: underline; }
.omt-rule-cadence { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.omt-rule-cadence .omt-field-label { margin: 0; font-size: 12.5px; }

/* Filter / search bar */
/* One row for saved views + hidden-columns chip + search/filters. Wraps on
   narrow screens; on wide screens the filter cluster right-aligns. */
.omt-controlbar { display: flex; align-items: center; gap: 10px 14px; flex-wrap: wrap; margin-bottom: 8px; }
.omt-controlbar .omt-views { margin-bottom: 0; flex: 0 1 auto; }
.omt-controlbar .omt-hidden-chip { margin: 0; }
.omt-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 0; flex: 1 1 auto; justify-content: flex-end; margin-left: auto; }
.omt-filter-search { flex: 0 1 280px; min-width: 150px; }
.omt-filter-check { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: #475569; white-space: nowrap; }

/* Subtask roll-up chip on a card */
.omt-card-sub { font-size: 11px; font-weight: 600; color: #475569; background: #eef2f7; border-radius: 6px; padding: 1px 7px; }

/* A fixed, tinted action bar as the modal's bottom row. It's a real flex row
   (modal = flex column: head · body[flex:1] · actions), so the scrolling data
   viewport sits ABOVE it and it never covers content. */
.omt-detail-actions {
  flex-shrink: 0;
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center;
  padding: 12px 20px;
  background: #f1f5f9; border-top: 1px solid var(--om-line, #eef2f6);
}
.omt-del-danger { color: var(--om-danger); }

/* Board-management form in settings */
.omt-board-form { display: flex; flex-direction: column; gap: 10px; margin-bottom: 10px; }
.omt-csv-import { display: flex; flex-direction: column; gap: 6px; margin: 12px 0; }

/* Base help text (R13): every explainer in settings is small and muted, never
   body-size prose. Capped for readability. */
.omt-set-help { font-size: 12px; color: var(--om-text-light); line-height: 1.5; margin: 2px 0 0; max-width: 62ch; }

/* General tab (R13/R15/R16/R17): inputs sized to content, the Save button
   content-width at the form's end, checkbox reads as one sentence, the
   destructive action quarantined. Placed AFTER .omt-field/.omt-board-form so
   equal-specificity overrides (flex-direction) win. */
.omt-set-general .omt-board-form .omt-input,
.omt-set-general .omt-visibility select,
.omt-set-general .omt-dup-row .omt-input { max-width: 480px; }
.omt-set-general .omt-board-form .omt-input-days { max-width: 120px; }
.omt-set-general .omt-board-form > .omt-btn { align-self: flex-start; }
.omt-field.omt-field-check { flex-direction: row; align-items: center; gap: 8px; }
.omt-field-check .omt-field-label { text-transform: none; font-size: 12.5px; letter-spacing: 0; color: var(--om-text, #1e293b); font-weight: 500; }

/* Settings group cards (R26): one bordered surface per concern, sentence-case
   card title, uppercase field labels clearly subordinate inside. */
.omt-set-card { border: 1px solid var(--om-border, #e2e8f0); border-radius: 12px; background: #fff;
  padding: 16px 18px; margin: 0 0 14px; max-width: 680px; }
.omt-set-cardtitle { font-size: 13.5px; font-weight: 700; color: #0f172a; margin: 0 0 12px; }
/* R27: list/builder cards may run wider than form cards. */
.omt-set-cardwide { max-width: 920px; }
.omt-set-cardactions { display: flex; gap: 8px; flex-wrap: wrap; margin: 0 0 12px; }
/* Inside a card the sticky pinned-add wrapper is just content. */
.omt-set-card .omt-pinned-add { position: static; margin: 0; padding: 0; border-bottom: 0; }
.omt-set-card .omt-pinned-add + .omt-member-list,
.omt-set-card .omt-pinned-add + .omt-status-list { margin-top: 0; }
/* Display-option checkboxes stack as sentences inside their card. */
.omt-set-card .omt-set-toggle { display: flex; margin: 0 0 8px; }
.omt-set-card .omt-set-toggle:last-child { margin-bottom: 0; }
/* Neutralize the legacy stand-alone spacing when these live inside a card. */
.omt-set-card.omt-visibility { margin: 0 0 14px; padding: 16px 18px; }
.omt-set-card .omt-csv-import { margin: 0; }
.omt-set-card .omt-dup-board,
.omt-set-card .omt-tpl-toggle { margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--om-border-light, #f1f5f9); }
.omt-set-card .omt-tpl-toggle { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; }

.omt-danger-zone { margin: 0; display: flex; align-items: center; justify-content: space-between;
  gap: 14px; flex-wrap: wrap; border: 1px solid #fecaca; background: #fffafa; border-radius: 12px;
  padding: 16px 18px; max-width: 680px; }
.omt-danger-text { min-width: 0; }
.omt-danger-title { font-size: 12.5px; font-weight: 700; color: #b91c1c; }
.omt-danger-zone .omt-set-help { margin: 2px 0 0; }
.omt-csv-row { display: flex; gap: 8px; align-items: center; }
.omt-csv-file { font-size: 12px; }

/* Boards index: toolbar + search */
.omt-board-toolbar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 6px; }
.omt-search-wrap { position: relative; flex: 1; min-width: 220px; display: flex; align-items: center; }
.omt-search-icon { position: absolute; left: 12px; color: var(--om-text-muted); pointer-events: none; }
.omt-search-input { width: 100%; border: 1px solid var(--om-border); border-radius: 999px; padding: 10px 14px 10px 36px; font-size: 14px; color: #1e293b; background: #fff; outline: none; transition: border-color .15s, box-shadow .15s; }
.omt-search-input:focus { border-color: var(--om-accent); box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 16%, transparent); }
.omt-board-toolbar-actions { display: inline-flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.omt-board-count-line { font-size: 12.5px; color: var(--om-text-muted); margin: 0 0 14px; }

/* Boards index: richer cards */
.omt-board-card-head { display: flex; align-items: center; justify-content: space-between; }
.omt-board-badges { display: inline-flex; align-items: center; gap: 6px; }
.omt-board-members { display: inline-flex; align-items: center; gap: 3px; font-size: 11.5px; font-weight: 600; color: var(--om-text-light); background: #f1f5f9; border-radius: 999px; padding: 2px 8px; }
.omt-board-source { display: inline-flex; align-items: center; color: var(--card-accent, #0891b2); }

/* Boards index: archived view */
.omt-board-archived { opacity: .85; }
.omt-board-archived .omt-board-name { color: #64748b; }
.omt-board-archived-empty { color: var(--om-text-muted); font-size: 13px; }
@media (max-width: 720px) {
  .omt-detail, .omt-settings { width: 100%; }
  .omt-board-main { padding: 18px 16px 0; }
  /* Compact head: let title/description wrap instead of pushing actions off-screen. */
  .omt-board-head-left { flex-wrap: wrap; }
  .omt-board-sub { max-width: 100%; }
}

/* Momentum scroll for the horizontally-scrolling kanban + table on touch. */
.omt-kanban, .omt-grid { -webkit-overflow-scrolling: touch; }

/* Phone layout: one kanban column nearly fills the screen (with a peek + snap),
   bigger tap targets, tighter chrome. */
@media (max-width: 640px) {
  .omt-board-main { padding: 14px 12px 0; }
  .omt-kanban { gap: 10px; scroll-snap-type: x proximity; }
  .omt-col { flex-basis: 84vw; max-width: 340px; scroll-snap-align: start; }
  .omt-board-head { gap: 10px; }
  .omt-board-head-right { flex-wrap: wrap; }
  .omt-filterbar { gap: 6px; }
  /* Easier to tap the non-drag move picker on a phone. */
  .omt-card-move-select { font-size: 12px; padding: 4px 7px; max-width: 130px; }
}

/* Backdrop scrim behind a slide-over (click to dismiss) */
.omt-scrim { position: fixed; inset: 0; background: rgba(15,23,42,.28); z-index: 55; animation: omt-fade .15s ease; }
@keyframes omt-fade { from { opacity: 0; } to { opacity: 1; } }

/* Custom-column values surfaced on a card */
.omt-card-fields { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.omt-card-field { font-size: 11px; color: #475569; background: #f1f5f9; border-radius: 6px; padding: 1px 7px; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-card-field-label { color: var(--om-text-muted); margin-right: 4px; }
.omt-card-smartlink { display: inline-flex; align-items: center; gap: 4px; text-decoration: none; }
.omt-card-smartlink:hover { background: #e0f2fe; color: var(--om-accent); }

/* Pure-CSS clickable star rating (radios styled as stars, no JS). DOM order is
   5→1 with row-reverse so a checked/hovered star fills it + all to its left. */
.omt-rating { display: inline-flex; align-items: center; gap: 5px; }
.omt-stars { display: inline-flex; flex-direction: row-reverse; justify-content: flex-end; }
.omt-star-radio { position: absolute; width: 1px; height: 1px; opacity: 0; }
.omt-star { cursor: pointer; color: #d6dbe1; font-size: 16px; line-height: 1; padding: 0 1px; transition: color .1s; }
.omt-star-radio:checked ~ .omt-star { color: #f59e0b; }
.omt-stars:hover .omt-star { color: #d6dbe1; }
.omt-star:hover, .omt-star:hover ~ .omt-star { color: #f59e0b; }
.omt-star-radio:focus-visible + .omt-star { outline: 2px solid var(--om-accent); border-radius: 3px; }
.omt-star-clear { cursor: pointer; color: #cbd5e1; font-size: 13px; line-height: 1; }
.omt-star-clear:hover { color: #ef4444; }
.omt-star-clear input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.omt-stars-static { letter-spacing: 1px; white-space: nowrap; }
.omt-stars-static .omt-star-on { color: #f59e0b; }
.omt-stars-static .omt-star-off { color: #d6dbe1; }

/* Timeline (date range): two date inputs joined by an arrow. */
.omt-timeline { display: inline-flex; align-items: center; gap: 4px; min-width: 0; }
.omt-timeline input { min-width: 0; }
.omt-timeline-sep { color: #94a3b8; flex: 0 0 auto; }
.omt-timeline-static { white-space: nowrap; }
.omt-card-pill { font-size: 11px; font-weight: 600; border-radius: 999px; padding: 1px 9px; color: var(--pill, #64748b); background: color-mix(in srgb, var(--pill, #64748b) 16%, #fff); }
.omt-checkbox-field { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: #334155; }
.omt-autosave-hint { font-size: 11.5px; color: var(--om-text-muted); margin: 2px 0 0; display: flex; align-items: center; gap: 8px; }

/* Transient "Saved ✓" confirmation after a silent autosave. */
.omt-saved-badge {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 600; color: #047857;
  background: #ecfdf5; border: 1px solid #a7f3d0;
  padding: 1px 8px; border-radius: 999px;
  animation: omt-saved-in 140ms ease-out;
}
@keyframes omt-saved-in { from { opacity: 0; transform: translateY(2px); } to { opacity: 1; transform: none; } }

/* View-only boards: cells/fields look disabled and ignore pointer input.
   The server-side hook is the real gate — this is purely cosmetic so viewers
   aren't misled into thinking an edit will stick. Buttons stay live so they
   can still open rows, expand subtasks and follow parent links. */
.omt-readonly input:not([type="hidden"]),
.omt-readonly select,
.omt-readonly textarea {
  pointer-events: none;
  background: #f8fafc;
  color: #94a3b8;
  cursor: default;
}

.omt-subadd-form .omt-input-sm { width: 100%; max-width: 320px; border-style: dashed; }

/* Task comments (item detail) */
.omt-comments { margin-top: 20px; border-top: 1px solid var(--om-border-light); padding-top: 16px; }
.omt-comment-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 12px; }
.omt-comment { display: flex; gap: 9px; }
.omt-comment-body { min-width: 0; }
.omt-comment-meta { display: flex; align-items: baseline; gap: 7px; margin-bottom: 2px; }
.omt-comment-who { font-size: 12.5px; font-weight: 600; color: #1e293b; }
.omt-comment-when { font-size: 10.5px; color: var(--om-text-muted); }
.omt-comment-text { font-size: 13px; color: #334155; line-height: 1.4; white-space: pre-wrap; word-break: break-word; }
.omt-comment-empty { font-size: 12.5px; color: var(--om-text-muted); margin: 0 0 10px; }
.omt-comment-add { display: flex; gap: 6px; align-items: flex-end; }
.omt-comment-input { flex: 1; resize: vertical; min-height: 38px; }

/* "Assigned to you" group inside the /home Today panel */
.om-assigned { margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px dashed var(--om-line, #e7eaf1); }
.om-assigned-h { font-size: 10.5px; text-transform: uppercase; letter-spacing: .05em; color: #0891b2; font-weight: 700; margin: 0 0 8px; }
.om-assigned-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 7px; }
/* Second group ("Assigned to you" under "Assigned by others") needs air. */
.om-assigned-list + .om-assigned-h { margin-top: 12px; }
.om-assigned-item { display: flex; align-items: center; gap: 9px; }
.om-assigned-link { display: flex; flex-direction: column; gap: 1px; text-decoration: none; min-width: 0; }
.om-assigned-title { font-size: 13px; color: #1e293b; font-weight: 500; line-height: 1.25; }
.om-assigned-link:hover .om-assigned-title { color: #0891b2; }
.om-assigned-board { font-size: 10.5px; color: var(--om-text-muted, #94a3b8); }

/* ── Table (editable grid) view ─────────────────────────────────────────── */
/* The horizontal scroll lives on the wrap; the grid is sized to its content
   (width: max-content) so block-level rows AND the group headers all span the
   full scroll width — otherwise a group's colored bar stops at the viewport. */
/* Cap the table viewport to the screen so a long board scrolls INSIDE this box
   (sticky header stays put) and the horizontal scrollbar sits at the bottom of
   the visible area — instead of at the very bottom of a tall grid, which forced
   a full page scroll-down just to scroll sideways. Short grids keep their
   natural height (max-height only bites once the content overflows). */
.omt-grid-wrap { display: flex; flex-direction: column; gap: 12px; max-height: calc(100vh - 210px); overflow: auto; overscroll-behavior-x: contain; -webkit-overflow-scrolling: touch; }
.omt-grid {
  border: 1px solid var(--om-line, #e2e8f0);
  border-radius: 12px;
  background: #fff;
  width: max-content;
  min-width: 100%;
}
/* Table view = grid scroller + the jump-to-group rail beside it. Scoped to the
   zone so .omt-grid-wrap's own rule (and every other consumer) is untouched. */
.omt-gridzone { display: flex; align-items: flex-start; gap: 12px; }
.omt-gridzone > .omt-grid-wrap { flex: 1 1 auto; min-width: 0; }
/* Jump-to-group rail: a quiet index of the board's groups, sticky beside the
   grid. Follows the boardnav/settings-card language — white card, hairline
   border, 12.5px slate labels — and stays out of the way on narrow screens. */
.omt-grouprail {
  position: sticky; top: 12px; flex: 0 0 auto; width: 168px;
  display: flex; flex-direction: column; gap: 1px;
  max-height: calc(100vh - 230px); overflow-y: auto;
  background: #fff; border: 1px solid var(--om-border); border-radius: 10px; padding: 5px;
}
.omt-grouprail-btn {
  display: flex; align-items: center; gap: 7px; width: 100%;
  border: 0; background: transparent; border-radius: 7px; cursor: pointer;
  padding: 5px 7px; text-align: left; font-size: 12.5px; color: #475569;
}
.omt-grouprail-btn:hover { background: #f1f5f9; color: #0f172a; }
.omt-grouprail-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--g, #64748b); flex: 0 0 auto; }
.omt-grouprail-name { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-grouprail-count { color: #94a3b8; font-size: 11.5px; font-variant-numeric: tabular-nums; }
/* Rail head: the sidebar's "Boards" caption + collapse chevron, at rail scale.
   Sticky because the rail is its own overflow-y:auto scroller — on a 45-group
   board the caption and the collapse chevron scrolled away with the list, and
   the chevron is the only way back out of the rail. */
.omt-grouprail-head {
  position: sticky; top: 0; z-index: 1; background: #fff;
  display: flex; align-items: center; justify-content: space-between;
  padding: 1px 3px 5px 7px;
}
.omt-grouprail-title {
  font-size: 10.5px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #94a3b8;
}
.omt-grouprail-collapse, .omt-grouprail-handle {
  border: 1px solid var(--om-border); background: #fff; color: #64748b;
  border-radius: 7px; width: 20px; height: 20px; line-height: 1; cursor: pointer;
  font-size: 13px; display: inline-flex; align-items: center; justify-content: center;
  flex: 0 0 auto; padding: 0;
}
.omt-grouprail-collapse:hover, .omt-grouprail-handle:hover {
  color: var(--om-accent); border-color: var(--om-accent);
}
/* One rail entry = the jump button plus, for a manager, the ↑/↓ pair overlaid
   on its right edge. Overlaid rather than in flow because 168px cannot show a
   group name and two buttons at once — same trade as .omt-boardnav-peek. */
.omt-grouprail-row { position: relative; display: flex; align-items: center; border-radius: 7px; }
/* opacity:0 alone leaves the pair fully TAPPABLE — on a touch screen, where
   nothing hovers, a tap on a group's right edge reordered the board with no
   visible control to explain it. Hidden has to mean unclickable. */
.omt-grouprail-move {
  position: absolute; right: 3px; top: 50%; transform: translateY(-50%);
  display: flex; gap: 2px; opacity: 0; pointer-events: none; transition: opacity .12s;
  background: #f1f5f9; border-radius: 7px; padding: 1px;
}
.omt-grouprail-row:hover .omt-grouprail-move,
.omt-grouprail-row:focus-within .omt-grouprail-move { opacity: 1; pointer-events: auto; }
/* …and where there is no hover at all, show them: a control a touch user can
   never reveal is a control they only ever hit by accident. */
@media (hover: none) {
  .omt-grouprail-move { opacity: 1; pointer-events: auto; }
}
.omt-grouprail-mv { width: 19px; height: 19px; border-radius: 5px; font-size: 10px; }
/* Collapsed state (html.omt-rail-collapsed): rail hidden, slim handle in its
   place. Independent of the sidebar's html.omt-nav-collapsed. */
.omt-grouprail-handle { display: none; position: sticky; top: 12px; }
html.omt-rail-collapsed .omt-grouprail { display: none; }
html.omt-rail-collapsed .omt-grouprail-handle { display: inline-flex; }
@media (max-width: 1100px) {
  .omt-grouprail { display: none; }
  .omt-grouprail-handle { display: none !important; }
}
/* Bulk multi-select bar (Table view). */
.omt-bulkbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px;
  padding: 8px 12px; background: color-mix(in srgb, var(--om-accent, #0891b2) 9%, #fff);
  border: 1px solid color-mix(in srgb, var(--om-accent, #0891b2) 30%, #e2e8f0); border-radius: 10px; }
.omt-bulk-count { font-size: 13px; font-weight: 700; color: #0f172a; }
.omt-bulk-form { margin: 0; }
/* The bulk "Set field…" control reuses the GRID's cell editors (.omt-ginput),
   which are width:100% and borderless-until-hover so they can fill a table cell.
   In the bar they sit side by side on a tinted ground, so they need a box and an
   intrinsic width of their own. */
/* flex-wrap because the row is field + value + Apply on a bar that is already
   sharing its line with four other controls: at 390px it ran to 425px and the
   Apply button left the screen. The border uses the TOKEN, not the literal it
   happens to equal today — night mode is a root filter: invert(.92), and the
   token is redarkened there precisely so boxes like this stay visible. */
.omt-bulk-set { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.omt-bulk-set .omt-ginput { width: auto; min-width: 150px; background: #fff;
  border-color: var(--om-border); }
/* The due editor's explicit "— clear —" (blanking is never the default state). */
.omt-bulk-clear { display: inline-flex; align-items: center; gap: 4px; font-size: 12px;
  color: #475569; white-space: nowrap; }
.omt-rowcheck { border: 0; background: transparent; cursor: pointer; font-size: 15px; line-height: 1;
  color: #64748b; padding: 0 2px; }
.omt-rowcheck.is-on { color: var(--om-accent, #0891b2); }
/* Group-header select-all: always visible (headers are chrome, one box per
   band is quiet) but muted until hovered or fully selected. */
.omt-groupcheck { color: #94a3b8; }
.omt-group-head:hover .omt-groupcheck, .omt-groupcheck.is-on { color: var(--om-accent, #0891b2); }

/* Group sections in the Table view: a colored, collapsible header per group. */
/* margin-top -1px overlaps the previous sibling's border-bottom, so the
   group band never shows a doubled line — works for editors too (their
   groups end in the add-item row, which a sibling :has() probe missed) and
   costs nothing per row. */
.omt-group-head { display: flex; align-items: center; gap: 8px; padding: 9px 12px; margin-top: -1px; position: relative;
  background: color-mix(in srgb, var(--g, #64748b) 10%, #fff);
  border-top: 1px solid var(--om-line, #eef2f6); border-left: 4px solid var(--g, #64748b);
  font-size: 13.5px; }
/* The whole title (caret + dot + name) collapses the group — a big tap target. */
.omt-group-toggle { display: inline-flex; align-items: center; gap: 8px; border: 0; background: transparent;
  cursor: pointer; padding: 2px 4px; border-radius: 6px; }
.omt-group-toggle:hover { background: color-mix(in srgb, var(--g, #64748b) 14%, #fff); }
.omt-group-caret { color: #64748b; font-size: 11px; }
.omt-group-dot { width: 10px; height: 10px; border-radius: 50%; background: var(--g, #64748b); flex: 0 0 auto; }
.omt-group-name { font-weight: 700; color: #0f172a; }
/* Click-to-edit group name (managers): looks like text, hints edit on hover. */
.omt-group-name-edit { border: 0; background: transparent; cursor: text; padding: 2px 6px;
  margin: -2px -6px; border-radius: 6px; font: inherit; }
.omt-group-name-edit:hover { background: color-mix(in srgb, var(--g, #64748b) 14%, #fff); }
.omt-group-rename { display: inline-flex; }
.omt-group-rename-input { font: inherit; font-weight: 700; color: #0f172a; padding: 2px 6px;
  border: 1px solid var(--g, #2563eb); border-radius: 6px; outline: none; min-width: 160px; }
.omt-group-count { font-size: 11.5px; color: #64748b; background: #fff; border: 1px solid var(--om-line, #eef2f6); border-radius: 10px; padding: 1px 8px; }
.omt-add-group { display: block; width: 100%; text-align: left; border: 0; border-top: 1px dashed var(--om-border);
  background: transparent; color: var(--om-text-muted); cursor: pointer; padding: 10px 14px; font-size: 13px; font-weight: 600; }
.omt-add-group:hover { color: var(--om-accent, #0891b2); background: #f8fafc; }
/* Inline "name this group" input revealed by + Add group (deliberate create). */
.omt-add-group-form { border-top: 1px dashed var(--om-border); padding: 8px 14px; }
.omt-add-group-form .omt-grid-addinput { font-weight: 600; }

/* "View-only" badge shown to read-only (viewer) members. */
.omt-board-title .omt-board-source { margin-left: 8px; vertical-align: middle; color: #0891b2; }
.omt-viewonly-badge { display: inline-flex; align-items: center; gap: 3px; vertical-align: middle;
  margin-left: 8px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #92400e; background: #fef3c7; border-radius: 999px; padding: 2px 9px; }
.omt-grid-addrow { display: flex; align-items: center; justify-content: flex-start; gap: 6px;
  padding: 6px 12px 6px 18px; border-top: 1px solid var(--om-line, #f1f5f9); }
.omt-grid-addinput { width: 100%; border: 1px dashed transparent; background: transparent; border-radius: 8px;
  padding: 6px 8px; font-size: 12.5px; color: #475569; }
.omt-grid-addinput:focus { border-color: var(--om-border); outline: none; background: #fff; }
/* The add row's "assign it now" picker: stays out of the title box's way and
   only shows its border once the row is being used. The row is as wide as the
   grid's full horizontal SCROLL width (every column, not the viewport), so an
   uncapped title box pushes the picker hundreds of px off-screen — cap it near
   the ITEM column's width so the picker sits right after the text. Scoped to
   .omt-grid-addrow: "+ Add group" reuses .omt-grid-addinput and wants it full.
   A flat 480px cap is still wider than a phone, which put the picker off the
   right edge at 390px — cap it against the viewport too. */
.omt-grid-addrow .omt-grid-addinput { flex: 0 1 480px; min-width: 0;
  max-width: min(480px, 60vw); }
.omt-grid-addassignee { flex: 0 0 auto; max-width: 170px; font-size: 12px; padding: 4px 8px;
  border-color: transparent; background: transparent; color: #94a3b8; }
.omt-grid-addrow:hover .omt-grid-addassignee,
.omt-grid-addrow:focus-within .omt-grid-addassignee { border-color: var(--om-border); background: #fff; color: #475569; }
.omt-grid-head, .omt-grid-row {
  display: flex;
  align-items: stretch;
  min-width: max-content;
  border-bottom: 1px solid var(--om-border, #e2e8f0);
}
.omt-grid-head {
  position: sticky; top: 0; z-index: 1;
  background: #f8fafc;
  font-size: .72rem; font-weight: 600; letter-spacing: .02em;
  text-transform: uppercase; color: #64748b;
}
.omt-grid-row { background: #fff; }
/* The whole row is an open-the-item target (GridNav delegates the click),
   mirroring a live board's .omt-live-clickable row. Native editors keep
   `auto` so they still read as editable — a pointer cursor over a text input
   is the tell that the row swallowed the click. */
.omt-grid-row { cursor: pointer; }
.omt-grid-row input, .omt-grid-row textarea { cursor: auto; }
.omt-grid-row:hover { background: #f8fbff; }
.omt-grid-row:last-child { border-bottom: 0; }
/* Group column-summary footer (sums / counts), Monday-style. */
.omt-grid-summary { background: #fbfdff; font-size: 12px; color: #334155; font-weight: 600;
  border-top: 1px solid var(--om-line, #eef2f6); }
/* Summary / load-more rows have no item behind them — no open cursor. */
.omt-grid-summary, .omt-grid-loadmore { cursor: default; }
.omt-grid-summary:hover { background: #fbfdff; }
.omt-grid-loadmore:hover { background: #fff; }
.omt-grid-summary .omt-gcell { padding: 6px 8px; }
.omt-summary-label { color: #94a3b8; font-weight: 600; }

.omt-gcell {
  flex: 0 0 160px;
  display: flex; align-items: center;
  padding: 3px 8px;
  min-width: 0;
  /* Gridlines must be VISIBLE (user feedback: "the lines down don't show,
     Excel is pretty") — slate-200, not the near-invisible slate-100. Token,
     not literal, so night mode's border re-color reaches the grid. */
  border-right: 1px solid var(--om-border, #e2e8f0);
}
.omt-grid-head .omt-gcell { padding: 8px; }
.omt-gcell-open { flex-basis: 54px; justify-content: center; gap: 2px; }
/* Title absorbs spare width on boards that underfill the screen; when the
   board overflows, the 240px basis rules as before. */
.omt-gcell-title { flex: 1 1 240px; }
/* Subrows have their own grower (.omt-subitem-cell) — two growers would
   misalign the title column between rows. */
.omt-grid-subrow .omt-gcell-title { flex-grow: 0; }
.omt-gcell-sys { flex-basis: 150px; color: #64748b; font-size: .8rem; gap: 6px; }
/* Wide enough for the built-in Due datetime-local editor: the control clips
   below ~190px in Chrome/en-US and wider in Firefox/12-hour locales, so keep
   the original 205px (review 2026-08-11 ×2). */
.omt-gcell-due { flex: 0 0 205px; }
/* R41 Excel affinity: keyboard-nav focus ring, per-device density, copy flash. */
/* max-content: the wrapper must span the SCROLLED grid, or its right edge sits
   mid-grid when scrolled right. :focus/:focus-visible at (0,2,0): the board
   page also loads case_staffing.css (profile slide-outs), whose universal
   `:focus-visible` outline (indigo) painted that edge as a full-height
   vertical line whenever Esc focused the wrapper. The cell ring
   (.omt-cell-focus) is the grid's real focus indicator. */
.omt-gridnav { outline: none; width: max-content; min-width: 100%; }
.omt-gridnav:focus,
.omt-gridnav:focus-visible { outline: none; }
.omt-cell-focus { outline: 2px solid var(--om-accent, #2563eb); outline-offset: -2px; border-radius: 4px; }
.omt-dense .omt-gcell { padding: 1px 8px; }
.omt-dense .omt-grid-head .omt-gcell { padding: 5px 8px; }
.omt-dense .omt-ginput { font-size: .8rem; padding: 2px 5px; }
.omt-dense .omt-gstatus { padding: 2px 8px; }
.omt-copied { animation: omt-copied-flash .6s ease-out; }
@keyframes omt-copied-flash { from { background: color-mix(in srgb, var(--om-accent, #2563eb) 14%, #fff); } to { background: #fff; } }

/* Per-type width defaults ("I need to be able to see the columns"): narrow
   data earns a narrow column. User drag-resize overrides via !important. */
.omt-gcell-t-xs { flex: 0 0 96px; }
.omt-gcell-t-md { flex: 0 0 128px; }
.omt-gcell-dt { flex: 0 0 205px; }
/* R34/R37: alignment follows type; digits line up. */
.omt-gcell-num { justify-content: flex-end; }
.omt-gcell-num .omt-ginput { text-align: right; }
.omt-grid-head .omt-gcell-num .omt-gh-labelbtn { text-align: right; }
.omt-gcell-ctr { justify-content: center; }
.omt-gcell-num, .omt-gcell-num .omt-ginput,
.omt-gcell-tab, .omt-gcell-tab .omt-ginput,
.omt-grid-summary .omt-gcell { font-variant-numeric: tabular-nums; }

.omt-gcol-draggable { cursor: grab; -webkit-user-select: none; user-select: none; }
.omt-gcol-draggable:hover { background: #eef2f6; }
.omt-gcol-dragging { opacity: .45; cursor: grabbing; }

.omt-grow-x {
  background: none; border: 0; cursor: pointer; padding: 2px;
  color: #94a3b8; font-size: .85rem; line-height: 1;
}
.omt-grow-x:hover { color: var(--om-accent, #0891b2); }
.omt-grow-open { font-size: 1rem; }

/* Empty-cell / row-gutter affordances stay quiet until the row is pointed at —
   a 20-row board shouldn't repeat "+ Assign" and ▸ ⤢ twenty times. Selected
   checkboxes, expanded carets and keyboard focus stay visible; touch devices
   (no hover) keep everything visible. */
.omt-grid-row .omt-rowcheck,
.omt-grid-row .omt-grow-x,
.omt-grid-row .omt-multi-empty,
.omt-grid-row .omt-assignees-empty { opacity: 0; transition: opacity .12s; }
.omt-grid-row:hover .omt-rowcheck,
.omt-grid-row:hover .omt-grow-x,
.omt-grid-row:hover .omt-multi-empty,
.omt-grid-row:hover .omt-assignees-empty,
.omt-grid-row:focus-within .omt-rowcheck,
.omt-grid-row:focus-within .omt-grow-x,
.omt-grid-row:focus-within .omt-multi-empty,
.omt-grid-row:focus-within .omt-assignees-empty,
.omt-grid-row .omt-rowcheck.is-on,
.omt-grid-row .omt-grow-x[aria-expanded="true"] { opacity: 1; }
.omt-grid-row .omt-gdate-empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }
.omt-grid-row:hover .omt-gdate-empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: .45; }
@media (hover: none), (pointer: coarse) {
  .omt-grid-row .omt-rowcheck,
  .omt-grid-row .omt-grow-x,
  .omt-grid-row .omt-multi-empty,
  .omt-grid-row .omt-assignees-empty { opacity: 1; }
}

/* Table-view subtask sub-rows (under an expanded item). */
.omt-grid-subrow { display: flex; align-items: stretch; min-width: max-content; background: #f8fafc; border-bottom: 1px solid #eef2f6; }
.omt-grid-subrow .omt-gcell { padding: 4px 8px; }
.omt-subrow-open { background: none; border: 0; cursor: pointer; font: inherit; color: #475569; text-align: left; padding: 2px 0; }
.omt-subrow-open:hover { color: var(--om-accent, #0891b2); }
.omt-subrow-open .is-done { text-decoration: line-through; color: #94a3b8; }
/* A subtask row shows its own subitem-column values as compact chips in a cell
   that fills the rest of the row (subitems don't share the parent's columns). */
.omt-subitem-cell { flex: 1 1 auto; display: flex; flex-wrap: wrap; align-items: center; gap: 6px; border-right: 0; }
.omt-subitem-chip { display: inline-flex; align-items: baseline; gap: 4px; font-size: 11px; color: #475569; background: #eef2f7; border: 1px solid #e2e8f0; border-radius: 4px; padding: 1px 6px; }
.omt-subitem-chip-k { color: #94a3b8; font-weight: 700; text-transform: uppercase; font-size: 9px; letter-spacing: .03em; }
.omt-grid-subadd .omt-subadd-form { width: 100%; }

.omt-ginput {
  width: 100%;
  border: 1px solid transparent;
  background: transparent;
  border-radius: 6px;
  padding: 5px 6px;
  font-size: .85rem;
  color: #0f172a;
}
.omt-ginput:hover { border-color: #e2e8f0; }
.omt-ginput:focus {
  outline: none; border-color: var(--om-accent, #0891b2); background: #fff;
  box-shadow: 0 0 0 2px rgba(8,145,178,.12);
}
select.omt-ginput { cursor: pointer; }
/* A cell that is text until clicked (choice_cell/1): looks like the input it
   stands in for, so the grid reads the same before and after the swap. */
.omt-gcell-display {
  display: block; text-align: left; font: inherit; font-size: .85rem; line-height: 1.25;
  cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.omt-gcell-display-ro { cursor: default; }
.omt-gcell-display-ro:hover { border-color: transparent; }
button.omt-gcell-display.omt-gstatus { cursor: pointer; }
.omt-gcell-display-num { text-align: right; }
.omt-gcell-display.omt-gdate-empty { color: #94a3b8; }
/* Status renders as a tinted pill (the select itself), Monday-style: the
   status color drives both the text and the wash behind it. */
.omt-gstatus {
  font-weight: 600;
  /* Without min-width:0 the select's longest option floors its width and the
     solid pill paints past the 128px cell into the next column. */
  min-width: 0;
  /* Text color + shadow are chosen server-side by the status color's
     luminance (status_pill_style/2) — white on saturated colors, dark on
     pale ones a user picked with the free color input. */
  color: var(--col-text, #fff);
  text-shadow: var(--col-shadow, 0 1px 1px rgba(15, 23, 42, .25));
  background: var(--col, #94a3b8);
  border-radius: 8px;
  padding: 5px 10px;
  text-align: center;
  appearance: none;
  -webkit-appearance: none;
}
.omt-gstatus:hover { filter: brightness(.94); border-color: transparent; }
/* Focus must not fall back to the generic white .omt-ginput:focus background
   (white-on-white text); keep the status color and show the ring only. */
.omt-gstatus:focus { background: var(--col, #94a3b8); color: var(--col-text, #fff); }
/* The dropdown's own option list renders on white — never inherit white text. */
.omt-gstatus option { color: #0f172a; background: #fff; text-shadow: none; }
/* No status set: an honest blank, not a colored block pretending to be data. */
.omt-gstatus.omt-gstatus-none { background: transparent; color: #94a3b8; text-shadow: none; font-weight: 500; }
.omt-gstatus.omt-gstatus-none:hover { border-color: #e2e8f0; }
.omt-gstatus.omt-gstatus-none:focus { background: #fff; color: #0f172a; }
/* An empty date cell keeps its input but silences the browser's mm/dd/yyyy
   chrome until pointed at — a table full of blank dates should read as blank. */
.omt-ginput.omt-gdate-empty:not(:focus),
.omt-live-editinput.omt-gdate-empty:not(:focus) { color: transparent; }
.omt-ginput.omt-gdate-empty:not(:focus):hover,
.omt-live-editinput.omt-gdate-empty:not(:focus):hover { color: #94a3b8; }
.omt-gdate-empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: .45; }
.omt-gcheck { width: 100%; display: flex; justify-content: center; }
.omt-gcheck input { width: 16px; height: 16px; }
.omt-glink { display: flex; align-items: center; gap: 4px; width: 100%; }
.omt-link-open { color: var(--om-accent, #0891b2); flex: 0 0 auto; display: inline-flex; }
.omt-link-field { display: flex; align-items: center; gap: 6px; }

.omt-grid-empty { padding: 24px; text-align: center; color: #64748b; }

/* ── In-app API tester ──────────────────────────────────────────────────── */
.omt-tester { border-top: 1px dashed var(--om-line, #e2e8f0); padding-top: 14px; }
.omt-tester-form {
  display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 8px 0;
}
.omt-tester-form .omt-input, .omt-tester-form .omt-select { flex: 1 1 140px; min-width: 120px; }
.omt-tester-out { margin-top: 8px; border-left: 3px solid var(--om-accent, #0891b2); }
.omt-rule-offset { width: 64px; flex: 0 0 64px; text-align: center; }
.omt-loadmore { display: flex; justify-content: center; padding: 16px 0 4px; }
.omt-multi-cell { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; width: 100%; cursor: pointer; min-height: 26px; border-radius: 6px; }
.omt-multi-cell:hover { background: #f1f5f9; }
.omt-multi-empty { color: #94a3b8; font-weight: 600; padding: 0 6px; }
.omt-file-readonly { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.omt-muted { color: #64748b; font-size: 12px; }
.omt-form-config { margin-top: 10px; display: flex; flex-direction: column; gap: 8px; }
.omt-form-settings { display: flex; flex-direction: column; gap: 6px; margin: 6px 0; }
/* R15/R16: content-width Save at the form's end; inputs sized to content. */
.omt-form-settings > .omt-btn { align-self: flex-start; }
.omt-form-settings .omt-input { max-width: 480px; }
.omt-form-settings .omt-textarea { max-width: 620px; }
.omt-form-col { display: flex; align-items: center; gap: 14px; padding: 3px 0; flex-wrap: wrap; }
/* Conditional-visibility pickers ("show when X is Y") on a form field's row. */
.omt-form-cond { max-width: 200px; }
.omt-form-req { color: #64748b; font-size: .85rem; }
/* The reusable multi-rule condition editor (Show when… / Require when…) + the
   validation picker, rendered as stacked sibling blocks under a form field. */
.omt-form-cond-group, .omt-form-validation {
  flex-basis: 100%; margin: 6px 0 2px; padding: 8px 10px;
  border: 1px solid var(--om-line, #e7eaf1); border-radius: 8px; background: #f8fafc;
  display: flex; flex-direction: column; gap: 6px;
}
.omt-form-cond-match { font-size: .82rem; font-weight: 600; color: #475569; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.omt-form-cond-row { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.omt-form-cond-x { color: #ef4444; font-weight: 700; padding: 0 8px; line-height: 1; }
.omt-form-cond-add { margin: 2px 0 0; font-size: .78rem; color: #94a3b8; }
/* Per-field "Who can edit" permission controls in settings. */
.omt-field-perm { color: #475569; }
.omt-field-perm-form { flex-basis: 100%; display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.omt-field-perm-groups { display: flex; flex-wrap: wrap; gap: 4px 14px; padding: 4px 2px 2px 22px; }
/* Permission-locked cells/fields: visible but inert (server re-checks anyway). */
.omt-cell-locked { pointer-events: none; opacity: .72; cursor: not-allowed; }
.omt-cell-locked input, .omt-cell-locked select, .omt-cell-locked textarea { background: #f8fafc; }
/* Board-wide activity feed (Settings -> Activity). */
.omt-board-feed { max-height: 60vh; overflow-y: auto; padding-right: 4px; }
.omt-activity-item { color: #64748b; font-style: italic; }
/* "N hidden" columns chip — per-user re-show control, visible to everyone. */
.omt-hidden-chip { position: relative; display: inline-block; margin: 0 0 8px; }
.omt-hidden-chip-btn {
  cursor: pointer; list-style: none; display: inline-flex; align-items: center; gap: 5px;
  font-size: 12px; font-weight: 600; color: #64748b; padding: 3px 9px;
  border: 1px solid var(--om-line, #e7eaf1); border-radius: 999px; background: #f8fafc;
  user-select: none;
}
.omt-hidden-chip-btn::-webkit-details-marker { display: none; }
.omt-hidden-chip[open] .omt-hidden-chip-btn { background: #eef2f7; color: #334155; }
.omt-hidden-menu {
  position: absolute; z-index: 40; margin-top: 4px; min-width: 200px; padding: 4px;
  border: 1px solid var(--om-line, #e7eaf1); border-radius: 10px; background: #fff;
  box-shadow: 0 8px 24px rgba(15, 23, 42, .12); display: flex; flex-direction: column; gap: 1px;
}
.omt-hidden-menu-item {
  display: flex; align-items: center; gap: 7px; text-align: left; font-size: 13px;
  color: #334155; padding: 6px 9px; border-radius: 7px; background: none; border: 0; cursor: pointer;
}
.omt-hidden-menu-item:hover { background: #f1f5f9; }
.omt-hidden-menu-reset { color: var(--om-accent, #0891b2); font-weight: 600; }
/* Per-field "advanced" disclosure — collapses conditions/validation/prefill so a
   simple field stays a simple checklist. The whole advanced group spans the row. */
.omt-form-advanced { flex-basis: 100%; margin: 4px 0 2px; }
.omt-form-advanced-summary {
  cursor: pointer; width: fit-content; font-size: .78rem; font-weight: 600;
  color: var(--om-accent, #0891b2); padding: 2px 4px; border-radius: 6px;
  list-style-position: inside; user-select: none;
}
.omt-form-advanced-summary:hover { text-decoration: underline; }
.omt-form-advanced[open] > .omt-form-advanced-summary { margin-bottom: 4px; }
.omt-form-val-bounds, .omt-form-val-pattern { display: flex; gap: 6px; flex-wrap: wrap; }
.omt-form-val-pattern .omt-input-sm { min-width: 220px; }
.omt-form-source-tag { margin-left: auto; font-size: 11px; font-weight: 600; color: #64748b; white-space: nowrap; }
.omt-dev-fulllink { display: inline-block; margin: 8px 0 0; font-size: 13px; font-weight: 600; color: var(--om-accent, #0891b2); text-decoration: none; }
.omt-dev-fulllink:hover { text-decoration: underline; }
.omt-api-page { max-width: 860px; }
.omt-api-page .omt-dev-block { margin-bottom: 18px; }
.omt-files { margin-top: 18px; padding-top: 14px; border-top: 1px solid var(--om-line, #e7eaf1); }
.omt-file-list { list-style: none; margin: 0 0 10px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.omt-file { display: flex; align-items: center; gap: 8px; }
.omt-file-link { display: flex; align-items: center; gap: 6px; text-decoration: none; color: #334155; min-width: 0; flex: 1; }
.omt-file-link:hover { color: var(--om-accent, #0891b2); }
.omt-file-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-file-size { color: #64748b; font-size: .78rem; flex: 0 0 auto; }
.omt-file-add { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.omt-file-input { font-size: .85rem; }
.omt-file-err { color: #b91c1c; font-size: .82rem; margin: 4px 0 0; }
select[multiple].omt-select { height: auto; padding: 4px; min-height: 84px; }

/* ===== Login — the unauthenticated sign-in landing ===== */
.om-login {
  --om-ink: #0f172a; --om-muted: #64748b;
  position: relative; min-height: 100vh; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  padding: 32px 20px;
  background: #f5f6fb;
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  color: var(--om-ink);
}
.om-login-aurora {
  position: absolute; inset: 0; z-index: 0; pointer-events: none;
  background:
    radial-gradient(42% 55% at 18% 18%, rgba(37,99,235,.26), transparent 70%),
    radial-gradient(40% 52% at 82% 12%, rgba(124,58,237,.22), transparent 70%),
    radial-gradient(48% 58% at 60% 88%, rgba(14,165,233,.20), transparent 72%);
  filter: blur(20px); opacity: .95;
  animation: omAurora 22s ease-in-out infinite alternate;
}
.om-login-card {
  position: relative; z-index: 1; width: 100%; max-width: 420px;
  background: rgba(255,255,255,.82);
  backdrop-filter: blur(14px) saturate(1.1); -webkit-backdrop-filter: blur(14px) saturate(1.1);
  border: 1px solid rgba(255,255,255,.7); border-radius: 22px;
  padding: 44px 38px 32px; text-align: center;
  box-shadow: 0 24px 60px rgba(15,23,42,.16), 0 2px 6px rgba(15,23,42,.06);
}
.om-login-welcome {
  font-family: 'Fraunces', Georgia, serif; font-weight: 500;
  font-size: 19px; letter-spacing: -.01em; color: var(--om-muted); margin: 0 0 14px;
}
.om-login-logo { height: 54px; width: auto; display: inline-block; margin: 0 auto; }
.om-login-btn {
  margin-top: 28px; width: 100%;
  display: inline-flex; align-items: center; justify-content: center; gap: 11px;
  padding: 13px 18px; border-radius: 12px;
  background: #fff; border: 1px solid #d8dee9; color: #1e293b;
  font-size: 14.5px; font-weight: 650; letter-spacing: -.01em; text-decoration: none;
  box-shadow: 0 1px 2px rgba(15,23,42,.06);
  transition: transform .14s ease, box-shadow .14s ease, border-color .14s, background .14s;
}
.om-login-btn:hover {
  transform: translateY(-1px); border-color: #c3ccdb; background: #fcfdff;
  box-shadow: 0 8px 22px rgba(37,99,235,.16), 0 1px 2px rgba(15,23,42,.06);
}
.om-login-btn:active { transform: translateY(0); }
.om-login-ms { width: 18px; height: 18px; flex: 0 0 auto; }
.om-login-note {
  margin-top: 18px; padding: 12px 14px; border-radius: 12px;
  background: #eff6ff; border: 1px solid #dbeafe;
  font-size: 13px; line-height: 1.5; color: #1d4ed8;
}
.om-login-foot {
  margin: 26px 0 0; font-size: 11px; font-weight: 600;
  letter-spacing: .14em; text-transform: uppercase; color: #94a3b8;
}
@media (max-width: 480px) { .om-login-card { padding: 34px 24px 26px; border-radius: 18px; } }

/* Tasks — data-source binding (board Settings → Data source) + locked fields */
.omt-source-meta { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.omt-source-key { font-size: 12px; color: #64748b; }
.omt-source-key code, .omt-source-mapsrc code { background: #f1f5f9; padding: 1px 5px; border-radius: 4px; font-size: 11px; }
.omt-source-last { font-size: 12px; color: #475569; margin: 4px 0; }
.omt-source-err { font-size: 12px; color: #b91c1c; margin: 4px 0; }
.omt-source-keywarn { font-size: 12.5px; color: #92400e; background: #fffbeb; border: 1px solid #fbbf24; border-radius: 8px; padding: 8px 10px; margin: 6px 0; line-height: 1.4; }
.omt-source-keyok { font-size: 12px; color: #15803d; margin: 4px 0; }

/* Last-activity column cell — compact one-liner: icon · phrase · ago */
.omt-gcell-lastact { flex: 0 0 200px; min-width: 200px; overflow: hidden; }
.omt-lastact { display: inline-flex; align-items: baseline; gap: 5px; font-size: 12px; color: #475569; max-width: 100%; }
.omt-lastact-ico { flex: 0 0 auto; }
.omt-lastact-text { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-lastact-ago { flex: 0 0 auto; color: #94a3b8; font-size: 11px; }
.omt-source-actions { display: flex; align-items: center; gap: 12px; margin: 10px 0; }
.omt-source-opts { margin: 10px 0; }
.omt-set-subhead { font-size: 12px; font-weight: 600; color: #334155; margin: 14px 0 6px; text-transform: uppercase; letter-spacing: .04em; }
.omt-source-mapped { list-style: none; padding: 0; margin: 0 0 10px; display: flex; flex-direction: column; gap: 4px; }
.omt-source-mapped-row { display: flex; align-items: center; gap: 8px; font-size: 13px; padding: 5px 8px; background: #f8fafc; border: 1px solid #eef2f7; border-radius: 6px; }
.omt-source-maplabel { font-weight: 500; }
.omt-source-mapsrc { color: #64748b; font-size: 12px; margin-left: auto; }
.omt-source-empty { font-size: 12px; color: #94a3b8; }
.omt-source-count { font-weight: 400; color: #94a3b8; font-size: 11px; }
/* Clickable "N linked" connect-cell count → opens the linked row. */
.omt-link-count { color: #0891b2; cursor: pointer; text-decoration: none; border-bottom: 1px dotted #67e8f9; }
.omt-link-count:hover { color: #0e7490; border-bottom-style: solid; }
.omt-feed-note { color: #0e7490; background: #ecfeff; border: 1px solid #cffafe; border-radius: 8px; padding: 6px 10px; }
/* Change-feed "before → after" diff cell. */
.omt-diff-chip { display: inline-flex; align-items: center; gap: 4px; background: #f8fafc; border: 1px solid #eef2f7;
  border-radius: 6px; padding: 1px 6px; margin: 1px 3px 1px 0; font-size: 11.5px; white-space: nowrap; }
.omt-diff-field { color: #64748b; font-weight: 600; }
.omt-diff-from { color: #94a3b8; text-decoration: line-through; }
.omt-diff-arrow { color: #cbd5e1; }
.omt-diff-to { color: #0f172a; font-weight: 600; }
.omt-diff-none { color: #cbd5e1; }
.omt-source-add { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.omt-source-bind { display: flex; flex-direction: column; gap: 10px; align-items: flex-start; }
.omt-check { display: flex; align-items: center; gap: 8px; font-size: 13px; color: #334155; margin: 6px 0; }
/* The provenance/lock mark LEADS the label (2026-08-12) — the flex gap
   spaces it; no extra margin. */
.omt-field-locked .omt-lock-ico { color: #94a3b8; vertical-align: -2px; }
.omt-locked-value { display: block; padding: 6px 0; color: #1f2937; font-size: 14px; }

/* Tasks — live read-through roster (source-bound board) */
.omt-live-wrap { padding: 8px 4px; }
.omt-live-bar { display: flex; align-items: center; gap: 12px; margin: 4px 2px 12px; flex-wrap: wrap; }
.omt-live-count { font-size: 12px; color: #64748b; }
.omt-live-asof { color: #94a3b8; cursor: help; }
.omt-live-refresh { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 600; color: #475569; background: #fff; border: 1px solid #e2e8f0; border-radius: 7px; padding: 3px 9px; cursor: pointer; transition: background .12s, border-color .12s; }
.omt-live-refresh:hover { background: #f8fafc; border-color: #cbd5e1; color: #1e293b; }
.omt-live-refresh:active { background: #f1f5f9; }
/* Bound the height to the viewport (not a fixed 70vh) so the horizontal
   scrollbar at the container's bottom stays ON-SCREEN — otherwise it sits below
   the fold and you must scroll the whole page down to reach it. The sticky
   header keeps column titles in view while the body scrolls inside. */
.omt-live-keywarn { position: relative; display: flex; gap: 10px; align-items: flex-start; margin: 0 0 12px; padding: 12px 14px; border: 1px solid #fcd34d; background: #fffbeb; border-radius: 10px; color: #92400e; }
.omt-live-keywarn-min { position: absolute; top: 8px; right: 10px; border: 0; background: transparent; color: #b45309; font-size: 11.5px; font-weight: 600; cursor: pointer; padding: 2px 8px; border-radius: 6px; }
.omt-live-keywarn-min:hover { background: #fef3c7; }
/* Minimized form: a compact amber chip; editing stays paused underneath. */
.omt-live-keywarn-chip { display: inline-flex; align-self: flex-start; align-items: center; gap: 6px; margin: 0 0 10px; border: 1px solid #fcd34d; background: #fffbeb; color: #92400e; font-size: 12px; font-weight: 600; border-radius: 999px; padding: 3px 12px; cursor: pointer; }
.omt-live-keywarn-chip:hover { background: #fef3c7; }
.omt-live-keywarn .hero-exclamation-triangle, .omt-live-keywarn svg { flex: 0 0 auto; color: #d97706; margin-top: 1px; }
.omt-live-keywarn-body { display: flex; flex-direction: column; gap: 6px; font-size: 13px; line-height: 1.45; }
.omt-live-keywarn-body code { background: #fef3c7; border-radius: 4px; padding: 0 4px; }
.omt-live-keywarn-acts { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 2px; }
.omt-live-keywarn-note { color: #b45309; font-style: italic; }
.omt-live-tablewrap { overflow: auto; max-height: calc(100vh - 230px); border: 1px solid #e8edf3; border-radius: 10px; cursor: grab; overscroll-behavior: contain; }
.omt-live-tablewrap.is-grabbing { cursor: grabbing; user-select: none; }
.omt-live-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.omt-live-table thead th { position: sticky; top: 0; z-index: 5; text-align: left; padding: 9px 12px; background: #f8fafc; color: #475569; font-weight: 600; border-bottom: 1px solid var(--om-border, #e2e8f0); border-right: 1px solid var(--om-border, #e2e8f0); white-space: nowrap; }
/* R35: one line per cell — a 165-char warehouse note was wrapping rows to
   250px tall. The px cap (not a %) is what bounds the AUTO-layout column's
   preferred width; without it, nowrap would trade tall rows for a
   several-thousand-px-wide column. Full text lives in the title tooltip. */
.omt-live-cellclamp { display: block; max-width: 360px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* R6 for live rows: an empty assignee select's "— Unassigned" is per-row
   noise — transparent until the row is pointed at (dropdown list unaffected). */
tr.omt-live-row .omt-live-empty:not(:focus) { color: transparent; }
tr.omt-live-row:hover .omt-live-empty:not(:focus) { color: #94a3b8; }
@media (hover: none), (pointer: coarse) { tr.omt-live-row .omt-live-empty:not(:focus) { color: #94a3b8; } }
/* R6 for live rows: empty date pickers show their icon on row hover only. */
tr.omt-live-row .omt-gdate-empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: 0; }
tr.omt-live-row:hover .omt-gdate-empty:not(:focus)::-webkit-calendar-picker-indicator { opacity: .45; }

/* R23/R33: the live grid shows its lines too, both directions, tokened. */
.omt-live-table tbody td { padding: 8px 12px; border-bottom: 1px solid var(--om-border, #e2e8f0); border-right: 1px solid var(--om-border, #e2e8f0); color: #1f2937; }
/* R25 at all sizes (was phone-only): freeze the live table's Title column so
   scrolling right never loses which row you're on. */
.omt-live-table thead th:first-child,
.omt-live-table tbody td:first-child { position: sticky; left: 0; background: #fff; z-index: 3; }
.omt-live-table thead th:first-child { background: #f8fafc; z-index: 6; }
.omt-live-table tbody td:first-child { box-shadow: 6px 0 6px -6px rgba(15, 23, 42, .12); }
/* The frozen cell must follow its row's tint and hover — the tr tint is 8%
   over TRANSPARENT, so repaint the opaque equivalent here (over white). */
tr.omt-live-row.omt-row-tinted td:first-child { background: color-mix(in srgb, var(--row-tint) 8%, #fff); box-shadow: inset 3px 0 0 var(--row-tint), 6px 0 6px -6px rgba(15, 23, 42, .12); }
.omt-live-clickable:hover td:first-child { background: #f8fbff; }
tr.omt-live-row.omt-row-tinted.omt-live-clickable:hover td:first-child { background: color-mix(in srgb, var(--row-tint) 8%, #fff); }
.omt-live-clickable { cursor: pointer; }
.omt-live-clickable:hover td { background: #f8fbff; }
.omt-live-title { font-weight: 600; }
.omt-live-locked { color: #475569; }
/* Inline-editable board-owned cell on a live row (augmentation). Reads like
   plain text until hover/focus, then shows it's an editable field — so it's
   discoverable without cluttering the read-only source columns. */
.omt-live-edit { margin: -4px -6px; }
.omt-live-editinput { width: 100%; min-width: 84px; box-sizing: border-box; border: 1px solid transparent; border-radius: 6px; padding: 4px 6px; font: inherit; color: #1f2937; background: transparent; cursor: text; transition: border-color .12s, background .12s; }
.omt-live-editinput::placeholder { color: #cbd5e1; }
.omt-live-editinput:hover { border-color: #e2e8f0; background: #fff; }
.omt-live-editinput:focus { outline: none; border-color: var(--om-accent); background: #fff; box-shadow: 0 0 0 2px color-mix(in srgb, var(--om-accent) 18%, transparent); }
.omt-live-editselect { cursor: pointer; }
/* Person cell: avatar sits left of the name dropdown (edit) or name (read). */
.omt-live-person { display: inline-flex; align-items: center; gap: 6px; min-width: 0; }
.omt-live-people { display: inline-flex; flex-wrap: wrap; gap: 4px 10px; min-width: 0; }
.omt-live-person .omt-live-editselect { flex: 1 1 auto; min-width: 84px; }
.omt-live-personname { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; color: #1f2937; }
.omt-live-personempty { color: #cbd5e1; }
.omt-live-empty { text-align: center; color: #94a3b8; padding: 22px; }
.omt-live-pager { display: flex; align-items: center; gap: 10px; justify-content: center; margin: 14px 0 4px; flex-wrap: wrap; }
.omt-live-pageinfo { font-size: 12px; color: #64748b; }
.omt-pager-goto { display: inline-flex; align-items: center; gap: 6px; margin: 0; }
.omt-pager-input { width: 64px; text-align: center; }
.omt-live-search { display: flex; align-items: center; gap: 6px; margin-left: auto; background: #fff; border: 1px solid #e2e8f0; border-radius: 8px; padding: 4px 10px; }
.omt-live-searchico { color: #94a3b8; flex: none; }
.omt-live-searchinput { border: 0; outline: none; font-size: 13px; min-width: 200px; background: transparent; }
.omt-live-thcell { position: relative; white-space: nowrap; }
.omt-live-thcell .omt-gh-label { display: inline; }
.omt-live-th { background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.omt-live-th:hover { color: #0891b2; }
.omt-live-sortind { color: #0891b2; font-size: 10px; }
.omt-live-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.omt-filter-barlabel { font-size: 12px; color: #64748b; font-weight: 600; }
.omt-filter-chip { display: inline-flex; align-items: center; gap: 6px; background: #ecfeff; border: 1px solid #cffafe; color: #0e7490; border-radius: 999px; padding: 3px 6px 3px 10px; font-size: 12px; }
.omt-filter-chip strong { color: #155e75; }
.omt-filter-chip button { border: 0; background: none; cursor: pointer; color: #0e7490; font-size: 14px; line-height: 1; padding: 0 2px; }
.omt-filter-add { margin: 0; }

/* Tasks — table column-header sort/filter menu */
.omt-gcell-hdr { position: relative; display: flex; align-items: center; gap: 2px; }
.omt-gh-label { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* Split heading: click the text to rename, click the funnel to sort/filter. */
.omt-gh-labelbtn { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis;
  white-space: nowrap; text-align: left; background: none; border: 0; margin: 0; padding: 1px 4px;
  font: inherit; color: inherit; font-weight: inherit; letter-spacing: inherit;
  text-transform: inherit; border-radius: 4px; cursor: text; }
.omt-gh-labelbtn:hover { background: #f1f5f9; color: #0f172a; }
/* Created/Updated header sort buttons — labelbtn look, but a distinct class so
   the "no rename affordance for non-managers" contract stays testable. */
.omt-gh-sortbtn { background: none; border: 0; cursor: pointer; font: inherit; color: inherit;
  display: inline-flex; align-items: center; gap: 4px; padding: 2px 4px; border-radius: 6px; }
.omt-gh-sortbtn:hover { background: #f1f5f9; color: #0f172a; }
.omt-gh-rename { flex: 1 1 auto; min-width: 0; display: flex; margin: 0; }
.omt-gh-renameinput { width: 100%; min-width: 0; font: inherit; font-weight: inherit;
  text-transform: none; letter-spacing: normal; padding: 1px 4px; border: 1px solid #0891b2;
  border-radius: 4px; outline: none; background: #fff; color: #0f172a; }
/* Always visible — a hover-only funnel reads as "no filter here" (same lesson
   as the CH rate-table headers). Hover/open/filtered just brightens it. */
.omt-gh-funnelbtn { flex: none; margin-left: auto; display: inline-flex; align-items: center; gap: 3px;
  background: none; border: 0; padding: 2px; border-radius: 4px; cursor: pointer; opacity: .85; }
.omt-gcell-hdr:hover .omt-gh-funnelbtn, .omt-gh-funnelbtn.is-open,
.omt-gh-funnelbtn.is-filtered { opacity: 1; }
.omt-gh-funnelbtn:hover .omt-gh-funnel, .omt-gh-funnelbtn.is-open .omt-gh-funnel,
.omt-gh-funnelbtn.is-filtered .omt-gh-funnel { color: #0891b2; }
.omt-gh-sortind { color: #0891b2; font-size: 10px; flex: none; }
.omt-gh-menu { border: 0; background: none; cursor: pointer; color: #94a3b8; font-size: 11px; padding: 0 2px; line-height: 1; flex: none; }
.omt-gh-menu:hover { color: #475569; }
.omt-gh-menu.is-filtered { color: #0891b2; }
/* The whole column heading is the sort/filter trigger. */
.omt-gh-trigger { display: inline-flex; align-items: center; gap: 4px; max-width: 100%;
  background: none; border: 0; padding: 0; margin: 0; font: inherit; color: inherit;
  font-weight: inherit; letter-spacing: inherit; text-transform: inherit; cursor: pointer; }
.omt-gh-trigger:hover, .omt-gh-trigger:hover .omt-gh-caret { color: #0891b2; }
.omt-gh-caret { color: #cbd5e1; font-size: 9px; flex: none; }
.omt-gh-trigger.is-filtered .omt-gh-caret { color: #0891b2; }
.omt-gh-funnel { width: 12px; height: 12px; color: #64748b; flex: none; }
.omt-gh-trigger:hover .omt-gh-funnel { color: #0891b2; }
.omt-gh-trigger.is-filtered .omt-gh-funnel { color: #0891b2; }
.omt-colmenu { position: absolute; top: 100%; left: 0; margin-top: 4px; z-index: 70; background: #fff;
  border: 1px solid #e2e8f0; border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12);
  min-width: 190px; max-width: 260px; padding: 4px; display: flex; flex-direction: column; text-transform: none; }
.omt-colmenu-item, .omt-colmenu-val, .omt-colmenu-clear { text-align: left; border: 0; background: none;
  cursor: pointer; font-size: 13px; font-weight: 500; padding: 6px 8px; border-radius: 6px; color: #1f2937; }
.omt-colmenu-item:hover, .omt-colmenu-val:hover, .omt-colmenu-clear:hover { background: #f1f5f9; }
.omt-colmenu-ico { width: 14px; height: 14px; display: inline-block; vertical-align: -2px; margin-right: 4px; }
.omt-colmenu-sec { border-top: 1px solid #eef2f7; margin-top: 4px; padding-top: 4px; }
.omt-colmenu-h { font-size: 11px; color: #94a3b8; text-transform: uppercase; letter-spacing: .04em; padding: 4px 8px; }
.omt-colmenu-vals { max-height: 220px; overflow-y: auto; display: flex; flex-direction: column; }
.omt-colmenu-val { font-weight: 400; }
.omt-colmenu-val { display: flex; align-items: center; gap: 6px; }
.omt-colmenu-check { color: #0891b2; flex: none; }
.omt-colmenu-val.is-on { background: #ecfeff; color: #0e7490; font-weight: 600; }
.omt-colmenu-empty { font-size: 12px; color: #94a3b8; padding: 4px 8px; margin: 0; }
.omt-colmenu-dates { display: flex; flex-direction: column; gap: 4px; padding: 2px 8px 6px; }
.omt-colmenu-searchform { padding: 2px 8px 6px; }
.omt-colmenu-searchinput { width: 100%; font-size: 12.5px; border: 1px solid #e2e8f0; border-radius: 6px;
  padding: 4px 8px; color: #1f2937; }
.omt-colmenu-searchinput:focus { outline: none; border-color: #0891b2; }
.omt-colmenu-blanks .omt-colmenu-item.is-on { background: #ecfeff; color: #0e7490; font-weight: 600; }
.omt-colmenu-datelbl { display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 12px; color: #475569; }
.omt-colmenu-date { font-size: 12px; border: 1px solid #e2e8f0; border-radius: 6px; padding: 3px 6px;
  color: #1f2937; }
.omt-colmenu-clear { color: #b91c1c; }
.omt-colmenu-backdrop { position: fixed; inset: 0; z-index: 65; }
.omt-source-mode { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #0891b2; }
.omt-source-colhead { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-top: 14px; flex-wrap: wrap; }
.omt-source-cols { max-height: 320px; overflow-y: auto; border: 1px solid #eef2f7; border-radius: 8px; padding: 4px; display: flex; flex-direction: column; }
.omt-source-colrow { display: flex; align-items: center; gap: 8px; padding: 5px 8px; border-radius: 6px; font-size: 13px; cursor: pointer; }
.omt-source-colrow:hover { background: #f8fafc; }
.omt-source-colrow .omt-lock-ico { color: #cbd5e1; }
.omt-source-colname { font-weight: 500; color: #1f2937; }
.omt-source-coltype { margin-left: auto; font-size: 11px; color: #94a3b8; }

/* Tasks — live row read-only detail (field list inside the centered item modal) */
.omt-livedetail-fields { margin: 8px 0 0; padding: 0; }
/* Two-column field grid: short read-only values left half the card empty
   while single-word warehouse labels wrapped mid-word in a 150px column.
   Wider labels + two columns use the width and halve the scroll. */
.omt-livedetail-fields { display: grid; grid-template-columns: repeat(auto-fill, minmax(400px, 1fr)); column-gap: 32px; }
.omt-livedetail-changes { grid-column: 1 / -1; }
.omt-livedetail-field { display: flex; gap: 12px; padding: 7px 0; border-bottom: 1px solid #f5f7fa; }
.omt-livedetail-k { flex: 0 0 200px; font-size: 12px; color: #64748b; font-weight: 600; margin: 0; display: inline-flex; flex-wrap: wrap; align-items: center; gap: 2px 6px; min-width: 0; overflow-wrap: anywhere; }
.omt-livedetail-v { flex: 1; font-size: 13px; color: #0f172a; font-weight: 500; margin: 0; word-break: break-word; }
.omt-livedetail-meta { font-size: 11.5px; color: #94a3b8; margin: -8px 0 14px; }
/* R45: augment marker on live-grid headers — board-owned is the minority there. */
.omt-gh-aug { display: inline-flex; align-items: center; gap: 4px; }
.omt-gh-aug svg { color: var(--om-accent, #2563eb); opacity: .75; flex: 0 0 auto; }
.omt-livedetail-empty .omt-livedetail-k, .omt-livedetail-empty .omt-livedetail-v { color: #b9c4d2; font-weight: 400; }
.omt-livedetail-emptytoggle { margin-top: 10px; }
/* Board-field values on the row card are the door into the editor. */
.omt-livedetail-editall { border: 0; background: transparent; color: var(--om-accent, #2563eb); font-size: 11px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 3px; padding: 1px 6px; border-radius: 5px; }
.omt-livedetail-editall:hover { background: #eef2f7; }
.omt-livedetail-editval { border: 0; background: transparent; padding: 0; font: inherit; color: inherit; cursor: pointer; text-align: left; border-bottom: 1px dashed transparent; display: inline-flex; align-items: center; gap: 5px; }
.omt-livedetail-editval:hover { color: var(--om-accent, #2563eb); border-bottom-color: color-mix(in srgb, var(--om-accent, #2563eb) 45%, transparent); }
.omt-livedetail-editval svg { color: #b6c2d1; }
.omt-livedetail-editval:hover svg { color: var(--om-accent, #2563eb); }
/* In-card editors size like fields, not table cells. */
.omt-livedetail-v .omt-live-edit { width: 100%; }
.omt-livedetail-v .omt-live-editinput { width: 100%; max-width: 320px; }
/* Change-feed "Changes" row: let the before→after chips wrap in the card. */
.omt-livedetail-changes .omt-livedetail-v { display: flex; flex-wrap: wrap; gap: 6px; }

/* Tasks — PDF-overlay form designer (Adobe-Sign-style "prepare document") */
.omt-fd-head { display: flex; align-items: center; gap: 14px; margin: 14px 0 10px; flex-wrap: wrap; }
.omt-fd-title { font-size: 18px; font-weight: 600; color: #0f172a; margin: 0; }
.omt-fd-empty { max-width: 560px; display: flex; flex-direction: column; gap: 10px; padding: 18px; border: 1px dashed #cbd5e1; border-radius: 12px; background: #f8fafc; }
.omt-fd-grid { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 16px; align-items: start; }
@media (max-width: 860px) { .omt-fd-grid { grid-template-columns: 1fr; } }

.omt-fd-doc { min-width: 0; }
.omt-fd-docbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.omt-fd-pages { max-height: calc(100vh - 200px); overflow: auto; padding: 12px; background: #475569; border-radius: 10px; display: flex; flex-direction: column; align-items: center; gap: 14px; }
.omt-fd-page { position: relative; background: #fff; box-shadow: 0 2px 10px rgba(0,0,0,.25); flex: none; }
.omt-fd-page canvas { display: block; }
.omt-fd-overlay { position: absolute; inset: 0; }

.omt-fd-box { position: absolute; box-sizing: border-box; border: 1.5px solid #0891b2; background: rgba(8,145,178,.12); border-radius: 3px; cursor: move; overflow: hidden; display: flex; align-items: center; line-height: 1.1; user-select: none; }
.omt-fd-box.is-sel { border-color: #0e7490; background: rgba(8,145,178,.22); box-shadow: 0 0 0 2px rgba(14,116,144,.35); z-index: 2; }
.omt-fd-box-label { padding: 0 4px; color: #0e7490; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; pointer-events: none; }
.omt-fd-resize { position: absolute; right: -1px; bottom: -1px; width: 12px; height: 12px; background: #0e7490; border-radius: 2px 0 2px 0; cursor: nwse-resize; }

.omt-fd-rail { position: sticky; top: 12px; max-height: calc(100vh - 24px); overflow-y: auto; overscroll-behavior: contain; display: flex; flex-direction: column; gap: 10px; border: 1px solid #eef2f7; border-radius: 12px; padding: 14px; background: #fff; }
.omt-fd-railhead { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.omt-fd-palette { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.omt-fd-chip { display: inline-flex; align-items: center; gap: 5px; padding: 5px 9px; border: 1px solid #cbd5e1; border-radius: 999px; background: #f8fafc; font-size: 12px; font-weight: 500; color: #334155; cursor: grab; }
.omt-fd-chip:hover { border-color: #0891b2; color: #0e7490; }
.omt-fd-chip:active { cursor: grabbing; }
.omt-fd-chip-tag { font-size: 9px; font-weight: 700; text-transform: uppercase; letter-spacing: .04em; color: #fff; background: #0891b2; border-radius: 4px; padding: 1px 4px; }

.omt-fd-inspector { display: flex; flex-direction: column; gap: 8px; border-top: 1px solid #eef2f7; padding-top: 10px; margin-top: 2px; }
.omt-fd-field { display: flex; align-items: center; justify-content: space-between; gap: 10px; font-size: 12px; color: #475569; font-weight: 600; }
.omt-fd-field input, .omt-fd-field select { max-width: 130px; }

/* Form designer — preview mode, share panel, rail buttons */
.omt-fd-railbtns { display: inline-flex; gap: 6px; }
.omt-fd-box.is-preview { border-style: solid; border-color: #cbd5e1; background: #fff; cursor: default; }
.omt-fd-box.is-preview .omt-fd-box-label { color: #0f172a; font-weight: 500; }
.omt-fd-pages.is-preview .omt-fd-box { box-shadow: none; }
.omt-fd-share { border-top: 1px solid #eef2f7; padding-top: 12px; margin-top: 4px; display: flex; flex-direction: column; gap: 8px; }
.omt-fd-sharelink { display: flex; gap: 6px; align-items: center; }
.omt-fd-sharelink input { flex: 1; min-width: 0; font-family: ui-monospace, monospace; font-size: 11px; }
.omt-fd-chip-req { color: #dc2626; font-weight: 700; margin-left: 1px; }
.omt-fd-chip-auto { background: #64748b; }
/* Wide enough for the longest role ("Office only · hidden") — at 140px it
   clipped mid-word, which is the opposite of what a role picker is for. */
.omt-form-fill { margin-left: auto; max-width: 180px; }
/* A term of art that carries its own explanation on hover — the dotted rule is
   what tells someone there is one (Momentum's margin columns, 2026-08-13). */
.omt-help { border-bottom: 1px dotted currentColor; cursor: help; }
.omt-fd-box-label { line-height: 1; }
.omt-fd-box[style*="font"] .omt-fd-box-label { white-space: nowrap; }

/* ============================================================================
   Mobile polish — phones (≤640px) and touch (coarse pointers). All rules here
   are ADDITIVE and scoped to small/touch screens; the desktop layout above is
   untouched. (Visual behaviour — especially the frozen table columns — should
   be sanity-checked on a real device.)
   ============================================================================ */

/* Hover-only affordances vanish on touch (phones have no :hover), so the to-do
   delete and notification dismiss buttons were unreachable. Always show them on
   touch devices. */
@media (hover: none), (pointer: coarse) {
  .om-todo-del,
  .om-notif:not(:hover) .om-notif-x { opacity: 1; }
}

/* The brand-bar wordmark squishes in the tight phone bar — show the compact "M"
   mark instead (both are rendered in onemark_header; CSS picks one). Keep them
   from being flex-squished at any size. */
.om-bar .om-logo,
.om-bar .om-logo-mark { flex: 0 0 auto; }
.om-bar .om-logo-mark { display: none; height: 26px; width: auto; }

@media (max-width: 640px) {
  /* Brand-bar logo → compact "M" mark (the wordmark squishes on phones). */
  .om-bar .om-logo { display: none; }
  .om-bar .om-logo-mark { display: block; }

  /* Board TABLE view frozen columns: now applied at ALL sizes — see the
     global "Frozen identity columns" block after the ColResize rules. */

  /* Live-table frozen first column: now applied at ALL sizes — see the
     rules beside .omt-live-table's base styles. */

  /* The live-grid search must not push the filter bar wider than the screen. */
  .omt-live-search { margin-left: 0; flex: 1 1 100%; }
  .omt-live-searchinput { min-width: 0; }

  /* ── Bigger thumb targets (all sit below the ~44px guideline on desktop). ── */
  .om-todo-del { width: 34px; height: 34px; }
  .om-notif-x { width: 34px; height: 34px; }
  .om-bar .om-bell { width: 40px; height: 40px; }
  .om-asst-clip,
  .om-asst-mic { width: 40px; height: 40px; }

  /* ── Docked Ask OneMark shouldn't dominate a short phone screen. ── */
  .om-asst-dock { height: 56vh; max-height: 360px; }
}

/* Tasks — data-driven charts pinned above the board table */
.omt-charts-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin: 6px 2px 16px; }
.omt-chart-card { margin: 0; padding: 12px 14px 14px; border: 1px solid #e8edf3; border-radius: 12px; background: #fff; box-shadow: 0 1px 2px rgba(15, 23, 42, .04); min-width: 0; }
.omt-chart-cardtitle { display: flex; align-items: center; gap: 6px; font-size: 13px; font-weight: 600; color: #334155; margin-bottom: 8px; }
.omt-chart-cardtitle .hero-chart-bar, .omt-chart-cardtitle svg { color: #64748b; flex: none; }
.omt-chart-alltime { margin-left: auto; flex: none; font-size: 10px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: #92400e; background: #fef3c7; border: 1px solid #fcd34d; border-radius: 999px; padding: 1px 8px; white-space: nowrap; cursor: help; }
/* Coverage note under a board-column chart's title (source-bound boards) */
.omt-chart-cardnote { margin: -4px 0 8px; font-size: 11px; line-height: 1.35; color: #64748b; }
.omt-chart-canvas { position: relative; height: 200px; }
.omt-chart-empty { display: flex; align-items: center; justify-content: center; height: 100%; color: #94a3b8; font-size: 13px; }

@media (max-width: 1024px) { .omt-charts-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 640px) { .omt-charts-grid { grid-template-columns: minmax(0, 1fr); } }

/* Tasks — charts time-window selector */
.omt-chart-rangebar { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin: 4px 2px 10px; }
.omt-chart-rangelabel { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 600; color: #64748b; }
.omt-chart-rangelabel svg { color: #94a3b8; }
.omt-chart-rangereach { font-size: 11px; color: #b45309; cursor: help; }
.omt-chart-rangebtns { display: inline-flex; border: 1px solid #e2e8f0; border-radius: 8px; overflow: hidden; background: #fff; }
.omt-chart-rangebtn { font-size: 12px; font-weight: 600; color: #475569; background: #fff; border: 0; border-left: 1px solid #eef2f7; padding: 4px 10px; cursor: pointer; transition: background .12s, color .12s; }
.omt-chart-rangebtn:first-child { border-left: 0; }
.omt-chart-rangebtn:hover { background: #f8fafc; }
.omt-chart-rangebtn.is-on { background: #2563eb; color: #fff; }
.omt-chart-rangedates { display: inline-flex; align-items: center; gap: 10px; }
.omt-chart-datefield { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #64748b; }
.omt-chart-datefield input { font-size: 12px; color: #1f2937; border: 1px solid #e2e8f0; border-radius: 7px; padding: 3px 7px; background: #fff; }
.omt-chart-datefield input:focus { outline: none; border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb; }
.omt-chart-rangecustom { font-size: 11px; font-weight: 600; color: #2563eb; text-transform: uppercase; letter-spacing: .03em; }

/* Tasks — charts settings list + add-chart wizard */
.omt-chart-list { list-style: none; margin: 0 0 12px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.omt-chart-listrow { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border: 1px solid #e8edf3; border-radius: 9px; background: #fff; }
.omt-chart-listicon { color: #64748b; flex: none; }
.omt-chart-listmain { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.omt-chart-listmain strong { font-size: 13px; color: #1f2937; }
.omt-chart-listmeta { font-size: 11px; color: #94a3b8; }
.omt-chart-listactions { display: flex; align-items: center; gap: 6px; flex: none; }
.omt-iconbtn { width: 26px; height: 26px; display: inline-flex; align-items: center; justify-content: center; border: 1px solid #e2e8f0; border-radius: 7px; background: #fff; color: #475569; cursor: pointer; font-size: 13px; line-height: 1; }
.omt-iconbtn:hover:not(:disabled) { background: #f8fafc; border-color: #cbd5e1; }
.omt-iconbtn:disabled { opacity: .4; cursor: default; }
.omt-chart-addrow { margin-top: 4px; }

.omt-chart-wizard { margin-top: 8px; padding: 14px; border: 1px solid #e2e8f0; border-radius: 12px; background: #f8fafc; }
.omt-wizard-title { font-size: 13px; font-weight: 700; color: #1f2937; margin-bottom: 10px; }
.omt-wizard-steps { display: flex; align-items: center; gap: 8px; margin-bottom: 12px; }
.omt-wizard-step { font-size: 12px; font-weight: 600; color: #94a3b8; padding: 3px 10px; border-radius: 999px; background: #eef2f7; }
.omt-wizard-step.is-on { color: #fff; background: #2563eb; }
.omt-wizard-arrow { color: #cbd5e1; }
.omt-chart-wizform { display: flex; flex-direction: column; gap: 12px; }
.omt-chart-types { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.omt-chart-typecard { display: flex; flex-direction: column; align-items: center; gap: 4px; padding: 10px 6px; border: 1px solid #e2e8f0; border-radius: 10px; background: #fff; cursor: pointer; font-size: 12px; color: #475569; transition: border-color .12s, box-shadow .12s; }
.omt-chart-typecard:hover { border-color: #cbd5e1; }
.omt-chart-typecard.is-on { border-color: #2563eb; box-shadow: 0 0 0 1px #2563eb inset; color: #1e3a8a; }
.omt-chart-typecard input { position: absolute; opacity: 0; pointer-events: none; }
.omt-chart-typecard svg { color: #64748b; }
.omt-chart-typecard.is-on svg { color: #2563eb; }
.omt-wizard-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 2px; }
.omt-field-hint { font-size: 11px; color: #94a3b8; margin-top: 3px; }
.omt-field-hint.is-warn { color: #b45309; }

@media (max-width: 640px) { .omt-chart-types { grid-template-columns: repeat(3, 1fr); } }

/* Saved views — one-click filter/sort/search presets, shown as chips. */
.omt-views { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 10px; }
.omt-view-chip { display: inline-flex; align-items: center; border: 1px solid var(--om-border); border-radius: 999px; background: #fff; overflow: hidden; }
.omt-view-apply { background: none; border: 0; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #475569; cursor: pointer; }
.omt-view-apply:hover { color: var(--om-accent); }
.omt-view-del { background: none; border: 0; border-left: 1px solid var(--om-border); padding: 4px 9px; color: #94a3b8; cursor: pointer; line-height: 1; }
.omt-view-del:hover { color: #b91c1c; background: #fef2f2; }
.omt-view-save { display: inline-flex; gap: 6px; align-items: center; }
.omt-view-chip.is-on { border-color: var(--om-accent); background: color-mix(in srgb, var(--om-accent) 12%, #fff); }
.omt-view-chip.is-on .omt-view-apply { color: var(--om-accent); }
.omt-view-add { background: none; border: 1px dashed var(--om-border); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: #64748b; cursor: pointer; }
.omt-view-add:hover { color: var(--om-accent); border-color: var(--om-accent); }
.omt-view-cancel { background: none; border: 0; padding: 5px 6px; font-size: 12px; color: #94a3b8; cursor: pointer; }
.omt-view-cancel:hover { color: #475569; }
.omt-view-editbtn { background: none; border: 0; border-left: 1px solid var(--om-border); padding: 4px 7px; color: #94a3b8; cursor: pointer; line-height: 1; display: inline-flex; align-items: center; }
.omt-view-editbtn:hover { color: var(--om-accent); background: color-mix(in srgb, var(--om-accent) 8%, #fff); }
.omt-view-edit { display: inline-flex; gap: 6px; align-items: center; padding: 2px 6px; }
.omt-view-edit .omt-btn { white-space: nowrap; }

/* "Resumed your view …" strip: the board reopened with the user's last saved
   view — loud enough that an auto-applied filter never reads as missing rows. */
.omt-resume-strip { display: flex; align-items: center; gap: 8px; margin: 8px 0 0;
  padding: 7px 12px; border: 1px solid color-mix(in srgb, var(--om-accent) 35%, #fff);
  border-radius: 10px; background: color-mix(in srgb, var(--om-accent) 8%, #fff);
  color: #334155; font-size: 13px; }
.omt-resume-strip .omt-resume-text { flex: 1; min-width: 0; }
.omt-resume-strip strong { color: var(--om-accent); }
.omt-resume-dismiss { background: none; border: 0; padding: 2px 6px; font-size: 15px;
  color: #94a3b8; cursor: pointer; line-height: 1; }
.omt-resume-dismiss:hover { color: #475569; }

/* Conditional row formatting: a select column flagged "color rows" tints each
   row by its matched choice color (a subtle left bar + wash). Generic. */
.omt-row-tinted { box-shadow: inset 3px 0 0 var(--row-tint); }
.omt-grid-row.omt-row-tinted { background: color-mix(in srgb, var(--row-tint) 8%, #fff); }
tr.omt-live-row.omt-row-tinted { background: color-mix(in srgb, var(--row-tint) 8%, transparent); }

/* Group sections on a SOURCE-BOUND board: materialized (snapshot) items parked
   in their group, rendered INSIDE the live table so they share its column
   headings. Monday-style colored group header rows + a stream divider. */
tr.omt-live-grouprow td { font-size: 13px; font-weight: 700; color: #334155;
  border-left: 3px solid var(--gcol); padding: 6px 9px; background: #fbfcfe; }
tr.omt-live-grouprow td > * { vertical-align: middle; margin-right: 8px; }
.omt-live-groupdot { display: inline-block; width: 8px; height: 8px; border-radius: 999px; background: var(--gcol); }
.omt-live-grouptoggle { cursor: pointer; color: #64748b; font-size: 11px; padding: 2px 6px; border-radius: 6px; }
.omt-live-grouptoggle:hover { background: color-mix(in srgb, var(--gcol, #64748b) 14%, #fff); }
.omt-live-groupcount { font-size: 11px; font-weight: 700; color: #64748b; background: #f1f5f9;
  border-radius: 999px; padding: 1px 8px; }
.omt-live-grouphint { font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #94a3b8; cursor: help; }
tr.omt-live-matrow td { background: color-mix(in srgb, var(--om-accent) 3%, #fff); }
tr.omt-live-streamdivider td { font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #64748b; background: #f8fafc; padding: 5px 9px;
  border-top: 2px solid var(--om-border); }

/* Key banding ("group by key" WITHOUT subitems): collapsible band rows per
   distinct key value, collapsed by default. The live table and the stored
   flex grid share the vocabulary. */
tr.omt-keyband td { background: #f1f5f9; border-top: 2px solid var(--om-border);
  cursor: pointer; padding: 5px 9px; }
tr.omt-keyband:hover td { background: #e2e8f0; }
.omt-grid-row.omt-keyband { cursor: pointer; background: #f1f5f9;
  border-top: 2px solid var(--om-border, #e2e8f0); }
.omt-grid-row.omt-keyband:hover { background: #e2e8f0; }
.omt-keyband-cell { flex: 1 1 auto; display: flex; align-items: center; gap: 6px;
  padding: 5px 9px; position: sticky; left: 0; }
.omt-keyband-arrow { font-size: 10px; color: #64748b; display: inline-block;
  width: 12px; }
.omt-keyband-label { font-size: 12px; font-weight: 700; color: #334155; }
.omt-keyband-count { font-size: 10px; font-weight: 700; color: #64748b;
  background: #fff; border: 1px solid var(--om-border, #e2e8f0);
  border-radius: 999px; padding: 1px 7px; margin-left: 4px; }
.omt-set-bandkeys { margin-top: 10px; }
.omt-set-bandkeys form { display: flex; gap: 6px; margin-top: 4px; flex-wrap: wrap; }
.omt-set-bandkeys select { flex: 0 1 auto; max-width: 220px; }
.omt-livedetail-groupmove { margin: 12px 0 0; }

/* Subitems on a SOURCE-BOUND board: an indented row under its source row, and the
   list + add form on the row card. Reuses .omt-subitem-chip for the field preview. */
tr.omt-live-subrow { cursor: pointer; background: #fbfcfe; }
tr.omt-live-subrow:hover { background: #f1f5f9; }
.omt-live-subtoggle { display: inline-flex; align-items: center; gap: 3px; margin-right: 6px;
  border: 1px solid var(--om-border); border-radius: 999px; background: #fff; cursor: pointer;
  font-size: 10px; font-weight: 700; color: #64748b; padding: 1px 7px; }
.omt-live-subtoggle:hover { border-color: var(--om-accent); color: var(--om-accent); }
tr.omt-live-subadd { background: #fbfcfe; }
tr.omt-live-subadd .omt-subadd-form { margin: 0; }
tr.omt-live-subadd .omt-input { max-width: 260px; }
.omt-live-subcell { padding-left: 30px !important; font-size: 12px; color: #475569; }
.omt-live-subcell > * { vertical-align: middle; margin-right: 6px; }
.omt-live-subarrow { color: #94a3b8; font-weight: 700; }
.omt-live-subcell .is-done { text-decoration: line-through; color: #94a3b8; }

.omt-livedetail-subs { margin-top: 14px; border-top: 1px solid var(--om-border); padding-top: 12px; }
.omt-livedetail-subh { font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: #94a3b8; margin: 0 0 8px; }
.omt-livedetail-sublist { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 5px; }
.omt-livedetail-sublist li { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.omt-livedetail-sublink { background: none; border: 0; padding: 0; font-size: 13px;
  color: #334155; cursor: pointer; text-align: left; }
.omt-livedetail-sublink:hover { color: var(--om-accent); }
.omt-livedetail-sublink .is-done { text-decoration: line-through; color: #94a3b8; }
.omt-livedetail-subempty { font-size: 12px; color: #94a3b8; margin: 0 0 8px; }

/* Board row actions — per-row buttons (action column), clickable data cells, and
   the action-column config sub-form. Match the omt pill/accent vocabulary. */
.omt-row-actions { display: inline-flex; flex-wrap: wrap; gap: 6px; }
.omt-row-action { display: inline-flex; align-items: center; gap: 5px; border-radius: 999px;
  padding: 4px 11px; font-size: 12px; font-weight: 600; cursor: pointer; background: #fff;
  border: 1px solid var(--om-border); color: #475569; white-space: nowrap;
  transition: transform .12s, box-shadow .15s, border-color .15s, color .15s; }
.omt-row-action:hover { border-color: var(--om-accent); color: var(--om-accent); transform: translateY(-1px);
  box-shadow: 0 8px 18px -12px color-mix(in srgb, var(--om-accent) 70%, transparent); }

/* A data cell wired to run an action on click (options["click_action"]). */
.omt-cell-link { background: none; border: 0; padding: 0; font: inherit; cursor: pointer; text-align: left;
  color: var(--om-accent); border-bottom: 1px dotted color-mix(in srgb, var(--om-accent) 55%, transparent); }
.omt-cell-link:hover { border-bottom-style: solid; }

/* Action-column settings sub-form (pick actions → map inputs → optional condition). */
.omt-action-config { display: flex; flex-direction: column; gap: 10px; flex-basis: 100%;
  margin-top: 8px; padding: 12px; border: 1px solid var(--om-border); border-radius: 12px;
  background: color-mix(in srgb, var(--om-accent) 4%, #fff); }
.omt-action-pick { display: flex; flex-wrap: wrap; gap: 8px 16px; }
.omt-action-cfg { display: flex; flex-direction: column; gap: 8px; padding: 9px 11px;
  border: 1px solid var(--om-border); border-radius: 10px; background: #fff; }
.omt-action-map, .omt-action-cond { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.omt-action-map-h { font-size: 12px; font-weight: 700; color: #334155; }
.omt-action-map-row { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: #475569; }

/* ---- Connectivity pill (flash_group client/server-error) ----
   Quiet + late: fades in only after the outage has lasted ~4s, so deploys
   and momentary blips never flash an alert; phx-connected hides it (which
   resets the delay for next time). Loaded globally via the root layout. */
.om-conn-pill {
  position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%);
  z-index: 200; text-align: center;
  padding: 8px 16px; border-radius: 999px;
  background: rgba(15, 23, 42, .9); color: #e2e8f0;
  font-size: 12.5px; font-weight: 600; letter-spacing: .01em;
  box-shadow: 0 8px 24px rgba(2, 6, 23, .35);
  opacity: 0;
  animation: omConnLate .5s ease-out 4s forwards;
}
.om-conn-pill[hidden] { display: none; }
@keyframes omConnLate { to { opacity: 1; } }
.om-conn-pill .om-conn-spin {
  display: inline-block; vertical-align: -2px; margin-right: 6px;
  animation: omConnSpin 1.1s linear infinite;
}
@keyframes omConnSpin { to { transform: rotate(360deg); } }
/* Stuck-session prompt (assets/js/stuck_session.js, card 100164): replaces the
   "Restoring your session…" pill once it's clear it won't clear by itself. */
.om-conn-pill.om-conn-stuck { opacity: 1; animation: none; }
.om-conn-stuck button {
  margin-left: 6px; padding: 2px 10px; border-radius: 999px;
  background: #e2e8f0; color: #0f172a; font-weight: 600;
}
.om-session-stuck #server-error { display: none !important; }

/* ---- Notification toasts (app.js "phx:om-toast" listener) ---- */
#om-toast-stack {
  position: fixed; bottom: 18px; right: 18px; z-index: 210;
  display: flex; flex-direction: column-reverse; gap: 10px;
  width: min(360px, calc(100vw - 36px));
}
.om-toast {
  position: relative; padding: 12px 34px 12px 14px; border-radius: 12px;
  background: #ffffff; color: #0f172a;
  border: 1px solid #e2e8f0; border-left: 4px solid #2563eb;
  box-shadow: 0 10px 30px rgba(2, 6, 23, .16);
  font-family: ui-sans-serif, -apple-system, 'Segoe UI', system-ui, sans-serif;
  animation: omToastIn .3s cubic-bezier(.2,.9,.3,1.2);
}
.om-toast--warning { border-left-color: #f59e0b; }
.om-toast--critical { border-left-color: #dc2626; }
.om-toast--link { cursor: pointer; }
.om-toast--link:hover { background: #f8fafc; }
.om-toast--out { opacity: 0; transform: translateX(12px); transition: all .25s ease; }
.om-toast-title { font-size: 13px; font-weight: 700; letter-spacing: -.01em; }
.om-toast-body { margin-top: 3px; font-size: 12.5px; color: #475569; line-height: 1.4; }
.om-toast-close {
  position: absolute; top: 6px; right: 8px; border: none; background: none;
  color: #94a3b8; font-size: 16px; line-height: 1; cursor: pointer; padding: 4px;
}
.om-toast-close:hover { color: #475569; }
@keyframes omToastIn {
  from { opacity: 0; transform: translateY(10px) scale(.97); }
  to   { opacity: 1; transform: none; }
}
@media (prefers-reduced-motion: reduce) {
  .om-toast { animation: none; }
}


/* Column resize handles (Tasks table) — injected by the ColResize hook. */
.omt-grid-head > .omt-gcell { position: relative; }

/* ── Frozen identity on the ITEM grid: PHONES ONLY (product review
   2026-08-11: with per-type widths + density most boards fit; an opaque
   pane covers scrolled content and bred a defect class — z-stacking,
   repaint parity, focus occlusion. The LIVE grid keeps its frozen Title
   at all sizes: at 100+ columns identity genuinely vanishes). MUST live
   after the `position: relative` resize-anchor rule above, which otherwise
   beats the sticky at equal specificity. Backgrounds inherit — every row
   variant paints an opaque background, and explicit colors here painted
   white over the row tint. ── */
@media (max-width: 640px) {
  .omt-grid-head .omt-gcell-open,
  .omt-grid-row .omt-gcell-open,
  .omt-grid-subrow .omt-gcell-open,
  .omt-grid-summary .omt-gcell-open { position: sticky; left: 0; z-index: 4; }

  .omt-grid-head .omt-gcell-title,
  .omt-grid-row .omt-gcell-title,
  .omt-grid-subrow .omt-gcell-title,
  .omt-grid-summary .omt-gcell-title {
    position: sticky; left: 54px; z-index: 4;
    box-shadow: 6px 0 6px -6px rgba(15, 23, 42, .12);
  }

  .omt-grid-head .omt-gcell-open,
  .omt-grid-head .omt-gcell-title,
  .omt-grid-row .omt-gcell-open,
  .omt-grid-row .omt-gcell-title,
  .omt-grid-subrow .omt-gcell-open,
  .omt-grid-subrow .omt-gcell-title,
  .omt-grid-summary .omt-gcell-open,
  .omt-grid-summary .omt-gcell-title { background: inherit; }
  .omt-grid-row.omt-row-tinted .omt-gcell-open { box-shadow: inset 3px 0 0 var(--row-tint); }
}

/* The sticky header must paint ABOVE the rows' z-4 frozen cells or they'd
   slide over it during vertical scroll. */
.omt-grid-head { z-index: 5; }

/* Group caret + name + count stay readable while scrolled right. */
.omt-group-headline { position: sticky; left: 12px; display: inline-flex; align-items: center; gap: 8px; min-width: 0; }
.omt-colresize {
  position: absolute; top: 0; right: -4px; width: 8px; height: 100%;
  cursor: col-resize; z-index: 6;
}
.omt-colresize:hover { background: linear-gradient(to right, transparent 3px, #94a3b8 3px, #94a3b8 5px, transparent 5px); }


/* ============================================================================
   Monday migration — Alan (monday-board-import branch, append-only block)
   Reconstructed-rule note/badge (Rules tab) + /tasks/monday-migration dashboard.
   ========================================================================== */

/* Rule row note: a muted line under the rule description, with an amber pill
   for Monday-reconstructed rules and a review hint while they're disabled. */
.omt-rule-note {
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  margin-top: 4px;
}
.omt-recon-badge {
  display: inline-flex; align-items: center; gap: 3px;
  font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .03em;
  color: #b45309; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 999px; padding: 1px 7px; white-space: nowrap;
}
.omt-rule-note-text { font-size: 11px; color: #94a3b8; line-height: 1.4; }
.omt-rule-note-hint {
  font-size: 10.5px; font-style: italic; color: #b45309; white-space: nowrap;
}

/* Migration dashboard */
.omt-mig { max-width: 1080px; margin: 0 auto; padding: 20px 16px 48px; }
.omt-mig-head { margin-bottom: 18px; }
.omt-mig-crumb { font-size: 12px; color: #94a3b8; margin-bottom: 6px; }
.omt-mig-crumb a { color: #64748b; text-decoration: none; }
.omt-mig-crumb a:hover { text-decoration: underline; }
.omt-mig-title { font-size: 22px; font-weight: 700; color: #0f172a; margin: 0 0 4px; }
.omt-mig-sub { font-size: 13px; color: #64748b; margin: 0 0 12px; }
.omt-mig-bar {
  height: 8px; border-radius: 999px; background: #e2e8f0; overflow: hidden;
  max-width: 520px;
}
.omt-mig-bar > span { display: block; height: 100%; background: #16a34a; border-radius: 999px; }
.omt-mig-toolbar { display: flex; align-items: center; gap: 10px; margin: 16px 0 10px; }
.omt-mig-search { flex: 1; max-width: 360px; }
.omt-mig-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.omt-mig-table th {
  text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: #94a3b8; font-weight: 600; padding: 8px 10px; border-bottom: 1px solid #e2e8f0;
}
.omt-mig-table td { padding: 9px 10px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.omt-mig-table tr:hover td { background: #f8fafc; }
.omt-mig-bname { font-weight: 600; color: #1e293b; }
.omt-mig-link { color: #2563eb; text-decoration: none; font-size: 12.5px; }
.omt-mig-link:hover { text-decoration: underline; }
.omt-mig-pill {
  display: inline-flex; align-items: center; gap: 4px;
  font-size: 11px; font-weight: 600; border-radius: 999px; padding: 2px 9px; white-space: nowrap;
}
.omt-mig-pill.is-none { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.omt-mig-pill.is-sample { color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; }
.omt-mig-pill.is-full { color: #15803d; background: #dcfce7; border: 1px solid #86efac; }
.omt-mig-rules {
  display: inline-flex; align-items: center; gap: 4px;
  color: #b45309; background: #fef3c7; border: 1px solid #fcd34d;
  border-radius: 999px; padding: 1px 8px; font-size: 11px; font-weight: 600;
  text-decoration: none;
}
.omt-mig-rules:hover { background: #fde68a; }
.omt-mig-loading, .omt-mig-error, .omt-mig-empty {
  padding: 28px 16px; text-align: center; color: #64748b; font-size: 13px;
}
.omt-mig-error { color: #b91c1c; }
.omt-mig-spinner {
  display: inline-block; width: 18px; height: 18px; margin-right: 8px; vertical-align: middle;
  border: 2px solid #cbd5e1; border-top-color: #2563eb; border-radius: 50%;
  animation: omtMigSpin .7s linear infinite;
}
@keyframes omtMigSpin { to { transform: rotate(360deg); } }

/* ── Monday Migration Center — import wizard (omt-imp-*) ─────────────────── */
.omt-imp-wrap { max-width: 1000px; margin: 0 auto; }
.omt-imp-steps { display: flex; gap: 8px; list-style: none; margin: 0 0 20px; padding: 0; flex-wrap: wrap; }
.omt-imp-step { font-size: 12px; font-weight: 600; color: #94a3b8; background: #f1f5f9;
  border: 1px solid #e2e8f0; border-radius: 999px; padding: 5px 12px; }
.omt-imp-step.is-active { color: #fff; background: var(--om-accent); border-color: var(--om-accent); }
.omt-imp-url { display: flex; gap: 8px; margin: 12px 0 18px; }
.omt-imp-url .omt-input { flex: 1; }
.omt-imp-shimmer-list { display: flex; flex-direction: column; gap: 8px; }
.omt-imp-shimmer { height: 46px; border-radius: 10px;
  background: linear-gradient(90deg, #f1f5f9 25%, #e2e8f0 37%, #f1f5f9 63%);
  background-size: 400% 100%; animation: omtImpShimmer 1.3s ease-in-out infinite; }
@keyframes omtImpShimmer { 0% { background-position: 100% 0; } 100% { background-position: -100% 0; } }
.omt-imp-board-list { display: flex; flex-direction: column; gap: 6px; }
.omt-imp-board-row { display: flex; align-items: center; gap: 12px; width: 100%; text-align: left;
  background: #fff; border: 1px solid var(--om-border); border-radius: 10px; padding: 12px 14px;
  cursor: pointer; transition: border-color .15s, box-shadow .15s, transform .15s; }
.omt-imp-board-row:hover { border-color: var(--om-accent);
  box-shadow: 0 8px 18px -12px rgba(15,23,42,.4); transform: translateY(-1px); }
.omt-imp-board-name { font-weight: 600; color: #1e293b; flex: 1; }
.omt-imp-board-id { font-size: 12px; color: #94a3b8; font-family: ui-monospace, monospace; }
.omt-imp-board-go { font-size: 12.5px; font-weight: 600; color: var(--om-accent); }
.omt-imp-empty, .omt-imp-muted { color: #94a3b8; font-size: 13px; }
.omt-imp-error { color: #b91c1c; font-size: 13px; padding: 14px 0; }
.omt-imp-loading { display: flex; align-items: center; gap: 12px; color: #64748b; font-size: 13.5px;
  padding: 24px 4px; }
.omt-imp-spinner { display: inline-block; width: 18px; height: 18px; flex: 0 0 18px;
  border: 2px solid #cbd5e1; border-top-color: var(--om-accent); border-radius: 50%;
  animation: omtImpSpin .7s linear infinite; }
@keyframes omtImpSpin { to { transform: rotate(360deg); } }
.omt-imp-plan-head { margin: 8px 0 4px; }
.omt-imp-desc { color: #475569; font-size: 13.5px; margin: 4px 0; }
.omt-imp-facts { color: #94a3b8; font-size: 12.5px; margin: 4px 0 0; }
.omt-imp-h3 { font-size: 13px; font-weight: 700; color: #0f172a; text-transform: uppercase;
  letter-spacing: .04em; margin: 22px 0 8px; }
.omt-imp-table-wrap { overflow-x: auto; border: 1px solid var(--om-border); border-radius: 10px; }
.omt-imp-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.omt-imp-table th { text-align: left; font-size: 11px; text-transform: uppercase; letter-spacing: .03em;
  color: #94a3b8; font-weight: 600; padding: 9px 12px; border-bottom: 1px solid #e2e8f0; background: #f8fafc; }
.omt-imp-table td { padding: 9px 12px; border-bottom: 1px solid #f1f5f9; vertical-align: middle; }
.omt-imp-table tr:last-child td { border-bottom: none; }
.omt-imp-mono { font-family: ui-monospace, monospace; font-size: 12px; color: #475569; }
.omt-imp-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.omt-imp-autos { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 8px; }
.omt-imp-auto { display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  background: #fff; border: 1px solid var(--om-border); border-radius: 10px; padding: 10px 12px; }
.omt-imp-auto-desc { flex: 1; font-size: 13px; color: #1e293b; min-width: 200px; }
.omt-imp-issue-group { margin: 12px 0; }
.omt-imp-issue-head { display: flex; align-items: center; gap: 8px; font-size: 13px; font-weight: 600;
  color: #334155; margin: 0 0 4px; }
.omt-imp-issue-list { margin: 0; padding-left: 18px; font-size: 13px; color: #475569; }
.omt-imp-issue-list li { margin: 3px 0; }
.omt-imp-cta { display: flex; flex-wrap: wrap; gap: 10px; margin: 26px 0 4px; }
.omt-imp-result { display: flex; flex-direction: column; align-items: flex-start; gap: 6px; }
.omt-imp-open { font-size: 16px; padding: 12px 22px; margin: 6px 0 8px; }
.omt-imp-stats { display: flex; flex-wrap: wrap; gap: 20px; margin: 12px 0; }
.omt-imp-stat { display: flex; flex-direction: column; }
.omt-imp-stat-n { font-size: 24px; font-weight: 700; color: #0f172a; font-family: "Fraunces", Georgia, serif; }
.omt-imp-stat-l { font-size: 12px; color: #94a3b8; }
.omt-imp-note { background: #fef3c7; border: 1px solid #fcd34d; border-radius: 10px; padding: 10px 14px;
  font-size: 13px; color: #92400e; margin: 8px 0; }
.omt-imp-link { color: var(--om-accent); font-weight: 600; text-decoration: none; }
.omt-imp-link:hover { text-decoration: underline; }
.omt-imp-backfill { margin: 8px 0; }
.omt-imp-backfill-line { display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 600;
  color: #0f172a; margin: 4px 0; }
.omt-imp-badge { display: inline-flex; align-items: center; font-size: 11px; font-weight: 600;
  border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.omt-imp-badge-mapped { color: #15803d; background: #dcfce7; border: 1px solid #86efac; }
.omt-imp-badge-manual { color: #b45309; background: #fef3c7; border: 1px solid #fcd34d; }
.omt-imp-badge-gap { color: #6d28d9; background: #ede9fe; border: 1px solid #ddd6fe; }
.omt-imp-badge-skipped { color: #64748b; background: #f1f5f9; border: 1px solid #e2e8f0; }
.omt-imp-badge-external { color: #475569; background: #f8fafc; border: 1px solid #cbd5e1; }
.omt-imp-cantbuild { flex-basis: 100%; font-size: 12px; color: #6d28d9; background: #ede9fe;
  border: 1px solid #ddd6fe; border-radius: 8px; padding: 4px 10px; line-height: 1.4; white-space: normal; }


/* ============================================================================
   Monday migration dashboard — continuation (Alan, append-only block #2):
   collapsed "Subitem boards" section (Monday's auto-created shadow boards).
   ========================================================================== */
.omt-mig-subwrap { margin-top: 22px; }
.omt-mig-subsummary {
  cursor: pointer; font-size: 12.5px; font-weight: 600; color: #64748b;
  padding: 8px 10px; border: 1px solid #e2e8f0; border-radius: 8px; background: #f8fafc;
  user-select: none; list-style-position: inside;
}
.omt-mig-subsummary:hover { background: #f1f5f9; }
.omt-mig-subwrap[open] .omt-mig-subsummary { border-radius: 8px 8px 0 0; }
.omt-mig-subnote { font-weight: 400; color: #94a3b8; }
.omt-mig-table.is-muted { opacity: .65; }
.omt-mig-table.is-muted .omt-mig-bname { font-weight: 400; color: #64748b; }
.omt-mig-subwrap[open] > .omt-mig-table {
  border: 1px solid #e2e8f0; border-top: none; border-radius: 0 0 8px 8px;
}
.omt-imp-bulk { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 10px; }
.omt-imp-auto-check { display: inline-flex; align-items: center; flex: 0 0 auto; cursor: pointer; }
.omt-imp-auto-check input { width: 16px; height: 16px; accent-color: var(--om-accent); cursor: pointer; }

/* ===== Item modal → Files tab (Monday-style) — append-only block =====
   The attachments UI now lives in the item modal's right-hand "Files" tab
   (alongside Comments/Activity) instead of a left-column section. These rules
   restyle the reused .omt-files markup for the tab context and add the
   drag-and-drop dropzone, per-entry upload progress, and image thumbnails. */

/* Small count pill on the Files side-tab. */
.omt-side-tab-badge {
  display: inline-block; margin-left: 5px; padding: 0 6px;
  min-width: 16px; height: 16px; line-height: 16px; text-align: center;
  font-size: 10px; font-weight: 700; border-radius: 999px;
  background: var(--om-accent, #0891b2); color: #fff; vertical-align: middle;
}

/* In the tab panel the attachments block is the whole panel — drop the
   left-column section chrome (top border / margin) it originally carried. */
.omt-item-side .omt-files { margin-top: 0; padding-top: 4px; border-top: 0; }

/* Image attachments render as a small thumbnail; others keep the paper-clip. */
.omt-file-thumb {
  width: 36px; height: 36px; flex: 0 0 auto; border-radius: 6px;
  object-fit: cover; border: 1px solid var(--om-line, #e7eaf1); background: #f8fafc;
}

/* Drag-and-drop upload zone: a labeled dashed target wrapping the file input. */
.omt-dropzone {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; width: 100%; padding: 16px 12px; text-align: center; cursor: pointer;
  border: 1.5px dashed var(--om-border, #cbd5e1); border-radius: 8px;
  background: #f8fafc; color: #64748b; font-size: .82rem;
  transition: border-color .15s, background .15s;
}
.omt-dropzone:hover { border-color: var(--om-accent, #0891b2); background: #f1f5f9; }
/* LiveView adds phx-drag-over on the drop target while a file is dragged over. */
.omt-dropzone.phx-drag-over,
.omt-dropzone[phx-drag-over] { border-color: var(--om-accent, #0891b2); background: #ecfeff; }
.omt-dropzone-hint { pointer-events: none; }

/* Per-entry upload progress while a file is uploading. */
.omt-upload-entry { display: flex; align-items: center; gap: 8px; margin-top: 8px; font-size: .82rem; }
.omt-upload-progress { flex: 1; height: 8px; accent-color: var(--om-accent, #0891b2); }

/* Files tab: give the add form room to stack the dropzone + entries + button. */
.omt-files .omt-file-add { flex-direction: column; align-items: stretch; }

/* ── Night mode ──────────────────────────────────────────────────────────────
   Toggled by the brand-bar moon (html.night-mode, persisted in localStorage).
   A soft inversion of the whole document with media counter-inverted — one
   rule set that themes every app. The filter sits on the ROOT element, which
   the spec exempts from creating a fixed-position containing block, so sticky
   bars and modals are unaffected. The base invert(0) makes the toggle FADE:
   colors interpolate over .55s instead of snapping. */
html { filter: invert(0) hue-rotate(0deg); transition: filter .55s ease; background: #fff; }

/* Because it INVERTS rather than re-colours, night mode can only be applied to
   a page that is light to begin with. A surface that is already dark by design
   (the Data Wizard Observatory) would come out WHITE — the same preference
   producing opposite results in two apps, which is exactly how this was
   reported. Such a page's brand bar carries `om-fixed-dark`, and every rule
   below skips it: the preference still stands, it just doesn't reach a page
   that has only one theme. (Corollary for anyone adding to this section: never
   hand-write a dark colour under .night-mode — the filter turns it light.
   Style the light state and let the inversion do the work.) */
html.night-mode:not(:has(.om-fixed-dark)) {
  filter: invert(0.92) hue-rotate(180deg);
  background: #0c1017;
  /* Borders are near-white in day mode, which inverts to near-black — i.e.
     invisible. Darken the tokens so they come out clearly on the dark side. */
  --om-border: #67748a;
  --om-border-light: #8a94a6;
  --om-line: #67748a;
}

/* Counter-invert real media so photos/scans look natural. The OneMark logos
   are NOT counter-inverted on purpose: they're non-transparent PNGs, and
   letting them invert with the page turns their white box dark while
   hue-rotate keeps the brand blue blue. */
html.night-mode:not(:has(.om-fixed-dark)) img:not(.om-logo):not(.om-logo-mark),
html.night-mode:not(:has(.om-fixed-dark)) video,
html.night-mode:not(:has(.om-fixed-dark)) canvas,
html.night-mode:not(:has(.om-fixed-dark)) iframe,
html.night-mode:not(:has(.om-fixed-dark)) .no-night {
  filter: invert(1) hue-rotate(180deg);
  transition: filter .55s ease;
}

/* Safety net for hardcoded/Tailwind-utility table borders (border-slate-*). */
html.night-mode:not(:has(.om-fixed-dark)) table :is(td, th) { border-color: #64748b; }

/* The toggle itself: moon and sun stacked, crossfading with a little spin. */
.om-bar .om-night-toggle { border: 0; background: transparent; cursor: pointer; }
.om-bar .om-night-toggle .om-moon,
.om-bar .om-night-toggle .om-sun {
  position: absolute; inset: 0; margin: auto;
  transition: opacity .45s ease, transform .55s ease;
}
.om-bar .om-night-toggle .om-sun { opacity: 0; transform: rotate(120deg) scale(.3); }
html.night-mode .om-bar .om-night-toggle .om-sun { opacity: 1; transform: rotate(0deg) scale(1); }
html.night-mode .om-bar .om-night-toggle .om-moon { opacity: 0; transform: rotate(-120deg) scale(.3); }

/* ── Tasks boards sidebar + peek popup + boards table ───────────────────────
   Monday-style navigation: a collapsible board list on every board page
   (collapse state on <html> like night mode, so it survives LV patches),
   a "peek" popup that opens another board without leaving this one, and a
   table alternative to the boards-index cards. */
.omt-board-page { display: flex; align-items: flex-start; }
.omt-board-page > .omt-board-main { flex: 1 1 auto; min-width: 0; }

/* Viewport-fit mode (standalone live boards): the page column is exactly the
   viewport minus the 55px brand bar; the main column flexes and the grid takes
   whatever's left, scrolling internally. Toolbar + Settings stay put, the
   pager stays visible under the grid. If content above the grid outgrows the
   window (charts open, deep toolbar), the main column scrolls as a fallback
   instead of clipping. */
/* min-height unset: the base .omt-page min-height:100vh would push the page
   55px past the viewport (the brand bar's height) and re-introduce page scroll. */
.omt-board-page.omt-live-fit { height: calc(100dvh - 55px); min-height: 0; }
.omt-live-fit > .omt-board-main { display: flex; flex-direction: column; height: 100%; overflow: auto; }
.omt-live-fit .omt-live-wrap { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.omt-live-fit .omt-live-tablewrap { flex: 1 1 auto; min-height: 160px; max-height: none; }
.omt-live-fit .omt-boardnav { max-height: 100%; }

.omt-boardnav {
  flex: 0 0 216px; position: sticky; top: 0; max-height: 100vh; overflow-y: auto;
  background: #fff; border-right: 1px solid var(--om-border);
  padding: 14px 10px 20px; align-self: stretch;
}
.omt-boardnav-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 6px 10px;
}
.omt-boardnav-title {
  font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em;
  color: #64748b; text-decoration: none;
}
.omt-boardnav-title:hover { color: var(--om-accent); }
.omt-boardnav-collapse, .omt-boardnav-handle {
  border: 1px solid var(--om-border); background: #fff; color: #64748b;
  border-radius: 8px; width: 24px; height: 24px; line-height: 1; cursor: pointer;
  font-size: 14px; display: inline-flex; align-items: center; justify-content: center;
}
.omt-boardnav-collapse:hover, .omt-boardnav-handle:hover { color: var(--om-accent); border-color: var(--om-accent); }
.omt-boardnav-list { display: flex; flex-direction: column; gap: 1px; }
.omt-boardnav-row { display: flex; align-items: center; border-radius: 8px; }
.omt-boardnav-row:hover { background: #f1f5f9; }
.omt-boardnav-row.is-current { background: color-mix(in srgb, var(--om-accent) 10%, #fff); }
.omt-boardnav-row.is-current .omt-boardnav-name { color: var(--om-accent); font-weight: 600; }
.omt-boardnav-link {
  flex: 1 1 auto; min-width: 0; display: flex; align-items: center; gap: 8px;
  padding: 7px 8px; text-decoration: none; color: #334155; font-size: 13px;
}
.omt-boardnav-dot { width: 8px; height: 8px; border-radius: 50%; flex: 0 0 auto; display: inline-block; }
.omt-boardnav-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-boardnav-peek {
  flex: 0 0 auto; border: 0; background: transparent; color: #94a3b8; cursor: pointer;
  padding: 4px 8px; border-radius: 6px; opacity: 0; transition: opacity .12s;
}
.omt-boardnav-row:hover .omt-boardnav-peek { opacity: 1; }
.omt-boardnav-peek:hover { color: var(--om-accent); }

/* Collapsed state (html.omt-nav-collapsed): sidebar hidden, slim handle shown. */
.omt-boardnav-handle {
  display: none; position: fixed; left: 10px; bottom: 18px; z-index: 40;
  width: 28px; height: 28px; box-shadow: var(--om-shadow-sm);
}
html.omt-nav-collapsed .omt-boardnav { display: none; }
html.omt-nav-collapsed .omt-boardnav-handle { display: inline-flex; }

/* Peek popup — a full embedded board over the current one. */
.omt-peek-scrim { z-index: 70; }
.omt-peek {
  position: fixed; inset: 4vh 4vw; z-index: 71; background: var(--om-bg);
  border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(15,23,42,.5);
  display: flex; flex-direction: column; overflow: hidden;
  animation: omt-fade .18s ease;
}
.omt-peek-head {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 8px 12px; background: #fff; border-bottom: 1px solid var(--om-border);
}
.omt-peek-hint { font-size: 12.5px; color: #64748b; }
.omt-peek-actions { display: flex; align-items: center; gap: 6px; }
.omt-peek-body { flex: 1; overflow-y: auto; min-height: 0; }

/* Boards index — table view */
.omt-boards-tablewrap {
  background: #fff; border: 1px solid var(--om-border); border-radius: 12px;
  overflow-x: auto; margin-top: 4px;
}
.omt-boards-table td { vertical-align: middle; }
.omt-bt-star { width: 34px; text-align: center; }
.omt-bt-starbtn { position: static; font-size: 15px; }
.omt-bt-name {
  display: inline-flex; align-items: center; gap: 8px; font-weight: 600;
  color: var(--om-text); text-decoration: none;
}
.omt-bt-name:hover { color: var(--om-accent); }
.omt-bt-desc { color: #64748b; max-width: 420px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-bt-num { text-align: right; font-variant-numeric: tabular-nums; }
.omt-bt-open { text-align: right; white-space: nowrap; }
/* Folder section header inside the boards table — a slim full-width band, the
   table's answer to the cards view's .omt-folder-section-h. */
.omt-boards-table .omt-bt-folderrow td {
  padding: 7px 12px; background: #f8fafc; border-top: 1px solid var(--om-border);
  color: #475569; font-size: 12px; font-weight: 700; letter-spacing: .01em;
}
.omt-bt-folderrow td svg { vertical-align: -2px; }

@media (max-width: 900px) {
  .omt-boardnav { display: none; }
  .omt-boardnav-handle { display: none !important; }
}

/* Sidebar: search, folders, drag & drop */
.omt-boardnav-search { padding: 0 4px 8px; }
.omt-boardnav-search input {
  width: 100%; border: 1px solid var(--om-border); border-radius: 8px;
  padding: 6px 9px; font-size: 12.5px; background: #f8fafc; outline: none;
}
.omt-boardnav-search input:focus { border-color: var(--om-accent); background: #fff; }
.omt-boardnav-folder { border-radius: 8px; padding: 2px 0 4px; margin-bottom: 2px; }
.omt-boardnav-folderhead {
  display: flex; align-items: center; gap: 6px; padding: 6px 8px 4px;
  color: #64748b; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em;
}
.omt-boardnav-foldername { flex: 1 1 auto; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.omt-boardnav-folderdel {
  border: 0; background: transparent; color: #cbd5e1; cursor: pointer; font-size: 11px;
  padding: 2px 4px; border-radius: 4px; opacity: 0; transition: opacity .12s;
}
.omt-boardnav-folderhead:hover .omt-boardnav-folderdel { opacity: 1; }
.omt-boardnav-folderdel:hover { color: #ef4444; }
/* Move ↑/↓ share the folder-head control styling, but reordering isn't
   destructive — they hover to the accent, not to the delete red. */
.omt-boardnav-foldermove:hover { color: var(--om-accent); }
.omt-boardnav-folder .omt-boardnav-row { margin-left: 10px; }
.omt-boardnav-root { min-height: 28px; border-radius: 8px; }
.omt-dropping { outline: 2px dashed var(--om-accent); outline-offset: -2px; background: color-mix(in srgb, var(--om-accent) 6%, #fff); }
.omt-boardnav-row[draggable="true"] { cursor: grab; }
.omt-boardnav-addfolder {
  margin: 8px 4px 0; border: 1px dashed var(--om-border); background: transparent;
  color: #64748b; font-size: 12px; border-radius: 8px; padding: 6px; cursor: pointer; width: calc(100% - 8px);
}
.omt-boardnav-addfolder:hover { color: var(--om-accent); border-color: var(--om-accent); }
.omt-boardnav-newfolder { display: flex; gap: 6px; padding: 8px 4px 0; }
.omt-boardnav-newfolder input {
  flex: 1; min-width: 0; border: 1px solid var(--om-border); border-radius: 8px;
  padding: 5px 8px; font-size: 12.5px;
}

/* Home dashboard: folder sections (cards) + folder chips (table) */
.omt-folder-section-h {
  display: flex; align-items: center; gap: 7px; margin: 18px 2px 8px;
  color: #475569; font-size: 13px; font-weight: 700;
}
.omt-folder-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: #64748b;
  background: #f1f5f9; border-radius: 6px; padding: 1px 7px; white-space: nowrap;
}

/* AI import modal */
.omt-aiimport {
  position: fixed; inset: 10vh 14vw; z-index: 71; background: #fff;
  border-radius: 14px; box-shadow: 0 30px 70px -20px rgba(15,23,42,.5);
  display: flex; flex-direction: column; overflow: hidden; animation: omt-fade .18s ease;
}
.omt-aiimport-body { flex: 1; overflow-y: auto; padding: 16px; }
.omt-aiimport-actions { display: flex; align-items: center; gap: 10px; margin-top: 12px; }
.omt-aiimport-tablewrap { overflow-x: auto; border: 1px solid var(--om-border); border-radius: 10px; }
.omt-aiimport .omt-dropzone {
  display: flex; align-items: center; justify-content: center; min-height: 120px;
  border: 2px dashed var(--om-border); border-radius: 12px; color: #64748b;
  font-size: 13px; cursor: pointer; padding: 18px;
}
.omt-aiimport .omt-dropzone:hover { border-color: var(--om-accent); color: var(--om-accent); }

/* AI import: editable preview */
.omt-aiimport-table input[type="text"] {
  width: 100%; min-width: 90px; border: 1px solid transparent; border-radius: 6px;
  padding: 3px 6px; font-size: 12.5px; background: transparent;
}
.omt-aiimport-table input[type="text"]:hover { border-color: var(--om-border); }
.omt-aiimport-table input[type="text"]:focus { border-color: var(--om-accent); background: #fff; outline: none; }
.omt-aiimport-skipped { opacity: .38; }
.omt-aiimport-source input {
  border: 1px solid var(--om-border); border-radius: 6px; padding: 3px 8px;
  font-size: 12.5px; margin-left: 4px; min-width: 220px;
}

/* ══════════════════════════════════════════════════════════════════════════
   DATA WIZARD — "The Observatory"
   ─────────────────────────────────────────────────────────────────────────
   The wizard is the one surface in OneMark that is allowed to be a THEATRE.
   Everywhere else the job is to get out of the way; here the user is waiting
   3-15s while a model writes SQL and a warehouse answers it, and that dead
   time is the best place in the product to show what's happening.

   Rules that keep it from being merely annoying:
     · the console is ALWAYS dark, whatever the page theme — it's a night sky,
       not a light/dark variant, so it never needs two palettes
     · every animation is decorative; nothing gates an interaction on one
     · prefers-reduced-motion switches the whole thing off (bottom of file)
   ══════════════════════════════════════════════════════════════════════════ */

:root {
  --dw-void: #08040f;
  --dw-deep: #150a2e;
  --dw-panel: #1b1035;
  --dw-edge: rgba(168, 85, 247, .30);
  --dw-glow: #a855f7;
  --dw-cyan: #22d3ee;
  --dw-gold: #fbbf24;
  --dw-ink: #ede9fe;
  --dw-dim: #a78bfa;
}

.dw-stage { position: relative; min-height: 100vh; background: var(--dw-void); overflow: clip; }

/* ── the sky ───────────────────────────────────────────────────────────── */
.dw-sky { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }

.dw-sky::before, .dw-sky::after {
  content: ""; position: absolute; inset: -50%;
  background-repeat: repeat;
  background-image:
    radial-gradient(1.4px 1.4px at 20% 30%, #fff9, transparent 60%),
    radial-gradient(1.2px 1.2px at 70% 12%, #fff7, transparent 60%),
    radial-gradient(1.6px 1.6px at 45% 68%, #e9d5ffcc, transparent 60%),
    radial-gradient(1px 1px at 88% 54%, #fff6, transparent 60%),
    radial-gradient(1.3px 1.3px at 12% 82%, #a5f3fcaa, transparent 60%),
    radial-gradient(1px 1px at 62% 90%, #fff5, transparent 60%);
  background-size: 420px 420px;
  animation: dwDrift 240s linear infinite;
}
.dw-sky::after { background-size: 700px 700px; opacity: .55; animation-duration: 420s; animation-direction: reverse; }

@keyframes dwDrift { to { transform: translate3d(-420px, -420px, 0); } }

/* a slow aurora behind everything */
.dw-aurora {
  position: absolute; left: 50%; top: -30vh; width: 140vw; height: 90vh;
  transform: translateX(-50%);
  background:
    radial-gradient(50% 50% at 30% 50%, rgba(168,85,247,.28), transparent 70%),
    radial-gradient(45% 45% at 70% 40%, rgba(34,211,238,.20), transparent 70%),
    radial-gradient(40% 40% at 55% 70%, rgba(251,191,36,.10), transparent 70%);
  filter: blur(40px); pointer-events: none;
  animation: dwAurora 26s ease-in-out infinite alternate;
}
@keyframes dwAurora {
  from { transform: translateX(-52%) scale(1) rotate(-2deg); opacity: .75; }
  to   { transform: translateX(-48%) scale(1.12) rotate(2deg); opacity: 1; }
}

.dw-wrap { position: relative; z-index: 1; display: flex; gap: 22px; padding: 26px 28px 60px; }

/* ── the title ─────────────────────────────────────────────────────────── */
.dw-hero { text-align: center; padding: 26px 0 30px; }

.dw-title {
  margin: 0; font-size: clamp(30px, 4.2vw, 54px); font-weight: 800; letter-spacing: .14em;
  text-transform: uppercase; color: #fff;
  background: linear-gradient(92deg, #fff 10%, var(--dw-glow) 38%, var(--dw-cyan) 62%, #fff 92%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 26px rgba(168,85,247,.45));
  animation: dwSheen 9s ease-in-out infinite;
}
@keyframes dwSheen { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.dw-sub { margin: 12px auto 0; max-width: 640px; color: var(--dw-dim); font-size: 14px; line-height: 1.6; }
.dw-sigil { display: inline-block; animation: dwSpin 18s linear infinite; }
@keyframes dwSpin { to { transform: rotate(360deg); } }

/* ── the console ───────────────────────────────────────────────────────── */
.dw-console {
  position: relative; border-radius: 20px; padding: 3px;
  background: linear-gradient(135deg, rgba(168,85,247,.75), rgba(34,211,238,.55), rgba(251,191,36,.4), rgba(168,85,247,.75));
  background-size: 300% 300%;
  animation: dwRing 14s ease infinite;
  box-shadow: 0 24px 70px -20px rgba(88,28,135,.85), 0 0 0 1px rgba(168,85,247,.18);
}
@keyframes dwRing { 0%,100% { background-position: 0% 50%; } 50% { background-position: 100% 50%; } }

.dw-console-in {
  border-radius: 17px; background: linear-gradient(180deg, var(--dw-panel), var(--dw-deep));
  padding: 20px 22px;
}

.dw-askrow { display: flex; gap: 12px; align-items: stretch; }

.dw-input {
  /* min-width:0 or the flex row can't shrink it below its intrinsic width,
     which shoved the clarify form's "Answer" button off a phone screen. */
  flex: 1; min-width: 0;
  background: rgba(8,4,15,.72); border: 1px solid var(--dw-edge); border-radius: 13px;
  color: var(--dw-ink); font-size: 17px; padding: 15px 18px; letter-spacing: .01em;
  transition: box-shadow .25s, border-color .25s, background .25s;
}
.dw-input::placeholder { color: #7c6aa8; }
.dw-input:focus {
  outline: none; border-color: var(--dw-glow); background: rgba(8,4,15,.9);
  box-shadow: 0 0 0 4px rgba(168,85,247,.18), 0 0 34px rgba(168,85,247,.35) inset;
}

.dw-cast {
  border: 0; border-radius: 13px; padding: 0 26px; cursor: pointer; white-space: nowrap;
  font-weight: 700; font-size: 15px; letter-spacing: .07em; text-transform: uppercase; color: #fff;
  background: linear-gradient(135deg, #7c3aed, #a855f7 55%, #22d3ee);
  background-size: 200% 200%;
  box-shadow: 0 10px 30px -8px rgba(168,85,247,.85);
  transition: transform .18s cubic-bezier(.34,1.56,.64,1), box-shadow .2s, filter .2s;
}
.dw-cast:hover:not(:disabled) { transform: translateY(-2px) scale(1.03); box-shadow: 0 16px 40px -10px rgba(168,85,247,1); background-position: 100% 50%; }
.dw-cast:active:not(:disabled) { transform: translateY(0) scale(.99); }
.dw-cast:disabled { filter: grayscale(.4) brightness(.8); cursor: progress; }

/* ── casting: the wait, made into the show ─────────────────────────────── */
.dw-casting { margin-top: 20px; display: flex; gap: 22px; align-items: center; }

.dw-orb { position: relative; width: 74px; height: 74px; flex: none; }
.dw-orb i {
  position: absolute; inset: 0; border-radius: 50%; border: 2px solid transparent;
  border-top-color: var(--dw-glow); border-right-color: rgba(168,85,247,.25);
  animation: dwSpin 1.5s linear infinite;
}
.dw-orb i:nth-child(2) { inset: 10px; border-top-color: var(--dw-cyan); animation-duration: 2.1s; animation-direction: reverse; }
.dw-orb i:nth-child(3) { inset: 20px; border-top-color: var(--dw-gold); animation-duration: 2.9s; }
.dw-orb b {
  position: absolute; inset: 28px; border-radius: 50%; background: radial-gradient(circle, #fff, var(--dw-glow) 60%, transparent);
  animation: dwPulse 1.7s ease-in-out infinite;
}
@keyframes dwPulse { 0%,100% { transform: scale(.8); opacity: .75; } 50% { transform: scale(1.25); opacity: 1; } }

.dw-steps { list-style: none; margin: 0; padding: 0; display: grid; gap: 7px; }
.dw-steps li {
  color: #6d5f92; font-size: 13.5px; letter-spacing: .04em; display: flex; gap: 10px; align-items: center;
  opacity: 0; animation: dwStep .5s ease forwards;
}
.dw-steps li::before {
  content: "◆"; color: var(--dw-glow); font-size: 10px; filter: drop-shadow(0 0 6px var(--dw-glow));
}
.dw-steps li:nth-child(1) { animation-delay: .05s; }
.dw-steps li:nth-child(2) { animation-delay: 1.1s; }
.dw-steps li:nth-child(3) { animation-delay: 2.6s; }
.dw-steps li:nth-child(4) { animation-delay: 4.4s; }
@keyframes dwStep { from { opacity: 0; transform: translateX(-10px); } to { opacity: 1; transform: none; color: var(--dw-ink); } }

/* ── the answer ────────────────────────────────────────────────────────── */
.dw-reveal { animation: dwReveal .6s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dwReveal { from { opacity: 0; transform: translateY(14px) scale(.99); filter: blur(6px); } to { opacity: 1; transform: none; filter: none; } }

.dw-explain { color: var(--dw-ink); font-size: 15px; line-height: 1.65; margin: 0; }
.dw-window { color: var(--dw-ink); opacity: .8; font-size: 13px; margin: 6px 0 0; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }

.dw-chip {
  display: inline-flex; align-items: center; gap: 6px; border-radius: 999px; padding: 5px 12px;
  font-size: 11.5px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase;
  border: 1px solid var(--dw-edge); color: var(--dw-dim); background: rgba(168,85,247,.10);
}
.dw-chip:hover { color: var(--dw-ink); border-color: var(--dw-glow); }

.dw-sql {
  margin: 0; border-radius: 13px; padding: 15px 17px; overflow-x: auto;
  background: #05030b; border: 1px solid var(--dw-edge); color: #c4b5fd;
  font-size: 12.5px; line-height: 1.65;
  animation: dwReveal .45s ease both;
}

.dw-grid { border: 1px solid var(--dw-edge); border-radius: 14px; overflow: auto; max-height: 65vh; background: rgba(8,4,15,.55); }
.dw-grid table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
.dw-grid th {
  position: sticky; top: 0; z-index: 2; text-align: left; white-space: nowrap;
  padding: 11px 14px; font-size: 11px; letter-spacing: .09em; text-transform: uppercase;
  color: var(--dw-dim); background: #16092e; border-bottom: 1px solid var(--dw-edge);
}
.dw-grid td { padding: 9px 14px; color: #ddd6fe; border-top: 1px solid rgba(168,85,247,.10); white-space: nowrap; }
.dw-grid tbody tr { animation: dwRow .45s ease both; animation-delay: calc(var(--i, 0) * 26ms); }
.dw-grid tbody tr:hover td { background: rgba(168,85,247,.10); color: #fff; }
@keyframes dwRow { from { opacity: 0; transform: translateY(7px); } to { opacity: 1; transform: none; } }

/* overflow-wrap:anywhere because the result footer lists the tables that
   answered the question — single unbreakable tokens like
   `bronze.markshomecaredb_dbo_patient_status_change_activity` ran off the
   right edge of a phone (measured 357px of content in a 324px box). */
.dw-foot { color: #6d5f92; font-size: 12px; letter-spacing: .03em; overflow-wrap: anywhere; }

/* ── crystals (the stats) ──────────────────────────────────────────────── */
.dw-crystals { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: 14px; }
.dw-crystal {
  position: relative; border-radius: 15px; padding: 16px 18px; overflow: hidden;
  background: linear-gradient(160deg, rgba(27,16,53,.95), rgba(11,6,24,.95));
  border: 1px solid var(--dw-edge);
  transition: transform .25s cubic-bezier(.34,1.56,.64,1), box-shadow .25s, border-color .25s;
}
.dw-crystal::after {
  content: ""; position: absolute; inset: 0; opacity: 0; transition: opacity .3s;
  background: radial-gradient(70% 60% at 50% 0%, rgba(168,85,247,.35), transparent 70%);
}
.dw-crystal:hover { transform: translateY(-4px); border-color: var(--dw-glow); box-shadow: 0 18px 40px -18px rgba(168,85,247,.9); }
.dw-crystal:hover::after { opacity: 1; }
.dw-crystal-k { position: relative; font-size: 10.5px; letter-spacing: .13em; text-transform: uppercase; color: var(--dw-dim); }
.dw-crystal-v { position: relative; margin-top: 6px; font-size: 27px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; text-shadow: 0 0 22px rgba(168,85,247,.55); }
.dw-crystal-s { position: relative; font-size: 11.5px; color: #6d5f92; }

/* ── the rail ──────────────────────────────────────────────────────────── */
.dw-rail { width: 260px; flex: none; }
.dw-rail-h { font-size: 10.5px; letter-spacing: .16em; text-transform: uppercase; color: var(--dw-dim); }
.dw-find {
  width: 100%; background: rgba(8,4,15,.7); border: 1px solid var(--dw-edge); border-radius: 10px;
  color: var(--dw-ink); font-size: 12.5px; padding: 9px 11px;
}
.dw-find:focus { outline: none; border-color: var(--dw-glow); box-shadow: 0 0 0 3px rgba(168,85,247,.15); }

.dw-scroll {
  width: 100%; text-align: left; cursor: pointer; margin-top: 8px; padding: 10px 12px;
  border-radius: 11px; border: 1px solid rgba(168,85,247,.16); background: rgba(27,16,53,.6);
  color: #cbb9f5; font-size: 12.5px; line-height: 1.45;
  transition: transform .18s, border-color .18s, background .18s;
}
.dw-scroll:hover { transform: translateX(3px); border-color: var(--dw-glow); background: rgba(168,85,247,.14); color: #fff; }
.dw-scroll-tag { display: inline-block; margin-top: 6px; font-size: 9.5px; letter-spacing: .08em; text-transform: uppercase; padding: 2px 7px; border-radius: 999px; }
.dw-tag-ok    { background: rgba(16,185,129,.16); color: #6ee7b7; }
.dw-tag-ask   { background: rgba(34,211,238,.16); color: #67e8f9; }
.dw-tag-no    { background: rgba(251,191,36,.16); color: #fcd34d; }
.dw-tag-err   { background: rgba(244,63,94,.16); color: #fda4af; }

.dw-iconbtn { color: var(--dw-dim); background: none; border: 0; cursor: pointer; padding: 4px; border-radius: 8px; }
.dw-iconbtn:hover { color: #fff; background: rgba(168,85,247,.16); }

/* ── panels (clarify / report / oracle) ────────────────────────────────── */
.dw-panel { border-radius: 14px; padding: 15px 17px; border: 1px solid var(--dw-edge); background: rgba(27,16,53,.72); color: var(--dw-ink); animation: dwReveal .5s ease both; }
.dw-panel-sky   { border-color: rgba(34,211,238,.45); background: rgba(8,47,73,.5); }
.dw-panel-gold  { border-color: rgba(251,191,36,.45); background: rgba(69,45,4,.45); }
.dw-panel-good  { border-color: rgba(16,185,129,.45); background: rgba(4,55,42,.45); }
.dw-panel-bad   { border-color: rgba(244,63,94,.45); background: rgba(76,5,25,.45); }
.dw-panel h3 { margin: 0 0 4px; font-size: 14px; font-weight: 700; letter-spacing: .02em; }
.dw-panel p { margin: 0; font-size: 13px; line-height: 1.6; color: #ddd6fe; }

.dw-empty { text-align: center; padding: 50px 20px; color: var(--dw-dim); border: 1px dashed var(--dw-edge); border-radius: 16px; }

/* ── the oracle (risk analysis) ────────────────────────────────────────── */
.dw-oracle-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.dw-verdict {
  border-radius: 13px; padding: 13px 16px; font-size: 13.5px; line-height: 1.55;
  border-left: 3px solid var(--dw-glow); background: rgba(168,85,247,.10); color: var(--dw-ink);
}
.dw-verdict-good { border-left-color: #34d399; background: rgba(16,185,129,.12); }
.dw-verdict-bad  { border-left-color: #fb7185; background: rgba(244,63,94,.12); }
.dw-verdict-warn { border-left-color: var(--dw-gold); background: rgba(251,191,36,.12); }

.dw-meters { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr)); gap: 12px; }
.dw-meter { border: 1px solid var(--dw-edge); border-radius: 12px; padding: 12px 14px; background: rgba(8,4,15,.5); }
.dw-meter-k { font-size: 10px; letter-spacing: .12em; text-transform: uppercase; color: var(--dw-dim); }
.dw-meter-v { font-size: 22px; font-weight: 800; color: #fff; font-variant-numeric: tabular-nums; }
.dw-meter-s { font-size: 11px; color: #6d5f92; }

.dw-bar { height: 5px; border-radius: 999px; background: rgba(168,85,247,.16); overflow: hidden; margin-top: 6px; }
.dw-bar > span { display: block; height: 100%; border-radius: 999px; background: linear-gradient(90deg, var(--dw-glow), var(--dw-cyan)); animation: dwFill .9s cubic-bezier(.2,.8,.2,1) both; }
@keyframes dwFill { from { width: 0 !important; } }

.dw-why { display: flex; flex-wrap: wrap; gap: 5px; }
.dw-why span { font-size: 10.5px; padding: 2px 8px; border-radius: 999px; background: rgba(34,211,238,.12); color: #a5f3fc; border: 1px solid rgba(34,211,238,.25); }
.dw-why-text { margin: 4px 0 0; font-size: 11.5px; line-height: 1.45; color: #94a3b8; max-width: 46ch; }

/* Everything above is decoration. Turn it all off on request. */
@media (prefers-reduced-motion: reduce) {
  .dw-sky::before, .dw-sky::after, .dw-aurora, .dw-title, .dw-sigil, .dw-console,
  .dw-orb i, .dw-orb b, .dw-steps li, .dw-reveal, .dw-sql, .dw-grid tbody tr,
  .dw-panel, .dw-bar > span {
    animation: none !important;
  }
  .dw-steps li { opacity: 1; }
  .dw-cast:hover:not(:disabled), .dw-crystal:hover, .dw-scroll:hover { transform: none; }
}

/* The brand bar is a light strip everywhere else; over the Observatory it has
   to belong to the night sky, or the page looks like two products stapled
   together. Scoped with :has() so only this app is affected. */
body:has(.dw-stage) .om-bar {
  background: linear-gradient(180deg, #120a26, #0b0618);
  border-bottom: 1px solid rgba(168, 85, 247, .22);
  box-shadow: 0 10px 30px -18px rgba(88, 28, 135, .9);
}
body:has(.dw-stage) .om-bar,
body:has(.dw-stage) .om-bar a,
body:has(.dw-stage) .om-bar button,
body:has(.dw-stage) .om-appname,
body:has(.dw-stage) .om-switch-label { color: #ede9fe; }
body:has(.dw-stage) .om-bar .om-divider { background: rgba(168, 85, 247, .3); }
body:has(.dw-stage) { background: var(--dw-void); }
/* …and the bar's own chips, which carry their own light backgrounds. */
body:has(.dw-stage) .om-bar .om-switch-toggle,
body:has(.dw-stage) .om-bar .om-user,
body:has(.dw-stage) .om-bar .om-userbadge,
body:has(.dw-stage) .om-bar .om-bell,
body:has(.dw-stage) .om-bar .om-logout {
  background: rgba(168, 85, 247, .12);
  border-color: rgba(168, 85, 247, .28);
  color: #ede9fe;
}
body:has(.dw-stage) .om-bar .om-switch-toggle:hover,
body:has(.dw-stage) .om-bar .om-bell:hover,
body:has(.dw-stage) .om-bar .om-logout:hover { background: rgba(168, 85, 247, .24); }

/* The wordmark ships as a flat RGB PNG with a baked-in WHITE background (no
   alpha channel at all) — invisible on the light bar everywhere else, a white
   slab over the Observatory. `onemark_logo_knockout.png` is the same artwork
   rendered white-on-transparent (alpha taken from the original's luminance, so
   the anti-aliasing survives). Swapped in with `content:` so the shared header
   component is untouched and every other app keeps the colour original. */
body:has(.dw-stage) .om-logo { content: url("/images/onemark_logo_knockout-3867689132f6ffb366bbe4d92ab7f7ce.png?vsn=d"); }
/* The role switcher is built from Tailwind utilities rather than an om-* class,
   so it's reached structurally and needs !important to beat them. Scoped to the
   Observatory; every other app keeps the white pill. */
body:has(.dw-stage) .om-bar .om-user button {
  background: rgba(168, 85, 247, .14) !important;
  border-color: rgba(168, 85, 247, .3) !important;
  color: #ede9fe !important;
  box-shadow: none !important;
}
body:has(.dw-stage) .om-bar .om-user button:hover { background: rgba(168, 85, 247, .26) !important; }
body:has(.dw-stage) .om-username { color: #c4b5fd; }
/* "Measuring…" — the backtest lands a minute after the ranking, so the space
   it will occupy has to look like work in progress, not like an empty slot. */
.dw-measuring {
  display: inline-block; width: 11px; height: 11px; margin-right: 8px; border-radius: 50%;
  border: 2px solid rgba(168, 85, 247, .3); border-top-color: var(--dw-glow);
  animation: dwSpin .9s linear infinite; vertical-align: -1px;
}
@media (prefers-reduced-motion: reduce) { .dw-measuring { animation: none; } }

/* ── Data Wizard: provenance + the correction loop ─────────────────────── */
.dw-why-panel {
  border-left: 2px solid rgba(168, 85, 247, .5); border-radius: 0 12px 12px 0;
  background: rgba(168, 85, 247, .07); padding: 13px 16px; animation: dwReveal .35s ease both;
}
.dw-why-label {
  display: inline-block; font-size: 9.5px; letter-spacing: .13em; text-transform: uppercase;
  color: var(--dw-glow); margin-right: 8px;
}
.dw-why-read { margin: 0; color: var(--dw-ink); font-size: 13.5px; line-height: 1.6; }
.dw-why-steps { margin: 10px 0 0; padding-left: 20px; color: #cbb9f5; font-size: 13px; line-height: 1.65; }
.dw-why-steps li { margin: 2px 0; }
.dw-why-steps li::marker { color: var(--dw-glow); font-variant-numeric: tabular-nums; }
.dw-why-assume { margin-top: 11px; }
.dw-why-assume ul { margin: 5px 0 0; padding-left: 18px; color: #fcd34d; font-size: 12.5px; line-height: 1.6; }
.dw-why-assume li::marker { color: var(--dw-gold); }

.dw-fix { margin-top: 4px; }
.dw-fix-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.dw-fix-chip {
  display: inline-flex; align-items: center; gap: 7px; font-size: 11.5px; line-height: 1.4;
  padding: 4px 6px 4px 11px; border-radius: 999px;
  background: rgba(34, 211, 238, .12); color: #a5f3fc; border: 1px solid rgba(34, 211, 238, .3);
}
.dw-fix-chip button {
  border: 0; background: rgba(34, 211, 238, .18); color: #cffafe; cursor: pointer;
  width: 17px; height: 17px; border-radius: 50%; line-height: 1; font-size: 12px;
}
.dw-fix-chip button:hover { background: rgba(244, 63, 94, .35); color: #fff; }
.dw-fix-row { display: flex; gap: 8px; align-items: center; }
.dw-input-sm { font-size: 13px; padding: 9px 13px; }

/* The answer header: explanation on the left, its action chips on the right.
   The chips were `shrink-0`, so all seven claimed their full 985px at every
   width — clipped off a phone entirely, and at 1440px they left the
   explanation (the answer itself) just 90px. Letting them wrap costs the
   desktop nothing and makes the row possible on a phone. */
.dw-answer-head {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.dw-answer-acts {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 8px;
}

/* ── Data Wizard: phones and tablets ───────────────────────────────────────
   The page was built desktop-only — `.dw-wrap` is a flex ROW whose first
   child is a fixed 260px rail, so at 390px the rail plus padding and gap ate
   310px and the main column started off-screen. Measured before this block:
   the ask input sat at x=335 and the Ask button at x=650, both CLIPPED by
   `.dw-stage { overflow: clip }` rather than scrollable — the primary control
   of the app was unreachable on a phone, silently.

   Stack instead of squeeze, and put the console FIRST: `order: 2` moves the
   history rail (and the collapsed "show recent" chevron) below the answer,
   so the question box is the first thing under the title. No markup change,
   so the desktop layout is untouched above the breakpoint.

   860px = 260 rail + 22 gap + 56 padding + ~520 usable main. */
@media (max-width: 860px) {
  .dw-wrap {
    flex-direction: column;
    gap: 16px;
    padding: 18px 16px 48px;
  }

  .dw-rail,
  .dw-wrap > .dw-iconbtn {
    order: 2;
  }

  .dw-rail { width: auto; }
  .dw-wrap > .dw-iconbtn { align-self: flex-start; }

  .dw-hero { padding: 12px 0 18px; }
  .dw-console-in { padding: 16px 14px; }

  /* Input above button, both full width — side by side leaves the input too
     narrow to read back a long question. */
  .dw-askrow { flex-direction: column; }
  .dw-cast { padding: 15px 26px; }

  .dw-fix-row { flex-wrap: wrap; }
  .dw-grid { max-height: 60vh; }

  /* Left-aligned on a phone: right-aligned chips leave a ragged left edge
     against everything else on the page. */
  .dw-answer-acts { justify-content: flex-start; }
}

@media (max-width: 520px) {
  .dw-title { font-size: 26px; letter-spacing: .08em; }
  .dw-sub { font-size: 13.5px; }
  .dw-crystals { grid-template-columns: repeat(auto-fit, minmax(118px, 1fr)); gap: 10px; }
  .dw-crystal { padding: 13px 14px; }
  .dw-crystal-v { font-size: 23px; }
  .dw-empty { padding: 34px 16px; }
  .dw-why-text { max-width: none; }
}

/* Touch: the icon buttons measured 24×32, well under the 44px target, and
   any input under 16px makes iOS Safari zoom the whole page on focus — which
   on a page with `overflow: clip` strands the user sideways. */
@media (hover: none), (pointer: coarse) {
  /* min-* rather than padding so it clamps the collapsed toggle too — that
     one carries a Tailwind `h-9` (36px) a padding bump can't beat. */
  .dw-iconbtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 44px;
    min-height: 44px;
    padding: 9px;
  }

  .dw-chip { min-height: 40px; padding: 9px 14px; }
  .dw-scroll { padding: 12px 13px; }
  .dw-find,
  .dw-input-sm { font-size: 16px; }
  .dw-fix-chip button { width: 22px; height: 22px; font-size: 14px; }
}

/* URL-fed column config (Columns settings → Configure). A column can declare a
   form-URL query param; whatever the link carries under it is stored here.
   Same inline label+control shape as .omt-col-default directly above it. */
.omt-col-urlparam { display: flex; align-items: center; gap: 8px; }
.omt-col-urlparam-l { display: inline-flex; align-items: center; gap: 4px; font-size: 11.5px; font-weight: 500; color: var(--om-text-muted); white-space: nowrap; }
.omt-col-urlparam input { flex: 1 1 200px; min-width: 0; }
.omt-col-urlparam-hint { font-size: 11.5px; color: var(--om-text-muted); white-space: nowrap; }
.omt-col-urlparam-hint code { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; background: #f1f5f9; border-radius: 4px; padding: 1px 5px; }

/* ── Global search (header) ──────────────────────────────────────────────
   The box sits between the app name and the right-side controls, compact
   until focused, then grows (the "dynamically sized" bar). The dropdown is
   Tailwind-styled inside the LiveComponent; only the bar-level chrome and
   the width transition live here, next to the rest of the om-bar styles.
   Night mode needs nothing: the global inversion covers light-styled UI. */
.om-bar .om-osearch-slot { flex: 1 1 auto; display: flex; justify-content: center; min-width: 0; padding: 0 12px; }
.om-osearch { position: relative; width: 100%; max-width: 230px; transition: max-width .18s ease; }
.om-osearch:focus-within, .om-osearch[data-open="true"] { max-width: min(480px, 46vw); }
.om-osearch-box {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid #e2e8f0; border-radius: 9999px; background: #f8fafc;
  padding: 5px 12px;
}
.om-osearch:focus-within .om-osearch-box {
  background: #fff; border-color: rgba(15, 118, 110, .35);
  box-shadow: 0 0 0 3px rgba(15, 118, 110, .08);
}
.om-osearch-box input {
  border: 0; outline: none; background: transparent;
  font-size: 13px; width: 100%; min-width: 0; color: #0f172a; padding: 0;
}
.om-osearch-box input:focus { outline: none; box-shadow: none; }
.om-osearch-box input::placeholder { color: #94a3b8; }
.om-osearch-drop {
  position: absolute; top: calc(100% + 8px); left: 50%; transform: translateX(-50%);
  width: min(720px, 94vw); background: #fff;
  border: 1px solid #e2e8f0; border-radius: 14px;
  box-shadow: 0 18px 50px -12px rgba(2, 6, 23, .25);
  z-index: 95; overflow: hidden;
}
@media (max-width: 760px) {
  .om-bar .om-osearch-slot { display: none; } /* phones keep the compact bar */
}

/* ── Vantage ──────────────────────────────────────────────────────────────
   A KPI tile, and the number on it. The flash animation is what makes a
   refresh visible: a number that changes silently on a wall display is a
   number nobody notices changed. */
.vantage-tile {
  display: block; padding: 16px; border-radius: 12px; background: #fff;
  border: 1px solid #e2e8f0; transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vantage-tile:hover { border-color: #c4b5fd; box-shadow: 0 6px 20px rgba(15,23,42,.07); transform: translateY(-1px); }
.vantage-number { line-height: 1.1; letter-spacing: -.02em; }

@keyframes vantage-pop {
  0%   { transform: scale(1);    }
  28%  { transform: scale(1.11); }
  100% { transform: scale(1);    }
}
@keyframes vantage-tint-good { 0%,55% { color: #059669; } 100% { color: #0f172a; } }
@keyframes vantage-tint-bad  { 0%,55% { color: #e11d48; } 100% { color: #0f172a; } }
@keyframes vantage-tint-flat { 0%,55% { color: #7c3aed; } 100% { color: #0f172a; } }

/* Every one of these carries BOTH animations, and all three are written at the
   same specificity (.vantage-number.vantage-flash-*). A shorter `.vantage-flash-good`
   selector here loses to the two-class rule above it and silently drops the
   tint — the pop still plays, so it looks like it is working. */
.vantage-number.vantage-flash,
.vantage-number.vantage-flash-good,
.vantage-number.vantage-flash-bad { transform-origin: left center; }

.vantage-number.vantage-flash-good {
  animation: vantage-pop 1.1s cubic-bezier(.22,1,.36,1), vantage-tint-good 1.6s ease-out;
}
.vantage-number.vantage-flash-bad {
  animation: vantage-pop 1.1s cubic-bezier(.22,1,.36,1), vantage-tint-bad 1.6s ease-out;
}
.vantage-number.vantage-flash {
  animation: vantage-pop 1.1s cubic-bezier(.22,1,.36,1), vantage-tint-flat 1.6s ease-out;
}

/* A request for less motion is a request, not a preference to weigh. The tint
   still lands, so the change is still legible; only the movement goes. */
@media (prefers-reduced-motion: reduce) {
  .vantage-tile:hover { transform: none; }
  .vantage-number.vantage-flash { animation-name: vantage-tint-flat; }
  .vantage-number.vantage-flash-good { animation-name: vantage-tint-good; }
  .vantage-number.vantage-flash-bad { animation-name: vantage-tint-bad; }
}
.vantage-tile-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 26px; height: 26px; border-radius: 8px;
  background: #f5f3ff; color: #7c3aed;
}

/* ── Vantage dashboards ───────────────────────────────────────────────────
   A twelve-column grid. Cards animate in on load and settle after a resize,
   because a dashboard that rearranges itself instantly just looks broken —
   the motion is what tells you the thing you clicked is the thing that moved. */
.vantage-grid { align-items: start; }

.vantage-card {
  /* A flex column so the body can grow into the card's height. With `display:
     block` and only a min-height, a taller card was just a taller empty box —
     the "sea of white" under a full-width number. */
  display: flex; flex-direction: column;
  padding: 16px; border-radius: 12px; background: #fff;
  border: 1px solid #e2e8f0;
  /* `backwards`, not `both`: `both` pins the final frame forward forever, which
     leaves a transform on the element and makes it a containing block for
     anything positioned inside it. */
  animation: vantage-card-in .42s cubic-bezier(.22,1,.36,1) backwards;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vantage-card:hover { border-color: #c4b5fd; box-shadow: 0 8px 24px rgba(15,23,42,.08); }

/* Stagger the entrance across the first row and a bit. Past that it is just
   latency for no benefit, so the delay stops climbing. */
.vantage-card:nth-child(1) { animation-delay: 0ms; }
.vantage-card:nth-child(2) { animation-delay: 40ms; }
.vantage-card:nth-child(3) { animation-delay: 80ms; }
.vantage-card:nth-child(4) { animation-delay: 120ms; }
.vantage-card:nth-child(5) { animation-delay: 160ms; }
.vantage-card:nth-child(n+6) { animation-delay: 200ms; }

@keyframes vantage-card-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to   { opacity: 1; transform: none; }
}

/* Row units, so a row lines up whatever is inside the cards. */
.vantage-card--h1 { min-height: 132px; }
.vantage-card--h2 { min-height: 224px; }
.vantage-card--h3 { min-height: 316px; }
.vantage-card--h4 { min-height: 408px; }

/* The size controls stay out of the way until the card is under the pointer —
   a dashboard people read should not look like a dashboard people edit. */
.vantage-card-tools { display: flex; gap: 2px; opacity: 0; transition: opacity .15s ease; }
.vantage-card:hover .vantage-card-tools, .vantage-card:focus-within .vantage-card-tools { opacity: 1; }

.vantage-size {
  min-width: 22px; height: 22px; border-radius: 6px; border: 1px solid #e2e8f0;
  background: #fff; color: #64748b; font-size: 11px; line-height: 1;
  display: inline-flex; align-items: center; justify-content: center;
  transition: background .15s ease, color .15s ease, border-color .15s ease;
}
.vantage-size:hover { background: #f1f5f9; color: #0f172a; }
.vantage-size.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.vantage-size--danger:hover { background: #fef2f2; border-color: #fecaca; color: #b91c1c; }

/* Dragging: the card being moved fades and lifts, the gap it will land in is
   shown by the neighbours sliding, not by a placeholder box. */
.vantage-card.is-dragging { opacity: .45; transform: scale(.98) rotate(-.4deg); cursor: grabbing; }
.vantage-card.is-drop-target { border-color: #8b5cf6; box-shadow: 0 0 0 3px rgba(139,92,246,.14); }
.vantage-grid.is-sorting .vantage-card { transition: transform .2s cubic-bezier(.22,1,.36,1); }

.vantage-avatar {
  width: 28px; height: 28px; border-radius: 999px; border: 2px solid #fff;
  background: #ede9fe; color: #5b21b6; font-size: 10px; font-weight: 700;
  display: inline-flex; align-items: center; justify-content: center;
}
.vantage-avatar--more { background: #f1f5f9; color: #64748b; }

@media (prefers-reduced-motion: reduce) {
  .vantage-card { animation: none; }
  .vantage-grid.is-sorting .vantage-card { transition: none; }
  .vantage-card:hover { transform: none; }
}
.vantage-dashboard-card {
  display: block; padding: 14px 16px; border-radius: 12px; background: #fff;
  border: 1px solid #e2e8f0;
  transition: border-color .18s ease, box-shadow .18s ease, transform .18s ease;
}
.vantage-dashboard-card:hover { border-color: #c4b5fd; box-shadow: 0 6px 18px rgba(15,23,42,.06); transform: translateY(-1px); }
@media (prefers-reduced-motion: reduce) { .vantage-dashboard-card:hover { transform: none; } }
.vantage-tag {
  display: inline-flex; align-items: center; border-radius: 999px;
  background: #f1f5f9; color: #475569; padding: 1px 7px;
  font-size: 10px; font-weight: 600; letter-spacing: .01em;
}
.vantage-tag--all { background: #ede9fe; color: #5b21b6; }


/* ── Vantage marks ────────────────────────────────────────────────────────
   Every mark is server-rendered SVG or plain elements, so LiveView patches it
   like any other markup and the test suite can read it. No canvas on the grid. */
.vantage-card-body { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; }
.vantage-mark { margin-top: auto; }

/* The honesty furniture. Four different things can be true of a card and each
   gets its own sentence — a shared "incomplete data" string would let a
   truncated axis hide behind a missing period. */
.vantage-cardnote { margin-top: 6px; font-size: 10px; line-height: 1.35; color: #94a3b8; }

/* The freshness line at the foot of a card: how often it refreshes on the
   left, when it last did on the right. Pinned to the bottom so a row of cards
   (the body above it grows) reads as one line of timestamps, and quiet until something is wrong — then
   the words change as well as the colour. */
.vantage-fresh {
  margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1f5f9;
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  font-size: 11px; line-height: 1.3; color: #94a3b8;
}
.vantage-fresh-cadence { display: inline-flex; align-items: center; gap: 4px; min-width: 0; color: #64748b; }
.vantage-fresh-when { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.vantage-fresh-when--overdue { color: #b45309; font-weight: 500; }
.vantage-fresh-when--failed { color: #be123c; font-weight: 500; }
.vantage-fresh-when--never { color: #94a3b8; font-style: italic; }
.vantage-fresh-dot { width: 6px; height: 6px; border-radius: 999px; background: currentColor; }

.vantage-columns { display: flex; align-items: flex-end; gap: 2px; width: 100%; }
.vantage-column {
  position: relative; flex: 1 1 0; height: 100%; min-width: 2px;
  display: flex; align-items: flex-end;
  /* The axis, so an unanswered period still shows WHERE it would have been. */
  border-bottom: 1px solid #e2e8f0;
}
.vantage-column-fill { display: block; width: 100%; background: #8b5cf6; border-radius: 2px 2px 0 0; }
/* An unanswered period is an empty slot with a hairline tick — never a
   zero-height bar, which is what a measured zero looks like. */
.vantage-column.is-blank { border-bottom-color: #cbd5e1; border-bottom-style: dotted; }

.vantage-breakdown { display: flex; flex-direction: column; gap: 4px; }
.vantage-breakdown li { display: grid; grid-template-columns: minmax(84px, 38%) 1fr auto; align-items: center; gap: 8px; }
.vantage-breakdown-label {
  font-size: 11px; color: #64748b; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.vantage-breakdown-track { height: 8px; background: #f1f5f9; border-radius: 999px; overflow: hidden; }
.vantage-breakdown-bar { display: block; height: 100%; background: #8b5cf6; border-radius: 999px; }
.vantage-breakdown-value { font-size: 11px; font-variant-numeric: tabular-nums; color: #0f172a; }

@media (prefers-reduced-motion: reduce) {
  .vantage-card { animation: none; }
}

/* A series containing losses is drawn about a centre line, so a -40 column
   hangs below it instead of being indistinguishable from a +40. */
.vantage-columns.has-negatives .vantage-column { align-items: center; position: relative; border-bottom: none; }
.vantage-columns.has-negatives { border-bottom: none; position: relative; }
.vantage-columns.has-negatives::after {
  content: ""; position: absolute; left: 0; right: 0; top: 50%; border-top: 1px solid #e2e8f0;
}
.vantage-columns.has-negatives .vantage-column-fill { position: absolute; bottom: 50%; }
.vantage-columns.has-negatives .vantage-column.is-negative .vantage-column-fill {
  bottom: auto; top: 50%; background: #f43f5e; border-radius: 0 0 2px 2px;
}

/* The SQL box. `class` on a <.input> lands in @rest and the textarea branch
   never renders it, so the query was set in the proportional body font — where
   a stray space in a column name is invisible. */
#kpi_sql, #kpi_formula { font-family: ui-monospace, SFMono-Regular, Menlo, monospace; font-size: 12px; }

/* Card options. One button in the corner; the controls live in a panel you
   open, because eleven glyphs strung across a header is not a tile. */
.vantage-card { position: relative; }
.vantage-tools-panel {
  position: absolute; top: 44px; right: 12px; z-index: 20; width: 236px;
  background: #fff; border: 1px solid #e2e8f0; border-radius: 10px;
  box-shadow: 0 12px 32px rgba(15, 23, 42, .14); padding: 12px;
  display: flex; flex-direction: column; gap: 10px;
  animation: vantage-tools-in .14s ease-out;
}
@keyframes vantage-tools-in { from { opacity: 0; transform: translateY(-4px); } to { opacity: 1; } }
.vantage-tools-group { display: flex; flex-direction: column; gap: 4px; }
.vantage-tools-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: #94a3b8;
}
.vantage-tools-row { display: flex; flex-wrap: wrap; gap: 4px; }
.vantage-chip {
  border: 1px solid #e2e8f0; background: #fff; color: #475569;
  border-radius: 999px; padding: 3px 9px; font-size: 11px; line-height: 1.3;
  transition: background .14s ease, color .14s ease, border-color .14s ease;
}
.vantage-chip:hover { background: #f1f5f9; color: #0f172a; }
.vantage-chip.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.vantage-tools-remove {
  margin-top: 2px; border-top: 1px solid #f1f5f9; padding-top: 8px;
  font-size: 11px; color: #b91c1c; text-align: left;
}
.vantage-tools-remove:hover { text-decoration: underline; }
@media (prefers-reduced-motion: reduce) { .vantage-tools-panel { animation: none; } }

/* ── Email template: the small visual HTML editor ─────────────────────────── */
.omt-html-editor { display: flex; flex-direction: column; gap: 6px; }
.omt-html-editor-bar {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px;
  border: 1px solid var(--om-border); border-radius: 10px; padding: 4px 6px;
  background: var(--om-surface-2, #f8fafc);
}
.omt-html-editor-bar button {
  border: 1px solid transparent; background: transparent; color: #475569;
  border-radius: 6px; padding: 3px 8px; font-size: 12px; line-height: 1.4; cursor: pointer;
}
.omt-html-editor-bar button:hover { background: #fff; border-color: var(--om-border); color: #0f172a; }
.omt-html-editor-bar button.is-active { background: #0f172a; border-color: #0f172a; color: #fff; }
.omt-html-editor-sep { width: 1px; align-self: stretch; margin: 2px 4px; background: var(--om-border); }
.omt-html-editor-surface {
  min-height: 180px; max-height: 420px; overflow: auto;
  border: 1px solid var(--om-border); border-radius: 10px; padding: 10px 12px;
  background: #fff; font-size: 14px; line-height: 1.5;
}
.omt-html-editor-surface:focus {
  outline: none; border-color: var(--om-accent);
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--om-accent) 16%, transparent);
}
.omt-html-editor-surface p { margin: 0 0 8px; }
.omt-html-editor-surface ul, .omt-html-editor-surface ol { margin: 0 0 8px; padding-left: 22px; }
.omt-ph-chip {
  border: 0; background: transparent; padding: 0; margin-right: 6px; cursor: pointer;
  font: inherit; color: inherit;
}
.omt-ph-chip code { pointer-events: none; }
.omt-ph-chip:hover code { background: var(--om-accent); color: #fff; }

/* ══════════════════════════════════════════════════════════════════════════
   TASKS — simplicity pass (2026-09-22, docs/2026-09-22 Tasks simplicity review)
   Progressive disclosure: the everyday action is primary, the occasional ones
   sit behind "⋯ More"; repeated ghost affordances only show on hover (R6);
   entrances only, all off under prefers-reduced-motion (R53–R58).
   ══════════════════════════════════════════════════════════════════════════ */

/* /tasks — compact head (R1: data within the chrome budget). */
.omt-home-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 16px;
  padding: 28px 0 18px; }
.omt-home-head .om-eyebrow { margin: 0 0 4px; }
.omt-home-head .omt-h1 { font-size: 30px; margin: 0; }

/* "⋯ More" menu — shared by the boards index and a board's control bar. */
.omt-more { position: relative; display: inline-flex; }
.omt-more-menu { position: absolute; right: 0; top: calc(100% + 6px); z-index: 40; min-width: 210px;
  background: #fff; border: 1px solid var(--om-border, #e2e8f0); border-radius: 12px; padding: 6px;
  box-shadow: 0 18px 40px -18px rgba(15, 23, 42, .35); display: flex; flex-direction: column; gap: 1px; }
.omt-more-menu[hidden] { display: none; }
.omt-more-item { display: flex; align-items: center; gap: 9px; width: 100%; text-align: left;
  padding: 8px 10px; border: 0; border-radius: 8px; background: transparent; cursor: pointer;
  font-size: 13px; color: #334155; text-decoration: none; white-space: nowrap; }
.omt-more-item:hover { background: #f1f5f9; color: #0f172a; }
.omt-more-item > span[class*="hero-"] { color: #64748b; }
.omt-more-item.is-on { color: var(--om-accent, #0891b2); font-weight: 600; }
.omt-more-item.is-danger { color: #b91c1c; }
.omt-more-item.is-danger:hover { background: #fef2f2; }
.omt-more-sep { height: 1px; background: #eef2f6; margin: 4px 2px; }
.omt-more-form { display: flex; gap: 6px; padding: 6px 8px; align-items: center; }
.omt-more-form select { flex: 1; min-width: 0; }

/* "Assigned to you" strip. */
.omt-myitems { background: #fff; border: 1px solid var(--om-border, #e2e8f0); border-radius: 14px;
  padding: 12px 14px 8px; margin: 0 0 22px; box-shadow: 0 1px 2px rgba(15, 23, 42, .05); }
.omt-myitems-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 6px; }
.omt-myitems-title { display: inline-flex; align-items: center; gap: 6px; font-weight: 650; font-size: 13.5px;
  color: #0f172a; margin-right: 4px; }
.omt-myitems-title > span { color: var(--om-accent, #0891b2); }
.omt-myitems-pill { font-size: 11.5px; font-weight: 600; border-radius: 999px; padding: 2px 9px;
  background: #f1f5f9; color: #475569; }
.omt-myitems-pill.is-overdue { background: #ffe4e6; color: #be123c; }
.omt-myitems-pill.is-today { background: #fef3c7; color: #b45309; }
.omt-myitems-pill.is-next7 { background: #e0f2fe; color: #0369a1; }
.omt-myitems-list { list-style: none; margin: 0; padding: 0; display: grid;
  grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); column-gap: 18px; }
.omt-myitem { display: flex; align-items: center; gap: 10px; padding: 7px 2px; border-top: 1px solid #f1f5f9;
  min-width: 0; }
.omt-myitem-check { flex: 0 0 auto; display: grid; place-items: center; width: 20px; height: 20px;
  border-radius: 999px; border: 1.5px solid #cbd5e1; background: #fff; color: transparent; cursor: pointer;
  transition: border-color .12s ease, background .12s ease, color .12s ease, transform .12s ease; }
.omt-myitem-check:hover { border-color: #10b981; color: #10b981; transform: scale(1.08); }
.omt-myitem-check:active { background: #10b981; color: #fff; }
.omt-myitem-link { flex: 1; min-width: 0; display: flex; flex-direction: column; text-decoration: none; }
.omt-myitem-title { font-size: 13px; color: #0f172a; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omt-myitem-link:hover .omt-myitem-title { color: var(--om-accent, #0891b2); text-decoration: underline; }
.omt-myitem-board { font-size: 11.5px; color: #94a3b8; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.omt-myitem-due { flex: 0 0 auto; font-size: 11.5px; font-weight: 600; color: #64748b;
  font-variant-numeric: tabular-nums; }
.omt-myitem.is-overdue .omt-myitem-due { color: #be123c; }
.omt-myitem.is-today .omt-myitem-due { color: #b45309; }
.omt-myitems-more { font-size: 12px; color: #64748b; margin: 6px 2px 4px; }
.omt-myitems-more a { color: var(--om-accent, #0891b2); font-weight: 600; }

/* Boards index: say it once (R6/R7). "Open →" on every card was a hundred
   copies of the obvious; it now appears on the card being pointed at. */
.omt-board-card .omt-board-go { opacity: 0; transition: opacity .14s ease, transform .14s ease; }
.omt-board-card:hover .omt-board-go, .omt-board-card:focus-visible .omt-board-go { opacity: 1; }
.omt-board-count.is-zero { color: var(--om-text-muted, #94a3b8); font-weight: 500; }
.omt-boards-table td.is-zero { color: var(--om-text-muted, #94a3b8); }
.omt-boards-table .omt-bt-open .omt-board-go { opacity: 0; }
.omt-boards-table tr:hover .omt-bt-open .omt-board-go { opacity: 1; }
.omt-boards-table tbody tr { transition: background .12s ease; }
.omt-boards-table tbody tr:not(.omt-bt-folderrow):hover { background: #f8fbff; }
/* Folder chips: the ↑ ↓ ✎ ＋ tools show on the chip being pointed at. */
.omt-folder-chip-tools > button { opacity: 0; max-width: 0; overflow: hidden;
  transition: opacity .12s ease, max-width .16s ease; }
.omt-folder-chip-tools:hover > button, .omt-folder-chip-tools:focus-within > button { opacity: 1; max-width: 20px; }
@media (hover: none) {
  .omt-board-card .omt-board-go, .omt-boards-table .omt-bt-open .omt-board-go,
  .omt-folder-chip-tools > button { opacity: 1; max-width: 20px; }
}

@media (prefers-reduced-motion: no-preference) {
  @keyframes omtRise { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
  @keyframes omtDrop { from { opacity: 0; transform: translateY(-4px) scale(.98); } to { opacity: 1; transform: none; } }
  .omt-more-menu:not([hidden]) { animation: omtDrop .16s cubic-bezier(.2,.7,.2,1) both; transform-origin: top right; }
  .omt-board-grid > .omt-board-cardwrap { animation: omtRise .32s cubic-bezier(.2,.7,.2,1) both; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(2) { animation-delay: 40ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(3) { animation-delay: 80ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(4) { animation-delay: 120ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(5) { animation-delay: 160ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(6) { animation-delay: 200ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(7) { animation-delay: 240ms; }
  .omt-board-grid > .omt-board-cardwrap:nth-child(n+8) { animation-delay: 280ms; }
  .omt-myitem { animation: omtRise .3s cubic-bezier(.2,.7,.2,1) both; }
}

/* Board: "＋ New item" composer + control-bar More. */
.omt-controlbar .omt-more { margin-left: 2px; }
.omt-newitem-btn { margin-left: 4px; white-space: nowrap; }
.omt-newitem { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 10px;
  padding: 10px 12px; background: #fff; border: 1px solid color-mix(in srgb, var(--om-accent, #0891b2) 35%, #e2e8f0);
  border-radius: 12px; box-shadow: 0 8px 22px -16px color-mix(in srgb, var(--om-accent, #0891b2) 60%, transparent); }
.omt-newitem[hidden] { display: none; }
.omt-newitem-title { flex: 1 1 320px; min-width: 200px; max-width: 520px; }
.omt-newitem .omt-select { max-width: 200px; }
/* The add row's assignee picker read "Unassigned" on every group of every
   board (R6). It now appears with the row in use — hover or focus — and
   always on touch screens. */
.omt-grid-addrow .omt-grid-addassignee { opacity: 0; transition: opacity .12s ease; }
.omt-grid-addrow:hover .omt-grid-addassignee,
.omt-grid-addrow:focus-within .omt-grid-addassignee { opacity: 1; }
@media (hover: none) { .omt-grid-addrow .omt-grid-addassignee { opacity: 1; } }

/* Item panel: More opens upward from the footer; due quick picks. */
.omt-more-up .omt-more-menu { top: auto; bottom: calc(100% + 6px); left: 0; right: auto; }
.omt-more-form .omt-select { flex: 1; min-width: 0; }
.omt-due-quick { display: flex; flex-wrap: wrap; gap: 6px; margin: -2px 0 10px; }
.omt-item-modal .omt-due-quick { margin-left: 162px; }
.omt-due-chip { border: 1px solid #e2e8f0; background: #fff; color: #334155; border-radius: 999px;
  padding: 3px 10px; font-size: 12px; cursor: pointer; transition: border-color .12s ease, color .12s ease, background .12s ease; }
.omt-due-chip:hover { border-color: var(--om-accent, #0891b2); color: var(--om-accent, #0891b2); background: #f0fdff; }
.omt-due-chip.is-clear { color: #64748b; border-style: dashed; }
@media (max-width: 640px) { .omt-item-modal .omt-due-quick { margin-left: 0; } }

@media (prefers-reduced-motion: no-preference) {
  .omt-newitem:not([hidden]) { animation: omtDrop .18s cubic-bezier(.2,.7,.2,1) both; transform-origin: top left; }
  .omt-more-up .omt-more-menu:not([hidden]) { transform-origin: bottom left; }
}
/* "Save view" moved into the More menu but keeps its .omt-view-add hook —
   drop the dashed-pill look it had in the views row. */
.omt-more-item.omt-view-add { border: 0; border-radius: 8px; padding: 8px 10px; font-size: 13px;
  font-weight: 400; color: #334155; }
.omt-more-item.omt-view-add:hover { background: #f1f5f9; color: #0f172a; }

/* Live row whose anchor was recorded under another title (key reuse). */
.omt-anchor-drift { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 9px 12px;
  border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; border-radius: 10px; background: #fffbeb;
  color: #78350f; font-size: 12.5px; line-height: 1.45; }
.omt-anchor-drift > span[class*="hero-"] { flex: 0 0 auto; color: #d97706; margin-top: 1px; }

/* Live row whose anchor was recorded under another title (key reuse). */
.omt-anchor-drift { display: flex; gap: 8px; align-items: flex-start; margin: 8px 0 4px; padding: 9px 12px;
  border: 1px solid #fcd34d; border-left: 4px solid #f59e0b; border-radius: 10px; background: #fffbeb;
  color: #78350f; font-size: 12.5px; line-height: 1.45; }
.omt-anchor-drift > span[class*="hero-"] { flex: 0 0 auto; color: #d97706; margin-top: 1px; }

/* ══════════════════════════════════════════════════════════════════════════
   LIVE (data-source) BOARDS — cohesion pass (2026-09-22, docs/2026-09-22
   Data-source boards cohesion review — brief.md). A live board wears the
   stored board's anatomy; only provenance (glyph, meta) and paging differ.
   Every rule is scoped to live-only classes (R38).
   ══════════════════════════════════════════════════════════════════════════ */

/* Row count + freshness beside the title (was a whole bar above the grid). */
.omt-board-livemeta { display: inline-flex; align-items: center; gap: 6px; margin-left: 10px;
  font-size: 12px; color: #64748b; white-space: nowrap; vertical-align: middle; cursor: help; }
.omt-livemeta-dot { width: 7px; height: 7px; border-radius: 999px; background: #10b981; position: relative; }
@media (prefers-reduced-motion: no-preference) {
  @keyframes omtLivePulse { 0% { box-shadow: 0 0 0 0 rgba(16,185,129,.45); } 70%, 100% { box-shadow: 0 0 0 6px rgba(16,185,129,0); } }
  .omt-livemeta-dot { animation: omtLivePulse 2.4s ease-out infinite; }
}

/* Search in the one control row, same field as a stored board's. */
.omt-controlbar .omt-live-search { background: transparent; border: 0; padding: 0; margin-left: auto; flex: 0 1 auto; }
.omt-controlbar .omt-live-search .omt-live-searchinput { min-width: 150px; border: 1px solid var(--om-border, #e2e8f0);
  background: #fff; padding: 6px 10px; border-radius: 8px; }

/* Header anatomy = the stored grid's (R33). */
.omt-live-table thead th { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: #64748b; }
.omt-live-table thead th .omt-gh-label { font-weight: 600; }

/* One line per row (R8/R35): the title ellipsizes instead of wrapping tall. */
.omt-live-table td.omt-live-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  max-width: 280px; min-width: 160px; cursor: pointer; }
tr.omt-live-clickable:hover td.omt-live-title { color: var(--om-accent, #0891b2); text-decoration: underline;
  text-underline-offset: 3px; }
.omt-live-table tbody td { padding-top: 6px; padding-bottom: 6px; height: 43px; box-sizing: border-box; }

/* Status: the same coloured pill as stored boards and snapshot rows. */
.omt-live-editselect.omt-live-statuspill { appearance: none; -webkit-appearance: none; text-align: center;
  text-align-last: center; font-size: 12px; font-weight: 600; border-radius: 6px; padding: 5px 10px;
  min-width: 96px; border: 0; }
.omt-live-editselect.omt-live-statuspill:hover, .omt-live-editselect.omt-live-statuspill:focus {
  filter: brightness(.96); outline: 2px solid color-mix(in srgb, var(--om-accent, #0891b2) 35%, transparent); }
.omt-live-editselect.omt-live-statuspill option { background: #fff; color: #0f172a; }

/* The stream as a group band: rail, glyph, name, count. */
tr.omt-live-streamdivider td { font-size: 13px; font-weight: 700; text-transform: none; letter-spacing: 0;
  color: #0f172a; background: color-mix(in srgb, #0891b2 8%, #fff); padding: 9px 12px;
  border-top: 1px solid var(--om-border, #e2e8f0); box-shadow: inset 4px 0 0 #0891b2; }
tr.omt-live-streamdivider .omt-stream-ico { width: 14px; height: 14px; color: #0891b2; vertical-align: -2px; margin-right: 6px; }
tr.omt-live-streamdivider .omt-stream-name { margin-right: 8px; }

/* Paging: a compact footer — range on the left, controls on the right. */
.omt-live-pager { justify-content: flex-end; gap: 6px; margin: 10px 2px 2px; }
.omt-live-pager .omt-live-range { margin-right: auto; font-size: 12.5px; color: #64748b; font-variant-numeric: tabular-nums; }
.omt-live-pager .omt-btn { background: #fff; border: 1px solid var(--om-border, #e2e8f0); color: #334155; }
.omt-live-pager .omt-btn:disabled { opacity: .45; }
.omt-live-pager .omt-pager-input { width: 64px; text-align: center; }
.omt-panel-story { display: flex; flex-direction: column; gap: 6px; margin: 6px 0 12px; padding: 10px 12px;
  background: #f8fafc; border: 1px solid var(--om-border, #e2e8f0); border-radius: 10px; }
.omt-panel-story-kind { margin-left: 6px; text-transform: none; letter-spacing: 0; font-weight: 600;
  color: #0369a1; background: #e0f2fe; border-radius: 999px; padding: 1px 8px; }

/* Settings — data-source cards (R26/R29/R31). */
.omt-set-w200 { width: 200px; max-width: 100%; }
.omt-set-w120 { width: 120px; max-width: 100%; }
.omt-set-card .omt-source-opts { margin: 10px 0 0; }
.omt-set-card .omt-source-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.omt-source-labelrow { display: flex; gap: 8px; align-items: center; }
.omt-source-labelrow .omt-input { width: 280px; max-width: 100%; }
.omt-set-card.omt-set-danger { border-color: #fecaca; }
.omt-set-card.omt-set-danger .omt-set-cardtitle { color: #b91c1c; }
.omt-set-card .omt-check + .omt-set-help { margin: 2px 0 8px 26px; }
/* Columns list: a source-fed column shows its type, it doesn't offer one. */
.omt-col-srctype { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: #0369a1;
  background: #f0f9ff; border: 1px solid #bae6fd; border-radius: 999px; padding: 3px 10px; white-space: nowrap; }
/* A narrow column made the Assignee <select>'s "— Unassigned" wrap inside the
   control (66px), which set every stream row to ~70px. One line, fixed height. */
.omt-live-table .omt-live-editselect { height: 30px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* status_pill_style/2 hands the colour over as --col / --col-text. */
.omt-live-editselect.omt-live-statuspill { background: var(--col, #94a3b8); color: var(--col-text, #fff); }

/* Rules — "Needs attention" health line on a rule's row (read-only). */
.omt-rule-health { flex-basis: 100%; order: 10; display: flex; align-items: flex-start; gap: 6px;
  margin-top: 4px; padding: 6px 10px; border-radius: 8px; background: #fffbeb; border: 1px solid #fde68a;
  color: #78350f; font-size: 12.5px; line-height: 1.4; }
.omt-rule-health > span[class*="hero-"] { flex: 0 0 auto; color: #d97706; margin-top: 1px; }
.omt-rule-health strong { font-weight: 650; }
.omt-rule:has(.omt-rule-health) { flex-wrap: wrap; }
/* Rules — "Matches N items right now" check under the sentence preview. */
.omt-rule-check { display: flex; align-items: flex-start; gap: 6px; margin: 6px 0 0; font-size: 12.5px;
  color: #065f46; }
.omt-rule-check > span[class*="hero-"] { flex: 0 0 auto; margin-top: 1px; color: #10b981; }
.omt-rule-check.is-none { color: #64748b; }
.omt-rule-check.is-none > span[class*="hero-"] { color: #94a3b8; }
.omt-rule-check-eg { color: #64748b; }
/* Rules — "Keep groups in step with statuses" mapper + lead recipe chip. */
.omt-recipe.is-lead { background: color-mix(in srgb, var(--om-accent, #0891b2) 12%, #fff);
  border-color: color-mix(in srgb, var(--om-accent, #0891b2) 45%, #e2e8f0); font-weight: 650; }
.omt-status-groups { margin: 10px 0 12px; padding: 12px 14px; border: 1px solid #e2e8f0; border-radius: 12px;
  background: #fff; display: flex; flex-direction: column; gap: 8px; }
.omt-status-groups-h { margin: 0 0 2px; font-size: 13px; color: #334155; }
.omt-status-groups-row { display: flex; align-items: center; gap: 10px; }
.omt-status-groups-status { min-width: 160px; }
.omt-status-groups-have { font-size: 12.5px; color: #64748b; font-style: italic; }
/* Rules list: the row reads as a sentence; its tools (and the webhook #id)
   come up on the row being pointed at — always on touch screens (R6). */
.omt-rule-list .omt-rule > .omt-icon-btn { opacity: .35; transition: opacity .12s ease; }
.omt-rule-list .omt-rule .omt-rule-id { opacity: .45; transition: opacity .12s ease; }
.omt-rule-list .omt-rule:hover > .omt-icon-btn, .omt-rule-list .omt-rule:focus-within > .omt-icon-btn,
.omt-rule-list .omt-rule:hover .omt-rule-id { opacity: 1; }
@media (hover: none) {
  .omt-rule-list .omt-rule > .omt-icon-btn, .omt-rule-list .omt-rule .omt-rule-id { opacity: 1; }
}