/* Base: reset, typography, buttons, form controls, badges and tag chips. */

/* Native widgets (select popups, inputs, scrollbars) follow the active theme;
   the rules mirror the two dark token blocks in tokens.css. */
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { color-scheme: dark; } }
:root[data-theme="dark"] { color-scheme: dark; }
:root[data-theme="light"] { color-scheme: light; }

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
  scrollbar-width: thin;
  scrollbar-color: var(--scrollbar-thumb) transparent;
}

/* Rounded, quiet scrollbars; keep native scrolling and keyboard behavior. */
@supports selector(::-webkit-scrollbar) {
  * { scrollbar-width: auto; scrollbar-color: auto; }
  ::-webkit-scrollbar { width: 10px; height: 10px; }
  ::-webkit-scrollbar-track { background: transparent; }
  ::-webkit-scrollbar-thumb { background: var(--scrollbar-thumb); border: 3px solid transparent; background-clip: padding-box; border-radius: 999px; }
  ::-webkit-scrollbar-thumb:hover { background-color: var(--faint); border-width: 2px; }
  ::-webkit-scrollbar-thumb:active { background-color: var(--muted); }
  ::-webkit-scrollbar-button, ::-webkit-scrollbar-button:single-button { display: none; width: 0; height: 0; }
  ::-webkit-scrollbar-corner { background: transparent; }
}

body {
  font-family: var(--font-ui);
  background: var(--bg);
  color: var(--ink);
  height: 100vh;
  height: 100dvh;
  display: flex;
  flex-direction: column;
  overflow: hidden;
  -webkit-font-smoothing: antialiased;
}

/* Form controls don't inherit the page font by default (they fall back to Arial). */
button, input, select, textarea { font-family: inherit; }

/* Line icons share one look: stroke-only, current text color. */
.ui-icon { width: 1em; height: 1em; flex: none; fill: none; stroke: currentColor; stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; vertical-align: -0.125em; }

/* ==========================================================================
   Buttons & General Components
   ========================================================================== */
.btn {
  border: 1px solid var(--border);
  background: var(--panel);
  color: var(--ink-secondary);
  padding: 8px 16px;
  border-radius: var(--r-sm);
  cursor: pointer;
  font-size: var(--fs-md);
  font-weight: 500;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  transition: all .15s ease;
  user-select: none;
}

.btn:hover {
  border-color: var(--accent);
  color: var(--accent);
}

.btn:active {
  transform: translateY(1px);
}

.btn.primary {
  background: var(--accent);
  border-color: var(--accent);
  color: var(--on-accent);
  font-weight: 600;
  box-shadow: var(--shadow-accent);
}

.btn.primary:hover {
  background: var(--accent-hover);
  border-color: var(--accent-hover);
  color: var(--on-accent);
}

.btn.ghost {
  border-color: transparent;
  background: transparent;
}

.btn.ghost:hover {
  background: var(--panel-subtle);
  border-color: var(--border);
}

.btn.small {
  padding: 4px 11px;
  font-size: var(--fs-sm);
  border-radius: var(--r-sm);
}

.btn.wide {
  width: 100%;
}

.btn.stop-task {
  margin-top: 10px;
  color: var(--stop);
}

.btn.resume-task { margin-top: 8px; }

.btn:disabled {
  opacity: .5;
  cursor: not-allowed;
  pointer-events: none;
}

/* Segmented Presets (Capsule style) */
.seg-capsules {
  display: grid;
  grid-template-columns: repeat(4, minmax(max-content, 1fr));
  gap: 5px;
  background: var(--panel-subtle);
  padding: 4px;
  border-radius: var(--r-md);
  border: 1px solid var(--border);
}

.seg-btn {
  padding: 6px 4px;
  white-space: nowrap;
  font-size: var(--fs-sm);
  border: 0;
  border-radius: var(--r-sm);
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  transition: all .15s ease;
  text-align: center;
  font-weight: 500;
}

.seg-btn:hover {
  color: var(--accent);
}

.seg-btn.active {
  background: var(--panel);
  color: var(--accent);
  font-weight: 600;
  box-shadow: var(--shadow-sm);
}

/* Chinese count suffixes ("篇文章…") follow the number; the English label already names the count. */
html[lang="en"] .count-suffix { display: none; }

/* Tags & Badges (~125% scaled) */
.tag {
  font-size: var(--fs-sm);
  padding: 2.5px 8px;
  border-radius: 4px;
  background: var(--tag-topic-bg);
  color: var(--tag-topic-text);
  border: 1px solid var(--tag-topic-border);
  font-weight: 500;
  white-space: nowrap;
}

.tag.method {
  background: var(--tag-method-bg);
  color: var(--tag-method-text);
  border-color: var(--tag-method-border);
}

.tag.app {
  background: var(--tag-platform-bg);
  color: var(--tag-platform-text);
  border-color: var(--tag-platform-border);
}

.badge {
  /* Badge text stays at the xs floor: the usage table assigns badges to --fs-xs. */
  font-size: var(--fs-xs);
  padding: 2.5px 8px;
  border-radius: var(--r-full);
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  gap: 3px;
  white-space: nowrap;
}

/* Most cards are unanalyzed, so keep this quiet: neutral pill, small amber dot. */
.badge.pending {
  gap: 5px;
  background: var(--panel-subtle);
  color: var(--muted);
  font-weight: 500;
  border: 1px solid var(--border);
}
.badge.pending::before {
  content: '';
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--pending-dot);
}

.badge.noabs {
  background: var(--panel-subtle);
  color: var(--faint);
  border: 1px solid var(--border);
}

.badge.brief {
  background: var(--info-soft);
  color: var(--info);
  border: 1px solid var(--info-border);
}

/* Newly fetched since the previous visit: accent-tinted so it reads at a glance. */
.badge.new {
  background: var(--accent-soft);
  color: var(--accent);
  border: 1px solid var(--accent-border);
}
.abstract-untrusted {background:var(--untrusted-bg);color:var(--untrusted-text);border:1px solid var(--untrusted-border);}

.classification-tag {display:inline-block;padding:2px 8px;border:1px solid var(--chip-topic-border);border-radius:6px;background:var(--chip-topic-bg);color:var(--chip-topic-text);font-size:var(--fs-sm);line-height:20px;overflow-wrap:anywhere;}
.classification-tag.methods {background:var(--chip-method-bg);color:var(--chip-method-text);border-color:var(--chip-method-border);}
.classification-tag.platforms {background:var(--chip-platform-bg);color:var(--chip-platform-text);border-color:var(--chip-platform-border);}
.classification-tag.tasks {background:var(--tag-task-bg);color:var(--tag-task-text);border-color:var(--tag-task-border);}
.classification-tag.research_topic.secondary {background:var(--chip-secondary-bg);color:var(--chip-secondary-text);border-style:dashed;}
.tag-role {margin-right:5px;padding-right:5px;border-right:1px solid var(--chip-role-border);font-size:var(--fs-xs);color:var(--chip-role-text);}

.field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: var(--fs-md);
  font-weight: 500;
  color: var(--ink-secondary);
  min-width: 0;
}

.field .hint {
  font-size: var(--fs-sm);
  color: var(--muted);
  font-weight: 400;
}

.field input[type="password"],
.field input[type="text"],
.field input[type="time"],
.field input[type="number"],
.field input[type="date"],
.sel {
  width: 100%;
  min-width: 0;
  max-width: 100%;
  min-height: 38px;
  padding: 9px 13px;
  border: 1px solid var(--border);
  border-radius: var(--r-sm);
  font-size: var(--fs-md);
  background: var(--panel);
  color: var(--ink);
  outline: none;
  font-family: inherit;
  transition: all .15s ease;
}

.field input:focus, .sel:focus {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.toggle {
  display: flex;
  align-items: center;
  gap: 12px;
  cursor: pointer;
  user-select: none;
  font-size: var(--fs-md);
  position: relative;
}

.toggle input {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.toggle input:focus-visible + .slider { outline: 2px solid var(--accent); outline-offset: 3px; }

.slider {
  width: 38px;
  height: 20px;
  border-radius: var(--r-full);
  background: var(--border);
  position: relative;
  transition: .15s ease;
  flex-shrink: 0;
}

.slider::after {
  content: "";
  position: absolute;
  top: 2px;
  left: 2px;
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background: var(--on-accent);
  transition: .15s ease;
}

.toggle input:checked + .slider {
  background: var(--good);
}

.toggle input:checked + .slider::after {
  left: 20px;
}

/* Utilities */
.hidden { display: none !important; /* important: hiding must beat every component display rule */ }