/* =============================================================================
   Right panel layout v13 — crown line gap = --rp-gap from System card.
   Cards content-sized; Social=System row rhythm; short screens scale via --rp-s.
   ============================================================================= */

#rightPanel.right-panel {
  /* Master scale: one knob for short viewports — everything multiplies by this */
  --rp-s: 1;
  /* Inter-card gap ~⅓ tighter than v11 */
  --rp-gap: calc(clamp(2px, 0.35vh, 5px) * var(--rp-s));
  --rp-pad-y: calc(clamp(3px, 0.4vh, 6px) * var(--rp-s));
  --rp-pad-x: 8px;
  --rp-pad-b: calc(clamp(6px, 0.7vh, 10px) * var(--rp-s));
  --rp-row-h: calc(clamp(17px, 2vh, 23px) * var(--rp-s));
  --rp-row-gap: calc(clamp(1px, 0.25vh, 3px) * var(--rp-s));
  --rp-title-gap: calc(2px * var(--rp-s));
  --rp-qa-btn-h: calc(clamp(30px, 3.35vh, 38px) * var(--rp-s));
  --rp-qa-gap: var(--rp-row-gap);
  --rp-qa-pad-t: calc(clamp(3px, 0.4vh, 6px) * var(--rp-s));
  --rp-qa-pad-b: calc(clamp(6px, 0.7vh, 10px) * var(--rp-s));
  --rp-qa-pad-x: 8px;
  --rp-qa-icon: calc(clamp(13px, 1.6vh, 17px) * var(--rp-s));
  --rp-qa-font: calc(clamp(8.5px, 0.95vh, 11px) * var(--rp-s));
  --rp-header-pad-b: calc(clamp(3px, 0.4vh, 6px) * var(--rp-s));
  --rp-panel-pad: calc(clamp(8px, 1vh, 12px) * var(--rp-s));

  display: flex !important;
  flex-direction: column !important;
  gap: var(--rp-gap) !important;
  /* Fixed gaps between cards — do NOT inflate with space-between */
  justify-content: flex-start !important;
  height: 100% !important;
  max-height: 100% !important;
  min-height: 0 !important;
  padding: var(--rp-panel-pad) !important;
  padding-bottom: max(var(--rp-panel-pad), env(safe-area-inset-bottom, 0px)) !important;
  overflow: hidden !important;
  box-sizing: border-box !important;
}

/* Flatten wrappers → equal gaps between every card */
#rightPanel > .profile-middle,
#rightPanel > .profile-middle > .profile-nav,
#rightPanel > .profile-middle > .profile-body {
  display: contents !important;
}

#rightPanel > .profile-header {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
  padding-bottom: var(--rp-header-pad-b) !important;
  min-height: 0 !important;
  overflow: hidden !important;
}

#rightPanel > .profile-legal-stack {
  /* Flatten so crown + credit are panel flex children */
  display: contents !important;
}

#rightPanel > .profile-legal-stack .profile-nav-footer-credit {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  /* Stay under crown line — do not push to panel bottom */
  margin-top: 0 !important;
  margin-bottom: 0 !important;
  margin-left: 0 !important;
  margin-right: 0 !important;
  padding: 1px 4px 2px !important;
}

#rightPanel > .profile-legal-stack .profile-legal-lines {
  gap: 0 !important;
}

#rightPanel > .profile-legal-stack .profile-legal-line1,
#rightPanel > .profile-legal-stack .profile-legal-line-by,
#rightPanel > .profile-legal-stack .profile-legal-line2 {
  line-height: 1.15 !important;
}

#rightPanel > .profile-legal-stack .profile-legal-line3 {
  margin-top: 0 !important;
  line-height: 1.1 !important;
}

/*
  Crown line is a flex sibling after System → distance = --rp-gap (same as between cards).
*/
#rightPanel > .profile-legal-stack .panel-crown-anchor {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  margin: 0 !important;
}

/*
  ALL content cards: height = content only.
  Do NOT flex-grow — that was stretching System rows and crushing Quick Actions.
*/
#rightPanel .profile-nav-section--social,
#rightPanel .profile-nav-section--travel,
#rightPanel .travel-stats-block,
#rightPanel > .profile-nav-section--system,
#rightPanel #quickActions.profile-block,
#rightPanel #quickActions {
  flex: 0 0 auto !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: fit-content !important;
  max-height: none !important;
  min-height: 0 !important;
  padding: var(--rp-pad-y) var(--rp-pad-x) var(--rp-pad-b) !important;
  margin: 0 !important;
  overflow: visible !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  gap: 0 !important;
  box-sizing: border-box !important;
}

#rightPanel #quickActions.profile-block,
#rightPanel #quickActions {
  padding: var(--rp-qa-pad-t) var(--rp-qa-pad-x) var(--rp-qa-pad-b) !important;
}

#rightPanel .profile-nav-section--social .profile-nav-title,
#rightPanel .profile-nav-section--travel .profile-nav-title,
#rightPanel > .profile-nav-section--system .profile-nav-title,
#rightPanel .travel-stats-block .profile-caption,
#rightPanel #quickActions .profile-caption {
  flex: 0 0 auto !important;
  margin: 0 0 var(--rp-title-gap) !important;
  padding: 0 !important;
}

/*
  SAME list rhythm for Social / Travel / System / Stats:
  fixed row height + fixed gap, flex-start (NO space-between stretch).
*/
#rightPanel .profile-nav-section--social .profile-nav-list,
#rightPanel .profile-nav-section--travel .profile-nav-list,
#rightPanel > .profile-nav-section--system .profile-nav-list,
#rightPanel .travel-stats-block .profile-list {
  flex: 0 0 auto !important;
  height: auto !important;
  min-height: 0 !important;
  max-height: none !important;
  margin: 0 !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  justify-content: flex-start !important;
  align-content: flex-start !important;
  gap: var(--rp-row-gap) !important;
  row-gap: var(--rp-row-gap) !important;
  overflow: visible !important;
}

#rightPanel .profile-nav-section--social .profile-nav-item,
#rightPanel .profile-nav-section--travel .profile-nav-item,
#rightPanel > .profile-nav-section--system .profile-nav-item,
#rightPanel .travel-stats-block .profile-list li {
  flex: 0 0 var(--rp-row-h) !important;
  flex-grow: 0 !important;
  flex-shrink: 0 !important;
  height: var(--rp-row-h) !important;
  min-height: var(--rp-row-h) !important;
  max-height: var(--rp-row-h) !important;
  margin: 0 !important;
  padding: 0 6px !important;
  box-sizing: border-box !important;
  line-height: 1.15 !important;
  overflow: visible !important;
  align-items: center !important;
}

#rightPanel #travelAchievementRow.travel-achievement-row,
#rightPanel #travelRankRow.travel-rank-row {
  padding: 0 6px !important;
}

#rightPanel .travel-stats-block .travel-achievement-strip {
  font-size: inherit !important;
  line-height: 1.15 !important;
  max-width: 100% !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

#rightPanel > .profile-nav-section--system .profile-nav-item i {
  font-size: calc(var(--rp-row-h) * 0.7) !important;
  width: 1.15em !important;
  line-height: 1 !important;
}

/* Quick Actions — 2·2·2·3 (same 4-row height as before; DNA joins Quiz+Notebook) */
#rightPanel #quickActions .quick-actions-grid {
  flex: 0 0 auto !important;
  min-height: calc(4 * var(--rp-qa-btn-h) + 3 * var(--rp-qa-gap)) !important;
  height: auto !important;
  width: 100% !important;
  display: grid !important;
  grid-template-columns: repeat(6, minmax(0, 1fr)) !important;
  grid-template-rows: repeat(4, var(--rp-qa-btn-h)) !important;
  gap: var(--rp-qa-gap) !important;
  align-content: start !important;
  overflow: visible !important;
  box-sizing: border-box !important;
}

#rightPanel #quickActions .quick-action-btn {
  grid-column: span 3 !important;
  box-sizing: border-box !important;
  width: 100% !important;
  height: var(--rp-qa-btn-h) !important;
  min-height: var(--rp-qa-btn-h) !important;
  max-height: var(--rp-qa-btn-h) !important;
  margin: 0 !important;
  padding: 4px 6px !important;
  gap: 6px !important;
  display: flex !important;
  align-items: center !important;
  overflow: hidden !important;
}

/* Last row: Quiz · Travel DNA · Notebook — three across */
#rightPanel #quickActions .quick-action-btn:nth-child(n + 7) {
  grid-column: span 2 !important;
}

#rightPanel #quickActions .quick-action-btn i {
  flex: 0 0 auto !important;
  width: var(--rp-qa-icon) !important;
  min-width: var(--rp-qa-icon) !important;
  font-size: var(--rp-qa-icon) !important;
  line-height: 1 !important;
  margin: 0 !important;
}

#rightPanel #quickActions .quick-action-btn span {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  font-size: var(--rp-qa-font) !important;
  line-height: 1.15 !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
  white-space: nowrap !important;
}

/* Proportional scale — entire menu, not one section */
@media (max-height: 899px) {
  #rightPanel.right-panel {
    --rp-s: 0.92;
  }
}

@media (max-height: 800px) {
  #rightPanel.right-panel {
    --rp-s: 0.86;
  }
}

@media (max-height: 720px) {
  #rightPanel.right-panel {
    --rp-s: 0.8;
  }
}

@media (max-height: 640px) {
  #rightPanel.right-panel {
    --rp-s: 0.74;
  }
}

/* Short screens: keep media thumbs within scaled panels (п.25) */
@media (max-height: 899px) {
  .mp-media-thumb img {
    height: clamp(68px, 11.5vh, 104px) !important;
    max-height: none !important;
  }
  .tf-post-media img {
    max-height: min(78vh, 620px) !important;
  }
}

@media (max-height: 640px) {
  .mp-media-thumb img {
    height: clamp(56px, 10vh, 84px) !important;
  }
  .tf-post-media img {
    max-height: min(68vh, 480px) !important;
  }
}

.left-panel .status-bar {
  flex: 0 0 auto !important;
  flex-shrink: 0 !important;
  min-height: auto !important;
  overflow: visible !important;
}

.left-panel .status-left {
  display: flex !important;
  flex-direction: column !important;
  align-items: flex-start !important;
  gap: 2px !important;
}

.left-panel .status-clock,
.left-panel .status-users,
.left-panel .status-indicator {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
  height: auto !important;
  max-height: none !important;
  overflow: visible !important;
  white-space: normal !important;
  font-size: var(--font-xs, 10px) !important;
  line-height: 1.25 !important;
}