/* © 2026 Qder.ai (Itay Funes). All rights reserved. Proprietary and confidential; see LICENSE. */
/* ==========================================================================
   Forms and cards, in the September design.

   Two public pages ask a stranger to type something: /contact, where a diner
   whose scan failed and an owner deciding whether to buy meet the same form,
   and /order, where a restaurateur picks a plan and signs. They were built on
   the film's stylesheet — Heebo and Assistant, 22px radii, a floating glass
   bar — and when the landing page changed underneath them they became the two
   pages that looked like a different company.

   Everything here is the same vocabulary as the landing page: 16px card radii
   on a hairline, 12px fields, the one cobalt, headings at weight 500, the
   ground behind and white on top. Nothing in this file is decorative; it is
   the set of parts a page needs to ask a question.

   Loaded after /shell.css, which carries the tokens, the header and the
   footer.
   ========================================================================== */

/* -------------------------------------------------------------- page head */

/* The opening of a secondary page: where you are, what this is, and why. The
   landing page has a hero; a page with a job has a sentence. */
.page-head { max-width: var(--shell); margin: 0 auto; padding: 44px var(--gutter) 28px; }
.page-head h1 { font-size: 36px; line-height: 48px; max-width: 20ch; }
.page-head .lede { margin-top: 14px; font-size: 16px; line-height: 24px; color: var(--muted); max-width: 62ch; }
.crumbs { display: flex; gap: 8px; align-items: center; font-size: 13px; font-weight: 500; color: var(--muted); margin-bottom: 14px; }
.crumbs a:hover { color: var(--cobalt); }

/* ------------------------------------------------------------------ layout */

.cols {
  max-width: var(--shell); margin: 0 auto;
  padding: 0 var(--gutter) var(--section-y);
  display: grid; grid-template-columns: minmax(0, 1.45fr) minmax(0, .85fr); gap: 24px; align-items: start;
}
.aside { position: sticky; top: calc(var(--nav-h) + 16px); display: grid; gap: 16px; }

/* ------------------------------------------------------------------- cards */

.card { background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card); padding: 28px; }
.card + .card { margin-top: 16px; }
.card > h2 { font-size: 20px; line-height: 28px; }
.card > .why { margin-top: 6px; font-size: 14.5px; line-height: 22px; color: var(--muted); }
.card > .why + * { margin-top: 22px; }
/* Links inside a card's PROSE are blue. Scoped to prose on purpose: an
   earlier ":not(.btn)" also caught the card's own buttons, and /order's
   "continue and sign" turned cobalt on cobalt — a 362x44 pill with invisible
   text on it. A rule that has to list every exception is the wrong rule. */
.card p a, .card li a, .card .why a, .card dd a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }   /* not by colour alone (axe, 2026-09-23) */
.card p a:hover, .card li a:hover, .card .why a:hover { text-decoration: underline; text-underline-offset: 2px; }

/* --------------------------------------------------- the choice that leads */

/* On /contact this decides which questions the rest of the form asks; on
   /order it picks the plan. Either way it is the first thing answered, so it
   is the one control drawn larger than a field. */
.who { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 10px; }
.who button {
  text-align: start; font-family: inherit; color: inherit; cursor: pointer;
  background: var(--bg); border: 1px solid var(--line); border-radius: var(--r-card);
  padding: 14px 16px; transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
.who button:hover { border-color: var(--cobalt-line); }
.who button[aria-pressed="true"] { border-color: var(--cobalt); box-shadow: inset 0 0 0 1px var(--cobalt); }
.who b { display: block; font-size: 15px; font-weight: 600; }
.who span { display: block; margin-top: 3px; font-size: 13px; line-height: 19px; color: var(--muted); }

/* ------------------------------------------------------------------ fields */

/* Every field owns the space under it. Adjacency rules (.field + .field)
   missed every case where a field follows something else — the choice, a
   note, a hidden group that has just been shown — which on this form is most
   of them. */
.field, .two { margin-bottom: 18px; }
.who { margin-bottom: 22px; }
.field:last-child, .two:last-child { margin-bottom: 0; }
.field > label, .lbl { display: block; font-size: 14px; font-weight: 600; margin-bottom: 7px; }
.field .hint { display: block; font-weight: 400; font-size: 13px; color: var(--muted); margin-top: 2px; }

input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
input[type="number"], select, textarea {
  width: 100%; font: 400 15px/22px var(--font); color: var(--ink);
  background: var(--bg); border: 1px solid var(--line); border-radius: 12px;
  padding: 11px 13px;
  transition: border-color .15s var(--ease), box-shadow .15s var(--ease);
}
select {
  /* The browser's own arrow is drawn on the wrong side in an RTL select on
     some platforms, so the control draws its own and keeps the side. */
  appearance: none;
  background-image: linear-gradient(45deg, transparent 50%, var(--muted) 50%), linear-gradient(135deg, var(--muted) 50%, transparent 50%);
  background-position: calc(var(--sel-x, 18px) - 5px) 21px, var(--sel-x, 18px) 21px;
  background-size: 5px 5px, 5px 5px; background-repeat: no-repeat;
  padding-inline-end: 34px;
}
/* inline-end is the left in Hebrew and the right in English, and a
   background-position is always measured from the left. */
:root[dir="rtl"] select { --sel-x: 23px; }
:root[dir="ltr"] select { --sel-x: calc(100% - 18px); }
textarea { min-height: 150px; resize: vertical; }
input:focus, select:focus, textarea:focus {
  outline: none; border-color: var(--cobalt); box-shadow: 0 0 0 3px var(--cobalt-wash);
}
input[aria-invalid="true"], textarea[aria-invalid="true"], select[aria-invalid="true"] { border-color: var(--crit); }
.two { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
/* One label in a two-up row often carries a hint on a second line, and the
   two controls then start at different heights. The row already stretches
   both fields to the same height, so the label is pushed up and the control
   falls to the bottom of it: the inputs line up whatever the labels do. */
.two .field { display: flex; flex-direction: column; margin-bottom: 0; }
.two .field > label { margin-bottom: auto; }
.two .field > label + * { margin-top: 7px; }
.err { color: var(--crit); font-size: 13px; font-weight: 500; margin-top: 6px; }

/* The honeypot. Positioned off-screen rather than display:none, because a bot
   that reads the stylesheet skips a hidden field and fills a visible one. */
.hp { position: absolute; inset-inline-start: -9999px; width: 1px; height: 1px; overflow: hidden; }

/* ------------------------------------------------------------------- notes */

.note {
  margin-bottom: 18px; padding: 13px 15px; border-radius: 12px;
  font-size: 14px; line-height: 21px; border: 1px solid transparent;
}
.note b { font-weight: 600; }
.note.venue { background: var(--warn-bg); border-color: #F2DFB4; color: #6E4300; }
.note.clock { background: var(--cobalt-wash); border-color: var(--cobalt-line); color: var(--cobalt-deep); }
.note.good  { background: var(--ok-bg); border-color: #BFE3D5; color: #0B5C37; }

/* -------------------------------------------------------------------- send */

.send { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; margin-top: 24px; }
.send .btn { height: 40px; padding: 0 24px; }
.consent { margin-top: 18px; font-size: 13px; line-height: 20px; color: var(--muted); }
.consent a { color: var(--cobalt); text-decoration: underline; text-underline-offset: 2px; }

/* ------------------------------------------------------------- the answer */

/* `hidden` loses to ANY author display rule — the browser's own
   `[hidden] { display: none }` comes from the user-agent sheet, and
   `.done { display: grid }` outranks it. The thank-you panel was therefore
   visible from page load, telling everyone their message had been received
   before they had written a word. */
.done[hidden] { display: none; }
.done { display: grid; gap: 10px; text-align: center; padding: 48px 24px; }
.done .tick {
  justify-self: center; display: grid; place-items: center;
  width: 52px; height: 52px; border-radius: 50%;
  background: var(--ok-bg); color: var(--ok); font-size: 24px;
}
.done h2 { font-size: 22px; line-height: 30px; }
.done p { color: var(--muted); font-size: 15px; line-height: 23px; }

/* ------------------------------------------------------------- list of rows */

.rows { display: grid; gap: 14px; }
.rows li { display: grid; gap: 2px; font-size: 14.5px; }
.rows b { font-weight: 600; }
.rows span { color: var(--muted); line-height: 21px; }

/* --------------------------------------------------------------- narrower */

@media (max-width: 1100px) {
  .cols { grid-template-columns: 1fr; }
  .aside { position: static; }
}

@media (max-width: 680px) {
  .page-head { padding: 28px var(--gutter) 20px; }
  .page-head h1 { font-size: 28px; line-height: 38px; }
  .card { padding: 20px; }
  .who { grid-template-columns: 1fr; }
  .two { grid-template-columns: 1fr; }
  /* A thumb, not a cursor. */
  input[type="text"], input[type="email"], input[type="tel"], input[type="date"],
  input[type="number"], select { padding: 13px; }
}