/* ── FONTS ───────────────────────────────────────────── */
@import url('https://fonts.googleapis.com/css2?family=EB+Garamond:ital,wght@0,400;0,500;0,600;1,400&family=JetBrains+Mono:wght@400;500&family=DM+Sans:wght@300;400;500&display=swap');

/* ── Reset ───────────────────────────────────────────── */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{font-size:15px}

/* ── Tokens ──────────────────────────────────────────── */
:root{
  --ink:          #1a1714;
  --ink-2:        #3d3830;
  --ink-3:        #7a7268;
  --rule:         #d8d2c8;
  --rule-light:   #ede9e3;
  --parchment:    #f7f4ef;
  --cream:        #faf8f5;

  --p-color:      #1e3a5f;
  --p-light:      #e8eff7;
  --p-mid:        #4a7fb5;

  --r-color:      #5f1e1e;
  --r-light:      #f7e8e8;
  --r-mid:        #b54a4a;

  --debt-accent:  #c0392b;
  --community:    #2d6a4f;

  --sidebar-bg:   #1a1714;
  --sidebar-border: rgba(255,255,255,0.08);

  /* legacy aliases for components that use old names */
  --ink2:      var(--ink-2);
  --ink3:      var(--ink-3);
  --paper:     var(--parchment);
  --surface:   var(--cream);
  --rule2:     var(--rule-light);
  --gold:      #c9a227;
  --gold-lt:   #fdf8ec;
  --blue:      var(--p-color);
  --blue-lt:   var(--p-light);
  --green:     var(--community);
  --green-bg:  #f0fdf4;
  --green-bd:  #86efac;
  --amber-bg:  #fffbeb;
  --amber-bd:  #fcd34d;
  --amber-ink: #78350f;
  --red:       var(--r-color);
  --r:         10px;
  --r-sm:      6px;
  --shadow-sm: 0 1px 2px rgba(0,0,0,.06);
  --shadow:    0 2px 8px rgba(0,0,0,.08), 0 1px 3px rgba(0,0,0,.06);
  --shadow-lg: 0 8px 24px rgba(0,0,0,.10), 0 2px 8px rgba(0,0,0,.06);
}

body{
  font-family: 'DM Sans', system-ui, sans-serif;
  background: var(--parchment);
  color: var(--ink);
  line-height:1.6;
  min-height:100vh;
}

/* ── Shell Layout ────────────────────────────────────── */
.shell{
  display:grid;
  grid-template-columns:260px 1fr;
  min-height:100vh;
}
@media(max-width:780px){
  .shell{grid-template-columns:1fr}
}

/* ── Sidebar ─────────────────────────────────────────── */
.sidebar{
  background: var(--sidebar-bg);
  color:#e8e8e4;
  display:flex;
  flex-direction:column;
  padding:32px 24px;
  position:sticky;
  top:0;
  height:100vh;
  overflow:hidden;
  border-color: var(--sidebar-border);
}
@media(max-width:780px){
  .sidebar{
    position:static;
    height:auto;
    padding:20px;
    flex-direction:row;
    align-items:center;
    gap:16px;
  }
  .sidebar-desc,.sidebar-footer,.steps-nav{display:none}
}

.sidebar .border-bottom,
.sidebar .border-top,
.sidebar .border-end {
  border-color: var(--sidebar-border) !important;
}

.sidebar-top{margin-bottom:40px}

/* Logo wrap */
.logo-wrap {
  background: var(--cream);
  padding: 6px 8px;
  border-radius: 8px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid var(--rule-light);
  width: 44px;
  height: 44px;
}

.logo-wrap img {
  height: 24px;
  width: auto;
  display: block;
}

.logo{
  display:flex;
  align-items:center;
  gap:10px;
  margin-bottom:14px;
}
.logo-icon{font-size:1.4rem;line-height:1}
.logo-text{
  font-family: 'EB Garamond', serif;
  font-size:1.2rem;
  color:#fff;
  letter-spacing:-.01em;
  font-weight: 500;
}

/* Sidebar brand */
.sidebar-brand-title {
  font-family: 'EB Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: #fff;
  line-height: 1.2;
}

.sidebar-desc{
  font-size:12px;
  color: rgba(255,255,255,0.25);
  line-height:1.6;
}

/* FL-142 badge in sidebar */
.sidebar .badge.bg-primary {
  background: rgba(74,127,181,0.25) !important;
  color: var(--p-mid) !important;
  border: 1px solid rgba(74,127,181,0.4);
  font-family: 'JetBrains Mono', monospace;
  font-size: .65rem;
  letter-spacing: .1em;
}

.steps-nav{
  display:flex;
  flex-direction:column;
  gap:4px;
  flex:1;
}
.step-link{
  display:flex;
  align-items:center;
  gap:12px;
  padding:10px 12px;
  border-radius:var(--r-sm);
  cursor:default;
  transition:background .15s;
}
.step-link.active{background:rgba(255,255,255,.08)}
.step-num{
  font-size:11px;
  font-weight:600;
  letter-spacing:.08em;
  color: rgba(255,255,255,0.25);
  min-width:20px;
}
.step-link.active .step-num{color:var(--gold)}
.step-label{
  font-size:13px;
  color: rgba(255,255,255,0.45);
  font-weight:500;
  font-family: 'JetBrains Mono', monospace;
}
.step-link.active .step-label{color:#e8e8e4}

/* Nav links */
.sidebar .nav-link {
  font-family: 'JetBrains Mono', monospace;
  font-size: .75rem;
  color: rgba(255,255,255,0.45) !important;
  padding: .3rem 1rem;
  transition: color .15s, background .15s;
}

.sidebar .nav-link:hover {
  color: #fff !important;
  background: rgba(255,255,255,.06) !important;
}

.nav-section {
  font-family: 'DM Sans', sans-serif;
  font-size: .6rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: rgba(255,255,255,0.25) !important;
  padding: .65rem 1rem .2rem;
}

/* Party form inputs */
.sidebar input.form-control {
  background: rgba(255,255,255,.05) !important;
  border-color: rgba(255,255,255,.12) !important;
  color: #fff !important;
  font-size: .82rem;
  border-radius: 4px;
}
.sidebar input.form-control::placeholder { color: rgba(255,255,255,.2); }
.sidebar input.form-control:focus {
  border-color: var(--p-mid) !important;
  box-shadow: 0 0 0 2px rgba(74,127,181,.2);
  background: rgba(255,255,255,.08) !important;
}
.sidebar .form-label {
  color: rgba(255,255,255,.4);
  font-size: .65rem;
  text-transform: uppercase;
  letter-spacing: .08em;
  margin-bottom: .25rem;
}

/* Sidebar buttons */
.sidebar .btn-outline-primary {
  border-color: rgba(74,127,181,.4);
  color: var(--p-mid);
  font-size: .78rem;
}
.sidebar .btn-outline-primary:hover {
  background: rgba(74,127,181,.2);
  border-color: rgba(74,127,181,.6);
  color: #7fb9e8;
}
.sidebar .btn-outline-danger {
  border-color: rgba(192,57,43,.3);
  color: rgba(192,57,43,.6);
  font-size: .78rem;
}
.sidebar .btn-outline-danger:hover {
  background: rgba(192,57,43,.15);
  border-color: var(--debt-accent);
  color: #e07070;
}

/* Item count badges in sidebar nav */
.sidebar .badge.bg-secondary {
  background: rgba(255,255,255,.12) !important;
  color: rgba(255,255,255,.5) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
}
.sidebar .badge.bg-danger {
  background: rgba(192,57,43,.25) !important;
  color: #e07070 !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .6rem;
}
.sidebar .nav-link .opacity-50 {
  font-family: 'JetBrains Mono', monospace;
}

.sidebar-footer{
  font-size:11px;
  color: rgba(255,255,255,0.25);
  line-height:1.6;
  border-top:1px solid rgba(255,255,255,.06);
  padding-top:20px;
  margin-top:auto;
}

/* Mobile navbar */
.navbar.bg-dark {
  background: var(--sidebar-bg) !important;
  border-bottom: 1px solid var(--sidebar-border);
}
.navbar-brand { font-family: 'DM Sans', sans-serif; font-size: .9rem; }

/* ── Main ────────────────────────────────────────────── */
.main{
  padding:40px 48px 80px;
  max-width:760px;
}
@media(max-width:900px){.main{padding:32px 24px 60px}}

/* ── Topbar ──────────────────────────────────────────── */
.topbar{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:16px;
  margin-bottom:36px;
  flex-wrap:wrap;
}
.topbar h1{
  font-family: 'EB Garamond', serif;
  font-size:clamp(1.8rem,4vw,2.4rem);
  font-weight:500;
  letter-spacing:-.02em;
  line-height:1.1;
}
.topbar h1 em{
  font-style:italic;
  color:var(--gold);
}
.code-badge{
  font-size:11px;
  font-weight:600;
  letter-spacing:.06em;
  text-transform:uppercase;
  background:var(--gold-lt);
  color:var(--gold);
  border:1px solid #e8d08a;
  border-radius:20px;
  padding:4px 12px;
  white-space:nowrap;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Panel ───────────────────────────────────────────── */
.panel{padding:28px 0}

.panel-header{
  display:flex;
  gap:18px;
  align-items:flex-start;
  margin-bottom:24px;
}
.panel-num{
  font-family: 'EB Garamond', serif;
  font-size:2rem;
  color:var(--rule);
  line-height:1;
  min-width:32px;
  user-select:none;
}
.panel-header h2{
  font-size:1rem;
  font-weight:600;
  margin-bottom:4px;
  letter-spacing:-.01em;
  font-family: 'DM Sans', sans-serif;
}
.panel-header p{
  font-size:13px;
  color:var(--ink-2);
  line-height:1.5;
}
.optional{
  font-size:11px;
  font-weight:500;
  background:var(--rule-light);
  color:var(--ink-3);
  border-radius:4px;
  padding:1px 7px;
  vertical-align:middle;
  margin-left:6px;
  letter-spacing:.03em;
  text-transform:uppercase;
}

.divider{
  height:1px;
  background:var(--rule);
}

/* ── Child Picker ────────────────────────────────────── */
.child-picker{
  display:flex;
  align-items:center;
  gap:24px;
  margin-bottom:12px;
}
.btn-circle{
  width:44px;height:44px;
  border-radius:50%;
  border:1.5px solid var(--rule);
  background:var(--cream);
  font-size:20px;
  line-height:1;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;
  transition:border-color .15s, background .15s, box-shadow .15s;
  box-shadow:var(--shadow-sm);
}
.btn-circle:hover{
  border-color:var(--p-mid);
  background:var(--p-light);
  box-shadow:none;
}
.btn-circle:disabled{opacity:.35;cursor:not-allowed}
.child-display{
  display:flex;align-items:baseline;gap:8px;
}
#childNum{
  font-family: 'EB Garamond', serif;
  font-size:3rem;
  line-height:1;
  color:var(--ink);
}
.child-word{
  font-size:14px;
  color:var(--ink-3);
}
.multiplier-row{
  font-size:12px;
  color:var(--ink-3);
  margin-top:4px;
}
.multiplier-row strong{color:var(--p-mid)}

/* ── Custody UI ──────────────────────────────────────── */
.custody-ui{margin-top:4px}

.custody-bars{
  display:flex;
  border-radius:var(--r-sm);
  overflow:hidden;
  height:56px;
  margin-bottom:14px;
  box-shadow:var(--shadow-sm);
  border:1px solid var(--rule);
}
.cbar{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  transition:flex .3s cubic-bezier(.4,0,.2,1);
  min-width:0;
  padding:0 8px;
}
.p1-bar{
  background:var(--p-color);
  flex:30;
}
.p2-bar{
  background:var(--rule-light);
  flex:70;
}
.cbar-label{
  font-size:1.05rem;
  font-weight:700;
  color:rgba(255,255,255,.95);
  line-height:1;
  font-family: 'JetBrains Mono', monospace;
}
.p2-bar .cbar-label{color:var(--ink)}
.cbar-name{
  font-size:10px;
  font-weight:500;
  color:rgba(255,255,255,.65);
  letter-spacing:.04em;
  text-transform:uppercase;
  font-family: 'DM Sans', sans-serif;
}
.p2-bar .cbar-name{color:var(--ink-3)}

.slider{
  width:100%;
  -webkit-appearance:none;
  height:3px;
  border-radius:2px;
  background:linear-gradient(to right, var(--p-color) var(--pct,30%), var(--rule) var(--pct,30%));
  outline:none;
  margin-bottom:8px;
  cursor:pointer;
}
.slider::-webkit-slider-thumb{
  -webkit-appearance:none;
  width:22px;height:22px;
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--p-mid);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  cursor:pointer;
}
.slider::-moz-range-thumb{
  width:22px;height:22px;
  border-radius:50%;
  background:var(--cream);
  border:2px solid var(--p-mid);
  box-shadow:0 1px 4px rgba(0,0,0,.15);
  cursor:pointer;
}
.slider-ends{
  display:flex;justify-content:space-between;
  font-size:11px;color:var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
}

/* ── Two-up fields ───────────────────────────────────── */
.two-up{
  display:grid;
  grid-template-columns:1fr 1fr;
  gap:16px;
}
@media(max-width:540px){.two-up{grid-template-columns:1fr}}

.field{display:flex;flex-direction:column;gap:6px}
label{
  font-size:12px;
  font-weight:600;
  color:var(--ink-2);
  letter-spacing:.03em;
  text-transform:uppercase;
  font-family: 'DM Sans', sans-serif;
}

.money-input{
  display:flex;
  align-items:center;
  border:1.5px solid var(--rule);
  border-radius:var(--r-sm);
  background:var(--cream);
  box-shadow:var(--shadow-sm);
  overflow:hidden;
  transition:border-color .15s, box-shadow .15s;
}
.money-input:focus-within{
  border-color:var(--p-mid);
  box-shadow:0 0 0 3px rgba(74,127,181,.15);
}
.money-input > span:first-child{
  padding:0 12px;
  font-size:14px;
  color:var(--ink-3);
  background:var(--rule-light);
  border-right:1px solid var(--rule);
  line-height:42px;
  flex-shrink:0;
  font-family: 'JetBrains Mono', monospace;
}
.money-input input{
  border:none;outline:none;
  padding:10px 12px;
  font-size:15px;
  font-family: 'DM Sans', sans-serif;
  width:100%;
  background:transparent;
  color:var(--ink);
}
.money-input input::-webkit-inner-spin-button{opacity:0}
.money-input .unit{
  padding:0 12px;
  font-size:12px;
  color:var(--ink-3);
  background:var(--rule-light);
  border-left:1px solid var(--rule);
  line-height:42px;
  flex-shrink:0;
  font-family: 'JetBrains Mono', monospace;
}

/* ── Submit ──────────────────────────────────────────── */
.submit-btn{
  margin-top:32px;
  width:100%;
  padding:15px 24px;
  background:var(--ink);
  color:#fff;
  border:none;border-radius:var(--r);
  font-family: 'DM Sans', sans-serif;
  font-size:15px;font-weight:600;
  letter-spacing:.01em;
  cursor:pointer;
  display:flex;align-items:center;justify-content:center;gap:10px;
  transition:background .15s, transform .1s, box-shadow .15s;
  box-shadow:var(--shadow);
}
.submit-btn:hover{background:#2d2a26;box-shadow:var(--shadow-lg)}
.submit-btn:active{transform:scale(.99)}
.submit-btn:disabled{opacity:.5;cursor:not-allowed}

/* ── Spinner ─────────────────────────────────────────── */
.spinner{
  width:18px;height:18px;
  animation:spin .8s linear infinite;
  stroke:currentColor;
}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── Results ─────────────────────────────────────────── */
.results{
  margin-top:40px;
  animation:rise .4s cubic-bezier(.4,0,.2,1) both;
}
@keyframes rise{
  from{opacity:0;transform:translateY(16px)}
  to  {opacity:1;transform:translateY(0)}
}

.result-card{
  background:var(--cream);
  border:1.5px solid var(--rule);
  border-radius:var(--r);
  overflow:hidden;
  box-shadow:var(--shadow-lg);
  margin-bottom:20px;
}
.result-top{
  background:linear-gradient(135deg, var(--sidebar-bg) 0%, #1e2d4a 100%);
  padding:36px 32px 28px;
  text-align:center;
}
.result-label{
  font-size:11px;
  font-weight:600;
  letter-spacing:.1em;
  text-transform:uppercase;
  color:rgba(255,255,255,.5);
  margin-bottom:10px;
  font-family: 'DM Sans', sans-serif;
}
.result-amount{
  font-family: 'EB Garamond', serif;
  font-size:clamp(2.8rem,8vw,4rem);
  color:#fff;
  letter-spacing:-.03em;
  line-height:1;
  margin-bottom:10px;
}
.result-sub{
  font-size:14px;
  color:rgba(255,255,255,.6);
}
.result-sub strong{color:rgba(255,255,255,.9)}

.alert{
  margin:0 24px;
  padding:12px 16px;
  border-radius:var(--r-sm);
  font-size:13px;
  background:var(--amber-bg);
  border:1px solid var(--amber-bd);
  color:var(--amber-ink);
  margin-top:20px;
}

/* ── Breakdown Table ─────────────────────────────────── */
.breakdown-table{
  width:100%;
  border-collapse:collapse;
  margin-top:20px;
  font-size:.82rem;
  color:var(--ink);
}
.breakdown-table thead tr{
  background:var(--parchment);
}
.breakdown-table th{
  padding:10px 20px;
  text-align:left;
  font-size:11px;
  font-weight:600;
  letter-spacing:.05em;
  text-transform:uppercase;
  color:var(--ink-3);
  font-family: 'DM Sans', sans-serif;
  border-bottom-color: var(--rule-light) !important;
}
.breakdown-table th:last-child{text-align:right}
.breakdown-table td{
  padding:11px 20px;
  font-size:13px;
  border-top:1px solid var(--rule-light);
  color:var(--ink-2);
}
.breakdown-table td:first-child{
  font-weight:600;
  color:var(--ink);
  font-size:12px;
  letter-spacing:.02em;
  white-space:nowrap;
  font-family: 'DM Sans', sans-serif;
}
.breakdown-table td:nth-child(2){color:var(--ink-3);font-size:12px}
.breakdown-table td:last-child{
  text-align:right;
  font-family: 'JetBrains Mono', monospace;
  font-weight:600;
  font-variant-numeric:tabular-nums;
  color:var(--ink);
}
.breakdown-table tr.hl td{
  background:var(--p-light);
  color:var(--p-color) !important;
  font-weight:700 !important;
}

.formula-strip{
  padding:14px 20px;
  background:var(--parchment);
  font-size:12px;
  color:var(--ink-3);
  border-top:1px solid var(--rule-light);
  text-align:center;
}
.formula-strip code{
  font-family: 'JetBrains Mono', monospace;
  font-size:12px;
  color:var(--ink);
  background:rgba(0,0,0,.04);
  padding:2px 6px;
  border-radius:3px;
}

/* ── Cards ───────────────────────────────────────────── */
.card {
  border-color: var(--rule) !important;
  border-radius: 6px;
  background: var(--cream);
  box-shadow: 0 1px 3px rgba(0,0,0,.05);
}
.card.border-primary.border-2 { border-color: var(--p-color) !important; }
.card.border-danger.border-2  { border-color: var(--r-color) !important; }
.card.border-success.border-2 { border-color: var(--community) !important; }
.card.border-warning.border-2 { border-color: #c9a227 !important; }

/* Summary labels */
.card .text-uppercase.text-primary { color: var(--p-color) !important; font-family: 'DM Sans', sans-serif; font-size: .7rem; letter-spacing: .08em; }
.card .text-uppercase.text-danger  { color: var(--r-color) !important; font-family: 'DM Sans', sans-serif; font-size: .7rem; letter-spacing: .08em; }
.card .text-uppercase.text-muted   { font-family: 'DM Sans', sans-serif; font-size: .7rem; letter-spacing: .08em; }

/* Summary big numbers */
.card .fs-4.fw-bold.text-primary  { font-family: 'EB Garamond', serif; font-size: 2rem !important; font-weight: 500 !important; color: var(--p-color) !important; }
.card .fs-4.fw-bold.text-danger   { font-family: 'EB Garamond', serif; font-size: 2rem !important; font-weight: 500 !important; color: var(--r-color) !important; }
.card .fs-4.fw-bold.text-success  { font-family: 'EB Garamond', serif; font-size: 2rem !important; font-weight: 500 !important; color: var(--community) !important; }
.card .fs-4.fw-bold.text-warning-emphasis { font-family: 'EB Garamond', serif; font-size: 2rem !important; font-weight: 500 !important; color: #8a6a00 !important; }

.card .x-small { font-family: 'JetBrains Mono', monospace; font-size: .68rem !important; color: var(--ink-3); }

/* ── Section Headers ─────────────────────────────────── */
.card-header {
  background: var(--parchment) !important;
  border-bottom-color: var(--rule-light) !important;
}
.card-header .badge.bg-light {
  background: var(--rule-light) !important;
  color: var(--ink-3) !important;
  border-color: var(--rule) !important;
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
  min-width: 28px;
}
.card.border-danger-subtle > .card-header {
  background: #fdf5f5 !important;
  border-color: #e8c9c9 !important;
}
.card.border-danger-subtle > .card-header .badge {
  font-family: 'JetBrains Mono', monospace;
  font-size: .72rem;
}
.card-header .fw-semibold.small {
  font-family: 'DM Sans', sans-serif;
  font-size: .82rem !important;
  color: var(--ink);
}
.card-header .font-monospace.text-muted {
  font-family: 'JetBrains Mono', monospace;
  font-size: .78rem;
  color: var(--ink-3) !important;
}
.card-header .btn-primary {
  background: var(--ink) !important;
  border-color: var(--ink) !important;
  font-size: .75rem;
  border-radius: 4px;
}
.card-header .btn-primary:hover { opacity: .75; }
.card.border-danger-subtle .card-header .btn-danger {
  background: var(--debt-accent) !important;
  border-color: var(--debt-accent) !important;
  font-size: .75rem;
  border-radius: 4px;
}
h6.text-uppercase.text-muted.fw-bold {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem !important;
  letter-spacing: .1em;
  color: var(--ink-3) !important;
}

/* ── Info Card ───────────────────────────────────────── */
.info-card{
  background:var(--cream);
  border:1.5px solid var(--rule);
  border-radius:var(--r);
  padding:24px 28px;
  box-shadow:var(--shadow-sm);
}
.info-card h3{
  font-family: 'EB Garamond', serif;
  font-size:1.15rem;
  font-weight:500;
  margin-bottom:10px;
  color:var(--ink);
}
.info-card p{
  font-size:13px;
  color:var(--ink-2);
  margin-bottom:10px;
  line-height:1.6;
}
.info-card ul{
  list-style:none;
  margin-bottom:14px;
}
.info-card ul li{
  font-size:13px;
  color:var(--ink-2);
  padding:5px 0 5px 20px;
  position:relative;
  border-top:1px solid var(--rule-light);
}
.info-card ul li::before{
  content:"→";
  position:absolute;left:0;
  color:var(--gold);font-size:12px;
}
.info-note{
  font-size:12px;
  background:var(--amber-bg);
  border:1px solid var(--amber-bd);
  color:var(--amber-ink);
  border-radius:var(--r-sm);
  padding:10px 14px;
  line-height:1.5;
}

/* ── Tables ──────────────────────────────────────────── */
.table {
  --bs-table-bg: var(--cream);
  --bs-table-hover-bg: rgba(0,0,0,.018);
  font-size: .82rem;
  color: var(--ink);
}
.table thead th {
  font-family: 'DM Sans', sans-serif;
  font-size: .65rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: .07em;
  color: var(--ink-3);
  background: var(--parchment);
  border-bottom-color: var(--rule-light) !important;
}
.table-light {
  --bs-table-bg: var(--parchment);
  --bs-table-color: var(--ink-3);
}
.table td { border-color: var(--rule-light) !important; }
.table th { border-color: var(--rule-light) !important; }
.table .fw-semibold { font-family: 'DM Sans', sans-serif; font-weight: 500; }
.table .font-monospace { font-family: 'JetBrains Mono', monospace; font-size: .78rem; }
.table tfoot .fw-bold.font-monospace { color: var(--ink); }
.table .text-danger.font-monospace { color: var(--debt-accent) !important; }
.table [style*=".7rem"] { font-family: 'JetBrains Mono', monospace; color: var(--ink-3); }
.fst-italic.text-muted { color: var(--ink-3) !important; font-size: .8rem; }

/* ── Assignment Dropdown ─────────────────────────────── */
.table .form-select {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  border-color: var(--rule);
  background-color: var(--cream);
  color: var(--ink);
  border-radius: 4px;
  padding: .25rem .5rem;
}
.table .form-select:focus {
  border-color: var(--p-mid);
  box-shadow: 0 0 0 2px rgba(74,127,181,.15);
}

/* ── Edit / Delete Buttons ───────────────────────────── */
.table .btn-outline-secondary {
  border-color: var(--rule);
  color: var(--ink-3);
  border-radius: 3px;
}
.table .btn-outline-secondary:hover {
  background: var(--rule-light);
  border-color: var(--rule);
  color: var(--ink);
}
.table .btn-outline-danger {
  border-color: rgba(192,57,43,.25);
  color: rgba(192,57,43,.55);
  border-radius: 3px;
}
.table .btn-outline-danger:hover {
  background: var(--r-light);
  border-color: var(--debt-accent);
  color: var(--debt-accent);
}

/* ── Character Badges ────────────────────────────────── */
.badge.bg-success-subtle {
  background: #e8f5ee !important;
  color: var(--community) !important;
  border-color: rgba(45,106,79,.2) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
}
.badge.bg-primary-subtle {
  background: var(--p-light) !important;
  color: var(--p-color) !important;
  border-color: rgba(30,58,95,.2) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
}
.badge.bg-danger-subtle {
  background: var(--r-light) !important;
  color: var(--r-color) !important;
  border-color: rgba(95,30,30,.2) !important;
  font-family: 'DM Sans', sans-serif;
  font-size: .68rem;
}

/* ── Modals ──────────────────────────────────────────── */
.modal-content {
  border-color: var(--rule);
  border-radius: 8px;
  background: var(--cream);
}
.modal-header { border-bottom-color: var(--rule-light); }
.modal-header.bg-primary-subtle { background: var(--p-light) !important; }
.modal-header.bg-danger-subtle  { background: #fdf5f5 !important; }
.modal-title {
  font-family: 'EB Garamond', serif;
  font-size: 1.15rem;
  font-weight: 500;
  color: var(--ink);
}
.modal-footer {
  border-top-color: var(--rule-light);
  background: var(--parchment);
  border-radius: 0 0 8px 8px;
}
.modal-body .form-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .78rem;
  font-weight: 500;
  color: var(--ink-2);
}
.modal-body .form-control,
.modal-body .form-select {
  border-color: var(--rule);
  background: var(--cream);
  color: var(--ink);
  border-radius: 4px;
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
}
.modal-body .form-control:focus,
.modal-body .form-select:focus {
  border-color: var(--p-mid);
  box-shadow: 0 0 0 2px rgba(74,127,181,.15);
  background: #fff;
}
.modal-body .input-group-text {
  background: var(--rule-light);
  border-color: var(--rule);
  color: var(--ink-3);
  font-family: 'JetBrains Mono', monospace;
  font-size: .82rem;
}
.modal-body .form-check-label {
  font-family: 'DM Sans', sans-serif;
  font-size: .85rem;
  color: var(--ink-2);
}
.modal-body .form-check-input:checked {
  background-color: var(--p-color);
  border-color: var(--p-color);
}
.modal-footer .btn-outline-secondary {
  border-color: var(--rule);
  color: var(--ink-3);
}
.modal-footer .btn-outline-secondary:hover {
  background: var(--rule-light);
  color: var(--ink);
  border-color: var(--rule);
}
.modal-footer .btn-primary {
  background: var(--p-color) !important;
  border-color: var(--p-color) !important;
}
.modal-footer .btn-primary:hover { opacity: .85; }
.modal-footer .btn-danger {
  background: var(--debt-accent) !important;
  border-color: var(--debt-accent) !important;
}

/* ── HTMX Progress Bar ───────────────────────────────── */
#htmx-bar {
  background: linear-gradient(90deg, var(--p-mid) 0%, #8ec5f5 50%, var(--p-mid) 100%) !important;
}

/* ── Utils ───────────────────────────────────────────── */
.hidden{display:none!important}

/* Chevron in collapsible headers */
.card-header .bi-chevron-down { transition: transform .2s; }
.card-header[aria-expanded="false"] .bi-chevron-down { transform: rotate(-90deg); }

/* Scrollbar */
::-webkit-scrollbar { width: 5px; height: 5px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--rule); border-radius: 3px; }