/* ============================================================================
 * owner-modal-v3.css — Owner Modal redesign skin (Phase 1 CSS port)
 * Source of truth: docs/specs/OWNER-MODAL-REDESIGN-2026-06-25/MOCKUP-FROZEN.html
 * (SHA-256 prefix 99e293606f24efc7). Ported verbatim, .mk-* -> .omv2-*.
 *
 * SCOPED ENTIRELY under `.omv2-drawer.omv2-v3` (the v3 flag root) via CSS
 * nesting — zero effect on the live modal (no .omv2-v3) so flag-off behavior
 * is unchanged. The deep nesting specificity also auto-beats variables-v2.css
 * element rules (h1/h3/input), so the Newsreader-name bug cannot recur.
 * Mockup scaffolding (app sidebar, backdrop, tag, toggle, dark-rail) EXCLUDED.
 *
 * SPACING: this skin mirrors the frozen mockup's spacing
 * granularity, so it carries some odd-pixel values (3/5/7/9/11px gaps/paddings)
 * that predate the 4pt even-only scale in CLAUDE.md. They are intentional
 * fidelity values, not arbitrary patchwork. Normalizing to the 4pt grid is a
 * tracked follow-up that needs per-value visual diffing against the mockup (a
 * blind round shifts the tuned layout) — deliberately deferred from the cutover
 * pass to avoid a layout regression right before ship.
 * ============================================================================ */

:root[data-v2="1"] .omv2-drawer.omv2-v3 {
  /* --- drawer's own box (hoisted from .mk-drawer) ---
     The mockup faked the overlay with position:relative + a page body{flex}
     (excluded scaffolding). The real drawer is a fixed right-anchored overlay,
     so position/inset/z-index are corrected to the live-modal attachment here;
     everything else stays byte-faithful to MOCKUP-FROZEN.html. */
  position:fixed;
  top:0; right:0; bottom:0;
  width:min(1200px, 66vw);
  min-width:980px;
  background:#fff;
  border-left:1px solid var(--color-glass-border);
  box-shadow:-16px 0 48px oklch(0.20 0.010 200 / 0.16);
  display:flex;
  flex-direction:column;
  overflow:hidden;
  z-index:1200;

  /* --- reset guards: neutralize global app CSS bleed inside the modal --- */
  *, *::before, *::after { box-sizing: border-box; }
  button { font-family: inherit; appearance: none; background: none; border: none; cursor: pointer; }
  input, textarea, select { font-family: inherit; }

  /* --- ported rules (relative/descendant via nesting) --- */
  .omv2-head {
    flex-shrink:0;
    display:flex;
    align-items:center;
    gap:10px;
    padding:10px 16px;
    background:#fff;
    border-bottom:1px solid var(--color-glass-border-strong);
  }
  .omv2-head .nav {
    display:inline-flex;
    align-items:center;
    gap:6px;
    color:var(--color-text-secondary);
    font-size:12px;
  }
  .omv2-iconbtn {
    width:28px;
    height:28px;
    border:1px solid transparent;
    background:transparent;
    border-radius:8px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    color:var(--color-text-secondary);
    cursor:pointer;
  }
  .omv2-iconbtn:hover {
    background:var(--color-surface-3);
    color:var(--color-text-primary);
  }
  .omv2-iconbtn svg {
    width:15px;
    height:15px;
  }
  .omv2-counter {
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--color-text-secondary);
    font-variant-numeric:tabular-nums;
    padding:0 4px;
  }
  .omv2-pills {
    display:inline-flex;
    gap:6px;
    margin-left:8px;
  }
  /* Wired status/lead/DNC/defer/pro chips — each carries data-chip and opens
     openChipPopover (canonical path). Clickable, hoverable, keyboard-focusable. */
  .omv2-pill {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    min-height:24px;           /* WCAG 2.2 SC 2.5.8 target size */
    padding:4px 8px;
    border-radius:999px;
    border:1px solid var(--color-glass-border);
    background:#fff;
    color:var(--color-text-secondary);
    cursor:pointer;
    line-height:1;
    transition:background .12s ease, border-color .12s ease, color .12s ease;
  }
  .omv2-pill:hover { border-color:var(--color-text-tertiary); }
  .omv2-pill:focus-visible { outline:2px solid var(--color-secondary); outline-offset:1px; }
  /* status Active */
  .omv2-pill.on {
    background:var(--color-success-muted);
    color:var(--color-success-text);
    border-color:oklch(0.50 0.13 155 / 0.30);
  }
  /* status Deceased / Sold */
  .omv2-pill.alt {
    background:#EEF1F4;
    color:var(--color-text-secondary);
    border-color:var(--color-glass-border);
  }
  /* lead Hot = warning amber; Cold = cool slate */
  .omv2-pill.lead-hot {
    background:var(--color-warning-muted);
    color:var(--color-warning-text);
    border-color:oklch(0.66 0.13 70 / 0.35);
  }
  .omv2-pill.lead-cold {
    background:oklch(0.62 0.06 240 / 0.12);
    color:oklch(0.42 0.07 240);
    border-color:oklch(0.62 0.06 240 / 0.30);
  }
  /* DNC active = error red */
  .omv2-pill.danger {
    background:var(--color-error-muted);
    color:var(--color-error);
    border-color:oklch(0.55 0.16 25 / 0.32);
  }
  /* defer/snooze active = amber */
  .omv2-pill.warn {
    background:var(--color-warning-muted);
    color:var(--color-warning-text);
    border-color:oklch(0.66 0.13 70 / 0.30);
  }
  /* Industry Pro active = brass (display-accent, per design system) */
  .omv2-pill.pro {
    background:oklch(0.72 0.10 75 / 0.16);
    color:oklch(0.42 0.07 75);
    border-color:oklch(0.66 0.10 75 / 0.42);
  }
  /* inactive prompt chip — low-emphasis dashed, clearly actionable on hover */
  .omv2-pill.ghost {
    background:transparent;
    color:var(--color-text-tertiary);
    border-style:dashed;
    border-color:var(--color-text-tertiary);   /* ≥3:1 boundary (SC 1.4.11) — was glass-border at 1.23:1 */
  }
  .omv2-pill.ghost:hover {
    background:#fff;
    color:var(--color-text-secondary);
    border-style:solid;
  }
  /* Edit-owner mode — Save/Cancel hidden until the drawer carries .edit-mode.
     `.edit-mode` sits on the drawer (the nesting root), so the reveal uses &. */
  .omv2-hero-edit-actions { display:none; gap:8px; margin-top:10px; }
  &.edit-mode .omv2-hero-edit-actions { display:flex; }
  .omv2-name-input {
    font-family:var(--font-display);
    font-style:normal;
    font-size:22px;
    font-weight:600;
    width:100%;
    padding:4px 10px;
    border:1px solid var(--color-secondary);
    border-radius:6px;
    background:#fff;
    color:var(--color-text-primary);
    box-sizing:border-box;
  }
  .omv2-name-input:focus-visible { outline:2px solid var(--color-secondary); outline-offset:1px; }
  .omv2-hero-save, .omv2-hero-cancel {
    font-size:12px;
    font-weight:600;
    padding:6px 14px;
    border-radius:6px;
    cursor:pointer;
    border:1px solid transparent;
  }
  .omv2-hero-save { background:var(--color-secondary); color:#fff; }
  .omv2-hero-save:hover { background:var(--color-secondary-hover); }
  .omv2-hero-save:disabled { opacity:.6; cursor:default; }
  .omv2-hero-cancel { background:transparent; color:var(--color-text-secondary); border-color:var(--color-glass-border); }
  .omv2-hero-cancel:hover { background:#EEF1F4; }
  /* Owner age — small control under the name; click or pencil to edit */
  .omv2-hero-age {
    display:inline-flex;
    align-items:center;
    min-height:24px;
    margin-top:4px;
    padding:2px 10px;
    border:1px solid var(--color-glass-border);
    border-radius:999px;
    background:transparent;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--color-text-secondary);
    cursor:pointer;
  }
  .omv2-hero-age:hover { border-color:var(--color-text-tertiary); }
  .omv2-hero-age:focus-visible { outline:2px solid var(--color-secondary); outline-offset:1px; }
  .omv2-hero-age-empty { color:var(--color-text-tertiary); border-style:dashed; }
  .omv2-hero-age-edit-wrap { display:inline-flex; align-items:center; gap:4px; margin-top:4px; }
  .omv2-age-input {
    width:56px; padding:3px 6px; font-family:var(--font-mono); font-size:12px;
    border:1px solid var(--color-secondary); border-radius:6px; background:#fff; color:var(--color-text-primary);
  }
  .omv2-age-inline-save, .omv2-age-inline-cancel {
    font-size:11px; padding:3px 8px; border-radius:6px; cursor:pointer; border:1px solid transparent;
  }
  .omv2-age-inline-save { background:var(--color-secondary); color:#fff; }
  .omv2-age-inline-cancel { background:transparent; color:var(--color-text-secondary); border-color:var(--color-glass-border); }
  /* disabled nav chevrons at the queue ends */
  .omv2-iconbtn:disabled { opacity:.3; cursor:default; }
  .omv2-head .spacer {
    margin-left:auto;
  }
  /* Generate PSA — active V3 command. The disabled state below is only for owners
     with no deal-eligible wells; selected-well scoping is handled in JS. */
  .omv2-genwrap { display:inline-flex; }
  .omv2-genbtn {
    display:inline-flex;
    align-items:center;
    gap:6px;
    height:30px;
    padding:0 12px;
    border:1px solid var(--color-secondary);
    border-radius:8px;
    background:var(--color-secondary);
    font-size:12px;
    font-weight:500;
    color:#fff;
    cursor:pointer;
    opacity:1;
  }
  .omv2-genbtn:hover {
    background:var(--color-secondary-hover);
    border-color:var(--color-secondary-hover);
  }
  .omv2-genbtn:focus-visible {
    outline:2px solid var(--color-secondary);
    outline-offset:2px;
  }
  .omv2-genbtn[disabled] {
    pointer-events:none;
    border-color:var(--color-glass-border);
    background:transparent;
    color:var(--color-text-tertiary);
    cursor:not-allowed;
    opacity:.6;
  }
  .omv2-genbtn svg { width:15px; height:15px; flex:none; }
  .omv2-btn-ghost {
    font-size:12px;
    font-weight:500;
    padding:6px 12px;
    border-radius:8px;
    border:1px solid var(--color-glass-border-strong);
    background:#fff;
    color:var(--color-secondary-text);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:6px;
  }
  .omv2-btn-ghost:hover {
    background:var(--color-secondary-muted);
  }
  .omv2-body {
    flex:1;
    display:grid;
    grid-template-columns:296px 1fr;
    min-height:0;
  }
  .omv2-rail {
    border-right:1px solid var(--color-glass-border-strong);
    background:var(--color-surface-1);
    padding:20px 22px;
    display:flex;
    flex-direction:column;
    gap:16px;
    overflow-y:auto;
  }
  .omv2-eyebrow {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.12em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
    display:flex;
    align-items:center;
    gap:8px;
    flex-wrap:wrap;
  }
  .omv2-eyebrow .pro {
    color:oklch(0.45 0.12 80);
    background:oklch(0.72 0.12 80 / 0.12);
    border:1px solid oklch(0.72 0.12 80 / 0.30);
    padding:2px 6px;
    border-radius:999px;
    letter-spacing:.08em;
  }
  .omv2-name {
    font-family:var(--font-display);
    font-style:italic;
    font-weight:600;
    font-size:30px;
    line-height:1.1;
    letter-spacing:-.015em;
    margin:3px 0 0;
    color:var(--color-text-primary);
    /* clamp long estate/legal names to 3 lines in the RAIL only so they
       can't take over the command rail. Typography unchanged; the full name
       stays available via title="" (hover) and the PDF export. */
    display:-webkit-box;
    -webkit-line-clamp:3;
    line-clamp:3;
    -webkit-box-orient:vertical;
    overflow:hidden;
  }
  .omv2-sub {
    display:flex;
    flex-direction:column;
    gap:7px;
    margin-top:2px;
  }
  /* row ⋯ / event ⋯ action popover — v3-native. The shared .omv2-popover
     base leaves the Lucide icons unsized under the v3 scope (→ 77-85px); this
     constrains them + gives the menu the v3 card/typography language. */
  .omv2-rowact-pop {
    background:#fff;
    border:1px solid var(--color-glass-border-strong);
    border-radius:8px;
    box-shadow:0 8px 24px oklch(0.20 0.010 200 / 0.16);
    padding:4px;
    min-width:184px;
    z-index:1300;
  }
  .omv2-rowact-pop .omv2-popover-item {
    display:flex;
    align-items:center;
    gap:9px;
    width:100%;
    padding:8px 10px;
    border:none;
    border-radius:6px;
    background:none;
    font-size:13px;
    line-height:1.2;
    color:var(--color-text-primary);
    cursor:pointer;
    text-align:left;
  }
  .omv2-rowact-pop .omv2-popover-item:hover {
    background:var(--color-surface-1);
  }
  .omv2-rowact-pop .omv2-popover-item svg {
    width:15px;
    height:15px;
    flex:none;
    color:var(--color-text-tertiary);
  }
  .omv2-rowact-pop .omv2-popover-divider {
    height:1px;
    background:var(--color-glass-border);
    margin:4px 6px;
  }
  /* destructive rows (Remove property / Remove note) must read as
     destructive — red text + icon, red-tint hover — not identical to safe actions.
     One v3 menu grammar shared across row ⋯ and event ⋯ (.omv2-rowact-pop). */
  .omv2-rowact-pop .omv2-popover-item-danger,
  .omv2-rowact-pop .omv2-popover-item-danger svg {
    color:var(--color-error);
  }
  .omv2-rowact-pop .omv2-popover-item-danger:hover {
    background:var(--color-error-muted);
  }
  /* v3-native "View all contacts" expansion. The shared renderContactsFull
     markup (sections + rows + add form) had NO styling under the v3 scope, so
     icons rendered huge + the phone value collapsed to one char per line. Style
     it to match the rail — reuses the existing markup + contact-add write path. */
  .omv2-contacts-full {
    /* the block is inserted INSIDE .omv2-contacts (a wrap flex row, after the
       toggle button) — force it onto its own full-width line below the buttons. */
    flex:0 0 100%;
    width:100%;
    display:flex;
    flex-direction:column;
    align-items:stretch;
    gap:11px;
    margin-top:9px;
    /* explicit 0 horizontal — the cockpit .omv2-contacts-full sets 24px L/R
       padding, which shrank the content box to 203px and squeezed the rows. */
    padding:11px 0 0;
    border-top:1px solid var(--color-glass-border);
  }
  .omv2-contacts-section {
    display:flex;
    flex-direction:column;
    gap:5px;
    width:100%;
  }
  .omv2-contacts-section-l {
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
  }
  .omv2-contact-row {
    position:relative;
    display:flex;
    align-items:center;
    gap:8px;
    width:100%;
  }
  .omv2-contact-row .omv2-contact-icon {
    display:inline-flex;
    flex:none;
    color:var(--color-text-tertiary);
  }
  .omv2-contact-row .omv2-contact-icon svg {
    width:14px;
    height:14px;
  }
  .omv2-contact-val {
    flex:1 1 auto;
    min-width:0;
    font-size:13px;
    line-height:1.35;
    color:var(--color-text-primary);
    overflow-wrap:anywhere;
  }
  .omv2-contact-row.phone .omv2-contact-val {
    font-family:var(--font-mono);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .omv2-contact-row.bad .omv2-contact-val {
    color:var(--color-text-tertiary);
    text-decoration:line-through;
  }
  .omv2-contact-flag {
    flex:none;
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.04em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
    border:1px solid var(--color-glass-border-strong);
    border-radius:4px;
    padding:1px 4px;
  }
  .omv2-contact-flag.primary {
    color:var(--color-secondary);
    border-color:var(--color-secondary);
  }
  .omv2-contact-actions {
    /* hover-reveal, out of flow — so the number/email gets the full row width at
       rest (mockup's row-action pattern). White bg masks the value underneath. */
    position:absolute;
    right:0;
    top:50%;
    transform:translateY(-50%);
    display:inline-flex;
    gap:2px;
    opacity:0;
    background:#fff;
    padding-left:8px;
    transition:opacity .12s;
  }
  .omv2-contact-row:hover .omv2-contact-actions,
  .omv2-contact-actions:focus-within {
    opacity:1;
  }
  .omv2-contact-act {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:24px;
    height:24px;
    border:none;
    background:none;
    border-radius:5px;
    color:var(--color-text-tertiary);
    cursor:pointer;
  }
  .omv2-contact-act:hover {
    background:var(--color-surface-1);
    color:var(--color-text-secondary);
  }
  .omv2-contact-act svg {
    width:14px;
    height:14px;
  }
  .omv2-contact-act.priority.is-on {
    color:var(--color-accent);
  }
  .omv2-contact-add {
    display:inline-flex;
    align-items:center;
    gap:6px;
    align-self:flex-start;
    margin-top:1px;
    padding:5px 9px;
    border:1px solid var(--color-glass-border-strong);
    border-radius:6px;
    background:none;
    font-size:12px;
    font-weight:500;
    color:var(--color-secondary);
    cursor:pointer;
  }
  .omv2-contact-add:hover {
    background:var(--color-surface-1);
  }
  .omv2-contact-add svg {
    width:13px;
    height:13px;
  }
  .omv2-contact-add-form {
    display:flex;
    flex-wrap:wrap;
    gap:6px;
    align-items:center;
    margin-top:2px;
  }
  .omv2-contact-add-type {
    flex:none;
    font-size:12px;
    padding:5px 6px;
    border:1px solid var(--color-glass-border-strong);
    border-radius:6px;
    background:#fff;
    color:var(--color-text-primary);
  }
  .omv2-contact-add-input {
    flex:1 1 140px;
    min-width:0;
    font-size:13px;
    padding:6px 8px;
    border:1px solid var(--color-glass-border-strong);
    border-radius:6px;
    background:#fff;
    color:var(--color-text-primary);
  }
  .omv2-contact-add-input:focus {
    outline:none;
    border-color:var(--color-secondary);
  }
  .omv2-contact-add-save, .omv2-contact-add-cancel {
    flex:none;
    font-size:12px;
    font-weight:500;
    padding:6px 10px;
    border-radius:6px;
    border:1px solid transparent;
    cursor:pointer;
  }
  .omv2-contact-add-save {
    background:var(--color-secondary);
    color:#fff;
  }
  .omv2-contact-add-cancel {
    background:none;
    border-color:var(--color-glass-border-strong);
    color:var(--color-text-secondary);
  }
  /* the reused cockpit inline log-call form (.ck-inline-log) is
     360px — too wide for the 296px v3 rail. Anchor the overlay to the full "Log
     call" wrap so it opens fully visible below the button, and rework the body
     into a clean rail-native LIST. The cockpit 3-col grid (cockpit.css:317)
     squeezed 5 chips to ~49px ("No answer" wrapped to "No² answer") and bolted
     the Lead in as a 6th bordered cell. In v3 the outcomes stack full-width —
     number · label · consequence on ONE line — and Lead drops to its own row. */
  .ck-loginline-overlay {
    left:0;
    right:0;
  }
  .ck-inline-log {
    width:100%;
    max-width:none;
  }
  .ck-il-grid { display:flex; flex-direction:column; gap:6px; }
  .ck-il-chips { display:flex; flex-direction:column; gap:6px; width:100%; }
  .ck-il-chip {
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:100%;
    padding:8px 10px;
    min-height:34px;
  }
  .ck-il-chip .key {
    position:static;          /* was absolute top-right — now a leading index badge */
    flex:none;
    width:16px;
    text-align:center;
    font-size:10px;
  }
  .ck-il-chip .lbl { white-space:nowrap; }
  .ck-il-chip .conseq {
    display:none;             /* outcome descriptors removed — user-facing noise */
  }
  /* Selected outcome / lead — a clear teal highlight. Previously .sel had NO styling
     in v3, so picking Answered/No-answer showed no feedback (only DNC/Callback, which
     reveal a sub-field, looked like they "worked"). */
  .ck-il-chip.sel {
    border-color:var(--color-secondary);
    background:oklch(0.55 0.08 200 / 0.13);
    box-shadow:inset 0 0 0 1px var(--color-secondary);
  }
  .ck-il-chip.sel .key, .ck-il-chip.sel .lbl { color:var(--color-secondary); }
  .ck-il-lead.sel {
    border-color:var(--color-secondary);
    background:oklch(0.55 0.08 200 / 0.13);
    color:var(--color-secondary);
    box-shadow:inset 0 0 0 1px var(--color-secondary);
  }
  /* Lead — its own labeled row, not a bolted-on bordered 6th cell */
  .ck-il-leadbox {
    flex-direction:row;
    align-items:center;
    gap:8px;
    width:100%;
    border:none;
    background:none;
    padding:2px 0 0;
  }
  .ck-il-leads { margin-left:auto; }
  /* One button, two paths: the inline log form has NO commit button — the SAME rail
     "Log call" button commits it. A hint points there; the rail button "arms" (teal
     ring) once an outcome is chosen, and dims while the save is in flight. */
  .ck-il-hint { margin-left:auto; align-self:center; font-size:11px; color:var(--color-text-tertiary); }
  .ck-il-hint strong { font-weight:600; color:var(--color-text-secondary); }
  .ck-logcall-btn.is-armed { outline:2px solid var(--color-secondary); outline-offset:2px; }
  .ck-logcall-btn.is-logging { opacity:.6; cursor:progress; }
  /* consistent, visible keyboard focus on EVERY interactive control
     surface (hover existed; focus-visible was inconsistent). One teal ring per the
     design system (--color-secondary = focus rings). Outline follows each element's
     own border-radius in modern engines, so no shape override is needed. */
  .omv2-iconbtn:focus-visible,
  .omv2-btn-ghost:focus-visible,
  .omv2-mini:focus-visible,
  .omv2-collapse:focus-visible,
  .omv2-fpill:focus-visible,
  .omv2-rate .rest:focus-visible,
  .omv2-rowact-pop .omv2-popover-item:focus-visible,
  .omv2-relparties-popover-add:focus-visible,
  [data-action="omv2RelTogglePopover"]:focus-visible,
  [data-action="omv2RelToggleAddForm"]:focus-visible,
  [data-action="contacts-toggle"]:focus-visible,
  .omv2-contact-actions button:focus-visible,
  .omv2-contact-add:focus-visible,
  .omv2-composer-pin:focus-visible,
  .omv2-note-add-btn:focus-visible,
  .ck-il-chip:focus-visible,
  .ck-il-lead:focus-visible {
    outline:2px solid var(--color-secondary);
    outline-offset:2px;
  }
  .omv2-sub .row {
    display:flex;
    align-items:center;
    gap:8px;
    font-size:13px;
    color:var(--color-text-primary);
  }
  .omv2-sub .row svg {
    width:13px;
    height:13px;
    color:var(--color-text-tertiary);
    flex-shrink:0;
  }
  .omv2-sub .v.mono {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
  }
  .omv2-agechip {
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--color-text-secondary);
    background:#fff;
    border:1px solid var(--color-glass-border-strong);
    border-radius:999px;
    padding:1px 7px;
  }
  .omv2-contacts {
    position:relative;
    display:flex;
    flex-wrap:wrap;
    gap:14px;
    font-size:12px;
    color:var(--color-secondary-text);
  }
  /* related-parties popover positioned relative to the full .omv2-contacts
     row (not the small wrap) + full-width, so the cockpit 320px popover doesn't
     overflow the 296px rail. Card style comes from owner-modal-v2.css base. */
  .omv2-rel-wrap { position:static; }
  .omv2-rel-wrap .omv2-relparties-popover {
    position:absolute;
    top:calc(100% + 6px);
    left:0;
    right:0;
    width:auto;
    max-width:none;
    /* unify with the row/event menu overlay grammar so the rel popover
       reads as a transient FLOATING control, not an inline content card competing
       with the pinned note — stronger border + shadow, 8px radius, tighter
       padding, raised above rail content. */
    background:#fff;
    border-color:var(--color-glass-border-strong);
    border-radius:8px;
    box-shadow:0 8px 24px oklch(0.20 0.010 200 / 0.16);
    padding:8px 10px;
    z-index:1300;
  }
  /* lighter body: the rel rows read as quiet list items under the header */
  .omv2-rel-wrap .omv2-rp-empty {
    color:var(--color-text-tertiary);
    font-size:12px;
    padding:8px 2px;
  }
  .omv2-contacts button {
    background:none;
    border:none;
    color:var(--color-secondary-text);
    font:inherit;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:4px;
    padding:0;
  }
  /* The contacts toggle's chevron (svgChevDown, no intrinsic width/height) is
     injected by rerenderContactsBlock on every expand/collapse; without an
     explicit size it renders huge in v3. Pin it to a normal 12px control glyph,
     aligned with the label. v3-scoped — the cockpit toggle sizes its own svg. */
  .omv2-contacts button svg {
    width:12px;
    height:12px;
    flex:none;
  }
  .omv2-divider {
    height:1px;
    background:var(--color-glass-border);
    margin:2px 0;
  }
  .omv2-divider.strong {
    background:var(--color-glass-border-strong);
  }
  .omv2-na-label {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
  }
  .omv2-na-main {
    font-size:15px;
    font-weight:600;
    color:var(--color-secondary-text);
    margin-top:5px;
  }
  .omv2-na-meta {
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--color-text-secondary);
    margin-top:3px;
    font-variant-numeric:tabular-nums;
  }
  .omv2-logcall {
    margin-top:12px;
    width:100%;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:8px;
    background:var(--color-accent);
    color:#fff;
    border:1px solid var(--color-accent);
    border-radius:9px;
    padding:11px 14px;
    font-size:14px;
    font-weight:700;
    cursor:pointer;
  }
  .omv2-logcall svg {
    width:15px;
    height:15px;
  }
  .omv2-pinned {
    background:#fff;
    border:1px solid var(--color-glass-border-strong);
    border-radius:8px;
    padding:12px 14px;
  }
  .omv2-pinned .lbl {
    display:flex;
    align-items:center;
    gap:5px;
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:.1em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
    margin-bottom:6px;
  }
  .omv2-pinned .lbl svg {
    width:10px;
    height:10px;
  }
  .omv2-pin-unpin {
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    padding:6px;               /* 12px icon + 12px = 24px target (WCAG 2.2 SC 2.5.8) */
    border:none;
    background:transparent;
    color:var(--color-text-tertiary);
    cursor:pointer;
    border-radius:4px;
    flex:none;
  }
  .omv2-pinned .lbl .omv2-pin-unpin svg { width:12px; height:12px; }  /* beat .omv2-pinned .lbl svg{10px} → 12+12 padding = 24px target */
  .omv2-pin-unpin:hover { background:var(--color-error-muted); color:var(--color-error); }
  .omv2-pinned .body {
    font-family:var(--font-display);
    font-style:italic;
    font-size:14px;
    line-height:1.5;
    color:var(--color-text-primary);
  }
  .omv2-pinned .meta {
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--color-text-tertiary);
    margin-top:8px;
  }
  /* Activity timestamps line up in a right-aligned column. The shared
     owner-modal-v2.css head sets flex-wrap:wrap, which dropped the date to a
     second line for events carrying an outcome pill (calls) — breaking the
     column vs notes. nowrap keeps every ts on the head's first line, and
     margin-left:auto (inherited) right-aligns them to the same edge. */
  .omv2-event-head { flex-wrap:nowrap; }
  .omv2-event-ts { flex:none; }
  .omv2-work {
    display:flex;
    flex-direction:column;
    min-height:0;
    background:#fff;
  }
  .omv2-prop-section {
    flex:1 1 0;
    min-height:54px;
    display:flex;
    flex-direction:column;
    overflow:hidden;
  }
  .omv2-prop-section .omv2-prop-wrap {
    overflow-y:auto;
    flex:1;
  }
  .omv2-act {
    flex:1 1 0;
  }
  .omv2-section.collapsed {
    flex:0 0 auto;
  }
  .omv2-prop-section.collapsed .omv2-prop-wrap {
    display:none;
  }
  .omv2-act.collapsed .omv2-events {
    display:none;
  }
  .omv2-collapse {
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:20px;
    height:20px;
    margin-right:5px;
    background:none;
    border:1px solid transparent;
    border-radius:5px;
    cursor:pointer;
    color:var(--color-text-tertiary);
    transition:transform .15s ease, background .12s, border-color .12s;
  }
  .omv2-collapse:hover {
    background:var(--color-surface-2);
    border-color:var(--color-glass-border);
    color:var(--color-text-secondary);
  }
  .omv2-collapse svg {
    width:13px;
    height:13px;
  }
  .omv2-collapse.rot {
    transform:rotate(-90deg);
  }
  .omv2-rate-input .ck button svg {
    width:14px;
    height:14px;
  }
  .omv2-offer {
    position:sticky;
    top:0;
    z-index:3;
    display:flex;
    align-items:stretch;
    gap:0;
    padding:20px 24px 18px;
    background:#fff;
    border-bottom:1px solid var(--color-glass-border-strong);
    box-shadow:0 5px 10px -9px oklch(0.20 0.010 200 / 0.12);
  }
  .omv2-offer .cell {
    padding:0 22px;
    border-right:1px solid var(--color-glass-border);
    display:flex;
    flex-direction:column;
    gap:3px;
  }
  .omv2-offer .cell:first-child {
    padding-left:0;
  }
  .omv2-offer .cell:last-child {
    border-right:none;
  }
  .omv2-offer .lbl {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.09em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
  }
  .omv2-offer .big {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:36px;
    font-weight:600;
    letter-spacing:-.025em;
    line-height:1.0;
  }
  .omv2-offer .lbl {
    font-weight:600;
  }
  .omv2-offer .big .sym, .omv2-offer .big .dec {
    color:var(--color-success);   /* money is green everywhere — symbol + cents too (not grey) */
    font-weight:500;
  }
  .omv2-offer .big .int {
    color:var(--color-success);
  }
  .omv2-offer .num {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:20px;
    font-weight:600;
    color:var(--color-text-primary);
    letter-spacing:-.01em;
    line-height:1.0;
    padding-top:5px;
  }
  .omv2-sec-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    gap:12px;
    padding:14px 24px 8px;
  }
  .omv2-sec-title {
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:.10em;
    text-transform:uppercase;
    color:var(--color-text-primary);
    font-weight:700;
    display:inline-flex;
    align-items:center;
    gap:8px;
  }
  .omv2-sec-title .ct {
    color:var(--color-secondary-text);
    background:var(--color-secondary-muted);
    font-weight:700;
    font-size:10px;
    padding:2px 8px;
    border-radius:999px;
    letter-spacing:.04em;
  }
  .omv2-sec-actions {
    display:inline-flex;
    gap:6px;
  }
  .omv2-mini {
    font-size:11px;
    padding:4px 9px;
    border-radius:7px;
    border:1px solid var(--color-glass-border);
    background:#fff;
    color:var(--color-text-secondary);
    cursor:pointer;
  }
  .omv2-mini:hover {
    background:var(--color-surface-1);
  }
  .omv2-prop-wrap {
    padding:0 24px;
  }
  .omv2-thead, .omv2-prow {
    display:grid;
    grid-template-columns: 22px minmax(0,1fr) 78px 132px 106px 26px;
    align-items:center;
    column-gap:12px;
  }
  /* V3 well-selection: narrow leading checkbox column (the 22px track above);
     a tighter 12px gap keeps the name/NRA/$/NRA/offer columns from being squeezed. */
  .omv2-thead-check, .omv2-well-check-cell {
    display:flex; align-items:center; justify-content:center;
  }
  /* P2: the row checkbox cell is the tap target — stretch it to the full row height
     (≈48px) so the clickable area is 22px × row, not just the 15px box. The checkbox
     stays centered; the whole cell routes to v3-toggle-well-cell. */
  .omv2-well-check-cell {
    align-self:stretch;
    margin-block:-12px;
    padding-block:12px;
  }
  .omv2-well-check-cell[data-action] { cursor:pointer; }
  .omv2-well-check, .omv2-well-check-all {
    width:15px; height:15px; margin:0; cursor:pointer;
    accent-color:var(--color-secondary);
  }
  .omv2-well-check:disabled { cursor:default; opacity:.3; }
  .omv2-rowact {
    display:flex;
    justify-content:flex-end;
  }
  .omv2-rowact button {
    width:26px;
    height:26px;
    border:1px solid transparent;
    background:transparent;
    border-radius:6px;
    color:var(--color-text-tertiary);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .omv2-rowact button:hover {
    background:var(--color-surface-2);
    border-color:var(--color-glass-border);
    color:var(--color-text-secondary);
  }
  .omv2-rowact svg {
    width:16px;
    height:16px;
  }
  .omv2-thead {
    padding:6px 10px;
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.06em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
    border-bottom:1px solid var(--color-glass-border);
  }
  .omv2-thead .r {
    text-align:right;
  }
  .omv2-prow {
    padding:12px 10px;
    border-bottom:1px solid var(--color-glass-border);
    border-radius:7px;
    position:relative;
  }
  .omv2-prow:hover {
    background:var(--color-surface-1);
  }
  .omv2-well .nm {
    font-size:14px;
    font-weight:600;
    color:var(--color-text-primary);
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .omv2-well .sub {
    display:flex;
    align-items:baseline;
    gap:6px;
    font-family:var(--font-mono);
    font-size:10px;
    color:var(--color-text-tertiary);
    letter-spacing:.02em;
  }
  .omv2-well .sub .legal {
    flex:1 1 auto; min-width:0;
    overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
  }
  .omv2-sub-muted { color:var(--color-text-tertiary); }
  /* "more info" link + property-details popup */
  .omv2-moreinfo {
    flex:none; padding:0;
    border:none; background:none;
    font-size:11px; color:var(--color-secondary);
    text-decoration:underline; cursor:pointer; white-space:nowrap;
    letter-spacing:0; text-transform:none;
  }
  .omv2-moreinfo:hover { color:var(--color-secondary-hover); }
  .omv2-moreinfo:focus-visible { outline:2px solid var(--color-secondary); outline-offset:1px; }
  /* V3: compact (i) icon variant (replaces the "more info" text — saves row space). */
  .omv2-moreinfo-icon {
    display:inline-flex; align-items:center; justify-content:center;
    width:18px; height:18px; padding:0; text-decoration:none;
    border-radius:4px; vertical-align:middle; flex:none;
  }
  .omv2-moreinfo-icon svg { width:14px; height:14px; }
  .omv2-pinfo-pop { min-width:240px; max-width:340px; padding:12px 14px; }
  .omv2-pinfo-hd {
    font-family:var(--font-display); font-style:italic;
    font-size:14px; color:var(--color-text-primary); margin-bottom:8px;
  }
  .omv2-pinfo-row { display:flex; gap:10px; padding:3px 0; font-size:12px; line-height:1.4; }
  .omv2-pinfo-row .k {
    flex:none; width:58px; padding-top:2px;
    color:var(--color-text-tertiary);
    font-family:var(--font-mono); font-size:9px;
    text-transform:uppercase; letter-spacing:.06em;
  }
  .omv2-pinfo-row .v { color:var(--color-text-primary); word-break:break-word; }
  .omv2-disp {
    display:inline-block;
    font-family:var(--font-mono);
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:2px 6px;
    border-radius:5px;
  }
  .omv2-disp.deal {
    color:var(--color-secondary-text);
    background:var(--color-secondary-muted);
    border:1px solid oklch(0.55 0.08 200 / .25);
  }
  .omv2-disp.closed {
    color:var(--color-success-text);
    background:var(--color-success-muted);
    border:1px solid oklch(0.50 0.13 155 / .25);
  }
  .omv2-nra {
    text-align:right;
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:13px;
    color:var(--color-text-secondary);
  }
  .omv2-nra .u {
    font-size:9px;
    color:var(--color-text-tertiary);
    margin-left:3px;
  }
  .omv2-rate {
    text-align:right;
    position:relative;
  }
  .omv2-rate .rest {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:13px;
    font-weight:500;
    color:var(--color-text-primary);
    cursor:text;
    display:inline-flex;
    align-items:center;
    gap:6px;
    justify-content:flex-end;
    border-bottom:1px dashed var(--color-glass-border-strong);
    padding-bottom:1px;
    transition:border-color .12s;
  }
  .omv2-prow:hover .omv2-rate .rest {
    border-bottom-color:var(--color-secondary);
  }
  .omv2-rate .rest .pencil {
    opacity:0;
    color:var(--color-text-tertiary);
    transition:opacity .12s;
    display:inline-flex;
    vertical-align:middle;
  }
  .omv2-rate .rest .pencil svg { width:12px; height:12px; }
  .omv2-prow:hover .omv2-rate .rest .pencil {
    opacity:1;
  }
  .omv2-rate .cap {
    font-family:var(--font-mono);
    font-size:9px;
    color:var(--color-text-tertiary);
    margin-top:2px;
  }
  /* the canonical cap stack (renderCapForCard) renders project cap
     + your cap + other agent caps. Right-align it to the rate column and shrink to
     the v3 9px mono scale (cockpit .omv2-eq-cap is 11px — too large for this row). */
  .omv2-rate .cap .omv2-eq-cap-stack {
    display:flex;
    flex-direction:column;
    gap:1px;
    align-items:flex-end;
  }
  .omv2-rate .cap .omv2-eq-cap {
    font-family:var(--font-mono);
    font-size:9px;
    color:var(--color-text-tertiary);
    letter-spacing:0.01em;
    max-width:100%;
    overflow:hidden;
    text-overflow:ellipsis;
    white-space:nowrap;
    display:block;
  }
  .omv2-rate .cap .omv2-eq-cap.over { color:var(--color-error); font-weight:500; }
  /* Over-cap RED (Task 3): an EDITABLE $/NRA above its binding cap — only settable via
     the handleRateBlur owner/manager reason-override gate — reads at a glance. Visual
     only; save / enforcement / audit authority is unchanged. The cap text below stays
     legible (its own colour). */
  .omv2-rate.over-cap .rest,
  .omv2-rate.over-cap .rest .pencil,
  .omv2-rate.over-cap .omv2-rate-input { color:var(--color-error); }
  .omv2-rate.over-cap .omv2-rate-input { border-color:var(--color-error); }
  /* The TOTAL OFFER / value stays GREEN even when the $/NRA is over cap — only the
     rate reds (user 2026-06-27). No over-cap rule on the value cell, on purpose. */
  .omv2-rate.editing .rest {
    display:none;
  }
  .omv2-rate-edit {
    display:none;
    flex-direction:column;
    align-items:flex-end;
    gap:3px;
  }
  .omv2-rate.editing .omv2-rate-edit {
    display:flex;
  }
  .omv2-rate-input {
    display:inline-flex;
    align-items:center;
    border:1px solid var(--color-secondary);
    border-radius:7px;
    overflow:hidden;
    background:#fff;
    box-shadow: inset 0 1px 2px oklch(0.20 0.010 200 / 0.08), 0 0 0 3px var(--color-secondary-muted);
  }
  .omv2-rate-input input {
    width:76px;
    border:none;
    outline:none;
    background:transparent;
    text-align:right;
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:13px;
    font-weight:500;
    padding:4px 4px 4px 8px;
    color:var(--color-text-primary);
  }
  .omv2-rate-input .ck {
    display:inline-flex;
    align-items:center;
    padding:0 5px;
    gap:3px;
    border-left:1px solid var(--color-glass-border);
  }
  .omv2-rate-input .ck button {
    width:20px;
    height:22px;
    border:none;
    background:transparent;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:4px;
  }
  .omv2-rate-input .ck .ok {
    color:var(--color-success);
  }
  .omv2-rate-input .ck .no {
    color:var(--color-text-tertiary);
  }
  .omv2-rate-cap-edit {
    font-family:var(--font-mono);
    font-size:10px;
  }
  .omv2-rate-cap-edit.over {
    color:var(--color-warning);
    font-weight:600;
  }
  .omv2-rate-cap-edit.ok {
    color:var(--color-text-tertiary);
  }
  .omv2-val {
    text-align:right;
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    font-size:14px;
    font-weight:600;
  }
  .omv2-val .sym,.omv2-val .dec {
    color:var(--color-success);   /* per-row money green too — symbol + cents */
    font-weight:500;
  }
  .omv2-val .int {
    color:var(--color-success);
  }
  /* (removed) dead hover-reveal residue .omv2-rowaction / .hideonhover — the
     spec uses the PERSISTENT row action .omv2-rowact (always visible). Deleted
     so Phase 2 can't accidentally wire the old hover-reveal pattern. */
  .omv2-act {
    flex:1;
    display:flex;
    flex-direction:column;
    min-height:0;
    margin-top:10px;
  }
  .omv2-act > .omv2-sec-head {
    background:#fff;
    border-top:1px solid var(--color-glass-border-strong);
    border-bottom:1px solid var(--color-glass-border);
    padding:14px 24px 9px;
    margin-top:6px;
  }
  .omv2-act > .omv2-sec-head .omv2-sec-title {
    color:var(--color-text-primary);
  }
  .omv2-act-filters {
    display:inline-flex;
    gap:5px;
  }
  .omv2-fpill {
    font-size:11px;
    padding:5px 9px;
    border-radius:999px;
    border:1px solid var(--color-glass-border);
    background:#fff;
    color:var(--color-text-secondary);
    cursor:pointer;
  }
  .omv2-fpill.on {
    background:var(--color-secondary-muted);
    border-color:oklch(0.55 0.08 200 / .35);
    color:var(--color-secondary-text);
    font-weight:500;
  }
  .omv2-events {
    flex:1;
    overflow-y:auto;
    padding:4px 24px 8px;
  }
  /* compact, instructional empty state — quiet, left-aligned to the
     activity column (parent .omv2-events already supplies the 24px inset), not a
     single line floating in a white void. */
  .omv2-act-empty {
    padding:10px 0 14px;
  }
  .omv2-act-empty-t {
    font-size:13px;
    font-weight:500;
    color:var(--color-text-secondary);
  }
  .omv2-act-empty-s {
    margin-top:4px;
    font-size:12px;
    line-height:1.4;
    color:var(--color-text-tertiary);
  }
  .omv2-ev {
    display:grid;
    grid-template-columns:30px 1fr 56px;
    gap:10px;
    padding:11px 0;
    border-bottom:1px solid var(--color-glass-border);
    align-items:start;
  }
  .omv2-ev:last-child {
    border-bottom:none;
  }
  .omv2-av {
    width:26px;
    height:26px;
    border-radius:50%;
    display:flex;
    align-items:center;
    justify-content:center;
    font-family:var(--font-mono);
    font-size:10px;
    font-weight:600;
  }
  .omv2-av.you {
    background:var(--color-secondary);
    color:#fff;
  }
  .omv2-sysglyph {
    width:22px;
    height:22px;
    border-radius:50%;
    background:var(--color-surface-2);
    color:var(--color-text-tertiary);
    display:flex;
    align-items:center;
    justify-content:center;
    margin-top:1px;
  }
  .omv2-sysglyph svg {
    width:12px;
    height:12px;
  }
  .omv2-ev-body {
    min-width:0;
  }
  .omv2-ev-head {
    display:flex;
    align-items:center;
    gap:7px;
    flex-wrap:wrap;
  }
  .omv2-ev-actor {
    font-size:12px;
  }
  .omv2-ev-actor b {
    font-weight:600;
    color:var(--color-text-primary);
  }
  .omv2-ev-actor .verb {
    color:var(--color-text-secondary);
  }
  .omv2-out {
    font-family:var(--font-mono);
    font-size:9px;
    font-weight:700;
    letter-spacing:.04em;
    text-transform:uppercase;
    padding:2px 7px;
    border-radius:999px;
  }
  .omv2-out.answered {
    background:var(--color-success-muted);
    color:var(--color-success-text);
  }
  .omv2-out.noanswer {
    background:var(--color-error-muted);
    color:var(--color-error);
  }
  .omv2-out.callback {
    background:var(--color-secondary-muted);
    color:var(--color-secondary-text);
  }
  .omv2-ev-note {
    font-size:13px;
    line-height:1.45;
    color:var(--color-text-primary);
    margin-top:4px;
  }
  .omv2-ev-ts {
    display:flex;
    flex-direction:column;
    align-items:flex-end;       /* date always top-right; ⋯ below it — so dates align across notes/calls */
    gap:4px;
    text-align:right;
    font-family:var(--font-mono);
    font-size:11px;
    color:var(--color-text-tertiary);
    font-variant-numeric:tabular-nums;
    white-space:nowrap;
  }
  .omv2-ev-when { white-space:nowrap; }
  .omv2-ev-actions {
    display:inline-flex;
    gap:2px;
    opacity:0;
    transition:opacity .12s;
  }
  .omv2-ev:hover .omv2-ev-actions {
    opacity:1;
  }
  .omv2-ev-actions button {
    width:22px;
    height:22px;
    border:none;
    background:transparent;
    border-radius:5px;
    color:var(--color-text-tertiary);
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    justify-content:center;
  }
  .omv2-ev-actions button:hover {
    background:var(--color-surface-2);
    color:var(--color-text-secondary);
  }
  .omv2-ev.note .omv2-ev-body {
    background: oklch(0.975 0.018 80);
    border:1px solid oklch(0.78 0.05 80 / .45);
    border-radius:8px;
    padding:9px 12px;
    margin-top:-2px;
  }
  /* The note body is a bordered card (padding+border push its actor line ~8px down).
     The date lives in the separate ts column, so without this it floated above the
     note's content. Nudge it down to sit level with the note's actor line — matching
     how a call's date sits level with its actor (vertical alignment fix). */
  .omv2-ev.note .omv2-ev-ts { padding-top:8px; }
  .omv2-ev.note .omv2-av {
    background:var(--color-accent);
    color:#fff;
  }
  .omv2-ev.sys {
    grid-template-columns:30px 1fr 56px;
    padding:8px 0;
  }
  .omv2-ev.sys .omv2-ev-actor {
    font-size:12px;
    color:var(--color-text-secondary);
  }
  .omv2-ev.sys .omv2-ev-actor .mono {
    font-family:var(--font-mono);
    font-variant-numeric:tabular-nums;
    color:var(--color-text-primary);
  }
  .omv2-composer {
    flex-shrink:0;
    border-top:1px solid var(--color-glass-border-strong);
    background:#fff;
    box-shadow:0 -5px 10px -9px oklch(0.20 0.010 200 / 0.10);
    padding:14px 24px 16px;
  }
  .omv2-composer-head {
    display:flex;
    align-items:center;
    justify-content:space-between;
    margin-bottom:7px;
  }
  .omv2-composer-label {
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:.08em;
    text-transform:uppercase;
    color:var(--color-text-tertiary);
  }
  .omv2-composer-pin {
    font-size:11px;
    color:var(--color-secondary-text);
    background:none;
    border:none;
    cursor:pointer;
    display:inline-flex;
    align-items:center;
    gap:4px;
  }
  .omv2-composer-pin svg {
    width:12px;
    height:12px;
  }
  .omv2-composer-row {
    display:flex;
    gap:10px;
    align-items:flex-end;
  }
  .omv2-composer textarea {
    flex:1;
    min-height:42px;
    max-height:120px;
    resize:vertical;
    border:1px solid var(--color-glass-border-strong);
    border-radius:9px;
    background:#fff;
    padding:10px 12px;
    font-family:var(--font-body);
    font-size:13px;
    line-height:1.4;
    color:var(--color-text-primary);
    outline:none;
    box-shadow: inset 0 1px 3px oklch(0.20 0.010 200 / 0.08);
  }
  .omv2-composer textarea::placeholder {
    color:var(--color-text-tertiary);
    font-style:italic;
  }
  .omv2-composer textarea:focus {
    border-color:var(--color-secondary);
    box-shadow:0 0 0 3px var(--color-secondary-muted);
  }
  .omv2-save {
    flex-shrink:0;
    background:var(--color-secondary);
    color:#fff;
    border:1px solid var(--color-secondary);
    border-radius:9px;
    padding:11px 18px;
    font-size:13px;
    font-weight:600;
    cursor:pointer;
    white-space:nowrap;
  }
  .omv2-save:hover {
    background:var(--color-secondary-hover);
  }
}

@media (max-width: 979px) {
  :root[data-v2="1"] .omv2-drawer.omv2-v3 {
    left:0;
    right:0;
    width:100vw;
    min-width:0;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-head {
    padding:8px 10px;
    gap:6px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-head .nav,
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-pills {
    display:none;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-body {
    display:block;
    overflow-y:auto;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-rail {
    border-right:0;
    border-bottom:1px solid var(--color-glass-border-strong);
    padding:16px;
    overflow:visible;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-name {
    font-size:28px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-work {
    min-height:0;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-offer {
    position:static;
    overflow-x:auto;
    padding:16px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-offer .cell {
    min-width:112px;
    padding:0 16px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-offer .cell:first-child {
    min-width:196px;
    padding-left:0;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-offer .big {
    font-size:30px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-sec-head {
    padding:12px 16px 8px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-prop-wrap {
    padding:0 16px 4px;
    overflow-x:auto;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-thead,
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-prow {
    min-width:620px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-composer {
    padding:12px 16px;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-composer-row {
    flex-direction:column;
    align-items:stretch;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-composer textarea {
    width:100%;
  }
  :root[data-v2="1"] .omv2-drawer.omv2-v3 .omv2-save {
    width:100%;
    justify-content:center;
  }
}