/* ============================================================
   nimbus — component layer
   Requires tokens.css. Class prefix: nb-
   ============================================================ */

/* ---- ground ------------------------------------------------ */
* { box-sizing: border-box; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--body);
  font-size: var(--text-body);
  line-height: 1.55;
  transition: background var(--calm), color var(--calm);
}

/* the constellation — codekanban's dot-grid texture.
   Sits on the sky, barely there. */
.nb-constellation {
  background-image:
    radial-gradient(rgba(130, 167, 255, .07) 1px, transparent 1px);
  background-size: 26px 26px;
}
[data-theme="day"] .nb-constellation {
  background-image:
    radial-gradient(rgba(59, 99, 214, .09) 1px, transparent 1px);
}

/* honey marks what is yours: text selection */
::selection { background: var(--honey-tint); color: var(--ink); }

/* focus is moon, always visible, never removed */
:focus-visible {
  outline: 2px solid var(--moon);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---- type roles -------------------------------------------- */
h1, h2, h3, .nb-display {
  font-family: var(--display);
  font-weight: 500;
  letter-spacing: -0.01em;
  text-wrap: balance;
  margin: 0;
}

a { color: var(--moon); text-decoration-thickness: 1px; text-underline-offset: 2px; }

/* the micro-label — uppercase, tracked out, dim.
   codekanban column headers / trello .kicker */
.nb-micro {
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--dim);
}

/* mono is for data: metrics, hex, timestamps, counts */
.nb-data {
  font-family: var(--mono);
  font-size: var(--text-data);
  font-variant-numeric: tabular-nums;
}

/* ---- the sigil ---------------------------------------------
   The hexagon from codekanban's wordmark, holding one warm
   light. The halo is the only glow in the system. */
.nb-sigil { display: inline-block; vertical-align: -0.12em; }
.nb-sigil .hex { fill: none; stroke: var(--moon); stroke-width: 1.5; }
.nb-sigil .light { fill: var(--honey); }
.nb-sigil .halo {
  fill: var(--honey);
  opacity: .28;
  animation: nb-breathe 3.2s ease-in-out infinite;
  transform-origin: center;
}
@keyframes nb-breathe {
  0%, 100% { opacity: .18; transform: scale(1); }
  50%      { opacity: .38; transform: scale(1.35); }
}

/* ---- buttons ------------------------------------------------
   The pogo-kids key: a hard 2px bottom edge, and the button
   physically travels 1px when pressed. Primary is moon —
   honey never becomes a button. */
.nb-btn {
  appearance: none;
  display: inline-flex;
  align-items: center;
  gap: var(--s2);
  font: 600 var(--text-body) var(--body);
  color: var(--moon-ink);
  background: var(--moon);
  border: 0;
  border-radius: var(--radius-ctl);
  padding: 9px 16px 10px;
  box-shadow: 0 2px 0 var(--moon-deep);
  cursor: pointer;
  transition: transform var(--fast), box-shadow var(--fast),
              background var(--fast);
}
.nb-btn:hover { filter: brightness(1.06); }
.nb-btn:active {
  transform: translateY(1px);
  box-shadow: 0 1px 0 var(--moon-deep);
}

.nb-btn--quiet {
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  box-shadow: 0 2px 0 var(--hairline);
}
.nb-btn--quiet:active { box-shadow: 0 1px 0 var(--hairline); }

.nb-btn--ghost {
  color: var(--moon);
  background: transparent;
  border: 1px solid var(--hairline);
  box-shadow: none;
}
.nb-btn--ghost:active { transform: translateY(1px); }

.nb-btn--danger {
  color: #fff;
  background: var(--alert);
  box-shadow: 0 2px 0 color-mix(in srgb, var(--alert) 70%, black);
}
.nb-btn--danger:active {
  box-shadow: 0 1px 0 color-mix(in srgb, var(--alert) 70%, black);
}

/* ---- pills --------------------------------------------------
   Filter chips: muted at rest, moon border + tint when on.
   State is carried by aria-pressed, not a class. */
.nb-pill {
  appearance: none;
  font: 600 var(--text-data) var(--body);
  color: var(--dim);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 5px 12px;
  cursor: pointer;
  transition: color var(--fast), border-color var(--fast),
              background var(--fast);
}
.nb-pill:hover { color: var(--ink); }
.nb-pill[aria-pressed="true"] {
  color: var(--ink);
  border-color: var(--moon);
  background: var(--moon-tint);
}

/* status pills — how state is worn (never a colored left
   border; that stripe is banned in this house) */
.nb-status {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--text-micro) var(--body);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
.nb-status::before {
  content: "";
  width: 6px; height: 6px;
  border-radius: 50%;
  background: currentColor;
}
.nb-status--ok    { color: var(--ok);    background: var(--ok-tint); }
.nb-status--warn  { color: var(--warn);  background: var(--warn-tint); }
.nb-status--alert { color: var(--alert); background: var(--alert-tint); }

/* the honey marker — pinned / current / yours */
.nb-lit {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font: 600 var(--text-micro) var(--body);
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--honey-deep);
  background: var(--honey-tint);
  border-radius: var(--radius-pill);
  padding: 3px 10px;
}
:root:not([data-theme="day"]) .nb-lit { color: var(--honey); }

/* ---- cards -------------------------------------------------- */
.nb-card {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--s4);
  box-shadow: var(--shadow-rest);
  transition: transform var(--fast), box-shadow var(--fast);
}
.nb-card--lift:hover {
  transform: translateY(-1px);
  box-shadow: var(--shadow-lift);
}

.nb-panel {
  background: var(--panel);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-panel);
  padding: var(--s5);
}

/* empty states are dashed — an invitation, not a void */
.nb-empty {
  border: 1.5px dashed var(--hairline);
  border-radius: var(--radius-card);
  padding: var(--s5);
  color: var(--faint);
  text-align: center;
}

/* ---- inputs -------------------------------------------------- */
.nb-field { display: grid; gap: 6px; }
.nb-field > .nb-micro { display: block; }

.nb-input {
  font: 400 var(--text-body) var(--body);
  color: var(--ink);
  background: var(--panel-2);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-ctl);
  padding: 9px 12px;
  transition: border-color var(--fast);
  width: 100%;
}
.nb-input::placeholder { color: var(--faint); }
.nb-input:focus { outline: none; border-color: var(--moon); }
.nb-input:focus-visible { outline: none; }

/* ---- toast ---------------------------------------------------
   The double-ttt pill toast, kept. */
.nb-toast {
  position: fixed;
  left: 50%;
  bottom: 24px;
  transform: translateX(-50%) translateY(8px);
  background: var(--panel-2);
  color: var(--ink);
  border: 1px solid var(--hairline);
  border-radius: var(--radius-pill);
  padding: 10px 18px;
  font: 600 var(--text-body) var(--body);
  box-shadow: var(--shadow-lift);
  opacity: 0;
  pointer-events: none;
  transition: opacity var(--calm), transform var(--calm);
}
.nb-toast.is-on {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}

/* ---- tables --------------------------------------------------- */
.nb-table { width: 100%; border-collapse: collapse; }
.nb-table th {
  font-size: var(--text-micro);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: var(--track-micro);
  color: var(--dim);
  text-align: left;
  padding: var(--s2) var(--s3);
  border-bottom: 1px solid var(--hairline);
}
.nb-table td {
  padding: var(--s3);
  border-bottom: 1px solid var(--hairline);
  vertical-align: top;
}
.nb-table tr:last-child td { border-bottom: 0; }

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