/* V07.9: shared mobile surfaces. Load after styles.css. */
:root {
  --ui-display: 32px;
  --ui-title: 24px;
  --ui-section: 18px;
  --ui-body: 16px;
  --ui-control: 14px;
  --ui-caption: 12px;
  --ui-gutter: 20px;
  --ui-radius: 12px;
  --ui-control-radius: 10px;
  --ui-focus: #171717;
  --ui-action-reserve: calc(132px + env(safe-area-inset-bottom, 0px));
}

html { scroll-padding-top: calc(84px + env(safe-area-inset-top, 0px)); }
.mobile-shell, main, form, .section, .page-heading > div, .row-copy {
  min-inline-size: 0;
}
h1 { font-size: var(--ui-title); line-height: 1.42; letter-spacing: -.025em; }
h2 { font-size: var(--ui-section); line-height: 1.56; letter-spacing: -.01em; }
h3 { font-size: var(--ui-body); line-height: 1.625; }
h1, h2, h3 { font-weight: 600; overflow-wrap: anywhere; }
small, .caption, .field-hint, .context-line, .read-meta, .card-meta {
  font-size: var(--ui-caption);
  line-height: 1.75;
}
.eyebrow { font-size: var(--ui-caption); line-height: 20px; letter-spacing: .08em; }
.mono, .segment-time, .stats-line { font-variant-numeric: tabular-nums; }
.welcome h1 { font-size: var(--ui-display); line-height: 1.4; letter-spacing: -.035em; }

/* The topbar locates the task; the page title identifies its object. */
.topbar {
  height: calc(68px + env(safe-area-inset-top, 0px));
  padding: calc(10px + env(safe-area-inset-top, 0px)) 16px 10px;
  gap: 8px;
  border-bottom-color: var(--line);
  background: var(--paper);
}
.topbar-title { min-width: 0; font-size: var(--ui-control); line-height: 24px; }
.page {
  padding: 24px var(--ui-gutter) var(--ui-action-reserve);
  min-height: calc(100dvh - 68px - env(safe-area-inset-top, 0px));
}
.page.section-page { padding-top: 20px; }
.page-heading { gap: 12px; margin-bottom: 24px; align-items: flex-start; }
.page-heading > .icon-button, .page-heading > .avatar { flex: none; }
.page-heading p { font-size: var(--ui-control); line-height: 24px; margin-top: 8px; }
.section { margin: 28px 0; }
.section-header { align-items: flex-start; gap: 12px; margin-bottom: 12px; }
.section-header > * { min-width: 0; }
.section-header .link-button { flex: none; }
.section-header > .caption { padding-top: 4px; text-align: right; }
.context-line, .read-meta { gap: 8px; overflow-wrap: anywhere; }
.read-meta { margin: 12px 0 24px; }
.context-line > span, .read-meta > span { min-width: 0; }
.dot { flex: none; }

/* Shared controls keep the same dimensions across a page, a sheet and a form. */
.button {
  min-height: 48px;
  padding: 11px 16px;
  border-radius: var(--ui-control-radius);
  font-size: var(--ui-control);
  line-height: 24px;
  text-align: center;
  white-space: normal;
  overflow-wrap: anywhere;
}
.button.primary { color: var(--ink); }
.button.secondary { border-color: #d5d5d5; }
.button.quiet { color: var(--ink); }
.button.danger { color: var(--danger); background: #fff8f8; border-color: #e4bfbf; }
.button svg { width: 20px; height: 20px; }
.button-row { align-items: stretch; gap: 8px; }
.button-row > * { min-inline-size: 0; }
.button-row.wrap > .button { flex-basis: 136px; }
.link-button { font-size: var(--ui-control); line-height: 24px; overflow-wrap: anywhere; }
.icon-button { width: 48px; height: 48px; border-radius: var(--ui-control-radius); }
.chip { font-size: var(--ui-control); line-height: 24px; padding: 11px 14px; }
.filters { margin-inline: calc(-1 * var(--ui-gutter)); padding-inline: var(--ui-gutter); }
.tag {
  font-size: var(--ui-caption);
  line-height: 20px;
  padding: 2px 7px;
  border-radius: 6px;
  overflow-wrap: anywhere;
}
.tag.gray { color: #626262; }
.tag.orange { color: #973611; }
.tag.green { color: #2c6447; }
.segmented { margin: 20px 0 24px; gap: 24px; }
.segmented button { font-size: var(--ui-control); line-height: 24px; min-width: 0; }

/* Cards represent objects; lists remain unboxed to preserve scanning rhythm. */
.record-row { gap: 12px; padding-block: 20px; }
.record-title { font-size: var(--ui-body); line-height: 26px; margin-bottom: 8px; }
.record-preview { font-size: var(--ui-control); line-height: 24px; margin-bottom: 10px; }
.record-meta { font-size: var(--ui-caption); line-height: 20px; gap: 6px; }
.record-row .icon-button { width: 48px; margin-right: -8px; }
.record-symbol { width: 36px; height: 42px; border-radius: 8px; }
.list-heading { align-items: center; gap: 8px; }
.list-heading > * { min-width: 0; }
.list-heading > div { display: flex; gap: 12px; flex: none; }
.list-heading .link-button { font-size: var(--ui-caption); }
.note-card {
  border-radius: var(--ui-radius);
  padding: 16px;
  margin: 12px 0;
  box-shadow: none;
  overflow-wrap: anywhere;
}
.note-card.selected { border-color: #efb79f; background: #fff9f5; }
.note-card-top { gap: 12px; align-items: flex-start; margin-bottom: 8px; }
.note-card-top > h3 { min-width: 0; }
.note-card-top > .tag { flex: 0 1 auto; max-width: 45%; text-align: center; }
.note-card p { font-size: var(--ui-control); line-height: 24px; }
.note-card .card-meta { font-size: var(--ui-caption); line-height: 20px; margin-top: 12px; gap: 8px; }
.settings-row { min-height: 76px; padding: 16px 0; gap: 12px; }
.settings-row .row-copy > span { font-size: var(--ui-body); line-height: 26px; }
.settings-row .row-copy > small { font-size: var(--ui-caption); line-height: 20px; margin-top: 4px; }
.settings-row .trailing {
  flex: 0 1 auto;
  max-width: 32%;
  font-size: var(--ui-caption);
  line-height: 20px;
  text-align: right;
  overflow-wrap: anywhere;
}
.row-chevron { flex: none; width: 18px; height: 18px; }
.template-grid { gap: 12px; }
.template-tile { min-height: 176px; padding: 16px; border-radius: var(--ui-radius); }
.template-tile h3 { font-size: var(--ui-control); line-height: 24px; }
.template-tile p { font-size: var(--ui-caption); line-height: 20px; overflow-wrap: anywhere; }
.template-icon { margin-bottom: 16px; border-radius: 8px; }
.workflow-stage { gap: 12px; padding-block: 16px; }
.workflow-stage h3 { font-size: var(--ui-control); line-height: 24px; }
.workflow-stage p { font-size: var(--ui-caption); line-height: 20px; }
.version-head { align-items: flex-start; }
.version-head > * { min-width: 0; }
.version-item p { font-size: var(--ui-control); line-height: 24px; overflow-wrap: anywhere; }
.stats-line { flex-wrap: wrap; gap: 8px 16px; }

/* Reading preferences apply to the text being judged, including comparisons. */
.article, .compare-content, .selection-context blockquote, .field textarea.large {
  font-size: var(--body, 16px);
  line-height: 1.85;
  overflow-wrap: anywhere;
}
.article { word-break: normal; }
.article-title { margin-bottom: 12px; }
.reader-byline { display:flex; align-items:center; gap:12px; color:var(--muted); font-size:var(--ui-caption); line-height:22px; }
.reader-tools { display:flex; justify-content:space-between; align-items:center; border-bottom:1px solid var(--line); margin:14px 0 28px; }
.reader-tools .link-button { min-height:44px; }
.article.reader-prose { white-space:normal; }
.reader-paragraph { display:block; white-space:pre-wrap; margin:0 0 1.25em; scroll-margin-top:100px; }
.reader-paragraph:last-child { margin-bottom:0; }
.reader-return { box-shadow:-3px 0 var(--accent); background:#fff9f5; }
.reader-provenance { margin:32px 0 0; }
.reader-provenance > .link-button { display:block; min-height:44px; text-align:left; }
.reader-provenance p { margin:12px 0; }
.reader-provenance summary > span { margin-left:auto; }
.picker-intro { margin:12px 0 24px; }
.picker-count { margin:24px 0 8px; }
.paragraph-option { display:block; text-align:left; width:100%; border:0; border-bottom:1px solid var(--line); padding:20px 0; color:var(--ink); background:transparent; }
.paragraph-number { display:block; color:var(--muted); font-size:var(--ui-caption); line-height:20px; margin-bottom:10px; }
.paragraph-preview { display:-webkit-box; -webkit-line-clamp:4; -webkit-box-orient:vertical; overflow:hidden; white-space:pre-wrap; overflow-wrap:anywhere; font-size:var(--body,16px); line-height:1.85; }
.paragraph-open { display:flex; gap:4px; align-items:center; color:var(--accent); margin-top:12px; font-size:var(--ui-caption); line-height:20px; }
.paragraph-open svg { width:16px; height:16px; }
.picker-pagination { margin-top:24px; }
.quote-review { margin:20px 0; }
.quote-review .quote-warning { border-left:2px solid var(--accent); padding-left:12px; }
.quote-review .link-button { min-height:44px; }
.reading-estimate { color: var(--muted); font-size: var(--ui-caption); line-height: 20px; margin: 12px 0 20px; }
.asset-entry { display: flex; width: 100%; align-items: center; gap: 12px; padding: 16px; margin: 0 0 24px; background: #f4f2ee; border: 1px solid var(--line); border-radius: var(--ui-radius); text-align: left; color: var(--ink); }
.asset-entry > svg { width: 20px; height: 20px; flex: none; }
.asset-entry > span { flex: 1; min-width: 0; font-size: var(--ui-control); line-height: 24px; }
.asset-entry small { display: block; font-size: var(--ui-caption); color: var(--muted); line-height: 20px; margin-top: 2px; }
.asset-entry b { font: 500 16px/24px var(--font-mono,monospace); }
.asset-collect { margin-top: 28px; padding: 22px 20px; background: #f4f2ee; border-radius: var(--ui-radius); }
.asset-collect h2 { margin-top: 10px; font-size: 20px; line-height: 30px; }
.asset-collect p { margin: 10px 0 18px; font-size: var(--ui-control); line-height: 24px; color: var(--muted); }
.asset-collect .button { width: 100%; background: #fff; }
.asset-filters { margin-top: 24px; }
.asset-list { border-top: 1px solid var(--line); }
.asset-card { display: block; width: 100%; text-align: left; padding: 24px 0; color: var(--ink); border: 0; border-bottom: 1px solid var(--line); background: transparent; }
.asset-card-meta { font-size: var(--ui-caption); line-height: 20px; color: var(--muted); }
.asset-card h2 { font-size: 21px; line-height: 1.5; margin: 10px 0; overflow-wrap: anywhere; }
.asset-card > p { font-size: var(--ui-control); line-height: 26px; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.asset-tags { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 16px; }
.asset-tags .tag { max-width: 100%; overflow-wrap: anywhere; white-space: normal; }
.asset-reader > .asset-tags { margin: 0 0 18px; }
.asset-provenance { margin-top: 24px; }
.asset-provenance > .link-button { display: block; min-height: 44px; text-align: left; }
.asset-local-note { margin-top: 24px; line-height: 22px; }
.compare-block { border-radius: var(--ui-radius); margin: 16px 0; }
.compare-label { gap: 12px; align-items: flex-start; font-size: var(--ui-caption); line-height: 20px; }
.compare-label > span { min-width: 0; overflow-wrap: anywhere; }
.compare-label > span:last-child { flex: none; }
.compare-content { padding: 16px; }
.selection-context { margin: 20px 0; padding-left: 14px; border-left-width: 2px; }
.selection-context summary { font-size: var(--ui-caption); line-height: 20px; }
.selection-context summary > span { min-width: 0; overflow-wrap: anywhere; }
.selection-context summary > span:last-child { text-align: right; }
.selection-context blockquote { max-height: 180px; padding-block: 8px 12px; }
.citation { padding: 14px 16px; border-left-color: var(--accent); background: #faf9f7; }
.citation p { font-size: var(--ui-control); line-height: 24px; overflow-wrap: anywhere; }
.citation .link-button { font-size: var(--ui-caption); line-height: 20px; }
.adjustment-intro, .compare-help, .help-text { font-size: var(--ui-control); line-height: 24px; }
.adjustment-page textarea.large { min-height: 200px; line-height: 1.85; }
.adjust-mode button { font-size: var(--ui-control); line-height: 24px; padding: 8px; }
.prompt-presets { gap: 8px; margin: 0 0 8px; }
.prompt-presets .button { font-size: var(--ui-caption); line-height: 20px; padding: 10px 12px; }
.ai-inline { flex-wrap: wrap; font-size: var(--ui-caption); line-height: 20px; }
.ai-inline > span { min-width: 0; }
.answer-preview h2 { font-size: var(--ui-section); line-height: 28px; overflow-wrap: anywhere; }
.player { padding: 12px; border-radius: var(--ui-radius); }
.player-head { font-size: var(--ui-caption); line-height: 20px; align-items: flex-start; }
.player-head > span:last-child { flex: none; }
.player-tools { flex-wrap: wrap; }
.player-tools button { font-size: var(--ui-caption); line-height: 20px; }
.audio-unavailable { font-size: var(--ui-caption); line-height: 22px; overflow-wrap: anywhere; }

/* Errors and recovery use the same hierarchy as saved and empty states. */
.notice { gap: 12px; margin: 16px 0; padding: 14px; border-radius: var(--ui-control-radius); font-size: var(--ui-control); line-height: 24px; }
.notice strong { font-size: var(--ui-control); line-height: 24px; margin-bottom: 4px; }
.notice > div { overflow-wrap: anywhere; }
.notice > svg { margin-top: 3px; }
.notice .link-button { font-size: var(--ui-caption); line-height: 20px; }
.notice.warning { color: #75491c; }
.notice.error { color: #903535; }
.notice.success { color: #326043; }
.empty { padding: 44px 4px; }
.empty-icon { width: 64px; height: 64px; border-radius: 16px; margin-bottom: 24px; background: var(--soft); box-shadow: none; }
.empty-icon svg { width: 28px; height: 28px; }
.empty h2 { font-size: var(--ui-section); line-height: 28px; }
.empty p { font-size: var(--ui-control); line-height: 24px; max-width: 340px; margin-bottom: 24px; }
.empty .button { max-width: 100%; }
.empty .link-button { max-width: 100%; text-align: center; }
.toast { font-size: var(--ui-control); line-height: 24px; padding: 12px 16px; border-radius: var(--ui-control-radius); overflow-wrap: anywhere; }
.error-page { padding: 14vh var(--ui-gutter) 48px; }
.error-page p { font-size: var(--ui-control); line-height: 24px; overflow-wrap: anywhere; }

/* Editable fields retain native inputs, consistent focus and readable hints. */
.field { margin: 20px 0; min-width: 0; }
.field-label { font-size: var(--ui-control); line-height: 24px; margin-bottom: 8px; }
.field-hint { display: block; margin-top: 8px; overflow-wrap: anywhere; }
.field input, .field select, .field textarea, .search-input {
  max-width: 100%;
  min-width: 0;
  min-height: 48px;
  border-radius: var(--ui-control-radius);
  padding: 11px 14px;
  font-size: var(--ui-body);
  line-height: 26px;
  border-color: #cfcfcf;
}
.field textarea { line-height: 1.75; scroll-margin-block: 100px 140px; }
.field textarea.large { font-size: var(--body, 16px); line-height: 1.85; }
.field select { padding-right: 40px; }
.field input[type=file] { font-size: var(--ui-caption); line-height: 22px; padding: 12px; }
.field input[type=file]::file-selector-button { min-height: 40px; padding: 8px 10px; }
.field input[readonly], .field textarea[readonly] { background: var(--soft); }
.field [aria-invalid=true] { border-color: var(--danger); background: #fffafa; }
.field .error, .field-error { display: block; margin-top: 8px; color: var(--danger); font-size: var(--ui-caption); line-height: 20px; }
.field input:focus, .field textarea:focus, .field select:focus, .search-input:focus { border-color: var(--ink); outline: none; }
.search-input { padding-left: 44px; }
.search-wrap > svg { top: 15px; }
.check-row { padding-block: 12px; gap: 12px; font-size: var(--ui-control); line-height: 24px; }
.check-row > span { min-width: 0; overflow-wrap: anywhere; }
.check-row input { margin-top: 3px; width: 20px; height: 20px; }
.disclosure { padding-inline: 14px; border-radius: var(--ui-control-radius); }
.disclosure summary { gap: 12px; font-size: var(--ui-control); line-height: 24px; padding-block: 12px; }
.disclosure summary:after { flex: none; }
.disclosure p { font-size: var(--ui-caption); line-height: 22px; }

/* Persistent actions have generous hit areas without a second navigation layer. */
.bottom-actions {
  padding: 12px 16px max(12px, env(safe-area-inset-bottom, 0px));
  gap: 8px;
  align-items: stretch;
  background: var(--paper);
}
.bottom-actions > .button, .bottom-actions .button-row > .button {
  flex: 1 1 0;
  min-width: 0;
  max-width: 100%;
}
.bottom-actions.selection-actions { display: block; }
.selection-summary { font-size: var(--ui-control); line-height: 24px; margin-bottom: 8px; }
.selection-summary span { font-size: var(--ui-caption); line-height: 20px; }
.bottom-nav { background: var(--paper); }
.bottom-nav button { position: relative; font-size: var(--ui-caption); line-height: 20px; gap: 3px; }
.bottom-nav button.active:after { bottom: 0; }
.keyboard-open .page { padding-bottom: 32px; }
.keyboard-open .bottom-actions { padding-bottom: max(12px, env(safe-area-inset-bottom, 0px)); }

/* Sheets share the same form and action language; long names stay readable. */
.dialog {
  padding-inline: 20px;
  max-height: calc(100dvh - 24px - env(safe-area-inset-top, 0px));
  border-radius: 18px 18px 0 0;
}
.dialog-head { gap: 12px; align-items: flex-start; margin-bottom: 12px; }
.dialog-head h2 { flex: 1; min-width: 0; font-size: var(--ui-section); line-height: 28px; padding-top: 10px; }
.dialog-head .icon-button { margin-right: -8px; }
.dialog p { font-size: var(--ui-control); line-height: 24px; overflow-wrap: anywhere; }
.dialog .button-row { flex-wrap: wrap; margin-top: 20px; }
.dialog .button-row > .button { flex: 1 1 120px; }
.dialog .button-row:empty { display: none; }
.menu-item { min-height: 56px; padding: 14px 0; gap: 12px; font-size: var(--ui-control); line-height: 24px; }
.menu-item > span { flex: 1; min-width: 0; overflow-wrap: anywhere; }
.menu-item small { max-width: 34%; font-size: var(--ui-caption); line-height: 20px; text-align: right; overflow-wrap: anywhere; }

button:focus-visible, a:focus-visible, summary:focus-visible,
.field input:focus-visible, .field select:focus-visible, .field textarea:focus-visible,
.search-input:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--ui-focus);
  outline-offset: 3px;
}
.switch input:focus-visible + span { outline: 2px solid var(--ui-focus); outline-offset: 3px; }
button[aria-busy=true] { cursor: progress; }
.spinner { width: 16px; height: 16px; flex: none; }

@media (min-width: 760px) {
  :root { --ui-gutter: 36px; }
  .topbar { height: 82px; padding: 17px 32px; }
  .page { padding-top: 32px; min-height: calc(100dvh - 82px); }
  .page.section-page { padding-top: 28px; }
  .bottom-actions { padding: 16px 36px; }
  .bottom-actions > .button, .bottom-actions .button-row > .button { flex: 0 1 auto; min-width: 180px; }
  .note-card { padding: 20px; }
  .template-tile { padding: 20px; }
  .empty { padding: 64px 20px; }
  .dialog { border-radius: 16px; max-height: calc(100dvh - 64px); padding: 20px 24px 24px; }
  .dialog-head h2 { padding-top: 10px; }
}

@media (max-width: 359px) {
  :root { --ui-gutter: 16px; }
  .topbar { padding-inline: 12px; }
  .page-heading h1 { font-size: var(--ui-title); }
  .page-heading, .section-header { gap: 8px; }
  .button { padding-inline: 12px; }
  .bottom-actions { padding-inline: 12px; }
  .bottom-actions .button { font-size: var(--ui-control); }
  .record-row { gap: 8px; }
  .record-symbol { width: 32px; }
  .record-row .icon-button { margin-right: -4px; }
  .note-card { padding: 14px; }
  .template-grid { gap: 8px; }
  .template-tile { padding: 14px 12px; }
  .settings-row { gap: 10px; }
  .settings-row .trailing { max-width: 28%; }
  .segmented { gap: 20px; }
  .dialog { padding-inline: 16px; }
  .list-heading > div { gap: 8px; }
  .stats-line { font-size: var(--ui-caption); }
}

@media (hover: hover) and (pointer: fine) {
  button.note-card:hover, .template-tile:hover { border-color: #bdbdbd; background: #fcfcfb; }
  button.settings-row:hover, .menu-item:hover { background: #f8f8f6; }
}
@media (hover: none) {
  .button:hover:not(:disabled) { filter: none; }
  .icon-button:hover { background: transparent; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { scroll-behavior: auto !important; }
}

/* Asset reuse: keep the article dominant and put actions next to their object. */
.asset-identity{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:6px 0 14px;color:var(--muted);font-size:12px}
.asset-identity .link-button{font-size:12px;min-height:44px;flex-shrink:0;text-decoration:underline;text-underline-offset:4px}
.asset-derived{border-top:1px solid var(--line);margin-top:28px;padding-top:22px}
.asset-derived h2{font-size:17px}.asset-derived .row{min-width:0}
.draft-origin-label{margin-top:16px;font-size:14px;color:var(--ink)}
.asset-collect>.link-button{display:flex;margin-top:8px}
@media(max-width:360px){.asset-identity{gap:2px}.asset-reader+.bottom-actions{gap:8px}.asset-reader+.bottom-actions .button{padding-inline:10px;font-size:13px}}

/* V07.12: the library starts with user-owned topics, then readable article rows. */
.asset-browser .page-heading .eyebrow { display:block; margin-bottom:8px; color:var(--muted); }
.asset-search-form { display:flex; align-items:center; gap:8px; }
.asset-search-form .search-wrap { flex:1; min-width:0; margin:0; }
.asset-search-form .search-input { width:100%; }
.asset-search-form .search-submit { flex:none; background:var(--ink); color:var(--paper); }
.library-shortcuts { display:flex; gap:8px; margin:16px 0 28px; }
.library-shortcuts .button { flex:1; min-width:0; background:var(--soft); display:flex; justify-content:space-between; align-items:center; gap:8px; }
.library-shortcuts .button span { color:var(--muted); font-variant-numeric:tabular-nums; }
.topic-list { border-top:1px solid var(--line); }
.topic-row { width:100%; display:flex; align-items:center; gap:12px; text-align:left; color:var(--ink); background:transparent; padding:18px 0; min-height:80px; border:0; border-bottom:1px solid var(--line); }
.topic-mark { display:grid; place-items:center; flex:none; width:36px; height:36px; border:1px solid var(--line); border-radius:10px; font-size:20px; font-weight:400; color:var(--accent); }
.topic-copy { flex:1; min-width:0; }
.topic-copy strong { display:block; font-size:16px; line-height:24px; font-weight:600; overflow-wrap:anywhere; }
.topic-copy small { display:block; font-size:12px; line-height:20px; margin-top:3px; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; color:var(--muted); }
.topic-count { flex:none; font-size:12px; color:var(--muted); font-variant-numeric:tabular-nums; }
.topic-row>svg { flex:none; width:16px; height:16px; color:var(--muted); }
.topic-footnote { margin-top:14px; line-height:20px; }
.library-removed { border-top:1px solid var(--line); margin-top:28px; padding-top:8px; }
.library-removed .link-button { min-height:48px; color:var(--muted); }
.asset-result-heading { align-items:center; margin:20px 0 8px; min-height:44px; }
.asset-result-heading .link-button { min-height:44px; }
.asset-browser .asset-card h2 { font-size:20px; line-height:30px; }
.asset-browser .asset-card:active,.topic-row:active { background:var(--soft); }
.topic-pick { display:inline-flex; align-items:center; justify-content:center; min-height:44px; padding:8px 12px; max-width:100%; border:1px solid var(--line); border-radius:10px; font-size:13px; line-height:22px; color:var(--ink); background:var(--paper); overflow-wrap:anywhere; }
.topic-pick[aria-pressed=true] { border-color:var(--ink); background:var(--ink); color:var(--paper); }
.asset-reader>.asset-tags { align-items:center; gap:8px; margin-bottom:12px; }
.topic-suggestions { margin:-6px 0 20px; }
.topic-suggestions>div { display:flex; flex-wrap:wrap; gap:8px; margin-top:8px; }
.topic-switch-list { max-height:52dvh; overflow:auto; overscroll-behavior:contain; padding:0 3px; }
.asset-browser .empty { padding-block:36px; }
@media(max-width:359px) { .topic-row{gap:8px}.topic-mark{width:30px;height:30px}.library-shortcuts .button{font-size:13px} }
@media(hover:hover) and (pointer:fine) { .topic-row:hover,.asset-browser .asset-card:hover{background:#faf9f7}.topic-pick:hover{border-color:var(--ink)} }

/* V07.13 — Important articles first, with independent controls. */
.asset-row { position:relative; border-bottom:1px solid var(--line); }
.asset-row .asset-card { border-bottom:0; }
.asset-row:not(.is-selecting) .asset-card-meta { display:block; padding-right:52px; min-height:24px; }
.asset-star { display:inline-flex; justify-content:center; align-items:center; width:44px; height:44px; flex:0 0 44px; border:0; border-radius:10px; background:transparent; color:var(--muted); }
.asset-star svg { width:22px; height:22px; }
.asset-star[aria-pressed=true] { color:var(--accent); }
.asset-star[aria-pressed=true] svg { fill:var(--accent); }
.asset-row>.asset-star { position:absolute; right:0; top:12px; }
.asset-star:active { background:var(--soft); }
.asset-star:focus-visible { outline:2px solid var(--accent); outline-offset:2px; }
.asset-header-actions { display:flex; gap:4px; }
.asset-group { margin-top:24px; }
.asset-group-label { display:flex; align-items:center; gap:8px; font-size:14px; line-height:24px; font-weight:500; margin-bottom:8px; }
.asset-group-label svg { width:16px; height:16px; color:var(--accent); fill:var(--accent); }
.asset-group-label span { margin-left:auto; font-size:12px; color:var(--muted); }
.library-shortcuts .starred-shortcut { grid-column:1/-1; justify-content:flex-start; gap:10px; }
.library-shortcuts .starred-shortcut svg { width:20px; height:20px; color:var(--accent); fill:var(--accent); }
.library-shortcuts .starred-shortcut span:first-of-type { flex:1; color:var(--ink); }
.asset-list-tools { display:flex; gap:16px; align-items:center; }
.asset-row.is-selecting .asset-card { padding-left:40px; }
.asset-check { position:absolute; left:0; top:27px; width:24px; height:24px; border:1px solid var(--line); border-radius:6px; display:flex; justify-content:center; align-items:center; }
.asset-check svg { width:18px; height:18px; }
.asset-row.is-selected .asset-check { color:var(--paper); background:var(--ink); border-color:var(--ink); }
.asset-row.is-selected { background:var(--soft); }
.selection-count { flex:1; align-self:center; font-size:14px; }
.has-selection { padding-bottom:120px; }
.topic-management { border-top:1px solid var(--line); margin-top:24px; }
.topic-management .row-copy { overflow-wrap:anywhere; }
.topic-preview { margin:16px 0; background:var(--soft); border-radius:12px; padding:16px; }
.topic-preview h3 { font-size:18px; line-height:28px; overflow-wrap:anywhere; }
.topic-preview p { margin-top:8px; font-size:14px; line-height:24px; color:var(--muted); }
.topic-preview-articles { margin-top:16px; padding:0; list-style:none; max-height:180px; overflow:auto; }
.topic-preview-articles li { padding:10px 0; border-bottom:1px solid var(--line); font-size:14px; line-height:24px; overflow-wrap:anywhere; }
.topic-quick-picks { display:flex; gap:8px; flex-wrap:wrap; margin:0 0 20px; }
.asset-browser>.notice { margin:20px 0; }
@media(max-width:359px) { .asset-list-tools{gap:10px}.asset-row.is-selecting .asset-card{padding-left:34px}.asset-group{margin-top:20px} }
/* V07.14: record first, read first, preserve the same mobile control language. */
.capture-shortcuts{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin:0 0 20px}.capture-shortcuts .button{min-height:48px}.capture-page h1{margin-top:12px}.capture-intro{color:var(--muted,#777);line-height:1.8;margin:14px 0 28px}.recording-surface{display:flex;align-items:center;flex-direction:column;gap:12px;padding:28px 0}.recording-orbit{width:76px;height:76px;border:1px solid #e8e8e8;border-radius:50%;display:grid;place-items:center;background:#f7f7f7}.recording-orbit svg{width:28px;height:28px}.is-recording .recording-orbit{border-color:#ff541c;color:#ff541c;background:#fff2ec}.recording-time{font-size:44px;font-variant-numeric:tabular-nums;letter-spacing:-1px;line-height:1.3}.recording-state{font-size:14px}.recording-surface small{font-size:12px;color:#777}.capture-actions{display:flex;gap:12px;margin:16px 0}.capture-actions>.button{flex:1;min-height:52px}.capture-footnote{line-height:1.8;margin:24px 0}.capture-import{border-top:1px solid #e6e6e6;padding:18px 0}.capture-title{font-size:16px;font-weight:600}.composition-row{display:flex;gap:12px;align-items:center;padding:18px 0;border-bottom:1px solid #e7e7e7}.composition-number{color:#ff541c;font-size:13px;width:20px}.composition-row>div:nth-child(2){flex:1;min-width:0}.composition-row strong{font-size:15px;font-weight:600;display:block;overflow-wrap:anywhere}.composition-row small{display:block;color:#777;font-size:12px;margin-top:8px}.composition-order{display:flex}.composition-order .button{min-width:40px;min-height:44px;padding:8px}.composition-sources{margin-bottom:28px}.account-line{display:flex;gap:10px;align-items:center;padding:20px 0;border-bottom:1px solid #eee}.account-line>span{flex:1;overflow-wrap:anywhere}.account-line svg{width:20px;height:20px}.sync-status{padding:20px;background:#f6f6f6;border-radius:12px;margin:16px 0}.sync-status p{margin-top:10px;color:#777;font-size:14px}.sync-actions{display:grid;gap:12px;margin:18px 0}.sync-comparison{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:20px 0}.sync-comparison>div{display:flex;flex-direction:column;gap:10px;background:#f5f5f5;border-radius:12px;padding:16px}.sync-comparison small,.sync-comparison span{color:#777;font-size:12px}.bottom-actions .selection-count{flex-basis:100%;font-size:12px}.has-selection~.bottom-actions{flex-wrap:wrap}.button[disabled]{opacity:.38;cursor:not-allowed}.capture-page .field:has(input){margin-top:20px}
@media(max-width:359px){.composition-row{gap:6px}.composition-order .button{min-width:36px}.capture-shortcuts .button{padding:10px;font-size:14px}.recording-time{font-size:40px}}

.draft-compose-action{margin:24px 0 0}.composition-preview .reader-prose{margin-top:28px}

/* Email account follows the same mobile reading rhythm; no separate login theme. */
.email-account h1{max-width:16em}.email-account .account-line{display:flex;gap:10px;align-items:center;flex-wrap:wrap;margin:24px 0;padding:16px 0;border-block:1px solid var(--line)}
.email-account .account-line strong{font-size:15px;overflow-wrap:anywhere;flex:1;min-width:0}.email-account .account-line svg{width:20px;height:20px}
.email-login h2{font-size:20px;line-height:1.6}.email-login .field{margin:24px 0 8px}.email-login .field-error{min-height:24px;margin:8px 0 16px}
.email-secondary{display:flex;justify-content:space-between;gap:12px;margin-top:8px}.email-login .caption{margin-top:20px}.email-login input[name=otp]{font-size:22px;letter-spacing:.12em;font-variant-numeric:tabular-nums}.email-login input[name=otp]::placeholder{font-size:16px;letter-spacing:normal}