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

   review.html and manage-roles.html are where the Bureau decides. A
   submission on this desk is a piece of paper face-up: the type stamp
   and title on the left, the status on the right, the approval count as
   an instrument readout. Approving is the red action; rejecting is a
   red outline that fills on hover, so the two never look alike.
   ============================================================ */

.review-main {
  max-width: var(--maxw-narrow);
  margin: 0 auto;
  padding: var(--s-5) var(--gutter) var(--s-7);
}

/* ---------- the status rail ---------- */
.review-tabs {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  margin-bottom: var(--s-4);
  padding-bottom: var(--s-2);
  border-bottom: 1px solid var(--line);
}

.rt-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--muted-strong);
  padding: 8px var(--s-4);
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.rt-btn:hover {
  color: var(--paper-bright);
  border-color: var(--alert);
}

.rt-btn.active {
  background: var(--alert);
  border-color: var(--alert);
  color: var(--ink-0);
}

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

/* the count is a number, not part of the label */
.rt-btn span {
  color: var(--folklore);
  font-weight: 500;
}

.rt-btn.active span {
  color: var(--ink-0);
}

/* ---------- the paper on the desk ---------- */
.review-list {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.review-card {
  position: relative;
  background: var(--ink-1);
  background-image: var(--fibre);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-2);
  box-shadow: var(--shadow-1);
  padding: var(--s-4);
}

/* A pending item is marked by the same rail a record row uses: amber
   while the council argues, phosphor once it is in the archive, red
   when it was thrown out. */
.review-card::before {
  content: "";
  position: absolute;
  top: -1px;
  bottom: -1px;
  left: 0;
  width: var(--spine);
  border-radius: var(--r-2) 0 0 var(--r-2);
  background: var(--folklore);
}

.review-card.is-approved::before,
.review-card:has(.rc-status.approved)::before {
  background: var(--phosphor-dim);
}

.review-card.is-rejected::before,
.review-card:has(.rc-status.rejected)::before {
  background: var(--alert);
}

.rc-header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: var(--s-2);
  flex-wrap: wrap;
  margin-bottom: var(--s-2);
}

/* The type stamp: what kind of paper this is. */
.rc-type {
  display: inline-block;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  background: var(--ink-3);
  color: var(--paper-dim);
  padding: 2px 7px;
  border-radius: var(--r-1);
  margin-right: var(--s-1);
}

.rc-title {
  font-family: var(--font-display);
  font-weight: 700;
  font-size: var(--fs-h4);
  line-height: var(--lh-snug);
  letter-spacing: 0.03em;
  text-transform: uppercase;
  color: var(--paper-bright);
  overflow-wrap: anywhere;
}

.rc-status {
  flex: none;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  padding: 3px 9px;
  border-radius: var(--r-1);
  border: 1px solid transparent;
}

.rc-status.pending {
  border-color: var(--folklore-line);
  color: var(--folklore);
}

.rc-status.approved {
  background: var(--phosphor-dim);
  color: var(--ink-0);
}

.rc-status.rejected {
  background: var(--alert);
  color: var(--ink-0);
}

.rc-my {
  font-family: var(--font-my);
  font-size: var(--fs-body);
  line-height: 1.7;
  color: var(--paper);
  margin-bottom: var(--s-1);
}

.rc-meta {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-bottom: var(--s-2);
}

.rc-meta strong {
  font-weight: 500;
  color: var(--paper-dim);
}

.rc-excerpt {
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--muted-strong);
  border-left: 1px solid var(--line-strong);
  padding-left: var(--s-3);
  margin-bottom: var(--s-3);
  overflow-wrap: anywhere;
}

/* Evidence photographs are printed as records: desaturated, not sepia —
   a Bureau photo is duller than the original on purpose. */
.rc-image {
  display: block;
  max-width: 220px;
  max-height: 130px;
  object-fit: cover;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  filter: saturate(0.55) contrast(1.05);
  margin-bottom: var(--s-3);
}

/* ---------- the approval readout ---------- */
.rc-progress {
  background: var(--ink-2);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  padding: var(--s-2) var(--s-3);
  margin-bottom: var(--s-3);
  box-shadow: var(--shadow-inset);
}

.rc-progress-label {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--paper-dim);
  margin-bottom: 6px;
}

.rc-progress-bar {
  height: 5px;
  background: var(--ink-0);
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  overflow: hidden;
}

.rc-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--phosphor-dim), var(--phosphor));
  transition: width var(--dur-3) var(--ease-out);
}

.rc-approvers {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  margin-top: 6px;
}

/* ---------- the decision ---------- */
.rc-actions {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  padding-top: var(--s-3);
  border-top: 1px solid var(--line);
}

.rc-btn {
  background: transparent;
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--paper-dim);
  padding: 8px var(--s-3);
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease);
}

.rc-btn:hover:not(:disabled) {
  border-color: var(--paper-dim);
  color: var(--paper-bright);
}

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

.rc-btn:disabled {
  opacity: 0.45;
  cursor: not-allowed;
}

/* Approving is the action the desk exists for: solid red, filled. */
.rc-btn.approve {
  background: var(--alert);
  border-color: var(--alert);
  color: var(--ink-0);
}

.rc-btn.approve:hover:not(:disabled) {
  background: var(--alert-bright);
  border-color: var(--alert-bright);
  color: var(--ink-0);
}

/* Rejecting is the same colour stated as a possibility, not a fact. */
.rc-btn.reject {
  border-color: var(--alert);
  color: var(--alert-bright);
}

.rc-btn.reject:hover:not(:disabled) {
  background: var(--alert);
  color: var(--ink-0);
}

.rc-btn.view {
  border-color: var(--line-strong);
  color: var(--muted-strong);
}

.rc-btn.view:hover:not(:disabled) {
  border-color: var(--folklore-line);
  color: var(--folklore);
}

.rc-reviewed {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--s-2);
  border-top: 1px solid var(--line);
}

/* When a rank has nothing it can do to another rank, say it flatly in the
   margin instead of styling it green — green here would read as a grant. */
.rc-none {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--muted);
  padding-top: var(--s-2);
}

/* (.empty-note lives in css/style.css.) */

/* ---------- the rank notice board (manage-roles.html) ---------- */
.role-info {
  background: var(--folklore-wash);
  border: 1px solid var(--folklore-line);
  border-left: var(--spine) solid var(--folklore);
  border-radius: var(--r-1);
  padding: var(--s-3) var(--s-4);
  margin-bottom: var(--s-4);
}

.role-info h3 {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--folklore);
  margin-bottom: var(--s-1);
}

.role-info p {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--paper-dim);
}

/* ---------- the posting column and the transfer order (manage-roles.html) ----------
   An operative's division and territory are read here before the Chairman moves
   them, so the stamp is the plain mono line the rest of the register uses; the
   transfer control sits under it, visibly a different act from appointing a rank. */
.rc-posting {
  padding-top: var(--s-2);
}

.rc-posting:empty {
  display: none;
}

.rc-posting-line {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--cat-timeline);
  line-height: 1.6;
}

.rc-posting-line.none {
  color: var(--folklore);
}

.transfer-row {
  display: flex;
  gap: var(--s-1);
  flex-wrap: wrap;
  align-items: center;
  margin-top: var(--s-2);
}

.transfer-row:empty {
  display: none;
}

.transfer-row select {
  flex: 1 1 180px;
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--paper);
  padding: 8px var(--s-2);
  min-height: 36px;
  font-family: var(--font-my);
  font-size: var(--fs-label);
}

.transfer-row select:focus {
  outline: none;
  border-color: var(--alert);
  box-shadow: 0 0 0 3px var(--alert-wash);
}

/* A Council order, not an approval: outlined like the other decisions, in the
   colour an assignment is marked with everywhere else in the Bureau. */
.rc-transfer {
  background: transparent;
  border: 1px solid var(--cat-timeline);
  border-radius: var(--r-1);
  color: var(--cat-timeline);
  padding: 8px var(--s-3);
  min-height: 36px;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  cursor: pointer;
  transition: background var(--dur-1) var(--ease),
              color var(--dur-1) var(--ease);
}

.rc-transfer:hover {
  background: var(--cat-timeline);
  color: var(--ink-0);
}

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

/* ---------- the nomination register (manage-roles.html) ----------
   The rail below is js/nomination.js chainHTML(): one row per seat of the road this sheet
   actually walks, numbered at the seat's own number, with the office it cites under its
   sentence and the hand that signed it on the right. The page adds nothing to it, so the
   only shapes here are a done line, the line the paper is waiting on, and a refusal.
   The section headings follow .unk-ladder h3: a mono label with the Burmese sitting on the
   same baseline, so the register reads as the same Bureau furniture as the ladder above it. */
.nm-rule {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: 0 0 var(--s-4);
  padding: var(--s-2) var(--s-4);
  border-left: var(--spine) solid var(--folklore);
  background: var(--folklore-wash);
  border-radius: var(--r-1);
}

.nm-rule-en {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--paper-dim);
}

.nm-rule-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--folklore);
}

.nm-raise,
.nm-board {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--cat-timeline);
  border-radius: var(--r-2);
  background: var(--ink-1);
}

.nm-raise h3,
.nm-board h3,
.nm-staff-head {
  display: flex;
  align-items: baseline;
  gap: var(--s-2);
  margin: 0 0 var(--s-3);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  font-weight: 500;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--cat-timeline);
}

.nm-staff-head {
  color: var(--muted-strong);
  margin-top: var(--s-5);
}

.nm-raise h3 .my,
.nm-board h3 .my,
.nm-staff-head .my {
  font-family: var(--font-my);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-strong);
}

/* ---- the form ----
   Every option in it is data out of js/auth.js, js/posting.js and js/nomination.js, so a
   new rank or a new post gains its row here without a stylesheet or a string being touched. */
.nm-form {
  display: flex;
  flex-direction: column;
  gap: var(--s-3);
}

.nm-field {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
}

.nm-field-pair {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: var(--s-3);
}

.nm-cap {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted-strong);
}

.nm-cap-my {
  font-family: var(--font-my);
  font-size: var(--fs-micro);
  color: var(--muted);
  margin-left: var(--s-1);
}

.nm-field select,
.nm-field textarea {
  background: var(--ink-2);
  border: 1px solid var(--line-strong);
  border-radius: var(--r-1);
  color: var(--paper);
  padding: 9px var(--s-2);
  min-height: 38px;
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.6;
}

.nm-field textarea { resize: vertical; }

.nm-field select:focus,
.nm-field textarea:focus {
  outline: none;
  border-color: var(--cat-timeline);
  box-shadow: 0 0 0 3px var(--timeline-wash-2);
}

.nm-submit { margin-top: var(--s-1); }

/* The gate, live: the register's own sentence about what this hand may do, shown before the
   button is pressable rather than after it has refused. */
.nm-note {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  line-height: 1.7;
  color: var(--muted-strong);
  border-top: 1px dashed var(--line);
  padding-top: var(--s-2);
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
}

.nm-note.bad { color: var(--alert-bright); }

.nm-note-opens { color: var(--cat-timeline); }

.nm-note-xp.short { color: var(--folklore); }
.nm-note-xp.meets { color: var(--phosphor-dim); }

/* ---- one sheet in the register ---- */
.nm-card .rc-type { color: var(--cat-timeline); }

.nm-card .rc-status.signed { color: var(--phosphor); border-color: var(--phosphor-dim); }
.nm-card .rc-status.open { color: var(--folklore); border-color: var(--folklore-line); }
.nm-card .rc-status.declined,
.nm-card .rc-status.withdrawn { color: var(--muted); }

.rc-open {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--folklore);
  margin-top: var(--s-1);
}

.nm-reason {
  font-family: var(--font-body);
  font-size: var(--fs-label);
  line-height: var(--lh-body);
  color: var(--paper-dim);
  background: var(--ink-2);
  border-left: 2px solid var(--line-strong);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  padding: var(--s-2);
  margin: var(--s-2) 0;
  white-space: pre-wrap;
}

/* ---- the rail ---- */
.nm-chain {
  display: flex;
  flex-direction: column;
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  overflow: hidden;
  margin: var(--s-2) 0;
}

.nm-seat {
  display: grid;
  grid-template-columns: 1.6rem minmax(0, 1fr) minmax(0, auto);
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: var(--s-2);
  border-bottom: 1px solid var(--line-hair);
  background: var(--ink-1);
}

.nm-seat:last-child { border-bottom: none; }

.ns-n {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: var(--tr-mono);
}

.ns-seat {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--paper-bright);
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.ns-seat-my,
.ns-office-my {
  font-family: var(--font-my);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-strong);
  font-size: var(--fs-micro);
}

.ns-office {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  color: var(--cat-places);
  display: flex;
  flex-direction: column;
}

.ns-sign {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--paper-dim);
  text-align: right;
}

.ns-sign-meta {
  display: block;
  font-size: var(--fs-micro);
  color: var(--muted);
  letter-spacing: 0;
}

.ns-await { color: var(--folklore); }
.ns-dash { color: var(--muted); }

/* the seat that has signed, the seat the paper is waiting on, the seat ahead of it */
.nm-seat.nm-done { background: rgba(51, 255, 102, 0.05); }
.nm-seat.nm-done .ns-sign { color: var(--phosphor); }

.nm-seat.nm-here {
  background: var(--folklore-wash);
  box-shadow: inset 2px 0 0 var(--folklore);
}

.nm-seat.nm-here .ns-seat { color: var(--folklore); }

.nm-seat.nm-ahead { opacity: 0.62; }

.nm-seat.nm-refused {
  background: var(--alert-wash);
  box-shadow: inset 2px 0 0 var(--alert);
}

.nm-seat.nm-refused .ns-sign { color: var(--alert-bright); }

/* why this sheet is not walking the whole chain — printed by the module, never by the page */
.nm-direct {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  padding: var(--s-2);
  background: var(--ink-2);
  border-top: 1px dashed var(--line-strong);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--folklore);
}

.nm-direct-my {
  font-family: var(--font-my);
  letter-spacing: 0;
  text-transform: none;
  color: var(--muted-strong);
}

/* what a settled sheet did, in the words of the module that did it */
.nm-outcome {
  display: flex;
  flex-wrap: wrap;
  gap: var(--s-1) var(--s-3);
  margin: var(--s-2) 0;
  padding: var(--s-2);
  border-left: 2px solid var(--phosphor-dim);
  background: var(--phosphor-wash);
  border-radius: 0 var(--r-1) var(--r-1) 0;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  text-transform: uppercase;
  color: var(--phosphor-bright);
}

.nm-outcome.refused {
  border-left-color: var(--alert);
  background: var(--alert-wash);
  color: var(--alert-bright);
}

.nm-outcome-my {
  font-family: var(--font-my);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
}

/* a bell that links to manage-roles.html#<sheet> lands on its own paper */
.nm-focus {
  animation: nm-land 1.6s var(--ease) 1;
}

@keyframes nm-land {
  0%, 60% { box-shadow: 0 0 0 2px var(--cat-timeline); }
  100% { box-shadow: 0 0 0 2px transparent; }
}

/* ---------- narrow screens ---------- */
@media (max-width: 620px) {
  .review-card {
    padding: var(--s-3);
  }

  .rc-header {
    gap: var(--s-1);
  }

  .rc-image {
    max-width: 100%;
  }

  .rc-btn {
    flex: 1 1 auto;
    text-align: center;
  }

  /* the rail cannot hold three columns on a phone: the office and the signature fall under
     the seat's own sentence, which is the order a reader needs them in anyway */
  .nm-seat {
    grid-template-columns: 1.4rem minmax(0, 1fr);
  }

  .ns-sign {
    grid-column: 2;
    text-align: left;
  }
}

@media (prefers-reduced-motion: reduce) {
  .rc-btn,
  .rt-btn,
  .rc-progress-fill {
    transition: none;
  }

  .nm-focus { animation: none; }
}