/* Shared UI contract. Keep page layout in its own stylesheet. */
:root {
  --font-ui: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  --text-ui: 14px;
  --text-meta: 12px;
  --space-1: 4px;
  --space-2: 8px;
  --space-3: 12px;
  --space-4: 16px;
  --space-6: 24px;
  --radius-control: 4px;
  --control-height: 36px;
}
/* One family across headings, content and native form controls. Math keeps
   its specialized glyph fonts so equations remain correctly typeset. */
body, body *:not(.katex, .katex *, math, math *) {
  font-family: var(--font-ui) !important;
}
body { font-size: var(--text-ui); line-height: 1.5; }
body h1 { font-size: 32px; font-weight: 600; line-height: 1.2; letter-spacing: -0.6px; }
body h2, body dialog h2 { font-size: 22px; font-weight: 600; line-height: 1.3; letter-spacing: -0.3px; }
body h3 { font-size: 18px; font-weight: 600; line-height: 1.4; }
body :is(label, input, textarea, select, button) { font-size: var(--text-ui); }
body :is(input:not([type="checkbox"]):not([type="radio"]):not([type="range"]), textarea, select) {
  border-radius: var(--radius-control);
  padding: var(--space-2) var(--space-3);
  min-height: var(--control-height);
  line-height: 1.5;
}
body :is(.primary, .secondary) {
  border-radius: var(--radius-control);
  min-height: var(--control-height);
  padding: var(--space-2) var(--space-3);
  font-size: var(--text-ui);
  line-height: 1.3;
  font-weight: 500;
}
body .text-button { font-size: var(--text-ui); border-radius: var(--radius-control); }
body .text-button:hover { text-decoration: none; }
body :is(input, textarea, select):focus,
body :is(a, button, summary):focus-visible,
.reader-app :is(a, button, summary):focus-visible {
  outline: 1px solid var(--green, #315541);
  outline-offset: 2px;
  box-shadow: none;
}
.reader-app #section-title { font-size: 22px; font-weight: 500; }
.reader-app .article-composer { border-radius: var(--radius-control); }
.reader-app .article-composer:focus-within { border-color: var(--green); box-shadow: none; }
.reader-app #sidebar :is(#search, .folder-row, .folder-heading, .library-item strong, .library-filters button, #folder-actions, #folder-actions button, #library-empty) {
  font-size: var(--text-ui);
}
.reader-app #sidebar .library-item :is(span, small),
.reader-app .folder-empty { font-size: var(--text-meta); line-height: 1.5; }
.reader-app :is(.folder-row, .library-item) { border-radius: var(--radius-control); }
.reader-app .folder-heading { padding-left: var(--space-2); }
.reader-app .folder-heading #new-folder {
  display: inline-flex; align-items: center; justify-content: center;
  width: 32px; height: 32px; min-height: 32px;
  border: 0; padding: 0; background: transparent;
}
.reader-app .folder-heading #new-folder:hover { background: #edf0e8; }
.reader-app #folder-editor {
  border: 0; border-radius: 0; padding: var(--space-2);
  margin: 0 0 var(--space-3); background: transparent;
}
.reader-app #folder-editor label {
  margin: 0 0 var(--space-2); font-size: var(--text-ui);
  font-weight: 600; line-height: 1.5;
}
.reader-app #folder-name { margin: 0 0 var(--space-2); font-size: var(--text-ui); }
.reader-app .folder-editor-buttons { gap: var(--space-2); }
.reader-app .folder-editor-buttons button {
  font-size: var(--text-ui); padding: var(--space-2) var(--space-3);
  min-height: var(--control-height); border-radius: var(--radius-control);
}
.reader-app #folder-editor-error { margin-top: var(--space-2); font-size: var(--text-meta); }
.reader-app .library-filters { gap: var(--space-3); }
.reader-app #library-empty { margin: var(--space-3) var(--space-2); }
@media (max-width: 720px) {
  :root { --control-height: 44px; }
  /* 16px fields avoid Safari's automatic input zoom. Labels match the fields. */
  body :is(input, textarea, select),
  .reader-app #folder-editor :is(label, #folder-name) { font-size: 16px; }
  .reader-app .folder-heading #new-folder { width: 44px; height: 44px; }
}

.reader-app :is(.library-filters, .tabs) .text-button { border-radius: 0; }

/* Speed uses the same compact control in the player, settings and sharing. */
.speed-slider { display: inline-flex; align-items: center; gap: 12px; min-width: 0; }
.speed-slider input[type="range"] { width: 128px; min-width: 64px; height: 36px; padding: 0; margin: 0; border: 0; background: transparent; accent-color: var(--green); cursor: pointer; }
.speed-slider output { min-width: 40px; font-size: 14px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.reader-app #mini-speed { width: 80px; height: 36px; padding: 0; border: 0; background: transparent; }
.reader-app .speed-row .speed-slider { display: inline-flex; }
@media (max-width:720px) { .speed-slider input[type="range"] { width: 96px; height: 44px; } }

/* A quiet track and thumb, without a rectangular input focus frame. */
.reader-app .speed-slider input[type="range"] {
  appearance: none;
  -webkit-appearance: none;
  outline: none;
  box-shadow: none;
  border-radius: 0;
}
.reader-app .speed-slider input[type="range"]:focus { outline: none; box-shadow: none; }
.speed-slider input::-webkit-slider-runnable-track {
  height: 4px;
  border-radius: 2px;
  background: linear-gradient(to right, var(--green) 0 var(--speed-fill, 9.09%), var(--line) var(--speed-fill, 9.09%) 100%);
}
.speed-slider input::-webkit-slider-thumb {
  appearance: none;
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  margin-top: -5px;
  border: 0;
  border-radius: 50%;
  background: var(--green);
  transition: transform 120ms ease, box-shadow 120ms ease;
}
.speed-slider input::-moz-range-track { height: 4px; border-radius: 2px; background: var(--line); }
.speed-slider input::-moz-range-progress { height: 4px; border-radius: 2px; background: var(--green); }
.speed-slider input::-moz-range-thumb { width: 14px; height: 14px; border: 0; border-radius: 50%; background: var(--green); transition: transform 120ms ease, box-shadow 120ms ease; }
.speed-slider input:hover::-webkit-slider-thumb, .speed-slider input:active::-webkit-slider-thumb { transform: scale(1.15); }
.speed-slider input:hover::-moz-range-thumb, .speed-slider input:active::-moz-range-thumb { transform: scale(1.15); }
.speed-slider input:focus-visible::-webkit-slider-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--green); }
.speed-slider input:focus-visible::-moz-range-thumb { box-shadow: 0 0 0 3px var(--paper), 0 0 0 4px var(--green); }
@media (prefers-reduced-motion: reduce) {
  .speed-slider input::-webkit-slider-thumb { transition: none; }
  .speed-slider input::-moz-range-thumb { transition: none; }
}

/* Library items share one title style, with quiet drag and context controls. */
.reader-app #sidebar .folder-row,
.reader-app #sidebar .library-item strong { font-size: var(--text-ui); font-weight: 500; line-height: 1.5; }
.library-drop-target { background: #e7eddf !important; outline: 1px dashed var(--green); outline-offset: -1px; }
.library-context-menu { position: fixed; z-index: 1000; width: 240px; max-width: calc(100vw - 16px); max-height: calc(100dvh - 16px); overflow: auto; padding: 4px; border: 1px solid var(--line); border-radius: 4px; background: var(--paper); box-shadow: 0 4px 16px #24392f18; }
.library-context-menu[hidden] { display: none; }
.library-menu-heading { padding: 8px; font-size: 12px; color: var(--muted); overflow-wrap: anywhere; }
.library-context-menu button { display: block; width: 100%; min-height: 36px; padding: 8px; border: 0; border-radius: 3px; text-align: left; background: transparent; color: var(--ink); font-size: 14px; overflow-wrap: anywhere; }
.library-context-menu button:hover:enabled, .library-context-menu button:focus-visible { background: #e7eddf; outline: none; }
@media (max-width:720px) { .library-context-menu button { min-height:44px; } }

.library-context-menu .library-menu-icon { display: flex; align-items: center; gap: 10px; }
.library-menu-icon svg { width: 16px; height: 16px; flex-shrink: 0; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.library-context-menu .library-menu-danger { color: #b33d32; }
.library-context-menu .library-menu-danger:hover:enabled, .library-context-menu .library-menu-danger:focus-visible { background: #faeae7; }

.library-context-menu.library-icon-menu { display: flex; flex-wrap: wrap; width: 168px; gap: 4px; }
.library-icon-menu .library-menu-heading { flex-basis: 100%; }
.library-icon-menu .library-menu-icon { width: 48px; height: 40px; justify-content: center; padding: 8px; }
.library-context-menu.library-icon-menu[hidden] { display:none; }

.library-action-tooltip {
  position: fixed; z-index: 1001; max-width: min(260px, calc(100vw - 16px));
  padding: 7px 10px; border-radius: 4px;
  background: var(--ink); color: var(--paper);
  font-size: 12px; line-height: 1.45; box-shadow: 0 2px 8px #24392f18;
}
.library-action-tooltip[hidden] { display: none; }

.folder-delete-dialog { width: min(440px, calc(100vw - 32px)); padding: 24px; border: 1px solid var(--line); border-radius: 6px; color: var(--ink); background: var(--paper); }
.folder-delete-dialog p { line-height: 1.5; overflow-wrap: anywhere; }
.folder-delete-dialog .dialog-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 24px; }
.folder-delete-dialog .folder-delete-confirm { padding: 8px 16px; border: 1px solid #b33d32; border-radius: 4px; background: #b33d32; color: #fff; }
.folder-delete-dialog .folder-delete-confirm:hover { background: #963127; }