/**
 * 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', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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', -apple-system, BlinkMacSystemFont, 'Segoe UI', 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 — minimize churn for existing class consumers
     (kept while bauhaus.css/design-system.css are retired). Anything new
     should reference the canonical tokens above. */
  --color-primary:          var(--color-accent);
  --color-primary-hover:    var(--color-accent-hover);
  --color-primary-dark:     var(--color-accent-hover);
  --color-primary-light:    var(--color-accent-soft);
  --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-text-link:        var(--color-accent);
  --color-bg-page:          var(--color-paper);
  --color-bg-card:          var(--color-surface);
  --color-bg-elevated:      var(--color-surface);
  --color-bg-subtle:        var(--color-surface-sunken);
  --color-bg-gray:          var(--color-surface-sunken);
  --color-bg-purple-light:  var(--color-accent-soft);
  --color-bg-purple-lighter:var(--color-surface-sunken);
  --color-border:           var(--color-hairline);
  --color-border-light:     var(--color-hairline);
  --color-border-focus:     var(--color-accent);
  --color-border-purple:    var(--color-hairline-strong);
  --color-success-bg:       var(--color-success-soft);
  --color-success-border:   var(--color-success);
  --color-success-text:     var(--color-success);
  --color-error-bg:         var(--color-error-soft);
  --color-error-border:     var(--color-error);
  --color-error-text:       var(--color-error);
  --color-info-bg:          var(--color-info-soft);
  --color-info-border:      var(--color-info);
  --color-info-text:        var(--color-info);
  --color-warning-bg:       var(--color-warning-soft);
  --color-warning-border:   var(--color-warning);
  --color-warning-text:     var(--color-warning);
  --color-status-pending:    var(--color-warning-soft);
  --color-status-processing: var(--color-info-soft);
  --color-status-ready:      var(--color-success-soft);
  --color-status-failed:     var(--color-error-soft);
  --color-tag-user:         var(--color-accent-soft);
  --color-tag-system:       var(--color-hairline);
  --color-tag-text:         var(--color-ink);
  --color-notes-bg:         var(--color-warning-soft);
  --color-notes-border:     var(--color-warning);
  --color-notes-text:       var(--color-warning);
  --transition-fast: var(--motion-fast) ease;
  --transition-base: var(--motion-base) ease;
  --transition-slow: var(--motion-slow) ease;
  --shadow-sm: none;
  --shadow-md: none;
  --shadow-lg: 0 4px 16px rgba(31, 26, 20, 0.06);
  --shadow-xl: 0 8px 32px rgba(31, 26, 20, 0.08);
  --font-size-xs:   var(--font-meta);
  --font-size-sm:   var(--font-body-sm);
  --font-size-base: var(--font-body-md);
  --font-size-lg:   var(--font-body-lg);
  --font-size-xl:   var(--font-display-md);
  --font-size-2xl:  var(--font-display-lg);
  --font-size-3xl:  var(--font-display-xl);
  --font-size-4xl:  2.5rem;
  --radius-xl:      var(--radius-lg);
  --font-weight-normal:   400;
  --font-weight-medium:   500;
  --font-weight-semibold: 600;
  --font-weight-bold:     700;
  --line-height-tight:   1.2;
  --line-height-normal:  1.5;
  --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-purple { color: var(--color-accent); }
.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); }
.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;
}

/* OAuth buttons (used on auth/login) */
.oauth-buttons { display: flex; flex-direction: column; gap: var(--space-sm); }
.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 (if rendered) */
.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);
  box-shadow: var(--shadow-lg);
  min-width: 180px;
  z-index: 1000;
  overflow: hidden;
  animation: fadeIn 120ms 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-elevated { box-shadow: var(--shadow-lg); }
.card-purple { 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: var(--space-md);
  position: relative;
  min-width: 0;
  transition: border-color var(--motion-fast) ease;
}
.link-item-card:hover, .link-card:hover { border-color: var(--color-hairline-strong); }
.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: var(--space-md);
  background: var(--color-surface);
}

.link-item-layout {
  display: flex;
  gap: var(--space-md);
  align-items: flex-start;
}

.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;
}
.tag-user { /* same as base — explicit for clarity */ }
.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 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-purple {
  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, .empty-state-title { 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 8px;
  border-radius: var(--radius-sm);
  background: var(--color-accent-soft);
  color: var(--color-accent-hover);
  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); }

/* ============================================================
   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); }

/* ============================================================
   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); }
  .feature-grid { grid-template-columns: repeat(2, 1fr); }
  .link-item-card, .link-card { padding: var(--space-lg); }
  .show-mobile-only { display: none; }
}

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

/* 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);
    box-shadow: var(--shadow-lg);
  }
  .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; }

.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); }

.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); }
.pt-md { padding-top: var(--space-md); }

.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-purple-light{ background: var(--color-accent-soft); }

.rounded-md { border-radius: var(--radius-md); }
.rounded-lg { border-radius: var(--radius-lg); }

.border-dashed { border: 1px dashed var(--color-hairline-strong); }
.border-purple { 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); }

/* ============================================================
   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; }
}