/* css/app-theme.css
   Dark mode + font overrides for the "account app" pages (manager.html,
   channel.html, settings.html), which share the --bg/--surface/--ink/
   --muted/--accent variable scheme rather than the main site's
   --color-* scheme. Driven by the same data-theme/data-font/data-font-size
   attributes js/theme.js sets on <html>. */

:root { --font-scale: 1; }
html[data-font-size="sm"] { --font-scale: 0.92; }
html[data-font-size="md"] { --font-scale: 1; }
html[data-font-size="lg"] { --font-scale: 1.12; }
body { font-size: calc(15px * var(--font-scale, 1)); }

html[data-font="serif"]   { --sans: var(--serif, 'DM Serif Display', serif); }
html[data-font="rounded"] { --sans: ui-rounded, 'Segoe UI', 'Nunito', sans-serif; }
html[data-font="mono"]    { --sans: ui-monospace, 'SFMono-Regular', Menlo, Consolas, monospace; }

html[data-theme="dark"] {
  --bg:      #14141f;
  --surface: #1b1b2c;
  --border:  #302f45;
  --ink:     #e9e7f2;
  --muted:   #9d9ab4;
  --accent2: #7c7a99;
  --tag-bg:  #2a2a40;
  --card-sh: 0 2px 12px rgba(0,0,0,.45), 0 1px 3px rgba(0,0,0,.35);
}

/* Shared topbar/brand -- fetch.html and topics.html each just render
   <nav class="topbar"><a class="brand">...</a></nav> with nothing else in
   it, and used to duplicate this exact CSS (base + the same mobile
   wrapping fix) inline in both files instead of sharing it from here. */
.topbar {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255,255,255,.92);
  backdrop-filter: blur(12px);
  border-bottom: 1px solid var(--border);
  padding: 0 24px;
  display: flex;
  align-items: center;
  height: 60px;
  gap: 16px;
  margin-bottom: 30px;
}
.brand {
  font-family: var(--serif);
  font-size: 24px;
  color: var(--ink);
  text-decoration: none;
  flex-shrink: 0;
}
.brand em { color: var(--accent); font-style: italic; }

@media (max-width: 600px) {
  /* Let the brand tagline wrap to two lines instead of overflowing past
     the edge of narrow screens. */
  .topbar { flex-wrap: wrap; height: auto; padding: 12px 16px; gap: 10px; }
  .brand  { font-size: 20px; flex-shrink: 1; min-width: 0; white-space: normal; line-height: 1.25; }
}

html[data-theme="dark"] .topbar {
  background: rgba(20,20,31,.92);
  border-bottom-color: var(--border);
}
html[data-theme="dark"] .workspace-tab { background: var(--surface); }
html[data-theme="dark"] .workspace-tab.active { background: var(--ink); color: var(--bg); border-color: var(--ink); }

/* Small white surfaces on topics.html / fetch.html (compose box inputs,
   comment bubbles, chip icons, the star-rating box, the auth pill) */
html[data-theme="dark"] textarea,
html[data-theme="dark"] .link-input-row input,
html[data-theme="dark"] .remove-link,
html[data-theme="dark"] .chip-ico,
html[data-theme="dark"] .star-box-container,
html[data-theme="dark"] .quick-rate-btn,
html[data-theme="dark"] .expand-rate-btn,
html[data-theme="dark"] .comment,
html[data-theme="dark"] .comment-item,
html[data-theme="dark"] .auth-pill .auth-link,
html[data-theme="dark"] .auth-pill .auth-logout {
  background: var(--surface);
  color: var(--ink);
  border-color: var(--border);
}