/* ============================================================
   BUREAU OF LOST TIMELINES — DESK NOTIFICATIONS SHEET
   Version: 2.0 (Dossier system)

   js/notifications.js bolts a bell into the .header-actions column of the
   archive cover and the personnel file; clicking it drops a tray from the
   header edge. The tray is the Bureau leaving a note for one operative
   about their own paperwork, so it is a paper panel with a red spine
   along its top edge, and a row keeps a red rail only while the note is
   unread — once it is read, the rail is withdrawn.

   The bell and its count plate are also in css/style.css, because pages
   that do not load this sheet still render the bell: the two copies are
   deliberately the same rules, and must be changed together.
   ============================================================ */

/* ---------- the bell ---------- */
.notif-bell {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: var(--ink-1);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--paper-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  padding: 8px 12px;
  min-height: 36px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.notif-bell:hover {
  color: var(--paper-bright);
  border-color: var(--line-strong);
  background: var(--ink-2);
}

.notif-bell:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

/* An unread notice is the Bureau waiting on this operative, so the bell
   takes the red wash and the ring of a stamp that has just come down.
   bellPulse is the css/style.css keyframes — reusing the name is what
   keeps the ring identical on pages that load only that sheet. */
.notif-bell.has-unread {
  border-color: var(--line-red);
  background: var(--alert-wash);
  color: var(--paper-bright);
  animation: bellPulse 2.8s var(--ease) infinite;
}

/* The count is a machine total, but the thing it counts is owed to the
   Bureau, so the plate is the stamp itself: solid red, ink type. */
.notif-count {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-mono);
  background: var(--alert);
  color: var(--ink-0);
  border-radius: var(--r-pill);
  padding: 2px 7px;
}

/* js/notifications.js writes the word NOTICES into the bell instead of a
   pictogram, so the button says what its plate counts. The word must not
   break in half when the header row is tight. */
.notif-bell-label {
  line-height: 1;
  white-space: nowrap;
}

/* ---------- the tray ---------- */
/* .header-actions is not a positioned box, so the tray hangs from
   .site-header: top: 100% drops it clear of the header edge, and the
   inset is the header's own padding so the tray's right edge lands on the
   content edge the bell stands on rather than on the viewport edge. */
.notif-panel {
  display: none;
  position: absolute;
  top: 100%;
  right: var(--page-pad);
  margin-top: var(--s-1);
  width: 320px;
  max-width: 90vw;
  max-height: 450px;
  overflow: hidden;
  background: var(--ink-1);
  background-image: var(--fibre);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-2);
  z-index: 1000;
}

.notif-panel.show {
  display: block;
  animation: fadeIn var(--dur-2) var(--ease-out);
}

/* The spine of the file, across the top edge — the mark that says this
   panel was issued by the desk rather than written by the operative. */
.notif-panel::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: var(--spine);
  background: var(--alert);
}

/* ---------- the tray header ---------- */
.notif-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3);
  background: var(--ink-2);
  border-bottom: 1px dashed var(--line-strong);
  box-shadow: var(--shadow-inset);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

/* MARK ALL READ is a filing action, not a refusal: it stays out of the
   red until you point at it. */
.notif-clear {
  background: transparent;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  color: var(--muted-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 3px 8px;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.notif-clear:hover {
  color: var(--paper-bright);
  border-color: var(--alert);
  background: var(--alert-wash);
}

.notif-clear:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

/* ---------- the rows ---------- */
.notif-list {
  max-height: 380px;
  overflow-y: auto;
  scrollbar-width: thin;
}

/* The left padding is the room the unread rail stands in. It is the same
   whether a note is read or not, so marking one does not shift the row. */
.notif-item {
  position: relative;
  display: flex;
  align-items: flex-start;
  gap: var(--s-2);
  padding: var(--s-2) var(--s-3) var(--s-2) var(--s-4);
  border-bottom: 1px solid var(--line-hair);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease);
}

.notif-item:last-child {
  border-bottom: 0;
}

.notif-item::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  width: var(--spine);
  background: transparent;
  transition: background var(--dur-1) var(--ease);
}

.notif-item:hover {
  background: var(--ink-2);
}

/* The rows are tabbable — js/notifications.js gives them role="button" so a
   keyboard can mark a single notice read — so the ring is the desk lamp under
   the row rather than a box around it. */
.notif-item:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: -2px;
}

.notif-item.unread {
  background: var(--alert-wash);
}

.notif-item.unread:hover {
  background: var(--alert-wash-2);
}

.notif-item.unread::before {
  background: var(--alert);
}

/* The box is a stamp plate: js/notifications.js writes the event's three-letter
   file code into it (PROM, SEAL, RJCT, APPR, NOTIF), so the plate is sized for
   the longest code and every row keeps the same measure. */
.notif-icon {
  flex: none;
  width: 46px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--ink-2);
  border: 1px solid var(--line-hair);
  border-radius: var(--r-1);
  padding: 3px 4px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.3;
  text-align: center;
  color: var(--muted);
}

.notif-item.unread .notif-icon {
  border-color: var(--line-red);
  color: var(--paper-bright);
}

.notif-body {
  flex: 1;
  min-width: 0;
}

.notif-title {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: var(--fs-label);
  line-height: var(--lh-snug);
  color: var(--paper-dim);
  margin-bottom: 3px;
  overflow-wrap: anywhere;
}

.notif-item.unread .notif-title {
  color: var(--paper-bright);
}

.notif-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--muted-strong);
  margin-bottom: var(--s-0);
  overflow-wrap: anywhere;
}

/* A notice can be filed in English only; an empty Burmese line must not
   hold a row's worth of air. */
.notif-my:empty {
  display: none;
}

.notif-time {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
}

/* ---------- an empty tray ---------- */
.notif-empty {
  padding: var(--s-6) var(--s-4);
  text-align: center;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.7;
  color: var(--muted);
}

/* The Burmese line is a span dropped in after the English one by
   js/notifications.js; css/style.css gives it the Myanmar face, and the
   rest of the treatment — size, tracking, colour — is decided here. */
.notif-empty span {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  letter-spacing: 0;
  text-transform: none;
  line-height: 1.7;
  color: var(--muted-strong);
}

/* ---------- narrow screens: the tray goes full width ---------- */
@media (max-width: 500px) {
  .notif-panel {
    left: var(--s-2);
    right: var(--s-2);
    width: auto;
    max-width: none;
  }

  .notif-header {
    flex-wrap: wrap;
  }
}

/* ---------- a calmer desk ---------- */
@media (prefers-reduced-motion: reduce) {
  /* The ring is the only thing moving here. Dropping it still leaves the
     red border and wash, so an unread bell is unmistakable without motion. */
  .notif-bell.has-unread {
    animation: none;
  }

  .notif-panel.show {
    animation: none;
  }

  .notif-bell,
  .notif-clear,
  .notif-item,
  .notif-item::before {
    transition: none;
  }
}