/* Sakina — dark forest-green theme, matching the approved demo. */
:root{
/* ⚠️ Black + green, 2026-08-26 (HANDOFF §111). Pure-black ground, panels
barely lifted off it, green kept as an ACCENT (interactive, positive)
rather than washed across everything — the "professional, not
vibe-coded" brief. */
/* ⚠️ **One green, and it is the vibrant one.** `--accent` used to be a
duller green than `--green`, so the app carried two greens that read as
a mistake rather than a hierarchy. Both are the same vibrant green now
(HANDOFF §113). */
/* ⚠️ **Secondary text is white, not grey.** Every label, meta line, unit
and caption used `--muted` at #8a9c93, and he asked for them white on
screen after screen (HANDOFF §115). All 79 uses are `color:` — no
borders or fills — so raising it here whitens them everywhere at once.
Hierarchy now comes from **size and weight**, which were already doing
most of the work: 11–12px labels against 26px figures.
`--faint` keeps a genuinely recessive tone for the few places that must
stay back: input placeholders and out-of-month calendar days. */
--bg:#000000; --panel:#0b0f0d; --panel2:#121815; --line:#202723;
--text:#f1f5f2; --muted:#e9efec; --faint:#8a9c93;
--accent:#3ddc84; --green:#3ddc84;
--red:#f2726b; --yellow:#e0b45c; --purple:#a855f7; --pink:#f472b6;
/* Added 2026-08-26: category-bar colours that were referenced but never
defined, so a Rent & Utilities bar (colour "blue") and every "grid"
catch-all bar rendered with no fill (HANDOFF §109). --grid is a muted
neutral for uncategorised spend; --blue completes the palette. */
--blue:#5aa9e6; --grid:#4a5f52;
--radius:16px; --shadow:0 8px 30px rgba(0,0,0,.4);
/* ⚠️ **The status-bar insets, named once.**
`apple-mobile-web-app-status-bar-style:black-translucent` makes an
installed copy run *under* the clock and the Dynamic Island, so the top
of the page has to be pushed clear of it. `env(...)` is 0 in a browser
tab — which is why a mistake here is invisible in Safari and obvious on
the Home Screen, and exactly how the double inset below got shipped.
Named so that ONE element applies it, and so a check can set
`--safe-top` to a real value and confirm the page moves down by that
much and no more. */
--safe-top:env(safe-area-inset-top,0px);
--safe-bottom:env(safe-area-inset-bottom,0px);
}
*{box-sizing:border-box;margin:0;padding:0}
html{-webkit-text-size-adjust:100%}
body{-webkit-tap-highlight-color:transparent;overscroll-behavior-y:none;font-family:-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,Helvetica,Arial,sans-serif;
background:var(--bg);color:var(--text);display:flex;min-height:100vh;font-size:14px;
-webkit-font-smoothing:antialiased}
/* ---- Sidebar ---- */
.sidebar{overflow-y:auto;width:230px;background:var(--panel);border-right:1px solid var(--line);
padding:22px 14px;position:sticky;top:0;height:100vh;display:flex;flex-direction:column;gap:6px;
flex-shrink:0;z-index:20}
/* The brand is a menu trigger. Hover opens it on a mouse, click/tap opens it
everywhere else — a hover-only menu would be unreachable on his phone. */
.brand-wrap{position:relative;margin-bottom:6px;border-bottom:1px solid var(--line)}
.brand{display:flex;align-items:center;gap:10px;padding:0 8px 18px;width:100%;
background:none;border:none;color:inherit;font:inherit;text-align:left;cursor:pointer;
border-radius:10px}
.brand:hover h1{color:var(--green)}
/* The account chip, top right of every page. It replaces the dropdown that
used to hang off the brand: people look for their account in the corner,
not under the logo, and "Sign out" had been buried on the Settings page. */
.topbar{display:flex;justify-content:flex-end;margin:-6px 0 14px}
.account-wrap{position:relative}
.account{display:flex;align-items:center;gap:10px;padding:6px 10px 6px 6px;
background:var(--panel);border:1px solid var(--line);border-radius:999px;
color:inherit;font:inherit;cursor:pointer;transition:.15s;
/* Without this a tap on the name or address selects the text and pops the
copy/paste bar instead of opening the menu. */
-webkit-user-select:none;user-select:none;-webkit-tap-highlight-color:transparent}
.account:hover,.account[aria-expanded="true"]{border-color:var(--accent);background:var(--panel2)}
.account .avatar{width:30px;height:30px;border-radius:50%;flex-shrink:0;overflow:hidden;
background:linear-gradient(135deg,var(--accent),var(--purple));
display:flex;align-items:center;justify-content:center;
font-weight:700;font-size:13px;color:#fff;text-transform:uppercase}
/* The profile picture fills the circle. object-fit stops a non-square photo
being stretched, which is what most Google pictures are not. */
.account .avatar img{width:100%;height:100%;object-fit:cover;display:block}
.account .who{display:flex;flex-direction:column;line-height:1.25;text-align:left;min-width:0}
.account .who strong{font-size:13px;font-weight:600;
max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .who small{font-size:11px;color:var(--muted);
max-width:150px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.account .caret{font-size:9px;color:var(--muted)}
.account-menu{position:absolute;right:0;top:calc(100% + 6px);z-index:60;min-width:210px;
background:var(--panel2);border:1px solid var(--line);border-radius:12px;
padding:6px;box-shadow:0 14px 34px rgba(0,0,0,.55);display:flex;flex-direction:column;gap:2px}
.account-menu[hidden]{display:none}
/* ⚠️ 44px, not 40. This menu holds Settings, Connections and **Sign out**,
it is on every screen at every width, and it had no mobile override at
all — so the one control here you cannot undo with another click was the
undersized one. 44px is the documented minimum comfortable target. */
.account-menu button,.account-menu a{display:flex;align-items:center;gap:9px;width:100%;
min-height:44px;padding:10px 12px;border:none;border-radius:9px;background:none;
color:var(--muted);font:inherit;font-size:13px;text-align:left;cursor:pointer;
text-decoration:none}
.account-menu button:hover,.account-menu button:focus-visible,
.account-menu a:hover,.account-menu a:focus-visible{background:var(--panel);color:var(--text)}
.account-menu button.active{color:var(--green)}
.account-menu .ic{width:18px;text-align:center}
/* Sign out is the one thing here you cannot undo with another click, so it
is separated and coloured rather than sitting flush with the rest. */
.account-menu a.danger{color:var(--red);margin-top:4px;
border-top:1px solid var(--line);border-radius:0 0 9px 9px;padding-top:11px}
.account-menu a.danger:hover{background:rgba(242,114,107,.12);color:var(--red)}
/* Sign-in / sign-up gate */
/* The sign-in page is centred, so the status bar only bites when the card is
tall enough to fill the screen — but it does bite then, and somebody can
install Sakina before ever signing in. Same insets, same reason as .main. */
body.gate{display:flex;align-items:center;justify-content:center;min-height:100dvh;
padding:calc(24px + env(safe-area-inset-top)) 24px
calc(24px + env(safe-area-inset-bottom));background:var(--bg)}
.gate-card{width:100%;max-width:380px;background:var(--panel);border:1px solid var(--line);
border-radius:var(--radius);padding:32px;box-shadow:var(--shadow);text-align:center}
.gate-card.wide{max-width:460px}
.gate-logo{width:64px;height:64px;border-radius:16px;margin-bottom:14px}
.gate-card h1{font-size:22px;margin-bottom:4px}
.gate-sub{font-size:13px;color:var(--muted);margin-bottom:22px;line-height:1.6}
.gate-card .field{text-align:left}
.gate-card .opt{color:var(--muted);font-weight:400;text-transform:none;letter-spacing:0}
.gate-foot{font-size:12px;color:var(--muted);margin-top:20px;line-height:1.6}
.gate-foot a,.linkish{color:var(--green);text-decoration:underline;background:none;
border:none;padding:0;font:inherit;cursor:pointer}
.consent{display:flex;text-align:left;margin-top:18px;font-size:12px;color:var(--muted);
line-height:1.6}
.consent label{display:flex;gap:9px;align-items:flex-start;cursor:pointer}
.consent input{margin-top:2px;width:16px;height:16px;flex-shrink:0;accent-color:var(--accent)}
.policy-box{margin-top:18px;border:1px solid var(--line);border-radius:12px;
background:var(--panel2);text-align:left}
.policy-head{display:flex;justify-content:space-between;align-items:center;
padding:10px 12px;border-bottom:1px solid var(--line);font-size:13px}
.policy-tabs{display:flex;gap:6px;padding:10px 12px 0}
.policy-tabs .on{color:var(--green);border-color:var(--accent)}
.policy-box .md{max-height:340px;overflow:auto;padding:14px 16px}
/* Rendered Markdown (privacy policy, terms). These are documents someone is
actually meant to read, so they get real typography rather than a wall of
raw "##" and "**". */
.md{font-size:13px;line-height:1.7;color:var(--muted)}
.md h2{font-size:16px;color:var(--text);margin:20px 0 8px}
.md h3{font-size:14px;color:var(--text);margin:18px 0 6px}
.md h2:first-child,.md h3:first-child{margin-top:0}
.md p{margin:0 0 10px}
.md strong{color:var(--text)}
.md a{color:var(--green)}
.md code{background:var(--panel2);border-radius:5px;padding:1px 5px;font-size:12px}
.md ul,.md ol{margin:0 0 12px 18px}
.md li{margin-bottom:5px}
.md hr{border:none;border-top:1px solid var(--line);margin:18px 0}
.md blockquote{border-left:3px solid var(--accent);background:rgba(47,169,107,.08);
padding:9px 13px;border-radius:0 8px 8px 0;margin:0 0 12px}
.md-table{overflow-x:auto;margin:0 0 14px}
.md-table table{width:100%;min-width:0;border-collapse:collapse;font-size:12px}
.md-table th{text-align:left;padding:7px 9px;border-bottom:1px solid var(--line);
color:var(--muted);font-size:11px;text-transform:uppercase;letter-spacing:.5px}
.md-table td{padding:7px 9px;border-bottom:1px solid var(--line);vertical-align:top}
.md-table tr:last-child td{border-bottom:none}
/* Standalone privacy / terms page (/policy) */
/* display:block matters — the base stylesheet makes a flex row for
the sidebar layout, which turned this page's header into a full-height
column beside the text. */
body.doc-page{display:block;background:var(--bg);min-height:100dvh}
.doc-head{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;
flex-wrap:wrap;padding:14px 22px;background:rgba(6,9,8,.92);
-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);
border-bottom:1px solid var(--line)}
.doc-brand{display:flex;align-items:center;gap:9px;color:var(--text);
text-decoration:none;font-weight:700;font-size:15px}
.doc-brand img{width:26px;height:26px;border-radius:7px}
.doc-tabs{display:flex;gap:6px;margin-left:auto}
.doc-tabs .on{color:var(--green);border-color:var(--accent)}
.doc-body{max-width:760px;margin:0 auto;padding:30px 22px 70px}
.doc-body .md{font-size:14px}
@media(max-width:560px){
.doc-tabs{margin-left:0;width:100%;order:3}
.doc-body{padding:22px 16px 50px}
}
/* Connections page */
.conn{display:flex;gap:14px;align-items:flex-start;padding:16px;margin-bottom:12px;
background:var(--panel);border:1px solid var(--line);border-radius:16px}
.conn .dot{width:10px;height:10px;border-radius:50%;flex-shrink:0;margin-top:5px}
.conn .body{flex:1;min-width:0}
.conn h4{font-size:15px;margin-bottom:2px}
.conn .what{font-size:12px;color:var(--muted);margin-bottom:8px}
.conn .how{font-size:12px;color:var(--muted);line-height:1.6;overflow-wrap:anywhere}
.conn .acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:10px}
.conn code{background:var(--panel2);border-radius:5px;padding:1px 5px;font-size:11px}
/* ⚠️ **Dark glyph on the green tile.** The mark inherited near-white text,
which was fine on the old dull-green gradient and washed out to invisible
once --accent became the vibrant green — the logo looked gone. The
gradient also ran green→purple after --purple stopped being a green, so
it is green→deep-green now. HANDOFF §114. */
.brand .logo{width:34px;height:34px;border-radius:9px;
background:linear-gradient(135deg,var(--green),#128a4e);color:#04140b;
display:flex;align-items:center;justify-content:center;font-weight:800;font-size:16px;flex-shrink:0}
.brand h1{font-size:16px;font-weight:700;letter-spacing:.3px}
.nav{display:flex;flex-direction:column;gap:2px;margin-top:8px}
.nav button{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:10px;color:var(--muted);
text-decoration:none;font-weight:500;cursor:pointer;transition:.15s;background:none;border:none;
font-size:14px;font-family:inherit;text-align:left;width:100%}
.nav button:hover{background:var(--panel2);color:var(--text)}
.nav button.active{background:linear-gradient(135deg,rgba(47,169,107,.22),rgba(31,143,106,.12));color:var(--text)}
.nav button .ic{width:20px;text-align:center;font-size:15px;flex-shrink:0}
.side-foot{margin-top:auto;padding:12px 8px 0;border-top:1px solid var(--line);font-size:11px;color:var(--muted)}
/* ---- Main ---- */
.main{flex:1;padding:26px 34px;max-width:1250px;min-width:0}
.page{display:none;animation:fade .25s ease}
.page.active{display:block}
@keyframes fade{from{opacity:0;transform:translateY(6px)}to{opacity:1;transform:none}}
.page-head{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:22px;gap:16px;flex-wrap:wrap}
.page-head h2{font-size:24px;font-weight:700}
.page-head p{color:var(--muted);font-size:13px;margin-top:3px}
.today{color:var(--text);font-size:12px;text-align:right;white-space:nowrap}
/* ---- Grid & cards ---- */
.grid{display:grid;gap:16px}
.g2{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(3,1fr)}
.g4{grid-template-columns:repeat(4,1fr)}
.card{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);padding:18px;
box-shadow:var(--shadow);min-width:0}
.card h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text);margin-bottom:12px;
font-weight:600;display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.big{font-size:30px;font-weight:750;letter-spacing:-.5px}
.sub{font-size:12px;color:var(--muted);margin-top:4px}
.up{color:var(--green)} .down{color:var(--red)}
.pill{display:inline-block;padding:3px 9px;border-radius:20px;font-size:11px;font-weight:600;white-space:nowrap}
.pill.g{background:rgba(70,208,137,.15);color:var(--green)}
.pill.r{background:rgba(242,114,107,.15);color:var(--red)}
.pill.y{background:rgba(224,180,92,.15);color:var(--yellow)}
.pill.n{background:var(--panel2);color:var(--muted)}
/* ⚠️ **Both of these are gone at EVERY width, 2026-09-03, on his
instruction**, and both were already hidden on the phone — the rules used
to live in the 820px block and have been lifted out, because a rule that
applies on both sides of the breakpoint does not belong inside a width
query.
· `#fnCreditAccounts` — the card list at the top of Spending. ⚠️ With
Overview's "What you owe" gone as well, **no page lists the individual
cards any more**. "Owed on cards" on Overview is what is left of them,
and it is a total. That is his call, but it is worth knowing it is the
last one rather than one of several.
· `.rec-head` / `.rec-list` — "Regular payments" under the calendar.
Hidden, not deleted: the markup is shared and `renderRecurringList` and
`accountRows` still fill them, so putting either back is deleting a line.
⚠️ `.rec-head` is still styled as an eyebrow further down; that rule is
typography for an element that is not shown, not a contradiction. */
#page-finances #fnCreditAccounts,
#page-finances .rec-head,
#page-finances .rec-list{display:none}
/* ---- Bank and Brokerage: off the switcher, 2026-09-03 ----------------
⚠️ **The tab BUTTONS go, and that is enough.** `setFinanceView` starts on
Overview and marks every other panel `hidden`, so a panel with no button
is unreachable — nothing needs removing from that function's list, and
leaving it there means putting a tab back is deleting a selector.
**Bank** — his instruction.
**Brokerage** — his instruction *conditionally*: hide it if the total
gain/loss is not pulled directly from the brokerage. It is not, twice
over. Sakina computes it (`value − cost basis`, `_shape_holdings`), and
for his accounts Plaid returns **no holdings at all** — `available:false`,
zero positions, no cost basis — so the card could only ever have shown
"—". Checked against the live account before hiding it, not assumed.
⚠️ The arithmetic was ALSO wrong and is fixed in the same change (§152):
it subtracted the cost of *some* positions from the value of *all* of
them. The fix matters even with the section hidden, because Home's
portfolio tile and Overview's Investments figure come from the same
shape, and a brokerage that starts reporting holdings would have started
reporting a fiction. */
#page-finances .fin-switch button[data-fin="bank"],
#page-finances .fin-switch button[data-fin="brokerage"]{display:none}
/* source badge — says where a number came from.
⚠️ **HIDDEN EVERYWHERE, 2026-09-03, on his instruction** — desktop first,
then the phone. It removes a signal, so why that is safe: a badge only
ever says "sample" when a source is not connected, and the banner at the
top of the page appears in exactly that case, names the sources outright
and links to Connections. The warning is still on screen; it is just not
said twice. (This was already the phone's own reasoning for hiding the
badge on Home's cards — that rule is gone now, subsumed by this one.)
⚠️ It is a real control, so `display:none` and not `visibility` /
`opacity`: those would leave a focusable, screen-reader-visible button
that nobody can see. Everything below still styles it, so putting the
badges back is deleting one line. */
.src{display:none}
.src{font-size:10px;font-weight:600;padding:2px 7px;border-radius:6px;letter-spacing:.3px;
text-transform:uppercase;margin-left:auto;white-space:nowrap}
.src.live{background:rgba(70,208,137,.15);color:var(--green)}
.src.sample{background:rgba(224,180,92,.14);color:var(--yellow)}
/* ⚠️ It is a real control now, not a label with a tooltip. `cursor:help`
promised an explanation that a phone could never show, and 10px with 2px
of padding is not something you can reliably hit. The sample one is the
important one - it is the difference between his money and an example -
so it gets a dotted underline saying "there is more here". */
.src{cursor:pointer;border:1px solid transparent}
.src.sample{text-decoration:underline dotted;text-underline-offset:2px}
.src:focus-visible{outline:2px solid var(--green);outline-offset:2px}
@media(hover:none){
/* A comfortable tap target without making the badge look like a button
in the middle of a heading: the padding grows, the type does not. */
.src{padding:8px 10px;font-size:11px}
}
/* readiness ring */
.ring-wrap{display:flex;align-items:center;gap:20px;flex-wrap:wrap}
.ring{position:relative;width:120px;height:120px;flex-shrink:0}
.ring svg{transform:rotate(-90deg)}
.ring .val{position:absolute;inset:0;display:flex;flex-direction:column;align-items:center;justify-content:center}
.ring .val b{font-size:30px;font-weight:750}
.ring .val small{font-size:10px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px}
/* Compact Home tiles — four cards to one screen (HANDOFF §111). Equal, tidy,
the ring centred with no side metrics. */
.home-cards{margin-top:16px}
.home-tile{display:flex;flex-direction:column}
.home-tile .list{margin-top:2px}
.ring-solo{justify-content:center;gap:0;padding:6px 0 2px}
.home-brk-today{margin-top:2px}
.metric-row{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);
font-size:13px;gap:12px}
.metric-row:last-child{border:none}
.metric-row .m{color:var(--text)}
/* credit card */
.cc{background:linear-gradient(135deg,#0f3a2a,#1c5a40 55%,#0d4636);border-radius:16px;padding:20px;
position:relative;overflow:hidden;min-height:170px;display:flex;flex-direction:column;justify-content:space-between}
.cc:before{content:"";position:absolute;width:180px;height:180px;background:rgba(255,255,255,.06);
border-radius:50%;top:-60px;right:-40px}
.cc .brand-row{display:flex;justify-content:space-between;align-items:center;position:relative}
.cc .chip{width:36px;height:26px;border-radius:6px;background:linear-gradient(135deg,#e6c86e,#b8963f)}
.cc .num{font-size:17px;letter-spacing:2px;margin:16px 0 4px;white-space:nowrap;
font-family:ui-monospace,SFMono-Regular,Menlo,monospace}
.cc .row2{display:flex;justify-content:space-between;align-items:flex-end;gap:12px}
.cc .bal{font-size:24px;font-weight:750}
.cc small{font-size:10px;color:rgba(255,255,255,.6);text-transform:uppercase;letter-spacing:.5px}
/* lists */
.list .item{display:flex;justify-content:space-between;align-items:center;padding:10px 0;
border-bottom:1px solid var(--line);gap:12px}
.list .item:last-child{border:none}
.list .left{display:flex;align-items:center;gap:11px;min-width:0}
.list .ic-box{width:34px;height:34px;border-radius:9px;background:var(--panel2);display:flex;
align-items:center;justify-content:center;font-size:15px;flex-shrink:0}
.list .name{font-weight:600;overflow-wrap:anywhere}
.list .meta{font-size:11px;color:var(--muted);margin-top:2px}
.amt{font-weight:650;white-space:nowrap}
/* tables */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch}
table{width:100%;border-collapse:collapse;min-width:440px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);
padding:8px 6px;border-bottom:1px solid var(--line);white-space:nowrap}
td{padding:11px 6px;border-bottom:1px solid var(--line);font-size:13px}
tr:last-child td{border:none}
.num-col{text-align:right;white-space:nowrap}
/* A dash where a number would be: "not known", not "zero". */
.muted{color:var(--muted);cursor:help}
/* A number you typed over the live one. Marked so a stale hand-typed
figure can never sit under a LIVE badge pretending to be real. */
/* Below 480px a 4-7 column table can't fit without side-scrolling even
with .table-wrap, so the least essential column drops instead of the
whole table scrolling sideways. Each table marks its own droppable
column(s) with .col-drop on both the | and its matching | s. */
@media(max-width:480px){
table{min-width:0}
.col-drop{display:none}
}
.muted-cell{color:var(--muted)}
.hold-sub{display:block;font-size:11px;color:var(--muted);margin-top:2px}
.tag{font-size:10px;padding:2px 7px;border-radius:6px;background:var(--panel2);color:var(--muted);
display:inline-block;white-space:nowrap}
/* progress bars */
.bar{height:8px;background:var(--panel2);border-radius:6px;overflow:hidden;margin-top:6px}
.bar>span{display:block;height:100%;border-radius:6px;transition:width .4s ease}
.budg-row{margin-bottom:14px}
.budg-row:last-child{margin-bottom:0}
.budg-row .top{display:flex;justify-content:space-between;font-size:13px;margin-bottom:2px;gap:10px}
/* tiles */
.tile{background:var(--panel);border:1px solid var(--line);border-radius:14px;overflow:hidden;
cursor:pointer;transition:.15s;text-align:left;padding:0;font-family:inherit;color:inherit;
display:flex;flex-direction:column}
.tile:hover,.tile:focus-visible{transform:translateY(-3px);border-color:var(--accent);outline:none}
.tile.static{cursor:default}
.tile.static:hover{transform:none;border-color:var(--line)}
/* A place tile is a link to Google Maps, so it lifts and points like one. */
.tile.link{cursor:pointer;text-decoration:none}
.tile.link:hover,.tile.link:focus-visible{transform:translateY(-3px);border-color:var(--accent)}
.tile.link:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.tile h4 .go{float:right;color:var(--muted);font-size:12px;font-weight:400;margin-left:6px}
.tile.link:hover h4 .go{color:var(--green)}
.tile .thumb{height:96px;display:flex;align-items:center;justify-content:center;font-size:38px;flex-shrink:0}
.tile .body{padding:13px;display:flex;flex-direction:column;flex:1}
.tile h4{font-size:14px;margin-bottom:5px}
.tile .row{display:flex;justify-content:space-between;align-items:center;margin-top:auto;padding-top:8px;
font-size:12px;color:var(--muted);gap:8px}
.cost{color:var(--green);font-weight:700;font-size:15px;white-space:nowrap}
.stars{color:var(--yellow);font-size:12px}
.why{font-size:11px;color:var(--muted);margin-top:6px;line-height:1.45;border-left:2px solid var(--accent);
padding-left:8px}
/* Saved Google Maps places — each row opens the place in Maps */
.saved-link{text-decoration:none;color:inherit;border-radius:10px;
transition:background .15s}
.saved-link:hover,.saved-link:focus-visible{background:var(--panel2);outline:none}
.saved-link .go{color:var(--muted);font-size:12px;align-self:center}
.saved-link:hover .go{color:var(--green)}
/* Canvas deep links — themed, not the browser's default blue */
.assign-link{color:var(--text);text-decoration:none;border-bottom:1px solid transparent}
.assign-link:hover,.assign-link:focus-visible{color:var(--green);border-bottom-color:var(--green)}
.assign-link .go{color:var(--muted);font-size:11px}
.assign-link:hover .go{color:var(--green)}
/* Options analyzer — one block per position, legs folded away underneath */
.pos{border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:12px;
background:var(--panel2)}
.pos-head{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;
flex-wrap:wrap;font-size:13px}
.pos-sym{font-weight:700;font-size:15px}
.pos-pl{font-weight:700;font-size:16px;white-space:nowrap}
.pos-money{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:12px}
.mcell{display:flex;flex-direction:column;gap:2px}
.mcell span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.mcell b{font-size:13px;white-space:nowrap}
.greeks{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}
.greek{display:flex;flex-direction:column;gap:1px;background:var(--panel);
border:1px solid var(--line);border-radius:9px;padding:6px 10px;cursor:help}
.greek span{font-size:10px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted)}
.greek b{font-size:13px;white-space:nowrap}
.pos-more{margin-top:12px;border-top:1px solid var(--line);padding-top:10px}
.pos-more summary{cursor:pointer;font-size:12px;color:var(--muted);font-weight:600}
.pos-more summary:hover{color:var(--green)}
.leg{display:flex;justify-content:space-between;gap:12px;flex-wrap:wrap;
padding:9px 0;border-bottom:1px solid var(--line)}
.leg:last-child{border:none}
.leg-name{font-size:12px;font-weight:600}
.leg-nums{display:flex;gap:14px;flex-wrap:wrap;font-size:11px;color:var(--muted)}
.facts{margin-top:10px;margin-bottom:14px}
.facts .sub{margin-bottom:8px}
table.ladder{font-size:12px}
table.ladder th{font-weight:600;font-size:10px;text-transform:uppercase;letter-spacing:.05em}
table.ladder tr.now{background:rgba(47,169,107,.1)}
.facts h5{font-size:11px;text-transform:uppercase;letter-spacing:.06em;color:var(--muted);
margin-bottom:6px}
.facts ul{margin:0;padding-left:18px}
.facts li{font-size:12px;line-height:1.65;color:var(--text)}
@media(max-width:640px){.pos-money{grid-template-columns:repeat(2,1fr)}}
/* Account switcher — one tab per account, kept separate on purpose */
.acct-switch{display:flex;gap:10px;margin-bottom:16px;overflow-x:auto;padding-bottom:2px;
-webkit-overflow-scrolling:touch}
.acct-switch:empty{display:none}
.acct{flex:0 0 auto;display:flex;flex-direction:column;gap:2px;text-align:left;cursor:pointer;
background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px;
color:var(--muted);font:inherit;transition:border-color .15s,color .15s,background .15s}
.acct:hover{border-color:var(--accent);color:var(--text)}
.acct.on{background:var(--panel2);border-color:var(--accent);color:var(--text)}
.acct-name{font-size:12px;font-weight:600}
.acct-val{font-size:15px;font-weight:700;color:var(--text)}
.acct .acct-val{color:inherit}
.acct.on .acct-val{color:var(--green)}
/* Finances — the switch top left of the page. A segmented control rather
than the .acct cards below it: those carry a value each, these are just
four names, and giving them the same weight made the page read as two
competing tab bars. 44px min height so it is a comfortable phone target. */
/* ⚠️ Underline tabs, not boxes (HANDOFF §111): all five share the row with
flex:1 so nothing scrolls off the edge, text is white, and the active tab
is marked by a vibrant green line beneath it. */
.fin-switch{display:flex;gap:2px;margin-bottom:18px;border-bottom:1px solid var(--line)}
.fin-switch button{flex:1 1 0;min-width:0;cursor:pointer;background:none;border:none;
border-bottom:2px solid transparent;margin-bottom:-1px;padding:12px 4px;min-height:44px;
color:var(--muted);font:inherit;font-size:13px;font-weight:600;white-space:nowrap;
transition:color .15s,border-color .15s}
.fin-switch button:hover{color:var(--text)}
.fin-switch button.active{color:var(--text);border-bottom-color:var(--green)}
.fin-switch button:focus-visible{outline:2px solid var(--green);outline-offset:-2px;border-radius:4px}
/* On a phone the four labels do not fit at full size, so Bank fell off the
right edge behind a scroll. Measured at 375x812: tightening the padding
and type fits all four, which matters because a control you have to
discover by scrolling is one most people never find. */
@media(max-width:560px){
.fin-switch button{padding:11px 3px;font-size:12px}
}
/* ⚠️ **The tablet gap.** The 44px overrides live at max-width:760px, but the
mobile shell — bottom tab bar and sheet — starts at 820px. Between 761px
and 820px, which includes an iPad mini in portrait at exactly 768px, the
touch layout was active while every small control was still mouse-sized:
Refresh data, Disconnect, the meal remove button, Sign out, Delete my
account. Any pointer without hover gets the comfortable sizes regardless
of width, which is the real question rather than the screen size. */
@media(hover:none),(max-width:820px){
.btn.tiny{min-height:44px;padding:8px 14px;font-size:12px}
.modal .close{width:44px;height:44px}
.account-menu button,.account-menu a{min-height:46px}
}
/* The sign-up consent rows are where he agrees to the age gate and the
privacy policy, and they were roughly 19px tall. The nested "how my data
is handled" button had no padding of its own, so it was a tiny target
inside a larger one. */
.consent label{min-height:44px;padding:6px 0;line-height:1.5}
.consent input[type=checkbox]{width:20px;height:20px;flex-shrink:0}
.consent .linkish{min-height:44px;padding:0 2px}
@media(max-width:359px){
.fin-switch button{padding:11px 2px;font-size:11px}
}
/* Age confirmation on first sign-in. Deliberately looks like part of the
sign-in card rather than a dismissible interstitial - it is a condition
of creating the account, not a notice. */
.age-gate{margin-top:14px;padding:14px;border:1px solid var(--line);
border-radius:12px;background:var(--panel2);text-align:left}
.age-gate .age-q{font-size:13px;color:var(--muted);margin:0 0 10px}
.age-gate .age-row{display:flex;gap:10px;align-items:center;font-size:14px;
cursor:pointer;margin-bottom:12px}
.age-gate .age-row input{width:18px;height:18px;accent-color:var(--accent);
flex-shrink:0;cursor:pointer}
.age-gate .btn{width:100%;min-height:44px}
.age-gate .btn:disabled{opacity:.5;cursor:not-allowed}
/* Finances — the Overview headline. One number that matters, then the parts
that explain it. The previous version was three equal stat cards over two
near-identical stacked lists: four blocks of the same visual weight, so
nothing led, and a lot of empty page below them. */
.networth{background:linear-gradient(160deg,var(--panel2),var(--panel));
border:1px solid var(--line);border-radius:16px;padding:22px 24px}
.nw-head{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.nw-label{font-size:11px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
color:var(--muted)}
.nw-when{font-size:11px;color:var(--muted)}
.nw-value{font-size:44px;font-weight:800;letter-spacing:-.02em;line-height:1.1;
margin-top:6px;color:var(--text)}
.nw-sub{font-size:12px;color:var(--muted);margin-top:2px}
.nw-bar{margin-top:18px;display:flex;flex-direction:column;gap:6px}
.nw-track{display:flex;height:12px;border-radius:7px;overflow:hidden;
background:var(--panel);border:1px solid var(--line)}
.nw-track .seg{display:block;height:100%}
.nw-track .seg.cash{background:var(--green)}
.nw-track .seg.inv{background:var(--yellow)}
.nw-track .seg.owed{background:var(--red)}
/* Owed sits on its own track, indented, so it reads as "against" the assets
above rather than as another slice of them. */
.owed-track{width:100%;background:transparent;border-color:transparent}
.nw-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;
color:var(--text)}
.nw-key-item{display:inline-flex;align-items:center;gap:6px}
.nw-key-item b{color:var(--text);font-weight:600}
.nw-key .dot{width:9px;height:9px;border-radius:3px;display:inline-block}
.nw-key .dot.cash{background:var(--green)}
.nw-key .dot.inv{background:var(--yellow)}
/* Investments figure amber too, so the card matches its bar segment and
reads as clearly not-cash at a glance. */
.big.inv-fig{color:var(--yellow)}
.nw-key .dot.owed{background:var(--red)}
/* The three Overview stats fall to two columns on a phone, which leaves the
third stranded beside a gap. Let it span the row so the block reads as
finished rather than as a layout that ran out. Measured at 375x812. */
@media(max-width:760px){
#fin-overview .grid.g3.stats > .card:last-child{grid-column:1 / -1}
}
@media(max-width:560px){
.networth{padding:18px 16px}
.nw-value{font-size:34px}
.nw-key{gap:10px}
}
/* Health — stress. The balance between recovery and stress is the answer,
so it gets the large number; the raw minutes sit in the key beneath. */
.stress-card{background:linear-gradient(160deg,var(--panel2),var(--panel))}
.stress-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}
.stress-label{font-size:20px;font-weight:700;color:var(--text);margin-top:4px}
.stress-share{text-align:right;flex-shrink:0}
.stress-share .big{font-size:32px;line-height:1.1;color:var(--green)}
.stress-bar{margin-top:16px}
.stress-track{display:flex;height:12px;border-radius:7px;overflow:hidden;
background:var(--panel);border:1px solid var(--line)}
.stress-track .seg{display:block;height:100%}
.stress-track .seg.rec{background:var(--green)}
.stress-track .seg.str{background:var(--red)}
.stress-key{display:flex;flex-wrap:wrap;gap:14px;margin-top:12px;font-size:12px;
color:var(--muted)}
.stress-key .dot.rec{background:var(--green)}
.stress-key .dot.str{background:var(--red)}
/* Resilience is an ordered set of five categories, not a measurement, so it
is drawn as steps. A percentage bar would invent precision Oura does not
report. */
.res-scale{display:flex;gap:6px;margin-top:6px}
.res-step{flex:1;height:10px;border-radius:5px;background:var(--panel2);
border:1px solid var(--line)}
.res-step.on{background:var(--accent);border-color:var(--accent)}
.res-level{margin-top:10px;font-size:20px;font-weight:700;color:var(--text)}
@media(max-width:560px){
/* The share number and the label collide below about 420px, so the head
stacks. Measured at 375x812. */
.stress-head{flex-direction:column;gap:6px}
.stress-share{text-align:left}
.stress-share .big{font-size:28px}
.stress-key{gap:10px}
.res-scale{gap:4px}
}
/* The signed-out gate. Covers everything on purpose: a dashboard still
showing yesterday's balances behind a dismissable notice is worse than one
that plainly says it is stale. Sessions are one day, so this is a daily
screen, not an error screen - it is styled to look ordinary rather than
alarming. */
.session-gate{position:fixed;inset:0;z-index:200;display:flex;align-items:center;
justify-content:center;padding:24px;background:rgba(4,6,5,.94);
-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px)}
.session-gate[hidden]{display:none}
.session-card{width:100%;max-width:360px;text-align:center;background:var(--panel);
border:1px solid var(--line);border-radius:18px;padding:32px 26px}
/* The real mark rather than the letter, since this is the one screen whose
whole job is to be reassuring rather than functional. */
.session-card .logo-wrap{position:relative;width:64px;height:64px;margin:0 auto 16px}
.session-card .logo-img{width:64px;height:64px;border-radius:18px;display:block}
/* A small green dot on the corner of the mark, only when it is an update.
It borrows the language people already know from app stores, which does
more than a sentence would to say "new version, not a problem". Animated
once on arrival, then still - a pulsing dot on a screen you see after
every release becomes irritating fast. */
.update-dot{display:none;position:absolute;top:-4px;right:-4px;width:18px;height:18px;
border-radius:50%;background:var(--green);border:3px solid var(--panel);
animation:dot-pop .45s ease-out}
.session-gate.is-update .update-dot{display:block}
@keyframes dot-pop{
0%{transform:scale(.2);opacity:0}
70%{transform:scale(1.15);opacity:1}
100%{transform:scale(1);opacity:1}
}
@media(prefers-reduced-motion:reduce){
.update-dot{animation:none}
.session-card{animation:none}
}
/* The card itself eases in. Without it the panel appears as an abrupt cut
over whatever he was reading, which reads as an error even when the words
do not. */
.session-card{animation:gate-in .28s ease-out}
@keyframes gate-in{
from{opacity:0;transform:translateY(10px) scale(.98)}
to{opacity:1;transform:none}
}
.session-card h2{margin:0 0 8px;font-size:20px}
.session-card p{margin:0 0 20px;color:var(--muted);font-size:14px;line-height:1.5}
.session-card .btn{display:block;width:100%;min-height:48px;line-height:48px;
padding:0;text-decoration:none}
@media(max-width:560px){
/* Clear of the bottom tab bar and the phone's home indicator. */
.session-gate{padding:20px 16px calc(20px + env(safe-area-inset-bottom))}
.session-card{padding:26px 20px}
}
/* calendar / email */
.cal-item{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.cal-item:last-child{border:none}
.cal-time{font-size:12px;color:var(--muted);width:74px;flex-shrink:0;font-weight:600}
.cal-bar{width:3px;border-radius:3px;flex-shrink:0;align-self:stretch;min-height:30px}
.cal-body .t{font-weight:600;font-size:13px}
.cal-body .d{font-size:11px;color:var(--muted);margin-top:2px}
.mail{display:flex;gap:12px;padding:11px 0;border-bottom:1px solid var(--line);align-items:flex-start}
.mail:last-child{border:none}
.mail .dot{width:8px;height:8px;border-radius:50%;margin-top:5px;flex-shrink:0}
.mail .from{font-weight:600;font-size:13px}
.mail .subj{font-size:12px;color:var(--muted);margin-top:2px;overflow-wrap:anywhere}
.mail .when{font-size:11px;color:var(--muted);margin-left:auto;flex-shrink:0;padding-left:8px}
/* Flat sections — a heading with a hairline under it, no card frame.
Used on Priorities (HANDOFF §114) where stacked boxes read as clutter. */
/* Placeholders must stay clearly dimmer than a real value, now that
secondary text is white — otherwise a hint reads as an entry. */
input::placeholder,textarea::placeholder{color:var(--faint);opacity:1}
/* Days outside the shown month stay recessive. */
.cal-d.out .cal-n{color:var(--faint)}
.budg-click{cursor:pointer;border-radius:8px;transition:background .15s}
.budg-click:hover{background:var(--panel2)}
.budg-click:focus-visible{outline:2px solid var(--green);outline-offset:2px}
.deadline-card .dl-top{display:flex;align-items:center;gap:10px;flex-wrap:wrap}
.deadline-card .dl-title{margin-top:6px;font-size:13px;font-weight:600;color:var(--text);
line-height:1.4}
.flow{display:grid;grid-template-columns:repeat(2,1fr);gap:26px}
.flow-sec h3{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--text);
font-weight:700;padding-bottom:9px;margin-bottom:6px;border-bottom:1px solid var(--line)}
@media(max-width:900px){.flow{grid-template-columns:1fr;gap:22px}}
.section-title{font-size:13px;font-weight:700;color:var(--text);margin:26px 0 12px;
text-transform:uppercase;letter-spacing:.5px}
.banner{background:linear-gradient(135deg,rgba(47,169,107,.16),rgba(31,143,106,.08));border:1px solid var(--line);
border-radius:12px;padding:11px 16px;font-size:12px;color:var(--muted);margin-bottom:20px;
display:flex;gap:10px;align-items:center;line-height:1.5}
.banner.warn{background:linear-gradient(135deg,rgba(224,180,92,.14),rgba(224,180,92,.05))}
.banner a{color:var(--green)}
/* display:flex above would otherwise beat the browser's [hidden] rule and
leave an empty coloured bar on the page. */
.banner[hidden]{display:none}
/* prayer strip */
/* Same black card as everything else — no green tint, no boxes round the
times. Name white, time gray, the next prayer marked by a thin accent
underline rather than a filled box (HANDOFF §111). */
.prayer{background:var(--panel);border:1px solid var(--line);border-radius:var(--radius);
padding:16px 20px;margin-bottom:18px;display:flex;align-items:center;gap:22px;flex-wrap:wrap;box-shadow:var(--shadow)}
.prayer .next{flex-shrink:0}
.prayer .next .lbl{font-size:11px;text-transform:uppercase;letter-spacing:.6px;color:var(--green);font-weight:600}
.prayer .next .name{font-size:22px;font-weight:750;margin:2px 0}
.prayer .next .count{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.prayer .times{display:flex;gap:16px;flex:1;flex-wrap:wrap;justify-content:flex-end}
.prayer .p{text-align:center;padding:2px 2px 6px;min-width:56px;
border-bottom:2px solid transparent}
.prayer .p.on{border-bottom-color:var(--accent)}
.prayer .p.past{opacity:.4}
.prayer .p .pn{font-size:11px;color:var(--text);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.prayer .p .pt{font-size:15px;font-weight:600;margin-top:3px;color:var(--muted)}
.prayer .loc{font-size:11px;color:var(--muted);width:100%;margin-top:4px;display:flex;gap:10px;
align-items:center;flex-wrap:wrap}
.prayer .loc button{background:var(--panel2);border:1px solid var(--line);color:var(--muted);
border-radius:7px;padding:3px 9px;font-size:11px;cursor:pointer;font-family:inherit}
.prayer .loc button:hover{color:var(--text);border-color:var(--accent)}
.prayer select{background:var(--panel2);border:1px solid var(--line);color:var(--muted);border-radius:7px;
padding:3px 6px;font-size:11px;font-family:inherit}
/* modal */
.modal-bg{position:fixed;inset:0;background:rgba(0,0,0,.68);display:none;align-items:center;
justify-content:center;z-index:50;padding:20px}
.modal-bg.open{display:flex}
.modal{background:var(--panel);border:1px solid var(--line);border-radius:18px;max-width:640px;width:100%;
max-height:86vh;overflow-y:auto;padding:26px;box-shadow:0 20px 60px rgba(0,0,0,.6);animation:fade .2s ease}
/* The page behind the modal shouldn't scroll while it's open — was
missing entirely before, on any screen size. */
body.modal-open{overflow:hidden}
.modal .m-head{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:6px;gap:12px}
.modal h2{font-size:21px}
.modal .close{background:var(--panel2);border:none;color:var(--muted);width:32px;height:32px;border-radius:9px;
font-size:16px;cursor:pointer;flex-shrink:0}
.modal .close:hover{color:var(--text)}
.modal .why-box{background:rgba(47,169,107,.1);border:1px solid var(--line);border-radius:10px;
padding:10px 14px;font-size:12px;color:var(--muted);margin:12px 0;line-height:1.55}
.modal .facts{display:flex;gap:8px;flex-wrap:wrap;margin:10px 0 4px}
.modal h5{font-size:12px;text-transform:uppercase;letter-spacing:.6px;color:var(--muted);margin:18px 0 8px}
.shop{list-style:none}
.shop li{display:flex;justify-content:space-between;padding:7px 0;border-bottom:1px solid var(--line);
font-size:13px;gap:12px}
.shop li:last-child{border:none}
.shop .have{color:var(--muted);font-style:italic;white-space:nowrap}
.steps{list-style:none;counter-reset:st}
.steps li{counter-increment:st;display:flex;gap:12px;padding:8px 0;font-size:13px;line-height:1.55}
.steps li:before{content:counter(st);flex-shrink:0;width:24px;height:24px;border-radius:50%;
background:var(--panel2);color:var(--accent);font-weight:700;font-size:12px;display:flex;
align-items:center;justify-content:center}
.shop-total{display:flex;justify-content:space-between;font-weight:700;padding-top:10px;margin-top:4px;
border-top:1px solid var(--line);gap:12px}
/* forms */
.form-row{display:flex;gap:10px;flex-wrap:wrap;align-items:flex-end;margin-bottom:12px}
.field{display:flex;flex-direction:column;gap:5px;flex:1;min-width:110px}
.field label{font-size:11px;color:var(--muted);text-transform:uppercase;letter-spacing:.5px;font-weight:600}
.field input,.field select{background:var(--panel2);border:1px solid var(--line);color:var(--text);
border-radius:9px;padding:9px 11px;font-size:13px;font-family:inherit;width:100%}
.field input:focus,.field select:focus{outline:none;border-color:var(--accent)}
.btn{background:var(--accent);color:#04150d;border:none;border-radius:9px;padding:10px 18px;
font-weight:700;font-size:13px;cursor:pointer;font-family:inherit;white-space:nowrap}
.btn:hover{background:var(--green)}
.btn.ghost{background:var(--panel2);color:var(--muted);border:1px solid var(--line)}
.btn.ghost:hover{color:var(--text);border-color:var(--accent);background:var(--panel2)}
.btn.tiny{padding:4px 9px;font-size:11px;font-weight:600}
/* A warning that has to be read before it can be agreed to. Amber rather
than red: it is a consequence to understand, not an error. */
.warn-box{background:rgba(224,180,92,.10);border:1px solid rgba(224,180,92,.35);
border-radius:12px;padding:12px 14px;margin-bottom:20px;text-align:left;
font-size:12.5px;line-height:1.65;color:var(--muted)}
.warn-box strong{color:var(--yellow)}
/* Recent account activity. A quiet two-column ledger: what happened, and
when. The event and its time belong on one line — stacked, they read as
twice as many entries as there really are. */
.hist-row{display:flex;justify-content:space-between;align-items:baseline;gap:16px;
padding:9px 0;border-bottom:1px solid var(--line);font-size:13px}
.hist-row:last-child{border-bottom:none}
.hist-what{color:var(--text);min-width:0;overflow-wrap:anywhere}
.hist-when{color:var(--muted);font-size:11.5px;font-variant-numeric:tabular-nums;
white-space:nowrap;flex-shrink:0}
/* A failed sign-in is the one entry worth spotting at a glance. */
.hist-row.bad .hist-what{color:var(--yellow)}
/* A one-line explanation under a field that needs one. */
.field-hint{font-size:11.5px;color:var(--muted);line-height:1.5;margin-top:2px}
/* The numbered "how to do this" steps in the connect box. */
.conn-steps{margin:0 0 14px 18px;padding:0;font-size:13px;color:var(--muted);line-height:1.7}
.conn-steps li{margin-bottom:3px}
.form-msg{font-size:12px;margin-top:6px;min-height:16px}
.form-msg.ok{color:var(--green)}
.form-msg.bad{color:var(--red)}
/* misc */
.loading{padding:60px 0;text-align:center;color:var(--muted);font-size:13px}
.chart-host{width:100%;overflow:hidden}
.spinner{display:inline-block;width:14px;height:14px;border:2px solid var(--line);
border-top-color:var(--accent);border-radius:50%;animation:spin .7s linear infinite;vertical-align:-2px}
@keyframes spin{to{transform:rotate(360deg)}}
.empty{color:var(--muted);font-size:13px;padding:14px 0;text-align:center}
/* Each institution linked under one connection card. Rows rather than a
comma list, because each one needs its own Disconnect beside it. */
.conn .linked{list-style:none;margin:9px 0 0;padding:0;display:flex;
flex-direction:column;gap:6px}
.conn .linked li{display:flex;align-items:center;justify-content:space-between;
gap:10px;background:var(--panel2);border:1px solid var(--line);
border-radius:9px;padding:7px 10px;font-size:13px}
.conn .linked li span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.conn .linked li .btn{flex-shrink:0}
.toast{position:fixed;bottom:22px;left:50%;transform:translateX(-50%);background:var(--panel2);
border:1px solid var(--accent);color:var(--text);padding:11px 20px;border-radius:11px;font-size:13px;
box-shadow:var(--shadow);z-index:80;opacity:0;pointer-events:none;transition:opacity .25s}
.toast.show{opacity:1}
/* A failure stays until it is dismissed. The base toast is pointer-events:none
so it never blocks a click behind it; a sticky one has to take clicks or it
could not be dismissed. Left-aligned and wrapped, because an error code on
the end of a sentence is unreadable centred on one line. */
.toast.sticky{pointer-events:auto;cursor:pointer;text-align:left;line-height:1.5;
max-width:min(520px,calc(100vw - 32px))}
.toast.sticky::after{content:'Tap to dismiss';display:block;margin-top:6px;
font-size:11px;color:var(--muted)}
/* ---- Responsive: tablet ---- */
@media(max-width:1000px){
.g4{grid-template-columns:repeat(2,1fr)}
.g3{grid-template-columns:repeat(2,1fr)}
.g2{grid-template-columns:1fr}
.main{padding:22px 20px}
}
/* ================= MOBILE SHELL =================
The phone gets a bottom tab bar, because a left rail is unreachable by
thumb and the old icon strip was 457px wide inside a 375px screen — two
destinations were simply off-screen. The "More" sheet is the SAME
|