/* Dots and arrows under a phone's workgroup stack (agenda-workgroup-stack-nav.js):
   which window is showing, and a tap to move. Phones only, and only while one
   window shows at a time (the script hides the row otherwise); never printed
   or exported. The arrows are 44px touch targets in the agenda's own card
   rule, charcoal edge and hard shadow; the current dot is a pill in its
   window's room colour. */
#agendaPreview .agenda-workgroup-stack-nav{ display: none; }

@container agenda (max-width: 750px){
  #agendaPreview .agenda-workgroup-stack-nav:not([hidden]){
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 3cqw;
    margin: -2cqw var(--workgroup-round-gutter, 6cqw) 0;
  }
}

#agendaPreview .agenda-workgroup-stack-arrow,
#agendaPreview .agenda-workgroup-stack-dot{
  appearance: none;
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--agenda-charcoal, #2d2d2f);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

#agendaPreview .agenda-workgroup-stack-arrow{
  flex: none;
  display: grid;
  place-items: center;
  box-sizing: border-box;
  width: 44px;
  height: 44px;
  border: 2px solid var(--agenda-charcoal, #2d2d2f);
  border-radius: 50%;
  background: var(--agenda-paper, #fafafa);
  box-shadow: 3px 3px 0 var(--agenda-charcoal, #2d2d2f);
  transition: transform .12s ease, box-shadow .12s ease;
}

#agendaPreview .agenda-workgroup-stack-arrow:active{
  transform: translate(2px, 2px);
  box-shadow: 1px 1px 0 var(--agenda-charcoal, #2d2d2f);
}

#agendaPreview .agenda-workgroup-stack-arrow svg{
  width: 20px;
  height: 20px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.6;
  stroke-linecap: round;
  stroke-linejoin: round;
}

#agendaPreview .agenda-workgroup-stack-dots{
  display: flex;
  align-items: center;
}

/* A 24px-wide target around a 10px dot. */
#agendaPreview .agenda-workgroup-stack-dot{
  --stack-dot-colour: var(--agenda-charcoal, #2d2d2f);
  display: grid;
  place-items: center;
  width: 24px;
  height: 44px;
}

#agendaPreview .agenda-workgroup-stack-dot::before{
  content: "";
  box-sizing: border-box;
  width: 10px;
  height: 10px;
  border: 2px solid var(--agenda-charcoal, #2d2d2f);
  border-radius: 999px;
  background: var(--agenda-paper, #fafafa);
  transition: width .2s ease, background-color .2s ease;
}

#agendaPreview .agenda-workgroup-stack-dot.is-active::before{
  width: 22px;
  background: var(--stack-dot-colour);
}

/* The rooms' colours, in the windows' own order (agenda-workgroups.css). */
#agendaPreview .agenda-workgroup-stack-dot:nth-child(1){ --stack-dot-colour: var(--workgroup-room-green, #55d294); }
#agendaPreview .agenda-workgroup-stack-dot:nth-child(2){ --stack-dot-colour: var(--workgroup-room-blue, #519df6); }
#agendaPreview .agenda-workgroup-stack-dot:nth-child(3){ --stack-dot-colour: var(--workgroup-room-purple, #b191ff); }
#agendaPreview .agenda-workgroup-stack-dot:nth-child(4){ --stack-dot-colour: var(--workgroup-room-pink, #f17fb2); }
#agendaPreview .agenda-workgroup-stack-dot:nth-child(5){ --stack-dot-colour: var(--workgroup-room-orange, #ffa23d); }
#agendaPreview .agenda-workgroup-stack-dot:nth-child(6){ --stack-dot-colour: var(--workgroup-room-yellow, #fed23f); }

#agendaPreview .agenda-workgroup-stack-arrow:focus-visible,
#agendaPreview .agenda-workgroup-stack-dot:focus-visible{
  outline: 3px solid #606cff;
  outline-offset: 2px;
}

@media (prefers-reduced-motion: reduce){
  #agendaPreview .agenda-workgroup-stack-arrow,
  #agendaPreview .agenda-workgroup-stack-dot::before{ transition: none; }
}

.agenda-export-stage .agenda-workgroup-stack-nav,
body.pdf-export .agenda-workgroup-stack-nav,
body.html-export .agenda-workgroup-stack-nav{ display: none !important; }

@media print{
  .agenda-workgroup-stack-nav{ display: none !important; }
}