.g-button, .g-chip, .g-row, .g-input, .g-toggle, .g-tick { box-sizing: border-box; }
.g-button, .g-chip, .g-row { cursor: pointer; }
.g-button { min-height: calc(var(--spacing-lg) + var(--spacing-xxs)); padding: var(--spacing-sm) var(--spacing-md); border: 0; border-radius: var(--radii-hero); background: var(--color-ink); color: var(--color-white); }
.g-button--expanded { width: 100%; }
.g-button--secondary { background: var(--color-card); color: var(--color-ink); border: calc(var(--spacing-xxs) / 4) solid var(--color-border); }
.g-button--text { padding: var(--spacing-xs); background: none; color: var(--color-inkMuted); }
.g-button--destructive.g-button--primary { background: var(--color-brick); }
.g-button--destructive.g-button--text { color: var(--color-brick); }
.g-button:disabled { background: var(--color-neutral300); color: var(--color-inkMuted); cursor: default; }
.g-button--text:disabled { background: none; }
.g-button[aria-busy="true"]:disabled { background: var(--color-ink); }
.g-button-spinner { display: inline-block; box-sizing: border-box; width: var(--spacing-md); height: var(--spacing-md); border: calc(var(--spacing-xxs) / 2) solid var(--color-inkMuted); border-top-color: var(--color-white); border-radius: var(--radii-hero); animation: g-spin var(--motion-skeletonPulse) linear infinite; }
@keyframes g-spin { to { transform: rotate(360deg); } }
@keyframes g-fade-in { from { opacity: 0; } to { opacity: 1; } }
.g-button:active:not(:disabled), .g-chip:active:not(:disabled), .g-row:active:not(:disabled):not(.g-row--read-only) { opacity: .85; transform: scale(.97); }
.g-field { display: grid; grid-template-columns: minmax(0, 1fr); min-width: 0; gap: var(--spacing-xs); }
.g-label { color: var(--color-ink); }
.g-input { width: 100%; min-width: 0; min-height: calc(var(--spacing-lg) + var(--spacing-sm)); padding: var(--spacing-sm) calc(var(--spacing-sm) + var(--spacing-xxs)); border: calc(var(--spacing-xxs) * .375) solid var(--color-border); border-radius: var(--radii-chip); background: var(--color-card); color: var(--color-ink); }
.g-input::placeholder { color: var(--color-inkMuted); }
.g-input:disabled { background: var(--color-surfaceSunken); color: var(--color-inkMuted); }
.g-input[aria-invalid="true"] { border-color: var(--color-brick); border-width: calc(var(--spacing-xxs) / 2); }
.g-textarea { min-height: calc(var(--spacing-xxl) + var(--spacing-xs)); resize: none; }
.g-date-field { width: 100%; }
.g-date-field--disabled .g-row { cursor: default; background: var(--color-surfaceSunken); color: var(--color-inkMuted); }
.g-date-field--disabled .g-row-label, .g-date-field--disabled .g-row-glyph, .g-date-field--disabled .g-row-chevron { opacity: .5; }
.g-date-field > summary { list-style: none; }
.g-date-field[open] > summary { border-bottom: 0; }
.g-date-field > summary::-webkit-details-marker { display: none; }
.g-date-editor { display: grid; gap: var(--spacing-sm); padding: var(--spacing-sm); border-bottom: calc(var(--spacing-xxs) / 4) solid var(--color-divider); }
.g-time-row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--spacing-sm); }
.g-time-row .g-input { width: auto; min-height: calc(var(--spacing-lg) + var(--spacing-xxs)); padding: var(--spacing-xxs) var(--spacing-xs); border: 0; background: var(--color-surfaceSunken); }
.g-menu-select { width: 100%; padding: 0; border: 0; appearance: none; background: none; color: var(--color-ink); }
.g-menu-select:focus-visible { outline: none; }
.g-menu-row:focus-within { outline: calc(var(--spacing-xxs) / 2) solid var(--color-ink); outline-offset: var(--spacing-xxs); }
.g-field-message { color: var(--color-inkSecondary); }
.g-field-message--error { display: flex; align-items: center; gap: var(--spacing-xs); color: var(--color-brick); }
.g-field-message--error img { flex: none; width: max(var(--spacing-sm), var(--a11y-icon-size)); height: max(var(--spacing-sm), var(--a11y-icon-size)); }
.g-toggle, .g-tick { display: flex; align-items: center; justify-content: space-between; gap: var(--spacing-xs); min-height: calc(var(--spacing-lg) + var(--spacing-xxs)); color: var(--color-ink); cursor: pointer; }
.g-toggle > span:first-child { min-width: 0; overflow-wrap: anywhere; }
.g-toggle input, .g-tick input { position: absolute; opacity: 0; }
.g-toggle-track { position: relative; width: calc(var(--spacing-lg) + var(--spacing-xs) + var(--spacing-xxs)); height: calc(var(--spacing-md) + var(--spacing-xxs)); border-radius: var(--radii-hero); background: var(--color-neutral300); flex: none; }
.g-toggle-track::after { content: ""; position: absolute; top: var(--spacing-xxs); left: var(--spacing-xxs); width: calc(var(--spacing-sm) + var(--spacing-xxs)); height: calc(var(--spacing-sm) + var(--spacing-xxs)); border-radius: var(--radii-hero); background: var(--color-white); }
.g-toggle input:checked + .g-toggle-track { background: var(--color-ink); }
.g-toggle input:checked + .g-toggle-track::after { left: calc(var(--spacing-lg) - var(--spacing-sm) + var(--spacing-xxs)); }
.g-tick { justify-content: flex-start; }
.g-tick--icon-only { min-width: calc(var(--spacing-lg) + var(--spacing-xxs)); justify-content: center; }
.g-tick-mark { display: inline-grid; place-items: center; width: calc(var(--spacing-md) + var(--spacing-xxs)); height: calc(var(--spacing-md) + var(--spacing-xxs)); border: calc(var(--spacing-xxs) / 2) solid var(--color-ink); border-radius: var(--radii-hero); flex: none; }
.g-tick input:checked + .g-tick-mark { background: var(--color-ink); }
.g-tick input:checked + .g-tick-mark::after { content: "✓"; color: var(--color-white); }
.g-row { display: flex; align-items: center; gap: calc(var(--spacing-xs) + var(--spacing-xxs)); width: 100%; min-height: var(--spacing-xl); padding: calc(var(--spacing-xs) + var(--spacing-xxs)) var(--spacing-sm); border: 0; border-bottom: calc(var(--spacing-xxs) / 4) solid var(--color-divider); background: var(--color-card); color: var(--color-ink); font: inherit; text-align: left; }
.g-row--with-error { flex-wrap: wrap; }
.g-row-error { flex: 0 0 100%; }
.g-row--read-only, .g-row--saving { cursor: default; }
.g-row-spinner { box-sizing: border-box; width: calc(var(--spacing-sm) + var(--spacing-xxs)); height: calc(var(--spacing-sm) + var(--spacing-xxs)); border: calc(var(--spacing-xxs) / 2) solid var(--color-neutral300); border-top-color: var(--color-inkMuted); border-radius: var(--radii-hero); flex: none; animation: g-spin var(--motion-skeletonPulse) linear infinite; }
.g-row-card { box-sizing: border-box; width: 100%; border: calc(var(--spacing-xxs) / 4) solid var(--color-divider); border-radius: var(--radii-card); background: var(--color-card); box-shadow: 0 var(--spacing-xxs) var(--spacing-xs) var(--color-divider); }
.g-row-card > .g-field:first-child .g-date-field--disabled .g-row{border-top-left-radius:var(--radii-card);border-top-right-radius:var(--radii-card)}
.g-row-card > .g-field:last-child .g-row{border-bottom-left-radius:var(--radii-card);border-bottom-right-radius:var(--radii-card)}
.g-row-card > .g-field:last-child .g-row, .g-row-card > .g-field:last-child .g-date-field > summary { border-bottom: 0; }
.g-row-icon { width: max(var(--spacing-md), var(--a11y-icon-size)); flex: none; }
.g-row-icon img { width: max(calc(var(--spacing-sm) + var(--spacing-xxs)), var(--a11y-icon-size)); height: max(calc(var(--spacing-sm) + var(--spacing-xxs)), var(--a11y-icon-size)); }
.g-row-glyph { display: block; width: max(calc(var(--spacing-sm) + var(--spacing-xxs)), var(--a11y-icon-size)); height: max(calc(var(--spacing-sm) + var(--spacing-xxs)), var(--a11y-icon-size)); background: var(--color-inkSecondary); -webkit-mask-position: center; mask-position: center; -webkit-mask-size: contain; mask-size: contain; -webkit-mask-repeat: no-repeat; mask-repeat: no-repeat; }
.g-row-glyph--calendar { -webkit-mask-image: url('/static/images/icon-calendar.svg'); mask-image: url('/static/images/icon-calendar.svg'); }
.g-row-glyph--tag { -webkit-mask-image: url('/static/images/icon-tag.svg'); mask-image: url('/static/images/icon-tag.svg'); }
.g-row-glyph--person { -webkit-mask-image: url('/static/images/icon-person.svg'); mask-image: url('/static/images/icon-person.svg'); }
.g-row-content { display: grid; gap: var(--spacing-xxs); flex: 1; min-width: 0; overflow-wrap: anywhere; }
.g-row-label { color: var(--color-inkSecondary); }
.g-row-value--empty { color: var(--color-inkMuted); }
.g-row-chevron { flex: none; width: max(var(--spacing-xs), var(--a11y-chevron-width)); height: max(var(--spacing-sm), var(--a11y-icon-size)); }
.g-chip { display: inline-flex; align-items: center; min-height: calc(var(--spacing-lg) + var(--spacing-xxs)); padding: 0; border: 0; background: none; color: var(--color-ink); text-align: left; }
.g-chip-face { display: inline-flex; align-items: center; padding: calc(var(--spacing-xs) - var(--spacing-xxs) / 4) calc(var(--spacing-sm) - var(--spacing-xxs) * .75); border: calc(var(--spacing-xxs) / 4) solid var(--color-border); border-radius: var(--radii-hero); background: var(--color-card); }
.g-chip--filter .g-chip-face { padding: calc(var(--spacing-xs) - var(--spacing-xxs) / 2) var(--spacing-sm); }
.g-chip--answerMuted { color: var(--color-inkMuted); }
.g-chip--selected .g-chip-face { background: var(--color-ink); color: var(--color-white); border-color: var(--color-ink); }
.g-row:disabled, .g-chip:disabled, .g-toggle:has(input:disabled), .g-tick:has(input:disabled) { cursor: default; }
.g-input:focus-visible, .g-button:focus-visible, .g-chip:focus-visible, .g-row:focus-visible, .g-toggle input:focus-visible + .g-toggle-track, .g-tick input:focus-visible + .g-tick-mark { outline: calc(var(--spacing-xxs) / 2) solid var(--color-ink); outline-offset: var(--spacing-xxs); }
.g-input[aria-invalid="true"]:focus-visible, .g-row[aria-invalid="true"]:focus-visible { outline-color: var(--color-brick); }
@media (prefers-reduced-motion: reduce) { .g-button-spinner, .g-row-spinner { animation: g-fade-in var(--motion-reducedDuration) ease-out 1; } }
@media (prefers-reduced-motion: no-preference) { .g-button, .g-chip, .g-row { transition: transform var(--motion-snappy), opacity var(--motion-snappy); } }
@media (prefers-reduced-motion: reduce) { .g-button, .g-chip, .g-row { transition: opacity var(--motion-reducedDuration) ease-out; } }
@media (prefers-reduced-motion: reduce) { .g-button:active:not(:disabled), .g-chip:active:not(:disabled), .g-row:active:not(:disabled):not(.g-row--read-only) { transform: none; } }
.g-range { width: 100%; min-height: calc(var(--spacing-lg) + var(--spacing-xxs)); accent-color: var(--color-ink); }