/* ============================================================================
   coommit-ui.css — the interface redrawn by hand (2026-10-26).

   Alex validated a redo of the dashboard that keeps today's structure (same
   elements, same places, Manrope, the indigo) and changes every detail:
   one window colour, white grouped lists on it, one hairline, four radii,
   a short type scale, four buttons, colour only where it means something
   (indigo = Coommit and its action, green = someone in a call, red =
   leave or delete). Reference: the approved mock in
   ~/coommit-previews/dashboard-redo-2026-10-26/dashboard.html.

   Loaded LAST on every /app page (views/app/layout.ejs), so it wins at
   equal specificity over style_app.css and the page stylesheets. Rules
   that must beat a page's own inline <style> (rendered in the body, after
   this file) carry one extra ancestor class (.app-layout / .app-content).
   Read DESIGN.md first; the values below are the ones it now points to.
   ============================================================================ */

/* ---- 1. Tokens: they flow into style_app.css's variables ----------------- */
:root,
[data-theme="light"] {
  --ui-win: #f4f4f7;          /* the window, behind everything */
  --ui-side: #ececf0;         /* the sidebar, one step darker */
  --ui-group: #ffffff;        /* grouped lists, tiles, popovers */
  --ui-ink: #1d1f2b;          /* 15.4:1 on white */
  --ui-ink-2: #40456a;        /* Wada Violet Blue: text read second (9.2:1) */
  --ui-ink-3: #646a7c;        /* hints, times, counts (4.9:1 on the window) */
  --ui-sep: rgba(29, 31, 43, .08);
  --ui-edge: rgba(29, 31, 43, .07);
  --ui-fill: rgba(29, 31, 43, .055);   /* secondary buttons, selection */
  --ui-fill-2: rgba(29, 31, 43, .10);  /* their hover, the current page */
  --ui-well: #e9e9ee;         /* empty previews, folder wells */
  --ui-accent: #4f46e5;       /* the filled action and links (white 6.3:1) */
  --ui-accent-hover: #4338ca;
  --ui-accent-text: #4f46e5;
  --ui-mark: #6366f1;         /* indigo without text: focus, bars, marks */
  --ui-live: #16a34a;         /* someone is in a call: dots, rings */
  --ui-live-fill: #15803d;    /* the Join fill (white 5.0:1) */
  --ui-live-hover: #166534;
  --ui-live-text: #15803d;
  --ui-danger: #dc2626;
  --ui-danger-text: #dc2626;  /* red words: #f87171 in the dark theme (5.6:1 on its groups) */
  --ui-pop: 0 0 0 .5px rgba(20, 22, 40, .12), 0 12px 32px rgba(20, 22, 40, .14);
  --ui-r-group: 12px;
  --ui-r-ctl: 8px;
  --ui-r-small: 6px;

  /* style_app.css's own names, pointed at the values above */
  --bg0: var(--ui-win);
  --bg1: var(--ui-group);
  --bg2: #eeeef2;
  --stroke: #e6e6eb;
  --ink: var(--ui-ink);
  --muted: var(--ui-ink-2);
  --accent: var(--ui-accent);
  --accent-hover: var(--ui-accent-hover);
  --danger: var(--ui-danger);
  --shadow: 0 12px 32px rgba(20, 22, 40, .14);
  --shadow2: 0 1px 2px rgba(20, 22, 40, .06);
  --r-sm: 6px;
  --r-md: 8px;
  --r-lg: 12px;
  --radius: 8px;
  --t-page-size: 30px;
  --t-page-weight: 700;
  --t-section-size: 17px;
  --t-section-weight: 700;
  --t-card-size: 15px;
  --t-card-weight: 600;
  --sidebar-w: 248px;
  /* coommit-system.css's names */
  --cs-ink: var(--ui-ink);
  --cs-text: var(--ui-ink-2);
  --cs-muted: var(--ui-ink-3);
  --cs-line: #e6e6eb;
  --cs-paper: var(--ui-group);
  --cs-quiet: var(--ui-fill);
  --cs-quiet-hover: var(--ui-fill-2);
}
[data-theme="dark"] {
  --ui-win: #151517;
  --ui-side: #1b1b1e;
  --ui-group: #222226;
  --ui-ink: #f1f2f5;
  --ui-ink-2: #b9bdc9;
  --ui-ink-3: #8f94a3;
  --ui-sep: rgba(255, 255, 255, .08);
  --ui-edge: rgba(255, 255, 255, .06);
  --ui-fill: rgba(255, 255, 255, .08);
  --ui-fill-2: rgba(255, 255, 255, .13);
  --ui-well: #2b2b30;
  --ui-accent-text: #a5b4fc;
  --ui-live-text: #4ade80;
  --ui-danger-text: #f87171;
  --ui-pop: 0 0 0 .5px rgba(255, 255, 255, .10), 0 16px 40px rgba(0, 0, 0, .5);
  --bg0: var(--ui-win);
  --bg1: var(--ui-group);
  --bg2: #2a2a2f;
  --stroke: rgba(255, 255, 255, .08);
  --ink: var(--ui-ink);
  --muted: var(--ui-ink-2);
  --shadow: 0 16px 40px rgba(0, 0, 0, .5);
  --shadow2: 0 1px 2px rgba(0, 0, 0, .4);
  --cs-ink: var(--ui-ink);
  --cs-text: var(--ui-ink-2);
  --cs-muted: var(--ui-ink-3);
  --cs-line: rgba(255, 255, 255, .08);
  --cs-paper: var(--ui-group);
}

/* ---- 2. The window and its sidebar --------------------------------------- */
/* Body text at 500, as in the approved mock: Manrope's 400 reads thin on a
   screen; titles and labels set their own weight. */
body { background: var(--ui-win); color: var(--ui-ink); font-weight: 500; }
.app-main-wrap { background: var(--ui-win); }
.app-layout .sidebar {
  width: var(--sidebar-w);
  background: var(--ui-side);
  border-right: 1px solid var(--ui-edge);
}
.app-layout .sidebar-logo-img { height: 18px !important; }
.app-layout .theme-toggle {
  display: grid; place-items: center; width: 32px; height: 32px; padding: 0; border: 0;
  border-radius: var(--ui-r-ctl); background: transparent; color: var(--ui-ink-2); cursor: pointer;
}
.app-layout .theme-toggle:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-layout .theme-toggle svg { width: 18px !important; height: 18px !important; stroke-width: 1.75; }
.app-layout .sidebar-nav { padding: 0 8px; }
.app-layout .nav-link {
  display: flex; align-items: center; gap: 10px; min-height: 34px; padding: 0 10px;
  border-radius: var(--ui-r-ctl); font-size: 14px; font-weight: 600; line-height: 1.25;
  color: var(--ui-ink); background: transparent; box-shadow: none; border: 0;
}
.app-layout .nav-link > svg, .app-layout .nav-link > i svg, .app-layout .nav-link > svg.lucide {
  width: 18px; height: 18px; stroke-width: 1.75; color: var(--ui-ink-2); flex: none;
}
.app-layout .nav-link:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-layout .nav-link.active { background: var(--ui-fill-2); color: var(--ui-ink); font-weight: 700; }
.app-layout .nav-link.active > svg { color: var(--ui-accent-text); }
/* Counts are plain numbers, never pills */
.app-layout .sidebar-badge {
  margin-left: auto; min-width: 0; height: auto; padding: 0; border-radius: 0;
  background: none; color: var(--ui-ink-3); font-size: 13px; font-weight: 600;
  font-variant-numeric: tabular-nums; box-shadow: none;
}
.app-layout .sidebar-badge-late { color: var(--ui-danger-text); }
/* One inset for every row of the sidebar (12 to 236): the top links sit in
   4 px wrappers (layout.ejs), the rest gets the same 4 px here. */
.app-layout .sidebar-section { padding: 0 4px; }
.app-layout .sidebar-nav > .nav-link-bottom { margin: 0 4px; }
/* The rooms: their label above them, the names a step quieter than the four
   places at the top (Alex, 26/10: a name was bigger than "Rooms"). */
.app-layout .sidebar-section-header { display: flex; align-items: baseline; gap: 6px; padding: 20px 10px 6px; }
.app-layout .sidebar-section-title {
  font-size: 13px; font-weight: 700; color: var(--ui-ink-2);
  text-transform: none; letter-spacing: 0;
}
.app-layout .sidebar-section-count { font-size: 12px; font-weight: 600; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
.app-layout .nav-link-room { min-height: 28px; gap: 8px; padding: 0 10px; font-weight: 500; }
.app-layout .nav-link-room-name { font-size: 13px; font-weight: 500; color: var(--ui-ink-2); }
.app-layout .nav-link-room:hover .nav-link-room-name { color: var(--ui-ink); }
.app-layout .nav-link-room.active .nav-link-room-name { font-weight: 700; color: var(--ui-ink); }
/* A list cut by the window says so: a thumb that shows (macOS hides it). */
.app-layout .sidebar-room-list { scrollbar-width: thin; scrollbar-color: rgba(29, 31, 43, .22) transparent; }
[data-theme="dark"] .app-layout .sidebar-room-list { scrollbar-color: rgba(255, 255, 255, .22) transparent; }
/* A room's dot only says that someone is in it */
.app-layout .sidebar-room-dot { display: none; }
.app-layout .sidebar-room-dot.active {
  display: block; order: 2; margin-left: auto; width: 7px; height: 7px;
  border-radius: 999px; background: var(--ui-live); box-shadow: none; animation: none;
}
.app-layout .sidebar-folder-header {
  min-height: 28px; gap: 6px; padding: 0 10px 0 6px; border-radius: var(--ui-r-ctl);
  font-size: 13px; font-weight: 600; color: var(--ui-ink);
}
.app-layout .sidebar-folder-header:hover { background: var(--ui-fill); }
.app-layout .sidebar-folder-icon { width: 16px; height: 16px; fill: none; stroke: var(--ui-ink-2); stroke-width: 1.75; }
.app-layout .sidebar-folder-icon path { fill: none; }
.app-layout .sidebar-folder-chevron { color: var(--ui-ink-3); }
.app-layout .sidebar-folder-name { font-weight: 600; color: var(--ui-ink); }
.app-layout .sidebar-folder-count { color: var(--ui-ink-3); font-weight: 600; background: none; }
.app-layout .sidebar-folder-rooms { border-left: 0; margin-left: 0; padding-left: 0; }
.app-layout .nav-link-room-in-folder { padding-left: 36px; }
.app-layout .sidebar-folder-empty, .app-layout .sidebar-room-empty { font-style: normal; color: var(--ui-ink-3); font-size: 13px; padding-left: 36px; }
.app-layout .sidebar-create-room {
  display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%;
  height: 34px; border-radius: var(--ui-r-ctl); border: 0; box-shadow: none; transform: none;
  font-size: 14px; font-weight: 600;
}
.app-layout .sidebar-create-room--primary { background: var(--ui-accent); color: #fff; }
.app-layout .sidebar-create-room--primary:hover { background: var(--ui-accent-hover); transform: none; box-shadow: none; }
.app-layout .sidebar-create-room--primary .sidebar-create-room-icon { background: none; box-shadow: none; }
.app-layout .sidebar-create-room--secondary {
  justify-content: flex-start; padding: 0 10px; background: transparent; color: var(--ui-ink);
}
.app-layout .sidebar-create-room--secondary:hover { background: var(--ui-fill); }
.app-layout .sidebar-create-room-icon { background: none; border: 0; box-shadow: none; color: inherit; width: auto; height: auto; }
.app-layout .sidebar-create-room--secondary .sidebar-create-room-icon { color: var(--ui-ink-2); }
.app-layout .sidebar-create-room svg { width: 18px; height: 18px; stroke-width: 1.75; }
.app-layout .nav-link-bottom { font-weight: 600; }
/* No rules inside the sidebar: its grey already sets it apart, the gaps do
   the rest (Alex, 26/10: lines everywhere read as vibe-coded). */
.app-layout .sidebar-divider { display: none; }
.app-layout .sidebar-bottom {
  display: flex; align-items: center; gap: 10px; margin-top: 8px; padding: 10px 12px 10px 22px;
  border-top: 0;
}
.app-layout .sidebar-user-avatar {
  width: 28px; height: 28px; flex: none; border-radius: 999px; object-fit: cover;
  display: grid; place-items: center; background: var(--ui-accent); color: #fff;
  font-size: 13px; font-weight: 700;
}
.app-layout .sidebar-user-text { flex: 1; min-width: 0; }
.app-layout .sidebar-user-name {
  font-size: 14px; font-weight: 600; color: var(--ui-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.app-layout .sidebar-user-plan { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 1px; font-size: 12px; color: var(--ui-ink-3); }
/* Plan and status pills read as plain words */
.app-layout .sidebar-user-plan .plan-badge,
.app-layout .sidebar-user-plan .founder-pill,
.app-layout .sidebar-user-plan .ambassador-pill {
  padding: 0 !important; border: 0; border-radius: 0; background: none !important; box-shadow: none;
  color: var(--ui-ink-3) !important; font-size: 12px !important; font-weight: 600; text-transform: none; letter-spacing: 0;
}
.app-layout .founder-logo-star { display: none; }
.app-layout .founder-logo-pill {
  padding: 0; border: 0; background: none; box-shadow: none; color: var(--ui-ink-3);
  font-size: 12px; font-weight: 700; text-transform: none; letter-spacing: 0;
}
.app-layout .btn-logout {
  display: grid; place-items: center; width: 32px; height: 32px; border-radius: var(--ui-r-ctl);
  color: var(--ui-ink-2); background: transparent;
}
.app-layout .btn-logout:hover { background: var(--ui-fill); color: var(--ui-ink); }

/* The bell: an icon and its count, no box */
.app-layout .notif-btn {
  width: auto; min-width: 32px; height: 32px; padding: 0 8px; gap: 6px; display: inline-flex; align-items: center;
  border: 0; border-radius: var(--ui-r-ctl); background: transparent; box-shadow: none; color: var(--ui-ink-2);
}
.app-layout .notif-btn:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-layout .notif-badge {
  position: static; min-width: 0; height: auto; padding: 0; border: 0; border-radius: 0; box-shadow: none;
  background: none; color: var(--ui-accent-text); font-size: 13px; font-weight: 700;
}
.app-layout .notif-panel { border: 0; border-radius: var(--ui-r-group); background: var(--ui-group); box-shadow: var(--ui-pop); }
.app-layout .notif-panel-title { font-size: 13px; font-weight: 700; color: var(--ui-ink-2); text-transform: none; letter-spacing: 0; }
.app-layout .notif-mark-all { font-size: 13px; font-weight: 600; color: var(--ui-accent-text); }
.app-layout .notif-empty { font-size: 13px; color: var(--ui-ink-3); }

/* ---- 3. Shared components: buttons, fields, menus, dialogs --------------- */
.app-content .btn-primary, .app-content .btn.btn-primary,
.app-content .new-room-modal-submit:not(.is-danger), .app-layout .new-room-modal-submit:not(.is-danger) {
  background: var(--ui-accent); color: #fff; border: 0; box-shadow: none; background-image: none;
  border-radius: var(--ui-r-ctl); font-weight: 600;
}
.app-content .btn-primary:hover, .app-layout .new-room-modal-submit:not(.is-danger):hover { background: var(--ui-accent-hover); transform: none; box-shadow: none; }
.app-layout .new-room-modal-submit:disabled { background: var(--ui-fill-2); color: var(--ui-ink-3); }
.app-layout .new-room-modal-submit.is-danger { background: var(--ui-danger); color: #fff; border-radius: var(--ui-r-ctl); box-shadow: none; }
.app-layout .new-room-modal-cancel {
  background: var(--ui-fill); color: var(--ui-ink); border: 0; border-radius: var(--ui-r-ctl); font-weight: 600;
}
.app-layout .new-room-modal-cancel:hover { background: var(--ui-fill-2); }
.app-layout .new-room-modal-overlay,
.app-layout .sc-overlay { background: rgba(15, 16, 22, .32); backdrop-filter: none; -webkit-backdrop-filter: none; }
.app-layout .new-room-modal { border-radius: 14px; border: 0; box-shadow: var(--ui-pop); background: var(--ui-group); }
.app-layout .new-room-modal-input,
.app-layout .app-content input[type="text"], .app-layout .app-content input[type="email"],
.app-layout .app-content input[type="url"], .app-layout .app-content input[type="search"],
.app-layout .app-content input[type="number"], .app-layout .app-content input[type="password"],
.app-layout .app-content textarea, .app-layout .app-content select {
  border-radius: var(--ui-r-ctl); border: 1px solid rgba(29, 31, 43, .14); background: var(--ui-group);
  color: var(--ui-ink); box-shadow: none;
}
[data-theme="dark"] .app-layout .new-room-modal-input,
[data-theme="dark"] .app-layout .app-content input, [data-theme="dark"] .app-layout .app-content textarea,
[data-theme="dark"] .app-layout .app-content select { border-color: rgba(255, 255, 255, .14); }
.app-layout .new-room-modal-input:focus,
.app-layout .app-content input:focus, .app-layout .app-content textarea:focus, .app-layout .app-content select:focus {
  outline: 2px solid var(--ui-mark); outline-offset: 0; border-color: transparent; box-shadow: none;
}
.app-layout .new-room-modal-label, .app-layout .sc-label {
  font-size: 13px; font-weight: 600; color: var(--ui-ink-2); text-transform: none; letter-spacing: 0;
}
/* Build with Echo: the same flat button as everything else */
.app-layout .echo-build-open { background: var(--ui-group); background-image: none; border: 1px solid var(--ui-edge); box-shadow: none; }
.app-layout .echo-build-open:hover { background: var(--ui-fill); transform: none; box-shadow: none; }
.app-layout .echo-build-spark { display: none; }
/* Nothing on this page moves when hovered */
.app-content *:hover { transform: none; }

/* ---- 4. The dashboard ---------------------------------------------------- */
.app-content .dashboard-welcome {
  margin: 4px 0 0; font-size: 30px; line-height: 36px; font-weight: 700; letter-spacing: -.022em; color: var(--ui-ink);
}
.app-content .dashboard-date { margin: 4px 0 0; font-size: 15px; line-height: 20px; color: var(--ui-ink-2); }
.app-content .dashboard-date:empty { display: none; }
/* The greeting and the date on one line (Alex, 27/10: what is not the rooms
   takes less room); on a narrow screen the date goes under. */
.app-content .dash-head { display: flex; align-items: baseline; flex-wrap: wrap; column-gap: 14px; row-gap: 2px; }
.app-content .dash-head .dashboard-date { margin: 0; }

/* Trial, demo, program and calendar lines: dashboard-strips.css draws them
   (Alex, 26/10, to the partner program's session: "beaucoup plus petit,
   beaucoup plus discret", a line of small text, no card). Here only their
   place under the date, and the calendar reminder drawn like them. */
/* The trial, the demo, a program: side by side on one line, each one a few
   words and its small button (27/10); they wrap when the screen is narrow. */
.app-content .dash-notices { display: flex; flex-wrap: wrap; align-items: center; column-gap: 28px; row-gap: 6px; margin-top: 12px; }
.app-content .dash-notices > * { margin: 0; }
.app-content .dash-notices:empty,
.app-content .dash-notices:not(:has(> .dash-program-line, > .beta-banner, > .gcal-banner, > .demo-cta-banner:not([style*="display: none"]))) { display: none; }
.app-content .dash-notices > .gcal-banner {
  display: flex; align-items: center; flex-wrap: wrap; gap: 4px 10px; margin: 0; padding: 0;
  background: none; border: 0; border-radius: 0; box-shadow: none; font-size: 13px; line-height: 1.5; color: var(--ui-ink-2);
}
.app-content .gcal-banner-mark { display: inline-grid; width: 16px; height: 16px; }
.app-content .gcal-banner-mark img { width: 16px; height: 16px; }
.app-content .gcal-banner-text { min-width: 0; }
.app-content .gcal-banner-cta {
  display: inline-flex; align-items: center; height: 26px; padding: 0 10px; border: 0; border-radius: var(--ui-r-ctl);
  background: var(--ui-fill); color: var(--ui-ink); font-size: 12px; font-weight: 600; box-shadow: none; text-decoration: none;
}
.app-content .gcal-banner-cta:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
.app-content .gcal-banner-dismiss {
  display: grid; place-items: center; width: 24px; height: 24px; padding: 0; border: 0; border-radius: var(--ui-r-small);
  background: none; color: var(--ui-ink-3);
}
.app-content .gcal-banner-dismiss:hover { background: var(--ui-fill); color: var(--ui-ink); }

/* Who is in a call now: its own row, green only for the state */
.app-content .dash-now { margin-top: 12px; }
.app-content .dash-now-list { display: flex; flex-direction: column; gap: 8px; }
.app-content .dash-now-row {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 12px 10px 16px;
  background: var(--ui-group); border: 0; border-radius: var(--ui-r-group); box-shadow: 0 0 0 1px var(--ui-edge);
}
.app-content .dash-now-dot { width: 8px; height: 8px; border-radius: 999px; background: var(--ui-live); box-shadow: none; animation: none; }
.app-content .dash-now-row.is-next .dash-now-dot { background: var(--ui-ink-3); box-shadow: none; }
.app-content .dash-now-text { flex: 1; min-width: 0; font-size: 15px; font-weight: 500; color: var(--ui-ink); }
.app-content .dash-now-text b, .app-content .dash-now-text strong { font-weight: 600; }
.app-content .dash-now-join {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border-radius: var(--ui-r-ctl);
  background: var(--ui-live-fill); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none; border: 0;
}
.app-content .dash-now-join:hover { background: var(--ui-live-hover); color: #fff; }
.app-content .dash-now-row.is-next .dash-now-join { background: var(--ui-fill); color: var(--ui-ink); }

/* Upcoming: a grouped list, separators inside the row's padding */
.app-content .dashboard-grid { margin-top: 28px; }
.app-content .home-cal-card.dashboard-card {
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.app-content .home-cal-head { display: flex; align-items: center; gap: 6px; min-height: 32px; margin: 0 0 14px; padding: 0; }
/* Section titles one clear step above their rows (30 / 20 / 15 / 13): at 17
   they read as large as the 15 px rows under them (Alex's "perspective"). */
.app-content .home-cal-up-title { margin-right: auto; font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; color: var(--ui-ink); }
/* The header's buttons: one filled action per screen (Create a new room, in
   the sidebar); Schedule a call is the secondary grey button, See calendar a
   plain one. */
.app-content .home-cal-view {
  height: 32px; padding: 0 10px; border: 0; border-radius: var(--ui-r-ctl); background: transparent;
  color: var(--ui-ink-2); font-size: 14px; font-weight: 600; box-shadow: none;
}
.app-content .home-cal-view:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-content .home-cal-add {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 12px 0 10px; border: 0;
  border-radius: var(--ui-r-ctl); background: var(--ui-fill); color: var(--ui-ink); font-size: 14px; font-weight: 600; box-shadow: none;
}
.app-content .home-cal-add:hover { background: var(--ui-fill-2); color: var(--ui-ink); transform: none; box-shadow: none; }
.app-content .home-cal-add svg { width: 16px; height: 16px; stroke-width: 1.75; color: var(--ui-ink-2); }
.app-content .home-cal-month, .app-content .home-cal-nav, .app-content .home-cal-today { font-size: 14px; font-weight: 600; color: var(--ui-ink-2); }
.app-content .home-cal-nav, .app-content .home-cal-today { border: 0; border-radius: var(--ui-r-ctl); background: transparent; box-shadow: none; height: 32px; }
.app-content .home-cal-nav:hover, .app-content .home-cal-today:hover { background: var(--ui-fill); }
.app-content .home-cal-up, .app-content .home-cal-body {
  background: var(--ui-group); border-radius: var(--ui-r-group); box-shadow: 0 0 0 1px var(--ui-edge); overflow: hidden;
}
.app-content .home-cal-list { display: flex; flex-direction: column; gap: 0; padding: 0; }
.app-content .home-cal-ev-item { position: relative; }
/* The rule between two rows starts at the title: the times stay one rail. */
.app-content .home-cal-ev-item + .home-cal-ev-item::before {
  content: ""; position: absolute; top: 0; left: 196px; right: 0; height: 1px; background: var(--ui-sep); z-index: 1;
}
.app-content .home-cal-ev, .app-content .home-cal-ev.is-link {
  min-height: 44px; padding: 6px 16px; margin: 0; border: 0; border-left: 0; border-radius: 0;
  background: transparent; box-shadow: none;
}
.app-content .home-cal-ev::before, .app-content .home-cal-ev::after { display: none !important; }
.app-content .home-cal-ev.is-link:hover { background: color-mix(in srgb, var(--ui-group) 94%, var(--ui-ink)); }
/* A row reads on one line (Alex, 27/10: the agenda took too much room): the
   time then its day, the title, its details in grey to the end of the line,
   cut before the title is. The day is written once per day (app.js marks
   the repeats). A phone keeps two lines (section 5). */
.app-content .home-cal-ev-body { display: grid; grid-template-columns: 164px minmax(0, 1fr) auto; align-items: center; gap: 16px; color: inherit; text-decoration: none; }
.app-content .home-cal-ev-time { display: flex; flex-direction: row-reverse; justify-content: flex-end; align-items: baseline; gap: 8px; line-height: 20px; }
.app-content .home-cal-ev-main { display: flex; flex-direction: row; align-items: baseline; gap: 12px; min-width: 0; }
.app-content .home-cal-ev-title, .app-content .home-cal-ev-room { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content .home-cal-ev-title { flex: 0 1 auto; min-width: 0; }
.app-content .home-cal-ev-room { flex: 1 1 0; min-width: 0; }
.app-content .home-cal-ev-day { font-size: 13px; line-height: 18px; font-weight: 500; color: var(--ui-ink-3); text-transform: none; letter-spacing: 0; }
.app-content .home-cal-ev-day.is-repeat { visibility: hidden; }
.app-content .home-cal-ev-time { font-size: 15px; font-weight: 600; color: var(--ui-ink); font-variant-numeric: tabular-nums; letter-spacing: -.005em; }
.app-content .home-cal-ev-title { font-size: 15px; line-height: 20px; font-weight: 600; color: var(--ui-ink); }
.app-content .home-cal-ev-room { font-size: 13px; line-height: 18px; color: var(--ui-ink-2); }
/* A calendar's row: its mark and the same chevron as a call's at the end;
   its answer in words, never a pill. */
.app-content .dcal-ev-side { display: flex; align-items: center; gap: 8px; align-self: center; }
.app-content .dcal-ev-logo { width: 16px; height: 16px; flex: none; display: block; }
.app-content .dcal-ev-chev { display: grid; place-items: center; width: 24px; height: 32px; color: var(--ui-ink-3); }
.app-content .dcal-ev-chev svg { width: 16px; height: 16px; }
.app-content .dcal-pill {
  height: auto; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none;
  font-size: 13px; font-weight: 600; line-height: 18px; color: var(--ui-ink-3); text-transform: none; letter-spacing: 0;
}
.app-content .dcal-pill-now { color: var(--ui-live-text); }
.app-content .dcal-pill-wait { color: var(--ui-accent-text); }
/* A row's own action before its call (2026-10-27, Alex: people prepare their
   meetings from the calendar): Prepare opens its room, Create room gives it
   one. One quiet button, Join's height, so a row keeps its height whatever it
   says; it darkens with the row under the pointer. */
.app-content .home-cal-prep {
  display: inline-flex; align-items: center; justify-content: center; flex: none; height: 32px; padding: 0 12px; border: 0;
  border-radius: var(--ui-r-ctl); background: var(--ui-fill); color: var(--ui-ink);
  font: inherit; font-size: 13px; font-weight: 600; line-height: 1; white-space: nowrap; text-decoration: none; cursor: pointer; box-shadow: none;
}
.app-content .home-cal-prep:hover, .app-content .home-cal-ev.is-link:hover .home-cal-prep { background: var(--ui-fill-2); color: var(--ui-ink); }
.app-content .home-cal-prep:disabled { opacity: .6; cursor: progress; }
.app-content .home-cal-prep:focus-visible { outline: 2px solid var(--ui-mark); outline-offset: 2px; }
/* The end of a row is one column: Prepare, Create room, Join or the chevron,
   the same width, so the calendars' marks stand in one line too. */
.app-content [data-cal-up] :is(.dcal-ev-side, .home-cal-ev-body) > :is(.home-cal-prep, .home-cal-join:not(.is-open), .dcal-ev-chev) { min-width: 120px; }
.app-content [data-cal-up] .dcal-ev-side > .dcal-ev-chev { display: flex; justify-content: flex-end; padding-right: 4px; }
/* The day beside the month (See calendar) is a narrow column: its rows keep
   two lines, a time column that holds the time alone (the day is the
   column's own), and their actions at their own width, so a title keeps its
   room (test/dashboard-r5.pg.test.js measures it). */
.app-content .home-cal-body .home-cal-ev-body { grid-template-columns: 72px minmax(0, 1fr) auto; align-items: start; gap: 12px; }
.app-content .home-cal-body .home-cal-ev-time { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
.app-content .home-cal-body .home-cal-ev-main { flex-direction: column; align-items: stretch; gap: 0; }
.app-content .home-cal-body .home-cal-ev-room { flex: none; }
.app-content .home-cal-body .home-cal-ev, .app-content .home-cal-body .home-cal-ev.is-link { min-height: 60px; padding: 10px 16px; }
.app-content .home-cal-body .home-cal-ev-item + .home-cal-ev-item::before { left: 100px; }
/* Your tools, under Upcoming (2026-10-27): the calendars and the apps a
   call's recap goes to; the linked ones in their colours, a link to each of
   the others. */
.app-content .dash-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 16px; margin: -4px 0 0; font-size: 13px; line-height: 20px; color: var(--ui-ink-2); }
.app-content .dash-tools-label { color: var(--ui-ink-3); font-weight: 600; }
.app-content .dash-tool { display: inline-flex; align-items: center; gap: 6px; color: var(--ui-ink-2); font-weight: 500; text-decoration: none; }
.app-content .dash-tool img { display: block; width: 16px; height: 16px; flex: none; }
.app-content .dash-tool:not(.is-linked) { color: var(--ui-accent-text); font-weight: 600; }
.app-content .dash-tool:not(.is-linked) img { filter: grayscale(1); opacity: .55; }
.app-content .dash-tool:hover { color: var(--ui-ink); text-decoration: underline; text-underline-offset: 3px; }
.app-content .dash-tool:not(.is-linked):hover { color: var(--ui-accent-hover); }
/* A Join that is not live yet (a call starting within ten minutes): grey. */
.app-content .home-cal-join.is-soon { background: var(--ui-fill); color: var(--ui-ink); font-weight: 600; }
.app-content .home-cal-join.is-soon:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
/* Join is for a call happening now; any other row opens the room */
.app-content .home-cal-join {
  display: inline-flex; align-items: center; height: 32px; padding: 0 14px; border: 0; border-radius: var(--ui-r-ctl);
  background: var(--ui-live-fill); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none;
}
.app-content .home-cal-join.is-open {
  width: 32px; padding: 0; justify-content: center; background: transparent; color: var(--ui-ink-3);
}
.app-content .home-cal-join.is-open:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-content .home-cal-ev-actions .home-cal-join:not(.is-open):hover { background: var(--ui-live-hover); }

/* The month, opened in place */
.app-content .home-cal-body { padding: 16px 20px; }
.app-content .home-cal-dow { font-size: 12px; font-weight: 600; color: var(--ui-ink-3); text-transform: none; letter-spacing: 0; }
.app-content .home-cal-grid button, .app-content .home-cal-grid .home-cal-day { border-radius: 999px; font-variant-numeric: tabular-nums; }

/* Your rooms: no card around the section, previews like files */
.app-content .dashboard-rooms, .app-content #dashboardFriendsCard.dashboard-rooms {
  margin-top: 28px; padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none;
}
.app-content .dashboard-rooms-header { min-height: 32px; margin-bottom: 14px; gap: 6px !important; }
.app-content .dashboard-rooms-title { font-size: 20px; line-height: 26px; font-weight: 700; letter-spacing: -.015em; color: var(--ui-ink); }
.app-content .dashboard-rooms-count { font-size: 20px; line-height: 26px; font-weight: 600; color: var(--ui-ink-3); font-variant-numeric: tabular-nums; }
.app-content .dashboard-rooms-header-actions { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.app-content .dashboard-rooms-trash-link, .app-content .dashboard-rooms-select-toggle {
  display: inline-flex; align-items: center; gap: 6px; height: 32px; padding: 0 10px; border: 0;
  border-radius: var(--ui-r-ctl); background: transparent; color: var(--ui-ink-2); font-size: 14px; font-weight: 600; box-shadow: none;
}
.app-content .dashboard-rooms-trash-link svg { width: 16px; height: 16px; stroke-width: 1.75; }
.app-content .dashboard-rooms-trash-link:hover, .app-content .dashboard-rooms-select-toggle:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-content .dashboard-rooms-trash-count { min-width: 0; height: auto; background: none; padding: 0; color: var(--ui-ink-3); font-size: 14px; font-weight: 600; }
/* Folders: compact cards, many to a row, right under Your rooms: the folder
   in its colour, the name, the count. The rooms below stay the big previews
   (Alex, 26/10 evening: « les dossiers prennent beaucoup de place »; 27/10:
   the rooms from the first screen). One row at most, then Show all folders
   (app.js measures the rows); no line of their own, and New folder is one
   of Your rooms' utilities, beside Trash and Select, drawn like them. */
.app-content .folder-shelf-block:not(:has(.folder-tile)) { display: none; }
.app-content .folder-shelf-new {
  display: inline-flex; align-items: center; gap: 6px; flex: none; height: 32px; padding: 0 10px;
  border: 0; border-radius: var(--ui-r-ctl); background: transparent; color: var(--ui-ink-2);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; box-shadow: none;
}
.app-content .folder-shelf-new:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-content .folder-shelf-new svg { width: 16px; height: 16px; stroke-width: 1.75; color: currentColor; }
/* The rooms' own columns (232 px or more, 24 px apart): a folder lines up
   with the room under it. */
.app-content .folder-shelf { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 12px 24px; padding: 0; }
.app-content .folder-shelf:not(:has(.folder-tile)) { display: none; }
/* One card: the folder in its colour on the left, over two lines its name and
   its count. The whole card is the target (open, drop a room on it), white
   on the page like the Upcoming list; a green light on the folder while a
   call is on in one of its rooms. */
.app-content .folder-tile {
  position: relative; display: grid; grid-template-columns: 24px minmax(0, 1fr); grid-template-rows: auto auto;
  column-gap: 12px; row-gap: 0; align-content: center; width: auto; min-width: 0; min-height: 56px; padding: 8px 12px;
  background: var(--ui-group); border: 0; border-radius: var(--ui-r-group); box-shadow: 0 0 0 1px var(--ui-edge);
  text-align: left; cursor: pointer; transition: box-shadow .12s ease, background-color .12s ease;
}
.app-content .folder-tile:hover { background: color-mix(in srgb, var(--ui-group) 96%, var(--ui-ink)); }
/* Rings drawn inside the card: the capped shelf hides what overflows it. */
.app-content .folder-tile.is-open { box-shadow: inset 0 0 0 2px var(--ui-accent); }
.app-content .folder-tile.drop-target { box-shadow: inset 0 0 0 2px var(--ui-accent); background: color-mix(in srgb, var(--ui-group) 94%, var(--ui-accent)); }
.app-content .folder-tile:focus-visible { outline: 2px solid var(--ui-accent); outline-offset: -2px; }
.app-content .folder-tile .ft-back { display: none; }
/* The colour, darkened on white where the palette's amber measures 1.9:1. */
.app-content .folder-tile .ft-icon {
  grid-row: 1 / span 2; align-self: center; position: relative; display: grid; place-items: center; width: 24px; height: 24px;
  color: color-mix(in srgb, var(--fold-b, var(--ui-mark)) 80%, #000);
}
[data-theme="dark"] .app-content .folder-tile .ft-icon { color: color-mix(in srgb, var(--fold-b, var(--ui-mark)) 80%, #fff); }
.app-content .folder-tile .ft-icon svg { display: block; width: 24px; height: 24px; }
.app-content .folder-tile.has-live .ft-icon::after {
  content: ""; position: absolute; top: 1px; right: -3px; width: 8px; height: 8px; border-radius: 999px;
  background: var(--ui-live); box-shadow: 0 0 0 2px var(--ui-group);
}
.app-content .folder-tile .ft-name-row { grid-column: 2; align-self: end; display: flex; align-items: center; gap: 6px; min-width: 0; }
.app-content .folder-tile .folder-tile-name { min-width: 0; font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content .folder-tile .ft-meta { grid-column: 2; align-self: start; margin: 0; font-size: 13px; line-height: 18px; color: var(--ui-ink-2); font-variant-numeric: tabular-nums; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

.app-content .folder-shelf-more { margin: 10px 0 0; padding: 0; height: auto; color: var(--ui-accent-text); font-weight: 600; font-size: 14px; background: none; border: 0; }
.app-content .folder-shelf-more:hover { color: var(--ui-accent-hover); border: 0; }
.app-content .rooms-folder-divider {
  display: flex; align-items: center; gap: 8px; margin: 28px 0 12px; padding: 0; border: 0; background: none;
  font-size: 15px; font-weight: 600; color: var(--ui-ink); text-transform: none; letter-spacing: 0;
}
.app-content .rooms-folder-divider::before, .app-content .rooms-folder-divider::after { display: none; }
/* style_app.css sizes the divider from the grid's id (12.5px, indigo on
   hover): the same id here, the system's 13px and inks. */
/* The rooms grid's own 24 px row gap is already above it. */
.app-content #roomsGridV2 .rooms-folder-divider { margin: 8px 0 0; padding-top: 0; border-top: 0; font-size: 15px; }
.app-content #roomsGridV2 .rooms-folder-divider-name { color: var(--ui-ink); }
.app-content #roomsGridV2 .rooms-folder-divider-count { color: var(--ui-ink-3); font-weight: 600; }
.app-content #roomsGridV2 .rooms-folder-divider svg:not(.rooms-folder-chevron) { display: none; }
.app-content #roomsGridV2 .rooms-folder-divider-count { color: var(--ui-ink-3); font-weight: 600; }
.app-content #roomsGridV2 .rooms-folder-divider:hover .rooms-folder-divider-name { color: var(--ui-ink); }
/* As many columns as fit tiles of 232 px or more: about 260 px whatever the
   screen (3 on a 1280 laptop, 5 on a 1705 or larger window). */
.app-layout .app-content .rooms-grid-v2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(232px, 1fr)); gap: 24px; }

/* A room: its preview, its name, what is happening in it */
.app-layout .app-content .room-card-v2 {
  position: relative; display: flex; flex-direction: column; align-items: stretch; gap: 0; min-width: 0; min-height: 0;
  padding: 0; background: transparent; border: 0; border-radius: 0; box-shadow: none; transform: none;
}
.app-layout .app-content .room-card-v2:hover { background: transparent; box-shadow: none; transform: none; border-color: transparent; }
.app-layout .app-content .room-card-v2 .room-card-v2-icon {
  position: relative; width: 100%; height: auto; aspect-ratio: 16 / 10; margin: 0 0 10px; padding: 0;
  display: grid; place-items: center; overflow: hidden; border-radius: var(--ui-r-group);
  background: var(--ui-well); box-shadow: 0 0 0 1px var(--ui-edge);
  font-size: 28px; font-weight: 700; color: var(--ui-ink-3);
}
.app-layout .app-content .room-card-v2:hover .room-card-v2-icon { box-shadow: 0 0 0 1px var(--ui-edge), 0 0 0 4px var(--ui-fill); }
.app-layout .app-content .room-card-v2 .room-card-v2-icon img { width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.app-layout .app-content .room-card-v2 .room-card-v2-icon .room-preview { position: absolute; inset: 0; width: 100%; height: 100%; }
.app-layout .app-content .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-icon,
.app-layout .app-content .room-card-v2.has-call .room-card-v2-icon { box-shadow: 0 0 0 2px var(--ui-live); }
.app-layout .app-content .room-card-v2-name {
  font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--ui-ink);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; padding-right: 36px;
}
.app-layout .app-content .room-card-v2-date { font-size: 13px; color: var(--ui-ink-2); margin-top: 2px; }
/* Absence is not advertised: no "No call right now", no "In the room: 0".
   The status line appears only for a call in progress or a talk with Echo. */
.app-layout .app-content .room-card-v2-participants,
.app-layout .app-content .room-card-v2-status { display: none; }
.app-layout .app-content .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-status,
.app-layout .app-content .room-card-v2-status[data-meeting-lifecycle="talk"] {
  display: inline-flex; align-items: center; gap: 6px; margin-top: 4px; padding: 0; border: 0; border-radius: 0;
  background: none; box-shadow: none; color: var(--ui-live-text); font-size: 13px; font-weight: 600;
  text-transform: none; letter-spacing: 0;
}
.app-layout .app-content .room-card-v2-status[data-meeting-lifecycle="talk"] { color: var(--ui-ink-2); }
.app-layout .app-content .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-status::before {
  content: ""; width: 7px; height: 7px; border-radius: 999px; background: var(--ui-live);
}
.app-layout .app-content .room-card-v2-status .live-dot { display: none; }
/* The card opens the room; its button only joins a call in progress */
.app-layout .app-content .room-card-v2-join { display: none; }
.app-layout .app-content .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-join:not([hidden]) {
  display: inline-flex; align-items: center; gap: 6px; align-self: flex-start; height: 32px; margin-top: 8px; padding: 0 12px;
  border: 0; border-radius: var(--ui-r-ctl); background: var(--ui-live-fill); color: #fff; font-size: 14px; font-weight: 700; box-shadow: none;
}
.app-layout .app-content .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-join:hover { background: var(--ui-live-hover); }
.app-layout .app-content .room-card-v2-join svg { display: none; }
.app-layout .app-content .room-card-v2-join.is-build-stub { display: inline-flex; align-self: flex-start; margin-top: 6px; gap: 6px; color: var(--ui-ink-2); font-size: 13px; font-weight: 600; background: none; }
.app-layout .app-content .room-card-v2-join.is-build-stub svg { display: block; }
.app-layout .app-content .room-card-menu-btn,
.app-layout .app-content .room-card-share-btn {
  width: 28px; height: 28px; border-radius: 999px; background: rgba(255, 255, 255, .94); color: var(--ui-ink-2);
  box-shadow: none; backdrop-filter: none; -webkit-backdrop-filter: none;
}
[data-theme="dark"] .app-layout .app-content .room-card-menu-btn,
[data-theme="dark"] .app-layout .app-content .room-card-share-btn { background: rgba(34, 34, 38, .94); }
/* A phone's room row: its two buttons are always there (no hover), plain
   icons on the row, not two white discs per room. */
@media (hover: none) and (max-width: 600px) {
  .app-layout .app-content .rooms-grid-v2 :is(.room-card-menu-btn, .room-card-share-btn) { width: 32px; height: 32px; background: transparent; color: var(--ui-ink-3); }
}
.app-layout .app-content .room-card-menu-btn:hover,
.app-layout .app-content .room-card-share-btn:hover { background: var(--ui-group); color: var(--ui-ink); }
.app-layout .app-content .room-card-menu {
  border: 0; border-radius: var(--ui-r-group); background: var(--ui-group); box-shadow: var(--ui-pop); padding: 6px;
}
.app-layout .app-content .room-card-menu-item {
  height: 32px; padding: 0 10px; border-radius: var(--ui-r-small); font-size: 14px; font-weight: 600; color: var(--ui-ink);
}
.app-layout .app-content .room-card-menu-item:hover { background: var(--ui-fill); }
.app-layout .app-content .room-card-menu-item.is-danger { color: var(--ui-danger-text); }
.app-layout .app-content .room-card-menu-label { font-size: 12px; font-weight: 700; color: var(--ui-ink-3); text-transform: none; letter-spacing: 0; }
.app-layout .app-content .room-card-menu-divider { background: var(--ui-sep); }
/* New room: the one tile that makes something. Its well holds the action's
   indigo disc (the sidebar's Create a new room), its caption says what comes. */
.app-layout .app-content .room-card-new {
  display: flex; flex-direction: column; align-items: stretch; gap: 0; min-height: 0; padding: 0;
  border: 0; border-radius: 0; background: transparent; box-shadow: none; text-align: left;
}
.app-layout .app-content .room-card-new-plus {
  display: grid; place-items: center; aspect-ratio: 16 / 10; width: 100%; height: auto; margin: 0 0 10px; border: 0;
  border-radius: var(--ui-r-group); background: var(--ui-fill); color: #fff; box-shadow: none;
}
.app-layout .app-content .room-card-new:hover .room-card-new-plus { background: var(--ui-fill-2); }
.app-layout .app-content #roomsGridV2 .room-card-new-plus svg {
  width: 20px; height: 20px; padding: 10px; box-sizing: content-box; border-radius: 999px;
  background: var(--ui-accent); color: #fff; box-shadow: none; stroke-width: 2;
}
.app-layout .app-content #roomsGridV2 .room-card-new:hover .room-card-new-plus svg { background: var(--ui-accent-hover); }
.app-layout .app-content .room-card-new-label { font-size: 15px; line-height: 20px; font-weight: 600; letter-spacing: -.005em; color: var(--ui-ink); }
.app-layout .app-content .room-card-new-meta { margin-top: 2px; font-size: 13px; line-height: 18px; color: var(--ui-ink-2); }
/* Select mode: the system's buttons, the bar a white group */
.app-layout .app-content .room-card-select { border-radius: 999px; }
.app-layout .app-content .rooms-select-bar { border: 0; border-radius: var(--ui-r-group); background: var(--ui-group); box-shadow: 0 0 0 1px var(--ui-edge); }
.app-layout .app-content .rooms-sel-btn { height: 32px; padding: 0 12px; border: 0; border-radius: var(--ui-r-ctl); background: var(--ui-fill); color: var(--ui-ink); font-size: 14px; font-weight: 600; }
.app-layout .app-content .rooms-sel-btn:hover { background: var(--ui-fill-2); border: 0; }
.app-layout .app-content .rooms-sel-btn.ghost { background: transparent; color: var(--ui-ink-2); }
.app-layout .app-content .rooms-sel-btn.ghost:hover { background: var(--ui-fill); color: var(--ui-ink); }
.app-layout .app-content .rooms-sel-btn.danger { background: var(--ui-danger); color: #fff; border: 0; }
.app-layout .app-content .rooms-sel-btn.danger:not(:disabled):hover { background: #b91c1c; color: #fff; }

/* Partners on the dashboard: a grouped list */
.app-content #dashboardFriendsCard .dashboard-rooms-header { margin-bottom: 14px; }

/* The page's column: 1440 px at most, centred in the window, so rows and
   tiles keep their proportions on a large display (Alex, 26/10: every
   screen size). The scroll box stays the window's width. */
.app-layout .app-content { padding-inline: max(36px, calc((100% - 1440px) / 2)); }
/* A room's page runs edge to edge (.rv-wrapper's -36 px margins): it keeps
   the 36 px it was drawn for. */
@media (min-width: 961px) { .app-layout .app-content:has(.rv-wrapper) { padding-inline: 36px; } }
@media (max-width: 960px), (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) { .app-layout .app-content { padding-inline: 16px; } }
/* The bell follows the column's right edge once the window is wider than
   the column (it was alone in the corner of a 2560 display). */
@media (min-width: 961px) { .app-layout .notif-wrap { right: max(18px, calc((100vw - var(--sidebar-w, 248px) - 1440px) / 2)); } }

/* Touch: 44 px targets in the sidebar and its drawer (a mouse keeps the
   compact rows). */
@media (pointer: coarse) {
  .app-layout .nav-link { min-height: 44px; }
  .app-layout :is(.nav-link-room, .sidebar-folder-header) { min-height: 40px; }
  .app-layout .sidebar-create-room { height: 44px; }
  .app-layout :is(.theme-toggle, .btn-logout, .menu-toggle) { width: 44px; height: 44px; }
}

/* ---- 5. Phones ----------------------------------------------------------- */
@media (max-width: 600px) {
  .app-content .dashboard-welcome { font-size: 26px; line-height: 32px; }
  .app-content .home-cal-ev-body { grid-template-columns: 76px minmax(0, 1fr) auto; gap: 12px; }
  .app-content .home-cal-join { grid-column: 3; }
  .app-content .dash-now-row { flex-wrap: wrap; gap: 8px 12px; padding: 12px 14px; }
  .app-content .dash-now-text { flex-basis: calc(100% - 22px); }
  .app-content .dash-now-join { margin-left: 20px; }
  /* Rooms: one per line, the preview on the left */
  .app-layout .app-content .rooms-grid-v2 { grid-template-columns: minmax(0, 1fr); gap: 14px; }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2 {
    display: grid; grid-template-columns: 120px minmax(0, 1fr); grid-template-areas: "icon name" "icon meta" "icon join";
    column-gap: 14px; row-gap: 2px; align-items: center; min-height: 0; padding: 0; border: 0; background: transparent;
  }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2 .room-card-v2-icon { grid-area: icon; width: 120px; margin: 0; align-self: center; }
  /* The name is what tells rooms apart: two lines before it is cut. */
  .app-layout .app-content .rooms-grid-v2 .room-card-v2-name {
    grid-area: name; padding-right: 72px; align-self: end;
    white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2-date { display: block; grid-area: meta; margin: 0; align-self: start; }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-status { grid-area: meta; margin: 0; }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2:is(.is-live, [data-live="1"]) .room-card-v2-date { display: none; }
  .app-layout .app-content .rooms-grid-v2 .room-card-v2-join { grid-area: join; margin: 4px 0 0; }
  .app-layout .app-content .rooms-grid-v2 .room-card-menu-btn, .app-layout .app-content .rooms-grid-v2 .room-card-share-btn { top: 50%; margin-top: -14px; }
  .app-layout .app-content #roomsGridV2 .room-card-new { grid-column: 1 / -1; display: grid; grid-template-columns: 120px minmax(0, 1fr); align-items: center; column-gap: 14px; padding: 0; }
  .app-layout .app-content #roomsGridV2 .room-card-new-plus { width: 120px; height: auto; border-radius: var(--ui-r-group); }
  .app-content .dashboard-welcome, .app-content .dashboard-date { text-align: left; }
  /* Two folders a row on a phone, a little tighter. */
  .app-content .folder-shelf { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  .app-content .folder-tile { column-gap: 10px; min-height: 52px; padding: 7px 10px; }
  .app-content .home-cal-ev, .app-content .home-cal-ev.is-link { padding: 10px 12px; }
  .app-content .home-cal-ev-item + .home-cal-ev-item::before { left: 100px; right: 0; }
  /* A calendar's row keeps its chevron on its line; its mark goes (the row
     is narrow, the title needs the room), the title may take two lines. */
  .app-content .home-cal-ev.dcal-ev { flex-wrap: nowrap; }
  .app-content .home-cal-ev.dcal-ev > .home-cal-ev-body { flex: 1 1 auto; min-width: 0; }
  .app-content .dcal-ev-logo { display: none; }
  .app-content .home-cal-ev-title { white-space: normal; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
  /* The rooms' utilities as icons: New folder keeps its words for the ear. */
  .app-content .folder-shelf-new > span { position: absolute; width: 1px; height: 1px; margin: -1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
  .app-content .folder-shelf-new { width: 32px; padding: 0; justify-content: center; }
  /* The trial and demo lines start where the greeting starts. */
  .app-content .dash-notices > * { justify-content: flex-start; text-align: left; max-width: none; margin: 0; }
  .app-content .dash-notices .beta-banner-offer { justify-content: flex-start; }
  /* An agenda row keeps two lines on a phone: the time over its day, the
     title over its details. */
  .app-content .home-cal-ev, .app-content .home-cal-ev.is-link { min-height: 60px; }
  .app-content .home-cal-ev-body { align-items: start; }
  .app-content .home-cal-ev-time { flex-direction: column-reverse; align-items: flex-start; gap: 0; }
  .app-content .home-cal-ev-main { flex-direction: column; align-items: stretch; gap: 0; }
  .app-content .home-cal-ev-room { flex: none; }
  .app-content :is(.dcal-ev-side, .home-cal-ev-body) > :is(.home-cal-prep, .home-cal-join:not(.is-open), .dcal-ev-chev) { min-width: 0; }
}

/* ---- 6. Partners on the dashboard ---------------------------------------- */
.app-content .dash-partners-manage {
  margin-left: auto; display: inline-flex; align-items: center; height: 32px; padding: 0 8px; border-radius: var(--ui-r-ctl);
  font-size: 14px; font-weight: 600; color: var(--ui-accent-text); text-decoration: none;
}
.app-content .dash-partners-manage:hover { background: var(--ui-fill); }
.app-content .dash-people {
  margin: 0; padding: 0; list-style: none; background: var(--ui-group); border-radius: var(--ui-r-group);
  box-shadow: 0 0 0 1px var(--ui-edge); overflow: hidden;
}
.app-content .dash-person { position: relative; }
.app-content .dash-person + .dash-person::before {
  content: ""; position: absolute; top: 0; left: 56px; right: 0; height: 1px; background: var(--ui-sep);
}
.app-content .dash-person.is-request,
.app-content .dash-person-link {
  display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 12px 8px 16px; color: inherit; text-decoration: none;
}
.app-content .dash-person-link:hover { background: color-mix(in srgb, var(--ui-group) 94%, var(--ui-ink)); }
.app-content .dash-person-face {
  display: grid; place-items: center; width: 28px; height: 28px; flex: none; overflow: hidden; border-radius: 999px;
  background: var(--ui-accent); color: #fff; font-size: 13px; font-weight: 700;
}
.app-content .dash-person-face img { width: 100%; height: 100%; object-fit: cover; }
.app-content .dash-person-main { display: flex; flex-direction: column; flex: 1; min-width: 0; }
.app-content .dash-person-main b { font-size: 15px; font-weight: 600; color: var(--ui-ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content .dash-person-main span { font-size: 13px; color: var(--ui-ink-2); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.app-content .dash-person-acts { display: flex; gap: 6px; flex: none; }
.app-content .dash-person.is-more a { display: flex; align-items: center; min-height: 44px; padding: 0 16px 0 56px; font-size: 14px; font-weight: 600; color: var(--ui-accent-text); text-decoration: none; }
.app-content .dash-btn {
  display: inline-flex; align-items: center; justify-content: center; height: 32px; padding: 0 12px; border: 0;
  border-radius: var(--ui-r-ctl); background: var(--ui-fill); color: var(--ui-ink); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; text-decoration: none;
}
.app-content .dash-btn:hover { background: var(--ui-fill-2); }
.app-content .dash-btn.is-accent { color: var(--ui-accent-text); }
.app-content .dash-partners-empty {
  display: flex; align-items: center; gap: 14px; min-height: 56px; padding: 10px 12px 10px 16px;
  background: var(--ui-group); border-radius: var(--ui-r-group); box-shadow: 0 0 0 1px var(--ui-edge);
}
.app-content .dash-partners-empty p { flex: 1; min-width: 0; margin: 0; font-size: 14px; color: var(--ui-ink-2); }
.app-content .dash-partners-empty b { color: var(--ui-ink); font-weight: 700; }
.app-content .dash-now-join.is-open { background: var(--ui-fill); color: var(--ui-ink); font-weight: 600; }
.app-content .dash-now-join.is-open:hover { background: var(--ui-fill-2); color: var(--ui-ink); }
/* The folder's × only under the pointer: style_app.css also shows it on
   every open folder (.sidebar-folder:not(.is-collapsed), 0,3,0). */
.app-layout .sidebar-folder > .sidebar-folder-delete,
.app-layout .sidebar-folder:not(.is-collapsed) > .sidebar-folder-delete { opacity: 0; pointer-events: none; }
.app-layout .sidebar-folder:hover > .sidebar-folder-delete,
.app-layout .sidebar-folder > .sidebar-folder-delete:focus-visible { opacity: 1; pointer-events: auto; color: var(--ui-ink-3); }
.app-layout .sidebar-folder > .sidebar-folder-delete:hover { color: var(--ui-danger-text); background: var(--ui-fill); }
@media (max-width: 600px) {
  .app-content .dash-person.is-request { flex-wrap: wrap; }
  .app-content .dash-person.is-request .dash-person-main { flex-basis: calc(100% - 40px); }
  .app-content .dash-person.is-request .dash-person-acts { margin-left: 40px; }
}

/* ---- 7. A room's preview: its board, in miniature (room-previews.js) ----- */
.app-layout .app-content .room-card-v2-icon.has-preview { font-size: 0; }
/* An empty board is the board, not a letter: its dots on the board's grey. */
.app-layout .app-content .room-card-v2-icon.is-blank {
  font-size: 0;
  background-color: var(--ui-board, #ececf0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E");
}
[data-theme="dark"] .app-layout .app-content .room-card-v2-icon.is-blank {
  background-color: #18191c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23fff' fill-opacity='.07'/%3E%3C/svg%3E");
}
.room-preview {
  position: absolute; inset: 0; overflow: hidden;
  background-color: var(--ui-board, #ececf0);
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23000' fill-opacity='.08'/%3E%3C/svg%3E");
  pointer-events: none;
}
[data-theme="dark"] .room-preview {
  background-color: #18191c;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='8' height='8'%3E%3Ccircle cx='1' cy='1' r='.6' fill='%23fff' fill-opacity='.07'/%3E%3C/svg%3E");
}
.room-preview .rp-stage { position: absolute; left: 0; top: 0; transform-origin: 0 0; }
.room-preview .rp-box { position: absolute; overflow: hidden; font-family: var(--sans, Manrope, sans-serif); color: #1d1f2b; line-height: 1.3; }
.room-preview .rp-title { font-weight: 800; letter-spacing: -.02em; white-space: normal; }
.room-preview .rp-text, .room-preview .rp-card, .room-preview .rp-poll {
  background: #fff; border-radius: 12px; box-shadow: 0 0 0 1.5px rgba(29, 31, 43, .10); padding: 14px 16px; font-size: 20px;
}
.room-preview .rp-poll { padding: 18px 20px; }
.room-preview .rp-poll-q { font-size: 20px; font-weight: 700; margin-bottom: 14px; }
.room-preview .rp-poll-o { display: flex; align-items: center; gap: 12px; margin-top: 18px; font-size: 18px; }
.room-preview .rp-poll-r { width: 18px; height: 18px; flex: none; border-radius: 999px; box-shadow: inset 0 0 0 2px #9a9fae; }
.room-preview .rp-image { border-radius: 8px; background: #e2e3e8; }
.room-preview .rp-image img { width: 100%; height: 100%; object-fit: cover; display: block; }
.room-preview .rp-panel { border-radius: 18px; background: rgba(29, 31, 43, .04); }
.room-preview .rp-shape { border-radius: 10px; background: rgba(99, 102, 241, .14); }
.room-preview .rp-embed { display: grid; place-items: center; border-radius: 12px; background: #2b2c33; color: rgba(255, 255, 255, .7); font-size: 22px; font-weight: 700; }
[data-theme="dark"] .room-preview .rp-box { color: #eceef3; }
[data-theme="dark"] .room-preview .rp-text, [data-theme="dark"] .room-preview .rp-card, [data-theme="dark"] .room-preview .rp-poll { background: #26272b; box-shadow: 0 0 0 1.5px rgba(255, 255, 255, .08); }
[data-theme="dark"] .room-preview .rp-image { background: #2b2b30; }
[data-theme="dark"] .room-preview .rp-panel { background: rgba(255, 255, 255, .04); }

/* The phone's menu button: an icon, no box */
.app-layout .menu-toggle {
  display: none; place-items: center; width: 40px; height: 40px; padding: 0; border: 0; border-radius: var(--ui-r-ctl);
  background: transparent; box-shadow: none; color: var(--ui-ink);
}
.app-layout .menu-toggle:hover { background: var(--ui-fill); }
/* Same breakpoint as the sidebar's own (style_app.css, 960 since 26/10 as in
   the approved mock: an iPad upright gets the drawer, not a 248 px column). */
@media (max-width: 960px), (orientation: landscape) and (max-height: 500px) and (max-width: 1023px) { .app-layout .menu-toggle { display: grid; } }