/* kit-front.css — the v2 element set for the three FRONT sites (investor, tenant, maintenance), step 5 of the look, 10/26/26. MADE FROM design/premium-look-2026-10-25/origin-v2.css by the kit's converter, never edited by hand: `python backend/tests/test_kit_front_2026_10_26.py --write` rebuilds it (frontend-shared/kit-front.css) and `python tools/sync_tokens.py` writes the three byte-equal copies each site serves. A front-theme rule reads `.o-front` (the class on the body); a bare-element rule is scoped `:where(.o-front)`; a dark rule is written for the set theme and for the visitor's system setting. Every value is a var() from tokens.css and the site's front layer (tokens-.css), loaded before this sheet; the site's own styles.css loads after it. */ /* the front page's ground, ink and type (the set's token blocks' own declarations) */ .o-front{background:var(--o-bg);color:var(--o-ink);font:var(--o-fs-body)/var(--o-lh-body) var(--o-font);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;text-rendering:optimizeLegibility;font-feature-settings:"kern","liga","calt"} .o-front{font-size:var(--o-fs-lead)} :where(.o-front) *,:where(.o-front) *::before,:where(.o-front) *::after{box-sizing:border-box} :where(.o-front) a{color:inherit;text-decoration:none} :where(.o-front) button,:where(.o-front) input,:where(.o-front) select,:where(.o-front) textarea{font:inherit;color:inherit} :where(.o-front) :focus-visible{outline:var(--o-line-lg) solid var(--o-accent);outline-offset:var(--o-focus-offset);border-radius:var(--o-r-sm)} .o-front .o-input:focus-visible,.o-front .o-select:focus-visible,.o-front .o-textarea:focus-visible{outline:none} :where(.o-front) ::selection{background:var(--o-accent-tint)} :where(.o-front) .num,.o-front .o-money{font-variant-numeric:tabular-nums lining-nums;letter-spacing:-.005em} .o-front .o-money{text-align:right;white-space:nowrap} .o-front .o-money.neg{color:var(--o-ink-2)} .o-front .o-muted{color:var(--o-ink-2)} .o-front .o-faint{color:var(--o-ink-3)} .o-front .o-caps{font-size:var(--o-fs-caps);font-weight:var(--o-fw-semi);letter-spacing:.08em;text-transform:uppercase;color:var(--o-ink-3)} :where(.o-front) h1,:where(.o-front) h2,:where(.o-front) h3{margin:0;font-weight:var(--o-fw-semi);letter-spacing:-.014em} .o-front .o-h1{font-size:var(--o-fs-h1);line-height:var(--o-lh-title);letter-spacing:-.022em;font-weight:var(--o-fw-strong)} .o-front .o-h2{font-size:var(--o-fs-title);line-height:var(--o-lh-heading);font-weight:var(--o-fw-strong)} .o-front .o-h3{font-size:var(--o-fs-body-lg);line-height:var(--o-lh-snug)} .o-front .o-big{font-size:var(--o-fs-figure);font-weight:var(--o-fw-semi);letter-spacing:-.03em;line-height:var(--o-lh-none);font-variant-numeric:tabular-nums lining-nums} /* ───────── THE SHELL: one sidebar, one page bar ───────── */ .o-front .o-brand{display:flex;align-items:center;gap:var(--o-sx-10);padding:var(--o-sx-6) var(--o-s-2) var(--o-sx-14);font-weight:var(--o-fw-bold);letter-spacing:.12em;font-size:var(--o-fs-small);color:var(--o-ink)} .o-front .o-brand b{margin-left:-.12em} .o-front .o-brand b{color:var(--o-accent-bright);font-weight:var(--o-fw-bold)} .o-front a.o-brand{text-decoration:none;color:var(--o-ink)} /* 10/26/26 (Marco): the wordmark is the link home */ .o-front .o-me{display:flex;align-items:center;gap:var(--o-sx-10);padding:var(--o-s-2) var(--o-sx-10);border-radius:var(--o-r-ctl);margin-top:var(--o-s-2);transition:background var(--o-fast) var(--o-ease)} .o-front .o-me:hover{background:var(--o-surface-3)} .o-front .o-me .nm{flex:1;min-width:0} .o-front .o-me .nm b{display:block;font-size:var(--o-fs-label);font-weight:var(--o-fw-semi)} .o-front .o-me .nm span{display:block;font-size:var(--o-fs-caps);color:var(--o-ink-3);white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .o-front .o-avatar{width:26px;height:26px;border-radius:var(--o-r-round);background:var(--o-accent-tint);color:var(--o-accent-text);display:grid;place-items:center;font-size:var(--o-fs-micro);font-weight:var(--o-fw-bold);letter-spacing:.02em;flex:none} /* 10/26/26 (Marco): the crumb's product and company are links; the page word is not */ .o-front .o-ibtn{width:var(--o-h);height:var(--o-h);border-radius:var(--o-r-item);display:inline-grid;place-items:center;border:0;background:transparent;color:var(--o-ink-2);cursor:pointer;transition:background var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease)} .o-front .o-ibtn:hover{background:var(--o-surface-3);color:var(--o-ink)} .o-front .o-ibtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .o-front .o-page{padding:var(--o-sx-24) var(--o-sx-24) var(--o-sx-64);max-width:1280px;width:100%} .o-front .o-page.narrow{max-width:880px} /* ───────── THE APP ROW: one click between the five products (Marco 10/25/26, "#1, super premium") ───────── */ /* ───────── PAGE HEAD · TILES · CARDS ───────── */ .o-front .o-head{display:flex;align-items:center;gap:var(--o-s-3);margin:0 0 var(--o-sx-20);min-height:var(--o-h-field)} .o-front .o-head .o-h1{flex:none} .o-front .o-head .sub{color:var(--o-ink-3);font-size:var(--o-fs-body)} .o-front .o-head .acts{margin-left:auto;display:flex;gap:var(--o-s-2);align-items:center} .o-front .o-back{width:var(--o-h-field-sm);height:var(--o-h-field-sm);border-radius:var(--o-r-row);display:inline-grid;place-items:center;color:var(--o-ink-2);background:transparent;transition:background var(--o-fast) var(--o-ease)} .o-front .o-back:hover{background:var(--o-surface-3)} .o-front .o-back svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .o-front .o-tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:var(--o-s-3);margin:0 0 var(--o-sx-20)} .o-front .o-tile{background:var(--o-surface);border-radius:var(--o-r-card);padding:var(--o-s-4) var(--o-sx-18) var(--o-sx-14);box-shadow:var(--o-ring),var(--o-s1);display:flex;flex-direction:column;gap:var(--o-sx-6);transition:box-shadow var(--o-med) var(--o-ease)} .o-front .o-tile:hover{box-shadow:var(--o-ring),var(--o-s2)} .o-front .o-tile .k{font-size:var(--o-fs-small);font-weight:var(--o-fw-medium);color:var(--o-ink-2);display:flex;align-items:center;gap:var(--o-sx-6)} .o-front .o-tile .v{font-size:var(--o-fs-figure);font-weight:var(--o-fw-strong);letter-spacing:-.032em;line-height:var(--o-lh-figure);font-variant-numeric:tabular-nums lining-nums} .o-front .o-tile .v.neg{color:var(--o-ink-2)} .o-front .o-tile .s{font-size:var(--o-fs-small);color:var(--o-ink-3)} .o-front .o-tile .trend{font-size:var(--o-fs-caps);font-weight:var(--o-fw-semi);padding:var(--o-sx-1) var(--o-sx-7);border-radius:var(--o-r-pill);margin-left:auto} .o-front .o-tile .trend.up{color:var(--o-pos);background:var(--o-pos-tint)} .o-front .o-tile .trend.down{color:var(--o-ink-2);background:var(--o-surface-3)} .o-front .o-card{background:var(--o-surface);border-radius:var(--o-r-card);box-shadow:var(--o-ring),var(--o-s1);margin:0 0 var(--o-s-4);overflow:hidden} .o-front .o-card-h{display:flex;align-items:center;gap:var(--o-s-3);padding:var(--o-sx-15) var(--o-sx-18);min-height:56px} .o-front .o-card-h .o-h2{flex:none} .o-front .o-card-h .sub{color:var(--o-ink-3);font-size:var(--o-fs-label)} .o-front .o-card-h .acts{margin-left:auto;display:flex;gap:var(--o-s-2);align-items:center} .o-front .o-card-b{padding:0 var(--o-sx-18) var(--o-sx-18)} .o-front .o-card-b.pad{padding:var(--o-sx-18)} .o-front .o-card-f{display:flex;align-items:center;gap:var(--o-s-2);padding:var(--o-s-3) var(--o-sx-18);border-top:var(--o-line) solid var(--o-hair-2);background:var(--o-surface-2)} .o-front .o-card-f .acts{margin-left:auto;display:flex;gap:var(--o-s-2)} .o-front .o-sep{height:1px;background:var(--o-hair-2);margin:0} .o-front .o-grid2{display:grid;grid-template-columns:1fr 1fr;gap:var(--o-s-4)} .o-front .o-grid3{display:grid;grid-template-columns:2fr 1fr;gap:var(--o-s-4)} /* ───────── TABLES ───────── */ .o-front .o-tools{display:flex;align-items:center;gap:var(--o-s-2);padding:0 var(--o-sx-18) var(--o-s-3);flex-wrap:wrap} .o-front .o-tools .o-spacer{flex:1} .o-front .o-tblwrap{overflow:auto;max-height:70vh;scrollbar-width:thin} .o-front .o-tbl{width:100%;border-collapse:separate;border-spacing:0;font-size:var(--o-fs-body)} .o-front .o-tbl th{position:sticky;top:0;z-index:var(--o-z-head);background:var(--o-surface);text-align:left;font-size:var(--o-fs-caps);font-weight:var(--o-fw-semi);letter-spacing:.07em;text-transform:uppercase;color:var(--o-ink-3);padding:var(--o-sx-10) var(--o-s-3);border-bottom:var(--o-line) solid var(--o-hair);white-space:nowrap} .o-front .o-tbl th.o-money,.o-front .o-tbl th.r{text-align:right} .o-front .o-tbl th.sort{cursor:pointer;color:var(--o-ink-2)} .o-front .o-tbl th.sort::after{content:"";display:inline-block;width:5px;height:5px;margin-left:var(--o-sx-6);border-right:var(--o-line-sort) solid currentColor;border-bottom:var(--o-line-sort) solid currentColor;transform:rotate(45deg) translateY(-2px);opacity:.7} .o-front .o-tbl th.sort.asc::after{transform:rotate(-135deg) translateY(-1px)} .o-front .o-tbl td{padding:var(--o-sx-10) var(--o-s-3);border-bottom:var(--o-line) solid var(--o-hair-3);vertical-align:middle;color:var(--o-ink)} .o-front .o-tbl td:first-child,.o-front .o-tbl th:first-child{padding-left:var(--o-sx-18)} .o-front .o-tbl td:last-child,.o-front .o-tbl th:last-child{padding-right:var(--o-sx-18)} .o-front .o-tbl tbody tr{transition:background var(--o-fast) var(--o-ease)} .o-front .o-tbl tbody tr:hover{background:var(--o-surface-2)} .o-front .o-tbl tbody tr.sel{background:var(--o-accent-tint)} .o-front .o-tbl tbody tr.muted td{color:var(--o-ink-3)} .o-front .o-tbl tbody tr.group td{background:var(--o-surface-2);color:var(--o-ink-2);font-size:var(--o-fs-caps);font-weight:var(--o-fw-semi);letter-spacing:.07em;text-transform:uppercase;padding:var(--o-sx-7) var(--o-s-3)} .o-front .o-tbl td.o-money{font-variant-numeric:tabular-nums lining-nums;text-align:right;white-space:nowrap} .o-front .o-tbl td.o-money.neg{color:var(--o-ink-2)} .o-front .o-tbl td.code{font-variant-numeric:tabular-nums;color:var(--o-ink-3)} .o-front .o-tbl td .sub{display:block;font-size:var(--o-fs-small);color:var(--o-ink-3);margin-top:var(--o-sx-1)} .o-front .o-tbl tfoot td{border-top:var(--o-line) solid var(--o-hair);border-bottom:0;font-weight:var(--o-fw-semi);background:var(--o-surface);position:sticky;bottom:0} .o-front .o-tbl .o-rowmenu{opacity:0;transition:opacity var(--o-fast) var(--o-ease)} .o-front .o-tbl tr:hover .o-rowmenu,.o-front .o-tbl .o-rowmenu:focus-visible,.o-front .o-tbl .o-rowmenu[aria-expanded="true"]{opacity:1} .o-front .o-tbl td.sticky,.o-front .o-tbl th.sticky{position:sticky;left:0;background:var(--o-surface);z-index:var(--o-z-pin);box-shadow:var(--o-sh-pin)} .o-front .o-tbl th.sticky{z-index:var(--o-z-corner)} .o-front .o-pager{display:flex;align-items:center;gap:var(--o-sx-6);padding:var(--o-sx-10) var(--o-sx-18);border-top:var(--o-line) solid var(--o-hair-2);font-size:var(--o-fs-small);color:var(--o-ink-3)} .o-front .o-pager .o-spacer{flex:1} /* ───────── FOCUS: one ring for every control ───────── */ .o-front .o-btn:focus-visible,.o-front .o-chip:focus-visible,.o-front .o-toggle:focus-visible,.o-front .o-check input:focus-visible,.o-front .o-seg button:focus-visible,.o-front .o-tab:focus-visible,.o-front .o-ibtn:focus-visible,.o-front .o-rowmenu:focus-visible{outline:none;box-shadow:var(--o-focus)} .o-front .o-btn.focus,.o-front .o-chip.focus,.o-front .o-toggle.focus,.o-front .o-check input.focus,.o-front .o-ibtn.focus{box-shadow:var(--o-focus)} /* ───────── BUTTONS ───────── */ .o-front .o-btn{--o-btn-h:var(--o-h);display:inline-flex;align-items:center;justify-content:center;gap:var(--o-sx-7);height:var(--o-btn-h);padding:0 var(--o-sx-13);border-radius:var(--o-r-ctl);border:0;background:var(--o-surface);color:var(--o-ink);font-weight:var(--o-fw-semi);font-size:var(--o-fs-body);line-height:var(--o-lh-none);letter-spacing:-.004em;cursor:pointer;white-space:nowrap;text-decoration:none;user-select:none;-webkit-tap-highlight-color:transparent;box-shadow:var(--o-ring),var(--o-s1),var(--o-sh-gloss);transition:box-shadow var(--o-fast) var(--o-ease),background var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease),transform var(--o-fast) var(--o-ease)} :root[data-theme="dark"] .o-front .o-btn{box-shadow:var(--o-ring),var(--o-s1),var(--o-sh-gloss-dim)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn{box-shadow:var(--o-ring),var(--o-s1),var(--o-sh-gloss-dim)}} .o-front .o-btn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:none} .o-front .o-btn:hover,.o-front .o-btn.hover{box-shadow:var(--o-ring),var(--o-s2),var(--o-sh-gloss);background:var(--o-surface)} :root[data-theme="dark"] .o-front .o-btn:hover,:root[data-theme="dark"] .o-front .o-btn.hover{background:var(--o-surface-2);box-shadow:var(--o-ring),var(--o-s2)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn:hover,:root:not([data-theme="light"]) .o-front .o-btn.hover{background:var(--o-surface-2);box-shadow:var(--o-ring),var(--o-s2)}} .o-front .o-btn:active,.o-front .o-btn.pressed{background:var(--o-surface-3);box-shadow:var(--o-ring);transform:translateY(.5px)} .o-front .o-btn.primary{background:var(--o-primary);color:var(--o-primary-ink);box-shadow:var(--o-sh-gloss-primary)} .o-front .o-btn.primary:hover,.o-front .o-btn.primary.hover{background:var(--o-primary-hover);box-shadow:var(--o-s1),var(--o-sh-gloss-primary)} .o-front .o-btn.primary:active,.o-front .o-btn.primary.pressed{background:color-mix(in srgb,var(--o-primary) 86%,var(--o-black));box-shadow:none} :root[data-theme="dark"] .o-front .o-btn.primary{box-shadow:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.primary{box-shadow:none}} :root[data-theme="dark"] .o-front .o-btn.primary:active,:root[data-theme="dark"] .o-front .o-btn.primary.pressed{background:color-mix(in srgb,var(--o-primary) 86%,var(--o-bg))}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.primary:active,:root:not([data-theme="light"]) .o-front .o-btn.primary.pressed{background:color-mix(in srgb,var(--o-primary) 86%,var(--o-bg))}} .o-front .o-btn.accent{background:var(--o-accent);color:var(--o-accent-ink);box-shadow:var(--o-sh-gloss-accent)} .o-front .o-btn.accent:hover,.o-front .o-btn.accent.hover{background:color-mix(in srgb,var(--o-accent) 90%,var(--o-black));box-shadow:var(--o-s1)} .o-front .o-btn.accent:active,.o-front .o-btn.accent.pressed{background:color-mix(in srgb,var(--o-accent) 80%,var(--o-black));box-shadow:none} .o-front .o-btn.quiet{background:transparent;box-shadow:none;color:var(--o-ink-2)} .o-front .o-btn.quiet:hover,.o-front .o-btn.quiet.hover{background:var(--o-surface-3);color:var(--o-ink);box-shadow:none} .o-front .o-btn.quiet:active,.o-front .o-btn.quiet.pressed{background:color-mix(in srgb,var(--o-surface-3) 80%,var(--o-ink-4))} .o-front .o-btn.danger{color:var(--o-neg)} .o-front .o-btn.danger.primary{background:var(--o-neg);color:var(--o-neg-ink)} .o-front .o-btn.danger.primary:hover{background:color-mix(in srgb,var(--o-neg) 88%,var(--o-black))} :root[data-theme="dark"] .o-front .o-btn.danger.primary{color:var(--o-neg-ink)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.danger.primary{color:var(--o-neg-ink)}} .o-front .o-btn.sm{--o-btn-h:var(--o-h-sm);padding:0 var(--o-sx-10);font-size:var(--o-fs-small);border-radius:var(--o-r-ctl-sm);gap:var(--o-sx-5)} .o-front .o-btn.sm svg{width:13px;height:13px} .o-front .o-btn.lg{--o-btn-h:var(--o-h-xl);padding:0 var(--o-sx-18);font-size:var(--o-fs-body-lg);border-radius:var(--o-r-ctl);gap:var(--o-s-2)} .o-front .o-btn.lg svg{width:17px;height:17px} .o-front .o-btn.icon{width:var(--o-btn-h);padding:0} .o-front .o-btn.block{width:100%} .o-front .o-btn:disabled,.o-front .o-btn.disabled{background:var(--o-surface-3);color:var(--o-ink-3);box-shadow:none;cursor:not-allowed;transform:none} .o-front .o-btn.notyet{color:var(--o-ink-3)} .o-front .o-btn .chev{width:6px;height:6px;border-right:var(--o-line-chev) solid currentColor;border-bottom:var(--o-line-chev) solid currentColor;transform:rotate(45deg) translateY(-2px);margin-left:var(--o-sx-1);opacity:.75} .o-front .o-btn.busy{color:transparent!important;position:relative;pointer-events:none} .o-front .o-btn.busy::after{content:"";position:absolute;width:14px;height:14px;border-radius:var(--o-r-round);border:var(--o-line-lg) solid var(--o-ink-3);border-right-color:transparent;animation:o-spin var(--o-dur-spin) linear infinite} .o-front .o-btn.primary.busy::after{border-color:var(--o-primary-ink);border-right-color:transparent;opacity:.9} .o-front .o-btn.accent.busy::after{border-color:var(--o-accent-ink);border-right-color:transparent} @keyframes o-spin{to{transform:rotate(360deg)}} .o-front .o-btns{display:inline-flex;gap:var(--o-s-2);align-items:center} .o-front .o-ibtn{width:var(--o-h);height:var(--o-h);border-radius:var(--o-r-item);display:inline-grid;place-items:center;border:0;background:transparent;color:var(--o-ink-2);cursor:pointer;transition:background var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease),transform var(--o-fast) var(--o-ease)} .o-front .o-ibtn:hover,.o-front .o-ibtn.hover{background:var(--o-surface-3);color:var(--o-ink)} .o-front .o-ibtn:active{transform:scale(.96)} .o-front .o-ibtn.sm{width:var(--o-h-sm);height:var(--o-h-sm);border-radius:var(--o-r-ctl-sm)} .o-front .o-ibtn svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .o-front .o-ibtn.sm svg{width:15px;height:15px} .o-front .o-ibtn:disabled{color:var(--o-ink-4);cursor:not-allowed;background:transparent} .o-front .o-rowmenu{width:var(--o-h-sm);height:var(--o-h-sm);border-radius:var(--o-r-ctl-sm);display:inline-grid;place-items:center;border:0;background:transparent;color:var(--o-ink-3);cursor:pointer;transition:background var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease)} .o-front .o-rowmenu:hover,.o-front .o-rowmenu.hover{background:var(--o-surface-3);color:var(--o-ink)} /* ───────── CHIPS · TAGS · MARKS · SEGMENTS · TABS · TOGGLE · DOTS ───────── */ .o-front .o-chip{display:inline-flex;align-items:center;gap:var(--o-sx-6);height:var(--o-h-sm);padding:0 var(--o-sx-11);border-radius:var(--o-r-pill);background:var(--o-surface);box-shadow:var(--o-ring);font-size:var(--o-fs-small);font-weight:var(--o-fw-medium);color:var(--o-ink-2);cursor:pointer;white-space:nowrap;user-select:none;border:0;transition:background var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease),box-shadow var(--o-fast) var(--o-ease),transform var(--o-fast) var(--o-ease)} .o-front .o-chip:hover,.o-front .o-chip.hover{color:var(--o-ink);box-shadow:var(--o-ring),var(--o-s1)} .o-front .o-chip:active,.o-front .o-chip.pressed{background:var(--o-surface-3);box-shadow:var(--o-ring);transform:translateY(.5px)} .o-front .o-chip.on{background:var(--o-ink);color:var(--o-surface);box-shadow:none} :root[data-theme="dark"] .o-front .o-chip.on{color:var(--o-bg)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-chip.on{color:var(--o-bg)}} .o-front .o-chip.on:hover{background:color-mix(in srgb,var(--o-ink) 88%,var(--o-surface))} .o-front .o-chip .n{font-variant-numeric:tabular-nums;opacity:.65;font-weight:var(--o-fw-medium)} .o-front .o-chip .x{width:16px;height:16px;border-radius:var(--o-r-round);display:inline-grid;place-items:center;margin:0 calc(-1*var(--o-s-1)) 0 var(--o-sx-2);opacity:.6;font-size:var(--o-fs-body);line-height:var(--o-lh-none);transition:opacity var(--o-fast) var(--o-ease),background var(--o-fast) var(--o-ease)} .o-front .o-chip .x:hover{opacity:1;background:var(--o-x-hover)} .o-front .o-chip:disabled,.o-front .o-chip.disabled{color:var(--o-ink-3);box-shadow:var(--o-sh-edge-2);cursor:not-allowed;background:var(--o-surface-2)} .o-front .o-chip svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .o-front .o-tag{display:inline-flex;align-items:center;gap:var(--o-sx-6);height:22px;padding:0 var(--o-s-2);border-radius:var(--o-r-pill);font-size:var(--o-fs-small);font-weight:var(--o-fw-semi);letter-spacing:.01em;white-space:nowrap;background:var(--o-surface-3);color:var(--o-ink-2);line-height:var(--o-lh-none)} .o-front .o-tag::before{content:"";width:6px;height:6px;border-radius:var(--o-r-round);background:currentColor;opacity:.85;flex:none} .o-front .o-tag.nodot::before{display:none} .o-front .o-tag.pos{background:var(--o-pos-tint);color:var(--o-pos)} .o-front .o-tag.warn{background:var(--o-warn-tint);color:var(--o-warn)} .o-front .o-tag.neg{background:var(--o-neg-tint);color:var(--o-neg)} .o-front .o-tag.info{background:var(--o-info-tint);color:var(--o-info)} .o-front .o-tag.accent{background:var(--o-accent-tint);color:var(--o-accent-text)} .o-front .o-tag.hollow{background:transparent;box-shadow:var(--o-sh-edge);color:var(--o-ink-2)} .o-front .o-tag.fund{background:var(--o-fund-tint);color:var(--o-fund)} .o-front .o-tag.investor{background:var(--o-investor-tint);color:var(--o-investor)} .o-front .o-tag.manager{background:var(--o-manager-tint);color:var(--o-manager)} .o-front .o-tag.property{background:var(--o-property-tint);color:var(--o-property)} .o-front .o-tag.custodial{background:var(--o-custodial-tint);color:var(--o-custodial)} .o-front .o-tag.test{background:var(--o-test-tint);color:var(--o-test)} .o-front .o-tag.lg{height:26px;padding:0 var(--o-sx-10);font-size:var(--o-fs-label);border-radius:var(--o-r-ctl-sm)} .o-front .o-mark{font-size:var(--o-fs-caps);font-weight:var(--o-fw-medium);letter-spacing:.01em;color:var(--o-ink-2);padding:var(--o-sx-2) var(--o-s-2);border-radius:var(--o-r-pill);box-shadow:var(--o-sh-edge);white-space:nowrap;line-height:var(--o-lh-body);background:var(--o-surface)} .o-front .o-mark.off{color:var(--o-ink-3);box-shadow:none;background:var(--o-hair-3)} .o-front .o-star{color:var(--o-star-ink);background:var(--o-star-tint);font-weight:var(--o-fw-semi);font-size:var(--o-fs-small);padding:var(--o-sx-2) var(--o-s-2);border-radius:var(--o-r-pill);display:inline-flex;gap:var(--o-sx-3);align-items:center;line-height:var(--o-lh-body)} .o-front .o-star i{font-style:normal;color:var(--o-star)} .o-front .o-seg{position:relative;display:inline-flex;background:var(--o-surface-3);border-radius:var(--o-r-item);padding:var(--o-sx-2);gap:var(--o-sx-2);isolation:isolate} .o-front .o-seg .ind{position:absolute;top:2px;left:2px;height:var(--o-h-sm);border-radius:var(--o-r-ctl-sm);background:var(--o-surface);box-shadow:var(--o-s1),var(--o-ring);transition:transform var(--o-slow) var(--o-ease),width var(--o-slow) var(--o-ease);z-index:var(--o-z-base);pointer-events:none} .o-front .o-seg button,.o-front .o-seg a{position:relative;z-index:var(--o-z-raised);height:var(--o-h-sm);padding:0 var(--o-sx-11);border-radius:var(--o-r-ctl-sm);border:0;background:transparent;color:var(--o-ink-2);font-size:var(--o-fs-label);font-weight:var(--o-fw-medium);cursor:pointer;white-space:nowrap;user-select:none;transition:color var(--o-fast) var(--o-ease),background var(--o-fast) var(--o-ease)} .o-front .o-seg button:hover,.o-front .o-seg a:hover{color:var(--o-ink)} .o-front .o-seg .on,.o-front .o-seg [aria-pressed="true"]{background:var(--o-surface);color:var(--o-ink);font-weight:var(--o-fw-semi);box-shadow:var(--o-s1),var(--o-ring)} .o-front .o-seg:has(.ind) .on,.o-front .o-seg:has(.ind) [aria-pressed="true"]{background:transparent;box-shadow:none} .o-front .o-seg.sm{border-radius:var(--o-r-row)} .o-front .o-seg.sm button,.o-front .o-seg.sm .ind{height:24px;padding:0 var(--o-sx-9);font-size:var(--o-fs-small);border-radius:var(--o-r-sm)} .o-front .o-seg button:disabled{color:var(--o-ink-4);cursor:not-allowed} .o-front .o-tabs{display:flex;gap:var(--o-s-5);border-bottom:var(--o-line) solid var(--o-hair);margin:0 0 var(--o-sx-18);overflow-x:auto;scrollbar-width:none} .o-front .o-tab{padding:0 0 var(--o-sx-10);font-size:var(--o-fs-body);font-weight:var(--o-fw-medium);color:var(--o-ink-2);position:relative;white-space:nowrap;display:inline-flex;gap:var(--o-sx-6);align-items:center;border-radius:var(--o-r-xs) var(--o-r-xs) 0 0;transition:color var(--o-fast) var(--o-ease)} .o-front .o-tab:hover{color:var(--o-ink)} .o-front .o-tab.cur{color:var(--o-ink);font-weight:var(--o-fw-semi)} .o-front .o-tab.cur::after{content:"";position:absolute;left:0;right:0;bottom:-1px;height:2px;border-radius:var(--o-r-2xs);background:var(--o-accent)} .o-front .o-tab .n{font-size:var(--o-fs-caps);color:var(--o-ink-3);font-variant-numeric:tabular-nums} .o-front .o-toggle{width:36px;height:22px;border-radius:var(--o-r-pill);background:var(--o-ink-4);border:0;position:relative;cursor:pointer;transition:background var(--o-med) var(--o-ease);flex:none;padding:0;-webkit-tap-highlight-color:transparent} .o-front .o-toggle::after{content:"";position:absolute;top:2px;left:2px;width:18px;height:18px;border-radius:var(--o-r-round);background:var(--o-white);box-shadow:var(--o-sh-knob);transition:transform var(--o-med) var(--o-ease),width var(--o-fast) var(--o-ease)} .o-front .o-toggle:hover{background:color-mix(in srgb,var(--o-ink-4) 85%,var(--o-ink))} .o-front .o-toggle:active::after{width:21px} .o-front .o-toggle[aria-checked="true"]{background:var(--o-accent)} .o-front .o-toggle[aria-checked="true"]:hover{background:color-mix(in srgb,var(--o-accent) 90%,var(--o-black))} .o-front .o-toggle[aria-checked="true"]::after{transform:translateX(14px)} .o-front .o-toggle[aria-checked="true"]:active::after{transform:translateX(11px)} .o-front .o-toggle:disabled,.o-front .o-toggle.ro{opacity:.45;cursor:not-allowed} .o-front .o-toggle.sm{width:30px;height:18px} .o-front .o-toggle.sm::after{width:14px;height:14px} .o-front .o-toggle.sm[aria-checked="true"]::after{transform:translateX(12px)} .o-front .o-dot{display:inline-block;width:8px;height:8px;border-radius:var(--o-r-round);background:var(--o-ink-4);vertical-align:middle} .o-front .o-dot.pos{background:var(--o-pos)}.o-front .o-dot.warn{background:var(--o-warn)}.o-front .o-dot.neg{background:var(--o-neg)}.o-front .o-dot.accent{background:var(--o-accent-bright)} .o-front .o-dot.live{box-shadow:var(--o-sh-live-soft)} /* ───────── FORMS ───────── */ .o-front .o-fld{display:flex;flex-direction:column;gap:var(--o-sx-6);margin:0 0 var(--o-s-4);min-width:0} .o-front .o-fld>label,.o-front .o-lbl{font-size:var(--o-fs-label);font-weight:var(--o-fw-semi);color:var(--o-ink);display:flex;align-items:center;gap:var(--o-sx-6);line-height:var(--o-lh-snug)} .o-front .o-fld>label .opt{font-weight:var(--o-fw-regular);color:var(--o-ink-3)} .o-front .o-fld .fact,.o-front .o-fld .help{font-size:var(--o-fs-small);color:var(--o-ink-3);line-height:var(--o-lh-note)} .o-front .o-fld .err{font-size:var(--o-fs-small);color:var(--o-neg);display:flex;align-items:center;gap:var(--o-sx-6);line-height:var(--o-lh-compact)} .o-front .o-fld .err svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round;flex:none} .o-front .o-input,.o-front .o-select,.o-front .o-textarea{--o-ctl-h:var(--o-h-field);height:var(--o-ctl-h);padding:0 var(--o-sx-11);border-radius:var(--o-r-ctl);border:0;background:var(--o-surface);box-shadow:var(--o-sh-edge),var(--o-sh-inner);color:var(--o-ink);font-size:var(--o-fs-body);width:100%;transition:box-shadow var(--o-fast) var(--o-ease),background var(--o-fast) var(--o-ease);outline:none;appearance:none;-webkit-appearance:none} :root[data-theme="dark"] .o-front .o-input,:root[data-theme="dark"] .o-front .o-select,:root[data-theme="dark"] .o-front .o-textarea{box-shadow:var(--o-sh-edge)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-input,:root:not([data-theme="light"]) .o-front .o-select,:root:not([data-theme="light"]) .o-front .o-textarea{box-shadow:var(--o-sh-edge)}} .o-front .o-textarea{height:auto;min-height:88px;padding:var(--o-sx-9) var(--o-sx-11);line-height:var(--o-lh-body);resize:vertical} .o-front .o-input::placeholder,.o-front .o-textarea::placeholder{color:var(--o-ink-3)} .o-front .o-input:hover,.o-front .o-select:hover,.o-front .o-textarea:hover,.o-front .o-input.hover{box-shadow:var(--o-sh-edge-strong),var(--o-sh-inner)} .o-front .o-input:focus,.o-front .o-select:focus,.o-front .o-textarea:focus,.o-front .o-input.focus,.o-front .o-select.focus{box-shadow:var(--o-sh-edge-accent),var(--o-sh-halo);outline:none} .o-front .o-input:read-only:not(.o-select){background:var(--o-surface-2);color:var(--o-ink-2);box-shadow:var(--o-sh-edge-2)} .o-front .o-input:disabled,.o-front .o-select:disabled,.o-front .o-textarea:disabled{background:var(--o-surface-2);color:var(--o-ink-3);box-shadow:var(--o-sh-edge-2);cursor:not-allowed} .o-front .o-fld.bad .o-input,.o-front .o-fld.bad .o-select,.o-front .o-fld.bad .o-textarea,.o-front .o-input.bad{box-shadow:var(--o-sh-edge-neg),var(--o-sh-halo-neg)} .o-front .o-input.sm,.o-front .o-select.sm{--o-ctl-h:var(--o-h-field-sm);font-size:var(--o-fs-label);padding:0 var(--o-sx-9);border-radius:var(--o-r-ctl)} .o-front .o-input.lg,.o-front .o-select.lg{--o-ctl-h:var(--o-h-xxl);font-size:var(--o-fs-lead);padding:0 var(--o-sx-13);border-radius:var(--o-r-ctl)} .o-front .o-select{padding-right:var(--o-sx-30);background-image:linear-gradient(45deg,transparent 50%,var(--o-ink-3) 50%),linear-gradient(135deg,var(--o-ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat;cursor:pointer} .o-front .o-select:disabled{cursor:not-allowed} .o-front .o-inwrap{position:relative;display:flex;align-items:center;min-width:0} .o-front .o-inwrap .pre,.o-front .o-inwrap .post{position:absolute;color:var(--o-ink-3);font-size:var(--o-fs-body);pointer-events:none;display:inline-flex;align-items:center} .o-front .o-inwrap .pre{left:11px}.o-front .o-inwrap .post{right:11px} .o-front .o-inwrap .pre svg,.o-front .o-inwrap .post svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round} .o-front .o-inwrap.pre .o-input{padding-left:var(--o-sx-26)}.o-front .o-inwrap.post .o-input{padding-right:var(--o-sx-34)} .o-front .o-input.o-money{text-align:right;font-variant-numeric:tabular-nums lining-nums} .o-front .o-row{display:grid;grid-template-columns:200px 1fr;gap:var(--o-s-3) var(--o-sx-20);align-items:start;padding:var(--o-sx-14) 0;border-bottom:var(--o-line) solid var(--o-hair-3)} .o-front .o-row:last-child{border-bottom:0} .o-front .o-row>.k{font-size:var(--o-fs-body);font-weight:var(--o-fw-semi);padding-top:var(--o-s-2);display:flex;flex-wrap:wrap;align-items:center;gap:var(--o-sx-6)} .o-front .o-row>.k .fact{display:block;width:100%;font-weight:var(--o-fw-regular);font-size:var(--o-fs-small);color:var(--o-ink-3);margin-top:var(--o-sx-2)} .o-front .o-row>.v{min-width:0;max-width:520px} .o-front .o-row>.v .o-fld{margin:0} .o-front .o-row>.v .read{padding-top:var(--o-s-2);color:var(--o-ink)} .o-front .o-row>.v .inline{display:flex;align-items:center;gap:var(--o-sx-10);min-height:var(--o-h-field);flex-wrap:wrap} .o-front .o-check{display:inline-flex;align-items:center;gap:var(--o-s-2);font-size:var(--o-fs-body);cursor:pointer;user-select:none} .o-front .o-check input{appearance:none;-webkit-appearance:none;width:16px;height:16px;border-radius:var(--o-r-mark);box-shadow:var(--o-sh-edge-strong);background:var(--o-surface);margin:0;display:grid;place-items:center;cursor:pointer;transition:background var(--o-fast) var(--o-ease),box-shadow var(--o-fast) var(--o-ease);flex:none} .o-front .o-check input:hover{box-shadow:var(--o-sh-edge-hover)} .o-front .o-check input:checked{background:var(--o-accent);box-shadow:none} .o-front .o-check input:checked::after{content:"";width:4px;height:8px;border-right:var(--o-line-lg) solid var(--o-white);border-bottom:var(--o-line-lg) solid var(--o-white);transform:rotate(45deg) translate(-1px,-1px)} .o-front .o-check input:indeterminate{background:var(--o-accent);box-shadow:none} .o-front .o-check input:indeterminate::after{content:"";width:8px;height:2px;background:var(--o-white);border-radius:var(--o-r-hair)} .o-front .o-check input:disabled{opacity:.45;cursor:not-allowed} .o-front .o-check input:disabled+span{color:var(--o-ink-3)} .o-front .o-radio input{border-radius:var(--o-r-round)} .o-front .o-radio input:checked::after{width:6px;height:6px;border:0;border-radius:var(--o-r-round);background:var(--o-white);transform:none} .o-front .o-savebar{position:sticky;bottom:16px;display:flex;align-items:center;gap:var(--o-sx-14);padding:var(--o-sx-10) var(--o-s-3) var(--o-sx-10) var(--o-s-4);border-radius:var(--o-r-ctl);background:color-mix(in srgb,var(--o-surface) 86%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);box-shadow:var(--o-ring),var(--o-s2);margin-top:var(--o-s-4)} .o-front .o-savebar b{font-size:var(--o-fs-body);white-space:nowrap} .o-front .o-savebar .diff{flex:1;font-size:var(--o-fs-label);color:var(--o-ink-2);display:flex;flex-direction:column;gap:var(--o-sx-2);min-width:0} .o-front .o-savebar .diff span::before{content:"";display:inline-block;width:6px;height:6px;border-radius:var(--o-r-round);background:var(--o-accent);margin-right:var(--o-s-2);vertical-align:middle} .o-front .o-savebar .diff span.bad::before{background:var(--o-warn)} .o-front .o-dirty{display:inline-block;width:6px;height:6px;border-radius:var(--o-r-round);background:var(--o-accent);vertical-align:middle;margin-left:var(--o-sx-2)} /* ───────── DIALOGS · MENUS · HOVER CARDS ───────── */ .o-front .o-backdrop{position:absolute;inset:0;background:var(--o-overlay);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px);display:grid;place-items:center;padding:var(--o-sx-24);z-index:var(--o-z-dialog)} .o-front .o-dialog{width:100%;max-width:520px;background:var(--o-surface);border-radius:var(--o-r-menu);box-shadow:var(--o-s3),var(--o-ring);overflow:hidden;animation:o-pop var(--o-slow) var(--o-ease)} .o-front .o-dialog.wide{max-width:760px} .o-front .o-dialog.narrow{max-width:420px} @keyframes o-pop{from{opacity:0;transform:translateY(6px) scale(.985)}to{opacity:1;transform:none}} .o-front .o-dialog-h{display:flex;align-items:flex-start;gap:var(--o-s-3);padding:var(--o-sx-18) var(--o-s-4) var(--o-sx-6) var(--o-sx-20)} .o-front .o-dialog-h .o-h2{flex:1;padding-top:var(--o-s-1)} .o-front .o-dialog-h .sub{display:block;font-size:var(--o-fs-label);color:var(--o-ink-3);font-weight:var(--o-fw-regular);margin-top:var(--o-sx-2);letter-spacing:0} .o-front .o-dialog-h .o-ibtn{margin:calc(-1*var(--o-sx-2)) 0 0} .o-front .o-dialog-b{padding:var(--o-s-3) var(--o-sx-20) var(--o-s-2)} .o-front .o-dialog-f{display:flex;align-items:center;gap:var(--o-s-2);padding:var(--o-s-3) var(--o-sx-20) var(--o-s-4)} .o-front .o-dialog-f .acts{margin-left:auto;display:flex;gap:var(--o-s-2)} .o-front .o-summary{display:grid;grid-template-columns:1fr auto;gap:var(--o-s-2) var(--o-sx-20);padding:var(--o-s-3) var(--o-sx-14);border-radius:var(--o-r-ctl);background:var(--o-surface-2);font-size:var(--o-fs-body);margin:var(--o-s-2) 0 var(--o-s-3)} .o-front .o-summary .k{color:var(--o-ink-2)} .o-front .o-summary .tot{grid-column:1/-1;border-top:var(--o-line) solid var(--o-hair);padding-top:var(--o-s-2);display:flex;justify-content:space-between;font-weight:var(--o-fw-semi)} .o-front .o-menu{min-width:200px;background:var(--o-surface);border-radius:var(--o-r-ctl);box-shadow:var(--o-s2),var(--o-ring);padding:var(--o-sx-5);display:inline-flex;flex-direction:column;gap:var(--o-sx-1);animation:o-pop var(--o-med) var(--o-ease)} .o-front .o-menu .it{display:flex;align-items:center;gap:var(--o-sx-10);height:var(--o-h-md);padding:0 var(--o-sx-10);border-radius:var(--o-r-ctl-sm);font-size:var(--o-fs-body);color:var(--o-ink);cursor:pointer;user-select:none;transition:background var(--o-fast) var(--o-ease)} .o-front .o-menu .it:hover,.o-front .o-menu .it.hover{background:var(--o-surface-3)} .o-front .o-menu .it.cur{box-shadow:var(--o-sh-menu-cur);background:var(--o-surface-2)} .o-front .o-menu .it.danger{color:var(--o-neg)} .o-front .o-menu .it.danger svg{color:var(--o-neg)} .o-front .o-menu .it.disabled{color:var(--o-ink-3);cursor:not-allowed} .o-front .o-menu .it .chk{margin-left:auto;width:14px;height:14px;color:var(--o-accent-text)} .o-front .o-menu .sep{height:1px;background:var(--o-hair-2);margin:var(--o-sx-5) var(--o-s-1)} .o-front .o-menu .o-caps{padding:var(--o-s-2) var(--o-sx-10) var(--o-s-1)} .o-front .o-menu .it svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round;color:var(--o-ink-3);transition:color var(--o-fast) var(--o-ease)} .o-front .o-menu .it:hover svg{color:var(--o-ink)} .o-front .o-tip{display:inline-block;max-width:280px;background:var(--o-tip-bg);color:var(--o-tip-ink);font-size:var(--o-fs-small);line-height:var(--o-lh-note);padding:var(--o-s-2) var(--o-sx-11);border-radius:var(--o-r-item);box-shadow:var(--o-sh-tip);letter-spacing:.002em} .o-front .o-tip b{font-weight:var(--o-fw-semi)} /* 10/26/26 (Marco): the hand on every clickable, the arrow elsewhere */ /* 10/26/26: the help cursor is the (i) mark's alone; any other carrier of a note keeps its own cursor (Marco: the app row showed a question mark) */ .o-front .o-ht{text-decoration:underline dotted transparent;text-underline-offset:3px;transition:text-decoration-color var(--o-fast) var(--o-ease)} .o-front .o-ht:hover{text-decoration-color:var(--o-ink-3)} .o-front .o-info{display:inline-grid;place-items:center;width:14px;height:14px;border-radius:var(--o-r-round);box-shadow:var(--o-sh-edge-strong);color:var(--o-ink-3);font-size:var(--o-fs-micro);font-weight:var(--o-fw-bold);font-style:normal;transition:color var(--o-fast) var(--o-ease),box-shadow var(--o-fast) var(--o-ease)} .o-front .o-info:hover{color:var(--o-accent-text);box-shadow:var(--o-sh-edge-accent)} /* ───────── FEEDBACK: TOASTS · BANNERS · EMPTY · SKELETON · FOLDS ───────── */ .o-front .o-toast{display:inline-flex;align-items:center;gap:var(--o-sx-10);padding:var(--o-sx-10) var(--o-sx-14) var(--o-sx-10) var(--o-s-3);border-radius:var(--o-r-box);background:var(--o-tip-bg);color:var(--o-tip-ink);font-size:var(--o-fs-body);box-shadow:var(--o-s2);animation:o-rise var(--o-slow) var(--o-ease)} @keyframes o-rise{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:none}} .o-front .o-toast .ic{width:20px;height:20px;border-radius:var(--o-r-round);display:grid;place-items:center;flex:none;font-size:var(--o-fs-small)} .o-front .o-toast .ic.pos{background:var(--o-pos);color:var(--o-white)}.o-front .o-toast .ic.neg{background:var(--o-neg);color:var(--o-white)}.o-front .o-toast .ic.info{background:var(--o-tip-tint)} .o-front .o-toast .act{margin-left:var(--o-sx-6);color:var(--o-accent-bright);font-weight:var(--o-fw-semi);cursor:pointer} .o-front .o-toast .x{margin-left:var(--o-s-1);opacity:.6;cursor:pointer} .o-front .o-banner{display:flex;align-items:flex-start;gap:var(--o-sx-10);padding:var(--o-sx-11) var(--o-sx-14);border-radius:var(--o-r-ctl);font-size:var(--o-fs-body);line-height:var(--o-lh-note);background:var(--o-surface-2);color:var(--o-ink);box-shadow:var(--o-ring);margin:0 0 var(--o-sx-14)} .o-front .o-banner .ic{width:18px;height:18px;border-radius:var(--o-r-round);flex:none;display:grid;place-items:center;font-size:var(--o-fs-caps);font-weight:var(--o-fw-bold);margin-top:var(--o-sx-1)} .o-front .o-banner.info{background:var(--o-info-tint);box-shadow:none}.o-front .o-banner.info .ic{background:var(--o-info);color:var(--o-white)} .o-front .o-banner.warn{background:var(--o-warn-tint);box-shadow:none}.o-front .o-banner.warn .ic{background:var(--o-warn);color:var(--o-white)} .o-front .o-banner.neg{background:var(--o-neg-tint);box-shadow:none}.o-front .o-banner.neg .ic{background:var(--o-neg);color:var(--o-white)} .o-front .o-banner.pos{background:var(--o-pos-tint);box-shadow:none}.o-front .o-banner.pos .ic{background:var(--o-pos);color:var(--o-white)} .o-front .o-banner.accent{background:var(--o-accent-tint);box-shadow:none}.o-front .o-banner.accent .ic{background:var(--o-accent);color:var(--o-white)} .o-front .o-banner .t{flex:1} .o-front .o-banner .t b{font-weight:var(--o-fw-semi)} .o-front .o-banner .act{color:var(--o-accent-text);font-weight:var(--o-fw-semi);white-space:nowrap;cursor:pointer} .o-front .o-empty{display:flex;flex-direction:column;align-items:center;text-align:center;gap:var(--o-s-2);padding:var(--o-sx-40) var(--o-sx-20);color:var(--o-ink-2)} .o-front .o-empty .ic{width:var(--o-h-xxl);height:var(--o-h-xxl);border-radius:var(--o-r-menu);background:var(--o-surface-3);display:grid;place-items:center;color:var(--o-ink-3);margin-bottom:var(--o-s-1)} .o-front .o-empty .ic svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round} .o-front .o-empty b{font-size:var(--o-fs-body-lg);color:var(--o-ink);font-weight:var(--o-fw-semi)} .o-front .o-empty p{margin:0;max-width:360px;font-size:var(--o-fs-body);color:var(--o-ink-2)} .o-front .o-empty .o-btn{margin-top:var(--o-sx-6)} /* the small empty (10/26/26): one quiet sentence, centred, no mark, for a table's or a list's row — a compact table never grows for it */ .o-front .o-empty.sm{display:block;padding:var(--o-s-3) var(--o-sx-14);font-size:var(--o-fs-body);line-height:var(--o-lh-note);color:var(--o-ink-2)} .o-front .o-skel{display:block;height:12px;border-radius:var(--o-r-sm);background:linear-gradient(90deg,var(--o-surface-3) 25%,var(--o-hair-3) 50%,var(--o-surface-3) 75%);background-size:200% 100%;animation:o-shimmer var(--o-dur-shimmer) linear infinite} @keyframes o-shimmer{from{background-position:200% 0}to{background-position:-200% 0}} .o-front .o-skel.w40{width:40%}.o-front .o-skel.w60{width:60%}.o-front .o-skel.w25{width:25%}.o-front .o-skel.w80{width:80%}.o-front .o-skel.tall{height:24px;width:120px} .o-front .o-fold{border-bottom:var(--o-line) solid var(--o-hair-2)} .o-front .o-fold:last-child{border-bottom:0} .o-front .o-fold>summary{list-style:none;display:flex;align-items:center;gap:var(--o-s-3);min-height:48px;padding:0 var(--o-sx-18);cursor:pointer;font-weight:var(--o-fw-semi);font-size:var(--o-fs-body-lg);letter-spacing:-.006em;transition:background var(--o-fast) var(--o-ease)} .o-front .o-fold>summary::-webkit-details-marker{display:none} .o-front .o-fold>summary:hover{background:var(--o-surface-2)} .o-front .o-fold[open]>summary{background:transparent} .o-front .o-fold>summary .sub{font-weight:var(--o-fw-regular);color:var(--o-ink-3);font-size:var(--o-fs-label)} .o-front .o-fold>summary .r{margin-left:auto;display:flex;align-items:center;gap:var(--o-s-3);color:var(--o-ink-3);font-weight:var(--o-fw-medium);font-size:var(--o-fs-label)} .o-front .o-chev{width:20px;height:20px;border-radius:var(--o-r-round);background:var(--o-hair-2);position:relative;flex:none;transition:transform var(--o-med) var(--o-ease),background var(--o-fast) var(--o-ease)} .o-front .o-chev::after{content:"";position:absolute;left:7px;top:5.5px;width:5px;height:5px;border-right:var(--o-line-md) solid var(--o-ink-2);border-bottom:var(--o-line-md) solid var(--o-ink-2);transform:rotate(-45deg)} .o-front .o-fold[open]>summary .o-chev{transform:rotate(90deg)} .o-front .o-fold>.b{padding:var(--o-s-1) var(--o-sx-18) var(--o-s-4) var(--o-sx-50)} .o-front .o-list{list-style:none;margin:0;padding:0} .o-front .o-list li{display:flex;align-items:center;gap:var(--o-s-3);padding:var(--o-s-2) var(--o-sx-10);margin:0 calc(-1*var(--o-sx-10));border-radius:var(--o-r-row);font-size:var(--o-fs-body);position:relative;transition:background var(--o-fast) var(--o-ease)} .o-front .o-list li::before{content:"";position:absolute;left:10px;right:10px;top:-1px;height:1px;background:var(--o-hair-3)} .o-front .o-list li:first-child::before{display:none} .o-front .o-list li:hover{background:var(--o-surface-2)} .o-front .o-list li:hover::before,.o-front .o-list li:hover+li::before{opacity:0} .o-front .o-list .lab{flex:1;min-width:0} .o-front .o-list .r{display:flex;gap:var(--o-sx-6);align-items:center} /* ───────── THE COMMAND BAR (open) ───────── */ /* ───────── KANBAN (PrefBooks pipeline) ───────── */ /* ───────── THE FEEL (10/25/26, from the Flight Check reference; only its general look) ───────── */ /* surfaces: no border, a soft long shadow (dark keeps a faint edge) */ .o-front .o-card,.o-front .o-tile{border-radius:var(--o-r-card);box-shadow:var(--o-s1)} .o-front .o-tile{border-radius:var(--o-r-tile);padding:var(--o-sx-18) var(--o-sx-20) var(--o-s-4)} .o-front .o-tile:hover{box-shadow:var(--o-s2)} :root[data-theme="dark"] .o-front .o-card,:root[data-theme="dark"] .o-front .o-tile{box-shadow:var(--o-ring),var(--o-s1)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-card,:root:not([data-theme="light"]) .o-front .o-tile{box-shadow:var(--o-ring),var(--o-s1)}} .o-front .o-card-h{padding:var(--o-sx-18) var(--o-s-5) var(--o-sx-14);min-height:60px} .o-front .o-card-b{padding:0 var(--o-s-5) var(--o-sx-20)} .o-front .o-card-b.pad{padding:var(--o-s-5)} .o-front .o-card-f{padding:var(--o-sx-14) var(--o-s-5)} .o-front .o-tools{padding:0 var(--o-s-5) var(--o-sx-14)} .o-front .o-tbl td:first-child,.o-front .o-tbl th:first-child{padding-left:var(--o-s-5)} .o-front .o-tbl td:last-child,.o-front .o-tbl th:last-child{padding-right:var(--o-s-5)} .o-front .o-page{padding:var(--o-s-6) var(--o-s-7) var(--o-sx-72)} .o-front .o-tiles{gap:var(--o-sx-14);margin-bottom:var(--o-s-5)} /* the head: an overline, a big title, one quiet sentence */ .o-front .o-head{display:grid;grid-template-columns:1fr auto;align-items:end;gap:var(--o-sx-6) var(--o-s-4);margin:0 0 var(--o-s-5)} .o-front .o-head .over{grid-column:1;font-size:var(--o-fs-caps);font-weight:var(--o-fw-semi);letter-spacing:.14em;text-transform:uppercase;color:var(--o-ink-3)} .o-front .o-head .o-h1{grid-column:1;font-family:var(--o-display);font-size:var(--o-fs-display);font-weight:var(--o-fw-bold);letter-spacing:-.028em;line-height:var(--o-lh-tight);display:flex;align-items:center;gap:var(--o-sx-10)} .o-front .o-head .sub{grid-column:1;font-size:var(--o-fs-body-lg);color:var(--o-ink-2);margin-top:var(--o-sx-2)} .o-front .o-head .acts{grid-column:2;grid-row:1/span 3;align-self:center;margin-left:0} .o-front .o-head.flat{display:flex;align-items:center;gap:var(--o-s-3)} .o-front .o-head.flat .acts{margin-left:auto} .o-front .o-h2{font-size:var(--o-fs-h2)} /* pill buttons and chips, Apple's weight */ .o-front .o-btn{border-radius:var(--o-r-pill);font-weight:var(--o-fw-medium);padding:0 var(--o-sx-15);box-shadow:none;background:var(--o-surface-3)} .o-front .o-btn:hover,.o-front .o-btn.hover{background:var(--o-hair);box-shadow:none} :root[data-theme="dark"] .o-front .o-btn{background:var(--o-surface-3);box-shadow:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn{background:var(--o-surface-3);box-shadow:none}} :root[data-theme="dark"] .o-front .o-btn:hover,:root[data-theme="dark"] .o-front .o-btn.hover{background:var(--o-ink-4);box-shadow:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn:hover,:root:not([data-theme="light"]) .o-front .o-btn.hover{background:var(--o-ink-4);box-shadow:none}} .o-front .o-btn:active,.o-front .o-btn.pressed{background:var(--o-ink-4);box-shadow:none;transform:scale(.98)} .o-front .o-btn.primary{font-weight:var(--o-fw-semi);box-shadow:none} .o-front .o-btn.primary:hover,.o-front .o-btn.primary.hover{box-shadow:none} .o-front .o-btn.accent{font-weight:var(--o-fw-semi)} .o-front .o-btn.outline{background:var(--o-surface);box-shadow:var(--o-sh-edge)} .o-front .o-btn.outline:hover{background:var(--o-surface-2);box-shadow:var(--o-sh-edge-strong)} .o-front .o-btn.sm{border-radius:var(--o-r-pill);padding:0 var(--o-s-3)} .o-front .o-btn.lg{border-radius:var(--o-r-pill);padding:0 var(--o-sx-20);font-size:var(--o-fs-lead);--o-btn-h:var(--o-h-btn-lg)} .o-front .o-btn.icon{padding:0} .o-front .o-ibtn{border-radius:var(--o-r-round)} .o-front .o-tag{border-radius:var(--o-r-pill);height:24px;padding:0 var(--o-sx-10) 0 var(--o-s-2);font-size:var(--o-fs-label)} .o-front .o-tag.hollow{box-shadow:var(--o-sh-outline),var(--o-sh-lift);background:var(--o-surface)} .o-front .o-mark{box-shadow:var(--o-sh-outline)} .o-front .o-chip{height:var(--o-h-field-sm);padding:0 var(--o-s-3);font-size:var(--o-fs-label);box-shadow:none;background:var(--o-surface-3);color:var(--o-ink-2)} .o-front .o-chip:hover,.o-front .o-chip.hover{background:var(--o-hair);box-shadow:none;color:var(--o-ink)} .o-front .o-chip.on{background:var(--o-ink);color:var(--o-surface)} .o-front .o-chip.on:hover{background:var(--o-ink)} .o-front .o-chip.dot::before{content:"";width:7px;height:7px;border-radius:var(--o-r-round);background:var(--o-dotc,var(--o-accent-bright));flex:none} .o-front .o-chip.sel{background:var(--o-surface);box-shadow:var(--o-sh-sel);color:var(--o-ink)} /* the segmented control: a soft track, the chosen pill white and raised */ .o-front .o-seg{border-radius:var(--o-r-pill);padding:var(--o-sx-3);background:var(--o-surface-3)} .o-front .o-seg button,.o-front .o-seg a{border-radius:var(--o-r-pill);height:var(--o-h-sm);padding:0 var(--o-sx-13);font-weight:var(--o-fw-medium)} .o-front .o-seg .ind{border-radius:var(--o-r-pill);top:3px;left:3px;box-shadow:var(--o-seg-shadow)} .o-front .o-seg .on,.o-front .o-seg [aria-pressed="true"]{box-shadow:var(--o-seg-shadow);font-weight:var(--o-fw-semi)} .o-front .o-seg.sm{padding:var(--o-sx-2)} .o-front .o-seg.sm button,.o-front .o-seg.sm .ind{height:24px;border-radius:var(--o-r-pill)} .o-front .o-seg.sm .ind{top:2px;left:2px} /* filled fields: a soft fill at rest, white with the accent ring when focused */ .o-front .o-input,.o-front .o-select,.o-front .o-textarea{background:var(--o-surface-3);box-shadow:none;border-radius:var(--o-r-ctl);--o-ctl-h:var(--o-h-lg)} .o-front .o-input:hover,.o-front .o-select:hover,.o-front .o-textarea:hover,.o-front .o-input.hover{background:var(--o-hair);box-shadow:none} .o-front .o-input:focus,.o-front .o-select:focus,.o-front .o-textarea:focus,.o-front .o-input.focus,.o-front .o-select.focus{background:var(--o-surface);box-shadow:var(--o-sh-field-focus)} .o-front .o-input:read-only:not(.o-select){background:transparent;box-shadow:var(--o-sh-edge-2)} .o-front .o-input:disabled,.o-front .o-select:disabled,.o-front .o-textarea:disabled{background:var(--o-surface-2);box-shadow:none} .o-front .o-fld.bad .o-input,.o-front .o-fld.bad .o-select,.o-front .o-fld.bad .o-textarea,.o-front .o-input.bad{background:var(--o-surface);box-shadow:var(--o-sh-field-bad)} :root[data-theme="dark"] .o-front .o-input:focus,:root[data-theme="dark"] .o-front .o-select:focus,:root[data-theme="dark"] .o-front .o-textarea:focus,:root[data-theme="dark"] .o-front .o-input.focus{background:var(--o-surface-2)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-input:focus,:root:not([data-theme="light"]) .o-front .o-select:focus,:root:not([data-theme="light"]) .o-front .o-textarea:focus,:root:not([data-theme="light"]) .o-front .o-input.focus{background:var(--o-surface-2)}} .o-front .o-check input{border-radius:var(--o-r-sm)} .o-front .o-toggle{background:var(--o-hair)} .o-front .o-toggle:hover{background:var(--o-ink-4)} /* the shell: a soft sidebar, pill work tabs, the current one outlined */ .o-front .o-ibtn{border-radius:var(--o-r-round)} /* floating controls over content */ .o-front .o-fab{width:var(--o-h-xl);height:var(--o-h-xl);border-radius:var(--o-r-round);background:var(--o-surface);box-shadow:var(--o-s1);display:inline-grid;place-items:center;color:var(--o-ink-2);border:0;cursor:pointer;transition:transform var(--o-fast) var(--o-spring),box-shadow var(--o-fast) var(--o-ease),color var(--o-fast) var(--o-ease)} .o-front .o-fab:hover{box-shadow:var(--o-s2);color:var(--o-ink);transform:translateY(-1px)} .o-front .o-fab:active{transform:scale(.96)} .o-front .o-fab svg{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round} .o-front .o-fabs{display:inline-flex;flex-direction:column;gap:var(--o-s-2)} .o-front .o-fabs.stack{gap:0;background:var(--o-surface);border-radius:var(--o-r-menu);box-shadow:var(--o-s1);overflow:hidden} .o-front .o-fabs.stack .o-fab{border-radius:0;box-shadow:none;width:var(--o-h-xxl);height:var(--o-h-xxl);transform:none} .o-front .o-fabs.stack .o-fab+.o-fab{box-shadow:var(--o-sh-rule-over)} .o-front .o-fabs.stack .o-fab:hover{background:var(--o-surface-3)} .o-front .o-floatbar{display:inline-flex;align-items:center;gap:var(--o-s-3);padding:var(--o-s-2) var(--o-sx-14) var(--o-s-2) var(--o-s-2);border-radius:var(--o-r-pill);background:color-mix(in srgb,var(--o-surface) 92%,transparent);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);box-shadow:var(--o-s2)} .o-front .o-floatbar .o-btn.primary.round{width:var(--o-h-xxl);height:var(--o-h-xxl);border-radius:var(--o-r-round);padding:0} .o-front .o-callout{display:inline-flex;flex-direction:column;gap:var(--o-sx-2);padding:var(--o-s-2) var(--o-s-3);border-radius:var(--o-r-box);background:var(--o-surface);box-shadow:var(--o-s1);font-size:var(--o-fs-body)} .o-front .o-callout b{font-weight:var(--o-fw-semi)} .o-front .o-callout .s{color:var(--o-ink-2);font-size:var(--o-fs-small)} /* dialogs, menus, toasts: softer and translucent */ .o-front .o-dialog{border-radius:var(--o-r-dialog);box-shadow:var(--o-s3)} :root[data-theme="dark"] .o-front .o-dialog{box-shadow:var(--o-s3),var(--o-ring)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-dialog{box-shadow:var(--o-s3),var(--o-ring)}} .o-front .o-dialog-h{padding:var(--o-s-5) var(--o-sx-20) var(--o-s-2) var(--o-sx-24)} .o-front .o-dialog-b{padding:var(--o-s-3) var(--o-sx-24) var(--o-sx-10)} .o-front .o-dialog-f{padding:var(--o-s-3) var(--o-sx-24) var(--o-sx-20)} .o-front .o-summary{border-radius:var(--o-r-box);background:var(--o-surface-3)} .o-front .o-menu{border-radius:var(--o-r-menu);background:color-mix(in srgb,var(--o-surface) 88%,transparent);backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);padding:var(--o-sx-6)} .o-front .o-menu .it{border-radius:var(--o-r-item)} .o-front .o-toast{border-radius:var(--o-r-pill);background:color-mix(in srgb,var(--o-tip-bg) 88%,transparent);backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);padding:var(--o-sx-9) var(--o-s-4) var(--o-sx-9) var(--o-s-3)} .o-front .o-banner{border-radius:var(--o-r-menu)} .o-front .o-empty .ic{border-radius:var(--o-r-tile);width:52px;height:52px} .o-front .o-savebar{border-radius:var(--o-r-pill);padding:var(--o-s-2) var(--o-s-2) var(--o-s-2) var(--o-sx-18)} .o-front .o-savebar .o-btn{border-radius:var(--o-r-pill)} .o-front .o-tip{border-radius:var(--o-r-tip)} .o-front .o-tbl th{letter-spacing:.09em} .o-front .o-fold>summary{padding:0 var(--o-s-5)} .o-front .o-fold>.b{padding:var(--o-s-1) var(--o-s-5) var(--o-sx-18) var(--o-sx-54)} .o-front .o-row{padding:var(--o-s-4) 0} /* ───────── FIXES FROM THE ELEMENTS SHEET WALK (10/25/26) ───────── */ .o-front .o-btn:focus-visible,.o-front .o-btn.focus,.o-front .o-btn.primary:focus-visible,.o-front .o-btn.primary.focus,.o-front .o-btn.accent:focus-visible,.o-front .o-btn.accent.focus,.o-front .o-btn.quiet:focus-visible,.o-front .o-btn.quiet.focus,.o-front .o-chip.on:focus-visible,.o-front .o-chip.on.focus,.o-front .o-check input:checked:focus-visible,.o-front .o-check input.focus,.o-front .o-toggle[aria-checked="true"]:focus-visible,.o-front .o-toggle.focus{box-shadow:var(--o-focus)!important} .o-front .o-btn.danger.primary:hover,.o-front .o-btn.danger.primary.hover{background:color-mix(in srgb,var(--o-neg) 88%,var(--o-black))} .o-front .o-btn.danger.primary:active,.o-front .o-btn.danger.primary.pressed{background:color-mix(in srgb,var(--o-neg) 78%,var(--o-black))} .o-front .o-btn.danger.primary:disabled,.o-front .o-btn.danger.primary.disabled{background:var(--o-surface-3);color:var(--o-ink-3)} .o-front .o-btn.danger.primary.busy::after{border-color:var(--o-white);border-right-color:transparent} .o-front .o-dot.pos{color:var(--o-pos)}.o-front .o-dot.warn{color:var(--o-warn)}.o-front .o-dot.neg{color:var(--o-neg)}.o-front .o-dot.accent{color:var(--o-accent-bright)}.o-front .o-dot{color:var(--o-ink-4)} .o-front .o-dot.live{box-shadow:var(--o-sh-live)} .o-front .o-input:disabled,.o-front .o-select:disabled,.o-front .o-textarea:disabled{color:var(--o-ink-4)} .o-front .o-input:disabled::placeholder{color:var(--o-ink-4)} .o-front .o-inwrap.pre .o-input{padding-left:var(--o-sx-34)} .o-front .o-inwrap .pre{left:12px} .o-front .o-rowmenu{font-size:var(--o-fs-h2);line-height:var(--o-lh-none);letter-spacing:.5px} .o-front .o-rowmenu svg{width:16px;height:16px;fill:none;stroke:currentColor;stroke-width:2;stroke-linecap:round} /* tracks on the page surface need one more step of grey */ .o-front .o-page>.o-tools .o-seg,.o-front .o-head .o-seg{background:var(--o-surface-4)} /* dark: the commit, accent and danger buttons keep their fills; quiet stays bare */ :root[data-theme="dark"] .o-front .o-btn.primary{background:var(--o-primary);color:var(--o-primary-ink)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.primary{background:var(--o-primary);color:var(--o-primary-ink)}} :root[data-theme="dark"] .o-front .o-btn.primary:hover,:root[data-theme="dark"] .o-front .o-btn.primary.hover{background:var(--o-primary-hover)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.primary:hover,:root:not([data-theme="light"]) .o-front .o-btn.primary.hover{background:var(--o-primary-hover)}} :root[data-theme="dark"] .o-front .o-btn.accent{background:var(--o-accent);color:var(--o-accent-ink)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.accent{background:var(--o-accent);color:var(--o-accent-ink)}} :root[data-theme="dark"] .o-front .o-btn.accent:hover,:root[data-theme="dark"] .o-front .o-btn.accent.hover{background:color-mix(in srgb,var(--o-accent) 88%,var(--o-white))}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.accent:hover,:root:not([data-theme="light"]) .o-front .o-btn.accent.hover{background:color-mix(in srgb,var(--o-accent) 88%,var(--o-white))}} :root[data-theme="dark"] .o-front .o-btn.danger.primary{background:var(--o-neg);color:var(--o-neg-ink)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.danger.primary{background:var(--o-neg);color:var(--o-neg-ink)}} :root[data-theme="dark"] .o-front .o-btn.quiet{background:transparent}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.quiet{background:transparent}} :root[data-theme="dark"] .o-front .o-btn.quiet:hover,:root[data-theme="dark"] .o-front .o-btn.quiet.hover{background:var(--o-surface-3)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.quiet:hover,:root:not([data-theme="light"]) .o-front .o-btn.quiet.hover{background:var(--o-surface-3)}} :root[data-theme="dark"] .o-front .o-btn:disabled,:root[data-theme="dark"] .o-front .o-btn.disabled,:root[data-theme="dark"] .o-front .o-btn.primary:disabled,:root[data-theme="dark"] .o-front .o-btn.primary.disabled,:root[data-theme="dark"] .o-front .o-btn.accent:disabled,:root[data-theme="dark"] .o-front .o-btn.accent.disabled{background:var(--o-surface-3);color:var(--o-ink-3)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn:disabled,:root:not([data-theme="light"]) .o-front .o-btn.disabled,:root:not([data-theme="light"]) .o-front .o-btn.primary:disabled,:root:not([data-theme="light"]) .o-front .o-btn.primary.disabled,:root:not([data-theme="light"]) .o-front .o-btn.accent:disabled,:root:not([data-theme="light"]) .o-front .o-btn.accent.disabled{background:var(--o-surface-3);color:var(--o-ink-3)}} :root[data-theme="dark"] .o-front .o-btn.outline{background:var(--o-surface);box-shadow:var(--o-sh-edge)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.outline{background:var(--o-surface);box-shadow:var(--o-sh-edge)}} /* ───────── STEP 2A: THE PRIMITIVES ON A PAGE (10/26/26) ───────── what the kit's controls need once they sit on a page without the mock's reset: a tab drawn as a button and the back square lose the browser's border; a count and a dimmed option in a track; the switch and the icon button drawn in a still state for the catalog; the warned switch; the tile as a press and its smaller figure; the fold's flush body; the tag whose dot pulses. */ .o-front .o-tab,.o-front .o-back{border:0;background:transparent;cursor:pointer;font-family:inherit} .o-front .o-h1,.o-front .o-h2{margin:0} .o-front a.o-btn:hover,.o-front a.o-btn:focus-visible{text-decoration:none} .o-front .o-seg .n{margin-left:var(--o-sx-2);font-variant-numeric:tabular-nums;opacity:.65} .o-front .o-seg .dim:not(.on){color:var(--o-ink-3)} .o-front .o-toggle.hover{background:var(--o-ink-4)} .o-front .o-toggle.hover[aria-checked="true"]{background:color-mix(in srgb,var(--o-accent) 90%,var(--o-black))} .o-front .o-toggle.pressed::after{width:21px} .o-front .o-toggle.pressed[aria-checked="true"]::after{transform:translateX(11px)} .o-front .o-toggle.bad[aria-checked="true"]{background:var(--o-warn)} .o-front .o-ibtn.pressed{background:var(--o-surface-3);color:var(--o-ink);transform:scale(.96)} .o-front .o-tile.go{cursor:pointer} .o-front .o-tile.go:focus-visible{outline:none;box-shadow:var(--o-focus)} .o-front .o-tile .v.sm{font-size:var(--o-fs-h1)} .o-front .o-fold>.b.flush{padding:0} .o-front .o-tag.live::before{animation:o-pulse var(--o-dur-pulse) ease-in-out infinite} @keyframes o-pulse{50%{opacity:.3}} @media (prefers-reduced-motion:reduce){.o-front .o-tag.live::before{animation:none}} /* the 10/13/26 primary-gate ruling on kit buttons: a not-yet primary wears the disabled grey, and a disabled button never lights on hover (each selector outweighs its kind's :hover) */ .o-front .o-btn.primary.notyet,.o-front .o-btn.primary.notyet:hover,.o-front .o-btn.primary.notyet.hover{background:var(--o-surface-3);color:var(--o-ink-3);box-shadow:none} .o-front .o-btn:disabled:hover,.o-front .o-btn.disabled:hover,.o-front .o-btn.primary:disabled:hover,.o-front .o-btn.primary.disabled:hover,.o-front .o-btn.accent:disabled:hover,.o-front .o-btn.accent.disabled:hover,.o-front .o-btn.danger.primary:disabled:hover,.o-front .o-btn.danger.primary.disabled:hover,.o-front .o-btn.quiet:disabled:hover{background:var(--o-surface-3);color:var(--o-ink-3);box-shadow:none;transform:none} /* the bare icon button of a dense row (a table cell's ×, copy, camera): 22px, and 18 in the cash-flow ledger */ .o-front .o-ibtn.sm.bare{width:22px;height:22px;border-radius:var(--o-r-sm)} .o-front .o-ibtn.sm.bare svg{width:13px;height:13px} .o-front .cftbl .o-ibtn.sm{width:18px;height:18px} /* ───────── STEP 2B: FORMS AND DIALOGS ON A PAGE (10/26/26) ───────── what the 03 sheet's page-scoped additions become once the kit draws them for real: the confirm's sentence and its amber fact line, the amber dirty dot, the save bar's buttons at the right; the dialog's document width (a statement beside its entry) and its foot read off the modal host's footers (Cancel, the `data-close` button, goes LEFT, everything else sits right, so a footer typed before the kit still obeys the law); a dialog's head acts; the red ring on a pick list and a text box that carry `bad`; the error line under a control that is not in a kit field yet; a kit field in a form grid takes the grid's gap; the settings rows inside a settings card keep the card's inset; the typeahead's menu wears the kit's menu, shown only while open. */ .o-front .o-confirm{margin:0;font-size:var(--o-fs-body);line-height:var(--o-lh-body);color:var(--o-ink-2)} .o-front .o-confirm+.o-confirm{margin-top:var(--o-s-2)} .o-front .o-confirm-warn{display:flex;align-items:flex-start;gap:var(--o-s-2);margin:0 0 var(--o-s-3);padding:var(--o-sx-10) var(--o-s-3);border-radius:var(--o-r-box);background:var(--o-warn-tint);color:var(--o-ink);font-size:var(--o-fs-body);line-height:var(--o-lh-note)} .o-front .o-confirm-warn svg{flex:none;margin-top:var(--o-sx-1);color:var(--o-warn)} .o-front .o-dirty.bad{background:var(--o-warn)} .o-front .o-savebar .o-btns{margin-left:auto} .o-front .o-dialog.xwide{max-width:1280px} .o-front .o-dialog-f{justify-content:flex-end;flex-wrap:wrap} .o-front .o-dialog-f>[data-close]{order:-1;margin-right:auto} /* a LONE Close or Done (nothing to commit) stays at the right, where the commit would be; only a Cancel beside a commit goes left */ .o-front .o-dialog-f>[data-close]:only-child,.o-front .o-dialog-f>.foot-say+[data-close]:last-child{order:0;margin-right:0;margin-left:auto} .o-front .o-dialog-f>.foot-say{order:-2} .o-front .o-dialog-h>.acts{display:inline-flex;align-items:center;gap:var(--o-s-2);margin-top:calc(-1*var(--o-sx-2))} .o-front .o-select.bad,.o-front .o-textarea.bad{background:var(--o-surface);box-shadow:var(--o-sh-field-bad)} /* the pick list keeps its drawn chevron in every state: the filled-control block above sets the background shorthand on each state, which resets the chevron's image */ .o-front .o-select,.o-front .o-select:hover,.o-front .o-select:focus,.o-front .o-select.focus,.o-front .o-select:disabled,.o-front .o-select.bad,.o-front .o-fld.bad .o-select{background-image:linear-gradient(45deg,transparent 50%,var(--o-ink-3) 50%),linear-gradient(135deg,var(--o-ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}:root[data-theme="dark"] .o-front .o-select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--o-ink-3) 50%),linear-gradient(135deg,var(--o-ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-select:focus{background-image:linear-gradient(45deg,transparent 50%,var(--o-ink-3) 50%),linear-gradient(135deg,var(--o-ink-3) 50%,transparent 50%);background-position:calc(100% - 16px) calc(50% - 2px),calc(100% - 11px) calc(50% - 2px);background-size:5px 5px,5px 5px;background-repeat:no-repeat}} .o-front .o-select.sm{background-position:calc(100% - 14px) calc(50% - 2px),calc(100% - 9px) calc(50% - 2px);padding-right:var(--o-sx-26)} /* the list template: the tools row is the card's first child, so it takes the card's top inset; a working page that was full width before its template keeps it (`width: "full"`) */ .o-front .o-card[data-slot=list]>.o-tools:first-child{padding-top:var(--o-sx-14)} .o-front .o-page.full{max-width:none} .o-front .o-ferr{display:flex;align-items:center;gap:var(--o-sx-6);margin-top:var(--o-s-1);font-size:var(--o-fs-small);font-weight:var(--o-fw-regular);line-height:var(--o-lh-compact);color:var(--o-neg);text-transform:none} .o-front .o-ferr::before{content:"!";flex:none;width:13px;height:13px;border-radius:var(--o-r-round);box-shadow:var(--o-sh-ring-current);display:inline-grid;place-items:center;font-size:var(--o-fs-micro);font-weight:var(--o-fw-bold);line-height:var(--o-lh-none)} .o-front .form-grid>.o-fld{margin:0} .o-front .o-fld.wide{grid-column:1/-1} .o-front .mset>.o-row{padding-left:var(--o-s-5);padding-right:var(--o-s-5)} .o-front .o-row>.k .o-tag{margin-left:var(--o-sx-2)} .o-front .o-row>.v .inline>.o-input{flex:1 1 220px;min-width:0} .o-front .o-menu.ta-menu{display:none;max-height:260px;overflow:auto} .o-front .o-menu.ta-menu.show{display:flex} .o-front .o-menu.ta-menu .ta-row{border-radius:var(--o-r-item);padding:var(--o-sx-7) var(--o-sx-10);font-size:var(--o-fs-body);color:var(--o-ink)} .o-front .o-menu.ta-menu .ta-row:hover,.o-front .o-menu.ta-menu .ta-row.active{background:var(--o-surface-3)} .o-front .o-menu.ta-menu .ta-row.off,.o-front .o-menu.ta-menu .ta-row .ta-sub{color:var(--o-ink-3)} .o-front .o-menu.ta-menu .ta-row.off:hover{background:transparent} .o-front .o-menu.ta-menu .ta-head{color:var(--o-ink-3);border-top-color:var(--o-hair-2)} /* ───────── STEP 3: TABLES AND THE MONEY CELL ON A PAGE (10/26/26) ───────── what the 02 sheet's page-scoped additions become once the kit draws tables for real: the sorted head in ink with its chevron, the other chevrons on hover; the group band's muted count; the foot's count, its hairline kept when stuck, and its place over the rows; the row ⋯'s cell at the right; the pinned column keeping the row's hover; the phone fold (its columns go, their words ride under the row's first cell); the tools row's chips and search; the pager's figures; a head word for a screen reader only; and the command bar's leading mark that never wraps (the 2c walk). */ .o-front .o-tbl th.sort.on{color:var(--o-ink)} .o-front .o-tbl th.sort:not(.on)::after{opacity:0;transition:opacity var(--o-fast) var(--o-ease)} .o-front .o-tbl th.sort:not(.on):hover::after{opacity:.55} .o-front .o-tbl th.o-money.sort::after{margin-left:var(--o-sx-6)} .o-front .o-tbl tr.group .n{float:right;font-weight:var(--o-fw-medium);letter-spacing:0;text-transform:none;font-size:var(--o-fs-small);color:var(--o-ink-3)} .o-front .o-tbl tfoot td{box-shadow:var(--o-sh-rule-top);z-index:var(--o-z-head)} .o-front .o-tbl tfoot td.sticky{z-index:var(--o-z-corner)} .o-front .o-tbl tfoot .n{margin-left:var(--o-sx-10);font-weight:var(--o-fw-medium);color:var(--o-ink-3)} .o-front .o-tbl td.act,.o-front .o-tbl th.act{width:1%;text-align:right;white-space:nowrap} .o-front .o-tbl .o-rowmenu svg{display:block} .o-front .o-tbl tbody tr:hover td.sticky{background:var(--o-surface-2)} .o-front .o-tbl td.empty{padding:0} .o-front .o-tbl .foldl{display:none} .o-front .o-vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap} .o-front .o-tools .o-chiprow{display:flex;gap:var(--o-sx-6);align-items:center;flex-wrap:wrap} .o-front .o-pager .num{font-variant-numeric:tabular-nums} /* a table scrolls WITH THE PAGE (one scrollbar, the page's): on a page the frame is no scroll container and its card clips with overflow:clip (never hidden), so the head sticks under the work tabs; only a wrap marked wide or dense, and any wrap at a phone's width, scrolls sideways inside its card */ .o-front .o-tblwrap{overflow:visible;max-height:none} .o-front .o-card:has(table){overflow:clip} .o-front .o-tbl th{box-shadow:var(--o-sh-rule-under);font-size:var(--o-fs-small)} /* a table head keeps the 12px floor (Marco 10/14/26, Bills A8); only the foot's last row sticks; a table wider than its card scrolls inside it, never clipped and never the page sideways (rule 7; the v2 fixer 10/26/26, QA-2 F39): behave.js marks such a wrap .wide, and a .wide wrap scrolls */ .o-front .o-tbl tfoot td{position:static} /* a page's muted wrapper (a NAV figure that is not locked yet) keeps its colour over the money cell */ .o-front :is(.muted,.o-muted) .o-money{color:inherit} .o-front .o-tbl tfoot>tr:last-child>td{position:sticky} @media (max-width:760px){ .o-front .o-tools{padding:var(--o-s-3) var(--o-sx-14);gap:var(--o-sx-10)} .o-front .o-tools .o-spacer{display:none} .o-front .o-tools .o-chiprow{flex:0 0 calc(100% + 28px);min-width:0;overflow-x:auto;flex-wrap:nowrap;scrollbar-width:none;margin:0 calc(-1*var(--o-sx-14));padding:0 var(--o-sx-14)} .o-front .o-tools .o-chiprow .o-chip{flex:none} .o-front .o-pager{padding:var(--o-sx-10) var(--o-sx-14)} .o-front .o-tbl th.foldc,.o-front .o-tbl td.foldc{display:none} .o-front .o-tbl .foldl{display:block;margin-top:var(--o-sx-2);font-size:var(--o-fs-small);color:var(--o-ink-3);white-space:normal} .o-front .o-tblwrap{overflow-x:auto} .o-front .o-card:has(table){overflow-x:auto} } /* ───────── THE CENTRE LINE (10/26/26, the detail pass) ───────── every control sits on the centre line of its row, measured in the browser: the sidebar's brand on the page bar's line (the bar is 52px, so the brand row is the sidebar's top 52px); a dialog head's × and its acts on the title's first line (22px, its centre 15px down, the × 28 or 34); a label and its ⓘ, dot and tag on one baseline (a wrapped label keeps its mark on the first line); a settings row is one 38px line (the filled box's height): the name's first line on its centre, a switch or a button centred on it, and a button beside a box takes the box's height; a tools row is one 28px line (chips, boxes and pick lists with the segment and the search); a page head's buttons share one height; a segment's link centres its words as its buttons do (a link in the track sat 4px high); the phone's app row is the page bar's 34px; a dense table keeps its 12px edge where a table takes the card's 22. */ .o-front .o-seg button,.o-front .o-seg a{display:inline-flex;align-items:center;justify-content:center} .o-front .o-dialog-h .o-h2{line-height:var(--o-lh-dialog)} .o-front .o-dialog-h .o-h2 .sub{line-height:var(--o-lh-snug)} .o-front .o-dialog-h .o-ibtn.sm{margin-top:var(--o-sx-1)} .o-front .o-dialog-h>.acts{height:var(--o-h-field-sm);margin-top:0} .o-front .o-fld>label,.o-front .o-lbl,.o-front .o-row>.k{align-items:baseline} .o-front .o-row>.k{padding-top:var(--o-sx-9)} .o-front .o-row>.v .read{padding-top:var(--o-sx-9)} .o-front .o-row>.v .inline{min-height:var(--o-h-lg)} .o-front .o-row>.v .inline:has(>:is(input:not([type=checkbox],[type=radio]),select,.o-inwrap))>.o-btn{--o-btn-h:var(--o-h-lg);font-size:var(--o-fs-body)} .o-front .o-tools .o-chip{height:var(--o-h-sm)} /* a pick in a tools row or a page head sizes to its words, never the whole line (the builder 4.4, 10/26/26) */ .o-front .o-tools .o-select,.o-front .o-head .acts>.o-select{width:auto;flex:none;min-width:160px} /* the template's save-bar slot is no box of its own, so the bar sticks to the window's foot over the page, not to a slot exactly its height (v2 fixer 10/26/26, QA-1 Q16: at 1440x900 Save sat below the window) */ .o-front .o-page>[data-slot=savebar]{display:contents} .o-front .o-tools>:is(.o-input,.o-select){--o-ctl-h:var(--o-h-sm);font-size:var(--o-fs-label);border-radius:var(--o-r-ctl-sm)} .o-front .o-head .acts .o-btn.sm{--o-btn-h:var(--o-h);font-size:var(--o-fs-body);padding:0 var(--o-sx-15)} /* a tile on a phone: two to a row, so the figure steps down the ladder and the inset tightens; a figure longer than 11 characters (`kit.tile` marks it `long`) takes the whole row at 17px */ @media (max-width:760px){ .o-front .o-tile{padding:var(--o-sx-14) var(--o-sx-14) var(--o-s-3)} .o-front .o-tile .v{font-size:var(--o-fs-h1)} .o-front .o-tile.long{grid-column:1/-1} .o-front .o-tile.long .v{font-size:var(--o-fs-h2)} } /* ───────── PHONE ───────── */ @media (max-width:760px){ .o-front .o-page{padding:var(--o-s-4) var(--o-s-4) var(--o-sx-48)} .o-front .o-head{display:flex;flex-direction:column;align-items:stretch;gap:var(--o-s-1)} /* a flat head's own centring never reaches a phone: its title stays left (v2 fixer 10/26/26, QA-2 F38) */ .o-front .o-head.flat{align-items:stretch} /* the page bar's marks keep their look and get a 44px reach (QA-2 F14) */ .o-front .o-head .acts{grid-column:auto;grid-row:auto;align-self:stretch;margin-top:var(--o-sx-10);width:100%} .o-front .o-head .acts .o-btn{flex:1} .o-front .o-head .o-h1{font-size:var(--o-fs-figure)} .o-front .o-head .over{white-space:nowrap;overflow:hidden;text-overflow:ellipsis} .o-front .o-tiles{grid-template-columns:1fr 1fr;gap:var(--o-sx-10)} .o-front .o-grid2,.o-front .o-grid3{grid-template-columns:1fr} .o-front .o-row{grid-template-columns:1fr;gap:var(--o-sx-6);padding:var(--o-s-3) 0} .o-front .o-row>.k{padding-top:0} .o-front .o-card-h{padding:var(--o-s-3) var(--o-sx-14)} .o-front .o-card-b{padding:0 var(--o-sx-14) var(--o-sx-14)} .o-front .o-tbl td:first-child,.o-front .o-tbl th:first-child{padding-left:var(--o-sx-14)} .o-front .o-tbl td:last-child,.o-front .o-tbl th:last-child{padding-right:var(--o-sx-14)} .o-front .o-tbl .o-rowmenu{opacity:1} .o-front .o-fold>summary{padding:0 var(--o-sx-14)} .o-front .o-fold>.b{padding:0 var(--o-sx-14) var(--o-s-3)} .o-front .o-savebar{flex-wrap:wrap;bottom:8px} .o-front .o-dialog{max-width:none;border-radius:var(--o-r-dialog)} } @media (prefers-reduced-motion:reduce){:where(.o-front) *{transition:none!important;animation:none!important}} /* ───────── THE TOKENS CATALOG (10/26/26): the #kit page's first section, every design variable ───────── with its light and dark value and a sample that reads the variable itself (`style="--tok:var(--o-…)"`); a sample whose property the variable does not fit draws nothing, so one class per group is enough. */ /* ===== THE V2 FIXER'S KIT PASS (10/26/26, after the design variables) ===== a segment shows the focus ring, the selected one too (QA-2 F31) */ .o-front .o-seg button:focus-visible,.o-front .o-seg a:focus-visible{outline:none;box-shadow:var(--o-focus)!important} /* the small track is a pill like the others (F32; the early 8px track rule outranked the pill) */ .o-front .o-seg.sm{border-radius:var(--o-r-pill)} /* ONE focus ring (F30): the white-and-teal ring on every kit control, the outline gone */ /* a count sits on its label's baseline (F33) */ .o-front .o-tab{align-items:baseline} /* the thin scrollbar on every scroller (F15, F37) */ /* a table wider than its card keeps its first column in view as it scrolls (F66, rule 7) */ .o-front .o-tblwrap.wide>table>:is(thead,tbody,tfoot)>tr>:first-child{position:sticky;left:0;background:var(--o-surface);z-index:var(--o-z-pin);box-shadow:var(--o-sh-pin)} .o-front .o-tblwrap.wide>table>thead>tr>:first-child{z-index:var(--o-z-corner)} /* ONE small field (F70): 28 px with the field's radius, the input and the pick list alike */ .o-front .o-input.sm,.o-front .o-select.sm{--o-ctl-h:var(--o-h-sm);height:var(--o-h-sm);min-height:var(--o-h-sm);border-radius:var(--o-r-ctl)} /* a kit heading is the kit's ink in both modes (QA-2 F28) */ .o-front .o-h1,.o-front .o-h2{color:var(--o-ink)} /* the second pass (QA-2 F44 F66 F70 F72): a money head's sort mark sits in the cell's padding, so the words line up with the figures (F44) */ .o-front .o-tbl th:is(.o-money,.r).sort::after{margin-left:var(--o-sx-5);margin-right:calc(-1*var(--o-sx-10))} /* ONE small field radius: the tools row's boxes, its search and its picks all take the field radius (F70) */ .o-front .o-tools>:is(.o-input,.o-select),.o-front .o-tools .o-select{border-radius:var(--o-r-ctl)} /* on a dark page a tone mark's glyph is the dark ink on its pale fill (F72) */ :root[data-theme="dark"] .o-front :is(.o-banner,.o-toast) .ic{color:var(--o-bg)}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front :is(.o-banner,.o-toast) .ic{color:var(--o-bg)}} /* the pressed danger button lightens on a dark page, where its words are dark (F72) */ :root[data-theme="dark"] .o-front .o-btn.danger.primary:active,:root[data-theme="dark"] .o-front .o-btn.danger.primary.pressed{background:color-mix(in srgb,var(--o-neg) 82%,var(--o-white))}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-btn.danger.primary:active,:root:not([data-theme="light"]) .o-front .o-btn.danger.primary.pressed{background:color-mix(in srgb,var(--o-neg) 82%,var(--o-white))}} /* a list card whose first part is an unnamed wrapper holding the tools row starts the row at the card's inset, never flush with the top edge (QA-2 F60, PrefBooks Statements) */ .o-front .o-card>div:not([class]):first-child>.o-tools:first-child{padding-top:var(--o-sx-14)} /* the third pass (QA-2 F11 F72): a sidebar row is 32 px, the mock's pitch: 7 + 18 + 7, on whole pixels (F11) */ /* a pressed quiet danger button keeps its red words readable: the danger tint, never the grey (F72) */ .o-front .o-btn.danger:not(.primary):active,.o-front .o-btn.danger:not(.primary).pressed{background:var(--o-neg-tint)} /* the fifth pass (QA-2 F11 F75 F76): sidebar rows sit edge to edge on the mock's 32 px pitch (F11) */ /* a kit page's words are the kit's ink, so a list's names and a board card's title never fall back to the old ink (F75, F76) */ .o-front .o-page{color:var(--o-ink)} /* an empty board column is one quiet line, never a card (F76) */ /* the front theme, the builder's step-5 asks (10/26/26): the front voice's accent for words on its tints (light and dark) */ /* the serif wordmark: the light and dark marks, and the caps line beside it */ .o-front .o-wm{block-size:var(--o-sx-20);inline-size:auto} .o-front .o-wm-d{display:none} :root[data-theme="dark"] .o-front .o-wm-l{display:none}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-wm-l{display:none}} :root[data-theme="dark"] .o-front .o-wm-d{display:block}@media (prefers-color-scheme: dark){:root:not([data-theme="light"]) .o-front .o-wm-d{display:block}} .o-front .o-wm-sub{font-weight:var(--o-fw-bold);font-size:var(--o-fs-micro);line-height:var(--o-lh-none);font-family:var(--o-font);letter-spacing:.28em;text-transform:uppercase;color:var(--o-accent-text);white-space:nowrap} /* the front's large button, a thumb's size */ .o-front.o-front .o-btn.lg{height:var(--o-h-front-lg);font-size:var(--o-fs-title);border-radius:var(--o-r-box);padding:0 var(--o-sx-20)} /* the joined statement strip: four tiles on one card, hairlines between */ .o-front.o-front .o-tiles.o-joined{grid-template-columns:repeat(4,minmax(0,1fr));gap:var(--o-sx-1);background:var(--o-hair);border-radius:var(--o-r-menu);overflow:hidden;box-shadow:var(--o-ring),var(--o-s1);margin-bottom:var(--o-sx-18)} .o-front.o-front .o-joined .o-tile{border-radius:0;box-shadow:none;padding:var(--o-sx-18) var(--o-sx-20) var(--o-s-4);transition:background var(--o-med) var(--o-ease)} .o-front.o-front .o-joined .o-tile:hover{box-shadow:none;background:var(--o-surface-2)} .o-front.o-front .o-joined .o-tile.o-lead{background:var(--o-accent-tint)} .o-front.o-front .o-joined .o-tile .v{font-size:var(--o-fs-display)} /* the front sizes: a card's title, a list row, a tab and a note box read at the front's larger body */ .o-front.o-front .o-card-h .o-h2{font-size:var(--o-fs-h2)} .o-front.o-front .o-list li{font-size:var(--o-fs-lead);min-height:var(--o-h-front-lg);padding:var(--o-sx-10)} .o-front.o-front .o-tab{font-size:var(--o-fs-lead);padding:var(--o-sx-10) 0 var(--o-s-3)} .o-front.o-front .o-textarea{font-size:var(--o-fs-title);border-radius:var(--o-r-ctl);padding:var(--o-sx-11) var(--o-s-3)} /* ===== END THE V2 FIXER'S KIT PASS ===== */ /* ───────── THE FRONT THEME (investor · tenant · maintenance): the same structure, the quiet voice ───────── */ .o-front.o-front .o-h1,.o-front.o-front .o-h2,.o-front.o-front .o-big,.o-front.o-front .o-tile .v,.o-front.o-front .o-brand{font-family:var(--o-serif);font-weight:var(--o-fw-regular);letter-spacing:-.01em} .o-front.o-front .o-brand{letter-spacing:.04em;font-size:var(--o-fs-lead)} .o-front.o-front .o-brand b{color:var(--o-accent-text);margin-left:0} .o-front.o-front .o-h1{font-size:var(--o-fs-display)} .o-front.o-front .o-tile .v{font-size:var(--o-fs-display)} .o-front.o-front .o-tbl{font-size:var(--o-fs-body-lg)} .o-front.o-front .o-btn{height:var(--o-h-xl);padding:0 var(--o-s-4);font-size:var(--o-fs-body-lg);border-radius:var(--o-r-ctl)} .o-front.o-front .o-input,.o-front.o-front .o-select{height:var(--o-h-xxl);font-size:var(--o-fs-title);border-radius:var(--o-r-ctl)} .o-front.o-front .o-chip{height:var(--o-h-md);font-size:var(--o-fs-body)} .o-front.o-front .o-disclosure{font-size:var(--o-fs-lead);color:var(--o-ink-2);line-height:var(--o-lh-body);max-width:720px} .o-front.o-front .o-foot{font-size:var(--o-fs-small);color:var(--o-ink-3);padding:var(--o-sx-24) 0;border-top:var(--o-line) solid var(--o-hair-2);line-height:var(--o-lh-body)} /* phone one-bar shell for the front sites */ .o-front.o-front .o-pbar{position:sticky;top:0;z-index:var(--o-z-bar);height:52px;display:flex;align-items:center;gap:var(--o-sx-10);padding:0 var(--o-s-4);background:color-mix(in srgb,var(--o-bg) 86%,transparent);backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px);border-bottom:var(--o-line) solid var(--o-hair-2)} .o-front.o-front .o-pbar .o-brand{padding:0;flex:1} .o-front.o-front .o-tabbar{position:sticky;bottom:0;display:flex;justify-content:space-around;padding:var(--o-s-2) var(--o-s-2) calc(var(--o-s-2) + env(safe-area-inset-bottom));background:color-mix(in srgb,var(--o-surface) 92%,transparent);backdrop-filter:blur(10px);border-top:var(--o-line) solid var(--o-hair-2)} .o-front.o-front .o-tabbar a{display:flex;flex-direction:column;align-items:center;gap:var(--o-sx-3);font-size:var(--o-fs-caps);font-weight:var(--o-fw-medium);color:var(--o-ink-3);min-width:64px;padding:var(--o-s-1) 0} .o-front.o-front .o-tabbar a.cur{color:var(--o-accent-text)} .o-front.o-front .o-tabbar svg{width:22px;height:22px;fill:none;stroke:currentColor;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round} .o-front.o-front .o-hero{background:var(--o-surface);border-radius:var(--o-r-tile);padding:var(--o-s-5) var(--o-sx-20);box-shadow:var(--o-ring),var(--o-s1);display:flex;flex-direction:column;gap:var(--o-sx-6)} .o-front.o-front .o-hero .k{font-size:var(--o-fs-body);color:var(--o-ink-2)} .o-front.o-front .o-hero .v{font-family:var(--o-serif);font-size:var(--o-fs-hero);letter-spacing:-.01em;font-variant-numeric:tabular-nums lining-nums;line-height:var(--o-lh-figure)} .o-front.o-front .o-hero .s{font-size:var(--o-fs-body);color:var(--o-ink-3)}