/* Gachi stylesheet: profile.css. Profil tab 2.0 (Claude Design 2026-10-13): Din Dag's topshelf with level, XP
   and the name in the viewer's colour, the gear in the corner pill family, room for the turtle, the
   statistics tiles, the trophy cards in the challenge-card family and, in locked mode, the free counter with
   the Gachi+ key. Built from shared families (.dashboard-overview, .outline--pill, .panel--information, .t-title,
   .t-label, .challenge-list/.challenge-link, .detail-duel-dot, .progress-track) with tokens only. Loads after
   dashboard-tasks.css. */

/* ---- Topshelf ---- */

/* The shelf is as tall as its content: Din Dag's generic copy row is not here. */
.dashboard-overview.profile-overview {
  height: auto;
  padding-bottom: 14px;
}

/* Din Dag's primary block is absolutely placed in a shelf of fixed height; here it flows, as tall as its rows. */
.dashboard-overview-primary.profile-overview-primary {
  position: relative;
  top: auto;
  right: auto;
  left: auto;
  display: grid;
  grid-template-rows: max-content max-content;
  gap: 12px;
  height: auto;
}

.profile-overview-copy {
  padding-right: 52px;
}

/* The level is the weekday's node (.dashboard-overview-date); only the Plus mark takes its colour. */
.profile-overview-plus {
  color: var(--gold-300);
}

/* The gear is the corner pill family, like the language key on Start and the bell on Din Dag (Sudden
   2026-10-14). Convert the shared screen-corner inset to the primary block's coordinates. */
.profile-overview-primary .profile-settings-button {
  position: absolute;
  top: calc(var(--screen-corner-top) - var(--topshelf-content-top));
  right: calc(var(--screen-corner-right) - var(--screen-padding-x) - var(--safe-right));
  z-index: 3;
  min-width: 44px;
  padding: 0 12px;
}

.profile-settings-icon {
  font-size: var(--text-15);
  line-height: 1;
}

.topshelf-info.profile-overview-info {
  display: grid;
  grid-template-rows: max-content max-content max-content;
  gap: 8px;
  align-content: start;
  height: auto;
}

.profile-overview-top {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  min-width: 0;
}

/* A button that looks like the heading (Sudden 2026-10-13): it opens the app as this profile in an Android
   browser. The hit area reaches 44px through ::after, so the layout stays the same. */
.profile-hero-alias {
  position: relative;
  flex: 1 1 auto;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--player-self);
  font-size: var(--text-30);
  font-weight: 800;
  line-height: 1.05;
  text-align: left;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  cursor: default;
  -webkit-tap-highlight-color: transparent;
}

.profile-hero-alias::after {
  content: "";
  position: absolute;
  inset: -6px -10px;
}

.profile-hero-alias.is-tappable {
  cursor: pointer;
}

.profile-hero-alias:focus-visible {
  outline: 2px solid var(--accent-sage);
  outline-offset: 4px;
  border-radius: 12px;
}

.profile-overview-xp {
  flex: 0 0 auto;
  margin: 0;
  color: var(--player-self);
  font-size: var(--text-17);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.profile-overview .progress-fill {
  background: var(--player-self);
}

.profile-overview-caption {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-13);
  font-weight: 700;
  line-height: 1.2;
}

/* ---- Content ---- */

/* The one scrolling panel of the tab (responsive.css turns .dashboard-screen into a grid where only the
   .dashboard-panel scrolls, like Utmaningar); the sections inside stack with their own gap. */
.profile-scroll {
  --profile-turtle-size: clamp(200px, 62vw, 260px);
  display: grid;
  align-content: start;
  gap: 22px;
}

.profile-scroll > * {
  min-width: 0;
}

.profile-scroll:has(.profile-matches-row ~ .profile-matches-row) {
  --profile-history-extra-height: 52px;
}

.profile-scroll:has(.profile-matches-row ~ .profile-matches-row ~ .profile-matches-row) {
  --profile-history-extra-height: 104px;
}

/* The turtle's place (Sudden 2026-10-14): a dashed hairline circle says something is coming here until the
   artwork exists. Decorative, so the stage stays aria-hidden. */
.profile-hero-stage {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: max(calc(var(--profile-turtle-size) + 64px), calc(var(--app-height) - 400px - var(--profile-history-extra-height, 0px)));
  padding: 48px 0 16px;
  box-sizing: border-box;
}

.profile-turtle-placeholder {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 4px;
  box-sizing: border-box;
  width: var(--profile-turtle-size);
  height: auto;
  aspect-ratio: 1;
  border: 2px dashed rgba(var(--creme-rgb), 0.22);
  border-radius: 50%;
  background: rgba(var(--creme-rgb), 0.04);
  text-align: center;
}

.profile-turtle-label {
  color: var(--text-soft);
}

.profile-turtle-caption {
  color: var(--text-dim);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.2;
}

.profile-section {
  display: grid;
  gap: 10px;
}

.profile-panel-copy,
.profile-panel-note,
.profile-panel-caption {
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-14);
  font-weight: 700;
  line-height: 1.3;
  overflow-wrap: anywhere;
}

.profile-panel-caption {
  color: var(--text-dim);
  font-size: var(--text-13);
  text-align: center;
}

.profile-panel-note.is-warning {
  color: var(--risk);
}

/* ---- Locked mode (brief §2, §5) ---- */

.profile-lock {
  display: grid;
  gap: 12px;
}

.profile-lock-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}

.profile-lock-label {
  color: var(--gold-300);
}

.profile-lock-copy {
  color: var(--text);
  font-size: var(--text-14);
  font-weight: 800;
  line-height: 1.2;
}

.profile-lock-actions {
  display: grid;
  gap: 8px;
  padding: 0 12px;
}

.profile-lock-actions .primary-button {
  width: 100%;
}

.profile-plus-note {
  text-align: center;
}

/* The statistics and the progress are never blurred in locked mode (Sudden 2026-10-14): a person's own history
   stays theirs; the lock is the counter and the key above. */

/* ---- Statistics: the create loop's information panels, then create-style history buttons ---- */

.profile-stats {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  grid-template-rows: auto auto auto;
  gap: 8px;
}

/* Subgrid keeps label, count and record level when a label wraps. */
.profile-screen .profile-stat {
  display: grid;
  grid-row: span 3;
  grid-template-rows: subgrid;
  align-content: start;
  justify-items: center;
  row-gap: 5px;
  min-width: 0;
  margin: 0;
  padding: 12px 6px 10px;
  color: var(--text);
  text-align: center;
}

.profile-stat-value {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  max-width: 100%;
  min-width: 0;
}

/* The long-number variant keeps four digits beside the emoji on narrow phones. */
.profile-stat-value:has(.profile-stat-number.is-long) {
  gap: 2px;
}

.profile-stat-emoji {
  flex: 0 0 auto;
  font-size: var(--text-21);
  line-height: 1;
}

.profile-stat-number {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: var(--text-26);
  font-weight: 800;
  line-height: 1;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

/* Four digits or more: the smaller size, so 1234 fits beside the emoji at 360 px instead of ending in an ellipsis. */
.profile-stat-number.is-long {
  font-size: var(--text-21);
}

.profile-stat-label {
  align-self: start;
  max-width: 100%;
  color: var(--text-soft);
}

/* The record under the label: the record streak, the best 100% streak (Sudden 2026-10-14). */
.profile-stat-caption {
  align-self: start;
  max-width: 100%;
  color: var(--text-dim);
  font-size: var(--text-12);
  font-weight: 700;
  line-height: 1.2;
}

/* History: the create choice face, with the mode left and a completed challenge count and chevron right.
   Two classes, because components.css loads after this file and `.raised` centres on one. */
.profile-stats .profile-matches-row {
  grid-column: 1 / -1;
  width: 100%;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  text-align: left;
}

.profile-matches-row-label,
.profile-matches-row-value {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.profile-matches-row-label > :last-child {
  overflow-wrap: anywhere;
}

.profile-matches-row-value {
  flex: 0 0 auto;
}

.profile-matches-count {
  color: var(--text-soft);
  font-size: var(--text-13);
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.profile-matches-row-emoji {
  flex: 0 0 auto;
  font-size: var(--text-17);
  line-height: 1;
}

.profile-stat-record {
  font-size: var(--text-15);
  font-variant-numeric: tabular-nums;
}

.profile-stat-record-pair {
  white-space: nowrap;
}

.profile-stat-record-count {
  color: var(--text-soft);
}

/* Only the result symbols carry outcome colours; their counts stay neutral. */
.profile-stat-record-value.is-leading {
  color: var(--accent-sage);
}

.profile-stat-record-value.is-trailing {
  color: var(--risk);
}

.profile-stat-record-dash {
  color: rgba(var(--creme-rgb), 0.55);
}

/* ---- DINA FRAMSTEG: the challenge-card family, one card per trophy category ---- */

.profile-progress-list {
  padding: 0 2px;
}

/* A category title may take two lines (German: "Gemeinsam-Challenges geschafft" at 360 px); the count stays at the top. */
[data-screen="profile"] .profile-progress-card .challenge-title {
  white-space: normal;
  overflow-wrap: anywhere;
}

/* The cards are information, not ways in (the per-category view is parked): the family's press stays off here. */
[data-screen="profile"] .challenge-list .profile-progress-card:active {
  --socket: 3px;
  transform: none;
}

.profile-progress-emoji {
  flex: 0 0 auto;
  font-size: var(--text-17);
  line-height: 1;
}

.profile-progress-count {
  color: var(--player-self);
  font-size: var(--text-15);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
}

.profile-progress-count.is-done {
  color: var(--gold-300);
}

.profile-progress-xp {
  color: var(--player-self);
}

/* ---- Matcher floater: information panels with explicit rematch buttons (Sudden 2026-10-14) ---- */

.profile-matches-list {
  display: grid;
  gap: 8px;
}

.profile-match-row {
  display: grid;
  gap: 8px;
  padding: 12px;
  text-align: left;
}

.profile-match-row--partner {
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 4px 10px;
}

.profile-match-row--partner .profile-match-head {
  grid-column: 1;
  grid-row: 1;
  justify-content: flex-start;
  flex-wrap: wrap;
  gap: 4px 8px;
}

.profile-match-row--partner .profile-match-count {
  color: var(--text-soft);
  font-size: var(--text-13);
  font-weight: 700;
}

.profile-match-row--partner .profile-match-alias {
  white-space: normal;
  overflow-wrap: anywhere;
}

.profile-match-row--partner .profile-match-meta {
  grid-column: 1;
  grid-row: 2;
  line-height: 1.35;
}

.profile-match-row--partner > [data-profile-action="rematch"] {
  grid-column: 2;
  grid-row: 1 / span 2;
}

.profile-match-row--partner .profile-stat-record,
.profile-match-row--partner .profile-match-record,
.profile-match-row--partner .profile-match-latest {
  display: inline-block;
}

.profile-history-totals {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: baseline;
  gap: 4px 16px;
}

.profile-match-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  min-width: 0;
}

.profile-match-alias {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  color: var(--text);
  font-size: var(--text-15);
  font-weight: 800;
  line-height: 1.2;
  white-space: nowrap;
}

.profile-match-record {
  flex: 0 0 auto;
  color: var(--text);
  font-size: var(--text-15);
  font-weight: 800;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
}

.profile-history-result {
  flex: none;
  font-size: var(--text-13);
  font-weight: 800;
  white-space: nowrap;
}

.profile-history-result.is-succeeded { color: var(--done); }
.profile-history-result.is-failed { color: var(--risk); }

.profile-match-meta {
  display: block;
  margin: 0;
  color: var(--text-soft);
  font-size: var(--text-13);
  font-weight: 700;
  line-height: 1.3;
}

.profile-matches-empty {
  text-align: center;
}

/* ---- Settings floater rows ---- */

.profile-row-list {
  display: grid;
  gap: 8px;
}

#profile-settings-rows .profile-row {
  width: 100%;
  justify-content: space-between;
  padding: 0 14px 0 16px;
  text-align: left;
}

.profile-row-chevron {
  flex: 0 0 auto;
  color: var(--text-dim);
  font-size: var(--text-19);
  font-weight: 700;
  line-height: 1;
}

/* Återställningskod (P16, 2026-10-13): the code is information to copy or write down, so it sits sunken like a
   chosen state, large and spaced so every character can be read and typed on another device. */
.recovery-code-display {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: var(--hit-target);
  padding: 12px 14px;
  border-radius: var(--radius-raised-md);
  background: var(--sunken);
  box-shadow: var(--sunken-shadow);
}

.recovery-code-value {
  color: var(--text);
  font-size: var(--text-26);
  font-weight: 800;
  letter-spacing: 0.08em;
  line-height: 1.2;
  font-variant-numeric: tabular-nums;
  overflow-wrap: anywhere;
  text-align: center;
  user-select: all;
  -webkit-user-select: all;
}