/* NAV-INSTALL-01 (board, 19 Oct 2026; Anwar approved the design at 12:08-12:09 Melbourne). The header, its More menu, every install
   control, the second-visit strip, the iPhone sheet, the Listen prompt and the feedback form. Loaded after header-nav.css and
   mobile-header.css (base.html), so its rules win over theirs; their rules for the retired .rd-nav and .rd-menu no longer match.
   Every control is at least 44px tall. The gold is the site's --rd-gold (#8a6a18): 4.67:1 on --paper, 5.01:1 on --paper-raised. */

.rd-ic{width:1.15em;height:1.15em;flex:none;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round}
.rd-sr{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}

/* ── THE TOP ROW ─────────────────────────────────────────────────────────────────────────────────────────────── */
.rd-header .rd-wrap{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem}
.rd-header .rd-top{display:flex;align-items:center;gap:.25rem;margin-inline-start:auto}
.rd-header .rd-search,.rd-header .rd-more-btn{display:inline-flex;align-items:center;gap:.4rem;min-height:44px;padding:0 .6rem;
  font-size:var(--rd-sm);font-weight:500;color:var(--rd-ink);text-decoration:none;border-radius:var(--rd-r-sm);cursor:pointer}
.rd-header .rd-search:hover,.rd-header .rd-more-btn:hover{background:var(--rd-paper-deep)}
.rd-header .rd-search:focus-visible,.rd-header .rd-more-btn:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
.rd-header .rd-search[aria-current="page"]{box-shadow:inset 0 -3px 0 var(--rd-gold-light)}
.rd-more-btn{list-style:none}
.rd-more-btn::-webkit-details-marker{display:none}
.rd-more-btn::marker{content:""}
.rd-more[open] .rd-chev{transform:rotate(180deg)}
/* THE THREE BUTTONS: one grid of equal columns, so all three take the widest one's width; all the dark primary style. */
.rd-header .rd-acts{display:grid;grid-auto-flow:column;grid-auto-columns:1fr;gap:.5rem}
.rd-header .rd-act,.rd-header .rd-act:not(.rd-act-main){min-height:44px;background:var(--rd-ink);color:var(--rd-bg);border-color:var(--rd-ink)}
.rd-header .rd-act:hover,.rd-header .rd-act:not(.rd-act-main):hover{background:var(--rd-ink-soft);border-color:var(--rd-ink-soft)}

/* ── THE GOLD-OUTLINE INSTALL BUTTON ─────────────────────────────────────────────────────────────────────────── */
.rd-gold-btn{display:inline-flex;align-items:center;justify-content:center;gap:.45rem;min-height:44px;padding:.45rem .85rem;
  font:inherit;font-size:var(--rd-sm);font-weight:500;line-height:1.2;white-space:nowrap;cursor:pointer;
  color:var(--rd-gold);background:transparent;border:1.5px solid var(--rd-gold);border-radius:var(--rd-r-sm)}
.rd-gold-btn:hover{background:var(--rd-paper-deep)}
.rd-gold-btn:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
.rd-gold-btn[hidden],.rd-install-strip[hidden],.rd-more-install[hidden],.ls-install[hidden]{display:none}

/* ── THE MORE MENU: a dropdown from 640px ───────────────────────────────────────────────────────────────────── */
/* NAV-FIX-01 (board, 19 Oct 2026): THE PANEL HANGS FROM THE MORE BUTTON, its left edge on the button's left edge (it was hung from the
   button's right edge, so a 42rem panel ran off the left of the page). static/nav-more.js then keeps it inside the page's content margins
   and at least 16px inside the window, sliding it left, or narrowing it, only as far as it must. With scripting off it hangs from the
   button's left edge, no wider than the window less 32px. FROSTED: the page's own background at 88% with a 12px backdrop blur, a hairline
   border and a softer shadow; where blur (or color-mix) is unsupported, the page's background, solid. The phone panel stays solid. */
.rd-more{position:relative}
.rd-more-panel{position:absolute;top:calc(100% + .4rem);left:0;right:auto;z-index:50;box-sizing:border-box;width:min(42rem,calc(100vw - 32px));
  padding:1.1rem 1.35rem 1.2rem;background:var(--rd-bg,#F7F6F1);color:var(--rd-ink);border:1px solid rgba(23,32,29,.14);
  border-radius:var(--rd-r-sm);box-shadow:0 6px 20px rgba(23,32,29,.08)}
@supports ((backdrop-filter:blur(12px)) or (-webkit-backdrop-filter:blur(12px))) and (background:color-mix(in srgb,red 50%,transparent)){
  .rd-more-panel{background:color-mix(in srgb,var(--rd-bg,#F7F6F1) 88%,transparent);-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px)}
}
.rd-more-head,.rd-more-acts,.rd-narrow{display:none}
.rd-more-groups{display:grid;grid-template-columns:repeat(3,1fr);gap:.25rem 1.25rem}
.rd-more-h{margin:0 0 .25rem;font-size:var(--t-xs,.72rem);font-weight:600;letter-spacing:.08em;text-transform:uppercase;color:var(--ink-soft,#585F5A)}
.rd-more-group a{display:flex;align-items:center;min-height:44px;color:var(--rd-ink);font-weight:500;text-decoration:none}   /* NAV-FIX-01: one step bolder */
.rd-more-group a:hover{text-decoration:underline}
.rd-more-group a:focus-visible,.rd-more-close:focus-visible{outline:2px solid var(--rd-gold);outline-offset:-2px}
.rd-more-install{display:grid;grid-template-columns:1fr auto;align-items:center;gap:.15rem 1rem;margin-top:.9rem;padding-top:.9rem;
  border-top:1px solid var(--line,#D9D6CB)}
.rd-more-install-h{margin:0;font-weight:600}
.rd-more-install-p{margin:0;grid-column:1;font-size:var(--rd-sm);color:var(--ink-soft,#585F5A)}
.rd-more-install .rd-gold-btn{grid-column:2;grid-row:1 / span 2;background:var(--paper-raised,#FFFEFA)}   /* NAV-FIX-01: over the frosted fill the gold needs its own paper (5.01:1) */

/* ── THE SECOND-VISIT STRIP ──────────────────────────────────────────────────────────────────────────────────── */
.rd-install-strip{background:var(--paper-inset,#EEECE3);border-bottom:1px solid var(--line,#D9D6CB)}
.rd-install-strip .rd-wrap{display:flex;align-items:center;gap:.5rem 1rem;flex-wrap:wrap;padding-block:.35rem}
.rd-install-strip p{margin:0;flex:1 1 16rem;font-size:var(--rd-sm)}
/* on the strip's inset paper the gold is 4.27:1, so the strip's button carries the raised paper behind it (5.01:1) */
.rd-install-strip .rd-gold-btn{background:var(--paper-raised,#FFFEFA)}
.rd-strip-x{display:inline-flex;align-items:center;justify-content:center;width:44px;height:44px;padding:0;cursor:pointer;
  color:var(--rd-ink);background:transparent;border:0;border-radius:var(--rd-r-sm)}
.rd-strip-x:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
/* LOOK-POLISH 6: at phone width the line takes its own row and Install and its x share the next, at the end (the x was alone) */
@media (max-width:30rem){ .rd-install-strip p{flex-basis:100%} .rd-install-strip .rd-gold-btn{margin-left:auto} }

/* ── THE iPHONE SHEET: a bottom sheet ────────────────────────────────────────────────────────────────────────── */
.rd-sheet{position:fixed;inset:auto 0 0 0;margin:0 auto;width:100%;max-width:34rem;max-height:90vh;padding:1.25rem 1.25rem 1.5rem;
  color:var(--rd-ink);background:var(--paper-raised,#FFFEFA);border:1px solid var(--line,#D9D6CB);border-bottom:0;border-radius:14px 14px 0 0}
.rd-sheet::backdrop{background:rgba(23,32,29,.45)}
.rd-sheet h2{margin:0 0 .35rem;font-size:var(--t-md,1.33rem)}
.rd-sheet-sub{margin:0 0 .75rem;color:var(--ink-soft,#585F5A)}
.rd-sheet-steps{margin:0 0 1.1rem;padding-inline-start:1.4rem}
.rd-sheet-steps li{margin:.45rem 0}
.rd-sheet form{margin:0}
.rd-sheet-ok{width:100%;min-height:44px;cursor:pointer}

/* ── THE LISTEN PAGE'S PROMPT ────────────────────────────────────────────────────────────────────────────────── */
.ls-install{display:flex;align-items:center;flex-wrap:wrap;gap:.5rem 1rem;margin:1rem 0}
.ls-install p{margin:0}

/* ── /feedback ───────────────────────────────────────────────────────────────────────────────────────────────── */
/* the paragraph holding the message box takes the form column's width (the prose measure would stop it ~22px short) */
.fb-form p:has(> .fb-msg){max-width:none}
.fb-form .fb-msg{display:block;box-sizing:border-box;width:100%;max-width:100%;padding:.6rem .7rem;font-family:var(--f-body);
  font-size:var(--t-base);line-height:1.5;color:var(--ink);background:var(--paper-raised);border:1px solid var(--line-strong);border-radius:var(--r)}
.fb-form .fb-msg:focus-visible{outline:2px solid var(--rd-gold);outline-offset:1px}
.fb-choices{display:grid;grid-template-columns:1fr 1fr;gap:.5rem;margin:.5rem 0 0;padding:0;border:0}
.fb-choices legend{margin-bottom:.4rem;padding:0}
.fb-choices label{display:flex;align-items:center;gap:.55rem;min-height:44px;box-sizing:border-box;padding:.45rem .75rem;cursor:pointer;
  border:1px solid var(--line-strong);border-radius:var(--r);background:var(--paper-raised)}
.fb-choices label:has(input:checked){border-color:var(--ink);box-shadow:inset 0 0 0 1px var(--ink)}
.fb-choices input:focus-visible{outline:2px solid var(--rd-gold);outline-offset:2px}
.fb-about{display:inline-flex;gap:.35rem;align-items:baseline;margin:0 0 1rem;padding:.3rem .7rem;font-size:var(--rd-sm);
  border:1px solid var(--line-strong);border-radius:999px;background:var(--paper-inset)}
.fb-about b{font-weight:600}
.fb-form .rd-btn{min-height:44px;cursor:pointer;font:inherit}

/* ── PHONES (below 640px) ────────────────────────────────────────────────────────────────────────────────────── */
@media (max-width:639.98px){
  .rd-header .rd-top{margin-inline-start:auto}
  .rd-header .rd-install-top{display:none}               /* the panel's fixed row and the strip carry install on a phone */
  .rd-header .rd-acts{order:9;flex:1 1 100%}
  .rd-wide{display:none}
  .rd-narrow{display:block}
  html.rd-more-on,html.rd-more-on body{overflow:hidden}
  .rd-more-panel{position:fixed;inset:0;width:auto;max-height:none;overflow-y:auto;z-index:1000;border:0;border-radius:0;box-shadow:none;
    padding:.75rem 16px 8.5rem;background:var(--paper-raised,#FFFEFA);-webkit-backdrop-filter:none;backdrop-filter:none}
  .rd-more-head{display:flex;justify-content:flex-end;margin-bottom:.5rem}
  .rd-more-close{min-height:44px;padding:0 1rem;font:inherit;font-weight:600;cursor:pointer;color:var(--rd-ink);
    background:transparent;border:1.5px solid var(--rd-ink);border-radius:var(--rd-r-sm)}
  .rd-more-acts{display:grid;grid-template-columns:1fr;gap:.5rem;margin-bottom:1.1rem}
  .rd-more-acts .rd-act{display:flex;justify-content:center;min-height:48px;background:var(--rd-ink);color:var(--rd-bg);
    border:1.5px solid var(--rd-ink);border-radius:var(--rd-r-sm);text-decoration:none;font-weight:500}
  .rd-more-groups{grid-template-columns:1fr;gap:.75rem}
  .rd-more-install{position:fixed;left:0;right:0;bottom:0;z-index:1001;margin:0;padding:.75rem 16px;background:var(--paper-raised,#FFFEFA);
    border-top:1px solid var(--line,#D9D6CB)}
  .fb-choices{grid-template-columns:1fr}
}
@media (max-width:419.98px){
  .rd-header .rd-search span{position:absolute;width:1px;height:1px;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
}