/* ==========================================================================
   Timefolk Night (2 Oct 2026): the signed-in website, admin console and every panel.
   Locked in design-system/MASTER.md, section "Night (2 Oct 2026)". Every rule here is scoped under
   html.tf-night, which app.js puts on <html> only for a signed-in member on an app page while the server
   flag UI_NIGHT is on for them. Without that class nothing in this file matches, so public pages and
   anyone outside the flag render exactly as they did.
   The base stylesheet carries years of patches, many of them !important, so contested properties here are
   !important too and the selectors repeat .tf-night to outrank the design E rules they replace.
   ========================================================================== */

/* ---------- 1. Tokens: light first, dark wherever the site resolves dark ---------- */
html.tf-night.tf-night.tf-night.tf-night{
  color-scheme:light;
  --n-ground:#F6EFE7; --n-panel:#FFFFFF; --n-sheet:#F6EFE7; --n-sheet-cell:#FFFFFF; --n-map:#EFE7DC;
  --n-ink:#1B1C1A; --n-ink-2:#5F5A51; --n-chev:rgba(60,60,67,.30);
  --n-sep:rgba(60,60,67,.18); --n-hair:rgba(40,30,19,.10);
  --n-accent:#896A44; --n-on-accent:#FFFFFF; --n-gold:#896A44; --n-gold-text:#74552F; --n-gold-tint:rgba(137,106,68,.12);
  --n-fill:rgba(118,118,128,.12); --n-fill-2:rgba(118,118,128,.20);
  --n-switch-off:rgba(120,120,128,.16);
  --n-seg-track:rgba(118,118,128,.12); --n-seg-thumb:#FFFFFF;
  --n-glass:rgba(255,255,255,.78); --n-tab-sel:rgba(137,106,68,.12); --n-tab-idle:#5F5A51;
  --n-stop-tile:#B3251E; --n-stop:#B3251E; --n-stop-tint:rgba(179,37,30,.10);
  --n-ok:#3F6B4F; --n-ok-tint:rgba(63,107,79,.12);
  --n-scrim:rgba(27,28,26,.32); --n-photo-chip:rgba(0,0,0,.55);
  --n-thumb-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04);
  --n-font:-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif;
  --n-font-display:-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",sans-serif;
  --n-ease:cubic-bezier(.2,.7,.2,1); --n-ease-sheet:cubic-bezier(.32,.72,0,1);
  --n-side:260px; --n-col:920px; --n-col-wide:1240px; --n-gutter:24px; --n-colw:var(--n-col);
}
/* The column each page reads at: 920 by default, the canvas's 576 for the feeds and lists, wider for the
   admin console's tables. The header's icons, the bell panel and the fixed strips all align to it. */
html.tf-night.tf-night.tf-night.tf-night:is([data-view="browse"],[data-view="explore"],[data-view="bookings"],[data-view="saved"]){--n-colw:calc(576px + 2 * var(--n-gutter))}
html.tf-night.tf-night.tf-night.tf-night[data-view="admin"]{--n-colw:var(--n-col-wide)}
/* Design E resolves dark unless light was chosen; the installed app (no tf-e) follows data-theme, then the OS. */
html.tf-night.tf-night.tf-night.tf-night.tf-e:not([data-theme="light"]),
html.tf-night.tf-night.tf-night.tf-night[data-theme="dark"]{
  color-scheme:dark;
  --n-ground:#131312; --n-panel:#1F201D; --n-sheet:#1B1C1A; --n-sheet-cell:#272824; --n-map:#2A2B27;
  --n-ink:#F1EBE0; --n-ink-2:#ADA69A; --n-chev:rgba(235,235,245,.30);
  --n-sep:rgba(255,255,255,.12); --n-hair:rgba(255,255,255,.10);
  --n-accent:#D9BD92; --n-on-accent:#131312; --n-gold:#D9BD92; --n-gold-text:#D9BD92; --n-gold-tint:rgba(217,189,146,.16);
  --n-fill:rgba(118,118,128,.24); --n-fill-2:rgba(118,118,128,.34);
  --n-switch-off:rgba(120,120,128,.32);
  --n-seg-track:rgba(118,118,128,.24); --n-seg-thumb:#5A5A5E;
  --n-glass:rgba(30,31,28,.78); --n-tab-sel:rgba(255,255,255,.10); --n-tab-idle:rgba(241,235,224,.75);
  --n-stop-tile:#C4473F; --n-stop:#F1B8B5; --n-stop-tint:rgba(196,71,63,.18);
  --n-ok:#A9CDB2; --n-ok-tint:rgba(143,203,162,.14);
  --n-scrim:rgba(0,0,0,.50);
}
@media (prefers-color-scheme:dark){
  html.tf-night.tf-night.tf-night.tf-night:not(.tf-e):not([data-theme="light"]){
    color-scheme:dark;
    --n-ground:#131312; --n-panel:#1F201D; --n-sheet:#1B1C1A; --n-sheet-cell:#272824; --n-map:#2A2B27;
    --n-ink:#F1EBE0; --n-ink-2:#ADA69A; --n-chev:rgba(235,235,245,.30);
    --n-sep:rgba(255,255,255,.12); --n-hair:rgba(255,255,255,.10);
    --n-accent:#D9BD92; --n-on-accent:#131312; --n-gold:#D9BD92; --n-gold-text:#D9BD92; --n-gold-tint:rgba(217,189,146,.16);
    --n-fill:rgba(118,118,128,.24); --n-fill-2:rgba(118,118,128,.34);
    --n-switch-off:rgba(120,120,128,.32);
    --n-seg-track:rgba(118,118,128,.24); --n-seg-thumb:#5A5A5E;
    --n-glass:rgba(30,31,28,.78); --n-tab-sel:rgba(255,255,255,.10); --n-tab-idle:rgba(241,235,224,.75);
    --n-stop-tile:#C4473F; --n-stop:#F1B8B5; --n-stop-tint:rgba(196,71,63,.18);
    --n-ok:#A9CDB2; --n-ok-tint:rgba(143,203,162,.14);
    --n-scrim:rgba(0,0,0,.50);
  }
}
/* The site's own tokens, pointed at Night, so every component that already reads them follows. The
   profile cards re-declare the old dark set on themselves under design E, so they are re-pointed too. */
html.tf-night.tf-night.tf-night.tf-night,
html.tf-night.tf-night.tf-night.tf-night.tf-e:not([data-theme="light"]) :is(.rcard,.xcard,.procard,.gcard,.folk-card,.preview-card){
  --bg:var(--n-ground); --bg-deep:var(--n-ground); --panel:var(--n-panel); --panel-2:var(--n-fill); --ph-bg:var(--n-map);
  --text:var(--n-ink); --text-2:var(--n-ink-2); --text-3:var(--n-ink-2); --muted:var(--n-ink-2);
  --hair:var(--n-sep); --border:var(--n-sep); --border-tint:var(--n-gold-tint); --control-edge:var(--n-ink-2);
  --teal:var(--n-gold-text); --teal-deep:var(--n-gold-text); --teal-soft:var(--n-gold-tint);
  --accent:var(--n-gold-text); --accent-2:var(--n-accent); --accent-soft:var(--n-gold-tint); --gold:var(--n-accent);
  --error:var(--n-stop); --error-soft:var(--n-stop-tint); --warn:var(--n-gold-text); --warn-soft:var(--n-gold-tint);
  --ok:var(--n-ok); --ok-soft:var(--n-ok-tint);
  --glass:var(--n-panel); --glass-strong:var(--n-panel); --glass-tint:var(--n-panel);
  --shadow-1:none; --shadow-2:none; --shadow-3:none; --inner:0 0 0 transparent;
  --paper:var(--n-ground); --ink:var(--n-ink); --ink-2:var(--n-ink-2); --mist:var(--n-glass); --plate:var(--n-panel);
  --ivory:var(--n-ground); --ivory-2:var(--n-panel); --ivory-3:var(--n-panel);
  --char:var(--n-ground); --char-2:var(--n-sheet); --char-3:var(--n-panel); --char-4:var(--n-sheet-cell);
  --cream:var(--n-ink); --cream-2:var(--n-ink-2); --cream-3:var(--n-ink-2);
  --edge:var(--n-sep); --edge-2:var(--n-sep); --edge-dark:var(--n-sep);
  --btn-fill:var(--n-accent); --btn-fill-h:var(--n-accent); --btn-ink:var(--n-on-accent);
  --night:var(--n-ground); --night-2:var(--n-panel); --sky:var(--n-accent);
  --aqua:var(--n-panel); --lavender:var(--n-panel); --peach:var(--n-panel);
  --display:var(--n-font-display); --body:var(--n-font); --serif:var(--n-font-display);
  --r-l:26px; --r-xl:26px;
}

/* ---------- 2. Base ---------- */
html.tf-night.tf-night.tf-night body{background:var(--n-ground)!important;color:var(--n-ink)!important;font-family:var(--n-font)!important;
  font-size:17px;line-height:22px;letter-spacing:0}
html.tf-night .atmos{display:none!important}
html.tf-night ::selection{background:var(--n-gold-tint)}
html.tf-night.tf-night :focus-visible{outline:2px solid var(--n-accent)!important;outline-offset:2px}
html.tf-night.tf-night :is(#root,body > .modal-bg) a:not(.btn){color:var(--n-gold-text)}
html.tf-night.tf-night body :is(button,input,select,textarea){font-family:var(--n-font)}
html.tf-night.tf-night #root :is(h1,h2,h3,h4),html.tf-night.tf-night body > .modal-bg :is(h1,h2,h3,h4){font-family:var(--n-font-display)!important;color:var(--n-ink)!important;text-wrap:balance}
/* Large titles carry the page; section titles carry a panel; headlines carry a card. */
html.tf-night.tf-night #main :is(h1,h2){font-size:34px!important;line-height:41px!important;font-weight:700!important;letter-spacing:.01em!important}
html.tf-night.tf-night #main :is(.card,.glass,.glass-strong,section,aside) h2{font-size:22px!important;line-height:28px!important}
@media (max-width:767px){html.tf-night.tf-night #main :is(h1,h2):not(:is(.card,.glass,.glass-strong,section,aside) *){font-size:30px!important;line-height:36px!important}}
html.tf-night.tf-night #main h3{font-size:22px!important;line-height:28px!important;font-weight:700!important;letter-spacing:.01em!important}
html.tf-night.tf-night #main :is(.card,.glass,.glass-strong) h3{font-size:17px!important;line-height:22px!important;font-weight:600!important;letter-spacing:0!important}
html.tf-night.tf-night #main h4{font-size:17px!important;line-height:22px!important;font-weight:600!important;letter-spacing:0!important}
html.tf-night.tf-night #root .eyebrow{font-family:var(--n-font)!important;font-size:13px!important;line-height:18px!important;font-weight:400!important;
  letter-spacing:0!important;text-transform:uppercase;color:var(--n-ink-2)!important;margin-bottom:6px}
html.tf-night.tf-night #root .eyebrow::before{display:none!important}
html.tf-night.tf-night :is(#root,body > .modal-bg) :is(p,.muted){color:var(--n-ink-2)}
html.tf-night.tf-night :is(#root,body > .modal-bg) .lead{font-size:17px!important;line-height:24px!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night :is(#root,body > .modal-bg) .small{font-size:15px;line-height:20px}
html.tf-night.tf-night :is(#root,body > .modal-bg) .tiny{font-size:13px;line-height:18px}
html.tf-night.tf-night :is(#root,body > .modal-bg) .hint{color:var(--n-ink-2)!important}
html.tf-night.tf-night :is(#root,body > .modal-bg) .skel{background:var(--n-fill)!important;border-radius:12px}
html.tf-night.tf-night #root hr{border:0;border-top:.5px solid var(--n-sep)}

/* ---------- 3. Shell: sidebar at 1024 and wider, floating glass tab bar below ---------- */
html.tf-night #nside{display:none}
@media (min-width:1024px){
  html.tf-night #nside{position:fixed;top:0;left:0;bottom:0;width:var(--n-side);z-index:86;display:flex;flex-direction:column;
    background:var(--n-panel);border-right:.5px solid var(--n-sep);padding:24px 12px 20px;box-sizing:border-box;overflow-y:auto;
    overscroll-behavior:contain;color:var(--n-ink);font-family:var(--n-font)}
  html.tf-night.tf-night.tf-night #root{margin-left:var(--n-side)}
  html.tf-night.tf-night.tf-night body #tabs{display:none!important}
}
html.tf-night .nside-top{padding:0 12px;display:flex;flex-direction:column;align-items:flex-start;gap:6px}
html.tf-night.tf-night .nword{font-family:var(--n-font-display);font-size:24px;line-height:30px;font-weight:700;letter-spacing:.01em;
  color:var(--n-gold-text)!important;text-decoration:none!important}
html.tf-night .ncity{position:relative;align-self:stretch}
html.tf-night .nchip{height:30px;padding:0 10px;border-radius:15px;background:var(--n-fill);border:0;color:var(--n-ink);display:inline-flex;
  align-items:center;gap:6px;font:15px/20px var(--n-font);cursor:pointer;transition:background .18s var(--n-ease)}
html.tf-night .nchip:hover{background:var(--n-fill-2)}
html.tf-night .nchip svg{color:var(--n-ink-2);flex:none}
html.tf-night .ncity-pop{margin-top:8px}
html.tf-night .ncity-pop .combo{position:relative}
html.tf-night .ncity-pop .combo-list{left:0;right:0;width:auto;z-index:5}
html.tf-night .nside-nav{display:flex;flex-direction:column;gap:2px;margin-top:18px}
html.tf-night .nside-nav button{height:44px;display:flex;align-items:center;gap:12px;padding:0 12px;border-radius:12px;box-sizing:border-box;
  background:transparent;border:0;color:var(--n-ink);font:400 17px/22px var(--n-font);text-align:left;cursor:pointer;width:100%;
  transition:background .18s var(--n-ease),color .18s var(--n-ease)}
html.tf-night .nside-nav button svg{width:22px;height:22px;flex:none;color:var(--n-gold-text);stroke-width:1.7}
html.tf-night .nside-nav button span:first-of-type{flex:1;min-width:0;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
html.tf-night .nside-nav button:hover{background:var(--n-fill)}
html.tf-night .nside-nav button[aria-current="page"],html.tf-night .nside-nav button[aria-expanded="true"]{background:var(--n-gold-tint);color:var(--n-gold-text);font-weight:600}
html.tf-night .nside-n{font-size:15px;font-weight:400;color:var(--n-ink-2)}
/* While the menu is open, Menu is the one selected place, in the sidebar and in the tab bar alike. */
html.tf-night .nside-nav:has(.nside-menu[aria-expanded="true"]) button[aria-current="page"]{background:transparent;color:var(--n-ink);font-weight:400}
html.tf-night .nside-foot{margin-top:auto;padding:24px 4px 0}
/* "Browsing as": an iOS segmented control on the existing role switches. */
html.tf-night .nrole{display:flex;flex-direction:column;gap:8px}
html.tf-night .nlabel{padding:0 8px;font-size:13px;line-height:18px;color:var(--n-ink-2);text-transform:uppercase}
html.tf-night .nnote{padding:0 8px;font-size:13px;line-height:18px;color:var(--n-ink-2)}
html.tf-night .nseg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;padding:2px;height:36px;border-radius:10px;
  background:var(--n-seg-track);box-sizing:border-box}
html.tf-night .nseg button{border-radius:8px;background:none;border:0;padding:0;color:var(--n-ink);display:flex;align-items:center;justify-content:center;
  font:500 14px/18px var(--n-font);white-space:nowrap;cursor:pointer;transition:background .24s var(--n-ease)}
html.tf-night .nseg button[aria-pressed="true"]{background:var(--n-seg-thumb);box-shadow:var(--n-thumb-shadow);font-weight:600;cursor:default}

/* The header. Wide: the bell and the emergency button float as glass circles at the top right of the
   column, and the sidebar does the rest. Narrow: a quiet bar over the page, wordmark and actions. */
html.tf-night.tf-night.tf-night body .nav{top:0!important;left:0!important;right:0!important;padding:0!important;pointer-events:none;z-index:90!important}
html.tf-night.tf-night.tf-night body .nav .bar{max-width:none!important;height:56px!important;border-radius:0!important;margin:0!important;
  padding:0 max(8px,env(safe-area-inset-right)) 0 max(16px,env(safe-area-inset-left))!important;gap:4px!important;
  background:color-mix(in srgb,var(--n-ground) 82%,transparent)!important;border:0!important;border-bottom:.5px solid var(--n-sep)!important;
  box-shadow:none!important;backdrop-filter:blur(20px) saturate(1.4)!important;-webkit-backdrop-filter:blur(20px) saturate(1.4)!important}
/* The clock mark next to the name, as on the home page (owner, 4 Oct 2026: "there's no logo"). */
html.tf-night.tf-night.tf-night body .nav .brand{display:inline-flex!important;align-items:center!important;gap:8px!important}
html.tf-night.tf-night.tf-night body .nav .brand svg,html.tf-night.tf-night.tf-night body .nav .brand img{display:block!important;width:26px!important;height:26px!important;flex:none}
html.tf-night.tf-night.tf-night body .nav .brand,html.tf-night.tf-night.tf-night body .nav .brand span{font-family:var(--n-font-display)!important;font-size:20px!important;
  font-weight:700!important;letter-spacing:.01em!important;color:var(--n-gold-text)!important;text-decoration:none!important}
html.tf-night.tf-night.tf-night body .nav :is(.links,.title-m){display:none!important}
html.tf-night.tf-night.tf-night body .nav .icon-btn{width:44px!important;height:44px!important;border-radius:22px!important;color:var(--n-ink)!important;background:none!important;border:0!important}
html.tf-night.tf-night.tf-night body .nav .icon-btn:hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night body .nav .icon-btn svg{width:21px!important;height:21px!important;stroke-width:1.7}
html.tf-night.tf-night.tf-night body .nav .icon-btn.sos{color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night body .nav .bell-dot{top:2px!important;right:2px!important;min-width:18px!important;height:18px!important;padding:0 5px!important;border-radius:9px!important;
  background:var(--n-stop-tile)!important;color:#FFFFFF!important;font:600 12px/18px var(--n-font)!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night body .nav .nav-city{display:none!important}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night body .nav{left:var(--n-side)!important}
  html.tf-night.tf-night.tf-night body .nav .bar{height:76px!important;background:transparent!important;border:0!important;
    backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none!important;
    max-width:var(--n-colw)!important;margin:0 auto!important;padding:16px var(--n-gutter) 0!important;align-items:flex-start!important;gap:8px!important}
  html.tf-night.tf-night.tf-night body .nav :is(.brand,.nav-menu){display:none!important}
  html.tf-night.tf-night.tf-night body .nav .icon-btn{pointer-events:auto;background:var(--n-glass)!important;border:1px solid var(--n-hair)!important;
    backdrop-filter:blur(20px)!important;-webkit-backdrop-filter:blur(20px)!important;box-sizing:border-box}
  html.tf-night.tf-night.tf-night body .nav .icon-btn:hover{background:var(--n-panel)!important}
  html.tf-night.tf-night.tf-night body .nav .bell-dot{top:-4px!important;right:-4px!important}
}

/* The tab bar: floating glass, one capsule of five. */
@media (max-width:1023px){
  html.tf-night.tf-night.tf-night body #tabs.tabs{left:16px!important;right:16px!important;bottom:calc(16px + env(safe-area-inset-bottom))!important;height:64px!important;
    border-radius:32px!important;background:var(--n-glass)!important;border:1px solid var(--n-hair)!important;box-shadow:none!important;
    backdrop-filter:blur(24px) saturate(1.4)!important;-webkit-backdrop-filter:blur(24px) saturate(1.4)!important;
    display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);align-items:center;padding:0 6px!important;gap:0!important;box-sizing:border-box;max-width:560px;margin:0 auto}
  html.tf-night.tf-night.tf-night body #tabs.tabs.hidden{display:none!important}
  /* The bar stays over the menu sheet, so Menu reads as the selected tab while it is open. */
  html.tf-night.tf-night.tf-night body #tabs.tabs{z-index:112!important}
  html.tf-night.tf-night.tf-night body #tabs.tabs button{min-height:0!important;height:54px!important;border-radius:27px!important;background:none!important;border:0!important;
    display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:2px!important;padding:0!important;
    color:var(--n-tab-idle)!important;font:500 10px/12px var(--n-font)!important;white-space:nowrap;box-shadow:none!important;transform:none!important}
  html.tf-night.tf-night.tf-night body #tabs.tabs button svg{width:24px!important;height:24px!important;stroke-width:1.6}
  html.tf-night.tf-night.tf-night body #tabs.tabs button span{font:inherit!important;color:inherit!important;letter-spacing:0!important}
  html.tf-night.tf-night.tf-night body #tabs.tabs button[aria-current="page"],
  html.tf-night.tf-night.tf-night body #tabs.tabs button[aria-expanded="true"]{background:var(--n-tab-sel)!important;color:var(--n-gold-text)!important;font-weight:600!important}
  html.tf-night.tf-night.tf-night body #tabs.tabs button::before,html.tf-night.tf-night.tf-night body #tabs.tabs button::after{display:none!important}
  html.tf-night.tf-night.tf-night body #tabs.tabs:has(button[aria-expanded="true"]) button[aria-current="page"]{background:none!important;color:var(--n-tab-idle)!important;font-weight:500!important}
}

/* ---------- 4. The page column ---------- */
html.tf-night.tf-night.tf-night #root .page{padding-top:calc(56px + 20px)!important}
html.tf-night.tf-night.tf-night #root .page.has-tabs{padding-left:0!important;padding-right:0!important;padding-bottom:calc(64px + 16px + 40px + env(safe-area-inset-bottom))!important}
html.tf-night.tf-night.tf-night #root .page > .wrap{max-width:var(--n-colw)!important;margin-left:auto!important;margin-right:auto!important;
  padding-left:16px!important;padding-right:16px!important;box-sizing:border-box}
@media (min-width:768px){html.tf-night.tf-night.tf-night #root .page > .wrap{padding-left:var(--n-gutter)!important;padding-right:var(--n-gutter)!important}}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night #root .page{padding-top:84px!important}
  html.tf-night.tf-night.tf-night #root .page.has-tabs{padding-bottom:56px!important}
}
/* The footer stays, as a quiet ground under the column rather than a band across the window. */
html.tf-night.tf-night.tf-night #root footer.foot{width:auto!important;margin:56px auto 0!important;max-width:var(--n-col);background:transparent!important;
  border-top:.5px solid var(--n-sep)!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night #root footer.foot :is(a,li,p,span,h3){color:var(--n-ink-2)!important;font-family:var(--n-font)!important}
html.tf-night.tf-night.tf-night #root footer.foot :is(.foot-h,h3){font-size:13px!important;letter-spacing:0!important;text-transform:uppercase}
html.tf-night.tf-night.tf-night #root footer.foot svg{color:var(--n-ink-2)}

/* ---------- 5. Surfaces: grouped cards, radius 26, no border, no shadow ---------- */
html.tf-night.tf-night.tf-night #root :is(.glass,.glass-strong,.glass-tint,.card):not(.rcard):not(.bcard){background:var(--n-panel)!important;border:0!important;
  box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;border-radius:26px!important}
html.tf-night.tf-night.tf-night #root :is(.glass,.glass-strong,.card)::before{display:none!important}
html.tf-night.tf-night.tf-night #root .card{padding:20px}
html.tf-night.tf-night.tf-night #root :is(.glass,.glass-strong,.card) :is(.glass,.glass-strong,.card){background:var(--n-fill)!important;border-radius:16px!important}
html.tf-night.tf-night.tf-night #root .lift:hover,html.tf-night.tf-night.tf-night #root .host:hover{transform:none!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .empty{background:var(--n-panel)!important;border:0!important;border-radius:26px!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .empty .ico{background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;border:0!important}

/* ---------- 6. Buttons: gold capsule, fill capsule, plain text ---------- */
html.tf-night.tf-night.tf-night body .btn{min-height:50px;height:auto;padding:0 20px;border-radius:999px!important;border:0!important;box-shadow:none!important;
  font:600 17px/22px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;transform:none!important;
  transition:background .18s var(--n-ease),opacity .12s var(--n-ease),color .18s var(--n-ease)!important}
html.tf-night.tf-night.tf-night body .btn:hover{text-decoration:none!important}
html.tf-night.tf-night.tf-night body .btn:active{opacity:.72}
html.tf-night.tf-night.tf-night body .btn-primary{background:var(--n-accent)!important;color:var(--n-on-accent)!important;background-image:none!important}
html.tf-night.tf-night.tf-night body .btn-primary:hover{background:color-mix(in srgb,var(--n-accent) 88%,var(--n-ink))!important}
html.tf-night.tf-night.tf-night body .btn-primary svg{color:var(--n-on-accent)!important}
html.tf-night.tf-night.tf-night body .btn-secondary{background:var(--n-fill)!important;color:var(--n-gold-text)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tf-night.tf-night.tf-night body .btn-secondary:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night body .btn-ghost{background:transparent!important;color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night body .btn-ghost:hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night body .btn-danger{background:var(--n-fill)!important;color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night body .btn-danger:hover{background:var(--n-stop-tint)!important}
html.tf-night.tf-night.tf-night body .btn-sm{min-height:34px!important;height:auto;padding:0 14px!important;font-size:15px!important;line-height:20px!important;border-radius:999px!important}
html.tf-night.tf-night.tf-night body .btn-lg{min-height:50px!important;padding:0 24px!important;font-size:17px!important}
html.tf-night.tf-night.tf-night body .btn[disabled],html.tf-night.tf-night.tf-night body .btn[aria-disabled="true"]{opacity:.4!important}
html.tf-night.tf-night.tf-night body .btn.loading::after{border-color:currentColor!important;border-top-color:transparent!important}
html.tf-night.tf-night.tf-night body .linkish{color:var(--n-gold-text)!important}

/* ---------- 7. Fields: filled, borderless, 12 radius ---------- */
html.tf-night.tf-night.tf-night body :is(.input,.select,.textarea),
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) :is(input[type="text"],input[type="email"],input[type="tel"],input[type="number"],input[type="search"],input[type="password"],input[type="url"],input[type="date"],input[type="time"],input[type="datetime-local"],input:not([type]),select,textarea):not(.tf-lang){
  background:var(--n-fill)!important;border:0!important;border-radius:12px!important;box-shadow:none!important;color:var(--n-ink)!important;
  min-height:44px;font:400 17px/22px var(--n-font)!important;outline:none}
html.tf-night.tf-night.tf-night body .textarea,html.tf-night.tf-night.tf-night #root textarea{min-height:96px;line-height:24px!important}
html.tf-night.tf-night.tf-night body :is(.input,.select,.textarea,input,select,textarea)::placeholder{color:var(--n-ink-2)!important;opacity:1}
html.tf-night.tf-night.tf-night body :is(.input,.select,.textarea):focus,
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) :is(input,select,textarea):focus{box-shadow:0 0 0 2px var(--n-accent)!important;outline:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .field label,html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) label.lbl{font-size:13px!important;line-height:18px!important;font-weight:400!important;
  color:var(--n-ink-2)!important;text-transform:uppercase;letter-spacing:0!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .field .err{color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .field.invalid :is(.input,.select){box-shadow:0 0 0 2px var(--n-stop)!important}
html.tf-night.tf-night.tf-night body :is(input[type="checkbox"],input[type="radio"],input[type="range"],progress){accent-color:var(--n-accent)}
html.tf-night.tf-night.tf-night body .combo-list{background:var(--n-sheet-cell)!important;border:0!important;border-radius:14px!important;
  box-shadow:0 12px 32px rgba(0,0,0,.28)!important;backdrop-filter:none!important}
html.tf-night.tf-night.tf-night body .combo-list li{color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night body .combo-list [aria-selected="true"],html.tf-night.tf-night.tf-night body .combo-list li:hover{background:var(--n-gold-tint)!important}

/* ---------- 8. Chips, tags, status pills ---------- */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .chip{min-height:34px!important;height:34px;padding:0 14px!important;border-radius:17px!important;background:var(--n-fill)!important;
  border:0!important;color:var(--n-ink)!important;font:400 15px/20px var(--n-font)!important;box-shadow:none!important;transform:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .chip svg{color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .chip:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) :is(.chip[aria-pressed="true"],.chip.on){background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;font-weight:600!important;border:0!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tag{height:24px;padding:0 10px!important;border-radius:12px!important;background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;
  font:600 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .status,html.tf-night.tf-night.tf-night body .modal-bg .status{height:24px;padding:0 10px!important;border-radius:12px!important;border:0!important;
  font:600 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;box-shadow:none!important;
  background:var(--n-fill)!important;color:var(--n-ink-2)!important;backdrop-filter:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) :is(.status.accepted,.status.upcoming,.status.live,.status.completed,.status.confirmed,.status.ok){background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .status.held{background:var(--n-stop-tint)!important;color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .status svg{width:13px!important;height:13px!important}

/* ---------- 9. Segmented controls (the site's .seg and tab rows) ---------- */
html.tf-night.tf-night.tf-night body .seg{display:inline-grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px!important;padding:2px!important;min-height:36px;
  border-radius:10px!important;background:var(--n-seg-track)!important;border:0!important;box-shadow:none!important;box-sizing:border-box}
html.tf-night.tf-night.tf-night body .seg[style*="width:100%"]{display:grid!important}
html.tf-night.tf-night.tf-night body .seg{max-width:100%}
html.tf-night.tf-night.tf-night body .seg button{min-height:32px;border-radius:8px!important;background:none!important;border:0!important;color:var(--n-ink)!important;
  font:500 14px/18px var(--n-font)!important;padding:6px 12px!important;box-shadow:none!important;white-space:normal!important;text-align:center;min-width:0;
  transition:background .24s var(--n-ease)}
html.tf-night.tf-night.tf-night body .seg button:is(.on,[aria-selected="true"],[aria-checked="true"],[aria-pressed="true"]){background:var(--n-seg-thumb)!important;
  box-shadow:var(--n-thumb-shadow)!important;font-weight:600!important;color:var(--n-ink)!important}

/* ---------- 10. Key and value rows, tables ---------- */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv{min-height:48px;align-items:center;padding:12px 0!important;border-bottom:.5px solid var(--n-sep)!important;font-size:17px;line-height:22px}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv:last-child{border-bottom:0!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv .k{color:var(--n-ink)!important;text-transform:none!important;letter-spacing:0!important;font-weight:400!important;font-size:inherit!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv .v{color:var(--n-ink-2)!important;text-align:right;font-weight:400!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl{font:400 15px/20px var(--n-font)!important;border-collapse:collapse;width:100%;color:var(--n-ink)}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl th{font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:uppercase;color:var(--n-ink-2)!important;
  padding:10px 12px!important;border-bottom:.5px solid var(--n-sep)!important;background:transparent!important;text-align:left;white-space:nowrap}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl td{padding:12px!important;height:44px;box-sizing:border-box;border-bottom:.5px solid var(--n-sep)!important;vertical-align:middle;color:var(--n-ink)}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl tr:last-child td{border-bottom:0!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl tbody tr:hover td{background:var(--n-fill)}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .tbl :is(.btn-sm){min-height:30px!important;padding:0 12px!important;font-size:13px!important}
html.tf-night.tf-night.tf-night #root div[style*="overflow-x:auto"]{scrollbar-width:thin}

/* ---------- 11. Notices ---------- */
html.tf-night.tf-night.tf-night body .notice{background:var(--n-panel)!important;border:0!important;border-radius:16px!important;color:var(--n-ink-2)!important;box-shadow:none!important;
  font-size:15px;line-height:20px;padding:14px 16px!important}
html.tf-night.tf-night.tf-night #root :is(.card,.glass,.glass-strong) .notice{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night body .notice b{color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night body .notice svg{color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night body .notice.stop{background:var(--n-stop-tint)!important}
html.tf-night.tf-night.tf-night body .notice.stop :is(b,svg){color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night body .notice.ok svg{color:var(--n-ok)!important}

/* ---------- 12. Sheets, popups, the bell, toasts ---------- */
html.tf-night.tf-night.tf-night body > .modal-bg{background:var(--n-scrim)!important;backdrop-filter:blur(6px)!important;-webkit-backdrop-filter:blur(6px)!important}
html.tf-night.tf-night.tf-night body > .modal-bg > :is(.glass,.glass-strong,.card,.box,.sheet,div):not(.shots):not(img){background:var(--n-sheet)!important;color:var(--n-ink)!important;
  border:0!important;border-radius:26px!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tf-night.tf-night.tf-night body > .modal-bg :is(.glass,.glass-strong,.card) :is(.glass,.glass-strong,.card){background:var(--n-sheet-cell)!important;border:0!important;border-radius:16px!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night body > .modal-bg button[aria-pressed]:not(.btn):not(.chip){background:var(--n-sheet-cell)!important;border:0!important;border-radius:16px!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night body > .modal-bg button[aria-pressed="true"]:not(.btn):not(.chip){box-shadow:0 0 0 2px var(--n-accent) inset!important}
html.tf-night.tf-night.tf-night body > .modal-bg :is(p,.small){color:var(--n-ink-2)}
html.tf-night.tf-night.tf-night body > .modal-bg .eyebrow{font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:uppercase;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night body > .modal-bg .eyebrow::before{display:none!important}
html.tf-night.tf-night.tf-night body > .modal-bg h2{font-size:28px!important;line-height:34px!important;font-weight:700!important;letter-spacing:0!important}
html.tf-night.tf-night.tf-night body > .bellwrap .bellsheet{background:var(--n-sheet)!important;border:0!important;border-radius:26px!important;box-shadow:0 18px 48px rgba(0,0,0,.32)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--n-ink)}
html.tf-night.tf-night.tf-night body > .bellwrap .bellsheet b{font:600 17px/22px var(--n-font)}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow{border-radius:14px!important;padding:12px!important}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow:hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow.unread{background:var(--n-gold-tint)!important}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow-i{color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow-t b{font:600 15px/20px var(--n-font)!important;color:var(--n-ink)}
html.tf-night.tf-night.tf-night body > .bellwrap .bellrow-t :is(.small,.tiny){color:var(--n-ink-2)!important}
@media (min-width:1024px){html.tf-night.tf-night.tf-night body > .bellwrap .bellsheet{top:68px!important;right:max(24px,calc((100vw - var(--n-side) - var(--n-colw)) / 2 + var(--n-gutter)))!important}}
html.tf-night.tf-night.tf-night body > .toast{background:var(--n-sheet-cell)!important;color:var(--n-ink)!important;border:0!important;border-radius:14px!important;
  box-shadow:0 10px 30px rgba(0,0,0,.28)!important;font:500 15px/20px var(--n-font)!important}
@media (max-width:1023px){html.tf-night.tf-night.tf-night body > .toast{bottom:calc(64px + 16px + 16px + env(safe-area-inset-bottom))!important}}
@media (min-width:1024px){html.tf-night.tf-night.tf-night body > .toast{left:calc(50% + var(--n-side) / 2)!important}}

/* ---------- 13. The menu: a sheet of inset grouped lists ---------- */
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu{position:fixed!important;inset:56px 0 0 0!important;width:auto!important;max-height:none!important;height:auto!important;
  margin:0!important;border:0!important;border-radius:0!important;box-shadow:none!important;background:var(--n-ground)!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important;z-index:110!important;overflow-y:auto!important;
  padding:20px 16px calc(64px + 16px + 32px + env(safe-area-inset-bottom))!important;flex-direction:column!important;gap:22px!important;
  color:var(--n-ink)!important;font-family:var(--n-font)!important;animation:nightSheet .24s var(--n-ease-sheet) both!important}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu{inset:0 0 0 var(--n-side)!important;padding:32px max(24px,calc((100vw - var(--n-side) - 600px) / 2)) 48px!important;z-index:84!important}
  html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu .nmm-role{display:none!important}
}
@media (min-width:640px) and (max-width:1023px){
  html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu{padding-left:max(16px,calc((100vw - 600px) / 2))!important;padding-right:max(16px,calc((100vw - 600px) / 2))!important}
}
@keyframes nightSheet{from{opacity:0;transform:translateY(12px)}to{opacity:1;transform:none}}
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu[hidden]{display:none!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .nmm-head{display:flex;align-items:flex-end;justify-content:space-between;padding:6px 4px 0;order:-3!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .nmm-title{margin:0;font:700 34px/41px var(--n-font-display)!important;letter-spacing:.01em;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .nmm-role{order:-2!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .nmm-role .nrole{gap:6px}
html.tf-night.tf-night.tf-night.tf-night body #mmenu :is(.mm-toprow,.mm-theme){position:static!important;inset:auto!important;width:auto!important;height:auto!important;
  display:flex!important;align-items:center!important;justify-content:space-between;gap:12px!important;margin:0!important;padding:0 16px!important;min-height:52px;
  background:var(--n-panel)!important;border:0!important;border-radius:26px!important;color:var(--n-ink)!important;transform:none!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-toprow{order:4!important;padding:8px 8px 8px 16px!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-theme{order:3!important;width:100%!important;max-width:none!important;align-self:stretch!important;flex:0 0 auto!important;box-sizing:border-box}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-theme > span{display:block!important;font:400 17px/22px var(--n-font)!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu :is(nav,.mm-sections,.mm-cats){position:static!important;inset:auto!important;display:flex!important;flex-direction:column!important;
  gap:22px!important;padding:0!important;margin:0!important;max-width:none!important;width:auto!important;grid-template-columns:none!important;text-align:left!important;order:1!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu nav[aria-label="Menu"]{order:2!important}
/* The admin console's menu groups its two dozen sections; design E laid them out as a five-column grid. */
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu:has(.mm-cats) nav.mm-sections.mm-cats{display:flex!important;flex-direction:column!important;gap:22px!important;grid-template-columns:none!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu:has(.mm-cats) nav[aria-label="Menu"]{margin-top:0!important;padding-top:0!important;border-top:0!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu:has(.mm-cats) nav[aria-label="Menu"] .mm-group{display:flex!important;flex-direction:column!important;flex-wrap:nowrap!important;gap:0!important;align-items:stretch!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu.mmenu:has(.mm-cats) nav .mm-group a{font-size:17px!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group{display:flex!important;flex-direction:column!important;gap:0!important;margin:0!important;padding:0!important;order:0!important;
  position:static!important;inset:auto!important;transform:none!important;width:auto!important;max-width:none!important;text-align:left!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group h3{margin:0 0 8px!important;padding:0 16px!important;font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;
  text-transform:uppercase;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a{position:relative;display:flex!important;align-items:center;min-height:52px;margin:0!important;padding:0 40px 0 16px!important;
  background:var(--n-panel)!important;color:var(--n-ink)!important;font:400 17px/22px var(--n-font)!important;letter-spacing:0!important;border-radius:0!important;
  text-decoration:none!important;white-space:normal!important;transition:background .18s var(--n-ease)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a:hover,
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a:focus-visible{background:color-mix(in srgb,var(--n-panel) 88%,var(--n-ink))!important;padding-left:16px!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a::after{content:"";position:absolute;right:18px;top:50%;width:7px;height:7px;margin-top:-4px;
  border-right:2px solid var(--n-chev);border-top:2px solid var(--n-chev);transform:rotate(45deg);border-radius:1px}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a + a::before{content:"";position:absolute;left:16px;right:0;top:0;height:.5px;background:var(--n-sep)}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group h3 + a{border-radius:26px 26px 0 0!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a:last-child{border-radius:0 0 26px 26px!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group h3 + a:last-child{border-radius:26px!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a.mm-logout{color:var(--n-stop)!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-group a.mm-logout::after{display:none}
html.tf-night.tf-night.tf-night.tf-night body #mmenu a.mm-getapp{position:static!important;inset:auto!important;height:34px!important;min-height:34px;padding:0 14px!important;
  border-radius:17px!important;background:var(--n-fill)!important;color:var(--n-gold-text)!important;font:600 15px/20px var(--n-font)!important;
  display:inline-flex!important;align-items:center;gap:6px;border:0!important;box-shadow:none!important;text-decoration:none!important}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-lang{background:var(--n-fill)!important;border:0!important;border-radius:17px!important;color:var(--n-ink)!important;height:34px}
html.tf-night.tf-night.tf-night.tf-night body #mmenu .mm-lang select{color:var(--n-ink)!important;background:transparent!important;font:400 15px/20px var(--n-font)!important}
/* The dark-mode switch, as an iOS switch. */
html.tf-night.tf-night.tf-night.tf-night body .tswitch{background:none!important;border:0!important;padding:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night.tf-night body .tswitch .tswitch-track{width:51px!important;height:31px!important;border-radius:16px!important;background:var(--n-switch-off)!important;
  border:0!important;box-shadow:none!important;position:relative;display:block}
html.tf-night.tf-night.tf-night.tf-night body .tswitch[aria-checked="true"] .tswitch-track{background:var(--n-accent)!important}
html.tf-night.tf-night.tf-night.tf-night body .tswitch .tswitch-ico{display:none!important}
html.tf-night.tf-night.tf-night.tf-night body .tswitch .tswitch-knob{position:absolute!important;top:2px!important;left:2px!important;width:27px!important;height:27px!important;
  border-radius:14px!important;background:#FFFFFF!important;box-shadow:0 3px 8px rgba(0,0,0,.15),0 3px 1px rgba(0,0,0,.06)!important;transition:transform .24s var(--n-ease)!important;transform:none!important}
html.tf-night.tf-night.tf-night.tf-night body .tswitch[aria-checked="true"] .tswitch-knob{transform:translateX(20px)!important}

/* ---------- 14. Section menus (profile, host studio, Guardian, admin) ---------- */
html.tf-night.tf-night.tf-night #root .studio-sheet{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html.tf-night.tf-night.tf-night #root .studio-nav{background:var(--n-panel)!important;border:0!important;border-radius:26px!important;box-shadow:none!important;padding:8px!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tf-night.tf-night.tf-night #root .studio-link{min-height:44px;display:flex;align-items:center;gap:12px;padding:0 12px!important;border-radius:12px!important;border:0!important;
  background:transparent!important;color:var(--n-ink)!important;font:400 17px/22px var(--n-font)!important;letter-spacing:0!important;text-decoration:none!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .studio-link:hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night #root :is(.studio-link.on,.studio-link[aria-current="page"],.studio-link[aria-current="true"],.studio-link[aria-selected="true"]){background:var(--n-gold-tint)!important;
  color:var(--n-gold-text)!important;font-weight:600!important}
html.tf-night.tf-night.tf-night #root .studio-link svg{color:var(--n-gold-text)}
html.tf-night.tf-night.tf-night #root :is(.signout,.studio-link.signout){color:var(--n-stop)!important}

/* ---------- 15. Host, booking and feed cards ---------- */
html.tf-night.tf-night.tf-night #root .rcard{background:var(--n-panel)!important;border:0!important;border-radius:26px!important;box-shadow:none!important;outline:0;overflow:hidden;padding:0!important}
html.tf-night.tf-night.tf-night #root .rcard::before,html.tf-night.tf-night.tf-night #root .rcard::after{display:none!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-media{border-radius:0!important;margin:0!important;box-shadow:none!important;border:0!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-media :is(img,.shots){border-radius:0!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-pill{background:var(--n-photo-chip)!important;color:#FFFFFF!important;border:0!important;height:30px;padding:0 12px!important;border-radius:15px!important;
  font:600 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important;
  display:inline-flex;align-items:center}
html.tf-night.tf-night.tf-night #root .rcard .rcard-body{padding:8px 16px 12px 12px!important;background:transparent!important}
html.tf-night.tf-night.tf-night #root .rcard :is(.rcard-title){font:600 17px/22px var(--n-font)!important;color:var(--n-ink)!important;letter-spacing:0!important}
html.tf-night.tf-night.tf-night #root .rcard :is(.rcard-kind,.rcard-likes){font:400 13px/18px var(--n-font)!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-star{color:var(--n-ink)!important;font:600 13px/18px var(--n-font)!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-price{color:var(--n-ink-2)!important;font:400 15px/20px var(--n-font)!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-price b{color:var(--n-ink)!important;font-weight:600!important}
html.tf-night.tf-night.tf-night #root .rcard .rcard-like{color:var(--n-ink)!important;background:none!important;border:0!important}
html.tf-night.tf-night.tf-night #root .rcard .btn-primary{background:var(--n-fill)!important;color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .vbadge{background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .vbadge svg{color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night #root .sug{background:var(--n-panel)!important;border:0!important;border-radius:22px!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .sug img{border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .sug b{color:var(--n-ink)!important;font:600 15px/20px var(--n-font)!important}
html.tf-night.tf-night.tf-night #root .sug > span:not(.btn){color:var(--n-ink-2)!important;font-size:13px!important}
html.tf-night.tf-night.tf-night #root .bcard{background:var(--n-panel)!important;border:0!important;border-radius:26px!important;box-shadow:none!important;overflow:hidden}
html.tf-night.tf-night.tf-night #root .bcard .portrait{border-radius:0!important}
html.tf-night.tf-night.tf-night #root .bcard .body{padding:14px 16px 16px!important;gap:4px!important}
html.tf-night.tf-night.tf-night #root .bcard .name{font:600 17px/22px var(--n-font)!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night #root .bcard .meta{font:400 15px/20px var(--n-font)!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night #root .bcard .meta b{color:var(--n-ink)!important;font-weight:600}
html.tf-night.tf-night.tf-night #root .gbadge{color:var(--n-gold-text)!important;font-size:13px}

/* ---------- 16. Profile and dashboard headers ---------- */
html.tf-night.tf-night.tf-night #root .phead{background:transparent!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .phead :is(h1,h2,.phead-name){font-size:28px!important;line-height:34px!important;font-weight:700!important;color:var(--n-ink)!important;letter-spacing:0!important}
html.tf-night.tf-night.tf-night #root :is(.pavatar,.pro-pic){border:0!important;box-shadow:none!important;outline:0!important}
html.tf-night.tf-night.tf-night #root .pavatar-edit{background:var(--n-sheet-cell)!important;color:var(--n-ink)!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root :is(.availnote,.ladder-tip){background:var(--n-fill)!important;border:0!important;border-radius:14px!important}
html.tf-night.tf-night.tf-night #root .av-day{border-top-width:.5px!important;border-top-color:var(--n-sep)!important}
html.tf-night.tf-night.tf-night #root .pstats{background:transparent!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .phead-side .pstats{background:var(--n-panel)!important;border-radius:26px!important;overflow:hidden}
/* On a phone the admin console's header stacks: name, then its controls, so a long name never squeezes. */
@media (max-width:767px){
  html.tf-night.tf-night.tf-night #root .phead.no-avatar{grid-template-columns:minmax(0,1fr)!important;grid-template-areas:"name" "actions" "stats" "bio"!important}
  html.tf-night.tf-night.tf-night #root .phead.no-avatar .phead-actions{justify-self:start!important;flex-wrap:wrap!important}
  html.tf-night.tf-night.tf-night #root .phead.no-avatar .phead-top h2{overflow-wrap:anywhere}
}
@media (min-width:900px){
  /* The controls get a row of their own under the bio: at Night's 34px capsules they no longer fit on the
     name's line beside the badges. */
  html.tf-night.tf-night.tf-night:not([data-view="profile"]) #root .phead:not(.no-avatar):not(.phead-side){
    grid-template-areas:"avatar name name" "avatar stats stats" "avatar bio bio" "avatar actions actions"!important}
  html.tf-night.tf-night.tf-night:not([data-view="profile"]) #root .phead:not(.no-avatar):not(.phead-side) .phead-actions{grid-area:actions!important;
    justify-self:start!important;align-self:start!important;flex-wrap:wrap!important;gap:8px!important}
}
html.tf-night.tf-night.tf-night #root .pstat{border-color:var(--n-sep)!important;background:transparent!important}
html.tf-night.tf-night.tf-night #root .pstat b{font:700 22px/28px var(--n-font)!important;color:var(--n-ink)!important;font-variant-numeric:tabular-nums}
html.tf-night.tf-night.tf-night #root .pstat span{font:400 13px/18px var(--n-font)!important;color:var(--n-ink-2)!important;text-transform:none!important;letter-spacing:0!important}

/* ---------- 17. Page specifics ---------- */
/* Discover, Explore, Requests and Saved read as one 576px column, the measure the canvas draws them at. */
html.tf-night.tf-night.tf-night #root .igfeed{max-width:none!important}
html.tf-night.tf-night.tf-night #root .rcard.xcard:hover .rcard-media img{transform:none!important}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night #root .igfeed > .fcard{width:100%!important}
  html.tf-night.tf-night.tf-night #root .igfeed .fcard .rcard-media{aspect-ratio:16/10!important}
  html.tf-night.tf-night.tf-night #root .igfeed .fcard .rcard-media img{object-position:50% 25%}
  /* The city lives in the sidebar on a wide screen, so the page's own flag would say it twice. */
  html.tf-night.tf-night.tf-night #main .citysw{display:none!important}
}
/* The Discover search: a filled capsule, as on the canvas. */
html.tf-night.tf-night.tf-night #root .dsearch{height:44px!important;min-height:44px;border-radius:22px!important;background:var(--n-fill)!important;border:0!important;box-shadow:none!important;
  color:var(--n-ink-2)!important;font:400 17px/22px var(--n-font)!important;padding:0 16px!important;backdrop-filter:none!important}
html.tf-night.tf-night.tf-night #root .dsearch :is(span,.dsearch-t){color:var(--n-ink-2)!important;font:inherit!important}
html.tf-night.tf-night.tf-night #root .dsearch svg{color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night #root .dsearch-row{gap:10px!important}
html.tf-night.tf-night.tf-night #root .flagbtn{background:var(--n-fill)!important;border:0!important;box-shadow:none!important}
/* Requests: an inset grouped list of rows, thumbnail, title, the time and place, the state on the right. */
html.tf-night.tf-night.tf-night #root .hosts:has(> .bcard){display:flex!important;flex-direction:column!important;gap:0!important;grid-template-columns:none!important;
  background:var(--n-panel);border-radius:26px;overflow:hidden;padding:4px 0}
html.tf-night.tf-night.tf-night #root .host.bcard{position:relative!important;display:grid!important;grid-template-columns:56px minmax(0,1fr)!important;align-items:center!important;gap:12px!important;
  padding:12px 16px!important;border:0!important;border-radius:0!important;background:transparent!important;box-shadow:none!important;transition:background .18s var(--n-ease)!important}
html.tf-night.tf-night.tf-night #root .host.bcard:hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night #root .host.bcard.glass + .host.bcard.glass::before{content:""!important;display:block!important;opacity:1!important;position:absolute;
  left:84px;right:0;top:0;height:.5px;width:auto;background:var(--n-sep)!important;pointer-events:none}
html.tf-night.tf-night.tf-night #root .host.bcard .portrait{position:static!important;width:56px!important;height:56px!important;aspect-ratio:1/1!important;border-radius:28px!important;
  overflow:visible!important;background:none!important}
html.tf-night.tf-night.tf-night #root .host.bcard .portrait img{width:56px!important;height:56px!important;border-radius:28px!important;object-fit:cover;transform:none!important}
html.tf-night.tf-night.tf-night #root .host.bcard .portrait .float{position:absolute!important;left:auto!important;right:16px!important;top:14px!important;transform:none!important;max-width:none!important}
html.tf-night.tf-night.tf-night #root .host.bcard .body{padding:0!important;gap:2px!important;min-width:0}
html.tf-night.tf-night.tf-night #root .host.bcard .name{padding-right:118px;font:600 17px/22px var(--n-font)!important;letter-spacing:0!important}
html.tf-night.tf-night.tf-night #root .host.bcard .meta{font:400 15px/20px var(--n-font)!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night #root .host.bcard .status{font:600 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;height:24px;padding:0 10px!important;
  display:inline-flex;align-items:center;gap:5px}
html.tf-night.tf-night.tf-night #root .host.bcard .status svg{display:inline-block!important}
html.tf-night.tf-night.tf-night #root section:has(> .hosts > .bcard) > h3{margin:0 0 10px!important;padding:0 4px}
/* Profile, host studio, Guardian and admin: cards in the pane get air between them; the pane runs to the
   foot of the window rather than stopping short of it. */
html.tf-night.tf-night.tf-night #root .studio-body{display:flex!important;flex-direction:column!important;gap:16px!important}
@media (min-width:900px){
  html.tf-night.tf-night.tf-night #root .page.app > .wrap{height:calc(100dvh - 76px)!important;max-height:calc(100dvh - 76px)!important;padding-bottom:24px!important}
}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night #root .page.app > .wrap{height:calc(100dvh - 84px)!important;max-height:calc(100dvh - 84px)!important}
}
/* Inline pills drawn with a 1px outline become filled pills. */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) :is([style*="border-radius:99px"],[style*="border-radius:999px"])[style*="border:1px solid"]{border:0!important;background:var(--n-fill)!important;
  padding:6px 12px!important;color:var(--n-ink)!important}
/* The host page: the safeguards grid keeps each icon beside its line, the next openings and the
   calendar take the filled and gold treatment. */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .grid > .row.small{flex-wrap:nowrap!important;align-items:flex-start!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .grid > .row.small > span:first-child{flex:none}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .nextday{background:var(--n-fill)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;padding:10px 12px!important;transform:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .nextday:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .nextday b{font:600 15px/20px var(--n-font)!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .nextday span{font:400 13px/18px var(--n-font)!important;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .cal .day{border-radius:50%!important;border-color:transparent!important;color:var(--n-ink)!important;font:400 15px/20px var(--n-font)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .cal .day:not(.off):hover{background:var(--n-fill)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .cal .day.sel{background:var(--n-accent)!important;color:var(--n-on-accent)!important;font-weight:600!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .cal .day.off{color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .slots .chip.on{background:var(--n-accent)!important;color:var(--n-on-accent)!important}

/* Key and value rows: a one-word label never shrinks under a long value. */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv .k{flex:1 1 auto!important;min-width:min-content!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .kv .v{flex:0 0 auto!important;max-width:60%;min-width:0;overflow-wrap:anywhere}
/* Numbers in a card are headlines, not page numbers. */
html.tf-night.tf-night.tf-night #root :is(.card,.glass,.glass-strong):not(.phead) .pstats{flex-wrap:wrap!important;gap:12px 20px!important}
html.tf-night.tf-night.tf-night #root :is(.card,.glass,.glass-strong):not(.phead) .pstat b{font-size:17px!important;line-height:22px!important}
html.tf-night.tf-night.tf-night #root :is(.card,.glass,.glass-strong):not(.phead) .pstat{flex:1 1 auto!important;min-width:0}
html.tf-night.tf-night.tf-night #root :is(.card,.glass,.glass-strong):not(.phead) .pstat span{white-space:normal!important}
/* The admin console's "Needs you" strip and its filters. */
html.tf-night.tf-night.tf-night #root .adm-att{background:var(--n-panel)!important;border:0!important;border-radius:26px!important;padding:12px 16px!important;gap:8px!important}
html.tf-night.tf-night.tf-night #root .adm-att-h{font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:uppercase;color:var(--n-ink-2)!important;margin-right:4px}
html.tf-night.tf-night.tf-night #root .adm-att-h.ok{color:var(--n-ok)!important}
html.tf-night.tf-night.tf-night #root .adm-att-i{height:34px;border:0!important;background:var(--n-fill)!important;color:var(--n-ink)!important;border-radius:17px!important;
  padding:0 14px 0 5px!important;font:400 15px/20px var(--n-font)!important;gap:8px!important}
html.tf-night.tf-night.tf-night #root .adm-att-i:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night #root .adm-att-i b{min-width:24px;height:24px;border-radius:12px!important;background:var(--n-accent)!important;color:var(--n-on-accent)!important;
  font:600 13px/24px var(--n-font)!important;padding:0 7px!important}
html.tf-night.tf-night.tf-night #root .admfilt-l{font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;color:var(--n-ink-2)!important;text-transform:uppercase}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .select-sm{min-height:34px!important;height:34px;padding:0 28px 0 12px!important;font-size:15px!important;line-height:20px!important}
/* Fixed strips (the introduction prompt, verification, text alerts, restrictions) and the cookie note. */
html.tf-night.tf-night.tf-night #root .restrict-bar{background:var(--n-sheet-cell)!important;border:0!important;border-radius:26px!important;
  box-shadow:0 12px 36px rgba(0,0,0,.30)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tf-night.tf-night.tf-night #root .restrict-bar b{color:var(--n-ink)!important}
@media (max-width:1023px){
  html.tf-night.tf-night.tf-night #root .restrict-bar{left:16px!important;right:16px!important;bottom:calc(64px + 16px + 12px + env(safe-area-inset-bottom))!important;border-radius:22px!important}
}
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night #root .restrict-bar{left:auto!important;right:max(24px,calc((100vw - var(--n-side) - var(--n-colw)) / 2 + var(--n-gutter)))!important;
    max-width:min(560px,calc(100vw - var(--n-side) - 48px))!important;bottom:24px!important}
}
html.tf-night.tf-night.tf-night body .cookie-bar{background:var(--n-sheet-cell)!important;color:var(--n-ink-2)!important;border:0!important;box-shadow:none!important;
  backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
html.tf-night.tf-night.tf-night body .cookie-bar b{color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night body .cookie-bar a{color:var(--n-gold-text)!important}
@media (min-width:1024px){html.tf-night.tf-night.tf-night body .cookie-bar{left:calc(var(--n-side) + 16px)!important}}

/* Time slots, the chosen time, the payment rails: filled tiles, the choice in gold. */
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .timechip{height:34px;padding:0 14px!important;border:0!important;border-radius:17px!important;background:var(--n-fill)!important;
  color:var(--n-ink)!important;font:400 15px/20px var(--n-font)!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .timechip:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .timechip.on{background:var(--n-accent)!important;color:var(--n-on-accent)!important;font-weight:600!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .chosen{background:var(--n-gold-tint)!important;border:0!important;border-radius:14px!important;box-shadow:none!important;padding:12px 14px!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .chosen b{font:600 17px/22px var(--n-font)!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .payway{background:var(--n-fill)!important;border:0!important;border-radius:14px!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .payway:hover{background:var(--n-fill-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .payway.on{background:var(--n-gold-tint)!important;box-shadow:inset 0 0 0 2px var(--n-accent)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .payway-i{color:var(--n-gold-text)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .addrbox{background:var(--n-fill)!important;border:0!important;border-radius:14px!important}
/* Faces and the small map lose their outlines; the Guardian marker on a card is a photo chip. */
html.tf-night.tf-night.tf-night #root :is(.cpface,.hface){border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night #root .minimap{border:0!important;border-radius:16px!important;box-shadow:none!important;overflow:hidden}
html.tf-night.tf-night.tf-night #root .minimap-cta{background:var(--n-glass)!important;color:var(--n-ink)!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
html.tf-night.tf-night.tf-night #root .rcard-guard{background:var(--n-photo-chip)!important;color:#FFFFFF!important;box-shadow:none!important;backdrop-filter:blur(14px)!important;-webkit-backdrop-filter:blur(14px)!important}
/* Hairlines stay hairlines. */
html.tf-night.tf-night.tf-night #root :is(.kv.total,.idea,.cal-foot,p.respect,.rvenue){border-top-width:.5px!important;border-top-color:var(--n-sep)!important}
/* The admin console's collapsible regions and country codes. */
html.tf-night.tf-night.tf-night #root :is(.globreg,.secass-cov){background:var(--n-fill)!important;border:0!important;border-radius:16px!important}
html.tf-night.tf-night.tf-night #root .ccode{background:var(--n-fill)!important;border:0!important;color:var(--n-ink)!important}

/* The search sheet's filters. */
html.tf-night.tf-night.tf-night body > .modal-bg .filterbar{background:var(--n-sheet-cell)!important;border:0!important;border-radius:20px!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) .fb-grid{background:transparent!important;border:0!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night body > .modal-bg :is(.filterbar,.fb-grid) label:not(.check){font:400 13px/18px var(--n-font)!important;letter-spacing:0!important;text-transform:uppercase;color:var(--n-ink-2)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) label.check{font:400 15px/20px var(--n-font)!important;letter-spacing:0!important;text-transform:none!important;color:var(--n-ink)!important}
html.tf-night.tf-night.tf-night :is(#root,body > .modal-bg) label.check span{text-transform:none!important;letter-spacing:0!important}
html.tf-night.tf-night.tf-night body > .modal-bg .sh-bar :is(input,.input){box-shadow:none!important}
html.tf-night.tf-night.tf-night body > .modal-bg .sh-quick :is(button,a){border:0!important}

/* Activity illustrations: the whole drawing, contained, on a tinted panel, in the cut that matches the theme. */
html.tf-night .nill{display:block;width:100%;height:100%;box-sizing:border-box;padding:7%;background-color:var(--n-gold-tint);
  background-image:var(--nill-l);background-repeat:no-repeat;background-position:center;background-size:contain;background-origin:content-box}
html.tf-night.tf-e:not([data-theme="light"]) .nill,html.tf-night[data-theme="dark"] .nill{background-image:var(--nill-d)}
@media (prefers-color-scheme:dark){html.tf-night:not(.tf-e):not([data-theme="light"]) .nill{background-image:var(--nill-d)}}
html.tf-night.tf-night.tf-night #root .host.bcard .portrait:has(> .nill){border-radius:14px!important;overflow:hidden!important}
html.tf-night.tf-night.tf-night #root .host.bcard .portrait > .nill{padding:5px;border-radius:14px}

/* ---------- 18. Motion: confirmation only ---------- */
@media (prefers-reduced-motion:reduce){
  html.tf-night *,html.tf-night *::before,html.tf-night *::after{animation-duration:.01ms!important;transition-duration:.01ms!important}
}

/* Admin: the sidebar carries every console section, so the second column is not drawn beside it (3 Oct 2026). */
@media (min-width:1024px){
  html.tf-night[data-view="admin"] #main .studio > .studio-menu{display:none}
  html.tf-night[data-view="admin"] #main .studio{grid-template-columns:minmax(0,1fr)!important}
}

/* ---------- Admin console in the iPad app's design (owner, 3 Oct 2026: "it should look amazing") ----------
   The same parts the iPad console is drawn from: grouped sidebar, large titles, inset grouped panels with
   hairline rows, filled controls. Scoped to the admin view; nothing a member sees changes. */
html.tf-night[data-view="admin"] body,html.tf-night[data-view="admin"] #main{background:var(--n-ground)!important}
html.tf-night[data-view="admin"] #main{font-family:var(--n-font)!important;color:var(--n-ink)!important}
html.tf-night[data-view="admin"] #main .wrap{max-width:var(--n-col-wide)!important}
html.tf-night[data-view="admin"] .admin-body{gap:22px!important;padding-bottom:48px!important}
/* Sidebar: grouped like Settings on iPad, tighter rows so every section fits. */
html.tf-night[data-view="admin"] .nside-group{font:600 13px/18px var(--n-font)!important;letter-spacing:.02em!important;text-transform:uppercase!important;color:var(--n-ink-2)!important;padding:18px 12px 6px!important}
html.tf-night[data-view="admin"] .nside-nav{margin-top:6px!important;gap:1px!important}
html.tf-night[data-view="admin"] .nside-nav button{height:38px!important;font-size:16px!important;gap:11px!important;border-radius:10px!important}
html.tf-night[data-view="admin"] .nside-nav button svg{width:20px!important;height:20px!important}
/* Header: large title, quiet subtitle, bar buttons in gold. */
html.tf-night[data-view="admin"] .admin-head{background:transparent!important;border:0!important;box-shadow:none!important;padding:0!important}
html.tf-night[data-view="admin"] .admin-body .admin-head h2{font:700 34px/41px var(--n-font-display)!important;letter-spacing:.01em!important;color:var(--n-ink)!important}
html.tf-night[data-view="admin"] .admin-head .pbio{font-size:15px!important;line-height:20px!important;color:var(--n-ink-2)!important;max-width:62ch!important}
html.tf-night[data-view="admin"] .admin-head .status{background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;border:0!important;font-weight:600!important}
html.tf-night[data-view="admin"] .admin-body .admin-head .phead-actions .btn{background:transparent!important;color:var(--n-gold-text)!important;border:0!important;box-shadow:none!important;font-weight:600!important}
html.tf-night[data-view="admin"] .admin-body .admin-head .phead-actions .btn:hover{background:var(--n-gold-tint)!important}
html.tf-night[data-view="admin"] .admin-head .pstat b{font-variant-numeric:tabular-nums!important}
/* "Needs you": one grouped strip. */
html.tf-night[data-view="admin"] .adm-att{background:var(--n-panel)!important;border:0!important;box-shadow:none!important;border-radius:16px!important;padding:10px 14px!important}
html.tf-night[data-view="admin"] .adm-att-h{font:600 13px/18px var(--n-font)!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:var(--n-ink-2)!important}
html.tf-night[data-view="admin"] .adm-att-i{background:var(--n-fill)!important;border:0!important;color:var(--n-ink)!important;border-radius:15px!important}
html.tf-night[data-view="admin"] .adm-att-i b{background:var(--n-accent)!important;color:var(--n-on-accent)!important}
/* Section titles. */
html.tf-night[data-view="admin"] .admin-body .eyebrow{font:600 13px/18px var(--n-font)!important;text-transform:uppercase!important;letter-spacing:.02em!important;color:var(--n-ink-2)!important}
html.tf-night[data-view="admin"] .admin-body h2{font:700 28px/34px var(--n-font-display)!important;color:var(--n-ink)!important}
html.tf-night[data-view="admin"] .admin-body h3{font:600 20px/25px var(--n-font-display)!important;color:var(--n-ink)!important}
html.tf-night[data-view="admin"] .admin-body .small,html.tf-night[data-view="admin"] .admin-body .tiny{color:var(--n-ink-2)!important}
/* Panels: inset grouped, no border and no shadow. */
html.tf-night[data-view="admin"] .admin-body .glass,html.tf-night[data-view="admin"] .admin-body .glass-strong,html.tf-night[data-view="admin"] .admin-body .card{background:var(--n-panel)!important;border:0!important;box-shadow:none!important;border-radius:16px!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;color:var(--n-ink)!important}
/* A panel inside a panel is a row: hairline between, no box of its own. */
html.tf-night[data-view="admin"] .admin-body .card .card,html.tf-night[data-view="admin"] .admin-body .card .notice{background:transparent!important;border-radius:0!important;padding:12px 2px!important;border:0!important;border-bottom:.5px solid var(--n-sep)!important}
html.tf-night[data-view="admin"] .admin-body .card .card:last-child,html.tf-night[data-view="admin"] .admin-body .card .notice:last-child{border-bottom:0!important}
/* Totals: tiles with large tabular figures. */
html.tf-night[data-view="admin"] .admin-body .grid.g4>.card{padding:16px 18px!important}
html.tf-night[data-view="admin"] .admin-body .grid.g4>.card .small{font:600 13px/18px var(--n-font)!important;text-transform:uppercase!important;letter-spacing:.02em!important}
html.tf-night[data-view="admin"] .admin-body .grid.g4>.card>div:last-child{font:700 30px/36px var(--n-font-display)!important;font-variant-numeric:tabular-nums!important;color:var(--n-ink)!important}
/* Destination cards read as rows with a chevron. */
html.tf-night[data-view="admin"] .admin-body a.card.lift{position:relative!important;padding-right:40px!important;transition:background .18s var(--n-ease)!important;transform:none!important}
html.tf-night[data-view="admin"] .admin-body a.card.lift:hover{background:var(--n-sheet-cell)!important}
html.tf-night[data-view="admin"] .admin-body a.card.lift::after{content:""!important;position:absolute!important;right:18px!important;top:50%!important;width:8px!important;height:8px!important;margin-top:-5px!important;border-right:2px solid var(--n-chev)!important;border-top:2px solid var(--n-chev)!important;transform:rotate(45deg)!important}
/* Tables: list rows. */
html.tf-night[data-view="admin"] .admin-body .tbl{border-collapse:collapse!important;width:100%!important;font-size:15px!important}
html.tf-night[data-view="admin"] .admin-body .tbl th{font:600 12px/16px var(--n-font)!important;text-transform:uppercase!important;letter-spacing:.03em!important;color:var(--n-ink-2)!important;background:transparent!important;border:0!important;border-bottom:.5px solid var(--n-sep)!important;text-align:left!important;padding:8px 10px!important}
html.tf-night[data-view="admin"] .admin-body .tbl td{border:0!important;border-bottom:.5px solid var(--n-sep)!important;padding:11px 10px!important;color:var(--n-ink)!important;font-variant-numeric:tabular-nums!important}
html.tf-night[data-view="admin"] .admin-body .tbl tr:last-child td{border-bottom:0!important}
html.tf-night[data-view="admin"] .admin-body .tbl tbody tr:hover td{background:var(--n-fill)!important}
/* Controls: filled, like UIKit. */
html.tf-night[data-view="admin"] .admin-body .btn{border-radius:10px!important;box-shadow:none!important;font-weight:600!important}
html.tf-night[data-view="admin"] .admin-body .btn-primary{background:var(--n-accent)!important;color:var(--n-on-accent)!important;border:0!important}
html.tf-night[data-view="admin"] .admin-body .btn-secondary,html.tf-night[data-view="admin"] .admin-body .btn-ghost{background:var(--n-fill)!important;color:var(--n-gold-text)!important;border:0!important}
html.tf-night[data-view="admin"] .admin-body .btn-secondary:hover,html.tf-night[data-view="admin"] .admin-body .btn-ghost:hover{background:var(--n-fill-2)!important}
html.tf-night[data-view="admin"] .admin-body .chip{background:var(--n-fill)!important;color:var(--n-ink)!important;border:0!important;border-radius:14px!important}
html.tf-night[data-view="admin"] .admin-body .input,html.tf-night[data-view="admin"] .admin-body select,html.tf-night[data-view="admin"] .admin-body textarea{background:var(--n-fill)!important;border:0!important;border-radius:10px!important;color:var(--n-ink)!important;box-shadow:none!important}
html.tf-night[data-view="admin"] .admin-body .input:focus,html.tf-night[data-view="admin"] .admin-body select:focus,html.tf-night[data-view="admin"] .admin-body textarea:focus{outline:2px solid var(--n-accent)!important;outline-offset:0!important}
html.tf-night[data-view="admin"] .admin-body .status{border:0!important}
html.tf-night[data-view="admin"] .admin-body details summary{color:var(--n-gold-text)!important;cursor:pointer!important}
@media (prefers-reduced-motion:reduce){html.tf-night[data-view="admin"] .admin-body a.card.lift{transition:none!important}}
/* The Night sheet styles panels inside panels through #root; the admin rows need the same weight to read as rows. */
html.tf-night.tf-night.tf-night[data-view="admin"] #root .admin-body :is(.card,.glass,.glass-strong) :is(.notice:not(.stop),.card){background:transparent!important;box-shadow:none!important}
html.tf-night.tf-night.tf-night[data-view="admin"] #root .admin-body .admin-head h2{font:700 34px/41px var(--n-font-display)!important}

/* Admin header: the section is the title; who is signed in is a quiet line under it (3 Oct 2026). */
html.tf-night[data-view="admin"] .admin-top{display:flex;align-items:flex-end;justify-content:space-between;gap:16px;flex-wrap:wrap;padding-top:4px}
html.tf-night.tf-night[data-view="admin"] #root .admin-title{font:700 34px/41px var(--n-font-display)!important;letter-spacing:.01em;color:var(--n-ink)!important;margin:0!important}
html.tf-night[data-view="admin"] .admin-who{display:flex;align-items:center;gap:8px;flex-wrap:wrap;margin-top:6px;font:15px/20px var(--n-font);color:var(--n-ink-2)}
html.tf-night.tf-night[data-view="admin"] #root .admin-who .status{background:var(--n-gold-tint)!important;color:var(--n-gold-text)!important;border:0!important;font-weight:600}
html.tf-night.tf-night[data-view="admin"] #root .admin-top-r .btn{background:transparent!important;color:var(--n-gold-text)!important;border:0!important;box-shadow:none!important;font-weight:600}
html.tf-night.tf-night[data-view="admin"] #root .admin-top-r .btn:hover{background:var(--n-gold-tint)!important}
html.tf-night[data-view="admin"] .admin-foot{font:13px/18px var(--n-font);color:var(--n-ink-2);margin:8px 0 0;max-width:70ch}

/* Admin: the logo beside the wordmark, and the bell and emergency button sitting in the title row
   instead of an empty band above it (3 Oct 2026). */
html.tf-night[data-view="admin"] .nword{display:inline-flex!important;align-items:center;gap:10px}
html.tf-night[data-view="admin"] .nword svg{width:30px;height:30px;flex:none}
@media (min-width:1024px){
  html.tf-night.tf-night[data-view="admin"] #main{padding-top:20px!important}
  html.tf-night[data-view="admin"] #nav{background:transparent!important;border:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;pointer-events:none}
  html.tf-night[data-view="admin"] #nav .bellbtn,html.tf-night[data-view="admin"] #nav .sos,html.tf-night[data-view="admin"] #nav .bell-pop,html.tf-night[data-view="admin"] #nav [role="dialog"]{pointer-events:auto}
  html.tf-night[data-view="admin"] .admin-top{padding-right:128px}
}
@media (min-width:1024px){html.tf-night.tf-night.tf-night.tf-night[data-view="admin"] body #root #main{padding-top:14px!important}}

/* ---------- Host card in the app's design (3 Oct 2026). Tokens fall back for the classic theme. ---------- */
.acard{background:var(--n-panel,#fff);border-radius:20px;overflow:hidden;color:var(--n-ink,#1B1C1A);font-family:var(--n-font,system-ui);display:flex;flex-direction:column}
.acard-head{display:flex;align-items:center;gap:12px;padding:12px 16px;cursor:pointer}
.acard-av{width:40px;height:40px;border-radius:50%;object-fit:cover;flex:none;background:var(--n-fill,#eee)}
.acard-who{flex:1;min-width:0}
.acard-name{display:flex;align-items:center;gap:5px;font:600 17px/22px var(--n-font,system-ui)}
.acard-name>span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-seal{display:inline-flex;color:var(--n-gold,#896A44);flex:none}
.acard-seal svg{width:17px;height:17px}
.acard-meta{font:13px/18px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);margin-top:1px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.acard-more{color:var(--n-chev,rgba(60,60,67,.3));display:inline-flex}
.acard-more svg{width:18px;height:18px}
.acard-acts{margin:0;padding:0 16px 12px;font:15px/20px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A);cursor:pointer;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.acard-photo{position:relative;aspect-ratio:3/4;max-width:100%;background:var(--n-fill,#eee);cursor:pointer;overflow:hidden}
.acard-photo>img,.acard-photo .shots img{width:100%;height:100%;object-fit:cover;display:block}
.acard-photo .shots{display:flex;width:100%;height:100%;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none}
.acard-photo .shots::-webkit-scrollbar{display:none}
.acard-photo .shots img{flex:0 0 100%;scroll-snap-align:start}
.acard-guard{position:absolute;top:12px;left:12px;display:inline-flex;align-items:center;gap:5px;height:28px;padding:0 10px;border-radius:14px;
  background:rgba(0,0,0,.55);color:#fff;font:600 13px/18px var(--n-font,system-ui);backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px)}
.acard-guard svg{width:15px;height:15px}
.acard-bar{display:flex;align-items:center;gap:12px;padding:4px 16px 4px 8px;min-height:52px}
.acard-like{display:inline-flex;align-items:center;gap:6px;min-height:44px;padding:0 8px;background:transparent;border:0;color:var(--n-ink,#1B1C1A);cursor:pointer;font:15px/20px var(--n-font,system-ui)}
.acard-like svg{width:22px;height:22px}
.acard-like[aria-pressed="true"]{color:#FF3B30}
.acard-like[aria-pressed="true"] svg{fill:currentColor}
.acard-like .rcard-likes{color:var(--n-ink-2,#5F5A51);font-variant-numeric:tabular-nums}
.acard-price{margin-left:auto;font:15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);white-space:nowrap}
.acard-price b{color:var(--n-ink,#1B1C1A);font-weight:600}
.acard-price .dirham{width:.85em;height:.85em;vertical-align:-.05em}
.acard-req{min-height:34px;padding:0 16px;border-radius:17px;border:0;background:var(--n-accent,#896A44);color:var(--n-on-accent,#fff);font:600 15px/20px var(--n-font,system-ui);cursor:pointer;white-space:nowrap}
.acard-req:hover{filter:brightness(1.06)}
.acard :focus-visible{outline:2px solid var(--n-accent,#896A44);outline-offset:2px}

/* Sidebar city picker: the list stays inside the sidebar instead of running under its edge, with the
   country on its own line under the city (3 Oct 2026). */
html.tf-night #nside .ncity-pop .combo-list{left:0!important;right:0!important;min-width:0!important;max-width:none!important;width:auto!important}
html.tf-night #nside .ncity-pop .combo-list li{flex-wrap:wrap;row-gap:0}
html.tf-night #nside .ncity-pop .combo-list li .small{flex-basis:100%;text-align:left}
/* Footer: columns that fill top to bottom, so a long list beside a short one leaves no empty band under
   the short one (owner, 3 Oct 2026: "why this much space"). */
html.tf-night footer.foot .cols{display:block!important;columns:210px;column-gap:40px}
html.tf-night footer.foot .cols>div{break-inside:avoid;margin-bottom:28px}
/* The heart at the app's size (owner, 3 Oct 2026: "such a small heart"); the older feed rule shrank it. */
html body .acard .acard-bar .acard-like svg{width:24px!important;height:24px!important;min-width:24px}
html body .acard .acard-bar .acard-like{font-size:16px!important;gap:6px}
/* The sidebar's city search: text inset from the border instead of touching it, and the field kept
   inside the sidebar (3 Oct 2026). */
html.tf-night #nside .ncity-pop input{box-sizing:border-box!important;width:100%!important;max-width:100%!important;padding:0 14px!important;height:40px;border-radius:12px;margin:0!important}
html.tf-night #nside .ncity-pop{padding:0 2px;box-sizing:border-box;max-width:100%}
/* The clock mark beside the wordmark in every sidebar, not only the console's. */
html.tf-night .nside-top .nword{display:inline-flex!important;align-items:center;gap:10px}
html.tf-night .nside-top .nword svg{width:30px;height:30px;flex:none}
html body .acard .acard-seal{color:var(--n-gold,#896A44)!important}
html body .acard .acard-seal svg{width:18px!important;height:18px!important}
/* Host cards 15% smaller, centred in the column (owner, 3 Oct 2026). */
html body .acard{width:85%!important;max-width:85%!important;margin-left:auto!important;margin-right:auto!important;box-sizing:border-box}
@media (max-width:600px){html body .acard{width:100%!important;max-width:100%!important}}
/* Instead of a narrower card in a wider column: the whole Discover column 15% narrower, so the search,
   the headings, Near you and the cards share one left and right edge (owner, 3 Oct 2026). */
html body .acard{width:100%!important;max-width:100%!important}
@media (min-width:601px){html.tf-night[data-view="browse"] #main>.wrap,html.tf-night[data-view="explore"] #main>.wrap,html.tf-night[data-view="saved"] #main>.wrap{max-width:calc(490px + 2 * var(--n-gutter,24px))!important}}
@media (min-width:601px){html.tf-night.tf-night.tf-night.tf-night:is([data-view="browse"],[data-view="explore"],[data-view="saved"]) body #root #main>.wrap{max-width:calc(490px + 2 * var(--n-gutter,24px))!important;width:100%}}
/* The bell and emergency button at the right edge of the window, as on the admin page, instead of over
   the end of the search field (owner, 3 Oct 2026). */
@media (min-width:1024px){
  html.tf-night.tf-night.tf-night body #nav .bar{max-width:none!important;width:100%!important;padding-right:28px!important;box-sizing:border-box}
  html.tf-night #nav{pointer-events:none}
  html.tf-night #nav button,html.tf-night #nav a,html.tf-night #nav input,html.tf-night #nav [role="dialog"]{pointer-events:auto}
}
/* Every photo whole in the 3:4 frame (owner, 3 Oct 2026: "this photo isn't coming in our frame"): the
   picture is fitted, never cropped, and a blurred copy of itself fills whatever the shape leaves over. */
html body .acard .acard-photo .acard-shot{position:relative;flex:0 0 100%;width:100%;height:100%;overflow:hidden;scroll-snap-align:start;background:#111}
html body .acard .acard-photo .acard-shot::before{content:"";position:absolute;inset:-24px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.7);transform:scale(1.08)}
html body .acard .acard-photo .acard-shot img{position:relative;width:100%!important;height:100%!important;object-fit:contain!important;flex:none}
/* The seal after a name, sized to the name it follows. */
.tf-seal{display:inline-flex;align-items:center;vertical-align:middle;margin-left:.3em;color:var(--n-gold,#896A44);line-height:0}
.tf-seal svg{width:.8em;height:.8em;min-width:16px;min-height:16px}

/* ==========================================================================
   Host page and its request panel, part for part with the iPhone's HostDetail (owner, 3 Oct 2026).
   The photographs whole at 3:4, the name with the seal after it, the facts and the standing line under
   them; then About me, Quote, What you'll do, Speaks, Boundaries, My life, Reviews and Safety and
   verification, each a 22pt title over a grouped panel. The request reads like the app's sheet: what and
   where, When, Length, the Guardian, the Total and "Request and pay". Grouped panels are 20px round, no
   border and no shadow, with hairline separators between rows. Everything is scoped to main.hp.
   ========================================================================== */
html #main.hp{--hp-r:20px;--hp-cell:var(--n-panel,#fff)}
html #main.hp .hp-req{--hp-cell:var(--n-sheet-cell,#fff)}

/* The hero: each photo fitted, never cropped, over a blurred copy of itself. */
html #main.hp .hp-photos{position:relative;width:100%;max-width:520px;aspect-ratio:3/4;border-radius:var(--hp-r);overflow:hidden;background:#111}
html #main.hp .hp-shots{display:flex;width:100%;height:100%;overflow-x:auto;overflow-y:hidden;scroll-snap-type:x mandatory;scrollbar-width:none;overscroll-behavior-x:contain}
html #main.hp .hp-shots::-webkit-scrollbar{display:none}
html #main.hp :is(.hp-shot,.hp-tile){position:relative;overflow:hidden;background:#111;cursor:zoom-in}
html #main.hp .hp-shot{flex:0 0 100%;width:100%;height:100%;scroll-snap-align:start}
html #main.hp :is(.hp-shot,.hp-tile)::before{content:"";position:absolute;inset:-24px;background:var(--bg) center/cover no-repeat;filter:blur(22px) brightness(.7);transform:scale(1.08)}
html #main.hp :is(.hp-shot,.hp-tile) img{position:relative;display:block;width:100%!important;height:100%!important;object-fit:contain!important;border-radius:0!important}
html #main.hp .hp-photos .shot-dots{z-index:2}
html #main.hp .hp-who{padding:14px 4px 0;display:flex;flex-direction:column;gap:6px;min-width:0}
html #main.hp .hp-name{margin:0;font:700 34px/41px var(--n-font-display,system-ui)!important;letter-spacing:0;color:var(--n-ink,#1B1C1A);overflow-wrap:anywhere}
html #main.hp .hp-name .tf-seal svg{width:.5em;height:.5em;min-width:17px;min-height:17px}
html #main.hp .hp-prof{margin:0;font:600 17px/22px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-facts{margin:0;font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51)}
html #main.hp .hp-standing{margin:4px 0 0;display:flex;flex-wrap:wrap;align-items:center;gap:6px;font:600 13px/18px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A)}
html #main.hp :is(.hp-guard,.hp-rate){display:inline-flex;align-items:center;gap:5px}
html #main.hp .hp-guard-i{display:inline-flex;color:var(--n-gold,#896A44)}
html #main.hp :is(.hp-guard-i,.hp-star) svg{width:15px;height:15px}
html #main.hp .hp-star{display:inline-flex;color:var(--n-ink-2,#5F5A51)}
html #main.hp .hp-star.on{color:var(--n-gold,#896A44)}
html #main.hp .hp-star.on svg{fill:currentColor}

/* Sections: a 22pt title, then its panel 10px under it, 30px between sections. */
html #main.hp .hp-secs{display:flex;flex-direction:column;gap:30px;padding-top:24px}
html #main.hp .hp-h{margin:0 0 10px!important;padding:0 4px;font:700 22px/28px var(--n-font-display,system-ui)!important;letter-spacing:0!important;color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-panel{background:var(--hp-cell)!important;border:0!important;box-shadow:none!important;border-radius:var(--hp-r)!important;overflow:hidden;color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-text{padding:14px 18px;font:400 17px/24px var(--n-font,system-ui);white-space:pre-line;overflow-wrap:anywhere}
html #main.hp .hp-note{margin:8px 16px 0;font:400 13px/18px var(--n-font,system-ui)!important;color:var(--n-ink-2,#5F5A51)!important;text-align:left}
html #main.hp .hp-quote{margin:0;padding:0 4px;font:italic 400 20px/28px ui-serif,"New York",Georgia,"Times New Roman",serif;color:var(--n-ink,#1B1C1A);border:0;background:none;quotes:none}
html #main.hp #hostAvail{border-radius:var(--hp-r)!important}

/* A grouped panel's rows, with the 0.5px separator starting where the text starts. */
html #main.hp .hp-row{position:relative;display:flex;align-items:center;gap:14px;min-height:48px;padding:11px 16px;box-sizing:border-box;--hp-inset:16px}
html #main.hp .hp-row:has(.hp-tick){--hp-inset:54px}
html #main.hp .hp-group > .hp-row + .hp-row::before,
html #main.hp .hp-lines > .hp-row::before{content:"";position:absolute;top:0;left:var(--hp-inset);right:0;height:.5px;background:var(--n-sep,rgba(60,60,67,.18))}
html #main.hp .hp-row-t{flex:1;min-width:0;display:flex;flex-direction:column;gap:2px;font:400 17px/22px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A);overflow-wrap:anywhere}
html #main.hp .hp-row-s{font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51)}
html #main.hp .hp-row-v{flex:none;font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);text-align:right;font-variant-numeric:tabular-nums}
html #main.hp .gd-box .hp-row-v{color:var(--n-gold-text,#74552F)}
html #main.hp .hp-tick{flex:none;width:24px;height:24px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--n-gold,#896A44);color:var(--n-gold,#896A44)}
html #main.hp .hp-tick svg{width:14px;height:14px}
html #main.hp .hp-tick.hp-shield{box-shadow:none}
html #main.hp .hp-tick.hp-shield svg{width:22px;height:22px}
html #main.hp .hp-rev{display:flex;align-items:center;gap:8px;padding:14px 18px;font:400 17px/22px var(--n-font,system-ui)}
html #main.hp .hp-rev .hp-star svg{width:18px;height:18px}
html #main.hp .hp-life{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;border-radius:var(--hp-r);overflow:hidden}
html #main.hp .hp-tile{aspect-ratio:3/4;padding:0;border:0;border-radius:0;width:100%}
html #main.hp .hp-tile:focus-visible{outline:3px solid var(--n-accent,#896A44);outline-offset:-3px}
html #main.hp .hp-actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:12px}

/* The request panel: the app's sheet. On a wide screen it rides beside the profile on the sheet ground;
   its cells are the sheet's cells. */
html #main.hp .hp-reqwrap{background:none!important;border:0!important;box-shadow:none!important}
html #main.hp .hp-req{display:flex;flex-direction:column;gap:20px;padding:18px 0 22px;background:none;border-radius:var(--hp-r)}
@media (min-width:1024px){html #main.hp .hp-req{padding:18px 16px 22px;background:var(--n-sheet,#F6EFE7)}}
html #main.hp .hp-req-head{display:flex;flex-direction:column;align-items:center;gap:2px;text-align:center}
html #main.hp .hp-req-t{margin:0!important;font:600 17px/22px var(--n-font,system-ui)!important;color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-req-who{display:inline-flex;align-items:center;gap:6px;font:400 13px/18px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51)}
html #main.hp .hp-req-who img{width:16px;height:16px;border-radius:50%;object-fit:cover}
html #main.hp .hp-from{display:flex;flex-wrap:wrap;justify-content:center;align-items:center;gap:8px;font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);text-align:center}
html #main.hp .hp-from b{font-weight:700;color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-eyebrow{display:block;margin:0 0 8px;padding:0 16px;font:400 13px/18px var(--n-font,system-ui)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--n-ink-2,#5F5A51)!important}
html #main.hp .hp-cell{position:relative;display:flex;flex-direction:column;gap:2px;min-height:48px;padding:10px 40px 10px 16px;box-sizing:border-box;cursor:pointer}
html #main.hp .hp-cell + .hp-cell::before{content:"";position:absolute;top:0;left:16px;right:0;height:.5px;background:var(--n-sep,rgba(60,60,67,.18))}
html #main.hp .hp-cell::after{content:"";position:absolute;right:20px;top:50%;width:7px;height:7px;border-right:1.6px solid var(--n-ink-2,#5F5A51);border-bottom:1.6px solid var(--n-ink-2,#5F5A51);transform:translateY(-70%) rotate(45deg);pointer-events:none}
html #main.hp .hp-cell:focus-within{box-shadow:inset 0 0 0 2px var(--n-accent,#896A44)}
html #main.hp .hp-cells .hp-cell:first-child{border-radius:var(--hp-r) var(--hp-r) 0 0}
html #main.hp .hp-cells .hp-cell:last-child{border-radius:0 0 var(--hp-r) var(--hp-r)}
html #main.hp .hp-cell-l{font:400 13px/18px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51)}
html #main.hp select.hp-cell-sel{-webkit-appearance:none;appearance:none;width:100%;min-width:0;height:auto!important;min-height:0!important;margin:0;padding:0!important;
  background:transparent!important;border:0!important;border-radius:0!important;box-shadow:none!important;outline:none!important;font:400 17px/22px var(--n-font,system-ui)!important;color:var(--n-ink,#1B1C1A)!important;text-overflow:ellipsis;cursor:pointer}
html #main.hp .hp-placebtns{margin-top:10px}
html #main.hp .hp-placebtns .btn{min-height:44px;font-size:15px!important}

/* Length: the app's segmented track, four across, sliding sideways when a host offers more. */
html #main.hp .hp-segs{display:flex;gap:2px;padding:2px;border-radius:10px;background:var(--n-seg-track,rgba(118,118,128,.12));overflow-x:auto;scrollbar-width:none;scroll-snap-type:x proximity}
html #main.hp .hp-segs::-webkit-scrollbar{display:none}
html #main.hp .hp-seg{flex:1 0 calc(25% - 2px);min-width:64px;min-height:32px;padding:6px 8px;border:0;border-radius:8px;background:none;cursor:pointer;scroll-snap-align:start;
  font:500 14px/18px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A);white-space:nowrap;transition:background .2s var(--n-ease,ease)}
html #main.hp .hp-seg.on{background:var(--n-seg-thumb,#fff);box-shadow:var(--n-thumb-shadow,0 3px 8px rgba(0,0,0,.12));font-weight:600}
html #main.hp .hp-seg:focus-visible{outline:2px solid var(--n-accent,#896A44);outline-offset:1px}
@media (prefers-reduced-motion:reduce){html #main.hp .hp-seg{transition:none}}

/* The Guardian, as the app's sheet draws it. */
html #main.hp :is(.gd-box,.secbox){display:flex;flex-direction:column;gap:0;padding:0!important;border:0!important;background:none!important;box-shadow:none!important}
html #main.hp #secWho:not(:empty){margin-top:16px}
html #main.hp #secWho > .stack-s > b.small{display:block;padding:0 16px;font:400 13px/18px var(--n-font,system-ui)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--n-ink-2,#5F5A51)}
html #main.hp #secWho .tiny{padding:0 16px}
html #main.hp #secWho .secpick{background:var(--hp-cell)!important;border:0!important;border-radius:16px!important;padding:12px 16px!important}
html #main.hp #secWho .secpick .tiny{padding:0}
html #main.hp #secWho .secpick.on{box-shadow:inset 0 0 0 2px var(--n-accent,#896A44)!important}
html #main.hp #f-bEmerg{margin-top:20px}
html #main.hp #f-bEmerg > label{display:block;padding:0 16px;margin-bottom:8px;font:400 13px/18px var(--n-font,system-ui)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--n-ink-2,#5F5A51)!important}
html #main.hp .sec-rules{margin-top:20px;padding:12px 16px;border-radius:var(--hp-r);background:var(--hp-cell);font:400 15px/20px var(--n-font,system-ui)!important;color:var(--n-ink,#1B1C1A)!important}
html #main.hp .sec-rules input{width:22px;height:22px;flex:none;accent-color:var(--n-accent,#896A44)}
html #main.hp .hp-toggle{cursor:pointer}
html #main.hp .hp-switch{-webkit-appearance:none;appearance:none;flex:none;position:relative;width:51px;height:31px;margin:0;border:0;border-radius:16px;cursor:pointer;
  background:var(--n-switch-off,rgba(120,120,128,.16));transition:background .2s var(--n-ease,ease)}
html #main.hp .hp-switch::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;box-shadow:var(--n-thumb-shadow,0 3px 8px rgba(0,0,0,.12));transition:transform .2s var(--n-ease,ease)}
html #main.hp .hp-switch:checked{background:var(--n-accent,#896A44)}
html #main.hp .hp-switch:checked::before{transform:translateX(20px)}
html #main.hp .hp-switch:focus-visible{outline:2px solid var(--n-accent,#896A44);outline-offset:2px}
@media (prefers-reduced-motion:reduce){html #main.hp :is(.hp-switch,.hp-switch::before){transition:none}}

/* The priced part: a promotion code, then the Total with its lines folded under it. */
html #main.hp #quote{display:flex;flex-direction:column;gap:0}
html #main.hp #quote > .hp-panel + .hp-panel,html #main.hp #quote > p + .hp-panel{margin-top:20px}
html #main.hp .hp-promo{min-height:52px;padding:4px 16px}
html #main.hp .hp-promo .input{flex:1;min-width:0;height:44px!important;min-height:0!important;padding:0!important;background:transparent!important;border:0!important;box-shadow:none!important;font:400 17px/22px var(--n-font,system-ui)!important;color:var(--n-ink,#1B1C1A)!important}
html #main.hp .hp-promo:focus-within{box-shadow:inset 0 0 0 2px var(--n-accent,#896A44);border-radius:var(--hp-r)}
html #main.hp .hp-link{flex:none;padding:6px 2px;border:0;background:none;cursor:pointer;font:600 17px/22px var(--n-font,system-ui);color:var(--n-gold-text,#74552F)}
html #main.hp .hp-total summary{list-style:none;cursor:pointer}
html #main.hp .hp-total summary::-webkit-details-marker{display:none}
html #main.hp .hp-total summary .hp-row-t{font-weight:600}
html #main.hp .hp-total summary .hp-row-v{font:600 17px/22px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-chev{flex:none;width:7px;height:7px;margin:0 2px 4px 0;border-right:1.6px solid var(--n-ink-2,#5F5A51);border-bottom:1.6px solid var(--n-ink-2,#5F5A51);transform:rotate(45deg);transition:transform .2s var(--n-ease,ease)}
html #main.hp .hp-total[open] .hp-chev{transform:translateY(3px) rotate(225deg)}
html #main.hp .hp-total summary:focus-visible{outline:2px solid var(--n-accent,#896A44);outline-offset:-2px;border-radius:var(--hp-r)}
html #main.hp .hp-total[open] summary{box-shadow:inset 0 -.5px 0 var(--n-sep,rgba(60,60,67,.18))}
html #main.hp .hp-total[open] summary + .hp-lines > .hp-row:first-child::before{display:none}
html #main.hp .hp-gtotal{margin-top:10px;padding:0 16px;font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink,#1B1C1A)}
html #main.hp .hp-pay{margin:0}
html #main.hp .hp-pay .payways{display:flex;flex-direction:column;gap:8px}
html #main.hp .hp-pay .payway{background:var(--hp-cell)!important;border-radius:16px!important}
html #main.hp .hp-pay .payway.on{background:var(--n-gold-tint,rgba(137,106,68,.12))!important}
html #main.hp .hp-cta{width:100%;min-height:50px;background:var(--n-accent,#896A44)!important;color:var(--n-on-accent,#fff)!important}
html #main.hp #bookNotes .tiny{margin:6px 16px 0;font:400 13px/18px var(--n-font,system-ui)!important;color:var(--n-ink-2,#5F5A51)!important;text-align:left!important}
html #main.hp #bookNotes .hp-note{margin-top:12px}
html #main.hp :is(#bookHead,#groupBar,#groupCta,#bookErr,#secAddon,#bChosen):empty{display:none}

/* The app's bar at the foot of a phone screen: the one action and what a session starts from, over the
   page's own ground, sitting above the floating tab bar. */
@media (max-width:1023px){
  html #main.hp .hp-bar{left:0!important;right:0!important;bottom:calc(88px + env(safe-area-inset-bottom))!important;display:flex;flex-direction:column;align-items:stretch;gap:8px;
    padding:28px 16px 4px!important;border:0!important;border-radius:0!important;box-shadow:none!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important;
    background:linear-gradient(to bottom,transparent 0,var(--n-ground,#F6EFE7) 34%)!important}
  html #main.hp .hp-bar .btn{margin:0!important;width:100%}
  html #main.hp .hp-bar .p{margin:0;font:400 15px/20px var(--n-font,system-ui)!important;color:var(--n-ink-2,#5F5A51);text-align:center}
  html #main.hp .hp-bar .p b{font-weight:700;color:var(--n-ink,#1B1C1A)}
  html #main.hp .hp-photos{max-width:none}
}
@media (max-width:600px){
  html #main.hp .hp-name{font-size:30px!important;line-height:36px!important}
}

/* ==========================================================================
   Profile, as the app draws it (3 Oct 2026)
   The signed-in member's Profile tab (#main.pf-app, from vProfile) and the host studio's "What a guest
   reads" (.pf-studio), ported from Profile.swift and NightKit: the photograph whole at 3:4, the name with
   its seal, 26px inset grouped panels with hairlines and chevrons, capsule buttons. Scoped to the page,
   not to html.tf-night, so it holds with or without Night. Every colour is a local --pf-* token read from
   the Night token with the canvas value as the fallback: light first, dark wherever the site resolves
   dark. #root #main outranks the older single-id rules without needing !important everywhere.
   ========================================================================== */
#root :is(#main.pf-app,#main .pf-studio){
  --pf-ground:var(--n-ground,#F6EFE7); --pf-panel:var(--n-panel,#FFFFFF); --pf-sheet:var(--n-sheet,#F6EFE7); --pf-cell:var(--n-sheet-cell,#FFFFFF);
  --pf-art:#EEE5D8; --pf-ink:var(--n-ink,#1B1C1A); --pf-ink-2:var(--n-ink-2,#5F5A51); --pf-chev:var(--n-chev,rgba(60,60,67,.30));
  --pf-sep:var(--n-sep,rgba(60,60,67,.18)); --pf-hair:var(--n-hair,rgba(40,30,19,.10));
  --pf-fill:var(--n-fill,rgba(118,118,128,.12)); --pf-fill-2:var(--n-fill-2,rgba(118,118,128,.20));
  --pf-gold:var(--n-gold,#896A44); --pf-gold-text:var(--n-gold-text,#74552F); --pf-gold-tint:var(--n-gold-tint,rgba(137,106,68,.12));
  --pf-accent:var(--n-accent,#896A44); --pf-on-accent:var(--n-on-accent,#FFFFFF);
  --pf-glass:var(--n-glass,rgba(255,255,255,.78)); --pf-stop:var(--n-stop,#B3251E); --pf-scrim:var(--n-scrim,rgba(27,28,26,.32));
  --pf-font:var(--n-font,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif);
  --pf-font-d:var(--n-font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",sans-serif);
  --pf-r:26px;
}
html.tf-e:not([data-theme="light"]) #root :is(#main.pf-app,#main .pf-studio),
html[data-theme="dark"] #root :is(#main.pf-app,#main .pf-studio){
  --pf-ground:var(--n-ground,#131312); --pf-panel:var(--n-panel,#1F201D); --pf-sheet:var(--n-sheet,#1B1C1A); --pf-cell:var(--n-sheet-cell,#272824);
  --pf-art:#23241F; --pf-ink:var(--n-ink,#F1EBE0); --pf-ink-2:var(--n-ink-2,#ADA69A); --pf-chev:var(--n-chev,rgba(235,235,245,.30));
  --pf-sep:var(--n-sep,rgba(255,255,255,.12)); --pf-hair:var(--n-hair,rgba(255,255,255,.10));
  --pf-fill:var(--n-fill,rgba(118,118,128,.24)); --pf-fill-2:var(--n-fill-2,rgba(118,118,128,.34));
  --pf-gold:var(--n-gold,#D9BD92); --pf-gold-text:var(--n-gold-text,#D9BD92); --pf-gold-tint:var(--n-gold-tint,rgba(217,189,146,.16));
  --pf-accent:var(--n-accent,#D9BD92); --pf-on-accent:var(--n-on-accent,#131312);
  --pf-glass:var(--n-glass,rgba(30,31,28,.78)); --pf-stop:var(--n-stop,#F1B8B5); --pf-scrim:var(--n-scrim,rgba(0,0,0,.50));
}
@media (prefers-color-scheme:dark){
  html:not(.tf-e):not([data-theme="light"]) #root :is(#main.pf-app,#main .pf-studio){
    --pf-ground:var(--n-ground,#131312); --pf-panel:var(--n-panel,#1F201D); --pf-sheet:var(--n-sheet,#1B1C1A); --pf-cell:var(--n-sheet-cell,#272824);
    --pf-art:#23241F; --pf-ink:var(--n-ink,#F1EBE0); --pf-ink-2:var(--n-ink-2,#ADA69A); --pf-chev:var(--n-chev,rgba(235,235,245,.30));
    --pf-sep:var(--n-sep,rgba(255,255,255,.12)); --pf-hair:var(--n-hair,rgba(255,255,255,.10));
    --pf-fill:var(--n-fill,rgba(118,118,128,.24)); --pf-fill-2:var(--n-fill-2,rgba(118,118,128,.34));
    --pf-gold:var(--n-gold,#D9BD92); --pf-gold-text:var(--n-gold-text,#D9BD92); --pf-gold-tint:var(--n-gold-tint,rgba(217,189,146,.16));
    --pf-accent:var(--n-accent,#D9BD92); --pf-on-accent:var(--n-on-accent,#131312);
    --pf-glass:var(--n-glass,rgba(30,31,28,.78)); --pf-stop:var(--n-stop,#F1B8B5); --pf-scrim:var(--n-scrim,rgba(0,0,0,.50));
  }
}

/* The column: the app's width on a phone, edge to edge; a 600 column on a tablet; photo beside the
   sections on a wide screen. */
#root #main.pf-app{font-family:var(--pf-font);color:var(--pf-ink);overflow-x:clip}
#root #main.pf-app > .pf-wrap{max-width:600px!important;margin:0 auto!important;padding:0 0 40px!important}
#root #main.pf-app.pf-sub > .pf-wrap{max-width:760px!important;padding:0 16px 40px!important}
#root #main.pf-app :is(button,a){-webkit-tap-highlight-color:transparent}
#root #main.pf-app .pf-layout{display:block}
#root #main.pf-app .pf-pad{padding:0 16px}
#root #main.pf-app .pf-top{padding-top:18px;display:flex;flex-direction:column;gap:12px}

/* Hero: the photograph whole at 3:4, the camera and Preview over its corner, the name and facts under it. */
#root #main.pf-app .pf-hero{position:relative}
#root #main.pf-app .pf-photo{position:relative;overflow:hidden;background:var(--pf-art)}
#root #main.pf-app .pf-photo-btn{display:block;width:100%;aspect-ratio:3/4;padding:0;border:0;border-radius:0;background:var(--pf-art);cursor:pointer}
#root #main.pf-app .pf-photo-btn img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}
#root #main.pf-app .pf-photo-empty{aspect-ratio:auto;height:300px;display:grid;place-items:center;font:700 84px/1 var(--pf-font-d);color:var(--pf-ink-2)}
#root #main.pf-app .pf-photo-empty span{opacity:.6}
#root #main.pf-app .pf-photo::after{content:"";position:absolute;left:0;right:0;bottom:0;height:56px;pointer-events:none;background:linear-gradient(to bottom,transparent,var(--pf-ground));opacity:.55}
#root #main.pf-app .pf-hero-ctl{position:absolute;top:12px;right:16px;z-index:2;display:flex;align-items:center;gap:10px}
#root :is(#main.pf-app) .pf-glass-circle{width:44px;height:44px;flex:none;display:grid;place-items:center;padding:0;border-radius:50%;cursor:pointer;
  background:var(--pf-glass);border:1px solid var(--pf-hair);color:var(--pf-ink);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
#root #main.pf-app .pf-glass-circle svg{width:18px;height:18px}
#root #main.pf-app .pf-glass-cap{min-height:44px;padding:0 16px;border-radius:22px;cursor:pointer;font:500 17px/22px var(--pf-font);color:var(--pf-ink);
  background:var(--pf-glass);border:1px solid var(--pf-hair);-webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
#root #main.pf-app .pf-who{padding:14px 20px 16px;display:flex;flex-direction:column;gap:6px;min-width:0}
#root #main.pf-app .pf-name{margin:0!important;display:flex;align-items:center;flex-wrap:wrap;gap:0;font:700 34px/41px var(--pf-font-d)!important;letter-spacing:0!important;color:var(--pf-ink)!important;overflow-wrap:anywhere}
#root #main.pf-app .pf-name .tf-seal{color:var(--pf-gold)}
#root #main.pf-app .pf-name .tf-seal svg{width:.5em;height:.5em;min-width:17px;min-height:17px}
#root #main.pf-app .pf-prof{margin:0;font:600 17px/22px var(--pf-font);color:var(--pf-ink)}
#root #main.pf-app .pf-facts{margin:0;font:400 15px/20px var(--pf-font);color:var(--pf-ink-2);overflow-wrap:anywhere}
#root #main.pf-app .pf-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:4px}
#root #main.pf-app .pf-chip{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 10px;border-radius:12px;
  font:600 13px/18px var(--pf-font);color:var(--pf-ink);background:var(--pf-glass);box-shadow:inset 0 0 0 1px var(--pf-hair)}
#root #main.pf-app .pf-chip-quiet{background:var(--pf-fill);box-shadow:none;color:var(--pf-ink-2)}
#root #main.pf-app .pf-chip-i{display:inline-flex;color:var(--pf-gold)}
#root #main.pf-app .pf-chip-i svg{width:13px;height:13px}
#root #main.pf-app .pf-chip-ig{width:34px;justify-content:center;padding:0}
#root #main.pf-app .pf-chip-ig svg{width:15px;height:15px}

/* Sections: 20 under what is above for the figures and the languages, 30 for everything else. */
#root #main.pf-app .pf-s{margin-top:30px}
#root #main.pf-app :is(.pf-s-stats,.pf-s-languages){margin-top:20px}
#root :is(#main.pf-app,#main .pf-studio) .pf-h-row{display:flex;align-items:baseline;justify-content:space-between;gap:8px;padding:0 20px;margin-bottom:10px}
#root :is(#main.pf-app,#main .pf-studio) .pf-h{margin:0!important;font:700 22px/28px var(--pf-font-d)!important;letter-spacing:0!important;color:var(--pf-ink)!important;text-transform:none!important}
#root #main.pf-app .pf-edit{min-height:28px;padding:2px 0;border:0;background:none;cursor:pointer;font:400 17px/22px var(--pf-font);color:var(--pf-gold-text)}

/* Panels and grouped rows: the canvas's 26px block, rows of 48 over a 0.5px hairline set in from the edge. */
#root :is(#main.pf-app,#main .pf-studio) :is(.pf-panel,.pf-group,.pf-stats){margin:0 16px;background:var(--pf-panel)!important;border:0!important;box-shadow:none!important;border-radius:var(--pf-r)!important;overflow:hidden;color:var(--pf-ink)}
#root :is(#main.pf-app,#main .pf-studio) .pf-text{padding:14px 18px;font:400 17px/24px var(--pf-font);white-space:pre-line;overflow-wrap:anywhere}
#root :is(#main.pf-app,#main .pf-studio) .pf-muted{color:var(--pf-ink-2)}
#root :is(#main.pf-app,#main .pf-studio) .pf-row{position:relative;display:flex;align-items:center;gap:12px;width:100%;min-height:48px;margin:0;padding:0 16px;box-sizing:border-box;
  border:0;border-radius:0;background:none;text-align:left;font:400 17px/22px var(--pf-font);color:var(--pf-ink);--pf-inset:16px}
#root :is(#main.pf-app,#main .pf-studio) button.pf-row{cursor:pointer;transition:background-color .15s ease}
#root :is(#main.pf-app,#main .pf-studio) button.pf-row:hover{background:var(--pf-fill)}
#root :is(#main.pf-app,#main .pf-studio) button.pf-row:focus-visible{outline:2px solid var(--pf-accent);outline-offset:-2px}
#root :is(#main.pf-app,#main .pf-studio) .pf-row:not(:last-child)::after{content:"";position:absolute;left:var(--pf-inset);right:16px;bottom:0;height:.5px;background:var(--pf-sep);pointer-events:none}
#root :is(#main.pf-app,#main .pf-studio) .pf-row-t{flex:1 1 auto;min-width:0;padding:13px 0;overflow-wrap:anywhere}
#root :is(#main.pf-app,#main .pf-studio) .pf-row-v{flex:0 1 auto;min-width:0;max-width:62%;color:var(--pf-ink-2);text-align:right;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;font-variant-numeric:tabular-nums}
#root #main.pf-app .pf-row-a{flex:none;color:var(--pf-gold-text)}
#root #main.pf-app .pf-row-stop .pf-row-t{color:var(--pf-stop)}
#root #main.pf-app .pf-row:has(.pf-row-i){--pf-inset:60px;min-height:52px}
#root #main.pf-app .pf-row-i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--pf-accent);color:var(--pf-on-accent)}
#root #main.pf-app .pf-row-i svg{width:17px;height:17px}
#root :is(#main.pf-app,#main .pf-studio) .pf-row-stack{flex-direction:column;align-items:stretch;gap:4px;padding:10px 16px}
#root :is(#main.pf-app,#main .pf-studio) .pf-row-stack .pf-row-t{padding:0}
#root #main.pf-app .pf-row-line{display:flex;align-items:baseline;gap:12px}
#root #main.pf-app .pf-row-line .pf-row-a{font-weight:600}
#root :is(#main.pf-app,#main .pf-studio) .pf-row-s{font:400 15px/20px var(--pf-font);color:var(--pf-ink-2);overflow-wrap:anywhere}
#root :is(#main.pf-app,#main .pf-studio) .pf-chev{flex:none;width:8px;height:8px;margin:0 2px 0 0;border-right:2px solid var(--pf-chev);border-bottom:2px solid var(--pf-chev);transform:rotate(-45deg)}
#root #main.pf-app .pf-group-after{margin-top:20px}
#root :is(#main.pf-app,#main .pf-studio) .pf-foot{margin:8px 32px 0;font:400 13px/18px var(--pf-font)!important;color:var(--pf-ink-2)!important}
#root :is(#main.pf-app,#main .pf-studio) .pf-label{margin:0 32px 8px;font:400 13px/18px var(--pf-font)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--pf-ink-2)!important}
#root #main.pf-app .pf-link{flex:none;padding:6px 0;border:0;background:none;cursor:pointer;font:600 15px/20px var(--pf-font);color:var(--pf-gold-text)}
#root #main.pf-app .pf-link-wide{width:100%;min-height:44px}

/* Figures: three across, divided by hairlines. */
#root #main.pf-app .pf-stats{display:flex;padding:14px 0}
#root #main.pf-app .pf-stat{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:2px;padding:0 4px;text-align:center}
#root #main.pf-app .pf-stat + .pf-stat{box-shadow:inset .5px 0 0 var(--pf-sep)}
#root #main.pf-app .pf-stat b{font:700 22px/28px var(--pf-font-d);font-variant-numeric:tabular-nums;color:var(--pf-ink)}
#root #main.pf-app .pf-stat span{font:400 13px/18px var(--pf-font);color:var(--pf-ink-2)}

/* Quote, interests, my life, reviews. */
#root #main.pf-app .pf-quote{margin:0 22px;padding:0;border:0;background:none;quotes:none;font:italic 400 20px/28px ui-serif,"New York",Georgia,"Times New Roman",serif;color:var(--pf-ink);overflow-wrap:anywhere}
#root #main.pf-app .pf-tags{display:flex;flex-wrap:wrap;gap:8px;padding:0 16px}
#root #main.pf-app .pf-tags-in{padding:4px 0 2px}
#root #main.pf-app .pf-tag{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:17px;background:var(--pf-fill);font:400 15px/20px var(--pf-font);color:var(--pf-ink);overflow-wrap:anywhere}
#root #main.pf-app .pf-empty{margin:0;padding:0 20px;font:400 15px/20px var(--pf-font);color:var(--pf-ink-2)}
#root #main.pf-app .pf-life{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px}
#root #main.pf-app .pf-tile{display:block;aspect-ratio:3/4;width:100%;padding:0;border:0;border-radius:0;background:var(--pf-art);overflow:hidden;cursor:pointer}
#root #main.pf-app .pf-tile img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;border-radius:0!important}
#root #main.pf-app .pf-tile:focus-visible{outline:3px solid var(--pf-accent);outline-offset:-3px}
#root #main.pf-app .pf-rev{display:flex;align-items:center;justify-content:center;gap:6px;padding:14px 18px;font:400 17px/22px var(--pf-font)}
#root #main.pf-app .pf-rev:not(:has(.pf-star)){color:var(--pf-ink-2)}
#root #main.pf-app .pf-star{display:inline-flex;color:var(--pf-gold)}
#root #main.pf-app .pf-star svg{width:16px;height:16px;fill:currentColor}

/* Capsule buttons: gold for the one thing to do, the grey fill for the rest. */
#root #main.pf-app .pf-actions{display:flex;flex-direction:column;gap:10px;padding:0 16px}
#root #main.pf-app .pf-btn{display:flex;align-items:center;justify-content:center;width:100%;min-height:50px;padding:0 20px;border:0;border-radius:25px;cursor:pointer;
  font:600 17px/22px var(--pf-font);background:var(--pf-accent);color:var(--pf-on-accent);transition:opacity .15s ease}
#root #main.pf-app .pf-btn:hover{opacity:.88}
#root #main.pf-app .pf-btn-fill{background:var(--pf-fill);color:var(--pf-ink)}
#root #main.pf-app .pf-btn-compact{min-height:44px;font-size:15px;border-radius:22px}
#root #main.pf-app :is(.pf-btn,.pf-edit,.pf-link,.pf-glass-circle,.pf-glass-cap,.pf-photo-btn,.pf-back):focus-visible{outline:2px solid var(--pf-accent);outline-offset:2px}

/* An account page opened from the rows: a way back and its title, as a pushed screen. */
#root #main.pf-app .pf-subhead{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 16px}
#root #main.pf-app .pf-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-6px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;font:400 17px/22px var(--pf-font);color:var(--pf-gold-text)}
#root #main.pf-app .pf-title{margin:0!important;font:700 34px/41px var(--pf-font-d)!important;letter-spacing:0!important;color:var(--pf-ink)!important;overflow-wrap:anywhere}
#root #main.pf-app .pf-body{display:flex;flex-direction:column;gap:16px;min-width:0}

/* "How hosts see you": the app's sheet, from the foot on a phone and centred on a wide screen. */
#root #main.pf-app .pf-sheet-bg{position:fixed;inset:0;z-index:1200;display:flex;align-items:flex-end;justify-content:center;background:var(--pf-scrim);outline:0}
#root #main.pf-app .pf-sheet{width:100%;max-width:480px;max-height:90dvh;overflow-y:auto;padding:14px 0 calc(32px + env(safe-area-inset-bottom));box-sizing:border-box;
  background:var(--pf-sheet);border-radius:38px 38px 0 0;color:var(--pf-ink)}
#root #main.pf-app .pf-sheet-head{position:relative;display:flex;align-items:center;justify-content:center;min-height:44px;padding:0 76px;margin-bottom:24px}
#root #main.pf-app .pf-sheet-head .pf-glass-circle{position:absolute;left:16px;top:0}
#root #main.pf-app .pf-sheet-head .pf-glass-circle svg{width:16px;height:16px}
#root #main.pf-app .pf-sheet-t{margin:0!important;font:600 17px/22px var(--pf-font)!important;letter-spacing:0!important;text-align:center;color:var(--pf-ink)!important}
#root #main.pf-app .pf-card{display:flex;align-items:center;gap:14px;margin:0 16px;padding:16px;border-radius:var(--pf-r);background:var(--pf-cell)}
#root #main.pf-app .pf-card img,#root #main.pf-app .pf-card-i{flex:none;width:56px;height:56px;border-radius:50%;object-fit:cover;object-position:top}
#root #main.pf-app .pf-card-i{display:grid;place-items:center;background:var(--pf-fill);font:700 22px/1 var(--pf-font-d);color:var(--pf-ink-2)}
#root #main.pf-app .pf-card-b{display:flex;flex-direction:column;gap:2px;min-width:0}
#root #main.pf-app .pf-card-b b{font:600 17px/22px var(--pf-font);overflow-wrap:anywhere}
#root #main.pf-app .pf-card-b span{font:400 15px/20px var(--pf-font);color:var(--pf-ink-2)}
#root #main.pf-app .pf-sheet .pf-foot{margin-top:8px}

/* The host studio's "What a guest reads": the same panels and rows, inside the studio's own column. */
#root #main .pf-studio .pf-reads{display:flex;flex-direction:column}
#root #main .pf-studio .pf-reads > .pf-h{margin:0 0 12px!important;padding:0 4px}
#root #main .pf-studio .pf-reads :is(.pf-panel,.pf-group){margin:0}
#root #main .pf-studio .pf-reads .pf-label{margin:0 16px 8px}
#root #main .pf-studio .pf-reads .pf-panel + .pf-label{margin-top:16px}
#root #main .pf-studio .pf-reads .pf-group{margin-top:16px}
#root #main .pf-studio .pf-reads .pf-foot{margin:8px 16px 0}

@media (min-width:600px){
  #root #main.pf-app > .pf-wrap{padding:8px 0 48px!important}
  #root #main.pf-app .pf-photo{margin:0 16px;border-radius:var(--pf-r)}
  #root #main.pf-app .pf-photo::after{display:none}
  #root #main.pf-app .pf-life{margin:0 16px;border-radius:var(--pf-r);overflow:hidden}
  #root #main.pf-app .pf-sheet-bg{align-items:center;padding:24px}
  #root #main.pf-app .pf-sheet{border-radius:38px;padding-bottom:32px}
}
/* Wide: the person stays put on the left, the sections scroll beside them. */
@media (min-width:1024px){
  #root #main.pf-app:not(.pf-sub) > .pf-wrap{max-width:1040px!important;padding:8px 24px 56px!important}
  #root #main.pf-app .pf-layout{display:grid;grid-template-columns:minmax(0,400px) minmax(0,1fr);gap:40px;align-items:start}
  #root #main.pf-app .pf-side{position:sticky;top:calc(var(--nav-h,64px) + 24px)}
  #root #main.pf-app .pf-photo{margin:0}
  #root #main.pf-app .pf-who{padding:14px 4px 0}
  #root #main.pf-app .pf-secs > .pf-s:first-child{margin-top:0}
  #root #main.pf-app .pf-secs :is(.pf-panel,.pf-group,.pf-stats,.pf-life){margin-left:0;margin-right:0}
  #root #main.pf-app .pf-secs :is(.pf-h-row){padding:0 4px}
  #root #main.pf-app .pf-secs :is(.pf-tags,.pf-actions,.pf-pad){padding:0}
  #root #main.pf-app .pf-secs .pf-empty{padding:0 4px}
  #root #main.pf-app .pf-secs .pf-quote{margin:0 4px}
  #root #main.pf-app .pf-secs .pf-foot{margin-left:16px;margin-right:16px}
}
@media (prefers-reduced-motion:reduce){
  #root :is(#main.pf-app,#main .pf-studio) :is(.pf-row,.pf-btn){transition:none!important}
}

/* ==========================================================================
   Host dashboard, as the app draws it (3 Oct 2026)
   The signed-in host's Dashboard (#main.hd-app, from vStudio), ported from HostTools.swift and HostingKit:
   the large "Hosting" title with a glass capsule beside it, the Available switch, the requests, "What to do
   next" with its gold ticks, one row into the tools, and the views line; "Your hosting" behind that row with
   Listing and hours, Money (three figures over the rows) and Running it; every section a pushed page with a
   way back. 26px inset grouped panels, 0.5px hairlines set in from the text, 30px gold tiles, chevrons.
   Scoped to the page, not to html.tf-night, so it holds with or without Night. Every colour is a local
   --hd-* token read from the Night token, dark first when Night is absent. #root #main outranks the older
   single-id rules; !important only where an older rule carries it.
   ========================================================================== */
#root #main.hd-app{
  --hd-ground:var(--n-ground,#131312); --hd-panel:var(--n-panel,#1F201D); --hd-ink:var(--n-ink,#F1EBE0); --hd-ink-2:var(--n-ink-2,#ADA69A);
  --hd-gold:var(--n-gold,#D9BD92); --hd-gold-text:var(--n-gold-text,#D9BD92); --hd-gold-tint:var(--n-gold-tint,rgba(217,189,146,.16));
  --hd-accent:var(--n-accent,#D9BD92); --hd-on-accent:var(--n-on-accent,#131312); --hd-sep:var(--n-sep,rgba(255,255,255,.12));
  --hd-fill:var(--n-fill,rgba(118,118,128,.24)); --hd-chev:var(--n-chev,rgba(235,235,245,.3)); --hd-hair:var(--n-hair,rgba(255,255,255,.10));
  --hd-glass:var(--n-glass,rgba(30,31,28,.78)); --hd-stop:var(--n-stop,#F1B8B5); --hd-ok:var(--n-ok,#7FC08F);
  --hd-switch-off:var(--n-switch-off,rgba(120,120,128,.32)); --hd-seg-track:var(--n-seg-track,rgba(118,118,128,.24)); --hd-seg-thumb:var(--n-seg-thumb,#5B5B5E);
  --hd-font:var(--n-font,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif);
  --hd-font-d:var(--n-font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",sans-serif);
  --hd-r:26px;
  font-family:var(--hd-font);color:var(--hd-ink);overflow-x:clip
}

/* The column: the app's width on a phone, edge to edge; a 600 column on a tablet; two columns when wide. */
#root #main.hd-app > .hd-wrap{max-width:600px!important;margin:0 auto!important;padding:6px 0 48px!important}
#root #main.hd-app.hd-sub > .hd-wrap{max-width:760px!important;padding:6px 16px 48px!important}
#root #main.hd-app :is(button,a,label){-webkit-tap-highlight-color:transparent}

/* The large title, and the glass capsule with Preview and Help where the app keeps the bell and help. */
#root #main.hd-app .hd-head{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 0 20px}
#root #main.hd-app .hd-title{margin:0!important;min-width:0;font:700 34px/41px var(--hd-font-d)!important;letter-spacing:0!important;color:var(--hd-ink)!important;overflow-wrap:anywhere;text-transform:none!important}
#root #main.hd-app .hd-glass{flex:none;display:flex;align-items:center;height:44px;padding:0 3px;border-radius:22px;background:var(--hd-glass);box-shadow:inset 0 0 0 1px var(--hd-hair);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
#root #main.hd-app .hd-glass button{width:44px;height:42px;display:grid;place-items:center;padding:0;border:0;border-radius:21px;background:none;cursor:pointer;color:var(--hd-ink)}
#root #main.hd-app .hd-glass svg{width:20px;height:20px}

/* Who is hosting: the face, the name with its seal, the listing's state and price. */
#root #main.hd-app .hd-who{display:flex;align-items:center;gap:12px;margin:14px 20px 0;min-width:0}
#root #main.hd-app .hd-face{flex:none;width:44px;height:44px;display:grid;place-items:center;padding:0;border:0;border-radius:50%;overflow:hidden;cursor:pointer;
  background:var(--hd-fill);font:600 17px/1 var(--hd-font-d);color:var(--hd-ink-2)}
#root #main.hd-app .hd-face img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:top;border-radius:0!important;border:0!important}
#root #main.hd-app .hd-who-b{display:flex;flex-direction:column;gap:1px;min-width:0}
#root #main.hd-app .hd-name{margin:0;display:flex;align-items:center;font:600 17px/22px var(--hd-font);color:var(--hd-ink);min-width:0}
#root #main.hd-app .hd-name > span{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.hd-app .hd-name .tf-seal{flex:none;color:var(--hd-gold)}
#root #main.hd-app .hd-state{margin:0;display:flex;align-items:center;gap:6px;font:400 15px/20px var(--hd-font);color:var(--hd-ink-2);overflow-wrap:anywhere}
#root #main.hd-app .hd-dot{flex:none;width:8px;height:8px;border-radius:50%;background:var(--hd-ink-2)}
#root #main.hd-app .hd-dot.is-live{background:var(--hd-ok)}
#root #main.hd-app .hd-dot.is-off{background:none;box-shadow:inset 0 0 0 1.5px var(--hd-ink-2)}

/* Blocks: each brings the space above it, as the board's do. */
#root #main.hd-app .hd-s{margin-top:28px}
#root #main.hd-app .hd-s-available{margin-top:18px}
#root #main.hd-app .hd-s-requests{margin-top:20px}
#root #main.hd-app .hd-s-next{margin-top:30px}
#root #main.hd-app .hd-eyebrow{margin:0 32px 8px;font:400 13px/18px var(--hd-font)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--hd-ink-2)!important}
#root #main.hd-app .hd-note{margin:8px 32px 0;font:400 13px/18px var(--hd-font)!important;color:var(--hd-ink-2)!important}
#root #main.hd-app .hd-views{margin-top:10px}

/* Panels and grouped rows: rows of 48 over a 0.5px hairline set in from where the text starts. */
#root #main.hd-app :is(.hd-group,.hd-money){margin:0 16px;background:var(--hd-panel)!important;border:0!important;box-shadow:none!important;border-radius:var(--hd-r)!important;overflow:hidden;color:var(--hd-ink)}
#root #main.hd-app .hd-group-after{margin-top:10px}
#root #main.hd-app .hd-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;min-height:48px;margin:0;padding:0 16px;box-sizing:border-box;
  border:0;border-radius:0;background:none;text-align:left;font:400 17px/22px var(--hd-font);color:var(--hd-ink);--hd-inset:16px}
#root #main.hd-app :is(button.hd-row,label.hd-row){cursor:pointer;transition:background-color .15s ease}
#root #main.hd-app button.hd-row:hover{background:var(--hd-fill)}
#root #main.hd-app button.hd-row:focus-visible{outline:2px solid var(--hd-accent);outline-offset:-2px}
#root #main.hd-app .hd-row:not(:last-child)::after{content:"";position:absolute;left:var(--hd-inset);right:0;bottom:0;height:.5px;background:var(--hd-sep);pointer-events:none}
#root #main.hd-app .hd-row:has(.hd-tile){--hd-inset:60px}
#root #main.hd-app .hd-row:has(.hd-tick){--hd-inset:52px}
#root #main.hd-app .hd-row-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px;padding:13px 0;overflow-wrap:anywhere}
#root #main.hd-app .hd-row-t:has(.hd-row-s){padding:10px 0}
#root #main.hd-app .hd-row-strong .hd-row-t > span:first-child{font-weight:600}
#root #main.hd-app .hd-row-s{font:400 15px/20px var(--hd-font);color:var(--hd-ink-2)}
#root #main.hd-app .hd-row-v{flex:none;max-width:45%;color:var(--hd-ink-2);text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
#root #main.hd-app .hd-row-stop .hd-row-t{color:var(--hd-stop)}
#root #main.hd-app .hd-row.is-done .hd-row-t{color:var(--hd-ink-2)}
#root #main.hd-app .hd-chev{flex:none;width:8px;height:8px;margin:0 2px 0 0;border-right:2px solid var(--hd-chev);border-bottom:2px solid var(--hd-chev);transform:rotate(-45deg)}
#root #main.hd-app .hd-tile{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--hd-accent);color:var(--hd-on-accent)}
#root #main.hd-app .hd-tile svg{width:17px;height:17px}

/* The steps' ticks: a gold disc with the check when done, an empty ring while still to do. */
#root #main.hd-app .hd-tick{flex:none;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;box-shadow:inset 0 0 0 1.5px var(--hd-ink-2);color:var(--hd-on-accent)}
#root #main.hd-app .hd-tick.is-done{background:var(--hd-gold);box-shadow:none}
#root #main.hd-app .hd-tick svg{width:13px;height:13px;stroke-width:3}

/* The Available switch: the system switch, on in the gold. */
#root #main.hd-app .hd-toggle .hd-row-t{padding:10px 0}
#root #main.hd-app .hd-switch{flex:none;-webkit-appearance:none;appearance:none;position:relative;width:51px;height:31px;margin:0;border:0;border-radius:16px;cursor:pointer;
  background:var(--hd-switch-off);transition:background-color .2s ease}
#root #main.hd-app .hd-switch::before{content:"";position:absolute;top:2px;left:2px;width:27px;height:27px;border-radius:50%;background:#fff;
  box-shadow:0 3px 8px rgba(0,0,0,.15),0 1px 1px rgba(0,0,0,.16);transition:transform .2s ease}
#root #main.hd-app .hd-switch:checked{background:var(--hd-gold)}
#root #main.hd-app .hd-switch:checked::before{transform:translateX(20px)}
#root #main.hd-app .hd-switch:focus-visible{outline:2px solid var(--hd-accent);outline-offset:2px}

/* Money: available, clearing and paid out, three across, divided by hairlines, lined up on their digits. */
#root #main.hd-app .hd-money{display:flex;box-sizing:border-box;width:calc(100% - 32px);padding:16px 8px;cursor:pointer;font:inherit;text-align:center}
#root #main.hd-app .hd-money:focus-visible{outline:2px solid var(--hd-accent);outline-offset:2px}
#root #main.hd-app .hd-fig{flex:1 1 0;min-width:0;display:flex;flex-direction:column;align-items:center;gap:3px;padding:0 4px}
#root #main.hd-app .hd-fig + .hd-fig{box-shadow:inset .5px 0 0 var(--hd-sep)}
#root #main.hd-app .hd-fig b{max-width:100%;font:600 clamp(13px,3.6vw,17px)/22px var(--hd-font);font-variant-numeric:tabular-nums;color:var(--hd-ink);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.hd-app .hd-fig span{font:400 13px/18px var(--hd-font);color:var(--hd-ink-2)}

/* A section opened from a row: a way back and its title, as a pushed screen; the studio's panels under it. */
#root #main.hd-app .hd-subhead{display:flex;flex-direction:column;align-items:flex-start;gap:2px;margin:0 0 16px}
#root #main.hd-app .hd-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-6px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;font:400 17px/22px var(--hd-font);color:var(--hd-gold-text)}
#root #main.hd-app .hd-back:focus-visible{outline:2px solid var(--hd-accent);outline-offset:2px}
#root #main.hd-app .hd-body:is(:focus,:focus-visible){outline:none!important;box-shadow:none!important}
#root #main.hd-app .hd-body{display:flex!important;flex-direction:column!important;gap:16px!important;min-width:0}
#root #main.hd-app .hd-body .hd-tools{margin:0 -16px}
#root #main.hd-app .hd-tools > .hd-s:first-child{margin-top:4px}
#root #main.hd-app .hd-body .card{background:var(--hd-panel)!important;border:0!important;box-shadow:none!important;border-radius:var(--hd-r)!important;color:var(--hd-ink)}
#root #main.hd-app .hd-body .card :is(h2,h3){font-family:var(--hd-font-d)!important;letter-spacing:0!important;color:var(--hd-ink)!important}
#root #main.hd-app .hd-body .card :is(.small,.tiny,.hint,.k){color:var(--hd-ink-2)}
#root #main.hd-app .hd-body .kv{border-bottom:.5px solid var(--hd-sep)!important}
#root #main.hd-app .hd-body .kv:last-child{border-bottom:0!important}
#root #main.hd-app .hd-body .card .eyebrow{color:var(--hd-ink-2)!important}
#root #main.hd-app .hd-body :is(.btn-primary){background:var(--hd-accent)!important;color:var(--hd-on-accent)!important;border:0!important;box-shadow:none!important;border-radius:25px!important}
#root #main.hd-app .hd-body :is(.btn-secondary){background:var(--hd-fill)!important;color:var(--hd-ink)!important;border:0!important;box-shadow:none!important;border-radius:25px!important}
#root #main.hd-app .hd-body :is(.tbl){max-width:100%}
/* The listing's "Public view / Edit": the app's segmented track. */
#root #main.hd-app .hd-body .pf-studio > .seg{display:grid!important;grid-auto-flow:column;grid-auto-columns:minmax(0,1fr);gap:2px!important;width:100%;max-width:360px;padding:2px!important;
  border:0!important;border-radius:10px!important;background:var(--hd-seg-track)!important;box-shadow:none!important}
#root #main.hd-app .hd-body .pf-studio > .seg button{min-height:32px;border:0!important;border-radius:8px!important;background:none!important;box-shadow:none!important;
  font:500 15px/20px var(--hd-font)!important;color:var(--hd-ink)!important}
#root #main.hd-app .hd-body .pf-studio > .seg button.on{background:var(--hd-seg-thumb)!important;font-weight:600!important;box-shadow:0 3px 8px rgba(0,0,0,.12)!important}

@media (min-width:600px){
  #root #main.hd-app > .hd-wrap{padding:8px 0 56px!important}
}
/* Wide: the switch and the requests on the left, what to do next and the tools beside them. */
@media (min-width:1024px){
  #root #main.hd-app:not(.hd-sub) > .hd-wrap{max-width:1040px!important;padding:8px 24px 56px!important}
  #root #main.hd-app .hd-head{padding:0 4px}
  #root #main.hd-app .hd-who{margin:14px 4px 0}
  #root #main.hd-app .hd-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  #root #main.hd-app .hd-cols > .hd-col:last-child > .hd-s:first-child{margin-top:18px}
  #root #main.hd-app .hd-cols :is(.hd-group,.hd-money){margin-left:0;margin-right:0}
  #root #main.hd-app .hd-cols :is(.hd-eyebrow,.hd-note){margin-left:16px;margin-right:16px}
}
@media (prefers-reduced-motion:reduce){
  #root #main.hd-app :is(.hd-row,.hd-switch,.hd-switch::before){transition:none!important}
}

/* Footer as on the home page (owner, 3 Oct 2026): four columns across the content area, then one line with
   the copyright on the left and small social icons on the right. */
@media (min-width:1024px){
  html.tf-night.tf-night body #root footer.foot{--fw:min(1100px, calc(100vw - var(--n-side,260px) - 64px));width:var(--fw)!important;max-width:none!important;
    margin-left:calc((100% - var(--fw)) / 2)!important;box-sizing:border-box}
  html.tf-night.tf-night body #root footer.foot .cols{display:grid!important;columns:auto!important;grid-template-columns:minmax(0,1.5fr) repeat(3,minmax(0,1fr));gap:40px}
  html.tf-night.tf-night body #root footer.foot .cols>div{margin-bottom:0}
  html.tf-night.tf-night body #root footer.foot .foot-get-cell{display:none}
}
html.tf-night.tf-night body #root footer.foot .foot-bar{display:flex!important;flex-direction:row!important;align-items:center!important;justify-content:space-between!important;
  flex-wrap:wrap;gap:12px;text-align:left!important;border-top:.5px solid var(--n-sep,rgba(255,255,255,.12));padding-top:18px;margin-top:28px}
html.tf-night.tf-night body #root footer.foot .foot-bar p{margin:0;font-size:13px;color:var(--n-ink-2,#ADA69A)}
html.tf-night.tf-night body #root footer.foot .foot-social{display:flex!important;gap:16px!important;margin:0!important;padding:0!important;justify-content:flex-end}
html.tf-night.tf-night body #root footer.foot .foot-social a{width:auto!important;height:auto!important;padding:0!important;background:none!important;border:0!important}
html.tf-night.tf-night body #root footer.foot .foot-social span{width:16px!important;height:16px!important}

/* ==========================================================================
   Requests, as the app draws them (3 Oct 2026)
   The signed-in member's Requests list (#main.rq-app, from vBookings) and a single session (#main.rq-app.rq-one,
   from vBooking), ported from Bookings.swift and NightKit: the large "Requests" title with emergency
   information and the bell in a glass capsule, the Upcoming | Past | Requests control, each session as a post
   (face, name, state, what and when, the activity's drawing, "View session"); the session itself with the
   drawing and title, 26px inset grouped panels under 13px uppercase labels, notices with a 30px tile, capsule
   buttons, and the safety rows last. Scoped to the page, not to html.tf-night, so it holds with or without
   Night. Every colour is a local --rq-* token read from the Night token, dark first when Night is absent.
   #root #main outranks the older single-id rules; !important only where an older rule carries it.
   ========================================================================== */
#root #main.rq-app{
  --rq-ground:var(--n-ground,#131312); --rq-panel:var(--n-panel,#1F201D); --rq-ink:var(--n-ink,#F1EBE0); --rq-ink-2:var(--n-ink-2,#ADA69A);
  --rq-gold:var(--n-gold,#D9BD92); --rq-gold-text:var(--n-gold-text,#D9BD92); --rq-gold-tint:var(--n-gold-tint,rgba(217,189,146,.16));
  --rq-accent:var(--n-accent,#D9BD92); --rq-on-accent:var(--n-on-accent,#131312); --rq-sep:var(--n-sep,rgba(255,255,255,.12));
  --rq-fill:var(--n-fill,rgba(118,118,128,.24)); --rq-chev:var(--n-chev,rgba(235,235,245,.3)); --rq-hair:var(--n-hair,rgba(255,255,255,.10));
  --rq-glass:var(--n-glass,rgba(30,31,28,.78)); --rq-stop:var(--n-stop,#E5534B); --rq-stop-tile:var(--n-stop-tile,#C4473F); --rq-ok:var(--n-ok,#7FB48F);
  --rq-seg-track:var(--n-seg-track,rgba(118,118,128,.24)); --rq-seg-thumb:var(--n-seg-thumb,#5B5B5E); --rq-art:#23241F;
  --rq-font:var(--n-font,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,"Helvetica Neue",sans-serif);
  --rq-font-d:var(--n-font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,"Helvetica Neue",sans-serif);
  --rq-mono:ui-monospace,"SF Mono",SFMono-Regular,Menlo,Consolas,monospace;
  --rq-r:26px;
  font-family:var(--rq-font);color:var(--rq-ink);background:var(--rq-ground);overflow-x:clip
}
/* The drawing's panel and the cut of the drawing follow Night's theme when Night is on; dark otherwise. */
html.tf-night:not(.tf-e):not([data-theme="dark"]) #root #main.rq-app,
html.tf-night.tf-e[data-theme="light"] #root #main.rq-app{--rq-art:#EEE5D8}
@media (prefers-color-scheme:dark){html.tf-night:not(.tf-e):not([data-theme="light"]) #root #main.rq-app{--rq-art:#23241F}}
#root #main.rq-app .nill{display:block;width:100%;height:100%;box-sizing:border-box;padding:7%;background:var(--nill-d) center/contain no-repeat content-box;background-color:transparent}
html.tf-night:not(.tf-e):not([data-theme="dark"]) #root #main.rq-app .nill,
html.tf-night.tf-e[data-theme="light"] #root #main.rq-app .nill{background-image:var(--nill-l)}
@media (prefers-color-scheme:dark){html.tf-night:not(.tf-e):not([data-theme="light"]) #root #main.rq-app .nill{background-image:var(--nill-d)}}

/* The column: the app's width on a phone, edge to edge; a 600 column on a tablet; two columns for a session when wide. */
#root #main.rq-app > .rq-wrap{max-width:600px!important;margin:0 auto!important;padding:6px 0 48px!important;box-sizing:border-box}
#root #main.rq-app :is(button,a){-webkit-tap-highlight-color:transparent}
#root #main.rq-app .rq-pad{padding:0 16px}

/* The large title, and the glass capsule with emergency information and the bell. */
#root #main.rq-app .rq-head{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:0 16px 0 20px}
#root #main.rq-app .rq-title{margin:0!important;min-width:0;font:700 34px/41px var(--rq-font-d)!important;letter-spacing:0!important;color:var(--rq-ink)!important;overflow-wrap:anywhere;text-transform:none!important}
#root #main.rq-app .rq-glass{flex:none;display:flex;align-items:center;height:44px;padding:0 3px;border-radius:22px;background:var(--rq-glass);box-shadow:inset 0 0 0 1px var(--rq-hair);
  -webkit-backdrop-filter:blur(18px) saturate(1.4);backdrop-filter:blur(18px) saturate(1.4)}
#root #main.rq-app .rq-glass button{position:relative;width:44px;height:42px;display:grid;place-items:center;padding:0;border:0;border-radius:21px;background:none;cursor:pointer;color:var(--rq-ink)}
#root #main.rq-app .rq-glass svg{width:19px;height:19px}
#root #main.rq-app .rq-badge{position:absolute;top:2px;right:3px;min-width:18px;height:18px;padding:0 5px;box-sizing:border-box;display:grid;place-items:center;border-radius:9px;
  background:var(--rq-stop-tile);color:#fff;font:600 12px/1 var(--rq-font);font-variant-numeric:tabular-nums}

/* Upcoming | Past | Requests: the system's segmented control. */
#root #main.rq-app .rq-seg{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:2px;margin:14px 16px 8px;padding:2px;border-radius:9px;background:var(--rq-seg-track)}
#root #main.rq-app .rq-seg button{min-height:30px;padding:0 6px;border:0;border-radius:7px;background:none;cursor:pointer;font:500 13px/18px var(--rq-font);color:var(--rq-ink);
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:background-color .2s ease}
#root #main.rq-app .rq-seg button.on{background:var(--rq-seg-thumb);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
#root #main.rq-app .rq-seg button:focus-visible{outline:2px solid var(--rq-accent);outline-offset:1px}

/* Empty: the calendar, the title, the sentence, centred, as the app's empty list. */
#root #main.rq-app .rq-empty{display:flex;flex-direction:column;align-items:center;gap:8px;padding:72px 32px;text-align:center}
#root #main.rq-app .rq-empty-i{display:grid;place-items:center;color:var(--rq-ink-2);margin-bottom:6px}
#root #main.rq-app .rq-empty-i svg{width:34px;height:34px}
#root #main.rq-app .rq-empty-t{margin:0!important;font:700 22px/28px var(--rq-font-d)!important;letter-spacing:0!important;color:var(--rq-ink)!important}
#root #main.rq-app .rq-empty-d{margin:0;max-width:34ch;font:400 15px/20px var(--rq-font);color:var(--rq-ink-2)}
#root #main.rq-app .rq-empty-b{margin-top:14px;width:auto!important;min-width:200px}

/* A session in the list, as the app's post. */
#root #main.rq-app .rq-list{display:flex;flex-direction:column}
#root #main.rq-app .rq-post{display:block;padding:0 0 12px;cursor:pointer;border-radius:0;outline:0;transition:background-color .15s ease}
#root #main.rq-app .rq-post:hover{background:color-mix(in srgb,var(--rq-fill) 40%,transparent)}
#root #main.rq-app .rq-post:focus-visible{box-shadow:inset 0 0 0 2px var(--rq-accent)}
#root #main.rq-app .rq-post-head{display:flex;align-items:center;gap:12px;padding:12px 16px}
#root #main.rq-app .rq-thumb{flex:none;width:36px;height:36px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--rq-fill)}
#root #main.rq-app .rq-thumb img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:top;border-radius:0!important}
#root #main.rq-app .rq-thumb .nill{padding:5px;background-color:var(--rq-art)}
#root #main.rq-app .rq-initial{font:600 15px/1 var(--rq-font-d);color:var(--rq-ink-2)}
#root #main.rq-app .rq-post-who{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:1px}
#root #main.rq-app .rq-post-name{display:flex;align-items:center;gap:5px;min-width:0;font:600 17px/22px var(--rq-font);color:var(--rq-ink)}
#root #main.rq-app .rq-post-name > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.rq-app .rq-zod{flex:none;font-size:15px}
#root #main.rq-app .rq-post-role{font:400 13px/18px var(--rq-font);color:var(--rq-ink-2)}
#root #main.rq-app .rq-post-what{display:flex;flex-direction:column;gap:2px;padding:0 16px 12px;font:400 15px/20px var(--rq-font);color:var(--rq-ink-2);overflow-wrap:anywhere}
#root #main.rq-app .rq-post-what b{font-weight:600;color:var(--rq-ink)}
#root #main.rq-app .rq-post-pay{color:var(--rq-stop)}
#root #main.rq-app .rq-tags{display:flex;flex-wrap:wrap;gap:6px;padding:0 16px 12px}
#root #main.rq-app .rq-tag{display:inline-flex;align-items:center;gap:5px;min-height:24px;padding:0 10px;border-radius:12px;background:var(--rq-fill);font:600 13px/18px var(--rq-font);color:var(--rq-ink)}
#root #main.rq-app .rq-tag svg{width:13px;height:13px;color:var(--rq-gold)}
#root #main.rq-app .rq-art{margin:0 16px;height:clamp(180px,62vw,260px);border-radius:var(--rq-r);overflow:hidden;background:var(--rq-art)}
#root #main.rq-app .rq-art .nill{padding:20px}
#root #main.rq-app .rq-post-foot{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;padding:9px 16px 0}
#root #main.rq-app .rq-view{display:inline-flex;align-items:center;min-height:34px;padding:0 14px;border-radius:17px;background:var(--rq-fill);font:600 15px/20px var(--rq-font);color:var(--rq-gold-text)}
#root #main.rq-app .rq-ics{font:400 13px/18px var(--rq-font);color:var(--rq-ink-2)!important;text-decoration:none}
#root #main.rq-app .rq-ics:hover{color:var(--rq-gold-text)!important;text-decoration:underline}

/* The state capsule: gold tint in the list, solid gold on the session; the fill when settled, red when wrong. */
#root #main.rq-app .rq-pill{flex:none;display:inline-flex;align-items:center;min-height:24px;padding:0 10px;border-radius:12px;white-space:nowrap;
  font:600 13px/18px var(--rq-font);background:var(--rq-fill);color:var(--rq-ink-2)}
#root #main.rq-app .rq-pill.is-gold{background:var(--rq-gold-tint);color:var(--rq-gold-text)}
#root #main.rq-app .rq-pill.is-stop{color:var(--rq-stop)}
#root #main.rq-app .rq-pill.is-hero.is-gold{background:var(--rq-accent);color:var(--rq-on-accent)}
#root #main.rq-app .rq-pill.is-hero.is-neutral{color:var(--rq-ink)}

/* The session: a way back and Help, as the app's floating bar; the drawing, the title, the place, the state. */
#root #main.rq-app .rq-bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:0 16px 0 10px;min-height:44px}
#root #main.rq-app :is(.rq-back,.rq-help){display:inline-flex;align-items:center;gap:4px;min-height:44px;padding:0 6px;border:0;background:none;cursor:pointer;font:400 17px/22px var(--rq-font);color:var(--rq-gold-text)}
#root #main.rq-app .rq-help{color:var(--rq-ink)}
#root #main.rq-app .rq-help svg{width:18px;height:18px}
#root #main.rq-app .rq-hero .rq-art-hero{height:220px;border-radius:28px;margin:0}
#root #main.rq-app .rq-art-hero .nill{padding:18px}
#root #main.rq-app .rq-hero-t{display:flex;flex-direction:column;gap:6px;padding:15px 4px 0}
#root #main.rq-app .rq-h1{margin:0!important;font:700 34px/41px var(--rq-font-d)!important;letter-spacing:0!important;color:var(--rq-ink)!important;overflow-wrap:anywhere;text-transform:none!important}
#root #main.rq-app .rq-hero-where{display:flex;align-items:baseline;gap:6px;margin:0;font:400 15px/20px var(--rq-font);color:var(--rq-ink-2);overflow-wrap:anywhere}
#root #main.rq-app .rq-hero-where svg{flex:none;width:15px;height:15px;align-self:center}
#root #main.rq-app .rq-hero-pill{padding-top:4px}

/* Columns of sections: 28 between each, the panels inset 16 from the screen, the labels and notes 32. */
#root #main.rq-app .rq-cols{display:flex;flex-direction:column;gap:28px;margin-top:12px}
#root #main.rq-app .rq-col{display:flex;flex-direction:column;gap:28px;min-width:0;padding:0 16px}
#root #main.rq-app :is(#secPanel,#puncPanel,#placeIdeas,#actErr):empty{display:none}
#root #main.rq-app .rq-s{display:flex;flex-direction:column;gap:8px;min-width:0}
#root #main.rq-app .rq-label{margin:0 16px!important;font:400 13px/18px var(--rq-font)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--rq-ink-2)!important}
#root #main.rq-app .rq-foot{margin:0 16px!important;font:400 13px/18px var(--rq-font)!important;color:var(--rq-ink-2)!important;overflow-wrap:anywhere}
#root #main.rq-app .rq-p{margin:0;font:400 15px/20px var(--rq-font);color:var(--rq-ink-2)}
#root #main.rq-app .rq-p b{color:var(--rq-ink);font-weight:600}
#root #main.rq-app .rq-p-2{margin-top:4px}
#root #main.rq-app .rq-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}

/* Panels and grouped rows: the canvas's 26px block, rows of 48 over a 0.5px hairline set in from the edge. */
#root #main.rq-app .rq-group{background:var(--rq-panel)!important;border:0!important;box-shadow:none!important;border-radius:var(--rq-r)!important;overflow:hidden;color:var(--rq-ink)}
#root #main.rq-app .rq-in{padding:16px;display:flex;flex-direction:column;gap:10px}
#root #main.rq-app .rq-row{position:relative;display:flex;align-items:baseline;justify-content:space-between;gap:12px;min-height:48px;padding:13px 16px;box-sizing:border-box;
  font:400 17px/22px var(--rq-font);color:var(--rq-ink)}
#root #main.rq-app .rq-group > :is(.rq-row,.rq-act,.rq-person,.rq-strip,.rq-map):not(:last-child)::after{content:"";position:absolute;left:16px;right:0;bottom:0;height:.5px;background:var(--rq-sep);pointer-events:none}
#root #main.rq-app .rq-group > :is(.rq-act,.rq-person,.rq-strip,.rq-map){position:relative}
#root #main.rq-app .rq-row-k{flex:0 1 auto;min-width:0;overflow-wrap:anywhere}
#root #main.rq-app .rq-row-v{flex:0 1 auto;min-width:0;max-width:62%;text-align:right;color:var(--rq-ink-2);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
#root #main.rq-app .rq-row-v.is-note{font-size:15px;line-height:20px}
#root #main.rq-app .rq-row.is-strong{font-weight:600}
#root #main.rq-app .rq-row.is-strong .rq-row-v{color:var(--rq-ink)}
#root #main.rq-app .rq-row-stack{flex-direction:column;align-items:stretch;justify-content:center;gap:2px;padding:10px 16px}
#root #main.rq-app .rq-cap{font:400 13px/18px var(--rq-font);color:var(--rq-ink-2)}
#root #main.rq-app .rq-row-t{font:400 17px/22px var(--rq-font);color:var(--rq-ink);overflow-wrap:anywhere}
#root #main.rq-app .rq-row-t b{font-weight:600}
#root #main.rq-app .rq-row-tp{display:flex;align-items:center;justify-content:space-between;gap:10px;font-weight:600}
#root #main.rq-app .rq-row-s{font:400 15px/20px var(--rq-font);color:var(--rq-ink-2);overflow-wrap:anywhere}
#root #main.rq-app .rq-row-s a,#root #main.rq-app .rq-row-v a{color:var(--rq-gold-text)}
#root #main.rq-app .rq-text{display:block;font:400 17px/24px var(--rq-font);white-space:pre-line;overflow-wrap:anywhere}

/* A person in a panel: the face (or the initial), the public name with its seal, the line under it. */
#root #main.rq-app .rq-person{display:flex;align-items:center;gap:14px;min-height:64px;padding:10px 16px;box-sizing:border-box}
#root #main.rq-app .rq-face{flex:none;width:40px;height:40px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--rq-fill);font:600 17px/1 var(--rq-font-d);color:var(--rq-ink-2)}
#root #main.rq-app .rq-face img{display:block;width:100%!important;height:100%!important;object-fit:cover!important;object-position:top;border-radius:0!important}
#root #main.rq-app .rq-person-b{display:flex;flex-direction:column;gap:2px;min-width:0}
#root #main.rq-app .rq-person-n{display:flex;align-items:center;gap:0;min-width:0;font:600 17px/22px var(--rq-font);color:var(--rq-ink)}
#root #main.rq-app .rq-person-n > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.rq-app .rq-person-s{font:400 15px/20px var(--rq-font);color:var(--rq-ink-2);overflow-wrap:anywhere}
#root #main.rq-app .tf-seal{color:var(--rq-gold)}
#root #main.rq-app .rq-strip{display:flex;gap:10px;padding:12px 16px;overflow-x:auto;scroll-snap-type:x proximity;scrollbar-width:none;overscroll-behavior-x:contain}
#root #main.rq-app .rq-strip::-webkit-scrollbar{display:none}
#root #main.rq-app .rq-strip img{flex:none;width:150px!important;height:190px!important;object-fit:cover!important;border-radius:16px!important;scroll-snap-align:start;background:var(--rq-fill)}
#root #main.rq-app .rq-map{padding:0 16px 12px}
#root #main.rq-app .rq-map .minimap{margin:12px auto 0!important;border:0!important;border-radius:16px!important;box-shadow:none!important;overflow:hidden}
#root #main.rq-app .rq-map .minimap-cta{background:var(--rq-glass)!important;color:var(--rq-ink)!important}

/* A row that does something: the 30px tile, the words, the chevron. Safety rows use the red tile. */
#root #main.rq-app .rq-act{display:flex;align-items:center;gap:14px;width:100%;min-height:52px;margin:0;padding:0 16px;box-sizing:border-box;border:0;border-radius:0;background:none;
  text-align:left;cursor:pointer;text-decoration:none!important;font:400 17px/22px var(--rq-font);color:var(--rq-ink)!important;transition:background-color .15s ease}
#root #main.rq-app .rq-act:hover{background:var(--rq-fill)}
#root #main.rq-app .rq-act:focus-visible{outline:2px solid var(--rq-accent);outline-offset:-2px}
#root #main.rq-app .rq-acts > .rq-act:not(:last-child)::after{left:60px}
#root #main.rq-app .rq-act-t{flex:1 1 auto;min-width:0;padding:13px 0;overflow-wrap:anywhere}
#root #main.rq-app .rq-maps{min-height:48px}
#root #main.rq-app .rq-maps .rq-act-t{color:var(--rq-gold-text)}
#root #main.rq-app .rq-tile{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--rq-accent);color:var(--rq-on-accent)}
#root #main.rq-app .rq-tile svg{width:17px;height:17px}
#root #main.rq-app .rq-act.is-red .rq-tile{background:var(--rq-stop-tile);color:#fff}
#root #main.rq-app .rq-act.is-stop .rq-act-t{color:var(--rq-stop)}
#root #main.rq-app .rq-chev{flex:none;width:8px;height:8px;margin:0 2px 0 0;border-right:2px solid var(--rq-chev);border-bottom:2px solid var(--rq-chev);transform:rotate(-45deg)}

/* Notices: a tile that says what kind, the title, the sentence, on the panel. */
#root #main.rq-app .rq-note{display:flex;align-items:flex-start;gap:14px;padding:16px;border-radius:var(--rq-r);background:var(--rq-panel);color:var(--rq-ink)}
#root #main.rq-app .rq-note-i{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--rq-accent);color:var(--rq-on-accent)}
#root #main.rq-app .rq-note-i svg{width:16px;height:16px}
#root #main.rq-app .rq-note.is-stop .rq-note-i{background:var(--rq-stop-tile);color:#fff}
#root #main.rq-app .rq-note-b{flex:1 1 auto;min-width:0;padding-top:4px;display:flex;flex-direction:column;gap:3px;overflow-wrap:anywhere}
#root #main.rq-app .rq-note-b b{font:600 17px/22px var(--rq-font);color:var(--rq-ink)}
#root #main.rq-app .rq-note-b p{margin:0;font:400 15px/20px var(--rq-font);color:var(--rq-ink-2)}
#root #main.rq-app .rq-note-b .rq-note-s{font-size:13px;line-height:18px}

/* Check-in: your code and theirs, side by side in one panel, stacked on a phone. */
#root #main.rq-app .rq-codes{display:flex;flex-wrap:wrap}
#root #main.rq-app .rq-code-half{position:relative;flex:1 1 230px;min-width:0;display:flex;flex-direction:column;gap:4px;padding:14px 16px;box-sizing:border-box}
#root #main.rq-app .rq-code-half + .rq-code-half{box-shadow:inset 0 .5px 0 var(--rq-sep)}
@media (min-width:492px){#root #main.rq-app .rq-code-half + .rq-code-half{box-shadow:inset .5px 0 0 var(--rq-sep)}}
#root #main.rq-app .rq-codes .code,#root #main.rq-app .rq-group .code{margin:0;padding:4px 0 0;font:700 34px/41px var(--rq-mono)!important;letter-spacing:.18em;text-indent:0;text-align:left;color:var(--rq-ink)!important;font-variant-numeric:tabular-nums}
#root #main.rq-app .rq-group > .code{padding:0 16px 16px}
#root #main.rq-app .rq-codes .field{margin:0;display:flex;flex-direction:column;gap:4px}
#root #main.rq-app .rq-codes .field .label{font:400 13px/18px var(--rq-font)!important;color:var(--rq-ink-2)!important;text-transform:none!important;letter-spacing:0!important}
#root #main.rq-app .otp{justify-content:flex-start;gap:8px;margin:0}
#root #main.rq-app .otp-b{flex:1 1 0;min-width:0;max-width:52px;height:48px;aspect-ratio:auto;border:0!important;border-radius:12px!important;background:var(--rq-fill)!important;box-shadow:none!important;
  font:700 24px/1 var(--rq-mono)!important;color:var(--rq-ink)!important;text-align:center}
#root #main.rq-app .otp-b:focus{outline:2px solid var(--rq-accent);outline-offset:0}

/* Capsule buttons: gold for the one thing to do, the grey fill for the rest, red only for a no-show. */
#root #main.rq-app .rq-actions{display:flex;flex-direction:column;gap:10px}
#root #main.rq-app .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;min-height:50px;padding:0 20px;border:0!important;border-radius:25px!important;box-shadow:none!important;
  cursor:pointer;font:600 17px/22px var(--rq-font)!important;letter-spacing:0!important;text-transform:none!important;text-decoration:none;transition:opacity .15s ease;background-image:none!important}
#root #main.rq-app .btn svg{width:17px;height:17px}
#root #main.rq-app .btn-full{width:100%}
#root #main.rq-app .btn-sm{min-height:36px;padding:0 14px;border-radius:18px!important;font-size:15px!important}
#root #main.rq-app .btn-primary{background:var(--rq-accent)!important;color:var(--rq-on-accent)!important}
#root #main.rq-app :is(.btn-secondary,.btn-ghost){background:var(--rq-fill)!important;color:var(--rq-ink)!important}
#root #main.rq-app .btn-ghost{background:none!important;color:var(--rq-gold-text)!important}
#root #main.rq-app .btn-danger{background:var(--rq-stop-tile)!important;color:#fff!important}
#root #main.rq-app .btn:hover{opacity:.88}
#root #main.rq-app .btn:disabled,#root #main.rq-app .btn[disabled]{opacity:.45;cursor:default}
#root #main.rq-app :is(.btn,.rq-back,.rq-help,.rq-glass button,.rq-act):focus-visible{outline:2px solid var(--rq-accent);outline-offset:2px}

/* The panels the page draws from elsewhere (the Guardian, the group, ideas for where to meet, the place
   picker, the review, errors): the same 26px panel, its type and its controls in the app's language. */
#root #main.rq-app .rq-col :is(.card,.glass,.glass-strong){background:var(--rq-panel)!important;border:0!important;box-shadow:none!important;border-radius:var(--rq-r)!important;
  padding:16px!important;color:var(--rq-ink);-webkit-backdrop-filter:none!important;backdrop-filter:none!important}
#root #main.rq-app .rq-col :is(.card,.glass,.glass-strong) :is(.card,.glass,.glass-strong){background:var(--rq-fill)!important;border-radius:16px!important;padding:14px!important}
#root #main.rq-app .rq-col :is(h2,h3,h4){font-family:var(--rq-font-d)!important;letter-spacing:0!important;color:var(--rq-ink)!important;text-transform:none!important}
#root #main.rq-app .rq-col :is(.card,.glass,.glass-strong) h3{font:600 17px/22px var(--rq-font)!important}
#root #main.rq-app .rq-col .eyebrow{font:400 13px/18px var(--rq-font)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--rq-ink-2)!important}
#root #main.rq-app .rq-col :is(.small,.hint,.k){color:var(--rq-ink-2)!important;font-size:15px;line-height:20px}
#root #main.rq-app .rq-col .tiny{color:var(--rq-ink-2)!important;font-size:13px;line-height:18px}
#root #main.rq-app .rq-col :is(.card,.glass,.glass-strong) a:not(.btn){color:var(--rq-gold-text)}
#root #main.rq-app .rq-col .kv{border-bottom:.5px solid var(--rq-sep)!important;font:400 15px/20px var(--rq-font)}
#root #main.rq-app .rq-col .kv:last-child{border-bottom:0!important}
#root #main.rq-app .rq-col .kv .v{color:var(--rq-ink);font-weight:400}
#root #main.rq-app .rq-col .notice{display:flex;gap:12px;align-items:flex-start;padding:14px 16px!important;border:0!important;border-radius:16px!important;background:var(--rq-panel)!important;box-shadow:none!important;
  color:var(--rq-ink-2)!important;font:400 15px/20px var(--rq-font)}
#root #main.rq-app .rq-col :is(.card,.glass,.glass-strong,.rq-group) .notice{background:var(--rq-fill)!important}
#root #main.rq-app .rq-col .notice b{display:block;color:var(--rq-ink)!important;font-weight:600}
#root #main.rq-app .rq-col .notice > svg{flex:none;width:18px;height:18px;color:var(--rq-gold-text)!important}
#root #main.rq-app .rq-col .notice.stop > svg,#root #main.rq-app .rq-col .notice.stop b{color:var(--rq-stop)!important}
#root #main.rq-app .rq-col .status{display:inline-flex;align-items:center;gap:5px;height:24px;padding:0 10px!important;border:0!important;border-radius:12px!important;
  background:var(--rq-fill)!important;color:var(--rq-ink-2)!important;font:600 13px/18px var(--rq-font)!important;text-transform:none!important;letter-spacing:0!important;white-space:nowrap}
#root #main.rq-app .rq-col .status:is(.completed,.upcoming,.live,.accepted,.confirmed){background:var(--rq-gold-tint)!important;color:var(--rq-gold-text)!important}
#root #main.rq-app .rq-col .status.held{color:var(--rq-stop)!important}
#root #main.rq-app .rq-col .status svg{width:13px;height:13px}
#root #main.rq-app .rq-col :is(.chip,.tag){border:0!important;border-radius:17px!important;background:var(--rq-fill)!important;color:var(--rq-ink)!important;box-shadow:none!important}
#root #main.rq-app .rq-col :is(.input,.textarea,textarea,select,input[type="text"],input[type="tel"],input:not([type])):not(.otp-b){border:0!important;border-radius:12px!important;
  background:var(--rq-fill)!important;color:var(--rq-ink)!important;box-shadow:none!important;font:400 17px/22px var(--rq-font);min-height:44px;box-sizing:border-box;max-width:100%}
#root #main.rq-app .rq-col .field > :is(label,.label){color:var(--rq-ink-2)!important;font:400 13px/18px var(--rq-font)!important;text-transform:none!important;letter-spacing:0!important}
#root #main.rq-app .rq-col :is(.procard,.placerow){border:0!important;border-radius:16px!important;background:var(--rq-fill)!important;box-shadow:none!important;color:var(--rq-ink)!important}
#root #main.rq-app .rq-col .procard:has(input:checked){box-shadow:inset 0 0 0 2px var(--rq-accent)!important}
#root #main.rq-app .rq-col :is(.placerow-m,.placerow-a){color:var(--rq-ink-2)!important}
#root #main.rq-app .rq-col .placelist{max-height:340px;overflow-y:auto;overscroll-behavior:contain}
#root #main.rq-app .rq-col :is(.rface,.rchip){border:0!important;background:var(--rq-fill)!important;color:var(--rq-ink)!important;box-shadow:none!important}
#root #main.rq-app .rq-col .rface{border-radius:16px!important}
#root #main.rq-app .rq-col .rchip{border-radius:17px!important}
#root #main.rq-app .rq-col :is(.rface,.rchip).on{background:var(--rq-gold-tint)!important;box-shadow:inset 0 0 0 1.5px var(--rq-accent)!important}
#root #main.rq-app .rq-col .rvenue{border:0!important;background:none!important;padding:4px 0 0!important}
#root #main.rq-app .rq-col .empty{text-align:center}
#root #main.rq-app .rq-col :is(.whopro,.pro-b,.cphead,.between){min-width:0}
#root #main.rq-app .rq-col :is(.prorail,.tbl){max-width:100%;overflow-x:auto}

/* Wide: the session's who, when and where on the left, what to do, the price and the ways out beside them. */
@media (min-width:600px){
  #root #main.rq-app > .rq-wrap{padding:8px 0 56px!important}
}
@media (min-width:1024px){
  #root #main.rq-app.rq-one > .rq-wrap{max-width:1040px!important;padding:8px 24px 56px!important}
  #root #main.rq-app.rq-one .rq-bar{padding:0 0 0 0}
  #root #main.rq-app .rq-cols{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:40px;align-items:start}
  #root #main.rq-app .rq-col{padding:0}
}
@media (prefers-reduced-motion:reduce){
  #root #main.rq-app :is(.rq-post,.rq-act,.rq-seg button,.btn){transition:none!important}
}
/* On wide screens the window's own bell sits top right, so the page's copy would be a second one. */
@media (min-width:1024px){ #root #main.rq-app button[onclick="bellToggle()"]{display:none!important} }
/* Membership marks after the seal (3 Oct 2026). */
.tf-pro{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:6px;margin-left:6px;vertical-align:middle;
  background:linear-gradient(135deg,#F6E3B0,#C9A063);color:#131312;font:800 11px/20px var(--n-font,system-ui);letter-spacing:.06em;flex:none}
.tf-plus{display:inline-flex;align-items:center;height:20px;padding:0 7px;border-radius:10px;margin-left:6px;vertical-align:middle;
  background:var(--n-gold-tint,rgba(217,189,146,.16));color:var(--n-gold-text,#D9BD92);font:600 12px/20px var(--n-font,system-ui);flex:none}
/* A host who takes groups: the people icon alone on the card's photo, top right (owner, 3 Oct 2026). */
html body .acard .acard-photo .acard-groups{position:absolute;top:12px;right:12px;width:32px;height:32px;border-radius:16px;display:inline-flex;align-items:center;justify-content:center;
  background:rgba(0,0,0,.55);color:#fff;backdrop-filter:blur(8px);-webkit-backdrop-filter:blur(8px);z-index:2}
html body .acard .acard-photo .acard-groups svg{width:17px;height:17px}

/* ==========================================================================
   Hosts meetups (owner, 4 Oct 2026): the circle card on Explore, Requests and the Hosts circle; the meetup
   page; the New meetup form inside the Hosting board. Read from the Night tokens, with the light cut as the
   fallback the way .acard does, so a card reads the same wherever it is dropped. The form reuses the board's
   hd-group / hd-row / hd-switch and adds only its own fields, the entry control and the co-host chips.
   ========================================================================== */
.mt-list{display:flex;flex-direction:column;gap:12px;min-width:0}
#root #main.rq-app .mt-rq{display:flex;flex-direction:column;gap:20px;margin:6px 0 18px}
#root #main.hd-app .mt-list-hd{margin:0 16px}
/* The card: gold date line and entry pill, the title, the place, the hosts' faces and the count. */
.mt-card{display:flex;flex-direction:column;gap:6px;padding:16px;border-radius:20px;background:var(--n-panel,#fff);color:var(--n-ink,#1B1C1A);
  font-family:var(--n-font,system-ui);cursor:pointer;min-width:0;transition:background-color .15s var(--n-ease,ease)}
.mt-card:hover{background:color-mix(in srgb,var(--n-panel,#fff) 92%,var(--n-ink,#1B1C1A))}
.mt-card:focus-visible{outline:2px solid var(--n-accent,#896A44);outline-offset:2px}
.mt-card-top{display:flex;align-items:center;justify-content:space-between;gap:10px}
.mt-date{font:600 13px/18px var(--n-font,system-ui);letter-spacing:.04em;text-transform:uppercase;color:var(--n-gold-text,#74552F);font-variant-numeric:tabular-nums}
.mt-pill{flex:none;display:inline-flex;align-items:center;height:24px;padding:0 10px;border-radius:12px;font:600 13px/24px var(--n-font,system-ui);
  background:var(--n-accent,#896A44);color:var(--n-on-accent,#fff);font-variant-numeric:tabular-nums}
.mt-pill.is-free{background:var(--n-gold-tint,rgba(137,106,68,.12));color:var(--n-gold-text,#74552F)}
#root .mt-card .mt-title{margin:2px 0 0!important;font:600 20px/25px var(--n-font-display,system-ui)!important;letter-spacing:0!important;color:var(--n-ink,#1B1C1A)!important;overflow-wrap:anywhere}
#root .mt-card .mt-place{margin:0;display:flex;align-items:center;gap:6px;font:400 15px/20px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);min-width:0}
.mt-place span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.mt-place svg{width:15px;height:15px;flex:none;color:var(--n-gold-text,#74552F)}
.mt-card-foot{display:flex;align-items:center;gap:10px;margin-top:6px;min-width:0}
.mt-count{font:400 13px/18px var(--n-font,system-ui);color:var(--n-ink-2,#5F5A51);font-variant-numeric:tabular-nums}
/* The review state on a host's own meetup, in the session list's three tones. */
.mt-state{margin-left:auto;flex:none;display:inline-flex;align-items:center;height:22px;padding:0 9px;border-radius:11px;font:600 12px/22px var(--n-font,system-ui)}
.mt-state.is-gold{background:var(--n-gold-tint,rgba(137,106,68,.12));color:var(--n-gold-text,#74552F)}
.mt-state.is-ok{background:var(--n-ok-tint,rgba(63,107,79,.12));color:var(--n-ok,#3F6B4F)}
.mt-state.is-stop{background:var(--n-stop-tint,rgba(179,37,30,.10));color:var(--n-stop,#B3251E)}
.mt-state.is-neutral{background:var(--n-fill,rgba(118,118,128,.12));color:var(--n-ink-2,#5F5A51)}
.mt-statebar{margin:8px 4px 0}
.mt-statebar .mt-state{margin-left:0}

/* The meetup page: a pushed screen, the app's 600 column, grouped panels like the session page. */
#root #main.mt-app{
  --mt-panel:var(--n-panel,#1F201D); --mt-ink:var(--n-ink,#F1EBE0); --mt-ink-2:var(--n-ink-2,#ADA69A); --mt-sep:var(--n-sep,rgba(255,255,255,.12));
  --mt-gold:var(--n-gold,#D9BD92); --mt-gold-text:var(--n-gold-text,#D9BD92); --mt-gold-tint:var(--n-gold-tint,rgba(217,189,146,.16));
  --mt-accent:var(--n-accent,#D9BD92); --mt-on-accent:var(--n-on-accent,#131312); --mt-fill:var(--n-fill,rgba(118,118,128,.24));
  --mt-chev:var(--n-chev,rgba(235,235,245,.3)); --mt-stop:var(--n-stop,#F1B8B5);
  --mt-font:var(--n-font,-apple-system,BlinkMacSystemFont,"SF Pro Text",system-ui,sans-serif); --mt-font-d:var(--n-font-display,-apple-system,BlinkMacSystemFont,"SF Pro Display",system-ui,sans-serif);
  --mt-r:26px; font-family:var(--mt-font);color:var(--mt-ink);overflow-x:clip}
#root #main.mt-app > .mt-wrap{max-width:600px!important;margin:0 auto!important;padding:6px 16px 48px!important;display:flex;flex-direction:column;min-width:0}
#root #main.mt-app .mt-subhead{margin:0 0 10px}
#root #main.mt-app .mt-back{display:inline-flex;align-items:center;gap:2px;min-height:44px;margin-left:-6px;padding:0 6px 0 0;border:0;background:none;cursor:pointer;font:400 17px/22px var(--mt-font);color:var(--mt-gold-text)}
#root #main.mt-app .mt-back:focus-visible{outline:2px solid var(--mt-accent);outline-offset:2px}
#root #main.mt-app .mt-band{aspect-ratio:16/9;border-radius:var(--mt-r);overflow:hidden;background:var(--mt-gold-tint);display:grid;place-items:center}
#root #main.mt-app .mt-band .nill{background-color:transparent}
#root #main.mt-app .mt-band-photos{display:flex;gap:2px}
#root #main.mt-app .mt-band-photos img{flex:1 1 0;min-width:0;height:100%;object-fit:cover;object-position:top}
#root #main.mt-app .mt-band-i{color:var(--mt-gold-text)}
#root #main.mt-app .mt-band-i svg{width:44px;height:44px}
#root #main.mt-app .mt-date-hero{margin:18px 4px 2px}
#root #main.mt-app .mt-h1{margin:0 4px!important;font:700 28px/34px var(--mt-font-d)!important;letter-spacing:0!important;color:var(--mt-ink)!important;overflow-wrap:anywhere}
#root #main.mt-app .mt-group{margin-top:16px;background:var(--mt-panel);border-radius:var(--mt-r);overflow:hidden}
#root #main.mt-app .mt-row{position:relative;display:flex;align-items:center;gap:14px;width:100%;padding:12px 16px;box-sizing:border-box;border:0;background:none;
  font:inherit;color:inherit;text-align:left}
#root #main.mt-app .mt-row:not(:last-child)::after{content:"";position:absolute;left:60px;right:0;bottom:0;height:.5px;background:var(--mt-sep)}
#root #main.mt-app button.mt-row{cursor:pointer;transition:background-color .15s ease}
#root #main.mt-app button.mt-row:hover{background:var(--mt-fill)}
#root #main.mt-app .mt-tile{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:8px;background:var(--mt-accent);color:var(--mt-on-accent)}
#root #main.mt-app .mt-tile svg{width:17px;height:17px}
#root #main.mt-app .mt-row-t{flex:1 1 auto;min-width:0;display:flex;flex-direction:column;gap:2px}
#root #main.mt-app .mt-row-k{font:400 13px/18px var(--mt-font);color:var(--mt-ink-2)}
#root #main.mt-app .mt-row-v{font:400 17px/22px var(--mt-font);color:var(--mt-ink);overflow-wrap:anywhere;display:flex;flex-direction:column;gap:2px}
#root #main.mt-app .mt-sub{font:400 15px/20px var(--mt-font);color:var(--mt-ink-2)}
#root #main.mt-app .mt-link{font:400 15px/20px var(--mt-font);color:var(--mt-gold-text)!important}
#root #main.mt-app .mt-face{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--mt-fill);font:600 14px/1 var(--mt-font-d);color:var(--mt-ink-2)}
#root #main.mt-app .mt-face img{width:100%;height:100%;object-fit:cover}
#root #main.mt-app .mt-name{display:flex;align-items:center;gap:2px;font:600 17px/22px var(--mt-font);color:var(--mt-ink);min-width:0}
#root #main.mt-app .mt-name > span:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.mt-app .mt-name .tf-seal{flex:none;color:var(--mt-gold)}
#root #main.mt-app .mt-chev{flex:none;width:8px;height:8px;margin-right:2px;border-right:2px solid var(--mt-chev);border-bottom:2px solid var(--mt-chev);transform:rotate(-45deg)}
#root #main.mt-app .mt-label{margin:24px 16px 8px!important;font:400 13px/18px var(--mt-font)!important;text-transform:uppercase;letter-spacing:.02em;color:var(--mt-ink-2)!important}
#root #main.mt-app .mt-going{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:14px 16px;border-radius:var(--mt-r);background:var(--mt-panel);
  font:400 15px/20px var(--mt-font);color:var(--mt-ink-2);font-variant-numeric:tabular-nums}
#root #main.mt-app .mt-cta{display:flex;flex-direction:column;gap:10px;margin-top:24px}
#root #main.mt-app .mt-cta-row{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:10px}
#root #main.mt-app .mt-ask{margin:0;text-align:center;font:600 20px/25px var(--mt-font-d);color:var(--mt-ink)}
#root #main.mt-app .mt-note{margin:0 4px;font:400 15px/20px var(--mt-font);color:var(--mt-ink-2)}
#root #main.mt-app .mt-note.is-gold{color:var(--mt-gold-text)}
#root #main.mt-app .mt-note.is-stop{color:var(--mt-stop)}
#root #main.mt-app .mt-in-pill{align-self:center;display:inline-flex;align-items:center;gap:8px;height:40px;padding:0 18px;border-radius:20px;
  background:var(--mt-gold-tint);color:var(--mt-gold-text);font:600 17px/22px var(--mt-font)}
#root #main.mt-app .mt-in-pill svg{width:18px;height:18px}
#root #main.mt-app .mt-cancel{align-self:center;color:var(--mt-stop)!important}
/* The one big button: Join, free / Join · AED 45 / Co-host it. */
#root #main :is(.mt-app,.hd-app) .mt-big{min-height:50px;width:100%;border-radius:25px!important;font:600 17px/22px var(--n-font,system-ui)!important;border:0!important;box-shadow:none!important}
#root #main.mt-app .btn-primary.mt-big{background:var(--mt-accent)!important;color:var(--mt-on-accent)!important}
#root #main.mt-app .btn-secondary.mt-big{background:var(--mt-fill)!important;color:var(--mt-ink)!important}

/* The New meetup form: a label on the left, the field on the right, inside the board's grouped rows. */
#root #main.hd-app .mt-field{cursor:default;gap:12px}
#root #main.hd-app .mt-k{flex:none;width:38%;max-width:180px;padding:13px 0;font:400 17px/22px var(--hd-font);color:var(--hd-ink)}
#root #main.hd-app .mt-in{flex:1 1 auto;min-width:0;width:100%;margin:0;padding:12px 0;border:0!important;background:none!important;box-shadow:none!important;
  font:400 17px/22px var(--hd-font)!important;color:var(--hd-ink)!important;text-align:right;outline:none;color-scheme:inherit}
#root #main.hd-app .mt-in::placeholder{color:var(--hd-ink-2);opacity:.8}
#root #main.hd-app select.mt-in{cursor:pointer;text-align-last:right;-webkit-appearance:none;appearance:none}
#root #main.hd-app .mt-field:focus-within{background:var(--hd-fill)}
#root #main.hd-app .mt-money{flex:1 1 auto;display:flex;align-items:center;justify-content:flex-end;gap:6px;min-width:0;color:var(--hd-ink-2)}
#root #main.hd-app .mt-money .mt-in{flex:0 1 auto;width:8ch}
#root #main.hd-app .mt-step{margin-left:auto;display:inline-flex;align-items:center;gap:14px}
#root #main.hd-app .mt-step b{min-width:2ch;text-align:center;font:600 17px/22px var(--hd-font);font-variant-numeric:tabular-nums}
#root #main.hd-app .mt-step button{width:32px;height:32px;display:grid;place-items:center;padding:0;border:0;border-radius:16px;background:var(--hd-fill);color:var(--hd-ink);cursor:pointer}
#root #main.hd-app .mt-step svg{width:16px;height:16px}
/* Entry: the app's segmented control, Free | Price per person. */
#root #main.hd-app .mt-seg{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:2px;margin:0 16px;padding:2px;border-radius:9px;background:var(--hd-seg-track)}
#root #main.hd-app .mt-seg button{min-height:32px;padding:0 6px;border:0;border-radius:7px;background:none;cursor:pointer;font:500 15px/20px var(--hd-font);color:var(--hd-ink);transition:background-color .2s ease}
#root #main.hd-app .mt-seg button[aria-pressed="true"]{background:var(--hd-seg-thumb);font-weight:600;box-shadow:0 3px 8px rgba(0,0,0,.12),0 3px 1px rgba(0,0,0,.04)}
#root #main.hd-app .mt-seg button:focus-visible{outline:2px solid var(--hd-accent);outline-offset:1px}
/* Co-hosts: the ones asked, as chips over the search; results are rows with the seal by the name. */
#root #main.hd-app .mt-chips{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px 10px}
#root #main.hd-app .mt-chip{display:inline-flex;align-items:center;gap:8px;height:36px;padding:0 4px 0 3px;border-radius:18px;background:var(--hd-panel);font:500 15px/20px var(--hd-font);color:var(--hd-ink)}
#root #main.hd-app .mt-chip img,#root #main.hd-app .mt-chip span[aria-hidden]{width:30px!important;height:30px!important;border:0!important}
#root #main.hd-app .mt-chip button{width:28px;height:28px;display:grid;place-items:center;padding:0;border:0;border-radius:14px;background:none;color:var(--hd-ink-2);cursor:pointer}
#root #main.hd-app .mt-chip button svg{width:14px;height:14px}
#root #main.hd-app .mt-face{flex:none;width:30px;height:30px;border-radius:50%;overflow:hidden;display:grid;place-items:center;background:var(--hd-fill);font:600 14px/1 var(--hd-font-d);color:var(--hd-ink-2)}
#root #main.hd-app .mt-face img{width:100%;height:100%;object-fit:cover}
#root #main.hd-app .mt-name{display:flex;align-items:center;gap:2px;min-width:0}
#root #main.hd-app .mt-name .tf-seal{flex:none;color:var(--hd-gold)}
#root #main.hd-app .mt-hit .hd-row-v{color:var(--hd-gold-text)}
#root #main.hd-app .mt-hit{--hd-inset:60px}
#root #main.hd-app .mt-hit-none{margin:0;padding:10px 16px 12px}
#root #main.hd-app .mt-hit-none:empty{display:none}
#root #main.hd-app .mt-lead{margin-top:0}
#root #main.hd-app .mt-submit{display:flex;flex-direction:column;gap:10px;margin-left:16px;margin-right:16px}
#root #main.hd-app .mt-submit .hd-note{margin:0 16px}
#root #main.hd-app .mt-submit .btn-primary{background:var(--hd-accent)!important;color:var(--hd-on-accent)!important}
/* Built around an interest (4 Oct 2026): a small neutral pill on cards and the meetup page, so it never reads as the entry price. */
.mt-topic{margin:0;display:flex}
.mt-int{display:inline-flex;align-items:center;height:22px;max-width:100%;padding:0 9px;border-radius:11px;background:var(--n-fill,rgba(118,118,128,.12));
  color:var(--n-ink-2,#5F5A51);font:600 12px/22px var(--n-font,system-ui);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#root #main.mt-app .mt-topic-hero{margin:8px 4px 0}
/* Explore: "For you" first, then the rest, each under its own small heading. */
.mt-sec{display:flex;flex-direction:column;gap:10px;min-width:0}
#root .mt-sec .mt-sec-h{margin:0!important;font:600 20px/25px var(--n-font-display,system-ui)!important;letter-spacing:0!important;color:var(--n-ink,#1B1C1A)!important}
#root .mt-sec .mt-sec-s{margin:-6px 0 0}
/* New meetup: "Suggest one for me", and the host's interests as chips to build it around. */
#root #main.hd-app .mt-suggest{margin-left:16px;margin-right:16px}
#root #main.hd-app .mt-suggest .hd-note{margin:8px 16px 0}
#root #main.hd-app .mt-suggest .btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;background:var(--hd-panel)!important;color:var(--hd-gold-text,var(--hd-ink))!important}
#root #main.hd-app .mt-suggest .btn svg{width:18px;height:18px}
#root #main.hd-app .mt-ints{display:flex;flex-wrap:wrap;gap:8px;margin:0 16px}
#root #main.hd-app .mt-int-chip{min-height:36px;padding:0 14px;border:0;border-radius:18px;background:var(--hd-panel);color:var(--hd-ink);cursor:pointer;
  font:500 15px/20px var(--hd-font);transition:background-color .2s ease,color .2s ease}
#root #main.hd-app .mt-int-chip[aria-checked="true"]{background:var(--hd-accent);color:var(--hd-on-accent);font-weight:600}
#root #main.hd-app .mt-int-chip:focus-visible{outline:2px solid var(--hd-accent);outline-offset:2px}
#root #main.hd-app .mt-idea .mt-state{margin-left:auto}
/* The co-host popup: both faces, the question, two answers. */
.mt-pop{display:flex;flex-direction:column;gap:12px}
.mt-pop-faces{align-self:center}
.mt-pop-faces img,.mt-pop-faces span[aria-hidden]{width:52px!important;height:52px!important}
@media (prefers-reduced-motion:reduce){
  .mt-card,#root #main.mt-app button.mt-row,#root #main.hd-app .mt-seg button,#root #main.hd-app .mt-int-chip{transition:none!important}
}

/* ---- Android phones: the website as the Android app draws it (owner, 4 Oct 2026) ----
   The iPhone look above stays for iPhones and computers; on Android the parts that differ between the two apps
   change: Geist type, the full-width navigation bar with a pill behind the chosen icon, the back arrow alone,
   and Android switches. */
html.tf-android.tf-night.tf-night.tf-night.tf-night{--n-font:"Geist",Roboto,system-ui,sans-serif;--n-font-display:"Geist",Roboto,system-ui,sans-serif}
@media (max-width:1023px){
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs{left:0!important;right:0!important;bottom:0!important;max-width:none;margin:0;
    height:calc(80px + env(safe-area-inset-bottom))!important;padding:0 8px env(safe-area-inset-bottom)!important;border-radius:0!important;
    border:0!important;border-top:1px solid var(--n-hair)!important;background:var(--n-panel)!important;backdrop-filter:none!important;-webkit-backdrop-filter:none!important}
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs button{height:80px!important;border-radius:0!important;gap:4px!important;font:500 12px/16px var(--n-font)!important}
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs button svg{box-sizing:content-box;padding:4px 20px;border-radius:16px;transition:background-color .2s ease}
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs :is(button[aria-current="page"],button[aria-expanded="true"]){background:none!important}
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs :is(button[aria-current="page"],button[aria-expanded="true"]) svg{background:var(--n-tab-sel)}
  html.tf-android.tf-night.tf-night.tf-night body #tabs.tabs:has(button[aria-expanded="true"]) button[aria-current="page"] svg{background:none}
}
/* Back is the arrow alone, the page's title says where you are. */
html.tf-android #root #main :is(.pf-back,.hd-back,.rq-back) span{display:none}
html.tf-android #root #main :is(.pf-back,.hd-back,.rq-back){width:48px;justify-content:center;margin-left:-12px;padding:0;color:var(--n-ink,currentColor)}
/* Android switches: an outlined track with a small thumb, filled with a larger thumb when on. */
html.tf-android #root #main :is(.hd-switch,.hp-switch){width:52px;height:32px;border-radius:16px;box-sizing:border-box;border:2px solid var(--n-tab-idle);background:transparent}
html.tf-android #root #main :is(.hd-switch,.hp-switch)::before{top:6px;left:6px;width:16px;height:16px;background:var(--n-tab-idle);box-shadow:none;transition:all .2s ease}
html.tf-android #root #main :is(.hd-switch,.hp-switch):checked{border-color:var(--n-accent,#896A44);background:var(--n-accent,#896A44)}
html.tf-android #root #main :is(.hd-switch,.hp-switch):checked::before{top:2px;left:2px;width:24px;height:24px;background:#fff;transform:translateX(20px)}
/* Meetups: the back arrow alone, and Geist in the big button. */
html.tf-android #root #main.mt-app .mt-back span{display:none}
html.tf-android #root #main.mt-app .mt-back{width:48px;justify-content:center;margin-left:-12px;padding:0;color:var(--n-ink,currentColor)}
html.tf-android #root #main :is(.mt-app,.hd-app) .mt-big{border-radius:20px!important}