/* ============================================================================
   Notifications — the feed of what happened while you were away.

   One panel, hairline-ruled rows, read top to bottom: a reserved dot gutter,
   the actor's face keyed by a drawn icon for the kind of event, the sentence,
   then the time. Not a stack of detached cards — a notification is a line in a
   record, and twenty of them should read as one column, not twenty objects.

   Visiting the page clears the unread badge, so "Novas" is a one-time reading
   rather than a persistent state. It is marked in the gutter and by ink weight,
   never by a thick coloured edge or by fading the read rows out.
   ========================================================================= */

/* ---------------------------------------------------------------------------
   Header bell + count
   ------------------------------------------------------------------------ */

.nt-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 36px;
  height: 36px;
  border-radius: var(--r-md);
  color: var(--ink-300);
  transition: background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease);
}

.nt-bell:hover {
  background: var(--ink-800);
  color: var(--ink-050);
}

/* The count sits on the header's own fill, so the knockout ring that separates
   it from the bell is drawn in that fill rather than in the page ground. */
.nt-bell__count {
  position: absolute;
  top: 1px;
  inset-inline-end: 1px;
  min-width: 17px;
  height: 17px;
  padding-inline: 4px;
  border: 2px solid var(--ink-900);
  border-radius: var(--r-full);
  background: var(--accent);
  color: var(--accent-ink);
  font-size: var(--fs-2xs);
  font-weight: 700;
  line-height: 13px;
  text-align: center;
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Page
   ------------------------------------------------------------------------ */

.nt {
  padding-block: var(--sp-8) var(--sp-16);
}

/* A feed is a single reading column. Capping it here keeps the sentence at a
   sane measure on a 1280px container instead of stranding the time three
   hundred pixels away from the text it stamps. */
.nt__col {
  max-width: 780px;
  margin-inline: auto;
}

.nt__head {
  margin-block-end: var(--sp-6);
}

.nt__title {
  font-size: var(--fs-3xl);
  font-weight: 700;
  line-height: var(--lh-tight);
  letter-spacing: var(--tr-display);
  color: var(--ink-050);
  margin: 0 0 var(--sp-2);
}

.nt__subtitle {
  color: var(--ink-300);
  max-width: 58ch;
  margin: 0;
}

/* ---------------------------------------------------------------------------
   The feed
   ------------------------------------------------------------------------ */

.nt-feed {
  background: var(--ink-850);
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  overflow: hidden;
}

.nt-list {
  list-style: none;
  margin: 0;
  padding: 0;
}

/* Infinite-scroll pagination frames hold the next batch of notifications.
   Once a frame has loaded (Turbo sets [complete]), display: contents lets its
   child .nt-row elements participate in the .nt-list layout. The pending lazy
   frame keeps its default box so Turbo's IntersectionObserver can detect it
   scrolling into view. */
.nt-list turbo-frame[id^="notifications_page_"][complete] {
  display: contents;
}

/* Group heading — the same sunken band the ledger uses for a day heading, so
   the two account-history surfaces share one rhythm. It also carries the word
   that the unread dots below it are coloured for. */
.nt-group {
  display: flex;
  align-items: center;
  gap: var(--sp-2);
  padding: var(--sp-2) var(--sp-5);
  background: var(--ink-900);
  border-block: 1px solid var(--line);
}

.nt-list > .nt-group:first-child {
  border-block-start: 0;
}

.nt-group__name {
  color: var(--ink-300);
}

.nt-group__count {
  font-size: var(--fs-2xs);
  font-weight: 600;
  color: var(--accent);
  direction: ltr;
  unicode-bidi: isolate;
}

/* ---------------------------------------------------------------------------
   Rows
   ------------------------------------------------------------------------ */

/* Every row draws the rule above itself rather than below the row before it:
   a lazily-loaded batch arrives wrapped in its own turbo-frame, so the first
   row of each batch has no previous sibling to inherit a separator from —
   display:contents changes box generation, not what `+` can see. The two
   places a rule would double up are cancelled instead. */
.nt-row {
  border-block-start: 1px solid var(--line);
}

.nt-list > .nt-row:first-child,
.nt-group + .nt-row {
  border-block-start: 0;
}

.nt-row__link {
  display: grid;
  grid-template-columns: 10px 34px minmax(0, 1fr) auto;
  align-items: start;
  column-gap: var(--sp-3);
  padding: var(--sp-4) var(--sp-5);
  text-decoration: none;
  color: inherit;
  transition: background-color var(--dur-1) var(--ease);
}

.nt-row__link:hover {
  background: var(--ink-800);
}

/* The row runs the full width of a panel that clips its overflow, so the
   system ring drawn outside the row would lose its inline edges and read as
   two loose bars. Same ring — same 2px ground gap, same 2px accent — turned
   inward so it closes. */
.nt-row__link:focus-visible {
  outline: none;
  box-shadow: inset 0 0 0 2px var(--ink-950), inset 0 0 0 4px var(--accent);
}

/* Unread gutter. A dot in a reserved column, not a coloured slab down the
   edge: the rows stay aligned, and the signal survives dir="rtl" because the
   column is the grid's first track, not a left border. */
.nt-row__flag {
  display: flex;
  justify-content: center;
  padding-block-start: 12px;
}

.nt-row__dot {
  width: 7px;
  height: 7px;
  border-radius: var(--r-full);
  background: var(--accent);
}

/* Who plus what, in one 34px mark. */
.nt-mark {
  position: relative;
  display: block;
  width: 34px;
  height: 34px;
}

.nt-mark__face {
  --avatar-size: 34px;
}

.nt-mark__type {
  position: absolute;
  inset-block-end: -4px;
  inset-inline-end: -4px;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  border-radius: var(--r-full);
  /* The plate is the page ground — darker than every row fill it can sit on,
     resting or hovered — so it reads as a deliberate key cut into the face
     rather than as a knockout that stops matching when the row lights up. */
  background: var(--ink-950);
  border: 1px solid var(--line-hard);
  color: var(--ink-200);
  transition: color var(--dur-1) var(--ease),
    border-color var(--dur-1) var(--ease);
}

.nt-row__text {
  font-size: var(--fs-base);
  line-height: var(--lh-snug);
  color: var(--ink-200);
  padding-block-start: 3px;
  /* The sentence embeds a display name and a puzzle title, so it is isolated
     from the layout's own direction. */
  unicode-bidi: isolate;
}

/* Secondary ink, not tertiary: these sit on the row's hover fill, where
   --ink-400 drops to 4.31:1. */
.nt-row__time {
  padding-block-start: 4px;
  font-size: var(--fs-xs);
  color: var(--ink-300);
  white-space: nowrap;
  text-align: end;
}

/* Unread is carried by ink and weight, plus the gutter dot. Read rows are not
   faded — an opacity drop takes body copy under 4.5:1 and makes the archive
   unreadable rather than merely quieter. */
.nt-row.is-unread .nt-row__text {
  color: var(--ink-050);
  font-weight: 600;
}

.nt-row.is-unread .nt-row__time {
  color: var(--ink-200);
}

.nt-row.is-unread .nt-mark__type {
  color: var(--accent);
  border-color: var(--accent-dim);
}

.nt-row__link:hover .nt-row__text {
  color: var(--ink-050);
}

/* ---------------------------------------------------------------------------
   Below 768px the time drops under the sentence: a relative stamp
   ("cerca de 2 horas") is too wide to hold its own column next to a two-line
   message on a phone.
   ------------------------------------------------------------------------ */

@media (max-width: 767px) {
  .nt {
    padding-block: var(--sp-6) var(--sp-12);
  }

  .nt__title {
    font-size: var(--fs-2xl);
  }

  .nt-group {
    padding-inline: var(--sp-4);
  }

  .nt-row__link {
    grid-template-columns: 10px 34px minmax(0, 1fr);
    row-gap: var(--sp-1);
    padding: var(--sp-4);
  }

  .nt-row__text {
    grid-column: 3;
  }

  .nt-row__time {
    grid-column: 3;
    padding-block-start: 0;
    text-align: start;
  }
}