/**
 * QEY — single source of truth.
 * Implements DESIGN.md ("warm and human / notebook a friend lent you").
 * Mobile-first. Replaces the old design-system.css + bauhaus.css pair.
 */

/* ============================================================
   Reset
   ============================================================ */

*, *::before, *::after { box-sizing: border-box; }
* { margin: 0; padding: 0; }

html {
  font-size: 16px;
  -webkit-text-size-adjust: 100%;
  /* Pin document width / disable horizontal overflow at the root so any
     unbreakable URL or wide nested element doesn't push the layout
     sideways on narrow viewports (#178, #183). */
  max-width: 100vw;
  overflow-x: hidden;
}

img, video, iframe, embed, object { max-width: 100%; height: auto; }
img, picture, video, canvas, svg { display: block; max-width: 100%; }
table { display: block; max-width: 100%; overflow-x: auto; }

.container, main, article, section, p, h1, h2, h3, h4, h5, h6, li, dd, dt, blockquote {
  overflow-wrap: anywhere;
}

input, button, textarea, select { font: inherit; }

body {
  font-family: 'DM Sans', sans-serif;
  font-feature-settings: "tnum";
  color: var(--color-ink);
  background-color: var(--color-paper);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

/* ============================================================
   Design Tokens (DESIGN.md)
   ============================================================ */

:root {
  /* Color — paper, ink, accent */
  --color-paper:            #FAF7F2;
  --color-surface:          #FFFFFF;
  --color-surface-sunken:   #F3EFE7;
  --color-ink:              #1F1A14;
  --color-ink-soft:         #3D362C;
  --color-muted:            #6B5F54;
  --color-faint:            #9B8E80;
  --color-hairline:         #E8E1D5;
  --color-hairline-strong:  #D6CCB9;

  /* Accent — overridable by seasonal_theme.py (per DESIGN.md) */
  --color-accent:           #C4612A;
  --color-accent-hover:     #A85020;
  --color-accent-soft:      #F0DDD0;

  /* Semantic */
  --color-success:          #5A7A4E;
  --color-success-soft:     #E5EDDF;
  --color-warning:          #B07410;
  --color-warning-soft:     #F5E9D2;
  --color-error:            #A33B27;
  --color-error-soft:       #F5DCD4;
  --color-info:             #3F5779;
  --color-info-soft:        #DDE3EE;

  /* Type scale (mobile-first) */
  --font-display-xl: 2rem;       /* 32px */
  --font-display-lg: 1.625rem;   /* 26px */
  --font-display-md: 1.25rem;    /* 20px */
  --font-body-lg:    1rem;       /* 16px */
  --font-body-md:    0.9375rem;  /* 15px */
  --font-body-sm:    0.8125rem;  /* 13px */
  --font-meta:       0.75rem;    /* 12px */

  /* Font families */
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body:    'DM Sans', sans-serif;
  --font-mono:    ui-monospace, SFMono-Regular, 'SF Mono', Menlo, Consolas, monospace;

  /* Spacing scale */
  --space-2xs: 2px;
  --space-xs:  4px;
  --space-sm:  8px;
  --space-md:  16px;
  --space-lg:  24px;
  --space-xl:  32px;
  --space-2xl: 48px;
  --space-3xl: 64px;
  --space-4xl: 96px;

  /* Layout dimensions */
  --max-w-reading:   720px;
  --max-w-list:      1100px;
  --max-w-marketing: 1200px;
  --max-w-form:      480px;
  --nav-height:      56px;

  /* Radius */
  --radius-sm:   4px;
  --radius-md:   6px;
  --radius-lg:  10px;
  --radius-full: 9999px;

  /* Motion */
  --motion-fast: 100ms;
  --motion-base: 150ms;
  --motion-slow: 250ms;

  /* Legacy aliases — the surviving ones still have consumers in
     templates or JS. Anything new should reference the canonical
     tokens above directly. */
  --color-primary:          var(--color-accent);
  --color-primary-dark:     var(--color-accent-hover);
  --color-primary-subtle:   var(--color-accent-soft);
  --color-text-primary:     var(--color-ink);
  --color-text-secondary:   var(--color-ink-soft);
  --color-text-muted:       var(--color-muted);
  --color-bg-card:          var(--color-surface);
  --color-error-text:       var(--color-error);
  /* DESIGN.md: no shadows on cards. Tokens retained as none so
     any orphan consumer renders flat. */
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: none;
  --shadow-xl: none;
  --font-size-xs:        var(--font-meta);
  --font-size-sm:        var(--font-body-sm);
  --font-size-base:      var(--font-body-md);
  --font-size-3xl:       var(--font-display-xl);
  --font-size-4xl:       2.5rem;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --line-height-relaxed: 1.65;
}

/* ============================================================
   Typography
   ============================================================ */

h1, h2, h3, h4, h5, h6 {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink);
  line-height: 1.2;
  font-feature-settings: "ss01"; /* Fraunces optical-size axis variant */
}

h1 {
  font-size: var(--font-display-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  margin-bottom: var(--space-md);
}
h2 {
  font-size: var(--font-display-md);
  margin-bottom: var(--space-sm);
}
h3 {
  font-size: 1.125rem;
  margin-bottom: var(--space-sm);
}
h4 {
  font-size: 1.0625rem;
  margin-bottom: var(--space-xs);
}
h5 {
  font-size: var(--font-body-md);
  margin-bottom: var(--space-xs);
}
h6 {
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: 500;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
}

p {
  margin-bottom: var(--space-md);
  line-height: 1.6;
  color: var(--color-ink-soft);
}

a {
  color: var(--color-accent);
  text-decoration: none;
  transition: color var(--motion-fast) ease;
}
a:hover { color: var(--color-accent-hover); text-decoration: underline; }

ul, ol { padding-left: var(--space-lg); margin-bottom: var(--space-md); }
li { margin-bottom: var(--space-xs); line-height: 1.6; color: var(--color-ink-soft); }
hr {
  border: none;
  border-top: 1px solid var(--color-hairline);
  margin: var(--space-xl) 0;
}

blockquote {
  border-left: 3px solid var(--color-accent);
  padding: var(--space-sm) var(--space-md);
  margin: var(--space-md) 0;
  color: var(--color-ink-soft);
  background: var(--color-surface-sunken);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
}

code {
  font-family: var(--font-mono);
  font-size: 0.9em;
  background: var(--color-surface-sunken);
  padding: 0.15em 0.4em;
  border-radius: var(--radius-sm);
  color: var(--color-accent-hover);
  overflow-wrap: anywhere;
  word-break: break-word;
}
.code-inline { font-family: var(--font-mono); font-size: 0.92em; }

pre {
  font-family: var(--font-mono);
  font-size: var(--font-body-sm);
  background: var(--color-surface-sunken);
  padding: var(--space-md);
  border-radius: var(--radius-md);
  overflow-x: auto;
  margin-bottom: var(--space-md);
  border: 1px solid var(--color-hairline);
}
pre code { background: none; padding: 0; color: var(--color-ink); }

small { font-size: var(--font-body-sm); color: var(--color-muted); }
strong { font-weight: 600; color: var(--color-ink); }

/* ============================================================
   Form Elements
   ============================================================ */

input[type="text"], input[type="email"], input[type="password"],
input[type="url"], input[type="search"], input[type="number"],
input[type="tel"], input[type="date"], input[type="time"],
textarea, select {
  display: block;
  width: 100%;
  padding: 0.55rem 0.75rem;
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  color: var(--color-ink);
  background: var(--color-surface);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  transition: border-color var(--motion-fast) ease;
  appearance: none;
  -webkit-appearance: none;
  margin-bottom: var(--space-md);
}

input:focus, textarea:focus, select:focus {
  outline: none;
  border-color: var(--color-accent);
}
input::placeholder, textarea::placeholder { color: var(--color-faint); }

textarea { resize: vertical; min-height: 96px; line-height: 1.5; }

select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%236B5F54' d='M6 8L1 3h10z'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 0.75rem center;
  padding-right: 2rem;
}

input[type="checkbox"], input[type="radio"] {
  width: auto;
  margin-right: var(--space-xs);
  accent-color: var(--color-accent);
}

fieldset { border: none; padding: 0; margin: 0; }
legend {
  font-family: var(--font-display);
  font-size: var(--font-display-md);
  font-weight: 600;
  margin-bottom: var(--space-md);
  color: var(--color-ink);
}

label {
  display: block;
  font-size: var(--font-body-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
  margin-bottom: var(--space-xs);
}

.form-container { max-width: var(--max-w-form); margin: 0 auto; }
.form-control, .form-input { width: 100%; }
.form-label { font-weight: 500; color: var(--color-ink-soft); }
.form-label-pointer { cursor: pointer; }
.form-select-constrained { max-width: 280px; }
.checkbox-auto-width { width: auto; }
.checkbox-label { display: inline-flex; align-items: center; gap: var(--space-xs); cursor: pointer; }
.inline-form { display: inline; }

/* ============================================================
   Buttons
   ============================================================ */

button, .button, [type="submit"], .btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-xs);
  padding: 0.55rem 1rem;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: 500;
  line-height: 1.2;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-hairline-strong);
  background: var(--color-surface);
  color: var(--color-ink);
  cursor: pointer;
  text-decoration: none;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease, color var(--motion-fast) ease;
  white-space: nowrap;
}

button:hover, .button:hover, .btn:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
}
button:active, .button:active, .btn:active { transform: translateY(1px); }
button:focus-visible, .button:focus-visible, .btn:focus-visible {
  outline: 2px solid var(--color-accent);
  outline-offset: 1px;
}

/* Primary — solid terracotta */
.btn-primary, .button-primary,
button[type="submit"]:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sm),
input[type="submit"]:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sm) {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}
.btn-primary:hover, .button-primary:hover,
button[type="submit"]:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sm):hover,
input[type="submit"]:not(.btn-ghost):not(.btn-secondary):not(.btn-danger):not(.btn-sm):hover {
  background: var(--color-accent-hover);
  border-color: var(--color-accent-hover);
  color: #FFFFFF;
}

/* Ghost — outline only */
.btn-ghost, .button-ghost, .button-clear {
  background: transparent;
  color: var(--color-ink);
  border-color: var(--color-hairline-strong);
}
.btn-ghost:hover, .button-ghost:hover, .button-clear:hover {
  background: var(--color-surface);
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
}

/* Secondary — soft terracotta */
.btn-secondary, .button-secondary {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-accent-soft);
}
.btn-secondary:hover, .button-secondary:hover {
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  border-color: var(--color-hairline-strong);
}

/* Outline primary */
.button-outline-primary {
  background: transparent;
  color: var(--color-accent);
  border: 1px solid var(--color-accent);
  font-weight: 600;
}
.button-outline-primary:hover {
  background: var(--color-accent);
  color: #FFFFFF;
}

/* Danger */
.btn-danger, .button-danger {
  background: transparent;
  color: var(--color-error);
  border-color: var(--color-hairline-strong);
}
.btn-danger:hover, .button-danger:hover {
  background: var(--color-error-soft);
  color: var(--color-error);
  border-color: var(--color-error);
}
.button-outline-danger {
  background: transparent;
  color: var(--color-error);
  border: 1px solid var(--color-error-soft);
  font-size: var(--font-body-sm);
  padding: 0.4rem 0.75rem;
}
.button-outline-danger:hover {
  background: var(--color-error-soft);
  color: var(--color-error);
}

/* Success */
.button-success {
  background: var(--color-success);
  color: #FFFFFF;
  border-color: var(--color-success);
}

.btn-notes { color: var(--color-warning); }
.btn-copy-link { background: transparent; border: none; color: var(--color-muted); padding: 4px; cursor: pointer; }
.btn-copy-link:hover { color: var(--color-accent); }

.btn-sm, .button-compact { padding: 0.4rem 0.7rem; font-size: var(--font-body-sm); }
.link-item-external-btn, .link-item-copy-btn { /* opted out of all base button height/padding */ }
.button-large { padding: 0.7rem 1.4rem; font-size: var(--font-body-md); }
.btn-block { width: 100%; }

a.btn, a.btn:hover, a.btn:visited {
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: middle;
}

/* Single-column auth card — constrains bare auth pages (login, forgot
   password, resend activation, register/email) to roughly the width of
   one .hero-panel column on /auth/register, instead of stretching to the
   full marketing container. Hairline border only — no box-shadow, per
   DESIGN.md ("hairline borders only" / "shadow-heavy cards" anti-pattern). */
.auth-card {
  max-width: 480px;
  margin: 0 auto;
  padding: var(--space-xl);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background-color: var(--color-bg-card);
}

/* OAuth buttons (used on auth/login) */
.oauth-buttons { display: flex; flex-direction: column; gap: var(--space-sm); }

/* Q&A panel + detailed-summary panel + title edit form on /links/<id>/view
   — JS toggles all these via style.display, but had no initial CSS
   state, so the page rendered with the THINKING/Generating spinner
   visible, the error placeholder visible, every Q's reply-form
   pre-opened, AND the title edit form pre-opened next to the title.
   Hidden by default. */
.qa-loading { display: none; }
.qa-error { display: none; }
.qa-reply-form { display: none; }
.summary-loading { display: none; }
.summary-error { display: none; }
.link-view-title-edit { display: none; }
.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-sm);
  padding: 0.6rem 1rem;
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  font-weight: 500;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink);
  text-decoration: none;
  transition: background-color var(--motion-fast) ease;
}
.oauth-btn:hover { background: var(--color-surface-sunken); }
.google-login-btn { /* same as oauth-btn — preserved selector */ }

.apply-cta { padding: 0.7rem 1.4rem; font-size: var(--font-body-md); }

/* ============================================================
   Layout
   ============================================================ */

.container {
  max-width: var(--max-w-list);
  margin: 0 auto;
  padding: var(--space-xl) var(--space-md);
}
main { flex: 1; }

/* ============================================================
   Navigation
   ============================================================ */

nav {
  background: var(--color-paper);
  border-bottom: 1px solid var(--color-hairline);
  padding: 0 var(--space-md);
  position: sticky;
  top: 0;
  z-index: 100;
}

.nav-container {
  max-width: var(--max-w-marketing);
  margin: 0 auto;
  display: flex;
  justify-content: space-between;
  align-items: center;
  position: relative;
  height: var(--nav-height);
  gap: var(--space-md);
}

.nav-left {
  display: flex;
  align-items: center;
  gap: var(--space-2xs);
}

.nav-left a, .nav-right a, .nav-dropdown-toggle {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  text-decoration: none;
  white-space: nowrap;
  color: var(--color-ink-soft);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: 500;
  padding: 0.4rem 0.7rem;
  border-radius: var(--radius-sm);
  transition: color var(--motion-fast) ease, background-color var(--motion-fast) ease;
}

.nav-left a:hover, .nav-right a:hover, .nav-dropdown-toggle:hover {
  color: var(--color-accent);
  background: transparent;
}

.nav-right { display: flex; align-items: center; gap: var(--space-sm); }

/* Brand wordmark on nav. Selector raised to `nav .nav-brand` so it wins
   over `.nav-left a` (same specificity, later in file) and renders in the
   display serif instead of the body font when placed inside .nav-left. */
nav .nav-brand {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: 1.125rem;
  letter-spacing: -0.01em;
  color: var(--color-ink);
}

/* Dropdowns */
.nav-dropdown { position: relative; display: inline-block; }
.nav-dropdown-toggle { cursor: pointer; }
.nav-dropdown-toggle i { font-size: 0.6rem; transition: transform var(--motion-fast) ease; }
.nav-dropdown.active .nav-dropdown-toggle i { transform: rotate(180deg); }

.nav-dropdown-menu {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn var(--motion-fast) ease;
}
.nav-dropdown.active .nav-dropdown-menu { display: block; }
.nav-dropdown-menu a {
  display: block;
  padding: 0.55rem var(--space-md);
  color: var(--color-ink-soft);
  text-decoration: none;
  white-space: nowrap;
  font-size: var(--font-body-sm);
  font-weight: 500;
  border-radius: 0;
}
.nav-dropdown-menu a:hover { background: var(--color-surface-sunken); color: var(--color-accent); }

/* Hamburger (mobile) */
.hamburger {
  display: none;
  flex-direction: column;
  justify-content: space-around;
  width: 24px;
  height: 18px;
  cursor: pointer;
  z-index: 200;
}
.hamburger span {
  display: block;
  width: 100%;
  height: 2px;
  background: var(--color-ink);
  border-radius: 1px;
  transition: transform var(--motion-base) ease, opacity var(--motion-fast) ease;
}
.hamburger.active span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
.hamburger.active span:nth-child(2) { opacity: 0; }
.hamburger.active span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

/* Profile circle/avatar */
.profile-circle, .profile-avatar {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-body-sm);
  text-decoration: none;
  flex-shrink: 0;
}
.profile-circle:hover, .profile-avatar:hover { background: var(--color-accent-hover); color: #FFFFFF; text-decoration: none; }

/* Mobile/desktop visibility helpers */
.show-mobile-only { display: none; }
.hide-mobile { display: inline-flex; }

/* ============================================================
   Footer
   ============================================================ */

.site-footer {
  border-top: 1px solid var(--color-hairline);
  padding: var(--space-xl) var(--space-md);
  text-align: center;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  color: var(--color-muted);
}
.site-footer a { color: var(--color-muted); }
.site-footer a:hover { color: var(--color-accent); }
.site-footer span { margin: 0 var(--space-xs); }

/* ============================================================
   Cards
   ============================================================ */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
  margin-bottom: var(--space-md);
  transition: border-color var(--motion-fast) ease;
}
.card:hover { border-color: var(--color-hairline-strong); }
.card-tinted { background: var(--color-accent-soft); border-color: var(--color-accent-soft); }
.card-header {
  font-family: var(--font-display);
  font-weight: 600;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
}

/* ============================================================
   Link items (the central UI)
   ============================================================ */

.link-item {
  margin-bottom: var(--space-md);
}
.link-item-card, .link-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 26px;
  position: relative;
  min-width: 0;
  transition: border-color var(--motion-fast) ease;
  /* Subtle inset inner rule for a quiet nested-frame feel
     (replaces the old double-card-wrapper visual). */
  outline: 1px solid var(--color-hairline);
  outline-offset: -6px;
}
.link-item-card:hover, .link-card:hover { border-color: var(--color-hairline-strong); }

/* Icons (open-link + copy) sit top-right on the same row as the title.
   Title (and everything else: meta, summary, tags, notes) flow in col 1. */
.link-item-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  column-gap: var(--space-md);
}
.link-item-card > .link-item-icons {
  grid-column: 2;
  grid-row: 1;
  display: flex;
  gap: var(--space-xs);
  align-items: flex-start;
  margin: 0;
}
.link-item-card > *:not(.link-item-icons) {
  grid-column: 1;
}

/* Icon buttons inside .link-item-icons — bare, terracotta, identical
   shape so the <button>-vs-<a> tag difference doesn't show through. */
.link-item-external-btn,
.link-item-copy-btn {
  background: transparent;
  border: none;
  padding: 0.2rem 0.35rem;
  color: var(--color-accent);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
}
.link-item-external-btn:hover,
.link-item-copy-btn:hover {
  color: var(--color-accent-hover);
  background: var(--color-accent-soft);
}
.link-item.read .link-item-card { background: var(--color-paper); border-color: var(--color-hairline); opacity: 0.85; }
.link-item-archive {
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: 26px;
  background: var(--color-surface);
  outline: 1px solid var(--color-hairline);
  outline-offset: -6px;
}

.link-item-layout {
  display: flex;
  gap: var(--space-md);
  align-items: stretch;
}
.link-item-layout > .link-item-card { flex: 1; min-width: 0; }

.link-title { min-width: 0; overflow-wrap: anywhere; word-break: break-word; }
.link-title h4 {
  margin: 0;
  font-family: var(--font-display);
  font-size: var(--font-display-md);
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: -0.005em;
  overflow-wrap: anywhere;
  word-break: break-word;
}
.link-title h4 a { color: var(--color-ink); text-decoration: none; }
.link-title h4 a:hover { color: var(--color-accent); }

.link-summary {
  margin-top: var(--space-xs);
  margin-bottom: var(--space-sm);
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  line-height: 1.55;
  color: var(--color-ink-soft);
  border: none;
  background: none;
  padding: 0;
}

.link-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: var(--space-xs);
  font-family: var(--font-body);
  font-size: var(--font-meta);
  color: var(--color-muted);
  letter-spacing: 0;
  text-transform: none;
}
.link-meta > span:not(.tag):not(.tag-chip) { color: var(--color-faint); }

.link-item-status-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-xs);
  margin-top: var(--space-sm);
}

/* ============================================================
   Tags
   ============================================================ */

.tag, .tag-chip {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-meta);
  font-weight: 500;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  border: 1px solid var(--color-accent);
  background: transparent;
  color: var(--color-accent);
  text-decoration: none;
  white-space: nowrap;
  transition: background-color var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.tag:hover, .tag-chip:hover {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-hover);
  color: var(--color-accent-hover);
  text-decoration: none;
}
/* Domain chip — slate-blue soft fill so it's visually distinct from
   terracotta user/system tag chips. Marks "this is a source-metadata
   tag." Clickable: filters /links by domain. */
.tag-tld {
  display: inline-block;
  padding: 2px 10px;
  border: 1px solid var(--color-info);
  border-radius: var(--radius-sm);
  /* ~50% lighter than --color-info-soft (#DDE3EE → #EEF1F6).
     Keeps slate-blue identity while reading as a quiet wash. */
  background: #EEF1F6;
  color: var(--color-info);
  font-size: var(--font-meta);
  font-weight: 500;
  text-decoration: none;
  margin-right: var(--space-xs);
  margin-bottom: var(--space-xs);
  vertical-align: middle;
  transition: background var(--motion-fast) ease, border-color var(--motion-fast) ease;
}
.tag-tld:hover {
  background: var(--color-info-soft);
  border-color: var(--color-info);
  color: var(--color-info);
}

.tag-system, .tag-chip--system {
  border-color: var(--color-hairline-strong);
  color: var(--color-ink-soft);
  background: transparent;
}
.tag-system:hover, .tag-chip--system:hover {
  background: var(--color-surface-sunken);
  border-color: var(--color-hairline-strong);
  color: var(--color-ink);
}
.tag-active {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}

/* Tag cloud (tags page) */
.tag-cloud { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-lg); }
.tag-cloud__list { display: flex; flex-wrap: wrap; gap: var(--space-xs); list-style: none; padding: 0; margin: 0; }
.tag-cloud__link {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 4px 10px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  font-size: var(--font-body-sm);
  font-weight: 500;
  color: var(--color-ink-soft);
  text-decoration: none;
  background: var(--color-surface);
  transition: border-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.tag-cloud__link:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.tag-cloud__count { color: var(--color-faint); font-size: var(--font-meta); font-family: var(--font-body); }

/* Tag index — alphabetical A-Z browse paired with the popularity cloud. */
.tag-index { margin-top: var(--space-2xl); }
.tag-index-jump {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  align-items: center;
  padding: var(--space-sm) 0;
  border-top: 1px solid var(--color-hairline);
  border-bottom: 1px solid var(--color-hairline);
  margin-bottom: var(--space-lg);
}
.tag-index-jump-label {
  font-family: var(--font-display);
  font-weight: 600;
  color: var(--color-ink-soft);
  margin-right: var(--space-sm);
}
.tag-index-jump-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 24px;
  padding: 2px 6px;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-body-sm);
  color: var(--color-accent);
  text-decoration: none;
  border-radius: var(--radius-sm);
  transition: background var(--motion-fast) ease;
}
.tag-index-jump-link:hover { background: var(--color-accent-soft); }
.tag-index-section { margin-bottom: var(--space-lg); scroll-margin-top: var(--space-2xl); }
.tag-index-letter {
  font-family: var(--font-display);
  font-size: var(--font-display-lg);
  font-weight: 700;
  color: var(--color-accent);
  margin: 0 0 var(--space-sm) 0;
  padding-bottom: var(--space-xs);
  border-bottom: 1px solid var(--color-hairline);
}

/* Tag refine (filter strip) */
.tag-refine { margin-bottom: var(--space-lg); }
.tag-refine__intro { font-size: var(--font-body-sm); color: var(--color-muted); margin-bottom: var(--space-xs); }
.tag-refine__chips { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
.tag-refine__chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: 3px 9px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  font-family: var(--font-body);
  font-size: var(--font-meta);
  color: var(--color-ink-soft);
  text-decoration: none;
  background: var(--color-surface);
}
.tag-refine__chip:hover { border-color: var(--color-accent); color: var(--color-accent); text-decoration: none; }
.tag-refine__count { color: var(--color-faint); }

/* ============================================================
   Badges
   ============================================================ */

.badge {
  display: inline-flex;
  align-items: center;
  font-family: var(--font-body);
  font-size: var(--font-meta);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  letter-spacing: 0;
}
.badge-primary { background: var(--color-accent-soft); color: var(--color-accent-hover); }
.badge-public { background: var(--color-success-soft); color: var(--color-success); }
.badge-shared { background: var(--color-info-soft); color: var(--color-info); }

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-family: var(--font-body);
  font-size: var(--font-meta);
  font-weight: 500;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
}
.status-pending    { background: var(--color-warning-soft); color: var(--color-warning); }
.status-processing { background: var(--color-info-soft);    color: var(--color-info); }
.status-failed     { background: var(--color-error-soft);   color: var(--color-error); }

/* ============================================================
   Alerts
   ============================================================ */

.alert {
  padding: var(--space-md);
  border: 1px solid;
  border-left-width: 3px;
  border-radius: var(--radius-md);
  margin-bottom: var(--space-md);
  font-size: var(--font-body-md);
}
.alert-success, .alert-success-bg {
  background: var(--color-success-soft);
  border-color: var(--color-success);
  color: var(--color-success);
}
.alert-error, .alert-danger {
  background: var(--color-error-soft);
  border-color: var(--color-error);
  color: var(--color-error);
}
.alert-info {
  background: var(--color-info-soft);
  border-color: var(--color-info);
  color: var(--color-info);
}
.alert-warning {
  background: var(--color-warning-soft);
  border-color: var(--color-warning);
  color: var(--color-warning);
}

/* ============================================================
   Panels
   ============================================================ */

.panel {
  padding: var(--space-md);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  background: var(--color-surface);
  margin-bottom: var(--space-md);
}
.panel-tinted {
  background: var(--color-accent-soft);
  border-color: var(--color-accent-soft);
}
.panel-blue {
  background: var(--color-accent-soft);
  border-left: 3px solid var(--color-accent);
  border-top: none; border-right: none; border-bottom: 1px solid var(--color-hairline);
}
.panel-yellow {
  background: var(--color-warning-soft);
  border: none;
  border-left: 3px solid var(--color-warning);
  border-bottom: 1px solid var(--color-hairline);
}

/* ============================================================
   Empty state
   ============================================================ */

.empty-state {
  text-align: center;
  padding: var(--space-3xl) var(--space-md);
  color: var(--color-muted);
}
.empty-state__icon { color: var(--color-faint); }
.empty-state__title, .empty-state-title {
  font-family: var(--font-display);
  font-size: var(--font-display-md);
  color: var(--color-ink-soft);
  margin-bottom: var(--space-sm);
}

/* ============================================================
   Stats grid (metrics page)
   ============================================================ */

.stats-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
}
.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}
.stat-card__label, .stat { font-size: var(--font-body-sm); color: var(--color-muted); }
.stat-card__value {
  font-family: var(--font-display);
  font-size: var(--font-display-lg);
  font-weight: 700;
  color: var(--color-ink);
  font-variant-numeric: tabular-nums;
}
.stat-card--ready      { border-left: 3px solid var(--color-success); }
.stat-card--processing { border-left: 3px solid var(--color-info); }
.stat-card--pending    { border-left: 3px solid var(--color-warning); }
.stat-card--failed     { border-left: 3px solid var(--color-error); }
.stat-card--alert      { border-left: 3px solid var(--color-error); }

/* ============================================================
   Hero / landing
   ============================================================ */

.landing-hero {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-2xl);
  padding: var(--space-2xl) 0;
  align-items: center;
}
.hero-copy h1 {
  font-family: var(--font-display);
  font-size: var(--font-display-xl);
  font-weight: 700;
  letter-spacing: -0.02em;
  margin-bottom: var(--space-md);
  color: var(--color-ink);
}
.hero-copy p { font-size: var(--font-body-lg); color: var(--color-ink-soft); margin-bottom: var(--space-md); }
.hero-cta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-bottom: var(--space-md);
}
.hero-subtext, .hero-footnote { color: var(--color-muted); font-size: var(--font-body-sm); }
.hero-features {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-md);
  margin-top: var(--space-md);
  font-size: var(--font-body-sm);
  color: var(--color-muted);
}

.hero-preview { display: none; }
.hero-panel {
  background: var(--color-accent-soft);
  border: 1px solid var(--color-accent-soft);
  border-radius: var(--radius-md);
  padding: var(--space-md);
}

.preview-card {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.preview-card header {
  display: flex;
  gap: 6px;
  margin-bottom: var(--space-md);
  padding-bottom: var(--space-sm);
  border-bottom: 1px solid var(--color-hairline);
}
.preview-card .dot {
  display: inline-block;
  width: 10px;
  height: 10px;
  border-radius: var(--radius-full);
  background: var(--color-faint);
}
.preview-card .dot.red { background: var(--color-error); opacity: 0.6; }
.preview-card .dot.yellow { background: var(--color-warning); opacity: 0.6; }
.preview-card .dot.green { background: var(--color-success); opacity: 0.6; }
.preview-body { display: flex; flex-direction: column; gap: var(--space-md); }
.preview-item {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  padding: var(--space-sm);
  background: var(--color-surface-sunken);
  border-radius: var(--radius-sm);
}
.preview-tag {
  display: inline-flex;
  align-self: flex-start;
  padding: 2px 10px;
  border-radius: var(--radius-sm);
  background: transparent;
  border: 1px solid var(--color-accent);
  color: var(--color-accent);
  font-size: var(--font-meta);
  font-weight: 500;
}
.preview-item p { margin: 0; font-size: var(--font-body-sm); color: var(--color-ink-soft); }

.landing-section {
  padding: var(--space-2xl) 0;
  border-top: 1px solid var(--color-hairline);
}
.landing-section.alt { background: var(--color-surface-sunken); margin: 0 calc(-1 * var(--space-md)); padding: var(--space-2xl) var(--space-md); }
.landing-section h2 {
  font-family: var(--font-display);
  font-size: var(--font-display-lg);
  margin-bottom: var(--space-lg);
}

.feature-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-lg);
}
.feature-grid article {
  background: var(--color-surface);
  border: 1px solid var(--color-hairline);
  border-radius: var(--radius-md);
  padding: var(--space-lg);
}
.feature-grid h3 {
  font-family: var(--font-display);
  font-size: 1.125rem;
  margin-bottom: var(--space-xs);
  color: var(--color-ink);
}
.feature-grid p { color: var(--color-ink-soft); margin: 0; }

.steps {
  list-style: none;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--space-lg);
}
.steps li {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
  margin: 0;
}
.step-number {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-accent);
  color: #FFFFFF;
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--font-body-sm);
}
.steps li strong { display: block; font-weight: 600; margin-bottom: var(--space-2xs); color: var(--color-ink); }
.steps li p { font-size: var(--font-body-sm); color: var(--color-ink-soft); margin: 0; }

.landing-cta { text-align: center; padding: var(--space-2xl) 0; }
.social-proof { color: var(--color-muted); font-size: var(--font-body-sm); margin-top: var(--space-md); }

.careers-hero { padding: var(--space-2xl) 0; }
.job-section { padding: var(--space-xl) 0; border-top: 1px solid var(--color-hairline); }
.job-content { max-width: var(--max-w-reading); margin: 0 auto; }

/* ============================================================
   Reader (links/read.html)
   ============================================================ */

.reader-wrap { max-width: var(--max-w-reading); margin: 0 auto; }
.reader-nav { display: flex; gap: var(--space-md); align-items: center; padding: var(--space-md) 0; border-bottom: 1px solid var(--color-hairline); margin-bottom: var(--space-lg); font-size: var(--font-body-sm); }
.reader-meta { color: var(--color-muted); font-size: var(--font-body-sm); margin-bottom: var(--space-md); }
.reader-title {
  font-family: var(--font-display);
  font-size: var(--font-display-lg);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--color-ink);
  margin-bottom: var(--space-md);
}
.reader-url { font-family: var(--font-mono); font-size: var(--font-body-sm); color: var(--color-muted); margin-bottom: var(--space-lg); overflow-wrap: anywhere; }
.reader-body {
  font-family: var(--font-body);
  font-size: var(--font-body-lg);
  line-height: 1.65;
  color: var(--color-ink);
}
.reader-body p { color: var(--color-ink); margin-bottom: var(--space-md); }
.reader-body h1, .reader-body h2, .reader-body h3 { margin-top: var(--space-xl); margin-bottom: var(--space-sm); }
.reader-fallback { padding: var(--space-lg); background: var(--color-surface-sunken); border-radius: var(--radius-md); color: var(--color-muted); }
.reader-mark-read-form { margin-top: var(--space-lg); padding-top: var(--space-md); border-top: 1px solid var(--color-hairline); }

/* ============================================================
   Link/stash view chrome — back link, title icons, decorative rule,
   notes display, Q&A form row. Many of these were referenced in
   templates without CSS rules, falling through to browser defaults.
   ============================================================ */

.lv-back {
  display: inline-block;
  font-size: var(--font-body-sm);
  color: var(--color-muted);
  text-decoration: none;
  margin-bottom: var(--space-md);
}
.lv-back:hover { color: var(--color-accent); }

.lv-title-icons {
  display: flex;
  gap: var(--space-sm);
  align-items: center;
  flex-wrap: wrap;
}

.lv-rule {
  display: inline-block;
  flex: 1;
  height: 1px;
  background: var(--color-hairline);
  margin-left: var(--space-md);
  vertical-align: middle;
}

.qa-form-row {
  display: flex;
  gap: var(--space-sm);
  align-items: stretch;
  margin-bottom: var(--space-md);
}
/* Catch any input inside the row regardless of class — earlier rule
   only matched .form-input, but the link-view qa input uses class
   link-view-qa-input. Without this, the global input margin-bottom
   (16px) inflates the flex row height and stretches the button. */
.qa-form-row > input {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
}

/* Q&A card layout
   ---------------------------------------------------------------- */
#qa-list > .qa-item {
  margin-bottom: var(--space-lg);
  padding-bottom: var(--space-md);
  border-bottom: 1px solid var(--color-hairline);
}
#qa-list > .qa-item:last-child {
  margin-bottom: 0;
  padding-bottom: 0;
  border-bottom: none;
}

.qa-card-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-md);
  margin-bottom: var(--space-sm);
}

.qa-card-actions {
  display: flex;
  gap: var(--space-xs);
  flex-shrink: 0;
}

.qa-question-text,
.qa-reply-question-text {
  flex: 1;
  min-width: 0;
  font-weight: 500;
  color: var(--color-ink);
}

/* Bare-icon delete (matches .link-item-external-btn / .link-item-copy-btn) */
.qa-delete-btn {
  background: transparent;
  border: none;
  padding: 0.2rem 0.35rem;
  color: var(--color-faint);
  font-size: 1rem;
  line-height: 1;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  border-radius: var(--radius-sm);
  height: auto;
}
.qa-delete-btn:hover {
  color: var(--color-error);
  background: var(--color-error-soft);
}

.qa-reply-action {
  margin-top: var(--space-sm);
}

/* Nested reply — indented with a terracotta quote bar on the left so it's
   visually tied to its parent question. */
.qa-replies {
  margin-top: var(--space-lg);
}
.qa-reply.qa-reply-card {
  margin-left: var(--space-lg);
  padding-left: var(--space-md);
  border-left: 3px solid var(--color-accent);
}
.qa-reply.qa-reply-card + .qa-reply.qa-reply-card {
  margin-top: var(--space-md);
}

.notes-display {
  margin-top: var(--space-sm);
}

.notes-label {
  font-size: var(--font-meta);
  font-weight: 600;
  color: var(--color-muted);
  margin-bottom: var(--space-xs);
  display: block;
}

.notes-text {
  font-size: var(--font-body-sm);
  color: var(--color-ink-soft);
  white-space: pre-wrap;
  line-height: 1.6;
}

/* ============================================================
   Link view — Actions drawer (vertical, left-aligned)
   ============================================================ */

.link-view-actions-drawer {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
}

.link-view-actions-bar {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--space-sm);
  width: 100%;
}

.link-view-actions-secondary {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-hairline);
}

/* Forms wrapping a single button should hug the button (so they
   left-align inside the column instead of stretching wide). */
.link-view-actions-drawer form.inline-block { display: inline-block; }

/* ============================================================
   Link view (links/view.html) — reading column + optional sidebar
   DESIGN.md: reading pages must respect --max-w-reading (720px) on
   desktop. The sidebar (only when logged-in, not is_public_view) sits
   alongside the reading column on wide screens; on mobile it stacks.
   ============================================================ */

.link-view-page-grid {
  max-width: var(--max-w-list);
  margin: 0 auto;
  padding: 0 var(--space-md);
}

.link-view-page-main,
.link-view-content-body {
  max-width: var(--max-w-reading);
  margin: 0 auto;
}

.link-view-page-sidebar {
  max-width: var(--max-w-reading);
  margin: var(--space-xl) auto 0;
}

@media (min-width: 1024px) {
  .link-view-page-grid.has-sidebar {
    display: grid;
    grid-template-columns: minmax(0, var(--max-w-reading)) 280px;
    grid-template-areas:
      "main    sidebar"
      "body    sidebar";
    gap: 0 var(--space-xl);
    align-items: start;
    justify-content: center;
    max-width: none;
  }
  .link-view-page-grid.has-sidebar .link-view-page-main { grid-area: main; max-width: none; margin: 0; }
  .link-view-page-grid.has-sidebar .link-view-content-body { grid-area: body; max-width: none; margin: 0; }
  .link-view-page-grid.has-sidebar .link-view-page-sidebar { grid-area: sidebar; max-width: none; margin: 0; }
}

/* ============================================================
   Search & filter
   ============================================================ */

.search-container { margin-bottom: var(--space-md); }
.search-input-wrapper { position: relative; }
.search-input {
  width: 100%;
  padding: 0.55rem 0.85rem;
  padding-left: 2.25rem;
  font-family: var(--font-body);
  font-size: var(--font-body-md);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}
.search-input:focus { outline: none; border-color: var(--color-accent); }
.search-clear-btn {
  position: absolute;
  right: 8px;
  top: 50%;
  transform: translateY(-50%);
  background: none;
  border: none;
  color: var(--color-muted);
  cursor: pointer;
  padding: 4px;
  font-size: var(--font-body-md);
}

.filter-group { display: flex; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
/* Mobile-first: desktop filter row hidden; mobile select shown.
   Reverses at >=768px. Without these rules both render simultaneously. */
.filter-group-desktop { display: none; flex-wrap: wrap; gap: var(--space-xs); margin-bottom: var(--space-md); }
.links-toolbar-row { display: none; }
.links-toolbar-row-mobile { display: flex; flex-direction: column; gap: var(--space-xs); margin-bottom: var(--space-md); }
.links-toolbar-actions-desktop, .links-toolbar-actions-mobile { display: flex; flex-wrap: wrap; gap: var(--space-xs); }
@media (min-width: 768px) {
  .filter-group-desktop { display: flex; }
  .links-toolbar-row { display: flex; flex-wrap: wrap; gap: var(--space-md); align-items: center; justify-content: space-between; margin-bottom: var(--space-md); }
  .links-toolbar-row-mobile { display: none; }
}
.filter-btn {
  display: inline-flex;
  align-items: center;
  padding: 4px 10px;
  font-family: var(--font-body);
  font-size: var(--font-body-sm);
  font-weight: 500;
  background: var(--color-surface);
  color: var(--color-ink-soft);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  text-decoration: none;
  transition: all var(--motion-fast) ease;
}
.filter-btn:hover { border-color: var(--color-accent); color: var(--color-accent); }
.filter-btn.active { background: var(--color-accent); color: #FFFFFF; border-color: var(--color-accent); }
.filter-select-input, .filter-select-mobile {
  padding: 0.4rem 0.75rem;
  font-size: var(--font-body-sm);
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
}

/* ============================================================
   Pagination
   ============================================================ */

.pagination {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
  justify-content: center;
  margin-top: var(--space-xl);
  padding: var(--space-md) 0;
  list-style: none;
}
.pagination a, .pagination span {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 36px;
  padding: 6px 10px;
  border: 1px solid var(--color-hairline-strong);
  border-radius: var(--radius-sm);
  background: var(--color-surface);
  color: var(--color-ink-soft);
  text-decoration: none;
  font-size: var(--font-body-sm);
}
.pagination a:hover { border-color: var(--color-accent); color: var(--color-accent); }
.pagination .active, .pagination span.active {
  background: var(--color-accent);
  color: #FFFFFF;
  border-color: var(--color-accent);
}

/* ============================================================
   Toast
   ============================================================ */

.toast-container {
  position: fixed;
  bottom: var(--space-lg);
  left: 50%;
  transform: translateX(-50%);
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
  pointer-events: none;
}
.toast-container > * { pointer-events: auto; }

/* ============================================================
   Misc components used by templates
   ============================================================ */

/* Share icons (user_profile.html) */
.share-icons { display: flex; gap: var(--space-sm); flex-wrap: wrap; }
.share-icon {
  width: 36px;
  height: 36px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: var(--radius-full);
  background: var(--color-surface-sunken);
  color: var(--color-ink-soft);
  text-decoration: none;
  transition: background-color var(--motion-fast) ease, color var(--motion-fast) ease;
}
.share-icon:hover { background: var(--color-accent-soft); color: var(--color-accent); }

/* Section heading */
.section-heading {
  font-family: var(--font-display);
  font-size: var(--font-display-md);
  margin-bottom: var(--space-md);
  margin-top: var(--space-xl);
  color: var(--color-ink);
}

/* Subtitle */
.subtitle { color: var(--color-muted); font-size: var(--font-body-sm); margin-top: -4px; margin-bottom: var(--space-md); }

/* Divider */
.divider { border-top: 1px solid var(--color-hairline); margin: var(--space-xl) 0; }

/* Embed footer (stash/embed.html) */
.embed-footer { padding: var(--space-md); border-top: 1px solid var(--color-hairline); font-size: var(--font-body-sm); color: var(--color-muted); }

/* Per-link "Actions ▽" toggle + the expanded panel — hidden for now while
   the desktop reading flow is the priority. Per-link actions still reachable
   via /links/{id}/view. May come back as mobile-only when mobile UX is
   addressed. (DESIGN.md decision 2026-05-01) */
.link-item-controls-toggle, .link-item-controls { display: none !important; }

/* ============================================================
   Animations
   ============================================================ */

@keyframes fadeIn {
  from { opacity: 0; transform: translateY(-2px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
   Responsive
   ============================================================ */

@media (min-width: 480px) {
  .stats-grid { grid-template-columns: repeat(2, 1fr); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 768px) {
  :root {
    --font-display-xl: 2.75rem;
    --font-display-lg: 2rem;
    --font-display-md: 1.375rem;
    --font-body-lg:    1.0625rem;
  }
  .container { padding: var(--space-2xl) var(--space-lg); }
  .landing-hero { grid-template-columns: 1fr 1fr; }
  .hero-preview { display: block; }
  .stats-grid { grid-template-columns: repeat(4, 1fr); }
  .link-item-card, .link-card, .link-item-archive { padding: 36px; }
  .show-mobile-only { display: none; }
}

/* Mobile nav */
@media (max-width: 767px) {
  .hamburger { display: flex; }
  .hide-mobile { display: none; }
  .show-mobile-only { display: inline-flex; }
  .nav-left {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    flex-direction: column;
    align-items: stretch;
    background: var(--color-paper);
    border-bottom: 1px solid var(--color-hairline);
    padding: var(--space-md);
    gap: var(--space-xs);
  }
  .nav-left.active { display: flex; }
  .nav-left a, .nav-dropdown-toggle {
    padding: var(--space-sm) var(--space-md);
    border-radius: var(--radius-sm);
  }
  .nav-dropdown { width: 100%; }
  .nav-dropdown-menu {
    position: static;
    box-shadow: none;
    border: none;
    border-left: 2px solid var(--color-hairline);
    margin-left: var(--space-md);
    border-radius: 0;
    padding: var(--space-xs) 0;
  }
  .landing-section.alt { margin: 0; padding: var(--space-xl) var(--space-md); }
}

/* ============================================================
   Utility classes
   ============================================================ */

.hidden { display: none !important; }
.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.flex { display: flex; }
.flex-1 { flex: 1; }
.flex-wrap { flex-wrap: wrap; }
.block { display: block; }
.inline-block { display: inline-block; }
.d-block { display: block; }

.justify-between { justify-content: space-between; }
.align-center { align-items: center; }
.align-start { align-items: flex-start; }
.align-baseline { align-items: baseline; }
.self-start { align-self: flex-start; }
.self-end { align-self: flex-end; }

.gap-xs { gap: var(--space-xs); }
.gap-sm { gap: var(--space-sm); }
.gap-md { gap: var(--space-md); }
.gap-lg { gap: var(--space-lg); }

.stack-sm > * + * { margin-top: var(--space-sm); }
.stack-md > * + * { margin-top: var(--space-md); }

/* Margin utilities — templates reference mb-md/mt-lg/etc. that previously
   resolved to nothing. Values mirror the --space-* scale. */
.m-0  { margin: 0; }
.mt-0 { margin-top: 0; }
.mb-0 { margin-bottom: 0; }
.mt-sm  { margin-top: var(--space-sm); }
.mt-md  { margin-top: var(--space-md); }
.mt-lg  { margin-top: var(--space-lg); }
.mt-xl  { margin-top: var(--space-xl); }
.mt-2xl { margin-top: var(--space-2xl); }
.mb-sm  { margin-bottom: var(--space-sm); }
.mb-md  { margin-bottom: var(--space-md); }
.mb-lg  { margin-bottom: var(--space-lg); }
.mb-xl  { margin-bottom: var(--space-xl); }
.mb-2xl { margin-bottom: var(--space-2xl); }
.ml-sm  { margin-left: var(--space-sm); }
.ml-md  { margin-left: var(--space-md); }
.mr-sm  { margin-right: var(--space-sm); }
.mr-md  { margin-right: var(--space-md); }

.p-2xl { padding: var(--space-2xl); }
.px-sm { padding-left: var(--space-sm); padding-right: var(--space-sm); }
.px-md { padding-left: var(--space-md); padding-right: var(--space-md); }
.py-sm { padding-top: var(--space-sm); padding-bottom: var(--space-sm); }
.py-lg { padding-top: var(--space-lg); padding-bottom: var(--space-lg); }
.py-xl { padding-top: var(--space-xl); padding-bottom: var(--space-xl); }
.pt-md { padding-top: var(--space-md); }
.pt-lg { padding-top: var(--space-lg); }
.pt-xl { padding-top: var(--space-xl); }
.pb-lg { padding-bottom: var(--space-lg); }
.pb-xl { padding-bottom: var(--space-xl); }

.text-xs   { font-size: var(--font-meta); }
.text-sm   { font-size: var(--font-body-sm); }
.text-base { font-size: var(--font-body-md); }
.text-md   { font-size: var(--font-body-md); }
.text-lg   { font-size: var(--font-body-lg); }
.text-xl   { font-size: var(--font-display-md); }
.text-2xl  { font-size: var(--font-display-lg); }

.text-center { text-align: center; }
.text-right  { text-align: right; }

.text-primary   { color: var(--color-ink); }
.text-secondary { color: var(--color-ink-soft); }
.text-muted     { color: var(--color-muted); }
.text-body      { color: var(--color-ink-soft); }
.text-lead      { font-size: var(--font-body-lg); color: var(--color-ink-soft); }
.text-danger    { color: var(--color-error); }

.font-medium { font-weight: 500; }
.font-bold   { font-weight: 700; }

.w-full { width: 100%; }
.no-underline { text-decoration: none !important; }

.bg-white       { background: var(--color-surface); }
.bg-gray        { background: var(--color-surface-sunken); }
.bg-tinted{ background: var(--color-accent-soft); }

.rounded-md { border-radius: var(--radius-md); }
.min-w-sm { min-width: 16rem; }
.underline { text-decoration: underline; }
.mono-input { font-family: var(--font-mono); font-size: var(--font-body-sm); }
.meta-text { font-size: var(--font-body-sm); color: var(--color-muted); }
.rounded-lg { border-radius: var(--radius-lg); }

.border-dashed { border: 1px dashed var(--color-hairline-strong); }
.border-tinted { border: 1px solid var(--color-accent-soft); }
.border-top-light { border-top: 1px solid var(--color-hairline); }

.green  { color: var(--color-success); }
.red    { color: var(--color-error); }
.yellow { color: var(--color-warning); }

/* ============================================================
   Empty state (component)
   ============================================================ */

.empty-state__body {
  color: var(--color-muted);
  font-size: var(--font-body-sm);
  margin: var(--space-xs) 0 0;
}

/* ============================================================
   Inbox / messages
   ============================================================ */

.badge-unread {
  display: inline-block;
  background: var(--color-error);
  color: #FFFFFF;
  font-size: var(--font-meta);
  font-weight: 600;
  padding: 2px 8px;
  border-radius: var(--radius-sm);
  line-height: 1.4;
}

.inbox-disclosure {
  cursor: pointer;
  font-size: var(--font-body-sm);
  font-weight: 600;
  color: var(--color-ink-soft);
  list-style: none;
}
.inbox-disclosure::-webkit-details-marker { display: none; }
.inbox-disclosure:hover { color: var(--color-accent); }

.inbox-disclosure--small {
  font-size: var(--font-meta);
  font-weight: 500;
  color: var(--color-muted);
}

.inbox-compose-form {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

.inbox-stack {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inbox-meta-row {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
  flex-wrap: wrap;
}

.inbox-body {
  margin: 0 0 var(--space-sm);
  font-size: var(--font-body-md);
  line-height: 1.65;
  color: var(--color-ink);
}

.inbox-callout {
  padding: var(--space-sm) var(--space-md);
  background: var(--color-surface-sunken);
  border-left: 3px solid var(--color-hairline-strong);
  border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
  margin-top: var(--space-sm);
}
.inbox-callout--link  { border-left-color: var(--color-info); }
.inbox-callout--stash { border-left-color: var(--color-success); }

.inbox-callout-label {
  display: block;
  font-size: var(--font-meta);
  font-weight: 600;
  color: var(--color-muted);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: var(--space-2xs);
}

.inbox-callout-link {
  font-size: var(--font-body-sm);
  color: var(--color-ink);
  font-weight: 500;
  text-decoration: none;
}
.inbox-callout-link:hover { color: var(--color-accent); }

.inbox-reply { margin-top: var(--space-md); }

.inbox-reply-form {
  margin-top: var(--space-sm);
  display: flex;
  gap: var(--space-sm);
  flex-wrap: wrap;
}

.inbox-thread {
  margin-top: var(--space-md);
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
}

.inbox-thread-msg {
  padding: var(--space-sm) var(--space-md);
  border-left: 2px solid var(--color-hairline);
}

.inbox-thread-msg--self {
  border-left-color: var(--color-accent);
}

.inbox-thread-msg-meta {
  display: flex;
  align-items: baseline;
  gap: var(--space-sm);
  margin-bottom: var(--space-xs);
}

.inbox-thread-msg .inbox-body { margin-top: var(--space-xs); }

/* ============================================================
   Reduced motion
   ============================================================ */

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================================
   Print
   ============================================================ */

@media print {
  nav, .nav-container, .site-footer, .pwa-nav-bar, .toast-container { display: none !important; }
  body { background: #FFFFFF; color: #000000; }
  a { color: inherit; text-decoration: underline; }
}