/* The app shell's own notices, shared by every screen.

   OFFLINE. When the House cannot be reached and a screen is showing this
   device's dated copy of the catalog (public/api.js), one quiet line says so
   and says when the copy is from. It never claims anything was saved, and it
   goes away the moment a request gets through again. Above the bottom bar on
   a phone, under the header on a wide screen; never over a control. */
.hq-offline{position:fixed;left:50%;transform:translateX(-50%);z-index:45;
  bottom:calc(62px + env(safe-area-inset-bottom, 0px));
  max-width:min(560px, calc(100vw - 32px));width:max-content;
  background:var(--ink);color:var(--ground);border-radius:12px;
  padding:9px 14px;font:500 13px/1.4 var(--f-s);box-shadow:0 10px 30px rgba(0,0,0,.18);
  text-align:center}
.hq-offline b{font-weight:600}
@media (min-width:900px){ .hq-offline{bottom:auto;top:70px} }
/* The Writing Room says it in its own words, in the page, where it does not
   cover a line of anybody's lyrics. */
body:has(#view > .wr) .hq-offline{display:none}

/* THE INSTALLED APP draws edge to edge (Capacitor `contentInset: never`), so
   the page keeps itself clear of the status bar, the Dynamic Island and, in
   landscape, the sensor housing. A web page in Safari never sees these insets
   as anything but zero, so none of this changes the web. The strip behind the
   status bar is the header's own frosted chrome, so words scrolling up pass
   under it rather than under the clock. */
html.hq-native body{
  padding-top:env(safe-area-inset-top, 0px);
  padding-left:max(var(--edge, 22px), env(safe-area-inset-left, 0px));
  padding-right:max(var(--edge, 22px), env(safe-area-inset-right, 0px));
}
html.hq-native::before{content:"";position:fixed;left:0;right:0;top:var(--hq-vv-top, 0px);z-index:1000;
  height:env(safe-area-inset-top, 0px);background:var(--chrome, var(--ground));
  -webkit-backdrop-filter:saturate(1.2) blur(8px);backdrop-filter:saturate(1.2) blur(8px);
  pointer-events:none}
html.hq-native .tabs{padding-left:env(safe-area-inset-left, 0px);padding-right:env(safe-area-inset-right, 0px)}
/* A sheet stays above the keyboard (Phase 3 §3.9). The page does not get
   shorter when the keyboard comes up -- only the visible part does -- so a
   sheet anchored to the page's bottom sat behind the keys with its field.
   native.js measures how much the keyboard covers; the sheet stands on it,
   and never grows taller than what is left to see. */
/* Not by padding up from the page's bottom, though: the sheet covers exactly
   what is visible. iOS scrolls the whole page to bring a focused field into
   view, locked or not -- a phone field's number pad moved it 212 points --
   and a padding measured against the page's bottom then put the sheet behind
   the keys: Invite by text's Add someone came up as a dark band above the
   number pad with its fields under it (Jay, build 102). Placed at the visible
   part's own top and height, the sheet's foot is the keyboard's top whatever
   iOS scrolled. */
html.hq-native .sheet{top:var(--hq-sheet-top, 0px);bottom:auto;height:var(--hq-vvh, 100%)}
/* The question sheet (its search field, beauty sweep 2) stands on the keyboard
   the same way, and its surface carries on under the translucent keys. */
html.hq-native .hq-as{top:var(--hq-sheet-top, 0px);bottom:auto;height:var(--hq-vvh, 100%)}
html.hq-native .hq-as-card{max-height:calc(var(--hq-vvh, 100vh) - 12px - env(safe-area-inset-top, 0px))}
html.hq-native.hq-kb-under .hq-as-card{padding-bottom:0;box-shadow:
  0 calc(var(--hq-under-h, 0px) / 3) 0 0 var(--raised),
  0 calc(var(--hq-under-h, 0px) * 2 / 3) 0 0 var(--raised),
  0 var(--hq-under-h, 0px) 0 0 var(--raised)}
/* The sheet's own surface carries on under the keyboard (build 10, item 13).
   The iOS keyboard is translucent, and with the sheet ending at its top edge
   the page behind the sheet showed through the keys -- a web page, not a
   sheet. Shadows with no blur are the panel's color, drawn below it and not
   clipped by the panel's own overflow; three offsets leave no gap even when
   the panel is shorter than the keyboard, and an outer shadow never paints
   inside the panel, so its rounded top corners stay as they are. */
html.hq-native.hq-kb-under .sheetpanel{box-shadow:
  0 calc(var(--hq-under-h, 0px) / 3) 0 0 var(--ground),
  0 calc(var(--hq-under-h, 0px) * 2 / 3) 0 0 var(--ground),
  0 var(--hq-under-h, 0px) 0 0 var(--ground)}
html.hq-native .sheetpanel{max-height:calc(var(--hq-vvh, 100vh) * .88)}
html.hq-native.hq-kb-up .tabs{visibility:hidden}
/* Nor does it scroll sideways: a screen is as wide as the phone. */
html.hq-native body{overflow-x:clip}
/* The release hero's photograph bleeds 6% past its column toward the screen's
   edge; on the widest phones 6% is more than the page's edge, and the page
   could be nudged 2px sideways (iPhone 17 Pro Max). It stops at the edge. */
html.hq-native .rw-back, html.hq-native .rw-wash{right:max(-6%, calc(-1 * var(--edge, 22px)))}
/* A card is a thing she presses, not text she selects: a long press on an
   imported folder (which has no menu, Phase 3 §3.2) began a text selection
   across the grid, which is the web showing through. */
html.hq-native .media-collection-card{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none}

/* SIGN IN, in the installed app only (public/native.js). One quiet card on
   the House's paper: what this is, and one button that opens Clerk's own
   sign-in sheet. Never shown on the web, where Access signed the person in. */
.hq-signin{position:fixed;inset:0;z-index:2000;background:var(--ground);display:flex;
  align-items:center;justify-content:center;padding:max(24px, env(safe-area-inset-top, 0px)) 24px
  max(24px, env(safe-area-inset-bottom, 0px))}
.hq-signin-card{width:100%;max-width:420px;text-align:center}
.hq-signin-eyebrow{margin:0 0 10px;font:700 11px var(--f-s);letter-spacing:.14em;text-transform:uppercase;
  color:var(--muted)}
.hq-signin h1{margin:0 0 12px;font:400 32px/1.15 var(--f-l);color:var(--ink)}
.hq-signin-words{margin:0 auto 28px;max-width:30ch;font:400 16px/1.5 var(--f-s);color:var(--soft)}
.hq-signin-go{width:100%;min-height:52px;border:0;border-radius:16px;background:var(--cta);color:var(--oncta);
  font:700 16px var(--f-s);cursor:pointer}
.hq-signin-go:disabled{opacity:.6}

/* THE QUESTION SHEET (public/app/sheets.js; Jay, October 3, 2026). Every
   question, confirmation and choice in the app, the installed app included:
   a sheet from the foot of the screen over the dimmed, blurred page, the
   question in the serif, a glyph and a label on every row, the bands of the
   long-press menu between groups, anything destructive alone at the foot in
   --destructive. Every color is the look's own. */
.hq-as{position:fixed;inset:0;z-index:3000;display:flex;align-items:flex-end;justify-content:center;
  font-family:var(--f-s);color:var(--ink);
  --as-head:color-mix(in srgb, var(--raised) 55%, var(--lift));
  --as-sep:color-mix(in srgb, var(--line) 85%, transparent);
  --as-gap:color-mix(in srgb, var(--ground) 70%, var(--line));
  --as-press:color-mix(in srgb, var(--accent) 8%, var(--raised))}
.hq-as *{box-sizing:border-box}
.hq-as-scrim{position:absolute;inset:0;background:rgba(0,0,0,.3);opacity:0;transition:opacity .22s;
  -webkit-backdrop-filter:blur(10px) saturate(1.05);backdrop-filter:blur(10px) saturate(1.05)}
.hq-as.open .hq-as-scrim{opacity:1}
.hq-as.closing{pointer-events:none}
.hq-as-card{position:relative;width:100%;max-width:520px;display:flex;flex-direction:column;
  background:var(--raised);color:var(--ink);border-radius:16px 16px 0 0;overflow:hidden;outline:0;
  max-height:calc(100dvh - 12px - env(safe-area-inset-top, 0px));
  padding-bottom:env(safe-area-inset-bottom, 0px);
  box-shadow:0 -10px 40px color-mix(in srgb, var(--ink) 16%, transparent);
  transform:translateY(105%);transition:transform .3s cubic-bezier(.2,.9,.3,1)}
.hq-as.open .hq-as-card{transform:none}
.hq-as.closing .hq-as-card{transform:translateY(105%);transition:transform .22s ease-in}
.hq-as-grab{position:absolute;top:7px;left:50%;width:36px;height:5px;margin-left:-18px;border-radius:3px;
  background:var(--firm);z-index:2}
.hq-as-head{flex:none;padding:26px 20px 18px;background:var(--as-head);touch-action:none}
.hq-as-head.bare{padding:20px 20px 0;background:var(--raised)}
.hq-as-icon{display:grid;place-items:center;width:44px;height:44px;margin:0 0 12px;border-radius:12px;
  background:var(--raised);color:var(--accent);box-shadow:0 0 0 1px var(--as-sep)}
.hq-as-icon svg{width:24px;height:24px}
.hq-as-t{margin:0;font:400 25px/1.15 var(--f-l);color:var(--ink);overflow-wrap:anywhere}
.hq-as-m{margin:8px 0 0;font:400 15px/1.45 var(--f-s);color:var(--muted);white-space:pre-line}
.hq-as-t + .hq-as-m{margin-top:8px}
.hq-as-body{flex:1 1 auto;min-height:0;overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hq-as-facts{border-bottom:8px solid var(--as-gap)}
.hq-as-fact{position:relative;display:flex;justify-content:space-between;align-items:baseline;gap:16px;margin:0;
  padding:12px 20px;font:400 15px/1.35 var(--f-s)}
.hq-as-fact + .hq-as-fact::before{content:"";position:absolute;top:0;left:20px;right:0;height:1px;background:var(--as-sep)}
.hq-as-fact span{flex:none;color:var(--muted)}
.hq-as-fact b{min-width:0;font-weight:500;text-align:right;overflow-wrap:anywhere}
.hq-as-grp + .hq-as-grp{border-top:8px solid var(--as-gap)}
.hq-as-grp[hidden]{display:none}
.hq-as-sec{margin:0;padding:14px 20px 6px;font:600 12.5px var(--f-s);letter-spacing:.06em;text-transform:uppercase;
  color:var(--muted)}
.hq-as-b{position:relative;display:flex;align-items:center;gap:16px;width:100%;min-height:56px;margin:0;
  padding:0 20px;border:0;background:var(--raised);color:var(--ink);font:400 17px/1.3 var(--f-s);text-align:left;
  cursor:pointer;-webkit-tap-highlight-color:transparent;
  /* A row is pressed, never read: a long press on a name selected its words
     with Copy / Look Up (Jay, build 102, a co-writer's row). */
  -webkit-user-select:none;user-select:none;-webkit-touch-callout:none}
.hq-as-b[hidden]{display:none}
.hq-as-b + .hq-as-b::before{content:"";position:absolute;top:0;left:20px;right:0;height:1px;background:var(--as-sep)}
.hq-as-grp.glyphs .hq-as-b + .hq-as-b::before{left:60px}
.hq-as-gl{flex:none;display:grid;place-items:center;width:24px;height:24px;color:var(--accent)}
.hq-as-gl svg{width:22px;height:22px}
.hq-as-bars{display:inline-flex;align-items:flex-end;gap:1.5px}
.hq-as-bars i{width:3px;height:13px;border-radius:1px;background:var(--firm)}
.hq-as-bars i.on{background:var(--good)}
.hq-as-l{flex:1;min-width:0;padding:12px 0}
.hq-as-lab{display:block;overflow-wrap:anywhere}
.hq-as-sub{display:block;margin-top:1px;font-size:13px;color:var(--muted)}
.hq-as-b.pri{font-weight:600}
.hq-as-b.bad,.hq-as-b.bad .hq-as-gl{color:var(--destructive)}
.hq-as-check{flex:none;display:grid;place-items:center;color:var(--accent)}
.hq-as-check svg{width:20px;height:20px;stroke-width:2.2}
.hq-as-more{flex:none;display:grid;place-items:center;color:var(--muted)}
.hq-as-b:active{background:var(--as-press)}
.hq-as-b.bad:active{background:color-mix(in srgb, var(--destructive) 9%, var(--raised))}
/* The confirming row of confirmDestructive (sheets.js): the one place a
   destructive act is filled red, white words on the house's wine red, which
   reads at better than 6:1 in every look, light or dark. */
.hq-as-b.bad.fill,.hq-as-b.bad.fill .hq-as-gl{background:var(--destructive-fill);color:var(--on-destructive);font-weight:600}
.hq-as-b.bad.fill:active{background:var(--destructive-fill);filter:brightness(.86)}
@media (hover:hover){ .hq-as-b.bad.fill:hover{background:var(--destructive-fill);filter:brightness(.93)} }
@media (hover:hover){ .hq-as-b:hover{background:var(--as-press)} }
.hq-as-b:focus-visible{outline:2px solid var(--focus, var(--accent));outline-offset:-3px}
.hq-as-b:disabled{color:var(--faint);cursor:default;background:var(--raised)}
.hq-as-find{position:sticky;top:0;z-index:1;padding:6px 16px 10px;background:var(--raised)}
.hq-as-q{width:100%;height:40px;padding:0 12px;border:0;border-radius:12px;background:var(--sunk);color:var(--ink);
  font:400 16px var(--f-s);-webkit-appearance:none;appearance:none}
.hq-as-q:focus{outline:2px solid var(--accent);outline-offset:0}
.hq-as-none{margin:0;padding:18px 20px 22px;color:var(--muted);font:400 15px var(--f-s)}
@media (min-width:768px){
  .hq-as{align-items:center;padding:24px}
  .hq-as-card{border-radius:16px;max-height:min(80vh, 720px);padding-bottom:0;opacity:0;transform:translateY(24px);
    transition:transform .2s ease,opacity .2s}
  .hq-as.open .hq-as-card{opacity:1}
  .hq-as.closing .hq-as-card{opacity:0;transform:translateY(24px)}
}
@media (prefers-reduced-motion:reduce){
  .hq-as-card,.hq-as.closing .hq-as-card{transition:opacity .15s}
}

/* THE DATE SHEET (date-sheet.js). The question sheet's own rows and bands,
   plus a month calendar the sheet turns into and the row a form draws where a
   native date input used to be. Tokens only, so every look and dark mode
   come along. The .hq-dc prefix outranks a screen's own "button" rules (the
   Song Deal dialog styles every button inside it). */
.hq-dc .hq-as-b{border:0;border-radius:0;background:var(--raised);color:var(--ink);min-height:56px;
  padding:0 20px;font:400 17px/1.3 var(--f-s);text-align:left}
.hq-dc .hq-as-b:active{background:var(--as-press)}
.dc-cal{padding:8px 12px 12px}
.dc-head{display:flex;align-items:center;justify-content:space-between;margin:0 0 4px}
.dc-title{font:600 16px var(--f-s);outline:0}
.hq-dc .dc-nav{display:grid;place-items:center;width:44px;height:44px;margin:0;padding:0;border:0;border-radius:999px;
  background:none;color:var(--accent);cursor:pointer}
.hq-dc .dc-nav.prev svg{transform:rotate(180deg)}
.hq-dc .dc-nav:disabled{color:var(--faint);opacity:.5;cursor:default}
.dc-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));gap:2px;text-align:center}
.dc-grid i{font:600 12px var(--f-s);font-style:normal;color:var(--muted);padding:4px 0 6px}
.hq-dc .dc-day{min-height:44px;min-width:0;margin:0;padding:0;border:0;border-radius:999px;background:none;
  color:var(--ink);font:400 16px var(--f-s);cursor:pointer;-webkit-tap-highlight-color:transparent}
.hq-dc .dc-day.today{color:var(--accent);font-weight:700}
.hq-dc .dc-day[aria-pressed="true"]{background:var(--cta);color:var(--oncta);font-weight:700}
.hq-dc .dc-day:disabled{color:var(--faint);opacity:.45;cursor:default}
@media (hover:hover){ .hq-dc .dc-day:not(:disabled):not([aria-pressed="true"]):hover{background:var(--as-press)} }
.hq-dc .dc-day:focus-visible,.hq-dc .dc-nav:focus-visible{outline:2px solid var(--focus, var(--accent));outline-offset:-2px}
/* Looking back (the import's "written on"): the month's name opens a grid of
   years, sixteen at a time. */
.hq-dc .dc-titleb{display:inline-flex;align-items:center;gap:4px;min-height:44px;margin:0;padding:0 10px;border:0;
  border-radius:999px;background:none;color:var(--ink);font:600 16px var(--f-s);cursor:pointer}
.hq-dc .dc-titleb svg{width:14px;height:14px;color:var(--accent)}
.hq-dc .dc-titleb[aria-expanded="true"] svg{transform:rotate(180deg)}
.dc-years{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:6px;padding:4px 0 8px}
.hq-dc .dc-yr{min-height:48px;margin:0;padding:0;border:0;border-radius:999px;background:none;color:var(--ink);
  font:400 16px var(--f-s);font-variant-numeric:tabular-nums;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hq-dc .dc-yr.now{color:var(--accent);font-weight:700}
.hq-dc .dc-yr[aria-pressed="true"]{background:var(--cta);color:var(--oncta);font-weight:700}
.hq-dc .dc-yr:disabled{color:var(--faint);opacity:.45;cursor:default}
@media (hover:hover){ .hq-dc .dc-yr:not(:disabled):not([aria-pressed="true"]):hover{background:var(--as-press)} }
.hq-dc .dc-yr:focus-visible,.hq-dc .dc-titleb:focus-visible{outline:2px solid var(--focus, var(--accent));outline-offset:-2px}
/* A sheet that saves while it is up (Music's Next session): the refusal, or the
   day it saved, above the days; and what goes with a set day (Add to calendar). */
.hq-dc .dc-err,.hq-dc .dc-said{margin:0;padding:12px 20px}
.hq-dc .dc-err{color:var(--destructive);outline:0}
.hq-dc a.hq-as-b{text-decoration:none}
.daterow-w{display:block}
button.daterow{display:flex;align-items:center;justify-content:space-between;gap:10px;text-align:left;
  cursor:pointer;-webkit-appearance:none;appearance:none}
.daterow-v{min-width:0;overflow-wrap:anywhere}
.daterow-v.ph{color:var(--muted)}
button.daterow:disabled{cursor:default;opacity:.7}

/* A row with a long-press menu or swipe actions. It is pressed, not selected:
   a long press must open the menu, not start a text selection or iOS's link
   preview. Swiping reveals the action underneath the row's face. */
.hq-press{-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;-webkit-user-drag:none}
/* A press that opens the menu must not also pick the row up as a dragged
   link, which would take the finger away from the menu (press-menu.js). */
.hq-press a,a.hq-press,.hq-press img{-webkit-user-drag:none}
.hq-swipe{position:relative;overflow:hidden;touch-action:pan-y}
.hq-swipe > .hq-swipe-under{position:absolute;inset:0;display:flex;align-items:center;padding:0 20px;
  font:700 14px var(--f-s);color:var(--onsem);background:var(--good);border-radius:inherit}
.hq-swipe > .hq-swipe-under.trail{justify-content:flex-end;background:var(--warn)}
.hq-swipe > .hq-swipe-under.bad{background:var(--stop)}
.hq-swipe > .hq-swipe-under.play{background:var(--accent)}
.hq-swipe > .hq-swipe-face{position:relative;z-index:1}
.hq-swipe.swiping > .hq-swipe-face{background:var(--ground)}

/* First-run coach marks: one quiet card that goes away for good on "Got it". */
.hq-coach{display:flex;align-items:center;gap:12px;margin:0 0 12px;padding:10px 12px 10px 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--sunk)}
.hq-coach p{margin:0;flex:1;font:400 13px/1.45 var(--f-s);color:var(--soft)}
.hq-coach-x{flex:none;min-height:36px;padding:0 12px;border:0;border-radius:10px;background:transparent;
  color:var(--ink);font:600 13px var(--f-s);cursor:pointer}
.hq-coach-x:hover{background:var(--lift)}

/* A single choice with more than three options is one dropdown row --
   "Vocals · Final ›" -- that opens an action sheet (Phase 3 punch list,
   item 2). One line, thumb-sized, never a cloud of pills that wraps. */
.mdrop{display:flex;align-items:center;gap:6px;width:100%;min-height:48px;margin:6px 0 0;padding:0 14px;
  border:1px solid var(--line);border-radius:12px;background:var(--raised);color:var(--ink);
  font:500 15px var(--f-s);text-align:left;cursor:pointer;white-space:nowrap}
.mdrop:hover{border-color:var(--firm)}
.mdrop:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.mdrop-k{font-weight:600}
.mdrop-sep{color:var(--muted)}
.mdrop-v{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;color:var(--soft)}

/* THE LONG-PRESS MENU (app/press-menu.js; Jay, October 3, 2026). One menu for
   every long press and every ••• that shares its actions. The page dims and
   blurs around the item she pressed, which stays where it is, eased forward;
   the card holds a glyph and a label on every row, the groups banded apart,
   anything destructive alone at the foot in the house's wine red. Every color
   is the look's own, so all of Brooklyn's looks carry it. */
.hqm{position:fixed;inset:0;z-index:3100;padding:env(safe-area-inset-top, 0px) 0 env(safe-area-inset-bottom, 0px);
  font-family:var(--f-s);color:var(--ink);-webkit-user-select:none;user-select:none;-webkit-touch-callout:none;
  --hqm-card:var(--raised);--hqm-head:color-mix(in srgb, var(--raised) 55%, var(--lift));--hqm-icon:var(--accent);
  --hqm-sep:color-mix(in srgb, var(--line) 85%, transparent);--hqm-gap:color-mix(in srgb, var(--ground) 70%, var(--line));
  --hqm-press:color-mix(in srgb, var(--accent) 8%, var(--raised));--hqm-danger:var(--destructive);
  --hqm-scrim:color-mix(in srgb, var(--ink) 20%, transparent)}
html[data-theme="dark"] .hqm,html[data-room="dark"] .hqm{--hqm-scrim:color-mix(in srgb, var(--ground) 62%, transparent)}
.hqm *{box-sizing:border-box}
.hqm-scrim{position:absolute;inset:0;pointer-events:none;background:var(--hqm-scrim);
  -webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1);opacity:0;transition:opacity .2s ease-out}
.hqm-scrim.panes{background:none;-webkit-backdrop-filter:none;backdrop-filter:none}
.hqm-pane{position:absolute;background:var(--hqm-scrim);-webkit-backdrop-filter:blur(14px) saturate(1.1);backdrop-filter:blur(14px) saturate(1.1)}
.hqm-catch{position:absolute;inset:0}
.hqm.open .hqm-scrim{opacity:1}
.hqm.closing .hqm-scrim{opacity:0}
/* Closing, it is already gone as far as a finger is concerned. */
.hqm.closing{pointer-events:none}
.hqm-card{position:absolute;width:min(296px, calc(100vw - 32px));display:flex;flex-direction:column;
  background:var(--hqm-card);color:var(--ink);border-radius:20px;overflow:hidden;
  box-shadow:0 22px 60px rgba(56,36,47,.24),0 2px 8px rgba(56,36,47,.08);
  opacity:0;transform:scale(.82);transition:opacity .16s ease-out,transform .3s cubic-bezier(.22,1.25,.36,1)}
.hqm.open .hqm-card{opacity:1;transform:none}
.hqm.closing .hqm-card{opacity:0;transform:scale(.94);transition:opacity .14s ease-in,transform .14s ease-in}
.hqm-card:focus{outline:0}
.hqm-head{flex:none;display:flex;gap:12px;align-items:center;padding:14px 16px 13px;background:var(--hqm-head)}
.hqm-thumb{flex:none;width:42px;height:42px;border-radius:9px;object-fit:cover;background:var(--sunk)}
.hqm-thumb.round{border-radius:50%}
.hqm-thumb.init{display:inline-flex;align-items:center;justify-content:center;font-size:15px;font-weight:500;
  letter-spacing:.02em;color:var(--soft);border:1px solid var(--firm)}
/* The owner's crown sits on the edge of the round thumbnail, as on the header button. */
.hqm-face{position:relative;display:inline-flex;flex:none}
.hqm-face .owner-crown{top:-6px;right:-6px;width:19px;height:16px}
.hqm-ht{min-width:0}
.hqm-t{font-family:var(--f-l);font-size:21px;line-height:1.12;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqm-s{margin-top:2px;font-size:12.5px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqm-s.quote{font-family:var(--f-l);font-style:italic;font-size:15px}
.hqm-body{overflow-y:auto;overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
.hqm-g + .hqm-g{border-top:7px solid var(--hqm-gap)}
.hqm-i{appearance:none;-webkit-appearance:none;border:0;margin:0;background:none;color:inherit;width:100%;
  display:flex;align-items:center;gap:13px;min-height:48px;padding:0 16px;text-align:left;font:500 16px/1.2 var(--f-s);
  cursor:pointer;position:relative;-webkit-tap-highlight-color:transparent}
.hqm-i + .hqm-i::before{content:"";position:absolute;top:0;left:51px;right:0;height:1px;background:var(--hqm-sep)}
.hqm-i svg{flex:none;width:22px;height:22px;color:var(--hqm-icon)}
.hqm-l{flex:1;min-width:0;display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding:12px 0}
.hqm-lab{flex:none;max-width:100%;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqm-i.has-sub .hqm-l{flex-direction:column;align-items:stretch;justify-content:center;gap:0;padding:10px 0}
/* A row with a subtitle may take a second line for its label rather than cut
   the word that names it ("Brooklyn Van Zandt's House Admin" lost "Admin"). */
.hqm-i.has-sub .hqm-lab{white-space:normal;overflow-wrap:anywhere;display:-webkit-box;
  -webkit-box-orient:vertical;-webkit-line-clamp:2}
.hqm-sub{display:block;margin-top:2px;font-size:12.5px;line-height:1.3;font-weight:400;color:var(--muted);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqm-i .chev{margin-left:2px}
.hqm-i.danger .hqm-sub{color:var(--muted)}
.hqm-val{flex:0 100 auto;min-width:0;font-weight:400;font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hqm-i.hot,.hqm-i:active{background:var(--hqm-press)}
@media (hover:hover){ .hqm-i:hover{background:var(--hqm-press)} }
.hqm-i.danger,.hqm-i.danger svg{color:var(--hqm-danger)}
.hqm-i.danger.hot,.hqm-i.danger:active{background:color-mix(in srgb, var(--hqm-danger) 9%, var(--hqm-card))}
.hqm-i:disabled{color:var(--muted);cursor:default}
.hqm-i:disabled svg{color:var(--faint)}

/* A destructive button: the one look for every button that deletes, revokes or
   removes (consistency audit 2.2, October 4, 2026). Red words and a red edge AT
   REST, because a phone never hovers; the family keeps its own size and shape
   (.btn, .tb, .mbtn, .ok, .pill, .linky, .mlink, the "x" .drop, .act...). Filled red belongs only to the
   confirming row of a destructive question (.hq-as-b.bad.fill below), so a red
   block always means "this is the last step". Loaded after app.css, media.css
   and music.css, so it wins over a family's own at-rest fill (.mbtn is filled). */
:is(.btn,.tb,.mbtn,.ok,.pill,.linky,.mlink,.drop,.act,.wr-btn,.ih-action,.ih-remove,.sl-btn).destructive{
  background:transparent;color:var(--destructive);border-color:var(--destructive)}
:is(.btn,.tb,.mbtn,.ok,.pill,.linky,.mlink,.drop,.act,.wr-btn,.ih-action,.ih-remove,.sl-btn).destructive svg{color:currentColor;opacity:1}
:is(.btn,.tb,.mbtn,.ok,.pill,.linky,.mlink,.drop,.act,.wr-btn,.ih-action,.ih-remove,.sl-btn).destructive:active{
  background:color-mix(in srgb, var(--destructive) 10%, transparent)}
:is(.btn,.tb,.mbtn,.ok,.pill,.linky,.mlink,.drop,.act,.wr-btn,.ih-action,.ih-remove,.sl-btn).destructive:disabled{
  color:var(--faint);border-color:var(--line);background:transparent}
.hqm-i:disabled:active{background:none}
.hqm-i:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
/* The item she pressed, risen above the blur: a styled snapshot of it
   (press-menu.js liftSnapshot), eased forward, and slid up when the menu
   needs the room below it. It settles back as the menu closes. */
.hqm-lift{transform:none;transition:transform .26s cubic-bezier(.2,1.3,.4,1),opacity .16s;
  box-shadow:0 14px 40px rgba(56,36,47,.22)}
.hqm.open .hqm-lift{transform:translateY(var(--hqm-dy, 0px)) scale(1.02)}
.hqm.closing .hqm-lift{transform:none;opacity:0;transition:transform .16s ease-in,opacity .16s ease-in}
html[data-theme="dark"] .hqm-lift,html[data-room="dark"] .hqm-lift{box-shadow:0 16px 44px rgba(0,0,0,.55)}
/* A photograph, risen whole above its menu (press-menu.js placeAtFoot). */
.hqm-pic{position:absolute;object-fit:contain;border-radius:14px;transform:var(--hqm-from, none);
  transition:transform .32s cubic-bezier(.22,1.15,.36,1),opacity .16s}
.hqm.open .hqm-pic{transform:none}
.hqm.closing .hqm-pic{opacity:0}
@media (prefers-reduced-motion:reduce){
  .hqm-card,.hqm.closing .hqm-card{transform:none;transition:opacity .15s}
  .hqm.open .hqm-lift{transform:translateY(var(--hqm-dy, 0px))}
  .hqm-pic{transform:none;transition:opacity .15s}
}

/* THE HOUSE SWITCHER (app/houses.js; Jay approved the mockup Oct 8, 2026:
   indyhouse-rounds/ready/house-switcher-mockup). A House is a rounded square
   and a person is a circle, so the two never read as each other. A face keeps
   its own colors in both looks: an initial tile wears its House's palette
   (data-look on the tile), never the page's. */
.hs-face{--s:40px;position:relative;flex:none;width:var(--s);height:var(--s);border-radius:calc(var(--s) * .27);
  overflow:hidden;display:grid;place-items:center;box-shadow:inset 0 0 0 1px rgba(0,0,0,.07)}
html[data-theme="dark"] .hs-face,html[data-room="dark"] .hs-face{box-shadow:inset 0 0 0 1px rgba(255,255,255,.09)}
.hs-face > img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;display:block}
.hs-face.init{background:var(--cta);color:var(--oncta);font:400 calc(var(--s) * .5)/1 var(--f-d);letter-spacing:0}
.hs-own{position:relative;flex:none;display:inline-flex}
.hs-own .owner-crown{top:-7px;right:-6px}

/* The avatar, for somebody in 2+ Houses: the House she's in on its corner, and
   a dot when something waits in another (never which, never how many). */
.prof.housed{overflow:visible;position:relative}
.prof .prof-house{position:absolute;right:-5px;bottom:-4px;--s:19px;box-shadow:0 0 0 2px var(--ground)}
.prof-dot{position:absolute;top:-1px;left:-1px;width:11px;height:11px;border-radius:50%;background:var(--accent);
  box-shadow:0 0 0 2px var(--ground);pointer-events:none}

/* A House row: face, name, her role there, what's waiting, one count, the chevron. */
.hs-hrow{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:68px;margin:0;padding:10px 16px 10px 20px;
  border:0;background:var(--raised);color:var(--ink);text-align:left;font-family:var(--f-s);cursor:pointer;
  -webkit-tap-highlight-color:transparent}
.hs-hrow + .hs-hrow::before{content:"";position:absolute;top:0;left:74px;right:0;height:1px;background:var(--line)}
.hs-hrow:active,.hs-hrow.hot{background:color-mix(in srgb, var(--accent) 8%, var(--raised))}
@media (hover:hover){ .hs-hrow[data-house]:hover{background:color-mix(in srgb, var(--accent) 6%, var(--raised))} }
.hs-hrow:focus-visible{outline:2px solid var(--focus);outline-offset:-3px}
.hs-hrow.here{cursor:default;background:var(--raised)}
.hs-ht{flex:1;min-width:0}
.hs-hn{display:block;font:500 16.5px/1.25 var(--f-s);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-hn mark{background:var(--sel);color:var(--onsel);border-radius:3px;padding:0 1px}
.hs-hr{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-hw{display:block;margin-top:1px;font-size:13px;line-height:1.35;color:var(--soft);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hs-hw b{color:var(--accent);font-weight:600}
.hs-pill{flex:none;min-width:24px;height:24px;padding:0 8px;border-radius:12px;background:var(--lift);color:var(--ink);
  font:600 13px/24px var(--f-s);text-align:center;font-variant-numeric:tabular-nums}
.hs-pill.do{background:var(--accent);color:var(--onacc)}
.hqm-i .hs-pill{order:2;margin-left:6px}
.hqm-i .chev{order:3}
.hs-here{flex:none;display:flex;align-items:center;gap:5px;font:600 13px var(--f-s);color:var(--accent)}
.hs-here svg{width:18px;height:18px}
.hs-pin{flex:none;color:var(--faint);display:grid;place-items:center}
.hs-pin svg{width:15px;height:15px}
.hs-hrow .chev{flex:none;color:var(--muted)}

/* Switch House on a phone: the question sheet, as tall as the phone allows. */
.hs-sheet .hq-as-card{max-height:calc(100dvh - 54px)}
.hs-sheet .hq-as-head{padding:24px 20px 12px}
.hs-find{position:sticky;top:0;z-index:2;padding:4px 16px 10px;background:var(--raised)}
.hs-q{display:flex;align-items:center;gap:8px;height:42px;padding:0 12px;border-radius:12px;background:var(--sunk);color:var(--muted)}
.hs-q svg{flex:none;width:18px;height:18px}
.hs-q input{flex:1;min-width:0;height:100%;border:0;background:none;color:var(--ink);font:400 16.5px var(--f-s);outline:0;padding:0;
  -webkit-appearance:none;appearance:none}
.hs-q input::placeholder{color:var(--muted)}
.hs-q.focus{box-shadow:0 0 0 2px var(--accent)}
.hs-shsec{margin:0;padding:14px 20px 6px;background:var(--raised);font:600 12px var(--f-s);letter-spacing:.07em;
  text-transform:uppercase;color:var(--muted)}
.hs-grp{background:var(--raised)}
.hs-sheet .hs-grp + .hs-shsec{border-top:8px solid var(--as-gap)}
.hs-sfoot{padding:10px 20px 34px;background:var(--raised);border-top:8px solid var(--as-gap)}
.hs-sfoot p{margin:6px 0 0;font-size:13px;line-height:1.45;color:var(--muted)}
.hs-row{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;padding:0;border:0;background:none;
  color:var(--ink);font-family:var(--f-s);text-align:left;cursor:pointer;-webkit-tap-highlight-color:transparent}
.hs-rt{flex:1;min-width:0}
.hs-rt b{display:block;font-size:16px;font-weight:500;line-height:1.3}
.hs-rt small{display:block;margin-top:2px;font-size:13.5px;line-height:1.35;color:var(--muted)}
.hs-ic{flex:none;width:34px;height:34px;border-radius:10px;display:grid;place-items:center;background:var(--tile);color:var(--accent)}
.hs-row .chev{flex:none;color:var(--muted)}

/* On a computer it drops from the avatar, search focused, the keys at its foot. */
.hs-drop{position:fixed;inset:0;z-index:3000;font-family:var(--f-s);color:var(--ink);
  --as-gap:color-mix(in srgb, var(--ground) 70%, var(--line))}
.hs-drop *{box-sizing:border-box}
.hs-drop-catch{position:absolute;inset:0}
.hs-pop{position:absolute;top:62px;right:20px;width:404px;max-width:calc(100vw - 24px);max-height:min(700px, calc(100vh - 80px));
  display:flex;flex-direction:column;border-radius:18px;background:var(--raised);overflow:hidden;outline:0;
  box-shadow:0 24px 70px rgba(0,0,0,.26),0 2px 8px rgba(0,0,0,.08);
  opacity:0;transform:translateY(-6px);transition:opacity .14s ease-out,transform .18s ease-out}
.hs-drop.open .hs-pop{opacity:1;transform:none}
.hs-drop.closing .hs-pop{opacity:0;transition:opacity .12s ease-in}
html[data-theme="dark"] .hs-pop,html[data-room="dark"] .hs-pop{box-shadow:0 24px 70px rgba(0,0,0,.6),0 0 0 1px var(--line)}
.hs-pop .hq-as-head{flex:none;padding:18px 20px 10px;background:var(--raised)}
.hs-pop .hq-as-t{margin:0;font:400 22px/1.15 var(--f-l);color:var(--ink)}
.hs-pop .hq-as-m{margin:6px 0 0;font-size:14.5px;color:var(--muted)}
.hs-pop .hs-find{position:static;padding:2px 16px 10px}
.hs-pop .hs-hrow{min-height:58px;padding-top:7px;padding-bottom:7px}
.hs-pop .hs-hrow .hs-face{--s:36px}
.hs-pop .hs-hrow + .hs-hrow::before{left:70px}
.hs-body{flex:1;min-height:0;overflow:auto;overscroll-behavior:contain}
.hs-keys{flex:none;display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 16px 10px 20px;
  border-top:1px solid var(--line);font-size:12.5px;color:var(--muted)}
.hs-keys span{white-space:nowrap}
.hs-keys kbd{display:inline-block;min-width:20px;padding:1px 5px;margin:0 2px;border:1px solid var(--firm);border-bottom-width:2px;
  border-radius:5px;font:600 11.5px var(--f-s);text-align:center;color:var(--soft)}
.hs-act{display:inline-flex;align-items:center;gap:2px;border:0;background:none;padding:8px 0;color:var(--link);
  font:600 14.5px var(--f-s);cursor:pointer;white-space:nowrap}
.hs-act .chev svg{width:14px;height:14px}

/* Switching: the screen clears to the House's face until the server says yes. */
.hs-cover{position:fixed;inset:0;z-index:2900;display:flex;flex-direction:column;align-items:center;justify-content:center;
  gap:16px;padding:0 40px;background:var(--ground);color:var(--ink);text-align:center;font-family:var(--f-s);
  opacity:0;transition:opacity .16s ease-out}
.hs-cover.open{opacity:1}
.hs-cover .hs-face{--s:88px;box-shadow:0 10px 30px rgba(0,0,0,.18)}
.hs-cover h2{margin:8px 0 0;font:400 27px/1.15 var(--f-d);letter-spacing:-.015em;color:var(--ink)}
.hs-cover p{margin:0;font-size:15px;color:var(--muted)}
.hs-bar{width:120px;height:3px;border-radius:2px;background:var(--line);overflow:hidden;margin-top:10px}
.hs-bar i{display:block;width:45%;height:100%;border-radius:2px;background:var(--accent);animation:hs-run 1.1s ease-in-out infinite}
@keyframes hs-run{0%{transform:translateX(-100%)}100%{transform:translateX(240%)}}
@media (prefers-reduced-motion:reduce){ .hs-bar i{animation:none;transform:translateX(60%)} }
/* "You're in Theo Marsh's House.", with his face, then gone. */
.looktoast.hs-arrived{display:flex;align-items:center;gap:10px;padding-left:8px}
.looktoast.hs-arrived .hs-face{--s:26px;border-radius:8px}