/* Recipes = base + size + variant + state. Native semantics drive behavior.
   Goood: translucent cream surfaces with 1px cream borders, Sun Gold for the one primary action,
   rounded shapes (pills for small controls, 18px cards), Geist for every interface label. */
.button{--button-fill:var(--accent);--button-hover:var(--accent-hover);--button-pressed:var(--accent-pressed);--button-on:var(--accent-fg);--button-subtle:var(--accent-subtle);--button-text:var(--brand-primary-text);--control-height:var(--control-md);display:inline-flex;align-items:center;justify-content:center;gap:var(--space-2);min-height:var(--control-height);padding:var(--space-2) var(--space-5);border:var(--border-width) solid transparent;border-radius:var(--radius-full);background:var(--button-fill);color:var(--button-on);font-family:var(--font-body);font-size:var(--text-md);font-weight:var(--weight-medium);line-height:var(--line-height-none);text-decoration:none;transition:background var(--motion-fast) var(--ease),border-color var(--motion-fast) var(--ease),transform var(--motion-fast) var(--ease)}
.button:hover{background:var(--button-hover)}.button:active{background:var(--button-pressed);transform:scale(.98)}.button[data-variant="outline"]{border-color:var(--border-strong);background:var(--surface-raised);color:var(--fg)}.button[data-variant="ghost"]{background:transparent;color:var(--fg-secondary)}.button[data-variant="subtle"]{background:var(--button-subtle);color:var(--button-text);border-color:var(--brand-primary-800)}
.button[data-variant="outline"]:hover,.button[data-variant="ghost"]:hover{background:var(--surface-hover);color:var(--fg)}.button[data-variant="outline"]:active,.button[data-variant="ghost"]:active{background:var(--surface-pressed)}.button[data-variant="subtle"]:hover{background:var(--brand-primary-muted)}
.button[data-palette="secondary"]{--button-fill:var(--brand-secondary);--button-hover:var(--brand-secondary-hover);--button-pressed:var(--brand-secondary-pressed);--button-on:var(--brand-secondary-on);--button-subtle:var(--brand-secondary-subtle);--button-text:var(--brand-secondary-text);}
.button[data-palette="secondary"][data-variant="subtle"]{border-color:var(--brand-secondary-800)}
.button[data-palette="tertiary"]{--button-fill:var(--brand-tertiary);--button-hover:var(--brand-tertiary-hover);--button-pressed:var(--brand-tertiary-pressed);--button-on:var(--brand-tertiary-on);--button-subtle:var(--brand-tertiary-subtle);--button-text:var(--brand-tertiary-text);}
.button[data-palette="tertiary"][data-variant="subtle"]{border-color:var(--brand-tertiary-800)}
.button[data-size="sm"]{--control-height:var(--control-sm);padding-inline:var(--space-3-5);font-size:var(--text-xs)}.button[data-size="lg"]{--control-height:var(--control-lg);padding-inline:var(--space-6);font-size:var(--text-md)}
/* The Goood choice button: a display-type label on an 18px card; used where two choices carry equal weight. */
.button[data-size="xl"]{--control-height:var(--control-xl);border-radius:var(--radius-md);padding-inline:var(--space-4);font-family:var(--font-display);font-size:var(--text-lg);font-weight:var(--weight-regular)}
.button:disabled,.button[aria-disabled="true"]{opacity:.45;pointer-events:none}.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}.button--icon[data-variant="outline"]{background:var(--surface-well);border-color:var(--border-strong);color:var(--fg-secondary)}.button--icon[data-variant="outline"]:hover{color:var(--fg)}.button--danger{background:var(--danger);color:var(--bg)}
@keyframes spin{to{transform:rotate(360deg)}}
.field{display:flex;flex-direction:column;gap:var(--space-2);min-width:0}.field__label,legend{font-size:var(--text-sm);font-weight:var(--weight-medium);color:var(--fg-secondary)}
.field__control{width:100%;min-height:var(--control-md);padding:var(--space-2) var(--space-4);border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-sm);background:var(--surface-raised);color:var(--fg);font-size:var(--text-md);transition:border-color var(--motion-fast) var(--ease)}
.field__control:hover{border-color:var(--neutral-700)}.field__control:focus-visible{border-color:var(--brand-primary-border);outline-offset:var(--space-0-5)}
.field__control[data-size="sm"]{min-height:var(--control-sm);padding-block:var(--space-1)}.field__control[data-size="lg"]{min-height:var(--control-lg);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:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:translateY(-70%) rotate(45deg);pointer-events:none}
.select>select.field__control{appearance:none;padding-inline-end:var(--space-10)}.select option{background:var(--bg-subtle);color:var(--fg)}
.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;line-height:var(--line-height-relaxed)}.field__control::placeholder{color:var(--fg-placeholder);opacity:1}.field__control:disabled{color:var(--fg-disabled);background:var(--surface-card);opacity:1}
.field__control[aria-invalid="true"]{border-color:var(--danger)}.field__help,.field__error{margin-block-start:calc(var(--space-1) / 2);font-size:var(--text-xs);color:var(--fg-muted)}.field__error{color:var(--danger)}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-md)}.choice input{width:var(--space-5);height:var(--space-5);accent-color:var(--accent);flex:none}.choice:has(input:disabled){opacity:.5;cursor:not-allowed}
.switch{appearance:none!important;position:relative;width:2.75rem!important;height:1.625rem!important;border:1px solid var(--border-strong);border-radius:var(--radius-full);background:var(--surface-well);cursor:pointer;transition:background var(--motion-fast) var(--ease)}
.switch::before{content:'';position:absolute;width:1.125rem;height:1.125rem;border-radius:50%;background:var(--fg-muted);left:3px;top:3px;transition:transform var(--motion-normal) var(--ease)}.switch:checked{background:var(--accent);border-color:var(--accent)}.switch:checked::before{background:var(--accent-fg);transform:translateX(1.125rem)}
/* Surface deliberately has NO padding, layout, or content slots. Default is the translucent Goood card. */
.surface{background:var(--surface-card);border:var(--border-width) solid var(--border);border-radius:var(--radius-md)}.surface[data-treatment="subtle"]{background:var(--surface-raised);border-color:var(--border-hairline)}.surface[data-treatment="outline"]{background:transparent;border-color:var(--border-strong)}.surface[data-treatment="raised"]{background:var(--surface-raised);border-color:var(--border-strong);box-shadow:var(--glow-cta)}
.badge{display:inline-flex;align-items:center;gap:var(--space-1);width:fit-content;padding:var(--space-1) var(--space-2-5);border-radius:var(--radius-full);background:var(--surface-well);color:var(--fg-secondary);font-size:var(--text-xs);font-weight:var(--weight-medium);line-height:var(--line-height-normal)}
.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)}
/* NEW and FEATURED marks: Sun Gold, capitals, wide tracking. */
.badge[data-tone="accent"]{background:var(--accent);color:var(--accent-fg);font-size:var(--text-2xs);font-weight:var(--weight-bold);letter-spacing:var(--letter-spacing-caps);padding:var(--space-0-5) var(--space-2)}
.badge[data-tone="overlay"]{background:var(--scrim);color:var(--fg);font-size:var(--text-2xs);padding:var(--space-0-5) var(--space-1-5);font-variant-numeric:tabular-nums}
/* Tabs: a pill row by default (the Library's Catalog · Favorites · …); segmented for compact panel switching. */
.tabs__list{display:flex;gap:var(--space-1-5);overflow:auto;scrollbar-width:none}.tabs__tab{flex:none;border:var(--border-width) solid var(--border-strong);border-radius:var(--radius-full);background:transparent;color:var(--fg-secondary);min-height:var(--touch-target);padding:var(--space-2) var(--space-3-5);white-space:nowrap;font-size:var(--text-xs);font-weight:var(--weight-medium);transition:background var(--motion-fast) var(--ease),color var(--motion-fast) var(--ease)}
.tabs__tab:hover{color:var(--fg);background:var(--surface-card)}.tabs__tab[aria-selected="true"]{color:var(--fg-brand-primary);background:var(--brand-primary-subtle);border-color:var(--brand-primary-800)}.tabs__tab:disabled,.tabs__tab[aria-disabled="true"]{opacity:.55;cursor:default}.tabs__panel{padding-block:var(--space-4)}
.tabs[data-variant="segmented"] .tabs__list{border:var(--border-width) solid var(--border);border-radius:var(--radius-full);padding:var(--space-1);background:var(--surface-card);gap:var(--space-1)}.tabs[data-variant="segmented"] .tabs__tab{flex:1;border:0;border-radius:var(--radius-full)}.tabs[data-variant="segmented"] .tabs__tab[aria-selected="true"]{background:var(--surface-hover);color:var(--fg)}
.alert{display:flex;align-items:flex-start;gap:var(--space-3);padding:var(--space-4);border-radius:var(--radius-md);background:var(--info-bg);color:var(--info);font-size:var(--text-sm)}.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)}
.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:var(--border-width) solid var(--border);border-radius:var(--radius-xl);background:var(--surface-sheet);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);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}
.avatar{display:inline-grid;place-items:center;overflow:hidden;width:var(--control-md);height:var(--control-md);flex:none;border-radius:var(--radius-full);background:var(--surface-hover);color:var(--fg);font-size:var(--text-sm);font-weight:var(--weight-medium)}.avatar[data-size="sm"]{width:var(--control-sm);height:var(--control-sm);font-size:var(--text-xs)}.avatar[data-size="lg"]{width:var(--space-16);height:var(--space-16);font-size:var(--text-xl)}.avatar img{width:100%;height:100%;object-fit:cover}
.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{border-radius:var(--radius-full);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:12rem;max-width:calc(100vw - var(--space-4));max-height:calc(100dvh - var(--space-4));overflow:auto;padding:var(--space-1);border:var(--border-width) solid var(--border);border-radius:var(--radius-md);background:var(--surface-sheet);-webkit-backdrop-filter:var(--blur-glass);backdrop-filter:var(--blur-glass);color:var(--fg);box-shadow:var(--shadow-md)}
.menu__item{display:flex;align-items:center;gap:var(--space-3);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-sm)}.menu__item:hover,.menu__item:focus{background:var(--surface-hover)}.menu__item:disabled{opacity:.4}.menu__divider{border:0;border-top:1px solid var(--border);margin:var(--space-1)}
@media(pointer:coarse),(max-width:699px){.button,.field__control{min-height:max(var(--control-height,var(--control-md)),var(--touch-target))}.button--icon{min-width:var(--touch-target)}}