/* Shared frame for the platform (www) and office (wps) sites.
 *
 * Both sites grew one stylesheet per page, each with its own container
 * width, heading card, control heights and block spacing, so the same kind
 * of element sat at different sizes and positions from page to page. This
 * file is loaded last on both sites and sets those shared measures once:
 *
 *   - one content width, the same as the top bar, on every page;
 *   - one heading card (padding, title size, eyebrow, description);
 *   - one back link / section nav line above the heading card;
 *   - text controls and buttons 44px tall (these sites are used on phones),
 *     labels never make the typed text bold, file pickers styled like buttons;
 *   - 24px between blocks, 40px before a titled section;
 *   - simple tool pages stack their fields with one gap.
 *
 * The management side of the exam site has its own frame (ui.css).
 */

:root {
  --portal-width: 1220px;
  --portal-blue: #1769e0;
  --portal-ink: #172033;
  --portal-muted: #667085;
  --portal-line: #cfdbea;
  --portal-control: 44px;
}

/* ---- Content width: the top bar, the notice strip and the page line up. */
:root :is(.platform-body, .office-body) :is(
  .platform-topbar-inner, .platform-compliance, .platform-shell, .platform-messages,
  .office-topbar-inner, .office-compliance, .office-shell, .office-messages
) {
  width: min(var(--portal-width), calc(100% - 40px));
}

@media (min-width: 641px) {
  /* Same top bar on both sites, so switching sites does not shift the logo. */
  .office-topbar-inner { min-height: 82px; }
  .office-brand img { width: 52px; height: 52px; }
  .office-brand strong { font-size: 19px; }
  .office-compliance { padding-block: 11px; }

  :root :is(.platform-body, .office-body) :is(.platform-shell, .office-shell) { padding-top: 40px; }
  .platform-body .ai-settings-shell { padding: 0; }
}

@media (max-width: 640px) {
  :root :is(.platform-body, .office-body) :is(
    .platform-topbar-inner, .platform-compliance, .platform-shell, .platform-messages,
    .office-topbar-inner, .office-compliance, .office-shell, .office-messages
  ) {
    width: calc(100% - 24px);
  }
}

/* ---- The line above the heading card: a back link or the section nav. */
.portal-back,
.office-back {
  display: inline-flex;
  align-items: center;
  min-height: 24px;
  margin: 0 0 20px;
  color: var(--portal-blue) !important;
  font-size: 15px;
  font-weight: 800;
  text-decoration: none;
}
.portal-back:hover,
.office-back:hover { text-decoration: underline; }
.office-back + .office-tool-hero { margin-top: 0; }

.skill-nav { margin: 0 0 20px; }
.skill-nav a.is-active {
  border-color: var(--portal-blue);
  color: #fff;
  background: var(--portal-blue);
}

/* ---- Heading card: one look for every page. */
.platform-hero,
.skill-hero,
.skill-page-heading,
.skill-result-heading,
.monitor-heading,
.office-hero,
.office-tool-hero,
.platform-body .ai-settings-heading,
.platform-body.ai-usage-page .page-heading {
  margin: 0;
  padding: 40px 44px;
  border: 1px solid #cbd9ee;
  border-radius: 24px;
  background: linear-gradient(135deg, #fff 0%, #f6f9ff 60%, #eef4ff 100%);
  box-shadow: 0 16px 44px rgba(35, 60, 96, .08);
}

.platform-hero h1,
.skill-hero h1,
.skill-page-heading h1,
.skill-page-heading.compact h1,
.skill-result-heading h1,
.monitor-heading h1,
.office-hero h1,
.office-tool-hero h1,
.platform-body .ai-settings-heading h1,
.platform-body.ai-usage-page .page-heading h1 {
  margin: 10px 0 12px;
  color: var(--portal-ink);
  font-size: clamp(30px, 3.4vw, 44px);
  line-height: 1.15;
  letter-spacing: -.03em;
}

.platform-hero > div > p,
.skill-hero > div > p,
.skill-page-heading > div > p,
.skill-result-heading > div > p,
.monitor-heading > div > p,
.office-hero > div > p,
.office-tool-hero > div > p,
.platform-body .ai-settings-heading > div > p:not(.ai-kicker),
.platform-body.ai-usage-page .page-heading .page-subtitle {
  max-width: 760px;
  margin: 0;
  color: var(--portal-muted);
  font-size: 16px;
  line-height: 1.75;
}

.platform-eyebrow,
.office-eyebrow,
.platform-body.ai-usage-page .page-heading .eyebrow {
  color: var(--portal-blue);
  font-size: 13px;
  font-weight: 900;
  letter-spacing: .06em;
}
.platform-body .ai-settings-heading .ai-kicker {
  margin: 0;
  color: var(--portal-blue) !important;
  letter-spacing: .06em;
}

/* ---- Block spacing: 24px after the heading card, 40px before a titled section. */
:is(.platform-hero, .skill-hero, .skill-page-heading, .skill-result-heading, .monitor-heading,
    .office-hero, .office-tool-hero, .ai-settings-heading, .page-heading) + * {
  margin-top: 24px;
}
:is(.platform-hero, .skill-hero, .skill-page-heading, .skill-result-heading, .monitor-heading,
    .office-hero, .office-tool-hero, .ai-settings-heading, .page-heading)
  + :is(.platform-app-section, .platform-monitor-section, .office-category, .skill-section-heading) {
  margin-top: 40px;
}
.platform-app-section + .platform-app-section,
.platform-app-section + .platform-monitor-section,
.platform-safety-card + .platform-monitor-section,
.office-category + .office-category,
.skill-recent,
.skill-history { margin-top: 40px; }
.platform-app-section + .platform-safety-card,
.platform-safety-card + .platform-safety-card,
.office-category + .office-security-note { margin-top: 24px; }

/* One gap inside the server monitor, so the 4-, 4- and 2-column rows line up. */
.monitor-summary,
.monitor-ops-grid,
.monitor-chart-grid { gap: 16px; }
.monitor-ops-grid,
.monitor-chart-grid,
.monitor-footnote { margin-top: 16px; }

/* ---- Controls: one height, normal weight for what people type. */
:is(.platform-shell, .office-shell)
  :is(input:not([type=checkbox]):not([type=radio]):not([type=range]):not([type=file]):not([type=hidden]):not([type=color]), select) {
  box-sizing: border-box;
  height: var(--portal-control);
  min-height: var(--portal-control);
  padding-top: 0;
  padding-bottom: 0;
  font-size: 15px;
  font-weight: 400;
}
:is(.platform-shell, .office-shell) textarea {
  font-size: 15px;
  font-weight: 400;
}

/* File pickers: the button looks like the other secondary buttons. */
/* :root lifts these over the tool pages' own "every input" rules. */
:root :is(.platform-shell, .office-shell) input[type=file] {
  box-sizing: border-box;
  height: auto;
  max-width: 100%;
  min-height: var(--portal-control);
  padding: 3px 12px 3px 4px;
  color: var(--portal-muted);
  font: inherit;
  font-size: 14px;
  font-weight: 400;
}
:root :is(.platform-shell, .office-shell) input[type=file]::file-selector-button {
  height: 36px;
  margin-right: 12px;
  padding: 0 14px;
  border: 1px solid var(--portal-line);
  border-radius: 10px;
  color: #344054;
  background: #f5f8fc;
  font: inherit;
  font-size: 14px;
  font-weight: 800;
  cursor: pointer;
}
:root :is(.platform-shell, .office-shell) input[type=file]::file-selector-button:hover {
  border-color: #9eb8dd;
  background: #eef4fc;
}

/* A file card ([data-file-pick], js/file-pick.js: 发起 Skill 工作, 直接让 AI 工作): the file box is hidden,
   the dashed button opens it, and the chosen files are listed under the button, name and size, one per line.
   The names are shown whole (a first and a final draft often differ only at the end of the name). */
[data-file-pick] { position: relative; }
:root [data-file-pick] input[type=file] {
  position: absolute;
  width: 1px;
  height: 1px;
  min-height: 0;
  padding: 0;
  opacity: 0;
}
.skill-file-control {
  display: flex;
  align-items: center;
  justify-content: center;
  box-sizing: border-box;
  min-height: var(--portal-control);
}
[data-file-pick]:has(input:focus-visible) .skill-file-control {
  outline: 3px solid rgba(23, 105, 224, .28);
  outline-offset: 2px;
}
[data-file-pick]:is(.has-file, .is-dragging) {
  border-color: #4f83d1;
  background: #f0f7ff;
}
/* Each name is a framed line: 8px between them, as between any two boxes (docs/界面规范.md 一). */
.skill-file-names {
  display: grid;
  gap: 8px;
  margin-top: 10px;
}
/* An empty list stays on the page for screen readers (it announces the chosen files) but takes no room. */
.skill-file-names:empty { position: absolute; margin: 0; }
/* The materials zone of 直接让 AI 工作 is a grid with 9px between its rows. */
.direct-work-files [data-file-pick] .skill-file-names { margin-top: 1px; }
.skill-file-names > span {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  padding: 8px 12px;
  border: 1px solid #c8daee;
  border-radius: 10px;
  color: var(--portal-ink);
  background: #fff;
  font-size: 13px;
  font-weight: 400;
  line-height: 1.5;
  text-align: left;
}
.skill-file-names b {
  min-width: 0;
  overflow-wrap: anywhere;
  font-weight: 700;
}
.skill-file-names small {
  flex: none;
  color: var(--portal-muted);
  font-size: 13px;
}
.skill-file-names .is-error { color: #b3261e; }

:is(.platform-shell, .office-shell) input[type=range] {
  width: 100%;
  height: var(--portal-control);
  margin: 0;
}

/* Buttons: primary and secondary share one height. */
.platform-primary-button,
.skill-primary-button,
.skill-heading-actions a,
.direct-work-guide button,
.ai-primary-button,
.ai-secondary-button,
.platform-body.ai-usage-page .button,
.monitor-refresh,
.office-primary,
.office-button-row button,
.office-workbench > button,
.workbench-footer button,
.compare-submit button,
.transcription-actions button,
.scan-secondary,
.pdf-optimization-jobs > header button {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: var(--portal-control);
  padding: 0 18px;
  font-size: 15px;
  line-height: 1.2;
}
.direct-work-guide button { display: flex; width: 100%; }

/* ---- Simple office tools: fields, buttons and results in one column, one gap. */
.office-workbench:not(.office-pdf-workbench):not(.office-file-workbench):not(.office-transcription),
.office-two-columns > div:has(> label) {
  display: grid;
  gap: 20px;
  align-content: start;
}
.office-workbench:not(.office-pdf-workbench):not(.office-file-workbench):not(.office-transcription) > *,
.office-two-columns > div:has(> label) > * { margin-top: 0; margin-bottom: 0; }
.office-workbench:not(.office-pdf-workbench):not(.office-file-workbench):not(.office-transcription) > :is(button, .office-check),
.office-two-columns > div:has(> label) > button { justify-self: start; }
.office-timer > .office-button-row { justify-self: center; }
.office-timer > .office-form-grid { width: 100%; max-width: 570px; justify-self: center; }
/* An empty status line keeps its live region but takes no room. */
.office-workbench:not(.office-pdf-workbench):not(.office-file-workbench):not(.office-transcription) > .office-status:empty,
.office-two-columns > div > .office-status:empty {
  position: absolute;
  width: 1px;
  height: 1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
}
.office-workbench > hr { width: 100%; margin: 4px 0; }

/* The AI usage list shows its empty state inside the card. */
.platform-body.ai-usage-page .ai-usage-list .empty-state { padding: 36px 24px; text-align: center; }
.platform-body.ai-usage-page .ai-usage-list .empty-state h2 { margin: 0 0 8px; font-size: 20px; }
.platform-body.ai-usage-page .ai-usage-list .empty-state p { margin: 0; color: var(--portal-muted); }
.platform-body.ai-usage-page .ai-usage-filter label { font-size: 13px; }

@media (max-width: 640px) {
  .platform-hero,
  .skill-hero,
  .skill-page-heading,
  .skill-result-heading,
  .monitor-heading,
  .office-hero,
  .office-tool-hero,
  .platform-body .ai-settings-heading,
  .platform-body.ai-usage-page .page-heading {
    padding: 18px 16px;
    border-radius: 14px;
  }
  .platform-hero h1,
  .skill-hero h1,
  .skill-page-heading h1,
  .skill-page-heading.compact h1,
  .skill-result-heading h1,
  .monitor-heading h1,
  .office-hero h1,
  .office-tool-hero h1,
  .platform-body .ai-settings-heading h1,
  .platform-body.ai-usage-page .page-heading h1 {
    margin: 4px 0 6px;
    font-size: 22px;
    line-height: 1.35;
  }
  .platform-hero > div > p,
  .skill-hero > div > p,
  .skill-page-heading > div > p,
  .skill-result-heading > div > p,
  .monitor-heading > div > p,
  .office-hero > div > p,
  .office-tool-hero > div > p,
  .platform-body .ai-settings-heading > div > p:not(.ai-kicker),
  .platform-body.ai-usage-page .page-heading .page-subtitle {
    font-size: 14px;
    line-height: 1.6;
  }
  :is(.platform-hero, .skill-hero, .skill-page-heading, .skill-result-heading, .monitor-heading,
      .office-hero, .office-tool-hero, .ai-settings-heading, .page-heading) + * { margin-top: 16px; }
  .portal-back, .office-back, .skill-nav { margin-bottom: 14px; }
}

/* ---- Page-specific fits for the shared frame. */
/* File pickers may shrink inside narrow columns instead of widening them. */
:is(.platform-shell, .office-shell) input[type=file] { min-width: 0; }
.direct-dropzone input,
.direct-template-zone input { width: 100%; }

/* AI settings: the title takes the room, the two actions stay on one line. */
@media (min-width: 901px) {
  .platform-body .ai-settings-heading > div:first-child { flex: 1 1 auto; min-width: 0; }
  .platform-body .ai-settings-heading-actions { flex: 0 0 auto; flex-wrap: nowrap; }
}

/* AI usage: the filter card has the same inner edge as the totals above it. */
.platform-body.ai-usage-page .ai-usage-filter { padding: 20px 24px; }
.office-check input { margin: 0; }

@media (min-width: 641px) and (max-width: 900px) {
  .platform-hero,
  .skill-hero,
  .skill-page-heading,
  .skill-result-heading,
  .monitor-heading,
  .office-hero,
  .office-tool-hero,
  .platform-body .ai-settings-heading,
  .platform-body.ai-usage-page .page-heading { padding: 28px 26px; }
}

/* Phones: the account note and the AI entry cards as compact rows, like the app list. */
@media (max-width: 640px) {
  .platform-safety-card {
    grid-template-columns: 40px minmax(0, 1fr);
    align-items: start;
    gap: 6px 12px;
    padding: 16px;
    border-radius: 14px;
  }
  .platform-safety-card > :is(form, a) { grid-column: 2; }
  .platform-safety-icon { width: 40px; height: 40px; border-radius: 12px; }
  .platform-safety-card h2 { font-size: 16px; }
  .platform-safety-card p { font-size: 13px; line-height: 1.55; }

  .skill-hero { gap: 12px; }
  .skill-hero-badge { min-width: 0; padding: 12px 14px; border-radius: 12px; }
  .skill-entry-grid { gap: 10px; }
  .skill-entry-card {
    display: grid;
    grid-template-columns: 44px minmax(0, 1fr);
    align-items: start;
    gap: 2px 12px;
    min-height: 0;
    padding: 16px;
    border-radius: 14px;
  }
  .skill-entry-mark { grid-row: 1 / span 2; width: 44px; height: 44px; border-radius: 12px; font-size: 16px; }
  .skill-entry-card > div { min-width: 0; }
  .skill-kicker { margin-top: 0; }
  .skill-entry-card h2 { margin: 2px 0 4px; font-size: 18px; }
  .skill-entry-card p { font-size: 13px; line-height: 1.55; }
  .skill-entry-card button,
  .skill-card-action { grid-column: 2; min-height: 32px; margin-top: 6px; font-size: 14px; }
}

/* Office sign-in fields focus like the platform's. */
.office-login-form input { outline: none; }
.office-login-form input:focus { border-color: var(--portal-blue); box-shadow: 0 0 0 4px rgba(23, 105, 224, .12); }

/* ---- One inner edge (UI audit 2026-09-30): every card of a page is padded
   --portal-gutter at the sides (24px; 16px on a phone), so the contents of
   stacked cards start on one line. They used to start 17 to 45px in,
   depending on the card. A panel inside a card is padded --portal-panel. */
:root { --portal-gutter: 24px; --portal-panel: 20px; }
@media (max-width: 640px) { :root { --portal-gutter: 16px; --portal-panel: 14px; } }

@media (min-width: 641px) {
  .platform-hero,
  .skill-hero,
  .skill-page-heading,
  .skill-result-heading,
  .monitor-heading,
  .office-hero,
  .office-tool-hero,
  .platform-body .ai-settings-heading,
  .platform-body.ai-usage-page .page-heading { padding: 32px var(--portal-gutter); }
}

:root :is(.platform-body, .office-body) :is(
  .platform-safety-card, .platform-monitor-section, .platform-app-card,
  .skill-entry-card, .skill-library-card, .skill-direct-callout, .skill-task-meta, .skill-upload-card, .skill-prompt-card,
  .skill-submit-bar, .skill-learning-section, .skill-create-from-task, .skill-editor-card, .skill-permission-card,
  .skill-review-panel, .skill-version-panel, .skill-version-banner > div, .skill-preview-toolbar, .skill-error,
  .direct-work-compose, .direct-work-files, .direct-work-guide, .skill-task-list a, .skill-preview-card details,
  .office-tool-card, .office-security-note, .office-workbench,
  .ai-overview, .ai-usage-filter, .ai-usage-summary > div, .ai-usage-list article
) { padding-left: var(--portal-gutter); padding-right: var(--portal-gutter); }

/* The server monitor: its cards are cards on its own page, panels inside the
   home page's section. */
:root .platform-body :is(.monitor-metric, .monitor-chart-card, .monitor-footnote, .monitor-ops-grid > article) { padding-left: var(--portal-gutter); padding-right: var(--portal-gutter); }
:root .platform-body .platform-monitor-section :is(.monitor-metric, .monitor-chart-card, .monitor-footnote, .monitor-ops-grid > article) { padding-left: var(--portal-panel); padding-right: var(--portal-panel); }

/* A segmented choice: its buttons sit 8px apart inside the track. */
.monitor-range-group { gap: 8px; }

/* ---- Skill pages: every action button is the shared height; the save button
   keeps its distance from the last field; panels inside a card share one edge. */
.skill-submit-bar button,
.skill-editor-card > button,
.skill-review-panel button,
.skill-error button,
.skill-publish-box button,
.skill-share-box button,
.skill-form-actions button,
.skill-create-from-task button,
.skill-learning-list button,
.skill-preview-toolbar a {
  box-sizing: border-box;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: var(--portal-control);
  padding: 0 18px;
  font-size: 15px;
  line-height: 1.2;
}
.skill-editor-card > button { margin-top: 16px; }
.skill-learning-list form { align-items: center; }
.skill-review-panel details,
.skill-satisfied-form,
.skill-completed-note,
.skill-publish-box,
.skill-share-box,
.skill-version-list article,
.skill-learning-list article { padding-left: 15px; padding-right: 15px; }

/* Sign-in: the error box has room below it and its one message needs no
   bullet; on a phone the notice and the form share one inner edge. */
.platform-form-error,
.office-form-error { margin: 0 0 18px; padding: 12px 14px; }
:is(.platform-form-error, .office-form-error) .errorlist { margin: 0; padding: 0; list-style: none; }
@media (max-width: 640px) {
  :root :is(.platform-login-assurance, .platform-login-panel) { padding-left: var(--portal-gutter); padding-right: var(--portal-gutter); }
}

/* A section title with a note beside it: on a phone the note goes under the title. */
@media (max-width: 640px) {
  .skill-section-heading { display: block; margin-top: 28px; }
  .skill-section-heading h2 { font-size: 20px; }
  .skill-section-heading p { margin-top: 8px; }
}

/* A switch keeps its hidden checkbox inside itself; loose, the checkboxes of a
   wide table made the whole page scroll sideways on a phone. */
.skill-switch { position: relative; display: inline-flex; }

/* The result preview is a sheet of paper with wide margins; on a phone its text starts on the card's inner edge. */
@media (max-width: 640px) {
  .skill-document-preview { padding: 20px var(--portal-gutter); }
}

/* The permission table scrolls sideways inside its card on a narrow screen
   instead of squeezing its role columns to one character per line. */
.skill-permission-table table { min-width: 640px; }
.skill-permission-table thead th { white-space: nowrap; }
@media (max-width: 640px) {
  .skill-permission-table th:first-child { min-width: 200px; }
  .skill-permission-table table { min-width: 560px; }
}
.skill-permission-table :is(th, td):first-child { padding-left: 0; }
.skill-permission-table :is(th, td):last-child { padding-right: 0; }

/* 发起 Skill 工作: the title of the fifth card takes the height of the icon row of the other four, so its
   step number (top right) clears the text box under it. */
.skill-prompt-card > span:first-of-type { display: flex; min-height: 46px; align-items: center; }

/* ---- 办公工具: the panels inside a tool's card share one inner edge too. Each had its own padding (12 to
   28px), so a chosen file, the options under it and the notes beside them each started a few pixels apart. */
:root .office-body :is(
  .pdf-task-panel, .scan-intake, .scan-workspace, .pdf-optimization-panel, .transcription-upload-card,
  .office-alert, .compare-ai-option, .comparison-progress, .comparison-stats > div, .comparison-ai, .comparison-detail,
  .office-result, .office-mindmap, .transcription-capabilities > div, .transcription-result-card,
  .selected-files > div, .scan-editor-card, .scan-control-card, .scan-result-section, .scan-mask-tools, .scan-export-bar,
  .scan-assurance, .pdf-optimization-safety, .pdf-optimization-options > label:first-child, .pdf-optimization-job,
  .transcription-file, .transcription-summary-option, .transcription-progress
) { padding-left: var(--portal-panel); padding-right: var(--portal-panel); }
/* A panel without a border, and a table's first and last columns, start their words on the same line. */
:root .office-body .pdf-options { padding-left: calc(var(--portal-panel) + 1px); padding-right: calc(var(--portal-panel) + 1px); }
:root .office-body .office-table :is(th, td):first-child { padding-left: var(--portal-panel); }
:root .office-body .office-table :is(th, td):last-child { padding-right: var(--portal-panel); }

/* ---- 服务器监测 on a phone: the five time ranges are one row of five (three and two, the second row stopped short). */
@media (max-width: 680px) {
  .monitor-range-group { grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 4px; }
  .monitor-range-group button { padding-left: 4px; padding-right: 4px; white-space: nowrap; }
  /* A note's caption keeps its line (“容量守卫” broke into two lines of two characters). */
  .monitor-footnote strong { flex: none; }
}

/* ---- 文件比对 · 逐项差异 on a phone: one card per difference, what changed and where on top, the two versions
   under it across the full width (the table was about 980px wide and had to be scrolled sideways to read).
   The same width as the other tables that become entries on a phone (stack-table.css). */
@media (max-width: 760px) {
  :root .office-body .comparison-detail .office-table-wrap { overflow: visible; border: 0; border-radius: 0; }
  :root .office-body .comparison-table,
  :root .office-body .comparison-table tbody { display: block; }
  :root .office-body .comparison-table thead { display: none; }
  :root .office-body .comparison-table tbody { display: grid; gap: 10px; }
  :root .office-body .comparison-table tr { display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 8px 12px; padding: 12px var(--portal-panel); border: 1px solid #dfe7f1; border-radius: 12px; background: #fff; }
  :root .office-body .comparison-table td,
  :root .office-body .comparison-table td:is(:first-child, :last-child) { min-width: 0; padding: 0; border: 0; }
  :root .office-body .comparison-table td:is(:nth-child(3), :nth-child(4)),
  :root .office-body .comparison-table td[colspan] { grid-column: 1 / -1; }
  /* The two versions are read against each other: one size of text (the last column had 13px of its own). */
  :root .office-body .comparison-table td:is(:nth-child(3), :nth-child(4)) { font-size: 14px; line-height: 1.6; }
  :root .office-body .comparison-table td:is(:nth-child(3), :nth-child(4))::before { display: block; margin-bottom: 2px; color: #667085; font-size: 12px; font-weight: 700; }
  :root .office-body .comparison-table td:nth-child(3)::before { content: "文件 A"; }
  :root .office-body .comparison-table td:nth-child(4)::before { content: "文件 B"; }
}