/* 中文排版层级：在浅紫主题之上统一字号、行高、字重与放大后的布局空间。 */

@media screen {
  :root {
    --type-display: clamp(32px, 3vw, 40px);
    --type-page-title: clamp(30px, 2.7vw, 38px);
    --type-section-title: clamp(24px, 2.2vw, 30px);
    --type-card-title: 22px;
    --type-body: 13px;
    --type-control: 13px;
    --type-small: 12px;
    --type-meta: 11px;
    --leading-tight: 1.25;
    --leading-body: 1.65;
    --leading-compact: 1.45;
  }

  body {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  button,
  input,
  textarea,
  select {
    font-size: var(--type-control);
  }

  .brand-lockup strong {
    font-size: 22px;
    line-height: var(--leading-tight);
  }

  .brand-lockup small {
    margin-top: 6px;
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  .document-code {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .nav-item {
    font-size: 13px;
    line-height: var(--leading-compact);
  }

  .nav-index {
    font-size: var(--type-meta);
  }

  .policy-note .eyebrow,
  .policy-note p,
  .local-badge {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .policy-note b {
    font-size: 14px;
  }

  .topbar {
    min-height: 112px;
  }

  .eyebrow {
    margin-bottom: 8px;
    font-size: var(--type-meta);
    line-height: 1.35;
    letter-spacing: 0.07em;
  }

  .topbar h1 {
    font-size: var(--type-page-title);
    line-height: var(--leading-tight);
  }

  .month-control span,
  .field > span,
  .field-label {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  input {
    min-height: 45px;
  }

  textarea {
    line-height: 1.65;
  }

  .button {
    min-height: 44px;
    font-size: var(--type-control);
    line-height: 1;
  }

  .result-gallery-heading {
    padding: 25px 28px;
  }

  .result-gallery-heading h2 {
    font-size: var(--type-display);
    line-height: 1.18;
  }

  .result-gallery-heading p {
    max-width: 680px;
    margin-top: 10px;
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .result-gallery-meta span,
  .result-gallery-meta small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .result-gallery-meta strong {
    font-size: 30px;
    line-height: 1.1;
  }

  .performance-id-card {
    grid-template-columns: 122px minmax(140px, 1fr) 196px;
    grid-template-rows: auto 180px auto;
    min-height: 276px;
  }

  .id-card-topline {
    padding-top: 14px;
    padding-bottom: 14px;
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-photo-area {
    height: 180px;
  }

  .id-photo-label {
    font-size: var(--type-meta);
    line-height: 1.2;
  }

  .id-person-copy > small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .id-person-copy h3 {
    margin: 9px 0 6px;
    font-size: clamp(26px, 2.1vw, 31px);
    line-height: 1.2;
  }

  .id-person-copy p {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .id-result-stack span {
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-result-stack > div {
    grid-template-columns: 60px minmax(0, 1fr);
    align-content: center;
    align-items: center;
    justify-items: start;
    gap: 8px;
    min-width: 0;
    padding: 7px 10px;
  }

  .id-result-stack .level-badge,
  .id-result-stack .final-grade-badge {
    width: 100%;
    min-width: 0;
    max-width: 100%;
  }

  .id-result-stack > div > span:first-child,
  .id-final-result small {
    white-space: nowrap;
  }

  .id-final-result > span:first-child,
  .id-final-result small {
    color: rgba(255, 255, 255, 0.84);
  }

  .id-final-result small {
    grid-column: 1 / -1;
    margin-top: -2px;
  }

  .level-badge,
  .final-grade-badge {
    min-height: 36px;
    padding: 5px 11px 5px 5px;
  }

  .level-badge-code,
  .final-grade-code {
    width: 26px;
    height: 26px;
    font-size: 10px;
  }

  .level-badge b,
  .final-grade-badge b {
    font-size: var(--type-small);
    line-height: 1.2;
  }

  .id-final-result .final-grade-badge b {
    font-size: 13px;
  }

  .id-final-result small {
    font-size: var(--type-meta);
    line-height: 1.35;
  }

  .id-card-footer {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .role-intro {
    min-height: 178px;
    padding: 30px 34px;
  }

  .role-intro h2 {
    font-size: clamp(29px, 2.5vw, 36px);
    line-height: 1.22;
  }

  .role-intro p {
    max-width: 760px;
    font-size: 13px;
    line-height: 1.75;
  }

  .role-formula span,
  .role-formula small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .role-formula strong {
    font-size: 30px;
    line-height: 1.1;
  }

  .panel-heading h2,
  .settings-card h2 {
    font-size: var(--type-section-title);
    line-height: 1.3;
  }

  .panel-heading p,
  .settings-card > p {
    max-width: 700px;
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .queue-count {
    font-size: var(--type-small);
    line-height: 1.3;
  }

  .data-table {
    font-size: var(--type-body);
  }

  .data-table th,
  .role-table th {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
    letter-spacing: 0.02em;
  }

  .data-table td,
  .role-table td {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .person-cell strong {
    font-size: 14px;
    line-height: 1.35;
  }

  .person-cell small {
    margin-top: 5px;
    font-size: var(--type-small);
    line-height: 1.35;
  }

  .status-pill,
  .role-table .text-button,
  .text-button {
    font-size: var(--type-small);
    line-height: 1.2;
  }

  .employee-file-number {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .employee-card-copy strong {
    font-size: var(--type-card-title);
    line-height: 1.25;
  }

  .employee-card-copy small {
    font-size: var(--type-small);
    line-height: var(--leading-compact);
  }

  .photo-upload-block .field-label {
    font-size: var(--type-small);
  }

  .photo-upload-block p {
    font-size: var(--type-small);
    line-height: var(--leading-body);
  }

  .settings-card,
  .policy-boundary li {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .modal-heading h2 {
    font-size: 26px;
    line-height: 1.25;
  }

  .modal-heading p {
    font-size: var(--type-body);
    line-height: var(--leading-compact);
  }

  .icon-button {
    font-size: var(--type-small);
  }

  .live-score span {
    font-size: var(--type-meta);
  }

  .live-score strong {
    font-size: 28px;
    line-height: 1.15;
  }

  .level-select-heading h3 {
    font-size: 24px;
    line-height: 1.3;
  }

  .level-select-heading p {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  .level-choice {
    min-height: 174px;
  }

  .level-choice strong {
    font-size: 22px;
    line-height: 1.25;
  }

  .level-choice small {
    font-size: var(--type-small);
    line-height: 1.3;
  }

  .level-choice p {
    font-size: var(--type-small);
    line-height: 1.55;
  }

  .level-choice.is-selected::after,
  .section-number {
    font-size: var(--type-meta);
    line-height: 1.2;
  }

  .result-strip span,
  .result-strip small {
    font-size: var(--type-meta);
    line-height: var(--leading-compact);
  }

  .result-strip strong {
    font-size: 20px;
    line-height: 1.25;
  }

  .result-main strong {
    font-size: 25px;
  }

  .toast {
    font-size: var(--type-body);
    line-height: var(--leading-body);
  }

  @media (max-width: 1180px) {
    .performance-id-card {
      grid-template-columns: 124px minmax(160px, 1fr) 202px;
    }
  }

  @media (max-width: 820px) {
    .nav-item {
      font-size: var(--type-small);
    }

    .topbar {
      min-height: 104px;
    }

    .role-intro {
      padding: 27px 28px;
    }
  }

  @media (max-width: 620px) {
    :root {
      --type-page-title: 28px;
      --type-section-title: 23px;
    }

    body {
      font-size: 14px;
    }

    .topbar h1 {
      font-size: 28px;
    }

    .result-gallery-heading h2 {
      font-size: 30px;
    }

    .result-gallery-heading p {
      font-size: 13px;
    }

    .performance-id-card {
      grid-template-columns: 100px minmax(0, 1fr);
      grid-template-rows: auto 144px auto auto;
    }

    .id-photo-area {
      height: 144px;
    }

    .id-person-copy h3 {
      font-size: 26px;
    }

    .id-result-stack {
      grid-template-columns: repeat(2, minmax(0, 1fr));
      grid-template-rows: auto auto;
    }

    .id-result-stack > div {
      min-height: 76px;
    }

    .id-result-stack > div:last-child {
      border-right: 0;
    }

    .id-final-result {
      grid-column: 1 / -1;
      grid-row: 1;
      min-height: 84px !important;
    }

    .role-intro h2 {
      font-size: 28px;
    }

    .role-intro p {
      font-size: 13px;
    }

    .data-table {
      min-width: 720px;
    }

    .level-choice {
      min-height: 122px;
    }

    .sticky-heading {
      gap: 14px;
    }
  }
}

@media print {
  body {
    font-size: 11pt;
    line-height: 1.5;
  }

  .sticky-heading h2 {
    font-size: 20pt;
  }
}