/* ============================================================================
   REVENUE NOTICE — the plain-language letter view (.ntc-*), 11-12 Aug 2026.
   Shared by BOTH places a Revenue letter renders: the drawer on Home
   (dashboard.html) and the tax inbox's document pane (tax-inbox.html) — one
   stylesheet so the letter cannot drift between them (the invoice-doc rule).
   Promoted out of dashboard.css on 12 Aug when the tax inbox arrived.
   ============================================================================ */
.ntc-due { margin: 0; font-size: var(--text-base); color: var(--color-text-muted); }
.ntc-due--loud { color: var(--color-danger); font-weight: var(--weight-medium); }
/* Roomier, and the body sits back a shade so the BOLD heading leads
   (Peter, 20 Aug: "a little more spacing… maybe lighten the text"). */
.ntc-sec { margin: 0; }
.ntc-h { margin-top: 0; }
/* Bold and DARK (Peter, 20 Aug 2026: "these pages are busy… they're just
   blending in"). Muted medium made them read as captions, so the eye had
   nothing to catch on and the page became one grey wall. */
.ntc-h {
  margin: 0 0 6px;
  font-size: 13px;
  font-weight: var(--weight-bold);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--color-text);
}
.ntc-sec > p { margin: 0; font-size: var(--text-base); line-height: 1.65; color: var(--color-text-muted); }
.ntc-sec > p strong { color: var(--color-text); font-weight: var(--weight-medium); }
.ntc-pay {
  border: 1px solid var(--color-border);
  border-radius: 10px;
  padding: var(--drawer-row-pad);
}
.ntc-pay__amt {
  display: block;
  font-size: 24px;
  font-variant-numeric: tabular-nums;
  color: var(--color-text);
}
.ntc-pay__how { margin: 4px 0 0; font-size: 14px; color: var(--color-text-muted); }
.ntc-dates { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ntc-acct { margin: 0; font-size: 14px; color: var(--color-text-muted); }
.ntc-more {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  border: 0;
  background: none;
  padding: 0;
  font: inherit;
  font-size: 14px;
  color: var(--color-text-muted);
  cursor: pointer;
}
.ntc-more svg { width: 16px; height: 16px; transition: transform 0.2s; }
.ntc-more[aria-expanded="true"] svg { transform: rotate(180deg); }
.ntc-more:hover { color: var(--color-text); }
.ntc-full { margin-top: 12px; border: 1px solid var(--color-border); border-radius: 10px; padding: var(--drawer-row-pad); }
.ntc-full__label {
  margin: 0 0 8px;
  font-size: 13px;
  font-weight: var(--weight-medium);
  color: var(--color-text-muted);
}
.ntc-full__text { margin: 0; font-size: 14px; line-height: 1.6; color: var(--color-text-muted); white-space: pre-line; }

/* The tax inbox mounts the same letter view inside the shared inbox document
   pane (no drawer-body flex there) — the stack supplies the rhythm itself. */
.ntc-stack { display: flex; flex-direction: column; gap: 30px; margin-top: 28px; }

/* THE LETTER ITSELF (13 Aug 2026) — rendered as a document page inside the
   shared inbox's .inbox-orig frame, the way the bank pile shows the original
   bill. Text for now; the agent's screenshot of the notice replaces it when
   the real feed lands. */
.ntc-letter {
  background: #fff;
  /* fills the frame — 560px read squashed against the real notices (Peter, 13 Aug) */
  margin: 0 auto;
  padding: 44px 48px 56px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  font-size: 14px;
  line-height: 1.75;
  color: var(--color-text);
  white-space: pre-line;
  overflow-wrap: break-word;
}
@media (max-width: 640px) { .ntc-letter { padding: 28px 22px 36px; } }

/* THE REAL DOCUMENT (14 Aug 2026) — when the local live feed carries the
   agent's files (gitignored notices-local/: PDF pages rendered to images at
   import, or the ROS screenshot for on-screen notices), they take the letter's
   spot in the same .inbox-orig frame, one page under the next. The width
   override beats inbox.css's 340px thumbnail rule for ordinary inbox images. */
.ntc-pages {
  display: flex;
  flex-direction: column;
  gap: 16px;
  width: 100%;
  max-width: 720px;
}
.inbox-orig__page .ntc-shot {
  width: 100%;
  height: auto;
  display: block;
  background: #fff;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.08);
  border-radius: 2px;
}

/* "It is already on your to-do list" — the calm note at the foot of a letter
   that earned a row on Home (Peter, 20 Aug 2026: "so the person knows they
   don't have to keep on coming back to this"). Deliberately quiet: it is
   reassurance, not another thing to act on. */
.ntc-todo {
  background: var(--color-bg-subtle);
  border-radius: 10px;
  padding: 14px 16px;
}
/* A record asks nothing, so it is quieter still; a finished one reads green. */
/* Light grey, no dashed outline (Peter, 20 Aug: the dash "feels like it's part
   of the design, and totally wrong"). It is a quiet label, not a drawn object. */
.ntc-todo--none { background: var(--color-bg-subtle); border: 0; }
.ntc-todo--done .ntc-h { color: var(--color-success); }
.ntc-todo > p { font-size: 14px; color: var(--color-text-muted); }
.ntc-todo > p strong { color: var(--color-text); font-weight: var(--weight-medium); }
.ntc-todo a { color: inherit; }

/* THE INBOX LANDING (Peter, 20 Aug 2026) — nothing is open on arrival, so the
   pane is a small directory rather than an empty line. One card per sender,
   mirroring the filter pills; the card taps the real pill. */
.tin-land { display: flex; flex-direction: column; gap: 22px; }
.tin-land__count { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }
.tin-land__count strong { color: var(--color-text); font-weight: var(--weight-medium); }
.tin-land__cards { display: flex; flex-direction: column; gap: 12px; }
.tin-land__card {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 4px 16px;
  text-align: left;
  background: var(--color-surface);
  border: var(--border-width) solid var(--color-border);
  border-radius: 10px;
  padding: 18px 20px;
  cursor: pointer;
  transition: border-color .15s ease;
  font: inherit;
  color: inherit;
}
.tin-land__card:hover { border-color: var(--color-border-strong); }
.tin-land__h { font-weight: var(--weight-medium); }
.tin-land__n { color: var(--color-text-muted); font-variant-numeric: tabular-nums; }
.tin-land__d { grid-column: 1 / -1; font-size: var(--text-small); color: var(--color-text-muted); }
.tin-land__foot { margin: 0; font-size: var(--text-small); color: var(--color-text-muted); }

/* Every sync alert ends in a door to a human (Peter, 20 Aug 2026). */
.tin-alert__btn { margin-top: 12px; }
