/* Workspace shell + cross-view shared rules. The per-view rules that used to
 * live here moved to overview/account/members/models/projects/staged/monitoring
 * .css (linked right after this file, in the order the rules appeared here --
 * the cascade depends on it). What stays:
 * - the page title bar (.title, #view-section) and .settings-subnav, drawn on
 *   every workspace view;
 * - .form-error.success and .form-hint.error, status modifiers toggled by
 *   panels on several views;
 * - .section-head / .section-head.compact and the shared card base rule
 *   (.overview-metric/.overview-plan) -- one selector list spanning the projects
 *   and account views, so it cannot follow either file; same for the
 *   .overview-metric/.overview-plan small rule;
 * - .empty.* view-state rules used by every view's loading/failed states.
 *
 * The rules that had lost their renderer (.onboarding-*, .overview-shell/-main/
 * -side/-actions, .overview-action, .follow-up-tools) were removed in the
 * 2026-08 cleanup; git history has them if the markup ever comes back.
 * .plan-panel joined them: renderPlanModules(js/views/account.js) built the
 * markup, but app.js only ever destructured the name -- nothing called it, so
 * the panel had not rendered for some time. The renderer, its two injected
 * helpers, and this rule went together; .module-grid stays because the ops
 * report still draws it. */

.title {
  display: flex;
  justify-content: space-between;
  align-items: end;
  gap: 18px;
  padding: 46px 0 18px;
}

/* 제목 칸은 줄어들 수 있어야 하고, 오른쪽 컨트롤은 줄어들면 안 된다. flex 기본값이
 * min-width:auto라 긴 설명문이 제목 칸을 못 줄이게 붙들고, 밀려난 컨트롤이 대신
 * 찌그러진다 -- 상세 화면처럼 설명이 두 줄인 곳에서 `이 프로젝트 분석`이 글자마다
 * 줄바꿈되어 고정 높이 버튼 밖으로 흘러넘치던 것이 이것이다. */
.title > div:first-child { min-width: 0; }
.title p { max-width: 62ch; }

.title small {
  color: var(--muted-strong);
  font-family: monospace;
}

/* Names the nav section the highlighted header button refers to (질문 / AI 설정 live under 분석 설정). */
#view-section {
  display: block;
  color: var(--brand-dark);
  font-family: inherit;
  font-size: var(--fs-2);
  font-weight: 800;
}

.title > div > button,
.title > button {
  flex: 0 0 auto;
  white-space: nowrap;
}

.title h1 {
  margin: 6px 0 8px;
  font-size: var(--fs-6);
  line-height: 1.14;
}

.title p {
  margin: 0;
  /* U-6: this is #view-copy -- the page-level description every workspace
   * view shows under its title (see js/views/dashboard.js's comment on
   * renderVisibilityDetail for how much the app leans on it being read). */
  color: var(--text);
  line-height: 1.55;
  overflow-wrap: break-word;
  word-break: keep-all;
  /* textContent로 채워지므로 <br>는 못 쓴다 -- meta 카피 문자열에 실제 개행(\n)이
   * 있으면 그 자리에서 줄이 바뀌게 한다(그 외엔 평소처럼 자동 줄바꿈). */
  white-space: pre-line;
}

.settings-subnav {
  width: fit-content;
  margin: 0 0 14px;
  padding: 4px;
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  border: 1px solid var(--line);
  border-radius: var(--row-radius);
  background: var(--surface);
}

.settings-subnav a {
  min-height: 34px;
  padding: 7px 12px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid transparent;
  /* 바깥 상자에서 계산한 값이지 고른 값이 아니다: 테두리 1px과 안쪽 여백 4px을
   * 빼야 두 모서리가 같은 곡선 위에 앉는다. 안쪽을 --control-radius로 올리면
   * 선택된 탭의 모서리가 바깥 모서리를 2px 밀고 나간다. */
  border-radius: calc(var(--row-radius) - 5px);
  color: var(--muted);
  font-weight: 800;
  text-decoration: none;
}

.settings-subnav a:hover {
  color: var(--text);
  background: var(--surface-muted);
}

.settings-subnav a.active {
  color: var(--brand-dark);
  border-color: rgba(10, 189, 163, .35);
  background: var(--brand-soft);
}

.form-error.success {
  color: var(--brand-dark);
}

/* 패널 안에 들어가는 카드 -- 한 단계 안쪽 반경. 그림자도 패널과 같은 토큰을 쓴다:
 * 22px 번짐에 .055 농도라는 별도 값은 패널 그림자와 구별되지 않을 만큼 가까웠고,
 * 팔레트가 움직일 때 따라 움직이지 않는 숫자만 하나 더 남겼다. */
.overview-metric,
.overview-plan {
  border: 1px solid var(--line);
  border-radius: var(--card-radius);
  background: var(--surface);
  box-shadow: var(--panel-shadow);
}

.section-head.compact {
  margin-bottom: 14px;
}

.overview-metric small,
.overview-plan small {
  color: var(--muted);
  font-size: var(--fs-3);
}

.form-hint.error {
  color: var(--danger);
}

.section-head {
  margin-bottom: 10px;
}

/* 패널 제목은 콘솔 전체에서 한 크기다 -- 대시보드·모니터링·어드민이 쓰는
 * .panel-head h2와 같은 18px. 여기서는 크기를 아예 정하지 않아 브라우저 기본값
 * (1.5em = 24px)으로 서 있었고, 그 결과 같은 "패널 하나의 제목"이 계정·멤버·분석
 * 실행 화면에서만 한 단계 크게 읽혔다. 크기를 안 적은 것이 곧 다른 크기를 고른
 * 것이었던 자리다.
 *
 * 계정 화면 맨 위의 이름(.account-overview h2, 24px)은 이 선택자에 걸리지 않는다 --
 * .section-head 안에 있지 않기 때문이고, 그래야 맞다: 그건 패널 제목이 아니라 지금
 * 로그인한 사람의 이름, 즉 그 화면의 주인공이다. */
.section-head h2 {
  font-size: var(--fs-5);
  line-height: 1.25;
  letter-spacing: -.02em;
}

.empty.compact {
  padding: 35px 20px;
}

.empty.view-state {
  min-height: 112px;
  display: grid;
  place-items: center;
}

.empty.view-state.loading {
  color: var(--muted);
  background: var(--surface-muted);
}

.empty.view-state.insufficient_data,
.empty.view-state.unavailable,
.empty.view-state.not_applicable {
  color: var(--muted);
}

.empty.error {
  margin-bottom: 12px;
  color: var(--danger);
  border-color: #fed7aa;
  background: #fff7ed;
}


/* 실행 중인 분석 배너. 화면 제목과 본문 사이에 한 줄로 앉아, 어느 화면에 있든
   지금 도는 런이 몇 건까지 왔는지 말한다. */
.active-run-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 14px;
  border: 1px solid var(--brand);
  border-radius: var(--row-radius);
  background: var(--brand-soft);
  padding: 10px 14px;
  color: var(--muted-strong);
  font-size: var(--fs-2);
}

.active-run-banner[data-status="failed"],
.active-run-banner[data-status="cancelled"],
.active-run-banner[data-status="stalled"] {
  border-color: var(--line-strong);
  background: var(--surface-muted);
}

/* 수집 중은 진행 중이되 몇 시간을 간다. 실행 중과 같은 세기로 하루를 서 있으면
   배너가 경보처럼 읽히므로, 테두리는 그대로 두고 바탕만 낮춘다. */
.active-run-banner[data-status="collecting"] {
  background: var(--surface-soft);
}

.active-run-line {
  display: flex;
  align-items: center;
  flex: 1;
  flex-wrap: wrap;
  gap: 10px;
  min-width: 0;
}

.active-run-line b {
  color: var(--text);
  font-weight: 600;
}

.active-run-bar {
  display: block;
  flex: 1 1 120px;
  height: 7px;
  min-width: 90px;
  max-width: 260px;
  overflow: hidden;
  border-radius: 999px;
  background: var(--surface);
  contain: layout;
}

.active-run-bar i {
  display: block;
  height: 100%;
  border-radius: inherit;
  background: var(--brand);
  transition: width .4s ease;
}

/* 실행 중인 회차의 질문 목록(스냅샷 질문 검토 · 질문 분석 탭 공용). 결과가 아직 없는
   목록이라 표가 아니라 번호 매긴 줄로 둔다 -- 빈 노출률 칸이 0%로 읽히지 않게.
   번호는 마커가 아니라 카운터로 그린다: li를 flex로 두면 display:list-item이 풀려
   마커가 사라지고, 마커를 살리려고 flex를 포기하면 메타(영역·AI 수)를 오른쪽 끝에
   정렬할 방법이 없다. */
.active-run-question-list {
  display: flex;
  flex-direction: column;
  margin: 12px 0 0;
  padding: 0;
  gap: 8px;
  list-style: none;
  counter-reset: active-run-question;
  /* 빈 상태 카드(.dashboard-empty)는 가운데 정렬이라 그대로 두면 질문이 문단처럼 흩어진다. */
  text-align: left;
}

.active-run-question-list li {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 10px;
  counter-increment: active-run-question;
  color: var(--text);
  font-size: var(--fs-2);
  line-height: 1.5;
}

.active-run-question-list li::before {
  flex: 0 0 auto;
  content: counter(active-run-question) ".";
  color: var(--muted);
  font-variant-numeric: tabular-nums;
}

.active-run-question-text {
  flex: 1 1 260px;
  min-width: 0;
}

.active-run-question-meta {
  color: var(--muted);
  font-size: var(--fs-1);
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.active-run-line a {
  color: var(--brand-dark);
  font-weight: 600;
  text-decoration: underline;
}

.active-run-banner button[data-active-run-dismiss] {
  border: 0;
  border-radius: 999px;
  background: transparent;
  padding: 0 6px;
  color: var(--muted);
  font-size: var(--fs-5);
  line-height: 1;
  cursor: pointer;
}