/* Now page -- structural/accent CSS for docs/compass/now.md's generated entry lists
   (tools/build-now-content.js). now.md is a real MkDocs Material page now
   (see documentation/NOW-PAGE.md's "TSV -> JS pipeline" for why), so page
   chrome, typography, and colours already come from cabinet-material.css
   the same way they do on every other content page (about.md, colophon.md,
   ...) -- this file only adds the bits Material's own .md-typeset styles
   don't know about: the entry-list layout and the fade-hierarchy accent.

   Every selector below is prefixed with .md-typeset, matching or exceeding
   the specificity of Material's own element-level rules (e.g. ".md-typeset
   h2", ".md-typeset ul") so these reliably win regardless of stylesheet
   load order -- a bare class selector like ".now-section-title" would lose
   to ".md-typeset h2" on specificity alone. */

:root {
  /* Locally-defined, not imported from cabinet-v3-style.css's --v3-* tokens
     on purpose -- that file is still an in-flux prototype system (see its
     own header comment), and /now should stay stable and self-contained
     rather than picking up its future retuning. Values below MATCH (not
     reference) that stylesheet's "satellite"/Topology theme
     (--v3-sea-deep/--v3-sea-shallow: #1c5f8a / #43d6d6) -- the deep-blue
     one used as-is for text-weight accents (links, the freshest fade tier),
     the bright cyan darkened one step (#43d6d6 -> #2a9797) for the same
     reason cabinet-tokens.css's own --cab-focus-ring (#1c5f6b, already a
     close cousin of the deep-blue value here) is a cool teal rather than a
     literal saturated one: enough contrast against parchment to read as
     text/rule colour, not just a decorative wash. */
  --now-accent: #1c5f8a;
  --now-accent-bright: #2a9797;
}

.md-typeset h2.now-section-title {
  font-size: 1.15rem;
  font-weight: 600;
  letter-spacing: 0.03em;
  border-bottom: 2px solid var(--now-accent-bright);
  padding-bottom: 0.4rem;
  margin: 2rem 0 1rem;
}

.md-typeset ul.now-entry-list {
  list-style: none;
  margin: 0 0 2rem;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 0.9rem;
}

.md-typeset .now-entry {
  display: flex;
  gap: 0.9rem;
  align-items: flex-start;
  margin: 0;
}

/* One flex item alongside the optional image, so a multi-paragraph entry
   (e.g. a longer reaction) stacks its <p> tags in a column instead of the
   <li>'s own flex row treating each paragraph as a separate side-by-side
   item. */
.md-typeset .now-entry-text {
  flex: 1;
  min-width: 0;
}

.md-typeset .now-entry-value {
  margin: 0 0 0.6rem;
}

.md-typeset .now-entry-value:last-child {
  margin-bottom: 0;
}

.md-typeset .now-entry-value a {
  /* inherit, not a hardcoded ink colour -- most "current"-tier entries
     (book/film titles) ARE links, so the link needs to pick up whichever
     fade-tier colour its paragraph has (now-current's blue accent included)
     rather than overriding it back to plain ink. */
  color: inherit;
  text-decoration-color: var(--cab-ink-faint);
}

.md-typeset .now-entry-value a:hover,
.md-typeset .now-entry-value a:focus-visible {
  color: var(--now-accent);
}

/* "side" layout (default): a portrait-ish box, not a square avatar crop --
   reads as a book-cover/thumbnail rather than a profile picture. Sized for
   the reading/found sections' actual images (book covers, link
   screenshots). */
.md-typeset img.now-entry-image {
  width: 6rem;
  height: 8.5rem;
  object-fit: cover;
  border-radius: 3px;
  border: 1px solid var(--cab-card-border);
  flex-shrink: 0;
}

/* "full" layout: image spans the entry, sits above the text instead of
   beside it -- see tools/build-now-content.js's imageLayout handling and
   now-data.js's per-section config. */
.md-typeset .now-entry--image-full {
  flex-direction: column;
  align-items: stretch;
}

.md-typeset img.now-entry-image--full {
  width: 100%;
  height: auto;
  max-height: 22rem;
  object-fit: cover;
}

/* Fade hierarchy: colour + weight, not literal opacity, so text stays
   legible against the parchment background at every step (see
   documentation/NOW-PAGE.md's "Important Visual Rule"). The freshest tier
   gets the blue accent instead of plain ink -- "current" reads as
   genuinely alive, not just heavier, and it's what actually delivers the
   "a lot of" blue-green presence the page asked for (repeated at the top
   of every section) rather than confining the accent to one-off link
   colours. */
.md-typeset .now-current .now-entry-value {
  color: var(--now-accent);
  font-weight: 500;
}

.md-typeset .now-recent .now-entry-value {
  color: var(--cab-ink-soft);
}

.md-typeset .now-old .now-entry-value {
  color: var(--cab-ink-faint);
  font-size: 0.95rem;
}

@media (max-width: 32rem) {
  .md-typeset img.now-entry-image {
    width: 4.5rem;
    height: 6.5rem;
  }

  .md-typeset img.now-entry-image--full {
    max-height: 14rem;
  }
}