/* ════════════════════════════════════════════════════════════════════════
   THE LIVE ROOM, drawn in HTML  (/enterprise hero)

   The class room the way the room lays itself out: its top bar, the stage with the tutor's tile, the
   captions and the control rail. Adapted from the landing page's own room picture (templates/pages/index.html,
   .room) and drawn in HTML so it reflows with its column: container queries drop the rail labels and
   minimise the tutor's tile exactly where the real room does on a small screen. This one shows the
   whiteboard: a student's working, and the tutor's own mark on it (the room draws a tutor's ring in amber on
   the board and in teal on a document page; this is the board). A sample class, tagged as one.
   ════════════════════════════════════════════════════════════════════════ */
.er{container:er / inline-size;position:relative;display:flex;flex-direction:column;margin:0;overflow:hidden;background:var(--cls-leaf);border:1px solid var(--cls-line);border-radius:var(--cls-r);
  box-shadow:var(--cls-raise),var(--cls-lit);--er-pad:14px;--er-tile-w:116px;
  --er-blue:var(--cls-blue-deep);--er-live:var(--cls-green-ink);--er-amber-text:var(--cls-amber-ink);
  --er-tint-blue:color-mix(in srgb,var(--cls-blue) 10%,var(--cls-leaf));--er-tint-amber:color-mix(in srgb,var(--cls-amber) 12%,var(--cls-leaf));
  --er-cap-bg:color-mix(in srgb,var(--cls-ink) 92%,transparent);--er-cap-ink:var(--cls-leaf);--er-cap-edge:transparent}
@media (prefers-color-scheme:dark){:root:not([class~="cls-light"]) .er{
  --er-tint-blue:color-mix(in srgb,var(--cls-blue) 20%,var(--cls-leaf));--er-tint-amber:color-mix(in srgb,var(--cls-amber) 16%,var(--cls-leaf));
  --er-cap-bg:color-mix(in srgb,var(--cls-shadow-ink) 72%,var(--cls-leaf));--er-cap-ink:var(--cls-ink);--er-cap-edge:var(--cls-line-2)}}
:root[class~="dark"] .er{
  --er-tint-blue:color-mix(in srgb,var(--cls-blue) 20%,var(--cls-leaf));--er-tint-amber:color-mix(in srgb,var(--cls-amber) 16%,var(--cls-leaf));
  --er-cap-bg:color-mix(in srgb,var(--cls-shadow-ink) 72%,var(--cls-leaf));--er-cap-ink:var(--cls-ink);--er-cap-edge:var(--cls-line-2)}

.er__bar{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:11px 16px;border-bottom:1px solid var(--cls-line)}
.er__title{min-width:0}
/* the room's own status pill reads "In progress" (sentence case, blue), not "Live" */
.er__live{display:flex;align-items:center;gap:6px;font-size:11.5px;font-weight:600;color:var(--er-blue);line-height:1.3}
.er__live i{width:6px;height:6px;border-radius:50%;background:var(--er-blue)}
.er__name{margin-top:1px;font-size:16px;font-weight:700;letter-spacing:-.01em;color:var(--cls-ink);line-height:1.3;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.er__name span{font-weight:400;color:var(--cls-ink-3)}
.er__pills{display:flex;align-items:center;gap:6px;flex:none}
.er__pill{display:inline-flex;align-items:center;gap:6px;height:26px;padding:0 10px;border-radius:var(--cls-pill);font-size:12px;font-weight:600;white-space:nowrap;line-height:1}
.er__pill .pi{width:14px;height:14px}
.er__pill i{width:6px;height:6px;border-radius:50%;background:var(--cls-ink-4)}
.er__pill--time{background:var(--cls-tray);color:var(--cls-ink-2);font-variant-numeric:tabular-nums}
.er__pill--mode{background:var(--cls-tray);color:var(--cls-ink-2)}

.er__stage{position:relative;display:flex;flex-direction:column;align-items:center;background:var(--cls-leaf)}
/* the whiteboard: the student's two lines in their own pen, and the tutor's mark on the plus three */
.er__board{position:relative;align-self:stretch;aspect-ratio:780 / 326;color:var(--cls-ink)}
.er__board > svg{position:absolute;inset:0;width:100%;height:100%;display:block;overflow:visible}
.er__ink path{fill:none;stroke:currentColor;stroke-width:3.4;stroke-linecap:round;stroke-linejoin:round}
.er__ring{fill:color-mix(in srgb,var(--cls-amber) 14%,transparent);stroke:var(--cls-amber);stroke-width:2.2;stroke-dasharray:7 6}
.er__label{position:absolute;left:78.3%;top:79.5%;transform:translateX(-50%);padding:3px 10px;border-radius:var(--cls-r-sm);border:1px solid var(--cls-amber);
  background:var(--cls-leaf);color:var(--er-amber-text);font-size:12px;font-weight:600;line-height:1.35;white-space:nowrap}
/* the board's own chip for what the tutor has drawn */
.er__ai{position:absolute;left:var(--er-pad);top:var(--er-pad);display:inline-flex;align-items:center;gap:7px;min-height:26px;padding:0 11px;border-radius:var(--cls-pill);
  border:1px solid color-mix(in srgb,var(--cls-teal) 30%,transparent);background:color-mix(in srgb,var(--cls-teal) 10%,var(--cls-leaf));color:var(--cls-teal-ink);font-size:11.5px;font-weight:600;line-height:1}
.er__ai .pi{width:13px;height:13px}
.er__ai b{font-weight:600}
.er__ai i{align-self:stretch;width:1px;background:color-mix(in srgb,var(--cls-teal) 30%,transparent)}

.er__tile{position:absolute;z-index:3;top:var(--er-pad);right:var(--er-pad);width:var(--er-tile-w);display:flex;flex-direction:column;align-items:center;gap:6px;padding:8px 10px 10px;border-radius:var(--cls-r);
  background:color-mix(in srgb,var(--cls-leaf) 96%,transparent);border:1px solid var(--cls-line);box-shadow:var(--cls-raise)}
.er__tile::after{content:"";position:absolute;inset:-1px;border-radius:inherit;pointer-events:none;box-shadow:0 0 0 2px var(--cls-blue);animation:er-ring 2.2s ease-in-out infinite}
.er__tname{align-self:stretch;display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:10.5px;font-weight:700;letter-spacing:.08em;text-transform:uppercase;color:var(--cls-ink-3);line-height:1.3}
.er__av{display:block;width:52px;height:52px;border-radius:50%;overflow:hidden;background:var(--cls-blue)}
.er__av img{display:block;width:100%;height:100%}
.er__wave{display:flex;align-items:flex-end;gap:3px;height:12px}
.er__wave i{width:3px;height:100%;border-radius:2px;background:var(--cls-blue);transform-origin:50% 100%;animation:er-wave 1.1s ease-in-out infinite}
.er__wave i:nth-child(2){animation-delay:.12s}.er__wave i:nth-child(3){animation-delay:.24s}.er__wave i:nth-child(4){animation-delay:.36s}
.er__state{font-size:11px;color:var(--cls-ink-3);line-height:1.2}
@keyframes er-wave{0%,100%{transform:scaleY(.35)}50%{transform:scaleY(1)}}
@keyframes er-ring{0%,100%{opacity:.4}50%{opacity:1}}

/* live captions sit on the stage's lower edge, like the room's own caption bubble */
.er__cap{position:relative;z-index:3;display:flex;align-items:flex-start;gap:8px;width:min(calc(100% - 2 * var(--er-pad)),460px);margin:-14px 0 var(--er-pad);padding:8px 12px;
  border-radius:var(--cls-r-sm);border:1px solid var(--er-cap-edge);background:var(--er-cap-bg);color:var(--er-cap-ink);font-size:13px;line-height:1.45}
.er__who{flex:none;margin-top:1px;padding:1px 8px;border-radius:var(--cls-pill);background:color-mix(in srgb,var(--er-cap-ink) 16%,transparent);font-size:11.5px;font-weight:600;line-height:1.5}
.er__said{min-width:0}

.er__rail{display:flex;align-items:center;justify-content:center;gap:4px;padding:8px 12px;border-top:1px solid var(--cls-line)}
/* the real rail's keys are icon-only; only Parking and Leave carry a word */
.er__btn{display:flex;align-items:center;justify-content:center;gap:6px;min-width:44px;height:44px;padding:0;border-radius:var(--cls-r-sm);color:var(--cls-ink-3)}
.er__btn--word{min-width:0;height:40px;padding:0 12px;font-size:12px;font-weight:600}
.er__btn b{font-size:12px;font-weight:600;line-height:1}
.er__btn.is-on{background:var(--er-tint-blue);color:var(--er-blue)}
.er__leave{display:flex;align-items:center;gap:6px;height:40px;margin-left:8px;padding:0 14px;border-radius:var(--cls-r-sm);background:var(--cls-red);color:var(--cls-on-lead);font-size:13px;font-weight:700}
.er__leave b{font-weight:700}

/* the board writes itself once, then the tutor's mark appears; only when the visitor allows motion */
html.js-motion .er__ink path{stroke-dasharray:1;stroke-dashoffset:0;animation:er-write 700ms var(--mk-ease,ease) backwards;animation-delay:var(--d,0ms)}
html.js-motion .er__ring{animation:er-fade 500ms var(--mk-ease,ease) 2100ms backwards}
html.js-motion .er__label{animation:er-fade 400ms var(--mk-ease,ease) 2500ms backwards}
html.js-motion .er__ai{animation:er-fade 400ms var(--mk-ease,ease) 2600ms backwards}
@keyframes er-write{from{stroke-dashoffset:1}to{stroke-dashoffset:0}}
@keyframes er-fade{from{opacity:0}to{opacity:1}}
@media (prefers-reduced-motion:reduce){.er__wave i{animation:none!important;transform:scaleY(.7)}.er__tile::after{animation:none!important;opacity:.6}}

/* the words on the rail (Parking, Leave) need about 560px; below that the rail is icons only */
@container er (max-width:579px){
  .er__btn--word b,.er__leave b{display:none}
  .er__btn--word{padding:0 10px}
  .er__leave{padding:0 12px}
}
/* below its small breakpoint the room's rail keeps icons and drops the words */
@container er (max-width:519px){
  .er__btn{min-width:40px;height:40px}
  .er__btn b,.er__leave b{display:none}
  .er__leave{padding:0 12px}
  .er__pill--mode{display:none}
}
/* narrow: the tutor's tile minimises to its pill, as it does in the real room on a small screen. It is a floating tile only while the
   board is wide enough for the working to clear it (the working is drawn to the board's width, the tile is not). */
@container er (max-width:619px){
  .er__tile{flex-direction:row;width:auto;gap:8px;padding:4px 12px 4px 4px;border-radius:var(--cls-pill)}
  .er__av{width:28px;height:28px}
  .er__tname{order:1}
  .er__state{display:none}
  .er__wave{order:2;height:10px}
  /* the pill has its own strip above the working, so it never sits on it */
  .er__board{margin-top:calc(var(--er-pad) + 30px)}
  .er__cap{margin-top:10px}
}
@container er (max-width:459px){
  .er{--er-pad:10px}
  .er__bar{padding:10px 12px}
  .er__cap{font-size:12.5px}
  .er__ai{display:none}
}
@container er (max-width:399px){
  .er__btn--opt{display:none}
  .er__pill--time{display:none}
}