list with the same .two_col pattern used throughout the
rest of this app. */
.detail-line-item {
justify-content: space-between;
}
/* Three-column variant (nickname | type | amount) -- used when
buildDetailLineItem() is passed a typeLabel (Income, Savings &
Investments), so two same-type items (two wage jobs, two retirement
withdrawals draining different buckets) are still distinguishable by
their own nickname, not just their shared type. */
.detail-line-item-typed {
display: flex;
justify-content: space-between;
}
.detail-line-item-typed .item_type p {
opacity: 0.7;
font-style: italic;
}
.detail-line-item .item_value p {
text-align: right;
}
/* Task D: each property gets its own separate, visually distinct box
within the Property group, rather than one flat combined list. */
.line_items,
.calc-property-detail {
border: 1px solid var(--border, #2a2f42);
border-radius: var(--radius, 0.6rem);
background: var(--calc_prop_detail);
}
/* Percent-slider widget (assets/js/percent-slider.js) -- structural
positioning/sizing only; colors and fine styling are yours to retune. */
.percent-slider-display {
display: inline-block;
border: 1px solid var(--border2, #363d54);
border-radius: var(--radius, 0.6rem);
cursor: pointer;
text-align: center;
background: var(--input_bg);
}
.percent-slider-popup {
background: var(--surface2, #1f2436);
border: 1px solid var(--accent, #3d7eff);
border-radius: var(--radius, 0.6rem);
}
.percent-slider-dialog {
z-index: 10010 !important;
}
.percent-slider-caret {
position: absolute;
background: var(--surface2, #1f2436);
border-left: 1px solid var(--accent, #3d7eff);
border-top: 1px solid var(--accent, #3d7eff);
}
.percent-slider-value {
text-align: center;
font-weight: bold;
}
.percent-slider-track {
background: #494949;
border: 1px solid #05a205 !important;
}
.percent-slider-labels {
display: flex;
justify-content: space-between;
color: var(--muted, #a4accf);
}
.percent-slider-custom-btn {
display: block;
}
.percent-custom-error {
color: var(--red, #ef4444);
}
button.field-tooltip-icon {
border: none;
background-color: none;
border-radius: 50%;
background-image: var(--icon_info);
background-size: contain;
position: relative;
top: 10.3rem;
}
.job_widget .field-tooltip-icon {
top: -0.5rem;
left: 0.5rem;
}
button.field-tooltip-icon:hover {
background-image: var(--icon_info_hover);
}
/* Collapsible detail rows (assets/js/calculation-table.js) -- task H */
.calc-collapse-all-btn {
background-image: url(../images/icon_collapse.png);
background-repeat: no-repeat;
background-size: 10.4rem 10.4rem;
background-position: center;
}
.calc-collapse-all-btn:hover {
background-image: url(../images/icon_collapse_black.png) !important;
}
@keyframes flyInFromRight {
from {
transform: translateX(120%);
opacity: 0;
}
to {
transform: translateX(0);
opacity: 1;
}
}
/* Charts (assets/js/charts.js) -- structure only, yours to style further.
Task (vi): switched from flex to a plain block container with
text-align:center -- inline-block children (below) wrap naturally on
their own, no flex-wrap needed, and this sidesteps the whole
min-height:0 flexbox gotcha entirely (inline-block elements don't
participate in flexbox's special sizing algorithm, so there's no
flex-item "won't shrink below content" behavior to guard against in
the first place). Matches the same approach already in place for the
dashboard comparison charts (#scenarioComparison .chart-container). */
#single_scenario_charts_and_graphs {
text-align: center;
}
.charts_and_graphs .chart-container {
position: relative;
aspect-ratio: 12 / 11;
display: inline-block;
vertical-align: top;
overflow: hidden;
}
/* Protected-account note (wizard-assets.js/wizard-debt.js) -- structure
only, yours to style further. */
.protected-account-note {
color: var(--muted, #a4accf);
}
/* Tour button (task a) -- icon-only, no visible text, matching the
sidebar's own icon-button convention (.sidebar-footer .save etc.). */
.wizard-tour-btn {
background-image: var(--icon_tour_hover);
background-size: contain;
background-repeat: no-repeat;
background-position: center;
border: none;
background-color: transparent;
cursor: pointer;
}
.wizard-tour-btn:hover {
background-image: var(--icon_tour_hover);
background-color: rgb(160 220 255);
border-radius: 50% !important;
}
/* Copy Scenario wizard -- structure only, yours to style further. */
.copy-scenario-section-header {
font-weight: bold;
border: 1px solid var(--border2);
background: var(--surface);
border-radius: 0.5rem;
color: var(--ad-text-color);
}
.copy-item-subheader {
font-weight: bold;
border-bottom: 0.2rem solid var(--border);
}
.copy-item-subheader-nested {
font-weight: normal;
font-style: italic;
}
.copy-scenario-row {
display: flex;
align-items: center;
}
.copy-label {
flex: 2;
}
.copy-current {
flex: 1;
opacity: 0.7;
}
.copy-future {
flex: 1;
}
#copyScenarioTable {
overflow-y: auto;
}
/* Dashboard scenario comparison -- structure only, yours to style further. */
/* BUGFIX: the existing .chart-container sizing rule is scoped as
.charts_and_graphs .chart-container -- it only applies inside the
single-scenario view's own charts tab. These dashboard charts sit
inside #scenarioComparison, not a .charts_and_graphs descendant at
all, so they were getting NO sizing CSS whatsoever -- falling back to
Chart.js/the browser's own canvas defaults, which is what compressed
the plot area down to a near-flat line. A fixed height here
(not aspect-ratio, unlike the single-scenario rule) specifically
because the dashboard column's actual width is unpredictable -- an
aspect-ratio would still produce a short chart in a narrow column,
the same problem in a different shape. */
#scenarioComparison .chart-container {
position: relative;
display: inline-block;
aspect-ratio: 6 / 5;
overflow: hidden;
}
#scenarioComparison .chart-container h3 {
text-align: center;
}
/* Same-subtype overlap confirmation (income/property) -- structure only,
yours to style further. */
/* Full-Screen Review -- structure only, yours to style further.
Rough per-row height estimate (~31px: 0.6rem+0.6rem padding + ~19px line
height) used to stack the three sticky header rows without them
overlapping each other -- if all three had top:0, row 2 and row 3
would sit on top of row 1 instead of stacking beneath it. */
.review-table {
border-collapse: separate;
border-spacing: 0;
}
.review-table th,
.review-table td {
text-align: right;
white-space: nowrap;
}
.review-table td {
border-bottom: 1px solid var(--table_bottom_border);
}
.review-table .review-row-header-cell {
position: sticky;
left: 0;
background: var(--surface);
text-align: left;
font-weight: bold;
}
/* Same odd/even convention as #single_scenario_table_data
(.calc-results-table, same --table_row_even/--table_row_odd
variables) -- explicitly excludes .review-row-header-cell (the sticky
Age column) via :not(), since a plain "tr td" selector would otherwise
out-specificity the rule above and make the sticky column alternate
color while scrolling vertically, which would look inconsistent for a
column that's meant to stay visually fixed while everything else
scrolls past it. */
.review-table tbody tr.even td:not(.review-row-header-cell) {
background: var(--table_row_even);
}
.review-table tbody tr.odd td:not(.review-row-header-cell) {
background: var(--table_row_odd);
}
.review-table thead th {
position: sticky;
background: var(--surface);
z-index: 2;
}
/* top offsets for these three rows are set dynamically by
positionStickyHeaderRows() (wizard-full-screen-review.js), not
hardcoded here -- a fixed pixel guess goes stale the moment padding or
font-size changes (exactly what happened once already). */
/* Task (d): Section row (row 1) labels centered -- Group/Item rows stay
right-aligned like every other cell, only Section needed this. */
.review-table thead tr:nth-child(1) th {
background: var(--surface);
text-align: left;
}
/* The corner cells (Age column's own header cells) are sticky in BOTH
directions at once -- need to out-rank plain sticky-top OR
sticky-left cells scrolling underneath them either way. */
.review-table thead .review-row-header-cell {
z-index: 3;
}
/* Task (e): alternating background per SECTION (not per column) -- every
header cell belonging to the same section (all three rows) shares one
of two colors, alternating Property/Income/Debt/Life Expenses so
adjacent sections are visually distinguishable at a glance. Applied
via a section-index data attribute set in JS (wizard-full-screen-
review.js), since CSS alone has no way to know which columns belong
to which section. */
.review-table thead th[data-section-parity="0"] {
background: var(--review-header-alt-bg-2);
}
.review-table thead th[data-section-parity="1"] {
background: var(--review-header-alt-bg);
color: var(--review-header-alt-color);
}
.review-table tr:nth-child(3) th {
text-align: center;
}
/* Task (f): long group labels (e.g. "Monthly Mortgage Payment") were
forcing wide columns -- without table-layout: fixed, a table's
columns expand to fit their longest UNBROKEN content, and these
labels have no natural break point on their own. Constraining this
row's own max-width and allowing normal wrapping (word-wrap/
overflow-wrap as a fallback for any single long word) lets these
labels wrap onto a second line instead, so the columns beneath them
only need to be as wide as their actual DATA requires, not as wide as
the longest label happens to be. */
.review-table thead tr:nth-child(2) th {
white-space: normal;
word-wrap: break-word;
overflow-wrap: break-word;
}
icon.account-icon-btn,
icon.save,
icon.delete {
width: 2.0rem;
height: 2.0rem;
min-width: 2.0rem;
min-height: 2.0rem;
border-radius: 0.4rem !important;
border: none;
opacity: 0.8;
}
icon.account-icon-btn {
background-image: var(--icon_account);
}
body.logged_out icon.account-icon-btn,
body.logged_out icon.new-scenario-btn {
display: none;
}
icon.save {
background-image: var(--icon_save);
}
icon.delete {
background-image: var(--icon_delete);
}
icon.account-icon-btn:hover,
icon.save:hover,
icon.delete:hover {
opacity: 1;
background-color: none;
}
/* Task (a): TRULY full-screen now (edge to edge), not just near-full --
95vw/90vh with margins was still leaving a visible border of page
behind it. */
.ui-dialog:has(#full_screen_review) {
top: 0 !important;
left: 0 !important;
}
.dialogDetailedDataReview {
border-radius: 0 !important;
border: none !important;;
}
.dialogDetailedDataReview .ui-dialog-titlebar {
display: none;
}
#fullReviewTitle {
font-weight: bold;
font-size: 2rem;
margin-top: -0.7rem;
margin-bottom: 0.5rem;
}
.ui-dialog:has(#full_screen_review) .ui-dialog-content {
overflow: auto;
}
/* BUGFIX: #reviewTableContainer never had a constrained height/overflow
of its own -- the table's natural size (many columns wide, 40+ rows
tall) just kept growing the DIALOG itself past the viewport, and with
nothing to stop that, the whole PAGE scrolled to accommodate it. This
container is now the actual scrolling ancestor -- required not just
to contain the scroll, but for position:sticky above to have
something real to stick WITHIN in the first place. */
#reviewTableContainer {
overflow: auto;
}
/* Task (b): a real, always-visible close button in the header itself --
jQuery UI's own default titlebar X exists, but a full-screen dialog's
content can be much taller than the viewport, and this is meant to
never depend on that default styling being reliably visible. */
.full-review-close-btn {
background: none;
border: none;
cursor: pointer;
}
icon.dialog-close {
background-image: var(--icon_close);
background-size: cover;
}
icon.dialog-close:hover {
background-image: var(--icon_close_hover);
}
.dialogDetailedDataReview icon.dialog-close {
margin-left: -0.5rem;
margin-top: -1rem;
}
/* Fly-in notifications (spec addendum, direct instruction) -- replaces
inline messages scattered across every dialog with
a single, shared, animated notification instead, matching the kind
of transient toast Claude's own client uses. See
showFlyInNotification() (assets/js/dialog.js) for the JS side. */
#flyInNotificationContainer {
position: fixed;
top: 1rem;
right: 1rem;
z-index: 99999;
display: flex;
flex-direction: column;
gap: 0.6rem;
pointer-events: none; /* the container itself never blocks clicks -- only individual notifications (below) are actually interactive */
max-width: 22rem;
}
.fly-in-notification {
background: var(--surface);
color: var(--text);
border-radius: var(--radius);
padding: 0.85rem 1.1rem;
box-shadow: 0 4px 16px rgba(0, 0, 0, 0.35);
cursor: pointer;
pointer-events: auto;
border-left: 4px solid var(--red);
font-size: 0.95rem;
line-height: 1.4;
/* Starts off-screen and transparent; .fly-in-visible (added a tick
after insertion, so the browser has something to transition FROM)
animates it into view. Removing .fly-in-visible later reverses
the same transition for the slide-out. */
transform: translateX(130%);
opacity: 0;
transition: transform 0.3s ease, opacity 0.3s ease;
}
.fly-in-notification.fly-in-visible {
transform: translateX(0);
opacity: 1;
}
.fly-in-notification.fly-in-success {
border-left-color: var(--green);
}
/* FAQs page (spec addendum, direct instruction) -- category tab bar
mirrors .tab_header/.tab's own established look (border/radius/color
conventions), just applied to a dynamically-generated, N-wide row of
category tabs rather than a fixed 2. */
.faq_search_row {
margin-bottom: 1.2rem;
}
.faqs_container .row1 div:first-child {
flex: 50
}
div.faqs {
padding-top: 9vh;
}
.faqs .row1 p {
position: relative;
top: -0.5rem;
}
.faqs .row1 {
margin-bottom: 2rem;
}
.faqs h1 {
position: relative;
top: -2rem;
}
.faq_search_row input {
min-width: 30rem;
box-sizing: border-box;
padding: 0.6rem 0.9rem;
border-radius: 0.4rem;;
font-size: 1rem;
background: #c9c9c9;
border: 1px solid #979797;
color: black;
font-weight: bold;
}
.faq_tab_header {
display: flex;
flex-wrap: wrap;
gap: 0.4rem;
border-bottom: 1px solid var(--border);
margin-bottom: 1.2rem;
}
.faq_tab {
padding: 1.3rem 1.6rem;
border-radius: 0.8rem;
cursor: pointer;
font-weight: bold;
align-items: center;
align-content: center;
cursor: pointer;
color: #1a1a1a;
background: #d8d8d81c;
border: 1px solid #b6b6b6;
}
.faq_tab:hover {
color: black;
background: #cdcdcd54;
border: 1px solid #a9a9a9;
}
.faq_tab.selected {
background: #323232;
color: #fff;
border: 1px solid black; /* visually merges with the accordion content below it */
text-shadow: 0 0 3px #000;
}
/* Accordion -- collapsed by default, one open at a time (JS-enforced in
faqs.js's wireFaqAccordionContainer()). Same item shape used for both
the normal, category-scoped view and the flat search-results list. */
.faq_item {
border: 1px solid var(--border2);
border-radius: var(--radius);
margin-bottom: 0.6rem;
overflow: hidden;
}
.faq_question {
padding: 0.9rem 1.1rem;
cursor: pointer;
background: #ffffff4a;
/*! border-radius: 0.5rem; */
border: 1px solid #00000024;
}
.faq_question:hover {
background: var(--wizard_row_hover_bg, var(--surface));
}
.faq_answer {
padding: 0.9rem 1.1rem;
/*! border-top: 1px solid var(--border2); */
line-height: 1.5;
background: #fff;
margin-left: 4rem;
font-weight: bold;
}
#faqNoResults {
color: var(--muted);
font-style: italic;
}
/* Section-title legend (spec addendum) -- slightly de-emphasized
relative to the bold section title text itself, since it's
supplementary reference info, not the primary label. */
.review-section-legend {
font-weight: normal;
font-size: 0.85em;
/*! opacity: 0.85; */
font-weight: bold;
}
span.review-section-title {
font-size: 1.8rem;
margin-right: 1.5rem;
}