/*
 * ll-entry.css — THE ENTRY. The composite five surfaces were each rebuilding.
 *
 * WHY. News, messages, notifications, help articles and changelog entries are the
 * same object seen five ways: a timestamped item with an icon, a title, a body,
 * some metadata and a state. They were built five times in five vocabularies —
 * whats-new speaks .panel/.ph/.nmk/.fresh, help-center speaks .hc-sec/.hc-card/
 * .cs/.dd, inbox speaks its own — which is exactly why one of them looks a
 * generation behind the others at any given moment. Nobody neglected them; there
 * was simply no shared piece to reach for.
 *
 * This is that piece. It defines the entry ONCE, on the v5 tokens, so a surface
 * consumes it instead of inventing it. Opt-in: a page links this file, so nothing
 * changes for a page that has not migrated.
 *
 * THE CONTRACT (see ll-entry.js): icon · title · meta · body · figures · actions.
 * Every part is optional except the title, because a notification has no body and
 * a help article has no author, and a composite that demands all of them would be
 * refused by four of the five surfaces it exists for.
 *
 * CONTRAST NOTE, learned the hard way on the 404: --muted clears the 4.5 floor
 * only on --card (4.99), not on --bg (4.11) or --inset (4.30). The entry sits on
 * --card, so --muted is legitimate here. If an entry is ever placed directly on
 * the page ground, its meta line needs --text instead.
 */

/* ── the list ─────────────────────────────────────────────────────── */
.ll-feed {
  display: flex;
  flex-direction: column;
  gap: .7rem;
}

/* ── one entry ────────────────────────────────────────────────────── */
.ll-entry {
  /* --entry-tone is the ONE hue an entry wears. The chip and the icon tile both read
     it, so a release cannot show a green chip beside a gold tile — which is exactly
     what shipped: the tile was hard-coded to --gold while the chip followed the kind. */
  --entry-tone: var(--gold);
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: .35rem .85rem;
  padding: .95rem 1.05rem;
  border: 1px solid var(--border);
  border-radius: var(--r-md, 12px);
  background: var(--card);
  color: var(--text);
  text-decoration: none;
  /* Elevation is the specific thing the knowledgebase and changelog cards have and
     this did not. --sh-sm is defined per theme, so it degrades correctly. */
  box-shadow: var(--sh-sm);
  transition: border-color .18s ease, background .18s ease, box-shadow .18s ease, transform .18s ease;
}
.ll-entry--tone-release  { --entry-tone: var(--green); }
.ll-entry--tone-network  { --entry-tone: var(--violet); }
.ll-entry--tone-fix      { --entry-tone: var(--blue, var(--ledger)); }
.ll-entry--tone-campaign { --entry-tone: var(--gold); }
a.ll-entry:hover,
button.ll-entry:hover {
  border-color: color-mix(in srgb, var(--entry-tone) 55%, var(--border));
  box-shadow: var(--sh-md);
  transform: translateY(-1px);
}
.ll-entry:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* The icon column spans the whole entry so a long body does not leave it
   floating beside the title with a column of empty space under it. */
.ll-entry__ic {
  grid-row: 1 / -1;
  width: 34px; height: 34px;
  border-radius: 9px;
  display: grid; place-items: center;
  flex: none;
  /* Ink on a tinted ground, the same treatment the kind chip uses and for the same
     measured reason: an accent glyph on a 12% tint of itself reads 2.84:1 on light,
     under the 3:1 floor for a meaningful non-text element. The hue still carries the
     kind; it just carries it in the ground rather than the glyph. */
  color: var(--ink);
  background: color-mix(in srgb, var(--entry-tone) 18%, transparent);
  border: 1px solid color-mix(in srgb, var(--entry-tone) 30%, transparent);
}
.ll-entry__ic svg { display: block; }

.ll-entry__head { display: flex; align-items: baseline; gap: .5rem; flex-wrap: wrap; }
.ll-entry__t { font-weight: 700; font-size: .95rem; line-height: 1.35; color: var(--ink); margin: 0; }

/* ── headline density: for a feed you READ, not a list you scan ──────
 * The base entry runs its title at 1.09x the body, which is nearly flat — fine for a
 * notification row, wrong for /news, where the knowledgebase and changelog cards the
 * operator likes run 1.25-1.55x. A feed-level modifier rather than a base change, so
 * messages and notifications keep the compact rhythm they want. */
.ll-feed--headline .ll-entry { gap: .5rem .85rem; padding: 1.05rem 1.15rem; }
.ll-feed--headline .ll-entry__t {
  font-size: clamp(1.02rem, 1.4vw, 1.18rem);
  line-height: 1.28;
  letter-spacing: -.01em;
}
.ll-feed--headline .ll-entry__body { margin-top: .4rem; color: var(--muted); }
/* The kind chip reads as an eyebrow ABOVE the headline, the way the kb cards do —
   achieved by reversing the head row, so no markup changes. */
.ll-feed--headline .ll-entry__head { flex-direction: column-reverse; align-items: flex-start; gap: .3rem; }

/* ── meta: author · date · project, in mono because they are data ──── */
.ll-entry__meta {
  display: flex; flex-wrap: wrap; align-items: center; gap: .3rem .55rem;
  font-family: var(--mono); font-size: .66rem; color: var(--muted); line-height: 1.5;
}
.ll-entry__meta .sep { color: var(--border-strong, var(--border)); }
.ll-entry__meta time { font-variant-numeric: tabular-nums; }

.ll-entry__body { margin: .1rem 0 0; font-size: .87rem; line-height: 1.6; color: var(--text); }
.ll-entry__body p { margin: 0 0 .55rem; }
.ll-entry__body p:last-child { margin-bottom: 0; }

/* ── tag: what KIND of entry this is ──────────────────────────────────
 *
 * The kind is carried by a TINTED GROUND, not by coloured text. Measured, both
 * themes, at this size (.58rem — small text, so the floor is 4.5):
 *
 *              accent as text        --ink on an 18% tint
 *   gold       2.84 light  FAIL      14.36 light · 11.88 dark
 *   green      3.71 light  FAIL
 *   violet     4.41 light  FAIL
 *
 * Every accent fails as small text on light, because the light palette's accents
 * are tuned as accents, not as type — the same trap that produced the light-mode
 * button bugs. --ink on the tint passes everywhere and still shows the hue. The
 * label always spells the kind out, so colour is never the only carrier.
 *
 * The hues are the Lobby's, pinned by LOBBY-NEWS-1: release green, network
 * violet, campaign gold. Do not re-map them here.
 */
.ll-tag {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: var(--mono); font-size: .58rem; font-weight: 700;
  letter-spacing: .1em; text-transform: uppercase;
  padding: .16rem .45rem; border-radius: 5px;
  color: var(--ink); background: var(--inset, var(--bg));
  border: 1px solid var(--border);
}
.ll-tag--release  { background: color-mix(in srgb, var(--green) 18%, transparent);  border-color: color-mix(in srgb, var(--green) 38%, transparent); }
.ll-tag--network  { background: color-mix(in srgb, var(--violet) 18%, transparent); border-color: color-mix(in srgb, var(--violet) 38%, transparent); }
.ll-tag--campaign { background: color-mix(in srgb, var(--gold) 18%, transparent);   border-color: color-mix(in srgb, var(--gold) 38%, transparent); }
.ll-tag--fix      { background: color-mix(in srgb, var(--blue, var(--ledger)) 18%, transparent); border-color: color-mix(in srgb, var(--blue, var(--ledger)) 38%, transparent); }
/* notice is the base: no hue, because most entries are not special. */

/* ── unread: a state, not a decoration ────────────────────────────── */
.ll-entry--unread { border-left: 2px solid var(--gold); }
.ll-entry__dot { width: 7px; height: 7px; border-radius: 50%; background: var(--gold); flex: none; }

/* ── figures: the numbers an entry carries ────────────────────────── */
.ll-entry__figs { display: flex; flex-wrap: wrap; gap: .35rem .9rem; margin-top: .5rem; }
.ll-fig { display: flex; flex-direction: column; }
.ll-fig b { font-family: var(--mono); font-size: .92rem; font-weight: 700; color: var(--ink); font-variant-numeric: tabular-nums; }
.ll-fig span { font-family: var(--mono); font-size: .58rem; letter-spacing: .09em; text-transform: uppercase; color: var(--muted); }

/* ── actions + reactions ──────────────────────────────────────────── */
.ll-entry__acts { display: flex; flex-wrap: wrap; align-items: center; gap: .4rem; margin-top: .7rem; }
.ll-react {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  padding: .3rem .6rem; border-radius: 999px;
  border: 1px solid var(--border); background: transparent; color: var(--muted);
  cursor: pointer; transition: border-color .15s ease, color .15s ease, background .15s ease;
}
.ll-react:hover { color: var(--ink); border-color: var(--gold); }
.ll-react:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }
/* Pressed is carried by fill AND the aria-pressed state, never by colour alone.
   --ink on the fill, not gold text: gold reads 2.84 on light at this size. */
.ll-react[aria-pressed="true"] { color: var(--ink); border-color: color-mix(in srgb, var(--gold) 55%, transparent); background: color-mix(in srgb, var(--gold) 18%, transparent); }
.ll-react__n { font-variant-numeric: tabular-nums; opacity: .85; }
.ll-react svg { flex: none; }

/* Underlined at rest, not gold: gold is 3.22 on light at this size, and an
   uppercase mono label with no underline reads as a heading, not a link. */
.ll-entry__cta {
  display: inline-flex; align-items: center; gap: .35rem;
  font-family: var(--mono); font-size: .68rem; font-weight: 700;
  letter-spacing: .04em; text-transform: uppercase;
  color: var(--ink); text-decoration: underline;
  text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px;
}
.ll-entry__cta:hover { text-decoration-color: var(--ink); }
.ll-entry__cta:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; border-radius: 3px; }

/* ── empty state ──────────────────────────────────────────────────── */
.ll-feed__empty {
  border: 1px dashed var(--border); border-radius: var(--r-md, 12px);
  padding: 1.6rem 1.2rem; text-align: center; color: var(--muted); font-size: .88rem; line-height: 1.6;
}
.ll-feed__empty b { display: block; color: var(--ink); font-size: .95rem; margin-bottom: .25rem; }

@media (max-width: 560px) {
  .ll-entry { padding: .85rem .9rem; gap: .3rem .7rem; }
  .ll-entry__ic { width: 30px; height: 30px; }
}
@media (prefers-reduced-motion: reduce) {
  .ll-entry, .ll-react { transition: none; }
  a.ll-entry:hover, button.ll-entry:hover { transform: none; }
}