/* ==========================================================================
   Meridian Petroleum Group — the deals desk
   --------------------------------------------------------------------------
   This sheet used to carry its own palette: amber gradients, green pills,
   rounded cards. Those tokens (--amber, --line, --slate, --green) were
   retired with the house style rewrite, so every rule that referenced one
   was silently falling back to nothing -- transparent buttons, borderless
   inputs, colourless status labels. That is what "doesn't look nice" was.

   Rewritten against the house tokens in style.css. Same rules as everywhere
   else: buff stock, one oxblood, square corners, rules instead of cards.
   A form on a broker's site is a printed enquiry slip, not an app screen.
   ========================================================================== */

/* --------------------------------------------------------------------------
   Opener — the same dark masthead panel the other pages use
   -------------------------------------------------------------------------- */
.deals-hero{
  background:var(--ink-deep);
  color:var(--sheet);
  border-bottom:3px double var(--rule-firm);
}
.deals-hero .inner{
  max-width:var(--wide);
  margin-inline:auto;
  padding:clamp(3.5rem,9vw,6rem) clamp(20px,5vw,56px) clamp(3rem,8vw,5rem);
}
.deals-hero h1,
.deals-hero h1.p{
  font-family:var(--display);
  font-weight:400;
  font-size:clamp(2.05rem,5.2vw,3.3rem);
  line-height:1.13;
  letter-spacing:-.006em;
  margin-bottom:1.1rem;
  max-width:22ch;
  text-wrap:balance;
  color:var(--sheet);
}
.deals-hero p{ color:#CFC7B6 }
.deals-hero .lead{ font-size:1.13rem; line-height:1.66; max-width:38rem }

/* Figures set as a printed line under the opener, not as dashboard tiles.
   Matches .hero-meta on the home page so the two read as one house. */
.deals-pulse{
  display:flex; flex-wrap:wrap;
  gap:1.5rem 3.2rem;
  margin-top:2.4rem;
  padding-top:1.9rem;
  border-top:1px solid #3A352C;
}
.pulse-cell{ display:flex; flex-direction:column-reverse; gap:.3rem }
.pulse-num{
  font-family:var(--serif);
  font-size:1.45rem; font-weight:400;
  line-height:1;
  color:var(--sheet);
  font-variant-numeric:lining-nums tabular-nums;
}
.pulse-label{
  font-family:var(--grotesk);
  font-size:.68rem; font-weight:500;
  letter-spacing:.1em; text-transform:uppercase;
  color:#9A9283;
}
/* A small oxblood square where a blinking green dot used to be. A ledger
   marks a live line in the margin; it does not animate. */
.pulse-live{
  display:inline-block; width:.42rem; height:.42rem;
  background:var(--oxblood-pale);
  margin-right:.5rem; vertical-align:.04em;
}

/* --------------------------------------------------------------------------
   The two enquiry columns, divided by a rule
   -------------------------------------------------------------------------- */
.split{
  max-width:var(--wide);
  margin-inline:auto;
  padding-inline:clamp(20px,5vw,56px);
  display:grid;
  grid-template-columns:repeat(auto-fit,minmax(21rem,1fr));
  gap:0;
}
.split > .col{
  background:transparent;
  padding:clamp(3rem,6vw,4.4rem) 2.6rem clamp(3rem,6vw,4.4rem) 0;
}
.split > .col + .col{
  border-left:1px solid var(--rule);
  padding-left:2.6rem;
}
.split h2{ font-size:1.42rem; margin-bottom:.5rem }
.split .sub{ margin-bottom:2rem }

/* --------------------------------------------------------------------------
   The enquiry slip. Ruled fields on the sheet stock, oxblood on focus.
   -------------------------------------------------------------------------- */
.frm{ display:grid; gap:1.15rem }
.frm .row{ display:grid; grid-template-columns:1fr 1fr; gap:1.15rem }
.frm .row-3{ display:grid; grid-template-columns:repeat(3,1fr); gap:1.15rem }

.field label{
  display:block;
  font-family:var(--grotesk);
  font-size:.62rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--quiet);
  margin-bottom:.45rem;
}
.field label small{
  display:inline;
  font-size:.62rem; letter-spacing:.16em;
  text-transform:none; color:var(--quiet);
}
.field input,
.field select,
.field textarea{
  width:100%;
  padding:.72rem .85rem;
  border:1px solid var(--rule-firm);
  border-radius:0;
  background:var(--sheet);
  color:var(--ink);
  font-family:var(--serif);
  font-size:1rem;
  line-height:1.5;
  transition:border-color .15s ease, background-color .15s ease;
}
.field input::placeholder,
.field textarea::placeholder{ color:#9A9283; font-style:italic }
.field input:focus,
.field select:focus,
.field textarea:focus{
  outline:none;
  border-color:var(--oxblood);
  background:#FFFDF8;
}
.field textarea{ min-height:6.5rem; resize:vertical }
/* A date input renders its own control; keep it on the same baseline as the
   text fields rather than letting the browser pick a shorter height. */
.field input[type="date"]{ min-height:2.95rem }

.frm-actions{
  display:flex; flex-wrap:wrap; align-items:center;
  gap:.9rem 1.6rem;
  margin-top:.6rem;
}
/* .btn already carries the house shape from style.css; these rules only set
   the colour, since a form sits on buff rather than on the dark band. */
.frm-actions .btn{
  background:var(--oxblood); color:var(--sheet); border-color:var(--oxblood);
  cursor:pointer;
}
.frm-actions .btn:hover{ background:var(--ink); border-color:var(--ink) }
.frm-actions .whatsapp{
  font-family:var(--grotesk);
  font-size:.69rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--oxblood);
  border-bottom:1px solid var(--rule-firm);
  padding-bottom:.25rem;
}
.frm-actions .whatsapp:hover{ color:var(--ink); border-bottom-color:var(--ink) }

.frm-status{ font-size:.9rem; color:var(--quiet); margin:0 }
.frm-status.ok{ color:var(--ink) }
.frm-status.err{ color:var(--oxblood) }

/* --------------------------------------------------------------------------
   Recent bookings — a printed table, same rules as the rate tables
   -------------------------------------------------------------------------- */
.deals-live{
  background:var(--paper-warm);
  border-block:1px solid var(--rule-firm);
  padding-block:clamp(2.6rem,6vw,4.2rem);
  padding-inline:clamp(20px,5vw,56px);
}
.deals-live .inner{ max-width:var(--wide); margin-inline:auto }
.deals-live h3{
  font-family:var(--grotesk);
  font-size:.62rem; font-weight:600;
  letter-spacing:.2em; text-transform:uppercase;
  color:var(--quiet);
  margin-bottom:1.2rem;
}
.deals-live h3 .pulse-live{ background:var(--oxblood) }

.deals-list{ border-top:1px solid var(--rule-firm) }
.deal-row{
  display:grid;
  grid-template-columns:7.5rem minmax(0,1fr) 7rem 7rem 9rem;
  gap:1.2rem;
  align-items:baseline;
  padding:.95rem 0;
  border-bottom:1px solid var(--rule);
  font-size:.95rem;
}
.deal-row:last-child{ border-bottom:1px solid var(--rule-firm) }

/* The status was a coloured pill. Here it is a letterspaced label in the
   margin, which is how a manifest marks the state of a line. */
.deal-row .status{
  font-family:var(--grotesk);
  font-size:.58rem; font-weight:600;
  letter-spacing:.16em; text-transform:uppercase;
  color:var(--quiet);
  white-space:nowrap;
}
.deal-row .status.BOOKED,
.deal-row .status.INTRANSIT{ color:var(--oxblood) }
.deal-row .status.DELIVERED,
.deal-row .status.CLOSED{ color:var(--quiet) }

.deal-row .lane{ color:var(--ink) }
.deal-row .lane small{
  display:block;
  color:var(--quiet);
  font-size:.85rem;
  line-height:1.5;
}
.deal-row .rate{
  color:var(--ink);
  font-variant-numeric:lining-nums tabular-nums;
  white-space:nowrap;
}
.deal-row .when{ font-size:.85rem; color:var(--quiet) }
.deals-legend{ font-size:.85rem; color:var(--quiet); margin:1.1rem 0 0 }

/* --------------------------------------------------------------------------
   How it runs. Numbered because the five steps really are a sequence --
   the rate-conf cannot be signed before the carriers have bid.
   -------------------------------------------------------------------------- */
.flow{
  max-width:var(--wide);
  margin-inline:auto;
  padding:clamp(3.2rem,7vw,5.2rem) clamp(20px,5vw,56px);
}
.flow h2{ margin-bottom:.6rem }
.flow .sub{ margin-bottom:2.4rem }
/* Set as a ruled column rather than a row of boxes. Five items in an
   auto-fit grid wrap to three-and-two, and the first item of the second row
   then carries a left rule that divides nothing -- a stack cannot go wrong
   at any width, and it matches the process list on /cargo. */
.flow-grid{
  display:grid;
  border-top:1px solid var(--rule-firm);
}
.flow-step{
  display:grid;
  grid-template-columns:3.2rem 1fr;
  gap:0 1.5rem;
  background:transparent;
  border:0; border-bottom:1px solid var(--rule); border-radius:0;
  padding:1.5rem 0;
}
.flow-step .n{
  grid-column:1; grid-row:1;
  font-family:var(--serif);
  font-size:1rem;
  font-variant-numeric:lining-nums tabular-nums;
  color:var(--oxblood);
  padding-top:.12rem;
}
.flow-step h4, .flow-step p{ grid-column:2 }
.flow-step h4{
  font-family:var(--display); font-weight:400;
  font-size:1.08rem; line-height:1.3;
  margin-bottom:.3rem;
}
.flow-step p{ font-size:.97rem; color:var(--ink-soft); margin:0 }

/* --------------------------------------------------------------------------
   Talk to a person — the closing band, same as every other page's
   -------------------------------------------------------------------------- */
.direct{
  background:var(--ink-deep); color:var(--sheet);
  border-block:3px double var(--rule-firm);
  padding-block:clamp(3.2rem,7vw,4.6rem);
  padding-inline:clamp(20px,5vw,56px);
}
.direct .inner{ max-width:var(--wide); margin-inline:auto }
.direct h3{
  font-family:var(--display); font-weight:400;
  font-size:clamp(1.48rem,3vw,2rem); line-height:1.24;
  color:var(--sheet); margin-bottom:.8rem; max-width:28ch;
}
.direct p{ color:#CFC7B6; margin-bottom:1.9rem }
.direct .btn{
  background:var(--oxblood); color:var(--sheet); border-color:var(--oxblood);
  margin-right:1rem;
}
.direct .btn:hover{ background:transparent; border-color:var(--sheet) }
.direct .btn.alt{ background:transparent; color:var(--sheet); border-color:#6E675A }
.direct .btn.alt:hover{ border-color:var(--sheet) }

/* --------------------------------------------------------------------------
   Narrow stock
   -------------------------------------------------------------------------- */
@media (max-width:820px){
  .split > .col{ padding-right:0 }
  .split > .col + .col{
    border-left:0; padding-left:0;
    border-top:1px solid var(--rule);
  }
}
@media (max-width:640px){
  .flow-step{ grid-template-columns:2.4rem 1fr; gap:0 1rem }
}
@media (max-width:700px){
  /* Five columns of manifest do not fit a phone; stack the line instead,
     with the status still first so the eye finds the state of each load. */
  .deal-row{ grid-template-columns:1fr; gap:.3rem; padding:1.15rem 0 }
  .deal-row .rate{ font-size:1rem }
}
@media (max-width:580px){
  .frm .row, .frm .row-3{ grid-template-columns:1fr }
}

/* An empty manifest, set as a line of text rather than as a blank box. */
.deals-empty{
  margin:0;
  padding:1.6rem 0;
  border-bottom:1px solid var(--rule-firm);
  color:var(--quiet);
  font-size:.95rem;
  max-width:44rem;
}

/* --------------------------------------------------------------------------
   The enquiry slip, taken one part at a time
   --------------------------------------------------------------------------
   A twenty-field form is a wall, and a wall on a phone is a bounce. So it is
   read in three parts, the way a clerk fills a slip: the lane, the load, then
   who to come back to.

   Built as progressive enhancement, deliberately. With no JavaScript every
   fieldset stays open and the marks stay hidden, so the form is one long slip
   that still submits — and Netlify still sees every field at build time, which
   is what registers the form at all. The wizard is an improvement on a working
   form, never a requirement for one.
   -------------------------------------------------------------------------- */

/* A fieldset is a grouping element, not a box. Strip the browser's frame and
   let it inherit the form's own rhythm. */
.wiz-step{
  border:0; padding:0; margin:0;
  display:grid; gap:1.15rem;
}
/* `hidden` is only a UA-stylesheet `display:none`, so ANY author `display`
   silently beats it -- the script set .hidden on steps two and three and the
   browser carried on showing them, which is how the wizard shipped looking
   exactly like the wall it replaced. Restate it here, and for the marks and
   nav, which are hidden in the markup for the no-JS case. */
.wiz-step[hidden],
.wiz-marks[hidden],
.wiz-nav[hidden],
.wiz-back[hidden],
.wiz-next[hidden],
.frm-actions[hidden]{ display:none !important }
.wiz-step > legend{
  font-family:var(--display);
  font-weight:400;
  font-size:1.18rem;
  line-height:1.3;
  color:var(--ink);
  padding:0;
  margin-bottom:.35rem;
}

/* The marks. Set as a clause list — letterspaced Franklin caps with roman
   numerals, the same numbering the process lists use — under a single hairline
   that the active mark sits on. Not a progress pill; this house does not have
   pills. */
.wiz-marks{
  list-style:none;
  counter-reset:wizmark;
  display:flex; flex-wrap:wrap;
  gap:0 1.6rem;
  margin:0 0 1.9rem;
  padding-bottom:.7rem;
  border-bottom:1px solid var(--rule);
}
.wiz-marks li{
  counter-increment:wizmark;
  font-family:var(--grotesk);
  font-size:.6rem; font-weight:600;
  letter-spacing:.18em; text-transform:uppercase;
  color:#A99E86;
  padding-bottom:.7rem;
  margin-bottom:-.7rem;          /* sit the underline on the group's rule */
  border-bottom:2px solid transparent;
  transition:color .2s ease, border-color .2s ease;
}
.wiz-marks li::before{
  content:counter(wizmark, upper-roman) ". ";
  font-family:var(--serif);
  font-size:.82rem;
  letter-spacing:0;
  font-variant-numeric:lining-nums;
}
/* Done is ink, here is oxblood, still to come is quiet. Three states, because
   "which of these have I already answered" is the question a multi-step form
   has to answer without being asked. */
.wiz-marks li[data-state="done"]{ color:var(--ink-soft) }
.wiz-marks li[data-state="here"]{
  color:var(--oxblood);
  border-bottom-color:var(--oxblood);
}

.wiz-nav{
  display:flex; align-items:center;
  gap:1.2rem;
  margin-top:.4rem;
}
.wiz-nav .wiz-where{
  font-family:var(--grotesk);
  font-size:.62rem; letter-spacing:.16em; text-transform:uppercase;
  color:var(--quiet);
  margin-right:auto;
}
.wiz-next, .wiz-back{
  font-family:var(--grotesk);
  font-size:.69rem; font-weight:600;
  letter-spacing:.14em; text-transform:uppercase;
  padding:.72rem 1.5rem;
  border:1px solid currentColor;
  border-radius:0;
  background:transparent;
  cursor:pointer;
  transition:background-color .15s ease, color .15s ease, border-color .15s ease;
}
.wiz-next{ background:var(--oxblood); color:var(--sheet); border-color:var(--oxblood) }
.wiz-next:hover{ background:var(--ink); border-color:var(--ink) }
.wiz-back{ color:var(--quiet); border-color:var(--rule-firm) }
.wiz-back:hover{ color:var(--ink); border-color:var(--ink) }

/* A field that was not filled in says so where the eye already is, rather than
   scrolling the page to a browser bubble. */
.field input[aria-invalid="true"],
.field select[aria-invalid="true"],
.field textarea[aria-invalid="true"]{
  border-color:var(--oxblood);
  background:#FFF8F5;
}
.field-error{
  margin:.35rem 0 0;
  font-family:var(--grotesk);
  font-size:.62rem; letter-spacing:.1em; text-transform:uppercase;
  color:var(--oxblood);
}
.field-help{
  margin:.4rem 0 0;
  font-size:.88rem;
  line-height:1.55;
  color:var(--quiet);
  max-width:34rem;
}

@media (max-width:640px){
  .wiz-marks{ gap:0 1rem }
  .wiz-marks li{ font-size:.55rem; letter-spacing:.14em }
  .wiz-nav{ gap:.8rem }
  .wiz-next, .wiz-back{ padding:.72rem 1.1rem }
}
@media (prefers-reduced-motion:reduce){
  .wiz-marks li{ transition:none }
}