/* FABLE HOTFIX inside line 15 (2026-09-24 15:05): the light caution ink is #9a4407, not #b45309. Both caution badges sit inside
   DIV#smjk-answer, and #smjk-answer.smjk-on paints background:var(--bg) = #f5efe2 (not the card #fffdf8 the comment below tunes
   against): #b45309 there is 4.38:1, under the 4.5 floor, on the state an iPhone reader reaches with one tap (the 34g lens,
   painted, both install pages). #9a4407 is 5.7:1 on the panel and 6.4:1 on the card; the dark halves are unchanged (10.99). */
/* --caution-ink (34f 2026-09-24): the .lbl-caution badge's ink, PAIRED to the kit card here in the
   island's own three token blocks (kit themes by prefers-color-scheme, so its badge must too - the
   site's dark-first --caution-ink in _THEME_CSS would give the wrong ink on the OS-light kit card).
   #b45309 = 4.94:1 on the light card #fffdf8; #e9c46a on the dark card #211d16. */
/* ADDENDUM 34g §1 (2026-09-24): the island themes its card by prefers-color-scheme (light card
   on a first light-OS visit) while the SITE is dark-first, so any .smjk element with no kit colour
   rule INHERITS the dark-first body ink #e8e2d6 - unreadable on the light card. 149 elements did
   (the app-card link at 1.59:1 was the one the sweep caught; the icon buttons rode along). Fixing
   the CLASS not the instance: the island root takes the paired kit --ink, so every uncovered
   descendant inherits a paired colour. Measured both themes: root/icons >= 13:1. */
.smjk{--bg:#f5efe2;--card:#fffdf8;--ink:#2b2620;--muted:#6f6350;--acc:#845806;--bd:#d3c6ab;
  --ok:#1f6b36;--warn:#8a3a10;--caution-ink:#9a4407;max-width:52rem;margin:0 auto;
  padding:0 1rem 3rem;color:var(--ink)}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]) .smjk{--bg:#17140f;
  --card:#211d16;--ink:#ece4d5;--muted:#a99a82;--acc:#e6c766;--bd:#4a4030;--ok:#8fd3a5;
  --warn:#f0b48a;--caution-ink:#e9c46a}}
:root[data-theme=dark] .smjk{--bg:#17140f;--card:#211d16;--ink:#ece4d5;--muted:#a99a82;
  --acc:#e6c766;--bd:#4a4030;--ok:#8fd3a5;--warn:#f0b48a;--caution-ink:#e9c46a}
/* [hidden] is a user-agent rule and ANY author `display` beats it. The install button,
   the "installed" note, the NFC button, the progress row and the two warnings all start
   hidden and all sit under rules that set display, so every one of them was on screen
   while element.hidden was still true. Found on 2026-09-11 by screenshotting a panel and
   seeing a button the DOM insisted was hidden. */
.smjk [hidden]{display:none!important}
.smjk section{background:var(--card);border:1px solid var(--bd);border-radius:12px;
  padding:1.1rem 1.1rem 1.3rem;margin:1.1rem 0;color:var(--ink)}
.smjk h2{font-size:1.15rem;margin:0 0 .5rem;color:var(--ink)}
.smjk p{margin:.4rem 0;color:var(--ink)}
.smjk .sub{color:var(--muted);font-size:.92rem}
/* ADDENDUM 34g §1 (2026-09-24): a content link inside the island took the SITE's dark-first gold
   #e9c96b on the light card = 1.59:1 (the sweep's div.smjk>section>p.sub>a). It takes the paired
   kit --acc instead (6.11:1 light, 10.16:1 dark). Scoped :not(.btn):not(.lbl-caution) - both simple
   :not() (Selectors-3) - so the button links keep --card and the caution badge keeps --caution-ink,
   which .smjk a would otherwise outrank. */
.smjk a:not(.btn):not(.lbl-caution){color:var(--acc)}
.smjk button,.smjk .btn{font:inherit;background:var(--acc);color:var(--card);border:1px solid var(--acc);
  border-radius:9px;padding:.62rem 1.05rem;cursor:pointer;text-decoration:none;display:inline-block}
.smjk button:hover,.smjk .btn:hover{filter:brightness(1.12)}
.smjk button:focus-visible,.smjk .btn:focus-visible{outline:3px solid var(--ink);outline-offset:2px}
.smjk button.ghost{background:transparent;color:var(--acc);border-color:var(--bd)}
.smjk button.ghost:hover{border-color:var(--acc)}
.smjk .row{display:flex;flex-wrap:wrap;gap:.6rem;align-items:center;margin:.6rem 0}
.smjk label{color:var(--ink)}
/* ADDENDUM 34, §3 - THE 443-PIXEL PAGE, AND ITS SINGLE CAUSE.
   /app/<lang>/ measured 443px wide of content inside a 375px phone (Arabic 432), and the
   OPEN_LOOPS item has sat there since without a cause named. It is this element: a <select>
   with no width cap takes the width of its LONGEST OPTION, and #smjk-page is filled at
   runtime with every page title in the edition - 392px from the longest one - plus about
   51px of nested padding from the sections it sits in. Everything else on the page already
   wraps.
   max-width:100% is the cap; box-sizing keeps the padding inside it; min-width:0 is what
   actually lets it shrink, because a flex item's automatic minimum size is its CONTENT size
   and .smjk .row is a flex container - without it the cap is set and then ignored. */
.smjk select,.smjk input[type=text],.smjk input[type=password]{font:inherit;background:var(--bg);
  color:var(--ink);border:1px solid var(--bd);border-radius:8px;padding:.5rem .6rem;
  max-width:100%;min-width:0;box-sizing:border-box}
/* ADDENDUM 34, §12 - THE CODE FIELD IS MASKED BY CSS, NOT BY type="password".
   The reader sees exactly what they saw before: dots, a numeric keypad, four characters
   max. What changed is that the page no longer carries a password control, which is one of
   the phishing-shaped signals a reputation engine reads (Fortinet rated this domain
   "Phishing" on 2026-09-21 - 1 of 89 vendors, 0 of 89 eighteen days earlier). Nothing about
   this value is a password: it is four digits the reader picks, kept on their own device,
   never sent anywhere.
   -webkit-text-security is supported in Chrome, Edge, Safari and - since 132 - Firefox.
   `text-security` is the unprefixed name nothing ships yet and is written beside it so the
   day it does, this needs no edit. WHERE IT IS NOT SUPPORTED the digits are visible, and
   that is the honest trade: a four-digit code on the reader's own phone shown in the clear
   is a smaller harm than a Bible site a firewall blocks as phishing. It is never a secret
   this site holds. */
.smjk input.smjk-code{-webkit-text-security:disc;text-security:disc;
  letter-spacing:.35em;font-family:system-ui,-apple-system,sans-serif}
.smjk select:focus-visible,.smjk input:focus-visible{outline:3px solid var(--acc);outline-offset:1px}
.smjk .bar{height:10px;border-radius:6px;background:var(--bg);border:1px solid var(--bd);overflow:hidden}
.smjk .bar i{display:block;height:100%;width:0;background:var(--acc)}
.smjk .tiers{list-style:none;margin:.5rem 0;padding:0}
.smjk .tiers li{display:flex;gap:.55rem;align-items:flex-start;margin:.35rem 0}
.smjk .icons{display:flex;flex-wrap:wrap;gap:.8rem;margin:.6rem 0}
.smjk .smjk-icon{background:transparent;border:2px solid var(--bd);border-radius:14px;padding:.4rem;
  width:7.2rem;text-align:center;color:var(--ink);line-height:1.25}
.smjk .smjk-icon img{width:5.6rem;height:5.6rem;display:block;margin:0 auto .35rem;border-radius:12px}
.smjk .smjk-icon.smjk-on{border-color:var(--acc)}
.smjk .smjk-icon small{display:block;color:var(--muted);font-size:.78rem}
.smjk .qr{background:#fff;padding:.5rem;border-radius:10px;display:inline-block;border:1px solid var(--bd)}
.smjk .qr img{display:block;width:11rem;height:11rem;image-rendering:pixelated}
.smjk code{background:var(--bg);border:1px solid var(--bd);border-radius:6px;padding:.15rem .35rem;
  font-size:.86rem;word-break:break-all;color:var(--ink)}
.smjk .ok{color:var(--ok)}
.smjk .warn{color:var(--warn)}
/* ADDENDUM 34, §3 - logical, like #smjk-answer below it. The note at line ~95 records
   that this rule was left physical when that one was made logical; on the six
   right-to-left editions a physical left border puts the marker on the side the
   sentence ENDS at, which is where nobody is looking. */
.smjk .r4{border-inline-start:3px solid var(--acc);padding-inline-start:.8rem;
  color:var(--muted);font-size:.94rem}
/* ADDENDUM 29 §3, 2026-09-19 - the answer after a tap that had no prompt to show. It MARKS
   a block that was already on screen; it never reveals one. Both halves of the pair are
   themed tokens declared in all three blocks above (lines 8, 10 and 13), so ink and ground
   flip together and neither can be left behind by a theme change - the standing dark-mode
   rule. NO NEW TOKEN IS DECLARED. --bd was refused for the border: it measures 1.61:1 on
   --bg and a 3px marker nobody can see is not a marker. --acc is the one already used for
   .r4's border and the focus ring. Measured by CONTRAST_SWEEP_2026-08-29.py on the built
   /app/en/ and /app/ar/ pages in both themes, with the button clicked so this state is
   reached at rest (see __smjOpenDrawers in tools/contrast_probe_2026-08-29.js).
   ⚠ IT IS WRITTEN #smjk-answer.smjk-on, NOT A BARE .smjk-on, AND THAT IS NOT FUSSINESS.
   `.smjk-on` was already taken: setIcon() puts it on the CHOSEN TILE (see .smjk .smjk-icon
   .smjk-on above, which only recolours the border). A bare `.smjk .smjk-on` rule would have
   given every selected look tile this block's left border, padding, ground and ink - a
   visible fault on the one control Daniel is reporting about. Addendum 29 §3 asked for the
   rule "beside .r4"; it is beside .r4, aimed at the one element it is for.
   ⚠ AND IT IS border-inline-start, NOT border-left. Addendum 29 §3 spells the rule with the
   physical property, as .r4 above does; on the six right-to-left editions that puts the marker
   on the side the sentence ENDS at, which is where nobody is looking. The logical property is
   the same 3px on a left-to-right page and the correct side on /app/ar/. Recorded as a
   deviation in KIT_ROUND_2026-09-19_step1-button.md. */
/* ADDENDUM 29b §1, 2026-09-19 - AND IT MUST NOT LAND UNDER THE MASTHEAD.
   #smjk-answer is a fragment target as of Addendum 29 (the tile tap reloads on
   ?look=<v>#smjk-answer), and a fragment scroll parks its top at viewport y=0. The site
   masthead .w2bar is `position:sticky;top:0;z-index:1000` (src/site.py ~24099) and MEASURED
   115px tall at 320/360/375/412 and 120px at 768/1200 (getBoundingClientRect().height on the
   built /app/en/, three-lenses probe12, 2026-09-19). The button is the first thing inside
   this wrapper, so every fragment arrival - reload, pull-to-refresh, back-then-forward, a
   bookmark, a shared link (20 of 20 measured) - put the WHOLE button, y 0..41, behind the
   black bar, and elementFromPoint at its centre returned the masthead's own "See More Jesus"
   link: a tap where the button is took the reader to the home page. 128 = the tallest
   measured bar (120) plus 8px of breathing room. There is no --w2bar-h token to read; if one
   is ever added, read it here instead of this constant.
   The site's own precedent for exactly this is .hist-item{scroll-margin-top:70px}
   (src/site.py's style.css, ~line 142) - a smaller number because that anchor is not the
   button itself. scroll-margin-top is honoured by scrollIntoView() as well as by the native
   fragment scroll, which is what makes the two orders land in the SAME place (kit.js
   landOnAnswer uses block:'start' for the same reason). Pinned in a real browser by
   CONTRAST_SWEEP_2026-08-29.py's landing pass, not by the DOM stub, whose scrollIntoView
   records its argument and moves nothing. */
#smjk-answer{scroll-margin-top:128px}
#smjk-answer.smjk-on{border-inline-start:3px solid var(--acc);padding-inline-start:.7rem;
  background:var(--bg);color:var(--ink)}
#smjk-answer.smjk-on:focus-visible{outline:3px solid var(--acc);outline-offset:2px}
/* ROUND G, 2026-09-12 - the inline Safari-share pictogram (a UI glyph, not artwork; see
   src/viralkit.py's _KIT_SHARE_GLYPH_SVG). currentColor so it themes with the sentence
   beside it; sized to the text and never larger than the line it sits in. The shape is
   left-right symmetric on purpose (an up arrow), so RTL never has to mirror it. */
.smjk-glyph{display:inline-block;width:1em;height:1em;vertical-align:-.15em;flex:none}
/* The round-six diagnostics block (?diag=1 only). Muted on the card's own ground, both
   themes, and it wraps rather than pushing the page sideways on a phone. */
.smjk #smjk-diag{font:.78rem/1.5 ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
  color:var(--muted);background:var(--bg);border:1px solid var(--bd);border-radius:8px;
  padding:.55rem .6rem;margin:.6rem 0 0;white-space:pre-wrap;overflow-wrap:anywhere}
#smjk-toast{position:fixed;left:50%;bottom:24px;transform:translateX(-50%);background:#2b2620;
  color:#f3ecdd;padding:.6rem 1rem;border-radius:9px;z-index:99999;font-size:.92rem}
#smjk-toast[hidden]{display:none}
@media print{.smjk{max-width:none}}
/* ADDENDUM 34, §12 - the discreet-icon drawer.  Its paragraph and its four game tiles now
   sit behind a summary (see quiet_head in src/viralkit.py), so the landing text of
   /app/<lang>/ is the plain install and a page that teaches hiding one app behind another
   is not the first thing a reputation engine reads.
   Colours are the card's own theme-PAIRED tokens - every one of --ink, --bg, --acc and
   --bd is declared for both themes at the top of this file - so the summary's ink and its
   ground flip together and neither is left behind in the other theme (the standing
   dark-mode rule).  The contrast gate opens <details> before it measures, from 2026-09-13,
   so this drawer is measured OPEN as well as closed. */
.smjk details.smjk-quiet{border:1px solid var(--bd);border-radius:10px;
  background:var(--bg);color:var(--ink);padding:.15rem .7rem;margin:.7rem 0}
.smjk details.smjk-quiet>summary{cursor:pointer;padding:.55rem 0;font-weight:600;
  color:var(--ink);min-height:38px;display:flex;align-items:center}
.smjk details.smjk-quiet>summary:focus-visible{outline:3px solid var(--acc);
  outline-offset:2px;border-radius:6px}
.smjk details.smjk-quiet[open]>summary{border-bottom:1px solid var(--bd);
  margin-bottom:.4rem}