/* Owner Flow: the salary-or-dividends water system.
   Shared by /calculators/owner-flow and the top of /planning-strategies.
   Colours come from the site tokens in /styles.css (blue water, amber tax,
   violet CPP, green RRSP, maple-red controls). The widget is built by
   owner-flow.js into .of; the figures come from /api/owner-flow.
   Phone (<=820px): the lever and diagram dock under the topbar while the
   dial and gauges scroll beneath them, side by side (phone-cockpit standard). */

.of {
  --of-panel: #0b0b0b;
  --of-pipe: #4a4a4a;
  --of-pipe-in: #141414;
  --of-water: var(--blue);
  --of-water-soft: #1c4a66;
  --of-tax: var(--amber);
  --of-cpp: var(--violet);
  --of-rrsp: var(--green);
  --of-led-off: #2c2c2c;
  font-size: 14px;
  line-height: 1.55;
  color: var(--ink);
  display: flex;
  flex-direction: column;
  gap: 18px;
  margin: 0 0 24px;
}
.of *, .of *::before, .of *::after { box-sizing: border-box; }

.of__stage { display: grid; grid-template-columns: minmax(0, 1.35fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 18px; align-items: start; }
.of__dock {
  display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 10px;
  background: var(--of-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 10px;
}
.of__dock svg { display: block; width: 100%; height: auto; max-width: 100%; }
.of__side { display: flex; flex-direction: column; gap: 14px; min-width: 0; grid-column: 2; grid-row: 1 / span 2; }

/* ---- coming next: the locked levels, blanked out under the diagram ---- */
.of__next { grid-column: 1; grid-row: 2; min-width: 0; }
.of__next .of__label { margin: 0 0 8px; }
.of__nx-list { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.of__nx { display: flex; flex-direction: column; gap: 7px; padding: 12px; border: 1px dashed var(--rule-2); border-radius: 12px; background: var(--of-panel); opacity: .72; }
.of__nx-h { display: inline-flex; gap: 6px; align-items: center; font-size: 11px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.of__nx-h svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.of__nx b { font-size: 13px; color: var(--ink); }
.of__nx-bar { display: block; height: 7px; width: 100%; border-radius: 4px; background: var(--rule-2); opacity: .55; }
.of__nx-bar--s { width: 62%; }
.of__nx p { margin: 0; font-size: 12px; line-height: 1.45; color: var(--ink-dim); }
.of__cockpit { display: grid; grid-template-columns: 1fr; gap: 14px; }
.of__card { background: var(--of-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 16px; }
.of__label { font-size: 10.5px; letter-spacing: .14em; text-transform: uppercase; color: var(--ink-dim); margin: 0 0 8px; }

/* ---- the revenue lever (a vertical tap handle) ---- */
.of__lever {
  display: flex; flex-direction: column; align-items: center; gap: 6px;
  touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab;
  border-radius: 10px; padding: 4px 0;
}
.of__lever:active { cursor: grabbing; }
.of__lever:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.of__lever-cap { font-size: 9.5px; letter-spacing: .12em; text-transform: uppercase; color: var(--ink-dim); text-align: center; line-height: 1.25; }
.of__lever-track {
  position: relative; width: 18px; flex: 1 1 auto; min-height: 220px; margin: 12px 0;
  border-radius: 9px; background: var(--of-pipe-in); border: 2px solid var(--of-pipe);
}
.of__lever-fill {
  position: absolute; left: 2px; right: 2px; bottom: 2px; border-radius: 6px;
  background: linear-gradient(to top, var(--of-water), var(--of-water-soft));
}
.of__lever-handle {
  position: absolute; left: 50%; width: 58px; height: 26px; margin-left: -29px; margin-top: -13px;
  border-radius: 8px; background: #1b1b1b; border: 2px solid var(--accent);
  box-shadow: 0 0 14px rgba(214, 40, 40, .35);
  display: flex; align-items: center; justify-content: center;
}
.of__lever-handle::before { content: ''; width: 30px; height: 3px; border-radius: 2px; background: var(--accent); box-shadow: 0 -6px 0 var(--ink-faint), 0 6px 0 var(--ink-faint); }
.of__lever-val { font-family: 'Bebas Neue', sans-serif; font-size: 22px; line-height: 1; color: var(--ink); font-variant-numeric: tabular-nums; }
.of__lever-hint { font-size: 9.5px; color: var(--ink-dim); text-align: center; line-height: 1.25; }

/* ---- the dial ---- */
.of__mixval { font-family: 'Bebas Neue', sans-serif; font-size: 30px; line-height: 1; margin: 2px 0 10px; font-variant-numeric: tabular-nums; }
.of__mixval span { color: var(--ink-dim); }
.of input[type=range] { width: 100%; accent-color: var(--accent); margin: 4px 0; height: 28px; }
.of__ends { display: flex; justify-content: space-between; font-size: 11px; color: var(--ink-dim); }
.of__presets { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 12px; }
.of__presets button {
  font: inherit; font-size: 12px; padding: 8px 10px; border-radius: 999px; min-height: 36px;
  border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer;
}
.of__presets button[aria-pressed="true"] { border-color: var(--accent); color: var(--accent-glow); }
.of button:focus-visible, .of input:focus-visible, .of a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }

/* ---- readouts ---- */
.of dl.of__reads { display: grid; grid-template-columns: 1fr auto; gap: 6px 12px; margin: 0; font-variant-numeric: tabular-nums; }
.of__reads dt { color: var(--ink-dim); font-size: 12.5px; display: flex; align-items: center; gap: 7px; }
.of__reads dd { margin: 0; text-align: right; font-weight: 700; }
.of__sw { width: 9px; height: 9px; border-radius: 2px; flex: none; }
.of__sw--tax { background: var(--of-tax); }
.of__sw--water { background: var(--of-water); }
.of__sw--rrsp { background: var(--of-rrsp); }
.of__sw--cpp { background: var(--of-cpp); }
.of__reads .of__total { border-top: 1px solid var(--rule-2); padding-top: 6px; }
.of__reads .of__big { font-size: 16px; }
.of__note { font-size: 11.5px; color: var(--ink-dim); margin: 8px 0 0; }
.of__vs dd.of__up { color: var(--of-tax); }
.of__vs dd.of__down { color: var(--accent-glow); }
.of__vs dd.of__good { color: var(--of-rrsp); }
.of--stale .of__reads dd, .of--stale .of__dock svg { opacity: .45; transition: opacity .3s; }

/* ---- warning lights ---- */
.of__lights { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; list-style: none; }
.of__light { display: grid; grid-template-columns: 14px 1fr; gap: 10px; align-items: start; }
.of__led { width: 12px; height: 12px; border-radius: 50%; margin-top: 4px; background: var(--of-led-off); transition: background .3s, box-shadow .3s; }
.of__light[data-on="warn"] .of__led { background: var(--of-tax); box-shadow: 0 0 0 3px rgba(232, 166, 52, .25), 0 0 12px rgba(232, 166, 52, .5); }
.of__light[data-on="info"] .of__led { background: var(--of-water); box-shadow: 0 0 0 3px rgba(74, 184, 255, .25), 0 0 12px rgba(74, 184, 255, .5); }
.of__light b { display: block; font-size: 13px; }
.of__light p { margin: 2px 0 0; font-size: 12px; color: var(--ink-dim); }
.of__light[data-on="off"] b { color: var(--ink-dim); }

/* ---- levels + call to action ---- */
.of__levels { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.of__chip { font-size: 12px; padding: 7px 11px; border-radius: 999px; border: 1px dashed var(--rule-2); color: var(--ink-dim); display: inline-flex; gap: 7px; align-items: center; user-select: none; }
.of__chip--on { border-style: solid; border-color: var(--accent); color: var(--ink); }
.of__chip svg { width: 11px; height: 11px; fill: none; stroke: currentColor; stroke-width: 2; }
.of__lk { display: inline-flex; color: var(--accent); }
.of__lk[hidden] { display: none; }
/* the lock on levels 3, 5 and 6 (Trevor, 2026-10-05): the gate replaces the tool below the chips */
.of--gate > :not(.of__levels):not(.of__gate) { display: none !important; }
.of__gate { margin: 16px 0 8px; padding: 22px 20px; border: 1px solid var(--rule-2); border-radius: 10px; background: var(--of-panel, #0d0d0d); max-width: 620px; }
.of__gate[hidden] { display: none; }
.of__gate .of__label { display: flex; gap: 8px; align-items: center; margin: 0 0 14px; }
.of__gate .of__label svg { width: 14px; height: 14px; fill: none; stroke: var(--accent); stroke-width: 2; }
.of__gatef label { display: block; font-size: 13px; color: var(--ink); margin-bottom: 8px; }
.of__gaterow { display: flex; gap: 8px; flex-wrap: wrap; }
.of__gaterow input { flex: 1 1 200px; min-width: 0; min-height: 40px; padding: 8px 12px; font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule-2); border-radius: 6px; }
.of__gaterow input:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.of__gaterow .of__chip { min-height: 40px; padding: 8px 18px; }
.of__gateor { margin: 14px 0 10px; font-size: 12px; color: var(--ink-dim); text-transform: uppercase; letter-spacing: .08em; }
.of__gatecta { display: inline-block; padding: 12px 18px; min-height: 44px; border-radius: 6px; background: var(--accent); color: #fff; font-weight: 700; text-decoration: none; line-height: 1.35; }
.of__gatecta:hover, .of__gatecta:focus-visible { filter: brightness(1.1); }
.of__gate > .of__note { margin-top: 14px; }
.of__book { display: flex; flex-wrap: wrap; gap: 12px 24px; align-items: center; justify-content: space-between; border-top: 1px solid var(--rule-2); padding-top: 16px; }
.of__book p { margin: 0; max-width: 62ch; color: var(--ink-dim); font-size: 12.5px; }
.of__book p b { color: var(--ink); }
.of__book .cta { padding: 11px 18px; font-size: 12px; }
.of__status { margin: 0; font-size: 12.5px; color: var(--of-tax); min-height: 0; }
.of__status:empty { display: none; }
.of__status button { font: inherit; color: var(--ink); background: transparent; border: 1px solid var(--rule-2); border-radius: 999px; padding: 4px 10px; margin-left: 8px; cursor: pointer; }

/* ---- SVG drawing ---- */
.of .t-lbl { font-family: 'Space Mono', monospace; font-size: 11px; fill: var(--ink-dim); letter-spacing: .06em; }
.of .t-ink { fill: var(--ink); }
.of .t-val { font-family: 'Space Mono', monospace; font-size: 13px; font-weight: 700; fill: var(--ink); }
.of .casing { stroke: var(--of-pipe); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.of .bore { stroke: var(--of-pipe-in); fill: none; stroke-linecap: round; stroke-linejoin: round; }
.of .water { stroke: var(--of-water); fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .35s, opacity .35s; }
.of .sheen { stroke: #bfe6ff; opacity: .55; fill: none; stroke-dasharray: 6 14; stroke-linecap: round; stroke-linejoin: round; animation: of-flow 1.1s linear infinite; transition: opacity .35s; }
.of .taxw { stroke: var(--of-tax); fill: none; stroke-linecap: round; transition: stroke-width .35s, opacity .35s; }
.of .taxsheen { stroke: var(--of-panel); opacity: .45; fill: none; stroke-dasharray: 4 12; animation: of-flow 1.3s linear infinite; }
.of .cppw { stroke: var(--of-cpp); fill: none; stroke-linecap: round; stroke-linejoin: round; transition: stroke-width .35s, opacity .35s; }
.of .drip { fill: var(--of-tax); animation: of-fall 1.2s linear infinite; }
.of .fillT { transition: y .45s, height .45s; }
@keyframes of-flow { to { stroke-dashoffset: -20; } }
@keyframes of-fall { 0% { transform: translateY(0); opacity: 1; } 85% { opacity: .9; } 100% { transform: translateY(var(--d, 40px)); opacity: 0; } }
@media (prefers-reduced-motion: reduce) {
  .of .sheen, .of .taxsheen { animation: none; }
  .of .drip { animation: none; opacity: .9; }
  .of .water, .of .taxw, .of .cppw, .of .fillT, .of__led { transition: none; }
}

/* ---- phone: lever + diagram dock on top; dial and gauges side by side below ---- */
@media (max-width: 820px) {
  .of__stage { grid-template-columns: 1fr; grid-template-rows: none; }
  .of__side { grid-column: 1; grid-row: auto; }
  .of__next { grid-column: 1; grid-row: auto; order: 3; }
  .of__dock {
    position: sticky; top: var(--bar-h); z-index: 20;
    grid-template-columns: 62px minmax(0, 1fr); gap: 6px;
    margin-inline: calc(-1 * var(--gutter)); padding: 6px 12px; border-radius: 0; border-inline: 0;
    box-shadow: 0 10px 18px -12px rgba(0, 0, 0, .9);
  }
  .of__dock svg { max-height: 42vh; margin: 0 auto; width: auto; }
  .of__lever-track { min-height: 0; }
  .of__lever-handle { width: 50px; margin-left: -25px; }
  .of__lever-val { font-size: 18px; }
  .of__lever-hint { display: none; }
  .of .t-lbl { font-size: 13px; letter-spacing: .02em; }
  .of .t-val { font-size: 15px; }
  .of .t-val.t-tight { font-size: 13px; }
  .of__cockpit { grid-template-columns: repeat(auto-fit, minmax(min(250px, 100%), 1fr)); gap: 10px; }
  .of__presets button { padding: 6px 10px; min-height: 34px; }
  .of__card { padding: 12px; }
  .of__mixval { font-size: 24px; }
  .of__reads dt { font-size: 11.5px; }
  .of__reads dd { font-size: 12.5px; }
}

/* the assumptions list on the standalone page */
.of-assume { margin: 8px 0 0; color: var(--ink-dim); font-size: 13px; }
.of-assume summary { cursor: pointer; color: var(--ink); padding: 8px 0; font-size: 13px; letter-spacing: .04em; }
.of-assume summary:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.of-assume .page__bullets li { padding: 10px 0 10px 28px; font-size: 13px; }
.of-assume .page__bullets li::before { top: 10px; }

/* planning page: the tool and the one-desk section sit above the toolkit */
.of-section { margin-bottom: 72px; }
.of-desk { border-top: 1px solid var(--rule-2); padding-top: 40px; }
.of-desk__cta { padding: 11px 18px; }

/* styles.css sets overflow-x:hidden on html and body, which turns body into a
   scroll container and stops the phone dock from sticking. clip trims the
   same overflow without making a scroll container; scoped to pages with the tool. */
body:has(.of) { overflow-x: clip; }

/* ---- level 2: retain in the company ---- */
.of:not(.of--l2) .of-l2only, .of--l2 .of-l1only { display: none; }
button.of__chip { font: inherit; font-size: 12px; background: transparent; cursor: pointer; border-style: solid; color: var(--ink); min-height: 34px; }
button.of__chip:not(.of__chip--on) { border-color: var(--rule-2); color: var(--ink-dim); }
.of__drawbox { border-bottom: 1px solid var(--rule-2); padding-bottom: 14px; margin-bottom: 14px; }
.of__years { margin: 0 0 12px; }
.of__years #of-play { border-color: var(--accent); }
.of__sw--later { background: repeating-linear-gradient(-45deg, var(--of-tax) 0 2px, transparent 2px 5px); outline: 1px dashed var(--of-tax); }
.of__sw--cda { background: var(--of-water); box-shadow: 0 0 0 2px var(--of-panel), 0 0 0 3px var(--of-water); }
.of__sw--ref { background: repeating-linear-gradient(45deg, var(--amber-glow) 0 2px, transparent 2px 5px); outline: 1px dashed var(--amber-glow); }
.of__light--lock .of__led { background: transparent; display: flex; align-items: center; justify-content: center; margin-top: 2px; }
.of__light--lock .of__led svg { width: 12px; height: 12px; fill: none; stroke: var(--ink-dim); stroke-width: 1.6; }
.of__light--lock b { color: var(--ink-dim); }
.of .t-tax { fill: var(--of-tax); }
.of .t-tiny { font-family: 'Space Mono', monospace; font-size: 8.5px; fill: var(--accent-glow); letter-spacing: .04em; }
.of .t-rot { font-family: 'Space Mono', monospace; font-size: 10px; fill: var(--ink-dim); letter-spacing: .05em; }
#of-cdaG, #of-refG, #of-waitL { transition: opacity .35s; }
@media (max-width: 820px) {
  .of__levels { gap: 6px; flex-wrap: nowrap; overflow-x: auto; scrollbar-width: none; margin-inline: calc(-1 * var(--gutter)); padding: 2px var(--gutter); }
  .of__levels::-webkit-scrollbar { display: none; }
  .of__chip { flex: none; white-space: nowrap; }
  button.of__chip, .of__chip { font-size: 11.5px; padding: 6px 10px; }
  .of__drawbox { padding-bottom: 10px; margin-bottom: 10px; }
}
@media (prefers-reduced-motion: reduce) { #of-cdaG, #of-refG, #of-waitL { transition: none; } }

/* ---- level 4: the policy's ACB chart beside the death-year slider ---- */
.of__acb { display: block; width: 100%; height: auto; margin: 10px 0 8px; }
.of .of__acbt { font-family: 'Space Mono', monospace; font-size: 9px; fill: var(--ink-dim); letter-spacing: .04em; }

/* ---- level 6: the 25-year comparison card ---- */
.of__end { border-color: var(--accent); }
.of__cmp { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; font-size: 12.5px; }
.of__cmp th, .of__cmp td { padding: 7px 0 7px 8px; text-align: right; border-top: 1px solid var(--rule-2); vertical-align: top; }
.of__cmp thead th { border-top: 0; font-weight: 400; font-size: 10.5px; letter-spacing: .08em; text-transform: uppercase; color: var(--ink-dim); }
.of__cmp tbody th { text-align: left; padding-left: 0; font-weight: 400; color: var(--ink-dim); }
.of__cmp td { font-weight: 700; white-space: nowrap; }
.of__cmp td.of__good { color: var(--of-rrsp); }
.of__cmp td.of__down { color: var(--accent-glow); }
@media (max-width: 820px) { .of__cmp { font-size: 11.5px; } .of__cmp td { white-space: normal; } }

/* ---- the toolbar under the level chips: the tour and the legend ---- */
.of__tools { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-top: -6px; }
.of__tools .tour-emit { margin: 0; }
.of__legbtn { font: inherit; font-size: 12px; padding: 7px 13px; min-height: 34px; border-radius: 999px; border: 1px solid var(--rule-2); background: transparent; color: var(--ink); cursor: pointer; }
.of__legbtn[aria-expanded="true"] { border-color: var(--accent); color: var(--accent-glow); }
.of__legend { background: var(--of-panel); border: 1px solid var(--rule-2); border-radius: 14px; padding: 12px 14px; margin-top: -6px; }
.of__legend[hidden] { display: none; }
.of__legend .of__note { margin: 0 0 8px; }
.of__legend ul { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(min(260px, 100%), 1fr)); gap: 4px 14px; }
.of__legend button { font: inherit; font-size: 12.5px; color: var(--ink); background: transparent; border: 0; padding: 6px 0; min-height: 32px; display: flex; gap: 9px; align-items: center; cursor: pointer; text-align: left; }
.of__sw--drip { background: var(--of-tax); border-radius: 50%; }
.of__sw--grind { background: repeating-linear-gradient(90deg, var(--accent-glow) 0 3px, transparent 3px 5px); height: 2px; width: 12px; }
.of__sw--qsbc { background: transparent; outline: 1px solid var(--of-rrsp); border-radius: 50%; }
.of__sw--acb { background: var(--of-cpp); height: 3px; width: 12px; }
.of__sw--clock { background: var(--of-rrsp); height: 4px; width: 12px; border-radius: 2px; }

/* ---- tappable diagram parts and the explainer card ---- */
@media (min-width: 821px) { .of__dock { position: relative; } }  /* phones keep the sticky dock (positioned too) */
.of .of__hit { fill: transparent; cursor: pointer; outline: none; }
.of .of__hit:focus-visible, .of .of__hit--on { stroke: var(--accent-glow); stroke-width: 2; stroke-dasharray: 5 4; }
.of__ex {
  position: absolute; z-index: 30; width: 260px; max-width: calc(100% - 12px);
  background: #141414; border: 1px solid var(--of-tax); border-radius: 10px; padding: 12px 13px;
  box-shadow: 0 10px 28px rgba(0, 0, 0, .65); font-size: 12.5px; line-height: 1.5;
}
.of__ex h4 { margin: 0 0 4px; font-size: 13px; color: var(--ink); }
.of__ex p { margin: 0; color: var(--ink-dim); }
.of__ex-act { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 10px; }
.of__ex-act button { font: inherit; font-size: 11.5px; min-height: 32px; padding: 5px 11px; border-radius: 999px; cursor: pointer; border: 1px solid var(--rule-2); background: transparent; color: var(--ink-dim); }
.of__ex-act button[data-ok] { background: var(--of-tax); border-color: transparent; color: #1a1205; font-weight: 700; }
@media (max-width: 820px) {
  .of__ex { left: 8px; right: 8px; bottom: 6px; top: auto; width: auto; max-width: none; max-height: 60%; overflow: auto; }
  .of__tools { margin-top: -4px; }
}
@media (max-width: 820px) {
  .of__ex { padding: 8px 10px; font-size: 11.5px; line-height: 1.4; max-height: 52%; }
  .of__ex h4 { font-size: 12px; margin-bottom: 2px; }
  .of__ex-act { margin-top: 6px; gap: 6px; }
  .of__ex-act button { min-height: 30px; padding: 4px 10px; font-size: 11px; }
}