/* Styles for the My finances workspace section. Loaded on every workspace page by components/layouts/app. */
.fin{min-width:0}
.fin *{min-width:0}
.fin [hidden]{display:none!important}
.fin-stack{display:grid;gap:22px;min-width:0}
.fin-pad{padding:0 25px 25px}
.fin-foot{padding:16px 25px 22px;border-top:1px solid var(--line)}
.fin-link{color:var(--sage-deep);text-decoration:underline;font-weight:600}
.fin-disclaimer{margin:-8px 0 18px}

/* Import card */
.fin-import{display:grid;grid-template-columns:1.4fr 1fr;gap:24px;align-items:center;padding:24px 27px;margin-bottom:22px;background:var(--sage-tint)}
.fin-import h2{font-size:26px;margin:8px 0 8px}
.fin-import p{font-size:13px}
.fin-import-actions{display:flex;flex-direction:column;align-items:flex-start;gap:10px}

/* Summary strip */
.fin-strip{list-style:none;margin:0 0 22px;padding:0;display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:14px}
.fin-strip li{padding:18px 18px 16px}
.fin-strip .eyebrow{font-size:11px;display:block}
.fin-strip strong{display:block;font:400 25px/1.15 var(--serif);font-variant-numeric:tabular-nums;margin:12px 0 8px;overflow-wrap:anywhere}
.fin-strip p{font-size:11px;line-height:1.5}
.fin-strip .fin-gap{background:var(--blush)}

/* View switcher */
.fin-tabs{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:22px}
.fin-tab{border:1px solid var(--line);background:var(--card);color:var(--navy);border-radius:999px;padding:10px 18px;min-height:44px;font-size:13px;font-weight:550}
.fin-tab:hover{border-color:var(--sage)}
.fin-tab.is-active{background:var(--navy);border-color:var(--navy);color:var(--card)}
.fin-tab:focus-visible{outline:2px solid var(--blue);outline-offset:3px}

/* Sticky side column */
@media(min-width:1101px){.fin-side{position:sticky;top:20px}}

/* Plan progress */
.fin-headline{font:400 22px/1.3 var(--serif);color:var(--navy);margin-bottom:16px}
.fin-headline strong{font-weight:500;color:var(--sage-deep)}
.fin-bar{display:flex;height:16px;border-radius:999px;background:var(--sky);border:1px solid var(--line);overflow:hidden}
.fin-bar-paid{background:var(--sage-deep)}
.fin-bar-open{background:repeating-linear-gradient(135deg,var(--sage) 0 6px,#a6b183 6px 12px)}
.fin-legend{list-style:none;margin:14px 0 0;padding:0;display:flex;flex-wrap:wrap;gap:8px 22px;font-size:12px;color:var(--slate)}
.fin-legend strong{color:var(--ink);font-weight:600}
.fin-key{display:inline-block;width:14px;height:14px;border-radius:4px;margin-right:8px;vertical-align:-2px}
.fin-key-paid{background:var(--sage-deep)}
.fin-key-open{background:repeating-linear-gradient(135deg,var(--sage) 0 4px,#a6b183 4px 8px)}
.fin-empty-tight{padding:12px 25px 28px}

/* Rows */
.fin-row{display:flex;align-items:center;justify-content:space-between;gap:16px;padding:16px 25px;border-top:1px solid var(--line)}
.fin-row h3{font-size:13px;overflow-wrap:anywhere}
.fin-row small{margin:4px 0 0}
.fin-amt{font:400 18px var(--serif);font-variant-numeric:tabular-nums;white-space:nowrap}
.fin-entry-body{flex:1}
.fin-pill-quiet{background:var(--sky);margin-left:4px}
.fin-pill-secured{background:var(--sage-tint);border:1px solid var(--sage);color:var(--sage-deep);font-weight:600}
.fin-filter{padding:0 25px 16px}
.fin-filter select{max-width:220px}

/* Category bars */
.fin-cats{list-style:none;margin:0;padding:0;display:grid;gap:14px}
.fin-cats li{display:grid;grid-template-columns:minmax(0,7.5rem) minmax(0,1fr) 9rem;gap:14px;align-items:center;font-size:13px}
.fin-cat-track{display:block;height:14px;border-radius:999px;background:var(--sky);overflow:hidden}
.fin-cat-track i{display:block;height:100%;background:var(--sage-deep);border-radius:999px}
.fin-cat-amt{font-variant-numeric:tabular-nums;text-align:right;white-space:nowrap;color:var(--ink)}
.fin-cat-amt small{display:inline;font-size:12px;margin-left:4px}

/* Form checkboxes */
.fin-check{display:flex;gap:10px;align-items:flex-start;font-weight:400;font-size:12px;line-height:1.5;margin:16px 0 0}
.fin-check input[type=checkbox]{width:18px;height:18px;margin:1px 0 0;flex-shrink:0;accent-color:var(--sage-deep)}

/* Reimbursements */
.fin-row-reimb{flex-wrap:wrap}
.fin-row-reimb>div:first-child{flex:1 1 200px}
.fin-reimb-actions{display:flex;align-items:center;gap:14px;flex:0 0 auto}
.fin-reimb-actions select{width:auto;min-width:150px}
.fin-facts{margin:18px 0;display:grid;gap:0}
.fin-facts div{display:flex;justify-content:space-between;gap:12px;padding:10px 0;border-top:1px solid var(--line);font-size:13px}
.fin-facts dt{color:var(--slate)}
.fin-facts dd{margin:0;font-variant-numeric:tabular-nums;font-weight:600}

/* Year summary (also the printable page) */
.fin-print-head{padding:24px 25px 8px}
.fin-print-head h2{font-size:32px;margin:10px 0 8px}
.fin-total-line{padding-top:14px}
.fin-total-line strong{display:block;font:400 38px/1.15 var(--serif);font-variant-numeric:tabular-nums;margin:8px 0 4px}
.fin-tables{display:grid;grid-template-columns:1fr 1fr;gap:0 24px;padding:0 25px}
.fin-detail{padding:0 25px}
.fin-scroll{overflow-x:auto;margin-bottom:20px}
.fin-table{width:100%;border-collapse:collapse;font-size:13px}
.fin-table caption{text-align:left;font:400 18px var(--serif);color:var(--navy);padding:10px 0}
.fin-table th,.fin-table td{padding:9px 10px 9px 0;border-bottom:1px solid var(--line);text-align:left;vertical-align:top;font-weight:400}
.fin-table thead th{font-size:11px;letter-spacing:.1em;text-transform:uppercase;color:var(--slate);font-weight:650}
.fin-table tbody th{font-weight:550;overflow-wrap:anywhere}
.fin-table tfoot th,.fin-table tfoot td{font-weight:650;border-bottom:0;border-top:2px solid var(--line)}
.fin-table .num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;padding-right:0}
.fin-footnote{padding:6px 25px 24px;font-size:12px;font-style:italic}

@media(max-width:1100px){
    .fin-strip{grid-template-columns:repeat(3,minmax(0,1fr))}
    .fin-import{grid-template-columns:1fr}
}
@media(max-width:760px){
    .fin-strip{grid-template-columns:repeat(2,minmax(0,1fr));gap:10px}
    .fin-strip strong{font-size:21px}
    .fin-tables{grid-template-columns:1fr}
    .fin-cats li{grid-template-columns:minmax(0,1fr) auto;gap:6px 12px}
    .fin-cats .fin-cat-track{grid-column:1 / -1;order:3}
    .fin-row,.fin-pad,.fin-filter,.fin-foot,.fin-detail,.fin-tables,.fin-print-head,.fin-footnote{padding-left:18px;padding-right:18px}
    .fin input:not([type=checkbox]),.fin select,.fin textarea{font-size:16px}
    .fin-reimb-actions{width:100%;justify-content:space-between}
    .fin-reimb-actions select{flex:1}
}

/* Printing the year summary: show only the summary card. Scoped with :has so no other page is affected. */
@media print{
    body:has(.fin-print){background:#fff}
    body:has(.fin-print) .sidebar,
    body:has(.fin-print) .workspace-top,
    body:has(.fin-print) .demo-banner,
    body:has(.fin-print) .page-heading,
    body:has(.fin-print) .workspace-footer,
    body:has(.fin-print) .notice,
    body:has(.fin-print) .fin-import,
    body:has(.fin-print) .fin-strip,
    body:has(.fin-print) .fin-disclaimer,
    body:has(.fin-print) .fin-tabs,
    body:has(.fin-print) .fin-noprint{display:none!important}
    body:has(.fin-print) .workspace-body{margin:0;width:100%}
    body:has(.fin-print) .workspace-main{max-width:none;padding:0}
    body:has(.fin-print) .editor-grid{display:block}
    body:has(.fin-print) .fin-print{border:0;box-shadow:none}
    body:has(.fin-print) .fin-scroll{overflow:visible}
    body:has(.fin-print) .fin-table tr{break-inside:avoid}
}