/* The home top - goinfo, day/night/accessibility, the question, the search, the chips -
   as index.html and /about wear it. ONE file since TASK-site-27 (Ram 2026-09-17: every
   page looks like /about): the generated families link it, src/mast.js links it when it
   builds the block on a page that arrived with the compact bar. Was HOME_TOP_CSS inside
   tools/city_quarter_build.py, copied into every page it wrote. */

  /* index.html's own tokens, on the block rather than on :root, so nothing
     below the header moves. --shadow is a full box-shadow here and a bare
     colour in src/style.css, which is why it is not read from the page.
     AND ITS PER-THEME VALUES TOO, below. The first cut copied only the base
     :root block, which froze the header in the light palette: on לילה the
     field, the chips and the switch track stayed white on a dark page,
     because #ffffff does not know what theme it is in. index.html carries
     :root[data-theme="fashion"] and ="zebra" overrides for exactly these
     tokens and this copies them verbatim - which is the whole point of
     copying rather than inventing. */
  .site-top {
    --panel: #ffffff;
    --panel-2: oklch(0.952 0.018 250);
    --top-accent: #2e7d46;
    --top-ring: rgba(46, 125, 70, .35);
    --top-shadow: 0 1px 2px rgba(27, 94, 52, .08), 0 8px 24px rgba(27, 94, 52, .06);
    --top-maxw: 430px;          /* index.html: רוחב מובייל, גם על שולחן העבודה */
    padding-block-end: .4rem;
  }
  /* לילה. The panels are translucent white rather than a fixed colour, so
     they sit correctly on this family's page background even though it is
     not index.html's own - that is why the values are copied and not
     approximated. */
  :root[data-theme="fashion"] .site-top {
    --panel: rgba(255, 255, 255, 0.045);
    --panel-2: rgba(255, 255, 255, 0.07);
    --top-accent: #6cc275;
    --top-ring: rgba(108, 194, 117, .45);
    --top-shadow: 0 1px 2px rgba(0, 0, 0, .35);
  }
  /* נגישות/זברה: maximum contrast, no shadows, black accent. */
  :root[data-theme="zebra"] .site-top {
    --panel: #ffffff;
    --panel-2: #f0f0f0;
    --top-accent: #000000;
    --top-ring: rgba(0, 0, 0, .45);
    --top-shadow: none;
  }
  /* No stored choice at all: the site follows the reader's OS, and so does
     this. Guarded so an explicit יום still wins over a dark OS. */
  @media (prefers-color-scheme: dark) {
    :root:not([data-theme="clouds"]):not([data-theme="zebra"]) .site-top {
      --panel: rgba(255, 255, 255, 0.045);
      --panel-2: rgba(255, 255, 255, 0.07);
      --top-accent: #6cc275;
      --top-ring: rgba(108, 194, 117, .45);
      --top-shadow: 0 1px 2px rgba(0, 0, 0, .35);
    }
  }
  .site-top .top {
    display: flex; align-items: center; justify-content: space-between;
    gap: 8px 12px; flex-wrap: wrap;
    max-width: var(--top-maxw); margin: 0 auto; padding: 12px 16px;
  }
  .site-top .brand { font-family: var(--font-head); font-weight: 700;
                     letter-spacing: -.01em; font-size: 1.15rem; }
  .site-top .brand a { color: var(--top-accent); text-decoration: none; }
  .site-top .theme-switch { display: inline-flex; gap: 2px;
    background: var(--panel-2); border-radius: 999px; padding: 2px; }
  .site-top .theme-switch button {
    display: inline-flex; align-items: center; gap: 4px; cursor: pointer;
    border: 0; background: none; color: var(--muted); border-radius: 999px;
    font: 500 .75rem/1 var(--font-body); padding: 6px 9px; }
  .site-top .theme-switch button:hover { color: var(--fg); }
  .site-top .theme-switch button[aria-pressed="true"] {
    background: var(--panel); color: var(--fg); box-shadow: var(--top-shadow); }
  .site-top .theme-switch svg { width: 15px; height: 15px; }
  .site-top .theme-btn-label { white-space: nowrap; }
  .site-top .hero { max-width: var(--top-maxw); margin: 0 auto;
                    padding: 22px 16px 0; text-align: center; }
  .site-top .hero h2 {
    font-family: var(--font-head); font-weight: 700; text-wrap: balance;
    font-size: clamp(1.5rem, 1.2rem + 1.6vw, 1.9rem); line-height: 1.15;
    margin: 0 0 10px; letter-spacing: -.02em; }
  .site-top .searchwrap { max-width: var(--top-maxw); margin: 18px auto 0;
                          padding: 0 16px; }
  .site-top .field {
    display: flex; align-items: center; gap: 10px; background: var(--panel);
    border: 1px solid var(--border); border-radius: 999px; padding: 0 18px;
    box-shadow: var(--top-shadow);
    transition: box-shadow .15s ease, border-color .15s ease; }
  .site-top .field:focus-within { border-color: var(--top-accent);
                                  box-shadow: 0 0 0 4px var(--top-ring); }
  .site-top .field svg { width: 20px; height: 20px; flex: none;
                         color: var(--muted); }
  .site-top .field button { border: 0; background: none; padding: 0;
                            cursor: pointer; color: var(--muted);
                            display: inline-flex; }
  .site-top .field input {
    flex: 1 1 auto; min-width: 0; border: 0; background: none; color: inherit;
    font: 500 1.05rem/1 var(--font-body); padding: 17px 0; outline: none; }
  .site-top .field input::placeholder { color: var(--muted); opacity: .85; }
  .site-top .cats { display: flex; flex-wrap: wrap; justify-content: center;
    gap: 7px; max-width: var(--top-maxw); margin: 16px auto 0; padding: 0 16px; }
  .site-top .chip {
    display: inline-flex; align-items: center; gap: 7px;
    font: 500 .875rem/1 var(--font-body); color: var(--fg);
    background: var(--panel); border: 1px solid var(--border);
    border-radius: 999px; padding: 8px 12px; text-decoration: none;
    transition: border-color .12s ease, background .12s ease; }
  .site-top .chip:hover { border-color: var(--top-accent); }
  .site-top .chip:focus-visible { outline: 2px solid var(--top-accent);
                                  outline-offset: 2px; }

/* The compact bar's own things, kept under the hero: the page name, the guide link, the share pair. */
/* the page's heading under the pyramid: big, as /about's; the tools under it */
.site-top .page-head { max-width: var(--maxw, 64rem); margin: 1.4rem auto 0; padding: 0 16px; }
.site-top .page-head h1 { font-size: clamp(1.5rem, 1.1rem + 1.6vw, 2.1rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.2; margin: 0 0 .4rem; color: var(--fg); }
.site-top .gi-page-tools { display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center; margin: 0 0 .6rem; font-size: 13px; color: var(--muted); }
.site-top .gi-page-tools a, .site-top .gi-page-tools button { color: inherit; }
/* phones, first entry: the site header (pyramid) hidden; the page opens on its own heading */
@media (max-width: 640px) { .site-top.gi-top-deferred > :not(.page-head):not(.gi-top-peek):not(.gi-top-peekrow) { display: none; } }
.gi-top-peek, .gi-top-peekrow { display: none; }
/* the folded header's one row: the peek button and the theme picker beside it (site-33c) */
@media (max-width: 640px) { .gi-top-peekrow { display: flex; align-items: center; gap: 6px; padding: 4px 8px 4px 12px; border-bottom: 1px solid var(--border, #ddd); background: var(--top-bg, var(--bg, #fff)); }
  .gi-top-peekrow .gi-top-peek { flex: 1 1 auto; width: auto; border-bottom: 0; padding: 6px 4px; }
  .gi-top-peekrow .theme-pick, .gi-top-peekrow .theme-switch { flex: none; margin: 0; }
  .gi-top-peekrow .theme-pick button span, .gi-top-peekrow .theme-switch button span { display: none; }   /* icons only in the slim row */
  .gi-top-peekrow .gi-top-peek { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; min-width: 0; font-size: 13px; }
  .gi-top-peek { display: flex; width: 100%; align-items: center; gap: 6px; padding: 8px 16px; border: 0; border-bottom: 1px solid var(--border, #ddd); background: var(--top-bg, var(--bg, #fff)); color: var(--muted, #666); font: inherit; font-size: 14px; cursor: pointer; }
  .gi-top-peek .gi-brand { font-family: var(--font-head); font-weight: 700; color: var(--top-accent, var(--accent)); } }
/* the block is still header.site underneath: none of the compact bar's box applies */
header.site.site-top { display: block; padding: 0; margin: 0; background: var(--top-bg, transparent); border: 0; box-shadow: none; }
header.site.site-top .top { max-width: var(--top-maxw); margin: 0 auto; }
/* Ram 2026-09-17 "רק תמרכז את התוכן עצמו": the content column sits centred under the
   pyramid as /about has it - the editorial pages hung off the start edge (main.ed
   margin-inline: 0 auto); the heading follows the same column */
body main, body main.ed, body main.ed-wide { margin-inline: auto; }
header.site.site-top .page-head.wrap { max-width: min(64rem, 100%); margin-inline: auto; display: block; padding-block: 0; }
/* the same search row and chips at the foot of the page (TASK-site-28): the
   header's rules apply through .site-top-foot standing in for .site-top */
footer.site-legal .site-top-foot { padding: 1.2rem 0 .4rem; border-top: 1px solid var(--border); }
footer.site-legal .site-top-foot .searchwrap { max-width: var(--top-maxw, 430px); margin: 0 auto; padding: 0 16px; }
footer.site-legal .site-top-foot .field { display: flex; align-items: center; gap: 10px; background: var(--panel, var(--bg)); border: 1px solid var(--border); border-radius: 999px; padding: 4px 14px; }
footer.site-legal .site-top-foot .field button { border: 0; background: none; padding: 0; color: var(--muted); display: flex; cursor: pointer; }
footer.site-legal .site-top-foot .field svg { width: 20px; height: 20px; flex: none; }
footer.site-legal .site-top-foot .field input { flex: 1; min-width: 0; border: 0; background: none; font: inherit; font-size: 16px; color: var(--fg); padding: 12px 0; outline: none; }
footer.site-legal .site-top-foot .cats { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; max-width: var(--top-maxw, 430px); margin: 12px auto 0; padding: 0 16px; }
footer.site-legal .site-top-foot .chip { color: var(--fg); background: var(--panel, var(--bg)); border: 1px solid var(--border); border-radius: 999px; padding: 7px 12px; text-decoration: none; font-size: 14px; }
footer.site-legal .site-top-foot .chip:hover { border-color: var(--top-accent, var(--accent)); }