/* Quiet Shelf event detail E1 and Events T3 (QS-3). Tokens only; uses the shared QS-3 rules in
   views/home.css (screen, links, chevrons, the .qsEv event panel) and components.css (buttons,
   panels, eyebrows). QS-13: matches the reference's E1 (.now, .due) and T3 (.seg, .ev .dt). */

.qsEvent,
.qsEventsScreen {
  line-height: 1.3;
}

/* The title takes the reference header title size (20 px), not the page title size. */
#main .qsEvent h1,
#main .qsEventsScreen h1 {
  font-size: var(--fs-action);
  line-height: var(--lh-head);
}

/* The now line (the reference .now): the dot, the bold status, the drop-in note. */
.qsEvent__sub {
  display: flex;
  align-items: center;
  gap: 11px;
  margin: 0;
}

.qsEvent__sub strong {
  font-weight: var(--weight-action);
}

/* AIA-66 (CR-14): the event image under the title (decorative). A fixed 16:9 box, so the facts
   do not move when it loads; it never gets taller than a third of the screen. */
.qsEvent__media {
  margin: 0;
  border-radius: var(--r-card);
  overflow: hidden;
  aspect-ratio: 16 / 9;
  max-height: 33vh;
  background: var(--card);
}

.qsEvent__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* The facts (the reference .due): a card each, two across; one across at larger text. */
.qsEvent__facts {
  display: grid;
  /* Two across on a phone; one across at larger text or zoom (1.4.10). */
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 9em), 1fr));
  gap: var(--gap);
  margin: 0;
}

.qsEvent__fact dt {
  color: var(--muted);
  font-size: var(--fs-eyebrow);
  font-weight: var(--weight-action);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.qsEvent__fact dd {
  min-width: 0;
  margin: 0;
  font-size: var(--fs-action);
  font-weight: var(--weight-action);
  overflow-wrap: anywhere;
}

.qsEvent__desc {
  margin: 0;
  overflow-wrap: anywhere;
}

/* AIA-35: the sign-up confirmation (demo step 11): the "You're registered" heading, the code,
   what and when, and Take me to the room (a primary button, 72 px). */
.qsEvent__done {
  display: grid;
  gap: 8px;
  margin: 0;
  border-color: var(--success);
}

.qsEvent__done .ic {
  color: var(--success);
}

#main .qsEvent .qsEvent__doneHead {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  font-size: var(--fs-section);
  line-height: var(--lh-head);
}

.qsEvent__done p {
  margin: 0;
  overflow-wrap: anywhere;
}

.qsEvent__doneWhat {
  display: grid;
  gap: 2px;
}

.qsEvent__doneWhat p:first-child {
  font-weight: var(--weight-action);
}

.qsEvent__done .qsBtn {
  margin-top: 4px;
}

/* AIA-35: a failed sign-up (full, session ended, network): what happened and, when the session
   ended, Sign in. The edge and the icon carry the state with the words, never color alone. */
.qsEvent__alert {
  display: grid;
  grid-template-columns: auto 1fr;
  align-items: start;
  gap: 8px 10px;
  margin: 0;
  border-color: var(--danger);
}

.qsEvent__alert .ic {
  color: var(--danger);
}

.qsEvent__alert p {
  margin: 0;
  overflow-wrap: anywhere;
}

.qsEvent__alert .qsBtn {
  grid-column: 1 / -1;
}

.qsEvent__actions {
  display: grid;
  gap: var(--gap);
}

a.qsBtn {
  box-sizing: border-box;
}

.qsBtn[disabled] {
  cursor: not-allowed;
}

/* AIA-35: Sign up while the sign-up runs; its label says Signing up. */
.qsBtn[aria-disabled="true"] {
  cursor: progress;
}

/* T3 sort: a segment (DESIGN 5); the pressed button also shows a check, not color alone. */
.qsSeg {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  padding: 4px;
  border: var(--line-w) solid var(--line-strong);
  border-radius: var(--r-card);
  background: var(--primary-soft);
}

.qsSeg__btn {
  display: inline-flex;
  flex: 1 1 0;
  align-items: center;
  justify-content: center;
  gap: 6px;
  min-height: var(--target-min);
  padding: 0 12px;
  /* Transparent, so forced colors still draws an edge round each option. */
  border: var(--line-w) solid transparent;
  border-radius: var(--r-card);
  background: transparent;
  color: var(--muted);
  font-family: var(--font-body);
  font-size: var(--fs-body);
  font-weight: var(--weight-action);
  cursor: pointer;
}

.qsSeg__btn[aria-pressed="true"] {
  background: var(--primary);
  color: var(--on-primary);
}

/* T3 day groups: the eyebrow over its list of event panels. */
.qsEvents__group {
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}

/* The day badge (the reference .ev .dt): weekday over the day, in the Events wash. */
.qsEv__date {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  align-items: center;
  min-inline-size: 57px;
  box-sizing: border-box;
  padding: 6px 4px;
  border-radius: var(--r-card);
  background: var(--acc-events-wash);
  color: var(--acc-events-text);
  font-family: var(--font-head);
  font-weight: var(--weight-head);
  line-height: 1.1;
}

.qsEv__date b {
  font-size: var(--fs-action);
}

/* At larger text the trailing word wraps under the row instead of squeezing the title (1.4.10). */
:root[data-text] .qsEvents .qsEv {
  flex-wrap: wrap;
}

:root[data-text] .qsEvents .qsEv__cue {
  margin-inline-start: 0;
}

/* The trailing word (Go, Sign up): the reference .ev .r. */
.qsEv__cue {
  flex: none;
  margin-inline-start: auto;
  color: var(--primary);
  font-weight: var(--weight-head);
  white-space: nowrap;
}

.qsEvent__doneHead:focus-visible,
.qsEvent__done p:focus-visible,
.qsEvent__alert p:focus-visible,
.qsSeg__btn:focus-visible {
  outline: var(--focus-w) solid var(--focus);
  outline-offset: var(--focus-offset);
}

@media (forced-colors: active) {
  .qsSeg__btn[aria-pressed="true"] {
    background: Highlight;
    color: HighlightText;
  }
  .qsEv__date {
    border: 1px solid CanvasText;
  }
  .qsEvent__doneHead:focus-visible,
  .qsEvent__done p:focus-visible,
  .qsEvent__alert p:focus-visible,
  .qsSeg__btn:focus-visible {
    outline: 3px solid Highlight;
  }
}