/* documents screens. Owned by one workstream; shared rules live in css/components.css and css/screens.css. */

/* ============================================================================
   THE LETTER FRAME

   One sheet, the width of a page, on the page's own ground. Everything inside
   .letter is the organisation's wording rendered from the database, so the
   rules here are the paper and its margins, not the prose. Tokens only.
   ========================================================================= */

/* ONE COLUMN, ONE WIDTH. The letter frame is capped at the width of a page and
   everything above and below it lines up with that edge. A facts card running
   the full width of a 1440 viewport over an 820px letter reads as two designs
   on one page, and the eye follows the wider one. */
.doc-page { display: flex; flex-direction: column; gap: var(--s-7); }
.doc-page > .doc-actions,
.doc-page > .doc-facts-card,
.doc-page > .note,
.doc-page > .doc-chain-slot,
.doc-page > .doc-chain-slot > .card { max-width: 820px; width: 100%; }
.doc-facts {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(100%, 180px), 1fr));
  gap: var(--s-5) var(--s-7);
}
.doc-fact { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
/* The back link is the .small anchor every detail screen in Arc uses, and at
   15px tall it is a 15px tap target. The look is unchanged; only the hit area
   grows, so it stays the same link as the one on a ticket. */
.doc-page .page-head a.small { display: inline-flex; align-items: center; min-height: 32px; }
.doc-fact-value { font-weight: var(--t-semibold); overflow-wrap: anywhere; }
.doc-actions { display: flex; flex-wrap: wrap; gap: var(--s-3); align-items: center; }
.doc-actions svg { width: 15px; height: 15px; }

.letter-frame {
  background: var(--c-surface);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  box-shadow: var(--e-2, 0 1px 2px rgba(0, 0, 0, 0.06));
  max-width: 820px;
  padding: clamp(var(--s-7), 5vw, var(--s-10)) clamp(var(--s-6), 7vw, var(--s-11));
  margin: 0;
  overflow-wrap: anywhere;
}
.letter-frame[data-status="revoked"], .letter-frame[data-status="superseded"] { opacity: 0.72; }

.letter { font-size: var(--t-md); line-height: var(--t-body); color: var(--c-text); }
.letter-head {
  display: flex; justify-content: space-between; align-items: baseline; gap: var(--s-5);
  flex-wrap: wrap;
  padding-bottom: var(--s-5);
  margin-bottom: var(--s-7);
  border-bottom: var(--bw) solid var(--c-border);
}
.letter-head p { margin: 0; }
.letter-org { font-family: var(--t-display); font-weight: var(--t-bold); font-size: var(--t-lg); letter-spacing: var(--t-track-tight); }
.letter-date { color: var(--c-text-2); font-size: var(--t-sm); }
.letter-title {
  font-family: var(--t-display);
  font-size: var(--t-2xl);
  font-weight: var(--t-bold);
  line-height: var(--t-tight);
  letter-spacing: var(--t-track-tight);
  margin: 0 0 var(--s-6);
}
.letter p { margin: 0 0 var(--s-5); }
.letter-foot { margin-top: var(--s-9); padding-top: var(--s-6); border-top: var(--bw) solid var(--c-border); }
.letter-sign { margin: 0 0 var(--s-6); line-height: var(--t-body); }
.letter-sign span { color: var(--c-text-2); }
.letter-verify { font-size: var(--t-sm); color: var(--c-text-2); margin: 0; }
.letter-verify code { font-family: var(--t-mono); font-size: var(--t-sm); letter-spacing: 0.04em; color: var(--c-text); }

/* The stamp across a letter that no longer stands. Words, not a diagonal
   watermark, because a watermark disappears in a black and white print. */
.letter-stamp {
  display: inline-flex; align-items: center; gap: var(--s-3);
  /* .letter-frame sets overflow-wrap: anywhere so a long verification code or
     an address in the wording cannot push the paper wide. The stamp inherited
     it and broke "REVOKED" across three lines inside its own box. It is two
     words at most and must never break. */
  white-space: nowrap; overflow-wrap: normal; word-break: keep-all;
  padding: var(--s-2) var(--s-4);
  border: 2px solid var(--c-danger);
  border-radius: var(--r-sm);
  color: var(--c-danger);
  font-weight: var(--t-bold);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  font-size: var(--t-sm);
  margin-bottom: var(--s-6);
}

/* The uploaded-file case: nothing to render, say where the file is. */
.doc-file { display: flex; flex-direction: column; gap: var(--s-3); }
.doc-file code { font-family: var(--t-mono); font-size: var(--t-sm); }

/* ============================================================================
   THE DOCUMENTS TAB (person profile)
   ========================================================================= */

.doc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.doc-item {
  display: grid;
  grid-template-columns: 20px minmax(0, 1fr) auto;
  gap: var(--s-4) var(--s-5);
  align-items: center;
  padding: var(--s-4) var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-md);
  background: var(--c-surface);
}
.doc-item-icon { width: 18px; height: 18px; color: var(--c-text-2); }
.doc-item-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.doc-item-kind { font-weight: var(--t-semibold); display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; }
.doc-item-meta { font-size: var(--t-sm); color: var(--c-text-2); overflow-wrap: anywhere; }
.doc-item-actions { display: flex; gap: var(--s-2); flex-wrap: wrap; justify-content: flex-end; }
.doc-item-actions svg { width: 14px; height: 14px; }
@media (max-width: 560px) {
  .doc-item { grid-template-columns: 20px minmax(0, 1fr); }
  .doc-item-actions { grid-column: 2; justify-content: flex-start; }
}
.doc-extras:empty { display: none; }

/* ============================================================================
   THE VERIFY DOORWAY
   ========================================================================= */

.verify-stage { display: flex; flex-direction: column; gap: var(--s-6); width: 100%; }
.verify-form { display: flex; gap: var(--s-3); align-items: flex-end; flex-wrap: wrap; }
.verify-form .field { flex: 1 1 220px; }
.verify-form input { font-family: var(--t-mono); letter-spacing: 0.08em; text-transform: uppercase; }
.verify-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 150px), 1fr)); gap: var(--s-4) var(--s-6); }
.verify-result { display: flex; flex-direction: column; gap: var(--s-6); }
.verify-result .letter-frame { max-width: none; }
.auth-stage-verify { max-width: 860px; }

.verify-form { margin-top: var(--s-5); }
.verify-form button { white-space: nowrap; }
.verify-again { margin-top: var(--s-6); }

/* AN ICON IN A FLEX BUTTON NEEDS A SIZE OR IT TAKES THE BUTTON. An svg with no
   width is a flex item with no intrinsic size, so on a phone, where the Check
   button goes full width, the magnifier grew to fill it: a 340 by 500 pixel
   magnifying glass with the word Check tucked against its edge. Every icon this
   workstream puts inside a button is sized here, the way .doc-actions already
   sized its own. */
.verify-form button svg,
.verify-again button svg,
.doc-tab .section-head button svg { width: 15px; height: 15px; flex: 0 0 auto; }

/* A verification code is the one string on these screens that must not break
   mid group. Broken across a line it is a code somebody retypes wrong, so the
   hyphens sql/0180 prints are the only places a wrap is allowed. */
.doc-fact-value code, .verify-facts code, .letter-verify code { word-break: keep-all; overflow-wrap: break-word; }

/* ============================================================================
   THE VERSIONS PANEL

   Drawn only when a letter has actually been reissued, so it is never an empty
   card explaining that there is nothing to explain. The numbers are the order
   they were issued in, oldest first, because that is the order somebody asks
   the question in: which came first, and which one stands now.
   ========================================================================= */

.doc-chain-list { list-style: none; margin: var(--s-5) 0 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-3); }
.doc-chain-item {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr);
  gap: var(--s-4);
  align-items: baseline;
  padding: var(--s-3) var(--s-4);
  border-radius: var(--r-sm);
  border: var(--bw) solid transparent;
}
/* The one being read is marked, not filled: a highlighted row here would
   compete with the letter above it, which is the thing on the page. */
.doc-chain-item[data-here="1"] { border-color: var(--c-border); background: var(--c-surface-2); }
.doc-chain-n {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px;
  border-radius: 999px;
  border: var(--bw) solid var(--c-border);
  color: var(--c-text-2);
  font-size: var(--t-sm);
  font-variant-numeric: tabular-nums;
}
.doc-chain-body { display: flex; flex-direction: column; gap: var(--s-1); min-width: 0; }
.doc-chain-what { display: flex; gap: var(--s-3); align-items: center; flex-wrap: wrap; font-weight: var(--t-semibold); }
/* 32px minimum on anything you tap. The chain row link sat at 28 and it is not
   an inline link inside a sentence, which is the one shape that earns an
   exception - it is a row in a list, on a phone, next to another row. The
   height comes from min-height rather than padding so the text does not move. */
a.doc-chain-what { color: var(--c-text); min-height: 32px; }
.doc-chain-when { font-size: var(--t-sm); color: var(--c-text-2); overflow-wrap: anywhere; }

/* ============================================================================
   THE TAB

   .btn-open is a link that has to sit in a row of buttons without being one:
   navigating is not an action that can fail, so it stays an anchor and keeps
   its middle click, its context menu and its copyable address.
   ========================================================================= */

.doc-tab { display: flex; flex-direction: column; gap: var(--s-6); }
.doc-tab .section-head { flex-wrap: wrap; gap: var(--s-4); }
.btn-open {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 32px; padding: var(--s-3) var(--s-5);
  border: var(--bw) solid var(--c-border);
  border-radius: var(--r-sm);
  background: var(--c-surface);
  color: var(--c-text);
  font-size: var(--t-sm); font-weight: var(--t-semibold);
  text-decoration: none; white-space: nowrap;
}
.btn-open:hover { background: var(--c-surface-3); border-color: var(--c-border-strong); text-decoration: none; }
.doc-item-link { grid-column: 1 / -1; font-family: var(--t-mono); font-size: var(--t-sm); overflow-wrap: anywhere; color: var(--c-text-2); }
/* .doc-item-meta wraps anywhere so a long revoke reason cannot push the row
   wide. The code must not: the line breaks before it instead. */
.doc-item-code { font-family: var(--t-mono); white-space: nowrap; overflow-wrap: normal; color: var(--c-text-2); }

/* Revoke reads as the dangerous one here and not globally: css/components.css
   is the integrator's file and leaves .dangerous unstyled, so the rule is
   scoped to the two surfaces in this workstream that draw one. */
.doc-actions button.dangerous, .doc-item-actions button.dangerous { color: var(--c-danger); }
.doc-actions button.dangerous:hover, .doc-item-actions button.dangerous:hover {
  background: var(--c-danger-quiet); border-color: var(--c-danger); color: var(--c-danger);
}

/* Mobile first: on a phone the code field, the button and every action are
   full width and stacked, because a 320px row of four inline controls is four
   controls nobody can hit. */
@media (max-width: 560px) {
  .verify-form { flex-direction: column; align-items: stretch; }
  .verify-form .field { flex: 1 1 auto; }
  .verify-form button { width: 100%; }
  .doc-actions button, .doc-actions .btn-open { flex: 1 1 auto; justify-content: center; }
}

/* ============================================================================
   PRINT

   Only the letter. The frame loses its shadow and border, the nav, the top
   bar and every action disappear, and the paper is the page.
   ========================================================================= */

@media print {
  #nav, .topbar, .scrim, .toasts, #overlays, .doc-actions, .doc-facts, .page-head,
  .auth-brand, .auth-panel-top, .verify-form, .verify-facts, .note, .tabs, .person-head,
  /* Added with the screens: the versions panel and the "check another code"
     line are chrome. Without these a printed letter carries a list of the
     letters that replaced it, which is the one thing it must not do when
     somebody prints the current one to hand over. */
  .doc-chain, .doc-chain-slot, .doc-facts-card, .verify-again, .section-head,
  .doc-item-actions { display: none !important; }
  #app, #main, #screen, .page, .doc-page, .auth, .auth-panel, .auth-stage, .verify-stage, .verify-result {
    display: block !important; padding: 0 !important; margin: 0 !important; overflow: visible !important;
    height: auto !important; max-width: none !important; background: transparent !important;
  }
  .letter-frame { border: 0; box-shadow: none; max-width: none; padding: 0; opacity: 1; border-radius: 0; }
  .letter { font-size: 12pt; line-height: 1.5; color: #000; }
  .letter-stamp { color: #000; border-color: #000; }
  @page { margin: 22mm 20mm; }
}