/* Design system from reference-frontend.html - reused verbatim.
   Brand teal #579B8E, Poppins 400/500/600/700. No other accent colors. */
:root{
  --teal: #579B8E; --ink: #262626; --ink-soft: #5A5A5A; --paper: #FFFFFF;
  --bg: #F4F8F7; --hair: #DCE5E2; --danger: #B5484A; --warn-bg: rgba(87,155,142,0.10);
}
:root:not([data-theme="light"]){
  @media (prefers-color-scheme: dark){
    --paper: #1C2422; --bg: #121917; --ink: #EDEFEE; --ink-soft: #A9B4B1; --hair: #2C3634;
    --warn-bg: rgba(87,155,142,0.16);
  }
}
:root[data-theme="dark"]{
  --paper: #1C2422; --bg: #121917; --ink: #EDEFEE; --ink-soft: #A9B4B1; --hair: #2C3634;
  --warn-bg: rgba(87,155,142,0.16);
}
*{box-sizing:border-box;}
html,body{margin:0; padding:0; min-height:100%; background:var(--bg); color:var(--ink); font-family:'Poppins',system-ui,sans-serif;}
:root{padding-top:env(safe-area-inset-top,0px); padding-bottom:env(safe-area-inset-bottom,0px);}
html{scroll-padding-top:env(safe-area-inset-top,0px);}
.wrap{max-width:920px; margin:0 auto; padding:28px 20px 60px 20px;}
header{display:flex; align-items:center; gap:14px; margin-bottom:18px; flex-wrap:wrap;}
header img{height:46px; width:auto;}
header .title{font-size:19px; font-weight:700; color:var(--teal); line-height:1.25;}
header .sub{font-size:13px; color:var(--ink-soft); font-weight:500;}
.banner{background:var(--warn-bg); border:1px solid var(--hair); border-radius:12px; padding:12px 16px; margin-bottom:18px; font-size:13px; color:var(--ink); line-height:1.5;}
.card{background:var(--paper); border:1px solid var(--hair); border-radius:16px; padding:22px; margin-bottom:18px; box-shadow:0 2px 10px rgba(0,0,0,.04);}
.card h2{font-size:16px; font-weight:700; margin:0 0 4px 0; color:var(--ink);}
.card .hint{font-size:12.5px; color:var(--ink-soft); margin:0 0 16px 0; line-height:1.5;}
.btn{display:inline-flex; align-items:center; gap:6px; background:var(--teal); color:#fff; border:none; border-radius:10px; padding:10px 16px; font-family:inherit; font-size:13.5px; font-weight:600; cursor:pointer;}
.btn:hover{filter:brightness(0.94);}
.btn.ghost{background:transparent; color:var(--teal); border:1.5px solid var(--teal);}
.btn.small{padding:6px 11px; font-size:12px;}
.roster-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.roster-table th{text-align:left; font-size:11px; color:var(--ink-soft); font-weight:600; padding:0 8px 8px 4px; border-bottom:1px solid var(--hair);}
.roster-table td{padding:8px 8px 8px 4px; border-bottom:1px solid var(--hair); vertical-align:middle;}
.roster-table tr:last-child td{border-bottom:none;}
.roster-table input[type=text]{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); font-family:inherit; font-size:13px;}
.roster-table select{padding:8px 10px; border-radius:8px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); font-family:inherit; font-size:13px; width:100%;}
.roster-table .oblig{font-weight:700; color:var(--teal); white-space:nowrap; text-align:right;}
.roster-table .rm{text-align:right;}
.roster-table .rm button{background:none; border:none; color:var(--ink-soft); font-size:17px; cursor:pointer; padding:4px 8px; border-radius:8px;}
.roster-table .rm button:hover{background:var(--hair); color:var(--danger);}
.col-name{width:26%;} .col-family{width:22%;} .col-type{width:26%;} .col-oblig{width:16%;} .col-rm{width:10%;}
.totals-line{display:flex; justify-content:space-between; align-items:baseline; margin-top:14px; padding-top:14px; border-top:1px solid var(--hair);}
.totals-line .label{font-size:14px; font-weight:600;}
.totals-line .value{font-size:22px; font-weight:700; color:var(--teal);}
/* Selector widened from the reference's `form.entry-form`: the markup puts this
   class on an inner div, so the row layout never applied. The .field.amt/.date
   pixel widths and align-items:flex-end only make sense in a row. */
.entry-form{display:flex; flex-wrap:wrap; gap:10px; align-items:flex-end;}
.field{display:flex; flex-direction:column; gap:5px;}
.field label{font-size:11.5px; font-weight:600; color:var(--ink-soft);}
.field select, .field input{padding:10px 12px; border-radius:10px; border:1px solid var(--hair); background:var(--paper); color:var(--ink); font-family:inherit; font-size:13.5px;}
.field.grow{flex:1; min-width:170px;}
.field.amt{width:100px;}
.field.date{width:150px;}
.overview-table{width:100%; border-collapse:collapse; font-size:13.5px;}
.overview-table th{text-align:left; font-size:11px; color:var(--ink-soft); font-weight:600; padding:0 8px 8px 4px; border-bottom:1px solid var(--hair);}
.overview-table td{padding:9px 8px; border-bottom:1px solid var(--hair);}
.overview-table tr.fam-header td{background:var(--warn-bg); padding:8px; border-bottom:none;}
.fam-header-row{display:flex; align-items:center; justify-content:space-between; gap:10px; flex-wrap:wrap;}
.fam-header-row .fam-label{font-weight:700; font-size:12.5px; color:var(--teal);}
.overview-table td.amt{text-align:right; font-weight:600; white-space:nowrap;}
.overview-table td.remaining.done{color:var(--teal); font-weight:700;}
.mini-bar-track{background:var(--hair); border-radius:999px; height:7px; margin-top:5px; overflow:hidden; width:100%; max-width:120px;}
.mini-bar-fill{background:var(--teal); height:100%; border-radius:999px;}
.amt-wrap{display:flex; flex-direction:column; align-items:flex-end;}
table.log-table{width:100%; border-collapse:collapse; font-size:13.5px;}
table.log-table thead th{text-align:left; font-size:11px; color:var(--ink-soft); font-weight:600; padding:0 8px 8px 8px; border-bottom:1px solid var(--hair);}
table.log-table tbody td{padding:10px 8px; border-bottom:1px solid var(--hair); color:var(--ink);}
table.log-table tbody tr:last-child td{border-bottom:none;}
td.amt{font-weight:600; color:var(--teal); text-align:right; white-space:nowrap;}
td.note{color:var(--ink-soft); font-size:12.5px;}
td.del{text-align:right;}
td.del button{background:none; border:none; color:var(--ink-soft); cursor:pointer; font-size:15px; padding:4px 6px; border-radius:6px;}
td.del button:hover{background:var(--hair); color:var(--danger);}
.empty{text-align:center; padding:26px 10px; color:var(--ink-soft); font-size:13.5px;}
.footer-note{text-align:center; font-size:12px; color:var(--ink-soft); margin-top:22px; line-height:1.6;}
.scrollx{overflow-x:auto;}
.progress-hero{text-align:center; padding:6px 0 4px 0;}
.progress-hero .remaining{font-size:34px; font-weight:700; color:var(--teal); line-height:1;}
.progress-hero .remaining-label{font-size:12.5px; color:var(--ink-soft); margin-top:6px; font-weight:500;}
.bar-track{background:var(--hair); border-radius:999px; height:12px; margin:14px 0 8px 0; overflow:hidden;}
.bar-fill{background:var(--teal); height:100%; border-radius:999px; transition:width .4s ease;}
@media (max-width:640px){
  .card{padding:16px;}
  .entry-form{flex-direction:column; align-items:stretch;}
  .field.amt, .field.date{width:100%;}
  .roster-table{min-width:560px;}
  .overview-table{min-width:480px;}
}

/* ---- additions for the server-rendered app (login, flash, admin chrome) ---- */
.topbar{display:flex; align-items:center; gap:10px; margin-left:auto;}
.topbar .who{font-size:12px; color:var(--ink-soft); font-weight:500;}
.flash{border-radius:12px; padding:11px 15px; margin-bottom:16px; font-size:13px; line-height:1.5; border:1px solid var(--hair);}
.flash.ok{background:var(--warn-bg); color:var(--ink);}
.flash.err{background:rgba(181,72,74,0.10); border-color:rgba(181,72,74,0.35); color:var(--danger);}
.login-card{max-width:400px; margin:6vh auto 0 auto;}
.login-card .field{margin-bottom:14px;}
.login-card .field input{width:100%;}
.login-card .btn{width:100%; justify-content:center;}
.fam-header-row .fam-actions{display:flex; gap:8px; flex-wrap:wrap;}
.linkbox{width:100%; padding:8px 10px; border-radius:8px; border:1px solid var(--hair); background:var(--bg); color:var(--ink-soft); font-family:inherit; font-size:12px; margin-top:8px;}
.totp-qr{display:block; margin:14px auto; width:190px; height:190px; border-radius:12px; background:#fff; padding:8px;}
.codes{font-family:ui-monospace,Menlo,Consolas,monospace; font-size:13px; line-height:2; background:var(--bg); border:1px solid var(--hair); border-radius:10px; padding:12px 16px;}
.inline-form{display:inline;}

/* ---- utility classes replacing the reference's inline style attributes ----
   A strict CSP (no 'unsafe-inline' in style-src) ignores style="..." on an
   element, so every static inline style from reference-frontend.html lives
   here instead. Rendered appearance is unchanged. */
.ta-r{text-align:right;}
.mt-8{margin-top:8px;}
.mt-14{margin-top:14px;}
.mt-16{margin-top:16px;}
.mt-18{margin-top:18px;}
.hero-split{display:flex; justify-content:space-between; font-size:12.5px; color:var(--ink-soft);}
.hero-split b{color:var(--ink);}

/* The UA stylesheet's [hidden]{display:none} loses to .field{display:flex},
   so hiding the new-family name field needs to be stated explicitly. */
.field[hidden], [hidden]{display:none !important;}