/* ============================================================
   BUREAU OF LOST TIMELINES — ARCHIVE AMENDMENT  (css/amend.css)
   Consumes js/amend.js and the tokens in css/tokens.css.

   One control: a small stamped AMEND tab in the corner of a record card, drawn
   only for an EDITOR, CHAIRMAN or OWNER who is signed in. It sits in the corner
   the card already keeps empty and borrows the phosphor of a machine that is
   letting you do something — never the alert red, which here belongs to the
   Bureau refusing you.
   ============================================================ */

.amend-btn {
  position: absolute;
  z-index: 3;
  padding: 3px 8px;
  background: rgba(11, 12, 14, 0.72);
  border: 1px dashed var(--phosphor-dim);
  border-radius: var(--r-1);
  color: var(--phosphor-dim);
  font-family: var(--font-mono);
  font-size: var(--fs-micro);
  font-weight: 600;
  letter-spacing: var(--tr-label);
  text-transform: uppercase;
  line-height: 1.4;
  cursor: pointer;
  transition: color var(--dur-1) var(--ease),
              border-color var(--dur-1) var(--ease),
              background var(--dur-1) var(--ease);
}

.amend-btn:hover,
.amend-btn:focus-visible {
  color: var(--phosphor-bright);
  border-color: var(--phosphor);
  border-style: solid;
  background: var(--phosphor-wash);
}

.amend-btn:focus-visible {
  outline: 2px solid var(--phosphor);
  outline-offset: 2px;
}

/* Where each card keeps its corner free:
   a file row puts its classification chip top-right, so the tab goes under it;
   a storyline card has nothing in the corner; a photograph puts its chip
   top-left, so this one takes the right. */
.file-card > .amend-btn      { top: calc(var(--s-3) + 28px); right: var(--s-3); }
.storyline-card > .amend-btn { top: var(--s-3); right: var(--s-3); }
.news-item > .amend-btn      { top: var(--s-3); right: var(--s-3); }
.photo > .amend-btn          { top: 8px; right: 8px; }

/* A record that has been amended before answers with a solid edge instead of a
   dashed one — the paperwork has already been through this desk. */
[data-amend-kind].is-amended > .amend-btn {
  border-style: solid;
  border-color: var(--line-strong);
}

@media (max-width: 480px) {
  .file-card > .amend-btn { top: var(--s-2); right: var(--s-2); }
  .news-item > .amend-btn { top: var(--s-2); right: var(--s-2); }
}

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