/* ================================================================
   USES PAGE — "Equipment Manifest"
   
   Concept: A systems engineer's personal equipment manifest. 
   Structured like an inventory document — codified, categorized,
   numbered — but the opinionated notes break through the formality 
   with a human voice. The tension between machine structure and 
   personal opinion IS the design.
   
   Typography: 
   - "IBM Plex Mono" for structural/label elements — native to 
     the subject matter (terminals, configs, systems).
   - "Newsreader" (serif) for opinionated notes — the human 
     breaking through the system. Italic for emphasis that feels 
     like someone scribbling in the margins.
   
   Color:
   - Light mode: Warm cream paper (#f5f0e8) with amber (#c4841d)
     accents. Feels like a desk under warm lamplight.
   - Dark mode: Deep charcoal (#1a1a1e) with softer amber (#d4a24c).
     The late-night terminal session, but warmer.
   
   Hook: Each item has an inventory code (HW-01, SW-03). Verdicts
   use a custom 5-pip rating: ●●●●○. The whole page reads like
   a field manual annotated by someone with strong opinions.
   ================================================================ */

/* --- Reset & Base --- */
*, *::before, *::after {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}

/* --- Custom Properties (Light) --- */
:root {
  /* Paper & ink */
  --bg:             #f5f0e8;
  --bg-raised:      #ede8dd;
  --bg-inset:       #e6e0d3;
  --ink:            #2c2a25;
  --ink-secondary:  #6b6560;
  --ink-tertiary:   #9c958c;
  
  /* Accent — amber, like lamplight */
  --accent:         #c4841d;
  --accent-dim:     #c4841d33;
  --accent-hover:   #a86e15;
  
  /* Structural */
  --rule:           #d0c9bc;
  --rule-strong:    #b5ad9e;
  --code-bg:        #ddd7ca;
  
  /* Shadows */
  --shadow-sm:      0 1px 2px rgba(44,42,37,0.06);
  --shadow-md:      0 2px 8px rgba(44,42,37,0.08);
  
  /* Type scale */
  --fs-xs:    0.72rem;
  --fs-sm:    0.8rem;
  --fs-base:  0.92rem;
  --fs-md:    1.05rem;
  --fs-lg:    1.3rem;
  --fs-xl:    1.8rem;
  --fs-2xl:   2.6rem;
  --fs-3xl:   3.6rem;
  
  --leading-tight:  1.2;
  --leading-normal: 1.55;
  --leading-loose:  1.7;
  
  /* Spacing */
  --space-xs:  0.25rem;
  --space-sm:  0.5rem;
  --space-md:  1rem;
  --space-lg:  1.5rem;
  --space-xl:  2.5rem;
  --space-2xl: 4rem;
  --space-3xl: 6rem;
  
  /* Layout */
  --max-width: 72rem;
  --gutter:    1.25rem;
  
  /* Transitions */
  --ease-out:  cubic-bezier(0.25, 0.46, 0.45, 0.94);
  --duration:  0.2s;
}

/* --- Dark Mode --- */
@media (prefers-color-scheme: dark) {
  :root {
    --bg:             #1a1a1e;
    --bg-raised:      #242428;
    --bg-inset:       #2e2e33;
    --ink:            #e0dbd2;
    --ink-secondary:  #9e9890;
    --ink-tertiary:   #706b63;
    
    --accent:         #d4a24c;
    --accent-dim:     #d4a24c22;
    --accent-hover:   #e0b366;
    
    --rule:           #3a3a40;
    --rule-strong:    #52525a;
    --code-bg:        #2a2a30;
    
    --shadow-sm:      0 1px 2px rgba(0,0,0,0.2);
    --shadow-md:      0 2px 8px rgba(0,0,0,0.3);
  }
}

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

/* --- Typography --- */
body {
  font-family: 'IBM Plex Mono', 'SF Mono', 'Cascadia Mono', monospace;
  font-size: var(--fs-base);
  line-height: var(--leading-normal);
  color: var(--ink);
  background-color: var(--bg);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow-x: hidden;
}

/* Serif for the "human" voice — opinions, notes */
.voice {
  font-family: 'Newsreader', 'Georgia', 'Times New Roman', serif;
  font-style: italic;
  line-height: var(--leading-loose);
}

/* --- Page Shell --- */
.page {
  max-width: var(--max-width);
  margin: 0 auto;
  padding: var(--space-xl) var(--gutter);
}

/* --- Header / Manifest Title Block --- */
.manifest-header {
  padding-bottom: var(--space-2xl);
  border-bottom: 2px solid var(--ink);
  margin-bottom: var(--space-2xl);
  position: relative;
}

.manifest-id {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-md);
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.manifest-id::before {
  content: '';
  display: inline-block;
  width: 8px;
  height: 8px;
  background: var(--accent);
  border-radius: 50%;
  animation: pulse-dot 3s ease-in-out infinite;
}

@keyframes pulse-dot {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

.manifest-title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--leading-tight);
  letter-spacing: -0.03em;
  margin-bottom: var(--space-md);
  color: var(--ink);
}

.manifest-title span {
  color: var(--accent);
}

.manifest-subtitle {
  font-size: var(--fs-md);
  color: var(--ink-secondary);
  max-width: 38rem;
  line-height: var(--leading-normal);
}

.manifest-subtitle .voice {
  color: var(--ink);
  font-size: var(--fs-md);
}

.manifest-meta {
  display: flex;
  gap: var(--space-xl);
  margin-top: var(--space-lg);
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  flex-wrap: wrap;
}

.manifest-meta span::before {
  content: '//';
  margin-right: var(--space-xs);
  color: var(--rule-strong);
}

/* --- Table of Contents — like a document index --- */
.toc {
  margin-bottom: var(--space-2xl);
  padding: var(--space-lg);
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  border-left: 3px solid var(--accent);
}

.toc-label {
  font-size: var(--fs-xs);
  letter-spacing: 0.15em;
  text-transform: uppercase;
  color: var(--ink-tertiary);
  margin-bottom: var(--space-md);
}

.toc-list {
  list-style: none;
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs) var(--space-lg);
}

.toc-list a {
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
  padding: var(--space-xs) 0;
  display: inline-flex;
  align-items: center;
  gap: var(--space-sm);
}

.toc-list a:hover,
.toc-list a:focus-visible {
  color: var(--accent);
}

.toc-list a .toc-code {
  color: var(--accent);
  font-size: var(--fs-xs);
  font-weight: 600;
}

/* --- Category Section --- */
.category {
  margin-bottom: var(--space-3xl);
}

.category-header {
  display: flex;
  align-items: baseline;
  gap: var(--space-md);
  margin-bottom: var(--space-lg);
  border-bottom: 1px solid var(--rule);
  padding-bottom: var(--space-sm);
  position: sticky;
  top: 0;
  background: var(--bg);
  z-index: 10;
  padding-top: var(--space-md);
}

.category-code {
  font-size: var(--fs-xs);
  font-weight: 700;
  letter-spacing: 0.12em;
  color: var(--accent);
  background: var(--accent-dim);
  padding: var(--space-xs) var(--space-sm);
  white-space: nowrap;
  flex-shrink: 0;
}

.category-name {
  font-size: var(--fs-lg);
  font-weight: 600;
  letter-spacing: -0.01em;
}

.category-count {
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  margin-left: auto;
  white-space: nowrap;
}

/* --- Items Grid --- */
.items-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(min(100%, 20rem), 1fr));
  gap: var(--space-md);
}

/* --- Item Card — the inventory entry --- */
.item {
  background: var(--bg-raised);
  border: 1px solid var(--rule);
  padding: var(--space-lg);
  transition: border-color var(--duration) var(--ease-out),
              box-shadow var(--duration) var(--ease-out);
  position: relative;
}

.item:hover {
  border-color: var(--rule-strong);
  box-shadow: var(--shadow-md);
}

.item-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  margin-bottom: var(--space-sm);
  gap: var(--space-sm);
}

.item-code {
  font-size: var(--fs-xs);
  color: var(--accent);
  font-weight: 600;
  letter-spacing: 0.1em;
  flex-shrink: 0;
}

.item-verdict {
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  letter-spacing: 0.15em;
  flex-shrink: 0;
  line-height: 1;
  padding-top: 1px;
}

/* Filled pip */
.item-verdict .pip-on {
  color: var(--accent);
}

.item-name {
  font-size: var(--fs-md);
  font-weight: 600;
  margin-bottom: 2px;
  letter-spacing: -0.01em;
  line-height: var(--leading-tight);
}

.item-what {
  font-size: var(--fs-sm);
  color: var(--ink-tertiary);
  margin-bottom: var(--space-md);
  line-height: var(--leading-tight);
}

.item-note {
  font-size: var(--fs-sm);
  color: var(--ink-secondary);
  border-top: 1px solid var(--rule);
  padding-top: var(--space-sm);
  line-height: var(--leading-loose);
}

.item-note .voice {
  font-size: var(--fs-sm);
}

/* Tag inside note */
.item-tag {
  display: inline-block;
  font-family: 'IBM Plex Mono', monospace;
  font-style: normal;
  font-size: var(--fs-xs);
  background: var(--code-bg);
  color: var(--ink-secondary);
  padding: 1px 6px;
  letter-spacing: 0.04em;
  vertical-align: 1px;
}

/* Full-width item variant */
.item--wide {
  grid-column: 1 / -1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-lg);
}

.item--wide .item-content {
  display: flex;
  flex-direction: column;
}

.item--wide .item-note {
  border-top: none;
  border-left: 1px solid var(--rule);
  padding-top: 0;
  padding-left: var(--space-lg);
  display: flex;
  align-items: center;
}

@media (max-width: 600px) {
  .item--wide {
    grid-template-columns: 1fr;
  }
  .item--wide .item-note {
    border-left: none;
    border-top: 1px solid var(--rule);
    padding-left: 0;
    padding-top: var(--space-sm);
  }
}

/* --- Footer / Colophon --- */
.colophon {
  margin-top: var(--space-3xl);
  padding-top: var(--space-xl);
  border-top: 2px solid var(--ink);
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: var(--space-md);
  font-size: var(--fs-xs);
  color: var(--ink-tertiary);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  padding-bottom: var(--space-2xl);
}

.colophon a {
  color: var(--accent);
  text-decoration: none;
  transition: color var(--duration) var(--ease-out);
}

.colophon a:hover {
  color: var(--accent-hover);
}

/* --- Focus Styles --- */
a:focus-visible,
button:focus-visible {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

/* --- Responsive --- */
@media (max-width: 768px) {
  :root {
    --fs-3xl: 2.2rem;
    --fs-2xl: 1.8rem;
    --fs-xl:  1.4rem;
    --fs-lg:  1.15rem;
  }
  
  .page {
    padding: var(--space-lg) var(--space-md);
  }
  
  .manifest-meta {
    gap: var(--space-md);
  }
  
  .category-header {
    flex-wrap: wrap;
    gap: var(--space-xs) var(--space-md);
  }
  
  .category-count {
    width: 100%;
    margin-left: 0;
  }
}

@media (max-width: 480px) {
  :root {
    --fs-3xl: 1.8rem;
  }
  
  .items-grid {
    grid-template-columns: 1fr;
  }
  
  .toc-list {
    flex-direction: column;
    gap: var(--space-xs);
  }
}

/* --- Scrollbar (subtle) --- */
::-webkit-scrollbar {
  width: 6px;
}

::-webkit-scrollbar-track {
  background: var(--bg);
}

::-webkit-scrollbar-thumb {
  background: var(--rule-strong);
  border-radius: 3px;
}

::-webkit-scrollbar-thumb:hover {
  background: var(--ink-tertiary);
}

/* --- Selection --- */
::selection {
  background: var(--accent);
  color: var(--bg);
}

/* --- Print --- */
@media print {
  .category-header {
    position: static;
  }
  
  .item {
    break-inside: avoid;
    border: 1px solid #ccc;
  }
}