:root {--bg:#0f1419;--panel:#172029;--accent:#3fb983;--accent-glow:#55d69c;--text:#f2f5f7;--muted:#7d8a94;--danger:#ff6b6b;--warn:#ffb347;--mono: 'SFMono-Regular', ui-monospace, 'Cascadia Code', 'Consolas', monospace;} .visually-hidden {position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0;} * {box-sizing:border-box;font-family:system-ui,-apple-system,Segoe UI,Roboto,Ubuntu,sans-serif;} body {margin:0;background:var(--bg);color:var(--text);line-height:1.45;-webkit-font-smoothing:antialiased;font-size:16px;} /* Scenario comparison modal */ .modal-overlay {position:fixed;inset:0;background:rgba(4,12,16,.72);backdrop-filter:saturate(130%) blur(4px);display:flex;align-items:flex-start;justify-content:center;padding:4vh 1rem;z-index:400;} .modal-card {background:linear-gradient(180deg,#10222b,#0d171d);border:1px solid #1f3541;box-shadow:0 4px 28px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.04) inset;border-radius:14px;padding:1rem;max-width:960px;width:100%;animation:modalIn .28s ease;} @keyframes modalIn {from {opacity:0;transform:translateY(10px);} to {opacity:1;transform:translateY(0);}} .modal-card table {width:100%;border-collapse:collapse;} .modal-card th,.modal-card td {padding:6px 10px;border-bottom:1px solid #1c2b33;white-space:nowrap;} .modal-card thead th:first-child {text-align:left;} .modal-card tbody th {text-align:left;} .modal-card thead th:not(:first-child), .modal-card tbody td {text-align:center;} .modal-card thead th {position:sticky;top:0;background:#11242c;z-index:2;text-align:center;} .modal-card tbody tr:last-child td {border-bottom:none;} .modal-card td.diff-pos {color:#3fb983;} .modal-card td.diff-neg {color:#ff6b6b;} /* Assumptions & Tips readability enhancements */ .assumptions-grid {display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.15rem 1.25rem;list-style:disc;margin:.55rem 0 .35rem 1.2rem;padding:0;font-size:.72rem;line-height:1.28;} .assumptions-grid li {margin:0 0 .45rem;} @media (min-width:880px){ .assumptions-grid {font-size:.74rem;line-height:1.32;} } .tips-list {margin:.55rem 0 .35rem 1.2rem;padding:0;list-style:disc;font-size:.72rem;line-height:1.34;} .tips-list li {margin:0 0 .5rem;} .assumption-limit {margin:.55rem 0 .2rem;font-size:.68rem;line-height:1.3;opacity:.85;} .tips-footnote {margin:.4rem 0 0;font-size:.64rem;opacity:.7;} /* Global links (high contrast, accessible) */ a { color:#78b7ff; text-decoration:underline; text-underline-offset:2px; font-weight:600; } a:hover { color:#b7dcff; } a:visited { color:#78b7ff; } a:focus-visible { outline:2px solid #3178f0; outline-offset:2px; border-radius:3px; } /* Disclaimer bar */ .disclaimer-bar {display:flex;gap:1rem;align-items:center;font-size:.8rem;background:#151f28;padding:.4rem .9rem;border:1px solid #1e2a34;border-left:none;border-right:none;color:#bcd0dd;} .disclaimer-bar .link-btn {background:none;border:none;color:#78b7ff;cursor:pointer;font-size:.8rem;padding:0;text-decoration:underline;} .disclaimer-bar .link-btn:hover {color:#9cd0ff;} /* Modal */ .rg-modal {position:fixed;inset:0;background:rgba(8,12,16,0.72);backdrop-filter: blur(4px);display:none;align-items:flex-start;justify-content:center;padding:4vh 1rem;z-index:1000;} .rg-modal[aria-hidden="false"] {display:flex;} .rg-modal__dialog {background:#121c24;border:1px solid #25323d;box-shadow:0 8px 32px -8px rgba(0,0,0,0.6);width:min(820px,100%);max-height:92vh;display:flex;flex-direction:column;border-radius:10px;overflow:hidden;} .rg-modal__header {display:flex;align-items:center;justify-content:space-between;padding:.9rem 1.1rem;border-bottom:1px solid #1f2b35;background:linear-gradient(90deg,#15212b,#10181f);} .rg-modal__header h2 {margin:0;font-size:1.25rem;letter-spacing:.5px;} .rg-modal__body {padding:1rem 1.2rem;overflow:auto;font-size:.95rem;display:flex;flex-direction:column;gap:.9rem;max-width:720px;margin:0 auto;} .rg-modal__body h3 {margin:1.1rem 0 .5rem;font-size:1.05rem;letter-spacing:.3px;color:#d5e9f6;} .rg-modal__body p {font-size:1rem;line-height:1.65;color:#e4eef6;margin:.35rem 0 .7rem;} .rg-modal__body ul, .rg-modal__body ol {margin:.2rem 0 1rem 1.25rem; padding:0; font-size:.96rem; line-height:1.55; list-style-position:outside;} .rg-modal__body li {margin:.3rem 0;} .rg-modal__body .badge {font-size:.6rem;} .rg-modal__body abbr {border-bottom:1px dotted #3fb983; text-decoration:none;} .rg-modal__body h3 {margin:1.2rem 0 .4rem;font-size:.85rem;text-transform:uppercase;letter-spacing:.7px;color:#8fbad6;} .rg-modal__body ul {margin:.2rem 0 0 1.1rem;padding:0;} .rg-modal__body li {margin:.25rem 0 .25rem;} .rg-modal__footer {display:flex;justify-content:flex-end;gap:.5rem;padding:.75rem 1rem;border-top:1px solid #1f2b35;background:#131d25;} /* Center the first-time welcome modal vertically on the page */ #welcomeModal { align-items: center; } .close-btn {background:none;border:none;color:#6a8291;font-size:1.2rem;cursor:pointer;line-height:1;padding:.2rem .4rem;border-radius:4px;} .close-btn:hover {color:#b3c7d4;background:#1e2a34;} .primary-btn {background:linear-gradient(135deg, #2563eb 0%, #3b82f6 100%);border:1px solid #3b82f6;color:#fff;font-weight:600;padding:.55rem 1.1rem;border-radius:8px;cursor:pointer;font-size:.8rem; text-decoration:none !important; display:inline-block;box-shadow:0 2px 8px -2px rgba(37, 99, 235, 0.4), 0 0 0 1px rgba(255,255,255,0.1) inset;transition:all 0.2s ease;} .primary-btn:hover {background:linear-gradient(135deg, #3b82f6 0%, #2563eb 100%);box-shadow:0 4px 14px -2px rgba(37, 99, 235, 0.5), 0 0 0 1px rgba(255,255,255,0.15) inset;transform:translateY(-1px);} .primary-btn:active {transform:translateY(0);box-shadow:0 1px 4px -1px rgba(37, 99, 235, 0.4);} .primary-btn:visited { color:#fff; } .assumption-tag {display:inline-block;background:#1a2731;color:#9dc2d8;border:1px solid #243340;padding:.1rem .45rem;font-size:.65rem;text-transform:uppercase;letter-spacing:.7px;border-radius:4px;margin-right:.35rem;} /* Inline method tooltip */ .method-tip {position:relative;cursor:help;border-bottom:1px dotted #678aa1;} .method-tip:hover .method-tip__card, .method-tip:focus .method-tip__card {opacity:1;transform:translateY(0);pointer-events:auto;} .method-tip__card {position:absolute;left:0;top:100%;margin-top:.4rem;background:#132029;padding:.55rem .7rem;border:1px solid #20303b;border-radius:6px;min-width:220px;max-width:360px;font-size:.7rem;line-height:1.3;color:#d5e3ea;box-shadow:0 6px 22px -6px rgba(0,0,0,.5);opacity:0;transform:translateY(4px);transition:.16s ease;pointer-events:none;z-index:20;} .method-tip__card:before {content:"";position:absolute;top:-6px;left:12px;width:10px;height:10px;background:#132029;border-left:1px solid #20303b;border-top:1px solid #20303b;transform:rotate(45deg);} h1 {margin:0;font-size:1.5rem;letter-spacing:.3px;display:flex;align-items:center;gap:.6rem;white-space:nowrap;} .rg-logo {display:inline-flex;vertical-align:middle;margin:0;position:static;} .rg-logo svg {display:block;} .rg-logo .shield {fill:none;stroke:#fff;stroke-width:2;stroke-linejoin:round;} .rg-logo .u-shape {fill:none;stroke:#fff;stroke-width:2.4;stroke-linecap:round;stroke-linejoin:round;} .app-header {padding:1rem 1.5rem;border-bottom:1px solid #22313f;background:linear-gradient(135deg,#15202b,#101820);} .header-top {display:flex;align-items:center;justify-content:space-between;gap:1rem;flex-wrap:nowrap;} .main-nav {display:flex;align-items:center;justify-content:center;gap:1.15rem;font-size:.75rem;font-weight:600;letter-spacing:.6px;flex-wrap:wrap;flex:1 1 auto;} .main-nav .nav-primary {display:flex;align-items:center;gap:1.15rem;justify-content:center;flex:1 1 auto;flex-wrap:wrap;} .main-nav .nav-auth {margin-left:auto;display:flex;align-items:center;gap:.55rem;background:linear-gradient(145deg,#141e26,#121a21);padding:.35rem .55rem;border:1px solid #1e2b34;border-radius:14px;box-shadow:0 2px 10px -4px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.03) inset;backdrop-filter:blur(3px);} .main-nav .nav-auth:hover {border-color:#283944;} .main-nav .nav-auth > .nav-link.nav-signup {margin-left:.15rem;} .main-nav .nav-auth > .nav-link.nav-login {margin-right:.4rem;} .main-nav .nav-auth #planBadge {margin-left:.2rem;} .main-nav .nav-auth #upgradeHeaderBtn {margin-left:.3rem;box-shadow:0 2px 8px -3px rgba(0,0,0,.55);} .main-nav .nav-auth #upgradeHeaderBtn:hover {box-shadow:0 4px 14px -4px rgba(0,0,0,.7);} .main-nav .nav-auth::before {content:"";position:absolute;} .main-nav .nav-auth {position:relative;} .main-nav .nav-auth:after {content:"";position:absolute;inset:0;border-radius:inherit;pointer-events:none;background:radial-gradient(circle at 85% 25%,rgba(255,255,255,.07),transparent 65%);} @media (max-width:960px){ .main-nav .nav-auth {flex-wrap:wrap;justify-content:flex-end;gap:.4rem;padding:.45rem .6rem;} .main-nav .nav-auth #upgradeHeaderBtn {order:5;width:100%;justify-content:center;} .main-nav .nav-auth #planBadge {order:4;} } @media (max-width: 640px) { .main-nav .nav-auth { width: 100%; justify-content: center; margin-left: 0; } .main-nav .nav-auth > .nav-link.nav-signup, .main-nav .nav-auth > .nav-link.nav-login { flex: 1 1 0; justify-content: center; } } .main-nav .nav-link {text-decoration:none;color:#cfe0ea;position:relative;padding:.35rem .55rem;border-radius:8px;border:1px solid transparent;background:#18252e;font-size:.62rem;letter-spacing:.8px;text-transform:uppercase;font-weight:600;display:inline-flex;align-items:center;line-height:1.1;} .main-nav .nav-link:hover {background:#20313c;color:#fff;border-color:#2a3f4d;} .main-nav .nav-link:focus-visible {outline:2px solid #3178f0;outline-offset:2px;} .main-nav .nav-link.nav-link--ghost {background:transparent;border-color:transparent;padding:0;font-size:.72rem;letter-spacing:.3px;text-transform:none;color:#c4d5e0;font-weight:500;line-height:1.4;} .main-nav .nav-link.nav-link--ghost:hover, .main-nav .nav-link.nav-link--ghost:focus-visible {background:transparent;border-color:transparent;color:#7fc4ff;text-decoration:underline;text-underline-offset:2px;} .main-nav .nav-link.nav-login {background:linear-gradient(155deg,#192b36,#212f3a 52%,#1b2832);border:1px solid #2b4757;padding:.5rem .9rem;font-size:.6rem;letter-spacing:.75px;box-shadow:0 2px 6px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;font-weight:650;min-height:34px;} .main-nav .nav-link.nav-login:hover {background:linear-gradient(155deg,#203646,#2b3f4a 55%,#23323d);border-color:#365c6e;} .main-nav .nav-link.nav-login:active {transform:translateY(1px);} .main-nav .nav-link.nav-login::before {content:"";width:14px;height:14px;margin-right:6px;display:inline-block;background:linear-gradient(150deg,#ffffff,#d8eaff);border-radius:4px;mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 17a5 5 0 1 0 0-10 5 5 0 0 0 0 10z"/%3E%3Cpath d="M20 21a8 8 0 0 0-16 0"/%3E%3C/svg%3E') center/14px 14px no-repeat;} .main-nav .nav-link.nav-signup {background:linear-gradient(155deg,#225038,#1c3d2b 54%,#183526);border:1px solid #2d6548;box-shadow:0 2px 7px -2px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.05) inset;padding:.55rem 1rem;font-size:.6rem;letter-spacing:.75px;font-weight:700;min-height:34px;} .main-nav .nav-link.nav-signup:hover {background:linear-gradient(155deg,#296246,#204c36 55%,#1f4030);border-color:#37855d;} .main-nav .nav-link.nav-signup:active {transform:translateY(1px);} .main-nav .nav-link.nav-signup::before {content:"";width:14px;height:14px;margin-right:6px;display:inline-block;background:linear-gradient(150deg,#ffffff,#d8ffe9);border-radius:4px;mask:url('data:image/svg+xml,%3Csvg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="black" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"%3E%3Cpath d="M12 5v14"/%3E%3Cpath d="M5 12h14"/%3E%3C/svg%3E') center/14px 14px no-repeat;} .main-nav .plan-inline {margin-left:.25rem;background:#1e2d38 !important;color:#7fc4ff !important;border:1px solid #26465d !important;font-size:.55rem;letter-spacing:.5px;padding:2px 6px;} .main-nav .nav-upgrade {padding:.45rem .85rem;font-size:.62rem;border-radius:10px;letter-spacing:.6px;} @media (max-width:860px){ .main-nav {flex:1 1 100%;justify-content:flex-start;gap:.6rem;margin-top:.65rem;} .main-nav .nav-primary {justify-content:flex-start;} .main-nav .nav-upgrade {margin-left:auto;} } /* Mobile: Better header wrapping and touch targets */ @media (max-width: 768px) { .app-header { padding: 0.85rem 1rem; } .header-top { gap: 0.8rem; } .header-top h1 { font-size: 1.1rem; flex: 1 1 auto; } .rg-logo svg { width: 28px; height: 28px; } .tagline { font-size: 0.8rem; margin-top: 0.4rem; } .disclaimer-bar { flex-direction: column; align-items: flex-start; gap: 0.5rem; padding: 0.6rem 1rem; } .main-nav { gap: 0.5rem; margin-top: 0.5rem; } .main-nav .nav-link { min-height: 38px; padding: 0.5rem 0.7rem; font-size: 0.65rem; } .main-nav .nav-link.nav-login, .main-nav .nav-link.nav-signup { min-height: 42px; padding: 0.6rem 1rem; } } /* Narrow mobile: compact header */ @media (max-width: 580px) { .header-top { flex-direction: column; align-items: flex-start; gap: 0.6rem; } .header-top h1 { font-size: 1rem; } .main-nav { width: 100%; margin-top: 0.4rem; } .main-nav .nav-auth { width: 100%; justify-content: center; } } .tagline {margin:.25rem 0 0;font-size:.9rem;color:var(--muted);} .layout {display:grid;grid-template-columns:370px 1fr;min-height:calc(100vh - 120px);} /* Centered single-column page wrap for legal/marketing pages */ .page-wrap {max-width:1040px;margin:0 auto;padding:1rem 1rem 2rem;} /* Mobile: Stack layout vertically */ @media (max-width: 800px) { .layout { grid-template-columns: 1fr; grid-template-rows: auto auto; min-height: auto; } .inputs { border-right: none; border-bottom: 1px solid #22313f; } .panel { padding: 0.85rem 1rem; } } .panel {padding:1rem 1.25rem;overflow:auto;} .inputs {background:var(--panel);border-right:1px solid #22313f;} .inputs-header{display:flex;align-items:center;justify-content:space-between;gap:.5rem;margin:0 0 .25rem 0} .results {background:#0c1116;} /* Prevent horizontal spill in results panel */ .results { overflow-x: hidden; overflow-y: auto; } fieldset {border:1px solid #22313f;border-radius:6px;margin:0 0 .9rem;padding:.75rem .75rem .9rem;} legend {padding:0 .4rem;font-size:.8rem;font-weight:600;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);} label {display:flex;justify-content:space-between;align-items:center;font-size:.85rem;margin:.45rem 0;gap:.5rem;} label .label-caption {display:flex;align-items:center;gap:.3rem;} label.with-filter .label-caption {display:block;} /* Reusable info icon chip */ .info-icon {display:inline-flex;align-items:center;justify-content:center;width:16px;height:16px;font-size:.55rem;font-weight:600;color:var(--accent);border:1px solid #275a43;border-radius:50%;cursor:help;position:relative;transition:.15s;background:#10231a;flex-shrink:0;line-height:1} .legend .info-icon, legend .info-icon{ width:14px; height:14px; font-size:.5rem; margin-left:8px; } /* Allow hovering label text to also indicate help */ .label-caption[data-tip], label[data-tip]{ cursor:help; } .info-icon:hover, .info-icon:focus-visible {background:#174f37;color:#d9ffe9;outline:none;} /* Backwards compatibility in labels */ label .info-icon {margin-left:.25rem} label .info-icon::after {content:attr(data-tip);position:absolute;left:100%;top:50%;transform:translateY(-50%) translateX(10px);min-width:230px;max-width:360px;pointer-events:none;opacity:0;transition:.15s;z-index:80;background:#0d161c;padding:.65rem .75rem;border:1px solid #1e2a33;border-radius:6px;font-size:.74rem;line-height:1.28;color:var(--text);box-shadow:0 4px 22px -4px rgba(0,0,0,.62);} @media (max-width:640px){ label .info-icon::after {left:50%;top:110%;transform:translateX(-50%);} } /* Mobile: Make tooltips appear above to prevent off-screen */ @media (max-width: 768px) { label .info-icon::after { left: 50%; top: auto; bottom: 120%; transform: translateX(-50%); max-width: 280px; font-size: 0.7rem; } /* Touch-friendly info icons */ .info-icon { width: 20px; height: 20px; font-size: 0.65rem; } } label .info-icon:hover::after, label .info-icon:focus-visible::after {opacity:1;} label input {flex:1;max-width:150px;background:#101920;border:1px solid #22313f;border-radius:4px;padding:.45rem .55rem;color:var(--text);font-size:.85rem;} /* Checkbox styling - keep compact */ input[type="checkbox"] { flex: none !important; max-width: none !important; width: 18px; height: 18px; padding: 0 !important; margin: 0 6px 0 0; cursor: pointer; accent-color: #3fb983; } /* Mobile: Prevent iOS auto-zoom on input focus */ @media (max-width: 768px) { label input:not([type="checkbox"]), select, textarea { font-size: 16px !important; min-height: 44px; padding: 0.55rem 0.65rem; } /* Keep checkboxes small on mobile */ input[type="checkbox"] { width: 20px; height: 20px; min-height: 20px !important; padding: 0 !important; } button, .primary-btn, .secondary { min-height: 44px; padding: 0.7rem 1rem; } .export-btn, .action-btn { min-height: 44px; padding: 0.85rem 1.1rem; } } /* Subtle highlight for preset-controlled (locked) fields */ .preset-locked { border-color:#2a3f66 !important; background:#0f1820 !important; box-shadow:inset 0 0 0 1px rgba(64,112,176,.25); } .preset-locked:disabled { color:#cfdbe3; opacity:1; cursor:not-allowed; } /* PRESET chip positioned neatly at label top-right */ label.preset-fixed { position:relative; } label.preset-fixed::after { content:'Preset'; position:absolute; top:-6px; right:6px; font-size:.52rem; letter-spacing:.5px; color:#9fb5c9; background:#102131; border:1px solid #22313f; padding:.08rem .35rem; border-radius:999px; } /* Themed selects to match inputs */ label select, select { background:#101920; border:1px solid #22313f; border-radius:4px; color:var(--text); padding:.45rem .55rem; font-size:.85rem; } label select:hover, select:hover { border-color:#2a3a46; } label select:focus-visible, select:focus-visible { outline:2px solid #3178f0; outline-offset:2px; } /* Dark dropdown list items (where supported) */ select option { background:#0f151b; color:var(--text); } /* Filtered select layout */ label.with-filter {flex-direction:column;align-items:flex-start;gap:.35rem;} label.with-filter .label-caption {width:100%;} /* mini-filter removed for currency/country; keeping rule harmless for any future use */ label.with-filter .mini-filter {display:none;width:100%;max-width:100%;background:#101920;border:1px solid #22313f;border-radius:4px;padding:.4rem .55rem;font-size:.8rem;} label.with-filter select {width:100%;max-width:100%;} button {cursor:pointer;background:var(--accent);color:#041b11;border:none;border-radius:6px;padding:.6rem .9rem;font-weight:600;font-size:.8rem;letter-spacing:.5px;box-shadow:0 0 0 0 rgba(63,185,131,.4);transition:.25s;} button:hover {background:var(--accent-glow);box-shadow:0 0 0 4px rgba(63,185,131,.15);} button:active {transform:translateY(1px);} /* Export actions group (professional buttons) */ /* Export actions polished aesthetic */ .export-actions {display:flex;align-items:center;flex-wrap:wrap;gap:.9rem;margin:1.05rem 0 .85rem;position:relative;} /* Dark professional variant */ .export-btn {position:relative;--btn-bg:linear-gradient(165deg,#142c22 0%,#163629 40%,#13412e 100%);--btn-border:#1d5a41;--btn-edge:#0d1914;--btn-glow:rgba(34,118,78,.32);background:var(--btn-bg);color:#e6fff5;padding:.78rem 1.25rem;font-size:.73rem;letter-spacing:.4px;font-weight:600;border:1px solid var(--btn-border);border-radius:14px;display:inline-flex;align-items:center;gap:.65rem;line-height:1;box-shadow:0 2px 10px -4px rgba(0,0,0,.65), 0 0 0 1px var(--btn-edge) inset, 0 1px 0 rgba(255,255,255,.06) inset;transition:background .6s ease, box-shadow .25s, transform .18s; background-size:160% 160%; background-position:0 0; overflow:hidden; isolation:isolate; backdrop-filter:blur(2px);} .export-btn:before {content:"";width:18px;height:18px;border-radius:5px;background:linear-gradient(160deg,#ffffff,#d9f5ec);display:inline-block;box-shadow:0 1px 2px rgba(0,0,0,.25), inset 0 0 0 1px rgba(255,255,255,.4);position:relative;flex-shrink:0;} /* Vector mask icons */ .export-btn.-pdf:before {mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 1h5.5L14 5.5V15a1 1 0 0 1-1 1H4a1 1 0 0 1-1-1V2a1 1 0 0 1 1-1zm5.5 1.5V6h4.5L9.5 2.5z'/%3E%3C/svg%3E") center / 16px 16px no-repeat;} .export-btn.-csv:before {mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='18' height='18' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h12v12H2z' fill='none' stroke='white' stroke-width='1.3'/%3E%3Cpath d='M5 2v12M9 2v12M2 6h12M2 10h12' stroke='white' stroke-width='1'/%3E%3C/svg%3E") center / 16px 16px no-repeat;} /* Ambient shine layer */ .export-btn:after {content:"";position:absolute;inset:0;background: linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%), radial-gradient(circle at 25% 18%,rgba(255,255,255,.22),rgba(255,255,255,0) 65%); mix-blend-mode:overlay;opacity:.4;transition:.5s ease;pointer-events:none;} .export-btn:hover {background-position:100% 0;box-shadow:0 4px 18px -6px rgba(0,0,0,.7), 0 0 0 3px var(--btn-glow), 0 0 0 1px rgba(255,255,255,.06) inset;} .export-btn:hover:after {opacity:.6;} .export-btn:active {transform:translateY(2px);box-shadow:0 2px 10px -4px rgba(0,0,0,.65), 0 0 0 2px var(--btn-glow);} .export-btn:focus-visible {outline:2px solid #e8fff7;outline-offset:3px;} /* PDF (deep green) */ .export-btn.-pdf {--btn-bg:linear-gradient(165deg,#133226,#184636 45%,#115236 100%);--btn-border:#1c5d44;--btn-glow:rgba(47,161,109,.34);} /* CSV (deep teal) */ .export-btn.-csv {--btn-bg:linear-gradient(165deg,#123038,#184853 45%,#145461 100%);--btn-border:#1f5a63;--btn-glow:rgba(40,153,167,.32);} .export-btn.-csv:before {background:linear-gradient(160deg,#ffffff,#dff5f7);} .export-btn.-csv:hover {box-shadow:0 4px 18px -6px rgba(0,0,0,.7), 0 0 0 3px rgba(40,153,167,.34);} /* Reduced uppercase heaviness: keep readability */ .export-btn {text-transform:none;} .export-actions #exportStatus {flex:1;min-width:160px;} /* Optional loading state (future JS can toggle) */ .export-btn.loading {pointer-events:none;opacity:.75;} .export-btn.loading:before {animation:spin 1s linear infinite;background:linear-gradient(160deg,#fff,#d8f2e7);mask:none;border-radius:50%;} @keyframes spin {to{transform:rotate(360deg);} } /* Secondary button style for both */ /* */ /* ------------------------------------------------------ */ .action-btn {position:relative;background:linear-gradient(165deg,#173b66 0%,#1f528c 45%,#2561a3 100%);color:#e6f3ff;padding:.78rem 1.25rem;font-size:.73rem;letter-spacing:.4px;font-weight:600;border:1px solid #2c6fb5;border-radius:14px;display:inline-flex;align-items:center;gap:.55rem;line-height:1;box-shadow:0 2px 10px -4px rgba(0,0,0,.65),0 0 0 1px #0d2234 inset,0 1px 0 rgba(255,255,255,.07) inset;transition:background .55s ease,box-shadow .25s,transform .18s;background-size:160% 160%;background-position:0 0;isolation:isolate} .action-btn:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(255,255,255,.08),rgba(255,255,255,0) 40%),radial-gradient(circle at 25% 18%,rgba(255,255,255,.22),rgba(255,255,255,0) 65%);mix-blend-mode:overlay;opacity:.45;transition:.5s ease;pointer-events:none;border-radius:inherit} .action-btn:hover{background-position:100% 0;box-shadow:0 4px 18px -6px rgba(0,0,0,.7),0 0 0 3px rgba(66,137,201,.32),0 0 0 1px rgba(255,255,255,.07) inset} .action-btn:hover:after{opacity:.62} .action-btn:active{transform:translateY(2px);box-shadow:0 2px 10px -4px rgba(0,0,0,.6),0 0 0 2px rgba(66,137,201,.34)} .action-btn:focus-visible{outline:2px solid #8fc5ff;outline-offset:3px} /* Sub / neutral variant */ .action-btn.-sub{background:linear-gradient(165deg,#1a2732 0%,#1e303c 50%,#203744 100%);color:#d5e2ea;border:1px solid #2b4454;box-shadow:0 2px 10px -4px rgba(0,0,0,.55),0 0 0 1px #11202a inset,0 1px 0 rgba(255,255,255,.05) inset} .action-btn.-sub:hover{box-shadow:0 4px 16px -6px rgba(0,0,0,.7),0 0 0 3px rgba(90,140,170,.28),0 0 0 1px rgba(255,255,255,.06) inset;background:linear-gradient(165deg,#1c2a36 0%,#233642 55%,#274050 100%)} .action-btn.-sub:active{transform:translateY(2px)} .action-btn.-sub:focus-visible{outline:2px solid #6fb5ff;outline-offset:3px} .persist-controls {display:flex;flex-wrap:wrap;gap:.4rem;margin-top:.6rem;} .metric-row {display:flex;gap:1rem;margin:1rem 0 1.25rem;font-size:.9rem;} /* ... existing styles ... */ .metric-row > div {flex:1;background:#111a22;padding:.6rem .7rem;border:1px solid #1e2a33;border-radius:6px;min-height:62px;} /* Give breathing room when an info icon follows a metric title */ .metric-row strong + .info-icon { margin-left:.45rem; top:-1px; } .ci-block { display: flex; align-items: center; gap: .4rem; margin-top: .35rem; } .ci-caption { font-size: .62rem; font-weight: 600; letter-spacing: .6px; color: #9bd9bf; background: #0f1f19; border: 1px solid #1f3b2c; padding: .22rem .45rem; border-radius: 6px; } #rciLevel { background: #13231d; border: 1px solid #1f3b2c; color: #cbe8dc; font-size: .6rem; font-weight: 500; padding: .25rem .4rem; border-radius: 6px; cursor: pointer; letter-spacing: .5px; } #rciLevel:focus-visible { outline: 2px solid var(--accent-glow); outline-offset: 2px; } #rciLevel:hover { background: #163626; } .ci-label { font-size: .7rem; font-weight: 500; color: #b9e9d3; background: #11231b; padding: .2rem .55rem; border: 1px solid #1f3b2c; border-radius: 6px; display: inline-block; min-width: 100px; text-align: center; letter-spacing: .4px; font-variant-numeric: tabular-nums; cursor: help; } .ci-label.stale { opacity: .6; } .hero-metric {font-size:2.2rem;font-weight:600;margin-top:0;} /* ... existing styles ... */ /* Results header + hero metric polish */ .results-title { margin:.85rem 0 .3rem; font-size:1.65rem; letter-spacing:.4px; } .hero-wrap{display:flex;gap:.75rem;align-items:flex-start;flex-wrap:wrap} @media (min-width: 1024px){ /* Remove large gap pushing explain box to far right */ .hero-wrap{justify-content:flex-start} } .hero-explain{flex:1;min-width:360px;max-width:540px;margin-top:-2.05rem;padding-top:.35rem;position:relative;z-index:1} /* Remove default top margin from metric-explain block when in hero */ .hero-explain.metric-explain{margin-top:0;} @media (max-width:1100px){ .hero-explain{min-width:320px;max-width:520px;margin-top:-1.6rem;} } @media (max-width:960px){ .hero-explain{min-width:100%;max-width:100%;padding-top:.35rem;margin-top:0;} } .hero-metric { display:block; font-size:2.4rem; font-weight:700; letter-spacing:.2px; line-height:1.05; margin-right:.4rem; } .hero-metric small { margin-top:.35rem; font-size:.7rem; letter-spacing:1.1px; color:#91a9b9; display:block; text-transform:uppercase; } .hero-metric .info-icon { margin-left:.4rem; vertical-align:middle; position:relative; top:-2px; } .pie-section {margin:1.2rem 0 1rem;background:#111a22;border:1px solid #1e2a33;border-radius:6px;padding:.8rem .9rem;} .pie-section .subhead {margin:.1rem 0 .6rem;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);} .pie-section .subhead .info-icon { margin-left:.5rem; position:relative; top:-1px; } .pie-row {display:flex;align-items:center;gap:1.4rem;flex-wrap:wrap;} .pie-legend {display:flex;flex-direction:column;gap:.4rem;font-size:.9rem;min-width:220px;} .pie-notes {flex:1;min-width:300px;background:#101920;border:1px solid #1e2a33;border-radius:6px;padding:.6rem .7rem;font-size:.8rem;line-height:1.35;color:#cbd6dc} .pie-notes h4{margin:.1rem 0 .35rem;font-size:.78rem;letter-spacing:.6px;text-transform:uppercase;color:#8fbad6} .pie-notes ul{margin:.1rem 0 0 1rem;padding:0} .pie-notes li{margin:.18rem 0} .iec {margin:.5rem 0 0;padding:.5rem .6rem;border:1px dashed #243746;border-radius:6px;background:#0f1a21;font-size:.78rem;display:flex;flex-wrap:wrap;gap:.7rem;align-items:center} .iec .tag {display:inline-flex;align-items:center;gap:.35rem;background:#101c24;border:1px solid #22313f;color:#d6e6f0;padding:.25rem .5rem;border-radius:999px;font-size:.72rem} .iec .up {color:#9ff0c4} .iec .down {color:#ffb4a2} .iec .sep {opacity:.45} .why-chip {display:inline-flex;align-items:baseline;gap:.3rem;margin-left:.5rem;font-size:.62rem;letter-spacing:.3px;background:#12202a;border:1px solid #1c2e39;color:#9cc6d8;padding:.12rem .45rem;border-radius:6px;vertical-align:baseline;cursor:help;line-height:1} .source-chip {display:inline-flex;align-items:center;gap:.35rem;border-radius:999px;padding:.2rem .55rem;font-size:.62rem;letter-spacing:.4px;border:1px solid transparent} .source-chip.itemized {background:#0f231a;border-color:#1f3b2c;color:#a7e5c8} .source-chip.manual {background:#0f1b22;border-color:#20323b;color:#a9bfd0} .badge-neutral {background:#1a2a34;border:1px solid #263a47;color:#9fb5c1} .pie-legend-item {display:flex;align-items:center;gap:.5rem;} .pie-swatch {width:16px;height:16px;border-radius:3px;flex-shrink:0;} .hero-metric small {display:block;font-size:.65rem;font-weight:500;text-transform:uppercase;letter-spacing:1px;color:var(--muted);margin-top:.15rem;} .hero-context{margin-top:.35rem;display:flex;gap:.45rem;flex-wrap:wrap;align-items:center} .hero-context .badge{background:#14222a;border:1px solid #263a47;color:#cbd6dc;padding:.28rem .6rem;border-radius:999px;font-size:.78rem;font-weight:600;letter-spacing:.2px;line-height:1;font-variant-numeric:tabular-nums} .hero-context .badge.-gap-pos{background:#2a1b1b;border-color:#6b2f2f;color:#ffb4a2} .hero-context .badge.-gap-zero{background:#12261d;border-color:#2f6b4f;color:#9ff0c4} .explain {font-size:.9rem;color:var(--muted);} .plan {margin:1rem 0;font-size:.9rem;line-height:1.35;background:#111a22;padding:.85rem .9rem;border:1px solid #1e2a33;border-radius:6px;} .plan { max-width:920px; margin:1.1rem 0 .9rem 0; /* left-align (remove auto center) */ position:relative; background:linear-gradient(145deg,#111a22,#101920); box-shadow:0 4px 18px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,0.02); } .plan:before { content:"Plain Words Plan"; position:absolute; top:-9px; left:14px; font-size:.55rem; letter-spacing:1px; font-weight:600; padding:.15rem .55rem; background:#0f1b22; border:1px solid #22313f; border-radius:999px; color:#8fbad6; text-transform:uppercase; } .plan p { margin:.4rem 0 .6rem; } .plan p:last-child { margin-bottom:.2rem; } .suggestions { max-width:920px; margin:.4rem 0 1rem 0; /* left-align */ } .tax-alert {background:#1d2c16;border:1px solid #2f4d23;padding:.65rem .75rem;border-radius:6px;font-size:.8rem;margin:.6rem 0;color:#d3f7c7;display:flex;align-items:center;gap:.6rem;} .tax-alert strong {color:#9feb74;} .suggestions {margin:.75rem 0;font-size:.78rem;line-height:1.3;background:#111a22;padding:.7rem .8rem;border:1px dashed #2a3945;border-radius:6px;} .suggestions h3 {margin:.1rem 0 .4rem;font-size:.65rem;letter-spacing:1px;text-transform:uppercase;color:var(--muted);} .suggestions ul {margin:.2rem 0 .4rem;padding-left:1.1rem;} .suggestions li {margin:.25rem 0;} .micro-help {font-size:.65rem;color:var(--muted);margin:.4rem 0 0;} .app-footer {padding:1rem 1.5rem;border-top:1px solid #22313f;font-size:.88rem;color:var(--muted);text-align:center;} .app-footer small { font-size: inherit; } .app-footer a { color:#78b7ff; text-decoration:underline; text-underline-offset:2px; font-weight:600; } .app-footer a:hover { color:#b7dcff; } .app-footer a:visited { color:#78b7ff; } .app-footer a:focus-visible { outline:2px solid #3178f0; outline-offset:2px; border-radius:3px; } .app-footer__inner {display:flex;flex-direction:column;gap:.8rem;align-items:center;justify-content:center;text-align:center;margin:0 auto;max-width:1060px;} .footer-social {display:flex;gap:1.1rem;flex-wrap:wrap;align-items:center;justify-content:center;color:inherit;} .footer-social__link {display:inline-flex;align-items:center;justify-content:center;color:#9fb5c4;padding:.3rem;border-radius:999px;transition:color .18s ease, background-color .18s ease;} .footer-social__link svg {width:20px;height:20px;display:block;fill:none;stroke:currentColor;stroke-width:1.6;} .footer-social__link:hover {color:#cde3ff;} .footer-social__link:focus-visible {outline:2px solid #3178f0;outline-offset:3px;color:#cde3ff;} @media (min-width:720px){ .app-footer__inner {flex-direction:row;justify-content:space-between;text-align:left;align-items:flex-start;gap:1.5rem;} .app-footer small {text-align:left;white-space:nowrap;margin-right:1.5rem;} .footer-social {justify-content:flex-end;flex-wrap:nowrap;margin-left:auto;} } #balanceChart {width:100%;background:#111a22;border:1px solid #1e2a33;border-radius:6px;} #ttrChart {width:100%;background:#111a22;border:1px solid #1e2a33;border-radius:6px;} #ttrExplain { font-size:.85rem; line-height:1.4; color:#d5e3ea; margin-top:.35rem; } #ttrExplain .ttr-notes { margin:.15rem 0 0 .9rem; padding:0; } #ttrExplain .ttr-notes li { margin:.18rem 0; list-style:disc; } #ttrSummary { font-size:.85rem; line-height:1.4; color:#cbd6dc; margin:.18rem 0 0 .9rem; display:list-item; list-style:disc; list-style-position:outside; } #riskTornado {width:100%;max-width:100%;display:block;background:#111a22;border:1px solid #1e2a33;border-radius:6px;} #ruinCurveChart {width:100%;background:#111a22;border:1px solid #1e2a33;border-radius:6px;} .info-fly{position:fixed;background:#0d161c;border:1px solid #1e2a33;color:var(--text);padding:.65rem .8rem;border-radius:8px;box-shadow:0 8px 24px -8px rgba(0,0,0,.6);z-index:1000;max-width:380px;font-size:.95rem;line-height:1.35;pointer-events:none;transition:opacity .12s ease,transform .12s ease;} .info-fly[data-side="left"]::after,.info-fly[data-side="right"]::after{content:'';position:absolute;top:50%;transform:translateY(-50%);width:0;height:0;border:8px solid transparent;} .info-fly[data-side="right"]::after{left:-1px;border-right-color:#1e2a33;margin-left:-16px;} .info-fly[data-side="left"]::after{right:-1px;border-left-color:#1e2a33;margin-right:-16px;} /* Disable legacy pseudo-element tooltips in favor of JS-driven .info-fly */ .range-val{display:inline-block;min-width:44px;text-align:right;font-variant-numeric:tabular-nums;background:#0f1c24;border:1px solid #21313c;color:#cfe9ff;padding:2px 6px;margin-left:8px;border-radius:14px;font-size:.6rem;line-height:1.1;font-weight:500;} .range-val[data-delta="1"]{background:#172c35;color:#9bd2ff;} .range-val[data-delta="2"]{background:#1d3328;color:#9ff0c4;} .range-val.negative{background:#341d1d;color:#ffb4a2;border-color:#4d2d2d;} label .info-icon::after { display:none !important; } label .info-icon:hover::after, label .info-icon:focus-visible::after { opacity:0 !important; } .chart-wrapper {position:relative;margin-top:.5rem; overflow:visible;} .chart-wrapper canvas {display:block;max-width:100%;} .pie-row canvas {max-width:100%;} .chart-overlay-tip {position:absolute;pointer-events:none;background:#0d161c;border:1px solid #1e2a33;padding:.5rem .7rem;border-radius:6px;font-size:.82rem;line-height:1.25;color:var(--text);box-shadow:0 4px 14px -4px #000;transform:translate(-50%,-110%);white-space:nowrap;z-index:120;} .chart-legend {display:flex;flex-wrap:wrap;gap:.6rem;font-size:.8rem;margin:.5rem 0 0;} .chart-legend span {display:inline-flex;align-items:center;gap:.5rem;background:#0f1a21;padding:.38rem .75rem;border:1px solid #22313f;border-radius:999px;box-shadow:inset 0 0 0 1px rgba(255,255,255,0.04);} .chart-legend i.legend-line {width:26px;height:6px;border-radius:4px;display:inline-block;} /* Net Equation Map legend tweaks */ .netmap-row { display:grid; grid-template-columns: 1fr auto; gap:.8rem; align-items:start; } .chart-legend.netmap span {background:#0f1a21;border-color:#20303b;color:#d7edf8;} .chart-legend.netmap .legend-line {height:6px;border-radius:4px;} .netmap-row {display:flex;gap:.4rem;align-items:center;} .netmap-row .chart-wrapper {flex: 1 1 75%;min-width:75%;} .flow-summary {flex:0 0 25%;max-width:25%;min-width:260px;font-size:.8rem;line-height:1.3;background:#0f1b22;border:1px solid #20323b;border-radius:10px;padding:.6rem .7rem;color:#cfe9ff;} .flow-summary strong {color:#e4f6ff} /* Polished Net Equation Map summary rows */ .flow-summary .fs-list{display:flex;flex-direction:column;gap:.25rem} .flow-summary .fs-row{display:grid;grid-template-columns:auto 1fr auto;gap:.55rem;align-items:center;padding:.28rem .2rem;border-radius:6px} .flow-summary .fs-row .fs-swatch{width:18px;height:8px;border-radius:4px;display:inline-block;box-shadow:inset 0 1px 0 rgba(255,255,255,.14)} .flow-summary .fs-row .fs-label{color:#d7edf8} .flow-summary .fs-row .fs-label .muted{opacity:.7;font-weight:500} .flow-summary .fs-row .fs-label .msign{opacity:.9;color:#9fb5c9;margin-right:.15rem} .flow-summary .fs-row .fs-amount{font-variant-numeric:tabular-nums;color:#cfe9ff} .flow-summary .fs-row .unit{opacity:.7;margin-left:.1rem} .flow-summary .fs-row.-income{background:#0e1820;border:1px solid #1b2a36} .flow-summary .fs-row.-deduct{background:#0e151b;border:1px solid #1a2731} .flow-summary .fs-row.-deduct.is-zero{opacity:.6} .flow-summary .fs-row.-total{margin-top:.15rem;border:1px dashed #27424f;background:#0d161c} .flow-summary .fs-row.-total.-pos{border-color:#2a5f4e;background:#0e1b16} .flow-summary .fs-row.-total.-neg{border-color:#6a2e2a;background:#1a1010} @media (max-width: 980px){ .netmap-row {flex-direction:column; align-items:flex-start;} /* on narrow screens keep natural top alignment */ .netmap-row .chart-wrapper {flex: 1 1 auto; min-width:100%;} .flow-summary {flex: 1 1 auto; max-width:100%;} } .legend-line {width:18px;height:4px;border-radius:2px;display:inline-block;} /* Itemized Totals: polished layout */ .totals-wrap{background:#0f1a21;border:1px solid #20303b;border-radius:8px;padding:.55rem .6rem;margin-top:.35rem} .totals-head{display:flex;align-items:center;justify-content:space-between} .totals-title{display:flex;align-items:center;gap:.5rem} .totals-kpis{display:grid;grid-template-columns:repeat(3,minmax(140px,1fr));gap:.5rem;margin-top:.35rem} .kpi{background:#0f1b22;border:1px solid #1e2a33;border-radius:8px;padding:.45rem .55rem} .kpi .lab{font-size:.68rem;color:#8fbad6;margin-bottom:.15rem} .kpi .val{font-size:1rem;font-weight:600;color:#e4f6ff;display:flex;justify-content:flex-end;gap:.2rem} .kpi .unit{font-size:.68rem;opacity:.7} .kpi.-net.-pos .val{color:#9ff0c4} .kpi.-net.-neg .val{color:#ffb4a2} .totals-hint{margin-top:.25rem} .diff-grid{display:grid;grid-template-columns:1fr repeat(3,auto);gap:.5rem;margin-top:.4rem;align-items:center} .diff-grid .diff-cell{justify-self:end} .no-items-hint{margin-top:.25rem} @media (max-width: 720px){ .totals-kpis{grid-template-columns:1fr;} .diff-grid{grid-template-columns:1fr;} .diff-grid .diff-cell{justify-self:start} } /* Balance chart explanation bullets */ #balanceExplain { font-size:.82rem; color:#d5e3ea; margin:.2rem 0 0; } #balanceExplain .balance-notes { margin:.15rem 0 0 1rem; padding:0; } #balanceExplain .balance-notes li { list-style:disc; margin:.18rem 0; } .legend-median {background:#3fb983;} .legend-p5 {background:#ff6b6b;} /* Debug console */ .debug-console {background:#0c141a;border:1px solid #22313f;border-radius:6px;padding:.5rem .6rem;font-family:ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,"Liberation Mono","Courier New",monospace;font-size:.72rem;line-height:1.35;max-height:180px;overflow:auto;white-space:pre-wrap;} .debug-console .dbg-row {border-bottom:1px dashed #1b2630;padding:.2rem 0;} .debug-console .dbg-row:last-child {border-bottom:none;} .debug-console .ts {opacity:.6;margin-right:.4rem} .debug-console .tag {display:inline-block;min-width:46px;text-align:center;font-size:.65rem;color:#cbd6dc;background:#102029;border:1px solid #20323b;border-radius:4px;padding:0 .3rem;margin-right:.4rem} .debug-console .err {color:#ff9f9f} .autosave-hint {margin-left:auto;} .ai-box { margin:1.5rem 0 0; padding:1.2rem 1.3rem 1.4rem; background:linear-gradient(145deg, #0f1a21 0%, #111d26 100%); border:1px solid #2a3e4d; border-radius:12px; font-size:.85rem; box-shadow:0 4px 20px -6px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.02) inset; position:relative; isolation:isolate; } .ai-box::before { content:""; position:absolute; inset:0; background:radial-gradient(circle at 80% 20%, rgba(59, 130, 246, 0.06), transparent 60%), radial-gradient(circle at 20% 80%, rgba(16, 185, 129, 0.04), transparent 50%); border-radius:inherit; pointer-events:none; z-index:-1; } .ai-box h3 { margin:0 0 .5rem; font-size:1rem; letter-spacing:.8px; text-transform:uppercase; color:#5eead4; display:flex; align-items:center; gap:.6rem; font-weight:700; } .ai-box h3::before { content:""; display:inline-block; width:4px; height:20px; background:linear-gradient(180deg, #3b82f6 0%, #10b981 100%); border-radius:2px; box-shadow:0 0 12px rgba(59, 130, 246, 0.4); animation:aiPulse 3s ease-in-out infinite; } @keyframes aiPulse { 0%, 100% { box-shadow:0 0 12px rgba(59, 130, 246, 0.4); opacity:1; } 50% { box-shadow:0 0 20px rgba(59, 130, 246, 0.6), 0 0 40px rgba(16, 185, 129, 0.3); opacity:0.85; } } /* Blur gating state */ .ai-box.ai-blurred {position:relative;} .ai-box.ai-blurred .prompt-shell, .ai-box.ai-blurred .prompt-text, .ai-box.ai-blurred .prompt-toolbar, .ai-box.ai-blurred .ai-actions, .ai-box.ai-blurred .ai-disclaimer { filter:blur(4px); user-select:none; pointer-events:none; opacity:.55; } .ai-blur-overlay {position:absolute;inset:0;display:flex;align-items:center;justify-content:center;padding:1rem;background:linear-gradient(135deg,rgba(15,25,32,0.75),rgba(18,32,40,0.85));backdrop-filter:blur(6px) saturate(140%);border-radius:6px;z-index:10;border:1px solid #20313b;box-shadow:0 4px 20px -6px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,0.03) inset;} .ai-blur-inner {max-width:500px;text-align:center;display:flex;flex-direction:column;gap:.65rem;} .ai-blur-title {margin:0;font-size:.85rem;letter-spacing:.6px;color:#8fd3b1;text-transform:uppercase;} .ai-blur-copy {margin:0;font-size:.68rem;line-height:1.35;color:#cde6f1;} .ai-blur-actions {display:flex;gap:.6rem;flex-wrap:wrap;justify-content:center;} .ai-blur-why {font-size:.6rem;line-height:1.3;color:#a3bcc9;background:#102029;border:1px solid #22313f;padding:.45rem .55rem;border-radius:6px;} /* Enhanced AI prompt shell */ .prompt-shell {position:relative;margin-top:.4rem;} .prompt-text {width:100%;resize:vertical;background:#0d151b;color:var(--text);border:1px solid #1e2a33;border-radius:6px;padding:.65rem .8rem .85rem;font-family:var(--mono);font-size:.7rem;line-height:1.32;box-shadow:inset 0 0 0 1px #121f27,0 2px 6px -2px #000;transition:.18s;border-top-left-radius:8px;border-top-right-radius:8px;} .prompt-text:focus {outline:2px solid #2a4858;} .prompt-toolbar {position:absolute;top:4px;right:6px;display:flex;gap:.35rem;} .prompt-toolbar .mini {padding:.25rem .5rem;font-size:.55rem;letter-spacing:.6px;border-radius:5px;background:#1c2730;color:#b9c7d1;border:1px solid #2a3a46;cursor:pointer;} .prompt-toolbar .mini:hover {background:#25323c;color:#d8e4ea;} .prompt-toolbar .mini:active {transform:translateY(1px);} .ghost {background:#1c2730;} .primary-popup {background:#2d6fe8;color:#fff;border:1px solid #3178f0;font-weight:600;} .primary-popup:hover {background:#3880fb;} .primary-popup:active {transform:translateY(1px);} .ai-actions {display:flex;align-items:center;gap:.7rem;margin-top:.4rem;flex-wrap:wrap;} .ai-btn {display:inline-flex;align-items:center;padding:.55rem 1rem;font-size:.8rem;font-weight:600;border-radius:8px;transition:all 0.2s ease;box-shadow:0 2px 8px -2px rgba(0,0,0,0.3), 0 0 0 1px rgba(255,255,255,0.1) inset;} .ai-btn:hover {transform:translateY(-1px);box-shadow:0 4px 14px -2px rgba(0,0,0,0.4), 0 0 0 1px rgba(255,255,255,0.15) inset;} .ai-btn:active {transform:translateY(0);box-shadow:0 1px 4px -1px rgba(0,0,0,0.3);} /* Mobile responsive AI buttons */ @media (max-width: 640px) { .ai-actions { gap:.45rem; } .ai-btn { flex: 1 1 calc(50% - .25rem); padding:.45rem .65rem; font-size:.72rem; justify-content:center; min-width:0; } .ai-btn svg { margin-right:.3rem; width:14px; height:14px; } } @media (max-width: 420px) { .ai-actions { gap:.35rem; } .ai-btn { flex: 1 1 100%; padding:.5rem .55rem; font-size:.7rem; } } .ai-response {margin-top:.6rem;padding:.55rem .6rem;background:#10181f;border:1px solid #1e2a33;border-radius:4px;max-height:220px;overflow:auto;font-family:var(--mono);font-size:.65rem;white-space:pre-wrap;} .ai-disclaimer{ margin:.6rem 0 0; font-size:.62rem; line-height:1.35; color:#9fb5c9; background:#0f1a21; border:1px solid #1e2a33; padding:.45rem .55rem; border-radius:6px; } .prompt-preview summary {cursor:pointer;font-size:.6rem;color:var(--muted);} .prompt-preview pre {margin:.4rem 0 0;} .prompt-text {width:100%;resize:vertical;background:#0d151b;color:var(--text);border:1px solid #1e2a33;border-radius:4px;padding:.65rem .7rem;font-family:var(--mono);font-size:.72rem;line-height:1.3;} .about-app {margin:0 0 .9rem;font-size:.85rem;line-height:1.35;background:#111a22;padding:.75rem .8rem;border:1px solid #1e2a33;border-radius:6px;} .about-app p {font-size:1.02rem;} .about-app summary {cursor:pointer;font-weight:600;color:var(--accent);} /* About trigger: simple text with green caret (drilldown look) */ .about-link {display:inline-flex; align-items:center; gap:.5rem; background:none; border:none; padding:0; color:var(--text); text-decoration:none; font-weight:600; font-size:1rem; letter-spacing:0; box-shadow:none;} .about-link::before {content:'\25B6'; /* ▶ */ display:inline-block; color:var(--accent); font-size:.95rem;} .about-link:hover {color:#e4eef6;} .about-link:visited {color:var(--text);} .about-link:focus-visible {outline:2px solid #3178f0; outline-offset:2px; border-radius:3px;} .glossary {margin:.4rem 0 0;padding-left:1.1rem;font-size:.72rem;} .text-size-controls {position:absolute;top:10px;right:14px;display:flex;gap:.4rem;} .text-size-controls .sm {padding:.35rem .55rem;font-size:.65rem;min-width:42px;} .glossary li {margin:.25rem 0;} .badge {display:inline-block;padding:.15rem .5rem;border-radius:999px;font-size:.55rem;letter-spacing:.5px;background:#1c2730;color:var(--muted);margin-right:.4rem;} .badge.plan-warning {background:#38220f !important;color:#ffb347 !important;border:1px solid #8a5a17 !important;animation:planPulse 1.8s ease-in-out infinite;} .badge.plan-expiring {background:#3a1d1d !important;color:#ff8b7a !important;border:1px solid #6d2f2f !important;animation:planPulseFast 1.3s ease-in-out infinite;} @keyframes planPulse {0%,100%{box-shadow:0 0 0 0 rgba(255,179,71,0.2);}50%{box-shadow:0 0 0 6px rgba(255,179,71,0);} } @keyframes planPulseFast {0%,100%{box-shadow:0 0 0 0 rgba(255,107,107,0.28);}50%{box-shadow:0 0 0 6px rgba(255,107,107,0);} } .upgrade-expiry-note {background:#241b0d;border:1px solid #3d2b12;padding:.55rem .65rem;border-radius:6px;font-size:.6rem;line-height:1.35;color:#ffcc8a;display:flex;gap:.6rem;align-items:flex-start;} .upgrade-expiry-note strong {color:#ffb347;} /* Unified lock tooltip */ .lock-tip {position:fixed;z-index:2000;background:#0d161c;color:#f2f5f7;padding:.45rem .55rem;border:1px solid #21313b;border-radius:6px;font-size:.58rem;line-height:1.25;box-shadow:0 6px 18px -6px rgba(0,0,0,.55);max-width:240px;pointer-events:none;opacity:0;transform:translateY(-4px);transition:.15s ease;} .lock-tip.show {opacity:1;transform:translateY(0);} /* Calendar export button (professional aesthetic) */ .export-ics-inline{display:inline-flex;align-items:center;gap:.45rem;padding:.45rem .7rem;border-radius:10px;border:1px solid #2b5744;background:#1a3a2d;color:#d8f5e7;font-weight:600;cursor:pointer;box-shadow:inset 0 0 0 1px rgba(255,255,255,.05), 0 2px 6px -2px rgba(0,0,0,.5)} .export-ics-inline .ico{width:16px;height:16px;fill:#b8e7d2} .export-ics-inline .txt{letter-spacing:.2px} .export-ics-inline:hover{background:#214836;border-color:#356b53;color:#e7fff3} .export-ics-inline:active{transform:translateY(1px)} .export-ics-inline:focus-visible{outline:2px solid #3aa57a; outline-offset:2px} /* Mobile responsiveness for pie sections and informational text */ @media (max-width: 720px) { .pie-section { padding: .7rem .75rem; box-sizing: border-box; overflow: hidden; } .pie-row { flex-direction: column; width: 100%; max-width: 100%; box-sizing: border-box; overflow: hidden; } .pie-row > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .pie-legend { min-width: 0 !important; width: 100%; } .pie-notes { flex: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding: .55rem .6rem; font-size: .75rem; box-sizing: border-box; } .pie-notes h4 { font-size: .72rem; margin: .1rem 0 .3rem; } .pie-notes li { margin: .15rem 0; line-height: 1.4; } .iec { padding: .45rem .5rem; gap: .6rem; font-size: .72rem; } .iec .tag { font-size: .68rem; padding: .22rem .45rem; gap: .3rem; } /* Net Equation Map - stack summary below chart on tablets */ .netmap-row { flex-direction: column; gap: .8rem; } .netmap-row .chart-wrapper { flex: 1 1 100%; min-width: 100%; width: 100%; } .flow-summary { flex: 1 1 100%; max-width: 100%; min-width: 100%; width: 100%; } } @media (max-width: 640px) { .pie-section { padding: .6rem .65rem; margin: 1rem 0 .8rem; box-sizing: border-box; overflow: hidden; } .pie-row { gap: 1rem; flex-direction: column; width: 100%; max-width: 100%; overflow: hidden; } .pie-row > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .pie-legend { min-width: 0 !important; font-size: .85rem; width: 100%; } .pie-notes { flex: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding: .5rem .55rem; font-size: .7rem; box-sizing: border-box; overflow-wrap: break-word; word-wrap: break-word; } .pie-notes h4 { font-size: .68rem; letter-spacing: .4px; } .pie-notes ul { margin: .1rem 0 0 .8rem; padding-right: 0; } .pie-notes li { margin: .12rem 0; line-height: 1.45; overflow-wrap: break-word; word-wrap: break-word; } .iec { padding: .4rem .45rem; gap: .5rem; font-size: .68rem; } .iec .tag { font-size: .64rem; padding: .2rem .4rem; gap: .28rem; } /* Net Equation Map - ensure full width on phones */ .netmap-row { flex-direction: column; } .flow-summary { font-size: .75rem; padding: .55rem .6rem; } .flow-summary .fs-row { gap: .45rem; padding: .25rem .15rem; } } @media (max-width: 480px) { .pie-section { padding: .55rem .6rem; box-sizing: border-box; overflow: hidden; } .pie-row { width: 100%; max-width: 100%; overflow: hidden; } .pie-row > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; box-sizing: border-box; } .pie-legend { min-width: 0 !important; width: 100%; font-size: .82rem; gap: .35rem; } .pie-legend-item { gap: .4rem; } .pie-notes { flex: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding: .45rem .5rem; font-size: .68rem; box-sizing: border-box; } .pie-notes h4 { font-size: .65rem; margin: .05rem 0 .25rem; } .pie-notes ul { margin: .05rem 0 0 .7rem; padding-right: 0; } .pie-notes li { margin: .1rem 0; font-size: .66rem; overflow-wrap: break-word; } .iec { flex-direction: column; align-items: flex-start; padding: .35rem .4rem; gap: .4rem; font-size: .66rem; } .iec .tag { font-size: .62rem; padding: .18rem .38rem; } .pie-legend { min-width: 160px; font-size: .82rem; gap: .35rem; } .pie-legend-item { gap: .4rem; } /* Net Equation Map - ultra compact */ .flow-summary { font-size: .7rem; padding: .5rem .55rem; } .flow-summary .fs-row { gap: .4rem; padding: .22rem .1rem; font-size: .68rem; } .flow-summary .fs-row .fs-swatch { width: 14px; height: 7px; } } /* Ultra-strict mobile portrait (360px and below) */ @media (max-width: 400px) { .pie-section { padding: .5rem .55rem; overflow: hidden; } .pie-row { gap: .8rem; overflow: hidden; } .pie-row > * { width: 100% !important; max-width: 100% !important; min-width: 0 !important; } .pie-row canvas { max-width: 100% !important; width: 100% !important; height: auto !important; } .pie-notes { flex: none !important; min-width: 0 !important; max-width: 100% !important; width: 100% !important; padding: .4rem .45rem; font-size: .66rem; } .pie-notes h4 { font-size: .63rem; margin: .05rem 0 .2rem; letter-spacing: .3px; } .pie-notes ul { margin: .05rem 0 0 .6rem; padding: 0; } .pie-notes li { margin: .08rem 0; font-size: .64rem; line-height: 1.5; word-break: break-word; overflow-wrap: break-word; } .pie-notes strong { word-break: break-word; } .pie-legend { font-size: .78rem; gap: .3rem; min-width: 0 !important; width: 100% !important; } .pie-legend-item { gap: .35rem; } } /* Print-friendly layout */ @media print { body, .results, .hero-metric, .plan, .suggestions, .pie-section, #ruinCurveWrap, #balanceChart, #riskPie, #cashFlowPie { background:#fff !important; color:#000 !important; } body { -webkit-print-color-adjust:exact; print-color-adjust:exact; } .app-header { border:none; background:#fff !important; } /* Removed non-print CSS that hides main UI sections */ /* Keeping print-only versions inside @media print */ button, .secondary, .primary-btn, .primary-popup, .rci-btn, #calcCurveBtn, #calcTtrBtn, #exportCsvBtn, #exportPdfBtn { display:none !important; } .metric-row > div { border:1px solid #000 !important; background:#fff !important; } .pie-section { border:1px solid #000 !important; } canvas { filter:contrast(1.1); } #printSummary { display:block !important; page-break-after:avoid; margin:0 0 1rem 0; font-size:.75rem; } #printSummary h2 { margin:.2rem 0 .4rem; font-size:1.1rem; } #printSummary table { width:100%; border-collapse:collapse; font-size:.6rem; } #printSummary th, #printSummary td { border:1px solid #000; padding:3px 4px; text-align:left; } #planBadge { border:1px solid #000 !important; background:#fff !important; color:#000 !important; animation:none !important; } } .alert {color:var(--danger);} .success {color:var(--accent-glow);} /* ---------------- Rate Advisor (Themed) ---------------- */ .rate-advisor { background:linear-gradient(145deg,#111a22,#101920 60%); border:1px solid #1e2a33; border-radius:10px; padding:1rem 1.15rem 1.1rem; margin:1.2rem 0 1rem; box-shadow:0 3px 14px -6px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,0.015); position:relative; } .rate-advisor .subhead { margin:.1rem 0 .65rem; font-size:1rem; letter-spacing:.6px; text-transform:uppercase; color:var(--accent); display:flex; align-items:center; gap:.55rem; } .rate-layout { display:flex; flex-wrap:wrap; gap:1.3rem; align-items:stretch; } .rate-left { flex:1 1 340px; min-width:280px; max-width:560px; } .rate-core { display:flex; gap:1.25rem; flex-wrap:wrap; align-items:flex-end; margin:0 0 .65rem; } .rate-hourly { font-size:1.85rem; font-weight:650; letter-spacing:.5px; line-height:1; } .rate-hourly small { font-size:.65rem; font-weight:500; margin-left:.35rem; } .rate-daily { font-size:1.15rem; font-weight:550; opacity:.9; line-height:1; } .rate-daily small { font-size:.6rem; margin-left:.3rem; } .rate-note { font-size:.6rem; max-width:300px; color:var(--muted); } .rate-tuners { display:flex; gap:1rem; flex-wrap:wrap; font-size:.63rem; align-items:center; margin:.2rem 0 .65rem; } .rate-tuners label { margin:0; gap:.4rem; font-weight:600; font-size:.63rem; letter-spacing:.4px; } .rate-tuners input { width:70px !important; text-align:center; font-weight:600; font-size:.7rem; padding:.4rem .5rem; } .rate-tuners input:focus { outline:2px solid var(--accent-glow); outline-offset:2px; } .rate-decomp { flex:1 1 240px; min-width:240px; background:#101920; border:1px solid #1e2a33; border-radius:10px; padding:.75rem .85rem .8rem; font-size:.64rem; line-height:1.42; color:#d1dde4; box-shadow:0 2px 10px -6px rgba(0,0,0,.5); } .rate-decomp.-primary { background:#101b23; border-color:#22313f; box-shadow:0 3px 16px -8px rgba(0,0,0,.6), inset 0 0 0 1px rgba(255,255,255,.02); } .rate-decomp h4 { margin:0 0 .5rem; font-size:.7rem; letter-spacing:.55px; text-transform:uppercase; color:#8fbad6; } .rate-decomp ul { margin:0; padding-left:1.05rem; list-style:disc; } .rate-decomp li { margin:.22rem 0; } .rate-decomp li strong { color:#e4f6ff; } .rate-decomp li.margin-line { color:#9ff0c4; } .rate-decomp li.util-line { color:#b9e9d3; } .rate-decomp li.gross-line { color:#cfe9ff; } .rate-decomp li.hourly-line { color:#9ff0c4; font-weight:600; } .rate-advisor .metric-bullets { font-size:.66rem; line-height:1.42; padding-left:1.1rem; margin:.25rem 0 .5rem; } .rate-advisor .metric-bullets li { margin:.22rem 0; } .rate-advisor .metric-bullets.-readable { font-size:.7rem; line-height:1.5; letter-spacing:.15px; } .rate-advisor .metric-bullets.-readable li { margin:.28rem 0; } .rate-advisor .metric-bullets li.margin-positive { color:#9ff0c4; } .rate-advisor .metric-bullets li.no-gap { opacity:.85; } @media (min-width:1200px){ .rate-layout { justify-content:flex-start; } .rate-decomp.-primary { transform:translateX(-3vw); transition:transform .25s ease; } .rate-decomp.-primary:hover { transform:translateX(-3vw) translateY(-2px); } } @media (max-width:860px){ .rate-decomp { order:3; flex:1 1 100%; } } @media (max-width:520px){ .rate-hourly { font-size:1.55rem; } .rate-daily { font-size:1rem; } } /* -------------------------------------------------------- */ ::-webkit-scrollbar {width:10px;}::-webkit-scrollbar-track {background:#0f151b;}::-webkit-scrollbar-thumb {background:#22313f;border-radius:6px;}::-webkit-scrollbar-thumb:hover {background:#2e3e4d;} @media (max-width:980px){.layout{grid-template-columns:1fr;} .inputs{border-right:none;border-bottom:1px solid #22313f;} } /* Scenario Manager Refinement */ .scenario-manager {margin-top:1.2rem;padding:0.85rem 0.85rem 1rem;border:1px solid #1e2a33;border-radius:8px;background:#111a22;position:relative;overflow:hidden;} .scenario-header {display:flex;align-items:center;justify-content:space-between;margin:0 0 .55rem 0;} .scenario-header h3 {margin:0;font-size:.95rem;letter-spacing:.5px;text-transform:uppercase;color:var(--accent);} .scenario-header h3 .info-icon{ margin-left:.4rem; width:14px; height:14px; font-size:.5rem; } .scenario-count {font-size:.6rem;letter-spacing:.5px;text-transform:uppercase;background:#1c2730;border:1px solid #22313f;padding:.25rem .5rem;border-radius:999px;color:var(--muted);} .scenario-count[data-tip]{ cursor:help; } .scenario-row {display:flex;gap:.6rem;align-items:center;margin-bottom:.55rem;flex-wrap:wrap;} .scenario-row-secondary {margin-top:-.15rem;} .scenario-name {flex:1;min-width:160px;background:#101920;border:1px solid #22313f;border-radius:6px;padding:.55rem .65rem;font-size:.75rem;color:var(--text);} .scenario-action-group {display:flex;gap:.4rem;flex-wrap:wrap;} .scenario-actions-grid {display:grid;grid-template-columns:repeat(auto-fill,minmax(110px,1fr));gap:.6rem .7rem;width:100%;} .scenario-actions-grid .mini-btn {justify-content:center;} /* Primary & danger accents for key actions */ .scenario-actions-grid .scen-primary {background:linear-gradient(160deg,#0f3a2a,#145c40);border:1px solid #1e6d50;color:#e7fff5;font-weight:600;} .scenario-actions-grid .scen-primary:hover {background:linear-gradient(160deg,#145c40,#187250);} .scenario-actions-grid .scen-danger {background:linear-gradient(160deg,#522626,#6b2d2d);border:1px solid #823636;color:#ffe9e9;font-weight:600;} .scenario-actions-grid .scen-danger:hover {background:linear-gradient(160deg,#6b2d2d,#7d3434);} .mini-btn {padding:.4rem .7rem;font-size:.62rem;line-height:1;border-radius:5px;letter-spacing:.5px;font-weight:500;} .scen-btn {position:relative;display:inline-flex;align-items:center;gap:.45rem;padding:.55rem .85rem;font-size:.62rem;line-height:1;font-weight:600;letter-spacing:.55px;border-radius:8px;background:linear-gradient(145deg,#18242c,#141d24);color:#d9e6ee;border:1px solid #253545;box-shadow:0 1px 2px -1px rgba(0,0,0,.55),0 0 0 1px rgba(255,255,255,.02) inset;transition:background .5s ease,box-shadow .25s,transform .18s;backdrop-filter:blur(1px);min-height:34px} .scen-btn:before {content:"";width:14px;height:14px;opacity:.55;background:linear-gradient(#cfe9ff,#f6ffff);border-radius:4px;box-shadow:0 0 0 1px rgba(255,255,255,.25) inset,0 1px 2px rgba(0,0,0,.4);mask-size:14px 14px;mask-repeat:no-repeat;mask-position:center;} .scen-btn:hover {background:linear-gradient(145deg,#1d2d37,#17252d 55%,#162831);color:#fff;box-shadow:0 3px 12px -4px rgba(0,0,0,.6),0 0 0 1px rgba(255,255,255,.04) inset;} .scen-btn:active {transform:translateY(1px);} .scen-btn:focus-visible {outline:2px solid #3fb983;outline-offset:2px;} /* Icon masks per action (data-action attribute added automatically if desired) */ #saveScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M2 2h9l3 3v9a1 1 0 0 1-1 1H2z'/>");} #updateScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3E%3Cpath fill='white' d='M8 1l3 3H9v4H7V4H5l3-3zm5 7c.552 0 1 .448 1 1v5c0 .552-.448 1-1 1H3c-.552 0-1-.448-1-1V9c0-.552.448-1 1-1h2v2H4v4h8V9h-1V7h2z'/%3E%3C/svg>%0A");} #deleteScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 4h10l-1 10H4L3 4zm2-2h6l1 2H4l1-2z'/%3E%3C/svg>");} #compareScenariosBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M5 2h2v12H5zM9 2h2v12H9z'/%3E%3C/svg>");} #exportScenariosBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 1l3 3H9v3H7V4H5l3-3zM4 9h8v2H4zm0 3h5v2H4z'/%3E%3C/svg>");} #importScenariosBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M8 15l-3-3h2V9h2v3h2l-3 3zM4 2h8v2H4zm0 3h5v2H4z'/%3E%3C/svg>");} #renameScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M12.3 1.3L14.7 3.7 6 12.4 3 13l.6-3L12.3 1.3zM2 14h12v1H2z'/%3E%3C/svg>");} #sortScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M4 3h8v2H4zm2 4h6v2H6zm2 4h4v2H8z'/%3E%3C/svg>");} #densityScenarioBtn.scen-btn:before {mask-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='white' viewBox='0 0 16 16'%3E%3Cpath d='M3 3h10v2H3zm0 4h10v2H3zm0 4h10v2H3z'/%3E%3C/svg>");} /* Variants */ .scen-btn.-primary {background:linear-gradient(160deg,#133226,#184536 55%,#115536 100%);border:1px solid #1c5d44;color:#e8fff6;} .scen-btn.-primary:hover {background:linear-gradient(160deg,#164031,#1d5d43 55%,#156843 100%);} .scen-btn.-danger {background:linear-gradient(155deg,#341818,#472121 55%,#552727);border:1px solid #6a3232;color:#ffe5e5;} .scen-btn.-danger:hover {background:linear-gradient(155deg,#3e1d1d,#542828 55%,#632f2f);} .scen-btn.-danger:before {background:linear-gradient(#ffe5e5,#fff);} .scenario-hint {flex:1;min-width:180px;margin:0;} .scenario-list-wrap {position:relative;border:1px solid #1e2a33;border-radius:6px;overflow:hidden;background:#0f171d;} #scenarioList {width:100%;height:140px;background:transparent;border:none;padding:.4rem .45rem .6rem;font-size:.65rem;line-height:1.2;resize:vertical;outline:none;scrollbar-width:thin;} #scenarioList option {padding:.15rem .3rem;border-radius:4px;margin:.1rem 0;cursor:pointer;background:#0f1b22;color:#d5e2e9;} #scenarioList option:nth-child(odd){background:#102028;} #scenarioList option:checked {background:#2a4352;color:#ffffff;font-weight:500;} #scenarioList:focus option:checked {outline:1px solid #5aa1c7;} #scenarioList option:hover {background:#1d313c;} .scenario-compact #scenarioList {font-size:.58rem;line-height:1.05;padding:.3rem .4rem;} .scenario-compact #scenarioList option {padding:.1rem .25rem;margin:.05rem 0;} .scenario-renamed {animation: scenRenameFlash 1.6s ease-out 1;} @keyframes scenRenameFlash {0%{background:#3d6b80;color:#fff;}60%{background:#2a4352;}100%{background:inherit;}} .scenario-fade-top,.scenario-fade-bottom {position:absolute;left:0;right:0;height:14px;pointer-events:none;} .scenario-fade-top {top:0;background:linear-gradient(to bottom,#111a22,rgba(17,26,34,0));} .scenario-fade-bottom {bottom:0;background:linear-gradient(to top,#111a22,rgba(17,26,34,0));} .scenario-feedback {margin-top:.45rem;min-height:1em;} .scenario-manager button.secondary.mini-btn:hover {background:#2a3945;} .scenario-manager button.secondary.mini-btn:active {transform:translateY(1px);} /* Itemized lists */ .itemized .mini-h{margin:.2rem 0 .25rem;font-size:.78rem;letter-spacing:.5px;text-transform:uppercase;color:var(--accent)} /* Keep summary visible when scrolling the Results panel */ .sticky-summary{position:sticky;top:8px;z-index:20;background:#0f1a21;border:1px solid #20303b;border-radius:6px;padding:.25rem .5rem;display:inline-block} /* Make columns roomy so Name and Amount are readable */ .item-grid{ display:grid; grid-template-columns:minmax(180px,1.4fr) minmax(130px,1fr) minmax(130px,.9fr) minmax(68px,auto); gap:.6rem; align-items:center; background:#0f1a21; border:1px solid #20303b; border-radius:6px; padding:.55rem; width:100%; overflow-x:auto } .item-grid .hdr{font-size:.68rem;color:#8fbad6;white-space:nowrap} .item-grid input,.item-grid select{background:#101920;border:1px solid #22313f;border-radius:4px;padding:.35rem .45rem;color:var(--text);font-size:.78rem;min-width:0;max-width:100%;width:100%} /* Right-align numeric amounts for visibility */ .item-grid input[type=number]{text-align:right;font-variant-numeric:tabular-nums} .item-grid .row{display:contents} .item-grid .del{background:#2a3640;border:1px solid #31424f;color:#cfdbe3;padding:.3rem .55rem;border-radius:5px;font-size:.62rem} .item-actions{margin-top:.35rem} .item-apply{display:flex;align-items:center;margin-top:.6rem} .backfill-note{margin-left:.6rem;opacity:.85} @media (max-width: 520px){ .item-grid{grid-template-columns:minmax(0,1fr) minmax(120px,1fr);} /* ensure amount stays readable */ } /* ====================================== */ /* Mobile-specific enhancements */ /* ====================================== */ @media (max-width: 768px) { /* Prevent horizontal scroll on narrow screens */ body { overflow-x: hidden; } /* Charts: ensure canvas doesn't overflow */ canvas { max-width: 100% !important; height: auto !important; } /* Tables and grids: allow horizontal scroll within container */ .results table, .item-grid, .export-actions { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* Modals: full-width on mobile */ .rg-modal__dialog, .modal-card { margin: 0.5rem; max-width: calc(100vw - 1rem); } /* Scenario manager: better mobile layout */ .scenario-row { flex-direction: column; align-items: stretch; } .scenario-actions-grid { grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 0.4rem; } /* Metric tiles: stack vertically on mobile */ .metric-row { flex-direction: column !important; align-items: stretch !important; gap: 0.8rem !important; } .metric-tile { width: 100% !important; } /* Export actions: stack vertically */ .export-actions { flex-direction: column; align-items: stretch; } .export-btn { width: 100%; justify-content: center; } /* Form labels: stack on very narrow screens */ @media (max-width: 480px) { label { flex-direction: column; align-items: flex-start; gap: 0.35rem; } label input:not([type="checkbox"]), label select { width: 100%; max-width: 100%; } /* Labels with checkboxes stay horizontal */ label:has(input[type="checkbox"]) { flex-direction: row; align-items: center; } } } /* Metric explanation blocks: compact, scannable rows */ .metric-explain { margin-top:.5rem; background:#101920; border:1px solid #1e2a33; border-radius:8px; padding:.8rem 1rem; font-size:.75rem; color:#cbd6dc; display:flex; flex-direction:column; gap:.2rem; box-shadow: 0 2px 10px rgba(0,0,0,.18); } /* Two-column grid per row for tidy alignment */ .metric-explain .mrow { display:grid; grid-template-columns:auto 1fr; align-items:center; column-gap:.6rem; } /* Subtle separators between rows for structure */ .metric-explain .mrow + .mrow { border-top:1px dashed #1b2832; margin-top:.25rem; padding-top:.35rem; } /* Pill-style keys */ .metric-explain .k { font-size:.68rem; letter-spacing:.6px; color:#a9bfd0; background:#0f1b22; border:1px solid #21313b; padding:.22rem .6rem; border-radius:999px; text-transform:uppercase; line-height:1; font-weight:600; flex:0 0 auto; } .metric-explain .v { flex:1; min-width:0; color:#d3e2ea; line-height:1.35; font-variant-numeric:tabular-nums; } /* Status accents */ .metric-explain .v.ok { color:#9ff0c4; font-weight:600; } .metric-explain .v.warn { color:#ffcc8a; font-weight:600; } .metric-explain .v.bad { color:#ffb4a2; font-weight:600; } /* Solo message variant (single-row blocks) */ .metric-explain.-solo { padding:.5rem .6rem; border-radius:8px; } /* Bullet list variant for hero explanation */ .hero-points { list-style:disc; margin:.15rem 0 .25rem 1.1rem; padding:0; font-size:.78rem; line-height:1.4; color:#d5e3ea; } .hero-points li { margin:.28rem 0; } .hero-points li strong { color:#eaf5fb; } .hero-points li.status-gap strong { color:#ffb4a2; } .hero-points li.status-gap { color:#ffb4a2; } .hero-points li.status-ok strong { color:#9ff0c4; } .hero-points li.status-ok { color:#9ff0c4; } /* Bullet style variant for metric explainers */ .metric-explain .metric-bullets { margin:.1rem 0 0 1rem; padding:0; line-height:1.35; } .metric-explain .metric-bullets li { margin:.18rem 0; list-style:disc; } .jump-chip{ display:inline-block; margin:.08rem .25rem; padding:.12rem .5rem; font-size:.62rem; letter-spacing:.3px; border:1px solid #22313f; background:#0f1b22; color:#9ec8ff; border-radius:999px; text-decoration:none; } .jump-chip:hover{ background:#142230; border-color:#2a3a46; color:#cfe4ff; } /* Blog article overrides - allow titles to wrap and be full-width */ .blog-article h1 { white-space: normal !important; font-size: 2.4rem !important; line-height: 1.2 !important; display: block !important; max-width: 100% !important; } /* Blog index header title */ .blog-header h1 { white-space: normal !important; font-size: 2.5rem !important; line-height: 1.2 !important; display: block !important; max-width: 100% !important; } @media (max-width: 768px) { .blog-article h1 { font-size: 1.8rem !important; } .blog-header h1 { font-size: 2rem !important; } } @media (max-width: 480px) { .blog-article h1 { font-size: 1.5rem !important; } .blog-header h1 { font-size: 1.7rem !important; } }