/* 내 계정 + 워크스페이스 관리 화면(account / manage-workspace -- 두 화면이
 * renderWorkspaceFacts 등 렌더러를 공유하는 한 모듈이다): .account-*,
 * .workspace-danger-zone, .workspace-facts, .workspace-switch-*, 그리고 계정
 * 화면으로 옮겨 온 플랜 카드(.overview-plan).
 *
 * 순서 제약: 아래 .account-overview p 규칙의 선택자 목록에 .section-head p 가
 * 함께 묶여 있고, staged.css 의 .test-console p 규칙이 같은 특이도로 이를
 * 덮어쓴다(13px). 이 파일은 반드시 staged.css 보다 먼저 링크되어야 한다. */

.account-shell {
  display: grid;
  gap: 14px;
}

/* 대시보드·모니터링의 .panel(css/dashboard.css)과 같은 카드다. 이 화면의 마크업은
 * .panel 클래스를 달지 않으므로(계정 카드는 .account-panel 하나로 렌더러 세 곳이
 * 공유한다) 규칙을 물려받는 대신 같은 토큰을 읽는다 -- 예전에는 8px 모서리와
 * 손으로 적은 그림자로 같은 값을 다시 써서, 계정 화면의 카드가 옆 화면의 카드보다
 * 한 단계 각지고 한 단계 짙었다. 여백까지 .panel과 같은 20/22로 맞춘다. */
.account-panel {
  min-width: 0;
  border: 1px solid var(--line);
  border-radius: var(--panel-radius);
  background: var(--surface);
  padding: 20px 22px;
  box-shadow: var(--panel-shadow);
}

/* Archiving a workspace cannot be reversed from the product, so the panel that offers it reads
   as a warning rather than as one more settings card. */
.workspace-danger-zone {
  border-color: rgba(197, 48, 48, .32);
  background: rgba(197, 48, 48, .04);
}

.workspace-danger-zone .section-head h2 { color: #9b2c2c; }

.account-overview {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 18px;
}

.account-overview small,
.account-current-workspace span {
  color: var(--brand-dark);
  font-size: var(--fs-2);
  font-weight: 800;
}

.account-overview h2 {
  margin: 5px 0;
  font-size: var(--fs-6);
}

.account-current-workspace small,
.workspace-switch-row small {
  color: var(--muted);
  font-size: var(--fs-3);
}
/* U-6: these three are real descriptive paragraphs (see the comment below on
 * why they render only when they have something to say), not captions. */
.account-overview p,
.workspace-switch-row p,
.section-head p {
  color: var(--text);
  font-size: var(--fs-3);
}

/* 설명은 할 말이 있을 때만 자리를 차지한다. 질문 확인 패널처럼 비었다가 채워지는
   설명이 있어서, 렌더 시점에 지우는 대신 빈 동안만 접는다. */
.section-head p:empty {
  display: none;
}

/* 설명은 할 말이 있을 때만 자리를 차지한다. 질문 확인 패널처럼 비었다가 채워지는
   설명이 있어서, 렌더 시점에 지우는 대신 빈 동안만 접는다. */
.section-head p:empty {
  display: none;
}

.account-meta {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

.account-meta-email {
  min-width: 0;
  overflow-wrap: anywhere;
}

.account-meta-role {
  padding: 2px 7px;
  border-radius: 999px;
  color: var(--brand-dark);
  background: var(--brand-soft);
  font-size: var(--fs-1);
  font-weight: 800;
  white-space: nowrap;
}

/* 패널 안의 카드 -- 반경 계단의 한 단계 안쪽(css/tokens.css). */
.account-current-workspace {
  min-width: min(320px, 100%);
  display: grid;
  gap: 7px;
  padding: 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface-muted);
}

.account-current-workspace b {
  font-size: var(--fs-5);
}

.workspace-facts {
  min-width: 0;
  display: flex;
  flex-wrap: wrap;
  gap: 6px 10px;
}

.workspace-facts span {
  min-width: 0;
  color: var(--muted);
  font-size: var(--fs-2);
}

.workspace-facts b {
  margin-right: 4px;
  color: var(--muted-strong);
  font-size: var(--fs-2);
}

.workspace-switch-list {
  display: grid;
  gap: 8px;
}

.workspace-switch-row {
  min-width: 0;
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 12px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: #fff;
}

.workspace-switch-row.current {
  border-color: rgba(10, 189, 163, .36);
  background: var(--brand-soft);
}

.workspace-switch-row h3 {
  margin: 0 0 4px;
  font-size: var(--fs-5);
}

.workspace-switch-row p {
  margin: 5px 0 0;
}

.workspace-switch-head {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
}
.workspace-switch-head h2 { margin: 0; }

.workspace-switch-actions {
  display: grid;
  gap: 7px;
}

.workspace-switch-row button,
.workspace-switch-head button {
  flex: 0 0 auto;
  min-width: 116px;
}

.account-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.overview-plan {
  padding: 14px 16px;
  background: var(--surface-muted);
  box-shadow: none;
}

.overview-plan strong {
  display: block;
  margin: 7px 0 4px;
  font-size: var(--fs-6);
  font-weight: 700;
  line-height: 1.35;
  overflow-wrap: break-word;
  word-break: keep-all;
}

.overview-plan span,
.overview-plan em {
  display: block;
  color: var(--muted);
  font-style: normal;
  font-size: var(--fs-3);
  overflow-wrap: break-word;
  word-break: keep-all;
}