.suite-finance-nav,.suite-back{color:inherit;font:inherit;font-weight:700;text-decoration:none;padding:.65rem .8rem;border-radius:.6rem}.suite-finance-nav:hover,.suite-back:hover{text-decoration:underline}.suite-finance-nav:focus-visible,.suite-back:focus-visible{outline:3px solid #83d9ac;outline-offset:3px}.suite-finance-nav[hidden]{display:none}

.top-nav{position:relative;isolation:isolate;flex-wrap:nowrap;gap:4px;padding:6px;border:1px solid #859fa9;border-radius:18px;background:linear-gradient(180deg,#8eabb2,#adc1c5 35%,#bacbd0);box-shadow:inset 0 3px 7px #18384c32,inset 0 -1px 0 #e9f4f180,0 1px 0 #edf7f780}
.top-nav::before{content:"";position:absolute;z-index:0;left:0;top:0;width:var(--owner-nav-width,0);height:var(--owner-nav-height,44px);transform:translate(var(--owner-nav-x,0),var(--owner-nav-y,0));border:1px solid #507d91;border-radius:12px;background:radial-gradient(ellipse at 45% 0,#47758760,transparent 65%),linear-gradient(155deg,#255269,#0c2b40);box-shadow:inset 0 2px 0 #c5e5e629,inset 0 -2px 4px #061b2a55,0 3px 5px #112d3f45;transition:transform 330ms cubic-bezier(.2,.85,.25,1),width 330ms cubic-bezier(.2,.85,.25,1)}
.top-nav>:is(button,a){position:relative;z-index:1;display:inline-flex;align-items:center;justify-content:center;gap:5px;flex:1 1 auto;min-width:0;min-height:44px;padding:10px 14px;border:0;border-radius:12px;background:transparent;color:#244455;font-family:inherit;font-size:.82rem;font-weight:700;line-height:1.4;text-align:center;text-decoration:none;white-space:nowrap;box-shadow:none}
.top-nav>:is(button,a)[hidden]{display:none}.top-nav>:is(button,a):hover{color:#092a3e;text-decoration:none}.top-nav>button[aria-current="page"]{color:#f0f8f4;background:transparent;box-shadow:none}.top-nav>button[aria-current="page"]::after{display:none}.top-nav>:is(button,a):active{transform:scale(.98)}.top-nav>:is(button,a):focus-visible{outline:3px solid #297797;outline-offset:2px}
.home-footer{display:flex;align-items:center;justify-content:center;gap:12px}.owner-entry{display:inline-grid;place-items:center;width:44px;min-height:44px;padding:0;border:0;border-radius:50%;background:transparent;color:#476875;font-family:inherit;font-size:1.05rem;font-weight:600;box-shadow:none}.owner-entry:hover{color:#0b3248;background:#799ba329}.owner-entry:focus-visible{outline:3px solid #297797;outline-offset:2px}.owner-entry:active{transform:scale(.94)}
.owner-entry-symbol{font:26px/1 Georgia,serif;transition:transform .16s ease}
.owner-entry:is(:hover,:focus-visible) .owner-entry-symbol{transform:rotate(-7deg)}
@media(prefers-reduced-motion:reduce){.owner-entry-symbol{transition:none}.owner-entry:is(:hover,:focus-visible) .owner-entry-symbol{transform:none}}
@media(max-width:700px){.top-nav{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.top-nav>:is(button,a){font-size:.78rem;padding:10px 9px}.home-footer{font-size:.7rem;gap:4px}}
@media(prefers-reduced-motion:reduce){.top-nav::before{transition:none}.top-nav>:is(button,a):active,.owner-entry:active{transform:none}}

/* Keep the approved summary palette; lower the bright surrounding card surfaces. */
.owner-workspace{--surface:#adbec1;--surface-control:#a3babe;--surface-overlay:#adbec1fa;--page-overlay:#a8bdc1fa}
.owner-workspace .collections,.owner-workspace .loan-row,.owner-workspace .outstanding-invitation{background-color:var(--surface)}
input:is([type="date"],[type="month"]){border-radius:13px;box-shadow:inset 0 3px 7px #082e4340,inset 0 -1px 0 #edf7f477;text-align:center;min-height:48px;font-weight:650}
input:is([type="date"],[type="month"])::-webkit-date-and-time-value{text-align:center;min-width:0;width:100%}
input:is([type="date"],[type="month"])::-webkit-datetime-edit{display:block;text-align:center}
.top-nav>:is(button,a):not([aria-current="page"]):has(+:is(button,a):not([aria-current="page"]))::after{content:"";position:absolute;right:-2px;top:30%;bottom:30%;width:1px;background:#587f8b66;pointer-events:none}
.segmented>button{position:relative}.segmented>button:not([aria-pressed="true"]):has(+button:not([aria-pressed="true"]))::after{content:"";position:absolute;right:0;top:30%;bottom:30%;width:1px;background:#587f8b66;pointer-events:none}
/* Keep the desktop canvas aligned with Personal Finance on short and long views. */
html{overflow-y:scroll;scrollbar-gutter:stable}
/* Compact only the public mobile welcome page; keep signed-in workspaces intact. */
@media(max-width:820px){
 body.public-entry:has(#home-view:not([hidden])) .site-header{padding-top:12px;padding-bottom:8px}
 body.public-entry:has(#home-view:not([hidden]))>main{padding-top:10px}
 body.public-entry:has(#home-view:not([hidden])) .private-home{margin-top:0;margin-bottom:16px}
 body.public-entry:has(#home-view:not([hidden])) .home-footer{margin:16px 0 0}
 body.public-entry:has(#home-view:not([hidden])) .owner-entry{flex:none}
}

/* Shared app proportions and compact mobile navigation. */
.nav-compact{display:none}
.segmented{padding:6px;gap:4px;border:1px solid #859fa9;border-radius:16px;background:linear-gradient(180deg,#8eabb2,#adc1c5 35%,#bacbd0);box-shadow:inset 0 3px 7px #18384c32,inset 0 -1px 0 #e9f4f180}
.segmented>button{min-width:0;min-height:44px;border-radius:11px;background:transparent;box-shadow:none}
.segmented>button[aria-pressed="true"]{background:radial-gradient(ellipse at 45% 0,#47758760,transparent 65%),linear-gradient(155deg,#255269,#0c2b40);box-shadow:inset 0 2px 0 #c5e5e629,inset 0 -2px 4px #061b2a55,0 3px 5px #112d3f45;color:#f0f8f4}
select:is(#studio-frequency,[id*="frequency"]){border-radius:13px;box-shadow:inset 0 3px 7px #082e4340,inset 0 -1px 0 #edf7f477;min-height:48px}
@media(max-width:700px){
 .site-header .top-nav{display:flex;flex-wrap:nowrap;padding:5px;gap:3px;border-radius:16px}
 .site-header .top-nav>:is(button,a){flex:1 1 0;min-width:0;min-height:44px;padding:8px 5px;font-size:.76rem;line-height:1.25}
 .nav-full{display:none}.nav-compact{display:inline}
 .top-nav button #loan-count{margin-left:1px;min-width:14px;font-size:.57rem}
}
@view-transition{navigation:auto}
@media(prefers-reduced-motion:no-preference){
 ::view-transition-old(root){animation:app-leave 120ms ease-out both}
 ::view-transition-new(root){animation:app-enter 160ms ease-out both}
 @keyframes app-leave{to{opacity:0}}
 @keyframes app-enter{from{opacity:0;transform:translateY(3px)}to{opacity:1;transform:none}}
}
@media(prefers-reduced-motion:reduce){::view-transition-group(*){animation:none!important}}

.collections .collection-summary[hidden]{display:none}.collections .collection-empty{margin:18px 0 0;padding:0;font-size:.9rem}.collections:has(.collection-summary[hidden]){padding-bottom:26px}

/* Match native iOS form metrics to the shared CSS border box. */
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
button,input,select,textarea{box-sizing:border-box;min-inline-size:0;font-family:inherit}
button,input:not([type=checkbox],[type=radio],[type=range]),textarea{-webkit-appearance:none;appearance:none}
input:is([type=date],[type=month]){max-inline-size:100%;line-height:1.4;padding-block:11px}
input:is([type=date],[type=month])::-webkit-datetime-edit{padding:0;text-align:center}
input:is([type=date],[type=month])::-webkit-date-and-time-value{min-inline-size:0;max-inline-size:100%;text-align:center;line-height:1.4}
@media(max-width:700px){
 .studio-controls .field-pair:has(#studio-frequency){grid-template-columns:minmax(0,1fr);justify-items:center}
 .studio-controls label:has(#studio-frequency){inline-size:100%;max-inline-size:18rem;text-align:center}
 #studio-frequency{display:block;inline-size:100%;max-inline-size:100%;margin-inline:auto;text-align:center;text-align-last:center}
 .collections{text-align:center}
 .collections-heading{flex-direction:column;align-items:center;justify-content:center}
 .collections-heading label{justify-items:center}
 .collections-heading input{margin-inline:auto}
 .collection-summary{justify-content:center}
}

/* Center editorial headings on phones; keep Plan and data rows unchanged. */
@media(max-width:700px){
 #studio-view .page-heading,#loans-view .page-heading{text-align:center;justify-content:center}
 #studio-view .page-heading>div,#loans-view .page-heading>div{width:100%;min-width:0}
 #loans-view .page-heading>div{display:flex;flex-direction:column;align-items:center}
 #loans-view .workspace-heading-row{display:contents}
 #loans-eyebrow{order:0}
 #loans-title{order:1}
 #loans-description{order:2}
 #refresh-records.refresh-records-button{order:3;align-self:center;margin-top:14px}
 #studio-view .section-top{justify-content:center;text-align:center}
 #studio-view h2,#loans-view :is(.all-loans-heading,.loan-group-heading h3,#outstanding-invitations-title){text-align:center}
 #loans-view .loan-group-heading,#loans-view .outstanding-invitations-heading{justify-content:center}
}

#loan-filter{box-shadow:inset 0 3px 7px #082e4340,inset 0 -1px 0 #edf7f477}

/* Keep the two payment actions aligned, with their details together below. */
@media(max-width:700px){
 .collection-row{grid-template-columns:repeat(2,minmax(0,1fr));align-items:start;gap:14px}
 .collection-person{grid-column:1;grid-row:1;min-width:0}
 .collection-person .text-button{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;padding:10px 8px;font-size:.8rem;line-height:1.35;text-align:center;box-sizing:border-box}
 .collection-row .collect-button{grid-column:2;grid-row:1;min-width:0;width:100%;min-height:48px;padding:10px 8px;font-size:.8rem;line-height:1.35;box-sizing:border-box}
 .collection-date{grid-column:1;grid-row:2;width:auto;text-align:left}
 .collection-amount{grid-column:2;grid-row:2;text-align:right}
 .collection-person small{margin-top:7px}
}

/* Final phone spacing: keep the payment frequency close to its dial. */
@media(max-width:700px){
 #proposal-view .dial-controls{margin-bottom:4px}
 #borrow-date-help{text-wrap:balance}
}