/* Tawqit DZ — RTL Arabic UI.
   Hand-authored: no build step, no node_modules. */

:root {
    --bg: #f6f7fb;
    --surface: #ffffff;
    --surface-2: #f0f2f8;
    --border: #dfe3ed;
    --text: #1b2033;
    --muted: #6b7285;
    --brand: #6d4aff;
    --brand-soft: #efeaff;
    --ok: #12855b;
    --ok-soft: #e2f5ec;
    --warn: #9a6200;
    --warn-soft: #fdf0d8;
    --danger: #b3261e;
    --danger-soft: #fbe6e4;
    --radius: 12px;
    --shadow: 0 1px 2px rgba(20, 25, 50, .06), 0 6px 20px rgba(20, 25, 50, .05);
    /* Declared here and not on `.ticker`, because `.shell` subtracts it and a
       sibling cannot read a custom property off the element before it. */
    --ticker-height: 34px;
}

@media (prefers-color-scheme: dark) {
    :root {
        --bg: #101320;
        --surface: #181c2c;
        --surface-2: #1f2436;
        --border: #2c3247;
        --text: #e8eaf2;
        --muted: #9aa1b8;
        --brand: #9b83ff;
        --brand-soft: #262046;
        --ok: #4ad39a;
        --ok-soft: #14301f;
        --warn: #e9b45c;
        --warn-soft: #35270f;
        --danger: #ff8a80;
        --danger-soft: #3a1a18;
        --shadow: 0 1px 2px rgba(0, 0, 0, .3), 0 6px 20px rgba(0, 0, 0, .25);
    }
}

* { box-sizing: border-box; }

body {
    margin: 0;
    background: var(--bg);
    color: var(--text);
    font-family: "Cairo", "Segoe UI", "Tahoma", "Noto Naskh Arabic", sans-serif;
    font-size: 15px;
    line-height: 1.6;
}

a { color: var(--brand); text-decoration: none; }
a:hover { text-decoration: underline; }

/* ── Shell ───────────────────────────────────────────────── */

.shell { display: flex; min-height: 100vh; }

/* The ticker is part of the page, not on top of it, so the shell gives back
   the height it takes. Without this the two together are 100vh + 34px and
   every screen scrolls a little, on a page that otherwise fits. */
.ticker + .shell { min-height: calc(100vh - var(--ticker-height)); }

/* ── The ticker («شريط الأخبار») ──────────────────────────────
   The beta notice, moving, across the top of every signed-in screen.

   It travels **left to right**. That looks backwards next to every ticker on
   an English page, and it is the right way round here: Arabic is read
   right-to-left, so a word has to enter at the left edge and leave at the
   right for the sentence to arrive in the order it is read. Reversing it
   makes each phrase appear having already been passed.

   Sticky rather than scrolled away. z-index 20 clears the sticky table heads
   (which claim up to 3) and stays under the modal at 40, so a dialog is never
   crossed by a moving strip. */

.ticker {
    position: sticky;
    inset-block-start: 0;
    z-index: 20;
    block-size: var(--ticker-height);
    display: flex;
    align-items: center;
    overflow: hidden;
    background: var(--warn-soft);
    color: var(--warn);
    border-block-end: 1px solid var(--border);
    font-size: 13.5px;
    font-weight: 600;
    white-space: nowrap;
    /* A strip that moves under the pointer is easy to select by accident,
       and a half-selected sentence sliding past reads as a rendering bug. */
    user-select: none;
}

/* The duration is per copy, not per screen, so it has to grow with the text:
   the animation covers one copy's width whatever that width is, and leaving it
   at the old value when a third item was added would simply have made the
   strip travel half again as fast. Roughly 90 px/s at this length, which is
   the pace of a broadcast ticker. */
.ticker-track {
    display: flex;
    inline-size: max-content;
    animation: ticker-run 62s linear infinite;
}

/* 25% of the track is exactly one of the four copies, so the frame at the end
   of the loop is the frame at the start and the repeat has no seam. The four
   are what makes that true on a wide screen: the shift has to be at least one
   copy, and the track has to stay wider than the viewport throughout it. */
@keyframes ticker-run {
    from { transform: translateX(0); }
    to   { transform: translateX(25%); }
}

.ticker-item { padding-inline-end: 3rem; }

/* `currentColor`, not `--brand`: on the amber strip the brand purple is both
   the wrong hue and the worse contrast. The underline is what says "link". */
.ticker-item a {
    color: inherit;
    text-decoration: underline;
    text-underline-offset: 3px;
    text-decoration-thickness: 1px;
}
.ticker-item a:hover { text-decoration-thickness: 2px; }

.ticker-dot {
    margin-inline-end: .55rem;
    font-size: 9px;
    vertical-align: middle;
    opacity: .6;
}

/* Three items share the strip — what you get, where to report, where the news
   is. The dash keeps them apart at a glance, which a comma at this size does
   not, and a reader who joins halfway can still tell which one they are in. */
.ticker-sep { opacity: .45; margin-inline: .35rem; }

/* Reading a link needs it to hold still; clicking one needs it to hold still
   for longer than the pointer takes to get there. `focus-within` is the same
   courtesy for a keyboard: tabbing to the link stops the sentence too. */
.ticker:hover .ticker-track,
.ticker:focus-within .ticker-track { animation-play-state: paused; }

/* Asked not to animate, it becomes what it would have been anyway: the
   sentence, once, centred and still. The other three copies exist only to
   make the loop seamless and have nothing to say on their own. */
@media (prefers-reduced-motion: reduce) {
    .ticker { justify-content: center; }
    .ticker-track { animation: none; }
    .ticker-item { padding-inline-end: 0; }
    .ticker-item ~ .ticker-item { display: none; }
}

.sidebar {
    width: 244px;
    flex: 0 0 244px;
    background: var(--surface);
    border-inline-start: 1px solid var(--border);
    padding: 20px 14px;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ── The mark ────────────────────────────────────────────────
   `sitebrand`, not `brand`: `.tag.brand` is a pill used on a dozen screens,
   and a bare `.brand` rule sets `display` and `padding` on every one of
   them. Source order happens to mask it today — `.tag` is declared further
   down the file at equal specificity — which is not a thing to rely on. */

.sitebrand {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 8px 18px;
}

/* No explicit fill on the SVG: it draws itself in `currentColor`, so the
   dark-mode `--brand` above is the only place the colour is stated. */
.sitebrand-mark {
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    color: var(--brand);
}

.sitebrand-text {
    display: flex;
    flex-direction: column;
    line-height: 1.15;
    min-inline-size: 0;
}

.sitebrand-name {
    font-weight: 800;
    font-size: 18px;
    letter-spacing: -.015em;
    white-space: nowrap;
}

/* A fifth of a space rather than a full one. "TawqitDZ" set in two weights
   reads as one word, which is what a wordmark is; a real space makes it two. */
.sitebrand-dz {
    margin-inline-start: .18em;
    color: var(--brand);
    font-weight: 700;
}

.sitebrand-tag {
    font-size: 11px;
    font-weight: 600;
    color: var(--muted);
}

.sitebrand-lg { gap: 13px; }
.sitebrand-lg .sitebrand-mark { inline-size: 38px; block-size: 38px; }
.sitebrand-lg .sitebrand-name { font-size: 22px; }
.sitebrand-lg .sitebrand-tag { font-size: 12px; }

/* The sidebar reads as a workflow: describe, organise, produce. */
.nav-group {
    display: flex;
    flex-direction: column;
    gap: 2px;
    margin-bottom: 14px;
}
.nav-label {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
    padding: 6px 12px 4px;
}

.switcher {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 0 8px 14px;
}
.switcher > span {
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
    text-transform: uppercase;
}
.switcher select { font-size: 14px; padding: 7px 10px; }

.nav-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 9px 12px;
    border-radius: 10px;
    color: var(--text);
    font-weight: 600;
}
.nav-link:hover { background: var(--surface-2); text-decoration: none; }
.nav-link.active { background: var(--brand-soft); color: var(--brand); }
.nav-link .count {
    font-size: 12px;
    color: var(--muted);
    font-weight: 600;
}

.main { flex: 1; min-width: 0; padding: 26px 30px 60px; }

.page-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 16px;
    flex-wrap: wrap;
    margin-bottom: 20px;
}
.page-head h1 { margin: 0 0 4px; font-size: 24px; }
.page-head p { margin: 0; color: var(--muted); }

/* ── Cards & tables ──────────────────────────────────────── */

.card {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    overflow: hidden;
}
.card + .card { margin-top: 18px; }
.card-head {
    padding: 14px 18px;
    border-bottom: 1px solid var(--border);
    font-weight: 700;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
}
.card-body { padding: 18px; }

.table-wrap { overflow-x: auto; }

table { width: 100%; border-collapse: collapse; }
th, td {
    padding: 10px 14px;
    /* `start`, not `right`: the sheet is RTL by document direction, not by
       hard-coded side, and a numeric column needs `end` to line up. */
    text-align: start;
    border-bottom: 1px solid var(--border);
    white-space: nowrap;
}
th {
    background: var(--surface-2);
    font-size: 13px;
    color: var(--muted);
    font-weight: 700;
    /* Does nothing on its own: .table-wrap scrolls horizontally only, so
       there is no vertical scroll container to stick to. `.data-table`
       below gives it one. */
    position: sticky;
    inset-block-start: 0;
}
tbody tr:last-child td { border-bottom: 0; }
tbody tr:hover { background: var(--surface-2); }
td.wrap, th.wrap { white-space: normal; min-width: 180px; }

/* ── Stats ───────────────────────────────────────────────── */

.stats {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 14px;
    margin-bottom: 20px;
}
.stat {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    padding: 14px 16px;
    box-shadow: var(--shadow);
}
.stat .n { font-size: 26px; font-weight: 800; line-height: 1.2; }
.stat .k { color: var(--muted); font-size: 13px; }

/* ── Bits ────────────────────────────────────────────────── */

.btn {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    padding: 9px 16px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-weight: 700;
    cursor: pointer;
}
.btn:hover { background: var(--surface-2); text-decoration: none; }
.btn-primary {
    background: var(--brand);
    border-color: var(--brand);
    color: #fff;
}
.btn-primary:hover { background: var(--brand); filter: brightness(1.08); }

/* For the confirming half of a dialog, so the two buttons are told apart by
   more than their words. Matches `.account-out:hover`, which is where the
   only other red in the sidebar lives. */
.btn-danger {
    background: var(--danger);
    border-color: var(--danger);
    color: #fff;
}
.btn-danger:hover { background: var(--danger); filter: brightness(1.08); }

.tag {
    display: inline-block;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.tag.ok { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.tag.warn { background: var(--warn-soft); color: var(--warn); border-color: transparent; }
.tag.danger { background: var(--danger-soft); color: var(--danger); border-color: transparent; }
.tag.brand { background: var(--brand-soft); color: var(--brand); border-color: transparent; }

.muted { color: var(--muted); }
.empty { padding: 40px 20px; text-align: center; color: var(--muted); }

.notice {
    border: 1px solid var(--border);
    background: var(--warn-soft);
    color: var(--warn);
    border-radius: var(--radius);
    padding: 12px 16px;
    margin-bottom: 18px;
    font-weight: 600;
}
.notice.ok { background: var(--ok-soft); color: var(--ok); }
.notice.danger { background: var(--danger-soft); color: var(--danger); }

/* ── Assignment matrix ───────────────────────────────────── */

.matrix td.cell {
    white-space: normal;
    min-width: 150px;
    vertical-align: top;
}
.matrix td.cell-empty { background: var(--warn-soft); }
.matrix td.cell-free { background: transparent; text-align: center; }

.lesson {
    padding: 4px 6px;
    margin-bottom: 4px;
    border-radius: 8px;
    background: var(--brand-soft);
    font-size: 13px;
    line-height: 1.35;
}
.lesson:last-child { margin-bottom: 0; }
.lesson strong { font-weight: 700; }

.matrix .sticky-col {
    position: sticky;
    inset-inline-start: 0;
    background: var(--surface);
    z-index: 1;
    min-width: 165px;
}
.matrix thead .sticky-col { background: var(--surface-2); z-index: 2; }

.chip {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    padding: 3px 6px 3px 10px;
    margin: 0 0 4px 4px;
    border-radius: 999px;
    background: var(--ok-soft);
    color: var(--ok);
    font-size: 12px;
    font-weight: 700;
}
.chip-x {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-size: 15px;
    line-height: 1;
    cursor: pointer;
    padding: 0 2px;
    opacity: .65;
}
.chip-x:hover { opacity: 1; }

.cell-select {
    width: 100%;
    padding: 5px 8px;
    font-size: 13px;
    border-radius: 8px;
    border: 1px dashed var(--border);
    background: transparent;
    color: var(--muted);
    cursor: pointer;
}
.cell-select:hover { border-style: solid; color: var(--text); }

/* ── Availability grid ───────────────────────────────────── */

.grid-table td.slot {
    text-align: center;
    cursor: pointer;
    user-select: none;
    padding: 6px;
    min-width: 46px;
}
.slot-box {
    display: block;
    height: 26px;
    border-radius: 6px;
    background: var(--ok-soft);
    border: 1px solid transparent;
}
.slot-box.blocked { background: var(--danger-soft); }
.grid-table td.slot:hover .slot-box { border-color: var(--brand); }

/* Day and period headers double as bulk toggles. */
.head-toggle {
    border: 0;
    background: transparent;
    color: inherit;
    font: inherit;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
    white-space: nowrap;
}
.head-toggle:hover { background: var(--brand-soft); color: var(--brand); }

/* ── Wizard ──────────────────────────────────────────────── */

.steps {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    margin-bottom: 18px;
}
.step {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 14px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--muted);
    font-weight: 700;
    font-size: 14px;
}
.step-n {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: grid; place-items: center;
    background: var(--surface-2);
    font-size: 12px;
}
.step.active { border-color: var(--brand); color: var(--brand); background: var(--brand-soft); }
.step.active .step-n { background: var(--brand); color: #fff; }
.step.done { color: var(--ok); }
.step.done .step-n { background: var(--ok-soft); color: var(--ok); }

.form-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(230px, 1fr));
    gap: 16px;
}
.form-grid label { display: flex; flex-direction: column; gap: 6px; }
.form-grid label > span { font-weight: 700; font-size: 14px; }

/* Every text-like input, not just the three that happened to exist when this
   rule was written. `email` was missing, so the address field on /admin
   rendered as a bare browser box beside three styled ones — and it was easy
   to miss, because the only other `type="email"` in the app is on the
   sign-in page, which has its own rule and looked fine.
   `tel`, `url`, `date` and `time` are listed although nothing uses them yet:
   naming the family costs a line, and finding this again costs an afternoon. */
input[type="text"], input[type="email"], input[type="password"],
input[type="number"], input[type="search"], input[type="tel"],
input[type="url"], input[type="date"], input[type="time"], select {
    padding: 9px 12px;
    border-radius: 10px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    width: 100%;
}
input:focus, select:focus { outline: 2px solid var(--brand); outline-offset: 1px; }

/* The sheet had no textarea rule at all — the first one in the app rendered
   as an unstyled sliver, because nothing had ever needed one. */
textarea {
    padding: 12px 14px;
    border-radius: 12px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    line-height: 1.7;
    inline-size: 100%;
    min-block-size: 7lh;
    resize: vertical;
}
textarea:focus { outline: 2px solid var(--brand); outline-offset: 1px; }
textarea::placeholder, input::placeholder { color: var(--muted); opacity: .85; }
input.num { width: 82px; }

.err { color: var(--danger); font-size: 13px; font-style: normal; font-weight: 600; }

.wizard-nav {
    display: flex;
    gap: 10px;
    justify-content: flex-start;
    margin-top: 18px;
}

.card-body h3 { margin: 18px 0 8px; font-size: 15px; }
.card-body h3:first-child { margin-top: 0; }

@media (max-width: 820px) {
    .shell { flex-direction: column; }
    .sidebar { width: auto; flex: none; flex-direction: row; overflow-x: auto; }
    .main { padding: 18px; }
}

/* ── The timetable itself ─────────────────────────────────────────
   Deliberately black and white. A timetable is read at a glance and
   photocopied a hundred times: colour survives neither. Structure comes
   from rule weight instead — a heavy outer frame, hairlines inside, the
   subject bold and everything else quiet. */

.emploi {
    width: 100%;
    border-collapse: collapse;
    background: #fff;
    color: #000;
    table-layout: fixed;
    font-size: 13px;
}

.emploi caption {
    caption-side: top;
    text-align: center;
    padding: 0 0 10px;
    color: #000;
}
.emploi caption .t { font-size: 19px; font-weight: 700; }
.emploi caption .s { font-size: 12px; font-weight: 400; margin-top: 2px; }

.emploi th,
.emploi td {
    border: 1px solid #000;
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
    word-break: break-word;
}

/* The outer frame and the header/label separators carry the structure. */
.emploi { border: 2px solid #000; }
.emploi thead th { border-bottom-width: 2px; font-weight: 700; background: #fff; }
.emploi tbody th { border-inline-end-width: 2px; }

.emploi thead th:first-child,
.emploi tbody th {
    width: 92px;
    font-size: 12px;
    font-weight: 700;
}

/* The break between morning and afternoon, drawn as a rule rather than a
   band of colour so it survives a photocopier. */
.emploi tr.after-break > * { border-top-width: 2px; }

.emploi td.free { color: #999; }

.emploi .sub { font-weight: 700; display: block; line-height: 1.3; }
.emploi .meta { font-size: 11px; line-height: 1.35; margin-top: 2px; }
.emploi .half {
    font-size: 10px;
    border: 1px solid #000;
    border-radius: 2px;
    padding: 0 3px;
    margin-inline-start: 3px;
    white-space: nowrap;
}

/* Two lessons in one slot (the two halves of a split class). */
.emploi .split + .split { border-top: 1px dashed #000; margin-top: 4px; padding-top: 4px; }

.emploi-foot {
    display: flex;
    justify-content: space-between;
    font-size: 11px;
    color: #000;
    margin-top: 6px;
}

/* Dark mode: the timetable stays a sheet of paper. Inverting it would make
   the printed and on-screen versions two different documents. */
@media (prefers-color-scheme: dark) {
    .emploi, .emploi caption { background: #fff; color: #000; }
}

/* ── Section tabs ─────────────────────────────────────────────────
   Wraps rather than scrolls: seven Arabic labels do not fit one line on a
   laptop, and a tab you have to scroll sideways to reach is a tab you never
   find. */
.settings-tabs {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    margin-bottom: 18px;
    padding-bottom: 12px;
    border-bottom: 1px solid var(--border);
}

.settings-tab {
    padding: 8px 14px;
    border: 1px solid var(--border);
    border-radius: 999px;
    background: var(--surface);
    color: var(--muted);
    font: inherit;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.settings-tab:hover { color: var(--text); border-color: var(--brand); }
.settings-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.settings-tab.active {
    background: var(--brand-soft);
    border-color: transparent;
    color: var(--brand);
}

/* ── The first screen ─────────────────────────────────────────────
   Before a school exists there is no sidebar to sit beside, so this
   centres its own column instead of filling the shell's main area. */
.plain-shell {
    max-width: 780px;
    margin: 0 auto;
    padding: 48px 20px 64px;
}
.plain-shell .brand { justify-content: center; padding-bottom: 26px; }

.plain-shell .page-head { justify-content: center; text-align: center; }
.plain-shell .page-head p { max-width: 44ch; margin-inline: auto; }

.type-cards {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 14px;
    margin-top: 26px;
}

.type-card {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 26px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    font: inherit;
    color: inherit;
    cursor: pointer;
    text-align: center;
    transition: border-color .12s, transform .12s;
}
.type-card:hover,
.type-card:focus-visible { border-color: var(--brand); transform: translateY(-2px); }
.type-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.type-name { font-size: 20px; font-weight: 800; }
.type-desc { color: var(--muted); font-size: 13px; line-height: 1.7; }
.type-tags { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; margin-top: 4px; }

/* ── Data tables ──────────────────────────────────────────────────
   The sheet already had .table-wrap, .empty, .tag and .head-toggle. This is
   only what a searchable, sortable, paged table needs on top of them.

   Everything here is scoped to .data-table so that .matrix (the assignment
   pivot) and .grid-table (the availability grids) keep the scrolling and
   stacking they already have. */

:root {
    /* Above .matrix .sticky-col, which claims 1 and 2. */
    --z-sticky-head: 3;
    --table-max-block: 68vh;
}

/* Used by three views since the settings screen was written, and never
   defined — those cards have been rendering as one column all along. */
.grid-2 {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 16px;
}

/* Toolbar. .card-head is already flex/space-between, so this only has to
   group the two ends and let them wrap. */
.table-toolbar { flex-wrap: wrap; gap: 10px; }
.table-toolbar .tt-start,
.table-toolbar .tt-end {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}

.table-search { display: flex; align-items: center; margin: 0; }
.table-search input[type="search"] { inline-size: clamp(170px, 26vw, 300px); }

/* Screen-reader-only: the search box is labelled but the label is not drawn,
   because the placeholder already says what it is. */
.visually-hidden {
    position: absolute;
    inline-size: 1px; block-size: 1px;
    margin: -1px; padding: 0; border: 0;
    clip-path: inset(50%);
    overflow: hidden; white-space: nowrap;
}

/* The scroll container `th { position: sticky }` has been waiting for. */
.data-table .table-wrap {
    max-block-size: var(--table-max-block);
    overflow-y: auto;
    transition: opacity .12s;
}
.data-table thead th { z-index: var(--z-sticky-head); }

/* Sortable headers, on top of the existing .head-toggle button. The glyph is
   keyed off aria-sort, so the attribute a screen reader announces is the same
   one the eye reads — they cannot disagree. */
.head-toggle:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
/* Literal characters, not `\2195` / `\25B2` / `\25BC`. They were written as
   CSS escapes, and something on the way in read `\21` and `\25` as *octal* —
   leaving a raw control byte followed by the leftover digits, which is why
   every sortable header read «الاسم ␑95». This file is UTF-8 already, being
   full of Arabic, so the character itself has nothing left to misparse. */
.head-sort { display: inline-flex; align-items: center; gap: 6px; }
.head-sort::after { content: "↕"; font-size: 10px; opacity: .35; }
th[aria-sort="ascending"] .head-sort::after { content: "▲"; opacity: 1; }
th[aria-sort="descending"] .head-sort::after { content: "▼"; opacity: 1; }
th[aria-sort="ascending"], th[aria-sort="descending"] { color: var(--brand); }

/* Numbers line up. `.num` was taken by input.num { width: 82px }. */
.col-num { text-align: end; font-variant-numeric: tabular-nums; }
th.group { text-align: center; }
td.col-num, th.col-num { font-variant-numeric: tabular-nums; }

/* wire:loading.attr="disabled" was already in use in three places with no
   visual result at all. */
.btn:disabled, .btn[disabled] { opacity: .55; cursor: not-allowed; }
.btn:disabled:hover, .btn[disabled]:hover { background: var(--surface); filter: none; }
input:disabled, select:disabled {
    opacity: .6;
    cursor: not-allowed;
    background: var(--surface-2);
}

/* Loading, driven entirely by wire:loading.delay.short.class — no JS. */
.data-table .table-wrap.is-loading { opacity: .55; }
.data-table .table-wrap.is-loading tbody { pointer-events: none; }

/* Pager. Arabic labels carry the direction, so nothing needs mirroring. */
.table-foot {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    border-block-start: 1px solid var(--border);
}
.pager-info { color: var(--muted); font-size: 13px; }
.pager { display: flex; gap: 6px; align-items: center; }
.pager button, .pager span {
    min-inline-size: 34px;
    padding: 6px 10px;
    border-radius: 8px;
    border: 1px solid var(--border);
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    text-align: center;
}
.pager button:hover { background: var(--surface-2); }
.pager button:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pager .current { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.pager .gap, .pager button:disabled { opacity: .45; cursor: default; }

/* Filter chip rows. The pill selectors on five screens were an anonymous run
   of chips with nothing saying what they selected; with two rows stacked that
   stops being readable. */
.filters { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.filters + .filters { margin-block-start: 10px; }
.filters > .k {
    font-size: 12px;
    font-weight: 800;
    color: var(--muted);
    min-inline-size: 52px;
}

/* Replaces `style="cursor:pointer; border:0; font:inherit;"`, copy-pasted into
   five views. Dropping `border:0` also stops a selected pill being 2px smaller
   than an unselected one, and these had no visible keyboard focus at all. */
button.tag { cursor: pointer; font: inherit; }
button.tag:hover { border-color: var(--brand); color: var(--brand); }
button.tag.brand:hover { color: var(--brand); }
button.tag:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

@media (max-width: 820px) {
    .table-toolbar { flex-direction: column; align-items: stretch; }
    .table-search, .table-search input[type="search"] { inline-size: 100%; }
    .data-table .table-wrap { max-block-size: 60vh; }
}

/* ── Rule help ────────────────────────────────────────────────────
   A «؟» beside every rule's title, and the modal it opens. No JavaScript:
   the button is a Livewire round-trip like every other control here, and the
   modal is markup that exists only while a rule is chosen. */

.help-dot {
    display: inline-grid;
    place-items: center;
    inline-size: 20px;
    block-size: 20px;
    flex: 0 0 20px;
    border-radius: 999px;
    border: 1px solid var(--border);
    background: var(--surface-2);
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 800;
    line-height: 1;
    cursor: pointer;
    transition: background .12s, color .12s, border-color .12s;
}
.help-dot:hover { background: var(--brand-soft); color: var(--brand); border-color: transparent; }
.help-dot:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Keeps the dot on the title's line rather than pushing the tag beside it
   away — .card-head is `justify-content: space-between`, so the title and its
   dot have to be one flex item. */
.head-title { display: inline-flex; align-items: center; gap: 8px; }
.card-head .help-dot { margin-inline-start: 8px; vertical-align: middle; }
.card-head h3 { display: inline-flex; align-items: center; }

/* `position: fixed` escapes .card { overflow: hidden }, but the modal is
   rendered at the component root anyway so it never sits inside one. */
.modal-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(15, 18, 32, .55);
    z-index: 40;
}

.modal {
    position: fixed;
    inset-block-start: 50%;
    inset-inline-start: 50%;
    transform: translate(50%, -50%);   /* RTL: start is the right edge */
    inline-size: min(560px, calc(100vw - 32px));
    max-block-size: min(80vh, 720px);
    display: flex;
    flex-direction: column;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 10px 40px rgba(10, 14, 30, .35);
    z-index: 41;
}

.modal-head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: 12px;
    padding: 16px 18px;
    border-block-end: 1px solid var(--border);
}
.modal-head h2 { margin: 0; font-size: 17px; }

.modal-x {
    border: 0;
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 16px;
    line-height: 1;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.modal-x:hover { background: var(--surface-2); color: var(--text); }
.modal-x:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

.modal-body { padding: 4px 18px 18px; overflow-y: auto; }
.modal-body section { margin-block-start: 16px; }
.modal-body section:first-child { margin-block-start: 8px; }
.modal-body h3 {
    margin: 0 0 4px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: .03em;
    color: var(--muted);
}
.modal-body p { margin: 0; line-height: 1.9; }

/* A card that holds twenty rules lists them, collapsed — <details> is the one
   disclosure the platform gives without JavaScript. */
.help-field {
    border: 1px solid var(--border);
    border-radius: 10px;
    padding: 8px 12px;
    margin-block-start: 8px;
    background: var(--surface-2);
}
.help-field > summary {
    cursor: pointer;
    font-weight: 700;
    font-size: 14px;
    list-style-position: inside;
}
.help-field > summary:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.help-field[open] > summary { margin-block-end: 8px; }
.help-field p { font-size: 14px; }
.help-field p + p { margin-block-start: 6px; }

.modal-foot {
    padding: 14px 18px;
    border-block-start: 1px solid var(--border);
    display: flex;
    justify-content: flex-start;
    gap: 8px;
    align-items: center;
}

/* A confirm dialog is two short lines and two buttons; at 560px it reads as
   a mostly-empty sheet. */
.modal-sm { inline-size: min(400px, calc(100vw - 32px)); }
.modal-sm .modal-body p { margin-block-start: 10px; font-size: 14px; }
.modal-sm .modal-body p:first-child { margin-block-start: 8px; }
.modal-sm .modal-foot form { margin: 0; }

@media (max-width: 820px) {
    .modal { max-block-size: 88vh; }
}

/* ── Accounts ─────────────────────────────────────────────────────
   One login per مؤسسة, so the sidebar shows who you are rather than
   offering a school to switch to. */

/* ── The foot of the sidebar ─────────────────────────────────
   `margin-block-start: auto` is the whole mechanism: the sidebar is a flex
   column, so an auto top margin on the last child makes the free space
   collect above it rather than below the last nav group. No positioning, so
   it degrades honestly — on a short viewport where the links already fill
   the column there is no free space to collect, and this simply sits after
   them instead of overlapping anything. */
.sidebar-foot { margin-block-start: auto; padding-block-start: 16px; }

/* The card carries its own bottom margin for the case where it is *not*
   pushed down; against the sidebar's own padding that reads as too much. */
.sidebar-foot .account { margin-block-end: 0; }

/* ── The account ─────────────────────────────────────────────
   The name, the address and the way out, as one card. They were three runs
   of grey text stacked under the mark, which read as leftovers rather than
   as a thing — and the logout was a bare text button indistinguishable from
   the address above it. */

.account {
    margin: 0 8px 16px;
    border: 1px solid var(--border);
    border-radius: 12px;
    background: var(--surface-2);
    overflow: hidden;
}

.account-id {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 10px 11px;
}

.account-avatar {
    flex: none;
    inline-size: 30px;
    block-size: 30px;
    border-radius: 9px;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-size: 14px;
    font-weight: 800;
}

/* `min-inline-size: 0` on the column itself, not only on the lines inside
   it: a flex item refuses to shrink below its content by default, so a long
   school name would widen the card past the sidebar rather than ellipsing. */
.account-lines {
    display: flex;
    flex-direction: column;
    min-inline-size: 0;
    line-height: 1.3;
}

.account-name,
.account-mail {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.account-name { font-size: 13px; font-weight: 700; color: var(--text); }
.account-mail { font-size: 11px; color: var(--muted); }

.account form { margin: 0; }

/* Full width and separated by a hairline, so it reads as an action on the
   card rather than a third line of text. Red only on hover: signing out is
   not dangerous, but it is not something to hit by accident either. */
.account-out {
    inline-size: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    padding: 8px 10px;
    border: 0;
    border-block-start: 1px solid var(--border);
    background: transparent;
    color: var(--muted);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
}
.account-out:hover { background: var(--danger-soft); color: var(--danger); }
.account-out:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.account-out svg { inline-size: 15px; block-size: 15px; flex: none; }

.linkish {
    border: 0;
    background: transparent;
    color: var(--brand);
    font: inherit;
    font-size: 12px;
    font-weight: 700;
    cursor: pointer;
    padding: 2px 4px;
    border-radius: 6px;
}
.linkish:hover { background: var(--brand-soft); }
.linkish:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* Deliberately the loudest thing on the page. Editing another school's
   timetable by accident is the one mistake this arrangement invites. */
.impersonating {
    display: flex;
    flex-direction: column;
    gap: 6px;
    margin: 0 8px 14px;
    padding: 10px 12px;
    border-radius: 10px;
    background: var(--warn-soft);
    color: var(--warn);
    border: 1px solid transparent;
}
.impersonating .k { font-size: 11px; font-weight: 800; letter-spacing: .04em; }
.impersonating strong { font-size: 14px; }
.impersonating form { margin: 4px 0 0; }
.impersonating .btn { padding: 5px 10px; font-size: 12px; }

/* ── Signing in ───────────────────────────────────────────────────
   The first screen anyone sees. It owns the whole viewport rather than
   sitting in the plain layout's 780px column: the mark goes to the top
   corner and the card is centred in what is left, so the page reads as one
   composition instead of a stack. */

.signin-shell { max-inline-size: none; padding: 0; }

.signin {
    min-block-size: 100vh;
    display: flex;
    flex-direction: column;
    padding: 28px 30px 40px;
}

/* The sign-in mark is `<x-brand size="lg" />`, which brings its own sizing;
   all this has to do is drop the sidebar's bottom padding. */
.signin-brand .sitebrand { padding: 0; }

/* Centred in the space the mark leaves, and a little above true centre —
   optical centring, so it does not read as sitting low. */
.signin-middle {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    padding-block: 24px 6vh;
}

.signin-card {
    inline-size: 100%;
    max-inline-size: 440px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    padding: 40px 44px 34px;
}

.signin-eyebrow { margin: 0 0 6px; color: var(--muted); font-size: 15px; }
.signin-card h1 {
    margin: 0 0 30px;
    font-size: 32px;
    font-weight: 800;
    letter-spacing: -.02em;
    line-height: 1.25;
}

.signin-error { margin-block-end: 18px; }

.signin-field { display: block; margin-block-end: 14px; }

/* `text` and `select` are here for the registration screen, which asks for a
   school name and a type. Naming only the two types the sign-in form used is
   how the address field on /admin ended up as a bare browser box. */
.signin-field input[type="email"],
.signin-field input[type="password"],
.signin-field input[type="text"],
.signin-field select {
    inline-size: 100%;
    padding: 15px 16px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 15px;
    /* Addresses and passwords are latin, and `dir="ltr"` on the input would
       otherwise push the placeholder to the far side. */
    text-align: start;
}
.signin-field input::placeholder { color: var(--muted); opacity: 1; }
.signin-field input:focus,
.signin-field select:focus {
    outline: 0;
    border-color: var(--brand);
    box-shadow: 0 0 0 3px var(--brand-soft);
}
.signin-field .err { display: block; margin-block-start: 6px; }

/* Sits directly under the password box rather than in a `.signin-row`, so it
   reads as a note about the field above it. */
.signin-note { display: block; margin-block: -4px 22px; }

.signin-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    flex-wrap: wrap;
    margin-block: 4px 26px;
}
.signin-check { display: flex; align-items: center; gap: 9px; font-size: 14px; cursor: pointer; }
.signin-check input { inline-size: 17px; block-size: 17px; accent-color: var(--brand); }
.signin-hint { font-size: 13px; color: var(--muted); }

.signin-submit {
    inline-size: 100%;
    padding: 14px 18px;
    border: 0;
    border-radius: 10px;
    background: var(--brand);
    color: #fff;
    font: inherit;
    font-size: 15px;
    font-weight: 700;
    cursor: pointer;
    transition: filter .12s;
}
.signin-submit:hover { filter: brightness(1.08); }
.signin-submit:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.signin-submit:disabled { opacity: .6; cursor: not-allowed; filter: none; }

/* The alternative sign-in slot. On the reference this is where "continue
   with Google" sits; here it is the accounts this install actually has. */
.signin-alt { margin-block-start: 18px; }
.signin-alt-label {
    display: block;
    font-size: 11px;
    font-weight: 800;
    letter-spacing: .04em;
    color: var(--muted);
    margin-block-end: 8px;
}

.signin-ghost {
    inline-size: 100%;
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 11px 14px;
    border: 1px solid var(--border);
    border-radius: 10px;
    background: var(--surface);
    color: var(--text);
    font: inherit;
    font-size: 14px;
    cursor: pointer;
    text-align: start;
    transition: border-color .12s, background .12s;
}
.signin-ghost + .signin-ghost { margin-block-start: 8px; }
.signin-ghost:hover { border-color: var(--brand); background: var(--brand-soft); }
.signin-ghost:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.signin-ghost:disabled { opacity: .6; cursor: wait; }

.signin-avatar {
    inline-size: 26px;
    block-size: 26px;
    flex: 0 0 26px;
    border-radius: 8px;
    background: var(--brand-soft);
    color: var(--brand);
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
}
.signin-alt-name { font-weight: 700; }
.signin-alt-mail {
    margin-inline-start: auto;
    font-size: 11px;
    color: var(--muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    max-inline-size: 45%;
}

.signin-foot {
    margin: 26px 0 0;
    text-align: center;
    font-size: 13px;
    color: var(--muted);
}

@media (max-width: 520px) {
    .signin { padding: 20px 16px 28px; }
    .signin-card { padding: 28px 22px 24px; border-radius: 14px; }
    .signin-card h1 { font-size: 26px; margin-block-end: 22px; }
    .signin-middle { padding-block: 18px; }
    .signin-alt-mail { display: none; }
}

/* ── Printing ─────────────────────────────────────────────────────
   Everything that is not the timetable goes. */
@media print {
    .sidebar,
    .ticker,
    .page-head .btn,
    .table-toolbar,
    .table-foot,
    .help-dot,
    .modal,
    .modal-backdrop,
    .no-print { display: none !important; }

    /* Without this every table prints clipped to one screenful of rows. */
    .data-table .table-wrap { max-block-size: none; overflow: visible; }
    .data-table thead th { position: static; }
    .data-table thead { display: table-header-group; }   /* repeat per sheet */
    .data-table tr { break-inside: avoid; }

    .shell { display: block; }
    .main { padding: 0; }

    .card {
        border: 0;
        box-shadow: none;
        margin: 0;
        padding: 0;
        background: transparent;
    }
    .card-head, .table-wrap { border: 0; padding: 0; overflow: visible; }

    body { background: #fff; }

    /* One class per sheet. */
    .print-sheet { break-after: page; }
    .print-sheet:last-child { break-after: auto; }

    .emploi { font-size: 11px; }
    .emploi th, .emploi td { padding: 4px 3px; }

    @page { size: A4 landscape; margin: 10mm; }
}

/* ── اطلب جدولك ───────────────────────────────────────────────────────────
   The assistant screen. Built from the tokens the rest of the app already
   uses — no new palette — because it is one screen among fifteen and should
   read as part of them, not as a visitor.

   The shape it needs is a *sequence*, not a stack: ask, read what was
   understood, see what would change, apply, generate. Equal cards down the
   page give every step the same weight and hide which one you are on, so the
   steps are numbered and the ask panel is deliberately larger than the rest. */

.ask {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 16px;
    box-shadow: var(--shadow);
    overflow: hidden;
}

/* A tinted head, so the one input on the screen is obviously the way in. */
.ask-head {
    padding: 16px 20px 0;
    background: linear-gradient(var(--brand-soft), transparent);
}
.ask-head h2 { margin: 0 0 4px; font-size: 17px; }
.ask-head p { margin: 0; color: var(--muted); font-size: 13.5px; }

.ask-body { padding: 14px 20px 18px; }
.ask-body textarea { min-block-size: 6lh; font-size: 15px; }

.ask-actions {
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
    margin-block-start: 12px;
}
.ask-hint { color: var(--muted); font-size: 13px; }

/* Examples as full sentences in a grid, never truncated. A suggestion cut off
   at «خفّف على الأساتذة: يومان راحة في ا…» tells nobody anything, and the row
   of ellipses it produced was worse than no suggestions at all. */
.ask-examples {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(260px, 1fr));
    gap: 10px;
    padding: 0 20px 18px;
}
.ask-example {
    text-align: start;
    padding: 11px 14px;
    border: 1px dashed var(--border);
    border-radius: 12px;
    background: transparent;
    color: var(--text);
    font: inherit;
    font-size: 13.5px;
    line-height: 1.65;
    cursor: pointer;
}
.ask-example:hover {
    border-style: solid;
    border-color: var(--brand);
    background: var(--brand-soft);
}
.ask-example:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ── the steps ─────────────────────────────────────────────────────────── */

.flow { margin-block-start: 20px; }

.flow-step { position: relative; padding-inline-start: 40px; padding-block-end: 22px; }

/* The rail joining the numbers. Stops at the last step rather than trailing
   into nothing. */
.flow-step::before {
    content: '';
    position: absolute;
    inset-inline-start: 13px;
    inset-block: 26px 0;
    inline-size: 2px;
    background: var(--border);
}
.flow-step:last-child { padding-block-end: 0; }
.flow-step:last-child::before { display: none; }

.flow-n {
    position: absolute;
    inset-inline-start: 0;
    inset-block-start: 0;
    inline-size: 28px;
    block-size: 28px;
    border-radius: 50%;
    display: grid;
    place-items: center;
    font-size: 13px;
    font-weight: 800;
    background: var(--surface-2);
    color: var(--muted);
    border: 1px solid var(--border);
}
.flow-step.done .flow-n { background: var(--ok-soft); color: var(--ok); border-color: transparent; }
.flow-step.now .flow-n { background: var(--brand); color: #fff; border-color: transparent; }

.flow-title { font-weight: 700; margin: 3px 0 10px; }

/* ── what it understood ───────────────────────────────────────────────── */

.understood {
    border-inline-start: 3px solid var(--brand);
    background: var(--surface);
    border-radius: 0 12px 12px 0;
    padding: 12px 16px;
    line-height: 1.8;
}
[dir="rtl"] .understood { border-radius: 12px 0 0 12px; }

/* ── the proposed changes ─────────────────────────────────────────────── */

/* Rows, not a table. A rule is a *change* — from this to that — and a table
   makes the reader carry the old value across three columns to reach the new
   one. Here the pair sits together and the reason sits under it. */
.change {
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
    padding: 13px 16px;
}
.change + .change { margin-block-start: 10px; }

.change-top {
    display: flex;
    align-items: baseline;
    gap: 10px;
    flex-wrap: wrap;
}
.change-name { font-weight: 700; }

.change-move {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin-inline-start: auto;
    font-size: 14px;
}
.change-from { color: var(--muted); text-decoration: line-through; text-decoration-thickness: 1px; }
.change-arrow { color: var(--muted); }
.change-to {
    font-weight: 800;
    background: var(--brand-soft);
    color: var(--brand);
    border-radius: 8px;
    padding: 2px 9px;
}
.change-why { color: var(--muted); font-size: 13px; line-height: 1.7; margin: 7px 0 0; }

.refused {
    background: var(--danger-soft);
    border-radius: 12px;
    padding: 12px 16px;
}
.refused-row { font-size: 13.5px; line-height: 1.8; }
.refused-row + .refused-row { margin-block-start: 6px; }
.refused code {
    background: var(--surface);
    border-radius: 6px;
    padding: 1px 6px;
    font-size: 12px;
}

/* ── the result ───────────────────────────────────────────────────────── */

.verdict {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
    padding: 16px 18px;
    border-radius: 14px;
    border: 1px solid var(--border);
    background: var(--surface);
}
.verdict.good { background: var(--ok-soft); border-color: transparent; }
.verdict.bad { background: var(--danger-soft); border-color: transparent; }

.verdict-count { font-size: 26px; font-weight: 800; line-height: 1; font-variant-numeric: tabular-nums; }
.verdict.good .verdict-count { color: var(--ok); }
.verdict.bad .verdict-count { color: var(--danger); }
.verdict-text { flex: 1; min-inline-size: 200px; line-height: 1.7; }

/* ── why it failed ────────────────────────────────────────────────────── */

.facts { margin: 0; padding: 0; list-style: none; }
.facts li {
    padding: 9px 14px;
    border-inline-start: 3px solid var(--warn);
    background: var(--surface-2);
    border-radius: 0 10px 10px 0;
    font-size: 13.5px;
    line-height: 1.7;
}
[dir="rtl"] .facts li { border-radius: 10px 0 0 10px; }
.facts li + li { margin-block-start: 7px; }

.remedy {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    padding: 12px 16px;
    background: var(--surface);
    border: 1px solid var(--border);
    border-radius: 12px;
}
.remedy + .remedy { margin-block-start: 8px; }
.remedy-what { flex: 1; line-height: 1.75; font-size: 14px; }
.remedy-rule { font-size: 11.5px; color: var(--muted); margin-block-start: 5px; }

@media (max-width: 640px) {
    .flow-step { padding-inline-start: 32px; }
    .change-move { margin-inline-start: 0; inline-size: 100%; }
}

@media print {
    .ask, .ask-examples { display: none; }
}