/* Obviously UI — web renditions of the obviously-flutter-framework widgets.
   Every value is a token; every rule names the Dart it mirrors. */

/* Generic glyphs are Material Symbols (material_symbols_icons, re-exported by
   obviously_ui_icons). Outlined, weight 400, no fill — the package default. */
@import url('https://fonts.googleapis.com/css2?family=Material+Symbols+Outlined:opsz,wght,FILL,GRAD@20..48,400,0,0&display=block');

.obv-msym {
  font-family: 'Material Symbols Outlined';
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  font-size: var(--icon-medium);
  font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 24;
  -webkit-font-smoothing: antialiased;
  speak: never;
}
.obv-msym--tiny { font-size: var(--icon-tiny); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.obv-msym--small { font-size: var(--icon-small); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 20; }
.obv-msym--large { font-size: var(--icon-large); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 40; }
.obv-msym--extra-large { font-size: var(--icon-extra-large); font-variation-settings: 'FILL' 0, 'wght' 400, 'GRAD' 0, 'opsz' 48; }

.obv-btn,
.obv-icon-btn,
.obv-chip,
.obv-field,
.obv-textbox,
.obv-dd-trigger,
.obv-dd-option,
.obv-label,
.obv-message,
.obv-card {
  font-family: var(--font-sans);
  box-sizing: border-box;
  color: var(--primary-foreground);
}

.obv-glyph {
  font-family: var(--font-icons);
  font-weight: 400;
  font-style: normal;
  line-height: 1;
  display: inline-block;
  font-size: var(--icon-medium);
  speak: never;
}

.obv-glyph--tiny { font-size: var(--icon-tiny); }
.obv-glyph--small { font-size: var(--icon-small); }
.obv-glyph--large { font-size: var(--icon-large); }
.obv-glyph--extra-large { font-size: var(--icon-extra-large); }

/* ---------- Disabled: ObvMaybeDisabledWrapper ---------- */

.obv-disabled {
  opacity: var(--opacity-disabled);
  pointer-events: none;
}

/* ---------- Button: ObvButton / ObvButtonStyle ---------- */

.obv-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  height: var(--input-small);
  min-width: var(--input-small);
  padding: 0 var(--space-4);
  border: var(--button-border-width) solid transparent;
  border-radius: var(--radius-circular);
  background: transparent;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear;
}

.obv-btn--standard { height: var(--input-standard); }
.obv-btn--tiny { height: var(--input-tiny); padding: 0 var(--space-2); font-size: 12px; line-height: 18px; }
.obv-btn--square { border-radius: var(--radius-squared); }

.obv-btn--primaryFilled {
  background: var(--primary-brand);
  color: var(--on-primary-brand);
}
.obv-btn--primaryOutlined { border-color: var(--primary-brand); }
.obv-btn--secondaryFilled { background: var(--auxiliary); }
.obv-btn--secondaryOutlined { border-color: var(--auxiliary); }
.obv-btn--transparent { background: transparent; }
.obv-btn--action {
  background: var(--primary-background);
  border-radius: var(--radius-squared);
}
.obv-btn--text {
  height: auto;
  min-width: 0;
  padding: 0;
  border: 0;
  border-radius: var(--radius-squared);
}

.obv-btn:hover:not(:disabled) {
  background: var(--primary-foreground);
  border-color: var(--primary-foreground);
  color: var(--primary-background);
}
.obv-btn--transparent:hover:not(:disabled) {
  background: var(--auxiliary);
  border-color: transparent;
  color: var(--primary-foreground);
}
.obv-btn--text:hover:not(:disabled) {
  background: transparent;
  color: var(--primary-foreground);
  text-decoration: underline;
  text-underline-offset: 3px;
}

.obv-btn:disabled,
.obv-icon-btn:disabled,
.obv-dd-trigger:disabled,
.obv-switch:disabled,
.obv-checkbox:disabled {
  opacity: var(--opacity-disabled);
  cursor: not-allowed;
}

.obv-btn:focus-visible,
.obv-icon-btn:focus-visible,
.obv-dd-trigger:focus-visible,
.obv-switch:focus-visible,
.obv-checkbox:focus-visible,
.obv-chip__action:focus-visible {
  outline: 2px solid var(--primary-foreground);
  outline-offset: 2px;
}

.obv-btn__spinner {
  width: 16px;
  height: 16px;
  border: 2px solid currentColor;
  border-right-color: transparent;
  border-radius: var(--radius-circular);
  animation: obv-spin 800ms linear infinite;
}

@keyframes obv-spin { to { transform: rotate(360deg); } }

/* ---------- IconButton: ObvIconButton ---------- */

.obv-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--input-small);
  height: var(--input-small);
  padding: 0;
  border: var(--button-border-width) solid transparent;
  border-radius: var(--radius-circular);
  background: transparent;
  cursor: pointer;
  transition: background-color 100ms linear, border-color 100ms linear, color 100ms linear;
}

.obv-icon-btn--standard { width: var(--input-standard); height: var(--input-standard); }
.obv-icon-btn--tiny { width: var(--input-tiny); height: var(--input-tiny); }
.obv-icon-btn--square,
.obv-icon-btn--action { border-radius: var(--radius-squared); }
.obv-icon-btn--oval { width: auto; padding: 0 var(--space-3); }

.obv-icon-btn--primaryFilled { background: var(--primary-brand); color: var(--on-primary-brand); }
.obv-icon-btn--primaryOutlined { border-color: var(--primary-brand); }
.obv-icon-btn--secondaryFilled { background: var(--auxiliary); }
.obv-icon-btn--secondaryOutlined { border-color: var(--auxiliary); }
.obv-icon-btn--action { background: var(--primary-background); }

.obv-icon-btn:hover:not(:disabled) {
  background: var(--primary-foreground);
  border-color: var(--primary-foreground);
  color: var(--primary-background);
}
.obv-icon-btn--transparent:hover:not(:disabled) {
  background: var(--auxiliary);
  border-color: transparent;
  color: var(--primary-foreground);
}

/* ---------- Chip: ObvChip ---------- */

.obv-chip {
  display: inline-flex;
  align-items: center;
  gap: var(--space-1);
  height: var(--input-standard);
  padding: var(--space-2) var(--space-3);
  border: var(--button-border-width) solid var(--secondary-background);
  border-radius: var(--radius-circular);
  background: transparent;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
  white-space: nowrap;
}

.obv-chip--small {
  height: var(--input-small);
  padding: var(--space-1) var(--space-2);
}
.obv-chip--status { border-radius: var(--radius-squared); }
.obv-chip--filled { border-color: transparent; }
.obv-chip--on-vibrant { color: var(--on-vibrant-palette); }

.obv-chip__action {
  display: inline-flex;
  align-items: center;
  margin-left: var(--space-1);
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  cursor: pointer;
}
.obv-chip__action svg {
  width: var(--icon-small);
  height: var(--icon-small);
}

/* ---------- Field, TextBox: ObvInputContainer + ObvInputLabel ---------- */

.obv-field,
.obv-textbox {
  display: flex;
  flex-direction: column;
  gap: var(--space-2);
  width: 100%;
  max-width: var(--form-field-extra-large);
}

.obv-field--small { max-width: var(--form-field-small); }
.obv-field--medium { max-width: var(--form-field-medium); }
.obv-field--large { max-width: var(--form-field-large); }
.obv-field--full { max-width: none; }

.obv-label {
  display: inline-flex;
  gap: 2px;
  font-size: 14px;
  line-height: 21px;
  font-weight: 500;
}
.obv-label__required { color: var(--error); }

.obv-input {
  width: 100%;
  min-height: var(--input-standard);
  padding: 0 var(--space-3);
  border: var(--input-border-width) solid var(--secondary-background);
  border-radius: var(--radius-squared);
  background: var(--primary-background);
  color: var(--primary-foreground);
  font-family: var(--font-sans);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  transition: border-color 250ms linear, background-color 250ms linear;
}

textarea.obv-input {
  min-height: calc(var(--input-standard) * 3);
  padding: var(--space-2) var(--space-3);
  resize: vertical;
}

.obv-input::placeholder { color: var(--placeholder-text); }

.obv-input:focus,
.obv-input--focused { border-color: var(--auxiliary); outline: none; }
.obv-input--error { border-color: var(--error); color: var(--error); }
.obv-input--readOnly,
.obv-input--highlighted { background: var(--card); }
.obv-input--highlighted { border-color: var(--primary-brand); }
.obv-input--disabled,
.obv-input:disabled { color: var(--secondary-background); cursor: not-allowed; }
.obv-input--inverse { background: var(--card); border-color: transparent; }
.obv-input--rounded { border-radius: var(--radius-circular); padding: 0 var(--space-4); }

.obv-message {
  font-size: 12px;
  line-height: 18px;
  font-weight: 400;
  color: var(--error);
}

/* ---------- Dropdown: ObvDropdownMenu ---------- */

.obv-dd {
  position: relative;
  display: inline-block;
}

.obv-dd-trigger {
  display: inline-flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-2);
  min-width: var(--dropdown-activator-width);
  height: var(--input-standard);
  padding: 0 var(--space-3);
  border: var(--input-border-width) solid var(--secondary-background);
  border-radius: var(--radius-squared);
  background: var(--primary-background);
  font-size: 14px;
  line-height: 21px;
  font-weight: 400;
  cursor: pointer;
  transition: border-color 100ms linear, background-color 100ms linear, color 100ms linear;
}

.obv-dd-trigger--pill {
  min-width: 0;
  height: var(--input-small);
  border-width: var(--button-border-width);
  border-color: var(--primary-brand);
  border-radius: var(--radius-circular);
  padding: 0 var(--space-4);
  font-weight: 500;
}
.obv-dd-trigger--pill.obv-dd-trigger--secondary { border-color: var(--auxiliary); }

.obv-dd-trigger:hover:not(:disabled),
.obv-dd--open .obv-dd-trigger--pill {
  background: var(--primary-foreground);
  border-color: var(--primary-foreground);
  color: var(--primary-background);
}
.obv-dd--open .obv-dd-trigger:not(.obv-dd-trigger--pill) { border-color: var(--auxiliary); }

.obv-dd-trigger__chevron {
  width: var(--icon-tiny);
  height: var(--icon-tiny);
  flex: none;
}

.obv-dd__menu {
  position: absolute;
  top: calc(100% + var(--space-1));
  left: 0;
  min-width: 100%;
  max-height: var(--dropdown-overlay-height);
  overflow: auto;
  margin: 0;
  padding: 0;
  list-style: none;
  background: var(--primary-background);
  border-radius: var(--radius-squared);
  box-shadow: var(--elevation-mid);
  z-index: 2;
}

.obv-dd-option {
  padding: var(--space-2) var(--space-3);
  font-size: 14px;
  line-height: 21px;
  cursor: pointer;
  white-space: nowrap;
}

.obv-dd-option:hover { background: var(--hovered-container); color: var(--primary-background); }
.obv-dd-option[aria-selected="true"] { background: var(--primary-foreground); color: var(--primary-background); }

/* ---------- Switch: ObvSwitch ---------- */

.obv-switch {
  position: relative;
  display: inline-block;
  width: var(--switch-width);
  height: var(--switch-height);
  padding: 0;
  border: 0;
  background: transparent;
  cursor: pointer;
  --_track: var(--secondary-brand);
  --_ring: var(--primary-foreground);
}
.obv-switch[aria-checked="true"] { --_track: var(--primary-brand); }
.obv-switch:disabled { --_track: var(--secondary-background); --_ring: var(--auxiliary); opacity: 1; }

.obv-switch__track {
  position: absolute;
  top: 10%;
  left: 8%;
  width: 84%;
  height: 80%;
  border-radius: var(--radius-circular);
  background: var(--_track);
  transition: background-color 120ms cubic-bezier(0.4, 0, 0.2, 1);
}

.obv-switch__knob {
  position: absolute;
  top: 0;
  left: 0;
  width: var(--switch-height);
  height: var(--switch-height);
  box-sizing: border-box;
  border: var(--switch-ring) solid var(--_ring);
  border-radius: var(--radius-circular);
  background: var(--card);
  transition: left 120ms cubic-bezier(0.4, 0, 0.2, 1), border-color 120ms linear;
}
.obv-switch[aria-checked="true"] .obv-switch__knob { left: calc(var(--switch-width) - var(--switch-height)); }

.obv-switch--large { width: calc(var(--switch-width) * 1.4); height: calc(var(--switch-height) * 1.4); }
.obv-switch--large .obv-switch__knob { width: calc(var(--switch-height) * 1.4); height: calc(var(--switch-height) * 1.4); border-width: calc(var(--switch-ring) * 1.4); }
.obv-switch--large[aria-checked="true"] .obv-switch__knob { left: calc((var(--switch-width) - var(--switch-height)) * 1.4); }

/* ---------- Checkbox: ObvCheckbox ---------- */

.obv-checkbox {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 18px;
  height: 18px;
  padding: 0;
  border: 0;
  border-radius: var(--radius-squared);
  background: var(--auxiliary);
  color: var(--on-primary-brand);
  cursor: pointer;
}
.obv-checkbox[aria-checked="true"] { background: var(--primary-brand); }
.obv-checkbox--alternate[aria-checked="true"] { background: var(--primary-foreground); color: var(--primary-background); }
.obv-checkbox svg { width: 14px; height: 14px; }

/* ---------- Card: ObvCard ---------- */

.obv-card {
  display: block;
  padding: var(--space-4);
  border-radius: var(--radius-squared);
  background: var(--card);
  box-shadow: var(--elevation-base);
}
.obv-card--secondary { background: var(--primary-background); }
.obv-card--transparent { background: transparent; }
.obv-card--mid { box-shadow: var(--elevation-mid); }
.obv-card--full { box-shadow: var(--elevation-full); }
.obv-card__header {
  margin: 0 0 var(--space-2);
  font-size: 16px;
  line-height: 24px;
  font-weight: 500;
}