/* Reserve layer 14 — Oct 29, 2026. "Open by reservation only": the visitor's
   countdown ask, and the host's dashboard line + cut-off decision.

   Rollback is deleting the one <link> line in layout.php. Everything here
   styles a plain .panel, paragraph, <details> or form that already says and
   does the same thing without it: the meter degrades to a row of empty spans
   (inert, and the count is in words directly above it as well as in the
   element's aria-label), and the decision buttons degrade to two ordinary
   buttons. Nothing functional lives in this file.

   Direction 05 throughout: hairline boxes, one accent, no radius, no shadow.
   Reading text stays at or above the .9rem floor (Dallas, Sep 18). */

/* ---------- the badge beside the title ---------- */
/* Quieter than .badge-open and distinct from .badge-hours' dashed rule: this
   is a standing fact about how the cafe opens, not a live state. */
.badge-reserve {
  color: var(--mid, #555);
  border-color: var(--rule-soft, #e2ded8);
}

/* ---------- the visitor's ask ---------- */
.panel.reserve {
  border-left: 3px solid var(--accent, #c8511f);
}
.panel.reserve.reserve-off {
  border-left-color: var(--rule-soft, #e2ded8);
}
.reserve-line {
  font-size: 1rem;
  line-height: 1.45;
  margin: 0 0 4px;
}
.panel.reserve .small,
.reserve-host .small {
  font-size: .9rem;      /* the .9rem reading floor, not chrome micro-type */
  line-height: 1.45;
}
.panel.reserve form.inline {
  margin-top: 4px;
}

/* The meter: one mark per person needed, lit as they come in. A count, not a
   progress bar — the number it is counting is small and human. */
.reserve-meter {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  margin: 10px 0 12px;
}
.reserve-dot {
  display: block;
  width: 13px;
  height: 13px;
  border: 1px solid var(--rule, #111);
  background: transparent;
}
.reserve-dot.on {
  background: var(--accent, #c8511f);
  border-color: var(--accent, #c8511f);
}
.panel.reserve.reserve-met .reserve-line b {
  color: var(--accent-ink, #a8430f);
}

/* ---------- the host's line on the dashboard ---------- */
.reserve-host {
  border: 1px solid var(--rule-soft, #e2ded8);
  border-left: 3px solid var(--rule-soft, #e2ded8);
  background: var(--paper, #fff);
  padding: 10px 12px;
  margin: 10px 0 12px;
}
.reserve-host.reserve-met {
  border-left-color: var(--accent, #c8511f);
}
.reserve-host .reserve-line {
  font-size: .95rem;
  margin: 0;
}
.reserve-ok {
  color: var(--accent-ink, #a8430f);
}
.reserve-host p {
  margin: 4px 0 0;
}

/* The cut-off question. Marked with the accent because it is the one thing on
   this page actually waiting on the host — and it is a question, not an alarm:
   nothing has happened or will happen on its own. */
.reserve-decide {
  border-top: 1px solid var(--rule-soft, #e2ded8);
  margin-top: 9px;
  padding-top: 9px;
}
.reserve-decide p {
  font-size: .95rem;
  line-height: 1.45;
  margin: 0 0 8px;
}
.reserve-decide form.inline {
  display: inline-block;
  margin: 0 6px 0 0;
}

.reserve-who {
  margin-top: 8px;
}
.reserve-who summary {
  font-size: .9rem;
  cursor: pointer;
}
.reserve-who .hostline {
  margin-top: 6px;
}

/* ---------- the host's edit-form fields ---------- */
.reserve-fields {
  display: flex;
  flex-wrap: wrap;
  gap: 12px 18px;
  margin-top: 10px;
}
.reserve-fields label {
  flex: 1 1 150px;
  min-width: 0;        /* a flex item with an input must be allowed to shrink */
}
.reserve-fields p {
  flex: 1 1 100%;
  margin: 0;
}

/* ---------- phone ---------- */
/* The two cut-off buttons are the only place this layer can push past 390px,
   so they stack rather than overflow. Everything else is already fluid. */
@media (max-width: 460px) {
  .reserve-decide form.inline {
    display: block;
    margin: 0 0 6px;
  }
  /* The cut-off decision is something the host taps on a phone, standing in
     his own kitchen, in the one minute he has to answer it — so it gets the
     same 44px target the order-table actions got after the Oct 5 sweep
     (finding 1), matching .orders td:last-child .btn in layer 12. .btn-sm is
     32px tall, which is what these were before this rule. */
  .reserve-decide form.inline .btn {
    display: block;
    width: 100%;
    min-height: 44px;
    padding: 0 14px;
    font-size: .9rem;
    line-height: 44px;
    text-align: center;
  }
  .reserve-fields {
    gap: 10px;
  }
  .reserve-fields label {
    flex: 1 1 100%;
  }
}