/* Default query size for shared/public uses; landlord canvases override it. */
@media screen { :root { container: ow-layout / inline-size; } }
/* The landlord app shell, rebuilt page by page against TurboTenant
   (Downloads/turbotenant-prime-20260904/BUILD-PLAN.html, section 3.3 and 3.4).
   Their layout, our tokens: every colour below is a var() from tokens.css or
   btn-action.css. No Tailwind: the purged bundle only holds classes it has
   seen, so a shell written in utilities silently loses any it invents. */

.ow { margin: 0; background: var(--surface-canvas-app); color: var(--text); font-size: 16px; line-height: 1.45; }
.ow *, .ow *::before, .ow *::after { box-sizing: border-box; }
/* Only prose links take the brand colour. Components set their own; a blanket
   `.ow a` outranked them (0,1,1 beats 0,1,0) and painted the whole rail purple. */
.ow-main p a, .ow-card-foot a, .ow-banner a:not(.ow-btn), .ow-link { color: var(--brand-purple); }
.ow-skip { position: absolute; left: -999px; top: 0; background: var(--surface); padding: 8px 12px; z-index: 100; }
.ow-skip:focus { left: 8px; }
.ow svg.ow-i, .ow-nav-row svg, .ow-tile svg, .ow-quick svg, .ow-acct svg, .ow-todo-head svg, .ow-icon-btn svg, .ow-account svg, .ow-account-menu svg, .ow-burger svg, .ow-rail-close svg { fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* ---------- rail ---------- */
.ow-rail { position: fixed; inset: 0 auto 0 0; width: 250px; background: var(--ow-rail-gradient); border-right: 1px solid var(--ow-rail-border); display: flex; flex-direction: column; z-index: 40; }
.ow-rail-top { position: relative; display: flex; align-items: center; justify-content: center; padding: 18px 20px 12px; }
.ow-logo { display: inline-flex; align-items: center; min-width: 0; max-width: 100%; }
.ow-logo img { display: block; }
.ow-rail-close { display: none; }
.ow-refer { display: block; margin: 6px 16px 10px; text-align: center; text-transform: uppercase; letter-spacing: .06em; font-size: 12px; font-weight: 600; padding: 10px 12px; border-radius: var(--radius-sm); text-decoration: none; }
.ow-nav { flex: 1; overflow-y: auto; padding: 4px 8px 12px; }
.ow-nav-group { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ow-rail-icon); padding: 14px 12px 4px; }
.ow-nav-row { position: relative; display: flex; align-items: center; gap: 12px; padding: 8px 12px 8px 16px; border-radius: var(--radius-sm); color: var(--ow-rail-text); text-decoration: none; font-size: 15px; }
.ow-nav-row svg { width: 20px; height: 20px; flex: none; }
.ow-nav-row:hover { background: var(--ow-rail-hover); color: var(--ow-rail-text-hover); }
/* Selected takes the SAME brand gradient as the hover ring, filled rather than
   outlined, so the two read as one treatment. Ink is --text, not the white the
   old shell used: white on this ramp measures 3.68:1 at the purple stop and
   1.60:1 at the teal (btn-brand.css:69), which is not a nav label. The FILL is
   the owner's bright ramp either way, per his 2026-08-23 decision. */
.ow-nav-row.is-active { background: var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%)); color: var(--text); font-weight: 600; box-shadow: var(--ow-rail-active-glow); }
/* Hover is a brand-gradient RING, not a fill: the owner's pick of 2026-09-02 in
   the shell deleted at 18b38ad5, brought back with it. A real border would make
   the row 2px taller the moment the pointer arrives, so this is a masked
   ::after instead: padding 1px plus an xor mask punches the middle out of a
   gradient-filled overlay, leaving a 1px gradient edge on the row's own radius
   at no layout cost. Active rows are excluded, as they were then. */
.ow-nav-row:not(.is-active)::after {
  content: ""; position: absolute; inset: 0; border-radius: inherit; padding: 1px;
  background: var(--brand-gradient, linear-gradient(135deg, #8C6CFF 0%, #6A9EFF 50%, #48E2D9 100%));
  -webkit-mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  -webkit-mask-composite: xor;
  mask: linear-gradient(#fff 0 0) content-box, linear-gradient(#fff 0 0);
  mask-composite: exclude;
  opacity: 0; transition: opacity 140ms ease; pointer-events: none;
}
.ow-nav-row:not(.is-active):hover::after { opacity: 1; }
.ow-rail-foot { border-top: 1px solid var(--ow-rail-border); padding: 8px; }
.ow-account summary { list-style: none; display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: var(--radius-sm); cursor: pointer; }
.ow-account summary::-webkit-details-marker { display: none; }
.ow-account summary:hover { background: var(--surface-alt); }
.ow-account summary svg { width: 16px; height: 16px; stroke-width: 2; margin-left: auto; transition: transform .15s; }
.ow-account[open] summary svg { transform: rotate(90deg); }
.ow-account .ow-avatar { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-tint-2); color: var(--brand-purple); display: inline-flex; align-items: center; justify-content: center; font-weight: 600; font-size: 13px; flex: none; }
.ow-account-name { font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-account-menu { display: flex; flex-direction: column; padding: 4px 0 2px; }
.ow-account-menu a { display: flex; align-items: center; gap: 10px; padding: 8px 12px; color: var(--text-secondary); text-decoration: none; font-size: 14px; border-radius: var(--radius-sm); }
.ow-account-menu a:hover { background: var(--surface-alt); }
.ow-account-menu svg { width: 16px; height: 16px; }
.ow-scrim { display: none; position: fixed; inset: 0; background: var(--surface-scrim, rgba(15, 23, 42, .45)); z-index: 30; }

/* ---------- page ---------- */
.ow-page { margin-left: 250px; min-height: 100vh; display: flex; flex-direction: column; }
.ow-top { display: flex; align-items: center; gap: 16px; padding: 24px 32px 8px; }
.ow-burger { display: none; }
.ow-top-title { flex: 1; min-width: 0; }
.ow-title { font-size: 26px; font-weight: 600; margin: 0; letter-spacing: -.01em; }
.ow-top-actions { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ow-top-account { position: relative; flex: none; }
.ow-top-account > summary { border: 1px solid var(--border); border-radius: 999px; padding: 5px 10px 5px 5px; max-width: 300px; }
.ow-top-account .ow-account-name { max-width: 150px; }
/* Plan chip inside the account button. Category, not state, so it takes the
   brand pill when paid and the neutral one when free: never ok/warn. */
.ow-account .ow-plan { flex: none; padding: 2px 8px; font-size: 11px; }
.ow-top-account summary svg { transform: rotate(90deg); }
.ow-top-account[open] summary svg { transform: rotate(-90deg); }
.ow-top-account .ow-account-menu { position: absolute; right: 0; top: calc(100% + 6px); min-width: 190px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); z-index: 45; }
.ow-main { padding: 8px 32px 60px; }
.ow-demo { display: flex; align-items: center; gap: 10px; margin: 0 32px; padding: 8px 14px; border-radius: var(--radius-sm); background: var(--info-bg); color: var(--info); border: 1px solid var(--info-border); font-size: 13px; }
.ow-demo > svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ow-demo > span { flex: 1; min-width: 0; }
/* Simulation-on is a state where saving does something other than what the
   landlord intends, so it wears the warning tone rather than info, and always
   carries the word too (Rule 51: never colour alone). */
.ow .ow-demo.sim, .ow-demo.sim { background: var(--warning-bg); color:var(--warning-ink); border-color: var(--warning-border); }
/* owners-navigation.css owns this strip's shape and loads after this file, so
   the state variant is spelled at its specificity. Shape is left to it; only
   the colour that carries the state is taken. */
.ow .ow-demo.sim .ow-demo-off { margin-left: 10px; }
/* One warning, not two. A page that carries the point-of-action version says
   the same thing with the consequence attached, and stacking both ate a third
   of a phone screen before any content. The header chip is still the
   persistent "Simulation On" indicator either way. Degrades to showing both
   where :has() is unsupported, which is the behaviour without this rule. */
.ow:has(.ow-sim-warn) .ow-demo.sim { display: none; }
.ow-demo-off { flex: none; padding: 6px 12px; border-radius: var(--radius-sm); border: 1px solid currentColor; background: transparent; color: inherit; font-size: 12px; font-weight: 600; cursor: pointer; }
.ow-demo-off:hover { background: var(--surface); }
.ow-demo-off[disabled] { opacity: .6; cursor: default; }
/* The same warning at the point of the action, inside the add-property flow. */
.ow-sim-warn { display: flex; align-items: center; gap: 12px; margin: 0 0 18px; padding: 12px 14px; border-radius: var(--radius-md); background: var(--warning-bg); color:var(--warning-ink); border: 1px solid var(--warning-border); font-size: 13px; }
.ow-sim-warn > svg { width: 20px; height: 20px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ow-sim-warn > div { flex: 1; min-width: 0; }
@media (max-width: 720px) { .ow-demo, .ow-sim-warn { flex-wrap: wrap; } .ow-demo-off { width: 100%; } }

/* ---------- simulation switch (header) ----------
   The chip is a <summary>, so open/close, keyboard and Escape come from
   .ow-menu in owners.js and nothing here re-implements them.
   ON is the brand gradient on the BORDER only, over a --surface fill, rather
   than a gradient background: the label sits on this and a brand-gradient fill
   is a decorative token that cannot legibly hold text (DESIGN.md). The state
   is never colour-alone either, the chip spells out ON or OFF beside the dot. */
.ow-sim { flex: none; }
.ow-sim-chip { display: inline-flex; align-items: center; gap: 8px; padding: 6px 12px; border: 1px solid var(--border); border-radius: var(--radius-pill); background: var(--surface); color: var(--text-secondary); font-size: 13px; font-weight: 600; white-space: nowrap; transition: border-color var(--dur-fast, .15s) var(--ease-out, ease), background var(--dur-fast, .15s) var(--ease-out, ease); }
.ow-sim-chip:hover { background: var(--surface-alt); }
.ow-sim-dot { width: 8px; height: 8px; border-radius: var(--radius-pill); background: var(--text-disabled); flex: none; }
.ow-sim-state { font-size: 11px; font-weight: 700; letter-spacing: var(--tracking-label, .08em); color: var(--text-muted); }
.ow-sim-chip.is-on { border-color: var(--brand-purple); background: var(--surface-tint-2); color: var(--text); }
.ow-sim-chip.is-on .ow-sim-dot { background: var(--brand-purple); }
.ow-sim-chip.is-on .ow-sim-state { color: var(--brand-purple); }
.ow-sim-panel { position: absolute; right: 0; top: calc(100% + 6px); width: 320px; padding: 16px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-md, 8px); box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); z-index: 45; }
.ow-sim-title { margin: 0 0 6px; font-size: 15px; font-weight: 600; color: var(--text); }
.ow-sim-copy { margin: 0 0 14px; font-size: 13px; line-height: var(--leading-normal, 1.5); color: var(--text-muted); }
.ow-sim-row { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface-canvas); }
.ow-sim-now { font-size: 14px; font-weight: 600; color: var(--text); }
.ow-sim-sub { font-size: 12px; color: var(--text-muted); }
.ow-sim-switch { position: relative; flex: none; width: 46px; height: 26px; padding: 0; border: 1px solid var(--border-strong); border-radius: var(--radius-pill); background: var(--surface-alt); cursor: pointer; transition: background var(--dur-fast, .15s) var(--ease-out, ease), border-color var(--dur-fast, .15s) var(--ease-out, ease); }
.ow-sim-switch:disabled { cursor: progress; opacity: .6; }
.ow-sim-knob { position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: var(--radius-pill); background: var(--surface); box-shadow: var(--elev-1, 0 1px 3px rgba(15, 23, 42, .25)); transition: transform var(--dur-fast, .15s) var(--ease-out, ease); }
.ow-sim-switch[aria-checked="true"] { background: var(--action-ink); border-color: var(--action-ink); }
.ow-sim-switch[aria-checked="true"] .ow-sim-knob { transform: translateX(20px); }
.ow-sim-switch:focus-visible { outline: 2px solid var(--btn-action-ring); outline-offset: 2px; }
.ow-sim-foot { margin: 12px 0 0; font-size: 12px; color: var(--text-muted); }
/* Phones keep the dot and the ON/OFF word, which is the state; only the long
   label goes, so the control never shrinks to a bare "OFF" with no subject. */
@container ow-layout (max-width: 640px) {
  .ow-sim-word { display: none; }
  .ow-sim-panel { width: min(320px, calc(100vw - 32px)); } }

/* ---------- buttons ---------- */
.ow-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; border-radius: var(--radius-sm); border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; line-height: 1.2; white-space: nowrap; }
.ow-btn:hover { background: var(--surface-alt); }
.ow-btn.primary { background: var(--btn-action-bg); color: var(--btn-action-fg); border-color: transparent; }
.ow-btn.primary:hover { filter: brightness(.96); }
.ow-btn.danger { color: var(--danger); border-color: var(--danger-border); }
.ow-btn.sm { padding: 7px 12px; font-size: 11px; }
.ow-btn:focus-visible, .ow-nav-row:focus-visible, .ow-tile:focus-visible, .ow-pay-tile:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; }
.ow-icon-btn { width: 32px; height: 32px; border-radius: var(--radius-sm); border: 1px solid transparent; background: transparent; color: var(--text-muted); display: inline-flex; align-items: center; justify-content: center; cursor: pointer; flex: none; }
.ow-icon-btn:hover { background: var(--surface-alt); color: var(--text); }
.ow-icon-btn svg { width: 18px; height: 18px; stroke-width: 2; }
.ow-link { font-size: 14px; text-decoration: underline; }

/* ---------- sections and tiles (their dashboard rows) ---------- */
.ow-grid-2 { display: grid; grid-template-columns: minmax(0, 1fr) 340px; gap: 20px; align-items: start; }
.ow-col { display: flex; flex-direction: column; gap: 22px; min-width: 0; }
.ow-section { display: flex; flex-direction: column; gap: 12px; }
.ow-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.ow-section-head h2 { font-size: 17px; font-weight: 500; color: var(--text-secondary); margin: 0; }
.ow-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); background: var(--surface); border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ow-tile { display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 26px 12px 22px; text-decoration: none; color: var(--text); border-right: 1px solid var(--border-hairline); }
.ow-tile:last-child { border-right: 0; }
.ow-tile:hover { background: var(--surface-canvas); }
.ow-tile svg { width: 40px; height: 40px; stroke-width: 1.4; color: var(--text-secondary); }
.ow-tile-label { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; text-align: center; }
.ow-tile-value { font-size: 26px; font-weight: 600; line-height: 1.1; }

/* ---------- cards ----------
   The density pass, 2026-09-09. These six rules are the whole landlord app:
   103 templates render .ow-card, so the padding here is the single number
   that decides how much of Payments, Properties, Tenants, Leases, Accounting
   and Settings a landlord sees without scrolling. It came down from 18/22 to
   14/18, the head margin from 14 to 10, and the two footer links from 14 to
   11. Nothing was removed anywhere and no card lost a link.

   The negative margins on .ow-card-link below, and on .ow-card-split and
   .ow-card-footlink further down, MUST track this padding or the footer stops
   meeting the card edge. The other two read --ow-card-pad-x / -pad-y, which
   are set on .ow-card in the review-pass block: those were changed in step
   with these. This one hardcodes them, so it is edited here.

   THE TRAP, and it cost a measuring pass to find: changing THIS rule alone
   moves almost nothing on the pages that matter. Six variant classes are
   co-classed onto .ow-card and redeclare padding, so they win on source
   order and cancel it silently. In usages: .ow-center-card 63, .ow-pay-card
   13, .ow-chooser-card 5, .ow-esign-card 2, .ow-forms-card 2 and
   .ow-preview-card 1, plus .ow-lease-card-body inside a padding-0 shell.
   All seven were trimmed in the same proportion. If you retune the padding
   here, grep the `card` selectors that carry their own `padding:` and retune
   them together, then MEASURE a real page rather than trusting the cascade.

   Deliberately NOT touched: .ow-subcard, .ow-help-card, .ow-gate-card,
   .ow-rep-card, .ow-table-card, .ow-prop-card, .ow-type-card and .pt-*-card.
   None of those is ever co-classed with .ow-card, so each is its own
   component with its own spacing, not this card wearing a hat. */
.ow-card { background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px 18px; }
.ow-card-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 10px; }
.ow-card-head h2, .ow-card-head h3 { font-size: 18px; font-weight: 600; margin: 0; }
.ow-card-foot { margin: 10px 0 0; font-size: 14px; color: var(--text-muted); }
.ow-card-link { display: block; margin: 12px -18px -14px; padding: 11px; border-top: 1px solid var(--border); text-align: center; font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; text-decoration: none; color: var(--brand-purple); }
.ow-card-link:hover { background: var(--surface-canvas); }

/* payments card */
.ow-pay-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; }
.ow-pay-tile { display: flex; flex-direction: column; gap: 4px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); }
.ow-pay-tile:hover { border-color: var(--border-strong); }
.ow-pay-label { font-size: 13px; font-weight: 600; color: var(--text-secondary); }
.ow-pay-value { font-size: 26px; font-weight: 600; line-height: 1.1; }
.ow-pay-tile.is-ok .ow-pay-value { color: var(--success-soft); }
.ow-pay-tile.is-danger .ow-pay-value { color: var(--danger-soft); }
.ow-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); overflow: hidden; }
.ow-seg a { padding: 6px 14px; font-size: 13px; text-decoration: none; color: var(--text-secondary); font-weight: 600; }
.ow-seg a.is-on { background: var(--surface-tint-2); color: var(--brand-purple); }

/* maintenance to-do card */
.ow-todo-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.ow-todo-head svg { width: 30px; height: 30px; color: var(--text-secondary); flex: none; }
.ow-todo-head h3 { font-size: 19px; font-weight: 600; margin: 0; flex: 1; }
.ow-todo-form { display: flex; align-items: center; gap: 6px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); padding: 2px 6px 2px 2px; }
.ow-todo-form .ow-input { border: 0; box-shadow: none; }
.ow-todo-form .ow-input:focus { box-shadow: none; }
.ow-chips { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.ow-chip { font-size: 12px; font-weight: 600; padding: 6px 10px; border-radius: var(--radius-sm); background: var(--surface-tint-2); color: var(--text-secondary); text-decoration: none; }
.ow-chip:hover { color: var(--brand-purple); }

/* accounts + quick actions */
.ow-acct { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); }
.ow-acct:hover { border-color: var(--border-strong); }
.ow-acct svg { width: 30px; height: 30px; color: var(--text-secondary); flex: none; }
.ow-acct-body { display: flex; flex-direction: column; min-width: 0; flex: 1; }
.ow-acct-name { font-weight: 600; font-size: 16px; }
.ow-acct-sub { font-size: 12px; color: var(--text-muted); }
.ow-quick-card { padding: 0 8px; }
.ow-quick { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.ow-quick a { display: flex; align-items: center; gap: 12px; padding: 14px 12px; color: var(--text); text-decoration: none; font-size: 15px; font-weight: 600; border-bottom: 1px solid var(--border-hairline); }
.ow-quick li:last-child a { border-bottom: 0; }
.ow-quick a:hover { color: var(--brand-purple); }
.ow-quick a span { flex: 1; }
.ow-quick-icon { width: 20px; height: 20px; flex: none; color: var(--text-secondary); }
.ow-quick-chev { width: 16px; height: 16px; flex: none; color: var(--text-muted); stroke-width: 2; }
.ow-banner { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 20px; margin-bottom: 20px; border-radius: 8px; background: var(--surface-tint-2); border: 1px solid var(--border); font-size: 15px; }
.ow-row-ok, .ow-row-warn { display: flex; align-items: center; gap: 10px; margin: 0; font-size: 14px; }
.ow-dot { width: 9px; height: 9px; border-radius: 50%; flex: none; background: var(--text-muted); display: inline-block; }
.ow-dot.ok { background: var(--success); }
.ow-dot.warn { background: var(--warning); }
.ow-dot.danger { background: var(--danger); }

/* ---------- pills (a dot AND a word, never colour alone) ---------- */
.ow-pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600; border: 1px solid var(--border); background: var(--surface-alt); color: var(--text-secondary); white-space: nowrap; }
.ow-pill .ow-dot { width: 7px; height: 7px; }
.ow-pill.ok { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ow-pill.warn { background: var(--warning-bg); color:var(--warning-ink); border-color: var(--warning-border); }
.ow-pill.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ow-pill.info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }

/* ---------- tabs, tables, forms, empty states, menus ---------- */
.ow-tabs { display: flex; gap: 22px; border-bottom: 1px solid var(--border); margin: 0 0 18px; overflow-x: auto; }
.ow-tabs a { padding: 10px 2px 12px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; border-bottom: 2px solid transparent; white-space: nowrap; }
.ow-tabs a.is-on { color: var(--brand-purple); border-bottom-color: var(--brand-purple); }
.ow-badge { display: inline-flex; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 6px; border-radius: 999px; background: var(--brand-purple); color: #fff; font-size: 11px; align-items: center; justify-content: center; }
.ow-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.ow-table th { text-align: left; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); padding: 10px 12px; border-bottom: 1px solid var(--border); }
.ow-table td { padding: 12px; border-bottom: 1px solid var(--border-hairline); vertical-align: middle; }
.ow-table tr:hover td { background: var(--surface-canvas); }
.ow-empty { text-align: center; padding: 48px 20px; color: var(--text-muted); }
.ow-empty h3 { font-size: 18px; font-weight: 600; color: var(--text); margin: 0 0 6px; }
.ow-empty p { margin: 0 auto 16px; }
/* A portfolio with nothing in it has nothing to show, so the empty state shows
   what adding one produces instead. The preview bleeds to the card edge, which
   is what the negative margins are: they cancel .ow-empty's own 48px/20px. The
   paper is cropped to its top third and faded out, so it reads as a document
   continuing past the panel rather than a squashed page. */
.ow-empty-preview { position: relative; height: 320px; margin: -48px -20px 26px; display: flex; align-items: flex-start; justify-content: center; overflow: hidden; border-bottom: 1px solid var(--border); border-radius: 8px 8px 0 0; background: var(--surface-tint-2); }
.ow-empty-preview img { width: 440px; max-width: 84%; height: auto; aspect-ratio: 210 / 148.5; margin-top: 32px; display: block; object-fit: cover; object-position: top center; border: 1px solid var(--border); border-bottom: 0; border-radius: 8px 8px 0 0; background: var(--surface); box-shadow: var(--elev-4); -webkit-mask-image: linear-gradient(180deg, #000 84%, transparent 100%); mask-image: linear-gradient(180deg, #000 84%, transparent 100%); }
@container ow-layout (max-width: 720px) { .ow-empty-preview { height: 200px; } .ow-empty-preview img { margin-top: 26px; } }
.ow-field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.ow-field label { font-size: 13px; font-weight: 600; }
.ow-field .hint { font-size: 12px; color: var(--text-muted); }
.ow-input, .ow-select, .ow-textarea { width: 100%; padding: 10px 12px; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); font: inherit; font-size: 15px; color: var(--text); background: var(--surface); }
.ow-input:focus, .ow-select:focus, .ow-textarea:focus { outline: none; border-color: var(--brand-purple); box-shadow: 0 0 0 3px var(--surface-tint-2); }
.ow-input.is-invalid { border-color: var(--danger); }
/* Google's PlaceAutocompleteElement, on the add-property address screen. It is
   a custom element with a CLOSED shadow root, so the inner input cannot be
   reached and only the host box can be sized; the border and radius below are
   what keep it looking like the .ow-input it replaces. The manual-entry toggle
   under it would stretch the full column width in the flex .ow-field. */
.ow-addr-ac { display: block; width: 100%; --gmp-mat-color-primary: var(--brand-purple); }
.ow-addr-manual { align-self: flex-start; }
.ow-error { color: var(--danger); font-size: 12px; }
.ow-toasts { position: fixed; right: 20px; bottom: 80px; z-index: 1400; display: flex; flex-direction: column; gap: 8px; }
.ow .ow-help { position: fixed; right: 22px; bottom: 22px; width: 44px; height: 44px; border-radius: 50%; background: var(--brand-purple); color: #fff; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; text-decoration: none; box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); z-index: 50; }
.ow-menu { position: relative; display: inline-block; }
.ow-menu-list { position: absolute; right: 0; top: calc(100% + 4px); min-width: 200px; background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius-sm); box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); padding: 4px; z-index: 20; }
.ow-menu-list a, .ow-menu-list button { display: block; width: 100%; text-align: left; padding: 8px 12px; font: inherit; font-size: 14px; color: var(--text-secondary); background: none; border: 0; border-radius: var(--radius-sm); text-decoration: none; cursor: pointer; }
.ow-menu-list a:hover, .ow-menu-list button:hover { background: var(--surface-alt); color: var(--text); }
.ow-menu-list[hidden] { display: none; }

/* ---------- mobile ---------- */
@media (max-width: 960px) {
  .ow-rail { transform: translateX(-100%); transition: transform .2s var(--ease-out, ease-out); width: 280px; }
  .ow-rail.is-open { transform: none; }
  .ow-rail-close { position: absolute; right: 10px; top: 50%; transform: translateY(-50%); display: inline-flex; width: 36px; height: 36px; align-items: center; justify-content: center; border: 0; background: none; color: var(--ow-rail-icon); }
  .ow-rail-close svg { width: 20px; height: 20px; stroke-width: 2; }
  .ow-scrim.is-open { display: block; }
  .ow-page { margin-left: 0; }
  .ow-burger { display: inline-flex; width: 40px; height: 40px; align-items: center; justify-content: center; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); color: var(--text); }
  .ow-burger svg { width: 20px; height: 20px; stroke-width: 2; }
  .ow-top, .ow-main { padding-left: 16px; padding-right: 16px; }
  .ow-top-account { margin-left: auto; }
  .ow-top-account .ow-account-name { display: none; }
  .ow-top-account > summary { padding: 4px; }
  .ow-demo { margin: 0 16px; } }
@container ow-layout (max-width: 960px) {
  .ow-title { font-size: 22px; } }
@container ow-layout (max-width: 960px) {
  .ow-grid-2 { grid-template-columns: 1fr; }
  .ow-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .ow-tile:nth-child(2) { border-right: 0; }
  .ow-tile:nth-child(-n+2) { border-bottom: 1px solid var(--border-hairline); }
  .ow-banner { flex-direction: column; align-items: flex-start; } }
@media (prefers-reduced-motion: reduce) { .ow-rail, .ow-account summary svg { transition: none; } }

/* ---------- phase 1: properties ---------- */
.ow-crumb { font-size: 12px; color: var(--text-muted); margin-bottom: 2px; } .ow-crumb a { color: var(--text-muted); text-decoration: none; }
.ow-prop-list { display: flex; flex-direction: column; gap: 14px; }
.ow-prop-card { display: grid; grid-template-columns: 180px minmax(0, 1fr) auto; gap: 18px; align-items: center; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; padding: 14px; text-decoration: none; color: var(--text); }
.ow-prop-card:hover { border-color: var(--border-strong); }
.ow-prop-photo { width: 180px; height: 120px; border-radius: 6px; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; overflow: hidden; }
.ow-prop-photo img { width: 100%; height: 100%; object-fit: cover; } .ow-prop-photo svg { width: 40px; height: 40px; color: var(--text-muted); fill: none; stroke: currentColor; stroke-width: 1.5; }
.ow-prop-addr { font-size: 17px; font-weight: 600; } .ow-prop-city { color: var(--text-muted); font-size: 14px; } .ow-prop-facts { font-size: 14px; margin-top: 4px; }
.ow-prop-status { margin-top: 8px; display: flex; align-items: center; gap: 8px; } .ow-prop-finish { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .06em; color: var(--brand-purple); }
.ow-prop-units { list-style: none; margin: 10px 0 0; padding: 0; display: flex; flex-direction: column; gap: 4px; font-size: 13px; } .ow-prop-units li { display: flex; gap: 12px; align-items: center; } .ow-prop-unit-facts { color: var(--text-muted); }
.ow-prop-funnel { display: flex; gap: 22px; padding-right: 8px; } .ow-prop-funnel div { text-align: center; } .ow-prop-funnel b { display: block; font-size: 22px; font-weight: 600; } .ow-prop-funnel span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); }
.ow-wizard { max-width: 760px; } .ow-wizard-form { display: block; }
.ow-lede { font-size: 17px; font-weight: 600; margin: 0 0 16px; }
.ow-type-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin-bottom: 20px; }
.ow-type-card { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 18px 16px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; }
.ow-type-card input { position: absolute; opacity: 0; } .ow-type-card:has(input:checked) { border-color: var(--brand-purple); box-shadow: 0 0 0 2px var(--surface-tint-2); }
.ow-type-label { font-weight: 600; } .ow-type-sub { font-size: 12px; color: var(--text-muted); }

/* Jurisdiction tiles on /owners/esign. Scoped to .ow-juris-card so the shared
   .ow-type-card used by the property wizard is untouched. A tile with no
   photograph on disk never gets .has-photo and stays exactly as it was. */
.ow-juris-card { overflow: hidden; text-decoration: none; color: inherit; }
.ow-juris-card.has-photo { min-height: 108px; justify-content: flex-end; padding: 14px; border-color: transparent; }
.ow-juris-photo { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; z-index: 0; }
/* The scrim is the reason the label is readable over a photograph, so it is
   drawn even before the image has decoded. Two passes of the one scrim token
   rather than a pasted rgba: the short pass doubles the alpha under the text,
   which is what carries a label over a bright sunset, and the tall pass fades
   out well before the top so the picture is still the picture. */
.ow-juris-card.has-photo::after { content: ""; position: absolute; inset: 0; z-index: 1;
  background: linear-gradient(to top, var(--surface-scrim) 0%, transparent 46%),
              linear-gradient(to top, var(--surface-scrim) 0%, transparent 88%); }
.ow-juris-card.has-photo .ow-type-label, .ow-juris-card.has-photo small { position: relative; z-index: 2; color: #fff; text-shadow: 0 1px 3px var(--surface-scrim); }
.ow-juris-card.has-photo small { opacity: .94; }
.ow-juris-card:hover { border-color: var(--brand-purple); }
.ow-juris-card.has-photo:hover .ow-juris-photo { transform: scale(1.03); }
.ow-juris-photo { transition: transform .18s ease; }
@media (prefers-reduced-motion: reduce) { .ow-juris-photo { transition: none; } .ow-juris-card.has-photo:hover .ow-juris-photo { transform: none; } }
.ow-fieldset { border: 0; padding: 0; margin: 0 0 18px; } .ow-fieldset legend { font-weight: 600; font-size: 14px; padding: 0; margin-bottom: 6px; }
.ow-fieldset .hint, .ow-field .hint, p.hint { font-size: 13px; color: var(--text-muted); margin: 0 0 8px; }
.ow-radio { display: inline-flex; align-items: center; gap: 8px; margin: 4px 18px 4px 0; font-size: 15px; } .ow-radio-row { display: flex; flex-wrap: wrap; }
.ow-check { display: flex; align-items: flex-start; gap: 8px; font-size: 15px; margin: 6px 0 14px; }
.ow-reveal { margin: 8px 0 4px 26px; }
.ow-field-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.ow-money { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: var(--radius-sm); background: var(--surface); } .ow-money span { padding: 0 10px; color: var(--text-muted); } .ow-money .ow-input { border: 0; }
.ow-input-sm { max-width: 120px; } .ow-select-inline { width: auto; display: inline-block; padding: 4px 8px; font-size: 14px; } .ow-unit-switch { margin: 0 0 14px; color: var(--text-muted); }
/* A dropdown keeps its value and arrow on one line. */
select.ow-select-inline:not([multiple],[size]) { display: inline-flex; }
.ow-wizard-foot { display: flex; justify-content: flex-end; gap: 10px; margin-top: 22px; padding-top: 16px; border-top: 1px solid var(--border-hairline); } .ow-wizard-foot-equal { justify-content: center; }
.ow-alert { padding: 12px 14px; border-radius: var(--radius-sm); border: 1px solid var(--border); background: var(--surface-alt); margin-bottom: 16px; font-size: 14px; }
.ow-alert.danger { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); } .ow-alert.warn { background: var(--warning-bg); color:var(--warning-ink); border-color: var(--warning-border); } .ow-alert.ok { background: var(--success-bg); color: var(--success); border-color: var(--success-border); }
.ow-alert ol { margin: 8px 0 0; padding-left: 20px; }
.ow-units-table .ow-input { min-width: 70px; }
/* Add Units, one card per unit. The key glyph heads the screen the way the
   type screen's art does; the rooms block is inset like .ow-reveal so it
   reads as belonging to the checkbox above it. */
.ow-units-h { display: flex; align-items: center; gap: 12px; font-size: 22px; margin: 0 0 6px; }
.ow-units-key { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; background: var(--surface-alt); color: var(--text-muted); flex: none; }
.ow-units-key svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ow-unit { border: 1px solid var(--border); border-radius: var(--radius-md); padding: 16px 16px 10px; margin: 0 0 14px; background: var(--surface); }
.ow-unit-row { display: grid; grid-template-columns: minmax(0, 2fr) repeat(3, minmax(0, 1fr)); gap: 14px; } .ow-unit-row .ow-field { margin-bottom: 8px; }
.ow-unit .ow-check { margin: 6px 0 8px; align-items: center; }
.ow-rooms { border-left: 3px solid var(--border-strong); padding: 2px 0 2px 14px; margin: 2px 0 12px; } .ow-rooms .hint { margin-bottom: 10px; }
.ow-room { margin-bottom: 10px; } .ow-room-row { display: flex; gap: 8px; align-items: center; } .ow-room-row .ow-input { flex: 1; }
.ow-unit-foot { display: flex; justify-content: flex-end; gap: 8px; margin-top: 4px; }
/* The required state, revealed on submit (property_create.html). Flat danger
   tokens: --danger-bg is the pale field tint, --danger-soft is a solid red. */
/* Units on the property details page, and the search row on the list. */
.ow-units-manage { margin-top: 16px; } .ow-units-manage h3 { margin: 0 0 4px; font-size: 16px; }
.ow-unit-manage-list li { display: flex; align-items: center; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--border-hairline); } .ow-unit-manage-list li .ow-unit-name { font-weight: 600; } .ow-unit-manage-list li .ow-btn { margin-left: auto; }
.ow-add-unit { margin-top: 12px; } .ow-add-unit .ow-field { margin-bottom: 10px; }
.ow-prop-filters { display: flex; gap: 10px; margin: 0 0 14px; } .ow-prop-filters .ow-input { flex: 1; min-width: 0; } .ow-prop-filters .ow-select { flex: 0 0 200px; } .ow-prop-nomatch { margin: 0 0 12px; }
@container ow-layout (max-width: 640px) { .ow-prop-filters { flex-direction: column; } .ow-prop-filters .ow-select { flex-basis: auto; } }
.ow-req { font-size: 12px; color: var(--danger); } .ow-input[aria-invalid="true"] { border-color: var(--danger-border); background: var(--danger-bg); }
@container ow-layout (max-width: 720px) { .ow-unit-row { grid-template-columns: 1fr 1fr; } }
.ow-choice-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 14px; }
.ow-choice { display: flex; flex-direction: column; gap: 6px; padding: 20px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--text); } .ow-choice:hover { border-color: var(--brand-purple); } .ow-choice b { font-size: 17px; } .ow-choice span { font-size: 14px; color: var(--text-muted); }
.ow-interstitial { text-align: center; padding: 34px 30px; } .ow-interstitial h2 { font-size: 24px; margin: 0 0 10px; } .ow-interstitial p { margin: 0 auto 14px; max-width: 56ch; } .ow-interstitial .ow-wizard-foot { justify-content: center; border: 0; }
.ow-big-check { font-size: 44px; color: var(--success); margin: 0; }
.ow-check-list { list-style: none; padding: 0; margin: 10px auto 16px; max-width: 46ch; text-align: left; } .ow-check-list li { padding-left: 24px; position: relative; margin: 6px 0; } .ow-check-list li::before { content: "\2713"; position: absolute; left: 0; color: var(--success); font-weight: 700; }
.ow-steps-list { text-align: left; max-width: 60ch; margin: 0 auto 16px; padding-left: 22px; } .ow-steps-list li { margin: 8px 0; }
.ow-stepper { display: flex; gap: 6px; list-style: none; padding: 0; margin: 0 0 18px; } .ow-stepper li a { display: inline-flex; width: 28px; height: 28px; border-radius: 50%; align-items: center; justify-content: center; font-size: 12px; font-weight: 600; text-decoration: none; border: 1px solid var(--border-strong); color: var(--text-muted); background: var(--surface); }
.ow-stepper li.is-done a { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .ow-stepper li.is-on a { background: var(--brand-purple); border-color: var(--brand-purple); color: #fff; }
.ow-toggle-list { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 8px; }
.ow-toggle { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border: 1px solid var(--border); border-radius: var(--radius-sm); background: var(--surface); cursor: pointer; } .ow-toggle:has(input:checked) { border-color: var(--action-ink); background: var(--action-soft); }
.ow-chips-check { display: flex; flex-wrap: wrap; gap: 8px; } .ow-check-chip { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border: 1px solid var(--border-strong); border-radius: 999px; font-size: 13px; background: var(--surface); cursor: pointer; } .ow-check-chip:has(input:checked) { border-color: var(--action-ink); background: var(--action-soft); color: var(--action-ink); } .ow-check-chip input { margin: 0; accent-color: var(--action-ink); }
.ow-sparkle { margin-left: 8px; font: inherit; font-size: 12px; padding: 3px 10px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface); color: var(--brand-purple); cursor: pointer; } .ow-sparkle:disabled { opacity: .6; }
.ow-ai-feedback { font-size: 13px; color: var(--text-muted); display: flex; gap: 6px; align-items: center; } .ow-ai-feedback button { font: inherit; border: 1px solid var(--border); background: var(--surface); border-radius: 6px; padding: 2px 8px; cursor: pointer; }
.ow-drop { display: flex; align-items: center; justify-content: center; min-height: 120px; border: 2px dashed var(--border-strong); border-radius: 8px; background: var(--surface); cursor: pointer; color: var(--text-muted); margin-bottom: 14px; } .ow-drop input { display: none; } .ow-drop.is-invalid { border-color: var(--danger); color: var(--danger); }
.ow-photo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; } .ow-photo { position: relative; margin: 0; border-radius: 6px; overflow: hidden; border: 1px solid var(--border); } .ow-photo img { width: 100%; aspect-ratio: 4/3; object-fit: cover; display: block; } .ow-photo figcaption { position: absolute; left: 6px; top: 6px; font-size: 11px; background: var(--surface); padding: 2px 6px; border-radius: 4px; } .ow-photo-x { position: absolute; right: 6px; top: 6px; width: 24px; height: 24px; border-radius: 50%; border: 0; background: var(--surface); cursor: pointer; }
.ow-empty-inline { color: var(--text-muted); font-size: 14px; }
.ow-plan-grid { display: grid; gap: 12px; } .ow-plan { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); } .ow-plan.is-on { border-color: var(--brand-purple); } .ow-plan input { display: none; } .ow-plan span { font-size: 14px; color: var(--text-muted); }
.ow-halo { margin-bottom: 8px; }
.ow-prop-hero { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 20px; } .ow-prop-hero-photo { border-radius: 6px; overflow: hidden; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; min-height: 170px; } .ow-prop-hero-photo img { width: 100%; height: 100%; object-fit: cover; } .ow-prop-hero-photo svg { width: 48px; height: 48px; color: var(--text-muted); fill: none; stroke: currentColor; stroke-width: 1.5; }
.ow-prop-hero h2 { font-size: 20px; margin: 0 0 12px; }
.ow-facts { display: flex; flex-wrap: wrap; gap: 22px; margin-bottom: 14px; } .ow-facts div span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .ow-facts div b { font-size: 16px; }
.ow-btn-row { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; } .ow-btn-row form { display: inline; }
.ow-counters-row { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; margin: 6px 0; } .ow-counters-row > * { text-decoration: none; color: var(--text); padding: 10px 12px; border: 1px solid var(--border-hairline); border-radius: 6px; background: var(--surface-canvas); } .ow-counters-row b { display: block; font-size: 22px; font-weight: 600; } .ow-counters-row span { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .ow-counters-row .is-warn b { color:var(--warning-ink); background-color:var(--warning-bg);}
.ow-link-btn { font: inherit; font-size: 12px; color: var(--brand-purple); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline; }
.ow-progress { height: 8px; border-radius: 999px; background: var(--surface-alt); overflow: hidden; margin-bottom: 12px; } .ow-progress span { display: block; height: 100%; background: var(--success); }
.ow-checklist { list-style: none; margin: 0; padding: 0; } .ow-checklist li { display: flex; align-items: flex-start; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--border-hairline); } .ow-checklist li:last-child { border-bottom: 0; }
.ow-checklist-mark { width: 22px; height: 22px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; flex: none; } .ow-checklist li.is-done .ow-checklist-mark { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .ow-checklist li.is-done .ow-checklist-label { text-decoration: line-through; color: var(--text-muted); }
.ow-checklist-label { flex: 1; font-size: 15px; } .ow-recs { margin: 4px 0 0; padding-left: 18px; font-size: 13px; color: var(--text-muted); }
.ow-muted { color: var(--text-muted); font-weight: 400; font-size: 14px; }
.ow-num { text-align: right; } .ow-photo-strip { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; } .ow-photo-strip img { width: 100%; aspect-ratio: 4/3; object-fit: cover; border-radius: 4px; }
.ow-menu-note { display: block; padding: 8px 12px; font-size: 13px; color: var(--text-muted); } .ow-menu-list a.is-danger { color: var(--danger); }
.ow-gear svg { width: 18px; height: 18px; }
.ow-understand { list-style: none; padding: 0; margin: 0 0 8px; }
@container ow-layout (max-width: 960px) { .ow-prop-card { grid-template-columns: minmax(0, 1fr); } .ow-prop-photo { width: 100%; height: 160px; } .ow-prop-funnel { justify-content: flex-start; } .ow-type-grid { grid-template-columns: 1fr 1fr; } .ow-prop-hero { grid-template-columns: 1fr; } .ow-counters-row { grid-template-columns: 1fr 1fr; } }

/* ---------- phase 1, review pass: their column card, their property head, their listing card ---------- */
/* tracks the padding on .ow-card above; .ow-card-split and .ow-card-footlink
   pull their negative margins from these two */
.ow-card { --ow-card-pad-x: 18px; --ow-card-pad-y: 14px; }
.ow-prop-card { align-items: start; }
.ow-tiles-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } .ow-tiles-3 .ow-tile:nth-child(3), .ow-tiles-4 .ow-tile:last-child { border-right: 0; } .ow-tile-value.is-warn { color:var(--warning-ink); background-color:var(--warning-bg);}
.ow-prop-cols { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 12px 34px; margin-top: 12px; } .ow-prop-cols div span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 4px; } .ow-prop-cols div b { font-size: 15px; font-weight: 500; } .ow-prop-cols i { font-style: normal; color: var(--brand-purple); margin: 0 4px; } .ow-prop-cols u { color: var(--brand-purple); } .ow-prop-cols em { font-style: normal; margin-left: 8px; } .ow-prop-cols > div:last-child { min-width: 0; }
.ow-prop-corner { padding-top: 2px; } .ow-prop-finish { margin-top: 10px; }
.ow-prop-units { margin-top: 12px; } .ow-prop-units li { padding: 3px 0; } .ow-prop-unit-name { font-weight: 600; min-width: 52px; } .ow-prop-unit-facts i { font-style: normal; color: var(--brand-purple); margin: 0 3px; }
.ow-wizard-center { margin: 0 auto; }
.ow-center-card { max-width: 625px; margin: 0 auto; padding: 24px 26px 22px; } .ow-center-card h2 { font-size: 24px; margin: 0 0 18px; }
.ow-type-card { align-items: center; text-align: center; padding: 18px 12px; gap: 5px; }
/* The type picker's clay renders sit in a panel rather than loose on the card:
   the tint separates art from label, and it deepens on the checked card the same
   way the border does. Scoped to .ow-type-art, so the jurisdiction tiles on
   /owners/esign, which share .ow-type-card, are untouched. */
.ow-type-art { width: 100%; height: 92px; display: grid; place-items: center; margin-bottom: 6px; border-radius: var(--radius-md); background: var(--surface-alt); }
.ow-type-art img { width: 84px; height: 84px; display: block; object-fit: contain; }
.ow-type-card:has(input:checked) .ow-type-art { background: var(--surface-tint-2); }
/* The sub-type row under "Other Types". Its legend reads as the question the
   room-rentals legend below it is, one size up so it heads a grid, and the
   free-text field under "Something else" keeps the grid's inset. */
.ow-subtypes { margin-top: 2px; } .ow-subtypes legend { font-size: 16px; margin-bottom: 10px; }
.ow-subtypes .ow-type-grid { margin-bottom: 12px; } .ow-subtype-other { max-width: 360px; }
.ow-back { margin-bottom: 16px; }
/* One back link design for every landlord page: link ink from text-links.css, pages set only the margin. */
body.ow a:is(.ow-back, .listing-edit-back, .onboard-back, .history-back, .recommendation-back, .sp-back, .pay-back, .property-workspace-back) { display: inline-flex !important; align-items: center !important; gap: 6px !important; min-height: 44px !important; padding: 0 !important; font: 600 14px/1.4 'Open Sans', sans-serif !important; letter-spacing: normal !important; text-transform: none !important; text-decoration: none !important; }
body.ow a:is(.ow-back, .listing-edit-back, .onboard-back, .history-back, .recommendation-back, .sp-back, .pay-back, .property-workspace-back):is(:hover, :focus-visible) { text-decoration: underline !important; text-underline-offset: 3px; }
.ow-btn-wide { min-width: 230px; justify-content: center; } .ow-center-foot { display: flex; justify-content: center; margin-top: 20px; }
.ow-info-i { display: inline-flex; width: 16px; height: 16px; vertical-align: -3px; margin-left: 4px; color: var(--text-muted); cursor: help; } .ow-info-i svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ow-title-sm { font-size: 14px; font-weight: 600; }
/* A running count beside a page title (Properties). Rides inside the h1, so it
   resets the weight and size back down to body copy and sits on the muted ink. */
.ow-title-meta { display: inline-block; margin-left: 5px; font-size: 15px; font-weight: 400; color: var(--text-muted); white-space: nowrap; }
.ow-title-meta i { font-style: normal; color: var(--border-strong); margin-right: 12px; }
/* nowrap keeps the count on the heading's line on a desktop. On a phone the
   Properties string is wider than the viewport and cannot break, which pushed
   the whole page sideways. Below 720 it becomes its own line instead. */
@container ow-layout (max-width: 720px) { .ow-title-meta { display: block; margin-left: 0; white-space: normal; } }
/* The server-computed quote on /owners/settings/billing/units. Its own block
   rather than a re-styled .ow-card-split, because that class is a two-link
   footer row and overriding its display inline is how the next edit breaks it. */
.ow-plan-quote { margin: 20px 0 4px; padding: 16px 18px; border: 1px solid var(--border); border-radius: var(--radius-md); background: var(--surface-canvas); }
.ow-plan-quote p { margin: 0; }
.ow-plan-quote-name { font-weight: 600; }
.ow-plan-quote-price { font-size: 28px; font-weight: 600; margin-top: 4px !important; }
.ow-plan-quote-price span { font-size: 14px; font-weight: 400; color: var(--text-muted); }
.ow-plan-quote + form { margin-top: 18px; }
.ow-listing-head-row { display: flex; gap: 16px; align-items: flex-start; justify-content: space-between; margin: 4px 0 6px; } .ow-listing-id { display: flex; gap: 14px; align-items: center; min-width: 0; } .ow-listing-id .ow-thumb { width: 88px; height: 88px; flex: none; border-radius: 6px; overflow: hidden; background: var(--surface-alt); display: flex; align-items: center; justify-content: center; } .ow-listing-id .ow-thumb img { width: 100%; height: 100%; object-fit: cover; } .ow-listing-id .ow-thumb svg { width: 32px; height: 32px; color: var(--text-muted); fill: none; stroke: currentColor; stroke-width: 1.5; } .ow-listing-id h2 { font-size: 22px; margin: 0 0 4px; line-height: 1.25; } .ow-listing-id p { margin: 0; font-size: 14px; color: var(--text-muted); }
.ow-rent-line { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); text-align: right; white-space: nowrap; padding-top: 8px; } .ow-rent-line b { font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--text); margin-left: 6px; }
.ow-tabs .ow-count { font-weight: 400; margin-left: 3px; }
.ow-btn .ow-btn-ico { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.6; margin-right: 6px; vertical-align: -3px; }
.ow-hero-grid { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 16px; } .ow-hero-grid .ow-prop-hero-photo { position: relative; overflow: visible; } .ow-hero-grid .ow-prop-hero-photo img { border-radius: 6px; } .ow-prop-hero-photo .ow-pill { position: absolute; left: 0; top: 14px; border-radius: 0 4px 4px 0; white-space: nowrap; z-index: 1; }
.ow-facts-icons { display: grid; grid-template-columns: max-content max-content minmax(0, 1fr); gap: 14px 14px; margin: 0; } .ow-facts-icons > div { display: flex; gap: 4px; align-items: center; } .ow-facts-icons > div > div { white-space: nowrap; } .ow-facts-icons > div:last-child > div { white-space: normal; } .ow-facts-icons svg { width: 22px; height: 22px; flex: none; color: var(--brand-purple); fill: none; stroke: currentColor; stroke-width: 1.4; } .ow-facts-icons span { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .ow-facts-icons b { font-size: 14px; }
.ow-card-split { display: grid; grid-template-columns: 1fr 1fr; margin: 12px calc(-1 * var(--ow-card-pad-x)) calc(-1 * var(--ow-card-pad-y)); border-top: 1px solid var(--border-hairline); } .ow-card-split a { display: block; text-align: center; padding: 11px; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; color: var(--brand-purple); } .ow-card-split a + a { border-left: 1px solid var(--border-hairline); }
.ow-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; } .ow-seg a { padding: 6px 14px; font-size: 13px; font-weight: 600; text-decoration: none; color: var(--text-muted); } .ow-seg a.is-on { background: var(--brand-purple); color: #fff; }
.ow-card-footlink { display: block; text-align: center; margin: 12px calc(-1 * var(--ow-card-pad-x)) calc(-1 * var(--ow-card-pad-y)); padding: 11px; border-top: 1px solid var(--border-hairline); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-purple); text-decoration: none; }
.ow-lease-row { display: grid; grid-template-columns: 1.4fr 1fr .8fr; gap: 14px; padding: 12px 0; border-top: 1px solid var(--border-hairline); } .ow-eyebrow { display: block; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; margin-bottom: 3px; } .ow-eyebrow.is-info { color: var(--brand-purple); } .ow-lease-row a { font-weight: 600; color: var(--text); text-decoration: none; } .ow-lease-row b { font-weight: 500; }
.ow-maint-card p { font-size: 14px; color: var(--text-muted); margin: 8px 0 0; } .ow-maint-card h3 { display: flex; align-items: center; gap: 10px; } .ow-maint-card h3 svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.5; }
.ow-listing-head { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-bottom: 14px; } .ow-listing-head h3 { margin: 0; font-size: 20px; } .ow-listing-head .ow-spacer { flex: 1; }
.ow-textbtn { font: inherit; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--brand-purple); background: none; border: 0; padding: 0; cursor: pointer; text-decoration: none; display: inline-flex; align-items: center; gap: 4px; } .ow-textbtn svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ow-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ow-tiles-4 .ow-tile:nth-child(3) { border-right: 1px solid var(--border-hairline); }
.ow-infoband { display: flex; gap: 10px; align-items: center; padding: 12px 14px; background: var(--surface-tint-2); border-radius: 6px; font-size: 14px; margin-top: 14px; } .ow-infoband svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--brand-purple); }
.ow-progress-row { display: flex; align-items: center; gap: 14px; margin: 12px 0 16px; } .ow-progress-row .ow-progress { flex: 1; margin: 0; } .ow-progress-row b { font-size: 16px; }
.ow-checklist-boxed li { border: 1px solid var(--border); border-radius: 6px; padding: 14px 16px; margin-bottom: 10px; align-items: center; } .ow-checklist-boxed li:last-child { border-bottom: 1px solid var(--border); } .ow-checklist-text { flex: 1; min-width: 0; } .ow-checklist-text b { font-size: 16px; font-weight: 600; } .ow-checklist-text p { margin: 3px 0 0; font-size: 14px; color: var(--text-muted); } .ow-checklist-boxed li.is-done .ow-checklist-text b { text-decoration: line-through; color: var(--text-muted); } .ow-checklist-boxed .ow-recs { margin-top: 6px; }
.ow-dots svg { stroke-width: 3; stroke-linecap: round; }
.ow-expense-empty { text-align: center; padding: 30px 20px 26px; } .ow-expense-empty h3 { font-size: 20px; margin: 0 0 6px; } .ow-expense-empty p { color: var(--text-muted); max-width: 46ch; margin: 0 auto 16px; } .ow-expense-empty .ow-textbtn { margin-top: 16px; }
@container ow-layout (max-width: 720px) { .ow-checklist-boxed li { flex-wrap: wrap; } .ow-checklist-boxed li > .ow-btn { margin-left: 34px; } .ow-checklist-boxed .ow-checklist-text { flex-basis: calc(100% - 34px); } }
@container ow-layout (max-width: 1120px) { .ow-facts-icons { grid-template-columns: repeat(2, max-content); } }
/* Two max-content columns have no upper bound, so a long fact blew the card
   past the viewport and scrolled the whole page sideways on a phone. Bounded
   tracks let the text wrap instead. */
@container ow-layout (max-width: 720px) { .ow-prop-cols { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 12px 18px; } .ow-prop-cols > div:last-child { grid-column: 1 / -1; } }
@container ow-layout (max-width: 960px) { .ow-hero-grid { grid-template-columns: 1fr; } .ow-facts-icons { grid-template-columns: repeat(2, max-content); } .ow-tiles-4 { grid-template-columns: 1fr 1fr; } .ow-tiles-4 .ow-tile:nth-child(3) { border-right: 0; } .ow-lease-row { grid-template-columns: 1fr; } .ow-prop-cols { gap: 18px; } .ow-listing-head-row { flex-direction: column; } .ow-rent-line { text-align: left; } .ow-prop-corner { grid-row: 1; } }

/* ---------- phase 2: the renter funnel ---------- */
.ow-title:empty { display: none; }
.ow-funnel-strip { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; flex-wrap: wrap; } .ow-funnel-strip a { font-size: 15px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--text-muted); text-decoration: none; padding-bottom: 6px; border-bottom: 3px solid transparent; } .ow-funnel-strip a.is-on { color: var(--brand-purple); border-color: var(--brand-purple); } .ow-funnel-strip a span { font-weight: 500; } .ow-funnel-sep { color: var(--text-muted); font-size: 18px; }
.ow-list-head { display: flex; align-items: center; justify-content: space-between; gap: 14px; flex-wrap: wrap; margin: 4px 0 16px; } .ow-list-head h2 { font-size: 24px; margin: 0; } .ow-list-tools { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.ow-table-card { padding: 0; overflow: visible; } .ow-table-scroll { overflow-x: auto; } .ow-table-card .ow-table { margin: 0; } .ow-table-card th { padding: 14px 16px; } .ow-table-card td { padding: 14px 16px; vertical-align: middle; }
.ow-th-check { min-width: 240px; } .ow-check-inline { display: inline-flex; align-items: center; gap: 8px; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; font-weight: 600; }
.ow-lead-cell { display: flex; gap: 12px; align-items: flex-start; } .ow-lead-cell input { margin-top: 4px; } .ow-lead-name { font-weight: 700; color: var(--text); text-decoration: none; } .ow-lead-addr { font-size: 12px; font-weight: 600; color: var(--text-muted); max-width: 220px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-nowrap { white-space: nowrap; }
.ow-activity { display: flex; gap: 12px; } .ow-act { width: 22px; height: 22px; color: var(--border-strong); position: relative; } .ow-act.is-on { color: var(--brand-purple); } .ow-act svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ow-sr { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.ow-eval { display: flex; flex-direction: column; gap: 4px; align-items: flex-start; }
.ow-th-actions, .ow-td-actions { text-align: right; width: 60px; } .ow-td-actions .ow-menu { display: inline-block; position: relative; }
.ow-bulk-bar { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid var(--border-hairline); background: var(--surface-tint-2); border-radius: 0 0 8px 8px; }
.ow-lede-sm { color: var(--text-muted); margin: 0 0 16px; }
.ow-profile-nav { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 8px; } .ow-queue { display: flex; gap: 14px; align-items: center; font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .ow-queue a { color: var(--brand-purple); text-decoration: none; font-size: 18px; } .ow-queue > span:first-child, .ow-queue > span:last-child { font-size: 18px; color: var(--border-strong); }
.ow-profile-head { display: flex; gap: 18px; align-items: flex-start; margin: 6px 0 18px; } .ow-profile-id { flex: 1; min-width: 0; } .ow-profile-id h2 { font-size: 26px; margin: 2px 0 4px; } .ow-profile-contacts { display: flex; gap: 18px; flex-wrap: wrap; margin: 6px 0 0; } .ow-profile-contacts a { color: var(--brand-purple); text-decoration: none; font-weight: 600; } .ow-profile-contacts a svg { display: none; } .ow-profile-actions { display: flex; gap: 10px; align-items: center; }
.ow-pavatar { width: 80px; height: 80px; border-radius: 50%; background: var(--surface-alt); color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 28px; font-weight: 700; flex: none; } .ow-pavatar.is-brand { background: var(--brand-purple); color: #fff; } .ow-pavatar.sm { width: 40px; height: 40px; font-size: 15px; }
.ow-dl { margin: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 12px 24px; } .ow-dl div { min-width: 0; } .ow-dl dt { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); font-weight: 600; } .ow-dl dd { margin: 2px 0 0; font-weight: 500; }
.ow-msg { padding: 10px 14px; border-radius: 8px; margin-bottom: 10px; max-width: 80%; } .ow-msg.is-them { background: var(--surface-alt); } .ow-msg.is-me { background: var(--surface-tint-2); margin-left: auto; } .ow-msg p { margin: 4px 0 0; white-space: pre-wrap; } .ow-msg-meta { font-size: 12px; color: var(--text-muted); }
.ow-reply { margin-top: 12px; } .ow-reply textarea { margin-bottom: 8px; }
.ow-plain-list { list-style: none; margin: 0; padding: 0; } .ow-plain-list li { padding: 8px 0; border-bottom: 1px solid var(--border-hairline); } .ow-plain-list li:last-child { border-bottom: 0; }
.ow-result-list { list-style: none; padding: 0; margin: 0 0 12px; } .ow-result-list li { padding: 10px 12px; border-radius: 6px; margin-bottom: 8px; background: var(--success-bg); color: var(--success); } .ow-result-list li.is-bad { background: var(--danger-bg); color: var(--danger); } .ow-result-list li b { margin-right: 8px; }
.ow-invitee { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.ow-tier { display: flex; gap: 12px; align-items: flex-start; padding: 14px 16px; border: 1px solid var(--border-strong); border-radius: 8px; margin-bottom: 10px; cursor: pointer; background: var(--surface); } .ow-tier:has(input:checked) { border-color: var(--brand-purple); box-shadow: 0 0 0 2px var(--surface-tint-2); } .ow-tier input { margin-top: 4px; } .ow-tier-body { display: flex; flex-direction: column; gap: 3px; } .ow-tier-desc { font-size: 13px; color: var(--text-muted); } .ow-tier-fee { font-size: 14px; } .ow-tier-fee s { color: var(--text-muted); } .ow-tier-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: var(--success); } .ow-tier-tag.is-muted { color: var(--brand-purple); } .ow-tier.is-premium { border-color: var(--success-border); }
.ow-section-h { display: flex; align-items: center; gap: 10px; margin: 22px 0 10px; } .ow-section-h h3 { margin: 0; font-size: 18px; } .ow-section-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; } .ow-section-ico svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--text-secondary); }
.ow-center-note { text-align: center; color: var(--text-muted); font-size: 14px; margin: 16px 0 0; }
.ow-household h3 { font-size: 18px; margin: 0 0 12px; } .ow-app-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 16px 18px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; text-decoration: none; color: var(--text); } .ow-app-row:hover { border-color: var(--brand-purple); } .ow-app-row > div > b { font-size: 16px; } .ow-app-meta { display: flex; gap: 18px; flex-wrap: wrap; margin-top: 6px; font-size: 14px; color: var(--text-muted); } .ow-app-meta b { color: var(--text); font-weight: 500; }
.ow-state { display: inline-flex; align-items: center; gap: 4px; font-weight: 600; } .ow-state svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; } .ow-state.ok { color: var(--success); } .ow-state.bad { color: var(--danger); }
.ow-dashed { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 34px; border: 2px dashed var(--border-strong); border-radius: 8px; text-decoration: none; color: var(--text-muted); font-size: 13px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; } .ow-dashed svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.4; } .ow-dashed:hover { border-color: var(--brand-purple); color: var(--brand-purple); }
.ow-side-tip h3 { font-size: 17px; margin: 0 0 8px; } .ow-side-tip p { font-size: 14px; color: var(--text-muted); margin: 0 0 14px; }
.ow-grid-summary { grid-template-columns: 320px minmax(0, 1fr); }
.ow-journey { list-style: none; margin: 14px 0 0; padding: 0 0 0 26px; position: relative; } .ow-journey::before { content: ""; position: absolute; left: 8px; top: 8px; bottom: 8px; width: 2px; background: var(--border-strong); } .ow-journey li { position: relative; padding: 0 0 18px; } .ow-journey li::before { content: ""; position: absolute; left: -24px; top: 4px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); } .ow-journey li.is-done::before { background: var(--brand-purple); border-color: var(--brand-purple); } .ow-journey b { display: block; } .ow-journey span { font-size: 13px; color: var(--text-muted); }
.ow-overview-tiles { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; } .ow-overview-tiles > div { display: flex; gap: 12px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 8px; } .ow-overview-tiles svg { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--brand-purple); } .ow-overview-tiles b { font-size: 16px; }
.ow-h4 { font-size: 16px; margin: 18px 0 10px; }
.ow-with { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; } .ow-with-card { display: flex; gap: 12px; align-items: center; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; text-decoration: none; color: var(--text); font-size: 14px; } .ow-with-card > span:nth-child(2) { flex: 1; }
.ow-verify { padding: 14px 16px; border-radius: 8px; background: var(--surface-alt); } .ow-verify p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; } .ow-verify.is-ok { background: var(--success-bg); } .ow-verify.is-ok b { color: var(--success); } .ow-verify.is-bad { background: var(--danger-bg); } .ow-verify.is-bad b { color: var(--danger); }
.ow-score { display: flex; align-items: center; gap: 12px; } .ow-score b { font-size: 34px; }
.ow-gauge { position: relative; height: 10px; border-radius: 6px; margin: 14px 0 4px; background: linear-gradient(90deg, var(--danger) 0 25%, var(--warning) 25% 55%, var(--success) 55% 100%); } .ow-gauge-mark { position: absolute; top: -8px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid var(--text); transform: translateX(-50%); } .ow-gauge-ticks { display: flex; justify-content: space-between; font-size: 12px; color: var(--text-muted); margin-bottom: 16px; }
.ow-counts { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; text-align: center; } .ow-counts b { display: block; font-size: 26px; } .ow-counts b.is-ok { color: var(--success); } .ow-counts b.is-bad { color: var(--danger); } .ow-counts span { display: block; font-weight: 600; } .ow-counts small { color: var(--text-muted); }
/* The screening counter art, two-tone: a soft filled under-shape behind a darker
   outline. Paired with _screening_count_icons.html, which carries the paths and
   the reasoning. .16 and not the .22 the rent billing set uses, because that art
   sits on a tinted state disc and this sits on the plain white of .ow-card.
   38px and not the 34 it was drawn at: at 34 the padlock and the figure under
   the lens both went to mush, which the render caught and the markup did not. */
.ow-counts svg { display: block; width: 38px; height: 38px; margin: 0 auto 6px; }
.ow-counts .mk-tint { fill: var(--brand-blue); fill-opacity: .16; stroke: none; }
.ow-counts .mk-ln { fill: none; stroke: var(--brand-deep-blue);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow-counts .mk-pop { fill: var(--brand-teal); stroke: none; }
.ow-counts .mk-pop-ln { fill: none; stroke: var(--brand-teal);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow-frame { width: 100%; min-height: 720px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); } .ow-frame.is-tall { min-height: 1000px; }
.ow-choice-radio { display: flex; gap: 14px; align-items: flex-start; padding: 16px 18px; border: 1px solid var(--border-strong); border-radius: 8px; margin-bottom: 12px; cursor: pointer; } .ow-choice-radio:has(input:checked) { border-color: var(--brand-purple); box-shadow: 0 0 0 2px var(--surface-tint-2); } .ow-choice-radio input { margin-top: 4px; } .ow-choice-radio > span { display: flex; flex-direction: column; gap: 4px; flex: 1; } .ow-choice-radio > span > span { color: var(--text-muted); font-size: 14px; } .ow-choice-radio b { font-size: 16px; }
.ow-fork-card { max-width: 700px; } .ow-fork { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 18px; } .ow-fork-opt { position: relative; padding: 26px 20px 22px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-tint-2); text-align: center; display: flex; flex-direction: column; align-items: center; gap: 8px; } .ow-fork-opt h3 { margin: 6px 0 0; font-size: 20px; } .ow-fork-opt p { margin: 0 0 10px; color: var(--text-muted); font-size: 14px; } .ow-rec { position: absolute; top: -12px; left: 50%; transform: translateX(-50%); font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; background: var(--warning-bg); color:var(--warning-ink); border: 1px solid var(--warning-border); padding: 3px 10px; border-radius: 4px; white-space: nowrap; }
.ow-hr { border: 0; border-top: 1px solid var(--border-hairline); margin: 20px 0; } .ow-q-line { display: flex; gap: 8px; align-items: center; }
.ow-avail-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; padding-bottom: 14px; border-bottom: 1px solid var(--border-hairline); } .ow-avail-id { display: flex; align-items: center; gap: 12px; } .ow-avail-id img { width: 56px; height: 42px; object-fit: cover; border-radius: 4px; } .ow-avail-id a { font-weight: 700; color: var(--text); } .ow-thumb.sm { width: 56px; height: 42px; border-radius: 4px; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; } .ow-thumb.sm svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--text-muted); }
.ow-avail-body { display: grid; grid-template-columns: 1fr 1fr; gap: 0 24px; } .ow-avail-instr { border-left: 1px solid var(--border-hairline); padding-left: 24px; padding-top: 10px; } .ow-instr-text { font-size: 14px; color: var(--text-muted); }
.ow-window { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); } .ow-window form { margin: 0; } .ow-window.is-tint { background: var(--surface-tint-2); border: 0; border-radius: 6px; padding: 12px 14px; margin-bottom: 10px; }
.ow-avail-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 24px; } .ow-date-line { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; } .ow-label { display: block; font-weight: 600; font-size: 14px; margin-bottom: 6px; }
.ow-details summary { cursor: pointer; font-weight: 600; margin: 14px 0 6px; }
.ow-h3 { font-size: 20px; margin: 6px 0 14px; display: flex; align-items: center; gap: 6px; }
.ow-menu-list form { margin: 0; }
@container ow-layout (max-width: 960px) { .ow-grid-summary { grid-template-columns: 1fr; } .ow-fork, .ow-avail-body, .ow-avail-grid, .ow-overview-tiles, .ow-dl { grid-template-columns: 1fr; } .ow-avail-instr { border-left: 0; padding-left: 0; } .ow-counts { grid-template-columns: 1fr 1fr; } .ow-profile-head { flex-wrap: wrap; } .ow-msg { max-width: 100%; } .ow-th-check { min-width: 0; } }

/* ---------- phase 3: leases ---------- */
.ow-seg-lg { margin-bottom: 16px; } .ow-seg-lg a { padding: 8px 18px; font-size: 14px; }
.ow-lease-card { padding: 0; margin-bottom: 14px; } .ow-lease-card-body { display: grid; grid-template-columns: minmax(0, 1.6fr) 1fr .8fr; gap: 18px; padding: 14px 18px; align-items: start; } .ow-lease-card-id h3 { font-size: 18px; margin: 2px 0 4px; } .ow-lease-card-id h3 a { color: var(--text); text-decoration: none; } .ow-lease-card-id p { margin: 0; font-weight: 600; } .ow-lease-card-body b { display: block; font-weight: 500; } .ow-unpaid { color: var(--brand-purple); font-weight: 700 !important; }
.ow-lease-card .ow-card-footlink { margin: 0; border-top: 1px solid var(--border-hairline); }
.ow-eyebrow.is-danger { color: var(--danger); }
.ow-lease-head { margin: 4px 0 14px; } .ow-lease-head h2 { font-size: 26px; margin: 2px 0 4px; } .ow-lease-sub { margin: 0; font-weight: 600; color: var(--text-secondary); }
.ow-chooser { text-align: center; } .ow-chooser h2 { font-size: 26px; margin: 4px 0 20px; } .ow-chooser-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; max-width: 900px; margin: 0 auto; } .ow-chooser-card { display: flex; flex-direction: column; align-items: center; gap: 8px; padding: 20px 18px; } .ow-chooser-card svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.3; color: var(--brand-purple); background: var(--surface-tint-2); border-radius: 50%; padding: 14px; } .ow-chooser-card h3 { margin: 4px 0 0; font-size: 19px; } .ow-chooser-card p { margin: 0 0 8px; color: var(--text-muted); font-size: 14px; }
.ow-track-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; margin: 14px 0; } .ow-track { display: flex; gap: 14px; align-items: center; width: 100%; text-align: left; padding: 18px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-tint-2); font: inherit; cursor: pointer; color: var(--text); } .ow-track:hover { border-color: var(--brand-purple); } .ow-track svg { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; color: var(--brand-purple); } .ow-track > span { display: flex; flex-direction: column; gap: 4px; } .ow-track b { font-size: 17px; }
.ow-count-big { font-size: 20px; color: var(--success); }
.ow-step { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; padding: 0 16px; } .ow-step summary { display: flex; align-items: center; gap: 12px; padding: 14px 0; cursor: pointer; list-style: none; font-size: 16px; } .ow-step summary::-webkit-details-marker { display: none; } .ow-step[open] { border-color: var(--border-strong); } .ow-step-body { padding: 0 0 16px 34px; } .ow-step.is-done summary b { color: var(--text); }
.ow-step-box { width: 20px; height: 20px; border: 1.5px solid var(--border-strong); border-radius: 4px; display: inline-flex; align-items: center; justify-content: center; flex: none; font-size: 13px; color: var(--success); background: var(--surface); } .is-done > .ow-step-box, .is-done > summary > .ow-step-box { background: var(--btn-action-bg); border-color: var(--action-ink); color: var(--btn-action-fg); }
.ow-bullets { margin: 6px 0 12px; padding-left: 18px; } .ow-bullets li { margin: 4px 0; } .ow-bullets li::marker { color: var(--brand-purple); }
.ow-step-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 8px; } .ow-step-foot form { margin: 0; }
.ow-doc-choice { display: flex; justify-content: space-between; align-items: center; gap: 16px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; } .ow-doc-choice form { margin: 0; }
.ow-setup li { align-items: flex-start; } .ow-setup .ow-step-box { margin-top: 2px; } .ow-agreement-opts { margin-top: 12px; border-top: 1px solid var(--border-hairline); padding-top: 12px; } .ow-agreement-opt { display: flex; gap: 12px; align-items: center; } .ow-agreement-opt svg { width: 34px; height: 34px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.4; color: var(--text-secondary); } .ow-agreement-opt > div { flex: 1; } .ow-agreement-opt p { margin: 2px 0 0; font-size: 14px; color: var(--text-muted); } .ow-or { text-align: center; font-size: 12px; font-weight: 700; color: var(--text-muted); margin: 10px 0; }
.ow-restore { margin: 0 0 14px; }
.ow-tenant-row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) 1fr auto; gap: 14px; align-items: center; padding: 12px 0; border-top: 1px solid var(--border-hairline); } .ow-tenant-row a { color: var(--text); text-decoration: none; }
.ow-empty-ico { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.3; color: var(--brand-purple); margin-bottom: 6px; }
.ow-charge-row { display: grid; grid-template-columns: 40px minmax(0, 1.4fr) 1fr auto 36px; gap: 14px; align-items: center; padding: 14px; border: 1px solid var(--border); border-radius: 8px; margin-top: 12px; } .ow-charge-ico { width: 36px; height: 36px; border-radius: 50%; background: var(--surface-tint-2); color: var(--brand-purple); display: inline-flex; align-items: center; justify-content: center; font-weight: 700; }
.ow-guide-intro { display: grid; grid-template-columns: minmax(0, 1.2fr) 1fr; gap: 24px; align-items: center; } .ow-guide-intro h3 { font-size: 22px; margin: 0 0 6px; } .ow-file { font-size: 13px; }
.ow-guide-art { display: flex; justify-content: center; background: var(--brand-purple); border-radius: 10px; padding: 24px; }
.ow-phone { width: 200px; border: 8px solid var(--text); border-radius: 26px; background: var(--surface); overflow: hidden; } .ow-phone-screen { padding: 16px 12px; min-height: 300px; font-size: 12px; } .ow-phone-screen > b { display: block; font-size: 14px; } .ow-phone-screen > span { display: block; color: var(--text-muted); margin-bottom: 10px; } .ow-phone-screen > i { display: block; height: 10px; background: var(--surface-alt); border-radius: 4px; margin: 8px 0; }
.ow-guide-edit { display: grid; grid-template-columns: minmax(0, 1fr) 260px; gap: 20px; align-items: start; } .ow-guide-preview { position: sticky; top: 16px; } .ow-guide-preview .ow-phone { width: 100%; } .ow-phone-live { max-height: 620px; overflow-y: auto; } .ow-pv h5, .ow-pv-contact h5 { margin: 10px 0 2px; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; color: var(--text-muted); } .ow-pv p, .ow-pv-contact p { margin: 0; white-space: pre-wrap; font-size: 12px; } .ow-pv span { display: block; }
@container ow-layout (max-width: 960px) { .ow-lease-card-body, .ow-track-grid, .ow-guide-intro, .ow-guide-edit { grid-template-columns: 1fr; } .ow-tenant-row { grid-template-columns: 40px 1fr; } .ow-charge-row { grid-template-columns: 40px 1fr auto; } .ow-guide-preview { position: static; } }

/* ---------- phase 3b: the agreement builder, the e-sign send, the addendum ---------- */
.ow-builder-bar { display: flex; align-items: center; gap: 16px; flex-wrap: wrap; margin: 0 0 16px; } .ow-builder-bar .ow-back { margin: 0; } .ow-builder-title { flex: 1; margin: 0; font-size: 22px; min-width: 240px; }
.ow-builder { display: grid; grid-template-columns: minmax(0, 1fr) 280px; gap: 18px; align-items: start; }
.ow-builder-main { padding: 26px 28px; } .ow-builder-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 16px; } .ow-builder-head h2 { margin: 0; font-size: 22px; }
.ow-seg-locked { padding: 8px 18px; font-size: 14px; font-weight: 600; color: var(--text-disabled); display: inline-flex; align-items: center; gap: 6px; cursor: not-allowed; } .ow-seg-locked svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ow-know { background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 8px; padding: 18px 22px; margin-bottom: 8px; } .ow-know h3 { margin: 0 0 8px; font-size: 18px; } .ow-know ol { margin: 0; padding-left: 22px; } .ow-know li { margin: 4px 0; } .ow-know p { margin: 0 0 8px; } .ow-know-cta { text-align: center; margin-top: 14px; } .ow-know-cta .hint { margin-top: 6px; }
.ow-warnlist { margin: 6px 0 8px; padding-left: 20px; font-size: 14px; }
.ow-bsec { display: grid; grid-template-columns: 96px minmax(0, 1fr); gap: 16px; padding: 22px 0; border-top: 1px solid var(--border-hairline); } .ow-bsec-ico { display: flex; flex-direction: column; align-items: center; gap: 8px; } .ow-bsec-glyph { width: 88px; height: 88px; border-radius: 50%; background: var(--surface-tint-2); display: flex; align-items: center; justify-content: center; } .ow-bsec-glyph svg { width: 40px; height: 40px; fill: none; stroke: var(--brand-purple); stroke-width: 1.4; }
.ow-bsec-top { display: flex; justify-content: space-between; align-items: center; gap: 12px; } .ow-bsec-top h3 { margin: 0; font-size: 20px; } .ow-bsec-top .ow-textbtn svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; vertical-align: -3px; margin-right: 4px; }
.ow-rb-h { margin: 12px 0 6px; font-size: 14px; font-weight: 700; } .ow-rb-row { display: flex; justify-content: space-between; padding: 8px 14px; background: var(--surface-alt); border-radius: 6px; margin: 4px 0; } .ow-rb-total { text-align: right; font-size: 13px; margin: 4px 0 6px; } .ow-rb-total span { font-size: 11px; letter-spacing: .06em; color: var(--text-muted); font-weight: 700; } .ow-rb-p { margin: 4px 0; } .ow-rb-p.is-strong { font-weight: 600; } .ow-rb-help { margin: 4px 0 0; color: var(--text-muted); }
.ow-rb-kv { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 6px 16px; margin: 6px 0 0; } .ow-rb-kv dt { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; } .ow-rb-kv dd { margin: 0; }
.ow-preview-card { padding: 14px; text-align: center; position: sticky; top: 16px; } .ow-preview-thumb { height: 330px; overflow: hidden; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); margin-bottom: 10px; } .ow-preview-thumb iframe { width: 820px; height: 1100px; border: 0; transform: scale(.3); transform-origin: 0 0; pointer-events: none; }
.ow-bform { max-width: 760px; } .ow-bform .ow-eyebrow { margin-bottom: 2px; } .ow-money { display: flex; align-items: center; gap: 6px; } .ow-money span { color: var(--text-muted); }
.ow-law { display: flex; gap: 8px; align-items: flex-start; font-size: 13px; color: var(--text-secondary); background: var(--surface-tint-2); border-radius: 6px; padding: 8px 10px; margin: 6px 0 14px; } .ow-law svg { width: 16px; height: 16px; flex: none; fill: none; stroke: var(--brand-purple); stroke-width: 2; margin-top: 1px; }
.ow-reveal { border-left: 3px solid var(--border-strong); padding-left: 14px; margin: 0 0 18px; } .ow-plain-list { list-style: none; padding: 0; margin: 4px 0 6px; } .ow-plain-list li { padding: 4px 0; } .ow-opt-list { margin-bottom: 10px; } .ow-opt-list .ow-check { margin: 4px 0 10px; }
.ow-util { width: 100%; border-collapse: collapse; margin: 6px 0 16px; } .ow-util td, .ow-util th { padding: 8px 6px; border-bottom: 1px solid var(--border-hairline); text-align: left; font-size: 14px; } .ow-util th { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .ow-util td:last-child { text-align: right; }
.ow-util .ow-seg { position: relative; } .ow-util .ow-seg label { padding: 6px 14px; font-size: 13px; cursor: pointer; font-weight: 600; color: var(--text-secondary); } .ow-util .ow-seg input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; } .ow-util .ow-seg label:has(input:checked) { background: var(--surface-tint-2); color: var(--brand-purple); } .ow-util .ow-seg label:has(input:focus-visible) { outline: 2px solid var(--brand-purple); outline-offset: -2px; }
.ow-disc { list-style: none; padding: 0; margin: 6px 0 16px; } .ow-disc li { display: flex; gap: 10px; align-items: flex-start; padding: 8px 0; border-bottom: 1px solid var(--border-hairline); } .ow-disc li svg { width: 18px; height: 18px; flex: none; fill: none; stroke: var(--success); stroke-width: 2; margin-top: 2px; } .ow-disc small { display: block; color: var(--text-muted); }
.ow-review { max-width: 960px; margin: 0 auto; padding: 26px 30px; } .ow-review h2 { margin: 0 0 6px; font-size: 24px; } .ow-review-doc { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 70vh; min-height: 520px; margin: 14px 0; } .ow-review-doc iframe { width: 100%; height: 100%; border: 0; }
.ow-disclaimer { font-size: 13px; color: var(--text-secondary); background: var(--surface-alt); border-radius: 6px; padding: 12px 14px; }
.ow-editor { max-width: 1040px; margin: 0 auto; padding: 22px 26px; } .ow-editor-frame { border: 1px solid var(--border); border-radius: 8px; overflow: hidden; height: 70vh; min-height: 560px; margin: 12px 0 16px; } .ow-editor-frame iframe { width: 100%; height: 100%; border: 0; }
.ow-doc-line { display: flex; align-items: center; gap: 12px; padding: 12px 14px; border: 1px solid var(--border); border-radius: 8px; margin-bottom: 18px; } .ow-doc-line svg { width: 28px; height: 28px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; flex: none; } .ow-doc-line > div { flex: 1; display: flex; flex-direction: column; min-width: 0; } .ow-doc-line b { font-size: 15px; }
.ow-esign-q { font-size: 17px; margin: 18px 0 8px; } .ow-signers { list-style: none; padding: 0; margin: 0 0 8px; } .ow-signer label { display: flex; align-items: center; gap: 14px; padding: 12px 4px; border-bottom: 1px solid var(--border-hairline); cursor: pointer; } .ow-signer.is-off label { color: var(--text-muted); cursor: default; } .ow-signer input { width: 18px; height: 18px; } .ow-extra-signer { margin: 8px 0; }
.ow-sig-avatar { width: 46px; height: 46px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-weight: 700; font-size: 15px; color: var(--text); flex: none; background: var(--surface-tint-2); } .ow-sig-avatar.c1 { background: var(--success-bg); } .ow-sig-avatar.c2 { background: var(--warning-bg); } .ow-sig-avatar.c3 { background: var(--info-bg); } .ow-sig-avatar.c4 { background: var(--danger-bg); }
.ow-sig-id { display: flex; flex-direction: column; min-width: 0; } .ow-sig-id b { font-size: 16px; } .ow-sig-id span { font-size: 14px; color: var(--text-muted); overflow-wrap: anywhere; }
.ow-radio-stack { display: flex; flex-direction: column; gap: 6px; margin-bottom: 12px; } .ow-radio-stack .ow-radio { flex-wrap: wrap; margin-right: 0; } .ow-radio-hint { flex-basis: 100%; padding-left: 26px; font-size: 13px; color: var(--text-muted); }
.ow-sig-input { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 24px; }
.ow-add-types { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px; } .ow-add-type { position: relative; } .ow-add-type input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ow-add-type span { display: block; text-align: center; padding: 14px 10px; border: 1px solid var(--border-strong); border-radius: 8px; font-weight: 600; cursor: pointer; } .ow-add-type input:checked + span { border-color: var(--brand-purple); background: var(--surface-tint-2); color: var(--brand-purple); } .ow-add-type input:focus-visible + span { outline: 2px solid var(--brand-purple); }
.ow-builder > * { min-width: 0; } .ow-preview-thumb { width: 246px; margin-left: auto; margin-right: auto; }
.ow-bform .ow-center-foot, .ow-esign .ow-center-foot { flex-wrap: wrap; gap: 8px; }
@container ow-layout (max-width: 600px) { .ow-bform .ow-btn-wide, .ow-esign .ow-btn-wide { min-width: 0; width: 100%; } }
@container ow-layout (max-width: 960px) { .ow-builder { grid-template-columns: 1fr; } .ow-preview-card { position: static; } .ow-bsec { grid-template-columns: 1fr; } .ow-bsec-ico { flex-direction: row; } .ow-builder-title { font-size: 19px; } .ow-builder-bar .ow-btn-row { width: 100%; } .ow-util td:last-child { text-align: left; } }

/* ---------- phase 4: documents, e-sign, condition reports, forms, templates ---------- */
.ow-tabs-docs { margin-top: 4px; } .ow-tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--brand-purple); color: #fff; font-size: 11px; font-weight: 700; margin-left: 2px; vertical-align: 1px; }
.ow-promo-pair { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-bottom: 18px; } .ow-promo { display: flex; align-items: center; gap: 16px; padding: 22px 24px; background: var(--info-bg); border: 1px solid var(--info-border); border-radius: 10px; text-decoration: none; color: var(--text); } .ow-promo svg { width: 40px; height: 40px; fill: none; stroke: var(--brand-purple); stroke-width: 1.4; flex: none; } .ow-promo span { flex: 1; display: flex; flex-direction: column; gap: 2px; } .ow-promo b { font-size: 17px; } .ow-promo small { font-size: 14px; color: var(--text-secondary); } .ow-promo i { font-style: normal; font-size: 28px; color: var(--brand-purple); }
.ow-filters { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 14px; } .ow-filters-spacer { flex: 1; } .ow-select.sm, .ow-input.sm { padding: 8px 10px; font-size: 13px; width: auto; min-width: 150px; } .ow-check-inline { display: inline-flex; align-items: center; gap: 6px; font-size: 14px; }
.ow-upload-panel { padding: 20px 22px; margin-bottom: 14px; }
.ow-doc-title { color: var(--text); font-weight: 600; text-decoration: none; } .ow-doc-title:hover { color: var(--brand-purple); }
.ow-rowmenu { position: relative; display: inline-block; } .ow-rowmenu summary { list-style: none; cursor: pointer; width: 32px; height: 32px; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; font-size: 20px; color: var(--text-secondary); } .ow-rowmenu summary::-webkit-details-marker { display: none; } .ow-rowmenu summary:hover { background: var(--surface-alt); }
.ow-rowmenu > div { position: absolute; right: 0; top: 34px; z-index: 30; min-width: 190px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 0; display: flex; flex-direction: column; text-align: left; } .ow-rowmenu > div a, .ow-rowmenu > div button { display: block; width: 100%; text-align: left; padding: 9px 14px; font: inherit; font-size: 14px; color: var(--text); background: none; border: 0; text-decoration: none; cursor: pointer; } .ow-rowmenu > div a:hover, .ow-rowmenu > div button:hover { background: var(--surface-alt); } .ow-rowmenu > div form { margin: 0; } .ow-rowmenu .is-danger { color: var(--danger); }
.ow-secure-note { display: flex; align-items: center; justify-content: center; gap: 8px; color: var(--text-muted); font-size: 14px; margin: 14px 0; } .ow-secure-note svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ow-esign-card { padding: 17px 21px; margin-bottom: 12px; } .ow-esign-card h3 { margin: 2px 0 2px; font-size: 21px; } .ow-eyebrow.is-turn { color: var(--brand-purple); }
.ow-esign-doc { display: flex; align-items: center; gap: 12px; margin: 12px 0 16px; } .ow-esign-doc svg { width: 34px; height: 34px; fill: none; stroke: var(--text-secondary); stroke-width: 1.4; } .ow-esign-doc a { font-weight: 600; flex: 1; } .ow-esign-doc form { margin: 0; }
.ow-sigtrack { list-style: none; padding: 0; margin: 0; } .ow-sigtrack li { position: relative; padding: 0 0 18px 30px; } .ow-sigtrack li::before { content: ""; position: absolute; left: 8px; top: 18px; bottom: -4px; width: 2px; background: var(--border); } .ow-sigtrack li:last-child::before { display: none; }
.ow-sigtrack-dot { position: absolute; left: 0; top: 2px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); } .ow-sigtrack li.is-done .ow-sigtrack-dot { background: var(--brand-purple); border-color: var(--brand-purple); }
.ow-sigtrack-row { display: flex; justify-content: space-between; gap: 16px; align-items: flex-start; flex-wrap: wrap; } .ow-sigtrack-row > b { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-secondary); min-width: 120px; padding-top: 4px; } .ow-sigtrack-right { display: flex; align-items: center; gap: 12px; margin-left: auto; } .ow-sigtrack-right form { margin: 0; }
.ow-sigtrack-signers { flex: 1; display: flex; flex-direction: column; gap: 10px; } .ow-sigtrack-signer { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding-bottom: 10px; border-bottom: 1px solid var(--border-hairline); }
.ow-steps-num { list-style: none; counter-reset: st; padding: 0; margin: 12px 0 18px; } .ow-steps-num li { counter-increment: st; position: relative; padding: 0 0 12px 40px; } .ow-steps-num li::before { content: counter(st); position: absolute; left: 0; top: 0; width: 26px; height: 26px; border-radius: 50%; background: var(--surface-tint-2); color: var(--brand-purple); font-weight: 700; font-size: 13px; display: flex; align-items: center; justify-content: center; } .ow-steps-num li b { display: block; } .ow-steps-num li span { display: block; color: var(--text-secondary); }
.ow-cr-intro { max-width: 900px; margin: 0 auto; padding: 30px 36px; text-align: center; } .ow-cr-intro h3 { font-size: 22px; margin: 0 0 16px; } .ow-cr-intro .ow-steps-num { text-align: left; max-width: 520px; margin: 18px auto; }
.ow-cr-art { display: flex; justify-content: center; margin: 0 0 10px; } .ow-cr-art-card { width: 360px; text-align: left; border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; background: var(--surface); font-size: 11px; } .ow-cr-art-card b { display: block; font-size: 13px; } .ow-cr-art-card small { color: var(--text-muted); } .ow-cr-art-row { display: flex; align-items: center; gap: 4px; padding: 6px 0; border-top: 1px solid var(--border-hairline); margin-top: 6px; } .ow-cr-art-row span { flex: 1; } .ow-cr-art-row i { font-style: normal; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-muted); font-size: 10px; } .ow-cr-art-row i.on { background: var(--success-bg); color: var(--success); border-color: var(--success-border); } .ow-cr-art-row i.bad { background: var(--danger-bg); color: var(--danger); border-color: var(--danger-border); }
.ow-forms-card { padding: 19px 22px; margin-bottom: 14px; } .ow-forms-h { font-size: 24px; margin: 2px 0 6px; } .ow-forms-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; } .ow-forms-search { display: flex; gap: 8px; align-items: center; }
.ow-form-row { display: flex; gap: 16px; align-items: center; padding: 16px 0; border-top: 1px solid var(--border-hairline); } .ow-form-row > div { flex: 1; min-width: 0; } .ow-form-row b { font-size: 16px; } .ow-form-row p { margin: 2px 0 0; color: var(--text-secondary); font-size: 14px; } .ow-form-ico { width: 52px; height: 52px; border-radius: 50%; background: var(--surface-tint-2); display: inline-flex; align-items: center; justify-content: center; flex: none; } .ow-form-ico svg { width: 24px; height: 24px; fill: none; stroke: var(--brand-purple); stroke-width: 1.6; } .ow-form-row-big b { font-size: 18px; }
.ow-forms-body { display: grid; grid-template-columns: minmax(0, 1fr) 220px; gap: 24px; margin-top: 8px; } .ow-forms-cats { display: flex; flex-direction: column; gap: 6px; } .ow-forms-cats a { text-decoration: none; color: var(--text); font-size: 14px; padding: 6px 8px; border-radius: 6px; } .ow-forms-cats a.is-on { background: var(--surface-tint-2); color: var(--brand-purple); font-weight: 600; }
.ow-tpl-empty { text-align: center; padding: 30px 20px 26px; max-width: 520px; margin: 0 auto; } .ow-tpl-empty h3 { font-size: 24px; margin: 8px 0 8px; } .ow-tpl-empty p { color: var(--text-secondary); margin: 0 0 18px; } .ow-tpl-art { width: 120px; height: 140px; margin: 0 auto 14px; border: 2px solid var(--border-strong); border-radius: 6px; padding: 18px 16px; display: flex; flex-direction: column; gap: 12px; background: var(--surface); } .ow-tpl-art span { height: 8px; border-radius: 4px; background: var(--border); } .ow-tpl-art span.sig { height: 22px; background: var(--info-bg); border: 1px solid var(--info-border); }
.ow-inline-rename { display: flex; gap: 6px; margin-top: 6px; } .ow-inline-rename input { min-width: 200px; }
.ow-esign-intro { text-align: left; } .ow-esign-hero { background: var(--brand-purple); border-radius: 10px; padding: 26px 26px 0; margin: -30px -32px 20px; } .ow-esign-hero-card { background: var(--surface); border-radius: 8px 8px 0 0; padding: 16px 18px 12px; max-width: 320px; margin: 0 auto; } .ow-esign-hero-card > b { font-size: 17px; display: block; } .ow-esign-hero-card > span { display: flex; align-items: center; gap: 6px; font-size: 13px; margin: 6px 0 10px; } .ow-esign-hero-card svg { width: 18px; height: 18px; fill: none; stroke: var(--brand-purple); stroke-width: 1.6; } .ow-esign-hero-row { display: flex; justify-content: space-between; align-items: center; font-size: 13px; } .ow-esign-hero-row i { font-style: normal; background: var(--warning-bg); color:var(--warning-ink); border: 1px solid var(--warning-border); padding: 3px 8px; border-radius: 4px; font-size: 11px; font-weight: 700; text-transform: uppercase; }
.ow-sent { text-align: left; } .ow-sent-band { background: var(--brand-purple); border-radius: 10px 10px 0 0; margin: -30px -32px 20px; height: 150px; display: flex; align-items: center; justify-content: center; background-image: radial-gradient(circle at 0 0, rgba(255,255,255,.35) 2px, transparent 2.5px); background-size: 18px 18px; } .ow-sent-check { width: 88px; height: 88px; border-radius: 50%; background: var(--success); display: flex; align-items: center; justify-content: center; } .ow-sent-check svg { width: 46px; height: 46px; fill: none; stroke: #fff; stroke-width: 3; }
.ow-doclist { list-style: none; padding: 0; margin: 0 0 16px; } .ow-doclist li { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--border-hairline); } .ow-doclist svg { width: 28px; height: 28px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; flex: none; } .ow-doclist li > div { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ow-crt-space { border: 1px solid var(--border); border-radius: 8px; padding: 12px 14px; margin: 0 0 12px; } .ow-crt-space-head { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .ow-crt-space-head input { flex: 1; font-weight: 600; } .ow-textbtn.is-danger { color: var(--danger); }
.ow-radio-row-lg .ow-radio { font-size: 18px; margin-right: 26px; }
.ow-cr-head { display: flex; align-items: center; gap: 14px; margin: 0 0 8px; } .ow-cr-head h2 { margin: 0; font-size: 24px; } .ow-cr-head p { margin: 0; } .ow-cr-head > div { flex: 1; } .ow-cr-glyph { width: 52px; height: 52px; border-radius: 12px; background: var(--surface-tint-2); display: flex; align-items: center; justify-content: center; } .ow-cr-glyph svg { width: 28px; height: 28px; fill: none; stroke: var(--brand-purple); stroke-width: 1.6; }
.ow-cr-progress { height: 6px; background: var(--border); border-radius: 3px; margin: 0 0 18px; overflow: hidden; } .ow-cr-progress span { display: block; height: 100%; background: var(--success); }
.ow-cr-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 18px; align-items: start; } .ow-cr-nav { position: sticky; top: 16px; } .ow-cr-rooms { list-style: none; padding: 0; margin: 10px 0 12px; } .ow-cr-rooms li a { display: block; padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text); font-size: 14px; } .ow-cr-rooms li.is-cur a { background: var(--surface-tint-2); color: var(--brand-purple); font-weight: 600; } .ow-cr-rooms li.is-done a::after { content: " \2713"; color: var(--success); }
.ow-cr-main { padding: 26px 28px; } .ow-cr-room { font-size: 20px; margin: 14px 0 6px; } .ow-cr-item { padding: 14px 0; border-top: 1px solid var(--border-hairline); } .ow-cr-item-head b { font-size: 16px; }
.ow-cr-pills { display: flex; gap: 8px; flex-wrap: wrap; margin: 8px 0 4px; } .ow-cr-pill { position: relative; } .ow-cr-pill input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ow-cr-pill span { display: inline-block; padding: 7px 16px; border-radius: 999px; border: 1px solid var(--border-strong); font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-secondary); background: var(--surface); }
.ow-cr-pill input:checked + span { color: var(--text); } .ow-cr-pill.good input:checked + span { background: var(--success-bg); border-color: var(--success-border); color: var(--success); } .ow-cr-pill.fair input:checked + span { background: var(--warning-bg); border-color: var(--warning-border); color:var(--warning-ink); } .ow-cr-pill.poor input:checked + span { background: var(--danger-bg); border-color: var(--danger-border); color: var(--danger); } .ow-cr-pill.not_present input:checked + span { background: var(--surface-alt); } .ow-cr-pill input:focus-visible + span { outline: 2px solid var(--brand-purple); }
.ow-cr-detail { display: none; margin-top: 8px; padding: 10px 12px; border-left: 3px solid var(--border-strong); } .ow-cr-detail.is-open { display: block; } .ow-cr-detail.is-required { border-left-color: var(--warning); } .ow-cr-detail em[data-req] { display: none; font-style: normal; font-weight: 400; color:var(--warning-ink); font-size: 12px; background-color:var(--warning-bg);} .ow-cr-detail.is-required em[data-req] { display: inline; } .ow-cr-thumb img { max-width: 160px; max-height: 120px; border-radius: 6px; border: 1px solid var(--border); display: block; margin: 4px 0 6px; }
.ow-plain-ol { padding-left: 20px; margin: 8px 0 14px; color: var(--text-secondary); } .ow-plain-ol li { margin: 4px 0; }
.ow-cr-sig { margin: 12px 0 8px; padding: 22px; border: 1px dashed var(--border-strong); border-radius: 8px; text-align: center; background: var(--surface-alt); min-height: 70px; } .ow-cr-sig span { font-family: "Brush Script MT", "Segoe Script", cursive; font-size: 34px; color: var(--text-disabled); } .ow-cr-sig.is-on span { color: var(--brand-purple); }
.ow-att li { font-size: 14px; }
.ow-spark { width: 22px; height: 22px; fill: var(--brand-purple); vertical-align: -3px; }
.ow-cmp-pick { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin: 4px 0 16px; } .ow-cmp-pick .ow-field { flex: 1; min-width: 220px; margin: 0; } .ow-cmp-to { padding-bottom: 12px; font-weight: 600; } .ow-cmp-pick .ow-btn { margin-bottom: 2px; }
.ow-cmp-ai { display: flex; gap: 12px; padding: 16px 18px; border: 1px solid var(--info-border); border-radius: 8px; background: var(--surface); margin-bottom: 14px; } .ow-cmp-ai > div { flex: 1; } .ow-cmp-ai p { margin: 4px 0 0; } .ow-cmp-ai .ow-spark { flex: none; margin-top: 2px; }
.ow-cmp-kpis { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; margin-bottom: 16px; } .ow-cmp-kpis > div { border: 1px solid var(--border); border-radius: 8px; padding: 14px; text-align: center; } .ow-cmp-kpis > div.is-on { background: var(--info-bg); border-color: var(--info-border); } .ow-cmp-kpis b { display: block; font-size: 30px; line-height: 1.1; } .ow-cmp-kpis b.is-bad { color: var(--danger); } .ow-cmp-kpis b.is-good { color: var(--success); } .ow-cmp-kpis span { font-size: 13px; color: var(--text-secondary); }
.ow-cmp-room { border: 1px solid var(--border); border-radius: 8px; margin-bottom: 10px; } .ow-cmp-room summary { display: flex; justify-content: space-between; align-items: center; padding: 14px 18px; cursor: pointer; list-style: none; font-size: 17px; font-weight: 600; } .ow-cmp-room summary::-webkit-details-marker { display: none; } .ow-cmp-room summary::after { content: "\2304"; font-size: 18px; color: var(--text-muted); margin-left: 10px; } .ow-cmp-room[open] summary::after { content: "\2303"; } .ow-cmp-badge { color: var(--danger); font-size: 14px; margin-left: auto; margin-right: 6px; }
.ow-cmp-table td { vertical-align: top; } .ow-cmp-table tr.is-worse td:first-child { border-left: 3px solid var(--danger); } .ow-cmp-table tr.is-better td:first-child { border-left: 3px solid var(--success); } .ow-cmp-arrow { color: var(--danger); } .ow-cmp-arrow.is-good { color: var(--success); } .ow-cmp-note { margin: 6px 0 0; font-size: 13px; color: var(--text-secondary); } .ow-cmp-flag { margin: 4px 0 0; font-size: 13px; color: var(--danger); font-weight: 600; } .ow-cmp-notes { margin: 6px 0 0; font-size: 13px; } .ow-cmp-img { width: 72px; height: 54px; object-fit: cover; border-radius: 4px; border: 1px solid var(--border); margin-top: 6px; }
.ow-iconbtn { display: inline-flex; width: 34px; height: 34px; border: 1px solid var(--border); border-radius: 8px; align-items: center; justify-content: center; color: var(--text-secondary); } .ow-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ow-iconbtn:hover { color: var(--brand-purple); border-color: var(--brand-purple); }
.ow-cr-types { list-style: none; padding: 0; margin: 0; } .ow-cr-type { display: grid; grid-template-columns: 56px minmax(0, 1fr) auto; gap: 16px; align-items: center; padding: 18px 0; border-top: 1px solid var(--border-hairline); } .ow-cr-type svg { width: 44px; height: 44px; fill: none; stroke: var(--text-secondary); stroke-width: 1.4; } .ow-cr-type h4 { margin: 0 0 2px; font-size: 19px; } .ow-cr-type p { margin: 0; color: var(--text-secondary); } .ow-cr-type .ow-btn-row form { margin: 0; } .ow-cr-upload { display: inline-flex; align-items: center; gap: 6px; }
.ow-cr-tplbox { margin: 6px 0 4px; } .ow-cr-tplbox h3 { font-size: 22px; margin: 0 0 2px; } .ow-cr-tplbox p { margin: 0; color: var(--text-secondary); }
@container ow-layout (max-width: 960px) { .ow-promo-pair, .ow-forms-body, .ow-cr-layout { grid-template-columns: 1fr; } .ow-cr-nav { position: static; } .ow-cr-rooms { display: flex; flex-wrap: wrap; gap: 4px; } .ow-cr-type { grid-template-columns: 44px 1fr; } .ow-cr-type .ow-btn-row { grid-column: 1 / -1; } .ow-esign-hero, .ow-sent-band { margin-left: -16px; margin-right: -16px; } .ow-sigtrack-row > b { min-width: 0; } }
@container ow-layout (max-width: 600px) { .ow-forms-search { flex-wrap: wrap; width: 100%; } .ow-select.sm, .ow-input.sm { min-width: 0; flex: 1 1 140px; max-width: 100%; } .ow-forms-card, .ow-esign-card { padding: 14px 14px; } .ow-filters { gap: 8px; } }
.ow-cr-layout > * { min-width: 0; max-width: 100%; } .ow-cr-main form, .ow-cr-item, .ow-cr-detail { min-width: 0; max-width: 100%; } .ow-cr-detail input[type=file] { max-width: 100%; }
@container ow-layout (max-width: 600px) { .ow-cr-head { flex-wrap: wrap; } .ow-cr-main { padding: 18px 14px; } .ow-cr-main .ow-center-foot .ow-btn-wide { min-width: 0; } }

/* ---------- phase 5: payments ---------- */
.ow-pay-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 4px 0 8px; } .ow-pay-head h2 { font-size: 26px; margin: 0; display: flex; align-items: center; gap: 8px; } .ow-gear { display: inline-flex; color: var(--text-muted); } .ow-gear svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.6; }
.ow-menu { position: relative; } .ow-menu summary { list-style: none; cursor: pointer; } .ow-menu summary::-webkit-details-marker { display: none; } .ow-menu-list { position: absolute; right: 0; top: 44px; z-index: 30; min-width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: 0 8px 24px rgba(0,0,0,.12); padding: 6px 0; display: flex; flex-direction: column; } .ow-menu-list a { padding: 9px 14px; text-decoration: none; color: var(--text); font-size: 14px; } .ow-menu-list a:hover { background: var(--surface-alt); }
.ow-pay-card { padding: 17px 21px; margin-bottom: 12px; } .ow-pay-h3 { font-size: 22px; margin: 4px 0 12px; } .ow-pay-month { font-size: 20px; margin: 0 0 10px; }
.ow-tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; } .ow-tiles-4 { grid-template-columns: repeat(4, 1fr); margin: 10px 0 18px; } .ow-tile { position: relative; display: flex; flex-direction: column; gap: 8px; padding: 22px 24px; border-radius: 8px; background: var(--brand-purple); color: #fff; text-decoration: none; } .ow-tile span { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; font-weight: 700; opacity: .9; } .ow-tile b { font-size: 32px; line-height: 1; } .ow-tile i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%); font-style: normal; font-size: 30px; opacity: .8; } .ow-tile.is-flat { background: var(--surface-tint-2); color: var(--text); } .ow-tile.is-flat span { color: var(--text-secondary); }
.ow-rentroll, .ow-pay-prompt { display: flex; justify-content: space-between; align-items: center; gap: 16px; } .ow-rentroll h3, .ow-pay-prompt h3 { margin: 0 0 4px; font-size: 20px; } .ow-rentroll p, .ow-pay-prompt p { margin: 0; }
.ow-chg-head, .ow-chg summary { display: grid; grid-template-columns: 78px minmax(0, 104px) minmax(0, 1.7fr) 88px minmax(0, 1fr) 100px 16px; gap: 10px; align-items: center; } .ow-chg-head { font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); font-weight: 700; padding: 6px 0 8px; border-bottom: 1px solid var(--border); }
/* SEVEN COLUMNS IN A 725px PANE. These were sized for the full content width, back when
   Payments was a tab strip over the whole page. The menu down the side takes 226px of it,
   and at 1280 (a normal laptop) the old fixed 96/130/130/110 left the lease column under
   100px, which wrapped an address to six lines. Fixed columns are cut to what their own
   content actually measures and the slack goes to the lease. Below 960 the media query
   further down still folds the whole row into two columns, which is the real narrow case. */
.ow-chg { border-bottom: 1px solid var(--border-hairline); } .ow-chg summary { padding: 14px 0; cursor: pointer; list-style: none; } .ow-chg summary::-webkit-details-marker { display: none; } .ow-chg-cat { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; } .ow-chg-ico { width: 24px; height: 24px; border-radius: 50%; border: 1px solid var(--border-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--text-secondary); }
.ow-chg-lease a { color: var(--brand-purple); } .ow-chg-lease small, .ow-chg-status small { display: block; color: var(--text-muted); font-size: 12px; } .ow-chg-dep b { display: block; font-size: 13px; } .ow-chg-dep i { display: block; font-size: 13px; color: var(--text-secondary); } .ow-chg-amt { text-align: right; } .ow-chg-amt b { display: block; font-size: 17px; } .ow-chg-amt small { color: var(--text-muted); } .ow-chg-caret { color: var(--text-muted); font-size: 18px; text-align: right; } .ow-chg[open] .ow-chg-caret { transform: rotate(180deg); }
.ow-chg-body { padding: 4px 0 18px; } .ow-chg-desc { margin: 8px 0; color: var(--text-secondary); }
.ow-tracker { list-style: none; padding: 0; margin: 6px 0 14px; display: flex; gap: 0; } .ow-tracker li { position: relative; flex: 1; padding: 0 12px 0 0; } .ow-tracker li::before { content: ""; position: absolute; left: 9px; right: 0; top: 9px; height: 2px; background: var(--border); } .ow-tracker li:last-child::before { display: none; } .ow-tracker-dot { position: relative; z-index: 1; display: block; width: 20px; height: 20px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); margin-bottom: 8px; } .ow-tracker li.is-done .ow-tracker-dot { background: var(--success); border-color: var(--success); } .ow-tracker li.is-next .ow-tracker-dot { border-color: var(--brand-purple); } .ow-tracker li.is-done::before { background: var(--success); } .ow-tracker b { display: block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; } .ow-tracker small { color: var(--text-secondary); }
.ow-dep-table td { vertical-align: top; } .ow-info-ink { color: var(--info); } .ow-danger-ink { color: var(--danger); } .ow-brand-ink { color: var(--brand-purple); } .ow-td-right { text-align: right; } .ow-total-row td { border-top: 2px solid var(--border-strong); } .ow-dep-covers summary { cursor: pointer; font-size: 12px; color: var(--text-muted); } .ow-dep-covers ul { margin: 4px 0 0; padding-left: 16px; font-size: 12px; text-align: left; }
.ow-charge { max-width: 720px; } .ow-cat-chips .ow-check-chip { position: relative; } .ow-cat-chips .ow-check-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ow-cat-chips .ow-check-chip span { display: inline-block; padding: 9px 16px; border-radius: 6px; border: 1px solid var(--border-strong); background: var(--surface-alt); font-weight: 600; cursor: pointer; } .ow-cat-chips input:checked + span { background: var(--surface-tint-2); border-color: var(--brand-purple); color: var(--brand-purple); } .ow-cat-chips input:focus-visible + span { outline: 2px solid var(--brand-purple); }
.ow-freq { position: relative; } .ow-freq label { padding: 8px 18px; font-size: 14px; font-weight: 600; cursor: pointer; color: var(--text-secondary); } .ow-freq input { position: absolute; opacity: 0; width: 1px; height: 1px; } .ow-freq label:has(input:checked) { background: var(--brand-purple); color: #fff; } .ow-freq label.is-off { color: var(--text-disabled); cursor: not-allowed; } .ow-readback { background: var(--surface-tint-2); border-radius: 6px; padding: 10px 12px; font-size: 14px; margin: 8px 0 14px; } .ow-readback:empty { display: none; }
.ow-setup-wiz .ow-sent-band { margin-top: -30px; } .ow-bank-card { max-width: 780px; } .ow-entity { border: 1px solid var(--border); border-radius: 8px; margin: 14px 0; } .ow-entity-head { display: flex; align-items: center; gap: 10px; padding: 12px 16px; border-bottom: 1px solid var(--border-hairline); flex-wrap: wrap; } .ow-entity-head > b { font-size: 16px; } .ow-entity-links { margin-left: auto; display: flex; gap: 16px; } .ow-entity-links svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -3px; margin-right: 4px; }
.ow-bank-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 14px 16px; } .ow-bank-row + .ow-bank-row { border-top: 1px solid var(--border-hairline); } .ow-bank-row.is-empty { color: var(--text-muted); } .ow-bank-ico { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 1.8; vertical-align: -2px; } .ow-tax { margin: 0 16px 12px; } .ow-pill.info { background: var(--info-bg); color: var(--info); border-color: var(--info-border); }
.ow-hr { border: 0; border-top: 1px solid var(--border); margin: 22px 0; } .ow-speed-h { font-size: 20px; margin: 0 0 6px; } .ow-fee-form .ow-fieldset { margin-bottom: 10px; }
/* ---------- rent payments: the state line, the promo, the collect dialog, the bank type step ---------- */
.ow-state-h { margin-bottom: 4px; } .ow-state-sub { margin: 0 0 4px; }
.ow-cpromo { display: block; border: 1px solid var(--border); border-radius: 8px; padding: 18px 18px 20px; background: var(--surface-alt); margin: 18px 0 6px; }
.ow-cpromo-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 6px; }
.ow-cpromo-head h3 { font-size: 19px; margin: 0; }
.ow-cpromo p { margin: 0 0 14px; color: var(--text-secondary); }
.ow-cpromo a { color: var(--brand-purple); }
.ow-collect-dlg { max-width: 520px; }
.ow-dlg-hey { font-size: 15px; color: var(--text-secondary); margin: 4px 0 0; }
.ow-dlg-lede { font-style: italic; margin: 0 0 4px; }
.ow-benefits { list-style: none; margin: 4px 0 18px; padding: 0; text-align: left; display: grid; gap: 12px; }
.ow-benefits li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 10px; align-items: start; font-size: 14px; color: var(--text-secondary); line-height: 1.45; }
.ow-benefits svg { width: 20px; height: 20px; fill: none; stroke: var(--success); stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; margin-top: 1px; }
.ow-benefits b { color: var(--text); font-weight: 600; }
.ow-dlg-alt { margin-top: 4px; }
.ow-banktype { max-width: 720px; }
.ow-typeset { border: 0; padding: 0; margin: 20px 0 6px; }
.ow-typeset legend { font-size: 17px; font-weight: 600; color: var(--text); padding: 0; margin-bottom: 14px; }
.ow-typetiles { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.ow-typetile { display: block; position: relative; cursor: pointer; }
.ow-typetile input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.ow-typetile-in { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 8px; padding: 26px 18px 22px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); height: 100%; }
.ow-typetile-in svg { width: 44px; height: 44px; fill: none; stroke: var(--text-secondary); stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.ow-typetile-in b { font-size: 17px; }
.ow-typetile-in small { color: var(--text-muted); line-height: 1.45; }
.ow-typetile input:checked + .ow-typetile-in { border-color: var(--brand-purple); background: var(--surface-tint-2); }
.ow-typetile input:checked + .ow-typetile-in svg { stroke: var(--brand-purple); }
.ow-typetile input:focus-visible + .ow-typetile-in { outline: 2px solid var(--brand-purple); outline-offset: 2px; }
.ow-secthead { display: flex; align-items: center; gap: 10px; margin: 22px 0 6px; }
.ow-secthead-ico { width: 30px; height: 30px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; flex: none; }
.ow-secthead-ico svg { width: 17px; height: 17px; fill: none; stroke: var(--brand-purple); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ow-secthead h3 { font-size: 18px; margin: 0; }
.ow-secthead-sub { margin: 0 0 8px; color: var(--text-secondary); font-size: 14px; line-height: 1.5; }
.ow-secthead-sub b { color: var(--text); font-weight: 600; }
.ow-why { margin: 0 0 16px; }
.ow-why > summary { cursor: pointer; font-size: 14px; font-weight: 600; color: var(--brand-purple); list-style: none; }
.ow-why > summary::-webkit-details-marker { display: none; }
.ow-why > summary { text-decoration: underline; text-underline-offset: 2px; }
.ow-why > summary:hover { color: var(--text); }
.ow-why p { margin: 10px 0 0; font-size: 14px; line-height: 1.6; color: var(--text-secondary); }
.ow-why p b { color: var(--text); font-weight: 600; }
.ow-terms-line { margin: 18px 0 12px; font-size: 12px; line-height: 1.6; color: var(--text-muted); font-style: italic; }
.ow-terms-line a { color: var(--brand-purple); }
.ow-secure-panel { display: flex; align-items: flex-start; gap: 12px; padding: 14px 16px; border: 1px solid var(--success-border); background: var(--success-bg); border-radius: 8px; font-size: 13px; line-height: 1.55; color: var(--text-secondary); }
.ow-secure-panel b { color: var(--text); font-weight: 600; }
.ow-secure-panel a { color: var(--brand-purple); }
.ow-secure-ico { flex: none; width: 22px; height: 22px; }
.ow-secure-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--success); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.ow-secure-marks { display: flex; justify-content: center; margin: 14px 0 2px; }
/* ---------- the platform-KYC identity grid (our own Add bank details) ---------- */
.ow-kyc { max-width: 720px; }
.ow-kyc-q { font-size: 17px; margin: 18px 0 12px; }
.ow-kyc-tiles { margin-bottom: 8px; }
.ow-kyc-tiles .ow-typetile { text-decoration: none; color: inherit; }
.ow-kyc-tiles .ow-typetile .ow-typetile-in { padding: 16px 18px; gap: 6px; }
.ow-kyc-tiles .ow-typetile .ow-typetile-in svg { width: 32px; height: 32px; }
.ow-kyc-tiles .ow-typetile.is-on .ow-typetile-in { border-color: var(--brand-purple); background: var(--surface-tint-2); }
.ow-kyc-tiles .ow-typetile.is-on .ow-typetile-in svg { stroke: var(--brand-purple); }
.ow-kyc-box { border: 1px solid var(--border); border-radius: 8px; padding: 16px; margin: 0 0 18px; }
.ow-kyc-box > legend { font-size: 14px; font-weight: 600; padding: 0 0 8px; }
.ow-kyc-grid { display: grid; gap: 12px; margin-bottom: 12px; }
.ow-kyc-grid.two { grid-template-columns: 1fr 1fr; }
.ow-kyc-grid.three { grid-template-columns: 1.1fr .8fr .9fr; }
.ow-kyc-grid.unit { grid-template-columns: 180px; }
.ow-kyc-grid .ow-field { margin: 0; }
.ow-kyc-form .ow-field label i { font-style: normal; font-weight: 400; color: var(--text-muted); }
.ow-field-note { font-size: 11px; color: var(--text-muted); margin: 2px 0 10px; line-height: 1.45; }
.ow-secret { position: relative; display: block; }
.ow-secret .ow-input { padding-right: 58px; }
.ow-secret-toggle { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); border: 0; background: transparent; font: inherit; font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; color: var(--brand-purple); cursor: pointer; padding: 4px 6px; }
.ow-radio-row { display: flex; gap: 22px; margin: 4px 0 10px; }
.ow-drop { display: block; border: 1px dashed var(--border-strong); border-radius: 8px; padding: 22px 16px; text-align: center; cursor: pointer; background: var(--surface-alt); }
.ow-drop:hover { border-color: var(--brand-purple); }
.ow-drop.is-over { border-color: var(--brand-purple); background: var(--surface-tint-2); }

/* The listing wizard's photo grid is the only SORTABLE one: maintenance_detail
   and work_order_public reuse .ow-photo-grid for read-only art, so every rule
   below hangs off .ow-photo-sortable rather than widening .ow-photo itself.
   The caption and the Make cover button are always in the markup and switched
   here, so setting a cover is one class toggle in JS rather than a re-render. */
.ow-photo-sortable .ow-photo { cursor: grab; }
.ow-photo-sortable .ow-photo:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: 2px; }
.ow-photo-sortable .ow-photo figcaption { display: none; }
.ow-photo-sortable .ow-photo.is-cover figcaption { display: block; }
.ow-photo-sortable .ow-photo-cover { position: absolute; left: 6px; bottom: 6px; border: 0;
  border-radius: 4px; padding: 3px 8px; font-size: 11px; font-weight: 600; cursor: pointer;
  background: var(--surface); color: var(--text-secondary); }
.ow-photo-sortable .ow-photo-cover:hover { color: var(--brand-purple); }
.ow-photo-sortable .ow-photo.is-cover .ow-photo-cover { display: none; }
.ow-photo-sortable .ow-photo.is-dragging { opacity: .4; }
.ow-photo-sortable .ow-photo.is-drop { outline: 2px dashed var(--brand-purple); outline-offset: -2px; }
.ow-drop-in { display: flex; flex-direction: column; align-items: center; gap: 4px; font-size: 13px; color: var(--text-secondary); }
.ow-drop-in svg { width: 26px; height: 26px; fill: none; stroke: var(--brand-purple); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ow-drop-in i { font-style: normal; color: var(--text-muted); }
.ow-drop-in small { color: var(--text-muted); font-size: 11px; }
.ow-drop-name { font-size: 12px; color: var(--text-secondary); margin: 6px 0 0; }
.ow-kyc-tos { margin: 4px 0 18px; font-size: 13px; line-height: 1.5; }
.ow-kyc-tos a { color: var(--brand-purple); }
.ow-kyc-form .ow-reveal[hidden] { display: none; }
@container ow-layout (max-width: 640px) { .ow-kyc-grid.two, .ow-kyc-grid.three, .ow-kyc-grid.unit { grid-template-columns: 1fr; } }
.ow-stripe-chip { display: inline-flex; align-items: center; gap: 7px; padding: 5px 11px; border: 1px solid var(--border); background: var(--surface-alt); border-radius: 999px; font-size: 12px; font-weight: 600; color: var(--text-muted); white-space: nowrap; }
.ow-stripe-chip svg { width: 12px; height: 12px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; flex: none; }
.ow-stripe-chip img { height: 14px; width: auto; display: inline-block; }
.ow-ready { margin: 16px 0 18px; text-align: left; }
.ow-ready .ow-eyebrow { margin-bottom: 6px; }
.ow-readylist { margin: 0 0 8px; padding-left: 18px; color: var(--text-secondary); font-size: 14px; line-height: 1.6; }
@container ow-layout (max-width: 640px) { .ow-typetiles { grid-template-columns: 1fr; } }
.ow-connect-spinner { display: flex; align-items: center; gap: 10px; color: var(--text-muted); margin: 10px 0 16px; } .ow-spinner { width: 18px; height: 18px; border: 2px solid var(--border); border-top-color: var(--brand-purple); border-radius: 50%; animation: ow-spin 1s linear infinite; display: inline-block; } @keyframes ow-spin { to { transform: rotate(360deg); } } [data-connect-embed] { min-height: 60px; }
.ow-depret .ow-signer input[type=radio] { width: 18px; height: 18px; } .ow-ded { align-items: end; } .ow-receipt { max-width: 560px; margin: 24px auto; } .ow-receipt h2 { font-size: 22px; margin: 4px 0 4px; } .ow-receipt-kv { margin: 14px 0; } .ow-receipt-table { margin-top: 10px; }
@container ow-layout (max-width: 960px) { .ow-tiles { grid-template-columns: 1fr 1fr; } .ow-tiles-4 { grid-template-columns: 1fr 1fr; } .ow-chg-head { display: none; } .ow-chg summary { grid-template-columns: 1fr 1fr; grid-auto-rows: auto; } .ow-chg-caret { display: none; } .ow-chg-amt { text-align: left; } .ow-tracker { flex-direction: column; gap: 10px; } .ow-tracker li::before { display: none; } .ow-rentroll, .ow-pay-prompt { flex-direction: column; align-items: flex-start; } .ow-entity-links { margin-left: 0; } }

/* ---------- phase 6: maintenance ---------- */
.ow-mt-head { margin-bottom: 14px; }
.ow-mt-filters { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; margin: 0 0 16px; }
.ow-fchip { display: inline-flex; align-items: center; gap: 8px; padding: 0 10px 0 12px; height: 40px; border-radius: 8px; background: var(--surface-alt); border: 1px solid var(--border-hairline); font-size: 14px; font-weight: 600; color: var(--text-secondary); cursor: pointer; }
.ow-fchip svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; flex: none; }
.ow-fchip select { border: 0; background: transparent; font: inherit; font-weight: 600; color: inherit; padding: 0 18px 0 0; max-width: 240px; cursor: pointer; }
.ow-fchip select:focus { outline: none; }
.ow-fchip-toggle input { position: absolute; opacity: 0; width: 0; height: 0; } .ow-fchip-toggle { position: relative; padding-right: 14px; } .ow-fchip-toggle.is-on { background: var(--action-soft); color: var(--action-ink); border-color: var(--action-ink); } .ow-fchip-toggle.is-on svg { fill: currentColor; }
.ow-fsearch { display: inline-flex; align-items: center; gap: 8px; height: 40px; padding: 0 12px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); min-width: 200px; }
.ow-fsearch svg { width: 18px; height: 18px; fill: none; stroke: var(--text-muted); stroke-width: 1.8; } .ow-fsearch input { border: 0; font: inherit; font-size: 15px; width: 100%; background: transparent; } .ow-fsearch input:focus { outline: none; }
.ow-pro-band { display: flex; align-items: center; gap: 22px; padding: 18px 22px; border-radius: 10px; background: var(--info-bg); border: 1px solid var(--info-border); margin: 0 0 18px; position: relative; }
.ow-pro-band[hidden] { display: none; }
.ow-pro-logo { width: 64px; height: 64px; border-radius: 50%; object-fit: contain; background: var(--surface); padding: 8px; box-sizing: border-box; flex: none; }
.ow-pro-text { flex: 1; min-width: 0; } .ow-pro-text h3 { font-size: 19px; margin: 0 0 2px; } .ow-pro-text p { margin: 0 0 4px; color: var(--text-secondary); } .ow-pro-text small { display: block; font-size: 12px; }
.ow-btn-outline { border-color: var(--brand-purple); color: var(--brand-purple); border-radius: 999px; padding: 10px 22px; }
.ow-pro-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 22px; line-height: 1; color: var(--text-muted); cursor: pointer; }
.ow-table-wrap { overflow-x: auto; }
.ow-mt-table th { white-space: nowrap; } .ow-mt-table td small { display: block; font-weight: 400; margin-top: 2px; }
.ow-mt-title { font-weight: 700; color: var(--text); text-decoration: none; } .ow-mt-title:hover { text-decoration: underline; }
.ow-sort { display: inline-flex; align-items: center; gap: 4px; color: inherit; text-decoration: none; } .ow-sort svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; } .ow-sort svg.is-up { transform: rotate(180deg); }
.ow-th-star, .ow-td-star { width: 44px; text-align: center; }
.ow-star { width: 32px; height: 32px; border: 0; background: none; cursor: pointer; color: var(--text-muted); padding: 0; display: inline-flex; align-items: center; justify-content: center; border-radius: 50%; }
.ow-star svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ow-star.is-on { color:var(--warning); } .ow-star.is-on svg { fill: currentColor; } .ow-star:hover { background: var(--surface-alt); }
.ow-mt-table tr.is-emergency td:first-child { box-shadow: inset 3px 0 0 var(--danger); }
.ow-pill.brand { background: var(--surface-tint-2); color: var(--brand-purple); border-color: var(--brand-purple); }
.ow-pill-btn { cursor: pointer; list-style: none; font-size: 12px; text-transform: uppercase; letter-spacing: .06em; padding: 8px 14px; } .ow-pill-btn::-webkit-details-marker { display: none; }
.ow-mt-empty { padding-top: 32px; } .ow-mt-empty p { max-width: 560px; margin: 0 auto 18px; }
.ow-mt-art { position: relative; width: 300px; height: 230px; margin: 0 auto 26px; }
.ow-mt-art::before { content: ""; position: absolute; left: 20px; top: 0; width: 260px; height: 230px; border-radius: 50% 50% 0 0 / 60% 60% 0 0; background: var(--info-bg); }
.ow-mt-art-card { position: absolute; left: 40px; top: 30px; width: 220px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); padding: 12px; text-align: left; font-size: 11px; color: var(--text-secondary); }
.ow-mt-art-top { display: flex; gap: 10px; align-items: center; margin-bottom: 8px; } .ow-mt-art-top i { display: block; font: 700 9px/1 sans-serif; letter-spacing: .08em; color: var(--danger); text-transform: uppercase; } .ow-mt-art-top b { display: block; font-size: 13px; color: var(--text); } .ow-mt-art-top small { display: block; font-size: 10px; }
.ow-mt-art-ico { width: 34px; height: 34px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; } .ow-mt-art-ico svg { width: 18px; height: 18px; fill: none; stroke: var(--text-secondary); stroke-width: 1.8; }
.ow-mt-art-card p { margin: 0 0 8px; } .ow-mt-art-by { display: flex; gap: 8px; align-items: center; background: var(--surface-alt); padding: 8px; border-radius: 6px; } .ow-mt-art-by span { width: 26px; height: 26px; border-radius: 50%; background: var(--surface-tint-2); color: var(--brand-purple); font-weight: 700; display: inline-flex; align-items: center; justify-content: center; font-size: 10px; } .ow-mt-art-by i { display: block; font: 700 8px/1.2 sans-serif; letter-spacing: .08em; text-transform: uppercase; } .ow-mt-art-by b { color: var(--text); }
/* create */
.ow-select-clear { position: relative; } .ow-select-clear .ow-select { padding-right: 64px; } .ow-clear-x { position: absolute; right: 34px; top: 50%; transform: translateY(-50%); border: 0; background: none; font-size: 20px; color: var(--text-muted); cursor: pointer; } .ow-clear-x[hidden] { display: none; }
.ow-ai-hint { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 8px; background: var(--info-bg); border: 1px solid var(--info-border); margin-bottom: 8px; font-size: 14px; } .ow-ai-hint svg { width: 20px; height: 20px; flex: none; fill: none; stroke: var(--info); stroke-width: 1.6; margin-top: 2px; }
.ow-mt-drop { flex-direction: column; gap: 8px; margin-bottom: 10px; } .ow-mt-drop.is-over { border-color: var(--brand-purple); background: var(--surface-tint-2); } .ow-drop-ico { width: 44px; height: 44px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; } .ow-drop-ico svg { width: 22px; height: 22px; fill: none; stroke: var(--text-secondary); stroke-width: 1.7; }
.ow-check { display: inline-flex; gap: 8px; align-items: center; font-weight: 500; }
/* detail */
.ow-mt-detail-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 16px; } .ow-mt-detail-head h2 { font-size: 26px; margin: 0 0 4px; }
.ow-mt-head-actions { display: flex; align-items: center; gap: 10px; flex: none; }
.ow-iconbtn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); display: inline-flex; align-items: center; justify-content: center; text-decoration: none; } .ow-iconbtn svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ow-iconbtn:hover { background: var(--surface-alt); }
.ow-mt-layout { display: grid; grid-template-columns: minmax(0, 1.05fr) minmax(0, .95fr); gap: 18px; align-items: start; } .ow-mt-main { min-width: 0; }
.ow-mt-facts { margin: 0 0 12px; } .ow-mt-desc { white-space: pre-wrap; margin: 0 0 12px; }
.ow-mt-photos { margin-bottom: 8px; } .ow-mt-photos .ow-photo img { aspect-ratio: auto; max-height: 320px; object-fit: contain; background: var(--surface-alt); }
.ow-mt-chat summary { cursor: pointer; font-weight: 600; } .ow-mt-pre { white-space: pre-wrap; font-size: 12px; background: var(--surface-alt); padding: 10px; border-radius: 6px; }
.ow-mt-tenant { display: flex; gap: 12px; align-items: flex-start; } .ow-mt-tenant b { display: block; font-size: 17px; } .ow-mt-tenant small, .ow-mt-tenant span, .ow-mt-tenant a { display: block; font-size: 14px; }
.ow-pro-card-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; margin-bottom: 8px; } .ow-pro-card-head img { height: 28px; width: auto; }
.ow-pro-card h3 { font-size: 20px; margin: 0 0 4px; } .ow-pro-card p { margin: 0 0 6px; } .ow-pro-serves { display: flex; gap: 6px; align-items: center; color: var(--text-secondary); } .ow-pro-serves svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; } .ow-pro-card small { display: block; margin-top: 6px; }
.ow-copy-row { display: flex; gap: 8px; } .ow-copy-row .ow-input { font-size: 13px; }
.ow-wo-mode { margin-bottom: 14px; }
.ow-timeline { list-style: none; margin: 0 0 18px; padding: 0 0 0 4px; border-left: 2px solid var(--border-hairline); } .ow-timeline li { position: relative; padding: 0 0 14px 18px; } .ow-timeline li:last-child { padding-bottom: 4px; }
.ow-tl-dot { position: absolute; left: -7px; top: 5px; width: 12px; height: 12px; border-radius: 50%; background: var(--surface); border: 2px solid var(--border-strong); } .ow-timeline li.is-status .ow-tl-dot { border-color: var(--brand-purple); background: var(--brand-purple); } .ow-timeline li.is-reply .ow-tl-dot, .ow-timeline li.is-message .ow-tl-dot { border-color: var(--info); } .ow-timeline li.is-work_order .ow-tl-dot { border-color: var(--success); background: var(--success); }
.ow-timeline b { font-weight: 600; display: block; } .ow-timeline p { margin: 4px 0; white-space: pre-wrap; } .ow-timeline small { display: block; }
.ow-mt-note .ow-btn-row { align-items: center; } .ow-select-sm { width: auto; font-size: 14px; padding: 8px 12px; }
.ow-ai-panel { position: sticky; top: 16px; border-radius: 12px; padding: 22px 22px 18px; background: linear-gradient(160deg, var(--info-bg), var(--surface-tint-2)); border: 1px solid var(--info-border); }
.ow-ai-eyebrow { display: flex; align-items: center; gap: 8px; font-size: 12px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--brand-purple); margin-bottom: 12px; } .ow-ai-eyebrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.ow-ai-panel h4 { font-size: 16px; margin: 12px 0 4px; } .ow-ai-panel p { margin: 0 0 6px; line-height: 1.55; }
.ow-sev-emergency { color: var(--danger); } .ow-sev-high { color:var(--warning-ink); background-color:var(--warning-bg);}
.ow-ai-thumbs { display: flex; align-items: center; gap: 6px; margin: 10px 0 6px; flex-wrap: wrap; } .ow-ai-thumbs button { width: 32px; height: 32px; border: 1px solid transparent; background: none; border-radius: 8px; color: var(--text-secondary); cursor: pointer; display: inline-flex; align-items: center; justify-content: center; } .ow-ai-thumbs button svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; } .ow-ai-thumbs button.is-on { color: var(--brand-purple); border-color: var(--brand-purple); background: var(--surface); } .ow-ai-thumbs small { flex-basis: 100%; }
.ow-ai-more { margin-top: 18px !important; }
.ow-ai-chips { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; margin: 8px 0 12px; } .ow-ai-chips form { margin: 0; }
.ow-ai-chip { display: inline-flex; align-items: center; gap: 8px; padding: 9px 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--border); font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; text-decoration: none; } .ow-ai-chip svg { width: 16px; height: 16px; fill: none; stroke: var(--brand-purple); stroke-width: 2; } .ow-ai-chip:hover { border-color: var(--brand-purple); } .ow-ai-chip.is-done { color: var(--text-muted); } .ow-ai-chip.is-done svg { stroke: var(--success); }
.ow-ai-qa { background: var(--surface); border: 1px solid var(--border-hairline); border-radius: 10px; padding: 12px 14px; margin: 0 0 10px; } .ow-ai-qa b { display: block; margin-bottom: 4px; } .ow-ai-qa h5 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 10px 0 4px; } .ow-ai-qa h5.ow-ai-red { color: var(--danger); } .ow-ai-qa ul { margin: 0; } .ow-ai-cost { margin: 6px 0; }
.ow-ai-ask { display: flex; gap: 8px; margin-top: 6px; } .ow-ai-ask .ow-input { background: var(--surface); }
.ow-ai-foot { display: block; margin-top: 10px; font-size: 12px; }
.ow-emergency { font-size: 15px; }
.ow-dialog { border: 0; border-radius: 12px; padding: 0; max-width: 470px; width: calc(100% - 32px); box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); } .ow-dialog::backdrop { background: rgba(15, 23, 42, .45); }
.ow-dialog-body { padding: 34px 30px 26px; text-align: center; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ow-dialog-body h3 { font-size: 24px; margin: 6px 0 0; line-height: 1.25; } .ow-dialog-body p { margin: 0 0 8px; color: var(--text-secondary); } .ow-dialog-body form { margin: 0; }
.ow-dialog-ico { width: 120px; height: 120px; border-radius: 50%; background: var(--surface-alt); display: inline-flex; align-items: center; justify-content: center; } .ow-dialog-ico svg { width: 56px; height: 56px; fill: none; stroke: var(--brand-purple); stroke-width: 1.4; }
.ow-wo-public .ow-eyebrow { margin-bottom: 4px; } .ow-wo-foot { margin-top: 18px; font-size: 13px; }
@container ow-layout (max-width: 960px) { .ow-mt-layout { grid-template-columns: 1fr; } .ow-ai-panel { position: static; } .ow-mt-detail-head { flex-direction: column; } .ow-pro-band { flex-wrap: wrap; } .ow-pro-text { flex-basis: calc(100% - 90px); } .ow-fsearch { flex: 1 1 100%; } .ow-mt-table td, .ow-mt-table th { padding: 10px 8px; } .ow-mt-art { transform: scale(.85); margin-bottom: 10px; } }
.ow-main { min-width: 0; } .ow-table-wrap { max-width: 100%; position: relative; } /* a static wrap lets an absolutely placed descendant (the sr-only header text) widen the page */

/* ---------- phase 7: messages ---------- */
.ow-msg-shell { display: grid; grid-template-columns: 330px minmax(0, 1fr); border: 1px solid var(--border); border-radius: 10px; background: var(--surface); min-height: calc(100vh - 140px); overflow: hidden; }
.ow-msg-side { border-right: 1px solid var(--border); display: flex; flex-direction: column; min-width: 0; }
.ow-msg-side-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 18px 16px 8px; } .ow-msg-side-head h2 { font-size: 24px; margin: 0; }
.ow-msg-tabs { margin: 0; padding: 0 16px; } .ow-msg-tabs a { padding: 10px 0; }
.ow-msg-search { margin: 12px 16px 4px; min-width: 0; }
.ow-msg-threads, .ow-msg-people { list-style: none; margin: 0; padding: 0; overflow-y: auto; flex: 1; }
.ow-msg-threads li a, .ow-msg-people li { display: flex; align-items: center; gap: 12px; padding: 14px 16px; border-bottom: 1px solid var(--border-hairline); text-decoration: none; color: var(--text); }
.ow-msg-threads li a:hover { background: var(--surface-canvas); } .ow-msg-threads li.is-active a { background: var(--surface-tint-2); }
.ow-msg-who { min-width: 0; flex: 1; display: flex; flex-direction: column; gap: 1px; } .ow-msg-who b { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; } .ow-msg-who small { font-size: 13px; color: var(--text-secondary); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ow-msg-ctx { font-weight: 600; } .ow-msg-preview { color: var(--text-muted) !important; } .ow-msg-threads li.is-unread .ow-msg-preview { color: var(--text) !important; font-weight: 600; }
.ow-msg-when { font-size: 12px; color: var(--text-muted); white-space: nowrap; align-self: flex-start; display: flex; flex-direction: column; align-items: flex-end; gap: 6px; }
.ow-msg-dot { width: 9px; height: 9px; border-radius: 50%; background: var(--brand-purple); display: inline-block; }
.ow-msg-empty-row { padding: 22px 16px; color: var(--text-muted); font-size: 14px; }
/* Messages phase 1: urgency, the AI brief strip, SMS reachability, unsend. */
.ow-msg-name { display: flex; align-items: center; gap: 6px; min-width: 0; } .ow-msg-name b { min-width: 0; }
.ow-msg-urg { flex: none; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; letter-spacing: .02em; text-transform: uppercase; padding: 1px 7px 1px 5px; border-radius: 999px; border: 1px solid; }
.ow-msg-urg i { width: 6px; height: 6px; border-radius: 50%; background: currentColor; display: block; }
.ow-msg-urg.is-high { color: var(--danger); background: var(--danger-bg); border-color: var(--danger-border); }
.ow-msg-urg.is-watch { color:var(--warning-ink); background: var(--warning-bg); border-color: var(--warning-border); }
.ow-msg-brief { margin: 10px 16px 2px; border: 1px solid var(--border-hairline); border-radius: 10px; background: var(--surface-canvas); padding: 10px 12px; }
.ow-msg-brief-head { display: flex; flex-direction: column; gap: 2px; margin-bottom: 6px; } .ow-msg-brief-head b { font-size: 13px; } .ow-msg-brief-head span { font-size: 12px; color: var(--text-secondary); }
.ow-msg-brief ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 2px; }
.ow-msg-brief li a { display: flex; flex-direction: column; gap: 1px; padding: 5px 8px; border-radius: 7px; text-decoration: none; color: var(--text); border-left: 3px solid var(--border); }
.ow-msg-brief li a:hover { background: var(--surface); }
.ow-msg-brief li b { font-size: 13px; } .ow-msg-brief li small { font-size: 12px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ow-msg-brief li.u-high a { border-left-color: var(--danger); } .ow-msg-brief li.u-watch a { border-left-color: var(--warning); }
.ow-msg-brief-src { display: block; margin-top: 6px; font-size: 11px; color: var(--text-muted); }
/* Messages phase 2: search, the filter chips, archive. */
.ow-msg-find { display: flex; align-items: center; gap: 8px; margin: 12px 16px 0; min-width: 0; } .ow-msg-find .ow-msg-search { margin: 0; flex: 1; }
.ow-msg-clear { font-size: 12px; color: var(--text-muted); text-decoration: none; flex: none; } .ow-msg-clear:hover { color: var(--text); text-decoration: underline; }
.ow-msg-chips { display: flex; gap: 6px; padding: 8px 16px 4px; flex-wrap: wrap; }
.ow-msg-chips a { font-size: 12px; font-weight: 600; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--border); color: var(--text-secondary); text-decoration: none; }
.ow-msg-chips a:hover { background: var(--surface-canvas); color: var(--text); }
.ow-msg-chips a.is-on { background: var(--surface-tint-2); border-color: var(--brand-purple); color: var(--brand-purple); }
/* Messages phase 3: the quick-reply placeholder hint. */
.ow-msg-hint { display: block; margin-top: 6px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ow-msg-hint code { background: var(--surface-alt); border-radius: 4px; padding: 1px 5px; font-size: 11px; }
/* Messages phase 4: the bulk composer's own recipient picker. */
.ow-msg-bulk { margin: 10px 16px 0; font-size: 13px; color: var(--text-secondary); }
.ow-bulk-pick { border: 1px solid var(--border); border-radius: 10px; margin-bottom: 16px; }
.ow-bulk-pick-head { display: flex; align-items: center; justify-content: space-between; padding: 10px 14px; border-bottom: 1px solid var(--border-hairline); }
.ow-bulk-pick ul { list-style: none; margin: 0; padding: 0; max-height: 260px; overflow-y: auto; }
.ow-bulk-pick li { border-bottom: 1px solid var(--border-hairline); } .ow-bulk-pick li:last-child { border-bottom: 0; }
.ow-bulk-pick label { display: flex; align-items: flex-start; gap: 10px; padding: 10px 14px; cursor: pointer; }
.ow-bulk-pick li.is-off label { cursor: not-allowed; opacity: .6; }
.ow-bulk-pick label span { display: flex; flex-direction: column; gap: 1px; min-width: 0; }
.ow-bulk-pick label small { font-size: 12px; color: var(--text-muted); }
/* Messages: the AI reply drafter. */
.ow-msg-tools { display: flex; align-items: center; gap: 14px; margin-bottom: 6px; flex-wrap: wrap; } .ow-msg-tools .ow-msg-quick { margin-bottom: 0; }
.ow-msg-ai { display: inline-flex; align-items: center; gap: 5px; }
.ow-msg-ai::before { content: ""; width: 8px; height: 8px; border-radius: 2px; background: var(--brand-purple); transform: rotate(45deg); }
.ow-msg-ai[disabled] { opacity: .6; cursor: progress; }
.ow-msg-ai-note { display: block; margin: 0 0 8px; font-size: 12px; color: var(--text-muted); line-height: 1.5; }
.ow-msg-ai-note.is-warn { color:var(--warning-ink); background-color:var(--warning-bg);}
.ow-msg-sms { display: block; margin: 6px 0 0 50px; font-size: 12px; color: var(--text-muted); } .ow-msg-sms.is-on { color: var(--success); }
.ow-bubble-unsend { margin: 2px 0 0; } .ow-bubble-unsend button { background: none; border: 0; padding: 0; font-size: 11px; color: var(--text-muted); cursor: pointer; text-decoration: underline; opacity: 0; transition: opacity .12s; }
.ow-bubble:hover .ow-bubble-unsend button, .ow-bubble-unsend button:focus { opacity: 1; }
.ow-bubble.is-mine .ow-bubble-unsend { text-align: right; }
.ow-msg-main { display: flex; flex-direction: column; min-width: 0; min-height: 0; }
.ow-msg-head { display: flex; align-items: center; gap: 12px; padding: 14px 18px; border-bottom: 1px solid var(--border); } .ow-msg-head .ow-msg-who b { font-size: 17px; }
.ow-msg-back { display: none; text-decoration: none; color: var(--text); font-size: 20px; padding: 4px 6px; }
.ow-msg-info summary { list-style: none; } .ow-msg-info summary::-webkit-details-marker { display: none; } .ow-msg-info-list { min-width: 240px; } .ow-msg-info-list a, .ow-msg-info-list button, .ow-msg-info-list .ow-menu-note { display: block; width: 100%; text-align: left; }
.ow-msg-scroll { flex: 1; overflow-y: auto; padding: 18px 22px; display: flex; flex-direction: column; gap: 6px; max-height: calc(100vh - 300px); }
.ow-msg-day { text-align: center; margin: 10px 0; } .ow-msg-day span { display: inline-block; padding: 6px 14px; border-radius: 8px; background: var(--surface-alt); font-size: 13px; color: var(--text-secondary); }
.ow-bubble { max-width: 72%; align-self: flex-start; } .ow-bubble.is-mine { align-self: flex-end; text-align: right; }
.ow-bubble-body { display: inline-block; text-align: left; padding: 10px 14px; border-radius: 12px; background: var(--surface-alt); white-space: pre-wrap; word-break: break-word; font-size: 15px; line-height: 1.45; }
.ow-bubble.is-mine .ow-bubble-body { background: var(--surface-tint-2); border: 1px solid var(--border-hairline); }
.ow-bubble-meta { display: block; font-size: 12px; color: var(--text-muted); margin: 3px 4px 0; }
.ow-bubble-att { margin-top: 8px; } .ow-bubble-att img { max-width: 260px; max-height: 220px; border-radius: 8px; display: block; }
.ow-msg-none { color: var(--text-muted); text-align: center; margin: auto; max-width: 420px; }
.ow-msg-compose { border-top: 1px solid var(--border); padding: 10px 18px 14px; }
.ow-msg-quick { display: block; margin-bottom: 6px; } .ow-msg-quick summary { list-style: none; cursor: pointer; } .ow-msg-quick summary::-webkit-details-marker { display: none; } .ow-msg-quick-list { left: 0; right: auto; top: auto; bottom: calc(100% + 4px); min-width: 260px; }
.ow-msg-quick-row { display: flex; align-items: center; } .ow-msg-quick-row > button { flex: 1; } .ow-msg-quick-row form { margin: 0; } .ow-msg-quick-x { width: 28px; padding: 4px !important; text-align: center !important; color: var(--text-muted); }
.ow-msg-bar { display: flex; align-items: flex-end; gap: 10px; }
.ow-msg-attach { width: 40px; height: 44px; display: inline-flex; align-items: center; justify-content: center; color: var(--text-secondary); cursor: pointer; flex: none; } .ow-msg-attach input { display: none; } .ow-msg-attach svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; border: 1.6px solid currentColor; border-radius: 50%; padding: 4px; }
.ow-msg-input { resize: none; min-height: 44px; max-height: 160px; line-height: 1.4; }
.ow-msg-send { border-radius: 999px; padding: 12px 22px; flex: none; }
.ow-msg-send[disabled] { opacity: .6; cursor: progress; }
/* is-sending lands in the submit handler itself, so the button stops taking
   clicks on the same tick. The [disabled] flip is deferred by a tick and a
   throttled background tab can hold that timer for a second. */
.ow-msg-compose.is-sending .ow-msg-send { opacity: .6; cursor: progress; pointer-events: none; }
.ow-msg-compose.is-sending .ow-msg-tools, .ow-msg-compose.is-sending .ow-msg-attach { pointer-events: none; opacity: .6; }
.ow-bubble.is-pending .ow-bubble-body { opacity: .6; }
.ow-bubble.is-pending .ow-bubble-meta { display: inline-flex; align-items: center; gap: 5px; }
.ow-bubble.is-pending .ow-spinner { width: 11px; height: 11px; border-width: 1.5px; }
.ow-msg-attach-name { display: block; margin: 6px 0 0 50px; color: var(--text-muted); }
.ow-msg-pick { margin: auto; text-align: center; padding: 40px 24px; max-width: 420px; color: var(--text-muted); } .ow-msg-pick h3 { color: var(--text); font-size: 20px; margin: 10px 0 6px; } .ow-msg-pick p { margin: 0 0 16px; }
.ow-msg-pick .ow-empty-ico svg { width: 44px; height: 44px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; }
.ow-dialog-form { text-align: left; align-items: stretch; } .ow-dialog-form h3 { text-align: center; margin-bottom: 8px; } .ow-dialog-form .ow-btn-row { justify-content: flex-end; }
.ow-bulk-to { margin: 0 0 14px; } .ow-bulk .ow-input { font-size: 15px; }
@container ow-layout (max-width: 960px) {
  .ow-msg-shell { grid-template-columns: 1fr; min-height: 0; }
  .ow-msg-side { border-right: 0; } .ow-msg-shell.has-active .ow-msg-side { display: none; } .ow-msg-shell:not(.has-active) .ow-msg-main { display: none; }
  .ow-msg-back { display: inline-block; } .ow-msg-scroll { max-height: none; padding: 14px 12px; } .ow-bubble { max-width: 88%; } .ow-msg-compose { padding: 10px 12px; } .ow-msg-head { padding: 12px; } }

/* ---- Phase 8: Accounting (insights, reports, transactions, rules, accounts, loans, reconcile, chart of accounts, tracking, preferences) ---- */
.ow-table .is-num, .ow-table th.is-num, .ow-table td.is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.ow-table td.is-out { color: var(--text); } .ow-table td.is-in { color: var(--success); }
.ow-table tr.is-total td, .ow-table td.is-total { font-weight: 700; border-top: 1px solid var(--border); background: var(--surface-alt); }
.ow-table tr.is-void td { color: var(--text-muted); text-decoration: line-through; } .ow-table tr.is-void td .ow-pill { text-decoration: none; }
.ow-acct-head { margin-bottom: 8px; } .ow-acct-body { position: relative; } .ow-acct-body.is-gated { filter: blur(4px); pointer-events: none; user-select: none; }
.ow-unbooked-banner { display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin-bottom: 14px; text-decoration: none; color: var(--text); border-color: var(--warning-border); background: var(--warning-bg); }
.ow-unbooked-banner svg { width: 22px; height: 22px; fill: none; stroke:var(--warning-ink); stroke-width: 1.8; flex: none; } .ow-unbooked-banner span { margin-left: auto; font-size: 22px; color: var(--text-muted); }
.ow-acct-filters { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin: 6px 0 14px; } .ow-acct-filters h3 { margin: 0; font-size: 20px; } .ow-acct-filters h3 .ow-muted { font-weight: 400; font-size: 14px; margin-left: 6px; }
.ow-ins-panel { padding: 18px 20px 12px; margin-bottom: 18px; }
.ow-ins-tabs { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.ow-ins-seg { display: inline-flex; border: 1px solid var(--border-strong); border-radius: 6px; overflow: hidden; margin-bottom: 10px; } .ow-ins-seg button { font: inherit; font-size: 14px; font-weight: 600; padding: 8px 18px; border: 0; background: var(--surface); color: var(--text-muted); cursor: pointer; } .ow-ins-seg button.is-on { background: var(--brand-purple); color: #fff; }
.ow-ins-total { margin: 4px 0 6px; font-size: 15px; } .ow-ins-total b { font-size: 30px; line-height: 1.1; margin-right: 8px; }
.ow-ins-chart { width: 100%; height: auto; display: block; } .ow-ins-chart .ow-grid { stroke: var(--border-hairline); stroke-width: 1; } .ow-axis { font-size: 11px; fill: var(--text-muted); } .ow-bar { fill: var(--brand-purple); } .ow-bar.is-neg { fill: var(--danger); }
.ow-ins-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; align-items: start; }
.ow-donut-wrap { display: grid; grid-template-columns: minmax(0, 1fr) 150px; gap: 16px; align-items: center; } .ow-donut { width: 150px; height: 150px; transform: rotate(-90deg); }
.ow-donut-legend { list-style: none; margin: 0; padding: 0; font-size: 14px; } .ow-donut-legend li { display: flex; align-items: center; gap: 8px; padding: 5px 0; } .ow-donut-legend i { width: 12px; height: 12px; border-radius: 3px; flex: none; display: inline-block; } .ow-donut-legend .ow-donut-total { border-top: 1px solid var(--border); margin-top: 4px; padding-top: 8px; }
.viz-1 { --viz: var(--viz-1); } .viz-2 { --viz: var(--viz-2); } .viz-3 { --viz: var(--viz-3); } .viz-4 { --viz: var(--viz-4); } .viz-5 { --viz: var(--viz-5); } .viz-6 { --viz: var(--viz-6); }
.ow-donut-legend i[class^="viz-"] { background: var(--viz); } .ow-donut circle[class^="viz-"] { stroke: var(--viz); }
/* A BAR may take the viz ramp too. The payments dashboard draws charged against paid as two
   SERIES on one money axis, and the ramp is the only place a series colour may come from: a
   status colour there would read as a state, and red against green on money is out (Rule 51). */
.ow-ins-chart rect[class^="viz-"] { fill: var(--viz); }
.ow-chart-key { display: flex; gap: 16px; margin: 0; font-size: 13px; color: var(--text-secondary); }
.ow-chart-key i[class^="viz-"] { width: 12px; height: 12px; border-radius: 3px; display: inline-block; margin-right: 6px; vertical-align: -1px; background: var(--viz); }
.ow-acct-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-hairline); text-decoration: none; color: var(--text); } .ow-acct-row:first-of-type { border-top: 0; }
.ow-acct-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-tint-2); display: inline-flex; align-items: center; justify-content: center; flex: none; } .ow-acct-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--brand-purple); stroke-width: 1.7; }
.ow-acct-name { display: flex; flex-direction: column; min-width: 0; } .ow-acct-name small { color: var(--text-muted); font-size: 12px; } .ow-acct-state { margin-left: auto; }
.ow-ins-promo { text-align: center; padding: 26px 22px; } .ow-ins-promo h3 { font-size: 20px; margin: 0 0 6px; } .ow-ins-promo p { color: var(--text-muted); margin: 0 0 14px; } .ow-ins-promo .ow-card-head { text-align: left; } .ow-ins-promo .ow-tiles { margin-top: 4px; }
.ow-tiles-5 { grid-template-columns: repeat(5, 1fr); margin: 10px 0 18px; } .ow-tiles-5 .ow-tile { padding: 18px 16px; } .ow-tiles-5 .ow-tile b { font-size: 24px; }
.ow-loan-list li { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; } .ow-loan-bal { margin-left: auto; font-weight: 700; }
.ow-gate { position: absolute; inset: 0; display: flex; align-items: flex-start; justify-content: center; padding-top: 120px; z-index: 5; }
.ow-gate-card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .18)); padding: 34px 32px 28px; max-width: 460px; text-align: center; } .ow-gate-card h3 { font-size: 22px; margin: 4px 0 8px; } .ow-gate-card p { color: var(--text-muted); margin: 0 0 18px; }
.ow-main { position: relative; }
/* reports */
.ow-rep-popular { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; margin-bottom: 26px; }
.ow-rep-card { display: block; padding: 18px 18px 16px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--text); } .ow-rep-card:hover { border-color: var(--brand-purple); } .ow-rep-card b { display: block; font-size: 16px; margin-bottom: 4px; } .ow-rep-card p { margin: 0; color: var(--text-muted); font-size: 14px; }
.ow-rep-card.is-popular { display: grid; grid-template-columns: 40px minmax(0, 1fr); column-gap: 12px; } .ow-rep-card.is-popular p { grid-column: 2; } .ow-rep-ico { width: 40px; height: 40px; border-radius: 50%; background: var(--surface-tint-2); display: inline-flex; align-items: center; justify-content: center; grid-row: span 2; } .ow-rep-ico svg { width: 20px; height: 20px; fill: none; stroke: var(--brand-purple); stroke-width: 1.7; }
.ow-rep-layout { display: grid; grid-template-columns: 200px minmax(0, 1fr); gap: 26px; align-items: start; }
.ow-rep-rail { display: flex; flex-direction: column; gap: 2px; position: sticky; top: 80px; } .ow-rep-rail h3 { font-size: 12px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; } .ow-rep-rail a { padding: 8px 10px; border-radius: 6px; text-decoration: none; color: var(--text-secondary); font-size: 14px; font-weight: 600; } .ow-rep-rail a.is-on { background: var(--surface-tint-2); color: var(--brand-purple); }
/* An inner-dashboard menu row: icon then label. Payments uses this rail for its five
   destinations, and the reports rail beside it carries no icons, so the svg rules only
   bite where there is one. min-width on the tracks because a rail pane holds tables:
   minmax(0,1fr) lets the TRACK shrink, the grid item inside it still defaults to auto. */
.ow-rep-layout > * { min-width: 0; }
.ow-rep-rail a { display: flex; align-items: center; gap: 10px; }
.ow-rep-rail a svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* ===== The popup dashboard (POPUP_DASHBOARD_PATTERN.md) ===========================
   A fixed panel over the dimmed page, a dark section rail on the left, a tinted pane
   on the right. Payments wears it. The geometry is COPIED from that document and not
   re-guessed, because a sibling surface forty pixels off reads as a different pattern
   rather than the same one: 256px rail, 44px rows on a 3px gap, a 68px rail header
   with a 44px brand tile, a 36px close disc. The old app called these classes ltp-*.

   NOT A DIALOG. Payments is a rail-reachable destination, so declaring modality would
   tell a screen reader the rest of the app had gone away when it has not. The markup
   is a labelled region, the scrim is decoration, and the close disc is the way out.

   z-index 1160 is the value the old shell used, and it sits above this shell's rail
   (40), its mobile scrim (30) and the help FAB (50). z-scale.css, which names this
   band --z-drawer, is not loaded by owners_base, so the number is written out. What
   has to stay ABOVE it: sl-confirm's scrim is 9000 and clears it on its own, and
   .ow-toasts was raised from 60 for the same reason, further down.

   THE min-height: 0 CHAIN IS LOAD-BEARING AND FAILS SILENTLY. The panel has a fixed
   height and the pane scrolls inside it. Miss min-height:0 on any flex level and the
   chain collapses to nothing: the panel paints, the rail paints, the content is
   simply absent and the console is clean. Documented in the pattern, section 3. */
.ow-pop-shell { position: fixed; inset: 0; z-index: 1160; display: flex; align-items: center; justify-content: center; padding: 12px; background: var(--surface-scrim); backdrop-filter: blur(3px); }
.ow-pop-panel { display: flex; overflow: hidden; width: min(2600px, 96vw); height: min(94vh, 1500px); max-height: 100%; border: 1px solid var(--border-hairline); border-radius: 16px; background: var(--surface-canvas); box-shadow: var(--elev-4); }
.ow-pop-rail { width: 256px; flex: 0 0 256px; display: flex; flex-direction: column; padding: 14px; overflow-y: auto; min-height: 0; background: linear-gradient(165deg, var(--surface-command-1), var(--surface-command-2)); }
.ow-pop-railhead { display: flex; align-items: center; gap: 12px; min-height: 68px; padding: 0 6px 14px; border-bottom: 1px solid var(--ow-rail-border); }
.ow-pop-railtile { width: 44px; height: 44px; flex: 0 0 44px; border-radius: 12px; display: grid; place-items: center; color: #fff; background: var(--brand-gradient); }
.ow-pop-railtile svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ow-pop-railtitle { margin: 0; color: #fff; font-size: 15px; font-weight: 600; line-height: 1.2; }
.ow-pop-railsub { margin: 3px 0 0; color: var(--ow-rail-icon); font-size: 12px; line-height: 1.35; }
.ow-pop-railgear { margin-left: auto; display: inline-flex; color: var(--ow-rail-icon); }
.ow-pop-railgear svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.ow-pop-railgear:hover { color: #fff; }
.ow-pop-rows { display: flex; flex-direction: column; gap: 3px; margin-top: 14px; }
/* A group heading in the rail. The old reports rail grew these when six near-
   synonymous rows made one question look like four: the label says what a run of
   rows is FOR. A workspace with five plain destinations passes none. */
.ow-pop-grouplabel { margin: 14px 0 6px; padding: 0 12px; color: var(--ow-rail-icon); font-size: 10px; font-weight: 600; letter-spacing: .10em; text-transform: uppercase; }
.ow-pop-rows > .ow-pop-grouplabel:first-child { margin-top: 0; }
.ow-pop-go { display: flex; align-items: center; gap: 11px; height: 44px; padding: 0 12px; border: 1px solid transparent; border-radius: 8px; color: var(--ow-rail-text); font-size: 14px; font-weight: 500; text-decoration: none; white-space: nowrap; transition: background .18s ease, color .18s ease; }
.ow-pop-go svg { width: 18px; height: 18px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
/* EVERY ROW ANSWERS THE POINTER (pattern doc, standing rule). The transparent border
   is on the BASE row so the outline cannot shift rows off their 3px rhythm, and this
   hover rule MUST stay above .is-here: both are the same specificity, so source order
   alone decides whether the row you are on keeps its fill under the pointer. */
.ow-pop-go:hover { color: #fff; background: linear-gradient(var(--surface-command-2), var(--surface-command-2)) padding-box, var(--brand-gradient) border-box; }
.ow-pop-go.is-here { color: #fff; border-color: transparent; background: var(--brand-gradient); }
.ow-pop-go.is-here:hover { background: var(--brand-gradient); }
.ow-pop-go .c { margin-left: auto; opacity: .75; font-weight: 600; font-size: 12px; font-variant-numeric: tabular-nums; }
.ow-pop-pane { flex: 1; min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.ow-pop-panehead { display: flex; align-items: center; gap: 12px; flex: none; padding: 16px 22px 12px; border-bottom: 1px solid var(--border-hairline); }
.ow-pop-panehead h2 { margin: 0; font-size: 22px; }
/* The 60x4 accent bar under the section title, fixed width, from the pattern. */
.ow-pop-panehead h2::after { content: ""; display: block; width: 60px; height: 4px; margin-top: 8px; border-radius: 2px; background: var(--brand-gradient); }
.ow-pop-panehead > *:nth-child(2) { margin-left: auto; }
.ow-pop-close { width: 36px; height: 36px; flex: none; border-radius: 50%; display: inline-grid; place-items: center; border: 1px solid var(--border); background: var(--surface); color: var(--text-secondary); text-decoration: none; }
.ow-pop-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.ow-pop-close:hover { color: var(--text); border-color: var(--border-strong); }
.ow-pop-body { flex: 1; min-height: 0; overflow-y: auto; padding: 18px 22px 26px; }
.ow-pop-body > .ow-content-canvas > *:first-child { margin-top: 0; }
/* Full bleed once the panel would be wider than the screen, and the rail lies down
   above the pane. Same breakpoint as this shell's own rail, so the two agree. */
@media (max-width: 960px) {
  .ow-pop-shell { padding: 0; } }
@container ow-layout (max-width: 960px) {
  .ow-pop-grouplabel { flex-basis: 100%; margin: 8px 0 2px; } }
@media (max-width: 960px) {
  .ow-pop-panel { width: 100%; height: 100%; border: 0; border-radius: 0; flex-direction: column; }
  .ow-pop-rail { width: auto; flex: 0 0 auto; overflow: visible; } }
@container ow-layout (max-width: 960px) {
  .ow-pop-rows { flex-direction: row; flex-wrap: wrap; }
  .ow-pop-go { height: 38px; } }
@media (max-width: 960px) {
  .ow-pop-panehead { flex-wrap: wrap; }
  .ow-pop-body { padding: 14px 16px 22px; } }
.ow-rep-cats h4 { font-size: 16px; margin: 0 0 10px; } .ow-rep-cats h4 + .ow-rep-grid { margin-bottom: 26px; } .ow-rep-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.ow-rep-head { align-items: flex-start; } .ow-rep-body { padding: 8px 0 16px; } .ow-rep-section { padding: 12px 20px 0; } .ow-rep-section h3 { font-size: 16px; margin: 8px 0 6px; } .ow-rep-body .hint { padding: 8px 20px 0; }
.ow-rep-table th, .ow-rep-table td { padding: 9px 10px; } .ow-rep-table td:first-child { min-width: 180px; }
.ow-dialog-wide { max-width: 640px; } .ow-drawer { max-width: 520px; width: 520px; height: 100vh; max-height: 100vh; margin: 0 0 0 auto; border-radius: 0; } .ow-drawer .ow-dialog-body { padding: 22px 26px 26px; min-height: 100%; } .ow-drawer-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; position: relative; } .ow-drawer-head h3 { text-align: left; margin: 0; } .ow-drawer-head .ow-pro-x { position: static; }
.ow-bk-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 12px 14px; border-radius: 8px; background: var(--surface-alt); margin: 0; } .ow-bk-amt { margin-left: auto; font-weight: 700; font-size: 18px; }
/* transactions */
.ow-acct-chips { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 4px; margin-bottom: 14px; }
.ow-acct-chip { display: inline-flex; align-items: center; gap: 10px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); text-decoration: none; color: var(--text); flex: none; min-width: 200px; } .ow-acct-chip svg { width: 22px; height: 22px; fill: none; stroke: var(--text-muted); stroke-width: 1.7; } .ow-acct-chip span { display: flex; flex-direction: column; } .ow-acct-chip small { color: var(--text-muted); font-size: 12px; } .ow-acct-chip.is-on { border-color: var(--brand-purple); background: var(--surface-tint-2); } .ow-acct-chip.is-on svg { stroke: var(--brand-purple); }
.ow-txn-filters { margin-bottom: 12px; } .ow-fchip-amt { gap: 6px; font-weight: 400; } .ow-fchip-amt input { border: 0; background: transparent; font: inherit; width: 96px; } .ow-fchip-amt input[type=date] { width: 132px; } .ow-fchip-amt input:focus { outline: none; } .ow-push { margin-left: auto; }
.ow-setup-card { margin-bottom: 16px; padding: 0; } .ow-setup-card summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 16px 20px; cursor: pointer; } .ow-setup-card summary::-webkit-details-marker { display: none; } .ow-setup-card summary h3 { margin: 0; font-size: 18px; } .ow-setup-count { font-weight: 700; color: var(--brand-purple); }
.ow-setup-steps { list-style: none; margin: 0; padding: 0 20px 8px; } .ow-setup-steps li { display: flex; align-items: flex-start; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-hairline); } .ow-setup-steps li > div { flex: 1; min-width: 0; } .ow-setup-steps li p { margin: 4px 0 0; color: var(--text-muted); font-size: 14px; } .ow-setup-steps li.is-done b { color: var(--text); } .ow-setup-steps li.is-done .ow-step-box { background: var(--btn-action-bg); border-color: var(--action-ink); color: var(--btn-action-fg); } .ow-setup-steps li.is-off { opacity: .55; } .ow-setup-steps li > .ow-btn { margin-left: auto; flex: none; }
.ow-txn-table td small { display: block; } .ow-bolt { width: 14px; height: 14px; fill: var(--warning); stroke:var(--warning-ink); stroke-width:1; vertical-align: -2px; margin-right: 4px; }
.ow-split-line { align-items: end; margin-bottom: 8px; } .ow-split-line .ow-select { min-width: 0; }
.ow-rowmenu > div button.ow-book-btn { font-weight: 700; color: var(--brand-purple); }
.ow-pager { display: flex; align-items: center; justify-content: center; gap: 14px; padding: 14px; font-size: 14px; color: var(--text-muted); }
/* rules */
.ow-rule-form h4 { font-size: 13px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); margin: 8px 0 0; } .ow-rule-amt { max-width: 200px; margin-bottom: 6px; } .ow-rule-form .ow-chip { border: 0; cursor: pointer; font: inherit; font-size: 12px; font-weight: 600; } .ow-rule-form .ow-chip.is-on { background: var(--brand-purple); color: #fff; }
/* accounts and loans */
.ow-bankacct { display: flex; align-items: center; gap: 18px; padding: 20px 22px; margin-bottom: 14px; } .ow-bankacct-id { display: flex; flex-direction: column; gap: 2px; min-width: 0; } .ow-bankacct-id b { font-size: 18px; } .ow-bankacct-side { margin-left: auto; display: flex; align-items: center; gap: 12px; flex-wrap: wrap; justify-content: flex-end; } .ow-unbooked { color:var(--warning-ink); background-color:var(--warning-bg);}
.ow-unlinked { padding: 0; margin-bottom: 14px; } .ow-unlinked summary { padding: 14px 18px; cursor: pointer; font-weight: 600; }
.ow-loan { padding: 18px 22px; margin-bottom: 14px; } .ow-loan-edit { margin-top: 8px; } .ow-loan-edit summary { list-style: none; cursor: pointer; } .ow-loan-edit summary::-webkit-details-marker { display: none; } .ow-loan-edit form { margin-top: 12px; display: flex; flex-direction: column; gap: 10px; }
.ow-loan-empty { padding: 40px 24px; } .ow-loan-empty h3 { max-width: 460px; margin-left: auto; margin-right: auto; } .ow-loan-empty p { max-width: 520px; margin-left: auto; margin-right: auto; }
.ow-subcard { border: 1px solid var(--border); border-radius: 8px; padding: 16px 18px; margin-top: 12px; } .ow-subcard > b { display: block; font-size: 15px; margin-bottom: 4px; } .ow-subcard p { margin: 0 0 10px; } .ow-subcard .ow-field { margin-bottom: 10px; }
.ow-books-assign summary { list-style: none; cursor: pointer; display: inline-block; margin-left: 8px; } .ow-books-assign summary::-webkit-details-marker { display: none; } .ow-books-assign form { display: flex; flex-direction: column; gap: 6px; padding: 8px 0 4px 8px; } .ow-books-assign .ow-btn { align-self: flex-start; }
/* reconciliation */
.ow-rec-sum { display: flex; flex-direction: column; gap: 12px; margin-top: 14px; } .ow-rec-sum .ow-rb-kv { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; } .ow-rec-sum dd { font-size: 18px; font-weight: 700; margin: 0; } .ow-rec-sum dt { font-size: 12px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .ow-rec-sum .is-ok { color: var(--success); } .ow-rec-sum .is-bad { color: var(--danger); } .ow-rec-sum .ow-btn { align-self: flex-end; }
/* chart of accounts */
.ow-coa-export { margin-left: auto; } .ow-coa-export svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.8; margin-right: 4px; }
.ow-coa-group { padding: 0; margin-bottom: 12px; } .ow-coa-group summary { list-style: none; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 18px; cursor: pointer; } .ow-coa-group summary::-webkit-details-marker { display: none; } .ow-coa-group summary h3 { margin: 0; font-size: 17px; }
.ow-coa-list { list-style: none; margin: 0; padding: 0 18px 6px; } .ow-coa-list li { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-top: 1px solid var(--border-hairline); font-size: 14px; } .ow-coa-list li.is-off .ow-coa-name b { color: var(--text-muted); } .ow-coa-list li.depth-1 { padding-left: 22px; } .ow-coa-list li.depth-2 { padding-left: 44px; }
.ow-coa-name { display: flex; align-items: center; gap: 8px; flex: 1; min-width: 0; flex-wrap: wrap; } .ow-coa-name i { font-style: normal; color: var(--text-muted); } .ow-coa-name small { font-size: 12px; } .ow-coa-code { font-variant-numeric: tabular-nums; min-width: 44px; text-align: right; }
.ow-inline-rename { display: flex; gap: 6px; padding: 6px 10px; } .ow-inline-rename .ow-input { min-width: 140px; }
/* tracking */
.aw-step h4 { margin: 0 0 8px; font-size: 15px; } .ow-aw-total { padding: 10px 14px; border-radius: 8px; background: var(--surface-alt); margin: 4px 0 0; }
/* preferences */
.ow-prefs .ow-pref { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-hairline); } .ow-prefs .ow-pref:first-of-type { border-top: 0; } .ow-pref h3 { font-size: 16px; margin: 0 0 4px; } .ow-pref p { margin: 0; color: var(--text-muted); font-size: 14px; } .ow-pref > div { flex: 1; min-width: 0; } .ow-pref > .ow-btn, .ow-pref > .ow-toggle-form { flex: none; } .ow-pref-value { display: block; margin-bottom: 4px; }
.ow-pref-edit { margin-top: 8px; } .ow-pref-edit summary { list-style: none; cursor: pointer; display: inline-block; } .ow-pref-edit summary::-webkit-details-marker { display: none; } .ow-pref-edit form { margin-top: 8px; }
.ow-toggle-form { display: inline-flex; align-items: center; gap: 8px; } .ow-switch-label { font-size: 13px; font-weight: 600; color: var(--text-muted); min-width: 24px; }
.ow-switch { width: 44px; height: 24px; border-radius: 999px; border: 0; background: var(--border-strong); position: relative; cursor: pointer; padding: 0; transition: background .15s; } .ow-switch span { position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; transition: left .15s; box-shadow: 0 1px 2px rgba(0,0,0,.2); } .ow-switch.is-on { background: var(--action-ink); } .ow-switch.is-on span { left: 23px; }
.ow-books ul { margin-bottom: 12px; }
.ow-card-head-pad { padding: 14px 16px 0; }
@container ow-layout (max-width: 960px) {
  .ow-ins-grid, .ow-rep-popular, .ow-rep-grid, .ow-rep-layout { grid-template-columns: 1fr; } .ow-rep-rail { position: static; flex-direction: row; flex-wrap: wrap; } .ow-rep-rail h3 { flex-basis: 100%; }
  .ow-tiles-5 { grid-template-columns: 1fr 1fr; } .ow-rec-sum .ow-rb-kv { grid-template-columns: 1fr 1fr; } .ow-donut-wrap { grid-template-columns: 1fr; justify-items: center; }
  .ow-bankacct { flex-wrap: wrap; } .ow-bankacct-side { margin-left: 0; justify-content: flex-start; } .ow-drawer { width: 100%; max-width: 100%; }
  .ow-prefs .ow-pref { flex-direction: column; } .ow-acct-filters { align-items: flex-start; flex-direction: column; } }
@container ow-layout (max-width: 600px) { .ow-tiles-5 { grid-template-columns: 1fr; } .ow-coa-list li { flex-wrap: wrap; } .ow-fchip-amt { flex-wrap: wrap; height: auto; padding: 6px 10px; } }
.ow-bulk-bar[hidden] { display: none; } .ow-ins-grid > * { min-width: 0; } .ow-donut-legend li { flex-wrap: wrap; min-width: 0; } .ow-donut-legend b { white-space: normal; }
@container ow-layout (max-width: 960px) { .ow-bulk-bar { flex-wrap: wrap; gap: 8px; } .ow-bulk-bar .ow-select-sm { max-width: 100%; } .ow-acct-chips { max-width: 100%; } }
/* phase 8 review fixes: hidden always wins (a display: flex class was showing hidden bars and buttons), sized empty-state icons, tiles keep their colour on hover, the promo tiles fit their card, four popular reports in a row */
[hidden] { display: none !important; } .ow-empty-ico svg { width: 100%; height: 100%; display: block; } .ow-tile:hover { background: var(--brand-purple); } .ow-tile.is-flat:hover { background: var(--surface-tint-2); } .ow-grid-2 > * { min-width: 0; }
.ow-ins-promo .ow-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; } .ow-ins-promo .ow-tile { padding: 14px 8px; } .ow-ins-promo .ow-tile b { font-size: 20px; } .ow-ins-promo .ow-tile span { font-size: 10px; }
.ow-rep-popular { grid-template-columns: repeat(4, minmax(0, 1fr)); } .ow-rep-card.is-popular { display: block; } .ow-rep-card.is-popular .ow-rep-ico { margin-bottom: 10px; } .ow-track-table td small { display: block; }
@container ow-layout (max-width: 960px) { .ow-rep-popular { grid-template-columns: 1fr 1fr; } } @container ow-layout (max-width: 600px) { .ow-ins-promo .ow-tiles, .ow-rep-popular { grid-template-columns: 1fr; } }
.ow-empty-ico { display: inline-flex; align-items: center; justify-content: center; } /* an inline span has no box, so its 56px never applied and the icon filled the card */

/* ---- Phase 9: settings, notification preferences, resources, the plan wall, the public tools ---- */
.ow-set-card { max-width: 780px; margin-bottom: 18px; } .ow-set-card h2 { font-size: 24px; margin: 0 0 8px; } .ow-set-card h3 { font-size: 17px; margin: 0 0 6px; } .ow-set-wide { max-width: 860px; }
.ow-set-row { display: flex; align-items: flex-start; justify-content: space-between; gap: 18px; padding: 18px 0; border-top: 1px solid var(--border-hairline); } .ow-set-row:first-of-type { border-top: 0; } .ow-set-row > div { flex: 1; min-width: 0; } .ow-set-row p { margin: 0; } .ow-set-row-block { display: block; }
.ow-set-block { padding: 6px 0 14px; } .ow-set-block h2 { font-size: 20px; margin: 0 0 6px; } .ow-set-block p { margin: 0 0 12px; }
.ow-owner { display: flex; align-items: center; gap: 14px; margin-top: 6px; } .ow-avatar { width: 56px; height: 56px; border-radius: 50%; background: var(--brand-purple); color: #fff; font-weight: 700; font-size: 20px; display: inline-flex; align-items: center; justify-content: center; flex: none; } .ow-avatar.sm { width: 36px; height: 36px; font-size: 14px; }
.ow-set-empty { border: 1px solid var(--border); border-radius: 8px; padding: 26px 20px; text-align: center; margin-top: 10px; } .ow-set-empty h4 { font-size: 19px; margin: 0 0 4px; } .ow-set-empty p { color: var(--text-muted); margin: 0 0 14px; }
.ow-company { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-top: 8px; } .ow-company-logo { display: block; max-height: 56px; max-width: 200px; margin-bottom: 8px; }
.ow-promo-band { display: flex; align-items: center; justify-content: space-between; gap: 16px; padding: 16px 18px; border-radius: 8px; background: var(--surface-tint-2); margin: 14px 0; } .ow-promo-band p { margin: 4px 0 0; color: var(--text-secondary); }
.ow-team-row { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-top: 1px solid var(--border-hairline); } .ow-team-row > div { flex: 1; min-width: 0; } .ow-team-row small { display: block; } .ow-team-row.is-pending { opacity: .85; }
.ow-promises { list-style: none; margin: 0 0 8px; padding: 0; } .ow-promises li { padding: 10px 0 10px 28px; position: relative; border-bottom: 1px solid var(--border-hairline); } .ow-promises li::before { content: "\2713"; position: absolute; left: 4px; color: var(--success); font-weight: 700; }
.ow-set-danger { border-color: var(--danger-border); } .ow-center-note { text-align: center; color: var(--text-muted); margin: 14px 0; } .ow-center-wide { max-width: 1040px; margin: 0 auto; }
.ow-logo-preview { padding: 14px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-alt); margin-bottom: 10px; display: inline-block; } .ow-logo-preview img { max-height: 90px; max-width: 260px; display: block; }
.ow-bq { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 18px; border: 1px solid var(--border); border-radius: 8px; margin: 12px 0; } .ow-bq-q { margin: 0 0 4px; font-weight: 600; font-size: 15px; } .ow-bq .hint { margin: 0; }
.ow-ask { flex: none; } .ow-ask button { font: inherit; font-size: 13px; font-weight: 600; padding: 6px 12px; border: 0; background: var(--surface); color: var(--text-muted); cursor: pointer; } .ow-ask button.is-on { background: var(--brand-purple); color: #fff; }
.ow-card-row { display: flex; align-items: center; justify-content: space-between; gap: 14px; padding: 10px 14px; border: 1px solid var(--border); border-radius: 8px; margin-top: 8px; }
/* The saved card's network mark, left of the digits. 44x28 is the 780x500 the
   marks are drawn at, so every one of the seven fills the box exactly and none
   needs a per-brand scale factor (see app/core/card_brands.py).
   The border is LOAD-BEARING, not trim: unionpay.svg is white and discover.svg
   paints white behind its stripe, so without it those two dissolve into the row
   and read as a missing image. */
.ow-cardmark { flex: none; width: 44px; height: 28px; border-radius: 4px; border: 1px solid var(--border-hairline); overflow: hidden; background: var(--surface); display: grid; place-items: center; }
.ow-cardmark img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* No mark for this brand (eftpos_au, link, unknown, or a method that is not a
   card). The glyph keeps the text column starting at the same x as it does on a
   row that DOES have a mark, so the two do not read as different layouts. */
.ow-cardmark svg { width: 20px; height: 20px; fill: none; stroke: var(--text-muted); stroke-width: 1.6; }
.ow-card-id { display: flex; align-items: center; gap: 12px; min-width: 0; }
.ow-plan-band { padding: 14px 18px; border-radius: 8px; background: var(--success-bg); border: 1px solid var(--success-border); margin: 12px 0; } .ow-plan-band b { color: var(--success); } .ow-plan-band p { margin: 4px 0 0; color: var(--text-secondary); }
/* The 120px floor is DELIBERATELY left alone by the density pass. This is the
   Stripe Elements mount, and the floor is the space reserved before the iframe
   reports its own height. Trimming it saves 32px once, on a payment form, in
   exchange for a layout jump while a card field loads. Not worth it. */
.ow-card-element { min-height: 120px; margin: 12px 0; } .is-ok { color: var(--success); }
.ow-plan-table { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); overflow: hidden; margin-top: 12px; }
.ow-plan-head { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--cols, 3), minmax(0, 1fr)); border-bottom: 1px solid var(--border); } .ow-plan-head > div { padding: 22px 18px; border-left: 1px solid var(--border-hairline); text-align: center; position: relative; } .ow-plan-head > div:first-child { border-left: 0; text-align: left; background: var(--surface-alt); }
.ow-plan-intro h2 { font-size: 26px; margin: 0 0 8px; } .ow-plan-intro p { margin: 0; color: var(--text-muted); } .ow-plan-col h3 { font-size: 22px; margin: 0 0 4px; } .ow-plan-price { margin: 0 0 12px; } .ow-plan-price b { font-size: 30px; } .ow-plan-price span { display: block; font-size: 12px; color: var(--text-muted); text-transform: uppercase; letter-spacing: .06em; }
.ow-plan-current { display: inline-block; font-size: 12px; letter-spacing: .06em; text-transform: uppercase; font-weight: 700; color: var(--text-muted); padding: 8px 0; } .ow-plan-col.is-featured { border-top: 3px solid var(--brand-purple); } .ow-plan-badge { position: absolute; top: -14px; left: 50%; transform: translateX(-50%); background: var(--warning); color: #fff; font-size: 12px; font-weight: 700; padding: 4px 12px; border-radius: 999px; white-space: nowrap; }
.ow-plan-group h4 { margin: 0; padding: 14px 18px 6px; font-size: 18px; background: var(--surface-alt); } .ow-plan-row { display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(var(--cols, 3), minmax(0, 1fr)); border-top: 1px solid var(--border-hairline); } .ow-plan-feature { padding: 12px 18px; font-weight: 600; } .ow-plan-cell { border-left: 1px solid var(--border-hairline); display: flex; align-items: center; justify-content: center; } .ow-plan-cell.is-featured { background: var(--surface-tint-2); }
.ow-tick { width: 22px; height: 22px; border-radius: 50%; background: var(--success); color: #fff; font-size: 12px; display: inline-flex; align-items: center; justify-content: center; }
.ow-upgrade { text-align: center; } .ow-order { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 16px; border: 1px solid var(--border); border-radius: 8px; margin: 14px 0; text-align: left; } .ow-order small { display: block; } .ow-testimonials { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin: 12px 0; } .ow-testimonials blockquote { margin: 0; padding: 12px 14px; border-radius: 8px; background: var(--surface-alt); font-size: 14px; } .ow-testimonials cite { display: block; margin-top: 6px; font-style: normal; color: var(--text-muted); font-size: 12px; }
.ow-pref-row { display: flex; align-items: center; justify-content: space-between; gap: 18px; padding: 16px 0; border-top: 1px solid var(--border-hairline); } .ow-pref-row:first-of-type { border-top: 0; } .ow-pref-row > div { flex: 1; min-width: 0; } .ow-pref-row h3 { margin: 0 0 4px; font-size: 17px; } .ow-pref-row p { margin: 0; color: var(--text-muted); }
.ow-onoff { flex: none; } .ow-onoff button { font: inherit; font-size: 13px; font-weight: 700; padding: 7px 14px; border: 0; background: var(--surface); color: var(--text-muted); cursor: pointer; } .ow-onoff button.is-on { background: var(--brand-purple); color: #fff; } .ow-onoff button:disabled { cursor: default; }
.ow-channel { display: flex; align-items: center; gap: 8px; margin-top: 8px; }
.ow-h2 { font-size: 26px; margin: 4px 0 16px; }
.ow-help-cards { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; margin-bottom: 26px; } .ow-help-card { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); padding: 26px 20px; text-align: center; display: flex; flex-direction: column; align-items: center; } .ow-help-card h3 { font-size: 19px; margin: 12px 0 6px; } .ow-help-card p { color: var(--text-muted); margin: 0 0 16px; flex: 1; }
.ow-help-ico { width: 80px; height: 80px; border-radius: 50%; background: var(--surface-tint-2); display: inline-flex; align-items: center; justify-content: center; } .ow-help-ico svg { width: 36px; height: 36px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; } .ow-help-phone { font-size: 22px; font-weight: 700; color: var(--text); text-decoration: none; }
.ow-help-grid { display: grid; grid-template-columns: minmax(0, 1.6fr) minmax(0, 1fr); gap: 26px; } .ow-faq { border: 1px solid var(--border); border-radius: 8px; background: var(--surface); margin-bottom: 10px; } .ow-faq summary { cursor: pointer; padding: 16px 18px; font-weight: 600; font-size: 16px; } .ow-faq p, .ow-faq ol, .ow-faq > a { margin: 0 18px 14px; display: block; } .ow-faq ol { padding-left: 18px; } .ow-guides { list-style: none; margin: 0; padding: 0; } .ow-guides li { margin-bottom: 12px; } .ow-guides a { font-weight: 700; font-size: 17px; color: var(--brand-purple); }
.ow-tb-hero { display: flex; align-items: center; justify-content: space-between; gap: 20px; padding: 34px 36px; border-radius: 12px; background: var(--brand-purple); color: #fff; margin-bottom: 26px; } .ow-tb-hero h2 { font-size: 32px; margin: 0 0 6px; color: #fff; } .ow-tb-hero h2 span { color: #fff; opacity: .85; } .ow-tb-hero p { margin: 0; font-size: 16px; opacity: .92; }
.ow-tb-art { display: flex; gap: 14px; } .ow-tb-art span { width: 72px; height: 72px; border-radius: 50%; background: #fff; display: inline-flex; align-items: center; justify-content: center; } .ow-tb-art svg { width: 34px; height: 34px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; }
.ow-partner-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 18px; margin: 14px 0 30px; } .ow-partner { border: 1px solid var(--border); border-radius: 10px; background: var(--surface); padding: 22px 24px; display: flex; flex-direction: column; } .ow-partner-top { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 14px; } .ow-partner-logo { max-height: 40px; max-width: 160px; } .ow-partner-name { font-size: 22px; letter-spacing: .04em; text-transform: uppercase; }
.ow-partner-tag { font-size: 11px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; padding: 4px 10px; border-radius: 4px; background: var(--surface-tint-2); color: var(--brand-purple); white-space: nowrap; } .ow-partner h4 { font-size: 18px; margin: 0 0 8px; } .ow-partner p { color: var(--text-secondary); margin: 0 0 18px; flex: 1; } .ow-partner .ow-btn { align-self: flex-start; }
.ow-tool-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; margin-top: 14px; } .ow-tool { display: flex; align-items: center; gap: 16px; padding: 18px 20px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--text); } .ow-tool:hover { border-color: var(--brand-purple); } .ow-tool > span:nth-child(2) { flex: 1; min-width: 0; } .ow-tool b { font-size: 19px; display: block; margin-bottom: 4px; } .ow-tool p { margin: 0; color: var(--text-secondary); }
.ow-tool-ico { width: 64px; height: 64px; border-radius: 50%; background: var(--surface-tint-2); display: inline-flex; align-items: center; justify-content: center; flex: none; } .ow-tool-ico svg { width: 30px; height: 30px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; } .ow-tool-arrow { font-size: 30px; color: var(--text-muted); }
.ow-calc .ow-card h3 { margin: 10px 0 8px; } .ow-calc-out { position: sticky; top: 80px; } .ow-tiles-2 { grid-template-columns: 1fr 1fr; margin-top: 14px; } .ow-tile.is-neg { background: var(--danger); }
.ow-cm-hero { text-align: center; padding: 30px 20px 10px; } .ow-cm-hero h2 { font-size: 34px; margin: 6px 0 10px; } .ow-cm-hero h2 span { color: var(--brand-purple); } .ow-cm-hero p { max-width: 640px; margin: 0 auto 20px; color: var(--text-secondary); font-size: 16px; }
.ow-cm-tabs { display: flex; justify-content: center; gap: 16px; flex-wrap: wrap; } .ow-cm-tabs a { width: 128px; padding: 18px 8px 14px; border: 1px solid var(--border-strong); border-radius: 6px; text-decoration: none; color: var(--text); font-weight: 600; display: flex; flex-direction: column; align-items: center; gap: 10px; } .ow-cm-tabs svg { width: 36px; height: 36px; fill: none; stroke: var(--brand-purple); stroke-width: 1.5; }
.ow-cm-section { padding: 30px 0; border-top: 1px solid var(--border-hairline); } .ow-cm-section > h3, .ow-cm-copy h3 { font-size: 28px; margin: 6px 0 12px; } .ow-cm-copy h3 span { color: var(--brand-purple); } .ow-cm-list { list-style: none; padding: 0; margin: 0 0 18px; } .ow-cm-list li { padding: 6px 0 6px 20px; position: relative; font-size: 16px; } .ow-cm-list li::before { content: ""; position: absolute; left: 0; top: 14px; width: 8px; height: 8px; background: var(--brand-purple); }
.ow-course-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; } .ow-course { display: flex; flex-direction: column; gap: 6px; padding: 18px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); text-decoration: none; color: var(--text); } .ow-course:hover { border-color: var(--brand-purple); } .ow-course.is-featured { border-color: var(--brand-purple); } .ow-course b { font-size: 17px; } .ow-course p { margin: 0; color: var(--text-secondary); flex: 1; }
.ow-webinar { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 14px 0; border-bottom: 1px solid var(--border-hairline); } .ow-webinar small { display: block; }
.ow-ref-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 32px; align-items: start; } .ow-ref-grid h2 { font-size: 30px; margin: 8px 0 6px; } .ow-ref-grid > div > p { color: var(--text-secondary); font-size: 16px; }
.ow-ref-steps { list-style: none; margin: 0; padding: 0; } .ow-ref-steps > li { padding: 12px 0; } .ow-ref-steps b { display: block; font-size: 17px; } .ow-ref-steps span { color: var(--text-secondary); } .ow-ref-steps ul { margin: 6px 0 0; padding-left: 18px; color: var(--text-secondary); }
.ow-field-label { display: block; font-weight: 600; margin-bottom: 6px; } .ow-share-row { display: flex; gap: 10px; } .ow-share-row .ow-input { flex: 1; color: var(--brand-purple); } .ow-share-social { display: flex; align-items: center; gap: 12px; margin: 12px 0; } .ow-share-social a { font-weight: 700; color: var(--brand-purple); text-decoration: none; }
.ow-or { display: flex; align-items: center; gap: 12px; margin: 18px 0; color: var(--text-muted); font-size: 12px; font-weight: 700; } .ow-or::before, .ow-or::after { content: ""; flex: 1; height: 1px; background: var(--border); }
/* the public tools (public_base shell) */
.pt-hero { background: var(--brand-purple); color: #fff; padding: 40px 0 60px; min-height: 70vh; } .pt-wrap { max-width: 1080px; margin: 0 auto; padding: 0 24px; } .pt-eyebrow { display: block; font-size: 13px; letter-spacing: .1em; text-transform: uppercase; font-weight: 700; opacity: .9; margin-bottom: 10px; }
.pt-hero h1 { font-size: 40px; line-height: 1.15; margin: 0 0 22px; max-width: 820px; color: #fff; } .pt-accent { color: #48E2D9; } .pt-spark { color: #48E2D9; } .pt-good { color: #84D828; } .pt-bad { color: #ffb4a8; }
.pt-checks { list-style: none; margin: 0 0 26px; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 30px; max-width: 800px; font-size: 17px; } .pt-checks li { padding-left: 30px; position: relative; } .pt-checks li::before { content: "\2713"; position: absolute; left: 0; top: 0; width: 22px; height: 22px; border-radius: 50%; background: #48E2D9; color: #1c1b33; font-size: 13px; font-weight: 700; display: inline-flex; align-items: center; justify-content: center; }
.pt-label { display: block; font-weight: 600; margin: 14px 0 6px; } .pt-select, .pt-input { width: 100%; max-width: 330px; padding: 12px 14px; border-radius: 6px; border: 1px solid rgba(255,255,255,.4); font: inherit; font-size: 16px; background: #fff; color: #1c1b33; display: block; }
/* A dropdown keeps its value and arrow on one line. */
select.pt-select:not([multiple],[size]) { display: flex; }
.pt-drop { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; margin: 22px 0 12px; padding: 44px 20px; border: 2px dashed rgba(255,255,255,.6); border-radius: 10px; cursor: pointer; text-align: center; max-width: 880px; } .pt-drop.is-over { background: rgba(255,255,255,.08); } .pt-drop input { position: absolute; opacity: 0; width: 1px; height: 1px; } .pt-drop-ico { width: 70px; height: 70px; border-radius: 50%; background: #fff; color: var(--brand-purple); font-size: 30px; display: inline-flex; align-items: center; justify-content: center; margin-bottom: 8px; } .pt-drop b { font-size: 22px; } .pt-drop small { opacity: .9; }
.pt-secure { opacity: .9; } .pt-btn { display: inline-block; padding: 14px 28px; border-radius: 999px; border: 0; background: #84D828; color: #1c1b33; font: inherit; font-size: 14px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; text-decoration: none; cursor: pointer; } .pt-btn-ghost { background: transparent; color: #fff; border: 1px solid rgba(255,255,255,.6); } .pt-btn-cyan { background: #48E2D9; }
.pt-fine { font-size: 13px; opacity: .85; margin-top: 16px; } .pt-alert { background: #fff; color: #b3261e; padding: 10px 14px; border-radius: 6px; font-weight: 600; margin: 12px 0; max-width: 700px; }
.pt-scan { text-align: center; padding: 60px 20px; } .pt-scan-ico { font-size: 54px; } .pt-scan h2 { font-size: 30px; margin: 10px 0; color: #fff; } .pt-scan p { opacity: .9; max-width: 520px; margin: 0 auto 20px; } .pt-bar { height: 10px; border-radius: 999px; background: rgba(255,255,255,.25); max-width: 480px; margin: 0 auto; overflow: hidden; } .pt-bar span { display: block; height: 100%; width: 4%; background: #48E2D9; transition: width .6s; }
.pt-topbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 6px; } .pt-lede { max-width: 820px; font-size: 16px; opacity: .95; margin: 0 0 20px; } .pt-note { background: rgba(255,255,255,.12); padding: 12px 14px; border-radius: 8px; max-width: 820px; }
.pt-body { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 30px; align-items: start; margin-top: 20px; }
.pt-cat { background: rgba(255,255,255,.08); border-radius: 10px; margin-bottom: 12px; padding: 0 20px; } .pt-cat summary { cursor: pointer; padding: 18px 0; font-size: 20px; font-weight: 700; display: flex; align-items: center; gap: 12px; list-style: none; } .pt-cat summary::-webkit-details-marker { display: none; } .pt-cat-count { margin-left: auto; font-size: 13px; font-weight: 600; opacity: .8; } .pt-cat-blurb { margin: 0 0 12px; opacity: .9; }
.pt-glyph { width: 22px; height: 22px; border-radius: 50%; flex: none; display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: #1c1b33; } .pt-glyph.ok { background: #84D828; } .pt-glyph.ok::before { content: "\2713"; } .pt-glyph.incomplete { background: #f5a623; } .pt-glyph.incomplete::before { content: "?"; } .pt-glyph.missing { background: #e5484d; color: #fff; } .pt-glyph.missing::before { content: "\00d7"; }
.pt-check { display: flex; gap: 12px; padding: 10px 0; } .pt-check b { font-size: 17px; display: block; margin-bottom: 4px; } .pt-check p { margin: 0; opacity: .92; line-height: 1.5; } .pt-cta { display: block; padding: 14px 0 18px; color: #48E2D9; font-weight: 700; text-decoration: none; }
.pt-side { position: sticky; top: 24px; } .pt-side-card { background: rgba(255,255,255,.12); border-radius: 10px; padding: 34px 28px; text-align: center; } .pt-side-card h3 { font-size: 28px; margin: 0 0 10px; color: #fff; } .pt-side-card p { opacity: .92; margin: 0 0 20px; } .pt-share { display: block; margin: 20px auto 8px; background: none; border: 0; color: #fff; font: inherit; font-size: 16px; font-weight: 700; letter-spacing: .06em; text-transform: uppercase; cursor: pointer; }
.pt-light { background: var(--surface-canvas); padding: 40px 0 60px; min-height: 70vh; } .pt-two { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: 40px; align-items: start; } .pt-form h1 { font-size: 36px; margin: 0 0 8px; } .pt-form .pt-lede { color: var(--text-secondary); } .pt-form .pt-select, .pt-form .pt-input { border-color: var(--border-strong); max-width: 520px; } .pt-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; max-width: 520px; } .pt-row > div .pt-input, .pt-row > div .pt-select { max-width: none; } .pt-muted { color: var(--text-muted); font-size: 14px; } .pt-form .pt-fine { color: var(--text-muted); } .pt-form .pt-alert { background: var(--danger-bg); }
.pt-types { display: flex; gap: 12px; flex-wrap: wrap; margin-bottom: 8px; } .pt-type { position: relative; } .pt-type input { position: absolute; opacity: 0; } .pt-type span { display: inline-block; padding: 18px 22px; border: 1px solid var(--border-strong); border-radius: 8px; background: var(--surface); font-weight: 600; cursor: pointer; } .pt-type input:checked + span { border-color: var(--brand-purple); background: var(--surface-tint-2); }
.pt--card { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 24px; text-align: center; box-shadow: var(--elev-2, 0 6px 16px rgba(15, 23, 42, .12)); } .pt--card b { display: block; font-size: 18px; } .pt--card p { color: var(--text-muted); } .pt-gauge { width: 100%; max-width: 320px; height: auto; margin: 8px auto 0; display: block; } .pt-gauge-n { font-size: 26px; font-weight: 700; fill: var(--text); } .pt-gauge-l { font-size: 9px; fill: var(--text-muted); text-transform: uppercase; letter-spacing: .08em; }
.pt-range { display: flex; justify-content: space-between; max-width: 320px; margin: 0 auto 12px; color: var(--text-muted); font-weight: 600; } .pt-pcts { display: flex; justify-content: center; gap: 14px; } .pt-pcts div { background: var(--surface-alt); border-radius: 8px; padding: 10px 18px; } .pt-pcts small { display: block; font-size: 11px; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); } .pt-pcts b { font-size: 22px; }
.pt-report { text-align: center; margin: 18px 0; } .pt-none h2 { font-size: 24px; margin: 0 0 8px; } .pt-h2 { font-size: 22px; margin: 22px 0 10px; } .pt-comps { width: 100%; border-collapse: collapse; font-size: 14px; background: var(--surface); } .pt-comps th, .pt-comps td { text-align: left; padding: 8px 10px; border-bottom: 1px solid var(--border-hairline); }
@container ow-layout (max-width: 960px) { .ow-help-cards, .ow-help-grid, .ow-partner-grid, .ow-tool-grid, .ow-course-grid, .ow-ref-grid, .ow-testimonials, .pt-two, .pt-body { grid-template-columns: 1fr; } .ow-calc-out, .pt-side { position: static; } .ow-tb-hero { flex-direction: column; text-align: center; } .ow-plan-head, .ow-plan-row { grid-template-columns: minmax(0, 1.2fr) repeat(var(--cols, 3), minmax(0, .8fr)); } .ow-plan-price b { font-size: 22px; } .pt-hero h1 { font-size: 28px; } .pt-checks { grid-template-columns: 1fr; } }
@container ow-layout (max-width: 600px) { .ow-set-row, .ow-pref-row, .ow-bq, .ow-company { flex-direction: column; align-items: flex-start; } .ow-plan-table { overflow-x: auto; } .ow-plan-head, .ow-plan-row { min-width: 560px; } .pt-row { grid-template-columns: 1fr; } .ow-share-row { flex-direction: column; } }
.pt-light .pt-btn-ghost { color: var(--brand-purple); border-color: var(--brand-purple); } @container ow-layout (max-width: 600px) { .ow-set-card .ow-card-head { flex-wrap: wrap; } .ow-set-card .ow-card-head > .ow-btn { flex: none; } }

/* Screening report (applicant profile > Screening report tab). Built for
   _screening_report.html: one collapsible section per bureau block, a payment
   grid, and the four record sections. Colour is state, never category. */
.ow-rep-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 16px; margin-bottom: 16px; } .ow-rep-head h3 { font-size: 22px; font-weight: 600; margin: 0 0 4px; } .ow-rep-head p { margin: 0; font-size: 14px; }
.ow-rep-by { text-align: right; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; } .ow-rep-by small { font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); } .ow-rep-by b { font-size: 15px; } .ow-rep-by .ow-textbtn { margin-top: 6px; }
.ow-rep-counts { margin: 18px 0 4px; padding: 18px 0; border-top: 1px solid var(--border-hairline); border-bottom: 1px solid var(--border-hairline); }
.ow-rep-sec { border-bottom: 1px solid var(--border-hairline); padding: 4px 0 14px; } .ow-rep-sec > summary { cursor: pointer; list-style: none; display: flex; align-items: center; justify-content: space-between; padding: 14px 0 10px; font-size: 17px; font-weight: 600; } .ow-rep-sec > summary::-webkit-details-marker { display: none; } .ow-rep-sec > summary::after { content: "\25BE"; color: var(--text-muted); font-size: 13px; transition: transform .15s; } .ow-rep-sec[open] > summary::after { transform: rotate(180deg); } .ow-rep-sec > summary:hover { color: var(--brand-purple); }
.ow-rep-factors { list-style: none; margin: 0; padding: 0; } .ow-rep-factors li { position: relative; padding: 4px 0 4px 22px; font-size: 14px; } .ow-rep-factors li::before { content: "\25BE"; position: absolute; left: 0; top: 4px; color: var(--danger); font-size: 12px; }
.ow-rep-split { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 24px; } .ow-rep-split h4 { font-size: 15px; font-weight: 600; margin: 0 0 8px; }
.ow-rep-kv { margin: 0; } .ow-rep-kv > div { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 11px 14px; font-size: 14px; } .ow-rep-kv > div:nth-child(odd) { background: var(--surface-canvas); } .ow-rep-kv dt { margin: 0; } .ow-rep-kv dd { margin: 0; font-weight: 600; }
.ow-rep-total td { font-weight: 700; border-bottom: 0; }
.ow-rep-acct + .ow-rep-acct { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--border-hairline); } .ow-rep-acct h4 { font-size: 14px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase; margin: 0 0 8px; }
.ow-rep-grid td, .ow-rep-grid th { text-align: center; padding: 8px 6px; } .ow-rep-grid td:first-child, .ow-rep-grid th:first-child { text-align: left; font-weight: 600; }
.ow-rep-ok { display: inline-flex; align-items: center; justify-content: center; width: 20px; height: 20px; border-radius: 50%; background: var(--success); color: var(--text-on-dark); font-size: 12px; }
.ow-rep-late { display: inline-flex; align-items: center; justify-content: center; min-width: 20px; height: 20px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: var(--text-on-dark); font-size: 11px; font-weight: 700; }
.ow-rep-buckets, .ow-rep-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; text-align: center; margin: 14px 0 4px; } .ow-rep-buckets b, .ow-rep-stats b { display: block; font-size: 24px; font-weight: 700; } .ow-rep-buckets b.is-bad, .ow-rep-stats b.is-bad { color: var(--danger); } .ow-rep-buckets span, .ow-rep-stats span { display: block; font-size: 13px; color: var(--text-muted); }
@container ow-layout (max-width: 760px) { .ow-rep-head { flex-direction: column; } .ow-rep-by { text-align: left; align-items: flex-start; } .ow-rep-split { grid-template-columns: 1fr; } .ow-rep-buckets, .ow-rep-stats { grid-template-columns: 1fr 1fr; } }

/* dashboard: the vacancy and residency rows are the compact four-up strip, which is
   the layout the tile() macro's label/value markup was written for at line 71.
   owners.css:457, in the phase 5 payments block, redefines .ow-tiles and .ow-tile as
   the purple payments card and lands after that strip, so the dashboard has to take
   its own styling back. Every property restated below is one line 457 sets: the grid,
   the gap, the padding, the radius, the purple ground, the reversed ink, and the
   `.ow-tile span` rule, which outranks .ow-tile-value and was flattening the counter
   to a 12px uppercase caption. */
.ow-section .ow-tiles-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 0; }
.ow-section .ow-tiles-4 .ow-tile { align-items: center; gap: 6px; padding: 24px 10px 20px;
  border-radius: 0; background: var(--surface); color: var(--text);
  border-right: 1px solid var(--border-hairline); }
.ow-section .ow-tiles-4 .ow-tile:last-child { border-right: 0; }
.ow-section .ow-tiles-4 .ow-tile:hover { background: var(--surface-canvas); }
.ow-section .ow-tiles-4 .ow-tile-label { font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; opacity: 1; color: var(--text-muted); }
.ow-section .ow-tiles-4 .ow-tile-value { font-size: 26px; font-weight: 600; line-height: 1.1;
  letter-spacing: normal; text-transform: none; opacity: 1; color: var(--text); }
@container ow-layout (max-width: 960px) {
  .ow-section .ow-tiles-4 { grid-template-columns: 1fr 1fr; }
  .ow-section .ow-tiles-4 .ow-tile:nth-child(2) { border-right: 0; }
  .ow-section .ow-tiles-4 .ow-tile:nth-child(-n+2) { border-bottom: 1px solid var(--border-hairline); } }
/* The dashboard tile art, two-tone: a soft filled under-shape behind a darker
   outline. Paired with _dashboard_tile_icons.html, which carries the paths and
   the reasoning. .16 and not the .22 the rent billing set uses, because that art
   sits on a tinted state disc and this sits on a plain white tile. The stroke is
   2.2 rather than the 1.4 the rail glyphs take: at 1.4 a two-tone drawing reads
   as the flat line art it is meant to replace. */
.ow-section .ow-tiles-4 .ow-tile svg { width: 40px; height: 40px; }
.ow-section .ow-tiles-4 .ow-tile .mk-tint { fill: var(--brand-blue); fill-opacity: .16; stroke: none; }
.ow-section .ow-tiles-4 .ow-tile .mk-ln { fill: none; stroke: var(--brand-deep-blue);
  stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
.ow-section .ow-tiles-4 .ow-tile .mk-pop { fill: var(--brand-teal); stroke: none; }

/* property detail: the renter funnel counters. Same label/value tile the dashboard
   strip uses, so it hits the same problem the block above documents: the phase 5
   payments rule at line 602 redefines .ow-tile as the purple money card and lands
   after it. Scoped on its own modifier and NOT on .ow-tiles-3, because five
   accounting pages share that class and their purple tiles are deliberate. Every
   property restated here is one line 602 sets: the gap, the ground, the reversed
   ink, the radius, and the `.ow-tile span` rule that outranks .ow-tile-value and
   was flattening the count to a 12px uppercase caption. */
.ow-tiles.ow-tiles-quiet { gap: 0; background: var(--surface);
  border: 1px solid var(--border); border-radius: 8px; overflow: hidden; }
.ow-tiles-quiet .ow-tile { align-items: center; gap: 6px; padding: 24px 12px 20px;
  border-radius: 0; background: transparent; color: var(--text);
  border-right: 1px solid var(--border-hairline); }
.ow-tiles-quiet .ow-tile:last-child { border-right: 0; }
.ow-tiles-quiet .ow-tile:hover { background: var(--surface-canvas); }
.ow-tiles-quiet .ow-tile svg { width: 34px; height: 34px; stroke-width: 1.4;
  color: var(--text-secondary); }
.ow-tiles-quiet .ow-tile-label { font-size: 11px; letter-spacing: .08em;
  text-transform: uppercase; font-weight: 600; opacity: 1; color: var(--text-muted); }
.ow-tiles-quiet .ow-tile-value { font-size: 26px; font-weight: 600; line-height: 1.1;
  letter-spacing: normal; text-transform: none; opacity: 1; color: var(--text); }
.ow-tiles-quiet .ow-tile-value.is-warn { color:var(--warning-ink); background-color:var(--warning-bg);}
@container ow-layout (max-width: 960px) {
  .ow-tiles-quiet .ow-tile:nth-child(2) { border-right: 0; }
  .ow-tiles-quiet .ow-tile:nth-child(-n+2) { border-bottom: 1px solid var(--border-hairline); } }

/* ---------------------------------------------------------------- lease bands
   The decisions a landlord makes about a lease, each printed as the sentence
   it produces. The left column is the composed clause and is the primary
   content: it is set at reading width and reading size, and the controls sit
   beside it rather than above it, because the point of the band is that most
   landlords agree with what it already says and only touch one or two. */
.lb-band .ow-card-head { align-items: baseline; }
.lb-cols { display: grid; grid-template-columns: minmax(0, 1.15fr) minmax(0, 1fr); gap: 26px; align-items: start; }
@container ow-layout (max-width: 900px) { .lb-cols { grid-template-columns: 1fr; gap: 18px; } }

.lb-says { border-left: 2px solid var(--brand-purple, #8C6CFF); padding-left: 16px; transition: opacity .18s ease; }
.lb-band.is-working .lb-says { opacity: .45; }
.lb-sec { margin: 0 0 16px; }
.lb-sec:last-child { margin-bottom: 0; }
.lb-sec h4 { font-size: 14px; font-weight: 600; margin: 0 0 6px; color: var(--text-strong, inherit); }
.lb-n { font-variant-numeric: tabular-nums; color: var(--text-muted); margin-right: 6px; font-weight: 500; }
.lb-sec p { margin: 0 0 8px; font-size: 14px; line-height: 1.65; color: var(--text-muted); max-width: 62ch; }

.lb-out { border-collapse: collapse; margin: 8px 0 4px; font-size: 13px; width: 100%; max-width: 340px; }
.lb-out th, .lb-out td { text-align: left; padding: 4px 10px 4px 0; border-bottom: 1px solid var(--border-hairline, rgba(0,0,0,.08)); }
.lb-out thead th { font-weight: 600; color: var(--text-muted); }
.lb-out td { color: var(--text-muted); }

.lb-edit { display: grid; gap: 14px; }
.lb-edit .ow-field { margin: 0; }
.lb-textarea textarea { min-height: 74px; }
.lb-int input, .lb-money input { max-width: 190px; }

.lb-util-wrap { border: 0; margin: 0; padding: 0; }
.lb-util-wrap legend { font-size: 13px; font-weight: 600; padding: 0; margin-bottom: 8px; }
.lb-util-wrap small { display: block; margin-top: 8px; color: var(--text-muted); font-size: 12px; }
.lb-util { border-collapse: collapse; width: 100%; font-size: 13px; }
.lb-util th, .lb-util td { padding: 6px 8px; border-bottom: 1px solid var(--border-hairline, rgba(0,0,0,.08)); }
.lb-util thead th { font-weight: 600; color: var(--text-muted); font-size: 12px; text-align: center; }
.lb-util thead th:first-child { text-align: left; }
.lb-util tbody th { text-align: left; font-weight: 500; }
.lb-util td { text-align: center; }
.lb-radio { display: inline-flex; padding: 4px; cursor: pointer; }
.lb-radio input { width: 16px; height: 16px; accent-color: var(--brand-purple, #8C6CFF); cursor: pointer; }
/* ---------- payments overview: the six money tiles ----------
   OWNER DECISION, arrived at over four passes: keep the PURPLE CARD, colour
   the text by type, and past due is RED. Pass one moved the colour to a rail
   on a white card, pass two coloured the whole fill per type, pass three kept
   the purple but could only manage a pink tint for past due. This is pass
   four and it is the one that delivers the actual ask.

   THE GROUND IS DARKER AND THAT IS ARITHMETIC, NOT PREFERENCE. Colour-coded
   type on a purple card is a contrast problem before it is a design one. The
   original #8C6CFF holds no readable text of any colour: solving 4.5:1 for the
   12px caption asks for an ink of luminance 1.233 against a ceiling of 1.0, so
   pure WHITE misses at 3.68:1. Taking it to #7B58EA fixed the caption but not
   the ask, because a red saturated enough to READ as red is DARKER than that
   purple and disappears into it; lifting it until it separates is what turned
   it pink. A real red needs a ground that sits under it. --brand-purple-grad
   is now the brand purple's own hue and chroma at lightness 0.42, which is the
   highest that still leaves --danger's chroma intact after the lift. It is the
   same purple, further down. tokens.css carries the numbers.

   WHAT THE COLOURS ARE. Past due --ink-purple-red, and it is --danger's own
   hue and chroma, only lifted. Unpaid the same treatment on --warning. Paid,
   In transit and Deposited are the lime fill, --brand-blue and --brand-teal
   UNCHANGED: on this ground they clear as they already ship, which is the
   nicest thing about going deeper. Charges keeps white type, because it is
   the period total, a category rather than a state.

   THE CAPTION STAYS WHITE. It is 12px, so its floor is the full 4.5:1 and it
   has 9.44:1. The inks are large-text inks at 3.15 to 5.91; colouring the
   caption with one would put it back under the floor, which is the bug this
   whole thread started as.

   IN TRANSIT IS BLUE, NOT THE PURPLE HE ASKED FOR. Purple type on a purple
   card is not a contrast problem to tune, it is invisible. Brand blue is the
   logo's next stop round and the nearest thing to purple that can be seen
   there. */
.ow-tiles-money { gap: 16px; }
.ow-tiles-money .ow-pay-tile { position: relative; gap: 8px; padding: 22px 42px 22px 24px;
  border: 0; border-radius: 8px; background: var(--brand-purple-grad); color: #fff; }
.ow-tiles-money .ow-pay-label { font-size: 12px; letter-spacing: .08em; text-transform: uppercase;
  font-weight: 700; color: #fff; opacity: 1; }
.ow-tiles-money .ow-pay-value { font-size: 32px; font-weight: 600; line-height: 1; color: #fff; }
.ow-tiles-money .ow-pay-tile i { position: absolute; right: 18px; top: 50%; transform: translateY(-50%);
  font-style: normal; font-size: 30px; line-height: 1; color: #fff; opacity: .85; }
.ow-tiles-money .ow-pay-tile:hover { box-shadow: var(--elev-3); }
.ow-tiles-money .ow-ink-red   .ow-pay-value { color: var(--ink-purple-red); }
.ow-tiles-money .ow-ink-amber .ow-pay-value { color: var(--ink-purple-amber); }
.ow-tiles-money .ow-ink-lime  .ow-pay-value { color: var(--ink-purple-lime); }
.ow-tiles-money .ow-ink-blue  .ow-pay-value { color: var(--ink-purple-blue); }
.ow-tiles-money .ow-ink-teal  .ow-pay-value { color: var(--ink-purple-teal); }

.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; border: 0; }

/* ---------------------------------------------------------------- calendar
   Month grid shared by the dashboard side card (.owcal-mini) and the Calendar
   tab on /owners/showings (.owcal-full). Event types are CATEGORIES, so the
   dots take the viz series and never a status colour, and every dot is paired
   with the word in the panel and the legend. */
.owcal { display: block; }
.owcal-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 10px; }
.owcal-title { font-size: 15px; font-weight: 600; margin: 0; }
.owcal-full .owcal-title { font-size: 19px; }
.owcal-nav { display: flex; align-items: center; gap: 2px; }
.owcal-arrow { display: inline-flex; align-items: center; justify-content: center; width: 28px; height: 28px; padding: 0; border: 0; border-radius: 6px; background: none; color: var(--text-muted); cursor: pointer; }
.owcal-arrow:hover { background: var(--surface-canvas); color: var(--text); }
.owcal-arrow svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.owcal-today { margin-left: 4px; padding: 4px 10px; border: 1px solid var(--border); border-radius: 999px; background: none; font: inherit; font-size: 12px; font-weight: 600; color: var(--brand-purple); cursor: pointer; }
.owcal-today:hover { background: var(--surface-canvas); }
.owcal-dow { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; margin-bottom: 4px; }
.owcal-dow span { text-align: center; font-size: 11px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; color: var(--text-muted); }
.owcal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }
.owcal-grid[aria-busy="true"] { opacity: .45; }
.owcal-cell { display: flex; flex-direction: column; align-items: center; gap: 3px; min-width: 0; padding: 5px 2px; border: 1px solid transparent; border-radius: 6px; background: none; font: inherit; color: var(--text); cursor: pointer; }
.owcal-cell.is-blank { visibility: hidden; cursor: default; }
.owcal-cell:hover { background: var(--surface-canvas); }
.owcal-cell.is-today { border-color: var(--brand-purple); }
.owcal-cell.is-today .owcal-num { color: var(--brand-purple); font-weight: 700; }
.owcal-cell.is-on { background: var(--surface-tint-2); border-color: var(--brand-purple); }
.owcal-num { font-size: 13px; line-height: 1.2; font-variant-numeric: tabular-nums; }
.owcal-dots { display: flex; gap: 3px; min-height: 6px; }
.owcal-dot { width: 6px; height: 6px; border-radius: 50%; flex: none; display: inline-block; background: var(--text-muted); }
.owcal-dot[data-tone="1"] { background: var(--viz-1); }
.owcal-dot[data-tone="2"] { background: var(--viz-2); }
.owcal-dot[data-tone="3"] { background: var(--viz-3); }
.owcal-dot[data-tone="4"] { background: var(--viz-4); }
.owcal-dot[data-tone="5"] { background: var(--viz-5); }
.owcal-dot[data-tone="6"] { background: var(--viz-6); }
.owcal-panel { margin-top: 14px; }
.owcal-panel-title { font-size: 12px; font-weight: 600; letter-spacing: .08em; text-transform: uppercase; color: var(--text-muted); margin: 0 0 8px; }
.owcal-mini .owcal-upcoming { border: 1px solid var(--brand-purple); border-radius: 9px; overflow: hidden; }
.owcal-mini .owcal-upcoming-summary { display: flex; align-items: center; gap: 10px; min-height: 44px; padding: 8px 12px; cursor: pointer; list-style: none; color: var(--brand-purple); }
.owcal-mini .owcal-upcoming-summary::-webkit-details-marker { display: none; }
.owcal-mini .owcal-upcoming-summary:focus-visible { outline: 2px solid var(--brand-purple); outline-offset: -3px; }
.owcal-mini .owcal-upcoming-summary .owcal-panel-title { margin: 0 auto 0 0; font-size: 14px; letter-spacing: 0; color: inherit; }
.owcal-mini .owcal-upcoming-count { display: inline-grid; place-items: center; min-width: 23px; height: 23px; padding: 0 6px; border-radius: 999px; background: var(--ink-purple-lime); color: var(--btn-action-fg); font-size: 12px; font-weight: 700; font-variant-numeric: tabular-nums; }
.owcal-mini .owcal-upcoming-chevron { width: 8px; height: 8px; border-right: 2px solid currentColor; border-bottom: 2px solid currentColor; transform: rotate(45deg); transition: transform .2s ease; }
.owcal-mini .owcal-upcoming[open] .owcal-upcoming-chevron { transform: rotate(225deg); }
.owcal-mini .owcal-upcoming-content { max-height: 260px; overflow-y: auto; padding: 10px 12px 12px; border-top: 1px solid var(--border); }
.owcal-mini .owcal-upcoming-count.has-new { animation: owcal-count-blink 1.2s ease-in-out 3; }
@keyframes owcal-count-blink { 50% { opacity: .45; transform: scale(1.12); } }
@media (prefers-reduced-motion: reduce) {
  .owcal-mini .owcal-upcoming-count.has-new { animation: none; }
  .owcal-mini .owcal-upcoming-chevron { transition: none; }
}
.owcal-note { font-size: 13px; color: var(--text-muted); margin: 0; }
.owcal-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 10px; }
.owcal-item { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.owcal-item .owcal-dot { margin-top: 5px; }
.owcal-item-body { display: flex; flex-direction: column; min-width: 0; }
.owcal-item-title { font-size: 14px; font-weight: 500; overflow-wrap: anywhere; }
.owcal-item-sub { font-size: 12px; color: var(--text-muted); overflow-wrap: anywhere; }

/* The full tab gets taller cells that hold the event titles themselves. */
.owcal-full .owcal-grid { gap: 4px; }
.owcal-full .owcal-cell { align-items: stretch; min-height: 92px; padding: 6px; border-color: var(--border); border-radius: 8px; text-align: left; }
.owcal-full .owcal-cell.is-blank { border-color: transparent; }
/* .owcal-full .owcal-cell sets the resting border and matches the specificity
   of .owcal-cell.is-today, so without this the full grid loses today's ring. */
.owcal-full .owcal-cell.is-today { border-color: var(--brand-purple); }
.owcal-full .owcal-cell.is-on { border-color: var(--brand-purple); }
.owcal-full .owcal-num { text-align: right; font-size: 12px; color: var(--text-muted); }
.owcal-full .owcal-cell.is-today .owcal-num { color: var(--brand-purple); }
.owcal-chips { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.owcal-chip { display: flex; align-items: center; gap: 5px; min-width: 0; font-size: 11px; line-height: 1.3; }
.owcal-chip-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.owcal-more { font-size: 11px; color: var(--text-muted); }
.owcal-legend { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 16px; padding-top: 14px; border-top: 1px solid var(--border); }
.owcal-key { display: inline-flex; align-items: center; gap: 6px; font-size: 12px; color: var(--text-muted); }
/* Seven columns cannot hold a title on a phone: the chips truncate to a single
   letter and say nothing. Below the breakpoint the full grid drops to the same
   dot row the mini card uses, and the panel under it carries the detail. */
@container ow-layout (max-width: 720px) {
  .owcal-full .owcal-cell { min-height: 52px; align-items: center; padding: 5px 2px; }
  .owcal-full .owcal-num { text-align: center; }
  .owcal-full .owcal-chips { flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 3px; }
  .owcal-full .owcal-chip-text, .owcal-full .owcal-more { display: none; }
  .owcal-full .owcal-dow span { font-size: 10px; } }
/* Empty-state and first-visit headings read larger than card titles; the type layer sizes h3 from this token. */
.ow-empty > h3, .ow-first-impression-copy > h3 { --ui-card-title: 24px; line-height: 1.35; }