/* =====================================================================
   The meeting room.

   Loaded by the portal and by the public guest page, so it depends on
   tokens.css and nothing else — no portal classes, no site classes.

   Sizing is viewport-relative throughout. A meeting is opened on a
   laptop, on a phone held sideways, and on a projector, and the one
   thing none of them should ever do is scroll.
   ===================================================================== */

.p-room {
  position: fixed;
  inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  background: #0b0f14;
  color: #e8edf3;
  overflow: hidden;
  overscroll-behavior: none;
}

/* --- Top line --------------------------------------------------------- */

.p-room__top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s3, 12px);
  padding: clamp(8px, 2vmin, 16px) clamp(12px, 3vw, 24px);
  min-height: 0;
}

.p-room__title {
  font-weight: 600;
  font-size: clamp(14px, 2.2vmin, 18px);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-room__status {
  font-size: clamp(12px, 1.8vmin, 14px);
  color: #9fb0c3;
  white-space: nowrap;
}

.p-room__status.is-bad { color: #ffb4a8; }

/* --- The stage -------------------------------------------------------- */

.p-room__stage {
  display: grid;
  grid-auto-rows: 1fr;
  gap: clamp(4px, 1vmin, 12px);
  padding: 0 clamp(8px, 2vw, 20px);
  min-height: 0;          /* without this the grid refuses to shrink */
  align-content: center;
}

.p-room__tile {
  position: relative;
  display: grid;
  place-items: center;
  min-height: 0;
  min-width: 0;
  aspect-ratio: 16 / 9;
  width: 100%;
  margin: 0 auto;
  border-radius: clamp(6px, 1.2vmin, 14px);
  background: #16202b;
  overflow: hidden;
  outline: 3px solid transparent;
  outline-offset: -1px;
  transition: outline-color .12s ease, box-shadow .12s ease;
}

/* Who is talking. A ring and a soft glow, not a colour change — a tile
   that changes colour reads as a fault; a ring reads as attention. The
   glow makes the current speaker obvious at a glance in a full grid. */
.p-room__tile.is-speaking {
  outline-color: #4ea1ff;
  box-shadow: 0 0 0 2px rgba(78, 161, 255, .35), 0 0 16px 2px rgba(78, 161, 255, .45);
}

.p-room__video {
  position: absolute;
  inset: 0;
  display: grid;
}

.p-room__video video {
  width: 100%;
  height: 100%;
  object-fit: cover;
  background: #0b0f14;
}

.p-room__avatar {
  position: relative;
  display: grid;
  place-items: center;
  width: clamp(44px, 12vmin, 96px);
  aspect-ratio: 1;
  border-radius: 50%;
  background: #24374a;
  color: #cfe0f2;
  font-weight: 600;
  font-size: clamp(15px, 4vmin, 30px);
  letter-spacing: .02em;
}

/* Once a camera is on, the initials would sit on top of the face. */
.p-room__tile.has-video .p-room__avatar { display: none; }

.p-room__caption {
  position: absolute;
  left: clamp(6px, 1.4vmin, 12px);
  bottom: clamp(6px, 1.4vmin, 12px);
  display: flex;
  align-items: center;
  gap: 6px;
  max-width: calc(100% - 24px);
  padding: 3px 9px;
  border-radius: 999px;
  background: rgba(6, 10, 15, .62);
  font-size: clamp(11px, 1.6vmin, 13px);
}

.p-room__name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-room__muted { display: inline-flex; color: #ffb4a8; }
.p-room__muted[hidden] { display: none; }

/* --- Somebody is sharing ---------------------------------------------
   The share takes the room and everybody else drops to a strip along the
   bottom. Sharing exists to be looked at; an equal grid defeats it. */

.p-room.is-sharing .p-room__stage {
  grid-template-columns: 1fr !important;
  grid-template-rows: 1fr clamp(64px, 14vmin, 128px);
  align-content: stretch;
}

.p-room.is-sharing .p-room__tile {
  aspect-ratio: auto;
  height: 100%;
}

.p-room.is-sharing .p-room__tile.is-screen {
  grid-column: 1;
  grid-row: 1;
}

/* A shared screen is a document, not a face: never crop it. */
.p-room__tile.is-screen .p-room__video video {
  object-fit: contain;
  background: #05080b;
}

.p-room.is-sharing .p-room__tile:not(.is-screen) {
  grid-row: 2;
  aspect-ratio: 16 / 9;
  width: auto;
}

/* --- 1:1 call: full-screen other party, you in a corner tile ----------
   A phone-call layout rather than two equal squares. The remote tile is
   stretched over the whole stage; the local tile (.is-me) becomes a small
   picture-in-picture tile floating in the bottom-right corner above it. */

.p-room__stage.is-focus {
  display: block;
  position: relative;
  padding: 0;
}

.p-room__stage.is-focus .p-room__tile {
  position: absolute;
  margin: 0;
  aspect-ratio: auto;
}

/* The other party: full bleed. */
.p-room__stage.is-focus .p-room__tile:not(.is-me) {
  inset: 0;
  width: 100%;
  height: 100%;
  border-radius: 0;
  z-index: 1;
}

/* You: a small tile in the corner, above the remote video. */
.p-room__stage.is-focus .p-room__tile.is-me {
  inset: auto clamp(10px, 3vw, 22px) clamp(10px, 3vw, 22px) auto;
  width: clamp(104px, 24vw, 184px);
  height: auto;
  aspect-ratio: 16 / 9;
  border-radius: clamp(10px, 2vmin, 16px);
  box-shadow: 0 6px 22px rgba(0, 0, 0, .45);
  outline: 1px solid rgba(255, 255, 255, .18);
  outline-offset: -1px;
  z-index: 2;
}

/* The corner tile is small; its own name caption is just clutter — you
   know it is you. The muted/speaking cues still apply to the big tile. */
.p-room__stage.is-focus .p-room__tile.is-me .p-room__caption { display: none; }
.p-room__stage.is-focus .p-room__tile.is-me .p-room__avatar {
  width: clamp(36px, 9vmin, 64px);
  font-size: clamp(13px, 3vmin, 22px);
}

/* --- The control bar -------------------------------------------------- */

.p-room__bar {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-wrap: wrap;
  gap: clamp(6px, 2vw, 14px);
  row-gap: clamp(6px, 1.5vmin, 10px);
  padding: clamp(10px, 2.4vmin, 20px) clamp(10px, 3vw, 24px)
           max(clamp(10px, 2.4vmin, 20px), env(safe-area-inset-bottom));
}

.p-room__btn {
  display: inline-grid;
  place-items: center;
  position: relative;
  width: clamp(44px, 12.5vw, 52px);
  height: clamp(44px, 12.5vw, 52px);
  border: 0;
  border-radius: 50%;
  background: #24313f;
  color: #e8edf3;
  cursor: pointer;
  transition: background .15s ease, transform .08s ease;
}

.p-room__btn:hover { background: #2f3f50; }
.p-room__btn:active { transform: scale(.95); }
.p-room__btn:focus-visible { outline: 2px solid #4ea1ff; outline-offset: 2px; }

/* Off is the loud state: a muted microphone is the thing people forget. */
.p-room__btn.is-off { background: #7a2b25; color: #ffd9d3; }
.p-room__btn.is-on  { background: #1f5c86; }

/* The "choose audio output" menu — floats above the bar, anchored to the
   room (which is position:fixed, inset:0). */
.p-room__menu {
  position: absolute;
  left: 50%;
  transform: translateX(-50%);
  bottom: clamp(74px, 14vmin, 104px);
  z-index: 30;
  min-width: 220px;
  max-width: min(320px, 86vw);
  background: #1b2634;
  border: 1px solid #2f3f50;
  border-radius: 12px;
  padding: 6px;
  box-shadow: 0 12px 34px rgba(0, 0, 0, .5);
}
.p-room__menu[hidden] { display: none; }
.p-room__menu-head {
  font-size: 11px; letter-spacing: .04em; text-transform: uppercase;
  color: #8ea0b5; padding: 6px 10px 4px;
}
.p-room__menu-item {
  display: block; width: 100%; text-align: left;
  padding: 9px 10px; border: 0; border-radius: 8px;
  background: none; color: #e8edf3; font: inherit; font-size: 13px;
  cursor: pointer; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.p-room__menu-item:hover { background: #26384a; }
.p-room__menu-item.is-on { background: #1f5c86; }

.p-room__btn--end {
  width: clamp(56px, 16vw, 64px);
  background: #c0362c;
  color: #fff;
}
.p-room__btn--end:hover { background: #d44136; }

.p-room__bar-right {
  display: flex;
  align-items: center;
  gap: clamp(6px, 2vw, 14px);
}

/* --- Call mode: round controls floating over full-bleed video ----------
   The 1:1 call (root .is-call) drops the top/bar out of the grid and floats
   them over the video with soft gradient scrims — the phone-call look. The
   controls become white circles; the hang-up stays red. */
.p-room.is-call { grid-template-rows: 1fr; }

.p-room.is-call .p-room__top {
  position: absolute; top: 0; left: 0; right: 0; z-index: 6;
  color: #fff;
  background: linear-gradient(to bottom, rgba(0,0,0,.5), rgba(0,0,0,0));
  padding-top: max(clamp(8px, 2vmin, 16px), env(safe-area-inset-top));
}
.p-room.is-call .p-room__status { color: rgba(255,255,255,.85); }
.p-room.is-call .p-room__clock { color: #fff; }

.p-room.is-call .p-room__bar {
  position: absolute; left: 0; right: 0; bottom: 0; z-index: 6;
  flex-wrap: nowrap;
  gap: clamp(8px, 3.5vw, 20px);
  background: linear-gradient(to top, rgba(0,0,0,.5), rgba(0,0,0,0));
  padding-top: clamp(24px, 8vmin, 48px);
  padding-bottom: max(clamp(14px, 3vmin, 24px), env(safe-area-inset-bottom));
}

.p-room.is-call .p-room__btn {
  background: rgba(255,255,255,.95);
  color: #1b2430;
  box-shadow: 0 2px 10px rgba(0,0,0,.3);
}
.p-room.is-call .p-room__btn:hover { background: #fff; }
/* Muted mic / camera off reads as a red glyph on white — the state to notice. */
.p-room.is-call .p-room__btn.is-off { background: #fff; color: #d0362c; }
/* An active toggle (camera on) goes dark-filled, like the mock's video button. */
.p-room.is-call .p-room__btn.is-on { background: #2a3550; color: #fff; }
.p-room.is-call .p-room__btn--end {
  background: #e2392b; color: #fff;
  box-shadow: 0 4px 16px rgba(226, 57, 43, .5);
}
.p-room.is-call .p-room__btn--end:hover { background: #f0463a; }

/* The stage covers the whole screen on a call, so the receiver's video is
   truly full-bleed rather than a box in the top half. */
.p-room.is-call .p-room__stage { position: absolute; inset: 0; padding: 0; background: #000; }

/* The receiver (the big tile) shown COMPLETE — never cropped. object-fit
   contain shows the whole frame, letterboxed on black where the aspect
   ratios differ, rather than zooming in and cutting off the edges. */
.p-room.is-call .p-room__stage.is-focus .p-room__tile:not(.is-me) {
  background: #000;
}
.p-room.is-call .p-room__stage.is-focus .p-room__tile:not(.is-me) .p-room__video video {
  object-fit: contain;
  background: #000;
}

/* Every tile in a 1:1 call shows the whole frame at actual size — the
   self-view and the pre-answer preview too, not only the big remote tile —
   so nothing is cropped or zoomed in. */
.p-room.is-call .p-room__video video {
  object-fit: contain;
}

/* You: a small portrait tile in the bottom-right, lifted clear of the
   control bar so the two never overlap. */
.p-room.is-call .p-room__stage.is-focus .p-room__tile.is-me {
  inset: auto clamp(12px, 4vw, 18px) clamp(92px, 16vh, 120px) auto;
  width: clamp(92px, 28vw, 124px);
  aspect-ratio: 3 / 4;
  border-radius: 14px;
  box-shadow: 0 6px 22px rgba(0, 0, 0, .5);
  outline: 1.5px solid rgba(255, 255, 255, .5);
}

/* --- The door --------------------------------------------------------- */

.p-room__door-count {
  position: absolute;
  top: -2px;
  right: -2px;
  min-width: 18px;
  height: 18px;
  padding: 0 4px;
  border-radius: 999px;
  background: #e0a300;
  color: #241a00;
  font-size: 11px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.p-room__door-count[hidden] { display: none; }

/* Somebody is standing outside. Worth noticing without being a klaxon. */
.p-room__btn.has-waiting { background: #7a5a00; }

.p-room__door {
  position: absolute;
  right: clamp(8px, 2vw, 20px);
  bottom: calc(clamp(44px, 12.5vw, 52px) + clamp(22px, 5vmin, 44px));
  width: min(320px, calc(100vw - 24px));
  max-height: 46vh;
  overflow-y: auto;
  padding: 12px;
  border-radius: 12px;
  background: #16202b;
  box-shadow: 0 12px 40px rgba(0, 0, 0, .5);
  display: none;
}

.p-room__door.is-open { display: block; }

.p-room__door-head {
  margin: 0 0 8px;
  font-weight: 600;
  font-size: 13px;
  color: #9fb0c3;
}

.p-room__door-empty { margin: 0; font-size: 13px; color: #74879b; }

.p-room__door-row {
  display: grid;
  grid-template-columns: 1fr auto auto auto;
  align-items: center;
  gap: 8px;
  padding: 7px 0;
  border-top: 1px solid #22303e;
  font-size: 13px;
}

.p-room__door-name {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.p-room__door-wait { color: #74879b; font-size: 12px; }

.p-room__door-yes,
.p-room__door-no {
  border: 0;
  border-radius: 7px;
  padding: 5px 10px;
  font: inherit;
  font-size: 12px;
  cursor: pointer;
}

.p-room__door-yes { background: #1f7a4d; color: #fff; }
.p-room__door-no  { background: #2a3844; color: #c8d5e2; }
.p-room__door-yes[disabled],
.p-room__door-no[disabled] { opacity: .5; cursor: default; }

/* --- Audio -----------------------------------------------------------
   Outside the layout, on <body>, and never inside a tile. A tile is
   rebuilt whenever the grid changes; audio attached inside one goes
   silent at exactly the moment somebody new joins. And it is zero-size
   rather than display:none, because a display:none element does not
   reliably play in Safari. */

.p-room__audio {
  position: fixed;
  left: 0;
  top: 0;
  width: 0;
  height: 0;
  overflow: hidden;
  pointer-events: none;
}

.p-room__fallback {
  padding: 24px;
  text-align: center;
  color: #9fb0c3;
}

/* --- Reduced motion --------------------------------------------------- */

@media (prefers-reduced-motion: reduce) {
  .p-room__tile,
  .p-room__btn { transition: none; }
  .p-room__btn:active { transform: none; }
}

/* The portal mounts the room inside a screen container. The room itself is
   fixed to the viewport, so this only needs to exist and take no space. */
.p-room-host { display: contents; }


/* =====================================================================
   The lobby — /meet/

   Its own page, not a page of the website: no nav, no footer, nothing to
   click except the one thing the visitor came to do. The panel carries
   the request; the showcase beside it carries whatever the office is
   publishing this month.

   Two columns on a laptop, stacked on a phone with the panel first — the
   button matters more than the banner, and on a phone the fold is real.
   ===================================================================== */

.paras-lobby-page {
  margin: 0;
  background: var(--canvas);
  color: var(--ink-900);
  font-family: var(--font-body);
}

.p-lobby {
  min-height: 100dvh;
  display: grid;
  align-content: center;
  justify-content: center;
  gap: var(--s7);
  padding: var(--s7) var(--s5) var(--s9);
}

.p-lobby.has-showcase {
  align-content: center;
  justify-content: center;
}

@media (min-width: 900px) {
  .p-lobby.has-showcase {
    grid-template-columns: minmax(340px, 420px) minmax(0, 560px);
    align-items: center;
    gap: var(--s9);
    padding-inline: var(--s8);
  }
}

/* --- The panel --------------------------------------------------------- */

.p-lobby__panel {
  width: 100%;
  max-width: 460px;
  margin: 0 auto;
  padding: var(--s7);
  border-radius: var(--r-lg);
  background: var(--white);
  border: 1px solid var(--line);
  box-shadow: 0 10px 40px rgba(22, 35, 58, .07);
  display: grid;
  gap: var(--s4);
}

.p-lobby__brand {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h5);
  line-height: var(--h5-lh);
  color: var(--blue-700);
}

.p-lobby__title {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h3);
  line-height: var(--h3-lh);
}

.p-meet__facts {
  padding: var(--s4);
  border-radius: var(--r-md);
  background: var(--blue-50);
  border: 1px solid var(--blue-100);
}

.p-meet__what { margin: 0; font-weight: 600; }
.p-meet__when { margin: var(--s1) 0 0; color: var(--ink-700); font-size: var(--body-s); }

.p-meet__note {
  margin: 0;
  font-size: var(--body-s);
  line-height: var(--body-s-lh);
  color: var(--ink-500);
}

.p-meet__problem {
  margin: 0;
  font-size: var(--body-s);
  color: var(--red-600);
}
.p-meet__problem[hidden] { display: none; }

/* A quiet pulse while somebody waits. Not a spinner: a spinner says
   "working", and nothing here is working — a person is deciding. */
.p-meet__wait {
  height: 4px;
  border-radius: 999px;
  background: var(--line);
  overflow: hidden;
  position: relative;
}

.p-meet__wait::after {
  content: '';
  position: absolute;
  inset: 0 auto 0 0;
  width: 38%;
  border-radius: 999px;
  background: var(--blue-600);
  animation: paras-meet-wait 1.8s ease-in-out infinite;
}

@keyframes paras-meet-wait {
  0%   { left: -38%; }
  100% { left: 100%; }
}

/* --- The showcase ------------------------------------------------------- */

.p-lobby__showcase {
  width: 100%;
  max-width: 560px;
  margin: 0 auto;
  display: grid;
  gap: var(--s4);
}

.p-lobby__slides {
  position: relative;
  display: grid;
  min-height: 260px;
}

/* Every slide occupies the same cell, so the box never resizes as the
   rotation moves from a tall banner to a one-line quote. A box that
   jumps every seven seconds is worse than no box. */
.p-lobby__slide {
  grid-area: 1 / 1;
  margin: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .6s ease;
  align-self: center;
}

.p-lobby__slide.is-on { opacity: 1; visibility: visible; }

.p-lobby__slide--banner img {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  object-fit: cover;
  border-radius: var(--r-lg);
  background: var(--line);
}

.p-lobby__slide--banner figcaption,
.p-lobby__slide--about,
.p-lobby__cite {
  display: grid;
  gap: var(--s1);
  margin-top: var(--s3);
}

.p-lobby__slide--about { margin-top: 0; text-align: center; }

.p-lobby__slide-title {
  font-weight: 600;
  color: var(--ink-900);
}

.p-lobby__slide-body {
  font-size: var(--body-s);
  line-height: var(--body-s-lh);
  color: var(--ink-500);
}

.p-lobby__quote {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h4);
  line-height: var(--h4-lh);
  color: var(--ink-900);
}

.p-lobby__cite {
  grid-auto-flow: column;
  grid-template-columns: auto 1fr;
  justify-content: start;
  align-items: center;
  gap: var(--s3);
}

.p-lobby__face {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  object-fit: cover;
}

.p-lobby__dots {
  display: flex;
  justify-content: center;
  gap: var(--s2);
}

.p-lobby__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--line-strong);
  transition: background .3s ease;
}

.p-lobby__dot.is-on { background: var(--blue-600); }

@media (prefers-reduced-motion: reduce) {
  .p-meet__wait::after { animation: none; left: 0; width: 100%; opacity: .35; }
  .p-lobby__slide { transition: none; }
}

/* While the room is up, the page behind it must not scroll — on a phone a
   scrollable body under a fixed overlay drags the whole room about. */
body.paras-in-room {
  overflow: hidden;
  height: 100dvh;
  overscroll-behavior: none;
}

/* The "you are early" countdown. Larger than the notes around it because
   it is the one thing the visitor is waiting to see change. */
.p-lobby__countdown {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--h4);
  line-height: var(--h4-lh);
  color: var(--blue-700);
}

/* A sticky line under the title: a blocked microphone, a camera another
   app has hold of. Separate from the status line, which is rewritten
   every time somebody joins or leaves. */
.p-room__note {
  margin: 0 clamp(12px, 3vw, 24px) clamp(6px, 1.5vmin, 12px);
  padding: 8px 12px;
  border-radius: 8px;
  background: #3a2320;
  color: #ffd9d3;
  font-size: clamp(12px, 1.8vmin, 14px);
  line-height: 1.4;
}
.p-room__note[hidden] { display: none; }

/* The panel that replaces the room when somebody is disconnected rather
   than having left. It reuses the room's own chrome so the window does not
   appear to change into a different thing. */
.p-room__portrait {
  display: grid;
  place-items: center;
  gap: var(--s3, 12px);
  text-align: center;
  padding: clamp(16px, 5vmin, 48px);
}

.p-room__bigline {
  margin: 0;
  font-size: clamp(18px, 3.4vmin, 26px);
  font-weight: 600;
}

.p-room__btn--wide {
  width: auto;
  min-height: clamp(44px, 12.5vw, 52px);
  padding: 0 clamp(14px, 3vw, 22px);
  border-radius: 999px;
  font: inherit;
  font-size: clamp(13px, 1.9vmin, 15px);
}

/* --- Call timer + in-call chat (used by the 1:1 call room) ------------ */
.p-room__clock {
  margin-left: auto;
  font-variant-numeric: tabular-nums;
  color: #aeb9c6;
  font-size: 13px;
  padding-left: 12px;
}

.p-room__chat {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(340px, 90vw);
  background: #121a24;
  border-left: 1px solid #2a3a4c;
  display: flex; flex-direction: column;
  z-index: 40;
  transform: translateX(100%);
  transition: transform .2s ease;
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.p-room.chat-open .p-room__chat { transform: none; }
.p-room__chat-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 12px 14px; border-bottom: 1px solid #2a3a4c;
  font-weight: 600; color: #e8edf3;
}
.p-room__chat-close { background: none; border: 0; color: #8ea0b5; font-size: 22px; line-height: 1; cursor: pointer; }
.p-room__chat-list { flex: 1; overflow-y: auto; padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.p-room__msg { max-width: 85%; align-self: flex-start; }
.p-room__msg.is-mine { align-self: flex-end; text-align: right; }
.p-room__msg-body {
  display: inline-block; padding: 8px 11px; border-radius: 12px;
  background: #223247; color: #e8edf3; font-size: 13px; text-align: left;
  word-break: break-word;
}
.p-room__msg.is-mine .p-room__msg-body { background: #1f5c86; }
.p-room__msg-time { font-size: 10px; color: #6f8097; margin-top: 2px; }
.p-room__chat-compose { display: flex; gap: 8px; padding: 10px; border-top: 1px solid #2a3a4c; }
.p-room__chat-box {
  flex: 1; resize: none; background: #0e151d; border: 1px solid #2a3a4c;
  border-radius: 10px; color: #e8edf3; padding: 9px 11px; font: inherit; font-size: 13px; max-height: 96px;
}
.p-room__chat-send { border: 0; border-radius: 10px; background: #1f5c86; color: #fff; padding: 0 14px; cursor: pointer; font: inherit; font-weight: 600; }
.p-room__chat-dot {
  position: absolute; top: 4px; right: 4px;
  min-width: 16px; height: 16px; padding: 0 4px;
  border-radius: 999px; background: #c0362c; color: #fff;
  font-size: 10px; line-height: 16px; text-align: center;
}