/* ============================================================================
 * AW Design System — shared components
 *
 * Chrome and content surfaces used by every AW site: navbar, dateline, footer,
 * bottom bar, stat circles/rows, admin cards, CMS child cards, tech list and
 * rendered-Markdown block. All values come from aw-tokens.css.
 *
 * Load order in layout.tpl:
 *   w3.css -> aw-rtl.css -> aw-flex.css -> aw-tokens.css
 *          -> aw-components.css -> <site>.css
 *
 * Markup uses the neutral .aw-* prefix. A site overrides a component in its own
 * stylesheet (loaded last) — it does not fork this file and does not re-prefix.
 *
 * Layout is aw-flex.css (aw-row / aw-half / aw-l*-m*-s*). RTL is handled by
 * logical properties here plus aw-rtl.css; there is exactly one [dir="rtl"]
 * rule below, covering a case aw-rtl.css does not.
 *
 * @created 2026-08-13
 * @updated 2026-08-23 - .aw-read — opt-in reading-column cap (about + tech templates)
 * @updated 2026-08-23 - .aw-md-doc restyled from awDocs (awd.c1/view): system font,
 *                      neutral headings, GitHub-ish code/tables
 * ============================================================================ */


* { box-sizing: border-box; }
html, body { height: 100%; }
body {
    margin: 0;
    font-family: var(--aw-font);
    background: var(--aw-bg);
    color: var(--aw-dark);
    line-height: var(--aw-line-height);
    min-height: 100vh;
    display: flex;
    flex-direction: column;
}

/* ─── Navbar ─── */
.aw-navbar {
    background: linear-gradient(135deg, var(--aw-primary-dark) 0%, var(--aw-primary-light) 100%) !important;
    color: var(--aw-text-on-dark) !important;
    min-height: 56px;
    box-shadow: var(--aw-shadow-2);
    position: sticky;
    top: 0;
    z-index: 100;
}
.aw-navbar .w3-bar-item { color: var(--aw-text-on-dark) !important; }
.aw-navbar .w3-button:hover { background: rgba(255,255,255,.12) !important; }
.aw-navbar .aw-active {
    background: rgba(255,255,255,.18) !important;
    box-shadow: inset 0 -3px 0 var(--aw-text-on-dark);
}
/* Dropdown panels (e.g. the user-icon menu) sit on a white card — the navbar's
   white text would be invisible, so force dark text inside dropdown content. */
.aw-navbar .w3-dropdown-content a { color: var(--aw-dark) !important; }
.aw-navbar .w3-dropdown-content a:hover { background: var(--aw-hover-subtle) !important; }
.aw-navbar .w3-dropdown-content .w3-text-grey { color: var(--aw-text-dim) !important; }

/* ─── Navbar layout (logo · identity · menu · end-cap) ─── */
/*
   Flexbox, NOT floats: `dir` on the element then places everything correctly in both
   directions with no left/right rules at all — the logo and identity icon sit at the
   INLINE-START edge (left in LTR, right in RTL) and the end-cap follows the writing
   direction via margin-inline-start:auto.

   These are additive classes. `.aw-navbar` (colour, sticky, height) is untouched, so a
   site that loads aw-components but keeps its own navbar markup is unaffected.
*/
.aw-nav { display: flex; align-items: stretch; gap: 2px; min-height: 50px; }
.aw-nav-logo { display: flex; align-items: center; padding: 2px 8px; flex: 0 0 auto; }
/* 2:1 logo sized off the bar height, so swapping the image never changes the layout. */
.aw-nav-logo img { height: 46px; width: auto; max-width: 180px; object-fit: contain; display: block; }
/* align-items:center, not stretch — w3-bar-item is a block with its own padding, so a
   stretched item sits its text wherever that padding lands and the labels end up a few
   pixels off the identity icon's centre line. Centring every direct child puts menu text,
   the icon chip and the end-cap on one baseline regardless of their differing heights. */
.aw-nav-menu { display: flex; align-items: center; flex-wrap: wrap; min-width: 0; }
.aw-nav-end  { display: flex; align-items: center; margin-inline-start: auto; flex: 0 0 auto; }
.aw-nav-menu > a, .aw-nav-menu > .w3-dropdown-hover > button,
.aw-nav-end  > a { display: flex; align-items: center; gap: 6px; }

/* Identity control — the lock when signed out, the role icon when signed in. */
.aw-nav-id { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.aw-nav-id > a { display: flex; align-items: center; gap: 6px; padding: 4px 10px; text-decoration: none; }
/* The role artwork is dark-on-transparent and the estate's navbars are not one colour
   (aw is a light gradient, the admin shell near-black). Rather than maintain a second,
   white icon set — or drop to FontAwesome and lose the admin/editor/client/male/female
   distinctions the PNGs carry — the icon gets its OWN light chip. One set then reads
   correctly on any bar, which is also how an avatar normally presents. */
.aw-nav-id img {
    height: 32px; width: 32px;
    object-fit: contain;
    border-radius: 50%;
    background: var(--aw-paper);
    border: 1px solid rgba(255,255,255,.55);
    padding: 3px;
}
.aw-nav-id-name { font-size: .88em; opacity: .92; }
/* Hover/focus panel. Anchored to the identity control and aligned to the INLINE-start
   edge so it opens inward from whichever side the control sits on. */
.aw-nav-id-menu {
    display: none;
    position: absolute;
    top: 100%;
    inset-inline-start: 0;
    min-width: 210px;
    background: var(--aw-card-bg);
    color: var(--aw-text);
    border-radius: 0 0 var(--aw-radius-sm) var(--aw-radius-sm);
    box-shadow: var(--aw-shadow-3);
    z-index: 120;
    padding: 6px 0;
    text-align: start;
}
.aw-nav-id:hover .aw-nav-id-menu,
.aw-nav-id:focus-within .aw-nav-id-menu { display: block; }
.aw-nav-id-head { padding: 8px 14px; border-bottom: 1px solid var(--aw-border); }
.aw-nav-id-head b { display: block; color: var(--aw-primary-dark); }
.aw-nav-id-head span { font-size: .8em; color: var(--aw-text-muted); }
.aw-nav-id-menu a {
    display: flex; align-items: center; gap: 8px;
    padding: 7px 14px; font-size: .88em;
    color: var(--aw-text) !important; text-decoration: none;
}
.aw-nav-id-menu a:hover { background: var(--aw-hover-subtle); }
.aw-nav-id-menu a i { width: 16px; text-align: center; color: var(--aw-text-inactive); }

/* ─── Thin date / language line (logged-in) ─── */
.aw-dateline {
    background: var(--aw-dark-deep); color: var(--aw-text-on-dark-3);
    font-size: .8em; line-height: 1.9; padding: 2px 14px;
    display: flex; justify-content: space-between; align-items: center;
}
.aw-dateline a { color: var(--aw-text-on-dark-3); text-decoration: none; }
.aw-dateline a:hover { text-decoration: underline; }

/* The three dateline slots. The bar is display:flex + space-between, so the
   Gregorian date sits at the leading edge, the language switch centres and the
   Hebrew date takes the trailing edge — each span carries its own dir. */
.aw-dateline-eng,
.aw-dateline-heb { white-space: nowrap; opacity: .92; }
.aw-dateline-lang { display: inline-flex; align-items: center; gap: 4px; }
.aw-dateline-lang a { display: inline-flex; align-items: center; gap: 4px; }
.aw-dateline-lang img { vertical-align: middle; }

/* ─── Section-landing child cards ───
   Markup already carries w3-card w3-white w3-round-large w3-hover-shadow, so
   background, radius and shadow are W3's job — setting them here would fight it.
   This rule owns layout, typography and the lift on hover only. */
.aw-children { display: flex; flex-wrap: wrap; gap: 14px; margin: 18px 0; }
.aw-child {
    display: block;
    flex: 1 1 220px;
    max-width: 320px;
    min-width: 0;
    padding: 14px;
    text-decoration: none;
    color: inherit;
    transition: transform .12s ease;
}
.aw-child:hover { transform: translateY(-2px); }
.aw-child h3 { margin: 6px 0 4px; color: var(--aw-primary-dark); font-size: 1.05em; }
.aw-child p  { margin: 0; }
.aw-child-img { width: 100%; border-radius: 8px; margin-bottom: 6px; display: block; }

/* ─── Main / Layout ─── */
.aw-main {
    flex: 1;
    padding: 14px var(--aw-main-pad-x) 80px;
}
.aw-rcol-wrap { padding: 6px; }
.aw-page-body { padding: 6px 10px; }

/* Pin page-body content to the RCOL edge — logical, so it follows dir. */
.aw-rcol-aligned {
    max-width: 1000px;
    margin-inline-start: 0;
    margin-inline-end: auto;
}

/* ─── Stats (RCOL list) ─── */
.aw-stat-list { display: flex; flex-direction: column; gap: 6px; }
.aw-stat-row {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 6px 8px;
    background: var(--aw-bg-subtle);
    border-radius: var(--aw-radius-sm);
    border-inline-start: 3px solid var(--aw-primary-dark);
}
.aw-stat-ico {
    width: 28px; height: 28px;
    border-radius: 50%;
    color: var(--aw-text-on-dark);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: .85em;
}
.aw-stat-lbl { flex: 1; font-size: .95em; }
.aw-stat-num { font-weight: bold; color: var(--aw-dark); font-family: var(--aw-font-mono); }

/* ─── Stats (home circles) ─── */
.aw-stat-circles {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: center;
}
.aw-stat-circ {
    width: 90px; height: 90px;
    border-radius: 50%;
    color: var(--aw-text-on-dark);
    display: inline-flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    font-size: .8em;
    line-height: 1.2;
    box-shadow: 0 2px 6px rgba(0,0,0,.18);
}
.aw-stat-circ b { font-size: 1.5em; margin: 2px 0; }
.aw-stat-circ span { font-size: .85em; opacity: .92; }

/* ─── Footer (reserves space for the fixed bottom utility bar) ─── */
.aw-footer {
    background: var(--aw-footer-bg);
    color: var(--aw-text-on-dark-2);
    margin-top: auto;
    padding-bottom: 48px;   /* must stay >= .aw-bottom-bar height */
}
.aw-footer-link { color: var(--aw-link-on-dark); text-decoration: none; }
.aw-footer-link:hover { text-decoration: underline; }

/* ─── Bottom utility bar ─── */
.aw-bottom-bar {
    position: fixed;
    bottom: 0; left: 0; right: 0;
    background: rgba(44,62,80,.92);
    padding: 6px 12px;
    display: flex;
    justify-content: center;   /* center the home / up / down buttons */
    gap: 8px;
    align-items: center;
    z-index: 50;
    height: 40px;
    box-sizing: border-box;
}
.aw-bb-btn {
    color: var(--aw-text-on-dark);
    text-decoration: none;
    padding: 4px 10px;
    border-radius: 4px;
    background: rgba(255,255,255,.08);
    font-size: 1.1em;
}
.aw-bb-btn:hover { background: rgba(255,255,255,.18); }

/* ─── Tables ─── */
.w3-responsive { overflow-x: auto; }

/* ─── Admin section cards (dashboard grid) ─── */
.aw-admin-card {
    display: block;
    padding: 14px;
    margin: 6px;
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    text-decoration: none;
    color: var(--aw-dark);
    border-inline-start: 4px solid var(--c, var(--aw-primary-dark));
    box-shadow: var(--aw-shadow-1);
    transition: transform .12s ease, box-shadow .12s ease;
    position: relative;
    min-height: 64px;
}
.aw-admin-card:hover {
    transform: translateY(-2px);
    box-shadow: var(--aw-shadow-3);
    color: var(--c, var(--aw-primary-dark));
}
.aw-admin-card i { color: var(--c, var(--aw-primary-dark)); margin-inline-end: 6px; }
.aw-admin-card-cnt {
    position: absolute;
    top: 10px;
    inset-inline-end: 12px;
    font-family: var(--aw-font-mono);
    font-weight: bold;
    font-size: 1.1em;
    color: var(--c, var(--aw-primary-dark));
}

/* ─── JSON-meta rendering (output of decorateMeta) ─── */
.aw-mval-row { line-height: 1.5; padding: 1px 0; }
.aw-mval-k {
    color: var(--aw-text-dim);
    font-weight: 600;
    margin-inline-end: 4px;
}
.aw-mval-row a { color: var(--aw-primary-dark); text-decoration: none; }
.aw-mval-row a:hover { text-decoration: underline; }

/* ─── Tech docs ─── */
.aw-tech-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 10px 12px;
    border-bottom: 1px solid var(--aw-border);
    text-decoration: none;
    color: var(--aw-dark);
}
.aw-tech-item:last-child { border-bottom: 0; }
.aw-tech-item:hover { background: var(--aw-bg-subtle); }
.aw-tech-title { flex: 1; font-weight: 600; }
.aw-tech-meta { color: var(--aw-text-inactive); font-size: .85em; font-family: var(--aw-font-mono); }

/* ─── .aw-md-doc — rendered Markdown ─────────────────────────────────────────
   Ported from awDocs (awd.c1/view, .awd-md-content) on 2026-08-23. awd renders
   the same material — English technical Markdown — and had already converged on
   GitHub's presentation, which is what a reader of this content expects.

   THE DOC BLOCK OPTS OUT OF THE SITE'S TYPOGRAPHY, deliberately and only here:
   --aw-font-doc instead of Heebo, inherited body colour instead of teal
   headings. Everything around it — navbar, footer, page titles, the CMS pages —
   is untouched and still Heebo. The reasoning is that a documentation surface is
   a reading surface, not a branded one; the brand is the chrome around it.

   Used by _skel, a1, aw and aw1 via pg/tech_view.tpl. */
.aw-md-doc {
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    padding: 22px 26px;
    box-shadow: 0 1px 4px rgba(0,0,0,.06);
    line-height: 1.65;
    font-size: 1em;
    font-family: var(--aw-font-doc);
    color: var(--aw-text-light);
}
/* !important is required, not preference: aw-rtl.css sets
   `h1..h6 { font-family: heeboBlack !important }` globally for Hebrew chrome.
   Specificity alone cannot beat it, so the override matches its weight and wins
   on specificity (0,1,1 vs 0,0,1). Scoped to .aw-md-doc — headings everywhere
   else keep heeboBlack. */
.aw-md-doc h1, .aw-md-doc h2, .aw-md-doc h3,
.aw-md-doc h4, .aw-md-doc h5, .aw-md-doc h6 {
    font-family: var(--aw-font-doc) !important;
    color: inherit;
    scroll-margin-top: 110px;   /* clears the sticky navbar on #anchor jumps */
}
.aw-md-doc h1 {
    border-bottom: 2px solid var(--aw-prose-rule);
    padding-bottom: 10px; margin-top: 0;
}
.aw-md-doc h2 {
    border-bottom: 1px solid var(--aw-prose-rule);
    padding-bottom: 8px; margin-top: 28px;
}
.aw-md-doc h3 { margin-top: 24px; }
.aw-md-doc pre {
    background: var(--aw-prose-pre-bg); padding: 16px; border-radius: 6px;
    border: 1px solid var(--aw-prose-pre-border);
    overflow-x: auto;
    direction: ltr; text-align: left;   /* code must never mirror in RTL pages */
}
.aw-md-doc code {
    background: var(--aw-prose-code-bg); padding: 2px 6px; border-radius: 3px;
    font-size: .9em; font-family: var(--aw-font-code);
}
.aw-md-doc pre code { background: transparent; padding: 0; font-size: .85em; }
.aw-md-doc table { border-collapse: collapse; width: 100%; margin: 16px 0; }
.aw-md-doc th, .aw-md-doc td {
    border: 1px solid var(--aw-prose-table-border); padding: 10px 12px;
    text-align: start;
}
.aw-md-doc th { background: var(--aw-prose-th-bg); font-weight: 600; }
.aw-md-doc tr:nth-child(even) { background: var(--aw-prose-zebra); }
.aw-md-doc blockquote {
    border-inline-start: 4px solid var(--aw-prose-table-border);
    margin: 16px 0; padding-inline-start: 16px;
    background: var(--aw-prose-quote-bg); color: var(--aw-prose-quote-fg);
}
.aw-md-doc a { color: var(--aw-link); }
.aw-md-doc img { max-width: 100%; border-radius: 4px; }
.aw-md-doc li input[type="checkbox"] { margin-inline-end: 6px; }

/* ════════════════════════════════════════════════════════════════
   CMS PAGE
   The shape rendered by uiW3/pg/page.tpl:
     article.aw-page
       nav.aw-breadcrumb  ( a › a › span.aw-bc-cur )
       h1.aw-page-title
       p.aw-page-brief
       div.aw-row
         aside.aw-lcol      (aw-l3, optional)   — markup order; the VISUAL order is
         div.aw-body        (aw-l6 / aw-l9 / aw-l12)   [rcol, body, lcol], set by
         aside.aw-rcol      (aw-l3, optional)   `order` below. See the note there.
   ════════════════════════════════════════════════════════════════ */

.aw-page { max-width: 1200px; }

/* ─── .aw-read — opt-in reading column ───────────────────────────────────────
   WIDTH IS THE PAGE TEMPLATE'S DECISION, not a CMS column. There is no
   aw_site / aw_secs / aw_pages field for content width and there should not be:
   the same section can want a wide browsing grid on one screen and a narrow
   prose column on the next. A page template that wants a readable measure adds
   .aw-read to its outermost element; one that says nothing gets the full width
   of .aw-main, which is the default.

   Used by pg/about.tpl and pg/tech_*.tpl. Before this existed each of them
   carried its own `w3-content` + inline `max-width:900px` — the same magic
   number in three files, which is how /tech ended up full-bleed while /about
   was centred. `margin-inline` is logical, so it mirrors with dir. */
.aw-read { max-width: var(--aw-read-w); margin-inline: auto; }

/* ─── which physical side each column lands on ───────────────────────────────
   The Rcol is on the RIGHT in Hebrew and on the LEFT in English.

   That is not a contradiction, it is what "mirrors" means. These layouts are
   authored Hebrew-first, so `rcol` names the side the column occupies in the
   site's native language; flip the page to English and the whole thing mirrors,
   taking the rcol with it. Reading `rcol` as a fixed physical edge gives the
   opposite result in one of the two languages, every time.

   Flow order is therefore [rcol, body, lcol] — the rcol at the START of the
   reading direction, where `dir` puts it on the right in RTL and on the left in
   LTR with no per-language rule at all.

   IT IS DONE WITH `order`, NOT IN THE MARKUP, and only above the column
   breakpoint. Below 993px the columns stack, and there the SOURCE order is what
   a reader gets: body first, so a phone shows results immediately instead of a
   full screen of filter rail before the first row. Reordering the markup would
   have bought the desktop side at the mobile side's expense. */
@media (min-width: 993px) {
    .aw-row > .aw-col-rcol { order: -1; }
    .aw-row > .aw-col-lcol { order:  1; }
}

/* ─── .aw-page-flush — RCOL against the window edge ──────────────────────────
   The default .aw-page keeps the 1200px cap and .aw-main's viewport rim, which is right
   for a reading page: prose that runs to the glass is hard to read. A BROWSING surface is
   the opposite case — the rcol is a filter rail, and a rail floating 12px from the edge
   with the body floating after it wastes the one part of the screen the eye starts from.

   Opt in on the article: <article class="aw-page aw-page-flush">.

   The rim is cancelled with a negative inline margin rather than by zeroing .aw-main's
   padding, so the footer, dateline and every page that did NOT opt in keep their rim.
   `margin-inline` is logical, so this mirrors with `dir` exactly as the column order does
   — no separate RTL rule, and the rcol lands against whichever edge starts the reading
   direction. Above the column breakpoint only: below it the columns stack and a full-bleed
   body would put the text against the glass, which is the thing worth avoiding. */
@media (min-width: 993px) {
    .aw-page-flush {
        max-width: none;
        margin-inline: calc(-1 * var(--aw-main-pad-x));
    }
    /* The body sits directly against the rail — the gap belongs on the outside of the
       pair, not between them. */
    .aw-page-flush > .aw-row { gap: 0; }
    .aw-page-flush > .aw-row > .aw-body { padding-inline-start: 14px; }
}

/* Breadcrumb — the separator "›" is literal text in the template, so this
   styles the links either side of it rather than generating it. */
.aw-breadcrumb { margin: 0 0 10px; line-height: 1.9; }
.aw-breadcrumb a { color: var(--aw-primary-dark); text-decoration: none; }
.aw-breadcrumb a:hover { text-decoration: underline; }
.aw-bc-cur { color: var(--aw-text-muted); font-weight: 600; }

/* Title picks up the same 2px rule as .aw-md-doc h1 so a CMS page and a
   rendered Markdown doc read as the same surface. Face comes from aw-rtl.css,
   which sets h1–h6 to heeboBlack. */
.aw-page-title {
    margin: 0 0 8px;
    font-size: 1.7em;
    line-height: 1.25;
    color: var(--aw-dark);
    border-bottom: 2px solid var(--aw-prose-rule);
    padding-bottom: .25em;
}

/* Lede. Colour is left to w3-text-grey in the markup — W3.CSS sets it with
   !important, so declaring a colour here would simply lose. Measure is capped
   so the summary stays readable on wide screens. */
.aw-page-brief {
    margin: 0 0 16px;
    font-size: 1.05em;
    line-height: 1.6;
    max-width: 70ch;
}

/* min-width:0 is load-bearing, not cosmetic: flex items default to
   min-width:auto, so a wide table or long unbroken string inside the body
   would push the column past its track and break the row. */
.aw-body { min-width: 0; }

.aw-lcol,
.aw-rcol {
    min-width: 0;
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    padding: 12px 14px;
    box-shadow: var(--aw-shadow-1);
}
.aw-lcol > :first-child,
.aw-rcol > :first-child { margin-top: 0; }
.aw-lcol > :last-child,
.aw-rcol > :last-child { margin-bottom: 0; }

/* ─── Site / link directory (.aw-slist) ───
   A titled card holding rows of "favicon + name + one-line description + pills".
   Used for any list of external destinations: the aw estate directory
   ({CM:sites-list:…}), an SSO site index, a link collection. The row is a DIV,
   not an <a> — the pills are links of their own and cannot nest inside one. */
.aw-slist {
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    box-shadow: var(--aw-shadow-1);
    padding: 12px 14px 14px;
    height: 100%;
}
.aw-slist-h {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0 0 10px;
    padding: 7px 10px;
    background: var(--aw-primary-dark);
    color: var(--aw-text-on-dark);
    border-radius: var(--aw-radius-sm);
    font-size: .95em;
    font-weight: 700;
}
.aw-slist-h > span:first-of-type { flex: 1; }
.aw-slist-h:focus-visible { outline: 2px solid var(--aw-accent); outline-offset: 2px; }
/* Collapse affordance: hidden until the narrow breakpoint, where the header
   becomes the accordion control (aw-ui.js delegates the click). */
.aw-slist-tog { display: none; transition: transform .15s; }
.aw-slist-n {
    padding: 0 8px;
    background: rgba(255, 255, 255, .22);
    border-radius: 10px;
    font-size: .85em;
}
/* Domains vs sites read as two different things — tint their headers apart. */
.aw-slist-domains .aw-slist-h { background: var(--aw-dark); }

.aw-slink {
    display: flex;
    align-items: center;
    gap: 9px;
    padding: 7px 9px;
    margin-bottom: 7px;
    background: var(--aw-bg-subtle);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    transition: border-color .12s, box-shadow .12s, transform .12s;
}
.aw-slink:hover {
    transform: translateY(-1px);
    border-color: var(--aw-primary);
    box-shadow: var(--aw-shadow-1);
}
/* Anything not yet deployed is visibly provisional — it only ever renders locally. */
.aw-slink:not(.aw-slink-live) { border-style: dashed; }

/* Favicon well: the FA glyph is the floor, the <img> covers it when it loads.
   A broken icon removes the <img> (onerror) and the glyph shows through. */
.aw-slink-icow {
    position: relative;
    flex: 0 0 auto;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    background: var(--aw-card-bg);
    border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm);
    color: var(--aw-text-inactive);
}
/* Transparent until it actually loads, so a pending or broken icon never paints a
   blank card-coloured square over the glyph behind it. The opaque background is
   added WITH the .aw-ico-on class (set by onload), where it is wanted: to mask the
   glyph once a real icon is covering it. */
.aw-slink-ico {
    position: absolute;
    inset: 3px;
    width: calc(100% - 6px);
    height: calc(100% - 6px);
    object-fit: contain;
    opacity: 0;
    transition: opacity .15s;
}
.aw-slink-ico.aw-ico-on { opacity: 1; background: var(--aw-card-bg); }
.aw-slink-body { flex: 1; min-width: 0; }
.aw-slink-title {
    display: block;
    color: var(--aw-primary-dark);
    font-weight: 700;
    font-size: .93em;
    line-height: 1.25;
    text-decoration: none;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aw-slink-title:hover { text-decoration: underline; }
.aw-slink-desc {
    margin-top: 1px;
    color: var(--aw-text-muted);
    font-size: .78em;
    line-height: 1.3;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.aw-slink-btns { flex: 0 0 auto; display: flex; gap: 4px; align-items: center; }
.aw-slink-empty { padding: 10px; color: var(--aw-text-muted); font-size: .9em; }

.aw-pill {
    padding: 2px 9px;
    border-radius: 10px;
    font-size: .68em;
    font-weight: 700;
    letter-spacing: .03em;
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
}
.aw-pill-local { background: var(--aw-primary-dark); color: var(--aw-text-on-dark); }
.aw-pill-prod  { background: var(--aw-info);         color: var(--aw-text-on-dark); }
.aw-pill-sts   { background: var(--aw-border);       color: var(--aw-text-muted); }
.aw-pill-local:hover, .aw-pill-prod:hover { filter: brightness(1.12); }

/* ─── Full-bleed landing (.aw-home-wide) ───
   Edge-to-edge: no w3-content max-width. .aw-main already supplies the viewport
   rim padding, so only the vertical rhythm is set here.

   Three regions on a wide screen: hero | list | list. The hero is FIRST in the
   DOM and the container carries dir, so flex puts it on the inline-start edge —
   right in RTL, left in LTR — with no direction-specific CSS at all. */
.aw-home-wide { padding: 0 0 10px; }

.aw-home-grid {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
}
/* The two lists share the remaining two thirds and sit side by side. They are a
   flex row of their own rather than aw-flex columns, so the split stays a split
   whatever the hero is doing. */
.aw-home-lists {
    flex: 1 1 480px;
    display: flex;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 14px;
    min-width: 0;
}
.aw-home-lists > * { flex: 1 1 240px; min-width: 0; }

.aw-hero {
    flex: 1 1 300px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 8px;
    padding: 18px 16px 20px;
    text-align: center;
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    box-shadow: var(--aw-shadow-1);
}
.aw-hero-logo { max-width: 100%; max-height: 190px; object-fit: contain; }
.aw-hero h2 { margin: 4px 0 0; color: var(--aw-primary-dark); font-size: 1.35em; }
.aw-hero p  { margin: 0; color: var(--aw-text-muted); font-size: .92em; }
.aw-hero-btns { display: flex; flex-wrap: wrap; justify-content: center; gap: 6px; margin-top: 4px; }

/* Operator counts on the landing hero — the numbers the side panel carries on interior
   pages, kept visible on a home page that deliberately has no side panel. */
.aw-hero-stats {
    display: flex;
    flex-wrap: wrap;
    justify-content: center;
    gap: 6px 14px;
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px solid var(--aw-border);
    width: 100%;
    color: var(--aw-text-muted);
    font-size: .82em;
}
.aw-hero-stats b { color: var(--aw-dark); font-family: var(--aw-font-mono); font-size: 1.15em; }
.aw-btn-dark { background: var(--aw-dark) !important; color: var(--aw-text-on-dark) !important; }

/* Development-only affordance (rendered under @LocalRun). Deliberately quiet — it is
   a tool, not part of the site's voice — and dashed so it never reads as a real CTA. */
.aw-dev-link {
    margin-top: 10px;
    padding: 3px 10px;
    border: 1px dashed var(--aw-border-mid);
    border-radius: 10px;
    color: var(--aw-text-dim);
    font-size: .8em;
    text-decoration: none;
}
.aw-dev-link:hover { color: var(--aw-primary-dark); border-color: var(--aw-primary); }

@media (min-width: 993px) {
    /* At desktop width the hero holds a full third and stops growing, so the two
       lists get a predictable half each of what is left. */
    .aw-hero { flex: 0 0 33.333%; max-width: 33.333%; }
}
@media (max-width: 992px) {
    /* Narrower than desktop the hero becomes a full-width banner rather than
       competing with the lists for a row that cannot hold three columns. The two
       lists still share the row below it until they run out of space. */
    .aw-hero { flex: 1 1 100%; max-width: 100%; }
}

/* Below this width a directory list is an accordion. The breakpoint is repeated
   in _sUI/aw/js/aw-ui.js (NARROW) — change both together, or the header will
   toggle a class that no longer hides anything. */
@media (max-width: 992px) {
    .aw-slist-h { cursor: pointer; user-select: none; }
    .aw-slist-tog { display: inline-block; }
    .aw-slist-closed .aw-slist-h { margin-bottom: 0; }
    .aw-slist-closed .aw-slist-tog { transform: rotate(180deg); }
    .aw-slist-closed .aw-slink,
    .aw-slist-closed .aw-slink-empty { display: none; }
    /* A collapsed card is just its header — drop the padding that framed the rows. */
    .aw-slist-closed { padding-bottom: 12px; }
}

/* ─── Stat tiles (dashboard) ─── */
/* Adapted from the W3.CSS "analytics" template: a row of big coloured tiles, each an
   icon + a number + a label. Distinct from .aw-stat-circles (compact, for a side panel)
   and .aw-stat-row (a list); this is the full-width headline row at the top of a page.
   Colour is applied by adding a palette class — .aw-tile-crimson etc. — never inline. */
.aw-tiles { display: flex; flex-wrap: wrap; gap: 12px; margin: 12px 0; }
.aw-tile {
    flex: 1 1 180px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: 14px;
    padding: 16px 18px;
    border-radius: var(--aw-radius-card);
    box-shadow: var(--aw-shadow-1);
    background: var(--aw-asphalt);
    color: var(--aw-text-on-dark);
    text-decoration: none;
}
a.aw-tile:hover { box-shadow: var(--aw-shadow-2); transform: translateY(-1px); }
.aw-tile i { font-size: 2em; opacity: .9; flex: 0 0 auto; }
.aw-tile-body { min-width: 0; flex: 1; }
.aw-tile-num { display: block; font-size: 1.9em; font-weight: 700; line-height: 1.1; font-family: var(--aw-font-mono); }
.aw-tile-lbl { display: block; font-size: .9em; opacity: .92; }
.aw-tile-crimson { background: var(--aw-crimson); }
.aw-tile-cobalt  { background: var(--aw-cobalt); }
.aw-tile-emerald { background: var(--aw-emerald); }
.aw-tile-olive   { background: var(--aw-olive); }
.aw-tile-taupe   { background: var(--aw-taupe); }
.aw-tile-sienna  { background: var(--aw-sienna); }
.aw-tile-amber   { background: var(--aw-amber); color: var(--aw-text); }
.aw-tile-paper   { background: var(--aw-paper); color: var(--aw-text); box-shadow: var(--aw-shadow-1); }

/* ─── Activity feed ─── */
/* Icon + text + right-aligned age. From the analytics template's "Feeds" panel; the
   natural shape for link-health results, recent CMS edits, or an import log. The time
   uses margin-inline-start:auto so it sits at the far edge in both directions. */
.aw-feed { display: flex; flex-direction: column; }
.aw-feed-row {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 9px 4px;
    border-bottom: 1px solid var(--aw-border);
    color: inherit;
    text-decoration: none;
}
.aw-feed-row:last-child { border-bottom: 0; }
a.aw-feed-row:hover { background: var(--aw-bg-subtle); }
.aw-feed-ico { flex: 0 0 auto; width: 22px; text-align: center; color: var(--aw-text-inactive); }
.aw-feed-txt { flex: 1; min-width: 0; }
.aw-feed-age { margin-inline-start: auto; color: var(--aw-text-dim); font-size: .82em; font-style: italic; white-space: nowrap; }

/* ─── Meter (labelled progress bar) ─── */
/* The analytics template's percentage bars. The label sits INSIDE the fill, which only
   reads when the fill is wide enough — under ~12% it flips outside via .aw-meter-out. */
.aw-meter { background: var(--aw-border-mid); border-radius: var(--aw-radius-sm); overflow: hidden; height: 26px; }
.aw-meter-fill {
    height: 100%;
    display: flex;
    align-items: center;
    padding: 0 10px;
    background: var(--aw-emerald);
    color: var(--aw-text-on-dark);
    font-size: .85em;
    font-weight: 600;
    white-space: nowrap;
    transition: width .3s;
}
.aw-meter-out .aw-meter-fill { padding: 0; }
.aw-meter-out { position: relative; }
.aw-meter-out > span { position: absolute; inset-inline-start: 8px; top: 0; line-height: 26px; font-size: .85em; color: var(--aw-text); }
.aw-meter-amber .aw-meter-fill  { background: var(--aw-amber); color: var(--aw-text); }
.aw-meter-crimson .aw-meter-fill{ background: var(--aw-crimson); }
.aw-meter-cobalt .aw-meter-fill { background: var(--aw-cobalt); }

/* ─── Feature quad ─── */
/* From the "startup" template: a row of icon + title + blurb columns. For the public
   about/docs landing pages. Wraps to 2-up then 1-up on its own — no grid classes needed. */
.aw-features { display: flex; flex-wrap: wrap; gap: 18px; margin: 18px 0; text-align: center; }
.aw-feature { flex: 1 1 200px; min-width: 0; padding: 8px; }
.aw-feature > i { font-size: 3em; color: var(--aw-primary-dark); margin-bottom: 10px; display: block; }
.aw-feature h4 { margin: 0 0 6px; color: var(--aw-dark); }
.aw-feature p  { margin: 0; color: var(--aw-text-muted); font-size: .92em; line-height: 1.6; }

/* ─── Post card ─── */
/* From the "social" template's feed item: avatar + author + age, body, then actions.
   The blog and any future comment thread want exactly this shape. */
.aw-post {
    background: var(--aw-card-bg);
    border-radius: var(--aw-radius-card);
    box-shadow: var(--aw-shadow-1);
    padding: 14px 16px;
    margin-bottom: 14px;
}
.aw-post-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.aw-post-avatar { width: 40px; height: 40px; border-radius: 50%; object-fit: cover; flex: 0 0 auto; }
.aw-post-who { font-weight: 700; color: var(--aw-primary-dark); }
.aw-post-age { margin-inline-start: auto; color: var(--aw-text-dim); font-size: .82em; }
.aw-post-body { line-height: 1.7; }
.aw-post-actions { display: flex; gap: 8px; margin-top: 12px; }

/* ─── Tag set ─── */
/* `w3-tag` and `w3-badge` come from W3.CSS; this only gives a run of them sane spacing
   and keeps them from colliding when they wrap. Do not restyle the w3 classes here. */
.aw-tagset { display: flex; flex-wrap: wrap; gap: 5px; align-items: center; }
.aw-tagset .w3-tag, .aw-tagset .w3-badge { font-size: .78em; }

/* ─── RTL tweaks ───
   .w3-bar-item float is already handled by aw-rtl.css — do not repeat it. */
body[dir="rtl"] .w3-bar .w3-left { float: left; }
/* W3.CSS positions a badge with margin-left, which lands on the wrong side in RTL. */
[dir="rtl"] .w3-badge.w3-right { margin-left: 0; margin-right: 8px; }

/* ─── Mobile ─── */
@media (max-width: 600px) {
    .aw-stat-circ { width: 70px; height: 70px; font-size: .7em; }
    .aw-stat-circ b { font-size: 1.2em; }
    .aw-page-title { font-size: 1.4em; }
    .aw-child { flex: 1 1 100%; max-width: 100%; }
    /* Side columns are just content blocks once stacked — drop the card frame
       so they do not read as a second layer of boxes on a narrow screen. */
    .aw-lcol, .aw-rcol { box-shadow: none; padding: 0; background: none; }

    /* Phone: shrink the banner so the lists are reachable without a long scroll. */
    .aw-hero { padding: 12px; }
    .aw-hero-logo { max-height: 100px; }
    .aw-hero h2 { font-size: 1.15em; }
    .aw-home-wide { padding: 0 0 8px; }
    .aw-home-grid, .aw-home-lists { gap: 10px; }
}

/* ── .aw-dragover ────────────────────────────────────────────────────────────
   Drop-target feedback for upload widgets wired with aw-paste-image.js. That
   script toggles this class on the element passed as `dropzone`, and does not
   ship any styling of its own — the look belongs here with the rest of the
   component set. Outline rather than border so the box does not shift. */
.aw-dragover {
    outline: 2px dashed var(--aw-primary);
    outline-offset: -4px;
    background: var(--aw-bg-subtle);
}

/* ── .aw-p-* — person background by gender and life state ────────────────────
   Applied to a person chip / tag / card. Pair with the passed-away mark:

       ℗   U+2117 — in AW it means PASSED AWAY.

   It replaced ✝ (2026-08-20). The dagger/cross is a Christian marker and
   nearly everyone in these corpora is Jewish, so it read wrong on every
   family tree we ship. ℗ was chosen as a neutral, non-religious glyph — it
   carries no Jewish meaning either, which is the point: it marks a life that
   ended without asserting a faith. Do not "fix" it back to ✝ or †.

   Caveat worth knowing: outside AW, ℗ is the phonogram (sound-recording
   copyright) symbol. In music-facing surfaces — uw3's M-family corpora — put
   it only next to a PERSON name, never next to a recording or a release, or
   the two readings collide.

   ℗ is the UNKNOWN-RELIGION answer, not a preference. Where the record names
   a faith, that faith's glyph may take its place after the name, on ENGLISH
   surfaces only — ✡ U+2721, ✝ U+271D, ☪ U+262A. Hebrew keeps ז"ל; both at
   once marks the person dead twice. Separately, ✡ immediately BEFORE a
   Hebrew-calendar death date (✡ כ״ג בכסלו תשפ״ה) is a calendar qualifier,
   not a name mark, and holds in either language. Never infer a religion from
   a name or a corpus. Full rule: awLib/Identity/Identity.guide.md §1a.

   The dead variants are a LIGHTER tint of the same gender colour, not grey.
   Greying a deceased person discards the gender indicator, which the eye
   reads before it reads the name. Only U (gender unknown) fades to grey,
   because there is no gender to preserve. */
.aw-p-m      { background-color: var(--aw-person-m-bg)      !important; color: #000 !important; }
.aw-p-f      { background-color: var(--aw-person-f-bg)      !important; color: #000 !important; }
.aw-p-u      { background-color: var(--aw-person-u-bg)      !important; color: #000 !important; }
.aw-p-m-dead { background-color: var(--aw-person-m-dead-bg) !important; color: #000 !important; }
.aw-p-f-dead { background-color: var(--aw-person-f-dead-bg) !important; color: #000 !important; }
.aw-p-u-dead { background-color: var(--aw-person-u-dead-bg) !important; color: #000 !important; }

/* The mark itself — muted so it annotates the name rather than competing
   with it, and never picked up by a text selection copy as a letter. */
.aw-deadmark { color: var(--aw-text-dim); font-weight: normal; }

/* ═══════════════════════════════════════════════════════════════════════════
   PEOPLE SECTION — the {CM:p1-browse} list and the {CM:p1-filters} rail.
   Templates: awLib/tpl/cm/p1-browse.tpl + p1-filters.tpl
   Behaviour: _sUI/vueLib/uwid/ent/p1/people-section.js

   Shared, not site CSS, because the section is a shared macro: any UWID site
   that authors the two macros gets the same screen without shipping a rule.

   DIRECTION IS NOT HARD-CODED. Every rule below uses logical properties
   (inline-start/end, text-align:start) rather than left/right, because the
   same list renders RTL on the Hebrew page and LTR on the English one, and
   the name that leads swaps with it. A float:right here would look correct
   in Hebrew and mirror wrongly in English.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── count bar ────────────────────────────────────────────────────────── */
/* Now the FIRST thing in the body, the search box having moved to the rail — so it carries
   the top rule that used to be the search box's bottom edge. */
.aw-p1-bar     { display: flex; justify-content: space-between; align-items: center;
                 gap: 8px; font-size: .85rem; color: var(--aw-text-muted);
                 padding: 0 4px 6px; border-bottom: 1px solid var(--aw-border);
                 margin-bottom: 2px; }
.aw-p1-range   { color: var(--aw-text-dim); }
.aw-p1-clear   { cursor: pointer; color: var(--aw-primary-dark); white-space: nowrap; }
.aw-p1-clear:hover { text-decoration: underline; }
.aw-p1-err     { margin: 6px 0 !important; }

/* ── the lines ────────────────────────────────────────────────────────── */
.aw-p1-lines   { list-style: none; margin: 0; padding: 0; }

/* Three columns, not a flex row: the year column has to line up down the whole
   list, and with flex it tracks the longest name on each line instead. auto in
   the middle keeps it as narrow as the widest span and no narrower. */
.aw-p1-line    { display: grid; grid-template-columns: 22px minmax(0,1fr) auto minmax(0,1fr);
                 align-items: baseline; gap: 10px;
                 padding: 5px 10px; border-bottom: 1px solid var(--aw-border);
                 cursor: pointer; line-height: 1.35; }
.aw-p1-line:hover { filter: brightness(.96); }
/* The selected line keeps its gender tint and gains an edge marker — swapping the
   background for a highlight colour would erase the gender the eye reads first. */
.aw-p1-line.is-sel { box-shadow: inset 4px 0 0 0 var(--aw-primary-dark); font-weight: 600; }
[dir="rtl"] .aw-p1-line.is-sel { box-shadow: inset -4px 0 0 0 var(--aw-primary-dark); }

.aw-p1-n1      { text-align: start;  overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; }
.aw-p1-n2      { text-align: end;    overflow: hidden; text-overflow: ellipsis;
                 white-space: nowrap; color: var(--aw-text-muted); font-size: .9em; }
.aw-p1-yrs     { font-family: var(--aw-font-mono); font-size: .78em;
                 color: var(--aw-text-dim); white-space: nowrap; }

/* One line per person is the point, so below ~600px the second name wraps under
   the first rather than being squeezed to three characters and an ellipsis. */
@media (max-width: 600px) {
    .aw-p1-line { grid-template-columns: 22px minmax(0,1fr) auto; }
    .aw-p1-n2   { grid-column: 2 / -1; text-align: start; }
}

/* ── chips view ───────────────────────────────────────────────────────── */
.aw-p1-chips   { display: flex; flex-wrap: wrap; gap: 4px; padding: 4px 0; }
.aw-p1-chip    { display: inline-block; border-radius: 12px; padding: 2px 10px;
                 font-size: .85rem; cursor: pointer; }
.aw-p1-chip:hover { filter: brightness(.95); }
.aw-p1-chip.is-sel { box-shadow: 0 0 0 2px var(--aw-primary-dark); font-weight: 600; }
.aw-p1-chip-yr { color: var(--aw-text-dim); margin-inline-start: 4px;
                 font-family: var(--aw-font-mono); font-size: .8em; }

.aw-p1-empty   { text-align: center; color: var(--aw-text-dim); padding: 24px 0; }

/* Two pagers, one list. The foot one is the full-width pair with labels; the top one is
   icon-only and rides inside the count bar, because a header that grows a row of buttons
   pushes the first result down the page — which is the thing the top pager exists to avoid. */
.aw-p1-pager   { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; }
.aw-p1-pager-top { padding: 0; gap: 3px; flex: 0 0 auto; }
.aw-p1-pager-top button { padding: 2px 9px; line-height: 1.3; }
.aw-p1-pager button[disabled] { opacity: .35; cursor: default; }
/* The chevrons point along reading direction, so they flip with the page. */
[dir="ltr"] .aw-p1-prev,
[dir="ltr"] .aw-p1-next { transform: scaleX(-1); }


/* ── avatar ───────────────────────────────────────────────────────────────
   A fixed square in the line, so the names still align down the column whether
   or not a person has a photograph — a slot that collapses when empty makes the
   list jitter as you page through it. Falls back to initials on the gender tint,
   which is why the tint class goes on the SLOT and not only on the row. */
.aw-p1-av      { width: 22px; height: 22px; flex: 0 0 22px; border-radius: 50%;
                 overflow: hidden; display: inline-flex; align-items: center;
                 justify-content: center; font-size: .62rem; font-weight: 700;
                 color: #000; line-height: 1; }
.aw-p1-av img  { width: 100%; height: 100%; object-fit: cover; display: block; }
.aw-p1-av-lg   { width: 34px; height: 34px; flex-basis: 34px; font-size: .85rem; }

/* ── letter index ─────────────────────────────────────────────────────────
   family.c1's bi-alphabet strip. Two rows, one per script, each letter a toggle.
   Sized so all 22 Hebrew letters fit a 300px rail without wrapping to a third
   line — the strip is only useful while it reads as one continuous run. */
.aw-p1-idx     { display: block; padding: 3px 5px; }
.aw-p1-alpha   { display: flex; flex-wrap: wrap; justify-content: space-between;
                 gap: 1px; line-height: 1.5; }
.aw-p1-alpha + .aw-p1-alpha { margin-top: 2px; border-top: 1px dashed var(--aw-border);
                              padding-top: 2px; }
.aw-p1-l       { flex: 0 0 auto; min-width: 11px; text-align: center; cursor: pointer;
                 font-weight: 400; color: var(--aw-text-muted); border-radius: 3px;
                 padding: 0 1px; }
.aw-p1-l:hover { background: var(--aw-hover-subtle); color: var(--aw-text); }
.aw-p1-l.on    { background: var(--aw-primary-dark); color: #fff; font-weight: 700; }

/* ── the rcol rail ────────────────────────────────────────────────────────
   Three dense cards — search, filters, view — after family.c1's rcol
   (family/uiW3/lib/rcol.tpl). One flex row per card at ~0.78em, icons doing
   the labelling and `title` carrying the words. The rail sits beside a
   9,080-row list, so every row it spends is a row of results it takes away;
   the earlier version stacked five labelled groups and ran 300px tall. */
.aw-p1-rcol    { font-size: .82rem; }

.aw-p1-card1   { display: flex; align-items: center; gap: 4px;
                 background: var(--aw-card-bg); border: 1px solid var(--aw-border);
                 border-radius: var(--aw-radius-sm); box-shadow: var(--aw-shadow-1);
                 padding: 4px 7px; margin-bottom: 4px; }
.aw-p1-wrap    { flex-wrap: wrap; row-gap: 3px; }
.aw-p1-i       { color: var(--aw-text-dim); font-size: .9em; flex-shrink: 0; }
/* A hairline between groups of buttons — cheaper than a row of headings, and it
   survives wrapping because it is just another flex item. */
.aw-p1-sep     { width: 1px; align-self: stretch; background: var(--aw-border);
                 margin: 0 2px; }

.aw-p1-q       { flex: 1; min-width: 40px; border: 0; background: none; outline: none;
                 font: inherit; color: var(--aw-text); padding: 2px 0; }
.aw-p1-q::-webkit-search-cancel-button,
.aw-p1-q::-webkit-search-decoration { -webkit-appearance: none; appearance: none; }
.aw-p1-x       { color: var(--aw-text-dim); cursor: pointer; flex-shrink: 0;
                 margin-inline-start: auto; padding: 0 2px; }
.aw-p1-x:hover { color: var(--aw-error); }

/* One button shape for every toggle in the rail: gender, alive/dead, photo, family,
   view. OFF is an outline; ON is an inset ring, not a fill — the gender buttons carry
   their tint at rest (that tint IS the label) and filling them would erase it. */
.aw-p1-b       { display: inline-flex; align-items: center; justify-content: center;
                 min-width: 22px; height: 20px; padding: 0 6px;
                 border: 1px solid var(--aw-border-mid); border-radius: 10px;
                 background: var(--aw-card-bg); color: var(--aw-text-muted);
                 cursor: pointer; user-select: none; line-height: 1; flex-shrink: 0; }
.aw-p1-b:hover { border-color: var(--aw-primary); }
.aw-p1-b.on    { box-shadow: inset 0 0 0 2px var(--aw-primary-dark);
                 color: var(--aw-text); font-weight: 700; }

.aw-p1-born      { display: inline-flex; align-items: center; gap: 3px; flex-shrink: 0; }
.aw-p1-bornpair  { display: inline-flex; align-items: center; gap: 1px;
                   color: var(--aw-text-dim); }
.aw-p1-yr        { width: 3.4em; padding: 1px 3px; text-align: center;
                   border: 1px solid var(--aw-border-mid); border-radius: 3px;
                   background: var(--aw-card-bg); color: var(--aw-text);
                   font-family: var(--aw-font-mono); font-size: .95em; }

.aw-p1-sort      { flex: 1; min-width: 0; font: inherit; padding: 1px 4px;
                   border: 1px solid var(--aw-border-mid); border-radius: 3px;
                   background: var(--aw-card-bg); color: var(--aw-text); }

/* ── the card ─────────────────────────────────────────────────────────── */
.aw-p1-card    { border-radius: var(--aw-radius-card); box-shadow: var(--aw-shadow-1);
                 overflow: hidden; margin-top: 6px; }
.aw-p1-card-h  { display: flex; align-items: baseline; gap: 6px; padding: 6px 9px;
                 font-size: 1.05em; }
.aw-p1-card-x  { margin-inline-start: auto; cursor: pointer; color: var(--aw-text-dim); }
.aw-p1-card-b  { background: var(--aw-card-bg); padding: 7px 9px; }
.aw-p1-uwid    { font-family: var(--aw-font-mono); font-size: .85em; letter-spacing: .4px;
                 color: var(--aw-text-dim); }
.aw-p1-alt     { color: var(--aw-text-muted); margin-bottom: 3px; }
.aw-p1-kv      { width: 100%; border-collapse: collapse; }
.aw-p1-kv td            { padding: 1px 0; vertical-align: top; }
.aw-p1-kv td:first-child{ color: var(--aw-text-dim); white-space: nowrap;
                          padding-inline-end: 8px; }
.aw-p1-card-acts { display: flex; gap: 4px; margin-top: 7px; flex-wrap: wrap; }
.aw-p1-fam     { margin-top: 7px; border-top: 1px solid var(--aw-border); padding-top: 5px; }
.aw-p1-famgrp  { margin-bottom: 4px; }
.aw-p1-famh    { font-size: .85em; text-transform: uppercase; letter-spacing: .05em;
                 color: var(--aw-text-dim); }
.aw-p1-hint    { color: var(--aw-text-dim); text-align: center; padding: 10px 6px; }

/* ════════════════════════════════════════════════════════════════════════════
   RCOL CONTROL-PANEL PRIMITIVES
   @updated 2026-08-24 - extracted while building aw1's /piz section

   The vocabulary nh and family already use for a right-column control panel,
   made reusable: a filled section bar, labelled filter-pill rows, a Hebrew
   letter index and a decade sparkline.

   The bar is nh's `w3-theme-d5` header. It reads amber on nh and teal on aw1
   because the shade comes from the SITE THEME, not from a literal — that is the
   whole reason these are worth sharing rather than copying.

   NOT to be confused with .aw-pill above, which is a status BADGE (uppercase,
   non-interactive). These are .aw-fpill — f for filter. Two different things
   that both wanted the same name; renaming ours was cheaper than auditing every
   existing .aw-pill in the estate.
   ════════════════════════════════════════════════════════════════════════════ */

.aw-rcol-panel {
    background: var(--aw-card-bg); border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-card); box-shadow: var(--aw-shadow-1);
    overflow: hidden;
    flex: 0 0 auto;   /* load-bearing: the panel column has a max-height, and a
                         shrinking flex child clips its own content instead. */
}
.aw-rcol-h {
    background: var(--aw-primary-dark); color: var(--aw-text-on-dark);
    padding: 7px 13px; font-size: .92em; font-weight: 700;
    display: flex; align-items: center; gap: 8px;
}
.aw-rcol-n { margin-inline-start: auto; font-size: .78em; font-weight: 400;
             opacity: .85; font-variant-numeric: tabular-nums; }
.aw-rcol-b { padding: 11px 12px; display: flex; flex-direction: column; gap: 10px; }
.aw-rcol-in {
    width: 100%; padding: 7px 10px; border: 1px solid var(--aw-border);
    border-radius: var(--aw-radius-sm); background: var(--aw-bg); color: inherit;
    font-family: inherit; font-size: 1em;
}
.aw-rcol-in::placeholder { color: var(--aw-text-inactive); }
.aw-rcol-hint { font-size: .74em; color: var(--aw-text-inactive); }
.aw-rcol-range { display: flex; align-items: center; gap: 7px; }
.aw-rcol-range .aw-rcol-in { text-align: center; font-variant-numeric: tabular-nums; }
.aw-rcol-range span { color: var(--aw-text-inactive); font-size: .82em; }
.aw-rcol-reset {
    background: none; border: 1px solid var(--aw-border); color: var(--aw-text-muted);
    border-radius: var(--aw-radius-sm); padding: 6px; cursor: pointer; font-size: .84em;
}
.aw-rcol-reset:hover { border-color: var(--aw-warning, #e67e22); color: var(--aw-warning, #e67e22); }

/* live match list under a search box — click a row to select it */
.aw-rcol-hits {
    border: 1px solid var(--aw-border); border-radius: var(--aw-radius-sm);
    background: var(--aw-bg); max-height: 210px; overflow-y: auto;
}
.aw-rcol-hits:empty { display: none; }
.aw-rcol-hit {
    display: flex; align-items: center; gap: 8px; padding: 5px 9px; cursor: pointer;
    border-bottom: 1px solid var(--aw-border);
}
.aw-rcol-hit:last-child { border-bottom: 0; }
.aw-rcol-hit:hover { background: var(--aw-card-bg); }
.aw-rcol-hit-n { font-size: .88em; min-width: 0; overflow: hidden;
                 text-overflow: ellipsis; white-space: nowrap; }
.aw-rcol-hit-a { display: block; font-size: .78em; color: var(--aw-text-inactive);
                 overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.aw-rcol-hit-s { margin-inline-start: auto; font-size: .76em;
                 color: var(--aw-text-inactive); white-space: nowrap; }

/* ─── .aw-srow — ONE-LINE search row ──────────────────────────────────────────
   The compact sibling of .aw-rcol-panel above. A panel is header + input + hint
   stacked, ~90px each; five of those is 450px of chrome before any content, which
   is why nh.d1/works puts label, input and hint on ONE line and why ytp's RCOL
   needs five of them. Use a panel when a search owns a section of the column; use
   a row when several searches sit together.

   Added 2026-09-15 for ytp. nh's find_song/find_vip are the layout this copies —
   not their 2013 implementation (inline XHR, no debounce, server-rendered
   innerHTML). aw1's _piz / _army / _folk / _shiron panels are the other
   candidates to fold onto it. */
.aw-srow {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 9px; margin-bottom: 4px;
    background: var(--aw-primary-dark, #2c3e50); color: var(--aw-text-on-dark, #fff);
    border-radius: var(--aw-radius-sm, 5px);
    position: relative;                 /* the hit list hangs off this */
}
.aw-srow-lbl {
    flex: 0 0 auto; font-size: .9em; font-weight: 600; white-space: nowrap;
}
.aw-srow-in {
    flex: 1 1 auto; min-width: 0;       /* min-width:0, or a long value stretches the row */
    border: 1px solid var(--aw-border, #ccc); border-radius: var(--aw-radius-sm, 5px);
    padding: 3px 7px; font-size: .86em; font-family: inherit;
    background: var(--aw-bg, #fff); color: var(--aw-dark, #222);
}
.aw-srow-in:disabled { opacity: .55; cursor: not-allowed; }
.aw-srow-hint {
    flex: 0 0 auto; font-size: .72em; opacity: .75; white-space: nowrap;
}
.aw-srow-busy { flex: 0 0 auto; font-size: .78em; opacity: .8; }

/* Absolutely positioned so an open list does not shove the other four rows down
   the column — which is the whole point of making them one line. */
.aw-srow-hits {
    position: absolute; inset-inline: 0; top: 100%; z-index: 30;
    margin-top: 2px;
    border: 1px solid var(--aw-border, #ccc); border-radius: var(--aw-radius-sm, 5px);
    background: var(--aw-bg, #fff); color: var(--aw-dark, #222);
    max-height: 260px; overflow-y: auto;
    box-shadow: var(--aw-shadow-2, 0 4px 10px rgba(0,0,0,.18));
}
.aw-srow-hits:empty { display: none; }
.aw-srow-hit {
    display: flex; align-items: center; gap: 8px;
    padding: 5px 9px; border-bottom: 1px solid var(--aw-border, #eee);
    text-decoration: none; color: inherit;
}
.aw-srow-hit:last-child { border-bottom: 0; }
.aw-srow-hit:hover, .aw-srow-hit:focus { background: var(--aw-card-bg, #f2f5f8); }
.aw-srow-hit-t {
    font-size: .86em; min-width: 0; overflow: hidden;
    text-overflow: ellipsis; white-space: nowrap;
}
.aw-srow-hit-s {
    font-size: .76em; color: var(--aw-text-inactive, #888);
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.aw-srow-hit-n {
    margin-inline-start: auto; font-size: .74em;
    color: var(--aw-text-inactive, #888); white-space: nowrap;
    font-variant-numeric: tabular-nums;
}
.aw-srow-none { padding: 6px 9px; font-size: .8em; color: var(--aw-text-inactive, #888); }

/* ─── filter pills ─── */
.aw-fpills { display: flex; flex-wrap: wrap; gap: 5px; }
.aw-fpill {
    border: 1px solid var(--aw-border); background: var(--aw-bg); color: var(--aw-text-muted);
    border-radius: 999px; padding: 4px 11px; font-size: .82em; cursor: pointer;
    display: inline-flex; align-items: center; gap: 6px; font-family: inherit;
    transition: background .14s, color .14s, border-color .14s;
}
.aw-fpill:hover { border-color: var(--aw-primary); color: var(--aw-text); }
.aw-fpill.is-on { background: var(--aw-primary); border-color: var(--aw-primary);
                  color: var(--aw-text-on-dark); font-weight: 500; }
.aw-fpill-n { font-size: .84em; opacity: .72; font-variant-numeric: tabular-nums; }
.aw-fpillrow { display: flex; align-items: flex-start; gap: 7px; flex-wrap: wrap; }
.aw-fpillrow-l { font-weight: 700; font-size: .84em; padding-top: 4px; white-space: nowrap; }

/* ─── Hebrew letter index (nh's `שירים שמתחילים באות`) ─── */
.aw-ltr-grid { display: flex; flex-wrap: wrap; gap: 4px; }
.aw-ltr {
    width: 27px; height: 27px; border-radius: 50%; border: 1px solid var(--aw-border);
    background: var(--aw-bg); color: var(--aw-text-muted); cursor: pointer;
    font-size: .84em; font-weight: 700; line-height: 1; padding: 0; font-family: inherit;
    display: inline-flex; align-items: center; justify-content: center;
    transition: background .13s, color .13s, border-color .13s;
}
.aw-ltr:hover { border-color: var(--aw-primary); color: var(--aw-primary); }
.aw-ltr.is-on { background: var(--aw-primary-dark); border-color: var(--aw-primary-dark);
                color: var(--aw-text-on-dark); }
.aw-ltr.wide { width: auto; padding: 0 8px; border-radius: 13px; font-size: .72em; }
.aw-ltr[disabled] { opacity: .3; cursor: default; }

/* ─── decade sparkline: a real distribution that doubles as a range control ─── */
.aw-spark { display: flex; align-items: flex-end; gap: 3px; height: 40px; margin-top: 3px; }
.aw-spark-b { flex: 1; background: var(--aw-border); border-radius: 2px 2px 0 0;
              cursor: pointer; transition: background .15s; min-height: 3px; }
.aw-spark-b:hover, .aw-spark-b.is-on { background: var(--aw-primary); }
.aw-spark-x { display: flex; gap: 3px; font-size: .64em; color: var(--aw-text-inactive); }
.aw-spark-x span { flex: 1; text-align: center; font-variant-numeric: tabular-nums; }