/*!
 * Albourse · tools.html (الأدوات) — page styles. Tokens only; pairs with assets/js/pages/tools.js.
 * hero "today" panel · tool index · sticky switcher · payoff picker · calculator layout · charts · zakat · FX · market clock
 */

/* ---------- hero ---------- */
.tools-hero .page-hero__grid { align-items: center; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); }
.tools-hero__points { display: flex; flex-wrap: wrap; gap: 8px 20px; margin: var(--sp-5) 0 0; padding: 0; list-style: none; }
.tools-hero__points li { display: inline-flex; align-items: center; gap: 8px; font-size: var(--fs-sm); font-weight: 600; color: var(--text-2); line-height: 1.5; }
.tools-hero__points .icon { width: 20px; height: 20px; padding: 3px; border-radius: 50%; background: var(--accent-soft); color: var(--accent-ink); stroke-width: 2.6; }

.today { position: relative; padding: 18px; border-radius: var(--radius-xl); border: 1px solid var(--border); background: color-mix(in srgb, var(--surface) 88%, transparent); box-shadow: var(--shadow); }
.today__head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: 2px 12px; margin: 2px 2px 12px; }
.today__title { display: flex; align-items: center; gap: 8px; font-size: 18px; }
.today__title .icon { width: 20px; height: 20px; color: var(--accent); }
.today__stamp { font-size: 12px; }
.today__list { display: grid; gap: 8px; margin: 0; padding: 0; list-style: none; }
.today__row {
  display: grid; grid-template-columns: 42px minmax(0, 1fr) auto; align-items: center; gap: 12px; min-height: 66px; padding: 10px 14px 10px 12px;
  border-radius: 16px; background: var(--surface-2); border: 1px solid var(--border); color: inherit; text-decoration: none;
  transition: border-color var(--t-fast), background-color var(--t-fast);
}
.today__row:hover { border-color: var(--border-strong); background: var(--surface-3); }
.today__ico { width: 42px; height: 42px; border-radius: 13px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.today__ico .icon { width: 20px; height: 20px; }
.today__k { display: flex; flex-direction: column; min-width: 0; font-size: 14.5px; font-weight: 700; line-height: 1.45; }
.today__k small { font-size: 12.5px; font-weight: 500; color: var(--text-3); }
.today__v { display: flex; flex-direction: column; align-items: flex-end; gap: 1px; font-family: var(--font-head); font-size: 20px; font-weight: 700; line-height: 1.2; white-space: nowrap; }
.today__v small { font-family: var(--font-body); font-size: 12px; font-weight: 600; color: var(--text-3); }
.today__v .today__na { font-size: 12.5px; }
.today__skel { width: 86px; height: 22px; }
.today__mkts { flex-direction: row; flex-wrap: wrap; justify-content: flex-end; gap: 6px; font-family: var(--font-body); }
.mstat { display: inline-flex; align-items: center; gap: 6px; min-height: 26px; padding: 2px 9px 2px 8px; border-radius: var(--radius-pill); background: var(--surface); border: 1px solid var(--border); font-size: 12.5px; font-weight: 600; color: var(--text-2); }

/* ---------- tool index ---------- */
.tools-index { padding-top: clamp(28px, 3vw, 44px); }
.tools-grid { margin: 0; padding: 0; list-style: none; }
.tools-grid > li { display: flex; min-width: 0; }
.tools-grid .ttile { flex: 1; min-width: 0; min-height: 232px; }
.tools-grid .ttile__title { font-size: 16.5px; }
.ttile__short { display: none; }
.tools-grid .ttile__desc { font-size: 13.5px; line-height: 1.65; }
.tools-grid .ttile__art { height: 50px; }
.tools-grid .ttile__go { font-size: 13px; }

/* ---------- sticky tool switcher ---------- */
.tool-nav {
  position: sticky; top: var(--header-h); z-index: 40; margin-top: clamp(28px, 3vw, 44px);
  background: var(--bg); border-block: 1px solid var(--border);
  transition: transform var(--t-med) var(--ease), box-shadow var(--t-med) var(--ease);
}
.tool-nav.is-stuck { box-shadow: var(--shadow-sm); }
.tool-nav__list {
  display: flex; gap: 4px; margin: 0; padding: 8px 0; list-style: none; overflow-x: auto; overscroll-behavior-x: contain; scrollbar-width: none;
}
.tool-nav__list::-webkit-scrollbar { display: none; }
.tool-nav__link {
  display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid transparent;
  color: var(--text-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap;
  transition: background-color var(--t-fast), color var(--t-fast), border-color var(--t-fast);
}
.tool-nav__link .icon { width: 18px; height: 18px; color: var(--accent); }
.tool-nav__link:hover { color: var(--text); background: var(--surface-2); }
.tool-nav__link[aria-current="true"] { color: var(--text); background: var(--surface); border-color: var(--border-strong); box-shadow: var(--shadow-sm); }
@media (min-width: 1240px) { .tool-nav__list { justify-content: space-between; } }
@media (max-width: 1239px) {
  .tool-nav__list { -webkit-mask-image: linear-gradient(to left, transparent, currentColor 18px, currentColor calc(100% - 18px), transparent); mask-image: linear-gradient(to left, transparent, currentColor 18px, currentColor calc(100% - 18px), transparent); padding-inline: 10px; }
}

/* ---------- tool sections ---------- */
.tools-page .num { white-space: nowrap; }
.tools-page sup { font-size: max(12px, .72em); line-height: 0; }
.tools-page .how__list--ltr .num { white-space: normal; }
/* anchors: html scroll-padding-top already clears the site header (+20px); this page also has the sticky tool switcher
   (62px) under it, so a tool and its calculator add exactly that height and land ~20px below the switcher */
.tools-page { --toolnav-h: 62px; }
.tool.section { padding-top: 0; margin-top: var(--section-y); scroll-margin-top: var(--toolnav-h); }
.tools-page .btn--sm { --btn-h: 44px; }
.tcalc, .clk, .pk { scroll-margin-top: var(--toolnav-h); }

/* ---------- 01 payoff picker ---------- */
.pk { display: grid; gap: 14px; }
.pk__select-field { display: none; }
.pk__board {
  display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-width: 0; margin: 0; padding: 10px;
  border: 1px solid var(--border); border-radius: var(--radius-lg); background: var(--surface); box-shadow: var(--shadow-sm);
}
.pk__group { display: flex; flex-direction: column; gap: 4px; min-width: 0; padding: 6px; border-radius: 14px; }
.pk__group + .pk__group { border-inline-start: 1px solid var(--border); border-start-start-radius: 0; border-end-start-radius: 0; }
.pk__gtitle { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 2px 4px 6px; }
.pk__gsub { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.pk__item {
  position: relative; display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 8px; border-radius: 12px; border: 1px solid transparent;
  cursor: pointer; transition: background-color var(--t-fast), border-color var(--t-fast);
}
.pk__item input { position: absolute; inset-inline-start: 0; top: 50%; width: 1px; height: 1px; margin: 0; opacity: 0; pointer-events: none; }
.pk__item:hover { background: var(--surface-2); }
.pk__item.is-on { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 50%, transparent); }
.pk__item:has(input:focus-visible) { outline: 2px solid var(--focus); outline-offset: 2px; }
.pk__glyph { flex: none; display: block; width: 56px; height: 30px; padding: 2px 3px; border-radius: 8px; background: var(--surface-2); border: 1px solid var(--border); overflow: hidden; line-height: 0; }
.pk__glyph svg { display: block; width: 100%; height: 100%; }
.pk__item.is-on .pk__glyph { background: var(--surface); }
.pk__name { min-width: 0; font-size: 13.5px; font-weight: 600; line-height: 1.4; color: var(--text-2); }
.pk__item.is-on .pk__name { color: var(--text); font-weight: 700; }
.pk__bar { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 10px 16px; }
.pk__meta { display: flex; flex-wrap: wrap; gap: 6px; }
.pk__actions { display: flex; flex-wrap: wrap; gap: 8px; }
.pk__actions .is-done { color: var(--pos); border-color: color-mix(in srgb, var(--pos) 45%, transparent); }
.pk__actions .is-failed { color: var(--warn); border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.pk__host:not(.is-ready) { min-height: 960px; }
.pk__loading { min-height: 420px; align-content: center; }

/* ---------- calculator layout ---------- */
.tcalc { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); grid-template-rows: auto 1fr; gap: 22px clamp(20px, 3vw, 40px); align-items: start; padding: clamp(18px, 2.4vw, 30px); }
.tcalc__form { grid-column: 1; grid-row: 1; display: grid; gap: 18px; min-width: 0; align-content: start; }
.tcalc__out { grid-column: 2; grid-row: 1 / span 2; display: grid; gap: 12px; min-width: 0; align-content: start; }
.tcalc__viz { grid-column: 1; grid-row: 2; align-self: start; }
.tcalc > .accordion, .tcalc__wide { grid-column: 1 / -1; }
/* form + results in their own grid, so the sticky results stop before the «كيف نحسبها؟» accordion instead of sliding over it */
.tcalc__pair { grid-column: 1 / -1; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 22px clamp(20px, 3vw, 40px); align-items: start; min-width: 0; }
.tcalc__pair > .tcalc__form { grid-column: 1; grid-row: 1; }
.tcalc__pair > .tcalc__out { grid-column: 2; grid-row: 1; }
@media (min-width: 900px) { .tcalc--sticky .tcalc__out { position: sticky; top: calc(var(--header-h) + 84px); } }
.tool > .how { margin-top: 14px; }
.tcalc .form-grid { gap: 14px; align-items: start; }
.tseg { min-width: 0; margin: 0; padding: 0; border: 0; }
.tseg > legend { padding: 0; margin-bottom: 7px; }
.tseg-row { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr)); gap: 14px; }
.field__opt { font-weight: 500; color: var(--text-3); }
.field__hint .link { font-weight: 600; }
.segmented__option.is-disabled span { opacity: .45; cursor: not-allowed; }
.tnote { display: flex; gap: 10px; align-items: flex-start; margin: 0; padding: 11px 14px; border-radius: 12px; background: var(--surface-2); border: 1px solid var(--border); font-size: 13px; line-height: 1.75; color: var(--text-3); }
.tnote .icon { width: 17px; height: 17px; flex: none; margin-top: 3px; color: var(--info); }
.tnote--warn { background: var(--warn-soft); border-color: color-mix(in srgb, var(--warn) 32%, transparent); color: var(--text-2); }
.tnote--warn .icon { color: var(--warn); }
.tcallout { margin: 0; padding: 12px 14px; font-size: 14px; }

/* results */
.tcalc .result { gap: 8px; }
.tcalc .result--hero, .tcalc .result--tint { min-height: 150px; justify-content: center; }
.result__value { overflow-wrap: anywhere; }
.result__unit { font-family: var(--font-body); font-size: .4em; font-weight: 700; margin-inline-start: .12em; opacity: .9; }
.result__word { font-size: .62em; }
.result--hero .result__sub b { color: var(--on-vivid); }
.result--tint { background: var(--accent-soft); border-color: color-mix(in srgb, var(--accent) 28%, transparent); }
.result--tint .result__label { color: var(--accent-ink); }
.result--tint .result__sub { color: var(--text-2); }
.result--tint .result__sub b { color: var(--text); }
.tcalc .result__list > div { min-height: 48px; }
.result__list dd { text-align: end; white-space: nowrap; }
.dd-sub { display: block; margin-top: 1px; font-size: 12px; font-weight: 500; color: var(--text-3); white-space: nowrap; }
.result__list dt .dd-sub { white-space: normal; }
.tcalc__out .result, .tcalc__out .result__list, .tcalc__out .tviz, .tcalc__out .stats, .tcalc__out .nmeter { transition: opacity var(--t-med) var(--ease); }
.tcalc__out.is-invalid .result__list, .tcalc__out.is-invalid .stats, .tcalc__out.is-invalid .nmeter,
.tcalc:has(.tcalc__out.is-invalid) .tcalc__viz { opacity: .35; }
.tcalc__viz { transition: opacity var(--t-med) var(--ease); }
.greeks { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.greeks .stat__value { font-size: 20px; }

/* ---------- charts (inline SVG drawn at pixel size; text ≥ 12px) ---------- */
.tviz { min-width: 0; margin: 0; padding: 14px 16px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.tviz__head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 16px; margin-bottom: 8px; }
.tviz__title { font-size: 13.5px; font-weight: 700; color: var(--text-2); }
.tviz__legend { display: flex; flex-wrap: wrap; gap: 4px 14px; font-size: 12.5px; color: var(--text-3); }
.tviz__plot { position: relative; direction: ltr; min-height: 40px; }
.tviz__plot svg { display: block; width: 100%; height: auto; overflow: visible; }
.tviz__plot:focus-visible { outline: 2px solid var(--focus); outline-offset: 4px; border-radius: 8px; }
.tviz__cap { margin-top: 8px; font-size: 12.5px; line-height: 1.75; color: var(--text-3); }
.lg { display: inline-flex; align-items: center; gap: 6px; line-height: 1.5; }
.lg::before { content: ""; flex: none; width: 18px; height: 0; border-top: 2.5px solid var(--text); border-radius: 2px; }
.lg--dash::before { border-top: 2px dashed var(--text-3); }
.lg--area::before { height: 10px; border: 1px solid color-mix(in srgb, var(--accent) 45%, transparent); background: var(--accent-soft); border-radius: 3px; }
.lg--contrib::before, .lg--growth::before { width: 11px; height: 11px; border: 0; border-radius: 3px; background: var(--c-contrib); }
.lg--growth::before { background: var(--accent); }
.tools-page { --c-contrib: color-mix(in srgb, var(--text-2) 42%, transparent); }

.tc-grid { stroke: var(--border); stroke-width: 1; shape-rendering: crispEdges; }
.tc-axis { stroke: var(--border-strong); stroke-width: 1.25; }
.tc-tick { font-family: var(--font-num); font-size: 12px; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.tc-lab { font-family: var(--font-body); font-size: 12px; font-weight: 600; fill: var(--text-2); paint-order: stroke; stroke: var(--surface-2); stroke-width: 3.5px; stroke-linejoin: round; }
.tc-lab--strong { fill: var(--text); font-weight: 700; }
.tc-line { fill: none; stroke: var(--text); stroke-width: 2.25; stroke-linejoin: round; stroke-linecap: round; }
.tc-line--exp { stroke: var(--text-3); stroke-width: 1.75; stroke-dasharray: 5 4; }
.tc-tv { fill: var(--accent-soft); }
.tc-k { stroke: var(--text-3); stroke-width: 1; stroke-dasharray: 2 3; }
.tc-dot { fill: var(--surface); stroke: var(--text); stroke-width: 2.5; }
/* price ladder */
.tc-band { fill: var(--surface-3); }
.tc-zone--pos { fill: var(--pos-soft); }
.tc-zone--neg { fill: var(--neg-soft); }
.tc-zone--soft { fill: color-mix(in srgb, var(--pos) 7%, transparent); }
.tc-zone--cap { fill: color-mix(in srgb, var(--pos) 7%, transparent); }
.tc-zl { font-family: var(--font-body); font-size: 12px; font-weight: 700; }
.tc-zl--pos, .tc-zl--soft, .tc-zl--cap { fill: var(--pos); }
.tc-zl--neg { fill: var(--neg); }
.tc-lead { stroke: var(--border-strong); stroke-width: 1; stroke-dasharray: 2 2; }
.tc-mk { stroke: var(--text-2); stroke-width: 2.5; stroke-linecap: round; }
.tc-mk--now { stroke: var(--text); stroke-width: 3; }
.tc-mk--be { stroke: var(--text-2); stroke-dasharray: 3 2.5; }
.tc-ml { font-family: var(--font-body); font-size: 12px; font-weight: 700; fill: var(--text-2); }
.tc-ml--strong { fill: var(--text); }
/* compound bars */
.tc-bar--c { fill: var(--c-contrib); }
.tc-bar--g { fill: var(--accent); }
.tc-hit { fill: transparent; }
.tc-col.is-on .tc-bar { filter: brightness(1.12); }
.tc-col.is-on .tc-bar--c { fill: color-mix(in srgb, var(--text-2) 62%, transparent); }
.tc-tip {
  position: absolute; top: -6px; left: 0; z-index: 2; display: grid; gap: 1px; min-width: 150px; padding: 8px 12px; border-radius: 12px; pointer-events: none;
  direction: rtl; background: var(--surface); border: 1px solid var(--border-strong); box-shadow: var(--shadow-lg); color: var(--text-2);
  font-size: 12.5px; line-height: 1.6; white-space: nowrap; opacity: 0; transform: translateY(4px); transition: opacity .12s, transform .12s;
}
.tc-tip.is-on { opacity: 1; transform: none; }
.tc-tip b { color: var(--text); font-size: 13.5px; }

/* account bar (position) */
.acctbar { margin-top: 10px; display: grid; gap: 6px; }
.acctbar:empty { display: none; }
.acctbar__track { position: relative; height: 12px; border-radius: 8px; background: var(--surface-3); overflow: hidden; direction: ltr; }
.acctbar__track i { position: absolute; inset-block: 0; left: 0; border-radius: 8px; }
.acctbar__pos { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.acctbar__pos.is-over { background: repeating-linear-gradient(135deg, var(--warn) 0 6px, color-mix(in srgb, var(--warn) 55%, transparent) 6px 12px); }
.acctbar__risk { background: var(--neg); }
.acctbar__keys, .nmeter__keys { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 14px; font-size: 12.5px; color: var(--text-3); }
.k { display: inline-flex; align-items: center; gap: 6px; }
.k::before { content: ""; width: 10px; height: 10px; border-radius: 3px; background: var(--text-3); }
.k--pos::before { background: color-mix(in srgb, var(--accent) 70%, transparent); }
.k--risk::before { background: var(--neg); }

/* ---------- «كيف نحسبها؟» ---------- */
.how > summary { min-height: 60px; }
.how__sum { display: flex; align-items: center; gap: 12px; }
.how__sum small { display: block; font-size: 12.5px; font-weight: 500; color: var(--text-3); line-height: 1.5; }
.how__ico { flex: none; width: 36px; height: 36px; border-radius: 11px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent-ink); }
.how__ico .icon { width: 18px; height: 18px; }
.accordion__body.how__body { display: grid; gap: 16px; }
.accordion__body.how__body > * + * { margin-top: 0; }
.how__body .formulas { margin: 0; }
.how__body .formula__expr { font-size: clamp(16px, .5vw + 13px, 19px); line-height: 1.6; }
.zk-callout .callout__body { max-width: 96ch; }
.how__cols { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px 28px; }
.how__h { margin-bottom: 6px; font-size: 15px; font-weight: 700; color: var(--text); }
.how__list { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.2em; font-size: 14.5px; line-height: 1.85; color: var(--text-2); }
.how__list li::marker { color: var(--accent); }
.how__list b { color: var(--text); }
.how__list--ltr { padding: 0; list-style: none; }
.how__list--ltr .num { font-family: var(--font-mono); font-size: 13.5px; }
.how__small { margin-top: 8px; font-size: 13px; line-height: 1.8; color: var(--text-3); }
.how__note { padding: 10px 14px; border-radius: 12px; background: var(--surface-2); border: 1px dashed var(--border-strong); font-size: 13.5px; line-height: 1.8; color: var(--text-3); }
.how .table-wrap { margin-top: 2px; }
.worked { display: grid; gap: 10px; justify-items: start; padding: 16px 18px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.worked__title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; font-weight: 700; color: var(--text); line-height: 1.6; }
.worked__tag { display: inline-flex; align-items: center; min-height: 24px; padding: 1px 9px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-size: 12px; font-weight: 700; }
.worked__steps { justify-self: stretch; display: grid; gap: 6px; margin: 0; padding-inline-start: 1.3em; font-size: 14.5px; line-height: 1.9; color: var(--text-2); }
.worked__steps b { color: var(--text); }
.worked__steps li::marker { color: var(--text-3); font-weight: 700; }
.sources__title { margin-bottom: 6px; font-size: 14px; font-weight: 700; color: var(--text); }
.sources__list { display: grid; gap: 6px; margin: 0; padding-inline-start: 1.2em; font-size: 13.5px; line-height: 1.8; color: var(--text-3); }
.cg-table .table-wrap { max-height: 420px; overflow: auto; }
.cg-table .table thead th { top: 0; }
.cg-table .table th[scope="row"] { font-weight: 700; color: var(--text-2); }

/* ---------- choice cards (zakat) ---------- */
.choices { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.choice { position: relative; display: block; min-width: 0; cursor: pointer; }
.choice input { position: absolute; top: 14px; inset-inline-end: 14px; width: 1px; height: 1px; margin: 0; opacity: 0; }
.choice__body {
  position: relative; display: flex; flex-direction: column; gap: 3px; height: 100%; min-height: 64px; padding: 12px 14px; padding-inline-end: 44px;
  border-radius: 14px; border: 1px solid var(--border-strong); background: var(--surface-2); transition: border-color var(--t-fast), background-color var(--t-fast);
}
.choice__body b { font-size: 14.5px; font-weight: 700; line-height: 1.5; color: var(--text); }
.choice__body small { font-size: 12.5px; line-height: 1.6; color: var(--text-3); }
.choice__body::after { content: ""; position: absolute; top: 15px; inset-inline-end: 14px; width: 18px; height: 18px; border-radius: 50%; border: 2px solid var(--border-strong); background: var(--surface); box-sizing: border-box; transition: border-color var(--t-fast); }
.choice:hover .choice__body { border-color: var(--text-3); }
.choice input:checked + .choice__body { border-color: var(--accent); background: var(--accent-soft); }
.choice input:checked + .choice__body::after { border: 5.5px solid var(--accent); }
.choice input:focus-visible + .choice__body { outline: 2px solid var(--focus); outline-offset: 2px; }

/* ---------- 06 zakat ---------- */
.zk-callout { margin: 0 0 var(--sp-4); }
/* the zakat form sits in a half-width column on laptops: stack its paired controls before their labels wrap onto two rows */
#zk-form { container: zkform / inline-size; }
@container zkform (max-width: 600px) {
  #zk-form .tseg-row, #zk-form .zk-nisab__top { grid-template-columns: minmax(0, 1fr); }
}
.zk-invest, .zk-own { display: grid; gap: 14px; }
.zk-nisab { display: grid; gap: 8px; padding: 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.zk-nisab__top { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; align-items: end; }
.zk-nisab .input-group, .zk-nisab .segmented { background: var(--surface); }
.zk-skel { display: inline-block; width: 72%; height: 12px; vertical-align: middle; }
.linkbtn { display: inline-flex; align-items: center; min-height: 44px; margin-block: -12px; vertical-align: middle; padding: 0 4px; border: 0; background: none; color: var(--link); font: inherit; font-weight: 700; text-decoration: underline; text-underline-offset: .25em; cursor: pointer; }
.nmeter { display: grid; gap: 6px; padding: 12px 14px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); }
.nmeter:empty { display: none; }
.nmeter__track { position: relative; height: 12px; border-radius: 8px; background: var(--surface-3); direction: ltr; }
.nmeter__fill { position: absolute; inset-block: 0; left: 0; border-radius: 8px; background: var(--accent); }
.nmeter__fill.is-below { background: color-mix(in srgb, var(--accent) 45%, transparent); }
.nmeter__mark { position: absolute; top: -5px; bottom: -5px; width: 3px; margin-left: -1.5px; border-radius: 2px; background: var(--text); }
.k--fill::before { background: var(--accent); }
.k--mark::before { width: 3px; height: 12px; border-radius: 2px; background: var(--text); }
.result .result__value .num + .result__unit { white-space: nowrap; }

/* ---------- 07 FX ---------- */
.fxc__pair { display: grid; grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr); align-items: start; gap: 10px; }
.fxc__box { display: grid; gap: 7px; min-width: 0; }
.fxc__lab { display: flex; align-items: center; gap: 8px; min-height: 26px; font-size: 13.5px; font-weight: 600; color: var(--text-2); }
.fxc__code { display: inline-grid; place-items: center; min-width: 44px; height: 24px; padding: 0 6px; border-radius: 7px; background: var(--accent-soft); color: var(--accent-ink); font-family: var(--font-mono); font-size: 12px; font-weight: 600; }
.fxc__input { min-height: 62px; font-family: var(--font-head); font-size: 24px; font-weight: 700; }
.fxc__swap {
  align-self: end; display: grid; place-items: center; width: 52px; height: 52px; margin-bottom: 5px; padding: 0; border-radius: 50%;
  border: 1px solid var(--border-strong); background: var(--surface); color: var(--text); box-shadow: var(--shadow-sm); cursor: pointer;
  transition: transform var(--t-med) var(--ease-spring), background-color var(--t-fast);
}
.fxc__swap:hover { background: var(--surface-3); }
.fxc__swap.is-flipped { transform: rotate(180deg); }
.fxc__swap .icon { width: 22px; height: 22px; }
.fxc__chips { display: flex; flex-wrap: wrap; gap: 8px; }
.fxc__chips .fchip { min-height: 44px; min-width: 64px; justify-content: center; }
.fxc__trend { display: grid; gap: 6px; padding: 14px 16px 12px; border-radius: var(--radius-lg); background: var(--surface-2); border: 1px solid var(--border); }
.fxc__trend-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 12px; font-size: 13px; }
.fxc__trend-title { font-weight: 700; color: var(--text-2); }
.fxc__trend-range { color: var(--text-3); }
.fxc__spark { height: 56px; direction: ltr; }
.fxc__trend-cap, .fxc__trend-na { font-size: 12.5px; line-height: 1.7; color: var(--text-3); }
.fxc__trend-na { display: flex; gap: 8px; align-items: flex-start; }
.fxc__trend-na .icon { width: 16px; height: 16px; margin-top: 3px; flex: none; }
.fx-skel, .today__skel { display: block; border-radius: 8px; }
.fx-skel { width: 60%; height: 44px; }

/* ---------- 08 market clock ---------- */
.clk { display: grid; grid-template-columns: minmax(280px, 420px) minmax(0, 1fr); gap: 24px clamp(24px, 4vw, 56px); align-items: center; padding: clamp(18px, 2.4vw, 30px); }
.clk > .accordion { grid-column: 1 / -1; justify-self: stretch; width: 100%; }
.clk__dial { display: grid; justify-items: center; gap: 14px; margin: 0; min-width: 0; }
.clk__face { position: relative; width: min(100%, 420px); aspect-ratio: 1; }
.clk__svg { position: absolute; inset: 0; direction: ltr; }
.clk__svg svg { display: block; width: 100%; height: 100%; overflow: visible; }
.clk__center { position: absolute; inset: 27%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; text-align: center; pointer-events: none; }
.clk__time { font-family: var(--font-head); font-size: clamp(28px, 5.4vw, 44px); font-weight: 800; line-height: 1.1; color: var(--text); }
.clk__day { font-size: 13.5px; font-weight: 600; color: var(--text-2); line-height: 1.5; }
.clk__tz { font-size: 12px; color: var(--text-3); line-height: 1.4; }
.clk__legend { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 14px; font-size: 12.5px; color: var(--text-3); }
.clk__legend .lg::before { width: 10px; height: 10px; border: 0; border-radius: 50%; }
.lg--saudi::before { background: var(--saudi); }
.lg--us::before { background: var(--us); }
.lg--crypto::before { background: var(--crypto); }
.lg--soft::before { background: color-mix(in srgb, var(--text-3) 45%, transparent); }
.ck-track { fill: none; stroke: var(--surface-3); }
.ck-seg { fill: none; }
.ck-seg--saudi { stroke: var(--saudi); }
.ck-seg--us { stroke: var(--us); }
.ck-seg--crypto { stroke: var(--crypto); }
.ck-seg--soft { opacity: .42; }
.ck-seg--mid { opacity: .7; }
.ck-tick { stroke: var(--border-strong); stroke-width: 1.25; stroke-linecap: round; }
.ck-tick--major { stroke: var(--text-3); stroke-width: 1.75; }
.ck-hour { font-family: var(--font-num); font-size: 12px; font-weight: 600; fill: var(--text-3); font-variant-numeric: tabular-nums; }
.ck-hand { stroke: var(--text); stroke-width: 2.5; stroke-linecap: round; }
.ck-hand-dot { fill: var(--text); stroke: var(--surface); stroke-width: 2.5; }
.clk__side { display: grid; gap: 12px; min-width: 0; }
.clk__local { display: flex; gap: 10px; align-items: flex-start; padding: 10px 14px; border-radius: 12px; background: var(--info-soft); border: 1px solid color-mix(in srgb, var(--info) 28%, transparent); font-size: 13.5px; line-height: 1.75; color: var(--text-2); }
.clk__local .icon { width: 18px; height: 18px; margin-top: 3px; flex: none; color: var(--info); }
.clk__list { display: grid; gap: 10px; margin: 0; padding: 0; list-style: none; }
.mkt { display: grid; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--surface-2); border: 1px solid var(--border); border-inline-start: 3px solid var(--accent); }
.mkt__head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 10px; }
.mkt__dot { width: 10px; height: 10px; border-radius: 50%; background: var(--accent); flex: none; }
.mkt__name { font-family: var(--font-head); font-size: 16.5px; font-weight: 700; line-height: 1.4; }
.mkt__state { margin-inline-start: auto; min-height: 30px; }
.mkt__count { font-size: 15px; line-height: 1.7; color: var(--text-2); }
.mkt__count b { font-family: var(--font-head); font-weight: 700; color: var(--text); }
.mkt__times { font-size: 12.5px; line-height: 1.75; color: var(--text-3); }
.mkt__et { white-space: nowrap; }

/* ---------- responsive ---------- */
@media (max-width: 1099px) {
  .pk__board { display: none; }
  .pk__select-field { display: flex; max-width: 520px; }
  .clk { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .clk__dial { width: 100%; }
  .clk__face { width: min(100%, 380px); }
  .clk__side { width: 100%; }
  .tools-hero .page-hero__grid { grid-template-columns: minmax(0, 1fr); }
  .tools-hero .page-hero__aside { max-width: 640px; }
}
@media (min-width: 700px) and (max-width: 1099px) {
  .tools-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
  .tools-grid > li.s-3 { grid-column: span 1; }
  .tools-grid .ttile { min-height: 0; padding: 14px 14px 12px; gap: 8px; }
  .tools-grid .ttile__tag, .tools-grid .ttile__desc, .tools-grid .ttile__go { display: none; }
  .tools-grid .ttile__icon { width: 40px; height: 40px; border-radius: 12px; }
  .tools-grid .ttile__title { font-size: 15px; }
  .tools-grid .ttile__art { height: 40px; margin-top: 4px; }
  .tools-grid .ttile__art-label { font-size: 17px; }
  .ttile__full { display: none; }
  .ttile__short { display: inline; }
}
@media (min-width: 700px) and (max-width: 899px) {
  .tcalc .result__list { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tcalc .result__list > div:last-child:nth-child(odd) { grid-column: 1 / -1; }   /* no orphan cell beside an empty one */
}
@media (max-width: 899px) {
  .tcalc { grid-template-columns: minmax(0, 1fr); grid-template-rows: none; }
  .tcalc__form, .tcalc__out, .tcalc__viz { grid-column: 1; grid-row: auto; }
  .tcalc__pair { grid-template-columns: minmax(0, 1fr); }
  .tcalc__pair > .tcalc__form, .tcalc__pair > .tcalc__out { grid-column: 1; grid-row: auto; }
  .how__cols { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 699px) {
  .tools-hero__points { gap: 6px 14px; margin-top: var(--sp-4); }
  .tools-hero__points li { font-size: 13px; }
  .today { padding: 14px; border-radius: 22px; }
  .today__row { grid-template-columns: 36px minmax(0, 1fr) auto; gap: 10px; min-height: 58px; padding: 8px 10px; border-radius: 14px; }
  .today__ico { width: 36px; height: 36px; border-radius: 11px; }
  .today__k { font-size: 13.5px; }
  .today__v { font-size: 17px; }
  .today__mkts { max-width: 150px; }

  /* compact two-column index: icon + short title */
  .tools-grid .ttile { min-height: 0; flex-direction: row; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 16px; }
  .tools-grid .ttile__top { flex: none; }
  .tools-grid .ttile__icon { width: 38px; height: 38px; border-radius: 12px; }
  .tools-grid .ttile__icon .icon { width: 19px; height: 19px; }
  .tools-grid .ttile__tag, .tools-grid .ttile__desc, .tools-grid .ttile__art, .tools-grid .ttile__go { display: none; }
  .tools-grid .ttile__title { font-size: 14px; line-height: 1.45; }
  .ttile__full { display: none; }
  .ttile__short { display: inline; }

  .tool-nav.is-away { transform: translateY(calc(-100% - 2px)); }
  .tool-nav__link { padding: 0 12px; font-size: 13.5px; }

  .tcalc, .tcalc__pair { gap: 18px; }
  .tcalc { padding: 16px 14px; }
  .tcalc .form-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px 10px; align-items: end; }
  .tcalc .result--hero, .tcalc .result--tint { min-height: 0; }
  .tcalc .result__list > div { padding: 9px 12px; }
  .result__list dd { white-space: normal; }
  .choices { grid-template-columns: minmax(0, 1fr); }
  .zk-nisab__top { grid-template-columns: minmax(0, 1fr); }
  .tviz { padding: 12px 12px 10px; }
  .fxc__pair { grid-template-columns: minmax(0, 1fr); gap: 6px; }
  .fxc__swap { justify-self: center; align-self: center; width: 48px; height: 48px; margin: 0; transform: rotate(90deg); }
  .fxc__swap.is-flipped { transform: rotate(270deg); }
  .fxc__chips .fchip { flex: 1 1 0; min-width: 0; padding: 0 8px; }
  .fxc__chips [data-amt="1000000"] { display: none; }
  .pk__select-field { max-width: none; }
  .pk__bar { align-items: stretch; }
  .pk__actions { width: 100%; flex-wrap: nowrap; }
  .pk__actions .btn { flex: 1 1 auto; min-width: 0; }
  .pk__actions .pk__copy { flex: none; width: 44px; padding: 0; }
  /* while TN.copyFeedback shows «تم نسخ الرابط» / «تعذّر النسخ», the icon-only button widens to its text */
  .pk__actions .pk__copy.is-done, .pk__actions .pk__copy.is-failed { width: auto; padding: 0 14px; }
  .pk__copy:not(.is-done) .pk__copy-txt { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  /* phone tables: short headers, tighter cells, and time ranges may wrap after the dash, so every column fits without sideways scrolling */
  .th-more { display: none; }
  .cg-table .table th, .cg-table .table td, .clk .how .table th, .clk .how .table td { padding-inline: 8px; }
  .tools-page .clk .how .table td.num { white-space: normal; }
  .clk { padding: 16px 14px; }
  .mkt { padding: 12px 14px; }
  .mkt__state { margin-inline-start: 0; }
  .how > summary { padding-inline: 14px; }
  .accordion__body { padding-inline: 14px; }
  .worked { padding: 14px; }
}
@media (max-width: 380px) {
  .tcalc .form-grid { grid-template-columns: minmax(0, 1fr); }
  .tools-grid .ttile { padding: 10px; gap: 8px; }
  .tools-grid .ttile__icon { width: 34px; height: 34px; }
  .tools-grid .ttile__title { font-size: 13.5px; }
}
@media (prefers-reduced-motion: reduce) {
  .fxc__swap, .tool-nav { transition: none; }
}
@media print {
  .tool-nav, .pk__board, .pk__actions, .fxc__swap, .fxc__chips { display: none !important; }
  .tool.section { margin-top: 24px; }
}