/* Direction: Hisaab Kitaab — ivory paper, deep emerald, champagne gold, a refined serif wordmark */
/* Completed by the platform from the short form: both modes, every
   palette token, each text-on-ground pair at its floor. To restyle, write the
   short form again (the decisions in one :root) and it is completed again. */

:root {
  --canvas: #f8f3e6;
  --surface: #fffdf7;
  --surface-2: #efe8d4;
  --border: #ddd0b0;
  --border-strong: #aeaea4;
  --ink: #14211b;
  --muted: #526058;
  --accent: #0d5c46;
  --accent-hover: #0b4e3c;
  --accent-ink: #ffffff;
  --accent-text: #0a5440;
  --accent-strong: #0a4a38;
  --accent-soft: #e0eee4;
  --accent-border: #8eaf9e;
  --success: #1c7a4a;
  --success-ink: #ffffff;
  --success-soft: #dee4d3;
  --success-strong: #1a7044;
  --warning: #a15c07;
  --warning-ink: #ffffff;
  --warning-soft: #eee1cb;
  --warning-strong: #945506;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #f0dace;
  --danger-strong: #b3261e;
  --chart-1: #0d5c46;
  --chart-2: #187191;
  --chart-3: #4c3d8e;
  --chart-4: #953d6e;
  --chart-5: #7b3605;
  --chart-6: #6a6813;

  --font-display: "Manrope", system-ui, sans-serif;
  --font-body: "Inter", system-ui, sans-serif;
  --display-weight: 800;
  --display-tracking: -0.02em;
  --radius-card: 18px;
  --radius-btn: 12px;
  --radius-input: 12px;
  --x-pay: #1e7b4c;
  --x-band: #0a3b2d;
  --x-band-2: #12664d;
  --x-gold: #c9a44c;
  --x-gold-soft: #ecd9a2;
  --x-glow: #e2c16e5c;
  --x-on-photo: #fbf6e6;
  --font-mono: "JetBrains Mono Variable", ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  --font-sans: "Inter", system-ui, sans-serif;
  --eyebrow-tracking: 0.08em;
}

html[data-theme="dark"] {
  --canvas: #020d0a;
  --surface: #1b2523;
  --surface-2: #0f1916;
  --border: #252f2c;
  --border-strong: #4e5654;
  --ink: #f8f3e6;
  --muted: #96978e;
  --accent: #0d5c46;
  --accent-hover: #317462;
  --accent-ink: #ffffff;
  --accent-text: #6c9c90;
  --accent-strong: #5f9386;
  --accent-soft: #041e17;
  --accent-border: #073125;
  --success: #1c7a4a;
  --success-ink: #ffffff;
  --success-soft: #082518;
  --success-strong: #4e9871;
  --warning: #a15c07;
  --warning-ink: #ffffff;
  --warning-soft: #251e09;
  --warning-strong: #b6803e;
  --danger: #b3261e;
  --danger-ink: #ffffff;
  --danger-soft: #29130e;
  --danger-strong: #c9645e;
  --chart-1: #337962;
  --chart-2: #0791bd;
  --chart-3: #7e71c8;
  --chart-4: #b85d8d;
  --chart-5: #bd6531;
  --chart-6: #888704;
}

body { font-size: 17px; -webkit-tap-highlight-color: transparent; }
.print-only { display: none; }

/* ---------- brand ---------- */
.wordmark { font-family: "Cormorant Garamond", Georgia, "Times New Roman", serif; font-weight: 700; letter-spacing: 0.01em; line-height: 1; }

/* the dark emerald panel: sidebar, sign-in hero and every balance card */
.hk-side, .hk-hero, main [class*="--x-band"] {
  background:
    radial-gradient(120% 70% at 100% 0%, var(--x-glow), transparent 60%),
    linear-gradient(150deg, var(--x-band) 0%, var(--x-band-2) 135%);
  color: var(--x-on-photo);
}
main [class*="--x-band"] {
  border-color: color-mix(in srgb, var(--x-gold) 45%, transparent);
  box-shadow: 0 18px 40px -22px color-mix(in srgb, var(--x-band) 85%, transparent), inset 0 1px 0 color-mix(in srgb, var(--x-gold) 40%, transparent);
}
.hk-hero { background:
    radial-gradient(90% 60% at 90% 0%, var(--x-glow), transparent 65%),
    radial-gradient(70% 50% at 0% 100%, color-mix(in srgb, var(--x-gold) 14%, transparent), transparent 70%),
    linear-gradient(150deg, var(--x-band) 0%, var(--x-band-2) 140%); }
.hk-hero .wordmark { color: var(--x-gold-soft); }
.hk-hero svg { color: var(--x-gold); }

/* ---------- sidebar ---------- */
.hk-side { border-right: 1px solid color-mix(in srgb, var(--x-gold) 40%, transparent); view-transition-name: hk-side; }
.hk-brand { font-size: 2rem; color: var(--x-gold-soft); }
.hk-dim { color: color-mix(in srgb, var(--x-on-photo) 68%, transparent); }
.hk-eyebrow { font-size: 11px; font-weight: 700; letter-spacing: 0.1em; text-transform: uppercase; color: var(--x-gold); }
.hk-avatar { display: grid; place-items: center; flex: none; width: 2.5rem; height: 2.5rem; border-radius: 9999px; font-weight: 800; font-size: 0.9rem; letter-spacing: 0.02em; color: var(--x-band); background: linear-gradient(145deg, var(--x-gold-soft), var(--x-gold)); box-shadow: 0 0 0 2px color-mix(in srgb, var(--x-gold) 35%, transparent); }
.hk-avatar-sm { width: 2.25rem; height: 2.25rem; font-size: 0.8rem; }
.hk-avatar-lg { width: 3.5rem; height: 3.5rem; font-size: 1.15rem; }
.hk-biz { display: flex; align-items: center; gap: 0.75rem; padding: 0.7rem; border-radius: 14px; border: 1px solid color-mix(in srgb, var(--x-gold) 30%, transparent); background: color-mix(in srgb, var(--x-on-photo) 6%, transparent); transition: background-color .18s, transform .18s; }
.hk-biz:hover { background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); transform: translateY(-1px); }
.hk-link { display: flex; align-items: center; gap: 0.75rem; padding: 0.6rem 0.75rem; border-radius: 10px; font-size: 0.875rem; font-weight: 600; color: color-mix(in srgb, var(--x-on-photo) 82%, transparent); cursor: pointer; transition: background-color .18s, color .18s, transform .18s; }
.hk-link:hover { background: color-mix(in srgb, var(--x-on-photo) 10%, transparent); color: var(--x-on-photo); transform: translateX(2px); }
.hk-link:focus-visible, .hk-biz:focus-visible { outline: 2px solid var(--x-gold); outline-offset: 2px; }
.hk-link[aria-current] { background: color-mix(in srgb, var(--x-gold) 18%, transparent); color: var(--x-gold-soft); box-shadow: inset 3px 0 0 var(--x-gold); }
.hk-foot { border-top: 1px solid color-mix(in srgb, var(--x-gold) 30%, transparent); }
.hk-side .hk-cta { background: linear-gradient(145deg, var(--x-gold-soft), var(--x-gold)); color: var(--x-band); border-color: transparent; }
.hk-side .hk-cta2 { background: transparent; color: var(--x-on-photo); border: 1px solid color-mix(in srgb, var(--x-gold) 55%, transparent); }
.hk-side .hk-cta2:hover { background: color-mix(in srgb, var(--x-gold) 16%, transparent); }
.hk-side .hk-theme { color: var(--x-on-photo); }
.hk-side .hk-theme:hover { background: color-mix(in srgb, var(--x-on-photo) 12%, transparent); }

/* ---------- phone chrome ---------- */
.hk-top { view-transition-name: hk-top; }
.hk-tabs { view-transition-name: hk-tabs; border-top-color: color-mix(in srgb, var(--x-gold) 45%, var(--border)); }
.hk-tab[aria-current] { box-shadow: inset 0 2px 0 var(--x-gold); }
.hk-fab { background: linear-gradient(150deg, var(--x-band-2), var(--x-band)); color: var(--x-on-photo); box-shadow: 0 0 0 3px var(--surface), 0 0 0 5px var(--x-gold), 0 10px 22px -8px color-mix(in srgb, var(--x-band) 80%, transparent); }

/* ---------- refined surfaces ---------- */
.card { border-color: color-mix(in srgb, var(--x-gold) 22%, var(--border)); box-shadow: 0 1px 0 color-mix(in srgb, var(--x-gold) 18%, transparent), 0 14px 28px -22px color-mix(in srgb, var(--ink) 40%, transparent); }
.btn { transition: transform .18s ease, box-shadow .18s ease, background-color .18s ease, border-color .18s ease; }
.btn:hover:not(:disabled) { transform: translateY(-1px); box-shadow: 0 8px 16px -10px color-mix(in srgb, var(--ink) 55%, transparent); }
.btn:active:not(:disabled) { transform: translateY(0); box-shadow: none; }
.hk-auth .hk-rise { max-width: 24rem; }

/* ---------- Desktop tables ---------- */
.dtable { width: 100%; border-collapse: collapse; font-size: 14px; }
.dtable th { text-align: left; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--muted); background: var(--surface-2); padding: 0.65rem 1rem; border-bottom: 1px solid var(--border); white-space: nowrap; }
.dtable td { padding: 0.7rem 1rem; border-bottom: 1px solid var(--border); vertical-align: top; }
.dtable tbody tr:last-child td { border-bottom: 0; }
.dtable tbody tr { transition: background-color .15s ease, box-shadow .15s ease; }
.dtable tbody tr:hover { background: var(--accent-soft); box-shadow: inset 3px 0 0 var(--x-gold); }
.dtable .num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.dtable a.cell { font-weight: 600; }
.dtable a.cell:hover { color: var(--accent-text); text-decoration: underline; }

/* link rows lift a little */
main a[class*="rounded-xl"][class*="border-border"] { transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease; }
main a[class*="rounded-xl"][class*="border-border"]:hover { transform: translateY(-2px); box-shadow: 0 12px 22px -16px color-mix(in srgb, var(--ink) 55%, transparent); border-color: var(--x-gold); }

/* Desktop density: pointer-sized controls instead of thumb-sized ones */
@media (min-width: 1024px) {
  body { font-size: 15px; }
  main .input, main .select, dialog .input, dialog .select { height: 2.5rem; font-size: 0.9rem; }
  main .btn, dialog .btn { min-height: 2.5rem; font-size: 0.9rem; }
  main .btn-icon:not(.h-auto), dialog .btn-icon { width: 2.5rem; height: 2.5rem; }
  .item-row .btn-icon { align-self: end; }
  dialog.modal { max-width: 28rem; }
  .hk-auth .input { height: 3rem; font-size: 1rem; }
  .hk-auth .btn { min-height: 3rem; font-size: 1rem; }
}

/* ---------- motion ---------- */
@keyframes hk-rise { from { transform: translateY(16px); } }
@keyframes hk-pop { from { transform: translateY(14px) scale(0.96); opacity: 0.35; } }
@keyframes hk-fade { from { opacity: 0.2; } }

main > div > :not(dialog):not(.print-only) { animation: hk-rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
main > div > :nth-child(2) { animation-delay: .05s; }
main > div > :nth-child(3) { animation-delay: .1s; }
main > div > :nth-child(4) { animation-delay: .15s; }
main > div > :nth-child(5) { animation-delay: .2s; }
main > div > :nth-child(6) { animation-delay: .25s; }
main > div > :nth-child(n+7) { animation-delay: .3s; }
main section > .card, main .grid > .card, main section > a, main .space-y-2 > a { animation: hk-rise .6s cubic-bezier(.2,.7,.2,1) backwards; }
main section > .card:nth-child(1), main .grid > .card:nth-child(1) { animation-delay: .1s; }
main section > .card:nth-child(2), main .grid > .card:nth-child(2), main section > a:nth-child(2) { animation-delay: .16s; }
main section > .card:nth-child(3), main .grid > .card:nth-child(3), main section > a:nth-child(3) { animation-delay: .22s; }
main section > .card:nth-child(n+4), main .grid > .card:nth-child(n+4), main section > a:nth-child(n+4) { animation-delay: .28s; }
.hk-rise { animation: hk-rise .6s cubic-bezier(.2,.7,.2,1) backwards; }

dialog.modal[open] { animation: hk-pop .3s cubic-bezier(.2,.8,.2,1); }
dialog.modal[open]::backdrop { animation: hk-fade .3s ease-out; }

/* pages cross-fade as you move between them; the sidebar and bars stay put */
@view-transition { navigation: auto; }
::view-transition-old(root) { animation: .22s ease-out both hk-vt-out; }
::view-transition-new(root) { animation: .32s ease-out both hk-vt-in; }
@keyframes hk-vt-out { to { opacity: 0; } }
@keyframes hk-vt-in { from { opacity: 0; } }

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*), ::view-transition-old(*), ::view-transition-new(*) { animation: none !important; }
  *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; }
  .btn:hover, .hk-link:hover, .hk-biz:hover, main a[class*="rounded-xl"][class*="border-border"]:hover { transform: none !important; }
}
html.reduced-motion *, html.reduced-motion *::before, html.reduced-motion *::after { animation: none !important; transition: none !important; }
html.reduced-motion .btn:hover, html.reduced-motion .hk-link:hover, html.reduced-motion .hk-biz:hover, html.reduced-motion main a[class*="rounded-xl"][class*="border-border"]:hover { transform: none !important; }
html.reduced-motion::view-transition-group(*), html.reduced-motion::view-transition-old(*), html.reduced-motion::view-transition-new(*) { animation: none !important; }

/* Paper: A4, black on white whatever the screen theme */
@page { size: A4; margin: 14mm; }
@media print {
  :root, html[data-theme="dark"] {
    --canvas: white; --surface: white; --surface-2: white; --ink: black;
    --muted: black; --border: black; --x-band: white; --x-on-photo: black; --x-pay: black;
    --accent-soft: white; --accent-text: black;
  }
  *, *::before, *::after { animation: none !important; transition: none !important; box-shadow: none !important; }
  .no-print { display: none !important; }
  .print-only { display: block !important; }
  body { background: white !important; color: black !important; font-size: 12px; }
  main { padding: 0 !important; max-width: none !important; margin-left: 0 !important; }
  main > div { max-width: none !important; }
  main [class*="--x-band"], .card { background: none !important; box-shadow: none !important; }
  a { color: inherit; text-decoration: none; }
  .pstmt { color: black; }
  .pstmt .dtable { font-size: 11.5px; }
  .pstmt .dtable th { background: none; color: black; border-bottom: 1.5px solid black; padding: 0.35rem 0.5rem; }
  .pstmt .dtable td { padding: 0.3rem 0.5rem; border-bottom: 1px solid gray; }
  .pstmt .dtable tbody tr:hover { background: none; }
  .pstmt .dtable tbody tr:last-child td { border-bottom: 0; }
  .pstmt .dtable tbody tr.font-bold td { border-top: 1.5px solid black; }
  .pstmt thead { display: table-header-group; }
  .pstmt tr { break-inside: avoid; }
}