/*
 * paper-ui design tokens.
 * Neubrutalist / paper-cutout observability UI look: hard offset shadows
 * (no blur), thick black borders, sharp corners, monospace type, a cream
 * paper surface on a near-black background, with a playful gradient
 * "tag" sticker and a tilted accent banner.
 *
 * Vendored verbatim from ../../../paper-ui-main/src/tokens.css. That repo
 * is the source of truth for these design-system tokens/components; blog-
 * only page layout and typography (nav, post list, article prose, code
 * highlighting, footer, ...) lives in main.css instead, right next to
 * this file.
 */

:root {
  /* Color */
  --paper-bg: #0b0b0c;
  --paper-surface: #f7f2df;
  --paper-ink: #111111;
  --paper-muted: #6b6b6b;

  /* Tag variants */
  --paper-tag-cyan-start: #8fe3d1;
  --paper-tag-cyan-end: #e8f26d;
  --paper-tag-yellow-start: #f2e94e;
  --paper-tag-yellow-end: #e8f26d;
  --paper-tag-orange-start: #f5a623;
  --paper-tag-orange-end: #ffcf6b;

  --paper-banner-bg: #f5a623;

  --paper-level-info: #111111;
  --paper-level-warn: #b5690a;
  --paper-level-error: #c0392b;

  /* Type */
  --paper-font-mono: 'JetBrains Mono', 'Fira Code', ui-monospace, SFMono-Regular, Menlo, Consolas,
    monospace;

  /* Borders / shadows */
  --paper-border-width: 3px;
  --paper-border-width-thick: 4px;
  --paper-shadow-offset: 6px;
  --paper-shadow: var(--paper-shadow-offset) var(--paper-shadow-offset) 0 var(--paper-ink);
  --paper-shadow-sm: 3px 3px 0 var(--paper-ink);

  /* Texture */
  --paper-dot-size: 1px;
  --paper-dot-gap: 14px;
  --paper-dot-opacity: 0.08;

  /* Motion / accents */
  --paper-tilt: -8deg;

  /* Spacing */
  --paper-space-1: 4px;
  --paper-space-2: 8px;
  --paper-space-3: 12px;
  --paper-space-4: 16px;
  --paper-space-5: 24px;
}

body {
  background: var(--paper-bg);
  font-family: var(--paper-font-mono);
  color: var(--paper-ink);
}

.paper-card {
  position: relative;
  background-color: var(--paper-surface);
  background-image: radial-gradient(
    rgba(17, 17, 17, var(--paper-dot-opacity)) var(--paper-dot-size),
    transparent var(--paper-dot-size)
  );
  background-size: var(--paper-dot-gap) var(--paper-dot-gap);
  border: var(--paper-border-width) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow);
  font-family: var(--paper-font-mono);
  color: var(--paper-ink);
  padding: var(--paper-space-4);
}

.paper-tag {
  display: inline-block;
  font-family: var(--paper-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper-ink);
  border: var(--paper-border-width) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow-sm);
  padding: var(--paper-space-1) var(--paper-space-2);
  font-size: 0.75rem;
  letter-spacing: 0.04em;
}

.paper-tag--cyan {
  background: linear-gradient(135deg, var(--paper-tag-cyan-start), var(--paper-tag-cyan-end));
}

.paper-tag--yellow {
  background: linear-gradient(135deg, var(--paper-tag-yellow-start), var(--paper-tag-yellow-end));
}

.paper-tag--orange {
  background: linear-gradient(135deg, var(--paper-tag-orange-start), var(--paper-tag-orange-end));
}

.paper-filter-chip {
  position: relative;
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: var(--paper-space-2);
}

.paper-filter-chip .paper-tag {
  position: relative;
  top: var(--paper-space-2);
  z-index: 1;
  align-self: flex-start;
}

.paper-filter-chip .paper-filter-chip-value {
  background: var(--paper-surface);
  border: var(--paper-border-width) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow);
  font-family: var(--paper-font-mono);
  font-weight: 700;
  color: var(--paper-ink);
  padding: var(--paper-space-3) var(--paper-space-4);
}

.paper-search-input {
  font-family: var(--paper-font-mono);
  background: transparent;
  border: none;
  border-bottom: 1px solid var(--paper-ink);
  color: var(--paper-ink);
  padding: var(--paper-space-2) 0;
}

.paper-search-input::placeholder {
  color: var(--paper-muted);
}

.paper-search-input:focus-visible {
  outline: none;
  border-bottom: var(--paper-border-width) solid var(--paper-ink);
  box-shadow: 0 3px 0 var(--paper-ink);
}

.paper-log-list {
  border-top: var(--paper-border-width) solid var(--paper-ink);
  font-family: var(--paper-font-mono);
}

.paper-log-row {
  display: grid;
  grid-template-columns: max-content max-content 1fr;
  gap: var(--paper-space-3);
  background: var(--paper-surface);
  color: var(--paper-ink);
  padding: var(--paper-space-2) var(--paper-space-3);
  border-bottom: 1px solid var(--paper-ink);
}

.paper-log-level-info {
  color: var(--paper-level-info);
}

.paper-log-level-warn {
  color: var(--paper-level-warn);
  font-weight: 700;
}

.paper-log-level-error {
  color: var(--paper-level-error);
  font-weight: 700;
}

.paper-nav {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paper-space-3);
  font-family: var(--paper-font-mono);
}

.paper-nav-link {
  color: var(--paper-ink);
  text-decoration: none;
  font-weight: 700;
  text-transform: uppercase;
  font-size: 0.85rem;
  letter-spacing: 0.03em;
  padding-bottom: var(--paper-space-1);
  border-bottom: var(--paper-border-width) solid transparent;
}

.paper-nav-link:hover,
.paper-nav-link:focus-visible {
  outline: none;
  border-bottom-color: var(--paper-ink);
}

.paper-nav-link--active {
  border-bottom-color: var(--paper-ink);
}

.paper-post-list {
  border-top: var(--paper-border-width) solid var(--paper-ink);
  font-family: var(--paper-font-mono);
}

.paper-post-item {
  display: flex;
  flex-direction: column;
  gap: var(--paper-space-1);
  padding: var(--paper-space-3);
  border-bottom: 1px solid var(--paper-ink);
}

.paper-post-item-header {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: var(--paper-space-3);
}

.paper-post-item-date {
  color: var(--paper-muted);
  font-size: 0.85rem;
  white-space: nowrap;
}

.paper-post-item-title {
  font-weight: 700;
}

.paper-post-item-title a {
  color: var(--paper-ink);
  text-decoration: none;
}

.paper-post-item-title a:hover,
.paper-post-item-title a:focus-visible {
  text-decoration: underline;
}

.paper-post-item-tags {
  display: flex;
  flex-wrap: wrap;
  gap: var(--paper-space-2);
  /* Tags carry --paper-shadow-sm (3px offset), which does not reserve
     layout space (box-shadow is paint-only). Give the row itself a small
     top margin so the shadow does not collide with the header line right
     above it. */
  margin-top: var(--paper-space-1);
}

.paper-pagination {
  display: flex;
  justify-content: space-between;
  gap: var(--paper-space-3);
  margin-top: var(--paper-space-5);
  /* .paper-pagination-link carries --paper-shadow-sm; reserve room below
     in case another element follows the pagination bar directly. */
  margin-bottom: var(--paper-space-2);
  font-family: var(--paper-font-mono);
}

.paper-pagination-link {
  display: inline-block;
  background: var(--paper-surface);
  border: var(--paper-border-width) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow-sm);
  padding: var(--paper-space-2) var(--paper-space-3);
  font-weight: 700;
  text-decoration: none;
  color: var(--paper-ink);
  text-transform: uppercase;
  font-size: 0.85rem;
}

.paper-pagination-link:hover,
.paper-pagination-link:focus-visible {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: none;
}

.paper-pagination-link--disabled {
  opacity: 0.35;
  pointer-events: none;
}

.paper-meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--paper-space-2) var(--paper-space-3);
  font-family: var(--paper-font-mono);
  font-size: 0.85rem;
  color: var(--paper-muted);
  /* .paper-tag children carry --paper-shadow-sm; reserve room below so
     the shadow does not collide with whatever follows the byline. */
  margin-bottom: var(--paper-space-3);
}

.paper-meta-item a {
  color: var(--paper-ink);
}

.paper-section-heading {
  font-family: var(--paper-font-mono);
  text-transform: uppercase;
  font-weight: 700;
  letter-spacing: 0.04em;
  border-bottom: var(--paper-border-width) solid var(--paper-ink);
  padding-bottom: var(--paper-space-2);
  margin: var(--paper-space-5) 0 var(--paper-space-3);
}

.paper-scroll-buttons {
  position: fixed;
  right: var(--paper-space-4);
  bottom: var(--paper-space-4);
  display: flex;
  flex-direction: column;
  gap: var(--paper-space-2);
  z-index: 900;
  opacity: 1;
}

.paper-scroll-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  background: var(--paper-surface);
  border: var(--paper-border-width) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow-sm);
  color: var(--paper-ink);
  text-decoration: none;
  font-family: var(--paper-font-mono);
  font-weight: 700;
  font-size: 1.1rem;
  line-height: 1;
}

.paper-scroll-btn:hover,
.paper-scroll-btn:focus-visible {
  outline: none;
  transform: translate(2px, 2px);
  box-shadow: none;
}

/* Hide .paper-scroll-buttons until the page has been scrolled a little,
   using a CSS scroll-driven animation tied to root scroll progress
   (Baseline widely available) instead of a JS scroll listener. Browsers
   without support for animation-timeline fall back to the always-visible
   opacity: 1 above — still fully usable, just not hidden at the very top
   of the page. */
@keyframes paper-scroll-buttons-reveal {
  from {
    opacity: 0;
    pointer-events: none;
  }
  to {
    opacity: 1;
    pointer-events: auto;
  }
}

@supports (animation-timeline: scroll()) {
  .paper-scroll-buttons {
    opacity: 0;
    pointer-events: none;
    animation: paper-scroll-buttons-reveal linear both;
    animation-timeline: scroll(root);
    animation-range: 0 200px;
  }
}

.paper-tilted-banner {
  position: absolute;
  top: calc(var(--paper-space-5) * -1);
  right: var(--paper-space-5);
  z-index: 10;
  transform: rotate(var(--paper-tilt));
  background: var(--paper-banner-bg);
  border: var(--paper-border-width-thick) solid var(--paper-ink);
  border-radius: 0;
  box-shadow: var(--paper-shadow);
  font-family: var(--paper-font-mono);
  font-weight: 700;
  text-transform: uppercase;
  color: var(--paper-ink);
  padding: var(--paper-space-2) var(--paper-space-4);
}