/* public/tools/overhead/overhead.css — the expense list and totals drawn by
   overhead-ui.js. Uses the same colour tokens as the landing/compare pages and
   the app (--green, --line, --card…); both define them. */
.oh { display:grid; grid-template-columns:minmax(0,1fr) 320px; gap:24px; align-items:start; }
.oh-list { display:flex; flex-direction:column; gap:16px; min-width:0; }
.oh-group { background:var(--card,#fff); border:1px solid var(--line,#e4e1d9); border-radius:16px; padding:18px 18px 10px; }
.oh-group h3 { margin:0 0 10px; font-size:15px; font-weight:650; letter-spacing:-.01em; }
.oh-row { display:grid; grid-template-columns:minmax(0,1fr) 140px 104px; gap:8px; align-items:center; padding:6px 0;
          border-top:1px solid var(--hair,#efece5); }
.oh-row:first-of-type { border-top:0; }
.oh-row:has(.oh-x) { grid-template-columns:minmax(0,1fr) 140px 104px 28px; }
.oh-label { font-size:15px; color:var(--ink,#1c1c1e); }
.oh-label-in { font:inherit; font-size:15px; padding:8px 10px; border:1px solid var(--line,#e4e1d9); border-radius:9px; min-width:0; }
.oh-amt { position:relative; }
.oh-amt .u { position:absolute; left:10px; top:50%; transform:translateY(-50%); color:var(--faint,#98a29b); font-size:15px; }
.oh-amt input, .oh-calgrid input { width:100%; font:inherit; font-size:16px; padding:8px 10px 8px 22px; border:1px solid var(--line,#e4e1d9);
  border-radius:9px; background:var(--card,#fff); font-variant-numeric:tabular-nums; }
.oh-calgrid input { padding-left:10px; }
.oh-per { font:inherit; font-size:14.5px; padding:8px 6px; border:1px solid var(--line,#e4e1d9); border-radius:9px; background:var(--card,#fff); }
.oh input:focus, .oh select:focus { outline:none; border-color:var(--green-mid,#2F7A55); box-shadow:0 0 0 3px rgba(47,122,85,.15); }
.oh-x { appearance:none; border:0; background:none; font-size:20px; line-height:1; color:var(--faint,#98a29b); cursor:pointer; }
.oh-add { appearance:none; align-self:flex-start; border:1px dashed var(--line,#e4e1d9); background:none; border-radius:10px;
  padding:9px 14px; font:inherit; font-size:14.5px; font-weight:600; color:var(--green-mid,#2F7A55); cursor:pointer; }
.oh-calgrid { display:grid; grid-template-columns:repeat(auto-fit, minmax(130px, 1fr)); gap:12px; }
.oh-calgrid label { display:block; font-size:13px; font-weight:600; color:var(--muted,#5f6b64); margin-bottom:5px; }
.oh-note { font-size:13.5px; color:var(--muted,#5f6b64); margin:12px 0 8px; }
.oh-out { position:sticky; top:16px; }
.oh-tiles { display:grid; grid-template-columns:1fr 1fr; gap:10px; }
.oh-tile { background:var(--card,#fff); border:1px solid var(--line,#e4e1d9); border-radius:14px; padding:14px; }
.oh-tile .l { font-size:12.5px; font-weight:650; color:var(--muted,#5f6b64); letter-spacing:.02em; }
.oh-tile .v { font-size:24px; font-weight:750; letter-spacing:-.02em; margin-top:2px; font-variant-numeric:tabular-nums; }
.oh-tile.key { background:var(--green,#19402C); border-color:var(--green,#19402C); color:#fff; }
.oh-tile.wide { grid-column:1 / -1; }
.oh-tile .s { font-size:12.5px; color:var(--muted,#5f6b64); margin-top:2px; }
.oh-tile.jobday { border-color:var(--green-mid,#2F7A55); border-width:2px; }
.oh-ask { appearance:none; text-align:left; font:inherit; cursor:pointer; border-style:dashed; background:transparent; }
.oh-ask .l, .oh-ask .s { display:block; }
.oh-ask .s { color:var(--green-mid,#2F7A55); font-weight:600; }
.oh-ask:hover { border-color:var(--green-mid,#2F7A55); }
.oh-tile.key .l { color:rgba(255,255,255,.75); }
.oh-sum { font-size:15px; color:var(--muted,#5f6b64); margin:14px 2px 0; line-height:1.55; }
.oh-sum b { color:var(--ink,#1c1c1e); }
.oh-bar { display:none; }
@media (max-width:860px) {
  .oh { grid-template-columns:1fr; padding-bottom:64px; }
  .oh-out { position:static; scroll-margin-top:12px; }
  .oh-bar { display:flex; position:fixed; left:12px; right:12px; bottom:12px; z-index:20; align-items:center;
    gap:10px; justify-content:space-between; appearance:none; border:0; border-radius:14px; padding:12px 16px;
    background:var(--green,#19402C); color:#fff; font:inherit; font-size:14px; box-shadow:0 6px 20px rgba(0,0,0,.18); cursor:pointer; }
  .oh-bar b { font-size:19px; font-variant-numeric:tabular-nums; }
  .oh-bar span:last-child { opacity:.75; font-size:13px; }
}
@media (max-width:520px) {
  .oh-row, .oh-row:has(.oh-x) { grid-template-columns:minmax(0,1fr) 112px; }
  .oh-row .oh-label, .oh-row .oh-label-in { grid-column:1 / -1; }
  .oh-row:has(.oh-x) .oh-x { grid-column:2; justify-self:end; grid-row:1; }
  .oh-row:has(.oh-x) .oh-label-in { grid-column:1; }
  .oh-tile .v { font-size:20px; }
}
@media print {
  .oh-add, .oh-x, .oh-bar { display:none !important; }
  .oh { display:block; }
  .oh-out { position:static; margin-top:16px; }
}