/*
  Premium re-skin for the report screen ONLY.
  Every rule here is scoped under #report, so #landing / #connection / .auth-*
  (the mygov sign-in screens) are completely unaffected — they keep the
  styles from styles.css exactly as they are.

  Mechanism: styles.css themes everything through CSS custom properties
  (--accent, --line, --surface, --fg, --muted, --h-*, ...). Re-declaring
  those same properties on #report overrides them only for its subtree,
  so every existing .panel/.button/.kv/.heat-* rule picks up the new
  palette automatically without being rewritten.
*/

#report {
  --surface: #ffffff;
  --surface-2: #f6f2e8;
  --fg: #1a231f;
  --muted: #6d6f63;
  --line: #e7e2d2;
  --accent: #0f5c50;
  --accent-deep: #093e35;
  --accent-soft: #e2efe7;
  --ok: #1f7a54;
  --ok-soft: #e3f1e7;
  --warn: #a8741f;
  --warn-soft: #f7edd9;
  --bad: #a1382c;
  --bad-soft: #f7e6e1;
  --h-none: #ece7d9;
  --h-0: #0f5c50;
  --h-30: #cf9a3a;
  --h-90: #c67f38;
  --h-180: #b85a35;
  --h-360: #9c3529;
  --h-360p: #64221b;
  --r-gold: #a1782c;
  --r-gold-soft: #f3ead2;

  color: var(--fg);
  font-family: "Inter", "Avenir Next", "Segoe UI", system-ui, sans-serif;
  gap: 24px;
}

#report h1, #report h2 { font-family: "Fraunces", "Avenir Next", serif; font-weight: 560; }

/* ---------- heading ---------- */
#report .report-heading { margin-bottom: 0; }
#report #report-heading-label { color: var(--accent); }
#report #who-name { font-size: clamp(26px, 3.6vw, 38px); letter-spacing: -0.5px; font-style: italic; }
#report .report-heading .muted { font-size: 13px; }
#report #print-report { font-family: "Inter", sans-serif; }

/* ---------- shared panel type ---------- */
#report .panel { border-radius: 20px; }
#report .panel h2 { font-size: 18px; letter-spacing: -0.2px; }
#report .hint { font-size: 13px; line-height: 1.6; }
#report .small-tag { font-size: 11.5px; padding: 7px 12px; font-family: "Inter", sans-serif; letter-spacing: 0.3px; }

/* ---------- historical banner ---------- */
#report .historical-banner strong { font-size: 13px; }
#report .historical-banner p { font-size: 12.5px; }

/* ---------- identity / key-value ---------- */
#report .identity-panel { padding: 20px 24px; }
#report .kv dt { font-size: 12px; letter-spacing: 0.2px; }
#report .kv dd { font-size: 14px; }

/* ---------- history ---------- */
#report .history-row strong { font-size: 13px; }
#report .history-row .history-dates { font-size: 11.5px; }
#report .history-row .history-total { font-size: 13px; }
#report .history-row .history-total small { font-size: 10.5px; }
#report .history-row .history-label { font-size: 9px; background: var(--r-gold-soft); color: var(--r-gold); }

/* ---------- alerts / warnings ---------- */
#report .alert { border-radius: 16px; }
#report .alert strong { font-size: 13px; }
#report .alert p { font-size: 12.5px; }
#report .warning { font-size: 12.5px; border-radius: 14px; }

/* ---------- hero: debt + gauge ---------- */
#report .report-hero { gap: 24px; }
#report .debt-panel { padding: 30px 30px 28px; position: relative; overflow: hidden; }
#report .debt-panel::before {
  content: ""; position: absolute; inset: 0 0 auto auto; width: 140px; height: 140px;
  background: radial-gradient(circle at 100% 0%, var(--accent-soft), transparent 70%); pointer-events: none;
}
#report .debt-panel > .hint {
  font-family: "Fraunces", serif; font-style: italic; font-size: 14px; color: var(--accent);
  text-transform: none; letter-spacing: 0.2px;
}
#report .debt-value {
  font-family: "Inter", sans-serif; font-weight: 700; font-size: clamp(32px, 5vw, 58px);
  letter-spacing: -1.5px; margin: 10px 0 4px; position: relative;
}
#report .debt-value small { font-size: 16px; }
#report #balance-note { font-size: 12.5px; }
#report .stats { gap: 20px 24px; margin-top: 26px; padding-top: 24px; }
#report .stats dt { font-size: 12px; letter-spacing: 0.2px; }
#report .stats dd { font-size: 20px; font-family: "Inter", sans-serif; font-weight: 700; }
#report .stats dd small { font-size: 11px; }

#report .gauge { padding: 28px; background: linear-gradient(165deg, var(--surface) 55%, var(--accent-soft) 130%); }
#report .gauge h2 { font-size: 14px; letter-spacing: 0; font-style: italic; }
#report .gauge svg { width: 230px; margin: 18px 0 6px; }
#report .gauge .gauge-fill { stroke: url(#kreditimGaugeGradient); }
#report .gauge .gauge-value { font-family: "Fraunces", serif; font-size: 42px; font-weight: 600; }
#report .gauge .gauge-cap { font-size: 11px; }
#report .gauge .verdict { font-size: 15px; font-weight: 700; color: var(--accent); }
#report .gauge .note { font-size: 12px; max-width: 34ch; }
#report .gauge .method { font-size: 11px; color: var(--muted); }

/* ---------- heat map ---------- */
#report .heat { border-spacing: 4px; min-width: 900px; }
#report .heat th { font-size: 11px; padding-bottom: 10px; }
#report .heat tbody .row-heading { font-size: 13px; }
#report .heat .row-heading span { font-size: 11px; }
#report .heat-cell { height: 32px; min-width: 30px; border-radius: 7px; font-size: 10.5px; font-weight: 700; }
#report .heat-3, #report .heat-4, #report .heat-5 { color: #fdf8ee; }
#report .legend { font-size: 12px; gap: 8px 16px; margin-top: 16px; }
#report .legend i { width: 12px; height: 12px; border-radius: 4px; }

/* ---------- controls / filters ---------- */
#report .seg { border-radius: 12px; padding: 4px; }
#report .seg button { font-size: 13px; padding: 9px 15px; font-family: "Inter", sans-serif; }
#report .search { font-size: 13.5px; padding: 12px 14px; border-radius: 12px; }

/* ---------- obligation groups ---------- */
#report .obligation-group + .obligation-group { margin-top: 22px; }
#report .obligation-group-label {
  display: flex; align-items: center; gap: 10px; margin: 0 0 12px;
  font-family: "Fraunces", serif; font-style: italic; font-size: 15px; color: var(--accent);
}
#report .obligation-group-label::after { content: ""; flex: 1; height: 1px; background: var(--line); }
#report .obligation-group-label span {
  font-family: "Inter", sans-serif; font-style: normal; font-weight: 700; font-size: 11px;
  color: var(--muted); background: var(--surface-2); padding: 2px 9px; border-radius: 999px;
}

/* ---------- obligation cards ---------- */
#report .obligation { border-radius: 16px; }
#report .obligation summary { padding: 18px 20px; min-height: 44px; }
#report .obligation-title strong { font-size: 13.5px; }
#report .obligation-title > span { font-size: 12px; }
#report .obligation-balance { font-size: 14.5px; }
#report .obligation-balance small { font-size: 11px; }
#report .pill { font-size: 10.5px; padding: 4px 9px; border-radius: 7px; font-family: "Inter", sans-serif; }
#report .pill-guarantee { background: var(--r-gold-soft); color: var(--r-gold); }
#report .obligation-body { padding: 4px 20px 22px; }
#report .repayment { height: 8px; border-radius: 6px; }
#report .repayment::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--r-gold)); border-radius: 6px; }
#report .repayment::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--r-gold)); border-radius: 6px; }

/* ---------- lenders ---------- */
#report .lender-name { font-size: 13.5px; }
#report .lender-count { font-size: 12.5px; }
#report .lender-row progress::-webkit-progress-value { background: linear-gradient(90deg, var(--accent), var(--r-gold)); }
#report .lender-row progress::-moz-progress-bar { background: linear-gradient(90deg, var(--accent), var(--r-gold)); }

/* ---------- footer note ---------- */
#report .report-foot { font-size: 12px; }

@media (max-width: 760px) {
  #report { gap: 18px; }
  #report .panel { padding: 22px 18px; border-radius: 18px; }
  #report #print-report { min-height: 44px; font-size: 12.5px; }
  #report .debt-panel { padding: 24px 22px; }
  #report .debt-value { font-size: 42px; }
  #report .gauge svg { width: 215px; }
  #report .obligation summary { min-height: 48px; }
  #report .heat-cell { height: 30px; min-width: 27px; }
}

@media (max-width: 420px) {
  #report .stats dd { font-size: 18px; }
  #report .debt-value { font-size: 36px; }
}

@media print {
  #report .obligation-group-label { color: #000; }
  #report .obligation-group-label::after { background: #ccc; }
}

.report-actions,.share-controls {display:flex;align-items:center;flex-wrap:wrap;gap:10px;}
.share-panel {padding:24px;margin-bottom:20px;}
.share-controls {margin:14px 0;}
.share-controls select,#share-url {border:1px solid var(--line);border-radius:9px;padding:12px;background:var(--surface-2);font:inherit;}
#share-url {display:block;width:100%;margin:10px 0;min-width:0;}
@media print {.report-actions,.share-panel {display:none !important;}}