:root {
  color-scheme: dark;
  --bg: #030303;
  --panel: #0b0b0e;
  --panel-alt: #101015;
  --panel-pop: #14141c;
  --line: rgba(255, 255, 255, 0.1);
  --line-subtle: rgba(255, 255, 255, 0.07);
  --line-strong: rgba(255, 255, 255, 0.18);
  --text: #ffffff;
  --muted: #8d8d96;
  --soft: #c5c5ce;
  --gold: #ffc400;
  --gold-glow: rgba(255, 196, 0, 0.18);
  --gold-tint: rgba(255, 196, 0, 0.08);
  --green: #10b981;
  --blue: #38bdf8;
  --purple: #a855f7;
  --rose: #fb7185;
  --font: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;
  --sidebar-w: 240px;
}
* { box-sizing: border-box; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font);
  overflow: hidden;
  height: 100vh;
  user-select: none;
}

/* ========================================================
   TOP HEADER
   ======================================================== */
.top {
  height: 60px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 12px;
  background: #060608;
  z-index: 30;
  position: relative;
}

.top-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  color: #fff;
  text-decoration: none;
  font-weight: 850;
  font-size: 1.02rem;
  letter-spacing: -0.02em;
}
.brand-icon {
  width: 34px;
  height: 34px;
  border-radius: 8px;
  object-fit: cover;
  box-shadow: 0 0 12px rgba(255, 196, 0, 0.4);
  border: 1px solid rgba(255, 196, 0, 0.5);
}

.workspace-launcher-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #0f1016;
  border: 1px solid var(--line);
  padding: 6px 12px;
  border-radius: 8px;
  color: #ddd;
  font-size: 0.78rem;
  font-weight: 800;
  cursor: pointer;
  transition: all 0.15s;
}
.workspace-launcher-btn:hover, .workspace-launcher-btn.active {
  background: #191a24;
  border-color: rgba(255,196,0,0.4);
  color: #fff;
}
.waffle-icon {
  display: grid;
  grid-template-columns: repeat(3, 3px);
  gap: 2px;
}
.waffle-icon span {
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 1px;
}

.app-tabs {
  display: flex;
  gap: 4px;
  background: rgba(255,255,255,0.04);
  padding: 3px;
  border-radius: 9px;
  border: 1px solid var(--line);
  margin-left: 6px;
}
.app-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 12px;
  font-size: 0.78rem;
  font-weight: 750;
  color: var(--muted);
  background: transparent;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  transition: all 0.15s ease;
}
.app-tab:hover { color: #fff; }
.app-tab.active {
  background: var(--gold);
  color: #111;
  box-shadow: 0 2px 8px rgba(255,196,0,0.25);
}
.app-tab .pill-badge {
  font-size: 0.65rem;
  padding: 1px 5px;
  border-radius: 99px;
  background: rgba(0,0,0,0.25);
  font-weight: 800;
}
.app-tab.active .pill-badge {
  background: rgba(0,0,0,0.35);
  color: #fff;
}

.top-search-wrap {
  margin-left: auto;
  position: relative;
  width: min(280px, 100%);
}
.top-search {
  width: 100%;
  background: #0d0d12;
  border: 1px solid var(--line);
  border-radius: 8px;
  color: #fff;
  padding: 7px 12px 7px 30px;
  font-size: 0.78rem;
  outline: none;
}
.top-search:focus {
  border-color: var(--gold);
  box-shadow: 0 0 0 2px rgba(255,196,0,0.15);
}
.search-icon {
  position: absolute;
  left: 9px;
  top: 50%;
  transform: translateY(-50%);
  color: #666;
  font-size: 0.75rem;
  pointer-events: none;
}

.top-right-group {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 6px;
}
.avatar-btn {
  display: flex;
  align-items: center;
  gap: 8px;
  background: transparent;
  border: 0;
  padding: 4px;
  border-radius: 99px;
  cursor: pointer;
  position: relative;
}
.avatar-circle {
  /* The dashboard's tile, copied rather than approximated: same 36px, same
     11px radius, same hairline gold rim, same translucent gold wash behind
     gold initials. It was a solid gold gradient with dark text and a glow,
     which read as a brand chip rather than as a person, and matched nothing
     else in the suite. */
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(255,205,45,.28); border-radius: 11px;
  background: rgba(255,196,0,.07); color: #ffd744;
  font-size: .72rem; font-weight: 900;
  position: relative;
}
.avatar-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 9px;
  height: 9px;
  background: var(--green);
  border-radius: 50%;
  border: 2px solid #060608;
}

/* .chat-toggle-btn is gone from the top bar: Chatter is a permanent panel,
   so the unread count sits in its own header instead. */
.chat-badge {
  background: #ef4444;
  color: #fff;
  font-size: 0.62rem;
  font-weight: 900;
  padding: 1px 5px;
  border-radius: 99px;
  border: 2px solid #060608;
}

/* ========================================================
   POPUP MENU: WORKSPACE LAUNCHER
   ======================================================== */
.workspace-popover {
  position: absolute;
  top: 64px;
  left: 170px;
  width: 320px;
  background: #0a0b10;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.85);
  padding: 18px;
  z-index: 100;
  display: none;
}
.workspace-popover.open { display: block; }
.launcher-title {
  font-size: 0.75rem;
  font-weight: 900;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.08em;
  margin-bottom: 14px;
}
.app-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px 8px;
  margin-bottom: 18px;
  text-align: center;
}
.app-tile {
  background: transparent;
  border: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  padding: 6px 2px;
  border-radius: 8px;
  transition: transform 0.1s;
}
.app-tile:hover { transform: translateY(-2px); }
.app-tile:hover .tile-icon { filter: brightness(1.2); }
.tile-icon {
  width: 48px;
  height: 48px;
  border-radius: 12px;
  display: grid;
  place-items: center;
  font-size: 1.3rem;
  border: 1px solid;
  position: relative;
  background: #0e0f17;
  box-shadow: inset 0 0 12px rgba(255,255,255,0.05);
}
.tile-icon.purple { border-color: rgba(168,85,247,0.7); box-shadow: 0 0 14px rgba(168,85,247,0.3); color: #c084fc; }
.tile-icon.amber { border-color: rgba(245,158,11,0.7); box-shadow: 0 0 14px rgba(245,158,11,0.3); color: #fbbf24; }
.tile-icon.cyan { border-color: rgba(6,182,212,0.7); box-shadow: 0 0 14px rgba(6,182,212,0.3); color: #67e8f9; }
.tile-icon.ruby { border-color: rgba(244,63,94,0.7); box-shadow: 0 0 14px rgba(244,63,94,0.3); color: #fb7185; }
.tile-icon.neon-blue { border-color: rgba(59,130,246,0.7); box-shadow: 0 0 14px rgba(59,130,246,0.3); color: #93c5fd; }
.tile-icon.gold { border-color: rgba(255,196,0,0.8); box-shadow: 0 0 16px rgba(255,196,0,0.35); color: #ffd744; }
.tile-label { font-size: 0.68rem; color: #ccc; font-weight: 700; }

.launcher-section {
  border-top: 1px solid var(--line);
  padding-top: 12px;
  margin-top: 12px;
}
.launcher-section-title {
  font-size: 0.68rem;
  color: #888;
  font-weight: 800;
  margin-bottom: 8px;
}
.btn-group { display: flex; gap: 6px; }
.btn-toggle {
  background: #111219;
  border: 1px solid var(--line);
  color: #bbb;
  padding: 5px 12px;
  border-radius: 6px;
  font-size: 0.72rem;
  font-weight: 750;
  cursor: pointer;
  flex: 1;
}
.btn-toggle.active {
  background: #1e202e;
  border-color: rgba(255,196,0,0.5);
  color: var(--gold);
}

/* ========================================================
   POPUP MENU: USER PROFILE & SETTINGS
   ======================================================== */
.profile-popover {
  position: absolute;
  top: 64px;
  right: 60px;
  left: auto;
  width: 290px;
  background: #0d0e14;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  box-shadow: 0 20px 50px rgba(0,0,0,0.9);
  padding: 18px;
  z-index: 100;
  display: none;
}
.profile-popover.open { display: block; }
.profile-user-hdr {
  display: flex;
  gap: 12px;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
  margin-bottom: 12px;
}
.profile-user-name { font-size: 0.88rem; font-weight: 850; color: #fff; }
.profile-user-email { font-size: 0.72rem; color: var(--muted); }
.quota-box {
  background: #07070a;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 10px;
  margin-bottom: 12px;
}
.quota-label {
  display: flex;
  justify-content: space-between;
  font-size: 0.68rem;
  color: #aaa;
  font-weight: 700;
  margin-bottom: 6px;
}
.quota-bar {
  height: 6px;
  background: rgba(255,255,255,0.08);
  border-radius: 99px;
  overflow: hidden;
}
.quota-fill {
  height: 100%;
  width: 28%;
  background: linear-gradient(90deg, var(--gold), #ff8c00);
}
.profile-menu-item {
  width: 100%;
  background: transparent;
  border: 0;
  text-align: left;
  padding: 8px 10px;
  color: #ddd;
  font-size: 0.76rem;
  font-weight: 600;
  border-radius: 6px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 8px;
}
.profile-menu-item:hover { background: rgba(255,255,255,0.05); color: #fff; }

/* ========================================================
   CONNECTED ACCOUNTS (IMAP / POP3)
   ======================================================== */
.acct-provider-row { display:flex; gap:6px; flex-wrap:wrap; margin-bottom:4px; }
.acct-provider {
  border: 1px solid var(--line); background: #101017; color: #cfd4e0;
  border-radius: 8px; padding: 7px 11px; font-size: 0.74rem; font-weight: 700;
  cursor: pointer; transition: all .15s;
}
.acct-provider:hover { background: #191a24; color: #fff; }
.acct-provider.on { background: var(--gold-tint); border-color: rgba(255,196,0,.45); color: #ffd744; }
.acct-note {
  font-size: 0.72rem; color: #7d8494; line-height: 1.5; margin: 10px 2px 4px;
  padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  background: rgba(255,255,255,.02);
}
.acct-note b { color: #cfd4e0; }
.acct-hint { font-size: 0.68rem; color: #6a707e; margin: 4px 2px 0; line-height: 1.45; }

  /* Migration drain state. Four tones, all readable on the console's dark
     panel, and none of them relying on colour alone - each carries a word. */
  .acct-drain { display:flex; flex-wrap:wrap; align-items:center; gap:8px;
    margin-top:6px; padding:6px 8px; border-radius:6px; font-size:12px;
    background:rgba(255,255,255,.03); border:1px solid rgba(255,255,255,.07); }
  .acct-drain-badge { font-weight:700; letter-spacing:.05em; font-size:10px;
    padding:2px 6px; border-radius:4px; white-space:nowrap; }
  .acct-drain-text { color:#cfd4e0; }
  .acct-drain-counts { color:#8b949e; }
  .acct-drain-safe { border-color:rgba(63,185,80,.45);
    background:rgba(63,185,80,.10); }
  .acct-drain-safe .acct-drain-badge { color:#fff; background:#2f7d3a; }
  .acct-drain-near { border-color:rgba(255,196,0,.40);
    background:rgba(255,196,0,.08); }
  .acct-drain-near .acct-drain-badge { color:#1a1a1a; background:#ffc400; }
  .acct-drain-busy { border-color:rgba(96,160,255,.35);
    background:rgba(96,160,255,.07); }
  .acct-drain-busy .acct-drain-badge { color:#cfe0ff; background:#2b4c86; }
  .acct-drain-bad { border-color:rgba(248,113,113,.45);
    background:rgba(248,113,113,.09); }
  .acct-drain-bad .acct-drain-badge { color:#fff; background:#b33a3a; }
  .acct-drain-idle { }

  .acct-list { display:flex; flex-direction:column; gap:8px; margin: 4px 0 2px; }
.acct-item {
  display:flex; align-items:center; gap:12px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 10px; background: #0f0f14;
}
.acct-item-main { flex:1; min-width:0; }
.acct-item-label { font-size: 0.83rem; font-weight: 750; color: #fff; }
.acct-item-sub {
  font-size: 0.72rem; color: #7d8494; margin-top: 2px;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.acct-pill {
  font-size: 0.62rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .05em; padding: 3px 8px; border-radius: 5px;
  background: rgba(255,255,255,.07); color: #b6bdcb;
}
.acct-pill.live  { background: rgba(16,185,129,.16); color: #34d399; }
.acct-pill.never { background: rgba(255,255,255,.06);  color: #7d8494; }
.acct-pill.err   { background: rgba(239,68,68,.16);  color: #f87171; }
.acct-empty { font-size: 0.78rem; color: #6d7383; padding: 12px 2px; line-height: 1.6; }
.acct-test-row {
  display:flex; align-items:center; gap:10px; margin-top: 12px;
  padding-top: 12px; border-top: 1px solid var(--line);
}
.acct-test-btn {
  background: #101017; border: 1px solid var(--line); color: #d6dbe6;
  border-radius: 8px; padding: 8px 14px; font-size: 0.76rem; font-weight: 650;
  cursor: pointer; white-space: nowrap;
}
.acct-test-btn:hover { background: #191a24; color: #fff; }
.acct-test-out { font-size: 0.74rem; color: #8a91a1; line-height: 1.45; flex:1; }
.acct-test-out.ok  { color: #34d399; }
.acct-test-out.bad { color: #f87171; }
.acct-grid-2 {
  display:grid; grid-template-columns: 1fr 1fr; gap: 0 14px;
  border-bottom: 1px solid var(--line);
}
.acct-grid-2 > .form-grid { border-bottom: 0; }
.acct-toggle {
  display:flex; align-items:center; gap:9px; margin: 12px 0 2px;
  font-size: 0.78rem; color: #cfd4e0;
}
.acct-toggle input { accent-color: var(--gold); width: 15px; height: 15px; }
.acct-sect {
  font-size: 0.66rem; font-weight: 800; text-transform: uppercase;
  letter-spacing: .08em; color: #5c6270; margin: 16px 0 2px;
}
.acct-sect:first-of-type { margin-top: 6px; }



/* ========================================================
   CHAT SLIDE-OVER DRAWER
   ======================================================== */
/* The fourth column of .mail-layout. Always visible: Chatter is a core part
   of the package, not a drawer that slides over the mail.

   Was position:fixed and toggled with display:none, which covered the
   message list whenever it opened. */
.chat-drawer {
  grid-column: 4;
  min-height: 0;
  min-width: 0;
  overflow: hidden;
  background: #08080d;
  border-left: 1px solid var(--line-strong);
  display: flex;
  flex-direction: column;
}
.chat-hdr {
  height: 48px;
  padding: 0 16px;
  display: flex;
  justify-content: space-between;
  align-items: center;
  border-bottom: 1px solid var(--line);
  background: #0a0b12;
  font-size: 0.82rem;
  font-weight: 850;
}
/* Icon + wordmark on the left, unread count hard right. */
.chat-hdr-brand {
  display: flex;
  align-items: center;
  gap: 8px;
}
.chat-hdr-brand img {
  display: block;
  width: 20px;
  height: 20px;
}
/* The badge was absolutely positioned over the top-bar button. Inside the
   panel header it is a normal flex item, so margin-left:auto pushes it to
   the right edge without needing absolute positioning. */
.chat-hdr .chat-badge {
  position: static;
  margin-left: auto;
  top: auto;
  right: auto;
  flex: 0 0 auto;
  min-width: 20px;
  height: 20px;
  line-height: 20px;
  text-align: center;
  border-radius: 10px;
}
.chat-close-btn {
  background: none;
  border: 0;
  color: #888;
  font-size: 1.2rem;
  cursor: pointer;
}
.chat-close-btn:hover { color: #fff; }

.chat-users-list {
  flex: 1;
  overflow-y: auto;
  padding: 8px;
}
.chat-user-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.12s;
}
.chat-user-item:hover, .chat-user-item.active { background: #12131c; }
.chat-avatar-wrap { position: relative; width: 34px; height: 34px; }
.chat-avatar-circle {
  /* The dashboard's tile again, so a face in the list is framed exactly as a
     face beside Welcome is. */
  width: 36px; height: 36px; display: grid; place-items: center;
  border: 1px solid rgba(255,205,45,.28); border-radius: 11px;
  background: rgba(255,196,0,.07); color: #ffd744;
  font-size: .72rem; font-weight: 900;
  position: relative;
}
.chat-status-dot {
  position: absolute;
  bottom: 0;
  right: 0;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  border: 1.5px solid #08080d;
  background: var(--avail, #3f4250);
}

/* ------------------------------------------------------------
   AVAILABILITY, ONE CLASS PER ROW
   ------------------------------------------------------------
   A single state class on the row sets three custom properties, and the
   avatar tint, the presence dot and the name colour all read them. They
   cannot drift apart, which they did when each part was styled on its own
   -- the dot and the name could disagree about whether someone was here.

     --avail      the dot, and the avatar's border
     --avail-soft the avatar's fill, a low-contrast wash of --avail
     --avail-text the initials and the name

   Available is a soft green rather than a saturated one: a whole column of
   solid green avatars reads as a wall of alerts once there are more than a
   handful of people online. */
.state-available {
  --avail: #34d399;
  --avail-soft: rgba(52, 211, 153, 0.15);
  --avail-text: #34d399;
}
/* Fallback for a status phrase this build does not recognise. The person is
   present, so it reads as available rather than as an error state, and the
   phrase itself is still shown in the header and the tooltip. */
.state-online {
  --avail: #34d399;
  --avail-soft: rgba(52, 211, 153, 0.15);
  --avail-text: #34d399;
}
/* Free to chat is still available, so it stays green. The ring says "come and
   talk" without needing a second colour the eye has to learn. */
/* Free to chat is still available, so it stays green, and the ring is now
   strong enough to actually see at 8px rather than being a theoretical
   distinction. */
.state-chat {
  --avail: #4ade80;
  --avail-soft: rgba(74, 222, 128, 0.22);
  --avail-text: #4ade80;
}
.state-chat .chat-status-dot {
  width: 10px;
  height: 10px;
  right: -1px;
  bottom: -1px;
  border-width: 2px;
  box-shadow: 0 0 0 2px rgba(74, 222, 128, 0.28);
}

/* The speech bubble beside a name in the list, for someone who is free to
   talk. An addition to the name, not a replacement, and it takes the status
   colour so it reads as part of the same state rather than a stray mark. */
.chat-user-badge {
  display: inline-flex;
  align-items: center;
  margin-left: 5px;
  vertical-align: -1px;
  color: var(--avail-text, #4ade80);
}

/* An avatar showing its status icon instead of initials.

   The icon is drawn at avatar scale rather than badge scale, because it is the
   content of the circle rather than a marker on it. It inherits the status
   colour from the circle, so away is amber, busy is red. */
.chat-avatar-circle.has-status .chat-status-icon {
  width: 17px;
  height: 17px;
}
/* An absent colleague is dimmed a little further than the tint alone does:
   initials were the useful part of this circle and they are gone. */
.chat-avatar-circle.has-status {
  background: var(--avail-soft, rgba(255, 255, 255, 0.04));
}
.state-away {
  --avail: #fbbf24;
  --avail-soft: rgba(251, 191, 36, 0.14);
  --avail-text: #fbbf24;
}
/* Busy is red rather than a darker amber: away is reachable later, busy means
   do not interrupt, and the two are told apart by hue rather than by
   brightness. */
.state-busy {
  --avail: #f87171;
  --avail-soft: rgba(248, 113, 113, 0.15);
  --avail-text: #f87171;
}
.state-offline {
  --avail: #3f3f4d;
  --avail-soft: rgba(255, 255, 255, 0.04);
  --avail-text: #7d7d8a;
}
.state-unknown {
  --avail: #2b2d38;
  --avail-soft: rgba(255, 255, 255, 0.03);
  --avail-text: #6b6b78;
}

/* The avatar takes a wash of the state colour rather than a flat fill, so an
   available person reads as tinted-but-calm and a busy one as tinted-hot. */
.chat-avatar-circle {
  /* Availability is a hairline rim and nothing else.
     It used to wash the whole tile green, grey, amber or purple, which is
     a second, competing colour on a row that already says availability three
     ways -- the rim, the name's weight and the presence dot. Washing the tile
     also meant no two avatars in the list looked alike, and matching the
     dashboard meant the tile itself had to be the same for everyone. */
  border-color: color-mix(in srgb, var(--avail, var(--line)) 45%, transparent);
}
/* Available and free-to-chat get the bolder name: the whole point of the list
   is scanning it for who can be reached. Away and busy stay legible but do
   not compete for that first glance. */
.state-available .chat-user-name,
.state-chat .chat-user-name { font-weight: 800; }
.state-unknown .chat-user-name,
.state-offline .chat-user-name { font-weight: 600; }
/* "Not known yet" stays hollow rather than grey-filled, so it never claims a
   fact it does not have. */
.state-unknown .chat-status-dot {
  background: transparent;
  border-color: #3f4250;
  width: 7px;
  height: 7px;
}
/* The presence dot's colours used to live here as .status-online,
   .status-away, .status-offline, .status-unknown, .status-busy and
   .status-chat. They are gone because nothing emitted them any more, and a
   dead rule is worse than no rule: it looks like the dot is styled when
   actually the .state-* classes on the row are. The dot reads --avail. */

/* The conversation header's status line is display only: it describes the
   other person, and a self-conversation cannot be opened. Your own status is
   changed from your own row in the list. */

/* The availability picker itself.

   position:fixed and attached to the document, not absolute inside the
   Chatter panel. The panel is overflow:hidden and the conversation view is
   display:none until you open someone, so a menu parented inside either is
   clipped or invisible -- which is exactly how this failed the first time.
   Fixed positioning measured from the trigger escapes both. */
.chat-status-menu {
  position: fixed;
  z-index: 9999;
  min-width: 200px;
  max-width: 260px;
  padding: 4px;
  border-radius: 8px;
  border: 1px solid var(--line);
  background: #14141c;
  box-shadow: 0 10px 30px rgba(0, 0, 0, 0.55);
}
.chat-status-option {
  display: flex;
  align-items: center;
  gap: 9px;
  width: 100%;
  padding: 7px 9px;
  border: 0;
  border-radius: 5px;
  background: transparent;
  color: #d8d8e2;
  font: inherit;
  font-size: 0.8rem;
  text-align: left;
  cursor: pointer;
}
.chat-status-option:hover { background: rgba(255, 255, 255, 0.07); }
.chat-status-option.current { color: #fff; font-weight: 700; }
/* The colour is the point of the list: a native <select> cannot show it. */
.chat-status-swatch {
  width: 9px;
  height: 9px;
  flex: 0 0 9px;
  border-radius: 50%;
}

/* A status that has a picture of itself. Inline-flex so the icon and the
   label sit on one baseline rather than the label drifting under the icon. */
#convo-status.has-icon {
  display: inline-flex;
  align-items: center;
  gap: 5px;
}
.chat-status-icon {
  flex: 0 0 auto;
  /* currentColor: the icon takes the status colour rather than carrying its
     own, which is why these are paths and not emoji. */
  color: inherit;
}
/* The picker rows carry the same icon, so the choice and the result look
   identical. */
.chat-status-option .chat-status-icon { margin-left: -1px; }
.chat-user-item.is-self { cursor: pointer; }
.chat-user-item.is-self:hover .chat-avatar-circle {
  border-color: color-mix(in srgb, var(--avail, var(--line)) 85%, transparent);
}

.chat-status-divider {
  height: 1px;
  margin: 4px 2px 6px;
  background: var(--line);
}
.chat-status-custom { padding: 2px 2px 3px; }
.chat-status-input {
  width: 100%;
  padding: 7px 8px;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: #0d0d14;
  color: #e8e8f0;
  font: inherit;
  font-size: 0.78rem;
}
.chat-status-input:focus {
  outline: none;
  border-color: rgba(255, 196, 0, 0.5);
}
/* Three small colour choices rather than a second dropdown: the state is one
   of three, and picking it is quicker than opening a menu. */
.chat-status-states {
  display: flex;
  gap: 5px;
  margin-top: 6px;
}
.chat-status-chip {
  flex: 1;
  padding: 4px 0;
  border-radius: 5px;
  border: 1px solid var(--line);
  background: transparent;
  color: #9a9aab;
  font: inherit;
  font-size: 0.7rem;
  cursor: pointer;
}
.chat-status-chip.available.selected { color: #34d399; border-color: #34d399; }
.chat-status-chip.away.selected     { color: #fbbf24; border-color: #fbbf24; }
.chat-status-chip.busy.selected     { color: #f87171; border-color: #f87171; }
.chat-status-apply {
  width: 100%;
  margin-top: 6px;
  padding: 6px 0;
  border: 0;
  border-radius: 5px;
  background: var(--gold);
  color: #111;
  font: inherit;
  font-size: 0.75rem;
  font-weight: 800;
  cursor: pointer;
}
.chat-status-apply:hover { filter: brightness(1.08); }
.chat-user-info { flex: 1; min-width: 0; }
.chat-user-top { display: flex; justify-content: space-between; align-items: center; }
.chat-user-name {
  font-size: 0.78rem;
  /* Weight comes from the state class; colour from --avail-text, so an
     available person reads bold green and an offline one reads quiet grey
     from the same rule. */
  color: var(--avail-text, #eee);
  transition: color 0.15s ease;
}
.chat-last-time { font-size: 0.64rem; color: #666; }
.chat-user-preview {
  font-size: 0.68rem;
  color: var(--muted);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  margin-top: 2px;
}

.chat-convo-pane { display: none; flex-direction: column; height: 100%; }
.chat-convo-pane.active { display: flex; }
.chat-convo-hdr {
  padding: 10px 14px;
  background: #0d0e16;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  gap: 10px;
}
/* Back control: the hand-drawn arrow from mail.html.

   Because the arrow inherits currentColor, "grey at rest, gold on hover" is a
   plain colour change on the button -- no filter desaturating a bitmap, and no
   second image to keep in step with the first. */
.chat-back-btn {
  background: none;
  border: 0;
  cursor: pointer;
  padding: 4px;
  border-radius: 7px;
  display: grid;
  place-items: center;
  flex: none;
  color: #7f8496;
  transition: color 0.14s ease, background 0.14s ease;
}
.chat-back-icon {
  width: 15px;
  height: 15px;
  display: block;
  transition: transform 0.14s ease;
}
.chat-back-btn:hover {
  color: var(--gold);
  background: rgba(255,255,255,0.06);
}
/* Nudges left on hover, which is what makes it read as "go back" rather than
   just "a shape". */
.chat-back-btn:hover .chat-back-icon { transform: translateX(-1.5px); }
.chat-back-btn:active .chat-back-icon { transform: translateX(-2px) scale(0.94); }
.chat-back-btn:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
.chat-messages-box {
  flex: 1;
  overflow-y: auto;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.chat-bubble {
  max-width: 82%;
  padding: 8px 12px;
  border-radius: 10px;
  font-size: 0.76rem;
  line-height: 1.45;
  position: relative;
}
.chat-bubble.them {
  align-self: flex-start;
  background: #14151f;
  border: 1px solid var(--line);
  color: #eee;
  border-bottom-left-radius: 2px;
}
.chat-bubble.me {
  align-self: flex-end;
  background: linear-gradient(135deg, #ffc400, #ff9900);
  color: #111;
  font-weight: 600;
  border-bottom-right-radius: 2px;
}
.chat-time { font-size: 0.6rem; opacity: 0.7; margin-top: 3px; text-align: right; }

/* The hover picker floats above the bubble without changing its size or
   covering message text. Eight choices form a compact two-row grid. */
.chat-reaction-picker {
  display: none;
  position: absolute;
  z-index: 8;
  top: -48px;
  left: 0;
  width: max-content;
  max-width: min(208px, 88vw);
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 2px;
  margin: 0 0 6px;
  padding: 3px;
  border: 1px solid var(--line);
  border-radius: 9px;
  background: #151620;
  box-shadow: 0 5px 18px #0008;
}
.chat-bubble.me .chat-reaction-picker { left: auto; right: 0; }
.chat-bubble.me .chat-reaction-picker {
  background: #08090d;
  border-color: #725400;
}
.chat-bubble.me .chat-reaction-chip {
  background: #101116;
  border-color: #4b4e59;
  color: #f5f5f7;
}
.chat-bubble.me .chat-reaction-chip.mine { border-color: var(--gold); }
.chat-bubble:hover .chat-reaction-picker,
.chat-bubble:focus-within .chat-reaction-picker { display: grid; }
.chat-reaction-choice {
  border: 0;
  border-radius: 6px;
  background: transparent;
  padding: 4px 5px;
  font-size: 0.9rem;
  line-height: 1;
  cursor: pointer;
}
.chat-reaction-choice:hover,
.chat-reaction-choice:focus-visible { background: #ffffff20; outline: none; }
.chat-reaction-summary { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 4px; }
.chat-reaction-chip {
  border: 1px solid #ffffff30;
  border-radius: 999px;
  background: #12131c88;
  color: inherit;
  padding: 2px 7px;
  font-size: 0.68rem;
  cursor: pointer;
}
.chat-reaction-chip.mine { border-color: var(--gold); }
.chat-reaction-chip:hover { background: #ffffff22; }

/* Talk transcript hover bar (emoji + delete for organiser) */
.talk-hover-bar {
  display: none;
  position: absolute;
  right: -42px;
  top: 50%;
  transform: translateY(-50%);
  gap: 4px;
  background: #12131c;
  border: 1px solid var(--line);
  border-radius: 6px;
  padding: 3px 6px;
  opacity: 0;
  pointer-events: none;
}
.chat-bubble:hover .talk-hover-bar {
  display: flex !important;
  opacity: 1 !important;
  pointer-events: auto !important;
}
.talk-emoji-btn, .talk-delete-btn {
  background: none;
  border: 0;
  font-size: 0.85rem;
  cursor: pointer;
  padding: 2px 6px;
  border-radius: 4px;
  color: #ccc;
  line-height: 1;
}
.talk-emoji-btn:hover, .talk-delete-btn:hover {
  background: var(--gold);
  color: #111;
}
.talk-delete-btn { font-size: 0.75rem; }

.chat-input-bar {
  padding: 10px;
  border-top: 1px solid var(--line);
  background: #0a0b12;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.chat-input {
  flex: 1;
  background: #12131c;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  color: #fff;
  font-size: 0.76rem;
  outline: none;
}
.chat-input:focus { border-color: var(--gold); }
.chat-send-btn {
  background: var(--gold);
  border: 0;
  border-radius: 7px;
  color: #111;
  font-weight: 850;
  font-size: 0.76rem;
  padding: 0 12px;
  cursor: pointer;
}

.chat-input-controls {
  display: flex;
  align-items: stretch;
  gap: 8px;
  width: 100%;
}
.chat-input[hidden],
.chat-rich-editor-wrap[hidden] { display: none !important; }
.chat-rich-editor-wrap {
  width: 100%;
  min-width: 0;
  display: flex;
  flex-direction: column;
  border: 1px solid #34343e;
  border-radius: 8px;
  overflow: hidden;
  background: #15151c;
}
.chat-rich-toolbar {
  min-height: 34px;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 2px;
  padding: 3px 6px;
  overflow-x: hidden;
  background: #1c1c24;
  border-bottom: 1px solid #34343e;
}
.chat-rich-toolbar button {
  flex: 0 0 auto;
  min-width: 25px;
  height: 27px;
  padding: 0 5px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e8e8ef;
  font-size: 12px;
  cursor: pointer;
}
.chat-rich-toolbar button:hover { background: #32323c; }
.chat-rich-toolbar button#chat-attach-files-btn { display:grid; place-items:center; width:29px; min-width:29px; padding:0; color:#f2d05b; }
.chat-rich-toolbar button#chat-attach-files-btn .mail-modern-icon { width:15px; height:15px; flex:0 0 15px; }
.chat-rich-color,
.chat-rich-highlight {
  position: relative;
  display: grid;
  place-items: center;
  flex: 0 0 24px;
  width: 24px;
  height: 23px;
  color: #f2d05b;
  font-size: 13px;
  font-weight: 750;
  cursor: pointer;
}
.chat-rich-highlight { border-radius: 4px; background: #f0c629; color: #222; font-size: 10px; }
.chat-rich-toolbar input[type="color"] { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.chat-rich-sep { flex: 0 0 1px; height: 19px; margin: 0 3px; background: #41414b; }
.chat-rich-editor {
  min-height: 82px;
  max-height: 190px;
  overflow: auto;
  padding: 9px 10px;
  color: #f1f1f5;
  background: #17171e;
  font-size: .8rem;
  line-height: 1.45;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  outline: none;
}
.chat-rich-editor:focus { box-shadow: inset 0 0 0 1px rgba(255,196,0,.35); }
.chat-rich-hint { padding: 3px 9px 5px; color: #858592; background: #17171e; font-size: .62rem; text-align: right; }
.chat-composer-attachments { display:flex; flex-wrap:wrap; gap:6px; padding:7px 9px; background:#17171e; border-top:1px solid #30303a; }
.chat-composer-attachments[hidden] { display:none !important; }
.chat-file-chip { display:flex; align-items:center; gap:7px; max-width:240px; padding:5px 8px; color:#e8e8ef; background:#24242e; border:1px solid #454550; border-radius:7px; font-size:.68rem; }
.chat-file-chip img { width:22px; height:22px; object-fit:contain; }
.chat-file-chip .chat-file-type { width:22px; height:22px; display:grid; place-items:center; border-radius:5px; background:#353541; color:#f2d05b; font-size:8px; font-weight:800; }
.chat-file-chip-name { overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-file-chip-remove { border:0; background:transparent; color:#aaa; cursor:pointer; font-size:15px; line-height:1; padding:0 1px; }
.chat-file-chip-remove:hover { color:#fff; }
.chat-cloud-picker[hidden] { display:none !important; }
.chat-cloud-picker { position:fixed; inset:0; z-index:2000; display:grid; place-items:center; padding:18px; }
.chat-cloud-picker-shade { position:absolute; inset:0; background:rgba(0,0,0,.66); backdrop-filter:blur(3px); }
.chat-cloud-dialog { position:relative; display:flex; flex-direction:column; width:min(560px,100%); max-height:min(620px,85vh); overflow:hidden; color:#ededf2; background:#1b1b23; border:1px solid #42424e; border-radius:13px; box-shadow:0 24px 80px rgba(0,0,0,.55); }
.chat-cloud-header { display:flex; align-items:center; justify-content:space-between; padding:15px 17px; border-bottom:1px solid #353540; }
.chat-cloud-header strong,.chat-cloud-header small { display:block; }
.chat-cloud-header strong { font-size:.94rem; }
.chat-cloud-header small { margin-top:3px; color:#9999a5; font-size:.68rem; }
.chat-cloud-close { width:30px; height:30px; border:0; border-radius:7px; background:transparent; color:#aaa; font-size:22px; cursor:pointer; }
.chat-cloud-close:hover { background:#30303a; color:white; }
.chat-cloud-filters { display:flex; gap:8px; padding:11px 14px; border-bottom:1px solid #30303a; }
.chat-cloud-filters input,.chat-cloud-filters select { min-width:0; padding:8px 10px; color:#eee; background:#111117; border:1px solid #393944; border-radius:7px; font-size:.72rem; }
.chat-cloud-filters input { flex:1; }
.chat-cloud-list { min-height:130px; overflow:auto; padding:6px 10px; }
.chat-cloud-empty { padding:26px 12px; color:#9696a2; text-align:center; font-size:.75rem; }
.chat-cloud-row { display:flex; align-items:center; gap:10px; min-height:51px; padding:7px 9px; border-radius:7px; cursor:pointer; }
.chat-cloud-row:hover,.chat-cloud-row.selected { background:#292934; }
.chat-cloud-row input { accent-color:#f0c629; }
.chat-cloud-row img { width:31px; height:31px; object-fit:contain; }
.chat-cloud-row .chat-file-type { width:31px; height:31px; display:grid; place-items:center; border-radius:7px; background:#34343f; color:#f2d05b; font-size:9px; font-weight:850; }
.chat-cloud-row-copy { min-width:0; flex:1; }
.chat-cloud-row-copy strong,.chat-cloud-row-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-cloud-row-copy strong { color:#eee; font-size:.73rem; font-weight:650; }
.chat-cloud-row-copy small { margin-top:3px; color:#858592; font-size:.62rem; }
.chat-cloud-footer { display:flex; align-items:center; gap:8px; padding:11px 14px; border-top:1px solid #353540; }
.chat-cloud-footer span { flex:1; color:#9999a5; font-size:.67rem; }
.chat-cloud-footer button { padding:7px 11px; border:1px solid #464650; border-radius:7px; color:#ddd; background:#24242d; font-size:.68rem; cursor:pointer; }
.chat-cloud-footer button:hover:not(:disabled) { border-color:#777; color:#fff; }
.chat-cloud-footer button.chat-cloud-attach { color:#171717; background:#f0c629; border-color:#f0c629; font-weight:800; }
.chat-cloud-footer button:disabled { opacity:.45; cursor:default; }
.chat-message-files { display:flex; flex-direction:column; gap:6px; margin-top:8px; }
.chat-message-file { display:flex; align-items:center; gap:9px; min-width:0; padding:8px 10px; color:inherit; background:rgba(15,15,20,.45); border:1px solid rgba(255,255,255,.18); border-radius:8px; }
.chat-message-file img { width:30px; height:30px; object-fit:contain; flex:0 0 auto; }
.chat-message-file .chat-file-type { width:30px; height:30px; display:grid; place-items:center; flex:0 0 auto; border-radius:6px; background:rgba(0,0,0,.22); color:#ffe06a; font-size:9px; font-weight:850; }
.chat-message-file-copy { min-width:0; }
.chat-message-file-copy strong,.chat-message-file-copy small { display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.chat-message-file-copy strong { font-size:.72rem; }
.chat-message-file-copy small { margin-top:3px; color:rgba(255,255,255,.65); font-size:.61rem; }
.chat-rich-editor:empty::before { content: attr(data-placeholder); color: #858592; pointer-events: none; }
.chat-rich-editor ul,
.chat-rich-editor ol { padding-left: 22px; }
.chat-bubble-text { white-space: pre-wrap; overflow-wrap: anywhere; }
.chat-bubble-text p { margin: 0 0 4px; }
.chat-bubble-text p:last-child { margin-bottom: 0; }/* ========================================================
   APP VIEWS SHELL
   ======================================================== */
.app-view {
  height: calc(100vh - 60px);
  min-height: 0;
  display: none;
}
.app-view.active { display: grid; }

body.sidebar-hidden nav, body.sidebar-hidden .cal-sidebar, body.sidebar-hidden .kanban-sidebar {
  display: none !important;
}
body.sidebar-small { --sidebar-w: 190px; }
body.sidebar-medium { --sidebar-w: 240px; }
body.sidebar-large { --sidebar-w: 300px; }

/* ========================================================
   MAIL VIEW LAYOUT WITH PINNED & DRAG FOLDERS
   ======================================================== */
.mail-layout {
  /* Four columns, always. Chatter is a permanent part of the package rather
     than a panel behind a button, so it gets a column of its own and never
     overlays the mail list or the reading pane.

     Every track except the sidebar carries a FLOOR, and that floor is the whole
     fix. Written as `var(--sidebar-w) 340px 1fr 320px` the three fixed tracks
     added up to 240+340+320 = 900px, and the fourth -- the reading pane -- was
     the only flexible one, so on any window narrower than 900px the reader took
     the entire shortfall and became 0 pixels wide. Nothing was visibly wrong:
     the message list was still there, the toolbar was still there, and clicking
     a message opened it into a column that had no width at all. The symptom a
     person reports is "everything disappears".

     minmax() makes the other three give way before the reading pane does, so
     the message is always readable. Past the sum of the floors the tracks simply
     overflow and the far edge is clipped by overflow:hidden, which is a far
     better failure than losing the thing that was clicked. */
  grid-template-columns:
    var(--sidebar-w)
    minmax(220px, 340px)
    minmax(280px, 1fr)
    minmax(180px, 360px);
  min-height: 0;
  overflow: hidden;
}
.mail-layout > nav, .mail-layout > .list-col, .mail-layout > .reader-col {
  min-height: 0;
  overflow-y: auto;
  overscroll-behavior: contain;
}

nav {
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  background: #07070a;
  display: flex;
  flex-direction: column;
}
.primary-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  width: 100%;
  border: 0;
  border-radius: 9px;
  background: var(--gold);
  color: #111;
  padding: 10px;
  font-weight: 900;
  font-size: 0.82rem;
  cursor: pointer;
  margin-bottom: 12px;
}
.primary-btn:hover { opacity: 0.92; }

.nav-link {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  padding: 8px 10px;
  border: 0;
  border-radius: 7px;
  color: #ccc;
  background: transparent;
  font-size: 0.78rem;
  margin: 2px 0;
  text-align: left;
  cursor: pointer;
  transition: all 0.12s;
}
.nav-link:hover { background: rgba(255,255,255,0.05); color: #fff; }
.nav-link.active { background: var(--gold-tint); color: #ffd744; font-weight: 750; }
.nav-link .badge { color: #777; font-size: 0.7rem; font-weight: 700; }
.nav-link.active .badge { color: var(--gold); }

/* FOLDER DRAG-OVER HIGHLIGHT */
.folderdrop {
  background: rgba(255,196,0,0.18) !important;
  color: var(--gold) !important;
  outline: 1.5px dashed var(--gold) !important;
}

/* MAIL LIST COLUMN */
.list-col {
  border-right: 1px solid var(--line);
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.mail-toolbar {
  height: 44px;
  border-bottom: 1px solid var(--line);
  background: #09090c;
  display: flex;
  align-items: center;
  padding: 0 10px;
  gap: 4px;
  flex-shrink: 0;
  flex-wrap: nowrap;
  overflow: hidden;
}
.tool-btn {
  background: transparent;
  border: 1px solid transparent;
  color: #aaa;
  border-radius: 6px;
  padding: 4px 7px;
  font-size: 0.73rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  white-space: nowrap;
}
.tool-btn:hover { background: #161620; color: #fff; border-color: var(--line); }
.tool-btn.active {
  background: var(--gold-tint);
  border-color: rgba(255,196,0,0.4);
  color: var(--gold);
}
.tool-sep { width: 1px; height: 18px; background: var(--line); margin: 0 2px; flex-shrink: 0; }

/* The message-list actions stay as icon-only controls. Their title and
   aria-label carry the action name, so labels do not force a horizontal
   scrollbar below the folder toolbar. */
.mail-toolbar { gap: 2px; }
.mail-toolbar .tool-btn {
  width: 30px;
  min-width: 26px;
  height: 30px;
  flex: 0 1 30px;
  justify-content: center;
  gap: 0;
  padding: 0;
}
.mail-toolbar .tool-btn .mail-modern-icon {
  width: 16px;
  height: 16px;
  flex: 0 0 16px;
}

.select-all-wrap {
  display: flex;
  align-items: center;
  justify-content: center;
  flex: 0 0 22px;
  margin-right: 1px;
}
.select-all-wrap input[type="checkbox"] {
  accent-color: var(--gold);
  cursor: pointer;
  width: 16px;
  height: 16px;
  height: 14px;
}

.listhead {
  padding: 10px 16px;
  border-bottom: 1px solid var(--line);
  font-weight: 850;
  font-size: 0.8rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: rgba(11,11,14,0.6);
}

.messages-scroll {
  flex: 1;
  overflow-y: auto;
}

/* ========================================================
   DATE GROUPINGS & PINNED SECTION
   ======================================================== */
.dategroup {
  border-bottom: 1px solid var(--line);
}
.pinned-group {
  border-bottom: 2px solid rgba(255,196,0,0.3);
  background: rgba(255,196,0,0.015);
}
.dateheading {
  position: sticky;
  top: 0;
  z-index: 4;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 9px 14px;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: #09090b;
  color: #bbb;
  text-align: left;
  font-size: 0.66rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  cursor: pointer;
}
.pinned-heading {
  color: var(--gold) !important;
  background: #0e0e14 !important;
}
.dateheading:hover { color: #ffd744; }
.dateheading .chev { width: 12px; color: #777; }
.dateheading .groupcount { margin-left: auto; color: #666; font-weight: 800; font-size: 0.72rem; }
.dateitems.collapsed { display: none; }

.msg {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  border-bottom: 1px solid var(--line);
  background: transparent;
  color: #fff;
  padding: 12px 14px 12px 34px;
  cursor: pointer;
  transition: opacity 0.15s ease, background 0.12s ease;
  position: relative;
}
.msg:hover { background: rgba(255, 196, 0, 0.04); }
.msg.active {
  background: rgba(255, 196, 0, 0.08) !important;
  border-left: 3px solid var(--gold);
  padding-left: 31px;
}
/* .msg.selected lives further down, beside .msg.unread, where the comment
   explains why selection tints the row but does not give it the gold bar.
   There was a second copy of it here, byte-identical, which meant editing one
   silently did nothing. Kept as a pointer so it is not written a third time. */

/* READ AND UNREAD, THE RIGHT WAY ROUND

   Unread is the one that matters. Somebody opens the inbox to find out what is
   waiting, and the row that answers that question has to be the row that
   catches the eye. So an unread message is bold and full-brightness, and a read
   one is quieter and lighter.

   This was the other way round: read mail was weight 800 in pure white and
   unread was dimmed to 0.72 with a greyed sender, so the inbox looked emphatic
   about the mail you had already dealt with and vague about the mail you had
   not. Reading the list told you the opposite of what you needed to know.

   Weight does the work, not colour alone, so it survives a monochrome display
   and it is what a screen reader's emphasis picks up. */
.msg .msg-sender { font-weight: 600; color: #a2a2ae; }
.msg.unread .msg-sender { font-weight: 800; color: #fff; }

/* Unread owns full brightness AND bold. Nothing else in a row is both, so
   the eye finds new mail without having to read anything -- and read sits a
   clear step below on both counts rather than matching on one. */
.msg.unread .subject { font-weight: 700; color: #fff; }
.msg.unread .preview { color: #8a8a97; }

/* Shading is GREY for unread.

   It was gold, and that made the shading useless for saying what it was
   supposed to say. The unread tint was rgba(255,196,0,.08) -- the identical
   value .msg.active uses -- and hovering an unread row took it to .13, which is
   brighter than the row you have open. So the shading was describing where the
   pointer was, not which mail was new, and an unread row under the cursor was
   the least obviously unread thing on screen.

   The two colours now mean different things, which is the whole point of having
   two:

     grey  a property of the mail -- you have not dealt with it
     gold  a property of the view -- this is the row you are on, or the one
           your pointer is over

   Both are still doing work on an unread row: the grey wash for scanning a long
   list, the bar for the same thing at a glance. */
.msg.unread {
  opacity: 1;
  background: rgba(255, 255, 255, 0.05);
}

/* The unread bar.

   Bold text alone was not enough separation: at 561 rows, with senders and
   subjects mostly the same few names, weight is a subtle difference to scan and
   the two states still read as one list. So an unread row now carries the same
   left bar and tint as the row you have open -- the shape you already read as
   "this one matters" -- in GREY rather than gold.

   The bar is the signal, so its colour is the signal. Gold means "you are here"
   and is reserved for that; a new message waiting is a different kind of
   important, and giving it the same gold would make the open row stop standing
   out from the fifty unread ones above it. */
.msg.unread {
  border-left: 3px solid rgba(255, 255, 255, 0.22);
  padding-left: 31px;
}
/* The row you are reading keeps the gold bar even when it is also unread:
   "selected" is the stronger signal and there is nothing to be gained from
   showing two. */
.msg.active.unread { border-left-color: var(--gold); }
/* Multi-select (the checkboxes) tints the row without the bar, so an
   unread-and-checked row is grey-barred and tinted, and reading is still
   unambiguously the gold one. */
.msg.selected { background: rgba(255, 196, 0, 0.06); }

/* Hovering an unread row lightens the grey rather than turning it gold.

   The obvious thing -- make it gold like every other hover -- would undo the
   whole point: the row would stop saying "unread" the moment the pointer went
   near it, and a reader scanning with the mouse would see almost nothing
   unread. Hover is a small step up from rest, not a change of colour. */
.msg.unread:hover { opacity: 1; background: rgba(255, 255, 255, 0.09); }

/* MESSAGE CARD CHECKBOX */
.msg-cb {
  position: absolute;
  left: 12px;
  top: 15px;
  accent-color: var(--gold);
  cursor: pointer;
  width: 13px;
  height: 13px;
}

.msg-hdr {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.msg-sender-wrap {
  display: inline-flex;
  align-items: center;
  min-width: 0;
  gap: 8px;
}
.msg-sender-avatar {
  display: block;
  flex: 0 0 28px;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  object-fit: cover;
  background: rgba(255, 196, 0, .12);
  border: 1px solid rgba(255, 196, 0, .35);
}
.msg-sender { font-size: 0.76rem; color: #fff; }
.msg-meta-right {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  color: var(--muted);
}
.icon-btn {
  background: none;
  border: 0;
  color: #555;
  cursor: pointer;
  font-size: 0.8rem;
  padding: 0;
  line-height: 1;
}
.icon-btn:hover { color: #aaa; }
.icon-btn.restore-btn { color: var(--gold); }
.icon-btn.restore-btn:hover { color: #ffe27a; }
.icon-btn.active { color: var(--gold); }
.icon-btn.flagged { color: #f87171; }
.icon-btn.pinned { color: var(--gold); }
.att-pill { font-size: 0.64rem; color: #888; }
/* A read subject is normal weight and white.

   It was 600 in #ddd, which read as emphasised -- so a message you had
   already dealt with looked more important than one you had not, which
   is the opposite of the truth. Weight 600 is not "regular"; on a subject
   line it still reads as bold next to a 400.

   White rather than #ddd so a read subject is legible in its own right.
   Nothing about it needing to be quieter -- the grey wash, the absence of
   the bar, and the lighter sender already say it has been dealt with. */
/* A read subject is normal weight and dimmed.

   White was wrong in the other direction: it made a message already dealt
   with as loud as one that had not arrived, and the list was uniformly bright
   so nothing stood out. What makes unread findable is that it is the ONLY
   thing at full brightness -- so read has to sit clearly below it rather
   than merely matching it.

   #9c9ca9 is the same family as the read sender's #a2a2ae, a shade under it:
   still comfortably legible, and unmistakably not-new. */
.msg .subject { font-size: 0.78rem; margin-top: 4px; font-weight: 400; color: #9c9ca9; }
.msg .preview { font-size: 0.65rem; color: var(--muted); margin-top: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.4; }

/* READER COLUMN */
.reader-col {
  background: var(--bg);
  display: flex;
  flex-direction: column;
}
.reader-toolbar {
  height: 44px;
  border-bottom: 1px solid var(--line);
  background: #09090c;
  display: flex;
  align-items: center;
  padding: 0 16px;
  gap: 8px;
  flex-shrink: 0;
}
.reader-body-wrap {
  flex: 1;
  padding: 26px 36px;
  overflow-y: auto;
}
.reader-body-wrap h2 { margin: 0 0 14px; font-size: 1.35rem; }
.headers {
  font-size: 0.75rem;
  color: #bbb;
  border-bottom: 1px solid var(--line);
  padding-bottom: 16px;
  line-height: 1.8;
}
.headers b { color: #888; font-weight: 700; margin-right: 6px; }
.body-text {
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.75;
  padding-top: 20px;
  font-size: 0.86rem;
  color: #e5e5ea;
}
.attachments-box {
  margin-top: 24px;
  border-top: 1px solid var(--line);
  padding-top: 16px;
}
.attachments-title {
  font-size: 0.72rem;
  font-weight: 800;
  text-transform: uppercase;
  color: #888;
  margin-bottom: 10px;
}
.attachment-card {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  background: #111116;
  border: 1px solid var(--line);
  border-radius: 8px;
  font-size: 0.75rem;
  color: #ddd;
  margin-right: 8px;
  margin-bottom: 8px;
}
.attachment-card:hover { border-color: rgba(255,196,0,0.4); color: #fff; }
.attachment-card { text-decoration:none; cursor:pointer; }
.attachment-meta { color:#888; font-size:0.68rem; }


/* RICH MAIL WEBVIEW / MESSAGE PREVIEW */
.reader-body-wrap.rich-reader-active {
  padding: 0;
  background: #050507;
}
.rich-message-shell {
  min-height: 100%;
  display: flex;
  flex-direction: column;
}
.rich-message-head {
  padding: 24px 30px 18px;
  border-bottom: 1px solid var(--line);
  background: linear-gradient(180deg, #0b0b0f 0%, #070709 100%);
}
.rich-message-subject {
  margin: 0 0 18px;
  font-size: 1.45rem;
  line-height: 1.25;
  letter-spacing: -0.025em;
  font-weight: 800;
  color: #fff;
  user-select: text;
}
.rich-message-meta {
  display: flex;
  align-items: flex-start;
  gap: 12px;
}
.rich-sender-avatar {
  position: relative;
  width: 40px;
  height: 40px;
  flex: 0 0 40px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: linear-gradient(135deg, #ffc400, #ff8c00);
  color: #17130a;
  font-size: 0.78rem;
  font-weight: 950;
  border: 1px solid rgba(255,196,0,.5);
  box-shadow: 0 3px 14px rgba(255,196,0,.12);
}
.rich-sender-avatar-image {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: inherit;
  object-fit: cover;
  background: #17130a;
}
.rich-message-addresses { flex: 1; min-width: 0; user-select: text; }
.rich-from-row { display: flex; align-items: flex-start; gap: 8px; min-width: 0; }
.rich-from-name { flex: 1 1 auto; min-width: 0; color: #f5f5f7; font-size: .86rem; font-weight: 850; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.rich-message-side-meta { display: flex; flex: 0 0 auto; flex-direction: column; align-items: flex-end; gap: 4px; margin-left: auto; }
.rich-preview-theme-controls { display: inline-flex; align-items: center; gap: 4px; }
.rich-preview-theme-btn {
  width: 25px;
  height: 23px;
  display: inline-grid;
  place-items: center;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 6px;
  color: #85858f;
  background: transparent;
  cursor: pointer;
  transition: color .15s ease, background .15s ease, border-color .15s ease;
}
.rich-preview-theme-btn svg { width: 14px; height: 14px; }
.rich-preview-theme-btn:hover { color: #f5f5f7; background: rgba(255,255,255,.07); }
.rich-preview-theme-btn.active { color: #ffc400; border-color: rgba(255,196,0,.32); background: rgba(255,196,0,.08); }
.rich-preview-theme-btn:focus-visible { outline: 2px solid #ffc400; outline-offset: 2px; }
.rich-preview-reaction-wrap { position: relative; }
.rich-preview-reaction-trigger { font-size: 15px; line-height: 1; }
.reaction-trigger-empty { display: grid; place-items: center; }
.reaction-trigger-empty svg { width: 16px; height: 16px; }
.rich-reaction-picker {
  position: absolute;
  z-index: 40;
  top: calc(100% + 7px);
  right: 0;
  width: 232px;
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 4px;
  padding: 9px;
  border: 1px solid rgba(255,255,255,.14);
  border-radius: 11px;
  background: #15151a;
  box-shadow: 0 12px 32px rgba(0,0,0,.48);
}
.rich-reaction-picker[hidden] { display: none; }
.rich-reaction-option {
  width: 28px;
  height: 28px;
  padding: 0;
  border: 1px solid transparent;
  border-radius: 7px;
  background: transparent;
  font-size: 17px;
  cursor: pointer;
}
.rich-reaction-option:hover, .rich-reaction-option:focus-visible { border-color: rgba(255,196,0,.4); background: rgba(255,196,0,.11); outline: none; }
.rich-reaction-clear {
  grid-column: 1 / -1;
  margin-top: 3px;
  padding: 5px 7px;
  border: 0;
  border-radius: 6px;
  color: #aaaab3;
  background: transparent;
  text-align: left;
  font-size: .68rem;
  cursor: pointer;
}
.rich-reaction-clear:hover { color: #fff; background: rgba(255,255,255,.07); }
.rich-reaction-clear[hidden] { display: none; }
.reaction-save-error { color: #ff9d8f; font-size: .65rem; white-space: nowrap; }
.msg-reaction { display: inline-grid; place-items: center; min-width: 17px; font-size: .82rem; line-height: 1; }
  /* The sender's address, under their name.

     Only rendered when there is a name as well, so ordinary mail from a real
     person still shows who it is from without a second line of an address you
     already know. Calendar notifications from this installation now carry the
     organiser's own name, which is the whole point of them no longer coming from
     no-reply. */
  .rich-sender-address {
    margin-top: 1px;
    color: #777781;
    font-size: .68rem;
    overflow-wrap: anywhere;
  }
.rich-message-date { color: #777781; font-size: .68rem; white-space: nowrap; }
.rich-recipient-row { margin-top: 4px; color: #8d8d96; font-size: .7rem; line-height: 1.5; overflow-wrap: anywhere; }
.rich-recipient-row b { color: #b4b4bc; font-weight: 700; }
.rich-message-body-area {
  flex: 1;
  padding: 22px 28px 34px;
  min-height: 0;
  display: flex;
  flex-direction: column;
  position: relative;
}
.mail-confetti-overlay {
  position: absolute;
  z-index: 20;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
}
.mail-confetti-piece {
  position: absolute;
  top: -12px;
  width: 7px;
  height: 12px;
  border-radius: 2px;
  opacity: 0;
  animation: mail-confetti-fall 2.2s cubic-bezier(.18,.58,.38,1) forwards;
}
.mail-confetti-piece.round { width: 8px; height: 8px; border-radius: 50%; }
@keyframes mail-confetti-fall {
  0% { top: -3%; opacity: 0; transform: translateX(0) rotate(0); }
  12% { opacity: 1; }
  100% { top: 105%; opacity: 0; transform: translateX(var(--confetti-drift)) rotate(var(--confetti-spin)); }
}
@media (prefers-reduced-motion: reduce) {
  .mail-confetti-piece { animation: none; display: none; }
}
/* The frame is given the pane's height by flex rather than measured from the
   page in script. The iframe is sandboxed with no allow-same-origin, so its
   document is on an opaque origin and contentDocument is null -- reading the
   message height from here was never actually possible, and the fixed height
   that produced was the min-height below doing the whole job. Weakening the
   sandbox to measure it would be a poor trade for a cosmetic fit, so the frame
   is simply handed the room available and scrolls its own overflow, which is
   the only arrangement a sandboxed mail body really has. */
.rich-message-body-area > #real-message-body {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
}
.rich-message-body-area > .attachments-box { flex: 0 0 auto; }
.rich-webview-wrap {
  flex: 1 1 auto;
  min-height: 0;
  display: flex;
  width: 100%;
  max-width: 1120px;
  margin: 0 auto;
  /* White, matching the message frame's own background so no sliver of this
     surface shows at the rounded corners. */
  background: #fff;
  border: 1px solid rgba(255,255,255,.12);
  border-radius: 10px;
  overflow: hidden;
  box-shadow: 0 12px 36px rgba(0,0,0,.34);
}
.rich-webview-wrap.mail-preview-dark { background: #111216; }
.rich-mail-webview {
  flex: 1 1 auto;
  align-self: stretch;
  width: 100%;
  /* No height here. The parent is a row flex box whose height is already
     settled by the column above it, so align-self:stretch hands the frame that
     full height. An explicit height:100% would resolve against a
     content-derived height -- circular, so auto -- and would also suppress the
     stretch, leaving the frame on min-height alone. */
  min-height: 240px;
  border: 0;
  background: #fff;
  /* No filter here on purpose. A dark rendering of mail was tried using
     invert(1) hue-rotate(180deg) and was reverted: it made the page consistent
     but shifted every image and brand colour, leaving logos faint and hues
     drifted. A message is the sender's content rather than part of this
     interface, so it is shown as sent. */
}
.rich-mail-webview.mail-preview-dark { background: #111216; }
.rich-plain-body {
  width: 100%;
  max-width: 980px;
  margin: 0 auto;
  padding: 28px 32px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: #0c0c10;
  color: #e7e7ec;
  white-space: pre-wrap;
  overflow-wrap: anywhere;
  line-height: 1.7;
  font-size: .86rem;
  user-select: text;
}
.rich-plain-body.mail-preview-original {
  border-color: #dedee3;
  background: #fff;
  color: #17171c;
}
.rich-message-body-area .attachments-box { max-width: 1120px; margin: 22px auto 0; }
@media (max-width: 1100px) {
  .rich-message-head { padding: 20px 22px 16px; }
  .rich-message-body-area { padding: 18px; }
  .rich-message-subject { font-size: 1.25rem; }
}

/* ========================================================
   CALENDAR VIEW
   ======================================================== */
.cal-layout {
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 0;
  overflow: hidden;
}
.cal-sidebar {
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  background: #07070a;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.cal-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  overflow: hidden;
  background: var(--bg);
}

.mini-cal {
  background: #0d0d12;
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 10px;
  margin-bottom: 14px;
}
.mini-cal-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.74rem;
  font-weight: 850;
  margin-bottom: 8px;
}
.mini-cal-nav button {
  background: none;
  border: 0;
  color: #888;
  cursor: pointer;
  padding: 2px 6px;
}
.mini-cal-nav button:hover { color: #fff; }
.mini-cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
  text-align: center;
}
.mini-cal-dow { font-size: 0.58rem; font-weight: 800; color: #666; padding: 3px 0; }
.mini-cal-day {
  font-size: 0.66rem;
  padding: 4px 0;
  border-radius: 5px;
  cursor: pointer;
  color: #bbb;
  border: 0;
  background: transparent;
}
.mini-cal-day:hover { background: rgba(255,196,0,0.12); color: #ffd744; }
.mini-cal-day.other-month { color: #444; }
.mini-cal-day.today { border: 1px solid var(--gold); color: var(--gold); font-weight: 850; }
.mini-cal-day.selected { background: var(--gold); color: #111; font-weight: 900; }
.mini-cal-day.has-event::after {
  content: "";
  display: block;
  width: 3px;
  height: 3px;
  background: var(--gold);
  border-radius: 50%;
  margin: 1px auto 0;
}

.cal-toolbar {
  height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px;
  background: #09090c;
  flex-shrink: 0;
}
.cal-toolbar-left { display: flex; align-items: center; gap: 10px; }
.cal-toolbar-title { font-size: 1rem; font-weight: 850; min-width: 170px; }
.cal-btn {
  background: #111116;
  border: 1px solid var(--line);
  color: #ddd;
  padding: 5px 10px;
  border-radius: 6px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.cal-btn:hover { background: #1a1a24; border-color: rgba(255,255,255,0.2); color: #fff; }
.cal-view-selector {
  display: flex;
  background: rgba(255,255,255,0.04);
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 2px;
}
.cal-view-btn {
  background: transparent;
  border: 0;
  color: var(--muted);
  font-size: 0.74rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 6px;
  cursor: pointer;
}
.cal-view-btn.active { background: #1f1f28; color: var(--gold); }

.cal-body {
  flex: 1;
  min-height: 0;
  overflow: auto;
  position: relative;
}

.month-view {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  grid-template-rows: 28px repeat(6, minmax(105px, 1fr));
  height: 100%;
  min-height: 650px;
}
.month-dow {
  background: #0a0a0e;
  border-bottom: 1px solid var(--line);
  border-left: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.66rem;
  font-weight: 850;
  color: #888;
  text-transform: uppercase;
}
.month-cell {
  border-left: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
  background: #040406;
  padding: 5px;
  display: flex;
  flex-direction: column;
  gap: 3px;
  cursor: pointer;
  position: relative;
}
.month-cell.drag-over { background: rgba(255,196,0,0.1) !important; outline: 2px dashed var(--gold); }
.month-cell.other-month { background: #020203; opacity: 0.45; }
.month-cell.today { background: rgba(255, 196, 0, 0.025); }
.month-cell-header { display: flex; justify-content: space-between; font-size: 0.7rem; font-weight: 750; color: #aaa; }
.month-cell.today .month-cell-num {
  background: var(--gold);
  color: #111;
  font-weight: 900;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: grid;
  place-items: center;
}

.event-chip {
  font-size: 0.66rem;
  font-weight: 700;
  padding: 2px 6px;
  border-radius: 4px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: grab;
  border-left: 3px solid;
  line-height: 1.35;
}
.event-chip:active { cursor: grabbing; opacity: 0.7; }

.task-chip {
  background: rgba(168, 85, 247, 0.14) !important;
  border-color: var(--purple) !important;
  color: #e9d5ff !important;
  border-left-style: dashed !important;
  display: flex;
  align-items: center;
  gap: 4px;
}
.task-chip.task-done {
  text-decoration: line-through;
  opacity: 0.6;
  background: rgba(255,255,255,0.04) !important;
  border-color: #666 !important;
  color: #888 !important;
}

.week-view, .day-view {
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow-y: auto;
  position: relative;
}
.week-header-row {
  display: grid;
  grid-template-columns: 55px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: #09090c;
  position: sticky;
  top: 0;
  z-index: 10;
}
.day-header-row {
  display: grid;
  grid-template-columns: 55px 1fr;
  border-bottom: 1px solid var(--line);
  background: #09090c;
  position: sticky;
  top: 0;
  z-index: 10;
}
.week-tz-cell {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  padding: 4px 2px;
  border-right: 1px solid var(--line);
  background: #07070a;
  cursor: default;
  user-select: none;
}
.week-tz-cell .tz-label {
  font-size: 0.62rem;
  font-weight: 850;
  color: var(--gold, #f59e0b);
  letter-spacing: 0.5px;
  line-height: 1.1;
}
.week-tz-cell .tz-gmt {
  font-size: 0.54rem;
  color: #71717a;
  font-weight: 700;
  margin-top: 2px;
  line-height: 1.1;
}
.week-header-cell {
  padding: 8px 4px;
  text-align: center;
  border-left: 1px solid var(--line);
}
.week-header-cell .dow { font-size: 0.64rem; font-weight: 800; color: #777; text-transform: uppercase; }
.week-header-cell .dom { font-size: 1rem; font-weight: 850; margin-top: 2px; }
.week-header-cell.today .dom {
  background: var(--gold);
  color: #111;
  width: 26px;
  height: 26px;
  border-radius: 50%;
  margin: 2px auto 0;
  display: grid;
  place-items: center;
}

.week-tasks-strip {
  display: grid;
  grid-template-columns: 55px repeat(7, 1fr);
  border-bottom: 1px solid var(--line);
  background: #060609;
  min-height: 28px;
  position: sticky;
  top: 54px;
  z-index: 9;
}
.tasks-strip-label {
  font-size: 0.58rem;
  color: #777;
  font-weight: 800;
  text-transform: uppercase;
  padding: 4px;
  text-align: right;
  border-right: 1px solid var(--line);
}
.tasks-strip-day {
  border-left: 1px solid var(--line);
  padding: 2px 4px;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.week-grid {
  display: grid;
  grid-template-columns: 55px repeat(7, 1fr);
  position: relative;
  min-height: 1440px;
}
.day-grid {
  display: grid;
  grid-template-columns: 55px 1fr;
  position: relative;
  min-height: 1440px;
}
.time-col { border-right: 1px solid var(--line); background: #050508; }
.time-slot-label { height: 60px; font-size: 0.62rem; color: #666; text-align: right; padding-right: 6px; transform: translateY(-7px); }
.day-col { border-left: 1px solid var(--line); position: relative; background: #030305; }
.day-col.drag-over { background: rgba(255,196,0,0.06); }
.hour-line { height: 60px; border-bottom: 1px solid rgba(255,255,255,0.05); }

.time-event {
  position: absolute;
  left: 3px;
  right: 3px;
  border-radius: 6px;
  padding: 4px 6px;
  font-size: 0.7rem;
  overflow: hidden;
  cursor: grab;
  border-left: 3px solid;
  z-index: 2;
  box-shadow: 0 2px 8px rgba(0,0,0,0.5);
  display: flex;
  flex-direction: column;
}
.time-event:active { cursor: grabbing; }
.time-event .te-title { font-weight: 800; line-height: 1.2; pointer-events: none; }
.time-event .te-time { font-size: 0.62rem; opacity: 0.85; margin-top: 1px; pointer-events: none; }

.resize-handle {
  position: absolute;
  left: 0;
  right: 0;
  height: 8px;
  cursor: ns-resize;
  z-index: 5;
  background: transparent;
}
.resize-handle:hover { background: rgba(255,196,0,0.5); }
.resize-top { top: 0; }
.resize-bottom { bottom: 0; }

.now-indicator {
  position: absolute;
  left: 0;
  right: 0;
  height: 2px;
  background: #ef4444;
  z-index: 8;
  pointer-events: none;
}
.now-indicator::before {
  content: "";
  position: absolute;
  left: -4px;
  top: -4px;
  width: 10px;
  height: 10px;
  background: #ef4444;
  border-radius: 50%;
}

.cat-work { background: rgba(255,196,0,0.14); border-color: var(--gold); color: #ffe277; }
.cat-personal { background: rgba(16,185,129,0.14); border-color: var(--green); color: #7cedba; }
.cat-meetings { background: rgba(56,189,248,0.14); border-color: var(--blue); color: #9de3fc; }
.cat-deadlines { background: rgba(251,113,133,0.14); border-color: var(--rose); color: #fca5b3; }

/* ========================================================
   VIEW 3: KANBAN TO-DO BOARD
   ======================================================== */
.kanban-layout {
  grid-template-columns: var(--sidebar-w) 1fr;
  min-height: 0;
  overflow: hidden;
}
.kanban-sidebar {
  border-right: 1px solid var(--line);
  padding: 14px 10px;
  background: #07070a;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
}
.kanban-main {
  display: flex;
  flex-direction: column;
  min-height: 0;
  background: var(--bg);
  overflow: hidden;
}
.kanban-toolbar {
  height: 48px;
  border-bottom: 1px solid var(--line);
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 18px;
  background: #09090c;
  flex-shrink: 0;
}
.kanban-board {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(4, minmax(280px, 1fr));
  gap: 14px;
  padding: 16px;
  overflow-x: auto;
  overflow-y: hidden;
  background: #040406;
}
.kanban-col {
  background: #0a0b10;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 12px;
  display: flex;
  flex-direction: column;
  max-height: 100%;
  transition: border-color 0.15s, background-color 0.15s;
}
.kanban-col.drag-over {
  border-color: var(--gold);
  background: rgba(255, 196, 0, 0.04);
}
.kanban-col-hdr {
  padding: 12px 14px;
  border-bottom: 1px solid var(--line);
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.78rem;
  font-weight: 850;
  letter-spacing: -0.01em;
}
.kanban-col-count {
  font-size: 0.68rem;
  padding: 2px 7px;
  border-radius: 99px;
  background: rgba(255,255,255,0.06);
  color: #aaa;
}
.kanban-card-list {
  flex: 1;
  overflow-y: auto;
  padding: 10px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.kanban-card {
  background: #111218;
  border: 1px solid rgba(255, 255, 255, 0.08);
  border-radius: 8px;
  padding: 12px;
  cursor: grab;
  box-shadow: 0 2px 6px rgba(0,0,0,0.4);
  transition: border-color 0.15s, background-color 0.15s;
  box-sizing: border-box;
}
.kanban-card:hover {
  border-color: rgba(255, 196, 0, 0.35);
  background: #151620;
}
.kanban-card.dragging {
  opacity: 0.45;
  border-style: dashed;
}
.card-tags {
  display: flex;
  gap: 6px;
  margin-bottom: 6px;
  flex-wrap: wrap;
}
.card-tag {
  font-size: 0.6rem;
  font-weight: 800;
  padding: 2px 6px;
  border-radius: 4px;
  text-transform: uppercase;
}
.tag-high { background: rgba(239,68,68,0.2); color: #f87171; border: 1px solid rgba(239,68,68,0.3); }
.tag-medium { background: rgba(245,158,11,0.2); color: #fbbf24; border: 1px solid rgba(245,158,11,0.3); }
.tag-low { background: rgba(100,116,139,0.2); color: #94a3b8; border: 1px solid rgba(100,116,139,0.3); }
.card-title { font-size: 0.8rem; font-weight: 750; color: #fff; line-height: 1.35; margin-bottom: 6px; }
.card-desc { font-size: 0.68rem; color: var(--muted); line-height: 1.4; margin-bottom: 10px; }
.card-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.66rem;
  color: #888;
  border-top: 1px solid rgba(255,255,255,0.06);
  padding-top: 8px;
}

/* ========================================================
   MODALS
   ======================================================== */
.modal {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.75);
  backdrop-filter: blur(4px);
  display: none;
  align-items: center;
  justify-content: center;
  padding: 20px;
  z-index: 120;
}
.modal.open { display: flex; }
.modal-box {
  width: min(650px, 100%);
  background: #0d0d12;
  border: 1px solid var(--line-strong);
  border-radius: 14px;
  padding: 22px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.85);
  max-height: 90vh;
  overflow-y: auto;
}
.modal-box h2 {
  margin: 0 0 16px;
  font-size: 1.15rem;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

/* The compose window manages its own height rather than letting .modal-box
   scroll. max-height:90vh with overflow-y:auto is right for a dialog that
   fits, but a long quoted reply runs past the fold and the scrollbar then
   belongs to the whole form -- Send and Cancel scroll off the bottom with it.
   As a flex column the fields and the action bar stay put and the scrolling
   belongs to the message body, which is how every mail client lays this out.

   min-height:0 on #body is load-bearing. A flex item's automatic minimum size
   is its content size, so without it the body refuses to shrink below the
   quote and the overflow falls back onto the modal, which is the bug this
   whole block exists to fix. */
#modal-compose .modal-box {
  max-height: 90vh;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}
#modal-compose .modal-box > h2,
#modal-compose .modal-box > .form-grid,
#modal-compose .modal-box > .modal-actions {
  flex: 0 0 auto;
}
#modal-compose .modal-box > .compose-editor-shell {
  flex: 1 1 auto;
  min-height: 140px;
  min-width: 0;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid #34343e;
  border-radius: 8px;
  background: #15151c;
  color: #e8e8ef;
}
#modal-compose .compose-rich-toolbar {
  min-height: 42px;
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 5px 8px;
  overflow-x: auto;
  background: #1c1c24;
  border-bottom: 1px solid #34343e;
}
#modal-compose .compose-rich-toolbar select {
  height: 31px;
  min-width: 66px;
  padding: 0 9px;
  border: 1px solid #34343e;
  border-radius: 6px;
  background: #24242d;
  color: #ededf4;
  font-size: 12px;
}
#modal-compose .compose-rich-toolbar select:first-child { min-width: 136px; }
#modal-compose .compose-rich-toolbar button {
  flex: 0 0 auto;
  min-width: 26px;
  height: 30px;
  padding: 0 6px;
  border: 0;
  border-radius: 4px;
  background: transparent;
  color: #e8e8ef;
  font-size: 13px;
  cursor: pointer;
}
#modal-compose .compose-rich-toolbar button:hover { background: #32323c; }
#modal-compose .compose-rich-toolbar .sch-toolbar-sep {
  width: 1px;
  height: 22px;
  margin: 0 5px;
  background: #41414b;
  flex: 0 0 auto;
}
#modal-compose .compose-rich-toolbar .sch-color-control,
#modal-compose .compose-rich-toolbar .sch-highlight-control {
  position: relative;
  display: grid;
  place-items: center;
  width: 25px;
  height: 27px;
  color: #f2d05b;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  flex: 0 0 auto;
}
#modal-compose .compose-rich-toolbar .sch-highlight-control {
  width: 24px;
  height: 20px;
  border-radius: 4px;
  background: #f0c629;
  color: #222;
  font-size: 11px;
}
#modal-compose .compose-rich-toolbar input[type="color"] {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  cursor: pointer;
}
#modal-compose #body.compose-rich-content {
  flex: 1 1 auto;
  min-height: 126px;
  overflow: auto;
  padding: 13px 12px;
  box-sizing: border-box;
  background: #17171e;
  color: #f1f1f5;
  font-size: 14px;
  line-height: 1.5;
  white-space: pre-wrap;
  outline: none;
  /* Keeps a flick-scroll inside a long quote from chaining to the page behind
     the modal, which reads as the modal itself jumping. */
  overscroll-behavior: contain;
}
#modal-compose #body.compose-rich-content:focus { box-shadow: inset 0 0 0 1px rgba(255,196,0,.35); }
  #modal-compose #body .compose-reply-input {
    min-height: 1.5em;
    font-weight: 400;
    background: transparent;
  }
  #modal-compose .mail-recipient-field { position: relative; }
  #modal-compose .mail-recipient-field:focus-within { z-index: 20; }
  #modal-compose .mail-recipient-suggestions {
    position: absolute;
    z-index: 30;
    top: calc(100% - 1px);
    left: 90px;
    right: 0;
    max-height: 280px;
    overflow: auto;
    padding: 5px;
    border: 1px solid var(--line-strong);
    border-radius: 0 0 9px 9px;
    background: #17171e;
    box-shadow: 0 14px 30px rgba(0,0,0,.48);
  }
  #modal-compose .mail-recipient-suggestions[hidden] { display: none; }
  #modal-compose .mail-recipient-option {
    display: flex;
    align-items: center;
    width: 100%;
    gap: 10px;
    padding: 8px;
    border: 0;
    border-radius: 7px;
    background: transparent;
    color: var(--text, #f1f1f5);
    text-align: left;
    cursor: pointer;
  }
  #modal-compose .mail-recipient-option:hover,
  #modal-compose .mail-recipient-option[aria-selected="true"] { background: rgba(255,196,0,.13); }
  #modal-compose .mail-recipient-avatar {
    position: relative;
    display: grid;
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    place-items: center;
    overflow: hidden;
    border-radius: 50%;
    background: #3b3b45;
    color: #fff;
    font-size: 11px;
    font-weight: 700;
  }
  #modal-compose .mail-recipient-avatar img {
    position: absolute;
    inset: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
  #modal-compose .mail-recipient-labels { display: grid; min-width: 0; gap: 2px; }
  #modal-compose .mail-recipient-labels strong,
  #modal-compose .mail-recipient-labels small { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
  #modal-compose .mail-recipient-labels strong { font-size: 12px; }
  #modal-compose .mail-recipient-labels small { color: var(--muted); font-size: 11px; }
#modal-compose .compose-attachment-list {
  display: flex;
  flex-wrap: wrap;
  gap: 7px;
  max-height: 76px;
  overflow-y: auto;
  padding-top: 7px;
}
#modal-compose .compose-attachment-list:empty { display: none; }
#modal-compose .compose-attachment-item {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  max-width: 100%;
  padding: 5px 8px;
  border: 1px solid #34343e;
  border-radius: 6px;
  background: #17171e;
  color: #d6d8e0;
  font-size: 12px;
}
#modal-compose .compose-attachment-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
#modal-compose .compose-attachment-size { color: #9297a5; white-space: nowrap; }
#modal-compose .compose-attachment-remove {
  padding: 0 3px;
  border: 0;
  background: transparent;
  color: #aeb3bf;
  cursor: pointer;
  font-size: 15px;
}
#modal-compose .compose-attachment-remove:hover { color: #fff; }

/* The quoted original, shown expanded but foldable.

   <details> rather than a button and a hidden div: it is keyboard operable and
   announced as expanded/collapsed by a screen reader with no extra code. The
   marker is replaced with a chevron so the control reads as a toggle in both
   directions rather than as a disclosure triangle dropped in from the browser's
   defaults -- which matters more now that it ships open and is mostly used to
   fold the quote away. */
#modal-compose .compose-quote {
  margin: 0 0 8px;
  border-left: 2px solid var(--line-strong);
  padding-left: 12px;
}
#modal-compose .compose-quote > summary {
  cursor: pointer;
  color: var(--muted);
  font-size: .78rem;
  line-height: 1.6;
  list-style: none;
  user-select: none;
  /* The chevron is the only affordance, so it has to sit far enough from the
     text to be legible as a control. */
  padding: 2px 0 2px 2px;
  border-radius: 4px;
}
#modal-compose .compose-quote > summary::-webkit-details-marker { display: none; }
#modal-compose .compose-quote > summary::before {
  content: '▸';
  display: inline-block;
  width: 1em;
  color: var(--gold, #f0c629);
}
#modal-compose .compose-quote[open] > summary::before { content: '▾'; }
#modal-compose .compose-quote > summary:hover { color: #d6d8e0; }
#modal-compose .compose-quote > summary strong { color: #e6e8f0; }

/* The quoted body carries the original message's own colours, which are tuned
   for a white page. On this dark surface a near-white background is a blinding
   block, so the quote sits on the app's own surface instead. */
#modal-compose .compose-quote-body {
  margin: 8px 0 4px;
  padding: 10px 12px;
  border-radius: 8px;
  background: #111118;
  border: 1px solid var(--line);
  color: #cfd2dc;
  max-height: 46vh;
  overflow: auto;
}
#modal-compose .compose-quote-body img { max-width: 100%; height: auto; }
#modal-compose .compose-quote-body table { max-width: 100%; }

/* Draggable and resizable compose window.

   Drag by the title bar, resize from the bottom-right corner, the same as the
   event dialog. cursor:grab on the header is the whole affordance -- without it
   the window looks like an ordinary modal and nobody would think to try.

   The backdrop stops dimming while a drag or resize is in progress. That is not
   decoration: the modal overlay is a full-screen fixed layer, so while it is
   painted the window looks recessed and the movement reads as the page behind
   it sliding, rather than as the window being carried. */
#modal-compose .modal-box {
  /* Opens at 70% of the viewport in both directions. A compose box sized to
     its content was either a cramped strip on a short quote or a full-height
     column on a long one, and the quoted message is what you actually want to
     read while writing. vw/vh rather than a percentage because the box is a
     flex item of a fixed, inset:0 overlay, so its own percentage would resolve
     against that overlay rather than the screen the user is looking at.

     These are defaults, not limits. resize:both below lets the window be made
     any size within the min/max, and the reopen reset in mail.js clears the
     width and height the browser writes inline while resizing, so every open
     comes back to 70% rather than to whatever it was left at. */
  width: min(70vw, 100%);
  height: min(70vh, 100%);

  /* resize:both only takes effect when overflow is not visible, which is
     satisfied above. min-width/min-height stop the window being collapsed to
     nothing; max-* keep it inside the viewport. */
  resize: both;
  min-width: 380px;
  min-height: 320px;
  max-width: calc(100vw - 40px);
  max-height: calc(100vh - 40px);
}
#modal-compose .modal-box > h2 {
  cursor: grab;
  user-select: none;
  touch-action: none; /* a finger drag must move the window, not the page */
}
#modal-compose .modal-box > h2:active { cursor: grabbing; }

#modal-compose.drag-active {
  user-select: none;
}
#modal-compose.drag-active .modal-box {
  /* transition on the surface properties only, so the box tracks the pointer
     with no lag while the size change on release still eases. */
  transition: box-shadow .2s ease;
  box-shadow: 0 30px 80px rgba(0,0,0,.95);
}
#modal-compose.drag-active::before,
#modal-compose.drag-active::after { content: none; }
#modal-compose.drag-active { backdrop-filter: none; background: rgba(0,0,0,.28); }

/* The resize grip is a child of the box, so it inherits the box's rounded
   corner and would otherwise paint a square notch over it. */
#modal-compose .modal-box::-webkit-resizer { border-radius: 0 0 13px 0; }
.close-x { background: none; border: 0; color: #888; font-size: 1.2rem; cursor: pointer; }
.close-x:hover { color: #fff; }

.form-grid {
  display: grid;
  grid-template-columns: 90px 1fr;
  align-items: center;
  border-bottom: 1px solid var(--line);
}
.form-grid label { font-size: 0.72rem; color: var(--muted); font-weight: 700; }
.form-grid input, .form-grid select, .form-grid textarea {
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  color: #fff;
  padding: 9px 12px;
  font-family: inherit;
  font-size: 0.8rem;
}
.form-grid select { background: #0d0d12; color: #eee; cursor: pointer; }
.form-grid textarea { min-height: 90px; resize: vertical; }

.modal-actions {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 18px;
}
.send-btn {
  border: 0;
  border-radius: 8px;
  background: var(--gold);
  color: #111;
  padding: 8px 16px;
  font-weight: 850;
  font-size: 0.8rem;
  cursor: pointer;
}
.send-btn:hover { opacity: 0.92; }
.cancel-btn {
  border: 0;
  background: transparent;
  color: #aaa;
  cursor: pointer;
  font-size: 0.78rem;
  padding: 8px 12px;
}
.danger-btn {
  border: 1px solid rgba(239,68,68,0.3);
  background: rgba(239,68,68,0.1);
  color: #f87171;
  border-radius: 7px;
  padding: 6px 12px;
  font-size: 0.74rem;
  font-weight: 700;
  cursor: pointer;
}
.danger-btn:hover { background: #ef4444; color: #fff; }

.status-pill { font-size: 0.72rem; color: var(--gold); font-weight: 600; }
.section-title { margin: 16px 8px 6px; color: #555; font-size: 0.62rem; font-weight: 900; text-transform: uppercase; letter-spacing: 0.12em; }
.subtle-btn { font-size: 0.72rem; color: #888; background: none; border: 0; cursor: pointer; padding: 6px 8px; border-radius: 6px; text-align: left; display: block; width: 100%; }
.subtle-btn:hover { color: #fff; background: rgba(255,255,255,0.04); }
.spacer { flex: 1; }

/* ========================================================
   ROOMS

   Rooms sit above the people list in the Chatter panel. The row styling is
   deliberately the same as .chat-user-item so the two lists read as one panel
   rather than as two features, with the differences only where the subject
   differs: a room has a count of people instead of a presence, and no
   availability to tint with.
   ======================================================== */
.chat-subhdr {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px 5px;
  font-size: 0.58rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #5c6070;
  border-top: 1px solid rgba(255,255,255,0.04);
}
/* The first one has no rule above it: the unread badge above it already
   separates the header from the rest, and a second line there reads as a
   stray divider. */
.chat-subhdr:first-of-type { border-top: 0; }

.chat-subhdr-btn {
  font-size: 0.6rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  color: var(--green);
  background: rgba(168,85,247,0.10);
  border: 1px solid rgba(168,85,247,0.28);
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  text-transform: none;
}
.chat-subhdr-btn:hover { background: rgba(168,85,247,0.20); color: #fff; }

/* Not flex:1, unlike the people list below it. A room list that grows to fill
   the panel would push everyone off the bottom, and there is no scrollbar on a
   flex:1 child whose parent is also scrolling -- so it is capped and scrolls
   itself once there are more than a few rooms. */
.chat-rooms-list {
  flex: none;
  max-height: 34%;
  overflow-y: auto;
  padding: 0 8px;
}

.chat-room-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  border-bottom: 1px solid rgba(255,255,255,0.03);
  transition: background 0.12s;
}
.chat-room-item:hover, .chat-room-item.active { background: #12131c; }

/* The speech glyph, in the room's tint rather than an availability colour.
   A room has no presence, so it gets no presence dot -- a dot here would be
   read as "these people are online", which is not a thing. */
.chat-room-glyph {
  flex: none;
  width: 34px;
  height: 34px;
  border-radius: 50%;
  display: grid;
  place-items: center;
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.34);
  color: #d8b4fe;
}
.chat-room-icon { display: block; }

.chat-empty-note {
  padding: 10px 12px;
  font-size: 0.68rem;
  color: #555a6a;
  font-style: italic;
}

/* The room glyph in the conversation header, where it stands in for a person
   avatar. .is-room is set by the JS when a room is opened and removed when a
   person is, so the two never leak into each other across the shared pane. */
.chat-avatar-circle.is-room {
  background: rgba(168,85,247,0.16);
  border: 1px solid rgba(168,85,247,0.34);
  color: #d8b4fe;
  /* A room is a circle, and this is the only rule that says so.
     It was 11px, which came from changing .chat-avatar-circle for the PEOPLE
     tiles to match the dashboard -- but this element shares that class with
     a person, so the room inherited a person's shape. The result was a room
     drawn as a circle in the list (.chat-room-glyph, 50%) and as a rounded
     square in its own header, which is the same inconsistency in the other
     direction from the one just fixed.

     A room is not a person, so it does not get a person's tile. The purple
     rim and fill below keep it unmistakably a room either way. */
     border-radius: 50%;
}

.chat-room-members-btn {
  margin-left: auto;
  font-size: 0.58rem;
  font-weight: 800;
  color: #d8b4fe;
  background: rgba(168,85,247,0.12);
  border: 1px solid rgba(168,85,247,0.30);
  border-radius: 6px;
  padding: 3px 7px;
  cursor: pointer;
  white-space: nowrap;
}
.chat-room-members-btn:hover { background: rgba(168,85,247,0.24); color: #fff; }

/* Who said it, on an incoming bubble. Only in a room: a one-to-one already
   has the other person's name on the header. */
.chat-bubble-who {
  font-size: 0.58rem;
  font-weight: 850;
  letter-spacing: 0.04em;
  margin-bottom: 3px;
  color: #d8b4fe;
}

/* A "×2" marker on a room name shared by two rooms. Only shown when it is
   actually needed -- on its own it is just a stray number. */
.chat-room-clash {
  display: inline-block;
  margin-left: 5px;
  padding: 0 4px;
  font-size: 0.55rem;
  font-weight: 900;
  color: #f0abfc;
  background: rgba(168,85,247,0.18);
  border: 1px solid rgba(168,85,247,0.34);
  border-radius: 4px;
  vertical-align: middle;
}

/* "My rooms · 2" / "Other rooms · 1". Sits inside the scrolling room list rather
   than being one of the panel's own sub-headers, because it moves with the
   rooms it introduces. */
.chat-room-group {
  padding: 9px 6px 4px;
  font-size: 0.55rem;
  font-weight: 900;
  text-transform: uppercase;
  letter-spacing: 0.13em;
  color: #4d5163;
}

/* A room you started, tinted differently from one you were added to.

   Green rather than a second purple: the panel already uses gold for unread,
   purple for rooms generally, and the availability states own the red/amber
   range, so green is the one hue that cannot be mistaken for "someone's
   status". The tint is on the glyph and a left edge, not the whole row, so the
   name stays legible and the row still reads as part of the same list. */
.chat-room-item.is-mine .chat-room-glyph {
  background: rgba(34,197,94,0.16);
  border-color: rgba(34,197,94,0.38);
  color: #86efac;
}
.chat-room-item.is-mine {
  box-shadow: inset 2px 0 0 rgba(34,197,94,0.55);
}
.chat-room-item.is-mine .chat-user-preview { color: #7ba88c; }

/* The Add-anyone list on a room you do not own. Framed as a notice rather than
   left blank, so a missing section reads as a rule and not as a fault. */
.room-member-list.is-locked {
  background: rgba(0,0,0,0.12);
  border-style: dashed;
}

/* Member pickers in the create and members dialogs. */
.room-member-list {
  max-height: 190px;
  overflow-y: auto;
  /* x is hidden because the checkboxes used to be laid out full width by
     .form-grid input, which pushed a name past the edge and produced a
     horizontal scrollbar over a list that should never scroll sideways. */
  overflow-x: hidden;
  border: 1px solid rgba(255,255,255,0.08);
  border-radius: 8px;
  padding: 4px;
  background: rgba(0,0,0,0.22);
}
.room-member-row {
  display: flex;
  align-items: center;
  gap: 9px;
  padding: 6px 8px;
  border-radius: 6px;
  cursor: pointer;
  /* Lets the name span shrink and ellipsis instead of forcing the row wider
     than its container. Without this, a long name scrolls the list sideways. */
  min-width: 0;
}
.room-member-row:hover { background: rgba(255,255,255,0.045); }
.room-member-row.static { cursor: default; }

/* This is the fix for the invisible names.

   The whole point of this file: .form-grid input gives EVERY input inside a
   .form-grid `width: 100%; padding: 9px 12px`, for the text fields in the
   modals. A checkbox is an input, so every tick box in the member list was
   being stretched to the full width of the row, pushing the name off the end
   and leaving a horizontal scrollbar over what should be a plain list.

   Restated explicitly here because this selector is more specific than
   .form-grid input, so these values win without needing !important. */
.room-member-row input[type=checkbox] {
  width: auto;
  min-width: 0;
  height: auto;
  margin: 0;
  padding: 0;
  flex: none;
  accent-color: var(--purple);
  cursor: pointer;
}
.room-member-name {
  font-size: 0.74rem;
  font-weight: 700;
  color: #e9d5ff;
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.room-member-state {
  font-size: 0.6rem;
  color: #555a6a;
  white-space: nowrap;
}
/* Remove-a-member, as an icon-only button.

   Sized to a fixed box rather than padded text, so the member rows all line up
   whether or not one of them has this control -- which they do not, since the
   room creator gets "always in" instead and a non-owner gets nothing at all. */
.room-member-remove {
  flex: none;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
  padding: 0;
  color: #fca5a5;
  background: rgba(248,113,113,0.10);
  border: 1px solid rgba(248,113,113,0.28);
  border-radius: 5px;
  cursor: pointer;
  transition: background 0.14s ease, color 0.14s ease;
}
.room-member-remove:hover {
  background: rgba(248,113,113,0.28);
  color: #fff;
}
.room-member-remove svg { display: block; }

/* The consequence, on hover.

   Appended to <body> and position: fixed, NOT drawn inside the button with a
   pseudo-element. The members list is overflow-y: auto, and anything absolutely
   positioned inside a scrolling box is clipped by it -- so a pseudo-element
   tooltip loses its top or bottom edge exactly when the list is long enough
   to scroll, which is the case where the reader most wants to read it. A fixed
   element is outside that clipping context entirely.

   Shown on focus as well as hover, so it is not mouse-only: the same reason the
   room and people rows got keyboard handling. */
.chat-remove-warn {
  position: fixed;
  /* 130, not something small. This tooltip is raised from inside a .modal, and
     .modal is z-index 120 -- so anything below that is painted UNDER the dialog
     the tooltip belongs to. It is invisible, not misplaced: the element is on
     screen, the right size, in the right place, and never appears.

     Above every modal (120 and 121) and below the toasts and drag layers at
     721 and 9999, which is the band this wants. */
  z-index: 130;
  width: 272px;
  padding: 9px 11px;
  background: #0d0d12;
  border: 1px solid rgba(248,113,113,0.40);
  border-radius: 8px;
  box-shadow: 0 8px 24px rgba(0,0,0,0.6);
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.5;
  color: #e9d5ff;
  text-align: left;
  opacity: 0;
  visibility: hidden;
  /* Never swallows the click that summoned it. */
  pointer-events: none;
  transition: opacity 0.13s ease;
}
.chat-remove-warn.is-shown { opacity: 1; visibility: visible; }
.room-member-remove img {
  width: 16px;
  height: 16px;
  display: block;
  /* Dimmed at rest, full colour on hover, so the button reads as a control
     rather than as a picture. The same idea as the back arrow, which is
     greyscaled at rest instead of dimmed because its resting state should
     recede rather than assert. */
  opacity: 0.72;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.room-member-remove:hover img { opacity: 1; transform: scale(1.08); }
.room-member-remove:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}
.room-member-remove:hover { background: rgba(248,113,113,0.22); color: #fff; }
/* Delete-the-room, in the conversation header beside Members.

   Red and icon-only, and a little wider than the icon so it is a comfortable
   target. It sits at the far right of the group, away from the room name, so a
   destructive control is never the thing under the pointer when the reader is
   aiming at the title. */
.chat-room-delete-btn {
  flex: none;
  display: grid;
  place-items: center;
  width: 26px;
  height: 26px;
  padding: 0;
  border: 1px solid rgba(248,113,113,0.26);
  border-radius: 6px;
  background: rgba(248,113,113,0.08);
  cursor: pointer;
  transition: background 0.14s ease, border-color 0.14s ease;
}
.chat-room-delete-btn img {
  width: 14px;
  height: 14px;
  display: block;
  opacity: 0.72;
  transition: opacity 0.14s ease, transform 0.14s ease;
}
.chat-room-delete-btn:hover {
  background: rgba(248,113,113,0.24);
  border-color: rgba(248,113,113,0.55);
}
.chat-room-delete-btn:hover img { opacity: 1; transform: scale(1.1); }
.chat-room-delete-btn:focus-visible {
  outline: 2px solid #fca5a5;
  outline-offset: 2px;
}

/* Focus ring for the room and people rows.

   They are divs that behave as buttons, so nothing draws a ring for them by
   default. Without this, tabbing through the panel moves the focus with no
   visible indication at all -- which is worse than not being focusable, because
   it looks like the keyboard controls are broken. */
.chat-room-item:focus-visible,
.chat-user-item:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: -2px;
  border-radius: 8px;
}

/* The confirmation dialog always sits above any other dialog.

   .modal carries z-index: 120, so two modals opened at once stack by z-index
   and NOT by document order -- and this dialog is declared before the members
   dialog that opens it. At the z-index of 120 it landed underneath: the
   confirmation was in the page, a keyboard user could reach and activate it,
   and the members dialog was simply painted over the top of it, so pressing
   Remove appeared to do nothing at all.

   121 rather than a large number, because 721 and 9999 are used elsewhere in
   this stylesheet for things that genuinely must sit above a dialog -- a
   toast, a drag layer -- and stealing one of those would put a confirmation
   over them. One above the modal layer is exactly the rank this wants: above
   every dialog, below every overlay. */
#modal-room-confirm {
  z-index: 121;
}

/* Confirm button on the remove-from-room question. Red rather than the usual
   send-button green, because pressing it is destructive and the two should not
   look alike at a glance. */
.room-confirm-yes {
  font-size: 0.78rem;
  font-weight: 800;
  color: #fff;
  background: #dc2626;
  border: 1px solid rgba(248,113,113,0.5);
  border-radius: 7px;
  padding: 8px 16px;
  cursor: pointer;
  transition: background 0.14s ease;
}
.room-confirm-yes:hover { background: #ef4444; }
.room-confirm-yes:focus-visible { outline: 2px solid #fca5a5; outline-offset: 2px; }

.room-member-note {
  margin-top: 6px;
  font-size: 0.62rem;
  color: #555a6a;
}

/* A profile picture filling the avatar square.

   object-fit: cover so a square photograph fills the square without being
   stretched, and overflow hidden on the parent so the rounded corners cut the
   image rather than the image overhanging them. The parent's background and
   border are dropped, because with a picture in the box they would otherwise
   show as a coloured sliver round its edge.

   The room icon is set as text on the same element and must keep its own
   styling, so this is scoped to has-picture and cannot reach it. */
.chat-avatar-circle.has-picture { background: transparent; border-color: transparent; overflow: hidden; }
.chat-avatar-circle.has-picture img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* A profile picture in any of the avatar boxes.

   Absolutely positioned rather than sized with width/height 100%, because every
   one of these boxes is display:grid with place-items:center, and a percentage
   sized child inside one of those measures zero -- place-items makes the item
   size to its content, and an <img> whose content is not decoded yet has none.
   That was measured, not assumed: the picture was in the DOM with correct
   computed width and height and a 0x0 bounding box.

   inset:0 with the box already position:relative fills it whatever the box's
   own layout is, and overflow:hidden on the box is what rounds the corners of
   the picture rather than letting it overhang them. */
.avatar-photo {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
.chat-avatar-circle.has-picture,
.avatar-circle.has-picture { overflow: hidden; }
/* The availability tint would otherwise show as a coloured cast over the
   photograph. The row's state class still drives the dot and the name colour. */
/* The rim stays under a photograph. It was cleared here on the reasoning that
   a tinted border would cast over the picture, but the dashboard's own picture
   keeps its gold hairline, and dropping it here is precisely why these did not
   match it. The background goes -- it would otherwise show as a coloured cast
   through the corners -- but the border is the same hairline the dashboard
   uses, at the same opacity, so a face in a list is framed the same way a face
   beside Welcome is. */
.chat-avatar-circle.has-picture,
.avatar-circle.has-picture {
  background: transparent;
  border-color: rgba(255,205,45,.30);
}


/* ==========================================================================
   RESOURCE PICKER  --  choosing a room, car, equipment or lodging for an event
   ==========================================================================

   The Location row is a text box plus a button. The box stays free text because
   a location is very often not a resource at all: a link, a client's address,
   "the pub". The button is the way to pick one that IS, and hold it.
*/

.loc-row {
  display: flex;
  gap: 8px;
  align-items: stretch;
}

/* .form-grid input is width:100% for every input inside a .form-grid, which
   outranks the flex sizing below, so the width is reset here rather than being
   fought with !important further down the file. */
.loc-row input {
  flex: 1 1 auto;
  width: auto;
  min-width: 0;
}

.loc-row .send-btn {
  flex: 0 0 auto;
  white-space: nowrap;
}

.loc-note {
  display: block;
  margin-top: 6px;
  font-size: 0.72rem;
  line-height: 1.45;
  color: var(--muted, #9aa0ae);
}

#modal-resource-picker .modal-box {
  width: min(560px, 94vw);
}

.picker-window {
  margin: 0 0 10px;
  font-size: 0.78rem;
  color: var(--muted, #9aa0ae);
}

.picker-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

/* A chip is a filter, so it reads as a toggle rather than a button: selected is
   a filled background, not just a border. */
.picker-chip {
  font: inherit;
  font-size: 0.7rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 999px;
  border: 1px solid var(--line, #2a2a35);
  background: transparent;
  color: var(--muted, #9aa0ae);
  cursor: pointer;
}

.picker-chip:hover { color: #fff; }

.picker-chip.on {
  background: var(--fg, #e8eaf0);
  border-color: var(--fg, #e8eaf0);
  color: var(--bg, #0b0b10);
}

.picker-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
  max-height: 46vh;
  overflow-y: auto;
}

.picker-loading,
.picker-empty {
  margin: 0;
  padding: 18px 4px;
  font-size: 0.8rem;
  color: var(--muted, #9aa0ae);
}

.pick-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  width: 100%;
  text-align: left;
  font: inherit;
  padding: 10px 12px;
  border-radius: 10px;
  border: 1px solid var(--line, #2a2a35);
  background: transparent;
  color: var(--fg, #e8eaf0);
  cursor: pointer;
}

.pick-row:hover { border-color: var(--fg, #e8eaf0); }

/* Taken is shown, not hidden. Somebody picking a room needs to see that the room
   they had in mind is the busy one, which is only useful if it is on the list;
   and "where else could we meet" cannot be answered by an absent row. */
.pick-unavailable {
  opacity: 0.5;
  cursor: not-allowed;
}

.pick-unavailable:hover { border-color: var(--line, #2a2a35); }

.pick-chosen {
  border-color: #6ee7a0;
  box-shadow: inset 0 0 0 1px #6ee7a0;
}

.pick-main {
  display: flex;
  flex-direction: column;
  gap: 3px;
  min-width: 0;
}

.pick-name {
  font-size: 0.85rem;
  font-weight: 700;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.pick-detail,
.pick-where {
  font-size: 0.72rem;
  color: var(--muted, #9aa0ae);
}

.pick-state {
  flex: 0 0 auto;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

.pick-free { color: #6ee7a0; }
.pick-busy { color: #ff9a9a; }

/* The type colours are the same ones the Resources page uses, so a room looks
   like a room in both places rather than becoming a different colour per screen.
   The class name is derived from the type, lowercased and slugged, so
   "Company Car" becomes .type-company-car. */
.type-pill {
  display: inline-block;
  font-size: 0.66rem;
  font-weight: 900;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid currentColor;
}

.type-room { color: #7fd1ff; }
.type-equipment { color: #ffc46b; }
.type-corporate-lodging { color: #ff9fd0; }
.type-company-car { color: #b4f06a; }


/* ==========================================================================
   AVAILABILITY  --  who among the event's people is free for the chosen time
   ==========================================================================

   Sits in the calendar entry form under Attendees. It answers "is everybody I've
   invited free at this time?" before the event is saved, reading the same
   people-busy table the save path writes.
*/

.freebusy {
  border: 1px solid var(--line, #2a2a35);
  border-radius: 10px;
  padding: 10px 12px;
  background: rgba(255, 255, 255, 0.02);
}

.freebusy-hint {
  margin: 0;
  font-size: 0.74rem;
  line-height: 1.5;
  color: var(--muted, #9aa0ae);
}

.freebusy-list {
  list-style: none;
  margin: 8px 0 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 180px;
  overflow-y: auto;
}

.fb-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 10px;
  border-radius: 8px;
  font-size: 0.78rem;
}

/* Free and busy are told apart by the row's background as well as the word, so
   the answer is visible without reading -- the same reason the resource picker
   colours its rows. */
.fb-free {
  background: rgba(110, 231, 160, 0.08);
}

.fb-busy {
  background: rgba(255, 154, 154, 0.08);
}

.fb-name {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  min-width: 0;
  color: var(--fg, #e8eaf0);
}

.fb-you {
  font-size: 0.62rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid currentColor;
  color: var(--muted, #9aa0ae);
}

/* What they are busy WITH. Shown because "busy" alone is a dead end -- the point
   of the panel is finding another time, and knowing what is in the way is the
   first step to moving it. */
.fb-what {
  color: var(--muted, #9aa0ae);
  font-size: 0.7rem;
}

.fb-state {
  flex: 0 0 auto;
  font-size: 0.64rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
}

.fb-free .fb-state { color: #6ee7a0; }
.fb-busy .fb-state { color: #ff9a9a; }


/* ==========================================================================
   INVITATIONS  --  what is waiting for an answer
   ==========================================================================

   Sits above the calendar. A tentative hold already blocks its time, so the
   answer is offered where the person is looking rather than only in a mailbox.
*/

.invite-strip {
  margin: 0 0 10px;
  border: 1px solid #6b5a1f;
  border-radius: 10px;
  background: rgba(255, 196, 0, 0.06);
  overflow: hidden;
}

.invite-strip-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 8px 12px;
  font-size: 0.74rem;
  font-weight: 900;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #ffc400;
  border-bottom: 1px solid rgba(255, 196, 0, 0.18);
}

.invite-dismiss {
  background: none;
  border: 0;
  color: #ffc400;
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  padding: 0 2px;
}

.invite-dismiss:hover { color: #fff; }

.invite-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

.invite-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 9px 12px;
  border-top: 1px solid rgba(255, 255, 255, 0.05);
}

.invite-list .invite-row:first-child { border-top: 0; }

.invite-main {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.invite-title {
  font-size: 0.82rem;
  font-weight: 700;
  color: var(--fg, #e8eaf0);
}

.invite-when {
  font-size: 0.7rem;
  color: var(--muted, #9aa0ae);
}

.invite-actions {
  display: flex;
  gap: 6px;
  flex: 0 0 auto;
  /* Wraps rather than shrinking. Four buttons on a narrow window at this size
     overflow the strip, and the fourth one out of view is the fourth one nobody
     finds. */
  flex-wrap: wrap;
  justify-content: flex-end;
}

.invite-accept,
.invite-tentative,
.invite-decline {
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 12px;
  border-radius: 8px;
  cursor: pointer;
  border: 1px solid transparent;
  /* "Pencil in" is the longest label of the four and would otherwise set the
     width for all of them, leaving Accept looking padded. */
  white-space: nowrap;
}

.invite-accept {
  background: #6ee7a0;
  color: #06210f;
  border-color: #6ee7a0;
}

/* Tentative and Pencil-in: an amber outline rather than a filled button.

   Filled green is for the answer somebody is confident about, and solid red is
   for a no. "I might come" is neither, so it is outlined -- visible enough to
   press, quiet enough that it does not read as a commitment. Both share one
   state on the server and both share this styling; they are separate buttons
   because they are different things to say. */
.invite-tentative {
  background: transparent;
  color: #ffc400;
  border-color: rgba(255, 196, 0, 0.45);
}

.invite-tentative:hover {
  border-color: #ffc400;
  background: rgba(255, 196, 0, 0.1);
}

.invite-decline {
  background: transparent;
  color: var(--muted, #9aa0ae);
  border-color: var(--line, #2a2a35);
}

.invite-decline:hover { color: #ff9a9a; border-color: #ff9a9a; }

/* An UNANSWERED meeting that the organiser has changed since it was invited.

   Visually distinct from a plain invitation without being alarming: the gold
   left border says "this one needs a second look", and the note underneath says
   what changed. Someone who has already answered gets an OK instead of four
   buttons, so the two states are readable at a glance without reading. */
.invite-row-updated {
  border-left: 3px solid #f0b429;
}

/* What changed, written on the row.

   THE MOST IMPORTANT TEXT ON IT, and the reason the row exists. Set in the muted
   grey rather than the accent because it is information, not a call to action --
   the call to action is the button. */
.invite-note {
  display: block;
  margin-top: 3px;
  color: #9aa0ae;
  font-size: 0.68rem;
  line-height: 1.45;
  overflow-wrap: anywhere;
}

.invite-note b {
  color: #f0b429;
  font-weight: 700;
}

/* The event's own identifier, printed small.

   Present because it is the one string that finds the meeting in BOTH the
   calendar and the booking tables -- verified the same value in both, 57 of 57
   -- so it is what gets pasted when something has to be found by hand. Styled as
   a technical footnote rather than hidden: an ID you cannot see is no use, and
   one that looks like a call to action is worse. */
.invite-id {
  display: block;
  margin-top: 3px;
  color: #5c6270;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 0.6rem;
  line-height: 1.4;
  overflow-wrap: anywhere;
  word-break: break-all;
  user-select: all;
}

/* The OK button on an update the person has already answered.

   Grey, not gold: everything else gold on this surface means "act", and this one
   means "I have seen it". Distinct from Decline's hover-red so it cannot be
   mistaken for a rejection. */
.invite-ok {
  background: transparent;
  color: #9aa0ae;
  border-color: #2a2a35;
  font: inherit;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 5px 16px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.invite-ok:hover {
  color: #e7e9ee;
  border-color: #9aa0ae;
}

/* "Decline, keep me posted" -- amber, and deliberately NOT struck through.

   Amber rather than red because red on this surface means final, and this is the
   opposite of final: the person is one moved meeting away from saying yes. The
   line-through is absent for the same reason -- it is not dead, it is waiting. */
.invite-keep {
  background: transparent;
  color: #f59e0b;
  border-color: rgba(245, 158, 11, 0.45);
  font: inherit;
  font-size: 0.68rem;
  font-weight: 700;
  padding: 4px 10px;
  border-radius: 8px;
  cursor: pointer;
  white-space: nowrap;
}

.invite-keep:hover {
  border-color: #f59e0b;
  background: rgba(245, 158, 11, 0.1);
}

/* The event-bar version. Same meaning, sized to sit in the bar rather than the
   strip. */
.ev-keep:hover { background: #f59e0b; color: #241c00; }

/* "Show all" / "Show fewer" */
.invite-more {
  display: block;
  margin: 8px 0 0 14px;
  padding: 0;
  background: none;
  border: 0;
  color: #9aa0ae;
  font: inherit;
  font-size: 0.7rem;
  font-weight: 600;
  cursor: pointer;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.invite-more:hover { color: #e7e9ee; }

/* All four go inert together while an answer is in flight, so a double click
   cannot send two answers for one invitation. Listed as a group rather than as
   the two that existed when this rule was written -- a new button that is not
   named here stays live while the request is out, which is exactly the double
   answer this is here to prevent. */
.invite-accept:disabled,
.invite-tentative:disabled,
.invite-decline:disabled {
  opacity: 0.45;
  cursor: default;
}

/* A tentative hold blocks exactly as a confirmed one does, so it is coloured as
   a real clash rather than softened -- and carries its own state word, because
   "busy" without it would claim the meeting is agreed when it is not. */
.fb-tentative {
  background: rgba(255, 196, 0, 0.10);
}

.fb-tentative .fb-state { color: #ffc400; }


/* A pending invitation: the time is held, the meeting is not agreed. Dashed and
   dimmed rather than coloured, because it occupies exactly as much of the column
   as a confirmed meeting and must not look like one. */
.te-pending {
  opacity: 0.78;
  border-style: dashed !important;
  border-width: 2px;
}

/* The corner marker that used to label a pending block is gone: the bar on top
   of the block now says the same thing in words, and two labels a few pixels
   apart is one too many ways for the state to be read wrong. */

/* A pending Month chip, held to the same rule as the Week and Day block. */
.event-chip.chip-pending {
  border-style: dashed;
  opacity: 0.78;
}

/* A CANCELLED meeting. Red, struck through, and deliberately NOT faded.

   Fading was the obvious move and the wrong one. te-pending fades because a
   pending meeting is dimmed-but-still-real, and dimming says "softer". A cancelled
   meeting is not softer, it is over, and this is the one thing on the calendar a
   glance must not get wrong -- so it keeps full strength, plus a line through the
   title, which survives being read on a phone in a corridor.

   Tinted against the dark calendar rather than filled with a light pink: a solid
   pale block would be the brightest thing on the screen, and "cancelled" should not
   be the thing your eye lands on first. The fill is the same value pattern as
   .cat-* (a low-alpha wash) but in red, so a cancelled meeting is visibly the same
   KIND of block as every other meeting and visibly not one of them.

   It beats the .cat-* rules on !important because both are single-class
   selectors and the category colour is written first; without it the meeting would
   come out gold or green and say the opposite of what it means. */
/* The "who should we tell?" prompt.

   Sits ABOVE the event dialog, and has to say so: it is opened from inside that
   dialog's own submit handler, the two share z-index 120, and with equal z-index
   the LATER one in the document wins. This markup comes first, so without the
   bump the prompt would open perfectly well and be completely invisible behind
   the dialog that raised it -- and the save would appear to hang. */
#modal-notify-scope {
  z-index: 200;
}

.notify-scope-box {
  width: min(460px, 100%);
}

/* Narrower than the event dialog on purpose -- it asks one question with two
   answers and there is nothing to read in it, so a 650px box holding two buttons
   and a sentence looks like a form the user has to fill in. 460px reads as a
   confirmation. */

.notify-scope-text {
  margin: 0 0 18px;
  color: var(--muted);
  font-size: 0.82rem;
  line-height: 1.55;
}

/* Wraps rather than shrinking. On a narrow window two buttons side by side at
   min-width would overflow the dialog, and a control you have to scroll to reach
   is a control nobody presses. */
.notify-scope-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}

.notify-scope-actions .btn-primary,
.notify-scope-actions .btn-secondary {
  flex: 1 1 190px;
}

/* Names who is actually affected, so the choice is informed rather than a guess.

   Deliberately plain text under the buttons rather than a warning colour: this
   is a normal decision, not a hazard, and dressing it in alarm would train people
   to click through it. */
.notify-scope-note {
  margin: 16px 0 0;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: var(--muted);
  font-size: 0.72rem;
  line-height: 1.6;
}

.notify-scope-note strong {
  color: var(--text);
  font-weight: 700;
}

.te-cancelled,
.event-chip.chip-cancelled {
  background: rgba(239, 68, 68, 0.16) !important;
  border-color: #ef4444 !important;
  color: #fca5a5 !important;
  opacity: 1;
}

/* Struck through, on the title only. The time underneath stays legible: you still
   need to know WHEN it would have been to judge whether the gap in your day was
   real. */
.time-event.te-cancelled .te-title,
.event-chip.chip-cancelled .chip-title {
  text-decoration: line-through;
  text-decoration-thickness: 2px;
  text-decoration-color: #ef4444;
}

/* The time line is dimmed by its own opacity, which over a red wash reads as muddy.
   Held at full strength so it is still readable. */
.time-event.te-cancelled .te-time {
  opacity: 1;
  color: #fca5a5;
}

/* A Month chip now holds a bar and a title side by side, so it is a row rather
   than a block of stacked text. */
.event-chip {
  display: flex;
  align-items: center;
  gap: 4px;
}

.event-chip .chip-title {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
  flex: 1 1 auto;
}

/* ==========================================================================
   EVENT BAR  --  status on the left, actions on the right, always on top
   ========================================================================== */

.ev-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 4px;
  /* The bar must never be what a drag grabs or a click lands on by accident,
     so it takes its own clicks and leaves the block's alone. */
  cursor: default;
  flex: 0 0 auto;
  margin: -1px 0 2px;
  padding-bottom: 2px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.14);
}

.ev-status {
  font-size: 0.53rem;
  font-weight: 900;
  letter-spacing: 0.07em;
  text-transform: none;
  padding: 1px 5px;
  border-radius: 999px;
  border: 1px solid currentColor;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  min-width: 0;
}

/* Each state carries its own colour, and each colour is the one already used
   for that state elsewhere -- amber for a hold, green for agreed, red for
   refused -- so the bar cannot introduce a second vocabulary. */
.ev-status-booked    { color: #7fd1ff; }
.ev-status-accepted  { color: #6ee7a0; }
.ev-status-tentative { color: #ffc400; }
.ev-status-declined  { color: #ff9a9a; }

.ev-actions {
  display: flex;
  align-items: center;
  gap: 2px;
  flex: 0 0 auto;
}

.ev-btn {
  font: inherit;
  font-size: 0.62rem;
  line-height: 1;
  width: 15px;
  height: 15px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  border-radius: 4px;
  border: 1px solid transparent;
  background: rgba(255, 255, 255, 0.07);
  color: rgba(255, 255, 255, 0.82);
  cursor: pointer;
}

.ev-btn:hover {
  background: rgba(255, 255, 255, 0.18);
  color: #fff;
}

.ev-btn:focus-visible {
  outline: 2px solid #ffc400;
  outline-offset: 1px;
}

.ev-accept:hover { background: #6ee7a0; color: #06210f; }

/* "Join meeting" -- the one button on this bar that LEAVES the calendar.

   Everything else here changes an answer, an invitation or a record; this one
   opens a room with people in it. It gets the gold the focus ring already uses,
   so it is findable without being louder than the delete button next to it. */
.ev-join:hover { background: #ffc400; color: #241c00; }

/* While the token is being minted. The tab has already opened, so without this
   the bar looks idle for the second or two the request takes and a second click
   mints a second token for the same room. */
.ev-btn.is-busy { opacity: 0.45; cursor: progress; }

/* Tentative and Pencil-in: amber on hover, matching the invitation strip's
   outlined amber. Same reasoning -- "I might come" is neither a committed yes
   nor a no, so it does not get the green or the red. */
.ev-tentative:hover { background: #ffc400; color: #241c00; }

.ev-decline:hover,
.ev-delete:hover,
.ev-remove:hover { background: #ff9a9a; color: #2b0a0a; }

/* A DECLINE WITH "KEEP ME POSTED" -- and deliberately NOT struck through.

   A plain decline is struck through because it is over: the person said no, the
   meeting is not happening for them, and the calendar should look like it is
   finished. This one is the opposite. They said no AND asked to be told if
   anything moves, so the entry is WAITING, and a line through it would claim it
   is not.

   Amber rather than the red of a plain decline, so the two are distinguishable at
   a glance without reading: red is final, amber is watching. Same reasoning as
   the gold/red split on the buttons -- the colour carries the meaning, and the
   label only confirms it. */
.te-watch,
.event-chip.chip-watch {
  background: rgba(245, 158, 11, 0.14) !important;
  border-color: #f59e0b !important;
  color: #fcd34d !important;
  opacity: 1;
}

/* The time line stays full strength: this meeting is still on the calendar and
   still occupies the slot, so dimming it would understate that. */
.time-event.te-watch .te-time {
  opacity: 1;
  color: #fcd34d;
}

/* A short block has no room for five buttons on every row. They are still in
   the DOM and still reachable by keyboard -- they are hidden, not removed --
   but they appear when the block is hovered or anything inside it has focus. */
.ev-actions {
  opacity: 0;
  transition: opacity 0.12s ease-in-out;
}

.time-event:hover .ev-actions,
.time-event:focus-within .ev-actions,
.event-chip:hover .ev-actions,
.event-chip:focus-within .ev-actions {
  opacity: 1;
}

/* Month rows are one line high, so there is never room to hide and reveal.
   The buttons stay visible there and only the labels are dropped. */
/* The Month chip is already `nowrap`, so the pill must shrink rather than push
   the title out of the row. */
.ev-bar-compact .ev-status {
  font-size: 0.5rem;
  padding: 0 4px;
  flex: 0 1 auto;
}

.ev-bar-compact { flex: 0 0 auto; }

/* A Month row is one line high already, so the compact bar drops the rule and
   the gap that separate it from the title on a block. */
.ev-bar-compact {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: 0;
}

/* Hidden buttons must not reserve room. At zero opacity they are still in the
   flow, and on a one-line chip that pushed the title off to the far right with
   a wide empty gap beside it. Overlaying them costs the row nothing until they
   are wanted, and the chip is the positioning context so they land on it. */
.event-chip { position: relative; }

.ev-bar-compact .ev-actions {
  position: absolute;
  right: 4px;
  top: 50%;
  transform: translateY(-50%);
  padding: 1px 3px;
  border-radius: 5px;
  background: rgba(4, 4, 6, 0.92);
}

/* A Month row has one line of height and a cell's full width to spend, but
   seven buttons plus a two-word pill plus a title is more than one line's
   worth. The buttons take the pill's place on hover rather than sitting beside
   it, and the title does the same -- so hovering swaps the row for a full
   action bar without the chip growing or the row overflowing.

   Both are hidden, not removed: the buttons stay in the DOM and reachable by
   keyboard, and the status is never more than one hover away. */
.event-chip:hover .ev-bar-compact .ev-status,
.event-chip:focus-within .ev-bar-compact .ev-status,
.event-chip:hover .ev-bar-compact + .chip-title,
.event-chip:focus-within .ev-bar-compact + .chip-title { display: none; }

.event-chip:hover .ev-bar-compact .ev-actions,
.event-chip:focus-within .ev-bar-compact .ev-actions { opacity: 1; }

.ev-bar-compact .ev-btn {
  font-size: 0.58rem;
  width: 14px;
  height: 14px;
}

/* The bar never gets clipped vertically by a block edge. */
.time-event .ev-bar { overflow: hidden; }

/* The editor's copy: full size, buttons always visible rather than on hover,
   because there is room and no dragging underneath to protect. */
.ev-bar-editor {
  margin: 0 0 14px;
  padding: 8px 10px;
  border: 1px solid var(--line, #2a2a35);
  border-radius: 10px;
}

/* The host carries class "ev-bar" as well as "ev-bar-editor", so it inherits
   .ev-bar's display:flex -- which beats the `hidden` attribute's display:none
   and left an empty bordered strip at the top of every new-event dialog. The
   host is a plain container; the bar inside it is the thing that flexes. */

.ev-bar-editor .ev-actions { opacity: 1; }

.ev-bar-editor .ev-status {
  font-size: 0.68rem;
  padding: 3px 10px;
}

.ev-bar-editor .ev-btn {
  font-size: 0.8rem;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  border-color:#34343e;
  background:#1b1b23;
}
.ev-btn svg{width:11px;height:11px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.ev-bar-editor .ev-btn svg{width:16px;height:16px}
.ev-bar-editor .ev-btn:hover{background:#303b49;border-color:#71839a;color:#f1f5fa}

/* The sentence sits between the state and the buttons, so the buttons stay at
   the right edge where every other toolbar on the page puts them. */
.ev-bar-editor .ev-note {
  flex: 1 1 auto;
  font-size: 0.7rem;
  line-height: 1.35;
  color: var(--muted, #9aa0ae);
}

/* A short block: the time line is dropped and the title keeps the room. The
   pill and the buttons are the same size, so the bar costs one line either way
   rather than two. */
.time-event.te-short { padding-top: 2px; }
.time-event.te-short .te-time { display: none; }
.time-event.te-short .ev-bar {
  margin-bottom: 1px;
  padding-bottom: 1px;
}

/* On hover the buttons take the pill's place instead of being added beside it,
   so revealing them costs no vertical space on a block that has none. */
.time-event.te-short:hover .ev-status,
.time-event.te-short:focus-within .ev-status { display: none; }

/* A narrow block -- one sharing its column with other events -- keeps the pill
   and nothing else. The pill takes the whole row: at 57px there is room for
   one word and not for a word plus buttons, and a clipped "BOO..." is worse
   than useless because it cannot be read as anything at all. The buttons come
   back as an overlay on hover, over the block's own text. */
.time-event.te-narrow .ev-status {
  flex: 1 1 auto;
  max-width: 100%;
  padding-left: 4px;
  padding-right: 4px;
  letter-spacing: 0.04em;
}

.time-event.te-narrow .ev-bar { gap: 0; }

/* Every pixel counts at this width, so the block gives up its own horizontal
   padding as well as the bar's. */
.time-event.te-narrow { padding-left: 3px; padding-right: 3px; }

.time-event.te-narrow .ev-actions {
  position: absolute;
  right: 3px;
  top: 2px;
  padding: 1px 2px;
  border-radius: 4px;
  background: rgba(4, 4, 6, 0.9);
}

.time-event.te-narrow:hover .ev-status,
.time-event.te-narrow:focus-within .ev-status,
.time-event.te-narrow:hover .te-title,
.time-event.te-narrow:focus-within .te-title { visibility: hidden; }

/* ========================================================
   RESIZABLE & DRAGGABLE EVENT MODAL WINDOW
   ======================================================== */
#modal-event {
  overflow: hidden;
}

#modal-event.drag-active {
  user-select: none;
}

#form-event {
  width: min(920px, 94vw);
  max-width: 95vw;
  max-height: 92vh;
  resize: both;
  overflow: auto;
  position: relative;
  min-width: 480px;
  min-height: 480px;
  transition: box-shadow 0.2s ease;
}

#form-event h2 {
  cursor: grab;
  user-select: none;
  padding-bottom: 8px;
  border-bottom: 1px solid var(--line);
}

#form-event h2:active {
  cursor: grabbing;
}

/* ========================================================
   LOTUS NOTES / OUTLOOK STYLE SCHEDULER MATRIX
   ======================================================== */
.scheduler-container {
  margin: 12px 0 14px;
  background: #09090e;
  border: 1px solid var(--line-strong);
  border-radius: 8px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

/* ==========================================================================
   SCHEDULER READ-ONLY  --  this meeting is somebody else's
   ==========================================================================

   An invitation is a hold in the invitee's calendar, not an event they may
   rearrange. The grid still shows the truth -- who is busy, which room is free
   -- because that is the information somebody replying to an invitation wants.
   What is taken away is only the ability to change the time, which is the
   organiser's to set.

   The pointer changes as well as the handles. A cursor still reading "grab"
   over a band that will not move is the interface making a promise it is not
   keeping, and it is worse than an obviously dead control. */
.scheduler-container.sch-locked .sch-cell {
  cursor: default;
}

.scheduler-container.sch-locked .sch-selected-band {
  cursor: default;
}

/* Reading marks, not writing ones. The band loses its grab handle and its
   resize edge is gone entirely, so there is nothing to try and fail with. */
.scheduler-container.sch-locked .sch-band-grab,
.scheduler-container.sch-locked .sch-band-resize {
  display: none;
}

.scheduler-container.sch-locked .sch-cell:hover {
  filter: none;
  outline: 0;
}

/* The note, in words, over the top of the grid. */
.sch-lock-note {
  margin: 0;
  padding: 7px 12px;
  font-size: 0.7rem;
  line-height: 1.4;
  color: #ffc400;
  background: rgba(255, 196, 0, 0.08);
  border-top: 1px solid rgba(255, 196, 0, 0.2);
  border-bottom: 1px solid rgba(255, 196, 0, 0.2);
}

/* ==========================================================================
   EVENT EDITOR  --  presentation
   ==========================================================================

   Everything here is decoration over markup that already worked. No id was
   renamed and no control was replaced: the switch is still a checkbox, the
   chips are still a view of the same text field, and the faces are still
   decoration beside a name that was always there. */

#form-event { --ev-accent: #f5a623; }

/* A warm wash and a soft outer glow, so the dialog reads as its own surface
   rather than as a dark card floating on a dark page. */
#form-event {
  background:
    radial-gradient(120% 60% at 50% -10%, rgba(245, 166, 35, 0.10), transparent 60%),
    #0d0d12;
  border-color: rgba(245, 166, 35, 0.28);
  box-shadow:
    0 24px 60px rgba(0, 0, 0, 0.85),
    0 0 0 1px rgba(245, 166, 35, 0.10),
    0 0 44px rgba(245, 166, 35, 0.10);
  border-radius: 18px;
  padding: 24px 26px;
}

#form-event h2 { font-size: 1.4rem; letter-spacing: -0.01em; }

/* Every field gets a lit edge, which is what makes the form read as a set of
   controls rather than a wall of text. */
#form-event input:not([type="hidden"]):not([type="checkbox"]):not([type="button"]),
#form-event select,
#form-event textarea {
  background: rgba(255, 255, 255, 0.035);
  border: 1px solid rgba(245, 166, 35, 0.22);
  border-radius: 10px;
  padding: 11px 13px;
  color: var(--fg, #e8eaf0);
  font: inherit;
  font-size: 0.88rem;
  transition: border-color 0.15s, box-shadow 0.15s, background 0.15s;
}

#form-event input:not([type="hidden"]):focus,
#form-event select:focus,
#form-event textarea:focus {
  outline: none;
  border-color: rgba(245, 166, 35, 0.75);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16);
  background: rgba(255, 255, 255, 0.05);
}

#form-event input::placeholder,
#form-event textarea::placeholder { color: #6b7280; }

/* The native date and time pickers are dark-mode-hostile on most platforms, so
   their indicator is tinted to match rather than left as a white square. */
#form-event input[type="date"]::-webkit-calendar-picker-indicator,
#form-event input[type="time"]::-webkit-calendar-picker-indicator {
  filter: invert(72%) sepia(58%) saturate(900%) hue-rotate(340deg) brightness(105%);
  cursor: pointer;
}

/* Labels, with their icon. */
/* The row separators are gone.

   .form-grid carries a bottom border for every form on the site, and in the
   event editor it drew a line under Title, Calendar, All Day, Starts, Ends,
   Location and Attendees. With the fields themselves now bordered and lit, the
   lines were a second, weaker way of saying the same thing -- and they cut
   straight across the label column, which is where the eye was trying to read.

   Scoped to this form rather than removed from .form-grid, because the other
   dialogs still use it and were not asked about. */
#form-event .form-grid {
  align-items: center;
  margin-bottom: 10px;
  border-bottom: 0;
  padding-bottom: 0;
}
#form-event .form-grid > label {
  display: flex;
  align-items: center;
  gap: 9px;
  color: #b9bdc7;
  font-size: 0.82rem;
  font-weight: 600;
  padding-right: 12px;
}

.fg-icon { font-size: 0.95rem; line-height: 1; opacity: 0.9; }

/* Real artwork rather than a glyph, where an icon file exists. 72x72 with a
   transparent background, so it is scaled to the label's line height and never
   stretched -- at the source size it would be larger than the text beside it. */
.fg-icon-img {
  width: 17px;
  height: 17px;
  object-fit: contain;
  flex: 0 0 auto;
  opacity: 0.95;
}

/* Date and time sit as two bordered halves rather than two bare inputs. */
.date-time-row { display: flex; gap: 10px; }
.dt-field { position: relative; display: flex; align-items: center; flex: 1; }
.dt-field .dt-icon {
  position: absolute;
  left: 11px;
  font-size: 0.8rem;
  opacity: 0.7;
  pointer-events: none;
}
.dt-field input { width: 100%; padding-left: 32px !important; }

/* The artwork version of the same icon. Matches the label icon exactly, so the
   date half and the time half of a row read as one control. */
.dt-icon-img {
  position: absolute;
  left: 10px;
  width: 15px;
  height: 15px;
  object-fit: contain;
  pointer-events: none;
  z-index: 1;
}

/* The switch. A real checkbox, restyled -- the id, the checked state and the
   change event all still behave exactly as they did. */
.switch-row { padding: 2px 0; }
.switch {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  user-select: none;
}
/* The input itself is hidden but NOT display:none, so it keeps taking focus and
   stays reachable by keyboard. Hiding it outright would take it out of the tab
   order entirely. */
.switch input[type="checkbox"] {
  position: absolute;
  opacity: 0;
  width: 1px;
  height: 1px;
  margin: 0;
}
.switch-track {
  width: 46px;
  height: 25px;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.10);
  border: 1px solid rgba(255, 255, 255, 0.16);
  position: relative;
  transition: background 0.18s, border-color 0.18s;
  flex: 0 0 auto;
}
.switch-thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 19px;
  height: 19px;
  border-radius: 50%;
  background: #8b8f99;
  transition: transform 0.18s, background 0.18s;
}
.switch input:checked + .switch-track {
  background: rgba(245, 166, 35, 0.85);
  border-color: rgba(245, 166, 35, 0.95);
}
.switch input:checked + .switch-track .switch-thumb {
  transform: translateX(21px);
  background: #1a1408;
}
.switch input:focus-visible + .switch-track {
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.35);
}
.switch-word { font-size: 0.84rem; color: var(--fg, #e8eaf0); }

/* Location, with the picker beside it. */
.loc-row { display: flex; gap: 10px; align-items: center; }
.loc-row input { flex: 1; }
#form-event .send-btn {
  border-radius: 10px;
  padding: 11px 16px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  white-space: nowrap;
  background: rgba(245, 166, 35, 0.14);
  border: 1px solid rgba(245, 166, 35, 0.45);
  color: #ffd27a;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}
#form-event .send-btn:hover:not(:disabled) {
  background: rgba(245, 166, 35, 0.24);
  border-color: rgba(245, 166, 35, 0.8);
}
#form-event .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }

.btn-ico { font-size: 0.9rem; line-height: 1; }

/* Artwork inside a button, at the same size the glyph it replaced was. */
.btn-ico-img {
  width: 15px;
  height: 15px;
  object-fit: contain;
  flex: 0 0 auto;
}

/* ==========================================================================
   ATTENDEE CHIPS
   ==========================================================================

   The field is still the field. It sits inside the chip box and takes what is
   left, and the chips sit above it, so the caret still lands in a real text
   input and typing still goes where it always did. */
.chip-field {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  padding: 7px 9px;
  border: 1px solid rgba(245, 166, 35, 0.22);
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.035);
  transition: border-color 0.15s, box-shadow 0.15s;
  cursor: text;
}
.chip-field:focus-within {
  border-color: rgba(245, 166, 35, 0.75);
  box-shadow: 0 0 0 3px rgba(245, 166, 35, 0.16);
}
.chip-field input {
  flex: 1 1 160px;
  min-width: 140px;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  padding: 4px 2px !important;
  font-size: 0.85rem;
}

.chip-list {
  display: contents;
  list-style: none;
  margin: 0;
  padding: 0;
}

.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 6px 3px 3px;
  border-radius: 999px;
  background: rgba(245, 166, 35, 0.13);
  border: 1px solid rgba(245, 166, 35, 0.32);
  max-width: 100%;
}

/* A face: the person's photograph, or their initials underneath it.

   The initials are never removed, only covered. The avatar endpoint 404s for
   anybody with no picture set, and an <img> left pointing at a 404 renders the
   browser's broken-image glyph on top of the initials -- so the image is
   removed on error and the circle below is what remains. */
.face {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  color: #0b0b0f;
  font-weight: 800;
  flex: 0 0 auto;
  position: relative;
  overflow: hidden;
}

.face-initials { line-height: 1; }

.face-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  border-radius: 50%;
}

.chip .face { width: 22px; height: 22px; font-size: 0.6rem; }
.fb-row .face { width: 26px; height: 26px; font-size: 0.68rem; }

.chip-name {
  font-size: 0.76rem;
  color: #ffe0ad;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 190px;
}

.chip-x {
  background: none;
  border: 0;
  color: #e0b871;
  cursor: pointer;
  font-size: 0.95rem;
  line-height: 1;
  padding: 0 2px;
  border-radius: 4px;
}
.chip-x:hover { color: #fff; background: rgba(255, 255, 255, 0.14); }

/* ==========================================================================
   AVAILABILITY  --  a face beside every name
   ========================================================================== */

.freebusy-list .fb-row { gap: 10px; }
.fb-row .fb-name { flex: 1 1 auto; min-width: 0; }

#form-event .freebusy {
  border-color: rgba(245, 166, 35, 0.20);
  background: rgba(245, 166, 35, 0.05);
}

/* ==========================================================================
   FOOTER
   ========================================================================== */

#form-event .modal-actions { margin-top: 18px; }
#form-event .modal-actions .send-btn {
  background: linear-gradient(180deg, #ffc861, #f0a02a);
  border: 1px solid #ffd27a;
  color: #241703;
  font-size: 0.9rem;
  padding: 12px 22px;
}
#form-event .modal-actions .send-btn:hover:not(:disabled) {
  background: linear-gradient(180deg, #ffd68a, #ffb43c);
  border-color: #ffe2ae;
}
#form-event .modal-actions .send-btn:disabled { opacity: 0.4; cursor: not-allowed; }
.btn-icon-svg{width:15px;height:15px;flex:0 0 auto;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
#form-event .modal-actions .send-btn,#form-event .modal-actions .danger-btn{display:inline-flex;align-items:center;gap:7px}

#form-event .cancel-btn {
  border-radius: 10px;
  padding: 12px 18px;
  border: 1px solid rgba(255, 255, 255, 0.16);
  background: transparent;
  color: #c3c7d1;
  cursor: pointer;
  font: inherit;
}
#form-event .cancel-btn:hover { background: rgba(255, 255, 255, 0.06); color: #fff; }

#form-event .danger-btn {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  border-radius: 10px;
  padding: 11px 16px;
  border: 1px solid rgba(248, 113, 113, 0.45);
  background: rgba(248, 113, 113, 0.10);
  color: #fca5a5;
  cursor: pointer;
  font: inherit;
  font-weight: 700;
}
#form-event .danger-btn:hover {
  background: rgba(248, 113, 113, 0.2);
  border-color: #f87171;
  color: #fecaca;
}

#form-event .ev-dialog-head {
  background: transparent;
  border-bottom: 1px solid rgba(245, 166, 35, 0.18);
}
#form-event textarea { min-height: 78px; resize: vertical; }

/* A read-only editor.

   The whole form is dimmed rather than hidden, because an invitation is still
   worth reading -- the time, the room and who else is coming are the answer
   somebody deciding whether to accept actually needs. What is taken away is
   the ability to change any of it.

   type=button controls are left alone on purpose: those are the action bar's
   Accept and Decline, and an invitation with no way to answer it would be
   worse than useless. */
#form-event.ev-readonly input:not([type="hidden"]):not([type="button"]),
#form-event.ev-readonly select,
#form-event.ev-readonly textarea,
#form-event.ev-readonly button.send-btn {
  opacity: 0.6;
  cursor: not-allowed;
}

#form-event.ev-readonly input:not([type="hidden"]):not([type="button"]),
#form-event.ev-readonly textarea {
  border-style: dashed;
}

#form-event.ev-readonly select:disabled,
#form-event.ev-readonly button:disabled {
  opacity: 0.45;
}

/* The whole editor carries one faint wash, so the panel reads as somebody
   else's at a glance rather than needing a control inspected to work out. */
#form-event.ev-readonly .form-grid { opacity: 0.72; }

#form-event.ev-readonly .form-grid:hover { opacity: 0.9; }

.scheduler-hdr-bar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 6px 12px;
  background: #111118;
  border-bottom: 1px solid var(--line);
  flex-wrap: wrap;
  gap: 8px;
}

.scheduler-tabs {
  display: flex;
  gap: 4px;
}

.sch-tab {
  background: transparent;
  border: 1px solid transparent;
  color: var(--muted, #9aa0ae);
  font-size: 0.74rem;
  font-weight: 750;
  padding: 4px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.sch-tab:hover {
  color: #fff;
  background: rgba(255,255,255,0.04);
}

.sch-tab.active {
  background: rgba(255,196,0,0.12);
  color: var(--gold, #f59e0b);
  border-color: rgba(255,196,0,0.3);
}

.scheduler-nav-cluster {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 0.72rem;
}

.sch-status-indicator {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.68rem;
  font-weight: 700;
  color: #a1a1aa;
  background: rgba(255, 255, 255, 0.05);
  padding: 2px 8px;
  border-radius: 999px;
  border: 1px solid rgba(255, 255, 255, 0.1);
  animation: pulse 1.5s infinite;
}

.sch-status-indicator.sch-status-error {
  color: #f87171;
  background: rgba(239, 68, 68, 0.12);
  border-color: rgba(239, 68, 68, 0.3);
  animation: none;
}

.sch-link-btn {
  background: none;
  border: none;
  color: #38bdf8;
  font-size: 0.72rem;
  font-weight: 700;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  border-radius: 4px;
}

.sch-link-btn:hover {
  background: rgba(56, 189, 248, 0.1);
  text-decoration: underline;
}

.sch-sep {
  color: #444;
}

.sch-nav-btn {
  background: #1a1a24;
  border: 1px solid var(--line);
  color: #e4e4e7;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 0.74rem;
  font-weight: 750;
  cursor: pointer;
}

.sch-nav-btn:hover {
  background: #272736;
  border-color: #555;
}

.sch-date-range-lbl {
  font-weight: 800;
  color: #f4f4f5;
  font-size: 0.74rem;
}

.scheduler-subnote {
  padding: 6px 12px;
  font-size: 0.68rem;
  color: #888899;
  background: #0d0d14;
  border-bottom: 1px solid var(--line);
}

.scheduler-viewport {
  max-height: 260px;
  overflow-x: auto;
  overflow-y: auto;
  position: relative;
  background: #050508;
}

/* Scheduler Table Layout */
.sch-table {
  border-collapse: collapse;
  width: max-content;
  min-width: 100%;
  font-size: 0.70rem;
  color: #ddd;
}

/* The grid is blocks again.

   The cells carry their own border, so an hour reads as a tile and a row reads
   as a row of them. That is the shape a schedule has, and the continuous-band
   version lost it. */
.sch-table th, .sch-table td {
  padding: 0;
  margin: 0;
  border: 1px solid rgba(255, 255, 255, 0.07);
}

/* Row Headers on the left (Invitees, Rooms, Resources) */
.sch-col-invitee-hdr {
  position: sticky;
  left: 0;
  z-index: 20;
  background: #111117;
  width: 170px;
  min-width: 170px;
  max-width: 170px;
  padding: 5px 8px;
  text-align: left;
  border-right: 2px solid var(--line-strong);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  box-shadow: 2px 0 5px rgba(0,0,0,0.4);
}

.sch-table th.sch-col-invitee-hdr {
  top: 0;
  z-index: 30;
  background: #14141e;
  font-size: 0.70rem;
  font-weight: 850;
  color: #aaa;
}

.sch-header-top-row th {
  position: sticky;
  top: 0;
  z-index: 10;
  background: #13131c;
  text-align: center;
  padding: 4px 6px;
  font-size: 0.72rem;
  font-weight: 800;
  color: #f1f5f9;
  border-bottom: 1px solid var(--line);
}

.sch-header-time-row th {
  position: sticky;
  top: 26px;
  z-index: 10;
  background: #0e0e16;
  text-align: center;
  font-size: 0.60rem;
  color: #888899;
  font-weight: 700;
  min-width: 24px;
  width: 24px;
  height: 20px;
  line-height: 20px;
  border-bottom: 2px solid var(--line-strong);
}

.sch-group-row td {
  background: #12121c;
  font-weight: 800;
  color: #a1a1aa;
  font-size: 0.68rem;
}

/* Both of these used to be on the row itself, and both made the summary row one
   pixel taller than the person rows -- 25px against 24px -- so the summary's
   cells sat a pixel below the column they summarise.

   Padding moved to the LABEL only: applied to every td it also padded the hour
   cells and inflated them.

   The separating border moved to the CELLS. On the row it added a pixel to the
   row's height; on the cells, with border-collapse on, it is drawn inside the
   cell's own height and every row measures the same. */
.sch-group-row td {
  /* A separator line drawn INSIDE the cell rather than as a border on it.

     With border-collapse on, a top border is shared with the row above, which
     has none, so it is added to this row's height -- the summary row measured
     25px against the people rows' 24px and its cells sat a pixel low. An inset
     shadow is painted inside the cell's own height, so the line still spans the
     row and every row measures identically. */
  box-shadow: inset 0 1px 0 var(--line);
}

.sch-group-row td.sch-col-invitee-hdr,
.sch-group-row td.sch-no-resource {
  /* Zero vertical padding, like the person rows. The group's own text already
     fits the row's height, and the 4px of padding was the whole reason this row
     measured 25px against everybody else's 24px. The inset comes from the
     sticky column's own horizontal padding plus a little letter-spacing room;
     the line stays legible because the row is 24px tall and the text 11px. */
  padding: 0 8px;
}

.sch-cell {
  width: 24px;
  min-width: 24px;
  height: 24px;
  padding: 0;
  text-align: center;
  cursor: pointer;
  position: relative;
  transition: filter 0.1s;
}

.sch-cell:hover {
  filter: brightness(1.25);
  outline: 1px solid var(--gold);
  z-index: 5;
}

/* Time slot states.

   Written with the .sch-table td prefix on purpose. .sch-group-row td -- the
   summary and room group rows -- is (0,1,1) and a bare .sch-busy is (0,1,0), so
   the group's own background silently won and the summary row painted every
   busy hour as plain header grey. The summary row is the one that most needs to
   show a clash, so the state classes get the higher specificity rather than the
   group being weakened. */
.sch-table td.sch-avail {
  background: rgba(255, 255, 255, 0.03);
}

.sch-table td.sch-busy {
  background: #b91c1c; /* Crimson / red */
}

.sch-table td.sch-tentative {
  background: #b45309; /* Amber / brown */
}

.sch-table td.sch-unavail {
  background: #1f2937; /* Dark slate for non-working hours */
}

/* The old version of the selection band forced its own amber with !important,
   which meant a band drawn over a busy hour hid the clash. The band now
   overlays whatever the slot already is, so "this is the meeting I am
   proposing" and "somebody is busy then" are both visible at once -- see the
   .sch-table td.sch-selected-band rule further down. */

/* Scheduler Legend */
.scheduler-legend {
  display: flex;
  gap: 16px;
  padding: 6px 12px;
  background: #0d0d14;
  border-top: 1px solid var(--line);
  font-size: 0.66rem;
  color: #999;
  flex-wrap: wrap;
  align-items: center;
}

/* ==========================================================================
   SCHEDULER GRID  --  sticky headers, drag and resize
   ==========================================================================

   The header rows and the name column are all sticky, and the corner where they
   meet needs a higher z-index than either alone or the day names slide under
   the names as the grid scrolls diagonally. */
.sch-day-hdr { position: sticky; top: 0; z-index: 10; }
.sch-hour-hdr { position: sticky; top: 26px; z-index: 10; }
.sch-sticky-col { position: sticky; left: 0; z-index: 20; }
.sch-table thead th.sch-sticky-col { z-index: 30; }
.sch-table thead th.sch-day-hdr { z-index: 10; }

.sch-name-hdr {
  font-size: 0.64rem;
  color: #888;
  font-weight: 700;
}

/* What the grid is showing, and whether it can be trusted. A failed read says
   so in words: a silent wall of free hours reads as "everybody is available",
   which is the one answer a scheduler must never give by accident. */
.sch-banner {
  margin: 0;
  padding: 6px 10px;
  font-size: 0.68rem;
  color: #9aa0ae;
  background: #101018;
  border-bottom: 1px solid var(--line);
}

.sch-banner-bad {
  color: #ff9a9a;
  background: rgba(185, 28, 28, 0.16);
}

/* Partly tentative: some of the people in this slot are held but have not
   answered, and the rest are properly busy. Neither colour alone is true, so
   it is drawn as its own state rather than rounded to one or the other. */
.sch-table td.sch-mixed {
  background: repeating-linear-gradient(
    45deg, #b45309, #b45309 3px, #7c2d12 3px, #7c2d12 6px);
}

/* The chosen meeting. It is drawn over the slot state rather than replacing it,
   because "free" and "this is the one I am proposing" are different facts and
   a band that hid the first would hide a clash it is sitting on. */
.sch-table td.sch-selected-band {
  box-shadow: inset 0 0 0 2px var(--gold);
  background-image: linear-gradient(
    rgba(245, 158, 11, 0.30), rgba(245, 158, 11, 0.30));
  cursor: grab;
  z-index: 6;
}

.sch-table td.sch-selected-band:active { cursor: grabbing; }

/* The whole selected area is the drag target, so it reads as one thing rather
   than as several cells. */
.sch-band-grab {
  position: absolute;
  inset: 0;
  cursor: grab;
}

.sch-band-grab:active { cursor: grabbing; }

/* The trailing edge is the resize handle. Widen past the cell so it can be
   caught without hunting for a few pixels. */
.sch-band-resize {
  position: absolute;
  right: -4px;
  top: 0;
  bottom: 0;
  width: 8px;
  cursor: ew-resize;
  z-index: 3;
}

.sch-band-resize::after {
  content: '';
  position: absolute;
  left: 3px;
  top: 4px;
  bottom: 4px;
  width: 2px;
  background: var(--gold);
  opacity: 0.9;
}

.sch-band-resize:hover { background: rgba(245, 158, 11, 0.35); }

/* While a drag is in flight the whole grid stops taking its own clicks --
   hovering to redraw would fight the drag, and the cursor says so. */
body.sch-dragging,
body.sch-dragging .sch-cell { cursor: grabbing !important; }

body.sch-dragging .sch-cell:hover { filter: none; outline: 0; }

.sch-person-row td.sch-col-invitee-hdr { font-weight: 600; }
.sch-group-label { color: #f59e0b !important; }
.sch-res-group { color: #38bdf8 !important; }

.sch-no-resource {
  padding: 8px 10px !important;
  font-size: 0.68rem;
  color: #7c8290;
  font-style: italic;
}

/* ==========================================================================
   EVENT DIALOG HEADER  --  frozen
   ==========================================================================

   The dialog scrolls, and the action bar is the thing worth reading at every
   scroll position: it says whether this meeting is agreed, and it carries
   accept, decline and delete. Scrolling it away meant the one moment a person
   most needed it -- part way down, deciding -- was the moment it was gone.

   The title and the bar are frozen together as a single sticky block, and that
   block is opaque. Frozen separately they left a gap for content to scroll
   through, and the bar's own translucent background let the Availability panel
   read as part of the toolbar. */
.ev-dialog-head {
  position: sticky;
  top: -22px;
  z-index: 30;
  /* Pulled up over the dialog's own padding so the frozen block starts flush
     with the dialog's top edge rather than 22px below it. */
  margin: -22px -22px 16px;
  padding: 16px 22px 14px;
  background: #0d0d12;
  border-bottom: 1px solid var(--line);
}

.ev-dialog-head h2 { margin: 0; }

.ev-bar-editor {
  margin: 0;
  padding: 8px 10px;
  border: 1px solid var(--line, #2a2a35);
  border-radius: 10px;
}

/* The host carries class "ev-bar" as well as "ev-bar-editor", so it inherits
   .ev-bar's display:flex -- which beats the `hidden` attribute's display:none
   and left an empty bordered strip at the top of every new-event dialog. The
   host is a plain container; the bar inside it is the thing that flexes. */
.ev-bar-editor[hidden] { display: none; }

.legend-item {
  display: inline-flex;
  align-items: center;
  gap: 6px;
}

.legend-swatch {
  width: 14px;
  height: 10px;
  border-radius: 2px;
  border: 1px solid rgba(255,255,255,0.15);
  display: inline-block;
}

.leg-avail { background: rgba(255, 255, 255, 0.05); }
.leg-busy { background: #b91c1c; }
.leg-tentative { background: #b45309; }
.leg-unavail { background: #1f2937; }

/* ========================================================
   INVITEE STATUS TAB VIEW (LOTUS NOTES STYLE)
   ======================================================== */
.sch-status-panel {
  padding: 8px 12px;
  background: #08080c;
  min-height: 190px;
}

.sch-status-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 0.74rem;
}

.sch-status-table th {
  text-align: left;
  padding: 6px 10px;
  font-size: 0.70rem;
  font-weight: 800;
  color: #a1a1aa;
  background: #111118;
  border-bottom: 2px solid var(--line-strong);
}

.sch-status-table td {
  padding: 6px 10px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.05);
  color: #f4f4f5;
}

.sch-status-group-hdr td {
  background: #13131c;
  font-weight: 850;
  color: #e4e4e7;
  font-size: 0.72rem;
  border-top: 1px solid var(--line);
  padding: 5px 10px;
}

.sch-status-row:hover td {
  background: rgba(255, 255, 255, 0.02);
}

.sch-status-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.02em;
}

.sch-pill-accepted {
  background: rgba(34, 197, 94, 0.14);
  color: #4ade80;
  border: 1px solid rgba(34, 197, 94, 0.35);
}

.sch-pill-tentative {
  background: rgba(245, 158, 11, 0.14);
  color: #fbbf24;
  border: 1px solid rgba(245, 158, 11, 0.35);
}

.sch-pill-declined {
  background: rgba(239, 68, 68, 0.14);
  color: #f87171;
  border: 1px solid rgba(239, 68, 68, 0.35);
}

.sch-pill-none {
  background: rgba(148, 163, 184, 0.12);
  color: #cbd5e1;
  border: 1px solid rgba(148, 163, 184, 0.25);
}

.sch-indent-user {
  padding-left: 20px !important;
}



/* Modern scheduler skin: scoped to event editor, no global .row/.nav/table overrides. */
#modal-event .sch-modern {--sch-gold:#ffc83d;--sch-orange:#ff9f1a;--sch-line:#6b4f12;--sch-free:#13a05a;--sch-busy:#e01b1b;--sch-tent:#ff9a14; background:rgba(0,0,0,.35);border:1.5px solid var(--sch-line);border-radius:12px;padding:10px;margin:14px 0;color:#f3ece0;}
#modal-event .sch-modern .scheduler-hdr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap;background:transparent;border:0;padding:0;}
#modal-event .sch-modern .scheduler-tabs{display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#modal-event .sch-modern .sch-tab{border:0;border-radius:8px;padding:10px 16px;background:transparent;color:#f3ece0;font-weight:600;cursor:pointer;}
#modal-event .sch-modern .sch-tab.active{background:linear-gradient(180deg,var(--sch-gold),var(--sch-orange));color:#1a1000;box-shadow:0 0 14px rgba(255,159,26,.4);}
#modal-event .sch-modern .scheduler-nav-cluster{display:flex;align-items:center;gap:7px;flex-wrap:wrap;margin-left:auto;}
#modal-event .sch-modern .sch-link-btn,#modal-event .sch-modern .sch-nav-btn,#modal-event .sch-modern .sch-range-button{border:1px solid var(--sch-orange);background:linear-gradient(180deg,#2c1f08,#1a1206);color:var(--sch-gold);border-radius:9px;padding:8px 12px;cursor:pointer;white-space:nowrap;font-weight:600;}
#modal-event .sch-modern .sch-nav-btn{font-size:18px;min-width:34px;}
#modal-event .sch-modern .scheduler-subnote{color:#b6b1d0;font-style:italic;font-size:13px;margin:10px 4px;}
#modal-event .sch-modern .scheduler-viewport{overflow:auto;border:1px solid var(--sch-line);border-radius:8px;max-width:100%;}
#modal-event .sch-modern .sch-table{border-collapse:collapse;min-width:max-content;width:100%;}
#modal-event .sch-modern .sch-table th{background:#241b09;color:#f3ece0;}
#modal-event .sch-modern .sch-table td,#modal-event .sch-modern .sch-table th{border-color:#2a2417;}
#modal-event .sch-modern .sch-table .sch-sticky-col{background:#14100a;}
#modal-event .sch-modern .scheduler-legend{display:flex;gap:18px;flex-wrap:wrap;padding:12px 6px 4px;color:#cfc9e0;}
#modal-event .sch-modern .legend-swatch{width:18px;height:18px;border-radius:3px;}
#modal-event .sch-modern #sch-range-picker:not([hidden]){width:155px;background:#1a140b;color:#f3ece0;border:1px solid var(--sch-orange);border-radius:8px;padding:7px;}
@media(max-width:760px){#modal-event .sch-modern .scheduler-nav-cluster{margin-left:0;}#modal-event .sch-modern .sch-tab{padding:8px 10px;}}

/* Scheduler v2: match the supplied compact dark matrix reference.
   All overrides are scoped to the event editor. */
#modal-event .sch-reference{background:transparent;border:0;border-top:1px solid rgba(255,255,255,.1);border-radius:0;padding:14px 0 0;margin:8px 0 12px;color:#e5e7eb;box-shadow:none}
#modal-event .sch-reference .scheduler-hdr-bar{justify-content:space-between;gap:8px}
#modal-event .sch-reference .scheduler-tabs{gap:4px}
#modal-event .sch-reference .sch-tab{padding:8px 12px;border:1px solid transparent;border-radius:7px;background:transparent;color:#9ca3af;font-size:13px;font-weight:650;box-shadow:none}
#modal-event .sch-reference .sch-tab.active{background:#ffc400;color:#101014;border-color:#ffc400;box-shadow:none}
#modal-event .sch-reference .scheduler-nav-cluster{gap:7px;margin-left:auto}
#modal-event .sch-reference .sch-link-btn{background:transparent;border:0;color:#38a6ff;box-shadow:none;font-size:13px;padding:6px 10px}
#modal-event .sch-reference .sch-nav-btn{min-width:29px;height:30px;padding:4px 9px;border:1px solid #35353e;background:#17171d;color:#e6e6ee;font-size:14px;border-radius:6px;box-shadow:none}
#modal-event .sch-reference .sch-range-button{padding:4px 3px;border:0;background:transparent;color:#fff;font-size:13px;font-weight:750;box-shadow:none}
#modal-event .sch-reference .scheduler-subnote{margin:11px 3px 9px;font-size:12.5px;font-style:normal;color:#939aad}
#modal-event .sch-reference .scheduler-viewport{border:1px solid #25252e;background:#0e0e14;border-radius:8px;max-height:360px;overflow:auto}
#modal-event .sch-reference .sch-table{border-collapse:collapse;min-width:max-content;width:100%;font-size:12px}
#modal-event .sch-reference .sch-table th{background:#14141a;color:#d3d9e7;border-color:#23232b;font-size:11px;height:26px}
#modal-event .sch-reference .sch-table .sch-sticky-col{background:#101016;color:#e7eaf2;min-width:205px;width:205px;padding-left:9px}
#modal-event .sch-reference .sch-table .sch-group-row .sch-sticky-col{background:#15151c;font-weight:750;color:#fff}
#modal-event .sch-reference .sch-table td.sch-cell{height:32px;min-width:44px;width:44px;border:1px solid #23232b}
#modal-event .sch-reference .sch-table td.sch-avail{background:#101016}
#modal-event .sch-reference .sch-table td.sch-busy{background:#c52c2f}
#modal-event .sch-reference .sch-table td.sch-tentative{background:#ff9a14}
#modal-event .sch-reference .sch-table td.sch-unavail{background:#393939}
#modal-event .sch-reference .sch-table td.sch-selected-band{background-color:rgba(30,157,89,.35);box-shadow:inset 0 2px #48d68e,inset 0 -2px #48d68e,0 0 12px rgba(30,157,89,.22)}
#modal-event .sch-reference .sch-table td.sch-selected-band.sch-busy{background-color:#a52d32;box-shadow:inset 0 2px #ff6b6b,inset 0 -2px #ff6b6b}
#modal-event .sch-reference .scheduler-legend{gap:22px;padding:10px 5px 2px;color:#a0a7b9;font-size:12px}
#modal-event .sch-reference .legend-swatch{width:20px;height:20px;border-radius:4px}
@media(max-width:820px){#modal-event .sch-reference .scheduler-nav-cluster{margin-left:0}#modal-event .sch-reference .sch-tab{padding:7px 8px}}

/* LEXION SCHEDULER V3 — genuine scheduler DOM, isolated from Workspace */
#modal-event .lexion-scheduler{--lx-gold:#ffc83d;--lx-orange:#ff9f1a;--lx-line:#6b4f12;--lx-free:#13a05a;--lx-busy:#e01b1b;--lx-tent:#ff9a14;display:block;margin:14px 0;padding:10px;background:rgba(0,0,0,.35);border:1.5px solid var(--lx-line);border-radius:12px;color:#f3ece0;box-shadow:none}
#modal-event .lexion-scheduler .scheduler-hdr-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
#modal-event .lexion-scheduler .scheduler-tabs{display:flex;gap:7px;flex-wrap:wrap}
#modal-event .lexion-scheduler .sch-tab{border:0;border-radius:8px;background:transparent;color:#f3ece0;font-size:13px;font-weight:600;padding:10px 15px;cursor:pointer}
#modal-event .lexion-scheduler .sch-tab.active{background:linear-gradient(180deg,var(--lx-gold),var(--lx-orange));color:#1a1000;box-shadow:0 0 14px rgba(255,159,26,.45)}
#modal-event .lexion-scheduler .scheduler-nav-cluster{display:flex;gap:7px;align-items:center;margin-left:auto;flex-wrap:wrap}
#modal-event .lexion-scheduler .sch-link-btn,#modal-event .lexion-scheduler .sch-nav-btn,#modal-event .lexion-scheduler .sch-range-button{border:1px solid var(--lx-line);background:#1d1507;color:var(--lx-gold);border-radius:9px;min-height:36px;padding:5px 12px;font-weight:600;cursor:pointer}
#modal-event .lexion-scheduler .sch-link-btn{border-color:var(--lx-orange)}
#modal-event .lexion-scheduler .scheduler-subnote{color:#b6b1d0;font-size:13px;font-style:italic;margin:10px 4px}
#modal-event .lexion-scheduler .scheduler-viewport{position:relative;overflow:auto;border:1px solid var(--lx-line);border-radius:8px;max-height:400px;background:#0d0a06}
#modal-event .lexion-scheduler .sch-table{border-collapse:collapse;min-width:max-content;width:100%;font-size:12px}
#modal-event .lexion-scheduler .sch-table th{background:#241b09;color:#f3ece0;font-size:12px;font-weight:600;height:30px;min-width:44px;border:1px solid #2a2417}
#modal-event .lexion-scheduler .sch-table td{border:1px solid #2a2417}
#modal-event .lexion-scheduler .sch-table .sch-sticky-col{position:sticky;left:0;z-index:3;background:#14100a;color:#f3ece0;min-width:210px;width:210px;padding:6px 10px;white-space:nowrap}
#modal-event .lexion-scheduler .sch-table .sch-group-row .sch-sticky-col{background:#221907;color:var(--lx-gold);font-weight:700}
#modal-event .lexion-scheduler .sch-table td.sch-cell{height:34px;min-width:44px;width:44px;cursor:pointer;user-select:none}
#modal-event .lexion-scheduler .sch-table td.sch-avail{background:#0d0a06}
#modal-event .lexion-scheduler .sch-table td.sch-busy{background:var(--lx-busy)}
#modal-event .lexion-scheduler .sch-table td.sch-tentative{background:var(--lx-tent)}
#modal-event .lexion-scheduler .sch-table td.sch-selected-band{background:rgba(19,160,90,.38);box-shadow:inset 0 2px #5effa3,inset 0 -2px #5effa3,0 0 12px rgba(19,160,90,.5)}
#modal-event .lexion-scheduler .sch-table td.sch-selected-band.sch-busy{background:rgba(224,27,27,.45);box-shadow:inset 0 2px #ff6464,inset 0 -2px #ff6464}
#modal-event .lexion-scheduler .scheduler-legend{display:flex;flex-wrap:wrap;gap:20px;padding:12px 5px 4px;color:#cfc9e0;font-size:13px}
#modal-event .lexion-scheduler .scheduler-legend span{display:inline-flex;align-items:center;gap:8px}
#modal-event .lexion-scheduler .scheduler-legend i{width:20px;height:20px;border-radius:4px;display:inline-block}
#modal-event .lexion-scheduler .leg-avail{background:var(--lx-free)}
#modal-event .lexion-scheduler .leg-busy{background:var(--lx-busy)}
#modal-event .lexion-scheduler .leg-tentative{background:var(--lx-tent)}
#modal-event .lexion-scheduler .leg-unavail{background:#3a3a3a}
#modal-event .lexion-scheduler .lexion-person-avatar{display:inline-grid;place-items:center;width:23px;height:23px;border-radius:50%;margin-right:8px;background:#382a11;border:1px solid #b99444;color:#ffe5a3;font-size:11px;font-weight:700}
@media(max-width:760px){#modal-event .lexion-scheduler .scheduler-nav-cluster{margin-left:0}#modal-event .lexion-scheduler .sch-tab{padding:8px 10px}}


/* LEXION V4 — screenshot-reference scheduler; no global selectors. */
#modal-event .sch-reference-v4{background:transparent;border:0;border-top:1px solid #282832;border-radius:0;padding:12px 0 0;margin:12px 0 8px;color:#e9e9f1;box-shadow:none}
#modal-event .sch-reference-v4 .scheduler-hdr-bar{display:flex;align-items:center;gap:8px;justify-content:space-between}
#modal-event .sch-reference-v4 .scheduler-tabs{display:flex;gap:5px;flex-wrap:wrap}
#modal-event .sch-reference-v4 .sch-tab{background:transparent;color:#999eae;border:1px solid transparent;border-radius:9px;padding:8px 13px;font-size:13px;font-weight:650;box-shadow:none}
#modal-event .sch-reference-v4 .sch-tab.active{background:#151515;border:1px solid #ffc400;color:#ffc400;box-shadow:none}
#modal-event .sch-reference-v4 .scheduler-nav-cluster{margin-left:auto;display:flex;align-items:center;gap:8px}
#modal-event .sch-reference-v4 .sch-link-btn{background:transparent;color:#38a6ff;border:0;padding:5px 10px;font-size:13px;font-weight:650;box-shadow:none}
#modal-event .sch-reference-v4 .sch-nav-btn{border:1px solid #373741;background:#1a1a20;color:#e7e7ef;border-radius:7px;min-height:30px;min-width:28px;padding:3px 8px;box-shadow:none;font-size:14px}
#modal-event .sch-reference-v4 .sch-nav-btn:last-child{padding:4px 15px;background:#1a1a20;color:#fff;font-weight:700}
#modal-event .sch-reference-v4 .sch-range-button{background:transparent;border:0;min-height:30px;padding:2px 4px;color:#fff;font-size:13px;font-weight:750;box-shadow:none}
#modal-event .sch-reference-v4 .scheduler-subnote{color:#9ba2b5;font-style:normal;font-size:12.5px;margin:11px 3px 9px}
#modal-event .sch-reference-v4 .scheduler-viewport{background:#0e0e14;border:1px solid #282832;border-radius:10px;max-height:360px;overflow:auto;position:relative}
#modal-event .sch-reference-v4 .sch-table{border-collapse:collapse;min-width:max-content;width:100%;font-size:12px;table-layout:fixed}
#modal-event .sch-reference-v4 .sch-table th{background:#121218;color:#d9ddeb;font-size:11px;font-weight:650;height:28px;min-width:46px;border:1px solid #24242e;text-align:center}
#modal-event .sch-reference-v4 .sch-table td{border:1px solid #24242e}
#modal-event .sch-reference-v4 .sch-table .sch-sticky-col{position:sticky;left:0;z-index:4;min-width:208px;width:208px;background:#101016;color:#e9e9f1;padding:5px 9px;white-space:nowrap}
#modal-event .sch-reference-v4 .sch-table thead .sch-sticky-col{text-align:left;background:#101016;font-size:11px}
#modal-event .sch-reference-v4 .sch-table .sch-group-row .sch-sticky-col{background:#16161d;color:#fff;font-weight:750}
#modal-event .sch-reference-v4 .sch-table .sch-group-row .sch-sticky-col.sch-res-group{color:#9aa5c3}
#modal-event .sch-reference-v4 .sch-table td.sch-cell{height:34px;min-width:46px;width:46px;background:#0e0e14;cursor:pointer;position:relative}
#modal-event .sch-reference-v4 .sch-table td.sch-busy{background:#c72c30}
#modal-event .sch-reference-v4 .sch-table td.sch-tentative{background:#ff9a14}
#modal-event .sch-reference-v4 .sch-table td.sch-unavail{background:#3a3a3a}
#modal-event .sch-reference-v4 .sch-table td.sch-mixed{background:repeating-linear-gradient(45deg,#b45309,#b45309 3px,#7c2d12 3px,#7c2d12 6px)}
#modal-event .sch-reference-v4 .sch-table td.sch-resource-hour{background:#101016;color:#d9ddeb;font-size:11px;font-weight:650;text-align:center;height:27px}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band{background:rgba(29,158,88,.40);box-shadow:inset 0 2px #52e397,inset 0 -2px #52e397,0 0 12px rgba(32,166,94,.4);z-index:2}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band.sch-busy{background:rgba(196,40,45,.68);box-shadow:inset 0 2px #ff7777,inset 0 -2px #ff7777}
#modal-event .sch-reference-v4 .sch-table .sch-band-resize{width:9px;right:-5px;top:50%;bottom:auto;height:24px;transform:translateY(-50%);background:#fff;border:2px solid #12a45a;border-radius:6px;z-index:6;box-shadow:0 0 4px #000}
#modal-event .sch-reference-v4 .sch-table .sch-band-resize:after{background:#12a45a;left:2px;top:5px;bottom:5px}
#modal-event .sch-reference-v4 .lexion-person-avatar{width:22px;height:22px;margin-right:8px;background:#33323a;border:1px solid #8c8791;color:#e5dfd5;font-size:11px}
#modal-event .sch-reference-v4 .scheduler-legend{display:flex;flex-wrap:wrap;gap:24px;padding:10px 5px 4px;color:#9ca3b5;font-size:12px}
#modal-event .sch-reference-v4 .scheduler-legend span{display:inline-flex;align-items:center;gap:8px}
#modal-event .sch-reference-v4 .legend-swatch,#modal-event .sch-reference-v4 .scheduler-legend i{width:20px;height:20px;border-radius:4px}
#modal-event .sch-reference-v4 .leg-avail{background:#13a05a}
#modal-event .sch-reference-v4 .leg-busy{background:#c72c30}
#modal-event .sch-reference-v4 .leg-tentative{background:#ff9a14}
#modal-event .sch-reference-v4 .leg-unavail{background:#3a3a3a}
@media(max-width:780px){#modal-event .sch-reference-v4 .scheduler-nav-cluster{margin-left:0}#modal-event .sch-reference-v4 .sch-tab{padding:7px 9px}}

/* ==========================================================================
   LEXION EVENT FORM V1 — ported from newSchedulerCalendarEntry.html
   ==========================================================================

   The look that mockup calls its "simple flat" pass, the one it says matches
   the New Message dialog: a 110px label column with no icons, rows separated
   by hairlines instead of boxes, and fields that sit directly on the row
   rather than inside a bordered box of their own.

   Scoped to #form-event, NOT to .form-grid. The compose, room, task and
   resource-picker dialogs all use .form-grid too and were not asked about, so
   they keep the boxed look untouched.

   Nothing in here touches an id, a class the script reads, or the DOM shape:
   calendar.js still finds event-summary, event-start-date, the chips, the
   switch and every other control exactly where it was, and still reads and
   writes them the same way. Only how they are drawn has changed, so this can
   be reverted by deleting the block. */

#form-event{
  --evf-field:#17171d;
  --evf-line:#26262e;
  --evf-line-lit:#4a4a55;
  --evf-gold:#ffc107;
  --evf-text:#f4f4f6;
  --evf-muted:#8d8d98;
  --evf-ph:#6e6e79;
}

/* --- title ------------------------------------------------------------- */
/* The mockup's h1: 20px, 700. The header is one unit, so the close button is
   brought down to it at the same time. */
#form-event h2{font-size:20px;font-weight:700;align-items:center}
#form-event .close-x{color:var(--evf-muted);font-size:24px}
#form-event .close-x:hover{color:var(--evf-text)}

/* --- the status bar above the editor ----------------------------------- */
/* Becomes the mockup's .bar: a hairline underneath and no box. It still says
   who invited the meeting, whether the time is held or agreed, and what can
   be done to it -- only its frame changes. */
#form-event .ev-bar-editor{border:0;border-bottom:1px solid var(--evf-line);border-radius:0;background:none;box-shadow:none;padding:4px 0 12px;margin:0}

/* --- rows -------------------------------------------------------------- */
/* .row in the mockup. The hairline is the separator; lighting it on focus is
   what tells you which row you are in now that the fields have no border of
   their own. */
#form-event .form-grid{
  display:grid;
  grid-template-columns:110px 1fr;
  align-items:center;
  gap:0;
  margin:0;
  min-height:46px;
  border-bottom:1px solid var(--evf-line);
}
#form-event .form-grid:focus-within{border-bottom-color:var(--evf-line-lit)}

/* Label column: 13px, 700, muted. */
#form-event .form-grid>label{
  display:flex;
  align-items:center;
  gap:0;
  font-size:13px;
  font-weight:700;
  color:var(--evf-muted);
  padding-right:12px;
}
/* The first thing the flat look drops is the icon artwork in the label and
   inside the fields. The labels are the real labels and stay, so nothing is
   lost for a screen reader; the images were decoration. */
#form-event .form-grid>label .fg-icon-img,
#form-event .dt-icon-img,
#form-event .btn-ico-img{display:none}
#form-event .fg-icon{display:none}

/* Fields sit on the row. width:100% is kept from .form-grid input because the
   scheduler and the chip field rely on it.

   The attribute qualifiers are here to beat the "lit edge" rule at 3336
   (#form-event input:not([type=hidden])…, three attribute selectors), which
   would otherwise keep its own border and background on every field. Same
   trick the .room-member-row fix at 2289 uses. */
#form-event .form-grid input:not([type=hidden]):not([type=checkbox]):not([type=button]),
#form-event .form-grid select,
#form-event .form-grid textarea{
  background:none;
  border:0;
  box-shadow:none;
  border-radius:0;
  padding:10px 0;
  min-height:44px;
  color:var(--evf-text);
}
/* ...and its focus ring, which is the other half of that rule. The row's
   hairline lighting up is the flat look's way of saying where you are. */
#form-event .form-grid input:not([type=hidden]):not([type=checkbox]):not([type=button]):focus,
#form-event .form-grid select:focus,
#form-event .form-grid textarea:focus{
  outline:none;
  box-shadow:none;
  background:none;
  border:0;
}
#form-event .form-grid input::placeholder,
#form-event .form-grid textarea::placeholder{color:var(--evf-ph)}
#form-event .form-grid select{cursor:pointer}
#form-event .form-grid textarea{min-height:90px;resize:vertical}
/* The blank padding that made room for the now-hidden date/time icons. */
#form-event .dt-field input{padding-left:0!important}
#form-event .dt-field{align-items:center}
/* .two: two halves with a real gap, not two halves pressed together. */
#form-event .date-time-row{display:grid;grid-template-columns:1fr 1fr;gap:24px}

/* --- all-day switch ---------------------------------------------------- */
/* The mockup's .sw at flat size: 44x24 with a gold fill when on. */
#form-event .switch-track{width:44px;height:24px;background:#2a2a32;border:1px solid #3a3a44}
#form-event .switch-thumb{top:2px;left:3px;width:18px;height:18px}
#form-event .switch input:checked+.switch-track{background:var(--evf-gold);border-color:var(--evf-gold)}
#form-event .switch input:checked+.switch-track .switch-thumb{transform:translateX(20px);background:#000}
#form-event .switch-word{color:var(--evf-text)}

/* --- chips ------------------------------------------------------------- */
#form-event .chip-field{padding:4px 0;border:0;background:none;box-shadow:none;border-radius:0}
#form-event .chip-field:focus-within{border:0;box-shadow:none}
#form-event .chip{background:#22222a;border:1px solid #33333d;border-radius:999px;padding:3px 12px;font-size:13px}
#form-event .chip button{color:var(--evf-muted)}

/* --- location and the picker button ------------------------------------ */
#form-event .loc-row .send-btn{background:none;border:0;color:#e6e6ea;border-radius:10px;min-height:38px;padding:0 14px;font-weight:600}
#form-event .loc-row .send-btn:hover{background:#1d1d24}
#form-event .btn-ico{display:none}

/* --- availability panel ------------------------------------------------ */
/* The mockup's .avail: one quiet box, not a second border competing with the
   rows. */
#form-event .freebusy{border:1px solid var(--evf-line);background:#14141a;border-radius:10px;margin:8px 0}
#form-event .freebusy-hint{color:var(--evf-muted)}

/* --- footer: .sv / .cn / .del ------------------------------------------ */
/* Solid gold Save, plain Cancel, plain red Delete. */
#form-event .modal-actions{margin-top:20px}
#form-event .send-btn{background:var(--evf-gold);border:1px solid var(--evf-gold);color:#000;font-weight:700;min-height:40px;padding:0 24px;border-radius:10px}
#form-event .send-btn:hover:not(:disabled){background:#ffcd2e;border-color:#ffcd2e}
#form-event .cancel-btn{background:none;border:0;color:#cfcfd6;border-radius:10px;min-height:40px;padding:0 14px}
#form-event .cancel-btn:hover{background:#1d1d24;color:#fff}
#form-event .danger-btn{background:none;border:0;color:#ff5a5a;border-radius:10px;min-height:40px;padding:0 14px}
#form-event .danger-btn:hover{background:#2a1214;color:#ff5a5a}

/* --- chosen equipment, as chips -----------------------------------------
   The same pill the attendee chips use, so a list of things reads as a list of
   things whichever row it sits in. Sits under the Location row because it is
   chosen from the Equipment… button beside Choose… */
#form-event .held-chips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
#form-event .held-chip{
  display:inline-flex;
  align-items:center;
  gap:7px;
  background:#22222a;
  border:1px solid #33333d;
  border-radius:999px;
  padding:3px 6px 3px 10px;
  font-size:13px;
  color:#e6e6ea;
}
#form-event .held-chip .type-pill{
  border-radius:999px;
  padding:1px 8px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  text-transform:uppercase;
  background:#2c2c36;
  border:1px solid #3d3d49;
  color:#b9b9c6;
}
#form-event .held-chip button{
  background:none;
  border:0;
  color:var(--evf-muted);
  cursor:pointer;
  font-size:15px;
  line-height:1;
  padding:0 3px;
  border-radius:50%;
}
#form-event .held-chip button:hover{color:#fff;background:#3a3a46}
/* The count, when there is more than one. Muted and small so it reads as an
   annotation on the name rather than as part of it. */
#form-event .held-qty{color:var(--evf-muted);font-size:12px;font-weight:700}

/* --- the card itself: the mockup's .dlg --------------------------------- */
/* Flat panel, hairline border, one deep shadow. The gold wash and the outer
   glow it replaces were a second way of drawing the same edge the border
   already draws, and they fought the flat rows for attention.

   Only the four surface properties are touched. width, max-height, resize,
   overflow, position and the drag transition all live on #form-event further
   up and are deliberately left alone -- this dialog is draggable and
   resizable, and that is not something to break for a look. */
#form-event{
  background:#0f0f14;
  border:1px solid #2a2a33;
  border-radius:16px;
  box-shadow:0 24px 70px rgba(0,0,0,.7);
}
/* The scrim, for this dialog only. Deeper than the shared one so the flat
   panel is the brightest thing on screen. */
#modal-event.modal{background:rgba(0,0,0,.82)}

/* Chromium's own calendar/clock picker indicators. The mockup swaps them for
   its own popover; until that exists they are the only way into the date
   picker without typing, so they stay -- just quieter, to match the flat
   rows. */
#form-event input[type=date]::-webkit-calendar-picker-indicator,
#form-event input[type=time]::-webkit-calendar-picker-indicator{
  opacity:.55;
  cursor:pointer;
}

/* --- the scheduler: flat, not gold -------------------------------------- */
/* The gold block (sch-modern, above) still styles #sch-range-picker, which is
   why the class stays on the container. sch-reference-v4 is defined later in
   this file, so where the two disagree the flat one wins -- that is what
   gives the grid the mockup's dark headers, #c72c30 busy, green selected band
   and gold active tab without writing a third copy of the same rules.

   The picker is restated here rather than left to sch-modern: it only appears
   on click, and a gold-outlined date box appearing inside a flat grid is the
   one detail that would give the whole dialog away. Same selector shape as the
   rule it replaces, but later in the file, so it wins. */
#modal-event .sch-reference-v4 #sch-range-picker:not([hidden]){
  width:155px;
  background:#101016;
  color:#e9e9f1;
  border:1px solid #34343e;
  border-radius:8px;
  padding:6px;
}

/* --- the selected band: one continuous box, as in the mockup ------------
   ---------------------------------------------------------------------------

   The grid paints the chosen time by classing every hour it covers
   (td.sch-selected-band, cell() at 2672), so a two-hour meeting is two cells
   side by side. The mockup draws ONE absolutely-positioned box over the grid
   (its .band), which is why it reads as a single bar with rounded ends.

   Same result here without touching the markup: a ::before on each selected
   cell draws the gradient, the top and bottom edges of every cell, and the
   left edge and rounded corner only on the first cell of the run -- the right
   edge and corner only on the last. `:not(.sch-selected-band ~ …)` picks the
   first selected cell in a row; `:not(:has(+ …))` picks the last, which needs
   :has() and therefore Chromium 105+. Where :has() is missing the bar still
   draws, it just loses its rounded right end and its resize grip.

   inset:0 -1px is what hides the 1px table border between two selected cells:
   each cell's box reaches 1px over the seam, so the neighbour paints over it
   rather than leaving a hairline through the middle of the bar. */
#form-event .sch-table td.sch-selected-band{position:relative}
#form-event .sch-table td.sch-selected-band::before{
  content:"";
  position:absolute;
  inset:0 -1px;
  z-index:1;
  pointer-events:none;
  border-top:2px solid #2e9e4f;
  border-bottom:2px solid #2e9e4f;
  background:
    linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 18%,rgba(0,40,10,0) 78%,rgba(0,40,10,.28) 100%),
    rgba(19,160,90,.30);
  box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 16px rgba(40,200,90,.45);
}
#form-event .sch-table td.sch-selected-band:not(.sch-selected-band~.sch-selected-band)::before{
  border-left:2px solid #2e9e4f;
  border-top-left-radius:10px;
  border-bottom-left-radius:10px;
}
#form-event .sch-table td.sch-selected-band:not(:has(+.sch-selected-band))::before{
  border-right:2px solid #2e9e4f;
  border-top-right-radius:10px;
  border-bottom-right-radius:10px;
}
/* A band over a slot somebody is already busy in still says so, in the same
   red the grid uses, rather than in the green of a free choice. */
#form-event .sch-table td.sch-selected-band.sch-busy::before{
  border-color:#e11d2e;
  background:
    linear-gradient(180deg,rgba(255,255,255,.30) 0,rgba(255,255,255,0) 18%,rgba(40,0,4,0) 78%,rgba(40,0,4,.3) 100%),
    rgba(196,40,45,.68);
  box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 14px rgba(224,27,27,.55);
}
#form-event .sch-table td.sch-selected-band.sch-tentative::before{
  border-color:#ff9a14;
  background:
    linear-gradient(180deg,rgba(255,255,255,.32) 0,rgba(255,255,255,0) 18%,rgba(40,22,0,0) 78%,rgba(40,22,0,.3) 100%),
    rgba(255,154,20,.55);
  box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 14px rgba(255,154,20,.5);
}

/* The grips.

   .sch-band-grab already covers the whole band and is what the drag listens
   for (2869) -- that stays, invisible, because the mockup's whole box drags
   too. The pill itself is drawn on the FIRST cell of the run only, at its
   left edge, 14x30 white with a green ring, exactly the mockup's .grip.l.

   .sch-band-resize is already an 8px strip on the right edge of each selected
   cell (4093) and is what the resize listens for (2864). It is left in place
   in every cell -- that is the existing hit area and it works -- but only the
   one on the LAST cell is painted, as the mockup's .grip.r. */
#form-event .sch-table td.sch-selected-band:not(.sch-selected-band~.sch-selected-band) .sch-band-grab::before{
  content:"";
  position:absolute;
  left:-8px;
  top:50%;
  transform:translateY(-50%);
  width:14px;
  height:30px;
  border-radius:7px;
  background:#fff;
  border:3px solid #2e9e4f;
  box-shadow:0 0 8px rgba(0,0,0,.6);
  cursor:ew-resize;
}
#form-event .sch-table td.sch-selected-band .sch-band-resize{background:transparent;border-radius:7px}
#form-event .sch-table td.sch-selected-band .sch-band-resize::after{
  content:"";
  position:absolute;
  left:50%;
  top:50%;
  transform:translate(-50%,-50%);
  width:14px;
  height:30px;
  margin:0;
  border-radius:7px;
  background:#fff;
  border:3px solid #2e9e4f;
  box-shadow:0 0 8px rgba(0,0,0,.6);
  opacity:0;
}
#form-event .sch-table td.sch-selected-band:not(:has(+.sch-selected-band)) .sch-band-resize::after{opacity:1}

/* ==========================================================================
   GRID V1 — the mockup's grid look
   ==========================================================================

   Ported from the Sandra/room grid in newSchedulerCalendarEntry.html: a
   205px sticky name column, section dividers, round avatars, 24px cells and a
   flat four-swatch legend.

   Scoped under .sch-reference-v4 so the scheduler keeps working if the class
   is ever taken back off. No id and no class the script reads was changed --
   calendar.js still builds this exact table and still writes
   sch-avail/sch-busy/sch-tentative/sch-selected-band on the same cells. */

/* --- section headers -----------------------------------------------------
   "All People (2)", "Scheduled Room / Resource". The mockup draws these as a
   hairline across the full width with the label sitting in the name column,
   which is what the inset shadow on every cell achieves here: with
   border-collapse on, a border on the tr would add a pixel to the row's
   height, and this grid is built on every row measuring the same. */
#modal-event .sch-reference-v4 .sch-group-row td{
  background:#15151c;
  font-size:12px;
  font-weight:700;
  color:#9aa5c3;
  letter-spacing:.02em;
  box-shadow:inset 0 1px 0 #2a2a33;
}
#modal-event .sch-reference-v4 .sch-group-row td.sch-col-invitee-hdr{padding:0 10px;height:28px}
#modal-event .sch-reference-v4 .sch-group-row td.sch-no-resource{
  color:#7c8296;
  font-style:italic;
  font-weight:500;
  height:26px;
}

/* --- name column ---------------------------------------------------------
   205px, sticky, with a right edge that survives the horizontal scroll. */
#modal-event .sch-reference-v4 .sch-table .sch-sticky-col{
  min-width:205px;
  width:205px;
  background:#101016;
  border-right:1px solid #282832;
  font-size:13px;
  color:#e9e9f1;
}
#modal-event .sch-reference-v4 .sch-table .sch-col-invitee-hdr{padding:0 10px}
/* The header's corner cell is where the sticky column and the sticky hour row
   meet, so it has to out-rank both or the day names slide under the names. */
#modal-event .sch-reference-v4 .sch-table thead .sch-sticky-col{background:#121218;color:#9aa5c3;font-size:11px}
#modal-event .sch-reference-v4 .sch-name-hdr{font-size:11px;color:#8a90a2;font-weight:700}

/* --- people rows ---------------------------------------------------------
   A round avatar beside the name, as in the mockup. We have initials, not
   photographs -- FaceBook learns the lexion_id for every invitee (2130) but
   only the navbar paints a picture, and the grid has always drawn the first
   letter. The circle is styled to read as a portrait tile rather than as a
   missing image. */
#modal-event .sch-reference-v4 .lexion-person-avatar{
  display:inline-grid;
  place-items:center;
  width:24px;
  height:24px;
  margin-right:9px;
  border-radius:50%;
  background:#2a2a34;
  border:1px solid #3f3f4b;
  color:#e5dfd5;
  font-size:11px;
  font-weight:700;
  vertical-align:middle;
}
#modal-event .sch-reference-v4 .sch-person-row td{height:26px}
/* The YOU pill, as the mockup draws it: outlined gold, not filled. */
#modal-event .sch-reference-v4 .fb-you{
  border:1px solid var(--evf-gold);
  color:var(--evf-gold);
  border-radius:999px;
  padding:0 7px;
  font-size:10px;
  font-weight:700;
  letter-spacing:.04em;
  margin-left:7px;
}

/* --- room / resource rows ------------------------------------------------
   The chosen room's row is a .sch-person-row like anybody else's, which is
   true -- it is one more thing that can be busy -- so it keeps a square
   marker to say it is a thing and not a person. */
#modal-event .sch-reference-v4 .sch-table td.sch-col-invitee-hdr.sch-res-name::before{
  content:"";
  display:inline-block;
  width:16px;
  height:16px;
  margin-right:9px;
  border-radius:4px;
  background:#2a2a34;
  border:1px solid #3f3f4b;
  vertical-align:middle;
}

/* --- hour header and cells ---------------------------------------------- */
#modal-event .sch-reference-v4 .sch-table th{
  height:22px;
  min-width:44px;
  width:44px;
  font-size:11px;
  color:#8a90a2;
  background:#121218;
  border:1px solid #24242e;
}
#modal-event .sch-reference-v4 .sch-table td.sch-cell{
  height:24px;
  min-width:44px;
  width:44px;
  border:1px solid #24242e;
}
#modal-event .sch-reference-v4 .sch-table td.sch-avail{background:#0e0e14}
#modal-event .sch-reference-v4 .sch-table td.sch-cell-res{background:#0c0c11}
#modal-event .sch-reference-v4 .sch-table td.sch-resource-hour{
  background:#101016;
  color:#8a90a2;
  font-size:10px;
  height:22px;
}
#modal-event .sch-reference-v4 .sch-table td.sch-cell:hover{filter:brightness(1.35)}
/* Midnight gets a heavier left edge so a three-day grid still says where one
   day ends, which is all a grid can do without a day-heading row. */
#modal-event .sch-reference-v4 .sch-table td.sch-cell[data-hour="0"],
#modal-event .sch-reference-v4 .sch-table th[data-hour="0"]{border-left:1px solid #3a3a46}

/* --- legend -------------------------------------------------------------- */
/* The mockup's four flat squares. */
#modal-event .sch-reference-v4 .scheduler-legend{gap:22px;color:#9ca3b5;font-size:12px}
#modal-event .sch-reference-v4 .legend-swatch,
#modal-event .sch-reference-v4 .scheduler-legend i{width:14px;height:14px;border-radius:3px}
#modal-event .sch-reference-v4 .leg-avail{background:#16a05a}
#modal-event .sch-reference-v4 .leg-busy{background:#d93636}
#modal-event .sch-reference-v4 .leg-tent{background:#ff9a14}
#modal-event .sch-reference-v4 .leg-unavail{background:#3a3a3a}
#modal-event .sch-reference-v4 .leg-mixed{background:repeating-linear-gradient(45deg,#b45309,#b45309 3px,#7c2d12 3px 6px)}

/* A resource the grid has a row for but no bookings for. Hatched rather than
   free, so it reads as "not asked yet" instead of as "free all week" -- the
   same rule that makes a failed read show as stale rather than blank. */
#modal-event .sch-reference-v4 .sch-table td.sch-unknown{
  background:repeating-linear-gradient(45deg,#0d0d13,#0d0d13 5px,#13131b 5px,#13131b 10px);
  cursor:default;
}

/* Match the glass selection band in newSchedulerCalendarEntry.html. The
   scheduler still paints its normal per-hour cells underneath this visual
   treatment, so availability and event/API behavior stay unchanged. */
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band{position:relative;background:transparent;box-shadow:none}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band::before{
  content:"";position:absolute;inset:0 -1px;z-index:1;pointer-events:none;
  border-top:2px solid #2e9e4f;border-bottom:2px solid #2e9e4f;
  background-color:rgba(19,160,90,.3);
  background-image:linear-gradient(180deg,rgba(255,255,255,.38) 0,rgba(255,255,255,0) 18%,rgba(0,40,10,0) 78%,rgba(0,40,10,.28) 100%),linear-gradient(90deg,rgba(50,160,80,.5),rgba(170,245,185,.55) 50%,rgba(50,160,80,.5));
  box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 16px rgba(40,200,90,.45)
}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band:not(.sch-selected-band~.sch-selected-band)::before{border-left:2px solid #2e9e4f;border-top-left-radius:10px;border-bottom-left-radius:10px}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band:not(:has(+.sch-selected-band))::before{border-right:2px solid #2e9e4f;border-top-right-radius:10px;border-bottom-right-radius:10px}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band.sch-busy::before{border-color:#e11d2e;background-color:rgba(196,40,45,.68);background-image:linear-gradient(180deg,rgba(255,255,255,.3) 0,rgba(255,255,255,0) 18%,rgba(40,0,4,0) 78%,rgba(40,0,4,.3) 100%),linear-gradient(90deg,rgba(170,30,30,.55),rgba(255,140,140,.55) 50%,rgba(170,30,30,.55));box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 14px rgba(224,27,27,.55)}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band.sch-tentative::before{border-color:#ff9a14;background-color:rgba(255,154,20,.55);background-image:linear-gradient(180deg,rgba(255,255,255,.32) 0,rgba(255,255,255,0) 18%,rgba(40,22,0,0) 78%,rgba(40,22,0,.3) 100%),linear-gradient(90deg,rgba(200,110,20,.5),rgba(255,210,120,.55) 50%,rgba(200,110,20,.5));box-shadow:0 6px 16px rgba(0,0,0,.65),0 0 14px rgba(255,154,20,.5)}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band:not(.sch-selected-band~.sch-selected-band) .sch-band-grab::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:14px;height:30px;border-radius:7px;background:#fff;border:3px solid #2e9e4f;box-shadow:0 0 8px rgba(0,0,0,.6);cursor:ew-resize}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band .sch-band-resize{background:transparent;border:0;border-radius:7px;box-shadow:none}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band .sch-band-resize::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:30px;margin:0;border-radius:7px;background:#fff;border:3px solid #2e9e4f;box-shadow:0 0 8px rgba(0,0,0,.6);opacity:0}
#modal-event .sch-reference-v4 .sch-table td.sch-selected-band:not(:has(+.sch-selected-band)) .sch-band-resize::after{opacity:1}

/* One continuous reference-style range over people, room, and resource rows.
   Cell overlays stay active for the scheduler's existing click and drag
   behavior, but their repeated box treatment is hidden while these bands draw. */
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band{box-shadow:none!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band.sch-avail{background:#0e0e14!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band.sch-cell-res.sch-avail{background:#0c0c11!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band.sch-busy{background:#c72c30!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band.sch-tentative{background:#ff9a14!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band.sch-mixed{background:repeating-linear-gradient(45deg,#b45309,#b45309 3px,#7c2d12 3px,#7c2d12 6px)!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band::before{display:none!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band .sch-band-grab::before{display:none!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band .sch-band-resize{background:transparent!important;border:0!important;box-shadow:none!important}
#modal-event .sch-reference-v4 .scheduler-viewport.sch-selection-bands-active .sch-table td.sch-selected-band .sch-band-resize::after{opacity:0!important}
#modal-event .sch-reference-v4 .sch-selection-band{position:absolute;z-index:8;display:block;pointer-events:none;box-sizing:border-box;overflow:visible;border:2px solid #2e9e4f;border-radius:8px;background-color:rgba(19,160,90,.14);background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 18%,rgba(0,40,10,0) 78%,rgba(0,40,10,.08) 100%),linear-gradient(90deg,rgba(50,160,80,.1),rgba(170,245,185,.16) 50%,rgba(50,160,80,.1));box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 14px rgba(40,200,90,.35)}
#modal-event .sch-reference-v4 .sch-selection-band.busy{border-color:#e11d2e;background-color:rgba(196,40,45,.14);background-image:linear-gradient(180deg,rgba(255,255,255,.14) 0,rgba(255,255,255,0) 18%,rgba(40,0,4,0) 78%,rgba(40,0,4,.08) 100%),linear-gradient(90deg,rgba(170,30,30,.1),rgba(255,140,140,.16) 50%,rgba(170,30,30,.1));box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 14px rgba(224,27,27,.4)}
#modal-event .sch-reference-v4 .sch-selection-band.tentative{border-color:#ff9a14;background-color:rgba(255,154,20,.14);background-image:linear-gradient(180deg,rgba(255,255,255,.16) 0,rgba(255,255,255,0) 18%,rgba(40,22,0,0) 78%,rgba(40,22,0,.08) 100%),linear-gradient(90deg,rgba(200,110,20,.1),rgba(255,210,120,.16) 50%,rgba(200,110,20,.1));box-shadow:0 6px 16px rgba(0,0,0,.55),0 0 14px rgba(255,154,20,.4)}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-grab{position:absolute;inset:0;pointer-events:auto;cursor:grab}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-grab:active{cursor:grabbing}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-grab::before{content:"";position:absolute;left:-8px;top:50%;transform:translateY(-50%);width:14px;height:30px;border-radius:7px;background:#fff;border:3px solid #2e9e4f;box-shadow:0 0 8px rgba(0,0,0,.6);cursor:ew-resize}
#modal-event .sch-reference-v4 .sch-selection-band.busy .sch-band-grab::before{border-color:#e11d2e}
#modal-event .sch-reference-v4 .sch-selection-band.tentative .sch-band-grab::before{border-color:#ff9a14}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize{position:absolute;right:-9px;top:50%;bottom:auto;width:14px;height:30px;transform:translateY(-50%);z-index:3;pointer-events:auto;cursor:ew-resize;background:transparent;border:0;box-shadow:none}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px;background:transparent}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::after{content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);width:14px;height:30px;margin:0;border-radius:7px;background:#fff;border:3px solid #2e9e4f;box-shadow:0 0 8px rgba(0,0,0,.6)}
#modal-event .sch-reference-v4 .sch-selection-band.busy .sch-band-resize::after{border-color:#e11d2e}
#modal-event .sch-reference-v4 .sch-selection-band.tentative .sch-band-resize::after{border-color:#ff9a14}


/* Frosted, full-height resize grips for both ends of the selection band. */
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-grab::before{display:none!important;content:none!important}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize{
  position:absolute;top:0;bottom:0;width:6px;height:auto;transform:none;z-index:4;
  pointer-events:auto;cursor:ew-resize;box-sizing:border-box;overflow:visible;
  border:.5px solid rgba(255,255,255,.58);border-radius:5px;
  background:linear-gradient(90deg,rgba(255,255,255,.92),rgba(221,241,255,.56));
  -webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);
  box-shadow:0 0 8px rgba(0,0,0,.45),inset 0 0 3px rgba(255,255,255,.8)
}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start{left:-3px;right:auto}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end{right:-3px;left:auto}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px;background:transparent}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::after{
  content:"";position:absolute;left:50%;top:50%;transform:translate(-50%,-53%);
  width:auto;height:auto;margin:0;padding:0;border:0;border-radius:0;
  background:none;box-shadow:none;color:rgba(30,48,53,.9);font-size:13px;
  font-weight:800;line-height:1;opacity:1
}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start::after{content:"‹"}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end::after{content:"›"}

/* Use CSS-drawn chevrons so the resize arrows work with any page encoding. */
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::before{content:"";position:absolute;top:0;bottom:0;left:-4px;right:-4px;background:transparent}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize::after{
  content:"";position:absolute;left:50%;top:50%;width:3px;height:3px;
  background:transparent;border:solid rgba(30,48,53,.92);border-width:0 1px 1px 0;
  box-shadow:none;border-radius:0;opacity:1
}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start::after{transform:translate(-35%,-50%) rotate(135deg)}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end::after{transform:translate(-65%,-50%) rotate(-45deg)}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start::after,
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end::after{content:""}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start{border-radius:4px 0 0 4px}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end{border-radius:4px 4px 0 0}

/* Three-day, round-the-clock timeline with sticky date and hour headers. */
#modal-event .sch-reference-v4 .sch-table thead .sch-day-hdr{
  position:sticky;top:0;z-index:12;height:24px;min-width:0;
  background:#101016;color:#c7cad5;text-align:center;
  border:1px solid #282832;font-size:11px;font-weight:700
}
#modal-event .sch-reference-v4 .sch-table thead .sch-hour-hdr{top:24px;background:#121218}
#modal-event .sch-reference-v4 .sch-table{
  width:max-content!important;min-width:max-content!important;table-layout:auto!important
}
#modal-event .sch-reference-v4 .scheduler-nav-cluster{position:relative}
#modal-event .sch-reference-v4 .sch-date-range-lbl{cursor:pointer}
#modal-event .sch-reference-v4 #sch-range-picker:not([hidden]){
  display:block;position:absolute;top:calc(100% + 5px);left:50%;transform:translateX(-50%);
  z-index:10000;width:180px;box-shadow:0 8px 24px rgba(0,0,0,.6)
}
#modal-event .sch-reference-v4 .sch-nav-btn.sch-prev-day::before,
#modal-event .sch-reference-v4 .sch-nav-btn.sch-next-day::before{
  content:"";display:block;width:7px;height:7px;border:solid #e8e8ef;border-width:0 2px 2px 0
}
#modal-event .sch-reference-v4 .sch-nav-btn.sch-prev-day::before{transform:translateX(2px) rotate(135deg)}
#modal-event .sch-reference-v4 .sch-nav-btn.sch-next-day::before{transform:translateX(-1px) rotate(-45deg)}
#modal-event .sch-reference-v4 .sch-icon{font-size:16px;line-height:1}

/* Grip color follows availability; keep the handle itself free of white fill. */
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize{
  border-color:#14743a;
  background:linear-gradient(90deg,#073b1b 0%,#0d5929 48%,#06421d 100%);
  box-shadow:0 0 8px rgba(0,0,0,.58),inset 0 0 2px rgba(75,190,105,.24);
  -webkit-backdrop-filter:none;backdrop-filter:none
}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-start::after,
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end::after{
  border-color:#9ad9a8
}
#modal-event .sch-reference-v4 .sch-selection-band.busy .sch-band-resize,
#modal-event .sch-reference-v4 .sch-selection-band.tentative .sch-band-resize{
  border-color:#d22a34;
  background:linear-gradient(90deg,#71131a 0%,#a81722 48%,#631017 100%);
  box-shadow:0 0 8px rgba(0,0,0,.58),inset 0 0 2px rgba(240,90,95,.25)
}
#modal-event .sch-reference-v4 .sch-selection-band.busy .sch-band-resize-start::after,
#modal-event .sch-reference-v4 .sch-selection-band.busy .sch-band-resize-end::after,
#modal-event .sch-reference-v4 .sch-selection-band.tentative .sch-band-resize-start::after,
#modal-event .sch-reference-v4 .sch-selection-band.tentative .sch-band-resize-end::after{
  border-color:#ff9aa0
}
#modal-event .sch-reference-v4 .sch-selection-band .sch-band-resize-end{
  border-radius:4px 4px 4px 0
}

/* Keep the selection band and its grips below the sticky name/resource column. */
#modal-event .sch-reference-v4 .sch-table tbody .sch-sticky-col{z-index:10}
#modal-event .sch-reference-v4 .sch-table .sch-group-row td{
  font-size:11px;font-weight:500;letter-spacing:0
}
#modal-event .sch-reference-v4 .sch-table .sch-person-row td.sch-col-invitee-hdr{
  font-size:12px!important;font-weight:400!important
}
#modal-event .sch-reference-v4 .sch-table .sch-group-row td.sch-col-invitee-hdr{
  font-size:11px!important;font-weight:400!important;letter-spacing:0
}

/* Rich meeting description editor shown in the Description scheduler tab. */
#modal-event .sch-reference-v4 .sch-description-editor{
  margin:0 10px 12px;border:1px solid #34343e;border-radius:8px;
  overflow:hidden;background:#15151c;color:#e8e8ef
}
#modal-event .sch-reference-v4 .sch-rich-toolbar{
  min-height:42px;display:flex;align-items:center;gap:4px;padding:5px 8px;
  overflow-x:auto;background:#1c1c24;border-bottom:1px solid #34343e
}
#modal-event .sch-reference-v4 .sch-rich-toolbar select{
  height:31px;min-width:66px;padding:0 9px;border:1px solid #34343e;
  border-radius:6px;background:#24242d;color:#ededf4;font-size:12px
}
#modal-event .sch-reference-v4 .sch-rich-toolbar select:first-child{min-width:136px}
#modal-event .sch-reference-v4 .sch-rich-toolbar button{
  flex:0 0 auto;min-width:26px;height:30px;padding:0 6px;border:0;
  border-radius:4px;background:transparent;color:#e8e8ef;font-size:13px;cursor:pointer
}
#modal-event .sch-reference-v4 .sch-rich-toolbar button:hover{background:#32323c}
#modal-event .sch-reference-v4 .sch-rich-toolbar button:disabled{opacity:.45;cursor:default}
#modal-event .sch-reference-v4 .sch-toolbar-sep{width:1px;height:22px;margin:0 5px;background:#41414b;flex:0 0 auto}
#modal-event .sch-reference-v4 .sch-color-control,
#modal-event .sch-reference-v4 .sch-highlight-control{
  position:relative;display:grid;place-items:center;width:25px;height:27px;
  color:#f2d05b;font-size:15px;font-weight:700;cursor:pointer;flex:0 0 auto
}
#modal-event .sch-reference-v4 .sch-highlight-control{width:24px;height:20px;border-radius:4px;background:#f0c629;color:#222;font-size:11px}
#modal-event .sch-reference-v4 .sch-rich-toolbar input[type="color"]{
  position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer
}
#modal-event .sch-reference-v4 .sch-rich-content{
  min-height:126px;max-height:260px;overflow:auto;padding:13px 12px;
  background:#17171e;color:#f1f1f5;font-size:14px;line-height:1.5;
  white-space:pre-wrap;outline:none
}
#modal-event .sch-reference-v4 .sch-rich-content:focus{box-shadow:inset 0 0 0 1px rgba(255,196,0,.35)}
#modal-event .sch-reference-v4 .sch-rich-content[contenteditable="false"]{opacity:.7}

/* Keep every tab attached to one shared content frame, not just Description. */
#modal-event .sch-reference-v4.sch-tabbed .scheduler-hdr-bar{
  margin:0 10px;padding:6px 8px 0;align-items:flex-end;
  background:#15151c;border:1px solid #34343e;border-bottom:0;
  border-radius:8px 8px 0 0
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-tabs{
  flex:1;min-width:0;gap:4px;align-items:flex-end
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab{
  position:relative;top:1px;margin:0 0 -1px;padding:8px 13px;
  color:#aab1c0;background:#1b1b23;border:1px solid #3b3d48;
  border-radius:7px 7px 0 0;font-weight:500
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab:hover{color:#f1f1f5;background:#202029}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab.active{
  z-index:2;color:#d5e0eb;background:#171b22;border-color:#61758a;
  border-bottom-color:#171b22;font-weight:600;box-shadow:inset 0 2px #61758a
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab-panel{
  margin:0 10px 12px;border:1px solid #34343e;border-radius:0 0 8px 8px;
  overflow:hidden;background:#15151c
}
#modal-event .sch-reference-v4.sch-tabbed .sch-description-editor{
  margin:0;border:0;border-radius:0;background:transparent
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-subnote{margin:0;padding:8px 12px;border-bottom:1px solid #34343e}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-viewport{border:0;border-radius:0;max-height:360px}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend{padding:10px 12px;margin:0}

/* Compact legend and inline help keep the availability view focused on the grid. */
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend{
  gap:12px;padding:6px 10px;margin:0;font-size:11px;line-height:1.2
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend .legend-item,
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend span{
  gap:5px;font-size:11px
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend .legend-swatch{
  width:11px;height:11px;border-radius:2px
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab-help{
  display:inline-grid;place-items:center;width:14px;height:14px;margin-left:5px;
  border:1px solid #748397;border-radius:50%;color:#b9c6d4;
  background:#202630;font-size:10px;font-weight:700;line-height:1;vertical-align:1px;
  cursor:help
}

/* Compact the event details without changing the mail, room, or task forms. */
#modal-event #form-event > .form-grid:not([hidden]){
  grid-template-columns:82px minmax(0,1fr);
  column-gap:8px;
  min-height:34px;
  margin:0;
  border:0;
  border-bottom:0;
}
#modal-event #form-event > .form-grid:not([hidden]) > label{
  font-size:11px;
  line-height:1.2;
  font-weight:500;
}
#modal-event #form-event > .form-grid:not([hidden]) > input,
#modal-event #form-event > .form-grid:not([hidden]) > select,
#modal-event #form-event > .form-grid:not([hidden]) > textarea{
  min-height:30px;
  padding:5px 8px;
  font-size:12px;
  line-height:1.25;
}
#modal-event #form-event > .form-grid:not([hidden]) .switch-row{padding:3px 8px}

/* Keep the title and Booked/action bar opaque and above the scrolling fields. */
#modal-event #form-event > .ev-dialog-head{
  z-index:1000;
  isolation:isolate;
  background:#0d0d12;
  border:0;
  box-shadow:0 8px 14px rgba(0,0,0,.58);
}
#modal-event #event-editor-bar{background:#0d0d12}

/* Put the meeting title and full-day control in the frozen dialog heading. */
#modal-event #form-event .ev-dialog-title-row{
  display:flex;
  align-items:center;
  gap:12px;
  min-width:0;
  margin:0;
  font-size:15px;
}
#modal-event #form-event .ev-title-input{
  flex:1 1 260px;
  min-width:100px;
  width:auto;
  height:32px;
  padding:4px 0;
  border:0;
  border-radius:0;
  outline:0;
  background:transparent;
  color:#f1f1f5;
  font-family:inherit;
  font-size:13px;
  font-weight:500;
  line-height:1.25;
}
#modal-event #form-event .ev-title-input:focus{border:0;box-shadow:none}
#modal-event #form-event .ev-all-day{
  flex:0 0 auto;
  gap:8px;
  margin-left:auto;
  color:#aeb7c5;
  font-size:11px;
  font-weight:500;
  white-space:nowrap;
  cursor:pointer;
}
#modal-event #form-event .ev-all-day .switch-track{width:42px;height:23px}
#modal-event #form-event .ev-all-day .switch-thumb{width:17px;height:17px}
#modal-event #form-event .ev-all-day input:checked+.switch-track .switch-thumb{transform:translateX(19px)}
#modal-event #form-event .ev-dialog-title-row .close-x{flex:0 0 auto}

/* Keep each date and time pair on one row inside the available form width. */
#modal-event #form-event .date-time-row{
  display:grid;
  grid-template-columns:minmax(0,1.15fr) minmax(0,.85fr);
  gap:10px;
  width:100%;
  min-width:0;
}
#modal-event #form-event .date-time-row.all-day{grid-template-columns:minmax(0,1fr)}
#modal-event #form-event .date-time-row .dt-field{min-width:0}
#modal-event #form-event .date-time-row .dt-field input{
  width:100%;
  min-width:0;
  padding:4px 3px!important;
  font-size:11px;
}
@media(max-width:620px){
  #modal-event #form-event > .form-grid:not([hidden]){grid-template-columns:66px minmax(0,1fr)}
  #modal-event #form-event .date-time-row{grid-template-columns:minmax(0,1fr) minmax(0,.82fr);gap:6px}
  #modal-event #form-event .date-time-row .dt-field input{font-size:10px}
}

/* Keep the event details compact, consistent, and on a single date/time row. */
#modal-event #form-event > .form-grid:not([hidden]){
  min-height:30px;
  column-gap:6px;
  row-gap:0;
  padding-block:0;
}
#modal-event #form-event > .form-grid:not([hidden]) > label,
#modal-event #form-event > .form-grid:not([hidden]) *{
  font-size:12px;
}
#modal-event #form-event .ev-dialog-title-row{font-size:12px}
#modal-event #form-event .ev-title-input,
#modal-event #form-event .ev-all-day{font-size:12px}
#modal-event .sch-reference-v4 .sch-rich-content{font-size:12px}
#modal-event #form-event .date-time-row:not(.all-day){
  grid-template-columns:minmax(0,1.25fr) minmax(110px,.75fr);
  gap:8px;
  align-items:center;
  flex-wrap:nowrap;
}
#modal-event #form-event .date-time-row .dt-field{
  display:flex;
  flex:1 1 0;
  width:100%;
  min-width:0;
  overflow:hidden;
}
#modal-event #form-event .date-time-row .dt-field input{
  display:block;
  flex:1 1 auto;
  width:100%;
  min-width:0;
  height:28px;
  box-sizing:border-box;
  padding:3px 4px!important;
  font-size:12px;
}
#modal-event #form-event .ev-dialog-head{margin-bottom:8px}
@media(max-width:620px){
  #modal-event #form-event > .form-grid:not([hidden]){grid-template-columns:72px minmax(0,1fr)}
  #modal-event #form-event .date-time-row:not(.all-day){grid-template-columns:minmax(0,1fr) minmax(105px,.82fr);gap:5px}
  #modal-event #form-event .date-time-row .dt-field input{font-size:12px}
}
#modal-event #form-event > .date-time-line{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,1fr);
  gap:12px;
  align-items:center;
}
#modal-event #form-event > .date-time-line > .form-grid{
  grid-template-columns:82px minmax(0,1fr);
  column-gap:5px;
  min-height:30px;
  margin:0;
  padding:0;
  border:0;
}
#modal-event #form-event > .date-time-line > .form-grid *{font-size:12px}
#modal-event #form-event > .date-time-line > .form-grid > label{
  font-size:12px;
  font-weight:500;
}
@media(max-width:760px){
  #modal-event #form-event > .date-time-line{grid-template-columns:minmax(0,1fr);gap:2px}
}

/* Align and tighten every event detail row, including the availability card. */
#modal-event #form-event > .form-grid:not([hidden]),
#modal-event #form-event > .date-time-line > .form-grid{
  min-height:26px;
  align-items:center;
}
#modal-event #form-event > .form-grid:not([hidden]) > label,
#modal-event #form-event > .date-time-line > .form-grid > label{
  line-height:1.1;
  padding:0;
}
#modal-event #form-event > .form-grid:not([hidden]) input:not([type="hidden"]),
#modal-event #form-event > .form-grid:not([hidden]) select,
#modal-event #form-event > .form-grid:not([hidden]) textarea{
  min-height:25px;
  padding:2px 5px;
  line-height:1.15;
}
#modal-event #form-event > .date-time-line > .form-grid .date-time-row{gap:6px}
#modal-event #form-event > .form-grid:not([hidden]) .freebusy{margin:2px 0;padding:2px 6px}
#modal-event #form-event > .form-grid:not([hidden]) .loc-row{gap:6px}
#modal-event #form-event > .form-grid:not([hidden]) .loc-row .send-btn{min-height:26px;padding:0 8px}
#modal-event #form-event > .form-grid:not([hidden]) .held-chips{gap:4px;margin:0;padding:0}
#modal-event #form-event > .form-grid:not([hidden]) .chip-list{gap:4px;margin:0;padding:0}

/* Tabs stay on one horizontal line; controls sit in a clean row below them. */
#modal-event .sch-reference-v4.sch-tabbed .scheduler-hdr-bar{
  display:flex;
  flex-direction:column;
  align-items:stretch;
  gap:5px;
  padding:6px 8px;
  background:#15151c;
  border:1px solid #34343e;
  border-bottom:0;
  border-radius:4px 4px 0 0;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-tabs{
  display:flex;
  flex:0 0 auto;
  flex-direction:row;
  flex-wrap:nowrap;
  align-items:stretch;
  gap:5px;
  width:100%;
  min-width:0;
  overflow-x:auto;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab{
  position:static;
  flex:0 0 auto;
  height:30px;
  margin:0;
  padding:5px 10px;
  border:1px solid #3b3d48;
  border-radius:3px;
  color:#aab1c0;
  background:#1b1b23;
  box-shadow:none;
  font-size:12px;
  font-weight:500;
  white-space:nowrap;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab:hover{
  color:#f1f1f5;
  background:#29313d;
  border-color:#596779;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab.active{
  z-index:auto;
  color:#eef3f8;
  background:#303b49;
  border-color:#71839a;
  box-shadow:inset 0 0 0 1px rgba(160,185,215,.12);
  font-weight:600;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-nav-cluster{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:6px;
  width:100%;
  min-width:0;
  margin:0;
  flex-wrap:nowrap;
  overflow-x:auto;
}

/* A fixed editor and tab-panel size prevents jumps when changing sections. */
#modal-event #form-event{
  height:min(860px,92vh);
  min-height:min(480px,80vh);
  box-sizing:border-box;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab-panel{
  display:flex;
  flex:0 0 300px;
  flex-direction:column;
  height:300px;
  min-height:300px;
  max-height:300px;
  box-sizing:border-box;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-description-editor{
  display:flex;
  flex:1 1 auto;
  flex-direction:column;
  min-height:0;
  height:100%;
  margin:0!important;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-rich-toolbar{flex:0 0 42px}
#modal-event .sch-reference-v4.sch-tabbed .sch-rich-content{
  flex:1 1 auto;
  min-height:0;
  max-height:none;
  height:auto;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-viewport{
  flex:1 1 auto;
  min-height:0;
  height:auto;
  max-height:none;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend{
  flex:0 0 auto;
  padding:6px 10px;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-description-editor[hidden],
#modal-event .sch-reference-v4.sch-tabbed .scheduler-viewport[hidden],
#modal-event .sch-reference-v4.sch-tabbed .scheduler-legend[hidden],
#modal-event .sch-reference-v4.sch-tabbed .scheduler-subnote[hidden],
#modal-event .sch-reference-v4.sch-tabbed .sch-lock-note[hidden]{display:none!important}

#modal-event .sch-reference-v4.sch-tabbed .scheduler-nav-cluster[hidden]{display:none!important}

/* Attach the tabs directly to the content frame with no tab bottom stroke. */
#modal-event .sch-reference-v4.sch-tabbed .scheduler-hdr-bar{
  flex-direction:row;
  flex-wrap:wrap;
  align-items:flex-end;
  justify-content:flex-start;
  column-gap:10px;
  row-gap:4px;
  padding-bottom:0;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-tabs{
  flex:0 0 auto;
  width:auto;
  overflow:visible;
  align-self:flex-end;
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab,
#modal-event .sch-reference-v4.sch-tabbed .sch-tab:hover,
#modal-event .sch-reference-v4.sch-tabbed .sch-tab.active{
  margin-bottom:-1px;
  border-bottom:0;
  border-radius:3px 3px 0 0;
}
#modal-event .sch-reference-v4.sch-tabbed .scheduler-nav-cluster{
  flex:1 1 340px;
  width:auto;
  margin-left:auto;
  align-self:center;
  overflow-x:auto;
}

/* Match the New Message form's thin row separators without boxing fields. */
#modal-event #form-event > .form-grid:not([hidden]),
#modal-event #form-event > .date-time-line{
  border-bottom:1px solid #26262e;
  margin-left:10px;
  margin-right:10px;
}
#modal-event #form-event > .date-time-line > .form-grid{border-bottom:0}
#modal-event #form-event > .form-grid.attendees-form-row{border-bottom:0}

/* Match the scheduler's outer frame and availability card to the form rules. */
#modal-event #form-event > #scheduler-container{
  width:auto;
  margin:12px 10px 8px;
}
#modal-event #scheduler-container.sch-tabbed .scheduler-hdr-bar,
#modal-event #scheduler-container.sch-tabbed .sch-tab-panel{
  margin-left:0;
  margin-right:0;
}
#modal-event #form-event > .event-availability-card{
  margin-left:10px;
  margin-right:10px;
}

/* Keep the editor status/action row clean, centered, and right aligned. */
#modal-event #form-event .ev-dialog-head{box-shadow:none}
#modal-event #form-event #event-editor-bar.ev-bar-editor{
  display:block;
  margin:0;
  padding:0;
  border:0;
  border-radius:0;
  background:transparent;
  box-shadow:none;
}
#modal-event #form-event #event-editor-bar > .ev-bar{
  display:flex;
  align-items:center;
  width:100%;
  min-height:32px;
  gap:8px;
  margin:0;
  padding:0;
  border:0;
}
#modal-event #form-event #event-editor-bar .ev-status{flex:0 0 auto;line-height:1.2}
#modal-event #form-event #event-editor-bar .ev-note{
  flex:1 1 auto;
  min-width:0;
  align-self:center;
  line-height:1.25;
}
#modal-event #form-event #event-editor-bar .ev-actions{
  display:flex;
  flex:0 0 auto;
  align-items:center;
  justify-content:flex-end;
  gap:5px;
  margin-left:auto;
}
#modal-event #form-event #event-editor-bar .ev-btn{align-self:center}

/* Recurrence settings are front-end only; keep them in the event form flow. */
#modal-event #form-event > .recurrence-toggle-row{min-height:30px;align-items:center}
#modal-event #form-event .recurrence-toggle{
  display:flex;
  align-items:center;
  width:max-content;
  cursor:pointer;
}
#modal-event #form-event .recurrence-toggle input{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
}
#modal-event #form-event .recurrence-toggle-button{
  display:inline-flex;
  align-items:center;
  gap:7px;
  padding:5px 9px;
  border-radius:5px;
  color:#c4ccd8;
  background:#1b1b23;
  font-size:12px;
  line-height:1.2;
}
#modal-event #form-event .recurrence-toggle-button svg{
  width:15px;
  height:15px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#modal-event #form-event .recurrence-toggle input:checked + .recurrence-toggle-button{
  color:#c5e0ff;
  background:#253346;
}
#modal-event #form-event .recurrence-toggle input:focus-visible + .recurrence-toggle-button{
  outline:2px solid #71839a;
  outline-offset:2px;
}
#modal-event #form-event .recurrence-panel{
  margin:0 10px 6px;
  padding:8px 10px 10px;
  border-bottom:1px solid #26262e;
  background:rgba(255,255,255,.018);
}
#modal-event #form-event .recurrence-panel[hidden]{display:none!important}
#modal-event #form-event .recurrence-summary{
  margin:0 0 8px;
  color:#aab1c0;
  font-size:12px;
  line-height:1.35;
}
#modal-event #form-event .recurrence-rule-row,
#modal-event #form-event .recurrence-until-row{
  display:flex;
  align-items:center;
  gap:8px;
  min-height:30px;
  color:#aab1c0;
  font-size:12px;
}
#modal-event #form-event .recurrence-rule-row input,
#modal-event #form-event .recurrence-rule-row select,
#modal-event #form-event .recurrence-until-row input{
  height:29px;
  min-height:29px;
  padding:3px 7px;
  border:0;
  border-radius:4px;
  outline:0;
  color:#e6e8ed;
  background:#202027;
  font:inherit;
}
#modal-event #form-event .recurrence-rule-row input[type="number"]{width:54px}
#modal-event #form-event .recurrence-rule-row select{min-width:85px}
#modal-event #form-event .recurrence-until-row{margin-top:6px}
#modal-event #form-event .recurrence-weekdays{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:8px;
}
#modal-event #form-event .recurrence-weekdays[hidden]{display:none!important}
#modal-event #form-event .recurrence-weekdays button{
  display:grid;
  place-items:center;
  width:32px;
  height:32px;
  padding:0;
  border:0;
  border-radius:50%;
  color:#2b2b31;
  background:#d8d8dc;
  font-size:12px;
  cursor:pointer;
}
#modal-event #form-event .recurrence-weekdays button[aria-pressed="true"]{
  color:#fff;
  background:#398de0;
}
#modal-event #form-event .recurrence-weekdays button:focus-visible{outline:2px solid #8acbff;outline-offset:2px}
@media(max-width:620px){
  #modal-event #form-event .recurrence-panel{margin-left:10px;margin-right:10px;padding:7px}
  #modal-event #form-event .recurrence-weekdays{gap:5px}
  #modal-event #form-event .recurrence-weekdays button{width:29px;height:29px}
}

/* Recurrence is toggled from the event action bar; the Repeat row opens its settings. */
#modal-event #form-event > .recurrence-toggle-row{grid-template-columns:120px minmax(0,1fr)}
#modal-event #form-event #event-recurring{
  position:absolute;
  width:1px;
  height:1px;
  opacity:0;
  pointer-events:none;
}
#modal-event #form-event .recurrence-field-trigger{
  justify-content:flex-start;
  width:max-content;
  min-width:120px;
  padding:0;
  border:0;
  background:transparent;
  color:#aab1c0;
  cursor:pointer;
  text-align:left;
}
#modal-event #form-event .recurrence-field-trigger:hover{color:#f4f4f6}
#modal-event #form-event .recurrence-weekdays button[aria-pressed="true"]{
  color:#151515;
  background:#ffc107;
}
#modal-event #form-event .recurrence-weekdays button:focus-visible{outline-color:#ffc107}
#modal-event #form-event .ev-recurrence-btn.is-active{
  color:#ffc107;
  background:rgba(255,193,7,.14);
}
#modal-event #form-event .ev-recurrence-btn svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#modal-event #form-event .ev-recurrence-btn:focus-visible{outline:2px solid #ffc107;outline-offset:2px}
#modal-event #form-event .ev-reminder-control{position:relative;display:inline-flex;align-items:center;z-index:30}
#modal-event #form-event .ev-reminder-btn svg{
  width:16px;
  height:16px;
  fill:none;
  stroke:currentColor;
  stroke-width:1.8;
  stroke-linecap:round;
  stroke-linejoin:round;
}
#modal-event #form-event .ev-reminder-btn .ev-reminder-chevron{width:10px;height:10px;margin-left:-5px}
#modal-event #form-event .ev-reminder-btn.is-active{color:#ffc107;background:rgba(255,193,7,.14)}
#modal-event #form-event .ev-reminder-btn:focus-visible{outline:2px solid #ffc107;outline-offset:2px}
#modal-event #form-event .ev-reminder-menu{
  position:absolute;
  top:calc(100% + 7px);
  right:0;
  z-index:1000;
  width:190px;
  max-height:340px;
  overflow:auto;
  padding:5px;
  border:1px solid #383842;
  border-radius:7px;
  background:#202027;
  box-shadow:0 10px 26px rgba(0,0,0,.5);
}
#modal-event #form-event .ev-reminder-menu[hidden]{display:none!important}
#modal-event #form-event .ev-reminder-option{
  display:block;
  width:100%;
  min-height:32px;
  padding:7px 9px;
  border:0;
  border-radius:4px;
  background:transparent;
  color:#d5d8df;
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
#modal-event #form-event .ev-reminder-option:hover,
#modal-event #form-event .ev-reminder-option:focus-visible{background:#30303a;color:#fff;outline:0}
#modal-event #form-event .ev-reminder-option[aria-checked="true"]{color:#ffc107}
#modal-event #form-event > .reminder-summary-row{grid-template-columns:120px minmax(0,1fr);align-items:center}
#modal-event #form-event > .reminder-summary-row[hidden]{display:none!important}
#modal-event #form-event .reminder-value-trigger{
  width:max-content;
  min-width:120px;
  padding:0;
  border:0;
  background:transparent;
  color:#aab1c0;
  font:inherit;
  font-size:12px;
  text-align:left;
  cursor:pointer;
}
#modal-event #form-event .reminder-value-trigger:hover{color:#ffc107}

/* Give native time controls a darker, cleaner finish with the app's gold accent. */
#modal-event #form-event .date-time-line input[type="time"]{
  color-scheme:dark;
  accent-color:#ffc107;
  caret-color:#ffc107;
  font-variant-numeric:tabular-nums;
  transition:color .15s ease,background-color .15s ease;
}
#modal-event #form-event .date-time-line input[type="time"]:hover{
  color:#fff;
}
#modal-event #form-event .date-time-line input[type="time"]:focus-visible{
  outline:0;
  border-radius:5px;
  background:rgba(255,193,7,.06);
}
#modal-event #form-event .date-time-line input[type="time"]::-webkit-datetime-edit-hour-field:focus,
#modal-event #form-event .date-time-line input[type="time"]::-webkit-datetime-edit-minute-field:focus,
#modal-event #form-event .date-time-line input[type="time"]::-webkit-datetime-edit-ampm-field:focus{
  color:#171717;
  background:#ffc107;
  border-radius:4px;
}
#modal-event #form-event .date-time-line input[type="time"]::-webkit-calendar-picker-indicator{
  opacity:.82;
  transition:opacity .15s ease,transform .15s ease;
}
#modal-event #form-event .date-time-line input[type="time"]:hover::-webkit-calendar-picker-indicator{
  opacity:1;
  transform:scale(1.08);
}

/* Replace the operating-system time popup with a compact, app-styled wheel picker. */
#modal-event #form-event .date-time-line .dt-field{overflow:visible}
#modal-event #form-event .date-time-line input.time-value-input{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  z-index:-1!important;
  width:1px!important;
  min-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
#modal-event #form-event .time-picker-trigger{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  height:28px;
  padding:3px 4px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#f2f3f5;
  font:inherit;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
#modal-event #form-event .time-picker-trigger:hover,
#modal-event #form-event .time-picker-trigger:focus-visible{
  background:rgba(255,193,7,.08);
  color:#fff;
  outline:0;
}
.time-wheel-picker{
  position:fixed;
  z-index:30000;
  display:flex;
  align-items:center;
  justify-content:center;
  gap:5px;
  width:164px;
  height:262px;
  padding:9px 7px;
  box-sizing:border-box;
  border:1px solid #55545f;
  border-radius:24px;
  background:#292832;
  box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);
  color:#f4f5f7;
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.time-wheel-column{
  display:flex;
  flex:0 0 39px;
  flex-direction:column;
  align-items:stretch;
  min-width:0;
}
.time-wheel-column.time-wheel-period{flex-basis:38px}
.time-wheel-arrow{
  display:grid;
  flex:0 0 19px;
  place-items:center;
  width:100%;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#aaa9b5;
  cursor:pointer;
}
.time-wheel-arrow:hover{background:#383742;color:#fff}
.time-wheel-arrow svg{width:13px;height:13px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.time-wheel-list{
  position:relative;
  height:180px;
  overflow:auto;
  overscroll-behavior:contain;
  scrollbar-width:none;
  scroll-snap-type:y mandatory;
}
.time-wheel-list::-webkit-scrollbar{display:none}
.time-wheel-option{
  display:grid;
  place-items:center;
  width:100%;
  height:29px;
  flex:0 0 29px;
  padding:0;
  border:1px solid transparent;
  border-radius:4px;
  background:transparent;
  color:#f2f2f4;
  font:inherit;
  font-size:12px;
  cursor:pointer;
  scroll-snap-align:center;
}
.time-wheel-option:hover{background:#3a3944}
.time-wheel-option[aria-selected="true"]{
  border-color:#04d9ee;
  background:#11d7e9;
  color:#09242a;
  box-shadow:0 0 0 1px rgba(4,217,238,.15),0 0 12px rgba(4,217,238,.16);
}
.time-wheel-period-list{
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:3px;
}
.time-wheel-period-list .time-wheel-option{flex:0 0 29px}

#modal-event #form-event .date-time-line input.date-value-input{
  position:absolute!important;
  left:0!important;
  top:50%!important;
  z-index:-1!important;
  width:1px!important;
  min-width:1px!important;
  height:1px!important;
  min-height:1px!important;
  padding:0!important;
  border:0!important;
  opacity:0!important;
  pointer-events:none!important;
  clip-path:inset(50%)!important;
}
#modal-event #form-event .date-picker-trigger{
  display:flex;
  align-items:center;
  width:100%;
  min-width:0;
  height:28px;
  padding:3px 4px;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#f2f3f5;
  font:inherit;
  font-size:12px;
  font-variant-numeric:tabular-nums;
  text-align:left;
  cursor:pointer;
  transition:background .14s ease,color .14s ease;
}
#modal-event #form-event .date-picker-trigger:hover,
#modal-event #form-event .date-picker-trigger:focus-visible{
  background:rgba(255,193,7,.08);
  color:#fff;
  outline:0;
}
.date-calendar-picker{
  position:fixed;
  z-index:30001;
  width:276px;
  height:302px;
  padding:10px 12px 9px;
  box-sizing:border-box;
  border:1px solid #55545f;
  border-radius:24px;
  background:#292832;
  box-shadow:0 14px 38px rgba(0,0,0,.55),inset 0 1px rgba(255,255,255,.06);
  color:#f3f3f6;
  font:12px/1.2 system-ui,-apple-system,"Segoe UI",sans-serif;
}
.date-calendar-header{
  display:grid;
  grid-template-columns:28px minmax(0,1fr) 28px;
  align-items:center;
  gap:6px;
  height:34px;
  margin-bottom:7px;
}
.date-calendar-nav,.date-calendar-title{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:28px;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#aaa9b5;
  cursor:pointer;
}
.date-calendar-nav:hover,.date-calendar-title:hover{background:#393842;color:#fff}
.date-calendar-nav svg{width:17px;height:17px;fill:none;stroke:currentColor;stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.date-calendar-title{
  justify-self:center;
  gap:6px;
  min-width:112px;
  padding:0 10px;
  border:1px solid #777681;
  background:#36353e;
  color:#fff;
  font:inherit;
  font-size:12px;
}
.date-calendar-title svg{width:12px;height:12px;fill:none;stroke:currentColor;stroke-width:1.5;stroke-linecap:round;stroke-linejoin:round}
.date-calendar-grid{
  display:grid;
  grid-template-columns:repeat(7,minmax(0,1fr));
  grid-template-rows:20px repeat(6,27px);
  gap:2px 3px;
}
.date-calendar-weekday{
  display:grid;
  place-items:center;
  color:#a8a7b1;
  font-size:10px;
}
.date-calendar-weekday:first-child,.date-calendar-weekday:last-of-type{color:#d55d70}
.date-calendar-day{
  display:grid;
  place-items:center;
  min-width:0;
  padding:0;
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#f4f4f6;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.date-calendar-day:hover{background:#3d3c47;color:#fff}
.date-calendar-day.is-outside{color:#85848f}
.date-calendar-day.is-today:not(.is-selected){border-color:#16cce0;color:#45d9e9}
.date-calendar-day.is-selected{
  border-color:#04d9ee;
  background:#11d7e9;
  color:#09242a;
  box-shadow:0 0 0 1px rgba(4,217,238,.12),0 0 12px rgba(4,217,238,.14);
}
.date-calendar-day.is-selected:hover{background:#41e1ef}
.date-calendar-footer{
  display:flex;
  align-items:flex-end;
  height:34px;
  padding-top:5px;
}
.date-calendar-clear{
  min-width:54px;
  height:25px;
  padding:0 8px;
  border:1px solid #a4a3ac;
  border-radius:4px;
  background:#34333c;
  color:#f1f1f3;
  font:inherit;
  font-size:11px;
  cursor:pointer;
}
.date-calendar-clear:hover{border-color:#14d5e8;background:#3b3a44;color:#fff}
.date-month-grid{
  display:grid;
  grid-template-columns:repeat(3,minmax(0,1fr));
  gap:7px;
  height:201px;
  padding:4px 1px;
}
.date-month-option{
  border:1px solid transparent;
  border-radius:6px;
  background:transparent;
  color:#e5e4e9;
  font:inherit;
  cursor:pointer;
}
.date-month-option:hover{background:#3d3c47}
.date-month-option.is-current{border-color:#04d9ee;background:#11d7e9;color:#09242a}
#modal-event #form-event > .room-form-row,
#modal-event #form-event > .resources-form-row{
  grid-template-columns:82px minmax(0,1fr);
}
#modal-event #form-event > .room-form-row .loc-row{width:100%;min-width:0}
#modal-event #form-event > .room-form-row .loc-row input{min-width:0}
#modal-event #form-event > .room-form-row .room-field-content{min-width:0}
#modal-event #form-event > .room-form-row .room-select-btn,
#modal-event #form-event > .resources-form-row .resources-row > .cancel-btn{
  flex:0 0 auto;
  min-height:26px;
  padding:0 10px;
  border:1px solid #3b3b45;
  border-radius:6px;
  background:#1b1b23;
  color:#e6e6ea;
  font-size:12px;
  cursor:pointer;
}
#modal-event #form-event > .room-form-row .room-select-btn:hover,
#modal-event #form-event > .resources-form-row .resources-row > .cancel-btn:hover{
  border-color:#777681;
  background:#272730;
  color:#fff;
}
#modal-event #form-event > .room-form-row:not(.has-room) .room-field-content > .held-chips{display:none}
#modal-event #form-event > .room-form-row.has-room .room-field-content{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:6px 8px;
}
#modal-event #form-event > .room-form-row.has-room .loc-row{flex:0 0 auto;width:auto}
#modal-event #form-event > .room-form-row.has-room .loc-row input{display:none}
#modal-event #form-event > .room-form-row.has-room .room-field-content > .held-chips{flex:0 0 auto;margin:0}
#modal-event #form-event > .room-form-row .loc-note{flex:1 0 100%;margin:0}
#modal-event #form-event > .resources-form-row .resources-row{
  display:flex;
  align-items:center;
  flex-wrap:wrap;
  gap:8px;
  width:100%;
  min-width:0;
}
#modal-event #form-event > .resources-form-row .held-chips{
  flex:1 1 auto;
  min-width:0;
  margin:0;
}
#modal-event #form-event > .resources-form-row .loc-note{flex:1 0 100%;margin:0}
@media(max-width:430px){
  .time-wheel-picker{width:154px;height:248px;gap:4px}
  .time-wheel-column{flex-basis:37px}
  .time-wheel-column.time-wheel-period{flex-basis:36px}
  .time-wheel-list{height:168px}
  .date-calendar-picker{width:266px;height:294px;padding:8px 9px}
  .date-calendar-grid{grid-template-rows:19px repeat(6,26px)}
}

/* The compact free/busy summary follows the scheduler at the same frame width. */
#modal-event #form-event > .event-availability-card{
  margin:0 10px 12px;
  border:1px solid #34343e;
  border-radius:8px;
  overflow:hidden;
  background:#15151c;
}
#modal-event .event-availability-title{
  padding:6px 10px;
  border-bottom:1px solid #34343e;
  color:#aab1c0;
  font-size:12px;
  font-weight:600;
  line-height:1.2;
}
#modal-event #form-event .event-availability-card .freebusy{
  margin:0;
  padding:6px 10px;
  border:0;
  border-radius:0;
  background:transparent;
}
#modal-event #form-event .event-availability-card .freebusy-hint{font-size:12px;line-height:1.3}
#modal-event #form-event .event-availability-card .freebusy-list{margin:0;max-height:150px}
#modal-event #form-event .event-availability-card .freebusy-list[hidden]{display:none!important}
#modal-event .sch-reference-v4 .sch-refresh-icon{
  display:inline-grid;
  place-items:center;
  width:30px;
  height:30px;
  flex:0 0 30px;
  padding:0;
  border:0;
  border-radius:5px;
  background:transparent;
  color:#38a6ff;
  cursor:pointer;
}
#modal-event .sch-reference-v4 .sch-refresh-icon:hover{background:#232b35;color:#8acbff}
#modal-event .sch-reference-v4 .sch-refresh-icon:focus-visible{outline:2px solid #71839a;outline-offset:1px}
#modal-event .sch-reference-v4 .sch-refresh-icon svg{
  width:17px;
  height:17px;
  fill:none;
  stroke:currentColor;
  stroke-width:2;
  stroke-linecap:round;
  stroke-linejoin:round;
}

/* Compact scheduler height and remove the divider at its top edge. */
#modal-event #form-event > #scheduler-container{border-top:0}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab-panel{
  flex:0 0 300px;
  height:300px;
  min-height:300px;
  max-height:300px;
}
/* Optional and FYI recipients are revealed from the attendee row on demand. */
#modal-event #form-event > .attendees-form-row > .attendees-label-control{
  display:flex;align-items:center;gap:4px;min-width:0
}
#modal-event .attendees-label-control label{margin:0;white-space:nowrap}
#modal-event .attendee-disclosure{
  display:inline-grid;place-items:center;flex:0 0 18px;width:18px;height:18px;padding:0;
  border:0;border-radius:4px;background:transparent;color:#aab1c0;cursor:pointer
}
#modal-event .attendee-disclosure:hover{background:#252630;color:#f0c629}
#modal-event .attendee-chevron{
  width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;
  transform:translateY(-1px) rotate(45deg);transition:transform .16s ease
}
#modal-event .attendee-disclosure[aria-expanded="true"] .attendee-chevron{transform:translateY(2px) rotate(225deg)}
#modal-event #additional-attendee-rows[hidden]{display:none!important}
#modal-event #additional-attendee-rows .attendee-extra-row{
  grid-template-columns:110px minmax(0,1fr);min-height:26px;align-items:center;
  margin:0 10px;border-bottom:1px solid #26262e
}
#modal-event #additional-attendee-rows .attendee-extra-row label{font-weight:400;color:#9299a8}
#modal-event #additional-attendee-rows .attendee-extra-row input{
  width:100%;min-width:0;min-height:26px;padding:3px 0;border:0!important;
  background:transparent!important;box-shadow:none!important;color:#e8e8ef;font:inherit
}
#modal-event #additional-attendee-rows .attendee-extra-row input::placeholder{color:#737987}
#modal-event #additional-attendee-rows .attendee-extra-row input:focus{outline:0}

/* Customer-directory suggestions for the calendar attendee fields. */
#modal-event .calendar-recipient-host{position:relative}
#modal-event .calendar-recipient-host:focus-within{z-index:80}
#modal-event .calendar-recipient-suggestions{
  position:absolute;z-index:90;top:calc(100% + 2px);left:0;right:0;
  max-height:240px;overflow:auto;padding:5px;border:1px solid #3d3d49;
  border-radius:8px;background:#17171e;box-shadow:0 14px 30px rgba(0,0,0,.48)
}
#modal-event .attendee-extra-row .calendar-recipient-suggestions{left:110px}
#modal-event .calendar-recipient-suggestions[hidden]{display:none!important}
#modal-event .calendar-recipient-option{
  display:flex;align-items:center;width:100%;gap:9px;padding:7px;
  border:0;border-radius:6px;background:transparent;color:#f1f1f5;
  text-align:left;cursor:pointer
}
#modal-event .calendar-recipient-option:hover,
#modal-event .calendar-recipient-option[aria-selected="true"]{background:rgba(255,196,0,.13)}
#modal-event .calendar-recipient-avatar{
  position:relative;display:grid;flex:0 0 32px;width:32px;height:32px;
  place-items:center;overflow:hidden;border-radius:50%;background:#3b3b45;
  color:#fff;font-size:10px;font-weight:700
}
#modal-event .calendar-recipient-avatar img{
  position:absolute;inset:0;width:100%;height:100%;object-fit:cover
}
#modal-event .calendar-recipient-text{display:grid;min-width:0;gap:2px}
#modal-event .calendar-recipient-text strong,
#modal-event .calendar-recipient-text small{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
#modal-event .calendar-recipient-text strong{font-size:12px}
#modal-event .calendar-recipient-text small{color:#9299a8;font-size:11px}

/* Keep the expanded recipient fields at the compact event-form text size. */
#modal-event #additional-attendee-rows .attendee-extra-row label,
#modal-event #additional-attendee-rows .attendee-extra-row input{
  font-size:12px!important
}

/* Highlight scheduler section headings with the event's yellow accent. */
#modal-event .sch-reference-v4.sch-tabbed .sch-table .sch-group-row td,
#modal-event .sch-reference-v4.sch-tabbed .sch-table .sch-group-row td.sch-col-invitee-hdr,
#modal-event .sch-reference-v4.sch-tabbed .sch-table .sch-group-row .sch-sticky-col{
  color:#ffc400!important
}

/* Gray idle tabs, yellow hover state, and a clear yellow selected tab. */
#modal-event .sch-reference-v4.sch-tabbed .sch-tab,
#modal-event .sch-reference-v4.sch-tabbed .sch-tab:hover{
  color:#b4b7c1!important;
  background:#22232b!important;
  border-color:#41434d!important;
  box-shadow:none!important
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab:hover{
  color:#ffe28a!important;
  background:#37311d!important;
  border-color:#a98613!important
}
#modal-event .sch-reference-v4.sch-tabbed .sch-tab.active,
#modal-event .sch-reference-v4.sch-tabbed .sch-tab.active:hover{
  color:#17140a!important;
  background:#ffc400!important;
  border-color:#ffc400!important;
  box-shadow:inset 0 2px #ffe27a!important;
  font-weight:700
}

/* Keep every hour label neutral gray across the people, room, and resource rows. */
#modal-event .sch-reference-v4.sch-tabbed .sch-table th.sch-hour-hdr,
#modal-event .sch-reference-v4.sch-tabbed .sch-table td.sch-resource-hour{
  color:#9398a6!important
}


/* Consistent lightweight stroke icons across the Mail shell and message tools. */
.mail-modern-icon{
  display:inline-block;width:15px;height:15px;flex:0 0 15px;
  color:currentColor;vertical-align:middle
}
.mail-icon-label{display:inline-block;line-height:1.15}
.app-tab [data-modern-ready="true"],
.subtle-btn[data-modern-ready="true"],
.tool-btn[data-modern-ready="true"],
.primary-btn[data-modern-ready="true"],
.profile-menu-item[data-modern-ready="true"]{
  display:inline-flex;align-items:center;gap:7px
}
.search-icon .mail-modern-icon{width:17px;height:17px}
.tile-icon .mail-modern-icon{width:24px;height:24px;flex:0 0 24px}
#folders .nav-link{display:flex;align-items:center;justify-content:flex-start;gap:9px;text-align:left}
#folders .nav-link>span:not(.badge){flex:1;text-align:left}
#folders .nav-link>.badge{margin-left:auto}
#folders .nav-link .mail-modern-icon{width:16px;height:16px;opacity:.82}
.msg-meta-right .mail-modern-icon{width:15px;height:15px}
.att-pill .mail-modern-icon{width:13px;height:13px}
.dateheading .mail-modern-icon{width:14px;height:14px}

/* The folder navigator follows whichever workspace theme is active. Keep its
   surfaces and folder states on the shared palette instead of the original
   black-and-gold literals above. */
html[data-workspace-theme] .mail-layout>nav{background:linear-gradient(145deg,var(--gold-tint),transparent 72%),var(--bg);border-right-color:var(--line)}
html[data-workspace-theme] .mail-layout>nav .primary-btn{background:var(--gold);color:var(--gold-ink)}
html[data-workspace-theme] .mail-layout>nav .nav-link{color:var(--soft)}
html[data-workspace-theme] .mail-layout>nav .nav-link:hover{background:var(--gold-tint);color:var(--gold-text)}
html[data-workspace-theme] .mail-layout>nav .nav-link.active{background:var(--gold-tint);color:var(--gold-text)}
html[data-workspace-theme] .mail-layout>nav .nav-link.active .badge{color:var(--gold-text)}
html[data-workspace-theme] .mail-layout>nav .folderdrop{background:var(--gold-tint)!important;color:var(--gold-text)!important;outline-color:var(--gold)!important}
html[data-workspace-theme] .mail-layout>nav :focus-visible{outline-color:var(--gold)}
html[data-workspace-theme="spartannash-custom"] .top .brand.theme-brand-spartannash{margin-left:-16px}
html[data-workspace-theme="spartannash-custom"] .top .brand.theme-brand-spartannash img{object-position:left center}
html[data-workspace-theme="cswg-custom"] .top .brand.theme-brand-cswg{margin-left:-6px}
html[data-workspace-theme="cswg-custom"] .top .brand.theme-brand-cswg img{object-position:left center}

.app-tile[data-modern-icon="contacts"],.app-tile[data-modern-icon="file"]{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:8px}
.dateheading .chev{display:inline-block;width:6px;height:6px;border:solid currentColor;border-width:0 1.5px 1.5px 0;transform:translateY(-1px) rotate(45deg)}
.dateheading .chev.collapsed{transform:translateY(1px) rotate(-45deg)}

.office-launcher-tile,.office-launcher-tile:hover{border:0!important;background:transparent!important;box-shadow:none!important}
.office-launcher-tile img.office-launcher-icon{border:0!important;outline:0!important;box-shadow:none!important}

.office-launcher-icon{width:42px;height:42px;object-fit:contain;display:block}

.office-launcher-tile{width:58px!important;height:58px!important;margin:-5px auto}
.office-launcher-tile img.office-launcher-icon{width:54px;height:54px;max-width:none}


.contacts-launcher-tile{width:58px!important;height:58px!important;margin:-5px auto;border:0!important;background:transparent!important;box-shadow:none!important}
.contacts-launcher-icon{width:54px;height:54px;max-width:none;object-fit:contain;display:block;border:0;outline:0;box-shadow:none}


.notes-launcher-tile,.todo-launcher-tile{width:58px!important;height:58px!important;margin:-5px auto;border:0!important;background:transparent!important;box-shadow:none!important}
.notes-launcher-icon,.todo-launcher-icon{width:54px;height:54px;max-width:none;object-fit:contain;display:block;border:0;outline:0;box-shadow:none}


.mail-launcher-tile,.calendar-launcher-tile{width:58px!important;height:58px!important;margin:-5px auto;border:0!important;background:transparent!important;box-shadow:none!important}
.mail-launcher-icon,.calendar-launcher-icon{width:54px;height:54px;max-width:none;object-fit:contain;display:block;border:0;outline:0;box-shadow:none}

/* The reader chrome follows the selected workspace theme. The framed message
   itself keeps its original/dark appearance choice because it is sender content. */
html[data-workspace-theme] .reader-col {
  background: var(--panel, var(--bg));
  background: color-mix(in srgb, var(--panel, var(--bg)) 82%, #000);
  color: var(--text);
}
html[data-workspace-theme] .reader-toolbar {
  background: var(--panel-alt, var(--card));
  background: color-mix(in srgb, var(--panel-alt, var(--card)) 78%, #000);
  border-color: var(--line);
}
html[data-workspace-theme] .reader-body-wrap:not(.rich-reader-active) {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, #000);
  color: var(--text);
}
html[data-workspace-theme] .reader-body-wrap.rich-reader-active {
  background: var(--bg);
  background: color-mix(in srgb, var(--bg) 82%, #000);
}
html[data-workspace-theme] .rich-message-head {
  background: var(--card);
  background: color-mix(in srgb, var(--card) 82%, #000);
  border-color: var(--line);
}
html[data-workspace-theme] .rich-message-subject,
html[data-workspace-theme] .rich-from-name {
  color: var(--text);
}
html[data-workspace-theme] .rich-sender-avatar {
  background: var(--panel-alt, var(--card));
  background: color-mix(in srgb, var(--panel-alt, var(--card)) 76%, #000);
  border-color: var(--line);
  color: var(--gold-text, var(--gold));
  box-shadow: none;
}
html[data-workspace-theme] .rich-preview-theme-btn.active {
  color: var(--gold, var(--soft));
  border-color: var(--line);
  background: var(--gold-tint, transparent);
}
html[data-workspace-theme] .rich-preview-theme-btn:focus-visible {
  outline-color: var(--gold, var(--soft));
}
html[data-workspace-theme] .rich-reaction-picker {
  background: var(--panel-alt, var(--card));
  background: color-mix(in srgb, var(--panel-alt, var(--card)) 76%, #000);
  border-color: var(--line);
}
html[data-workspace-theme] .rich-reaction-option:hover,
html[data-workspace-theme] .rich-reaction-option:focus-visible {
  border-color: var(--line);
  background: var(--gold-tint, transparent);
}
html[data-workspace-theme] .rich-reaction-clear:hover {
  color: var(--text);
  background: var(--gold-tint, transparent);
}
html[data-workspace-theme] .rich-webview-wrap {
  border-color: var(--line);
  box-shadow: 0 8px 24px rgba(0,0,0,.2);
}
html[data-workspace-theme] .rich-plain-body {
  border-color: var(--line);
  background: var(--card);
  background: color-mix(in srgb, var(--card) 82%, #000);
  color: var(--text);
}
html[data-workspace-theme] .rich-plain-body.mail-preview-original {
  background: #fff;
  border-color: #dedee3;
  color: #17171c;
}