@import url("https://fonts.googleapis.com/css2?family=Lato:ital,wght@0,300;0,400;0,700;0,900;1,400&display=swap");
:root{--bg:#0a0e1a;--layer:#161a26;--layer2:#1e2330;--layer3:#272d3d;--field:#10141f;--border:rgba(255,255,255,.12);--bsub:rgba(255,255,255,.08);--bstrong:rgba(255,255,255,.24);--text:#f4f6fb;--t2:#c3c9d8;--t3:#9198aa;--tinv:#0a0e1a;--blue:#007aff;--blue-h:#2b90ff;--blue-a:#0a84ff;--link:#5aa7ff;--green:#2bc740;--green-bg:rgba(43,199,64,.14);--red:#ff5f58;--red-bg:rgba(255,95,88,.14);--red-h:#ff7a74;--yellow:#ffcb41;--yellow-bg:rgba(255,203,65,.14);--purple:#a78bfa;--teal:#34d0c8;--sans:-apple-system, BlinkMacSystemFont, 'SF Pro Text', 'SF Pro Display', Lato, 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;--mono:ui-monospace, 'SF Mono', Menlo, Consolas, monospace;--rail-w:268px;--head-h:48px;--tint-int:rgba(0,122,255,.10);--tint-int-h:rgba(0,122,255,.18);--tint-ext:rgba(43,199,64,.10);--tint-ext-h:rgba(43,199,64,.18);--sheet-in:.32s cubic-bezier(.2,.8,.2,1);--sheet-rise:12px}

/* style: next */
/* ── sup · next — "Aurora desktop" ──────────────────────────────────────────────────────────────────────────
   The original Sup identity: a floating dark-glass window resting on a living Big Sur wallpaper. Lato type,
   traffic-light window chrome, a gold "new" accent and an iOS-blue send. Glassy panels, soft rounded corners.
   The desktop-window chrome is scoped to the web app (body:has(#shell)); server-rendered Super sites only take
   the recoloured tokens. Loads after app.css for browsers on /style/next only. ──────────────────────────── */


:root {
  --h: 48px;
  --rail-w: 268px;
  --glass: rgba(20, 24, 36, 0.72);
  --glass2: rgba(255, 255, 255, 0.06);
  --glass3: rgba(255, 255, 255, 0.1);
  --hair: rgba(255, 255, 255, 0.09);
  --hair2: rgba(255, 255, 255, 0.14);
  --win-r: 14px;
  --win-shadow: 0 40px 120px rgba(0, 0, 0, 0.55), 0 12px 40px rgba(0, 0, 0, 0.4), 0 0 0 0.5px rgba(0, 0, 0, 0.55);
  --pop: 0 18px 50px rgba(0, 0, 0, 0.5), 0 0 0 0.5px rgba(0, 0, 0, 0.6);
  /* mode-swappable surfaces (Color mode defaults; Light/Dark override below) */
  --win-bg: rgba(18, 22, 34, 0.58);
  --win-border: rgba(255, 255, 255, 0.14);
  --win-blur: 20px;
  --rail-bg: rgba(0, 0, 0, 0.2);
  --pane-bg: rgba(9, 12, 20, 0.34);
  --top-bg: linear-gradient(180deg, rgba(12, 15, 25, 0.74), rgba(12, 15, 25, 0.58));
  --field-bg: rgba(255, 255, 255, 0.07);
  --search-bg: rgba(228, 231, 237, 0.94);
  --search-bg-f: #eef0f4;
  --search-fg: #1c1c1e;
  --search-ph: #7c8290;
  --pill-bg: rgba(255, 255, 255, 0.96);
  --chip-bg: rgba(228, 231, 237, 0.92);
  --chip-bg-h: rgba(236, 238, 242, 0.96);
  --chip-fg: #e6e8ee;
  --chip-on-bg: #e6e8ee;
  --chip-on-fg: #1c1c1e;
  --cat-primary: #3f8be0;
  --cat-transactions: #4f9a5e;
  --cat-updates: #7367b8;
  --cat-promotions: #c6497b;
  --note-base: rgba(255, 255, 255, 0.9);
  --act-bg: rgba(255, 255, 255, 0.12);
  --act-bg-h: rgba(255, 255, 255, 0.2);
  --act-fg: #e6e8ee;
  --card-bg: rgba(255, 255, 255, 0.06);
  --card-shadow: none;
  --sheet-bg: #1c1f2a;
  --group-bg: rgba(255, 255, 255, 0.07);
  --menu-bg: rgba(26, 30, 42, 0.8);
  --menu-solid: #1e2230;
  --menu-hover: rgba(255, 255, 255, 0.1);
  --pane-bg-m: rgba(11, 14, 22, 0.82);
  --top-bg-m: rgba(15, 18, 27, 0.86);
  --wall-display: block;
}
html {
  color-scheme: dark;
}
body {
  font-family: var(--sans);
  letter-spacing: -0.006em;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}

/* ── the wallpaper: painted by an app-only backdrop element, so marketing pages stay flat ─────────────── */
#wallpaper {
  position: fixed;
  inset: 0;
  z-index: -2;
  display: var(--wall-display);
  background: #0a0e1a var(--wall-url, url("/appearance/bg/color")) center center / cover no-repeat;
  pointer-events: none;
  transition: filter 1.6s ease;
  transform: scale(1.04);
}
/* on load: a slow colour + light sweep settling to base (the old "morning-filter") */
#wallpaper.wp-enter {
  filter: hue-rotate(40deg) saturate(1.12) brightness(1.07);
}
/* on check-mail / new message: a brief shimmer */
#wallpaper.wp-pulse {
  filter: hue-rotate(-42deg) saturate(1.3) brightness(1.14);
  transition: filter 1s ease;
}
@media (prefers-reduced-motion: reduce) {
  #wallpaper {
    animation: none !important;
    transition: none !important;
  }
}
#wallpaper::after {
  content: "";
  position: absolute;
  inset: 0;
  background: radial-gradient(120% 90% at 50% 0%, transparent 40%, rgba(6, 8, 18, 0.35) 100%);
}
body:has(#wallpaper) {
  background: #0a0e1a;
}
.authwrap.on {
  background: transparent !important;
}

/* ── the floating window ───────────────────────────────────────────────────────────────────────────────── */
@media (min-width: 901px) {
  #shell.on {
    height: calc(100dvh - 56px);
    max-width: 1320px;
    margin: 28px auto;
    border-radius: 20px;
    overflow: hidden;
    background: var(--win-bg);
    box-shadow: var(--win-shadow);
    border: 0.5px solid var(--win-border);
    outline: 0.5px solid rgba(0, 0, 0, 0.4);
    outline-offset: -1px;
  }
  /* a hairline of light along the very top edge — the visionOS "lit rim" */
  #shell.on::before {
    content: "";
    position: absolute;
    left: 0;
    right: 0;
    top: 0;
    height: 1px;
    z-index: 9;
    background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.5), transparent);
    pointer-events: none;
  }
  /* traffic lights at the far left of the title bar */
  .top::before {
    content: "";
    flex: 0 0 auto;
    width: 56px;
    height: 14px;
    margin: 0 0.35rem 0 0.1rem;
    background-image:
      radial-gradient(circle at 6px 50%, #ff5f58 5.5px, transparent 6.5px),
      radial-gradient(circle at 26px 50%, #febb2c 5.5px, transparent 6.5px),
      radial-gradient(circle at 46px 50%, #28c840 5.5px, transparent 6.5px);
    background-repeat: no-repeat;
  }

  /* ── macOS inset layout: the rail is its own translucent panel, the content its own card, ─────────────
        with the window's wallpaper-glass showing in the gutter between them ─────────────────────────── */
  /* the base desktop layout wraps everything in spacer columns (max(1rem,(100%-1120)/2)); drop them so the
     rail and content reach the window edges. Two columns only: rail + content. */
  #shell.on {
    grid-template-rows: var(--h) auto auto 1fr !important;
    grid-template-columns: var(--rail-w) minmax(0, 1fr) !important;
  }
  #shell.on .nav {
    grid-column: 1 !important;
    margin: 10px 5px 10px 10px !important;
    padding-left: 0.5rem !important;
  }
  #shell.on .list,
  #shell.on .conv {
    grid-column: 2 !important;
    margin: 10px 10px 10px 5px !important;
  }
  #shell.on .top,
  #shell.on .ribbon,
  #shell.on .ann,
  #shell.on .pfoot {
    padding-left: 16px !important;
    padding-right: 16px !important;
  }
  .top {
    border-bottom: 0 !important;
  }
  .ribbon:empty {
    display: none !important;
    border: 0 !important;
    padding: 0 !important;
  }
  .nav {
    margin: 6px 4px 12px 0;
    border: 0.5px solid var(--hair);
    border-radius: 14px;
    overflow: hidden auto;
    background: var(--rail-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.15);
  }
  .list,
  .conv {
    margin: 6px 0 12px 4px;
    border: 0.5px solid var(--hair);
    border-radius: 14px;
    overflow: auto;
    background: var(--pane-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    box-shadow:
      inset 0 1px 0 rgba(255, 255, 255, 0.05),
      0 1px 3px rgba(0, 0, 0, 0.15);
  }
  .conv {
    overflow: hidden;
  }
  /* the list search + conversation header sit flush at the top of their card */
  .list .search {
    border-top-left-radius: 14px;
    border-top-right-radius: 14px;
  }
  .pfoot {
    display: none !important;
  }
}

/* ── title bar ─────────────────────────────────────────────────────────────────────────────────────────── */
.top {
  background: var(--top-bg) !important;
  border-bottom: 1px solid var(--hair);
  height: var(--h);
  gap: 0.8rem;
}
.top .brand {
  font-weight: 700;
  font-size: 1rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.top .brand b {
  font-weight: 900;
}
.top .brand .mark {
  width: 20px;
  height: 24px;
  vertical-align: -6px;
  margin-right: 0.4rem;
}
.brand svg.mark {
  filter: none !important;
  color: currentColor;
}
html[data-sup-mode="dark"] .top .brand .mark {
  filter: invert(1);
}
@media (prefers-color-scheme: dark) {
  html:not([data-sup-mode="light"]) .top .brand .mark {
    filter: invert(1);
  }
}
.top .brand .tail {
  font-weight: 400;
  color: var(--t3);
  font-size: 0.85rem;
  margin-left: 0.2rem;
}
.top .iconb,
.sgrid summary {
  color: var(--t2);
  border-radius: 8px;
}
.top .iconb:hover,
.sgrid summary:hover,
.sgrid[open] summary {
  background: var(--glass3);
  color: var(--text);
}
.top .pill.atype,
.top .pill.atype.hlink.sec,
header .pill.atype {
  font-family: var(--sans) !important;
  text-transform: capitalize !important;
  letter-spacing: 0 !important;
  font-size: 0.76rem !important;
  font-weight: 700;
  border: 0 !important;
  background: var(--glass3);
  color: var(--t2) !important;
  padding: 0.28rem 0.62rem !important;
  border-radius: 999px;
  margin: 0 0.4rem 0 0.2rem;
}
.avatar,
#acct,
.av {
  border-radius: 50%;
  box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.18);
}
#acct {
  background: linear-gradient(160deg, #2b90ff, #0a84ff);
  color: #fff;
}

/* apps switcher chip + grid popover as glass */
.sgrid .panel,
.umenu .menu,
.smenu .menu,
.sheet .box,
.composer {
  background: var(--sheet-bg) !important;
  -webkit-backdrop-filter: blur(30px) saturate(140%);
  backdrop-filter: blur(30px) saturate(140%);
  border: 0.5px solid var(--hair2) !important;
  box-shadow: var(--pop) !important;
  border-radius: 18px;
  color: var(--text) !important;
}
.sheet .box *,
.sheet .box .h1,
.sheet .box .subj,
.sheet .box label {
  color: var(--text);
}
.sheet .box .dim,
.sheet .box .small.dim,
.sheet .box .lead {
  color: var(--t3) !important;
}
.sheet {
  background: rgba(0, 0, 0, 0.32) !important;
  -webkit-backdrop-filter: blur(6px);
  backdrop-filter: blur(6px);
}
/* AI 'Ask sup' popup, Apple-style: segmented chips, clean output card */
.sheet .box .chips .chip {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  color: var(--text) !important;
  padding: 0.4rem 0.9rem !important;
  font-size: 0.9rem;
}
.sheet .box .chips .chip.on {
  background: var(--blue) !important;
  color: #fff !important;
}
.sheet .box .ai-out {
  background: var(--card-bg) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 1rem !important;
}
.sheet .box .btn {
  border-radius: 999px !important;
}

/* ── nav rail ──────────────────────────────────────────────────────────────────────────────────────────── */
#shell.on .nav,
.nav {
  background: transparent !important;
  border-right: 0 !important;
  padding: 0.5rem 0.5rem 0 !important;
}
.nav .body {
  padding: 0.15rem 0 0.5rem;
}
/* Apple-Mail dock rows: icon · label · right-aligned count, rounded selection pill */
.nav a,
.mnav a,
.mnav .mout {
  border-left: 0 !important;
  border-bottom: 0;
  border-radius: 8px;
  padding: 0.42rem 0.6rem;
  margin: 1px 0;
  color: var(--text);
  font-size: 0.92rem;
  font-weight: 500;
  line-height: 1.2;
}
.nav a > span:first-child,
.mnav a > span:first-child {
  display: flex;
  align-items: center;
  gap: 0.62rem;
  min-width: 0;
  flex: 1;
}
.nav a .ic,
.mnav a .ic {
  width: 17px !important;
  height: 17px !important;
  flex: none;
  color: var(--t3);
  stroke-width: 1.5;
  margin: 0 !important;
}
.nav a .cnt {
  color: var(--t3);
  font-size: 0.82rem;
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  font-family: var(--sans);
}
.nav a:hover,
.mnav a:hover,
.mnav .mout:hover {
  background: var(--glass2);
  color: var(--text);
}
.nav a.on,
.mnav a.on {
  background: rgba(0, 122, 255, 0.16) !important;
  color: var(--blue) !important;
  font-weight: 600;
  border-left: 0 !important;
}
.nav a.on .ic {
  color: var(--blue) !important;
}
.nav a.on .cnt {
  color: var(--blue) !important;
}
/* section headers — "Mailboxes", "Favorites"… quiet, small caps of the label, not uppercased tracking */
.nav .sect,
.mnav .sect,
.rail .sect,
.eyebrow {
  font-family: var(--sans);
  text-transform: none;
  letter-spacing: 0;
  font-size: 0.76rem;
  color: var(--t3);
  font-weight: 700;
  padding: 0.9rem 0.6rem 0.25rem;
  opacity: 0.9;
  background: none;
}
.nav .sect.withadd {
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.nav .sect.withadd .secadd {
  color: var(--t3);
}
/* Compose / New — gold, the way "Create New Chat" read on the old desktop */
.nav .cta,
.mnav .cta {
  background: var(--yellow-bg) !important;
  color: var(--blue) !important;
  border: 1px solid rgba(255, 203, 65, 0.28) !important;
  border-radius: 11px;
  font-weight: 700;
  justify-content: center;
  gap: 0.45rem;
  height: 2.5rem;
  box-shadow: none;
}
.nav .cta:hover,
.mnav .cta:hover {
  background: rgba(10, 132, 255, 0.2) !important;
}
.nav .cta .ic {
  color: var(--blue);
}
.rhead .me,
.sideme .me {
  padding: 0.3rem 0.5rem 0.9rem;
  border: 0;
}
.rhead .me b {
  font-weight: 700;
}
.rhead .me span {
  color: var(--t3);
}
.nav .invite,
.rail .invite,
.side .invite {
  border-top: 1px solid var(--hair);
  color: var(--t2);
  font-size: 0.88rem;
  padding: 0.9rem 0.75rem;
  margin: 0 0.3rem;
}
.nav .lock,
.nav .fine,
.rail .fine,
.pfoot {
  color: var(--t3);
}

/* ── ribbon / context bar ──────────────────────────────────────────────────────────────────────────────── */
.ribbon {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--hair) !important;
  color: var(--t2);
}
.pfoot {
  background: transparent !important;
  border-top: 1px solid var(--hair) !important;
}

/* ── list + conversation panes: transparent so the glass shows through ─────────────────────────────────── */
.list,
.conv {
  background: transparent !important;
} /* card treatment lives in the desktop block below */
.list .search {
  padding: 0.6rem 0.9rem;
  border-bottom: 1px solid var(--hair);
  background: transparent;
}
/* search: iOS Settings-style pill — tall, fully round, big magnifier, light-grey fill on the dark wallpaper (Shane's reference 2026-09-15) */
.list .search .in {
  background-color: var(--search-bg) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%237c8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: 1.05rem center !important;
  border: 0 !important;
  border-radius: 999px !important;
  height: 2.9rem;
  padding: 0 1.2rem 0 2.9rem !important;
  font-size: 1.06rem;
  color: var(--search-fg) !important;
  box-shadow: none !important;
  transition: box-shadow 0.15s;
}
.list .search .in::placeholder {
  color: var(--search-ph);
  opacity: 1;
}
.list .search .in:focus {
  background-color: var(--search-bg-f) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28) !important;
  outline: 0;
}
@media (max-width: 900px) {
  .list .search .in {
    height: 3.1rem;
    font-size: 1.1rem;
    background-position: 1.1rem center !important;
    padding-left: 3rem !important;
  }
}
/* the Newest / Unread / Sender sort reads like Apple's segmented control */
.list .search .sortopts,
.list .search .sort,
.list .search .sortsel {
  color: var(--t3);
  font-size: 0.82rem;
}
/* the ≡ ••• pill next to search, like Apple Mail's */
.list .lpill {
  background: var(--pill-bg);
  border: 0 !important;
  border-radius: 999px !important;
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.07);
  padding: 0.3rem 0.55rem;
  gap: 0.4rem;
  height: 2.6rem;
  box-sizing: border-box;
  align-items: center;
}
.list .lpb {
  color: #3a3d45;
  padding: 0.35rem 0.5rem;
  border-radius: 999px;
}
.list .lpb .ic {
  width: 19px;
  height: 19px;
  stroke-width: 1.9;
}
.list .lpb:hover {
  background: rgba(0, 0, 0, 0.06);
  color: #1c1c1e;
}
.list .lpb.on {
  color: var(--blue);
}
.list .lpb.on:hover {
  background: rgba(0, 122, 255, 0.1);
}
@media (max-width: 900px) {
  .list .lpill {
    display: inline-flex;
  }
}
.search .in,
.in,
input.in,
textarea.in,
select.in,
.cbar .in {
  background: var(--field) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 11px !important;
  color: var(--text);
  font-family: var(--sans);
}
.in:focus,
.search .in:focus,
textarea.in:focus,
.cbar .in:focus {
  outline: none !important;
  border-color: var(--blue) !important;
  box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28) !important;
}
.trow {
  padding: 0.7rem 1rem;
  border-bottom: 1px solid var(--hair);
  border-radius: 0;
  background: transparent;
}
.trow:hover {
  background: rgba(255, 255, 255, 0.05);
}
/* Apple selection: the whole row fills with the accent, text turns white, no Carbon left-accent bar */
.trow {
  border-radius: 10px;
}
.trow.on,
.trow.sel-on {
  background: var(--blue) !important;
  box-shadow: none !important;
  border-bottom-color: transparent !important;
  border-radius: 12px !important;
}
.list .trow {
  margin: 0 1.1rem !important;
  padding: 0.62rem 0.8rem !important;
  border-bottom: 0 !important;
  box-shadow: none !important;
  position: relative;
}
/* Apple-style separator: inset to the text column, not edge-to-edge; gone on hover, selection and the last row */
.list .trow::after {
  content: "";
  position: absolute;
  left: 3.6rem;
  right: 0;
  bottom: 0;
  height: 1px;
  background: var(--hair);
}
.list .trow.icloud::after {
  left: 4.4rem;
}
.list .trow:last-child::after,
.list .trow:hover::after,
.list .trow.on::after,
.list .trow.sel-on::after {
  opacity: 0;
}
.trow:hover:not(.on):not(.sel-on) {
  background: var(--menu-hover) !important;
  border-radius: 10px;
}
.trow.on,
.trow.on *,
.trow.sel-on,
.trow.sel-on * {
  color: #fff !important;
}
.trow.on .snippet,
.trow.on .meta,
.trow.on .when,
.trow.sel-on .snippet,
.trow.sel-on .meta,
.trow.sel-on .when,
.trow.on .subj b,
.trow.on .who {
  color: rgba(255, 255, 255, 0.82) !important;
}
.trow.on .who,
.trow.on .subj,
.trow.on b,
.trow.sel-on .who,
.trow.sel-on .subj,
.trow.sel-on b {
  color: #fff !important;
}
.trow.on .dot,
.trow.on .unreaddot,
.trow.sel-on .dot {
  background: #fff !important;
}
.trow.on .star .ic,
.trow.on svg,
.trow.sel-on .star .ic,
.trow.sel-on svg {
  color: #fff !important;
  stroke: #fff !important;
}
.trow .who,
.trow b {
  font-weight: 300;
  font-size: 0.95rem;
  color: var(--text);
}
.trow .subj {
  color: var(--text);
  font-weight: 400;
}
.trow.unread .who,
.trow.unread b,
.trow.unread .when,
.trow.unread .meta,
.trow.unread .time {
  font-weight: 700;
  color: var(--text);
}
.trow .snippet,
.trow .meta,
.trow .when {
  color: var(--t3);
  font-size: 0.84rem;
}
.trow.unread .who,
.trow.unread b {
  font-weight: 700;
}
.trow.unread .subj {
  font-weight: 500;
}
.trow.unread .who,
.trow.unread .subj,
.trow.unread .subj b,
.trow.unread b {
  color: var(--text) !important;
}
.trow .dot,
.trow .unreaddot {
  background: var(--blue);
}
.empty,
.list .empty,
.conv .empty {
  color: var(--t3);
  font-size: 0.95rem;
  font-style: italic;
}

/* ── conversation header ───────────────────────────────────────────────────────────────────────────────── */
.conv .head,
.conv .chead {
  background: rgba(255, 255, 255, 0.03) !important;
  border-bottom: 1px solid var(--hair) !important;
}
.conv .head .title,
.conv .chead .subj,
.conv .chead .title {
  font-weight: 700;
  letter-spacing: -0.01em;
}
.conv .head .acts .iconb:hover {
  background: var(--glass3);
}

/* ── mail cards ────────────────────────────────────────────────────────────────────────────────────────── */
.mcard,
.conv.mail .msg {
  background: rgba(255, 255, 255, 0.05) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 12px;
  box-shadow: none;
}
.conv.mail .msg.me {
  border-left: 3px solid var(--blue) !important;
}
.mcard .mhead .from b {
  font-weight: 700;
}
.mcard .body,
.msg .body {
  font-size: 0.96rem;
  line-height: 1.55;
}

/* ── chat: iMessage-style bubbles on a subtly dotted glass ─────────────────────────────────────────────── */
.msgs.chatbg {
  background: transparent !important;
  background-image: radial-gradient(rgba(255, 255, 255, 0.04) 1px, transparent 1px) !important;
  background-size: 22px 22px !important;
}
.bub {
  background: var(--glass3);
  color: var(--text);
  border: 0;
  border-radius: 16px;
  padding: 0.42rem 0.7rem 0.36rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.25);
}
.bub.me {
  background: linear-gradient(160deg, #2b90ff, #0a84ff) !important;
  color: #fff;
  box-shadow: 0 1px 3px rgba(0, 90, 200, 0.4);
}
.bub .bfrom {
  color: var(--purple);
  font-weight: 700;
}
.bub .bmeta,
.bub .t,
.bub .time {
  color: inherit;
  opacity: 0.6;
}
.bub .att a {
  background: rgba(0, 0, 0, 0.25);
  border-color: rgba(255, 255, 255, 0.18);
  color: inherit;
}

/* ── chat compose bar: the "Ask Anything" pill + round blue send ───────────────────────────────────────── */
.cbar {
  background: rgba(255, 255, 255, 0.04) !important;
  border-top: 1px solid var(--hair) !important;
  padding: 0.55rem 0.8rem;
  gap: 0.5rem;
}
.cbar .in {
  border-radius: 22px !important;
  padding: 0.55rem 1rem !important;
}
.cbar .send {
  background: linear-gradient(160deg, #2b90ff, #0a84ff) !important;
  border-radius: 50%;
  width: 44px;
  height: 44px;
  min-height: 44px;
  box-shadow: 0 2px 12px rgba(0, 122, 255, 0.5);
}
.cbar .send:hover {
  background: var(--blue-h) !important;
}

/* ── compose sheet (mail) ──────────────────────────────────────────────────────────────────────────────── */
/* iCloud-style compose: a clean card, hairline fields, circular icon buttons, a rounded blue send */
.composer {
  border-radius: 16px !important;
  overflow: hidden;
}
.composer .chead {
  background: var(--top-bg) !important;
  color: var(--text) !important;
  border-bottom: 1px solid var(--hair) !important;
  border-radius: 16px 16px 0 0;
  padding: 0.7rem 0.9rem !important;
  -webkit-backdrop-filter: blur(20px);
  backdrop-filter: blur(20px);
}
.composer .chead > span:first-child {
  font-weight: 700;
  font-size: 0.95rem;
  color: var(--text);
}
.composer .chead .iconb {
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1.1rem;
  line-height: 1;
  color: var(--blue);
  background: var(--glass2);
}
.composer .chead .iconb:hover {
  background: var(--glass3);
}
.composer .chead #c-close {
  color: var(--blue);
}
.composer .cbody {
  padding: 0.2rem 1rem !important;
}
.composer .crow {
  border-bottom: 1px solid var(--hair) !important;
  padding: 0.6rem 0.1rem !important;
  gap: 0.5rem;
}
.composer .crow label {
  color: var(--t3) !important;
  font-weight: 400;
  min-width: auto;
}
.composer .cin {
  background: transparent !important;
  border: 0 !important;
  font-size: 0.98rem;
  color: var(--text);
}
.composer .ctext,
#draft {
  background: transparent !important;
  color: var(--text);
  font-size: 0.98rem;
  line-height: 1.5;
}
.composer .cfoot {
  border-top: 1px solid var(--hair) !important;
  padding: 0.7rem 1rem !important;
}
.composer .cfoot #c-send {
  border-radius: 999px !important;
  padding: 0.5rem 1.3rem;
  font-weight: 700;
}
.composer .cfoot .iconb {
  border-radius: 50%;
  color: var(--blue);
}

/* ── buttons ───────────────────────────────────────────────────────────────────────────────────────────── */
.btn:not(.sec):not(.ghost):not(.danger):not(.sm) {
  background: var(--blue);
  color: #fff;
  border-radius: 11px;
  font-weight: 700;
  box-shadow: none;
  border: 0;
}
.btn:not(.sec):not(.ghost):not(.danger):not(.sm):hover {
  background: var(--blue-h);
}
.btn.sec {
  background: var(--glass3);
  color: var(--text);
  border: 1px solid var(--hair2);
}
.btn.sec:hover {
  background: rgba(255, 255, 255, 0.16);
}
.fab {
  background: var(--blue) !important;
  box-shadow: 0 6px 20px rgba(0, 122, 255, 0.5);
}

/* ── SuperID sign-in surface: header/footer clear, the card as a glass panel on the wallpaper ──────────── */
.idtop {
  background: transparent !important;
  border-bottom: 0 !important;
  backdrop-filter: blur(6px);
}
.idtop .brand {
  color: #fff;
}
.idtop .brand i {
  color: var(--blue);
}
.idtop .lnk {
  color: var(--t2);
}
.idfoot {
  background: transparent !important;
  border-top: 1px solid var(--hair) !important;
  color: var(--t3);
}
.authwrap.on,
.auth {
  background: transparent !important;
}
.auth #authcard,
.authwrap #authcard {
  max-width: 420px;
}
.auth .eyebrow,
#authcard .eyebrow {
  font-family: var(--sans) !important;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  font-size: 0.68rem;
  color: var(--t3);
  font-weight: 700;
}
.auth h1,
#authcard h1 {
  font-weight: 800;
  letter-spacing: -0.02em;
  font-size: 1.6rem;
}
/* ── sign-in card floats on the wallpaper like the old magic-link window ───────────────────────────────── */
body:has(#authwrap.on) #authcard,
.auth #authcard,
#authcard {
  background: var(--sheet-bg) !important;
  color: var(--text) !important;
  backdrop-filter: blur(30px) saturate(150%);
  -webkit-backdrop-filter: blur(30px) saturate(150%);
  border: 0.5px solid var(--hair2) !important;
  border-radius: 16px;
  box-shadow: var(--win-shadow) !important;
}

/* ── scrollbars: scroll, but no visible bar ────────────────────────────────────────────────────────────── */
.list,
.conv,
.msgs,
.nav,
.msgs.chatbg,
.conv.person,
.conv.master {
  scrollbar-width: none;
  -ms-overflow-style: none;
}
.list::-webkit-scrollbar,
.conv::-webkit-scrollbar,
.msgs::-webkit-scrollbar,
.nav::-webkit-scrollbar,
.msgs.chatbg::-webkit-scrollbar,
.conv *::-webkit-scrollbar,
.list *::-webkit-scrollbar {
  width: 0 !important;
  height: 0 !important;
  display: none;
}

@media (prefers-reduced-motion: reduce) {
  * {
    transition: none !important;
    animation: none !important;
  }
}

/* text selection — Apple accent, not the default */
::selection {
  background: rgba(0, 122, 255, 0.32);
}
::-moz-selection {
  background: rgba(0, 122, 255, 0.32);
}

/* no selection checkboxes — Apple selects rows by clicking, not a checkbox column */
.trow .sel,
.list .search .selall,
.selbar .selall,
.list.selecting .sel {
  display: none !important;
}
.trow {
  padding-left: 1.1rem !important;
}
/* ── cinematic motion — one orchestrated spring per action, gone before you notice ─────────────────────── */
@media (prefers-reduced-motion: no-preference) {
  /* opening a thread: a soft cross-fade + rise */
  #shell.conv-open .conv {
    animation: convIn 0.38s cubic-bezier(0.22, 0.9, 0.24, 1);
  }
  @keyframes convIn {
    from {
      opacity: 0;
      transform: translateY(8px) scale(0.994);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  .mcard,
  .conv.mail .msg {
    animation: cardIn 0.42s cubic-bezier(0.22, 0.9, 0.24, 1) both;
  }
  @keyframes cardIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* list rows stagger in when a mailbox opens (only then — never on live updates) */
  .list.wave .trow {
    animation: rowIn 0.5s cubic-bezier(0.22, 0.9, 0.24, 1) both;
    animation-delay: calc(var(--i, 0) * 32ms);
  }
  @keyframes rowIn {
    from {
      opacity: 0;
      transform: translateY(9px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* chat bubbles pop in */
  .bub {
    animation: bubIn 0.3s cubic-bezier(0.2, 0.9, 0.2, 1.05) both;
  }
  @keyframes bubIn {
    from {
      opacity: 0;
      transform: translateY(7px) scale(0.96);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  /* press springs — the tactile Apple micro-response */
  .btn,
  .nav a,
  .mnav a,
  .trow,
  .avatar,
  .iconb,
  .sopt {
    transition:
      transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1),
      background 0.16s ease,
      color 0.16s ease,
      box-shadow 0.16s ease;
  }
  .btn:active,
  .nav a:active,
  .mnav a:active,
  .iconb:active,
  .sopt:active {
    transform: scale(0.965);
  }
  .trow:active {
    transform: scale(0.995);
  }
  .fab:active {
    transform: scale(0.92);
  }
  /* compose / sheets rise with a spring */
  .composer.on,
  .sheet.on .box {
    animation: sheetIn 0.4s cubic-bezier(0.2, 0.9, 0.2, 1.02) both;
  }
  @keyframes sheetIn {
    from {
      opacity: 0;
      transform: translateY(18px) scale(0.985);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}

/* ── Apple-style menus & dropdowns ─────────────────────────────────────────────────────────────────────── */
/* vibrancy panels */
.umenu,
.popmenu,
.sgrid .panel,
.smenu .menu,
.sideme .menu,
.sgrid #sgridpanel,
.sgrid [class*="grid"] {
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(32px) saturate(1.8);
  backdrop-filter: blur(32px) saturate(1.8);
  border: 0.5px solid rgba(255, 255, 255, 0.14) !important;
  border-radius: 14px !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(0, 0, 0, 0.4) !important;
  padding: 6px !important;
  overflow: hidden;
}
/* rounded item highlights, inset from the panel edge */
.umenu .menu > a,
.umenu .menu > button,
.popmenu button,
.popmenu .pmrow,
.smenu .menu > a,
.smenu .menu > button,
.sideme .menu > a,
.sideme .menu > button,
.umenu .accts a,
.smenu .accts a,
.sideme .accts a {
  border-radius: 8px !important;
  margin: 1px 0 !important;
  padding: 0.5rem 0.68rem !important;
  transition:
    background 0.12s ease,
    color 0.12s ease;
}
.umenu .menu > a:hover,
.umenu .menu > button:hover,
.popmenu button:hover,
.popmenu .pmrow:hover,
.smenu .menu > a:hover,
.smenu .menu > button:hover,
.sideme .menu > a:hover,
.sideme .menu > button:hover,
.umenu .accts a:hover,
.smenu .accts a:hover,
.sideme .accts a:hover {
  background: var(--menu-hover) !important;
  color: var(--text) !important;
}
.umenu .menu > a,
.umenu .menu > button,
.popmenu button,
.popmenu .pmrow,
.smenu .menu > a,
.smenu .menu > button,
.sideme .menu > a,
.sideme .menu > button {
  color: var(--text) !important;
}
.umenu .accts a.cur,
.smenu .accts a.cur {
  background: var(--menu-hover) !important;
}
/* soften the internal dividers to hairlines */
.umenu .who,
.umenu .accts,
.smenu .menu .who,
.sideme .accts,
.popmenu .pmhead {
  border-color: var(--hair) !important;
}
.umenu .accts,
.sideme .accts {
  margin: 0 0 4px !important;
  padding-bottom: 4px !important;
}
.umenu .who,
.smenu .menu .who {
  margin: 0 0 4px !important;
}
.popmenu .pmhead {
  padding: 0.55rem 0.68rem 0.5rem !important;
}
/* danger item stays red on hover */
.umenu .menu > button#um-outall:hover,
.umenu .menu > button[id*="out"]:hover {
  background: rgba(255, 95, 88, 0.16) !important;
  color: #ff8a84 !important;
}
/* spring-in, anchored near the trigger */
@media (prefers-reduced-motion: no-preference) {
  .umenu.open {
    animation: menuPop 0.22s cubic-bezier(0.2, 0.9, 0.2, 1.04) both;
    transform-origin: top right;
  }
  .popmenu {
    animation: menuPop 0.2s cubic-bezier(0.2, 0.9, 0.2, 1.04) both;
    transform-origin: top center;
  }
  .sgrid[open] .panel,
  .sideme.open .menu,
  .smenu.open .menu {
    animation: menuPop 0.2s cubic-bezier(0.2, 0.9, 0.2, 1.04) both;
    transform-origin: top left;
  }
  @keyframes menuPop {
    from {
      opacity: 0;
      transform: scale(0.94) translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
}
/* native <select> → Apple pill with a chevron */
select.in,
select.in.sm,
.acts select,
.crow select {
  appearance: none;
  -webkit-appearance: none;
  -moz-appearance: none;
  background-color: rgba(255, 255, 255, 0.08) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12' fill='none' stroke='%238b90a0' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 4.75 6 7.75 9 4.75'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 0.62rem center !important;
  padding-right: 1.75rem !important;
  border: 0.5px solid var(--hair) !important;
  border-radius: 9px !important;
  color: var(--text) !important;
}
select.in:hover,
.acts select:hover {
  background-color: rgba(255, 255, 255, 0.13) !important;
}

/* ── kill the load flash: an empty sign-in card must not render as a glass box ─────────────────────────── */
#authwrap.on #authcard:empty,
#authwrap #authcard:empty {
  display: none !important;
}

/* ── mobile: readable surfaces over the wallpaper, iOS-clean ───────────────────────────────────────────── */
@media (max-width: 900px) {
  /* collapse the empty breadcrumb/announce rows so no bright wallpaper band shows under the header */
  #shell.on {
    grid-template-rows: auto 0 auto minmax(0, 1fr) !important;
  }
  /* the thread action bar scrolls instead of overflowing off-screen */
  .conv .head,
  .conv .chead {
    flex-wrap: nowrap;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .conv .head::-webkit-scrollbar,
  .conv .chead::-webkit-scrollbar {
    display: none;
  }
  .conv .head .acts,
  .chead .acts {
    flex: 0 0 auto;
  }
  /* the app fills the screen; the content sits on a legible dark panel, wallpaper glows softly behind */
  .top {
    background: var(--top-bg-m) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.5);
    backdrop-filter: blur(22px) saturate(1.5);
    border-bottom: 1px solid var(--hair) !important;
    height: auto;
    min-height: 52px;
    padding-top: calc(env(safe-area-inset-top) + 6px);
    padding-bottom: 6px;
  }
  .list,
  .conv {
    background: var(--pane-bg-m) !important;
    border: 0 !important;
    border-radius: 0 !important;
    margin: 0 !important;
    box-shadow: none !important;
  }
  .ribbon {
    display: none !important;
  }
  .list .search {
    padding: 0.7rem 1rem;
  }
  .list .search .in {
    height: 2.4rem;
  }
  .trow {
    padding: 0.85rem 1rem !important;
  }
  /* the slide-in nav drawer as an iOS sheet */
  .nav.open {
    background: rgba(18, 22, 32, 0.96) !important;
    -webkit-backdrop-filter: blur(26px) saturate(1.5);
    backdrop-filter: blur(26px) saturate(1.5);
    border-right: 1px solid var(--hair) !important;
    padding-top: calc(env(safe-area-inset-top) + 8px) !important;
    width: 82vw !important;
    max-width: 320px;
  }
  /* the reading pane + composer clear the notch and home bar */
  .conv .head,
  .conv .chead {
    padding-top: calc(env(safe-area-inset-top) + 8px) !important;
  }
  .fab {
    bottom: calc(env(safe-area-inset-bottom) + 16px) !important;
  }
  .cbar {
    padding-bottom: calc(env(safe-area-inset-bottom) + 0.55rem) !important;
  }
  /* the account menu + grid as bottom-safe full-width-ish sheets */
  .umenu {
    left: auto !important;
    right: 8px !important;
    width: min(320px, calc(100vw - 16px)) !important;
    top: calc(env(safe-area-inset-top) + 54px) !important;
  }
}

/* ── Three modes: Color (default, above), Light (white), Dark (black) ──────────────────────────────────── */
html[data-sup-mode="light"] {
  color-scheme: light;
  --bg: #f2f2f7;
  --layer: #ffffff;
  --layer2: #f2f2f7;
  --layer3: #e5e5ea;
  --field: #ffffff;
  --border: rgba(0, 0, 0, 0.14);
  --bsub: rgba(0, 0, 0, 0.08);
  --bstrong: rgba(0, 0, 0, 0.28);
  --text: #1d1d1f;
  --t2: #55555a;
  --t3: #8a8a8f;
  --tinv: #ffffff;
  --yellow: #a86a00;
  --link: #0066cc;
  --glass2: rgba(0, 0, 0, 0.045);
  --glass3: rgba(0, 0, 0, 0.07);
  --hair: rgba(0, 0, 0, 0.1);
  --hair2: rgba(0, 0, 0, 0.13);
  --win-bg: rgba(255, 255, 255, 0.34);
  --win-border: rgba(255, 255, 255, 0.55);
  --win-blur: 34px; /* frosted glass: the wallpaper shows through (Shane 2026-09-15, "on the light view") */
  --rail-bg: #ffffff;
  --pane-bg: rgba(
    255,
    255,
    255,
    0.82
  ); /* side panel fully opaque (Shane); panes = same opacity as the header bar (Shane); the frame around them is the glass */
  --top-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86), rgba(255, 255, 255, 0.66));
  --field-bg: rgba(0, 0, 0, 0.05);
  --search-bg: rgba(118, 118, 128, 0.12);
  --search-bg-f: rgba(118, 118, 128, 0.18);
  --search-fg: #1c1c1e;
  --search-ph: #8a8a8e;
  --pill-bg: #fff;
  --chip-bg: rgba(118, 118, 128, 0.12);
  --chip-bg-h: rgba(118, 118, 128, 0.18);
  --chip-fg: #3a3d45;
  --chip-on-bg: #2c2c2e;
  --chip-on-fg: #fff;
  --cat-primary: #4a8fe7;
  --cat-transactions: #5b9d66;
  --cat-updates: #7a6db5;
  --cat-promotions: #c5507e;
  --note-base: #fff;
  --act-bg: rgba(118, 118, 128, 0.12);
  --act-bg-h: rgba(118, 118, 128, 0.2);
  --act-fg: #3a3d45;
  --card-bg: #ffffff;
  --card-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
  --sheet-bg: #ffffff;
  --group-bg: #f2f2f7;
  --menu-bg: rgba(255, 255, 255, 0.86);
  --menu-solid: #ffffff;
  --menu-hover: rgba(0, 0, 0, 0.06);
  --pane-bg-m: rgba(255, 255, 255, 0.94);
  --top-bg-m: rgba(248, 248, 250, 0.9);
  --win-shadow: 0 30px 80px rgba(0, 0, 0, 0.18), 0 8px 24px rgba(0, 0, 0, 0.1), 0 0 0 0.5px rgba(0, 0, 0, 0.08);
  --pop: 0 18px 50px rgba(0, 0, 0, 0.2), 0 0 0 0.5px rgba(0, 0, 0, 0.1);
  --wall-display: none;
}
html[data-sup-mode="light"] body {
  background: #f2f2f7 !important;
}
html[data-sup-mode="light"] #shell.on::before,
html[data-sup-mode="light"] .nav,
html[data-sup-mode="light"] .list,
html[data-sup-mode="light"] .conv {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06) !important;
}
html[data-sup-mode="light"] #shell.on::before {
  background: linear-gradient(90deg, transparent, rgba(255, 255, 255, 0.9), transparent) !important;
}
html[data-sup-mode="light"] #shell.on .list,
html[data-sup-mode="light"] #shell.on .conv {
  background: var(--pane-bg) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
html[data-sup-mode="light"] #shell.on .nav,
html[data-sup-mode="light"] .nav {
  background: var(--rail-bg) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  border: 0.5px solid var(--hair) !important;
  border-radius: 14px !important;
} /* in light the rail is a panel like the header, not bare glass */

html[data-sup-mode="dark"] {
  color-scheme: dark;
  --bg: #000000;
  --layer: #1c1c1e;
  --layer2: #2c2c2e;
  --layer3: #3a3a3c;
  --field: #1c1c1e;
  --border: rgba(255, 255, 255, 0.14);
  --bsub: rgba(255, 255, 255, 0.08);
  --bstrong: rgba(255, 255, 255, 0.3);
  --text: #ffffff;
  --t2: #98989f;
  --t3: #68686e;
  --tinv: #000000;
  --glass2: rgba(255, 255, 255, 0.05);
  --glass3: rgba(255, 255, 255, 0.09);
  --hair: rgba(255, 255, 255, 0.1);
  --hair2: rgba(255, 255, 255, 0.16);
  --win-bg: rgba(20, 20, 22, 0.72);
  --win-border: rgba(255, 255, 255, 0.1);
  --win-blur: 20px;
  --rail-bg: rgba(10, 10, 12, 0.55);
  --pane-bg: rgba(8, 8, 10, 0.55);
  --top-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.06), rgba(255, 255, 255, 0.02));
  --field-bg: rgba(255, 255, 255, 0.06);
  --search-bg: rgba(228, 231, 237, 0.94);
  --search-bg-f: #eef0f4;
  --search-fg: #1c1c1e;
  --search-ph: #7c8290;
  --pill-bg: rgba(255, 255, 255, 0.96);
  --chip-bg: rgba(255, 255, 255, 0.1);
  --chip-bg-h: rgba(255, 255, 255, 0.16);
  --chip-fg: #e6e8ee;
  --chip-on-bg: #e6e8ee;
  --chip-on-fg: #1c1c1e;
  --cat-primary: #3f8be0;
  --cat-transactions: #4f9a5e;
  --cat-updates: #7367b8;
  --cat-promotions: #c6497b;
  --note-base: rgba(255, 255, 255, 0.08);
  --act-bg: rgba(255, 255, 255, 0.12);
  --act-bg-h: rgba(255, 255, 255, 0.2);
  --act-fg: #e6e8ee;
  --card-bg: rgba(255, 255, 255, 0.05);
  --card-shadow: none;
  --sheet-bg: #1c1c1e;
  --group-bg: rgba(255, 255, 255, 0.07);
  --menu-bg: rgba(28, 28, 30, 0.92);
  --menu-solid: #1c1c1e;
  --menu-hover: rgba(255, 255, 255, 0.1);
  --pane-bg-m: #0a0a0b;
  --top-bg-m: rgba(12, 12, 14, 0.9);
  --wall-display: none;
}
html[data-sup-mode="dark"] body {
  background: #000 !important;
}

/* ── the Light / Color / Dark segmented control in the account menu ────────────────────────────────────── */
.modeseg {
  display: flex;
  gap: 2px;
  margin: 6px 5px 4px;
  padding: 3px;
  border-radius: 10px;
  background: var(--glass2);
  border: 0.5px solid var(--hair);
}
.modeseg button {
  flex: 1;
  border: 0;
  background: none;
  color: var(--t2);
  font: 600 0.8rem/1 var(--sans);
  padding: 0.42rem 0.3rem;
  border-radius: 8px;
  cursor: pointer;
  transition:
    background 0.14s ease,
    color 0.14s ease;
}
.modeseg button:hover {
  color: var(--text);
}
.modeseg button.on {
  background: var(--menu-bg);
  color: var(--text);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}
html[data-sup-mode="light"] .modeseg button.on {
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}

/* ── mobile: the Mailboxes screen (Apple Mail entry point) ─────────────────────────────────────────────── */
@media (max-width: 900px) {
  #shell.mbx .nav {
    display: flex !important;
    position: static !important;
    transform: none !important;
    inset: auto !important;
    width: 100% !important;
    height: auto !important;
    grid-column: 1 !important;
    grid-row: 4 !important;
    z-index: 1 !important;
    background: var(--pane-bg-m) !important;
    border-right: 0 !important;
    padding-top: 0.4rem !important;
  }
  #shell.mbx .list,
  #shell.mbx .conv,
  #shell.mbx .ribbon {
    display: none !important;
  }
  #shell.mbx .top .iconb {
    display: none !important;
  } /* mailboxes is the root — no back button */
  #shell.mbx ~ .fab {
    display: none !important;
  } /* compose lives in the rail here */
  /* a large "Mailboxes" title above the dock */
  #shell.mbx .nav .body::before {
    content: "Mailboxes";
    display: block;
    font: 800 1.7rem/1.1 var(--sans);
    letter-spacing: -0.02em;
    color: var(--text);
    padding: 0.2rem 0.7rem 0.6rem;
  }
}

/* ── dropdown placement: anchor the account menu under the avatar INSIDE the floating window ───────────── */
@media (min-width: 901px) {
  .umenu {
    right: calc(max(0px, (100vw - 1320px)/2) + 16px) !important;
    top: calc(var(--h) + 14px) !important;
    left: auto !important;
    min-width: 264px;
    transform-origin: top right;
  }
}

/* ── mobile Mailboxes: Apple grouped inset cards with chevrons ─────────────────────────────────────────── */
@media (max-width: 900px) {
  #shell.mbx .nav .body {
    padding: 0 14px 0.6rem !important;
  }
  #shell.mbx .nav .body a {
    background: var(--layer) !important;
    margin: 0 !important;
    padding: 0.85rem 0.9rem !important;
    border-radius: 0 !important;
    position: relative;
    color: var(--text) !important;
    font-size: 1rem !important;
  }
  #shell.mbx .nav .body .sect {
    padding: 1rem 0.3rem 0.4rem !important;
    background: none !important;
  }
  #shell.mbx .nav .body .sect + a {
    border-radius: 13px 13px 0 0 !important;
  }
  #shell.mbx .nav .body a:has(+ .sect),
  #shell.mbx .nav .body a:last-child {
    border-radius: 0 0 13px 13px !important;
  }
  #shell.mbx .nav .body a:only-of-type {
    border-radius: 13px !important;
  }
  /* inset hairline separator between rows in a group (starts past the icon) */
  #shell.mbx .nav .body a + a::before {
    content: "";
    position: absolute;
    left: 3rem;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--hair);
  }
  /* the disclosure chevron on the right */
  #shell.mbx .nav .body a::after {
    content: "";
    flex: none;
    width: 8px;
    height: 13px;
    margin-left: 0.55rem;
    opacity: 0.45;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='13' viewBox='0 0 8 13' fill='none' stroke='%238a90a0' stroke-width='1.7' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M1.5 1.5 6.5 6.5 1.5 11.5'/%3E%3C/svg%3E")
      center/contain no-repeat;
  }
  #shell.mbx .nav .body a .ic {
    width: 22px !important;
    height: 22px !important;
  }
  #shell.mbx .nav .body a.on {
    background: var(--layer) !important;
    color: var(--text) !important;
  }
  #shell.mbx .nav .body a.on .ic {
    color: var(--blue) !important;
  }
  #shell.mbx .nav .body a .cnt {
    color: var(--t3) !important;
    font-size: 0.95rem !important;
  }
  /* the folders "empty" text sits outside a card */
  #shell.mbx .nav .body a[href*="/f/"] {
  }

  /* ── iOS message rows: inset separators, roomier ───────────────────────────────────────────────────── */
  .list:not(.selecting) .trow {
    border-bottom: 0 !important;
    position: relative;
    padding: 0.9rem 1rem !important;
  }
  .list:not(.selecting) .trow + .trow::before {
    content: "";
    position: absolute;
    left: 1rem;
    right: 0;
    top: 0;
    height: 1px;
    background: var(--hair);
  }
}

/* ── iCloud-style global top bar: the header spans the whole page; the container drops its own title bar ── */
@media (min-width: 901px) {
  .top {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    width: auto !important;
    height: var(--h);
    z-index: 300;
    border-radius: 0 !important;
    border-bottom: 1px solid var(--hair) !important;
    padding-left: 26px !important;
    padding-right: 22px !important;
    background: var(--top-bg) !important;
    -webkit-backdrop-filter: blur(22px) saturate(1.6);
    backdrop-filter: blur(22px) saturate(1.6);
  }
  .top::before {
    display: none !important;
  } /* no window traffic lights on a web top bar */
  /* the container now sits below the bar with no header row of its own */
  #msgdock.on {
    bottom: max(16px, env(safe-area-inset-bottom)) !important;
  }
  #shell.on {
    margin: calc(var(--h) + 16px) auto 16px !important;
    height: calc(100dvh - var(--h) - 32px) !important;
    grid-template-rows: 0 auto auto minmax(0, 1fr) !important;
  }
  #shell.on::before {
    display: none !important;
  } /* drop the lit rim; this reads as a web panel now */
  /* the account menu + grid hang from the avatar at the page's top-right */
  .umenu {
    right: 20px !important;
    top: calc(var(--h) + 8px) !important;
    left: auto !important;
  }
  .sgrid .panel {
    right: 0;
  }
}

/* ── master console joins the Aurora layout: on the wallpaper, in a glass card, below the top bar ──────── */
@media (min-width: 901px) {
  #shell.on.master {
    grid-template-columns: minmax(0, 1fr) !important;
    margin: calc(var(--h) + 16px) auto 16px !important;
    height: calc(100dvh - var(--h) - 32px) !important;
    max-width: 1340px;
    background: transparent !important;
  }
  #shell.on.master .conv,
  #shell.on.master .conv.master {
    grid-column: 1 !important;
    margin: 0 !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    overflow: auto;
  }
  #shell.on.master .pfoot {
    display: none !important;
  }
  .conv.master .mwrap {
    background: var(--pane-bg);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
    border: 0.5px solid var(--hair);
    border-radius: 16px;
    box-shadow: var(--win-shadow);
    overflow: hidden;
    min-height: calc(100dvh - var(--h) - 32px);
    column-gap: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
  }
  .conv.master .mnav {
    background: var(--rail-bg) !important;
    border-right: 1px solid var(--hair) !important;
    padding: 1.2rem 1rem !important;
    min-height: 0 !important;
  }
  .conv.master .main {
    padding: 1.6rem 1.9rem 2.4rem !important;
    max-width: 920px;
  }
  .conv.master .mnav a,
  .conv.master .mnav .mout {
    border-radius: 8px;
    border-left: 0 !important;
    margin: 1px 0;
    padding: 0.5rem 0.7rem !important;
  }
  .conv.master .mnav a.on {
    background: var(--glass3) !important;
    color: #fff !important;
    border-left: 0 !important;
  }
  .conv.master .grid.stats {
    background: var(--hair) !important;
  }
  .conv.master .grid.stats > * {
    background: var(--glass2) !important;
  }
}

/* ── iCloud Mail inbox: 3-line rows with a sender avatar, unread dot, and a right-side flag ────────────── */
.list .listhead {
  padding: 1rem 1.1rem 0.5rem;
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
}
.list .listhead .lh-t {
  min-width: 0;
}
.list .listhead .lpill {
  margin-left: 0;
  flex: none;
}
/* category chips, Apple Mail style: equal-width pills, the chosen one in its category colour; a tinted note explains the category (dismissible) */
.list .catbar {
  display: flex;
  gap: 0.55rem;
  padding: 0.35rem 1.1rem 0.75rem;
  overflow-x: auto;
  scrollbar-width: none;
}
.list .catbar::-webkit-scrollbar {
  display: none;
}
.list .catbar .chip {
  flex: 1 1 0;
  min-width: max-content;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 2.5rem;
  padding: 0 1.1rem;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--chip-fg);
  font: inherit;
  font-size: 1rem;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  transition:
    background 0.15s,
    color 0.15s;
}
.list .catbar .chip .ic {
  width: 18px;
  height: 18px;
}
.list .catbar .chip:hover {
  background: var(--chip-bg);
}
.list .catbar .chip.on {
  color: #fff;
  font-weight: 600;
}
.list .catbar .chip .cn {
  font-weight: 600;
  font-size: 0.72rem;
  background: var(--chip-bg);
  color: inherit;
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
.list .catbar .chip.on.c-primary {
  background: var(--cat-primary);
}
.list .catbar .chip.on.c-transactions {
  background: var(--cat-transactions);
}
.list .catbar .chip.on.c-updates {
  background: var(--cat-updates);
}
.list .catbar .chip.on.c-promotions {
  background: var(--cat-promotions);
}
.list .catbar .chip.on.c-all {
  background: var(--chip-on-bg);
  color: var(--chip-on-fg);
}
.list .catnote {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 1rem;
  margin: 0 1.1rem 0.8rem;
  padding: 0.9rem 1.1rem;
  border-radius: 14px;
  background: var(--chip-bg);
  color: var(--chip-fg);
}
.list .catnote b {
  display: block;
  font-size: 1.05rem;
  margin-bottom: 0.15rem;
}
.list .catnote span {
  font-size: 0.92rem;
  opacity: 0.9;
}
.list .catnote .iconb {
  color: inherit;
}
.list .catnote.c-primary {
  background: color-mix(in srgb, var(--cat-primary) 15%, var(--note-base));
  color: color-mix(in srgb, var(--cat-primary) 70%, var(--text));
}
.list .catnote.c-transactions {
  background: color-mix(in srgb, var(--cat-transactions) 16%, var(--note-base));
  color: color-mix(in srgb, var(--cat-transactions) 70%, var(--text));
}
.list .catnote.c-updates {
  background: color-mix(in srgb, var(--cat-updates) 16%, var(--note-base));
  color: color-mix(in srgb, var(--cat-updates) 70%, var(--text));
}
.list .catnote.c-promotions {
  background: color-mix(in srgb, var(--cat-promotions) 16%, var(--note-base));
  color: color-mix(in srgb, var(--cat-promotions) 70%, var(--text));
}
@media (max-width: 900px) {
  .list .listhead {
    padding: 0.9rem 1rem 0.4rem;
  }
  .list .catbar {
    padding: 0.3rem 1rem 0.6rem;
  }
}
.list .listhead h2 {
  margin: 0;
  font-size: 1.7rem;
  font-weight: 800;
  letter-spacing: -0.02em;
  color: var(--text);
  line-height: 1.1;
}
.list .listhead .lh-sub {
  font-size: 0.85rem;
  color: var(--t3);
}
.trow.icloud {
  display: grid !important;
  grid-template-columns: auto minmax(0, 1fr) auto !important;
  align-items: start !important;
  gap: 0 0.7rem !important;
  width: 100% !important;
  box-sizing: border-box !important;
  height: 92px !important;
  padding: 0.8rem 1rem !important;
  border-bottom: 0 !important;
  position: relative;
  overflow: hidden;
  contain: layout paint;
}
.trow.icloud .sel {
  display: none !important;
}
.trow.icloud .av {
  width: 38px;
  height: 38px;
  min-width: 38px;
  margin-top: 0.12rem;
  border-radius: 50%;
  font-size: 0.86rem;
  font-weight: 600;
}
.trow.icloud .rt {
  min-width: 0 !important;
  width: auto !important;
  display: block !important;
}
.trow.icloud .who {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  font-weight: 300;
  font-size: 1.02rem;
  color: var(--text) !important;
  line-height: 1.35;
  letter-spacing: -0.01em;
}
.trow.icloud .who .person {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}
.trow.icloud .who .when {
  margin-left: auto;
  flex: none;
  font-weight: 400;
  font-size: 0.82rem;
  color: var(--t3) !important;
}
.trow.icloud.unread .who .when {
  font-weight: 700 !important;
  color: var(--text) !important;
}
.trow.icloud .subj {
  display: block;
  font-weight: 400;
  font-size: 0.94rem;
  color: var(--text) !important;
  margin-top: 0.12rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.trow.icloud .snippet {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  color: var(--t3) !important;
  font-size: 0.9rem;
  line-height: 1.4;
  margin-top: 0.15rem;
}
.trow.icloud.unread .who {
  font-weight: 700;
}
.trow.icloud.unread .subj {
  font-weight: 500;
}
/* unread dot in a gutter to the LEFT of the avatar (Shane) */
.trow.icloud {
  position: relative;
  padding-left: 1.7rem !important;
  padding-top: 0.7rem !important;
  padding-bottom: 0.7rem !important;
}
.trow.icloud .who::before,
.trow.unread .who::before {
  display: none !important;
}
.trow.icloud.unread::before {
  content: "";
  position: absolute;
  left: 0.5rem;
  top: 1.55rem;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--blue);
}
.trow.icloud.on.unread::before,
.trow.icloud.sel-on.unread::before {
  background: #fff;
}
.trow.icloud .star {
  align-self: center;
  color: var(--t3);
  background: none !important;
  border: 0 !important;
  padding: 0.2rem;
  opacity: 0;
  cursor: pointer;
  transition: opacity 0.12s ease;
}
.trow.icloud:hover .star,
.trow.icloud .star.on {
  opacity: 1;
}
.trow.icloud .star.on {
  color: var(--yellow) !important;
}
/* inset separator (starts past the avatar), both breakpoints */
.list:not(.selecting) .trow.icloud + .trow.icloud::after {
  content: "";
  position: absolute;
  left: 3.4rem;
  right: 0;
  top: 0;
  height: 1px;
  background: var(--hair);
}
/* selected/open row: white text on the accent fill */
.trow.icloud.on .who,
.trow.icloud.on .subj,
.trow.icloud.on .snippet,
.trow.icloud.on .when,
.trow.icloud.sel-on .who,
.trow.icloud.sel-on .subj,
.trow.icloud.sel-on .snippet,
.trow.icloud.sel-on .when {
  color: #fff !important;
}

/* ── no sender-origin tint on inbox rows (the green "external" / blue "internal" wash) ─────────────────── */
.trow.int,
.trow.ext,
.trow.icloud.int,
.trow.icloud.ext {
  background: transparent !important;
}
.trow.int:hover,
.trow.ext:hover,
.trow.icloud.int:hover,
.trow.icloud.ext:hover {
  background: rgba(255, 255, 255, 0.05) !important;
}
html[data-sup-mode="light"] .trow.int:hover,
html[data-sup-mode="light"] .trow.ext:hover {
  background: rgba(0, 0, 0, 0.04) !important;
}
.trow.on,
.trow.sel-on,
.trow.icloud.on,
.trow.icloud.sel-on {
  background: var(--blue) !important;
}

/* ── custom backgrounds per mode (uploaded in Master console → Appearance) ─────────────────────────────── */
:root {
  --wall-url: url("/appearance/bg/color");
}
html[data-sup-mode="light"] {
  --wall-url: url("/appearance/bg/light");
}
html[data-sup-mode="dark"] {
  --wall-url: url("/appearance/bg/dark");
}
html[data-sup-mode="light"]:not([data-bg-light=""]),
html[data-sup-mode="dark"]:not([data-bg-dark=""]) {
  --wall-display: block;
}
/* with a photo behind Light/Dark, let it show through the panels a little */
html[data-sup-mode="light"]:not([data-bg-light=""]) {
  --pane-bg: rgba(255, 255, 255, 0.84);
  --rail-bg: rgba(255, 255, 255, 0.62);
}
html[data-sup-mode="dark"]:not([data-bg-dark=""]) {
  --pane-bg: rgba(8, 8, 10, 0.62);
  --rail-bg: rgba(10, 10, 12, 0.55);
}

/* step-up / confirmation dialog: a centered glass card (native <dialog>) */
dialog.sheet[open] {
  align-items: center !important;
  background: rgba(0, 0, 0, 0.32) !important;
}
dialog#stepup[open] {
  border: 0;
  padding: 0;
  background: transparent !important;
  max-width: none;
}
dialog#stepup form,
dialog.sheet[open] > form,
dialog.sheet[open] > .box {
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(30px) saturate(1.6);
  backdrop-filter: blur(30px) saturate(1.6);
  border: 0.5px solid var(--hair2);
  border-radius: 16px;
  box-shadow: var(--pop);
  padding: 1.2rem 1.3rem !important;
  color: var(--text);
}
dialog#stepup .in {
  background: var(--field-bg) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 10px;
}

/* ── Apple-style alert (step-up / confirmations): centered card, icon, title, message, stacked field, two buttons ── */
dialog.sheet.alert[open] {
  align-items: center !important;
  justify-content: center !important;
  background: rgba(0, 0, 0, 0.42) !important;
  padding: 0;
  border: 0;
  max-width: none;
  inset: 0;
}
dialog.sheet.alert[open] > form.alertcard {
  width: min(380px, calc(100vw - 32px));
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.7);
  backdrop-filter: blur(34px) saturate(1.7);
  border: 0.5px solid var(--hair2);
  border-radius: 18px;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.3);
  padding: 1.5rem 1.3rem 1.2rem !important;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  gap: 0.55rem;
  color: var(--text);
}
.alertcard .aicon {
  width: 56px;
  height: 56px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  background: linear-gradient(160deg, #2b90ff, #0a60df);
  color: #fff;
  box-shadow: 0 8px 20px rgba(0, 122, 255, 0.35);
  margin-bottom: 0.2rem;
}
.alertcard .aicon .ic {
  width: 26px;
  height: 26px;
}
.alertcard .atitle {
  font-weight: 800;
  font-size: 1.08rem;
  letter-spacing: -0.01em;
}
.alertcard .amsg {
  margin: 0 0 0.3rem;
  font-size: 0.86rem;
  line-height: 1.4;
  color: var(--t2);
}
.alertcard .in {
  width: 100%;
  box-sizing: border-box;
  text-align: center;
  height: 2.5rem;
  border-radius: 10px !important;
  background: var(--field-bg) !important;
  border: 1px solid var(--hair) !important;
}
.alertcard .err {
  color: #ff8a84;
  min-height: 0;
}
.alertcard .alink {
  background: none;
  border: 0;
  color: var(--link);
  font: 600 0.84rem var(--sans);
  cursor: pointer;
  padding: 0.2rem 0.4rem;
  display: inline-flex;
  gap: 0.35rem;
  align-items: center;
}
.alertcard .abtns {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.5rem;
  width: 100%;
  margin-top: 0.5rem;
}
.alertcard .abtns .btn {
  width: 100%;
  justify-content: center;
  height: 2.5rem;
  border-radius: 11px;
  font-weight: 700;
}
html[data-sup-mode="light"] .alertcard .err {
  color: #c0392b;
}

/* ── video backgrounds: the <video> fills #wallpaper; while it plays, drop the panel blur (a live blur over
      moving video re-renders every frame) and lean on panel opacity for legibility instead ─────────────── */
#wallpaper video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
#wallpaper video[hidden] {
  display: none;
}
html[data-wall-video="1"] #wallpaper {
  background-image: none !important;
}
@media (min-width: 901px) {
  html[data-wall-video="1"] .nav,
  html[data-wall-video="1"] .list,
  html[data-wall-video="1"] .conv,
  html[data-wall-video="1"] .conv.master .mwrap {
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  html[data-wall-video="1"] {
    --pane-bg: rgba(9, 12, 20, 0.7);
    --rail-bg: rgba(0, 0, 0, 0.5);
  }
  html[data-wall-video="1"][data-sup-mode="light"] {
    --pane-bg: rgba(255, 255, 255, 0.9);
    --rail-bg: rgba(255, 255, 255, 0.72);
  }
}

/* master console: the back link sits at the top of the rail */
.conv.master .mnav .back {
  display: flex;
  align-items: center;
  gap: 0.3rem;
  margin: 0 0 0.5rem !important;
  padding: 0.5rem 0.7rem 0.8rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  color: var(--t2);
  font-size: 0.86rem;
}
.conv.master .mnav .back:hover {
  color: var(--text);
  background: none !important;
}

/* ── Super products grid → iCloud-style app grid: brand tiles, labels beneath, red badges ──────────────── */
.sgrid .sgp {
  width: 372px !important;
  padding: 12px 12px 8px !important;
  border-radius: 20px !important;
  top: 44px !important;
  background: var(--menu-bg) !important;
  -webkit-backdrop-filter: blur(34px) saturate(1.8);
  backdrop-filter: blur(34px) saturate(1.8);
  border: 0.5px solid var(--hair2) !important;
  box-shadow:
    0 22px 60px rgba(0, 0, 0, 0.45),
    0 0 0 0.5px rgba(0, 0, 0, 0.35) !important;
}
@media (prefers-reduced-motion: no-preference) {
  .sgrid[open] .sgp {
    animation: menuPop 0.2s cubic-bezier(0.2, 0.9, 0.2, 1.04) both;
    transform-origin: top right;
  }
}
.sgrid .sgh {
  padding: 0.2rem 0.5rem 0.7rem !important;
  gap: 0.5rem;
}
.sgrid .sgh b {
  font-weight: 800;
  font-size: 1rem;
  letter-spacing: -0.01em;
}
.sgrid .sgh span {
  font-size: 0.76rem;
  color: var(--t3);
}
.sgrid .sgl {
  grid-template-columns: repeat(3, 1fr) !important;
  gap: 4px 2px !important;
}
.sgrid .sgl a {
  gap: 0.5rem !important;
  padding: 0.7rem 0.3rem 0.65rem !important;
  border-radius: 14px !important;
  font-size: 0.78rem !important;
  font-weight: 500;
  color: var(--text) !important;
  transition:
    background 0.14s ease,
    transform 0.14s cubic-bezier(0.2, 0.8, 0.2, 1);
}
.sgrid .sgl a:hover {
  background: var(--glass2) !important;
}
.sgrid .sgl a:active {
  transform: scale(0.96);
}
.sgrid .sgl a.on {
  background: none !important;
  box-shadow: none !important;
}
/* the tile */
.sgrid .sgl a .sgi {
  width: 58px;
  height: 58px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  color: #fff;
  background: linear-gradient(160deg, #6e7a8a, #3d4653);
  box-shadow:
    inset 0 1px 0 rgba(255, 255, 255, 0.28),
    0 6px 16px rgba(0, 0, 0, 0.28);
}
.sgrid .sgl a .sgi .ic {
  width: 27px !important;
  height: 27px !important;
  stroke-width: 1.6;
}
.sgrid .sgl a.on .sgi {
  outline: 2px solid rgba(255, 255, 255, 0.85);
  outline-offset: 2px;
}
html[data-sup-mode="light"] .sgrid .sgl a.on .sgi {
  outline-color: rgba(0, 0, 0, 0.55);
}
/* brand colours per product (by destination) */
.sgrid .sgl a[href*="sup.com/app#/mail"] .sgi {
  background: linear-gradient(160deg, #4aa8ff, #0a66e0);
}
.sgrid .sgl a[href*="sup.com/app#/chat"] .sgi {
  background: linear-gradient(160deg, #5be36c, #1fa53a);
}
.sgrid .sgl a[href*="sup.com/app#/cal"] .sgi {
  background: linear-gradient(160deg, #ff6b63, #e0322a);
}
.sgrid .sgl a[href*="superid.com"] .sgi {
  background: linear-gradient(160deg, #7d7bff, #4a3fd6);
}
.sgrid .sgl a[href*="superengine.com"] .sgi {
  background: linear-gradient(160deg, #5f6d80, #2a3442);
}
.sgrid .sgl a[href*="passwords.com"] .sgi {
  background: linear-gradient(160deg, #8e97a8, #4d5666);
}
.sgrid .sgl a[href*="superfile.com"] .sgi {
  background: linear-gradient(160deg, #ffd34d, #f0a000);
}
.sgrid .sgl a[href*="supersecure.com"] .sgi {
  background: linear-gradient(160deg, #3fd6c8, #0e9c91);
}
.sgrid .sgl a[href*="superdrm.com"]:not([href*="docs."]):not([href*="live."]) .sgi {
  background: linear-gradient(160deg, #b57bff, #6f2fd9);
}
.sgrid .sgl a[href*="docs.superdrm.com"] .sgi {
  background: linear-gradient(160deg, #a9b2c2, #5f6a7c);
}
.sgrid .sgl a[href*="live.superdrm.com"] .sgi {
  background: linear-gradient(160deg, #ff8a5b, #e5482a);
}
.sgrid .sgl a[href*="superc.com"] .sgi {
  background: linear-gradient(160deg, #39c6ff, #0b86d6);
}
.sgrid .sgl a[href*="superhyper.com"] .sgi {
  background: linear-gradient(160deg, #3a3f4a, #15181e);
}
.sgrid .sgl a[href*="dev.sup.com"] .sgi {
  background: linear-gradient(160deg, #4b5563, #1f2530);
}
/* the unread badge, Apple-red, riding the tile's corner */
.sgrid .sgn {
  top: -5px !important;
  right: -6px !important;
  background: #ff3b30 !important;
  color: #fff !important;
  font-weight: 700 !important;
  min-width: 18px !important;
  height: 18px !important;
  border-radius: 9px !important;
  box-shadow: 0 0 0 2px var(--menu-bg);
}
/* footer link as a quiet pill row */
.sgrid .sga {
  margin: 0.5rem -4px -2px !important;
  padding: 0.65rem 0.8rem !important;
  border-top: 1px solid var(--hair) !important;
  border-radius: 0 0 14px 14px;
  color: var(--t2) !important;
  font-weight: 500;
}
.sgrid .sga:hover {
  background: var(--glass2) !important;
  color: var(--text) !important;
}

/* ── reading view, Apple Mail style: big subject, round icon actions, one clean card with the body in the mode's own text colour ── */
.conv.mail .head.mailhead {
  padding: 1rem 1.4rem 0.9rem !important;
  background: transparent !important;
  border-bottom: 1px solid var(--hair) !important;
  align-items: flex-start !important;
}
.conv.mail .head .ct .title {
  font-size: 1.45rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  line-height: 1.15;
  white-space: normal;
}
.conv.mail .head .ct .sub {
  font-size: 0.88rem;
  color: var(--t3);
  margin-top: 0.3rem;
}
.conv .head .acts {
  gap: 0.4rem !important;
  align-items: center !important;
  flex-wrap: wrap;
}
.conv .head .acts .btn {
  width: 36px;
  height: 36px;
  padding: 0 !important;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  color: var(--act-fg) !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  box-shadow: none !important;
  font-size: 0.9rem;
}
.conv .head .acts .btn:hover {
  background: var(--act-bg-h) !important;
  color: var(--text) !important;
}
.conv .head .acts .btn .ic {
  width: 18px;
  height: 18px;
}
.conv .head .acts .btn .lbl {
  display: none;
}
.conv .head .acts .btn.warnbtn {
  color: #d0433a !important;
}
.conv .head .acts #star .ic {
  color: inherit;
}
.conv .head .acts select.in.sm {
  height: 36px;
  border-radius: 999px !important;
  background: var(--act-bg) !important;
  border: 0 !important;
  color: var(--act-fg) !important;
  padding: 0 2rem 0 1rem !important;
  font-size: 0.9rem;
  box-shadow: none !important;
}
.conv .head .acts #tochat {
  width: auto;
  padding: 0 1rem !important;
  border-radius: 999px !important;
}
.conv .head .acts #tochat .lbl {
  display: inline;
}
.conv.mail .msgs {
  padding: 1rem 1.4rem 2rem !important;
}
.mcard,
.conv.mail .msg {
  background: var(--card-bg) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 16px !important;
  padding: 1.1rem 1.3rem !important;
  gap: 0.9rem !important;
  box-shadow: var(--card-shadow) !important;
}
.mcard .av {
  width: 40px !important;
  height: 40px !important;
  font-size: 0.9rem !important;
}
.mcard .mhead {
  align-items: flex-start !important;
}
.mcard .mhead .from b {
  font-size: 1.02rem;
  font-weight: 700;
  color: var(--text);
}
.mcard .mhead .from .person {
  font-size: 0.9rem;
  color: var(--t3);
  margin-left: 0.35rem;
}
.mcard .mhead .when {
  font-size: 0.85rem !important;
  color: var(--t3) !important;
}
.mcard .toline,
.mcard .lock,
.mcard .dim.small {
  font-size: 0.86rem;
  color: var(--t3);
}
.mcard .body,
.msg .body {
  font-size: 1rem !important;
  line-height: 1.6 !important;
  color: var(--text) !important;
  margin-top: 0.8rem;
}
.mcard .btn,
.conv .quick .btn {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  color: var(--text) !important;
  padding: 0.5rem 1rem !important;
  font-weight: 500;
  box-shadow: none !important;
}
.mcard .btn:hover,
.conv .quick .btn:hover {
  background: var(--act-bg-h) !important;
}
.conv .quick {
  padding: 0.6rem 1.4rem 1rem !important;
  gap: 0.5rem !important;
}
.conv .banner.warnban,
.conv .banner.spamban {
  border-radius: 12px;
  margin: 0.8rem 1.4rem 0;
}

/* ── compose, Apple Mail style: a clean sheet, hairline rows with grey labels, the body on the sheet itself, pill tools (Shane 2026-09-15, phone screenshot) ── */
.composer {
  background: var(--sheet-bg) !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
  border: 0.5px solid var(--hair2) !important;
  border-radius: 16px !important;
  box-shadow: var(--win-shadow) !important;
  overflow: hidden;
}
.composer .chead {
  background: transparent !important;
  border-bottom: 1px solid var(--hair) !important;
  padding: 0.8rem 1rem !important;
  font-size: 1.02rem;
}
.composer .chead > span:first-child {
  font-weight: 700;
  color: var(--text);
}
.composer .cbody {
  padding: 0 1rem !important;
  background: transparent !important;
}
.composer .crow {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.8rem;
  padding: 0.3rem 0 !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 !important;
  background: transparent !important;
  position: relative;
}
.composer .crow label {
  color: var(--t3) !important;
  font-size: 1rem !important;
  min-width: 3.6rem;
  font-weight: 400;
  flex: none;
}
.composer .crow label::after {
  content: ":";
}
.composer .cin,
.composer select.cin {
  background: transparent !important;
  border: 0 !important;
  font-size: 1rem !important;
  color: var(--text) !important;
  padding: 0.35rem 0 !important;
  flex: 1;
  min-width: 6rem;
  box-shadow: none !important;
  border-radius: 0 !important;
  font-family: var(--sans) !important;
}
.composer .cin:focus {
  outline: 0 !important;
  box-shadow: none !important;
}
.composer .chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
}
.composer .chips .chip {
  border-radius: 999px !important;
  background: var(--act-bg) !important;
  color: var(--text) !important;
  border: 0 !important;
  padding: 0.2rem 0.65rem !important;
  font-size: 0.92rem;
}
.composer #c-cclink {
  color: var(--blue) !important;
  font-size: 0.95rem;
  margin-left: auto;
  flex: none;
}
.composer .ctext {
  background: transparent !important;
  border: 0 !important;
  font-size: 1.02rem !important;
  line-height: 1.55;
  padding: 0.9rem 0 !important;
  min-height: 12rem;
  color: var(--text) !important;
  box-shadow: none !important;
  font-family: var(--sans) !important;
}
.composer .ctext:focus {
  outline: 0 !important;
}
.composer .banner.small,
.composer .lockwrap {
  border-radius: 12px;
  background: var(--act-bg) !important;
  border: 0 !important;
  padding: 0.7rem 0.9rem;
  margin: 0.4rem 0;
}
.composer .cfoot {
  background: transparent !important;
  border-top: 1px solid var(--hair) !important;
  padding: 0.6rem 1rem !important;
  gap: 0.4rem !important;
  flex-wrap: nowrap !important;
  overflow-x: auto;
  scrollbar-width: none;
}
.composer .cfoot::-webkit-scrollbar {
  display: none;
}
.composer .cfoot .btn {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  color: var(--text) !important;
  padding: 0.45rem 0.8rem !important;
  box-shadow: none !important;
  white-space: nowrap;
  flex: none;
  font-size: 0.9rem;
}
.composer .cfoot .btn:hover {
  background: var(--act-bg-h) !important;
}
.composer .cfoot .btn .ic {
  width: 16px;
  height: 16px;
}
.composer .cfoot .sendgrp {
  display: inline-flex;
  gap: 2px;
  flex: none;
}
.composer .cfoot #c-send {
  background: var(--blue) !important;
  color: #fff !important;
  padding: 0.5rem 1.2rem !important;
  font-weight: 600;
  border-radius: 999px 0 0 999px !important;
}
.composer .cfoot #c-later {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 0 999px 999px 0 !important;
  padding: 0.5rem 0.7rem !important;
}
.composer .cfoot label.btn input[type="checkbox"] {
  accent-color: var(--blue);
  margin: 0 0.3rem 0 0;
}
.composer .cfoot #c-discard {
  margin-left: auto;
}
@media (max-width: 900px) {
  .composer {
    border-radius: 0 !important;
    border: 0 !important;
    background: var(--sheet-bg) !important;
    flex-direction: column;
    box-shadow: none !important;
  }
  .composer.on {
    display: flex;
  }
  .composer .chead {
    display: grid !important;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    padding: 0.85rem 1rem calc(0.85rem) !important;
    padding-top: calc(0.85rem + env(safe-area-inset-top)) !important;
    cursor: default;
  }
  .composer .chead > span:first-child {
    grid-column: 2;
    grid-row: 1;
    text-align: center;
    font-weight: 600;
    font-size: 1.05rem;
  }
  .composer .chead #c-saved,
  .composer #c-min {
    display: none !important;
  }
  .composer #c-close {
    grid-column: 1;
    grid-row: 1;
    justify-self: start;
    width: auto !important;
    height: auto !important;
    background: none !important;
    border: 0 !important;
    color: var(--blue) !important;
    font-size: 1.05rem !important;
    padding: 0 !important;
  }
  .composer #c-close .x {
    display: none;
  }
  .composer #c-close .lbl {
    display: inline !important;
  }
  .composer .chead .sendtop {
    display: inline-flex !important;
    grid-column: 3;
    grid-row: 1;
    justify-self: end;
    background: var(--blue) !important;
    color: #fff !important;
    border-radius: 999px !important;
    padding: 0.4rem 1rem !important;
    font-weight: 600;
    border: 0 !important;
    box-shadow: none !important;
  }
  .composer .cbody {
    flex: 1;
    overflow: auto;
    padding: 0 1rem !important;
  }
  .composer .crow {
    min-height: 3rem;
  }
  .composer .crow label {
    font-size: 1.02rem !important;
  }
  .composer .cin,
  .composer select.cin,
  .composer .ctext {
    font-size: 1.05rem !important;
  }
  .composer .cfoot {
    padding: 0.5rem 0.8rem calc(0.6rem + env(safe-area-inset-bottom)) !important;
  }
  .composer .cfoot .sendgrp {
    display: none;
  }
}

/* ── person view, Apple-clean: rounded stat tiles, big photo grid, sentence-case section labels ── */
.conv.person .head {
  background: transparent !important;
  border-bottom: 1px solid var(--hair) !important;
}
.conv.person .head #back {
  width: 32px;
  height: 32px;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  color: var(--text);
}
.conv.person .head .av {
  width: 40px !important;
  height: 40px !important;
}
.conv.person .head .ct .title {
  font-size: 1.02rem;
  font-weight: 600;
  letter-spacing: -0.01em;
}
.conv.person .head .ct .sub {
  font-size: 0.82rem;
  color: var(--t3);
}
.conv.person .head .acts .btn {
  width: 34px;
  height: 34px;
  padding: 0 !important;
  font-size: 0;
  justify-content: center;
  border-radius: 50% !important;
}
.conv.person .head .acts .btn .ic {
  width: 16px;
  height: 16px;
  margin: 0 !important;
}
.conv.person .head .acts .btn {
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  color: var(--text) !important;
  box-shadow: none !important;
  padding: 0.45rem 1rem !important;
}
.conv.person .pstats div,
.pstats div {
  background: var(--card-bg) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  box-shadow: var(--card-shadow) !important;
}
.conv.person .pstats b {
  font-weight: 700;
}
.psect {
  font-family: var(--sans) !important;
  font-size: 0.95rem !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
  font-weight: 600;
  color: var(--text) !important;
  border-bottom: 0 !important;
  margin: 1.4rem 0 0.6rem !important;
}
.psect .dim,
.psect .sighint {
  font-weight: 400;
  color: var(--t3) !important;
}
.pgrid {
  gap: 0.5rem !important;
}
.pgrid .ph {
  border-radius: 12px !important;
  border: 1px solid var(--hair) !important;
  background: var(--card-bg) !important;
}
.pti {
  background: var(--card-bg) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
}
@media (max-width: 900px) {
  .pgrid {
    grid-template-columns: repeat(3, 1fr) !important;
  }
  .conv.person .head .acts .btn .ic {
    margin-right: 0.25em;
  }
}

/* ── compose like macOS Mail (desktop): ONE title strip holding the title, the tool icons, Send and the window controls; hairline To/Cc/Subject/From rows; body on white; minimize = a slim bar on the bottom edge ── */
@media (min-width: 901px) {
  .composer {
    flex-direction: column;
    width: min(760px, calc(100vw - 2.4rem)) !important;
    height: min(640px, 86dvh);
    max-height: 86dvh !important;
    border-radius: 14px !important;
    bottom: 1rem !important;
    right: 1.2rem !important;
  }
  .composer.on {
    display: flex !important;
  } /* NEVER display:flex on .composer itself — the closed (empty) composer would paint a blank sheet (it did, on phones, 2026-09-15) */
  .composer .chead {
    display: flex !important;
    align-items: center;
    gap: 0.45rem;
    padding: 0.5rem 0.7rem 0.5rem 1rem !important;
    border-bottom: 1px solid var(--hair) !important;
    min-height: 0;
    cursor: move;
  }
  .composer .chead > span:first-child {
    flex: 0 0 auto;
    font-size: 0.95rem;
    font-weight: 600;
    color: var(--text);
    margin-right: 0.35rem;
    max-width: 34%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  .composer .chead #c-saved {
    flex: 1 1 auto;
    text-align: left;
    font-size: 0.8rem;
  }
  .composer .chead .cfoot {
    order: 0;
    margin-left: auto;
    border: 0 !important;
    padding: 0 !important;
    background: transparent !important;
    flex-wrap: nowrap !important;
    overflow: visible;
    gap: 0.35rem !important;
    display: inline-flex !important;
    align-items: center;
  }
  .composer .chead .iconb {
    width: 30px;
    height: 30px;
  }
  .composer .cfoot .btn {
    width: 34px;
    height: 34px;
    padding: 0 !important;
    border-radius: 50% !important;
    background: var(--act-bg) !important;
    color: var(--act-fg) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 0 !important;
    line-height: 0;
  }
  .composer .cfoot .btn .ic {
    width: 17px;
    height: 17px;
    font-size: 1rem;
  }
  .composer .cfoot #c-exp,
  .composer .cfoot #c-tpl {
    width: auto;
    padding: 0 0.8rem !important;
    font-size: 0.85rem !important;
    border-radius: 999px !important;
    line-height: 1;
  }
  .composer .cfoot label.btn {
    width: auto;
    padding: 0 0.7rem !important;
    border-radius: 999px !important;
    font-size: 0 !important;
    gap: 0.3rem;
  }
  .composer .cfoot label.btn input[type="checkbox"] {
    margin: 0;
    width: 14px;
    height: 14px;
  }
  .composer .cfoot .sendgrp {
    margin-left: 0.35rem;
    order: 10;
    display: inline-flex !important;
  }
  .composer .cfoot #c-send {
    width: auto;
    height: 34px;
    padding: 0 1.1rem !important;
    border-radius: 999px 0 0 999px !important;
    font-size: 0.9rem !important;
    font-weight: 600;
    background: var(--blue) !important;
    color: #fff !important;
  }
  .composer .cfoot #c-later {
    width: 32px;
    height: 34px;
    border-radius: 0 999px 999px 0 !important;
    background: var(--blue) !important;
    color: #fff !important;
    font-size: 0.7rem !important;
  }
  .composer .cfoot #c-discard {
    order: 11;
    margin-left: 0.15rem;
  }
  .composer .cbody {
    display: flex;
    flex-direction: column;
    flex: 1;
    min-height: 0;
    padding: 0 1.1rem !important;
    overflow: auto;
  }
  .composer .cbody .crow:has(#c-to) {
    order: 1;
  }
  .composer .cbody .crow:has(#c-cc) {
    order: 2;
  }
  .composer .cbody .crow:has(#c-subj) {
    order: 3;
  }
  .composer .cbody .crow:has(#c-from) {
    order: 4;
  }
  .composer .cbody .ctext {
    order: 5;
    flex: 1;
    min-height: 10rem;
  }
  .composer .cbody .files {
    order: 6;
  }
  .composer .cbody .lockwrap {
    order: 7;
  }
  .composer .cbody .banner {
    order: 8;
  }
  .composer .crow {
    min-height: 2.6rem !important;
    flex: none;
  }
  .composer .crow label {
    min-width: 4.2rem;
    font-size: 0.95rem !important;
  }
  /* minimized: a slim tab on the bottom edge, like Gmail — title (or the subject) with the window controls */
  .composer.min {
    height: 44px !important;
    max-height: 44px !important;
    width: 340px !important;
    left: auto !important;
    right: 1.2rem !important;
    top: auto !important;
    bottom: 0 !important;
    border-radius: 12px 12px 0 0 !important;
    box-shadow:
      0 -8px 28px rgba(0, 0, 0, 0.18),
      0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
    overflow: hidden;
  }
  .composer.min .chead {
    border-bottom: 0 !important;
    padding: 0.55rem 0.6rem 0.55rem 1rem !important;
    cursor: pointer;
    height: 44px;
    box-sizing: border-box;
  }
  .composer.min .chead > span:first-child {
    max-width: none;
    flex: 1 1 auto;
  }
  .composer.min .chead .cfoot,
  .composer.min .chead #c-saved {
    display: none !important;
  }
}
/* ── pop-ups like Apple's sheets: white, 24px radius, grouped grey blocks, a grey Done at the bottom-right ── */
.sheet .box {
  border-radius: 24px !important;
  padding: 1.4rem !important;
  max-width: 620px;
}
.sheet .box .h1 {
  background: var(--group-bg);
  border-radius: 14px 14px 0 0;
  padding: 1rem 1.2rem 0.2rem !important;
  margin: 0 !important;
  font-size: 1.15rem !important;
  font-weight: 600 !important;
}
.sheet .box .h1 + p {
  background: var(--group-bg);
  border-radius: 0 0 14px 14px;
  margin: 0 0 0.9rem !important;
  padding: 0.35rem 1.2rem 1rem !important;
  font-size: 0.95rem !important;
}
.sheet .box .h1 .ic {
  width: 22px;
  height: 22px;
  color: var(--blue);
  margin-right: 0.4rem;
  vertical-align: -4px;
}
.sheet .box .chips {
  background: var(--group-bg);
  border-radius: 14px;
  padding: 0.7rem 0.9rem;
  margin: 0 0 0.9rem !important;
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sheet .box .chips .chip {
  background: var(--sheet-bg) !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.sheet .box .chips .chip.on {
  background: var(--blue) !important;
}
.sheet .box .ai-out {
  background: var(--group-bg) !important;
  border: 0 !important;
  border-radius: 14px !important;
  padding: 1rem 1.2rem !important;
  min-height: 4rem;
  font-size: 0.98rem;
  line-height: 1.55;
}
.sheet .box .btn.ghost,
.sheet .box .btn.sec,
.sheet .box #ai-close {
  background: var(--act-bg) !important;
  color: var(--text) !important;
  border: 0 !important;
  border-radius: 11px !important;
  padding: 0.55rem 1.2rem !important;
  font-weight: 600;
  box-shadow: none !important;
}
.sheet .box .btn.sec#ai-use {
  background: var(--blue) !important;
  color: #fff !important;
}

/* ── Gmail-style search panel in Aurora: white sheet under the pill, ghost completion in the box ── */
.list .search .inwrap {
  align-items: center;
}
.list .search .sp-tools {
  right: 0.7rem;
}
.list .search .sp-div {
  background: var(--hair2) !important;
  height: 1.4rem;
}
.list .search .sp-cam,
.list .search .sp-x {
  color: var(--t2) !important;
}
.list .search .sp-cam:hover,
.list .search .sp-x:hover {
  color: var(--text) !important;
  background: rgba(0, 0, 0, 0.06) !important;
}
.list .search .inwrap .in {
  padding-right: 5rem !important;
}
.isdrop {
  background: var(--group-bg) !important;
  border-color: var(--hair2) !important;
}
.isrow .in {
  background: var(--sheet-bg) !important;
  border: 1px solid var(--hair2) !important;
  border-radius: 999px !important;
  padding: 0.6rem 1rem !important;
}
.list .search .ghost {
  display: block;
  position: absolute;
  left: 2.9rem;
  top: 50%;
  transform: translateY(-50%);
  pointer-events: none;
  font-size: 1.06rem;
  color: transparent;
  white-space: pre;
  max-width: calc(100% - 3.5rem);
  overflow: hidden;
}
.list .search .ghost .rest {
  color: var(--t3);
}
.list .search .ghost kbd {
  display: inline-block;
  margin-left: 0.5rem;
  font: 500 0.7rem var(--sans);
  color: var(--t3);
  border: 1px solid var(--hair2);
  border-radius: 5px;
  padding: 0.05rem 0.35rem;
  vertical-align: 1px;
  background: var(--sheet-bg);
}
.spanel {
  background: var(--sheet-bg) !important;
  border: 0.5px solid var(--hair2) !important;
  border-radius: 18px !important;
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.22),
    0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
  left: 1.1rem !important;
  right: 1.1rem !important;
  top: calc(100% + 0.2rem) !important;
  color: var(--text);
}
.sp-chips {
  border-bottom: 1px solid var(--hair) !important;
}
.sp-chip {
  border: 1px solid var(--hair2) !important;
  border-radius: 10px !important;
  color: var(--text) !important;
}
.sp-chip:hover {
  background: var(--menu-hover);
}
.sp-chip.on {
  background: var(--blue) !important;
  color: #fff !important;
  border-color: transparent !important;
}
.sp-sec {
  border-bottom: 1px solid var(--hair) !important;
}
.sp-row:hover,
.sp-foot:hover {
  background: var(--menu-hover) !important;
}
.sp-row .av {
  border-radius: 8px !important;
}
@media (max-width: 900px) {
  .spanel {
    left: 0 !important;
    right: 0 !important;
    border-radius: 0 0 18px 18px !important;
  }
}

/* ── Messages dock in Aurora: white pill, soft shadow, Apple red badge ── */
#msgdock {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}
#msgdock .dk {
  background: var(--sheet-bg) !important;
  border: 0.5px solid var(--hair2) !important;
  box-shadow:
    0 6px 18px rgba(0, 0, 0, 0.14),
    0 0 0 0.5px rgba(0, 0, 0, 0.05) !important;
  transition:
    transform 0.16s cubic-bezier(0.2, 0.8, 0.2, 1),
    box-shadow 0.16s;
}
#msgdock .dk:hover {
  transform: translateY(-1px);
  box-shadow:
    0 10px 26px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.05) !important;
}
#msgdock .dk-n {
  background: var(--act-bg) !important;
}
.sgrid .sgl a[href*="superintel.com"] .sgi {
  background: linear-gradient(160deg, #a78bfa, #6d28d9);
}
.sp-ask {
  border-bottom: 1px solid var(--hair) !important;
}
.sp-ask:hover {
  background: var(--menu-hover) !important;
}
.sp-answer {
  border-bottom: 1px solid var(--hair) !important;
  background: color-mix(in srgb, var(--blue) 6%, var(--sheet-bg));
}
#msgdock .dk-badge {
  border-color: var(--sheet-bg) !important;
}
#msgdock .dk-avs a {
  border-color: var(--sheet-bg) !important;
}
#msgdock .dk-more {
  background: var(--act-bg) !important;
  color: var(--act-fg) !important;
}

/* ── message head like Apple Mail: name · address, subject line, "To:" people in readable type ── */
.mcard .mhead .mh-l {
  display: flex;
  align-items: baseline;
  gap: 0.5rem;
  min-width: 0;
  flex: 1;
}
.mcard .mhead .mh-l .from {
  white-space: nowrap;
}
.mcard .mhead .addr,
.mcard .mhead .from .person {
  font-size: 0.92rem !important;
  color: var(--t3) !important;
  margin-left: 0 !important;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  text-decoration: none;
}
.mcard .mhead .addr:hover {
  text-decoration: underline;
}
.mcard .msubj {
  font-size: 1rem;
  color: var(--text);
  margin-top: 0.15rem;
}
.mcard .toline {
  font-size: 0.93rem !important;
  color: var(--t2) !important;
  margin-top: 0.2rem;
  display: flex;
  flex-wrap: wrap;
  gap: 0.35rem;
  align-items: center;
}
.mcard .toline b {
  font-weight: 500;
  color: var(--t3);
}
.mcard .toline .leg {
  margin-left: 0.2rem;
  color: var(--t3);
  display: inline-flex;
}
.mcard .toline .leg .ic {
  width: 13px;
  height: 13px;
}
.conv.mail .head .ct .sub {
  font-size: 0.92rem;
  color: var(--t2);
}
.conv.mail .head .ct .sub a.person {
  color: var(--text);
  font-weight: 500;
}

/* rows must not overflow their margins */
.list .trow,
.list .trow.icloud {
  width: auto !important;
}
/* answer card + profile in Aurora */
.sp-ans-lead mark {
  background: color-mix(in srgb, var(--blue) 14%, transparent);
}
.sp-answer:not(.open) .sp-ans-body::after {
  background: linear-gradient(transparent, color-mix(in srgb, var(--blue) 6%, var(--sheet-bg)));
}
.sp-more {
  border-color: color-mix(in srgb, var(--blue) 45%, transparent) !important;
  background: var(--sheet-bg) !important;
}
.sp-cite {
  background: var(--act-bg) !important;
  color: var(--t2) !important;
}
.phero .av {
  border-radius: 50% !important;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.14);
}
.ptabs {
  border-bottom: 1px solid var(--hair) !important;
}
.ptab.on {
  border-bottom-color: var(--blue) !important;
}
.conv .head .acts .btn.archmore {
  width: 22px;
  border-radius: 0 999px 999px 0 !important;
  margin-left: -8px;
  font-size: 0.7rem;
}

/* search box spans the full row; the × | lens tools sit inside its right end */
.list .search .in,
.list .search .inwrap {
  max-width: none !important;
  width: 100% !important;
}
.list .search .inwrap {
  flex: 1 1 auto !important;
}

/* ── placed LAST on purpose: these must beat the generic .smenu/.umenu rules above (same specificity, later wins) ── */
/* the rail's account switcher: an Apple-style sheet — near-opaque frosted, floating just under the head, all accounts listed with a check on the current one, system type throughout (Shane 2026-09-15: "broken and isnt overlaying right … apple style") */
#shell .sideme,
.sideme {
  position: relative;
}
#shell .sideme .menu,
.nav .sideme .menu,
.sideme .menu {
  position: absolute !important;
  left: 6px !important;
  right: 6px !important;
  top: calc(100% + 4px) !important;
  width: auto !important;
  min-width: 0 !important;
  max-width: none !important;
  z-index: 120 !important;
  opacity: 1 !important;
  transform: none !important;
  background: var(--menu-solid) !important;
  isolation: isolate;
  -webkit-backdrop-filter: blur(40px) saturate(1.8);
  backdrop-filter: blur(40px) saturate(1.8);
  border: 0.5px solid var(--hair2) !important;
  border-radius: 14px !important;
  padding: 6px !important;
  box-shadow:
    0 18px 50px rgba(0, 0, 0, 0.28),
    0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
  overflow: hidden;
}
.sideme .menu .who {
  display: none !important;
}
.sideme .accts {
  border: 0 !important;
  margin: 0 0 4px !important;
  padding: 0 0 4px !important;
  border-bottom: 0.5px solid var(--hair) !important;
}
.sideme .accts a {
  padding: 8px 10px !important;
  border-radius: 10px !important;
  gap: 10px !important;
  font-family: var(--sans) !important;
}
.sideme .accts .av {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.8rem !important;
}
.sideme .accts b {
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  font-family: inherit !important;
  color: var(--text) !important;
}
.sideme .accts small {
  font-family: var(--sans) !important;
  font-size: 0.82rem !important;
  color: var(--t3) !important;
  margin-top: 1px;
}
#shell .sideme .accts a.cur,
.smenu .accts a.cur,
.sideme .accts a.cur {
  background: transparent !important;
  opacity: 1 !important;
}
.sideme .accts a.cur:hover {
  background: var(--glass2) !important;
}
.sideme .accts .chk {
  color: var(--blue) !important;
}
.sideme .menu > a {
  padding: 9px 10px !important;
  border-radius: 10px !important;
  font-size: 0.95rem !important;
  font-family: var(--sans) !important;
  color: var(--text) !important;
  gap: 10px !important;
}
.sideme .menu > a svg {
  width: 16px !important;
  height: 16px !important;
  color: var(--t2) !important;
}
.rhead .me span,
.rhead .me small,
.popmenu .pmhead span,
.popmenu .acn span,
.nav .rfoot,
.nav .idstrip,
.lock,
.pill {
  font-family: var(--sans) !important;
  letter-spacing: 0 !important;
  text-transform: none !important;
}
/* gutter: stacked writers + reply arrow */
.trow.icloud .pav.stack {
  position: relative;
  width: 38px;
  height: 38px;
  display: block;
}
.trow.icloud .pav.stack .av {
  position: absolute;
  width: 27px !important;
  height: 27px !important;
  min-width: 0 !important;
  font-size: 0.62rem !important;
  margin: 0 !important;
}
.trow.icloud .pav.stack .av:first-child {
  top: 0;
  left: 0;
  z-index: 1;
}
.trow.icloud .pav.stack .av:last-child {
  right: 0;
  bottom: 0;
  z-index: 2;
  box-shadow: 0 0 0 2px var(--rail-bg, #fff);
}
.trow.icloud .rply {
  position: absolute;
  left: 0.32rem;
  top: 1.25rem;
  width: 14px;
  height: 14px;
  color: var(--t3);
  opacity: 0.9;
}
.trow.icloud .rply .ic {
  width: 14px;
  height: 14px;
}
.trow.icloud.unread .rply {
  top: 2.1rem;
}
/* the aurora itself takes each app's hue: Mail stays blue/violet, Messages turns green/teal — the frosted panes carry the tint through */
body[data-app="chat"] #wallpaper {
  filter: hue-rotate(-108deg) saturate(1.02) brightness(1.02) !important;
}
body[data-app="chat"] #wallpaper.wp-enter,
body[data-app="chat"] #wallpaper.wp-pulse {
  filter: hue-rotate(-108deg) saturate(1.15) brightness(1.08) !important;
}
/* ── the window itself carries the app's colour (light mode): a Stripe-like mesh on the container, the rail and panes floating on it ── */

html[data-sup-mode="light"] body[data-app="mail"] #shell.on .list,
html[data-sup-mode="light"] body[data-app="mail"] #shell.on .conv,
html[data-sup-mode="light"] body[data-app="chat"] #shell.on .list,
html[data-sup-mode="light"] body[data-app="chat"] #shell.on .conv {
  background: rgba(255, 255, 255, 0.86) !important;
}
html[data-sup-mode="light"] body[data-app="mail"] #shell.on .nav,
html[data-sup-mode="light"] body[data-app="chat"] #shell.on .nav {
  background: rgba(255, 255, 255, 0.9) !important;
}
html[data-sup-mode="light"] #shell.on::before {
  display: none !important;
}
/* the dock pill is a notice in the bottom-right corner (with the toasts); it blurs in on new mail and blurs out on its own */
#msgdock.on {
  bottom: max(16px, env(safe-area-inset-bottom)) !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  left: auto !important;
  transform: none !important;
}
.cat[data-cat="new"].on,
.chip[data-cat="new"].on {
  background: #ff3b30 !important;
  color: #fff !important;
}
.catnote.c-new {
  background: #fde9e7 !important;
  color: #8a1f18 !important;
}
.catnote.c-new .dim,
.catnote.c-new p {
  color: #a3453d !important;
}
html[data-sup-mode="dark"] .catnote.c-new {
  background: rgba(255, 59, 48, 0.16) !important;
  color: #ffb4ad !important;
}
/* account block at the foot of the rail, its menu opening upward; Invite as an outlined pill */
.nav .rhead.bottom {
  margin-top: auto !important;
  border-top: 1px solid var(--hair) !important;
  border-bottom: 0 !important;
}
#shell .nav .rhead.bottom .menu,
#shell .sideme.rhead.bottom .menu {
  top: auto !important;
  bottom: calc(100% + 8px) !important;
}
.nav .invites {
  border-top: 0 !important;
  padding: 0.4rem 14px 0.7rem !important;
}
.nav .invites a {
  display: flex !important;
  align-items: center;
  justify-content: center;
  gap: 0.45rem;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  padding: 0.6rem 1rem !important;
  color: var(--text) !important;
  font-weight: 500;
  font-size: 0.9rem !important;
  background: transparent !important;
}
.nav .invites a:hover {
  background: rgba(120, 120, 128, 0.08) !important;
}
.nav .invites a .cnt {
  color: var(--t3) !important;
  font-weight: 400;
}
.nav .invites a .ic {
  width: 16px;
  height: 16px;
}
/* "end-to-end encrypted" sits centred at the foot of the right panel, lifting above the dock pill when one is showing */
#shell.on {
  position: relative !important;
}
#shell .e2e {
  position: absolute;
  left: var(--rail-w);
  right: 0;
  bottom: 14px;
  text-align: center;
  pointer-events: none;
  z-index: 6;
  font-size: 0.72rem;
  color: var(--t3);
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 0.35rem;
}
#shell .e2e .ic {
  width: 12px;
  height: 12px;
}
/* the note never moves; the dock pill simply sits over it while there is new mail */
@media (max-width: 900px) {
  #shell .e2e {
    display: none;
  }
}
/* Compose is the app's colour: blue in Mail, green in Messages */
.nav .cta,
.mnav .cta {
  background: rgba(10, 132, 255, 0.12) !important;
  color: var(--blue) !important;
  border-color: rgba(10, 132, 255, 0.25) !important;
}
.nav .cta .ic {
  color: var(--blue) !important;
}
.nav .cta:hover,
.mnav .cta:hover {
  background: rgba(10, 132, 255, 0.2) !important;
}
body[data-app="chat"] .nav .cta,
body[data-app="chat"] .mnav .cta {
  background: rgba(0, 168, 132, 0.12) !important;
  color: #008f70 !important;
  border-color: rgba(0, 168, 132, 0.25) !important;
}
body[data-app="chat"] .nav .cta .ic {
  color: #008f70 !important;
}
body[data-app="chat"] .nav .cta:hover {
  background: rgba(0, 168, 132, 0.2) !important;
}
/* the app header is the rail's counterpart of the search row: same 68px height, hairline on the same line */
.nav .apphead {
  height: 60px !important;
  box-sizing: border-box !important;
  padding: 0 1.1rem !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 0 0.35rem !important;
  display: flex;
  align-items: center;
} /* the rail has 8px of top padding the list does not: 60 + 8 = the search row's 68, so both hairlines land on one line */
/* ── popups like Stripe: a light frosted page behind, one tall card, and the page scrolls — never the card ── */
.sheet.on {
  display: block !important;
  overflow: auto !important;
  padding: 104px 16px 96px !important;
  background: rgba(248, 249, 252, 0.48) !important;
  -webkit-backdrop-filter: blur(16px) saturate(1.15) brightness(1.04);
  backdrop-filter: blur(16px) saturate(1.15) brightness(1.04);
  overscroll-behavior: contain;
}
html[data-sup-mode="dark"] .sheet.on {
  background: rgba(8, 10, 18, 0.62) !important;
}
.sheet .box {
  margin: 0 auto !important;
  max-height: none !important;
  overflow: visible !important;
  border: 0 !important;
  border-radius: 22px !important;
  background: var(--sheet-bg) !important;
  box-shadow:
    0 30px 80px rgba(0, 0, 0, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
  padding: 2.6rem 2.4rem 2.2rem !important;
}
.sheet .box .ash {
  padding-top: 0.6rem !important;
  padding-bottom: 1.6rem !important;
}
@media (max-width: 900px) {
  .sheet.on {
    padding: 12px 0 0 !important;
  }
  .sheet .box {
    border-radius: 22px 22px 0 0 !important;
    min-height: calc(100dvh - 12px);
    padding: 1.2rem 1.1rem !important;
  }
}
/* ── reading pane, the Apple Mail way: icon-only round tools, a quiet title block, a card with a header rule ── */
.conv.mail .head.mailhead #movef {
  display: none !important;
}
.conv.mail .head .acts .btn .lbl {
  display: none !important;
}
.conv.mail .head .acts .btn {
  width: 34px !important;
  height: 34px !important;
  flex: none !important;
  margin: 0 !important;
}
.conv.mail .head .acts {
  gap: 0.45rem !important;
  align-items: center;
}
.conv.mail .head .acts .archmore {
  width: 22px !important;
  height: 34px !important;
  border-radius: 8px !important;
  font-size: 0.7rem;
}
.conv.mail .head.mailhead #back {
  width: 34px;
  height: 34px;
  border-radius: 50% !important;
  border: 0 !important;
  background: var(--act-bg) !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
  margin-top: 0.15rem;
}
.conv.mail .head .ct .title {
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.015em;
}
.conv.mail .head .ct .sub {
  font-size: 0.88rem;
  color: var(--t3);
  margin-top: 0.15rem;
}
.mcard {
  border-radius: 16px !important;
  padding: 1.15rem 1.3rem 1.1rem !important;
}
.mcard .mhead {
  padding-bottom: 0 !important;
  border-bottom: 0 !important;
  margin-bottom: 0.2rem !important;
}
.mcard .from b {
  font-size: 1.02rem !important;
  font-weight: 700 !important;
}
.mcard .addr {
  color: var(--t3) !important;
  font-size: 0.9rem !important;
}
.mcard .mhead .when {
  font-size: 0.86rem !important;
  color: var(--t3) !important;
}
.mcard .sig {
  font-size: 0.7rem !important;
  letter-spacing: 0.04em;
}
.mcard .toline {
  font-size: 0.9rem !important;
  color: var(--t3) !important;
  margin: 0.3rem 0 0.95rem !important;
  padding-bottom: 0.75rem !important;
  border-bottom: 1px solid var(--hair) !important;
}
.mcard .toline b {
  font-weight: 500;
  color: var(--t3);
}
.mcard .msubj {
  font-weight: 700 !important;
  font-size: 1.05rem !important;
  margin: 0.1rem 0 0.7rem !important;
}
/* master-console tint over the wallpaper (per mode) */
#wallpaper::before {
  content: "";
  position: absolute;
  inset: 0;
  background: var(--wall-overlay, transparent);
  pointer-events: none;
  z-index: 1;
  -webkit-backdrop-filter: blur(var(--wall-blur, 0px));
  backdrop-filter: blur(var(--wall-blur, 0px));
} /* blur set in the master console softens the picture or video underneath */
#wallpaper video {
  z-index: 0;
}
/* header: the subject alone; every tool a grey circle with a line icon (Apple Mail); Smart archive lives under a long-press of Archive */
.conv.mail .head .ct .sub {
  display: none !important;
}
.conv.mail .head.mailhead {
  align-items: center !important;
  padding: 0.85rem 1.4rem !important;
}
.conv.mail .head .acts .archmore {
  display: none !important;
}
.conv.mail .head .acts #spam {
  color: var(--act-fg) !important;
}
.conv.mail .head .acts #spam:hover {
  color: #ff3b30 !important;
}
.conv.mail .head .acts #unsub {
  width: 34px !important;
  padding: 0 !important;
  font-size: 0;
}
.conv.mail .head .acts .btn .ic {
  width: 18px;
  height: 18px;
  stroke-width: 1.5;
}
/* ── Calendar, the Apple way, in Mail's two-pane frame: a floating rail (app header, New Event, calendars, mini month) and a main pane (search pill, title + controls, grid) ── */
.conv.calapp {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.conv.calapp .calwrap {
  display: grid !important;
  grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px;
  height: 100% !important;
  padding: 10px;
  box-sizing: border-box;
} /* the shell already gives 1px; 10 + 1 = Mail's 11px gutter, 10px between panes */
.calrail,
.calmain {
  background: var(--pane-bg) !important;
  border: 0.5px solid var(--hair) !important;
  border-radius: 14px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
html[data-sup-mode="light"] .calrail {
  background: rgba(255, 255, 255, 0.9) !important;
}
html[data-sup-mode="light"] .calmain {
  background: rgba(255, 255, 255, 0.86) !important;
}
.calrail {
  display: flex;
  flex-direction: column;
  padding: 0 !important;
  border-right: 0.5px solid var(--hair) !important;
}
.calrail .apphead {
  height: 68px !important;
  box-sizing: border-box;
  padding: 0 1.1rem !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 0 0.35rem !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.calrail .apphead .appic {
  margin: 0;
  width: 42px;
  height: 42px;
}
.appic.cal,
body.calmode .appic.cal {
  background: #ff3b30 !important;
  box-shadow:
    0 0 0 2px #fff,
    0 0 0 3.5px rgba(0, 0, 0, 0.28),
    0 4px 12px rgba(0, 0, 0, 0.15) !important;
}
.calrail .apphead .appname {
  font-size: 1.15rem;
  letter-spacing: -0.01em;
  color: var(--text);
}
.calrail .apphead .appname b {
  font-weight: 800;
}
.calrail .calcta {
  margin: 0.5rem 14px 0.6rem !important;
  width: calc(100% - 28px) !important;
  background: rgba(255, 59, 48, 0.12) !important;
  color: #d0302a !important;
  border: 1px solid rgba(255, 59, 48, 0.25) !important;
  border-radius: 12px !important;
  height: 44px;
}
.calrail .calcta:hover {
  background: rgba(255, 59, 48, 0.2) !important;
}
.calrail .calcta .ic {
  color: #d0302a !important;
}
.calrail .sect {
  font-family: var(--sans) !important;
  font-size: 0.72rem !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--t3) !important;
  padding: 0.6rem 1.1rem 0.3rem !important;
}
.callist .calrow {
  padding: 0.35rem 1.1rem !important;
  border-radius: 10px;
  margin: 0 6px;
  font-size: 0.92rem !important;
}
.callist .calrow:hover {
  background: rgba(120, 120, 128, 0.1) !important;
}
.calrow input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 16px;
  height: 16px;
  border-radius: 5px;
  border: 2px solid var(--c, #0a84ff);
  background: transparent;
  position: relative;
  cursor: pointer;
  flex: none;
}
.calrow input[type="checkbox"]:checked {
  background: var(--c, #0a84ff);
}
.calrow input[type="checkbox"]:checked::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.calrow .sw {
  display: none !important;
}
.calrail .mini {
  margin-top: auto !important;
  border-top: 1px solid var(--hair) !important;
  padding: 0.8rem 1rem 1rem !important;
}
.mini .mhd {
  font-size: 0.9rem !important;
}
.mini .mhd b {
  font-weight: 600;
}
.mgrid > span {
  font-family: var(--sans) !important;
  font-size: 0.7rem !important;
  font-weight: 600;
  color: var(--t3);
}
.md {
  font-size: 0.82rem !important;
  color: var(--text) !important;
  border-radius: 50% !important;
}
.md.other {
  opacity: 0.35 !important;
}
.md.today {
  background: #ff3b30 !important;
  color: #fff !important;
  font-weight: 600;
}
.md.sel:not(.today) {
  background: rgba(120, 120, 128, 0.18) !important;
}
.md i {
  background: var(--t3) !important;
}
.calmain {
  display: flex;
  flex-direction: column;
}
.calmain .calsearch {
  height: 68px !important;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0.6rem 1.2rem !important;
  border-bottom: 1px solid var(--hair) !important;
  background: transparent !important;
}
.calmain .calsearch .inwrap {
  position: relative;
  display: flex;
  align-items: center;
  width: 100%;
  max-width: none;
}
.calmain .calsearch .in {
  width: 100% !important;
  height: 44px;
  border-radius: 999px !important;
  border: 0 !important;
  background: var(--search-bg) !important;
  color: var(--search-fg) !important;
  padding: 0 1rem 0 2.5rem !important;
  font-size: 1rem !important;
}
.calmain .calsearch .inwrap .sic {
  position: absolute;
  left: 0.95rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--search-ph);
  display: inline-flex;
  pointer-events: none;
}
.calmain .calsearch .inwrap .sic .ic {
  width: 18px;
  height: 18px;
}
.calmain .caltop {
  height: 64px !important;
  padding: 0 1.2rem !important;
  border-bottom: 1px solid var(--hair) !important;
  display: flex;
  align-items: center;
  justify-content: space-between;
}
.caltitle {
  font-size: 1.5rem !important;
  font-weight: 800 !important;
  letter-spacing: -0.02em;
  margin: 0 !important;
}
.caltop .seg {
  border: 0 !important;
  background: rgba(120, 120, 128, 0.14) !important;
  border-radius: 9px;
  padding: 2px;
  gap: 2px;
}
.caltop .seg button {
  border-radius: 7px !important;
  padding: 0.32rem 0.8rem !important;
  font-size: 0.85rem !important;
  font-weight: 500;
  color: var(--text) !important;
}
.caltop .seg button.on {
  background: var(--pane-bg, #fff) !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.14);
}
.caltop .navpair {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  margin-left: 0.6rem;
}
.caltop .navpair .btn {
  height: 32px !important;
  border-radius: 8px !important;
  padding: 0 0.6rem !important;
  background: transparent !important;
  border: 0 !important;
  color: var(--text) !important;
  font-weight: 500;
}
.caltop .navpair .btn:hover {
  background: rgba(120, 120, 128, 0.14) !important;
}
.caltop .navpair .btn .ic {
  width: 16px;
  height: 16px;
}
.caltop .calplus {
  width: 34px !important;
  height: 34px !important;
  border-radius: 50% !important;
  background: #ff3b30 !important;
  color: #fff !important;
  border: 0 !important;
  padding: 0 !important;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  margin-left: 0.6rem;
}
.caltop .calplus .ic {
  width: 16px;
  height: 16px;
}
/* month grid */
.month .mhead {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  padding: 0.35rem 0;
  border-bottom: 1px solid var(--hair);
}
.month .mhead span {
  text-align: right;
  padding-right: 0.6rem;
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--t3);
}
.mcell {
  border-right: 1px solid var(--hair) !important;
  border-bottom: 1px solid var(--hair) !important;
  padding: 0.35rem 0.4rem !important;
  font-size: 0.8rem !important;
  background: transparent !important;
}
.mcell.odd {
  background: rgba(120, 120, 128, 0.05) !important;
}
.mcell .dn {
  justify-content: flex-end;
  color: var(--text) !important;
  font-size: 0.82rem !important;
  font-weight: 500;
  margin-bottom: 0.25rem !important;
}
.mcell .dn span {
  display: inline-grid;
  place-items: center;
  min-width: 24px;
  height: 24px;
  border-radius: 50%;
  padding: 0 0.3rem;
}
.mcell.today .dn span {
  background: #ff3b30 !important;
  color: #fff !important;
  font-weight: 700;
}
.evchip {
  border-left: 0 !important;
  background: transparent !important;
  color: var(--text) !important;
  border-radius: 6px;
  padding: 0.12rem 0.4rem !important;
  gap: 0.35rem !important;
  align-items: center !important;
  font-size: 0.78rem !important;
}
.evchip::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--c);
  flex: none;
}
.evchip:hover {
  background: rgba(120, 120, 128, 0.12) !important;
}
.evchip .t {
  font-family: var(--sans) !important;
  font-size: 0.74rem !important;
  color: var(--t3) !important;
  order: 2;
  margin-left: auto;
}
.evchip .s {
  font-weight: 500;
}
.evchip.allday,
.evchip.long {
  background: var(--c) !important;
  color: #fff !important;
  border-radius: 6px;
}
.evchip.allday::before,
.evchip.long::before {
  display: none;
}
.evchip.allday .t,
.evchip.long .t {
  color: rgba(255, 255, 255, 0.85) !important;
}
.mcell .more {
  color: var(--t3) !important;
  font-size: 0.74rem !important;
  padding-left: 0.4rem;
}
/* week / day */
.week .whead .wd {
  padding: 0.5rem 0 0.4rem;
  text-align: center;
}
.week .whead .dow {
  display: block;
  font-size: 0.72rem;
  font-weight: 600;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.week .whead .num {
  display: inline-grid;
  place-items: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  font-size: 1.05rem;
  font-weight: 600;
  margin-top: 0.15rem;
}
.week .whead .wd.today .num {
  background: #ff3b30;
  color: #fff;
}
.week .gutter .hr {
  font-size: 0.72rem;
  color: var(--t3);
  font-family: var(--sans) !important;
}
.week .wcol .slot {
  border-bottom: 1px solid var(--hair) !important;
  border-right: 1px solid var(--hair) !important;
}
.week .wcol.today {
  background: rgba(255, 59, 48, 0.03);
}
.evblk {
  border-radius: 8px !important;
  background: color-mix(in srgb, var(--c) 22%, var(--pane-bg, #fff)) !important;
  border: 0 !important;
  border-left: 3px solid var(--c) !important;
  color: var(--text) !important;
  padding: 0.25rem 0.5rem !important;
}
.evblk b {
  font-weight: 600;
  font-size: 0.8rem;
}
.evblk span {
  font-size: 0.72rem;
  color: var(--t2);
}
.week .now {
  background: #ff3b30 !important;
  height: 2px;
}
.week .now::before {
  content: "";
  position: absolute;
  left: -5px;
  top: -4px;
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: #ff3b30;
}
.allday {
  border-bottom: 1px solid var(--hair) !important;
}
.allday .gutter {
  font-size: 0.7rem !important;
}
/* the window mesh in reds while the calendar is open (light) */

body.calmode #wallpaper {
  filter: hue-rotate(120deg) saturate(1.05) !important;
}
body.calmode #shell .e2e {
  display: none !important;
}
.month .mhead span,
.week .whead .dow {
  font-family: var(--sans) !important;
}
.mini .mhd .btn {
  width: 26px !important;
  height: 26px !important;
  border-radius: 50% !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: var(--t2) !important;
}
.mini .mhd .btn:hover {
  background: rgba(120, 120, 128, 0.14) !important;
}
.mini .mhd .btn .ic {
  width: 14px;
  height: 14px;
}
/* the window container, when the master console sets a colour for the mode: its colour × opacity, and its own blur of what lies behind */
html.winbg.winbg.winbg body #shell.on {
  background: var(--win-bg-custom) !important;
  -webkit-backdrop-filter: blur(var(--win-blur-custom, 0px)) saturate(1.2);
  backdrop-filter: blur(var(--win-blur-custom, 0px)) saturate(1.2);
}
/* ── the app's accent (master console may override) drives the light-mode window mesh, the tile, the New button ── */
body[data-app="mail"] {
  --mesh-c: var(--app-mail, #0a84ff);
}
body[data-app="chat"] {
  --mesh-c: var(--app-chat, #00a884);
}
body.calmode {
  --mesh-c: var(--app-cal, #ff3b30);
}
html[data-sup-mode="light"] body[data-app] #shell.on {
  background:
    radial-gradient(
      70% 70% at 0% 100%,
      color-mix(in srgb, var(--mesh-c) 62%, transparent),
      color-mix(in srgb, var(--mesh-c) 22%, transparent) 45%,
      transparent 72%
    ),
    radial-gradient(60% 60% at 100% 100%, color-mix(in srgb, var(--mesh-c) 55%, #fff), transparent 70%),
    radial-gradient(50% 45% at 100% 0%, color-mix(in srgb, var(--mesh-c) 24%, transparent), transparent 60%),
    radial-gradient(40% 40% at 0% 0%, color-mix(in srgb, var(--mesh-c) 22%, #fff), transparent 60%),
    radial-gradient(45% 40% at 40% 0%, rgba(255, 255, 255, 0.9), transparent 60%),
    color-mix(in srgb, var(--mesh-c) 4%, #f4f5f9) !important;
}
.appic,
body[data-app="mail"] .appic {
  background: var(--app-mail, #0a84ff) !important;
}
body[data-app="chat"] .appic {
  background: var(--app-chat, #00a884) !important;
}
.appic.cal,
body.calmode .appic.cal {
  background: var(--app-cal, #ff3b30) !important;
}
.nav .cta,
.mnav .cta {
  background: color-mix(in srgb, var(--app-mail, #0a84ff) 12%, transparent) !important;
  color: var(--app-mail, #0a84ff) !important;
  border-color: color-mix(in srgb, var(--app-mail, #0a84ff) 25%, transparent) !important;
}
.nav .cta .ic {
  color: var(--app-mail, #0a84ff) !important;
}
body[data-app="chat"] .nav .cta,
body[data-app="chat"] .mnav .cta {
  background: color-mix(in srgb, var(--app-chat, #00a884) 12%, transparent) !important;
  color: var(--app-chat, #00a884) !important;
  border-color: color-mix(in srgb, var(--app-chat, #00a884) 25%, transparent) !important;
}
body[data-app="chat"] .nav .cta .ic {
  color: var(--app-chat, #00a884) !important;
}
.calrail .calcta {
  background: color-mix(in srgb, var(--app-cal, #ff3b30) 12%, transparent) !important;
  color: var(--app-cal, #ff3b30) !important;
  border-color: color-mix(in srgb, var(--app-cal, #ff3b30) 25%, transparent) !important;
}
.calrail .calcta .ic {
  color: var(--app-cal, #ff3b30) !important;
}
.caltop .calplus {
  background: var(--app-cal, #ff3b30) !important;
}
/* the panels inside the window, when the master console sets a colour for the mode */
html.panebg.panebg.panebg body #shell.on .nav,
html.panebg.panebg.panebg body #shell.on .list,
html.panebg.panebg.panebg body #shell.on .conv:not(.calapp),
html.panebg.panebg.panebg body .calrail,
html.panebg.panebg.panebg body .calmain {
  background: var(--pane-bg-custom) !important;
  -webkit-backdrop-filter: blur(var(--pane-blur-custom, 0px)) saturate(1.2);
  backdrop-filter: blur(var(--pane-blur-custom, 0px)) saturate(1.2);
}
/* a light-mode wallpaper (image or video) sits on a light base while it loads or if it fails, never on the navy one */
html[data-sup-mode="light"] #wallpaper {
  background-color: #f2f2f7 !important;
}
html[data-sup-mode="light"] #wallpaper::after {
  display: none !important;
}
/* ── phones ── */
.calrail-toggle {
  display: none;
}
@media (max-width: 900px) {
  /* reading pane: back + subject on one row, the round tools on a scrollable row beneath; card header wraps */
  .conv.mail .head.mailhead {
    flex-wrap: wrap !important;
    padding: 0.55rem 0.9rem 0.5rem !important;
    gap: 0.4rem 0.6rem !important;
    align-items: center !important;
    height: auto !important;
    min-height: 0 !important;
    overflow: visible !important;
  }
  .conv.mail .head.mailhead #back {
    order: 1;
  }
  .conv.mail .head .ct {
    order: 2;
    flex: 1 1 calc(100% - 60px) !important;
    min-width: 0 !important;
  }
  .conv.mail .head .ct .title {
    font-size: 1.05rem !important;
    white-space: nowrap !important;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .conv.mail .head .acts {
    order: 3;
    flex: 1 1 100% !important;
    justify-content: flex-start !important;
    overflow-x: auto;
    scrollbar-width: none;
    padding: 0.15rem 0 0.1rem;
    gap: 0.4rem !important;
  }
  .conv.mail .head .acts::-webkit-scrollbar {
    display: none;
  }
  .mcard {
    padding: 0.9rem 0.95rem 0.85rem !important;
    border-radius: 14px !important;
  }
  .mcard .mhead {
    flex-wrap: wrap !important;
  }
  .mcard .mh-l {
    flex: 1 1 100% !important;
    min-width: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 0.15rem 0.5rem;
    align-items: baseline;
  }
  .mcard .from b {
    font-size: 0.98rem !important;
  }
  .mcard .mh-l .addr {
    display: inline !important;
    font-size: 0.82rem !important;
  }
  .mcard .mhead .when {
    flex: 1 1 100% !important;
    order: 3;
    font-size: 0.76rem !important;
    margin-top: 0.15rem;
    display: flex;
    gap: 0.5rem;
    align-items: center;
    justify-content: flex-start !important;
  }
  .mcard .toline {
    font-size: 0.84rem !important;
  }
  /* category chips scroll sideways, never clip */
  .list .cats,
  .list .chips {
    overflow-x: auto !important;
    scrollbar-width: none;
    flex-wrap: nowrap !important;
    padding-bottom: 2px;
  }
  .list .cats::-webkit-scrollbar,
  .list .chips::-webkit-scrollbar {
    display: none;
  }
  /* calendar: one pane; the rail folds into a header strip that opens on tap; + floats bottom-right */
  .conv.calapp .calwrap {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto minmax(0, 1fr) !important;
    gap: 8px !important;
    padding: 8px !important;
  }
  .calrail {
    order: 0;
    overflow: visible !important;
  }
  .calrail .apphead {
    height: 56px !important;
    border-bottom: 0 !important;
    margin: 0 !important;
    padding: 0 0.9rem !important;
  }
  .calrail .apphead .appic {
    width: 36px;
    height: 36px;
  }
  .calrail .apphead .appname {
    font-size: 1.05rem;
  }
  .calrail-toggle {
    display: inline-flex !important;
    margin-left: auto;
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    padding: 0 !important;
    border: 0 !important;
    background: rgba(120, 120, 128, 0.14) !important;
    color: var(--text) !important;
    align-items: center;
    justify-content: center;
    font-size: 0.9rem;
  }
  .calrail .calcta,
  .calrail .callist,
  .calrail .mini {
    display: none !important;
  }
  .calrail.open .callist {
    display: block !important;
    padding-bottom: 0.4rem;
  }
  .calrail.open .calcta {
    display: flex !important;
  }
  .calmain {
    order: 1;
    min-height: 0;
  }
  .calmain .calsearch {
    height: 56px !important;
    padding: 0.45rem 0.8rem !important;
  }
  .calmain .calsearch .in {
    height: 40px !important;
    font-size: 0.95rem !important;
  }
  .calmain .caltop {
    height: auto !important;
    flex-wrap: wrap;
    padding: 0.5rem 0.8rem !important;
    gap: 0.4rem;
  }
  .calmain .caltop .ctl:first-child {
    flex: 1 1 100%;
  }
  .caltitle {
    font-size: 1.2rem !important;
  }
  .caltop .navpair {
    margin-left: auto;
  }
  .caltop .navpair .btn {
    padding: 0 0.45rem !important;
  }
  .caltop .seg button {
    padding: 0.3rem 0.55rem !important;
    font-size: 0.8rem !important;
  }
  .caltop .calplus {
    position: fixed !important;
    right: 18px;
    bottom: 22px;
    width: 52px !important;
    height: 52px !important;
    z-index: 40;
    box-shadow: 0 8px 24px rgba(255, 59, 48, 0.35) !important;
    margin: 0 !important;
  }
  .caltop .calplus .ic {
    width: 22px;
    height: 22px;
  }
  .mrow {
    height: var(--rowh, 128px);
  }
  .mbody {
    --rowh: 76px !important;
  }
  .mcell {
    padding: 0.15rem 0.15rem !important;
    font-size: 0.66rem !important;
  }
  .mcell .dn {
    font-size: 0.72rem !important;
    margin-bottom: 0.1rem !important;
  }
  .mcell .dn span {
    min-width: 20px;
    height: 20px;
  }
  .evchip {
    padding: 0.05rem 0.25rem !important;
    font-size: 0.66rem !important;
    gap: 0.2rem !important;
  }
  .evchip .t {
    display: none !important;
  }
  .evchip::before {
    width: 5px;
    height: 5px;
  }
  .mcell .more {
    font-size: 0.62rem !important;
  }
  .month .mhead span {
    font-size: 0.66rem;
    padding-right: 0.3rem;
  }
  .week .whead .num {
    width: 26px;
    height: 26px;
    font-size: 0.9rem;
  }
  .week .gutter .hr {
    font-size: 0.62rem;
  }
}
/* ── phones, reading a message the Gmail way: no site header, back + subject up top, big Reply / Reply all / Forward pinned to the bottom ── */
@media (max-width: 900px) {
  html:has(#shell.conv-open:not(.home):not(.master)) body[data-app="mail"] .top {
    display: none !important;
  }
  html:has(#shell.conv-open:not(.home):not(.master)) body[data-app="mail"] #shell.on {
    margin-top: 0 !important;
    height: 100dvh !important;
    border-radius: 0 !important;
  }
  .conv.mail #msgs {
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .conv.mail .quick {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 60;
    display: flex !important;
    gap: 0.6rem;
    padding: 0.7rem 0.9rem calc(0.7rem + env(safe-area-inset-bottom)) !important;
    margin: 0 !important;
    background: var(--pane-bg) !important;
    border-top: 1px solid var(--hair) !important;
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
  }
  html[data-sup-mode="light"] .conv.mail .quick {
    background: rgba(255, 255, 255, 0.9) !important;
  }
  .conv.mail .quick .btn {
    flex: 1;
    justify-content: center;
    height: 46px;
    border-radius: 999px !important;
    font-size: 0.95rem;
    font-weight: 600;
    border: 1px solid var(--hair) !important;
    background: transparent !important;
    color: var(--text) !important;
    padding: 0 0.6rem !important;
  }
  .conv.mail .quick .btn .ic {
    width: 18px;
    height: 18px;
    margin-right: 0.35rem;
  }
  .conv.mail .mcard .mact [data-reply],
  .conv.mail .mcard .mact [data-replyall],
  .conv.mail .mcard .mact [data-fwd] {
    display: none !important;
  }
}
/* phones: Gmail's reading header — a plain icon row (back left, tools right), then the subject big and wrapping; the message itself flat and full width */
@media (max-width: 900px) {
  .conv.mail .head.mailhead {
    padding: 0.35rem 0.6rem 0.7rem !important;
    gap: 0.2rem 0.4rem !important;
    border-bottom: 0 !important;
  }
  .conv.mail .head.mailhead #back {
    order: 1;
    background: transparent !important;
    width: 40px;
    height: 40px;
  }
  .conv.mail .head .acts {
    order: 2 !important;
    flex: 1 1 auto !important;
    justify-content: flex-end !important;
    padding: 0 !important;
    gap: 0.15rem !important;
  }
  .conv.mail .head .acts .btn {
    background: transparent !important;
    width: 40px !important;
    height: 40px !important;
  }
  .conv.mail .head .acts .btn .ic {
    width: 21px;
    height: 21px;
  }
  .conv.mail .head .ct {
    order: 3 !important;
    flex: 1 1 100% !important;
    padding: 0.35rem 0.35rem 0;
  }
  .conv.mail .head .ct .title {
    font-size: 1.45rem !important;
    font-weight: 600 !important;
    line-height: 1.22 !important;
    white-space: normal !important;
    overflow: visible !important;
    letter-spacing: -0.02em;
  }
  .conv.mail #msgs {
    padding: 0 0.6rem !important;
    padding-bottom: calc(84px + env(safe-area-inset-bottom)) !important;
  }
  .mcard {
    border: 0 !important;
    box-shadow: none !important;
    border-radius: 0 !important;
    padding: 0.6rem 0.35rem 0.4rem !important;
    background: transparent !important;
  }
  .mcard .toline {
    border-bottom: 0 !important;
    margin-bottom: 0.6rem !important;
    padding-bottom: 0 !important;
  }
  .mcard .mbody {
    overflow: visible !important;
  }
  .mcard .body {
    white-space: pre-wrap !important;
    overflow-wrap: anywhere !important;
    word-break: normal !important;
  }
}
/* ── phones, the inbox the iOS Mail way: dot · bold name · date › on one line, subject, a two-line preview; no avatars; grey card while swiping ── */
@media (max-width: 900px) {
  #list .trow.icloud {
    grid-template-columns: minmax(0, 1fr) auto !important;
    padding: 0.75rem 1rem 0.75rem 1.6rem !important;
    gap: 0 0.4rem !important;
  }
  #list .trow.icloud .pav,
  #list .trow.icloud .rply {
    display: none !important;
  }
  #list .trow.icloud .who {
    font-size: 1.02rem !important;
    align-items: center !important;
  }
  #list .trow.icloud .who .when {
    font-size: 0.9rem !important;
    color: var(--t3) !important;
    display: inline-flex;
    align-items: center;
    gap: 0.25rem;
  }
  #list .trow.icloud .who .when::after {
    content: "›";
    font-size: 1.25rem;
    line-height: 1;
    color: #c7c7cc;
    font-weight: 400;
  }
  #list .trow.icloud .subj {
    font-size: 0.95rem !important;
    font-weight: 400 !important;
    margin-top: 0.05rem !important;
  }
  #list .trow.icloud .snippet {
    white-space: normal !important;
    display: -webkit-box !important;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    font-size: 0.9rem !important;
    line-height: 1.35;
    color: var(--t3) !important;
    margin-top: 0.1rem;
  }
  #list .trow.icloud.unread::before {
    left: 0.55rem;
    top: 1.05rem;
    width: 10px;
    height: 10px;
  }
  #list .trow.icloud .star {
    align-self: start;
    margin-top: 0.1rem;
  }
  .listhead .lh-title,
  .list .head .title {
    font-size: 2rem !important;
    font-weight: 800 !important;
    letter-spacing: -0.03em;
  }
}
/* ── phones, reply like Gmail: a card that slides up over the message, × in a grey circle, bare tool icons on the right, "↩ ▾ Name", From and Subject rows, the quoted mail open under the body ── */
@media (max-width: 900px) {
  .composer.gsheet {
    top: auto !important;
    bottom: 0 !important;
    height: calc(100dvh - 40px - env(safe-area-inset-top)) !important;
    max-height: none !important;
    border-radius: 18px 18px 0 0 !important;
    box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.28) !important;
    animation: gsheet 0.34s cubic-bezier(0.2, 0.85, 0.25, 1);
  }
  @keyframes gsheet {
    from {
      transform: translateY(100%);
    }
    to {
      transform: none;
    }
  }
  body:has(#composer.gsheet.on)::before {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 59;
  }
  body:has(#composer.on) .quick {
    display: none !important;
  }
  .composer.gsheet .chead {
    display: flex !important;
    justify-content: space-between;
    align-items: center;
    padding: 0.8rem 1rem 0.6rem !important;
    background: transparent !important;
  }
  .composer.gsheet .chead > span:first-child {
    display: none;
  }
  .composer.gsheet #c-close {
    width: 40px !important;
    height: 40px !important;
    border-radius: 50% !important;
    background: #e9eaee !important;
    color: #555 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    padding: 0 !important;
  }
  .composer.gsheet #c-close .lbl {
    display: none !important;
  }
  .composer.gsheet .gtools {
    display: flex;
    align-items: center;
    gap: 1.35rem;
    padding-right: 0.15rem;
  }
  .composer.gsheet .gtools .btn,
  .composer.gsheet .gtools .iconb,
  .composer.gsheet .gtools label.btn {
    background: none !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    color: #222 !important;
    font-size: 0 !important;
    width: auto !important;
    height: auto !important;
    border-radius: 0 !important;
    display: inline-flex !important;
    align-items: center;
  }
  .composer.gsheet .gtools svg {
    width: 24px;
    height: 24px;
  }
  .composer.gsheet .gtools #c-sendtop {
    color: #222 !important;
  }
  .composer.gsheet .cbody {
    padding: 0 1rem !important;
  }
  .composer.gsheet .gto {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    min-height: 3.2rem;
    border-bottom: 1px solid var(--hair);
    font-size: 1.05rem;
    color: var(--text);
  }
  .composer.gsheet .gto svg {
    width: 22px;
    height: 22px;
    color: #333;
  }
  .composer.gsheet .gto .caret {
    font-size: 0.75rem;
    color: #333;
  }
  .composer.gsheet .gto .gnames {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .composer.gsheet .gcoll {
    display: none !important;
  }
  .composer.gsheet.gexp .gcoll {
    display: flex !important;
  }
  .composer.gsheet .crow {
    min-height: 3.2rem;
    border-bottom: 1px solid var(--hair) !important;
    padding: 0.35rem 0 !important;
  }
  .composer.gsheet .crow label {
    font-size: 1.02rem !important;
    color: var(--t3) !important;
    min-width: 3.4rem;
  }
  .composer.gsheet .gfrom .gaddr,
  .composer.gsheet #c-from {
    font-size: 1.02rem;
    color: var(--text);
    text-decoration: underline;
    text-decoration-color: #9a9a9a;
    text-underline-offset: 3px;
    -webkit-appearance: none;
    appearance: none;
    background: none;
    border: 0;
  }
  .composer.gsheet .crow:has(#c-subj) label {
    display: none;
  }
  .composer.gsheet #c-subj {
    font-size: 1.02rem !important;
    padding: 0.35rem 0 !important;
  }
  .composer.gsheet .ctext {
    flex: 0 0 auto !important;
    min-height: 7rem !important;
    padding: 0.9rem 0 0.4rem !important;
    font-size: 1.05rem !important;
  }
  .composer.gsheet .crow label::after {
    content: none !important;
  }
  .composer.gsheet details.quote {
    margin: 0.2rem 0 1.2rem !important;
    color: var(--text) !important;
    font-size: 1.02rem;
  }
  .composer.gsheet details.quote summary {
    display: none;
  }
  .composer.gsheet details.quote pre {
    max-height: none !important;
    overflow: visible !important;
    margin: 0 !important;
    color: var(--text) !important;
    border-left: 2px solid #cfcfd4;
    padding-left: 0.7rem;
    line-height: 1.45;
  }
  .composer.gsheet .cfoot {
    display: none !important;
    flex-wrap: wrap;
    gap: 0.5rem !important;
    border-top: 1px solid var(--hair) !important;
  }
  .composer.gsheet.tools .cfoot {
    display: flex !important;
  }
  .composer.gsheet .cfoot .btn,
  .composer.gsheet .cfoot label.btn {
    background: #f1f2f5 !important;
    border: 0 !important;
    border-radius: 999px !important;
    padding: 0.5rem 0.9rem !important;
    color: var(--text) !important;
    box-shadow: none !important;
    font-size: 0.92rem !important;
  }
}
/* ── phones, the header the Gmail way: no site bar; the Ask pill carries the menu (left) and your avatar (right), the sparkle sits beside it; the sidebar slides in as a drawer ── */
.ai-hello {
  font-size: 1.65rem;
  font-weight: 500;
  letter-spacing: -0.02em;
  background: linear-gradient(90deg, #1a73e8, #7b61ff 60%, #b06ad0);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  margin: 0.3rem 0 0.9rem;
}
.ai-ask {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1.2rem;
}
.ai-ask .in {
  flex: 1;
  height: 3rem;
  border-radius: 999px !important;
  padding: 0 1.1rem !important;
  background: var(--search-bg) !important;
  border: 0 !important;
  font-size: 1.02rem;
}
.ai-ask .btn {
  width: 3rem;
  height: 3rem;
  border-radius: 50% !important;
  padding: 0 !important;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
@media (max-width: 900px) {
  html:has(#shell:not(.master):not(.home)) body[data-app] .top {
    display: none !important;
  }
  html:has(#shell:not(.master):not(.home)) body[data-app] {
    --h: 0px;
  }
  .list .search {
    display: flex;
    gap: 0.35rem;
    align-items: center;
    padding: calc(0.55rem + env(safe-area-inset-top)) 0.75rem 0.5rem !important;
    border-bottom: 0 !important;
  }
  #list .trow.icloud .sel {
    display: none !important;
  }
  .list .search .inwrap {
    flex: 1;
    position: relative;
    min-width: 0;
  }
  .list .search .in {
    background-image: none !important;
    padding-left: 3.4rem !important;
    padding-right: 6.2rem !important;
    height: 3.3rem !important;
    border-radius: 999px !important;
    background-color: #e9eef6 !important;
  }
  .list .search .in:focus {
    background-color: #eef2f8 !important;
    box-shadow: none !important;
  }
  .sp-ham {
    position: absolute;
    left: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.5rem;
    height: 2.5rem;
    border: 0;
    background: none;
    color: #3c4043;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    z-index: 2;
  }
  .sp-acct {
    width: 34px;
    height: 34px;
    border-radius: 50%;
    overflow: hidden;
    border: 0;
    padding: 0;
    background: var(--blue);
    color: #fff;
    font-weight: 700;
    font-size: 0.95rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    margin-left: 0.2rem;
  }
  .sp-acct img {
    width: 100%;
    height: 100%;
    object-fit: cover;
    display: block;
  }
  .sp-ai.out {
    border: 0;
    background: none;
    color: #1a1a1a;
    width: 2.7rem;
    height: 2.7rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    padding: 0;
  }
  .sp-ai.out svg {
    width: 24px;
    height: 24px;
  }
  .sp-apps.out {
    margin-left: -0.15rem;
  }
  .sp-apps.out svg {
    width: 20px;
    height: 20px;
    opacity: 0.85;
  }
  .nav.open {
    display: flex !important;
    flex-direction: column;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    bottom: 0 !important;
    width: min(330px, 84vw) !important;
    height: auto !important;
    z-index: 70 !important;
    background: #fff !important;
    border-radius: 0 22px 22px 0;
    box-shadow: 0 0 44px rgba(0, 0, 0, 0.28) !important;
    padding-top: calc(env(safe-area-inset-top) + 1.2rem) !important;
    overflow: auto;
    animation: drawer 0.28s cubic-bezier(0.2, 0.8, 0.2, 1);
    border-right: 0 !important;
  }
  @keyframes drawer {
    from {
      transform: translateX(-100%);
    }
    to {
      transform: none;
    }
  }
  #navdim {
    display: none;
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.42);
    z-index: 69;
  }
  #navdim.on {
    display: block;
  }
  .nav.open .apphead {
    padding: 0.4rem 18px 1rem !important;
    border-bottom: 1px solid var(--hair);
  }
  .nav.open .apphead .appname {
    font-size: 1.35rem;
  }
  html body #nav.open .dsup {
    display: flex;
    align-items: center;
    justify-content: flex-start;
    gap: 0.5rem;
    margin: 0.8rem 12px 0;
    padding: 0.6rem 0.9rem;
    border: 0;
    border-radius: 999px;
    background: #f1f3f6 !important;
    color: var(--text) !important;
    opacity: 1 !important;
    font-size: 0.9rem;
    font-weight: 600;
    text-decoration: none;
  }
  html body #nav.open .dsup svg {
    opacity: 0.7;
  }
  html[data-sup-mode="dark"] body #nav.open .dsup {
    background: rgba(255, 255, 255, 0.1) !important;
  }
  .nav.open .dapps {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem;
    padding: 0.8rem 12px 0.4rem;
  }
  .nav.open .dapps a {
    flex: 1 1 calc(50% - 0.2rem);
    min-width: 0;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 0.35rem;
    padding: 0.55rem 0.4rem;
    border-radius: 999px;
    background: #f1f3f6;
    color: var(--text);
    font-size: 0.9rem;
    text-decoration: none;
  }
  .nav.open .dapps a.on {
    background: rgba(0, 102, 204, 0.12);
    color: var(--blue);
  }
  .nav.open .dapps svg {
    width: 16px;
    height: 16px;
  }
  .nav.open .body {
    padding: 0.2rem 12px 0.6rem !important;
  }
  .nav.open .body .cta {
    margin: 0.4rem 0 0.8rem;
  }
  .nav.open .body a {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0.85rem 1rem !important;
    border-radius: 999px !important;
    font-size: 1.06rem;
    margin: 0 !important;
  }
  .nav.open .body a.on {
    background: rgba(0, 102, 204, 0.12) !important;
    color: var(--blue) !important;
    font-weight: 600;
  }
  .nav.open .body a .cnt {
    font-size: 0.9rem;
    color: var(--t3);
  }
  .nav.open .body .sect {
    padding: 1rem 1rem 0.4rem !important;
    font-size: 0.8rem;
    color: var(--t3);
  }
}
@media (max-width: 900px) {
  .nav.open,
  .nav.open .body,
  .nav.open .apphead,
  .nav.open .rhead,
  .nav.open .invites {
    background: #fff !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
  }
  .nav.open .body a:not(.on) {
    background: transparent !important;
  }
  html[data-sup-mode="dark"] .nav.open,
  html[data-sup-mode="dark"] .nav.open .body,
  html[data-sup-mode="dark"] .nav.open .apphead,
  html[data-sup-mode="dark"] .nav.open .rhead,
  html[data-sup-mode="dark"] .nav.open .invites {
    background: #1c1c1e !important;
  }
}
/* the drawer is solid white however the panels are tinted in the master console (those rules carry html.panebg.panebg.panebg specificity) */
@media (max-width: 900px) {
  html.panebg.panebg.panebg body #nav.open,
  html body #nav.open.open.open,
  html body #nav.open.open.open .dapps,
  html body #nav.open.open.open .body,
  html body #nav.open.open.open .apphead,
  html body #nav.open.open.open .rhead,
  html body #nav.open.open.open .invites {
    background: #fff !important;
    background-image: none !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
  html[data-sup-mode="color"] body #nav.open.open.open {
    --text: #1d1d1f;
    --t2: #6e6e73;
    --t3: #8e8e93;
    color: #1d1d1f;
  }
  html[data-sup-mode="dark"] body #nav.open.open.open,
  html[data-sup-mode="dark"] body #nav.open.open.open .dapps,
  html[data-sup-mode="dark"] body #nav.open.open.open .body,
  html[data-sup-mode="dark"] body #nav.open.open.open .apphead,
  html[data-sup-mode="dark"] body #nav.open.open.open .rhead,
  html[data-sup-mode="dark"] body #nav.open.open.open .invites {
    background: #1c1c1e !important;
  }
}
/* ── account switcher sheet (phones), Google's: Done, you, the other accounts on this device, add, manage ── */
.acsheet {
  padding: 0.6rem 0.9rem 1.2rem !important;
}
.acsheet .acs-top {
  display: flex;
  justify-content: flex-end;
  padding: 0.2rem 0 0.9rem;
}
.acsheet .acs-done {
  border: 0;
  background: rgba(0, 102, 204, 0.14);
  color: var(--blue);
  font-weight: 600;
  font-size: 1.05rem;
  border-radius: 999px;
  padding: 0.7rem 1.2rem;
}
.acsheet .acs-card {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: #eceef1;
  border-radius: 10px;
  padding: 0.8rem 0.9rem;
  margin: 0 0 3px;
  color: var(--text);
  font: inherit;
}
.acsheet .acs-card:first-of-type {
  border-radius: 22px 22px 10px 10px;
}
.acsheet .acs-manage,
.acsheet .acs-card:last-of-type {
  border-radius: 10px 10px 22px 22px;
  margin-top: 0.6rem;
}
.acsheet .acs-me {
  padding: 1.1rem 0.9rem;
  border-radius: 22px 22px 10px 10px;
  cursor: pointer;
}
.acsheet .acs-av {
  position: relative;
  width: 40px;
  height: 40px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acsheet .acs-av .av,
.acsheet .acs-av img {
  width: 40px !important;
  height: 40px !important;
  border-radius: 50%;
  font-size: 0.95rem;
}
.acsheet .acs-av.big {
  width: 64px;
  height: 64px;
}
.acsheet .acs-av.big .av,
.acsheet .acs-av.big img {
  width: 64px !important;
  height: 64px !important;
  font-size: 1.4rem;
}
.acsheet .acs-edit {
  position: absolute;
  right: -6px;
  bottom: -4px;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.18);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8rem;
  color: #333;
}
.acsheet .acs-edit svg {
  width: 13px;
  height: 13px;
}
.acsheet .acs-av.plus {
  color: var(--blue);
  background: #fff;
  border-radius: 50%;
}
.acsheet .acs-av.plus svg {
  width: 22px;
  height: 22px;
}
.acsheet .acs-av.plain {
  color: #333;
}
.acsheet .acs-av.plain svg {
  width: 22px;
  height: 22px;
}
.acsheet .acs-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1;
}
.acsheet .acs-t b {
  font-weight: 600;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acsheet .acs-me .acs-t b {
  font-size: 1.5rem;
  font-weight: 500;
}
.acsheet .acs-t span {
  color: var(--t2);
  font-size: 0.95rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acsheet .acs-me .acs-t span {
  font-size: 1.05rem;
}
.acsheet .acs-chev {
  width: 40px;
  height: 40px;
  border-radius: 999px;
  background: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #333;
  flex: none;
}
.acsheet .acs-act .acs-t b {
  font-weight: 500;
}
html[data-sup-mode="dark"] .acsheet .acs-card {
  background: #2c2c2e;
}
html[data-sup-mode="dark"] .acsheet .acs-edit,
html[data-sup-mode="dark"] .acsheet .acs-chev,
html[data-sup-mode="dark"] .acsheet .acs-av.plus {
  background: #3a3a3c;
  color: #eee;
}
@media (max-width: 900px) {
  .composer.gsheet .crow {
    position: relative;
    padding-right: 2.6rem !important;
  }
  .composer.gsheet .gchev {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    color: #333;
    font-size: 0;
    text-decoration: none;
  }
  .composer.gsheet .crow:has(.gchev.dec) select {
    padding-right: 2rem;
  }
  .composer.gsheet .glock {
    position: absolute;
    right: 0.2rem;
    top: 50%;
    transform: translateY(-50%);
    width: 2.2rem;
    height: 2.2rem;
    border: 0;
    background: none;
    color: #333;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .composer.gsheet .glock.on {
    color: var(--blue);
  }
  .composer.gsheet .crow:has(#c-subj) {
    padding-right: 2.6rem !important;
  }
  .composer.gsheet #c-lockwrap {
    margin: 0.6rem 0;
  }
}
/* search by image lives in the search dropdown now, first of the quick filters */
.spanel .sp-chip.sp-img {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 102, 204, 0.1);
  border-color: transparent;
  color: var(--blue);
}
.spanel .sp-chip.sp-img svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .list .search .in {
    padding-right: 3.6rem !important;
  }
}
/* ── the SuperIntelligence sheet: a close circle top-left; on phones it rises like compose, a card from the bottom over the dimmed page ── */
.ash-top {
  display: flex;
  align-items: center;
  padding: 0 0 0.7rem;
}
.ash-x {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: #e9eaee;
  border: 0;
  color: #555;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
html[data-sup-mode="dark"] .ash-x {
  background: #3a3a3c;
  color: #eee;
}
@media (max-width: 900px) {
  .sheet.on:has(#sheetbox.aish),
  .sheet.on:has(#sheetbox.acsheet) {
    padding: 0 !important;
    background: rgba(0, 0, 0, 0.4) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    overflow: hidden !important;
  }
  #sheetbox.aish,
  #sheetbox.acsheet {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    max-width: none !important;
    height: calc(100dvh - 40px - env(safe-area-inset-top)) !important;
    max-height: none !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: auto;
    padding: 0.8rem 1rem calc(1rem + env(safe-area-inset-bottom)) !important;
    animation: gsheet 0.34s cubic-bezier(0.2, 0.85, 0.25, 1);
    box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.28) !important;
    background: #fff !important;
    border: 0 !important;
  }
  html[data-sup-mode="dark"] #sheetbox.aish,
  html[data-sup-mode="dark"] #sheetbox.acsheet {
    background: #1c1c1e !important;
  }
  .acsheet .acs-card {
    background: #f0f1f4;
  }
  html[data-sup-mode="dark"] .acsheet .acs-card {
    background: #2c2c2e;
  }
}
/* ── account switcher, Apple's grammar: grey canvas, centred hero, inset white groups with hairlines, tick on the current account ── */
#sheetbox.acsheet {
  background: #f2f2f7 !important;
}
html[data-sup-mode="dark"] #sheetbox.acsheet {
  background: #000 !important;
}
.acsheet .acs-head {
  display: grid;
  grid-template-columns: 40px 1fr 40px;
  align-items: center;
}
.acsheet .acs-title {
  text-align: center;
  font-weight: 600;
  font-size: 1.05rem;
}
.acsheet .acs-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.6rem 0 1.2rem;
  cursor: pointer;
}
.acsheet .acs-heroav .av,
.acsheet .acs-heroav img {
  width: 88px !important;
  height: 88px !important;
  border-radius: 50%;
  font-size: 2rem;
}
.acsheet .acs-hero b {
  font-size: 1.45rem;
  font-weight: 600;
  margin-top: 0.7rem;
  letter-spacing: -0.01em;
}
.acsheet .acs-hero .acs-addr {
  color: var(--t2);
  font-size: 1rem;
  margin-top: 0.1rem;
}
.acsheet .acs-hero .acs-link {
  color: var(--blue);
  font-size: 0.95rem;
  margin-top: 0.5rem;
}
.acsheet .acs-label {
  font-size: 0.8rem;
  color: var(--t3);
  text-transform: uppercase;
  letter-spacing: 0.02em;
  padding: 0 1rem 0.4rem;
}
.acsheet .acs-group {
  background: #fff;
  border-radius: 12px;
  overflow: hidden;
  margin: 0 0 1.2rem;
}
html[data-sup-mode="dark"] .acsheet .acs-group {
  background: #1c1c1e;
}
.acsheet .acs-row {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 0.65rem 1rem;
  min-height: 56px;
  color: var(--text);
  font: inherit;
  position: relative;
  margin: 0;
  border-radius: 0;
}
.acsheet .acs-row + .acs-row::before {
  content: "";
  position: absolute;
  left: 3.9rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.acsheet .acs-row.acs-blue + .acs-row::before {
  left: 3.9rem;
}
.acsheet .acs-row .acs-av {
  width: 38px;
  height: 38px;
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.acsheet .acs-row .acs-av .av,
.acsheet .acs-row .acs-av img {
  width: 38px !important;
  height: 38px !important;
  border-radius: 50%;
  font-size: 0.9rem;
}
.acsheet .acs-av.ic {
  color: var(--blue);
}
.acsheet .acs-av.ic svg {
  width: 22px;
  height: 22px;
}
.acsheet .acs-row .acs-t {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.acsheet .acs-row .acs-t b {
  font-weight: 400;
  font-size: 1.05rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acsheet .acs-row .acs-t span {
  font-size: 0.85rem;
  color: var(--t3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.acsheet .acs-row.acs-blue .acs-t b {
  color: var(--blue);
}
.acsheet .acs-tick {
  color: var(--blue);
  display: inline-flex;
}
.acsheet .acs-chev {
  color: #c4c4c6;
  display: inline-flex;
}
.acsheet .acs-row:active {
  background: rgba(120, 120, 128, 0.12);
}
.acsheet .acs-av.ic,
.acsheet .acs-av.ic svg {
  color: var(--blue) !important;
}
/* ── phones, the message rises like compose: a card from the bottom over the dimmed inbox, × circle top-left, tools right ── */
@media (max-width: 900px) {
  #shell.conv-open:not(.home):not(.master):not(.calmode) .list {
    display: flex !important;
  }
  body:has(#shell.conv-open:not(.home):not(.master):not(.calmode) .conv.mail)::after {
    content: "";
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.4);
    z-index: 57;
    pointer-events: none;
  }
  #shell.conv-open:not(.home):not(.master):not(.calmode) .conv.mail {
    position: fixed !important;
    left: 0 !important;
    right: 0 !important;
    bottom: 0 !important;
    top: auto !important;
    width: auto !important;
    height: calc(100dvh - 40px - env(safe-area-inset-top)) !important;
    max-height: none !important;
    min-height: 0 !important;
    margin: 0 !important;
    border-radius: 18px 18px 0 0 !important;
    overflow: hidden !important;
    background: #fff !important;
    box-shadow: 0 -14px 48px rgba(0, 0, 0, 0.28) !important;
    z-index: 58;
    animation: gsheet 0.34s cubic-bezier(0.2, 0.85, 0.25, 1) !important;
    display: flex !important;
    flex-direction: column;
    border: 0 !important;
  }
  html[data-sup-mode="dark"] #shell.conv-open:not(.home):not(.master):not(.calmode) .conv.mail {
    background: #1c1c1e !important;
  }
  .conv.mail .head.mailhead {
    padding-top: 0.8rem !important;
  }
  .conv.mail .head.mailhead #back {
    background: #e9eaee !important;
    border-radius: 50% !important;
    width: 40px !important;
    height: 40px !important;
    color: #555 !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23555' stroke-width='2' stroke-linecap='round'%3E%3Cpath d='M6 6l12 12M18 6 6 18'/%3E%3C/svg%3E") !important;
    background-size: 20px 20px !important;
    background-position: center !important;
    background-repeat: no-repeat !important;
  }
  .conv.mail .head.mailhead #back .ic,
  .conv.mail .head.mailhead #back svg {
    display: none !important;
  }
  html[data-sup-mode="dark"] .conv.mail .head.mailhead #back {
    background-color: #3a3a3c !important;
  }
}
@media (max-width: 900px) {
  .conv.mail .head.mailhead #back {
    border: 0 !important;
    box-shadow: none !important;
  }
}
/* ── notices, Apple's capsule: frosted, top centre, icon + text, drops in and fades ── */
#toasts {
  position: fixed !important;
  top: auto !important;
  left: auto !important;
  right: max(16px, env(safe-area-inset-right)) !important;
  bottom: calc(max(16px, env(safe-area-inset-bottom))) !important;
  display: flex !important;
  flex-direction: column;
  align-items: flex-end;
  gap: 0.5rem;
  z-index: 1000 !important;
  pointer-events: none;
  padding: 0 !important;
  margin: 0 !important;
  width: auto !important;
  max-width: none !important;
}
.toast {
  display: inline-flex !important;
  align-items: center;
  gap: 0.55rem;
  background: rgba(250, 250, 252, 0.86) !important;
  -webkit-backdrop-filter: blur(24px) saturate(1.6);
  backdrop-filter: blur(24px) saturate(1.6);
  color: #1c1c1e !important;
  border: 0 !important;
  border-left: 0 !important;
  border-radius: 999px !important;
  padding: 0.7rem 1.15rem 0.7rem 0.95rem !important;
  font-size: 0.95rem !important;
  font-weight: 600;
  letter-spacing: -0.01em;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.16),
    0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
  max-width: min(92vw, 420px) !important;
  animation: toastIn 0.42s cubic-bezier(0.2, 1.1, 0.3, 1);
  pointer-events: auto;
}
.toast .tic {
  display: inline-flex;
  color: #8e8e93;
}
.toast.ok .tic {
  color: #34c759;
}
.toast.err .tic {
  color: #ff3b30;
}
.toast .ttx {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.toast.out {
  animation: toastOut 0.26s ease-in forwards;
}
@keyframes toastIn {
  from {
    transform: translateY(16px) scale(0.94);
    opacity: 0;
    filter: blur(10px);
  }
  to {
    transform: none;
    opacity: 1;
    filter: blur(0);
  }
}
@keyframes toastOut {
  to {
    transform: translateY(10px) scale(0.96);
    opacity: 0;
    filter: blur(10px);
  }
}
.toast.ann .tic {
  color: #ff9f0a;
}
body.dock-vis #toasts {
  bottom: calc(max(16px, env(safe-area-inset-bottom)) + 56px) !important;
} /* notices stack above the dock while it shows */
@media (max-width: 900px) {
  body:has(#composer.on) #toasts,
  body:has(#shell.conv-open .conv.mail .quick) #toasts {
    bottom: calc(env(safe-area-inset-bottom) + 96px) !important;
  }
}
@media (min-width: 901px) {
  body:has(#composer.on) #toasts {
    right: calc(min(600px, 100vw - 2.4rem) + 2.2rem) !important;
  }
} /* an open composer owns the corner on desktop: notices step left of it */
html[data-sup-mode="dark"] .toast {
  background: rgba(44, 44, 46, 0.86) !important;
  color: #fff !important;
  box-shadow:
    0 10px 32px rgba(0, 0, 0, 0.5),
    0 0 0 0.5px rgba(255, 255, 255, 0.08) !important;
}
/* ── every popup on white (Shane): sheets, menus, the composer, the drawer, the app grid; dark mode uses iOS dark grey ── */
.sheet .box,
#sheetbox,
#sheetbox.acsheet,
#sheetbox.aish,
.popmenu,
.popmenu.switcher,
.smenu .menu,
.umenu .menu,
.sgrid .panel,
.composer,
.composer.gsheet,
.nav.open {
  background: #fff !important;
  background-image: none !important;
  -webkit-backdrop-filter: none !important;
  backdrop-filter: none !important;
}
html:not([data-sup-mode="light"]) .sheet .box,
html:not([data-sup-mode="light"]) #sheetbox,
html:not([data-sup-mode="light"]) #sheetbox.acsheet,
html:not([data-sup-mode="light"]) #sheetbox.aish,
html:not([data-sup-mode="light"]) .popmenu,
html:not([data-sup-mode="light"]) .smenu .menu,
html:not([data-sup-mode="light"]) .umenu .menu,
html:not([data-sup-mode="light"]) .sgrid .panel,
html:not([data-sup-mode="light"]) .composer,
html:not([data-sup-mode="light"]) .nav.open {
  background: #1c1c1e !important;
}
.acsheet .acs-group {
  background: #f2f2f7 !important;
}
html:not([data-sup-mode="light"]) .acsheet .acs-group {
  background: #2c2c2e !important;
}
/* ── phones, the message card the Gmail way: avatar · name · time on one line, the To line under it, the body full width; star beside the subject; HTML mail scaled to fit ── */
.mcard .mhead .when.short {
  display: none;
}
@media (max-width: 900px) {
  .conv.mail .head.mailhead .ct {
    display: flex !important;
    flex-wrap: wrap;
    align-items: flex-start;
    gap: 0.2rem 0.4rem;
  }
  .conv.mail .head.mailhead .ct .title {
    flex: 1 1 0;
    min-width: 0;
  }
  .conv.mail .head.mailhead .ct .tstar {
    flex: none;
    width: 40px !important;
    height: 40px !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    margin-top: 0.1rem;
  }
  .conv.mail .head.mailhead .ct .tstar .ic {
    width: 24px;
    height: 24px;
  }
  .conv.mail .head.mailhead .ct .sub {
    display: none !important;
  }
  .mcard {
    display: grid !important;
    grid-template-columns: 40px minmax(0, 1fr) !important;
    column-gap: 0.7rem;
    row-gap: 0;
    padding: 0.8rem 0.6rem 0.4rem !important;
    align-items: start;
  }
  .mcard > .av {
    display: inline-flex !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px !important;
    height: 40px !important;
    font-size: 0.95rem;
    margin: 0 !important;
  }
  .mcard .mc {
    display: contents !important;
  }
  .mcard .mc > .mhead {
    grid-column: 2;
    grid-row: 1;
    display: flex !important;
    align-items: center;
    gap: 0.5rem;
    min-width: 0;
    margin: 0 !important;
    padding: 0.2rem 0 0 !important;
  }
  .mcard .mhead .mh-l {
    display: flex;
    align-items: baseline;
    gap: 0.4rem;
    min-width: 0;
    flex: 0 1 auto;
  }
  .mcard .mhead .mh-l .addr {
    display: none !important;
  }
  .mcard .mhead .from b {
    font-size: 1rem;
    font-weight: 600;
    color: var(--text);
  }
  .mcard .mhead .when:not(.short) {
    display: none !important;
  }
  .mcard .mhead .when.short {
    display: inline !important;
    font-size: 0.85rem;
    color: var(--t3);
    font-weight: 400;
    white-space: nowrap;
  }
  .mcard .mc > .toline {
    grid-column: 2;
    grid-row: 2;
    margin: 0 0 0.9rem !important;
    padding: 0 !important;
    font-size: 0.9rem;
    color: var(--t3);
    border: 0 !important;
  }
  .mcard .mc > *:not(.mhead):not(.toline) {
    grid-column: 1/-1;
  }
  .mcard .htmlwrap,
  .mcard .htmlwrap iframe.html {
    width: 100% !important;
    max-width: 100% !important;
  }
}
@media (max-width: 900px) {
  .mcard > .pav {
    display: block !important;
    grid-column: 1;
    grid-row: 1 / span 2;
    width: 40px;
    height: 40px;
    margin: 0 !important;
  }
  .mcard > .pav .av,
  .mcard > .pav img {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    border-radius: 50%;
    font-size: 0.95rem;
  }
  .mcard .mc > .mhead {
    flex-wrap: nowrap !important;
  }
  .mcard .mhead .mh-l {
    flex: 0 1 auto !important;
    width: auto !important;
  }
  .mcard .mhead .when.short {
    display: inline-block !important;
    width: auto !important;
    flex: none;
  }
}
@media (max-width: 900px) {
  .mcard .mhead .when.short {
    position: static !important;
    margin: 0 0 0 0.1rem !important;
    transform: none !important;
    right: auto !important;
    top: auto !important;
  }
  .mcard > .pav .av,
  .mcard > .pav img {
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    left: auto !important;
    box-shadow: none !important;
  }
  .mcard > .pav {
    overflow: visible;
    position: static !important;
  }
}
@media (max-width: 900px) {
  html body .conv.mail .mcard .mc > .mhead {
    flex-wrap: nowrap !important;
    display: flex !important;
  }
  html body .conv.mail .mcard .mhead .mh-l {
    flex: 0 0 auto !important;
    width: auto !important;
    max-width: 70% !important;
    overflow: hidden;
  }
  html body .conv.mail .mcard .mhead .when.short {
    display: inline-block !important;
    flex: 0 0 auto !important;
    width: auto !important;
    min-width: 0 !important;
    margin: 0 0 0 0.5rem !important;
  }
  html body .conv.mail .mcard > .pav {
    display: block !important;
    width: 40px !important;
    height: 40px !important;
    min-width: 40px !important;
    overflow: visible !important;
    margin: 0 !important;
    padding: 0 !important;
  }
  html body .conv.mail .mcard > .pav .av {
    display: inline-flex !important;
    width: 40px !important;
    height: 40px !important;
    margin: 0 !important;
    position: static !important;
    transform: none !important;
    flex: none;
  }
}
@media (max-width: 900px) {
  html body .conv.mail .mcard > .pav .av {
    padding: 0 !important;
    text-indent: 0 !important;
    letter-spacing: 0 !important;
    justify-content: center !important;
    align-items: center !important;
    line-height: 40px !important;
    box-sizing: border-box !important;
    text-align: center !important;
  }
  html body .conv.mail .mcard .mc > .mhead {
    justify-content: flex-start !important;
  }
}
/* ── desktop, the inline reply (Gmail): a card under the last message with "↩ ▾ Name", the body, then Send and the tools; pop out sends it back to the window ── */
.composer.inline {
  position: static !important;
  width: 100% !important;
  max-width: none !important;
  height: auto !important;
  max-height: none !important;
  margin: 0.6rem 0 1rem !important;
  border-radius: 16px !important;
  border: 1px solid var(--hair) !important;
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.06) !important;
  background: #fff !important;
  display: flex !important;
  flex-direction: column;
  overflow: visible !important;
  animation: none !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  bottom: auto !important;
}
html[data-sup-mode="dark"] .composer.inline {
  background: #1c1c1e !important;
}
.composer.inline .chead {
  background: transparent !important;
  color: var(--text) !important;
  padding: 0.6rem 0.9rem 0.2rem !important;
  cursor: default !important;
  border: 0 !important;
}
.composer.inline .chead > span:first-child {
  display: none;
}
.composer.inline .chead #c-saved {
  margin-left: auto;
}
.composer.inline .chead .iconb {
  color: var(--t3) !important;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 1rem;
}
.composer.inline .chead .iconb:hover {
  background: var(--act-bg);
  color: var(--text) !important;
}
.composer.inline .chead #c-min,
.composer.inline .chead .sendtop {
  display: none !important;
}
.composer.inline .chead #c-close .lbl {
  display: none;
}
.composer.inline .cbody {
  padding: 0 1.1rem !important;
  overflow: visible !important;
}
.composer.inline .gto {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  min-height: 2.4rem;
  font-size: 0.95rem;
  color: var(--text);
  border-bottom: 1px solid var(--hair);
  cursor: pointer;
}
.composer.inline .gto svg {
  width: 18px;
  height: 18px;
  color: var(--t2);
}
.composer.inline .gto .caret {
  font-size: 0.7rem;
  color: var(--t2);
}
.composer.inline .gto .gnames {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  text-decoration: underline;
  text-decoration-color: #d8b048;
  text-underline-offset: 4px;
}
.composer.inline .gcoll {
  display: none !important;
}
.composer.inline.gexp .gcoll {
  display: flex !important;
}
.composer.inline .ctext {
  min-height: 120px !important;
  padding: 0.8rem 0 !important;
}
.composer.inline .cfoot {
  display: flex !important;
  border-top: 0 !important;
  padding: 0.4rem 0.9rem 0.8rem !important;
  gap: 0.35rem;
}
.composer.inline .cfoot .sendgrp .btn {
  background: var(--blue) !important;
  color: #fff !important;
  border-radius: 999px !important;
  padding: 0.55rem 1.3rem !important;
  font-weight: 600;
  border: 0 !important;
}
.composer.inline .cfoot .btn.ghost,
.composer.inline .cfoot label.btn {
  border: 0 !important;
  background: transparent !important;
  color: var(--t2) !important;
  border-radius: 50% !important;
  width: 36px;
  height: 36px;
  padding: 0 !important;
  justify-content: center;
  font-size: 0;
}
.composer.inline .cfoot .btn.ghost svg,
.composer.inline .cfoot label.btn svg {
  width: 18px;
  height: 18px;
}
.composer.inline .cfoot #c-discard {
  margin-left: auto !important;
}
#inline-reply {
  padding: 0 0.2rem;
}
.composer.inline .cbody > * {
  order: 0;
}
.composer.inline .ctext {
  order: 1;
}
.composer.inline details.quote {
  order: 2;
  margin: 0.2rem 0 0.6rem !important;
}
.composer.inline .files {
  order: 3;
}
.composer.inline #c-ext,
.composer.inline #c-lockwrap {
  order: 4;
}
.composer.inline .cfoot .sendgrp {
  order: -1;
  margin-right: 0.4rem;
}
/* ── desktop: per-message Reply · Reply all · Forward live top-right of the message, beside the time (Gmail) ── */
@media (min-width: 901px) {
  .mcard .mhead {
    align-items: center;
  }
  .mcard .mhead .mtop {
    display: inline-flex;
    align-items: center;
    gap: 0.1rem;
    margin-left: 0.5rem;
    flex: none;
  }
  .mcard .mhead .mtop .btn {
    width: 32px;
    height: 32px;
    border-radius: 50% !important;
    padding: 0 !important;
    font-size: 0 !important;
    border: 0 !important;
    background: transparent !important;
    color: var(--t2) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    box-shadow: none !important;
  }
  .mcard .mhead .mtop .btn:hover {
    background: var(--act-bg) !important;
    color: var(--text) !important;
  }
  .mcard .mhead .mtop .btn .ic {
    width: 18px;
    height: 18px;
    margin: 0 !important;
  }
  .mcard .mact.empty {
    display: none !important;
  }
  .mcard .mact {
    margin-top: 0.6rem;
  }
}
/* ── invitation card, Apple Mail's: date tile, title, when · where, from; cancelled in red ── */
.evcard {
  display: flex !important;
  gap: 1rem;
  align-items: flex-start;
  border: 1px solid var(--hair) !important;
  border-left: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  padding: 0.9rem 1rem !important;
  background: #fff !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0 0 1rem !important;
}
html[data-sup-mode="dark"] .evcard {
  background: #1c1c1e !important;
}
.evcard .evdate {
  width: 56px;
  flex: none;
  border-radius: 12px;
  background: #f2f2f7;
  text-align: center;
  padding: 0.4rem 0 0.45rem;
  display: flex;
  flex-direction: column;
  align-items: center;
}
.evcard .evm {
  color: #ff3b30;
  font-size: 0.68rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.evcard .evd {
  font-size: 1.55rem;
  font-weight: 600;
  line-height: 1.1;
  color: var(--text);
}
html[data-sup-mode="dark"] .evcard .evdate {
  background: #2c2c2e;
}
.evcard .evmain {
  min-width: 0;
  flex: 1;
}
.evcard .evhead {
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--blue);
  margin: 0 0 0.15rem;
}
.evcard.cancel .evhead {
  color: #ff3b30;
}
.evcard .evtitle {
  font-size: 1.05rem;
  font-weight: 600;
  color: var(--text);
  line-height: 1.3;
}
.evcard.cancel .evtitle {
  text-decoration: line-through;
  color: var(--t2);
}
.evcard .evwhen,
.evcard .evfrom {
  font-size: 0.9rem;
  color: var(--t2);
  margin-top: 0.15rem;
}
.evcard .evacts {
  margin-top: 0.7rem;
  display: flex;
  gap: 0.4rem;
  align-items: center;
}
/* ── attachment chips, Apple's: a document icon, the name, the size under it ── */
.mcard .att {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin: 0.6rem 0 0;
}
.mcard .att a {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  border: 1px solid var(--hair) !important;
  border-radius: 12px !important;
  padding: 0.5rem 0.85rem 0.5rem 0.6rem !important;
  background: #fff !important;
  color: var(--text) !important;
  text-decoration: none !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  font-size: 0.9rem;
}
html[data-sup-mode="dark"] .mcard .att a {
  background: #2c2c2e !important;
}
.mcard .att a .fic {
  width: 30px;
  height: 30px;
  border-radius: 8px;
  background: rgba(0, 102, 204, 0.1);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex: none;
}
.mcard .att a .fic svg {
  width: 16px;
  height: 16px;
}
.mcard .att a .ft {
  display: flex;
  flex-direction: column;
  line-height: 1.2;
}
.mcard .att a .ft b {
  font-weight: 500;
}
.mcard .att a .ft .dim {
  font-size: 0.78rem;
}
/* ── mailing-list banner, Apple Mail's: one line above the message, Unsubscribe as a tinted pill, × dismisses for this thread ── */
.listbar {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin: 0.6rem 0.9rem 0;
  padding: 0.55rem 0.6rem 0.55rem 0.9rem;
  border-radius: 14px;
  background: #f2f2f7;
  color: var(--text);
  font-size: 0.92rem;
}
html[data-sup-mode="dark"] .listbar {
  background: #2c2c2e;
}
.listbar .lb-ic {
  display: inline-flex;
  color: var(--blue);
}
.listbar .lb-ic svg {
  width: 20px;
  height: 20px;
}
.listbar .lb-t {
  flex: 1;
  font-weight: 600;
}
.listbar .lb-go {
  border: 0;
  border-radius: 999px;
  background: rgba(0, 102, 204, 0.12);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.92rem;
  padding: 0.5rem 1rem;
  cursor: pointer;
}
.listbar .lb-go:disabled {
  opacity: 0.6;
}
.listbar .lb-x {
  border: 0;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.16);
  color: var(--t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
}
.listbar .lb-x svg {
  width: 14px;
  height: 14px;
}
@media (max-width: 900px) {
  .listbar {
    margin: 0.6rem 0.6rem 0;
  }
}
/* ── first-device passkey nudge ── */
.pn {
  text-align: center;
  padding: 0.4rem 0 0.6rem;
}
.pn .pn-ic {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  background: rgba(0, 102, 204, 0.12);
  color: var(--blue);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-bottom: 0.9rem;
}
.pn .pn-ic svg {
  width: 30px;
  height: 30px;
}
.pn .h1 {
  font-size: 1.4rem;
  margin: 0 0 0.5rem;
}
.pn p {
  max-width: 420px;
  margin: 0 auto 1.2rem;
}
.pn .pn-acts {
  display: flex;
  gap: 0.6rem;
  justify-content: center;
}
.pn .pn-acts .btn {
  border-radius: 999px !important;
  padding: 0.65rem 1.4rem !important;
}
/* ── quick replies under the last message (Gmail's smart reply), above Reply · Forward ── */
.smart {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  align-items: center;
  margin: 0.2rem 0.9rem 0.7rem;
}
.smart:empty {
  display: none;
}
.smart .sr {
  border: 1px solid var(--hair);
  background: #fff;
  color: var(--text);
  border-radius: 999px;
  padding: 0.55rem 1rem;
  font: inherit;
  font-size: 0.92rem;
  cursor: pointer;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.smart .sr:hover {
  background: var(--act-bg);
}
html[data-sup-mode="dark"] .smart .sr {
  background: #2c2c2e;
}
.smart .sr.ai {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
  background: rgba(0, 102, 204, 0.1);
  border-color: transparent;
  color: var(--blue);
  font-weight: 600;
}
.smart .sr.ai svg {
  width: 16px;
  height: 16px;
}
.smart .sr.ai:disabled {
  opacity: 0.6;
}
.smart .sr.skel {
  width: 120px;
  height: 36px;
  background: linear-gradient(90deg, rgba(120, 120, 128, 0.12), rgba(120, 120, 128, 0.22), rgba(120, 120, 128, 0.12));
  background-size: 200% 100%;
  animation: sk 1.2s infinite;
  border: 0;
  pointer-events: none;
}
@keyframes sk {
  to {
    background-position: -200% 0;
  }
}
.smart .sr-off {
  border: 0;
  background: transparent;
  color: var(--t3);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  opacity: 0.6;
}
.smart .sr-off:hover {
  background: var(--act-bg);
  opacity: 1;
}
.smart .sr-off svg {
  width: 12px;
  height: 12px;
}
@media (max-width: 900px) {
  .smart {
    margin: 0.4rem 0.6rem 1rem;
  }
}
.listbar {
  margin: 0.7rem 0.9rem 0.1rem;
}
/* ── SuperIntelligence sheet tabs (segmented control): Commands · Recent asks · Actions ── */
.aitabs {
  display: flex;
  background: rgba(120, 120, 128, 0.14);
  border-radius: 10px;
  padding: 3px;
  margin: 0.2rem 0 1rem;
}
.aitabs button {
  flex: 1;
  border: 0;
  background: transparent;
  border-radius: 8px;
  padding: 0.5rem 0.6rem;
  font: inherit;
  font-size: 0.9rem;
  font-weight: 500;
  color: var(--t2);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.35rem;
}
.aitabs button.on {
  background: #fff;
  color: var(--text);
  font-weight: 600;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}
.aitabs .cnt {
  font-size: 0.75rem;
  background: rgba(0, 102, 204, 0.12);
  color: var(--blue);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
}
html[data-sup-mode="dark"] .aitabs {
  background: rgba(120, 120, 128, 0.24);
}
html[data-sup-mode="dark"] .aitabs button.on {
  background: #3a3a3c;
  color: #fff;
}
.aih-tools {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin: 0 0 0.5rem;
}
/* ── recipient suggestions: a white card with avatars, name in bold where it matches, address under it ── */
.crow .sugg {
  width: min(440px, 100%) !important;
  left: 3.4rem !important;
  background: #fff !important;
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14) !important;
  padding: 0.35rem !important;
  margin-top: 4px !important;
  max-height: min(360px, 60vh);
  overflow: auto;
}
html[data-sup-mode="dark"] .crow .sugg {
  background: #1c1c1e !important;
}
.sugg .sg {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.45rem 0.6rem !important;
  border-radius: 10px;
  cursor: pointer;
  font-size: 0.95rem !important;
}
.sugg .sg.on,
.sugg .sg:hover {
  background: rgba(120, 120, 128, 0.12) !important;
}
.sugg .sg .av,
.sugg .sg img.av {
  width: 36px !important;
  height: 36px !important;
  flex: none;
  font-size: 0.85rem;
}
.sugg .sg .sgt {
  display: flex;
  flex-direction: column;
  min-width: 0;
  padding: 0 !important;
  background: transparent !important;
  line-height: 1.25;
}
.sugg .sg .sgt:hover {
  background: transparent !important;
}
.sugg .sg .sgt b {
  font-weight: 500;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sugg .sg .sgt span {
  color: var(--t3);
  font-size: 0.85rem;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sugg .sg mark {
  background: none;
  color: inherit;
  font-weight: 700;
}
.composer.gsheet .crow .sugg {
  left: 0 !important;
  width: 100% !important;
}
/* ── rich text in the composer: a contenteditable body, the formatting bar (Gmail's pill) above Send, plain-text mirror hidden ── */
.composer textarea.ctext.hid {
  display: none !important;
}
.composer .crich {
  outline: 0;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  cursor: text;
}
.composer .crich:empty::before {
  content: attr(data-ph);
  color: var(--t3);
  pointer-events: none;
}
.composer .crich a {
  color: var(--blue);
}
.composer .crich blockquote {
  border-left: 2px solid #c7c7cc;
  margin: 0.6em 0;
  padding-left: 0.8em;
  color: var(--t2);
}
.composer .fmtwrap {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  flex-wrap: wrap;
  margin: 0.3rem 0 0.4rem;
}
.fmtbar {
  display: inline-flex;
  align-items: center;
  gap: 0.1rem;
  background: #eef1f6;
  border-radius: 999px;
  padding: 0.25rem 0.4rem;
  flex-wrap: wrap;
}
html[data-sup-mode="dark"] .fmtbar {
  background: #2c2c2e;
}
.fmtbar .fg {
  display: inline-flex;
  align-items: center;
  gap: 0.05rem;
  padding: 0 0.25rem;
}
.fmtbar .fg + .fg {
  border-left: 1px solid rgba(60, 60, 67, 0.18);
}
.fmtbar button {
  border: 0;
  background: transparent;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: #3c4043;
  font: inherit;
  font-size: 0.95rem;
  cursor: pointer;
  padding: 0;
}
.fmtbar button:hover {
  background: rgba(60, 60, 67, 0.1);
}
.fmtbar button.on {
  background: rgba(0, 102, 204, 0.14);
  color: var(--blue);
}
.fmtbar button svg {
  width: 18px;
  height: 18px;
}
.fmtbar select {
  border: 0;
  background: transparent;
  font: inherit;
  font-size: 0.92rem;
  color: #3c4043;
  padding: 0.3rem 0.2rem;
  border-radius: 8px;
  cursor: pointer;
  max-width: 120px;
}
.fmtbar .fcol {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  cursor: pointer;
  font-weight: 600;
  color: #3c4043;
}
.fmtbar .fcol:hover {
  background: rgba(60, 60, 67, 0.1);
}
.fmtbar .fcol span {
  border-bottom: 3px solid #1c1c1e;
  line-height: 1;
}
.fmtbar .fcol input {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
}
html[data-sup-mode="dark"] .fmtbar button,
html[data-sup-mode="dark"] .fmtbar select,
html[data-sup-mode="dark"] .fmtbar .fcol {
  color: #e5e5ea;
}
.composer.inline .cbody > .crich {
  order: 1;
}
.composer.inline .cbody > .fmtwrap {
  order: 6;
}
.composer.inline .cbody > #c-lockwrap,
.composer.inline .cbody > #c-ext {
  order: 5;
}
@media (max-width: 900px) {
  .composer .fmtwrap {
    display: none;
  }
}
/* ── the inline reply, Apple-clean: quiet notes instead of grey boxes ── */
.composer.inline #c-ext.banner {
  background: transparent !important;
  border: 0 !important;
  padding: 0.2rem 0 !important;
  font-size: 0.82rem !important;
  color: var(--t3) !important;
}
.composer.inline .lockwrap {
  background: transparent !important;
  padding: 0.2rem 0 !important;
  border: 0 !important;
}
.composer.inline .lockwrap label.check {
  font-size: 0.85rem;
  color: var(--t2);
}
.composer.inline .lockwrap label.check b {
  font-weight: 500;
  color: var(--text);
}
.composer.inline .cbody {
  padding: 0 1.2rem !important;
}
.composer.inline .chead {
  padding: 0.7rem 1rem 0.1rem !important;
}
.composer.inline .gto {
  border-bottom: 1px solid var(--hair) !important;
  min-height: 2.6rem;
}
.composer.inline .gto .gnames {
  text-decoration: none !important;
  color: var(--text);
}
.composer.inline details.quote summary {
  display: inline-block;
  font: inherit;
  font-size: 0.8rem;
  color: var(--t3);
  background: rgba(120, 120, 128, 0.14);
  border-radius: 999px;
  padding: 0.15rem 0.6rem;
  cursor: pointer;
  letter-spacing: 0;
  text-transform: none;
}
/* ── folders: ⋯ on hover, a people badge when shared, a Shared folders section ── */
.nav .body a[data-folder] {
  position: relative;
}
.nav .body a[data-folder] .fmenu {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--t2);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 0;
  cursor: pointer;
}
.nav .body a[data-folder]:hover .fmenu {
  display: inline-flex;
}
.nav .body a[data-folder]:hover .cnt {
  visibility: hidden;
}
.nav .body a[data-folder] .fmenu:hover {
  background: var(--act-bg);
  color: var(--text);
}
.nav .body a[data-folder] .fmenu svg {
  width: 16px;
  height: 16px;
}
.nav .body a .fsh {
  display: inline-flex;
  vertical-align: -3px;
  margin-left: 0.2rem;
  color: var(--t3);
}
.nav .body a .fsh svg {
  width: 14px;
  height: 14px;
}
.popmenu button.danger {
  color: #ff3b30;
}
@media (max-width: 900px) {
  .nav .body a[data-folder] .fmenu {
    display: inline-flex;
  }
  .nav .body a[data-folder] .cnt {
    margin-right: 1.8rem;
  }
}
/* ── Unlock, Apple's way: an app-icon tile, a big title, one clear primary, quiet links ── */
.ulc {
  text-align: center;
}
.ulc .brand {
  font-size: 0.85rem;
  color: var(--t3);
  margin-bottom: 1rem;
}
.ulc .brand b {
  color: var(--text);
}
.ulc .ulc-ic {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6);
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin: 0.2rem auto 1rem;
  box-shadow: 0 10px 30px rgba(10, 132, 255, 0.28);
}
.ulc .ulc-ic svg {
  width: 34px;
  height: 34px;
}
.ulc .h1 {
  font-size: 1.75rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.4rem !important;
}
.ulc .lead {
  color: var(--t2);
  font-size: 0.98rem;
  line-height: 1.5;
  margin: 0 auto 1.1rem;
  max-width: 34ch;
}
.ulc .ulways {
  gap: 0.55rem;
  margin: 0.2rem 0 0.6rem;
}
.ulc .ulways .btn {
  border-radius: 14px !important;
  min-height: 50px;
  font-size: 1.02rem;
  font-weight: 600;
  justify-content: center;
}
.ulc .ulways .btn.sec,
.ulc #ul-ways .btn.sec {
  background: rgba(120, 120, 128, 0.14) !important;
  color: var(--text) !important;
  border: 0 !important;
  box-shadow: none !important;
}
.ulc .ulways .btn .dim {
  font-weight: 400;
  opacity: 0.8;
}
.ulc .lock {
  background: transparent;
  border: 0;
  color: var(--t3);
  font-size: 0.85rem;
  padding: 0.4rem 0 0;
  display: flex;
  gap: 0.4rem;
  align-items: flex-start;
  justify-content: center;
  text-align: left;
}
.ulc .lock svg {
  width: 15px;
  height: 15px;
  flex: none;
  margin-top: 0.15rem;
  color: var(--blue);
}
.ulc .links {
  display: flex;
  gap: 1.4rem;
  justify-content: center;
  margin-top: 1.1rem;
}
.ulc .links a {
  color: var(--t2) !important;
}
.ulc #ul-code,
.ulc #ul-pw {
  text-align: left;
  margin-top: 0.6rem;
}
.ulc #ul-code .btn,
.ulc #ul-pw .btn {
  border-radius: 14px !important;
  min-height: 50px;
  font-size: 1.02rem;
  font-weight: 600;
}
.ulc #ul-code .in,
.ulc #ul-pw .in {
  height: 50px;
  font-size: 1.3rem;
  letter-spacing: 0.35em;
  text-align: center;
  border-radius: 14px;
}
.ulc #ul-pw .in {
  letter-spacing: normal;
  font-size: 1.02rem;
  text-align: left;
}
/* ── passkey nudge, Apple's sheet: icon tile, title, one primary, a plain "Not now" ── */
#sheetbox .pn .h1,
#sheetbox .pn p,
.pn .h1,
.pn p {
  background: none !important;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none !important;
}
.pn {
  padding: 0.2rem 0 0.4rem;
}
.pn .pn-ic {
  width: 76px;
  height: 76px;
  border-radius: 22px;
  background: linear-gradient(135deg, #0a84ff, #5e5ce6);
  color: #fff;
  box-shadow: 0 10px 30px rgba(10, 132, 255, 0.28);
  margin-bottom: 1.1rem;
}
.pn .pn-ic svg {
  width: 34px;
  height: 34px;
}
.pn .h1 {
  font-size: 1.55rem !important;
  font-weight: 700 !important;
  letter-spacing: -0.02em;
  margin: 0 0 0.5rem !important;
  color: var(--text) !important;
}
.pn p {
  color: var(--t2) !important;
  font-size: 1rem;
  line-height: 1.5;
  max-width: 400px;
  margin: 0 auto 1.4rem !important;
}
.pn .pn-acts {
  flex-direction: column;
  align-items: center;
  gap: 0.5rem;
}
.pn .pn-acts .btn {
  width: min(320px, 100%);
  min-height: 50px;
  border-radius: 14px !important;
  font-size: 1.02rem;
  font-weight: 600;
  justify-content: center;
}
.pn .pn-acts .btn.sec {
  background: transparent !important;
  border: 0 !important;
  color: var(--blue) !important;
  box-shadow: none !important;
  font-weight: 500;
}
/* sheets sit dead centre on desktop (Apple): a flex canvas with the card on auto margins — centred when short, scrolls when tall */
@media (min-width: 901px) {
  .sheet.on {
    display: flex !important;
    align-items: flex-start;
    justify-content: center;
    padding: 24px 16px !important;
    overflow: auto !important;
  }
  .sheet.on .box {
    margin: auto !important;
  }
}
/* passkey sheet, tightened to an Apple alert: narrow card, small white glyph on a blue tile, no heavy close */
@media (min-width: 901px) {
  .sheet .box:has(.pn) {
    max-width: 400px !important;
    padding: 2.2rem 1.6rem 1.5rem !important;
  }
}
.sheet .box:has(.pn) .ash-top {
  display: none;
}
.pn {
  padding: 0;
}
.pn .pn-ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  box-shadow: 0 6px 18px rgba(10, 132, 255, 0.25);
  margin-bottom: 1rem;
}
.pn .pn-ic svg {
  width: 28px;
  height: 28px;
  stroke: #fff !important;
  color: #fff !important;
}
.pn .h1 {
  font-size: 1.3rem !important;
  margin: 0 0 0.45rem !important;
}
.pn p {
  font-size: 0.95rem !important;
  line-height: 1.45 !important;
  color: var(--t2) !important;
  max-width: 320px;
  margin: 0 auto 1.3rem !important;
}
.pn .pn-acts {
  gap: 0.35rem;
}
.pn .pn-acts .btn {
  width: 100%;
  min-height: 46px;
  border-radius: 12px !important;
  font-size: 1rem;
}
.pn .pn-acts .btn.sec {
  min-height: 40px;
  font-size: 0.95rem;
}
/* ── account menu, Google's card: big avatar and name, "Manage your SuperID" pill, the other accounts, add, a quiet grid of places, sign out, Privacy · Terms ── */
.umenu .menu {
  width: 360px !important;
  max-width: calc(100vw - 24px);
  padding: 0.9rem 0 0.6rem !important;
  border-radius: 22px !important;
  box-shadow:
    0 20px 60px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
}
.umenu .um-hero {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.4rem 1.2rem 1rem;
}
.umenu .um-hero .um-av .av,
.umenu .um-hero .um-av img {
  width: 72px !important;
  height: 72px !important;
  border-radius: 50%;
  font-size: 1.6rem;
  display: inline-flex;
}
.umenu .um-hero .who {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin: 0.7rem 0 0.8rem;
  padding: 0 !important;
  border: 0 !important;
}
.umenu .um-hero .who b {
  font-size: 1.2rem;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--text);
}
.umenu .um-hero .who span {
  font-family: inherit !important;
  font-size: 0.9rem;
  color: var(--t2);
  margin-top: 0.15rem;
}
.umenu .um-manage {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--hair);
  border-radius: 999px;
  padding: 0.55rem 1.1rem !important;
  font-size: 0.92rem;
  font-weight: 500;
  color: var(--blue) !important;
  background: transparent !important;
  text-decoration: none;
}
.umenu .um-manage:hover {
  background: rgba(0, 102, 204, 0.08) !important;
}
.umenu .accts {
  border-top: 1px solid var(--hair) !important;
  border-bottom: 0 !important;
  margin: 0 !important;
  padding: 0.4rem 0.5rem 0 !important;
}
.umenu .accts a {
  padding: 0.55rem 0.8rem !important;
  border-radius: 12px;
  gap: 0.8rem !important;
  font-size: 0.95rem;
}
.umenu .accts a:hover {
  background: rgba(120, 120, 128, 0.1) !important;
}
.umenu .accts a .av {
  width: 36px !important;
  height: 36px !important;
  font-size: 0.85rem !important;
}
.umenu .accts a b {
  font-weight: 600;
}
.umenu .accts a.cur {
  background: transparent !important;
}
.umenu .um-add {
  display: flex !important;
  align-items: center;
  gap: 0.8rem;
  margin: 0 0.5rem;
  padding: 0.6rem 0.8rem !important;
  border-radius: 12px;
  font-size: 0.95rem;
  color: var(--text) !important;
}
.umenu .um-add svg {
  width: 36px;
  height: 36px;
  padding: 9px;
  border-radius: 50%;
  background: rgba(120, 120, 128, 0.12);
  color: var(--text);
}
.umenu .um-look {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin: 0.5rem 1.2rem 0.3rem;
  padding-top: 0.7rem;
  border-top: 1px solid var(--hair);
}
.umenu .um-look .um-lbl {
  font-size: 0.85rem;
  color: var(--t3);
  flex: none;
}
.umenu .um-look .modeseg {
  flex: 1;
  margin: 0 !important;
}
.umenu .um-look .modedef {
  flex: none;
}
.umenu .um-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.1rem 0.4rem;
  margin: 0.5rem 0.9rem 0.3rem;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hair);
}
.umenu .um-grid a {
  padding: 0.5rem 0.6rem !important;
  border-radius: 10px;
  font-size: 0.9rem;
  color: var(--t2) !important;
}
.umenu .um-grid a:hover {
  background: rgba(120, 120, 128, 0.1) !important;
  color: var(--text) !important;
}
.umenu .um-out {
  display: flex;
  gap: 0.4rem;
  margin: 0.4rem 0.9rem 0;
  padding-top: 0.6rem;
  border-top: 1px solid var(--hair);
}
.umenu .um-out button {
  flex: 1;
  border: 1px solid var(--hair) !important;
  background: transparent !important;
  border-radius: 999px !important;
  padding: 0.55rem 0.8rem !important;
  font-size: 0.9rem !important;
  color: var(--text) !important;
  text-align: center !important;
  width: auto !important;
}
.umenu .um-out button:hover {
  background: rgba(120, 120, 128, 0.1) !important;
}
.umenu .um-foot {
  display: flex;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.7rem 0 0.2rem;
  font-size: 0.78rem;
  color: var(--t3);
}
.umenu .um-foot a {
  color: var(--t3) !important;
  padding: 0 !important;
  display: inline !important;
}
.umenu .um-hero .who span,
.umenu .who #um-addr {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
  letter-spacing: 0 !important;
}
.umenu .um-add svg {
  stroke: var(--text) !important;
  stroke-width: 2 !important;
  box-sizing: border-box;
  width: 36px !important;
  height: 36px !important;
}
.umenu .um-look {
  flex-wrap: wrap;
}
.umenu .um-look .modedef {
  width: 100% !important;
  text-align: left !important;
  font-size: 0.8rem !important;
  padding: 0.2rem 0 0 !important;
  color: var(--t3) !important;
}
.umenu .um-out button {
  white-space: nowrap;
  font-size: 0.86rem !important;
  padding: 0.5rem 0.6rem !important;
}
.umenu .um-foot {
  justify-content: center !important;
  align-items: center;
}
.umenu .um-foot a,
.umenu .um-foot span {
  display: inline !important;
  width: auto !important;
  padding: 0 !important;
  margin: 0 !important;
  color: var(--t3) !important;
  font-size: 0.78rem !important;
}
.umenu .accts a span,
.umenu .accts a small {
  font-family: inherit !important;
  letter-spacing: 0 !important;
}
#list .trow.icloud.starred {
  background: rgba(255, 204, 0, 0.06);
}
.lookwrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
  margin: 0.6rem 0 0.2rem;
}
.lookwrap .modeseg {
  margin: 0 !important;
  max-width: 320px;
  flex: 1;
}
.lookwrap .modedef {
  font-size: 0.85rem !important;
  color: var(--t3) !important;
  padding: 0.2rem 0 !important;
}
/* ── account menu, Apple's grammar (2026-09-16): grey canvas, centred hero, inset white groups with hairlines, blue actions, red sign-out ── */
.umenu .menu {
  background: #f2f2f7 !important;
  width: 340px !important;
  padding: 1.1rem 0.9rem 0.8rem !important;
  border-radius: 20px !important;
  box-shadow:
    0 16px 48px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.08) !important;
}
html[data-sup-mode="dark"] .umenu .menu {
  background: #000 !important;
}
.umenu .um-hero {
  padding: 0.2rem 0.4rem 0.9rem;
}
.umenu .um-hero .um-av .av,
.umenu .um-hero .um-av img {
  width: 68px !important;
  height: 68px !important;
  font-size: 1.5rem;
}
.umenu .um-hero .who {
  margin: 0.6rem 0 0.3rem;
}
.umenu .um-hero .who b {
  font-size: 1.1rem;
  font-weight: 600;
}
.umenu .um-hero .who span {
  font-size: 0.85rem;
  color: var(--t2);
}
.umenu .um-manage {
  border: 0 !important;
  background: transparent !important;
  padding: 0.15rem 0 !important;
  font-size: 0.9rem;
  font-weight: 400;
  color: var(--blue) !important;
}
.umenu .um-manage svg {
  display: none;
}
.umenu .um-manage:hover {
  background: transparent !important;
  text-decoration: underline;
}
.umenu .accts {
  background: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  padding: 0 !important;
  margin: 0 !important;
  overflow: hidden;
}
html[data-sup-mode="dark"] .umenu .accts {
  background: #1c1c1e !important;
}
.umenu .accts a {
  padding: 0.6rem 0.9rem !important;
  border-radius: 0 !important;
  position: relative;
  font-size: 0.95rem;
  gap: 0.7rem !important;
}
.umenu .accts a + a::before {
  content: "";
  position: absolute;
  left: 3.5rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.umenu .accts a .av {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.8rem !important;
}
.umenu .accts a b {
  font-weight: 500;
  font-size: 0.95rem;
}
.umenu .accts a small,
.umenu .accts a span span {
  font-size: 0.8rem;
  color: var(--t3);
}
.umenu .accts a:hover {
  background: rgba(120, 120, 128, 0.1) !important;
}
.umenu .accts a.cur svg,
.umenu .accts a.cur .tick {
  color: var(--blue);
}
.umenu .um-add {
  margin: 0 !important;
  background: #fff !important;
  border-radius: 0 0 12px 12px;
  padding: 0.7rem 0.9rem !important;
  font-size: 0.95rem;
  color: var(--blue) !important;
  position: relative;
  gap: 0.7rem;
}
.umenu .um-add::before {
  content: "";
  position: absolute;
  left: 3.5rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.umenu .um-add svg {
  width: 32px !important;
  height: 32px !important;
  padding: 7px;
  background: rgba(0, 102, 204, 0.12) !important;
  stroke: var(--blue) !important;
}
html[data-sup-mode="dark"] .umenu .um-add {
  background: #1c1c1e !important;
}
.umenu .accts {
  border-radius: 12px 12px 0 0 !important;
}
.umenu .accts:empty + .um-add {
  border-radius: 12px;
}
.umenu .um-grid {
  display: block;
  background: #fff;
  border-radius: 12px;
  margin: 0.8rem 0 0;
  padding: 0;
  border: 0;
}
html[data-sup-mode="dark"] .umenu .um-grid {
  background: #1c1c1e;
}
.umenu .um-grid a {
  display: flex !important;
  justify-content: space-between;
  align-items: center;
  padding: 0.65rem 0.9rem !important;
  border-radius: 0 !important;
  font-size: 0.95rem;
  color: var(--text) !important;
  position: relative;
}
.umenu .um-grid a + a::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.umenu .um-grid a::after {
  content: "›";
  color: #c4c4c6;
  font-size: 1.2rem;
  line-height: 1;
}
.umenu .um-grid a:hover {
  background: rgba(120, 120, 128, 0.1) !important;
  color: var(--text) !important;
}
.umenu .um-grid a:first-child {
  border-radius: 12px 12px 0 0 !important;
}
.umenu .um-grid a:last-child {
  border-radius: 0 0 12px 12px !important;
}
.umenu .um-out {
  display: block;
  background: #fff;
  border-radius: 12px;
  margin: 0.8rem 0 0;
  padding: 0;
  border: 0;
}
html[data-sup-mode="dark"] .umenu .um-out {
  background: #1c1c1e;
}
.umenu .um-out button {
  display: block;
  width: 100% !important;
  border: 0 !important;
  border-radius: 0 !important;
  padding: 0.7rem 0.9rem !important;
  font-size: 0.95rem !important;
  color: var(--blue) !important;
  text-align: center !important;
  position: relative;
  background: transparent !important;
}
.umenu .um-out button + button::before {
  content: "";
  position: absolute;
  left: 0.9rem;
  right: 0;
  top: 0;
  height: 1px;
  background: rgba(60, 60, 67, 0.18);
}
.umenu .um-out #um-outall {
  color: #ff3b30 !important;
}
.umenu .um-out button:hover {
  background: rgba(120, 120, 128, 0.1) !important;
}
.umenu .um-foot {
  padding: 0.8rem 0 0.1rem;
}
.umenu .um-grid a::after {
  margin-left: auto;
}
.umenu .um-hero .um-manage {
  display: block !important;
  width: 100% !important;
  text-align: center !important;
}
.umenu .accts a .av,
.umenu .accts a .av img {
  flex: 0 0 32px !important;
  min-width: 32px !important;
  max-width: 32px !important;
  aspect-ratio: 1/1;
  border-radius: 50% !important;
  object-fit: cover;
}
.umenu .um-add svg {
  flex: 0 0 32px !important;
  min-width: 32px !important;
}
.umenu .um-hero .um-av .av,
.umenu .um-hero .um-av img {
  flex: none;
  aspect-ratio: 1/1;
  object-fit: cover;
}
/* Ask Sup → Your model: link this device to the person's SuperIntelligence key */
.si-link {
  display: flex;
  gap: 0.4rem;
  align-items: center;
  flex-wrap: wrap;
  margin-top: 0.6rem;
}
.si-link input {
  flex: 1;
  min-width: 160px;
  height: 32px;
  border: 1px solid var(--bsub);
  border-radius: 8px;
  padding: 0 0.6rem;
  background: var(--layer);
  color: var(--text);
  font: inherit;
  font-size: 0.85rem;
  text-transform: uppercase;
  letter-spacing: 0.08em;
}
.si-codeout {
  font-family: ui-monospace, Menlo, monospace;
  font-size: 1.05rem;
  letter-spacing: 0.2em;
}
.aipane .err {
  color: var(--red, #da1e28);
}
/* Unlock card, Apple-minimal (Shane 2026-09-17: "make this like apple minimal easy fix the colors") — one calm blue, flat tile, quiet greys, no gradients or glows */
.ulc {
  --ul-blue: #0071e3;
  --ul-blue-h: #0077ed;
  --ul-tile: #eef4ff;
}
.ulc .brand {
  font-size: 0.8rem;
  color: var(--t3);
  margin-bottom: 1.4rem;
}
.ulc .brand b {
  color: var(--text);
}
.ulc .ulc-ic {
  width: 64px;
  height: 64px;
  border-radius: 18px;
  background: var(--ul-tile);
  color: var(--ul-blue);
  box-shadow: none;
  margin: 0 auto 1.1rem;
}
.ulc .ulc-ic svg {
  width: 28px;
  height: 28px;
}
.ulc .h1 {
  color: var(--text);
  font-size: 1.6rem !important;
  letter-spacing: -0.01em;
}
.ulc .lead {
  color: var(--t2);
  font-size: 0.95rem;
  line-height: 1.45;
}
.ulc .lead b {
  color: var(--text);
}
.ulc .ulways .btn {
  background: var(--ul-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  min-height: 48px;
  font-size: 1rem;
  font-weight: 500;
  box-shadow: none !important;
  letter-spacing: -0.005em;
}
.ulc .ulways .btn:hover {
  background: var(--ul-blue-h) !important;
}
.ulc .ulways .btn svg {
  opacity: 0.9;
}
.ulc .ulways .btn .dim {
  color: rgba(255, 255, 255, 0.72) !important;
  font-weight: 400;
  opacity: 1;
  margin-left: 0.15rem;
}
.ulc .ulways .btn.sec,
.ulc #ul-ways .btn.sec {
  background: rgba(120, 120, 128, 0.14) !important;
  color: var(--text) !important;
}
.ulc .ulways .btn.sec:hover {
  background: rgba(120, 120, 128, 0.22) !important;
}
.ulc .lock {
  color: var(--t3);
  font-size: 0.82rem;
  line-height: 1.45;
  padding-top: 0.6rem;
}
.ulc .lock svg {
  color: var(--t3);
}
.ulc #ul-code label,
.ulc #ul-pw label,
.ulc .flabel {
  color: var(--t2);
  font-size: 0.82rem;
  font-weight: 500;
}
.ulc #ul-code label .dim,
.ulc #ul-pw label .dim {
  color: var(--t3);
  font-weight: 400;
}
.ulc #ul-code .in,
.ulc #ul-pw .in {
  border: 1px solid #d2d2d7;
  border-radius: 12px;
  background: #fff;
  color: var(--text);
  box-shadow: none;
}
.ulc #ul-code .in:focus,
.ulc #ul-pw .in:focus {
  border-color: var(--ul-blue);
  box-shadow: 0 0 0 3px rgba(0, 113, 227, 0.18);
  outline: 0;
}
.ulc #ul-code .btn,
.ulc #ul-pw .btn {
  background: var(--ul-blue) !important;
  color: #fff !important;
  border: 0 !important;
  border-radius: 12px !important;
  min-height: 48px;
  font-weight: 500;
  font-size: 1rem;
  box-shadow: none !important;
}
.ulc #ul-code .btn:hover,
.ulc #ul-pw .btn:hover {
  background: var(--ul-blue-h) !important;
}
.ulc #ul-code .btn.sec,
.ulc #ul-pw .btn.sec,
.ulc #ul-code .btn.ghost,
.ulc #ul-pw .btn.ghost,
.ulc #ul-resend {
  background: transparent !important;
  color: var(--ul-blue) !important;
  font-weight: 400;
  min-height: auto;
  padding: 0.35rem 0;
  font-size: 0.9rem;
  box-shadow: none !important;
}
.ulc .links {
  gap: 1.6rem;
  margin-top: 1.2rem;
}
.ulc .links a {
  color: var(--ul-blue) !important;
  font-size: 0.92rem;
}
.ulc .links a:hover {
  text-decoration: underline;
}
/* one step at a time (Shane: "google/apple would not do that"): options → a single field → done */
.ulc .lead {
  margin-bottom: 1.3rem;
}
.ulc .lead b {
  color: var(--text);
  font-weight: 500;
}
.ulc .ulways {
  gap: 0.6rem;
}
.ulc .lock {
  color: var(--t3);
  font-size: 0.82rem;
  padding-top: 0.7rem;
  justify-content: center;
}
.ulc .step {
  text-align: center;
  margin: 0.2rem 0 0.9rem;
}
.ulc .step .h2 {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
  letter-spacing: -0.01em;
}
.ulc .step .sub {
  color: var(--t2);
  font-size: 0.9rem;
  margin-top: 0.2rem;
}
.ulc #ul-code .in {
  font-size: 1.5rem;
  letter-spacing: 0.45em;
  font-weight: 500;
}
.ulc #ul-code .in::placeholder {
  color: #c7c7cc;
  letter-spacing: 0.45em;
}
.ulc .again {
  display: block;
  text-align: center;
  margin-top: 0.9rem;
  color: var(--ul-blue) !important;
  font-size: 0.92rem;
  text-decoration: none;
}
.ulc #ul-code .btn,
.ulc #ul-pw .btn {
  justify-content: center;
}
.ulc .links a[hidden] {
  display: none;
}

/* ── no top bar on desktop (Shane): the grid and the avatar sit at the right end of the search bar; the bar's row collapses ── */
.hright {
  display: contents;
}
@media (min-width: 901px) {
  :root {
    --h: 0px;
  }
  .top {
    height: 0 !important;
    min-height: 0 !important;
    padding: 0 !important;
    border: 0 !important;
    background: transparent !important;
    overflow: visible !important;
    pointer-events: none;
    box-shadow: none !important;
  }
  .top > *:not(.hright) {
    display: none !important;
  }
  .hright:not(.placed),
  body.app-enter .hright,
  body.launching .hright {
    visibility: hidden;
  } /* never seen mid-transform */
  .hright {
    display: flex;
    position: fixed;
    left: var(--tr-left, auto);
    top: var(--tr-top, 20px);
    transform: translateY(-50%);
    align-items: center;
    gap: 0.5rem;
    pointer-events: auto;
    z-index: 301;
  }
  .search {
    padding-right: var(--tr-w, 102px) !important;
  }
  .umenu {
    top: calc(var(--tr-top, 20px) + 26px) !important;
    right: var(--tr-right, 20px) !important;
  }
  body.tr-conv .conv .head.mailhead,
  body.tr-conv .conv .head {
    padding-right: calc(1.4rem + var(--tr-w, 102px)) !important;
  } /* a message is open: the grid and avatar ride its header, so its own actions move left of them */
}

/* the New emails pill hugs the bottom-right corner; it grows leftward as content fills it */
@media (min-width: 901px) {
  #msgdock.on {
    justify-content: flex-end;
  }
}

/* the app owns its scrollbar so the page never gains one — the centred launcher and dock never nudge */
html {
  scrollbar-gutter: stable;
}
@media (min-width: 901px) {
  html,
  body {
    overflow: hidden !important;
  }
}
/* ── SuperAI in the next look: the same frosted panes as Calendar ── */
.conv.aiapp {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.conv.aiapp .aiwrap {
  display: grid !important;
  grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px;
  height: 100% !important;
  padding: 10px;
  box-sizing: border-box;
}
.airail,
.aimain {
  background: var(--pane-bg) !important;
  border: 0.5px solid var(--hair) !important;
  border-radius: 14px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
html[data-sup-mode="light"] .airail {
  background: rgba(255, 255, 255, 0.9) !important;
}
html[data-sup-mode="light"] .aimain {
  background: rgba(255, 255, 255, 0.86) !important;
}
.airail {
  padding: 0 !important;
  border-right: 0.5px solid var(--hair) !important;
}
.airail .apphead {
  height: 68px !important;
  box-sizing: border-box;
  padding: 0 1.1rem !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 0 0.35rem !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.appic.ai {
  background: linear-gradient(160deg, #c46bff, #ff3e86) !important;
}
.aitop {
  border-bottom: 1px solid var(--hair) !important;
}
.airail > .aifoot {
  border-top: 1px solid var(--hair) !important;
}
.aiin {
  background: var(--pane-bg) !important;
  border-color: var(--hair) !important;
}
.aiin:focus-within {
  border-color: var(--blue) !important;
}
@media (max-width: 900px) {
  .conv.aiapp .aiwrap {
    grid-template-columns: 1fr !important;
    padding: 0;
    gap: 0;
  }
  .airail,
  .aimain {
    border-radius: 0 !important;
    border: 0 !important;
  }
}

/* the phone drawer never lets the page slide sideways (Shane 2026-09-17: four app chips overflowed and the whole page scrolled right) */
@media (max-width: 900px) {
  html body #nav.open {
    overflow-x: hidden !important;
    max-width: 100vw;
    box-sizing: border-box;
  }
  body.drawer {
    overflow-x: hidden !important;
  }
  body.drawer html,
  html:has(body.drawer) {
    overflow-x: hidden;
  }
}

/* app heads wear the launcher's marks and gradients */
.appic.lc-mail {
  background: linear-gradient(160deg, #5ab0ff, #0a5fe8) !important;
}
.appic.lc-msg {
  background: linear-gradient(160deg, #7fe28b, #26b34d) !important;
}
.appic.lc-cal {
  background: linear-gradient(160deg, #ff8e6e, #ff3b30) !important;
}
.appic.lc-ai {
  background: linear-gradient(160deg, #c46bff, #ff3e86) !important;
}
.appic svg {
  width: 22px !important;
  height: 22px !important;
  stroke-width: 1.7;
}
.conv.fapp .fwrap {
  display: grid !important;
  grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px;
  height: 100% !important;
  padding: 10px;
  box-sizing: border-box;
}
.frail,
.fmain {
  background: var(--pane-bg) !important;
  border: 0.5px solid var(--hair) !important;
  border-radius: 14px !important;
  overflow: hidden;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
}
html[data-sup-mode="light"] .frail {
  background: rgba(255, 255, 255, 0.9) !important;
}
html[data-sup-mode="light"] .fmain {
  background: rgba(255, 255, 255, 0.86) !important;
}
.frail {
  padding: 0 !important;
  border-right: 0.5px solid var(--hair) !important;
}
.frail .apphead {
  height: 68px !important;
  box-sizing: border-box;
  padding: 0 1.1rem !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 0 0.35rem !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
}
.appic.lc-file {
  background: linear-gradient(160deg, #ffcc33, #f5a300) !important;
}
@media (max-width: 900px) {
  .conv.fapp .fwrap {
    grid-template-columns: 1fr !important;
    padding: 0;
    gap: 0;
  }
  .frail,
  .fmain {
    border-radius: 0 !important;
    border: 0 !important;
  }
}

/* inbox rows as cards: a light border around each message instead of a divider (Shane liked SuperFile's items) */
.list .trow.icloud {
  border: 1px solid var(--hair) !important;
  border-radius: 14px !important;
  margin: 0.3rem 1.1rem !important;
  padding: 0.7rem 0.9rem !important;
  background: var(--layer) !important;
}
.list .trow.icloud::after {
  display: none !important;
}
.list .trow.icloud:hover:not(.on):not(.sel-on) {
  background: var(--menu-hover) !important;
  border-color: color-mix(in srgb, var(--hair) 60%, var(--text)) !important;
}
.list .trow.icloud.on,
.list .trow.icloud.sel-on {
  border-color: transparent !important;
}
html[data-sup-mode="light"] .list .trow.icloud {
  background: rgba(255, 255, 255, 0.72) !important;
}
.trow .tmore {
  all: unset;
  position: absolute;
  right: 0.6rem;
  bottom: 0.55rem;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 999px;
  color: var(--t3);
  cursor: pointer;
  opacity: 0;
  transition: opacity 0.15s;
}
.trow:hover .tmore,
.trow:focus-within .tmore,
.trow.on .tmore {
  opacity: 1;
}
.trow .tmore:hover {
  background: rgba(127, 127, 127, 0.18);
  color: var(--text);
}
.trow .tmore svg {
  width: 16px;
  height: 16px;
}
@media (max-width: 900px) {
  .trow .tmore {
    opacity: 1;
  }
}

/* the card's border says what the message is: starred yellow, new blue, then the classification — transactions green, updates violet, promotions pink; primary keeps the hairline (Shane) */
.list .trow.icloud.cat-transactions,
.list .trow.icloud.cat-transactions:hover:not(.on):not(.sel-on) {
  border-color: rgba(47, 179, 68, 0.75) !important;
}
.list .trow.icloud.cat-updates,
.list .trow.icloud.cat-updates:hover:not(.on):not(.sel-on) {
  border-color: rgba(142, 108, 255, 0.8) !important;
}
.list .trow.icloud.cat-promotions,
.list .trow.icloud.cat-promotions:hover:not(.on):not(.sel-on) {
  border-color: rgba(255, 62, 134, 0.75) !important;
}
.list .trow.icloud.unread,
.list .trow.icloud.unread:hover:not(.on):not(.sel-on) {
  border-color: var(--blue) !important;
}
.list .trow.icloud.starred,
.list .trow.icloud.starred:hover:not(.on):not(.sel-on) {
  border-color: #f5a300 !important;
}
.list .trow.icloud.on,
.list .trow.icloud.sel-on {
  border-color: transparent !important;
}

/* Apple's touch on the inbox cards (Shane: more like Apple — spacing, subtler colours): air between cards, hairline borders, system colours at half strength, ellipses, a softer star */
:root {
  --row-new: rgba(10, 132, 255, 0.55);
  --row-star: rgba(255, 159, 10, 0.6);
  --row-trans: rgba(48, 209, 88, 0.5);
  --row-upd: rgba(191, 90, 242, 0.5);
  --row-promo: rgba(255, 55, 95, 0.5);
}
.list .trow.icloud {
  margin: 0.5rem 1.1rem !important;
  padding: 0.85rem 1.05rem 0.8rem !important;
  border-radius: 16px !important;
  border: 1px solid rgba(255, 255, 255, 0.1) !important;
  background: rgba(255, 255, 255, 0.055) !important;
  box-shadow: none !important;
  transition:
    background 0.15s,
    border-color 0.15s;
}
html[data-sup-mode="light"] .list .trow.icloud {
  border-color: rgba(0, 0, 0, 0.075) !important;
  background: rgba(255, 255, 255, 0.66) !important;
}
.list .trow.icloud:hover:not(.on):not(.sel-on) {
  background: rgba(255, 255, 255, 0.1) !important;
  border-color: rgba(255, 255, 255, 0.16) !important;
}
html[data-sup-mode="light"] .list .trow.icloud:hover:not(.on):not(.sel-on) {
  background: rgba(255, 255, 255, 0.9) !important;
  border-color: rgba(0, 0, 0, 0.12) !important;
}
.list .trow.icloud .who,
.list .trow.icloud .subj,
.list .trow.icloud .snippet {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}
.list .trow.icloud .subj {
  margin: 0.12rem 0 0.1rem;
}
.list .trow.icloud .snippet {
  opacity: 0.72;
}
.list .trow.icloud .when {
  font-variant-numeric: tabular-nums;
  opacity: 0.7;
}
.list .trow.icloud .star.on {
  color: #ff9f0a !important;
}
.list .trow.icloud.cat-transactions,
.list .trow.icloud.cat-transactions:hover:not(.on):not(.sel-on) {
  border-color: var(--row-trans) !important;
}
.list .trow.icloud.cat-updates,
.list .trow.icloud.cat-updates:hover:not(.on):not(.sel-on) {
  border-color: var(--row-upd) !important;
}
.list .trow.icloud.cat-promotions,
.list .trow.icloud.cat-promotions:hover:not(.on):not(.sel-on) {
  border-color: var(--row-promo) !important;
}
.list .trow.icloud.unread,
.list .trow.icloud.unread:hover:not(.on):not(.sel-on) {
  border-color: var(--row-new) !important;
}
.list .trow.icloud.starred,
.list .trow.icloud.starred:hover:not(.on):not(.sel-on) {
  border-color: var(--row-star) !important;
}
.list .trow.icloud.on,
.list .trow.icloud.sel-on {
  border-color: transparent !important;
}

/* the card grew (Apple spacing): rows and their skeletons hold 92px so the three lines fit and nothing reflows on load */
.list .trow.icloud,
.list .trow.sk {
  height: 92px !important;
  min-height: 92px !important;
}

/* the legend: five dots under the chips say what the borders mean (desktop; phones keep the space) */
.catlegend {
  display: flex;
  flex-wrap: wrap;
  gap: 0.2rem 1rem;
  padding: 0.15rem 1.2rem 0.5rem;
  font-size: 0.74rem;
  color: var(--t3);
}
.catlegend span {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
.catlegend i {
  width: 8px;
  height: 8px;
  border-radius: 999px;
  display: inline-block;
}
.catlegend .lg-new {
  background: var(--row-new);
}
.catlegend .lg-star {
  background: var(--row-star);
}
.catlegend .lg-trans {
  background: var(--row-trans);
}
.catlegend .lg-upd {
  background: var(--row-upd);
}
.catlegend .lg-promo {
  background: var(--row-promo);
}
/* phones: calmer cards — one-line snippet, no ⋯ (long-press opens the menu), natural height, tighter margins, the star and chevron in one column */
@media (max-width: 900px) {
  .catlegend {
    display: none;
  }
  .list .trow.icloud {
    margin: 0.45rem 0.8rem !important;
    padding: 0.75rem 0.9rem 0.7rem !important;
    height: auto !important;
    min-height: 0 !important;
    border-radius: 14px !important;
  }
  .list .trow.icloud .snippet {
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    display: block !important;
    max-height: 1.4em !important;
    -webkit-line-clamp: unset !important;
  }
  .list .trow.icloud .tmore {
    display: none !important;
  }
  .list .trow.sk {
    height: auto !important;
    min-height: 82px !important;
  }
}

/* the "See All Messages" note: a neutral card that reads in every mode (it was light text on a light chip in dark mode, Shane) */
.list .catnote {
  color: var(--text) !important;
}
.list .catnote.c-all {
  background: color-mix(in srgb, var(--text) 9%, var(--note-base)) !important;
  color: var(--text) !important;
}
.list .catnote.c-all span {
  opacity: 0.78;
}
.list .catnote .iconb {
  color: inherit !important;
  opacity: 0.7;
}

/* every category note sits on a dark base in dark and colour modes; the tint stays, the text is the mode's text */
html:not([data-sup-mode="light"]) .list .catnote {
  --note-base: #1b1e2b;
  color: var(--text) !important;
}
html:not([data-sup-mode="light"]) .list .catnote span {
  opacity: 0.8;
}
html:not([data-sup-mode="light"]) .list .catnote .iconb {
  background: rgba(255, 255, 255, 0.12) !important;
  color: #fff !important;
}

.acsheet .acs-row.acs-red,
.acsheet .acs-row.acs-red b {
  color: #ff453a !important;
}
.acsheet .acs-row.acs-red .acs-t span {
  color: var(--t3) !important;
}

/* ── contrast pass (audit: contrastproof.mjs, AA in light · colour · dark) ──
   tertiary text lifted to ≥ 4.5 on its panes, snippets no longer faded, chip counts readable on unselected chips, and the accent
   blue deepened one step (#0a5fe8) so white text on it clears 4.5 — Apple's #0a84ff only reaches 3.5 */
html:not([data-sup-mode="light"]) {
  --t3: #8e8e96;
  --t2: #b6b6be;
  --blue: #1c7dff;
}
html[data-sup-mode="light"] {
  --t3: #6e6e75;
  --t2: #4e4e55;
  --blue: #0a5fe8;
}
.list .trow.icloud .snippet {
  opacity: 1 !important;
  color: var(--t2) !important;
}
.list .trow.icloud .when {
  opacity: 1 !important;
  color: var(--t3) !important;
}
.catbar .chip:not(.on) .cn {
  background: rgba(127, 127, 140, 0.28) !important;
  color: var(--text) !important;
}
.catbar .chip.on {
  background: #0a5fe8 !important;
  color: #fff !important;
}
.catbar .chip.on .cn {
  background: rgba(255, 255, 255, 0.22) !important;
  color: #fff !important;
}
.btn.cta {
  color: #fff !important;
  background: #0a5fe8 !important;
}
html[data-sup-mode="light"] .btn.cta {
  color: #fff !important;
  background: #0a5fe8 !important;
}

/* contrast pass, round two: fills use the deep blue, selected rows keep their fill in light mode, tertiary a hair lighter/darker, "in use" pills deeper in light */
html:not([data-sup-mode="light"]) {
  --t3: #9a9aa2;
}
html[data-sup-mode="light"] {
  --t3: #65656c;
}
.btn:not(.sec):not(.ghost):not(.unshare):not(.aisend) {
  background: #0a5fe8 !important;
  color: #fff !important;
  border-color: transparent !important;
}
.list .trow.icloud.on,
.list .trow.icloud.sel-on,
html[data-sup-mode="light"] .list .trow.icloud.on,
html[data-sup-mode="light"] .list .trow.icloud.sel-on {
  background: #0a5fe8 !important;
  border-color: transparent !important;
}
html[data-sup-mode="light"] .mkt-conn em,
html[data-sup-mode="light"] .airow.on,
html[data-sup-mode="light"] .fnav a.on {
  color: #0a5edb !important;
}

/* contrast pass, round three: selected rows keep white text, the phone drawer's app chips read in dark and colour, links a step brighter in the dark, the light launcher footer darker */
.list .trow.icloud.on .snippet,
.list .trow.icloud.sel-on .snippet,
.list .trow.icloud.on .when,
.list .trow.icloud.sel-on .when,
.list .trow.icloud.on .who,
.list .trow.icloud.sel-on .who,
.list .trow.icloud.on .subj,
.list .trow.icloud.sel-on .subj {
  color: #fff !important;
  opacity: 0.95 !important;
}
html:not([data-sup-mode="light"]) {
  --blue: #2a86ff;
}
html:not([data-sup-mode="light"]) body #nav.open .dapps a {
  background: rgba(255, 255, 255, 0.1) !important;
  color: var(--text) !important;
}
html:not([data-sup-mode="light"]) body #nav.open .dapps a.on {
  background: rgba(42, 134, 255, 0.28) !important;
  color: #9cc4ff !important;
}
html[data-sup-mode="light"] body #nav.open .dapps a.on {
  color: #0a5edb !important;
}
body #nav.open .dim,
body #nav.open .dim.small {
  color: var(--t2) !important;
}
html[data-sup-mode="light"] #launcher .lfoot {
  color: rgba(29, 29, 31, 0.72) !important;
}
html[data-sup-mode="light"] #launcher .lfoot a {
  color: rgba(29, 29, 31, 0.82) !important;
}

/* contrast pass, last round: full-white text on selected rows; the drawer's chip rules follow the drawer's own colour (white in light AND colour mode, dark only in dark) */
.list .trow.icloud.on *,
.list .trow.icloud.sel-on * {
  opacity: 1 !important;
  color: #fff !important;
}
html[data-sup-mode="color"] body #nav.open .dapps a {
  background: #f1f3f6 !important;
  color: #1d1d1f !important;
}
html[data-sup-mode="color"] body #nav.open .dapps a.on {
  background: rgba(0, 102, 204, 0.12) !important;
  color: #0a5edb !important;
}

/* ── Settings the Apple way: the same frosted rail + pane as SuperAI and SuperFile; grouped, rounded cards; icon rows ── */
.conv.account,
.conv.home.master:not(.aiapp):not(.calapp) {
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  padding: 0 !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}
.mwrap {
  display: grid !important;
  grid-template-columns: var(--rail-w, 260px) minmax(0, 1fr) !important;
  grid-template-rows: minmax(0, 1fr) !important;
  gap: 10px;
  height: 100% !important;
  padding: 10px;
  box-sizing: border-box;
}
.mnav,
.mwrap > .main {
  background: var(--pane-bg) !important;
  border: 0.5px solid var(--hair) !important;
  border-radius: 14px !important;
  overflow: auto;
  -webkit-backdrop-filter: blur(24px) saturate(1.3);
  backdrop-filter: blur(24px) saturate(1.3);
  min-height: 0;
}
html[data-sup-mode="light"] .mnav {
  background: rgba(255, 255, 255, 0.9) !important;
}
html[data-sup-mode="light"] .mwrap > .main {
  background: rgba(255, 255, 255, 0.86) !important;
}
.mnav {
  padding: 0 !important;
  display: flex;
  flex-direction: column;
  border-right: 0.5px solid var(--hair) !important;
}
.mnav .apphead {
  height: 68px !important;
  box-sizing: border-box;
  padding: 0 1.1rem !important;
  border-bottom: 1px solid var(--hair) !important;
  margin: 0 0 0.35rem !important;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex: none;
}
.appic.lc-set {
  background: linear-gradient(160deg, #a0a4ad, #5b606a) !important;
}
.mnav .apphead .sp {
  flex: 1;
}
.mnav .apphead .aimenu {
  display: none;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  align-items: center;
  justify-content: center;
}
.mrows {
  flex: 1;
  min-height: 0;
  overflow: auto;
  padding: 0.2rem 12px 0.6rem;
  display: flex;
  flex-direction: column;
  gap: 0.1rem;
}
.mrows .sect {
  margin: 0.7rem 0.4rem 0.25rem;
  font-size: 0.72rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t3);
}
.mrows .sect:first-child {
  margin-top: 0.3rem;
}
.mrows a {
  display: flex !important;
  align-items: center;
  gap: 0.6rem;
  padding: 0.55rem 0.8rem !important;
  border-radius: 10px !important;
  color: var(--text) !important;
  text-decoration: none;
  font-size: 0.95rem;
  border: 0 !important;
  margin: 0 !important;
  background: transparent !important;
}
.mrows a svg {
  width: 16px;
  height: 16px;
  color: var(--t2);
  flex: none;
}
.mrows a span {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.mrows a em {
  font-style: normal;
  font-size: 0.74rem;
  color: var(--t3);
}
.mrows a:hover {
  background: var(--layer2) !important;
}
.mrows a.on {
  background: rgba(0, 102, 204, 0.12) !important;
  color: var(--blue) !important;
  font-weight: 600;
}
.mrows a.on svg {
  color: var(--blue);
}
.mnav .airail-foot .invites {
  display: flex;
  gap: 0.5rem;
  padding: 0.2rem 12px 0.2rem;
}
.mnav .airail-foot .invites a.back {
  flex: 1;
  justify-content: center;
  border-radius: 999px !important;
  border: 1px solid var(--bsub) !important;
  padding: 0.6rem 0.8rem !important;
  font-size: 0.9rem;
  color: var(--text) !important;
  background: transparent !important;
}
.mnav .airail-foot .invites a.back svg {
  width: 14px;
  height: 14px;
  margin-right: 0.3rem;
}
.mnav .mout {
  flex: 1;
  border-radius: 999px !important;
  border: 1px solid rgba(255, 69, 58, 0.35) !important;
  background: rgba(255, 69, 58, 0.1) !important;
  color: #ff453a !important;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.6rem 0.8rem !important;
  margin: 0 !important;
  cursor: pointer;
}
.mwrap > .main {
  padding: 0 0 2rem !important;
  max-width: none !important;
}
.mwrap > .main .phead {
  height: 68px;
  box-sizing: border-box;
  display: flex;
  align-items: center;
  padding: 0 1.4rem;
  border-bottom: 1px solid var(--hair);
  margin: 0 0 1rem;
  position: sticky;
  top: 0;
  background: inherit;
  z-index: 2;
}
.mwrap > .main .phead .eyebrow {
  display: none;
}
.mwrap > .main .phead .h1 {
  font-size: 1.05rem;
  font-weight: 600;
  margin: 0;
}
.mwrap > .main .card {
  background: var(--layer) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  margin: 0 1.4rem 1rem !important;
  overflow: hidden;
}
.mwrap > .main .card .hd {
  padding: 0.9rem 1.1rem 0.6rem !important;
  border-bottom: 1px solid var(--hair) !important;
}
.mwrap > .main .card .hd h2 {
  font-size: 0.98rem !important;
  font-weight: 600;
  margin: 0;
}
.mwrap > .main .card .row {
  padding: 0.8rem 1.1rem !important;
  border-top: 1px solid var(--hair) !important;
}
.mwrap > .main .card .row:first-of-type {
  border-top: 0 !important;
}
.mwrap > .main .card p,
.mwrap > .main .card .k {
  font-size: 0.92rem;
}
.mwrap > .main .grid,
.mwrap > .main .cols {
  padding: 0 1.4rem;
}
.mwrap > .main .grid .card,
.mwrap > .main .cols .card {
  margin: 0 0 1rem !important;
}
@media (max-width: 900px) {
  .mwrap {
    grid-template-columns: 1fr !important;
    padding: 0;
    gap: 0;
  }
  .mnav,
  .mwrap > .main {
    border-radius: 0 !important;
    border: 0 !important;
  }
  .mnav {
    display: none !important;
  }
  .mwrap > .main .card {
    margin: 0 0.8rem 1rem !important;
  }
  .mwrap > .main .phead {
    padding: 0 1rem;
  }
}

.mwrap {
  height: calc(100dvh - 82px) !important;
}
@media (max-width: 900px) {
  .mwrap {
    height: auto !important;
    min-height: calc(100dvh - var(--h, 0px));
  }
}
.mwrap > .main .cols {
  column-count: 2 !important;
  column-gap: 1rem;
}
@media (min-width: 1800px) {
  .mwrap > .main .cols {
    column-count: 3 !important;
  }
}
@media (max-width: 1100px) {
  .mwrap > .main .cols {
    column-count: 1 !important;
  }
}

/* Settings cards: the grouped, rounded cards of SuperAI's models page — two columns with air, not a 1px-gutter mosaic; the rail pins its foot */
.mwrap > .main .msgs.acct {
  display: block !important;
  columns: 2 340px !important;
  column-gap: 1rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 1.4rem !important;
  overflow: visible;
}
.mwrap > .main .msgs.acct .msg {
  display: inline-block;
  width: 100%;
  break-inside: avoid;
  box-sizing: border-box;
  margin: 0 0 1rem !important;
  padding: 1rem 1.15rem !important;
  background: var(--layer) !important;
  border: 1px solid var(--hair) !important;
  border-radius: 16px !important;
}
.mwrap > .main .msgs.acct .msg .subj {
  font-size: 1rem !important;
  font-weight: 600;
  margin: 0 0 0.6rem !important;
}
.mwrap > .main .msgs.acct .msg p {
  font-size: 0.92rem;
}
.mnav {
  overflow: hidden !important;
}
.mnav .mrows {
  overflow: auto;
}
@media (max-width: 900px) {
  .mwrap > .main .msgs.acct {
    columns: 1 !important;
    padding: 0 0.8rem !important;
  }
}

html .mnav .mrows a.on,
html[data-sup-mode="light"] .mnav .mrows a.on {
  background: rgba(0, 102, 204, 0.12) !important;
  color: var(--blue) !important;
}
html[data-sup-mode="light"] .mnav .mrows a.on {
  color: #0a5edb !important;
}
html[data-sup-mode="light"] .mnav .mrows a.on svg {
  color: #0a5edb;
}
html[data-sup-mode="light"] .pill.p {
  color: #5b21b6 !important;
  border-color: #7c3aed !important;
}

.mnav {
  display: flex !important;
  flex-direction: column !important;
  height: 100% !important;
  box-sizing: border-box;
}
.mnav .mrows {
  flex: 1 1 auto !important;
  min-height: 0 !important;
  overflow: auto !important;
}
.mnav .airail-foot {
  flex: none;
}
.mnav .airail-foot .invites {
  padding-bottom: 0.6rem;
}

/* the account cluster is placed against the search bar the moment the app paints, then held — never a late, drifting arrival (Shane). Hidden only until the first measurement (a frame), so it can never sit outside the container. */
.hright {
  transition: none !important;
}
.hright.placed {
  visibility: visible !important;
}
body.app-enter .hright.placed,
body.launching .hright.placed {
  visibility: visible !important;
} /* body.launching .hright: dissolves with #shell now (supOutFlat), see the cluster block at the end */

#atype {
  display: none !important;
}
.um-hero .um-type {
  display: inline-block;
  margin-top: 0.35rem;
  font-size: 0.72rem;
  font-weight: 600;
  padding: 0.15rem 0.6rem;
  border-radius: 999px;
  background: rgba(127, 127, 140, 0.22);
  color: var(--text);
}

/* light mode: the classification colours must outrank the light card rule (same specificity family, so restate them under the mode) */
html[data-sup-mode="light"] .list .trow.icloud.cat-transactions,
html[data-sup-mode="light"] .list .trow.icloud.cat-transactions:hover:not(.on):not(.sel-on) {
  border-color: var(--row-trans) !important;
}
html[data-sup-mode="light"] .list .trow.icloud.cat-updates,
html[data-sup-mode="light"] .list .trow.icloud.cat-updates:hover:not(.on):not(.sel-on) {
  border-color: var(--row-upd) !important;
}
html[data-sup-mode="light"] .list .trow.icloud.cat-promotions,
html[data-sup-mode="light"] .list .trow.icloud.cat-promotions:hover:not(.on):not(.sel-on) {
  border-color: var(--row-promo) !important;
}
html[data-sup-mode="light"] .list .trow.icloud.unread,
html[data-sup-mode="light"] .list .trow.icloud.unread:hover:not(.on):not(.sel-on) {
  border-color: var(--row-new) !important;
}
html[data-sup-mode="light"] .list .trow.icloud.starred,
html[data-sup-mode="light"] .list .trow.icloud.starred:hover:not(.on):not(.sel-on) {
  border-color: var(--row-star) !important;
}
html[data-sup-mode="light"] .list .trow.icloud.on,
html[data-sup-mode="light"] .list .trow.icloud.sel-on {
  border-color: transparent !important;
}

/* light mode, last word: classification borders beat the light card rule (body in the selector lifts them above every card rule) */
html[data-sup-mode="light"] body .list .trow.icloud.cat-transactions {
  border-color: var(--row-trans) !important;
}
html[data-sup-mode="light"] body .list .trow.icloud.cat-updates {
  border-color: var(--row-upd) !important;
}
html[data-sup-mode="light"] body .list .trow.icloud.cat-promotions {
  border-color: var(--row-promo) !important;
}
html[data-sup-mode="light"] body .list .trow.icloud.unread {
  border-color: var(--row-new) !important;
}
html[data-sup-mode="light"] body .list .trow.icloud.starred {
  border-color: var(--row-star) !important;
}
html[data-sup-mode="light"] body .list .trow.icloud.on,
html[data-sup-mode="light"] body .list .trow.icloud.sel-on {
  border-color: transparent !important;
}

/* ── Settings, the Apple way (Shane, 2026-09-19: "make it Apple"): grouped inset lists — a small uppercase header, a rounded box of rows with inset hairlines, a footnote under it; macOS push buttons, iOS switches, one column. On a phone the pane comes first and the rail follows it as grouped lists. ── */
.conv.account {
  --sg-box: rgba(255, 255, 255, 0.06);
  --sg-hair: rgba(255, 255, 255, 0.09);
  --sg-push: rgba(255, 255, 255, 0.12);
  --sg-push-h: rgba(255, 255, 255, 0.18);
  --sg-field: rgba(0, 0, 0, 0.28);
  --sg-seg: rgba(120, 120, 128, 0.24);
  --sg-red: #ff453a;
}
html[data-sup-mode="light"] .conv.account {
  --sg-box: #fff;
  --sg-hair: rgba(0, 0, 0, 0.08);
  --sg-push: #fff;
  --sg-push-h: #f4f4f6;
  --sg-field: #fff;
  --sg-seg: rgba(120, 120, 128, 0.16);
  --sg-red: #ff3b30;
}
html[data-sup-mode="light"] .conv.account .mwrap > .main {
  background: rgba(242, 242, 247, 0.9) !important;
}
.conv.account .mwrap > .main .msgs.acct.sets {
  display: block !important;
  columns: auto !important;
  column-count: auto !important;
  column-gap: 0 !important;
  max-width: 760px;
  padding: 0.3rem 1.6rem 2rem !important;
  background: transparent !important;
  border: 0 !important;
}
.sets .sg {
  margin: 0 0 1.6rem;
  break-inside: avoid;
}
.sets .sg-h {
  margin: 0 0 0.45rem 1rem;
  font: 600 0.74rem/1.3 var(--sans);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--t3);
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sets .sg-b {
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sets .sg-b > * {
  display: block;
  padding: 0.72rem 1rem !important;
  margin: 0 !important;
  border-top: 0.5px solid var(--sg-hair);
  font-size: 0.9rem;
  line-height: 1.45;
  color: var(--text);
}
.sets .sg-b > *:first-child {
  border-top: 0;
}
.sets .sg-b > *:empty {
  display: none;
}
.sets .sg-b > .dim,
.sets .sg-b > p,
.sets .sg-b > .body.dim {
  color: var(--t2);
}
.sets .sg-b > .small,
.sets .sg-b > .body.small,
.sets .sg-b > p.small {
  font-size: 0.9rem !important;
}
.sets .sg-b > .body.mono {
  font-family: var(--mono);
  font-size: 0.84rem;
  overflow-wrap: anywhere;
  user-select: all;
}
.sets .sg-b > .lock {
  color: var(--t3);
  font-size: 0.8rem;
}
.sets .sg-b .lock svg {
  display: none;
}
.sets .sg-f {
  margin: 0.45rem 1rem 0;
  font-size: 0.78rem;
  line-height: 1.45;
  color: var(--t3);
}
.sets .sg-b a:not(.btn) {
  color: var(--blue);
  text-decoration: none;
}
.sets .sg-b a:not(.btn):hover {
  text-decoration: underline;
}
.sets .sg-b b {
  font-weight: 600;
}
/* rows inside a list */
.sets .sg-b > .sg-rows {
  padding: 0 !important;
}
.sets .sg-b > .sg-rows:not(:has(> .rrow, > .mem, > .fld, > .tplrow, > .chk, > label)) {
  padding: 0.72rem 1rem !important;
  color: var(--t2);
}
.sets .sg-rows {
  display: block;
}
.sets .sg-rows > * {
  padding: 0.6rem 1rem;
  margin: 0;
  border-top: 0.5px solid var(--sg-hair);
}
.sets .sg-rows > *:first-child {
  border-top: 0;
}
.sets .rrow {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  border-top: 0.5px solid var(--sg-hair);
}
.sets .rrow .rmain {
  flex: 1;
  min-width: 0;
}
.sets .rrow .raddr {
  font-size: 0.9rem;
  color: var(--text);
}
.sets .rrow .dim.small,
.sets .rrow .small {
  font-size: 0.78rem;
  color: var(--t3);
}
.sets .mem {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  cursor: default;
  border-radius: 0;
  font-size: 0.9rem;
  color: var(--text);
}
.sets .mem .av {
  width: 32px;
  height: 32px;
  font-size: 0.7rem;
}
.sets .mem .dim.small {
  display: block;
  font-size: 0.78rem;
  color: var(--t3);
}
.sets .mem .mono.small {
  font-size: 0.78rem;
}
.sets .sg-rows > .dim.small {
  font-size: 0.8rem;
  color: var(--t3);
  padding: 0.6rem 1rem;
}
.sets .sg-rows > label.chk {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-size: 0.9rem;
  color: var(--text) !important;
  padding: 0.7rem 1rem;
}
/* label + control rows */
.sets .fld {
  display: grid;
  grid-template-columns: minmax(140px, 1fr) minmax(0, 2fr);
  gap: 0.4rem 1rem;
  align-items: center;
}
.sets .fld:has(textarea),
.sets .fld:has(.sg-rows) {
  grid-template-columns: 1fr;
}
.sets .fld > label {
  font-size: 0.9rem;
  color: var(--text);
  margin: 0;
  padding: 0;
}
.sets .fld > label .dim {
  display: block;
  font-size: 0.78rem;
  color: var(--t3);
  white-space: normal;
}
.sets .fld > .body {
  font-size: 0.9rem;
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  color: var(--text);
}
.sets .fld > .sg-rows > * {
  padding: 0.5rem 0;
}
/* fields */
.sets .in,
.sets input:not([type="checkbox"]):not([type="radio"]):not([type="file"]),
.sets textarea {
  width: 100%;
  max-width: none;
  height: 32px;
  padding: 0 0.6rem;
  border-radius: 7px;
  border: 0.5px solid var(--sg-hair);
  background: var(--sg-field);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
  margin: 0;
}
.sets textarea,
.sets textarea.in {
  height: auto;
  min-height: 4.4rem;
  padding: 0.45rem 0.6rem;
  line-height: 1.4;
  resize: vertical;
}
.sets .in:focus,
.sets input:focus,
.sets textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.28);
}
/* buttons: macOS push buttons; ghost is plain blue text; danger is plain red */
.sets .btn {
  height: 30px !important;
  padding: 0 0.85rem !important;
  border-radius: 7px !important;
  font: 500 0.84rem/1 var(--sans) !important;
  gap: 0.4rem;
  box-shadow: none;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
  line-height: 1;
}
.sets .btn.sm {
  height: 28px !important;
  font-size: 0.82rem !important;
}
.sets .btn:not(.sec):not(.ghost):not(.danger) {
  background: var(--blue) !important;
  color: #fff !important;
  border: 0 !important;
}
.sets .btn:not(.sec):not(.ghost):not(.danger):hover {
  filter: brightness(1.08);
}
.sets .btn.sec {
  background: var(--sg-push) !important;
  color: var(--text) !important;
  border: 0.5px solid var(--sg-hair) !important;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.12) !important;
}
.sets .btn.sec:hover {
  background: var(--sg-push-h) !important;
}
.sets .btn.ghost {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--blue) !important;
  padding: 0 0.45rem !important;
}
.sets .btn.ghost:hover {
  background: rgba(10, 132, 255, 0.1) !important;
}
.sets .btn.danger {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--sg-red) !important;
}
.sets .btn.danger:hover {
  background: rgba(255, 69, 58, 0.1) !important;
}
.sets .btn .ic,
.sets .btn svg {
  width: 14px;
  height: 14px;
  margin: 0;
}
.sets .tools {
  display: flex !important;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
}
.sets .sg-b > button.btn,
.sets .sg-b > a.btn,
.sets .sg-b > label.btn {
  display: inline-flex;
  margin: 0.6rem 1rem !important;
  padding: 0 0.85rem !important;
  border-top: 0;
}
.sets .sg-b > .btn + .btn {
  margin-left: 0 !important;
}
/* the Sign out group: one red, centred row (iOS) */
.sets .sg-b > #out {
  display: flex;
  width: 100%;
  justify-content: center;
  height: auto !important;
  padding: 0.8rem 1rem !important;
  margin: 0 !important;
  border-top: 0.5px solid var(--sg-hair) !important;
  border-radius: 0 !important;
  font-size: 0.95rem !important;
}
/* iOS switches */
.sets .sw2 {
  width: 40px;
  height: 24px;
}
.sets .sw2 span {
  background: rgba(120, 120, 128, 0.32);
  border-radius: 12px;
}
.sets .sw2 span::after {
  width: 20px;
  height: 20px;
  top: 2px;
  left: 2px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
}
.sets .sw2 input:checked + span {
  background: #34c759;
}
.sets .sw2 input:checked + span::after {
  transform: translateX(16px);
}
.sets input[type="checkbox"] {
  accent-color: var(--blue);
  width: 16px;
  height: 16px;
  margin: 0;
}
/* segmented controls (Look, receiving files) */
.sets .lookwrap {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  flex-wrap: wrap;
}
.sets .modeseg {
  background: var(--sg-seg);
  border: 0;
  border-radius: 9px;
  padding: 2px;
  margin: 0 !important;
  max-width: 340px;
  flex: 1;
}
.sets .modeseg button {
  border-radius: 7px;
  font-size: 0.82rem;
  padding: 0.4rem 0.5rem;
}
.sets .modeseg button.on {
  background: var(--sg-push);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.18);
}
.sets .lookwrap .modedef {
  font-size: 0.8rem !important;
  color: var(--t3) !important;
  padding: 0 !important;
}
/* templates */
.sets .tplrow {
  display: grid;
  grid-template-columns: 1fr 1fr auto;
  gap: 0.5rem;
  align-items: start;
}
.sets .tplrow textarea {
  grid-column: 1/3;
}
.sets .tplrow .btn {
  grid-column: 3;
  grid-row: 1/3;
  align-self: start;
}
/* tags */
html .sets .pill {
  font: 500 0.7rem/1 var(--sans) !important;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  border: 0 !important;
  background: var(--sg-seg);
  color: var(--t2) !important;
}
html .sets .pill.r {
  background: rgba(255, 69, 58, 0.15);
  color: var(--sg-red) !important;
}
/* the hide-a-sender form */
.sets form.tools {
  display: flex !important;
  gap: 0.5rem;
}
.sets form.tools input {
  flex: 1;
  min-width: 0;
}
/* rail: the selected row is filled blue, as in System Settings */
html .conv.account .mnav .mrows a.on {
  background: var(--blue) !important;
  color: #fff !important;
}
html .conv.account .mnav .mrows a.on svg {
  color: #fff;
}
html .conv.account .mnav .mrows a.on em {
  color: rgba(255, 255, 255, 0.7);
}
/* phone: the pane first, the rail after it as grouped lists */
@media (max-width: 900px) {
  .conv.account .mwrap {
    display: flex !important;
    flex-direction: column;
    height: auto !important;
    min-height: 0 !important;
  }
  .conv.account .mwrap > .main {
    order: 0;
    flex: none;
    min-height: 0;
    padding-bottom: 0 !important;
    overflow: visible;
  }
  .conv.account .mwrap > .main .msgs.acct.sets {
    padding: 0.3rem 1rem 1rem !important;
  }
  .conv.account .mnav {
    order: 1;
    display: block !important;
    height: auto !important;
    min-height: 0 !important;
    border: 0 !important;
    background: transparent !important;
    backdrop-filter: none !important;
    -webkit-backdrop-filter: none !important;
    padding: 0 1rem 2rem !important;
    overflow: visible !important;
  }
  .conv.account .mnav .apphead {
    display: none !important;
  }
  .conv.account .mnav .mrows {
    padding: 0;
    gap: 0;
    overflow: visible !important;
    display: block;
  }
  .conv.account .mnav .mrows .sect {
    margin: 1.2rem 1rem 0.45rem;
    font-size: 0.74rem;
    letter-spacing: 0.05em;
    color: var(--t3);
  }
  .conv.account .mnav .mrows a {
    background: var(--sg-box) !important;
    border-radius: 0 !important;
    padding: 0.7rem 1rem !important;
    border-top: 0.5px solid var(--sg-hair) !important;
    font-size: 1rem;
  }
  .conv.account .mnav .mrows .sect + a {
    border-top: 0 !important;
    border-top-left-radius: 12px !important;
    border-top-right-radius: 12px !important;
  }
  .conv.account .mnav .mrows a:has(+ .sect),
  .conv.account .mnav .mrows a:last-child {
    border-bottom-left-radius: 12px !important;
    border-bottom-right-radius: 12px !important;
  }
  .conv.account .mnav .airail-foot {
    margin-top: 1.2rem;
  }
}
.sets .fld > .btn {
  justify-self: start;
}
.sets .sg-b > .sg-rows:not(:has(> .rrow, > .mem, > .fld, > .tplrow, > .chk, > label)) > * {
  padding: 0;
  border: 0;
}
/* the sticky page head is frosted, so rows never show through it; on a phone the rail spans the width */
.conv.account {
  --sg-head: rgba(18, 18, 22, 0.72);
}
html[data-sup-mode="light"] .conv.account {
  --sg-head: rgba(242, 242, 247, 0.82);
}
.conv.account .mwrap > .main .phead {
  background: var(--sg-head) !important;
  -webkit-backdrop-filter: blur(20px) saturate(1.4);
  backdrop-filter: blur(20px) saturate(1.4);
}
@media (max-width: 900px) {
  .conv.account .mnav {
    width: auto !important;
    max-width: none !important;
  }
}
html .conv.account .mwrap > .main {
  padding-top: 0 !important;
}
html .conv.account .sets .btn.danger,
html .conv.account .sets .sg-b > #out {
  background: transparent !important;
  color: var(--sg-red) !important;
  border: 0 !important;
  box-shadow: none !important;
}
html .conv.account .sets .btn.danger:hover {
  background: rgba(255, 69, 58, 0.1) !important;
}
@media (max-width: 900px) {
  html .conv.account .mnav {
    align-self: stretch !important;
    width: auto !important;
  }
}
/* the settings rail matches SuperDrop's (Shane, 2026-09-19): no inset on the pane, 42 px rows with a rounded tinted highlight */
@media (min-width: 901px) {
  html .conv.account .mnav {
    padding: 0 !important;
  }
  html .conv.account .mnav .mrows {
    padding: 0.6rem 0.75rem 0.8rem !important;
    gap: 0.1rem;
  }
  html .conv.account .mnav .mrows a {
    padding: 0.6rem 0.8rem !important;
    border-radius: 10px !important;
    font-size: 0.95rem;
  }
  html .conv.account .mnav .mrows .sect {
    margin: 0.9rem 0.5rem 0.3rem;
  }
  html .conv.account .mnav .mrows a.on {
    background: rgba(0, 102, 204, 0.12) !important;
    color: var(--blue) !important;
    font-weight: 600;
  }
  html .conv.account .mnav .mrows a.on svg {
    color: var(--blue);
  }
  html .conv.account .mnav .mrows a.on em {
    color: var(--t3);
  }
  html[data-sup-mode="light"] .conv.account .mnav .mrows a.on {
    color: #0a5edb !important;
  }
  html[data-sup-mode="light"] .conv.account .mnav .mrows a.on svg {
    color: #0a5edb;
  }
}
@media (min-width: 901px) {
  html .conv.account .mwrap {
    padding: 10px !important;
    gap: 10px !important;
  }
  html .conv.account .mwrap > .main {
    padding: 0 0 2rem !important;
  }
  html .conv.account .mwrap > .main .phead {
    padding: 0 2.2rem;
  }
  html .conv.account .mwrap > .main .msgs.acct.sets {
    padding: 0.3rem 2.2rem 2rem !important;
  }
}
/* Settings sits on a grey wallpaper, the way Mail is blue and Messages green (Shane, 2026-09-19) */
html body.setmode #wallpaper {
  filter: saturate(0) brightness(1.02) !important;
}
html body.setmode #wallpaper.wp-enter,
html body.setmode #wallpaper.wp-pulse {
  filter: saturate(0) brightness(1.08) !important;
}
/* ── Settings, minimal (Shane, 2026-09-19): the pane is one grouped list of rows; a row opens its group in the sheet ── */
.sg-sheet {
  --sg-box: rgba(255, 255, 255, 0.06);
  --sg-hair: rgba(255, 255, 255, 0.09);
  --sg-push: rgba(255, 255, 255, 0.12);
  --sg-push-h: rgba(255, 255, 255, 0.18);
  --sg-field: rgba(0, 0, 0, 0.28);
  --sg-seg: rgba(120, 120, 128, 0.24);
  --sg-red: #ff453a;
}
html[data-sup-mode="light"] .sg-sheet {
  --sg-box: #fff;
  --sg-hair: rgba(0, 0, 0, 0.08);
  --sg-push: #fff;
  --sg-push-h: #f4f4f6;
  --sg-field: #fff;
  --sg-seg: rgba(120, 120, 128, 0.16);
  --sg-red: #ff3b30;
}
html .conv.account .mwrap > .main .msgs.acct.sets.sg-min {
  padding: 0 !important;
  margin: 0.3rem 2.2rem 2rem;
  max-width: 640px;
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.sets.sg-min .sg-row {
  background: var(--sg-box);
  border-top: 0.5px solid var(--sg-hair);
  padding: 0.8rem 1rem;
  min-height: 46px;
  transition: background 0.12s ease;
}
.sets.sg-min .sg-row:hover {
  background: var(--sg-push-h);
}
.sets.sg-min .sg-row:active {
  background: var(--sg-seg);
}
.sets.sg-min .sg-row .sg-t {
  font-size: 0.92rem;
  font-weight: 500;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.sets.sg-min .sg-row .sg-s {
  font-size: 0.85rem;
}
.sets.sg-min .sg-row .sg-chev {
  width: 14px;
  height: 14px;
  opacity: 0.7;
}
.sheet .box.setsh {
  max-height: 88dvh !important;
  overflow: auto !important;
  padding: 1rem 1.2rem 1.4rem !important;
  max-width: 640px !important;
}
.sheet .box.setsh .sg-top .ash-x {
  display: inline-flex;
  width: 34px;
  height: 34px;
}
.sheet .box.setsh .sg-top .ash-x svg {
  width: 16px;
  height: 16px;
}
.sheet .box .sg-sheet .btn {
  border-radius: 7px !important;
}
.sheet .box .sg-sheet .btn.ghost,
.sheet .box .sg-sheet .btn.danger {
  border-radius: 7px !important;
}
@media (max-width: 900px) {
  html .conv.account .mwrap > .main .msgs.acct.sets.sg-min {
    margin: 0.3rem 1rem 1rem;
  }
  .sets.sg-min .sg-row {
    padding: 0.9rem 1rem;
    min-height: 50px;
  }
  .sets.sg-min .sg-row .sg-t {
    font-size: 1rem;
  }
  .sets.sg-min .sg-row .sg-s {
    font-size: 0.9rem;
    max-width: 45%;
  }
}
@media (max-width: 900px) {
  .sets.sg-min .sg-row .sg-t {
    flex: 1;
    min-width: 0;
  }
  .sets.sg-min .sg-row .sg-s {
    flex: 0 1 auto;
    max-width: 50%;
  }
}
@media (max-width: 900px) {
  .sets.sg-min .sg-row .sg-t {
    flex: 0 0 auto;
  }
  .sets.sg-min .sg-row .sg-s {
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
}
/* System Settings: boxes of related rows with coloured icon tiles, the profile card on top (Shane, 2026-09-19: "even more Apple") */
html .conv.account .mwrap > .main .msgs.acct.sets.sg-min {
  border: 0;
  border-radius: 0;
  overflow: visible;
  box-shadow: none;
  background: transparent !important;
}
.sets.sg-min .sgrp {
  background: transparent;
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0 0 1.1rem;
}
.sets.sg-min .sgrp .sg:first-child .sg-row {
  border-top: 0;
  border-radius: 12px 12px 0 0;
}
.sets.sg-min .sgrp .sg:last-child .sg-row {
  border-radius: 0 0 12px 12px;
}
.sets.sg-min .sg-row {
  padding: 0.55rem 1rem;
  min-height: 46px;
}
.sets.sg-min .sg-ic {
  width: 28px;
  height: 28px;
  border-radius: 7px;
  box-shadow: inset 0 0 0 0.5px rgba(0, 0, 0, 0.08);
}
.sets.sg-min .sg-ic svg {
  width: 15px;
  height: 15px;
}
.sets.sg-min .sg-row.sg-danger {
  justify-content: center;
}
.sets.sg-min .sg-row.sg-danger .sg-t {
  color: var(--sg-red);
  font-weight: 500;
}
.sets.sg-min .sg-row.sg-danger .sg-s,
.sets.sg-min .sg-row.sg-danger .sg-chev {
  display: none;
}
.sets.sg-min .sg-row.sg-profile {
  padding: 0.9rem 1rem;
  gap: 1rem;
}
.sets.sg-min .sg-row.sg-profile .av {
  width: 56px;
  height: 56px;
  font-size: 1.2rem;
}
.sets.sg-min .sg-row.sg-profile b {
  font-size: 1.05rem;
  font-weight: 600;
}
.sets.sg-min .sg-row.sg-profile .sgp-t > span {
  color: var(--t2);
  font-size: 0.85rem;
}
.sets.sg-min .sg-row.sg-profile .sgp-t > .sg-s {
  color: var(--t3);
  font-size: 0.78rem;
  text-align: left;
  max-width: none;
  flex: none;
  white-space: normal;
}
@media (max-width: 900px) {
  .sets.sg-min .sg-row {
    padding: 0.6rem 1rem;
  }
  .sets.sg-min .sg-ic {
    width: 30px;
    height: 30px;
  }
  .sets.sg-min .sg-row.sg-profile .av {
    width: 60px;
    height: 60px;
  }
}
@media (max-width: 900px) {
  .sets.sg-min .sg-row .sg-t .pill {
    display: none;
  }
}
/* ── Dashboard the Apple way (Shane, 2026-09-19): widget tiles, a chart card, grouped rows, on the Settings frame ── */
html .conv.account.hdash .mwrap > .main .hd-body {
  padding: 0.3rem 2.2rem 2rem;
  max-width: 760px;
}
.conv.account.hdash .phead .actions {
  display: flex;
  gap: 0.5rem;
  margin: 0;
}
.conv.account.hdash .phead .btn {
  height: 30px !important;
  padding: 0 0.85rem !important;
  border-radius: 7px !important;
  font: 500 0.84rem/1 var(--sans) !important;
  gap: 0.4rem;
  box-shadow: none;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.conv.account.hdash .phead .btn svg {
  width: 14px;
  height: 14px;
  margin: 0;
}
.conv.account.hdash .phead .btn:not(.sec) {
  background: var(--blue) !important;
  color: #fff !important;
  border: 0 !important;
}
.conv.account.hdash .phead .btn.sec {
  background: var(--sg-push) !important;
  color: var(--text) !important;
  border: 0.5px solid var(--sg-hair) !important;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.12) !important;
}
.hdash .hd-tiles {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 0.8rem;
  background: transparent;
  border: 0;
  margin: 0 0 1.1rem;
}
.hdash .hd-tile {
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  gap: 0.1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.hdash .hd-tile .sg-ic {
  margin-bottom: 0.5rem;
}
.hdash .hd-tile .k {
  font-size: 0.8rem;
  color: var(--t3);
}
.hdash .hd-tile b {
  font-size: 1.7rem;
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.hdash .hd-tile .s {
  font-size: 0.76rem;
  color: var(--t3);
}
.hdash .hd-card,
.hdash .hd-grp {
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0 0 1.1rem;
}
.hdash .hd-card {
  padding: 0.9rem 1rem;
}
.hdash .hd-grp {
  overflow: hidden;
}
.hdash .hd-head {
  margin: 0 0.3rem 0.45rem;
}
.hdash .hd-head b {
  font-size: 0.95rem;
  font-weight: 600;
}
.hdash .hd-head a {
  font-size: 0.85rem;
  color: var(--blue);
  text-decoration: none;
}
.hdash .hd-head a:hover {
  text-decoration: underline;
}
.hdash .hd-head span {
  font-size: 0.8rem;
  color: var(--t3);
}
.hdash .hd-head.hd-in {
  margin: 0 0 0.4rem;
}
.hdash .spark {
  height: 90px;
  border-bottom: 0.5px solid var(--sg-hair);
  gap: 4px;
  margin: 0.4rem 0 0.3rem;
}
.hdash .spark i {
  flex: 1;
  background: var(--blue);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.hdash .spark i.z {
  background: var(--sg-seg);
}
.hdash .axis {
  display: flex;
  justify-content: space-between;
  font: 0.74rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--t3);
  margin: 0;
}
.hdash .hd-row {
  border-top: 0.5px solid var(--sg-hair);
  min-height: 56px;
  padding: 0.6rem 1rem;
  transition: background 0.12s ease;
}
.hdash .hd-row:first-child {
  border-top: 0;
}
.hdash .hd-row:hover {
  background: var(--sg-push-h);
}
.hdash .hd-row .hd-main b {
  font-size: 0.92rem;
  font-weight: 500;
}
.hdash .hd-row .hd-main span {
  font-size: 0.82rem;
  color: var(--t3);
}
.hdash .hd-row .hd-meta {
  font-size: 0.78rem;
}
.hdash .hd-row .badge {
  background: var(--blue);
  color: #fff;
  border-radius: 999px;
  padding: 0.12em 0.55em;
  font-size: 0.72rem;
  font-weight: 600;
  line-height: 1.3;
}
.hdash .hd-row .sg-chev {
  color: var(--t3);
  width: 14px;
  height: 14px;
  flex: none;
  opacity: 0.7;
}
.hdash .hd-row.static:hover {
  background: transparent;
}
.hdash .hd-row.static .hd-main a {
  color: var(--blue);
  text-decoration: none;
}
.hdash .hd-empty {
  padding: 1.4rem 1rem;
  font-size: 0.85rem;
  color: var(--t3);
}
.hdash .hd-empty b {
  color: var(--text);
  font-weight: 600;
}
@media (max-width: 900px) {
  html .conv.account.hdash .mwrap > .main .hd-body {
    padding: 0.3rem 1rem 1rem;
  }
  .hdash .hd-tiles {
    grid-template-columns: 1fr 1fr;
    gap: 0.6rem;
  }
  .conv.account.hdash .phead {
    height: auto !important;
    flex-wrap: wrap;
    padding: 0.6rem 1rem 0.7rem;
    gap: 0.5rem;
  }
  .conv.account.hdash .phead .pt {
    flex: 1 1 100%;
  }
  .conv.account.hdash .phead .actions {
    width: 100%;
  }
  .conv.account.hdash .phead .actions .btn {
    flex: 1;
    justify-content: center;
    height: 36px !important;
  }
}
/* the rail's Back is a chevron at the top, to the launcher; Sign out is a plain red row (Shane, 2026-09-19: "they don't look like Apple") */
.conv.account .mnav .apphead {
  gap: 0.5rem;
}
.conv.account .mnav .apphead .sback {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  color: var(--t2);
  margin: 0 0.1rem 0 -0.3rem;
  transition: background 0.12s ease;
}
.conv.account .mnav .apphead .sback:hover {
  background: var(--sg-seg);
  color: var(--text);
}
.conv.account .mnav .apphead .sback:active {
  background: var(--sg-hair);
}
.conv.account .mnav .apphead .sback svg {
  width: 18px;
  height: 18px;
}
.conv.account .mnav .airail-foot .invites {
  padding: 0.35rem 12px 0.8rem;
}
html .conv.account .mnav .mout {
  flex: 1;
  border: 0 !important;
  background: transparent !important;
  color: var(--sg-red) !important;
  border-radius: 8px !important;
  padding: 0.6rem 0.8rem !important;
  font-weight: 500;
  font-size: 0.92rem;
}
html .conv.account .mnav .mout:hover {
  background: rgba(255, 69, 58, 0.1) !important;
}
@media (max-width: 900px) {
  html .conv.account .mnav .mout {
    background: var(--sg-box) !important;
    border: 0.5px solid var(--sg-hair) !important;
    border-radius: 12px !important;
    padding: 0.85rem !important;
    font-size: 1rem;
  }
  .conv.account .mnav .airail-foot .invites {
    padding: 0.6rem 0 1rem;
  }
}
html .conv.account .mnav .mout {
  text-align: center;
  justify-content: center;
}
@media (max-width: 900px) {
  .conv.account .mnav .airail-foot .invites {
    display: none;
  }
  .conv.account .mnav .airail-foot {
    border: 0 !important;
  }
}
/* the grid + avatar cluster anchors to the frosted head on Settings, Dashboard and app settings pages; the head keeps room for it */
@media (min-width: 901px) {
  body.tr-conv .conv.account .mwrap > .main .phead {
    padding-right: calc(2.2rem + var(--tr-w, 102px)) !important;
  }
}
/* the grid + avatar cluster lives on <body> on desktop, pinned by its right edge (no dependence on its own width), and resolves and dissolves with the page — the same supInFlat / supOutFlat as #shell (Shane, 2026-09-19: "why can't it load with the rest of the page at the same time?") */
@media (min-width: 901px) {
  html body > .hright {
    left: auto !important;
    right: var(--tr-right, 20px) !important;
  }
  html body.app-enter .hright.placed {
    visibility: visible !important;
    opacity: 0;
    filter: blur(14px);
  }
  html body.app-enter.app-go .hright.placed {
    animation: supInFlat 1s cubic-bezier(0.25, 0.1, 0.25, 1) forwards;
  }
  html body.launching > .hright {
    visibility: visible !important;
    animation: supOutFlat 0.75s cubic-bezier(0.4, 0, 0.6, 1) forwards;
    pointer-events: none !important;
    transition: none !important;
  }
  @media (prefers-reduced-motion: reduce) {
    html body.app-enter .hright.placed {
      opacity: 1;
      filter: none;
      animation: none !important;
    }
    html body.launching > .hright {
      animation: none !important;
      opacity: 0 !important;
    }
  }
}
/* rows that replace a skeleton fade and rise in (the launcher's rowIn), never a pop (Shane, 2026-09-19) */
#list.rows-in .trow,
#list.rows-in .empty {
  animation: rowIn 0.45s ease both;
}
#list.rows-in .trow:nth-child(n + 3) {
  animation-delay: 0.03s;
}
#list.rows-in .trow:nth-child(n + 5) {
  animation-delay: 0.06s;
}
#list.rows-in .trow:nth-child(n + 7) {
  animation-delay: 0.09s;
}
#list.rows-in .trow:nth-child(n + 9) {
  animation-delay: 0.12s;
}
@media (prefers-reduced-motion: reduce) {
  #list.rows-in .trow,
  #list.rows-in .empty {
    animation: none;
  }
}
/* the bell sits with the grid and the avatar: same size and hover as the grid's summary */
.hright .bell {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  color: var(--t2);
}
.hright .bell:hover {
  background: var(--glass3);
  color: var(--text);
}
.hright .bell svg {
  width: 20px;
  height: 20px;
}
html[data-sup-mode="light"] .hright .bell .nf-dot {
  box-shadow: 0 0 0 2px #fff;
}
/* ── Master console the Apple way (Shane, 2026-09-19): the Settings frame and rail, and the console's own blocks — stat tiles, chart cards, tables, toolbars, switches, grouped fields — in that language ── */
.appic.lc-master {
  background: linear-gradient(160deg, #6e6e73, #3a3a3c) !important;
}
html .conv.account.mc .mnav .mrows a .sg-ic {
  width: 22px;
  height: 22px;
  border-radius: 6px;
  flex: none;
}
html .conv.account.mc .mnav .mrows a .sg-ic svg {
  width: 13px;
  height: 13px;
  color: #fff;
}
html .conv.account.mc .mwrap > .main > :not(.phead) {
  margin-left: 2.2rem;
  margin-right: 2.2rem;
  max-width: 1040px;
}
.mc .main > .dim.small:only-child {
  margin-top: 1rem;
}
/* headings */
.mc .h2.rule {
  border: 0 !important;
  margin-top: 1.5rem !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
  font-size: 0.95rem !important;
  font-weight: 600 !important;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 0.6rem;
}
.mc .h2.rule a {
  font-size: 0.85rem;
  color: var(--blue);
  font-weight: 500;
}
.mc .h3 {
  font-size: 0.9rem;
  font-weight: 600;
  margin-top: 1rem;
  margin-bottom: 0.45rem;
}
.mc .lead,
.mc p.dim {
  color: var(--t2);
}
/* stat tiles */
.mc .grid.stats {
  display: grid !important;
  grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)) !important;
  gap: 0.8rem !important;
  background: transparent !important;
  border: 0 !important;
  padding: 0 !important;
  margin: 0 0 1rem;
}
.mc .grid.stats > *,
.mc .stat {
  background: var(--sg-box) !important;
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px !important;
  padding: 0.85rem 1rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .stat .k {
  font-size: 0.78rem;
  color: var(--t3);
}
.mc .stat b {
  font-size: 1.6rem !important;
  font-weight: 600 !important;
  letter-spacing: -0.02em;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
}
.mc .stat .s {
  font-size: 0.74rem;
  color: var(--t3);
}
.mc .stat b.warn {
  color: #ff9f0a;
}
/* chart cards */
.mc .two > div:has(> .spark),
.mc .main > div:has(> .spark) {
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  padding: 0.9rem 1rem;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .spark {
  height: 90px;
  border-bottom: 0.5px solid var(--sg-hair);
  gap: 4px;
  margin: 0.5rem 0 0.3rem;
}
.mc .spark i {
  flex: 1;
  background: var(--blue);
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.mc .spark i.z {
  background: var(--sg-seg);
}
.mc .axis {
  display: flex;
  justify-content: space-between;
  font: 0.74rem/1.4 var(--sans);
  letter-spacing: 0;
  text-transform: none;
  color: var(--t3);
}
.mc .eyebrow {
  font: 600 0.74rem/1.3 var(--sans);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t3);
}
.mc .two {
  gap: 1rem;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
}
/* tables */
.mc .tblwrap {
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px;
  background: var(--sg-box);
  overflow: auto;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
  margin: 0 0 1rem;
}
.mc .tbl {
  background: transparent !important;
  font-size: 0.84rem;
  border: 0;
}
.mc .tbl th {
  font-size: 0.72rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--t3);
  font-weight: 600;
  padding: 0.6rem 0.9rem;
  border: 0;
  border-bottom: 0.5px solid var(--sg-hair);
  background: transparent;
  text-align: left;
  white-space: nowrap;
}
.mc .tbl td {
  padding: 0.6rem 0.9rem;
  border: 0;
  border-top: 0.5px solid var(--sg-hair);
  vertical-align: middle;
  color: var(--text);
}
.mc .tbl tbody tr:first-child td {
  border-top: 0;
}
.mc .tbl tr:hover td {
  background: rgba(120, 120, 128, 0.06);
}
.mc .tbl .mono {
  font-size: 0.8rem;
}
.mc .tbl .av {
  width: 32px;
  height: 32px;
  font-size: 0.72rem;
}
/* toolbars, bulk bars, empty states, tags */
.mc .toolbar {
  margin: 0 0 0.9rem;
  gap: 0.5rem;
}
.mc .bulk {
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  padding: 0.5rem 0.8rem;
  margin: 0 0 0.9rem;
  gap: 0.4rem;
}
.mc .emptybox {
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  background: var(--sg-box);
  padding: 1.4rem 1rem;
  color: var(--t3);
  font-size: 0.85rem;
}
.mc .emptybox b {
  display: block;
  color: var(--text);
  font-weight: 600;
  margin-bottom: 0.2rem;
}
html .mc .pill {
  font: 500 0.7rem/1 var(--sans) !important;
  letter-spacing: 0;
  text-transform: none;
  padding: 0.22em 0.6em;
  border-radius: 999px;
  border: 0 !important;
  background: var(--sg-seg);
  color: var(--t2) !important;
}
html .mc .pill.r {
  background: rgba(255, 69, 58, 0.15);
  color: #ff453a !important;
}
html .mc .pill.g {
  background: rgba(48, 209, 88, 0.16);
  color: #1f9d45 !important;
}
.mc .banner {
  border-radius: 12px;
  border: 0.5px solid var(--sg-hair);
}
/* buttons and fields — the Settings sheet's */
.mc .btn {
  height: 30px !important;
  padding: 0 0.85rem !important;
  border-radius: 7px !important;
  font: 500 0.84rem/1 var(--sans) !important;
  gap: 0.4rem;
  box-shadow: none;
  letter-spacing: 0;
  text-transform: none;
  white-space: nowrap;
}
.mc .btn.sm {
  height: 28px !important;
  font-size: 0.82rem !important;
}
.mc .btn:not(.sec):not(.ghost):not(.danger) {
  background: var(--blue) !important;
  color: #fff !important;
  border: 0 !important;
}
.mc .btn.sec {
  background: var(--sg-push) !important;
  color: var(--text) !important;
  border: 0.5px solid var(--sg-hair) !important;
  box-shadow: 0 0.5px 1.5px rgba(0, 0, 0, 0.12) !important;
}
.mc .btn.ghost {
  background: transparent !important;
  box-shadow: none !important;
  border: 0 !important;
  color: var(--blue) !important;
  padding: 0 0.45rem !important;
}
.mc .btn.danger {
  background: transparent !important;
  border: 0.5px solid rgba(255, 69, 58, 0.4) !important;
  color: #ff453a !important;
}
.mc .btn.danger:hover {
  background: rgba(255, 69, 58, 0.1) !important;
}
.mc .btn svg {
  width: 14px;
  height: 14px;
}
.mc .in,
.mc select,
.mc input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="file"]):not([type="color"]),
.mc textarea {
  width: 100%;
  max-width: none;
  height: 32px;
  padding: 0 0.6rem;
  border-radius: 7px;
  border: 0.5px solid var(--sg-hair);
  background: var(--sg-field);
  color: var(--text);
  font: inherit;
  font-size: 0.9rem;
  box-shadow: inset 0 1px 1px rgba(0, 0, 0, 0.04);
}
.mc select {
  width: auto;
  padding-right: 1.6rem;
}
.mc .toolbar .in,
.mc .toolbar input,
.mc .bulk .in,
.mc .bulk select,
.mc .acts .in {
  width: auto;
  min-width: 160px;
}
.mc textarea {
  height: auto;
  min-height: 4rem;
  padding: 0.45rem 0.6rem;
}
.mc .in:focus,
.mc input:focus,
.mc select:focus,
.mc textarea:focus {
  outline: 0;
  border-color: var(--blue);
  box-shadow: 0 0 0 3px rgba(10, 132, 255, 0.28);
}
/* checkboxes become iOS switches, in grouped rows */
.mc .check {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 1rem !important;
  margin: 0 0 -0.5px;
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.mc .check > *:not(input) {
  flex: 1;
  min-width: 0;
}
.mc .check b {
  display: block;
  font-weight: 600;
}
.mc .check .dim,
.mc .check small {
  font-size: 0.78rem;
  color: var(--t3);
  display: block;
}
.mc :not(.check) + .check,
.mc .check:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.mc .check:not(:has(+ .check)) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-bottom: 0.9rem;
}
.mc .check input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.32);
  position: relative;
  flex: none;
  margin: 0;
  cursor: pointer;
  transition: background 0.15s;
  border: 0;
  box-shadow: none;
}
.mc .check input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.mc .check input[type="checkbox"]:checked {
  background: #34c759;
}
.mc .check input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
/* label + field rows, grouped */
.mc .fld {
  display: grid;
  grid-template-columns: minmax(150px, 1fr) minmax(0, 1.3fr);
  gap: 0.4rem 1rem;
  align-items: center;
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  padding: 0.55rem 1rem;
  margin: 0 0 -0.5px;
}
.mc .fld > label {
  margin: 0;
  font-size: 0.9rem;
  color: var(--text);
}
.mc .fld > label .dim {
  display: block;
  font-size: 0.76rem;
  color: var(--t3);
  white-space: normal;
}
.mc .fld:has(textarea) {
  grid-template-columns: 1fr;
}
.mc :not(.fld) + .fld,
.mc .fld:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.mc .fld:not(:has(+ .fld)) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-bottom: 0.9rem;
}
/* cards */
.mc .mwrap > .main .card {
  border-radius: 12px !important;
  border: 0.5px solid var(--sg-hair) !important;
  background: var(--sg-box) !important;
  margin: 0 0 1rem !important;
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04) !important;
}
@media (max-width: 900px) {
  html .conv.account.mc .mwrap > .main > :not(.phead) {
    margin-left: 1rem;
    margin-right: 1rem;
  }
  .mc .two {
    grid-template-columns: 1fr;
  }
  .mc .grid.stats {
    grid-template-columns: 1fr 1fr !important;
  }
  .mc .fld {
    grid-template-columns: 1fr;
  }
}
/* master console, second pass: tiles win over the old console rule; every heading; chk rows; two-line mode buttons; nowrap cells */
html .conv.account.mc .grid.stats {
  background: transparent !important;
  border: 0 !important;
}
html .conv.account.mc .grid.stats > *,
html .conv.account.mc .stat {
  background: var(--sg-box) !important;
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px !important;
}
.mc .h2:not(.rule) {
  font-size: 0.95rem;
  font-weight: 600;
  margin-top: 1.5rem;
  margin-bottom: 0.5rem;
}
.mc label.chk {
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.65rem 1rem;
  margin: 0 0 -0.5px;
  background: var(--sg-box);
  border: 0.5px solid var(--sg-hair);
  color: var(--text);
  font-size: 0.9rem;
  cursor: pointer;
  flex-direction: row-reverse;
  justify-content: space-between;
}
.mc label.chk > *:not(input) {
  flex: 1;
  min-width: 0;
}
.mc :not(.chk) + label.chk,
.mc label.chk:first-child {
  border-top-left-radius: 12px;
  border-top-right-radius: 12px;
}
.mc label.chk:not(:has(+ .chk)) {
  border-bottom-left-radius: 12px;
  border-bottom-right-radius: 12px;
  margin-bottom: 0.9rem;
}
.mc label.chk input[type="checkbox"] {
  appearance: none;
  -webkit-appearance: none;
  width: 40px;
  height: 24px;
  border-radius: 12px;
  background: rgba(120, 120, 128, 0.32);
  position: relative;
  flex: none;
  margin: 0;
  cursor: pointer;
  transition: background 0.15s;
  border: 0;
  box-shadow: none;
}
.mc label.chk input[type="checkbox"]::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.25);
  transition: transform 0.15s;
}
.mc label.chk input[type="checkbox"]:checked {
  background: #34c759;
}
.mc label.chk input[type="checkbox"]:checked::after {
  transform: translateX(16px);
}
.mc .btn:has(> b) {
  height: auto !important;
  padding: 0.75rem 1rem !important;
  flex-direction: column;
  align-items: flex-start;
  gap: 0.15rem;
  border-radius: 12px !important;
  text-align: left;
  white-space: normal;
}
.mc .btn:has(> b) b {
  font-size: 0.95rem;
}
.mc .btn:has(> b) .small,
.mc .btn:has(> b) span {
  font-size: 0.8rem;
  opacity: 0.85;
}
.mc .grid:not(.stats) {
  background: transparent !important;
  border: 0 !important;
  gap: 1rem !important;
  padding: 0 !important;
}
.mc .bgcard,
.mc .pcard {
  background: var(--sg-box) !important;
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px !important;
  padding: 1rem !important;
}
.mc .tbl td {
  white-space: nowrap;
}
.mc .tbl td:has(.mono.small),
.mc .tbl td:has(> .small),
.mc .tbl td.wrap,
.mc .tbl td:has(.av) {
  white-space: normal;
}
.mc .toolbar:has(> label.chk) {
  flex-direction: column;
  align-items: stretch;
  gap: 0 !important;
}
.mc .toolbar:has(> label.chk) > .in,
.mc .toolbar:has(> label.chk) > input {
  margin-top: 0.6rem;
}
.mc .toolbar:has(> label.chk) > .btn {
  align-self: flex-start;
  margin-top: 0.5rem;
}
.mc .toolbar input[type="checkbox"],
.mc .bulk input[type="checkbox"] {
  min-width: 0 !important;
  width: 40px !important;
}
.mc .toolbar:has(> label.chk) > .in,
.mc .toolbar:has(> label.chk) > input:not([type="checkbox"]) {
  width: auto;
  min-width: 260px;
  margin-top: 0.7rem;
}
.mc .toolbar:has(> label.chk) > .btn {
  margin-top: 0.7rem;
  margin-left: 0.5rem;
}
.mc .toolbar:has(> label.chk) {
  display: grid;
  grid-template-columns: 1fr auto;
  align-items: center;
}
.mc .toolbar:has(> label.chk) > label.chk {
  grid-column: 1/-1;
}
.mc .toolbar:has(> label.chk) {
  grid-template-columns: auto auto 1fr;
}
.mc .toolbar:has(> label.chk) > .in,
.mc .toolbar:has(> label.chk) > input:not([type="checkbox"]) {
  grid-column: 1;
  justify-self: start;
}
.mc .toolbar:has(> label.chk) > .btn {
  grid-column: 2;
  justify-self: start;
}
.mc .check br {
  display: none;
}
/* data map, the Apple way */
.mc .dm-canvas {
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  background: var(--sg-box);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .dm-side {
  border: 0.5px solid var(--sg-hair);
  border-radius: 12px;
  background: var(--sg-box);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .dm-card {
  fill: var(--sg-push);
  stroke: var(--sg-hair);
  filter: drop-shadow(0 1px 2px rgba(0, 0, 0, 0.08));
}
.mc .dm-lbl {
  stroke: var(--sg-box);
}
.mc .dm-kv > div {
  background: var(--sg-seg);
  border-radius: 8px;
}
.mc .dm-conn {
  border-top: 0.5px solid var(--sg-hair);
}
html[data-sup-mode="light"] .mc .dm-card {
  fill: #fff;
}
.mc .dm-cols span {
  background: var(--sg-seg);
}
.mc .dm-find,
.mc .dm-zoom,
.mc .dm-mini {
  background: var(--sg-push);
  border: 0.5px solid var(--sg-hair);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mc .dm-zoom button + button {
  border-left: 0.5px solid var(--sg-hair);
}
.mc .dm-zoom button:hover {
  background: var(--sg-seg);
}
.mc .dm-find {
  border-radius: 8px;
}
html[data-sup-mode="light"] .mc .dm-region rect {
  opacity: 0.07;
}
.mc .dm-legend {
  background: var(--sg-push);
  border: 0.5px solid var(--sg-hair);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.mc .topo .nm {
  fill: #f5f5f7 !important;
}
.mc .topo .tier {
  fill: rgba(245, 245, 247, 0.55) !important;
}
/* 2026-09-19 audit: the list's title never peeks above the phone thread sheet */
@media (max-width: 900px) {
  #shell.conv-open #list .listhead {
    visibility: hidden;
  }
}
/* ═══ The app frame — the official style guide (Shane, 2026-09-19: "match the left and right panel on all apps to SuperDrop; new apps follow it"). docs/99-app-frame.md. SuperDrop is the reference; every value is a token here. ═══ */
:root {
  --rail-w: 268px;
  --frame-pad: 10px;
  --frame-gap: 10px;
  --frame-radius: 14px;
  --rail-head-h: 68px;
  --rail-inset: 12px;
  --rail-row-h: 42px;
  --rail-row-pad: 0.6rem 0.8rem;
  --rail-row-font: 0.95rem;
  --rail-row-radius: 10px;
  --rail-on-bg: rgba(0, 102, 204, 0.12);
  --rail-cta-h: 40px;
  --rail-cta-font: 0.82rem;
  --rail-cta-radius: 11px;
  --rail-sect-font: 0.72rem;
}
@media (min-width: 901px) {
  /* the frame: rail and pane side by side, 10 px of air, 14 px corners */
  .fwrap,
  .aiwrap,
  .calwrap,
  .mwrap {
    grid-template-columns: var(--rail-w) minmax(0, 1fr) !important;
    gap: var(--frame-gap) !important;
    padding: var(--frame-pad) !important;
  }
  #shell.on {
    --rail-w: 278px;
  }
  #shell.on .fwrap,
  #shell.on .aiwrap,
  #shell.on .calwrap,
  #shell.on .mwrap {
    --rail-w: 268px;
  }
  #shell.on:not(.master) .nav {
    margin: var(--frame-pad) 0 var(--frame-pad) var(--frame-pad) !important;
    padding: 0 !important;
    border-radius: var(--frame-radius) !important;
    display: flex;
    flex-direction: column;
    overflow: hidden;
  }
  #shell.master .nav {
    display: none !important;
  }
  #shell.on .list,
  #shell.on .conv {
    margin-left: var(--frame-gap) !important;
  }
  /* the head: 68 px, tile + name + collapse */
  .nav .apphead,
  .frail .apphead,
  .airail .apphead,
  .calrail .apphead,
  .mnav .apphead {
    height: var(--rail-head-h) !important;
    padding: 0 1.1rem !important;
    gap: 0.8rem;
    margin: 0 0 0.35rem !important;
  }
  html .apphead .aimenu,
  html .mnav .apphead .aimenu,
  html .calrail .apphead .aimenu,
  html .aihead .aimenu {
    display: inline-flex !important;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--t2);
    background: transparent;
    border: 0;
    cursor: pointer;
  }
  html .apphead .aimenu:hover {
    background: var(--glass3);
    color: var(--text);
  }
  html .apphead .aimenu svg {
    width: 18px;
    height: 18px;
  }
  .calrail .calrail-toggle {
    display: none !important;
  }
  /* the button under the head: 40 px, capsule-ish 11 px corners, inset 12 px */
  .nav .cta,
  .calrail .calcta,
  .frail .cta,
  .airail .cta {
    height: var(--rail-cta-h) !important;
    min-height: 0 !important;
    font-size: var(--rail-cta-font) !important;
    border-radius: var(--rail-cta-radius) !important;
    margin: 0.5rem var(--rail-inset) 0.6rem !important;
    width: calc(100% - 2 * var(--rail-inset)) !important;
    justify-content: center;
  }
  /* rows: 42 px, 10 px corners, .95rem, the current one on a blue tint */
  .nav .body {
    padding: 0.15rem var(--rail-inset) 0.5rem !important;
  }
  .nav a,
  .fnav a,
  .mnav .mrows a {
    display: flex !important;
    align-items: center;
    min-height: var(--rail-row-h);
    padding: var(--rail-row-pad) !important;
    border-radius: var(--rail-row-radius) !important;
    font-size: var(--rail-row-font) !important;
    font-weight: 500;
    margin: 0 !important;
    box-sizing: border-box;
  }
  .nav a.on,
  .fnav a.on,
  .mnav .mrows a.on {
    background: var(--rail-on-bg) !important;
    color: var(--blue) !important;
    font-weight: 600;
  }
  .nav .sect,
  .fnav .sect,
  .mrows .sect,
  .calrail .sect {
    font: 600 var(--rail-sect-font)/1.3 var(--sans) !important;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--t3) !important;
    margin: 0.9rem 0.5rem 0.25rem !important;
    padding: 0 !important;
  }
  .nav .sect.withadd {
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  /* the foot: account row, pinned to the bottom, hairline above */
  .nav .rhead.bottom,
  .airail-foot .rhead.bottom,
  .calrail .airail-foot {
    margin-top: auto !important;
  }
  .calrail .airail-foot {
    padding: 0.4rem 0 0.6rem;
  }
  .calrail {
    display: flex !important;
    flex-direction: column !important;
  }
  .calrail .mini {
    flex: none;
  }
  .nav .invite {
    margin: 0 var(--rail-inset) !important;
    padding: 0.9rem 0.4rem !important;
  }
  /* docked: the rail is gone, the pane takes the width, an undock control sits at the head of the pane */
  .undock {
    display: none;
    width: 30px;
    height: 30px;
    border-radius: 8px;
    padding: 0;
    align-items: center;
    justify-content: center;
    color: var(--t2);
    border: 0;
    background: transparent;
    margin-right: 0.5rem;
    flex: none;
  }
  .undock svg {
    width: 18px;
    height: 18px;
  }
  .undock:hover {
    background: var(--glass3);
    color: var(--text);
  }
  body.dock-mail #shell.on {
    --rail-w: 0px;
  }
  body.dock-mail #shell.on .nav {
    display: none !important;
  }
  body.dock-mail .search .undock {
    display: inline-flex !important;
  }
  body.dock-cal .calwrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.dock-cal .calrail {
    display: none !important;
  }
  body.dock-cal .calsearch .undock {
    display: inline-flex !important;
  }
  body.dock-set .mwrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  body.dock-set .mnav {
    display: none !important;
  }
  /* the expand button lives in the omni row (the top bar) on every app, shown only while that app's rail is docked (Shane, 2026-09-20) */
  body.dock-files .search.omni .undock[data-dock="files"],
  body.dock-ai .search.omni .undock[data-dock="ai"],
  body.dock-set .search.omni .undock[data-dock="set"],
  body.dock-cal .search.omni .undock[data-dock="cal"] {
    display: inline-flex !important;
  }
}
@media (max-width: 900px) {
  .apphead .aimenu[data-dock="mail"],
  .mnav .apphead .aimenu,
  .calrail .apphead .aimenu {
    display: none !important;
  }
  .undock {
    display: none !important;
  }
}
@media (min-width: 901px) {
  #shell.on:not(.master) .list,
  #shell.on:not(.master) .conv {
    margin: var(--frame-pad) var(--frame-pad) var(--frame-pad) var(--frame-gap) !important;
  }
  .airail #ai-list > * {
    min-height: var(--rail-row-h);
    padding: var(--rail-row-pad) !important;
    border-radius: var(--rail-row-radius) !important;
    font-size: var(--rail-row-font) !important;
    box-sizing: border-box;
  }
}
/* one window width for every app (Mail was 1320, the rest 1340) */
:root {
  --win-max: 1340px;
}
@media (min-width: 901px) {
  #shell.on,
  #shell.on.master {
    max-width: var(--win-max) !important;
  }
}
@media (min-width: 901px) {
  body.dock-cal .calmain,
  body.dock-set .mwrap > .main,
  body.dock-ai .aimain,
  body.dock-files .fmain {
    grid-column: 1 !important;
  }
}
@media (min-width: 901px) {
  html body.dock-cal .conv.calapp .calwrap,
  html body.dock-cal .calwrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.dock-set .mwrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
  html body.dock-files .conv.fapp .fwrap,
  html body.dock-ai .conv.aiapp .aiwrap {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}
/* ── The rail's three parts (Shane, 2026-09-19): the head and the foot are always in the same spot; only the middle scrolls. Head: tile at the left edge, name, then the controls at the right edge. Button 23 px under the head. Foot: any extra rows (SuperDRM, Models, Invite, Sign out) above the account row, which is always last. ── */
@media (min-width: 901px) {
  :root {
    --rail-cta-top: 23px;
    --rail-foot-pad: 6px 0 10px;
  }
  .frail,
  .airail,
  .calrail,
  .mnav,
  #shell.on:not(.master) .nav {
    display: flex !important;
    flex-direction: column !important;
    overflow: hidden !important;
    min-height: 0;
  }
  .apphead {
    flex: none !important;
    margin-bottom: 0 !important;
  }
  .apphead .sp {
    flex: 1 1 auto !important;
  }
  .apphead .aimenu,
  .apphead .sback {
    flex: none;
    width: 30px;
    height: 30px;
    margin: 0 !important;
  }
  .apphead .sback {
    border-radius: 8px;
    color: var(--t2);
    background: transparent;
    border: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
  }
  .apphead .sback:hover {
    background: var(--glass3);
    color: var(--text);
  }
  .apphead .sback + .aimenu {
    margin-left: 0.15rem !important;
  }
  html .conv.account .mnav .apphead .sback {
    margin: 0 !important;
  }
  /* the button: same spot under the head everywhere */
  .nav .cta,
  .calrail .calcta,
  .frail .fnew,
  .airail .cta {
    margin-top: var(--rail-cta-top) !important;
  }
  .frail .fnew {
    margin: var(--rail-cta-top) 0 0.6rem !important;
  }
  .frail .fnew .cta {
    margin: 0 !important;
    width: 100% !important;
  }
  .frail-body {
    padding-top: 0 !important;
  }
  .airail-body {
    padding-top: 0 !important;
  }
  .airail .aisearch {
    order: 2;
    margin: 0.4rem var(--rail-inset) 0.4rem !important;
  }
  .airail .cta {
    order: 1;
  }
  .airail .ailist {
    order: 3;
  }
  /* the middle scrolls */
  .nav .body,
  .frail-body .fnav,
  .airail .ailist,
  .mnav .mrows,
  .calrail .callist {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: auto !important;
    scrollbar-width: none;
  }
  .nav .body::-webkit-scrollbar,
  .frail-body .fnav::-webkit-scrollbar,
  .airail .ailist::-webkit-scrollbar,
  .mnav .mrows::-webkit-scrollbar,
  .calrail .callist::-webkit-scrollbar {
    display: none;
  }
  .frail-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .frail-body .fnew,
  .frail-body .fusage {
    flex: none;
  }
  .airail-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .calrail .mini {
    flex: none;
  }
  /* the foot: extra rows above, the account row last, pinned */
  .airail-foot,
  .nav .rhead.bottom,
  .nav .invite {
    flex: none;
  }
  .airail-foot {
    display: flex !important;
    flex-direction: column !important;
    margin-top: auto !important;
    padding: var(--rail-foot-pad) !important;
    border-top: 1px solid var(--hair);
  }
  .airail-foot > .rhead.bottom {
    order: 99;
    margin-top: 0 !important;
    border-top: 0 !important;
  }
  .airail-foot > .invites {
    order: 50;
  }
  .airail-foot .ai-models-row {
    order: 10;
  }
  html .conv.account .mnav .airail-foot {
    margin-top: auto !important;
    padding: var(--rail-foot-pad) !important;
  }
  /* Mail: the account row is the very last row; Invite sits above it, inside the same foot */
  #shell.on:not(.master) .nav .invite {
    order: 8;
    margin-top: auto !important;
    border-top: 1px solid var(--hair) !important;
    padding: 0.55rem 0.4rem !important;
    margin-left: var(--rail-inset) !important;
    margin-right: var(--rail-inset) !important;
  }
  #shell.on:not(.master) .nav .rhead.bottom {
    order: 9;
    margin-top: 0 !important;
    border-top: 0 !important;
    padding-bottom: 10px !important;
  }
  #shell.on:not(.master) .nav .apphead {
    order: 0;
  }
  #shell.on:not(.master) .nav .cta {
    order: 1;
  }
  #shell.on:not(.master) .nav .body {
    order: 2;
  }
}
@media (min-width: 901px) {
  /* Mail: Invite lives in the foot above the account row; the button sits 29 px under the head like SuperDrop's */
  #shell.on:not(.master) .nav .invites {
    order: 8;
    margin-top: auto !important;
    border-top: 1px solid var(--hair) !important;
    padding: 0.3rem 0 !important;
  }
  #shell.on:not(.master) .nav .invites a {
    margin: 0 var(--rail-inset);
  }
  #shell.on:not(.master) .nav .rhead.bottom {
    margin-bottom: 8px !important;
  }
  #shell.on:not(.master) .nav .body {
    padding-top: 0 !important;
  }
  #shell.on:not(.master) .nav .body > .cta,
  #shell.on:not(.master) .nav > .cta {
    margin-top: 29px !important;
  }
  /* Calendar: the list and the mini month scroll together; the foot stays */
  .calrail .calbody {
    flex: 1 1 auto;
    min-height: 0;
    overflow: auto;
    scrollbar-width: none;
    display: flex;
    flex-direction: column;
  }
  .calrail .calbody::-webkit-scrollbar {
    display: none;
  }
  .calrail .callist {
    flex: none !important;
    overflow: visible !important;
  }
  /* the head, identical: tile at 17 px, .8rem to the name, controls at the right edge, 30 px each */
  html .apphead,
  html .conv.account .mnav .apphead {
    padding: 0 1.1rem !important;
    gap: 0.8rem !important;
  }
  html .apphead .aimenu,
  html .apphead .aimenu svg {
    width: 30px;
  }
  html .apphead .aimenu svg {
    width: 18px;
    height: 18px;
  }
}
@media (min-width: 901px) {
  #shell.on:not(.master) .nav .body > .cta,
  #shell.on:not(.master) .nav > .cta {
    margin-top: 23px !important;
  }
  html .apphead .appname {
    min-width: 0;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  html .apphead .sp {
    flex: 1 1 0 !important;
    min-width: 0;
  }
  html .apphead .aimenu,
  html .apphead .sback {
    width: 30px !important;
    min-width: 30px;
    height: 30px !important;
    box-sizing: border-box;
  }
  html .apphead .sback + .aimenu {
    margin-left: 0 !important;
  }
}
@media (min-width: 901px) {
  html .apphead .sp {
    display: none !important;
  }
  html .apphead .appname + * {
    margin-left: auto !important;
  }
  html .apphead .sback {
    width: 24px !important;
    min-width: 24px;
  }
  html .apphead .sback + .aimenu {
    margin-left: -6px !important;
  }
}
@media (min-width: 901px) {
  html .apphead .appname ~ .sback,
  html .apphead .appname ~ .aimenu {
    margin-left: auto !important;
  }
  html .apphead .sback + .aimenu {
    margin-left: -6px !important;
  }
}
@media (min-width: 901px) {
  html .conv.account .mnav .apphead .appname ~ .sback {
    margin-left: auto !important;
  }
}
/* ── The omni row: Mail's search row on every pane (Shane, 2026-09-19) ── */
@media (min-width: 901px) {
  .search.omni {
    position: relative;
    display: flex;
    align-items: center;
    gap: 0.35rem;
    height: 68px;
    box-sizing: border-box;
    padding: 0.6rem 0.9rem !important;
    border-bottom: 1px solid var(--hair);
    background: transparent;
    flex: none;
    z-index: 5;
  }
  .search.omni .inwrap {
    position: relative;
    display: flex;
    align-items: center;
    flex: 1 1 auto;
    min-width: 0;
    max-width: none;
  }
  .search.omni .in {
    width: 100%;
    height: 3.1rem;
    font-size: 1.1rem;
    border: 0 !important;
    border-radius: 999px !important;
    color: var(--search-fg);
    background-color: var(--search-bg) !important;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 20 20' fill='none' stroke='%237c8290' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Ccircle cx='8.5' cy='8.5' r='5.5'/%3E%3Cpath d='M12.6 12.6 17 17'/%3E%3C/svg%3E") !important;
    background-repeat: no-repeat !important;
    background-position: 1.1rem center !important;
    padding: 0 5rem 0 3rem !important;
    box-shadow: none;
  }
  .search.omni .in::placeholder {
    color: var(--search-ph);
    opacity: 1;
  }
  .search.omni .in:focus {
    background-color: var(--search-bg-f) !important;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.28) !important;
    outline: 0;
  }
  .search.omni .sp-tools {
    position: absolute;
    right: 0.7rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.2rem;
  }
  .search.omni .sp-cam,
  .search.omni .sp-x {
    width: 34px;
    height: 34px;
    border: 0;
    background: transparent;
    border-radius: 50%;
    color: var(--t2) !important;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
  }
  .search.omni .sp-cam:hover,
  .search.omni .sp-x:hover {
    color: var(--text) !important;
    background: rgba(0, 0, 0, 0.06) !important;
  }
  .search.omni .sp-ai {
    color: var(--blue) !important;
  }
  .search.omni .sp-cam svg,
  .search.omni .sp-x svg {
    width: 20px;
    height: 20px;
  }
  .search.omni .sp-x[hidden] {
    display: none;
  }
  .search.omni .undock {
    margin-right: 0.4rem;
  }
  .calmain .calsearch.omni {
    height: 68px !important;
    padding: 0.6rem 0.9rem !important;
  }
  .calmain .calsearch.omni .in {
    height: 3.1rem;
    font-size: 1.1rem;
    padding: 0 5rem 0 3rem !important;
  }
  /* the drop: the app's own results first, then the rest */
  .omni .om-drop {
    position: absolute;
    left: 0.9rem;
    right: calc(var(--tr-w, 102px) + 0.9rem);
    top: calc(100% - 0.3rem);
    z-index: 60;
    background: var(--menu-bg);
    -webkit-backdrop-filter: blur(30px) saturate(140%);
    backdrop-filter: blur(30px) saturate(140%);
    border: 0.5px solid var(--hair2);
    border-radius: 16px;
    box-shadow: var(--pop);
    padding: 0.4rem;
    max-height: 62vh;
    overflow: auto;
  }
  .omni .om-drop[hidden] {
    display: none;
  }
  .omni .calres {
    position: static !important;
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    max-height: none !important;
  }
  .omni .calres[hidden] {
    display: none;
  }
  .om-sec {
    padding: 0.2rem 0;
  }
  .om-h {
    font: 600 0.7rem/1.3 var(--sans);
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--t3);
    padding: 0.5rem 0.7rem 0.25rem;
  }
  .om-row {
    all: unset;
    display: flex;
    align-items: center;
    gap: 0.7rem;
    width: 100%;
    box-sizing: border-box;
    padding: 0.5rem 0.7rem;
    border-radius: 10px;
    cursor: pointer;
    color: var(--text);
  }
  .om-row:hover {
    background: var(--glass2);
  }
  .om-row .sg-ic {
    flex: none;
    width: 28px;
    height: 28px;
  }
  .om-row .om-t {
    display: flex;
    flex-direction: column;
    min-width: 0;
  }
  .om-row .om-t b {
    font-size: 0.92rem;
    font-weight: 500;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .om-row .om-t span {
    font-size: 0.78rem;
    color: var(--t3);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
  .om-more {
    border-top: 0.5px solid var(--hair);
    border-radius: 0 0 10px 10px;
    margin-top: 0.2rem;
  }
  /* the panes below the row */
  .fmain .ftop,
  .aimain .aitop {
    border-top: 0 !important;
  }
  .airail .aisearch {
    display: none;
  }
  html .conv.account .mwrap > .main .phead {
    position: sticky;
    top: 0;
  }
}
@media (max-width: 900px) {
  .search.omni.desk {
    display: none !important;
  }
}
@media (min-width: 901px) {
  .search.omni {
    padding: 0.6rem var(--tr-w, 102px) 0.6rem 0.9rem !important;
  }
  html body.dock-files .frail,
  html body.dock-ai .airail,
  html body.dock-set .mnav,
  html body.dock-cal .calrail,
  html body.dock-mail #shell.on .nav,
  html body.drivepage .frail {
    display: none !important;
  }
}
@media (min-width: 901px) {
  html .calmain .calsearch.omni {
    padding: 0.6rem var(--tr-w, 102px) 0.6rem 0.9rem !important;
  }
}
@media (min-width: 901px) {
  .aimain.fresh .aitop {
    display: none !important;
  }
}
/* resource list, the Apple way */
.mc .rs-table {
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px;
  background: var(--sg-box);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .rs-head {
  background: transparent;
  border-bottom: 0.5px solid var(--sg-hair);
  color: var(--t3);
}
.mc .rs-filters {
  border-bottom: 0.5px solid var(--sg-hair);
}
.mc .rs-filters input,
.mc .rs-filters select {
  height: 30px !important;
  border-radius: 7px;
  font-size: 0.82rem;
}
.mc .rs-catrow,
.mc .rs-row {
  border-top: 0.5px solid var(--sg-hair);
}
.mc .rs-row:hover {
  background: rgba(120, 120, 128, 0.06);
}
.mc .rs-row.sel {
  background: rgba(0, 102, 204, 0.1);
}
.mc .rs-tags i {
  background: var(--sg-seg);
  color: var(--t2);
}
.mc .rs-side {
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px;
  background: var(--sg-box);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .rs-kv {
  border-top: 0.5px solid var(--sg-hair);
}
.mc .rs-json {
  background: var(--sg-seg);
}
.mc .rs-stats {
  margin-bottom: 1rem;
}
@media (min-width: 901px) {
  html .conv.account .mwrap > .main .search.omni {
    position: sticky;
    top: 0;
    z-index: 7;
    background: var(--sg-head);
    -webkit-backdrop-filter: blur(20px) saturate(1.4);
    backdrop-filter: blur(20px) saturate(1.4);
  }
  html .conv.account .mwrap > .main .phead {
    top: 68px;
  }
  html .conv.account.mc .mwrap > .main > .search.omni {
    margin: 0 !important;
    max-width: none !important;
  }
}
.mc .rs-events,
.mc .rs-card,
.mc .rs-evlist {
  border: 0.5px solid var(--sg-hair) !important;
  border-radius: 12px;
  background: var(--sg-box);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.04);
}
.mc .rs-ev {
  border-top: 0.5px solid var(--sg-hair);
}
.mc .rs-chart {
  border-bottom: 0.5px solid var(--sg-hair);
}
html .mc .rs-acts .btn.danger {
  background: transparent !important;
  color: #ff453a !important;
  border: 0.5px solid rgba(255, 69, 58, 0.45) !important;
  box-shadow: none !important;
}
html .mc .rs-acts .btn.danger:hover {
  background: rgba(255, 69, 58, 0.1) !important;
}
html .conv.account.mc .rs-stats.five {
  grid-template-columns: repeat(5, minmax(0, 1fr)) !important;
}
.mc .rs-usage i {
  background: var(--sg-seg);
}
.mc .sla-strip i {
  background: var(--sg-seg);
}
.mc .sla-strip i.ok {
  background: #30d158;
}
.mc .sla-strip i.warn {
  background: #ff9f0a;
}
.mc .sla-strip i.bad {
  background: #ff453a;
}

/* the phone navbar on every app: Mail's row — ≡, the pill with the avatar, SuperIntel, the bell, the products — and the page header gone (Shane, 2026-09-20) */
@media (max-width: 900px) {
  .search.omni.mob {
    display: flex !important;
    gap: 0.35rem;
    align-items: center;
    height: auto;
    min-height: 0;
    padding: calc(0.55rem + env(safe-area-inset-top)) 0.75rem 0.5rem !important;
    border: 0 !important;
    background: transparent !important;
    box-shadow: none !important;
    margin: 0 !important;
    border-radius: 0 !important;
  }
  .search.omni.mob .inwrap {
    flex: 1;
    position: relative;
    min-width: 0;
    max-width: none !important;
  }
  .search.omni.mob .in {
    background-image: none !important;
    padding-left: 3.4rem !important;
    padding-right: 3.6rem !important;
    height: 3.3rem !important;
    font-size: 1.1rem;
    border: 0 !important;
    border-radius: 999px !important;
    background-color: var(--search-bg, #e9eef6) !important;
    box-shadow: none !important;
  }
  .search.omni.mob .in:focus {
    box-shadow: none !important;
  }
  .search.omni.mob .sp-tools {
    position: absolute;
    right: 0.45rem;
    top: 50%;
    transform: translateY(-50%);
    display: flex;
    align-items: center;
    gap: 0.2rem;
    z-index: 2;
  }
  .search.omni.mob .om-drop {
    left: 0.75rem;
    right: 0.75rem;
  }
  html:has(.search.omni.mob) body .top {
    display: none !important;
  }
  body.rail-open #conv .frail,
  body.rail-open #conv .airail,
  body.rail-open #conv .calrail,
  body.rail-open #conv .mnav {
    display: flex !important;
    flex-direction: column;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 360px);
    max-width: none !important;
    z-index: 70;
    overflow: auto;
    background: var(--layer, #fff) !important;
    box-shadow: 0 0 60px rgba(0, 0, 0, 0.35);
    border-radius: 0 18px 18px 0 !important;
    padding-bottom: env(safe-area-inset-bottom);
  }
  body.rail-open #navdim {
    display: block;
  }
  /* SuperAI and SuperDrop on a phone: the pane with the navbar is the screen, the rail (chats, drives) lives behind ≡ like Mail's folders; the old back arrows go */
  html:has(.search.omni.mob) .conv.aiapp .aiwrap .airail {
    display: none;
  }
  html:has(.search.omni.mob) .conv.aiapp .aiwrap .aimain {
    display: flex !important;
  }
  html:has(.search.omni.mob) .conv.aiapp .aiwrap {
    grid-template-columns: 1fr !important;
  }
  html:has(.search.omni.mob) #ai-back,
  html:has(.search.omni.mob) #f-back {
    display: none !important;
  }
  body.rail-open .conv.aiapp .aiwrap .airail {
    display: flex !important;
  }
  /* Calendar on a phone: its rail card (Sup.Calendar, the account, the calendars) lives behind ≡ too */
  html:has(.search.omni.mob) .calwrap .calrail {
    display: none;
  }
  html:has(.search.omni.mob) .calwrap {
    grid-template-rows: auto !important;
  }
  body.rail-open .calwrap .calrail {
    display: flex !important;
  }
  body.rail-open .calwrap .calrail .callist {
    display: block !important;
  }
}
/* Inbox (2026-09-21, Shane): Apple Mail rows — no cards at all. Flat rows, one hairline between them starting at the text column, unread dot in the gutter, one avatar, bold sender, subject, a two-line preview; only the selected row gets a rounded fill. The coloured edges and their legend are gone. */
html body #list .trow.icloud,
html[data-sup-mode="light"] body #list .trow.icloud {
  border: 0 !important;
  border-radius: 12px !important;
  box-shadow: none !important;
  background: transparent !important;
  margin: 0 0.9rem !important;
  padding: 0.85rem 1rem 0.85rem 3.1rem !important;
  height: auto !important;
  min-height: 0 !important;
  position: relative;
  transition: none !important;
}
html body #list .trow.icloud + .trow.icloud::after {
  content: "";
  display: block !important;
  position: absolute;
  left: calc(3.1rem + 38px + 0.7rem);
  right: 1rem;
  top: 0;
  height: 1px;
  background: var(--hair);
}
html body #list .trow.icloud:hover:not(.on):not(.sel-on),
html[data-sup-mode="light"] body #list .trow.icloud:hover:not(.on):not(.sel-on) {
  background: var(--menu-hover) !important;
}
html body #list .trow.icloud.on,
html body #list .trow.icloud.sel-on,
html[data-sup-mode="light"] body #list .trow.icloud.on,
html[data-sup-mode="light"] body #list .trow.icloud.sel-on {
  background: #0a5fe8 !important;
  border-color: transparent !important;
}
html body #list .trow.icloud.on + .trow.icloud::after,
html body #list .trow.icloud.sel-on + .trow.icloud::after,
html body #list .trow.icloud:hover + .trow.icloud::after {
  display: none !important;
}
html body #list .trow.icloud.unread::before {
  left: 1.15rem;
  top: 1.45rem;
  width: 9px;
  height: 9px;
}
html body #list .trow.icloud .who {
  font-weight: 600 !important;
  font-size: 1.02rem !important;
}
html body #list .trow.icloud .who .when {
  font-weight: 400 !important;
  font-size: 0.86rem !important;
}
html body #list .trow.icloud .subj {
  font-weight: 400 !important;
  font-size: 0.96rem !important;
  margin: 0.1rem 0 0.15rem !important;
}
html body #list .trow.icloud .snippet {
  white-space: normal !important;
  display: -webkit-box !important;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4 !important;
  font-size: 0.92rem !important;
  opacity: 1 !important;
  color: var(--t3) !important;
}
.catlegend {
  display: none !important;
}
html body #list .trow.icloud .rply {
  display: none !important;
}
html body #list .trow.icloud .pav.stack .av:last-child {
  display: none !important;
}
html body #list .trow.icloud .pav.stack .av:first-child {
  position: static !important;
  width: 38px !important;
  height: 38px !important;
  font-size: 0.86rem !important;
  box-shadow: none !important;
}
@media (max-width: 900px) {
  html body #list .trow.icloud {
    margin: 0 0.4rem !important;
    padding: 0.75rem 0.9rem 0.75rem 1.6rem !important;
    border-radius: 10px !important;
  }
  html body #list .trow.icloud + .trow.icloud::after {
    left: 1.6rem;
    right: 0.9rem;
  }
  html body #list .trow.icloud.unread::before {
    left: 0.5rem;
    top: 1.1rem;
  }
}
/* Comfortable rows: the preview really gets two lines (the text column must be allowed to shrink, or the row clips it to one) */
html body #list .trow.icloud .rt {
  min-width: 0 !important;
  max-width: 100% !important;
  overflow: hidden !important;
}
/* List sections (2026-09-21, Shane): Gmail's Starred / Everything else headers */
#list .lsec {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0 0.9rem;
  padding: 1rem 1rem 0.45rem 1.05rem;
}
#list .lsec + .trow.icloud::after {
  display: none !important;
}
#list .lsec-h {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.7rem;
  font-size: 1.08rem;
  font-weight: 500;
  color: var(--text);
  cursor: pointer;
  letter-spacing: -0.01em;
}
#list .lsec-h .ic {
  width: 16px;
  height: 16px;
  color: var(--t2);
  transition: transform 0.15s;
}
#list .lsec.fold .lsec-h .ic {
  transform: rotate(180deg);
}
#list .lsec-n {
  margin-left: auto;
  font-size: 0.85rem;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
#list.compact .lsec {
  margin: 0;
  padding: 1.1rem 1rem 0.6rem 1.1rem;
  border-bottom: 1px solid var(--hair);
}
/* Compact rows (2026-09-21, Shane): Gmail's dense list */
:root {
  --gm-read: #f2f6fc;
  --gm-unread: #fff;
  --gm-sel: #c2dbff;
  --gm-hover: 0 1px 2px 0 rgba(60, 64, 67, 0.3), 0 1px 3px 1px rgba(60, 64, 67, 0.15);
  --gm-star: #f4b400;
  --gm-ink: #5f6368;
}
html[data-sup-mode="dark"],
html[data-sup-mode="color"] {
  /* colour mode is a dark wallpaper with near-white text: it takes the dark row tokens (contrastproof, 2026-09-26 — the light ones
     painted unread rows #fff under #f4f6fb text, 1.08:1) */
  --gm-read: rgba(255, 255, 255, 0.035);
  --gm-unread: transparent;
  --gm-sel: rgba(138, 180, 248, 0.28);
  --gm-hover: 0 1px 2px 0 rgba(0, 0, 0, 0.5), 0 1px 3px 1px rgba(0, 0, 0, 0.3);
  --gm-ink: #9aa0a6;
}
html body #list.compact .trow.gm {
  display: grid !important;
  grid-template-columns: 22px 22px 200px minmax(0, 1fr) 22px 70px;
  align-items: center;
  gap: 0 0.55rem;
  height: 40px;
  margin: 0 !important;
  padding: 0 1rem 0 0.95rem !important;
  border: 0 !important;
  border-bottom: 1px solid var(--hair) !important;
  border-radius: 0 !important;
  box-shadow: none !important;
  background: var(--gm-read) !important;
  font-size: 0.9rem;
  color: var(--text) !important;
  text-decoration: none !important;
  position: relative;
  transition: none !important;
  animation: none !important;
}
html body #list.compact .trow.gm.unread {
  background: var(--gm-unread) !important;
}
html body #list.compact .trow.gm:hover:not(.on):not(.sel-on) {
  box-shadow: var(--gm-hover) !important;
  z-index: 1;
}
html body #list.compact .trow.gm.on,
html body #list.compact .trow.gm.sel-on {
  background: var(--gm-sel) !important;
}
html body #list.compact .trow.gm .sel {
  display: inline-block !important;
  position: static !important;
  width: 16px;
  height: 16px;
  margin: 0 0 0 2px !important;
  border: 2px solid var(--gm-ink) !important;
  border-radius: 2px !important;
  opacity: 0.85 !important;
  background: transparent !important;
  cursor: pointer;
  box-sizing: border-box;
}
html body #list.compact .trow.gm .sel.on {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
html body #list.compact .trow.gm .star {
  all: unset;
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  color: var(--gm-ink);
  opacity: 0.7;
  cursor: pointer;
  position: static !important;
}
html body #list.compact .trow.gm .star .ic {
  width: 18px;
  height: 18px;
}
html body #list.compact .trow.gm .star.on {
  color: var(--gm-star) !important;
  opacity: 1;
}
html body #list.compact .trow.gm .who {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text) !important;
  min-width: 0;
}
html body #list.compact .trow.gm .who .cnt {
  color: var(--t3);
  font-weight: 400;
  font-size: 0.82rem;
  margin-left: 0.3rem;
}
html body #list.compact .trow.gm .sl {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
  font-size: 0.9rem;
}
html body #list.compact .trow.gm .sl .subj {
  font-weight: 400;
  color: var(--text);
}
html body #list.compact .trow.gm .sl .snip {
  color: var(--t3);
}
html body #list.compact .trow.gm.unread .who,
html body #list.compact .trow.gm.unread .sl .subj,
html body #list.compact .trow.gm.unread .when {
  font-weight: 700 !important;
}
html body #list.compact .trow.gm .clip {
  display: inline-flex;
  color: var(--gm-ink);
  justify-content: center;
}
html body #list.compact .trow.gm .clip .ic {
  width: 18px;
  height: 18px;
}
html body #list.compact .trow.gm .when {
  text-align: right;
  font-size: 0.78rem;
  white-space: nowrap;
  color: var(--text) !important;
  font-variant-numeric: tabular-nums;
}
html body #list.compact .trow.gm.unread::before {
  display: none;
}
/* Comfortable rows v2 (2026-09-21, Shane): Gmail's phone list on every width — avatar, sender + time, one-line subject, one-line preview with the star at its end; unread is bold and black, read is regular and grey; no dot. The hairlines between rows stay. */
html body #list .trow.icloud {
  padding: 0.85rem 1rem 0.8rem !important;
  grid-template-columns: 40px minmax(0, 1fr) auto !important;
  column-gap: 0.9rem !important;
  row-gap: 0 !important;
  align-items: start !important;
}
html body #list .trow.icloud::before {
  display: none !important;
}
html body #list .trow.icloud + .trow.icloud::after {
  left: calc(1rem + 40px + 0.9rem);
}
html body #list .trow.icloud .pav {
  display: block !important;
  width: 40px !important;
  height: 40px !important;
  margin: 0.1rem 0 0 !important;
}
html body #list .trow.icloud .pav .av,
html body #list .trow.icloud .pav img {
  width: 40px !important;
  height: 40px !important;
  font-size: 0.9rem !important;
}
html body #list .trow.icloud .who {
  display: flex !important;
  align-items: baseline !important;
  gap: 0.5rem;
  font-weight: 400 !important;
  font-size: 1rem !important;
  color: var(--t2) !important;
  line-height: 1.3 !important;
}
html body #list .trow.icloud .who .when {
  margin-left: auto !important;
  flex: none !important;
  font-weight: 400 !important;
  font-size: 0.82rem !important;
  color: var(--t3) !important;
  display: inline !important;
}
html body #list .trow.icloud .who .when::after {
  content: none !important;
}
html body #list .trow.icloud .subj {
  display: block !important;
  font-weight: 400 !important;
  font-size: 0.98rem !important;
  color: var(--t2) !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  margin: 0.12rem 0 0.1rem !important;
  line-height: 1.3 !important;
}
html body #list .trow.icloud .snippet {
  display: block !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  -webkit-line-clamp: unset !important;
  font-size: 0.95rem !important;
  color: var(--t3) !important;
  line-height: 1.4 !important;
  padding-right: 2.4rem;
}
html body #list .trow.icloud.unread .who,
html body #list .trow.icloud.unread .subj,
html body #list .trow.icloud.unread .who .when {
  font-weight: 700 !important;
  color: var(--text) !important;
}
html body #list .trow.icloud .star {
  opacity: 1 !important;
  position: absolute !important;
  right: 1rem !important;
  bottom: 0.75rem !important;
  color: var(--t3) !important;
  margin: 0 !important;
  padding: 0.1rem !important;
  background: none !important;
  border: 0 !important;
  line-height: 0;
}
html body #list .trow.icloud .star .ic {
  width: 22px !important;
  height: 22px !important;
}
html body #list .trow.icloud .star.on {
  color: #f4b400 !important;
}
html body #list .trow.icloud.on .who,
html body #list .trow.icloud.on .subj,
html body #list .trow.icloud.on .snippet,
html body #list .trow.icloud.on .who .when,
html body #list .trow.icloud.on .star,
html body #list .trow.icloud.sel-on .who,
html body #list .trow.icloud.sel-on .subj,
html body #list .trow.icloud.sel-on .snippet,
html body #list .trow.icloud.sel-on .who .when {
  color: #fff !important;
}
html body #list .trow.icloud .tmore {
  right: 3.1rem !important;
  bottom: 0.55rem !important;
}
@media (max-width: 900px) {
  html body #list .trow.icloud {
    padding: 0.8rem 0.9rem 0.75rem 0.8rem !important;
  }
  html body #list .trow.icloud + .trow.icloud::after {
    left: calc(0.8rem + 40px + 0.9rem);
    right: 0.9rem;
  }
  html body #list .trow.icloud .star {
    right: 0.8rem !important;
  }
}
/* Comfortable rows: read rows carry the compact view's tint so they feel read; unread stays white (Shane, 2026-09-21). Edge to edge, hairlines kept. */
html body #list .trow.icloud,
html[data-sup-mode="light"] body #list .trow.icloud {
  background: var(--gm-read) !important;
  border-radius: 0 !important;
  margin: 0 !important;
  padding-left: 1.4rem !important;
  padding-right: 1.4rem !important;
}
html body #list .trow.icloud.unread,
html[data-sup-mode="light"] body #list .trow.icloud.unread {
  background: var(--gm-unread) !important;
}
html body #list .trow.icloud + .trow.icloud::after {
  left: calc(1.4rem + 40px + 0.9rem);
  right: 1.4rem;
}
html body #list .trow.icloud:hover:not(.on):not(.sel-on),
html[data-sup-mode="light"] body #list .trow.icloud:hover:not(.on):not(.sel-on) {
  background: var(--gm-read) !important;
  box-shadow: var(--gm-hover) !important;
  z-index: 1;
  border-radius: 0 !important;
}
html body #list .trow.icloud.unread:hover:not(.on):not(.sel-on),
html[data-sup-mode="light"] body #list .trow.icloud.unread:hover:not(.on):not(.sel-on) {
  background: var(--gm-unread) !important;
}
html body #list .trow.icloud.on,
html body #list .trow.icloud.sel-on,
html[data-sup-mode="light"] body #list .trow.icloud.on,
html[data-sup-mode="light"] body #list .trow.icloud.sel-on {
  background: var(--gm-sel) !important;
  border-radius: 0 !important;
}
html body #list .trow.icloud.on .who,
html body #list .trow.icloud.on .subj,
html body #list .trow.icloud.on .snippet,
html body #list .trow.icloud.on .who .when,
html body #list .trow.icloud.on .star,
html body #list .trow.icloud.sel-on .who,
html body #list .trow.icloud.sel-on .subj,
html body #list .trow.icloud.sel-on .snippet,
html body #list .trow.icloud.sel-on .who .when {
  color: inherit !important;
}
html body #list .trow.icloud.on .star {
  color: var(--t3) !important;
}
html body #list .trow.icloud.on .star.on {
  color: #f4b400 !important;
}
html body #list .trow.icloud .star {
  right: 1.4rem !important;
}
#list .lsec {
  margin: 0 !important;
  padding: 1.1rem 1.4rem 0.55rem 1.5rem !important;
}
@media (max-width: 900px) {
  html body #list .trow.icloud {
    padding-left: 0.9rem !important;
    padding-right: 0.9rem !important;
  }
  html body #list .trow.icloud + .trow.icloud::after {
    left: calc(0.9rem + 40px + 0.9rem);
    right: 0.9rem;
  }
  html body #list .trow.icloud .star {
    right: 0.9rem !important;
  }
}
/* Comfortable rows: the compact view's checkbox, in its own column before the avatar (Shane, 2026-09-21) */
html body #list .trow.icloud {
  grid-template-columns: 22px 40px minmax(0, 1fr) auto !important;
}
html body #list .trow.icloud .sel {
  display: inline-block !important;
  position: static !important;
  grid-column: 1;
  grid-row: 1;
  width: 16px;
  height: 16px;
  margin: 0.85rem 0 0 2px !important;
  border: 2px solid var(--gm-ink) !important;
  border-radius: 2px !important;
  opacity: 0.85 !important;
  background: transparent !important;
  cursor: pointer;
  box-sizing: border-box;
  transition: none !important;
}
html body #list .trow.icloud .sel.on {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
html body #list .trow.icloud .pav {
  grid-column: 2;
}
html body #list .trow.icloud .rt {
  grid-column: 3;
}
html body #list .trow.icloud + .trow.icloud::after {
  left: calc(1.4rem + 22px + 0.9rem + 40px + 0.9rem);
}
@media (max-width: 900px) {
  html body #list .trow.icloud + .trow.icloud::after {
    left: calc(0.9rem + 22px + 0.9rem + 40px + 0.9rem);
  }
}
/* Row checkboxes: a 16px box is easy to miss, and a miss opens the conversation — the hit area is the whole gutter around it (Shane, 2026-09-21: "multi select keeps opening") */
html body #list .trow .sel {
  position: relative !important;
  overflow: visible;
}
html body #list .trow.icloud .sel::before,
html body #list.compact .trow.gm .sel::before {
  content: "";
  position: absolute;
  left: -14px;
  right: -10px;
  top: -11px;
  bottom: -11px;
}
html body #list .trow.icloud .sel:hover,
html body #list.compact .trow.gm .sel:hover {
  opacity: 1 !important;
  border-color: var(--text) !important;
}
/* Feel (2026-09-21): rows keep their nodes across live updates; a row that arrives slides in and glows for a moment, a row that moves glides (FLIP in app.ts); read/unread and hover cross-fade */
html body #list .trow.icloud,
html body #list.compact .trow.gm {
  transition:
    background-color 0.22s ease,
    box-shadow 0.18s ease !important;
}
@media (prefers-reduced-motion: no-preference) {
  html body #list .trow.arrive {
    animation: rowArrive 0.55s cubic-bezier(0.22, 0.9, 0.24, 1) both;
  }
  @keyframes rowArrive {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    55% {
      opacity: 1;
      transform: none;
      background-color: var(--gm-sel);
    }
    100% {
      transform: none;
    }
  }
}
/* The checkbox is its own hit area's anchor — the earlier static positioning let the halo anchor to the row and swallow every click (2026-09-21) */
html body #list .trow.icloud .sel,
html body #list.compact .trow.gm .sel {
  position: relative !important;
}
/* The row checkbox is relative (for its hit halo) — the base sheet's absolute offsets must not push it around (compact view, 2026-09-22) */
html body #list .trow.icloud .sel,
html body #list.compact .trow.gm .sel {
  top: auto !important;
  left: auto !important;
  right: auto !important;
  bottom: auto !important;
  margin-top: 0 !important;
}
html body #list .trow.icloud .sel {
  margin-top: 0.85rem !important;
}
/* Sidebar entries stay on one line like Gmail's labels: the name trims with an ellipsis, the owner note and the count never wrap (Shane, 2026-09-22) */
.nav a,
.mnav a {
  flex-wrap: nowrap !important;
  align-items: center !important;
  white-space: nowrap !important;
}
.nav a > span:first-child,
.mnav a > span:first-child {
  flex-wrap: nowrap !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  min-width: 0 !important;
  display: block !important;
  line-height: 1.35;
}
.nav a > span:first-child .ic,
.mnav a > span:first-child .ic {
  vertical-align: -3px;
  margin-right: 0.55rem !important;
}
.nav a > span:first-child .dim,
.mnav a > span:first-child .dim {
  display: inline !important;
  white-space: nowrap !important;
}
.nav a .cnt,
.mnav a .cnt {
  flex: none !important;
  margin-left: 0.5rem !important;
  white-space: nowrap !important;
}
/* Labels (2026-09-22, Shane): Gmail's — a coloured tag in the sidebar tree, chips on rows and in the open conversation, a tick list to label with */
.ltag {
  width: 16px;
  height: 16px;
  fill: var(--lc, #8e8e93);
  flex: none;
}
.nav a.lnav > span:first-child {
  padding-left: calc(var(--d, 0) * 18px);
}
.nav a.lnav .lfold {
  all: unset;
  display: inline-flex;
  width: 16px;
  height: 16px;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  margin-right: 0.25rem !important;
  cursor: pointer;
  flex: none;
}
.nav a.lnav .lfold .ic {
  width: 12px;
  height: 12px;
  transform: rotate(180deg);
  transition: transform 0.15s;
}
.nav a.lnav .lfold.open .ic {
  transform: rotate(-90deg);
}
.nav a.lnav .ldot {
  display: inline-flex;
  margin-right: 0.55rem;
}
.nav a.lnav.unread .lname {
  font-weight: 700;
  color: var(--text);
}
.nav a.lmore .ic {
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
  margin-right: 0.55rem;
  color: var(--t3);
}
.nav a.lnav .fmenu {
  margin-left: 0.2rem;
}
.lbl {
  display: inline-flex;
  align-items: center;
  max-width: 140px;
  padding: 0 0.45rem;
  margin-right: 0.4rem;
  height: 1.25rem;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 600;
  line-height: 1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  vertical-align: middle;
  background: color-mix(in srgb, var(--lc, #8e8e93) 18%, transparent);
  color: var(--lc, #8e8e93);
  border: 1px solid color-mix(in srgb, var(--lc, #8e8e93) 35%, transparent);
  cursor: pointer;
}
.lbl:hover {
  background: color-mix(in srgb, var(--lc, #8e8e93) 30%, transparent);
}
html[data-sup-mode="dark"] .lbl {
  color: color-mix(in srgb, var(--lc, #8e8e93) 70%, #fff);
}
html body #list.compact .trow.gm .sl .lbl {
  height: 1.15rem;
  font-size: 0.7rem;
  padding: 0 0.4rem;
}
.conv.mail .head .hlbls {
  display: inline-flex;
  gap: 0.1rem;
  margin-right: 0.5rem;
  vertical-align: middle;
}
.popmenu.labelmenu button.lrow {
  display: flex;
  align-items: center;
  gap: 0.55rem;
}
.popmenu .lchk {
  width: 16px;
  height: 16px;
  border: 2px solid var(--t3);
  border-radius: 3px;
  flex: none;
  box-sizing: border-box;
  position: relative;
}
.popmenu .lrow.on .lchk {
  background: var(--blue);
  border-color: var(--blue);
}
.popmenu .lrow.on .lchk::after {
  content: "";
  position: absolute;
  left: 4px;
  top: 1px;
  width: 4px;
  height: 8px;
  border: solid #fff;
  border-width: 0 2px 2px 0;
  transform: rotate(45deg);
}
.popmenu .lrow.some .lchk::after {
  content: "";
  position: absolute;
  left: 2px;
  right: 2px;
  top: 5px;
  height: 2px;
  background: var(--t2);
}
.popmenu .ldot {
  display: inline-flex;
}
.popmenu .lpal {
  display: grid;
  grid-template-columns: repeat(6, 26px);
  gap: 6px;
  padding: 0.4rem 0.9rem 0.6rem;
}
.popmenu .lpal .sw {
  all: unset;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--lc);
  cursor: pointer;
  box-sizing: border-box;
  border: 2px solid transparent;
}
.popmenu .lpal .sw.on {
  border-color: var(--text);
}
.popmenu .lpal .sw:hover {
  transform: scale(1.1);
}
/* You replied: a small reply arrow left of the sender's name (Shane, 2026-09-22) — in the name line, not the gutter */
html body #list .trow .who .rply {
  display: inline-flex !important;
  position: static !important;
  width: auto;
  height: auto;
  opacity: 1;
  color: var(--t3);
  margin-right: 0.3rem;
  vertical-align: -2px;
  top: auto;
  left: auto;
}
html body #list .trow .who .rply .ic {
  width: 14px;
  height: 14px;
}
/* Label rows line up with every other sidebar row (Shane, 2026-09-22): the tag sits where the other icons sit, the fold arrow lives in the gutter to its left, the ⋯ shows on hover like a folder's */
.nav .body a.lnav {
  position: relative;
}
.nav a.lnav > span:first-child {
  padding-left: calc(var(--d, 0) * 18px) !important;
}
.nav a.lnav i.lfold {
  display: none !important;
}
.nav a.lnav button.lfold {
  position: absolute !important;
  left: -0.85rem;
  top: 50%;
  transform: translateY(-50%);
  margin: 0 !important;
  width: 14px;
  height: 14px;
}
.nav a.lnav .ldot {
  display: inline-flex;
  vertical-align: -3px;
  margin-right: 0.55rem !important;
}
.nav a.lnav .ltag {
  width: 17px;
  height: 17px;
}
.nav .body a.lnav .fmenu {
  position: absolute;
  right: 0.4rem;
  top: 50%;
  transform: translateY(-50%);
  width: 26px;
  height: 26px;
  border-radius: 50%;
  border: 0;
  background: transparent;
  color: var(--t3);
  display: none;
  align-items: center;
  justify-content: center;
  margin: 0 !important;
  padding: 0;
}
.nav .body a.lnav:hover .fmenu,
.nav .body a.lnav:focus-within .fmenu {
  display: inline-flex;
}
.nav .body a.lnav:hover .cnt {
  visibility: hidden;
}
@media (max-width: 900px) {
  .nav .body a.lnav .fmenu {
    display: inline-flex;
  }
  .nav .body a.lnav .cnt {
    margin-right: 1.8rem;
  }
}
/* Selected rows read like Gmail's (Shane, 2026-09-22): light blue behind dark text — never white on blue */
html body #list .trow.icloud.on,
html body #list .trow.icloud.sel-on,
html body #list.compact .trow.gm.on,
html body #list.compact .trow.gm.sel-on,
html[data-sup-mode="light"] body #list .trow.icloud.on,
html[data-sup-mode="light"] body #list .trow.icloud.sel-on {
  background: var(--gm-sel) !important;
  color: var(--text) !important;
}
html body #list .trow.icloud.on .who,
html body #list .trow.icloud.sel-on .who,
html body #list .trow.icloud.on .subj,
html body #list .trow.icloud.sel-on .subj,
html body #list .trow.icloud.on .who .when,
html body #list .trow.icloud.sel-on .who .when,
html body #list.compact .trow.gm.on .who,
html body #list.compact .trow.gm.sel-on .who,
html body #list.compact .trow.gm.on .sl .subj,
html body #list.compact .trow.gm.sel-on .sl .subj,
html body #list.compact .trow.gm.on .when,
html body #list.compact .trow.gm.sel-on .when {
  color: var(--text) !important;
}
html body #list .trow.icloud.on .snippet,
html body #list .trow.icloud.sel-on .snippet,
html body #list .trow.icloud.on .who .rply,
html body #list .trow.icloud.sel-on .who .rply,
html body #list.compact .trow.gm.on .snip,
html body #list.compact .trow.gm.sel-on .snip,
html body #list.compact .trow.gm.on .who .cnt,
html body #list.compact .trow.gm.sel-on .who .cnt {
  color: var(--t3) !important;
}
html body #list .trow.icloud.on .star,
html body #list .trow.icloud.sel-on .star,
html body #list.compact .trow.gm.on .star,
html body #list.compact .trow.gm.sel-on .star {
  color: var(--t3) !important;
}
html body #list .trow.icloud.on .star.on,
html body #list .trow.icloud.sel-on .star.on,
html body #list.compact .trow.gm.on .star.on,
html body #list.compact .trow.gm.sel-on .star.on {
  color: #f4b400 !important;
}
html body #list .trow.icloud.on .tmore,
html body #list .trow.icloud.sel-on .tmore {
  color: var(--t2) !important;
}
html[data-sup-mode="dark"] body #list .trow.icloud.on,
html[data-sup-mode="dark"] body #list .trow.icloud.sel-on,
html[data-sup-mode="dark"] body #list.compact .trow.gm.on,
html[data-sup-mode="dark"] body #list.compact .trow.gm.sel-on {
  background: rgba(138, 180, 248, 0.28) !important;
}
/* The top of the list is pinned like Gmail's (Shane, 2026-09-22): the Ask Sup bar stays put on scroll, and selecting slides the action bar in under it instead of replacing it */
@media (min-width: 901px) {
  html body #list > .search {
    position: sticky;
    top: 0;
    z-index: 7;
    background: var(--sg-head, var(--layer));
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
  }
  html body #list > .selbar {
    position: sticky;
    top: 68px;
    z-index: 7;
    background: var(--sg-head, var(--layer));
    -webkit-backdrop-filter: blur(18px) saturate(1.4);
    backdrop-filter: blur(18px) saturate(1.4);
    border-bottom: 1px solid var(--hair) !important;
    animation: selIn 0.18s ease both;
  }
  @keyframes selIn {
    from {
      opacity: 0;
      transform: translateY(-6px);
    }
    to {
      opacity: 1;
      transform: none;
    }
  }
  @media (prefers-reduced-motion: reduce) {
    html body #list > .selbar {
      animation: none;
    }
  }
}
/* Selection toolbar (2026-09-22): Gmail's groups and icons, our words beside them */
html body #list > .selbar {
  gap: 0.15rem !important;
  padding: 0 0.9rem 0 1rem !important;
}
html body #list > .selbar .selwrap {
  display: inline-flex;
  align-items: center;
  gap: 0;
  margin-right: 0.35rem;
}
html body #list > .selbar .selall {
  display: inline-block !important;
  position: static !important;
  opacity: 1 !important;
  width: 16px;
  height: 16px;
  margin: 0 !important;
  border: 2px solid var(--gm-ink) !important;
  border-radius: 2px !important;
  box-sizing: border-box;
}
html body #list > .selbar .selall.on {
  background: var(--blue) !important;
  border-color: var(--blue) !important;
}
html body #list > .selbar .selall.some {
  background: linear-gradient(var(--gm-ink), var(--gm-ink)) center/8px 2px no-repeat !important;
}
html body #list > .selbar .act.caret {
  padding: 0 0.1rem !important;
  min-width: 0;
}
html body #list > .selbar .act.caret .ic {
  width: 14px;
  height: 14px;
  transform: rotate(-90deg);
}
html body #list > .selbar .n {
  margin: 0 0.4rem 0 0.2rem !important;
  font-weight: 500;
  color: var(--t2) !important;
}
html body #list > .selbar .sep {
  width: 1px;
  height: 22px;
  background: var(--hair2, var(--hair));
  margin: 0 0.45rem;
  flex: none;
}
html body #list > .selbar .act.tb {
  display: inline-flex !important;
  align-items: center;
  gap: 0.4rem;
  height: 36px;
  padding: 0 0.6rem !important;
  border-radius: 999px !important;
  color: var(--t2) !important;
  font-size: 0.82rem;
  font-weight: 500;
  background: transparent !important;
  border: 0 !important;
  cursor: pointer;
}
html body #list > .selbar .act.tb:hover {
  background: var(--act-bg) !important;
  color: var(--text) !important;
}
html body #list > .selbar .act.tb .ic {
  width: 20px !important;
  height: 20px !important;
  stroke-width: 1.6;
  fill: none !important;
  flex: none;
}
html body #list > .selbar .act.tb .ltag {
  width: 20px;
  height: 20px;
  flex: none;
}
html body #list > .selbar .act.tb .ltag {
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
html body #list > .selbar .movewrap {
  position: relative;
}
html body #list > .selbar .movewrap > span {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
html body #list > .selbar .movewrap select {
  position: absolute;
  inset: 0;
  opacity: 0;
  cursor: pointer;
  width: 100%;
}
html body #list > .selbar .act.dim {
  margin-left: auto !important;
  color: var(--t3) !important;
}
@media (max-width: 1180px) {
  html body #list > .selbar .act.tb > span,
  html body #list > .selbar .movewrap > span > span {
    display: none;
  }
}
/* The star pops when it fills (2026-09-22); the row's move follows a beat later (app.ts) */
@media (prefers-reduced-motion: no-preference) {
  @keyframes starPop {
    0% {
      transform: scale(1);
    }
    40% {
      transform: scale(1.45) rotate(-10deg);
    }
    70% {
      transform: scale(0.9);
    }
    100% {
      transform: scale(1);
    }
  }
  html body #list .trow .star.pop,
  .conv .head #star.pop {
    animation: starPop 0.45s cubic-bezier(0.2, 0.9, 0.3, 1.3);
  }
  html body #list .trow .star.pop .ic,
  .conv .head #star.pop .ic {
    transform-origin: center;
  }
}
/* Launcher drop-up (2026-09-22): a bounded width, one line per subject, quick actions on the right */
.popmenu.dockmenu {
  width: min(600px, 92vw) !important;
  max-width: min(600px, 92vw) !important;
}
.popmenu.dockmenu .dkrow {
  display: flex;
  align-items: center;
}
.popmenu.dockmenu .dkrow > button:first-child {
  flex: 1;
  min-width: 0;
}
.popmenu.dockmenu .dkrow .acn {
  min-width: 0;
}
.popmenu.dockmenu .dkrow .acn > span,
.popmenu.dockmenu .dkrow .acn > b {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popmenu.dockmenu [data-open] .acn {
  white-space: nowrap;
}
.popmenu.dockmenu .dkacts {
  display: inline-flex;
  gap: 2px;
  padding: 0 0.5rem 0 0.2rem;
  flex: none;
  opacity: 0.55;
  transition: opacity 0.12s;
}
.popmenu.dockmenu .dkrow:hover .dkacts {
  opacity: 1;
}
.popmenu.dockmenu .dkacts button {
  all: unset;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t3);
  cursor: pointer;
}
.popmenu.dockmenu .dkacts button:hover {
  background: var(--act-bg);
  color: var(--text);
}
.popmenu.dockmenu .dkacts button .ic {
  width: 17px;
  height: 17px;
}
.popmenu.dockmenu .dkacts button .ltag {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
}
.popmenu.dockmenu .dkacts button.on {
  color: #f4b400;
}
/* the seam above the selection toolbar is a hairline, not a bar */
html body #list > .search {
  border-bottom: 1px solid var(--hair) !important;
}
html body #list > .selbar {
  border-top: 0 !important;
}
/* drafts and scheduled rows wear the inbox shape; no checkbox or star to act on */
html body #list .trow.draft .sel,
html body #list .trow.sched .sel,
html body #list .trow.draft .star,
html body #list .trow.sched .star {
  visibility: hidden;
  pointer-events: none;
}
html body #list .trow.draft .who .dim,
html body #list .trow.sched .who .dim {
  color: #d93025 !important;
  font-weight: 600;
}
html body #list .trow.sched .snippet u,
html body #list .trow.sched .snip u {
  cursor: pointer;
  color: var(--blue);
}
.popmenu.dockmenu .dkrow .av {
  color: #fff !important;
}
/* Launcher drop-up, formatted (Shane, 2026-09-22): tight rows, sender over subject, time, then the actions */
.popmenu.dockmenu {
  padding: 0.35rem 0 0.4rem !important;
  width: min(620px, 92vw) !important;
  max-width: min(620px, 92vw) !important;
}
.popmenu.dockmenu [data-open] {
  padding: 0.45rem 0.9rem !important;
  font-size: 0.88rem;
}
.popmenu.dockmenu .pmhead {
  padding: 0.35rem 0.9rem 0.25rem !important;
  font-size: 0.74rem;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--t3);
}
.popmenu.dockmenu .pmhead b {
  font-weight: 600;
  color: var(--t3);
}
.popmenu.dockmenu .dkrow {
  display: flex;
  align-items: center;
  min-height: 50px;
  padding: 0 0.5rem 0 0;
  border-top: 1px solid var(--hair);
}
.popmenu.dockmenu .dkrow:first-of-type {
  border-top: 0;
}
.popmenu.dockmenu .dkrow > button:first-child {
  flex: 1;
  min-width: 0;
  padding: 0.35rem 0.9rem !important;
  gap: 0.65rem !important;
  align-items: center !important;
}
.popmenu.dockmenu .dkrow .av {
  width: 30px !important;
  height: 30px !important;
  font-size: 0.7rem !important;
  flex: none;
}
.popmenu.dockmenu .dkrow .acn {
  min-width: 0;
  line-height: 1.25;
}
.popmenu.dockmenu .dkrow .acn > b {
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--text);
}
.popmenu.dockmenu .dkrow .acn > span {
  font-size: 0.82rem;
  color: var(--t3);
  margin-top: 1px;
}
.popmenu.dockmenu .dkrow .acn br {
  display: none;
}
.popmenu.dockmenu .dkrow .acn > b,
.popmenu.dockmenu .dkrow .acn > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.popmenu.dockmenu .dkwhen {
  flex: none;
  font-size: 0.74rem;
  color: var(--t3);
  margin: 0 0.35rem 0 0.2rem;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.popmenu.dockmenu .dkacts {
  gap: 0;
  padding: 0;
  opacity: 0.7;
}
.popmenu.dockmenu .dkacts button {
  width: 28px;
  height: 28px;
}
.popmenu.dockmenu .dkacts button .ic {
  width: 16px;
  height: 16px;
}
/* Selected rows: icons follow their own colour (the star's yellow, the ⋯'s grey), never the skin's forced white; label chips keep theirs (2026-09-22) */
html body #list .trow.icloud.on *,
html body #list .trow.icloud.sel-on *,
html body #list.compact .trow.gm.on *,
html body #list.compact .trow.gm.sel-on * {
  color: inherit !important;
}
html body #list .trow.icloud.on svg,
html body #list .trow.icloud.sel-on svg,
html body #list.compact .trow.gm.on svg,
html body #list.compact .trow.gm.sel-on svg {
  color: inherit !important;
  stroke: currentColor !important;
}
html body #list .trow.on .star.on,
html body #list .trow.sel-on .star.on,
html body #list .trow.on .star.on svg,
html body #list .trow.sel-on .star.on svg {
  color: #f4b400 !important;
}
html body #list .trow.on .lbl,
html body #list .trow.sel-on .lbl {
  color: var(--lc, #8e8e93) !important;
}
html body #list .trow.on .who .cnt,
html body #list .trow.sel-on .who .cnt,
html body #list .trow.on .snippet,
html body #list .trow.sel-on .snippet,
html body #list .trow.on .snip,
html body #list .trow.sel-on .snip {
  color: var(--t3) !important;
}
/* the arrival nightlight: a soft blue that settles */
@media (prefers-reduced-motion: no-preference) {
  @keyframes rowArrive {
    0% {
      opacity: 0;
      transform: translateY(-10px);
    }
    30% {
      opacity: 1;
      transform: none;
      background-color: color-mix(in srgb, #0a84ff 26%, transparent);
    }
    100% {
      transform: none;
    }
  }
}
/* Drag a conversation onto the sidebar (2026-09-22): the target lifts and tints; the row being dragged dims */
html body #list .trow.dragging {
  opacity: 0.5;
}
body.drag-threads .nav a[data-folder],
body.drag-threads .nav a[data-label],
body.drag-threads .nav a[href="#/mail"],
body.drag-threads .nav a[href="#/mail/archive"] {
  outline: 1.5px dashed transparent;
  outline-offset: -2px;
  transition:
    outline-color 0.12s,
    background 0.12s;
}
.nav a.dropping {
  background: color-mix(in srgb, var(--blue) 16%, transparent) !important;
  outline-color: var(--blue) !important;
  color: var(--blue) !important;
}
.dragghost {
  position: fixed;
  left: -9999px;
  top: -9999px;
  padding: 0.4rem 0.7rem;
  background: var(--layer);
  color: var(--text);
  border: 1px solid var(--hair2, var(--hair));
  border-radius: 8px;
  font-size: 0.85rem;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.18);
  max-width: 320px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
/* Pager (2026-09-22): Gmail's "1–50 of 111 ‹ ›" at the foot of the list */
#list .pager {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 0.15rem;
  padding: 0.9rem 1.2rem 1.2rem;
  color: var(--t3);
  font-size: 0.82rem;
  font-variant-numeric: tabular-nums;
}
#list .pager .pg-n {
  margin-right: 0.5rem;
}
#list .pager .pg {
  all: unset;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  cursor: pointer;
}
#list .pager .pg:hover:not([disabled]) {
  background: var(--act-bg);
  color: var(--text);
}
#list .pager .pg[disabled] {
  opacity: 0.3;
  cursor: default;
}
#list .pager .pg .ic {
  width: 16px;
  height: 16px;
}
#list .pager .pg[data-pg="1"] .ic {
  transform: rotate(180deg);
}
/* Invite a friend: a compact pill, not a full-width bar (Shane, 2026-09-22) */
.nav .invites {
  padding: 0.5rem 14px 0.8rem !important;
}
.nav .invites a {
  display: inline-flex !important;
  width: auto !important;
  justify-content: flex-start !important;
  gap: 0.4rem !important;
  padding: 0.4rem 0.8rem 0.4rem 0.7rem !important;
  font-size: 0.84rem !important;
  border: 1px solid var(--hair) !important;
  border-radius: 999px !important;
  background: transparent !important;
}
.nav .invites a .cnt {
  margin-left: 0.15rem !important;
  padding: 0.05rem 0.45rem;
  border-radius: 999px;
  background: var(--act-bg);
  color: var(--t2) !important;
  font-size: 0.72rem !important;
}
#list .lsec .lsec-pg {
  display: inline-flex;
  gap: 0;
  margin-left: 0.2rem;
}
#list .lsec .lsec-pg .pg {
  all: unset;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  cursor: pointer;
}
#list .lsec .lsec-pg .pg:hover:not([disabled]) {
  background: var(--act-bg);
}
#list .lsec .lsec-pg .pg[disabled] {
  opacity: 0.3;
  cursor: default;
}
#list .lsec .lsec-pg .pg .ic {
  width: 14px;
  height: 14px;
}
#list .lsec .lsec-pg .pg[data-spg="1"] .ic,
#list .lsec .lsec-pg .pg[data-pg="1"] .ic {
  transform: rotate(180deg);
}
/* Toasts with actions (2026-09-22): Gmail's "Message sent · Undo · View message" */
#toasts .toast.acts {
  display: flex;
  align-items: center;
  gap: 0.2rem;
  padding-right: 0.5rem !important;
}
#toasts .toast .tact {
  all: unset;
  margin-left: 0.6rem;
  padding: 0.35rem 0.6rem;
  border-radius: 8px;
  color: #8ab4f8;
  font-weight: 600;
  font-size: 0.86rem;
  cursor: pointer;
  white-space: nowrap;
}
#toasts .toast .tact:hover {
  background: rgba(255, 255, 255, 0.1);
}
html[data-sup-mode="light"] #toasts .toast .tact {
  color: #8ab4f8;
}
/* Invite a friend: centred, with air above and below (Shane, 2026-09-22) */
.nav .invites {
  text-align: center !important;
  padding: 1rem 14px 1rem !important;
}
.nav .invites a {
  margin: 0 auto;
}
/* In a message card: the trimmed-quote toggle is Gmail's quiet ⋯ pill; delivery status is quiet text, not a green pill (Shane, 2026-09-22) */
.mcard details.quote summary {
  font-size: 0 !important;
  letter-spacing: 0 !important;
  background: var(--act-bg) !important;
  color: var(--t2) !important;
  border-radius: 999px !important;
  padding: 0 0.55rem !important;
  height: 20px;
  line-height: 20px;
  display: inline-flex !important;
  align-items: center;
  margin: 0.3rem 0 0;
}
.mcard details.quote summary::before {
  content: "•••";
  font-size: 0.7rem;
  letter-spacing: 0.12em;
}
.mcard details.quote summary:hover {
  background: var(--act-bg-h) !important;
  color: var(--text) !important;
}
.mcard details.quote[open] summary {
  margin-bottom: 0.5rem;
}
.mcard .mstatus {
  margin-top: 0.75rem !important;
  gap: 0.25rem 1rem !important;
}
html .mcard .mstatus .pill {
  background: transparent !important;
  padding: 0 !important;
  font: 400 0.8rem/1.4 var(--sans) !important;
  color: var(--t3) !important;
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
}
html .mcard .mstatus .pill::before {
  content: "";
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.9;
  flex: none;
}
html .mcard .mstatus .pill.g::before {
  background: #34c759;
}
html .mcard .mstatus .pill.y::before {
  background: #ff9f0a;
}
html .mcard .mstatus .pill.r {
  color: #ff3b30 !important;
}
html .mcard .mstatus .pill.r::before {
  background: #ff3b30;
}
/* SIGNED and the lock are pills that open a popover with the facts (Shane, 2026-09-22) */
.mcard .sig,
.mcard .toline .leg:not(:empty) {
  cursor: pointer;
  border-radius: 999px;
  padding: 0.1rem 0.5rem !important;
  transition: background 0.12s;
}
.mcard .sig:hover,
.mcard .toline .leg:not(:empty):hover {
  background: var(--act-bg);
}
.mcard .sig.ok {
  background: color-mix(in srgb, #34c759 12%, transparent);
}
.mcard .sig.warn {
  background: color-mix(in srgb, #ff9f0a 14%, transparent);
}
.mcard .sig.bad {
  background: color-mix(in srgb, #ff3b30 14%, transparent);
}
.popmenu.infopop {
  width: min(380px, 92vw) !important;
  padding: 0.75rem 0.95rem 0.85rem !important;
}
.popmenu.infopop .ip-t {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-weight: 600;
  font-size: 0.95rem;
  color: var(--text);
}
.popmenu.infopop .ip-t .ic {
  width: 18px;
  height: 18px;
}
.popmenu.infopop .ip-t.ok .ic {
  color: #34c759;
}
.popmenu.infopop .ip-t.warn .ic {
  color: #ff9f0a;
}
.popmenu.infopop .ip-t.bad .ic {
  color: #ff3b30;
}
.popmenu.infopop .ip-l {
  font-size: 0.86rem;
  color: var(--t2);
  line-height: 1.45;
  margin-top: 0.45rem;
}
.popmenu.infopop .ip-k {
  font-family: var(--mono);
  font-size: 0.78rem;
  color: var(--text);
}
/* Gmail's three dropdowns on a message (2026-09-22): ▾ details, the person card, ⋯ */
.mcard .toline .tdet {
  all: unset;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  margin-left: 0.2rem;
  color: var(--t3);
  cursor: pointer;
  vertical-align: middle;
}
.mcard .toline .tdet:hover {
  background: var(--act-bg);
  color: var(--text);
}
.mcard .toline .tdet .ic {
  width: 12px;
  height: 12px;
  transform: rotate(-90deg);
}
.popmenu.detpop {
  width: min(520px, 94vw) !important;
}
.popmenu .dett {
  border-collapse: collapse;
  margin-top: 0.5rem;
  font-size: 0.86rem;
}
.popmenu .dett th {
  text-align: right;
  color: var(--t3);
  font-weight: 400;
  padding: 0.22rem 0.7rem 0.22rem 0;
  white-space: nowrap;
  vertical-align: top;
}
.popmenu .dett td {
  padding: 0.22rem 0;
  color: var(--text);
  word-break: break-word;
  vertical-align: top;
}
.popmenu .dett td .ic {
  width: 14px;
  height: 14px;
  vertical-align: -2px;
  margin-right: 0.2rem;
}
.popmenu.personpop {
  width: min(340px, 92vw) !important;
  padding: 0.9rem 1rem 1rem !important;
}
.popmenu.personpop .pc-top {
  display: flex;
  align-items: center;
  gap: 0.9rem;
}
.popmenu.personpop .pc-av .av,
.popmenu.personpop .pc-av img {
  width: 56px !important;
  height: 56px !important;
  font-size: 1.2rem !important;
  border-radius: 50%;
}
.popmenu.personpop .pc-who {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.popmenu.personpop .pc-who b {
  font-size: 1.15rem;
  font-weight: 600;
  color: var(--text);
}
.popmenu.personpop .pc-who .ip-k {
  font-family: var(--sans);
  font-size: 0.86rem;
  color: var(--t3);
  overflow: hidden;
  text-overflow: ellipsis;
}
.popmenu.personpop .pc-acts {
  display: flex;
  gap: 0.45rem;
  margin-top: 0.9rem;
}
.popmenu.personpop .pc-main {
  all: unset;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  height: 42px;
  border-radius: 999px;
  background: color-mix(in srgb, var(--blue) 16%, transparent);
  color: var(--blue);
  font-weight: 600;
  font-size: 0.95rem;
  cursor: pointer;
}
.popmenu.personpop .pc-main:hover {
  background: color-mix(in srgb, var(--blue) 24%, transparent);
}
.popmenu.personpop .pc-round {
  all: unset;
  width: 42px;
  height: 42px;
  border-radius: 50%;
  border: 1px solid var(--hair2, var(--hair));
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--t2);
  cursor: pointer;
  box-sizing: border-box;
}
.popmenu.personpop .pc-round:hover {
  background: var(--act-bg);
  color: var(--text);
}
.popmenu.personpop .ic {
  width: 18px;
  height: 18px;
}
.popmenu.mmenu {
  min-width: 240px;
}
.popmenu .pmsep {
  height: 1px;
  background: var(--hair);
  margin: 0.3rem 0;
}
.popmenu.mmenu button .ic {
  width: 16px;
  height: 16px;
}
@media print {
  body.print-one * {
    visibility: hidden !important;
  }
  body.print-one .mcard.printing,
  body.print-one .mcard.printing * {
    visibility: visible !important;
  }
  body.print-one .mcard.printing {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    box-shadow: none;
    border: 0;
  }
  body.print-one .mcard.printing .mtop,
  body.print-one .mcard.printing .mact,
  body.print-one .mcard.printing .tdet {
    display: none !important;
  }
}
.popmenu.personpop .pc-main,
.popmenu.personpop .pc-who b {
  font-family: var(--sans) !important;
}
/* Person card, filled out (2026-09-22): tag, counts, links */
.popmenu.personpop {
  width: min(360px, 92vw) !important;
}
.popmenu.personpop .pc-tag {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.76rem;
  color: var(--t3);
  margin-top: 0.2rem;
}
.popmenu.personpop .pc-tag .ic {
  width: 12px;
  height: 12px;
}
.popmenu.personpop .pc-info {
  margin-top: 0.8rem;
  background: var(--act-bg);
  border-radius: 12px;
  padding: 0.55rem 0.8rem;
  display: flex;
  flex-direction: column;
  gap: 0.3rem;
}
.popmenu.personpop .pc-row {
  display: flex;
  align-items: center;
  gap: 0.55rem;
  font-size: 0.86rem;
  color: var(--t2);
}
.popmenu.personpop .pc-row .ic {
  width: 16px;
  height: 16px;
  color: var(--t3);
  flex: none;
}
.popmenu.personpop .pc-row b {
  color: var(--text);
  font-weight: 600;
}
.popmenu.personpop .pc-links {
  margin-top: 0.4rem;
  background: var(--act-bg);
  border-radius: 12px;
  padding: 0.2rem 0.3rem;
  display: flex;
  flex-direction: column;
}
.popmenu.personpop .pc-link {
  all: unset;
  display: flex;
  align-items: center;
  gap: 0.55rem;
  padding: 0.5rem 0.55rem;
  border-radius: 8px;
  font-size: 0.9rem;
  font-weight: 600;
  color: var(--blue);
  cursor: pointer;
  font-family: var(--sans);
}
.popmenu.personpop .pc-link:hover {
  background: rgba(120, 120, 128, 0.12);
}
.popmenu.personpop .pc-link .ic {
  width: 16px;
  height: 16px;
  flex: none;
}
.popmenu.personpop .pc-link span {
  flex: 1;
}
.popmenu.personpop button,
.popmenu.personpop .pc-who b,
.popmenu.personpop .pc-row,
.popmenu.infopop .ip-t,
.popmenu.infopop .ip-l,
.popmenu .dett td {
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", Inter, system-ui, sans-serif !important;
}
/* Person card, Google's proportions (Shane, 2026-09-22): a big round avatar, a light name, the light-blue Send mail pill, round outline buttons, then the grey block with the facts and the detailed-view link */
.popmenu.personpop,
.popmenu.personpop * {
  font-family:
    "Google Sans",
    -apple-system,
    BlinkMacSystemFont,
    "SF Pro Text",
    Inter,
    system-ui,
    sans-serif !important;
}
.popmenu.personpop {
  width: min(380px, 92vw) !important;
  padding: 1.1rem 1.1rem 1rem !important;
  border-radius: 16px !important;
  box-shadow:
    0 8px 28px rgba(0, 0, 0, 0.18),
    0 0 0 0.5px rgba(0, 0, 0, 0.06) !important;
}
.popmenu.personpop .pc-top {
  gap: 1.1rem;
  align-items: center;
}
.popmenu.personpop .pc-av .av,
.popmenu.personpop .pc-av img {
  width: 80px !important;
  height: 80px !important;
  font-size: 1.7rem !important;
}
.popmenu.personpop .pc-who b {
  font-size: 1.55rem;
  font-weight: 400;
  letter-spacing: -0.01em;
  line-height: 1.2;
}
.popmenu.personpop .pc-who .ip-k {
  font-size: 0.95rem;
  margin-top: 0.1rem;
}
.popmenu.personpop .pc-tag {
  font-size: 0.78rem;
  margin-top: 0.25rem;
}
.popmenu.personpop .pc-acts {
  margin-top: 1rem;
  gap: 0.5rem;
}
.popmenu.personpop .pc-main {
  height: 46px;
  border-radius: 999px;
  background: #c2e7ff !important;
  color: #001d35 !important;
  font-weight: 500;
  font-size: 1rem;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-main {
  background: #004a77 !important;
  color: #c2e7ff !important;
}
.popmenu.personpop .pc-main:hover {
  filter: brightness(0.96);
}
.popmenu.personpop .pc-round {
  width: 46px;
  height: 46px;
  border: 1px solid #c4c7c5 !important;
  color: #444746 !important;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-round {
  border-color: #5e5e5e !important;
  color: #e3e3e3 !important;
}
.popmenu.personpop .pc-round:hover {
  background: rgba(68, 71, 70, 0.08) !important;
}
.popmenu.personpop .pc-info {
  margin-top: 0.9rem;
  border-radius: 12px 12px 0 0;
  background: #f0f4f9;
  padding: 0.7rem 0.9rem 0.6rem;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-info {
  background: #2d2f31;
}
.popmenu.personpop .pc-row {
  font-size: 0.92rem;
  color: #444746;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-row {
  color: #c4c7c5;
}
.popmenu.personpop .pc-links {
  margin-top: 1px;
  border-radius: 0 0 12px 12px;
  background: #f0f4f9;
  padding: 0.25rem 0.35rem 0.3rem;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-links {
  background: #2d2f31;
}
.popmenu.personpop .pc-link {
  font-size: 0.95rem;
  font-weight: 500;
  color: #0b57d0;
}
html[data-sup-mode="dark"] .popmenu.personpop .pc-link {
  color: #a8c7fa;
}
/* Person page details (2026-09-22) */
.phero-d {
  display: flex;
  flex-direction: column;
  gap: 0.15rem;
  margin: 0.3rem 0 0.1rem;
}
.phero-d .pd-row {
  display: flex;
  align-items: center;
  gap: 0.45rem;
  font-size: 0.92rem;
  color: var(--t2);
}
.phero-d .pd-row .ic {
  width: 15px;
  height: 15px;
  color: var(--t3);
  flex: none;
}
.phero-d .pd-note {
  color: var(--t3);
  font-style: italic;
}
.phero-b .pill.pedit {
  all: unset;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.2rem 0.6rem;
  border-radius: 999px;
  background: var(--act-bg);
  color: var(--t2);
  font-size: 0.78rem;
  cursor: pointer;
}
.phero-b .pill.pedit:hover {
  background: var(--act-bg-h);
  color: var(--text);
}
.phero-b .pill.pedit .ic {
  width: 13px;
  height: 13px;
}
/* The person page on a phone: a long address wraps inside the screen; nothing pushes the page wider than the viewport (Shane, 2026-09-22) */
.conv.person {
  overflow-x: hidden !important;
  max-width: 100%;
}
.conv.person .msgs {
  max-width: 100%;
  overflow-x: hidden !important;
  box-sizing: border-box;
}
.conv.person .head .ct {
  min-width: 0;
}
.conv.person .head .title,
.conv.person .head .sub,
.phero-n,
.phero-a {
  overflow-wrap: anywhere;
  word-break: break-word;
  min-width: 0;
}
.phero {
  min-width: 0;
  max-width: 100%;
}
.phero-t {
  min-width: 0;
  flex: 1;
}
@media (max-width: 900px) {
  .conv.person .head .acts {
    flex: 1 1 100%;
    order: 3;
    justify-content: center;
  }
  .phero {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.7rem;
  }
  .phero-n {
    font-size: 1.3rem;
  }
  .pstats {
    max-width: 100%;
  }
  .pstats div {
    flex: 1 1 calc(33.33% - 0.5rem);
    min-width: 0;
    box-sizing: border-box;
    padding: 0.5rem 0.4rem;
  }
  .ptabs {
    max-width: 100%;
    overflow-x: auto;
  }
}
/* Phones (Shane, 2026-09-22): the open conversation is a solid sheet — nothing behind it shows through */
@media (max-width: 900px) {
  html body #shell.conv-open .conv,
  html[data-sup-mode="light"] body #shell.on .conv,
  html body #shell.on .conv {
    background: var(--bg, #f2f2f7) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
  html[data-sup-mode="dark"] body #shell.conv-open .conv {
    background: #000 !important;
  }
  html body .conv .head,
  html body .conv.mail .head.mailhead {
    background: var(--bg, #f2f2f7) !important;
    -webkit-backdrop-filter: none !important;
    backdrop-filter: none !important;
    opacity: 1 !important;
  }
  html[data-sup-mode="dark"] body .conv .head {
    background: #000 !important;
  }
  html body .conv .msgs {
    background: transparent !important;
    opacity: 1 !important;
  }
  html body #shell.conv-open:not(.home) .list,
  html body #shell.conv-open:not(.home) .search,
  html body #shell.conv-open:not(.home) #hright {
    visibility: hidden !important;
  } /* a mail conversation only — SuperDrop, AI, Calendar and Settings also open with conv-open (plus .home) and their omni header is a .search (Shane, 2026-09-24: the SuperDrop header had vanished on phones) */
}
/* Phone pass (Shane, 2026-09-22) */
@media (max-width: 900px) {
  /* the selection toolbar is one scrolling row: icons only, count on one line, nothing wraps */
  html body #list > .selbar {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    height: 52px !important;
    min-height: 52px;
    padding: 0 0.6rem 0 0.8rem !important;
    gap: 0.1rem !important;
    align-items: center;
  }
  html body #list > .selbar::-webkit-scrollbar {
    display: none;
  }
  html body #list > .selbar .n {
    white-space: nowrap !important;
    font-size: 0.82rem;
    margin: 0 0.35rem 0 0.1rem !important;
  }
  html body #list > .selbar .act.tb > span,
  html body #list > .selbar .movewrap > span > span {
    display: none !important;
  }
  html body #list > .selbar .act.tb {
    flex: none;
    padding: 0 0.45rem !important;
  }
  html body #list > .selbar .sep {
    margin: 0 0.25rem;
  }
  html body #list > .selbar .act.dim {
    position: sticky;
    right: 0;
    background: var(--bg, #f2f2f7);
    padding-left: 0.6rem;
    margin-left: auto !important;
  }
  /* the category chips scroll sideways with no bar and no clipping */
  .catbar {
    overflow-x: auto !important;
    overflow-y: hidden;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -ms-overflow-style: none;
    -webkit-overflow-scrolling: touch;
    padding-right: 1rem;
  }
  .catbar::-webkit-scrollbar {
    display: none;
  }
  .catbar .chip {
    flex: none;
  }
  /* popovers become full-width cards on a phone */
  .popmenu.detpop,
  .popmenu.personpop,
  .popmenu.infopop,
  .popmenu.dockmenu,
  .popmenu.mmenu,
  .popmenu.labelmenu {
    width: calc(100vw - 16px) !important;
    max-width: calc(100vw - 16px) !important;
    left: 8px !important;
    box-sizing: border-box;
  }
  .popmenu .dett {
    width: 100%;
  }
  .popmenu .dett td,
  .popmenu .dett th {
    font-size: 0.84rem;
  }
  .popmenu .dett td .ip-k {
    font-size: 0.76rem;
    word-break: break-all;
  }
  .popmenu.personpop .pc-av .av,
  .popmenu.personpop .pc-av img {
    width: 64px !important;
    height: 64px !important;
  }
  .popmenu.personpop .pc-who b {
    font-size: 1.3rem;
  }
}
/* Get info page (2026-09-22): takes over the Drive's main area */
.fgrid.finfo {
  display: block !important;
  padding: 0 1.2rem 3rem !important;
  overflow: auto;
}
.fi-wrap {
  max-width: 1080px;
  margin: 0 auto;
}
.fi-head {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.6rem 0 0.4rem;
}
.fi-crumbs {
  display: flex;
  align-items: center;
  gap: 0.4rem;
  font-size: 0.9rem;
  color: var(--t2);
  flex-wrap: wrap;
}
.fi-crumbs a {
  color: var(--t2);
  text-decoration: none;
}
.fi-crumbs a:hover {
  color: var(--text);
  text-decoration: underline;
}
.fi-hero {
  display: flex;
  align-items: center;
  gap: 1.1rem;
  padding: 0.6rem 0 0.8rem;
}
.fi-ic {
  width: 72px;
  height: 72px;
  border-radius: 18px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--act-bg);
  color: var(--t2);
  flex: none;
}
.fi-ic .ic,
.fi-ic svg {
  width: 34px;
  height: 34px;
}
.fi-ic.folder {
  background: color-mix(in srgb, #ff9f0a 18%, transparent);
  color: #ff9f0a;
}
.fi-ht {
  min-width: 0;
}
.fi-name {
  font-size: 1.6rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  overflow-wrap: anywhere;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fi-star {
  color: #f4b400;
  display: inline-flex;
}
.fi-star .ic {
  width: 18px;
  height: 18px;
}
.fi-sub {
  color: var(--t3);
  margin-top: 0.15rem;
  font-size: 0.92rem;
}
.fi-badges {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.5rem;
}
.fi-badges .pill {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.fi-badges .pill .ic {
  width: 13px;
  height: 13px;
}
.fi-acts {
  display: flex;
  gap: 0.45rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 1rem;
}
.fi-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
  gap: 1rem;
  align-items: start;
}
.fi-card {
  background: var(--layer);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 1rem 1.1rem 1.1rem;
  margin-bottom: 1rem;
}
.fi-card.fi-map {
  grid-column: 1/-1;
}
.fi-h {
  font-weight: 700;
  font-size: 1rem;
  margin-bottom: 0.6rem;
  display: flex;
  align-items: center;
  gap: 0.4rem;
}
.fi-h.sub {
  margin-top: 0.9rem;
  font-size: 0.9rem;
}
.fi-h .dim {
  font-weight: 500;
}
.fi-dett {
  width: 100%;
}
.fi-dett th {
  width: 84px;
}
.fi-dett td a {
  color: var(--blue);
  word-break: break-all;
}
.fi-people {
  display: flex;
  flex-direction: column;
  gap: 0.2rem;
}
.fi-person {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  padding: 0.4rem 0.3rem;
  border-radius: 10px;
}
.fi-person:hover {
  background: var(--act-bg);
}
.fi-person.dimmed {
  opacity: 0.7;
}
.fi-pav .av {
  width: 32px !important;
  height: 32px !important;
  font-size: 0.7rem !important;
}
.fi-pt {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
}
.fi-pt b {
  font-weight: 600;
  font-size: 0.92rem;
}
.fi-pt span {
  font-size: 0.8rem;
  color: var(--t3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-foot {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  margin-top: 0.8rem;
  flex-wrap: wrap;
}
.fi-stats {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  margin: 0.2rem 0 0.8rem;
}
.fi-stats div {
  flex: 1 1 90px;
  background: var(--act-bg);
  border-radius: 12px;
  padding: 0.55rem 0.7rem;
  text-align: center;
}
.fi-stats b {
  display: block;
  font-size: 1.25rem;
  font-weight: 700;
}
.fi-stats span {
  font-size: 0.76rem;
  color: var(--t3);
}
.fi-mapbox {
  min-height: 320px;
  border-radius: 12px;
  overflow: hidden;
  background: var(--act-bg);
}
.fi-places {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin-top: 0.7rem;
}
.fi-place {
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  padding: 0.25rem 0.6rem;
  border-radius: 999px;
  background: var(--act-bg);
  font-size: 0.82rem;
  color: var(--t2);
}
.fi-place b {
  color: var(--text);
}
.fi-visits {
  display: flex;
  flex-direction: column;
}
.fi-visit {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  border-top: 1px solid var(--hair);
  font-size: 0.86rem;
  align-items: center;
}
.fi-visit:first-child {
  border-top: 0;
}
.fi-vwho {
  font-weight: 600;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-vwhat {
  color: var(--t2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-vwhere {
  color: var(--t3);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.fi-vwhen {
  color: var(--t3);
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}
@media (max-width: 900px) {
  .fgrid.finfo {
    padding: 0 0.8rem 5rem !important;
  }
  .fi-hero {
    gap: 0.8rem;
  }
  .fi-ic {
    width: 56px;
    height: 56px;
  }
  .fi-name {
    font-size: 1.3rem;
  }
  .fi-visit {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who when" "what what" "where where";
  }
  .fi-vwho {
    grid-area: who;
  }
  .fi-vwhen {
    grid-area: when;
  }
  .fi-vwhat {
    grid-area: what;
  }
  .fi-vwhere {
    grid-area: where;
  }
}
.fgrid.finfo .fi-wrap {
  padding-bottom: 3.5rem;
}
/* ── Presence: viewing now (Shane, 2026-09-22) — green pulse while someone has it open, grey once they leave ── */
.fi-dot {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t3);
  opacity: 0.45;
  margin-right: 0.45rem;
  vertical-align: middle;
  flex: none;
  position: relative;
  top: -1px;
}
.fi-dot.on {
  background: #34c759;
  opacity: 1;
  box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  animation: fi-pulse 1.8s ease-out infinite;
}
@keyframes fi-pulse {
  0% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0.55);
  }
  70% {
    box-shadow: 0 0 0 7px rgba(52, 199, 89, 0);
  }
  100% {
    box-shadow: 0 0 0 0 rgba(52, 199, 89, 0);
  }
}
.fi-now {
  display: flex;
  flex-direction: column;
  margin-bottom: 0.6rem;
}
.fi-now.has {
  background: color-mix(in srgb, #34c759 9%, transparent);
  border: 1px solid color-mix(in srgb, #34c759 28%, transparent);
  border-radius: 12px;
  padding: 0.15rem 0.6rem;
}
.fi-viewer {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto;
  gap: 0.6rem;
  padding: 0.45rem 0.2rem;
  border-top: 1px solid color-mix(in srgb, #34c759 18%, var(--hair));
  font-size: 0.86rem;
  align-items: center;
  transition: opacity 0.4s;
}
.fi-viewer:first-child {
  border-top: 0;
}
.fi-viewer .fi-vwho {
  display: flex;
  align-items: center;
  color: #1f9d47;
}
.fi-viewer .fi-vwhat {
  color: #1f9d47;
  font-weight: 600;
}
.fi-viewer .fi-vwhat b {
  color: var(--t1);
  font-weight: 600;
}
.fi-viewer.off {
  opacity: 0.55;
}
.fi-viewer.off .fi-vwho,
.fi-viewer.off .fi-vwhat {
  color: var(--t3);
  font-weight: 500;
}
.fi-visit .fi-vwho {
  display: flex;
  align-items: center;
}
.fi-badges .pill.live {
  background: color-mix(in srgb, #34c759 16%, transparent) !important;
  color: #1f9d47 !important;
  border-color: color-mix(in srgb, #34c759 40%, transparent) !important;
  font-weight: 600;
}
.fi-badges .pill.live i {
  display: inline-block;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: #34c759;
  animation: fi-pulse 1.8s ease-out infinite;
}
.fi-stats .fi-stat-live {
  background: var(--act-bg);
  transition:
    background 0.4s,
    color 0.4s;
}
.fi-stats .fi-stat-live.on {
  background: color-mix(in srgb, #34c759 16%, transparent);
}
.fi-stats .fi-stat-live.on b {
  color: #1f9d47;
}
.fi-stats .fi-stat-live.on span {
  color: #1f9d47;
}
.fi-h.sub {
  margin-top: 0.6rem;
}
@media (max-width: 900px) {
  .fi-viewer {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who when" "what what" "where where";
  }
  .fi-viewer .fi-vwho {
    grid-area: who;
  }
  .fi-viewer .fi-vwhen {
    grid-area: when;
  }
  .fi-viewer .fi-vwhat {
    grid-area: what;
  }
  .fi-viewer .fi-vwhere {
    grid-area: where;
  }
}
@media (prefers-color-scheme: dark) {
  .fi-viewer:not(.off) .fi-vwho,
  .fi-viewer:not(.off) .fi-vwhat,
  .fi-badges .pill.live,
  .fi-stats .fi-stat-live.on b,
  .fi-stats .fi-stat-live.on span {
    color: #4cd964;
  }
}
/* the drive grid: a live pill on any card someone has open right now */
.fgrid .fitem .flive {
  position: absolute;
  right: 8px;
  bottom: 6px;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  font-size: 0.7rem;
  font-weight: 600;
  color: #1f9d47;
  background: color-mix(in srgb, #34c759 16%, var(--layer));
  border: 1px solid color-mix(in srgb, #34c759 40%, transparent);
  border-radius: 999px;
  padding: 0.1rem 0.45rem 0.1rem 0.35rem;
  line-height: 1.3;
  pointer-events: none;
  animation: fi-in 0.25s ease-out;
  transition:
    opacity 0.5s,
    transform 0.5s;
}
.fgrid .fitem .flive i {
  display: inline-block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #34c759;
  animation: fi-pulse 1.8s ease-out infinite;
}
.fgrid .fitem .flive.off {
  opacity: 0;
  transform: translateY(4px);
}
.fgrid .fitem.row .flive {
  position: static;
  margin-right: 0.4rem;
}
@keyframes fi-in {
  from {
    opacity: 0;
    transform: translateY(4px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}
@media (prefers-color-scheme: dark) {
  .fgrid .fitem .flive {
    color: #4cd964;
  }
}
/* ── Activity per person + Remove access (Shane, 2026-09-22) ── */
.fi-visit.person {
  grid-template-columns: minmax(0, 1.2fr) minmax(0, 1.6fr) minmax(0, 1fr) auto auto;
  cursor: pointer;
  border-radius: 10px;
  margin: 0 -0.4rem;
  padding: 0.45rem 0.6rem;
  transition: background 0.15s;
}
.fi-visit.person:hover,
.fi-visit.person:focus-visible {
  background: var(--act-bg);
  outline: none;
}
.fi-visit.person + .fi-visit.person {
  border-top-color: var(--hair);
}
.fi-visit.live .fi-vwho,
.fi-visit.live .fi-vwhat {
  color: #1f9d47;
}
.fi-visit.live .fi-vwhat b {
  color: var(--t1);
}
.fi-visit.live {
  background: color-mix(in srgb, #34c759 8%, transparent);
}
.fi-visit.blocked .fi-vwho,
.fi-visit.blocked .fi-vwhat {
  color: var(--t3);
}
.fi-visit.blocked .fi-vwhat s {
  opacity: 0.6;
}
.fi-n {
  font-style: normal;
  font-size: 0.72rem;
  color: var(--t3);
  background: var(--act-bg);
  border-radius: 999px;
  padding: 0.05rem 0.45rem;
  margin-right: 0.4rem;
}
.fi-live-t {
  color: #1f9d47;
  font-weight: 600;
}
.fi-kick {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--layer);
  color: var(--t2);
  border-radius: 999px;
  font: inherit;
  font-size: 0.74rem;
  font-weight: 600;
  padding: 0.2rem 0.55rem 0.2rem 0.4rem;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  cursor: pointer;
  opacity: 0;
  transition:
    opacity 0.15s,
    background 0.15s,
    color 0.15s;
  white-space: nowrap;
}
.fi-kick .ic,
.fi-kick svg {
  width: 12px;
  height: 12px;
}
.fi-visit.person:hover .fi-kick,
.fi-visit.person:focus-within .fi-kick,
.fi-visit.live .fi-kick,
.fi-kick.on {
  opacity: 1;
}
.fi-kick:hover {
  background: color-mix(in srgb, #ff3b30 14%, var(--layer));
  color: #d62d20;
  border-color: color-mix(in srgb, #ff3b30 40%, transparent);
}
.fi-kick.on {
  background: color-mix(in srgb, #ff3b30 12%, var(--layer));
  color: #d62d20;
  border-color: color-mix(in srgb, #ff3b30 35%, transparent);
}
.fi-kick.on:hover {
  background: color-mix(in srgb, #34c759 14%, var(--layer));
  color: #1f9d47;
  border-color: color-mix(in srgb, #34c759 40%, transparent);
}
.fi-kick-slot {
  width: 0;
}
.fi-hint {
  margin: 0.5rem 0 0;
  font-size: 0.78rem;
}
.fi-pav.big .av,
.fi-pav.big img {
  width: 64px;
  height: 64px;
  font-size: 1.4rem;
  border-radius: 20px;
}
.fp-hero {
  align-items: center;
}
.fp-hero .fi-badges .pill.r {
  background: color-mix(in srgb, #ff3b30 14%, transparent) !important;
  color: #d62d20 !important;
  border-color: color-mix(in srgb, #ff3b30 35%, transparent) !important;
}
.fp-kick {
  margin-left: auto;
  align-self: center;
  white-space: nowrap;
}
.btn.danger {
  background: color-mix(in srgb, #ff3b30 12%, var(--layer)) !important;
  color: #d62d20 !important;
  border: 1px solid color-mix(in srgb, #ff3b30 35%, transparent) !important;
}
.btn.danger:hover {
  background: color-mix(in srgb, #ff3b30 22%, var(--layer)) !important;
}
@media (max-width: 900px) {
  .fi-visit.person {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas: "who when" "what what" "where kick";
  }
  .fi-kick,
  .fi-kick-slot {
    grid-area: kick;
    justify-self: end;
    opacity: 1;
  }
  .fp-hero {
    flex-wrap: wrap;
  }
  .fp-kick {
    margin-left: 0;
  }
}
@media (prefers-color-scheme: dark) {
  .fi-visit.live .fi-vwho,
  .fi-visit.live .fi-vwhat,
  .fi-live-t {
    color: #4cd964;
  }
  .fi-kick.on,
  .fi-kick:hover,
  .btn.danger,
  .fp-hero .fi-badges .pill.r {
    color: #ff6b6b !important;
  }
}

/* the official SuperFile mark stands for a protected file everywhere (Shane, 2026-09-23) */
.sfmark {
  width: 1.25em;
  height: 1.25em;
  border-radius: 50%;
  object-fit: cover;
  display: inline-block;
  vertical-align: middle;
  user-select: none;
  -webkit-user-drag: none;
}
/* the small protected-state glyph on a row/card keeps its old 14–16px, never the row height */
.fgrid .fitem .fprot .sfmark,
.fgrid .fitem .fstate .sfmark,
.fgrid .fitem .fmail .sfmark {
  width: 16px;
  height: 16px;
  display: block;
}
.fgrid .fitem.row .fprot .sfmark {
  width: 18px;
  height: 18px;
}
.fgrid .fitem.k-drm .fic {
  background: none !important;
  padding: 0;
}
.fgrid .fitem.k-drm .fic .sfmark {
  width: calc(100% - 4px);
  max-width: 36px;
  height: auto;
  aspect-ratio: 1/1;
}
.fi-ic:has(.sfmark) {
  background: none;
}
.fi-ic .sfmark {
  width: 60px;
  height: 60px;
}
.shrow .cf-ic.k-drm,
.cf-ic.k-drm {
  background: none !important;
}
.cf-ic .sfmark {
  width: 26px;
  height: 26px;
}
.rcard.file[data-drm] .rmark {
  background: none;
}
.rmark .sfmark {
  width: 44px;
  height: 44px;
}
/* the mark inside any pill, badge or button is a 13px inline glyph, never the container */
.pill .sfmark,
.fi-badges .pill .sfmark,
.btn .sfmark,
.tb .sfmark,
.dstrip-t .sfmark,
.mkt-conn .sfmark {
  width: 13px;
  height: 13px;
  display: inline-block;
  vertical-align: -2px;
}
/* ── Where it was opened: the rebuilt map (Shane, 2026-09-23). Flat, quiet, inside the card — no dark box, no outer shadow ── */
.fi-mapbox {
  min-height: 380px;
  border-radius: 16px;
  overflow: hidden;
  background: transparent;
  box-shadow: none !important;
  border: 1px solid var(--hair);
}
.wm2 {
  position: relative;
  display: block;
  height: 100%;
  min-height: 380px;
  --wm-sea: #eef0f5;
  --wm-land: #d8dce5;
  --wm-coast: rgba(20, 24, 40, 0.12);
  --wm-grid: rgba(20, 24, 40, 0.045);
  --wm-accent: #0a84ff;
  --wm-live: #30d158;
  --wm-muted: rgba(64, 70, 90, 0.55);
  --wm-ink: #fff;
  --wm-ring: rgba(255, 255, 255, 0.95);
  color: var(--t1);
}
[data-sup-mode="dark"] .wm2 {
  --wm-sea: #0f1219;
  --wm-land: #262c3a;
  --wm-coast: rgba(255, 255, 255, 0.12);
  --wm-grid: rgba(255, 255, 255, 0.05);
  --wm-muted: rgba(200, 206, 220, 0.5);
  --wm-ring: rgba(10, 12, 18, 0.9);
}
.wm2 canvas {
  display: block;
  width: 100%;
  height: 100%;
  min-height: 380px;
  outline: none;
  touch-action: none;
  cursor: grab;
}
.wm2 canvas:active {
  cursor: grabbing;
}
.wm2-top {
  position: absolute;
  left: 10px;
  right: 10px;
  top: 10px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 0.5rem;
  z-index: 3;
  pointer-events: none;
}
.wm2-top > * {
  pointer-events: auto;
}
.wm2-seg {
  display: inline-flex;
  gap: 0.1rem;
  padding: 0.2rem;
  border-radius: 11px;
  background: color-mix(in srgb, var(--layer) 88%, transparent);
  border: 1px solid var(--hair);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
.wm2-seg button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--t2);
  font: 600 0.76rem var(--sans);
  padding: 0.34rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
}
.wm2-seg button.on {
  background: var(--text);
  color: var(--bg);
}
.wm2-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #30d158;
  box-shadow: 0 0 0 0 rgba(48, 209, 88, 0.6);
  animation: fi-pulse 1.8s ease-out infinite;
}
.wm2-right {
  display: inline-flex;
  align-items: center;
  gap: 0.4rem;
}
.wm2-live {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  font: 600 0.74rem var(--sans);
  color: #1f9d47;
  background: color-mix(in srgb, #30d158 14%, var(--layer));
  border: 1px solid color-mix(in srgb, #30d158 40%, transparent);
  border-radius: 999px;
  padding: 0.3rem 0.6rem;
}
.wm2-live i {
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #30d158;
  animation: fi-pulse 1.8s ease-out infinite;
}
.wm2-ib {
  width: 30px;
  height: 30px;
  border-radius: 9px;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--layer) 88%, transparent);
  color: var(--t2);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  backdrop-filter: blur(10px);
}
.wm2-ib:hover {
  color: var(--t1);
  background: var(--layer);
}
.wm2-tip {
  position: absolute;
  z-index: 4;
  pointer-events: none;
  background: var(--layer);
  color: var(--t1);
  border: 1px solid var(--hair);
  border-radius: 10px;
  padding: 0.4rem 0.6rem;
  font: 0.76rem/1.3 var(--sans);
  box-shadow: 0 6px 20px rgba(0, 0, 0, 0.12);
  max-width: 220px;
}
.wm2-tip b {
  display: block;
  font-weight: 700;
}
.wm2-tip span {
  color: var(--t3);
}
.wm2-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
  z-index: 2;
  font: 0.84rem var(--sans);
  color: var(--t3);
  background: color-mix(in srgb, var(--layer) 85%, transparent);
  border: 1px solid var(--hair);
  padding: 0.45rem 0.8rem;
  border-radius: 999px;
  pointer-events: none;
  white-space: nowrap;
}
.wm2-foot {
  position: absolute;
  left: 10px;
  right: 10px;
  bottom: 10px;
  z-index: 3;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
  pointer-events: none;
}
.wm2-foot > * {
  pointer-events: auto;
}
.wm2-chips {
  display: flex;
  gap: 0.35rem;
  flex-wrap: wrap;
  min-width: 0;
}
.wm2-chip {
  appearance: none;
  border: 1px solid var(--hair);
  background: color-mix(in srgb, var(--layer) 90%, transparent);
  color: var(--t2);
  font: 500 0.74rem var(--sans);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 0.3rem;
  backdrop-filter: blur(8px);
}
.wm2-chip b {
  font-weight: 700;
  color: var(--t1);
}
.wm2-chip:hover {
  color: var(--t1);
  background: var(--layer);
}
.wm2-chip.live {
  border-color: color-mix(in srgb, #30d158 45%, transparent);
  color: #1f9d47;
}
.wm2-sum {
  font: 0.74rem var(--sans);
  color: var(--t3);
  white-space: nowrap;
  background: color-mix(in srgb, var(--layer) 85%, transparent);
  padding: 0.3rem 0.55rem;
  border-radius: 999px;
  border: 1px solid var(--hair);
}
.wm2-panel {
  position: absolute;
  right: 10px;
  top: 52px;
  bottom: auto;
  max-height: calc(100% - 104px);
  width: min(320px, calc(100% - 20px));
  z-index: 5;
  background: var(--layer);
  border: 1px solid var(--hair);
  border-radius: 14px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.14);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: fi-in 0.2s ease-out;
}
.wm2-ph {
  display: flex;
  align-items: center;
  gap: 0.6rem;
  padding: 0.7rem 0.8rem;
  border-bottom: 1px solid var(--hair);
}
.wm2-flag {
  font-size: 1.3rem;
}
.wm2-ph div {
  min-width: 0;
  flex: 1;
}
.wm2-ph b {
  display: block;
  font-size: 0.92rem;
  font-weight: 700;
}
.wm2-ph span {
  font-size: 0.76rem;
  color: var(--t3);
}
.wm2-ph em {
  font-style: normal;
  color: #1f9d47;
  font-weight: 600;
}
.wm2-x {
  appearance: none;
  border: 0;
  background: var(--act-bg);
  color: var(--t2);
  width: 26px;
  height: 26px;
  border-radius: 8px;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
}
.wm2-rows {
  overflow: auto;
  padding: 0.3rem 0.4rem 0.4rem;
}
.wm2-row {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.5rem 0.45rem;
  border-radius: 10px;
}
.wm2-row:hover {
  background: var(--act-bg);
}
.wm2-rt {
  min-width: 0;
  flex: 1;
}
.wm2-rt b {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.wm2-rt span {
  font-size: 0.72rem;
  color: var(--t3);
}
.wm2-pdot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--t3);
  opacity: 0.45;
  flex: none;
}
.wm2-row.live .wm2-pdot {
  background: #30d158;
  opacity: 1;
  animation: fi-pulse 1.8s ease-out infinite;
}
.wm2-row.live .wm2-rt span {
  color: #1f9d47;
  font-weight: 600;
}
.wm2-row.blocked .wm2-rt b {
  color: var(--t3);
  text-decoration: line-through;
}
.wm2-mini {
  appearance: none;
  border: 1px solid var(--hair);
  background: var(--layer);
  color: var(--t2);
  font: 600 0.68rem var(--sans);
  padding: 0.28rem 0.5rem;
  border-radius: 999px;
  cursor: pointer;
  white-space: nowrap;
}
.wm2-mini:hover {
  color: var(--t1);
}
.wm2-mini.warn:hover {
  background: color-mix(in srgb, #ff3b30 14%, var(--layer));
  color: #d62d20;
  border-color: color-mix(in srgb, #ff3b30 40%, transparent);
}
.wm2-mini.on {
  background: color-mix(in srgb, #ff3b30 12%, var(--layer));
  color: #d62d20;
}
.wm2-mini.on:hover {
  background: color-mix(in srgb, #34c759 14%, var(--layer));
  color: #1f9d47;
}
.wm2.full {
  position: fixed;
  inset: 0;
  z-index: 600;
  border-radius: 0;
  min-height: 100vh;
}
.wm2.full canvas {
  min-height: 100vh;
}
@media (max-width: 700px) {
  .wm2-panel {
    left: 10px;
    right: 10px;
    top: auto;
    bottom: 52px;
    width: auto;
    max-height: 55%;
  }
  .wm2-sum {
    display: none;
  }
  .wm2-seg button {
    padding: 0.32rem 0.48rem;
  }
}
.wm2-panel[hidden],
.wm2-tip[hidden],
.wm2-empty[hidden],
.wm2-live[hidden] {
  display: none !important;
}
.fi-map .fi-places {
  display: none !important;
} /* the places now live inside the map as fly-to chips */
/* ── the globe (Shane, 2026-09-23): the archive.superfile.com night earth, inside the card, no outer shadow ── */
.wm2.gm {
  background: #05060f;
  min-height: 540px;
  --wm-ink: #fff;
  color: #e8e9f2;
}
.fi-mapbox:has(.gm) {
  border-color: rgba(255, 255, 255, 0.08);
  min-height: 540px;
}
.gm-stage {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.gm-stage canvas {
  outline: none;
}
.gm .wm2-seg,
.gm .wm2-ib,
.gm .wm2-chip,
.gm .wm2-sum,
.gm .wm2-tip,
.gm .wm2-empty {
  background: rgba(10, 14, 31, 0.78);
  border-color: rgba(255, 255, 255, 0.12);
  color: #cfd3e6;
  backdrop-filter: blur(12px);
  -webkit-backdrop-filter: blur(12px);
}
.gm .wm2-seg button {
  color: #aab0c8;
}
.gm .wm2-seg button.on {
  background: #fff;
  color: #0b0d16;
}
.gm .wm2-ib:hover,
.gm .wm2-chip:hover {
  color: #fff;
  background: rgba(20, 26, 50, 0.9);
}
.gm .wm2-chip b {
  color: #fff;
}
.gm .wm2-tip {
  color: #fff;
}
.gm .wm2-tip span {
  color: #aab0c8;
}
.gm .wm2-panel {
  background: rgba(10, 14, 31, 0.92);
  border-color: rgba(255, 255, 255, 0.12);
  color: #e8e9f2;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}
.gm .wm2-ph {
  border-color: rgba(255, 255, 255, 0.1);
}
.gm .wm2-ph span,
.gm .wm2-rt span {
  color: #aab0c8;
}
.gm .wm2-row:hover {
  background: rgba(255, 255, 255, 0.06);
}
.gm .wm2-x {
  background: rgba(255, 255, 255, 0.08);
  color: #fff;
}
.gm .wm2-mini {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.14);
  color: #e8e9f2;
}
.gm .wm2-pdot {
  background: #6b7190;
}
.gm-status {
  display: inline-flex;
  align-items: center;
  gap: 0.55rem;
  font:
    600 0.62rem/1 "IBM Plex Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: #aab0c8;
  background: rgba(10, 14, 31, 0.78);
  border: 1px solid rgba(255, 255, 255, 0.12);
  padding: 0.48rem 0.8rem;
  border-radius: 999px;
  white-space: nowrap;
  backdrop-filter: blur(12px);
}
.gm-status i {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: #6b7190;
}
.gm-status i.on {
  background: #34d399;
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.6);
  animation: fi-pulse 1.8s ease-out infinite;
}
.gm-status em {
  font-style: normal;
  color: #7c83a3;
  border-left: 1px solid rgba(255, 255, 255, 0.14);
  padding-left: 0.55rem;
}
/* markers: a chip with initials (one person) or a count, the city under it; live pulses green, recent glows its colour */
.gm-mk {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 2px;
  transform: translate(-50%, -50%);
  pointer-events: auto;
  cursor: pointer;
  --c: #60a5fa;
}
.gm-mk b {
  width: 26px;
  height: 26px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font:
    700 0.66rem "IBM Plex Mono",
    ui-monospace,
    Menlo,
    monospace;
  color: #fff;
  background: rgba(10, 14, 31, 0.92);
  border: 1.5px solid var(--c);
  box-shadow:
    0 0 0 3px rgba(10, 14, 31, 0.55),
    0 0 14px color-mix(in srgb, var(--c) 55%, transparent);
  transition: transform 0.15s;
}
.gm-mk:hover b,
.gm-mk.sel b {
  transform: scale(1.18);
}
.gm-mk span {
  font:
    600 0.58rem "IBM Plex Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(232, 233, 242, 0.7);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
  white-space: nowrap;
}
.gm-mk i {
  position: absolute;
  top: 13px;
  left: 50%;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  transform: translate(-50%, -50%);
  pointer-events: none;
}
.gm-mk.live b {
  border-color: #34d399;
  box-shadow:
    0 0 0 3px rgba(10, 14, 31, 0.55),
    0 0 18px rgba(52, 211, 153, 0.7);
}
.gm-mk.live i {
  box-shadow: 0 0 0 0 rgba(52, 211, 153, 0.55);
  animation: fi-pulse 1.8s ease-out infinite;
}
.gm-mk.recent b {
  box-shadow:
    0 0 0 3px rgba(10, 14, 31, 0.55),
    0 0 22px var(--c);
}
.wm2.gm.full {
  background: #05060f;
}
@media (max-width: 700px) {
  .gm-status em {
    display: none;
  }
  .wm2.gm {
    min-height: 380px;
  }
}

/* ── Geofence (Shane, 2026-09-23) ── */
.fi-fence {
  grid-column: 1/-1;
}
.gf-row {
  margin: 0.2rem 0 0.6rem;
}
.gf-inh {
  margin: 0 0 0.6rem;
  padding: 0.5rem 0.7rem;
  border-radius: 10px;
  background: var(--act-bg);
}
.gf-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 0.4rem;
  margin: 0.2rem 0 0.6rem;
}
.gf-chip {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.3rem 0.45rem 0.3rem 0.55rem;
  border-radius: 999px;
  font-size: 0.82rem;
  font-weight: 600;
  border: 1px solid var(--hair);
  background: var(--layer);
}
.gf-chip i {
  font-style: normal;
}
.gf-chip.deny {
  color: #d62d20;
  border-color: color-mix(in srgb, #ff3b30 40%, transparent);
  background: color-mix(in srgb, #ff3b30 10%, var(--layer));
}
.gf-chip.allow {
  color: #1f9d47;
  border-color: color-mix(in srgb, #34c759 45%, transparent);
  background: color-mix(in srgb, #34c759 10%, var(--layer));
}
.gf-chip button {
  appearance: none;
  border: 0;
  background: transparent;
  color: inherit;
  opacity: 0.7;
  cursor: pointer;
  font-size: 1rem;
  line-height: 1;
  padding: 0 0.1rem;
}
.gf-chip button:hover {
  opacity: 1;
}
.gf-add {
  position: relative;
  max-width: 460px;
}
.gf-q {
  width: 100%;
  font: inherit;
  font-size: 0.9rem;
  padding: 0.55rem 0.75rem;
  border: 1px solid var(--hair);
  border-radius: 11px;
  background: var(--layer);
  color: var(--text);
  outline: none;
}
.gf-q:focus {
  border-color: var(--blue, #0f62fe);
}
.gf-res {
  position: absolute;
  left: 0;
  right: 0;
  top: calc(100% + 4px);
  z-index: 20;
  background: var(--layer);
  border: 1px solid var(--hair);
  border-radius: 12px;
  box-shadow: 0 12px 36px rgba(0, 0, 0, 0.14);
  padding: 0.3rem;
  display: flex;
  flex-direction: column;
  max-height: 280px;
  overflow: auto;
}
.gf-res[hidden] {
  display: none !important;
}
.gf-res button {
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
  font-size: 0.88rem;
  text-align: left;
  padding: 0.45rem 0.6rem;
  border-radius: 8px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.gf-res button:hover {
  background: var(--act-bg);
}
.gf-res button i {
  font-style: normal;
}
.gf-res button em {
  margin-left: auto;
  font-style: normal;
  color: var(--t3);
  font-size: 0.74rem;
  font-variant-numeric: tabular-nums;
}
.gf-foot {
  display: flex;
  align-items: center;
  gap: 0.7rem;
  margin-top: 0.4rem;
}
.fi-n.gf {
  color: #d62d20;
  background: color-mix(in srgb, #ff3b30 12%, transparent);
}
/* zones on the globe */
.gm-zone {
  transform: translate(-50%, -50%);
  pointer-events: none;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 1px;
}
.gm-zone b {
  font:
    800 0.56rem "IBM Plex Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.14em;
  color: #fff;
  background: rgba(255, 59, 48, 0.85);
  padding: 0.16rem 0.4rem;
  border-radius: 999px;
}
.gm-zone.allow b {
  background: rgba(52, 199, 89, 0.85);
}
.gm-zone span {
  font:
    600 0.6rem "IBM Plex Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.85);
  text-shadow: 0 1px 6px rgba(0, 0, 0, 0.9);
}
.gm-status em.deny {
  color: #ff6b6b;
  border-left-color: rgba(255, 107, 107, 0.4);
}
.gm-status em.allow {
  color: #34d399;
}
.wm2 {
  --wm-deny: rgba(255, 59, 48, 0.3);
  --wm-allow: rgba(52, 199, 89, 0.3);
}

/* Access requests (2026-09-23): a tab in the notification card, a card on Get info */
.nf-tabs {
  display: flex;
  gap: 6px;
  margin: 0 0 6px;
  padding: 4px;
  border-radius: 12px;
  background: var(--layer2, rgba(120, 120, 128, 0.08));
}
.nf-tab {
  flex: 1;
  appearance: none;
  border: 0;
  background: transparent;
  color: var(--lg-t3, #6d685f);
  font: inherit;
  font-weight: 600;
  font-size: 13px;
  padding: 8px 10px;
  border-radius: 9px;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
}
.nf-tab.on {
  background: var(--layer, #fff);
  color: var(--lg-text, #1c1a17);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.08);
}
.nf-tab b {
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff453a;
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rq-row {
  gap: 12px !important;
}
.rq-row .nf-main {
  min-width: 0;
}
.rq-row .nf-main b {
  display: flex;
  gap: 6px;
  align-items: baseline;
  flex-wrap: wrap;
}
.rq-sub {
  font-weight: 500;
  color: var(--lg-t3, #6d685f);
  font-size: 12px;
}
.rq-av {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  background: linear-gradient(135deg, #c7b9ff, #8b7cf6);
  color: #fff;
  font-weight: 700;
  font-size: 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  letter-spacing: 0.02em;
}
.rq-acts {
  margin-left: auto;
  display: flex;
  gap: 6px;
  flex: none;
}
.rq-item {
  color: inherit;
  font-weight: 600;
  text-decoration: none;
}
.rq-item:hover {
  text-decoration: underline;
}
.fi-reqs .rq-list {
  display: flex;
  flex-direction: column;
  border-top: 1px solid var(--hair);
  margin-top: 0.6rem;
}
.fi-reqs .rq-row {
  border-top: 0;
  border-bottom: 1px solid var(--hair);
  padding: 10px 0;
}
.fi-reqs .rq-row:last-child {
  border-bottom: 0;
}
.fi-reqs .fi-n {
  display: inline-flex;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 9px;
  background: #ff453a;
  color: #fff;
  font-size: 11px;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  vertical-align: middle;
}
@media (max-width: 600px) {
  .rq-row {
    flex-wrap: wrap;
  }
  .rq-acts {
    margin-left: 46px;
    width: 100%;
  }
}

/* the drive globe follows the selected file(s) (2026-09-23) */
.rb-map {
  position: relative;
}
.rb-sel {
  position: absolute;
  left: 12px;
  bottom: 12px;
  z-index: 5;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px 8px 10px;
  border-radius: 14px;
  background: rgba(255, 255, 255, 0.86);
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(20, 22, 34, 0.08);
  box-shadow: 0 8px 24px rgba(18, 26, 52, 0.14);
  max-width: min(420px, calc(100% - 24px));
  font-size: 13px;
  color: #1c1a17;
}
.rb-sel-ic {
  flex: none;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #1c1a17;
  color: #fff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.rb-sel-ic svg {
  width: 16px;
  height: 16px;
}
.rb-sel-t {
  display: flex;
  flex-direction: column;
  min-width: 0;
}
.rb-sel-t b {
  font-weight: 700;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-sel-t span {
  font-size: 12px;
  color: #6d685f;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.rb-sel .btn {
  flex: none;
  margin-left: 2px;
}
.pfdark .rb-sel,
[data-theme="dark"] .rb-sel {
  background: rgba(20, 22, 30, 0.86);
  color: #f2f4ff;
  border-color: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .rb-sel-t span {
  color: #a8adba;
}

/* the file dock never covers the last row of tiles */
.fmain:has(#f-dock.on) #f-grid {
  padding-bottom: 120px !important;
}
#f-grid .fitem {
  user-select: none;
  -webkit-user-select: none;
} /* Shift-click ranges, never highlights text */

/* Phone pass · Messages thread (Shane, 2026-09-24, "look how WhatsApp does it"): one row — back · avatar · name and status · info · … —
   the actions are hidden and open from "…" (app.ts chatMoreMenu). */
@media (max-width: 900px) {
  .conv .head.chat {
    display: grid !important;
    grid-template-columns: auto auto minmax(0, 1fr) auto auto !important;
    align-items: center !important;
    column-gap: 0.5rem !important;
    overflow: visible !important;
    padding: calc(env(safe-area-inset-top) + 6px) 0.6rem 6px 0.3rem !important;
    min-height: 0 !important;
  }
  .conv .head.chat #back {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: var(--act-bg) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
  }
  .conv .head.chat .avatar,
  .conv .head.chat .av {
    width: 40px !important;
    height: 40px !important;
    font-size: 0.9rem !important;
    flex: none;
  }
  .conv .head.chat .ct {
    min-width: 0 !important;
    display: flex !important;
    flex-direction: column !important;
    gap: 0 !important;
  }
  .conv .head.chat .ct .title {
    font-size: 1.08rem !important;
    font-weight: 700 !important;
    line-height: 1.2 !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .conv .head.chat .ct .sub {
    font-size: 0.78rem !important;
    line-height: 1.2 !important;
    color: var(--t2) !important;
    white-space: nowrap !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
  }
  .conv .head.chat .acts {
    display: flex !important;
    grid-column: 4 !important;
    gap: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    flex-wrap: nowrap !important;
  }
  .conv .head.chat .acts > *:not(#info) {
    display: none !important;
  }
  .conv .head.chat .acts #info {
    width: 40px !important;
    height: 40px !important;
    display: inline-flex !important;
  }
  .conv .head.chat #hmore {
    width: 40px !important;
    height: 40px !important;
    border: 0 !important;
    background: var(--act-bg) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    margin: 0 !important;
    display: inline-flex !important;
    align-items: center;
    justify-content: center;
    font-size: 1.3rem;
    line-height: 1;
    color: var(--act-fg);
  }
  .conv .head.chat #hmore .ic {
    width: 20px;
    height: 20px;
  }
}
/* the file registry (2026-09-24): a protected file deleted from the drive stays governed — the badge says so in Protected files and Get info */
.fitem .funl {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1;
  padding: 4px 7px;
  border-radius: 999px;
  background: #fff1c2 !important;
  color: #7a5600 !important;
  margin: 0 6px;
  white-space: nowrap;
  align-self: center;
}
.fi-badges .pill.warn {
  background: #fff1c2 !important;
  color: #7a5600 !important;
}

/* ── Master console · Cookies & consent (2026-09-24): superfile.com's Cookie Admin, in sup's console language ── */
.mc .ck-tabs {
  display: flex;
  gap: 0.4rem;
  flex-wrap: wrap;
  margin: 0 0 1rem;
}
.mc .ck-tabs a {
  font-size: 0.86rem;
  font-weight: 600;
  color: var(--t3);
  background: var(--act-bg);
  border: 1px solid transparent;
  border-radius: 999px;
  padding: 0.45rem 0.9rem;
  text-decoration: none;
}
.mc .ck-tabs a:hover {
  color: var(--text);
}
.mc .ck-tabs a.on {
  color: var(--text);
  background: var(--layer);
  border-color: var(--hair);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.mc .ck-range {
  display: flex;
  gap: 0.5rem;
  align-items: center;
  margin: 0 0 1rem;
}
.mc .ck-seg {
  display: inline-flex;
  background: var(--act-bg);
  border-radius: 999px;
  padding: 3px;
}
.mc .ck-seg button {
  border: 0;
  background: none;
  font: inherit;
  font-size: 0.82rem;
  font-weight: 600;
  color: var(--t3);
  padding: 0.35rem 0.85rem;
  border-radius: 999px;
  cursor: pointer;
}
.mc .ck-seg button.on {
  background: var(--layer);
  color: var(--text);
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
}
.mc .ck-kpis {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 0.8rem;
  margin-bottom: 1rem;
}
.mc .ck-kpi {
  background: var(--layer);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 1rem 1.1rem;
}
.mc .ck-kpi b {
  display: block;
  font-size: 1.9rem;
  font-weight: 600;
  letter-spacing: -0.02em;
}
.mc .ck-kpi span {
  font-size: 0.8rem;
  color: var(--t3);
}
.mc .ck-card {
  background: var(--layer);
  border: 1px solid var(--hair);
  border-radius: 16px;
  padding: 1.1rem 1.2rem;
  margin-bottom: 1rem;
}
.mc .ck-card h3 {
  font-size: 0.95rem;
  font-weight: 600;
  margin: 0 0 0.8rem;
}
.mc .ck-bars {
  display: flex;
  flex-direction: column;
  gap: 0.7rem;
}
.mc .ck-barrow {
  display: grid;
  grid-template-columns: 150px 1fr 56px;
  gap: 0.8rem;
  align-items: center;
  font-size: 0.86rem;
}
.mc .ck-barrow .tk {
  font-weight: 500;
}
.mc .ck-track {
  background: var(--act-bg);
  border-radius: 999px;
  height: 12px;
  overflow: hidden;
}
.mc .ck-fill {
  height: 100%;
  border-radius: 999px;
  background: #0071e3;
  transition: width 0.4s ease;
}
.mc .ck-fill.g {
  background: #34c759;
}
.mc .ck-fill.o {
  background: #ff9500;
}
.mc .ck-fill.p {
  background: #af52de;
}
.mc .ck-barrow .pct {
  text-align: right;
  color: var(--t3);
  font-variant-numeric: tabular-nums;
}
.mc .ck-grid2 {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0.8rem;
}
.mc .ck-mini {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 0.7rem;
}
.mc .ck-mini div {
  background: var(--act-bg);
  border-radius: 12px;
  padding: 0.9rem;
  text-align: center;
}
.mc .ck-mini b {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
}
.mc .ck-mini span {
  font-size: 0.76rem;
  color: var(--t3);
}
.mc .ck-rgrid {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}
.mc .ck-rchip {
  font-size: 0.8rem;
  background: var(--act-bg);
  border-radius: 999px;
  padding: 0.35rem 0.8rem;
}
.mc .ck-rchip b {
  font-weight: 600;
}
.mc .ck-trend {
  display: flex;
  align-items: flex-end;
  gap: 3px;
  height: 80px;
  margin-top: 0.3rem;
}
.mc .ck-trend .t {
  flex: 1;
  background: #cfe6ff;
  border-radius: 3px 3px 0 0;
  min-height: 2px;
}
.mc .ck-trend .t:hover {
  background: #0071e3;
}
.mc .ck-pill {
  display: inline-block;
  font-size: 0.68rem;
  font-weight: 600;
  padding: 0.1rem 0.5rem;
  border-radius: 999px;
  background: var(--act-bg);
  color: var(--t3);
}
.mc .ck-pill.on {
  background: #edf7f0;
  color: #1f7a43;
}
.mc .ck-pill.off {
  background: #fbedeb;
  color: #b0392a;
}
.mc .ck-pill.m {
  background: #eaf3fe;
  color: #0b63c4;
}
.mc .ck-tag {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 600;
  padding: 0.12rem 0.45rem;
  border-radius: 6px;
  margin: 0 3px 3px 0;
}
.mc .ck-tag.necessary {
  background: #eef0f4;
  color: #3a4a5e;
}
.mc .ck-tag.performance {
  background: #eaf3fe;
  color: #0b63c4;
}
.mc .ck-tag.functional {
  background: #fbf4e4;
  color: #96690e;
}
.mc .ck-tag.targeting {
  background: #f3edfb;
  color: #6b3fa0;
}
.mc .ck-f {
  display: block;
  font-size: 0.78rem;
  color: var(--t3);
  font-weight: 600;
  margin: 0.7rem 0 0;
}
.mc .ck-f .in,
.mc .ck-f textarea.in,
.mc .ck-f select.in {
  display: block;
  width: 100%;
  margin-top: 0.3rem;
  font-weight: 400;
  font-size: 0.9rem;
  color: var(--text);
}
.mc .ck-f textarea.in {
  min-height: 64px;
  line-height: 1.5;
  resize: vertical;
}
.mc .ck-catset {
  border: 1px solid var(--hair);
  border-radius: 12px;
  padding: 0.8rem 1rem;
  margin-bottom: 0.7rem;
}
.mc .ck-catset .ch {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.6rem;
}
.mc .ck-catset .ch b {
  font-size: 0.9rem;
}
.mc .ck-geogrid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 0.7rem;
}
.mc .ck-geogrid .g {
  background: var(--act-bg);
  border-radius: 10px;
  padding: 0.7rem 0.8rem;
}
.mc .ck-geogrid .g label {
  font-size: 0.76rem;
  color: var(--t3);
  display: block;
  margin-bottom: 0.35rem;
}
.mc .ck-geogrid .g .in {
  width: 100%;
}
.mc .ck-savebar {
  position: sticky;
  bottom: 0;
  display: flex;
  align-items: center;
  gap: 0.8rem;
  padding: 0.8rem 1rem;
  margin-top: 0.5rem;
  background: color-mix(in srgb, var(--layer) 92%, transparent);
  backdrop-filter: blur(12px);
  border: 1px solid var(--hair);
  border-radius: 14px;
}
.mc .ck-savebar .btn {
  margin-left: auto;
}
.mc .btn.danger {
  color: #d62d20;
}
.mc .toolbar .spacer {
  flex: 1;
}
@media (max-width: 900px) {
  .mc .ck-kpis {
    grid-template-columns: repeat(2, 1fr);
  }
  .mc .ck-grid2 {
    grid-template-columns: 1fr;
  }
  .mc .ck-barrow {
    grid-template-columns: 110px 1fr 48px;
  }
}
[data-sup-mode="dark"] .mc .ck-trend .t {
  background: #1e3a5f;
}

/* the snippet in a SELECTED row reads too (contrastproof 2026-09-26: --t3 over the selection tint was 3.7–4.1:1 in every mode) */
html body #list .trow.icloud.on .snippet,
html body #list .trow.icloud.sel-on .snippet,
html[data-sup-mode="dark"] body #list .trow.icloud.on .snippet,
html[data-sup-mode="dark"] body #list .trow.icloud.sel-on .snippet {
  color: var(--t2) !important;
}

/* a11y (2026-09-26): initials on a coloured avatar are white, and Sign out on the deep-blue account rail is a light coral, not #ff3b30 (2.6:1) */
.smenu .me .av,
.sideme .me .av,
.rhead .me .av {
  color: #fff !important;
}
html .conv.account .mnav .mout,
html .conv.account .mnav .mout:hover {
  color: #ff8a80 !important; /* on the dark rail */
}
html[data-sup-mode="light"] .conv.account .mnav .mout,
html[data-sup-mode="light"] .conv.account .mnav .mout:hover {
  color: #c62828 !important; /* on the white rail: 5.5:1 */
}

/* ── the archive's pins (archive.supersecure.com, gb-viewer-marker; Shane, 2026-09-29: "make the map exactly like archive") — a 20 px disc,
   the two letters at 7 px, a 1.5 px ring and an 8 px glow in the viewer's colour; the handle under it only on hover or when picked; the live
   halo is the WebGL ring, not a CSS pulse ── */
.gm .gm-mk {
  gap: 0;
}
.gm .gm-mk b {
  width: 20px;
  height: 20px;
  font:
    800 7px/1 "SF Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.04em;
  color: #fff;
  border: 1.5px solid var(--c);
  background: rgba(10, 14, 31, 0.85);
  box-shadow: 0 0 8px 1px var(--c);
  transition: transform 0.18s ease;
}
.gm .gm-mk:hover b {
  transform: scale(1.3);
}
.gm .gm-mk.sel b {
  transform: none;
  box-shadow:
    0 0 14px 4px var(--c),
    0 0 28px 10px var(--c);
}
.gm .gm-mk span {
  position: absolute;
  left: 50%;
  top: calc(50% + 16px);
  transform: translateX(-50%) translateY(-4px);
  font:
    700 8px/1.6 "SF Mono",
    ui-monospace,
    Menlo,
    monospace;
  letter-spacing: 0.08em;
  text-transform: none;
  color: #fff;
  padding: 2px 7px;
  background: rgba(10, 14, 31, 0.88);
  border: 1px solid var(--c);
  border-radius: 999px;
  white-space: nowrap;
  pointer-events: none;
  opacity: 0;
  text-shadow: none;
  transition:
    opacity 0.18s ease,
    transform 0.18s ease;
}
.gm .gm-mk:hover span,
.gm .gm-mk.sel span {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.gm .gm-mk i,
.gm .gm-mk.live i {
  display: none;
}
.gm .gm-mk.live b {
  border-color: var(--c);
  box-shadow: 0 0 8px 1px var(--c);
}

/* ── the archive's denied-zone label (gb-denied-label): ⊘ COUNTRY, pulsing, and the red vignette while zones are up ── */
.gm .gm-zone.deny b {
  font:
    800 12px/1 ui-monospace,
    "SF Mono",
    Menlo,
    monospace;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  color: #fecaca;
  background: rgba(127, 29, 29, 0.92);
  border: 2px solid rgba(239, 68, 68, 0.75);
  border-radius: 6px;
  padding: 6px 14px 6px 24px;
  position: relative;
  box-shadow:
    0 0 20px rgba(220, 38, 38, 0.5),
    0 0 60px rgba(220, 38, 38, 0.2),
    inset 0 1px 0 rgba(255, 255, 255, 0.08);
  animation: gb-denied-pulse 2s ease-in-out infinite;
}
.gm .gm-zone.deny b::before {
  content: "⊘";
  position: absolute;
  left: 7px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 11px;
  color: #ef4444;
}
@keyframes gb-denied-pulse {
  0%,
  100% {
    transform: scale(1);
    opacity: 0.95;
  }
  50% {
    transform: scale(1.15);
    opacity: 1;
  }
}
.gm.fenced::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 2;
  pointer-events: none;
  background: radial-gradient(
    ellipse at center,
    transparent 40%,
    rgba(220, 38, 38, 0.08) 70%,
    rgba(153, 27, 29, 0.22) 100%
  );
  animation: gb-geofence-pulse 2.4s ease-in-out infinite;
}
@keyframes gb-geofence-pulse {
  0%,
  100% {
    opacity: 0.5;
  }
  50% {
    opacity: 1;
  }
}

/* ── the wide frame (2026-09-29): the container fills the browser, its side gutters the same 28px as the top and bottom ── */
body.wide #shell.on {
  max-width: none !important;
  margin: 28px !important;
  width: calc(100vw - 56px) !important;
  height: calc(
    100dvh - 56px
  ) !important; /* the same 28px above and below as at the sides (Shane, 2026-09-29: "the top and bottom shift") */
}
.hright .widebtn {
  width: 32px;
  height: 32px;
  border-radius: 999px;
  border: 0;
  background: transparent;
  color: var(--t2, #6b7280);
  display: inline-grid;
  place-items: center;
  cursor: pointer;
  padding: 0;
}
.hright .widebtn:hover {
  background: rgba(127, 127, 140, 0.14);
  color: var(--t1, #111);
}
.hright .widebtn svg {
  width: 17px;
  height: 17px;
}
.fwrap.home ~ * .hright .widebtn,
body:has(.fwrap.home) .hright .widebtn {
  color: #cfd3dc;
}
body:has(.fwrap.home) .hright .widebtn:hover {
  background: rgba(255, 255, 255, 0.12);
  color: #fff;
}
@media (max-width: 900px) {
  .hright .widebtn {
    display: none;
  }
}