/* =========================================================================
   Shared UI for the household modules - Home, Money, Vault, Estate, and
   whatever comes next.

   These started as Home's styles and are deliberately generic: a dated row, a
   tab strip, a form grid, a headline figure and a bar list are the same
   furniture in every one of these apps. A second copy per module is how five
   apps end up looking like five products.

   TOKENS ONLY, no raw colour, so all of it follows the theme and dark mode
   without a single extra rule.
   ========================================================================= */

/* ------------------------------------------------------------------- tabs */

.hmtabs{
  display:flex;gap:var(--s1);flex-wrap:wrap;
  border-bottom:1px solid var(--line);
  margin:0 0 var(--s5);
}
.hmtab{
  display:block;padding:10px var(--s4);
  color:var(--ink-2);text-decoration:none;font-size:14.5px;font-weight:600;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
}
.hmtab:hover{color:var(--ink);}
.hmtab.on{color:var(--brand);border-bottom-color:var(--brand);}

/* ------------------------------------------------------------------ rows */

.agenda{display:flex;flex-direction:column;gap:var(--s2);margin:0 0 var(--s5);}

.ag{
  display:grid;
  grid-template-columns:132px 1fr auto;
  gap:var(--s4);
  align-items:center;
  background:var(--surface);
  border:1px solid var(--line);
  border-left:3px solid var(--line-strong);
  border-radius:var(--r);
  padding:var(--s4);
}

/* The left edge carries the urgency. Colour is never the only signal - the
   words next to the date say the same thing, because a strip of colour is
   exactly what somebody colour blind or in bright sunlight loses. */
.ag.late{border-left-color:var(--bad);background:var(--bad-wash);}
.ag.soon{border-left-color:var(--warn);}
.ag.later{border-left-color:var(--line-strong);}

.ag .when{display:flex;flex-direction:column;gap:2px;line-height:1.25;}
.ag .when b{font-size:14.5px;color:var(--ink);font-weight:700;}
.ag .when span{font-size:12.5px;color:var(--ink-3);}
.ag.late .when span{color:var(--bad);font-weight:600;}

.ag .what{min-width:0;}
.ag .what h4{margin:0;font-size:15.5px;font-weight:650;color:var(--ink);
  overflow-wrap:anywhere;}
.ag .what p{margin:3px 0 0;font-size:13px;color:var(--ink-3);overflow-wrap:anywhere;}
.ag .what .muted{color:var(--ink-3);font-weight:400;}

.ag .acts{display:flex;gap:var(--s2);align-items:center;}
.ag .acts form{margin:0;}

@media (max-width:620px){
  .ag{grid-template-columns:1fr auto;gap:var(--s3);}
  .ag .when{grid-column:1 / -1;flex-direction:row;align-items:baseline;gap:var(--s2);}
}

/* A chore left as "Anyone" that carries an allowance has to ask who did it
   before it can be marked done, so the Done control is sometimes a picker and
   a button rather than just a button. It wraps on a narrow screen instead of
   pushing the row wider than the page. */
.choredone{display:flex;gap:var(--s2);align-items:center;flex-wrap:wrap;}
.choredone select{max-width:148px;}
@media (max-width:620px){
  .choredone{justify-content:flex-end;}
  .choredone select{max-width:120px;}
}

/* A whole row that is itself a link, used where opening the thing is the only
   action. It has to shed the anchor colour or every title turns blue. */
a.vtrow{text-decoration:none;color:inherit;}
a.vtrow:hover{border-color:var(--line-strong);box-shadow:var(--shadow);}
a.vtrow .more{color:var(--brand);font-weight:600;font-size:14px;}

.vtthumb{
  width:100%;max-width:104px;height:72px;
  object-fit:cover;border-radius:var(--r-sm);
  background:var(--sunken);display:block;
}
@media (max-width:620px){
  .vtthumb{max-width:72px;height:52px;}
}

/* ------------------------------------------------------------------ forms */

.hmgrid{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr));
  margin:0 0 var(--s4);
}
.hmgrid .field{margin:0;}

.card > h3{margin:0 0 var(--s3);font-size:16px;font-weight:700;color:var(--ink);}
.card p.help{margin:0 0 var(--s4);font-size:13.5px;color:var(--ink-3);line-height:1.55;}

/* -------------------------------------------------------- headline figure */
/*
   Money is one number and the arithmetic behind it, so the number gets to be
   the size of the promise. The supporting line underneath always shows what it
   is made of - a total nobody can decompose is a total nobody believes.
*/
.bignum{
  background:var(--brand-wash);
  border:1px solid var(--line);
  border-radius:var(--r-lg);
  padding:var(--s6) var(--s5);
  margin:0 0 var(--s5);
  text-align:center;
}
.bignum .k{
  font-size:12px;font-weight:700;letter-spacing:.09em;text-transform:uppercase;
  color:var(--ink-3);margin-bottom:var(--s3);
}
.bignum .v{
  font-size:clamp(38px,7vw,64px);line-height:1;font-weight:800;
  letter-spacing:-.02em;color:var(--brand-lo);
}
.bignum .n{margin-top:var(--s3);font-size:13.5px;color:var(--ink-2);}

@media (prefers-color-scheme:dark){
  .bignum .v{color:var(--brand-hi);}
}
:root[data-theme="dark"] .bignum .v{color:var(--brand-hi);}

/* ------------------------------------------------------------------- bars */

.bars{display:flex;flex-direction:column;gap:var(--s3);margin:0 0 var(--s5);}
.bar .lab{
  display:flex;justify-content:space-between;align-items:baseline;gap:var(--s3);
  margin-bottom:5px;
}
.bar .lab b{font-size:14px;font-weight:650;color:var(--ink);}
.bar .lab span{font-size:12.5px;color:var(--ink-3);}
.bar .track{
  height:9px;border-radius:var(--r-pill);
  background:var(--sunken);overflow:hidden;
}
.bar .track i{
  display:block;height:100%;
  background:var(--brand);border-radius:var(--r-pill);
}

/* ------------------------------------------------------- files and proof */

.vtfiles{
  display:grid;gap:var(--s3);
  grid-template-columns:repeat(auto-fill,minmax(150px,1fr));
  margin-top:var(--s4);
}
.vtfile{
  border:1px solid var(--line);border-radius:var(--r);
  padding:var(--s2);background:var(--surface-2);
  display:flex;flex-direction:column;gap:var(--s2);
}
.vtfile img{
  width:100%;height:120px;object-fit:cover;
  border-radius:var(--r-sm);background:var(--sunken);display:block;
}
.vtfile form{margin:0;}
.vtfile .btn{width:100%;justify-content:center;}

.vtdoc{
  display:flex;flex-direction:column;align-items:center;gap:var(--s2);
  height:120px;justify-content:center;text-align:center;
  border-radius:var(--r-sm);background:var(--sunken);
  color:var(--ink-2);text-decoration:none;padding:var(--s2);
}
.vtdoc:hover{color:var(--ink);}
.vtdoc span{font-size:12px;overflow-wrap:anywhere;line-height:1.35;}
.vtdoc .i{width:26px;height:26px;}

/* --------------------------------------------------------------- handover */
/*
   The Estate handover page is the one screen in this platform whose real
   output is a sheet of paper in a drawer, so it gets print rules rather than
   being left to whatever the browser decides.

   Everything that is only useful on a screen goes away: the sidebar, the tab
   strip, every button including the Print button itself, and the notes that
   explain the page to the person who made it rather than to the person who
   will one day be reading it.
*/
.handover h2{margin:0 0 var(--s2);font-size:22px;font-weight:800;color:var(--ink);}
.handover h3{
  margin:var(--s5) 0 var(--s3);font-size:13px;font-weight:700;
  letter-spacing:.08em;text-transform:uppercase;color:var(--ink-3);
  border-bottom:1px solid var(--line);padding-bottom:5px;
}
.handover p{margin:0 0 var(--s3);color:var(--ink-2);line-height:1.6;font-size:14.5px;}
.handover .dlist li{padding-left:var(--s4);}
.handover .dlist li:before{top:8px;width:5px;height:5px;}

@media print{
  .side, .hmtabs, .note, .btn, .impbar, .lnav, .lfoot, #toasts { display:none !important; }
  .app, .content, .page { display:block !important; margin:0 !important; padding:0 !important; }
  body { background:#fff !important; }
  .card.handover {
    border:none !important; box-shadow:none !important;
    padding:0 !important; background:#fff !important;
  }
  .handover h3 { break-after:avoid; }
  .handover li, .handover p { break-inside:avoid; }
}