/* The tip and bill split page's own pieces: the stepper, the diner and dish rows, the stacked bar,
   the per-person rows and the scenario cards.

   Everything else — panels, the navy hero, the stat tiles, chips, the FAQ accordion, related cards
   and Cozy's pick — comes from styles.css and results.css. Scoped to .tip-page, which is the body
   class this page opts into, so none of these names can leak onto another calculator.

   The four bar colours are existing palette tokens rather than new ones, chosen so they stay apart
   in both themes: navy, slate, yellow and the site orange. The legend names every one of them, so
   colour is never the only way to read the bar. */

/* ---------------------------------------------------------------- The form */

.tip-page .form-heading {
  font-size: 0.78rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--muted);
  margin: 20px 0 10px;
}
.tip-page .form-heading.spaced { margin-top: 26px; }
.tip-page .form-heading .optional {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 600;
  color: var(--muted);
  opacity: 0.85;
}

.tip-page .field-error {
  margin: 4px 0 0;
  font-size: 0.76rem;
  line-height: 1.35;
  color: var(--danger);
}
.tip-page .field-error:empty { display: none; }
.tip-page input[aria-invalid="true"] {
  border-color: var(--danger);
  background: var(--danger-bg);
}

.tip-page .form-note {
  margin: 8px 0 0;
  font-size: 0.8rem;
  line-height: 1.45;
  color: var(--muted);
}

.tip-page .stepper {
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  gap: 8px;
  align-items: stretch;
}
.tip-page .stepper button {
  font: inherit;
  font-size: 1.15rem;
  font-weight: 700;
  min-height: 44px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
  color: var(--primary);
  cursor: pointer;
}
.tip-page .stepper button:hover { border-color: var(--primary); }
.tip-page .stepper input {
  min-width: 0;
  text-align: center;
  font-weight: 700;
}

.tip-page .tip-field {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px 14px 6px;
  margin: 20px 0 4px;
  min-width: 0;
}
.tip-page .tip-field legend {
  padding: 0 6px;
  font-size: 0.85rem;
  font-weight: 700;
}
.tip-page .tip-field .optional {
  font-weight: 600;
  color: var(--muted);
  font-size: 0.78rem;
}
.tip-page .tip-chips { margin: 10px 0 4px; }
.tip-page .tip-chips .chip { min-height: 38px; }
.tip-page .tip-chips .chip:disabled { opacity: 0.45; cursor: default; }
.tip-page .tip-chips .chip[aria-pressed="true"] { border-color: var(--highlight); font-weight: 700; }

.tip-page .tip-fixed-toggle {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 8px 0 12px;
  font-size: 0.86rem;
  cursor: pointer;
}
.tip-page .tip-fixed-toggle input { width: 18px; height: 18px; margin: 0; accent-color: var(--primary); }

/* ---------------------------------------------------------------- Diners and dishes */

.tip-page .diner-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 38px;
  gap: 8px;
  align-items: center;
  margin-bottom: 8px;
}
.tip-page .diner-name { min-width: 0; }

.tip-page .item-card {
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 10px;
  background: var(--card);
}
.tip-page .item-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.75fr) 38px;
  gap: 8px;
  align-items: end;
}
.tip-page .item-head .field { margin-bottom: 0; min-width: 0; }
.tip-page .item-name,
.tip-page .item-price { min-width: 0; }
.tip-page .item-price { font-variant-numeric: tabular-nums; }

.tip-page .share-block { margin-top: 10px; }
.tip-page .share-label {
  display: block;
  font-size: 0.76rem;
  font-weight: 600;
  color: var(--muted);
}
.tip-page .share-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.tip-page .share-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 10px;
  border: 1px solid var(--border);
  border-radius: 999px;
  font-size: 0.78rem;
  cursor: pointer;
}
.tip-page .share-chip input { margin: 0; width: 15px; height: 15px; accent-color: var(--primary); }
.tip-page .share-chip:has(input:checked) { border-color: var(--primary); background: var(--accent); font-weight: 600; }
.tip-page .share-all { min-height: 32px; }

/* ---------------------------------------------------------------- The hero and the tiles */

/* The hero's orange edge and the orange cap on every tile come from results.css (.rp-hero and
   .rp-tiles), exactly as on the other calculators — nothing here needs to restyle them. */

.tip-page .rp-hero .value { overflow-wrap: anywhere; }

/* ---------------------------------------------------------------- Where the total goes */

.tip-page .bill-bar {
  display: flex;
  height: 26px;
  border-radius: 8px;
  overflow: hidden;
  background: var(--accent);
  margin: 4px 0 0;
}
.tip-page .bill-seg {
  display: block;
  height: 100%;
  min-width: 2px;
  background: var(--seg-color, var(--muted));
  border-right: 1px solid var(--card);
}
.tip-page .bill-seg:last-child { border-right: 0; }

.tip-page .bill-legend { list-style: none; margin: 12px 0 0; padding: 0; display: grid; gap: 6px; }
.tip-page .bill-row {
  display: grid;
  grid-template-columns: 14px minmax(0, 1fr) auto auto;
  gap: 8px;
  align-items: center;
  font-size: 0.82rem;
}
.tip-page .bill-key {
  width: 12px;
  height: 12px;
  border-radius: 3px;
  background: var(--seg-color, var(--muted));
}
.tip-page .bill-name { overflow-wrap: anywhere; }
.tip-page .bill-share { color: var(--muted); font-variant-numeric: tabular-nums; }
.tip-page .bill-amount { font-weight: 700; font-variant-numeric: tabular-nums; }

.tip-page [data-seg="food"] { --seg-color: var(--primary); }
.tip-page [data-seg="tax"] { --seg-color: var(--fees); }
.tip-page [data-seg="service"] { --seg-color: var(--bmi-under); }
.tip-page [data-seg="tip"] { --seg-color: var(--highlight); }

/* ---------------------------------------------------------------- Who owes what */

.tip-page .person-list { display: grid; gap: 6px; }
.tip-page .person-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent);
}
.tip-page .person-name { font-size: 0.88rem; font-weight: 600; overflow-wrap: anywhere; }
.tip-page .person-amount {
  font-size: 0.95rem;
  font-weight: 800;
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}

.tip-page .split-table { min-width: 540px; font-size: 0.82rem; }
.tip-page .split-table th,
.tip-page .split-table td { padding: 8px 6px; }
.tip-page .split-table .row-total { font-weight: 700; }
.tip-page .split-table tr.total-row th,
.tip-page .split-table tr.total-row td {
  border-bottom: 0;
  border-top: 2px solid var(--border);
  font-weight: 700;
}
.tip-page .table-wrap { overflow-x: auto; }
.tip-page .scroll-hint { display: none; margin: 0 0 6px; }

.tip-page .result-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
  margin: 14px 0 0;
}
.tip-page .copy-note { font-size: 0.78rem; color: var(--muted); }

/* ---------------------------------------------------------------- The scenario preview */

/* The card itself is the site's accent card (.rp-explorer); the two figures inside it are cards
   of their own, so they sit on the card colour rather than on the accent wash. */
.tip-page .rp-explorer > p { font-size: 0.88rem; line-height: 1.55; }
.tip-page .scenario-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 10px;
  margin: 12px 0;
}
.tip-page .scenario-card {
  display: grid;
  gap: 2px;
  padding: 12px;
  border: 1px solid var(--border);
  border-radius: 10px;
  background: var(--card);
}
.tip-page .scenario-card.is-next { box-shadow: inset 0 0 0 2px var(--primary); }
.tip-page .scenario-label { font-size: 0.68rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--muted); font-weight: 700; }
.tip-page .scenario-tip { font-size: 0.9rem; font-weight: 700; }
.tip-page .scenario-total { font-size: 0.8rem; color: var(--muted); font-variant-numeric: tabular-nums; }
.tip-page .scenario-each { font-size: 0.8rem; font-weight: 600; font-variant-numeric: tabular-nums; }
.tip-page .scenario-prompt { margin: 0; font-size: 0.86rem; color: var(--muted); }
.tip-page .scenario-actions { display: flex; flex-wrap: wrap; gap: 8px; }
.tip-page .scenario-actions .btn-secondary { margin: 0; }

.tip-page .round-block {
  margin-top: 22px;
  padding: 14px 16px;
  border-radius: 12px;
  background: var(--accent);
}
.tip-page .round-block p { margin: 0; font-size: 0.88rem; line-height: 1.55; }

/* ---------------------------------------------------------------- The prose */

.tip-page .fact-list { display: grid; gap: 12px; }
.tip-page .fact { background: var(--accent); border-radius: 12px; padding: 14px 16px; }
.tip-page .fact h3 { font-size: 0.95rem; margin: 0 0 6px; }
.tip-page .fact p { font-size: 0.88rem; line-height: 1.6; margin: 0; }
.tip-page .how-list { margin: 10px 0 0; padding-left: 20px; display: grid; gap: 8px; font-size: 0.9rem; line-height: 1.6; }
.tip-page .how-list li { margin-bottom: 0; }
.tip-page .formula-wrap { display: grid; gap: 8px; margin: 12px 0; }
.tip-page .formula { margin: 0; white-space: normal; overflow-wrap: anywhere; }
.tip-page .receipt-table { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
.tip-page .receipt-table th,
.tip-page .receipt-table td { padding: 7px 10px; border-bottom: 1px solid var(--border); }
.tip-page .receipt-table td { text-align: right; font-variant-numeric: tabular-nums; }
.tip-page .receipt-table tr.total-row th,
.tip-page .receipt-table tr.total-row td { font-weight: 700; border-bottom: 0; }

/* ---------------------------------------------------------------- Narrow screens */

@media (max-width: 640px) {
  .tip-page .scroll-hint { display: block; }
  .tip-page .item-head { grid-template-columns: minmax(0, 1fr) 38px; }
  .tip-page .item-head .field-dish { grid-column: 1 / 3; grid-row: 1; }
  .tip-page .item-head .field-dish-price { grid-column: 1; grid-row: 2; }
  .tip-page .item-head .remove { grid-column: 2; grid-row: 2; }
}

@media (max-width: 380px) {
  .tip-page .stepper { grid-template-columns: 40px minmax(0, 1fr) 40px; }
  .tip-page .person-amount { font-size: 0.9rem; }
}

@media (prefers-reduced-motion: reduce) {
  .tip-page * { transition: none !important; animation: none !important; }
}