/* Lageeto — the theme for every page.
   Layout: a green header over a white page; listings as cards on a soft
   surface. Logical properties only, so one stylesheet serves Arabic (rtl)
   and English (ltr); tests/test_theme.py refuses left/right here.
   Tokens are prefixed --pw- so they cannot collide with style.css, which
   pages not yet migrated still use. */

:root {
  /* Lageeto: deep green bar and buttons, orange accent, cream page
     (static/brand/css/lageeto-brand.css holds the logo's own tokens). */
  --pw-brand: #0F3D33;
  --pw-brand-deep: #0A2B24;
  --pw-accent: #E8863A;
  /* Text on the orange: the bar's green reads at 4.3:1 there, this at 5.3:1. */
  --pw-on-accent: #0A2B24;
  --pw-price: #8A4510;
  --pw-ground: #FFFFFF;
  --pw-surface: #F7F5EF;
  --pw-line: #E6E2D8;
  --pw-line-strong: #D2CCBE;
  --pw-ink: #14231E;
  --pw-ink-2: #34463F;
  --pw-muted: #5A6862;
  --pw-ok: #1F7A4D;
  --pw-warn-bg: #FCEBDC;
  --pw-warn: #7A3E0A;
  --pw-bad: #B42318;
  /* The saved heart: its chip stays white in dark mode, so this red is not
     redefined there (--pw-bad lightens and would fade on the white). */
  --pw-heart-on: #B42318;
  --pw-on-dark: #FFFFFF;
  /* Secondary marks on the green bar: the divider, the menu arrow. */
  --pw-on-dark-muted: #BFD6CE;
  /* Green is a fill; text that must read on the page ground uses this. */
  --pw-link: #0F3D33;
  --pw-font: "Cairo", "Segoe UI", Tahoma, sans-serif;

  /* Legacy tokens re-pointed, so pages still on style.css share the palette
     until Theme plan 2 moves them over. */
  --bg: var(--pw-surface);
  --card: var(--pw-ground);
  --border: var(--pw-line);
  --border-strong: var(--pw-line-strong);
  --text: var(--pw-ink);
  --muted: var(--pw-muted);
  --primary: var(--pw-brand);
  --accent: var(--pw-ok);
}

@media (prefers-color-scheme: dark) {
  :root {
    --pw-brand: #0F3D33;
    --pw-brand-deep: #08201A;
    --pw-price: #F2B27A;
    --pw-ground: #0B1D18;
    --pw-surface: #10261F;
    --pw-line: #1E3A31;
    --pw-line-strong: #2F5045;
    --pw-ink: #ECF1EE;
    --pw-ink-2: #C4D2CC;
    --pw-muted: #93A79F;
    --pw-ok: #4CC38A;
    --pw-warn-bg: #3A2412;
    --pw-warn: #F2A45E;
    --pw-bad: #F27A6E;
    --pw-link: #9FD3BF;
    --primary: #9FD3BF;
  }
}

/* -- components -- */

body { font-family: var(--pw-font); background: var(--pw-surface); color: var(--pw-ink); }
[dir="rtl"] .flip-rtl { transform: scaleX(-1); }

.pw-header {
  display: flex; align-items: center; gap: 20px; flex-wrap: wrap;
  padding-block: 12px; padding-inline: 24px;
  background: var(--pw-brand); color: var(--pw-on-dark);
  /* Its menus open over the page: above the sticky filter bar (z-index 30),
     which otherwise hid the account menu's middle, and below the cookie
     strip and the phone's bottom sheets. */
  position: relative; z-index: 40;
}
/* The Lageeto lockup (static/brand/css/lageeto-brand.css) scales from its font size. */
.pw-header .lg-logo { font-size: 15px; }
.pw-nav { display: flex; align-items: center; gap: 4px; flex-wrap: wrap; flex: 1; }
.pw-nav a { color: var(--pw-on-dark); text-decoration: none; font-weight: 600; font-size: 14px; padding-block: 8px; padding-inline: 10px; border-block-end: 2px solid transparent; }
.pw-nav a.on { border-block-end-color: var(--pw-accent); }
.pw-nav a:hover { border-block-end-color: var(--pw-line-strong); }
.pw-header .menu summary { color: var(--pw-on-dark); }
/* The legacy arrow is grey for a white bar; on the green bar it is redrawn in the
   muted-white of --pw-on-dark-muted, URL-encoded below. */
.pw-header .menu > summary { background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%23BFD6CE' stroke-width='1.6' stroke-linecap='round'/%3E%3C/svg%3E"); }

.pw-lang { display: flex; gap: 4px; }
.pw-lang button {
  min-block-size: 40px; padding-inline: 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--pw-line-strong); background: transparent; color: var(--pw-on-dark);
  font: inherit; font-weight: 600; font-size: 14px;
}

.pw-btn { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 16px; border-radius: 8px; border: 1px solid var(--pw-line-strong); background: var(--pw-ground); color: var(--pw-link); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; }
.pw-btn-primary { background: var(--pw-brand); border-color: var(--pw-brand); color: var(--pw-on-dark); }
.pw-btn-accent { background: var(--pw-accent); border-color: var(--pw-accent); color: var(--pw-on-accent); }

.pw-card-panel { background: var(--pw-ground); border: 1px solid var(--pw-line); border-radius: 14px; padding-block: 20px; padding-inline: 22px; }
.pw-checks { display: flex; gap: 16px; flex-wrap: wrap; }

.pw-footer { padding-block: 24px 40px; padding-inline: 24px; color: var(--pw-muted); font-size: 13px; text-align: center; }
.pw-footer p { margin-block: 0 6px; }
.pw-footer .pw-ownership { font-size: 12px; max-inline-size: 760px; margin-inline: auto; }
.pw-ownership-note { padding-block: 10px; padding-inline: 14px; border-inline-start: 3px solid var(--pw-accent); background: var(--pw-ground); border-radius: 8px; color: var(--pw-ink-2); font-size: 13px; }

/* The account menu's panel and arrow were placed with physical sides in
   style.css; anchored to the reading end instead, they stay on screen in
   Arabic. */
/* style.css gives the active, hovered and open summary a pale background;
   under the header's white text that made the name unreadable. */
.pw-header .menu > summary:is(.on, :hover), .pw-header .menu[open] > summary { background-color: var(--pw-brand-deep); color: var(--pw-on-dark); }

/* Dark mode lightens --primary so legacy links read on a dark page; the
   legacy buttons and tab that fill with it then need dark text. */
@media (prefers-color-scheme: dark) {
  .btn-primary, .btn-primary:hover, .tab.active { color: var(--pw-ground); }
}
.pw-header .menu-panel { inset: calc(100% + 6px) auto auto auto; inset-inline-end: 0; }
.pw-header .menu-panel a { text-align: start; }

/* Grouped top bar (spec: results layout §2). */
.pw-menu { position: relative; }
.pw-menu > summary { list-style: none; cursor: pointer; display: inline-flex; align-items: center; gap: 4px; padding-block: 6px; padding-inline: 10px; border-radius: 8px; color: var(--pw-on-dark); font-weight: 600; font-size: 14px; }
.pw-menu > summary::-webkit-details-marker { display: none; }
.pw-menu > summary::after { content: "\25BE"; font-size: 11px; color: var(--pw-on-dark-muted); }
.pw-menu > summary.on { box-shadow: inset 0 -2px 0 var(--pw-accent); }
.pw-menu-panel { position: absolute; z-index: 40; inset-block-start: calc(100% + 6px); inset-inline-start: 0; min-inline-size: 200px; display: grid; gap: 2px; padding: 6px; background: var(--pw-ground); border: 1px solid var(--pw-line-strong); border-radius: 10px; box-shadow: 0 10px 30px rgba(15, 61, 51, .14); }
.pw-nav .pw-menu-panel a, .pw-menu-panel a { color: var(--pw-ink); padding-block: 8px; padding-inline: 10px; border-radius: 7px; border-block-end: 0; text-decoration: none; }
.pw-menu-panel a.on, .pw-menu-panel a:hover { background: var(--pw-surface); }
/* A closed <details> still draws a fixed-position child in Chrome (the
   phone tab bar's Market panel showed half off screen while closed), so a
   panel is hidden outright unless its menu is open. */
.pw-menu:not([open]) > .pw-menu-panel { display: none; }
.pw-menu-panel form { padding-block-end: 6px; border-block-end: 1px solid var(--pw-line); margin-block-end: 4px; }
.pw-phone-only { display: none; }
.pw-tabbar { display: none; }
.pw-lang button { min-inline-size: 40px; padding-inline: 10px; }
@media (max-width: 640px) {
  .pw-header .pw-nav { display: none; }
  .pw-header .lg-logo { font-size: 13px; }
  .pw-phone-only { display: grid; gap: 2px; padding-block-end: 6px; border-block-end: 1px solid var(--pw-line); margin-block-end: 4px; }
  .pw-tabbar { display: grid; grid-template-columns: repeat(4, 1fr); position: fixed; z-index: 50; inset-inline: 0; inset-block-end: 0; padding-block-end: env(safe-area-inset-bottom, 0px); background: var(--pw-ground); border-block-start: 1px solid var(--pw-line); }
  .pw-tabbar a, .pw-tabbar summary { display: grid; justify-items: center; gap: 2px; min-block-size: 56px; padding-block: 6px; font-size: 11px; font-weight: 700; color: var(--pw-muted); text-decoration: none; }
  .pw-tabbar summary { list-style: none; cursor: pointer; }
  .pw-tabbar summary::after { content: none; }
  .pw-tabbar .on { color: var(--pw-link); box-shadow: none; }
  .pw-tab-market .pw-menu-panel { position: fixed; inset-inline: 8px; inset-block-start: auto; inset-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }
  body { padding-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); }
}
@media (max-width: 640px) { .pw-tabbar.pw-tabbar-3 { grid-template-columns: repeat(3, 1fr); } }
@media print { .pw-tabbar { display: none !important; } }

@media print {
  .pw-header, .pw-footer, .pw-lang { display: none !important; }
}

/* Results: one card markup, three layouts. */
.pw-results { display: grid; gap: 18px; margin-block-start: 14px; }
/* Four tiles a row at most: each column is at least a quarter of the row
   (less the three gaps), so a wide frame never makes a fifth; on narrower
   screens the 260px floor drops it to three, two, one. */
.pw-results.view-tiles { grid-template-columns: repeat(auto-fill, minmax(max(260px, calc((100% - 3 * 18px) / 4)), 1fr)); }
.pw-results.view-compact, .pw-results.view-large { grid-template-columns: minmax(0, 1fr); gap: 10px; }

.pw-card { display: grid; position: relative; background: var(--pw-ground); border: 1px solid var(--pw-line); border-radius: 14px; overflow: hidden; min-inline-size: 0; transition: box-shadow .18s, transform .18s; }
.pw-card:hover { box-shadow: 0 6px 20px rgba(15, 61, 51, .10); transform: translateY(-2px); }
.pw-card:has(:focus-visible) { outline: 3px solid var(--pw-accent); outline-offset: 2px; }
@media (prefers-reduced-motion: reduce) { .pw-card, .pw-card:hover { transition: none; transform: none; } }
.pw-card[hidden] { display: none; }
.pw-card-new { border-color: var(--pw-ok); }
.pw-photo { grid-area: photo; position: relative; background: var(--pw-surface); display: grid; place-items: center; color: var(--pw-muted); font-size: 13px; overflow: hidden; }
.pw-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
/* No photo: a faint diagonal pattern and a house outline, so the space looks
   meant, not missing. Token colours, so it reads in light and dark. */
.pw-photo:not(.has-image) { background: repeating-linear-gradient(135deg, var(--pw-surface) 0 14px, var(--pw-ground) 14px 28px); }
.pw-photo-empty { display: grid; justify-items: center; gap: 6px; color: var(--pw-muted); }
.pw-photo-empty-icon { inline-size: clamp(36px, 22%, 64px); block-size: auto; opacity: .7; }
.pw-photo-empty-text { font-size: 12.5px; font-weight: 600; }
/* Has a photo that would not load: the same pattern, a broken frame instead of
   the house, in the warning colour, so it is not mistaken for "no photo". */
.pw-photo-broken { display: none; justify-items: center; gap: 6px; color: var(--pw-warn); }
.pw-photo.photo-failed .pw-photo-empty { display: none; }
.pw-photo.photo-failed .pw-photo-broken { display: grid; }
/* A shade at the photo's foot so the white date chip reads on any picture. */
.pw-photo.has-image::after { content: ""; position: absolute; inset: 0; background: linear-gradient(to top, rgba(6, 22, 18, .55), rgba(6, 22, 18, 0) 45%); pointer-events: none; }
.pw-date-chip { position: absolute; z-index: 1; inset-block-end: 10px; inset-inline-start: 10px; background: rgba(6, 22, 18, .72); color: var(--pw-on-dark); font-size: 12px; font-weight: 700; padding-block: 2px; padding-inline: 8px; border-radius: 6px; }
.pw-date-chip.pw-date-seen { background: rgba(6, 22, 18, .5); font-weight: 600; }
.pw-date-line { display: none; font-size: 12.5px; color: var(--pw-muted); }
.pw-date-seen { cursor: help; }
.pw-heart { position: absolute; z-index: 1; inset-block-start: 8px; inset-inline-end: 8px; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--pw-brand); display: grid; place-items: center; cursor: pointer; }
.pw-heart[aria-pressed="true"] { color: var(--pw-heart-on); }
.pw-heart[aria-pressed="true"] svg { fill: currentColor; }
.pw-badge-new { position: absolute; z-index: 1; inset-block-start: 10px; inset-inline-start: 10px; background: var(--pw-ok); color: var(--pw-on-dark); font-size: 12px; font-weight: 700; padding-block: 2px; padding-inline: 9px; border-radius: 6px; }
.pw-body { grid-area: body; padding-block: 14px; padding-inline: 16px; display: flex; flex-direction: column; gap: 6px; min-inline-size: 0; }
.pw-price-row { display: flex; align-items: baseline; gap: 6px; flex-wrap: wrap; }
.pw-price-label { font-size: 11px; font-weight: 700; color: var(--pw-muted); }
.pw-price { font-size: 21px; font-weight: 700; color: var(--pw-price); font-variant-numeric: tabular-nums; }
.pw-price-unit { font-size: 13px; font-weight: 600; color: var(--pw-muted); margin-inline-start: 4px; }
.pw-price-prefix { font-size: 13px; font-weight: 600; color: var(--pw-muted); }
.pw-equiv, .pw-place, .pw-chips { font-size: 13px; color: var(--pw-muted); }
.pw-equiv { display: grid; font-variant-numeric: tabular-nums; }
/* "Saved <date>" under the price on a saved snapshot. */
.pw-saved-on { font-size: 12px; color: var(--pw-muted); }
.pw-drop { align-self: flex-start; font-size: 12px; font-weight: 700; color: var(--pw-ok); background: var(--pw-surface); border-radius: 6px; padding-block: 1px; padding-inline: 7px; }
.pw-drop s { color: var(--pw-muted); font-weight: 500; }
.pw-text-row { display: flex; gap: 6px; align-items: flex-start; }
.pw-headline { flex: 1; min-inline-size: 0; margin: 0; font-size: 15px; font-weight: 700; display: -webkit-box; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.pw-headline.pw-open { display: block; }
.pw-excerpt { flex: 1; min-inline-size: 0; margin: 0; font-size: 13px; color: var(--pw-ink-2); overflow-wrap: anywhere; }
.pw-more { flex-shrink: 0; inline-size: 28px; block-size: 28px; padding: 0; border-radius: 50%; border: 1px solid var(--pw-line-strong); background: var(--pw-ground); color: var(--pw-ink-2); display: grid; place-items: center; cursor: pointer; }
.pw-more[hidden] { display: none; }
.pw-more svg { transition: transform .15s; }
.pw-more[aria-expanded="true"] svg { transform: rotate(180deg); }
@media (prefers-reduced-motion: reduce) { .pw-more svg { transition: none; } }
.pw-specs { display: flex; gap: 14px; flex-wrap: wrap; font-size: 14px; color: var(--pw-ink-2); }
.pw-specs span { display: inline-flex; align-items: center; gap: 5px; }
.pw-fact-icon { color: var(--pw-muted); flex-shrink: 0; }
.pw-ppsm { font-size: 12.5px; color: var(--pw-muted); font-variant-numeric: tabular-nums; }
.pw-contact { display: flex; gap: 10px; flex-wrap: wrap; font-size: 13px; }

.pw-source { grid-area: source; display: flex; align-items: center; gap: 10px; padding-block: 10px; padding-inline: 16px; background: var(--pw-surface); }
.pw-mono { inline-size: 34px; block-size: 34px; flex-shrink: 0; border-radius: 8px; background: var(--pw-brand); color: var(--pw-accent); font-size: 12px; font-weight: 700; display: grid; place-items: center; }
.pw-source-name { flex: 1; min-inline-size: 0; font-size: 14px; font-weight: 700; color: var(--pw-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* With a link the whole row is the target: badge, name and arrow. */
.pw-source-link { min-block-size: 44px; color: var(--pw-link); text-decoration: none; }
.pw-source-link:hover .pw-source-name { text-decoration: underline; }
.pw-source-link:hover { background: var(--pw-line); }
.pw-source-arrow { flex-shrink: 0; }
/* The photo and the headline open the advert as well. */
.pw-photo-link { position: absolute; inset: 0; }
.pw-photo .pw-badge-new, .pw-photo .pw-date-chip { pointer-events: none; }
.pw-headline-link { color: inherit; text-decoration: none; }
.pw-headline-link:hover { text-decoration: underline; }

.view-tiles .pw-card { grid-template-areas: "photo" "body" "source"; grid-template-rows: auto 1fr auto; }
.view-tiles .pw-photo { aspect-ratio: 4 / 3; max-inline-size: 100%; }
.view-tiles .pw-source { border-block-start: 1px solid var(--pw-line); }

.view-compact .pw-card { grid-template-columns: 84px minmax(0, 1fr) 230px; grid-template-areas: "photo body source"; border-radius: 10px; }
.view-compact .pw-photo { margin: 10px; border-radius: 8px; inline-size: 64px; block-size: 48px; }
.view-compact .pw-chips, .view-compact .pw-contact, .view-compact .pw-badge-new { display: none; }
.view-compact .pw-body { padding-block: 10px; gap: 2px; }
.view-compact .pw-price { font-size: 16px; }
.view-compact .pw-source { border-inline-start: 1px solid var(--pw-line); }
.view-compact .pw-date-chip, .view-compact .pw-excerpt-row, .view-compact .pw-price-label, .view-compact .pw-fact-icon { display: none; }
.view-compact .pw-date-line { display: block; }
.view-compact .pw-equiv { display: flex; gap: 10px; flex-wrap: wrap; font-size: 12px; }
.view-compact .pw-headline { -webkit-line-clamp: 1 !important; line-clamp: 1 !important; font-size: 14px; }
/* Compact: the heart leaves the 64x48 thumbnail, where it covered most of
   the picture. The photo stops being the heart's containing block (its
   other overlays are hidden in this view and the picture simply fills it),
   so the heart sits on the card at the body's inline-end top corner: 230px
   of source column plus 10px. The body keeps 46px clear at that end
   (10 + 26 + 10), so the heart never covers the price or the headline. */
.view-compact .pw-photo { position: static; }
.view-compact .pw-photo img { position: static; }
/* Static, the photo's layers share its one grid cell, the link on top. */
.view-compact .pw-photo > :not(.pw-heart) { grid-area: 1 / 1; }
.view-compact .pw-photo-link { position: static; inline-size: 100%; block-size: 100%; }
/* The small thumbnail keeps only the icon. */
.view-compact .pw-photo-empty-text { display: none; }
.view-compact .pw-photo-empty-icon { inline-size: 26px; }
.view-compact .pw-body { padding-inline-end: 46px; }
.view-compact .pw-heart { inline-size: 26px; block-size: 26px; inset-block-start: 10px; inset-inline-end: 240px; }
.view-compact .pw-heart svg { inline-size: 14px; block-size: 14px; }
.view-compact .pw-photo.has-image::after { display: none; }

.view-large .pw-card { grid-template-columns: 340px minmax(0, 1fr) 240px; grid-template-areas: "photo body source"; min-block-size: 220px; }
.view-large .pw-price { font-size: 26px; }
.view-large .pw-headline { font-size: 18px; }
.view-large .pw-source { flex-direction: column; align-items: flex-start; justify-content: center; border-inline-start: 1px solid var(--pw-line); }
.view-large .pw-mono { inline-size: 44px; block-size: 44px; font-size: 14px; }
/* The column stacks badge, name and arrow; the name must not take up the
   column's height and push the arrow to the bottom. */
.view-large .pw-source-name { flex: none; max-inline-size: 100%; }

@media (max-width: 720px) {
  .view-compact .pw-card, .view-large .pw-card { grid-template-columns: minmax(0, 1fr); grid-template-areas: "photo" "body" "source"; }
  /* Stacked, there is no source column beside the body: the heart takes the
     photo row's empty inline-end corner instead. */
  .view-compact .pw-heart { inset-inline-end: 10px; }
  .view-compact .pw-body { padding-inline-end: 16px; }
  .view-large .pw-photo { aspect-ratio: 4 / 3; block-size: auto; }
}

.pw-views { display: inline-flex; border: 1px solid var(--pw-line-strong); border-radius: 10px; overflow: hidden; margin-inline-start: auto; }
.pw-views button { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 12px; border: 0; background: var(--pw-ground); color: var(--pw-ink-2); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.pw-views button[aria-pressed="true"] { background: var(--pw-brand); color: var(--pw-on-dark); }

/* Admin settings form. */
.pw-settings { display: grid; gap: 24px; max-inline-size: 760px; }
.pw-settings section { display: grid; gap: 14px; }
.pw-settings h2 { font-size: 18px; margin-block: 0; padding-block-end: 6px; border-block-end: 2px solid var(--pw-accent); }
.pw-settings label, .pw-settings .label { font-weight: 600; font-size: 14px; }
.pw-settings input[type="text"], .pw-settings select { inline-size: 100%; min-block-size: 42px; padding-inline: 12px; border: 1px solid var(--pw-line-strong); border-radius: 8px; background: var(--pw-ground); color: var(--pw-ink); font: inherit; }
.pw-settings small { color: var(--pw-muted); font-size: 13px; }

/* Text "New" for layouts that hide the photo badge, so new listings are
   never marked by border colour alone. */
.pw-new-inline { display: none; align-self: flex-start; background: var(--pw-ok); color: var(--pw-on-dark); font-size: 11px; font-weight: 700; padding-block: 1px; padding-inline: 7px; border-radius: 5px; }
.view-compact .pw-new-inline { display: inline-block; }
.pw-badge-market { align-self: flex-start; background: var(--pw-ok); color: var(--pw-on-dark); font-size: 12px; font-weight: 700; padding-block: 2px; padding-inline: 8px; border-radius: 6px; }

/* The results page's sites panel: a column of its own on wide screens; below
   900px, where the layout stacks, one closed line above the listings. */
.pw-sites-toggle { display: none; }
@media (max-width: 900px) {
  .pw-sites-toggle { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-block-size: 44px; padding-block: 10px; padding-inline: 16px; background: var(--pw-ground); border: 1px solid var(--pw-line); border-radius: 12px; font-weight: 700; color: var(--pw-ink); cursor: pointer; list-style: none; }
  .pw-sites-toggle::-webkit-details-marker { display: none; }
  .pw-sites-toggle svg { flex-shrink: 0; color: var(--pw-muted); transition: transform .15s; }
  .pw-sites-panel[open] .pw-sites-toggle { margin-block-end: 10px; }
  .pw-sites-panel[open] .pw-sites-toggle svg { transform: rotate(180deg); }
}
@media (prefers-reduced-motion: reduce) { .pw-sites-toggle svg { transition: none; } }

/* A table wider than a phone scrolls inside its own box, never the page. */
.pw-scroll-x { overflow-x: auto; max-inline-size: 100%; }

/* Narrow single-form pages: sign-in, registration, account, unsubscribe. */
.pw-narrow { max-inline-size: 460px; margin-inline: auto; display: grid; gap: 12px; }
.pw-form { display: grid; gap: 8px; }
.pw-form input { inline-size: 100%; min-block-size: 42px; padding-inline: 12px; border: 1px solid var(--pw-line-strong); border-radius: 8px; background: var(--pw-ground); color: var(--pw-ink); font: inherit; }
.pw-form button { justify-self: start; margin-block-start: 8px; }

/* Admin site list: the order buttons sit side by side, the monogram beside the name. */
.pw-inline { display: inline-block; }
.pw-nowrap { white-space: nowrap; }
.pw-site-cell { display: inline-flex; align-items: center; gap: 8px; }

/* A pound price whose old/new scale could not be decided (prices.py). */
.pw-uncertain { display: inline-grid; place-items: center; inline-size: 18px; block-size: 18px; margin-inline-start: 6px; border-radius: 50%; background: var(--pw-accent); color: var(--pw-on-accent); font-size: 12px; font-weight: 700; cursor: help; vertical-align: middle; }

/* A site's crawl health on /admin/sites (sites.status_of). */
.pw-dot { display: inline-block; inline-size: 10px; block-size: 10px; border-radius: 50%; background: var(--pw-line-strong); vertical-align: middle; }
.pw-dot-green { background: var(--pw-ok); }
.pw-dot-amber { background: var(--pw-accent); }
.pw-dot-red { background: var(--pw-bad); }
.pw-actions { display: flex; flex-wrap: wrap; gap: 8px; }

/* The Visitors page (admin_visitors.html). */
.pw-map { block-size: 420px; border-radius: 12px; border: 1px solid var(--pw-line); }
.pw-visit-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(280px, 1fr)); gap: 16px; }
.pw-inline-search { display: flex; gap: 8px; margin-block-end: 12px; }
.pw-inline-search input { flex: 1; }
/* A notice that is not a failure of the reader's doing: a site the crawler
   could not read this time. */
.flash-warn { background: var(--pw-warn-bg); color: var(--pw-warn); border-color: var(--pw-accent); }
.flash-warn a { color: inherit; font-weight: 600; margin-inline-start: 6px; }

/* The common filter bar (templates/components/filter_bar.html). */
.pw-filters { display: grid; gap: 14px; }
.pw-filter-row { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); }
.pw-filter-row .grow { grid-column: span 2; }
.pw-filters fieldset { border: 1px solid var(--pw-line); border-radius: 10px; padding: 10px 14px; margin: 0; }
.pw-filters legend { font-weight: 700; padding-inline: 6px; }
.pw-filter-family { margin-block-end: 8px; }
.pw-filter-family .checks { margin-inline-start: 24px; margin-block-start: 4px; }
/* The neighbourhood picker: a find box over a scrolling list grouped by
   governorate, each group's name pinned while its rows scroll past. */
.pw-districts-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-block-end: 8px; }
.pw-districts-find { flex: 1 1 220px; min-inline-size: 0; }
.pw-districts-picked { font-size: 13px; }
.pw-districts-list { max-block-size: 280px; overflow: auto; border: 1px solid var(--pw-line); border-radius: 8px; padding-inline: 10px; padding-block-end: 8px; margin-block-end: 6px; }
.pw-districts-head { position: sticky; inset-block-start: 0; z-index: 1; background: var(--pw-ground); font-weight: 700; font-size: 13px; color: var(--pw-muted); padding-block: 8px 4px; }
.pw-districts-group .checks { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px 14px; }
.pw-districts-group .check small { font-size: 11.5px; }
.pw-districts [hidden] { display: none; }
.pw-span-all { grid-column: 1 / -1; }
@media (max-width: 600px) { .pw-filter-row .grow { grid-column: auto; } }

/* The results page (spec: results layout §3): one search bar, its active
   chips, the quick chips and the results line. One column: the old sites
   side panel is gone. */
.pw-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.pw-link { background: none; border: 0; padding: 0; color: var(--pw-link); font: inherit; font-weight: 600; text-decoration: underline; cursor: pointer; }

/* The panels' sheets hang from the bar, not from their buttons, so a sheet
   opened from the last button can never run past the page's edge. */
.pw-searchbar { position: sticky; inset-block-start: 0; z-index: 30; display: flex; flex-wrap: wrap; gap: 8px; padding-block: 10px; background: var(--pw-surface); }
.pw-bar-panel > summary { list-style: none; }
.pw-bar-panel > summary::-webkit-details-marker { display: none; }
.pw-bar-button { display: inline-flex; align-items: center; gap: 6px; min-block-size: 40px; padding-inline: 16px; border-radius: 999px; border: 1px solid var(--pw-line-strong); background: var(--pw-ground); color: var(--pw-ink); font-weight: 600; font-size: 14px; white-space: nowrap; cursor: pointer; }
.pw-bar-button::after { content: "\25BE"; font-size: 11px; color: var(--pw-muted); }
.pw-bar-panel[open] > .pw-bar-button { border-color: var(--pw-brand); }
.pw-bar-button.pw-active { background: var(--pw-accent); border-color: var(--pw-accent); color: var(--pw-on-accent); }
.pw-bar-button.pw-active::after { color: var(--pw-brand); }
/* As with the menus: a fixed bottom sheet must not be drawn while closed. */
.pw-bar-panel:not([open]) > .pw-bar-sheet { display: none; }
.pw-bar-sheet { position: absolute; z-index: 35; inset-block-start: 100%; inset-inline-start: 0; inline-size: min(620px, 100%); max-block-size: 70vh; overflow: auto; padding: 16px; background: var(--pw-ground); border: 1px solid var(--pw-line-strong); border-radius: 14px; box-shadow: 0 14px 34px rgba(15, 61, 51, .18); }
/* A short menu (Deal): as wide as its words, one row per choice, the current
   one ticked. The radio itself is hidden; the row is the target. */
.pw-bar-sheet.pw-menu-sheet { inline-size: max-content; min-inline-size: 190px; padding: 6px; }
.pw-choice { display: flex; align-items: center; gap: 8px; min-block-size: 42px; padding-inline: 12px; border-radius: 8px; cursor: pointer; font-weight: 600; }
.pw-choice:hover, .pw-choice:focus-within { background: var(--pw-surface); }
.pw-choice input { position: absolute; opacity: 0; pointer-events: none; }
.pw-choice span::before { content: ""; display: inline-block; inline-size: 18px; }
.pw-choice input:checked + span { color: var(--pw-brand); }
.pw-choice input:checked + span::before { content: "\2713"; }
/* The "⋯" menu: the buttons that did not fit, each opening in place. */
.pw-overflow > .pw-bar-button::after { content: none; }
.pw-overflow > .pw-bar-button { font-size: 18px; letter-spacing: 1px; }
.pw-bar-sheet.pw-overflow-list { inset-inline-start: auto; inset-inline-end: 0; inline-size: min(460px, 100%); padding: 6px; }
.pw-overflow-list .pw-bar-panel { border-block-end: 1px solid var(--pw-line); }
.pw-overflow-list .pw-bar-panel:last-child { border-block-end: 0; }
.pw-overflow-list .pw-bar-button { display: flex; justify-content: space-between; inline-size: 100%; border: 0; border-radius: 8px; background: transparent; }
.pw-overflow-list .pw-bar-button.pw-active { background: var(--pw-warn-bg); }
.pw-overflow-list .pw-bar-panel > .pw-bar-sheet { position: static; inline-size: auto; max-block-size: none; overflow: visible; box-shadow: none; border: 0; border-radius: 0; padding-block: 4px 12px; padding-inline: 12px; }
.pw-checks-column { flex-direction: column; align-items: flex-start; }
.pw-bar-actions { position: sticky; inset-block-end: -16px; display: flex; justify-content: flex-end; padding-block: 12px 0; background: var(--pw-ground); }
.pw-filter-group { border: 1px solid var(--pw-line); border-radius: 10px; padding: 10px 14px; margin-block: 14px 0; margin-inline: 0; }

.pw-active-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-block-end: 10px; }
.pw-active-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 32px; padding-inline: 12px; border-radius: 999px; background: var(--pw-ground); border: 1px solid var(--pw-accent); color: var(--pw-ink); font-size: 13px; font-weight: 600; text-decoration: none; max-inline-size: 100%; overflow-wrap: anywhere; }
.pw-active-chip:hover { background: var(--pw-warn-bg); }

.pw-quick { display: flex; flex-wrap: wrap; gap: 8px; margin-block: 4px 12px; }
.pw-quick-chip { display: inline-flex; align-items: center; gap: 6px; min-block-size: 36px; padding-inline: 14px; border-radius: 999px; border: 1px solid var(--pw-line-strong); background: var(--pw-ground); color: var(--pw-ink-2); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; }
.pw-quick-chip b { color: var(--pw-muted); font-weight: 700; }
.pw-quick-chip[aria-current="true"] { background: var(--pw-brand); border-color: var(--pw-brand); color: var(--pw-on-dark); }
.pw-quick-chip[aria-current="true"] b { color: var(--pw-accent); }

.pw-results-head { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin-block-start: 8px; }
.pw-results-count { font-weight: 700; font-size: 16px; }
.pw-sort { display: inline-flex; align-items: center; gap: 8px; margin: 0; }
.pw-sort label { margin: 0; font-weight: 600; color: var(--pw-muted); font-size: 14px; }
.pw-sort select { inline-size: auto; min-block-size: 40px; }

.pw-more-results { display: flex; justify-content: center; align-items: center; inline-size: min(360px, 100%); min-block-size: 44px; margin-block: 20px 0; margin-inline: auto; border-radius: 10px; border: 1px solid var(--pw-line-strong); background: var(--pw-ground); color: var(--pw-link); font-weight: 700; text-decoration: none; }
.pw-more-results[aria-busy="true"] { opacity: .6; cursor: progress; }
.pw-empty-results { margin-block-start: 14px; }
.pw-status-line { margin-block: 22px 0; text-align: center; font-size: 13px; color: var(--pw-muted); }
.pw-status-line a { color: var(--pw-muted); }

/* Phones: the bar scrolls sideways in one line, and a panel opens as a
   bottom sheet above the tab bar (64px + the home indicator's inset). A
   fixed sheet escapes the bar's overflow clipping. */
@media (max-width: 640px) {
  /* The buttons past the edge fade out, so it reads as a row that scrolls;
     the padding lets the last one scroll clear of the fade. */
  .pw-bar-sheet { position: fixed; z-index: 45; inset-inline: 0; inset-block-start: auto; inset-block-end: calc(64px + env(safe-area-inset-bottom, 0px)); inline-size: auto; max-block-size: 70vh; border-radius: 16px 16px 0 0; border-inline: 0; border-block-end: 0; }
  .pw-bar-sheet.pw-menu-sheet { inline-size: auto; padding: 10px; }
  .pw-bar-sheet.pw-overflow-list { inset-inline: 0; inline-size: auto; }
  .pw-results-head .pw-views { margin-inline-start: 0; }
  .pw-more-results { inline-size: 100%; }
}

/* View as: the strip that says whose site this is, and how to leave. */
.pw-view-as-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 8px 16px; padding-block: 8px; padding-inline: 16px; background: var(--pw-accent); color: var(--pw-on-accent); font-weight: 600; text-align: center; }
.pw-view-as-banner a { color: var(--pw-brand); text-decoration: underline; }
.pw-view-as-banner form { display: inline; margin: 0; }
.pw-view-as-banner .pw-btn { background: var(--pw-brand); color: var(--pw-on-dark); border-color: var(--pw-brand); }
/* An unconfirmed address (signup.py): a quieter strip than view-as, since it
   asks the reader to do something in their inbox, not warns of a mode. */
.pw-confirm-banner { display: flex; flex-wrap: wrap; align-items: center; justify-content: center; gap: 6px 14px; padding-block: 8px; padding-inline: 16px; background: var(--pw-warn-bg); color: var(--pw-warn); font-weight: 600; font-size: 14px; text-align: center; }
.pw-confirm-banner form { display: inline; margin: 0; }
.pw-confirm-banner .pw-link { color: var(--pw-warn); text-decoration: underline; font-weight: 700; }
/* The sign-up trap (register.html): off screen rather than display:none,
   which some scripts know to skip. */
.pw-trap { position: absolute; inset-inline-start: -10000px; inline-size: 1px; block-size: 1px; overflow: hidden; }
.pw-view-as-stop { text-align: center; }
.pw-view-as-start { margin-block-end: 14px; }
.pw-view-as-log { inline-size: 100%; border-collapse: collapse; }
.pw-view-as-log th, .pw-view-as-log td { text-align: start; padding-block: 6px; padding-inline: 8px; border-block-end: 1px solid var(--pw-line); }

/* /admin/security: the self-check report. */
.pw-sec-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-block: 16px; padding-block: 14px; padding-inline: 18px; background: var(--pw-ground); border: 1px solid var(--pw-line); border-radius: 12px; }
.pw-sec-when { font-size: 18px; font-weight: 700; }
.pw-sec-counts { display: flex; flex-wrap: wrap; gap: 8px; }
.pw-sec-pill { display: inline-flex; align-items: center; gap: 6px; padding-block: 3px; padding-inline: 10px; border-radius: 999px; font-size: 12px; font-weight: 700; white-space: nowrap; border: 1px solid currentColor; }
.pw-sec-pass { color: var(--pw-ok); }
.pw-sec-warn { color: var(--pw-warn); background: var(--pw-warn-bg); }
.pw-sec-fail { color: var(--pw-on-dark); background: var(--pw-bad); border-color: var(--pw-bad); }
.pw-sec-info { color: var(--pw-muted); }
.pw-sec-area { font-size: 16px; margin-block: 22px 8px; }
.pw-sec-table td { vertical-align: top; }
.pw-sec-status { inline-size: 110px; }
.pw-sec-title { font-weight: 700; }
.pw-sec-message { color: var(--pw-ink-2); font-size: 14px; margin-block-start: 2px; }
.pw-sec-evidence { margin-block: 6px 0; padding-block: 6px; padding-inline: 8px; background: var(--pw-surface); border-radius: 6px; font-size: 11px; white-space: pre-wrap; overflow-wrap: anywhere; max-block-size: 160px; overflow: auto; }
.pw-sec-current td { background: var(--pw-surface); }

/* Sign-in and registration open with the brand's lockup (lageeto-brand v2). */
.pw-hero-logo { display: flex; justify-content: center; margin-block: 28px 8px; }

/* A visitor's results: what an account adds, one quiet line under the bar. */
.pw-guest-hint { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin-block: 4px 12px; padding-block: 10px; padding-inline: 14px; border-radius: 12px; background: var(--pw-ground); border: 1px solid var(--pw-line); border-inline-start: 3px solid var(--pw-accent); color: var(--pw-ink-2); font-size: 14px; }
.pw-guest-hint svg { color: var(--pw-accent); flex-shrink: 0; }
.pw-guest-hint span { flex: 1; min-inline-size: 200px; }

/* Share: beside the heart on the photo; the compact list has no room. */
.pw-share-icon { position: absolute; z-index: 1; inset-block-start: 8px; inset-inline-end: 52px; inline-size: 36px; block-size: 36px; border-radius: 50%; border: 0; background: rgba(255, 255, 255, .92); color: var(--pw-brand); display: grid; place-items: center; cursor: pointer; }
.pw-share-done { color: var(--pw-ok); }
.view-compact .pw-share-icon { display: none; }

/* /ad/<uid>: one advert on our address, what a shared link opens. */
.pw-ad { display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 1fr); gap: 0; background: var(--pw-ground); border: 1px solid var(--pw-line); border-radius: 16px; overflow: hidden; margin-block: 16px; }
.pw-ad-photo { position: relative; min-block-size: 320px; background: var(--pw-surface); display: grid; place-items: center; color: var(--pw-muted); }
.pw-ad-photo img { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.pw-ad-body { display: flex; flex-direction: column; gap: 8px; padding-block: 22px; padding-inline: 24px; }
.pw-ad-title { font-size: 22px; margin: 0; }
.pw-ad-text { color: var(--pw-ink-2); font-size: 14px; white-space: pre-line; overflow-wrap: anywhere; }
.pw-ad-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-block-start: 6px; }
.pw-ad-source { font-size: 12px; }
@media (max-width: 720px) { .pw-ad { grid-template-columns: minmax(0, 1fr); } .pw-ad-photo { min-block-size: 0; aspect-ratio: 4 / 3; } }

/* The cookie notice: one quiet strip at the foot of the screen, shown once. */
.pw-cookies { position: fixed; z-index: 60; inset-inline: 12px; inset-block-end: 12px; max-inline-size: 720px; margin-inline: auto; display: flex; align-items: center; gap: 12px; padding-block: 10px; padding-inline: 14px; background: var(--pw-ground); color: var(--pw-ink-2); border: 1px solid var(--pw-line-strong); border-radius: 12px; box-shadow: 0 6px 24px rgba(15, 61, 51, .14); font-size: 13px; }
.pw-cookies[hidden] { display: none; }
.pw-cookies span { flex: 1; }
@media (max-width: 640px) {
  /* Above the tab bar when signed in. */
  body:not([data-guest]) .pw-cookies { inset-block-end: calc(72px + env(safe-area-inset-bottom, 0px)); }
}

@media (max-width: 640px) {
  .pw-header { padding-inline: 14px; gap: 10px; }
  .pw-header .pw-header-register { display: none; }
}

/* Contact us, and the admin's list of messages. */
.pw-footer-links a { color: var(--pw-link); }
.pw-contact-sent { font-size: 16px; color: var(--pw-ok); font-weight: 600; }
.pw-messages td { vertical-align: top; }
.pw-message-meta { inline-size: 230px; font-size: 13px; display: grid; gap: 4px; }
.pw-message-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.pw-form textarea { inline-size: 100%; padding-block: 10px; padding-inline: 12px; border: 1px solid var(--pw-line-strong); border-radius: 8px; background: var(--pw-ground); color: var(--pw-ink); font: inherit; resize: vertical; }

.pw-sprite { position: absolute; inline-size: 0; block-size: 0; overflow: hidden; }