/* Accounts: the header's account menu, the sign-in, dashboard and settings pages. */

/* The header's account menu: picture and name, opening a small panel. On phones the panel drops under the whole
   header (positioned from `.site-header`), full width; from 48rem it hangs under the picture. */
@media (min-width: 48rem) {
  .user-menu {
    position: relative;
  }
}

.user-menu summary {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  padding: var(--space-1) var(--space-2) var(--space-1) var(--space-1);
  border-radius: var(--radius-pill);
  cursor: pointer;
  list-style: none;
  transition: background-color var(--duration-base) var(--ease-out);
}

.user-menu summary::-webkit-details-marker {
  display: none;
}

.user-menu summary:hover,
.user-menu[open] summary {
  background: color-mix(in srgb, var(--color-text) 6%, transparent);
}

.user-avatar {
  flex: none;
  width: var(--size-control-xs);
  height: var(--size-control-xs);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.user-avatar-initial {
  display: grid;
  place-items: center;
  color: var(--color-on-accent);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  background: var(--color-accent);
}

.user-menu-name {
  display: none;
  max-width: 10rem;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* The name from a tablet up; on a phone the picture alone, so the header's first row still fits. */
@media (min-width: 48rem) {
  .user-menu-name {
    display: inline;
  }
}

.user-menu-chevron {
  color: var(--color-text-muted);
  transition: rotate var(--duration-base) var(--ease-out);
}

.user-menu[open] .user-menu-chevron {
  rotate: 180deg;
}

.user-menu-panel {
  position: absolute;
  top: 100%;
  right: var(--grid-margin);
  left: var(--grid-margin);
  z-index: var(--z-dropdown);
  display: grid;
  min-width: var(--width-card);
  padding: var(--space-2);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transform-origin: top right;
  animation: menu-in var(--duration-base) var(--ease-out);
}

@media (min-width: 48rem) {
  .user-menu-panel {
    top: calc(100% + var(--space-2));
    right: 0;
    left: auto;
  }
}

.user-menu-who {
  margin: 0;
  padding: var(--space-2) var(--space-3) var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  border-bottom: var(--border-width) solid var(--color-border);
  overflow-wrap: anywhere;
}

.user-menu-panel a,
.user-menu-panel button {
  display: block;
  width: 100%;
  margin-top: var(--space-1);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  text-align: start;
  color: var(--color-text);
  background: none;
  border: 0;
  border-radius: var(--radius-md);
  cursor: pointer;
  transition:
    color var(--duration-fast) var(--ease-out),
    background-color var(--duration-fast) var(--ease-out);
}

.site-header .user-menu-panel a:hover,
.user-menu-panel button:hover {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 8%, var(--color-surface));
}

.user-menu-panel form {
  margin: var(--space-1) 0 0;
  padding-top: var(--space-1);
  border-top: var(--border-width) solid var(--color-border);
}

.user-menu-signin {
  white-space: nowrap;
}

.auth-providers {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-3);
  margin: var(--space-4) 0;
}

.auth-error {
  padding: var(--space-3) var(--space-4);
  border: var(--border-width) solid var(--color-danger);
  border-radius: var(--radius-lg);
  color: var(--color-danger);
  background: color-mix(in srgb, var(--color-danger) 8%, var(--color-surface));
}

/* Settings-style pages (account, privacy): one readable column of headed panels. */
.page-narrow {
  max-width: var(--width-reading);
}

.page-lead {
  margin: calc(var(--space-2) * -1) 0 var(--space-6);
  color: var(--color-text-muted);
  font-size: var(--text-base);
}

.panel {
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

.panel-body {
  margin: 0;
  padding: var(--space-4) var(--space-5);
}

.panel-section {
  margin: var(--space-8) 0;
}

.panel-section > h2 {
  margin: 0 0 var(--space-2);
  font-size: var(--text-lg);
}

.section-hint {
  margin: 0 0 var(--space-3);
  color: var(--color-text-muted);
  font-size: var(--text-md);
}

.panel-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.panel-row {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  min-height: 3.5rem;
  padding: var(--space-2) var(--space-5);
}

.panel-row + .panel-row {
  border-top: var(--border-width) solid var(--color-border);
}

.panel-row-label {
  flex: 1;
  font-weight: var(--weight-semibold);
}

.bullet-list {
  display: grid;
  gap: var(--space-2);
  padding-left: var(--space-10);
  line-height: var(--leading-normal);
}

.bullet-list li::marker {
  color: var(--color-accent);
}

.badge.button-small {
  padding: var(--space-1) var(--space-4);
  font-size: var(--text-sm);
  box-shadow: none;
}

.badge,
.status-badge {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  padding: var(--space-half) var(--space-2);
  font-size: var(--text-sm);
  font-weight: var(--weight-semibold);
  border-radius: var(--radius-pill);
}

.badge {
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 12%, var(--color-surface));
}

.status-badge {
  color: var(--color-success);
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
}

/* Settings: the danger zone, GitHub-style. A box outlined in the danger colour with rows split by hairlines: what the
   action is and does on the left, its red button on the right. A row that needs confirming is a <details>: its
   summary is the row (the button only looks like one) and the confirmation opens underneath. */
.danger-section {
  margin: var(--space-20) 0 var(--space-8);
}

.danger-section > h2 {
  margin: 0 0 var(--space-3);
  font-size: var(--text-lg);
}

.danger-zone {
  border: var(--border-width) solid var(--color-danger);
  border-radius: var(--radius-lg);
  background: var(--color-surface);
}

.danger-row + .danger-row {
  border-top: var(--border-width) solid var(--color-border);
}

.danger-row > summary,
div.danger-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3) var(--space-6);
  padding: var(--space-4) var(--space-5);
}

.danger-row > summary {
  cursor: pointer;
  list-style: none;
}

.danger-row > summary::-webkit-details-marker {
  display: none;
}

.danger-row-text {
  display: grid;
  gap: var(--space-half);
  min-width: 0;
}

.danger-row-text strong {
  font-weight: var(--weight-semibold);
}

.danger-row-text span {
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.danger-row[open] > summary .button {
  color: var(--color-on-solid);
  background: var(--color-danger-solid);
  border-color: var(--color-danger-solid);
}

/* Points down while the row is closed and turns to point up once it's open. */
.danger-row-chevron {
  margin-inline-start: var(--space-2);
  transition: rotate var(--duration-base) var(--ease-out);
}

.danger-row[open] .danger-row-chevron {
  rotate: 180deg;
}

.danger-row-body {
  padding: 0 var(--space-5) var(--space-5);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
  animation: menu-in var(--duration-base) var(--ease-out);
}

.danger-row-body p {
  margin: 0 0 var(--space-4);
  max-width: var(--width-measure);
}

.account-delete {
  display: grid;
  gap: var(--space-3);
  justify-items: start;
}

.account-delete input[type='text'] {
  width: 100%;
  max-width: var(--width-dialog-sm);
  padding: var(--space-2) var(--space-3);
  font: inherit;
  color: var(--color-text);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border-control);
  border-radius: var(--radius-md);
}

.danger-zone-name {
  color: var(--color-text);
  font-weight: var(--weight-semibold);
}

.account-delete .button:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

/* The dashboard (/account): a greeting, the total, and a card per way to help, in an even grid (3 × 2 on a desktop:
   the total takes the first place). Cards fade in (reveal.js), their numbers count up (count-up.js) and their bars
   fill as they come in. */
.dashboard-hero {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  align-items: center;
  gap: var(--space-2) var(--space-5);
  margin: var(--space-12) 0 var(--space-10);
}

.dashboard-avatar {
  width: var(--size-avatar);
  height: var(--size-avatar);
  border-radius: var(--radius-full);
  object-fit: cover;
}

.dashboard-avatar.user-avatar-initial {
  font-size: var(--text-2xl);
}

.dashboard-identity h1 {
  margin: 0;
  font-size: var(--text-title);
  font-weight: var(--weight-semibold);
  line-height: var(--leading-tight);
  overflow-wrap: anywhere;
}

.dashboard-username {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-2);
  margin: var(--space-1) 0 0;
  color: var(--color-text-muted);
}

.dashboard-intro {
  grid-column: 1 / -1;
  max-width: var(--width-measure);
  margin: var(--space-4) 0 0;
  color: var(--color-text-muted);
}

.dashboard-total,
.dash-card {
  padding: var(--space-6);
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
}

/* The total: the accent panel, the first and biggest place on the board. */
.dashboard-total {
  display: grid;
  align-content: center;
  background: var(--gradient-panel);
}

.dashboard-total p {
  margin: 0;
}

.dashboard-total-number {
  color: var(--color-accent);
  font-size: var(--text-stat);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.dashboard-total-label {
  color: var(--color-text-muted);
}

.dashboard-total .dashboard-recent {
  justify-self: start;
  margin-top: var(--space-3);
}

/* "+3 this week": a small green pill. */
.dashboard-recent {
  display: inline-block;
  padding: var(--space-half) var(--space-2);
  color: var(--color-success);
  font-size: var(--text-xs);
  font-weight: var(--weight-semibold);
  white-space: nowrap;
  background: color-mix(in srgb, var(--color-success) 12%, var(--color-surface));
  border-radius: var(--radius-pill);
}

.dashboard-board {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(var(--width-card), 100%), 1fr));
  gap: var(--grid-gutter);
  margin: 0;
  padding: 0;
  list-style: none;
}

.dash-card {
  display: flex;
  flex-direction: column;
  gap: var(--space-1);
  transition:
    translate var(--duration-base) var(--ease-out),
    box-shadow var(--duration-base) var(--ease-out),
    border-color var(--duration-base) var(--ease-out);
}

@media (hover: hover) {
  .dash-card:hover {
    translate: 0 calc(-1 * var(--space-half));
    border-color: color-mix(in srgb, var(--color-accent) 30%, var(--color-border));
    box-shadow: var(--shadow-lg);
  }
}

.dash-card-head {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  margin-bottom: var(--space-3);
}

.dash-card-head h2 {
  flex: 1;
  margin: 0;
  font-size: var(--text-base);
  font-weight: var(--weight-semibold);
}

.dash-card-icon {
  display: grid;
  flex: none;
  place-items: center;
  width: var(--size-control-md);
  height: var(--size-control-md);
  color: var(--color-accent);
  background: color-mix(in srgb, var(--color-accent) 10%, var(--color-surface));
  border-radius: var(--radius-full);
}

.dash-card p {
  margin: 0;
}

.dash-card-number {
  font-size: var(--text-stat);
  font-weight: var(--weight-semibold);
  font-variant-numeric: tabular-nums;
  line-height: var(--leading-tight);
}

.dash-card-unit {
  color: var(--color-text-muted);
}

.dash-card-status {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-1) var(--space-3);
  font-size: var(--text-sm);
}

.dash-live {
  color: var(--color-success);
}

.dash-waiting {
  color: var(--color-text-muted);
}

/* Towards the next milestone: a thin bar that fills as the card comes in. */
.dash-goal {
  margin: auto 0 var(--space-4);
  padding-top: var(--space-4);
}

.dash-bar {
  height: var(--space-1);
  overflow: hidden;
  background: color-mix(in srgb, var(--color-text) 8%, var(--color-surface));
  border-radius: var(--radius-pill);
}

.dash-bar span {
  display: block;
  height: 100%;
  background: var(--color-accent);
  border-radius: inherit;
  transform: scaleX(var(--progress, 0));
  transform-origin: left;
}

[data-reveal] > .revealed .dash-bar span {
  animation: bar-fill calc(2 * var(--duration-reveal)) var(--ease-out) backwards;
  animation-delay: calc(
    var(--reveal-index, 0) * var(--duration-reveal-step) + var(--duration-base)
  );
}

@keyframes bar-fill {
  from {
    transform: scaleX(0);
  }
}

.dash-goal p {
  margin-top: var(--space-2);
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.dash-card-link {
  align-self: flex-start;
}

.dash-card-link .icon {
  transition: translate var(--duration-base) var(--ease-out);
}

.dash-card:hover .dash-card-link .icon {
  translate: var(--space-1) 0;
}

.dashboard-note {
  margin: var(--space-8) 0 0;
  color: var(--color-text-muted);
  font-size: var(--text-sm);
}

.privacy-contact {
  display: flex;
  align-items: center;
  gap: var(--space-3);
  color: var(--color-accent);
}

.privacy-contact a {
  font-weight: var(--weight-semibold);
}