/* شريحة on the web: a calm workspace in white and navy. A side panel for moving around, a soft grey canvas for
   work, white panels for what you edit, and the deck's real pages as the main pictures. Readex Pro throughout. */
:root {
  --canvas: #F5F7FB;
  --panel: #FFFFFF;
  --ink: #0F1C3F;
  --navy: #1E3A8A;
  --navy-2: #2B4BA8;
  --sky: #7FA2FF;
  --soft: #EEF2FC;
  --muted: #5B6680;   /* ≥5:1 on canvas, soft and white (WCAG AA) */
  --line: #E4E8F1;
  --good: #1F7A55; --bad: #C0362C; --wait: #A26A00;
  --r: 14px; --r-s: 10px;
  --lift: 0 1px 2px rgba(15,28,63,.05), 0 1px 1px rgba(15,28,63,.03);
  --page: 0 1px 3px rgba(15,28,63,.10), 0 12px 32px -12px rgba(15,28,63,.22);
  --font: "Readex Pro", "IBM Plex Sans Arabic", system-ui, -apple-system, "Segoe UI", sans-serif;
  color-scheme: light;
}
* { box-sizing: border-box; }
html, body { margin: 0; background: var(--canvas); color: var(--ink); }
body { font: 15px/1.7 var(--font); -webkit-font-smoothing: antialiased; }
bdi { unicode-bidi: isolate; }
button, input, textarea, select { font: inherit; color: inherit; }
a { color: var(--navy); text-decoration: none; }
a:hover { text-decoration: underline; }
svg { display: block; }

/* ---------- shell ---------- */
.shell { display: grid; grid-template-columns: 1fr; min-height: 100vh; }
.shell:has(.side:not([hidden])) { grid-template-columns: 252px 1fr; }
.side { position: sticky; top: 0; height: 100vh; background: var(--panel); border-inline-end: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 6px; padding: 20px 14px; }
.side[hidden] { display: none; }
.logo { display: flex; align-items: center; gap: 10px; font-weight: 700; font-size: 20px; color: var(--ink); padding: 4px 8px 18px; }
.logo:hover { text-decoration: none; }
.logo img { border-radius: 9px; }
.btn.new { width: 100%; margin-bottom: 14px; }
.btn.new::before { content: "+"; font-weight: 400; font-size: 20px; line-height: 0; margin-inline-end: 8px; }
nav { display: flex; flex-direction: column; gap: 2px; }
.nav-item { display: flex; align-items: center; gap: 12px; border: 0; background: none; border-radius: var(--r-s); padding: 10px 12px;
  cursor: pointer; color: var(--muted); font-weight: 500; text-align: start; }
.nav-item svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.nav-item:hover { background: var(--canvas); color: var(--ink); }
.nav-item[aria-current="page"] { background: var(--soft); color: var(--navy); }
.side-foot { margin-top: auto; display: flex; flex-direction: column; gap: 12px; }
.plan { background: var(--canvas); border-radius: var(--r-s); padding: 12px 14px; font-size: 13px; color: var(--muted); }
.plan b { color: var(--ink); font-weight: 600; display: block; margin-bottom: 2px; }
.lang { border: 0; background: none; color: var(--muted); cursor: pointer; text-align: start; padding: 6px 12px; font-size: 13px; }
.lang:hover { color: var(--ink); }
@media (max-width: 880px) {
  .shell:has(.side:not([hidden])) { grid-template-columns: 1fr; }
  .side { position: sticky; height: auto; flex-direction: row; align-items: center; padding: 10px 14px; gap: 8px; z-index: 5;
    border-inline-end: 0; border-bottom: 1px solid var(--line); }
  .logo { padding: 0; font-size: 15px; } .logo span { display: none; }
  nav { flex-direction: row; } .nav-item span { display: none; } .nav-item { padding: 8px; }
  .btn.new { width: auto; margin: 0; padding: 8px 14px; } .side-foot { margin: 0 auto 0 0; flex-direction: row; align-items: center; }
  [dir="ltr"] .side-foot { margin: 0 0 0 auto; }
  .plan { display: none; }
}

main { padding: 36px 44px 96px; max-width: 1240px; width: 100%; min-width: 0; }
main.flush { padding: 0; max-width: none; }
@media (max-width: 640px) { main { padding: 22px 16px 80px; } }

/* ---------- type ---------- */
h1 { font-size: 28px; line-height: 1.35; font-weight: 600; margin: 0; letter-spacing: -0.01em; }
h2 { font-size: 15px; line-height: 1.5; font-weight: 600; margin: 0 0 12px; }
h3 { font-size: 15px; font-weight: 600; margin: 0 0 6px; }
p { margin: 0 0 10px; max-width: 70ch; }
.muted { color: var(--muted); }
.small { font-size: 13px; }
.page-head { display: flex; align-items: flex-end; gap: 16px; margin-bottom: 26px; flex-wrap: wrap; }
.page-head .sub { color: var(--muted); margin-top: 4px; }
.back { display: inline-flex; align-items: center; gap: 6px; color: var(--muted); border: 0; background: none; cursor: pointer;
  padding: 0; margin-bottom: 10px; font-size: 13px; }
.back:hover { color: var(--ink); }
.back svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
[dir="ltr"] .back svg { transform: scaleX(-1); }

/* ---------- panels and layout ---------- */
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 24px; margin: 0 0 16px; }
.card.plain { background: none; border: 0; box-shadow: none; padding: 0; }
.row { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.grow { flex: 1 1 auto; }
.split { display: grid; gap: 16px; grid-template-columns: 1fr; align-items: start; }
@media (min-width: 980px) { .split { grid-template-columns: 1.15fr 1fr; } }
.narrow { max-width: 760px; }

/* ---------- controls ---------- */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; border: 1px solid transparent; border-radius: var(--r-s);
  padding: 9px 18px; min-height: 42px; background: var(--navy); color: #fff; cursor: pointer; font-weight: 500; white-space: nowrap;
  transition: background-color .15s ease; }
.btn:hover { background: var(--ink); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.ghost { background: var(--panel); color: var(--ink); border-color: var(--line); }
.btn.ghost:hover { background: var(--canvas); }
.btn.danger { background: var(--panel); color: var(--bad); border-color: var(--line); }
.btn.wide { width: 100%; }
.link { border: 0; background: none; color: var(--navy); cursor: pointer; padding: 6px 4px; font-weight: 500; }
.link:hover { text-decoration: underline; }
.btn:focus-visible, .chip:focus-visible, .link:focus-visible, .nav-item:focus-visible, .tile:focus-visible, .thumb:focus-visible,
.drop:focus-within, .lang:focus-visible, .back:focus-visible { outline: 3px solid rgba(43,75,168,.3); outline-offset: 2px; }

.chips { display: inline-flex; gap: 4px; padding: 4px; background: var(--canvas); border: 1px solid var(--line); border-radius: 12px; flex-wrap: wrap; }
.chip { border: 0; background: none; border-radius: 9px; padding: 8px 14px; cursor: pointer; color: var(--muted); font-weight: 500; }
.chip:hover { color: var(--ink); }
.chip[aria-pressed="true"] { background: var(--panel); color: var(--ink); box-shadow: 0 1px 2px rgba(15,28,63,.12); }
.chips.answers { background: none; border: 0; padding: 0; gap: 8px; }
.chips.answers .chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); padding: 10px 16px; }
.chips.answers .chip:hover { border-color: var(--navy); color: var(--navy); }

input[type=text], input[type=url], textarea, select { width: 100%; border: 1px solid var(--line); border-radius: var(--r-s); padding: 11px 14px;
  background: var(--panel); transition: border-color .15s, box-shadow .15s; }
textarea { min-height: 110px; resize: vertical; line-height: 1.7; }
input:focus, textarea:focus, select:focus { outline: none; border-color: var(--navy-2); box-shadow: 0 0 0 4px rgba(43,75,168,.12); }
::placeholder { color: #9AA3B8; }
label.field { display: block; margin: 0 0 18px; }
label.field > span, .field-label { display: block; font-weight: 500; margin-bottom: 8px; }

/* file drop: a real affordance, replacing the browser's file button */
.drop { position: relative; display: flex; align-items: center; gap: 14px; border: 1.5px dashed #C9D2E6; border-radius: var(--r); padding: 18px 20px;
  background: var(--canvas); cursor: pointer; transition: border-color .15s, background-color .15s; }
.drop:hover, .drop.over { border-color: var(--navy-2); background: var(--soft); }
.drop input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.drop .ico { width: 40px; height: 40px; border-radius: 10px; background: var(--panel); display: grid; place-items: center; flex: none; box-shadow: var(--lift); }
.drop .ico svg { width: 20px; height: 20px; fill: none; stroke: var(--navy); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.drop b { display: block; font-weight: 500; }
.drop span { font-size: 13px; color: var(--muted); }

/* ---------- progress through a deck ---------- */
.steps { display: grid; grid-template-columns: repeat(7, 1fr); gap: 6px; list-style: none; padding: 0; margin: 18px 0 28px; }
.steps li { font-size: 13px; color: var(--muted); }
.steps li::before { content: ""; display: block; height: 4px; border-radius: 4px; background: var(--line); margin-bottom: 8px; }
.steps li.done::before { background: var(--sky); }
.steps li.on { color: var(--ink); font-weight: 500; }
.steps li.on::before { background: var(--navy); }
.steps li b { display: none; }
@media (max-width: 640px) {
  .steps { margin: 12px 0 18px; row-gap: 8px; }
  .steps li { font-size: 0; }
  .steps li::before { margin-bottom: 0; }
  .steps::after { content: attr(data-now); grid-column: 1 / -1; font-size: 13px; font-weight: 600; color: var(--ink); }
  .guide-d { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
  .guide-x { display: none; }
  .guide-t { font-size: 15px; }
}

/* ---------- library: the decks as their covers ---------- */
.tiles { display: grid; gap: 22px; grid-template-columns: repeat(auto-fill, minmax(250px, 1fr)); }
.tile { border: 0; background: none; padding: 0; cursor: pointer; text-align: start; display: flex; flex-direction: column; gap: 10px; }
.tile .cover { aspect-ratio: 16/9; border-radius: var(--r-s); background: var(--panel); border: 1px solid var(--line); overflow: hidden;
  box-shadow: var(--lift); transition: box-shadow .2s, transform .2s; position: relative; }
.tile:hover .cover { box-shadow: var(--page); transform: translateY(-2px); }
.tile .cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.tile .cover .slide { border: 0; height: 100%; }
.tile .t { font-weight: 500; line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile .m { display: flex; gap: 10px; align-items: center; font-size: 13px; color: var(--muted); margin-top: -4px; }
@media (prefers-reduced-motion: reduce) { .tile .cover { transition: none; } .tile:hover .cover { transform: none; } }
.state { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; padding: 2px 9px; border-radius: 99px; background: var(--canvas); color: var(--muted); }
.state.good { background: #E6F4EE; color: var(--good); }
.state.bad { background: #FBEAE8; color: var(--bad); }
.state.wait { background: #FFF4E0; color: var(--wait); }
.badge { font-size: 13px; color: var(--muted); }
.badge.good { color: var(--good); }
.empty { text-align: center; padding: 70px 24px; }
.empty img { width: 64px; height: 64px; margin: 0 auto 16px; border-radius: 16px; }

.banner { border-radius: var(--r-s); padding: 12px 16px; margin: 12px 0; background: #FFF6E5; color: #6A4500; }
.banner.bad { background: #FDECEA; color: #7A1D15; }

/* ---------- photos from the references ---------- */
.photos { display: grid; gap: 8px; grid-template-columns: repeat(auto-fill, minmax(120px, 1fr)); }
.photo { position: relative; overflow: hidden; border: 0; cursor: pointer; aspect-ratio: 4/3; background: var(--canvas); padding: 0; border-radius: 10px; }
.photo img { width: 100%; height: 100%; object-fit: cover; display: block; transition: opacity .15s; }
.photo[aria-pressed="false"] img { opacity: .25; filter: grayscale(1); }
.photo[aria-pressed="true"]::after { content: "✓"; /* on-photo badge keeps its glyph */ position: absolute; top: 6px; inset-inline-end: 6px; width: 22px; height: 22px; border-radius: 50%;
  background: var(--navy); color: #fff; font-size: 13px; display: grid; place-items: center; }

/* ---------- the deck workspace ---------- */
.toolbar { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin: 0 0 16px; }
.workspace { display: grid; gap: 18px; grid-template-columns: 1fr; }
@media (min-width: 1000px) { .workspace { grid-template-columns: 190px 1fr; } }
.navigator { display: flex; gap: 12px; overflow: auto; padding: 4px; }
@media (min-width: 1000px) { .navigator { flex-direction: column; max-height: calc(100vh - 220px); position: sticky; top: 20px; } }
.thumb { display: grid; grid-template-columns: 18px 1fr; gap: 8px; align-items: start; border: 0; background: none; padding: 0; cursor: pointer;
  text-align: start; min-width: 150px; }
.thumb .n { font-size: 13px; color: var(--muted); padding-top: 2px; text-align: end; }
.thumb .pg { aspect-ratio: 16/9; border-radius: 6px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); }
.thumb .pg canvas, .thumb .pg img { width: 100%; height: 100%; display: block; }
.thumb[aria-current="true"] .pg { outline: 2.5px solid var(--navy-2); outline-offset: 2px; }
.thumb[aria-current="true"] .n { color: var(--navy); font-weight: 600; }
.stage { background: var(--panel); border: 1px solid var(--line); border-radius: var(--r); padding: 26px; display: flex; flex-direction: column; gap: 14px;
  box-shadow: var(--lift); min-width: 0; }
.stage .page { width: 100%; aspect-ratio: 16/9; border-radius: 8px; overflow: hidden; box-shadow: var(--page); background: var(--panel); }
.stage .page canvas { width: 100%; height: 100%; display: block; }
.stage .meta { display: flex; align-items: center; gap: 10px; font-size: 13px; color: var(--muted); }
.command { display: flex; gap: 8px; align-items: flex-end; border: 1px solid var(--line); border-radius: var(--r); padding: 8px; background: var(--canvas); }
.command:focus-within { border-color: var(--navy-2); box-shadow: 0 0 0 4px rgba(43,75,168,.12); background: var(--panel); }
.command textarea { border: 0; background: none; min-height: 44px; height: 44px; box-shadow: none; padding: 10px; resize: none; }
.command textarea:focus { box-shadow: none; }

/* a slide drawn from its content, when no picture of it can be made */
.slide { aspect-ratio: 16/9; background: var(--panel); padding: 9% 8%; overflow: hidden; display: flex; flex-direction: column; gap: 3%;
  text-align: start; width: 100%; container-type: inline-size; }
.slide.dark { background: var(--ink); color: #fff; }
.slide .k { font-size: 3.2cqi; color: var(--navy-2); }
.slide.dark .k { color: var(--sky); }
.slide .t { font-size: 6cqi; font-weight: 600; line-height: 1.35; }
.slide .s { font-size: 3.6cqi; color: var(--muted); }
.slide ul { margin: 0; padding-inline-start: 5cqi; font-size: 3.4cqi; line-height: 1.6; color: var(--muted); }
.slide.dark ul, .slide.dark .s { color: #C9D3EA; }

/* ---------- sign in ---------- */
.entry { display: grid; grid-template-columns: 1fr; min-height: 100vh; background: var(--panel); }
@media (min-width: 980px) { .entry { grid-template-columns: minmax(380px, 460px) 1fr; } }
.entry .form { padding: 48px clamp(24px, 5vw, 64px); display: flex; flex-direction: column; justify-content: center; gap: 18px; }
.entry .form .logo { padding: 0 0 28px; font-size: 20px; }
.entry .form .logo img { width: 44px; height: 44px; border-radius: 12px; }
.entry h1 { font-size: 34px; line-height: 1.3; font-weight: 600; }
.entry .lead { color: var(--muted); font-size: 15px; }
.entry .show { background: linear-gradient(180deg, #F3F6FC, #E9EEF8); display: flex; flex-direction: column; justify-content: center;
  padding: clamp(24px, 6vw, 80px); gap: 18px; position: relative; overflow: hidden; }
.entry .show .page { box-shadow: var(--page); border-radius: 10px; overflow: hidden; max-width: 760px; }
.entry .show .page.back { position: absolute; width: min(760px, 70%); inset-inline-end: -12%; top: 12%; transform: rotate(-4deg); opacity: .55; }
.entry .show .front { position: relative; max-width: 760px; }
.entry .show .caption { color: var(--muted); font-size: 13px; }
.signin { display: grid; gap: 10px; max-width: 360px; }
@media (max-width: 979px) { .entry .show { display: none; } }

/* ---------- questions ---------- */
.q { font-size: 20px; font-weight: 500; line-height: 1.6; margin: 4px 0 18px; max-width: 42ch; }
.qcount { font-size: 13px; color: var(--muted); }
.meter { height: 6px; background: var(--canvas); border-radius: 6px; overflow: hidden; margin: 6px 0 14px; max-width: 420px; }
.meter > i { display: block; height: 100%; background: var(--navy); border-radius: 6px; }
table.t { width: 100%; border-collapse: collapse; font-size: 13px; }
table.t td, table.t th { padding: 12px 10px; border-bottom: 1px solid var(--line); text-align: start; vertical-align: top; }
table.t tr:last-child td { border-bottom: 0; }
.item { display: flex; gap: 12px; align-items: flex-start; padding: 12px 0; border-bottom: 1px solid var(--line); }
.item:last-child { border-bottom: 0; }
.item .grow { min-width: 0; overflow-wrap: anywhere; }
details > summary { cursor: pointer; font-weight: 500; }
ol.story { padding-inline-start: 22px; margin: 0; }
ol.story > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
ol.story > li:last-child { border-bottom: 0; }
ol.story ul { margin: 6px 0 0; color: var(--muted); }
.list { list-style: none; padding: 0; margin: 0; }
.list li { padding: 10px 0; border-bottom: 1px solid var(--line); display: flex; gap: 10px; align-items: center; }
.list li:last-child { border-bottom: 0; }

#toast { position: fixed; inset-inline: 16px; bottom: 20px; margin: 0 auto; max-width: 520px; background: var(--ink); color: #fff;
  padding: 12px 18px; border-radius: 12px; z-index: 20; box-shadow: var(--page); }
.spinner { width: 22px; height: 22px; border-radius: 50%; border: 2.5px solid var(--line); border-top-color: var(--navy);
  animation: spin .9s linear infinite; display: inline-block; vertical-align: middle; }
@keyframes spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .spinner { animation: none; } }
.center { text-align: center; padding: 60px 20px; }

/* ================= the front page ================= */
.landing { background: var(--panel); }
.landing section, .lnav, .lfoot { padding-inline: clamp(16px, 5vw, 72px); }
.landing .band { padding-block: clamp(56px, 8vw, 96px); max-width: 1240px; margin: 0 auto; }
.landing .band > h2 { font-size: clamp(24px, 3vw, 34px); font-weight: 600; line-height: 1.35; margin: 0 0 12px; max-width: 24ch; }
.landing .band > p.muted { margin-bottom: 28px; }

.lnav { position: sticky; top: 0; z-index: 10; display: flex; align-items: center; gap: 28px; height: 68px;
  background: rgba(255,255,255,.92); backdrop-filter: saturate(1.4) blur(10px); border-bottom: 1px solid var(--line); }
.lnav .logo { padding: 0; }
.llinks { display: flex; gap: 24px; flex-direction: row; }
.llinks a { color: var(--muted); font-weight: 500; }
.llinks a:hover { color: var(--ink); text-decoration: none; }
.lact { margin-inline-start: auto; flex-wrap: nowrap; }
@media (max-width: 860px) { .llinks { display: none; } .lact .ghost, .lact .lang { display: none; } }

.hero { display: grid; grid-template-columns: 1fr; gap: 48px; align-items: center; max-width: 1320px; margin: 0 auto;
  padding-block: clamp(48px, 7vw, 96px) clamp(32px, 5vw, 64px); }
@media (min-width: 1040px) { .hero { grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); } }
.hero h1 { font-size: clamp(32px, 3.3vw, 48px); line-height: 1.28; font-weight: 700; letter-spacing: -0.015em; margin-bottom: 20px; max-width: 26ch; hyphens: manual; text-wrap: balance; }
.hero .lead { font-size: clamp(16px, 1.4vw, 19px); color: var(--ink); max-width: 46ch; margin-bottom: 28px; }
.hero .btn { min-height: 50px; padding-inline: 26px; font-size: 15px; }
.hero .row { gap: 18px; margin-bottom: 14px; }

/* the one moving moment: files go in, slides come out */
.hvisual { position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 14px; min-height: 0; }
.files { display: flex; flex-direction: row; flex-wrap: wrap; justify-content: center; gap: 10px; z-index: 2; order: 2; }
.flow { display: none; }
.fchip { display: flex; align-items: center; gap: 10px; background: var(--panel); border: 1px solid var(--line); border-radius: 12px;
  padding: 10px 14px; box-shadow: var(--lift); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  animation: fileIn .6s cubic-bezier(.2,.7,.2,1) both; animation-delay: calc(var(--i) * 120ms); }
.fchip .ext { font-size: 13px; font-weight: 600; color: var(--navy); background: var(--soft); border-radius: 6px; padding: 2px 7px; }
.flow { height: 2px; background: linear-gradient(90deg, var(--line), var(--navy-2), var(--line)); background-size: 200% 100%;
  animation: flow 1.6s linear .6s both; opacity: .8; }
.stack { position: relative; aspect-ratio: 16/11.5; }
.stack img { position: absolute; width: 92%; border-radius: 10px; box-shadow: var(--page); }
.stack .s2 { inset-inline-end: 0; top: 0; animation: fan2 .9s cubic-bezier(.2,.7,.2,1) .7s both; }
.stack .s1 { inset-inline-start: 0; bottom: 0; animation: fan1 .9s cubic-bezier(.2,.7,.2,1) .9s both; }
@keyframes fileIn { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@keyframes flow { from { background-position: 100% 0; opacity: 0; } to { background-position: 0 0; opacity: .8; } }
@keyframes fan1 { from { opacity: 0; transform: translateY(18px) scale(.97); } to { opacity: 1; transform: none; } }
@keyframes fan2 { from { opacity: 0; transform: translateY(18px) rotate(0); } to { opacity: 1; transform: rotate(2.5deg); } }
@media (prefers-reduced-motion: reduce) { .fchip, .flow, .stack img { animation: none; } .stack .s2 { transform: rotate(2.5deg); } }
@media (max-width: 640px) { .hvisual { grid-template-columns: 1fr; min-height: 0; gap: 16px; } .flow { display: none; } .files { flex-direction: row; flex-wrap: wrap; } }

.facts { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; max-width: 1240px; margin: 0 auto; border-block: 1px solid var(--line); }
.facts > div { padding: 26px 24px; border-inline-start: 1px solid var(--line); }
.facts > div:first-child { border-inline-start: 0; }
.facts b { display: block; font-size: 20px; font-weight: 600; }
.facts span { color: var(--muted); font-size: 13px; }
@media (max-width: 760px) { .facts { grid-template-columns: 1fr; } .facts > div { border-inline-start: 0; border-top: 1px solid var(--line); } .facts > div:first-child { border-top: 0; } }

.how { list-style: none; padding: 0; margin: 36px 0 0; display: grid; gap: 22px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.how li { background: var(--canvas); border-radius: var(--r); padding: 26px; }
.how .num { display: grid; place-items: center; width: 34px; height: 34px; border-radius: 10px; background: var(--navy); color: #fff; font-weight: 600; margin-bottom: 18px; }
.how h3 { font-size: 15px; margin-bottom: 8px; }
.how p { color: var(--muted); margin: 0; }

.show { max-width: none !important; background: var(--canvas); }
.show > h2, .show > p { max-width: 1240px; margin-inline: auto; }
.gallery { display: flex; gap: 22px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 8px 4px 22px; max-width: 1400px; margin: 0 auto; }
.gallery img { width: min(640px, 82vw); flex: none; border-radius: 10px; box-shadow: var(--page); scroll-snap-align: start; background: #fff; }

.feats { display: grid; gap: 34px 40px; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); margin-top: 36px; }
.feat h3 { font-size: 15px; margin: 14px 0 6px; }
.feat p { color: var(--ink); margin: 0; }
.ficon { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; background: var(--soft); }
.ficon svg { width: 22px; height: 22px; fill: none; stroke: var(--navy); stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }

.who ul { list-style: none; padding: 0; margin: 24px 0 0; display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); }
.who li { border: 1px solid var(--line); border-radius: var(--r); padding: 18px 20px; font-weight: 500; }

.plans { display: grid; gap: 20px; grid-template-columns: repeat(auto-fit, minmax(250px, 1fr)); margin-top: 36px; align-items: stretch; }
.plan-card { border: 1px solid var(--line); border-radius: 18px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.plan-card.main { border: 2px solid var(--navy); box-shadow: var(--page); }
.plan-card h3 { font-size: 15px; margin: 0; }
.price b { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.price span { color: var(--muted); margin-inline-start: 8px; }
.plan-card ul { list-style: none; padding: 0; margin: 0 0 8px; flex: 1; }
.plan-card li { padding: 7px 0; padding-inline-start: 26px; position: relative; }
.plan-card li::before { content: ""; display: inline-block; width: 15px; height: 15px; background: var(--good); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; vertical-align: -2px; position: absolute; inset-inline-start: 0; top: 6px; }

.faq { margin-top: 26px; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--line); padding: 18px 0; }
.faq summary { font-size: 15px; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-size: 20px; color: var(--muted); line-height: 1; }
.faq details[open] summary::after { content: "−"; }
.faq p { color: var(--muted); margin: 12px 0 0; }

.endcta { background: var(--ink); color: #fff; text-align: center; padding-block: clamp(56px, 8vw, 96px); }
.endcta h2 { font-size: clamp(26px, 3.4vw, 40px); font-weight: 600; margin: 0 0 12px; }
.endcta p { color: #C9D3EA; margin: 0 auto 28px; }
.btn.light { background: #fff; color: var(--ink); min-height: 50px; padding-inline: 28px; font-size: 15px; }
.btn.light:hover { background: var(--soft); }
.lfoot { display: flex; align-items: center; gap: 22px; flex-wrap: wrap; padding-block: 28px; border-top: 1px solid var(--line); font-size: 13px; }
.lfoot .logo { padding: 0; font-size: 15px; }
.lfoot .logo img { border-radius: 7px; }
.lnav .logo span { display: inline; }

/* ---- legal and support pages ---- */
.legal { max-width: 820px; margin: 0 auto; padding: 48px 24px 96px; }
.legal h1 { font-size: 32px; margin-bottom: 6px; }
.legal h2 { font-size: 20px; margin: 34px 0 10px; }
.legal p, .legal li { color: #2C3858; max-width: none; }
.legal ul { padding-inline-start: 22px; }
.legal .updated { color: var(--muted); font-size: 13px; margin-bottom: 26px; }
.legal hr { border: 0; border-top: 1px solid var(--line); margin: 48px 0; }
.legal-top { display: flex; align-items: center; gap: 18px; padding: 14px 24px; border-bottom: 1px solid var(--line); background: var(--panel); }
.legal-top .logo { padding: 0; font-size: 20px; }
.legal-top nav { flex-direction: row; gap: 18px; margin-inline-start: auto; font-size: 13px; }
.legal-body { background: var(--panel); min-height: 100vh; }

/* step guide and the fixed primary action */
.guide { background: var(--soft); border: 0; border-radius: var(--r-s);
  padding: 16px 20px; margin: 0 0 24px; max-width: 760px; }
.guide-n { font-size: 13px; color: var(--muted); letter-spacing: .02em; }
.guide-t { font-size: 20px; font-weight: 600; margin: 4px 0 2px; }
.guide-d { margin: 0 0 8px; color: var(--ink); line-height: 1.6; }
.guide-x { font-size: 13px; color: var(--muted); }
.dock { position: sticky; bottom: 0; z-index: 20; margin: 24px -16px -16px; padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: color-mix(in srgb, var(--canvas) 92%, transparent); backdrop-filter: blur(8px); border-top: 1px solid var(--line); }
.dock-in { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; max-width: 760px; }
.btn.big { font-size: 15px; padding: 14px 28px; min-height: 52px; font-weight: 600; }
@media (max-width: 640px) { .dock-in .btn.big { flex: 1 1 100%; } }

.stages { list-style: none; padding: 0; margin: 12px auto 0; max-width: 360px; text-align: start; }
.stages li { padding: 8px 0 8px 0; color: var(--muted); border-bottom: 1px solid var(--line); }
.stages li.on { color: var(--ink); font-weight: 600; }
.stages li.done { color: var(--ink); }
.stages li.done::before { content: ""; display: inline-block; width: 14px; height: 14px; background: var(--navy); -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M5 12.5l4.5 4.5L19 7.5'/%3E%3C/svg%3E") center/contain no-repeat; vertical-align: -2px; margin-inline-end: 8px; }
.stages li.on::before { content: "● "; color: var(--navy); }
dialog.sheet { border: 0; border-radius: var(--r); padding: 24px; max-width: 640px; width: calc(100% - 32px); max-height: 85vh; overflow: auto; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
dialog.sheet::backdrop { background: rgba(15,23,42,.45); }
.rh { padding: 12px 0; border-bottom: 1px solid var(--line); }

.story.edit input[type=text] { width: 100%; min-width: 0; padding: 8px 10px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); font: inherit; color: var(--ink); }
.story.edit input.small { font-size: 13px; padding: 6px 10px; margin-top: 6px; }
.story.edit > li { padding: 12px 0; border-bottom: 1px solid var(--line); }
.story.edit .link:disabled { opacity: .3; cursor: default; }
.review { max-width: 820px; margin: 0 auto; padding: 24px 16px 0; }
.rv-pages { display: grid; gap: 14px; margin: 18px 0; }
.rv-page { width: 100%; height: auto; border: 1px solid var(--line); border-radius: var(--r-s); box-shadow: var(--lift); background: #fff; }
.review select, .review textarea, .review input[type=text] { width: 100%; font: inherit; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-s); background: var(--panel); color: var(--ink); }

/* v60 polish: calmer motion, better Arabic headings, readable muted text */
@media (prefers-reduced-motion: reduce){*{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}
h1,h2{text-wrap:balance}
:lang(ar) h1,:lang(ar) h2,html[dir="rtl"] h1,html[dir="rtl"] h2{letter-spacing:0}
@supports (height:100dvh){.shell{min-height:100dvh}}
.legal .tldr { background: var(--panel); border: 1px solid var(--line); border-inline-start: 4px solid var(--accent, #2A4DB5); border-radius: 12px; padding: 16px 18px; margin: 0 0 8px; line-height: 1.8; }

/* voice dictation */
.mic-wrap { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: 8px 0 4px; }
.mic { width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: var(--panel); color: var(--navy); display: grid; place-items: center; cursor: pointer; flex: none; transition: background .15s, border-color .15s; }
.mic svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; }
.mic:hover { border-color: var(--navy); }
.mic-lang { min-width: 44px; height: 32px; padding: 0 10px; border-radius: 16px; border: 1px solid var(--line); background: var(--panel); color: var(--navy); font: 600 13px/1 inherit; font-family: inherit; cursor: pointer; flex: none; }
.mic-lang:hover { border-color: var(--navy); }
.mic.on { background: #C62828; border-color: #C62828; color: #fff; animation: micpulse 1.4s ease-out infinite; }
@keyframes micpulse { 0% { box-shadow: 0 0 0 0 rgba(198,40,40,.45); } 100% { box-shadow: 0 0 0 16px rgba(198,40,40,0); } }
.mic-note { flex: 1 1 220px; line-height: 1.6; }
@media (prefers-reduced-motion: reduce) { .mic.on { animation: none; } }

.chips.examples .chip, .examples .chip { border: 1px solid var(--line); background: var(--panel); color: var(--ink); }

.qsecond { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 14px; }
.qsecond .btn { padding: 9px 16px; min-height: 40px; font-size: 15px; }
@media (max-width: 640px) { .guide.in-interview { display: none; } textarea { min-height: 96px; } }

/* ready page: secondary exports tucked into one menu */
.more { position: relative; }
.more > summary { list-style: none; cursor: pointer; }
.more > summary::-webkit-details-marker { display: none; }
.more > summary::after { content: ""; display: inline-block; width: 14px; height: 14px; background: currentColor; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") center/contain no-repeat; vertical-align: -2px; margin-inline-start: 8px; transition: transform .2s cubic-bezier(.23,1,.32,1); }
.more[open] > summary::after { transform: rotate(180deg); }
.more-menu { position: absolute; z-index: 30; inset-inline-start: 0; top: calc(100% + 6px); min-width: 250px; display: flex; flex-direction: column; gap: 4px;
  background: var(--panel); border: 1px solid var(--line); border-radius: var(--r-s); padding: 6px; box-shadow: 0 14px 40px rgba(15,28,63,.16); }
.more-menu .btn { justify-content: flex-start; text-align: start; border: 0; width: 100%; }
/* slide order editor */
.story.edit { list-style: none; padding: 0; }
.srow { flex-wrap: nowrap; align-items: center; gap: 8px; }
.srow input { flex: 1 1 auto; min-width: 0; }
.sctl { display: inline-flex; gap: 6px; align-items: center; flex: none; }
@media (max-width: 640px) {
  .srow { flex-wrap: wrap; }
  .srow input { flex-basis: calc(100% - 30px); }
  .sctl { margin-inline-start: 26px; }
  .item { flex-wrap: wrap; }
  .item .grow { flex: 1 1 100%; }
  .more-menu { position: static; box-shadow: none; margin-top: 6px; }
}

/* voice level */
.wave { display: inline-flex; align-items: center; gap: 3px; height: 26px; }
.wave i { width: 4px; height: 26px; border-radius: 2px; background: #C62828; transform: scaleY(.2); transform-origin: center; transition: transform .08s linear; }
.wave.idle i { animation: wv 1s ease-in-out infinite; }
.wave.idle i:nth-child(2) { animation-delay: .1s } .wave.idle i:nth-child(3) { animation-delay: .2s } .wave.idle i:nth-child(4) { animation-delay: .3s }
.wave.idle i:nth-child(5) { animation-delay: .2s } .wave.idle i:nth-child(6) { animation-delay: .1s }
@keyframes wv { 0%, 100% { transform: scaleY(.2); } 50% { transform: scaleY(.9); } }
/* build wait: slides being assembled */
.building .clock { display: block; font-variant-numeric: tabular-nums; }
.forge { position: relative; height: 150px; width: 250px; margin: 6px auto 0; }
.fs { position: absolute; inset-inline-start: 30px; top: 18px; width: 190px; height: 112px; border-radius: 10px; background: var(--panel); border: 1px solid var(--line);
  box-shadow: 0 10px 30px rgba(15,28,63,.12); padding: 14px; display: flex; flex-direction: column; gap: 8px; animation: deal 3.6s ease-in-out infinite; }
.fs.f2 { animation-delay: 1.2s; } .fs.f3 { animation-delay: 2.4s; }
.fs i { display: block; height: 7px; border-radius: 4px; width: 100%; background: linear-gradient(90deg, var(--line) 0%, #E8EEFB 40%, var(--line) 80%); background-size: 200% 100%; animation: shimmer 1.4s linear infinite; }
.fs i.ft { height: 11px; width: 70%; background: linear-gradient(90deg, #C7D4F2, #E4EBFA, #C7D4F2); background-size: 200% 100%; }
.fs i.short { width: 55%; }
.fs b { position: absolute; inset-inline-end: 14px; bottom: 14px; width: 46px; height: 46px; border-radius: 50%; border: 6px solid var(--sky); border-top-color: var(--navy); }
.fs b.chart { border: 0; border-radius: 3px; width: 54px; height: 40px; background: linear-gradient(to top, var(--navy) 0 60%, transparent 60%) 0 100%/10px 100% no-repeat,
  linear-gradient(to top, var(--sky) 0 85%, transparent 85%) 16px 100%/10px 100% no-repeat, linear-gradient(to top, var(--navy) 0 40%, transparent 40%) 32px 100%/10px 100% no-repeat; }
@keyframes deal { 0% { opacity: 0; transform: translate(40px, 12px) rotate(6deg) scale(.94); } 12%, 70% { opacity: 1; transform: none; } 88%, 100% { opacity: 0; transform: translate(-40px, -6px) rotate(-5deg) scale(.96); } }
@keyframes shimmer { to { background-position: -200% 0; } }
@media (prefers-reduced-motion: reduce) { .fs { animation: none; opacity: 1; } .fs.f2, .fs.f3 { display: none; } .fs i { animation: none; } .wave.idle i { animation: none; } }

/* Cornell guideline 5 (feedback): a running action keeps its label and shows a spinner */
.btn.is-busy { position: relative; cursor: progress; opacity: .85; }
.btn.is-busy::after { content: ""; display: inline-block; width: 14px; height: 14px; margin-inline-start: 10px; vertical-align: -2px;
  border-radius: 50%; border: 2px solid currentColor; border-top-color: transparent; animation: spin .8s linear infinite; }
img[width][height] { height: auto; }
.wave[hidden], .mic-note[hidden] { display: none; }

/* front page: start the deck right here */
.start { display: grid; gap: 10px; max-width: 560px; margin: 0 0 14px; }
.start-l { font-weight: 600; }
.start .start-in { min-height: 0; resize: none; font-size: 16px; line-height: 1.6; padding: 14px 16px; }
.start .btn { justify-self: start; }
@media (max-width: 640px) { .start .btn { justify-self: stretch; } }
.carry { background: var(--soft); border-radius: var(--r-s); padding: 12px 16px; margin: 0 0 18px; }
.carry p { margin: 4px 0 0; font-weight: 500; }
/* features and trust: a plain two-column list, not a grid of icon cards */
.flist { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 30px 56px; margin: 36px 0 0; }
.flist dt { font-weight: 700; font-size: 20px; margin: 0 0 6px; }
.flist dd { margin: 0; color: var(--ink); line-height: 1.65; max-width: 52ch; }
/* motion (Emil Kowalski audit): press feedback, menus grow from their trigger, strong ease-out, under 300ms */
:root { --ease-out: cubic-bezier(.23, 1, .32, 1); }
.btn, .chip, .mic { transition: transform 160ms var(--ease-out), background-color .15s ease, border-color .15s ease; }
.btn:active:not(:disabled), .chip:active, .mic:active { transform: scale(.97); }
.more[open] .more-menu { animation: popIn 180ms var(--ease-out); transform-origin: top left; }
[dir="rtl"] .more[open] .more-menu { transform-origin: top right; }
@keyframes popIn { from { opacity: 0; transform: translateY(-4px) scale(.97); } to { opacity: 1; transform: none; } }
#toast:not([hidden]) { animation: toastIn 220ms var(--ease-out); }
@keyframes toastIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }
.srow .sctl svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2; }
@media (max-width: 640px) { .dup { display: none; } }   /* the step guide already says it on phones */

/* ---------- the hologram on the front page ----------
   An upright slide faces the visitor. Behind it, the layers Sharihah builds it from (title, figures, cards, brand band)
   slide out one after another into the depth, glowing, then slide back in behind the slide. */
.holo { --d: 1; position: relative; aspect-ratio: 16/9; perspective: 1500px; perspective-origin: 50% 45%;
  overflow: hidden; -webkit-mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); mask-image: linear-gradient(90deg, transparent, #000 4%, #000 96%, transparent); }
[dir="rtl"] .holo { --d: -1; }
.holo::before { content: ""; position: absolute; inset: 8% 0 12%; border-radius: 50%; pointer-events: none;
  background: radial-gradient(closest-side, rgba(59,130,246,.22), transparent 72%); animation: holoGlow 7s ease-in-out infinite; }
.holo-scene { position: absolute; inset-inline: 27%; top: 52%; translate: 0 -50%; aspect-ratio: 16/9; transform-style: preserve-3d;
  transform: rotateY(-6deg) rotateX(3deg); animation: holoTurn 12s ease-in-out infinite; }
.hl { position: absolute; inset: 0; border-radius: 12px; transform-style: preserve-3d; opacity: 0;
  animation: holoOut 7s cubic-bezier(.65,0,.35,1) infinite; animation-delay: calc(var(--k, 0) * 90ms); }
.hl.l0 { --k: 0; opacity: 1; animation: none; z-index: 5; overflow: hidden; box-shadow: 0 30px 60px -22px rgba(15,28,63,.5), 0 0 0 1px rgba(15,28,63,.08); }
.hl.l0 img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hl.l1, .hl.l2, .hl.l3, .hl.l4 { overflow: hidden; border-radius: 12px; box-shadow: 0 24px 50px -20px rgba(15,28,63,.5), 0 0 0 1px rgba(96,165,250,.55), 0 0 36px rgba(59,130,246,.35); }
.hl.l1 img, .hl.l2 img, .hl.l3 img, .hl.l4 img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* two slides each side, the far ones deeper and a little turned in toward the front slide */
.hl.l1 { --k: 1; --x: -84%; --y: 5%;  --z: -40px;  --r: 14deg;  z-index: 4; }
.hl.l2 { --k: 2; --x: 84%;  --y: -5%; --z: -40px;  --r: -14deg; z-index: 4; }
.hl.l3 { --k: 3; --x: -150%; --y: -6%; --z: -80px; --r: 22deg;  z-index: 3; }
.hl.l4 { --k: 4; --x: 150%;  --y: 6%;  --z: -80px; --r: -22deg; z-index: 3; }
.holo-base { position: absolute; left: 10%; right: 10%; bottom: 3%; height: 9%; border-radius: 50%;
  background: radial-gradient(closest-side, rgba(59,130,246,.38), transparent); filter: blur(7px); animation: holoBase 7s ease-in-out infinite; }
/* hidden behind the slide → glide out into the depth and sideways → hold → glide back behind it */
@keyframes holoOut { 0%, 12% { transform: translate3d(0, 0, -2px); opacity: 0; }
  38%, 62% { transform: translate3d(var(--x), var(--y), var(--z)) rotateY(var(--r)); opacity: 1; }
  88%, 100% { transform: translate3d(0, 0, -2px); opacity: 0; } }
@keyframes holoBase { 0%, 12%, 88%, 100% { opacity: .45; transform: scaleX(.85); } 38%, 62% { opacity: 1; transform: scaleX(1.08); } }
@keyframes holoGlow { 0%, 12%, 88%, 100% { opacity: .5; } 38%, 62% { opacity: 1; } }
@keyframes holoTurn { 0%, 100% { transform: rotateY(-7deg) rotateX(3deg); } 50% { transform: rotateY(7deg) rotateX(2deg); } }
.holo:hover .hl, .holo:hover .holo-scene, .holo:hover .holo-base, .holo:hover::before { animation-play-state: paused; }
@media (prefers-reduced-motion: reduce) {
  .holo-scene, .hl, .holo-base, .holo::before { animation: none !important; }
  .hl { transform: translate3d(var(--x, 0%), var(--y, 0%), var(--z, 0px)) rotateY(var(--r, 0deg)); opacity: 1; }
}
@media (max-width: 640px) { .holo { aspect-ratio: 16/11; margin-top: 4px; } .holo-scene { inset-inline: 26%; } }

/* every click answers at once while the next page loads */
body::before { content: ""; position: fixed; inset: 0 0 auto 0; height: 3px; z-index: 50; pointer-events: none; opacity: 0;
  background: linear-gradient(90deg, transparent, var(--navy-2), transparent); background-size: 40% 100%; background-repeat: no-repeat; }
body.navigating::before { opacity: 1; animation: navBar 1s linear infinite; }
@keyframes navBar { from { background-position: -40% 0; } to { background-position: 140% 0; } }
body.navigating #view { opacity: .55; transition: opacity .12s ease-out .12s; pointer-events: none; }
#view { transition: opacity .12s ease-out; }
@media (prefers-reduced-motion: reduce) { body.navigating::before { animation: none; background-size: 100% 100%; } }

/* admin */
.narrow.wide { max-width: 980px; }
.adm-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)); gap: 14px; margin: 0; }
.adm-facts dt { font-size: 13px; color: var(--muted); }
.adm-facts dd { margin: 2px 0 0; font-size: 28px; font-weight: 600; color: var(--ink); }
.adm-bars { display: flex; align-items: flex-end; gap: 6px; height: 110px; margin-top: 10px; }
.adm-bars > div { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 4px; }
.adm-bars i { display: block; width: 100%; min-height: 3px; background: #3B5BDB; border-radius: 4px 4px 0 0; }
.adm-bars span { font-size: 13px; color: var(--muted); }
.adm-act { white-space: nowrap; }
.adm-act .link { margin-inline-end: 12px; }
@media (max-width: 720px) { .adm-act { white-space: normal; } .adm-bars span { display: none; } }
.link.danger { color: var(--bad); }