/* ═════════════════════════════════════════════════════════════════
   Jockey — the member sections INSIDE the Mocca shell (B62 § F-28, wave 7)

   Loads after sections.css and app-themes.css. It adds NOTHING the shell
   already has: the cards are `.wl-card`, the rows are `.wl-row`, the boxes
   are `.wl-sumbox`, the headers are `.wl-sech`, the filters are `.seg`, the
   panels are the shared MoccaPanel. What lives here is only what the shell
   has no equivalent for — a photographed space, a day strip, a slot grid, a
   dotted carta line and the minimum-consumption meter — and every one of
   them is painted from the SHELL's tokens, which `html[data-app="jockey"]`
   has already re-mapped to the Jockey system. No literal colour is invented.
   ═════════════════════════════════════════════════════════════════ */

/* ── the app's own sidebar rows ────────────────────────────────── */
html:not([data-app="jockey"]) .sb-item[data-jk],
html:not([data-app="jockey"]) .sb-children[data-jk]{ display:none !important; }
html[data-app="jockey"] .sb-inner > .sb-item:not([data-jk]),
html[data-app="jockey"] .sb-inner > .sb-children:not([data-jk]){ display:none !important; }

/* A Jockey page header carries a filter that can be ten zones long. The shell's
   header is a two-child flex row with a non-shrinking `.acts`; left alone, a long
   strip pushes the title out of the page instead of scrolling inside it — § M-43's
   "important information cropped". Wrap the row and let the strip own the overflow. */
.jk-view .page-h{ flex-wrap:wrap;gap:10px 14px; }
.jk-view .page-h .acts{ min-width:0;flex-shrink:1;max-width:100%; }

/* ── eyebrow + notes ───────────────────────────────────────────── */
.jk-eyebrow{ font:700 10.5px/1.2 var(--mk-font-ui);letter-spacing:.14em;text-transform:uppercase;color:var(--fg-3); }
.jk-note{ display:flex;gap:9px;align-items:flex-start;padding:11px 13px;border:1px solid var(--bd-1);
  border-radius:var(--mk-radius-md,12px);background:var(--bg-2);color:var(--fg-2);
  font:500 12.5px/1.45 var(--mk-font-ui);text-wrap:pretty; }
.jk-note .mi{ font-size:18px;color:var(--accent-text,var(--accent));flex:none; }
.jk-note b{ color:var(--fg-1);font-weight:700; }
.jk-note + .jk-note{ margin-top:8px; }
.jk-note.jk-note-gold{ border-color:var(--jk-hair,var(--border-strong)); }
.jk-stack{ display:flex;flex-direction:column;gap:10px; }

/* ── minimum-consumption meter (Cuenta + the account slide) ────── */
.jk-min{ display:grid;gap:8px;padding:16px 18px;border:1px solid var(--bd-1);border-radius:var(--mk-radius-lg,16px);background:var(--bg-2); }
.jk-min-n{ font:800 27px/1.05 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums;letter-spacing:-.02em; }
.jk-min-n small{ font:500 14px/1 var(--mk-font-ui);color:var(--fg-3); }
.jk-bar{ height:7px;border-radius:999px;background:var(--bg-3);overflow:hidden; }
.jk-bar > i{ display:block;height:100%;border-radius:999px;background:var(--accent);transition:width .5s var(--mk-ease,ease); }
.jk-min-sub{ font:500 12px/1.4 var(--mk-font-ui);color:var(--fg-2); }
.jk-min-sub b{ color:var(--fg-1);font-variant-numeric:tabular-nums; }

/* ── a photographed space ──────────────────────────────────────── */
.jk-spaces{ display:grid;grid-template-columns:repeat(auto-fill,minmax(268px,1fr));gap:12px; }
.jk-space{ display:flex;flex-direction:column;border:1px solid var(--bd-1);border-radius:var(--mk-radius-lg,16px);
  background:var(--bg-2);overflow:hidden;min-width:0; }
.jk-shot{ position:relative;aspect-ratio:16/9;background:var(--bg-3);display:block;overflow:hidden; }
.jk-shot img{ width:100%;height:100%;object-fit:cover;display:block; }
.jk-shot-none{ display:grid;place-items:center;color:var(--fg-3); }
.jk-shot-none .mi{ font-size:34px;opacity:.55; }
.jk-space-b{ display:flex;flex-direction:column;gap:8px;padding:14px 15px 15px;flex:1;min-width:0; }
.jk-space-t{ display:flex;align-items:baseline;gap:8px;justify-content:space-between; }
.jk-space-nm{ font:700 15px/1.25 var(--mk-font-ui);color:var(--fg-1);min-width:0; }
.jk-space-acts{ display:flex;flex-wrap:wrap;gap:7px;margin-top:auto;padding-top:2px; }

/* ── day strip + slot grid (the booking flow, inside the panel) ── */
.jk-days{ display:flex;gap:7px;overflow-x:auto;padding-bottom:4px;scrollbar-width:thin; }
.jk-day{ flex:0 0 auto;display:grid;justify-items:center;gap:1px;min-width:52px;min-height:60px;padding:7px 9px;cursor:pointer;
  border:1px solid var(--bd-1);border-radius:var(--mk-radius-md,12px);background:var(--bg-1);
  font:600 10.5px/1.2 var(--mk-font-ui);color:var(--fg-3);text-transform:capitalize; }
.jk-day b{ font:700 16px/1.15 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }
.jk-day em{ font:500 10px/1.2 var(--mk-font-ui);font-style:normal;color:var(--fg-3); }
.jk-day[aria-pressed="true"]{ background:var(--accent);border-color:var(--accent); }
.jk-day[aria-pressed="true"] b,.jk-day[aria-pressed="true"] em,.jk-day[aria-pressed="true"]{ color:var(--accent-fg); }
.jk-slots{ display:grid;grid-template-columns:repeat(auto-fill,minmax(86px,1fr));gap:7px; }
.jk-slot{ display:grid;gap:1px;justify-items:center;padding:8px 6px;min-height:48px;cursor:pointer;
  border:1px solid var(--bd-1);border-radius:var(--mk-radius-md,12px);background:var(--bg-1); }
.jk-slot b{ font:700 13px/1.2 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }
.jk-slot span{ font:500 10.5px/1.2 var(--mk-font-ui);color:var(--fg-3); }
.jk-slot[aria-pressed="true"]{ background:var(--accent);border-color:var(--accent); }
.jk-slot[aria-pressed="true"] b,.jk-slot[aria-pressed="true"] span{ color:var(--accent-fg); }
.jk-slot:disabled{ opacity:.42;cursor:not-allowed; }
.jk-picks{ display:grid;gap:7px; }
.jk-pick{ display:grid;grid-template-columns:1fr auto;gap:2px 10px;text-align:start;cursor:pointer;
  padding:11px 13px;border:1px solid var(--bd-1);border-radius:var(--mk-radius-md,12px);background:var(--bg-1);min-height:44px; }
.jk-pick b{ font:600 13.5px/1.25 var(--mk-font-ui);color:var(--fg-1); }
.jk-pick > span{ grid-column:1/-1;font:500 11.5px/1.4 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
.jk-pick .jk-pr{ grid-column:2;grid-row:1;font:700 12.5px/1.2 var(--mk-font-ui);color:var(--fg-2);font-variant-numeric:tabular-nums; }
.jk-pick[aria-pressed="true"]{ border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent); }
.jk-pick:disabled{ opacity:.45;cursor:not-allowed; }
.jk-pick .mi{ grid-column:2;grid-row:1;color:var(--fg-3);font-size:19px; }
.jk-steps{ display:flex;gap:6px;margin-bottom:14px; }
.jk-steps button{ flex:1;display:grid;gap:5px;justify-items:start;cursor:pointer;background:none;border:0;padding:0;
  font:600 11px/1.2 var(--mk-font-ui);color:var(--fg-3);text-align:start;min-width:0; }
.jk-steps button i{ display:block;width:100%;height:3px;border-radius:999px;background:var(--bg-3); }
.jk-steps button[data-done="1"] i{ background:color-mix(in srgb,var(--accent) 45%,transparent); }
.jk-steps button[data-on="1"] i{ background:var(--accent); }
.jk-steps button[data-on="1"]{ color:var(--fg-1); }
.jk-steps button span{ overflow:hidden;text-overflow:ellipsis;white-space:nowrap;max-width:100%; }
.jk-step{ display:flex;align-items:center;gap:9px; }
.jk-step button{ width:34px;height:34px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--bd-1);border-radius:10px;background:var(--bg-1);color:var(--fg-1); }
.jk-step button:disabled{ opacity:.4;cursor:not-allowed; }
.jk-step > span{ min-width:34px;text-align:center;font:700 15px/1 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }
.jk-fld{ display:grid;gap:7px; }
.jk-fld + .jk-fld{ margin-top:14px; }
.jk-tot{ display:flex;align-items:baseline;justify-content:space-between;gap:10px;padding-top:10px;margin-top:4px;border-top:1px solid var(--bd-1); }
.jk-tot b{ font:700 13px/1.2 var(--mk-font-ui);color:var(--fg-1); }
.jk-tot span{ font:800 17px/1.1 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }

/* ── the carta ─────────────────────────────────────────────────── */
.jk-zoneseg{ max-width:100%;overflow-x:auto;scrollbar-width:none; }
.jk-zoneseg::-webkit-scrollbar{ display:none; }
.jk-zoneseg button{ white-space:nowrap;flex:0 0 auto; }
.jk-menu{ display:grid;gap:2px; }
.jk-dish{ display:grid;grid-template-columns:1fr auto;gap:2px 12px;align-items:baseline;width:100%;text-align:start;
  padding:10px 2px;background:none;border:0;border-bottom:1px dotted var(--bd-1);cursor:pointer;min-height:44px; }
.jk-dish:hover{ background:var(--bg-3); }
.jk-dish b{ font:500 14px/1.3 var(--mk-font-ui);color:var(--fg-1); }
.jk-dish .jk-pr{ font:600 13px/1.3 var(--mk-font-ui);color:var(--fg-2);font-variant-numeric:tabular-nums; }
.jk-dish span{ grid-column:1/-1;font:400 11.5px/1.45 var(--mk-font-ui);color:var(--fg-3);text-wrap:pretty; }
.jk-blocked{ display:flex;flex-wrap:wrap;gap:6px; }

/* ── order / reservation lines ─────────────────────────────────── */
.jk-line{ display:flex;align-items:baseline;gap:10px;padding:8px 0;border-bottom:1px dotted var(--bd-1);
  font:500 12.5px/1.35 var(--mk-font-ui);color:var(--fg-1); }
.jk-line .jk-q{ flex:none;min-width:22px;font-weight:700;color:var(--fg-3);font-variant-numeric:tabular-nums; }
.jk-line .jk-nm{ flex:1;min-width:0; }
.jk-line .jk-pr{ flex:none;font-weight:700;font-variant-numeric:tabular-nums; }

/* A `.wl-sumbox` is a <button>, and a button's `width:auto` is FIT-CONTENT — with
   a subtitle longer than the page's content box it grows to max-content and hangs
   past the page padding (measured: 389px inside a 342px column, the page then
   scrolls sideways on a 390px phone, § M-43). Every Jockey box states a rule in
   its subtitle, so they are all long: pin them to the row and let the text wrap. */
.jk-view .wl-sumbox{ width:100%;min-width:0; }
.jk-view .wl-sumbox-main{ min-width:0; }
.jk-view .wl-sumbox-s{ white-space:normal;text-wrap:pretty; }

/* ── wave 3 · the cart IS the open order ───────────────────────
   Sticky INSIDE the page, never a floating layer: § M-88 gives that height to
   the FAB, and a second floating thing there is exactly what the rule forbids. */
/* 065-008 — "I like how this box floats but it's stuck to the bottom": it keeps
   floating, with 16 px (+ the safe area) under it — and on the phone it floats
   ABOVE the bottom tabs instead of behind them. */
.jk-cartbar{ position:sticky;bottom:0;z-index:2;margin:16px -2px 0;padding-top:10px;
  padding-bottom:calc(16px + env(safe-area-inset-bottom));
  background:linear-gradient(to top,var(--bg-1) 62%,transparent); }
@media (max-width:899px){ html[data-app="jockey"] .jk-cartbar{ bottom:calc(66px + env(safe-area-inset-bottom));padding-bottom:12px; } }
@media (orientation:landscape) and (max-height:540px){ html[data-app="jockey"] .jk-cartbar{ bottom:0;padding-bottom:calc(14px + env(safe-area-inset-bottom)); } }
.jk-cartbar > button{ display:flex;align-items:center;gap:12px;width:100%;min-height:56px;cursor:pointer;
  padding:11px 14px;border:1px solid var(--bd-1);border-radius:var(--mk-radius-lg,16px);
  background:var(--bg-2);box-shadow:var(--mk-shadow-2,0 6px 22px rgba(0,0,0,.13));text-align:start; }
.jk-cartbar-n{ flex:none;min-width:28px;height:28px;padding:0 7px;display:grid;place-items:center;border-radius:999px;
  background:var(--accent);color:var(--accent-fg);font:700 13px/1 var(--mk-font-ui);font-variant-numeric:tabular-nums; }
.jk-cartbar-m{ flex:1;min-width:0;display:grid;gap:1px; }
.jk-cartbar-m b{ font:600 13.5px/1.25 var(--mk-font-ui);color:var(--fg-1);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.jk-cartbar-m span{ font:500 11.5px/1.3 var(--mk-font-ui);color:var(--fg-3);overflow:hidden;text-overflow:ellipsis;white-space:nowrap; }
.jk-cartbar-t{ flex:none;font:800 15px/1 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }
.jk-cartbar .mi{ flex:none;color:var(--fg-3);font-size:20px; }

/* a line the member can still change */
.jk-linestep{ flex:none;display:flex;align-items:center;gap:2px; }
.jk-linestep button{ width:32px;height:32px;display:grid;place-items:center;cursor:pointer;
  border:1px solid var(--bd-1);border-radius:9px;background:var(--bg-1);color:var(--fg-1); }
.jk-linestep button .mi{ font-size:17px; }
.jk-linestep > b{ min-width:24px;text-align:center;font:700 13px/1 var(--mk-font-ui);color:var(--fg-1);font-variant-numeric:tabular-nums; }
.jk-line:has(.jk-linestep){ padding:6px 0; }

/* the signature pad — the MECHANISM is still the club's decision */
.jk-sign{ position:relative;border:1px dashed var(--bd-2,var(--bd-1));border-radius:var(--mk-radius-md,12px);
  background:var(--bg-1);overflow:hidden;touch-action:none; }
.jk-sign canvas{ display:block;width:100%;height:150px;touch-action:none;cursor:crosshair; }
.jk-sign-hint{ position:absolute;inset:auto 0 12px;text-align:center;pointer-events:none;
  font:500 12px/1 var(--mk-font-ui);color:var(--fg-3); }
.jk-sign.on .jk-sign-hint{ opacity:0; }
.jk-sign > button{ position:absolute;top:8px;inset-inline-end:8px; }

/* ── the partner login: the SHELL's auth modal, re-dressed ─────
   Not a second modal — the same one, wearing the club. Only what a club member
   is asked for changes; the scrim, the steps, the close button and the mobile
   sheet stay the ones Mocca already solved. */
[data-jk-hide]{ display:none !important; }
.auth-mark[data-jk] .icon.jk-auth-crest{ width:auto;height:44px;aspect-ratio:137/167;object-fit:contain;flex:none; }
.jk-auth-word{ font:700 26px/1 var(--jk-font,var(--mk-font-ui));letter-spacing:-.01em;color:#F3F4F6;white-space:nowrap; }
html[data-app="jockey"] .auth-brand{ background:#00243F; }
html[data-app="jockey"] .auth-brand::after{ content:"";position:absolute;inset:auto 0 0;height:1px;
  background:var(--jk-hair,rgba(190,155,74,.55)); }
@media (max-width:700px){ .jk-auth-word{ font-size:22px; } }

/* ── the member card ───────────────────────────────────────────── */.jk-memb{ display:flex;align-items:center;gap:13px;padding:15px 16px;border:1px solid var(--bd-1);
  border-radius:var(--mk-radius-lg,16px);background:var(--bg-2);flex-wrap:wrap; }
.jk-memb-av{ width:46px;height:46px;flex:none;border-radius:50%;display:grid;place-items:center;
  background:var(--accent);color:var(--accent-fg);font:700 16px/1 var(--mk-font-ui); }
.jk-memb-m{ flex:1;min-width:140px;display:grid;gap:2px; }
.jk-memb-nm{ font:700 17px/1.2 var(--mk-font-ui);color:var(--fg-1); }
.jk-memb-s{ font:500 12px/1.35 var(--mk-font-ui);color:var(--fg-3); }

/* Touch: nothing the member taps is below 44px. */
@media (pointer:coarse){
  .jk-dish,.jk-pick,.jk-day,.jk-slot{ min-height:46px; }
}
/* The shell's own `.seg` button and `.wl-chip` are ~26px — fine under a mouse on
   a dense builder screen, too small for a club app used one-handed at a table.
   Raised to 38px HERE only (the precedent is sections.css's own
   `@media (pointer:coarse){ .map-layer-seg button{min-height:38px} }`) — the
   shell's component is left exactly as it is for every other screen. */
@media (max-width:700px), (pointer:coarse){
  .jk-view .seg button{ min-height:38px;padding-inline:13px; }
  .jk-view button.wl-chip{ min-height:38px;padding-block:9px; }
  .jk-linestep button{ width:38px;height:38px; }
}
/* Mobile portrait: a card grid of one, and the photo gives back some height. */
@media (max-width:600px) and (orientation:portrait){
  .jk-spaces{ grid-template-columns:1fr; }
  .jk-shot{ aspect-ratio:2/1; }
  .jk-min-n{ font-size:24px; }
}