/* store_home.css — the store's home screen (design 4, final) and what hangs off
 * it: the last-order card, the set-2 faces, the one-tap rating with «تراجع»,
 * the rated state, the optional details, the rows (طلباتي · شكوى أو سؤال ·
 * بياناتي · English), the complaint's status line, the «طلباتي» list and the
 * header's «الرئيسية» control.
 *
 * SOURCE. Every value is the approved mockup's
 * (Claude-code-UI/mockups/2026-09-21-preview-screen-options/design-home-final.html,
 * round 3b, built by _build/build_home_final.py H6_CSS and
 * _build/build_header5.py STORE_HX5_CSS / HX5_EXTRA_CSS, plus
 * _build/build_header.py for the «طلباتي» rows and the status pills),
 * translated into store.css's idiom:
 *   * the `s-` prefix instead of the mockup's `h6-` / `hx5-` / `hx-`, and a
 *     name that says what the thing is (the mockup's name is in each comment);
 *   * rem, not px, except the face box, which is the SVG's own 30px;
 *   * PHYSICAL RTL, exactly like store.css:9-11. The one logical property the
 *     mockup used (`margin-inline-start` on the complaint line) is physical
 *     here, and every direction-dependent rule has its English mirror in
 *     store_ltr.css (H1-H3), scoped under html[dir="ltr"].
 * Nothing in store.css is redefined: the card sits on .s-choice-title /
 * .s-choice-meta / .s-pill / .s-stack / .s-btn / .s-tags / .s-field, the same
 * vocabulary the rest of the store already speaks.
 *
 * ASSETS ONLY IN THIS COMMIT. No layout links this file yet; the wiring wave
 * adds it next to "store" in layouts/store.html.erb. Until then no page's
 * bytes or geometry change.
 *
 * CSP. style-src is 'self' + nonce, so every state below is a CLASS or an
 * ATTRIBUTE the server renders or rating_undo_controller.js toggles — never a
 * style attribute, never el.style. The undo bar drains through five classes
 * (.s-undo-r5 … .s-undo-r1, one per remaining second) for exactly that reason.
 *
 * Contrast — the mockup's declared pairs, to be MEASURED on the rendered page
 * before the first shot (SPEC §6.5), not taken from this comment:
 *   #0c4a6e on #f0f9ff  card title / question   (store.css: 8.25:1 on #e0f2fe)
 *   #334155 on #fff     face word
 *   #0369a1 on #fff     «تراجع», 5.93:1 (store.css's own table)
 *   #BE123C on #FEECEF, #B45309 on #FEF5E7, #15803D on #E9F9EF — the complaint
 *     pills, admin.css's --ws-rose/-amber/-green t/b pairs (:320-323), which
 *     the staff complaints screen already carries.
 */

/* ── [hidden] must win ─────────────────────────────────────────────────────
 * The UA's `[hidden] { display: none }` is (0,1,0) and LOSES to any class
 * that sets display, so a `.s-rate[hidden]` would still be drawn (memory
 * reference_hidden_attr_loses_to_class: the failure is open, the page shows
 * both states at once). rating_undo_controller.js switches the card between
 * the faces and the pending state with `hidden`, so every class it toggles is
 * listed here. */
.s-rate[hidden],
.s-faces[hidden],
.s-got[hidden],
.s-undo-bar[hidden],
.s-nav-row[hidden] { display: none; }

/* ── the header on the home and the screens outside the funnel ─────────────
 * build_header5.py R1 + design 4's one control. */
/* .s-back.hx5-back — «رجوع» becomes a 44x44 chevron; the word stays as the
   button's accessible name (visually hidden). The chevron is an SVG pair
   chosen by language (store/shared/icons/_back.html.erb): the CSP forbids the
   inline transform that would flip one. */
.s-back.s-back-icon button {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.75rem;
  min-width: 2.75rem;
  padding: 0;
}
.s-back-icon svg { display: block; }
/* .hx5-tr — the trailing cluster of the header row */
.s-head-tr { flex: 0 0 auto; display: flex; align-items: center; gap: 0.25rem; }
/* .hx5-btn — «الرئيسية»: an icon over an 11px label, in the header's own
   vocabulary (.s-back: 1px #e5e7eb, radius .625rem, white), 44x44 at least */
.s-head-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 0.0625rem;
  min-width: 2.75rem;
  min-height: 2.75rem;
  padding: 0.1875rem 0.25rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.625rem;
  background: #fff;
  color: #0c4a6e;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;
}
.s-head-btn svg { flex: none; display: block; }
.s-head-btn[aria-current="page"] { border-color: #0EA5E9; background: #e0f2fe; }
.s-head-btn:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

/* ── the last-order card ──────────────────────────────────────────────────
 * .hx5-card / .hx5-card-top. The card's own blue ground marks it as THE
 * thing on the page; the rows under it are white. */
.s-home-card {
  margin-bottom: 0.75rem;
  padding: 0.875rem;
  border: 1px solid #bae6fd;
  border-radius: 0.875rem;
  background: #f0f9ff;
}
.s-home-card-top { display: flex; align-items: center; gap: 0.5rem; }
.s-home-card-top .s-choice-title { flex: 1 1 auto; min-width: 0; }
.s-home-card-top .s-pill { flex: none; }
.s-home-card .s-stack { margin-top: 0.75rem; }
/* .h6-cx — «الطلب ده اتلغى.» under a cancelled card's lines */
.s-home-card-note { margin: 0.5rem 0 0; }

/* the order's live word on the card and on «طلباتي» (build_header.py:286-288).
   `done` and `off` carry store.css's .s-pill-open / .s-pill-shut colours under
   names that say what they mean for an ORDER. */
.s-pill-live { background: #e0f2fe; color: #0c4a6e; }
.s-pill-done { background: rgba(34, 197, 94, .12); color: #15803d; }
.s-pill-off  { background: rgba(100, 116, 139, .12); color: #334155; }

/* .hx5-pair — the two doors into ordering, side by side: «طلب جديد» · «المنيو» */
.s-home-pair {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0.625rem;
  margin-top: 0.25rem;
}

/* ── the rating, inside the card (H2-H5) ──────────────────────────────────
 * .h6-rate — one block per state (the faces, the pending tap, the rated
 * face); the card shows exactly one. It sits above «اطلب تاني». */
.s-rate {
  display: block;
  margin: 0.75rem 0 0;
  padding: 0.75rem 0 0;
  border: 0;
  border-top: 1px solid #bae6fd;
}
/* .h6-q — «قيّم طلبك» */
.s-rate-q {
  display: block;
  margin: 0 0 0.5rem;
  font-size: 0.8125rem;
  font-weight: 700;
  color: #0c4a6e;
}

/* .h6-faces — FIVE FACES, ONE ROW, at every width. Five equal tracks: at 360px
   the card's content box is 300px, so each button is (300 - 4 x 3) / 5 =
   57.6px wide, over the 44px floor. A word that does not fit its track WRAPS
   INSIDE IT (the mockup's «وحش خالص» takes two lines at 360) and the whole
   row grows together, because a grid row is as tall as its tallest cell. */
.s-faces {
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 0.1875rem;
}
/* .h6-face — a real <button type="submit" name="stars"> in the card's GET
   form: with JavaScript off it opens today's rate screen with that score
   chosen; with JavaScript on rating_undo_controller.js takes the CLICK. */
.s-face {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 0.1875rem;
  min-width: 0;
  min-height: 2.75rem;
  margin: 0;
  padding: 0.375rem 0 0.3125rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.75rem;
  background: #fff;
  font: inherit;
  font-size: 0.6875rem;
  font-weight: 700;
  line-height: 1.3;
  cursor: pointer;
}
.s-face svg { display: block; flex: none; }
/* .h6-fi — the face's own box, the SVG's 30px, so a slow font cannot move it */
.s-face-i { display: block; flex: none; width: 30px; height: 30px; }
.s-face-w {
  display: block;
  max-width: 100%;
  color: #334155;
  text-align: center;
  white-space: normal;
  overflow-wrap: break-word;
}
.s-face:active { background: #f0f9ff; }
.s-face:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
/* .h6-on — the chosen face on the rate screen (JS off: the server knows it) */
.s-face.s-face-on { border-color: #0369a1; box-shadow: inset 0 0 0 1px #0369a1; background: #e0f2fe; }

/* ── the pending tap (H4): the face, its word, «هيتسجّل خلال N ثواني»,
 * «تراجع», and a bar that drains in 5 s ─────────────────────────────── */
/* .h6-got — the chosen face read back; shared by the pending and the rated
   state, so the face does not jump when the 5 s run out */
.s-got { display: flex; align-items: center; gap: 0.625rem; min-height: 2.75rem; }
.s-got-f { display: flex; flex: none; }
.s-got-f svg { display: block; }
.s-got-t { display: flex; flex: 1 1 auto; flex-direction: column; min-width: 0; }
.s-got-w { font-size: 0.9375rem; font-weight: 700; line-height: 1.5; color: #0c4a6e; }
.s-got-s { font-size: 0.75rem; line-height: 1.5; color: #64748b; }
.s-got-s b { font-variant-numeric: tabular-nums; }
/* .h6-undo — «تراجع», >= 44 x 88 so it is the easiest thing on the card to hit */
.s-undo {
  display: flex;
  flex: none;
  align-items: center;
  justify-content: center;
  min-width: 5.5rem;
  min-height: 2.75rem;
  padding: 0 1rem;
  border: 1px solid #0369a1;
  border-radius: 0.75rem;
  background: #fff;
  color: #0369a1;
  font: inherit;
  font-size: 0.9375rem;
  font-weight: 700;
  cursor: pointer;
}
.s-undo:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }

/* .h6-bar — THE BAR IS FIVE CLASSES, NOT A WIDTH. A width set from JS would be
   el.style, which the CSP drops in silence. rating_undo_controller.js puts
   .s-undo-rN on the <span> for the N seconds that are left; each class is a
   STATIC scale (N/5), so the bar is right even with no animation at all, and
   a class change always lands on the true remaining time instead of
   restarting the drain from full.
   Physical RTL: the bar shrinks towards the right edge (origin right), i.e.
   it empties from the left, the way an Arabic reader's eye leaves it.
   store_ltr.css H3 mirrors the origin. */
.s-undo-bar {
  height: 0.25rem;
  margin-top: 0.5rem;
  border-radius: 999px;
  background: #e0f2fe;
  overflow: hidden;
}
.s-undo-bar > span {
  display: block;
  height: 100%;
  background: #0369a1;
  transform-origin: right center;
}
.s-undo-bar > .s-undo-r5 { transform: scaleX(1); }
.s-undo-bar > .s-undo-r4 { transform: scaleX(.8); }
.s-undo-bar > .s-undo-r3 { transform: scaleX(.6); }
.s-undo-bar > .s-undo-r2 { transform: scaleX(.4); }
.s-undo-bar > .s-undo-r1 { transform: scaleX(.2); }
/* The smooth drain is an ENHANCEMENT for customers who have not asked for
   less motion. Everyone else gets the five static steps above: the bar still
   says how long is left, it just does not glide. Written as a no-preference
   block (not an animation cancelled under `reduce`) so there is nothing to
   forget to cancel. Each animation starts at its own class's scale, so
   switching rN -> rN-1 on the second continues from where the bar is. */
@media (prefers-reduced-motion: no-preference) {
  .s-undo-bar > .s-undo-r5 { animation: s-undo-5 5s linear forwards; }
  .s-undo-bar > .s-undo-r4 { animation: s-undo-4 4s linear forwards; }
  .s-undo-bar > .s-undo-r3 { animation: s-undo-3 3s linear forwards; }
  .s-undo-bar > .s-undo-r2 { animation: s-undo-2 2s linear forwards; }
  .s-undo-bar > .s-undo-r1 { animation: s-undo-1 1s linear forwards; }
}
@keyframes s-undo-5 { from { transform: scaleX(1); }  to { transform: scaleX(0); } }
@keyframes s-undo-4 { from { transform: scaleX(.8); } to { transform: scaleX(0); } }
@keyframes s-undo-3 { from { transform: scaleX(.6); } to { transform: scaleX(0); } }
@keyframes s-undo-2 { from { transform: scaleX(.4); } to { transform: scaleX(0); } }
@keyframes s-undo-1 { from { transform: scaleX(.2); } to { transform: scaleX(0); } }

/* ── the rated state (H2) and the optional details (H7) ─────────────────── */
/* .h6-more — a disclosure, not a wall: «ضيف تفاصيل (اختياري)» */
.s-more { margin-top: 0.25rem; }
.s-more > summary {
  display: flex;
  align-items: center;
  min-height: 2.75rem;
  color: #0369a1;
  font-size: 0.8125rem;
  font-weight: 700;
  text-decoration: underline;
  cursor: pointer;
  list-style: none;
}
.s-more > summary::-webkit-details-marker { display: none; }
.s-more > summary::marker { content: ""; }
.s-more > summary:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.s-more .s-tags { margin: 0.25rem 0 0.75rem; }
.s-more .s-field { margin-bottom: 0.5rem; }
/* .h6-ro — the chosen chips, read-only after 24 h: labels, not controls, so
   they are not held to 44px */
.s-ro { display: flex; flex-wrap: wrap; gap: 0.375rem; margin-top: 0.5rem; }
.s-ro span {
  display: inline-flex;
  align-items: center;
  min-height: 1.75rem;
  padding: 0.125rem 0.625rem;
  border: 1px solid #e5e7eb;
  border-radius: 999px;
  background: #fff;
  font-size: 0.75rem;
  font-weight: 600;
  color: #334155;
}
/* .h6-rc — his comment, as typed: line breaks kept, a long word broken */
.s-rc {
  margin: 0.5rem 0 0;
  font-size: 0.8125rem;
  color: #334155;
  white-space: pre-line;
  overflow-wrap: anywhere;
}

/* ── the rate screen with faces (H3) ──────────────────────────────────── */
/* «مش دلوقتي»'s form, 1rem under «ابعت التقييم» — the mockup's form is
   `.s-stack` (margin-top 1rem); a class of its own here, because .s-stack's
   `* + *` would add .625rem more above the button (the form's hidden inputs). */
.s-rate-skip { margin-top: 1rem; }
/* .h6-rfaces / .h6-rf — the same five faces as links (a GET that re-renders,
   exactly as today's ★ are), on the rate screen */
.s-rfaces { margin: 0.25rem 0 0.5rem; }
.s-rf { color: inherit; text-decoration: none; }
/* .h6-rhint — «دوس على وش عشان تكمّل.» */
.s-rhint { margin: 0 0 0.75rem; text-align: center; }
/* .h6-rd — the one face of an answered rating */
.s-rd { display: flex; justify-content: center; margin: 0.25rem 0; }
.s-rd svg { display: block; }

/* ── the rows (design 4): طلباتي · شكوى أو سؤال · بياناتي · English ────── */
/* .hx5-rows / .hx5-row. `.s-row` is already store.css's totals row (:502), so
   these are NAV rows: an icon, the label, a chevron towards the reading end
   (store/shared/icons/_chev.html.erb picks the glyph by language). */
.s-nav-rows {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 0.5rem;
  margin-top: 1rem;
}
.s-nav-row {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  min-height: 3rem;
  padding: 0.625rem 0.875rem;
  border: 1px solid #e5e7eb;
  border-radius: 0.875rem;
  background: #fff;
  color: #111827;
  font-size: 0.9375rem;
  font-weight: 700;
  text-decoration: none;
}
/* a <button> row (the «English» row is a POST: a GET must never write) wears
   the same face as an <a> row */
button.s-nav-row { width: 100%; font-family: inherit; text-align: inherit; cursor: pointer; }
.s-nav-row svg { display: block; flex: none; color: #0369a1; }
.s-nav-row:active { background: #f0f9ff; }
.s-nav-row:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.s-nav-row-tx { flex: 1 1 auto; min-width: 0; }
/* The chevron is the row's own #0369a1 (`.s-nav-row svg` above), as the
   approved shots draw it (home-final-*-390: sampled rgb(7,107,162) on the
   mockup). A `.s-nav-row-go svg { #64748b }` override drew it grey; the render
   gate (d4, parity) found the difference and it had no decision behind it. */
.s-nav-row-go { flex: none; }

/* .h6-cxs — THE COMPLAINT'S STATUS LINE (H8), a smaller row indented under
   «شكوى أو سؤال» past that row's icon: «شكواك CS-0007 · جديدة ›».
   Physical margin-right (the mockup's margin-inline-start); English in
   store_ltr.css H2. */
.s-nav-row.s-cx-line {
  min-height: 2.75rem;
  margin-right: 1.75rem;
  padding: 0.375rem 0.875rem;
  font-size: 0.8125rem;
  font-weight: 600;
}
.s-cx-line .s-pill { flex: none; }
/* The status pill, one tone per state, THE STAFF'S TONES (admin.css:320-323,
   `.ws-pill.rose/.amber/.green`, which the complaints screen maps from
   new / in_progress / resolved at admin_helper.rb:40-42). The class ends in
   the status value itself so the view writes `s-pill-cx-#{status}` and a
   fourth status cannot silently borrow another's colour — it gets none. */
.s-pill-cx-new         { background: #FEECEF; color: #BE123C; }
.s-pill-cx-in_progress { background: #FEF5E7; color: #B45309; }
.s-pill-cx-resolved    { background: #E9F9EF; color: #15803D; }

/* ── «طلباتي», the list (build_header.py:282-285) ─────────────────────────
 * Each row is an .s-choice card that is a LINK, with no radio mark — so it
 * takes an even padding instead of the mark's 2.75rem gutter. Two classes
 * (0,2,0) so it outranks store.css's `.s-choice` (0,1,0) whatever order the
 * stylesheets load in; store_ltr.css H1 re-asserts it for English. */
.s-choice.s-order-row { display: block; padding: 0.875rem; color: inherit; text-decoration: none; }
.s-order-row:focus-visible { outline: 2px solid #0284c7; outline-offset: 2px; }
.s-order-row-top { display: flex; align-items: center; gap: 0.5rem; }
.s-order-row-top .s-choice-title { flex: 1 1 auto; min-width: 0; }
.s-order-row-top .s-pill { flex: none; }