/* ===========================================================
   hasibai.com — shared styles
   Direction: accounting ledger + adding-machine receipt tape.
   Signature element: the printed tape readout (.tape).
   =========================================================== */

:root {
  --paper:     #F2F3EF;
  --card:      #FFFFFF;
  --tape:      #FDFCF6;
  --ink:       #131C18;
  --ink-2:     #4A5651;
  --ink-3:     #7C8783;
  --rule:      #D6DBD3;
  --ledger:    #0D6B4E;
  --ledger-dk: #094F3A;
  --gold:      #92741A;

  --r:  3px;
  --wrap: 1080px;

  --f-display: "Fraunces", Georgia, serif;
  --f-body:    "Public Sans", system-ui, -apple-system, sans-serif;
  --f-tape:    "Courier Prime", "Courier New", monospace;
}

*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-body);
  font-size: 17px;
  line-height: 1.65;
  font-variant-numeric: tabular-nums;
}

.wrap { width: 100%; max-width: var(--wrap); margin-inline: auto; padding-inline: 20px; }

a { color: var(--ledger-dk); text-underline-offset: 3px; }
a:hover { color: var(--ledger); }

:focus-visible {
  outline: 2px solid var(--ledger);
  outline-offset: 2px;
}

h1, h2, h3 {
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1.15;
  letter-spacing: -0.015em;
  margin: 0 0 .5em;
}
h1 { font-size: clamp(2rem, 5vw, 3.1rem); }
h2 { font-size: clamp(1.4rem, 3vw, 1.85rem); margin-top: 2.2em; }
h3 { font-size: 1.15rem; margin-top: 1.8em; font-family: var(--f-body); font-weight: 700; letter-spacing: 0; }

p { margin: 0 0 1.1em; }

/* --- eyebrow label -------------------------------------- */
.eyebrow {
  font-family: var(--f-tape);
  font-size: .75rem;
  letter-spacing: .16em;
  text-transform: uppercase;
  color: var(--ledger);
  margin: 0 0 .9em;
}

/* --- header --------------------------------------------- */
.site-head {
  border-bottom: 1px solid var(--rule);
  background: var(--card);
  position: sticky; top: 0; z-index: 40;
}
.head-in {
  display: flex; align-items: center; gap: 24px;
  min-height: 64px;
}
.mark {
  font-family: var(--f-display);
  font-size: 1.3rem; font-weight: 700;
  text-decoration: none; color: var(--ink);
  letter-spacing: -0.02em;
  white-space: nowrap;
  display: inline-flex; align-items: center; gap: 9px;
}
.mark span { color: var(--ledger); }

/* Logo mark. Width and height are set in the markup as well so the header does
   not reflow while the image decodes. The wordmark stays live text rather than
   being baked into the image: it keeps the header selectable, searchable and
   crisp at any zoom, and it is what still shows if the image fails. */
/* Width only, height auto. The intrinsic width/height attributes in the markup
   give the browser the aspect ratio up front, so the header reserves the right
   box before the image decodes and nothing shifts. Setting an explicit CSS
   height here instead would squash the mark, since the artwork is 54x45 rather
   than square. */
.mark-logo {
  width: 27px; height: auto;
  display: block; flex: none;
}
/* Arabic and Urdu set the mark right-to-left; the logo should lead on the
   right, which inline-flex handles, but the optical gap wants to be a touch
   wider against the heavier Arabic wordmark. */
[dir="rtl"] .mark { gap: 11px; }

@media (max-width: 560px) {
  .mark-logo { width: 24px; height: 20px; }
}

.nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.nav-btn {
  font: inherit; font-size: .95rem;
  background: none; border: 0; cursor: pointer;
  color: var(--ink-2); padding: 8px 12px; border-radius: var(--r);
}
.nav-btn:hover { background: var(--paper); color: var(--ink); }
.nav-link { font-size: .95rem; color: var(--ink-2); text-decoration: none; padding: 8px 12px; }
.nav-link:hover { color: var(--ink); }

.menu-wrap { position: relative; }
.menu {
  position: absolute; right: 0; top: calc(100% + 6px);
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  box-shadow: 0 12px 28px rgba(19,28,24,.10);
  padding: 8px;
  min-width: 260px;
  display: none;
}
.menu[data-open="true"] { display: block; }
.menu a {
  display: block; padding: 9px 12px; border-radius: var(--r);
  text-decoration: none; color: var(--ink); font-size: .95rem;
}
.menu a:hover { background: var(--paper); }
.menu .menu-cat {
  font-family: var(--f-tape); font-size: .7rem; letter-spacing: .14em;
  text-transform: uppercase; color: var(--ink-3);
  padding: 12px 12px 4px;
}

/* --- hero ------------------------------------------------ */
.hero { padding: 64px 0 40px; }
.hero-grid {
  display: grid; gap: 44px;
  grid-template-columns: 1.15fr .85fr;
  align-items: start;
}
.hero p.lede { font-size: 1.12rem; color: var(--ink-2); max-width: 46ch; }

.search {
  display: flex; gap: 8px; margin-top: 28px; max-width: 460px;
}
.search input {
  flex: 1; font: inherit; font-size: 1rem;
  padding: 12px 14px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.search input:focus { border-color: var(--ledger); outline: none; box-shadow: 0 0 0 3px rgba(13,107,78,.13); }

/* --- SIGNATURE: the printed tape ------------------------- */
.tape {
  background: var(--tape);
  border: 1px solid var(--rule);
  border-top: 3px solid var(--ledger);
  border-bottom: 0;
  border-radius: var(--r) var(--r) 0 0;
  padding: 22px 24px 26px;
  font-family: var(--f-tape);
  font-size: .95rem;
  color: var(--ink);
  position: relative;
  box-shadow: 0 8px 20px rgba(19,28,24,.07);
}
.tape::after {
  content: "";
  position: absolute; left: -1px; right: -1px; bottom: -11px; height: 11px;
  background-image:
    linear-gradient(45deg,  transparent 50%, var(--tape) 50%),
    linear-gradient(-45deg, transparent 50%, var(--tape) 50%);
  background-size: 14px 14px;
  background-repeat: repeat-x;
  filter: drop-shadow(0 1px 0 var(--rule));
}
.tape-head {
  font-size: .7rem; letter-spacing: .16em; text-transform: uppercase;
  color: var(--ledger); border-bottom: 1px dashed var(--rule);
  padding-bottom: 10px; margin-bottom: 14px;
}
.tape-row {
  display: flex; justify-content: space-between; gap: 16px;
  padding: 5px 0;
}
.tape-row span:first-child { color: var(--ink-2); }
.tape-row span:last-child { font-variant-numeric: tabular-nums; white-space: nowrap; }
.tape-total {
  border-top: 1px solid var(--ink);
  margin-top: 12px; padding-top: 12px;
  font-size: 1.05rem; font-weight: 700;
}
.tape-total span:first-child { color: var(--ink) !important; }
.tape-note {
  margin-top: 16px; padding-top: 12px;
  border-top: 1px dashed var(--rule);
  font-size: .78rem; color: var(--ink-3); line-height: 1.5;
}
.tape-empty { color: var(--ink-3); font-size: .88rem; padding: 8px 0 4px; }

/* print animation */
@media (prefers-reduced-motion: no-preference) {
  .tape[data-printed="true"] .tape-body { animation: feed .45s cubic-bezier(.2,.7,.3,1); }
  @keyframes feed {
    from { transform: translateY(-10px); opacity: 0; }
    to   { transform: translateY(0);     opacity: 1; }
  }
}

/* --- calculator form ------------------------------------- */
.calc-grid {
  display: grid; gap: 40px;
  grid-template-columns: 1fr 380px;
  align-items: start;
  margin-bottom: 24px;
}
.panel {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--r);
  padding: 26px;
}
.field { margin-bottom: 18px; }
.field label {
  display: block; font-size: .88rem; font-weight: 600;
  color: var(--ink-2); margin-bottom: 6px;
}
.field .hint { font-weight: 400; color: var(--ink-3); }
.field input, .field select {
  width: 100%; font: inherit; font-size: 1rem;
  font-family: var(--f-tape);
  padding: 11px 13px;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.field select { font-family: var(--f-body); }
.field input:focus, .field select:focus {
  border-color: var(--ledger); outline: none;
  box-shadow: 0 0 0 3px rgba(13,107,78,.13);
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }

.btn {
  font: inherit; font-size: 1rem; font-weight: 600;
  background: var(--ledger); color: #fff;
  border: 0; border-radius: var(--r);
  padding: 13px 22px; cursor: pointer;
  width: 100%;
}
.btn:hover { background: var(--ledger-dk); }
.btn-ghost {
  background: none; color: var(--ink-2);
  border: 1px solid var(--rule);
  margin-top: 10px;
}
.btn-ghost:hover { background: var(--paper); color: var(--ink); }

.err { color: #97321E; font-size: .88rem; margin: 0 0 14px; display: none; }
.err[data-show="true"] { display: block; }

/* --- cards / index --------------------------------------- */
.cat { margin-top: 52px; }
.cat-head {
  display: flex; align-items: baseline; gap: 14px;
  border-bottom: 1px solid var(--rule); padding-bottom: 10px; margin-bottom: 20px;
}
.cat-head h2 { margin: 0; font-size: 1.5rem; }
.cat-head .count { font-family: var(--f-tape); font-size: .78rem; color: var(--ink-3); margin-left: auto; }

.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); gap: 14px; }
.card {
  display: block; text-decoration: none; color: inherit;
  background: var(--card); border: 1px solid var(--rule); border-radius: var(--r);
  padding: 18px 20px;
  transition: border-color .15s, transform .15s;
}
.card:hover { border-color: var(--ledger); transform: translateY(-2px); }
.card strong { display: block; font-size: 1.02rem; margin-bottom: 4px; }
.card span { font-size: .88rem; color: var(--ink-2); line-height: 1.5; display: block; }
.card[hidden] { display: none; }

/* --- long-form content ----------------------------------- */
.prose { max-width: 68ch; }
.prose ul, .prose ol { padding-left: 1.2em; margin: 0 0 1.1em; }
.prose li { margin-bottom: .45em; }
.prose table {
  width: 100%; border-collapse: collapse; margin: 0 0 1.4em;
  font-size: .95rem;
}
.prose th, .prose td { text-align: left; padding: 9px 12px; border-bottom: 1px solid var(--rule); }
.prose th { font-size: .78rem; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-3); font-weight: 600; }
.prose td:last-child, .prose th:last-child { text-align: right; font-family: var(--f-tape); }
.formula {
  background: var(--card); border: 1px solid var(--rule); border-left: 3px solid var(--ledger);
  border-radius: var(--r);
  font-family: var(--f-tape); font-size: .95rem;
  padding: 16px 18px; margin: 0 0 1.4em; overflow-x: auto;
}
details {
  border-bottom: 1px solid var(--rule);
  padding: 14px 0;
}
details summary {
  cursor: pointer; font-weight: 600; font-size: 1rem;
  list-style: none;
}
details summary::-webkit-details-marker { display: none; }
details summary::before { content: "+ "; color: var(--ledger); font-family: var(--f-tape); }
details[open] summary::before { content: "– "; }
details p { margin: 12px 0 0; color: var(--ink-2); }

/* --- ad slots -------------------------------------------- */
.ad {
  margin: 36px 0;
  min-height: 100px;
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--rule); border-radius: var(--r);
  color: var(--ink-3); font-family: var(--f-tape); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  background: rgba(255,255,255,.5);
}
.ad-side { margin-top: 20px; min-height: 250px; }

/* --- footer ---------------------------------------------- */
.site-foot {
  margin-top: 80px; border-top: 1px solid var(--rule);
  background: var(--card); padding: 40px 0 48px;
  font-size: .92rem;
}
.foot-in { display: flex; flex-wrap: wrap; gap: 28px; align-items: baseline; }
.foot-in nav { display: flex; flex-wrap: wrap; gap: 20px; margin-left: auto; }
.foot-in a { color: var(--ink-2); text-decoration: none; }
.foot-in a:hover { color: var(--ledger); text-decoration: underline; }
.foot-in p { margin: 0; color: var(--ink-3); font-size: .86rem; }

.disclaimer {
  margin-top: 24px; padding-top: 20px; border-top: 1px solid var(--rule);
  color: var(--ink-3); font-size: .82rem; line-height: 1.6; max-width: 78ch;
}

/* --- responsive ------------------------------------------ */
@media (max-width: 880px) {
  .hero-grid, .calc-grid { grid-template-columns: 1fr; gap: 30px; }
  .hero { padding: 40px 0 24px; }
  .nav-link { display: none; }
}
@media (max-width: 520px) {
  body { font-size: 16px; }
  .panel { padding: 20px; }
  .field-row { grid-template-columns: 1fr; }
  .foot-in nav { margin-left: 0; gap: 14px; }
}

/* ============================================================
   Components added with the expanded calculator set.
   Everything below follows the same ledger / receipt-tape
   language as the original: paper backgrounds, hairline rules,
   Courier for anything numeric.
   ============================================================ */

/* --- breadcrumbs ----------------------------------------- */
.crumbs {
  font-size: .82rem; color: var(--ink-3);
  margin: 26px 0 6px; display: flex; flex-wrap: wrap; gap: 8px;
}
.crumbs a { color: var(--ink-2); text-decoration: none; }
.crumbs a:hover { color: var(--ledger); text-decoration: underline; }
.crumbs span { color: var(--ink-3); }
.lede-tight { margin-top: .5em; }

/* --- nav menu, now long enough to need scrolling ---------- */
.menu {
  max-height: 72vh; overflow-y: auto; overscroll-behavior: contain;
  min-width: 300px;
}
.menu-cat { padding: 6px 0 10px; }
.menu-cat + .menu-cat { border-top: 1px solid var(--rule); }
.menu-cat-head {
  display: block; padding: 6px 10px 4px;
  font-family: var(--f-tape); font-size: .68rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); text-decoration: none;
}
.menu-cat-head:hover { color: var(--ledger); }
.menu-cat a:not(.menu-cat-head) {
  display: block; padding: 6px 10px; border-radius: var(--r);
  color: var(--ink-2); text-decoration: none; font-size: .92rem;
}
.menu-cat a:not(.menu-cat-head):hover { background: var(--paper); color: var(--ledger); }
.menu-foot { border-top: 1px solid var(--rule); padding: 8px 10px 4px; }
.menu-foot a { color: var(--ledger); text-decoration: none; font-size: .88rem; font-weight: 600; }
.menu-foot a:hover { text-decoration: underline; }

/* --- category jump nav ----------------------------------- */
.catnav { display: flex; flex-wrap: wrap; gap: 8px; margin: 30px 0 8px; }
.catnav a {
  display: inline-flex; align-items: baseline; gap: 7px;
  padding: 7px 13px; border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
  text-decoration: none; font-size: .88rem;
}
.catnav a:hover { border-color: var(--ledger); color: var(--ledger); }
.catnav .count {
  font-family: var(--f-tape); font-size: .72rem; color: var(--ink-3);
}

/* --- wide layout for keypads and big tables --------------- */
.calc-wide { grid-template-columns: 1fr 340px; }
@media (max-width: 1000px) { .calc-wide { grid-template-columns: 1fr; } }

/* --- schedules and result tables ------------------------- */
.sched-wrap { margin: 34px 0 0; }
.sched-title {
  font-family: var(--f-tape); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); margin: 0 0 10px;
}
.sched-scroll {
  overflow-x: auto; max-height: 460px; overflow-y: auto;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card);
}
.sched { width: 100%; border-collapse: collapse; font-size: .88rem; }
.sched th, .sched td {
  padding: 8px 12px; border-bottom: 1px solid var(--rule);
  text-align: right; font-family: var(--f-tape); white-space: nowrap;
}
.sched thead th {
  position: sticky; top: 0; z-index: 1;
  background: var(--tape); color: var(--ink-3);
  font-size: .7rem; letter-spacing: .1em; text-transform: uppercase; font-weight: 600;
}
.sched td.wide-cell, .sched th.wide-cell,
.sched td:first-child, .sched th:first-child {
  text-align: left; font-family: var(--f-body); white-space: normal;
}
.sched tbody tr:last-child td { border-bottom: 0; }
.sched tbody tr:nth-child(even) { background: rgba(242,243,239,.55); }
.sched .row-hit { background: rgba(13,107,78,.09); }
.sched .row-hit td { color: var(--ink); font-weight: 600; }

/* prose tables share the wide-cell escape hatch */
.prose td.wide-cell, .prose th.wide-cell {
  text-align: left; font-family: var(--f-body);
}

/* --- editable row tables (timesheet, GPA, grades) --------- */
.tc-wrap, .course-wrap { overflow-x: auto; margin-bottom: 16px; }
.tc, .course { width: 100%; border-collapse: collapse; font-size: .9rem; }
.tc th, .course th {
  text-align: left; padding: 6px 8px 8px;
  font-family: var(--f-tape); font-size: .68rem;
  letter-spacing: .1em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; border-bottom: 1px solid var(--rule);
}
.tc td, .course td { padding: 5px 4px; border-bottom: 1px solid var(--rule); }
.tc th[scope="row"] {
  font-family: var(--f-tape); font-size: .78rem; text-transform: none;
  letter-spacing: 0; color: var(--ink-2); border-bottom: 1px solid var(--rule);
  padding-right: 10px;
}
.tc input, .course input, .course select {
  width: 100%; min-width: 68px; font: inherit; font-size: .9rem;
  padding: 7px 8px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.course input[type="text"] { min-width: 110px; }
.tc input:focus, .course input:focus, .course select:focus {
  border-color: var(--ledger); outline: none;
  box-shadow: 0 0 0 3px rgba(13,107,78,.13);
}
.tc-h { font-family: var(--f-tape); text-align: right; color: var(--ink-2); white-space: nowrap; }
.rm {
  border: 1px solid var(--rule); background: var(--card); color: var(--ink-3);
  border-radius: var(--r); width: 30px; height: 32px; cursor: pointer;
  font-size: 1.05rem; line-height: 1;
}
.rm:hover { border-color: #B4462F; color: #B4462F; }

/* --- scientific calculator keypad ------------------------ */
.calc-out {
  font-family: var(--f-tape); font-size: 1.6rem; text-align: right;
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--tape); border: 1px solid var(--rule); border-radius: var(--r);
  overflow-x: auto; white-space: nowrap;
}
.modebar { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.mode-btn {
  font-family: var(--f-tape); font-size: .72rem; letter-spacing: .1em;
  padding: 6px 12px; border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink-2); cursor: pointer;
}
.mode-btn[data-on="rad"] { background: var(--ledger); border-color: var(--ledger); color: #fff; }
.memind {
  font-family: var(--f-tape); font-size: .72rem; color: var(--gold);
  border: 1px solid var(--gold); border-radius: var(--r); padding: 4px 8px;
}
.keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.keys button {
  font: inherit; font-family: var(--f-tape); font-size: .95rem;
  padding: 13px 6px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink);
}
.keys button:hover { border-color: var(--ledger); color: var(--ledger); }
.keys button:active { background: var(--paper); }
.keys .k-fn { font-size: .82rem; color: var(--ink-2); }
.keys .k-op { background: var(--paper); }
.keys .k-act { color: #B4462F; }
.keys .k-eq { background: var(--ledger); border-color: var(--ledger); color: #fff; }
.keys .k-eq:hover { background: var(--ledger-dk); border-color: var(--ledger-dk); color: #fff; }
@media (max-width: 520px) { .keys button { padding: 12px 2px; font-size: .88rem; } }

/* --- quick-pick chips ------------------------------------ */
.chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.chips button {
  font: inherit; font-family: var(--f-tape); font-size: .8rem;
  padding: 6px 12px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: 999px;
  background: var(--card); color: var(--ink-2);
}
.chips button:hover, .chips button[data-on="true"] {
  border-color: var(--ledger); color: var(--ledger); background: rgba(13,107,78,.06);
}

/* --- side-by-side result blocks -------------------------- */
.tri { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22px; }
.tri-2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.tri-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 14px; }
@media (max-width: 760px) {
  .tri, .tri-2, .tri-row { grid-template-columns: 1fr; }
}

/* --- textarea inputs ------------------------------------- */
.field textarea {
  width: 100%; font: inherit; font-family: var(--f-tape); font-size: .92rem;
  padding: 12px 14px; min-height: 120px; resize: vertical;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink); line-height: 1.6;
}
.field textarea:focus {
  border-color: var(--ledger); outline: none;
  box-shadow: 0 0 0 3px rgba(13,107,78,.13);
}

/* --- misc small pieces ----------------------------------- */
.picks { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 10px; }
.mini { font-family: var(--f-tape); font-size: .78rem; color: var(--ink-3); }
.tape-static::after { animation: none; }

/* --- related calculators --------------------------------- */
.related { margin-top: 56px; }
.related h2 {
  font-family: var(--f-tape); font-size: .72rem;
  letter-spacing: .14em; text-transform: uppercase;
  color: var(--ink-3); font-weight: 600; margin-bottom: 14px;
}

/* ===========================================================
   Icons, languages, and the printable tape
   =========================================================== */

/* --- icon sprite ----------------------------------------- */
/* The sprite is hidden without display:none, which stops some browsers
   resolving <use> references into it. */
.sprite { position: absolute; width: 0; height: 0; overflow: hidden; }
.ic { width: 1.15em; height: 1.15em; flex: 0 0 auto; vertical-align: -.16em; }
.ic-sm { width: 1em; height: 1em; }

.eyebrow { display: flex; align-items: center; gap: 8px; }
.cat-head h2 { display: inline-flex; align-items: baseline; gap: 10px; }
.cat-head h2 .ic, .catnav .ic, .menu-cat-head .ic { align-self: center; color: var(--ink-3); }
.catnav a:hover .ic, .menu-cat-head:hover .ic { color: var(--ledger); }
.menu-cat-head { display: flex; align-items: center; gap: 8px; }

/* --- language switcher ----------------------------------- */
.lang-btn { display: inline-flex; align-items: center; gap: 7px; }
.lang-menu { min-width: 230px; max-height: 62vh; overflow-y: auto; padding: 4px; }
.lang-menu a {
  display: flex; align-items: baseline; justify-content: space-between; gap: 14px;
  padding: 9px 11px; border-radius: var(--r);
}
.lang-native { font-weight: 600; }
.lang-en {
  font-family: var(--f-tape); font-size: .7rem; letter-spacing: .06em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.lang-menu a[aria-current="true"] {
  background: rgba(13,107,78,.08); color: var(--ledger);
}
.lang-menu a[aria-current="true"] .lang-en { color: var(--ledger); }

/* --- tape actions: copy / download / print --------------- */
.tape-actions { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 12px; }
.tape-btn {
  font: inherit; font-family: var(--f-tape); font-size: .74rem;
  letter-spacing: .08em; text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 13px; cursor: pointer;
  border: 1px solid var(--rule); border-radius: var(--r);
  background: var(--card); color: var(--ink-2);
  transition: border-color .15s, color .15s, background .15s;
}
.tape-btn:hover:not(:disabled) { border-color: var(--ledger); color: var(--ledger); }
.tape-btn:disabled { opacity: .4; cursor: not-allowed; }
.tape-btn[data-done="true"] {
  border-color: var(--ledger); color: var(--ledger); background: rgba(13,107,78,.07);
}

/* The header block that only exists on paper. */
.print-head { display: none; }

/* --- writing systems ------------------------------------- */
/* Public Sans and Fraunces have no Arabic, CJK or Devanagari glyphs, so
   those languages fall through to whatever the system already has rather
   than pulling down another webfont on a slow connection. */
html[lang="ar"], html[lang="ur"] {
  --f-body: "Segoe UI", Tahoma, "Geeza Pro", "Noto Naskh Arabic", "Arabic Typesetting", sans-serif;
  --f-display: "Segoe UI", "Geeza Pro", "Noto Naskh Arabic", Georgia, serif;
}
html[lang="ur"] {
  --f-body: "Noto Nastaliq Urdu", "Jameel Noori Nastaleeq", "Segoe UI", Tahoma, sans-serif;
}
html[lang="zh"] {
  --f-body: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", "Public Sans", sans-serif;
  --f-display: "PingFang SC", "Hiragino Sans GB", "Microsoft YaHei", Georgia, serif;
}
html[lang="ja"] {
  --f-body: "Hiragino Kaku Gothic ProN", "Yu Gothic", Meiryo, "Public Sans", sans-serif;
  --f-display: "Hiragino Mincho ProN", "Yu Mincho", Georgia, serif;
}
html[lang="hi"] {
  --f-body: "Noto Sans Devanagari", "Nirmala UI", "Public Sans", sans-serif;
  --f-display: "Noto Serif Devanagari", "Nirmala UI", Georgia, serif;
}
/* Arabic and Urdu sit low against a Latin baseline at the same size. */
html[lang="ar"] body, html[lang="ur"] body { font-size: 18px; line-height: 1.8; }
html[lang="ur"] body { line-height: 2; }

/* --- right to left --------------------------------------- */
/* The layout is nearly all flexbox and grid, which mirror themselves. What
   is left is the handful of places that name a physical side. */
[dir="rtl"] .nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .menu { right: auto; left: 0; }
[dir="rtl"] .foot-in nav { margin-left: 0; margin-right: auto; }
[dir="rtl"] .cat-head .count { margin-left: 0; margin-right: auto; }
[dir="rtl"] .prose ul, [dir="rtl"] .prose ol { padding-left: 0; padding-right: 1.2em; }
[dir="rtl"] .prose th, [dir="rtl"] .prose td { text-align: right; }
[dir="rtl"] .prose td:last-child, [dir="rtl"] .prose th:last-child { text-align: left; }
[dir="rtl"] blockquote { border-left: 0; border-right: 3px solid var(--ledger); }
[dir="rtl"] .sched th, [dir="rtl"] .sched td { text-align: left; }
[dir="rtl"] .sched th:first-child, [dir="rtl"] .sched td:first-child { text-align: right; }
[dir="rtl"] .tc-h { text-align: left; }
[dir="rtl"] .keys .display { text-align: left; }

/* Figures, dates and formulae stay left to right inside right-to-left text,
   which is how Arabic and Urdu actually set numbers. */
[dir="rtl"] .tape-row span:last-child,
[dir="rtl"] .sched td, [dir="rtl"] code, [dir="rtl"] .mini {
  unicode-bidi: plaintext;
}

/* --- mixed-direction text --------------------------------
   The language packs translate the interface but not the article bodies, so
   an RTL page always contains some English. Those paragraphs carry dir="auto",
   which resolves their direction from the first strong character and puts the
   terminal full stop back at the end of the line instead of the visual left.

   text-align:start is the other half. It resolves against the element's
   direction property, which dir="auto" has now set correctly — so an English
   paragraph gets a hard left edge and an Arabic one a hard right edge, inside
   the same column. Without this the English sits ragged-left against an RTL
   column and is unpleasant to read. */
[dir="rtl"] .prose p, [dir="rtl"] .prose li,
[dir="rtl"] .prose h2, [dir="rtl"] .prose h3,
[dir="rtl"] .prose summary, [dir="rtl"] .prose details p,
[dir="rtl"] .lede, [dir="rtl"] h1,
[dir="rtl"] .card strong, [dir="rtl"] .card span,
[dir="rtl"] .cat-head p, [dir="rtl"] .disclaimer {
  text-align: start;
}

/* Inline fragments that are not their own paragraph — a product name or a
   formula dropped into a sentence — resolve independently. */
[dir="rtl"] .prose strong, [dir="rtl"] .prose em, [dir="rtl"] .prose code {
  unicode-bidi: isolate;
}

/* --- Arabic and Urdu typography --------------------------
   Arabic script is cursive: letters join. Tracking pulls those joins apart and
   visually breaks the letterforms, so letter-spacing must be zero on any
   element that can hold Arabic — including the small-caps furniture where the
   tracking is otherwise deliberate. The monospace tape face has no Arabic
   coverage either, so labels fall back to the body face and only the figures
   stay monospaced. */
html[lang="ar"] *, html[lang="ur"] * { letter-spacing: 0 !important; }

html[lang="ar"] .tape-head, html[lang="ur"] .tape-head,
html[lang="ar"] .tape-row span:first-child, html[lang="ur"] .tape-row span:first-child,
html[lang="ar"] .tape-empty, html[lang="ur"] .tape-empty,
html[lang="ar"] .tape-note, html[lang="ur"] .tape-note,
html[lang="ar"] .eyebrow, html[lang="ur"] .eyebrow,
html[lang="ar"] .tape-btn, html[lang="ur"] .tape-btn {
  font-family: var(--f-body);
  text-transform: none;            /* Arabic has no case; uppercase is a no-op that only hurts Latin siblings */
}

/* Figures keep the monospace face and tabular figures so decimal points stack. */
html[lang="ar"] .tape-row span:last-child,
html[lang="ur"] .tape-row span:last-child {
  font-family: var(--f-tape);
  font-variant-numeric: tabular-nums;
}

/* Arabic needs more leading than Latin — the descenders and diacritics collide
   at Latin line-heights. */
html[lang="ar"] .prose p, html[lang="ar"] .prose li { line-height: 1.9; }
html[lang="ur"] .prose p, html[lang="ur"] .prose li { line-height: 2.05; }

/* Display faces are Latin-only; let Arabic fall through to the body stack
   rather than rendering in a fallback that does not match. */
html[lang="ar"] h1, html[lang="ar"] h2, html[lang="ar"] h3,
html[lang="ur"] h1, html[lang="ur"] h2, html[lang="ur"] h3 {
  font-family: var(--f-body);
  font-weight: 700;
}

@media (max-width: 880px) {
  [dir="rtl"] .foot-in nav { margin-right: 0; }
}

/* --- print ----------------------------------------------- */
/* "Download PDF" on every platform is really "print to PDF", so the print
   sheet is the deliverable: the receipt, its heading, and whatever schedule
   table the calculator produced. Everything else comes off. */
@media print {
  body { background: #fff; color: #000; font-size: 12pt; }

  .site-head, .site-foot, .ad, .related, .crumbs, .prose, .tape-actions,
  .search, .catnav, .eyebrow, .lede, .panel, .chips, .picks,
  h1, .err { display: none !important; }

  .wrap { max-width: none; margin: 0; padding: 0; }
  .calc-grid, .calc-wide, .tri, .tri-2, .tri-row { display: block; }

  .print-head {
    display: block; margin: 0 0 14px; padding: 0 0 10px;
    border-bottom: 1px solid #999;
  }
  .print-head strong {
    display: block; font-family: var(--f-display);
    font-size: 16pt; font-weight: 600; line-height: 1.3;
  }
  .print-head span {
    display: block; font-family: var(--f-tape);
    font-size: 8pt; color: #555;
  }

  .tape {
    box-shadow: none; border: 1px solid #999; background: #fff;
    break-inside: avoid; page-break-inside: avoid;
  }
  .tape::after { display: none; }
  .tape-row { border-bottom: 1px solid #ddd; }

  .sched { break-inside: auto; }
  .sched thead { display: table-header-group; }   /* repeat headers per page */
  .sched tr { break-inside: avoid; page-break-inside: avoid; }

  a[href]::after { content: ""; }                 /* no URL clutter */

  @page { margin: 18mm; }
}