/* Settings, targets (10/15): this section's own look on the shared base (settings.css).

   Covers the Targets tab (targets-panel.tsx, targets-readonly.tsx,
   revenue-sources-card.tsx, booking-sources-card.tsx, the plan grid's
   chrome in plan-grid.tsx), the Finish setup tab (setup-leftover.tsx) and
   the Finish next bar every Settings tab wears (setup-bar.tsx).

     .yw-set-groups / .yw-set-group   the Targets card's groups, each a grey
                                      name (a link to its part of the editor)
                                      over label / value rows
     .yw-set-vars / .yw-set-var       a setting: label left, control right,
                                      hairline above; caption lines under it
     .yw-set-num                      a number field with its unit
     .yw-set-tag                      the quiet "Yours"
     .yw-set-saved / .yw-set-note     the one-line flash and a plain sentence
   Light rules first, the dark twins at the foot. */

/* ---------------------------------------------------- Finish next bar -- */
/* Sits above the section body (outside .yw-settings-page), so it sets its
   own type. */
.yw-set-setupbar { position: sticky; top: 64px; z-index: 20; margin-top: 18px; padding: 9px 14px; border: 1px solid #e2e1e4; border-radius: 14px; background: #fff; color: #202024; font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; font-size: 13px; letter-spacing: -.25px; }
@media (min-width: 1024px) { .yw-set-setupbar { top: 0; } }
.yw-set-setupbar-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-set-setupbar-count { color: #929097; font-size: 12px; }
.yw-set-setupbar-next { color: #59535f; }
.yw-set-setupbar .yw-set-link { font-size: 13px; }
.yw-set-setupbar-arrow { display: inline-grid; place-items: center; width: 24px; height: 24px; border: 1px solid #e4e2e6; border-radius: 50%; color: #59535f; font-size: 14px; line-height: 1; text-decoration: none; transition: background .16s; }
.yw-set-setupbar-arrow:hover { background: #f4f2f6; color: #202024; }
.yw-set-setupbar-arrow:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-setupbar-missing { display: flex; flex-wrap: wrap; gap: 4px 14px; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-set-setupbar-missing .yw-set-link { font-size: 12px; }

/* ----------------------------------------------------- Targets card -- */
.yw-set-groups { display: flex; flex-direction: column; gap: 14px; margin-top: 10px; }
.yw-set-group-head { display: inline-block; margin-bottom: 2px; color: #929097; font-size: 12px; text-decoration: none; }
.yw-set-group-head:hover { color: #8553c2; }
.yw-set-group-head:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-group .yw-set-rows { margin: 0; }
.yw-set-group .yw-set-row { min-height: 40px; padding: 7px 0; }
.yw-set-group .yw-set-row:first-child { border-top: 1px solid #eae8ec; }

/* --------------------------------------------- settings rows (forms) -- */
.yw-settings-page .yw-card-title .hw-info-label { color: inherit; font-size: inherit; font-weight: inherit; letter-spacing: inherit; }
.yw-set-row-label .hw-info-label { color: inherit; font-size: inherit; }
.yw-set-vars { display: flex; flex-direction: column; margin-top: 8px; }
.yw-set-var { margin: 0; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-set-vars > .yw-set-var:first-child, .yw-set-vars > .yw-set-subhead:first-child + .yw-set-var { border-top: 0; }
.yw-set-var-main { display: flex; min-height: 30px; align-items: center; justify-content: space-between; gap: 12px; }
.yw-set-var-ctl { display: inline-flex; flex-shrink: 0; align-items: center; justify-content: flex-end; gap: 10px; margin: 0; padding: 0; border: 0; min-width: 0; }
.yw-set-var-sub { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-top: 4px; color: #929097; font-size: 12px; }
.yw-set-subhead { margin: 0; padding: 14px 0 4px; border-top: 1px solid #eae8ec; color: #929097; font-size: 12px; }
.yw-set-vars > .yw-set-subhead:first-child { padding-top: 4px; border-top: 0; }
.yw-set-subhead + .yw-set-var { border-top: 0; }
.yw-set-tag { color: #929097; font-size: 12px; }
.yw-set-row-sub[data-tone="bad"] { color: #c85f84; }
.yw-set-followup { margin: 0; padding-top: 12px; margin-top: 14px; border-top: 1px solid #eae8ec; }
.yw-set-followup .yw-set-actions { margin-top: 0; }

/* A number with its unit. Default lives in the placeholder (grey); the
   owner's own value reads in ink (data-mine). */
.yw-set-num { display: inline-flex; align-items: center; gap: 6px; color: #929097; font-size: 12px; }
.yw-set-num input { width: 96px; min-height: 32px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #87818c; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; text-align: right; }
.yw-set-num input[data-mine] { color: #202024; }
.yw-set-num input::placeholder { color: #b5b0ba; }
:is(.yw-set-num input, .yw-set-mini):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }

/* A small field inside a caption line (a date, a month, a percent). */
.yw-set-mini { min-height: 28px; padding: 0 8px; border: 1px solid #e2e1e4; border-radius: 8px; background: #fff; color: #202024; font: inherit; font-size: 12px; font-variant-numeric: tabular-nums; }
.yw-set-mini[data-size="pct"] { width: 56px; text-align: right; }
.yw-set-mini[data-size="month"] { width: 150px; }

/* A checkbox or radio and its words on one line. */
.yw-set-check { width: 16px; height: 16px; flex-shrink: 0; margin: 0; accent-color: #7c3aed; cursor: pointer; }
.yw-set-inline { display: inline-flex; align-items: center; gap: 6px; margin: 0; color: #59535f; font-size: 12px; cursor: pointer; }
.yw-set-inline[data-size="row"] { color: inherit; font-size: 14px; }
.yw-set-inline input[type="radio"] { margin: 0; accent-color: #7c3aed; }

/* The submit wrapper (SubmitButton draws its own button). */
.yw-set-submit { display: inline-flex; }
.yw-set-submit[data-variant="quiet"] .yw-set-btn { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-submit[data-variant="quiet"] .yw-set-btn:hover { border-color: #d5c4e6; background: #f8f5fb; }

.yw-set-saved { margin: 8px 0 0; color: #279876; font-size: 12px; }
.yw-set-note { margin: 12px 0 0; color: #59535f; font-size: 13px; line-height: 1.5; }

/* ------------------------------------------------------ investor plan -- */
.yw-set-ip-name { max-width: 360px; }
.yw-set-ip-months { display: grid; gap: 10px; margin-top: 14px; grid-template-columns: repeat(6, minmax(0, 1fr)); }
@media (max-width: 1100px) { .yw-set-ip-months { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) { .yw-set-ip-months { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* ------------------------------------------------ the plan grid chrome -- */
.yw-set-plan form { margin-top: 14px; }
/* The room and total plans side by side (10/20). */
.yw-set-plans { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; gap: 16px; }
.yw-set-plans > .yw-set-plan { min-width: 0; margin: 0; }
@media (max-width: 1100px) { .yw-set-plans { grid-template-columns: minmax(0, 1fr); } }
.yw-set-years { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yw-set-years-seg { display: inline-flex; padding: 3px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; }
.yw-set-years-seg > button { min-height: 28px; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #87818c; font: inherit; font-size: 13px; font-variant-numeric: tabular-nums; cursor: pointer; }
.yw-set-years-seg > button:hover { color: #202024; }
.yw-set-years-seg > button[data-active] { background: #f1ecf7; color: #202024; font-weight: 500; }
.yw-set-years-seg > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-set-years-total { color: #202024; font-size: 13px; }
.yw-set-fold { margin-top: 12px; border-top: 1px solid #eae8ec; }
.yw-set-fold + .yw-set-fold, .yw-set-fold:last-child { border-bottom: 1px solid #eae8ec; }
.yw-set-fold-head { display: flex; min-height: 42px; align-items: center; gap: 8px; list-style: none; cursor: pointer; }
.yw-set-fold-head .yw-set-row-sub { margin-top: 0; }
.yw-set-fold-head [aria-hidden] { margin-left: auto; color: #929097; transition: transform .16s; }
.yw-set-fold[open] .yw-set-fold-head [aria-hidden] { transform: rotate(180deg); }
.yw-set-choices { display: flex; flex-direction: column; margin-top: 12px; }
.yw-set-choices > .yw-set-row-sub { margin: 0 0 4px; }
.yw-set-choice { display: flex; flex-direction: column; align-items: flex-start; gap: 2px; padding: 10px 0; border: 0; border-top: 1px solid #eae8ec; background: none; color: inherit; font: inherit; text-align: left; cursor: pointer; }
.yw-set-choice:hover .yw-set-row-label { color: #8553c2; }
.yw-set-choice:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }

/* The plan cards' type (10/20, owner: "these 2 use a dfifferent fornt form
   the one used in the new design"). plan-grid.tsx still carries the old
   Tailwind sizes (10 and 11px caps, zinc greys, semibold); inside the plan
   cards they take the new design's: 12px captions in #929097, 13.5px rows
   in ink, weight 500 at most, no caps, the Settings inputs. */
.yw-set-plan :is(.text-xs) { font-size: 13px; }
.yw-set-plan :is(.text-\[11px\], .text-\[10px\]) { font-size: 12px; }
.yw-set-plan :is(.uppercase) { letter-spacing: 0; text-transform: none; }
.yw-set-plan :is(.font-semibold) { font-weight: 500; }
.yw-set-plan .text-zinc-300 { color: #b9b3c0; }
.yw-set-plan .text-zinc-400 { color: #929097; }
.yw-set-plan .text-zinc-500 { color: #77717d; }
.yw-set-plan .text-zinc-600 { color: #59535f; }
.yw-set-plan :is(.text-zinc-700, .text-zinc-800) { color: #202024; }
.yw-set-plan .yw-plan-head { color: #929097; font-size: 12px; font-weight: 400; }
.yw-set-plan .yw-plan-row { font-size: 13.5px; letter-spacing: -.2px; }
.yw-set-plan .yw-plan-row > span:first-child { color: #59535f; }
.yw-set-plan .yw-plan-row > span:first-child[data-pre] { color: #b9b3c0; }
.yw-set-plan .yw-plan-row input { box-sizing: border-box; height: 36px; border-color: #e2e1e4; border-radius: 9px; background: #fff; color: #202024; font: inherit; font-size: 13.5px; }
.yw-set-plan .yw-plan-row input:focus { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-set-plan .yw-plan-row input[data-plan-locked] { background: #f7f6f9; color: #59535f; }
.yw-set-plan .yw-plan-row input::placeholder { color: #b9b3c0; }

/* ----------------------------------------------------------- dark twins -- */
[data-theme-root].dark .yw-set-plan .text-zinc-300 { color: #6f6a7c; }
[data-theme-root].dark .yw-set-plan :is(.text-zinc-400, .yw-plan-head) { color: #a297ab; }
[data-theme-root].dark .yw-set-plan :is(.text-zinc-500, .text-zinc-600, .yw-plan-row > span:first-child) { color: #c3b9cc; }
[data-theme-root].dark .yw-set-plan :is(.text-zinc-700, .text-zinc-800) { color: #f3eef8; }
[data-theme-root].dark .yw-set-plan .yw-plan-row input { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark .yw-set-plan .yw-plan-row input[data-plan-locked] { background: #1f1c24; color: #c3b9cc; }
[data-theme-root].dark .yw-set-setupbar { border-color: #3c3746; background: #1f1c24; color: #f3eef8; }
[data-theme-root].dark .yw-set-setupbar-next { color: #c3b9cc; }
[data-theme-root].dark .yw-set-setupbar-arrow { border-color: #3c3746; color: #c3b9cc; }
[data-theme-root].dark .yw-set-setupbar-arrow:hover { background: #2a2631; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-var, .yw-set-subhead, .yw-set-followup, .yw-set-fold, .yw-set-choice, .yw-set-group .yw-set-row:first-child) { border-color: #34303c; }
[data-theme-root].dark .yw-set-fold:last-child { border-bottom-color: #34303c; }
[data-theme-root].dark :is(.yw-set-num input, .yw-set-mini, .yw-set-years-seg) { border-color: #3c3746; background: #26232c; color: #c3b9cc; }
[data-theme-root].dark .yw-set-num input[data-mine], [data-theme-root].dark .yw-set-mini { color: #f3eef8; }
[data-theme-root].dark .yw-set-years-seg > button[data-active] { background: #3a2f4d; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-years-total) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-inline, .yw-set-note) { color: #c3b9cc; }
[data-theme-root].dark .yw-set-submit[data-variant="quiet"] .yw-set-btn { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark .yw-set-group-head:hover, [data-theme-root].dark .yw-set-choice:hover .yw-set-row-label { color: #c9b1ff; }

/* Settings, connections (10/15): this section's own look on the shared base
   (settings.css). The tab is settings/connections-panel.tsx: Accounts (the
   catalog, connections-catalog.tsx, its rows integration-card.tsx and their
   popup connection-dialog.tsx, the bank row bank-connector-card.tsx, then
   api-keys-card.tsx and wizard-logins-card.tsx under it) and Links
   (links-panel.tsx).

   What this file adds to the base:
     .yw-conn-seg                   Accounts / Links and the category filter,
                                    the Dashboard's quiet segmented control
     .yw-conn-bar                   search, the filter, the connected count
     .yw-conn-group / .yw-conn-rows one card per category, its connections as
                                    tiles (10/19, owner: each connection's logo)
     .yw-conn-row                   a tile: logo, name over status, the one
                                    sentence, the quiet actions
     .yw-conn-logo                  the connection's mark (connection-logo.tsx)
     .yw-conn-status                the dot and the word; green, rose and
                                    amber are the only colours, on the dot,
                                    and on the word only when it is bad news
     .yw-conn-more                  the round "···" that opens a row's popup
     .yw-conn-dialog / .yw-conn-pop-*  the popup behind a tile: logo, name and
                                    status in the header; short sections split
                                    by hairlines, explanations on hovers
     .yw-conn-quiet                 the quiet button look for a SubmitButton,
                                    which cannot carry data-variant */

.yw-conn { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-conn-groups, .yw-conn-links { display: flex; min-width: 0; flex-direction: column; gap: 16px; }

/* The toolbar card (10/19): Accounts / Links as its title, the count on the
   right, then the search and the category filter at full size. */
.yw-conn-toolbar { display: flex; flex-direction: column; gap: 16px; }
.yw-conn-toolbar-top { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 16px; }
.yw-conn-subtabs { display: flex; align-items: baseline; gap: 22px; }
.yw-conn-subtabs > a { position: relative; padding-bottom: 6px; color: #a7a2ad; font-size: 19px; font-weight: 500; letter-spacing: -.35px; text-decoration: none; transition: color .16s; }
.yw-conn-subtabs > a:hover { color: #59535f; }
.yw-conn-subtabs > a[aria-current] { color: #202024; }
.yw-conn-subtabs > a[aria-current]::after { position: absolute; right: 0; bottom: 0; left: 0; height: 2px; border-radius: 2px; background: #202024; content: ""; }
.yw-conn-subtabs > a:focus-visible { outline: 2px solid #b993ff; outline-offset: 3px; border-radius: 4px; }
.yw-conn-toolbar .yw-conn-count { margin-left: 0; font-size: 13px; }

/* The quiet segmented control (the Dashboard's, as on the Floor). */
.yw-conn-seg { display: inline-flex; max-width: 100%; flex-wrap: wrap; gap: 2px; padding: 3px; border-radius: 12px; background: #eeeded; }
.yw-conn-seg > :is(a, button) { display: inline-flex; min-height: 28px; align-items: center; padding: 0 12px; border: 0; border-radius: 9px; background: transparent; color: #6f6975; font: inherit; font-size: 12px; font-weight: 500; text-decoration: none; white-space: nowrap; cursor: pointer; transition: background .16s, color .16s; }
.yw-conn-seg > :is(a, button):hover { background: rgba(255, 255, 255, .6); color: #202024; }
.yw-conn-seg > :is([aria-current], [aria-selected="true"]) { background: #fff; color: #202024; box-shadow: 0 2px 6px rgba(0, 0, 0, .06); }
.yw-conn-seg > :is(a, button):focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }

/* The catalog bar: search, the filter, the count. No hero. */
.yw-conn-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 12px; }
.yw-conn-search { display: flex; min-width: 0; min-height: 44px; flex: 1 1 260px; align-items: center; gap: 10px; padding: 0 14px; border: 1px solid #e2e1e4; border-radius: 14px; background: #fff; color: #a59fab; transition: border-color .16s, box-shadow .16s; }
.yw-conn-search:focus-within { border-color: #b993ff; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-conn-search > svg { flex-shrink: 0; }
.yw-conn-search > input { width: 100%; min-width: 0; border: 0; background: transparent; color: #202024; font: inherit; font-size: 14px; outline: none; }
/* The category filter at the search's height. */
.yw-conn-bar > .yw-conn-seg { min-height: 44px; flex: 0 1 auto; align-items: stretch; padding: 4px; border-radius: 14px; }
.yw-conn-bar > .yw-conn-seg > button { min-height: 36px; padding: 0 16px; border-radius: 10px; font-size: 13.5px; }
.yw-conn-search > input::placeholder { color: #a59fab; }
.yw-conn-count { margin-left: auto; color: #929097; font-size: 12px; white-space: nowrap; }
.yw-conn-banner { margin: 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-conn-banner:is([data-tone="warn"], [data-tone="bad"]) { color: #c85f84; }
.yw-conn-empty { margin: 0; color: #929097; font-size: 13px; text-align: center; }
.yw-conn-empty[data-start] { margin-top: 10px; text-align: left; }

/* A category's rows: two columns on a wide screen, hairlines between. A
   long list scrolls inside its card (.yw-tasks-scroll, floor.css), never
   stretching the page (owner 10/15). */
.yw-settings-page .yw-tasks-scroll > :is(.yw-conn-rows, .yw-set-rows, .yw-conn-access-list) { margin-top: 0; }
.yw-settings-page .yw-tasks-scroll { padding-bottom: 4px; }
/* Logins for the Wizard: two columns of sites, as the catalog lays out its
   rows, so a short row is not one line across the whole card (10/15). */
.yw-conn-logins .yw-set-rows { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; }
.yw-conn-logins .yw-set-rows > .yw-set-row:nth-child(2) { border-top: 0; }
@media (max-width: 900px) { .yw-conn-logins .yw-set-rows { grid-template-columns: minmax(0, 1fr); } .yw-conn-logins .yw-set-rows > .yw-set-row:nth-child(2) { border-top: 1px solid #eae8ec; } }
.yw-conn-rows { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(100%, 248px), 1fr)); gap: 12px; margin: 4px 0 0; padding: 0; list-style: none; }
.yw-conn-row { display: flex; min-width: 0; flex-direction: column; gap: 10px; padding: 14px 14px 13px; border: 1px solid #ebe9ee; border-radius: 18px; background: #fff; transition: border-color .16s, box-shadow .16s; }
.yw-conn-row:hover { border-color: #dcd0ea; box-shadow: 0 6px 18px rgba(32, 24, 44, .05); }
.yw-conn-row[data-highlight] { border-color: #c8b0ef; box-shadow: 0 0 0 3px rgba(185, 147, 255, .25); }
.yw-conn-tile-head { display: flex; min-width: 0; align-items: center; gap: 12px; }
.yw-conn-main { display: flex; min-width: 0; flex-direction: column; gap: 3px; }
.yw-conn-name { display: block; min-width: 0; overflow: hidden; color: #202024; font-size: 14px; font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
.yw-conn-blurb { display: -webkit-box; min-height: calc(2 * 1.45em); overflow: hidden; color: #77717d; font-size: 12.5px; line-height: 1.45; -webkit-box-orient: vertical; -webkit-line-clamp: 2; }
.yw-conn-row[data-status="error"] .yw-conn-blurb[data-note], .yw-conn-blurb [data-tone="bad"] { color: #c85f84; }
.yw-conn-row[data-status="stale"] .yw-conn-blurb[data-note] { color: #b7791f; }
.yw-conn-note { display: block; margin-top: 2px; overflow: hidden; color: #929097; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-conn-note [data-tone="bad"], .yw-conn-note[data-tone="bad"] { color: #c85f84; }
.yw-conn-url { color: inherit; text-decoration: none; }
.yw-conn-url:hover { color: #8553c2; text-decoration: underline; }
.yw-conn-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; margin-top: auto; }
.yw-conn-actions > .yw-conn-more { margin-left: auto; }
.yw-conn-actions .yw-set-btn { min-height: 32px; }
/* Coming soon: the logo and the name, quiet. */
.yw-conn-group[data-soon] .yw-conn-rows { grid-template-columns: repeat(auto-fill, minmax(min(100%, 200px), 1fr)); gap: 8px; }
.yw-conn-group[data-soon] .yw-conn-row { flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 14px; background: transparent; }
.yw-conn-group[data-soon] .yw-conn-row:hover { border-color: #ebe9ee; box-shadow: none; }
.yw-conn-group[data-soon] .yw-conn-logo { width: 28px; height: 28px; border-radius: 8px; opacity: .55; filter: grayscale(1); }
.yw-conn-group[data-soon] .yw-conn-name { color: #87818c; font-weight: 400; }
@media (max-width: 560px) { .yw-conn-count { margin-left: 0; } }
/* Links (links-panel.tsx): one link per row, hairlines between, no tiles. */
.yw-conn-rows[data-single] { grid-template-columns: minmax(0, 1fr); gap: 0; margin-top: 6px; }
.yw-conn-rows[data-single] > .yw-conn-row { display: grid; min-height: 54px; grid-template-columns: minmax(0, 1fr) minmax(120px, auto) auto; align-items: center; gap: 4px 16px; padding: 10px 0; border: 0; border-top: 1px solid #eae8ec; border-radius: 0; background: transparent; box-shadow: none; }
.yw-conn-rows[data-single] > .yw-conn-row:first-child { border-top: 0; }
.yw-conn-rows[data-single] .yw-conn-actions { margin-top: 0; justify-content: flex-end; }
@media (max-width: 560px) {
  .yw-conn-rows[data-single] > .yw-conn-row { grid-template-columns: minmax(0, 1fr) auto; }
  .yw-conn-rows[data-single] > .yw-conn-row > .yw-conn-actions { grid-column: 1 / -1; justify-content: flex-start; }
}

/* The logo: a 40px rounded square (44px in a popup header). A mark drawn on
   its own ground fills it; a bare mark sits on white with a hairline. */
.yw-conn-logo { display: inline-grid; width: 40px; height: 40px; flex-shrink: 0; place-items: center; overflow: hidden; border-radius: 11px; background: #fff; box-shadow: inset 0 0 0 1px #ebe9ee; }
.yw-conn-logo[data-size="head"] { width: 44px; height: 44px; border-radius: 12px; }
.yw-conn-logo > svg { width: 60%; height: 60%; }
.yw-conn-logo[data-fill] { background: transparent; box-shadow: none; }
.yw-conn-logo[data-fill] > svg { width: 100%; height: 100%; }
.yw-conn-logo-tile { display: grid; width: 100%; height: 100%; place-items: center; font-size: 17px; font-weight: 600; letter-spacing: 0; }
.yw-conn-logo-tile > img { width: 62%; height: 62%; object-fit: contain; }
.yw-conn-logo-tile > svg { width: 50%; height: 50%; }

/* The status: a small dot and a word. */
.yw-conn-status { display: inline-flex; min-width: 0; align-items: center; gap: 7px; color: #929097; font-size: 12px; white-space: nowrap; }
.yw-conn-status > i { width: 6px; height: 6px; flex-shrink: 0; border-radius: 50%; background: #cfccd3; }
.yw-conn-status[data-status="connected"] > i { background: #2fa57d; }
.yw-conn-status[data-status="error"] { color: #c85f84; }
.yw-conn-status[data-status="error"] > i { background: #d65e8a; }
.yw-conn-status[data-status="stale"] { color: #b7791f; }
.yw-conn-status[data-status="stale"] > i { background: #d39b32; }

/* The round "···" and the quiet look for a SubmitButton. */
.yw-conn-more { display: inline-grid; width: 32px; height: 32px; flex-shrink: 0; place-items: center; padding: 0; border: 1px solid #e4e2e6; border-radius: 50%; background: transparent; color: #59535f; cursor: pointer; transition: background .16s, border-color .16s; }
.yw-conn-more:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-conn-more:focus-visible { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-set-btn.yw-conn-quiet { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
.yw-set-btn.yw-conn-quiet:hover { border-color: #d5c4e6; background: #f8f5fb; }

/* The bank's Plaid buttons, drawn by expenses/plaid-link.tsx, wear the row's
   quiet button ("Connect") or its text action ("Add a bank"). */
.yw-settings-page .yw-conn-plaid button { min-height: 34px; padding: 0 14px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; font-weight: 500; white-space: nowrap; }
.yw-settings-page .yw-conn-plaid button:hover { border-color: #d5c4e6; background: #f8f5fb; }
.yw-settings-page .yw-conn-plaid[data-look="link"] button { min-height: 0; padding: 0; border: 0; border-radius: 0; background: none; color: #8553c2; font-weight: 400; }
.yw-settings-page .yw-conn-plaid[data-look="link"] button:hover { background: none; text-decoration: underline; }

/* The popup behind a tile: the Dashboard's card as a dialog. The header is
   the logo, the name and the status; the body is short sections split by
   hairlines, each title carrying its explanation on a hover. */
.yw-conn-dialog { border: 1px solid rgba(226, 225, 228, .8); border-radius: 24px; background: rgba(251, 251, 251, .78); color: #202024; box-shadow: 0 30px 80px rgba(20, 16, 28, .22), 0 2px 8px rgba(20, 16, 28, .06); font-size: 14px; letter-spacing: -.25px; -webkit-backdrop-filter: saturate(160%) blur(28px); backdrop-filter: saturate(160%) blur(28px); }
/* Translucent (owner 10/19): the page shows through, softly. */
.yw-conn-dialog::backdrop { background: rgba(24, 20, 32, .22); -webkit-backdrop-filter: blur(3px); backdrop-filter: blur(3px); }
.yw-conn-dialog-head { background: transparent; }
.yw-conn-dialog-head { display: flex; align-items: center; gap: 14px; padding: 20px 20px 16px 22px; border-bottom: 1px solid #eae8ec; }
.yw-conn-dialog-titles { display: flex; min-width: 0; flex-direction: column; gap: 4px; }
.yw-conn-dialog-head .yw-card-title { margin: 0; color: #202024; font-size: 19px; font-weight: 500; line-height: 1.2; }
.yw-conn-dialog-close { display: inline-grid; width: 32px; height: 32px; flex-shrink: 0; align-self: flex-start; place-items: center; margin-left: auto; padding: 0; border: 0; border-radius: 50%; background: transparent; color: #929097; font: inherit; font-size: 20px; line-height: 1; cursor: pointer; }
.yw-conn-dialog-close:hover { background: #f1f0f3; color: #202024; }
.yw-conn-dialog-body { display: flex; flex-direction: column; gap: 16px; padding: 18px 22px 22px; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-conn-dialog-body > :is(.yw-conn-pop-section, .yw-conn-pop-foot):not(:first-child) { padding-top: 16px; border-top: 1px solid #eae8ec; }
.yw-conn-pop-status { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.yw-conn-pop-ago { color: #929097; font-size: 12px; }
.yw-conn-pop-text { margin: 0; color: #59535f; font-size: 13px; line-height: 1.5; }
.yw-conn-pop-text[data-lead] { color: #202024; }
.yw-conn-pop-text[data-tone="bad"] { color: #c85f84; }
.yw-conn-pop-section { margin: 0; }
.yw-conn-pop-head { display: flex; min-height: 24px; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 8px; }
.yw-conn-pop-h { margin: 0; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }
.yw-conn-pop-aside { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; text-align: right; }
.yw-conn-pop-list { display: flex; flex-direction: column; gap: 4px; margin: 0; padding-left: 18px; color: #59535f; font-size: 13px; line-height: 1.5; list-style: disc; }
.yw-conn-pop-list[data-plain] { gap: 6px; margin-top: 8px; padding-left: 0; list-style: none; }
.yw-conn-pop-steps { display: flex; flex-direction: column; gap: 10px; margin: 0; padding: 0; color: #59535f; font-size: 13px; line-height: 1.5; list-style: none; counter-reset: yw-step; }
.yw-conn-pop-steps > li { position: relative; min-height: 20px; padding-left: 30px; counter-increment: yw-step; }
.yw-conn-pop-steps > li::before { position: absolute; top: 0; left: 0; display: grid; width: 20px; height: 20px; place-items: center; border-radius: 50%; background: #f1eef5; color: #59535f; content: counter(yw-step); font-size: 11px; font-weight: 600; }
.yw-conn-pop-service { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 10px; }
.yw-conn-pop-detail { min-width: 0; flex: 1 1 200px; color: #59535f; }
.yw-conn-pop-service > .yw-conn-status { flex-shrink: 0; font-size: 13px; }
.yw-conn-pop-service > .yw-conn-status:not([data-status="error"], [data-status="stale"]) { color: #202024; }
[data-theme-root].dark .yw-conn-pop-service > .yw-conn-status:not([data-status="error"], [data-status="stale"]) { color: #f3eef8; }
.yw-conn-pop-caption { margin: 8px 0 0; color: #929097; font-size: 12px; line-height: 1.5; }
.yw-conn-pop-head + .yw-conn-pop-caption { margin-top: -2px; }
.yw-conn-pop-actions, .yw-conn-pop-foot { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; }
.yw-conn-pop-foot { justify-content: space-between; }

/* What the key allows, and the safety claims: one line each, the long
   sentence on the label's hover. */
.yw-conn-checks, .yw-conn-safety { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.yw-conn-checks > li { display: flex; min-height: 34px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #f0eef2; color: #202024; font-size: 13px; }
.yw-conn-checks > li:first-child { border-top: 0; }
.yw-conn-checks .yw-conn-status { font-size: 12px; }
.yw-conn-safety > li { display: flex; min-height: 30px; align-items: center; gap: 10px; color: #202024; font-size: 13px; }
.yw-conn-safety > li > svg { width: 14px; height: 14px; color: #279876; }
.yw-conn-facts { display: flex; flex-direction: column; margin: 0; }
.yw-conn-facts > div { display: flex; min-height: 32px; align-items: center; justify-content: space-between; gap: 12px; border-top: 1px solid #f0eef2; }
.yw-conn-facts > div:first-child { border-top: 0; }
.yw-conn-facts dt { color: #77717d; font-size: 13px; }
.yw-conn-facts dd { margin: 0; color: #202024; font-size: 13px; font-weight: 500; }

/* A key or token paste: the box and its button on one line. */
.yw-conn-key-paste { display: flex; flex-direction: column; gap: 8px; margin-top: 10px; }
.yw-conn-key-paste-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-conn-key-paste-line > .yw-field { min-width: 0; flex: 1 1 220px; }
.yw-conn-key-paste input:is([type="password"], [type="text"]) { width: 100%; min-height: 36px; padding: 0 12px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; }
.yw-conn-key-paste input:is([type="password"], [type="text"]):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-conn-key-paste > .yw-set-btn { align-self: flex-start; }

/* Your own API (feeds-card.tsx): the connected feeds, the named tools, the
   paste form. */
.yw-conn-feeds, .yw-conn-presets { display: flex; flex-direction: column; margin: 0; padding: 0; list-style: none; }
.yw-conn-feed, .yw-conn-presets > li { padding: 10px 0; border-top: 1px solid #f0eef2; }
.yw-conn-feed:first-child, .yw-conn-presets > li:first-child { padding-top: 0; border-top: 0; }
.yw-conn-presets > li { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.yw-conn-presets > li > div { flex: 1 1 220px; }
.yw-conn-presets > li[data-highlight] { margin: 0 -10px; padding: 10px; border-radius: 12px; background: #f6f2fc; }
.yw-conn-presets .yw-conn-pop-caption, .yw-conn-feed .yw-conn-pop-caption { margin-top: 2px; }
.yw-conn-feed-line { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px 14px; }
.yw-conn-feed-name { color: #202024; font-size: 13px; font-weight: 500; }
.yw-conn-feed-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; margin-top: 3px; color: #929097; font-size: 12px; }
.yw-conn-pop-caption[data-tone="bad"], .yw-conn-pop-text[data-tone="bad"] { color: #c85f84; }
.yw-conn-pop-text[data-tone="ok"] { color: #279876; }
.yw-set-danger[data-armed] { padding: 0 10px; border: 1px solid #f0c9d6; border-radius: 10px; }
.yw-conn-feed-form { display: flex; flex-direction: column; gap: 10px; }
.yw-conn-form-pair { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (max-width: 560px) { .yw-conn-form-pair { grid-template-columns: minmax(0, 1fr); } }
.yw-conn-label { display: flex; min-width: 0; flex-direction: column; gap: 4px; color: #59535f; font-size: 12px; font-weight: 500; }
.yw-conn-label-line { display: flex; align-items: center; justify-content: space-between; }
.yw-conn-label-line > .yw-set-link { font-size: 12px; }
.yw-conn-input { width: 100%; min-width: 0; min-height: 34px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; font-weight: 400; }
.yw-conn-input:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-conn-form-more > summary { color: #8553c2; font-size: 12px; cursor: pointer; }
.yw-conn-form-more > .yw-conn-form-pair { margin-top: 10px; }
.yw-conn-sample { display: flex; flex-direction: column; gap: 8px; padding-top: 12px; border-top: 1px solid #f0eef2; }
.yw-conn-fields { display: flex; flex-direction: column; gap: 8px; margin: 0; padding: 0; list-style: none; }
.yw-conn-fields > li { display: grid; grid-template-columns: auto minmax(0, 1fr) auto auto; align-items: center; gap: 8px; font-size: 12px; }
.yw-conn-fields input[type="checkbox"] { accent-color: #7c3aed; }
.yw-conn-fields .yw-conn-input { min-height: 30px; }
.yw-conn-field-path { overflow: hidden; margin-top: 2px; color: #929097; font-size: 11px; text-overflow: ellipsis; white-space: nowrap; }
.yw-conn-field-pii { display: inline-flex; align-items: center; gap: 4px; color: #59535f; font-size: 12px; white-space: nowrap; }
.yw-conn-field-pii[data-off] { color: #c9c6cd; }
.yw-conn-sample-pre { max-height: 160px; margin: 4px 0 0; padding: 8px 10px; overflow: auto; border: 1px solid #f0eef2; border-radius: 10px; background: #fff; color: #59535f; font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 11px; line-height: 1.4; }
[data-theme-root].dark :is(.yw-conn-feed, .yw-conn-presets > li, .yw-conn-sample) { border-color: #16213a; }
[data-theme-root].dark .yw-conn-presets > li[data-highlight] { background: #1c1730; }
[data-theme-root].dark .yw-conn-feed-name { color: #f3eef8; }
[data-theme-root].dark :is(.yw-conn-feed-meta, .yw-conn-field-path) { color: #a297ab; }
[data-theme-root].dark :is(.yw-conn-label, .yw-conn-field-pii) { color: #c3b9cc; }
[data-theme-root].dark .yw-conn-input, [data-theme-root].dark .yw-conn-sample-pre { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-conn-form-more > summary { color: #c9b1ff; }
[data-theme-root].dark :is(.yw-conn-pop-caption[data-tone="bad"], .yw-conn-pop-text[data-tone="bad"]) { color: #e58aab; }

/* Links: the paste box, the addresses, the foot line. */
.yw-conn-paste-form { margin-top: 14px; }
.yw-settings-page .yw-conn-paste-form input[name="url"] { min-height: 34px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; }
.yw-settings-page .yw-conn-paste-form input[name="url"]:focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
.yw-settings-page .yw-conn-paste-form button[type="submit"] { min-height: 34px; padding: 0 14px; border-radius: 10px; background: #7c3aed; font-size: 13px; font-weight: 500; }
.yw-settings-page .yw-conn-paste-form button[type="submit"]:hover { background: #6d28d9; }
.yw-conn-addr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; margin-top: 12px; }
.yw-conn-addr-form { display: flex; min-width: 0; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.yw-conn-addr-form > .yw-field { min-width: 0; flex: 1 1 220px; }
.yw-conn-addr-form > :is(p, div[role]) { flex-basis: 100%; }
@media (max-width: 760px) { .yw-conn-addr { grid-template-columns: minmax(0, 1fr); } }
.yw-conn-foot { margin: 0; color: #929097; font-size: 12px; }
.yw-conn-foot .yw-set-link { font-size: 12px; }

/* API keys (10/19): one line a key; the scopes as toggle chips. */
.yw-conn-keylist { display: flex; flex-direction: column; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-conn-keylist > li { display: grid; min-height: 52px; grid-template-columns: minmax(0, 1fr) 140px 110px auto; align-items: center; gap: 4px 16px; border-top: 1px solid #eae8ec; }
.yw-conn-keylist > li:first-child { border-top: 0; }
.yw-conn-keylist-name { display: flex; min-width: 0; align-items: center; gap: 8px; }
.yw-conn-keylist-name > .yw-conn-key-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.yw-conn-keylist-scopes { color: #59535f; font-size: 13px; }
.yw-conn-keylist-used { color: #929097; font-size: 12px; }
@media (max-width: 760px) { .yw-conn-keylist > li { grid-template-columns: minmax(0, 1fr) auto; padding: 8px 0; } .yw-conn-keylist-scopes, .yw-conn-keylist-used { grid-column: 1; } }
.yw-conn-scopes { display: flex; flex-wrap: wrap; gap: 6px; }
.yw-conn-scope { position: relative; display: inline-flex; min-height: 34px; align-items: center; gap: 6px; padding: 0 13px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #59535f; font-size: 13px; cursor: pointer; transition: background .16s, border-color .16s, color .16s; user-select: none; }
.yw-conn-scope:hover { border-color: #d5c4e6; color: #202024; }
.yw-conn-scope > input { position: absolute; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.yw-conn-scope > svg { display: none; }
/* 10/20: a chosen scope in the house violet tint, not a black pill. */
.yw-conn-scope[data-on] { border-color: #d9c8f7; background: #f3edfd; color: #5b2bb5; }
.yw-conn-scope[data-on] > svg { display: block; }
.yw-conn-scope:has(> input:focus-visible) { outline: 2px solid #b993ff; outline-offset: 2px; }
.yw-conn-key-confirm { align-items: center; color: #202024; }
.yw-conn-key-confirm > input { width: 16px; height: 16px; margin: 0; accent-color: #7c3aed; }
.yw-conn-key-line > .yw-field input { box-sizing: border-box; height: 40px; min-height: 40px; }
/* Read only / Full access / Custom: the Settings year switch (settings-targets.css .yw-set-years-seg). */
.yw-conn-access-seg { display: inline-flex; flex: none; box-sizing: border-box; height: 40px; align-items: stretch; padding: 3px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; }
.yw-conn-access-seg > button { min-height: 0; padding: 0 12px; border: 0; border-radius: 7px; background: transparent; color: #87818c; font: inherit; font-size: 13px; white-space: nowrap; cursor: pointer; transition: background .16s, color .16s; }
.yw-conn-access-seg > button:hover { color: #202024; }
.yw-conn-access-seg > button[data-active] { background: #f1ecf7; color: #202024; font-weight: 500; }
.yw-conn-access-seg > button:focus-visible { outline: 2px solid #b993ff; outline-offset: 1px; }
.yw-conn-key-line > .yw-set-btn { min-height: 40px; }
.yw-conn-scopes[hidden] { display: none; }

/* Logins for the Wizard (10/19): a quiet list in two columns; a site with no
   login is its name, its address and an "Add login" link. */
.yw-conn-sites { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 40px; margin: 6px 0 0; padding: 0; list-style: none; }
.yw-conn-sites > li { display: flex; min-width: 0; min-height: 56px; align-items: center; justify-content: space-between; gap: 6px 14px; padding: 9px 0; border-top: 1px solid #eae8ec; }
.yw-conn-sites > li:nth-child(-n+2) { border-top: 0; }
@media (max-width: 900px) { .yw-conn-sites { grid-template-columns: minmax(0, 1fr); } .yw-conn-sites > li:nth-child(2) { border-top: 1px solid #eae8ec; } }
.yw-conn-site-main { display: flex; min-width: 0; flex-direction: column; gap: 2px; }
.yw-conn-site-name { display: flex; min-width: 0; align-items: center; gap: 10px; color: #202024; font-size: 14px; font-weight: 500; }
.yw-conn-site-sub { overflow: hidden; color: #929097; font-size: 12px; text-overflow: ellipsis; white-space: nowrap; }
.yw-conn-site-sub[data-tone="ok"] { color: #279876; }
.yw-conn-site-sub[data-tone="warn"] { color: #b7791f; }
.yw-conn-site-sub[data-tone="bad"] { color: #c85f84; }
.yw-conn-site-actions { display: flex; flex-shrink: 0; align-items: center; gap: 14px; }
[data-theme-root].dark :is(.yw-conn-keylist > li, .yw-conn-sites > li) { border-color: #1c2843; }
[data-theme-root].dark .yw-conn-site-name { color: #f3eef8; }
[data-theme-root].dark :is(.yw-conn-site-sub, .yw-conn-keylist-used) { color: #a297ab; }
[data-theme-root].dark .yw-conn-keylist-scopes, [data-theme-root].dark .yw-conn-scope { color: #c3b9cc; }
[data-theme-root].dark .yw-conn-scope { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-conn-scope[data-on] { border-color: #4a3a63; background: #3a2f4d; color: #e6dbf7; }
[data-theme-root].dark .yw-conn-access-seg { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-conn-access-seg > button { color: #a297ab; }
[data-theme-root].dark .yw-conn-access-seg > button[data-active] { background: #3a2f4d; color: #f3eef8; }
[data-theme-root].dark .yw-conn-key-confirm { color: #f3eef8; }

/* API keys and the Wizard's logins. */
.yw-conn-keys .yw-set-rows, .yw-conn-logins .yw-set-rows { margin-top: 10px; }
.yw-conn-access > .yw-tasks-scroll { margin-top: 4px; }
.yw-conn-key-name { margin: 0; color: #202024; font-size: 14px; font-weight: 500; }
.yw-conn-code { padding: 2px 6px; border-radius: 6px; background: #f1f0f3; color: #59535f; font-family: var(--font-geist-mono), ui-monospace, monospace; font-size: 12px; word-break: break-all; }
.yw-conn-inline-form { display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; }
.yw-conn-key-form { display: flex; flex-direction: column; gap: 10px; margin-top: 14px; }
.yw-conn-key-line { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yw-conn-key-line > .yw-field { min-width: 0; flex: 1 1 260px; }
.yw-conn-key-scopes { display: flex; flex-wrap: wrap; gap: 6px 14px; color: #59535f; font-size: 13px; }
.yw-conn-key-scopes > label { display: inline-flex; align-items: center; gap: 5px; }
.yw-conn-key-confirm { display: flex; align-items: flex-start; gap: 8px; color: #c85f84; font-size: 13px; line-height: 1.5; }
.yw-conn-key-confirm > input { margin-top: 3px; }
.yw-conn-key-token { display: flex; flex-direction: column; gap: 4px; }
.yw-conn-key-token > p[data-tone="ok"] { margin: 0; color: #279876; font-weight: 500; }
.yw-conn-login-row { align-items: flex-start; }
.yw-conn-login-row .yw-set-row-sub { margin-top: 2px; }
/* Login activity: its own band under a hairline (10/20). */
.yw-conn-access { margin-top: 12px; padding-top: 14px; border-top: 1px solid #eae8ec; }
[data-theme-root].dark .yw-conn-access { border-color: #1c2843; }
.yw-conn-access-list { margin: 4px 0 0; padding: 0; color: #929097; font-size: 12px; line-height: 1.6; list-style: none; }

/* Dark theme. */
[data-theme-root].dark .yw-conn-seg { background: #142036; }
[data-theme-root].dark .yw-conn-seg > :is(a, button) { color: #c3b9cc; }
[data-theme-root].dark .yw-conn-seg > :is(a, button):hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark .yw-conn-seg > :is([aria-current], [aria-selected="true"]) { background: #243352; color: #f3eef8; box-shadow: none; }
[data-theme-root].dark .yw-conn-search { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-conn-search > input { color: #f3eef8; }
[data-theme-root].dark .yw-conn-row { border-color: #1c2843; background: #0b1122; }
[data-theme-root].dark .yw-conn-row:hover { border-color: #2c3b5e; box-shadow: none; }
[data-theme-root].dark .yw-conn-row[data-highlight] { border-color: #5b44a0; box-shadow: 0 0 0 3px rgba(124, 58, 237, .28); }
[data-theme-root].dark :is(.yw-conn-group[data-soon] .yw-conn-row, .yw-conn-rows[data-single] > .yw-conn-row) { background: transparent; }
[data-theme-root].dark .yw-conn-blurb { color: #a297ab; }
[data-theme-root].dark .yw-conn-row[data-status="error"] .yw-conn-blurb[data-note], [data-theme-root].dark .yw-conn-blurb [data-tone="bad"] { color: #e58aab; }
[data-theme-root].dark .yw-conn-row[data-status="stale"] .yw-conn-blurb[data-note] { color: #e0b25c; }
[data-theme-root].dark .yw-conn-logo { background: #f4f2f7; box-shadow: none; }
[data-theme-root].dark .yw-conn-logo[data-fill] { background: transparent; }
[data-theme-root].dark :is(.yw-conn-dialog-head, .yw-conn-dialog-body > :is(.yw-conn-pop-section, .yw-conn-pop-foot):not(:first-child)) { border-color: #1c2843; }
[data-theme-root].dark :is(.yw-conn-checks > li, .yw-conn-facts > div) { border-color: #16213a; }
[data-theme-root].dark :is(.yw-conn-dialog-head .yw-card-title, .yw-conn-pop-text[data-lead], .yw-conn-checks > li, .yw-conn-safety > li, .yw-conn-facts dd) { color: #f3eef8; }
[data-theme-root].dark .yw-conn-facts dt { color: #a297ab; }
[data-theme-root].dark .yw-conn-safety > li > svg { color: #3fbf93; }
[data-theme-root].dark .yw-conn-pop-steps > li::before { background: #1c2843; color: #c3b9cc; }
[data-theme-root].dark .yw-conn-key-paste input:is([type="password"], [type="text"]) { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark :is(.yw-conn-name, .yw-conn-key-name, .yw-conn-pop-h) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-conn-status, .yw-conn-note, .yw-conn-count, .yw-conn-pop-ago, .yw-conn-pop-caption, .yw-conn-access-list, .yw-conn-foot, .yw-conn-empty) { color: #a297ab; }
[data-theme-root].dark .yw-conn-status > i { background: #4a4553; }
[data-theme-root].dark .yw-conn-status[data-status="connected"] > i { background: #3fbf93; }
[data-theme-root].dark .yw-conn-status[data-status="error"] { color: #e58aab; }
[data-theme-root].dark .yw-conn-status[data-status="error"] > i { background: #e58aab; }
[data-theme-root].dark .yw-conn-status[data-status="stale"] { color: #e0b25c; }
[data-theme-root].dark .yw-conn-status[data-status="stale"] > i { background: #e0b25c; }
[data-theme-root].dark :is(.yw-conn-more, .yw-set-btn.yw-conn-quiet, .yw-settings-page .yw-conn-plaid[data-look="quiet"] button) { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark .yw-settings-page .yw-conn-plaid[data-look="link"] button { color: #c9b1ff; }
[data-theme-root].dark .yw-conn-dialog { border-color: rgba(44, 59, 94, .7); background: rgba(13, 21, 39, .76); color: #f3eef8; }
[data-theme-root].dark .yw-conn-dialog::backdrop { background: rgba(2, 6, 16, .45); }
[data-theme-root].dark .yw-conn-subtabs > a { color: #6f6a7c; }
[data-theme-root].dark .yw-conn-subtabs > a:hover { color: #c3b9cc; }
[data-theme-root].dark .yw-conn-subtabs > a[aria-current] { color: #f3eef8; }
[data-theme-root].dark .yw-conn-subtabs > a[aria-current]::after { background: #f3eef8; }
[data-theme-root].dark .yw-conn-dialog-close:hover { background: #1c2843; color: #f3eef8; }
[data-theme-root].dark :is(.yw-conn-dialog-body, .yw-conn-pop-text, .yw-conn-pop-list, .yw-conn-pop-steps, .yw-conn-pop-detail, .yw-conn-banner, .yw-conn-key-scopes) { color: #c3b9cc; }
[data-theme-root].dark .yw-settings-page .yw-conn-paste-form input[name="url"] { border-color: #1c2843; background: #0b1122; color: #f3eef8; }
[data-theme-root].dark .yw-conn-code { background: #1c2843; color: #c3b9cc; }

/* Settings, people (10/15): this section's own look on the shared base (settings.css).

   Three sections wear this file: Assistant (tab henry), People (tab team)
   and Billing (tab billing). The additions to the shared vocabulary are
   scoped to those three tabs, so another section's file can never meet them:
     .yw-set-stack            cards stacked in one grid column
     .yw-set-form             fields two to a row (.yw-field), actions last
     .yw-set-row-main/-end    a row's left column (label over caption) and
                              its right cluster (value, link, button)
     .yw-set-row-fill         a form that IS the row (code entry, ceiling)
     .yw-set-note             one grey line (data-tone ok, warn, bad)
     .yw-set-sub-head         a plain sub-title inside a card
     .yw-set-btn-quiet        the quiet button for a SubmitButton, which
                              cannot carry data-variant
   People's own parts are .yw-sp-*, Billing's .yw-sb-*. */

:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-stack { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-grid > [data-wide] { grid-column: 1 / -1; }

/* Fields. */
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form { display: grid; gap: 14px 16px; margin-top: 16px; grid-template-columns: repeat(2, minmax(0, 1fr)); }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form[data-tight] { margin-top: 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form-one { grid-template-columns: minmax(0, 1fr); }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form > .yw-set-row[data-flush] { min-height: 0; padding: 0; border-top: 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form > .yw-set-row[data-flush] > .yw-set-row-label { flex-shrink: 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-trunc { display: inline-block; max-width: 240px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; vertical-align: bottom; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form > .yw-set-actions { grid-column: 1 / -1; margin-top: 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-field-label { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; gap: 4px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-field[data-indent] { margin-left: 24px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) :is(.yw-set-select, .yw-sp-input) { display: block; width: 100%; min-height: 34px; padding: 0 10px; border: 1px solid #e2e1e4; border-radius: 10px; background: #fff; color: #202024; font: inherit; font-size: 13px; letter-spacing: -.2px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) :is(.yw-set-select, select.yw-sp-input) { padding-right: 28px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) :is(.yw-set-select, .yw-sp-input):focus { border-color: #b993ff; outline: none; box-shadow: 0 0 0 3px rgba(185, 147, 255, .22); }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) :is(.yw-set-select, .yw-sp-input):disabled { opacity: .6; cursor: not-allowed; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-sp-input[data-size="num"] { width: 104px; text-align: right; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-sp-input[data-size="code"] { width: 160px; }

/* Rows. */
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-main { display: flex; min-width: 0; flex: 1 1 auto; flex-direction: column; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-end { display: inline-flex; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: flex-end; gap: 8px 14px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-ink { color: #202024; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-sub[data-tone="ok"] { color: #279876; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-sub[data-tone="warn"] { color: #b7791f; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-sub[data-tone="bad"] { color: #c85f84; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row[data-wrap] { flex-wrap: wrap; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row[data-dense] { min-height: 38px; padding: 6px 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-fill { display: flex; width: 100%; min-width: 0; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 12px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-flash { flex-basis: 100%; font-size: 12px; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-flash:empty { display: none; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-row-flash p { font-size: 12px; font-weight: 400; }

/* Lines and sub-titles. */
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-note { margin: 10px 0 0; color: #929097; font-size: 12px; line-height: 1.5; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-note[data-first] { margin-top: 0; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-note[data-tone="ok"] { color: #279876; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-note[data-tone="warn"] { color: #b7791f; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-note[data-tone="bad"] { color: #c85f84; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-sub-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; margin: 20px 0 2px; color: #202024; font-size: 14px; font-weight: 500; letter-spacing: -.25px; }

/* Actions. */
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-btn-quiet { border: 1px solid #e2e1e4; background: #fff; color: #202024; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-btn-quiet:hover { border-color: #d5c4e6; background: #f8f5fb; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-actions[data-start] { justify-content: flex-start; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-actions > :is(p[role="alert"], p[role="status"]) { margin-right: auto; font-size: 13px; font-weight: 400; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-link[data-quiet] { color: #59535f; }
:is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-link:disabled { opacity: .5; cursor: default; }

@media (max-width: 640px) {
  :is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form { grid-template-columns: minmax(0, 1fr); }
  :is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-form > .yw-field[data-span] { grid-column: auto; }
}

/* ---- People ------------------------------------------------------------ */

.yw-sp { display: flex; min-width: 0; flex-direction: column; gap: 16px; }

/* The roster: name (role as a caption), contact, access, actions. */
.yw-sp-list { margin: 0; padding: 0; list-style: none; }
.yw-sp-row { display: grid; align-items: center; gap: 4px 18px; padding: 11px 0; border-top: 1px solid #eae8ec; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1.5fr) minmax(0, 1fr) 132px; }
.yw-sp-list > .yw-sp-row:first-child { border-top: 0; }
.yw-sp-row[data-head] { margin-top: 12px; padding: 0 0 7px; border-top: 0; border-bottom: 1px solid #eae8ec; color: #929097; font-size: 12px; }
.yw-sp-who { display: flex; min-width: 0; flex-direction: column; }
.yw-sp-name { color: #202024; font-size: 14px; }
.yw-sp-cap { display: flex; flex-wrap: wrap; gap: 0 6px; margin-top: 2px; color: #929097; font-size: 12px; }
.yw-sp-cap > span + span::before { content: "·"; margin-right: 6px; color: #c4c0c9; }
.yw-sp-cap > [data-tone="bad"] { color: #c85f84; }
.yw-sp-contact { min-width: 0; color: #59535f; font-size: 13px; overflow-wrap: anywhere; }
.yw-sp-contact[data-quiet] { color: #929097; }
.yw-sp-contact[data-contact-line] { display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 12px; }
.yw-sp-contact .yw-set-link { overflow-wrap: anywhere; }
.yw-sp-access, .yw-sp-badge { color: #929097; font-size: 13px; }
.yw-sp-actions { display: flex; align-items: center; justify-content: flex-end; gap: 14px; white-space: nowrap; }
.yw-sp-mono { font-family: var(--font-geist-mono), ui-monospace, monospace; overflow-wrap: anywhere; color: #59535f; }
.yw-sp-inline-cap { margin-left: 8px; color: #929097; font-size: 12px; font-weight: 400; }
@media (max-width: 760px) {
  .yw-sp-row { grid-template-columns: minmax(0, 1fr) 132px; }
  .yw-sp-row[data-head] { display: none; }
  .yw-sp-list > .yw-sp-row > :is(.yw-sp-contact, .yw-sp-access) { grid-column: 1; }
  .yw-sp-list > .yw-sp-row > .yw-sp-actions { grid-column: 2; grid-row: 1; }
}

/* Add a person and the access section: no box inside the card. */
.yw-sp-add { display: flex; flex-direction: column; gap: 16px; margin-top: 16px; }
.yw-sp-add > .yw-set-actions { margin-top: 0; }
.yw-sp-access { display: flex; flex-direction: column; gap: 14px; }
.yw-sp-access-body { display: flex; flex-direction: column; gap: 10px; }
.yw-sp-access > .yw-sp-group > .yw-sp-access-body { margin-top: 12px; }
.yw-sp-sentence { margin: 0; color: #202024; font-size: 13px; line-height: 1.5; }
.yw-sp-check { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; color: #202024; font-size: 13px; }
.yw-sp-check[data-top] { align-items: flex-start; }
.yw-sp-check > input[type="checkbox"] { width: 15px; height: 15px; margin: 0; accent-color: #7c3aed; }
.yw-sp-check[data-top] > input[type="checkbox"] { margin-top: 2px; }
.yw-sp-check-sub { color: #929097; font-size: 12px; }
.yw-sp-check-sub[data-tone="bad"] { color: #c85f84; }
.yw-sp-checks { display: flex; flex-wrap: wrap; gap: 6px 16px; margin: 0; padding: 0; list-style: none; }
ul.yw-sp-checks { flex-direction: column; }
.yw-sp-group { padding-top: 14px; border-top: 1px solid #eae8ec; }
.yw-sp-group-head { margin: 0 0 8px; color: #202024; font-size: 14px; font-weight: 500; }
.yw-sp-fieldset { display: flex; min-width: 0; flex-direction: column; gap: 10px; margin: 0; padding: 0; border: 0; }
.yw-sp-fieldset:disabled { opacity: .7; }

/* A fold (the page checklist, targets, usage tracking, the sheet's More):
   a row with a chevron, its body under a hairline. */
.yw-sp-fold { border-top: 1px solid #eae8ec; }
.yw-sp-fold-head { display: flex; min-height: 42px; align-items: center; gap: 8px; color: #202024; font-size: 14px; list-style: none; cursor: pointer; }
.yw-sp-fold-head::-webkit-details-marker { display: none; }
.yw-sp-fold-sub { color: #929097; font-size: 12px; }
.yw-sp-fold-chev { margin-left: auto; color: #a59fab; font-size: 12px; transition: transform .16s; }
.yw-sp-fold[open] > .yw-sp-fold-head > .yw-sp-fold-chev { transform: rotate(180deg); }
.yw-sp-fold-body { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 12px; }
.yw-sp-pick-space + .yw-sp-pick-space { padding-top: 10px; border-top: 1px solid #eae8ec; }
.yw-sp-pick-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.yw-sp-pick-head .yw-sp-check { font-weight: 500; }
.yw-sp-pick-list { display: flex; flex-direction: column; gap: 6px; margin: 8px 0 0 23px; padding: 0; list-style: none; }
.yw-sp-pick-tool { display: inline-flex; min-width: 0; flex: 1 1 0; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.yw-sp-pick-covers { flex-basis: 100%; color: #929097; font-size: 12px; }
/* Per-page View only (10/27): a small switch at the row's right, shown on a
   ticked page when the level is Manage. */
.yw-sp-pick-list > li { display: flex; align-items: baseline; gap: 8px; }
.yw-sp-pick-list > li > .yw-sp-check:first-child { min-width: 0; flex: 1 1 auto; }
.yw-sp-viewonly { flex-shrink: 0; margin-left: auto; color: #6b6870; font-size: 12px; font-weight: 400; }
.yw-sp-pick-head .yw-sp-viewonly { font-weight: 400; }

/* The person popup: the card's title in the head, sections with hairlines. */
.yw-sp-modal { border: 1px solid #e2e1e4; border-radius: 24px; background: #fbfbfb; color: #202024; box-shadow: 0 24px 60px rgba(0, 0, 0, .18); font-family: var(--font-geist-sans), Geist, system-ui, sans-serif; font-size: 14px; letter-spacing: -.25px; }
.yw-sp-modal::backdrop { background: rgba(20, 16, 28, .45); }
.yw-sp-modal-head { display: flex; align-items: flex-start; gap: 12px; padding: 20px 23px 14px; border-bottom: 1px solid #eae8ec; }
.yw-sp-modal-head > div { min-width: 0; }
.yw-sp-modal-close { margin-left: auto; flex-shrink: 0; padding: 2px 8px; border: 0; border-radius: 10px; background: none; color: #929097; font-size: 20px; line-height: 1; cursor: pointer; }
.yw-sp-modal-close:hover { background: #f0eef3; color: #202024; }
.yw-sp-modal-body { min-height: 0; flex: 1 1 auto; overflow-y: auto; padding: 4px 23px 20px; }
.yw-sp-sheet { display: flex; flex-direction: column; }
.yw-sp-section { padding: 16px 0; border-top: 1px solid #eae8ec; }
.yw-sp-sheet > .yw-sp-section:first-child { border-top: 0; }
.yw-sp-section-title { margin: 0 0 12px; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.3px; }
.yw-sp-fold-head > .yw-sp-section-title { margin: 0; }
details.yw-sp-section { padding-bottom: 0; }
details.yw-sp-section > .yw-sp-fold-head { min-height: 0; }
details.yw-sp-section > .yw-sp-fold-body { padding-top: 14px; }
.yw-sp-login { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 16px; margin-top: 14px; padding-top: 12px; border-top: 1px solid #eae8ec; color: #929097; font-size: 12px; }
.yw-sp-picture { display: flex; flex-direction: column; gap: 6px; color: #87818c; font-size: 12px; }
.yw-sp-picture-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.yw-sp-picture-row form { display: flex; flex-wrap: wrap; align-items: center; gap: 10px; }
.yw-sp-file { color: #59535f; font-size: 12px; }
.yw-sp-file::file-selector-button { margin-right: 8px; padding: 4px 10px; border: 1px solid #e2e1e4; border-radius: 8px; background: #fff; color: #202024; font: inherit; cursor: pointer; }
.yw-sp-more-form { display: flex; flex-direction: column; gap: 4px; }
.yw-sp-more-form > .yw-sp-fold:first-of-type { border-top: 0; }

/* Presets. */
.yw-sp-editor { display: flex; flex-direction: column; gap: 16px; margin-top: 12px; }
.yw-sp-editor-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; }
.yw-sp-editor-head > .yw-sp-section-title { margin: 0; }
.yw-sp-editor-head > .yw-set-link { margin-left: auto; }

/* Access and guest-details history. */
.yw-sp-log { color: #202024; font-size: 13px; overflow-wrap: anywhere; }
.yw-sp-log-verb { color: #929097; }

/* ---- Billing ----------------------------------------------------------- */

.yw-sb { display: flex; min-width: 0; flex-direction: column; gap: 16px; }
.yw-sb-flashes { display: flex; flex-direction: column; gap: 4px; }
.yw-sb-flashes > .yw-set-note { margin: 0; color: #59535f; font-size: 13px; }

/* Credits: the month's use as the hero, the track under it. */
/* Credits across the top: the figures left, where they went right (10/15). */
.yw-sb-credits-body { display: grid; gap: 0 40px; grid-template-columns: repeat(2, minmax(0, 1fr)); align-items: start; }
.yw-sb-credits-body:not(:has(> .yw-sb-credits-where)) { grid-template-columns: minmax(0, 1fr); }
.yw-sb-credits-main, .yw-sb-credits-where { min-width: 0; }
[data-settings-tab="billing"] .yw-sb-credits-where > .yw-set-sub-head { margin-top: 16px; }
@media (max-width: 900px) { .yw-sb-credits-body { grid-template-columns: minmax(0, 1fr); } }
.yw-sb-hero { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 10px; margin: 16px 0 12px; }
.yw-sb-hero-value { color: #202024; font-size: clamp(34px, 3.2vw, 46px); font-weight: 500; line-height: 1.1; letter-spacing: -.05em; }
.yw-sb-hero-of { color: #929097; font-size: 13px; }
.yw-sb-track[data-step="pace"] .yw-track-fill { background: repeating-linear-gradient(125deg, #c98a2b 0 2px, #f2dcb5 2px 4px); }
.yw-sb-track:is([data-step="warn"], [data-step="spent"]) .yw-track-fill { background: repeating-linear-gradient(125deg, #c85f84 0 2px, #f1cfdc 2px 4px); }
.yw-sb-sub-figure { color: #59535f; font-size: 13px; font-weight: 400; }
.yw-sb-prices { display: flex; min-width: 220px; flex-direction: column; gap: 3px; }
.yw-sb-price { display: flex; justify-content: space-between; gap: 16px; }
.yw-sb-prices-note { display: block; margin: 4px 0; }
.yw-sb-money { display: inline-flex; align-items: center; gap: 6px; color: #929097; }

/* Plans: the tiers side by side with a hairline between, no box. */
.yw-sb-tiers { display: grid; margin-top: 16px; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.yw-sb-tiers[data-count="1"] { grid-template-columns: minmax(0, 1fr); }
.yw-sb-tiers[data-count="2"] { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.yw-sb-tier { display: flex; min-width: 0; flex-direction: column; gap: 6px; padding: 4px 20px; border-left: 1px solid #eae8ec; }
.yw-sb-tier:first-child { padding-left: 0; border-left: 0; }
.yw-sb-tier:last-child { padding-right: 0; }
.yw-sb-tier-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px; margin: 0; color: #202024; font-size: 14px; font-weight: 500; }
.yw-sb-tier-mine { color: #279876; font-size: 12px; font-weight: 400; }
.yw-sb-tier-price { display: flex; align-items: baseline; gap: 6px; margin: 0; color: #202024; font-size: 28px; font-weight: 500; letter-spacing: -.04em; }
.yw-sb-tier-unit { color: #929097; font-size: 13px; letter-spacing: -.2px; }
.yw-sb-tier-job { margin: 0; color: #929097; font-size: 12px; line-height: 1.5; }
.yw-sb-tier-list { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 0; padding: 0; list-style: none; color: #59535f; font-size: 13px; }
.yw-sb-tier-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-top: 10px; }
.yw-sb-tier-actions > .yw-sb-tier-job { flex-basis: 100%; }
.yw-sb-plan-rows { margin-top: 18px; border-top: 1px solid #eae8ec; }
.yw-sb-plan-rows > .yw-set-row:first-child { border-top: 0; }
@media (max-width: 760px) {
  .yw-sb-tiers, .yw-sb-tiers[data-count] { grid-template-columns: minmax(0, 1fr); }
  .yw-sb-tier { padding: 14px 0; border-top: 1px solid #eae8ec; border-left: 0; }
  .yw-sb-tier:first-child { padding-top: 4px; border-top: 0; }
}

/* ---- Dark theme --------------------------------------------------------- */

[data-theme-root].dark :is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) :is(.yw-set-select, .yw-sp-input, .yw-set-btn-quiet) { border-color: #3c3746; background: #26232c; color: #f3eef8; }
[data-theme-root].dark :is(.yw-set-row-ink, .yw-set-sub-head, .yw-sp-name, .yw-sp-sentence, .yw-sp-check, .yw-sp-group-head, .yw-sp-fold-head, .yw-sp-section-title, .yw-sp-log, .yw-sb-hero-value, .yw-sb-tier-name, .yw-sb-tier-price) { color: #f3eef8; }
[data-theme-root].dark :is(.yw-sp-viewonly, .yw-sp-contact, .yw-sp-mono, .yw-sb-tier-list, .yw-sb-sub-figure, .yw-sp-file) { color: #c3b9cc; }
[data-theme-root].dark :is(.yw-sp-row, .yw-sp-group, .yw-sp-fold, .yw-sp-section, .yw-sp-login, .yw-sp-pick-space, .yw-sb-tier, .yw-sb-plan-rows, .yw-sp-modal-head) { border-color: #34303c; }
[data-theme-root].dark .yw-sp-modal { border-color: #34303c; background: #1d1a22; color: #f3eef8; }
[data-theme-root].dark .yw-sp-modal-close:hover { background: #2c2833; color: #f3eef8; }
[data-theme-root].dark :is([data-settings-tab="henry"], [data-settings-tab="team"], [data-settings-tab="billing"]) .yw-set-link[data-quiet] { color: #c3b9cc; }

/* ---- Inner scrollers (10/15, owner: "the integrated scroller on
   containers that get too long"): a list that can grow scrolls inside its
   card (.yw-tasks-scroll, skin/floor.css), and the roster's head row stays
   pinned with the card's own background. ---- */
.yw-tasks-scroll > .yw-sp-row[data-head] { position: sticky; top: 0; z-index: 1; margin-top: 0; padding-top: 4px; background: #fbfbfb; }
.yw-sp-fold > .yw-tasks-scroll { margin-top: 0; }
.yw-sb-price-list { display: flex; max-height: 260px; flex-direction: column; gap: 3px; margin: 2px -4px; padding: 0 4px; }
[data-theme-root].dark .yw-tasks-scroll > .yw-sp-row[data-head] { background: #1f1d24; }

/* Rate parity (10/7, Wave 1 of docs plan "Rate Parity: simplify"): one
   screen, one question, "is any booking site cheaper than you?", on the
   Dashboard Overview's skin. Skin and layout only: every figure is
   lib/parity-board.ts's (buildParityBoard, parityNightTable, parityFixesFor).

   The page wears the kit (`yw-kit yw-parity` on its root, skin/kit.css):
   .yw-card, CardHead, .yw-hero-value, HeroPill, RowStats, NeedsCard. This
   file only places the cards and draws the night table.

   Desktop: two columns.
     lead     hero, then Needs you (only when something is wrong), then one
              card per running channel test (Wave 3, 10/8)
     nights   the table card: the night to look at first, then every other
              checked night, all expanded (no folds)
   Phone (<= 900px): one column in that source order.
   Every colour here has a [data-theme-root].dark twin at the bottom. */

.yw-parity-grid { display: grid; grid-template-columns: minmax(0, .92fr) minmax(0, 1.38fr); gap: 14px; align-items: start; margin-top: 12px; }
.yw-parity-grid > [data-slot] { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.yw-parity .yw-card-head { margin-bottom: 4px; }
.yw-parity .yw-hero-value { overflow-wrap: anywhere; }
.yw-parity .yw-hero-value[data-tone="bad"] { color: #b84d78; }
.yw-parity .yw-hero-value[data-tone="warn"] { color: #a8702a; }
.yw-parity .yw-hero-status .yw-status-dot { margin-right: 2px; }
.yw-parity .yw-row-stats { margin-top: 4px; }
.yw-parity .yw-row-stat dd { text-align: right; }
.yw-parity-stat-sub { display: block; margin-top: 2px; color: #929097; font-size: 11px; font-weight: 400; }
.yw-parity-stat-warn { color: #b84d78; }
.yw-parity-run { margin-top: 10px; }
.yw-parity-run-line { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; margin: 0; color: #929097; font-size: 12px; }
.yw-parity-running { display: inline-flex; align-items: center; gap: 6px; color: #7445a7; font-weight: 500; }
.yw-parity-running-dot { width: 6px; height: 6px; border-radius: 50%; background: #8e4af0; animation: yw-parity-pulse 1.2s ease-in-out infinite; }
.yw-parity-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; margin-top: 8px; padding: 9px 12px; border-radius: 12px; background: #fbf0dc; color: #8a5a1c; font-size: 12px; }
.yw-parity-check-now { color: #8553c2; font-size: 12px; font-weight: 500; }
.yw-parity-check-now:hover, .yw-parity-check-now:focus-visible { text-decoration: underline; text-underline-offset: 2px; }
.yw-parity-check-now-button { display: inline-flex; align-items: center; min-height: 34px; margin-top: 12px; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 10px; color: #7445a7; font-size: 12px; font-weight: 500; }
.yw-parity-check-now-button:hover { border-color: #d5c4e6; background: #f5f0fa; }

/* The Needs rows' actions: the fix "?" beside Assign, on the face of the row. */
.yw-parity .yw-needs-row-actions > .yw-parity-row-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.yw-parity .yw-needs-row { min-height: 60px; }
.yw-parity .yw-needs-row-title { white-space: normal; }

/* The fix panel behind the "?" (fix-dot.tsx). */
.yw-parity-fix-panel { position: absolute; right: 0; top: 32px; z-index: 40; width: min(22rem, calc(100vw - 2rem)); padding: 14px; border: 1px solid #e2e1e4; border-radius: 16px; background: #fff; box-shadow: 0 10px 28px rgba(48, 32, 64, .12); text-align: left; }
.yw-parity-fix-panel h3 { margin: 0; color: #202024; font-size: 13px; font-weight: 500; }
.yw-parity-fix-amount { margin: 2px 0 0; font-size: 12px; }
.yw-parity-fix-amount[data-tone="bad"] { color: #b84d78; }
.yw-parity-fix-amount[data-tone="warn"] { color: #a8702a; }
.yw-parity-fix-panel ol { margin: 8px 0 0; padding-left: 16px; color: #59535f; font-size: 12px; line-height: 1.55; list-style: decimal; }
.yw-parity-fix-panel ol > li + li { margin-top: 3px; }
.yw-parity-fix-checks { margin-top: 8px; padding-top: 8px; border-top: 1px solid #eae8ec; color: #87818c; font-size: 11px; line-height: 1.5; }
.yw-parity-fix-checks h4 { margin: 0 0 3px; color: #929097; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-transform: uppercase; }
.yw-parity-fix-links { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 8px; padding-top: 8px; border-top: 1px solid #eae8ec; }
.yw-parity-fix-links a { color: #8553c2; font-size: 12px; font-weight: 500; }
.yw-parity-fix-trigger { display: inline-grid; place-items: center; width: 26px; height: 26px; border: 1px solid #f0d3df; border-radius: 50%; background: #f8e8ef; color: #b84d78; font-size: 11px; font-weight: 600; }
.yw-parity-fix-trigger[data-tone="warn"] { border-color: #f0dfbf; background: #fbf0dc; color: #a8702a; }

/* ------------------------------------------------- channel test card -- */
.yw-parity-test .yw-hero-value { font-size: 26px; }
.yw-parity-test-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px; }
.yw-parity-test-decide { display: inline-flex; align-items: center; min-height: 32px; padding: 0 12px; border: 1px solid #e3d9ee; border-radius: 10px; color: #7445a7; font-size: 12px; font-weight: 500; }
.yw-parity-test-decide:hover, .yw-parity-test-decide:focus-visible { border-color: #d5c4e6; background: #f5f0fa; }
.yw-parity-test-limit { margin: 12px 0 0; padding-top: 10px; border-top: 1px solid #eae8ec; color: #929097; font-size: 11px; line-height: 1.5; }

/* The Results list of channel tests (results/channel-tests-card.tsx). */
.yw-ct-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.yw-ct-table th { padding: 6px 8px 6px 0; color: #929097; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.yw-ct-table td { padding: 9px 8px 9px 0; border-top: 1px solid #eeedf1; color: #343039; vertical-align: top; }
.yw-ct-table td[data-num], .yw-ct-table th[data-num] { text-align: right; }
.yw-ct-sub { display: block; margin-top: 1px; color: #a09aa4; font-size: 11px; }
.yw-ct-verdict[data-kind="stop_loss"] { color: #b84d78; font-weight: 500; }
.yw-ct-verdict[data-kind="switching"], .yw-ct-verdict[data-kind="holding"], .yw-ct-verdict[data-kind="kept"] { color: #2f8a6d; }
.yw-ct-wrap { overflow-x: auto; }
.yw-ct-results { margin-top: 24px; }

/* ------------------------------------------- booking sites at a glance -- */
.yw-parity-glance-list { margin: 6px 0 0; padding: 0; list-style: none; }
.yw-parity-glance-row { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: center; gap: 12px; padding: 9px 0; border-top: 1px solid #eeedf1; font-size: 13px; }
.yw-parity-glance-row:first-child { border-top: 0; }
.yw-parity-glance-site { display: grid; grid-template-columns: minmax(0, 1fr) auto; align-items: baseline; gap: 2px 12px; min-width: 0; color: #343039; }
.yw-parity-glance-count { color: #59535f; font-size: 12px; white-space: nowrap; }
.yw-parity-glance-gap { display: inline-flex; align-items: flex-start; gap: 10px; min-width: 150px; justify-content: flex-end; text-align: right; }
.yw-parity-glance-gap .yw-parity-status { min-width: 52px; }
.yw-parity-glance-row[data-status="none"] .yw-parity-site, .yw-parity-glance-row[data-status="none"] .yw-parity-glance-count { color: #a09aa4; font-weight: 400; }

/* ------------------------------------------------------ the night table -- */
.yw-parity-night { padding: 16px 0 6px; border-top: 1px solid #eae8ec; }
.yw-parity-night:first-of-type { border-top: 0; padding-top: 10px; }
.yw-parity-night-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 4px 12px; }
.yw-parity-night-head h3 { margin: 0; color: #202024; font-size: 15px; font-weight: 500; letter-spacing: -.2px; }
.yw-parity-night[data-primary] .yw-parity-night-head h3 { font-size: 17px; }
.yw-parity-first { margin-left: 6px; color: #8553c2; font-size: 11px; font-weight: 500; }
.yw-parity-tone { color: #87818c; font-size: 12px; }
.yw-parity-tone[data-tone="bad"] { color: #b84d78; }
.yw-parity-tone[data-tone="warn"] { color: #a8702a; }
.yw-parity-tone[data-tone="ok"] { color: #2f8a6d; }
.yw-parity-base { margin: 3px 0 0; color: #929097; font-size: 12px; }
.yw-parity-empty { margin: 8px 0 6px; color: #87818c; font-size: 13px; }
.yw-parity-empty[data-tone="warn"] { color: #a8702a; }
.yw-parity-table { width: 100%; margin-top: 8px; border-collapse: collapse; font-size: 13px; }
.yw-parity-table th { padding: 6px 6px 6px 0; color: #929097; font-size: 10px; font-weight: 500; letter-spacing: .04em; text-align: left; text-transform: uppercase; }
.yw-parity-table th[data-num], .yw-parity-table td[data-num] { text-align: right; }
.yw-parity-table td { padding: 9px 6px 9px 0; border-top: 1px solid #eeedf1; color: #343039; vertical-align: top; }
.yw-parity-table th:last-child, .yw-parity-table td:last-child { padding-right: 0; }
.yw-parity-table tr[data-kind="own"] td { background: #f6f3fa; }
.yw-parity-table tr[data-kind="own"] td:first-child { padding-left: 8px; border-radius: 8px 0 0 8px; }
.yw-parity-table tr[data-kind="own"] td:last-child { border-radius: 0 8px 8px 0; }
.yw-parity-site { display: block; font-weight: 500; }
.yw-parity-note { display: block; margin-top: 1px; color: #a09aa4; font-size: 11px; }
.yw-parity-price { font-weight: 500; white-space: nowrap; }
.yw-parity-muted { color: #a09aa4; }
.yw-parity-vs { white-space: nowrap; }
.yw-parity-vs[data-status="under"] { color: #b84d78; font-weight: 500; }
.yw-parity-vs[data-status="above"] { color: #2f8a6d; }
.yw-parity-pct { display: block; color: #a09aa4; font-size: 11px; font-weight: 400; }
.yw-parity-status { display: inline-flex; align-items: center; gap: 6px; color: #59535f; font-size: 12px; white-space: nowrap; }
.yw-parity-status .yw-status-dot { box-shadow: none; }
.yw-parity-other { margin: 8px 0 4px; color: #87818c; font-size: 12px; line-height: 1.5; }
.yw-parity-other strong { color: #59535f; font-weight: 500; }
.yw-parity-foot { margin: 14px 0 0; padding-top: 12px; border-top: 1px solid #eae8ec; color: #929097; font-size: 12px; line-height: 1.5; }
.yw-parity-foot p { margin: 0; }
.yw-parity-foot p + p { margin-top: 4px; }

@keyframes yw-parity-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .yw-parity-running-dot { animation: none; } }

/* ---------------------------------------------------------------- phone -- */
@media (max-width: 900px) {
  .yw-parity-grid { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 520px) {
  .yw-parity .yw-card { padding: 18px; }
  .yw-parity-table { font-size: 12px; }
  .yw-parity-table td { padding-top: 8px; padding-bottom: 8px; }
  /* The word beside the dot goes; the dot and the "vs you" figure carry it. */
  .yw-parity-glance-site { grid-template-columns: minmax(0, 1fr); }
  .yw-parity-glance-gap { min-width: 0; }
  .yw-parity-glance-gap .yw-parity-status { min-width: 0; }
  .yw-parity-status-word { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
  /* The glance card has the room: its word stays. */
  .yw-parity-glance .yw-parity-status-word { position: static; width: auto; height: auto; overflow: visible; clip: auto; }
}

/* ----------------------------------------------------------------- dark -- */
[data-theme-root].dark .yw-parity .yw-card { border-color: #414148; background: #2a2a30; box-shadow: none; }
[data-theme-root].dark .yw-parity .yw-hero-value[data-tone="bad"], [data-theme-root].dark .yw-parity-stat-warn, [data-theme-root].dark .yw-parity-tone[data-tone="bad"], [data-theme-root].dark .yw-parity-vs[data-status="under"], [data-theme-root].dark .yw-parity-fix-amount[data-tone="bad"] { color: #e6a9c4; }
[data-theme-root].dark .yw-parity .yw-hero-value[data-tone="warn"], [data-theme-root].dark .yw-parity-tone[data-tone="warn"], [data-theme-root].dark .yw-parity-empty[data-tone="warn"], [data-theme-root].dark .yw-parity-fix-amount[data-tone="warn"] { color: #e6bd7f; }
[data-theme-root].dark .yw-parity-tone[data-tone="ok"], [data-theme-root].dark .yw-parity-vs[data-status="above"] { color: #7fd3b4; }
[data-theme-root].dark .yw-parity-stat-sub, [data-theme-root].dark .yw-parity-run-line, [data-theme-root].dark .yw-parity-tone, [data-theme-root].dark .yw-parity-base, [data-theme-root].dark .yw-parity-empty, [data-theme-root].dark .yw-parity-table th, [data-theme-root].dark .yw-parity-note, [data-theme-root].dark .yw-parity-muted, [data-theme-root].dark .yw-parity-pct, [data-theme-root].dark .yw-parity-other, [data-theme-root].dark .yw-parity-foot, [data-theme-root].dark .yw-parity-fix-checks, [data-theme-root].dark .yw-parity-fix-checks h4 { color: #a297ab; }
[data-theme-root].dark .yw-parity-night-head h3, [data-theme-root].dark .yw-parity-table td, [data-theme-root].dark .yw-parity-fix-panel h3 { color: #f3eef8; }
[data-theme-root].dark .yw-parity-status, [data-theme-root].dark .yw-parity-other strong, [data-theme-root].dark .yw-parity-fix-panel ol { color: #d9cfe3; }
[data-theme-root].dark .yw-parity-night, [data-theme-root].dark .yw-parity-foot, [data-theme-root].dark .yw-parity-fix-checks, [data-theme-root].dark .yw-parity-fix-links { border-top-color: #414148; }
[data-theme-root].dark .yw-parity-table td, [data-theme-root].dark .yw-parity-glance-row { border-top-color: #38383f; }
[data-theme-root].dark .yw-parity-glance-site { color: #f3eef8; }
[data-theme-root].dark .yw-parity-glance-count { color: #d9cfe3; }
[data-theme-root].dark .yw-parity-glance-row[data-status="none"] .yw-parity-site, [data-theme-root].dark .yw-parity-glance-row[data-status="none"] .yw-parity-glance-count { color: #a297ab; }
[data-theme-root].dark .yw-parity-table tr[data-kind="own"] td { background: #33303b; }
[data-theme-root].dark .yw-parity-first, [data-theme-root].dark .yw-parity-check-now, [data-theme-root].dark .yw-parity-fix-links a { color: #c5a8ff; }
[data-theme-root].dark .yw-parity-running { color: #c5a8ff; }
[data-theme-root].dark .yw-parity-running-dot { background: #c5a8ff; }
[data-theme-root].dark .yw-parity-banner { background: #493c2c; color: #e6bd7f; }
[data-theme-root].dark .yw-parity-check-now-button { border-color: #4a3f5c; color: #c5a8ff; }
[data-theme-root].dark .yw-parity-check-now-button:hover { border-color: #5c4a78; background: #35303f; }
[data-theme-root].dark .yw-parity-fix-panel { border-color: #414148; background: #2a2a30; box-shadow: 0 10px 28px rgba(0, 0, 0, .35); }
[data-theme-root].dark .yw-parity-test-decide { border-color: #4a3f5c; color: #c5a8ff; }
[data-theme-root].dark .yw-parity-test-decide:hover, [data-theme-root].dark .yw-parity-test-decide:focus-visible { border-color: #5c4a78; background: #35303f; }
[data-theme-root].dark .yw-parity-test-limit, [data-theme-root].dark .yw-ct-table th, [data-theme-root].dark .yw-ct-sub { color: #a297ab; }
[data-theme-root].dark .yw-parity-test-limit { border-top-color: #414148; }
[data-theme-root].dark .yw-ct-table td { border-top-color: #38383f; color: #f3eef8; }
[data-theme-root].dark .yw-ct-verdict[data-kind="stop_loss"] { color: #e6a9c4; }
[data-theme-root].dark .yw-ct-verdict[data-kind="switching"], [data-theme-root].dark .yw-ct-verdict[data-kind="holding"], [data-theme-root].dark .yw-ct-verdict[data-kind="kept"] { color: #7fd3b4; }
[data-theme-root].dark .yw-parity-fix-trigger { border-color: #5a3a4a; background: #4a3040; color: #e6a9c4; }
[data-theme-root].dark .yw-parity-fix-trigger[data-tone="warn"] { border-color: #5a4a33; background: #493c2c; color: #e6bd7f; }