/* ============================================================
   BUREAU OF LOST TIMELINES — THE FOURTEENTH RANK
   css/unknown.css   (js/unknown.js)

   The visual fact this sheet has to carry: he is not a piece of the Bureau's
   interface. Every other control here is paper, ink and a rail — the Bureau's own
   stationery. He arrives as an outside mark on that paper: stamp red, square,
   doubled rule, and turned off true by a fraction of a degree, the way a seal a
   person has pressed by hand never lands perfectly straight.

   Two rules keep him from becoming a theme:
     · He never fills a surface. The Bureau's chrome puts solid --alert behind a word
       to say "this is ours". His marks are outlines and ink-colour only, so a sheet
       he has touched still reads as the Bureau's sheet with something on it.
     · He is small. He is not a section, a card or a banner; the biggest thing he
       owns is a case number, and even that is set in the same mono size the box uses
       for its own codes.

   LOAD ORDER: after css/tokens.css and the surface sheet it is drawing on
   (css/mail.css, css/dashboard.css, css/dispatch.css …).
   ============================================================ */

/* ---------- THE STAMP ---------- */
/* The one object every sheet prints for him. js/unknown.js stampHTML() builds it, so
   a room, a box and a rank sheet cannot describe him three different ways. */
.unk-stamp {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 4px 8px;
  padding: 2px 8px;
  border: 1px solid var(--line-red);
  outline: 1px solid var(--alert-deep);
  outline-offset: 2px;
  background: var(--alert-wash);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert-bright);
  transform: rotate(-0.6deg);
}

.unk-stamp-my {
  font-family: var(--font-my);
  font-size: var(--fs-micro);
  letter-spacing: 0;
  text-transform: none;
  color: var(--paper-dim);
}

.unk-stamp-code {
  color: var(--muted-strong);
}

/* ---------- THE TWO-LINE NOTE ---------- */
/* What a sheet says when it is only recording that he is there. */
.unk-note {
  display: flex;
  flex-direction: column;
  gap: 2px;
  margin: var(--s-2) 0;
  padding-left: var(--s-3);
  border-left: 1px dashed var(--line-red);
}

.unk-note-en {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  color: var(--paper-dim);
}

.unk-note-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--muted-strong);
}

/* ---------- THE RULE ON A CASE FILE ---------- */
/* Printed on the envelope itself, because the person it names has to be able to read
   how it closes without asking anybody. */
.unk-rule {
  display: flex;
  flex-direction: column;
  gap: 3px;
  margin: var(--s-2) 0;
  padding: var(--s-2) var(--s-3);
  border: 1px dashed var(--line-red);
  background: var(--alert-wash);
}

.unk-rule-en {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  line-height: var(--lh-snug);
  color: var(--paper);
}

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

/* ---------- A CASE FILE IN THE BOX ---------- */
/* js/mailbox.js gives the kind its own colour; the envelope takes the rail and the
   head takes the number, so a case is recognised before it is opened. */
.envelope[data-kind="complaint"]::before {
  background: var(--alert);
}

.kind-complaint {
  color: var(--alert-bright);
  border-color: var(--alert);
  border-style: double;
  border-width: 3px;
}

.unk-env-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--alert-bright);
  padding: 3px 8px;
  border: 1px solid var(--line-red);
  border-radius: var(--r-1);
  white-space: nowrap;
}

.envelope.unk-case {
  background-image: var(--fibre);
}

/* The accused reads their own name on the sheet: the mark goes on the subject line,
   not on a badge, because a case is about the sentence under it. */
.unk-against-you .env-subject {
  color: var(--paper-bright);
}

.unk-names {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted-strong);
  margin-top: 2px;
}

/* The Burmese the Unknown wrote, under the English it translates. js/mailbox.js keeps
   the two on the envelope so a shared box can be read in either language. */
.env-my {
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.6;
  color: var(--paper-dim);
  margin-top: 2px;
}

.env-body-my {
  font-family: var(--font-my);
  line-height: 1.8;
  color: var(--paper-dim);
  border-top: 1px dashed var(--line);
  margin-top: var(--s-2);
  padding-top: var(--s-2);
}

/* ---------- THE DASHBOARD SHEET ---------- */
.unk-sheet .unk-file,
.unk-sheet .unk-order,
.unk-sheet .unk-sealed,
.unk-sheet .unk-keeps {
  margin-bottom: var(--s-3);
}

/* The case number is the one thing of his that is allowed to be big, and it is still
   set in the mono the boxes use for their own codes — a file number, not a headline. */
.unk-file {
  position: relative;
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line-red);
  border-left: var(--spine) solid var(--alert);
  background: var(--ink-1);
  background-image: var(--fibre);
}

.unk-file-ref {
  font-family: var(--font-mono);
  font-size: var(--fs-h4);
  letter-spacing: var(--tr-label);
  color: var(--alert-bright);
  margin-bottom: var(--s-1);
}

.unk-file-subject {
  font-size: var(--fs-body);
  line-height: var(--lh-snug);
  color: var(--paper-bright);
  margin-bottom: var(--s-1);
}

.unk-line {
  display: block;
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  line-height: var(--lh-snug);
  color: var(--paper-dim);
}

.unk-my {
  display: block;
  font-family: var(--font-my);
  font-size: var(--fs-label);
  line-height: 1.7;
  color: var(--muted-strong);
  margin-top: 2px;
}

.unk-stat {
  color: var(--muted-strong);
  margin-top: var(--s-1);
}

.unk-file-go {
  display: inline-block;
  margin-top: var(--s-2);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert-bright);
  text-decoration: none;
  border-bottom: 1px solid var(--line-red);
}
.unk-file-go:hover,
.unk-file-go:focus-visible {
  color: var(--paper-bright);
}

/* The order sheet: the Owner's, not the Bureau's chrome. Dashed because it is a hand
   on something the rest of the terminal cannot reach. */
.unk-order {
  padding: var(--s-3);
  border: 1px dashed var(--line-strong);
  background: var(--ink-2);
}

.unk-sealed {
  padding: var(--s-3);
  border: 1px solid var(--alert-deep);
  border-left: var(--spine) solid var(--alert-deep);
  background: var(--alert-wash);
}

/* ---------- HIS TWO CONTROLS ---------- */
/* The Bureau's own buttons are solid red; his are outlined, because the sheet offering
   them is only the place where a signature can be put, not the authority behind it. */
.unk-btn {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  margin-top: var(--s-2);
  padding: 7px 14px;
  background: transparent;
  border: 1px solid var(--alert);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert-bright);
  cursor: pointer;
  transition: background var(--dur-1) var(--ease), color var(--dur-1) var(--ease);
}
.unk-btn:hover {
  background: var(--alert);
  color: var(--ink-0);
}
.unk-btn:hover .unk-btn-my {
  color: var(--ink-1);
}
.unk-btn:focus-visible {
  outline: 2px solid var(--alert-bright);
  outline-offset: 2px;
}

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

/* ---------- ON THE WIRE ---------- */
/* js/dispatch.js gives every kind its own chip. His is the only one drawn as an
   outside mark: double rule, no fill, and the ink colour of the stamp. */
.dispatch-chip--unknown {
  border-style: double;
  border-width: 3px;
  border-color: var(--alert);
  color: var(--alert-bright);
  transform: rotate(-0.6deg);
}

.dispatch-row--unknown .dispatch-who {
  color: var(--alert-bright);
}

/* ---------- EVERYWHERE ELSE HE IS PRINTED ---------- */
/* A presence mark on a rank row (manage-roles.html), a room head (rooms.html), a
   division block (org.html). Same object, sized to the row it sits in. */
.unk-at {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert-bright);
  border: 1px solid var(--line-red);
  border-radius: var(--r-1);
  padding: 1px 6px;
  white-space: nowrap;
}

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

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

/* The rail form. A room card is a grid row of micro labels, so his mark on one is
   the same size as the line count beside it — present, but not louder than the room.
   Used by js/rooms-page.js on every card and by nothing else. */
.unk-chip {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 5px;
  justify-self: start;
  padding: 1px 6px;
  border: 1px solid var(--line-red);
  border-radius: var(--r-1);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--alert-bright);
  white-space: nowrap;
}

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

.unk-chip-code {
  color: var(--muted);
}

/* A sealed room keeps its own amber seal and loses his mark; js/rooms-page.js does not
   draw the chip at all then, so this only protects a stale card. */
.room-card.closed .unk-chip {
  opacity: 0.55;
}

/* ---------- THE CONSOLE (admin.html) ---------- */
/* The device console reports a state; it has no hand on him, so it gets ink and a rule
   and no control. The red appears only on the order itself. */
.unk-console {
  display: flex;
  flex-direction: column;
  gap: var(--s-1);
  margin: var(--s-1) 0 var(--s-4);
  padding: var(--s-3);
  border: 1px solid var(--line);
  border-radius: var(--r-1);
  background: var(--ink-2);
}

.unk-console-state {
  font-family: var(--font-mono);
  font-size: var(--fs-label);
  letter-spacing: var(--tr-mono);
  line-height: var(--lh-snug);
  color: var(--paper);
}

.unk-console-state.sealed {
  color: var(--alert-bright);
  border-left: var(--spine) solid var(--alert-deep);
  padding-left: var(--s-2);
}

.unk-console-state .my {
  display: block;
  margin-top: 2px;
}

.unk-console-count,
.unk-console-where {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--muted-strong);
}

.unk-console-where {
  text-transform: none;
  letter-spacing: var(--tr-mono);
}

/* ---------- THE LADDER (manage-roles.html) ---------- */
/* The Council sheet appoints ranks, so it is the sheet that has to show all eleven and
   where he stands on them. It is drawn as a plain list of rows, not as a card column:
   the ladder is already on this page in the operatives' rc-type labels, and a second
   decoration of the same fact would be a sheet admiring itself. */
.unk-ladder {
  margin: 0 0 var(--s-5);
  padding: var(--s-3) var(--s-4);
  border: 1px solid var(--line);
  border-left: var(--spine) solid var(--alert-deep);
  border-radius: var(--r-2);
  background: var(--ink-2);
}

.unk-ladder h3 {
  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);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper-dim);
}

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

.unk-ladder-rows {
  display: flex;
  flex-direction: column;
}

.unk-rung {
  display: grid;
  grid-template-columns: 1.5rem minmax(0, 1fr) auto;
  align-items: baseline;
  gap: var(--s-2) var(--s-3);
  padding: 5px 0;
  border-bottom: 1px solid var(--line-hair);
  font-size: var(--fs-label);
}

.unk-rung:last-of-type { border-bottom: none; }

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

.ur-rank {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 6px;
  font-family: var(--font-mono);
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  color: var(--paper);
}

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

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

/* The rung the record stops carrying is the fact the rank register is built on: at or
   below it an operative climbs on an XP total, above it nothing moves without a signed
   sheet. The ladder marks the seam so a reader sees where the paper starts. */
.unk-rung.at-ceiling {
  border-top: 1px solid var(--folklore-line);
  border-bottom: 1px solid var(--folklore-line);
  background: var(--folklore-wash);
  padding-left: var(--s-1);
}

.unk-rung.at-ceiling .ur-xp { color: var(--folklore); }

/* The rung above the expulsion order prints no mark, and the gap is the point: a reader
   counting rungs finds ten marks and one blank, and the blank is the Owner. */
.ur-above {
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  letter-spacing: var(--tr-label);
  color: var(--muted);
  border: 1px dashed var(--line);
  border-radius: var(--r-1);
  padding: 1px 6px;
  white-space: nowrap;
}

/* ---------- IN THE CHART (org.html) ---------- */
/* His row inside a division: the desk-id column already carries the code, so the row
   borrows the roster's own rhythm instead of a box of its own. */
.unk-row .unk-at {
  margin-left: 2px;
}

.unk-at-name {
  color: var(--alert-bright);
}

/* ---------- IN A ROOM (rooms.html) ---------- */
/* A notice line did not come from a mouth: js/rooms.js postNotice() writes it when a
   thing happens to the division, and it keeps the room's own shape — name, stamp, time,
   text — while losing the rule a speaker gets. Dashed, inset, and no fill on the name,
   because the room is reporting rather than answering. */
.room-line.notice {
  border-left-style: dashed;
  border-left-color: var(--line-strong);
  background: var(--ink-2);
}

/* His line among those: the red of the stamp and of the wire chip, drawn as the doubled
   rule of a mark put on from outside. The words are js/unknown.js's; this is only the ink. */
.room-line.unk {
  border-left: var(--spine) double var(--alert);
}

.room-line.unk .rl-name,
.room-line.unk .rl-dept {
  color: var(--alert-bright);
}

/* ---------- NARROW ---------- */
@media (max-width: 560px) {
  .unk-stamp { transform: none; }
  .dispatch-chip--unknown { transform: none; }
  .unk-file { padding: var(--s-2) var(--s-3); }
  /* the mark moves under the rank instead of squeezing the name */
  .unk-rung { grid-template-columns: 1.5rem minmax(0, 1fr); }
  .unk-rung .unk-at,
  .unk-rung .ur-above { grid-column: 2; }
  .ur-xp { grid-column: 2; }
}

@media (prefers-reduced-motion: reduce) {
  .unk-btn { transition: none; }
}