/*
 * app.css: shared layer loaded on every page (landing pages and blog), after the page's own CSS.
 *  1. overflow safety
 *  2. fullscreen menu, reorganized (desktop)
 *  3. mobile: app shell (menu sheet, bottom tab bar, touch feedback, safe areas, performance)
 *  4. page transitions
 *  0. color themes (dark default, light) + the header switcher
 * Written with logical properties so it works for both the RTL (fa) and LTR (en) pages.
 */

/* ===================================================================== 0. themes */
/* Dark is the default. Each variable's dark value is exactly the color it replaced in the page
   CSS (tools/themeify_colors.py), so dark mode looks the same as before. */
:root {
  color-scheme: dark;
  --fg-rgb: 255, 255, 255;          /* hairlines, borders, glass */
  --paper-rgb: 236, 235, 230;       /* text-colored tints */
  --ink-rgb: 11, 12, 14;            /* page-colored overlays (scrolled nav, scrims) */
  --panel-rgb: 20, 22, 26;  --panel2-rgb: 17, 19, 23;
  --ink-2: #111317; --ink-3: #181b20;
  --sf-0: #07080a; --sf-1: #0f1114; --sf-2: #121419; --sf-3: #15181d; --sf-4: #1b1e24;
  --sf-5: #1c1f25; --sf-6: #2b2f37; --sf-7: #1d2027; --sf-8: #15171b; --sf-9: #262a32;
  --text-1: #d9d8d2; --text-2: #cfcec8;
  --lime-shadow: #6f8a10; --lime-hi: #dcff5c; --lime-lo: #c4ef2a; --lime-hi2: #e6ff86;
}
html[data-theme="light"] {
  color-scheme: light;
  --ink: #f3f2ec; --ink-rgb: 243, 242, 236;
  --ink-2: #ffffff; --ink-3: #ebeae3;
  --paper: #15161a; --paper-rgb: 21, 22, 26;
  --fg-rgb: 21, 22, 26;
  --panel-rgb: 255, 255, 255; --panel2-rgb: 255, 255, 255;
  --dim: #5e6167; --line: rgba(21, 22, 26, .1);
  /* bright lime is unreadable on light paper; this green reads as text (4.6:1) and as a button */
  --lime: #3f7d00; --lime-rgb: 63, 125, 0;
  --lime-shadow: #2b5600; --lime-hi: #4f9400; --lime-lo: #3a7300; --lime-hi2: #5aa300;
  --sf-0: #c4c3bb; --sf-1: #ecebe4; --sf-2: #efeee8; --sf-3: #e8e7e0; --sf-4: #e4e3dc;
  --sf-5: #fbfaf6; --sf-6: #dcdbd3; --sf-7: #ffffff; --sf-8: #ecebe4; --sf-9: #ffffff;
  --text-1: #2a2c31; --text-2: #3a3d42;
}
html[data-theme="light"] ::selection { background: rgba(63, 125, 0, .2); }
/* certificates and photos keep their own look; a soft shadow replaces the dark-mode glow */
html[data-theme="light"] .pcard, html[data-theme="light"] .feat, html[data-theme="light"] .cmt,
html[data-theme="light"] .react, html[data-theme="light"] .author, html[data-theme="light"] .cform {
  box-shadow: 0 1px 2px rgba(21, 22, 26, .04), 0 8px 24px rgba(21, 22, 26, .05);
}

/* smooth color change when switching (fallback when View Transitions aren't available) */
html.theme-fade, html.theme-fade *, html.theme-fade *::before, html.theme-fade *::after {
  transition: background-color .45s ease, color .45s ease, border-color .45s ease, fill .45s ease, stroke .45s ease !important;
}
/* circular reveal from the switcher (View Transitions) */
html.theme-vt::view-transition-old(root), html.theme-vt::view-transition-new(root) { animation: none; mix-blend-mode: normal; }
html.theme-vt::view-transition-new(root) { z-index: 2; }

/* ---------- the switcher ---------- */
.theme-switch {
  --w: 62px; --h: 34px; --k: 26px;
  position: relative; flex: none; width: var(--w); height: var(--h); padding: 0; border-radius: 999px;
  border: 1px solid rgba(var(--fg-rgb), .16); cursor: pointer; overflow: hidden;
  background: rgba(var(--panel-rgb), .6);
  -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px);
  transition: border-color .3s, background-color .4s, box-shadow .3s;
  -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.theme-switch:hover { border-color: var(--lime); box-shadow: 0 0 0 4px rgba(var(--lime-rgb), .12); }
.theme-switch:focus-visible { outline: 2px solid var(--lime); outline-offset: 3px; }
.theme-switch .ts-ico {
  position: absolute; top: 50%; width: 16px; height: 16px; margin-top: -8px; color: var(--dim);
  transition: opacity .3s, transform .5s cubic-bezier(.3, 1.4, .5, 1);
}
.theme-switch .ts-sun { inset-inline-start: 9px; }
.theme-switch .ts-moon { inset-inline-end: 9px; }
.theme-switch svg { display: block; width: 100%; height: 100%; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.theme-switch .ts-knob {
  position: absolute; top: 50%; width: var(--k); height: var(--k); margin-top: calc(var(--k) / -2);
  inset-inline-start: calc(var(--w) - var(--k) - 5px);   /* dark: over the moon */
  border-radius: 50%; background: var(--lime); color: var(--ink);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .3), 0 0 14px rgba(var(--lime-rgb), .45);
  display: grid; place-items: center;
  transition: inset-inline-start .55s cubic-bezier(.5, 1.6, .4, 1), background-color .4s, box-shadow .4s;
}
.theme-switch .ts-knob svg { width: 15px; height: 15px; transition: transform .6s cubic-bezier(.3, 1.4, .5, 1); }
.theme-switch .ts-knob .k-sun { display: none; }
html[data-theme="light"] .theme-switch .ts-knob { inset-inline-start: 4px; box-shadow: 0 2px 8px rgba(21, 22, 26, .25); }
html[data-theme="light"] .theme-switch .ts-knob .k-sun { display: block; transform: rotate(90deg); }
html[data-theme="light"] .theme-switch .ts-knob .k-moon { display: none; }
html:not([data-theme="light"]) .theme-switch .ts-moon, html[data-theme="light"] .theme-switch .ts-sun { opacity: 0; transform: scale(.4); }
.theme-switch:active .ts-knob { width: calc(var(--k) + 6px); }
html[data-theme="light"] .theme-switch:active .ts-knob { inset-inline-start: 4px; }
html:not([data-theme="light"]) .theme-switch:active .ts-knob { inset-inline-start: calc(var(--w) - var(--k) - 11px); }
/* spacing inside the two header layouts */
.nav-end .theme-switch, .status .theme-switch { margin-inline-end: 2px; }
@media (max-width: 860px) { .theme-switch { --w: 56px; --h: 32px; --k: 24px; } }

/* ===================================================================== 1. overflow */
.layout, .comments, .related, .bwrap, footer.foot, .foot { overflow-x: clip; }
.prose { overflow-wrap: break-word; }
.prose pre, .prose table { max-width: 100%; }
.cmt > div { min-width: 0; }
.cmt .ctext, .cmt .who { overflow-wrap: anywhere; }
.cmt .ctext pre, .cmt .ctext code { white-space: pre-wrap; word-break: break-all; }

/* ===================================================================== 2. menu (all sizes) */
/* The lime duplicate used by the hover roll peeked out under every item (stray glyph dots). */
.mi-t > span::after { opacity: 0; transition: opacity .2s; }
.menu-nav a:hover .mi-t > span::after,
.menu-nav a.on .mi-t > span::after { opacity: 1; }
.menu-inner { overscroll-behavior: contain; }

@media (min-width: 861px) {
  .menu-inner {
    grid-template-columns: minmax(0, 1.3fr) minmax(300px, .7fr);
    align-items: center;
    gap: clamp(40px, 6vw, 110px);
    padding: 110px clamp(24px, 5vw, 96px) 48px;
  }
  .menu-nav { justify-content: center; align-self: stretch; }
  .menu-nav a {
    width: 100%; align-items: center; gap: 22px;
    padding: .06em 0 .1em;
    border-bottom: 1px solid rgba(var(--fg-rgb), .07);
  }
  .menu-nav a:first-child { border-top: 1px solid rgba(var(--fg-rgb), .07); }
  .mi-n { margin-top: 0; min-width: 2.2em; }
  .mi-t { font-size: clamp(34px, 6.6vh, 84px) !important; line-height: 1.32 !important; }
  .menu-nav a::after {
    content: "←"; margin-inline-start: auto; font-size: 22px; font-weight: 700; color: var(--lime);
    opacity: 0; transform: translateX(10px); transition: opacity .3s, transform .3s;
  }
  html[dir="ltr"] .menu-nav a::after, html:not([dir]) .menu-nav a::after { content: "→"; transform: translateX(-10px); }
  .menu-nav a:hover::after, .menu-nav a.on::after { opacity: 1; transform: none; }

  /* side links: one tidy card at the top of the second column, clear of the character below */
  .menu-side {
    align-self: start; justify-self: stretch;
    grid-auto-flow: row !important; grid-template-columns: 1fr 1fr;
    gap: 26px 28px; padding: 26px 28px !important; margin-top: 8px;
    border: 1px solid rgba(var(--fg-rgb), .08); border-radius: 26px;
    background: rgba(var(--panel2-rgb), .72);
    -webkit-backdrop-filter: blur(14px); backdrop-filter: blur(14px);
  }
  .menu-side .ms-block:last-child { grid-column: 1 / -1; padding-top: 18px; border-top: 1px solid rgba(var(--fg-rgb), .07); }
  .menu-side .ms-block:last-child { grid-auto-flow: column; justify-content: start; align-items: center; gap: 16px; }
  .menu-side .ms-block:last-child .ms-l { margin: 0; }
  .ms-block a { font-size: 17px !important; display: inline-flex; align-items: center; gap: 8px; transition: color .2s, transform .25s; }
  .ms-block a:hover { transform: translateX(-4px); }
  html[dir="ltr"] .ms-block a:hover { transform: translateX(4px); }
  .menu-char .stage { width: min(44vh, 460px, 30vw) !important; }
}

/* ===================================================================== 3. mobile app shell */
.tabbar { display: none; }

@media (max-width: 860px) {
  html { -webkit-text-size-adjust: 100%; }
  body { padding-bottom: calc(88px + env(safe-area-inset-bottom)); }
  a, button, label, summary { -webkit-tap-highlight-color: transparent; touch-action: manipulation; }

  /* top bar: always solid enough to read, respects the notch */
  body > nav, nav.top {
    padding-top: calc(12px + env(safe-area-inset-top)) !important;
    padding-bottom: 12px !important;
  }

  /* while the menu is open the bar stays solid, so scrolled menu rows never run under the logo */
  body.menu-open > nav, body.menu-open > nav.top {
    background: rgba(var(--ink-rgb), .9) !important;
    -webkit-backdrop-filter: blur(14px) !important; backdrop-filter: blur(14px) !important;
    border-color: rgba(var(--fg-rgb), .06) !important;
  }

  /* ---------- menu as a full-height sheet ---------- */
  .menu-layer.l2 { background: var(--ink) !important; }
  .menu-inner {
    display: flex !important; flex-direction: column; gap: 22px;
    padding: calc(80px + env(safe-area-inset-top)) 18px calc(108px + env(safe-area-inset-bottom)) !important;
    overflow-y: auto; -webkit-overflow-scrolling: touch;
  }
  /* small character with its speech bubble at the top of the sheet */
  .menu-char {
    position: relative !important; inset: auto !important; order: -1; flex: none;
    height: 132px; pointer-events: none;
  }
  .menu-char .stage {
    position: absolute !important; top: 0 !important; bottom: auto !important;
    inset-inline-start: 0 !important; inset-inline-end: auto !important; left: auto; right: auto;
    width: 132px !important; height: 132px; transform: none !important;
  }
  html[dir="rtl"] .menu-char .stage { right: 0 !important; left: auto !important; }
  html[dir="ltr"] .menu-char .stage, html:not([dir]) .menu-char .stage { left: 0 !important; right: auto !important; }
  .menu-char .hud, .menu-char .scan { display: none !important; }
  .menu-char .bubble {
    top: 30px !important; bottom: auto !important; width: max-content !important; max-width: min(200px, calc(100vw - 190px)) !important;
    font-size: 13px; line-height: 1.6; white-space: normal;
  }
  html[dir="rtl"] .menu-char .bubble { right: calc(100% + 8px) !important; left: auto !important; }
  html[dir="ltr"] .menu-char .bubble, html:not([dir]) .menu-char .bubble { left: calc(100% + 8px) !important; right: auto !important; }

  /* links: readable rows instead of giant words */
  .menu-nav { display: block !important; flex: none; }
  .menu-nav a {
    width: 100% !important; display: flex; align-items: center; gap: 14px;
    padding: 13px 4px !important; border-bottom: 1px solid rgba(var(--fg-rgb), .08);
    opacity: 0; transform: translateY(14px);
    transition: opacity .35s, transform .35s, background-color .2s !important;
  }
  .menu.open .menu-nav a { opacity: 1; transform: none; transition: opacity .5s calc(.3s + var(--i) * .05s), transform .6s cubic-bezier(.16, 1, .3, 1) calc(.3s + var(--i) * .05s), background-color .2s !important; }
  .menu-nav:hover a { opacity: 1; }
  .menu-nav a:active { background-color: rgba(var(--fg-rgb), .05); }
  .menu-nav a::after { content: "←"; margin-inline-start: auto; color: var(--dim); font-size: 18px; }
  html[dir="ltr"] .menu-nav a::after, html:not([dir]) .menu-nav a::after { content: "→"; }
  .menu-nav a.on::after { color: var(--lime); }
  .mi-n { margin-top: 0 !important; min-width: 2em; font-size: 12px !important; opacity: 1 !important; }
  .mi-t {
    font-size: 26px !important; line-height: 1.45 !important;
    transform: none !important; transition: none !important; overflow: visible !important;
  }
  .mi-t > span { transform: none !important; }
  .mi-t > span::after { display: none; }
  .menu-nav a.on .mi-t { color: var(--lime); }

  /* side links: a card of pills */
  .menu-side {
    display: grid !important; grid-auto-flow: row !important; grid-template-columns: 1fr;
    gap: 18px !important; padding: 18px !important; margin: 0;
    border: 1px solid rgba(var(--fg-rgb), .08); border-radius: 22px; background: var(--ink-2, var(--ink-2));
    justify-self: stretch !important; align-self: stretch !important;
  }
  .ms-block { display: flex !important; flex-wrap: wrap; gap: 8px !important; }
  .ms-l { flex-basis: 100%; margin: 0 0 2px !important; }
  .ms-block a {
    width: auto !important; font-size: 14px !important; font-weight: 700;
    padding: 9px 15px; border-radius: 999px; border: 1px solid rgba(var(--fg-rgb), .12);
    transition: background-color .2s, transform .15s;
  }
  .ms-block a:active { transform: scale(.95); background: rgba(var(--lime-rgb), .12); }

  /* ---------- bottom tab bar ---------- */
  .tabbar {
    position: fixed; z-index: 56;
    inset-inline: 12px; bottom: calc(10px + env(safe-area-inset-bottom));
    height: 64px; display: grid; grid-template-columns: repeat(5, 1fr); align-items: stretch;
    padding: 0 4px; border-radius: 22px;
    background: rgba(var(--panel2-rgb), .84);
    -webkit-backdrop-filter: blur(18px) saturate(1.4); backdrop-filter: blur(18px) saturate(1.4);
    border: 1px solid rgba(var(--fg-rgb), .08);
    box-shadow: 0 12px 40px rgba(0, 0, 0, .45);
    transition: transform .45s cubic-bezier(.2, .8, .2, 1), opacity .3s;
    view-transition-name: agt-tabbar;
  }
  .tabbar.hide { transform: translateY(calc(100% + 30px)); }
  .tabbar a, .tabbar button {
    position: relative; display: grid; place-items: center; align-content: center; gap: 3px;
    color: var(--dim); text-decoration: none; background: none; border: 0; padding: 0;
    font: inherit; font-size: 10.5px; font-weight: 700; line-height: 1.2; cursor: pointer;
    transition: color .25s, transform .15s;
  }
  .tabbar svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; position: relative; z-index: 1; }
  .tabbar span { position: relative; z-index: 1; }
  .tabbar a::before, .tabbar button::before {
    content: ""; position: absolute; top: 9px; width: 46px; height: 30px; border-radius: 999px;
    background: rgba(var(--lime-rgb), .16); transform: scale(.4); opacity: 0;
    transition: transform .35s cubic-bezier(.3, 1.5, .5, 1), opacity .25s;
  }
  .tabbar .on { color: var(--lime); }
  .tabbar .on::before { transform: none; opacity: 1; }
  .tabbar a:active, .tabbar button:active { transform: scale(.9); }
  .menu-open .tabbar { transform: none; }

  /* floating progress badge sits above the tab bar */
  .mini { bottom: calc(86px + env(safe-area-inset-bottom)) !important; }

  /* faster, lighter: no animated film grain on phones; loader only if loading is actually slow */
  .grain { display: none !important; }
  body:not(.ready) .loader { animation: agt-loader-in .3s .45s both; }
}
@keyframes agt-loader-in { from { opacity: 0; } to { opacity: 1; } }

@media (max-width: 860px) and (prefers-reduced-motion: reduce) {
  .tabbar, .menu-nav a { transition: none !important; }
}

/* comments on small screens: shallow indentation, compact cards */
@media (max-width: 620px) {
  .cmt-list .children { margin-inline-start: 10px !important; }
  .cmt-list .children .children .children { margin-inline-start: 0 !important; }
  .cmt { padding: 14px !important; gap: 10px !important; }
  .cmt .av { width: 34px !important; height: 34px !important; }
}

/* ===================================================================== 4. page transitions */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: agt-vt-out .22s ease both; }
::view-transition-new(root) { animation: agt-vt-in .32s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes agt-vt-out { to { opacity: 0; transform: translateY(-8px); } }
@keyframes agt-vt-in { from { opacity: 0; transform: translateY(12px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
}