/* --- Bins night --------------------------------------------------------------
   Loaded after house.css: this is one more tab on the House page and one more
   chip on the House Calendar, so it borrows .hs-* and .cal-* wholesale and only
   adds what a bin needs that a job doesn't — the lid colour.

   Every bin swatch is driven by one custom property, `--bin`, set inline from
   the hex in js/bins.js. It's a real-world colour rather than a theme token, so
   it doesn't move between light and dark; what moves is the amount of it that's
   used as a background, which is why the swatches are colour-mix rather than
   flat fills. */

/* ---------- the "what's next" card ---------- */
.bn-next {
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius); padding: 16px 16px 14px;
  box-shadow: var(--shadow-card); margin-bottom: 18px;
  display: flex; flex-direction: column; gap: 12px;
}
.bn-next.now    { border-left-color: var(--gold); background: color-mix(in srgb, var(--gold) 6%, var(--surface)); }
.bn-next.soon   { border-left-color: var(--amber); }
.bn-next.done   { border-left-color: var(--accent); }
.bn-next.later  { border-left-color: var(--accent); }
.bn-next.missed { border-left-color: var(--red); }

.bn-nhead { display: flex; gap: 13px; align-items: center; }
.bn-nhead > div { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.bn-nhead b { font-size: 18px; font-weight: 750; line-height: 1.2; }
.bn-nhead span { color: var(--text-muted); font-size: 13px; }

.bn-nic {
  flex: none; width: 44px; height: 44px; border-radius: 12px;
  display: flex; align-items: center; justify-content: center;
  background: var(--surface-3); color: var(--text-soft);
}
.bn-next.now .bn-nic { background: color-mix(in srgb, var(--gold) 20%, transparent); color: var(--amber); }
.bn-next.done .bn-nic { background: var(--accent-soft); color: var(--green-dark); }

.bn-nacts { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; }
.bn-note { color: var(--text-muted); font-size: 12.5px; }

/* ---------- a bin, named and coloured ---------- */
.bn-chips { display: flex; gap: 7px; flex-wrap: wrap; }

.bn-chip {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 13px; font-weight: 650; padding: 5px 11px 5px 8px;
  border-radius: 999px; white-space: nowrap;
  background: color-mix(in srgb, var(--bin) 13%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--bin) 40%, transparent);
  color: var(--text);
}
.bn-chip.sm { font-size: 12px; padding: 3px 9px 3px 6px; }
.bn-chip i, .bn-dot {
  flex: none; width: 12px; height: 12px; border-radius: 4px;
  background: var(--bin); border: 1px solid rgba(0, 0, 0, .18);
}
.bn-chip.sm i { width: 10px; height: 10px; border-radius: 3px; }

/* ---------- the weeks after this one ---------- */
.bn-list { margin-bottom: 20px; }

.bn-row {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 12px; margin-bottom: 7px;
}
.bn-row.done { opacity: .7; border-left-color: var(--accent); }
.bn-row.now, .bn-row.soon { border-left-color: var(--amber); }

.bn-rwhen { flex: none; min-width: 74px; display: flex; flex-direction: column; }
.bn-rwhen b { font-size: 14px; font-weight: 700; }
.bn-rwhen span { font-size: 11.5px; color: var(--text-muted); }
.bn-row .bn-chips { flex: 1; min-width: 0; }
.bn-rweek {
  font-size: 11px; font-weight: 700; letter-spacing: .04em; text-transform: uppercase;
  color: var(--text-muted); background: var(--surface-3);
  padding: 2px 8px; border-radius: 999px;
}
.bn-row .rowbtn.on { color: var(--accent); }

/* ---------- the setup, folded away ---------- */
.bn-setup {
  background: var(--surface-2); border: 1px solid var(--border);
  border-radius: var(--radius); padding: 0 14px; margin-bottom: 18px;
}
.bn-setup > summary {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  padding: 13px 2px; cursor: pointer; font-weight: 700; font-size: 14px;
  list-style: none;
}
.bn-setup > summary::-webkit-details-marker { display: none; }
.bn-setup > summary::after {
  content: "›"; margin-left: auto; color: var(--text-muted);
  font-size: 20px; line-height: 1; transform: rotate(90deg); transition: transform .15s ease;
}
.bn-setup[open] > summary::after { transform: rotate(-90deg); }
.bn-setup > summary em {
  font-style: normal; font-weight: 500; font-size: 12.5px; color: var(--text-muted);
}
.bn-setup > summary:hover { color: var(--accent); }
.bn-setup .hs-form { padding-top: 4px; }
.bn-setup .hs-sheetacts { padding-bottom: 14px; }

.bn-sechead {
  display: flex; align-items: center; gap: 8px;
  font-size: 12px; font-weight: 750; letter-spacing: .06em; text-transform: uppercase;
  color: var(--text-muted); margin: 18px 0 8px;
}
.bn-sechead .ic { width: 14px; height: 14px; }
.bn-hint { color: var(--text-muted); font-size: 12.5px; line-height: 1.5; margin-bottom: 12px; }
.bn-none { color: var(--text-muted); font-size: 13px; padding: 8px 2px; }

/* the bins themselves — a name, a lid colour, and the way out */
.bn-kinds { display: flex; flex-direction: column; gap: 7px; }
.bn-krow {
  display: flex; gap: 9px; align-items: center;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: var(--radius-sm); padding: 7px 10px;
}
.bn-krow .bn-dot { width: 16px; height: 16px; border-radius: 5px; }
.bn-krow input { flex: 1; min-width: 0; }
.bn-krow select { flex: none; width: 128px; }

.bn-add { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 10px; }
.bn-add .lchip { gap: 6px; }
.bn-add .lchip .bn-dot { width: 10px; height: 10px; border-radius: 3px; }
.bn-add .lchip .ic { width: 12px; height: 12px; }

/* the cycle: one row a week, one toggle a bin */
.bn-weeks { display: flex; flex-direction: column; gap: 8px; }
.bn-wrow {
  display: flex; gap: 12px; align-items: center; flex-wrap: wrap;
  background: var(--surface); border: 1px solid var(--border);
  border-left: 3px solid var(--border-strong);
  border-radius: var(--radius-sm); padding: 9px 11px;
}
.bn-wrow.cur { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 5%, var(--surface)); }

.bn-wlab { flex: none; display: flex; align-items: center; gap: 7px; min-width: 108px; }
.bn-wlab b { font-size: 13.5px; font-weight: 700; }
.bn-nowtag {
  font-size: 10.5px; font-weight: 750; letter-spacing: .04em; text-transform: uppercase;
  background: var(--accent-soft); color: var(--green-dark);
  padding: 2px 7px; border-radius: 999px;
}
.bn-wbins { flex: 1; min-width: 0; display: flex; gap: 7px; flex-wrap: wrap; }

/* Off is a hollow outline, on is the lid colour filled in — so a week reads at a
   glance as "these two" rather than as four words you have to compare. */
.bn-tog {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12.5px; font-weight: 650; padding: 5px 11px 5px 8px;
  border-radius: 999px; cursor: pointer; white-space: nowrap;
  background: var(--surface-2); border: 1px solid var(--border);
  color: var(--text-muted);
  transition: background-color .12s ease, border-color .12s ease, color .12s ease;
}
.bn-tog i {
  flex: none; width: 11px; height: 11px; border-radius: 4px;
  border: 1.5px solid color-mix(in srgb, var(--bin) 55%, transparent); background: transparent;
}
.bn-tog:hover { border-color: color-mix(in srgb, var(--bin) 50%, transparent); color: var(--text); }
.bn-tog.on {
  background: color-mix(in srgb, var(--bin) 14%, var(--surface));
  border-color: color-mix(in srgb, var(--bin) 45%, transparent);
  color: var(--text);
}
.bn-tog.on i { background: var(--bin); border-color: rgba(0, 0, 0, .18); }

/* ---------- on the House Calendar ---------- */
.cal-chip.bn-cchip { background: var(--surface-3); color: var(--text-soft); }
.cal-chip.bn-cchip.now  { background: color-mix(in srgb, var(--gold) 18%, transparent); color: var(--amber); }
.cal-chip.bn-cchip.soon { background: color-mix(in srgb, var(--amber) 13%, transparent); color: var(--amber); }
.cal-chip.bn-cchip.done { opacity: .6; }

.bn-dots { display: inline-flex; gap: 2px; flex: none; }
.bn-dots i {
  width: 7px; height: 7px; border-radius: 2px;
  background: var(--bin); border: 1px solid rgba(0, 0, 0, .2);
}

.hc-next.bins .hc-nhead { color: var(--amber); }
.hc-next.bins .hc-nrow { align-items: center; }
.hc-next.bins .hs-main { gap: 6px; }

/* ---------- phone ---------- */
@media (max-width: 640px){
  .bn-nhead b { font-size: 16.5px; }
  .bn-nic { width: 38px; height: 38px; }
  /* the colour select is the widest thing in the row and the least urgent — it
     drops under the name rather than squeezing it to nothing */
  .bn-krow { flex-wrap: wrap; }
  .bn-krow input { flex: 1 1 100%; order: 1; }
  .bn-krow .bn-dot { order: 0; }
  .bn-krow select { order: 2; flex: 1; width: auto; }
  .bn-krow .delbtn { order: 3; }
  .bn-wlab { min-width: 100%; }
  .bn-row .bn-chips { flex-basis: 100%; }
}