/* =====================================================================================================
   RaqamX visitor site
   1. fonts  2. colour tokens + the 7 site themes  3. base  4. header  5. page layout
   The calculator itself (body, keypad, d-pad, shapes, key designs) keeps its own section further down.
   ===================================================================================================== */

/* ------------------------------------------------------------- 1. fonts (self-hosted, SIL OFL, subset: Arabic + Latin + maths signs) */
/* The panel picks one (html[data-font=<id>], api/_fonts.php); Readex Pro is the default. Only the chosen family is downloaded. */
@font-face { font-family: "Readex Pro"; font-weight: 400; font-display: swap; src: url("../fonts/readex-400.woff2") format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 600; font-display: swap; src: url("../fonts/readex-600.woff2") format("woff2"); }
@font-face { font-family: "Readex Pro"; font-weight: 700 800; font-display: swap; src: url("../fonts/readex-700.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/plex-400.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/plex-600.woff2") format("woff2"); }
@font-face { font-family: "IBM Plex Sans Arabic"; font-weight: 700 800; font-display: swap; src: url("../fonts/plex-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/noto-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/noto-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Sans Arabic"; font-weight: 700 800; font-display: swap; src: url("../fonts/noto-700.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 400; font-display: swap; src: url("../fonts/vazir-400.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 600; font-display: swap; src: url("../fonts/vazir-600.woff2") format("woff2"); }
@font-face { font-family: "Vazirmatn"; font-weight: 700 800; font-display: swap; src: url("../fonts/vazir-700.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 400; font-display: swap; src: url("../fonts/kufi-400.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 600; font-display: swap; src: url("../fonts/kufi-600.woff2") format("woff2"); }
@font-face { font-family: "Noto Kufi Arabic"; font-weight: 700 800; font-display: swap; src: url("../fonts/kufi-700.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 400; font-display: swap; src: url("../fonts/tajawal-400.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 500 600; font-display: swap; src: url("../fonts/tajawal-500.woff2") format("woff2"); }
@font-face { font-family: "Tajawal"; font-weight: 700 800; font-display: swap; src: url("../fonts/tajawal-700.woff2") format("woff2"); }
:root { --font-fallback: "Segoe UI", Tahoma, system-ui, -apple-system, Roboto, "Geeza Pro", "Arial", sans-serif; --site-font: "Readex Pro", var(--font-fallback); }
:root[data-font="plex"] { --site-font: "IBM Plex Sans Arabic", var(--font-fallback); }
:root[data-font="noto"] { --site-font: "Noto Sans Arabic", var(--font-fallback); }
:root[data-font="vazir"] { --site-font: "Vazirmatn", var(--font-fallback); }
:root[data-font="kufi"] { --site-font: "Noto Kufi Arabic", var(--font-fallback); }
:root[data-font="tajawal"] { --site-font: "Tajawal", var(--font-fallback); }
/* Tajawal is small on the body: a touch larger so every font reads at the same size */
:root[data-font="tajawal"] body { font-size: 17px; }
:root[data-font="kufi"] body { line-height: 1.75; }

/* ------------------------------------------------------------- 2. colours */
/* The six base tokens (--bg --ink --muted --line --card --accent) are what each site theme sets, light and dark;
   everything else is mixed from them, so a theme is one line. --on-accent is the text on an accent fill. */
:root {
  --bg: #f4f5f7; --ink: #1c2230; --muted: #5f6878; --line: #e1e4ea; --card: #fff; --accent: #4f46e5; --on-accent: #fff;
  color-scheme: light dark;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) { --bg: #101218; --ink: #e5e7eb; --muted: #9aa2b1; --line: #262a33; --card: #181b22; --accent: #a5b4fc; --on-accent: #10132a; color-scheme: dark; }
}
:root[data-theme="dark"] { --bg: #101218; --ink: #e5e7eb; --muted: #9aa2b1; --line: #262a33; --card: #181b22; --accent: #a5b4fc; --on-accent: #10132a; color-scheme: dark; }
/* ------------------------------------------------------------- site themes (picked in the control panel, set on <html data-site-theme>) */
/* every theme has a light and a dark set, like the default one; "night" is always dark */
:root[data-site-theme="ocean"] { --bg: #f2f6fa; --ink: #13233a; --muted: #56677f; --line: #dbe4ee; --card: #ffffff; --accent: #1d6fd1; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-site-theme="ocean"]:not([data-theme="light"]) { --bg: #0d141d; --ink: #e3eaf3; --muted: #93a3b8; --line: #22303f; --card: #141e2a; --accent: #8ab8f2; --on-accent: #0a1a2e; color-scheme: dark; } }
:root[data-site-theme="ocean"][data-theme="dark"] { --bg: #0d141d; --ink: #e3eaf3; --muted: #93a3b8; --line: #22303f; --card: #141e2a; --accent: #8ab8f2; --on-accent: #0a1a2e; color-scheme: dark; }
:root[data-site-theme="emerald"] { --bg: #f3f7f5; --ink: #16261f; --muted: #586b62; --line: #dce7e1; --card: #ffffff; --accent: #0f7a5c; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-site-theme="emerald"]:not([data-theme="light"]) { --bg: #0d1512; --ink: #e2ece7; --muted: #93a89e; --line: #22302a; --card: #141e1a; --accent: #6fd3b0; --on-accent: #062018; color-scheme: dark; } }
:root[data-site-theme="emerald"][data-theme="dark"] { --bg: #0d1512; --ink: #e2ece7; --muted: #93a89e; --line: #22302a; --card: #141e1a; --accent: #6fd3b0; --on-accent: #062018; color-scheme: dark; }
:root[data-site-theme="sand"] { --bg: #f8f5f0; --ink: #2a2118; --muted: #6e6253; --line: #e9e1d5; --card: #fffdf9; --accent: #b4532a; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-site-theme="sand"]:not([data-theme="light"]) { --bg: #15110d; --ink: #efe7dc; --muted: #ab9f90; --line: #312920; --card: #1e1914; --accent: #f0a37a; --on-accent: #2a1408; color-scheme: dark; } }
:root[data-site-theme="sand"][data-theme="dark"] { --bg: #15110d; --ink: #efe7dc; --muted: #ab9f90; --line: #312920; --card: #1e1914; --accent: #f0a37a; --on-accent: #2a1408; color-scheme: dark; }
:root[data-site-theme="slate"] { --bg: #f5f5f4; --ink: #1c1c1e; --muted: #63636a; --line: #e4e4e7; --card: #ffffff; --accent: #3f4b5c; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-site-theme="slate"]:not([data-theme="light"]) { --bg: #101113; --ink: #e7e7ea; --muted: #9d9da6; --line: #2a2b2f; --card: #18191c; --accent: #cbd5e1; --on-accent: #15181d; color-scheme: dark; } }
:root[data-site-theme="slate"][data-theme="dark"] { --bg: #101113; --ink: #e7e7ea; --muted: #9d9da6; --line: #2a2b2f; --card: #18191c; --accent: #cbd5e1; --on-accent: #15181d; color-scheme: dark; }
:root[data-site-theme="rose"] { --bg: #faf5f6; --ink: #2b1c22; --muted: #6f5a63; --line: #eddfe3; --card: #ffffff; --accent: #b03a63; --on-accent: #fff; }
@media (prefers-color-scheme: dark) { :root[data-site-theme="rose"]:not([data-theme="light"]) { --bg: #150e11; --ink: #f0e4e8; --muted: #ad97a0; --line: #33232a; --card: #1f161a; --accent: #f29bb8; --on-accent: #2e0c19; color-scheme: dark; } }
:root[data-site-theme="rose"][data-theme="dark"] { --bg: #150e11; --ink: #f0e4e8; --muted: #ad97a0; --line: #33232a; --card: #1f161a; --accent: #f29bb8; --on-accent: #2e0c19; color-scheme: dark; }
:root[data-site-theme="night"] { --bg: #0d1117; --ink: #e6e9ef; --muted: #98a1b3; --line: #232a36; --card: #151b24; --accent: #9db4ff; --on-accent: #0c1430; color-scheme: dark; }
/* each theme also has its own header: a dark band, or a light one with a coloured rule.
   --brand-accent is the wordmark's accent: a colour that reads on that header. */
:root { --brand-accent: var(--accent); }
:root[data-site-theme="ocean"] { --header-bg: #0f2e52; --header-ink: #ffffff; --header-muted: #b9cbe2; --header-current: #ffffff; --header-pill: 16%; --header-hover: rgba(255, 255, 255, .08); --header-line: #0f2e52; --brand-accent: #8ab8f2; }
:root[data-site-theme="emerald"] { --header-rule: 3px; --header-line: var(--accent); }
:root[data-site-theme="sand"] { --header-bg: #2a2118; --header-ink: #f8f1e6; --header-muted: #cdbfab; --header-current: #f0a37a; --header-pill: 16%; --header-hover: rgba(255, 255, 255, .07); --header-line: #2a2118; --brand-accent: #f0a37a; }
:root[data-site-theme="slate"] { --header-bg: #1f2329; --header-ink: #ffffff; --header-muted: #b5bac3; --header-current: #ffffff; --header-pill: 16%; --header-hover: rgba(255, 255, 255, .08); --header-line: #1f2329; --brand-accent: #9fb3c8; }
:root[data-site-theme="rose"] { --header-rule: 3px; --header-line: var(--accent); }
/* mixed tokens: soft accent fills, raised surfaces, shadows, radii */
:root {
  --accent-soft: color-mix(in srgb, var(--accent) 9%, var(--card));
  --accent-line: color-mix(in srgb, var(--accent) 30%, var(--line));
  --surface-2: color-mix(in srgb, var(--ink) 3.5%, var(--card));
  --ink-2: color-mix(in srgb, var(--ink) 82%, var(--muted));
  --shadow-1: 0 1px 2px rgb(16 24 40 / .04), 0 1px 3px rgb(16 24 40 / .06);
  --shadow-2: 0 2px 4px rgb(16 24 40 / .04), 0 14px 32px -14px rgb(16 24 40 / .2);
  --r-lg: 20px; --r: 14px; --r-sm: 10px;
  --wrap: 1360px;
  --header-h: 64px;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 18px 40px -18px rgb(0 0 0 / .6); } }
:root[data-theme="dark"], :root[data-site-theme="night"] { --shadow-1: 0 1px 2px rgb(0 0 0 / .3); --shadow-2: 0 18px 40px -18px rgb(0 0 0 / .6); }

/* ------------------------------------------------------------- 3. base */
* { box-sizing: border-box; }
html, body { margin: 0; }
html { -webkit-text-size-adjust: 100%; text-size-adjust: 100%; }
body {
  background: var(--bg); color: var(--ink); font: 16px/1.7 var(--site-font);
  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: optimizeLegibility;
}
/* a faint wash of the theme colour behind the top of every page */
body::before { content: ""; position: absolute; inset: 0 0 auto; height: 520px; z-index: -1; pointer-events: none;
  background: radial-gradient(900px 380px at 50% -120px, color-mix(in srgb, var(--accent) 11%, transparent), transparent 72%); }
a { color: var(--accent); text-underline-offset: .2em; text-decoration-thickness: 1px; }
a:hover { text-decoration-thickness: 2px; }
h1, h2, h3, h4 { line-height: 1.35; letter-spacing: 0; }
h1 { font-size: clamp(1.45rem, 4.4vw, 2rem); font-weight: 700; text-align: center; margin: 18px 0 12px; }
h2 { font-weight: 700; }
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
img { max-width: 100%; }
.muted { color: var(--muted); } .small { font-size: .85rem; } .error { color: var(--accent); text-align: center; }
.hint { color: var(--muted); font-size: .82rem; text-align: center; margin: 10px 16px; line-height: 1.9; }
.sr-only { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }

/* ------------------------------------------------------------- 4. header */
.site-header { position: relative; z-index: 50; background: var(--header-bg, color-mix(in srgb, var(--card) 88%, transparent));
  border-bottom: var(--header-rule, 1px) solid var(--header-line, var(--line)); }
@supports (backdrop-filter: blur(4px)) { :root:not([data-site-theme="ocean"]):not([data-site-theme="sand"]):not([data-site-theme="slate"]) .site-header { backdrop-filter: saturate(1.5) blur(14px); -webkit-backdrop-filter: saturate(1.5) blur(14px); } }
.header-inner { max-width: var(--wrap); margin: 0 auto; min-height: var(--header-h); padding: 10px 16px; display: flex; align-items: center; justify-content: space-between; gap: 10px 20px; }
.logo { flex: none; display: inline-flex; align-items: center; gap: 10px; font-weight: 800; font-size: 1.15rem; color: var(--header-ink, var(--ink)); text-decoration: none; }
.logo img { display: block; border-radius: 9px; box-shadow: 0 1px 2px rgb(0 0 0 / .12); }
.site-nav { display: flex; align-items: center; gap: 2px; min-width: 0; }
.site-nav > a { position: relative; padding: 8px 13px; border-radius: 10px; color: var(--header-muted, var(--muted)); text-decoration: none; font-weight: 600; font-size: .93rem; white-space: nowrap; transition: color .15s, background-color .15s; }
.site-nav > a:hover { color: var(--header-ink, var(--ink)); background: var(--header-hover, var(--surface-2)); }
.site-nav > a[aria-current="page"] { color: var(--header-current, var(--accent)); background: color-mix(in srgb, var(--header-current, var(--accent)) var(--header-pill, 10%), transparent); }
.site-nav > a.nav-blog { margin-inline-start: 6px; }
.site-nav > a.nav-blog::before { content: ""; position: absolute; inset-inline-start: -4px; top: 25%; bottom: 25%; border-inline-start: 1px solid var(--header-line, var(--line)); opacity: .9; }
:root[data-site-theme="ocean"] .site-nav > a.nav-blog::before, :root[data-site-theme="sand"] .site-nav > a.nav-blog::before, :root[data-site-theme="slate"] .site-nav > a.nav-blog::before { border-color: rgba(255, 255, 255, .2); }
.logo-text { font-size: 1.2rem; }
.site-header select { font: inherit; padding: 6px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--bg); color: var(--ink); max-width: 60vw; }
/* laptops: the header stays at the top while reading */
@media (min-width: 1001px) {
  .site-header { position: sticky; top: 0; }
  html { scroll-padding-top: calc(var(--header-h) + 12px); }
}
/* phones: logo on its own line, the calculators in a row that scrolls sideways */
@media (max-width: 760px) {
  .header-inner { flex-direction: column; align-items: stretch; gap: 6px; padding: 10px 0 6px; min-height: 0; }
  .logo { padding: 0 16px; align-self: flex-start; }
  .site-nav { overflow-x: auto; scrollbar-width: none; padding: 0 12px 2px; gap: 4px; -webkit-mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); mask: linear-gradient(90deg, transparent, #000 14px, #000 calc(100% - 14px), transparent); }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav > a { flex: none; padding: 7px 12px; font-size: .9rem; }
}

/* ------------------------------------------------------------- 5. page layout */
.page { width: 100%; max-width: var(--wrap); margin: 0 auto; padding: 0 16px; display: grid; gap: 24px;
  grid-template-columns: 236px minmax(0, 1fr) 270px; grid-template-areas: "fav main side"; align-items: start; }
.page > .guide { grid-area: fav; position: sticky; top: calc(var(--header-h) + 18px); margin-top: 20px; }
.page > main { grid-area: main; min-width: 0; }
.page > .sidebar { grid-area: side; margin-top: 20px; }
@media (max-width: 1000px) {
  .page { grid-template-columns: minmax(0, 1fr); grid-template-areas: "main" "side" "fav"; gap: 18px; }
  .page > .guide { position: static; margin-top: 0; }
  .page > .sidebar { margin-top: 0; }
}
.page-narrow { width: 100%; max-width: 780px; margin: 28px auto 40px; padding: 0 16px; }

/* ------------------------------------------------------------- calculator */
.calculator { --k: 1; }
.calculator[data-size="s"] { --calc-width: 310px; --k: .86; }
.calculator[data-size="m"] { --calc-width: 420px; --k: 1; }
.calculator {
  transition: max-width .2s ease;
  width: 100%; max-width: var(--calc-width, 400px); margin: 0 auto; padding: clamp(12px, 3.5vw, 16px);
  background: var(--body-bg); color: var(--body-ink, var(--lcd-ink)); border: 1px solid var(--body-border); border-radius: 24px;
  box-shadow: 0 18px 40px -18px rgba(30, 41, 80, .35), 0 2px 6px rgba(30, 41, 80, .06);
  user-select: none; -webkit-user-select: none; touch-action: manipulation;
}
.calc-top { display: flex; justify-content: space-between; align-items: center; padding: 0 2px 10px; }
.calc-brand { display: inline-flex; align-items: center; gap: 7px; font: 800 calc(.82rem * var(--k))/1 var(--site-font); letter-spacing: .16em; color: var(--brand); }
.calc-mark { display: inline-grid; place-items: center; width: calc(22px * var(--k)); height: calc(22px * var(--k)); border-radius: 7px;
  background: var(--brand); color: var(--body-bg); font-size: calc(.8rem * var(--k)); letter-spacing: 0; }
.calc-model { font: 600 calc(.72rem * var(--k))/1 system-ui, sans-serif; color: var(--model); letter-spacing: .04em; }

/* mode tabs: large, in a bold Kufi face that stays clear at small sizes, all on one line. The widget sets --tab-fs
   (16px, or a little less when they would not fit) and adds .scroll when even that is too wide (six modes) */
.mode-tabs { display: flex; flex-wrap: nowrap; gap: 6px; padding: 3px 3px 10px; margin: -3px -3px 0; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; }
.mode-tabs::-webkit-scrollbar { display: none; }
.mode-tab { flex: 1 0 auto; font: 700 calc(var(--tab-fs, 16px) * var(--k))/1.3 "Noto Kufi Arabic", var(--site-font); padding: calc(5px * var(--k)) calc(11px * var(--k)) calc(6px * var(--k)); border-radius: 999px;
  border: 0; background: var(--tab-bg); color: var(--tab-ink); cursor: pointer; white-space: nowrap; letter-spacing: 0; }
.mode-tabs.scroll { scroll-behavior: smooth; --fade-s: 0px; --fade-e: 0px;
  -webkit-mask: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent);
  mask: linear-gradient(to left, transparent, #000 var(--fade-s), #000 calc(100% - var(--fade-e)), transparent); }
.mode-tabs.scroll.more-start { --fade-s: 26px; }
.mode-tabs.scroll.more-end { --fade-e: 26px; }
.mode-tab.on { background: var(--tab-active); color: var(--tab-active-ink, #fff); }
.mode-tab:focus-visible { outline: 2px solid var(--tab-active); outline-offset: 2px; }

/* ------------------------------------------------------------- display */
.lcd {
  background: var(--lcd-bg); color: var(--lcd-ink); border: 1px solid var(--lcd-frame); border-radius: 16px;
  /* like a real LCD: slightly sunk into a dark bezel */
  box-shadow: inset 0 2px 6px rgba(0, 0, 0, .22), 0 0 0 5px color-mix(in srgb, var(--shell, #3d4a63) 55%, #000000);
  margin: 5px;
  /* a fixed height: fractions, roots and powers never make the screen grow or shrink while typing */
  padding: 8px 14px 10px; height: calc(140px * var(--k)); overflow: hidden;
  display: flex; flex-direction: column; font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif;
}
.lcd-indicators { display: flex; gap: 10px; font: 700 10px/1.3 system-ui, sans-serif; min-height: 13px; letter-spacing: .04em; }
.lcd-indicators span { opacity: 0; } .lcd-indicators span.on { opacity: .6; }
.lcd-input { flex: none; font-size: calc(1.3rem * var(--k)); height: 2.8em; display: flex; align-items: center; overflow-x: auto; overflow-y: hidden; scrollbar-width: none; white-space: nowrap; }
.lcd-result { flex: none; margin-top: auto; font-size: calc(1.85rem * var(--k)); font-weight: 600; height: 1.6em; display: flex; align-items: center; justify-content: flex-end; overflow-x: auto; overflow-y: hidden; white-space: nowrap; scrollbar-width: none; }
.lcd-msg { font: 700 1rem/1.2 system-ui, sans-serif; }
.lcd-input > .nd, .lcd-result > .nd { font-size: calc(1em * var(--fit, 1)); }
.lcd-hint { font: 500 .8rem/1.3 var(--site-font); opacity: .7; }

/* natural display */
.nd, .nd-expr { display: inline-flex; align-items: center; }
.nd-c { padding: 0 .04em; }
.nd-op, .nd-neg { padding: 0 .12em; }
.nd-fn { font-family: system-ui, sans-serif; font-size: .85em; }
.nd-frac { display: inline-flex; flex-direction: column; align-items: center; vertical-align: middle; margin: 0 .12em; font-size: .86em; }
.nd-num, .nd-den { display: flex; justify-content: center; padding: 0 .15em; min-width: .8em; }
.nd-num { border-bottom: 2px solid currentColor; padding-bottom: 1px; }
.nd-den { padding-top: 1px; }
.nd-root { display: inline-flex; align-items: stretch; margin: 0 .05em; }
.nd-radical { font-size: 1.15em; line-height: 1; align-self: flex-end; margin-right: -1px; }
.nd-radicand { border-top: 2px solid currentColor; padding: 2px .1em 0; display: inline-flex; align-items: center; }
.nd-index { font-size: .55em; align-self: flex-start; margin-right: -.35em; }
.nd-sup { font-size: .62em; align-self: flex-start; margin-left: .03em; }
.nd-sub { font-size: .62em; align-self: flex-end; }
.nd-logab, .nd-npr, .nd-abs { display: inline-flex; align-items: center; }
.nd-box { display: inline-block; width: .62em; height: .85em; border: 1.5px dotted currentColor; margin: 0 .05em; vertical-align: middle; }
.nd-cursor { display: inline-block; width: 2px; height: 1.05em; background: currentColor; margin: 0 -1px; animation: blink 1s steps(1) infinite; }
.nd-matrix { display: inline-grid; gap: 2px 12px; padding: 0 8px; border-left: 2px solid; border-right: 2px solid; font-size: .7em; }
@keyframes blink { 50% { opacity: 0; } }

/* ------------------------------------------------------------- keypad (CSS grid, driven by layout JSON) */
/* Every size is in px scaled by --k: the calculator is laid out at its design width and zoomed to fit (app.js). */
.calculator {
  --key-h: calc(31px * var(--k));        /* function keys: small caps, wider than tall */
  --alt-h: calc(12px * var(--k));        /* the line of small labels above each key */
  --key-font: "Segoe UI", system-ui, -apple-system, Roboto, "Helvetica Neue", Arial, sans-serif;
  --math-font: "Cambria Math", "Times New Roman", "STIX Two Text", serif;
}
.keypad { margin-top: calc(12px * var(--k)); display: flex; flex-direction: column; gap: calc(9px * var(--k)); }
.key-block { display: grid; grid-template-columns: repeat(var(--cols), minmax(0, 1fr)); column-gap: calc(8px * var(--k)); row-gap: calc(8px * var(--k)); }
.key-block.has-alts { row-gap: calc(5px * var(--k)); }
.key-block-numpad, .key-block-basic { --key-h: calc(41px * var(--k)); column-gap: calc(9px * var(--k)); }
.key-block-basic { --key-h: calc(46px * var(--k)); }
.key-cell { display: flex; flex-direction: column; align-items: stretch; min-width: 0; }
.key {
  position: relative; display: flex; align-items: center; justify-content: center; min-width: 0; width: 100%;
  height: var(--key-h); min-height: 0; padding: 0 2px;
  border: 0; border-radius: calc(7px * var(--k)); background: var(--key-bg); color: var(--key-fg); box-shadow: 0 2px 0 var(--key-shadow);
  font: inherit; cursor: pointer; -webkit-tap-highlight-color: transparent; transition: transform .05s, box-shadow .05s, filter .1s;
}
.key:hover { filter: brightness(1.06); }
/* press touch (default): the key sinks a little and darkens, like a real key */
.key:active { transform: translateY(2px); box-shadow: 0 0 0 var(--key-shadow); filter: brightness(.9); transition-duration: .03s; }
.key:focus-visible { outline: 2px solid var(--tab-active); outline-offset: 2px; }

/* the small labels, printed on the face plate above the key: SHIFT function left in gold, ALPHA letter right in pink */
.key-alt { display: none; }
.has-alts .key-alt, .key-top .key-alt {
  display: flex; justify-content: center; align-items: flex-end; gap: calc(3px * var(--k)); height: var(--alt-h); margin: 0 0 calc(3px * var(--k));
  font: 600 calc(10.5px * var(--k))/1 var(--key-font); letter-spacing: .02em; white-space: nowrap; pointer-events: none;
}
.key-alt.two { justify-content: space-between; padding: 0 calc(2px * var(--k)); }
.alt-shift { color: var(--label-shift); } .alt-alpha { color: var(--label-alpha); }
.alt-shift:empty, .alt-alpha:empty { display: none; }
.key-alt .math { font: italic 500 calc(12px * var(--k))/1 var(--math-font); letter-spacing: 0; }
/* SHIFT or ALPHA on: its labels light up (underlined, full colour), the other kind steps back */
.alt-shift, .alt-alpha { transition: opacity .12s; text-decoration: underline transparent; text-underline-offset: calc(2px * var(--k)); text-decoration-thickness: 1.5px; }
.alt-shift.active, .alt-alpha.active { text-decoration-color: currentColor; font-weight: 700; }
.calculator.mod-shift .alt-alpha, .calculator.mod-alpha .alt-shift { opacity: .45; }
.calculator.mod-shift .key-modifier, .calculator.mod-alpha .key-alpha { outline: 2px solid var(--label-shift); outline-offset: 2px; }
.calculator.mod-alpha .key-alpha { outline-color: var(--label-alpha); }

/* the writing on the keys: crisp white on the dark function keys, big digits on the number keys, maths in a serif italic */
.key-face { display: block; font: 500 calc(13.5px * var(--k))/1 var(--key-font); white-space: nowrap; letter-spacing: .01em; }
.key-math .key-face { font: italic 400 calc(17px * var(--k))/1 var(--math-font); letter-spacing: 0; }
.key-long .key-face { font-size: calc(10.5px * var(--k)); }
:is(.key-block-numpad, .key-block-basic) .key-face { font-size: calc(21px * var(--k)); font-weight: 400; }
:is(.key-block-numpad, .key-block-basic) :is(.key-operator, .key-equals) .key-face { font-size: calc(24px * var(--k)); }
:is(.key-block-numpad, .key-block-basic) .key-control .key-face { font-size: calc(18px * var(--k)); font-weight: 500; }
:is(.key-block-numpad, .key-block-basic) .key-math .key-face { font-size: calc(24px * var(--k)); }
.key[data-id="exp10"] .key-face { font-size: calc(17px * var(--k)); }
:is(.key-block-numpad, .key-block-basic) .key-word .key-face { font-size: calc(17px * var(--k)); font-weight: 500; letter-spacing: .02em; }
/* superscripts: raised small figures; a letter exponent (ⁿ) in the serif italic */
.k-sup { font-size: .62em; position: relative; top: -.62em; margin-left: .06em; font-style: normal; letter-spacing: 0; }
.k-sup.k-var, .key-math .k-sup, .math .k-sup { font-family: var(--math-font); font-style: italic; }
.key-math .k-sup { font-style: normal; }
.key-math .k-sup.k-var { font-style: italic; }
/* crisp labels: no smearing shadows, sharp edges on every screen */
.key, .key-face, .key-alt { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; text-rendering: geometricPrecision; text-shadow: none; }
.key-number { box-shadow: 0 2px 0 var(--key-shadow), inset 0 0 0 1px var(--key-shadow); }
.key-soft { --key-h: calc(25px * var(--k)); border-radius: calc(6px * var(--k)); }
.key-soft .key-face { font-size: calc(11.5px * var(--k)); }

/* ------------------------------------------------------------- ads & affiliate */
.ad-slot { margin: 16px auto; max-width: 100%; overflow: hidden; text-align: center; }
/* AdSense: label every ad, and keep ads well away from the keys so nobody clicks one by mistake. */
.ad-slot::before { content: "إعلان"; display: block; font-size: .7rem; color: var(--muted); margin-bottom: 4px; }
.ad-slot.ad-below_calculator { margin-top: 56px; }
.sidebar .ad-slot.ad-slot { margin-top: 32px; }
.calc-main > .ad-slot.ad-in_content { margin-top: 40px; }
html.fs-lock .ad-slot { display: none !important; }
/* static copy: the "إعلان" label only when the control panel asks for it */
.ad-slot[data-slot]:not(.ad-labelled)::before { content: none; }

/* ------------------------------------------------------------- visitor controls (size + colour theme) */
.calc-controls { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 10px 14px; margin: 0 auto 14px; }
.control-group { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; max-width: 100%; }
.control-label { font-size: .78rem; font-weight: 600; color: var(--muted); }
.size-btn { font: 600 .82rem/1 var(--site-font); min-width: 36px; height: 34px; padding: 0 12px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); cursor: pointer; transition: border-color .15s, color .15s, background-color .15s; }
.size-btn:hover { border-color: var(--accent-line); color: var(--ink); }
.size-btn[aria-pressed="true"] { border-color: var(--accent); color: var(--accent); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--accent); }
.swatch { width: 28px; height: 28px; border-radius: 50%; border: 2px solid var(--card); box-shadow: 0 0 0 1px var(--line); cursor: pointer; padding: 0; transition: transform .12s; }
.swatch:hover { transform: scale(1.08); }
.swatch[aria-pressed="true"] { box-shadow: 0 0 0 2px var(--accent); }
/* the look of the calculator (colour, shape, keys, touch) sits under it; only the size stays above */
.calc-style { margin: 20px auto 0; padding: 14px 16px; max-width: 520px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
.calc-style:empty { display: none; }
/* in the margin beside the calculator: one control per line, under the keyboard hint */
.calc-style-home .calc-style { margin: 16px 0 0; max-width: none; flex-direction: column; align-items: stretch; justify-content: flex-start; gap: 14px; }
.calc-style-home .control-group { flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: flex-start; }
.calc-style-home .control-group > .control-label { flex-basis: 100%; }
.size-btn:focus-visible, .swatch:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .calculator { transition: none; } }
/* the magnifying lens button (with the size controls) and the key glow switch (with the look controls) */
.lens-group { gap: 8px; flex-wrap: nowrap; }
.lens-btn { flex: none; width: 40px; height: 40px; padding: 0; display: inline-grid; place-items: center; border-radius: 50%; cursor: pointer;
  border: 1px solid var(--line); color: var(--ink);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--card) 55%, #ffffff), var(--card) 62%, color-mix(in srgb, var(--card) 88%, #000000));
  box-shadow: 0 2px 6px rgba(15, 20, 35, .14), inset 0 1px 0 rgba(255, 255, 255, .7); transition: transform .15s, color .15s, border-color .15s, box-shadow .2s; }
.lens-btn svg { width: 21px; height: 21px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.lens-btn svg circle { fill: color-mix(in srgb, var(--accent) 12%, transparent); }
.lens-btn .lens-shine { stroke-width: 1.5; opacity: .75; }
.lens-btn:hover { color: var(--accent); border-color: var(--accent-line); transform: translateY(-1px); }
.lens-btn[aria-pressed="true"] { color: #ffffff; border-color: var(--accent);
  background: radial-gradient(circle at 34% 28%, color-mix(in srgb, var(--accent) 55%, #ffffff), var(--accent) 66%, color-mix(in srgb, var(--accent) 80%, #000000));
  box-shadow: 0 0 0 4px var(--accent-soft), 0 6px 14px -4px color-mix(in srgb, var(--accent) 55%, transparent), inset 0 1px 0 rgba(255, 255, 255, .45); }
.lens-btn[aria-pressed="true"] svg circle { fill: rgba(255, 255, 255, .18); }
.lens-btn:focus-visible, .lamp-switch:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; }
.lens-hint { font-size: .8rem; font-weight: 600; color: var(--muted); line-height: 1.4; }
.lens-btn[aria-pressed="true"] + .lens-hint { color: var(--accent); }
.lamp-switch { display: inline-flex; align-items: center; gap: 8px; height: 34px; padding: 0 12px 0 6px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--card); color: var(--ink-2); font: 600 .82rem/1 var(--site-font); transition: border-color .15s, color .15s; }
.lamp-track { position: relative; flex: none; width: 40px; height: 22px; border-radius: 999px; background: color-mix(in srgb, var(--muted) 40%, var(--card)); transition: background-color .2s; }
.lamp-knob { position: absolute; top: 3px; inset-inline-start: 3px; width: 16px; height: 16px; border-radius: 50%; background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .3); transition: transform .2s ease, box-shadow .2s ease, background-color .2s; }
.lamp-switch[aria-checked="true"] { color: var(--ink); border-color: color-mix(in srgb, #e9a23b 60%, var(--line)); }
.lamp-switch[aria-checked="true"] .lamp-track { background: linear-gradient(90deg, #e39a2d, #f4b850); }
.lamp-switch[aria-checked="true"] .lamp-knob { transform: translateX(-18px); background: #fff8ea; box-shadow: 0 0 0 3px rgba(255, 205, 120, .35), 0 0 10px 2px rgba(255, 186, 80, .85); }
[dir="ltr"] .lamp-switch[aria-checked="true"] .lamp-knob { transform: translateX(18px); }
@media (prefers-reduced-motion: reduce) { .lamp-knob, .lamp-track, .lens-btn { transition: none; } }

/* line display (basic and financial): one-line text, no stacked templates */
.calculator[data-display="line"] .lcd { font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; font-variant-numeric: tabular-nums; }
.calculator[data-display="line"] .lcd-input { font-size: calc(1.15rem * var(--k)); }

/* ------------------------------------------------------------- side panels: quick guide + history */
.title-row { display: flex; align-items: center; justify-content: center; gap: 6px; }
.panel { background: var(--card); border: 1px solid var(--line); border-radius: var(--r); padding: 14px 16px; box-shadow: var(--shadow-1); }
.panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.panel h2 { display: flex; align-items: center; gap: 8px; font-size: .98rem; margin: 2px 0 6px; }
.panel h2::before { content: ""; flex: none; width: 8px; height: 8px; border-radius: 3px; background: var(--accent); box-shadow: 0 0 0 4px var(--accent-soft); }
.panel ul, .panel ol { list-style: none; margin: 0; padding: 0; }
.link-btn { font: 600 .8rem var(--site-font); border: 0; background: none; color: var(--accent); cursor: pointer; padding: 4px 8px; border-radius: 8px; }
.link-btn.danger { color: #c0392b; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .link-btn.danger { color: #ff8a7a; } }
:root[data-theme="dark"] .link-btn.danger, :root[data-site-theme="night"] .link-btn.danger { color: #ff8a7a; }
.icon-btn { flex: none; width: 30px; height: 30px; border: 0; background: none; color: var(--muted); font-size: 1.1rem; cursor: pointer; border-radius: 8px; }
.icon-btn:hover, .link-btn:hover { background: var(--surface-2); color: var(--ink); }
.filter { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.history-list { max-height: 460px; overflow-y: auto; scrollbar-width: thin; }
.history-list li { display: flex; align-items: flex-start; border-top: 1px solid var(--line); }
.history-entry { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; padding: 9px 6px; border: 0; border-radius: 8px; background: none; color: var(--ink); text-align: start; cursor: pointer; font-family: "Cambria Math", "STIX Two Math", "Times New Roman", serif; }
.history-entry:hover { background: var(--surface-2); }
.h-expr, .h-result { overflow-x: auto; white-space: nowrap; scrollbar-width: none; max-width: 100%; }
.h-result { align-self: flex-end; font-weight: 600; color: var(--accent); }
.h-meta { font: .72rem var(--site-font); color: var(--muted); }
.history-list li .icon-btn { margin-top: 6px; }
.history #history-body > p, .history #history-body .muted { font-size: .85rem; }
.confirm { display: inline-flex; gap: 2px; }

/* ∫ / Σ / d/dx templates */
.nd-int, .nd-sum, .nd-deriv { display: inline-flex; align-items: center; }
.nd-bigop { display: inline-flex; flex-direction: column; align-items: center; margin: 0 .08em; line-height: 1; }
.nd-sign { font-size: 1.35em; line-height: .95; }
.nd-sign-int { font-size: 1.6em; font-style: italic; }
.nd-lim { font-size: .55em; display: flex; justify-content: center; min-width: .6em; }
.nd-ddx { font-size: .75em; }
.nd-at { display: inline-flex; align-items: stretch; }
.nd-bar { font-size: 1.4em; line-height: 1; }

/* MODE screens (menus, data tables, result lists) drawn on the LCD */
.lcd-screen { flex: 1; display: flex; flex-direction: column; font: 600 calc(.88rem * var(--k) * var(--fit, 1))/1.35 system-ui, sans-serif; min-height: 0; overflow: hidden; }
.scr-title { font-size: .72em; opacity: .75; display: flex; justify-content: space-between; gap: 8px; }
.scr-items { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 0 10px; }
.scr-items.one-col { grid-template-columns: 1fr; }
.scr-item { padding: 0 4px; border-radius: 3px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.scr-item.sel, .scr-cell.sel, .scr-line.sel { background: var(--lcd-ink); color: var(--lcd-bg); }
.scr-grid { border-collapse: collapse; width: 100%; font-variant-numeric: tabular-nums; }
.scr-grid th { font-size: .72em; opacity: .75; font-weight: 600; }
.scr-grid td, .scr-grid th { padding: 0 4px; text-align: right; }
.scr-grid .rowno { opacity: .6; font-size: .72em; width: 1.6em; }
.scr-cell { border-radius: 3px; }
.scr-edit { margin-top: auto; display: flex; justify-content: space-between; gap: 8px; border-top: 1px solid currentColor; padding-top: 2px; font-family: "Cambria Math", "Times New Roman", serif; font-size: 1.05em; }
.scr-lines { list-style: none; margin: 0; padding: 0; }
.scr-line { display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 0 4px; border-radius: 3px; min-height: 1.6em; }
.scr-line .nd { font-family: "Cambria Math", "Times New Roman", serif; font-size: 1.1em; }
.scr-hint { font-size: .68em; opacity: .7; margin-top: auto; }
.lcd-hint { font: 600 .7rem/1.2 system-ui, sans-serif; opacity: .7; }
.lcd [hidden] { display: none !important; }

/* graphing / CAS / financial screens */
.key-block-dpad { width: 58%; margin: 0 auto; }
.calculator[data-display="dot_matrix"] .lcd { height: calc(218px * var(--k)); }
.scr-graph { display: block; width: 100%; aspect-ratio: 2 / 1; height: auto; touch-action: manipulation; }
.scr-trace { font: 600 .72em/1.3 system-ui, sans-serif; min-height: 1.4em; justify-content: flex-start; }
.scr-fkeys { display: grid; grid-template-columns: repeat(6, 1fr); gap: 3px; margin-top: 3px; font: 700 .62em/1.5 system-ui, sans-serif; }
.scr-fkeys span { text-align: center; border: 1px solid currentColor; border-radius: 3px 3px 0 0; cursor: pointer; white-space: nowrap; overflow: hidden; }
.scr-fkeys span.empty { border-color: transparent; cursor: default; }
.scr-fedit .scr-line { justify-content: flex-start; font-family: "Cambria Math", "Times New Roman", serif; }
.scr-fedit .fn-label { color: var(--fn-color, inherit); min-width: 2.2em; }
.scr-fedit .scr-line.sel .fn-label { color: inherit; }
.scr-fedit .fn-text { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.scr-fedit.cas .scr-line { min-height: 2.4em; }
.scr-fedit.cas .fn-text { white-space: normal; word-break: break-all; }
.scr-form .scr-line { font-variant-numeric: tabular-nums; }

/* ------------------------------------------------------------- full screen */
.fs-exit { display: none; }
.calc-stage.is-fullscreen { position: fixed; inset: 0; z-index: 1000; margin: 0 !important; background: var(--bg);
  display: flex; align-items: center; justify-content: center; padding: 44px 8px 8px; overflow: hidden; }
.calc-stage.is-fullscreen .calculator { margin: 0; flex: none; width: var(--calc-width, 400px); }
.calc-stage.is-fullscreen .fs-exit { display: block; position: fixed; top: max(8px, env(safe-area-inset-top)); right: 8px; z-index: 1001;
  font: 700 .9rem/1 system-ui, sans-serif; padding: 9px 14px; border-radius: 999px; border: 0; background: var(--ink); color: var(--bg); cursor: pointer; }
html.fs-lock, html.fs-lock body { overflow: hidden; }

/* ------------------------------------------------------------- calculator shapes (data-shape, picked by the visitor) */
/* classic: squarer body with a solar strip, bevelled keys and a deep screen frame */
.calculator[data-shape="classic"] { border-radius: 14px 14px 22px 22px; border-width: 2px; }
.calculator[data-shape="classic"] .calc-top::after {
  content: ""; order: 3; width: calc(64px * var(--k)); height: calc(16px * var(--k)); border-radius: 3px;
  background: repeating-linear-gradient(90deg, #3a2f2a 0 calc(15px * var(--k)), #6b5a4c calc(15px * var(--k)) calc(16px * var(--k)));
  box-shadow: inset 0 1px 2px rgba(0, 0, 0, .5);
}
.calculator[data-shape="classic"] .calc-model { order: 2; margin-inline-start: auto; margin-inline-end: 10px; }
.calculator[data-shape="classic"] .lcd { border-radius: 6px; box-shadow: inset 0 3px 7px rgba(0, 0, 0, .28), 0 0 0 8px color-mix(in srgb, var(--shell, #3d4a63) 55%, #000000); margin: 8px; }
.calculator[data-shape="classic"] .key { border-radius: 6px; box-shadow: 0 3px 0 var(--key-shadow);
  background-image: linear-gradient(rgba(255, 255, 255, .16), rgba(0, 0, 0, .06)); }
.calculator[data-shape="classic"] .key-block-numpad .key, .calculator[data-shape="classic"] .key-block-basic .key { border-radius: 8px; }
.calculator[data-shape="classic"] .mode-tab { border-radius: 6px; }

/* rounded: pill keys and a soft, very round body */
.calculator[data-shape="rounded"] { border-radius: 42px; padding-inline: clamp(14px, 4vw, 20px); }
.calculator[data-shape="rounded"] .lcd { border-radius: 26px; }
.calculator[data-shape="rounded"] .key,
.calculator[data-shape="rounded"] .key-block-numpad .key,
.calculator[data-shape="rounded"] .key-block-basic .key { border-radius: 999px; }

/* flat: no depth at all, thin outlines, square-ish corners */
.calculator[data-shape="flat"] { border-radius: 10px; border-width: 2px; box-shadow: none; }
.calculator[data-shape="flat"] .lcd { border-radius: 4px; box-shadow: none; margin: 0; border-width: 2px; border-color: var(--lcd-ink); }
.calculator[data-shape="flat"] .key,
.calculator[data-shape="flat"] .key-block-numpad .key,
.calculator[data-shape="flat"] .key-block-basic .key { border-radius: 4px; box-shadow: inset 0 0 0 1px var(--key-shadow); }
.calculator[data-shape="flat"] .key:active { transform: none; filter: brightness(.9); }
.calculator[data-shape="flat"] .mode-tab { border-radius: 4px; }

/* sleek: narrow top, wide rounded bottom, keys that lean on a deeper shadow */
.calculator[data-shape="sleek"] { border-radius: 30px 30px 64px 64px / 30px 30px 48px 48px; padding-bottom: clamp(20px, 5vw, 28px); }
.calculator[data-shape="sleek"] .lcd { border-radius: 22px 22px 10px 10px; }
.calculator[data-shape="sleek"] .key { border-radius: 10px 10px 16px 16px; box-shadow: 0 4px 0 var(--key-shadow); }
.calculator[data-shape="sleek"] .key-block-numpad .key,
.calculator[data-shape="sleek"] .key-block-basic .key { border-radius: 12px 12px 20px 20px; }
.calculator[data-shape="sleek"] .key:active { transform: translateY(2px); box-shadow: 0 2px 0 var(--key-shadow); }

/* ------------------------------------------------------------- touch on press (data-touch, picked by the visitor) */
.calculator[data-touch="ripple"] .key, .calculator[data-touch="combo"] .key { overflow: hidden; }
.ripple { position: absolute; border-radius: 50%; pointer-events: none; background: currentColor; opacity: .24;
  transform: scale(0); animation: key-ripple .45s ease-out forwards; }
@keyframes key-ripple { to { transform: scale(2.6); opacity: 0; } }
/* ripple and glow keep the key in place */
.calculator[data-touch="ripple"] .key:active, .calculator[data-touch="glow"] .key:active { transform: none; filter: none; }
.calculator[data-touch="glow"] .key { transition: box-shadow .25s ease; }
.calculator[data-touch="glow"] .key.glow { transition: none;
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--tab-active) 45%, transparent), 0 2px 0 var(--key-shadow) !important; }
.calculator[data-touch="combo"] .key:active { transform: translateY(1px) scale(.97); filter: brightness(.95); }

/* the lamp (data-lamp="on", on by default): a warm halo lights up round the pressed key's frame, flickers on like a
   bulb and fades. The widget puts a .key-lamp the size and shape of the key beside it; its colour leans to the key's own. */
.key-cell, .key-top { position: relative; }
.key-lamp { position: absolute; z-index: 4; pointer-events: none; opacity: 0;
  --lamp: color-mix(in srgb, #ffc768 78%, var(--lamp-key, #ffc768));
  box-shadow: 0 0 0 calc(2px * var(--k)) color-mix(in srgb, var(--lamp) 65%, #ffffff),
    0 0 calc(14px * var(--k)) calc(4px * var(--k)) var(--lamp),
    0 0 calc(36px * var(--k)) calc(12px * var(--k)) color-mix(in srgb, var(--lamp) 55%, transparent),
    inset 0 0 calc(10px * var(--k)) color-mix(in srgb, var(--lamp) 70%, transparent);
  animation: key-lamp .8s cubic-bezier(.2, .7, .3, 1) forwards; will-change: opacity, transform; }
@keyframes key-lamp {
  0% { opacity: 0; transform: scale(.97); }
  6% { opacity: .9; transform: scale(1); }
  10% { opacity: .6; }
  16%, 40% { opacity: 1; transform: scale(1.01); }
  100% { opacity: 0; transform: scale(1.07); } }
@media (prefers-reduced-motion: reduce) { .key-lamp { animation: key-lamp-calm .4s ease-out forwards; } @keyframes key-lamp-calm { 0%, 30% { opacity: 1; } 100% { opacity: 0; } } }

/* ------------------------------------------------------------- real-calculator bodies: a moulded case (--shell) framing a recessed face plate */
/* Everything is in px scaled by --k, never stretched: the keys always sit a fixed distance inside the frame, whatever the size. */
.shape-select { font: 600 .85rem/1.2 var(--site-font); padding: 6px 10px; border-radius: 8px;
  border: 1px solid var(--line); background: var(--card); color: var(--ink); max-width: 100%; }
.calculator[data-shape^="real-"] {
  --rim: calc(15px * var(--k));          /* width of the case frame round the face plate */
  --gap: calc(13px * var(--k));          /* face plate edge to the keys */
  --top: 0px; --chin: 0px;               /* extra room a shape needs above and below */
  --ro: calc(30px * var(--k));           /* outer corner radius */
  --ro-b: var(--ro);
  --ri: calc(var(--ro) - var(--rim) + 2px); --ri-b: calc(var(--ro-b) - var(--rim) + 2px);
  position: relative; isolation: isolate; border: 0;
  padding: calc(var(--rim) + var(--gap) + 4px + var(--top)) calc(var(--rim) + var(--gap)) calc(var(--rim) + var(--gap) + 4px + var(--chin));
  border-radius: var(--ro) var(--ro) var(--ro-b) var(--ro-b);
  background:
    linear-gradient(90deg, rgba(0, 0, 0, .22), transparent 4%, transparent 96%, rgba(0, 0, 0, .22)),
    linear-gradient(180deg, rgba(255, 255, 255, .16), transparent 12%, transparent 85%, rgba(0, 0, 0, .25)),
    var(--shell);
  box-shadow:
    inset 0 2px 1px rgba(255, 255, 255, .22), inset 0 -3px 2px rgba(0, 0, 0, .35), inset 0 0 0 1px rgba(0, 0, 0, .3),
    0 26px 40px -18px rgba(10, 14, 24, .6), 0 4px 10px rgba(10, 14, 24, .22);
}
/* the face plate, set into the frame: a shadow under the frame's lip on top, a lit edge at the bottom */
.calculator[data-shape^="real-"]::before {
  content: ""; position: absolute; inset: var(--rim); z-index: -1; pointer-events: none;
  border-radius: var(--ri) var(--ri) var(--ri-b) var(--ri-b);
  background: linear-gradient(180deg, color-mix(in srgb, var(--body-bg) 90%, #ffffff), var(--body-bg) 14%, var(--body-bg) 88%, color-mix(in srgb, var(--body-bg) 92%, #000000));
  box-shadow: inset 0 3px 5px -1px rgba(0, 0, 0, .45), inset 0 0 0 1px rgba(0, 0, 0, .28), 0 1px 0 rgba(255, 255, 255, .2), 0 -1px 0 rgba(0, 0, 0, .25);
}
/* a thin trim line on the frame, just outside the face plate */
.calculator[data-shape^="real-"]::after {
  content: ""; position: absolute; inset: calc(var(--rim) - 4px * var(--k)); z-index: -2; pointer-events: none;
  border-radius: calc(var(--ri) + 4px * var(--k)) calc(var(--ri) + 4px * var(--k)) calc(var(--ri-b) + 4px * var(--k)) calc(var(--ri-b) + 4px * var(--k));
  border: 1px solid rgba(255, 255, 255, .13);
}
/* the moulded panel round the screen, curving down over the first row of keys */
.calculator[data-shape^="real-"] .lcd { position: relative; }
.calculator[data-shape^="real-"] .lcd::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  inset: calc(-9px * var(--k)) calc(-9px * var(--k)) calc(-46px * var(--k));
  background: color-mix(in srgb, var(--body-bg) 55%, var(--shell));
  border-radius: 18px 18px 50% 50% / 18px 18px 40px 40px;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, .22), 0 1px 0 rgba(0, 0, 0, .1);
}
/* like a real calculator: small rounded caps above, larger ones below; our own touch is the softer bottom corners */
.calculator[data-shape^="real-"]:not([data-keys="plain"]) .key { border-radius: calc(6px * var(--k)) calc(6px * var(--k)) calc(9px * var(--k)) calc(9px * var(--k)); }
.calculator[data-shape^="real-"]:not([data-keys="plain"]) :is(.key-block-numpad, .key-block-basic) .key { border-radius: calc(8px * var(--k)) calc(8px * var(--k)) calc(12px * var(--k)) calc(12px * var(--k)); }
/* a small solar cell beside the model name */
.calculator[data-shape^="real-"] .calc-model { display: inline-flex; align-items: center; gap: 8px; }
.calculator[data-shape^="real-"] .calc-model::after {
  content: ""; width: calc(54px * var(--k)); height: calc(15px * var(--k)); border-radius: 3px;
  background: repeating-linear-gradient(90deg, #3b302b 0 calc(12.5px * var(--k)), #6b5a4e 0 calc(13.5px * var(--k)));
  box-shadow: inset 0 0 0 1px rgba(0, 0, 0, .35), 0 1px 0 rgba(255, 255, 255, .3);
}
/* arch: the top of the case rises in a shallow arch */
.calculator[data-shape="real-arch"] { --top: calc(10px * var(--k)); --ro-b: calc(34px * var(--k)); }
.calculator[data-shape="real-arch"] { border-radius: 50% 50% var(--ro-b) var(--ro-b) / calc(34px * var(--k)) calc(34px * var(--k)) var(--ro-b) var(--ro-b); }
.calculator[data-shape="real-arch"]::before { border-radius: 50% 50% var(--ri-b) var(--ri-b) / calc(24px * var(--k)) calc(24px * var(--k)) var(--ri-b) var(--ri-b); }
.calculator[data-shape="real-arch"]::after { border-radius: 50% 50% calc(var(--ri-b) + 4px * var(--k)) calc(var(--ri-b) + 4px * var(--k)) / calc(27px * var(--k)) calc(27px * var(--k)) calc(var(--ri-b) + 4px * var(--k)) calc(var(--ri-b) + 4px * var(--k)); }
/* oval: soft round ends top and bottom */
.calculator[data-shape="real-oval"] { --top: calc(18px * var(--k)); --chin: calc(16px * var(--k)); }
.calculator[data-shape="real-oval"] { border-radius: 50% / calc(52px * var(--k)); }
.calculator[data-shape="real-oval"]::before { border-radius: 50% / calc(40px * var(--k)); }
.calculator[data-shape="real-oval"]::after { border-radius: 50% / calc(44px * var(--k)); }
/* wide base and curved waist: the sides follow a curve of a fixed depth (--side) that only stretches top to bottom,
   on the case and on the face plate alike, so the frame keeps its width and the keys stay clear of it */
.calculator:is([data-shape="real-flare"], [data-shape="real-waist"]) {
  --side: calc(11px * var(--k)); padding-inline: calc(var(--rim) + var(--gap) + var(--side));
  box-shadow: inset 0 2px 1px rgba(255, 255, 255, .22), inset 0 -3px 2px rgba(0, 0, 0, .35);
}
.calculator:is([data-shape="real-flare"], [data-shape="real-waist"])::after { display: none; }
.calc-stage:has(> .calculator:is([data-shape="real-flare"], [data-shape="real-waist"])) { filter: drop-shadow(0 18px 16px rgba(10, 14, 24, .35)); }
.calculator[data-shape="real-flare"] { --ro: calc(30px * var(--k)); --ro-b: calc(44px * var(--k)); --chin: calc(14px * var(--k)); }
.calculator[data-shape="real-flare"], .calculator[data-shape="real-flare"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 C6,28 0,46 0,72 V100 H10 Z'/%3E%3C/svg%3E") left top / var(--side) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C4,28 10,46 10,72 V100 H0 Z'/%3E%3C/svg%3E") right top / var(--side) 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 2 * var(--side) + 2px) 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 C6,28 0,46 0,72 V100 H10 Z'/%3E%3C/svg%3E") left top / var(--side) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C4,28 10,46 10,72 V100 H0 Z'/%3E%3C/svg%3E") right top / var(--side) 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 2 * var(--side) + 2px) 100% no-repeat; }
.calculator[data-shape="real-waist"] { --ro: calc(26px * var(--k)); --ro-b: calc(30px * var(--k)); }
.calculator[data-shape="real-waist"], .calculator[data-shape="real-waist"]::before { -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C0,24 10,34 10,50 C10,66 0,76 0,100 H10 V0 Z'/%3E%3C/svg%3E") left top / var(--side) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 C10,24 0,34 0,50 C0,66 10,76 10,100 H0 V0 Z'/%3E%3C/svg%3E") right top / var(--side) 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 2 * var(--side) + 2px) 100% no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M0,0 C0,24 10,34 10,50 C10,66 0,76 0,100 H10 V0 Z'/%3E%3C/svg%3E") left top / var(--side) 100% no-repeat, url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 10 100' preserveAspectRatio='none'%3E%3Cpath d='M10,0 C10,24 0,34 0,50 C0,66 10,76 10,100 H0 V0 Z'/%3E%3C/svg%3E") right top / var(--side) 100% no-repeat, linear-gradient(#000 0 0) center / calc(100% - 2 * var(--side) + 2px) 100% no-repeat; }

/* ------------------------------------------------------------- the top of the keypad: a round arrow pad in the middle, round keys either side */
.key-top { display: flex; align-items: center; justify-content: space-between; gap: calc(6px * var(--k)); padding: calc(2px * var(--k)) 0 calc(4px * var(--k)); }
.key-top-side { flex: 1; min-width: 0; display: flex; justify-content: space-evenly; align-items: center; gap: calc(6px * var(--k)); }
.key-cell.cell-round { flex: none; align-items: center; }
/* SHIFT, ALPHA and the menu key: small round grey caps, a lit dome in every key design that keeps a solid key */
.calculator .key.key-round { flex: none; width: calc(40px * var(--k)); height: calc(40px * var(--k)); min-height: 0; padding: 0; border-radius: 50% !important; }
.key-round .key-face { font-size: calc(15px * var(--k)); }
.calculator .key.key-round.key-wide { width: calc(56px * var(--k)); }
.key-round.key-wide .key-face { font-size: calc(10.5px * var(--k)); font-weight: 600; letter-spacing: .03em; }
.calculator:not([data-keys="outline"]):not([data-keys="stripe"]):not([data-keys="glass"]) .key.key-round {
  background: radial-gradient(circle at 50% 32%, color-mix(in srgb, var(--key-bg) 70%, #ffffff), var(--key-bg) 55%, color-mix(in srgb, var(--key-bg) 80%, #000000));
  box-shadow: 0 0 0 calc(2px * var(--k)) color-mix(in srgb, var(--body-bg) 55%, #000000), 0 calc(3px * var(--k)) calc(5px * var(--k)) rgba(0, 0, 0, .45),
    inset 0 1px 0 rgba(255, 255, 255, .35);
}
.calculator:not([data-keys="outline"]):not([data-keys="stripe"]):not([data-keys="glass"]):not([data-touch="glow"]) .key.key-round:active {
  box-shadow: 0 0 0 calc(2px * var(--k)) color-mix(in srgb, var(--body-bg) 55%, #000000), 0 1px 2px rgba(0, 0, 0, .4), inset 0 2px 3px rgba(0, 0, 0, .3);
}
/* the arrow pad: one brushed-metal disc in a dark seat, four wedges split by fine grooves, a dished hub in the middle */
.dpad {
  position: relative; flex: none; width: calc(102px * var(--k)); aspect-ratio: 1; border-radius: 50%;
  background:
    radial-gradient(circle, transparent calc(31% - 1px), rgba(0, 0, 0, .3) 31%, rgba(255, 255, 255, .14) calc(31% + 1.5px), transparent calc(31% + 3px)),
    linear-gradient(45deg, transparent calc(50% - 1px), rgba(0, 0, 0, .3) calc(50% - .5px), rgba(255, 255, 255, .12) calc(50% + .5px), transparent calc(50% + 1px)),
    linear-gradient(-45deg, transparent calc(50% - 1px), rgba(0, 0, 0, .3) calc(50% - .5px), rgba(255, 255, 255, .12) calc(50% + .5px), transparent calc(50% + 1px)),
    conic-gradient(from 20deg, rgba(255, 255, 255, .12), rgba(0, 0, 0, .06) 12.5%, rgba(255, 255, 255, .12) 25%, rgba(0, 0, 0, .06) 37.5%,
      rgba(255, 255, 255, .12) 50%, rgba(0, 0, 0, .06) 62.5%, rgba(255, 255, 255, .12) 75%, rgba(0, 0, 0, .06) 87.5%, rgba(255, 255, 255, .12)),
    radial-gradient(circle at 50% 26%, color-mix(in srgb, var(--key-bg) 66%, #ffffff), var(--key-bg) 52%, color-mix(in srgb, var(--key-bg) 74%, #000000));
  box-shadow:
    0 0 0 calc(3px * var(--k)) color-mix(in srgb, var(--body-bg) 50%, #000000), 0 0 0 calc(4px * var(--k)) rgba(255, 255, 255, .1),
    0 calc(4px * var(--k)) calc(9px * var(--k)) rgba(0, 0, 0, .45), inset 0 1px 0 rgba(255, 255, 255, .45), inset 0 calc(-2px * var(--k)) calc(3px * var(--k)) rgba(0, 0, 0, .28);
}
.calculator .dpad .dpad-key {
  position: absolute; inset: 0; width: auto; height: auto; min-height: 0; padding: 0; border-radius: 0 !important;
  background: transparent !important; box-shadow: none !important; color: var(--key-fg); text-shadow: none; outline-offset: -4px;
}
.dpad .dpad-key .key-face { font-size: calc(9.5px * var(--k)); opacity: .92; }
.dpad-up { clip-path: polygon(0 0, 100% 0, 50% 50%); align-items: flex-start; padding-top: 12% !important; }
.dpad-down { clip-path: polygon(0 100%, 100% 100%, 50% 50%); align-items: flex-end; padding-bottom: 12% !important; }
.dpad-left { clip-path: polygon(0 0, 0 100%, 50% 50%); justify-content: flex-start; padding-left: 13% !important; }
.dpad-right { clip-path: polygon(100% 0, 100% 100%, 50% 50%); justify-content: flex-end; padding-right: 13% !important; }
.calculator .dpad .dpad-key:hover { filter: none; background: rgba(255, 255, 255, .07) !important; }
.calculator .dpad .dpad-key:active { background: rgba(0, 0, 0, .18) !important; transform: none; filter: none; }
.calculator[data-touch="glow"] .dpad .dpad-key.glow { background: color-mix(in srgb, var(--tab-active) 32%, transparent) !important; }
.dpad-hub {
  position: absolute; inset: 34%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(circle at 50% 70%, color-mix(in srgb, var(--key-bg) 72%, #ffffff), var(--key-bg) 55%, color-mix(in srgb, var(--key-bg) 70%, #000000));
  box-shadow: inset 0 calc(2px * var(--k)) calc(3px * var(--k)) rgba(0, 0, 0, .4), 0 1px 0 rgba(255, 255, 255, .2);
}


/* ------------------------------------------------------------- key designs (data-keys, picked by the visitor) */
/* These come after the shapes so the key finish wins; "plain" keeps the shape's own keys. Glow keeps its ring. */
/* pillow: soft domed keys, lit from above */
.calculator[data-keys="pillow"] .key {
  background: linear-gradient(180deg, color-mix(in srgb, var(--key-bg) 78%, #ffffff) 0%, var(--key-bg) 55%, color-mix(in srgb, var(--key-bg) 90%, #000000) 100%);
  box-shadow: 0 3px 6px -2px rgba(0, 0, 0, .3), 0 1px 0 color-mix(in srgb, var(--key-bg) 70%, #000000), inset 0 1px 0 rgba(255, 255, 255, .55);
}
.calculator[data-keys="pillow"]:not([data-touch="glow"]) .key:active { box-shadow: 0 1px 2px rgba(0, 0, 0, .25), inset 0 2px 4px rgba(0, 0, 0, .18); }
/* glass: see-through keys with a bright edge and a sheen on the top half */
.calculator[data-keys="glass"] .key {
  background: linear-gradient(180deg, rgba(255, 255, 255, .34) 0%, rgba(255, 255, 255, .08) 48%, transparent 52%), color-mix(in srgb, var(--key-bg) 90%, transparent);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .45), inset 0 -1px 0 rgba(0, 0, 0, .12), 0 6px 14px -8px rgba(0, 0, 0, .55);
}
.calculator[data-keys="glass"]:not([data-touch="glow"]) .key:active { box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .6), inset 0 2px 6px rgba(0, 0, 0, .2); }
/* keycap: a computer keycap, a dished top inside a short side wall */
.calculator[data-keys="keycap"] .key {
  background: radial-gradient(ellipse 70% 60% at 50% 38%, color-mix(in srgb, var(--key-bg) 86%, #ffffff), var(--key-bg) 72%);
  box-shadow: inset 0 -5px 0 color-mix(in srgb, var(--key-bg) 78%, #000000), inset 0 0 0 1px color-mix(in srgb, var(--key-bg) 82%, #000000),
    0 2px 3px rgba(0, 0, 0, .22);
  padding-bottom: 7px;
}
.calculator[data-keys="keycap"]:not([data-touch="glow"]) .key:active { box-shadow: inset 0 -2px 0 color-mix(in srgb, var(--key-bg) 78%, #000000),
  inset 0 0 0 1px color-mix(in srgb, var(--key-bg) 82%, #000000); }
/* tile: solid raised blocks on a short dark side wall, a faint sheen on top; they sink right down when pressed */
.calculator[data-keys="tile"] .key {
  background: linear-gradient(180deg, color-mix(in srgb, var(--key-bg) 90%, #ffffff), var(--key-bg) 45%, color-mix(in srgb, var(--key-bg) 94%, #000000));
  box-shadow: 0 calc(3px * var(--k)) 0 color-mix(in srgb, var(--key-bg) 60%, #000000), 0 calc(4px * var(--k)) calc(5px * var(--k)) -1px rgba(0, 0, 0, .4),
    inset 0 1px 0 rgba(255, 255, 255, .16);
}
.calculator[data-keys="tile"]:not([data-touch="glow"]) .key:active { transform: translateY(calc(3px * var(--k))); box-shadow: 0 0 0 color-mix(in srgb, var(--key-bg) 60%, #000000), inset 0 1px 2px rgba(0, 0, 0, .25); }
/* stripe: every key in the body's own tone, its kind shown by a coloured bar along the bottom */
.calculator[data-keys="stripe"] .key {
  background: color-mix(in srgb, var(--body-bg) 82%, var(--key-bg)); color: var(--body-ink);
  box-shadow: inset 0 -4px 0 var(--key-bg), inset 0 0 0 1px color-mix(in srgb, var(--body-ink) 12%, transparent);
}
.calculator[data-keys="stripe"] :is(.key-equals, .key-power) { background: var(--key-bg); color: var(--key-fg); }
.calculator[data-keys="stripe"]:not([data-touch="glow"]) .key:active { box-shadow: inset 0 -2px 0 var(--key-bg), inset 0 0 0 1px color-mix(in srgb, var(--body-ink) 18%, transparent); }
/* outline: light line keys on the body, only = filled */
.calculator[data-keys="outline"] .key {
  background: transparent; color: var(--body-ink);
  box-shadow: inset 0 0 0 1.5px color-mix(in srgb, var(--key-bg) 55%, var(--body-ink));
}
.calculator[data-keys="outline"] .key:hover { background: color-mix(in srgb, var(--key-bg) 22%, transparent); filter: none; }
.calculator[data-keys="outline"] :is(.key-equals, .key-power) { background: var(--key-bg); color: var(--key-fg); box-shadow: none; }
.calculator[data-keys="outline"]:not([data-touch="glow"]) .key:active { background: color-mix(in srgb, var(--key-bg) 40%, transparent); }

/* =====================================================================================================
   site components: calculator page around the calculator, guides, articles, blog, info pages, footer
   ===================================================================================================== */

/* ------------------------------------------------------------- quick guide (beside the calculator) */
.guide-list { margin: 0; padding: 0; font-size: .86rem; color: var(--ink-2); counter-reset: tip; }
.guide-list li { position: relative; margin: 0; padding: 8px 30px 8px 0; line-height: 1.7; border-top: 1px dashed var(--line); counter-increment: tip; }
.guide-list li:first-child { border-top: 0; }
.guide-list li::before { content: counter(tip); position: absolute; inset-inline-start: 0; top: 9px; width: 21px; height: 21px; border-radius: 7px;
  display: grid; place-items: center; font: 700 .72rem/1 var(--site-font); color: var(--accent); background: var(--accent-soft); }

/* ------------------------------------------------------------- heading and controls of a calculator page */
.calc-head { text-align: center; }
.calc-head h1 { margin: 18px 0 8px; }
.eyebrow { display: inline-flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 4px 10px; margin: 18px 0 0; padding: 5px 12px; border-radius: 999px;
  font-size: .76rem; font-weight: 600; color: var(--accent); background: var(--accent-soft); border: 1px solid var(--accent-line); }
.eyebrow span + span::before { content: "·"; margin-inline-end: 10px; opacity: .6; }
.calc-lead { color: var(--muted); font-size: .95rem; margin: 0 auto 12px; max-width: 46ch; line-height: 1.8; }
.calc-col { min-width: 0; }
/* the stage behind the calculator: a soft, slightly raised surface */
.calc-stage { position: relative; }

/* ------------------------------------------------------------- laptop / desktop: keep the whole calculator on screen */
@media (min-width: 1240px) { /* below this the heading goes above the calculator: side by side left it too narrow */
  /* heading beside the calculator; it stays in view only while the calculator is on screen */
  /* The calculator column gets the calculator's own width (or what is left beside the heading).
     An "auto" column let the calculator shrink to its narrowest content: tall, thin, distorted keys. */
  .calc-intro { --stage-w: 420px; display: grid; grid-template-columns: minmax(240px, 1fr) minmax(0, var(--stage-w)); column-gap: 28px; align-items: start;
    margin-top: 20px; padding: 6px 22px 22px; border: 1px solid var(--line); border-radius: var(--r-lg);
    background: radial-gradient(120% 90% at 0% 0%, color-mix(in srgb, var(--accent) 8%, transparent), transparent 60%), var(--card); box-shadow: var(--shadow-2); }
  .calc-intro:has(.calculator[data-size="s"]) { --stage-w: 310px; }
  .calc-intro > .calc-head { position: sticky; top: calc(var(--header-h) + 16px); margin-top: 16px; text-align: start; }
  .calc-intro > .calc-col { margin-top: 22px; min-width: 0; }
  .calc-head .eyebrow { justify-content: flex-start; margin-top: 4px; }
  .calc-head h1 { text-align: start; margin: 12px 0 8px; font-size: 1.6rem; line-height: 1.3; }
  .calc-head .calc-lead { margin-inline: 0; }
  .calc-head .title-row { justify-content: flex-start; align-items: flex-start; }
  .calc-head .calc-controls { flex-direction: column; align-items: flex-start; justify-content: flex-start; margin: 0 0 12px; }
  .calc-head .hint { text-align: start; margin: 0; }
}

/* ------------------------------------------------------------- full screen + copy/export buttons */
.fs-btn { font: 600 .85rem/1 var(--site-font); height: 34px; padding: 0 14px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.fs-btn:hover { border-color: var(--accent); color: var(--accent); }
.export-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 6px 0 8px; }
.export-tools select { font: inherit; font-size: .82rem; padding: 5px 8px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); flex: 1 1 140px; min-width: 0; }
.tool-btn { font: 600 .8rem/1 var(--site-font); padding: 7px 11px; border-radius: 8px; border: 1px solid var(--line); background: var(--card); color: var(--ink); cursor: pointer; }
.tool-btn:hover { border-color: var(--accent); color: var(--accent); }
.tool-btn.flash, .icon-btn.flash { color: var(--accent); border-color: var(--accent); }
kbd { font: 600 .78em/1 ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; padding: 3px 6px; border: 1px solid var(--line); border-bottom-width: 2px; border-radius: 6px; background: var(--card); color: var(--ink); unicode-bidi: isolate; direction: ltr; }

/* ------------------------------------------------------------- sections under the calculator */
.calc-about, .mode-guides, .manual, .home-calcs, .calc-main > .related-articles { max-width: 800px; margin: 44px auto 0; }
.sec-title, .calc-about > h2, .mode-guides > h2, .manual > h2, .home-calcs > h2, .related-articles > h2, .guide-index > h2 {
  display: flex; align-items: center; gap: 10px; font-size: 1.25rem; margin: 0 0 12px; }
.calc-about > h2::before, .mode-guides > h2::before, .manual > h2::before, .home-calcs > h2::before, .related-articles > h2::before, .guide-index > h2::before {
  content: ""; flex: none; width: 4px; height: 1.1em; border-radius: 4px; background: var(--accent); }
.calc-about { padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1); }
.calc-about p { color: var(--ink-2); line-height: 1.95; margin: 0 0 10px; }
.calc-about p:last-child { margin-bottom: 0; }

/* the four calculators (home page) */
.calc-cards { list-style: none; margin: 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 12px; }
.calc-tile { height: 100%; display: flex; flex-direction: column; gap: 6px; padding: 16px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card);
  color: var(--ink); text-decoration: none; box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
.calc-tile:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.calc-tile[aria-current="page"] { border-color: var(--accent); background: var(--accent-soft); }
.ct-icon { width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); }
.calc-tile[aria-current="page"] .ct-icon { background: var(--accent); color: var(--on-accent); }
.ct-icon svg { width: 22px; height: 22px; }
.ct-name { font-weight: 700; font-size: 1rem; margin-top: 4px; }
.ct-desc { color: var(--muted); font-size: .84rem; line-height: 1.7; }
.home-perks { list-style: none; margin: 14px 0 0; padding: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.home-perks li { display: inline-flex; align-items: center; gap: 7px; padding: 6px 12px; border-radius: 999px; background: var(--surface-2); border: 1px solid var(--line); font-size: .82rem; color: var(--ink-2); }
.home-perks li::before { content: "✓"; font-weight: 700; color: var(--accent); }

/* ------------------------------------------------------------- mode guides (under the calculator, and their article pages) */
.mg-note { color: var(--muted); margin: 0 0 12px; font-size: .95rem; }
.mg-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin-bottom: 14px; padding: 4px; border-radius: 14px; background: var(--surface-2); border: 1px solid var(--line); width: fit-content; max-width: 100%; }
.mg-tab { font: 600 .9rem/1.2 var(--site-font); padding: 8px 15px; border-radius: 10px; border: 0; background: transparent; color: var(--muted); cursor: pointer; transition: color .15s, background-color .15s; }
.mg-tab:hover { color: var(--ink); }
.mg-tab[aria-selected="true"] { background: var(--card); color: var(--accent); box-shadow: var(--shadow-1), inset 0 0 0 1px var(--line); }
.mode-guide { padding: 20px 22px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); line-height: 1.9; box-shadow: var(--shadow-1); }
.mode-guide h3 { margin: 0 0 6px; font-size: 1.15rem; line-height: 1.45; }
.mode-guide h3 a { color: var(--ink); text-decoration: none; }
.mode-guide h3 a:hover { color: var(--accent); }
.mode-guide h4 { margin: 14px 0 6px; font-size: .95rem; color: var(--muted); }
.mode-guide > p { color: var(--ink-2); }
.mg-more { margin: 14px 0 0; }

/* steps lists: numbered circles */
.manual-steps, .guide-summary ol, .guide-example ol { list-style: none; margin: 0; padding: 0; counter-reset: step; }
.manual-steps li, .guide-summary ol li, .guide-example ol li { position: relative; counter-increment: step; padding-inline-start: 38px; margin: 0 0 10px; line-height: 1.85; }
.manual-steps li::before, .guide-summary ol li::before, .guide-example ol li::before { content: counter(step); position: absolute; inset-inline-start: 0; top: .2em;
  width: 26px; height: 26px; border-radius: 50%; display: grid; place-items: center; font: 700 .8rem/1 var(--site-font); color: var(--on-accent); background: var(--accent); }

/* ------------------------------------------------------------- keys table */
.manual h3 { font-size: 1.02rem; margin: 26px 0 10px; color: var(--accent); }
.table-wrap { overflow-x: auto; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
.keys-table { width: 100%; border-collapse: collapse; font-size: .93rem; }
.keys-table th { background: var(--surface-2); text-align: start; font-weight: 700; font-size: .85rem; color: var(--muted); padding: 11px 14px; white-space: nowrap; border-bottom: 1px solid var(--line); }
.keys-table td { padding: 10px 14px; border-top: 1px solid var(--line); vertical-align: top; line-height: 1.75; color: var(--ink-2); }
.keys-table tbody tr:first-child td { border-top: 0; }
.keys-table tbody tr:hover td { background: color-mix(in srgb, var(--accent) 4%, transparent); }
.keys-table td:first-child { white-space: nowrap; width: 1%; }
.key-chip { display: inline-block; min-width: 2.4em; padding: 3px 9px; border-radius: 8px; background: var(--surface-2);
  border: 1px solid var(--line); border-bottom-width: 2px; font: 600 .88rem/1.5 ui-monospace, "SFMono-Regular", Menlo, monospace; text-align: center; color: var(--ink); }
/* «مع SHIFT» / «مع ALPHA» columns: the gold and pink of the labels on the calculator, a shade that reads on the page */
.key-chip.second { background: transparent; border-color: #c9a03a; color: #855f00; }
.key-chip.alpha { background: transparent; border-color: #e06aa3; color: #a8195e; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .key-chip.second { border-color: #9c7a26; color: #e8bd52; }
  :root:not([data-theme="light"]) .key-chip.alpha { border-color: #a9497a; color: #f283b8; }
}
:root[data-theme="dark"] .key-chip.second, :root[data-site-theme="night"] .key-chip.second { border-color: #9c7a26; color: #e8bd52; }
:root[data-theme="dark"] .key-chip.alpha, :root[data-site-theme="night"] .key-chip.alpha { border-color: #a9497a; color: #f283b8; }
@media (max-width: 640px) { .keys-table { font-size: .88rem; } .keys-table td, .keys-table th { padding: 8px 10px; } }

/* ------------------------------------------------------------- buttons and related links */
.btn-try { display: inline-flex; align-items: center; gap: 8px; padding: 11px 18px; border-radius: 12px; background: var(--accent); color: var(--on-accent); text-decoration: none; font-weight: 600; line-height: 1.4;
  box-shadow: 0 1px 0 rgb(255 255 255 / .18) inset, 0 6px 16px -8px color-mix(in srgb, var(--accent) 70%, transparent); transition: filter .15s, transform .15s; }
.btn-try:hover { filter: brightness(1.08); transform: translateY(-1px); text-decoration: none; }
.try-it { margin: 32px 0; }
.related-articles { margin: 36px auto 0; }
.related-articles ul { list-style: none; margin: 0; padding: 0; display: grid; gap: 8px; }
.related-articles li a { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card);
  color: var(--ink); text-decoration: none; font-weight: 600; font-size: .95rem; line-height: 1.6; transition: border-color .15s, color .15s; }
.related-articles li a::after { content: "←"; flex: none; color: var(--accent); transition: transform .15s; }
.related-articles li a:hover { border-color: var(--accent-line); color: var(--accent); }
.related-articles li a:hover::after { transform: translateX(-3px); }

/* ------------------------------------------------------------- ads & affiliate (look only; positions above) */
.ad-preview, .affiliate.ad-preview { border: 2px dashed var(--muted); color: var(--muted); padding: 22px; border-radius: 12px; font-size: .85rem; text-align: center; margin: 16px auto; }
.affiliate { max-width: 520px; margin: 24px auto 0; padding: 6px 20px 12px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); box-shadow: var(--shadow-1); }
.affiliate h2 { font-size: 1.02rem; }
.affiliate ul { padding-inline-start: 1.1em; }
.affiliate .price { margin-inline-start: 6px; font-weight: 600; }
.disclosure { color: var(--muted); font-size: .78rem; }

/* ------------------------------------------------------------- articles, guides, info pages */
.crumbs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: .84rem; color: var(--muted); margin: 0 0 6px; }
.crumbs a { color: var(--muted); text-decoration: none; padding: 3px 10px; border-radius: 999px; background: var(--card); border: 1px solid var(--line); }
.crumbs a:hover { color: var(--accent); border-color: var(--accent-line); }
.crumbs span { color: var(--muted); }
.article-page article > h1, .article-page > h1, .info-page > h1 { text-align: start; margin: 14px 0 10px; font-size: clamp(1.6rem, 5vw, 2.25rem); line-height: 1.3; }
.article-page .lead, .info-page .lead { font-size: 1.12rem; color: var(--muted); line-height: 1.85; margin: 0 0 20px; }
.meta, .card-meta { color: var(--muted); font-size: .82rem; }
.article-page .meta { display: inline-flex; align-items: center; gap: 6px; margin: 0 0 8px; }
.article-page .meta::before { content: ""; width: 14px; height: 14px; background: currentColor; opacity: .7;
  -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat;
  mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2'%3E%3Crect x='3' y='5' width='18' height='16' rx='3'/%3E%3Cpath d='M3 10h18M8 3v4M16 3v4'/%3E%3C/svg%3E") center / contain no-repeat; }
.article-body { font-size: 1.06rem; line-height: 1.95; color: var(--ink-2); }
.article-body > p { margin: 0 0 1.1em; }
.article-body h2 { font-size: 1.38rem; color: var(--ink); margin: 1.8em 0 .55em; padding-top: .2em; }
.article-body h3 { font-size: 1.14rem; color: var(--ink); margin: 1.4em 0 .45em; }
.article-body ul, .article-body ol { padding-inline-start: 1.4em; }
.article-body li { margin: .35em 0; }
.article-body li::marker { color: var(--accent); font-weight: 700; }
.article-body img { max-width: 100%; height: auto; border-radius: 12px; }
.article-body pre { overflow-x: auto; background: var(--surface-2); border: 1px solid var(--line); padding: 12px 14px; border-radius: 12px; direction: ltr; text-align: left; }
.article-body code { background: var(--surface-2); border: 1px solid var(--line); padding: 1px 6px; border-radius: 6px; font-size: .88em; }
.article-body pre code { background: none; border: 0; padding: 0; }
.article-body table { border-collapse: collapse; display: block; overflow-x: auto; font-size: .95rem; }
.article-body th, .article-body td { border: 1px solid var(--line); padding: 8px 12px; text-align: start; }
.article-body th { background: var(--surface-2); color: var(--ink); }
.article-body blockquote { margin: 1.3em 0; padding: 12px 18px; border-inline-start: 4px solid var(--accent); border-radius: 0 12px 12px 0; background: var(--accent-soft); color: var(--ink-2); }
.article-body blockquote p { margin: 0; }
.article-body hr { border: 0; border-top: 1px solid var(--line); margin: 2em 0; }
.article-body strong { color: var(--ink); }
.article-body .table-wrap { overflow-x: auto; }
.article-body .table-wrap table { display: table; width: 100%; }
.article-body .table-wrap th, .article-body .table-wrap td { border-width: 0 0 1px; }
.post-cover { display: block; width: 100%; height: auto; border-radius: var(--r-lg); margin: 6px 0 22px; box-shadow: var(--shadow-2); }
.draft-note { padding: 10px 14px; border-radius: 12px; background: #fef3c7; color: #78350f; font-weight: 600; }

/* guide page */
.guide-summary { margin: 18px 0 26px; padding: 18px 22px 20px; border: 1px solid var(--accent-line); border-radius: var(--r-lg);
  background: linear-gradient(180deg, var(--accent-soft), var(--card) 70%); line-height: 1.85; box-shadow: var(--shadow-1); }
.guide-summary h2 { margin: 0 0 12px; font-size: 1.1rem; }
.guide-summary ol { margin: 0 0 16px; }
.guide-example { margin: 1.8em 0; padding: 6px 22px 14px; border-radius: var(--r-lg); background: var(--card); border: 1px solid var(--line); box-shadow: var(--shadow-1); }
.guide-example h2 { margin-top: .8em; }
.guide-result { margin: 8px 0 0; padding: 10px 14px; border-radius: 10px; background: var(--accent-soft); color: var(--ink); }
.faq details { border: 1px solid var(--line); border-radius: 12px; padding: 0 16px; margin-bottom: 8px; background: var(--card); transition: border-color .15s; }
.faq details[open] { border-color: var(--accent-line); }
.faq summary { cursor: pointer; font-weight: 700; color: var(--ink); padding: 12px 0; list-style: none; display: flex; justify-content: space-between; gap: 12px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; flex: none; width: 24px; height: 24px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent); font-weight: 700; }
.faq details[open] summary::after { content: "−"; }
.faq details p { margin: 0 0 14px; }

/* info pages: about, contact, privacy, terms, disclaimer */
.info-page h2 { font-size: 1.22rem; margin: 1.8em 0 .5em; }
.info-page p, .info-page li { color: var(--ink-2); line-height: 1.95; }
.info-page li { margin: .35em 0; }
.info-page li::marker { color: var(--accent); }
.disclaimer-box, .contact-card { background: var(--card); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent); border-radius: 12px; padding: 14px 18px; box-shadow: var(--shadow-1); }
.contact-card a { font-size: 1.12rem; font-weight: 700; }
.not-affiliated { font-size: .75rem; margin-top: 0; }

/* ------------------------------------------------------------- articles list (Flask) and the blog (blog/, written in the control panel) */
.article-list { list-style: none; padding: 0; margin: 0; display: grid; gap: 14px; }
.article-list > li { min-width: 0; }
.article-card { height: 100%; display: flex; flex-direction: column; padding: 18px; border: 1px solid var(--line); border-radius: var(--r); background: var(--card); color: var(--ink); text-decoration: none;
  box-shadow: var(--shadow-1); transition: border-color .15s, transform .15s, box-shadow .15s; }
.article-card:hover { border-color: var(--accent-line); transform: translateY(-2px); box-shadow: var(--shadow-2); }
.article-card h2 { font-size: 1.08rem; line-height: 1.55; margin: 0 0 6px; }
.article-card:hover h2 { color: var(--accent); }
.article-card p { margin: 0 0 10px; color: var(--muted); font-size: .92rem; line-height: 1.8; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.article-card .meta, .article-card .card-meta { margin-top: auto; padding-top: 10px; border-top: 1px solid var(--line); }
.card-cover { display: block; width: 100%; height: auto; aspect-ratio: 1200 / 630; object-fit: cover; border-radius: 10px; margin: 0 0 14px; background: var(--surface-2); }
.articles-page > h1, .blog-index > h1 { text-align: start; margin: 10px 0 6px; font-size: clamp(1.6rem, 5vw, 2.25rem); }
.blog-index, .articles-page { max-width: 1120px; }
.blog-index .lead, .articles-page .lead { color: var(--muted); margin: 0 0 6px; max-width: 64ch; line-height: 1.85; }
.blog-index .article-list, .articles-page .article-list { grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); gap: 18px; }
.blog-index .article-card { padding: 12px 12px 14px; }
.blog-index .article-card h2, .blog-index .article-card p, .blog-index .article-card .card-meta { margin-inline: 6px; }
.blog-filter { display: flex; flex-wrap: wrap; gap: 6px; margin: 18px 0 22px; }
.blog-filter a { padding: 7px 15px; border-radius: 999px; border: 1px solid var(--line); background: var(--card); color: var(--ink-2); text-decoration: none; font-size: .9rem; font-weight: 600; transition: border-color .15s, color .15s; }
.blog-filter a:hover { border-color: var(--accent-line); color: var(--accent); }
.blog-filter a[aria-current] { background: var(--accent); border-color: var(--accent); color: var(--on-accent); }
.pager { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin: 26px 0; color: var(--muted); font-size: .9rem; }
.pager a { padding: 8px 16px; border-radius: 10px; border: 1px solid var(--line); background: var(--card); color: var(--accent); font-weight: 600; text-decoration: none; }
.pager a:hover { border-color: var(--accent); }
.guide-index { margin-top: 44px; padding: 22px 24px; border: 1px solid var(--line); border-radius: var(--r-lg); background: var(--card); box-shadow: var(--shadow-1);
  columns: 2 260px; column-gap: 36px; }
.guide-index > h2 { column-span: all; }
.guide-index h3 { break-after: avoid; }
.guide-index ul { break-inside: avoid; }
.guide-index h3 { font-size: 1rem; margin: 10px 0 4px; }
.guide-index h3 a { color: var(--ink); text-decoration: none; }
.guide-index h3 a:hover { color: var(--accent); }
.guide-index ul { margin: 0 0 8px; padding-inline-start: 1.1em; line-height: 1.95; font-size: .92rem; }
.guide-index ul a { color: var(--ink-2); text-decoration: none; }
.guide-index ul a:hover { color: var(--accent); text-decoration: underline; }
.guide-index li::marker { color: var(--accent); }
/* the "try it on the calculator" card inside posts */
.calc-card { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 16px; margin: 1.6em 0; padding: 16px 18px; border-radius: var(--r);
  border: 1px solid var(--accent-line); background: linear-gradient(135deg, var(--accent-soft), var(--card)); box-shadow: var(--shadow-1); }
.cc-mark { flex: none; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 13px; background: var(--accent); color: var(--on-accent); font-size: 1.5rem; font-weight: 700; }
.cc-text { flex: 1 1 220px; display: grid; gap: 2px; line-height: 1.6; color: var(--ink); }
.cc-text span { color: var(--muted); font-size: .92rem; }
.cc-guide { font-size: .9rem; }
.calc-card .btn-try { flex: none; }
.history-under { margin-top: 0; }

/* ------------------------------------------------------------- 404 page */
.nf-page { text-align: center; padding-block: 40px 56px; }
.nf-page > h1 { text-align: center; }
.nf-screen { direction: ltr; display: inline-flex; flex-direction: column; align-items: flex-end; gap: 4px; min-width: min(320px, 100%); padding: 16px 22px; margin-bottom: 18px;
  border-radius: 16px; background: #c9d3bd; color: #1f2a1c; box-shadow: inset 0 2px 6px rgba(0,0,0,.25), 0 0 0 8px #2b3240, 0 22px 40px -18px rgb(16 24 40 / .45);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace; }
.nf-expr { font-size: .95rem; opacity: .75; }
.nf-num { font-size: 3.6rem; line-height: 1; font-weight: 700; letter-spacing: .04em; }
.nf-page > p.muted { max-width: 52ch; margin-inline: auto; }
.nf-links { display: flex; flex-wrap: wrap; justify-content: center; gap: 10px; margin: 26px 0; }
.nf-links a { flex: 1 1 150px; max-width: 220px; white-space: nowrap; padding: 12px 16px; border: 1px solid var(--line); border-radius: 12px; background: var(--card); color: var(--ink); text-decoration: none; font-weight: 600; box-shadow: var(--shadow-1); }
.nf-links a:hover { border-color: var(--accent); color: var(--accent); }

/* ------------------------------------------------------------- footer */
.site-footer { margin-top: 64px; border-top: 1px solid var(--line); background: var(--card); color: var(--muted); font-size: .86rem; }
.footer-inner { max-width: var(--wrap); margin: 0 auto; padding: 36px 16px 20px; display: grid; grid-template-columns: minmax(0, 1.4fr) repeat(2, minmax(0, 1fr)); gap: 28px 40px; }
.footer-brand .logo { color: var(--ink); }
.footer-brand p { margin: 12px 0 0; max-width: 44ch; line-height: 1.85; }
.footer-col h2 { font-size: .9rem; color: var(--ink); margin: 4px 0 10px; }
.footer-col nav, .footer-links { display: flex; flex-direction: column; align-items: flex-start; gap: 7px; }
.footer-col a { color: var(--muted); text-decoration: none; }
.footer-col a:hover { color: var(--accent); }
.footer-bottom { max-width: var(--wrap); margin: 0 auto; padding: 14px 16px 22px; border-top: 1px solid var(--line); display: flex; flex-wrap: wrap; justify-content: space-between; gap: 6px 20px; font-size: .78rem; }
.footer-bottom p { margin: 0; max-width: 80ch; line-height: 1.8; }
.site-footer .copy { font-size: .78rem; white-space: nowrap; }
@media (max-width: 760px) {
  .footer-inner { grid-template-columns: 1fr 1fr; padding-top: 28px; }
  .footer-brand { grid-column: 1 / -1; }
}

/* ------------------------------------------------------------- Arabic (RTL) page, calculator stays as on the real device */
.calculator, .lcd, .keypad { direction: ltr; }
.h-expr, .h-result { direction: ltr; unicode-bidi: isolate; text-align: right; }
.fs-exit { right: auto; left: 8px; }
.calc-stage.is-fullscreen .fs-exit { right: auto; left: 8px; }
code, .export-tools .tool-btn { unicode-bidi: isolate; }
.footer-word { font-weight: 800; font-size: 1.3rem; letter-spacing: -.01em; line-height: 1; }
.footer-word b { color: var(--brand-accent); font-weight: 800; }

/* ------------------------------------------------------------- the magnifying lens (magnifier.js) */
.rqx-lens { --lens: 184px; position: fixed; left: 0; top: 0; z-index: 2000; width: var(--lens); height: var(--lens); border-radius: 50%; overflow: hidden;
  pointer-events: none; background: var(--bg); opacity: 0; transition: opacity .15s ease; will-change: transform, opacity;
  box-shadow: 0 0 0 3px rgba(255, 255, 255, .95), 0 0 0 5px rgba(28, 33, 46, .6), 0 0 0 6px rgba(255, 255, 255, .3), 0 20px 40px -10px rgba(10, 14, 24, .6); }
.rqx-lens.on { opacity: 1; }
.rqx-lens .lens-inner { position: absolute; left: 0; top: 0; width: 1400px; height: 0; direction: ltr; }
.rqx-lens .lens-inner > .calculator { transform-origin: 0 0; margin: 0; max-width: none; transition: none; }
/* the glass: a soft rim of shade, and a highlight in the upper corner that leaves the middle clear */
.rqx-lens .lens-glare { position: absolute; inset: 0; border-radius: 50%; pointer-events: none;
  background: radial-gradient(70% 45% at 30% 14%, rgba(255, 255, 255, .26), rgba(255, 255, 255, 0) 70%), radial-gradient(circle, transparent 64%, rgba(0, 0, 0, .16) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, .55), inset 0 3px 8px rgba(255, 255, 255, .3), inset 0 -8px 18px rgba(0, 0, 0, .22); }
@media (max-width: 600px) { .rqx-lens { --lens: 156px; } }
html.lens-mode .calculator { -webkit-touch-callout: none; }
@media (prefers-reduced-motion: reduce) { .rqx-lens { transition: none; } }

/* ------------------------------------------------------------- the calculator comes on (widget reveal(), about 1.4 s) */
/* 0–0.45 s the case springs up, a teal light running round its edge; 0.1 s the screen switches on with a bright line;
   0.2–1 s grid, axes, then y₁ = sin x and y₂ = x² − 1 type in as their curves draw (a glowing trace point on the sine);
   1–1.35 s the plot clears into the real display; 0.4–1.3 s the keys pop in row by row under a sweep of light.
   Strong, high-contrast moves that read on a phone; SVG strokes, transform and opacity only. */
.calculator.rv { animation: rv-body .45s cubic-bezier(.16, 1, .3, 1) both; }
@keyframes rv-body { 0% { opacity: 0; transform: translateY(36px) scale(.9); } 60% { opacity: 1; } }
.calculator.rv :is(.calc-top, .mode-tabs) { animation: rv-up .35s ease .12s both; }
@keyframes rv-up { from { opacity: 0; transform: translateY(-6px); } }
.calculator.rv .lcd, .calculator.rv .keypad { position: relative; }
.rv-edge { position: absolute; inset: 0; z-index: 6; border-radius: inherit; pointer-events: none; opacity: 0;
  box-shadow: inset 0 0 0 calc(2.5px * var(--k)) rgba(94, 234, 212, .95), inset 0 0 calc(26px * var(--k)) rgba(94, 234, 212, .55);
  animation: rv-edge .95s ease-out .05s both; }
@keyframes rv-edge { 0% { opacity: 0; } 22% { opacity: 1; } 100% { opacity: 0; } }
.rv-boot { position: absolute; inset: 0; z-index: 3; border-radius: inherit; overflow: hidden; pointer-events: none; background: var(--lcd-bg);
  animation: rv-boot-out .32s ease-in 1.02s both; }
@keyframes rv-boot-out { to { opacity: 0; transform: scale(1.05); } }
/* switching on: a bright line opens into the screen */
.rv-boot::before { content: ""; position: absolute; inset: 0; z-index: 2; opacity: 0;
  background: radial-gradient(ellipse at center, rgba(255, 255, 255, .95), rgba(255, 255, 255, .5) 40%, rgba(255, 255, 255, 0) 72%);
  animation: rv-flash .4s ease-out .08s both; }
@keyframes rv-flash { 0% { opacity: 1; transform: scale(.9, .03); } 35% { opacity: 1; transform: scale(1, .05); } 100% { opacity: 0; transform: scale(1, 1.1); } }
.rv-plot { position: absolute; inset: 0; overflow: visible; }
.rv-grid { fill: none; stroke: color-mix(in srgb, var(--lcd-ink) 16%, transparent); stroke-width: 1; animation: rv-in .3s ease .2s both; }
@keyframes rv-in { from { opacity: 0; } }
.rv-axis { fill: none; stroke: var(--lcd-ink); stroke-opacity: .75; stroke-width: 1.6; stroke-dasharray: 1; stroke-dashoffset: 1; animation: rv-draw .3s ease-out .24s both; }
.rv-axis-y { animation-delay: .3s; }
@keyframes rv-draw { from { stroke-dashoffset: 1; } to { stroke-dashoffset: 0; } }
.rv-curve { fill: none; stroke-linecap: round; stroke-linejoin: round; stroke-dasharray: 1; stroke-dashoffset: 1; stroke-width: 3.2; }
.rv-curve.rv-glow { stroke-width: 10; opacity: .28; }
.rv-sin { stroke: #1d4ed8; animation: rv-draw .55s cubic-bezier(.45, 0, .25, 1) .36s both; }
.rv-par { stroke: #dc2626; animation: rv-draw .42s cubic-bezier(.45, 0, .25, 1) .62s both; }
.rv-dot { position: absolute; left: 0; top: 0; z-index: 1; width: 11px; height: 11px; border-radius: 50%; background: #ffffff; opacity: 0;
  box-shadow: 0 0 0 2.5px #1d4ed8, 0 0 14px 5px rgba(59, 130, 246, .75); offset-rotate: 0deg; offset-anchor: center;
  animation: rv-trace .55s cubic-bezier(.45, 0, .25, 1) .36s both; }
@keyframes rv-trace { 0% { offset-distance: 0%; opacity: 0; } 6%, 90% { opacity: 1; } 100% { offset-distance: 100%; opacity: 0; } }
.rv-formula { position: absolute; top: calc(7px * var(--k)); left: calc(10px * var(--k)); z-index: 1; display: flex; flex-direction: column; gap: 1px;
  padding: 2px 6px 3px; border-radius: 6px; background: color-mix(in srgb, var(--lcd-bg) 82%, transparent); direction: ltr;
  font: italic 700 calc(15px * var(--k))/1.2 "Cambria Math", "STIX Two Math", "Times New Roman", serif; }
.rv-formula b { display: inline-block; white-space: pre; font-weight: inherit; opacity: 0; animation: rv-char .14s ease-out both; animation-delay: calc(var(--d) + var(--i) * 32ms); }
@keyframes rv-char { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }
.rv-f1 { color: #1d4ed8; } .rv-f2 { color: #b91c1c; }
.calculator.rv .key-block > :is(.key-cell, .key-top) {
  animation: rv-key .34s cubic-bezier(.2, .9, .25, 1.25) both; animation-delay: calc(.4s + var(--rv-r, 0) * 40ms + var(--rv-c, 0) * 12ms); }
@keyframes rv-key { from { opacity: 0; transform: translateY(14px) scale(.8); } }
.rv-sweep { position: absolute; left: 0; right: 0; top: 0; height: 26%; z-index: 5; pointer-events: none; opacity: 0;
  background: linear-gradient(180deg, transparent, rgba(94, 234, 212, .3) 40%, rgba(255, 255, 255, .45) 50%, rgba(94, 234, 212, .3) 60%, transparent);
  animation: rv-sweep .8s cubic-bezier(.45, 0, .3, 1) .45s both; }
@keyframes rv-sweep { 0% { opacity: 0; transform: translateY(-100%); } 15%, 80% { opacity: 1; } 100% { opacity: 0; transform: translateY(385%); } }
@media (prefers-reduced-motion: reduce) { .calculator.rv, .calculator.rv * { animation: none !important; } .rv-boot, .rv-edge, .rv-sweep { display: none; } }

/* ------------------------------------------------------------- cookie banner (base.html, site-extras.js) */
/* a card along the bottom of the window; the page gets the same room at its bottom so nothing stays under it.
   "قبول" and "رفض" are the same size and the same style: neither is pushed. */
.footer-cookie { padding: 0; border: 0; background: none; font: inherit; color: var(--muted); cursor: pointer; text-align: start; }
.footer-cookie:hover { color: var(--accent); }
.cookie-banner { position: fixed; inset-inline: 0; bottom: 0; z-index: 900; padding: 0 12px max(12px, env(safe-area-inset-bottom)); pointer-events: none;
  animation: cb-in .35s cubic-bezier(.2, .8, .2, 1) both; }
.cookie-banner[hidden] { display: none; }
.cookie-banner.cb-out { animation: cb-out .25s ease-in both; }
@keyframes cb-in { from { opacity: 0; transform: translateY(24px); } }
@keyframes cb-out { to { opacity: 0; transform: translateY(24px); } }
.cb-inner { pointer-events: auto; max-width: 980px; margin: 0 auto; display: flex; align-items: center; gap: 14px 18px; padding: 14px 18px;
  border: 1px solid var(--line); border-radius: 18px; background: var(--card); color: var(--ink); box-shadow: 0 -2px 6px rgb(16 24 40 / .04), 0 18px 48px -12px rgb(16 24 40 / .35); }
.cb-icon { flex: none; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--accent-soft); color: var(--accent); }
.cb-icon svg { width: 26px; height: 26px; }
.cb-body { flex: 1; min-width: 0; }
.cb-body h2 { margin: 0 0 3px; font-size: .95rem; line-height: 1.4; }
.cb-body p { margin: 0; font-size: .84rem; line-height: 1.75; color: var(--ink-2, var(--muted)); }
.cb-body a { color: var(--accent); font-weight: 600; white-space: nowrap; }
.cb-body .cb-now { margin-top: 2px; font-weight: 600; color: var(--accent); }
.cb-actions { flex: none; display: flex; gap: 8px; }
.cb-btn { min-width: 96px; height: 42px; padding: 0 18px; border-radius: 12px; border: 1px solid var(--accent); background: var(--accent-soft); color: var(--accent);
  font: 700 .92rem/1 var(--site-font); cursor: pointer; transition: background-color .15s, color .15s; }
.cb-btn:hover { background: var(--accent); color: #ffffff; }
.cb-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
html.fs-lock .cookie-banner { display: none; }
@media (max-width: 700px) {
  .cookie-banner { padding: 0 8px max(8px, env(safe-area-inset-bottom)); }
  .cb-inner { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; border-radius: 16px; }
  .cb-icon { display: none; }
  /* a short card on a phone: the heading is read out but not shown (the buttons say what it is about) */
  .cb-body h2 { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .cb-body p { font-size: .76rem; line-height: 1.6; }
  .cb-actions { flex: 1 1 100%; }
  .cb-btn { flex: 1; height: 38px; }
}
@media (prefers-reduced-motion: reduce) { .cookie-banner, .cookie-banner.cb-out { animation: none; } }