/* ==========================================================================
   THE CATALOGUE · 2.97.0 design (src/reading-ui.php, section 1b and 8)

   Owner rounds 1 (the card breathes), 3 (one card anatomy), 6 (search always), 15 (1/2/3/4 per row),
   17 (high contrast follows the reader), 18 (a guide with no questions is shown), 31 (name, numbers
   line, 12 and "הצג עוד", instant search in two groups) and 32 (the contact banner at the end and on
   no results). The design is the owner-approved prototype (catalogue-question r3 + final fix).

   RULES THIS FILE KEEPS (the gate holds each one):
   - every rule starts at #ea-answers, the <main> only the catalogue prints, so nothing here can
     reach a client page, and one ID beats the host theme's element and attribute rules without a
     single !important;
   - every colour is a role of the delivery contract (contracts/brand-roles.json): the backend
     derives and signs them, this file only paints them;
   - every size is a fluid-engine role (--eaf-*) or a phone/desktop pair on its unit; no vw, no
     clamp(), no container, no pixel font size; line heights are the engine's three (1.13 on the
     display title is the engine's declared exception);
   - the direction arrives as the foundation's knobs on #ea-answers (echoai_al_design_attrs():
     data-ea-intensity, -radius, -btn, -cta, -rhythm), and the shape, type, rhythm and motion tokens
     are the foundation's (docs/FOUNDATION.md); every rule keys on a knob, never on the direction's
     name, and reads a token, never redeclares one. The reveal, high contrast's role swap and the
     reduced-motion stop are the foundation's too.
   ========================================================================== */

/* ---------- 1. page scope ---------- */
#ea-answers{
	--eac-dir:1;
	--eac-gap:calc(var(--eaf-u390,0px) * 16 + var(--eaf-u1440,1px) * 28);
	display:block;margin:0;padding-block:var(--eaf-s-3xl,58px) var(--eaf-s-5xl,90px);
	overflow-wrap:break-word;   /* a word with no place to break stays in its card (QA2 judge S10) */
	color:var(--ea-ink);background:var(--ea-surface);
	font-family:var(--ea-font-he,inherit);font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-body,1.8);
	-webkit-font-smoothing:antialiased;text-align:start;
}
#ea-answers[dir="ltr"]{--eac-dir:-1;font-family:var(--ea-font-en,inherit)}
#ea-answers *,#ea-answers *::before,#ea-answers *::after{box-sizing:border-box}
#ea-answers ::selection{background:var(--ea-selection);color:var(--ea-ink)}
#ea-answers :focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
#ea-answers .ea-sr{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap;border:0;color:var(--ea-ink)}
/* Astra draws a 30px shadow around every image and figure of a single post; ours have none */
#ea-answers :is(img,figure){box-shadow:none}
/* Latin runs inside Hebrew are marked lang only, never isolated: an isolate reversed "Power/Interest" (B-1); the Latin face is for display surfaces only (round 7) */
#ea-answers .ea-lat{font-family:inherit}
#ea-answers .ea-nw{white-space:nowrap}
#ea-answers :is(.ea-cat__h1,.ea-cover__key,.ea-cat-cta__eyebrow) .ea-lat{font-family:var(--ea-font-en,inherit)}

/* the one container: the guide's 1180 stage, edge for edge (A4); content-box from 1200 so the page
   margin stays a steady 16px and the cards keep the full 1180 */
#ea-answers .ea-wrap{max-width:var(--eaf-measure-page,1180px);margin-inline:auto;padding-inline:var(--eaf-gutter,24px)}
@media (min-width:1200px){#ea-answers .ea-wrap{box-sizing:content-box;padding-inline:16px}}

/* ---------- 2. the head: the name, one counted line at its baseline, a thin rule ---------- */
#ea-answers .ea-cat__head{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--eaf-s-3xs,4px) var(--eaf-s-md,22px);
	margin:0 0 var(--eaf-s-lg,28px);padding:0 0 var(--eaf-s-lg,28px);border-block-end:1px solid var(--ea-line)}
#ea-answers .ea-cat__h1{margin:0;padding:0;font-size:var(--ea-fs-hero,54px);line-height:1.13;font-weight:800;letter-spacing:-.025em;
	color:var(--ea-ink);text-wrap:balance;text-transform:none}
/* measured numbers only (ריק אומר ריק): PHP prints each part only when it is real and above zero */
#ea-answers .ea-cat__count{margin:0;font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute);font-variant-numeric:tabular-nums}
#ea-answers .ea-cat__count b{color:var(--ea-ink);font-weight:700}
#ea-answers .ea-cat__lead{max-width:60ch;margin:0 0 var(--eaf-s-lg,28px);font-size:var(--eaf-fs-lead,20px);line-height:var(--eaf-lh-body,1.8);color:var(--ea-ink-mute)}

/* ---------- 3. the search: always there where a script runs (round 6), instant, two groups (round 31) ----------
   Without a script it is not printed visibly at all: a field that cannot search is a dead control, and the
   head flag is set before the first paint, so it never appears late and moves nothing. */
#ea-answers .ea-cat__tools{display:none}
html.ea-js #ea-answers .ea-cat__tools{display:flex;flex-wrap:wrap;align-items:center;gap:var(--eaf-s-xs,14px);margin:0 0 var(--eaf-s-xl,36px)}
#ea-answers .ea-search{position:relative;display:block;flex:1 1 20em;max-width:calc(var(--eaf-u,1px) * 520);margin:0}
#ea-answers .ea-search__ico{position:absolute;inset-inline-start:16px;inset-block-start:50%;translate:0 -50%;width:1.1em;height:1.1em;
	font-size:var(--eaf-fs-large,18px);color:var(--ea-ink-mute);pointer-events:none}
#ea-answers .ea-search input[type="search"]{
	display:block;width:100%;height:calc(var(--eaf-u390,0px) * 48 + var(--eaf-u1440,1px) * 52);margin:0;padding-block:0;padding-inline:46px 52px;
	font:inherit;font-size:max(16px,var(--eaf-fs-body,17px));line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink);
	background:var(--ea-surface-2);border:1px solid var(--ea-ink-mute);border-radius:var(--ea-btn-radius,999px);
	box-shadow:none;outline:none;appearance:none;-webkit-appearance:none;
	transition:border-color .2s,background-color .2s,box-shadow .2s}
#ea-answers .ea-search input[type="search"]::placeholder{color:var(--ea-ink-mute);opacity:1}
#ea-answers .ea-search input[type="search"]::-webkit-search-decoration{-webkit-appearance:none}
/* our own × (round 101, CAT-13): the browser's was drawn in its own blue beside our ink field, and not every browser
   has one. It shows while the field holds words, clears them and gives focus back to the field (catalogue.js). */
#ea-answers .ea-search input[type="search"]::-webkit-search-cancel-button{-webkit-appearance:none;appearance:none;display:none}
#ea-answers button.ea-search__x{position:absolute;inset-inline-end:4px;inset-block-start:50%;translate:0 -50%;
	display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;min-height:0;margin:0;padding:0;
	font-size:var(--eaf-fs-large,18px);line-height:1;color:var(--ea-ink-mute);background:transparent;border:0;border-radius:var(--ea-btn-radius,999px);
	box-shadow:none;cursor:pointer;transition:color .15s,background-color .15s}
#ea-answers button.ea-search__x[hidden]{display:none}
/* 3.8.3 (NB 318, the motion audit's #18): the clear button comes in with the first letter in a short fade (150ms), never a pop */
@media (prefers-reduced-motion:no-preference){#ea-answers button.ea-search__x:not([hidden]){animation:ea-cat-in .15s ease-out both}}
#ea-answers button.ea-search__x svg{width:1em;height:1em;flex:none}
#ea-answers button.ea-search__x:focus{color:var(--ea-ink);background:transparent}
#ea-answers button.ea-search__x:focus-visible{outline:2px solid var(--ea-focus);outline-offset:-2px}
@media (hover:hover){#ea-answers button.ea-search__x:hover{color:var(--ea-ink);background:var(--ea-surface-2)}}
#ea-answers .ea-search input[type="search"]:hover{border-color:var(--ea-ink)}
#ea-answers .ea-search input[type="search"]:focus,#ea-answers .ea-search input[type="search"]:focus-visible{
	background:var(--ea-surface);border-color:var(--ea-focus);box-shadow:0 0 0 3px var(--ea-selection);outline:none}

/* the results take the grid's place while a search is on: guides first, then questions (round 31) */
#ea-answers .ea-cat__res{margin:0 0 var(--eaf-s-lg,28px)}
#ea-answers .ea-cat__res[hidden],#ea-answers [data-ea-resmore][hidden],#ea-answers .ea-cat__none[hidden]{display:none}
#ea-answers .ea-cat__rg{margin:0 0 var(--eaf-s-lg,28px);padding:0;list-style:none}
#ea-answers .ea-cat__rh{display:flex;align-items:baseline;gap:var(--eaf-s-2xs,10px);margin:0;padding:0 0 var(--eaf-s-2xs,10px);
	border-block-end:1px solid var(--ea-ink);font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;letter-spacing:.06em;color:var(--ea-ink)}
#ea-answers .ea-cat__rh span{font-weight:600;color:var(--ea-ink-mute);font-variant-numeric:tabular-nums;letter-spacing:0}
/* the row is the option; its link is a sibling stretched over it, hidden from assistive technology (catalogue.js) */
#ea-answers .ea-cat__opt{position:relative;margin:0;padding:0;border-block-end:1px solid var(--ea-line);list-style:none}
/* a batch «הצג עוד» added comes in with a fade (tower M2, rule 5: CSS only, about 250ms; opacity only, so it is the same
   under reduced motion, and a browser without animations shows the rows at once). Rows already on screen never move. */
@keyframes ea-cat-in{from{opacity:0}to{opacity:1}}
#ea-answers .ea-cat__opt[data-ea-new]{animation:ea-cat-in .25s ease-out both}
#ea-answers .ea-cat__ob{display:flex;flex-direction:column;gap:2px;padding:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px);
	color:var(--ea-ink);background:transparent;
	transition:background-color .15s var(--ea-ease),box-shadow .15s var(--ea-ease)}
#ea-answers a.ea-cat__oa{position:absolute;inset:0;z-index:1;display:block;margin:0;padding:0;border:0;background:none;box-shadow:none;text-decoration:none}
#ea-answers .ea-cat__ot{font-size:var(--eaf-fs-large,18px);line-height:var(--eaf-lh-head,1.25);font-weight:600;text-wrap:pretty}
#ea-answers .ea-cat__opt--g .ea-cat__ot{font-weight:800}
#ea-answers .ea-cat__om{font-size:var(--eaf-fs-meta,13px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute)}
/* the guide's name, once above each run of its questions (owner round 130 Q3, 3.2; catalogue.js addQuestion): read, so the
   reading size (round 123), quiet ink, no rule of its own (the rows keep theirs) */
#ea-answers .ea-cat__run{margin:0;padding:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px) 0;list-style:none;
	font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-ink-mute);text-wrap:pretty}
/* the row the keyboard or the pointer is on (the pointer moves the active row, so one row is ever marked):
   the breathing tint and a 3px mark on the start edge */
#ea-answers .ea-cat__ob[aria-selected="true"]{
	background:var(--ea-tint-faint);box-shadow:inset calc(-3px * var(--eac-dir)) 0 0 var(--ea-graphic)}
#ea-answers .ea-cat__ob[aria-selected="true"] .ea-cat__om{color:var(--ea-ink-mute-on-tint)}
/* the match (round 101, CAT-13): the brand's --ea-mark is a near-surface tint (1.15:1 on the reference brand), so the
   words barely showed. Half the brand's UI accent in light-linear space: the contract holds accent-ui at 3:1 against
   the surface, so this is at least 1.5:1 on any brand, dark brands and quiet luxury included, and ink on it keeps
   4.5:1. A browser without color-mix keeps the brand's own mark. */
#ea-answers mark.ea-hit{padding:0 .06em;border-radius:3px;color:inherit;font-weight:inherit;
	background:var(--ea-mark);background:color-mix(in srgb-linear,var(--ea-accent-ui) 50%,var(--ea-surface))}

/* one quiet button shape for "הצג עוד", more results and clearing the search: an ink outline in the
   direction's button shape (the host's own button skin paints after us; one ID holds every state) */
#ea-answers button.ea-cat__b{
	display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:44px;margin:0;padding:0 var(--eaf-s-md,22px);
	font:inherit;font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;letter-spacing:0;text-transform:none;white-space:normal;
	color:var(--ea-ink);background:transparent;border:1px solid var(--ea-ink);border-radius:var(--ea-btn-radius,999px);box-shadow:none;cursor:pointer;
	transition:background-color .2s,color .2s}
#ea-answers button.ea-cat__b:hover,#ea-answers button.ea-cat__b:focus{color:var(--ea-ink);background:var(--ea-surface-2);border-color:var(--ea-ink)}
#ea-answers button.ea-cat__b:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
#ea-answers .ea-cat__resmore{margin:0 0 var(--eaf-s-xl,36px);text-align:center}

/* nothing found: one plain statement with the way back BESIDE it (round 101, CAT-03: under the form it sat below the
   fold at 390, drawn like the send button), and the contact banner right under it (round 32). The way back is a
   quiet text control with its ×, never a filled or outlined button. */
#ea-answers .ea-cat__none{margin:0 0 var(--eaf-s-lg,28px);padding:var(--eaf-s-md,22px) 0 0;border-block-start:1px solid var(--ea-ink)}
#ea-answers .ea-cat__none-top{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--eaf-s-3xs,4px) var(--eaf-s-md,22px)}
#ea-answers .ea-cat__none-h{flex:1 1 16em;margin:0;font-size:var(--eaf-fs-h3,21px);line-height:var(--eaf-lh-head,1.25);font-weight:800;color:var(--ea-ink);text-wrap:balance}
#ea-answers button.ea-cat__clear{display:inline-flex;align-items:center;gap:6px;min-height:44px;margin:0;padding:0 2px;
	font:inherit;font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;letter-spacing:0;text-transform:none;white-space:nowrap;
	color:var(--ea-ink);background:transparent;border:0;border-radius:0;box-shadow:none;cursor:pointer;
	text-decoration:underline 1px;text-underline-offset:.3em;transition:color .15s}
#ea-answers button.ea-cat__clear svg{width:.9em;height:.9em;flex:none}
#ea-answers button.ea-cat__clear:focus{color:var(--ea-ink);background:transparent}
#ea-answers button.ea-cat__clear:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
@media (hover:hover){#ea-answers button.ea-cat__clear:hover{color:var(--ea-ink-mute);background:transparent}}
#ea-answers .ea-cat__none-p{margin:var(--eaf-s-2xs,10px) 0 var(--eaf-s-sm,18px);color:var(--ea-ink-mute)}

/* while a search is on, the grid and "הצג עוד" step aside for the results */
/* while a search shows its results or «לא מצאנו», the browse list steps aside, round 106 Q9's index of every question
   with it (3.1.1 merge): round 101 keeps the contact banner the next thing after «לא מצאנו» */
#ea-answers[data-ea-searching] :is(.ea-cat__grid,.ea-cat__more,.ea-cat-qx){display:none}

/* ---------- 4. the list of guides: its columns follow the count (CATALOGUE-INDEX, section 11): equal cards up to six, rows
   past six; never a card bigger than another (the span rules of U-1 are gone, owner 04.10: «בלי כרטיס גדול») ---------- */
#ea-answers .ea-cat__grid{display:grid;grid-template-columns:minmax(0,1fr);gap:var(--eac-gap);margin:0;padding:0;list-style:none}
#ea-answers .ea-cat__item{display:flex;min-width:0;margin:0;padding:0;list-style:none}
#ea-answers .ea-cat__item::before,#ea-answers .ea-cat__item::marker{content:none}
/* 20 guides and more open on the first 12 (round 31); every card stays in the HTML, and without a script all show.
   Folded only once catalogue.js can open them (it sets data-ea-ready on #ea-answers with "הצג עוד"), never by the
   head flag: an optimiser that held the script back showed 12 cards and a button that did nothing (round 101, M3b) */
#ea-answers[data-ea-ready] .ea-cat__grid:not([data-ea-all]) > .ea-cat__item[data-ea-rest]{display:none}
#ea-answers .ea-cat__more{margin:var(--eaf-s-xl,36px) 0 0;text-align:center}
#ea-answers:not([data-ea-ready]) .ea-cat__more{display:none}

/* ---------- 5. the guide card: ONE anatomy (round 3) - cover, title, a two-line teaser, the count ----------
   It breathes on hover AND on keyboard focus (round 1, chosen over "no hover"): a 3px lift, a soft shadow
   and the brand tint; muted text on the tint reads ink-mute-on-tint, which the contract holds at 4.5. */
#ea-answers .ea-gcard{position:relative;display:flex;flex-direction:column;width:100%;margin:0;
	background:var(--ea-surface);border:1px solid var(--ea-line);border-radius:var(--ea-radius,20px);overflow:hidden;
	transition:translate .2s var(--ea-ease),box-shadow .2s var(--ea-ease),border-color .2s var(--ea-ease),background-color .2s var(--ea-ease),opacity .4s var(--ea-ease),transform .4s var(--ea-ease)}
#ea-answers .ea-gcard:is(:hover,:focus-within){translate:0 -3px;background-color:var(--ea-tint-faint);border-color:var(--ea-tint-line);
	box-shadow:0 18px 36px -18px rgba(var(--ea-shadow-rgb),.28)}
#ea-answers .ea-gcard__title{display:block;margin:0;padding:0;font-size:inherit;font-weight:inherit;font-style:inherit;line-height:inherit;color:inherit;text-transform:none;letter-spacing:0}
#ea-answers a.ea-gcard__link{display:block;color:inherit;text-decoration:none;border:0;background:none;box-shadow:none;outline:none}
/* the title is the link and stretches over the whole card (its ::after takes a tap anywhere on it). ⛔ THE KEYBOARD'S RING
   STANDS 3px OUTSIDE THE CARD, NEVER INSIDE IT (3.3.3, found 14.10): on a phone and on a row the words and the face touch the
   card's edge, and the ring drawn 2px inside the edge (until 3.3.3) cut the title's first letter and the count («גרפים ונרות
   יפניים», «15 שאלות» after «הצג עוד» moved the focus to the first new card). The ring is the card's own outline (an outline
   is never cut by the card's own overflow), lit only for keyboard focus where :has() reads it; a browser without :has() keeps
   the card's :focus-within ring. Gate a-focus-ring-that-cuts-card-text. */
#ea-answers a.ea-gcard__link::after{content:"";position:absolute;inset:0;z-index:1;border-radius:inherit}
#ea-answers .ea-gcard:focus-within{outline:2px solid var(--ea-focus);outline-offset:3px}
@supports selector(:has(a)){
	#ea-answers .ea-gcard:focus-within{outline:none}
	#ea-answers .ea-gcard:has(a.ea-gcard__link:focus-visible){outline:2px solid var(--ea-focus);outline-offset:3px}
}
#ea-answers .ea-gcard__rest{display:block;padding:var(--eaf-s-md,22px) var(--eaf-s-md,22px) 0;
	font-size:var(--ea-fs-card,18px);line-height:var(--eaf-lh-head,1.25);font-weight:700;color:var(--ea-ink);text-wrap:balance}
/* 3.0.1 (MAP RC5): three lines at most, and always the room of three, so in any row the teasers, the feet and the
   cards' heights meet on one line whatever the titles' lengths. The link keeps the whole title as its name (the
   clamp only hides the overflow), and the key read on the cover stays in it for a screen reader. */
#ea-answers .ea-gcard__rest{display:-webkit-box;-webkit-box-orient:vertical;-webkit-line-clamp:3;line-clamp:3;overflow:hidden;
	min-height:calc(var(--eaf-s-md,22px) + 3em * var(--eaf-lh-head,1.25))}
/* each word whole (owner round 102, F3; echoai_al_whole_words(), lib/config.php, the one helper since L10): the clamp hides a word that does not fit beside
   "…" instead of cutting its letters ("ובונה תרבו…" at 1828). max-width keeps a word longer than the card inside it. */
#ea-answers .ea-gcard__rest .ea-w{display:inline-block;max-width:100%;overflow-wrap:anywhere}
/* two lines, always two rows: a guide with no usable teaser keeps the empty slot (ריק אומר ריק) */
#ea-answers .ea-gcard__x{margin:var(--eaf-s-2xs,10px) var(--eaf-s-md,22px) 0;min-height:calc(2em * 1.5);
	font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);color:var(--ea-ink-mute);
	display:-webkit-box;-webkit-line-clamp:2;line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;transition:color .2s}
/* the clamp ends on a whole word and is the teaser's only cut: each word is its own box and the server adds no "…"
   (echoai_al_teaser_words(), lib/config.php; wave 4 catcomp-11, LEAN 3.1 L7, NO-CUT item 20 and X1, X2) */
#ea-answers .ea-gcard__x .ea-w{display:inline-block;max-width:100%;overflow-wrap:anywhere}
#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-gcard__x{color:var(--ea-ink-mute-on-tint)}
#ea-answers .ea-gcard__foot{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-block-start:auto;
	padding:var(--eaf-s-sm,18px) var(--eaf-s-md,22px)}
#ea-answers .ea-go{display:inline-flex;align-items:center;gap:6px;font-size:var(--eaf-fs-small,14.5px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-accent-text)}
#ea-answers .ea-ico{flex:none;width:1em;height:1em;transition:translate .35s var(--ea-ease)}
#ea-answers[dir="ltr"] .ea-ico--fwd{scale:-1 1}
#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-go .ea-ico{translate:calc(-3px * var(--eac-dir)) 0}
/* the count is on every card; a guide with no live question yet is shown with the slot empty (round 18,
   and the reference client's second review: no label announcing what is not there yet) */
#ea-answers .ea-count{display:inline-flex;align-items:center;min-height:28px;padding:0 11px;margin-inline-start:auto;border-radius:var(--ea-btn-radius,999px);
	font-size:var(--eaf-fs-meta,13px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;font-variant-numeric:tabular-nums;white-space:nowrap;
	background:var(--ea-tint);color:var(--ea-accent-ink);transition:background-color .2s}
#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-count{background:var(--ea-surface)}
#ea-answers .ea-count.ea-count--zero,#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-count.ea-count--zero{
	padding:0;background:transparent;box-shadow:none}

/* ---------- 6. the cover: the guide's picture, the client's default picture, or the typographic face ----------
   The face: the title's key set large on one of two grounds (band, deep, by position), and ONE motif family per
   client (the vertical streaks), faded away from the words. A figure never takes the words' colour. */
#ea-answers .ea-cover{position:relative;display:flex;align-items:flex-end;aspect-ratio:16/9;overflow:hidden;isolation:isolate;margin:0;
	padding:var(--eaf-s-md,22px);
	--fbg:var(--ea-band);--ffg:var(--ea-on-band);--fa:var(--ea-accent-on-band);--fb:var(--ea-spark-on-band);
	background:var(--fbg);color:var(--ffg)}
#ea-answers .ea-cover[data-pair="deep"]{--fbg:linear-gradient(160deg,var(--ea-band) 0,var(--ea-band) 42%,color-mix(in oklab,var(--ea-accent-fill) 34%,var(--ea-band)) 135%)}
/* the brand fill (its own label colour) and the tint (the accent's ink): the palette's other two grounds */
#ea-answers .ea-cover[data-pair="fill"]{--fbg:var(--ea-accent-fill);--ffg:var(--ea-on-accent);
	--fa:color-mix(in oklab,var(--ea-accent-fill) 55%,var(--ea-band));--fb:color-mix(in oklab,var(--ea-accent-fill) 55%,var(--ea-surface))}
#ea-answers .ea-cover[data-pair="tint"]{--fbg:var(--ea-tint-strong);--ffg:var(--ea-accent-ink);--fa:var(--ea-accent);--fb:var(--ea-accent-ui)}
/* never clamped (LEAN 3.1 L7, NO-CUT item 21): the key is taken off the card's title, so a clamped key was a title with
   words missing. The server splits a title only when its key fits the cover's lines (ECHOAI_AL_COVER_KEY_MAX). */
#ea-answers .ea-cover__key{position:relative;z-index:2;display:block;max-width:92%;margin:0;
	font-size:min(var(--eaf-fs-section,31px), max(1.9375rem, 31px));line-height:1.13;font-weight:800;letter-spacing:-.02em;color:var(--ffg);text-wrap:balance}
@media (min-width:1680px){#ea-answers .ea-cover__key{font-size:calc(var(--eaf-fs-h3,21px) * 1.05)}}
/* ⛔ a word is never broken inside itself on a face (I-73: the row face read «Executive / Communicatio / n»). The page's
   break-word (section 1) and a balanced wrap let a long word split; on a face a word stays whole, a hyphenated one in its
   .ea-nw box (echoai_answers_face_text()), and when the longest word is wider than the face the fitter printed after the
   list steps the size down to the read floor, then shows the first whole words and «…» (echoai_answers_face_fit_script(),
   src/reading-ui.php). Gate a-face-that-breaks-a-word; tests/qa-face-words-browser.cjs. */
#ea-answers .ea-cover__key{overflow-wrap:normal;word-break:keep-all;-webkit-hyphens:none;hyphens:none}
/* 3.0.1 wide windows: the running text is 21 from a 600 page and the section role 34.2 with it; the cover's key word keeps its
   31. Its phone card reaches 30.6 at a 640 page (200% of a 1280 window), so 1.9x allows 32.2 at most (measured: 1.786x at 34.2,
   tests/qa-zoom-every-role.cjs). A constant with a rem twin is 2.0x itself. */
#ea-answers .ea-cover::before,#ea-answers .ea-cover::after{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
	transition:transform .9s var(--ea-ease),opacity .4s}
/* signal (the reference client's own art): the vertical streaks. The fleet default (sweep) is one diagonal beam family,
   below; none draws the grounds alone. The art is the client's (data-ea-art on the root). */
#ea-answers[data-ea-art="signal"] .ea-cover[data-figure]::after{opacity:.95;
	background:linear-gradient(90deg,var(--fa) 0,var(--fb) 22%,var(--fa) 46%,var(--fb) 70%,var(--fa) 100%) 0 0/220% 100%;
	background-position:calc(var(--k,0) * 22%) 0;
	-webkit-mask-image:repeating-linear-gradient(90deg,var(--ea-ink) 0 2px,transparent 2px 7px,var(--ea-ink) 7px 8px,transparent 8px 15px),radial-gradient(95% 125% at var(--sx,14%) 0%,var(--ea-ink) 0,color-mix(in srgb,var(--ea-ink) 55%,transparent) 38%,transparent 72%);
	-webkit-mask-composite:source-in;
	mask-image:repeating-linear-gradient(90deg,var(--ea-ink) 0 2px,transparent 2px 7px,var(--ea-ink) 7px 8px,transparent 8px 15px),radial-gradient(95% 125% at var(--sx,14%) 0%,var(--ea-ink) 0,color-mix(in srgb,var(--ea-ink) 55%,transparent) 38%,transparent 72%);
	mask-composite:intersect}
#ea-answers .ea-cover[data-figure]::before{background:radial-gradient(60% 80% at var(--sx,14%) 0%,color-mix(in srgb,var(--fa) 22%,transparent),transparent 70%)}
#ea-answers:not([data-ea-art="signal"]) .ea-cover[data-figure]::after{opacity:.95;
	background:linear-gradient(115deg,transparent 0 30%,var(--fa) 30% 46%,transparent 46% 52%,var(--fb) 52% 58%,transparent 58%) 0 0/160% 100%;
	background-position:calc(var(--k,0) * 18%) 0;
	-webkit-mask-image:radial-gradient(110% 130% at var(--sx,14%) 0%,var(--ea-ink) 0,color-mix(in srgb,var(--ea-ink) 60%,transparent) 40%,transparent 74%);
	mask-image:radial-gradient(110% 130% at var(--sx,14%) 0%,var(--ea-ink) 0,color-mix(in srgb,var(--ea-ink) 60%,transparent) 40%,transparent 74%)}
#ea-answers[data-ea-art="none"] .ea-cover[data-figure]::after,#ea-answers[data-ea-art="none"] .ea-cover[data-figure]::before{display:none}
#ea-answers .ea-cover[data-figure="1"]{--k:1;--sx:30%}
#ea-answers .ea-cover[data-figure="2"]{--k:2;--sx:6%}
#ea-answers .ea-cover[data-figure="3"]{--k:3;--sx:40%}
#ea-answers .ea-cover[data-figure="4"]{--k:4;--sx:22%}
#ea-answers[dir="ltr"] .ea-cover::before,#ea-answers[dir="ltr"] .ea-cover::after{scale:-1 1}
/* toward the reading direction: inside the LTR flip (scale:-1 1) the same -6px already points the other way */
#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-cover[data-figure]::after{transform:scale(1.04) translateX(-6px)}
/* a picture takes the cover whole; nothing is drawn over it (a client image may carry its own lettering) */
#ea-answers .ea-cover--img{padding:0;background:var(--ea-band)}
#ea-answers .ea-cover__img{position:absolute;inset:0;z-index:0;display:block;width:100%;height:100%;max-width:none;margin:0;object-fit:cover;border-radius:0}
/* the dial: balanced keeps the band; quiet keeps the ground light and lets the brand be one hairline (L3) */
#ea-answers[data-ea-intensity="balanced"] .ea-cover[data-pair="deep"]{--fbg:var(--ea-band)}
#ea-answers[data-ea-intensity="balanced"] .ea-cover[data-pair="fill"]{--fbg:var(--ea-tint-strong);--ffg:var(--ea-accent-ink);--fa:var(--ea-accent);--fb:var(--ea-accent-ui)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover,#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair]{--fbg:var(--ea-surface-2);--ffg:var(--ea-ink);--fa:var(--ea-accent);--fb:var(--ea-accent-ui)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover:is([data-pair="band"],[data-pair="deep"]){--fbg:var(--ea-tint);--ffg:var(--ea-accent-ink)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-figure]::after{
	background:linear-gradient(115deg,transparent 0 calc(50% - 1px),var(--eaq,var(--ea-accent)) calc(50% - 1px) calc(50% + 1px),transparent calc(50% + 1px)) 0 0/100% 100%;
	-webkit-mask-image:linear-gradient(to bottom,var(--ea-ink),transparent 85%);mask-image:linear-gradient(to bottom,var(--ea-ink),transparent 85%);opacity:.9}
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-figure]::before{background:none}
#ea-answers[data-ea-intensity="quiet"] .ea-cover__key{font-weight:700}
/* quiet covers are told apart (the reference client's review of 3.0.0, U-2; the owner's ruling "not the same stripe
   on every card; vary the hue"). 3.0.0 printed each quiet cover's place in the catalogue in its corner (01, 02 ...);
   the owner's «להוריד את המספורים» (04.10, with PHONE-CARDS-C) took every number out of the catalogue, so a quiet face is
   told apart by its own words (echoai_answers_face_label()) and its guide's pair, the hue below. */
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair="band"]{--eaq:var(--ea-accent)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair="deep"]{--eaq:var(--ea-graphic)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair="fill"]{--eaq:var(--ea-accent-ui)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair="tint"]{--eaq:var(--ea-spark)}
/* the words keep a safe inset from the art (the reference client's review of 3.0.0, U-3): a long Latin title
   ("Executive Communication והשפעה") ran onto the stripes, where the words fell to 2.5:1 on the dark one. Each
   letter now carries an edge of its own ground: a close, dense ring (the same thin shadows stacked, so the
   ground next to a stroke is the ground again) and a soft halo past it, with room for it inside the title's
   clipped box (padding, given back by an equal negative margin, so nothing moves). No stripe, streak or line touches a
   letter, whatever the title's length, the art or the direction, and on a flat ground nothing shows at all. The
   deep ground is matched at the colour its gradient has under the words. tests/qa-catalogue-browser.cjs reads
   the ground next to every letter with the art at full strength. */
#ea-answers .ea-cover{--fgd:var(--ea-band)}
#ea-answers .ea-cover[data-pair="deep"]{--fgd:color-mix(in oklab,var(--ea-accent-fill) 14%,var(--ea-band))}
#ea-answers .ea-cover[data-pair="fill"]{--fgd:var(--ea-accent-fill)}
#ea-answers .ea-cover[data-pair="tint"]{--fgd:var(--ea-tint-strong)}
#ea-answers[data-ea-intensity="balanced"] .ea-cover[data-pair="deep"]{--fgd:var(--ea-band)}
#ea-answers[data-ea-intensity="balanced"] .ea-cover[data-pair="fill"]{--fgd:var(--ea-tint-strong)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover,#ea-answers[data-ea-intensity="quiet"] .ea-cover[data-pair]{--fgd:var(--ea-surface-2)}
#ea-answers[data-ea-intensity="quiet"] .ea-cover:is([data-pair="band"],[data-pair="deep"]){--fgd:var(--ea-tint)}
#ea-answers .ea-cover__key{padding:.3em;margin:-.3em;text-shadow:0 0 1px var(--fgd),0 0 2px var(--fgd),0 0 2px var(--fgd),0 0 3px var(--fgd),0 0 3px var(--fgd),0 0 4px var(--fgd),0 0 4px var(--fgd),0 0 6px var(--fgd),0 0 .4em var(--fgd)}

/* phones: compact cards, the same three parts (a 3:1 cover band, tighter padding), the search full width */
@media (max-width:767.98px){
	#ea-answers .ea-search{flex-basis:100%;max-width:none}
	#ea-answers .ea-cover{aspect-ratio:3/1;padding:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px)}
	#ea-answers .ea-cover__key{font-size:var(--eaf-fs-h3,21px)}
	#ea-answers .ea-gcard__rest{padding:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px) 0;min-height:calc(var(--eaf-s-xs,14px) + 3em * var(--eaf-lh-head,1.25))}
	#ea-answers .ea-gcard__x{margin-inline:var(--eaf-s-sm,18px)}
	#ea-answers .ea-gcard__foot{padding:var(--eaf-s-xs,14px) var(--eaf-s-sm,18px)}
	#ea-answers :is(.ea-cat__ob,.ea-cat__run){padding-inline:var(--eaf-s-xs,14px)}
}
/* The cover's key word is display type (owner round 60: every text role >= 1.9x at 200%). A 1280 window at 200% zoom
   IS a 640 page, so it lands on the phone card above, and the phone's 20.1 against the desktop's 30.7 gave it 1.31x.
   So on the phone card it leaves the phone design (19 at 390) in a straight line and meets the desktop's line (the
   section role) at 620: 19 / 20.85 / 29.67 at 390 / 430 / 640, 1.931x in a 1280 window. The intercept is positive
   (19 - 390 x 0.04625 = 0.96), so every zoom step still enlarges it. Where container units are missing, the phone
   keeps the h3 step above. */
@supports (width: 1cqw){
	@media (max-width:767.98px){
		#ea-answers .ea-cover__key{font-size:min(var(--eaf-fs-section,23px), max(1.1875rem, 19px) + max(0px, var(--eaf-page,390px) - 390px) * 0.04625)}
	}
}

/* ---------- 7. the contact banner (round 32): the end of the page, and right under "nothing found" ----------
   One anatomy, three variants by the direction's CTA knob: card (the signature card), band (the deep
   band, quiet luxury) and solid (the brand fill, magazine). The title is a <p>: a sales line is never a heading
   answer engines chunk by. */
#ea-answers .ea-cat-cta{position:relative;isolation:isolate;overflow:hidden;margin:var(--eaf-s-4xl,70px) 0 0;
	border-radius:var(--ea-radius,20px);color:var(--ea-ink);background:var(--ea-surface);
	border:1px solid color-mix(in oklab,var(--ea-accent) 22%,var(--ea-line));
	box-shadow:0 1px 2px rgba(var(--ea-shadow-rgb),.05),0 26px 52px -18px rgba(var(--ea-shadow-rgb),.2)}
#ea-answers[data-ea-searching] .ea-cat-cta{margin-block-start:var(--eaf-s-lg,28px)}
/* the top line: accent into spark, fading toward the end */
#ea-answers .ea-cat-cta::before{content:"";position:absolute;z-index:3;inset-block-start:0;inset-inline:0;height:5px;
	background:linear-gradient(to left,var(--ea-accent),var(--ea-spark) 58%,color-mix(in oklab,var(--ea-spark) 8%,transparent))}
#ea-answers[dir="ltr"] .ea-cat-cta::before{background:linear-gradient(to right,var(--ea-accent),var(--ea-spark) 58%,color-mix(in oklab,var(--ea-spark) 8%,transparent))}
#ea-answers .ea-cat-cta__art{position:absolute;z-index:0;inset-block:0;inset-inline-end:0;width:min(64%,640px);pointer-events:none;
	/* SWEEP (the fleet default): two diagonal beams of light and one soft glow, no motif */
	background:linear-gradient(245deg,transparent 30%,color-mix(in oklab,var(--ea-accent) 22%,transparent) 46%,transparent 62%),
		linear-gradient(212deg,transparent 44%,color-mix(in oklab,var(--ea-spark) 22%,transparent) 60%,transparent 76%),
		radial-gradient(circle 320px at 15% 20%,color-mix(in oklab,var(--ea-accent) 26%,transparent),transparent);
	-webkit-mask-image:linear-gradient(to right,var(--ea-ink) 30%,transparent 96%);mask-image:linear-gradient(to right,var(--ea-ink) 30%,transparent 96%)}
/* SIGNAL (the reference client's own art, the signature card only): an aurora and rings from one bright core */
#ea-answers[data-ea-art="signal"] .ea-cat-cta--card .ea-cat-cta__art{
	background:radial-gradient(circle 300px at 15% 42%,color-mix(in oklab,var(--ea-accent) 30%,transparent),transparent),
		radial-gradient(circle 260px at 45% 108%,color-mix(in oklab,var(--ea-spark) 26%,transparent),transparent)}
/* ⛔ the rings and the dot sit by PHYSICAL left inside the art: the art is the page's end side and is
   mirrored whole in LTR (scale:-1 1), so a logical inset here was mirrored twice and put the dot in the
   middle of an English banner's paragraph (measured 29.09 at 1440 and 768). Left inside the art is the
   banner's outer edge in both directions. */
#ea-answers[data-ea-art="signal"] .ea-cat-cta--card .ea-cat-cta__art::before{content:"";position:absolute;width:680px;aspect-ratio:1;border-radius:50%;
	inset-block-start:50%;left:-250px;translate:0 -50%;
	background:repeating-radial-gradient(circle,transparent 0 41px,color-mix(in oklab,var(--ea-accent) 17%,transparent) 41px 42.5px);
	-webkit-mask-image:radial-gradient(closest-side,var(--ea-ink) 30%,transparent);mask-image:radial-gradient(closest-side,var(--ea-ink) 30%,transparent)}
#ea-answers[data-ea-art="signal"] .ea-cat-cta--card .ea-cat-cta__art::after{content:"";position:absolute;width:14px;height:14px;border-radius:50%;
	inset-block-start:calc(50% - 7px);left:83px;background:var(--ea-accent);
	box-shadow:0 0 0 9px color-mix(in oklab,var(--ea-accent) 16%,transparent),0 0 0 20px color-mix(in oklab,var(--ea-accent) 7%,transparent)}
#ea-answers[data-ea-art="none"] .ea-cat-cta__art{display:none}
#ea-answers[dir="ltr"] .ea-cat-cta__art{scale:-1 1}
#ea-answers .ea-cat-cta__body{position:relative;z-index:1;max-width:calc(var(--eaf-u,1px) * 780);padding:var(--eaf-s-3xl,58px) var(--eaf-s-4xl,70px)}
#ea-answers .ea-cat-cta__eyebrow{display:flex;align-items:center;gap:var(--eaf-s-2xs,10px);margin:0 0 var(--eaf-s-xs,14px);
	font-size:var(--eaf-fs-label,12px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-accent-text)}
#ea-answers .ea-cat-cta__eyebrow::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--ea-accent)}
#ea-answers .ea-cat-cta__h{margin:0;font-size:var(--eaf-fs-section,31px);line-height:var(--eaf-lh-head,1.25);font-weight:800;letter-spacing:-.012em;color:inherit;text-wrap:balance}
#ea-answers .ea-cat-cta__p{max-width:var(--ea-measure-text,31em);margin:var(--eaf-s-sm,18px) 0 0;font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-body,1.8);color:var(--ea-ink-mute)}
#ea-answers .ea-cat-cta__go{margin:var(--eaf-s-lg,28px) 0 0}
#ea-answers a.ea-cat-cta__btn{display:inline-flex;align-items:center;justify-content:center;gap:var(--eaf-s-2xs,10px);max-inline-size:100%;
	min-height:calc(var(--eaf-u390,0px) * 50 + var(--eaf-u1440,1px) * 54);margin:0;
	padding-block:var(--eaf-s-xs,14px);padding-inline:var(--eaf-s-lg,28px) var(--eaf-s-md,22px);
	font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-head,1.25);font-weight:700;text-align:center;text-decoration:none;text-wrap:balance;overflow-wrap:anywhere;
	color:var(--ea-on-accent);background:var(--ea-accent-fill);border:0;border-radius:var(--ea-btn-radius,999px);
	box-shadow:0 12px 26px -12px color-mix(in oklab,var(--ea-accent-fill) 75%,transparent);
	transition:background-color .18s,translate .18s var(--ea-ease)}
#ea-answers a.ea-cat-cta__btn:hover{color:var(--ea-on-accent);background:var(--ea-accent-hover);translate:0 -1px;text-decoration:none}
#ea-answers a.ea-cat-cta__btn:focus-visible{outline:2px solid var(--ea-focus);outline-offset:3px}
#ea-answers a.ea-cat-cta__btn .ea-ico{width:1.25em;height:1.25em}
#ea-answers a.ea-cat-cta__btn:hover .ea-ico{translate:calc(-4px * var(--eac-dir)) 0}
/* band (quiet luxury): the deep band, one soft light, the band's own button */
#ea-answers .ea-cat-cta--band{color:var(--ea-on-band);background:var(--ea-band-live);border:0;box-shadow:0 30px 60px -24px rgba(var(--ea-shadow-rgb),.45)}
#ea-answers .ea-cat-cta--band .ea-cat-cta__art{background:radial-gradient(ellipse 380px 300px at 15% 18%,color-mix(in oklab,var(--ea-glow) 38%,transparent),transparent)}
#ea-answers .ea-cat-cta--band :is(.ea-cat-cta__eyebrow,.ea-cat-cta__p){color:var(--ea-on-band-muted)}
#ea-answers .ea-cat-cta--band .ea-cat-cta__eyebrow::before{background:var(--ea-band-button)}
#ea-answers .ea-cat-cta--band a.ea-cat-cta__btn{color:var(--ea-on-band-button);background:var(--ea-band-button);box-shadow:none}
#ea-answers .ea-cat-cta--band a.ea-cat-cta__btn:hover{color:var(--ea-on-band-button);background:var(--ea-band-button-hover)}
#ea-answers .ea-cat-cta--band :focus-visible,#ea-answers .ea-cat-cta--band a.ea-cat-cta__btn:focus-visible{outline-color:var(--ea-focus-on-band)}
/* solid (magazine): the whole banner in the brand fill, its own label colour for every word, no art;
   the button inverts the pair (D1: both >= 4.5 by construction) */
#ea-answers .ea-cat-cta--solid{color:var(--ea-on-accent);background:var(--ea-accent-fill);border:0;box-shadow:none}
#ea-answers .ea-cat-cta--solid::before,#ea-answers .ea-cat-cta--solid .ea-cat-cta__art{display:none}
#ea-answers .ea-cat-cta--solid :is(.ea-cat-cta__eyebrow,.ea-cat-cta__p){color:var(--ea-on-accent)}
#ea-answers .ea-cat-cta--solid .ea-cat-cta__eyebrow::before{background:var(--ea-on-accent)}
#ea-answers .ea-cat-cta--solid a.ea-cat-cta__btn{color:var(--ea-accent-fill);background:var(--ea-on-accent);box-shadow:none}
#ea-answers .ea-cat-cta--solid a.ea-cat-cta__btn:hover{color:var(--ea-accent-hover);background:var(--ea-on-accent)}
#ea-answers .ea-cat-cta--solid :focus-visible,#ea-answers .ea-cat-cta--solid a.ea-cat-cta__btn:focus-visible{outline-color:var(--ea-on-accent)}
/* the quiet dial: the brand is punctuation (round 30) - one rule, one button, no light */
#ea-answers[data-ea-intensity="quiet"] .ea-cat-cta::before{display:none}
#ea-answers[data-ea-intensity="quiet"] .ea-cat-cta__art{display:none}
#ea-answers[data-ea-intensity="quiet"] .ea-cat-cta--band{box-shadow:none}
/* phones and narrow tablets, as the CTA family does on the guide and the question: the text runs the full
   width there, so the art keeps to the top and the rings with their dot move into the corner (at 390 the
   dot sat behind the paragraph, measured 29.09); the button takes the full width */
@media (max-width:899.98px){
	#ea-answers[data-ea-art="signal"] .ea-cat-cta--card .ea-cat-cta__art::before{width:420px;inset-block-start:-170px;left:-190px;translate:none}
	#ea-answers[data-ea-art="signal"] .ea-cat-cta--card .ea-cat-cta__art::after{inset-block-start:33px;left:23px}
}
@media (max-width:599.98px){
	#ea-answers .ea-cat-cta__body{padding-block:var(--eaf-s-2xl,44px) var(--eaf-s-lg,28px);padding-inline:var(--eaf-s-md,22px)}
	#ea-answers .ea-cat-cta__art{width:100%;-webkit-mask-image:linear-gradient(to bottom,var(--ea-ink) 0,transparent 46%);mask-image:linear-gradient(to bottom,var(--ea-ink) 0,transparent 46%)}
	#ea-answers a.ea-cat-cta__btn{width:100%}
}

/* ---------- 8. the directions' rhythm (round 13, 30): bold = magazine, airy = quiet luxury ---------- */
#ea-answers[data-ea-rhythm="bold"] .ea-cat__h1{font-weight:900}
#ea-answers[data-ea-rhythm="bold"] .ea-gcard__rest{font-weight:900;letter-spacing:-.01em}
#ea-answers[data-ea-rhythm="bold"] .ea-cat-cta__h{font-weight:900}
#ea-answers[data-ea-rhythm="airy"] .ea-cat__h1{font-weight:600;letter-spacing:-.02em}
#ea-answers[data-ea-rhythm="airy"] .ea-gcard{border-color:transparent;border-block-start-color:var(--ea-ink);box-shadow:none}
#ea-answers[data-ea-rhythm="airy"] .ea-gcard__rest{font-weight:600}
#ea-answers[data-ea-rhythm="airy"] .ea-cat-cta__h{font-weight:600}
#ea-answers[data-ea-rhythm="airy"] .ea-cat-cta__eyebrow{font-weight:500}
#ea-answers[data-ea-rhythm="airy"] .ea-cat__grid{row-gap:calc(var(--eac-gap) * 1.4)}
/* Hebrew is never letter-spaced (round 101, CAT-13): the tracking above is written for Latin capitals, and on Hebrew
   it only pulls a word apart. After every rhythm, so it holds in each. */
#ea-answers :is(.ea-cat__rh,.ea-cat-cta__eyebrow):lang(he){letter-spacing:0}

/* ---------- 9. motion: the reveal is the foundation's (data-ea-reveal on each card and on the banner) ---------- */
/* reduced motion: the breath keeps its tint and shadow and loses the lift and every transition */
@media (prefers-reduced-motion:reduce){
	#ea-answers :is(.ea-gcard,.ea-cover::before,.ea-cover::after,.ea-ico,.ea-gcard__x,.ea-count,.ea-cat__ob,a.ea-cat-cta__btn,button.ea-search__x,button.ea-cat__clear){transition:none}
	#ea-answers .ea-gcard:is(:hover,:focus-within){translate:none}
	#ea-answers .ea-gcard:is(:hover,:focus-within) .ea-cover[data-figure]::after{transform:none}
	#ea-answers :is(.ea-gcard:hover .ea-go .ea-ico,.ea-gcard:focus-within .ea-go .ea-ico,a.ea-cat-cta__btn:hover .ea-ico,a.ea-cat-cta__btn:hover){translate:none}
}

/* ---------- 9b. the catalogue lane (owner rounds 106, 108; WAVE4 N7; lib/catalogue-index.php, docs/CATALOGUE.md) ---------- */

/* N7 CL-P01, then CATALOGUE-INDEX (04.10): the head is the name, the numbers and the opening sentence over one rule; the
   search heads the side column (section 11), so the head never squeezes it beside a long name */
#ea-answers{padding-block-start:var(--eaf-s-lg,28px)}
#ea-answers .ea-cat__top{display:block;margin:0 0 var(--eaf-s-md,22px);padding:0 0 var(--eaf-s-sm,18px);border-block-end:1px solid var(--ea-line)}
#ea-answers .ea-cat__top > .ea-cat__head{min-width:0;margin:0;padding:0;border:0}
#ea-answers .ea-cat__head > .ea-cat__lead{max-width:70ch;margin:var(--eaf-s-2xs,10px) 0 0}
#ea-answers .ea-search input[type="search"]{height:min(calc(var(--eaf-u390,0px) * 48 + var(--eaf-u1440,1px) * 52),52px)}
#ea-answers .ea-cat__upd{white-space:nowrap}

/* round 106 Q9 · every question, by guide: native disclosures (no script, they print); two stacks from 900px */
#ea-answers .ea-cat-qx{margin:var(--eaf-s-3xl,58px) 0 0}
#ea-answers .ea-cat-qx__h{margin:0 0 var(--eaf-s-sm,18px);font-size:var(--eaf-fs-h3,21px);line-height:var(--eaf-lh-head,1.25);font-weight:800;letter-spacing:0;text-transform:none;color:var(--ea-ink)}
#ea-answers .ea-cat-qx__list{display:grid;grid-template-columns:minmax(0,1fr);column-gap:var(--eac-gap);align-items:start}
@media (min-width:900px){#ea-answers .ea-cat-qx__list{grid-auto-flow:column;grid-auto-columns:minmax(0,1fr)}}
#ea-answers .ea-cat-qx__col{min-width:0;border-block-start:1px solid var(--ea-line)}
#ea-answers details.ea-cat-qx__g{display:block;margin:0;padding:0;border:0;border-block-end:1px solid var(--ea-line);border-radius:0;background:transparent;box-shadow:none}
#ea-answers summary.ea-cat-qx__s{display:flex;align-items:center;gap:var(--eaf-s-xs,14px);min-height:48px;margin:0;padding:var(--eaf-s-xs,14px) 0;
	list-style:none;cursor:pointer;background:transparent;border:0;color:var(--ea-ink);
	font-size:var(--eaf-fs-large,18px);line-height:var(--eaf-lh-head,1.25);font-weight:700;text-transform:none;letter-spacing:0}
#ea-answers summary.ea-cat-qx__s::-webkit-details-marker{display:none}
#ea-answers summary.ea-cat-qx__s::marker{content:""}
#ea-answers summary.ea-cat-qx__s::before,#ea-answers summary.ea-cat-qx__s::after{content:none}
#ea-answers summary.ea-cat-qx__s:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px}
#ea-answers .ea-cat-qx__t{flex:1 1 auto;min-width:0;text-wrap:pretty}
#ea-answers summary.ea-cat-qx__s:hover .ea-cat-qx__t{text-decoration:underline;text-decoration-color:var(--ea-link-underline);text-underline-offset:.2em}
#ea-answers .ea-cat-qx__n{flex:none;font-size:var(--eaf-fs-read,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;color:var(--ea-ink-mute);font-variant-numeric:tabular-nums;white-space:nowrap}
#ea-answers .ea-cat-qx__i{flex:none;width:1em;height:1em;color:var(--ea-ink-mute);transition:rotate .2s var(--ea-ease)}
#ea-answers details.ea-cat-qx__g[open] > summary .ea-cat-qx__i{rotate:180deg}
/* 3.8.3 (NB 318, the motion audit's #11): the group opens and closes by height and fade, the contents' own rule (guide.css
   «the motion is CSS only (TOC-04)»): 250ms open, 200ms closed, at once under reduced motion, no fade. A browser without
   ::details-content drops these rules and opens at once, never broken; the links stay in the HTML either way. */
#ea-answers details.ea-cat-qx__g{interpolate-size:allow-keywords}
#ea-answers details.ea-cat-qx__g::details-content{block-size:0;opacity:0;overflow:clip;transition:block-size .2s var(--ea-ease),opacity .2s var(--ea-ease),content-visibility .2s allow-discrete}
#ea-answers details.ea-cat-qx__g[open]::details-content{block-size:auto;opacity:1;transition-duration:.25s}
@media (prefers-reduced-motion:reduce){#ea-answers details.ea-cat-qx__g::details-content{transition:none}}
#ea-answers .ea-cat-qx__qs{display:grid;gap:var(--eaf-s-3xs,4px);margin:0 0 var(--eaf-s-sm,18px);padding:0;list-style:none}
#ea-answers .ea-cat-qx__q{display:flex;align-items:baseline;gap:.4em;margin:0;padding:0;list-style:none}
#ea-answers .ea-cat-qx__q::before,#ea-answers .ea-cat-qx__q::marker{content:none}
#ea-answers a.ea-cat-qx__a{display:inline-block;flex:0 1 auto;min-width:0;padding-block:2px;font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-ui,1.5);font-weight:400;
	color:var(--ea-ink);background:none;border:0;box-shadow:none;
	text-decoration:underline;text-decoration-color:var(--ea-link-underline);text-decoration-thickness:1px;text-underline-offset:.2em}
#ea-answers a.ea-cat-qx__a:hover{color:var(--ea-ink);text-decoration-thickness:2px}
#ea-answers .ea-cat-qx__q > .ea-new{flex:none;margin:0}
@media (min-width:900px){
	#ea-answers .ea-cat-qx--one .ea-cat-qx__qs{display:block;columns:2;column-gap:var(--eac-gap)}
	#ea-answers .ea-cat-qx--one .ea-cat-qx__q{break-inside:avoid;margin:0 0 var(--eaf-s-3xs,4px)}
}

/* ⛔ PHONE-CARDS-C (the owner's poll after the board, 04.10: «ג: שני טורים, כריכה טיפוגרפית ושם קצר»; the mock
   decisions/research/catalogue-phone-cards-1004/C4-typographic-framed.png; it supersedes round 106 Q11's phone row and 07:28's
   «rows on the phone»). Below 768 the guides are a grid of TWO columns of compact cards, at every density: each card is the
   guide's typographic face (its brand ground and the face's words, echoai_answers_face_label(); no stripes, D1) and under it
   the SHORT name (.ea-gcard__short, the title's part before its colon; the whole title when it has none, its words
   wrapping, never clamped) and «N שאלות» under it (04.10, his poll on the phone catalogue): no teaser, no «למדריך», no
   chevron, no number. The card is one link (the link's ::after
   stretches over it, round 3) whose name is the whole title; a guide that gained questions keeps its tag, on the face's
   corner. The face's words are fitted by the face fitter (I-73) at the read floor or more. Gate a-phone-catalogue-not-cards;
   tests/qa-phone-cards-browser.cjs. */
#ea-answers .ea-gcard__short{display:none}
@media (max-width:767.98px){
	#ea-answers .ea-wrap .ea-cat__grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:var(--eaf-s-lg,28px) var(--eaf-s-xs,14px);border:0}
	#ea-answers .ea-cat__grid .ea-gcard{display:flex;flex-direction:column;gap:var(--eaf-s-2xs,10px);padding:0;border:0;border-radius:0;background:transparent;box-shadow:none;overflow:visible}
	#ea-answers .ea-cat__grid .ea-gcard:not(.ea-gcard--flat)::before,#ea-answers .ea-cat__grid .ea-gcard::after{content:none}
	#ea-answers .ea-cat__grid .ea-gcard:is(:hover,:focus-within){translate:none;background:transparent;box-shadow:none}
	/* the keyboard's ring, 3px outside the card (section 5), follows the face's corners round the face, the name and the count */
	#ea-answers .ea-cat__grid .ea-gcard:focus-within{border-radius:min(var(--ea-radius,20px),14px)}
	#ea-answers .ea-cat__grid .ea-gcard.ea-gcard--flat{padding:var(--eaf-s-sm,18px);border-radius:min(var(--ea-radius,20px),14px);background:var(--ea-tint-faint,var(--ea-surface-2))}
	/* the face: the card's whole width, a little taller than the computer's (the mock's 169 by 118), its words at the large size */
	#ea-answers .ea-cat__grid .ea-gcard > .ea-cover{display:flex;width:100%;aspect-ratio:10/7;margin:0;padding:var(--eaf-s-sm,18px);border-radius:min(var(--ea-radius,20px),14px)}
	#ea-answers .ea-cat__grid .ea-cover__key{display:block;max-width:calc(100% + .6em);font-size:var(--eaf-fs-body,17px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
	/* the name and its count: the teaser, «למדריך» and the chevron are not drawn; the new questions' tag stays. «N שאלות» stands
	   under the short name, small, in the meta colour (the owner's poll on the phone catalogue, 04.10: «+ N שאלות מתחת לשם
	   הקצר»), only where the guide has live questions: the empty slot of a guide with none draws nothing (round 18) */
	#ea-answers .ea-cat__grid .ea-gcard > .ea-gcard__x{display:none}
	#ea-answers .ea-cat__grid .ea-gcard > .ea-gcard__foot{display:contents}
	#ea-answers .ea-cat__grid .ea-gcard__foot > :not(.ea-new):not(.ea-count){display:none}
	#ea-answers .ea-cat__grid .ea-gcard__foot > .ea-count:not(.ea-x){display:block;margin:-4px 0 0;padding:0;border:0;border-radius:0;background:none;box-shadow:none;
		font-size:var(--eaf-fs-small,14px);line-height:var(--eaf-lh-ui,1.5);font-weight:400;color:var(--ea-ink-mute)}
	#ea-answers .ea-cat__grid .ea-gcard__foot > .ea-count:empty{display:none}
	/* the new questions' tag, at every density (a row prints it in its foot, an equal card after its title), out of the card's
	   height (round 34: nothing moves on its 31st day). ⛔ A FLOATING TAG ON THE FACE'S TOP EDGE, INSIDE THE CARD (the owner's
	   WhatsApp of 13.10 14:07 on board b5: «במובייל זה קופץ מחוץ לכרטיס טיפה להוסיף איזשהו צל כדי שזה ייראה תגית מרחפת מעל
	   הכרטיס... לצמצם את הטקסט שלה ואת הגודל... ולהוסיף שם אייקון של משהו חדש»). Until 3.3.2 it stood 8px over the face's
	   top edge, half in the gap above, which read as a tag falling off the card. Now: its top and its end corner 8px inside
	   the face, never wider than the card less both insets (a longer label breaks onto a second line inside it, whole: never
	   «…», NO-CUT), a soft
	   shadow under it so it floats over the face, a small sparkle before the words in the brand colour (the words' own
	   accent colour), and a tighter, lighter pill. Its words keep the glance floor (14px here, owner round 123), so the
	   pill is what got smaller. A tap on it is a tap on the card (pointer-events:none: it lies over the card's tap layer,
	   and it opens nothing of its own; review r3 S2). Gate a-phone-new-tag-outside-its-card. */
	#ea-answers .ea-cat__grid .ea-gcard :is(.ea-gcard > .ea-new,.ea-gcard__foot > .ea-new){position:absolute;z-index:2;pointer-events:none;inset-block:var(--eaf-s-2xs,10px) auto;inset-inline:auto var(--eaf-s-2xs,10px);max-inline-size:calc(100% - 2 * var(--eaf-s-2xs,10px));white-space:normal;overflow-wrap:break-word;margin:0;padding:.07em .45em .07em .5em;line-height:1.2;font-weight:600;
		box-shadow:0 3px 10px rgba(var(--ea-shadow-rgb),.26),0 1px 2px rgba(var(--ea-shadow-rgb),.2)}
	#ea-answers[data-ea-intensity="quiet"] .ea-cat__grid .ea-gcard :is(.ea-gcard > .ea-new,.ea-gcard__foot > .ea-new){box-shadow:inset 0 0 0 1px var(--ea-accent-ui),0 3px 10px rgba(var(--ea-shadow-rgb),.26)}
	#ea-answers .ea-cat__grid .ea-gcard :is(.ea-gcard > .ea-new,.ea-gcard__foot > .ea-new)::before{content:"";display:inline-block;inline-size:.7em;block-size:.7em;margin-inline-end:.28em;vertical-align:-.04em;background:currentColor;
		-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.45 4.55L12 6l-4.55 1.45L6 12l-1.45-4.55L0 6l4.55-1.45z'/%3E%3C/svg%3E") center/contain no-repeat;
		mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 12 12'%3E%3Cpath d='M6 0l1.45 4.55L12 6l-4.55 1.45L6 12l-1.45-4.55L0 6l4.55-1.45z'/%3E%3C/svg%3E") center/contain no-repeat}
	@media (prefers-contrast:more){
		#ea-answers .ea-cat__grid .ea-gcard :is(.ea-gcard > .ea-new,.ea-gcard__foot > .ea-new){box-shadow:inset 0 0 0 1px var(--ea-ink)}
	}
	@media (forced-colors:active){
		#ea-answers .ea-cat__grid .ea-gcard :is(.ea-gcard > .ea-new,.ea-gcard__foot > .ea-new)::before{background:CanvasText}
	}
	/* the short name: the key in the card's own words; the rest of the title stays the link's name, out of sight */
	#ea-answers .ea-cat__grid .ea-gcard__title{margin:0}
	#ea-answers .ea-cat__grid a.ea-gcard__link{display:block;font-size:var(--eaf-fs-body,17px);line-height:var(--eaf-lh-head,1.25);font-weight:700;color:var(--ea-ink);text-wrap:pretty}
	#ea-answers[data-ea-rhythm="bold"] .ea-cat__grid a.ea-gcard__link{font-weight:900}
	#ea-answers[data-ea-rhythm="airy"] .ea-cat__grid a.ea-gcard__link{font-weight:600}
	#ea-answers .ea-cat__grid a.ea-gcard__link > .ea-gcard__short{display:inline}
	#ea-answers .ea-cat__grid a.ea-gcard__link:has(> .ea-gcard__short) > .ea-gcard__rest{position:absolute;width:1px;height:1px;margin:-1px;padding:0;overflow:hidden;clip:rect(0 0 0 0);clip-path:inset(50%);white-space:nowrap}
	/* with no key the whole title is the name, whole: its units open with the word's gap (section 13), so the box steps out by one */
	#ea-answers .ea-cat__grid .ea-gcard__rest{display:inline;min-height:0;padding:0;overflow:visible;-webkit-line-clamp:unset;line-clamp:none;font-size:inherit;line-height:inherit}
	#ea-answers .ea-cat__grid .ea-gcard__rest:has(> .ea-w,> .ea-l){padding-inline-start:0}
	#ea-answers .ea-cat__grid a.ea-gcard__link:not(:has(> .ea-gcard__short)):has(> .ea-gcard__rest > .ea-w,> .ea-gcard__rest > .ea-l){margin-inline-start:-.25em}
}

/* round 108 Q13 · the banner is the ending; «לא מצאתם? כתבו לנו» is a quiet line of the list above it */
#ea-answers.ea-cat > .ea-wrap > .ea-ask{margin-block:var(--eaf-s-lg,28px) 0;padding:0;border:0}
#ea-answers.ea-cat > .ea-wrap > .ea-ask button.ea-ask__open{font-size:var(--eaf-fs-ui,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:400;color:var(--ea-ink-mute)}
#ea-answers.ea-cat > .ea-wrap > .ea-ask .ea-ask__go{font-weight:600;color:var(--ea-ink)}

@media (prefers-reduced-motion:reduce){#ea-answers .ea-cat-qx__i{transition:none}}

/* N7 cat-add-12 · print: no search, no banner, no covers (the old rule lost to html.ea-js); the index prints open */
@media print{
	html.ea-js #ea-answers :is(.ea-cat__tools,.ea-cat__res,.ea-cat__resmore,.ea-cat__none,.ea-cat__more,.ea-cat-cta){display:none}
	#ea-answers .ea-cover{display:none}
	#ea-answers details.ea-cat-qx__g::details-content{display:block;content-visibility:visible}
	#ea-answers details.ea-cat-qx__g::details-content{block-size:auto;opacity:1}
	#ea-answers .ea-cat-qx__i{display:none}
}

/* ---------- 10. high contrast follows the reader's own setting (round 17): tints fall to the surface, lines
   strengthen, muted text darkens, the banner's light goes. Nothing changes for anyone else. ---------- */
@media (prefers-contrast:more){
	/* the roles move in the foundation (tints to the surface, lines to 62% ink, the art is data-ea-deco);
	   here only what a role swap cannot reach: the count keeps an edge once its tint is gone */
	#ea-answers .ea-count{box-shadow:inset 0 0 0 1px var(--ea-ink)}
	#ea-answers .ea-cover[data-figure]::after,#ea-answers .ea-cover[data-figure]::before{display:none}
}
@media (forced-colors:active){
	#ea-answers :is(.ea-gcard,.ea-cat-cta,.ea-count:not(.ea-count--zero)){border:1px solid CanvasText}
	#ea-answers .ea-cat__ob[aria-selected="true"]{outline:2px solid Highlight;outline-offset:-2px}
	#ea-answers mark.ea-hit{background:Mark;color:MarkText}
}

/* ---------- 11. print: the list of guides, without the search, the button or the banner ---------- */
@media print{
	#ea-answers :is(.ea-cat__tools,.ea-cat__res,.ea-cat__resmore,.ea-cat__none,.ea-cat__more,.ea-cat-cta){display:none}
	#ea-answers .ea-cat__grid > .ea-cat__item[data-ea-rest]{display:flex}
	#ea-answers .ea-gcard{break-inside:avoid;box-shadow:none;translate:none}
}

/* ---------- 12. 3.0.1 · the card with no cover, and "new questions" beside the count (MAP RC4) ----------
   A card with no cover (the client chose no picture area) had no design at all: `ea-gcard--flat` carried no rule.
   It keeps the card's rows and opens on one accent rule. "New questions" never pushes into the teaser any more:
   on a card with no cover it stands in the foot, beside the count it is about. */
#ea-answers .ea-gcard--flat::before{content:"";display:block;flex:none;height:4px;background:var(--ea-accent)}
#ea-answers[data-ea-intensity="quiet"] .ea-gcard--flat::before{height:2px}
#ea-answers .ea-gcard__foot > .ea-new{margin-inline-start:auto}
#ea-answers .ea-gcard__foot > .ea-new + .ea-count{margin-inline-start:0}

/* ---------- 13. THE GAP IS THE WORD'S OWN (L10, the release candidate: "עושים …"; echoai_al_whole_words(), lib/config.php) ----------
   The clamp hides a word that does not fit beside "…", but a space printed between two words belonged to neither, so it
   stayed and "…" followed a space. The space between two units has no width of its own (.ea-s), every unit opens with
   the gap (so a unit the clamp hides takes its gap with it), and a box holding units is shifted out by one gap, so every
   line still starts at the edge. Measured in Chromium, WebKit and Firefox: line starts within 0.3px, no space before "…"
   (tests/no-cut/rules.cjs, gap-outside-the-word). Only a box that holds units moves (:has), so a plain text never shifts. */
#ea-answers :is(.ea-gcard__rest,.ea-gcard__x) .ea-s{font-size:0}
#ea-answers :is(.ea-gcard__rest,.ea-gcard__x) :is(.ea-w,.ea-u){padding-inline-start:.25em}
/* a single word longer than a line breaks inside itself: each of its lines opens with the gap */
#ea-answers :is(.ea-gcard__rest,.ea-gcard__x) .ea-u{-webkit-box-decoration-break:clone;box-decoration-break:clone}
#ea-answers .ea-gcard__rest:has(> .ea-w,> .ea-l){padding-inline-start:calc(var(--eaf-s-md,22px) - .25em)}
#ea-answers .ea-gcard__x:has(> .ea-w,> .ea-l){margin-inline-start:calc(var(--eaf-s-md,22px) - .25em)}
@media (max-width:767.98px){
	#ea-answers .ea-gcard__rest:has(> .ea-w,> .ea-l){padding-inline-start:calc(var(--eaf-s-sm,18px) - .25em)}
	#ea-answers .ea-gcard__x:has(> .ea-w,> .ea-l){margin-inline-start:calc(var(--eaf-s-sm,18px) - .25em)}
}
/* ---------------------------------------------------------------- 3.1.1 · FONT-ONE (owner W10 Q2, 03.10; I-67)
   The catalogue's headings declare no family (the site's heading rule reaches them, as on the guide and the question), one
   h1 weight per direction (foundation.css section 8), and running text in our font. */
#ea-answers[data-ea-direction] .ea-cat__h1{font-weight:var(--ea-fw-h1,800)}
#ea-answers :is(p,ol,ul,li,dl,dt,dd,cite,figcaption,blockquote,td,th):not([lang]){font-family:var(--ea-font)}

/* ---------------------------------------------------------------- 3.1.1 · D7 (owner look round 03.10 21:42 UTC, tower)
   The catalogue's closing banner: one solid line in the brand colour instead of the fading gradient strip. */
#ea-answers .ea-cat-cta:is(#echoai-scope,.ea-cat-cta)::before{background:var(--ea-accent)}
/* ---------------------------------------------------------------- 3.1.1 · #18 (the design audit; the agency stand-in 04.10)
   A phone row printed two gaps after the key's colon, «נכון:  מדריך»: the key's own space and the gap the first word
   opens with (section 13). After a key, the first word opens with none. */
@media (max-width:767.98px){
	#ea-answers .ea-cat__grid a.ea-gcard__link > .ea-sr + .ea-gcard__rest > .ea-w:first-child,
	#ea-answers .ea-cat__grid a.ea-gcard__link > .ea-sr + .ea-gcard__rest > .ea-l:first-child > .ea-u:first-child{padding-inline-start:0}
}
/* #22 (the design audit): a question link of the index is at least 44px tall on a touch screen (it was 30px) */
@media (pointer:coarse){#ea-answers a.ea-cat-qx__a{display:inline-flex;align-items:center;min-block-size:44px}}
/* ---------------------------------------------------------------- 3.1.1 · D4 (owner look round 03.10 21:54 UTC, tower): the site's
   ground. Where the ground under the catalogue is proven readable for our ink (data-ea-ground="host", the foundation
   script), the page paints no white band of its own; the cards keep their fills, a tone off the ground. */
#ea-answers[data-ea-ground="host"]{background:transparent}

/* ---------- 11. CATALOGUE-INDEX: A LIBRARY OF ROWS (the owner's look poll of 04.10, the tower: «ספרייה בשורות, בלי כרטיס
   גדול» and «+ מספור 01, 02 בכל שורה»; the mockup decisions/research/catalogue-layout-1004/tower-*.png) ----------
   The library: the guides in the main column, and from 1024 a side column at its end with the search, «נוספו לאחרונה»
   (only when real new questions exist, W12, lib/catalogue-index.php) and «לא מצאתם את השאלה שלכם? כתבו לנו». Below 1024
   one column: the search and «נוספו לאחרונה» above the guides, «כתבו לנו» after them. The density follows the count
   (src/reading-ui.php prints data-ea-density): up to 6 guides a grid of EQUAL cards, up to 30 numbered rows with the
   guide's small face (the D1 face: its brand ground and its topic name, no art), past 30 numbered rows alone. Emphasis
   only from a real event: the count is plain words, filled in the brand only on a guide that gained questions
   (.ea-count--new). Gate a-catalogue-not-a-library. */
#ea-answers .ea-cat__lib{display:flex;flex-direction:column}
#ea-answers .ea-cat__side{display:contents}
#ea-answers .ea-cat__side > .ea-cat__tools{order:1}
#ea-answers .ea-cat__side > .ea-cat__recent{order:2}
#ea-answers .ea-cat__main{order:3;min-width:0}
#ea-answers .ea-cat__side > .ea-ask{order:4}
html.ea-js #ea-answers .ea-cat__side > .ea-cat__tools{margin:0 0 var(--eaf-s-lg,28px)}
#ea-answers .ea-cat__side .ea-search{flex:1 1 auto;max-width:none}
/* while a search is on, what browses steps aside with the list: the contact banner stays the next thing after «לא מצאנו» */
#ea-answers[data-ea-searching] .ea-cat__side > :is(.ea-cat__recent,.ea-ask){display:none}
@media (min-width:1024px){
  #ea-answers .ea-cat__lib{display:grid;grid-template-columns:minmax(0,1fr) min(calc(var(--eaf-u,1px) * 330),32%);column-gap:var(--eaf-s-2xl,48px);align-items:start}
  #ea-answers .ea-cat__side{display:flex;flex-direction:column;gap:var(--eaf-s-lg,28px);grid-column:2;grid-row:1;min-width:0}
  #ea-answers .ea-cat__main{grid-column:1;grid-row:1}
  html.ea-js #ea-answers .ea-cat__side > .ea-cat__tools{margin:0}
}

/* «נוספו לאחרונה»: a heading in the eyebrow's voice, then the questions, each its title and its guide's topic */
#ea-answers .ea-cat__recent{margin:0 0 var(--eaf-s-lg,28px)}
@media (min-width:1024px){#ea-answers .ea-cat__recent{margin:0}}
#ea-answers .ea-cat__side-h{display:flex;align-items:center;gap:10px;margin:0 0 var(--eaf-s-3xs,4px);padding:0;
  font-size:var(--eaf-fs-small,15px);line-height:var(--eaf-lh-ui,1.5);font-weight:700;letter-spacing:0;text-transform:none;color:var(--ea-accent-text)}
#ea-answers .ea-cat__side-h::before{content:"";flex:none;width:22px;height:2px;border-radius:2px;background:var(--ea-accent)}
#ea-answers .ea-cat__rq{margin:0;padding:0;list-style:none}
#ea-answers .ea-cat__rq-i{margin:0;padding:0;list-style:none;border-block-end:1px solid var(--ea-line)}
#ea-answers .ea-cat__rq-i::before,#ea-answers .ea-cat__rq-i::marker{content:none}
#ea-answers a.ea-cat__rq-a{display:flex;flex-direction:column;justify-content:center;gap:2px;min-height:44px;padding:var(--eaf-s-2xs,10px) 0;
  color:var(--ea-ink);background:none;border:0;box-shadow:none;text-decoration:none}
#ea-answers .ea-cat__rq-t{font-size:var(--eaf-fs-ui,15px);line-height:1.4;font-weight:600;text-wrap:pretty}
#ea-answers .ea-cat__rq-g{font-size:var(--eaf-fs-small,15px);line-height:1.4;color:var(--ea-ink-mute)}
@media (hover:hover){#ea-answers a.ea-cat__rq-a:hover .ea-cat__rq-t{text-decoration:underline;text-decoration-color:var(--ea-link-underline);text-underline-offset:.2em}}
/* a plain row's words start at its edge (no side padding), so its ring stands outside it, never over the first letter
   (3.3.3, gate a-focus-ring-that-cuts-card-text); the swiped row of cards below 1024 and the side panel draw it inside, where
   the card's own padding (16px, 10px) keeps it off the words and no scroll edge can cut it */
#ea-answers a.ea-cat__rq-a:focus-visible{outline-offset:2px;border-radius:inherit}

/* «לא מצאתם את השאלה שלכם? כתבו לנו» as the side column's card: assets/readers.css draws it, the guide's and the question's
   card (the design pass of 11.10, row 193: «גם הטופס הזה מצד שמאל ... נפתח עם כל הבאגים הקודמים שציינתי»), at every width */
#ea-answers.ea-cat .ea-cat__side > .ea-ask{margin-block:var(--eaf-s-lg,28px) 0}
@media (min-width:1024px){#ea-answers.ea-cat .ea-cat__side > .ea-ask{margin-block:0}}

/* ⛔ NO NUMBER ON A ROW (the owner's words of 04.10, «להוריד את המספורים», with PHONE-CARDS-C; they supersede CATALOGUE-INDEX's
   «+ מספור 01, 02 בכל שורה»): the server prints no place, and a row is the face, the words, the count and the arrow */
@media (min-width:768px){
  /* up to six: equal cards, two a row, none bigger than another */
  #ea-answers .ea-cat__grid[data-ea-density="grid"]{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* past six: one row a line under one hairline */
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]){grid-template-columns:minmax(0,1fr);gap:0;border-block-start:1px solid var(--ea-line)}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard{--eac-meta:8em;display:grid;grid-template-columns:var(--eac-face,160px) minmax(0,1fr) var(--eac-meta) 20px;
    grid-template-rows:auto auto;align-items:center;column-gap:var(--eaf-s-md,22px);row-gap:var(--eaf-s-3xs,4px);padding:var(--eaf-s-sm,18px) 0;
    border:0;border-block-end:1px solid var(--ea-line);border-radius:0;background:transparent;box-shadow:none;overflow:visible}
  #ea-answers .ea-cat__grid[data-ea-density="index"] .ea-gcard,#ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-gcard--flat{grid-template-columns:minmax(0,1fr) var(--eac-meta) 20px}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard:is(:hover,:focus-within){translate:none;background:var(--ea-tint-faint);border-color:var(--ea-line);box-shadow:none}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard::before{content:none}
  /* the small face: the D1 face (the brand's ground and the topic name, no art), or the guide's picture small */
  /* the face is 160px at every width, so its side padding stops at 1440's 14px: a wider page grew it to 17.5px at 1920 and
     the key's line shrank to 125px (I-73) */
  #ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-gcard > .ea-cover{grid-column:1;grid-row:1 / span 2;align-self:start;width:var(--eac-face,160px);aspect-ratio:16/9;
    padding:var(--eaf-s-2xs,10px) min(var(--eaf-s-xs,12px),14px);border-radius:min(var(--ea-radius,20px),12px)}
  #ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-cover::before,#ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-cover::after{display:none}
  /* the key's line is the face's whole line (I-73): its halo padding (.3em, section 6) is given back by its negative margin, so
     a cap of 100% took the padding off the line, 126px of a 136px face, and «Communication» did not fit by a hair */
  #ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-cover__key{max-width:calc(100% + .6em);font-size:var(--eaf-fs-small,15px);line-height:1.15;letter-spacing:-.01em;text-wrap:balance}
  #ea-answers .ea-cat__grid[data-ea-density="index"] .ea-gcard > .ea-cover{display:none}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard > .ea-gcard__title,
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard > .ea-gcard__x{grid-column:-4}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard > .ea-gcard__title{grid-row:1;align-self:end}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard > .ea-gcard__x{grid-row:2;align-self:start;min-height:0;margin:0}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard__rest{min-height:0;padding:0;font-size:var(--eaf-fs-large,18px);line-height:var(--eaf-lh-head,1.25)}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard > .ea-gcard__foot{grid-column:-3;grid-row:1 / span 2;margin:0;padding:0}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-go{display:none}
  /* the arrow at the row's end, drawn once here */
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard::after{content:"";grid-column:-2;grid-row:1 / span 2;align-self:center;width:20px;height:20px;
    background-color:var(--ea-accent-text);transition:translate .2s var(--ea-ease);
    -webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4.5M9 5 4 10l5 5'/%3E%3C/svg%3E") center/contain no-repeat;
    mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 20 20' fill='none' stroke='%23000' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M16 10H4.5M9 5 4 10l5 5'/%3E%3C/svg%3E") center/contain no-repeat}
  #ea-answers[dir="ltr"] .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard::after{scale:-1 1}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard:is(:hover,:focus-within)::after{translate:calc(-4px * var(--eac-dir)) 0}
  /* «שאלות חדשות» above the count in the row's end column (the server prints it in the foot on a row). The column has a
     width of its own (--eac-meta), so the tag never narrows the title, and the two stacked are shorter than a title and
     a teaser of one line each: the row keeps its height with the tag and without it (round 34) */
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard__foot{flex-direction:column;align-items:flex-end;justify-content:center;gap:2px;min-width:0}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard__foot .ea-count{line-height:var(--eaf-lh-head,1.25);white-space:normal;text-align:end}
  #ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard__foot > .ea-new{margin:0}
}
/* the TABLET row face (768-1023) is the computer's, 160px at 16:9 (the owner's poll of 04.10: «כריכה רחבה יותר בטאבלט, שהשם ייכנס
   שלם»): at 120px (a 96px line) the read floor of round 123 left 3 of the agency stand-in's 10 keys cut («AI…», «Executive…»,
   «משברים,…»); at 160 every one is whole at 768, 900 and 1023 (tests/qa-face-words-browser.cjs, TABLET), and the row keeps
   its title and its teaser. The fitter and the word rules of I-73 are the same. */
@media (min-width:768px) and (max-width:1023.98px){#ea-answers .ea-cat__grid[data-ea-density="rows"]{--eac-face:160px}#ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-gcard > .ea-cover{aspect-ratio:16/9}}
/* a face that cannot hold its key whole at the read floor shows the key's first whole words and «…» (I-73, the fitter); the
   card's title then says the key itself, in the title's own voice, so no word taken off the title for the face is lost
   (NO-CUT item 21). A phone row prints the key in its title already (the phone rows above). */
@media (min-width:768px){
  #ea-answers .ea-gcard[data-ea-face-cut] a.ea-gcard__link > .ea-sr{position:static;display:block;width:auto;height:auto;margin:0;overflow:visible;clip:auto;clip-path:none;white-space:normal;
    font-size:var(--ea-fs-card,18px);line-height:var(--eaf-lh-head,1.25);font-weight:700;color:var(--ea-ink);text-wrap:balance}
  #ea-answers .ea-cat__grid[data-ea-density="grid"] .ea-gcard[data-ea-face-cut] a.ea-gcard__link > .ea-sr{padding:var(--eaf-s-md,22px) var(--eaf-s-md,22px) 0}
  #ea-answers .ea-cat__grid[data-ea-density="grid"] .ea-gcard[data-ea-face-cut] .ea-gcard__rest{padding-block-start:0}
  #ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-gcard[data-ea-face-cut] a.ea-gcard__link > .ea-sr{font-size:var(--eaf-fs-large,18px)}
  /* a row's title lines open with the word's own gap (section 13: the row box is not shifted out), so the key's line does too */
  #ea-answers .ea-cat__grid[data-ea-density="rows"] .ea-gcard[data-ea-face-cut] a.ea-gcard__link:has(> .ea-gcard__rest > .ea-w,> .ea-gcard__rest > .ea-l) > .ea-sr{padding-inline-start:.25em}
}
/* the count: plain words on a row; the brand's fill only for a guide that gained questions (the one real event) */
#ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-count:not(.ea-count--new){min-height:0;padding:0;background:none;color:var(--ea-ink-mute)}
#ea-answers .ea-cat__grid .ea-count.ea-count--new,#ea-answers .ea-cat__grid .ea-gcard:is(:hover,:focus-within) .ea-count.ea-count--new{background:var(--ea-accent-fill);color:var(--ea-on-accent)}
/* the quiet covers' place number is the row's own number on a row (section 6 draws it on an equal card only) */
#ea-answers[data-ea-intensity="quiet"] .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-cover[data-figure]::before{content:none}
@media (forced-colors:active){#ea-answers .ea-cat__grid:is([data-ea-density="rows"],[data-ea-density="index"]) .ea-gcard{border:0;border-block-end:1px solid CanvasText}}
/* below 1024 «נוספו לאחרונה» is one row of cards the reader swipes, so the guides stay near the first screen (the mockup's
   phone); every card is a link in the Tab order, so the row scrolls to whatever has focus */
@media (max-width:1023.98px){
  #ea-answers .ea-cat__rq{display:flex;gap:var(--eaf-s-xs,12px);overflow-x:auto;overscroll-behavior-x:contain;scroll-snap-type:x proximity;scrollbar-width:thin;padding:2px 0 var(--eaf-s-2xs,10px)}
  #ea-answers .ea-cat__rq-i{flex:0 0 min(78%,320px);scroll-snap-align:start;border:1px solid var(--ea-line);border-radius:min(var(--ea-radius,20px),14px);background:var(--ea-surface)}
  #ea-answers a.ea-cat__rq-a{height:100%;justify-content:flex-start;padding:var(--eaf-s-xs,12px) var(--eaf-s-sm,16px)}
  /* the ring inside the card (the row scrolls, and its edge would cut a ring drawn outside the first card) */
  #ea-answers a.ea-cat__rq-a:focus-visible{outline-offset:-2px}
}
/* a phone keeps two whole guides in its first screen (round 106 Q11) with the search and «נוספו לאחרונה» above them: the
   head, the search and the row of new questions sit closer, and a new question's card is its title and its guide's topic */
@media (max-width:767.98px){
  #ea-answers .ea-cat__top{margin-block-end:var(--eaf-s-sm,18px);padding-block-end:var(--eaf-s-sm,18px)}
  html.ea-js #ea-answers .ea-cat__side > .ea-cat__tools{margin-block-end:var(--eaf-s-sm,18px)}
  #ea-answers .ea-cat__recent{margin-block-end:var(--eaf-s-xs,14px)}
  #ea-answers .ea-cat__rq{padding-block-end:var(--eaf-s-3xs,4px)}
  #ea-answers a.ea-cat__rq-a{padding-block:var(--eaf-s-2xs,10px)}
  #ea-answers .ea-cat__rq-t{line-height:1.35}
  #ea-answers .ea-cat__rq-g{line-height:1.35}
}

/* ---------- NO STRIPES ON A FACE (D1, the owner's look round of 03.10: «a card without its own picture shows the client's brand
   colour with the topic name, NO stripes»; found on a phone row 04.10, pair-demo-cat-390). Every face (an equal card's, a
   row's at every width, a phone's thumb) is its brand ground and its words only: the streaks (signal), the beams (sweep),
   the quiet line and the glow are never drawn on a face. The quiet catalogue's place number went with the owner's «להוריד
   את המספורים» (04.10): no face prints a number. On a phone the face carries its words (PHONE-CARDS-C). The guide's own face is the
   same (assets/guide.css). Gate a-face-with-stripes; release gate entry face-with-stripes. ---------- */
#ea-answers[id] .ea-cover[data-figure][data-figure]::after{content:none;display:none}
#ea-answers[id] .ea-cover[data-figure][data-figure]::before{content:none;display:none}
/* ---------------------------------------------------------------- 3.1.1 · CATALOGUE-INTRO-CLAMP (the owner's poll of 04.10:
   «שתי שורות, ו«עוד» שפותח את השאר» + «הטקסט המלא נשאר בעמוד למנועי החיפוש»). On a phone a sentence the inline script found
   longer than two lines (data-ea-clamp) shows two; its second line ends on a whole word before «עוד» (a real button,
   44px to a finger); open (data-ea-open) it shows whole and the button follows it as «פחות». No script: the whole sentence,
   the button hidden. A computer is unchanged. src/reading-ui.php; tests/qa-catalogue-intro-browser.cjs. */
#ea-answers button.ea-cat__lead-more[hidden]{display:none}
/* the sentence is printed in whole-word units (echoai_al_whole_words()), so a clamp ends on a whole word; the gap is the
   word's own, as on a card (section 13), and the box steps out by one gap, so every line still starts on the edge */
#ea-answers .ea-cat__lead .ea-w{display:inline-block;max-width:100%;overflow-wrap:anywhere}
#ea-answers .ea-cat__lead .ea-s{font-size:0}
#ea-answers .ea-cat__lead :is(.ea-w,.ea-u){padding-inline-start:.25em}
#ea-answers .ea-cat__lead .ea-u{-webkit-box-decoration-break:clone;box-decoration-break:clone}
#ea-answers .ea-cat__head > .ea-cat__lead:has(> .ea-w,> .ea-l){margin-inline-start:-.25em}
@media (max-width:767.98px){
	#ea-answers .ea-cat__head:has(> button.ea-cat__lead-more:not([hidden])){position:relative}
	/* ⛔ TWO LINES BY HEIGHT, NEVER BY line-clamp (3.4.0; the design director on pair-design-laptop, 14.10: «...בספריית הידע..עוד»).
	   line-clamp draws its own «…» at the cut, and when the second line ends on the sentence's own full stop the reader got two
	   dots before «עוד». «עוד» already says there is more, so the box is two of its own lines high and clips; no ellipsis. Gate
	   a-catalogue-sentence-with-two-full-stops. */
	#ea-answers .ea-cat__lead[data-ea-clamp]:not([data-ea-open]){display:block;max-block-size:calc(var(--eaf-fs-lead,20px) * var(--eaf-lh-body,1.8) * 2);max-block-size:2lh;overflow:hidden}
	/* ⛔ no fade: a word of the second line that would stand under «עוד» is hidden whole by the script (data-ea-hid), so the
	   line ends on a whole word (the round critic on 03-catalogue-390, 04.10: the fade showed «ecutive Communication») */
	#ea-answers .ea-cat__lead[data-ea-clamp]:not([data-ea-open]) [data-ea-hid]{visibility:hidden}
	#ea-answers button.ea-cat__lead-more{display:inline-flex;align-items:center;min-block-size:44px;margin:0;padding:0;border:0;background:none;box-shadow:none;cursor:pointer;
		font:inherit;font-size:var(--eaf-fs-lead,20px);font-weight:700;line-height:1;color:var(--ea-accent-text);text-decoration:underline;text-decoration-color:transparent;text-underline-offset:.2em}
	#ea-answers .ea-cat__lead[data-ea-clamp]:not([data-ea-open]) + button.ea-cat__lead-more{position:absolute;inset-block-end:calc((var(--eaf-fs-lead,20px) * var(--eaf-lh-body,1.8) - 44px) / 2);inset-inline-end:0}
	#ea-answers button.ea-cat__lead-more:hover{text-decoration-color:currentColor}
	#ea-answers button.ea-cat__lead-more:focus-visible{outline:2px solid var(--ea-focus);outline-offset:2px;border-radius:4px}
}
/* «נוספו לאחרונה» of one guide: the guide once, under the heading (the owner's «מספרים כפולים», 04.10) */
#ea-answers .ea-cat__recent > .ea-cat__rq-of{margin:0 0 var(--eaf-s-2xs,10px)}

/* ---- THE QUIET-LUXURY CONTACT BUTTON IS FILLED IN THE INK (3.2, B40: R130 Q4 «Filled in the ink colour with the surface text;
   the square corners stay»): the page's ink and surface; on the dark band, the band's ink (its light text) and the band's
   own colour. Gate a-quiet-button-in-the-brand-colour; tests/qa-quiet-cta-browser.cjs. ---- */
#ea-answers[data-ea-intensity="quiet"] a.ea-cat-cta__btn{color:var(--ea-surface);background:var(--ea-ink);box-shadow:none}
#ea-answers[data-ea-intensity="quiet"] a.ea-cat-cta__btn:hover{color:var(--ea-surface);background:color-mix(in srgb,var(--ea-ink) 84%,var(--ea-surface))}
#ea-answers[data-ea-intensity="quiet"] .ea-cat-cta--band a.ea-cat-cta__btn{color:var(--ea-band);background:var(--ea-on-band)}
#ea-answers[data-ea-intensity="quiet"] .ea-cat-cta--band a.ea-cat-cta__btn:hover{color:var(--ea-band);background:color-mix(in srgb,var(--ea-on-band) 86%,var(--ea-band))}
/* no entry animation on the catalogue either (3.2, PLUGIN-3.2-ANIM-OFF; the independent review of 6559d72, P2-3): the rows
   «הצג עוד» adds appear at once. Gate a-guide-that-fades-in-or-out; tests/qa-no-entry-animation-question-browser.cjs */
#ea-answers .ea-cat__opt[data-ea-new][data-ea-new]{animation:none}

/* =====================================================================================================================
   THE CATALOGUE IN THE DESIGN PASS OF 11.10 (NIGHT-BACKLOG row 196, the owner's pick in his round of 11.10; and row 193's card).
   · THE HEAD: its first line is the name and, at its other end, the search; under it the one counted line («N מדריכים · N שאלות
     · עודכן …», the real counts and the newest date), then the opening sentence (the guides' names and the site's name,
     lib/catalogue-index.php). On a phone the search takes its own line under the name.
   · THE SIDE COLUMN always holds questions (lib/catalogue-index.php: the last 30 days' as before, else the newest, honestly
     headed «שאלות אחרונות») and «כתבו לנו»; a little narrower (W73). Three guides a row from 1200 went back to TWO in 3.3.2
     (the owner's WhatsApp of 12.10 16:21, «להחזיר ל2 בכל שורה»; section «3.3.2» below). src/reading-ui.php;
     tests/qa-design-pass-browser.cjs.
   ===================================================================================================================== */
#ea-answers .ea-cat__head:is(#echoai-scope,.ea-cat__head){display:block}
#ea-answers .ea-cat__bar{display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:var(--eaf-s-sm,16px) var(--eaf-s-xl,36px);margin:0}
#ea-answers .ea-cat__bar > .ea-cat__h1{flex:0 1 auto;min-width:0}
html.ea-js #ea-answers .ea-cat__bar > .ea-cat__tools{flex:0 1 calc(var(--eaf-u,1px) * 440);min-width:min(100%,18rem);margin:0}
#ea-answers .ea-cat__bar .ea-search{flex:1 1 auto;max-width:none}
#ea-answers .ea-cat__head > .ea-cat__count{margin-block-start:var(--eaf-s-2xs,10px)}
@media (max-width:767.98px){
  html.ea-js #ea-answers .ea-cat__bar > .ea-cat__tools{flex:1 1 100%}
}
@media (min-width:1024px){
  #ea-answers .ea-cat__lib{grid-template-columns:minmax(0,1fr) min(calc(var(--eaf-u,1px) * 300),27%)}
}
@media (min-width:1200px){
  #ea-answers .ea-cat__lib{column-gap:var(--eaf-s-xl,36px)}
}

/* =====================================================================================================================
   3.3.2 · THE CATALOGUE AFTER THE OWNER'S WHATSAPP OF 12.10 16:18 AND 16:21 (docs/CATALOGUE.md «3.3.2»)
   · THE OPENING SENTENCE RUNS ITS ROW («אין סיבה שהשורה הזאת לא תפרס על כל השורה שלה, וגם קצת להקטין»): from 768 it has no
     measure (70ch wrapped it at 749px of a 1180 head) and takes the LARGE role, one step under the lead role on the type
     roles (19.87 against 22.08 at 1440). A phone keeps the lead role, its two lines and «עוד» (CATALOGUE-INTRO-CLAMP).
     Gate a-catalogue-sentence-on-a-measure.
   · TWO GUIDES A ROW («להחזיר ל2 בכל שורה»): section 11's two from 768 hold at every width; 3.3.0's three from 1200 are gone.
     Gate a-catalogue-three-guides-to-a-row.
   · THE SIDE COLUMN IS A STICKY PANEL («לא נתחמת ... ולא נגללת ולא מעוצבת ברמה גבוהה»): from 1024 the questions stand in ONE
     panel (the surface, the line, the cards' radius, a soft shadow) with «כתבו לנו» under it; the column is sticky under the
     host's bars (--eac-stick-top, assets/catalogue.js from the same measure the search uses) and never taller than the
     window: the list inside the panel gives way first and scrolls inside, with a soft fade where more waits, only when the
     column would be taller than the window (then the script names it and puts it in the Tab order); a scroll inside never
     moves the page (overscroll contain). With «כתבו לנו» open, the column itself scrolls, so the form is always reachable.
     Below 1024 the panel is no box (the phone's row of cards is unchanged). Gate a-catalogue-side-column-unbounded.
   ===================================================================================================================== */
@media (min-width:768px){
  #ea-answers .ea-cat__head > .ea-cat__lead{max-width:none;font-size:var(--eaf-fs-large,18px)}
}
/* below 1024 the panel and its scroller are no boxes: the sections keep their places in the one column */
#ea-answers .ea-cat__panel,#ea-answers .ea-cat__scroll{display:contents}
#ea-answers .ea-cat__scroll > .ea-cat__recent{order:2}
#ea-answers[data-ea-searching] .ea-cat__panel{display:none}
@media (min-width:1024px){
  #ea-answers .ea-cat__side{position:sticky;top:calc(var(--eac-stick-top,0px) + var(--eaf-s-md,22px));
    max-height:calc(100vh - var(--eac-stick-top,0px) - 2 * var(--eaf-s-md,22px));gap:var(--eaf-s-sm,18px);
    /* room for the panel's shadow inside the column's own scroll box (used only while «כתבו לנו» is open and long) */
    margin:-4px -12px -16px;padding:4px 12px 16px;overflow-y:auto;overscroll-behavior-y:contain;scrollbar-width:thin;scrollbar-color:var(--ea-line) transparent}
  #ea-answers .ea-cat__panel{display:flex;flex-direction:column;flex:0 1 auto;min-height:0;overflow:hidden;
    background:var(--ea-surface);border:1px solid var(--ea-line);border-radius:var(--ea-radius,20px);
    box-shadow:0 1px 2px rgba(var(--ea-shadow-rgb,22,24,29),.05),0 14px 32px -22px rgba(var(--ea-shadow-rgb,22,24,29),.3)}
  /* «כתבו לנו» open: the list stops giving way, and the column scrolls as one (the form is never under the window) */
  #ea-answers .ea-cat__side:has(.ea-ask__f:not([hidden])) > .ea-cat__panel{flex-shrink:0}
  #ea-answers .ea-cat__side > .ea-ask{flex:none}
  #ea-answers .ea-cat__scroll{display:block;flex:0 1 auto;min-height:0;overflow-y:auto;overscroll-behavior-y:contain;
    padding:var(--eaf-s-sm,18px) var(--eaf-s-md,22px) var(--eaf-s-3xs,4px);scrollbar-width:thin;scrollbar-color:var(--ea-line) transparent}
  #ea-answers .ea-cat__scroll:focus-visible{outline:2px solid var(--ea-focus);outline-offset:-4px;border-radius:inherit}
  /* a soft fade only where more of the list waits (the script marks the edges) */
  #ea-answers .ea-cat__scroll[data-ea-up]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px);mask-image:linear-gradient(to bottom,transparent 0,#000 28px)}
  #ea-answers .ea-cat__scroll[data-ea-down]{-webkit-mask-image:linear-gradient(to top,transparent 0,#000 36px);mask-image:linear-gradient(to top,transparent 0,#000 36px)}
  #ea-answers .ea-cat__scroll[data-ea-up][data-ea-down]{-webkit-mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 36px),transparent 100%);
    mask-image:linear-gradient(to bottom,transparent 0,#000 28px,#000 calc(100% - 36px),transparent 100%)}
  #ea-answers .ea-cat__scroll > .ea-cat__recent + .ea-cat__recent{margin-block-start:var(--eaf-s-md,22px);padding-block-start:var(--eaf-s-sm,18px);border-block-start:1px solid var(--ea-line)}
  /* the panel's type and rhythm: the heading in the eyebrow's voice over a hairline, each question its title and, under it,
     its guide in the glance role; hairlines between the rows, none under the last (the panel's edge closes the list) */
  #ea-answers .ea-cat__panel .ea-cat__side-h{margin:0;padding:0 0 var(--eaf-s-xs,12px);border-block-end:1px solid var(--ea-line)}
  #ea-answers .ea-cat__panel .ea-cat__rq-of{margin:var(--eaf-s-2xs,10px) 0 0}
  #ea-answers .ea-cat__panel .ea-cat__rq-i:last-child{border-block-end:0}
  #ea-answers .ea-cat__panel a.ea-cat__rq-a{gap:4px;margin-inline:calc(-1 * var(--eaf-s-2xs,10px));padding:var(--eaf-s-2xs,10px);border-radius:10px;
    transition:background-color .18s var(--ea-ease,ease)}
  #ea-answers .ea-cat__panel a.ea-cat__rq-a:focus-visible{outline-offset:-2px}
  #ea-answers .ea-cat__panel .ea-cat__rq-t{line-height:1.45;font-weight:600;color:var(--ea-ink)}
  #ea-answers .ea-cat__panel .ea-cat__rq-g{line-height:1.4;color:var(--ea-ink-mute)}
  @media (hover:hover){#ea-answers .ea-cat__panel a.ea-cat__rq-a:hover{background:var(--ea-tint-faint)}
    #ea-answers .ea-cat__panel a.ea-cat__rq-a:hover .ea-cat__rq-g{color:var(--ea-ink-mute-on-tint,var(--ea-ink-mute))}}
}
@media (min-width:1024px) and (prefers-reduced-motion:reduce){#ea-answers .ea-cat__panel a.ea-cat__rq-a{transition:none}}
@media (forced-colors:active){#ea-answers .ea-cat__panel{border-color:CanvasText}}

/* ---- 3.3.3 · THE READING LINE ON THE LIBRARY (the owner's 13.10 20:57 and 20:59, «📚 גם בספריית הידע»): our other pages' 2px
   line, brand into spark, on the bottom edge of the host's bars (assets/catalogue.js measures them); on a grid it says how far
   down the page the reader is. It eases between frames; at once under reduced motion; not in print. ---- */
#ea-answers .ea-cprog{position:fixed;z-index:50;inset-block-start:var(--eac-prog-top,0px);inset-inline:0;block-size:2px;pointer-events:none}
#ea-answers .ea-cprog i{position:absolute;inset:0;background:linear-gradient(to left,var(--ea-accent),var(--ea-spark));transform:scaleX(var(--s,0));transform-origin:right center;
	transition:transform .2s cubic-bezier(.22,.61,.36,1)}
#ea-answers[dir="ltr"] .ea-cprog i{background:linear-gradient(to right,var(--ea-accent),var(--ea-spark));transform-origin:left center}
@media (prefers-reduced-motion:reduce){#ea-answers .ea-cprog i{transition:none}}
@media print{#ea-answers .ea-cprog{display:none}}

/* ---- 3.3.3 · THE LIBRARY'S SMALL MOTIONS (NB 311; the motion audit of 13.10, P1): the cards «הצג עוד» reveals fade in one after
   another (catalogue.js data-ea-in, 30ms apart, eight at most, 220ms each), and what a search brings in, the results or the list
   back, fades in over 160ms (data-ea-swap); only on a press or a search, never on the first paint (the 06.10 ruling: nothing of
   the page waits at opacity 0); none under reduced motion. ---- */
@media (prefers-reduced-motion:no-preference){
	#ea-answers .ea-cat__item[data-ea-in]{animation:ea-cat-reveal .22s cubic-bezier(.22,.61,.36,1) both;animation-delay:calc(var(--eac-i,0) * 30ms)}
	#ea-answers[data-ea-swap] :is([data-ea-res],[data-ea-none],.ea-cat__grid,.ea-cat-qx,.ea-cat__panel){animation:ea-cat-reveal .16s cubic-bezier(.22,.61,.36,1) both}
	@keyframes ea-cat-reveal{from{opacity:0}to{opacity:1}}
}
/* a picture fades in once it has arrived, only one that had not arrived when the script ran (catalogue.js data-ea-img) */
#ea-answers img[data-ea-img]{transition:opacity .25s cubic-bezier(.22,.61,.36,1)}
#ea-answers img[data-ea-img="wait"]{opacity:0}
@media print{#ea-answers img[data-ea-img][data-ea-img]{opacity:1}}
@media (prefers-reduced-motion:reduce){#ea-answers img[data-ea-img]{transition:none}#ea-answers img[data-ea-img="wait"]{opacity:1}}