/* ============================================================
   Opus Collect — Customer Engagement Landing Page
   No-login, single-case, link-triggered page sent via SMS/WhatsApp
   during a collections engagement. Co-branded: lender identity is
   primary (trust), Opus is a secondary "authorized partner" badge.
   Distinct palette from Daqi (navy/teal, not purple) so the two
   products never look like the same thing.
   ============================================================ */

:root {
  /* Follows the browser/system theme — no in-page toggle. Native form
     controls (date/time pickers) adapt via color-scheme. */
  color-scheme: light dark;

  --bg: #F5F7F8;
  --bg-elevated: #FFFFFF;
  --ink: #14212B;
  --ink-soft: #4B5D6B;
  --ink-faint: #93A3AD;
  --border: #E7ECEE;
  --letterbox: #DFE4E6; /* only visible on wide/desktop viewports */

  /* Lender brand (primary, trust-carrying): Unity Small Finance Bank.
     White-labeled — this IS the brand. Real logo image carries the mark. */
  --lender: #26262B;
  --lender-tint: #F4F0E6;
  --lender-light: #46464C;

  /* Opus — deliberately muted, only surfaces as a small "Powered by" credit */
  --opus: #5B6B76;

  /* Stage accents */
  --calm: #2E6E8E;      --calm-tint: #E7F1F5;
  --warn: #C97E1F;      --warn-tint: #FBF1E3;
  --urgent: #B0472C;    --urgent-tint: #FBEAE5;
  --legal: #9B3B3B;     --legal-tint: #F7E9E9;
  --opportunity: #2E8B6B; --opportunity-tint: #E7F5EF;

  --shadow-sm: 0 1px 2px rgba(20, 33, 43, 0.05);
  --shadow-md: 0 4px 18px rgba(20, 33, 43, 0.07);
  --shadow-lg: 0 10px 32px rgba(20, 33, 43, 0.12);

  --radius-lg: 22px;
  --radius-md: 16px;
  --radius-sm: 11px;
  --radius-pill: 999px;
}

@media (prefers-color-scheme: dark) {
  :root {
    --bg: #14181B;
    --bg-elevated: #1E2429;
    --ink: #EAF0F3;
    --ink-soft: #A9BAC4;
    --ink-faint: #6C7E89;
    --border: #2A3339;
    --letterbox: #0C0F11;

    /* Near-black lender brand would vanish on dark — lift to a slate that
       still reads as the same restrained identity. */
    --lender: #5C6B76;
    --lender-tint: #262E33;
    --lender-light: #8A959E;

    --opus: #8FA0AB;

    --calm: #5FA3C4;        --calm-tint: #1B2A33;
    --warn: #D68C2E;        --warn-tint: #33281A;
    --urgent: #CE6240;      --urgent-tint: #33201A;
    --legal: #BF5B5B;       --legal-tint: #332020;
    --opportunity: #45A381; --opportunity-tint: #1A2E27;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3);
    --shadow-md: 0 4px 18px rgba(0, 0, 0, 0.35);
    --shadow-lg: 0 10px 32px rgba(0, 0, 0, 0.5);
  }
}

* { box-sizing: border-box; }
svg { width: 18px; height: 18px; flex-shrink: 0; display: block; }

html {
  height: 100%;
  /* Real mobile browsers (Safari/Chrome) own the actual status bar and
     address bar — this page must never draw its own fake chrome. */
}
body {
  margin: 0; padding: 0;
  min-height: 100vh; min-height: 100dvh;
  font-family: -apple-system, BlinkMacSystemFont, "SF Pro Text", "Segoe UI", Inter, Roboto, "Noto Sans Devanagari", sans-serif;
  background: var(--letterbox);
  color: var(--ink);
  -webkit-font-smoothing: antialiased;
  display: flex;
  justify-content: center;
}

.page-root {
  position: relative;
  width: 100%;
  max-width: 480px; /* fluid full-width on phones; capped column on desktop */
  min-height: 100vh; min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
  /* No overflow:hidden here — it would create a scroll-container context
     that breaks position:sticky on .sticky-top and defeats natural
     document scrolling. The real document is the only scroll owner. */
}

/* The document itself scrolls naturally — real mobile browsers own that,
   we don't fake an app-style clipped scroll region for the main page. */
.page-scroll { padding-bottom: max(28px, env(safe-area-inset-bottom)); }
/* Overview tab has a sticky CTA bar pinned over its bottom edge — give it
   enough clearance so the last content (trust footer) is never hidden. */
.page-scroll.has-sticky-cta { padding-bottom: calc(100px + env(safe-area-inset-bottom)); }

.sticky-top { position: sticky; top: 0; z-index: 5; background: var(--bg); }

/* ---------- Header: white-labeled for the lender, no Opus mark up top ---------- */
.case-header {
  padding: 18px 20px 16px;
  display: flex;
  align-items: center;
  gap: 12px;
  border-bottom: 1px solid var(--border);
}
.case-header .titles { flex: 1 1 auto; min-width: 0; }
/* Lender logos are designed for light backgrounds — the thin-bezel white
   pill keeps them legible in both themes. */
.lender-logo-img {
  height: 42px; width: auto; display: block;
  background: #FFFFFF;
  border: 1px solid var(--border);
  border-radius: var(--radius-pill);
  padding: 6px 14px;
}
.lender-name-text { font-size: 17px; font-weight: 800; letter-spacing: -0.01em; margin: 0; color: var(--ink); }
.case-header .loan-ref { font-size: 12px; color: var(--ink-faint); margin: 5px 0 0; }

.greeting-line { padding: 16px 20px 4px; font-size: 15px; color: var(--ink-soft); }
.greeting-line b { color: var(--ink); }

/* ---------- Stage hero (dynamic per case stage) ---------- */
.stage-hero {
  margin: 10px 20px 14px;
  border-radius: var(--radius-lg);
  padding: 22px;
  background: var(--stage-tint, var(--calm-tint));
  border: 1.5px solid var(--stage-border, transparent);
}
.stage-hero .stage-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 11px; font-weight: 800; text-transform: uppercase; letter-spacing: 0.04em;
  color: var(--stage-color, var(--calm));
  margin-bottom: 10px;
}
.stage-hero .stage-pill svg { width: 13px; height: 13px; }
.stage-hero h1 {
  font-size: 21px; font-weight: 800; letter-spacing: -0.01em;
  margin: 0 0 8px; color: var(--ink); line-height: 1.3;
}
.stage-hero p.stage-sub {
  font-size: 14px; color: var(--ink-soft); margin: 0; line-height: 1.55;
}

/* ---------- Amount / detail card ---------- */
.detail-card {
  margin: 0 20px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  padding: 20px;
}
.detail-card .amount-row { display: flex; justify-content: space-between; align-items: flex-end; margin-bottom: 14px; padding-bottom: 14px; border-bottom: 1px dashed var(--border); }
.detail-card .amount-row .a-label { font-size: 12px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: 0 0 4px; }
.detail-card .amount-row .a-value { font-size: 28px; font-weight: 800; color: var(--ink); margin: 0; letter-spacing: -0.01em; }
.detail-card .amount-row .a-side { text-align: right; }
.detail-card .amount-row .a-side .a-value { font-size: 17px; color: var(--stage-color, var(--calm)); }

.kv-row { display: flex; justify-content: space-between; padding: 8px 0; border-bottom: 1px solid var(--border); }
.kv-row:last-child { border-bottom: none; }
.kv-row .k { font-size: 13px; color: var(--ink-faint); }
.kv-row .v { font-size: 13px; font-weight: 700; color: var(--ink); text-align: right; }

/* ---------- Settlement offer showcase: struck-through original amount,
   settlement amount, savings badge — makes the deal visually obvious
   rather than another row of plain text. ---------- */
.offer-showcase {
  position: relative;
  margin: 0 20px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--opportunity-tint);
  padding: 26px 20px 22px;
  text-align: center;
}
.offer-showcase.expired { filter: grayscale(1); }
.offer-save-badge {
  position: absolute; top: -12px; left: 50%; transform: translateX(-50%);
  background: var(--opportunity); color: #fff;
  font-size: 12.5px; font-weight: 800; letter-spacing: 0.02em;
  padding: 6px 16px; border-radius: var(--radius-pill);
  box-shadow: 0 6px 14px rgba(46, 139, 107, 0.35);
  white-space: nowrap;
}
.offer-was-label { font-size: 11px; color: var(--ink-faint); font-weight: 600; text-transform: uppercase; letter-spacing: 0.03em; margin: 6px 0 2px; }
.offer-was-value { font-size: 17px; color: var(--ink-faint); text-decoration: line-through; font-weight: 600; margin: 0; }
.offer-arrow-down { color: var(--opportunity); margin: 6px 0; display: flex; justify-content: center; }
.offer-arrow-down svg { width: 18px; height: 18px; }
.offer-now-label { font-size: 12px; color: var(--ink-soft); font-weight: 600; margin: 0 0 2px; }
.offer-now-value { font-size: 36px; font-weight: 900; color: var(--opportunity); letter-spacing: -0.02em; margin: 0; }

/* ---------- Dues-waiver showcase: principal + struck-through dues -> pay
   principal only. Same badge language as the offer showcase, different
   layout — a line-item breakdown rather than a single was/now swap. ---------- */
.waiver-showcase {
  position: relative;
  margin: 0 20px 14px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-md);
  border: 1.5px solid var(--opportunity-tint);
  padding: 26px 20px 22px;
  text-align: center;
}
.waiver-breakdown {
  text-align: left;
  background: var(--bg);
  border-radius: var(--radius-md);
  padding: 4px 14px;
  margin: 12px 0 4px;
}
.waiver-row { display: flex; justify-content: space-between; align-items: baseline; padding: 8px 0; }
.waiver-row:not(:last-child) { border-bottom: 1px dashed var(--border); }
.waiver-row .wr-label { font-size: 13px; color: var(--ink-soft); }
.waiver-row .wr-value { font-size: 15px; font-weight: 700; color: var(--ink); }
.waiver-row.waived .wr-label { color: var(--ink-faint); }
.waiver-row.waived .wr-value { color: var(--ink-faint); text-decoration: line-through; font-weight: 600; }

/* ---------- Sticky CTA: pinned to the viewport bottom (not the page),
   so "Pay now" is reachable on first view without scrolling, regardless
   of how tall the content above it is. The outer wrap spans the full
   viewport width so it can center itself the same way body does for
   .page-root; the inner cta-row is capped to that same max-width. ---------- */
.sticky-cta-wrap {
  position: fixed;
  left: 0; right: 0; bottom: 0;
  display: flex;
  justify-content: center;
  z-index: 15;
  pointer-events: none;
}
.cta-row {
  pointer-events: auto;
  width: 100%;
  max-width: 480px;
  display: flex;
  background: var(--bg-elevated);
  border-top: 1px solid var(--border);
  box-shadow: 0 -6px 20px rgba(20, 33, 43, 0.08);
  padding: 14px 20px max(14px, env(safe-area-inset-bottom));
}

.btn {
  border: none; border-radius: var(--radius-pill);
  font-weight: 700; font-size: 15px; cursor: pointer;
  padding: 14px 20px; display: flex; align-items: center; justify-content: center; gap: 6px;
  flex: 1 1 auto;
  text-decoration: none;
}
.btn-primary { background: var(--stage-color, var(--lender)); color: #fff; box-shadow: 0 8px 20px rgba(20,33,43,0.18); }
.btn-secondary { background: var(--bg-elevated); color: var(--ink); border: 1.5px solid var(--border); }
.btn:active { transform: scale(0.98); }
.btn:disabled { opacity: 0.45; cursor: not-allowed; }
.btn:disabled:active { transform: none; }

.secondary-cta-block { margin: 4px 20px 20px; }
.secondary-cta-block .btn { width: 100%; }

/* ---------- Quick-reply capture ---------- */
.capture-block {
  margin: 4px 20px 20px;
  background: var(--bg-elevated);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  padding: 18px;
}
.capture-block h3 { font-size: 14px; font-weight: 700; margin: 0 0 3px; color: var(--ink); }
.capture-block p.capture-sub { font-size: 12.5px; color: var(--ink-faint); margin: 0 0 14px; }
.quick-replies { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.qr-btn {
  border: 1.5px solid var(--border); background: var(--bg);
  border-radius: var(--radius-md); padding: 12px 10px;
  font-size: 12.5px; font-weight: 700; color: var(--ink-soft);
  cursor: pointer; text-align: center; line-height: 1.3;
}
.qr-btn:active { background: var(--lender-tint); border-color: var(--lender); color: var(--lender); }

.capture-ack {
  display: flex; align-items: center; gap: 10px;
  padding: 6px 2px;
}
.capture-ack .ack-icon {
  width: 32px; height: 32px; border-radius: 50%;
  background: var(--opportunity-tint); color: var(--opportunity);
  display: flex; align-items: center; justify-content: center; flex: 0 0 auto;
}
.capture-ack .ack-icon svg { width: 16px; height: 16px; }
.capture-ack p { margin: 0; font-size: 13.5px; color: var(--ink-soft); }
.capture-ack p b { color: var(--ink); }

.capture-instruction { font-size: 13px; color: var(--ink-soft); margin: 0 0 12px; }

.upload-dropzone {
  display: flex; flex-direction: column; align-items: center; gap: 8px;
  border: 1.5px dashed var(--border); border-radius: var(--radius-md);
  padding: 26px 16px; cursor: pointer; color: var(--ink-faint);
  margin-bottom: 12px;
}
.upload-dropzone svg { width: 24px; height: 24px; color: var(--lender); }
.upload-dropzone span { font-size: 13px; font-weight: 600; color: var(--ink-soft); }

.upload-preview { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.upload-thumb { width: 56px; height: 56px; border-radius: var(--radius-sm); object-fit: cover; box-shadow: var(--shadow-sm); flex: 0 0 auto; }
.upload-thumb-doc { display: flex; align-items: center; justify-content: center; background: var(--lender-tint); color: var(--lender); }
.upload-thumb-doc svg { width: 26px; height: 26px; }
.upload-filename { font-size: 13px; font-weight: 600; color: var(--ink); word-break: break-all; }

.date-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); font-size: 14px; font-family: inherit;
  color: var(--ink); margin-bottom: 12px; background: var(--bg-elevated);
}

/* 80% width, centered: leaves a margin of slack on both sides for iOS
   Safari's native datetime-local chrome, which can render itself wider
   than the box it's given (a WebKit quirk, not a layout bug — see the
   comment above the callback capture step in page.js). */
#callbackDateTimeInput { width: 80%; margin-left: auto; margin-right: auto; display: block; }

.cb-error {
  display: none; font-size: 12px; font-weight: 600; color: var(--warn);
  text-align: center; margin: -6px 0 12px;
}
.cb-error.visible { display: block; }

.qr-cancel {
  display: flex; align-items: center; justify-content: center; gap: 5px;
  width: 100%; text-align: center;
  border: none; background: none; color: var(--ink-faint);
  font-size: 12.5px; font-weight: 600; padding: 10px 0 0; cursor: pointer;
}
.qr-cancel svg { width: 13px; height: 13px; }

/* Submit inside the capture block: full-width primary, matching the CTA rows. */
.capture-block .btn { width: 100%; }

/* Back to the four options: pill in the block header, deliberately far
   from the Submit button so a mis-tap can't undo the flow. */
.capture-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.capture-head h3 { margin: 0; }
.capture-back {
  display: flex; align-items: center; gap: 4px; flex: 0 0 auto;
  border: 1.5px solid var(--border); background: var(--bg);
  border-radius: var(--radius-pill); padding: 6px 12px;
  font-size: 12px; font-weight: 700; color: var(--ink-soft);
  font-family: inherit; cursor: pointer;
}
.capture-back svg { width: 12px; height: 12px; }

.dispute-input {
  width: 100%; padding: 12px 14px; border-radius: var(--radius-md);
  border: 1.5px solid var(--border); font-size: 14px; font-family: inherit;
  color: var(--ink); margin-bottom: 12px; background: var(--bg-elevated);
  resize: vertical; min-height: 88px; line-height: 1.5;
}


/* ---------- Footer trust block ---------- */
.trust-footer {
  margin: 0 20px 10px;
  padding: 14px 4px 0;
  border-top: 1px solid var(--border);
  text-align: center;
}
.trust-footer p { font-size: 11px; color: var(--ink-faint); line-height: 1.6; margin: 0 0 6px; }

.powered-by { display: flex; flex-direction: column; align-items: center; gap: 6px; margin-top: 16px; }
.powered-by .pb-label { font-size: 10.5px; color: var(--ink-faint); font-weight: 600; }
.pb-logo-text { font-size: 12px; font-weight: 800; letter-spacing: 0.06em; color: var(--ink-soft); }
.pb-logo-text .pb-logo-ai { color: var(--opus); }

/* ---------- Modal-ish inline flow (Pay Now / Offer / Notice) ----------
   Unlike the base page (which scrolls with the real document), this is a
   true fixed, viewport-pinned takeover — like a bottom-sheet/modal — so it
   isn't affected by how tall the underlying page content happens to be. */
.overlay-panel {
  position: fixed; inset: 0;
  background: var(--bg);
  display: flex; flex-direction: column;
  z-index: 50;
}
.overlay-scroll { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.notice-pdf { flex: 1 1 auto; width: 100%; border: none; background: var(--bg); }
.overlay-scroll::-webkit-scrollbar { display: none; }
.overlay-top {
  flex: 0 0 auto; display: flex; align-items: center; gap: 12px;
  padding: 14px 20px 10px;
}
.overlay-top button {
  width: 34px; height: 34px; border-radius: 50%; border: none;
  background: var(--bg-elevated); box-shadow: var(--shadow-sm);
  display: flex; align-items: center; justify-content: center; cursor: pointer; color: var(--ink);
}
.overlay-top h2 { font-size: 16px; font-weight: 800; margin: 0; }

.pay-amount-block { text-align: center; padding: 18px 20px 6px; }
.pay-amount-block .label { font-size: 12.5px; color: var(--ink-faint); font-weight: 600; margin-bottom: 6px; }
.pay-amount-block .amount { font-size: 34px; font-weight: 800; letter-spacing: -0.02em; }
.pay-amount-block .sub { font-size: 12.5px; color: var(--ink-faint); margin-top: 6px; }

.method-row {
  display: flex; align-items: center; gap: 12px;
  padding: 15px 16px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border); cursor: pointer;
}
.method-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.method-row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.method-row .radio { width: 19px; height: 19px; border-radius: 50%; border: 2px solid var(--border); flex: 0 0 auto; }
.method-row.selected .radio { border-color: var(--lender); background: radial-gradient(var(--lender) 0 40%, transparent 41%); }
.method-row .m-text .t { font-size: 14px; font-weight: 700; }
.method-row .m-text .s { font-size: 12px; color: var(--ink-faint); }
.method-group { margin: 8px 20px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }

.success-block {
  flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center;
  padding: 24px 32px; text-align: center;
}
.success-block .check-circle {
  width: 80px; height: 80px; border-radius: 50%;
  background: var(--opportunity-tint); color: var(--opportunity);
  display: flex; align-items: center; justify-content: center; margin-bottom: 20px;
}
.success-block .check-circle svg { width: 36px; height: 36px; }
.success-block h2 { font-size: 20px; margin: 0 0 8px; }
.success-block p { font-size: 13.5px; color: var(--ink-soft); margin: 0 0 22px; line-height: 1.5; }
/* .btn's flex:1 1 auto is meant for horizontal button rows; inside this
   vertical flex column it would stretch the button's height to fill the
   whole block instead of its width. Pin it to content height, full width. */
.success-block .btn { flex: 0 0 auto; width: 100%; }

.footer-fixed { flex: 0 0 auto; padding: 12px 20px max(22px, env(safe-area-inset-bottom)); background: var(--bg-elevated); border-top: 1px solid var(--border); }

/* ---------- Language toggle (sits at the right edge of the case header) ---------- */
.lang-toggle { flex: 0 0 auto; display: flex; background: var(--bg-elevated); border-radius: var(--radius-pill); box-shadow: var(--shadow-sm); padding: 3px; gap: 2px; }
.lang-btn { border: none; background: none; padding: 6px 12px; border-radius: var(--radius-pill); font-size: 12px; font-weight: 700; color: var(--ink-faint); cursor: pointer; }
.lang-btn.active { background: var(--lender); color: #fff; }

/* ---------- Invalid / expired link ---------- */
.invalid-block { text-align: center; padding: 90px 32px 40px; display: flex; flex-direction: column; align-items: center; }
.invalid-block .invalid-icon {
  width: 52px; height: 52px; border-radius: 50%; margin-bottom: 16px;
  background: var(--warn-tint); color: var(--warn);
  display: flex; align-items: center; justify-content: center;
}
.invalid-block h1 { font-size: 20px; font-weight: 800; margin: 0 0 8px; }
.invalid-block p { font-size: 13.5px; color: var(--ink-faint); line-height: 1.6; margin: 0 0 22px; }
.invalid-block .btn { flex: 0 0 auto; width: auto; padding-left: 22px; padding-right: 22px; }

/* ---------- Loading (while the shortcode resolves against the API) ---------- */
.loading-block { display: flex; align-items: center; justify-content: center; padding: 140px 0; }
.loading-spinner {
  width: 34px; height: 34px; border-radius: 50%;
  border: 3px solid var(--border); border-top-color: var(--lender);
  animation: spin 0.8s linear infinite;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ---------- Case-level tabs (Overview / Activity / Documents) ---------- */
.case-tabs {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 12px 20px 4px;
  overflow-x: auto;
  flex: 0 0 auto;
}
.case-tabs::-webkit-scrollbar { display: none; }
.case-tab {
  border: none; background: var(--bg-elevated); color: var(--ink-soft);
  font-size: 13px; font-weight: 700; padding: 9px 16px;
  border-radius: var(--radius-pill); white-space: nowrap; cursor: pointer;
  box-shadow: var(--shadow-sm); flex-shrink: 0;
}
.case-tab.active { background: var(--lender); color: #fff; }

/* ---------- Activity timeline (per case, mirrors Daqi's pattern) ---------- */
.timeline { margin: 4px 20px 8px; }
/* API feed: breathing room below the tabs; title and date share one line. */
.timeline-feed { margin-top: 20px; }
.tl-content.tl-inline {
  display: flex; align-items: baseline; justify-content: space-between; gap: 10px;
  min-height: 26px; align-self: center; flex: 1 1 auto; min-width: 0;
}
.tl-content.tl-inline .tl-title { margin: 0; }
.tl-content.tl-inline .tl-date { font-size: 12px; color: var(--ink-faint); flex: 0 0 auto; }
.tl-day-label { font-size: 12px; font-weight: 700; color: var(--ink-faint); text-transform: uppercase; letter-spacing: 0.04em; margin: 16px 0 8px 4px; }
.tl-day-label:first-child { margin-top: 4px; }
.tl-item { display: flex; gap: 12px; padding-bottom: 16px; }
.tl-item:last-child { padding-bottom: 0; }
.tl-dot { width: 30px; height: 30px; border-radius: 50%; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.tl-dot svg { width: 14px; height: 14px; }
.tl-content .tl-title { font-size: 14px; font-weight: 700; margin: 0 0 2px; }
.tl-content .tl-desc { font-size: 12.5px; color: var(--ink-soft); margin: 0 0 2px; line-height: 1.4; }
.tl-content .tl-time { font-size: 11.5px; color: var(--ink-faint); }

/* ---------- Documents list ---------- */
.doc-row {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 16px; background: var(--bg-elevated);
  border-bottom: 1px solid var(--border);
  text-decoration: none; color: inherit; /* rows can be <a> download links */
}
.doc-row:first-child { border-radius: var(--radius-md) var(--radius-md) 0 0; }
.doc-row:last-child { border-radius: 0 0 var(--radius-md) var(--radius-md); border-bottom: none; }
.doc-row .d-icon { width: 36px; height: 36px; border-radius: 10px; background: var(--legal-tint); color: var(--legal); display: flex; align-items: center; justify-content: center; flex: 0 0 auto; }
.doc-row .d-icon svg { width: 17px; height: 17px; }
.doc-row .d-text { flex: 1 1 auto; min-width: 0; }
.doc-row .d-text .t { font-size: 13.5px; font-weight: 700; }
.doc-row .d-text .s { font-size: 11.5px; color: var(--ink-faint); }
.doc-row .d-download { width: 32px; height: 32px; border-radius: 50%; background: var(--bg); display: flex; align-items: center; justify-content: center; color: var(--ink-soft); flex: 0 0 auto; }
.doc-group { margin: 4px 20px 14px; border-radius: var(--radius-md); overflow: hidden; box-shadow: var(--shadow-md); }
.empty-note { padding: 30px 24px; text-align: center; font-size: 13px; color: var(--ink-faint); }