@import './workcal-shared.css';
@import './workcal-home.css';
/* WorkCal's unchanged portal CSS owns colors, typography, header and footer.
   LifeCal form controls below use the resolved WorkCal calculator geometry. */
[hidden]{display:none!important}button{cursor:pointer}button:disabled{cursor:default;opacity:.55}svg{display:block}button svg{flex-shrink:0}h1,h2,h3,p{margin-top:0}
/* Same wordmark alignment as VisaWork. */
.logo{position:relative;display:block}.logo .brand-measure{visibility:hidden;color:inherit}.logo .brand-name{position:absolute;left:0;top:0;color:inherit;white-space:nowrap}.logo .brand-name>span{color:var(--color-primary-dark)}
/* WorkCal colors every logo span; keep the outer brand span in the original black ink. */
html[data-workcal-theme="portal"] .site-header .logo .brand-name{color:#222}
html[data-workcal-theme="portal"] .site-header .logo .brand-name>span{color:var(--color-primary-dark)}
.page-shell{width:min(calc(100% - 36px),1320px);margin:0 auto;padding:22px 0 56px}.content-grid{display:grid;grid-template-columns:minmax(0,1fr) 300px;gap:12px;align-items:start}.calculator-main{display:grid;min-width:0;align-content:start;gap:12px}.calculator-sidebar{display:grid;gap:12px;align-self:start}
.related-panel{padding:0;background:#fff}.related-panel h2{margin:0;padding:12px 14px;border-bottom:1px solid var(--color-border);font-size:20px;letter-spacing:-.025em}.related-panel nav{display:grid}.related-panel nav a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:10px;padding:7px 11px;border-bottom:1px solid var(--color-border);color:#424242;font-size:14px;font-weight:600}.related-panel nav a:last-child{border-bottom:0}.related-panel nav a span:last-child{color:#8e8e8e}.related-panel nav a:hover,.related-panel nav a[aria-current=page]{background:var(--color-primary-soft);color:var(--color-primary-dark)}.sidebar-note{padding:14px;border:1px solid var(--color-border);background:var(--color-surface);color:var(--color-muted);font-size:13px;line-height:1.6}.sidebar-note strong{color:var(--color-primary-dark)}.sidebar-note p{margin:5px 0 0}.sidebar-note a{display:inline-block;margin-top:7px;color:var(--color-primary-dark);text-decoration:underline;text-underline-offset:2px}
.breadcrumb{display:flex;flex-wrap:wrap;gap:7px;margin:0;color:#697583;font-size:12px}.breadcrumb a:hover{text-decoration:underline}.page-heading{padding:11px 16px;border:2px solid var(--color-border-dark);border-radius:2px;background:var(--color-surface)}.page-heading h1{margin:0;color:#243647;font-size:20px;line-height:1.62;letter-spacing:-.03em}.page-heading p{margin:3px 0 0;color:#5f6368;font-size:14px;line-height:1.55}
.calculator-panel,.related-panel{border:2px solid var(--color-border-dark);border-radius:1px}.calculator-panel{overflow:hidden;background:#fff}.panel-heading{display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;column-gap:12px;row-gap:0;padding:11px 16px;border-bottom:1px solid var(--color-border)}.panel-heading h1{margin:0;font-size:20px;line-height:1.62;letter-spacing:-.03em}.panel-heading p{grid-column:1/-1;margin:0;color:#5f6368;font-size:14px;line-height:1.55}.basis-badge{white-space:nowrap;justify-self:end;padding:4px 8px;border:1px solid var(--color-border-dark);border-radius:6px;background:var(--color-primary-soft);color:var(--color-primary-dark);font-size:13px;font-weight:700}
.calculator-workspace{display:grid;grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr)}.input-panel{min-width:0;border-right:1px solid var(--color-border)}.result-panel{min-width:0;background:#fff}.section-head{display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:48px;padding:12px 18px;border-bottom:1px solid var(--color-border);background:#fff}.section-head h2{margin:0;color:#252525;font-size:20px;letter-spacing:-.025em}.section-head .badge{color:#70757b;font-size:12px}.panel-body{padding:18px}
.input-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:15px 12px}.field{min-width:0}.field:has(select),.field:has(input[type=checkbox]),.field:has(input[type=date]){grid-column:1/-1}.field label{display:block;margin-bottom:6px;color:#30343a;font-size:15px;font-weight:700;line-height:1.45}.input-wrap{display:flex;min-height:46px;align-items:center;border:1px solid var(--color-border-dark);border-radius:1px;background:#fff}.input-wrap:focus-within{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}.input-wrap input{width:100%;min-width:0;padding:7px 4px 7px 9px;border:0;outline:0;background:transparent;color:var(--color-text);font-size:18px;font-weight:700;text-align:right}.input-wrap .unit{flex:0 0 auto;padding:0 11px 0 6px;color:#555b61;font-size:14px}.input-wrap input[type=date]{padding:9px 11px;text-align:left;font-size:16px;font-weight:400}.field select{width:100%;min-height:46px;padding:9px 11px;border:1px solid var(--color-border-dark);border-radius:1px;outline:0;background:#fff;color:var(--color-text);font-size:16px}.field select:focus{border-color:var(--color-primary);box-shadow:inset 0 0 0 1px var(--color-primary)}
.field-help{margin:5px 0 0;color:#6f747a;font-size:13px;line-height:1.5}.money-hint{min-height:18px;margin-top:3px;color:var(--color-primary-dark);font-size:12px;text-align:right}.checkbox-label{display:flex!important;align-items:flex-start;gap:7px;padding:7px 9px;border:1px solid var(--color-border-dark);border-radius:1px;background:var(--color-surface);font-size:14px!important;font-weight:400!important}.checkbox-label input{width:15px;height:15px;flex:0 0 15px;margin:4px 0;accent-color:var(--color-primary)}.field-presets{display:flex;flex-wrap:wrap;gap:5px;margin-top:6px}.field-presets button{min-height:30px;padding:4px 8px;border:1px solid var(--color-border);border-radius:1px;background:#fff;color:#4f5b68;font-size:13px}.field-presets button:hover{border-color:var(--color-primary);background:var(--color-primary-soft);color:var(--color-primary-dark)}
.advanced-inputs{margin-top:16px;border:1px solid var(--color-border);border-radius:1px;background:#fff}.advanced-inputs>summary{padding:11px 12px;background:var(--color-surface);color:var(--color-primary-dark);font-size:14px;font-weight:700;cursor:pointer}.advanced-inputs[open]>summary{border-bottom:1px solid var(--color-border)}.advanced-inputs>.input-grid{padding:13px 12px}.form-actions{display:flex;gap:8px;margin-top:20px;padding-top:16px;border-top:1px solid var(--color-border)}.button-primary{display:flex;flex:1;align-items:center;justify-content:center;gap:7px;min-height:46px;padding:9px 15px;border:1px solid var(--color-primary-dark);border-radius:1px;background:var(--color-primary-dark);color:#fff;font-size:16px;font-weight:800}.button-primary:hover{background:var(--color-primary)}.button-secondary{display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:36px;padding:7px 12px;border:1px solid var(--color-border-dark);border-radius:1px;background:#fff;color:#454f59;font-size:13px}.button-secondary:hover{background:var(--color-primary-soft)}.form-error{margin:12px 0 0;padding:8px 9px;border:1px solid #d8aaaa;border-radius:1px;background:#fff7f7;color:#a33232;font-size:13px;line-height:1.55}.form-footnote{margin:10px 0 0;color:#60666d;font-size:13px;line-height:1.55}
.result-empty{display:flex;min-height:245px;flex-direction:column;align-items:center;justify-content:center;gap:10px;padding:18px;border:1px solid var(--color-border);border-radius:1px;background:var(--color-surface);color:#536474;text-align:center}.result-empty p{margin:0;font-size:14px;line-height:1.65}.result-empty svg{color:var(--color-primary-dark)}.primary-result{display:flex;align-items:center;justify-content:space-between;gap:18px;padding:15px 16px;border:1.5px solid var(--color-primary);border-radius:1px;background:var(--color-primary-soft);color:var(--color-primary-dark)}.result-kicker{margin:0;font-size:14px;font-weight:700}.result-number{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:4px;align-items:baseline;color:var(--color-primary-dark);font-size:25px;font-weight:700;line-height:1.25;letter-spacing:-.035em;overflow-wrap:anywhere;word-break:normal;text-align:right}.result-number span{font-size:14px;font-weight:700;letter-spacing:0}.result-metrics{margin:12px 0 0;display:grid;grid-template-columns:minmax(0,1fr)}.metric{display:flex;min-height:36px;align-items:center;justify-content:space-between;gap:12px;padding:5px 0;border-bottom:1px dotted var(--color-border)}.metric dt{color:#454a50;font-size:15px}.metric dd{min-width:0;margin:0;font-size:15px;font-weight:700;text-align:right;overflow-wrap:anywhere}.result-note{margin:14px 0 0;padding:10px 11px;border:1px solid var(--color-border);border-radius:1px;background:var(--color-surface);color:#5e5e5e;font-size:13px;line-height:1.55}.result-tools{display:flex;flex-wrap:wrap;justify-content:flex-end;gap:6px;margin-top:12px}.tool-status{min-height:18px;margin:5px 0 0;color:var(--color-primary-dark);font-size:12px;text-align:right}
.composition{margin-top:16px}.composition-bar{display:flex;height:7px;overflow:hidden;border-radius:1px;background:var(--color-surface-strong)}.composition-bar span:first-child{background:var(--color-primary)}.composition-bar span:last-child{background:#9fb4cb}.composition-labels{display:flex;flex-wrap:wrap;justify-content:space-between;gap:6px 10px;margin-top:6px;color:#697583;font-size:12px}.table-scroll{min-width:0;overflow:auto;margin-top:14px;border:1px solid var(--color-border);border-radius:1px}.comparison-table,.schedule-table,.example-table{width:100%;border-collapse:collapse;color:#46525f;font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap}.comparison-table caption,.schedule-table caption,.example-table caption{margin:0;padding:9px 11px;background:var(--color-surface);color:#33495f;font-size:13px;font-weight:600;text-align:left}.comparison-table th,.comparison-table td,.schedule-table th,.schedule-table td,.example-table th,.example-table td{padding:10px 11px;border-top:1px solid var(--color-border);text-align:right}.comparison-table thead th,.schedule-table thead th,.example-table thead th{background:var(--color-surface);color:var(--color-primary-dark);font-weight:650}.comparison-table th:first-child,.schedule-table th:first-child,.example-table th:first-child{text-align:left}.comparison-table tbody th,.schedule-table tbody th,.example-table tbody th{font-weight:600}
.schedule-details,.result-detail{margin-top:14px}.schedule-details>summary,.result-detail>summary{padding:10px 11px;border:1px solid var(--color-border);border-radius:1px;background:var(--color-surface);color:#30465b;font-size:14px;font-weight:650;cursor:pointer}.schedule-controls{display:flex;align-items:center;justify-content:space-between;gap:6px;margin-top:10px;color:#697583;font-size:12px}.rent-breakdown{display:grid;gap:9px;margin-top:14px}.rent-option{padding:10px 12px;border:1px solid var(--color-border);border-radius:1px;font-size:13px}.rent-option h3{margin:0 0 5px;color:#30465b;font-size:14px}.rent-option p{margin:0;color:#697583}.loan-list{display:grid;gap:12px;margin-top:20px}.loan-entry{padding:12px;border:1px solid var(--color-border);border-radius:1px;background:var(--color-surface)}.loan-entry .input-grid{gap:10px}.loan-entry-heading{display:flex;align-items:center;justify-content:space-between;margin-bottom:10px;color:var(--color-primary-dark);font-size:14px;font-weight:700}.remove-loan{padding:3px 5px;border:0;background:transparent;color:#697583;font-size:13px}.add-loan{width:100%;min-height:40px;margin-top:10px;padding:9px;border:1px dashed var(--color-border-dark);border-radius:1px;background:#fff;color:var(--color-primary-dark);font-size:14px}
.page-contents{display:flex;flex-wrap:wrap;gap:7px;margin:0;padding:13px;border:2px solid var(--color-border-dark);border-radius:1px;background:var(--color-surface)}.page-contents a{padding:6px 9px;color:#31465b;font-size:13px;font-weight:700}.page-contents a:hover{background:#e9eff5}#calculate,#examples,#calculation-method,#faq{scroll-margin-top:16px}.below-calculator{display:grid;gap:16px}.guide-block{min-width:0;overflow:hidden;border:2px solid var(--color-border-dark);border-radius:1px;background:#fff}.guide-chapter-heading{display:flex;align-items:center;gap:10px;padding:15px 20px;border-bottom:1px solid var(--color-border)}.guide-chapter-heading h2{margin:0;color:#243647;font-size:19px;line-height:1.4;letter-spacing:-.02em}.guide-chapter-body{padding:20px}.guide-chapter-body p,.example-intro,.example-note{margin:0 0 14px;color:#46525f;font-size:14px;line-height:1.9;overflow-wrap:anywhere}.guide-chapter-body p:last-child{margin-bottom:0}.example-note{margin-top:12px!important;font-size:13px!important}.formula{padding:14px 16px;border-radius:1px;background:var(--color-primary-soft);color:#416489;font-size:14px;overflow-wrap:anywhere}.guide-block ul{margin:13px 0 0;padding-left:19px;color:#46525f;font-size:14px;line-height:1.75}.guide-block li+li{margin-top:7px}.faq-item{margin-bottom:8px;overflow:hidden;border:1px solid var(--color-border);border-radius:1px}.faq-item:last-child{margin-bottom:0}.faq-item summary{padding:12px 14px;background:var(--color-surface);color:#30465b;font-size:14px;font-weight:650;line-height:1.6;cursor:pointer}.faq-item[open] summary{border-bottom:1px solid var(--color-border)}.faq-item p{margin:0;padding:13px 14px}.related-links{display:grid;overflow:hidden;border:1px solid var(--color-border);border-radius:1px}.related-links a{display:flex;min-height:44px;align-items:center;justify-content:space-between;gap:10px;padding:10px 13px;border-bottom:1px solid var(--color-border);color:#315f91;font-size:14px;font-weight:600;line-height:1.5}.related-links a:last-child{border-bottom:0}.related-links a:hover{background:var(--color-surface)}.source-list{margin:0!important;padding-left:19px!important;font-size:13px!important}.source-list a{color:#315f91;text-decoration:underline;text-underline-offset:3px}.checked-date{margin-top:14px!important;color:#697583!important;font-size:12px!important}
.article{padding:20px;border:2px solid var(--color-border-dark);border-radius:1px;background:#fff}.article .article-meta{margin-bottom:22px;padding-bottom:16px;border-bottom:1px solid var(--color-border);color:#697583;font-size:12px}.article section+section{margin-top:27px}.article h2{margin:0 0 9px;color:#263b50;font-size:19px;line-height:1.55}.article p{margin:0;color:#46525f;font-size:14px;line-height:1.9}.article .related-links{margin-top:20px}.noscript-note{margin:0;padding:12px;border:1px solid #dfc69f;border-radius:1px;background:#fff7e8;color:#8a5200;font-size:13px}
/* WorkCal category directory and guide cards replace the former LifeCal hero. */
.home-shell{width:100%;margin:0;padding:0}.directory-row .row-description{display:block;margin-top:4px;color:#626b73;font-size:13px;font-weight:400;line-height:1.55}.directory-row>span:first-child{display:block;min-width:0;padding:10px 0;word-break:keep-all;overflow-wrap:anywhere}.home-shell .calculator-link.directory-row[data-astro-cid-lcdefpme]{display:block;flex:0 0 auto;height:auto;white-space:normal}.calculator-link:last-child{border-bottom:0}
.featured-guides{margin-top:16px;padding:18px;border:1px solid #8da1b6;border-radius:0;background:#fff}.featured-guides>header{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:12px;padding-bottom:14px}.featured-guides h2{margin:0;color:#172b45;font-size:20px}.guide-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}.featured-guide{display:flex;min-width:0;flex-direction:column;padding:16px;border:1px solid var(--color-border);border-top:3px solid var(--color-primary);border-radius:0;color:inherit}.featured-guide:hover{background:var(--color-primary-soft);border-color:var(--color-primary)}.featured-guide h3{margin:7px 0;color:#26384c;font-size:16px;line-height:1.5;overflow-wrap:anywhere}.featured-guide p{margin:0 0 14px;color:#626d78;font-size:13px;line-height:1.7}.read-guide{margin-top:auto;color:var(--color-primary-dark);font-size:12px;font-weight:700}
@media(min-width:961px){.calculator-sidebar{position:sticky;top:18px}}
@media(max-width:960px){.content-grid{grid-template-columns:1fr}.calculator-sidebar{grid-template-columns:minmax(0,1fr)}}
@media(max-width:820px){.guide-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:700px){.page-shell{width:calc(100% - 24px);padding-top:12px;padding-bottom:40px}.home-shell{width:100%;padding:0}.calculator-workspace{grid-template-columns:1fr}.input-panel{border-right:0;border-bottom:1px solid var(--color-border)}.guide-chapter-heading{padding:13px 15px}.guide-chapter-heading h2{font-size:18px}.guide-chapter-body,.article{padding:16px 15px}}
@media(max-width:620px){.page-heading{align-items:flex-start;padding-right:13px;padding-left:13px}.panel-heading{align-items:center;column-gap:8px;row-gap:0}.panel-body{padding:14px 13px}.section-head{padding:12px 13px}.input-grid{grid-template-columns:1fr;gap:11px}.field:has(select),.field:has(input[type=checkbox]),.field:has(input[type=date]){grid-column:auto}.field:has(>label+.input-wrap),.field:has(>label+select){display:grid;grid-template-columns:minmax(96px,118px) minmax(0,1fr);align-items:center;gap:5px 8px}.field>label{margin-bottom:0;font-size:14px;line-height:1.3}.field>.field-help,.field>.money-hint,.field>.field-presets{grid-column:1/-1;margin-top:0}.input-wrap,.field select{min-height:44px}.field select,.input-wrap input[type=date]{font-size:14px}.metric{gap:10px}.primary-result{gap:10px;padding:13px 14px}.result-number{max-width:62%;font-size:21px}.result-kicker{flex:1;min-width:0}}
@media(max-width:520px){.guide-grid{grid-template-columns:1fr}.featured-guides{padding:14px}}
@media(max-width:440px){.page-shell{width:calc(100% - 16px)}.home-shell{width:100%}.panel-heading,.page-heading,.panel-body,.section-head{padding-right:10px;padding-left:10px}.field:has(>label+.input-wrap),.field:has(>label+select){grid-template-columns:minmax(92px,39%) minmax(0,1fr);column-gap:7px}.metric{align-items:flex-start;flex-wrap:wrap}.metric dd{margin-left:auto}}
/* WorkCal input rows: label and control share a line on every screen. */
.input-grid{grid-template-columns:minmax(0,1fr)}
.input-grid .field.field-inline{display:grid;grid-template-columns:minmax(98px,36%) minmax(0,1fr);align-items:center;gap:5px 10px}
.input-grid .field.field-inline>label{margin-bottom:0;overflow-wrap:anywhere}
.input-grid .field.field-inline>:is(.field-help,.money-hint,.field-presets){grid-column:2;margin-top:0}
.input-grid .field.field-inline>.field-presets{justify-content:flex-end;gap:5px}
.input-grid .field.field-inline>.field-presets button{max-width:100%;white-space:normal}
.auto-actions{justify-content:flex-end}
@media(max-width:620px){.input-grid .field.field-inline{grid-template-columns:minmax(96px,34%) minmax(0,1fr);column-gap:8px}}
@media(max-width:440px){.input-grid .field.field-inline{grid-template-columns:minmax(90px,34%) minmax(0,1fr);column-gap:7px}}
/* Input explanations are attached to a compact information icon. */
.input-grid .field.field-inline>.field-label{display:flex;align-items:center;gap:4px;min-width:0}
.field-label>label{min-width:0;margin-bottom:0;overflow-wrap:anywhere}
.field-label{display:flex;align-items:center;gap:4px;min-width:0}
.checkbox-field-label>label{flex:1}
.field-info{position:relative;display:inline-flex;flex:0 0 auto;align-items:center}
.field-help-trigger{display:inline-flex;flex:0 0 24px;align-items:center;justify-content:center;width:24px;height:24px;padding:0;border:0;background:transparent;color:var(--color-primary-dark);vertical-align:middle}
.field-help-icon{display:inline-flex;align-items:center;justify-content:center;width:17px;height:17px;border:1px solid currentColor;border-radius:50%;font-family:Georgia,serif;font-size:13px;font-weight:700;line-height:1}
.field-help-trigger:hover .field-help-icon,.field-help-trigger[aria-expanded=true] .field-help-icon{background:var(--color-primary-soft)}
.field-help-trigger:focus-visible{outline:2px solid var(--color-primary);outline-offset:2px}
.field-tooltip{position:fixed;z-index:1000;display:block;box-sizing:border-box;width:min(300px,calc(100vw - 24px));max-height:min(240px,calc(100dvh - 24px));overflow-y:auto;padding:11px 12px;border:1px solid var(--color-border-dark);border-radius:2px;background:#fff;box-shadow:0 4px 14px #172b4526;color:#46525f;font-size:14px;font-weight:400;line-height:1.65;white-space:normal;overflow-wrap:anywhere;text-align:left}

/* Keep amount shortcuts on desktop; remove their row from the mobile form. */
@media(max-width:700px){.field-presets.money-presets{display:none}}

.table-scroll:focus-visible{outline:3px solid var(--color-primary);outline-offset:2px}