/* Page CSS for فصلي المبدع: the RTL corrections to the kit and the drawn windows of the app. */

/* Looks: same values as src/styles.css. page.js and the head script set data-look and data-mode. */
:root[data-look="stone"] { --p-bg: #eeecea; --p-surface: #e4e1dd; --p-ink: #333231; --p-muted: #625f5b; --p-accent: #5c6b54; --p-accent-ink: #ffffff; --p-action: #5c6b54; --p-action-ink: #ffffff; --p-inv-bg: #333231; --w-bg: #fbfaf8; --w-card: #fff; --fx-rot: 0deg; }
:root[data-look="stone"][data-mode="dark"], :root:not([data-look])[data-mode="dark"] { --p-bg: #242322; --p-surface: #2b2a29; --p-ink: #eeecea; --p-muted: #adaba9; --p-accent: #a9b89f; --p-accent-ink: #24281f; --p-action: #a9b89f; --p-action-ink: #24281f; --p-inv-bg: #1c1b1a; --w-bg: #2e2d2c; --w-card: #2e2d2c; --fx-rot: 0deg; }
:root[data-look="sea"] { --p-bg: #e8eef0; --p-surface: #d9e3e7; --p-ink: #26343a; --p-muted: #55666d; --p-accent: #2f6f86; --p-accent-ink: #ffffff; --p-action: #2f6f86; --p-action-ink: #ffffff; --p-inv-bg: #26343a; --w-bg: #fbfcfc; --w-card: #fff; --fx-rot: 95deg; }
:root[data-look="sea"][data-mode="dark"] { --p-bg: #1d2629; --p-surface: #222c30; --p-ink: #e8eef0; --p-muted: #a4b4ba; --p-accent: #86c1d6; --p-accent-ink: #102329; --p-action: #86c1d6; --p-action-ink: #102329; --p-inv-bg: #151c1f; --w-bg: #263235; --w-card: #263235; --fx-rot: 95deg; }
:root[data-look="rose"] { --p-bg: #f3ebea; --p-surface: #ecdedc; --p-ink: #3b2d2e; --p-muted: #6d5a5b; --p-accent: #a8505f; --p-accent-ink: #ffffff; --p-action: #a8505f; --p-action-ink: #ffffff; --p-inv-bg: #3b2d2e; --w-bg: #fdfafa; --w-card: #fff; --fx-rot: -105deg; }
:root[data-look="rose"][data-mode="dark"] { --p-bg: #2a2122; --p-surface: #2f2526; --p-ink: #f3ebea; --p-muted: #bda9aa; --p-accent: #e3a0aa; --p-accent-ink: #33161b; --p-action: #e3a0aa; --p-action-ink: #33161b; --p-inv-bg: #1f1819; --w-bg: #352a2b; --w-card: #352a2b; --fx-rot: -105deg; }
:root[data-look="sand"] { --p-bg: #f2ece1; --p-surface: #e9dfcd; --p-ink: #3a3026; --p-muted: #6b5d4c; --p-accent: #a8612f; --p-accent-ink: #ffffff; --p-action: #a8612f; --p-action-ink: #ffffff; --p-inv-bg: #3a3026; --w-bg: #fdfbf6; --w-card: #fff; --fx-rot: -75deg; }
:root[data-look="sand"][data-mode="dark"] { --p-bg: #28221b; --p-surface: #2d261e; --p-ink: #f2ece1; --p-muted: #bbae9b; --p-accent: #e0a877; --p-accent-ink: #30190a; --p-action: #e0a877; --p-action-ink: #30190a; --p-inv-bg: #1e1913; --w-bg: #332c23; --w-card: #332c23; --fx-rot: -75deg; }
:root[data-look="board"] { --p-bg: #eaf1ed; --p-surface: #dbe7e1; --p-ink: #15332d; --p-muted: #48635c; --p-accent: #1e5b50; --p-accent-ink: #ffffff; --p-action: #1e5b50; --p-action-ink: #ffffff; --p-inv-bg: #174a41; --w-bg: #fbfdfc; --w-card: #fff; --fx-rot: 65deg; }
:root[data-look="board"][data-mode="dark"] { --p-bg: #10231f; --p-surface: #142823; --p-ink: #e8f3ee; --p-muted: #a5c0b7; --p-accent: #6fc5ae; --p-accent-ink: #0c211c; --p-action: #6fc5ae; --p-action-ink: #0c211c; --p-inv-bg: #0c1c19; --w-bg: #182f2a; --w-card: #182f2a; --fx-rot: 65deg; }
:root { --w-bg: #fbfaf8; --w-card: #fff; --fx-rot: 0deg; --fx-dim: 1; --w-gain: #3d4b36; --w-loss: #7c2f26; }
:root[data-mode="dark"] { --fx-dim: .45; color-scheme: dark; --w-gain: #a9c49c; --w-loss: #eba79d; }
html[data-ground="sage"] { --ground-bg: color-mix(in oklab, var(--p-accent) 26%, var(--p-bg)); --ground-surface: color-mix(in oklab, var(--p-accent) 15%, var(--p-bg)); --ground-ink: var(--p-ink); --ground-muted: var(--p-muted); --ground-accent: var(--p-accent); }
[data-fx] { background-color: var(--ground-bg) !important; }
[data-fx] canvas { filter: hue-rotate(var(--fx-rot)) brightness(var(--fx-dim)); transition: filter 400ms ease; }
body, .nav, .fs-win, .fs-card, section { transition: background-color 300ms ease, color 300ms ease, border-color 300ms ease; }

/* Arabic: letters join, so no tracking anywhere; taller lines for its ascenders and descenders. */
html[dir="rtl"] body { font-family: var(--font-text); }
html[dir="rtl"] :is(h1, h2, h3, h4, .btn, .nav__link, .nav__logo, .t-card, .t-label) { letter-spacing: 0; }
html[dir="rtl"] h1 { line-height: 1.22; }
html[dir="rtl"] h2 { line-height: 1.3; }
html[dir="rtl"] .hero__text > .hero__kicker { font-weight: 500; }

/* RTL: the arrow points the way the text reads. */
html[dir="rtl"] .m-arrow, html[dir="rtl"] .btn::after { scale: -1 1; }

/* RTL: the moment's rail and step rows, written with left and right in the kit. */
html[dir="rtl"] [data-moment="pinned-chapters"] .mo-pc__step { padding-left: 0; padding-right: var(--s-5); border-left: 0; border-right: 2px solid var(--line); }
html[dir="rtl"] [data-moment="pinned-chapters"].is-live .mo-pc__step { border-right-color: var(--line); transition: border-color 300ms ease; }
html[dir="rtl"] [data-moment="pinned-chapters"].is-live .mo-pc__step.is-on { border-right-color: var(--accent); }
@media (min-width: 640px) {
  html[dir="rtl"] [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__step { border-right: 0; padding-right: 0; }
}

main [data-moment="pinned-chapters"][data-moment].is-live > .mo-pc__grid { column-gap: calc((100% - 264px) / 12 + 48px); }

html[dir="rtl"] :is(.wrap.grid > .span-5, .wrap > .grid) > h2:first-child { text-box: trim-start cap alphabetic; }

/* the small helpers */
.fs-para { margin: 0; max-width: none; align-self: start; }
.fs-gap { margin-top: var(--s-5); }
.fs-facts { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: grid; gap: var(--s-2); }
.fs-facts li { font-weight: 500; }

/* the windows */
.fs-win { --u-bg: var(--w-bg); --u-ink: var(--p-ink); --u-accent: var(--p-accent); font-family: var(--font-text); font-size: 15px; color: var(--p-ink);
  background: var(--u-bg); border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); border-radius: 12px; overflow: hidden; text-align: right; }
.fs-bar { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 52px; padding: 8px 20px; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 9%, transparent); }
.fs-bar__title { font-family: var(--font-display); font-weight: 500; font-size: 16px; }
.fs-bar__meta { font-size: 13px; color: var(--p-muted); white-space: nowrap; }
.fs-tools { display: flex; flex-wrap: wrap; gap: 8px; }
.fs-btn { display: inline-flex; align-items: center; min-height: 36px; padding: 0 14px; border: 1px solid color-mix(in oklab, var(--p-ink) 18%, transparent); border-radius: 8px; font-weight: 500; font-size: 14px; white-space: nowrap; }
.fs-btn--on { background: var(--p-accent); border-color: var(--p-accent); color: #fff; }
.fs-state { font-size: 13px; font-weight: 500; line-height: 24px; padding: 0 8px; border-radius: 6px; justify-self: start; white-space: nowrap; }
.fs-state--in { background: #e4ebe0; color: #3d4b36; }
.fs-state--late { background: #f3e8cf; color: #6b4f12; }
.fs-state--out { background: #f3dedb; color: #7c2f26; }
.fs-rows { list-style: none; margin: 0; padding: 0; }
.fs-rows li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 48px; padding: 6px 20px; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 7%, transparent); }
.fs-rows li:last-child { border-bottom: 0; }
.fs-rows b { font-weight: 500; }
.fs-rows li.is-on { background: color-mix(in oklab, var(--p-accent) 10%, var(--w-bg)); }
.fs-rows .fs-add b { color: var(--p-accent); }
.fs-gain { color: var(--w-gain); font-weight: 500; }
.fs-loss { color: var(--w-loss); font-weight: 500; }
.fs-sub { margin: 0 0 8px; font-size: 13px; font-weight: 500; color: var(--p-muted); }

/* the hero: the daily screen, cut by the frame's foot */
.hero__media[data-fx] { display: flex; align-items: stretch; justify-content: center; padding: 24px 24px 0; }
.fs-today { position: relative; z-index: 1; width: 100%; border-radius: 12px; }
.fs-lesson { display: flex; align-items: baseline; gap: 12px; padding: 14px 20px 0; }
.fs-lesson span { font-size: 13px; color: var(--p-muted); }
.fs-lesson b { font-family: var(--font-display); font-weight: 500; font-size: 18px; }
.fs-today .fs-tools { padding: 8px 20px 12px; }
.fs-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px 12px; padding: 0 20px 16px; }
.fs-card { display: grid; gap: 10px; padding: 12px; background: var(--w-card); border: 1px solid color-mix(in oklab, var(--p-ink) 11%, transparent); border-radius: 12px; }
.fs-card__top { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 36px; }
.fs-card b { font-weight: 500; font-size: 15px; white-space: nowrap; }
.fs-star { position: relative; display: grid; place-items: center; width: 36px; height: 36px; flex: none; }
.fs-star svg { position: absolute; inset: 0; fill: var(--fs-gold); }
.fs-star em { position: relative; font-family: var(--font-display); font-style: normal; font-weight: 500; font-size: 13px; color: #33240a; }
.fs-card .fs-seg { display: grid; grid-template-columns: repeat(3, 1fr); text-align: center; }
.fs-plus { display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 36px; border: 1px solid var(--fs-gold); border-radius: 8px; background: #f3e8cf; color: #33240a; font-weight: 500; font-size: 14px; }
.fs-plus svg { width: 14px; height: 14px; fill: currentColor; }

/* the demo windows answer the teacher */
.fs-win button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.fs-win .fs-btn, .fs-win .fs-plus { transition: transform 110ms ease, background-color 170ms ease, border-color 170ms ease; }
.fs-win .fs-btn { border: 1px solid color-mix(in oklab, var(--p-ink) 18%, transparent); font-size: 14px; font-weight: 500; }
.fs-win .fs-btn:hover { border-color: var(--p-ink); }
.fs-win .fs-btn:active, .fs-win .fs-plus:active { transform: scale(.96); }
.fs-win .fs-btn--on { background: var(--p-accent); border-color: var(--p-accent); color: var(--p-accent-ink); }
.fs-win .fs-btn--on:hover { background: color-mix(in oklab, var(--p-accent) 88%, var(--p-ink)); border-color: transparent; }
.fs-win .fs-plus { display: flex; border: 1px solid var(--fs-gold); background: #f3e8cf; color: #33240a; font-size: 14px; font-weight: 500; }
.fs-win .fs-plus:hover:not(:disabled) { background: #eedcb2; }
.fs-win .fs-plus:disabled { opacity: .4; cursor: not-allowed; }
.fs-win { --fs-gold: #dcae4d; }
.fs-today { position: relative; }
.fs-hint { animation: fs-hint 1.4s ease-in-out 3; }
@keyframes fs-hint { 50% { box-shadow: 0 0 0 5px color-mix(in oklab, var(--fs-gold) 45%, transparent); } }
.fs-star.is-pop { animation: fs-pop 320ms cubic-bezier(.16,1,.3,1); }
@keyframes fs-pop { from { transform: scale(1.5) rotate(-14deg); } }
.fs-fly { position: fixed; z-index: 50; width: 18px; height: 18px; fill: #dcae4d; pointer-events: none; }
.fs-toast { position: absolute; inset: auto 16px 16px; padding: 10px 14px; border-radius: 10px; background: var(--p-inv-bg); color: var(--p-inv-ink); font-size: 14px; font-weight: 500; opacity: 0; transform: translateY(8px); transition: opacity 170ms ease, transform 170ms ease; pointer-events: none; z-index: 2; }
.fs-toast.is-on { opacity: 1; transform: none; }
.fs-over { position: absolute; inset: 0; z-index: 3; display: grid; place-content: center; justify-items: center; gap: 14px; padding: 24px; text-align: center; background: var(--p-inv-bg); color: var(--p-inv-ink); animation: fs-over 240ms ease; }
.fs-over[hidden] { display: none; }
@keyframes fs-over { from { opacity: 0; } }
.fs-over__cap { font-size: 15px; opacity: .8; }
.fs-over strong { font-family: var(--font-display); font-weight: 500; font-size: clamp(30px, 3.4vw, 46px); line-height: 1.3; min-height: 1.3em; }
.fs-over strong.is-spin { opacity: .65; }
.fs-over strong.is-done { animation: fs-write 520ms cubic-bezier(.16,1,.3,1) both; }
@keyframes fs-write { from { clip-path: inset(-.3em 0 -.3em 100%); } to { clip-path: inset(-.3em 0 -.3em 0); } }
.fs-win .fs-btn--inv { border-color: color-mix(in oklab, var(--p-inv-ink) 40%, transparent); color: var(--p-inv-ink); }
.fs-win .fs-over .fs-btn--on { background: var(--p-inv-ink); border-color: var(--p-inv-ink); color: var(--p-inv-bg); }
.fs-card.is-wave { animation: fs-wave 420ms ease both; animation-delay: calc(var(--i) * 45ms); }
@keyframes fs-wave { 40% { background: color-mix(in oklab, var(--p-accent) 16%, var(--w-card)); } }
.fs-reasons { display: flex; flex-wrap: wrap; gap: 8px; padding: 12px 20px; border-bottom: 1px solid color-mix(in oklab, var(--p-ink) 7%, transparent); }
.fs-rows li.is-new { animation: fs-new 300ms cubic-bezier(.16,1,.3,1); }
@keyframes fs-new { from { opacity: 0; transform: translateY(-8px); } }
.fs-chart i::after { transition: height 420ms cubic-bezier(.16,1,.3,1); }
.fs-seg button { flex: 1; font-size: 13px; padding: 5px 10px; color: var(--p-muted); transition: background-color 170ms ease, color 170ms ease; }
.fs-seg button:hover:not(.on) { background: color-mix(in oklab, var(--p-ink) 7%, transparent); }
.fs-win .fs-seg button.on[data-s="in"] { background: #3d4b36; color: #fff; font-weight: 500; }
.fs-win .fs-seg button.on[data-s="late"] { background: #6b4f12; color: #fff; font-weight: 500; }
.fs-win .fs-seg button.on[data-s="out"] { background: #7c2f26; color: #fff; font-weight: 500; }
.fs-rows li:has(> [data-class]) { padding: 0; }
.fs-rows [data-class] { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 52px; padding: 6px 20px; text-align: right; transition: background-color 170ms ease; }
.fs-rows [data-class]:hover { background: color-mix(in oklab, var(--p-accent) 8%, var(--w-bg)); }
.fs-rows [data-class].is-on { background: color-mix(in oklab, var(--p-accent) 14%, var(--w-bg)); }

/* the look chooser */
.look-mini { display: flex; align-items: center; gap: 8px; margin-top: var(--s-6); }
.look-mini span { font-size: 15px; margin-inline-end: 4px; }
.look-sw { display: grid; place-items: center; width: 36px; height: 36px; padding: 0; background: none; border: 2px solid transparent; border-radius: 50%; cursor: pointer; transition: transform 110ms ease, border-color 170ms ease; }
.look-sw i { width: 24px; height: 24px; border-radius: 50%; }
.look-sw:hover { transform: scale(1.1); }
.look-sw[aria-pressed="true"] { border-color: var(--p-ink); }
.look-group { margin-top: var(--s-5); }
.look-group .t-label { margin: 0 0 var(--s-2); color: var(--muted); }
.look-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.look-chip { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 0 16px; font: inherit; font-weight: 500; font-size: 15px; color: var(--ink); background: none; border: 1px solid color-mix(in oklab, var(--ink) 18%, transparent); border-radius: var(--r-btn, 8px); cursor: pointer; transition: border-color 170ms ease, background-color 170ms ease, transform 110ms ease; }
.look-chip i { width: 16px; height: 16px; border-radius: 50%; }
.look-chip:hover { border-color: var(--ink); }
.look-chip:active { transform: scale(.97); }
.look-chip[aria-pressed="true"] { border-color: var(--accent); box-shadow: inset 0 0 0 1px var(--accent); background: color-mix(in oklab, var(--accent) 10%, transparent); }
html[data-radius="round"] .fs-win, html[data-radius="round"] .app.ui { border-radius: 22px; }
html[data-radius="round"] :is(.fs-win .fs-btn, .fs-win .fs-plus, .fs-seg) { border-radius: 14px; }
html[data-radius="round"] .fs-card { border-radius: 18px; }
.frame--split .fs-preview { position: absolute; top: 48px; right: 48px; left: 48px; bottom: -1px; }
.fs-preview__body { padding: 20px; }
.fs-preview__lesson { margin: 0 0 12px; font-family: var(--font-display); font-weight: 500; font-size: 26px; line-height: 1.3; }
.fs-preview .fs-stats { margin-top: 16px; }
.fs-preview .fs-chart--small { height: 110px; padding: 0; }
.fs-preview .fs-chart--small i::after { height: var(--v); }
.fs-people li { display: block; min-height: 0; padding: 0; }
.fs-people button { display: flex; align-items: center; justify-content: space-between; gap: 12px; width: 100%; min-height: 44px; padding: 0 12px; border-radius: 8px; text-align: right; transition: background-color 170ms ease; }
.fs-people button:hover { background: color-mix(in oklab, var(--p-accent) 8%, var(--w-bg)); }
.fs-people button.is-on { background: color-mix(in oklab, var(--p-accent) 18%, var(--w-bg)); }
.fs-people button.is-on b { font-weight: 500; }
.fs-people button.is-on span { color: var(--p-ink); }
.app.ui button { font: inherit; color: inherit; cursor: pointer; background: none; border: 0; }
.app.ui .fs-people button:hover { background: color-mix(in oklab, var(--p-accent) 8%, var(--w-bg)); }
.app.ui .fs-people button.is-on { background: color-mix(in oklab, var(--p-accent) 18%, var(--w-bg)); }
@media (prefers-reduced-motion: reduce) { .fs-win *, .fs-fly { animation: none !important; transition: none !important; } }

/* the moment's windows */
.fs-step { width: 100%; max-width: 520px; }
.fs-seg { display: inline-flex; border: 1px solid color-mix(in oklab, var(--p-ink) 14%, transparent); border-radius: 8px; overflow: hidden; }
.fs-picker { display: grid; justify-items: center; gap: 12px; padding: 40px 24px; text-align: center; }
.fs-picker strong { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.3; }
.fs-picker__round, .fs-picker__line { font-size: 14px; color: var(--p-muted); }
.fs-picker .fs-tools { justify-content: center; }
html[dir="rtl"] [data-moment="pinned-chapters"] .mo-pc__visual--lit { background: var(--ground-surface, #dce3d6); }

/* the window across the page: the list beside the open file */
.app.ui { display: grid; grid-template-columns: minmax(0, 4fr) minmax(0, 8fr); margin-top: var(--s-7); background: var(--w-bg); border: 1px solid color-mix(in oklab, var(--p-ink) 12%, transparent); border-radius: 12px; overflow: hidden; text-align: right; font-size: 15px; }
.app > .app__pane { position: relative; min-width: 0; min-height: 0; overflow: hidden; }
.app > .app__pane + .app__pane { border-inline-start: 1px solid color-mix(in oklab, var(--p-ink) 9%, transparent); }
.app > .app__pane::after { content: ""; position: absolute; inset: auto 0 0 0; height: 64px; background: linear-gradient(transparent, var(--w-bg)); pointer-events: none; }
.fs-people { list-style: none; margin: 0; padding: 8px; }
.fs-people li { display: flex; align-items: center; justify-content: space-between; gap: 12px; min-height: 44px; padding: 0 12px; border-radius: 8px; }
.fs-people b { font-weight: 400; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fs-people span { font-size: 14px; color: var(--p-muted); }
.fs-open { padding: 24px 32px; }
.fs-open__head { display: flex; align-items: baseline; justify-content: space-between; gap: 16px; flex-wrap: wrap; }
.fs-open__head strong { font-family: var(--font-display); font-weight: 500; font-size: 24px; }
.fs-open__head span { font-size: 14px; color: var(--p-muted); }
.fs-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); margin: 16px 0 24px; border-block: 1px solid color-mix(in oklab, var(--p-ink) 9%, transparent); }
.fs-stats > div { padding: 14px 0; display: grid; gap: 2px; }
.fs-stats span { font-size: 13px; color: var(--p-muted); }
.fs-stats b { font-family: var(--font-display); font-weight: 500; font-size: 28px; line-height: 1.2; }
.fs-open__cols { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 32px; }
.fs-open .fs-rows li { padding-inline: 0; min-height: 44px; font-size: 14px; }
.fs-open .fs-rows b { font-weight: 400; }
.fs-notes { list-style: none; margin: 0; padding: 0; display: grid; gap: 14px; }
.fs-notes li { font-size: 15px; line-height: 1.5; }
.fs-notes span { display: block; font-size: 13px; color: var(--p-muted); }

/* the four feature panels: the window rises from the panel's foot */
#features .panel { --p-h: 500px; height: var(--p-h); display: flex; justify-content: center; align-items: flex-start; padding: 32px 32px 0; overflow: hidden; }
.fs-rise { position: relative; z-index: 1; width: 100%; max-width: 460px; margin-bottom: -24px; }
.fs-rise .fs-rows li { min-height: 52px; }
.fs-panel--flat { background: var(--ground-surface, #dce3d6); }
#features .fs-panel--flat { justify-content: flex-start; padding: 40px 40px 0 0; }
.fs-corner { position: relative; z-index: 1; width: 100%; margin-bottom: -24px; border-end-end-radius: 0; }
.fs-table td, .fs-table th { height: 46px; }
.fs-remind { margin-top: var(--s-6); max-width: 420px; }
.fs-remind__body { padding: 16px 20px 20px; display: grid; justify-items: start; gap: 12px; }
.fs-remind__body p { margin: 0; }
.fs-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.fs-table th { font-weight: 500; font-size: 13px; color: var(--p-muted); text-align: right; padding: 10px 20px 8px 8px; }
.fs-table td { padding: 10px 20px 10px 8px; border-top: 1px solid color-mix(in oklab, var(--p-ink) 7%, transparent); }
.fs-table :is(th, td):not(:first-child) { text-align: center; padding-inline: 8px; }
.fs-chart { display: grid; grid-template-columns: repeat(5, 1fr); align-items: end; gap: 16px; height: 300px; padding: 20px 20px 0; }
.fs-chart i { display: flex; flex-direction: column; justify-content: flex-end; height: 100%; font-style: normal; }
.fs-chart i::after { content: ""; height: calc(var(--v) - 24px); background: color-mix(in oklab, var(--p-accent) 55%, var(--w-bg)); border-radius: 4px 4px 0 0; }
.fs-chart em { text-align: center; font-style: normal; font-size: 13px; line-height: 24px; color: var(--p-muted); }
.fs-chart__axis { display: grid; grid-template-columns: repeat(5, 1fr); gap: 16px; padding: 8px 20px 32px; font-size: 13px; color: var(--p-muted); text-align: center; }
.fs-bar .fs-tools .fs-btn { min-height: 32px; padding: 0 10px; font-size: 13px; }

/* the backup window */
.frame--split { --ratio: 108%; }
.frame--split .fs-backup { position: absolute; top: 56px; right: 56px; left: 0; bottom: -1px; border-end-end-radius: 0; }
.fs-backup__body { padding: 20px 20px 0; }
.fs-backup__line { margin: 0 0 16px; }
.fs-backup .fs-rows { margin-top: 16px; }
.fs-backup .fs-rows li { padding-inline: 0; }

/* the menu's small pictures */
.menu-card .panel { --p-h: 160px; }
.menu-pic { display: grid; align-content: center; gap: 8px; padding: 20px 24px; background: var(--ground-surface, #dce3d6); }
.mp-row { display: flex; align-items: center; gap: 8px; font-size: 14px; }
.mp-row b { margin-inline-start: auto; font-weight: 500; }
.mp-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--p-accent); }
.mp-big { font-family: var(--font-display); font-weight: 500; font-size: 34px; line-height: 1.2; }
.mp-line { font-size: 14px; }
.mp-bar { display: block; height: 6px; border-radius: 3px; background: color-mix(in oklab, var(--p-ink) 12%, transparent); overflow: hidden; }
.mp-bar i { display: block; height: 100%; background: var(--p-accent); }

/* tablets and phones */
@media (max-width: 1023px) {
  .app.ui { grid-template-columns: minmax(0, 1fr); grid-template-rows: auto minmax(0, 1fr); }
  .app > .app__pane--list { max-height: 252px; }
  .app > .app__pane--list::after { display: none; }
  .app > .app__pane + .app__pane { border-inline-start: 0; border-top: 1px solid color-mix(in oklab, var(--p-ink) 9%, transparent); }
}
@media (max-width: 1279px) { #features .panel { --p-h: 410px; } .faq .fs-extra { display: none; } }
@media (max-width: 1023px) { .frame--split { --ratio: 64%; } }
@media (min-width: 640px) and (max-width: 1023px) { [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual--lit { min-height: 40svh; aspect-ratio: auto; min-width: 0; } }
@media (max-width: 1279px) { .fs-today .fs-card:nth-child(n+5) { display: none; } }
@media (max-width: 639px) {
  #features .panel { --p-h: 220px; }
  .frame--split { --ratio: 80%; }
  #looks .frame--split { --ratio: 56%; }
  #looks .look-group { margin-top: var(--s-4); }
  .fs-remind .fs-bar { display: none; }
  .fs-remind { margin-top: var(--s-4); }
  .fs-today .fs-card:nth-child(n+2) { display: none; }
  .fs-today .fs-cards { grid-template-columns: minmax(0, 1fr); }
  [data-moment="pinned-chapters"]:not(.is-live) .mo-pc__visual--lit { aspect-ratio: auto; display: block; }
  .fs-step .fs-rows li:nth-child(n+4) { display: none; }
  .fs-chart { height: 140px; }
  .app.ui { grid-template-rows: minmax(0, 1fr); }
  .app > .app__pane--list { display: none; }
  .app > .app__pane + .app__pane { border-top: 0; }
  .fs-open { padding: 16px; }
  .fs-open__cols { grid-template-columns: minmax(0, 1fr); gap: 16px; }
  .fs-open__cols > div:last-child { display: none; }
  .hero__media[data-fx] { padding: 16px 16px 0; }
  .fs-cards { gap: 8px; padding: 0 12px 16px; }
  .fs-today .fs-lesson { display: none; }
  .fs-seg button { padding: 5px 7px; }
  .look-mini { display: none; }
  .frame--split .fs-preview { top: 24px; right: 24px; left: 24px; }
  #features .panel { padding: 16px 16px 0; }
  .frame--split { --ratio: 108%; }
.frame--split .fs-backup { top: 24px; right: 24px; }
}