/* Font preferences are independent from page structure, book covers and branding. */
:root {
  --workbench-font-size: 16px;
  --reading-font: "Segoe UI", "Microsoft YaHei UI", "PingFang SC", sans-serif;
  --reading-font-size: 20px;
  --reading-line-height: 2;
  --reading-max-width: none;
}

.workbench-view { font-size: var(--workbench-font-size); }
.workbench-top { min-height: 68px; flex-wrap: wrap; padding-block: 5px; }
.workbench-view .text-tab, .workbench-view .button { font-size: calc(var(--workbench-font-size) - 1px); }
.workbench-view .text-tab > span { font-size: inherit; margin-left: 0; }
.workbench-view .panel-header > strong, .directory-tabs, .chapter-item strong { font-size: var(--workbench-font-size); }
.workbench-view .muted-tag, .directory-book .eyebrow, .directory-book .muted, .directory-tabs small, .chapter-number, .editor-footer { font-size: calc(var(--workbench-font-size) - 4px); }
.directory-book h2 { font-size: calc(var(--workbench-font-size) + 7px); }
.chapter-volume, .chapter-item small { font-size: calc(var(--workbench-font-size) - 3px); }
.chapter-item { padding: 16px 10px; gap: 10px; }
.chapter-item > span:nth-child(2) { min-width: 0; overflow-wrap: anywhere; }
.chapter-number, .selection-dot { flex-shrink: 0; }
.chapter-volume { align-items: start; }
.manuscript-label { font-size: calc(var(--workbench-font-size) - 1px); }
.manuscript-label .icon { width: 17px; height: 17px; }
.editor-toolbar { min-height: 58px; align-items: center; flex-wrap: wrap; }
.editor-toolbar > div { flex-shrink: 0; }
.editor-toolbar > div:last-child { margin-left: auto; }
.manuscript {
  width: 100%; max-width: var(--reading-max-width); margin: 0 auto;
  padding: 36px clamp(24px, 3vw, 56px) 56px;
  overflow-wrap: anywhere;
}
.chapter-kicker { font-size: calc(var(--reading-font-size) * .65); }
.manuscript h1 { font: 500 calc(var(--reading-font-size) * 1.6)/1.5 var(--reading-font); margin-bottom: 16px; }
.manuscript-meta { font-size: calc(var(--workbench-font-size) - 4px); margin-bottom: 32px; }
.manuscript > p:not(.chapter-kicker) {
  font: var(--reading-font-size)/var(--reading-line-height) var(--reading-font);
  letter-spacing: .025em; margin-bottom: 1.3em;
}

.manager-heading strong { font-size: var(--workbench-font-size); }
.manager-heading small, .manager-context .muted-tag, .message-label, .compose-actions > span, .manager-bottom { font-size: calc(var(--workbench-font-size) - 4px); }
.manager-context, .chat-section-label { font-size: calc(var(--workbench-font-size) - 3px); }
.manager-context { flex-wrap: wrap; }
.manager-message { font-size: var(--workbench-font-size); }
.manager-message p:first-child { font-size: calc(var(--workbench-font-size) + 6px); }
.suggestion, .chat-compose textarea { font-size: calc(var(--workbench-font-size) - 1px); }
.manager-panel .panel-header { flex-shrink: 0; gap: 8px; min-height: 76px; }
.manager-heading { min-width: 0; }
.manager-heading > span:last-child { min-width: 0; }
.tiny-brand { flex-shrink: 0; }
.compose-actions { flex-wrap: wrap; }

.settings-dialog { width: min(980px, calc(100vw - 32px)); }
.settings-content { font-size: 14px; }
.settings-tab { font-size: 14px; }
.typography-settings { margin-bottom: 32px; padding-bottom: 25px; border-bottom: 1px solid var(--line); }
.typography-heading { display: flex; align-items: start; justify-content: space-between; gap: 15px; margin-bottom: 23px; }
.typography-heading h3 { font-size: 21px; }
.typography-heading p { font-size: 13px; color: var(--muted); margin: 0; }
.typography-heading .button { flex-shrink: 0; font-size: 12px; }
.typography-fields { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 21px 24px; }
.typography-fields label { display: flex; flex-direction: column; gap: 8px; min-width: 0; color: var(--muted); font-size: 14px; }
.typography-fields select { font-size: 14px; min-width: 0; }
.typography-fields small { font-size: 11px; line-height: 1.7; color: var(--faint); }
.typography-sample { background: var(--paper); border: 1px solid var(--line); border-radius: 9px; padding: 20px; margin-top: 24px; }
.typography-sample > span { font: var(--workbench-font-size)/1.6 var(--sans); color: var(--muted); }
.typography-sample > p { font: var(--reading-font-size)/var(--reading-line-height) var(--reading-font); margin: 15px 0 0; }
.typography-note { font-size: 11px; color: var(--faint); line-height: 1.8; margin: 16px 0 0; }

@media (max-width: 1250px) {
  .workspace-tabs { gap: 14px; }
  .workbench-actions .button { font-size: calc(var(--workbench-font-size) - 1px); }
}
@media (max-width: 700px) {
  .workbench-top { padding: 0 12px 10px; }
  .workspace-tabs { gap: 14px; flex-wrap: wrap; }
  .workspace-tabs .text-tab { font-size: calc(var(--workbench-font-size) - 2px); padding-block: 12px; }
  .workbench-actions { flex-wrap: wrap; }
  .manuscript { padding: 25px 20px 40px; }
  .manuscript-meta { gap: 6px; }
  .manuscript-meta .thin-line { width: 12px; }
  .editor-toolbar { gap: 3px; }
  .settings-layout { grid-template-columns: 1fr; }
  .settings-nav .settings-tab { font-size: 12px; }
  .typography-heading { flex-wrap: wrap; }
  .typography-fields { grid-template-columns: 1fr; gap: 17px; }
}