/* Profiles — slice 5 of 9 of the former components.css.

   ⚠️ LOAD ORDER IS PART OF THESE FILES. They are CONTIGUOUS slices of one
   6841-line sheet, cut at section banners and never re-sorted, so concatenating
   them in the order index.html lists them reproduces the original byte for byte
   — which is the proof the cascade did not shift. Moving a rule to a different
   slice throws that guarantee away. index.html and sw.js's SHELL_ASSETS must
   list all 9 in the same order as each other.

   Contents: Profiles list, avatar picker tabs. */

/* ── Profiles ────────────────────────────────────────────── */

.wu-profile-chip {
  font-family: var(--font-display);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-primary);
}

.wu-prof-dot {
  display: inline-block;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  margin-right: var(--space-sm);
  flex: none;
}

/* Big avatar disc — the child identity sheet (future avatar picker) */
.wu-avatar-big {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  color: #fff;
  font-family: var(--font-display);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
}

/* Code-link sync view (decision #58) */
.wu-sync-wrap {
  max-width: 420px;
  margin: 0 auto;
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}
.wu-sync-note {
  color: var(--colour-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--line-height-relaxed, 1.5);
  margin: 0;
}
.wu-sync-code {
  font-family: var(--font-mono);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.12em;
  text-align: center;
  padding: var(--space-md);
  background: var(--colour-bg);
  border: 1px dashed var(--colour-border);
  border-radius: var(--radius-card);
  color: var(--colour-text-primary);
  user-select: all;
}
.wu-sync-go { background: var(--colour-accent); color: #fff; border-color: transparent; }
.wu-sync-go:hover { filter: brightness(1.05); }
.wu-sync-go:disabled { opacity: 0.6; cursor: default; }
.wu-sync-secondary:disabled { opacity: 0.6; cursor: default; }
.wu-sync-or {
  text-align: center;
  color: var(--colour-text-secondary);
  font-size: var(--font-size-sm);
}
.wu-sync-field {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-size: var(--font-size-sm);
  color: var(--colour-text-secondary);
}
.wu-sync-input {
  font-family: var(--font-mono);
  font-size: var(--font-size-lg);
  text-align: center;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: var(--space-sm) var(--space-md);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-button);
  background: var(--colour-surface);
  color: var(--colour-text-primary);
}
.wu-sync-input:focus { outline: 2px solid var(--colour-accent); outline-offset: 1px; }
.wu-sync-role {
  font-size: var(--font-size-sm);
  color: var(--colour-text-secondary);
  text-align: center;
}
.wu-sync-rolechg {
  background: none;
  border: none;
  padding: 0 0 0 var(--space-xs);
  color: var(--colour-accent);
  font: inherit;
  text-decoration: underline;
  cursor: pointer;
}

/* Linked-code list (decision #94) — one row per link. A parent holds one code
   per child; a single whole-device link renders as one row and reads exactly
   as the old single-code panel did. */
.wu-sync-links {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wu-sync-link {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
  padding: var(--space-sm) var(--space-md);
  background: var(--colour-bg);
  border: 1px dashed var(--colour-border);
  border-radius: var(--radius-card);
}
.wu-sync-link-who {
  flex: 1 1 auto;
  min-width: 0; /* the code + ✕ are fixed; the name yields, never the row */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-sm);
  color: var(--colour-text-primary);
}
.wu-sync-link-code {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--font-size-sm);
  letter-spacing: 0.08em;
  color: var(--colour-text-secondary);
  user-select: all;
}
.wu-sync-link-x {
  flex: none; /* a width is only a preference to flexbox — pin it (#90) */
  position: relative;
  width: 28px;
  height: 28px;
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  color: var(--colour-text-secondary);
  font-size: var(--font-size-sm);
  cursor: pointer;
}
/* 44px hit area under a 28px disc — same trick as the game ✕ (#88). */
.wu-sync-link-x::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.wu-sync-link-x:hover {
  background: var(--colour-border);
  color: var(--colour-danger);
}

/* 🔁 Rotate — a new code for this link (decision #68). Same 28px disc + 44px
   hit area as the ✕ beside it, and the MARGINS are load-bearing rather than
   decorative: two 28px controls each carrying a 44px pseudo hit area do not
   overlap only when their centres are ≥44px apart, i.e. with a 16px gap. The
   row's own gap is 8px, so each side adds 8px. Overlapping hit areas mean one
   button silently steals the other's taps — the trap #100 avoided by choosing
   the chip row's gap deliberately, and the one control here that must never be
   hit by accident is this one. */
.wu-sync-link-rot {
  flex: none; /* a width is only a preference to flexbox — pin it (#90) */
  position: relative;
  width: 28px;
  height: 28px;
  margin: 0 var(--space-sm);
  display: grid;
  place-items: center;
  background: none;
  border: none;
  border-radius: 50%;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.wu-sync-link-rot::after {
  content: "";
  position: absolute;
  inset: 50% auto auto 50%;
  width: 44px;
  height: 44px;
  transform: translate(-50%, -50%);
}
.wu-sync-link-rot:hover { background: var(--colour-border); }

/* A rotation that re-keyed but could not wipe the old copy. WEIGHT, never a
   warm colour: every accent in this palette measures under the 4.5:1 body-text
   floor on a light surface (#121), and this is the one line on the screen that
   has to be read. ⚠️ carries the tone. */
.wu-sync-warn {
  color: var(--colour-text-primary);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
  line-height: var(--line-height-relaxed, 1.5);
  margin: 0;
}

.wu-sync-scope {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
}
.wu-sync-scope-label {
  font-size: var(--font-size-sm);
  color: var(--colour-text-secondary);
}
.wu-sync-scope-opts {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}
.wu-sync-scope-opt {
  min-height: 44px; /* tap target (#88–#90) */
  padding: var(--space-xs) var(--space-md);
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-pill);
  color: var(--colour-text-secondary);
  font: inherit;
  font-size: var(--font-size-sm);
  cursor: pointer;
}
.wu-sync-scope-opt.wu-on {
  border-color: var(--colour-accent);
  color: var(--colour-text-primary);
  font-weight: var(--font-weight-bold);
}
.wu-sync-hint {
  margin: 0;
  font-size: var(--font-size-sm);
  line-height: 1.45;
  color: var(--colour-text-secondary);
}

.wu-prof-pick {
  display: flex;
  align-items: center;
  justify-content: center;
}

.wu-prof-swatch {
  width: 28px;
  height: 28px;
  border-radius: 50%;
  border: 2px solid var(--colour-surface);
  box-shadow: 0 0 0 1px var(--colour-border);
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}

/* Avatar disc in the profile switcher rows */
.wu-prof-av {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 50%;
  margin-right: var(--space-sm);
  flex: none;
  font-size: 17px;
  line-height: 1;
  color: #fff;
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
}

/* ── The avatar sheet's two halves (v477) ────────────────────────────────
   WHO you are (the preview, your name, your stars, and the Face / Colour /
   Frame tabs under them — owner) and what you PICK (the tiles). Stacked, both
   wrappers are `display: contents`, so the sheet lays out exactly as it always
   has: the tabs are the last thing in WHO and the first thing above the tiles.

   Two columns where height is short and width is not (owner, 2026-09-30:
   "slightly cropped on the tablet view … on the face tab only"). The Faces
   tab is the tallest — 5 rows of tiles against 3 for Colours and 1 for
   Frames — and stacked it measured 744px of content in a 720px sheet at
   1024×768, so its bottom row sat behind a scroll. A tablet browser with its
   address bar showing loses more. Beside each other the halves need ~555px,
   and the TILES stay the same size: this trades width, which a landscape
   screen has spare, for height, which it does not — the same trade as the
   games rail (#88), the two-column drills (#172) and the Grid (#180).
   840px = the ~744px stacked content + the sheet's 2 × 24px margin, rounded
   up so a small addition to the sheet cannot silently re-open the crop. */
.wu-av-who,
.wu-av-pick { display: contents; }
@media (min-width: 700px) and (max-height: 840px) {
  .wu-av-sheet {
    display: grid;
    grid-template-columns: minmax(0, 1fr) minmax(0, 380px);
    column-gap: var(--space-xl);
    align-items: center;
    width: min(720px, calc(100% - var(--space-lg)));
  }
  .wu-av-who,
  .wu-av-pick {
    display: flex;
    flex-direction: column;
    align-items: center;
    min-width: 0;
  }
  .wu-av-who { gap: var(--space-sm); text-align: center; }
  .wu-av-pick { gap: var(--space-sm); }
  .wu-av-pick > * { width: 100%; }
  /* The tabs STACK under the stars (owner). Side by side they sat at the top
     of the tile column, where the ✓ lives, and measured 12px of overlap with
     the Frame tab at 1024×768. flex:none because `.wu-av-tab { flex: 1 }` is a
     row rule — in a column it would stretch each tab to share a height. */
  .wu-av-who .wu-av-tabs {
    flex-direction: column;
    width: min(200px, 100%);
    margin: var(--space-sm) auto 0;
  }
  .wu-av-who .wu-av-tab { flex: none; }
}

/* Avatar picker grid (child Settings → Avatar) */
.wu-av-grid {
  display: grid;
  /* 5 columns — 24 avatars + the initial tile = a clean 5×5 */
  grid-template-columns: repeat(5, 1fr);
  gap: var(--space-sm);
  width: min(380px, 100%);
  margin: var(--space-sm) auto 0;
}
.wu-av-opt {
  position: relative;
  aspect-ratio: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 26px;
  background: var(--colour-surface);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-card);
  cursor: pointer;
}
.wu-av-initial {
  font-size: var(--font-size-lg);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-secondary);
}
.wu-av-opt:hover {
  border-color: var(--colour-accent);
}
.wu-av-opt.wu-av-on {
  border-color: var(--colour-accent);
  background: color-mix(in srgb, var(--colour-accent) 12%, var(--colour-surface));
}
/* Locked avatar — dimmed with a ⭐ price badge; affordable ones glow gently. */
.wu-av-locked {
  filter: grayscale(0.7);
  opacity: 0.55;
}
.wu-av-locked.wu-av-afford {
  filter: none;
  opacity: 1;
  border-style: dashed;
  border-color: color-mix(in srgb, var(--colour-warning) 60%, var(--colour-border));
}
.wu-av-price {
  position: absolute;
  bottom: -6px;
  right: -4px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-pill);
  padding: 0 5px;
  font-size: 11px;
  font-family: var(--font-mono);
  line-height: 1.5;
  color: var(--colour-text-secondary);
}

/* ── Avatar picker: three tabs (#126) ──────────────────────────────────
   Face / Colour / Frame. Rows are ≥44px because this is a child-facing
   picker and the tap-target floor (#88-#90) applies to it like everything
   else. */
.wu-av-tabs {
  display: flex;
  gap: var(--space-xs);
  width: min(380px, 100%);
  margin: 0 auto var(--space-xs);
}
.wu-av-tab {
  flex: 1;
  min-height: 44px;
  padding: 0 var(--space-xs);
  border: 2px solid var(--colour-border);
  border-radius: var(--radius-pill);
  background: var(--colour-surface);
  color: var(--colour-text-secondary);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  font-size: var(--font-size-sm);
  cursor: pointer;
  white-space: nowrap;
}
.wu-av-tab-on {
  border-color: var(--colour-accent);
  color: var(--colour-text-primary);
  background: color-mix(in srgb, var(--colour-accent) 12%, var(--colour-surface));
}
/* A colour chip fills its tile; a frame sample is a real mini avatar. */
.wu-av-chip {
  flex: none;
  width: 68%;
  height: auto;
  aspect-ratio: 1;
  border-radius: 50%;
  box-shadow: inset 0 0 0 1px rgba(43, 41, 38, 0.12);
}
.wu-av-fsample {
  /* Smaller than a colour chip on purpose: the ⬡ Dots frame is an OUTLINE
     offset 3px outside the disc, so the tile has to leave room for it or it
     clips the one thing the sample exists to show.

     flex:none + aspect-ratio, not two percentages — a flex item's width is
     only a PREFERENCE (#90), and letting it shrink while the height held
     turned every disc into an oval. */
  flex: none;
  width: 68%;
  height: auto;
  aspect-ratio: 1;
  display: grid;
  place-items: center;
  font-size: 15px;
  line-height: 1;
  color: #fff;
}
/* Locked FACES grey out and stay recognisable. Locked COLOURS and FRAMES
   must NOT — greyscale is exactly the information those two tabs are
   selling, and "you could have this" motivates nothing if the this is
   hidden. They dim instead. */
.wu-av-swatch.wu-av-locked,
.wu-av-frame.wu-av-locked {
  filter: none;
  opacity: 0.5;
}
.wu-av-swatch.wu-av-locked.wu-av-afford,
.wu-av-frame.wu-av-locked.wu-av-afford {
  opacity: 1;
}

.wu-av-credits {
  text-align: center;
  margin: 0 0 var(--space-xs);
  font-family: var(--font-display);
  font-weight: var(--font-weight-bold);
  color: var(--colour-text-primary);
}
.wu-av-star {
  font-size: 1.1em;
}

.wu-prof-actions {
  display: flex;
  gap: var(--space-xs);
  flex: none;
}

.wu-prof-actions button,
.wu-prof-add {
  padding: var(--space-xs) var(--space-sm);
  min-height: 36px;
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-button);
  color: var(--colour-text-primary);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  cursor: pointer;
}

.wu-prof-actions button:hover,
.wu-prof-add:hover {
  border-color: var(--colour-accent);
}

.wu-prof-input {
  flex: 1;
  min-height: 36px;
  padding: var(--space-xs) var(--space-sm);
  background: var(--colour-surface);
  border: 1px solid var(--colour-border);
  border-radius: var(--radius-button);
  font-size: var(--font-size-sm);
  font-family: var(--font-body);
  color: var(--colour-text-primary);
}