/* Mizan / Ink & Electric. Shared across every tool and article. */
:root {
  --panel: #181b30;
  --panel-raised: #22263e;
  --panel-ink: #f7f8ff;
  --panel-muted: #bac2dd;
  --panel-line: #3d4362;
  --ice: #a4e5ff;
  --ice-strong: #c9f0ff;
  --hero-surface: #f0effb;
  --brand-wash: #ebe6ff;
  --surface-border: #d7daea;
  --control-border: #8b8da6;
}

.site-header { background: var(--white); }
.header-inner { height: 84px; }
.brand { color: var(--ink); }
.brand small { color: var(--muted); }
.main-nav > a { padding: 12px 15px; border-radius: 8px; }
.main-nav > a[aria-current] { background: var(--surface-tint); }
.main-nav > a[aria-current]::after { display: none; }
.header-note { padding: 8px 13px; border: 1px solid var(--line); border-radius: 30px; }
.status-dot, .header-note .status-dot { background: var(--brand); }

.hero { color: var(--ink); background: var(--hero-surface); border-bottom: 1px solid var(--line); }
.hero::after { width: 620px; height: 620px; top: -320px; left: -150px; border: 90px solid var(--brand-wash); opacity: .6; }
.hero-inner { min-height: 350px; padding-top: 34px; padding-bottom: 67px; }
.hero h1 { font-size: 52px; letter-spacing: -1.5px; }
.hero h1 em { color: var(--brand); }
.hero p { color: var(--muted); font-size: 16px; }
.eyebrow { color: var(--brand); font-size: 11px; letter-spacing: .5px; }
.eyebrow > span { width: 7px; height: 7px; border-radius: 2px; background: var(--brand); }
.hero-tags { color: var(--muted); }
.hero-tags .icon { color: var(--brand); }
.hero-art { width: 365px; transform: none; position: relative; z-index: 1; }
.breadcrumbs, .breadcrumbs a { color: var(--muted); }
.chapter-symbol { color: var(--brand); opacity: .7; }
.inner-hero .hero-inner { min-height: 285px; padding-bottom: 74px; }
.inner-hero h1 { font-size: 39px; }
.converter-topline { color: var(--muted); }
.converter-topline .icon { color: var(--brand); }
.converter-topline i { background: var(--brand); }

.converter-card { border-color: var(--surface-border); box-shadow: 0 18px 45px #2723430d; }
.form-pane { padding: 29px 35px 25px; }
.mode-switch { background: var(--canvas); border: 1px solid var(--line); border-radius: 10px; }
.mode-switch label { border-radius: 7px; }
.mode-switch label:has(input:checked) { border-color: var(--brand); background: var(--brand); color: var(--white); box-shadow: none; }
.amount-wrap input { background: var(--canvas); color: var(--ink); border: 1px solid var(--control-border); border-radius: 12px; }
.field-grid select, .advanced-fields select { border-color: var(--control-border); border-radius: 8px; }
.button { border-radius: 9px; }
.convert-button { box-shadow: 0 5px 14px #5b36e829; }
.example-chip { border-radius: 6px; background: var(--canvas); }

.result-pane { background: var(--panel); border-color: var(--panel); color: var(--panel-ink); }
.result-heading { color: var(--ice); }
.result-heading .status-dot { background: var(--ice); }
.result-mark { color: var(--panel-muted); font-size: 22px; letter-spacing: 1px; }
.normalized, .normalized span { color: var(--panel-muted); }
.result-text { color: var(--panel-ink); font-size: 27px; }
.result-actions { border-color: var(--panel-line); }
.result-pane .copy-button { color: var(--panel); border-color: var(--ice); background: var(--ice); }
.result-pane .copy-button:hover { color: var(--panel); background: var(--ice-strong); border-color: var(--ice-strong); }
.result-pane .icon-button { color: var(--panel-muted); }
.result-pane .icon-button:hover { color: var(--panel-ink); background: var(--panel-raised); border-color: var(--panel-line); }
.secondary-output > div { color: var(--panel-muted); }
.secondary-output p { color: var(--panel-ink); }
.result-footnote { color: var(--panel-muted); }
.result-footnote a { color: var(--ice); border-color: var(--panel-line); }
.result-pane :focus-visible { outline-color: var(--ice); }
.is-empty .result-text { color: var(--panel-muted); }

.section-kicker { color: var(--brand); }
.tool-card { border-radius: 14px; border-color: var(--line); box-shadow: 0 3px 0 #e6e8f44d; }
.tool-card:hover { border-color: var(--brand); }
.tool-card-top { margin-bottom: 20px; }
.tool-symbol { background: var(--surface-tint); border-radius: 10px; }
.tool-card:nth-child(3n + 2) .tool-symbol { background: #e7f3ff; color: #195c91; }
.tool-card:nth-child(3n) .tool-symbol { background: #fcecf1; color: #a32c5c; }
.card-tag { font-size: 10px; }
.steps li > span { background: var(--white); border-color: var(--line); border-radius: 12px; }
.learn-banner { background: var(--surface-tint); border-radius: 18px; }
.number-art { color: var(--brand); }
.faq-list > details { background: var(--white); border: 1px solid var(--line); border-radius: 10px; padding-inline: 20px; margin-bottom: 10px; }
.faq-list { border-top: 0; }
.site-footer { background: var(--white); }
.source-note, .notice, .download-callout { border-radius: 12px; }
.toast { background: var(--panel); border: 1px solid var(--panel-line); }
.content-meta { display: flex; flex-wrap: wrap; gap: 8px 24px; max-width: 820px; margin: 0 auto 28px; padding-bottom: 18px; border-bottom: 1px solid var(--line); color: var(--muted); font-size: 12px; }
.content-meta a { text-decoration: none; font-weight: 500; }
.feedback-template { padding: 22px; background: var(--white); border: 1px solid var(--line); border-radius: 12px; margin: 24px 0; }
.feedback-template pre { font: inherit; font-size: 13px; line-height: 2; white-space: pre-wrap; overflow-wrap: anywhere; margin: 0 0 15px; }
.table-wrap th[scope="row"] { background: var(--white); color: var(--ink); font-weight: 400; }

@media (min-width: 1350px) {
  .hero-inner { min-height: 360px; }
  .hero h1 { font-size: 56px; }
  .inner-hero h1 { font-size: 39px; }
}
@media (max-width: 1050px) {
  .main-nav { gap: 8px; }
  .main-nav > a { padding-inline: 10px; }
  .form-pane { padding: 25px; }
  .hero h1 { font-size: 46px; }
  .hero-art { width: 300px; }
}
@media (max-width: 760px) {
  .header-inner { height: auto; min-height: 77px; }
  .main-nav { gap: 8px; }
  .main-nav > a { padding: 8px 12px; }
  .hero-inner { min-height: 310px; padding: 29px 0 74px; }
  .hero h1 { font-size: 41px; line-height: 1.45; }
  .hero p { font-size: 14px; max-width: 100%; }
  .hero-tags { gap: 15px; }
  .hero-art { display: none; }
  .inner-hero .hero-inner { min-height: 270px; padding-bottom: 74px; }
  .inner-hero h1 { font-size: 32px; }
  .form-pane { padding: 23px 22px; }
  .result-text { font-size: 25px; }
  .converter-card { border-radius: 16px; }
  .faq-list > details { padding-inline: 16px; }
  .tool-card { padding: 18px; }
}
@media (max-width: 380px) {
  .hero h1 { font-size: 37px; }
  .inner-hero h1 { font-size: 30px; }
  .form-pane { padding: 20px 17px; }
  .tool-card { padding: 15px; }
}
/* Interface craft: readable Arabic, direct feedback, and a single floating layer. */
html { scroll-padding-top: 6.5rem; }
body { font-size: 1rem; }
h1, h2, h3, .brand > span, .eyebrow, .section-kicker, .tool-symbol { letter-spacing: 0; }
.hero h1 { font-size: clamp(2.25rem, 4.1vw, 3.5rem); letter-spacing: 0; line-height: 1.45; }
.inner-hero h1 { font-size: clamp(2rem, 3.2vw, 2.5rem); }
.hero p { font-size: 1rem; line-height: 1.95; }
.hero-tags, .eyebrow, .breadcrumbs, .converter-topline { font-size: .8125rem; }
.hero-tags { flex-wrap: wrap; }
.breadcrumbs { flex-wrap: wrap; }
.site-header { position: sticky; top: 0; background: #fff; border-bottom: 0; box-shadow: 0 4px 18px #191c3108; }
html:not(.js) .site-header { position: relative; }
@supports (backdrop-filter: blur(20px)) {
  .site-header { background: #ffffffeb; backdrop-filter: blur(20px) saturate(140%); }
}
.header-inner { min-height: 4.75rem; height: auto; position: relative; flex-wrap: wrap; gap: .5rem 2rem; padding-block: .5rem; }
.main-nav { min-width: 0; flex-wrap: wrap; gap: .5rem; }
.main-nav > a { font-size: .875rem; min-height: 2.75rem; display: inline-flex; align-items: center; }
.header-note { font-size: .75rem; min-height: 2.75rem; }
.menu-toggle { border-radius: .75rem; }
.menu-open-icon, .menu-close-icon { display: inline-flex; }
.menu-close-icon, .menu-toggle[aria-expanded="true"] .menu-open-icon { display: none; }
.menu-toggle[aria-expanded="true"] .menu-close-icon { display: inline-flex; }
.mode-switch label { font-size: .875rem; min-height: 3rem; }
.input-heading > label, .field-grid label, .advanced-fields > label { font-size: .875rem; }
.input-heading { gap: .75rem; flex-wrap: wrap; }
.input-tools { display: flex; align-items: center; gap: .5rem; margin-inline-start: auto; }
.text-button { min-width: 2.75rem; min-height: 2.75rem; font-size: .8125rem; padding-inline: .25rem; }
.field-help { font-size: .8125rem; line-height: 1.85; }
.field-grid { grid-template-columns: repeat(auto-fit, minmax(min(100%, 12rem), 1fr)); }
.field-grid > div { min-width: 0; }
.field-grid select, .advanced-fields select { height: auto; min-height: 3rem; font-size: 1rem; padding-block: .5rem; }
.form-options { font-size: .8125rem; gap: .5rem 1rem; flex-wrap: wrap; align-items: center; margin-block: 1rem; }
.check-label, .advanced summary { min-height: 2.75rem; }
.check-label input { width: 1.125rem; height: 1.125rem; flex-shrink: 0; }
.advanced summary { gap: .5rem; border-radius: .5rem; }
.advanced summary .icon { transition: transform 160ms ease; }
.advanced[open] summary .icon { transform: rotate(180deg); }
.advanced-fields { background: var(--canvas); padding: 1.25rem; border-radius: .75rem; }
.advanced-fields p { font-size: .8125rem; }
.form-error { margin-top: .75rem; margin-bottom: 0; font-size: .875rem; }
.button { font-size: .9375rem; min-height: 3rem; }
.convert-button { height: auto; padding-block: .875rem; }
.example-chip { min-height: 2.75rem; min-width: 2.75rem; padding: .4rem .65rem; font-size: .8125rem; }
.examples > span { font-size: .8125rem; }
.result-pane { scroll-margin-top: 1rem; }
.result-pane:focus { outline-offset: -5px; }
.result-heading { font-size: .875rem; }
.normalized { font-size: .875rem; font-variant-numeric: tabular-nums; letter-spacing: .025em; overflow-wrap: anywhere; }
.normalized span { font-size: .8125rem; }
.amount-wrap input { height: 5.25rem; line-height: 1.35; font-size: clamp(2rem, 3vw, 2.5rem); font-variant-numeric: tabular-nums; letter-spacing: .015em; padding-inline-end: 4.5rem; }
.amount-unit { font-size: .8125rem; }
.result-text { font-size: 1.625rem; line-height: 1.95; }
.result-text[lang="en"], .result-text[lang="fr"] { font-size: 1.375rem; line-height: 1.8; }
.copy-button { min-height: 2.75rem; height: auto; font-size: .875rem; }
.result-actions { flex-wrap: wrap; }
.icon-button, .secondary-output .icon-button { min-width: 2.75rem; min-height: 2.75rem; }
.secondary-output .icon { width: 1.125rem; height: 1.125rem; }
.secondary-output > div { font-size: .8125rem; gap: .5rem; }
.secondary-output p { font-size: .9375rem; line-height: 1.9; }
.result-footnote { font-size: .75rem; align-items: flex-start; gap: .5rem; }
.result-footnote > .icon { margin-top: .35rem; }
.is-empty .secondary-output { display: none; }
.is-empty .result-text { font-size: 1.125rem; }
.edit-amount { display: none !important; align-items: center; gap: .5rem; align-self: flex-start; min-height: 2.75rem; background: transparent; color: var(--ice); font-size: .875rem; padding: .25rem 0; margin-top: .5rem; }
.edit-amount .icon { transform: rotate(180deg); width: 1rem; }
.tool-footnotes { font-size: .75rem; flex-wrap: wrap; gap: .75rem 1.75rem; }
.section-kicker, .section-heading p, .tool-card p, .steps p { font-size: .875rem; }
.tool-card h3 { font-size: 1.125rem; }
.card-tag { font-size: .75rem; }
.article p, .article-steps, .article ul { font-size: 1rem; line-height: 2; }
.article h2 { font-size: 1.625rem; }
.article figcaption, .content-meta, .section-note, .source-note { font-size: .8125rem; }
.article-jump a { min-height: 2.75rem; align-items: center; font-size: .875rem; }
.table-search input { font-size: 1rem; }
.table-search label, .table-search > span { font-size: .875rem; }
.inline-link, .banner-links a { font-size: .875rem; min-height: 2.75rem; }
.learn-banner p, .download-callout p { font-size: .875rem; }
.download-callout .button { white-space: normal; text-align: center; }
.table-wrap { overscroll-behavior-inline: contain; }
.table-wrap th { font-size: .8125rem; }
.table-wrap td { font-size: .875rem; }
.code-block code { font-size: .8125rem; }
.footer-top { flex-wrap: wrap; }
.footer-top > p, .footer-top nav a, .footer-bottom { font-size: .8125rem; }
.footer-top nav a { display: inline-flex; align-items: center; min-height: 2.75rem; }
.footer-bottom { flex-wrap: wrap; gap: .5rem 1rem; }
.toast { bottom: max(1.5rem, env(safe-area-inset-bottom)); border-radius: .875rem; }
button, .mode-switch label, .main-nav > a, summary, .article-jump a { transition: background-color 120ms ease, color 120ms ease, transform 120ms ease; }
button:not(:disabled):active, .mode-switch label:active { transform: scale(.98); transition-duration: 0s; }
summary:active, .main-nav > a:active, .article-jump a:active { background-color: var(--brand-wash); }
.tool-card:active { transform: translateY(0) scale(.99); transition-duration: 0s; }
.is-copied .icon { display: none; }
.is-copied::before { content: '✓'; font-size: 1.125rem; line-height: 1; width: 1.125rem; text-align: center; }
.is-copied { box-shadow: inset 0 0 0 2px currentColor; }
select:disabled, .check-label:has(:disabled) { opacity: .55; cursor: default; }
@media (max-width: 1050px) and (min-width: 761px) {
  .header-inner { gap: 1rem; }
  .main-nav { gap: .25rem; }
  .main-nav > a { padding-inline: .5rem; font-size: .8125rem; }
  .hero h1 { font-size: 2.75rem; }
}
@media (max-width: 760px) {
  html { scroll-padding-top: 5.75rem; }
  .header-inner { min-height: 4.5rem; }
  .js .main-nav, .js .main-nav.is-open { display: flex; position: absolute; inset: calc(100% + .5rem) 0 auto; padding: .5rem; background: var(--white); border: 1px solid var(--surface-border); border-radius: 1rem; box-shadow: 0 16px 36px #191c3126; flex-direction: column; align-items: stretch; gap: .25rem; visibility: hidden; opacity: 0; transform: translateY(-.35rem); transition: opacity 160ms ease, transform 160ms ease, visibility 160ms; }
  .js .main-nav.is-open { visibility: visible; opacity: 1; transform: translateY(0); }
  .main-nav > a { padding: .75rem 1rem; font-size: .9375rem; }
  .menu-toggle[aria-expanded="true"] { background: var(--surface-tint); }
  .hero-inner, .inner-hero .hero-inner { min-height: 0; padding-block: 1.5rem 4rem; }
  .hero h1, .inner-hero h1 { font-size: clamp(2rem, 8.5vw, 2.625rem); }
  .hero p { font-size: .9375rem; margin-top: .75rem; }
  .hero-tags { margin-top: 1rem; font-size: .75rem; gap: .5rem 1rem; }
  .converter-topline { font-size: .75rem; }
  .mode-switch label { font-size: .8125rem; }
  .form-pane, .result-pane { padding: 1.25rem; }
  .result-pane { scroll-margin-top: 1rem; }
  html.js .edit-amount { display: inline-flex !important; }
  .tool-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tool-card h3 { font-size: 1.0625rem; }
  .tool-card p { font-size: .8125rem; }
  .faq-list summary { font-size: .9375rem; }
  .faq-list p { font-size: .9375rem; }
  .table-wrap:focus-visible { outline-offset: 2px; }
}
@media (max-width: 420px) {
  .field-grid, .tool-grid { grid-template-columns: 1fr; }
  .tool-card-top { margin-bottom: .75rem; }
  .tool-footnotes { justify-content: flex-start; gap: .5rem 1rem; }
  .form-options { align-items: stretch; }
  .advanced { flex: 1 0 100%; }
  .advanced summary { justify-content: space-between; border-top: 1px solid var(--line); border-radius: 0; }
  .form-options:has(.advanced[open]) { display: flex; }
  .advanced[open] { margin-top: 0; }
}
@media (prefers-reduced-transparency: reduce), (prefers-contrast: more) {
  .site-header { background: var(--white); backdrop-filter: none; }
}
@media (prefers-contrast: more) {
  :root { --muted: #373b50; --line: #777b90; --surface-border: #777b90; --control-border: #54586f; --panel-muted: #fff; }
  .site-header { border-bottom: 1px solid var(--ink); }
  .main-nav, .converter-card, .toast { border-color: currentColor; }
  .icon-button, .example-chip { border-color: currentColor; }
}
@media (prefers-reduced-motion: reduce) {
  button:not(:disabled):active, .mode-switch label:active, .tool-card:hover, .tool-card:active { transform: none; }
  .js .main-nav { transform: none; }
}
@media (forced-colors: active) {
  .mode-switch label:has(input:checked) { border: 2px solid Highlight; }
  .result-pane, .site-header, .js .main-nav, .toast { background: Canvas; color: CanvasText; border: 1px solid CanvasText; }
  .result-text, .result-heading, .secondary-output p { color: CanvasText; }
}
.publishing-note { max-width: 820px; margin: 2.5rem auto 0; padding: 1.25rem 1.5rem; border: 1px solid var(--line); border-radius: .875rem; background: var(--white); color: var(--muted); font-size: .875rem; line-height: 2; }
.publishing-note > span { display: block; margin-top: .5rem; font-size: .8125rem; }
.founder-card { display: flex; align-items: center; gap: 1.25rem; padding: 1.75rem; border: 1px solid var(--line); border-radius: 1.25rem; background: var(--white); margin-bottom: 2rem; }
.founder-card > div { min-width: 0; overflow-wrap: anywhere; }
.article .founder-card h2 { margin: 0; font-size: 1.625rem; text-align: start; }
.article .founder-card p { margin: .25rem 0 .5rem; }
.founder-monogram { display: grid; place-items: center; flex: none; width: 4.5rem; height: 4.5rem; border-radius: 1rem; background: var(--surface-tint); color: var(--brand); font-size: 1.5rem; font-weight: 500; }
.profile-links { display: grid; grid-template-columns: repeat(auto-fit,minmax(min(100%,10rem),1fr)); gap: .75rem; margin-block: 1.5rem 2rem; }
.profile-links a { display: flex; align-items: center; justify-content: space-between; gap: .75rem; min-height: 3rem; padding: .65rem 1rem; border: 1px solid var(--line); border-radius: .75rem; background: var(--white); text-decoration: none; }
.profile-links a:hover { background: var(--surface-tint); border-color: var(--brand); }
.contact-email { overflow-wrap: anywhere; max-width: 100%; }
.article h3 { margin-top: 1.5rem; font-size: 1.125rem; }
.practical-home { padding-bottom: 1rem; }
.footer-top nav { max-width: 340px; }
@media(max-width: 480px) { .founder-card { flex-direction: column; align-items: flex-start; padding: 1.25rem; } .publishing-note { padding: 1.125rem; } }
@media print {
  .result-pane { background: white; color: #111; border-color: #bbb; }
  .result-heading, .normalized, .normalized span, .result-text, .secondary-output > div, .secondary-output p { color: #111; }
  .secondary-output { border-color: #ccc; }
  .reading-page .hero, .reading-page .content-area { display: block !important; background: white; color: #111; }
  .reading-page .hero-inner { min-height: 0; padding: 0 0 20pt; }
  .reading-page .hero h1 { color: #111; font-size: 23pt; }
  .reading-page .hero p, .reading-page .content-meta, .reading-page .article p { color: #111; }
  .reading-page .content-area { padding: 15pt 0; }
  .reading-page .hero::after, .reading-page .chapter-symbol, .reading-page .breadcrumbs, .reading-page .eyebrow, .reading-page .article-jump, .reading-page button { display: none !important; }
  .reading-page .table-wrap { overflow: visible; }
  html.js .edit-amount, .edit-amount, .input-tools { display: none !important; }
  .result-pane { outline: none; }
  .publishing-note { break-inside: avoid; background: white; }
}