/* Shared components (js/core/components.js, review-card.js). Built from the design's own pieces.
   Direction-safe (docs/I18N_V4.md): logical sides and --flip (tokens.css), so English (dir=ltr) mirrors them. */

/* ---------- Cards and tiles ---------- */
.card {
  background: var(--card); border-radius: var(--r-card); padding: var(--card-pad);
  display: flex; flex-direction: column; gap: 16px; min-width: 0;
}
.card.xl { border-radius: var(--r-shell); padding: 24px; }
.card.tight { gap: 10px; }
.card-head { display: flex; justify-content: space-between; align-items: flex-end; gap: 12px; flex-wrap: wrap; }
.card-title { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.card-title-main { display: flex; align-items: center; gap: 8px; font-size: var(--fs-section); }
.card-title-main .ph, .card-title-main .ph-fill { font-size: 18px; color: var(--ac); }
/* Fills (tile colour rule and the design's light tiles); dark text on light fills */
.tone-accent { background: var(--ac); color: var(--ink); }
.tone-white { background: var(--white); color: var(--ink); }
.tone-pale { background: var(--pale); color: var(--ink); }
.tone-grey { background: var(--grey); color: var(--ink); }
.tone-grey-2 { background: var(--grey-2); color: var(--ink); }
.tone-raised { background: var(--raised); color: var(--text); }
.tone-inner { background: var(--card-2); color: var(--text); }
.tone-dark { background: var(--card); color: var(--text); }
.tile {
  border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column;
  justify-content: space-between; gap: 10px; text-align: right; border: none; min-width: 0; /* dir-ok: the ltr rule below
  ("start" would follow a dir=auto/ltr child, e.g. a Latin line, to the left on an Arabic page) */
  color: inherit; text-decoration: none;
}
:where(:root[dir="ltr"]) .tile { text-align: left; }
button.tile, a.tile { cursor: pointer; transition: transform var(--t-fast) var(--ease); }
button.tile:hover, a.tile:hover { transform: translateY(-2px); color: inherit; }
/* light tiles keep dark text (.tile's colour: inherit came after the tones; fixed by the ask builder) */
.tile.on-light, button.tile.on-light:hover, a.tile.on-light:hover { color: var(--ink); }
.inner { background: var(--card-2); border-radius: var(--r-inner); padding: 12px 14px; }
.tip {
  display: flex; gap: 10px; padding: 12px 14px; border-radius: var(--r-inner); background: var(--card-2);
  font-size: var(--fs-ui); line-height: 1.6; color: var(--soft-2);
}
.tip > .ph, .tip > .ph-fill { font-size: 20px; flex: none; color: var(--ac); }
.divider { height: 1px; background: var(--divider); border: none; margin: 0; }
.legend { display: flex; gap: 20px; flex-wrap: wrap; font-size: var(--fs-small); color: var(--muted); }
.legend-item { display: flex; align-items: center; gap: 6px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; background: var(--ac); flex: none; }
.swatch.dot { border-radius: 50%; width: 9px; height: 9px; }
.swatch.line { width: 18px; height: 3px; border-radius: 2px; }
.swatch.dash { width: 18px; height: 0; border-radius: 0; background: none; border-top: 2px dashed var(--muted-2); }
.swatch.bad { background: var(--bad); }
.swatch.mixed { background: var(--muted-2); }
.swatch.area { background: var(--dot-off); }

/* ---------- KPI tile (ring + number + sub + delta) ---------- */
.kpi {
  text-align: right; border: none; color: var(--text); background: var(--card); border-radius: var(--r-card);
  padding: 18px 20px 20px; display: flex; flex-direction: column; gap: 22px; min-width: 0; text-decoration: none;
  transition: background var(--t-fast); /* dir-ok: the ltr rule below (as .tile) */
}
:where(:root[dir="ltr"]) .kpi { text-align: left; }
button.kpi:hover, a.kpi:hover { background: var(--card-hover); color: var(--text); }
.kpi-top { display: flex; align-items: center; gap: 12px; }
.kpi-label { font-size: var(--fs-body); }
.kpi-body { display: flex; flex-direction: column; gap: 6px; }
.kpi-sub { font-size: var(--fs-meta); color: var(--muted); display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.kpi .num .unit { font-size: 18px; }
.delta { white-space: nowrap; }
.delta.good { color: var(--good-text); }
.delta.bad { color: var(--bad-text); }
.delta.same { color: var(--muted); }
.kpi.tone-white .kpi-sub, .kpi.tone-accent .kpi-sub { color: var(--ink-3); }
/* kpiTile tone 'white' / 'accent' (phone tiles): the fill must beat .kpi's dark background (and its hover) */
.kpi.tone-white, button.kpi.tone-white:hover, a.kpi.tone-white:hover { background: var(--white); color: var(--ink); }
.kpi.tone-accent, button.kpi.tone-accent:hover, a.kpi.tone-accent:hover { background: var(--ac); color: var(--ink); }
.kpi.tone-white .delta.good, .kpi.tone-accent .delta.good { color: var(--good-ink); }
.kpi.tone-white .delta.bad, .kpi.tone-accent .delta.bad { color: var(--bad-ink); }

/* Ring (design: 48 px, r 21, stroke 4, dasharray pct*131.9) */
.ring { position: relative; width: 48px; height: 48px; flex: none; }
/* the fill starts at the top and runs with the reading direction: anticlockwise in Arabic, clockwise in English */
.ring svg { position: absolute; inset: 0; width: 100%; height: 100%; transform: rotate(-90deg) scaleY(-1); overflow: visible; }
:root[dir="ltr"] .ring svg { transform: rotate(-90deg); }
.ring-track { fill: none; stroke: var(--raised); stroke-width: 4; }
.ring-fill { fill: none; stroke: var(--ac); stroke-width: 4; stroke-linecap: round; transition: stroke-dasharray var(--m-dur, var(--t-bar)) var(--ease); }
.ring-fill.bad { stroke: var(--bad); }
.ring-ic {
  position: absolute; inset: 9px; border-radius: 50%; background: var(--white); color: var(--ink);
  display: grid; place-items: center;
}
.ring-ic .ph, .ring-ic .ph-fill { font-size: 16px; }
.tone-white .ring-track, .tone-accent .ring-track { stroke: var(--light-track); }

/* ---------- Segmented control (pill on #262626) and filter chips ---------- */
.seg { display: inline-flex; gap: 6px; background: var(--card-2); border-radius: var(--r-pill); padding: 4px; max-width: 100%; }
.seg button {
  height: 36px; padding: 0 14px; border-radius: var(--r-pill); border: none; font-size: var(--fs-meta);
  white-space: nowrap; background: transparent; color: var(--text); transition: background var(--t-fast), color var(--t-fast);
}
.seg button[aria-pressed="true"] { background: var(--white); color: var(--ink); }
.fchips { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.fchip {
  height: 42px; padding: 0 18px; border-radius: var(--r-pill); border: none; font-size: var(--fs-ui);
  white-space: nowrap; background: var(--card); color: var(--text); flex: none;
  display: inline-flex; align-items: center; gap: 6px; text-decoration: none;
  transition: background var(--t-fast), color var(--t-fast);
}
.fchip:hover { color: var(--text); }
.fchip[aria-pressed="true"], .fchip[aria-current="true"] { background: var(--white); color: var(--ink); }
.fchip .count { font-family: var(--font-num); opacity: .6; }
.fchip .ph { font-size: 16px; }

/* ---------- Period switch ---------- */
.period { position: relative; }
.period-btn {
  white-space: nowrap; flex: none; display: flex; align-items: center; gap: 8px; height: 44px; padding: 0 18px;
  border-radius: var(--r-pill); border: none; background: var(--card); color: var(--text); font-size: var(--fs-ui);
}
.period-btn .ph { font-size: 14px; }
.period-menu {
  position: absolute; top: 52px; inset-inline-end: 0; z-index: 15; background: var(--card); border-radius: var(--r-menu);
  padding: 6px; display: flex; flex-direction: column; min-width: 170px; box-shadow: var(--float-shadow);
}
.period-menu[hidden] { display: none; }
.period-menu button {
  height: 42px; padding: 0 14px; border: none; border-radius: var(--r-menu-item); text-align: right;
  font-size: var(--fs-ui); display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: transparent; color: var(--text); /* dir-ok: the ltr rule below (as .tile) */
}
:where(:root[dir="ltr"]) .period-menu button { text-align: left; }
.period-menu button[aria-checked="true"] { background: var(--card-2); }
.period-menu .ph { font-size: 15px; color: var(--ac); }
.period-chips .fchip { height: 40px; padding: 0 16px; font-size: var(--fs-meta); }
.period-chips .fchip[aria-pressed="false"] { background: var(--card); }
/* "auto": the menu on desktop/tablet, the chip row on a phone */
.period-auto .period-chips { display: none; }
@media (max-width: 700px) {
  .period-auto .period { display: none; }
  .period-auto .period-chips { display: flex; }
  .period-chips .fchip { height: 44px; } /* the most used control: a full 44 px tap target on a phone */
  /* English names are longer ("Last 3 months"): the four do not fit one row, so two even rows of two on every page
     (as the dashboard, pages/dashboard.css), never a sideways row with «All time» cut off. Arabic: one row, as before */
  :root[dir="ltr"] .period-chips.hscroll { flex-wrap: wrap; overflow: visible; }
  :root[dir="ltr"] .period-chips .fchip { flex: 1 1 calc(50% - 3px); justify-content: center; padding: 0 12px; }
}

/* ---------- Tags (+/− topics) and badges ---------- */
.tags { display: flex; flex-wrap: wrap; gap: 6px; }
.tag { font-size: var(--fs-small); padding: 3px 10px; border-radius: var(--r-pill); white-space: nowrap; }
.tag.good { background: var(--tag-good); color: var(--good-text); }
.tag.bad { background: var(--tag-bad); color: var(--bad-text); }
.tag.mixed { background: var(--tag-mixed); color: var(--soft); }
.tag.plain { background: var(--track); color: var(--soft-2); }
.on-light .tag.good { color: var(--good-ink); }
.on-light .tag.bad { color: var(--bad-ink); }
.on-light .tag.mixed { background: rgba(0, 0, 0, .08); color: var(--ink-2); }
.badge {
  display: inline-flex; align-items: center; gap: 5px; font-size: var(--fs-small); padding: 2px 9px;
  border-radius: var(--r-pill); white-space: nowrap; background: var(--track); color: var(--soft-2); line-height: 1.6;
}
.badge .ph, .badge .ph-fill { font-size: 13px; }
.badge.now { background: var(--bad); color: var(--ink); }
.badge.soon { background: rgba(255, 255, 255, .12); color: var(--text); }
.badge.good { background: var(--ac); color: var(--ink); }
.badge.honest { background: transparent; border: 1px solid var(--raised); color: var(--muted); padding: 1px 9px; }
.badge.beta { background: transparent; border: 1px solid var(--raised); color: var(--ac); padding: 1px 9px; }
.on-light .badge, .on-light .badge.now, .on-light .badge.soon { background: rgba(0, 0, 0, .1); color: var(--ink); }
.on-light .badge.honest, .on-light .badge.beta { background: transparent; border-color: rgba(0, 0, 0, .25); color: var(--ink-2); }
.badge.old { color: var(--muted-2); }

/* ---------- Alert cards (design "V4 Start": wrong code / locked / trial ended / switched off) + error box ---------- */
.alert { display: flex; flex-direction: column; gap: 12px; padding: 16px; border-radius: var(--r-tile-sm); }
.alert-h { display: flex; gap: 10px; align-items: flex-start; }
.alert-ic { width: 36px; height: 36px; border-radius: 50%; display: grid; place-items: center; flex: none; }
.alert-ic .ph, .alert-ic .ph-fill { font-size: 18px; }
.alert-title { display: block; font-weight: 500; font-size: var(--fs-body); margin-bottom: 2px; }
.alert-text { margin: 0; font-size: var(--fs-meta); line-height: 1.6; }
.alert-actions { display: flex; gap: 8px; flex-wrap: wrap; }
.alert.red { background: var(--alert-red-bg); color: var(--alert-red-text); }
.alert.red .alert-ic { background: var(--bad); color: var(--ink); }
.alert.red .alert-title { color: var(--bad-text); }
.alert.amber { background: var(--alert-amber-bg); color: var(--alert-amber-text); }
.alert.amber .alert-ic { background: var(--alert-amber); color: var(--ink); }
.alert.grey { background: var(--card-2); color: var(--soft); }
.alert.grey .alert-ic { background: var(--dot-off); color: var(--text); }
.alert.grey .alert-title { color: var(--text); }
.btn-wa { background: var(--whatsapp); color: var(--ink); font-weight: 500; height: 48px; }
.btn-wa:hover { color: var(--ink); filter: brightness(1.05); }

/* ---------- Empty state, stub ---------- */
.empty {
  padding: 40px 24px; text-align: center; border-radius: var(--r-card); background: var(--card); color: var(--muted);
  font-size: var(--fs-body); display: flex; flex-direction: column; align-items: center; gap: 12px;
}
.empty-ic {
  width: 52px; height: 52px; border-radius: 50%; background: var(--card-2); color: var(--ac);
  display: grid; place-items: center;
}
.empty-ic .ph, .empty-ic .ph-fill { font-size: 22px; }
.empty-title { color: var(--text); font-size: 18px; }
.empty-text { max-width: 420px; line-height: 1.7; font-size: var(--fs-ui); }
.stub { min-height: 260px; justify-content: center; }
.stub-route { font-family: var(--font-num); font-size: var(--fs-meta); color: var(--muted-2); direction: ltr; }
.bare-center { min-height: 100vh; min-height: 100dvh; display: grid; place-items: center; padding: 20px; }
.bare-center > * { width: min(460px, 100%); }

/* ---------- Skeleton (the motion pass adds the shimmer) ---------- */
.sk { background: var(--card); border-radius: var(--r-card); padding: var(--card-pad); display: flex; flex-direction: column; gap: 12px; }
.sk-line { height: 14px; border-radius: var(--r-pill); background: var(--card-2); }
.sk-line:nth-child(3n+1) { width: 60%; }
.sk-line:nth-child(3n+2) { width: 90%; }
.sk-line:nth-child(3n) { width: 75%; }
.sk-block { min-height: 150px; }
.sk-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; }

/* ---------- Sheet: side drawer (desktop, from the design) / bottom sheet (phone) ---------- */
.scrim {
  position: fixed; inset: 0; z-index: 30; background: rgba(0, 0, 0, .6); opacity: 0;
  transition: opacity var(--t-sheet) var(--ease);
}
.scrim.open { opacity: 1; }
.sheet {
  position: fixed; top: 12px; bottom: 12px; inset-inline-end: 12px; z-index: 31; width: min(460px, calc(100vw - 24px));
  overflow-y: auto; overscroll-behavior: contain; background: var(--card); border-radius: var(--r-sheet); padding: 24px;
  display: flex; flex-direction: column; gap: 12px; transform: translateX(calc(-110% * var(--flip)));
  transition: transform var(--t-sheet) var(--ease); outline: none;
}
.sheet.open { transform: none; }
.sheet-head { display: flex; align-items: flex-start; gap: 10px; }
.sheet-title { flex: 1; display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.sheet-title-main { font-size: 24px; line-height: 1.35; }
.sheet-sub { font-size: var(--fs-ui); color: var(--muted); }
.sheet-close {
  width: 44px; height: 44px; border: none; border-radius: 50%; background: var(--white); color: var(--ink);
  display: grid; place-items: center; flex: none;
}
.sheet-close .ph { font-size: 18px; }
.sheet-body { display: flex; flex-direction: column; gap: 12px; }
.sheet-foot { margin-top: auto; display: flex; gap: 8px; padding-top: 4px; }
@media (max-width: 700px) {
  .sheet {
    top: auto; left: 10px; right: 10px; bottom: 10px; width: auto; max-height: 80vh; max-height: 80dvh;
    padding: 22px; transform: translateY(110%);
    padding-bottom: max(22px, env(safe-area-inset-bottom));
  }
  .sheet.open { transform: none; }
  .sheet-title-main { font-size: 20px; }
}
body.sheet-open { overflow: hidden; }

/* ---------- Review card ---------- */
.rcard {
  border-radius: var(--r-card); padding: 18px 20px; display: flex; flex-direction: column; gap: 10px;
  background: var(--card); color: var(--text); min-width: 0;
}
.rcard.inner { background: var(--card-2); border-radius: 18px; padding: 16px; }
.rcard.hot { background: var(--white); color: var(--ink); }
.rcard.accent { background: var(--ac); color: var(--ink); }
.rcard.highlight { outline: 2px solid var(--ac); outline-offset: 0; }
.rcard-head { display: flex; align-items: center; gap: 10px; }
.rcard-av {
  width: 38px; height: 38px; border-radius: 50%; display: grid; place-items: center; font-size: var(--fs-body);
  flex: none; background: var(--raised); color: var(--text);
}
.rcard.hot .rcard-av, .rcard.accent .rcard-av { background: #000; color: var(--text); }
.rcard-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rcard-author { font-size: var(--fs-body); text-align: start; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* English: a name in Arabic letters stays by the avatar (the reading side). The <bdi> is a flex item, so it takes the
   name's own direction and "start" would push it to the far side. Arabic keeps "start", as before. */
:root[dir="ltr"] .rcard-author { text-align: left; }
.rcard-meta { font-size: var(--fs-small); opacity: .65; display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.rcard-side { display: flex; flex-direction: column; align-items: flex-end; gap: 6px; flex: none; }
.stars { font-size: var(--fs-ui); letter-spacing: 1px; white-space: nowrap; }
.stars .off { opacity: .25; }
.rcard-text { margin: 0; font-size: var(--fs-body); line-height: 1.7; text-align: start; overflow-wrap: anywhere; }
.rcard-text.clamp-5 { -webkit-line-clamp: 5; line-clamp: 5; }
.rcard-empty { font-size: var(--fs-ui); opacity: .55; }
.rcard-reply {
  display: flex; flex-direction: column; gap: 6px; padding: 12px 14px; border-radius: var(--r-inner);
  background: var(--card-2); font-size: var(--fs-ui); line-height: 1.7;
}
.rcard.inner .rcard-reply { background: var(--card); }
.rcard.hot .rcard-reply, .rcard.accent .rcard-reply { background: rgba(0, 0, 0, .07); }
.rcard-reply-h { display: flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); }
.rcard.hot .rcard-reply-h, .rcard.accent .rcard-reply-h { color: var(--ink-3); }
.rcard-reply-h .ph { font-size: 14px; }
.rcard-reply p { margin: 0; text-align: start; overflow-wrap: anywhere; }
.rcard-actions { display: flex; gap: 8px; padding-top: 4px; flex-wrap: wrap; }
.rcard-actions .btn { height: 40px; padding: 0 16px; font-size: var(--fs-meta); }
.rcard-actions .btn-link { background: transparent; color: inherit; padding: 0 14px; }
.rcard-actions .btn-link:hover { color: inherit; text-decoration: underline; }
.rcard .btn-open { background: var(--ac); color: var(--ink); }
.rcard.hot .btn-open, .rcard.accent .btn-open { background: #000; color: var(--text); }
@media (max-width: 700px) {
  .rcard { border-radius: var(--r-tile); padding: 14px 16px; gap: 8px; }
  .rcard-av { width: 34px; height: 34px; font-size: var(--fs-ui); }
  .rcard-author { font-size: var(--fs-ui); }
  .rcard-text { font-size: var(--fs-ui); }
  .stars { font-size: var(--fs-meta); }
  .rcard .tag { font-size: var(--fs-tiny); padding: 3px 9px; }
  .rcard-actions .btn { height: 44px; }
}

/* ---------- «تحتاج رد»: the one quiet line before the OLD bad reviews (core/old-replies.js): grey, never red ---------- */
.old-line {
  display: flex; align-items: center; gap: 10px; width: 100%; min-height: 48px; padding: 10px 16px;
  border: 1px solid var(--raised); border-radius: var(--r-inner); background: transparent; color: var(--muted);
  font: inherit; font-size: var(--fs-ui); line-height: 1.6; text-align: start; cursor: pointer; min-width: 0;
}
.old-line:hover { color: var(--text); border-color: var(--dot-off); }
.old-line .ph { font-size: 17px; flex: none; color: var(--muted-2); }
.old-line-t { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.old-line.open { cursor: default; border-style: dashed; color: var(--muted-2); }
.old-line.open:hover { color: var(--muted-2); border-color: var(--raised); }
.rcard-old .rcard-meta time { white-space: nowrap; }
.rcard.rcard-old .btn-open { background: var(--raised); color: var(--text); }

/* ---------- Phone «المزيد» sheet rows reuse .nav-item; their count badge ---------- */
.more-list { display: flex; flex-direction: column; gap: 4px; }
.more-list .nav-item { height: 56px; font-size: var(--fs-body); }
.more-place { margin-top: 8px; }

/* Phone KPI tile (design "V4 iPhone": 38 px ring, icon without the white disc, 14/16 padding, min-height 140) */
@media (max-width: 700px) {
  .kpi { border-radius: var(--r-card); padding: 14px 16px; gap: 14px; min-height: 140px; justify-content: space-between; }
  .kpi .ring { width: 38px; height: 38px; }
  .kpi .ring-track, .kpi .ring-fill { stroke-width: 5; }
  .kpi .ring-ic { inset: 0; background: transparent; color: inherit; }
  .kpi .ring-ic .ph, .kpi .ring-ic .ph-fill { font-size: 15px; }
  .kpi-top { gap: 8px; }
  .kpi-label { font-size: var(--fs-meta); }
  .kpi .num .unit { font-size: 15px; opacity: .55; }
  .kpi-sub { font-size: var(--fs-small); }
}

/* ---------- Map tiles (js/core/leaflet.js) ----------
   OpenStreetMap's light standard tiles turned into the design's dark map. Only the tile layer is filtered:
   pins, the dashed circle, tooltips, the zoom buttons and the attribution are other layers and keep their colours. */
/* grayscale(1): like the design's dark map, no colour on the land, so the accent green stays the only green */
.leaflet-layer.map-tiles-dark { filter: invert(1) hue-rotate(180deg) grayscale(1) brightness(.78); }
/* «© OpenStreetMap contributors» is English: keep it left-to-right inside the RTL page (else the © jumps to the end) */
.leaflet-container .leaflet-control-attribution { direction: ltr; unicode-bidi: isolate; }
/* Leaflet moves a tooltip only by transform. In this right-to-left page its starting spot is the pane's RIGHT edge,
   so without left: 0 every name label sat one label-width to the left of its pin. */
.leaflet-container .leaflet-tooltip { left: 0; top: 0; /* dir-ok: Leaflet places it from the left in both */ }

/* ---------- The language switch (components.js langSwitch): one small pill, «English» / «العربية» ----------
   In the shell's desktop header (as tall as the bell), the phone top bar (text only) and the login panel's top row. */
.lang-pill {
  flex: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; height: var(--hit);
  padding: 0 16px; border: none; border-radius: var(--r-pill); background: var(--card); color: var(--text);
  font-size: var(--fs-meta); white-space: nowrap; text-decoration: none; transition: background var(--t-fast);
}
.lang-pill:hover { background: var(--card-hover); color: var(--text); }
.lang-pill .ph { font-size: 16px; color: var(--muted); }
.hdr-lang { height: 52px; padding: 0 18px; }
.st-brand .lang-pill { margin-inline-start: auto; background: var(--card-2); }
@media (max-width: 700px) {
  .ptop-lang { padding: 0 14px; }
  .ptop-lang .ph { display: none; }
}

/* ---------- The quiet «new reviews» check (js/core/auto-refresh.js): one small line by «آخر تحديث» / the page title ---------- */
.auto-rf { display: inline-flex; align-items: center; gap: 6px; font-size: var(--fs-small); color: var(--muted); transition: opacity .3s ease; }
.auto-rf[hidden] { display: none; }
.auto-rf .ph, .auto-rf .ph-fill { font-size: 14px; color: var(--ac); flex: none; }
.auto-rf.is-found { color: var(--text); }
.auto-rf.is-out { opacity: 0; }
.page-head-text > .auto-rf { margin-top: 4px; align-self: flex-start; }
.auto-rf-btn { border: 0; background: none; padding: 0; font: inherit; color: var(--text); text-decoration: underline; cursor: pointer; }
@media (prefers-reduced-motion: reduce) { .auto-rf { transition: none; } }
html[data-motion="reduce"] .auto-rf { transition: none; }