/* ==========================================================================
   assets/base.css — site glue only.

   The visual design lives in assets/clay.css, which is the reference
   stylesheet (nexiitt-result/preview.html) carried over verbatim. It defines
   the whole look: tokens, the clay window, sidebar, header, hero, search strip,
   category grid, feed, radar, listing, sheets, toast and every responsive
   breakpoint. Nothing here may restyle a component the reference owns.

   What is left in this project is the part the reference does not have:
   Nexiitt Result's own pages (notice detail, listing, saved, about), the search
   and saved sheets, and the token aliases those pages were written against.
   ========================================================================== */

/* --- Token aliases --------------------------------------------------------
   clay.css names its tokens --nx-* and exposes --surface / --accent / etc.
   The site-only components below were written against the older local names,
   so map them here instead of touching clay.css. One deliberate deviation,
   documented: the reference's --nx-muted (#96897a) and --nx-accent-dark
   (#e85a2a) measure 3.22:1 and 3.34:1 on the reference surface, which is too
   low for the 9–11px labels, deadlines and fee amounts that wear them here.
   --mint / --yellow-ink / --orange-ink / --purple-ink are therefore the same
   hues taken down to a readable depth. Fills and glyphs still use the
   reference values unchanged. */
:root {
  --font-num: "Manrope", ui-monospace, SFMono-Regular, Menlo, monospace;
  --panel-strong: var(--surface);
  --mint: #b83a10;            /* 5.43:1 on the surface — links, labels, prose */
  --mint-deep: #a8340c;
  --yellow-ink: #8a5d00;      /* 5.44:1 */
  --orange-ink: #a84d26;      /* 5.28:1 */
  --purple-ink: #6244b8;      /* 5.78:1 */
  --green-ink: #1d6b43;
  --blue-ink: #236586;
}

[data-theme="dark"] {
  --mint: #ff8e63;            /* 6.45:1 on the dark surface */
  --mint-deep: #ffc9a8;
  --yellow-ink: #f0c25f;
  --orange-ink: #ff9866;
  --purple-ink: #a58bdd;
  --green-ink: #4ec98d;
  --blue-ink: #4ec3e6;
}

/* --- Resets the reference does not do -------------------------------------
   clay.css zeroes margins on the elements it styles itself but leaves the
   document defaults in place, and the detail pages rely on these. */
h1,
h2,
h3,
h4,
p {
  margin: 0;
}

ul,
ol {
  margin: 0;
  padding: 0;
  list-style: none;
}

img,
svg {
  max-width: 100%;
}

[hidden] {
  display: none !important;
}

/* --- Accessibility -------------------------------------------------------- */

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

/* A skip link is the first thing a keyboard user sees, and it only exists
   while focused, so it gets the same deep coral the primary button uses
   (white on that is 5.18:1; white on --accent is the reference's 2.58:1). */
.skip-link {
  position: absolute;
  top: 8px;
  left: 8px;
  z-index: 60;
  padding: 9px 14px;
  border-radius: 10px;
  color: #fff;
  background: #c2410c;
  font-size: 11px;
  font-weight: 800;
  transform: translateY(-160%);
  transition: transform 0.2s var(--ease);
}

.skip-link:focus-visible {
  transform: translateY(0);
}

/* The reference's header search is a <label> wrapping a real <input>, so it has
   no rules for a hint or a shortcut key. Ours is a link that opens the search
   sheet, so both need placing inside the reference's pill. */
.header-search .ph {
  min-width: 0;
  overflow: hidden;
  flex: 1;
  white-space: nowrap;
}

.header-search kbd {
  display: grid;
  width: 18px;
  height: 18px;
  flex: 0 0 auto;
  place-items: center;
  border-radius: 6px;
  color: var(--muted-light);
  background: var(--surface);
  box-shadow: var(--nx-shadow-press);
  font-family: inherit;
  font-size: 9px;
  font-weight: 800;
}

.header-search:hover {
  color: var(--muted-light);
}

/* --- Motion floor --------------------------------------------------------- */

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

/* --- Print ---------------------------------------------------------------- */

@media print {
  body {
    color: #000;
    background: #fff;
  }

  body::before,
  body::after {
    display: none;
  }

  .app-window {
    border: 1px solid #ddd;
    background: #fff;
    box-shadow: none;
  }

  .window-bar,
  .sidebar,
  .feed-actions,
  .btn,
  .save-btn {
    display: none !important;
  }
}