/* Rental Passport Namibia — design system (Milestone 1.1)
   A restrained, financial-record aesthetic: flat surfaces, thin borders, a small type scale with
   real hierarchy, tabular figures for money, and status tags used only where they carry
   information (verification level, contractual status, tenancy state). No gradients, no
   oversized rounded cards, no decorative icons. */

:root {
  /* ---- color ---- */
  /* Milestone 7: aligned to the approved Rental Passport brand palette (navy #0F2D4A, teal
     #0F8A7A, warm neutral #F6F4EB, slate #64748B). --brand and --canvas use the exact approved
     hex values — no contrast concern either way. --accent and --ink-muted/--neutral-fg use
     slightly darkened variants of the approved teal/slate instead of the exact hex, because both
     are used as small body text throughout the app (paragraphs, meta text, stat labels) and the
     exact brand values measure 3.86-4.32:1 against this app's backgrounds, below the 4.5:1 WCAG
     AA minimum a Milestone 5 accessibility pass already fixed once — see that milestone's
     --ink-faint fix for the same reasoning. The exact approved hex values are used unadjusted in
     the brand mark/logo assets themselves (icons/*.svg), where they are graphic elements, not
     paragraph text. Every token below was re-verified against both --canvas and --surface after
     this change (still >=4.5:1 in every case; see DECISIONS.md's Milestone 7 entry for the
     figures) rather than assumed unchanged.
  */
  --ink: #14202b;
  --ink-muted: #5c6a80; /* accessible variant of approved slate #64748B */
  --ink-faint: #65707d;
  --canvas: #F6F4EB; /* approved warm neutral, exact */
  --surface: #ffffff;
  --border: #d9d3c4;
  --border-strong: #b9c1c9;
  --brand: #0F2D4A; /* approved navy, exact */
  --brand-2: #1a3a5c;
  --accent: #0d7a6c; /* accessible variant of approved teal #0F8A7A */
  --accent-hover: #0a6659;

  --positive-bg: #e6f2ea;
  --positive-fg: #1f6b3d;
  --caution-bg: #f8f0dd;
  --caution-fg: #8a5a10;
  --negative-bg: #f9e7e4;
  --negative-fg: #a1301f;
  --neutral-bg: #ebe9e2;
  --neutral-fg: #5c6a80;
  --historical-bg: #ede4f1;
  --historical-fg: #67397f;

  /* ---- type ---- */
  --font-sans: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --tabular: "tnum" 1, "lnum" 1;

  /* ---- spacing (4px base) ---- */
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --sp-6: 32px;
  --sp-7: 48px;

  /* ---- shape ---- */
  --radius-xs: 3px;
  --radius-sm: 5px;
  --radius-md: 8px;
  --border-w: 1px;
}

* { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--canvas);
  color: var(--ink);
  font-family: var(--font-sans);
  font-size: 15px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  padding-bottom: env(safe-area-inset-bottom);
}

[hidden] { display: none !important; }

.app-shell {
  max-width: 640px;
  margin: 0 auto;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
}

/* ============================= NAVIGATION / TOP BAR ============================= */

.topbar {
  background: var(--brand);
  color: #fff;
  padding: 13px 16px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  row-gap: 6px;
  gap: 12px;
  border-bottom: var(--border-w) solid rgba(255, 255, 255, 0.08);
}

.topbar .brand {
  display: flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

.brand-icon { flex-shrink: 0; display: block; }

.brand-mark {
  font-weight: 700;
  font-size: 1.0625rem;
  letter-spacing: -0.01em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  /* A flex item's implicit min-width is its content's own width, not 0 — without this, "Rental
     Passport" refuses to shrink at all below its natural nowrap width, so at very narrow widths
     (below ~320px; found while checking the app in the browser pane, which can render narrower
     than the 375px "mobile" width tested in Milestone 5) it overflows past its own container and
     visually collides with the "Demo"/role tags and Log out button sitting to its right, rather
     than truncating cleanly. */
  min-width: 0;
}

.env-tag {
  font-size: 0.625rem;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: #cfe0d9;
  border: var(--border-w) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xs);
  padding: 2px 6px;
  white-space: nowrap;
}

.session-info {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 0.8125rem;
}

.role-tag {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  color: #cdd8e2;
  border: var(--border-w) solid rgba(255, 255, 255, 0.3);
  border-radius: var(--radius-xs);
  padding: 3px 7px;
}

.btn-ghost-light {
  background: transparent;
  border: var(--border-w) solid rgba(255, 255, 255, 0.35);
  color: #fff;
  border-radius: var(--radius-xs);
  padding: 6px 10px;
  font: inherit;
  font-size: 0.8125rem;
  cursor: pointer;
}
.btn-ghost-light:hover { background: rgba(255, 255, 255, 0.08); }

.demo-banner {
  background: #f0e6cc;
  color: #6b4f14;
  font-size: 0.75rem;
  text-align: center;
  padding: 6px 12px;
  border-bottom: var(--border-w) solid #ddc98e;
}

/* ============================= LAYOUT ============================= */

main {
  flex: 1;
  padding: var(--sp-5) var(--sp-4) var(--sp-6);
}

footer.app-footer {
  text-align: center;
  font-size: 0.75rem;
  color: var(--ink-faint);
  padding: var(--sp-4);
  border-top: var(--border-w) solid var(--border);
}

/* ============================= TYPOGRAPHY ============================= */

h1, h2, h3 { font-family: inherit; margin: 0 0 4px; color: var(--brand); font-weight: 700; }
h1 { font-size: 1.3125rem; letter-spacing: -0.01em; }
h2 { font-size: 1.0625rem; letter-spacing: -0.005em; }
h3 { font-size: 0.9375rem; font-weight: 600; }

p { margin: 0 0 var(--sp-3); color: var(--ink-muted); font-size: 0.9375rem; }

.subtext { color: var(--ink-muted); font-size: 0.875rem; margin: 0 0 var(--sp-4); }

.section-label {
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--border-w) solid var(--border);
}
.section-label:first-child { border-top: none; padding-top: 0; margin-top: 0; }

.field-hint {
  display: block;
  font-size: 0.75rem;
  color: var(--ink-faint);
  margin-top: 4px;
}

code {
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  font-size: 0.875em;
  background: var(--neutral-bg);
  padding: 1px 5px;
  border-radius: var(--radius-xs);
}

/* ============================= SURFACES ============================= */

.panel {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}

.stack { display: flex; flex-direction: column; gap: var(--sp-3); }
.row { display: flex; align-items: center; gap: var(--sp-2); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--sp-2); }
.row-between > div:first-child { min-width: 0; }

/* ============================= FORMS ============================= */

label { display: block; font-size: 0.8125rem; font-weight: 500; color: var(--ink); margin-bottom: 5px; }

input[type="text"], input[type="password"], input[type="email"], input[type="file"], select, textarea {
  width: 100%;
  padding: 10px 12px;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  font: inherit;
  font-size: 0.9375rem;
  background: #fff;
  color: var(--ink);
}
textarea { resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: 2px solid var(--accent);
  outline-offset: 1px;
  border-color: var(--accent);
}

/* Structured reason options in the reason sheet — radio-style rows, not a native <select>, so
   each option can carry its own label without a second control. */
.option-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 12px;
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  cursor: pointer;
  font-size: 0.9375rem;
}
.option-row:hover { border-color: var(--accent); }
.option-row input[type="radio"] { width: auto; margin: 0; accent-color: var(--accent); }
.option-row.selected { border-color: var(--accent); background: #f2f8f7; }

.field { margin-bottom: var(--sp-4); }

/* Accessible file upload: the native input stays in the DOM and keeps real file-input behavior,
   just visually hidden (not display:none, so assistive tech can still reach it via its label) —
   a visible native "Upload file" button forwards its click to the input (see app.js), which is
   the standard accessible pattern for restyling a file input without losing functionality. */
.file-upload { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.file-upload-input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}
.file-upload-name {
  font-size: 0.8125rem;
  color: var(--ink-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 220px;
}

/* ============================= BUTTONS ============================= */

button { font-family: inherit; }

button.primary {
  background: var(--accent);
  color: #fff;
  border: none;
  border-radius: var(--radius-sm);
  padding: 11px 16px;
  font-size: 0.9375rem;
  font-weight: 600;
  cursor: pointer;
  width: 100%;
}
button.primary:hover { background: var(--accent-hover); }
button.primary:disabled { opacity: 0.55; cursor: not-allowed; }

button.secondary {
  background: transparent;
  color: var(--brand);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px 14px;
  font-size: 0.875rem;
  cursor: pointer;
}
button.secondary:hover { background: var(--neutral-bg); }

.tab-row { display: flex; gap: var(--sp-2); margin-bottom: var(--sp-4); }
.tab-btn {
  flex: 1;
  background: var(--surface);
  border: var(--border-w) solid var(--border-strong);
  border-radius: var(--radius-sm);
  padding: 9px;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  color: var(--ink-muted);
}
.tab-btn.active { background: var(--brand); color: #fff; border-color: var(--brand); }

.persona-btn {
  width: 100%;
  text-align: left;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  cursor: pointer;
  font-size: 0.875rem;
  font-weight: 600;
  color: var(--ink);
}
.persona-btn:hover { border-color: var(--accent); }
.persona-btn .persona-note { display: block; font-size: 0.75rem; font-weight: 400; color: var(--ink-muted); margin-top: 2px; }

.back-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--accent);
  background: none;
  border: none;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  padding: 4px 0;
  margin-bottom: var(--sp-3);
}

.link-btn {
  background: none;
  border: none;
  color: var(--accent);
  font-size: 0.875rem;
  cursor: pointer;
  padding: 0;
}

/* ============================= ALERTS ============================= */

.alert {
  border-radius: var(--radius-sm);
  padding: 10px 12px;
  font-size: 0.875rem;
  margin-bottom: var(--sp-3);
  border: var(--border-w) solid transparent;
}
.alert-error { background: var(--negative-bg); color: var(--negative-fg); border-color: #f0c6bf; }
.alert-notice { background: var(--caution-bg); color: var(--caution-fg); border-color: #ecd8a6; }

.otp-code {
  font-size: 1.5rem;
  font-variant-numeric: var(--tabular);
  letter-spacing: 0.28em;
  font-weight: 700;
  text-align: center;
  padding: 14px;
  background: var(--neutral-bg);
  border-radius: var(--radius-sm);
  color: var(--brand);
  margin-bottom: var(--sp-3);
}

/* ============================= STATUS TAGS ============================= */
/* Rectangular, not pill-shaped — status tags read as financial-record metadata, not decoration. */

.tag {
  display: inline-flex;
  align-items: center;
  gap: 3px;
  padding: 2px 7px;
  border-radius: var(--radius-xs);
  font-size: 0.6875rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  white-space: nowrap;
  line-height: 1.5;
}
.tag-positive { background: var(--positive-bg); color: var(--positive-fg); }
.tag-caution { background: var(--caution-bg); color: var(--caution-fg); }
.tag-negative { background: var(--negative-bg); color: var(--negative-fg); }
.tag-neutral { background: var(--neutral-bg); color: var(--neutral-fg); }
.tag-historical { background: var(--historical-bg); color: var(--historical-fg); }
.tag-level2 { background: var(--positive-bg); color: var(--positive-fg); border: var(--border-w) solid #a9d9b8; }
.tag-level01 { background: var(--neutral-bg); color: var(--neutral-fg); }

/* ============================= FINANCIAL FIGURES ============================= */

.figure {
  font-variant-numeric: var(--tabular);
  font-weight: 700;
  color: var(--brand);
  white-space: nowrap;
  flex-shrink: 0;
}
.figure-lg { font-size: 1.1875rem; }
.figure-md { font-size: 1rem; }
.figure-unit { font-weight: 400; color: var(--ink-muted); font-size: 0.8125rem; }

/* ============================= LIST ROWS (tenancies, audit) ============================= */
/* Used instead of one card per item: a bordered container with divider rows reads as a ledger
   or statement, not a stack of dashboard widgets. */

.list-panel {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
}

.list-row {
  padding: var(--sp-3) var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  cursor: default;
}
.list-row:last-child { border-bottom: none; }
.list-row.clickable { cursor: pointer; }
.list-row.clickable:hover { background: #faf9f6; }
/* A visible, on-brand focus ring for the div-as-button rows (role="button" tabindex="0" in
   app.js) — inset so the parent .list-panel's overflow:hidden never clips it. */
.list-row.clickable:focus-visible { outline: 2px solid var(--accent); outline-offset: -2px; }

.list-row-title { font-weight: 600; font-size: 0.9375rem; color: var(--brand); }
.list-row-meta { font-size: 0.8125rem; color: var(--ink-muted); margin-top: 1px; }

.empty-row {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
}

/* ============================= LEDGER TABLE (obligations) ============================= */

.ledger {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}

.ledger-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 2px var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  font-size: 0.875rem;
}
.ledger-row:last-child { border-bottom: none; }
.ledger-row.historical { border-left: 3px solid var(--historical-fg); }

.ledger-row .period { font-weight: 600; color: var(--ink); }
.ledger-row .claim-line {
  grid-column: 1 / -1;
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  font-size: 0.8125rem;
  color: var(--ink-muted);
  padding-top: 6px;
  margin-top: 6px;
  border-top: var(--border-w) dashed var(--border);
}
.ledger-row .tags { grid-column: 1 / -1; display: flex; gap: 4px; flex-wrap: wrap; align-items: center; margin-top: 2px; }

/* ============================= KPI STRIP (admin) ============================= */

.kpi-strip {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
}
.kpi-cell {
  padding: var(--sp-3) var(--sp-3);
  border-bottom: var(--border-w) solid var(--border);
  border-right: var(--border-w) solid var(--border);
}
.kpi-cell:nth-child(2n) { border-right: none; }
.kpi-value { font-size: 1.375rem; font-weight: 700; color: var(--brand); font-variant-numeric: var(--tabular); }
.kpi-label { font-size: 0.6875rem; color: var(--ink-muted); text-transform: uppercase; letter-spacing: 0.05em; margin-top: 2px; }

.audit-row {
  padding: 9px var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  font-size: 0.8125rem;
  display: flex;
  justify-content: space-between;
  gap: var(--sp-2);
}
.audit-row:last-child { border-bottom: none; }
.audit-action { font-weight: 600; color: var(--brand-2); }
.audit-time { color: var(--ink-faint); white-space: nowrap; font-variant-numeric: var(--tabular); }

/* ============================= ADMIN INVESTIGATION SECTIONS (Milestone 5) ============================= */
/* Each admin section is a native disclosure, not a tab or a modal — every section is reachable by
   scrolling and reading, matching "investigation and traceability, not a BI dashboard." */

.admin-section {
  margin: var(--sp-5) 0 var(--sp-2);
  padding-top: var(--sp-3);
  border-top: var(--border-w) solid var(--border);
}
.admin-section summary {
  cursor: pointer;
  font-size: 0.75rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  padding: 2px 0 var(--sp-2);
}
.admin-section summary:hover { color: var(--ink-muted); }
.admin-section-count { font-variant-numeric: var(--tabular); text-transform: none; letter-spacing: normal; }

/* A short fact chain inside a row (claimed -> disputed -> corrected -> current), set apart from
   the row's own facts with a dashed rule rather than a nested box. */
.chain-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border-w) dashed var(--border);
  font-size: 0.8125rem;
}

/* ============================= REASON SHEET (bottom sheet on mobile, centered on wide screens) ==== */

.sheet-overlay {
  position: fixed;
  inset: 0;
  background: rgba(11, 31, 51, 0.45);
  display: flex;
  align-items: flex-end;
  justify-content: center;
  z-index: 100;
}
.sheet {
  background: var(--surface);
  width: 100%;
  max-width: 480px;
  border-radius: var(--radius-md) var(--radius-md) 0 0;
  padding: var(--sp-4) var(--sp-4) calc(var(--sp-4) + env(safe-area-inset-bottom));
  max-height: 85vh;
  overflow-y: auto;
}
.sheet-handle {
  width: 36px;
  height: 4px;
  background: var(--border-strong);
  border-radius: 2px;
  margin: 0 auto var(--sp-3);
}

@media (min-width: 640px) {
  .sheet-overlay { align-items: center; }
  .sheet { border-radius: var(--radius-md); }
  .sheet-handle { display: none; }
}

/* ============================= MISC ============================= */

.spinner-line { text-align: center; padding: var(--sp-5); color: var(--ink-muted); font-size: 0.875rem; }

@media (min-width: 640px) {
  main { padding: var(--sp-6) var(--sp-5) var(--sp-7); }
  .kpi-strip { grid-template-columns: repeat(3, 1fr); }
  .kpi-cell:nth-child(2n) { border-right: var(--border-w) solid var(--border); }
  .kpi-cell:nth-child(3n) { border-right: none; }
}

/* ============================= RENTAL PASSPORT (Milestone 4) ============================= */

.passport-shell { max-width: 720px; margin: 0 auto; }

.passport-masthead {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--sp-4);
  padding-bottom: var(--sp-4);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--brand);
}
.passport-masthead h1 { margin-bottom: 2px; }
.passport-subject { font-size: 1.125rem; font-weight: 700; color: var(--ink); }
.passport-meta { text-align: right; font-size: 0.75rem; color: var(--ink-faint); flex-shrink: 0; }
.passport-meta .figure-unit { display: block; }

/* Prominent trust statement — deliberately not styled as an error/caution alert. A left rule in
   brand navy reads as "formal disclosure," not "something is wrong." Never relegated to
   footer-sized type (Milestone 4 instruction). Kept short (Milestone 4.1): a title, two short
   paragraphs, and a link into the full verification explanation for whoever wants it. */
.trust-statement {
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-left: 4px solid var(--brand);
  border-radius: var(--radius-sm);
  padding: var(--sp-4);
  margin-bottom: var(--sp-5);
  font-size: 0.875rem;
  color: var(--ink);
  line-height: 1.6;
}
.trust-statement strong { color: var(--brand); }
.trust-statement-title { font-weight: 700; font-size: 0.9375rem; color: var(--brand); margin-bottom: 6px; }
.trust-statement p { margin-bottom: 8px; }
.trust-statement p:last-of-type { margin-bottom: 0; }
.trust-statement .link-btn { display: inline-block; margin-top: 4px; font-weight: 600; }

.passport-section-intro { font-size: 0.8125rem; color: var(--ink-muted); margin: 0 0 var(--sp-3); }

.stat-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: var(--sp-3);
}
.stat-cell {
  padding: var(--sp-3);
  border-bottom: var(--border-w) solid var(--border);
  border-right: var(--border-w) solid var(--border);
}
.stat-cell:nth-child(2n) { border-right: none; }
.stat-value { font-size: 1.5rem; font-weight: 700; letter-spacing: -0.01em; color: var(--brand); font-variant-numeric: var(--tabular); }
.stat-label { font-size: 0.6875rem; color: var(--ink-muted); margin-top: 2px; }

@media (min-width: 560px) {
  .stat-grid { grid-template-columns: repeat(4, 1fr); }
  .stat-cell:nth-child(2n) { border-right: var(--border-w) solid var(--border); }
  .stat-cell:nth-child(4n) { border-right: none; }
}

.passport-empty-block {
  padding: var(--sp-5) var(--sp-4);
  text-align: center;
  color: var(--ink-muted);
  font-size: 0.875rem;
  border: var(--border-w) dashed var(--border-strong);
  border-radius: var(--radius-md);
  margin-bottom: var(--sp-3);
}

.recent-window {
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  overflow: hidden;
  background: var(--surface);
  margin-bottom: var(--sp-3);
}
.recent-window-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: var(--sp-2);
  padding: 8px var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  font-size: 0.8125rem;
}
.recent-window-row:last-child { border-bottom: none; }

/* A row inside the shared .list-panel, not its own bordered card (Milestone 4.1 point 6: not
   every piece of information needs a box — a divider between rows carries the same hierarchy). */
.passport-tenancy-row { padding: var(--sp-4); border-bottom: var(--border-w) solid var(--border); }
.passport-tenancy-row:last-child { border-bottom: none; }
.passport-tenancy-row.historical { border-left: 3px solid var(--historical-fg); }
.passport-reference-block {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border-w) dashed var(--border);
}
.passport-reference-block .reference-heading {
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--ink-faint);
  margin-bottom: 6px;
}
/* Opinion vs. fact: the reference sits visually apart from payment statistics and is never
   allowed to alter them (Milestone 4 instruction: "facts vs. opinion"). */
.passport-reference-block .subtext-note { font-size: 0.75rem; color: var(--ink-faint); margin-top: 6px; }

.legend-row {
  display: flex;
  gap: var(--sp-3);
  padding: 10px var(--sp-4);
  border-bottom: var(--border-w) solid var(--border);
  font-size: 0.8125rem;
  align-items: flex-start;
}
.legend-row:last-child { border-bottom: none; }
.legend-row .tag { flex-shrink: 0; margin-top: 1px; }
.legend-row.reserved { color: var(--ink-faint); }
.legend-row .legend-text { color: var(--ink-muted); }

/* A single generated Passport, as a row inside the shared .list-panel in the sharing section
   (Milestone 4.1 point 6 — one outer list container instead of a bordered card per Passport). */
.passport-record-row { padding: var(--sp-4); border-bottom: var(--border-w) solid var(--border); }
.passport-record-row:last-child { border-bottom: none; }

/* One share link, subordinate to its Passport row above — a dashed top rule rather than its own
   full border, so it reads as "part of this record" rather than a sibling card. */
.share-link-row {
  margin-top: var(--sp-3);
  padding-top: var(--sp-3);
  border-top: var(--border-w) dashed var(--border);
}

/* Checksums, raw tokens and full share URLs are not part of the primary Passport view (Milestone
   4.1 point 5) — they live behind this native, dependency-free disclosure instead. Reused for the
   full verification-level legend, which is likewise optional/educational (point 1 and point 3). */
details.advanced-details, details.verification-details { margin-top: var(--sp-3); }
details.advanced-details summary, details.verification-details summary {
  cursor: pointer;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--accent);
  padding: 4px 0;
}
details.advanced-details summary:hover, details.verification-details summary:hover { color: var(--accent-hover); }
.advanced-details-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: var(--border-w) dashed var(--border);
  font-size: 0.75rem;
  color: var(--ink-faint);
  font-family: ui-monospace, "SF Mono", Consolas, monospace;
  word-break: break-all;
}

.passport-actions-bar { display: flex; gap: var(--sp-2); flex-wrap: wrap; align-items: flex-end; margin-bottom: var(--sp-4); }

.live-preview-tag {
  display: inline-block;
  font-size: 0.6875rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: var(--accent);
  background: #eaf4f2;
  border-radius: var(--radius-xs);
  padding: 2px 7px;
  margin-bottom: 6px;
}

/* ============================= PRINT (Milestone 5 dedicated review) ============================= */
/* Standard A4 with sensible margins — the Rental Passport is the one screen in this prototype
   meant to leave the browser as a physical or PDF document, so it gets its own page setup rather
   than relying on the browser's print defaults. */
@page {
  size: A4;
  margin: 16mm 14mm;
}

.print-only { display: none; }

@media print {
  .app-footer, .topbar, .demo-banner, .back-link, .passport-actions-bar,
  #passport-share-management, .session-info { display: none !important; }
  body { background: #fff; font-size: 12px; }
  .app-shell, .passport-shell { max-width: none; }
  main { padding: 0; }
  .panel, .stat-grid, .recent-window, .trust-statement, .list-panel, .ledger { border-color: #999; }

  /* Break-avoidance belongs on the individual row/card, not the container around it — a
     container (a long tenancy list, a full obligation ledger) is often taller than one page and
     legitimately needs to split; forcing the whole container to stay together just pushes it
     onto its own mostly-blank page instead. Each row staying intact is what "avoid broken
     cards/rows across pages" actually requires (Milestone 5). Tested against Persona A (short),
     B (longest: two historical tenancies plus a current one), and C (a mid-length record with a
     disputed/corrected chain and a disputed reference). */
  .passport-tenancy-row, .list-row, .share-link-row, .passport-record-row,
  .recent-window-row, .legend-row, .stat-cell, .ledger-row, .audit-row { break-inside: avoid; }
  .passport-masthead, .trust-statement { break-inside: avoid; break-after: avoid; }
  .section-label { break-after: avoid; }

  .stat-grid { grid-template-columns: repeat(4, 1fr) !important; }

  a[href]::after { content: none !important; }

  /* Share-link/checksum details are exactly the raw tokens/URLs/checksums Milestone 5 says a
     printed Passport must not show; the verification explanation is useful on paper, so it
     prints open regardless of its on-screen collapsed/expanded state. */
  details.advanced-details { display: none !important; }
  details.verification-details { display: block; }
  details.verification-details > summary { display: none; }
  details.verification-details > *:not(summary) { display: block !important; }

  .print-only { display: block; }
  .print-footer {
    margin-top: 16px;
    padding-top: 8px;
    border-top: var(--border-w) solid #999;
    font-size: 10px;
    color: #555;
    line-height: 1.5;
  }
}

/* ============================= PUBLIC LANDING PAGE (Milestone 6) ============================= */
/* A distinct entry point, not a copy of the app shell — but built from the same restrained
   financial-record vocabulary (no gradients, no decorative icons, no oversized marketing type). */

.landing-shell { min-height: 100vh; display: flex; flex-direction: column; }

.landing-hero {
  background: var(--brand);
  color: #fff;
  padding: var(--sp-6) var(--sp-4) var(--sp-7);
}
.landing-hero-inner { max-width: 640px; margin: 0 auto; }
.landing-brand-row { display: flex; align-items: center; gap: 8px; margin-bottom: var(--sp-5); flex-wrap: wrap; }
.landing-hero h1 {
  color: #fff;
  font-size: 1.625rem;
  letter-spacing: -0.01em;
  line-height: 1.25;
  margin-bottom: var(--sp-3);
}
.landing-tagline { color: rgba(255, 255, 255, 0.82); font-size: 0.9375rem; margin-bottom: 0; }
/* The approved working tagline, used exactly once on this page (Milestone 7 instruction: "use it
   selectively... do not repeat it throughout the application"). */
.landing-tagline-mark {
  color: #fff;
  font-size: 0.875rem;
  font-weight: 600;
  font-style: italic;
  margin: var(--sp-3) 0 0;
}

.landing-main { max-width: 640px; margin: 0 auto; padding: var(--sp-5) var(--sp-4) var(--sp-6); flex: 1; width: 100%; }

.landing-list { margin: 0 0 var(--sp-4); padding-left: 1.25em; color: var(--ink-muted); font-size: 0.9375rem; }
.landing-list li { margin-bottom: 6px; }

.landing-cta-grid { display: grid; grid-template-columns: 1fr; gap: var(--sp-3); margin-bottom: var(--sp-5); }
.landing-cta-card {
  display: block;
  background: var(--surface);
  border: var(--border-w) solid var(--border);
  border-radius: var(--radius-md);
  padding: var(--sp-4);
  text-decoration: none;
  color: inherit;
}
.landing-cta-card:hover { border-color: var(--accent); }
.landing-cta-card:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.landing-cta-title { font-weight: 700; font-size: 1.0625rem; color: var(--brand); margin-bottom: 6px; }
.landing-cta-card p { margin-bottom: 8px; font-size: 0.875rem; }
.landing-cta-card .link-btn { pointer-events: none; font-weight: 600; }

@media (min-width: 640px) {
  .landing-hero h1 { font-size: 2rem; }
  .landing-cta-grid { grid-template-columns: repeat(3, 1fr); }
}