/* Hallmark · macrostructures: Index-First + Ecosystem Index + Narrative Workflow · tone: austere social · anchor hue: cool blue */
@import url("./styles-results-5.css?v=auth-heading-1");

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.account-menu {
  display: grid;
  min-width: 11rem;
}

.account-menu[hidden] {
  display: none;
}

.account-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 2.5rem;
  padding: var(--space-xs) var(--space-sm);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font-weight: 700;
  text-align: start;
  text-decoration: none;
}

.account-menu-item[aria-current="page"] {
  background: var(--color-paper-2);
}

.account-menu-item + .account-menu-item {
  border-block-start: var(--rule-thin) solid var(--color-rule);
  border-start-start-radius: 0;
  border-start-end-radius: 0;
}

@media (hover: hover) and (pointer: fine) {
  .account-menu-item:hover {
    background: var(--color-paper-2);
  }
}

.section-page main,
.history-page main {
  width: min(100%, 68rem);
}

.section-heading {
  display: grid;
  gap: var(--space-sm);
  padding-block-end: var(--space-xl);
  border-block-end: var(--rule-strong) solid var(--color-ink);
}

.section-heading h1,
.profile-heading h1 {
  font-size: var(--text-2xl);
}

.section-heading p,
.profile-heading p,
.share-profile p,
.profile-history-row span {
  color: var(--color-muted);
}

.account-layout,
.friends-layout,
.profile-layout {
  display: grid;
  gap: var(--space-2xl);
}

.section-page .empty-view,
.history-page .empty-view {
  display: grid;
  gap: var(--space-sm);
}

.section-page .empty-view .button,
.history-page .empty-view .button {
  margin-block-start: var(--space-xs);
}

.account-index {
  display: grid;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.index-row,
.profile-form,
.share-profile {
  display: grid;
  gap: var(--space-md);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.index-label {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-weight: 700;
}

.inline-control,
.share-control {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
}

.control {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-sm) var(--space-md);
  border: var(--rule-thin) solid var(--color-rule);
  border-radius: var(--radius-control);
  outline: var(--rule-strong) solid transparent;
  outline-offset: var(--space-3xs);
  background: var(--color-paper);
  color: var(--color-ink);
}

.control:focus-visible {
  border-color: var(--color-ink);
  outline-color: var(--color-focus);
}

.inline-control .control,
.share-control .control {
  flex: 1 1 16rem;
}

.share-profile > div:first-child {
  display: grid;
  gap: var(--space-xs);
  max-width: 50ch;
}

.share-profile h2 {
  font-size: var(--text-base);
}

.share-url {
  min-width: 0;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.button--small {
  min-height: 2.25rem;
  padding: var(--space-xs) var(--space-sm);
  font-size: var(--text-sm);
}

.friend-list,
.answer-index,
.profile-history {
  margin: 0;
  padding: 0;
  list-style: none;
}

.friend-list {
  display: grid;
  gap: var(--space-2xl);
}

.friend-card {
  display: grid;
  gap: var(--space-lg);
}

.friend-heading,
.profile-heading {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-md);
  padding-block-end: var(--space-md);
  border-block-end: var(--rule-strong) solid var(--color-ink);
}

.friend-name {
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: var(--text-lg);
  font-weight: 800;
  letter-spacing: -0.025em;
  text-decoration: none;
}

.friend-name:is(a):hover {
  text-decoration: underline;
  text-underline-offset: var(--space-2xs);
}

.answer-index,
.profile-history {
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

.answer-index-row {
  display: grid;
  grid-template-columns: minmax(5rem, auto) minmax(0, 1fr);
  gap: var(--space-md);
  padding-block: var(--space-sm);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.answer-index-row time,
.profile-history-row time {
  color: var(--color-muted);
  font-size: var(--text-sm);
  font-variant-numeric: tabular-nums;
}

.answer-index-row span {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
  text-transform: uppercase;
}

.profile-heading > div {
  display: grid;
  gap: var(--space-xs);
}

.profile-history-row {
  display: grid;
  gap: var(--space-xs);
  padding-block: var(--space-lg);
  border-block-end: var(--rule-thin) solid var(--color-rule);
}

.profile-history-row strong {
  overflow-wrap: anywhere;
  font-size: var(--text-md);
  text-transform: uppercase;
}

.history-layout {
  display: grid;
  gap: var(--space-xl);
}

.history-toolbar {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  align-items: center;
  gap: var(--space-sm);
  padding-block-end: var(--space-lg);
  border-block-end: var(--rule-strong) solid var(--color-ink);
}

.date-picker-label {
  min-width: 0;
}

.date-picker-label input {
  width: 100%;
  min-height: 2.75rem;
  padding: var(--space-xs);
  border: 0;
  border-radius: var(--radius-control);
  background: transparent;
  color: var(--color-ink);
  font-family: var(--font-display);
  font-size: clamp(var(--text-md), 5vw, var(--text-xl));
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.025em;
  text-align: center;
}

.history-game {
  display: grid;
  gap: var(--space-lg);
}

.history-game .board-frame,
.history-game .revealed-summary,
.history-game .status {
  width: 100%;
}

.history-game .status {
  text-align: center;
}

.history-game #history-submit {
  justify-self: center;
}

.history-results {
  gap: var(--space-xl);
}

.history-results .result-board .board-frame {
  max-width: 34rem;
}

#history-leaderboard {
  margin: 0;
  padding: 0;
  list-style: none;
  border-block-start: var(--rule-thin) solid var(--color-rule);
}

@media (min-width: 40rem) {
  .index-row,
  .profile-form,
  .share-profile {
    grid-template-columns: minmax(8rem, 1fr) minmax(0, 3fr);
    align-items: start;
  }

  .profile-form label,
  .share-profile > div:first-child {
    grid-column: 1;
  }

  .profile-form .inline-control,
  .profile-form .field-note,
  .share-profile .share-control {
    grid-column: 2;
  }

  .history-results .result-boards {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xl);
  }
}

@media (pointer: coarse) {
  .account-menu-item,
  .control,
  .date-picker-label input {
    min-height: 3rem;
  }
}

.dialog-close {
  justify-self: end;
}

#auth-status:empty {
  min-height: 0;
}

.sms-disclaimer {
  margin-block-start: calc(-1 * var(--space-sm));
  color: var(--color-muted);
  font-size: var(--text-xs);
}

.privacy-link {
  align-self: center;
  margin-inline-end: auto;
  color: var(--color-muted);
  font-size: var(--text-sm);
}

.privacy-layout {
  max-width: 42rem;
  display: grid;
  gap: var(--space-lg);
}

.privacy-layout section {
  display: grid;
  gap: var(--space-xs);
}

.privacy-layout :is(h1, h2, p) {
  margin: 0;
}