/* Recipes = base + size + variant + state. Native semantics drive behavior. Every button is a pill. */
.button{--button-fill:var(--accent);--button-hover:var(--accent-hover);--button-pressed:var(--accent-pressed);--button-on:var(--accent-fg);--control-height:var(--control-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);min-height:var(--control-height);padding:var(--space-2) var(--space-5);border:0;border-radius:var(--radius-full);background:var(--button-fill);color:var(--button-on);font-size:var(--text-body);font-weight:var(--weight-bold);line-height:var(--line-height-snug);text-align:center;text-decoration:none;white-space:nowrap;transition:background var(--motion-fast) var(--ease),box-shadow var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.button:active{background:var(--button-pressed);transform:scale(.98)}
/* Citron is the paid/unlock and highlight action in both themes, always with ink text. */
.button[data-palette="citron"]{--button-fill:var(--brand-primary);--button-hover:var(--brand-primary-hover);--button-pressed:var(--brand-primary-pressed);--button-on:var(--brand-primary-on)}
.button[data-variant="outline"]{background:transparent;color:var(--fg);box-shadow:inset 0 0 0 1.5px var(--line-strong)}
.button[data-variant="card"]{background:var(--card);color:var(--fg);box-shadow:var(--card-shadow),inset 0 0 0 1px var(--card-border)}
.button[data-variant="subtle"]{background:var(--inset);color:var(--fg);box-shadow:inset 0 0 0 1px var(--line-strong)}
.button[data-variant="ghost"]{background:transparent;color:var(--fg)}
.button[data-tone="danger"]{color:var(--danger)}
.button[data-size="xs"]{--control-height:var(--control-xs);padding-inline:var(--space-3);font-size:var(--text-xs)}
.button[data-size="sm"]{--control-height:var(--control-sm);padding-inline:var(--space-3-5);font-size:var(--text-sm)}
.button[data-size="lg"]{--control-height:var(--control-lg);padding-inline:var(--space-6);font-size:var(--text-md);font-weight:var(--weight-extrabold)}
.button[data-size="xl"]{--control-height:var(--control-xl);padding-inline:var(--space-6);font-size:var(--text-body-lg);font-weight:var(--weight-extrabold)}
.button[data-width="full"]{width:100%}
.button:disabled,.button[aria-disabled="true"]{background:var(--bg-muted);color:var(--fg-disabled);box-shadow:none;pointer-events:none}
.button[data-variant="ghost"]:disabled,.button[data-variant="outline"]:disabled{background:transparent}
.button[aria-busy="true"]::before{content:'';width:1em;height:1em;border:2px solid currentColor;border-right-color:transparent;border-radius:var(--radius-full);animation:spin .8s linear infinite}
.button--icon{width:var(--control-height);padding:0;flex:none}
@keyframes spin{to{transform:rotate(360deg)}}

/* Fields sit on the card material; focus and validity change the 1.5px ring. */
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.field__label,legend{padding-inline:var(--space-1);font-size:var(--text-sm);font-weight:var(--weight-semibold);color:var(--fg-muted)}
.field__control{width:100%;min-height:var(--control-lg);padding:var(--space-2) var(--space-4);border:0;border-radius:var(--radius-lg);background:var(--card);box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--card-border);color:var(--fg);font-size:var(--text-md);font-weight:var(--weight-medium);transition:box-shadow var(--motion-fast) var(--ease)}
.field__control:focus{outline:0;box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--fg)}
.field__control[data-size="lg"]{min-height:var(--control-xl);padding:var(--space-3) var(--space-4)}
/* Keep native select behavior; a decorative chevron has a consistent inset. */
.select{position:relative;display:grid;min-width:0;color:var(--fg-muted)}
.select::after{content:'';position:absolute;right:var(--space-4);top:50%;width:var(--space-2);height:var(--space-2);border-right:2px solid currentColor;border-bottom:2px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select>select.field__control{appearance:none;padding-inline-end:var(--space-10)}
.select:has(select:disabled)::after{opacity:.55}
@media(forced-colors:active){.select>select.field__control{appearance:auto}.select::after{display:none}}
textarea.field__control{min-height:7rem;resize:vertical;padding-block:var(--space-3)}.field__control::placeholder{color:var(--fg-placeholder);opacity:1}.field__control:disabled{color:var(--fg-disabled);background:var(--bg-muted);opacity:1}
.field__control[aria-invalid="true"]{box-shadow:var(--card-shadow),inset 0 0 0 1.5px var(--danger)}.field__help,.field__error{margin-block-start:calc(var(--space-1) / 2);padding-inline:var(--space-1);font-size:var(--text-xs);color:var(--fg-subtle)}.field__error{color:var(--danger);font-weight:var(--weight-semibold)}fieldset{border:0;margin:0;padding:0}legend{margin-bottom:var(--space-2)}
.choice{display:flex;align-items:center;gap:var(--space-3);min-height:var(--touch-target);cursor:pointer;font-size:var(--text-body)}.choice input{width:var(--space-5);height:var(--space-5);accent-color:var(--citron);flex:none}.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
/* Switch: 52 × 32 track, citron when on, white knob with a soft drop. */
.switch{appearance:none!important;position:relative;flex:none;width:3.25rem!important;height:2rem!important;margin:0;border:0;border-radius:var(--radius-full);background:var(--line-strong);cursor:pointer;transition:background var(--motion-normal) var(--ease)}
.switch::before{content:'';position:absolute;width:1.625rem;height:1.625rem;border-radius:50%;background:var(--white);box-shadow:0 2px 6px #0000004d;left:3px;top:3px;transition:transform var(--motion-normal) var(--ease-out-expo)}.switch:checked{background:var(--citron)}.switch:checked::before{transform:translateX(1.25rem)}
/* Surface: the lit-from-above card material. NO padding, layout, or content slots. */
.surface{background:var(--card);border-radius:var(--radius-xl);box-shadow:var(--card-shadow),inset 0 0 0 1px var(--card-border)}
.surface[data-treatment="hero"]{background:var(--surface-hero);color:var(--on-hero);box-shadow:none}
/* Badges are pills. Citron marks verified and AI-generated highlights. */
.badge{display:inline-flex;align-items:center;gap:var(--space-1);width:fit-content;min-height:var(--space-6);padding:var(--space-0-5) var(--space-2-5);border-radius:var(--radius-full);background:var(--inset);color:var(--fg-muted);font-size:var(--text-xs);font-weight:var(--weight-bold);line-height:var(--line-height-snug)}
/* md: the score pill (+1 / −1) at the end of a result row. */
.badge[data-size="md"]{justify-content:center;min-width:2.75rem;min-height:1.75rem;padding-inline:var(--space-2-5);font-size:var(--text-body-sm)}
.badge[data-status="success"]{background:var(--success-bg);color:var(--success)}.badge[data-status="warning"]{background:var(--warning-bg);color:var(--warning)}.badge[data-status="danger"]{background:var(--danger-bg);color:var(--danger)}.badge[data-status="info"]{background:var(--info-bg);color:var(--info)}
.badge[data-status="citron"]{background:var(--brand-primary-subtle);color:var(--brand-primary-text);box-shadow:inset 0 0 0 1px var(--brand-primary-border)}
.badge[data-status="solid"]{background:var(--citron);color:var(--on-citron);font-weight:var(--weight-extrabold)}
/* Chips: horizontal filters (scopes, sports). The selected chip takes the action fill. */
.chips{display:flex;gap:var(--space-1-5);overflow-x:auto;scrollbar-width:none;margin-inline:calc(var(--space-4) * -1);padding-inline:var(--space-4)}.chips::-webkit-scrollbar{display:none}
.chip{display:inline-flex;align-items:center;justify-content:center;gap:var(--space-1-5);flex:none;min-height:var(--control-sm);padding:0 var(--space-3-5);border:0;border-radius:var(--radius-full);background:var(--card);box-shadow:inset 0 0 0 1px var(--card-border);color:var(--fg);font-size:var(--text-body-sm);font-weight:var(--weight-semibold);text-decoration:none;white-space:nowrap;transition:background var(--motion-fast) var(--ease)}
.chip[data-size="lg"]{min-height:var(--control-md);padding-inline:var(--space-4);font-size:var(--text-body)}
.chip[aria-pressed="true"],.chip[aria-current="true"],.chip[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);box-shadow:none;font-weight:var(--weight-bold)}
.tabs__list{display:flex;gap:var(--space-2);border-bottom:1px solid var(--line);overflow:auto}.tabs__tab{border:0;border-bottom:2px solid transparent;background:transparent;color:var(--fg-muted);min-height:var(--touch-target);padding:var(--space-2) var(--space-4);white-space:nowrap;font-size:var(--text-body);font-weight:var(--weight-semibold)}
.tabs__tab[aria-selected="true"]{color:var(--fg);border-bottom-color:var(--fg);font-weight:var(--weight-bold)}.tabs__tab:disabled{opacity:.45}.tabs__panel{padding-block:var(--space-4)}
/* Segmented: a pill track on the card material; the selected segment is an ink/paper pill. */
.tabs[data-variant="segmented"] .tabs__list,.segmented{display:grid;grid-auto-columns:minmax(0,1fr);grid-auto-flow:column;gap:0;padding:var(--space-1);border:0;border-radius:var(--radius-full);background:var(--card);box-shadow:var(--card-shadow),inset 0 0 0 1px var(--card-border)}
.tabs[data-variant="segmented"] .tabs__tab,.segmented>*{min-height:var(--control-sm);border:0;border-radius:var(--radius-full);background:transparent;color:var(--fg-muted);font-size:var(--text-body);font-weight:var(--weight-semibold);text-align:center;transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.tabs[data-variant="segmented"] .tabs__tab[aria-selected="true"],.segmented>[aria-selected="true"],.segmented>[aria-pressed="true"]{background:var(--fg);color:var(--fg-inverse);font-weight:var(--weight-bold)}
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-3-5) var(--space-4);border-radius:var(--radius-lg);background:var(--info-bg);color:var(--info);font-size:var(--text-body-sm);line-height:var(--line-height-normal)}.alert[data-status="success"]{background:var(--success-bg);color:var(--success)}.alert[data-status="warning"]{background:var(--warning-bg);color:var(--warning)}.alert[data-status="danger"]{background:var(--danger-bg);color:var(--danger)}
.alert[data-status="citron"]{background:var(--brand-primary-subtle);color:var(--fg-secondary);box-shadow:inset 0 0 0 1px var(--brand-primary-border)}.alert[data-status="citron"]>svg{color:var(--brand-primary-text)}
.dialog{max-width:min(var(--content-sm),calc(100% - var(--space-8)));width:100%;max-height:calc(100dvh - var(--space-8));padding:var(--space-6);border:1px solid var(--card-border);border-radius:var(--radius-2xl);background:var(--surface-sheet);color:var(--fg);box-shadow:var(--shadow-lg);overflow:auto}.dialog::backdrop{background:var(--scrim)}.dialog__actions{display:flex;justify-content:flex-end;gap:var(--space-3);margin-top:var(--space-6)}body:has(dialog[open]){overflow:hidden}
/* Avatars: photos, or initials on one of eight olive-family tones chosen by a name hash (data-tone 0–7). */
.avatar{--avatar-tone:#5A6B3B;display:inline-grid;place-items:center;overflow:hidden;width:var(--control-sm);height:var(--control-sm);flex:none;border-radius:var(--radius-full);background:var(--avatar-tone);color:var(--white);box-shadow:inset 0 1px 0 #ffffff2e;font-size:var(--text-xs);font-weight:var(--weight-bold);letter-spacing:var(--letter-spacing-wide)}
.avatar[data-size="sm"]{width:var(--control-xs);height:var(--control-xs);font-size:var(--text-3xs)}.avatar[data-size="md"]{width:var(--control-md);height:var(--control-md)}.avatar[data-size="lg"]{width:4.75rem;height:4.75rem;font-size:var(--text-xl)}.avatar[data-size="xl"]{width:5.5rem;height:5.5rem;font-size:var(--text-2xl)}
.avatar img{width:100%;height:100%;object-fit:cover}.avatar[data-ring="citron"]{box-shadow:0 0 0 2px var(--citron)}.avatar[data-ring="line"]{box-shadow:0 0 0 1px var(--line-strong)}
.avatar[data-tone="1"]{--avatar-tone:#6E5139}.avatar[data-tone="2"]{--avatar-tone:#3B5E6E}.avatar[data-tone="3"]{--avatar-tone:#5F4A6E}.avatar[data-tone="4"]{--avatar-tone:#3B6E5C}.avatar[data-tone="5"]{--avatar-tone:#6E3B47}.avatar[data-tone="6"]{--avatar-tone:#6A6230}.avatar[data-tone="7"]{--avatar-tone:#44506E}
.search{position:relative;display:flex;align-items:center}.search>.icon{position:absolute;left:var(--space-4);pointer-events:none;color:var(--fg-muted)}.search input{padding-left:var(--space-12);padding-right:var(--space-12)}.search input::-webkit-search-cancel-button{appearance:none}.search__clear{position:absolute;right:var(--space-1);min-height:var(--touch-target);width:var(--touch-target);border:0;border-radius:var(--radius-full);background:transparent;color:var(--fg-muted)}
.menu{position:fixed;inset:auto;margin:0;min-width:12.25rem;max-width:calc(100vw - var(--space-4));max-height:calc(100dvh - var(--space-4));overflow:auto;padding:var(--space-1-5);border:1px solid var(--card-border);border-radius:var(--radius-lg);background:var(--surface-sheet);color:var(--fg);box-shadow:var(--shadow-lg),inset 0 1px 0 #ffffff0f}
.menu__item{display:flex;align-items:center;justify-content:space-between;gap:var(--space-2-5);width:100%;min-height:var(--touch-target);border:0;border-radius:var(--radius-sm);padding:var(--space-2) var(--space-3);background:transparent;color:var(--fg);text-align:left;text-decoration:none;font-size:var(--text-body);font-weight:var(--weight-semibold)}.menu__item:hover,.menu__item:focus{background:var(--inset)}.menu__item[aria-checked="true"],.menu__item[aria-selected="true"]{background:var(--inset);font-weight:var(--weight-bold)}.menu__item:disabled{opacity:.4}.menu__divider{border:0;border-top:1px solid var(--line);margin:var(--space-1)}
@media(pointer:coarse),(max-width:699px){.button,.field__control,.chip{min-height:max(var(--control-height,var(--control-sm)),var(--touch-target))}.button--icon{min-width:var(--touch-target)}}
/* Hover only for real pointers: a tap on a phone must not leave a button stuck in its hover color. */
@media(hover:hover) and (pointer:fine){.button:hover{background:var(--button-hover)}.button[data-variant="outline"]:hover{background:var(--inset)}.button[data-variant="card"]:hover{background:var(--card),var(--inset)}.button[data-variant="subtle"]:hover{background:var(--line)}.button[data-variant="ghost"]:hover{background:var(--tab-on)}.button:active{background:var(--button-pressed)}}