/* AppIraqi — refinements on top of app.css: honest empty states, launch mode, in-place filters,
   the product page actions, and the small motions that tie them together.
   Timing: 150–200 ms for feedback on a click, 250–350 ms when layout changes, 400–560 ms when something travels.
   Every animation here is off under "reduce motion". */

/* ---------- Text direction: a Latin tagline on an Arabic page (or the reverse) keeps its own punctuation ---------- */
.p-desc, .p-head .t-lead, .b-head-lg .t-lead, .spot-tag, .mini .s, .aotd-body .t-muted, .b-bio, .mb-name, .opp .d { unicode-bidi: plaintext; }
[dir="rtl"] :is(.p-desc, .p-head .t-lead, .b-head-lg .t-lead, .spot-tag, .mini .s, .aotd-body .t-muted, .b-bio, .opp .d) { text-align: right; }
[dir="ltr"] :is(.p-desc, .p-head .t-lead, .b-head-lg .t-lead, .spot-tag, .mini .s, .aotd-body .t-muted, .b-bio, .opp .d) { text-align: left; }

/* ---------- Categories: the count on its own line, empty categories quieter ---------- */
.cat-tile .cat-count { display: block; margin-top: 2px; }
.cat-tile.is-empty { background: transparent; box-shadow: none; padding-block: var(--space-3); }
.cat-tile.is-empty .cat-name { color: var(--ink-2); font-weight: 500; }
.cat-tile.is-empty .cat-icon { width: 40px; height: 40px; }
.cat-tile.is-empty:hover .cat-name { color: var(--ink); }

/* ---------- Home: no rank on the spotlight until people vote ---------- */
.spot[data-unranked] .spot-rank { display: none; }

/* ---------- Launch mode: an open place for the next product or builder ---------- */
.open-slot { display: grid; justify-items: center; align-content: center; text-align: center; gap: var(--space-2); min-height: 100%; padding: var(--space-6) var(--space-5);
  border: 1.5px dashed var(--line-strong); border-radius: var(--radius-lg); background: color-mix(in srgb, var(--surface) 55%, transparent); color: var(--ink);
  transition: border-color var(--dur-fast, .15s), background var(--dur-base, .25s) var(--ease-out, ease); }
.open-slot:hover { border-color: var(--lapis); background: var(--surface); text-decoration: none; }
.open-slot strong { font-size: 17px; }
.open-slot .btn { margin-top: var(--space-2); }
.open-tiles { display: grid; grid-template-columns: repeat(3, 22px); gap: 4px; direction: ltr; margin-bottom: var(--space-2); }
.open-tiles i { height: 12px; border-radius: 3px; background: var(--brick-1); }
.open-tiles i:nth-child(4), .open-tiles i:nth-child(6) { background: var(--brick-2); }
.open-tiles i.g { background: var(--gold); }
@media (prefers-reduced-motion: no-preference) {
  /* The tiles lay themselves once when the card comes into view; the gold one lands last. */
  .rf .open-slot .open-tiles i { opacity: 0; }
  .rf .open-slot.is-in .open-tiles i { animation: rf-lay .5s var(--ease-out, ease) forwards; }
  .rf .open-slot.is-in .open-tiles i:nth-child(4) { animation-delay: .07s; }
  .rf .open-slot.is-in .open-tiles i:nth-child(5) { animation-delay: .14s; }
  .rf .open-slot.is-in .open-tiles i:nth-child(6) { animation-delay: .21s; }
  .rf .open-slot.is-in .open-tiles i:nth-child(1) { animation-delay: .32s; }
  .rf .open-slot.is-in .open-tiles i:nth-child(3) { animation-delay: .39s; }
  .rf .open-slot.is-in .open-tiles i.g { animation: rf-drop .7s var(--ease-out, ease) .56s forwards; }
}
@keyframes rf-lay { from { opacity: 0; transform: translateY(-10px); } to { opacity: 1; transform: none; } }
@keyframes rf-drop { from { opacity: 0; transform: translateY(-26px) rotate(-18deg); } 60% { opacity: 1; transform: translateY(2px) rotate(3deg); } to { opacity: 1; transform: none; } }

/* The closing call to action no longer runs into the footer: it is lapis, the footer stays night. */
main > section.band-night:last-child { background: var(--lapis-deep); }

/* ---------- Tab bars that scroll: a soft fade tells you there is more ---------- */
[data-fade] { --rf-fs: 0px; --rf-fe: 0px; --rf-dir: right;
  -webkit-mask-image: linear-gradient(to var(--rf-dir), transparent 0, #000 var(--rf-fs), #000 calc(100% - var(--rf-fe)), transparent 100%);
          mask-image: linear-gradient(to var(--rf-dir), transparent 0, #000 var(--rf-fs), #000 calc(100% - var(--rf-fe)), transparent 100%); }
[dir="rtl"] [data-fade] { --rf-dir: left; }
[data-fade~="start"] { --rf-fs: 28px; }
[data-fade~="end"] { --rf-fe: 28px; }

/* ---------- Explore and Opportunities: filters in place, a sheet on phones ---------- */
.opp-hint { text-align: center; margin-top: var(--space-3); }
[data-listing] .seg a { transition: background var(--dur-fast, .15s), color var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
#results[data-swapping="loading"] .p-card { opacity: .55; transition: opacity .2s; }
.filter-link { transition: background var(--dur-fast, .15s), color var(--dur-fast, .15s); }
.sheet-done { display: none; }
@media (max-width: 959.98px) {
  .filters-toggle[open]::before { content: ""; position: fixed; inset: 0; z-index: 59; background: rgba(6, 13, 31, .45); }
  .filters-toggle[open] > .filters { position: fixed; inset-inline: 0; bottom: 0; z-index: 60; max-height: min(82vh, 720px); overflow-y: auto; overscroll-behavior: contain;
    padding: var(--space-3) var(--space-4) 0; background: var(--surface); border-radius: 20px 20px 0 0; box-shadow: var(--shadow-pop); }
  .filters-toggle[open] > .filters::before { content: ""; justify-self: center; width: 40px; height: 4px; border-radius: 2px; background: var(--line-strong); }
  .filters-toggle[open] .sheet-done { display: inline-flex; position: sticky; bottom: 0; margin-top: calc(-1 * var(--space-2));
    box-shadow: 0 -12px 16px var(--surface); margin-bottom: calc(var(--space-3) + env(safe-area-inset-bottom, 0px)); }
  html:has(.filters-toggle[open] > .filters) { overflow: hidden; }
  @media (prefers-reduced-motion: no-preference) {
    .filters-toggle[open]::before { animation: rf-fade .25s ease; }
    .filters-toggle[open] > .filters { animation: rf-sheet .32s var(--ease-out, ease); }
  }
}
@keyframes rf-fade { from { opacity: 0; } }
@keyframes rf-sheet { from { transform: translateY(100%); } }

/* ---------- Product page ---------- */
/* The vote moved in with the actions, so the header needs only two columns. */
.p-head { grid-template-columns: auto minmax(0, 1fr); }
.p-actions { align-items: center; }
.p-head .p-actions .vote { grid-auto-flow: column; gap: 8px; width: auto; min-width: 0; min-height: 44px; padding: 0 16px; font-size: 16px; }
.p-head .p-actions .vote svg { width: 18px; height: 18px; }
@media (max-width: 720px) {
  /* One clear main button, then vote, save and share in one row. */
  .p-actions > .btn-primary:first-child { flex: 1 0 100%; min-height: 50px; }
  .p-actions > :not(.btn-primary) { flex: 1 1 0; min-width: max-content; }
  .p-actions > :not(.btn-primary) :is(.btn, .vote, form), .p-actions > .share > summary { width: 100%; }
  .p-actions [data-save-label] { position: absolute; width: 1px; height: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
}

.review-box.is-compact { grid-template-columns: minmax(0, 1fr) auto; }
@media (max-width: 720px) { .review-box.is-compact { grid-template-columns: 1fr; } }
.review-empty { display: flex; align-items: center; gap: var(--space-3); flex-wrap: wrap; margin: 0; color: var(--ink-2); }
.review-empty .stars svg { opacity: .45; }

.link-row { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 10px; align-items: center; padding: 8px; margin-inline: -8px; border-radius: var(--radius-sm); color: var(--ink); }
.link-row:hover { background: var(--surface-2); text-decoration: none; }
.link-row > svg { width: 18px; height: 18px; color: var(--ink-3); }
.link-row .lr-go { width: 16px; height: 16px; }
.lr-text { display: grid; min-width: 0; }
.lr-label { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.lr-host { display: block; font-family: var(--font-mono); font-size: 12.5px; color: var(--ink-3); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
[dir="rtl"] .lr-host { text-align: right; }

/* The section tabs: a gold line under the part you are reading. */
.section-nav .inner { position: relative; }
.section-nav a { transition: color var(--dur-fast, .15s), background var(--dur-fast, .15s); }
.section-nav a.is-current { color: var(--ink); }
.rf-ink { position: absolute; bottom: 3px; left: 0; height: 2px; width: 0; border-radius: 2px; background: var(--gold); pointer-events: none; opacity: 0; }
.rf-ink.is-on { opacity: 1; }
@media (prefers-reduced-motion: no-preference) { .rf-ink { transition: transform .4s var(--ease-out, ease), width .4s var(--ease-out, ease), opacity .2s; } }

/* Sticky mini bar: slides up once the header is out of view. */
.mini-bar { position: fixed; inset-inline: 0; bottom: 0; z-index: 35; padding: 10px var(--space-4) calc(10px + env(safe-area-inset-bottom, 0px)); pointer-events: none;
  transform: translateY(115%); visibility: hidden; transition: transform .32s var(--ease-out, ease), visibility 0s .32s; }
.mini-bar.is-on { transform: none; visibility: visible; transition: transform .32s var(--ease-out, ease), visibility 0s; }
.mb-inner { pointer-events: auto; max-width: 620px; margin-inline: auto; display: flex; align-items: center; gap: var(--space-3); padding: 8px; padding-inline-start: 10px;
  background: color-mix(in srgb, var(--surface) 94%, transparent); -webkit-backdrop-filter: blur(12px); backdrop-filter: blur(12px);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-pop); }
.mb-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 700; }
.mini-bar .vote { grid-auto-flow: column; gap: 6px; min-width: 0; min-height: 36px; padding: 0 12px; font-size: 15px; }
.mini-bar .vote svg { width: 16px; height: 16px; }
.mini-bar .btn { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
@media (prefers-reduced-motion: reduce) {
  .mini-bar, .mini-bar.is-on { transform: none; transition: opacity .2s, visibility 0s .2s; opacity: 0; }
  .mini-bar.is-on { opacity: 1; transition: opacity .2s, visibility 0s; }
}

/* Lightbox: the backdrop fades; the picture itself zooms from its thumbnail (refine.js). */
@media (prefers-reduced-motion: no-preference) { .lightbox[open]::backdrop { animation: rf-fade .3s ease; } }

/* ---------- Forms: a button that shows it is working ---------- */
.btn.is-busy { position: relative; color: transparent !important; pointer-events: none; }
.btn.is-busy > * { visibility: hidden; }
.btn.is-busy::after { content: ""; position: absolute; inset: 0; margin: auto; width: 18px; height: 18px; border-radius: 50%;
  border: 2px solid var(--b-fg); border-inline-end-color: transparent; animation: rf-spin .7s linear infinite; }
@media (prefers-reduced-motion: reduce) { .btn.is-busy::after { animation: rf-pulse 1.2s ease-in-out infinite; } }
@keyframes rf-spin { to { transform: rotate(1turn); } }
@keyframes rf-pulse { 50% { opacity: .35; } }

.hint[data-count-for] { font-variant-numeric: tabular-nums; transition: color var(--dur-fast, .15s); }
.hint[data-count-for].is-ok { color: var(--ok); }

@media (prefers-reduced-motion: no-preference) {
  /* A field the server sent back shakes once: twice, 6 px. */
  .input[aria-invalid="true"], .textarea[aria-invalid="true"], .select[aria-invalid="true"] { animation: rf-shake .36s ease 1; }
}
@keyframes rf-shake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }

/* Password fields get an eye to show what you typed. */
.pw-wrap { position: relative; }
.pw-wrap .input { padding-inline-end: 48px; }
.pw-eye { position: absolute; top: 50%; inset-inline-end: 4px; transform: translateY(-50%); width: 40px; height: 40px; display: grid; place-items: center;
  border: 0; background: transparent; color: var(--ink-3); border-radius: var(--radius-sm); cursor: pointer; }
.pw-eye:hover { color: var(--ink); background: var(--surface-2); }
.pw-eye svg { width: 20px; height: 20px; }

/* Contact: topics as chips, optional fields tucked away. */
.chip-radios { border: 0; padding: 0; margin: 0; min-width: 0; display: flex; flex-wrap: wrap; gap: 8px; }
.chip-radios legend { font-weight: 600; font-size: 14.5px; color: var(--ink); padding: 0; margin-bottom: 8px; }
.chip-radios label { position: relative; cursor: pointer; }
.chip-radios input { position: absolute; inset: 0; margin: 0; opacity: 0; cursor: pointer; }
.chip-radios span { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface); color: var(--ink-2); font-size: 14.5px; font-weight: 600; transition: background var(--dur-fast, .15s), border-color var(--dur-fast, .15s), color var(--dur-fast, .15s); }
.chip-radios label:hover span { border-color: var(--line-strong); color: var(--ink); }
.chip-radios input:checked + span { background: var(--accent-soft); border-color: var(--lapis); color: var(--accent); }
.chip-radios input:focus-visible + span { outline: 2px solid var(--lapis); outline-offset: 2px; }
.more-fields > summary { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; list-style: none; color: var(--accent); font-weight: 600; font-size: 15px; }
.more-fields > summary::-webkit-details-marker { display: none; }
.more-fields > summary::before { content: "+"; display: inline-grid; place-items: center; width: 20px; height: 20px; border-radius: 6px; background: var(--accent-soft); font-weight: 700; line-height: 1; transition: transform var(--dur-fast, .15s); }
.more-fields[open] > summary { margin-bottom: var(--space-3); }
.more-fields[open] > summary::before { transform: rotate(45deg); }
@media (prefers-reduced-motion: no-preference) { .more-fields[open] > .form-2 { animation: rf-rise .25s var(--ease-out, ease); } }
@keyframes rf-rise { from { opacity: 0; transform: translateY(-6px); } }

/* ---------- Eligibility check: progress and choice cards ---------- */
.step-bar { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; max-width: 300px; margin-bottom: 4px; }
.step-bar > span { height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.step-bar > span > i { display: block; height: 100%; width: var(--p, 0%); border-radius: inherit; background: var(--gold); }
.step-bar > span.is-done > i { width: 100%; }
@media (prefers-reduced-motion: no-preference) { .step-bar > span > i { transition: width .45s var(--ease-out, ease); } }
.fieldset.choices .check { align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: var(--radius-md); background: var(--surface);
  transition: border-color var(--dur-fast, .15s), background var(--dur-fast, .15s), box-shadow var(--dur-fast, .15s); }
.fieldset.choices .check input { margin-top: 0; }
.fieldset.choices .check:hover { border-color: var(--line-strong); }
.fieldset.choices .check:has(input:checked) { border-color: var(--lapis); background: var(--accent-soft); box-shadow: inset 0 0 0 1px var(--lapis); }
.fieldset.choices .check:has(input:focus-visible) { outline: 2px solid var(--lapis); outline-offset: 2px; }
@media (prefers-reduced-motion: no-preference) { .fieldset.choices .check input:checked { animation: rf-pop .18s var(--ease-out, ease); } }
@keyframes rf-pop { from { transform: scale(.6); } }
.choice-row { display: grid; gap: var(--space-2); grid-template-columns: repeat(auto-fit, minmax(min(100%, 170px), 1fr)); }
.choice-row .check { align-items: flex-start; }
.choice-row .check input { margin-top: 3px; }
.choice-row .check > span { display: grid; gap: 2px; }

/* ---------- Launch checklist: tick it off as you go ---------- */
.ck-progress { display: flex; align-items: center; gap: var(--space-3); font-weight: 600; }
.ck-progress .track { flex: 1; height: 6px; border-radius: 3px; background: var(--surface-2); overflow: hidden; }
.ck-progress .track > span { display: block; height: 100%; width: 0; border-radius: inherit; background: var(--ok); }
.check-list.is-checkable li { display: block; padding: 0; position: relative; transition: border-color var(--dur-base, .25s); }
.check-list.is-checkable li::before { content: none; }
.check-list.is-checkable li:has(input:checked) { border-color: color-mix(in srgb, var(--ok) 45%, var(--line)); }
.ck { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); padding: var(--space-4); cursor: pointer; }
.ck input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.ck-box { position: relative; width: 30px; height: 30px; border-radius: 8px; display: grid; place-items: center; background: var(--accent-soft); color: var(--accent);
  font: 700 14px/1 var(--font-mono); transition: background var(--dur-base, .25s), color var(--dur-base, .25s); }
.ck-box svg { position: absolute; inset: 5px; width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round;
  stroke-dasharray: 20; stroke-dashoffset: 20; }
.ck-n { transition: opacity var(--dur-fast, .15s); }
.ck input:checked + .ck-box { background: var(--ok); color: #fff; }
.ck input:checked + .ck-box .ck-n { opacity: 0; }
.ck input:checked + .ck-box svg { stroke-dashoffset: 0; }
.ck input:focus-visible + .ck-box { outline: 2px solid var(--lapis); outline-offset: 2px; }
.ck-text { min-width: 0; }
.ck-t { font-size: 16.5px; font-weight: 700; -webkit-box-decoration-break: clone; box-decoration-break: clone;
  background: linear-gradient(currentColor, currentColor) no-repeat 0 58% / 0 1.5px; }
[dir="rtl"] .ck-t { background-position: 100% 58%; }
.ck-d { display: block; margin-top: 2px; color: var(--ink-2); font-size: 15px; }
.ck input:checked ~ .ck-text .ck-t { background-size: 100% 1.5px; color: var(--ink-3); }
@media (prefers-reduced-motion: no-preference) {
  .ck-box svg { transition: stroke-dashoffset .35s var(--ease-out, ease) .05s; }
  .ck-t { transition: background-size .4s var(--ease-out, ease), color .2s; }
  .ck-progress .track > span { transition: width .4s var(--ease-out, ease); }
}
.example-wrap { position: relative; display: inline-block; justify-self: start; max-width: 100%; }
.example-wrap img { display: block; max-width: 100%; height: auto; }
.example-tag { position: absolute; top: -9px; inset-inline-end: -8px; padding: 2px 9px; border-radius: var(--radius-pill); background: var(--gold); color: var(--on-gold); font-size: 12px; font-weight: 700; }

/* ---------- Pricing: free is the promise, later is only a note ---------- */
.price-free { display: flex; align-items: baseline; gap: var(--space-2); flex-wrap: wrap; }
.price-free .t-display { font-size: 46px; line-height: 1.1; color: var(--accent); }
.card-flat.is-later { background: transparent; border: 1.5px dashed var(--line-strong); }

/* ---------- For builders: the three steps join up as they come into view ---------- */
@media (min-width: 840px) {
  .steps-line { position: relative; }
  .steps-line::before { content: ""; position: absolute; z-index: 0; top: calc(var(--space-5) + 16px); inset-inline: 12%; height: 2px; background: var(--gold); opacity: .7; }
  .steps-line .step { position: relative; z-index: 1; }
  .band-night .steps-line .step { background: color-mix(in srgb, var(--night) 93%, #fff); }
}
@media (min-width: 840px) and (prefers-reduced-motion: no-preference) {
  .rf .steps-line::before { transform: scaleX(0); transform-origin: left; transition: transform 1.1s var(--ease-out, ease) .2s; }
  [dir="rtl"].rf .steps-line::before { transform-origin: right; }
  .rf .steps-line.is-in::before { transform: none; }
}
@media (prefers-reduced-motion: no-preference) {
  .rf .steps-line .step::before { background: rgba(255, 255, 255, .14); color: var(--on-night); transition: background .3s, color .3s; }
  .rf .steps-line .step:nth-child(2)::before { transition-delay: .45s; }
  .rf .steps-line .step:nth-child(3)::before { transition-delay: .9s; }
  .rf .steps-line.is-in .step::before { background: var(--gold); color: var(--on-gold); }
}

/* ---------- One category: the tiles in the band light up once, right to left in Arabic ---------- */
@media (prefers-reduced-motion: no-preference) {
  .cat-hero .bricks span { animation: rf-lit .8s ease-out 1; }
  .cat-hero .bricks span:nth-child(5n+2) { animation-delay: .1s; }
  .cat-hero .bricks span:nth-child(5n+3) { animation-delay: .2s; }
  .cat-hero .bricks span:nth-child(5n+4) { animation-delay: .3s; }
  .cat-hero .bricks span:nth-child(5n) { animation-delay: .4s; }
}
@keyframes rf-lit { 40% { filter: brightness(1.9); } }

/* ---------- Builders, stories ---------- */
.report-foot { display: flex; justify-content: center; margin-top: var(--space-7); }
.profile-hint { border: 1px dashed var(--line-strong); }
.rss-link { display: inline-grid; place-items: center; width: 32px; height: 32px; border-radius: 8px; color: var(--ink-3); }
.rss-link:hover { background: var(--surface-2); color: var(--gold-ink); }
.rss-link svg { width: 18px; height: 18px; }

/* ---------- About ---------- */
.principles { display: grid; gap: var(--space-3); grid-template-columns: repeat(auto-fit, minmax(min(100%, 260px), 1fr)); }
.principle { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: var(--space-3); align-items: center; }
.principle .ico { width: 42px; height: 42px; border-radius: 11px; display: grid; place-items: center; background: var(--gold-soft); color: var(--gold-ink); }
.principle .ico svg { width: 21px; height: 21px; }
.principle p { margin: 0; font-weight: 600; }
.about-mark { display: grid; place-items: center; padding: var(--space-7) var(--space-5); border-radius: var(--radius-lg); background: var(--lapis-deep); }
.about-mark .mark { width: 112px; height: 112px; }
.about-mark .mark .m-step { fill: #8FB1FF; }

/* ---------- Terms and privacy: a contents list in the empty column ---------- */
.legal-toc { display: none; }
@media (min-width: 1100px) {
  .legal-grid { display: grid; grid-template-columns: minmax(0, 760px) 240px; gap: var(--space-7); }
  .legal-toc:not([hidden]) { display: grid; order: 2; align-self: start; position: sticky; top: 96px; gap: 2px; }
  .legal-toc a { padding: 6px 12px; border-inline-start: 2px solid var(--line); color: var(--ink-2); font-size: 14.5px; line-height: 1.5; transition: color var(--dur-fast, .15s), border-color var(--dur-fast, .15s); }
  .legal-toc a:hover { color: var(--ink); text-decoration: none; }
  .legal-toc a.is-current { border-color: var(--gold); color: var(--ink); font-weight: 600; }
}
.prose h2 { scroll-margin-top: 96px; }

/* ---------- 404: the gold tile drops into place ---------- */
@media (prefers-reduced-motion: no-preference) {
  .nf .mark .m-sun { transform-box: fill-box; transform-origin: center; animation: rf-sun 1s var(--ease-out, ease) .3s backwards; }
}
@keyframes rf-sun { from { opacity: 0; transform: translateY(-30px) rotate(-30deg); } 55% { opacity: 1; transform: translateY(3px) rotate(5deg); } 75% { transform: translateY(-1px) rotate(-1deg); } to { transform: none; } }
.nf .search-xl { max-width: 100%; }
/* Room at the bottom so the mini bar never covers the end of the page. */
body:has(.mini-bar.is-on) { padding-bottom: 76px; }