/* DO NOT EDIT — copied from packages/shared/src/shops/ui/shop-fields.css
   by `npm run tokens`. Edit the source there, regenerate, commit both.
   A vitest in packages/shared fails if this file drifts from the source. */
/* Shared shop field controls (W4 Phase 4d-3, P4d3-F). Default class prefix .shf-.
 * Source: packages/shared/src/shops/ui/shop-fields.css; npm run tokens copies it to
 * apps/server/public/shared/pages/shop-fields.css. Tokens only (var(--...)) and SOLID colours: no
 * alpha mixes, so it holds up on /m. The submit form passes prefix 'sf' and keeps these rules under
 * .sf- in submit-form.css. Chip rows WRAP and never clip; a day row wraps at 390px. */

.shf-chips { display: flex; flex-wrap: wrap; gap: 8px; min-width: 0; }
.shf-chip { max-width: 100%; padding: 7px 14px; border: 1px solid var(--cyan-dim); border-radius: 999px; background: var(--input); color: var(--chrome); font: 600 12px/1.3 var(--body); text-align: center; white-space: normal; overflow-wrap: anywhere; cursor: pointer; }
.shf-chip.on { border-color: var(--magenta); background: var(--magenta); color: var(--text); box-shadow: 0 0 12px var(--surface-2); }
.shf-chip:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }

.shf-input { width: 100%; min-height: 40px; padding: 8px 12px; border: 1px solid var(--border-hi); border-radius: 10px; background: var(--input); color: var(--text); font: 500 14px/1.4 var(--body); }
.shf-input:focus-visible { outline: 2px solid var(--cyan); outline-offset: 1px; border-color: var(--cyan); }

/* ── hours grid: one row per day, one or more time ranges ── */
.shf-days { display: grid; gap: 6px; min-width: 0; }
.shf-day { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 10px; border: 1px solid var(--surface-2); border-radius: 10px; background: var(--input); }
.shf-day__name { flex: 0 0 96px; color: var(--text); font-size: 13px; font-weight: 700; }
.shf-day__closed { display: inline-flex; align-items: center; gap: 6px; color: var(--text-dim); font-size: 12px; }
.shf-day__times { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; min-width: 0; }
.shf-day__times[hidden] { display: none; }
.shf-range { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; min-width: 0; }
.shf-day__to { color: var(--text-dim); font-size: 12px; }
.shf-input--time { width: auto; min-height: 34px; padding: 4px 8px; font-size: 13px; }
.shf-add, .shf-range__rm { min-height: 34px; padding: 4px 12px; border: 1px solid var(--cyan-dim); border-radius: 8px; background: var(--surface-2); color: var(--chrome); font: 700 12px/1.2 var(--head); cursor: pointer; }
.shf-add[hidden] { display: none; }
.shf-range__rm { padding: 4px 10px; color: var(--magenta); border-color: var(--magenta); }
.shf-add:focus-visible, .shf-range__rm:focus-visible { outline: 2px solid var(--cyan); outline-offset: 2px; }