/* --- Page Top Loader --- */
.wr-top-loader {
  position: fixed;
  top: 0; left: 0; height: 3px;
  background: linear-gradient(90deg, #0aa367 0%, #38c5e0 50%, #0093b0 100%);
  background-size: 200% 100%;
  z-index: 2147483647;
  width: 0%;
  pointer-events: none;
  opacity: 0;
  box-shadow: 0 0 10px rgba(56, 197, 224, 0.5), 0 0 5px rgba(10, 163, 103, 0.3);
  transition: width 0.3s cubic-bezier(0.4, 0, 0.2, 1), opacity 0.3s ease;
}
.wr-top-loader.loading {
  opacity: 1;
  width: 85%;
  transition: width 8s cubic-bezier(0.05, 0.7, 0.1, 1), opacity 0.25s ease;
  animation: wr-loader-shift 1.5s linear infinite;
}
.wr-top-loader.loading-finish {
  opacity: 1;
  width: 100%;
  transition: width 0.3s cubic-bezier(0.1, 0.8, 0.3, 1), opacity 0.3s ease 0.15s;
}

@keyframes wr-loader-shift {
  0% { background-position: 0% 50%; }
  100% { background-position: 200% 50%; }
}

@import url('https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:opsz,wght@12..96,600;12..96,700;12..96,800&family=Instrument+Sans:wght@400;500;600;700&family=Outfit:wght@300;400;500;600;700;800;900&display=swap');
/*
 * One visual language for the Rooms pages.
 *
 * There were four. /room was warm paper and serif, /capture was warm paper and
 * sans, /tasks was green and Segoe UI, /app is a different green again. Nobody
 * chose that; it accumulated. Four palettes on one domain reads as four
 * products, and the person using them is the same person doing one job.
 *
 * The warm-paper family wins because two of the three Rooms pages already used
 * it and because it was chosen for reading — these pages are mostly transcript
 * and statements of what was agreed, which is prose, not a dashboard.
 *
 * Instrument Sans is calm, internationally legible and has excellent fallbacks
 * across Latin-script markets. Bricolage is reserved for hierarchy and key
 * moments so the workspace feels considered without becoming decorative.
 *
 * /app and /meet are deliberately NOT restyled. They are a different surface
 * with their own history, and quietly redesigning them the week of a launch is
 * how you break something nobody thought to test.
 */

:root {
  /* The default state a page renders in before either the toggle or an
     explicit .dark/.light class has run — so this must carry every token the
     overrides below carry. It used to carry only some of them: --focus,
     --warn, --info, --input-bg/-border, --table-stripe, --code-bg and
     --avatar-bg were defined ONLY inside the dark and light override blocks,
     which made them silently absent (not "unset", literally invalid — no
     fallback) on any page that never gained a .dark/.light class. That
     doesn't happen today (rooms-nav.js always sets one), but a page whose nav
     script fails to parse — which has happened before, see §9 — is exactly a
     page that never gains the class, so this must not depend on the class
     existing to be a complete palette. */

  /* Paper and ink */
  --paper:      #fbfaf6;
  --card:       #ffffff;
  --ink:        #1c1a17;
  --ink-2:      #1c1a17;   /* the nav's own label color — never had a real
                              value; every rule that read it was silently
                              inheriting --ink instead, which only looked
                              intentional in light mode */
  --muted:      #6b6560;
  --faint:      #78716a;   /* 4.6:1 — used for small meta text, so it has to
                              clear AA rather than large-text-only */
  --rule:       #e3ded7;
  --rule-firm:  #464035;

  /* Meaning. Each says one thing, and nothing else uses it. */
  --accent:     #6fb98a;   /* links, the current page, primary action */
  --accent-dim: #1e2a23;
  --good:       #7fc79a;   /* done, confirmed, enrolled */
  --pending:    #dda94f;   /* awaiting a human */
  --late:       #e08585;   /* overdue, refused, destructive */
  --warn:       #b34236;
  --warn-dim:   #fdf2f1;
  --info:       #2c6f9e;
  --info-dim:   #eaf3f8;
  --focus:      #2f7557;

  --radius:     10px;
  --shadow:     0 1px 2px rgba(28, 26, 23, .05);
  --shadow-float: 0 14px 34px rgba(28, 26, 23, .10);
  --ease-out: cubic-bezier(.2,.8,.2,1);
  --ambient: radial-gradient(circle at 12% -8%, rgba(76, 139, 105, .09), transparent 27rem);

  --input-bg:     #ffffff;
  --input-border: #cfc7bc;
  --table-stripe: #faf9f6;
  --code-bg:      #f5f3ef;
  --avatar-bg:    #e3ded7;

  --font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui:      var(--font-body);
  --reading: var(--font-heading);

  /* Lets native form controls, scrollbars and the like pick a light or dark
     rendering on their own before any class is set — matched to whichever
     side actually wins below, not left to the browser's own guess. */
  color-scheme: light dark;
}

/* The viewer's theme is respected, but the palette is inverted rather than
   re-invented: same hues, same meanings, different ground. */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    --paper: #17150f; --card: #1f1d17; --ink: #f0ece4; --ink-2: #f0ece4; --muted: #a9a196;
    --faint: #948c81; --rule: #322e26; --rule-firm: #464035;
    /* The accent stays GREEN in the dark. It was flipped to peach, which put
       orange buttons against a green hero and read as two products on one
       page. A theme should change the ground, not the brand. */
    --accent: #6fb98a; --accent-dim: #1e2a23;
    --good: #7fc79a; --pending: #dda94f; --late: #e08585;
    --ambient: radial-gradient(circle at 12% -8%, rgba(111, 185, 138, .10), transparent 27rem);
    color-scheme: dark;
  }
}

* { box-sizing: border-box; }

/* A page's own `body { overflow-x: hidden }` looks like it stops horizontal
   scroll, but the UA only propagates body's overflow to the viewport when
   body's overflow is 'visible' — set it explicitly (most pages do, for their
   own decorative off-viewport elements) and propagation is suppressed, so
   html's own default 'visible' governs the viewport instead and every one of
   those pages scrolls horizontally anyway. Setting it here, once, on html,
   is what actually clips it. */
html { scroll-behavior: smooth; overflow-x: hidden; }
body {
  margin: 0;
  padding-top: 64px;
  background: var(--ambient), var(--paper);
  color: var(--ink);
  font: 16px/1.55 var(--ui);
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
}
::selection { background: color-mix(in srgb, var(--accent) 24%, transparent); color: var(--ink); }

/* Switching theme recolours the whole page at once — everything reading
   these tokens should settle into the new palette together rather than
   snapping, but only the surfaces a viewer actually looks at. Scoped to
   named selectors instead of `*` so the cost stays fixed regardless of page
   size, and skipped entirely under reduced motion. */
@media (prefers-reduced-motion: no-preference) {
  body, .card, .room, .tool, .rooms-nav, .toolbar, dialog,
  input, select, textarea, button, .btn, .tab, .pill {
    transition: background-color .22s var(--ease-out), color .22s var(--ease-out),
                border-color .22s var(--ease-out), box-shadow .22s var(--ease-out);
  }
}

/* ---------------------------------------------------------------------------
   Scrollbar. One look everywhere this stylesheet reaches — not /meet or /app,
   which are deliberately a different surface with their own history. Firefox
   reads the two `scrollbar-*` properties; everything Chromium-based reads the
   pseudo-elements. Both are declared so nobody sees the browser default on
   either engine. */
* {
  scrollbar-width: thin;
  scrollbar-color: color-mix(in srgb, var(--accent) 55%, transparent) transparent;
}
*::-webkit-scrollbar { width: 10px; height: 10px; }
*::-webkit-scrollbar-track { background: transparent; }
*::-webkit-scrollbar-thumb {
  background-color: color-mix(in srgb, var(--accent) 45%, transparent);
  border-radius: 999px;
  border: 2px solid transparent;
  background-clip: padding-box;
  transition: background-color .2s;
}
*::-webkit-scrollbar-thumb:hover {
  background-color: color-mix(in srgb, var(--accent) 78%, transparent);
  background-clip: padding-box;
}
*::-webkit-scrollbar-corner { background: transparent; }

/* ---------------------------------------------------------------------------
   Page loader. These are real navigations, not a client-side router — there
   is no "route change" event to hook, only the two moments that actually
   exist: a click that is about to unload this document, and this document
   finishing arrival. rooms-nav.js drives it because it is already the one
   file present on every page in this list; adding a second shared script
   invites the exact drift its own docstring warns about. */
#wr-page-loader {
  position: fixed; top: 0; left: 0; width: 0%; height: 3px;
  z-index: 99999; pointer-events: none;
  background: linear-gradient(90deg, var(--accent), #4f9d76 60%, var(--accent));
  box-shadow: 0 0 10px color-mix(in srgb, var(--accent) 70%, transparent);
  opacity: 1;
  transition: width .2s ease, opacity .35s ease;
}
#wr-page-loader.wr-loader-done { opacity: 0; }
@media (prefers-reduced-motion: reduce) {
  #wr-page-loader { display: none; }
}

/* ---------------------------------------------------------------------------
   The bar.

   Every signed-in page gets the same one, in the same place, with the current
   page marked. Before this, /tasks had no way back to anything and /capture
   linked nowhere at all — you reached them by typing URLs, which is not a
   navigation model.

   enrol and share deliberately do NOT get this. They are for people with no
   account, reached by a single-purpose link, and a nav bar full of places they
   cannot go is worse than no nav bar.
   ------------------------------------------------------------------------ */
.rooms-nav {
  position: fixed; top: 0; left: 0; right: 0; z-index: 1000;
  background: #ffffff;
  border-bottom: 1px solid rgba(0, 0, 0, 0.08);
  box-shadow: 0 2px 12px rgba(29, 25, 18, 0.03);
  padding: 0;
  height: 64px;
  display: flex;
  align-items: center;
  font-family: var(--ui);
  transition: background 0.3s;
}
.rooms-nav .nav-container {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  max-width: 1380px;
  margin: 0 auto;
  padding: 0 2rem;
  height: 100%;
  box-sizing: border-box;
}
.rooms-nav .brand {
  display: flex; align-items: center; gap: .45rem;
  font-family: var(--ui); font-size: 1.05rem; font-weight: 700; letter-spacing: -.02em;
  color: var(--ink); text-decoration: none; margin-right: 2rem;
  white-space: nowrap;
  flex-shrink: 0;
}
/* The mark: a room (the rounded square) with a voice's arch carved into one
   corner and two accent shards standing in for distinct speakers — same
   "shape plus colourful shards" idea as other meeting-app marks, in our own
   green/cyan/violet/amber instead of borrowing theirs. Temporary until a real
   logo exists, but SVG so it stays crisp at any nav or favicon size. */
.rooms-nav .brand::before {
  content: "";
  display: inline-block; width: 26px; height: 26px;
  background-image: url("data:image/svg+xml,<svg%20xmlns='http://www.w3.org/2000/svg'%20viewBox='0%200%2048%2048'><defs><linearGradient%20id='g'%20x1='0'%20y1='0'%20x2='1'%20y2='1'><stop%20offset='0'%20stop-color='%230aa367'/><stop%20offset='1'%20stop-color='%230093b0'/></linearGradient></defs><rect%20x='3'%20y='3'%20width='30'%20height='30'%20rx='11'%20fill='url(%23g)'/><circle%20cx='34'%20cy='16'%20r='8'%20fill='%237c5cf0'/><circle%20cx='33'%20cy='34'%20r='7'%20fill='%23ea8f34'/><path%20d='M9%2022a9%209%200%200%201%2018%200'%20fill='none'%20stroke='%23fff'%20stroke-width='3.6'%20stroke-linecap='round'/></svg>");
  background-size: contain; background-repeat: no-repeat;
  vertical-align: middle; flex-shrink: 0;
}
.rooms-nav .brand span { font-weight: 500; color: var(--ink-2); margin-left: 2px; }

.rooms-nav .nav-left {
  display: flex;
  align-items: center;
  gap: 1.5rem;
}
.rooms-nav .nav-actions {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}
.rooms-nav .nav-links {
  display: flex;
  align-items: center;
  gap: 0.25rem;
  height: 100%;
}
.rooms-nav a.tab, .rooms-nav .nav-tab-btn {
  background: none; border: none;
  position: relative; padding: 0.5rem 1rem; border-radius: 999px; text-decoration: none;
  color: var(--ink-2); font-size: 0.88rem; font-weight: 600; white-space: nowrap;
  transition: all .2s;
  cursor: pointer;
  font-family: inherit;
  display: flex;
  align-items: center;
  gap: 4px;
  height: 38px;
  flex-shrink: 0;
}
.rooms-nav a.tab:hover, .rooms-nav .nav-tab-btn:hover {
  background: rgba(29,25,18,.05); color: var(--ink);
}
.rooms-nav a.tab[aria-current="page"] {
  background: rgba(29,25,18,.04); color: var(--ink); font-weight: 700;
}
.rooms-nav .chevron {
  width: 14px; height: 14px; stroke: currentColor; stroke-width: 2.2; fill: none;
  transition: transform 0.2s;
}

/* User Menu Dropdown */
.rooms-nav .user-menu-wrapper {
  position: relative;
  margin-left: 0.5rem;
}
.rooms-nav .user-menu-trigger {
  height: 38px; padding: 0 4px 0 0; border-radius: 999px;
  display: flex; align-items: center; justify-content: flex-start;
  background: transparent; color: var(--ink); border: none;
  gap: 8px; cursor: pointer; transition: background 0.2s;
}
.rooms-nav .user-menu-trigger:hover {
  background: rgba(29,25,18,.05);
}
.rooms-nav .user-initial {
  width: 30px; height: 30px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  background: var(--accent); color: #fff;
  font-weight: 700; font-size: 13px; line-height: 1; margin-left: 4px;
}
.rooms-nav .who-visible {
  font-size: 0.88rem; font-weight: 600; color: var(--ink-2);
  padding-right: 8px;
}
.rooms-nav .user-dropdown {
  position: absolute; right: 0; top: calc(100% + 8px);
  background: #fff; border: 1px solid rgba(29, 25, 18, 0.08);
  border-radius: 12px; box-shadow: 0 12px 32px rgba(29, 25, 18, 0.08);
  min-width: 200px; padding: 0.5rem;
  opacity: 0; pointer-events: none; transform: translateY(8px);
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1100;
}
.rooms-nav .user-dropdown.show {
  opacity: 1; pointer-events: auto; transform: translateY(0);
}
.rooms-nav .user-dropdown-header {
  padding: 0.75rem 1rem; border-bottom: 1px solid rgba(29, 25, 18, 0.08);
  margin-bottom: 0.5rem;
}
.rooms-nav .user-dropdown-header .who {
  font-size: 0.85rem; font-weight: 600; color: var(--ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block;
}
.rooms-nav .dropdown-item {
  display: block; width: 100%; text-align: left;
  padding: 0.5rem 1rem; font-size: 0.9rem; font-weight: 500;
  color: var(--ink-2); text-decoration: none; border-radius: 6px;
  background: transparent; border: none; cursor: pointer;
  font-family: inherit;
}
.rooms-nav .dropdown-item:hover {
  background: var(--paper); color: var(--ink);
}
.rooms-nav .dropdown-item.signout {
  color: #dc2626; margin-top: 0.25rem;
}
.rooms-nav .dropdown-item.signout:hover {
  background: #fef2f2;
}

@media (max-width: 1100px) {
  .rooms-nav .who-visible { display: none; }
  .rooms-nav .user-menu-trigger { padding: 0; background: transparent; }
  .rooms-nav .user-menu-trigger:hover { background: transparent; }
  .rooms-nav .user-initial { margin-left: 0; width: 34px; height: 34px; font-size: 14px; }
}

/* Mega dropdown menu structures */
.rooms-nav .nav-item {
  position: relative;
  display: flex;
  align-items: center;
  height: 100%;
}
.rooms-nav .mega-menu {
  position: absolute;
  top: 100%;
  left: 50%;
  transform: translateX(-50%) translateY(10px);
  background: #ffffff;
  border: 1px solid rgba(29, 25, 18, 0.08);
  border-radius: 12px;
  box-shadow: 0 16px 48px rgba(29, 25, 18, 0.08);
  padding: 1.5rem;
  opacity: 0;
  pointer-events: none;
  transition: all 0.2s cubic-bezier(0.4, 0, 0.2, 1);
  z-index: 1100;
  margin-top: 4px;
}
.rooms-nav .nav-item:hover .mega-menu {
  opacity: 1;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.rooms-nav .nav-item:hover .chevron {
  transform: rotate(180deg);
}

.rooms-nav .mega-menu-inner {
  display: grid;
  gap: 1.5rem;
}
.rooms-nav .grid-solutions {
  width: 820px;
  grid-template-columns: 1.1fr 1.3fr 1.3fr 180px;
}
.rooms-nav .grid-products {
  width: 860px;
  grid-template-columns: 1fr 180px;
}
.rooms-nav .grid-industries {
  width: 640px;
  grid-template-columns: 1.3fr 1.1fr 150px;
}

.rooms-nav .products-subgrid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 0.5rem;
}

.rooms-nav .mega-col {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}
.rooms-nav .col-title {
  font-size: 0.72rem;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--rule-firm);
  letter-spacing: 0.05em;
  margin-bottom: 0.25rem;
  padding-left: 0.5rem;
}

.rooms-nav .menu-item {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  text-decoration: none;
  padding: 0.5rem 0.6rem;
  border-radius: 8px;
  transition: background 0.15s;
}
.rooms-nav .menu-item:hover {
  background: var(--paper);
}
.rooms-nav .prod-item {
  padding: 0.4rem 0.5rem;
}
.rooms-nav .item-icon {
  font-size: 1.1rem;
  margin-top: 1px;
}
.rooms-nav .item-name {
  display: block;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
}
.rooms-nav .item-desc {
  display: block;
  font-size: 0.72rem;
  color: var(--muted);
  line-height: 1.3;
}
.rooms-nav .badge-tag {
  background: rgba(29, 25, 18, 0.06);
  font-size: 0.62rem;
  padding: 1px 4px;
  border-radius: 4px;
  color: var(--ink);
  margin-left: 4px;
  font-weight: 500;
  display: inline-block;
  vertical-align: middle;
}

.rooms-nav .sidebar-col {
  background: #faf9f6;
  margin: -1.5rem -1.5rem -1.5rem 0;
  padding: 1.5rem;
  border-top-right-radius: 12px;
  border-bottom-right-radius: 12px;
  border-left: 1px solid rgba(29, 25, 18, 0.06);
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}
.rooms-nav .sidebar-link {
  text-decoration: none;
  font-size: 0.84rem;
  font-weight: 600;
  color: var(--ink);
  padding: 0.25rem 0.5rem;
  border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.rooms-nav .sidebar-link:hover {
  background: rgba(29, 25, 18, 0.04);
  color: var(--accent);
}

.rooms-nav .spacer { flex: 1; min-width: 1rem; }
.rooms-nav .nav-right {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-shrink: 0;
}
.rooms-nav .who {
  font-size: .84rem; color: var(--muted); max-width: 14rem;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; text-decoration: none; margin-right: 1rem;
}
.rooms-nav button.signout, .rooms-nav a.signout {
  font: inherit; font-size: .82rem; font-weight: 600; padding: .45rem 1.1rem; margin-left: .5rem;
  border: 1px solid rgba(29,25,18,.12); border-radius: 999px;
  background: transparent; color: var(--ink-2); cursor: pointer;
  text-decoration: none; transition: all .2s;
}
.rooms-nav button.signout:hover, .rooms-nav a.signout:hover { 
  color: var(--ink); border-color: rgba(29,25,18,.3); background: rgba(29,25,18,.03); 
}
.rooms-nav .desktop-only {
  display: flex;
}
.rooms-nav .mobile-menu-toggle {
  display: none;
}

@media (max-width: 64rem) {
  .rooms-nav .desktop-only {
    display: none !important;
  }
  .rooms-nav .mobile-menu-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 40px;
    height: 40px;
    border-radius: 50%;
    border: 1.5px solid rgba(29, 25, 18, 0.08);
    background: transparent;
    color: var(--ink);
    cursor: pointer;
    transition: all 0.2s;
    flex-shrink: 0;
  }
  .rooms-nav .mobile-menu-toggle:hover {
    background: rgba(29, 25, 18, 0.04);
  }
  .rooms-nav .mobile-menu-toggle svg {
    width: 20px;
    height: 20px;
  }
  .rooms-nav {
    padding: 0;
  }
  .rooms-nav .nav-container {
    padding: 0 1.5rem;
  }
}

@media (max-width: 48rem) {
  .rooms-nav { padding: 0; }
  .rooms-nav .nav-container { padding: 0 1rem; }
  .rooms-nav .brand { font-size: .95rem; }
}

/* Mobile Drawer Styles */
.mobile-drawer {
  position: fixed; inset: 0; z-index: 2000; overflow: hidden;
  pointer-events: none; visibility: hidden;
  transition: visibility 0.3s;
}
.mobile-drawer.active {
  pointer-events: auto; visibility: visible;
}
.drawer-backdrop {
  position: absolute; inset: 0;
  background: rgba(29, 25, 18, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  opacity: 0; transition: opacity 0.3s ease;
}
.mobile-drawer.active .drawer-backdrop {
  opacity: 1;
}
.drawer-pane {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: 85%; max-width: 360px;
  background: rgba(255, 255, 255, 0.75);
  backdrop-filter: blur(32px); -webkit-backdrop-filter: blur(32px);
  border-top-left-radius: 24px; border-bottom-left-radius: 24px;
  border-left: 1px solid rgba(255, 255, 255, 0.5);
  box-shadow: -12px 0 48px rgba(0, 0, 0, 0.08);
  transform: translateX(100%);
  transition: transform 0.4s cubic-bezier(0.34, 1.56, 0.64, 1);
  display: flex; flex-direction: column;
}
.mobile-drawer.active .drawer-pane {
  transform: translateX(0);
}
.drawer-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 1.25rem 1.5rem;
  border-bottom: 1px solid rgba(29, 25, 18, 0.06);
}
.drawer-close {
  background: none; border: none; width: 36px; height: 36px;
  display: grid; place-items: center; border-radius: 50%;
  color: var(--ink); cursor: pointer;
  border: 1.5px solid rgba(29, 25, 18, 0.08);
  transition: all 0.2s;
}
.drawer-close:hover {
  background: rgba(29, 25, 18, 0.04);
}
.drawer-close svg { width: 16px; height: 16px; }
.drawer-body {
  flex: 1; overflow-y: auto; padding: 1.5rem;
  display: flex; flex-direction: column; gap: 0.85rem;
}

/* Accordion in Mobile Menu */
.drawer-accordion {
  border-bottom: 1px solid rgba(29, 25, 18, 0.06);
  padding-bottom: 0.5rem;
}
.drawer-accordion-btn {
  width: 100%; display: flex; justify-content: space-between; align-items: center;
  background: none; border: none; font-family: inherit;
  font-size: 1rem; font-weight: 800; color: var(--ink);
  text-align: left; padding: 0.75rem 0; cursor: pointer;
  transition: color 0.2s;
}
.drawer-accordion-btn:hover { color: var(--accent); }

.drawer-accordion-btn svg.chevron {
  width: 16px; height: 16px; stroke: currentColor; stroke-width: 2.5; fill: none;
  transition: transform 0.2s;
}
.drawer-accordion.open .drawer-accordion-btn svg.chevron {
  transform: rotate(180deg);
}
.drawer-accordion-content {
  max-height: 0; overflow: hidden;
  transition: max-height 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  display: flex; flex-direction: column; gap: 0.25rem;
}
.drawer-accordion.open .drawer-accordion-content {
  max-height: 480px;
  padding-bottom: 0.5rem;
}
.drawer-cat-title {
  font-size: 0.65rem; font-weight: 700; text-transform: uppercase;
  color: var(--muted); letter-spacing: 0.05em; margin: 0.4rem 0 0.2rem;
  padding-left: 0.5rem;
}
.drawer-link {
  font-size: 0.85rem; font-weight: 600; color: var(--ink-2);
  text-decoration: none; padding: 0.4rem 0.75rem; border-radius: 6px;
  transition: background 0.15s, color 0.15s;
}
.drawer-link:hover {
  background: color-mix(in srgb, var(--accent) 12%, transparent);
  color: var(--accent);
  transform: translateX(4px);
}
.drawer-link {
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}
.drawer-item-link {
  font-size: 0.95rem; font-weight: 700; color: var(--ink);
  text-decoration: none; padding: 0.6rem 0;
  border-bottom: 1px solid rgba(29, 25, 18, 0.06);
  display: block;
}
.drawer-item-link:hover {
  color: var(--accent);
}
.drawer-signout-btn {
  font-family: inherit; font-size: 0.9rem; font-weight: 700;
  padding: 0.75rem 1.2rem; border-radius: 8px; border: 1.5px solid rgba(29, 25, 18, 0.08);
  background: transparent; color: var(--ink); cursor: pointer;
  transition: all 0.2s; margin-top: 1rem; width: 100%; text-align: center;
}
.drawer-signout-btn:hover {
  background: rgba(29, 25, 18, 0.04);
}
.drawer-btn-danger {
  color: var(--late);
  border-color: rgba(224, 133, 133, 0.3);
}
.drawer-btn-danger:hover {
  background: rgba(224, 133, 133, 0.08);
}
body.drawer-open {
  overflow: hidden;
}

/* --- shared furniture, so the pages stop each inventing their own --------- */
.wrap { max-width: 62rem; margin: 0 auto; padding: 1.4rem 1.1rem 5rem; animation: page-arrive .44s var(--ease-out) both; }
.wrap.narrow { max-width: 46rem; }

h1 { font-family: var(--reading); font-size: 1.85rem; margin: .2rem 0 .1rem; font-weight: 600; }
h2 {
  font-size: .78rem; letter-spacing: .12em; text-transform: uppercase;
  color: var(--muted); margin: 2rem 0 .6rem; font-weight: 700;
}
a { color: var(--accent); }

.card {
  background: var(--card); border: 1px solid var(--rule);
  border-left: 3px solid var(--rule); border-radius: var(--radius);
  padding: .8rem .9rem; margin-bottom: .6rem; box-shadow: var(--shadow);
  transition: border-color .18s var(--ease-out), box-shadow .18s var(--ease-out);
}
.card:hover { border-color: color-mix(in srgb, var(--accent) 45%, var(--rule)); box-shadow:0 5px 18px rgba(28,26,23,.07); }
.statement { font-family: var(--reading); font-size: 1.04rem; margin: 0 0 .3rem; }
.meta  { color: var(--muted); font-size: .82rem; }
.empty { color: var(--faint); font-style: italic; }

button, .btn {
  font: inherit; text-decoration: none; display: inline-flex; align-items: center;
  gap: .35rem; line-height: 1.2; font-size: .87rem; padding: .42rem .8rem; border-radius: 7px;
  border: 1px solid var(--rule-firm); background: var(--card); color: var(--ink);
  cursor: pointer; transition: transform .16s var(--ease-out), border-color .16s var(--ease-out), background .16s var(--ease-out), box-shadow .16s var(--ease-out);
}
/* No transform on hover.
   A hovered element that MOVES takes its hit area with it: the cursor near an
   edge is uncovered, hover ends, it drops back, hover re-fires. With a .16s
   transition that is not a jitter, it is an oscillation, and a tester reported
   it as the pointer flickering on Start now and Schedule.
   The raised look comes from the shadow, which does not move anything. */
button:hover:not(:disabled), .btn:hover { border-color: var(--ink); box-shadow:0 6px 16px rgba(28,26,23,.11); }
button:active:not(:disabled), .btn:active { transform:translateY(0) scale(.98); }
button.primary {
  background: var(--accent); border-color: var(--accent); color: #fff; font-weight: 650;
}
button.primary:hover:not(:disabled) { filter: brightness(1.08); }
button:disabled { opacity: .5; cursor: default; }

:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }


/* ---------------------------------------------------------------------------
   The hero treatment.

   Lifted out of home.html so every signed-in surface can wear it instead of
   one page being designed and the rest being plain. That mismatch is most of
   what "the project feels scattered" actually looks like.
   ------------------------------------------------------------------------ */
.hero {
    position: relative; isolation: isolate; overflow: hidden;
    display: grid; grid-template-columns: minmax(0, .9fr) minmax(20rem, 1.1fr);
    gap: 2rem; align-items: center; min-height: 28rem;
    padding: 3.3rem; border-radius: 24px; color: #fff;
    background: #18342b; perspective: 1100px; transform-style:preserve-3d;
  }
.hero::after { content: ""; position: absolute; inset: 0; z-index: -1;
    background: linear-gradient(90deg, #18342b 5%, rgba(24,52,43,.93) 40%, rgba(24,52,43,.16) 100%); background-size:112% 100%; animation:hero-wash 14s var(--ease-out) infinite alternate; }
.hero-photo { position: absolute; inset: 0 0 0 35%; z-index: -2; display:block; width: 65%; height: 100%; transform:translateZ(-32px) scale(1.055); }
.hero-photo img { display:block; width:100%; height:100%; object-fit:cover; }
.eyebrow { display: flex; align-items: center; gap: .45rem; margin: 0 0 .8rem;
    color: #d5e8d8; font-size: .78rem; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; }
.eyebrow i { width: .5rem; height: .5rem; background: #e6b15f; border-radius: 50%; box-shadow: 0 0 0 4px rgba(230,177,95,.15); }
.hero h1 { max-width: 9ch; margin: 0; font: 700 clamp(2.65rem, 5vw, 4.6rem)/.98 var(--ui); letter-spacing: -.055em; }
.hero p.copy { max-width: 32rem; margin: 1.25rem 0 1.7rem; color: #e1ebe3; font-size: 1.05rem; }
.hero-actions { display: flex; gap: .7rem; flex-wrap: wrap; }
.hero .primary-link { background: #e9b25d; color: #1b322a; border-color: #e9b25d; font-weight: 750; }
.hero .quiet-link { color: #fff; border-color: rgba(255,255,255,.45); background: rgba(255,255,255,.08); }
.proof { display: flex; align-items: center; gap: .75rem; margin-top: 2.3rem; color: #dce8df; font-size: .81rem; }
.avatars { display: flex; padding-left: .35rem; }
.avatar { width: 2rem; height: 2rem; object-fit: cover; border: 2px solid #18342b; border-radius: 50%; margin-left: -.35rem; background: #d7b378; box-shadow:0 7px 15px rgba(4,17,11,.28); animation:avatar-drift 5s var(--ease-out) infinite alternate; }
.avatar:nth-child(1) { object-position: 74% 27%; }
.avatar:nth-child(2) { object-position: 62% 28%; }
.avatar:nth-child(3) { object-position: 85% 30%; }
.avatar:nth-child(2) { animation-delay:-1.7s; }
.avatar:nth-child(3) { animation-delay:-3.3s; }
.hero-side { min-height: 16rem; }
.intro { display: flex; justify-content: space-between; gap: 2rem; align-items: end; margin: 3.5rem 0 1.35rem; }
.intro h2 { margin: 0; color: var(--ink); font: 650 clamp(1.65rem, 3vw, 2.2rem)/1.08 var(--ui); letter-spacing: -.04em; text-transform: none; }
.intro p { max-width: 29rem; margin: 0; color: var(--muted); font-size: .95rem; }
@media (max-width: 48rem) {
  .hero { grid-template-columns: 1fr; padding: 2.25rem; min-height: 30rem; }
  .hero-photo { inset: auto 0 0; width: 100%; height: 48%; opacity: .45; }
  .hero::after { background: linear-gradient(180deg, #18342b 32%, rgba(24,52,43,.78) 100%); }
  .hero-side { display:none; }
  .intro { display:block; margin-top: 2.5rem; }
  .intro p { margin-top:.65rem; }
}
/* Three faces from the meeting photograph. They remain ordinary HTML images
   so a browser that cannot decode a JPEG never has to render a CSS image. */
  .avatars .avatar {
    display: inline-block; width: 34px; height: 34px; object-fit: cover; border-radius: 50%;
    border: 2px solid var(--card); margin-right: -10px; vertical-align: middle;
  }
.avatars .a1 { object-position: 74% 27%; }
.avatars .a2 { object-position: 62% 28%; }
.avatars .a3 { object-position: 85% 30%; }

/* A shorter hero for working pages: the landing sells, My Rooms is somewhere
   you arrive to do something, so it gets the same treatment at less height. */
.hero.compact { min-height: 15rem; padding: 2rem 2.2rem; grid-template-columns: minmax(0,1fr) minmax(14rem,.8fr); }
.hero.compact h1 { font-size: 1.9rem; margin: 0 0 .3rem; color: #fff; }
.hero.compact .copy { margin: 0; }

/* Profile and Settings are places in the product, not leftover forms. The
   large icon makes the page legible before the fields begin, especially on a
   phone where a form otherwise looks like a browser prompt. */
.account-hero {
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 1.2rem; align-items: center;
  margin: .25rem 0 1.35rem; padding: 1.5rem 1.6rem; border-radius: 18px;
  color: #fff; background: linear-gradient(120deg, #18342b, #2f7557);
}
.account-hero.settings { background: linear-gradient(120deg, #25342e, #53725f); }
.account-icon { display:grid; place-items:center; width:5.25rem; height:5.25rem; border-radius:18px;
                color:#19362b; background:#e9b25d; box-shadow:0 12px 28px rgba(0,0,0,.2); }
.account-icon svg { width:2.7rem; height:2.7rem; stroke:currentColor; fill:none; stroke-width:1.65; stroke-linecap:round; stroke-linejoin:round; }
.account-hero .eyebrow { margin:0 0 .35rem; }
.account-hero h1 { margin:0; color:#fff; font:700 clamp(2rem,5vw,3rem)/1 var(--font-heading); letter-spacing:-.025em; }
.account-hero p:last-child { margin:.5rem 0 0; max-width:38rem; color:#dfece3; }

/* Human imagery belongs at transitions—arriving, choosing a Room, and
   reconnecting after a meeting—not inside a transcript someone is trying to
   review. These are ordinary <img> elements, so they remain visible even when
   a browser declines to use a CSS image format. */
.photo-story {
  display:grid; grid-template-columns:minmax(15rem,.92fr) minmax(0,1.08fr);
  overflow:hidden; margin:3.4rem 0 .8rem; border:1px solid var(--rule);
  border-radius:20px; background:var(--card); box-shadow:0 16px 36px rgba(28,26,23,.08);
}
.photo-story img { display:block; width:100%; height:100%; min-height:20rem; object-fit:cover; }
.photo-story-copy { display:flex; flex-direction:column; justify-content:center; padding:2.35rem; }
.photo-story-copy h2 { margin:.35rem 0 .8rem; color:var(--ink); font-size:clamp(1.7rem,3vw,2.45rem); line-height:1.03; text-transform:none; letter-spacing:-.045em; }
.photo-story-copy p { max-width:31rem; margin:0; color:var(--muted); }
.photo-points { display:grid; gap:.6rem; margin:1.35rem 0 0; padding:0; list-style:none; }
.photo-points li { display:flex; gap:.55rem; align-items:flex-start; color:var(--ink); font-size:.9rem; }
.photo-points li::before { content:""; flex:none; width:.45rem; height:.45rem; margin-top:.42rem; border-radius:50%; background:#e2ab58; box-shadow:0 0 0 4px #f8edd9; }
.room-cover { position:relative; height:5.6rem; margin:-1.05rem -1.1rem .35rem; overflow:hidden; border-radius:13px 13px 0 0; background:#284536; }
.room-cover img { width:100%; height:100%; object-fit:cover; opacity:.68; filter:saturate(.8) contrast(.96); transition:transform .55s var(--ease-out),filter .55s var(--ease-out); }
.room-cover::after { content:""; position:absolute; inset:0; background:linear-gradient(90deg,rgba(21,45,35,.6),transparent); }
.room-mark { position:absolute; z-index:1; left:.9rem; bottom:.72rem; display:grid; place-items:center; width:2.25rem; height:2.25rem; border:2px solid rgba(255,255,255,.82); border-radius:50%; background:rgba(21,45,35,.75); color:#fff; font-weight:750; letter-spacing:-.03em; box-shadow:0 9px 15px rgba(0,0,0,.25),inset 0 1px rgba(255,255,255,.34); transform:translateZ(18px); }
.room:hover .room-cover img { transform:scale(1.07); filter:saturate(1) contrast(1); }
.account-scene { display:none; }

@media (min-width:44rem) {
  .account-hero { position:relative; overflow:hidden; grid-template-columns:auto minmax(0,1fr) 10rem; }
  .account-scene { display:block; align-self:stretch; width:10rem; margin:-1.5rem -1.6rem -1.5rem 0; object-fit:cover; opacity:.55; mix-blend-mode:luminosity; }
}

@media (max-width: 34rem) {
  .wrap { padding: 1rem .8rem 3.5rem; }
  .hero { min-height: 27rem; padding: 1.45rem; border-radius: 17px; }
  .hero h1 { font-size: clamp(2.35rem, 12vw, 3.25rem); }
  .hero p.copy { font-size: .98rem; margin: 1rem 0 1.25rem; }
  .hero-actions { display: grid; grid-template-columns: 1fr; }
  .hero-actions > * { justify-content:center; width:100%; min-height:2.8rem; }
  .hero.compact { min-height: 13rem; padding: 1.4rem; }
  .account-hero { grid-template-columns:1fr; gap:.8rem; padding:1.3rem; border-radius:15px; }
  .account-icon { width:4.25rem; height:4.25rem; border-radius:14px; }
  .account-icon svg { width:2.25rem; height:2.25rem; }
  .photo-story { grid-template-columns:1fr; margin-top:2.4rem; border-radius:16px; }
  .photo-story img { min-height:13rem; max-height:17rem; order:-1; }
  .photo-story-copy { padding:1.45rem; }
  .room-cover { height:5rem; }
}

/* ---------------------------------------------------------------------------
   Ramps, adopted from the Unified Meeting Surface concept.

   Its real contribution is not its palette — it is having 100–900 scales at all.
   One --accent plus one --accent-dim kept pushing one-off hex values into
   individual pages, which is how a design system quietly stops being one. The
   hue stays green because that was a deliberate choice and it clears AA; only
   the structure is borrowed.
   ------------------------------------------------------------------------ */
:root {
  --n-100: #f7f6f3; --n-200: #eceae5; --n-300: #ddd9d1; --n-400: #c2bcb1;
  --n-500: #9c958a; --n-600: #78716a; --n-700: #574f48; --n-800: #38322c;
  --n-900: #1c1a17;

  --a-100: #eef5f0; --a-200: #d7e8dd; --a-300: #b3d4c1; --a-400: #7fb595;
  --a-500: #4f9670; --a-600: #2f7557; --a-700: #245b44; --a-800: #1b4433;
  --a-900: #122d22;

  /* The concept's type pairing: a condensed face for headings against a
     humanist body. It gives headings authority without shouting, which suits a
     board room better than a serif does. */
  --font-heading: "Bricolage Grotesque", ui-sans-serif, system-ui, sans-serif;
  --font-body: "Outfit", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif;
  --ui: var(--font-body);
}

/* Both families load with display=swap, so system font text appears immediately
   on a slower connection while the branded face settles in behind it. */

/* All headings use Outfit for a clean, modern look.
   Bricolage Grotesque is reserved ONLY for the special hero h1 (.wr-hero-h1)
   on home.html and rooms.html that says "Meetings that move work." */
h1, h2, h3, .bc-room, .rec-title, .counters b, .scale-nums dt, .tile b, .liveband b {
  font-family: var(--font-body);
  letter-spacing: -.01em;
}
h1 { font-weight: 700; }

/* These come last on purpose. The original :root below redefines --ui, and a
   later declaration wins — putting the adoption at the top made it inert. */
body { font-family: var(--ui); }
h1 { font-family: var(--font-body); font-weight: 700; letter-spacing: -.02em; }
.statement, .item-title { font-family: var(--ui); }

/* Links that are surfaces, not sentences: cards, tiles and doors carry their
   own affordance and an underline just makes them look broken. */
a.card, a.room, a.tile, a.door, a.tool, a.btn { text-decoration: none; color: inherit; }
a.btn { color: var(--ink); }

/* ---------------------------------------------------------------------------
   Status pills, people, and dialogs.

   All three existed on every page and nowhere in this file: each surface
   invented its own coloured <span> for "voice enrolled", its own row layout
   for a person, and its own dialog padding. The result was a People list that
   read as a paragraph of grey text, sitting next to Room cards that read as a
   product.

   One shape for a status, one row for a person, one modal — so somebody looks
   the same in a dialog, in roll call, and wherever they turn up next.
   --------------------------------------------------------------------------- */

/* A status is a shape, not a colour. The pill is identical everywhere and the
   colour only says which kind, so the label still carries the meaning for a
   reader who cannot separate green from amber. */
.pill { display:inline-flex; align-items:center; gap:.28rem; white-space:nowrap;
  padding:.16rem .5rem; border-radius:999px; font-size:.7rem; font-weight:700;
  background:var(--accent-dim); color:var(--accent); }
.pill.ok    { background:color-mix(in srgb, var(--good) 15%, transparent);    color:var(--good); }
.pill.warn  { background:color-mix(in srgb, var(--pending) 18%, transparent); color:var(--pending); }
.pill.bad   { background:color-mix(in srgb, var(--late) 14%, transparent);    color:var(--late); }
.pill.quiet { background:transparent; color:var(--muted); border:1px solid var(--rule); }

/* A person. The initial mark repeats the motif on the Room cards, so a roster
   reads as belonging to the Rooms it is a roster for. */
.person-list { display:flex; flex-direction:column; gap:.4rem; }
.person-row { display:flex; align-items:center; gap:.7rem; padding:.6rem .7rem;
  border:1px solid var(--rule); border-radius:11px; background:var(--card);
  transition:border-color .16s var(--ease-out), box-shadow .16s var(--ease-out); }
.person-row:hover { border-color:color-mix(in srgb, var(--accent) 40%, var(--rule));
  box-shadow:0 3px 12px rgba(28,26,23,.06); }
.person-mark { flex:none; display:grid; place-items:center; width:2rem; height:2rem;
  border-radius:50%; background:var(--accent-dim); color:var(--accent);
  font-weight:750; font-size:.8rem; letter-spacing:-.02em; }
.person-id { flex:1; min-width:7rem; display:flex; flex-direction:column; gap:.05rem; }
.person-id b { font-size:.92rem; font-weight:650; letter-spacing:-.01em; }
.person-id span { color:var(--muted); font-size:.76rem; }
.person-act { flex:none; display:flex; align-items:center; gap:.35rem; flex-wrap:wrap; }
.person-act button { font-size:.78rem; padding:.3rem .55rem; }
.person-row > input[type=checkbox] { flex:none; width:1.1rem; height:1.1rem; accent-color:var(--accent); }
.person-toggle { display:flex; align-items:center; gap:.35rem; margin:0;
  font-size:.78rem; color:var(--muted); white-space:nowrap; }
.person-toggle input { width:auto; accent-color:var(--accent); }
@media (max-width:34rem) {
  .person-row { flex-wrap:wrap; }
  .person-act { width:100%; padding-left:2.7rem; }
}

/* One modal treatment, so a page no longer has to invent the whole thing just
   to get a readable box. Pages may still override it. */
dialog { border:1px solid var(--rule-firm); border-radius:14px; padding:1.25rem;
  max-width:30rem; width:calc(100vw - 2rem); background:var(--card); color:var(--ink);
  box-shadow:var(--shadow-float); }
dialog::backdrop { background:rgba(28,26,23,.45); }
.dlg-head { margin:0 0 .15rem; font-family:var(--font-heading); font-size:1.2rem;
  font-weight:700; letter-spacing:-.02em; }
.dlg-sub { margin:0 0 .85rem; color:var(--muted); font-size:.83rem; }
/* Reserve the line whether or not there is an error, so submitting a form does
   not shunt the buttons down the moment something goes wrong. */
.dlg-err { color:var(--late); font-size:.85rem; min-height:1.2em; margin-top:.5rem; }
.optional { color:var(--faint); font-weight:400; }

/* Motion is a small layer of orientation: arriving on a page, moving between
   choices, and seeing a live meeting should feel responsive, never busy. */
@keyframes page-arrive { from { opacity:0; transform:translateY(8px); } to { opacity:1; transform:translateY(0); } }
@keyframes hero-wash { from { background-position:0% 50%; } to { background-position:100% 50%; } }
@keyframes live-pulse { 0%,100% { box-shadow:0 0 0 0 rgba(47,117,87,.42); } 55% { box-shadow:0 0 0 7px rgba(47,117,87,0); } }
@keyframes avatar-drift { from { transform:translate3d(0,0,0) rotate(-2deg); } to { transform:translate3d(0,-5px,18px) rotate(2deg); } }
@keyframes orbit-drift { 0%,100% { transform:translate3d(0,0,0) rotate(-3deg); } 50% { transform:translate3d(0,-10px,22px) rotate(3deg); } }
@keyframes orbit-spin { from { transform:rotate(0deg); } to { transform:rotate(360deg); } }
.live-dot { display:inline-block; width:.5rem; height:.5rem; margin-right:.35rem; border-radius:50%; background:var(--good); vertical-align:.05em; animation:live-pulse 1.8s ease-out infinite; }

/* A light-weight depth layer for the landing and working heroes. It uses
   ordinary images and CSS transforms, so it delivers on a phone without a
   WebGL dependency or a large animation download. */
.hero-orbit { position:relative; width:14.5rem; height:14.5rem; margin:auto; transform-style:preserve-3d; animation:orbit-drift 7s var(--ease-out) infinite; }
.hero-orbit::before { content:""; position:absolute; inset:1.15rem; border:1px solid rgba(255,255,255,.27); border-radius:50%; box-shadow:0 0 0 1.25rem rgba(255,255,255,.035),0 0 0 2.6rem rgba(255,255,255,.025); animation:orbit-spin 28s linear infinite; }
.orbit-core { position:absolute; inset:3.55rem; z-index:2; display:grid; place-items:center; border:1px solid rgba(255,255,255,.42); border-radius:50%; background:rgba(17,48,37,.78); color:#fff; box-shadow:0 22px 35px rgba(0,0,0,.28),inset 0 1px rgba(255,255,255,.22); font:700 .76rem/1.2 var(--ui); text-align:center; backdrop-filter:blur(8px); }
.orbit-avatar { position:absolute; z-index:3; width:3.3rem; height:3.3rem; overflow:hidden; border:2px solid rgba(255,255,255,.88); border-radius:50%; background:#d7b378; box-shadow:0 13px 22px rgba(0,0,0,.31); animation:avatar-drift 4.6s var(--ease-out) infinite alternate; }
.orbit-avatar img { display:block; width:100%; height:100%; object-fit:cover; }
.orbit-avatar.one { top:.2rem; left:5.6rem; }
.orbit-avatar.two { right:.2rem; bottom:3.3rem; animation-delay:-1.8s; }
.orbit-avatar.three { bottom:1.05rem; left:1rem; animation-delay:-3s; }

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after { animation-duration:.01ms !important; animation-iteration-count:1 !important; transition-duration:.01ms !important; }
}

/* Organisations (migration 66).
   A Room belongs to a company or to the person who made it. The tag says which
   on every card, because "which of these is the company's?" is otherwise
   unanswerable without opening each one. */
.org-bar { margin: 1.25rem 0 .5rem; }
.org-bar-head { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem; flex-wrap: wrap; }
.org-bar-head h2 { margin: 0 0 .15rem; font-size: 1.05rem; }
.org-list { display: flex; flex-wrap: wrap; gap: .5rem; margin-top: .6rem; }
.org-chip {
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px;
  padding: .45rem .7rem; background: var(--card, #fff); min-width: 11rem;
}
.org-chip strong { display: block; font-size: .92rem; }
.org-chip .meta { font-size: .78rem; }

.org-tag {
  display: inline-block; margin-top: .2rem; font-size: .72rem; letter-spacing: .04em;
  text-transform: uppercase; padding: .1rem .45rem; border-radius: 999px;
  background: var(--accent-soft, #eef2ff); color: var(--accent-ink, #3730a3);
}
/* Personal is deliberately quieter than a company name: it is the default
   state, and a loud badge on every unassigned Room would read as a warning. */
.org-tag.personal { background: transparent; color: var(--muted, #6b7280);
  border: 1px solid var(--line, #dcdcdc); }

.org-move { padding: 0 1rem 1rem; }
.org-move label { font-size: .78rem; color: var(--muted, #6b7280); display: block; }
.org-move select { margin-top: .2rem; width: 100%; padding: .35rem .5rem;
  border: 1px solid var(--line, #dcdcdc); border-radius: 8px; background: var(--card, #fff); }

/* Cards, not links in prose.
   Every flow reaches its destination from a card. /admin sat behind a bare URL
   for weeks and the first hand-typed attempt at it 404'd on a trailing dot —
   a link buried in a paragraph is not navigation. */
.nav-card {
  display: flex; align-items: center; gap: .8rem; text-decoration: none;
  border: 1px solid var(--line, #dcdcdc); border-radius: 12px;
  padding: .85rem 1rem; margin: 1rem 0; background: var(--card, #fff);
  color: inherit; transition: border-color .15s, transform .15s;
}
.nav-card:hover { border-color: var(--accent, #4f46e5); box-shadow: 0 6px 16px rgba(28,26,23,.11); }
.nav-card-mark {
  flex: 0 0 auto; width: 2rem; height: 2rem; border-radius: 8px;
  display: grid; place-items: center; font-size: 1rem;
  background: var(--accent-soft, #eef2ff); color: var(--accent-ink, #3730a3);
}
.nav-card-body { flex: 1 1 auto; display: block; }
.nav-card-body strong { display: block; font-size: .95rem; }
.nav-card-body .meta { font-size: .8rem; }
.nav-card-go { flex: 0 0 auto; color: var(--muted, #6b7280); }

/* An organisation chip is a button that opens the organisation. */
.org-chip {
  display: flex; align-items: center; gap: .6rem; text-align: left;
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px;
  padding: .5rem .7rem; background: var(--card, #fff); color: inherit;
  cursor: pointer; min-width: 12rem; font: inherit;
  transition: border-color .15s, transform .15s;
}
.org-chip:hover { border-color: var(--accent, #4f46e5); box-shadow: 0 6px 16px rgba(28,26,23,.11); }
.org-chip strong { display: block; font-size: .92rem; }
.org-chip .meta { display: block; font-size: .78rem; }
.org-chip-go { margin-left: auto; color: var(--muted, #6b7280); }

.org-people { display: grid; gap: .4rem; margin: .5rem 0 .8rem; }
.org-person {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px; padding: .5rem .7rem;
}
.org-person strong { display: block; font-size: .9rem; }
.org-person .meta { font-size: .78rem; }
.org-role {
  font-size: .72rem; text-transform: uppercase; letter-spacing: .04em;
  padding: .1rem .45rem; border-radius: 999px;
  background: var(--line, #eee); color: var(--muted, #6b7280);
}
.org-role.owner { background: var(--accent-soft, #eef2ff); color: var(--accent-ink, #3730a3); }

/* A refused move is said on the card, beside the control that was refused,
   rather than in a browser alert detached from the thing it is about. */
.org-move label[data-error]::after {
  content: attr(data-error); display: block; margin-top: .25rem;
  color: var(--danger, #b91c1c); font-size: .75rem;
}

/* Room privileges (migration 67). */
.priv-list { display: grid; gap: .4rem; margin: .6rem 0 .5rem; }
.priv-row {
  display: flex; align-items: center; justify-content: space-between; gap: .8rem;
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px; padding: .5rem .7rem;
}
.priv-who strong { display: block; font-size: .9rem; }
.priv-who .meta { font-size: .78rem; }
.priv-role { padding: .3rem .5rem; border: 1px solid var(--line, #dcdcdc);
  border-radius: 8px; background: var(--card, #fff); font: inherit; }

/* Separate consent for sending the sample to the hosted recogniser. Off by
   default, and visually a statement rather than a checkbox to skim past. */
.hosted-consent {
  display: flex; gap: .6rem; align-items: flex-start; text-align: left;
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px;
  padding: .7rem .8rem; margin: 0 0 .8rem; font-size: .82rem;
  line-height: 1.45; background: var(--card, #fff);
}
.hosted-consent input { margin-top: .2rem; flex: 0 0 auto; }
.hosted-consent strong { display: block; margin-bottom: .15rem; font-size: .87rem; }

/* Archive and delete, on the Room card. Archive first because it is the one
   that is almost always meant; delete is marked as the one that is not. */
.room-manage { display: flex; gap: .4rem; padding: 0 1rem .6rem; }
.room-manage .small { font-size: .78rem; padding: .25rem .55rem; }
.ghost.danger, button.danger { color: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); }
button.primary.danger { background: var(--danger, #b91c1c); border-color: var(--danger, #b91c1c); color: #fff; }

/* Set up a meeting — the two questions that differ between meetings.
   Radios as full-width cards with an explanation, because "video meeting"
   versus "in this room" is a real decision and a bare label does not say what
   changes. */
.choice { border: 0; padding: 0; margin: 0 0 1rem; }
.choice legend {
  padding: 0; margin: 0 0 .45rem; font-size: .74rem; font-weight: 700;
  letter-spacing: .08em; text-transform: uppercase; color: var(--muted, #6b7280);
}
.choice label {
  display: flex; align-items: flex-start; gap: .6rem; margin: 0 0 .4rem;
  border: 1px solid var(--line, #dcdcdc); border-radius: 10px;
  padding: .6rem .75rem; cursor: pointer; background: var(--card, #fff);
  transition: border-color .15s;
}
.choice label:hover { border-color: var(--accent, #4f46e5); }
.choice input { width: auto; margin-top: .2rem; flex: 0 0 auto; }
.choice label:has(input:checked) {
  border-color: var(--accent, #4f46e5);
  background: var(--accent-soft, #eef2ff);
}
.choice span { display: block; font-size: .84rem; color: var(--muted, #6b7280); line-height: 1.45; }
.choice strong { display: block; font-size: .92rem; color: var(--ink, #111); font-weight: 650; }

/* Drafting an agenda from prose or a photograph.
   Proposals arrive ticked but every one is a checkbox, because the model will
   misread handwriting and the person reading the list is the one who knows
   what they wrote. */
.draft-items { display: grid; gap: .35rem; margin: .5rem 0 .8rem; max-height: 15rem; overflow-y: auto; }
.draft-item {
  display: flex; align-items: flex-start; gap: .55rem; margin: 0;
  border: 1px solid var(--line, #dcdcdc); border-radius: 8px;
  padding: .5rem .65rem; cursor: pointer; font-size: .9rem;
}
.draft-item input { width: auto; margin-top: .15rem; flex: 0 0 auto; }
.draft-item:has(input:checked) { border-color: var(--accent, #4f46e5); background: var(--accent-soft, #eef2ff); }
.draft-item strong { font-weight: 600; }
#draftPreview { max-width: 100%; max-height: 12rem; border-radius: 8px; margin-top: .5rem;
  border: 1px solid var(--line, #dcdcdc); }

/* ---- The docked video room -------------------------------------------------
   Three states over ONE iframe. Everything here is position and size; nothing
   removes the frame from the document, because that would reload /meet and drop
   the call. The whole point of a minimise button is that the meeting continues.
*/
#videoDock {
  position: fixed; z-index: 60;
  display: flex; flex-direction: column;
  background: var(--card, #fff);
  border: 1px solid var(--rule-firm, #d9d9d9);
  border-radius: 12px;
  box-shadow: 0 18px 44px -18px rgba(20,22,26,.45);
  overflow: hidden;
  transition: inset .22s cubic-bezier(.2,.7,.3,1), width .22s cubic-bezier(.2,.7,.3,1),
              height .22s cubic-bezier(.2,.7,.3,1);
}
@media (prefers-reduced-motion: reduce) { #videoDock { transition: none; } }

.dock-bar {
  display: flex; align-items: center; gap: .5rem;
  padding: .4rem .5rem .4rem .7rem;
  border-bottom: 1px solid var(--rule, #e6e6e6);
  background: var(--paper, #f7f7f5);
  flex: 0 0 auto;
}
.dock-title { font-size: .82rem; font-weight: 650; }
.dock-count { font-size: .74rem; }
.dock-spacer { flex: 1 1 auto; }
.dock-bar button {
  padding: .18rem .42rem; font-size: .8rem; line-height: 1;
  border-radius: 6px; min-width: 1.7rem;
}
.dock-frame { flex: 1 1 auto; min-height: 0; background: #101314; }
.dock-frame iframe { width: 100%; height: 100%; border: 0; display: block; }

/* Corner. The default after joining: visible, out of the way, and the notes
   underneath stay usable. */
.dock-pip  { right: 1rem; bottom: 1rem; width: min(24rem, calc(100vw - 2rem)); height: 15.5rem; }

/* Minimised. The bar only — the frame is collapsed, not removed, so the call
   is still running and the audio still plays. */
.dock-min  { right: 1rem; bottom: 1rem; width: min(17rem, calc(100vw - 2rem)); height: 2.3rem; cursor: pointer; }
.dock-min .dock-frame { height: 0; }

/* Main view. Takes the top of the window; the page scrolls beneath it, which is
   what somebody switching to "main" is asking for — the faces first, the notes
   still reachable. */
.dock-main { left: 1rem; right: 1rem; top: 1rem; width: auto; height: min(62vh, 34rem); }
body.has-main-video { padding-top: min(64vh, 36rem); }

/* Matched at ID strength on purpose. `.dock-hidden` alone is (0,1,0) and loses
   to `#videoDock`'s (1,0,0) display:flex, so the dock painted an empty "Video
   room" card on every meeting page — measured at 251x36 before any JS ran.
   The [hidden] attribute does not save it either: an author display wins over
   the UA sheet. */
#videoDock.dock-hidden, #videoDock[hidden] { display: none; }

@media (max-width: 40rem) {
  .dock-pip  { left: .6rem; right: .6rem; width: auto; height: 12rem; bottom: .6rem; }
  .dock-main { left: .5rem; right: .5rem; top: .5rem; height: 48vh; }
  body.has-main-video { padding-top: 50vh; }
}

/* Ask Whisper source cards.
   An answer without a source is not this feature — the citation is the point,
   so it gets a card rather than a bare quote. */
.cite-card {
  border: 1px solid var(--line, #dcdcdc); border-left: 3px solid var(--accent, #4f46e5);
  border-radius: 8px; padding: .6rem .75rem; margin: .5rem 0; background: var(--card, #fff);
}
.cite-head { display: flex; align-items: baseline; gap: .6rem; flex-wrap: wrap; }
.cite-head strong { font-size: .9rem; }
.cite-card blockquote { margin: .35rem 0; font-size: .9rem; line-height: 1.5; }
.cite-card blockquote b { font-weight: 650; }
.cite-card a { text-decoration: none; font-size: .8rem; }
.cite-card a:hover { text-decoration: underline; }

/* ── GLOBAL TOAST SYSTEM ── */
#wr-toast-container {
  position: fixed; bottom: 2rem; right: 2rem; z-index: 99999;
  display: flex; flex-direction: column; gap: 0.75rem; pointer-events: none;
}
.wr-toast {
  display: flex; align-items: center; gap: 0.75rem;
  background: rgba(255, 255, 255, 0.95);
  backdrop-filter: blur(12px); -webkit-backdrop-filter: blur(12px);
  border-radius: 12px; padding: 1rem 1.25rem;
  box-shadow: 0 12px 32px rgba(28, 26, 23, 0.15), 0 0 0 1px rgba(28, 26, 23, 0.05);
  transform: translateX(120%) scale(0.9); opacity: 0;
  transition: all 0.3s cubic-bezier(0.16, 1, 0.3, 1);
  min-width: 250px; max-width: 400px;
}
.wr-toast.show { transform: translateX(0) scale(1); opacity: 1; }
.wr-toast-message { font-size: 0.95rem; font-weight: 500; color: var(--ink); line-height: 1.4; flex: 1; }
.wr-toast-icon { 
  display: grid; place-items: center; width: 1.5rem; height: 1.5rem; border-radius: 50%;
  font-size: 0.85rem; font-weight: 800; color: #fff; flex-shrink: 0;
}
.wr-toast-success .wr-toast-icon { background: var(--accent); }
.wr-toast-error .wr-toast-icon { background: var(--late); }
.wr-toast-success { border-left: 4px solid var(--accent); }
.wr-toast-error { border-left: 4px solid var(--late); }

/* Agenda Builder Rows - CSS Grid Layout */
.agenda-builder-row {
  display: grid;
  grid-template-columns: minmax(80px, 1fr) 4.5rem 5.5rem auto 2.4rem;
  gap: 0.5rem;
  align-items: center;
  margin-bottom: 0.6rem;
  width: 100%;
}
.agenda-builder-row .abr-main, 
.agenda-builder-row .abr-side { 
  display: contents; /* Grid items are the actual inputs/buttons */
}
.agenda-builder-row input { margin: 0 !important; box-sizing: border-box !important; width: 100% !important; }
.abr-decide { display: flex; gap: 0.3rem; align-items: center; font-size: 0.85rem; cursor: pointer; white-space: nowrap; margin: 0; justify-content: center; }
.abr-decide input { width: auto !important; height: auto !important; flex: none !important; margin: 0 !important; }
.abr-side .x {
  background: #ffeeee !important; color: #e53e3e !important; border: none !important;
  border-radius: 8px !important; width: 2.4rem !important; height: 2.4rem !important;
  font-size: 1.25rem !important; display: grid !important; place-items: center; cursor: pointer; transition: all 0.2s; padding: 0 !important; margin: 0 !important;
  justify-self: end;
}
.abr-side .x:hover { background: #ffdddd !important; transform: scale(1.05); }

/* New Room form only has 3 items: Title, Min, X */
#newAgendaRows .agenda-builder-row {
  grid-template-columns: minmax(80px, 1fr) 4.5rem 2.4rem;
}

@media (max-width: 550px) {
  .agenda-builder-row { grid-template-columns: 1fr 4.5rem !important; }
  .agenda-builder-row .o { grid-column: 1 / -1; }
  .abr-decide { grid-column: 1; justify-self: start; }
  .abr-side .x { grid-column: 2; justify-self: end; }
  #newAgendaRows .agenda-builder-row { grid-template-columns: 1fr 4.5rem 2.4rem !important; }
}

/* Person Row Dialog Fix */
#peopleDlg .person-row { background: var(--card) !important; color: var(--ink) !important; border: 1px solid var(--rule) !important; }
#peopleDlg .person-id b { color: var(--ink) !important; }


/* =====================================================================
   Carried forward from the implementation this design replaced.
   ---------------------------------------------------------------------
   The ft-ui-update branch forked before these existed, so adopting its
   stylesheet wholesale would have taken them out: the speaker chips in
   the transcript, the Room rail, the command palette, the toasts, the
   skip link and the accessibility rules.

   None of them collide with the new theme — checked selector by
   selector and token by token before merging, and the intersection was
   empty in both directions. They are appended rather than interleaved
   so it stays obvious which half is which.
   ===================================================================== */

/* The transcript names its own speakers.
   A speaker chip is a button because it does something; it must not look like
   one, because four hundred buttons in a column of prose is a wall of chrome.
   Named and unnamed read differently at a glance — the whole job is spotting
   which turns still need a person. */
.line button.sp {
  font: inherit; font-weight: 600; color: var(--muted);
  background: none; border: 0; border-bottom: 1px dashed var(--rule);
  padding: 0 0 1px; margin: 0; cursor: pointer; border-radius: 0;
}

.line button.sp:hover, .line button.sp:focus-visible {
  color: var(--ink); border-bottom-color: currentColor;
}

.line button.sp.named { color: var(--ink); border-bottom-color: transparent; }

.line select.sp-pick { font: inherit; padding: 1px 4px; max-width: 14rem; }

/* A Room, with a rail that indexes it.
   The rail does not replace the scroll — a Room is one continuous record and
   reading it top to bottom is the point. It exists for the visit where you came
   for one thing and should not have to pass four others to see whether it needs
   you. Below the tablet breakpoint it becomes a scrollable strip above the
   content rather than a column stealing half a phone's width. */
.room-layout { display: grid; grid-template-columns: 12.5rem minmax(0, 1fr); gap: 2rem; align-items: start; }

.room-rail { position: sticky; top: 1.25rem; display: flex; flex-direction: column; gap: 1px; }

.room-rail a {
  display: flex; justify-content: space-between; align-items: baseline; gap: .5rem;
  padding: .38rem .55rem; border-radius: 6px; text-decoration: none;
  font-size: .86rem; color: var(--muted); border-left: 2px solid transparent;
}

.room-rail a:hover { background: var(--band, rgba(0,0,0,.03)); color: var(--ink); }

/* The area you are actually looking at. Weight and a rule, not colour alone. */
.room-rail a.here { color: var(--ink); font-weight: 600; border-left-color: currentColor; }

.rail-count { font-size: .76rem; color: var(--faint, var(--muted)); font-variant-numeric: tabular-nums; }

.room-main { min-width: 0; }

@media (max-width: 860px) {
  .room-layout { grid-template-columns: minmax(0, 1fr); gap: .75rem; }
  .room-rail {
    position: static; flex-direction: row; overflow-x: auto; gap: .35rem;
    padding-bottom: .35rem; -webkit-overflow-scrolling: touch;
  }
  .room-rail a { white-space: nowrap; border-left: 0; border-bottom: 2px solid transparent; }
  .room-rail a.here { border-left: 0; border-bottom-color: currentColor; }
}

/* A one-time link, handed over rather than left lying about.
   Showing the URL is the point — it has to be copied and sent — but a bare
   anchor of a raw address is the "loose URL" the rest of the product avoids,
   and a silent clipboard write is a thing nobody can see happen or repeat. */
.link-card {
  display: flex; flex-wrap: wrap; align-items: center; gap: .5rem;
  border: 1px solid var(--rule); border-radius: 10px;
  padding: .6rem .7rem; background: var(--card); margin-top: .5rem;
}

.link-value {
  flex: 1 1 14rem; min-width: 0; overflow-x: auto; white-space: nowrap;
  font-size: .82rem; color: var(--muted);
}

.link-copy { flex: 0 0 auto; font: inherit; padding: .3rem .7rem; border-radius: 7px;
             border: 1px solid var(--rule); background: var(--card); cursor: pointer; }

.link-copy:hover { border-color: var(--accent); color: var(--accent); }

.link-card .meta { flex: 1 1 100%; margin: 0; font-size: .8rem; }

/* Dark mode support */
@media (prefers-color-scheme: dark) {
  :root:not(.light):not([data-theme="light"]) {
    /* Paper and ink */
    --paper:      #1c1a17;
    --card:       #25231f;
    --ink:        #fbfaf6;
    --muted:      #a8a29a;
    --faint:      #8b857d;
    --rule:       #3d3933;
    --rule-firm:  #4a453e;

    /* Meaning. Each says one thing, and nothing else uses it. */
    --accent:     #6fc98f;
    --accent-dim: #1e3a2a;
    --good:       #7ad09a;
    --pending:    #e8a84c;
    --warn:       #e85d5d;
    --warn-dim:   #3a1e1e;
    --info:       #7ab8f0;
    --info-dim:   #1a2a3a;

    /* Focus ring — 3.1:1 on dark card, meets AA for UI components */
    --focus:      #6fc98f;

    /* Shadows */
    --shadow:     0 2px 8px rgba(0,0,0,.4);
    --shadow-float: 0 8px 24px rgba(0,0,0,.5);

    /* Inputs */
    --input-bg:   #1c1a17;
    --input-border: #4a453e;

    /* Table */
    --table-stripe: #2d2a25;

    /* Code */
    --code-bg:    #1c1a17;

    /* Avatar fallback */
    --avatar-bg:  #3d3933;
  }
}

/* Manual dark/light toggle class support. This is what a real page actually
   renders under almost all traffic — rooms-nav.js sets one of these two
   classes unconditionally on load, so treat this pair, not the media-query
   blocks above, as the source of truth for what dark/light look like. */
:root.dark, :root[data-theme="dark"] {
  --paper:      #1c1a17;
  --card:       #25231f;
  --ink:        #fbfaf6;
  --ink-2:      #fbfaf6;
  --muted:      #a8a29a;
  --faint:      #8b857d;
  --rule:       #3d3933;
  --rule-firm:  #4a453e;
  --accent:     #6fc98f;
  --accent-dim: #1e3a2a;
  --good:       #7ad09a;
  --pending:    #e8a84c;
  --late:       #e8837a;
  --warn:       #e85d5d;
  --warn-dim:   #3a1e1e;
  --info:       #7ab8f0;
  --info-dim:   #1a2a3a;
  --focus:      #6fc98f;
  --shadow:     0 2px 8px rgba(0,0,0,.4);
  --shadow-float: 0 8px 24px rgba(0,0,0,.5);
  --ambient: radial-gradient(circle at 12% -8%, rgba(111, 185, 138, .10), transparent 27rem);
  --input-bg:   #1c1a17;
  --input-border: #4a453e;
  --table-stripe: #2d2a25;
  --code-bg:    #1c1a17;
  --avatar-bg:  #3d3933;
  color-scheme: dark;
}

:root.light, :root[data-theme="light"] {
  --paper:      #fbfaf6;
  --card:       #ffffff;
  --ink:        #1c1a17;
  --ink-2:      #1c1a17;
  --muted:      #6b6560;
  --faint:      #78716a;
  --rule:       #e3ded7;
  --rule-firm:  #cfc7bc;
  --accent:     #2f7557;
  --accent-dim: #eaf3ec;
  --good:       #2f6b46;
  --pending:    #8a5410;
  --late:       #b34236;
  --warn:       #b34236;
  --warn-dim:   #fdf2f1;
  --info:       #2c6f9e;
  --info-dim:   #eaf3f8;
  --focus:      #2f7557;
  --shadow:     0 2px 8px rgba(28,26,23,.06);
  --shadow-float: 0 8px 24px rgba(28,26,23,.09);
  --ambient: radial-gradient(circle at 12% -8%, rgba(76, 139, 105, .09), transparent 27rem);
  --input-bg:   #ffffff;
  --input-border: #cfc7bc;
  --table-stripe: #faf9f6;
  --code-bg:    #f5f3ef;
  --avatar-bg:  #e3ded7;
  color-scheme: light;
}

/* The header nav and its mobile drawer (.rooms-nav, .mobile-drawer, and
   everything under them, defined further up this file) were built before the
   toggle existed and hardcode a white bar, white menus and dark-on-white
   hover tints throughout — none of it reads --card/--paper/etc, so none of
   it moved when a page switched to dark. Left alone, the bar stayed a bright
   white strip with near-invisible text sitting on top of an otherwise dark
   page. Appended here rather than interleaved above, same as the rest of
   this file's carried-forward sections. */
:root.dark .rooms-nav {
  background: var(--card);
  border-bottom-color: rgba(255, 255, 255, .08);
  box-shadow: 0 2px 12px rgba(0, 0, 0, .35);
}
:root.dark .rooms-nav .brand,
:root.dark .rooms-nav .brand span,
:root.dark .rooms-nav a.tab,
:root.dark .rooms-nav .nav-tab-btn,
:root.dark .rooms-nav .user-menu-trigger,
:root.dark .rooms-nav .who-visible,
:root.dark .rooms-nav .user-dropdown-header .who,
:root.dark .rooms-nav .dropdown-item:not(.signout),
:root.dark .rooms-nav .col-title,
:root.dark .rooms-nav .item-name,
:root.dark .rooms-nav .item-desc,
:root.dark .rooms-nav .sidebar-title,
:root.dark .rooms-nav .sidebar-desc {
  color: #fbfaf6 !important;
}
:root.dark .rooms-nav a.tab:hover,
:root.dark .rooms-nav .nav-tab-btn:hover,
:root.dark .rooms-nav .user-menu-trigger:hover {
  background: rgba(255, 255, 255, .06);
}
:root.dark .rooms-nav a.tab[aria-current="page"] {
  background: rgba(255, 255, 255, .08);
}
:root.dark .rooms-nav .user-dropdown,
:root.dark .rooms-nav .mega-menu {
  background: var(--card);
  border-color: rgba(255, 255, 255, .1);
  box-shadow: 0 16px 48px rgba(0, 0, 0, .5);
}
:root.dark .rooms-nav .user-dropdown-header {
  border-bottom-color: rgba(255, 255, 255, .08);
}
:root.dark .rooms-nav .dropdown-item.signout { color: #f28b82; }
:root.dark .rooms-nav .dropdown-item.signout:hover { background: rgba(220, 38, 38, .18); }
:root.dark .rooms-nav .badge-tag { background: rgba(255, 255, 255, .1); }
:root.dark .rooms-nav .sidebar-col {
  background: #1c1a17;
  border-left-color: rgba(255, 255, 255, .06);
}
:root.dark .rooms-nav .sidebar-link:hover { background: rgba(255, 255, 255, .05); }
:root.dark .rooms-nav button.signout,
:root.dark .rooms-nav a.signout {
  border-color: rgba(255, 255, 255, .14);
}
:root.dark .rooms-nav button.signout:hover,
:root.dark .rooms-nav a.signout:hover {
  border-color: rgba(255, 255, 255, .3);
  background: rgba(255, 255, 255, .05);
}
:root.dark .rooms-nav .mobile-menu-toggle { border-color: rgba(255, 255, 255, .12); }
:root.dark .rooms-nav .mobile-menu-toggle:hover { background: rgba(255, 255, 255, .06); }

:root.dark .drawer-pane {
  background: rgba(37, 35, 31, .88);
  border-left-color: rgba(255, 255, 255, .08);
  box-shadow: -12px 0 48px rgba(0, 0, 0, .5);
}
:root.dark .drawer-header,
:root.dark .drawer-accordion,
:root.dark .drawer-item-link {
  border-bottom-color: rgba(255, 255, 255, .08);
}
:root.dark .drawer-close,
:root.dark .drawer-signout-btn {
  border-color: rgba(255, 255, 255, .12);
}
:root.dark .drawer-close:hover,
:root.dark .drawer-signout-btn:hover {
  background: rgba(255, 255, 255, .06);
}
:root.dark .drawer-btn-danger { border-color: rgba(232, 131, 122, .35); }
:root.dark .drawer-btn-danger:hover { background: rgba(232, 131, 122, .15); }

/* Theme toggle button */
.rooms-nav .theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--rule-firm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}

.rooms-nav .theme-toggle:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.rooms-nav .theme-toggle:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.rooms-nav .theme-toggle svg { transition: transform .4s var(--ease-out), opacity .25s ease; }

/* A click swaps the icon outright (sun and moon are different glyphs, not one
   rotated into the other) — this is the flourish that makes the swap read as
   a swap rather than a flicker. Reduced motion still gets the flip; it is a
   one-off, well under the threshold that bothers vestibular motion. */
.rooms-nav .theme-toggle.flipping svg {
  transform: rotate(-90deg) scale(.4);
  opacity: 0;
}

/* Search trigger button */
.rooms-nav .search-trigger {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  width: auto;
  height: 32px;
  padding: 0 0.6rem;
  border-radius: 7px;
  border: 1px solid var(--rule-firm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}

.rooms-nav .search-trigger:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.rooms-nav .search-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.rooms-nav .search-hint {
  font-size: 0.65rem;
  letter-spacing: 0.05em;
  color: var(--faint);
  background: var(--rule);
  padding: 0.1rem 0.35rem;
  border-radius: 3px;
}

/* Notifications trigger button */
.rooms-nav .notifications-trigger {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  border-radius: 7px;
  border: 1px solid var(--rule-firm);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  transition: background .18s var(--ease-out), border-color .18s var(--ease-out), color .18s var(--ease-out);
}

.rooms-nav .notifications-trigger:hover {
  background: var(--accent-dim);
  border-color: var(--accent);
  color: var(--accent);
}

.rooms-nav .notifications-trigger:focus-visible {
  outline: 2px solid var(--focus);
  outline-offset: 2px;
}

.rooms-nav .notification-badge {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  font-size: 0.65rem;
  font-weight: 700;
  line-height: 16px;
  color: #fff;
  background: var(--late);
  border-radius: 99px;
  border: 2px solid var(--card);
}

@media (max-width: 33rem) {
  .rooms-nav .search-trigger .search-hint { display: none; }
  .rooms-nav .search-trigger { padding: 0 0.4rem; }
}

/* Empty state illustrations */
.empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: 4rem 2rem;
  gap: 1rem;
}

.empty-state-icon {
  width: 4rem;
  height: 4rem;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--accent-dim);
  border-radius: 50%;
  color: var(--accent);
  font-size: 1.5rem;
}

.empty-state-title {
  font-size: 1.1rem;
  font-weight: 600;
  color: var(--ink);
  margin: 0;
}

.empty-state-text {
  font-size: 0.9rem;
  color: var(--muted);
  max-width: 20rem;
  line-height: 1.5;
  margin: 0;
}

.empty-state-actions {
  display: flex;
  gap: 0.5rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 0.5rem;
}

.empty-state-actions .btn {
  min-width: 120px;
}

/* ==========================================================================
   Mobile touch target audit (UX improvement)
   Ensures all interactive elements meet the 44px minimum touch target
   recommended by Apple HIG and WCAG 2.1 (Target Size Level AA).
   ========================================================================== */

@media (max-width: 48rem) {
  /* All interactive elements get minimum height for touch */
  a.tab, button.tab, .btn, button, .signout, input[type="submit"], input[type="button"], .theme-toggle, .search-trigger, .notifications-trigger {
    min-height: 44px;
    min-width: 44px;
    justify-content: center;
  }

  /* Compact tabs in nav become full-width rows for easier tapping */
  .rooms-nav {
    padding: 0.5rem 0.7rem;
    gap: 0;
    align-items: stretch;
    flex-wrap: wrap;
  }
  .rooms-nav a.tab {
    flex: 1 1 auto;
    text-align: center;
    padding: 0.5rem 0.5rem;
    font-size: 0.9rem;
  }

  /* Buttons in cards and rows get more height */
  .card button, .row button, .toolbar button {
    min-height: 44px;
    padding: 0.6rem 0.8rem;
  }

  /* Form inputs get larger tap targets */
  input:not([type=checkbox]):not([type=radio]), select, textarea {
    min-height: 44px;
    font-size: 16px; /* Prevents iOS zoom on focus */
  }

  /* Checkboxes and radios get larger hit areas */
  input[type=checkbox], input[type=radio] {
    width: 22px;
    height: 22px;
    margin: 0.2rem;
  }

  /* Meeting controls - large enough for fingertips */
  .meeting-controls button {
    min-width: 56px;
    min-height: 56px;
  }

  /* Agenda items - tap the whole row */
  ol.agenda li {
    min-height: 48px;
    display: flex;
    align-items: center;
  }

  /* Tasks - full-width rows on mobile */
  .task-item {
    display: block;
    padding: 0.8rem;
  }
  .task-item .task-actions {
    margin-top: 0.5rem;
    display: flex;
    gap: 0.5rem;
  }

  /* Remove hover effects that don't work on touch */
  .card:hover, .room:hover, a:hover {
    transform: none !important;
  }
}

/* Larger touch targets on tablets too */
@media (min-width: 48rem) and (max-width: 64rem) {
  a.tab, button.tab, .btn, button {
    min-height: 40px;
  }
}

/* Bulk toolbar for tasks */
.bulk-toolbar {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  flex-wrap: wrap;
  padding: 0.75rem 1rem;
  background: var(--accent-dim);
  border: 1px solid var(--accent);
  border-radius: var(--radius);
  margin-bottom: 1rem;
}

.bulk-count { font-size: 0.85rem; color: var(--accent); font-weight: 600; }

.bulk-toolbar .btn { flex-shrink: 0; }

/* Task card improvements */
.task-item { position: relative; }

.task-select { position: absolute; left: 0.5rem; top: 0.5rem; }

.task-checkbox { width: 20px; height: 20px; accent-color: var(--accent); cursor: pointer; }

.task-body { margin-left: 2.5rem; }

.task-item .task-actions { margin-top: 0.5rem; display: flex; gap: 0.5rem; flex-wrap: wrap; }

/* ==========================================================================
   Focus Management & Reduced Motion (P0 Accessibility)
   ========================================================================== */

/* Focus visible - consistent 3px outline on all interactive elements */
:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Ensure focus is visible on all interactive elements */
button:focus-visible,
a:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
[tabindex]:focus-visible,
.tab:focus-visible,
.btn:focus-visible,
.signout:focus-visible,
.theme-toggle:focus-visible,
.search-trigger:focus-visible,
.notifications-trigger:focus-visible,
.filter-tab:focus-visible,
.action-btn:focus-visible,
.wizard-option:focus-visible,
.wizard-back:focus-visible,
.cmd-k-close:focus-visible,
.shortcuts-close:focus-visible,
.toast-dismiss:focus-visible,
.toast-action:focus-visible,
.task-checkbox:focus-visible {
  outline: 3px solid var(--focus);
  outline-offset: 2px;
}

/* Reduced motion - respect user preference */
@media (prefers-reduced-motion: reduce) {
  /* Toast animations */
  .toast {
    animation: none !important;
  }
  .toast.removing {
    animation: none !important;
    display: none;
  }
  
  /* Cmd+K panel */
  #cmd-k-overlay .cmd-k-panel {
    animation: none !important;
  }
  .cmd-k-backdrop {
    animation: none !important;
  }
  
  /* Modal animations */
  .shortcuts-panel {
    animation: none !important;
  }
  .shortcuts-backdrop {
    animation: none !important;
  }
  
  /* QR/Break modals */
  .qr-modal,
  .break-modal {
    animation: none !important;
  }
  
  /* Live band pulse (already exists but ensuring) */
  .liveband .dot {
    animation: none !important;
  }
  
  /* Break timer countdown */
  .break-display {
    transition: none !important;
  }
  
  /* All transitions on interactive elements */
  button, a, .tab, .btn, .filter-tab, .action-btn,
  .wizard-option, .toast, .shortcut-hint-key {
    transition: none !important;
  }
  
  /* Wizard step transitions */
  .wizard-step {
    transition: none !important;
  }
}

/* Skip link for keyboard users — Sleek Modern Pill Badge */
.skip-link {
  position: fixed;
  top: 16px;
  left: 50%;
  transform: translate(-50%, -180%);
  opacity: 0;
  pointer-events: none;
  z-index: 100000;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 10px 22px;
  background: rgba(18, 30, 24, 0.94);
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  color: #ffffff !important;
  font-family: var(--font-body, 'Outfit', sans-serif);
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: -0.01em;
  text-decoration: none;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.22);
  box-shadow: 0 16px 40px rgba(0, 0, 0, 0.35);
  transition: transform 0.28s cubic-bezier(0.34, 1.56, 0.64, 1), opacity 0.2s ease, box-shadow 0.2s ease;
}

.skip-link:focus,
.skip-link:focus-visible {
  transform: translate(-50%, 0);
  opacity: 1;
  pointer-events: auto;
  outline: none;
  box-shadow: 0 20px 48px rgba(0, 0, 0, 0.45), 0 0 0 3px rgba(10, 163, 103, 0.5);
}

.skip-link:hover {
  background: rgba(28, 48, 38, 0.98);
  border-color: rgba(10, 163, 103, 0.5);
}

/* Focus trap indicator for modals */
[data-focus-trap] {
  position: relative;
}

[data-focus-trap]::before {
  content: '';
  position: absolute;
  inset: -4px;
  border: 2px solid transparent;
  border-radius: inherit;
  pointer-events: none;
}

[data-focus-trap]:focus-within::before {
  border-color: var(--focus);
}

/* Ensure dialog backdrop doesn't steal focus */
dialog::backdrop {
  background: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}

/* High contrast mode support */
@media (prefers-contrast: more) {
  :root {
    --rule: #000;
    --rule-firm: #000;
    --muted: #333;
    --faint: #666;
  }
  .dark {
    --rule: #fff;
    --rule-firm: #fff;
    --muted: #ccc;
    --faint: #999;
  }
}

/* Screen reader only text */
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

/* =====================================================================
   A Room's own colour.
   ---------------------------------------------------------------------
   Set by the Room's owner, applied by room.html as --room-accent, and
   used ONLY on that Room's own surfaces. Deliberately narrow: the rail's
   current marker, the section rules and the Room's own heading. The nav
   bar, the command palette and every other page keep the product's
   colour, because a Room decorates itself and does not restyle the thing
   it lives inside.

   Everything falls back to --accent, so a Room that has set nothing —
   which is all of them until somebody does — is unchanged.
   ===================================================================== */
.has-room-accent .room-rail a[aria-current="page"],
.has-room-accent header h1 {
  color: var(--room-accent, var(--accent));
}
.has-room-accent .room-rail a[aria-current="page"] {
  border-left-color: var(--room-accent, var(--accent));
}
.has-room-accent .rail-count {
  background: color-mix(in srgb, var(--room-accent, var(--accent)) 12%, transparent);
  color: var(--room-accent, var(--accent));
}
/* The identity control itself, on the Room page. */
.room-identity { display: flex; align-items: center; gap: .6rem; flex-wrap: wrap; }
.room-identity input[type="color"] {
  inline-size: 2.4rem; block-size: 2.4rem; padding: 0;
  border: 1px solid var(--rule); border-radius: 8px; background: none; cursor: pointer;
}
.room-identity .meta { flex: 1 1 14rem; }

/* A Room's header image. Bounded on purpose: a banner is a strip at the top of
   a page, and an unconstrained image would push the Room's own content below
   the fold on the one page that exists to show it. */
.room-header {
  display: block; inline-size: 100%; block-size: clamp(90px, 18vw, 180px);
  object-fit: cover; border-radius: 14px; margin-bottom: .9rem;
  border: 1px solid var(--rule);
}
.room-header[hidden] { display: none; }
.room-identity label.btn { cursor: pointer; }

/* The lead form. One set of rules, because there is one form — a per-channel
   stylesheet would drift the same way a per-channel form would. */
.lead-form { display: grid; gap: 1.2rem; max-width: 30rem; }
.lead-form label { display: grid; gap: .4rem; font-size: .9rem; font-weight: 500; }
.lead-form input, .lead-form textarea {
  inline-size: 100%; padding: .75rem .85rem; font: inherit;
  border: 1px solid var(--rule); border-radius: 12px;
  background: var(--card); color: var(--ink);
  transition: all 0.2s ease;
}
.lead-form input:hover, .lead-form textarea:hover { border-color: var(--faint); }
.lead-form input:focus-visible, .lead-form textarea:focus-visible {
  outline: 2px solid var(--accent); outline-offset: 1px;
  border-color: var(--accent);
}
.lead-form .lead-opt { color: var(--muted); font-weight: 400; font-size: .8rem; }
.lead-form .lead-submit-btn {
  justify-self: start;
  padding: .75rem 2rem;
  border-radius: 24px;
  font-weight: 600;
  font-size: .95rem;
  margin-top: .5rem;
  transition: transform 0.2s, filter 0.2s;
}
.lead-form .lead-submit-btn:hover { transform: translateY(-1px); filter: brightness(1.05); }

/* Lead Form Modal */
.lead-modal-backdrop {
  position: fixed; inset: 0; z-index: 10000;
  background: rgba(0, 0, 0, 0.4);
  backdrop-filter: blur(4px); -webkit-backdrop-filter: blur(4px);
  display: flex; align-items: center; justify-content: center;
  padding: 1rem;
  animation: lead-fade-in 0.2s ease-out;
}
.lead-modal-backdrop[hidden] { display: none !important; }
.lead-modal-content {
  position: relative;
  background: var(--card); color: var(--ink);
  padding: 2.5rem 2rem;
  border-radius: 16px;
  max-width: 400px; width: 100%;
  text-align: center;
  box-shadow: var(--shadow-float);
  border: 1px solid var(--rule);
  animation: lead-pop-in 0.3s cubic-bezier(0.16, 1, 0.3, 1);
}
.lead-modal-close {
  position: absolute; top: 1rem; right: 1rem;
  background: transparent; border: none; font-size: 1.5rem;
  color: var(--muted); cursor: pointer; line-height: 1; padding: .2rem .5rem;
  border-radius: 8px; transition: color 0.2s, background 0.2s;
}
.lead-modal-close:hover { color: var(--ink); background: var(--rule); }
.lead-modal-state { display: flex; flex-direction: column; align-items: center; }
.lead-modal-state[hidden] { display: none !important; }
.lead-modal-retry { padding: .6rem 1.5rem; border-radius: 20px; font-weight: 500; font-size: .9rem; }
.lead-success-icon, .lead-error-icon {
  display: flex; align-items: center; justify-content: center;
  width: 56px; height: 56px; border-radius: 50%; margin: 0 auto 1.5rem;
}
.lead-success-icon { background: rgba(111, 201, 143, 0.15); color: var(--good); }
.lead-error-icon { background: rgba(232, 93, 93, 0.15); color: var(--late); }

@keyframes lead-fade-in { from { opacity: 0; } to { opacity: 1; } }
@keyframes lead-pop-in { from { opacity: 0; transform: scale(0.95) translateY(10px); } to { opacity: 1; transform: scale(1) translateY(0); } }

.lead-msg { min-block-size: 1.2em; color: var(--muted); font-size: .88rem; margin: 0; line-height: 1.4; }
.lead-done { padding: 1rem 0; line-height: 1.6; }