/*! LifeLearn — reading comfort v1 · 0.6.6. Loaded by the Library and by every
    guide page, so one setting looks the same everywhere. */
.ll-resource[data-text="spacious"] .ssay { letter-spacing:.035em; word-spacing:.14em; line-height:2; }

/* ---------- reading comfort ---------- */
.ll-resource[data-quiet="on"] .sdot,
.ll-resource[data-quiet="on"] .r-eg,
.ll-resource[data-quiet="on"] .row { box-shadow:none; }
.ll-resource[data-text="spacious"] .r-title,
.ll-resource[data-text="spacious"] .note p { letter-spacing:.035em; word-spacing:.14em; line-height:2; }
.ll-resource[data-text="spacious"] .row { padding-top:17px; padding-bottom:17px; }
body.is-tinted .ll-resource .r-btn,
body.is-tinted .ll-resource .btn-sm,
body.is-tinted .ll-resource .r-note textarea { background:rgba(255,255,255,.5); border-color:rgba(0,0,0,.12); }
body.is-tinted .ll-resource .btn-sm--go { background:#0C8372; border-color:#0C8372; }
.ll-resource[data-text="spacious"] .r-say { letter-spacing:.035em; }


/* ═══ READING COMFORT — colour tint for dyslexic readers and Irlen syndrome ═══
   Additive. Nothing above is edited; every rule here is scoped to a tint being
   chosen, so switching to Off restores the page exactly. Contrast checked: body
   ink 11.0:1 or better on every tint, navy headings 13.9:1 or better.          */

body[data-tint="cream"] { background:#FBF3E2; }
body[data-tint="rose"]  { background:#FBEEE9; }
body[data-tint="mint"]  { background:#E9F4EC; }
body[data-tint="sky"]   { background:#E9F0F9; }
body[data-tint="lilac"] { background:#F0EBF8; }
body[data-tint="grey"]  { background:#E7E9EC; }

body[data-tint="cream"] .ll-resource { color:#3A3226; }
body[data-tint="rose"]  .ll-resource { color:#3B2E29; }
body[data-tint="mint"]  .ll-resource { color:#26332B; }
body[data-tint="sky"]   .ll-resource { color:#26303B; }
body[data-tint="lilac"] .ll-resource { color:#2F2A3B; }
body[data-tint="grey"]  .ll-resource { color:#2B2F35; }

/* the light surfaces stop being white and let the tint through */
body.is-tinted .ll-resource .section--white { background:transparent; }
body.is-tinted .ll-resource .section--off-white { background:rgba(0,0,0,.035); }
/* the sticky band is opaque in every tint, or content scrolls through it */
body[data-tint="cream"] .ll-resource .ctl-band { background:#FBF3E2; }
body[data-tint="rose"] .ll-resource .ctl-band { background:#FBEEE9; }
body[data-tint="mint"] .ll-resource .ctl-band { background:#E9F4EC; }
body[data-tint="sky"] .ll-resource .ctl-band { background:#E9F0F9; }
body[data-tint="lilac"] .ll-resource .ctl-band { background:#F0EBF8; }
body[data-tint="grey"] .ll-resource .ctl-band { background:#E7E9EC; }


body.is-tinted .ll-resource .row,
body.is-tinted .ll-resource .card,
body.is-tinted .ll-resource .spec,
body.is-tinted .ll-resource .tabpanel,
body.is-tinted .ll-resource .letter,
body.is-tinted .ll-resource .reveal-q,
body.is-tinted .ll-resource .acc,
body.is-tinted .ll-resource .deftable,
body.is-tinted .ll-resource .figure,
body.is-tinted .ll-resource .ck,
body.is-tinted .ll-resource .sw,
body.is-tinted .ll-resource .fnode.node,
body.is-tinted .ll-resource .fbranch,
body.is-tinted .ll-resource .player-stub,
body.is-tinted .ll-resource .pull-quote,
body.is-tinted .ll-resource .callout,
body.is-tinted .ll-resource .stat,
body.is-tinted .ll-resource .note,
body.is-tinted 
body.is-tinted .ll-resource .spec-head,
body.is-tinted .ll-resource .acc-p,
body.is-tinted .ll-resource .deftable-cap,
body.is-tinted .ll-resource .letter-head,
body.is-tinted .ll-resource details.code > summary,
body.is-tinted .ll-resource .seg,
body.is-tinted 
body.is-tinted .ll-resource .find input,
body.is-tinted body.is-tinted .ll-resource .snum,
body.is-tinted .ll-resource .ck button,
body.is-tinted .ll-resource .tabbar button { background:var(--ll-surface, rgba(255,255,255,.5)); }
body.is-tinted .ll-resource .tabbar button[aria-selected="true"] { background:rgba(255,255,255,.72); }

/* hairlines follow the paper rather than staying cold grey */
body.is-tinted .ll-resource .row,
body.is-tinted .ll-resource .card,
body.is-tinted .ll-resource .spec,
body.is-tinted .ll-resource .ck,
body.is-tinted .ll-resource .sw,
body.is-tinted .ll-resource .acc,
body.is-tinted .ll-resource .reveal-q,
body.is-tinted .ll-resource .deftable,
body.is-tinted .ll-resource .letter,
body.is-tinted .ll-resource .figure,
body.is-tinted .ll-resource .tabpanel,
body.is-tinted .ll-resource .fbranch,
body.is-tinted .ll-resource .seg,
body.is-tinted .ll-resource .find input,
body.is-tinted .ll-resource .ctl-band { border-color:rgba(0,0,0,.12); }
body.is-tinted .ll-resource .foot { border-bottom-color:rgba(0,0,0,.12); border-top-color:rgba(0,0,0,.12); }
body.is-tinted .ll-resource .row { box-shadow:none; }

/* the teal accent is only 4.48:1 on white and drops under tint, so small
   accent text darkens to hold AA where it is not large */
body.is-tinted .ll-resource .section-h2 em,
body.is-tinted .ll-resource .r-no,
body.is-tinted .ll-resource .acc-n,
body.is-tinted .ll-resource .next-cta,
body.is-tinted body.is-tinted .ll-resource .r-no,
body.is-tinted .ll-resource .acc-n { background:rgba(255,255,255,.6); }

/* ── text spacing and quiet colour, shared by both surfaces ── */
.ll-resource[data-text="spacious"] p,
.ll-resource[data-text="spacious"] li,
.ll-resource[data-text="spacious"] .r-title,
.ll-resource[data-text="spacious"] .letter-body,
.ll-resource[data-text="spacious"] .deftable td { letter-spacing:.035em; word-spacing:.14em; line-height:2; }
.ll-resource[data-text="spacious"] .row,
.ll-resource[data-text="spacious"] .ck { padding-top:17px; padding-bottom:17px; }
.ll-resource[data-quiet="on"] .sdot,
.ll-resource[data-quiet="on"] .r-eg,
.ll-resource[data-quiet="on"] .r-no,
.ll-resource[data-quiet="on"] .acc-n,
.ll-resource[data-quiet="on"] .spec-fn,
.ll-resource[data-quiet="on"] .case-tag,
.ll-resource[data-quiet="on"] .sw i,
.ll-resource[data-quiet="on"] .row,
.ll-resource[data-quiet="on"] .spec,
.ll-resource[data-quiet="on"] .card { box-shadow:none; }

/* ── the control itself ─────────────────────────────────────────────────────
   NOT SCOPED TO .ll-resource, and that is the whole point of this pass.

   The panel used to be styled with `.ll-resource .rc-panel …` selectors. Tool
   Edge borrows the panel OUT of .ll-resource and into its own side panel, and
   at that moment every one of those rules stopped matching — so the panel lost
   its background, its type sizes and its button states, and fell back to the
   theme's default button colour. Selected and unselected both came out the
   same teal, which is why the desktop panel looked broken while the same panel
   sitting on the page looked correct.

   Everything below is therefore scoped to the panel's own classes, so it looks
   like itself wherever it is standing. The .ll-resource-scoped rules elsewhere
   in this file are untouched: those style the ARTICLE, which never moves.
   ────────────────────────────────────────────────────────────────────────── */

/* A seven-column grid, and a flex ITEM as well: `flex:1 1 240px` gives it a
   sensible minimum and lets it take its own line when the row is narrow. As a
   plain grid with no basis it collapsed to a couple of pixels inside the Tool
   Edge panel, which is a flex row — found in testing, at 2px wide. */
.tintset { display:grid; grid-template-columns:repeat(7, minmax(0,1fr)); gap:6px;
  align-items:center; flex:1 1 240px; min-width:0; width:100%; }
.tintset button { width:100%; min-width:0; height:44px; min-height:44px; border-radius:10px;
  border:1.5px solid rgba(14,27,61,.16); cursor:pointer; padding:0; position:relative;
  transition:transform .15s ease, box-shadow .15s ease; }
.tintset button:hover { transform:translateY(-2px); }
/* The chosen paper keeps its own colour and gains a ring and a tick. Painting
   the selection ON the swatch would hide the one thing the swatch is for. */
.tintset button[aria-pressed="true"] { border-color:transparent;
  box-shadow:0 0 0 3px #0B8676, 0 6px 14px rgba(11,134,118,.26); }
.tintset button[aria-pressed="true"]::after { content:""; position:absolute; top:50%; left:50%;
  width:18px; height:18px; margin:-9px 0 0 -9px; border-radius:50%; background:#0B8676;
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23fff' stroke-width='3.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m5 13 4 4L19 7'/%3E%3C/svg%3E");
  background-size:12px; background-repeat:no-repeat; background-position:center; }
.tintset button:focus-visible { outline:2.5px solid #0C8372; outline-offset:3px; }
.tintset .t-off { background:#FFFFFF; }
.tintset .t-off::before { content:""; position:absolute; left:6px; right:6px; top:50%;
  height:1.5px; background:#94A3B8; transform:rotate(-45deg); }
.tintset button[aria-pressed="true"].t-off::before { display:none; }

/* the floating launcher, unchanged in position and behaviour */
.ll-resource .rc { position:fixed; right:18px; bottom:18px; z-index:9500; }
.rc-btn { display:inline-flex; align-items:center; gap:9px; font-family:"Outfit",sans-serif;
  font-size:13.5px; font-weight:700; background:#0E1B3D; color:#fff; border:0; border-radius:999px;
  padding:0 20px; min-height:48px; cursor:pointer; box-shadow:0 8px 28px rgba(14,27,61,.28); }
.rc-btn svg { width:17px; height:17px; stroke-width:2.2; }
.rc-btn:hover, .rc-btn:focus, .rc-btn:active { background:#0E1B3D; color:#fff; }
.rc-btn:focus-visible { outline:2.5px solid #0C8372; outline-offset:3px; }

/* The launcher's own card. It has more in it than it used to, so it is capped
   and scrolls rather than running off the top of a short screen. Tool Edge
   clears both of these with !important when it borrows the panel, so the side
   panel and the bottom sheet still size themselves. */
.rc-panel { position:absolute; right:0; bottom:60px; width:min(360px, calc(100vw - 32px));
  /* Chaining allowed: this is a small card floating over a scrollable page,
     and trapping the wheel at its top edge makes the page feel frozen. */
  max-height:min(76vh, 720px); overflow-y:auto; overscroll-behavior-y:auto;
  box-sizing:border-box; background:#fff; border:1px solid #E2E8F0; border-radius:18px;
  box-shadow:0 18px 48px rgba(14,27,61,.20); padding:20px; }
.rc-panel[hidden] { display:none; }
.rc-panel h4 { font-family:"Outfit",sans-serif; font-size:19px; font-weight:800;
  letter-spacing:-.015em; color:#0E1B3D; margin:0 0 5px; }
.rc-panel > p { font-size:13px; color:#5A6577; margin:0 0 15px; line-height:1.55; }
.rc-lab { display:block; font-family:"Outfit",sans-serif; font-size:10px; font-weight:700;
  letter-spacing:1.4px; text-transform:uppercase; color:#627793; margin:16px 0 8px; }
.rc-note { font-size:11.5px; color:#627793; margin:16px 0 0; line-height:1.55; }

/* ── the live sample ───────────────────────────────────────────────────────
   The panel covers the page it is changing, so before this there was no way
   to see the effect of a setting without closing the panel to look. The
   sample carries the chosen paper, the chosen spacing and the quiet state.  */
.rc-preview { --rc-paper:#FFFFFF; background:var(--rc-paper); border:1px solid #E3EBEE;
  border-radius:13px; padding:14px 15px 11px; margin:0 0 16px; transition:background .3s ease; }
/* Two classes deep on purpose. The preview sits inside .ll-resource on a guide
   page, where `.ll-resource[data-text="…"] p` sets the article's reading size —
   a rule that would otherwise win here and make the sample show the article's
   size rather than the one being previewed. */
.rc-panel .rc-preview h5 { font-family:"Outfit",sans-serif; font-size:13.5px; font-weight:700;
  color:#0E1B3D; margin:0 0 6px; letter-spacing:-.01em; line-height:1.3; }
.rc-panel .rc-preview p { font-size:var(--rc-fs,14px); line-height:var(--rc-lh,1.62);
  letter-spacing:var(--rc-tr,0); color:#17233D; margin:0;
  transition:font-size .18s ease, line-height .18s ease; }
.rc-preview mark { background:#C9F2E9; color:#0A4B41; padding:0 3px; border-radius:3px; }
.rc-preview .rc-stamp { display:block; margin-top:9px; font-family:"Outfit",sans-serif;
  font-size:9.5px; font-weight:700; letter-spacing:.9px; text-transform:uppercase; color:#8794A6; }
.rc-panel[data-quiet="on"] .rc-preview mark { background:#E4EDEA; color:#38474A; }

/* ── three ways to read ────────────────────────────────────────────────────
   One decision instead of four. Each card shows its own paper and spacing, so
   the choice is made by looking rather than by reading four labels. The full
   controls are underneath, unchanged — a preset is a shortcut, not a ceiling. */
.rc-presets { display:grid; gap:9px; }
.rc-preset { display:grid; grid-template-columns:64px 1fr; gap:13px; align-items:center;
  padding:9px; border-radius:13px; cursor:pointer; text-align:left; width:100%;
  border:1.5px solid #E2E8F0; background:#fff;
  transition:border-color .15s, box-shadow .15s, transform .15s; }
/* The theme colours every <button> teal with white text on hover and focus
   (`button:hover, button:focus` at 0,1,1), which outranks a single class.
   Each state is pinned here so the card stays a white card whatever the
   theme does — found live 2 Sep, the cards going solid teal under the mouse. */
.rc-preset, .rc-preset:hover, .rc-preset:focus, .rc-preset:active { background:#fff; color:#17233D; }
.rc-preset:hover { transform:translateY(-1px); border-color:#0E9F8B; }
/* The chosen card's ring is drawn INSIDE its edge, so it never reaches into
   the gap beside it or the panel's padding. */
.rc-preset[aria-pressed="true"] { border-color:#0B8676; box-shadow:inset 0 0 0 1.5px #0B8676; }
.rc-preset:focus-visible { outline:2.5px solid #0C8372; outline-offset:3px; }
.rc-mini { height:52px; border-radius:9px; border:1px solid rgba(14,27,61,.12);
  padding:8px 7px; display:grid; align-content:center; gap:var(--g,4px); background:var(--bg,#fff); }
.rc-mini i { display:block; height:3px; border-radius:99px; background:#9AA8BC; }
.rc-mini i:nth-child(1){ width:100%; } .rc-mini i:nth-child(2){ width:84%; }
.rc-mini i:nth-child(3){ width:94%; } .rc-mini i:nth-child(4){ width:60%; }
.rc-preset b { display:block; font-family:"Outfit",sans-serif; font-size:14.5px;
  font-weight:700; color:#17233D; }
.rc-preset small { display:block; margin-top:2px; font-size:11.5px; color:#627793; line-height:1.4; }
/* drawn only in the phone sheet — see the block at the end of this file */
.rc-tick, .rc-sum-back, .rc-fine-title { display:none; }

.rc-fine { margin-top:14px; }
/* "Customise comfort" — a full-width control a reader cannot miss, at every
   width. The chevron sits at the end and turns when the section is open. */
.rc-fine summary { list-style:none; cursor:pointer; display:flex; align-items:center; gap:10px;
  min-height:48px; padding:0 15px; border:1.5px solid #E2E8F0; border-radius:14px; background:#F8FAFB;
  font-family:"Outfit",sans-serif; font-size:14.5px; font-weight:700; color:#0B8676;
  transition:border-color .15s, background .15s; }
.rc-fine summary:hover { border-color:#0E9F8B; background:#F3F8F7; }
.rc-fine summary::-webkit-details-marker { display:none; }
.rc-fine summary svg { width:16px; height:16px; order:2; margin-left:auto; stroke:currentColor; fill:none;
  stroke-width:2.4; stroke-linecap:round; stroke-linejoin:round; transition:transform .2s ease; }
.rc-fine[open] summary svg { transform:rotate(180deg); }
.rc-fine summary:focus-visible { outline:2.5px solid #0C8372; outline-offset:3px; }

/* ── one group at a time (0.6.4) ──────────────────────────────────────────
   Three chips choose which of Paper, Spacing and Colour is showing, so the
   panel never shows every control at once. The group slides in; nothing
   moves for a reader who has asked for less motion. */
.rc-chips { display:flex; gap:6px; margin:12px 0 10px; }
.rc-chip, .rc-chip:hover, .rc-chip:focus, .rc-chip:active { background:#F8FAFB; color:#5A6577; }
.rc-chip { flex:1 1 0; min-width:0; min-height:40px; padding:0 8px; border:1.5px solid #E2E8F0; border-radius:999px;
  font-family:"Outfit",sans-serif; font-size:12.5px; font-weight:700; cursor:pointer;
  transition:background .15s, color .15s, border-color .15s; }
.rc-chip:hover { border-color:#0E9F8B; }
.rc-chip[aria-selected="true"], .rc-chip[aria-selected="true"]:hover, .rc-chip[aria-selected="true"]:focus { background:#0E1B3D; color:#fff; border-color:#0E1B3D; }
.rc-chip:focus-visible { outline:2.5px solid #0C8372; outline-offset:2px; }
.rc-group { display:none; }
.rc-fine[data-rg="paper"] .rc-group[data-rg="paper"],
.rc-fine[data-rg="spacing"] .rc-group[data-rg="spacing"],
.rc-fine[data-rg="colour"] .rc-group[data-rg="colour"] { display:block; animation:rcGroupIn .22s ease both; }
/* the chip already names the group; the label underneath would say it twice */
.rc-fine .rc-group .rc-lab { display:none; }
.rc-fine .rc-group .tintrow { margin-top:2px; }
@keyframes rcGroupIn { from { opacity:0; transform:translateY(6px); } to { opacity:1; transform:none; } }
@media (prefers-reduced-motion:reduce){ .rc-group { animation:none !important; } .rc-fine summary svg, .rc-chip { transition:none; } }

/* two- and three-option controls. The selected one fills; the others plainly
   do not. This is what stopped working when the panel left .ll-resource. */
.rc-row { display:grid; grid-template-columns:repeat(auto-fit, minmax(0, 1fr)); gap:7px; }
.rc-row button { min-width:0; font-family:"Outfit",sans-serif; font-size:12px; font-weight:700;
  background:#F8F9FB; border:1.5px solid #E2E8F0; border-radius:10px; color:#5A6577;
  min-height:46px; padding:0 6px; cursor:pointer; transition:background .14s, color .14s, border-color .14s; }
.rc-row button:hover { border-color:#0E9F8B; }
.rc-row button[aria-pressed="true"] { background:#0E1B3D; border-color:#0E1B3D; color:#fff; }
.rc-row button:focus-visible { outline:2.5px solid #0C8372; outline-offset:2px; }

/* ── how deep: takes the chosen paper lighter or deeper than its default ────
   Descoped for the same reason as everything above. The control keeps its
   existing shape — Lighter, the slider, Deeper, and a chip that both names
   the current depth and puts it back to the default — because that shape is
   also used by the Library index control band, which must not change.      */
.tintrow { display:flex; align-items:center; gap:10px 12px; flex-wrap:wrap; min-width:0; }
.tintint { display:flex; align-items:center; gap:9px; flex:1 1 220px; min-width:0; }
.tintint > span { font-family:"Outfit",sans-serif; font-size:9px; font-weight:700;
  letter-spacing:1px; text-transform:uppercase; color:#627793; white-space:nowrap; }
.tintint input[type="range"] {
  -webkit-appearance:none; appearance:none; flex:1 1 auto; min-width:80px; width:auto;
  height:44px; background:transparent; cursor:grab; margin:0; padding:0;
}
.tintint input[type="range"]:active { cursor:grabbing; }
/* The track carries the paper you actually chose, from lighter on the left to
   deeper on the right, so the slider previews itself. --rc-l and --rc-d are
   set from the same shade() the page uses, so they can never disagree. */
.tintint input[type="range"]::-webkit-slider-runnable-track {
  height:8px; border-radius:999px; border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(90deg, var(--rc-l,#FFFFFF) 0%, var(--rc-d,#7C8794) 100%);
}
.tintint input[type="range"]::-moz-range-track {
  height:8px; border-radius:999px; border:1px solid rgba(0,0,0,.10);
  background:linear-gradient(90deg, var(--rc-l,#FFFFFF) 0%, var(--rc-d,#7C8794) 100%);
}
.tintint input[type="range"]::-webkit-slider-thumb {
  -webkit-appearance:none; width:22px; height:22px; margin-top:-8px;
  border-radius:50%; background:#FFFFFF; border:3px solid #0B8676;
  box-shadow:0 2px 8px rgba(14,27,61,.30);
}
.tintint input[type="range"]::-moz-range-thumb {
  width:22px; height:22px; border-radius:50%; background:#FFFFFF;
  border:3px solid #0B8676; box-shadow:0 2px 8px rgba(14,27,61,.30);
}
.tintint input[type="range"]:disabled { cursor:not-allowed; opacity:.38; }
.tintint input[type="range"]:focus-visible { outline:2.5px solid #0C8372; outline-offset:4px; border-radius:999px; }
.tintlvl-out {
  font-family:"Outfit",sans-serif; font-size:10.5px; font-weight:700; letter-spacing:.4px;
  color:#5A6577; background:#F8F9FB; border:1.5px solid #E2E8F0; border-radius:9px;
  padding:5px 12px; min-height:44px; cursor:pointer; white-space:nowrap; min-width:82px;
}
.tintlvl-out:hover:not(:disabled), .tintlvl-out:focus:not(:disabled), .tintlvl-out:active:not(:disabled) { background:#F8F9FB; border-color:#0E9F8B; color:#0A786A; }
.tintlvl-out:disabled { opacity:.38; cursor:not-allowed; }
.tintlvl-out:focus-visible { outline:2.5px solid #0C8372; outline-offset:2px; }
body.is-tinted .tintlvl-out { background:rgba(255,255,255,.55); border-color:rgba(0,0,0,.12); }
/* Inside Tool Edge's panel the chip is a solid teal button with white text
   (Tool Edge's own host rule). The tinted-paper rule above outranked it on
   background alone — body + two classes beats two classes — leaving white
   text on translucent white whenever a paper colour was on. Found 1 Sep in
   the phone sheet; the desktop drawer had the same fault. */
body.is-tinted .llte-host-rc .tintlvl-out,
body.is-tinted .llte-host-rc .tintlvl-out:hover,
body.is-tinted .llte-host-rc .tintlvl-out:focus,
body.is-tinted .llte-host-rc .tintlvl-out:active { background:#0A786A; border-color:#0A786A; color:#fff; }
/* 0.6.5: the pair is dark teal on white — 5.37:1 — and every state says so,
   so a focused chip can never be teal text on a teal chip (the audit's F2). */
.rc-panel .tintrow { gap:12px; }

/* The panel is a fixed 360px card on the page and a full-width column inside
   the Tool Edge panel. Both are handled by the same fluid rules above; this
   only stops the launcher's own card getting too wide on a small phone. */
@media(max-width:520px){ .rc-panel { width:min(360px, calc(100vw - 24px)); } }

/* ── Quiet colour, on any page ─────────────────────────────────────────────
   The original quiet rules named elements one at a time, and most of those
   elements belong to a guide page rather than the Library index — which is
   why Quiet did nothing on the Library. These name the coloured surfaces
   instead and drain the colour out of them.

   The filter is deliberately NOT on the wrapper. A filter makes a new
   stacking context, and the wrapper holds a sticky control band that has to
   stay above the page furniture. Colouring the parts leaves that alone.
   ────────────────────────────────────────────────────────────────────────── */
.ll-resource[data-quiet="on"] .hero,
.ll-resource[data-quiet="on"] .shelf-rail,
.ll-resource[data-quiet="on"] .note,
.ll-resource[data-quiet="on"] .snum,
.ll-resource[data-quiet="on"] .r-code,
.ll-resource[data-quiet="on"] .r-eg,
.ll-resource[data-quiet="on"] .r-soon,
.ll-resource[data-quiet="on"] .r-flag,
.ll-resource[data-quiet="on"] .r-nation,
.ll-resource[data-quiet="on"] .r-note-read,
.ll-resource[data-quiet="on"] .r-btn.is-on,
.ll-resource[data-quiet="on"] .r-btn.has-note,
.ll-resource[data-quiet="on"] .lk-link,
.ll-resource[data-quiet="on"] .seg button[aria-pressed="true"],
.ll-resource[data-quiet="on"] .stitle em,
.ll-resource[data-quiet="on"] h2 em,
.ll-resource[data-quiet="on"] .prefooter,
.ll-resource[data-quiet="on"] .lllk-keep.is-on,
.ll-resource[data-quiet="on"] .card,
.ll-resource[data-quiet="on"] .spec,
.ll-resource[data-quiet="on"] .case-tag,
.ll-resource[data-quiet="on"] .hero-eye { filter:saturate(.35); }

/* Links and the teal accents in running text lose their heat too. */
.ll-resource[data-quiet="on"] a:not(.r-btn):not(.lk-link):not(.lllk-keep) { filter:saturate(.4); }

/* ══ TEXT SPACING — three levels, and none of them called "normal" ═════════
   Comfortable is the default and is the page as designed. Compact is for a
   reader who wants more on the screen at once; Spacious opens the letters,
   words and lines for a reader who needs the text to breathe.

   There is no "normal" setting, on purpose. A reader who needs more space is
   not reading an abnormal page; they are using the setting that suits them.

   The change is animated so the page settles rather than snapping — and the
   animation is dropped entirely for anyone who has asked their device for
   less motion.
   ═════════════════════════════════════════════════════════════════════════ */
.ll-resource p,
.ll-resource li,
.ll-resource .r-title,
.ll-resource .r-say,
.ll-resource .ssay,
.ll-resource .note p,
.ll-resource .letter-body,
.ll-resource .deftable td,
.ll-resource .row,
.ll-resource .ck { transition:letter-spacing .28s ease, word-spacing .28s ease, line-height .28s ease, padding-top .28s ease, padding-bottom .28s ease; }

.ll-resource[data-text="compact"] p,
.ll-resource[data-text="compact"] li,
.ll-resource[data-text="compact"] .ssay,
.ll-resource[data-text="compact"] .note p,
.ll-resource[data-text="compact"] .letter-body,
.ll-resource[data-text="compact"] .deftable td { line-height:1.5; }
.ll-resource[data-text="compact"] .row,
.ll-resource[data-text="compact"] .ck { padding-top:9px; padding-bottom:9px; }
.ll-resource[data-text="compact"] .ssay { margin-bottom:14px; }

@media(prefers-reduced-motion:reduce){
  .ll-resource p, .ll-resource li, .ll-resource .r-title, .ll-resource .r-say,
  .ll-resource .ssay, .ll-resource .note p, .ll-resource .letter-body,
  .ll-resource .deftable td, .ll-resource .row, .ll-resource .ck { transition:none; }
}

/* ── Depth has to reach the surfaces a reader is looking at ────────────────
   The cards were plain white at half opacity over the paper, so half of every
   depth step was lost before it arrived, and on a page that is mostly cards
   the lightest and darkest settings looked the same.

   The script now sets --ll-surface alongside the paper, so a card is the
   paper's own colour lifted a little rather than white thinned a little.
   The fallback keeps the old behaviour if the script never runs.
   ────────────────────────────────────────────────────────────────────────── */

/* ══ QUIET COLOUR — a word of explanation the moment it is switched on ═════
   Quiet colour drains most of the colour out of the headline bands. A dark
   navy band has little colour in it to begin with, so what is left reads as
   grey-black, and a reader can reasonably conclude the page has failed to
   load rather than that a setting is doing exactly what it says.

   The note lives on <body>, deliberately outside .ll-resource, so the quiet
   filter cannot drain the explanation along with everything else. It sits
   below the control itself (z-index 9500) so it can never cover the button
   that switches the setting back off, and it sits at the TOP of the screen:
   on a phone the comfort panel fills the bottom corner, and a note tucked
   behind it is a note nobody reads. The top is also where the banner it is
   talking about actually is.
   ────────────────────────────────────────────────────────────────────────── */
.llq-note { position:fixed; left:50%; top:88px; transform:translateX(-50%) translateY(-10px);
  z-index:9400; width:min(380px, calc(100vw - 28px)); box-sizing:border-box;
  background:#F2F4F7; border:1px solid #DCE2EA; border-radius:16px; padding:18px 20px 17px;
  box-shadow:0 18px 48px rgba(14,27,61,.20); font-family:"DM Sans",sans-serif;
  opacity:0; pointer-events:none; transition:opacity .28s ease, transform .28s ease; }
.llq-note.is-on { opacity:1; transform:translateX(-50%) translateY(0); pointer-events:auto; }
.llq-note h5 { font-family:"Outfit",sans-serif; font-size:16px; font-weight:800; color:#0E1B3D;
  letter-spacing:-.01em; margin:0 0 7px; padding-right:26px; }
.llq-note p { font-size:14.5px; line-height:1.65; color:#4A5568; margin:0 0 10px; }
.llq-note p:last-child { margin-bottom:0; }
.llq-note .llq-x { position:absolute; top:10px; right:10px; width:28px; height:28px; padding:0;
  border:0; border-radius:8px; background:#E4E9F0; color:#4A5568; font-size:17px; line-height:1;
  cursor:pointer; }
.llq-note .llq-x:hover { background:#D5DCE6; color:#0E1B3D; }
.llq-note .llq-x:focus-visible { outline:2px solid #0E9F8B; outline-offset:2px; }
@media(max-width:520px){ .llq-note { top:72px; } }
@media(prefers-reduced-motion:reduce){ .llq-note { transition:none; } }

/* ══ THE PHONE SHEET (0.6.3) ═══════════════════════════════════════════════
   Below 1100px Tool Edge presents this panel inside a bottom sheet. Nothing
   above this line changes for that; everything below is scoped twice — to
   that width, and to `.llte-host-rc`, the sheet's host — so the desktop
   drawer, the desktop card and the phone's own floating card (shown only if
   the dock did not mount) are all exactly as they were.

   Two screens, not one long one. The `<details class="rc-fine">` disclosure
   is the same element with the same open state; here its open state is
   shown as a screen of its own. `data-view` is written by the script on
   every toggle. Nothing about the stored settings or the borrow contract
   with Tool Edge is different on a phone.
   ────────────────────────────────────────────────────────────────────────── */
/* Inside Tool Edge's panel the navy header already says Reading comfort; a
   second title and an intro line under it were the first 90px of every
   opening. Hidden at every width from 0.6.4 (was phone-only in 0.6.3). */
.llte-host-rc .rc-panel > h4,
.llte-host-rc .rc-panel > h4 + p { display:none; }

@media not all and (min-width:1100px){
  /* The panel's own overflow would make IT the scrolling box, and the sticky
     preview and footer would stick to it instead of to the sheet. */
  .llte-host-rc .rc-panel { overflow:visible; }

  /* ── screen one ──────────────────────────────────────────────────────── */
  /* The preview stays put while the list scrolls under it. */
  .llte-host-rc .rc-panel .rc-preview { position:sticky; top:0; z-index:2;
    margin:0 0 12px; box-shadow:0 8px 16px -10px rgba(14,27,61,.35); }

  /* Presets are the screen: full-width rows, tappable anywhere, with a tick
     rather than a ring alone. */
  .llte-host-rc .rc-panel .rc-presets { gap:10px; }
  .llte-host-rc .rc-panel .rc-preset { grid-template-columns:66px 1fr 24px; gap:13px;
    min-height:74px; padding:10px; border-radius:15px; }
  .llte-host-rc .rc-panel .rc-preset:hover { transform:none; }
  .llte-host-rc .rc-panel .rc-preset:active { transform:scale(.995); }
  .llte-host-rc .rc-panel .rc-mini { height:54px; }
  .llte-host-rc .rc-panel .rc-preset b { font-size:15px; }
  .llte-host-rc .rc-panel .rc-tick { display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; border-radius:50%; border:1.5px solid #D5DEE6; background:#fff; }
  .llte-host-rc .rc-panel .rc-tick svg { width:14px; height:14px; stroke:#fff; fill:none;
    stroke-width:3; stroke-linecap:round; stroke-linejoin:round; opacity:0; }
  .llte-host-rc .rc-panel .rc-preset[aria-pressed="true"] .rc-tick { background:#0B8676; border-color:#0B8676; }
  .llte-host-rc .rc-panel .rc-chip { min-height:44px; font-size:13px; }
  .llte-host-rc .rc-panel .rc-chips { margin:8px 0 12px; }
  .llte-host-rc .rc-panel .rc-preset[aria-pressed="true"] .rc-tick svg { opacity:1; }

  /* The foot is pinned to the bottom of the sheet, so "Adjust it yourself"
     is always in view however short the screen. Negative margins let it
     span the host's 22px side padding. */
  .llte-host-rc .rc-panel .rc-foot { position:sticky; bottom:0; z-index:3; background:#fff;
    margin:12px -22px 0; padding:10px 22px calc(10px + env(safe-area-inset-bottom, 0px));
    border-top:1px solid #EEF2F5; }
  .llte-host-rc .rc-panel .rc-fine { margin:0; border:0; padding:0; }
  .llte-host-rc .rc-panel .rc-fine summary { min-height:52px; font-size:15px; }
  .llte-host-rc .rc-panel .rc-fine summary svg { width:16px; height:16px; order:2; margin-left:auto;
    transform:rotate(-90deg); }           /* chevron last, on the right: "go there" */
  .llte-host-rc .rc-panel .rc-note { margin:8px 0 0 !important; font-size:11.5px; }

  /* ── screen two ──────────────────────────────────────────────────────── */
  .llte-host-rc .rc-panel[data-view="fine"] .rc-preview,
  .llte-host-rc .rc-panel[data-view="fine"] .rc-presets,
  .llte-host-rc .rc-panel[data-view="fine"] .rc-note { display:none; }
  .llte-host-rc .rc-panel[data-view="fine"] .rc-foot { position:static; margin:0 -22px;
    padding:0 22px calc(10px + env(safe-area-inset-bottom, 0px)); border:0; }
  /* The summary becomes the back bar, pinned under the sheet's header. */
  .llte-host-rc .rc-panel[data-view="fine"] .rc-fine summary { position:sticky; top:0; z-index:2;
    margin:0 -22px 6px; padding:0 22px; min-height:48px; border:0; border-radius:0;
    border-bottom:1px solid #EEF2F5; background:#fff; color:#0E1B3D; font-size:15px; }
  .llte-host-rc .rc-panel[data-view="fine"] .rc-fine summary svg { order:0; margin-left:0; margin-right:2px;
    transform:rotate(90deg); stroke:#0B8676; }   /* chevron first, pointing left: "back" */
  /* The words change with the state, so what is seen is what is announced. */
  .llte-host-rc .rc-panel[data-view="fine"] .rc-sum-go { display:none; }
  .llte-host-rc .rc-panel[data-view="fine"] .rc-sum-back { display:inline; color:#0B8676; }
  .llte-host-rc .rc-panel[data-view="fine"] .rc-fine-title { display:block; margin:6px 0 2px;
    font-family:"Outfit",sans-serif; font-size:19px; font-weight:800; letter-spacing:-.015em; color:#0E1B3D; }

  /* The Quiet-colour notice. Tool Edge moves it into the panel while the
     panel is borrowed; in the sheet it is placed under the Colour row (Tool
     Edge 1.1.3), and its close button gets a full-size hit area here. */
  .llte-host-rc .rc-panel .llq-note { margin:12px 0 4px !important; padding-right:52px !important; }
  .llte-host-rc .rc-panel .llq-note .llq-x { width:44px; height:44px; top:4px; right:4px; border-radius:10px; font-size:20px; }

  /* ── one-handed sizes, everywhere in the sheet ───────────────────────── */
  /* Tool Edge's host rules shrink the chips to 25px and the depth chip to
     38px for the desktop drawer. These outrank them (three classes to two)
     and put the sizes back for a thumb. */
  /* Seven chips in one row are 44px wide only from about 350px of content
     width. Below that they wrap to a second row rather than shrink: a thumb
     target does not get smaller because the phone did. */
  .llte-host-rc .rc-panel .tintset { gap:6px; grid-template-columns:repeat(auto-fill, minmax(44px, 1fr)); }
  .llte-host-rc .rc-panel .tintset button { height:44px; min-height:44px; min-width:44px; }
  .llte-host-rc .rc-panel .tintlvl-out { min-height:44px; }
  .llte-host-rc .rc-panel .rc-row button { min-height:48px; font-size:13px; }
  .llte-host-rc .rc-panel .rc-lab { font-size:11px; margin:18px 0 8px; }
  .llte-host-rc .rc-panel .tintint input[type="range"]::-webkit-slider-thumb { width:28px; height:28px; margin-top:-11px; }
  .llte-host-rc .rc-panel .tintint input[type="range"]::-moz-range-thumb { width:28px; height:28px; }
}