/* Froxies components. Every colour, radius, space and shadow comes from tokens.css. */
.fx { font-family: var(--font-sans); color: var(--ink); font-size: 16px; line-height: 24px; -webkit-font-smoothing: antialiased; }
.fx *, .fx *::before, .fx *::after { box-sizing: border-box; }
.fx :focus-visible { outline: var(--focus-ring) solid var(--accent); outline-offset: 2px; }

/* Wordmark: the name with a small teal dot */
.fx-wordmark { font-weight: 700; letter-spacing: -0.5px; color: var(--ink); line-height: 1; }
.fx-wordmark::after { content: ""; display: inline-block; width: .26em; height: .26em; margin-left: .08em; border-radius: var(--radius-pill); background: var(--accent); }
.fx-tagline { display: flex; align-items: center; gap: var(--space-2); font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fx-tagline::before { content: ""; width: 20px; height: 4px; background: var(--accent); border-radius: var(--radius-pill); }

/* Two-tone headline: a bold line in ink, then a light line in brand */
.fx-two { margin: 0; font-size: 40px; line-height: 46px; letter-spacing: -0.5px; font-weight: 700; color: var(--ink); }
.fx-two span { display: block; font-weight: 300; color: var(--brand-strong); }

/* Buttons: always pills */
.fx-btn { display: inline-flex; align-items: center; justify-content: center; gap: var(--space-2); min-height: var(--touch); padding: 0 var(--space-6); border: 2px solid transparent; border-radius: var(--radius-pill); font: inherit; font-weight: 600; cursor: pointer; text-decoration: none; background: var(--brand); color: var(--on-brand); transition: transform .08s ease, background-color .15s ease; }
.fx-btn:hover { background: var(--brand-press); }
.fx-btn:active { transform: scale(.97); }
.fx-btn.accent { background: var(--accent); color: var(--ink); }
.fx-btn.secondary { background: var(--brand-soft); color: var(--brand-strong); }
.fx-btn.quiet { background: var(--ground); color: var(--ink); border-color: var(--line-strong); }
.fx-btn.danger { background: var(--ground); color: var(--danger); border-color: var(--danger); }
.fx-btn.small { min-height: 40px; padding: 0 var(--space-4); font-size: 14px; }
.fx-btn[disabled] { background: var(--band); color: var(--ink-faint); border-color: var(--line); cursor: not-allowed; }
@media (prefers-reduced-motion: reduce) { .fx-btn { transition: none; } .fx-btn:active { transform: none; } }

/* Cards */
.fx-card { background: var(--ground); border-radius: var(--radius-md); box-shadow: var(--shadow-card); padding: var(--space-4); display: flex; flex-direction: column; gap: var(--space-2); }
.fx-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-3); }
.fx-card-title { font-weight: 600; }
.fx-card-meta { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fx-card-actions { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* Pills */
.fx-pill { display: inline-flex; align-items: center; gap: var(--space-1); padding: 3px 12px; border-radius: var(--radius-pill); font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: .4px; background: var(--band); color: var(--ink-soft); white-space: nowrap; }
.fx-pill.new { background: var(--accent-soft); color: var(--accent-strong); }
.fx-pill.ok { background: var(--success-soft); color: var(--success); }
.fx-pill.wait { background: var(--warn-soft); color: var(--warn); }
.fx-pill.stop { background: var(--danger-soft); color: var(--danger); }
.fx-pill.info { background: var(--brand-soft); color: var(--brand-strong); }

/* Fields */
.fx-field { display: flex; flex-direction: column; gap: var(--space-1); }
.fx-field > span { font-size: 14px; line-height: 20px; font-weight: 600; }
.fx-field input, .fx-field select, .fx-field textarea { min-height: var(--touch); padding: 0 var(--space-4); border: 1.5px solid var(--line-strong); border-radius: var(--radius-sm); background: var(--ground); color: var(--ink); font: inherit; width: 100%; }
/* A textarea grows downwards only, with room for a few lines. */
.fx-field textarea { min-height: 120px; padding: var(--space-3) var(--space-4); resize: vertical; }
.fx-field input:focus, .fx-field select:focus, .fx-field textarea:focus { border-color: var(--brand-strong); }
.fx-field input::placeholder, .fx-field textarea::placeholder { color: var(--ink-faint); }
.fx-field .hint { font-size: 14px; line-height: 20px; color: var(--ink-soft); font-weight: 400; }
.fx-field.error input, .fx-field.error textarea { border-color: var(--danger); }
.fx-field.error .hint { color: var(--danger); }

/* Chips: category tabs and day chips */
.fx-chips { display: flex; gap: var(--space-2); overflow-x: auto; scrollbar-width: none; }
.fx-chips.wrap { flex-wrap: wrap; overflow-x: visible; }
.fx-chip { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 0 var(--space-4); border-radius: var(--radius-pill); background: var(--band); color: var(--ink); font-size: 14px; font-weight: 500; text-decoration: none; border: 0; cursor: pointer; font-family: inherit; }
.fx-chip[aria-current="true"], .fx-chip.on { background: var(--brand); color: var(--on-brand); }

/* Switch: an on/off pill with the word inside it, so the state is never colour alone */
.fx-switch { flex: none; display: inline-flex; align-items: center; justify-content: center; min-height: var(--touch); min-width: 76px; padding: 0 var(--space-4); border: 1.5px solid transparent; border-radius: var(--radius-pill); background: var(--neutral-soft); color: var(--ink-soft); font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; }
.fx-switch[aria-checked="true"] { background: var(--brand); color: var(--on-brand); }
.fx-switch[disabled] { cursor: not-allowed; }

/* Swatch: a round colour choice with its name under it. The colour (and the tick's colour on it) come inline;
   the pressed one wears a tick inside a 3px ink ring. */
.fx-swatches { display: flex; gap: var(--space-4); }
.fx-swatch { display: flex; flex-direction: column; align-items: center; gap: var(--space-1); padding: 0; border: 0; background: none; font: inherit; cursor: pointer; }
.fx-swatch .dot { width: var(--touch); height: var(--touch); border-radius: var(--radius-pill); display: grid; place-items: center; font-size: 20px; font-weight: 700; }
.fx-swatch[aria-pressed="true"] .dot { box-shadow: 0 0 0 3px var(--ink); }
.fx-swatch[aria-pressed="true"] .dot::after { content: "\2713"; }
.fx-swatch .name { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fx-swatch[disabled] { cursor: not-allowed; }

/* Option: a full-width choice card with a title and one line; the pressed one fills with brand-soft */
.fx-option { display: flex; flex-direction: column; align-items: flex-start; gap: var(--space-1); width: 100%; padding: var(--space-4); border: 0; border-radius: var(--radius-md); background: var(--ground); box-shadow: var(--shadow-card); font: inherit; color: var(--ink); text-align: left; cursor: pointer; }
.fx-option .title { font-weight: 600; }
.fx-option .line { font-size: 14px; line-height: 20px; color: var(--ink-soft); }
.fx-option[aria-pressed="true"] { background: var(--brand-soft); }
.fx-option[disabled] { cursor: not-allowed; }

/* A list row: a service on a shop's page, and the lists in the owner app */
.fx-row { display: flex; align-items: center; gap: var(--space-3); min-height: 56px; padding: var(--space-2) 0; border-bottom: 1px solid var(--line); }
.fx-row .name { flex: 1; min-width: 0; }
.fx-row .price { font-weight: 600; white-space: nowrap; }
.fx-row .time { font-size: 14px; color: var(--ink-soft); white-space: nowrap; }
.fx-tick { flex: none; width: 26px; height: 26px; border-radius: 9px; border: 1.5px solid var(--line-strong); display: grid; place-items: center; color: transparent; font-size: 15px; font-weight: 700; }
.fx-row.on .fx-tick { background: var(--brand); border-color: var(--brand); color: var(--on-brand); }

/* A row whose parts drop to a second line on a narrow screen; its text block stays at least 12rem wide */
.fx-row.wrap { flex-wrap: wrap; }
.fx-row.wrap .name { flex: 1 1 12rem; }

/* Wrap: a long word (a name, a note) breaks anywhere rather than scrolling the screen sideways */
.fx-wrap { min-width: 0; overflow-wrap: anywhere; }

/* Bottom bar and tabs */
.fx-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); padding: var(--space-3) var(--space-4); background: var(--ground); box-shadow: var(--shadow-bar); }
.fx-bar .total { font-weight: 700; font-size: 19px; line-height: 26px; }
.fx-tabs { display: flex; background: var(--ground); box-shadow: var(--shadow-bar); padding: var(--space-2); gap: var(--space-1); }
.fx-tab { flex: 1; min-height: 44px; display: flex; align-items: center; justify-content: center; border-radius: var(--radius-pill); font-size: 13px; font-weight: 500; color: var(--ink-soft); text-decoration: none; }
.fx-tab[aria-current="page"] { background: var(--brand-soft); color: var(--brand-strong); font-weight: 600; }

/* App bar: light, sitting on the page */
.fx-appbar { padding: var(--space-4) var(--space-4) 0; display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); }
.fx-appbar .shop { font-weight: 600; }
.fx-appbar .day { font-size: 14px; color: var(--ink-soft); }

/* Banner */
.fx-banner { padding: var(--space-3) var(--space-4); border-radius: var(--radius-md); background: var(--warn-soft); color: var(--warn); font-size: 14px; line-height: 20px; }
.fx-banner.stop { background: var(--danger-soft); color: var(--danger); }


/* Combo: a text field with a list of suggestions under it (the script upgrades a select[data-fx-time]) */
.fx-combo { position: relative; }
.fx-combo-list { position: absolute; z-index: 4; left: 0; right: 0; top: calc(100% + var(--space-1)); margin: 0; padding: var(--space-1) 0; list-style: none; max-height: calc(var(--touch) * 5.5 + var(--space-2)); overflow-y: auto; overscroll-behavior: contain; background: var(--ground); border: 1px solid var(--line); border-radius: var(--radius-sm); box-shadow: var(--shadow-card); }
.fx-combo-list[hidden] { display: none; }
.fx-combo-opt { display: flex; align-items: center; justify-content: space-between; gap: var(--space-3); min-height: var(--touch); padding: 0 var(--space-4); color: var(--ink); cursor: pointer; -webkit-tap-highlight-color: transparent; }
.fx-combo-opt.active { background: var(--brand-soft); }
.fx-combo-opt[aria-selected="true"] { font-weight: 600; }
.fx-combo-opt[aria-selected="true"]::after { content: "\2713"; }
.fx-combo-opt[aria-disabled="true"] { color: var(--ink-soft); cursor: default; }
.fx-combo-divider { padding: var(--space-2) var(--space-4) var(--space-1); font-size: 13px; line-height: 18px; font-weight: 600; color: var(--ink-soft); border-top: 1px solid var(--line); }
.fx-combo-quick { display: flex; flex-wrap: wrap; gap: var(--space-2); margin-top: var(--space-2); }

/* A row name that opens an editor: a button that looks like plain text */
.fx-row-name-btn { background: none; border: 0; padding: 0; font: inherit; color: inherit; text-align: left; cursor: pointer; }