/* Hypha · Invitation · the Rainmaker's card (index.html #sheet-rainmaker): the real parts of the Rainmaker's bridge page,
   scaled into the sheet. The laptop open on the opportunity in Pipewell with its stage path (bridge css/tool-crm.css,
   css/table.css) and the phone's lock screen at today's date and time (bridge css/tool-phone.css; js/card-rc.js), on
   the lamp-lit table. Three units, so every part scales as one picture:
     --u  one design pixel of the stage (560 wide; 400 wide on a phone), on .rm2
     --c  one design pixel of the laptop's screen (338 wide), inside .rm2-screen
     --p  one design pixel of the phone's screen (158 wide), inside .rm2-scr
   Every rule is scoped to the sheet's id, so the miniature's older rules in css/select.css never reach it. */

#sheet-rainmaker .rm2 {
  container-type: inline-size;
  --u: calc(100cqw / 560);
  font-family: var(--f-app);
  /* un-boxed 10-27: no plate, no ring; the room's back wall is gone and the table fades out at its ends */
}
#sheet-rainmaker .rm2-room { display: none; }
#sheet-rainmaker .rm2-desk { -webkit-mask-image: radial-gradient(70% 120% at 50% 0%, #000 45%, transparent 100%); mask-image: radial-gradient(70% 120% at 50% 0%, #000 45%, transparent 100%); }
#sheet-rainmaker .rm2 * { box-sizing: border-box; }
#sheet-rainmaker .rm2 svg { display: block; }
#sheet-rainmaker .rc-ic { fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; flex: none; }

/* ---- the room: the lamp's warm pool from above, the table under it ---- */
#sheet-rainmaker .rm2-room {
  position: absolute;
  inset: 0;
  background:
    radial-gradient(52% 62% at 30% -6%, rgb(255 214 150 / 0.30), transparent 72%),
    radial-gradient(40% 40% at 86% 70%, rgb(90 150 200 / 0.10), transparent 70%),
    linear-gradient(#120d08, #060403 70%);
}
#sheet-rainmaker .rm2-desk {
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: calc(196 * var(--u));
  background:
    radial-gradient(60% 80% at 34% 0%, rgb(255 210 140 / 0.26), transparent 70%),
    linear-gradient(rgb(8 5 3 / 0.8), rgb(8 5 3 / 0.3) 34%, rgb(8 5 3 / 0.66)),
    linear-gradient(rgb(96 58 24 / 0.5), rgb(96 58 24 / 0.5)),
    url("../assets/rc/table-grain.jpg") center / cover,
    #2a1c10;
  box-shadow: inset 0 calc(1 * var(--u)) 0 rgb(255 214 150 / 0.22);
}

/* ---- the laptop: aluminium lid, a lit screen, the deck on the table (bridge .tb-laptop) ---- */
#sheet-rainmaker .rm2-laptop {
  position: absolute;
  left: calc(16 * var(--u));
  top: calc(28 * var(--u));
  width: calc(356 * var(--u));
  height: calc(266 * var(--u));
}
#sheet-rainmaker .rm2-lid {
  position: absolute;
  left: 0; top: 0;
  width: 100%;
  height: calc(253 * var(--u));
  padding: calc(8 * var(--u)) calc(9 * var(--u)) calc(13 * var(--u));
  border-radius: calc(13 * var(--u)) calc(13 * var(--u)) calc(3 * var(--u)) calc(3 * var(--u));
  background: linear-gradient(#26292d, #121416);
  box-shadow:
    inset 0 0 0 calc(1 * var(--u)) #3d4248,
    inset 0 calc(1.5 * var(--u)) 0 rgb(255 255 255 / 0.12),
    0 calc(34 * var(--u)) calc(60 * var(--u)) rgb(0 0 0 / 0.62),
    0 0 calc(70 * var(--u)) rgb(160 190 220 / 0.10);
}
#sheet-rainmaker .rm2-screen {
  container-type: inline-size;
  --c: calc(100cqw / 356);
  position: relative;
  height: 100%;
  border-radius: calc(4 * var(--u));
  overflow: hidden;
  background: #f6f7f8;
}
#sheet-rainmaker .rm2-glare {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(112deg, rgb(255 255 255 / 0.16) 0 24%, rgb(255 255 255 / 0) 24.4%),
    linear-gradient(rgb(255 236 200 / 0.06), transparent 40%);
}
#sheet-rainmaker .rm2-deck {
  position: absolute;
  left: calc(-18 * var(--u));
  right: calc(-18 * var(--u));
  top: calc(253 * var(--u));
  height: calc(13 * var(--u));
  border-radius: calc(2 * var(--u)) calc(2 * var(--u)) calc(12 * var(--u)) calc(12 * var(--u));
  background: linear-gradient(#d4d8dc, #9a9fa5 38%, #55595e 80%, #2b2d30);
  box-shadow: 0 calc(16 * var(--u)) calc(26 * var(--u)) rgb(0 0 0 / 0.7), 0 calc(3 * var(--u)) calc(4 * var(--u)) rgb(0 0 0 / 0.5);
}
#sheet-rainmaker .rm2-deck::before {
  content: "";
  position: absolute;
  left: 50%; top: 0;
  width: calc(64 * var(--u));
  height: calc(5 * var(--u));
  margin-left: calc(-32 * var(--u));
  border-radius: 0 0 calc(5 * var(--u)) calc(5 * var(--u));
  background: linear-gradient(#7b8086, #a9aeb4);
}

/* ---- Pipewell's opportunity record (bridge css/tool-crm.css): header, stage path, fields, activity ---- */
#sheet-rainmaker .rm2-crm {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  gap: calc(6 * var(--c));
  padding: calc(7 * var(--c));
  background: #f6f7f8;
  color: #181d26;
}
#sheet-rainmaker .rm2-h {
  flex: none;
  display: flex;
  align-items: center;
  gap: calc(8 * var(--c));
  padding: calc(7 * var(--c)) calc(9 * var(--c));
  border-radius: calc(6 * var(--c));
  background: #fff;
  box-shadow: 0 0 0 calc(1 * var(--c)) #e6e8eb;
}
#sheet-rainmaker .rm2-hic { flex: none; width: calc(25 * var(--c)); height: calc(25 * var(--c)); border-radius: calc(6 * var(--c)); display: grid; place-items: center; background: #eef2f8; }
#sheet-rainmaker .rm2-hic svg { width: calc(15 * var(--c)); height: calc(15 * var(--c)); }
#sheet-rainmaker .rm2-ht { display: flex; flex-direction: column; min-width: 0; }
#sheet-rainmaker .rm2-obj { font: 600 calc(7.4 * var(--c)) / 1.3 var(--f-app); letter-spacing: 0.05em; text-transform: uppercase; color: #8a929c; }
#sheet-rainmaker .rm2-ht strong { font: 600 calc(12.5 * var(--c)) / 1.25 var(--f-app); letter-spacing: -0.01em; color: #181d26; white-space: nowrap; }
#sheet-rainmaker .rm2-hb { margin-left: auto; display: flex; gap: calc(4 * var(--c)); }
#sheet-rainmaker .rm2-ib { width: calc(20 * var(--c)); height: calc(20 * var(--c)); border-radius: calc(5 * var(--c)); display: grid; place-items: center; color: #59636e; box-shadow: inset 0 0 0 calc(1 * var(--c)) #e1e4e8; }
#sheet-rainmaker .rm2-ib .rc-ic { width: calc(10 * var(--c)); height: calc(10 * var(--c)); }

/* the stage path: the done step green with its check, the current one navy, the rest pale */
#sheet-rainmaker .rm2-path {
  --cut: calc(7 * var(--c));
  flex: none;
  list-style: none;
  margin: 0;
  padding: calc(5 * var(--c));
  display: flex;
  gap: calc(2 * var(--c));
  border-radius: calc(6 * var(--c));
  background: #fff;
  box-shadow: 0 0 0 calc(1 * var(--c)) #e6e8eb;
}
#sheet-rainmaker .rm2-path li {
  flex: 1 1 auto;
  min-width: 0;
  height: calc(21 * var(--c));
  display: flex;
  align-items: center;
  justify-content: center;
  gap: calc(3 * var(--c));
  padding: 0 calc(4 * var(--c)) 0 calc(10 * var(--c));
  background: #eef0f2;
  color: #3e3e3c;
  font: 500 calc(8.2 * var(--c)) / 1.35 var(--f-app);
  clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%, var(--cut) 50%);
}
#sheet-rainmaker .rm2-path li:first-child { padding-left: calc(6 * var(--c)); border-radius: calc(5 * var(--c)) 0 0 calc(5 * var(--c)); clip-path: polygon(0 0, calc(100% - var(--cut)) 0, 100% 50%, calc(100% - var(--cut)) 100%, 0 100%); }
#sheet-rainmaker .rm2-path li:last-child { border-radius: 0 calc(5 * var(--c)) calc(5 * var(--c)) 0; clip-path: polygon(0 0, 100% 0, 100% 100%, 0 100%, var(--cut) 50%); }
#sheet-rainmaker .rm2-path li span { white-space: nowrap; overflow: hidden; line-height: 1.35; padding: calc(1 * var(--c)) 0; }
#sheet-rainmaker .rm2-path li .rc-ic { width: calc(9 * var(--c)); height: calc(9 * var(--c)); stroke-width: 2.6; }
#sheet-rainmaker .rm2-path li.is-done { background: #3ba654; color: #fff; }
#sheet-rainmaker .rm2-path li.is-cur { background: #0b3b74; color: #fff; font-weight: 600; flex-grow: 1.3; }

#sheet-rainmaker .rm2-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.18fr); gap: calc(6 * var(--c)); }
#sheet-rainmaker .rm2-card { border-radius: calc(6 * var(--c)); background: #fff; box-shadow: 0 0 0 calc(1 * var(--c)) #e6e8eb; padding: calc(8 * var(--c)); overflow: hidden; }
#sheet-rainmaker .rm2-f { position: relative; padding: calc(4 * var(--c)) calc(4 * var(--c)) calc(5 * var(--c)) calc(19 * var(--c)); }
#sheet-rainmaker .rm2-f + .rm2-f { box-shadow: 0 calc(-1 * var(--c)) 0 #eef0f2; }
#sheet-rainmaker .rm2-f .rc-ic { position: absolute; left: calc(3 * var(--c)); top: calc(6 * var(--c)); width: calc(10 * var(--c)); height: calc(10 * var(--c)); color: #8a929c; }
#sheet-rainmaker .rm2-f span { display: block; font: 400 calc(7.8 * var(--c)) / 1.3 var(--f-app); color: #5d6670; }
#sheet-rainmaker .rm2-f strong { display: block; font: 500 calc(9.4 * var(--c)) / 1.45 var(--f-app); color: #181d26; white-space: nowrap; }

#sheet-rainmaker .rm2-fh { display: flex; gap: calc(9 * var(--c)); margin: 0 0 calc(9 * var(--c)); padding-bottom: calc(6 * var(--c)); border-bottom: calc(1 * var(--c)) solid #eceef0; font: 500 calc(8 * var(--c)) / 1.3 var(--f-app); color: #5d6670; }
#sheet-rainmaker .rm2-fh span { position: relative; white-space: nowrap; }
#sheet-rainmaker .rm2-fh em { font-style: normal; color: #9aa1a9; }
#sheet-rainmaker .rm2-fh .is-on { color: #181d26; }
#sheet-rainmaker .rm2-fh .is-on::after { content: ""; position: absolute; left: 0; right: 0; bottom: calc(-7 * var(--c)); height: calc(1.6 * var(--c)); border-radius: 1px; background: #0b3b74; }
#sheet-rainmaker .rm2-feed ul { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: calc(9 * var(--c)); position: relative; }
#sheet-rainmaker .rm2-feed ul::before { content: ""; position: absolute; left: calc(8 * var(--c)); top: calc(9 * var(--c)); bottom: calc(9 * var(--c)); width: calc(1 * var(--c)); background: #e6e8eb; }
#sheet-rainmaker .rm2-feed li { position: relative; display: grid; grid-template-columns: calc(17 * var(--c)) minmax(0, 1fr); gap: calc(7 * var(--c)); align-items: start; }
#sheet-rainmaker .rm2-ai { width: calc(17 * var(--c)); height: calc(17 * var(--c)); border-radius: 50%; display: grid; place-items: center; box-shadow: 0 0 0 calc(2 * var(--c)) #fff; }
#sheet-rainmaker .rm2-ai .rc-ic { width: calc(9 * var(--c)); height: calc(9 * var(--c)); }
#sheet-rainmaker .rm2-ai--doc { background: #fdf0e1; color: #c26a12; }
#sheet-rainmaker .rm2-ai--call { background: #e3f6f3; color: #0f8a78; }
#sheet-rainmaker .rm2-ai--task { background: #e6f4ea; color: #2f8f4e; }
#sheet-rainmaker .rm2-at { min-width: 0; }
#sheet-rainmaker .rm2-at strong { display: block; font: 500 calc(8.8 * var(--c)) / 1.3 var(--f-app); color: #181d26; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet-rainmaker .rm2-at span { display: block; margin-top: calc(1 * var(--c)); font: 400 calc(7.4 * var(--c)) / 1.3 var(--f-app); color: #8a929c; white-space: nowrap; }

/* ---- the phone: black glass round a lit lock screen (bridge .tb-phone, .ph-lock) ---- */
#sheet-rainmaker .rm2-phone {
  position: absolute;
  left: calc(368 * var(--u));
  top: calc(34 * var(--u));
  width: calc(178 * var(--u));
  aspect-ratio: 9 / 19.5;
  padding: calc(6.5 * var(--u));
  border-radius: calc(28 * var(--u));
  background: #050607;
  box-shadow:
    0 0 0 calc(1.6 * var(--u)) #3b4148,
    0 0 0 calc(2.8 * var(--u)) #0a0b0c,
    calc(-6 * var(--u)) calc(30 * var(--u)) calc(46 * var(--u)) rgb(0 0 0 / 0.66),
    0 calc(8 * var(--u)) calc(14 * var(--u)) rgb(0 0 0 / 0.5),
    0 0 calc(60 * var(--u)) rgb(90 150 200 / 0.22);
}
#sheet-rainmaker .rm2-sheen {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background: linear-gradient(128deg, rgb(255 255 255 / 0.16), rgb(255 255 255 / 0) 22%, rgb(255 255 255 / 0) 72%, rgb(255 255 255 / 0.05));
}
#sheet-rainmaker .rm2-scr {
  container-type: inline-size;
  --p: calc(100cqw / 158);
  position: relative;
  height: 100%;
  border-radius: calc(22 * var(--u));
  overflow: hidden;
  color: #fff;
  background: radial-gradient(120% 70% at 30% 20%, #2b4a5e, #13222f 55%, #0a1118);
}
#sheet-rainmaker .rm2-st {
  position: absolute;
  left: 0; right: 0; top: 0;
  height: calc(16 * var(--p));
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: calc(3 * var(--p)) calc(12 * var(--p)) 0 calc(15 * var(--p));
  font: 600 calc(7 * var(--p)) / 1 var(--f-app);
}
#sheet-rainmaker .rm2-island { position: absolute; left: 50%; top: calc(5 * var(--p)); width: calc(44 * var(--p)); height: calc(12 * var(--p)); margin-left: calc(-22 * var(--p)); border-radius: calc(8 * var(--p)); background: #000; }
#sheet-rainmaker .rm2-str { display: flex; align-items: center; gap: calc(2.6 * var(--p)); }
#sheet-rainmaker .rm2-sig { display: flex; align-items: flex-end; gap: calc(0.9 * var(--p)); height: calc(6 * var(--p)); }
#sheet-rainmaker .rm2-sig span { width: calc(1.6 * var(--p)); border-radius: calc(0.5 * var(--p)); background: #fff; }
#sheet-rainmaker .rm2-sig span:nth-child(1) { height: 35%; }
#sheet-rainmaker .rm2-sig span:nth-child(2) { height: 55%; }
#sheet-rainmaker .rm2-sig span:nth-child(3) { height: 78%; }
#sheet-rainmaker .rm2-sig span:nth-child(4) { height: 100%; }
#sheet-rainmaker .rm2-wifi { width: calc(8.4 * var(--p)); height: calc(6.3 * var(--p)); }
#sheet-rainmaker .rm2-bat { position: relative; width: calc(12.5 * var(--p)); height: calc(6.2 * var(--p)); border-radius: calc(1.8 * var(--p)); box-shadow: inset 0 0 0 calc(0.7 * var(--p)) rgb(255 255 255 / 0.55); }
#sheet-rainmaker .rm2-bat::before { content: ""; position: absolute; left: calc(1.3 * var(--p)); top: calc(1.3 * var(--p)); bottom: calc(1.3 * var(--p)); width: 64%; border-radius: calc(0.8 * var(--p)); background: #fff; }
#sheet-rainmaker .rm2-date { position: absolute; left: 0; right: 0; top: calc(27 * var(--p)); margin: 0; text-align: center; font: 500 calc(8.8 * var(--p)) / 1.2 var(--f-app); color: rgb(255 255 255 / 0.86); }
#sheet-rainmaker .rm2-time { position: absolute; left: 0; right: 0; top: calc(39 * var(--p)); margin: 0; text-align: center; font: 600 calc(40 * var(--p)) / 1 var(--f-app); letter-spacing: -0.02em; font-variant-numeric: tabular-nums; text-shadow: 0 calc(2 * var(--p)) calc(16 * var(--p)) rgb(0 0 0 / 0.25); }
#sheet-rainmaker .rm2-notes { position: absolute; left: calc(6 * var(--p)); right: calc(6 * var(--p)); top: calc(100 * var(--p)); display: flex; flex-direction: column; gap: calc(4 * var(--p)); }
#sheet-rainmaker .rm2-n {
  display: grid;
  grid-template-columns: calc(17 * var(--p)) minmax(0, 1fr);
  gap: calc(6 * var(--p));
  align-items: center;
  padding: calc(6.5 * var(--p)) calc(7 * var(--p));
  border-radius: calc(10 * var(--p));
  background: rgb(232 240 246 / 0.24);
  box-shadow: inset 0 0 0 calc(0.5 * var(--p)) rgb(255 255 255 / 0.1), 0 calc(3 * var(--p)) calc(10 * var(--p)) rgb(0 0 0 / 0.16);
  transform-origin: 50% 0;
}
#sheet-rainmaker .rm2-app { position: relative; width: calc(17 * var(--p)); height: calc(17 * var(--p)); border-radius: calc(4.4 * var(--p)); display: grid; place-items: center; }
#sheet-rainmaker .rm2-app svg { width: 100%; height: 100%; border-radius: 22%; }
#sheet-rainmaker .rm2-av { border-radius: 50%; background: linear-gradient(#a3a8b0, #7d828a); font: 600 calc(7.6 * var(--p)) / 1 var(--f-app); color: #fff; }
#sheet-rainmaker .rm2-badge { position: absolute; right: calc(-1.6 * var(--p)); bottom: calc(-1.6 * var(--p)); width: calc(8 * var(--p)); height: calc(8 * var(--p)); border-radius: 50%; display: grid; place-items: center; background: #34c759; box-shadow: 0 0 0 calc(0.9 * var(--p)) #1d2a35; color: #fff; }
#sheet-rainmaker .rm2-badge .rc-ic { width: calc(4.6 * var(--p)); height: calc(4.6 * var(--p)); fill: currentColor; stroke-width: 2.2; border-radius: 0; }
#sheet-rainmaker .rm2-nt { min-width: 0; display: flex; flex-direction: column; }
#sheet-rainmaker .rm2-nh { display: flex; gap: calc(3 * var(--p)); align-items: baseline; }
#sheet-rainmaker .rm2-nh strong { font: 600 calc(7.8 * var(--p)) / 1.25 var(--f-app); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
#sheet-rainmaker .rm2-nh time { margin-left: auto; flex: none; font: 400 calc(6.4 * var(--p)) / 1.2 var(--f-app); color: rgb(255 255 255 / 0.62); }
#sheet-rainmaker .rm2-nb { margin-top: calc(1 * var(--p)); font: 400 calc(7.8 * var(--p)) / 1.3 var(--f-app); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
/* the lock screen's two buttons, torch and camera, either side of the home bar */
#sheet-rainmaker .rm2-qb { position: absolute; bottom: calc(16 * var(--p)); width: calc(27 * var(--p)); height: calc(27 * var(--p)); border-radius: 50%; display: grid; place-items: center; background: rgb(10 16 24 / 0.42); box-shadow: inset 0 0 0 calc(0.5 * var(--p)) rgb(255 255 255 / 0.12); color: #fff; }
#sheet-rainmaker .rm2-qb--l { left: calc(15 * var(--p)); }
#sheet-rainmaker .rm2-qb--r { right: calc(15 * var(--p)); }
#sheet-rainmaker .rm2-qb .rc-ic { width: calc(12 * var(--p)); height: calc(12 * var(--p)); stroke-width: 1.7; }
#sheet-rainmaker .rm2-home { position: absolute; left: 50%; bottom: calc(5 * var(--p)); width: calc(54 * var(--p)); height: calc(2.6 * var(--p)); margin-left: calc(-27 * var(--p)); border-radius: 9px; background: rgb(255 255 255 / 0.85); }

/* the screen's light on the table under the phone */
#sheet-rainmaker .rm2-spill {
  position: absolute;
  left: calc(330 * var(--u));
  top: calc(392 * var(--u));
  width: calc(250 * var(--u));
  height: calc(64 * var(--u));
  pointer-events: none;
  background: radial-gradient(closest-side, rgb(120 175 220 / 0.26), rgb(120 175 220 / 0));
  mix-blend-mode: screen;
}

/* the one thing that moves: the call rings (keyframes only; paused until the sheet is in focus, css/select.css .mini) */
#sheet-rainmaker .rm2-n--call { animation: rm2-ring 4.8s ease-in-out infinite; }
#sheet-rainmaker .rm2-badge { animation: rm2-pulse 1.6s ease-out infinite; }
@keyframes rm2-ring {
  0%, 70%, 100% { transform: none; }
  76% { transform: translateY(calc(-1.5 * var(--p))) scale(1.025); }
  82% { transform: none; }
  88% { transform: translateY(calc(-1 * var(--p))) scale(1.015); }
}
@keyframes rm2-pulse {
  0% { box-shadow: 0 0 0 calc(0.9 * var(--p)) #1d2a35, 0 0 0 calc(0.9 * var(--p)) rgb(52 199 89 / 0.6); }
  100% { box-shadow: 0 0 0 calc(0.9 * var(--p)) #1d2a35, 0 0 0 calc(7 * var(--p)) rgb(52 199 89 / 0); }
}

/* ---- on a phone: a taller stage, the laptop across the top, the phone standing in front of its corner ---- */
@media (max-width: 899px) {
  #sheet-rainmaker .rm2 { --u: calc(100cqw / 400); aspect-ratio: 400 / 536; height: auto; }
  #sheet-rainmaker .rm2-desk { height: calc(270 * var(--u)); }
  #sheet-rainmaker .rm2-laptop { left: calc(14 * var(--u)); top: calc(20 * var(--u)); width: calc(372 * var(--u)); height: calc(280 * var(--u)); }
  #sheet-rainmaker .rm2-lid { height: calc(266 * var(--u)); }
  #sheet-rainmaker .rm2-deck { top: calc(266 * var(--u)); }
  #sheet-rainmaker .rm2-phone { left: calc(204 * var(--u)); top: calc(166 * var(--u)); width: calc(162 * var(--u)); }
  #sheet-rainmaker .rm2-spill { left: calc(150 * var(--u)); top: calc(500 * var(--u)); width: calc(260 * var(--u)); height: calc(50 * var(--u)); }
}

@media (prefers-reduced-motion: reduce) {
  #sheet-rainmaker .rm2-n--call, #sheet-rainmaker .rm2-badge { animation: none !important; }
}