/* Hypha · Invitation · the Commander's card (index.html #sheet-commander): the real parts of the Commander's bridge page,
   scaled into the sheet. Its desktop: the menu bar with today's clock (js/card-rc.js), the team chat where every message
   waits on you (bridge css/tool-chat.css: its sidebar, its role avatars, its composer), the board behind it with the
   clients' marks as the bridge's app kit carries them (shared/app-kit/logos, logo.dev images, copied to
   assets/logos/; only in the app's data), and the mail banner over both. One unit, --u: one design pixel of a 560-wide
   stage (400 wide on a phone), so the desktop scales as one picture. Every rule is scoped to the sheet's id. */

#sheet-commander .cm2 {
  container-type: inline-size;
  --u: calc(100cqw / 560);
  font-family: var(--f-app);
  /* un-boxed 10-27 (V: "wrapped in a box, like an actual folder box"): no plate, no ring, no wallpaper; the menu bar,
     the chat, the board and the mail float on the dark stage */
}
#sheet-commander .cm2-wall { display: none; }
#sheet-commander .cm2 * { box-sizing: border-box; }
#sheet-commander .cm2 p { margin: 0; }
#sheet-commander .cm2 svg { display: block; flex: none; }
#sheet-commander .rc-ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* ---- the desktop: a steel light from above on a deep wallpaper ---- */
#sheet-commander .cm2-wall {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(70% 55% at 46% -8%, rgb(175 200 215 / 0.34), transparent 70%),
    radial-gradient(60% 60% at 104% 104%, rgb(64 104 140 / 0.4), transparent 70%),
    radial-gradient(50% 50% at -6% 70%, rgb(40 70 96 / 0.35), transparent 70%),
    linear-gradient(160deg, #1b2a36, #0c141a 58%, #070b0e);
}

/* ---- the menu bar ---- */
#sheet-commander .cm2-menu {
  position: absolute;
  left: 0; right: 0; top: 0;
  z-index: 4;
  height: calc(20 * var(--u));
  display: flex;
  align-items: center;
  gap: calc(11 * var(--u));
  padding: 0 calc(12 * var(--u));
  background: rgb(232 236 240 / 0.86);
  box-shadow: 0 calc(1 * var(--u)) 0 rgb(0 0 0 / 0.28);
  color: #1b1f23;
  font: 400 calc(8.6 * var(--u)) / 1 var(--f-app);
  white-space: nowrap;
}
#sheet-commander .cm2-menu strong { font-weight: 700; }
#sheet-commander .cm2-mr { margin-left: auto; display: flex; align-items: center; gap: calc(9 * var(--u)); font-variant-numeric: tabular-nums; }
#sheet-commander .cm2-wifi { width: calc(11 * var(--u)); height: calc(8.4 * var(--u)); }
#sheet-commander .cm2-bat { position: relative; width: calc(18 * var(--u)); height: calc(8.4 * var(--u)); border-radius: calc(2.4 * var(--u)); box-shadow: inset 0 0 0 calc(0.8 * var(--u)) rgb(27 31 35 / 0.55); }
#sheet-commander .cm2-bat::before { content: ""; position: absolute; left: calc(1.5 * var(--u)); top: calc(1.5 * var(--u)); bottom: calc(1.5 * var(--u)); width: 66%; border-radius: calc(1 * var(--u)); background: #1b1f23; }

/* ---- a window: its title bar, three lights, the drop shadow of a window on a desktop ---- */
#sheet-commander .cm2-win {
  position: absolute;
  overflow: hidden;
  border-radius: calc(9 * var(--u));
  background: #fff;
  box-shadow:
    0 0 0 calc(0.7 * var(--u)) rgb(0 0 0 / 0.55),
    0 calc(26 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.55),
    0 calc(6 * var(--u)) calc(16 * var(--u)) rgb(0 0 0 / 0.35);
}
#sheet-commander .cm2-bar {
  position: relative;
  height: calc(22 * var(--u));
  display: flex;
  align-items: center;
  padding: 0 calc(9 * var(--u));
  background: linear-gradient(#f5f6f7, #e8eaec);
  border-bottom: calc(0.7 * var(--u)) solid #d4d7da;
}
#sheet-commander .cm2-lights { display: flex; gap: calc(5.4 * var(--u)); position: relative; z-index: 1; }
#sheet-commander .cm2-lights span { width: calc(8.6 * var(--u)); height: calc(8.6 * var(--u)); border-radius: 50%; box-shadow: inset 0 0 0 calc(0.5 * var(--u)) rgb(0 0 0 / 0.14); }
#sheet-commander .cm2-lights span:nth-child(1) { background: #ff5f57; }
#sheet-commander .cm2-lights span:nth-child(2) { background: #febc2e; }
#sheet-commander .cm2-lights span:nth-child(3) { background: #28c840; }
#sheet-commander .cm2-lights--off span:nth-child(n) { background: #d2d5d8; }
#sheet-commander .cm2-title { position: absolute; left: 0; right: 0; top: 0; bottom: 0; display: flex; align-items: center; justify-content: center; gap: calc(5 * var(--u)); font: 600 calc(8.6 * var(--u)) / 1 var(--f-app); color: #4a5157; }
#sheet-commander .cm2-glyph { width: calc(12 * var(--u)); height: calc(12 * var(--u)); border-radius: calc(3.2 * var(--u)); display: grid; place-items: center; background: var(--g); color: #fff; flex: none; }
#sheet-commander .cm2-glyph .rc-ic { width: calc(8 * var(--u)); height: calc(8 * var(--u)); stroke-width: 2.1; }

/* the role avatars: a rounded square in the role's colour with its initials (bridge js/tool-kit.js ROLES) */
#sheet-commander .cm2-av { --s: calc(13 * var(--u)); width: var(--s); height: var(--s); flex: none; display: inline-grid; place-items: center; border-radius: calc(3.6 * var(--u)); background: var(--c); color: #fff; font: 700 calc(5.8 * var(--u)) / 1 var(--f-app); letter-spacing: 0.02em; }
#sheet-commander .cm2-av--l { --s: calc(22 * var(--u)); border-radius: calc(5 * var(--u)); font-size: calc(8.2 * var(--u)); }

/* ---- the board behind: In progress, Waiting on you; each card its client's mark ---- */
#sheet-commander .cm2-board { left: calc(300 * var(--u)); top: calc(104 * var(--u)); width: calc(250 * var(--u)); height: calc(296 * var(--u)); }
#sheet-commander .cm2-cols { height: calc(100% - 22 * var(--u)); display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: calc(7 * var(--u)); padding: calc(8 * var(--u)); background: #f4f5f7; }
#sheet-commander .cm2-col { min-width: 0; overflow: hidden; display: flex; flex-direction: column; gap: calc(6 * var(--u)); padding: calc(5 * var(--u)) calc(6 * var(--u)) calc(6 * var(--u)); border-radius: calc(7 * var(--u)); background: #e9ebef; }
#sheet-commander .cm2-colh { display: flex; align-items: center; gap: calc(5 * var(--u)); height: calc(18 * var(--u)); padding: 0 calc(2 * var(--u)); font: 600 calc(8.4 * var(--u)) / 1 var(--f-app); color: #172b4d; white-space: nowrap; }
#sheet-commander .cm2-colh em { font-style: normal; font-weight: 400; color: #6b778c; }
#sheet-commander .cm2-k { width: calc(6.4 * var(--u)); height: calc(6.4 * var(--u)); border-radius: calc(1.8 * var(--u)); background: var(--h); flex: none; }
#sheet-commander .cm2-dc { display: flex; flex-direction: column; gap: calc(5 * var(--u)); padding: calc(7 * var(--u)) calc(7 * var(--u)) calc(6.5 * var(--u)); border-radius: calc(6 * var(--u)); background: #fff; box-shadow: 0 calc(1 * var(--u)) calc(1.6 * var(--u)) rgb(9 30 66 / 0.22), 0 0 calc(1 * var(--u)) rgb(9 30 66 / 0.28); }
#sheet-commander .cm2-lb { width: calc(24 * var(--u)); height: calc(3.6 * var(--u)); border-radius: calc(2 * var(--u)); background: var(--h); }
#sheet-commander .cm2-dc strong { font: 500 calc(8.8 * var(--u)) / 1.25 var(--f-app); color: #172b4d; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet-commander .cm2-co { display: flex; align-items: center; gap: calc(4.5 * var(--u)); min-width: 0; font: 400 calc(7.8 * var(--u)) / 1.2 var(--f-app); color: #44546f; white-space: nowrap; }
#sheet-commander .cm2-co img { display: block; width: calc(13 * var(--u)); height: calc(13 * var(--u)); flex: none; border-radius: calc(3.4 * var(--u)); background: #fff; object-fit: contain; box-shadow: 0 0 0 calc(0.7 * var(--u)) rgb(9 30 66 / 0.12); }
#sheet-commander .cm2-ft { display: flex; align-items: center; gap: calc(6 * var(--u)); font: 400 calc(7.2 * var(--u)) / 1 var(--f-app); color: #6b778c; white-space: nowrap; }
#sheet-commander .cm2-ft .cm2-av { --s: calc(12 * var(--u)); border-radius: calc(3.2 * var(--u)); font-size: calc(5.2 * var(--u)); }
#sheet-commander .cm2-due, #sheet-commander .cm2-cm { display: inline-flex; align-items: center; gap: calc(2.4 * var(--u)); }
#sheet-commander .cm2-due .rc-ic, #sheet-commander .cm2-cm .rc-ic { width: calc(7.6 * var(--u)); height: calc(7.6 * var(--u)); }
#sheet-commander .cm2-due--now { padding: calc(1.6 * var(--u)) calc(3.4 * var(--u)); border-radius: calc(3 * var(--u)); background: #ffeceb; color: #c9372c; }
#sheet-commander .cm2-cm { margin-left: auto; }

/* ---- the team chat in front: the dark sidebar, #team open, every message a question for you ---- */
#sheet-commander .cm2-chat { left: calc(12 * var(--u)); top: calc(42 * var(--u)); width: calc(394 * var(--u)); height: calc(394 * var(--u)); z-index: 2; }
#sheet-commander .cm2-body { display: flex; height: calc(100% - 22 * var(--u)); }
#sheet-commander .cm2-side { flex: none; width: calc(112 * var(--u)); padding: calc(9 * var(--u)) 0; background: #1b1f23; color: #c9cdd1; font: 400 calc(9 * var(--u)) / 1.2 var(--f-app); white-space: nowrap; }
#sheet-commander .cm2-team { display: flex; align-items: center; justify-content: space-between; margin-bottom: calc(5 * var(--u)); padding: 0 calc(10 * var(--u)) calc(8 * var(--u)); border-bottom: calc(0.7 * var(--u)) solid #30353b; color: #fff; font: 700 calc(10.6 * var(--u)) / 1 var(--f-app); }
#sheet-commander .cm2-edit { width: calc(17 * var(--u)); height: calc(17 * var(--u)); border-radius: 50%; display: grid; place-items: center; background: #fff; color: #1b1f23; }
#sheet-commander .cm2-edit .rc-ic { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
#sheet-commander .cm2-sec { padding: calc(7 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)); font-size: calc(8 * var(--u)); color: #9aa1a8; }
#sheet-commander .cm2-ch, #sheet-commander .cm2-dm { display: flex; align-items: center; gap: calc(5 * var(--u)); margin: 0 calc(5 * var(--u)); padding: calc(3.6 * var(--u)) calc(6 * var(--u)); border-radius: calc(4 * var(--u)); }
#sheet-commander .cm2-ch span { color: #8b939b; }
#sheet-commander .cm2-ch.is-on { background: #1d64c8; color: #fff; }
#sheet-commander .cm2-ch.is-on span { color: #d6e4f7; }
#sheet-commander .cm2-ch.is-unread { color: #fff; font-weight: 700; }
#sheet-commander .cm2-main { flex: 1; min-width: 0; display: flex; flex-direction: column; background: #fff; color: #1d1c1d; }
#sheet-commander .cm2-head { flex: none; height: calc(30 * var(--u)); display: flex; align-items: center; gap: calc(7 * var(--u)); padding: 0 calc(12 * var(--u)); border-bottom: calc(0.7 * var(--u)) solid #e3e5e8; }
#sheet-commander .cm2-head strong { font: 800 calc(10.6 * var(--u)) / 1 var(--f-app); }
#sheet-commander .cm2-head strong span { margin-right: calc(2 * var(--u)); font-weight: 400; color: #8b939b; }
#sheet-commander .cm2-mem { display: inline-flex; align-items: center; gap: calc(3 * var(--u)); height: calc(16 * var(--u)); padding: 0 calc(5 * var(--u)); border: calc(0.7 * var(--u)) solid #dadde0; border-radius: calc(4 * var(--u)); font: 400 calc(8 * var(--u)) / 1 var(--f-app); color: #555c63; }
#sheet-commander .cm2-mem .rc-ic { width: calc(9 * var(--u)); height: calc(9 * var(--u)); }
#sheet-commander .cm2-msgs { flex: 1; min-height: 0; overflow: hidden; display: flex; flex-direction: column; justify-content: flex-end; gap: calc(10 * var(--u)); padding: calc(8 * var(--u)) calc(12 * var(--u)) calc(4 * var(--u)); }
#sheet-commander .cm2-m { display: grid; grid-template-columns: calc(22 * var(--u)) minmax(0, 1fr); gap: calc(7 * var(--u)); align-items: start; }
#sheet-commander .cm2-mh { display: flex; align-items: baseline; gap: calc(5 * var(--u)); }
#sheet-commander .cm2-mh strong { font: 800 calc(9.4 * var(--u)) / 1.3 var(--f-app); color: #1d1c1d; }
#sheet-commander .cm2-mh time { font: 400 calc(7.4 * var(--u)) / 1 var(--f-app); color: #6f767c; font-variant-numeric: tabular-nums; }
#sheet-commander .cm2-mt { margin-top: calc(1 * var(--u)); font: 400 calc(9.4 * var(--u)) / 1.42 var(--f-app); color: #1d1c1d; }
#sheet-commander .cm2-typing { flex: none; display: flex; align-items: center; height: calc(16 * var(--u)); padding: 0 calc(12 * var(--u)); font: 400 calc(7.6 * var(--u)) / 1 var(--f-app); color: #6f767c; white-space: nowrap; }
#sheet-commander .cm2-typing strong { font-weight: 700; color: #3e454b; }
#sheet-commander .cm2-dots { display: inline-flex; gap: calc(2.2 * var(--u)); margin-right: calc(5 * var(--u)); }
#sheet-commander .cm2-dots span { width: calc(3.4 * var(--u)); height: calc(3.4 * var(--u)); border-radius: 50%; background: #8a9096; animation: cm2-dot 1.2s ease-in-out infinite; }
#sheet-commander .cm2-dots span:nth-child(2) { animation-delay: 0.15s; }
#sheet-commander .cm2-dots span:nth-child(3) { animation-delay: 0.3s; }
@keyframes cm2-dot { 0%, 60%, 100% { transform: none; opacity: 0.5; } 30% { transform: translateY(calc(-2 * var(--u))); opacity: 1; } }
#sheet-commander .cm2-comp { flex: none; margin: calc(2 * var(--u)) calc(10 * var(--u)) calc(10 * var(--u)); border: calc(0.8 * var(--u)) solid #c4c8cc; border-radius: calc(7 * var(--u)); background: #fff; }
#sheet-commander .cm2-in { padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(3 * var(--u)); font: 400 calc(9 * var(--u)) / 1.3 var(--f-app); color: #8a9096; }
#sheet-commander .cm2-tools { display: flex; align-items: center; gap: calc(8 * var(--u)); height: calc(20 * var(--u)); padding: 0 calc(8 * var(--u)); color: #6f767c; font: 400 calc(8.6 * var(--u)) / 1 var(--f-app); }
#sheet-commander .cm2-tools strong { font-weight: 800; }
#sheet-commander .cm2-tools em { font-family: Georgia, serif; }
#sheet-commander .cm2-tools .rc-ic { width: calc(10 * var(--u)); height: calc(10 * var(--u)); }
#sheet-commander .cm2-tools .cm2-send { margin-left: auto; }

/* ---- the mail banner, over both windows ---- */
#sheet-commander .cm2-note {
  position: absolute;
  z-index: 3;
  left: calc(318 * var(--u));
  top: calc(28 * var(--u));
  width: calc(230 * var(--u));
  padding: calc(8 * var(--u)) calc(10 * var(--u)) calc(9 * var(--u));
  border-radius: calc(11 * var(--u));
  background: rgb(246 247 248 / 0.95);
  color: #1d1c1d;
  box-shadow: 0 0 0 calc(0.7 * var(--u)) rgb(0 0 0 / 0.16), 0 calc(14 * var(--u)) calc(34 * var(--u)) rgb(0 0 0 / 0.5), 0 calc(3 * var(--u)) calc(8 * var(--u)) rgb(0 0 0 / 0.25);
  animation: cm2-note 9s ease-in-out infinite;
}
#sheet-commander .cm2-nh { display: flex; align-items: center; gap: calc(5 * var(--u)); margin-bottom: calc(5 * var(--u)); font: 600 calc(7.4 * var(--u)) / 1 var(--f-app); letter-spacing: 0.05em; color: #4a5157; }
#sheet-commander .cm2-nh time { margin-left: auto; font-weight: 400; letter-spacing: 0; color: #6f767c; }
#sheet-commander .cm2-nf { font: 700 calc(9 * var(--u)) / 1.3 var(--f-app); }
#sheet-commander .cm2-ns { font: 600 calc(8.6 * var(--u)) / 1.3 var(--f-app); }
#sheet-commander .cm2-nb { font: 400 calc(8.6 * var(--u)) / 1.35 var(--f-app); color: #3e454b; white-space: nowrap; }
/* the banner nudges as a new one would land on it (keyframes only; paused until the sheet is in focus) */
@keyframes cm2-note { 0%, 78%, 100% { transform: none; } 82% { transform: translateX(calc(-3 * var(--u))); } 86% { transform: none; } }

/* ---- the Commander's phone (select.css THE FACTION PHONE): it rests on the desk in front of the board ---- */
#sheet-commander .fp { left: calc(440 * var(--u)); top: calc(196 * var(--u)); width: calc(108 * var(--u)); rotate: 7deg; }

/* ---- on a phone: a taller stage, the chat across the top, the board under it ---- */
@media (max-width: 899px) {
  #sheet-commander .cm2 { --u: calc(100cqw / 400); aspect-ratio: 400 / 566; height: auto; }
  #sheet-commander .cm2-mx { display: none; }
  #sheet-commander .cm2-chat { left: calc(8 * var(--u)); top: calc(40 * var(--u)); width: calc(384 * var(--u)); height: calc(318 * var(--u)); }
  #sheet-commander .cm2-board { left: calc(56 * var(--u)); top: calc(332 * var(--u)); width: calc(336 * var(--u)); height: calc(226 * var(--u)); }
  #sheet-commander .cm2-cols { padding-top: calc(16 * var(--u)); }
  #sheet-commander .cm2-dc:nth-of-type(n + 3) { display: none; }
  #sheet-commander .cm2-note { left: calc(150 * var(--u)); top: calc(26 * var(--u)); width: calc(242 * var(--u)); }
  #sheet-commander .fp { left: calc(306 * var(--u)); top: calc(300 * var(--u)); width: calc(84 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #sheet-commander .cm2-dots span, #sheet-commander .cm2-note { animation: none !important; }
}