/* Noble Line — the «vintage, expensive» layer (29 Oct 2026, Loaai: «الأبلكيشن كله شكله vintage، حاجة غالية ومتطورة ومصروف
   عليها على نفس الهوية، وضيف glass view وحاجات شفافة وانتقالات حرة»). Loaded AFTER app.css; it changes the finish, never
   the layout or a figure. The same six brand colours — navy, paper, bronze, ink, stone, line — dressed like an engraved
   certificate: paper grain, double hairlines, bronze foil on the one thing to notice, framed cards, frosted glass.
   Speed (the rules in test/speed.test.mjs read this file too): real backdrop blur only on a laptop, and on a phone only on
   the few fixed parts (the bar, the menu, a sheet); no blur in any keyframe; no fixed backgrounds; nothing loops. */

:root {
  /* bronze foil: the seal's bronze catching light — used on rules, seals and the active mark, never on a fill of text */
  --foil: linear-gradient(115deg, #7a4a22 0%, #a8723d 22%, #e8c48e 46%, #c98a4e 58%, #845027 80%, #6e3f1d 100%);
  --foil-line: linear-gradient(90deg, transparent, #c98a4e 18%, #e8c48e 50%, #c98a4e 82%, transparent);
  /* warm ivory, not white: the paper of an old ledger */
  --glass: color-mix(in srgb, #fffcf5 70%, transparent);
  --glass-2: color-mix(in srgb, #fffcf5 90%, transparent);
  --glass-edge: color-mix(in srgb, var(--line-2) 75%, transparent);
  --hl: inset 0 1px 0 rgba(255, 255, 255, .65);                       /* the top highlight of a raised surface */
  --lift: 0 1px 1px rgba(23, 32, 54, .04), 0 12px 30px -14px rgba(23, 32, 54, .28), 0 2px 6px rgba(23, 32, 54, .05);
  --lift-hi: 0 2px 2px rgba(23, 32, 54, .05), 0 22px 44px -18px rgba(23, 32, 54, .34), 0 4px 10px rgba(23, 32, 54, .06);
  --frame: inset 0 0 0 1px rgba(255, 255, 255, .5), inset 0 0 0 4px color-mix(in srgb, var(--white) 0%, transparent);
  /* the paper grain (29 Oct 2026): a pre-drawn 128 px tile of four tones (brand/grain_*.png, 3.7 KB) — painted like any image.
     It was an SVG feTurbulence FILTER, re-rasterised on every repaint; same look, a fraction of the cost. */
  --grain: url('../brand/grain_light.png');
  --grain-side: url('../brand/grain_navy.png');
  --ease-lux: cubic-bezier(.22, 1, .36, 1);
}
:root[data-theme='dark'] {
  --glass: color-mix(in srgb, #172036 70%, transparent);
  --glass-2: color-mix(in srgb, #172036 84%, transparent);
  --glass-edge: color-mix(in srgb, #faf6ee 14%, transparent);
  --hl: inset 0 1px 0 rgba(250, 246, 238, .07);
  --lift: 0 1px 1px rgba(0, 0, 0, .3), 0 14px 32px -14px rgba(0, 0, 0, .6);
  --lift-hi: 0 2px 2px rgba(0, 0, 0, .35), 0 24px 46px -18px rgba(0, 0, 0, .7);
  --grain: url('../brand/grain_dark.png');
}

/* ------------------------------------------------------------------ the ground: paper with grain and a warm edge */
/* speed (29 Oct 2026, Loaai: «التطبيق بقى بطيء» — then «رجّع الحاجات اللي شلتها بس من غير ما تبطّأ»): the grain was an SVG
   feTurbulence FILTER behind the whole page, re-rasterised on every repaint (perf.mjs, CPU 4×: first load 1722 → ~750 ms
   without it). It is back as a pre-drawn tile on the ONE fixed layer behind everything (.site-bg, painted once and then
   only composited): scrolling never repaints it. */
body {
  background-color: var(--paper);
  background-image: radial-gradient(120% 80% at 50% 0%, transparent 55%, color-mix(in srgb, var(--bronze) 7%, transparent) 100%);
}
:root[data-theme='dark'] body { background-image: radial-gradient(120% 80% at 50% 0%, transparent 50%, rgba(0, 0, 0, .35) 100%); }
.site-bg { background-image: var(--grain), linear-gradient(color-mix(in srgb, var(--ink) 2.6%, transparent) 1px, transparent 1px),
    linear-gradient(90deg, color-mix(in srgb, var(--ink) 2.6%, transparent) 1px, transparent 1px); background-size: 128px 128px, 36px 36px, 36px 36px; }

/* ------------------------------------------------------------------ type: a touch of the engraver */
h1, h2, h3, .p-name, .greet { letter-spacing: -.005em; }
html[lang='en'] .section-rule h3, html[lang='en'] .sn-mh, html[lang='en'] .kcard span { letter-spacing: .04em; }
.num, .figure, .kcard b, .tile .tl-v, .thero-v { font-feature-settings: 'tnum' 1, 'lnum' 1; }

/* ------------------------------------------------------------------ the finishing line: bronze foil, the seal as a gem */
.finish { background: linear-gradient(90deg, transparent, rgba(250, 246, 238, .3) 30%, rgba(250, 246, 238, .3) 70%, transparent); }
.finish::after { background: var(--foil); box-shadow: 0 0 0 2px rgba(23, 32, 54, .35), 0 0 10px rgba(201, 138, 78, .45); }

/* section headings: a double engraved rule that ends on the bronze seal */
.section-rule { margin: 26px 0 12px; }
.section-rule h3 { font-weight: 800; }
.section-rule::after { height: 4px; background: linear-gradient(var(--line-2), var(--line-2)) top / 100% 1px no-repeat, linear-gradient(var(--line), var(--line)) bottom / 100% 1px no-repeat; }
.section-rule::before { content: ''; order: 9; width: 7px; height: 7px; background: var(--foil); flex: none; }

/* ------------------------------------------------------------------ surfaces: framed, raised, frosted */
.card, .kcard, .item, .tile, .panel, .ccard, .rcard, .pc-box, .pc-c, .pc-person, .perm-row, .idc-file, .idc-slot, .pm-wrap, .tbl-wrap, .po-pl {
  background: var(--glass-2);
  border-color: var(--glass-edge);
  box-shadow: var(--hl), var(--lift);
}
.card, .kcard, .tile, .panel, .pc-box, .pc-person { position: relative; }
/* the certificate frame: a second hairline just inside the first (cards and figures only — rows stay clean) */
.card::after, .kcard::after, .tile::after, .pc-box::after {
  content: ''; position: absolute; inset: 3px; border: 1px solid color-mix(in srgb, var(--line-2) 55%, transparent); border-radius: 2px; pointer-events: none;
}
.kcard .kc-i { background: var(--foil); color: #fff8ec; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .35), 0 3px 8px -2px rgba(132, 80, 39, .45); }
.kcard b { color: var(--navy); }

/* the frosted glass, back (29 Oct 2026) without its cost. A backdrop blur on EVERY card, figure and table was one GPU pass
   each on every scroll frame (the cards move over the fixed layer behind them). Now:
   • every surface is frosted by a STATIC finish — an ivory sheet thinning towards its foot, so the grain and the drawing
     behind show through it like frosted glass — painted once, free to scroll;
   • a real blur only on a laptop and only on the few pieces that float: the figures (≤ 8 a screen), the sticky tabs, the
     bar, a sheet and «نوبل». */
.card, .kcard, .tile, .panel, .pc-box, .pc-person, .tbl-wrap, .ccard, .rcard, .pm-wrap {
  background: linear-gradient(172deg, color-mix(in srgb, #fffdf8 95%, transparent) 0%, color-mix(in srgb, #fffaf0 80%, transparent) 100%);
}
:root[data-theme='dark'] :is(.card, .kcard, .tile, .panel, .pc-box, .pc-person, .tbl-wrap, .ccard, .rcard, .pm-wrap) {
  background: linear-gradient(172deg, color-mix(in srgb, #1d2842 92%, transparent) 0%, color-mix(in srgb, #172036 78%, transparent) 100%);
}
@media (min-width: 900px) {
  html:not(.lite) .kcard, html:not(.lite) .tile { -webkit-backdrop-filter: blur(10px) saturate(1.25); backdrop-filter: blur(10px) saturate(1.25); }
}
/* list rows: the raised shadow is back, and a long list paints only the rows near the screen — the rest are skipped until
   they scroll close (content-visibility), so twenty rows or two thousand cost the same */
.item, .perm-row, .idc-file, .po-pl { box-shadow: var(--hl), 0 1px 1px rgba(23, 32, 54, .04), 0 10px 22px -14px rgba(23, 32, 54, .3); }
:root[data-theme='dark'] :is(.item, .perm-row, .idc-file, .po-pl) { box-shadow: var(--hl), 0 1px 1px rgba(0, 0, 0, .3), 0 10px 22px -14px rgba(0, 0, 0, .6); }
.list > .item:nth-child(n+13) { content-visibility: auto; contain-intrinsic-size: auto 72px; }

/* rows: a bronze hairline rises at the start edge on hover / focus */
.item { position: relative; }
.item::before { content: ''; position: absolute; inset-block: 10px; inset-inline-start: 0; width: 2px; background: var(--foil); transform: scaleY(0); transition: transform .28s var(--ease-lux); border-radius: 2px; }
@media (hover: hover) {
  .item:hover::before, .item:focus-visible::before { transform: scaleY(1); }
  .card:hover, .kcard:hover, .tile:hover, .pc-person:hover, .item:hover { box-shadow: var(--hl), var(--lift-hi); }
  html:not(.lite) .kcard:hover, html:not(.lite) .tile:hover, html:not(.lite) .pc-person:hover { transform: translateY(-2px); }
}
.kcard, .tile, .pc-person, .card { transition: box-shadow .35s var(--ease-lux), transform .35s var(--ease-lux), background-color .2s; }

/* ------------------------------------------------------------------ buttons: letterpress on navy, foil on the seal */
.btn { position: relative; overflow: hidden; box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14), 0 1px 2px rgba(23, 32, 54, .2), 0 8px 18px -10px rgba(23, 32, 54, .55);
  background-image: linear-gradient(180deg, rgba(255, 255, 255, .07), rgba(255, 255, 255, 0) 55%); letter-spacing: .005em; }
.btn::after { content: ''; position: absolute; inset-block: 0; inset-inline-start: -60%; width: 40%; background: linear-gradient(100deg, transparent, rgba(255, 255, 255, .18), transparent);
  transform: skewX(-18deg); transition: inset-inline-start .6s var(--ease-lux); pointer-events: none; }
@media (hover: hover) { .btn:hover::after { inset-inline-start: 120%; } .btn:hover { box-shadow: inset 0 1px 0 rgba(255, 255, 255, .16), 0 2px 4px rgba(23, 32, 54, .2), 0 14px 26px -12px rgba(23, 32, 54, .6); } }
.btn.light, .btn.ghost, .btn.bad, .btn.warn { background-image: none; box-shadow: var(--hl), 0 1px 2px rgba(23, 32, 54, .06); }
.btn.light { background-color: var(--glass-2); }
:root[data-theme='dark'] .btn:not(.light):not(.ghost):not(.bad):not(.warn) { background-color: #faf6ee; color: #172036; border-color: #faf6ee; }

/* ------------------------------------------------------------------ tabs: a segmented control (29 Oct 2026, Loaai: «الجولد اللي حوالين
   التابس … مش أحسن حاجة، خليها بشكل عصري») — a quiet track; the chosen tab an ivory chip that rises off it, its word in navy,
   a short bronze stroke under it. No foil block, no navy under the gold. The chip glides between tabs on a laptop (motion.js
   pills); on a phone the chosen tab carries the chip itself. */
.seg-tabs { gap: 2px; padding: 5px; margin: 0 0 14px; border: 1px solid var(--glass-edge); border-radius: 12px;
  background: color-mix(in srgb, var(--paper-2) 90%, transparent); box-shadow: inset 0 1px 2px rgba(23, 32, 54, .07), 0 1px 0 rgba(255, 255, 255, .6); }
.seg-tabs button { padding: 9px 14px; border-radius: 9px; font-weight: 700; color: var(--stone); transition: color .25s, background-color .25s; }
@media (hover: hover) { .seg-tabs button:not(.on):hover { color: var(--ink); background: color-mix(in srgb, var(--white) 45%, transparent); } }
.seg-tabs button.on { color: var(--navy); }
.seg-tabs button.on::after { inset-inline: auto; left: 50%; bottom: 4px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--bronze); }
.seg-tabs:not(.fx-has-pill) button.on { background: #fffdf8; box-shadow: 0 1px 2px rgba(23, 32, 54, .1), 0 6px 14px -8px rgba(23, 32, 54, .35), inset 0 1px 0 #fff; }
.seg-tabs button.on small:not(.hot) { background: color-mix(in srgb, var(--bronze-l) 22%, transparent); color: var(--bronze); }
.seg-tabs .fx-pill.line { border: 0; clip-path: none; border-radius: 9px; background: #fffdf8;
  box-shadow: 0 1px 2px rgba(23, 32, 54, .1), 0 6px 14px -8px rgba(23, 32, 54, .35), inset 0 1px 0 #fff; }
.seg-tabs .fx-pill.line::after { content: ''; position: absolute; left: 50%; bottom: 4px; width: 18px; height: 2px; margin-left: -9px; border-radius: 2px; background: var(--bronze); }
:root[data-theme='dark'] .seg-tabs { background: color-mix(in srgb, #0f1626 80%, transparent); box-shadow: inset 0 1px 2px rgba(0, 0, 0, .35); }
:root[data-theme='dark'] .seg-tabs button.on { color: #faf6ee; }
:root[data-theme='dark'] .seg-tabs:not(.fx-has-pill) button.on, :root[data-theme='dark'] .seg-tabs .fx-pill.line { background: #26324e; box-shadow: 0 6px 14px -8px rgba(0, 0, 0, .7), inset 0 1px 0 rgba(250, 246, 238, .08); }
:root[data-theme='dark'] .seg-tabs button.on::after, :root[data-theme='dark'] .seg-tabs .fx-pill.line::after { background: #c98a4e; }
@media (max-width: 899px) { .seg-tabs { margin-inline: -4px; } }
@media (min-width: 900px) { html:not(.lite) .seg-tabs { -webkit-backdrop-filter: blur(16px) saturate(1.3); backdrop-filter: blur(16px) saturate(1.3); } }

/* ------------------------------------------------------------------ the bar and the menu: frosted navy */
/* the bar: on a laptop frosted paper (navy in dark); on a phone it stays SOLID navy — a blurred bar over scrolling content
   re-blurs every frame (the 22 Oct 2026 lesson) */
@media (min-width: 900px) {
  .appbar { background-color: color-mix(in srgb, var(--paper) 72%, transparent); -webkit-backdrop-filter: blur(18px) saturate(1.35); backdrop-filter: blur(18px) saturate(1.35);
    box-shadow: inset 0 -1px 0 color-mix(in srgb, var(--line-2) 70%, transparent), 0 12px 30px -22px rgba(23, 32, 54, .45); }
  .appbar.scrolled { background-color: color-mix(in srgb, var(--paper) 80%, transparent); }
  :root[data-theme='dark'] .appbar, :root[data-theme='dark'] .appbar.scrolled { background-color: color-mix(in srgb, #172036 80%, transparent); }
}
.side { background-color: var(--brand); /* solid: a full-height blurred menu cost a GPU pass on every frame (29 Oct) */
  background-image: var(--grain-side), linear-gradient(180deg, rgba(250, 246, 238, .035), transparent 45%);   /* its own grain, painted once */
  box-shadow: inset -1px 0 0 rgba(250, 246, 238, .06); }
.sn-tag { background: var(--foil); -webkit-background-clip: text; background-clip: text; color: transparent; }
.sn-mh .sn-mic { color: #d9a46b; }
.sn-i.on { background: linear-gradient(90deg, rgba(250, 246, 238, .12), rgba(250, 246, 238, .04)); box-shadow: inset 0 1px 0 rgba(250, 246, 238, .06); }
html[dir='rtl'] .sn-i.on { background: linear-gradient(270deg, rgba(250, 246, 238, .12), rgba(250, 246, 238, .04)); }
.sn-i.on::before { background: var(--foil); }
.sn-m + .sn-m { border-top: 0; background-image: var(--foil-line); background-size: 100% 1px; background-repeat: no-repeat; opacity: 1; }
.sn-user { border-top: 0; background-image: var(--foil-line); background-size: 100% 1px; background-repeat: no-repeat; }

/* ------------------------------------------------------------------ sheets and the scrim: glass over a soft dusk */
@media (min-width: 900px) {
  .ai-panel { background: color-mix(in srgb, var(--paper) 86%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
    box-shadow: var(--lift-hi), inset 0 1px 0 rgba(255, 255, 255, .5); border-color: var(--glass-edge); }
  :root[data-theme='dark'] .ai-panel { background: color-mix(in srgb, #172036 86%, transparent); }
}
.scrim { background: radial-gradient(120% 90% at 50% 100%, rgba(13, 18, 31, .55), rgba(13, 18, 31, .38)); }
.sheet { background: color-mix(in srgb, var(--paper) 88%, transparent); -webkit-backdrop-filter: blur(22px) saturate(1.3); backdrop-filter: blur(22px) saturate(1.3);
  box-shadow: 0 -1px 0 rgba(255, 255, 255, .5) inset, 0 -24px 60px -20px rgba(13, 18, 31, .45); border: 1px solid var(--glass-edge); border-bottom: 0; }
.sheet .hd { border-bottom: 0; background-image: var(--foil-line); background-size: 100% 1px; background-repeat: no-repeat; background-position: bottom; }
.sheet .hd::before { background: var(--foil); height: 3px; width: 46px; }

/* ------------------------------------------------------------------ inputs: engraved wells */
.inp { background-color: color-mix(in srgb, var(--white) 92%, transparent); box-shadow: inset 0 1px 2px rgba(23, 32, 54, .06); transition: border-color .2s, box-shadow .25s var(--ease-lux); }
.inp:focus { border-color: var(--bronze); box-shadow: inset 0 1px 2px rgba(23, 32, 54, .06), 0 0 0 3px color-mix(in srgb, var(--bronze-l) 28%, transparent); outline: none; }

/* ------------------------------------------------------------------ tags, pills and codes: a finer finish */
.tag, .pill, .po-st { box-shadow: inset 0 0 0 1px color-mix(in srgb, currentColor 18%, transparent); }
.code-z { background: color-mix(in srgb, var(--bronze-l) 14%, transparent); border: 1px solid color-mix(in srgb, var(--bronze) 30%, transparent); }

/* tables: a navy head with a foil rule under it */
.tbl thead th { border-bottom: 0; box-shadow: inset 0 -2px 0 0 #c98a4e; }

/* the hero: deeper, with a foil rule at its foot */
.hero, .thero { box-shadow: var(--lift-hi); }
.hero::after, .thero::after { content: ''; position: absolute; inset-inline: 18px; bottom: 10px; height: 1px; background: var(--foil-line); opacity: .9; top: auto; transform: none; animation: none; }

/* ------------------------------------------------------------------ transitions: free and fluid, cheap on a phone */
/* screen changes (29 Oct 2026, Loaai: «التنقل بين الشاشات والتابات يكون أفضل بكتير»): a cross-fade with a short drift
   towards the reading direction instead of a 28% slide — the old screen lets go fast, the new one settles softly. All of it
   is opacity and transform on the two snapshots (the compositor); nothing is laid out again. */
::view-transition-old(root) { animation-duration: .16s; animation-timing-function: ease-in; }
::view-transition-new(root) { animation-duration: .36s; animation-timing-function: var(--ease-lux); }
html[data-nav='fwd']::view-transition-old(root), html[data-nav='back']::view-transition-old(root) { animation-name: lux-out; }
html[data-nav='fwd']::view-transition-new(root) { animation-name: lux-in-fwd; }
html[data-nav='back']::view-transition-new(root) { animation-name: lux-in-back; }
@keyframes lux-out { to { opacity: 0; transform: scale(.992); } }
@keyframes lux-in-fwd { from { opacity: 0; transform: translate3d(calc(var(--vt-dx, 28%) * .07), 0, 0); } }
@keyframes lux-in-back { from { opacity: 0; transform: translate3d(calc(var(--vt-dx, 28%) * -.07), 0, 0); } }
/* the phone: the new screen floats up into place — transform and opacity only, one element */
html.lite main.page:not(.tabin) { animation: lux-in .3s var(--ease-lux) both; }
@keyframes lux-in { from { opacity: 0; transform: translate3d(0, 8px, 0); } }
/* a tab of the same screen: the tabs stay where they are (the chip glides), only what is under them settles in */
main.page.tabin > :not(.seg-tabs):not(.halves) { animation: tab-in .28s var(--ease-lux) both; }
@keyframes tab-in { from { opacity: .35; transform: translate3d(0, 6px, 0); } }
/* a screen on its way: a bronze line grows under the top edge while it loads (finite: it stops by itself), and the screen
   being left dims — feedback at once, without blanking it */
.nav-prog { position: fixed; top: 0; inset-inline: 0; height: 2px; z-index: 90; pointer-events: none; transform-origin: 0 50%; transform: scaleX(0); opacity: 0;
  background: linear-gradient(90deg, #845027, #e8c48e, #c98a4e); transition: transform .25s var(--ease-lux), opacity .3s .1s; }
html[dir='rtl'] .nav-prog { transform-origin: 100% 50%; }
html.nav-busy .nav-prog { opacity: 1; animation: nav-prog 2.4s cubic-bezier(.1, .7, .2, 1) forwards; transition: none; }
@keyframes nav-prog { from { transform: scaleX(.04); } to { transform: scaleX(.88); } }
html.nav-dim main.page { opacity: .6; transition: opacity .18s; }
/* a sheet arrives on a spring */
.sheet { transition: transform .46s cubic-bezier(.16, 1.12, .3, 1) !important; }
/* the menu modules open with their entries drifting in */
.sn-m.open .sn-mi > .sn-i { animation: lux-drift .4s var(--ease-lux) both; }
.sn-m.open .sn-mi > .sn-i:nth-child(2) { animation-delay: .03s; } .sn-m.open .sn-mi > .sn-i:nth-child(3) { animation-delay: .06s; }
.sn-m.open .sn-mi > .sn-i:nth-child(4) { animation-delay: .09s; } .sn-m.open .sn-mi > .sn-i:nth-child(n+5) { animation-delay: .12s; }
@keyframes lux-drift { from { opacity: 0; transform: translate3d(0, -4px, 0); } }
@media (prefers-reduced-motion: reduce) {
  html.lite main.page, .sn-m.open .sn-mi > .sn-i, main.page.tabin > *, html.nav-busy .nav-prog { animation: none; }
  .btn::after, .item::before, .kcard, .tile, .pc-person, .card { transition: none; }
}

/* ------------------------------------------------------------------ print stays plain */
@media print {
  body { background: #fff !important; }
  .card, .kcard, .item, .tile { box-shadow: none !important; background: #fff !important; -webkit-backdrop-filter: none !important; backdrop-filter: none !important; }
  .card::after, .kcard::after, .tile::after, .pc-box::after { display: none; }
}