/* Ultimate Calculator styles. One rule per line.
   Order matters: the base styles come first and the later sections refine them (a later rule wins a tie),
   so add a change to the section it belongs to, or at the end. Colours are theme tokens (--bg, --card, --accent ...)
   set on :root for each theme. Sizes that depend on the screen come from fitLayout (layout.js) as --k and --disp. */
:root{font-family:-apple-system,BlinkMacSystemFont,"SF Pro Display","Segoe UI",Inter,system-ui,sans-serif;color-scheme:dark;--bg:#070a0f;--card:#10151d;--card2:#171d26;--key:#1d2530;--key-hover:#293442;--text:#f5f7fa;--muted:#8f9bab;--accent:#6ea8fe;--accent2:#8bb9ff;--border:rgba(255,255,255,.08);--danger:#ff6666}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
html,body{margin:0;width:100%;height:100%;min-height:100%;background:var(--bg);color:var(--text);overscroll-behavior:none;overflow:hidden}
body{min-height:calc(100dvh / var(--z,1));touch-action:none;-webkit-user-select:none;user-select:none}
button,input,select{font:inherit}
input,select{-webkit-user-select:text;user-select:text}
.app-shell{width:min(680px,100%);min-height:calc(100dvh / var(--z,1));margin:0 auto;padding:10px 14px 12px;overflow:hidden;display:flex;flex-direction:column}
.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:9px;flex:0 0 auto}
.topbar h1{font-size:23px;line-height:1.15;margin:4px 0;font-weight:700}
.top-actions{display:flex;align-items:center;gap:7px}
.version{font-size:10px;font-weight:650;color:var(--muted);vertical-align:middle;margin-left:5px}
.icon-button,.language-button{height:40px;border:1px solid var(--border);border-radius:12px;background:var(--card);color:var(--text);cursor:pointer}
.icon-button{width:40px}
.language-button{width:42px;font-size:11px;font-weight:800}
.calculator-card{background:var(--card);border:1px solid var(--border);border-radius:25px;padding:10px;overflow:visible;box-shadow:0 18px 60px rgba(0,0,0,.28);flex:0 0 auto}
.calculator-toolbar{height:44px;display:flex;align-items:flex-start;justify-content:space-between;position:relative;z-index:30}
.toolbar-button{height:40px;border:1px solid var(--border);border-radius:13px;background:var(--card2);color:var(--text);padding:0 13px;display:flex;align-items:center;gap:8px;font-size:14px;font-weight:700;cursor:pointer}
.toolbar-button:active{transform:scale(.97)}
.toolbar-button:focus{outline:none;box-shadow:none}
.toolbar-button:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.history-top{color:var(--muted)}
.display-wrap{height:205px;padding:10px 12px 7px;display:flex;flex-direction:column;justify-content:flex-end;text-align:right;overflow:visible;position:relative}
.display-wrap.tool-display{height:205px;padding-bottom:7px}
.display-wrap.tool-display .expression{opacity:1;height:auto;line-height:1.35;font-size:15px;white-space:normal;overflow:hidden;text-overflow:ellipsis;max-height:42px;margin-bottom:3px}
.display-wrap.tool-display .result{font-size:clamp(46px,14vw,76px)}
.display-wrap:not(.tool-display):not(.calculated) .expression-row{height:0;overflow:visible}
.expression-row{height:34px;display:flex;align-items:center;justify-content:flex-end;gap:8px;min-width:0;position:relative}
.expression{height:34px;flex:1;min-width:0;color:var(--muted);font-size:22px;line-height:34px;overflow-x:auto;overflow-y:hidden;white-space:nowrap;opacity:0;text-overflow:clip;scrollbar-width:none}
.expression::-webkit-scrollbar{display:none}
.display-wrap.calculated .expression{opacity:1}
.how-button{position:absolute;right:0;bottom:calc(100% + 7px);width:34px;height:34px;border:1px solid var(--border);border-radius:50%;background:var(--card2);color:var(--accent2);font-size:17px;font-weight:750;cursor:pointer;z-index:3}
.how-button.hidden{display:none}
.result{font-size:clamp(46px,14vw,76px);line-height:1.05;font-weight:400;letter-spacing:-.055em;overflow-x:auto;overflow-y:hidden;white-space:nowrap;scrollbar-width:none;padding:0 3px 2px 0}
.result::-webkit-scrollbar{display:none}
.result.long-value{font-size:clamp(30px,8vw,54px);letter-spacing:-.035em}
.keypad{display:grid;grid-template-columns:repeat(4,1fr);gap:8px}
.key{border:0;border-radius:14px;height:68px;min-height:68px;background:var(--key);color:var(--text);font-size:22px;font-weight:450;cursor:pointer;transition:background .1s,transform .05s}
.key:active{transform:scale(.96)}
.key:focus{outline:none;box-shadow:none}
.key:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.key.utility,.key.operator{color:var(--accent2)}
.key.equals{background:var(--accent);color:#07101c;font-weight:800}
.key.wide{grid-column:span 2}
.bottom-actions{display:flex;gap:8px;margin-top:9px}
.secondary-button{width:100%;border:1px solid var(--border);border-radius:12px;padding:9px;background:transparent;color:var(--muted);cursor:pointer}
.secondary-button:hover{background:var(--card2);color:var(--text)}
.tool-panel{background:var(--card2);border:1px solid var(--border);border-radius:17px;padding:13px;margin:0 0 8px;height:auto;overflow:visible}
.calculator-card.tool-mode .display-wrap{display:flex}
.calculator-card.tool-mode .tool-panel{margin-top:0}
.tool-mode{padding-bottom:10px}
.tool-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}
.tool-field{display:flex;flex-direction:column;gap:6px}
.tool-field span{font-size:12px;color:var(--muted)}
.tool-field input,.tool-field select,.unit-select{width:100%;border:1px solid var(--border);border-radius:11px;background:var(--card);color:var(--text);padding:11px 12px;outline:none}
.tool-field{position:relative;min-width:0}
.tool-field input:focus,.tool-field select:focus{border-color:var(--accent)}
.tool-field input::placeholder{color:var(--muted);opacity:.42}
.tool-keypad{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));grid-auto-rows:56px;gap:6px;margin-top:7px;padding-top:7px;border-top:1px solid var(--border)}
.tool-keypad button{width:100%;height:56px;min-width:0;border:0;border-radius:14px;background:var(--key);color:var(--text);font-size:20px;font-weight:450;cursor:pointer;transition:background .1s,transform .05s}
.tool-keypad button:active{transform:scale(.96)}
.tool-keypad .tool-key-wide{grid-column:span 2}
.tool-keypad .tool-utility{color:var(--accent2)}
.hint{text-align:center;color:var(--muted);font-size:12px;margin:10px 10px 0;flex:0 0 auto}
.app-footer{text-align:center;color:var(--muted);font-size:10px;line-height:1.6;margin-top:8px;opacity:.7;flex:0 0 auto}
.sheet-backdrop{position:fixed;inset:0;z-index:80;background:rgba(0,0,0,.42);backdrop-filter:blur(3px);opacity:0;transition:opacity .2s ease;pointer-events:none}
.sheet-backdrop.open{opacity:1;pointer-events:auto}
.history-panel{position:fixed;z-index:90;left:50%;bottom:0;transform:translate(-50%,100%);width:min(680px,100%);height:min(calc(42dvh / var(--z,1)),470px);margin:0;padding:10px 14px calc(15px + env(safe-area-inset-bottom));background:var(--card);border:1px solid var(--border);border-bottom:0;border-radius:24px 24px 0 0;box-shadow:0 -20px 70px rgba(0,0,0,.48);transition:transform .23s ease,height .23s ease;overflow:hidden;display:flex;flex-direction:column;touch-action:pan-y}
.history-panel.open{transform:translate(-50%,0)}
.history-panel.expanded{height:min(calc(92dvh / var(--z,1)),780px)}
.history-panel.dragging{transition:none}
.history-panel.dragging .sheet-handle::after{opacity:.7}
.sheet-handle{width:78px;height:24px;border-radius:999px;background:transparent;opacity:1;align-self:center;margin:0 0 2px;flex:0 0 auto;position:relative;cursor:grab;touch-action:none}
.sheet-handle::after{content:'';position:absolute;left:50%;top:9px;transform:translateX(-50%);width:50px;height:6px;border-radius:999px;background:var(--muted);opacity:.48}
.history-panel .section-heading{flex:0 0 auto}
.section-heading{display:flex;justify-content:space-between;align-items:center;gap:10px}
.section-heading h2{font-size:17px;margin:0}
.history-clear-wrap{display:flex;align-items:center;justify-content:flex-end;min-height:32px}
.text-button{background:none;border:0;color:var(--muted);cursor:pointer;padding:7px 4px}
.history-confirm{display:flex;align-items:center;gap:8px;font-size:13px;color:var(--text)}
.danger-inline{border:0;border-radius:9px;background:var(--danger);color:#fff;font-weight:750;padding:7px 10px;cursor:pointer}
.history-list{display:flex;flex-direction:column;flex:1 1 auto;margin-top:9px;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.history-list::-webkit-scrollbar{display:none}
.history-panel.expanded .history-list{overflow:auto}
.history-list.is-scrolling{scrollbar-width:thin;scrollbar-color:rgba(143,155,171,.7) transparent}
.history-list.is-scrolling::-webkit-scrollbar{display:block;width:6px}
.history-list.is-scrolling::-webkit-scrollbar-track{background:transparent}
.history-list.is-scrolling::-webkit-scrollbar-thumb{background:rgba(143,155,171,.65);border-radius:999px}
.history-item{padding:9px 2px;border-top:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px;flex:0 0 auto}
.history-main{flex:1;text-align:left;border:0;background:transparent;color:inherit;padding:4px 0;cursor:pointer}
.history-expression{color:var(--muted);font-size:13px}
.history-result{font-size:19px;margin-top:3px}
.history-delete{border:0;background:transparent;color:var(--muted);font-size:24px;padding:4px 8px;cursor:pointer}
.history-delete:hover{color:var(--danger)}
.empty{color:var(--muted);font-size:14px;padding:18px 2px}
.modal{position:fixed;inset:0;z-index:110;display:flex;align-items:center;justify-content:center;padding:20px;background:rgba(0,0,0,.58);backdrop-filter:blur(7px)}
.modal.hidden{display:none}
.modal-card{width:min(460px,calc(calc(100vw / var(--z,1)) - 32px));max-height:min(calc(70dvh / var(--z,1)),560px);overflow:auto;background:var(--card);border:1px solid var(--border);border-radius:22px;padding:17px;box-shadow:0 24px 80px rgba(0,0,0,.45)}
.modal-close{width:34px;height:34px;border:0;border-radius:50%;background:var(--card2);color:var(--muted);font-size:24px;line-height:1;cursor:pointer}
.how-content{display:flex;flex-direction:column;gap:8px;margin-top:14px}
.how-step{background:var(--card2);border-radius:14px;padding:14px}
.how-formula{font-size:17px;font-weight:650;margin-bottom:12px}
.how-line{display:flex;gap:10px;align-items:flex-start;padding:12px 0;border-top:1px solid var(--border);font-size:14px;line-height:1.5}
.how-line span{flex:0 0 26px;height:26px;border-radius:50%;display:grid;place-items:center;background:var(--accent);color:#07101c;font-size:12px;font-weight:800}
.how-line strong{display:block;font-size:12px;color:var(--muted);margin-bottom:3px}
.how-line div div{overflow-wrap:anywhere}
.how-result{display:flex;flex-direction:column;align-items:flex-start;gap:5px;margin-top:6px;padding:16px 2px 2px;border-top:1px solid var(--border);color:var(--accent2);overflow-wrap:anywhere}
.how-result span{font-size:11px;font-weight:750;text-transform:uppercase;letter-spacing:.1em;color:var(--muted);line-height:1}
.how-result strong{font-size:34px;line-height:1.05;font-weight:800;letter-spacing:-.04em}
.hidden{display:none!important}
@media(max-width:480px){
  .app-shell{padding:8px 8px 10px}
  .topbar{margin-bottom:7px}
  .topbar h1{font-size:21px}
  .top-actions{gap:5px}
  .calculator-card{border-radius:21px;padding:8px}
  .calculator-toolbar{height:43px}
  .toolbar-button{height:38px;padding:0 11px;font-size:13px}
  .display-wrap{height:205px;padding:10px 12px 7px}
  .display-wrap.tool-display{height:205px}
  .tool-panel{height:auto}
  .expression{font-size:20px}
  .expression.near-limit{font-size:17px}
  .key,.tool-keypad button{min-height:68px;border-radius:14px}
  .key{font-size:25px}
  .tool-panel{margin-top:0;padding:10px}
  .tool-grid{gap:8px}
  .hint{display:none}
  .app-footer{margin-top:6px}
  .calculator-card:not(.mobile-tool) .keypad{gap:8px}
  .calculator-card:not(.mobile-tool) .key{height:68px;min-height:68px;font-size:25px}
  .history-panel{width:100%;border-radius:22px 22px 0 0;padding-left:12px;padding-right:12px}
  .history-panel.expanded{height:calc(94dvh / var(--z,1))}
  .modal{padding:12px}
  .modal-card{width:calc(calc(100vw / var(--z,1)) - 24px);border-radius:20px;padding:15px}
}
@media(prefers-color-scheme:light){
  :root:not(.force-dark):not(.force-light){color-scheme:light;--bg:#f2f4f7;--card:#fff;--card2:#f5f7fa;--key:#e9edf2;--key-hover:#dde3ea;--text:#111722;--muted:#687384;--border:rgba(17,23,34,.1);--accent:#3478e5;--accent2:#2866c7}
}
body.light{--bg:#f2f4f7;--card:#fff;--card2:#f5f7fa;--key:#e9edf2;--key-hover:#dde3ea;--text:#111722;--muted:#687384;--border:rgba(17,23,34,.1);--accent:#3478e5;--accent2:#2866c7;color-scheme:light}
:root.force-dark{color-scheme:dark;--bg:#070a0f;--card:#10151d;--card2:#171d26;--key:#1d2530;--key-hover:#293442;--text:#f5f7fa;--muted:#8f9bab;--accent:#6ea8fe;--accent2:#8bb9ff;--border:rgba(255,255,255,.08);--danger:#ff6666}
:root.force-light{color-scheme:light;--bg:#f2f4f7;--card:#fff;--card2:#f5f7fa;--key:#e9edf2;--key-hover:#dde3ea;--text:#111722;--muted:#687384;--border:rgba(17,23,34,.1);--accent:#3478e5;--accent2:#2866c7}
.unit-display{height:275px;padding:5px 3px 4px}
.unit-display-toolbar{margin:0 2px 6px}
.unit-row{height:95px;min-height:95px;padding:0 5px}
.unit-value{font-size:clamp(40px,10vw,54px)}
.unit-unit{min-width:70px;font-size:15px;transform:translateY(7px)}
@media (hover:hover) and (pointer:fine){
  .key:hover,.tool-keypad button:hover{background:var(--key-hover)}
  .secondary-button:hover{background:var(--card2);color:var(--text)}
}
@media (hover:none) and (pointer:coarse){
  .key,.tool-keypad button,.secondary-button{-webkit-tap-highlight-color:transparent}
  .key:active,.tool-keypad button:active{transform:none}
}
.vat-toggle{display:grid;grid-template-columns:1fr 1fr;gap:5px;margin-top:10px;padding:4px;background:var(--card);border:1px solid var(--border);border-radius:13px}
.vat-toggle button{min-height:38px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:12px;font-weight:700;cursor:pointer}
.vat-toggle button.active{color:var(--text)}
.conversion-category{flex:1;min-height:42px;border:1px solid var(--border);border-radius:13px;background:var(--card);color:var(--text);padding:9px 12px;outline:none;font-weight:650}
.conversion-swap{width:42px;height:42px;flex:0 0 42px;border:1px solid var(--border);border-radius:13px;background:var(--card);color:var(--accent2);font-size:20px;cursor:pointer}
.conversion-swap:active{transform:scale(.96)}
.calculator-card.tool-mode .tool-grid{align-items:start}
.unit-display{height:275px;padding:5px 6px 4px;justify-content:flex-start;text-align:left}
.unit-display-toolbar{display:flex;align-items:center;gap:8px;margin:0 4px 8px}
.unit-display-toolbar .conversion-category{min-height:38px;padding:7px 10px;border-radius:12px;font-size:13px}
.unit-display-toolbar .conversion-swap{width:38px;height:38px;flex:0 0 38px;border-radius:12px;font-size:18px}
.unit-rows{display:flex;flex-direction:column;gap:8px;min-height:0}
.unit-row{display:flex;flex-direction:column;align-items:flex-end;justify-content:center;gap:0;height:95px;min-height:95px;padding:0 7px;border:0;border-radius:12px;position:relative}
.unit-row+.unit-row{border-top:1px solid var(--border);border-radius:0}
.unit-row.active{background:transparent;box-shadow:none}
.unit-row.active::after{display:none}
.unit-value{width:100%;min-width:0;border:0;background:transparent;color:var(--muted);font-size:clamp(38px,9vw,52px);line-height:1.05;font-weight:400;letter-spacing:-.055em;outline:none;padding:0;text-align:right;transition:color .15s ease,opacity .15s ease;cursor:pointer;caret-color:transparent;user-select:none;transform:translateY(7px)}
.unit-value.unit-active-value{color:var(--text)!important;opacity:1!important;-webkit-text-fill-color:var(--text)!important}
.unit-value.unit-result-value{color:var(--unit-result)!important;opacity:1!important;-webkit-text-fill-color:var(--unit-result)!important}
.unit-value:focus{outline:none;box-shadow:none}
.unit-value::placeholder{color:var(--muted);opacity:.28}
.unit-unit{min-width:82px;max-width:112px;border:0;background:transparent;color:var(--accent2);font-size:16px;font-weight:750;text-align:right;outline:none;padding:2px 2px 0;cursor:pointer;transform:translateY(1px)}
.unit-unit:focus{outline:none;box-shadow:none}
.unit-unit option{background:var(--card);color:var(--text)}
.calculator-card.tool-mode .unit-row:focus-within{background:transparent}
@media(max-width:480px){
  .unit-display{height:275px;padding:5px 3px 4px}
  .unit-display-toolbar{margin:0 2px 5px}
  .unit-row{height:95px;min-height:95px;padding:0 5px}
  .unit-value{font-size:clamp(34px,10vw,48px)}
  .unit-unit{min-width:70px;font-size:15px;transform:translateY(1px)}
}
@media (pointer:coarse){
  input,select,button{touch-action:manipulation}
  .history-list{touch-action:pan-y;overflow-y:auto}
}
.unit-display{height:275px!important;padding:5px 6px 4px!important;display:flex!important;flex-direction:column!important;justify-content:flex-start!important;overflow:hidden!important}
.unit-display-toolbar{flex:0 0 auto!important;margin:0 4px 8px!important}
.unit-rows{display:flex!important;flex:1 1 auto!important;flex-direction:column!important;gap:8px!important;min-height:0!important;overflow:hidden!important}
.unit-row{height:95px!important;min-height:95px!important;flex:0 0 95px!important;padding:0 7px 6px!important;justify-content:center!important}
.unit-value{transform:none!important}
.unit-unit{transform:none!important;padding:2px 2px 0!important}
@media(max-width:480px){
  .unit-display{height:275px!important;padding:5px 3px 4px!important}
  .unit-display-toolbar{margin:0 2px 6px!important}
  .unit-row{height:95px!important;min-height:95px!important;flex-basis:95px!important;padding:0 5px 6px!important}
  .unit-value{font-size:clamp(40px,10vw,54px)!important}
  .unit-unit{min-width:70px!important;font-size:15px!important}
}
.unit-display{height:205px!important;padding:5px 6px 4px!important}
.unit-display-toolbar{margin:0 4px 6px!important}
.unit-rows{gap:8px!important;overflow:hidden!important}
.unit-row{height:70px!important;min-height:70px!important;flex:0 0 70px!important;padding:0 7px!important}
.unit-value{font-size:clamp(38px,9vw,52px)!important;transform:none!important}
.unit-unit{font-size:16px!important;transform:none!important}
@media(max-width:480px){
  .unit-display{height:205px!important;padding:5px 3px 4px!important}
  .unit-display-toolbar{margin:0 2px 6px!important}
  .unit-row{height:70px!important;min-height:70px!important;flex-basis:70px!important;padding:0 5px!important}
  .unit-value{font-size:clamp(36px,10vw,48px)!important}
  .unit-unit{min-width:70px!important;font-size:15px!important}
}
/* Converted (inactive) value in the unit converter, per theme */
:root{--unit-result:#596575}
@media(prefers-color-scheme:light){
  :root:not(.force-dark):not(.force-light){--unit-result:#a3acb9}
}
:root.force-light,body.light{--unit-result:#a3acb9}
/* Tools on phones: the app keypad replaces the native keyboard, so make room for it */
.tool-field input.tool-active{border-color:var(--accent)}
.calculator-card.mobile-tool .display-wrap.tool-display{height:108px!important}
.calculator-card.mobile-tool .how-button{position:static;flex:0 0 30px;width:30px;height:30px;font-size:15px}
.calculator-card.mobile-tool .tool-keypad{grid-auto-rows:48px}
.calculator-card.mobile-tool .tool-keypad button{height:48px!important;min-height:48px!important}
.calculator-card.mobile-tool .tool-field input{caret-color:transparent}
/* History sheet close button (the sheet can cover the whole screen on phones) */
.history-clear-wrap{gap:6px}
.history-close{flex:0 0 32px;width:32px;height:32px;font-size:22px}
/* VAT add/remove: sliding thumb (tap, drag or swipe) */
.vat-toggle{position:relative;touch-action:none;-webkit-user-select:none;user-select:none}
.vat-toggle button{position:relative;z-index:1;transition:color .2s}
.vat-thumb{position:absolute;z-index:0;top:4px;bottom:4px;left:4px;width:calc((100% - 13px) / 2);border-radius:9px;background:var(--card2);box-shadow:0 1px 5px rgba(0,0,0,.16);transform:translateX(var(--vat-thumb-x,0px));transition:transform .24s cubic-bezier(.2,.8,.2,1);pointer-events:none}
/* the % in calc() resolves against the thumb's own width; an inline --vat-thumb-x (set while dragging) wins */
.vat-toggle[data-active="remove"]{--vat-thumb-x:calc(100% + 5px)}
.vat-toggle.sliding .vat-thumb{transition:none}
/* Calculator keypad: key and display heights follow the screen height so the whole keypad stays visible on phones. */
.calculator-card{--k:clamp(44px,calc((calc(100dvh / var(--z,1)) - 380px) / 5),68px)}
.calculator-card:not(.tool-mode) .keypad .key{height:var(--k);min-height:var(--k)}
.calculator-card:not(.tool-mode) #calculatorDisplay{height:clamp(92px,calc(calc(100dvh / var(--z,1)) - 249px - 5 * var(--k)),205px)}
/* Tips & shortcuts: a link in the footer opens them in the dialog (showHelp in app.js) */
.footer-line{display:flex;align-items:center;justify-content:center;flex-wrap:wrap;gap:2px 6px}
.footer-dot{opacity:.6}
.help-link{display:inline-flex;align-items:center;gap:4px;border:0;background:transparent;color:inherit;font:inherit;font-size:10.5px;font-weight:600;padding:2px 6px 2px 3px;border-radius:999px;cursor:pointer}
.help-link:hover,.help-link:focus-visible{color:var(--accent2);background:var(--card2)}
.help-link:focus-visible{outline:2px solid var(--accent2);outline-offset:1px}
.help-link-icon{width:13px;height:13px;border-radius:50%;display:inline-grid;place-items:center;border:1.3px solid currentColor;font-size:8.5px;font-weight:800;line-height:1}
.modal.help-open .modal-card{width:min(520px,calc(calc(100vw / var(--z,1)) - 32px))}
.help{display:flex;flex-direction:column;gap:18px}
.help-heading{margin:0 0 6px;font-size:11px;font-weight:750;letter-spacing:.09em;text-transform:uppercase;color:var(--muted)}
.help-tips,.help-keys{list-style:none;margin:0;padding:0}
.help-tips li{position:relative;padding:8px 0 8px 16px;border-top:1px solid var(--border);font-size:13.5px;line-height:1.5}
.help-tips li:first-child,.help-keys li:first-child{border-top:0}
.help-tips li::before{content:'';position:absolute;left:2px;top:16px;width:5px;height:5px;border-radius:50%;background:var(--accent)}
.help-keys li{display:flex;align-items:center;gap:12px;padding:7px 0;border-top:1px solid var(--border);font-size:13.5px;color:var(--muted)}
.help-caps{display:flex;flex-wrap:wrap;gap:4px;flex:0 0 132px}
.help kbd{min-width:26px;height:26px;padding:0 8px;display:inline-grid;place-items:center;border-radius:7px;background:var(--key);border:1px solid var(--border);border-bottom-width:2px;color:var(--accent2);font:650 12px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",system-ui,sans-serif}
/* ---------- Graph mode, tool charts and history chart (s8) ---------- */
body.graph-on .app-shell{height:calc(100dvh / var(--z,1))}
body.graph-on .bottom-actions{display:none}
.calculator-card.graph-mode{flex:1 1 auto;min-height:0;display:flex;flex-direction:column;--gk:clamp(30px,calc((calc(100dvh / var(--z,1)) - 470px) / 6),50px)}
.calculator-card.graph-mode #calculatorDisplay{height:auto;flex:1 1 auto;min-height:150px;padding:2px 0 8px;display:flex;flex-direction:column;justify-content:flex-start;gap:7px;text-align:left}
.graph-box{position:relative;flex:1 1 auto;min-height:120px}
#graphCanvas{position:absolute;inset:0;width:100%;height:100%;display:block;border-radius:16px;touch-action:none;cursor:crosshair}
#graphCanvas.grabbing{cursor:grabbing}
.graph-readout{position:absolute;left:8px;top:8px;max-width:calc(100% - 16px);padding:5px 9px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--text);font-size:12px;font-weight:600;line-height:1.3;pointer-events:none;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;box-shadow:0 4px 14px rgba(0,0,0,.12)}
.graph-readout:empty{display:none}
.graph-tools{position:absolute;right:8px;bottom:8px;display:flex;gap:5px}
.graph-tool{width:32px;height:32px;border:1px solid var(--border);border-radius:10px;background:var(--card);color:var(--accent2);font-size:16px;font-weight:700;line-height:1;cursor:pointer;display:grid;place-items:center;padding:0}
.graph-tool:active{transform:scale(.94)}
.graph-fns{display:flex;flex-direction:column;gap:5px;flex:0 0 auto}
.graph-fn{display:flex;align-items:center;gap:7px;min-height:36px;padding:0 3px 0 11px;border:1px solid var(--border);border-radius:12px;background:var(--card2);cursor:pointer;min-width:0}
.graph-fn.active{border-color:var(--accent)}
.graph-fn-dot{width:9px;height:9px;border-radius:50%;flex:0 0 9px}
.graph-fn-name{color:var(--muted);font-size:14px;flex:0 0 auto}
.graph-fn-src{flex:1;min-width:0;font-size:18px;white-space:nowrap;overflow-x:auto;scrollbar-width:none}
.graph-fn-src::-webkit-scrollbar{display:none}
.graph-fn-src.empty{color:var(--muted);font-size:13px;opacity:.75}
.graph-fn.invalid .graph-fn-src{color:var(--danger)}
.graph-fn.active .graph-fn-src::after{content:'';display:inline-block;width:2px;height:1em;margin-left:2px;vertical-align:-2px;background:var(--accent);animation:gcaret 1s steps(1) infinite}
.graph-fn.active .graph-fn-src.empty::after{margin:0 0 0 4px}
@keyframes gcaret{
  50%{opacity:0}
}
.graph-fn-btn{flex:0 0 30px;width:30px;height:30px;border:0;border-radius:9px;background:transparent;color:var(--muted);font-size:20px;line-height:1;cursor:pointer}
.graph-fn-add{color:var(--accent2);background:var(--card);border:1px solid var(--border);font-weight:700}
.keypad.graph-keypad{grid-template-columns:repeat(5,1fr);gap:6px}
.calculator-card.graph-mode .keypad .key{height:var(--gk);min-height:var(--gk);font-size:20px;border-radius:12px}
.calculator-card.graph-mode .keypad .key.fn-key{font-size:15px;color:var(--accent2)}
@media (prefers-reduced-motion:reduce){
  .graph-fn.active .graph-fn-src::after{animation:none}
}
/* Chart button next to "?" in the tools */
.how-button.chart-button{right:42px;display:grid;place-items:center;padding:0}
.calculator-card.mobile-tool .how-button.chart-button{order:0}
.tool-chart{display:block;width:100%;height:230px;margin-top:4px}
.chart-heading{font-size:13px;font-weight:700;color:var(--muted);margin:2px 0 6px}
.chart-legend{display:flex;flex-direction:column;gap:6px;margin-top:10px}
.chart-legend:empty{display:none}
.chart-legend-item{display:flex;align-items:center;gap:8px;font-size:13px}
.chart-legend-item strong{margin-left:auto;font-weight:700}
.chart-dot{display:inline-block;width:10px;height:10px;border-radius:50%;flex:0 0 10px}
.chart-note{margin:10px 0 0;color:var(--muted);font-size:13px;line-height:1.45}
.chart-note:empty{display:none}
.graph-points .how-formula{display:flex;align-items:center;gap:8px;overflow-wrap:anywhere}
.graph-point-line{display:flex;justify-content:space-between;gap:12px;padding:9px 0;border-top:1px solid var(--border);font-size:14px}
.graph-point-line span{color:var(--muted)}
/* History chart */
.history-chart-toggle{flex:0 0 32px;width:32px;height:32px;display:grid;place-items:center;padding:0;color:var(--muted)}
.history-chart-toggle.active{color:var(--accent2);background:var(--key)}
.history-clear-wrap.confirming .history-chart-toggle{display:none}
.history-chart{flex:0 0 auto;margin-top:8px;padding:8px 6px 6px;border:1px solid var(--border);border-radius:16px;background:var(--card2)}
#historyChart{display:block;width:100%;height:150px;touch-action:none;cursor:crosshair}
.history-chart.too-few #historyChart{height:0}
.history-chart-readout{padding:6px 4px 0;font-size:12.5px;color:var(--muted);text-align:center;overflow-wrap:anywhere}
@media (max-height:620px){
  .graph-tool{width:27px;height:27px;font-size:14px;border-radius:8px}
  .graph-tools{gap:4px;right:6px;bottom:6px}
  .graph-fn{min-height:32px}
  .graph-fn-btn{width:26px;height:26px;flex-basis:26px}
  .calculator-card.graph-mode .keypad .key{font-size:18px}
  .calculator-card.graph-mode .keypad .key.fn-key{font-size:14px}
}
/* ---------- Fuel log (s9) ---------- */
.how-button.fuel-btn{display:grid;place-items:center;padding:0;right:auto}
.how-button.fuel-save{left:0}
.how-button.fuel-log{left:42px}
.how-button.fuel-btn:disabled{cursor:default}
.how-button.fuel-save:disabled:not(.done){opacity:.35}
.how-button.fuel-save.done{color:var(--accent);border-color:var(--accent)}
.calculator-card.mobile-tool .how-button.fuel-btn{left:auto}
.calculator-card.mobile-tool .how-button.fuel-log{position:relative;inset:auto}
.how-button.fuel-log[data-count]::after{content:attr(data-count);position:absolute;top:-6px;right:-7px;min-width:17px;height:17px;padding:0 4px;border-radius:9px;background:var(--accent);color:#07101c;font-size:10px;font-weight:800;line-height:17px;text-align:center}
.fuel-stats{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin-top:12px}
.fuel-stat{background:var(--card2);border-radius:14px;padding:11px 12px;display:flex;flex-direction:column;gap:4px;min-width:0}
.fuel-stat span{font-size:11.5px;color:var(--muted)}
.fuel-stat strong{font-size:16px;font-weight:750;overflow-wrap:anywhere}
.fuel-stat.main,.fuel-stat.wide{grid-column:1/-1}
.fuel-stat.main strong{font-size:28px;letter-spacing:-.02em;color:var(--accent2)}
.fuel-stat.wide strong{font-size:14px;font-weight:650}
.fuel-use{width:100%;margin-top:10px;border:0;border-radius:12px;padding:11px;background:var(--accent);color:#07101c;font-weight:750;cursor:pointer}
.fuel-log-chart{display:block;width:100%;height:150px}
.fuel-list{display:flex;flex-direction:column;margin-top:12px}
.fuel-item{display:flex;align-items:center;gap:8px;padding:7px 0;border-top:1px solid var(--border)}
.fuel-item-main{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font-size:13px}
.fuel-item-date{font-size:11px;color:var(--muted)}
.fuel-item strong{font-size:14px;white-space:nowrap}
.fuel-clear{margin-top:4px;border:0;background:transparent;color:var(--muted);padding:8px 0;cursor:pointer;font-size:13px}
.fuel-clear.armed{color:var(--danger);font-weight:700}
.modal-card .chart-heading{margin-top:14px}
/* Tools on phones: the card never gets taller than the screen; the keypad rows shrink to fit, so nothing is cut off at the bottom */
body.mobile-tool-on .app-shell{height:calc(100dvh / var(--z,1))}
.calculator-card.mobile-tool{flex:0 1 auto;min-height:0;display:flex;flex-direction:column}
.calculator-card.mobile-tool .tool-keypad{flex:0 1 auto;height:280px;min-height:0;grid-template-rows:repeat(5,minmax(30px,1fr));grid-auto-rows:unset}
.calculator-card.mobile-tool .tool-keypad button{height:100%!important;min-height:0!important}
@media (max-height:780px){
  .calculator-card.mobile-tool .display-wrap.tool-display{height:98px!important;padding-top:4px}
  .calculator-card.mobile-tool .display-wrap.tool-display .expression{font-size:13px;line-height:1.3;max-height:34px}
  .calculator-card.mobile-tool .display-wrap.tool-display .result{font-size:clamp(34px,11vw,46px)}
  .calculator-card.mobile-tool .tool-panel{padding:9px 10px}
  .calculator-card.mobile-tool .tool-field{gap:3px}
  .calculator-card.mobile-tool .tool-field span{font-size:11.5px}
  .calculator-card.mobile-tool .tool-field input{padding:8px 10px}
  .calculator-card.mobile-tool .tool-grid{gap:6px}
  .calculator-card.mobile-tool .vat-toggle{margin-top:7px}
}
/* On short phones the copy button would not fit; tapping the result copies it instead */
@media (max-height:720px){
  .calculator-card.mobile-tool .bottom-actions{display:none}
}
.calculator-card.tool-mode .display-wrap.tool-display .result{cursor:copy}
.display-wrap .result.copied{color:var(--accent2);transition:color .15s}
/* Footer credits: each name stays on one line, so a narrow screen wraps between the names */
.app-footer .author{white-space:nowrap}
/* Install-on-phone button and guide */
.install-button{display:grid;place-items:center;padding:0}
.install-button.hidden{display:none}
.install-guide .chart-note{margin:0 0 6px}
.install-guide .share-icon{vertical-align:-3px;color:var(--accent)}
/* ---------- Fit to the screen (fitLayout in app.js) ----------
   fitLayout measures the screen and sets --k (key height) and --disp (display height) on the card,
   so every mode fits, footer included. If even the smallest sizes don't fit, html gets .page-scroll. */
.app-shell{padding-top:max(10px,env(safe-area-inset-top));padding-bottom:max(12px,env(safe-area-inset-bottom));padding-left:max(14px,env(safe-area-inset-left));padding-right:max(14px,env(safe-area-inset-right))}
@media(max-width:480px){
  .app-shell{padding-top:max(8px,env(safe-area-inset-top));padding-bottom:max(10px,env(safe-area-inset-bottom));padding-left:max(8px,env(safe-area-inset-left));padding-right:max(8px,env(safe-area-inset-right))}
}
body.fit:not(.graph-on) .app-shell{height:auto!important;min-height:calc(100dvh / var(--z,1))}
body.fit .calculator-card:not(.graph-mode){flex:0 0 auto!important}
body.fit .calculator-card:not(.graph-mode) .keypad .key{height:var(--k)!important;min-height:var(--k)!important}
body.fit .calculator-card .tool-keypad{height:auto!important;grid-template-rows:none!important;grid-auto-rows:var(--k)!important}
body.fit .calculator-card .tool-keypad button{height:var(--k)!important;min-height:0!important}
body.fit .calculator-card:not(.graph-mode) #calculatorDisplay:not(.unit-display){height:var(--disp)!important}
.calculator-card.fit-no-copy .bottom-actions{display:none}
/* A short display: the ? / chart / fuel buttons sit in the line above the result, not above it */
.calculator-card.compact-display .how-button{position:static;flex:0 0 30px;width:30px;height:30px;font-size:15px}
.calculator-card.compact-display .how-button.chart-button{order:0}
.calculator-card.compact-display .how-button.fuel-btn{left:auto}
.calculator-card.compact-display .how-button.fuel-log{position:relative;inset:auto}
/* Tool results never get taller than the phone-size tool display */
.calculator-card.mobile-tool .display-wrap.tool-display .result{font-size:clamp(34px,11vw,52px)}
/* Units: the display height comes from fitLayout too; each row holds the value and the unit name below it */
body.fit #calculatorDisplay.unit-display{height:var(--disp,205px)!important}
body.fit .unit-row{height:var(--urow,70px)!important;min-height:0!important;flex:0 0 var(--urow,70px)!important;padding-top:0!important;padding-bottom:0!important}
.unit-value{height:calc(var(--urow,70px) - 24px)!important;font-size:min(48px,10vw,calc(var(--urow,70px) - 24px))!important;line-height:1!important}
.unit-unit{height:22px}
/* Tapping a finished result copies it, in the calculator as in the tools */
.display-wrap.calculated .result{cursor:copy}
/* The compact tool layout on a desktop that is short on space: keep the text cursor in the fields */
@media (pointer:fine){
  .calculator-card.mobile-tool .tool-field input{caret-color:auto}
}
html.page-scroll,html.page-scroll body{height:auto!important;min-height:100%;overflow-y:auto!important}
html.page-scroll body{touch-action:pan-y!important}
/* Quick Calculator <-> Units button, left of the mode button */
/* Hold ⌫ to clear everything: the key fills while held, then flashes */
#keypad [data-action="backspace"],#keypad [data-g="back"]{-webkit-touch-callout:none}
#keypad .holding{background:color-mix(in srgb,var(--key) 55%,var(--accent))!important;transition:background .5s linear}
#keypad .held{background:var(--accent)!important;color:#07101c!important;transition:none}
/* Units switched on: the ↔ button stays lit, like a pressed key */
/* ---------- Theme and language changes ---------- */
/* Theme: the new theme grows in a circle from the theme button (toggleTheme); no cross-fade underneath */
html.vt-theme::view-transition-old(root),html.vt-theme::view-transition-new(root){animation:none;mix-blend-mode:normal}
html.vt-theme::view-transition-new(root){z-index:2}
/* Language: a quick cross-fade */
html.vt-lang::view-transition-old(root),html.vt-lang::view-transition-new(root){animation-duration:.18s}
/* Browsers without view transitions: colours fade instead of snapping */
html.theme-fade *,html.theme-fade *::before,html.theme-fade *::after{transition:background-color .35s ease,color .35s ease,border-color .35s ease,box-shadow .35s ease!important}
/* ---------- Unit menus on desktop ----------
   Browsers that support customizable selects (Chrome/Edge 135+) draw the open menu in the app's own style,
   like the mode menu. Phones and tablets keep their native pickers; other browsers keep the native menu. */
@supports (appearance:base-select){
  @media (hover:hover) and (pointer:fine){
    .unit-display select{appearance:base-select}
    .unit-display select::picker(select){appearance:base-select;background:var(--card);color:var(--text);border:1px solid var(--border);border-radius:14px;padding:5px;margin:6px 0;box-shadow:0 18px 50px rgba(0,0,0,.35);max-height:min(340px,calc(60dvh / var(--z,1)));overflow-y:auto;scrollbar-width:thin;opacity:0;transform:translateY(-4px) scale(.98);transition:opacity .14s ease,transform .14s ease,display .14s allow-discrete,overlay .14s allow-discrete}
    .unit-display select:open::picker(select){opacity:1;transform:none}
    @starting-style{
      .unit-display select:open::picker(select){opacity:0;transform:translateY(-4px) scale(.98)}
    }
    .unit-display select option{background:transparent;color:var(--text);padding:8px 12px 8px 10px;border-radius:9px;font-size:14px;font-weight:500;cursor:pointer;gap:8px;min-height:36px;text-align:left}
    .unit-display select option:hover,.unit-display select option:focus-visible{background:var(--card2);outline:none}
    .unit-display select option:checked{color:var(--accent2);font-weight:700}
    .unit-display select option::checkmark{color:var(--accent2);font-weight:800}
    .unit-display select::picker-icon{color:var(--accent2);transition:rotate .15s ease}
    .unit-display select:open::picker-icon{rotate:180deg}
    /* category: a menu as wide as the box; unit names: the menu opens from the right edge, where the name is */
    .unit-display .conversion-category{display:flex;align-items:center;justify-content:space-between}
    .unit-display .conversion-category::picker(select){width:anchor-size(width)}
    .unit-display .unit-unit{display:inline-flex;align-items:center;justify-content:flex-end;gap:4px;max-width:none;width:auto;min-width:0;padding:2px 2px 0!important}
    .unit-display .unit-unit::picker(select){position-area:bottom span-left;min-width:190px}
  }
}
/* the footer text is muted; the Tips link keeps its full colour */
.app-footer{opacity:1}
.app-footer{color:color-mix(in srgb,var(--muted) 72%,transparent)}
.modal.help-open .modal-card{max-height:min(calc(86dvh / var(--z,1)),780px)}
/* ---------- Mode tabs (one tap per mode; the strip scrolls sideways when they don't all fit) ---------- */
.calculator-toolbar{gap:7px;align-items:center}
.history-top{width:40px;padding:0;justify-content:center;flex:0 0 auto;color:var(--muted)}
.history-top:hover{color:var(--text)}
.history-icon{display:block}
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.mode-tabs{flex:1 1 auto;min-width:0;height:40px}
.mode-tabs-track{display:flex;align-items:center;gap:6px;height:100%;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;overscroll-behavior-x:contain;touch-action:pan-x;-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 18px,#000 calc(100% - 18px),transparent 100%)}
.mode-tabs-track::-webkit-scrollbar{display:none}
.mode-tabs-track.at-start{-webkit-mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%);mask-image:linear-gradient(90deg,#000 calc(100% - 18px),transparent 100%)}
.mode-tabs-track.at-end{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 18px);mask-image:linear-gradient(90deg,transparent 0,#000 18px)}
.mode-tabs-track.at-start.at-end{-webkit-mask-image:none;mask-image:none}
.mode-tab{flex:0 0 auto;display:inline-flex;align-items:center;gap:6px;height:38px;border:1px solid var(--border);border-radius:12px;background:var(--card2);color:var(--muted);font:inherit;font-size:13px;font-weight:700;padding:0 12px;cursor:pointer;white-space:nowrap;touch-action:pan-x;transition:background .15s,color .15s,border-color .15s}
.mode-tab:hover{color:var(--text)}
.mode-tab:focus-visible{outline:2px solid var(--accent2);outline-offset:-2px}
.mode-tab-icon{color:var(--accent2);font-size:14px;line-height:1}
.mode-tab.active{background:var(--accent);border-color:var(--accent);color:#07101c}
.mode-tab.active .mode-tab-icon{color:#07101c}
@media (prefers-reduced-motion:reduce){
  .mode-tab{transition:none}
}
/* ---------- Logo next to the title: drawn with the theme's colours, so every theme recolours it ---------- */
.topbar h1.brand{display:flex;align-items:center;gap:9px;min-width:0;white-space:nowrap}
.brand-mark{width:28px;height:28px;flex:0 0 auto;display:block}
.brand-name{min-width:0;overflow:hidden;text-overflow:ellipsis}
.bm-screen{fill:var(--card2)}
.bm-edge{fill:none;stroke:var(--border)}
.bm-seg{stroke:var(--accent2);fill:none}
.bm-key{fill:var(--key)}
.bm-lit{fill:var(--accent)}
.bm-sym{stroke:var(--accent2);fill:none}
.bm-ink{stroke:#07101c;fill:none}
@media(max-width:480px){
  .topbar h1.brand{gap:7px;font-size:min(21px,5.4vw)}
  .brand-mark{width:24px;height:24px}
}
/* narrow phones: slightly tighter header buttons so the logo and the full title fit */
@media(max-width:400px){
  .topbar{gap:8px}
  .top-actions{gap:4px}
  .top-actions .icon-button,.top-actions .language-button{width:38px;height:38px}
}
/* ---------- History sheet: slides up from the bottom, can be dragged taller (history.js) ---------- */
#historyPanel{will-change: height, transform;transform: translate(-50%, 100%);transition: transform .26s cubic-bezier(.22,.61,.36,1), height .26s cubic-bezier(.22,.61,.36,1);overscroll-behavior: contain;}
#historyPanel.open{transform: translate(-50%, 0);}
#historyPanel.dragging{transition: none !important;}
#historyPanel .sheet-handle, #historyPanel .section-heading{touch-action: none;cursor: grab;-webkit-user-select: none;user-select: none;}
#historyPanel.dragging .sheet-handle, #historyPanel.dragging .section-heading{cursor: grabbing;}
#historyPanel.dragging .history-list{pointer-events: none;}
#historyPanel.expanded{height: min(calc(92dvh / var(--z,1)), 780px);}
@media (max-width: 480px){
  #historyPanel.expanded{height: calc(100dvh / var(--z,1));border-radius: 20px 20px 0 0;}
}