/* Calvin — "register ink on ruled paper". Tailwind (CDN) handles utilities; this file holds components. */
:root { --band:#1C2650; --ink:#23305E; --ink-soft:#4A5785; --ink-faint:#8A94B5; --paper:#F5F7FC; --rule:#D9DFEE; --surface:#FFFFFF;
        --credit:#1E7A4C; --debit:#B3261E; --marigold:#E9A825; --focus:#3B5BDB; }
.dark { --band:#0B1022; --ink:#E6E9F4; --ink-soft:#B4BCD6; --ink-faint:#7F89AB; --paper:#10162B; --rule:#2A3456; --surface:#18203A;
        --credit:#4CC38A; --debit:#FF8A80; --marigold:#F4C04E; --focus:#8EA6FF; }
[x-cloak] { display:none !important; }
html { -webkit-tap-highlight-color: transparent; }
body { font-feature-settings: "tnum" 1; }
:focus-visible { outline: 2px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; } }

/* Shell */
.topbar { position:sticky; top:0; z-index:20; display:flex; align-items:center; gap:.75rem; padding:.65rem 1rem;
  padding-top:max(.65rem, env(safe-area-inset-top)); background:var(--band); color:#F2F4FA;
  box-shadow:0 6px 20px -12px rgba(16,22,43,.6); }
.topbar .icon-btn { color:#C9D0E6; } .topbar .icon-btn:hover { background:rgba(255,255,255,.1); color:#fff; }
.topbar .role-pill { border-color:rgba(255,255,255,.28); color:#DDE2F1; }
.topbar .role-admin { background:var(--marigold); color:#1B2240; border-color:transparent; }
.topbar .monogram { background:#F2F4FA; color:var(--band); }
@media (min-width:1024px) {
  .topbar { position:static; padding:1rem 2.5rem 0; background:transparent; color:var(--ink); box-shadow:none; }
  .topbar .icon-btn { color:var(--ink-soft); } .topbar .icon-btn:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); }
  .topbar .role-pill { border-color:var(--rule); color:var(--ink-soft); }
  .topbar .role-admin { border-color:transparent; color:#1B2240; }
}
.monogram { display:inline-grid; place-items:center; width:2rem; height:2rem; border-radius:.6rem; background:var(--ink); color:var(--paper);
  font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:600; }
.icon-btn { display:inline-grid; place-items:center; width:2.75rem; height:2.75rem; border-radius:.75rem; color:var(--ink-soft); }
.icon-btn:hover { background:color-mix(in srgb, var(--ink) 7%, transparent); color:var(--ink); }
.role-pill { font-size:.75rem; font-weight:600; padding:.2rem .65rem; border-radius:999px; border:1px solid var(--rule); color:var(--ink-soft); white-space:nowrap; }
.role-admin { border-color:transparent; background:var(--marigold); color:#1B2240; }

/* Sidebar: a ledger book's thumb index. The active section is a paper tab joined to the page. */
.sidebar { display:none; }
@media (min-width:1024px) {
  .sidebar { display:flex; flex-direction:column; position:sticky; top:0; height:100vh; width:16.5rem; flex-shrink:0;
    padding:1.5rem 0 1.25rem .9rem; background:var(--band); color:#E4E8F4; overflow-y:auto; overflow-x:hidden; }
  .sidebar .monogram { background:#F2F4FA; color:var(--band); }
}
.side-link { position:relative; display:flex; align-items:center; gap:.75rem; padding:.62rem .9rem; margin-right:0;
  border-radius:.7rem 0 0 .7rem; font-size:.925rem; color:#B9C1DC; }
.side-link:hover { color:#fff; background:rgba(255,255,255,.06); }
.side-link.is-active { background:var(--paper); color:var(--ink); font-weight:600; }
.side-link.is-active::before, .side-link.is-active::after { content:""; position:absolute; right:0; width:1rem; height:1rem; pointer-events:none; }
.side-link.is-active::before { top:-1rem; background:radial-gradient(circle at 0 0, transparent 1rem, var(--paper) 1rem); }
.side-link.is-active::after { bottom:-1rem; background:radial-gradient(circle at 0 100%, transparent 1rem, var(--paper) 1rem); }
.side-group { margin:1.25rem .9rem .4rem; font-size:.75rem; font-weight:600; color:#8D97BC; }
.side-foot { margin-top:auto; margin-right:.9rem; padding:1rem .9rem 0; border-top:1px solid rgba(255,255,255,.12); font-size:.875rem; }
.side-foot a { color:#B9C1DC; } .side-foot a:hover { color:#fff; }

.tabbar { position:fixed; inset:auto 0 0 0; z-index:30; display:flex; justify-content:space-around; padding:.3rem .25rem;
  padding-bottom:max(.3rem, env(safe-area-inset-bottom)); background:var(--surface); border-top:1px solid var(--rule);
  box-shadow:0 -8px 24px -18px rgba(16,22,43,.5); }
@media (min-width:1024px) { .tabbar { display:none; } }
.tab { position:relative; flex:1; display:flex; flex-direction:column; align-items:center; gap:.15rem; min-height:3.3rem; justify-content:center;
  font-size:.7rem; font-weight:500; color:var(--ink-faint); border-radius:.75rem; }
.tab.is-active { color:var(--ink); font-weight:600; }
.tab.is-active::before { content:""; position:absolute; top:-.3rem; width:1.75rem; height:3px; border-radius:0 0 3px 3px; background:var(--ink); }
.tab.is-active svg { stroke-width:2.2; }
.sheet-backdrop { position:fixed; inset:0; background:rgba(16,22,43,.5); z-index:40; }
.sheet { position:fixed; inset:auto 0 0 0; z-index:50; background:var(--surface); border-radius:1.25rem 1.25rem 0 0; padding:.75rem 1rem;
  padding-bottom:max(1rem, env(safe-area-inset-bottom)); box-shadow:0 -12px 40px rgba(16,22,43,.25); }
.sheet-enter { transition: transform .22s ease-out; } .sheet-from { transform: translateY(100%); }
.sheet-item { display:flex; flex-direction:column; align-items:center; gap:.4rem; padding:.9rem .25rem; border-radius:.9rem; text-align:center;
  font-size:.8rem; color:var(--ink-soft); background:color-mix(in srgb, var(--ink) 4%, transparent); }
.sheet-item:active { background:color-mix(in srgb, var(--ink) 10%, transparent); }

/* Page */
.page-head { display:flex; flex-wrap:wrap; align-items:flex-end; justify-content:space-between; gap:.75rem; margin-bottom:1.25rem; }
.page-head:has(.page-title:empty) { display:none; }
.page-title { display:inline-block; font-size:1.5rem; line-height:1.2; font-weight:600; letter-spacing:-.015em; padding-bottom:.45rem;
  background: linear-gradient(var(--ink), var(--ink)) left bottom / 2.25rem 2px no-repeat,
              linear-gradient(var(--ink), var(--ink)) left calc(100% - 5px) / 2.25rem 2px no-repeat; }
.double-rule { border-bottom:3px double currentColor; padding-bottom:.1rem; }
@media (min-width:1024px) { .page-title { font-size:1.9rem; } }
.page-actions { display:flex; flex-wrap:wrap; gap:.5rem; }
.muted { color:var(--ink-soft); }
.faint { color:var(--ink-faint); }
.section-title { font-size:1.05rem; font-weight:600; margin-bottom:.75rem; }

/* Surfaces */
.panel { background:var(--surface); border:1px solid var(--rule); border-radius:1rem;
  box-shadow:0 1px 0 color-mix(in srgb, var(--rule) 60%, transparent), 0 12px 28px -22px rgba(28,38,80,.45); }
.dark .panel { box-shadow:none; }
.panel-pad { padding:1rem; } @media (min-width:640px) { .panel-pad { padding:1.25rem 1.5rem; } }

/* Ruled ledger lists: rows separated by ruling, like a register */
.ruled > * + * { border-top:1px solid var(--rule); }
.ruled-row { display:flex; align-items:center; gap:.75rem; padding:.8rem 1rem; }
a.ruled-row:hover { background:color-mix(in srgb, var(--ink) 3%, transparent); }

/* Money */
.amt { font-variant-numeric: tabular-nums; white-space:nowrap; font-weight:500; }
.amt-credit { color:var(--credit); } .amt-debit { color:var(--debit); }
.figure { font-family:"IBM Plex Sans Condensed",sans-serif; font-weight:600; letter-spacing:-.01em; font-variant-numeric:tabular-nums; }
.passbook { background-image: repeating-linear-gradient(to bottom, transparent 0 2.2rem, var(--rule) 2.2rem calc(2.2rem + 1px)); }

/* Status marks */
.mark { display:inline-flex; align-items:center; gap:.3rem; font-size:.75rem; font-weight:600; padding:.15rem .55rem; border-radius:.4rem; border:1.5px solid currentColor; white-space:nowrap; }
.mark-paid { color:var(--credit); } .mark-overdue { color:var(--debit); } .mark-review { color:#B7791F; } .dark .mark-review { color:var(--marigold); }
.mark-unpaid { color:var(--ink-soft); } .mark-closed { color:var(--ink-faint); } .mark-open { color:var(--credit); }
.attention { background:color-mix(in srgb, var(--marigold) 18%, transparent); border:1px solid color-mix(in srgb, var(--marigold) 60%, transparent); border-radius:.9rem; }

/* Controls */
.btn { display:inline-flex; align-items:center; justify-content:center; gap:.45rem; min-height:2.75rem; padding:.55rem 1rem; border-radius:.75rem;
  font-weight:600; font-size:.925rem; border:1px solid transparent; cursor:pointer; white-space:nowrap; }
.btn-primary { background:var(--ink); color:var(--paper); } .btn-primary:hover { filter:brightness(1.15); }
.btn-ghost { border-color:var(--rule); color:var(--ink); background:var(--surface); } .btn-ghost:hover { border-color:var(--ink-faint); }
.btn-danger { background:var(--debit); color:#fff; }
.btn-success { background:var(--credit); color:#fff; }
.btn-sm { min-height:2.25rem; padding:.35rem .75rem; font-size:.85rem; }
.btn[disabled] { opacity:.5; cursor:not-allowed; }
.sticky-action { position:sticky; bottom:5.25rem; z-index:10; } @media (min-width:1024px) { .sticky-action { position:static; } }

.field { display:block; margin-bottom:1rem; }
.field > span, .field-label { display:block; font-size:.875rem; font-weight:500; margin-bottom:.35rem; color:var(--ink); }
.input, .field input:not([type=checkbox]):not([type=radio]):not([type=file]), .field select, .field textarea {
  width:100%; min-height:2.9rem; padding:.6rem .8rem; border-radius:.7rem; border:1px solid var(--rule); background:var(--surface); color:var(--ink); font-size:1rem; }
.field textarea { min-height:6rem; }
.field input:focus, .field select:focus, .field textarea:focus, .input:focus { outline:none; border-color:var(--focus); box-shadow:0 0 0 3px color-mix(in srgb, var(--focus) 25%, transparent); }
.field input[type=file] { width:100%; font-size:.9rem; padding:.5rem; border:1px dashed var(--ink-faint); border-radius:.7rem; background:var(--surface); }
.field .help { font-size:.8rem; color:var(--ink-faint); margin-top:.3rem; }
.field .errorlist, .errorlist { color:var(--debit); font-size:.85rem; margin-top:.3rem; }
.check { display:flex; align-items:center; gap:.6rem; min-height:2.75rem; }
.check input { width:1.2rem; height:1.2rem; accent-color:var(--ink); }

/* Tables: real tables on wide screens, stacked rows on phones */
.tbl { width:100%; border-collapse:collapse; font-size:.925rem; }
.tbl th { text-align:left; font-weight:600; font-size:.8rem; color:var(--ink-soft); padding:.6rem 1rem; border-bottom:1px solid var(--rule); }
.tbl td { padding:.7rem 1rem; border-bottom:1px solid var(--rule); vertical-align:top; }
.tbl tr:last-child td { border-bottom:0; }
.tbl .num { text-align:right; }
@media (max-width:639px) {
  .tbl-stack thead { display:none; }
  .tbl-stack, .tbl-stack tbody, .tbl-stack tr, .tbl-stack td { display:block; width:100%; }
  .tbl-stack tr { padding:.6rem 1rem; border-bottom:1px solid var(--rule); }
  .tbl-stack tr:last-child { border-bottom:0; }
  .tbl-stack td { border:0; padding:.15rem 0; display:flex; justify-content:space-between; gap:1rem; }
  .tbl-stack td[data-label]::before { content:attr(data-label); color:var(--ink-faint); font-size:.8rem; }
  .tbl-stack .num { text-align:right; }
}

.thumb { width:3rem; height:3rem; object-fit:cover; border-radius:.6rem; border:1px solid var(--rule); cursor:zoom-in; }
.lightbox { position:fixed; inset:0; z-index:60; background:rgba(8,11,22,.88); display:grid; place-items:center; padding:1rem; }
.lightbox img { max-width:100%; max-height:90vh; border-radius:.75rem; }

.messages > * { margin-bottom:.75rem; padding:.75rem 1rem; border-radius:.75rem; font-size:.925rem; border:1px solid var(--rule); background:var(--surface); }
.msg-success { border-color:color-mix(in srgb, var(--credit) 50%, transparent) !important; }
.msg-error { border-color:color-mix(in srgb, var(--debit) 50%, transparent) !important; color:var(--debit); }

.tabs { display:flex; gap:.25rem; overflow-x:auto; scrollbar-width:none; border-bottom:1px solid var(--rule); margin-bottom:1rem; }
.tabs::-webkit-scrollbar { display:none; }
.tab-btn { padding:.6rem .9rem; font-size:.9rem; font-weight:500; color:var(--ink-soft); border-bottom:2px solid transparent; white-space:nowrap; }
.tab-btn.is-active { color:var(--ink); border-color:var(--ink); }
.chip { display:inline-flex; align-items:center; min-height:2.25rem; padding:.3rem .8rem; border-radius:999px; border:1px solid var(--rule); font-size:.85rem; color:var(--ink-soft); background:var(--surface); white-space:nowrap; }
.chip.is-active { background:var(--ink); color:var(--paper); border-color:var(--ink); }

@media print {
  .sidebar, .tabbar, .topbar, .no-print, .page-actions { display:none !important; }
  body { background:#fff !important; color:#000 !important; }
  .panel { border-color:#ccc; }
}

/* Scrollable tab strip: fade the trailing edge so phones show there is more */
@media (max-width:1023px) { .tabs { -webkit-mask-image:linear-gradient(to right, #000 82%, transparent); mask-image:linear-gradient(to right, #000 82%, transparent); padding-right:2rem; } }
.field input[type=file]::file-selector-button { margin-right:.75rem; padding:.45rem .9rem; border-radius:.55rem; border:0;
  background:var(--ink); color:var(--paper); font-weight:600; font-family:inherit; cursor:pointer; }

/* Dues month grid */
.dot-cell { display:flex; align-items:center; justify-content:center; min-height:1.9rem; border-radius:.5rem; font-size:.7rem; font-weight:600; }
@media (min-width:640px) { .dot-cell { margin:0 auto; width:1.9rem; } }
.dot-paid { background:color-mix(in srgb, var(--credit) 85%, transparent); color:#fff; }
.dot-review { background:color-mix(in srgb, var(--marigold) 75%, transparent); color:#1B2240; }
.dot-unpaid { background:transparent; border:1.5px solid var(--ink-faint); color:var(--ink-soft); }
.dot-overdue { background:var(--debit); color:#fff; }
.dot-none { background:color-mix(in srgb, var(--ink) 6%, transparent); color:var(--ink-faint); }
.dot-key { display:inline-block; width:.7rem; height:.7rem; border-radius:.2rem; margin-right:.3rem; vertical-align:-1px; }
.dot-key.dot-unpaid { border-width:1.5px; }

/* Kanban */
.kcol { background:color-mix(in srgb, var(--ink) 4%, transparent); border-radius:1rem; padding:.6rem; min-height:8rem; }
.kcard { background:var(--surface); border:1px solid var(--rule); border-radius:.85rem; padding:.75rem .85rem; box-shadow:0 6px 16px -14px rgba(28,38,80,.5); }
@media (min-width:1024px) { .kcard { cursor:grab; } }
.kghost { opacity:.4; }
.kempty { padding:1.25rem .5rem; text-align:center; font-size:.85rem; color:var(--ink-faint); }

/* Minutes document */
.mom-head { display:flex; align-items:center; gap:.85rem; padding-bottom:1rem; border-bottom:3px double var(--rule); }
.mom-title { font-size:1.6rem; font-weight:600; line-height:1.2; letter-spacing:-.01em; margin-top:.2rem; }
.mom-section { margin-top:1.75rem; }
.mom-section h2 { font-size:1rem; font-weight:600; padding-bottom:.35rem; margin-bottom:.6rem; border-bottom:1px solid var(--rule); }
.mom-list { list-style:decimal; padding-left:1.4rem; display:grid; gap:.45rem; }
.mom-bullets { list-style:disc; }
.prose-calvin p { margin:.5rem 0; } .prose-calvin ul { list-style:disc; padding-left:1.3rem; } .prose-calvin ol { list-style:decimal; padding-left:1.3rem; }
.prose-calvin a { text-decoration:underline; } .prose-calvin strong { font-weight:600; }
@media print { .mom { font-size:11pt; } .panel { box-shadow:none !important; border:0 !important; padding:0 !important; } }
.legend-dot { display:inline-block; width:.7rem; height:.7rem; border-radius:.2rem; }

/* Dashboard hero: the balance written in a passbook */
.hero-balance { position:relative; overflow:hidden; border-radius:1.25rem; padding:1.4rem 1.25rem 1.1rem; color:#F2F4FA;
  background:
    repeating-linear-gradient(to bottom, transparent 0 2.4rem, rgba(255,255,255,.07) 2.4rem calc(2.4rem + 1px)),
    linear-gradient(160deg, #24316A 0%, var(--band) 70%);
  box-shadow:0 22px 40px -28px rgba(16,22,43,.9); }
@media (min-width:640px) { .hero-balance { padding:2rem 2rem 1.5rem; } }
.hero-balance::before { content:""; position:absolute; top:0; bottom:0; left:2.4rem; width:1px; background:rgba(255,138,128,.35); }
@media (max-width:639px) { .hero-balance::before { left:.85rem; } }
.hero-rule { border-bottom:4px double rgba(255,255,255,.75); padding-bottom:.15rem; }
.hero-mark { color:#7FE0B0; border-color:rgba(127,224,176,.6); }