/* ═══════════════════════════════════════════════════════════ INDCal — design tokens The only file that defines colour, type, spacing and motion. Nothing outside /src/theme/ may hardcode a colour or a size. ═══════════════════════════════════════════════════════════ */ :root{ /* ── surfaces ── */ --page: #EFEDE9; /* behind the app frame */ --bg: #FBFAF8; --card: #FFFFFF; --sunk: #F3F2EF; --line: #EBE9E5; --line-firm: #E0DDD8; /* ── text ── */ --ink: #16181C; --ink-2: #767C86; --ink-3: #A8AAB0; --prose: #43464C; /* explanation copy — softer than ink, firmer than ink-2 */ /* ── brand ── */ --brand: #2F6F5E; /* sage — money in, primary actions */ --brand-soft: #E8F1EE; --brand-ink: #FFFFFF; --clay: #C67B48; /* money out */ --clay-soft: #FAF0E8; --gold: #E8B87E; /* the display strip in the mark */ /* ── semantic: colour means something ── in = money arriving, growth, what you keep out = money leaving, cost, what you pay */ --in: var(--brand); --out: var(--clay); --warn:#B27A16; /* ── category tints, used on icons only ── */ --cat-invest: #2F6F5E; --cat-schemes: #3E7A5C; --cat-deposits: #4A7C6A; --cat-retirement:#5B7FB0; --cat-loan: #4A57D2; --cat-tax: #B27A16; --cat-gsttds: #C08A2E; --cat-payroll: #3F8C3A; --cat-property: #B65A3C; --cat-trade: #6E8B22; --cat-convert: #2B7CB5; --cat-date: #7A4FC0; --cat-everyday: #B44A6E; /* ── type ── */ --font: 'IBM Plex Sans', system-ui, -apple-system, sans-serif; --mono: 'IBM Plex Mono', ui-monospace, monospace; --t-display: 700 40px/1.1 var(--font); --t-h1: 700 27px/1.18 var(--font); --t-h2: 600 20px/1.25 var(--font); --t-h3: 600 17px/1.3 var(--font); --t-body: 400 15px/1.55 var(--font); --t-body-md: 450 15px/1.5 var(--font); --t-ui: 450 14px/1.4 var(--font); --t-label: 450 12.5px/1.35 var(--font); --t-small: 400 12px/1.45 var(--font); --t-eyebrow: 700 10.5px/1.2 var(--font); --tight: -.025em; --wide: .11em; /* ── spacing, balanced density ── */ --s1:4px; --s2:8px; --s3:12px; --s4:16px; --s5:20px; --s6:24px; --s8:32px; --s10:40px; --s12:48px; /* ── shape ── */ --r-sm:9px; --r:12px; --r-lg:16px; --r-xl:22px; --r-full:999px; /* ── elevation ── */ --sh-1:0 1px 2px rgba(20,24,30,.05); --sh-2:0 8px 22px -12px rgba(20,24,30,.24); --sh-3:0 20px 50px -28px rgba(20,24,30,.40); /* ── motion ── */ --ease:cubic-bezier(.22,1,.32,1); --spring:cubic-bezier(.34,1.32,.5,1); --fast:140ms; --base:260ms; /* ── frame ── */ --frame-max:1320px; --side-w:274px; --tap:44px; --icon-stroke:1.8; } /* Dark values live in one place and are applied either by the OS preference or by an explicit choice on . */ @media (prefers-color-scheme: dark){ :root:not([data-theme="light"]){ --page:#0B0C0D; --bg:#131417; --card:#1A1C20; --sunk:#212429; --line:#26292E; --line-firm:#31353B; --ink:#F0F0F2; --ink-2:#9BA1AA; --ink-3:#6B7079; --brand:#4FB396; --brand-soft:#17302A; --brand-ink:#08110E; --clay:#E09A63; --clay-soft:#2E2119; --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 8px 22px -12px rgba(0,0,0,.7); --sh-3:0 20px 50px -28px rgba(0,0,0,.85); } } :root[data-theme="dark"]{ --page:#0B0C0D; --bg:#131417; --card:#1A1C20; --sunk:#212429; --line:#26292E; --line-firm:#31353B; --ink:#F0F0F2; --ink-2:#9BA1AA; --ink-3:#6B7079; --brand:#4FB396; --brand-soft:#17302A; --brand-ink:#08110E; --clay:#E09A63; --clay-soft:#2E2119; --sh-1:0 1px 2px rgba(0,0,0,.5); --sh-2:0 8px 22px -12px rgba(0,0,0,.7); --sh-3:0 20px 50px -28px rgba(0,0,0,.85); } /* ═══════════════════════════════════════════════════════════ INDCal — components. Every value is a token. Desktop and mobile are separate layouts, not one adapting. ═══════════════════════════════════════════════════════════ */ *{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent} html{-webkit-text-size-adjust:100%;background:var(--page);touch-action:manipulation} body{background:var(--page);color:var(--ink);font:var(--t-body); -webkit-font-smoothing:antialiased;overscroll-behavior-y:none; overflow-x:hidden} /* a wide table scrolls itself, never the page */ /* A flex or grid child defaults to min-width:auto, which refuses to shrink below its content. Anything holding a scrollable table needs to be told it may. */ .app,.mobile,.desktop,.screen,.main,.calc,.calc__side,.calc__inputs, .calc__primary,.calc__wide,.panel,.field,.result,.rows,.chart{min-width:0} button{font:inherit;color:inherit;background:none;border:0;cursor:pointer; touch-action:manipulation; /* no double-tap zoom on rapid taps */ -webkit-user-select:none;user-select:none} input,select,textarea{font:inherit;color:inherit} a{color:var(--brand);text-underline-offset:3px} :focus-visible{outline:2px solid var(--brand);outline-offset:2px;border-radius:var(--r-sm)} .skip{position:absolute;left:-9999px} .skip:focus{left:var(--s4);top:var(--s4);z-index:99;background:var(--card);padding:var(--s3)} .hidden{display:none!important} /* ── brand ── */ .mark{display:flex;align-items:center;gap:var(--s2);min-width:0} .mark svg{flex:none;border-radius:var(--r-sm)} .wordmark{font:700 17px/1 var(--font);letter-spacing:var(--tight);white-space:nowrap} .wordmark i{font-style:normal;color:var(--ink-2)} /* ── app frame: a contained card, never edge to edge ── */ .app{max-width:var(--frame-max);margin:0 auto;min-height:100dvh} /* ── grouped calculator list, shared by both layouts ── */ .group-label{font:var(--t-eyebrow);letter-spacing:var(--wide);text-transform:uppercase; color:var(--ink-3);padding:var(--s4) var(--s3) var(--s2)} .item{display:flex;align-items:center;gap:var(--s3);width:100%;text-align:left; padding:var(--s2) var(--s3);border-radius:10px;transition:background var(--fast)} .item:hover{background:var(--sunk)} .item[aria-current="page"]{background:var(--brand-soft)} .item[aria-current="page"] .item__name{color:var(--brand);font-weight:600} .item__icon{width:28px;height:28px;border-radius:var(--r-sm);flex:none;display:grid;place-items:center; background:var(--tint);color:var(--cat)} .item__icon svg{width:15px;height:15px} .item__name{font:var(--t-ui);letter-spacing:-.005em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .item__desc{font:var(--t-small);color:var(--ink-2);display:block} /* ── search ── */ .theme-toggle{width:var(--tap);height:var(--tap);border-radius:var(--r-sm); display:grid;place-items:center;color:var(--ink-2);flex:none; transition:background var(--fast),color var(--fast)} .theme-toggle:hover{background:var(--sunk);color:var(--ink)} .search{display:flex;align-items:center;gap:var(--s2);background:var(--sunk); border-radius:var(--r-sm);padding:var(--s2) var(--s3);min-height:var(--tap)} .search svg{width:15px;height:15px;color:var(--ink-3);flex:none} .search input{border:0;background:none;outline:none;width:100%;font:450 16px/1.4 var(--font)} .search input::placeholder{color:var(--ink-3)} /* ── two-tab switch ── */ .switch{display:flex;background:var(--sunk);border-radius:var(--r-sm);padding:3px} .switch button{flex:1;padding:var(--s2);border-radius:7px;font:var(--t-label); font-weight:500;color:var(--ink-2);transition:background var(--fast),color var(--fast)} .switch button[aria-selected="true"]{background:var(--card);color:var(--ink); font-weight:600;box-shadow:var(--sh-1)} /* ═══ DESKTOP ═══ */ .desktop{display:grid;grid-template-columns:var(--side-w) minmax(0,1fr); background:var(--bg);border:1px solid var(--line-firm);border-radius:var(--r-lg); box-shadow:var(--sh-3);overflow:hidden;margin:var(--s6) var(--s5); height:calc(100dvh - var(--s6) * 2)} .side{background:var(--card);border-right:1px solid var(--line); display:flex;flex-direction:column;min-height:0} .side__top{padding:var(--s4) var(--s3) var(--s3);border-bottom:1px solid var(--line); display:flex;flex-direction:column;gap:var(--s3)} .side__list{overflow-y:auto;padding:var(--s1) var(--s2) var(--s6);flex:1;min-height:0} .main{overflow-y:auto;padding:var(--s5) var(--s8) var(--s8);min-height:0} .main__bar{display:flex;align-items:center;justify-content:space-between;gap:var(--s3); margin-bottom:var(--s5)} /* category quick-jump — fills the previously empty desktop top bar */ .cats{display:flex;flex-wrap:wrap;gap:6px;min-width:0;flex:1} .cats__chip{font:500 12.5px/1 var(--font);color:var(--ink-2);white-space:nowrap; padding:7px 11px;border:1px solid var(--line);border-radius:var(--r-full); background:var(--card);transition:color var(--fast),border-color var(--fast),background var(--fast)} .cats__chip:hover{color:var(--brand);border-color:var(--brand);background:var(--brand-soft)} .cats__chip:active{transform:scale(.97)} .group-label--flash{animation:catflash 1.1s var(--ease)} @keyframes catflash{0%,100%{color:var(--ink-3)}25%{color:var(--brand)}} .footer{margin-top:var(--s12);padding-top:var(--s5);border-top:1px solid var(--line); display:flex;flex-wrap:wrap;align-items:center;gap:var(--s2); font:var(--t-small);color:var(--ink-3)} .footer b{font-weight:600;color:var(--ink-2)} .footer__dot{color:var(--ink-3)} @media (max-width:939px){ .footer{margin-top:var(--s8);justify-content:center;text-align:center; flex-direction:column;gap:var(--s1)} .footer__dot{display:none} } /* One grid. On desktop the inputs and the result sit side by side and the chart spans both; on mobile the same children simply stack in order. */ .calc{display:grid;gap:var(--s5) var(--s6);align-items:start} .calc__head{grid-column:1/-1;grid-row:1} .calc__side{display:flex;flex-direction:column;gap:var(--s3);min-width:0} @media (min-width:1061px){ .calc{grid-template-columns:minmax(0,352px) minmax(0,1fr)} .calc__side{grid-column:1;grid-row:2} .calc__primary{grid-column:2;grid-row:2} .calc__wide{grid-column:1/-1;grid-row:3} .calc__verified{grid-column:1/-1;grid-row:4} } /* On mobile the chart follows the rows, as agreed. */ @media (max-width:1060px){ /* align-items:start comes from the base .calc rule and is meant for the desktop GRID (don't stretch the columns to equal height). Once this becomes a COLUMN flex container the same property controls the horizontal axis, so it was shrink-wrapping every card to its content and leaving a dead strip down the right. Stretch is what's wanted. */ .calc{display:flex;flex-direction:column;align-items:stretch} .calc__side{display:contents} .calc__chart{order:3} .calc__primary{order:2} .calc__wide{order:4} .calc__verified{order:5} } .calc__wide{min-width:0} .calc__verified{margin:0} /* ═══ MOBILE ═══ */ .mobile{display:flex;flex-direction:column;min-height:100dvh;background:var(--bg)} .header{position:sticky;top:0;z-index:20;isolation:isolate;background:var(--card); border-bottom:1px solid var(--line);padding-top:env(safe-area-inset-top)} .topbar{padding:var(--s3) var(--s4);display:flex;align-items:center;gap:var(--s3)} .topbar__title{font:var(--t-h3);letter-spacing:-.01em;min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .screen{flex:1;padding:var(--s4) var(--s4) calc(152px + env(safe-area-inset-bottom))} /* ── the dock: back, then search, then the two tabs ── */ .dock__row{display:flex;align-items:center;gap:var(--s2);margin-bottom:var(--s2)} /* In a calculator: a strong, filled back button on the left fifth, the search pill on the remaining four fifths. The old 48px icon read as decoration; a solid brand block reads as a button. */ .dock__row--calc{display:grid;grid-template-columns:20% 1fr;align-items:stretch; gap:var(--s2);margin-bottom:var(--s2)} .dock__back{width:100%;display:grid;place-items:center; background:var(--brand);border:0;border-radius:var(--r-full); box-shadow:var(--sh-2);color:var(--brand-ink); transition:transform var(--fast) var(--spring),filter var(--fast)} .dock__back:active{transform:scale(.94);filter:brightness(.93)} .dock__back svg{width:22px;height:22px;color:var(--brand-ink)} /* flex:1 matters — without it the pill shrink-wraps to its content and sits at about 60% of the row instead of filling it. */ .dock__row .dock__pill{flex:1;min-width:0;margin-bottom:0} /* ── the answer, pinned, while you edit the numbers below it ── */ /* Overlaid rather than inserted, so revealing it never shoves the page down by fifty pixels while you are mid-scroll. */ .peek{position:absolute;top:100%;left:0;right:0;z-index:1; display:flex;align-items:baseline;justify-content:space-between;gap:var(--s3); padding:var(--s2) var(--s4) var(--s3); background:var(--card);border-bottom:1px solid var(--line); box-shadow:0 6px 14px -10px rgba(20,24,30,.3); opacity:0;transform:translateY(-100%);pointer-events:none; transition:opacity var(--fast) linear,transform var(--base) var(--ease)} .peek[data-show="true"]{opacity:1;transform:none} .peek__label{font:var(--t-small);color:var(--ink-2);min-width:0; overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .peek__value{font:700 17px/1.2 var(--font);color:var(--in); font-variant-numeric:tabular-nums;white-space:nowrap;letter-spacing:-.01em} .peek__value--changed{animation:tick var(--base) var(--ease)} @keyframes tick{ 0%{transform:translateY(-4px) scale(.97);opacity:.4} 100%{transform:none;opacity:1} } @media (min-width:1061px){ .peek{display:none} } /* the dock steps aside when the keyboard is up */ body[data-keyboard="open"] .dock{transform:translateY(140%);pointer-events:none} .dock{transition:transform var(--base) var(--ease)} /* floating pill above a two-tab bar */ .dock{position:fixed;left:0;right:0;bottom:0;z-index:40; padding:0 var(--s4) calc(var(--s3) + env(safe-area-inset-bottom)); background:linear-gradient(180deg,transparent,var(--bg) 24%);pointer-events:none} .dock > *{pointer-events:auto} .dock__pill{display:flex;align-items:center;gap:var(--s2);background:var(--card); border:1px solid var(--line-firm);border-radius:var(--r-full); padding:var(--s3) var(--s4);box-shadow:var(--sh-2);margin-bottom:var(--s2)} .dock__pill svg{width:16px;height:16px;color:var(--ink-3);flex:none} .dock__pill input{border:0;background:none;outline:none;width:100%;font:450 16px/1.4 var(--font)} .dock__tabs{display:flex;background:var(--card);border:1px solid var(--line-firm); border-radius:14px;padding:var(--s1);box-shadow:var(--sh-2)} .dock__tabs button{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px; padding:var(--s2) var(--s1);border-radius:10px;font:var(--t-small);font-weight:500; color:var(--ink-2);transition:background var(--fast),color var(--fast)} .dock__tabs button svg{width:18px;height:18px} .dock__tabs button[aria-selected="true"]{background:var(--brand-soft); color:var(--brand);font-weight:600} /* ── full-screen search overlay (phone) ── Field at the TOP, results below, keyboard at the bottom. Nothing is anchored to the window bottom, so iOS has nothing to fight. */ .sover{position:fixed;top:0;left:0;right:0;z-index:60;height:100dvh; background:var(--bg);display:flex;flex-direction:column; padding-top:env(safe-area-inset-top)} .sover[hidden]{display:none} .sover__bar{display:flex;align-items:center;gap:var(--s2);flex:none; padding:var(--s3) var(--s4);border-bottom:1px solid var(--line);background:var(--card)} .sover__field{flex:1;min-width:0;display:flex;align-items:center;gap:var(--s2); background:var(--bg);border:1px solid var(--line-firm);border-radius:var(--r-full); padding:var(--s2) var(--s4);min-height:var(--tap)} .sover__field svg{color:var(--ink-3);flex:none} .sover__field input{flex:1;min-width:0;border:0;background:none;outline:none; font:450 16px/1.4 var(--font);color:var(--ink)} .sover__field input::-webkit-search-cancel-button{-webkit-appearance:none} .sover__cancel{flex:none;color:var(--brand);font:600 15px/1 var(--font); padding:0 var(--s2);min-height:var(--tap)} .sover__list{flex:1;min-height:0;overflow-y:auto;-webkit-overflow-scrolling:touch; padding:var(--s2) var(--s3) var(--s8)} .sover__list .group-label{margin:var(--s3) 0 var(--s2);padding-left:var(--s2)} .sover__list .empty{padding:var(--s5) var(--s2);color:var(--ink-3)} /* the dock pill is a button now — it opens the overlay */ .dock__pill--btn{color:var(--ink-3);font:450 16px/1.4 var(--font);text-align:left} .dock__pill--btn span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .dock__pill--btn:active{background:var(--sunk)} /* ── source citations under a result ── */ .sources{font:var(--t-small);color:var(--ink-3);margin-top:var(--s3)} .sources a{color:var(--ink-2);text-decoration:underline;text-underline-offset:2px; text-decoration-color:var(--line-firm);transition:text-decoration-color var(--fast)} .sources a:hover{text-decoration-color:var(--brand)} .sources__sep{color:var(--line-firm);margin:0 2px} /* ── headings ── */ .eyebrow{font:var(--t-eyebrow);letter-spacing:var(--wide);text-transform:uppercase;color:var(--cat,var(--brand))} .page-title{font:var(--t-h1);letter-spacing:var(--tight);margin:var(--s1) 0 var(--s1)} .page-sub{color:var(--ink-2);font:var(--t-body);margin-bottom:var(--s4)} .reset{display:inline-flex;align-items:center;gap:var(--s2);font:var(--t-small); font-weight:500;color:var(--ink-2);padding:var(--s2) var(--s3); border:1px solid var(--line-firm);border-radius:var(--r-full); margin-bottom:var(--s3);transition:color var(--fast),border-color var(--fast)} .reset:hover{color:var(--brand);border-color:var(--brand)} /* ── fields with steppers ── */ .panel{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s1) var(--s4)} .field{padding:var(--s4) 0;border-bottom:1px solid var(--line)} .field + .field{padding-top:var(--s4)} .field:last-child{border-bottom:0} .field__label{display:block;font:var(--t-label);color:var(--ink-2);margin-bottom:var(--s2)} .stepper{display:flex;align-items:center;gap:var(--s2)} .stepper button{width:38px;height:40px;flex:none;border:1px solid var(--line-firm); background:var(--card);border-radius:var(--r-sm);font-size:17px;line-height:1; color:var(--brand);transition:background var(--fast),border-color var(--fast),transform var(--fast)} .stepper button:hover{background:var(--brand-soft);border-color:var(--brand)} .stepper button:active,.stepper__btn--held{transform:scale(.92); background:var(--brand-soft);border-color:var(--brand)} .stepper button{touch-action:none} .stepper input,.field__input{flex:1;min-width:0;border:1px solid var(--line-firm); border-radius:var(--r-sm);padding:var(--s2) var(--s3);font:600 16px/1.3 var(--font); text-align:right;font-variant-numeric:tabular-nums;outline:none;background:var(--card); transition:border-color var(--fast),box-shadow var(--fast)} .stepper input:focus,.field__input:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)} select.field__input{width:100%;text-align:left;appearance:none;font-weight:450; background-image:linear-gradient(45deg,transparent 50%,var(--ink-3) 50%), linear-gradient(135deg,var(--ink-3) 50%,transparent 50%); background-position:calc(100% - 16px) 18px,calc(100% - 11px) 18px; background-size:5px 5px;background-repeat:no-repeat;padding-right:32px} .field__hint{font:var(--t-small);color:var(--ink-3);margin-top:var(--s2);line-height:1.45} .segmented{display:flex;flex-wrap:wrap;background:var(--sunk); border-radius:var(--r-sm);padding:3px;gap:2px} .segmented button{flex:1 1 auto;min-width:76px;padding:var(--s2) var(--s2); border-radius:7px;font:var(--t-label);white-space:nowrap; color:var(--ink-2);transition:background var(--fast),color var(--fast)} .segmented button[aria-pressed="true"]{background:var(--card);color:var(--ink); font-weight:600;box-shadow:var(--sh-1)} /* ── result: number, then words, then picture ── */ .result{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s6) var(--s5) var(--s5);margin-bottom:var(--s3)} .result__label{font:var(--t-label);color:var(--ink-2)} .result__value{font:700 clamp(28px, 7.2vw, 40px)/1.12 var(--font); letter-spacing:var(--tight);color:var(--in); font-variant-numeric:tabular-nums;margin:var(--s1) 0 var(--s4);cursor:pointer; border-radius:var(--r-sm);transition:background var(--fast);word-break:break-word} .result__value--long{font-size:clamp(24px, 5.6vw, 32px)} .result__value--prose{font:600 clamp(19px, 4.6vw, 24px)/1.4 var(--font); letter-spacing:-.01em;text-align:left} .result__value{display:inline-flex;align-items:baseline;gap:var(--s2); border:0;background:none;text-align:left;width:100%} .result__value:active{background:var(--brand-soft)} .result__copy{color:var(--ink-3);opacity:0;flex:none;align-self:center; transition:opacity var(--fast)} .result__value:hover .result__copy, .result__value:focus-visible .result__copy{opacity:1} @media (pointer:coarse){ .result__copy{opacity:.4} } .result__value--tick{animation:tick var(--base) var(--ease)} /* the number in lakh/crore, read the way Indians actually say it */ .result__value:has(+ .result__scale){margin-bottom:var(--s1)} .result__scale{font:500 15px/1.3 var(--font);color:var(--ink-2); letter-spacing:-.01em;font-variant-numeric:tabular-nums;margin:0 0 var(--s4)} /* copy confirmation, right where the thumb tapped */ .result__num{min-width:0} .result__done{display:none;font:600 13px/1 var(--font);color:var(--in); align-self:center;letter-spacing:0;flex:none} .result__value.is-copied .result__copy{display:none} .result__value.is-copied .result__done{display:inline} .result__value.is-copied .result__num{color:var(--in);transition:color var(--fast)} /* guided empty state */ .result--empty .result__prompt{font:500 clamp(16px,4.2vw,19px)/1.5 var(--font); color:var(--ink-2);margin-top:var(--s2)} .explain{font:var(--t-body);color:var(--prose);background:var(--card); border:1px solid var(--line);border-left:3px solid var(--brand); border-radius:var(--r);padding:var(--s4) var(--s5);margin-bottom:var(--s3)} .explain b{font-weight:600;color:var(--ink)} .chart{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s5) var(--s5) var(--s4);margin-bottom:var(--s3); overflow:hidden;position:relative} .chart__svg{max-width:100%} .chart__svg{display:block;width:100%;overflow:hidden} .stats{display:flex;flex-wrap:wrap;gap:var(--s3) var(--s6);margin-top:var(--s4)} .stat{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1 1 auto} .stat__label{display:flex;align-items:center;gap:var(--s2);font:var(--t-small);color:var(--ink-2)} .stat__value{font:600 19px/1.2 var(--font);font-variant-numeric:tabular-nums;letter-spacing:-.01em} .stat__value--in{color:var(--in)} .stat__value--out{color:var(--out)} @media (max-width:1060px){ .stats{gap:var(--s3) var(--s5)} .stat__value{font-size:17px} } .bar{display:flex;height:9px;border-radius:var(--r-full);overflow:hidden;gap:2px; background:var(--sunk);margin-bottom:var(--s3)} .bar i{display:block;height:100%;border-radius:var(--r-full); transition:width var(--base) var(--ease)} .result .bar{margin-top:var(--s4);margin-bottom:0} .chart__title{font:var(--t-eyebrow);letter-spacing:var(--wide);text-transform:uppercase; color:var(--ink-3);margin-bottom:var(--s3)} .chart__axis{display:flex;justify-content:space-between;font:var(--t-small); color:var(--ink-3);margin-top:var(--s2);padding-top:var(--s2); border-top:1px solid var(--line)} .legend{display:flex;gap:var(--s4);font:var(--t-small);color:var(--ink-2); flex-wrap:wrap;margin-top:var(--s3)} .legend span{display:flex;align-items:center;gap:var(--s2);min-width:0} .legend b{font-weight:600;color:var(--ink);font-variant-numeric:tabular-nums} .legend i{width:9px;height:9px;border-radius:3px;flex:none} .chart__caption{font:var(--t-small);color:var(--ink-3);line-height:1.5; margin-top:var(--s3);padding-top:var(--s3);border-top:1px solid var(--line)} @media (max-width:1060px){ .legend{flex-direction:column;gap:var(--s2)} .legend span{justify-content:space-between;width:100%} } .rows{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); padding:var(--s1) var(--s5);margin-bottom:var(--s3)} .row{display:flex;justify-content:space-between;align-items:baseline;gap:var(--s4); padding:var(--s3) 0;border-bottom:1px solid var(--line);font:var(--t-ui)} .row:last-child{border-bottom:0} .row__key{color:var(--ink-2);min-width:0} .row__val{font-weight:600;font-variant-numeric:tabular-nums;text-align:right; min-width:0;overflow-wrap:anywhere} .row__val--in{color:var(--in)} .row__val--out{color:var(--out)} .row--header{border-bottom:0;padding:var(--s4) 0 var(--s1)} .row--header .row__key{font:var(--t-eyebrow);letter-spacing:var(--wide); text-transform:uppercase;color:var(--cat,var(--brand))} /* ── comparison table ── */ .compare{margin:var(--s4) calc(var(--s5) * -1) 0;overflow-x:auto; -webkit-overflow-scrolling:touch} .compare table{width:100%;min-width:320px;border-collapse:collapse;font:var(--t-small)} .compare th,.compare td{padding:var(--s2) var(--s3);text-align:right; border-bottom:1px solid var(--line);white-space:nowrap} .compare thead th{font:var(--t-eyebrow);letter-spacing:.06em;text-transform:uppercase; color:var(--ink-2)} .compare thead th.compare__win{color:var(--brand)} .compare tbody th[scope="row"]{text-align:left;font-weight:400;color:var(--ink-2); white-space:normal;min-width:118px} .compare tbody td{font-weight:600;font-variant-numeric:tabular-nums} .compare__na{color:var(--ink-3);font-weight:400;font-style:italic} .compare tr.compare__section th{text-align:left;padding-top:var(--s4);border-bottom:0; font:var(--t-eyebrow);letter-spacing:var(--wide);text-transform:uppercase;color:var(--brand)} /* Phone overrides for the blocks above. This MUST sit after the base .result / .panel / .page-title / .compare rules: a media query adds no specificity, so when it came first every one of these was silently overridden and none of the mobile sizing applied. */ @media (max-width:939px){ .result{padding:var(--s5) var(--s4)} .rows,.panel{padding-left:var(--s4);padding-right:var(--s4)} .page-title{font:700 24px/1.2 var(--font)} .compare{margin-left:calc(var(--s4) * -1);margin-right:calc(var(--s4) * -1)} .compare table{min-width:0} .compare th,.compare td{padding:var(--s2)} .compare tbody th[scope="row"]{min-width:96px;font-size:11.5px} .compare thead th{font-size:9.5px} .compare tbody td{font-size:11.5px} } /* ── buttons ── */ .btn{flex:1 1 128px;display:flex;align-items:center;justify-content:center;gap:var(--s2); min-height:var(--tap);padding:var(--s3);background:var(--brand);color:var(--brand-ink); font:var(--t-h3);border-radius:var(--r);transition:transform var(--fast) var(--spring),filter var(--fast)} .btn:hover{filter:brightness(1.06)} .btn:active{transform:scale(.97)} .btn--secondary{background:var(--card);color:var(--brand);border:1px solid var(--line-firm)} .btn svg{width:17px;height:17px;flex:none} .btn-row{display:flex;flex-wrap:wrap;gap:var(--s2);margin:var(--s4) 0 var(--s3)} .note{font:var(--t-small);color:var(--ink-3);line-height:1.6;padding:0 var(--s1); margin:0 0 var(--s6)} /* ── line items and grids ── */ .lines,.grid-rows{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)} .line,.grid-row{display:flex;align-items:center;gap:var(--s2)} .line__label,.grid-cell{min-width:0;border:1px solid var(--line-firm);border-radius:var(--r-sm); padding:var(--s2) var(--s3);font:450 16px/1.4 var(--font);outline:none;background:var(--card); transition:border-color var(--fast)} .line__label{flex:1} .grid-cell{font-variant-numeric:tabular-nums} .line__label:focus,.grid-cell:focus,.line__amount:focus{border-color:var(--brand); box-shadow:0 0 0 3px var(--brand-soft)} .line__amount{width:104px;flex:none;border:1px solid var(--line-firm);border-radius:var(--r-sm); padding:var(--s2) var(--s3);text-align:right;font:600 16px/1.4 var(--font); font-variant-numeric:tabular-nums;outline:none;background:var(--card)} .line__mode{width:34px;height:36px;flex:none;border-radius:var(--r-sm);background:var(--sunk); color:var(--brand);font:var(--t-h3);display:grid;place-items:center} .line__remove{width:30px;height:36px;flex:none;color:var(--ink-3);display:grid;place-items:center; border-radius:var(--r-sm);transition:color var(--fast)} .line__remove:hover{color:var(--out)} @media (max-width:460px){ /* 72px of room for a name is unusable — give it its own row */ .line{flex-wrap:wrap} .line__label{flex:1 1 100%} .line__amount{flex:1;width:auto} } /* ── transposed grid: particulars down the side, one column per entry ── */ .grid-rows--t{display:flex;flex-direction:column;gap:var(--s2);margin-top:var(--s3)} .trow{display:flex;align-items:center;gap:var(--s2);min-width:0} .trow__lab{flex:0 0 84px;min-width:0;font:var(--t-small);color:var(--ink-3); overflow:hidden;text-overflow:ellipsis;white-space:nowrap} .grid-rows--t .grid-cell{flex:1 1 0;min-width:0;width:auto;text-align:center} .grid-cell--name{font-weight:600;color:var(--ink)} @media (max-width:380px){ .trow__lab{flex-basis:68px;font-size:12px} } /* ── repeating grid (cashflows, arrears) ── */ .grid-rows{padding-bottom:var(--s1)} /* The column ratio arrives as --w rather than an inline flex, because an inline style beats every stylesheet rule — which silently defeated the stacked layout below and clipped the date field. */ .gcell{display:flex;flex-direction:column;gap:4px;min-width:0;flex:var(--w,1) 1 0} .gcell__lab{display:none} .grid-cell{min-width:0;width:100%} /* a native date control needs room for dd/mm/yyyy plus its picker icon */ .grid-cell[type="date"]{min-width:132px} .line__add,.grid-add{margin-top:var(--s3);color:var(--brand);font:var(--t-ui);font-weight:500; padding:var(--s2) 0;min-height:var(--tap);display:flex;align-items:center;gap:var(--s1)} .grid-head{display:flex;gap:var(--s2);padding:0 var(--s1);font:var(--t-eyebrow); letter-spacing:.06em;text-transform:uppercase;color:var(--ink-3)} .grid-head__spacer{width:30px;flex:none} /* A narrow card stacks each repeating row instead of scrolling sideways: every cell gets its own labelled line. This block MUST sit after the .grid-head rule above — a container query adds no specificity, so a later equal-specificity rule wins and you get the header row AND the per-cell labels at once. That is exactly what went wrong before. */ .field--lines{container-type:inline-size} @container (max-width:460px){ .grid-head{display:none} .grid-row{flex-wrap:wrap;align-items:flex-end;gap:var(--s2); padding:var(--s3);padding-right:48px; /* a lane for the remove button */ border:1px solid var(--line);border-radius:var(--r); background:var(--bg);position:relative} .grid-row + .grid-row{margin-top:var(--s2)} .gcell{flex:1 1 calc(50% - var(--s2))} .gcell:first-child{flex:1 1 100%} .gcell__lab{display:block;font:var(--t-eyebrow);letter-spacing:.05em; text-transform:uppercase;color:var(--ink-3)} /* was 30×36 and sat on top of the last label — now a full tap target in its own lane, clear of the text */ .grid-row .line__remove{position:absolute;top:6px;right:6px; width:40px;height:40px;border-radius:var(--r-sm)} .grid-row .line__remove:hover{background:var(--sunk)} } /* ── schedule ── */ .disclosure{background:var(--card);border:1px solid var(--line);border-radius:var(--r-lg); margin-bottom:var(--s3);overflow:hidden} .disclosure summary{padding:var(--s4) var(--s5);font:var(--t-h3);color:var(--brand); cursor:pointer;list-style:none;display:flex;justify-content:space-between;align-items:center} .disclosure summary::-webkit-details-marker{display:none} .disclosure__scroll{max-height:340px;overflow:auto} table{width:100%;border-collapse:collapse;font:var(--t-small);font-variant-numeric:tabular-nums} th,td{padding:var(--s2) var(--s3);text-align:right;border-bottom:1px solid var(--line);white-space:nowrap} th{position:sticky;top:0;background:var(--sunk);color:var(--ink-2);font-weight:600} th:first-child,td:first-child{text-align:left} tbody tr:last-child td{border-bottom:0} /* ── toast ── */ .toast{position:fixed;left:50%;bottom:calc(140px + env(safe-area-inset-bottom));z-index:90; transform:translate(-50%,120%);opacity:0;pointer-events:none; display:flex;align-items:center;gap:var(--s2);background:var(--card); border:1px solid var(--line-firm);padding:var(--s3) var(--s5);border-radius:var(--r-full); box-shadow:var(--sh-2);font:var(--t-ui);font-weight:500; transition:transform var(--base) var(--spring),opacity var(--base)} .toast[data-show="true"]{transform:translate(-50%,0);opacity:1} .toast svg{color:var(--brand)} /* ── static document pages ── */ .doc{max-width:760px;margin:0 auto;padding:var(--s8) var(--s5) var(--s12)} .doc h1{font:var(--t-h1);letter-spacing:var(--tight);margin-bottom:var(--s2)} .doc h2{font:var(--t-h2);margin:var(--s8) 0 var(--s3)} .doc h3{font:var(--t-h3);margin:var(--s5) 0 var(--s2)} .doc p{margin:0 0 var(--s3);max-width:68ch} .doc ul{padding-left:var(--s5);margin:0 0 var(--s4)} .doc li{margin-bottom:var(--s2)} .doc table{margin:var(--s3) 0 var(--s6);background:var(--card);border-radius:var(--r)} .doc caption{text-align:left;font:var(--t-small);color:var(--ink-2);padding:var(--s2) 0} .crumbs{font:var(--t-small);color:var(--ink-2);margin-bottom:var(--s4)} .lede{color:var(--ink-2);font:var(--t-body);margin-bottom:var(--s5)} .verified{font:var(--t-small);color:var(--ink-3);text-align:center;padding:var(--s6) var(--s4) var(--s10)} .intro{padding:var(--s2) var(--s1) var(--s3)} .intro .page-sub{margin-bottom:0} .empty{color:var(--ink-3);font:var(--t-body);text-align:center;padding:var(--s12) 0} /* Anything driven by a finger gets a 44px target. */ @media (pointer:coarse){ .stepper button{width:var(--tap);height:var(--tap)} .line__mode,.line__remove{height:var(--tap)} .line__mode{width:40px} .line__remove{width:36px} .disclosure summary{padding-top:var(--s4);padding-bottom:var(--s4)} } @media (prefers-reduced-motion:reduce){ *,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important} } /* ═══════════════════════════════════════════════════════════ Directory skin — styles for the Directories tab only. Kept out of base.css so the directory look can change without touching the calculators. ═══════════════════════════════════════════════════════════ */ .dwrap{ max-width:640px; margin:0 auto } /* header */ .dhead{ display:flex; align-items:center; gap:var(--s3); margin-bottom:var(--s5) } .dhead__icon{ width:44px; height:44px; flex:none; display:grid; place-items:center; background:var(--brand-soft); color:var(--brand); border-radius:var(--r) } .dhead__icon svg{ width:20px; height:20px } .dhead__name{ font:var(--t-display); letter-spacing:-.02em; margin:0 } .dhead__tag{ color:var(--ink-2); font:var(--t-body); margin:2px 0 0 } /* landing (search-first empty state) */ .dlanding{ padding:var(--s2) 0 } .dlanding__hint{ color:var(--ink-3); font:var(--t-body); margin:0 0 var(--s4) } .dbrowse{ display:flex; align-items:center; gap:var(--s3); width:100%; padding:var(--s4); background:var(--card); border:1px solid var(--line-firm); border-radius:var(--r); box-shadow:var(--sh-1); font:500 16px/1 var(--font); color:var(--ink); transition:background var(--fast), transform var(--fast) } .dbrowse span{ flex:1; text-align:left } .dbrowse svg{ color:var(--ink-3); flex:none } .dbrowse:active{ transform:scale(.99); background:var(--sunk) } /* browse filter panel */ .dfilter{background:var(--card);border:1px solid var(--line-firm);border-radius:var(--r-lg); padding:var(--s4);box-shadow:var(--sh-1);margin-bottom:var(--s4); display:flex;flex-direction:column;gap:var(--s3)} .dfield{display:flex;flex-direction:column;gap:6px;min-width:0} .dfield > span{font:var(--t-eyebrow);letter-spacing:.05em;text-transform:uppercase;color:var(--ink-3)} .dfield input,.dfield select{width:100%;min-width:0;min-height:var(--tap); padding:var(--s2) var(--s3);border:1px solid var(--line-firm);border-radius:var(--r-sm); background:var(--bg);color:var(--ink);font:var(--t-body); transition:border-color var(--fast),box-shadow var(--fast)} .dfield input:focus,.dfield select:focus{border-color:var(--brand);outline:0; box-shadow:0 0 0 3px var(--brand-soft)} .dfield select:disabled{color:var(--ink-3);background:var(--sunk)} .dfield__pair{display:grid;grid-template-columns:1fr 1fr;gap:var(--s3);min-width:0; transition:opacity var(--fast)} .dfield__pair.is-muted{opacity:.45} .dfilter__go{display:flex;align-items:center;justify-content:center;gap:var(--s2); min-height:var(--tap);border-radius:var(--r-full);background:var(--brand); color:var(--brand-ink);font:600 15px/1 var(--font);box-shadow:var(--sh-1); transition:transform var(--fast) var(--spring),filter var(--fast)} .dfilter__go svg{color:var(--brand-ink)} .dfilter__go:active{transform:scale(.98);filter:brightness(.94)} .dfilter__go:disabled{opacity:.6} .dfilter__msg{font:var(--t-small);color:var(--ink-2);line-height:1.5;margin:0} @media (max-width:420px){ .dfield__pair{grid-template-columns:1fr} } /* status lines */ .dnote{ color:var(--ink-2); font:var(--t-body); padding:var(--s4) 0; line-height:1.5 } .dspin{ display:flex; align-items:center; gap:var(--s2); color:var(--ink-3); font:var(--t-body); padding:var(--s4) 0 } .dspin svg{ animation:dpulse 1s var(--ease) infinite } @keyframes dpulse{ 0%,100%{opacity:.35} 50%{opacity:1} } /* result list */ .dgroup{ font:var(--t-eyebrow); letter-spacing:.06em; text-transform:uppercase; color:var(--ink-3); margin:var(--s4) 0 var(--s2) } .dlist{ display:flex; flex-direction:column; gap:var(--s2) } .dresult{ display:flex; align-items:center; gap:var(--s3); width:100%; text-align:left; padding:var(--s3) var(--s4); background:var(--card); border:1px solid var(--line); border-radius:var(--r); transition:background var(--fast), border-color var(--fast) } .dresult + .dresult{ margin-top:var(--s2) } .dresult:hover{ border-color:var(--line-firm); background:var(--sunk) } .dresult:active{ background:var(--brand-soft) } .dresult__icon{ width:32px; height:32px; flex:none; display:grid; place-items:center; color:var(--brand); background:var(--brand-soft); border-radius:var(--r-sm) } .dresult__body{ flex:1; min-width:0; display:flex; flex-direction:column; gap:1px } .dresult__title{ font:500 15.5px/1.25 var(--font); color:var(--ink); white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .dresult__sub{ font:var(--t-small); color:var(--ink-3); font-variant-numeric:tabular-nums; white-space:nowrap; overflow:hidden; text-overflow:ellipsis } .dresult > svg{ color:var(--ink-3); flex:none } .dresult--branch{ background:transparent; border-color:transparent; padding-left:var(--s2) } .dresult--branch:hover{ background:var(--sunk) } /* back button + drilled-in screens */ /* The only way back inside a directory — the phone's hardware back leaves the tab entirely — so it gets a finger-sized target, not a 22px link. */ .dback{ display:inline-flex; align-items:center; gap:6px; margin-bottom:var(--s3); min-height:var(--tap); padding:0 var(--s3); margin-left:calc(var(--s3) * -1); border-radius:var(--r-full); color:var(--brand); font:600 14px/1 var(--font); transition:background var(--fast) } .dback:active{ background:var(--brand-soft) } .dback svg{ color:var(--brand) } .dscreen__title{ font:var(--t-display); letter-spacing:-.02em; margin:0 } .dscreen__sub{ color:var(--ink-2); font:var(--t-body); margin:2px 0 var(--s4) } /* districts / bank groups (collapsible) */ .ddist{ border:1px solid var(--line); border-radius:var(--r); overflow:hidden; margin-bottom:var(--s2) } .ddist summary{ display:flex; align-items:center; justify-content:space-between; padding:var(--s3) var(--s4); cursor:pointer; font:500 15px/1 var(--font); color:var(--ink); list-style:none; background:var(--card) } .ddist summary::-webkit-details-marker{ display:none } .ddist summary span{ font:var(--t-small); color:var(--ink-3); background:var(--sunk); padding:2px 8px; border-radius:var(--r-full) } .ddist[open] summary{ border-bottom:1px solid var(--line) } .ddist .dresult--branch{ border-radius:0 } /* the record page */ .drecord{ background:var(--card); border:1px solid var(--line); border-radius:var(--r-lg); padding:var(--s5) var(--s5) var(--s4) } .drecord__eyebrow{ font:var(--t-eyebrow); letter-spacing:.05em; text-transform:uppercase; color:var(--brand); margin:0 } .drecord__code{ display:inline-flex; align-items:center; gap:var(--s2); font:700 clamp(24px,6vw,32px)/1.1 var(--font); letter-spacing:.02em; color:var(--ink); font-variant-numeric:tabular-nums; margin:var(--s1) 0 var(--s1); position:relative } .drecord__code i{ color:var(--ink-3); display:inline-flex } .drecord__code .drecord__done{ display:none; font:600 12px/1 var(--font); color:var(--in); font-style:normal; letter-spacing:0 } .drecord__code.is-copied i{ display:none } .drecord__code.is-copied .drecord__done{ display:inline } .drecord__code.is-copied > span{ color:var(--in) } .drecord__sub{ color:var(--ink-2); font:var(--t-body); margin:0 0 var(--s4) } /* capability chips */ .dchips{ display:flex; flex-wrap:wrap; gap:var(--s2); margin-bottom:var(--s4) } .chip{ font:600 12px/1 var(--font); letter-spacing:.02em; padding:6px 10px; border-radius:var(--r-full); background:var(--brand-soft); color:var(--brand) } .chip--off{ background:var(--sunk); color:var(--ink-3) } /* field rows */ .drows{ display:flex; flex-direction:column } .drow{ display:flex; gap:var(--s4); padding:var(--s3) 0; border-top:1px solid var(--line) } .drow:first-child{ border-top:0 } .drow__k{ flex:none; width:104px; color:var(--ink-3); font:var(--t-small) } .drow__v{ flex:1; min-width:0; color:var(--ink); font:var(--t-body); word-break:break-word } .linkish{ color:var(--brand); font:inherit; font-variant-numeric:tabular-nums; border-bottom:1px dashed var(--line-firm); transition:border-color var(--fast) } .linkish.is-copied{ color:var(--in); border-color:var(--in) } @media (max-width:600px){ .drow__k{ width:88px } .drecord{ padding:var(--s4) } }