/* ==========================================================================
   IRONITT v2 — Profile (js/settings.js renders it into #view-profile)
   --------------------------------------------------------------------------
   One reading column, like Home: who you are, your status, then four tabs
   (Look, Nav, Gear, Account) and the two ways out (notifications, all
   settings). Sections are a small title over their content; rows are a
   list with hairlines between them, never a box inside a box.
   ========================================================================== */

/* ---- Page -------------------------------------------------------------- */
.quick-hub-panel {
  position: static;
  display: flex;
  flex-direction: column;
  gap: 24px;
  width: 100%;
  max-width: 600px;
  max-height: none;
  margin: 0 auto;
  padding: 28px var(--space-sm) var(--space-2xl);
  background: none;
  border: 0;
  border-radius: 0;
  box-shadow: none;
  overflow: visible;
  z-index: auto;
  animation: none;
}

/* ---- Who you are ------------------------------------------------------- */
.qh-profile-card { display: flex; flex-direction: column; gap: 12px; }
.qh-profile-row { display: flex; align-items: center; gap: 16px; }
.qh-avatar {
  width: 72px;
  height: 72px;
  font-size: var(--font-size-lg);
  cursor: pointer;
}
/* The photo badge sits on the avatar's edge, not over the initial (owner, 2026-11-04). */
.qh-avatar { overflow: visible; }
.qh-avatar .profile-avatar-camera {
  right: -4px;
  bottom: -4px;
  width: 24px;
  height: 24px;
  font-size: 10px;
  border-width: 2px;
}
.qh-profile-meta { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.qh-name-row { display: flex; align-items: center; gap: 8px; min-width: 0; }
.qh-name {
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-xl);
  line-height: 1.2;
  font-weight: var(--font-weight-bold);
  letter-spacing: -0.02em;
}
.qh-tag-copy {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 26px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  color: var(--text-muted);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  transition: color var(--transition-fast), border-color var(--transition-fast);
}
.qh-tag-copy i { font-size: 10px; }
.qh-tag { font-size: inherit; line-height: 1; }
.qh-tag-copy:hover { color: var(--text-primary); border-color: var(--border-strong); }
.qh-stats {
  display: flex;
  align-items: center;
  gap: 12px;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  font-variant-numeric: tabular-nums;
}
.qh-stat { display: inline-flex; align-items: center; gap: 6px; }
.qh-stat i { font-size: 12px; color: var(--text-muted); }
.qh-stat-iron { color: var(--iron-gold); font-weight: var(--font-weight-semibold); }
.light-mode .qh-stat-iron { color: var(--iron-gold-deep); }
.qh-stat-sep { width: 3px; height: 3px; border-radius: var(--radius-round); background: var(--border-strong); }
.qh-profile-edit {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--radius-round);
  color: var(--text-muted);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.qh-profile-edit:hover { background: var(--bg-hover); color: var(--text-primary); }
.qh-bio { color: var(--text-secondary); font-size: var(--font-size-sm); line-height: var(--leading-normal); }
.qh-bio:empty { display: none; }

/* ---- Status ------------------------------------------------------------ */
.qh-status-row { display: flex; flex-direction: column; gap: 10px; }
.qh-status-pills { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
/* Each status is a coloured dot; the chosen one opens into a pill with its
   name: the name's grid column grows from 0fr to 1fr while the old pill
   closes, so both move at once (220ms, like the chats drawer's columns).
   Title + aria-label name the others on hover and for screen readers. */
.qh-status-pill {
  display: inline-grid;
  grid-template-columns: 10px 0fr;
  align-items: center;
  column-gap: 0;
  height: 32px;
  min-width: 32px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  border: 1px solid transparent;
  color: var(--text-secondary);
  font-size: var(--font-size-sm);
  transition: grid-template-columns 220ms var(--island-ease), column-gap 220ms var(--island-ease),
    padding 220ms var(--island-ease), background-color var(--transition-fast),
    border-color var(--transition-fast), color var(--transition-fast);
}
.qh-status-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--dot);
  transition: transform 200ms var(--island-ease);
}
.qh-status-label {
  min-width: 0;
  overflow: hidden;
  white-space: nowrap;
  opacity: 0;
  transition: opacity 160ms ease;
}
.qh-status-pill:hover { background: var(--bg-hover); }
.qh-status-pill:hover .qh-status-dot { transform: scale(1.2); }
.qh-status-pill.active {
  grid-template-columns: 10px 1fr;
  column-gap: 8px;
  padding: 0 14px 0 12px;
  background: var(--bg-hover);
  border-color: var(--border-strong);
  color: var(--text-primary);
  font-weight: var(--font-weight-semibold);
}
.qh-status-pill.active .qh-status-dot { transform: scale(1.2); }
.qh-status-pill.active .qh-status-label { opacity: 1; transition-delay: 60ms; }
@media (prefers-reduced-motion: reduce) {
  .qh-status-pill, .qh-status-dot, .qh-status-label { transition: none; }
}
.qh-custom-status { display: flex; align-items: center; gap: 6px; }
.qh-custom-emoji,
.qh-custom-clear {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border-radius: var(--radius-round);
  color: var(--text-muted);
  font-size: var(--font-size-md);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.qh-custom-emoji:hover, .qh-custom-clear:hover { background: var(--bg-hover); color: var(--text-primary); }
#qh-custom-input { flex: 1; min-width: 0; height: 40px; border-radius: var(--radius-pill); padding: 0 16px; }
.qh-clear-after { flex: none; max-width: 96px; height: 40px; border-radius: var(--radius-pill); }

/* ---- Tabs -------------------------------------------------------------- */
/* js/settings.js moves .qh-tab-indicator to the active tab (offsetLeft - 4,
   so it sits on a 4px inset). */
.qh-tabs {
  position: relative;
  display: flex;
  padding: 4px;
  border-radius: var(--radius-pill);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.qh-tab-indicator {
  position: absolute;
  top: 4px;
  left: 4px;
  height: calc(100% - 8px);
  width: 0;
  border-radius: var(--radius-pill);
  background: var(--bg-hover);
}
.qh-tab {
  position: relative;
  z-index: 1;
  flex: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 36px;
  padding: 0 10px;
  border-radius: var(--radius-pill);
  color: var(--text-muted);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-medium);
  white-space: nowrap;
  transition: color var(--transition-fast);
}
.qh-tab i { font-size: 13px; }
.qh-tab:hover { color: var(--text-primary); }
.qh-tab.active { color: var(--text-primary); font-weight: var(--font-weight-semibold); pointer-events: none; }

/* ---- Tab body ---------------------------------------------------------- */
.qh-body { display: flex; flex-direction: column; gap: 28px; min-height: 0; }
.qh-content-exit { animation: qhContentOut 120ms ease forwards; }
.qh-content-enter { animation: qhContentIn 200ms cubic-bezier(0.22, 1, 0.36, 1) both; }
@keyframes qhContentOut { from { opacity: 1; transform: none; } to { opacity: 0; transform: translateY(-6px); } }
@keyframes qhContentIn { from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: none; } }

.qh-section { display: flex; flex-direction: column; gap: 12px; }
.qh-section-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.qh-section-title,
.cosmetic-section-label {
  display: flex;
  align-items: center;
  gap: 8px;
  font-family: var(--font-display);
  font-stretch: 125%;
  font-size: var(--font-size-2xs);
  line-height: 16px;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-secondary);
}
.qh-section-title::before,
.cosmetic-section-label::before {
  content: '';
  flex: none;
  width: 3px;
  height: 12px;
  border-radius: 2px;
  background: var(--accent-color);
}

/* Rows: settings rows and action rows share one list look. */
.qh-row,
.qh-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  min-height: 56px;
  padding: 10px 0;
  border-bottom: 1px solid var(--border-color);
  text-align: left;
}
.qh-section > .qh-row:last-child,
.qh-section > .qh-action-row:last-child { border-bottom: 0; }
.qh-action-row { color: var(--text-primary); transition: color var(--transition-fast); }
.qh-action-row > i:first-child { flex: none; width: 20px; text-align: center; color: var(--text-muted); font-size: 15px; }
.qh-action-row:hover .qh-action-label { color: var(--accent-color); }
.light-mode .qh-action-row:hover .qh-action-label { color: var(--accent-solid); }
.qh-row-text, .qh-action-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qh-row-label, .qh-action-label { font-size: var(--font-size-md); font-weight: var(--font-weight-medium); }
.qh-row-sub, .qh-action-sub { font-size: var(--font-size-sm); color: var(--text-muted); }
.qh-mono { font-variant-numeric: tabular-nums; letter-spacing: 0.02em; }
.qh-action-chevron { flex: none; color: var(--text-muted); font-size: 12px; }
.qh-action-danger .qh-action-label,
.qh-action-danger > i:first-child { color: var(--color-danger); }
.qh-action-danger:hover .qh-action-label { color: var(--color-danger); }

.qh-meta-strip { flex-direction: row; gap: var(--space-lg); }
.qh-meta-cell { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.qh-meta-key { font-size: var(--font-size-xs); color: var(--text-muted); }
.qh-meta-val { font-size: var(--font-size-sm); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- Look: themes ------------------------------------------------------ */
.qh-light-toggle {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 28px;
  padding: 0 12px;
  border-radius: var(--radius-pill);
  border: 1px solid var(--border-color);
  color: var(--text-secondary);
  font-size: var(--font-size-xs);
  transition: background-color var(--transition-fast), color var(--transition-fast);
}
.qh-light-toggle:hover:not(:disabled) { background: var(--bg-hover); color: var(--text-primary); }
.qh-theme-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.qh-theme {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
  height: 44px;
  padding: 0 12px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
  text-align: left;
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.qh-theme:hover { background: var(--bg-hover); }
.qh-theme.active { border-color: var(--accent-color); }
.qh-theme.locked { color: var(--text-muted); }
.qh-theme-dot { flex: none; width: 14px; height: 14px; border-radius: var(--radius-round); }
.qh-theme-dot.aether-star-host { display: inline-flex; align-items: center; justify-content: center; }
.qh-theme-dot.aether-star-host svg { width: 14px; height: 14px; }
.qh-theme-name { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.qh-theme-lock { font-size: 11px; color: var(--text-muted); }
.qh-theme-check { font-size: 12px; color: var(--accent-color); }

/* ---- Gear: cosmetic tiles (also used by full settings) ---------------- */
.cosmetic-section { display: flex; flex-direction: column; gap: 12px; }
.cosmetic-section-head { display: flex; align-items: center; justify-content: space-between; }
.cosmetic-section-count { font-size: var(--font-size-xs); color: var(--text-muted); }
.cosmetic-tile-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(84px, 1fr)); gap: 8px; }
.cosmetic-tile {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  min-width: 0;
  padding: 12px 6px 10px;
  border-radius: var(--radius-md);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  transition: background-color var(--transition-fast), border-color var(--transition-fast);
}
.cosmetic-tile:hover { background: var(--bg-hover); }
.cosmetic-tile.active { border-color: var(--accent-color); }
.cosmetic-tile-preview {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  border-radius: var(--radius-round);
  background: var(--bg-tertiary);
  color: var(--accent-color);
  font-size: 18px;
  overflow: visible;
}
.cosmetic-tile-preview.cosmetic-tile-none { background: transparent; border: 1px dashed var(--border-strong); color: var(--text-muted); }
.cosmetic-tile-preview.cosmetic-tile-namecolor { font-size: var(--font-size-md); font-weight: var(--font-weight-bold); color: var(--text-primary); }
.cosmetic-tile-name {
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--font-size-xs);
  color: var(--text-secondary);
}
.cosmetic-tile.active .cosmetic-tile-name { color: var(--text-primary); font-weight: var(--font-weight-semibold); }
.cosmetic-empty-hint { font-size: var(--font-size-sm); color: var(--text-muted); }

.frame-color-row { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 10px; }
.frame-color-label { font-size: var(--font-size-sm); color: var(--text-secondary); }
.frame-color-swatches { display: flex; flex-wrap: wrap; gap: 6px; }
.frame-color-swatch {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  padding: 3px;
  border-radius: var(--radius-round);
  border: 1px solid var(--border-color);
  transition: border-color var(--transition-fast);
}
.frame-color-swatch:hover { border-color: var(--border-strong); }
.frame-color-swatch.active { border-color: var(--accent-color); }
.frame-color-dot { width: 100%; height: 100%; border-radius: var(--radius-round); }

/* ---- Account: codes and invites --------------------------------------- */
.qh-rewards { display: flex; flex-direction: column; gap: 10px; }
.ic-promo-card {
  display: grid;
  grid-template-columns: 24px 1fr;
  gap: 4px 14px;
  padding: 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
}
.ic-promo-icon { padding-top: 2px; color: var(--accent-color); font-size: 16px; text-align: center; }
.light-mode .ic-promo-icon { color: var(--accent-solid); }
.ic-promo-body { min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ic-promo-title { font-weight: var(--font-weight-semibold); }
.ic-promo-desc { font-size: var(--font-size-sm); color: var(--text-secondary); line-height: var(--leading-normal); }
.ic-promo-form { grid-column: 2; display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-top: 8px; }
.ic-promo-input {
  flex: 1 1 160px;
  min-width: 0;
  height: 40px;
  padding: 0 16px;
  border-radius: var(--radius-pill);
  text-transform: uppercase;
  letter-spacing: 0.06em;
}
.ic-promo-btn {
  flex: none;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  height: 40px;
  padding: 0 18px;
  border-radius: var(--radius-pill);
  background: var(--accent-color);
  color: var(--accent-text);
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-semibold);
  transition: background-color var(--transition-fast);
}
.ic-promo-btn:hover { background: var(--accent-hover); }
.ic-promo-btn:disabled { opacity: 0.5; }
.ic-ref-code {
  display: inline-flex;
  align-items: center;
  height: 40px;
  padding: 0 14px;
  border-radius: var(--radius-pill);
  border: 1px dashed var(--border-strong);
  font-variant-numeric: tabular-nums;
  font-weight: var(--font-weight-semibold);
  letter-spacing: 0.08em;
}
.ic-ref-earned { font-size: var(--font-size-sm); color: var(--iron-gold); }
.light-mode .ic-ref-earned { color: var(--iron-gold-deep); }
.ic-ref-invites { display: flex; flex-direction: column; margin-top: 6px; }
.ic-ref-invite {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 8px 0;
  border-top: 1px solid var(--border-color);
  font-size: var(--font-size-sm);
}
.ic-ref-invite-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ic-ref-pill { display: inline-flex; align-items: center; gap: 5px; font-size: var(--font-size-xs); color: var(--text-muted); }
.ic-ref-pill--paid { color: var(--accent-color); }
.light-mode .ic-ref-pill--paid { color: var(--accent-solid); }

/* ---- The two ways out -------------------------------------------------- */
.qh-footer { display: flex; flex-direction: column; gap: 8px; }
.settings-open-full-btn {
  display: flex;
  align-items: center;
  gap: 12px;
  width: 100%;
  height: 52px;
  padding: 0 16px;
  border-radius: var(--radius-lg);
  background: var(--bg-secondary);
  border: 1px solid var(--border-color);
  font-weight: var(--font-weight-medium);
  text-align: left;
  transition: background-color var(--transition-fast);
}
.settings-open-full-btn:hover { background: var(--bg-hover); }
.settings-open-full-btn > i:first-child { width: 20px; text-align: center; color: var(--text-muted); }
.qh-notif-count { position: static; margin-left: auto; }

@media (max-width: 480px) {
  .quick-hub-panel { padding-top: var(--space-md); gap: 20px; }
  .qh-avatar { width: 60px; height: 60px; }
  .qh-name { font-size: var(--font-size-lg); }
  .qh-tab { gap: 6px; font-size: var(--font-size-xs); }
  .qh-meta-strip { flex-direction: column; gap: 10px; }
  .ic-promo-card { grid-template-columns: 1fr; }
  .ic-promo-icon { display: none; }
  .ic-promo-form { grid-column: 1; }
}
/* With unread notifications the count takes the free space; the arrow follows it. */
.qh-notif-count:not([style*="display:none"]):not([style*="display: none"]) + i { margin-left: 8px !important; }

/* ---- Desktop: two columns ---------------------------------------------- */
/* With room for it the page stops being a phone column in the middle of a
   wide screen: who you are, your status and the two ways out on the left,
   the tabs and their content on the right. Measured on the view itself, so
   an open chats column or side column is accounted for. */
#view-profile { container-type: inline-size; }
@container (min-width: 820px) {
  .quick-hub-panel {
    display: grid;
    grid-template-columns: minmax(280px, 340px) minmax(0, 1fr);
    grid-template-areas:
      "card   main"
      "status main"
      "footer main"
      ".      main";
    grid-template-rows: auto auto auto 1fr;
    align-items: start;
    column-gap: 48px;
    row-gap: 24px;
    max-width: 1100px;
    padding-left: var(--space-lg);
    padding-right: var(--space-lg);
  }
  .qh-profile-card { grid-area: card; }
  .qh-status-row { grid-area: status; }
  .qh-footer { grid-area: footer; }
  .qh-main { grid-area: main; display: flex; flex-direction: column; gap: 24px; min-width: 0; }
  /* A long name wraps in the narrow column instead of being cut short. */
  .qh-name { white-space: normal; overflow-wrap: anywhere; font-size: var(--font-size-lg); }
  .qh-name-row { flex-wrap: wrap; row-gap: 4px; }
  /* The custom-status field wraps under the dots in the narrow column. */
  .qh-custom-status { flex-wrap: wrap; }
  .qh-custom-status input { flex: 1 1 160px; min-width: 0; }
}
/* Below that width the wrapper is just a pass-through. */
@container (max-width: 819.98px) {
  .qh-main { display: contents; }
}

/* Desktop: the page sits in the middle of the screen instead of hugging its
   top. The tab area keeps a floor, so switching between the shorter tabs
   does not move the page; when it is taller than the screen the auto
   margins fall to 0 and it scrolls as before. */
@media (min-width: 769px) {
  #view-profile.active { display: flex; flex-direction: column; }
}
@container (min-width: 820px) {
  .quick-hub-panel { margin-block: auto; }
  .qh-main { min-height: 580px; }
}

/* The bio sits with the name: left-aligned, no old centred margin under it. */
.qh-bio.profile-bio { margin: 0; padding: 0; text-align: left; }

/* Phones: room for a frame's halo inside the page (it was cut at the left and
   top edges), and the developer badge shrinks to its icon so the name fits. */
@media (max-width: 480px) {
  .quick-hub-panel { padding-top: var(--space-lg); padding-left: var(--space-md); padding-right: var(--space-md); }
  .qh-name-row .developer-badge--label > span { display: none; }
  .qh-name-row .developer-badge.developer-badge--label { width: 24px; padding: 0; justify-content: center; }
}