@charset "UTF-8";
/* ==========================================================================
   LifeWheel — public website
   --------------------------------------------------------------------------
   Loaded AFTER app.css, and it adds only what a marketing page needs that a
   product screen does not: a display type scale, an editorial section rhythm,
   and the workspace preview. Every colour, radius, shadow and space value
   comes from the tokens in app.css — there is not one hard-coded hex in this
   file outside the two places noted inline. That is what makes the landing
   page and the product look like the same company.

   ↔️ DIRECTION
   There is no `[dir="rtl"]` block in this stylesheet, and that is deliberate
   rather than an omission. Every offset is written as `inline-start` /
   `inline-end`, every grid follows the document direction, and every
   alignment is `start` / `end`. Arabic is therefore not a flipped copy of
   the English layout — it is the same layout read the other way. The two
   exceptions are marked `↔️` and are the two things CSS has no logical form
   for: `transform: translateX()` and the arrow glyph.

   Sections:
     1  Layout shell
     2  Typography
     3  Buttons & links
     4  Header, nav, drawer, language
     5  Hero
     6  Sections (points, steps, categories)
     7  System cards
     8  Workspace preview
     9  Library page
    10  Custom-system form
    11  Footer
    12  Responsive
    13  Reduced motion & print
   ========================================================================== */

/* ==========================================================================
   1. Layout shell
   ========================================================================== */
.mk {
    /* -- Display type scale ------------------------------------------
       Separate from --text-* in app.css on purpose. A product screen's
       largest heading is ~1.95rem because it labels dense content; a
       landing page genuinely needs display sizes. Keeping the two scales
       apart means the marketing page can be bold without inflating every
       heading inside the app. */
    --mk-h1: clamp(2.05rem, 1.42rem + 2.7vw, 3.35rem);
    --mk-h2: clamp(1.48rem, 1.2rem + 1.25vw, 2.1rem);
    --mk-h3: clamp(1rem, 0.97rem + 0.14vw, 1.08rem);
    --mk-lede: clamp(1rem, 0.95rem + 0.35vw, 1.16rem);

    /* -- Vertical rhythm ---------------------------------------------
       One value, used by every section. Sections that differ in height do
       so because their content differs, not because each one invented its
       own padding — which is the single biggest cause of a page that
       "feels" unfinished without anybody being able to say why. */
    --mk-sec-y: clamp(56px, 7vw, 104px);
    --mk-gap: clamp(20px, 2.4vw, 32px);

    /* -- Measure ------------------------------------------------------
       1120px, not 1280. A 1280px text column on a 27" screen is unreadable
       prose; the workspace preview is the only thing wide enough to want
       more, and it gets its own wider shell. */
    --mk-max: 1120px;
    --mk-pad: clamp(20px, 5vw, 40px);

    background: var(--bg-color);
    color: var(--text-main);
    /* ⚠️ Overrides the app's fixed background-image. There is no gradient
       on this page; see §9 of the brief and --bg-gradient in app.css. */
    background-image: none;
}

.mk-shell {
    inline-size: 100%;
    max-inline-size: var(--mk-max);
    margin-inline: auto;
    padding-inline: var(--mk-pad);
}

.mk-narrow { max-inline-size: 720px; }

/* ♿ The skip link. Off-screen until focused, then it lands where a
   reader's eye already is — the top inline-start corner, whichever corner
   that is in this direction. */
.mk-skip {
    position: absolute;
    inset-block-start: -100px;
    inset-inline-start: var(--mk-pad);
    z-index: 100;
    padding: 10px 16px;
    border-radius: var(--radius-sm);
    background: var(--primary-ink);
    color: var(--text-on-primary);
    font-weight: 600;
    transition: inset-block-start var(--transition);
}
.mk-skip:focus { inset-block-start: 12px; }

/* ==========================================================================
   2. Typography
   ========================================================================== */
.mk-h1, .mk-h2, .mk-h3 {
    /* `balance` keeps a two-line headline from leaving one orphan word.
       Supported where it matters and silently ignored elsewhere. */
    text-wrap: balance;
    color: var(--text-main);
}

.mk-h1 {
    font-size: var(--mk-h1);
    font-weight: 600;
    line-height: 1.08;
    /* Tight tracking is what makes Latin display type look drawn rather
       than typed. See the `[lang="ar"]` block below — it is removed for
       Arabic, where it does real damage. */
    letter-spacing: -0.025em;
}
.mk-h1-sm { font-size: clamp(1.8rem, 1.35rem + 1.9vw, 2.6rem); }

.mk-h2 {
    font-size: var(--mk-h2);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.02em;
}
.mk-h2-sm { font-size: clamp(1.2rem, 1.1rem + 0.5vw, 1.45rem); letter-spacing: -0.012em; }

.mk-h3 {
    font-size: var(--mk-h3);
    font-weight: 600;
    line-height: 1.35;
    margin-block-end: 6px;
}

/* -- 🅰️ Arabic typography (§5) ---------------------------------------
   Three corrections, all of which matter and none of which is cosmetic.

   1. NEGATIVE TRACKING IS REMOVED. Arabic is a joining script: the
      letters of a word are connected by design, and pulling them closer
      does not tighten the word, it muddies the joins and closes the
      counters at display sizes. `-0.025em` on a 3.3rem Arabic headline is
      the difference between a headline and a smudge.

   2. LINE HEIGHT GOES UP. Arabic has ascenders and descenders that reach
      further than Latin's, plus dots below the baseline. 1.08 leaves a
      ي under one line touching a خ on the next; 1.3 does not.

   3. HEADINGS GET LESS WEIGHT, BODY GETS MORE. IBM Plex Sans Arabic at
      600 reads noticeably heavier than the Latin at 600 — the strokes are
      denser — so a headline set at the same weight as its English
      counterpart looks bolder than intended. 600 → 600 stays for
      headings, but body text goes 400 → 450-equivalent via the variable
      axis where available, which keeps small Arabic legible on light.
   ------------------------------------------------------------------- */
html[lang="ar"] .mk-h1,
html[lang="ar"] .mk-h2,
html[lang="ar"] .mk-h2-sm,
html[lang="ar"] .mk-h3 {
    letter-spacing: 0;
}
html[lang="ar"] .mk-h1 { line-height: 1.28; }
html[lang="ar"] .mk-h2 { line-height: 1.34; }
html[lang="ar"] .mk-lede,
html[lang="ar"] .mk-sec-sub,
html[lang="ar"] .mk-point p,
html[lang="ar"] .mk-step p { line-height: 1.85; }

.mk-lede {
    font-size: var(--mk-lede);
    line-height: 1.55;
    color: var(--text-muted);
    max-inline-size: 46ch;
    margin-block-start: 14px;
}

.mk-eyebrow {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-block-end: 12px;
}
/* Uppercase and letter-spacing are meaningless in Arabic — the script has
   no case, and spacing out a joining script breaks the joins outright.
   The eyebrow keeps its role through size and colour instead. */
html[lang="ar"] .mk-eyebrow {
    text-transform: none;
    letter-spacing: 0;
    font-size: var(--text-sm);
}

.mk-sec-sub {
    font-size: var(--text-md);
    line-height: 1.65;
    color: var(--text-muted);
    max-inline-size: 62ch;
    margin-block-start: 14px;
}

.mk-quote {
    margin-block: 24px;
    padding-inline-start: 18px;
    /* ↔️ `border-inline-start` — the rule is on the reading edge in both
       directions with no second rule. */
    border-inline-start: 2px solid var(--border-strong);
    font-size: var(--text-md);
    line-height: 1.7;
    color: var(--text-muted);
    text-align: start;
}

.mk-center { text-align: center; }
.mk-center .mk-lede,
.mk-center .mk-sec-sub { margin-inline: auto; }

/* ==========================================================================
   3. Buttons & links
   ========================================================================== */
.mk-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-block-size: 40px;
    padding: 0 18px;
    border: 1px solid transparent;
    border-radius: var(--radius-sm);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1;
    white-space: nowrap;
    cursor: pointer;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.mk-btn-lg { min-block-size: 48px; padding: 0 24px; font-size: var(--text-base); }
.mk-btn-block { inline-size: 100%; }

.mk-btn-primary {
    background: var(--primary-ink);
    color: var(--text-on-primary);
}
.mk-btn-primary:hover { background: var(--primary-strong); }

.mk-btn-outline {
    background: var(--surface);
    border-color: var(--border-strong);
    color: var(--text-main);
}
.mk-btn-outline:hover { background: var(--surface-2); border-color: var(--text-faint); }

.mk-btn-quiet { color: var(--text-muted); }
.mk-btn-quiet:hover { color: var(--text-main); background: var(--surface-2); }

.mk-cta-row {
    display: flex;
    flex-wrap: wrap;
    gap: 12px;
    margin-block-start: 28px;
}
.mk-center-row { justify-content: center; }

.mk-link {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    font-size: var(--text-base);
    color: var(--primary-text);
    /* An underline that appears on hover rather than a colour that changes:
       colour alone is not a state change anybody can see reliably. */
    text-underline-offset: 4px;
}
.mk-link:hover { text-decoration: underline; }

/* ↔️ THE ONE MIRRORED GLYPH.
   `m-arrow` means "forward", and forward is left in Arabic. Every other
   icon on this site is an object — a wallet, a car — and mirroring those
   would be wrong, which is why this is a class and not a blanket rule on
   `svg`. See lw_icon() in app/Helpers/systems.php. */
[dir="rtl"] .m-arrow { transform: scaleX(-1); }

/* The arrow nudges toward the reading direction on hover. `--dir` is +1 in
   RTL and -1 in LTR (set on <html> in app.css), so one declaration moves it
   the correct way in both — a bare `translateX(3px)` would move it forward
   in English and backward in Arabic. */
.mk-link:hover .m-arrow,
.mk-sys-act:hover .m-arrow { transform: translateX(calc(3px * var(--dir) * -1)); }
[dir="rtl"] .mk-link:hover .m-arrow,
[dir="rtl"] .mk-sys-act:hover .m-arrow { transform: scaleX(-1) translateX(3px); }

.m-ico { inline-size: 18px; block-size: 18px; flex: none; }

/* ♿ One focus ring for the whole site, on the token accent, with an offset
   so it never sits on top of the thing it is marking. `:focus-visible` and
   not `:focus`, so a mouse click on a button does not leave a ring behind. */
.mk a:focus-visible,
.mk button:focus-visible,
.mk input:focus-visible,
.mk textarea:focus-visible {
    outline: var(--focus-ring);
    outline-offset: 2px;
    border-radius: var(--radius-xs);
}

/* ==========================================================================
   4. Header, nav, drawer, language
   ========================================================================== */
.mk-header {
    position: sticky;
    inset-block-start: 0;
    z-index: 40;
    background: color-mix(in srgb, var(--bg-color) 88%, transparent);
    -webkit-backdrop-filter: saturate(1.4) blur(10px);
    backdrop-filter: saturate(1.4) blur(10px);
    border-block-end: 1px solid transparent;
    transition: border-color var(--transition), background-color var(--transition);
}
/* The border appears only once there is content scrolled underneath it. A
   permanent rule under a header at scroll position 0 is a line separating
   nothing from nothing. Class set by the script in _footer.php. */
.mk-header.is-stuck {
    border-block-end-color: var(--border);
    background: color-mix(in srgb, var(--bg-color) 96%, transparent);
}

.mk-header-in {
    display: flex;
    align-items: center;
    gap: clamp(16px, 3vw, 40px);
    min-block-size: 62px;
}

.mk-brand {
    display: inline-flex;
    align-items: center;
    gap: 9px;
    font-weight: 600;
    color: var(--text-main);
    flex: none;
}
.mk-brand-mark {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    color: var(--primary-text);
}
.mk-brand-mark svg { inline-size: 26px; block-size: 26px; }
.mk-brand-name { font-size: 1.02rem; letter-spacing: -0.015em; }

.mk-nav {
    display: flex;
    align-items: center;
    gap: 4px;
    /* ↔️ Pushes the actions group to the END of the bar — the right in
       English, the left in Arabic — without either side being named. */
    margin-inline-end: auto;
}
.mk-nav-link {
    padding: 7px 11px;
    border-radius: var(--radius-xs);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    transition: color var(--transition), background-color var(--transition);
}
.mk-nav-link:hover { color: var(--text-main); background: var(--surface-2); }
.mk-nav-link.is-on { color: var(--text-main); font-weight: 600; }

.mk-actions { display: flex; align-items: center; gap: 8px; flex: none; }

/* -- Language switch ------------------------------------------------- */
.mk-lang {
    display: inline-flex;
    align-items: center;
    gap: 2px;
    padding: 3px 8px 3px 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
}
.mk-lang-globe { inline-size: 15px; block-size: 15px; color: var(--text-faint); margin-inline-end: 3px; }
.mk-lang-on,
.mk-lang-off { padding: 3px 7px; border-radius: var(--radius-pill); line-height: 1.4; }
.mk-lang-on { font-weight: 600; color: var(--text-main); background: var(--surface-3); }
.mk-lang-off { color: var(--text-faint); }
.mk-lang-off:hover { color: var(--text-main); }

/* -- Theme toggle ----------------------------------------------------- */
.mk-theme {
    display: grid;
    place-items: center;
    inline-size: 34px;
    block-size: 34px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    color: var(--text-muted);
    transition: color var(--transition), border-color var(--transition), background-color var(--transition);
}
.mk-theme:hover { color: var(--text-main); border-color: var(--border-strong); background: var(--surface-2); }
.mk-theme .m-ico { inline-size: 16px; block-size: 16px; }
/* Only one glyph is ever in the box. Both are in the DOM so the swap costs
   no layout and needs no icon library at runtime; `display` picks. */
.mk-theme-moon { display: none; }
.mk-theme-sun  { display: block; }
body.dark-mode .mk-theme-moon { display: none; }
body.dark-mode .mk-theme-sun  { display: block; }
body.light-mode .mk-theme-sun  { display: none; }
body.light-mode .mk-theme-moon { display: block; }

/* -- Burger + drawer -------------------------------------------------- */
.mk-burger {
    display: none;
    flex-direction: column;
    justify-content: center;
    gap: 5px;
    inline-size: 38px;
    block-size: 38px;
    padding-inline: 9px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
}
.mk-burger span {
    display: block;
    block-size: 1.5px;
    background: var(--text-main);
    transition: transform var(--transition), opacity var(--transition);
}
.mk-burger[aria-expanded="true"] span:first-child { transform: translateY(3.2px) rotate(45deg); }
.mk-burger[aria-expanded="true"] span:last-child  { transform: translateY(-3.2px) rotate(-45deg); }

.mk-drawer { border-block-start: 1px solid var(--border); background: var(--surface); }
.mk-drawer-in { display: flex; flex-direction: column; padding-block: 8px 16px; }
.mk-drawer-link {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding-block: 13px;
    border-block-end: 1px solid var(--border);
    font-size: var(--text-md);
    font-weight: 500;
    color: var(--text-main);
}
.mk-drawer-link .m-arrow { color: var(--text-faint); }
.mk-drawer-link:last-child { border-block-end: 0; }
body.mk-drawer-open { overflow: hidden; }

/* ==========================================================================
   5. Hero
   ========================================================================== */
.mk-hero { padding-block: clamp(48px, 7vw, 96px) clamp(40px, 5vw, 72px); }
.mk-hero-in {
    display: grid;
    grid-template-columns: minmax(0, 1.15fr) minmax(0, 0.85fr);
    gap: clamp(32px, 5vw, 72px);
    align-items: center;
}
.mk-hero-note {
    margin-block-start: 22px;
    font-size: var(--text-sm);
    color: var(--text-faint);
}

/* The four core systems, as a list rather than four cards. A list reads as
   "these are the things"; four boxes read as "here is a grid of features". */
.mk-hero-list {
    display: flex;
    flex-direction: column;
    border-block-start: 1px solid var(--border);
}
.mk-hero-list li {
    display: grid;
    grid-template-columns: auto 1fr;
    grid-template-rows: auto auto;
    column-gap: 12px;
    row-gap: 2px;
    padding-block: 15px;
    border-block-end: 1px solid var(--border);
}
.mk-hero-ico {
    grid-row: 1 / span 2;
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-muted);
}
.mk-hero-name { font-weight: 600; font-size: var(--text-base); }
.mk-hero-desc { font-size: var(--text-sm); color: var(--text-faint); line-height: 1.5; }

/* ==========================================================================
   6. Sections
   ========================================================================== */
.mk-sec { padding-block: var(--mk-sec-y); }
/* A hairline above the section, inset to the shell so it lines up with the
   text rather than running edge to edge. */
.mk-sec-rule { border-block-start: 1px solid var(--border); }
.mk-sec-tint { background: var(--surface-2); }
.mk-sec-head { margin-block-end: clamp(32px, 4vw, 56px); }
.mk-sec-foot { margin-block-start: 28px; }

.mk-cols-3,
.mk-cols-4 { display: grid; gap: var(--mk-gap); }
.mk-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.mk-cols-4 { grid-template-columns: repeat(4, minmax(0, 1fr)); }

.mk-point p { color: var(--text-muted); font-size: var(--text-base); line-height: 1.65; }
.mk-point-rule {
    display: block;
    inline-size: 28px;
    block-size: 2px;
    margin-block-end: 16px;
    background: var(--primary);
    border-radius: 2px;
}

/* -- Steps ------------------------------------------------------------ */
.mk-steps { display: grid; gap: clamp(22px, 3vw, 34px); }
.mk-step {
    display: grid;
    grid-template-columns: auto minmax(0, 1fr);
    gap: 18px;
    align-items: start;
    padding-block-end: clamp(22px, 3vw, 34px);
    border-block-end: 1px solid var(--border);
}
.mk-step:last-child { border-block-end: 0; padding-block-end: 0; }
.mk-step-n {
    display: grid;
    place-items: center;
    inline-size: 28px;
    block-size: 28px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: var(--text-muted);
}
.mk-step p { color: var(--text-muted); font-size: var(--text-base); line-height: 1.65; max-inline-size: 62ch; }

/* -- Category cards --------------------------------------------------- */
.mk-cats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--mk-gap); }
.mk-cat {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition), background-color var(--transition);
}
.mk-cat:hover { border-color: var(--border-strong); background: var(--surface-2); }
.mk-cat-top { display: flex; align-items: baseline; gap: 8px; }
.mk-cat-name {
    font-weight: 600;
    font-size: var(--text-md);
    color: var(--text-main);
    /* ↔️ THE AUTO MARGIN IS ON THE NAME, NOT ON THE COUNT — and that is a
       fix, not a preference.
       ------------------------------------------------------------------
       `margin-inline-start: auto` on `.mk-cat-n` looks like the obvious way
       to push the count to the far end of the row, and it is what this rule
       used to say. It did not work in Arabic, and the reason is worth
       writing down because it will happen again:

       **Logical properties resolve against the ELEMENT'S OWN direction,
       not its parent's.** `.mk-cat-n` carries `dir="ltr"` — it has to, so a
       bare digit does not get reordered by the bidi algorithm — and that
       one attribute makes `inline-start` mean LEFT for that span even
       though it sits inside an RTL row. So on the Arabic page the auto
       margin collapsed to the wrong side and the count sat glued to the
       name instead of at the opposite edge. Measured in the browser:
       `margin-inline-start: auto` computed to `margin-left: 232px`.

       The name has no `dir` of its own, so it inherits the document's and
       resolves correctly in both. Pushing free space AFTER the name gets
       the identical layout with none of the trap.

       The general rule for this stylesheet: never put a logical margin on
       an element that overrides `dir`. Put it on a neighbour that doesn't. */
    margin-inline-end: auto;
}
.mk-cat-n {
    font-size: var(--text-xs);
    font-variant-numeric: tabular-nums;
    color: var(--text-faint);
}
.mk-cat-list { font-size: var(--text-sm); line-height: 1.6; color: var(--text-faint); }

/* -- Community list --------------------------------------------------- */
.mk-split { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 0.8fr); gap: clamp(32px, 5vw, 64px); align-items: center; }
.mk-comm { display: flex; flex-direction: column; border-block-start: 1px solid var(--border); }
.mk-comm li {
    display: flex;
    align-items: center;
    gap: 12px;
    padding-block: 16px;
    border-block-end: 1px solid var(--border);
    font-size: var(--text-base);
    font-weight: 500;
}
.mk-comm svg { color: var(--text-faint); }

/* ==========================================================================
   7. System cards
   ========================================================================== */
.mk-sys {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 18px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface);
    transition: border-color var(--transition), box-shadow var(--transition);
}
.mk-sys:hover { border-color: var(--border-strong); box-shadow: var(--shadow-sm); }

/* A `soon` system is dimmed, not hidden. See _system-card.php. */
.mk-sys.is-soon { background: transparent; }
.mk-sys.is-soon .mk-sys-ico { opacity: 0.55; }
.mk-sys.is-soon .mk-sys-desc { color: var(--text-faint); }

.mk-sys-head { display: flex; align-items: center; gap: 10px; }
.mk-sys-ico {
    display: grid;
    place-items: center;
    inline-size: 32px;
    block-size: 32px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-muted);
    flex: none;
}
.mk-sys.is-core .mk-sys-ico { background: var(--primary-soft); color: var(--primary-text); }
.mk-sys-name { font-size: var(--text-md); font-weight: 600; line-height: 1.3; }
.mk-sys-desc { font-size: var(--text-sm); line-height: 1.6; color: var(--text-muted); flex: 1; }
.mk-sys-foot { margin-block-start: 2px; }
.mk-sys-act {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--primary-text);
}
.mk-sys.is-soon .mk-sys-act { color: var(--text-faint); }
.mk-sys-act .m-ico { inline-size: 15px; block-size: 15px; }

/* -- Signed-in card actions (Phase 2) --------------------------------
   A signed-out visitor gets a link; somebody with an account gets a real
   control that posts. Both live in the same footer slot so the card does
   not change shape depending on who is reading it. */
.mk-sys-foot.is-live-action {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-wrap: wrap;
}
.mk-sys-btn {
    padding: 6px 13px;
    border: 1px solid var(--primary-ink);
    border-radius: var(--radius-sm);
    background: var(--primary-ink);
    color: var(--text-on-primary);
    font-size: var(--text-sm);
    font-weight: 600;
    line-height: 1.5;
    transition: background-color var(--transition), border-color var(--transition), color var(--transition);
}
.mk-sys-btn:hover { background: var(--primary-strong); border-color: var(--primary-strong); }
/* «Remove» on a card the reader already has: quiet by default, and only
   red once they are actually pointing at it. A permanently red control on
   every added card would make a library of switched-on systems look like a
   list of problems. */
.mk-sys-btn.is-off {
    background: transparent;
    border-color: var(--border);
    color: var(--text-faint);
}
.mk-sys-btn.is-off:hover {
    background: var(--danger-soft);
    border-color: var(--danger);
    color: var(--danger);
}
/* The «Added» confirmation. A tick AND a word — a green check alone is a
   state nobody can read out loud. */
.mk-sys-on {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--success);
    /* ↔️ Pushes the two controls to the inline END of the footer. No `dir`
       override on this element, so it resolves per the document. */
    margin-inline-end: auto;
}
.mk-sys-on .m-ico { inline-size: 15px; block-size: 15px; }

/* -- Availability pill ------------------------------------------------ */
.mk-pill {
    /* ↔️ Sits at the END of the head row in both directions. */
    margin-inline-start: auto;
    flex: none;
    padding: 3px 8px;
    border-radius: var(--radius-pill);
    font-size: var(--text-xs);
    font-weight: 600;
    line-height: 1.4;
    white-space: nowrap;
}
.mk-pill.is-live { background: var(--success-soft); color: var(--success); }
.mk-pill.is-beta { background: var(--warning-soft); color: var(--warning); }
.mk-pill.is-soon { background: var(--surface-3); color: var(--text-faint); }

/* ==========================================================================
   8. Workspace preview
   ========================================================================== */
.mk-frame {
    max-inline-size: 1000px;
    margin-inline: auto;
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    box-shadow: var(--shadow-lg);
    overflow: hidden;
}
.mk-frame-bar {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 11px 14px;
    border-block-end: 1px solid var(--border);
    background: var(--surface-2);
}
.mk-dot { inline-size: 9px; block-size: 9px; border-radius: 50%; background: var(--border-strong); }
/* ↔️ The gap between the dots and the URL lives on the LAST DOT, not on the
   URL. Same trap as `.mk-cat-name` above: `.mk-frame-url` carries
   `dir="ltr"`, so a logical margin on it resolves against LTR and lands on
   the wrong side of the Arabic layout. The dots inherit the document
   direction and resolve correctly. */
.mk-dot:last-of-type { margin-inline-end: 8px; }
.mk-frame-url {
    font-size: var(--text-xs);
    color: var(--text-faint);
    font-variant-numeric: tabular-nums;
}
.mk-frame-note {
    margin-block-start: 14px;
    text-align: center;
    font-size: var(--text-xs);
    color: var(--text-faint);
}

.mk-app { display: grid; grid-template-columns: 186px minmax(0, 1fr); }

/* ↔️ The sidebar is the FIRST grid column, and the first column is the
   inline-start one — the left in English, the right in Arabic. §15's
   "navigation must automatically switch sides" costs nothing here because
   nothing was ever positioned. */
.mk-app-side {
    display: flex;
    flex-direction: column;
    gap: 1px;
    padding: 14px 10px;
    border-inline-end: 1px solid var(--border);
    background: var(--surface-2);
}
.mk-app-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 4px 8px 14px;
    font-size: var(--text-sm);
    font-weight: 600;
}
.mk-app-dot { inline-size: 8px; block-size: 8px; border-radius: 50%; background: var(--primary); }
.mk-app-nav {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 8px;
    border-radius: var(--radius-xs);
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.mk-app-nav svg { inline-size: 15px; block-size: 15px; }
.mk-app-nav.is-on { background: var(--surface); color: var(--text-main); font-weight: 600; }

.mk-app-main { padding: 18px; display: flex; flex-direction: column; gap: 16px; }
.mk-app-top { display: flex; align-items: center; gap: 16px; }
.mk-app-hi { font-size: var(--text-md); font-weight: 600; }
.mk-app-sub { font-size: var(--text-xs); color: var(--text-faint); margin-block-start: 2px; }
.mk-app-cmd {
    margin-inline-start: auto;
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 7px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-2);
    font-size: var(--text-xs);
    color: var(--text-faint);
    flex: none;
}
.mk-app-cmd svg { inline-size: 14px; block-size: 14px; }
.mk-app-cmd kbd {
    padding: 1px 5px;
    border: 1px solid var(--border);
    border-radius: 4px;
    background: var(--surface);
    font-family: inherit;
    font-size: 0.68rem;
}

.mk-app-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 10px; }
.mk-tile {
    display: flex;
    flex-direction: column;
    gap: 5px;
    padding: 12px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.mk-tile-h { display: flex; align-items: center; gap: 6px; font-size: var(--text-xs); color: var(--text-faint); }
.mk-tile-h svg { inline-size: 13px; block-size: 13px; }
.mk-tile-n {
    font-size: 1.32rem;
    font-weight: 600;
    line-height: 1.1;
    /* ♿/§31 Tabular figures. Four numbers stacked in a row that do not share
       a digit width read as four different type sizes. */
    font-variant-numeric: tabular-nums;
    letter-spacing: -0.02em;
}
.mk-tile-cur { font-size: 0.62em; font-weight: 500; color: var(--text-faint); margin-inline-start: 4px; }
.mk-tile-s { font-size: var(--text-xs); color: var(--text-faint); }
.mk-tile-s.mk-warn { color: var(--warning); }

.mk-app-today {
    padding: 14px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface);
}
.mk-app-h { font-size: var(--text-sm); font-weight: 600; margin-block-end: 8px; }
.mk-row { display: flex; align-items: center; gap: 10px; padding-block: 7px; border-block-end: 1px solid var(--border); }
.mk-row:last-child { border-block-end: 0; }
.mk-row-ico {
    display: grid;
    place-items: center;
    inline-size: 22px;
    block-size: 22px;
    border-radius: var(--radius-xs);
    background: var(--surface-2);
    color: var(--text-faint);
    flex: none;
}
.mk-row-ico svg { inline-size: 13px; block-size: 13px; }
.mk-row-ico.is-ok   { background: var(--success-soft); color: var(--success); }
.mk-row-ico.is-warn { background: var(--warning-soft); color: var(--warning); }
.mk-row-t { font-size: var(--text-xs); color: var(--text-muted); }

.mk-app-quick { display: flex; flex-wrap: wrap; gap: 7px; }
.mk-chip {
    padding: 5px 10px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-xs);
    color: var(--text-muted);
}

/* ==========================================================================
   9. Library page
   ========================================================================== */
.mk-page-head { padding-block: clamp(40px, 5vw, 72px) clamp(24px, 3vw, 36px); }

.mk-filter-wrap {
    position: sticky;
    inset-block-start: 62px;
    z-index: 30;
    padding-block: 12px;
    /* ⚠️ OPAQUE, not translucent.
       This bar was `color-mix(… 94%, transparent)` with a blur, matching the
       page header. On the header that reads as glass over a scrolling page;
       here it read as a bug — the availability pills of the cards passing
       underneath ghosted through the bar as coloured smudges, because a pill
       is a small saturated shape and 6% of one is still visible. A sticky
       strip that sits directly on top of dense card content has to be solid. */
    background: var(--bg-color);
    border-block: 1px solid var(--border);
}
.mk-filter {
    display: flex;
    gap: 6px;
    overflow-x: auto;
    /* The filter row scrolls on a phone rather than wrapping to three lines.
       No visible scrollbar, but the overflow is real, so it is reachable by
       swipe, trackpad and keyboard alike. */
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
}
.mk-filter::-webkit-scrollbar { display: none; }
.mk-fbtn {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 7px 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-pill);
    background: var(--surface);
    font-size: var(--text-sm);
    font-weight: 500;
    color: var(--text-muted);
    white-space: nowrap;
    transition: background-color var(--transition), color var(--transition), border-color var(--transition);
}
.mk-fbtn:hover { color: var(--text-main); border-color: var(--border-strong); }
.mk-fbtn.is-on {
    background: var(--primary-ink);
    border-color: var(--primary-ink);
    color: var(--text-on-primary);
}
.mk-fbtn-n { font-size: var(--text-xs); font-variant-numeric: tabular-nums; opacity: 0.75; }

.mk-lib { padding-block: clamp(32px, 4vw, 52px); }
.mk-lib-sec {
    padding-block-end: clamp(32px, 4vw, 52px);
    /* ⚠️ On the SECTION, because the section is what `#cat-work` targets.
       This was on `.mk-lib-head` — an element the anchor never resolves to —
       so following a category link from the footer scrolled the heading
       underneath the two sticky bars and the reader landed on a row of
       cards with no idea which category they were in.
       62px header + 51px filter bar + breathing room. */
    scroll-margin-block-start: 132px;
}
.mk-lib-head {
    display: flex;
    align-items: baseline;
    gap: 10px;
    margin-block-end: 18px;
    padding-block-end: 12px;
    border-block-end: 1px solid var(--border);
}
.mk-lib-n { font-size: var(--text-sm); color: var(--text-faint); font-variant-numeric: tabular-nums; }
.mk-empty { color: var(--text-faint); font-size: var(--text-base); }

/* ==========================================================================
   10. Custom-system form
   ========================================================================== */
.mk-form-wrap { padding-block-end: clamp(56px, 7vw, 104px); }
.mk-form { display: grid; gap: 22px; }

.mk-field { display: grid; gap: 6px; }
.mk-label { font-size: var(--text-base); font-weight: 600; }
.mk-opt {
    margin-inline-start: 8px;
    font-size: var(--text-xs);
    font-weight: 500;
    color: var(--text-faint);
}
.mk-hint { font-size: var(--text-sm); color: var(--text-faint); line-height: 1.5; }

.mk-input {
    inline-size: 100%;
    padding: 11px 13px;
    border: 1px solid var(--border-strong);
    border-radius: var(--radius-sm);
    background: var(--surface);
    color: var(--text-main);
    font-size: var(--text-base);
    line-height: 1.6;
    transition: border-color var(--transition), box-shadow var(--transition);
}
.mk-input::placeholder { color: var(--text-faint); }
.mk-input:focus {
    outline: none;
    border-color: var(--focus);
    /* A ring, not a glow — 2px at full opacity rather than 20px at 15%. */
    box-shadow: 0 0 0 2px var(--primary-soft);
}
.mk-textarea { resize: vertical; min-block-size: 88px; }
.mk-field.is-bad .mk-input { border-color: var(--danger); }
.mk-err { font-size: var(--text-sm); color: var(--danger); font-weight: 500; }

.mk-alert {
    padding: 12px 14px;
    margin-block-end: 20px;
    border: 1px solid var(--danger);
    border-radius: var(--radius-sm);
    background: var(--danger-soft);
    color: var(--danger);
    font-size: var(--text-sm);
    font-weight: 500;
}

.mk-done {
    padding: clamp(28px, 4vw, 44px);
    border: 1px solid var(--border);
    border-radius: var(--radius-lg);
    background: var(--surface);
    text-align: start;
}
.mk-done p { color: var(--text-muted); font-size: var(--text-base); line-height: 1.65; margin-block-start: 10px; }
.mk-done-ico {
    display: grid;
    place-items: center;
    inline-size: 40px;
    block-size: 40px;
    margin-block-end: 16px;
    border-radius: var(--radius-pill);
    background: var(--success-soft);
    color: var(--success);
}

/* ==========================================================================
   11. Footer
   ========================================================================== */
.mk-footer {
    padding-block: clamp(44px, 5vw, 72px) 28px;
    border-block-start: 1px solid var(--border);
    background: var(--surface-2);
}
.mk-footer-top {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 2fr);
    gap: clamp(32px, 5vw, 64px);
}
.mk-footer-tag { margin-block-start: 12px; font-size: var(--text-sm); color: var(--text-muted); max-inline-size: 30ch; }
.mk-footer-lang { margin-block-start: 20px; display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.mk-footer-lang-label { font-size: var(--text-xs); font-weight: 600; color: var(--text-faint); }

.mk-footer-cols { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 24px; }
.mk-footer-col { display: flex; flex-direction: column; gap: 9px; }
.mk-footer-h {
    font-size: var(--text-xs);
    font-weight: 600;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-faint);
    margin-block-end: 2px;
}
html[lang="ar"] .mk-footer-h { text-transform: none; letter-spacing: 0; font-size: var(--text-sm); }
.mk-footer-col a { font-size: var(--text-sm); color: var(--text-muted); }
.mk-footer-col a:hover { color: var(--text-main); }

.mk-footer-legal {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 20px;
    margin-block-start: clamp(36px, 4vw, 56px);
    padding-block-start: 20px;
    border-block-start: 1px solid var(--border);
    font-size: var(--text-xs);
    color: var(--text-faint);
}
.mk-footer-legal nav { display: flex; gap: 18px; margin-inline-start: auto; }
.mk-footer-legal a:hover { color: var(--text-main); }

/* ==========================================================================
   12. Responsive
   --------------------------------------------------------------------------
   §33 asks for an intentional mobile layout rather than a shrunk desktop.
   The three things that genuinely change shape, rather than merely getting
   narrower, are: the nav becomes a drawer; the workspace preview drops its
   sidebar (a 186px rail beside a 174px content column is not a preview of
   anything); and the hero's two columns stack with the system list first
   made shorter, because a visitor on a phone should reach the CTA without
   scrolling past four descriptions.
   ========================================================================== */
@media (max-width: 1000px) {
    .mk-cols-4 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-cats { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-hero-in { grid-template-columns: 1fr; gap: 40px; }
    .mk-lede, .mk-sec-sub { max-inline-size: none; }
    .mk-split { grid-template-columns: 1fr; gap: 32px; }
    .mk-footer-top { grid-template-columns: 1fr; }
}

@media (max-width: 860px) {
    .mk-nav { display: none; }
    .mk-burger { display: flex; }
    .mk-only-wide { display: none; }
    .mk-cols-3 { grid-template-columns: repeat(2, minmax(0, 1fr)); }

    /* The preview loses its rail and its tiles go two-up. Everything else
       inside it stays exactly as it is — this is a smaller screen, not a
       different screen. */
    .mk-app { grid-template-columns: 1fr; }
    .mk-app-side { display: none; }
    .mk-app-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-app-cmd kbd { display: none; }
}

@media (max-width: 620px) {
    .mk-cols-3, .mk-cols-4, .mk-cats { grid-template-columns: 1fr; }
    .mk-footer-cols { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .mk-footer-legal nav { margin-inline-start: 0; }
    .mk-btn-lg { inline-size: 100%; }
    .mk-cta-row { flex-direction: column; align-items: stretch; }
    .mk-app-top { flex-direction: column; align-items: start; gap: 10px; }
    .mk-app-cmd { margin-inline-start: 0; inline-size: 100%; }
    .mk-filter-wrap { inset-block-start: 56px; }
    /* Edge-to-edge on a phone: the filter row must be able to scroll past
       the shell's padding or the last chip is unreachable. */
    .mk-filter { padding-inline: var(--mk-pad); margin-inline: calc(var(--mk-pad) * -1); }

    /* ======================================================================
       PHONE: readable type
       ----------------------------------------------------------------------
       The shared scale bottoms out at 11.27px for `--text-xs` and 12.79px
       for `--text-sm`, measured at 390px. That is defensible in the app,
       which is dense operational UI a person already knows how to read. It
       is not defensible on a landing page somebody is deciding whether to
       trust — eight separate elements were rendering below 13px, including
       the nav links, the language switch and the hero's supporting line.

       Raised only here. `marketing.css` is loaded on the public pages and
       nowhere else, so the app's own density is untouched.
       ====================================================================== */
    :root {
        --text-xs: 0.8125rem;   /* 13px */
        --text-sm: 0.875rem;    /* 14px */
    }

    /* ======================================================================
       PHONE: the header must fit, and the menu button must be tappable
       ----------------------------------------------------------------------
       ⚠️ THE BUG THIS FIXES. The bar was laying out brand + language switch
       + theme button + call-to-action + burger on one row. Measured at
       390px it overflowed by 93px, and at 360px by 123px — with the burger
       itself at a NEGATIVE x-coordinate, i.e. rendered off the edge of the
       screen and impossible to tap. The whole page scrolled sideways as a
       result.

       The fix is not to shrink things until they fit. It is to decide what
       belongs in a phone header: navigation. Language and theme are
       settings, so they move into the drawer (see `_nav.php`), leaving the
       bar with the brand, one action, and the way into the menu.
       ====================================================================== */
    .mk-header-in {
        gap: 10px;
        min-block-size: 56px;
    }

    /* The two settings controls live in the drawer on a phone. */
    .mk-actions > .mk-lang,
    .mk-actions > .mk-theme { display: none; }

    /* ⚠️ The group MUST be allowed to shrink. Its base rule is `flex: none`,
       which is right on a desktop and is what put the burger back off the
       screen here: with a long label the action group measured 298px, the
       button alone 164px, and the burger landed at x=394 on a 380px
       viewport. Arabic hid it — «إلى مساحة العمل» is short enough to fit —
       and English did not, which is exactly why the sweep runs both. */
    .mk-actions {
        gap: 8px;
        flex: 1 1 auto;
        min-inline-size: 0;
        justify-content: flex-end;
    }

    /* 👆 Everything in the bar clears the 44px touch floor. The burger was
       38px, the brand 28px and the action 40px — all comfortably missable. */
    .mk-burger {
        inline-size: 44px;
        block-size: 44px;
        flex: none;
    }
    .mk-brand { min-block-size: 44px; flex: none; }

    /* 🔤 Mark only, no wordmark, under 440px.
       -------------------------------------------------------------------
       The alternative was letting the action truncate — and it did:
       «الرجوع لمسا…» at 360px, which is a button whose label you have to
       guess at. The wordmark is the least load-bearing thing in the bar:
       the mark beside it is the same link, the drawer and the footer both
       carry the full name, and mark-only is what a phone header is
       supposed to look like. Giving up ~72px here is what lets the action
       read in full. */
    .mk-brand-name { display: none; }
    .mk-actions .mk-btn {
        min-block-size: 44px;
        padding-inline: 14px;
        /* The label gives up width before anything else does: the burger is
           the one control that must never be unreachable, so it keeps its
           44px and this yields instead. `flex: 0 1 auto` with a zero minimum
           is what actually lets it shrink.

           ⚠️ NO `display` HERE. An earlier version set `display: block` to
           get an ellipsis, and `.mk-actions .mk-btn` (0,2,0) outranks
           `.mk-only-wide { display: none }` (0,1,0) — so it silently
           un-hid the "Sign in" button that the 860px breakpoint had put
           away, and the phone header grew a SECOND call to action. The
           wordmark being hidden above leaves plenty of room, so nothing
           needs to be truncated and this rule has no business touching
           `display` at all. */
        flex: 0 1 auto;
        min-inline-size: 0;
        white-space: nowrap;
        overflow: hidden;
    }

    /* ======================================================================
       PHONE: the drawer
       ====================================================================== */
    /* 👆 48px rows — a menu is a list of targets and nothing else, so there
       is no reason for them to be tight. */
    .mk-drawer-link { padding-block: 0; min-block-size: 48px; }

    /* The settings row at the foot of the drawer: language on one side,
       theme on the other. Logical properties, so it reverses with the
       document rather than being repositioned. */
    .mk-drawer-tools {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 12px;
        margin-block-start: 12px;
        padding-block-start: 14px;
        border-block-start: 1px solid var(--border);
    }
    .mk-drawer-tools .mk-lang { min-block-size: 44px; padding-inline: 12px; }
    .mk-drawer-tools .mk-lang-on,
    .mk-drawer-tools .mk-lang-off {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding-inline: 6px;
    }
    .mk-drawer-tools .mk-theme {
        inline-size: 44px;
        block-size: 44px;
        flex: none;
    }
}

/* The drawer's settings row exists only for phones; on a wide screen the
   same controls are in the bar and this copy must not appear. */
@media (min-width: 621px) {
    .mk-drawer-tools { display: none; }
}

/* ==========================================================================
   PHONE: reachable inline links
   --------------------------------------------------------------------------
   `.mk-link` is the "see the full library →" style used through the page. At
   24px tall it is a reading-sized target, which is fine beside body text on a
   desktop and not fine as the only way forward on a phone.
   ========================================================================== */
@media (max-width: 620px) {
    .mk-link { min-block-size: 44px; }

    /* ======================================================================
       PHONE: the footer is a list of targets too
       ----------------------------------------------------------------------
       Fourteen footer links were rendering at 23px in a stacked column and
       the footer's own language switch at 24px. Reading-sized text set close
       together is the single easiest thing to mis-tap on a phone, and the
       footer is where somebody goes when they are already looking for
       something specific.
       ====================================================================== */
    .mk-footer-col a {
        display: flex;
        align-items: center;
        min-block-size: 44px;
    }
    .mk-footer-lang .mk-lang { min-block-size: 44px; padding-inline: 12px; }
    .mk-footer-lang .mk-lang-on,
    .mk-footer-lang .mk-lang-off {
        display: inline-flex;
        align-items: center;
        min-block-size: 44px;
        padding-inline: 6px;
    }

    /* The legal strip at the very bottom sits on one cramped line at 360px. */
    .mk-footer-legal { flex-direction: column; align-items: start; gap: 10px; }
    .mk-footer-legal nav { display: flex; flex-wrap: wrap; gap: 4px 16px; }
    .mk-footer-legal nav a { display: flex; align-items: center; min-block-size: 44px; }

    /* ======================================================================
       PHONE: the systems library
       ----------------------------------------------------------------------
       Same site, same header, same stylesheet — and the page a visitor lands
       on straight after the home page. Measured at 390px it carried 37
       controls under the touch floor: 7 category chips at 39px, 19 "learn
       more" links at 23px and 11 add/remove buttons at 35px. The chips are
       the worst of the three, because they sit in a horizontal scroller
       where a mis-tap scrolls the row instead of selecting anything.
       ====================================================================== */
    .mk-fbtn { min-block-size: 44px; }
    .mk-sys-act { min-block-size: 44px; }
    .mk-sys-btn { min-block-size: 44px; padding-inline: 16px; }
}

/* ==========================================================================
   13. Reduced motion & print
   ========================================================================== */
@media (prefers-reduced-motion: reduce) {
    /* ♿ Transitions are removed, not shortened. The arrow nudge and the
       skip-link slide are the only movement on this site, and neither
       carries information — so for somebody who has asked for less motion
       there is nothing lost by removing them entirely. */
    .mk *,
    .mk *::before,
    .mk *::after {
        transition-duration: 0.01ms !important;
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        scroll-behavior: auto !important;
    }
    .mk-link:hover .m-arrow,
    .mk-sys-act:hover .m-arrow { transform: none; }
    [dir="rtl"] .mk-link:hover .m-arrow,
    [dir="rtl"] .mk-sys-act:hover .m-arrow { transform: scaleX(-1); }
}

@media print {
    .mk-header, .mk-footer, .mk-skip, .mk-filter-wrap, .mk-cta-row { display: none !important; }
    .mk-frame { box-shadow: none; }
    .mk-sec { padding-block: 20px; }
}