/*
 * Cortex — Pop-art Flair Layer
 *
 * Decorative layer added on top of the redesign. Information architecture,
 * layout, density, grid, tables, and component behavior are unchanged. All
 * flair is opt-in via additive classes (.pop, .sticker) except for the
 * global card-title, stat-label, stat-value, sidebar section, and topbar
 * "here" type swap, which apply automatically wherever those classes appear.
 *
 * Removing this file (or the @import) reverts cleanly to the unstyled
 * redesign.
 *
 * Color rules of thumb:
 *   - Pink: brand mark, focus rings, active-row indicators, key emphasis.
 *   - Blue: primary CTAs (sticker buttons), clickable metric values, card-head
 *           icon tiles.
 *   - Yellow: page H1 highlighter swatch only.
 *   - Ink: 2px hard borders + offset shadows on .pop surfaces.
 *
 * Never combine pink + yellow on the same surface.
 *
 * Bangers gotcha: Bangers is a single-weight (400), already-slanted comic
 * face. Never apply font-style: italic — the synthesized italic on top of
 * an already-slanted glyph reads muddy. Bangers is also taller and
 * narrower than typical display fonts, so wherever it appears, sizes are
 * bumped ~15–20% and letter-spacing is opened up.
 */

@layer reset, base, components, utilities, pop;

@layer pop {
  /* ---------- Eyebrow (small label above an H1) ----------
     Used as <div class="rd-page-eyebrow pop">Today</div>. */
  .rd-page-eyebrow.pop,
  .rd-eyebrow.pop {
    display: inline-flex;
    align-items: center;
    gap: 10px;
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-base);
    font-weight: 400;
    letter-spacing: 0.18em;
    text-transform: uppercase;
    color: var(--rd-fg-muted);
    margin: 0 0 8px;
  }
  .rd-page-eyebrow.pop::before,
  .rd-eyebrow.pop::before {
    content: "";
    width: 22px;
    height: 2px;
    background: var(--pop-pink);
    flex: 0 0 auto;
  }

  /* ---------- Page title — yellow sticker swatch ----------
     <h1 class="rd-page-title pop">Good morning, Jake</h1> %>
     The whole greeting line lives inside one swatch. */
  .rd-page-title.pop {
    display: block;
    width: fit-content;
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-2xl);
    font-weight: 400;
    letter-spacing: 0.02em;
    text-transform: uppercase;
    line-height: 1.05;
    color: var(--pop-yellow-fg);
    background: var(--pop-yellow);
    border: 2px solid var(--pop-ink);
    border-radius: 0;
    padding: 6px 14px 4px;
    box-shadow: var(--pop-shadow);
    transform: rotate(-1.5deg);
    transform-origin: left center;
    /* Bangers ships pre-slanted; never compound with italic. */
    font-style: normal;
  }

  /* Sticker button styles are now baked into the base .rd-btn (see
     components.css). The .sticker class itself is a no-op alias retained
     for backwards compatibility with existing markup. Color variants
     (.pink / .blue / .yellow) and the .rd-btn-primary fill now apply
     directly to .rd-btn — no .sticker prefix required. */

  /* ---------- Card — pop variant (opt-in) ----------
     The base .rd-card now ships with the ink border + offset shadow, so
     <section class="rd-card pop"> is now equivalent. The .pop modifier
     stays as a no-op for backwards compatibility with existing markup. */
  .rd-card.pop {
    border: 2px solid var(--pop-ink);
    box-shadow: var(--pop-shadow);
    border-radius: 0;
  }

  /* ---------- Card titles (global Bangers swap) ----------
     Affects every card head in the redesign. */
  .rd-card-title {
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-base);
    font-weight: 400;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    /* Bangers ships pre-slanted; never compound with italic. */
    font-style: normal;
  }

  /* ---------- Stat tile (global Bangers swap) ----------
     One typographic block across the strip. Numbers stay tabular. */
  .rd-stat-label {
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-base);
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-style: normal;
  }
  .rd-stat-value {
    font-family: var(--rd-font-display);
    letter-spacing: 0.02em;
    font-weight: 400;
    font-style: normal;
  }
  .rd-stat-value-unit {
    font-family: var(--rd-font-display);
    font-weight: 400;
    letter-spacing: 0.04em;
    font-style: normal;
  }

  /* ---------- Sidebar ---------- */
  .rd-sidebar-section {
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-base);
    font-weight: 400;
    letter-spacing: 0.10em;
    text-transform: uppercase;
    font-style: normal;
  }
  /* 3px pink left rail on the active item. Inset so it doesn't shift the
     icon and keeps the rounded card shape intact. Sub-nav items are
     differentiated by accent text + weight only — adding a second rail
     would misalign with the parent's (sub-nav is indented 34px) and
     create the visual collision when both parent and child are active. */
  .rd-nav-item.is-active {
    box-shadow:
      inset 3px 0 0 var(--pop-pink),
      inset 0 0 0 1px var(--rd-border);
  }
  .rd-nav-sub .rd-nav-item.is-active {
    box-shadow: none;
  }

  /* ---------- Topbar — breadcrumb here ---------- */
  .rd-crumbs .rd-here {
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-md);
    font-weight: 400;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    font-style: normal;
  }

  /* ---------- Metric link (clickable values in pop-blue) ----------
     Echoes the original "136 total · 31 active" pattern. Use on numbers
     wrapped in an <a> inside stat tiles, card heads, etc. */
  .rd-metric-link {
    color: var(--pop-blue);
    text-decoration: none;
    border-bottom: 1px solid transparent;
    transition: border-color var(--rd-dur-fast) var(--rd-ease);
  }
  .rd-metric-link:hover {
    border-bottom-color: var(--pop-blue);
    color: var(--pop-blue-hover);
  }

  /* ---------- Card tile (icon next to a card title) ----------
     <span class="rd-card-tile"><svg…/></span> — 30×30 royal-blue square
     with ink border + offset shadow. */
  .rd-card-tile {
    display: inline-grid;
    place-items: center;
    width: 30px;
    height: 30px;
    border-radius: 0;
    background: var(--pop-blue);
    color: #fff;
    border: 2px solid var(--pop-ink);
    box-shadow: var(--pop-shadow-sm);
    flex: 0 0 auto;
  }

  /* ---------- Badge — sticker variant ---------- */
  .rd-badge.pop {
    font-family: var(--rd-font-display);
    font-size: var(--rd-text-xs);
    font-weight: 400;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    padding: 3px 8px;
    background: var(--pop-yellow);
    color: var(--pop-yellow-fg);
    border: 1.5px solid var(--pop-ink);
    border-radius: 0;
    box-shadow: 1.5px 1.5px 0 var(--pop-ink);
    font-style: normal;
  }
  .rd-badge.pop.pink {
    background: var(--pop-pink);
    color: #fff;
  }
  .rd-badge.pop.blue {
    background: var(--pop-blue);
    color: #fff;
  }

  /* ---------- Page-title swatch in dark mode ----------
     The yellow swatch is the only place we keep a bright fill in dark mode;
     the ink border still reads against the canvas. */
  html[data-theme="dark"] .rd-page-title.pop {
    /* Slightly lifted yellow against the navy bg so the swatch hits as
       intended without going hot/blown-out. */
    background: oklch(0.88 0.18 95);
  }

  /* The pop-ink hard-shadow on cards/buttons reads as a charcoal stripe
     in dark mode rather than a true drop shadow. Soften it just enough so
     it still feels like comic-pop ink without a black gash. */
  html[data-theme="dark"] .rd-card,
  html[data-theme="dark"] .rd-card.pop,
  html[data-theme="dark"] .rd-stat-card,
  html[data-theme="dark"] .rd-dropdown-menu,
  html[data-theme="dark"] .rd-popover-menu,
  html[data-theme="dark"] .milestone-card,
  html[data-theme="dark"] .inline-assignee-dropdown {
    box-shadow: 3px 3px 0 oklch(0.10 0.02 250);
  }
  html[data-theme="dark"] .rd-callout,
  html[data-theme="dark"] .rd-search,
  html[data-theme="dark"] .rd-seg,
  html[data-theme="dark"] .rd-theme-toggle,
  html[data-theme="dark"] .rd-app .flash {
    box-shadow: 2px 2px 0 oklch(0.10 0.02 250);
  }
  html[data-theme="dark"] .rd-btn {
    box-shadow: 2px 2px 0 oklch(0.10 0.02 250);
  }
  html[data-theme="dark"] .rd-btn:hover {
    box-shadow: 3px 3px 0 oklch(0.10 0.02 250);
  }
  html[data-theme="dark"] .rd-btn:disabled,
  html[data-theme="dark"] .rd-btn[aria-disabled="true"] {
    box-shadow: 2px 2px 0 oklch(0.10 0.02 250);
  }
  /* The dark-mode shadow shouldn't apply to flat-by-design variants. */
  html[data-theme="dark"] .rd-btn-sm,
  html[data-theme="dark"] .rd-btn-sm:hover,
  html[data-theme="dark"] .rd-btn-ghost,
  html[data-theme="dark"] .rd-btn-ghost:hover {
    box-shadow: none;
  }
  html[data-theme="dark"] .rd-card-tile {
    box-shadow: 2px 2px 0 oklch(0.10 0.02 250);
  }
  /* Reduced motion: kill the sticker hover translate. */
  @media (prefers-reduced-motion: reduce) {
    .rd-btn {
      transition: none;
    }
    .rd-btn:hover,
    .rd-btn:active {
      transform: none;
    }
  }
}