/* components.css — layout and the parts you can see. */

.app {
  position: relative;
  z-index: 1;
  max-width: 1080px;
  margin: 0 auto;
  padding: var(--sp-5) var(--sp-4) var(--sp-7);
}

/* ---- Masthead ------------------------------------------------------------ */

.masthead {
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: var(--sp-3);
  margin-bottom: var(--sp-4);
}
.masthead h1 {
  font-size: var(--step-3);
  letter-spacing: -0.02em;
}
.masthead .today {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-left: auto;
}

/* ---- Save status --------------------------------------------------------- */

.status {
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  padding: var(--sp-1) var(--sp-3);
  border-radius: 999px;
  background: var(--paper-deep);
  color: var(--ink-soft);
  border: 1px solid var(--card-edge);
}
.status .dot { width: 8px; height: 8px; border-radius: 50%; background: var(--ink-faint); flex: none; }
.status[data-tone='ok'] .dot { background: var(--upcoming); }
.status[data-tone='busy'] .dot { background: var(--week); }
.status[data-tone='offline'] .dot { background: var(--ink-faint); }

/* ---- Notices ------------------------------------------------------------- */

.notice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  border-radius: var(--radius);
  margin-bottom: var(--sp-4);
  font-family: var(--font-ui);
  border: 1px solid var(--card-edge);
  background: var(--card);
}
.notice strong { display: block; font-size: var(--step-0); font-weight: 600; }
.notice p { margin: var(--sp-1) 0 0; font-size: var(--step--1); color: var(--ink-soft); }
.notice .btn { margin-left: auto; flex: none; }
.notice--conflict { background: var(--week-wash); border-color: var(--week-edge); }
.notice--conflict strong { color: var(--week); }
.notice--signin { background: var(--accent-wash); border-color: var(--card-edge); }
.notice--signin strong { color: var(--accent-deep); }

.conflict {
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  padding: var(--sp-4);
  margin-bottom: var(--sp-4);
}
.conflict__name { font-weight: 600; font-size: var(--step-1); margin-bottom: var(--sp-3); }
.conflict__pair { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }
.conflict__side {
  background: var(--paper);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-sm);
  padding: var(--sp-3);
}
.conflict__side--kept { background: var(--upcoming-wash); border-color: var(--upcoming-edge); }
.conflict__tag {
  display: block;
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.conflict dl { margin: 0; font-family: var(--font-ui); font-size: var(--step--1); }
.conflict dt { color: var(--ink-faint); margin-top: var(--sp-2); }
.conflict dd { margin: 0; font-weight: 600; }
.conflict .btn { margin-top: var(--sp-3); width: 100%; justify-content: center; }

@media (max-width: 560px) {
  .conflict__pair { grid-template-columns: 1fr; }
  .notice .btn { margin-left: 0; width: 100%; justify-content: center; }
}

/* ---- Cash preview -------------------------------------------------------- */

.preview {
  background: linear-gradient(160deg, var(--card) 0%, var(--accent-wash) 180%);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-5);
  margin-bottom: var(--sp-5);
}
.preview h2 {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: var(--ink-faint);
  margin-bottom: var(--sp-2);
}
.preview .figure {
  font-family: var(--font-num);
  font-size: var(--step-4);
  font-weight: 600;
  letter-spacing: -0.02em;
  line-height: 1.1;
}
.preview .caption {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
  margin-top: var(--sp-2);
}
.preview .incomplete {
  display: inline-block;
  margin-top: var(--sp-3);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  background: var(--week-wash);
  border: 1px solid var(--week-edge);
  color: var(--week);
  padding: var(--sp-2) var(--sp-3);
  border-radius: var(--radius-sm);
}

/* ---- Controls ------------------------------------------------------------ */

.controls {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-3);
  align-items: center;
  margin-bottom: var(--sp-5);
}

.btn {
  font-family: var(--font-ui);
  font-weight: 600;
  min-height: var(--touch);
  padding: 0 var(--sp-5);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-edge);
  background: var(--card);
  color: var(--ink);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: var(--sp-2);
  transition: transform 0.08s ease, box-shadow 0.15s ease, background 0.15s ease;
}
.btn:hover { box-shadow: var(--shadow-card); }
.btn:active { transform: translateY(1px); }
.btn--primary { background: var(--accent); border-color: var(--accent-deep); color: #fff; }
.btn--primary:hover { background: var(--accent-deep); }
.btn--quiet { background: transparent; border-color: transparent; color: var(--ink-soft); }
.btn--quiet:hover { background: var(--paper-deep); }
.btn--small { min-height: 40px; padding: 0 var(--sp-4); font-size: var(--step--1); }

.filter { margin-left: auto; display: inline-flex; align-items: center; gap: var(--sp-2); }
.filter label { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-soft); }
.filter select {
  min-height: var(--touch);
  padding: 0 var(--sp-4);
  border-radius: var(--radius-sm);
  border: 1px solid var(--card-edge);
  background: var(--card);
  cursor: pointer;
}

/* ---- Sections ------------------------------------------------------------ */

.section { margin-bottom: var(--sp-6); }
.section__head {
  display: flex;
  align-items: baseline;
  gap: var(--sp-3);
  padding-bottom: var(--sp-2);
  margin-bottom: var(--sp-4);
  border-bottom: 2px solid var(--card-edge);
}
.section__head h2 { font-size: var(--step-2); }
.section__count {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  background: var(--paper-deep);
  border-radius: 999px;
  padding: 2px var(--sp-3);
}
.section__blurb {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  margin-left: auto;
}
.section--needs-attention .section__head { border-bottom-color: var(--attention-edge); }
.section--pay-this-week   .section__head { border-bottom-color: var(--week-edge); }
.section--upcoming        .section__head { border-bottom-color: var(--upcoming-edge); }
.section--needs-setup     .section__head { border-bottom-color: var(--setup-edge); }
.section--paid            .section__head { border-bottom-color: var(--paid-edge); }

.section--needs-attention h2 { color: var(--attention); }
.section--pay-this-week   h2 { color: var(--week); }
.section--upcoming        h2 { color: var(--upcoming); }
.section--needs-setup     h2 { color: var(--setup); }
.section--paid            h2 { color: var(--paid); }

.cards { display: grid; gap: var(--sp-4); grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); }

.empty {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
  padding: var(--sp-5);
  background: var(--card);
  border: 1px dashed var(--card-edge);
  border-radius: var(--radius);
  text-align: center;
}

/* ---- Bill card ----------------------------------------------------------- */

.bill {
  background: var(--card);
  border: 1px solid var(--card-edge);
  border-left: 5px solid var(--card-edge);
  border-radius: var(--radius);
  box-shadow: var(--shadow-card);
  padding: var(--sp-4) var(--sp-4) var(--sp-3);
  display: flex;
  flex-direction: column;
  gap: var(--sp-3);
}
.bill--needs-attention { border-left-color: var(--attention); }
.bill--pay-this-week   { border-left-color: var(--week); }
.bill--upcoming        { border-left-color: var(--upcoming); }
.bill--needs-setup     { border-left-color: var(--setup-edge); background: var(--card); }
.bill--paid            { border-left-color: var(--paid-edge); background: var(--paid-wash); }

.bill__group {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--ink-faint);
}
.bill__name { font-size: var(--step-1); font-weight: 600; line-height: 1.3; }

/* THE dominant element on every active card. */
.payby {
  background: var(--paper-deep);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
}
.payby__label {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 700;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--ink-faint);
  display: block;
  margin-bottom: 2px;
}
.payby__date {
  font-family: var(--font-num);
  font-size: var(--step-3);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -0.02em;
  display: block;
}
.bill--needs-attention .payby { background: var(--attention-wash); }
.bill--needs-attention .payby__date { color: var(--attention); }
.bill--pay-this-week   .payby { background: var(--week-wash); }
.bill--pay-this-week   .payby__date { color: var(--week); }
.bill--upcoming        .payby { background: var(--upcoming-wash); }
.bill--upcoming        .payby__date { color: var(--upcoming); }
.bill--needs-setup     .payby { background: var(--setup-wash); }
.bill--needs-setup     .payby__date { font-size: var(--step-1); color: var(--setup); font-family: var(--font-ui); font-weight: 600; }

.payby__timing {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-top: var(--sp-1);
  display: block;
}
.payby__manual {
  display: inline-block;
  margin-top: var(--sp-2);
  font-family: var(--font-ui);
  font-size: 0.75rem;
  font-weight: 600;
  letter-spacing: 0.04em;
  background: var(--accent-wash);
  border: 1px solid var(--card-edge);
  color: var(--accent-deep);
  padding: 2px var(--sp-2);
  border-radius: 999px;
}

/* Directly beneath PAY BY, clearly readable, clearly secondary. */
.duedate {
  font-family: var(--font-ui);
  font-size: var(--step-0);
  color: var(--ink-soft);
  display: flex;
  justify-content: space-between;
  gap: var(--sp-3);
  padding: 0 var(--sp-1);
}
.duedate__label { color: var(--ink-faint); }
.duedate__value { font-weight: 600; color: var(--ink); }

.bill__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--sp-2) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-soft);
  border-top: 1px solid var(--card-edge);
  padding-top: var(--sp-3);
}
.bill__amount { font-family: var(--font-num); font-weight: 600; color: var(--ink); }
.bill__amount--unknown { font-family: var(--font-ui); font-style: italic; color: var(--ink-faint); }
.bill__notes { font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); font-style: italic; }

.bill__missing {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--setup);
  background: var(--setup-wash);
  border: 1px solid var(--setup-edge);
  border-radius: var(--radius-sm);
  padding: var(--sp-2) var(--sp-3);
}

.bill__actions { display: flex; gap: var(--sp-2); margin-top: auto; padding-top: var(--sp-2); }
.bill__actions .btn { flex: 1; justify-content: center; }

/* ---- Dialogs ------------------------------------------------------------- */

dialog {
  border: none;
  border-radius: var(--radius);
  padding: 0;
  background: var(--card);
  color: var(--ink);
  box-shadow: var(--shadow-lift);
  max-width: 560px;
  width: calc(100vw - 2rem);
}
dialog::backdrop { background: rgba(44, 38, 32, 0.45); }

.dialog__head {
  padding: var(--sp-5) var(--sp-5) var(--sp-3);
  border-bottom: 1px solid var(--card-edge);
}
.dialog__head h2 { font-size: var(--step-2); }
.dialog__head p { margin: var(--sp-2) 0 0; font-family: var(--font-ui); font-size: var(--step--1); color: var(--ink-faint); }
.dialog__body { padding: var(--sp-5); max-height: 62vh; overflow-y: auto; }
.dialog__foot {
  padding: var(--sp-4) var(--sp-5);
  border-top: 1px solid var(--card-edge);
  display: flex;
  gap: var(--sp-3);
  justify-content: flex-end;
  background: var(--paper-deep);
  border-radius: 0 0 var(--radius) var(--radius);
}

.field { margin-bottom: var(--sp-4); }
.field label {
  display: block;
  font-family: var(--font-ui);
  font-size: var(--step--1);
  font-weight: 600;
  color: var(--ink-soft);
  margin-bottom: var(--sp-2);
}
.field input, .field select, .field textarea {
  width: 100%;
  min-height: var(--touch);
  padding: var(--sp-2) var(--sp-3);
  border: 1px solid var(--card-edge);
  border-radius: var(--radius-sm);
  background: var(--paper);
}
.field textarea { min-height: 84px; resize: vertical; font-family: var(--font-ui); }
.field .hint { font-family: var(--font-ui); font-size: 0.75rem; color: var(--ink-faint); margin-top: var(--sp-1); }
.field--row { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

.errors {
  background: var(--attention-wash);
  border: 1px solid var(--attention-edge);
  color: var(--attention);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  margin-bottom: var(--sp-4);
}
.errors ul { margin: 0; padding-left: var(--sp-5); }

.preview-line {
  background: var(--accent-wash);
  border-radius: var(--radius-sm);
  padding: var(--sp-3) var(--sp-4);
  font-family: var(--font-ui);
  font-size: var(--step--1);
  margin-bottom: var(--sp-4);
}
.preview-line strong { font-family: var(--font-num); font-size: var(--step-1); display: block; margin-top: 2px; }

/* ---- History & More ------------------------------------------------------ */

.history__row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: var(--sp-2) var(--sp-4);
  padding: var(--sp-3) 0;
  border-bottom: 1px solid var(--card-edge);
}
.history__bill { font-weight: 600; }
.history__when, .history__how {
  font-family: var(--font-ui);
  font-size: var(--step--1);
  color: var(--ink-faint);
}
.history__amount { font-family: var(--font-num); font-weight: 600; text-align: right; }

.disclosure {
  font-family: var(--font-ui);
  font-size: 0.75rem;
  color: var(--ink-faint);
  text-align: center;
  padding: var(--sp-5) var(--sp-4) 0;
  border-top: 1px solid var(--card-edge);
  margin-top: var(--sp-6);
  line-height: 1.6;
}

/* ---- Phone --------------------------------------------------------------- */

@media (max-width: 560px) {
  .app { padding: var(--sp-4) var(--sp-3) var(--sp-6); }
  .masthead h1 { font-size: var(--step-2); }
  .masthead .today { margin-left: 0; width: 100%; }
  .cards { grid-template-columns: 1fr; }
  .controls .btn { flex: 1 1 calc(50% - var(--sp-3)); justify-content: center; }
  .filter { margin-left: 0; width: 100%; }
  .filter select { width: 100%; }
  .preview .figure { font-size: var(--step-3); }
  .payby__date { font-size: var(--step-2); }
  .section__blurb { display: none; }
  .field--row { grid-template-columns: 1fr; }
}