/* Arabic Ladder portal · what the app needs beside kit.css (6 Oct 2026). kit.css itself is copied unchanged.
 * Loaded after kit.css and kit-extra.css on portal routes only (src/portal/kit/KitHead.tsx). */

/* 1 · Transliteration letters (owner, 6 Oct). Jost misplaces the macron on ā ī ū and has no ḥ ṣ ḍ ṭ ẓ ʿ ʾ.
 * These two faces join the family "Jost" for exactly those letters (and their capitals), so kit.css's
 * --font-sans stays as it is. Reddit Sans (SIL OFL, Google Fonts) is the closest match found: two-storey a,
 * the same weight and x-height (14 geometric sans tried, 6 Oct). Declared after the Google Fonts sheet
 * (KitHead orders them), so these win for the letters they cover; every other letter stays Jost. */
@font-face{font-family:Jost;font-style:normal;font-weight:400;font-display:swap;src:url(https://fonts.gstatic.com/s/redditsans/v6/EYq3maFOxq1T_-ETdN7EKQNle5a92XNFepo.woff2) format('woff2');unicode-range:U+0100-0101,U+012A-012B,U+016A-016B,U+02BE-02BF,U+1E0C-1E0D,U+1E24-1E25,U+1E62-1E63,U+1E6C-1E6D,U+1E92-1E93}
@font-face{font-family:Jost;font-style:normal;font-weight:500;font-display:swap;src:url(https://fonts.gstatic.com/s/redditsans/v6/EYq3maFOxq1T_-ETdN7EKQNle5a92XNFepo.woff2) format('woff2');unicode-range:U+0100-0101,U+012A-012B,U+016A-016B,U+02BE-02BF,U+1E0C-1E0D,U+1E24-1E25,U+1E62-1E63,U+1E6C-1E6D,U+1E92-1E93}

/* 2 · The root layout (shared with the public site) sets next/font's --font-display and --font-sans on <body>.
 * Inside the portal they go back to kit.css's :root values, so the type is the mock-ups' Google faces. */
html:has(.kit-portal) body{--font-display:unset;--font-sans:unset}

/* 3 · The root layout also loads Tailwind, whose preflight (and the old portal's base layer) change browser
 * defaults the mock-ups rely on: line-height 1.5 on html, svg/img display:block, list-style none, links without
 * underline, headings at inherited size, form controls inheriting font and colour, border-box on ::before/::after…
 * Inside the portal each of those properties goes back to the browser's own value, as in the mock-ups. Property by
 * property, never `all`: `all:revert` would also drop SVG geometry and img width/height attributes.
 * The layer is declared after Tailwind's, so it beats preflight; unlayered kit.css still beats it. */
@layer kit-ua{
  html:has(.kit-portal){height:revert;line-height:revert;font-family:revert;font-feature-settings:revert;font-variation-settings:revert;tab-size:revert;-webkit-text-size-adjust:revert;-webkit-tap-highlight-color:revert;-webkit-font-smoothing:revert;-moz-osx-font-smoothing:revert}
  html:has(.kit-portal) body{display:revert;flex-direction:revert;min-height:revert;font-weight:revert;-webkit-tap-highlight-color:revert}
  .kit-portal *,.kit-portal ::before,.kit-portal ::after,.kit-portal ::backdrop{margin:revert;padding:revert;border:revert}
  .kit-portal ::before,.kit-portal ::after{box-sizing:revert}
  .kit-portal :is(h1,h2,h3,h4,h5,h6){font-size:revert;font-weight:revert}
  .kit-portal a{color:revert;text-decoration:revert}
  .kit-portal :is(ol,ul,menu){list-style:revert}
  .kit-portal :is(img,svg,video,canvas,audio,iframe,embed,object){display:revert;vertical-align:revert}
  .kit-portal :is(img,video){max-width:revert;height:revert}
  .kit-portal img[height]{height:attr(height px,auto)}
  .kit-portal :is(button,input,select,optgroup,textarea),.kit-portal ::file-selector-button{font:revert;font-feature-settings:revert;font-variation-settings:revert;letter-spacing:revert;color:revert;border-radius:revert;background-color:revert;opacity:revert;appearance:revert}
  .kit-portal ::placeholder{opacity:revert;color:revert}
  .kit-portal textarea{resize:revert}
  .kit-portal hr{height:revert;color:revert;border-top-width:revert}
  .kit-portal :is(small,code,kbd,samp,pre,sub,sup){font-family:revert;font-size:revert;line-height:revert;position:revert;vertical-align:revert}
  .kit-portal table{text-indent:revert;border-color:revert;border-collapse:revert}
  .kit-portal :is(abbr,progress,summary){text-decoration:revert;vertical-align:revert;display:revert}
  .kit-portal [dir="rtl"][lang="ar"]{line-height:revert}
  .kit-portal :focus-visible{outline:revert;outline-offset:revert}
}

/* 4 · A real phone. kit.css draws the phone as a framed device inside the mock-up page (.app.phone: 390 wide,
 * 800 tall, rounded, a dark bezel). On an actual phone the app is the whole screen. */
.kit-portal .stage:has(>.app.phone){padding:0}
.kit-portal .app.phone{max-width:none;height:100dvh;border-radius:0;box-shadow:none}

/* 5 · Reading size for Arabic and phone-safe fields (accessibility review, 7 Oct). Inline Arabic is at least 18px with
 * a line height of at least 1.6, everywhere. `bdi[lang="ar"]` is what src/portal/arabicRuns.tsx wraps around an Arabic
 * stretch inside an ordinary sentence: it takes the Arabic face and never drops below 18px (a bigger surrounding size
 * is kept). On a phone, text fields are 16px or iOS zooms the page when one is focused (Arabic-answer fields, .arin and .ans,
 * are bigger and keep their size). */
.kit-portal bdi[lang="ar"]{font-family:var(--font-arabic);font-size:max(18px,1em);line-height:1.6}
.kit-portal .app.phone :is(input,textarea,select):not([type="checkbox"],[type="radio"],[type="range"],[type="file"],.arin,.ans){font-size:16px}
/* a long link in a chat bubble wraps instead of pushing the page sideways */
.kit-portal .stage :is(.m .b p,.mine .bub,.msg .b p){overflow-wrap:anywhere}

/* 6 · Fix round 7: the student's own tick (design-round-6/TICK.md, Option A, owner 12 Oct). The mock-ups declare these
 * two tokens on :root inside their page <style>, which the app scopes to the page (:where(.stage[data-page=…])), where
 * a :root rule never matches. So they live here: the tick's green (only ever for a tick the student made) and its one
 * ring. Kit candidates (TICK.md). */
:root{--tick:#2E7A50;--tick-ring:1.9}

/* 7 · Fix round 8: the lesson page's words and Practice stay in view beside open pages (position:sticky) and the page box
 * is one screen tall. The mock-up measures both from its grey strip (--mbh, set by its script); the app has no strip,
 * so 16px, as the mock-up's own note says. */
.stage[data-page="student-lessons"],.stage[data-page="student-homework"]{--mbh:16px} /* homework: the same reader (fix round 9) */
/* t3 (owner, Safari): on homework the box is shorter, so the row that opened it stays in view above and the page around it
 * is always within reach of the pointer */
.stage[data-page="student-homework"] .pscroll{--mbh:220px}
/* fix round 9 (critique item 5): the reading card comes to 16px from the top (the mock-up's 120px clears its grey strip), so one
 * whole page and the line under it are both in view */
.stage[data-page="student-lessons"] .rd,.stage[data-page="student-homework"] .rd{scroll-margin-top:16px}
/* t3: the row that opened the reader, when it is brought to the top instead of the card (Reader.tsx) */
.stage[data-page="student-homework"] [aria-controls="rdc"]{scroll-margin-top:16px}