/* Atlas Ledger — Harbour design tokens & base styles */
:root {
  --hb-bg: #F1F4F7;
  --hb-panel: #FFFFFF;
  --hb-ink: #0D1B2A;
  --hb-muted: #5D6C7E;
  --hb-faint: #93A1B1;
  --hb-line: #E2E8F0;
  --hb-line-soft: #ECF1F5;
  --hb-teal: #0B5D66;
  --hb-teal-deep: #07444B;
  --hb-teal-tint: #E1EEEF;
  --hb-green: #0E7A4D;
  --hb-green-tint: #E2F2EA;
  --hb-amber: #A95E08;
  --hb-amber-tint: #FBF0DC;
  --hb-red: #C0392B;
  --hb-red-tint: #FAE8E5;
  --hb-grot: "Schibsted Grotesk", "Noto Sans TC", sans-serif;
}

html, body { margin: 0; padding: 0; height: 100%; }
body {
  font-family: var(--hb-grot);
  background: var(--hb-bg);
  color: var(--hb-ink);
  -webkit-font-smoothing: antialiased;
}
* { box-sizing: border-box; }

.hb-num { font-variant-numeric: tabular-nums; letter-spacing: -.01em; }

.hb-label {
  font-size: 11px; letter-spacing: .16em; text-transform: uppercase;
  color: var(--hb-muted); font-weight: 600;
}

.hb-link { color: var(--hb-teal); font-weight: 600; cursor: pointer; text-decoration: none; }
.hb-link:hover { color: var(--hb-teal-deep); }

.hb-btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  background: var(--hb-teal); color: #fff; border: none; border-radius: 10px;
  font-family: var(--hb-grot); font-size: 14px; font-weight: 600;
  padding: 10px 18px; cursor: pointer; transition: background .15s;
}
.hb-btn:hover { background: var(--hb-teal-deep); }
.hb-btn.ghost {
  background: transparent; color: var(--hb-teal);
  border: 1px solid var(--hb-line); border-radius: 10px;
}
.hb-btn.ghost:hover { background: var(--hb-teal-tint); border-color: var(--hb-teal-tint); }
.hb-btn:disabled { opacity: .45; cursor: default; }

.hb-tag {
  display: inline-flex; align-items: center;
  font-size: 11px; font-weight: 700; border-radius: 6px; padding: 2.5px 8px;
}
.hb-tag.answer { background: var(--hb-amber-tint); color: var(--hb-amber); }
.hb-tag.sign { background: var(--hb-teal-tint); color: var(--hb-teal-deep); }
.hb-tag.confirm { background: #EDF1F5; color: var(--hb-muted); }
.hb-tag.green { background: var(--hb-green-tint); color: var(--hb-green); }
.hb-tag.red { background: var(--hb-red-tint); color: var(--hb-red); }

/* editorial rows (layout A) */
.hb-row { display: flex; align-items: center; border-bottom: 1px solid var(--hb-line); }
.hb-hairline { border: none; border-top: 1px solid var(--hb-line); margin: 0; }

/* page transitions — transform-only so a frozen animation never hides content */
.hb-page { animation: hbFade .22s ease; }
@media (prefers-reduced-motion: reduce) { .hb-page { animation: none; } }
@keyframes hbFade { from { transform: translateY(5px); } to { transform: none; } }

/* top nav */
.hb-nav-item {
  font-size: 14px; color: var(--hb-muted); font-weight: 500; cursor: pointer;
  border-bottom: 2px solid transparent; line-height: 60px; height: 61px;
  white-space: nowrap;
}
.hb-nav-item:hover { color: var(--hb-ink); }
.hb-nav-item.active { color: var(--hb-ink); font-weight: 600; border-bottom-color: var(--hb-teal); }

/* top nav row — scrolls on narrow screens but never shows a scrollbar */
.hb-topnav { overflow-x: auto; scrollbar-width: none; -ms-overflow-style: none; }
.hb-topnav::-webkit-scrollbar { display: none; }

/* chat thread — slim, unobtrusive scrollbar */
.hb-thread { scrollbar-width: thin; scrollbar-color: var(--hb-line) transparent; }
.hb-thread::-webkit-scrollbar { width: 6px; }
.hb-thread::-webkit-scrollbar-thumb { background: var(--hb-line); border-radius: 3px; }
.hb-thread::-webkit-scrollbar-track { background: transparent; }

/* responsive */
.hb-shell { width: min(1080px, calc(100vw - 64px)); margin: 0 auto; }
@media (max-width: 720px) {
  .hb-shell { width: calc(100vw - 40px); }
  .hb-desktop-only { display: none !important; }

  /* top bar: drop the nav onto its own full-width row so all 7 items are
     visible and scrollable instead of squeezed into a sliver beside the logo */
  .hb-topbar { flex-wrap: wrap; height: auto !important; row-gap: 0 !important; padding: 9px 0 0; }
  .hb-topbar .hb-topnav {
    order: 3; flex-basis: 100%; width: 100%;
    margin-left: 0 !important; margin-top: 7px; gap: 20px !important;
    border-top: 1px solid var(--hb-line-soft);
    /* fade the right edge to hint there's more nav to scroll to */
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 26px), transparent);
  }
  .hb-topbar .hb-nav-item { line-height: 45px; height: 46px; }

  /* home — cash hero: shrink the oversized figure and let the trend badge
     wrap to a second line instead of spilling off the right edge */
  .hb-cash-row { flex-wrap: wrap; }
  .hb-cash-num { font-size: 38px !important; }

  /* home — KPI band: stack into a single column so the column dividers and
     26px indents (meant for side-by-side cells) don't misalign the rows */
  .hb-kpi-band { flex-direction: column; }
  .hb-kpi-band .hb-kpi {
    flex: 1 1 auto !important; width: 100%;
    padding-left: 0 !important; border-left: none !important;
    border-top: 1px solid var(--hb-line); padding-top: 12px; padding-bottom: 12px;
  }
  .hb-kpi-band .hb-kpi:first-child { border-top: none; padding-top: 4px; }

  /* banking — "needs statement" row: let it grow past the fixed 60px and drop
     the Upload button onto its own full-width line so nothing wraps/overlaps */
  .hb-acct-row { height: auto !important; min-height: 60px; padding: 10px 0; flex-wrap: wrap; row-gap: 8px; }
  .hb-acct-upload { order: 3; flex-basis: 100%; margin: 2px 0 0 52px !important; justify-content: center; }
}