@import url("./tokens.css?v=20260925-button-contrast-v1");
@import url("./fonts.css?v=20260814-quality-pass-v1");

@font-face {
  /* Icon ligatures should not briefly paint as raw text such as `arrow_back`. */
  font-display: block;
  font-family: "Material Symbols Rounded";
  font-style: normal;
  font-weight: 100 700;
  src: url("./icons/material-symbols-rounded.woff2?v=20260816-icons-local-v1") format("woff2");
}

.material-symbols-rounded {
  direction: ltr;
  display: inline-block;
  font-family: "Material Symbols Rounded";
  font-feature-settings: "liga";
  font-size: 1.25em;
  font-style: normal;
  font-variation-settings: "FILL" 0, "wght" 450, "GRAD" 0, "opsz" 24;
  letter-spacing: normal;
  line-height: 1;
  text-transform: none;
  white-space: nowrap;
  word-wrap: normal;
  -webkit-font-smoothing: antialiased;
}

html.icons-pending .material-symbols-rounded,
html.icons-pending .agentic-app__aside-icon,
html.icons-failed .material-symbols-rounded,
html.icons-failed .agentic-app__aside-icon { font-size: 0; visibility: hidden; }

/* Base */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  max-inline-size: 100%;
  overflow-x: clip;
  scroll-behavior: smooth;
  touch-action: manipulation;
  word-break: keep-all;
}

body {
  max-inline-size: 100%;
  margin: 0;
  min-inline-size: 0;
  overflow-x: clip;
  background: var(--color-surface);
  color: var(--color-on-surface);
  font: var(--type-body-large);
  text-rendering: optimizeLegibility;
}

img,
svg,
video,
canvas {
  max-inline-size: 100%;
}

a {
  color: inherit;
  text-underline-offset: var(--space-1);
}

:focus-visible {
  border-radius: var(--shape-extra-small);
  box-shadow: var(--focus-ring);
  outline: 0;
}

/* Loading surfaces share one quiet, token-driven contract across Shop,
   Product, Community, and operating workspaces. */
.skeleton-block {
  animation: var(--skeleton-animation);
  background: var(--skeleton-background);
  border-radius: var(--skeleton-radius);
  display: block;
}
.skeleton-block--image { aspect-ratio: var(--skeleton-image-aspect-ratio); }
.skeleton-block--line { block-size: var(--space-4); }
.skeleton-block--short { max-inline-size: var(--skeleton-width-short); }
.skeleton-block--button { block-size: var(--button-height); margin-block-start: var(--space-2); }
.skeleton-block--value { block-size: var(--skeleton-value-height); }
.skeleton-block--wide { max-inline-size: var(--skeleton-width-wide); }
@keyframes hipo-skeleton-pulse {
  from { opacity: var(--skeleton-min-opacity); }
  to { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
  .skeleton-block { animation: none; }
}

/* Surface state. Keep the surface and its readable foreground together so a
   contextual container cannot accidentally inherit the wrong text role. The
   light-only palette keeps this state tonal, never a dark-mode escape hatch. */
.surface-inverse {
  /* Inverse controls inherit the surface contract. This keeps a dynamically
     inserted outline button readable even when the caller only supplies the
     shared surface class and cannot add a second modifier. */
  --button-outline-background: var(--button-outline-inverse-background);
  --button-outline-border: var(--button-outline-inverse-border);
  --button-outline-foreground: var(--button-outline-inverse-foreground);
  --button-outline-hover-background: var(--button-outline-inverse-hover-background);
  background: var(--color-surface-inverse);
  color: var(--color-on-surface-inverse);
}

/* Dialogs share one figure-ground treatment. Native dialog backdrops are
   intentionally dark and lightly blurred so every interruption is legible
   without introducing a second visual language. Page-specific drawers may
   still control their geometry, but not the backdrop contract. */
.hipo-dialog {
  background: var(--dialog-background);
  border: var(--dialog-border-width) solid var(--dialog-border-color);
  border-radius: var(--dialog-radius);
  box-shadow: var(--dialog-shadow);
  color: var(--dialog-foreground);
}

.hipo-dialog::backdrop {
  -webkit-backdrop-filter: blur(var(--dialog-backdrop-blur));
  backdrop-filter: blur(var(--dialog-backdrop-blur));
  background: var(--dialog-backdrop);
}

/* Button */
.button {
  align-items: center;
  border: var(--border-width-strong) solid transparent;
  border-radius: var(--button-radius);
  cursor: pointer;
  display: inline-flex;
  font: var(--type-label-large);
  gap: var(--space-3);
  justify-content: center;
  min-height: var(--button-height);
  padding-inline: var(--space-5);
  text-transform: uppercase;
  letter-spacing: var(--tracking-label);
  text-decoration: none;
  transition: background-color var(--motion-short-2) var(--ease-smooth),
    border-color var(--motion-short-2) var(--ease-smooth),
    color var(--motion-short-2) var(--ease-smooth),
    transform var(--motion-short-2) var(--ease-spring),
    box-shadow var(--motion-short-2) var(--ease-smooth);
}

.icon-button {
  min-inline-size: var(--button-height);
  padding-inline: var(--space-3);
}

.icon-button .material-symbols-rounded {
  font-size: 1.35em;
}

@media (hover: hover) and (pointer: fine) {
  .button:hover:not(:disabled) {
    box-shadow: var(--elevation-1);
    transform: translateY(-1px);
  }
}

.button:active:not(:disabled) {
  transform: scale(var(--state-pressed-scale));
}

.button:disabled,
.button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--state-disabled-opacity);
}

.button--primary {
  background: var(--button-primary-background);
  border-color: var(--button-primary-border);
  color: var(--button-primary-foreground);
}

.button--secondary {
  background: var(--button-secondary-background);
  color: var(--button-secondary-foreground);
}

.button--outline {
  background: var(--button-outline-background);
  border-color: var(--button-outline-border);
  color: var(--button-outline-foreground);
}

/* Explicit modifier for contextual surfaces. Keep the parent selector as a
   compatibility fallback for existing markup, but prefer the modifier when
   controls are created or moved dynamically. */
.button--outline-on-inverse,
.surface-inverse .button--outline,
.surface-inverse.button--outline {
  background: var(--button-outline-inverse-background);
  border-color: var(--button-outline-inverse-border);
  color: var(--button-outline-inverse-foreground);
}

.button--primary:focus-visible,
.button--outline:focus-visible {
  box-shadow: var(--focus-ring), var(--elevation-2);
}

@media (hover: hover) and (pointer: fine) {
  .button--primary:hover { background: var(--button-primary-hover-background); color: var(--button-primary-hover-foreground); }
  .button--secondary:hover { background: var(--color-surface-container-high); }
  .button--outline:hover { background: var(--button-outline-hover-background); }
  .button--outline-on-inverse:hover,
  .surface-inverse .button--outline:hover,
  .surface-inverse.button--outline:hover {
    background: var(--button-outline-inverse-hover-background);
    color: var(--button-outline-inverse-hover-foreground);
  }
}

/* Form controls */
.field-group {
  display: grid;
  gap: var(--space-2);
}

.field-label {
  color: var(--color-on-surface);
  font: var(--type-label-large);
}

.field-optional,
.field-hint,
.field-error {
  font: var(--type-body-medium);
}

.field-optional,
.field-hint {
  color: var(--color-on-surface-variant);
}

.field-error {
  color: var(--color-error);
}

.field {
  background: var(--color-surface);
  border: var(--border-width) solid var(--field-outline);
  border-radius: var(--field-radius);
  color: var(--color-on-surface);
  font: var(--type-body-large);
  min-height: var(--field-height);
  padding-inline: var(--space-4);
  transition: border-color var(--motion-short-2) var(--ease-standard),
    box-shadow var(--motion-short-2) var(--ease-standard);
  width: 100%;
}

.field:hover { border-color: var(--color-on-surface); }
.field:focus-visible {
  border-color: var(--color-primary);
  box-shadow: var(--focus-ring);
  outline: 0;
}
.field[aria-invalid="true"] { border-color: var(--field-error-outline); }

/* Mobile interaction contract: prevent accidental double-tap zoom while
   preserving pinch zoom, and keep iOS from zooming the viewport when a form
   control receives focus. The minimum applies to every shared surface,
   including controls that use page-specific font shorthands. */
input,
select,
textarea,
[contenteditable="true"] {
  font-size: max(1rem, 16px) !important;
}

.button--ghost {
  background: transparent;
  border-color: transparent;
  color: var(--color-on-surface);
}
@media (hover: hover) and (pointer: fine) {
  .button--ghost:hover {
    background: var(--color-surface-container-high);
    color: var(--color-on-surface);
  }
}

.consent-field {
  align-items: start;
  display: grid;
  gap: var(--space-3);
  grid-template-columns: var(--space-5) 1fr;
  min-height: var(--button-height);
}

.consent-field input {
  accent-color: var(--color-primary);
  block-size: var(--space-5);
  inline-size: var(--space-5);
  margin: var(--space-1) 0 0;
}

.consent-field__copy {
  color: var(--color-on-surface);
  font: var(--type-body-medium);
}

/* Content / feedback */
.card {
  background: var(--card-background);
  border: var(--border-width-strong) solid var(--card-outline);
  border-radius: var(--card-radius);
  color: var(--card-foreground);
  transition: transform var(--motion-short-2) var(--ease-standard),
    box-shadow var(--motion-short-2) var(--ease-standard),
    border-color var(--motion-short-2) var(--ease-standard);
}

.card--interactive:hover {
  border-color: var(--color-primary);
  box-shadow: var(--elevation-2);
  transform: translateY(calc(var(--space-1) * -0.5));
}

.notice {
  border-radius: var(--shape-small);
  font: var(--type-body-medium);
  padding: var(--space-4);
}

.notice--success { background: var(--notice-success-background); color: var(--notice-success-foreground); }
.notice--error { background: var(--notice-error-background); color: var(--notice-error-foreground); }
.notice--info { background: var(--color-primary-container); color: var(--color-on-primary-container); }
.notice--warning { background: var(--color-warning-container); color: var(--color-on-warning-container); }

/* Feedback / one notification contract. Inline alerts and floating toasts
   share the same tone, icon, spacing, and dismissal behavior. */
.hipo-feedback {
  align-items: start;
  background: var(--feedback-info-background);
  border: var(--feedback-border-width) solid var(--feedback-border-info);
  border-radius: var(--feedback-radius);
  color: var(--feedback-info-foreground);
  display: grid;
  font: var(--type-body-medium);
  gap: var(--feedback-gap);
  grid-template-areas:
    "icon message close"
    ". actions actions";
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-rows: auto auto;
  min-inline-size: 0;
  padding: var(--feedback-padding);
}

.hipo-feedback[hidden] { display: none; }
.hipo-feedback__icon { font-size: var(--icon-medium); grid-area: icon; }
.hipo-feedback__message { align-self: start; grid-area: message; margin: 0; min-inline-size: 0; overflow-wrap: anywhere; }
.hipo-feedback__actions { align-items: center; display: flex; flex-wrap: wrap; gap: var(--space-3); grid-area: actions; min-inline-size: 0; }
.hipo-feedback__actions .button { min-block-size: var(--space-10); }
.hipo-feedback__close {
  align-items: center;
  background: transparent;
  border: 0;
  border-radius: var(--shape-full);
  color: inherit;
  cursor: pointer;
  display: inline-flex;
  flex: 0 0 var(--space-10);
  grid-area: close;
  justify-content: center;
  min-block-size: var(--space-10);
  min-inline-size: var(--space-10);
  padding: 0;
}
.hipo-feedback__close:hover, .hipo-feedback__close:focus-visible { background: var(--feedback-border-info); color: var(--color-on-primary); }
.hipo-feedback__close .material-symbols-rounded { font-size: var(--icon-small); }

.hipo-feedback[data-tone="error"] { background: var(--feedback-error-background); border-color: var(--feedback-border-error); color: var(--feedback-error-foreground); }
.hipo-feedback[data-tone="success"] { background: var(--feedback-success-background); border-color: var(--feedback-border-success); color: var(--feedback-success-foreground); }
.hipo-feedback[data-tone="warning"] { background: var(--feedback-warning-background); border-color: var(--feedback-border-warning); color: var(--feedback-warning-foreground); }
.hipo-feedback[data-tone="info"] { background: var(--feedback-info-background); border-color: var(--feedback-border-info); color: var(--feedback-info-foreground); }
.hipo-feedback[data-tone="error"] .hipo-feedback__close:hover,
.hipo-feedback[data-tone="error"] .hipo-feedback__close:focus-visible { background: var(--feedback-border-error); color: var(--color-on-error); }
.hipo-feedback[data-tone="success"] .hipo-feedback__close:hover,
.hipo-feedback[data-tone="success"] .hipo-feedback__close:focus-visible { background: var(--feedback-border-success); color: var(--color-on-success); }
.hipo-feedback[data-tone="warning"] .hipo-feedback__close:hover,
.hipo-feedback[data-tone="warning"] .hipo-feedback__close:focus-visible { background: var(--feedback-border-warning); color: var(--color-on-warning); }

.hipo-feedback--inline { margin-block: var(--space-4); }
.hipo-feedback--floating {
  align-content: start;
  block-size: auto;
  box-sizing: border-box;
  box-shadow: var(--feedback-floating-shadow);
  grid-auto-rows: max-content;
  grid-template-rows: max-content max-content;
  height: auto;
  inset: auto;
  inset-block-start: calc(var(--space-24) + env(safe-area-inset-top));
  inset-block-end: auto;
  inset-inline-end: var(--layout-page-inline);
  inset-inline-start: auto;
  max-inline-size: min(32rem, calc(100vw - (var(--layout-page-inline) * 2)));
  max-block-size: min(24rem, calc(100dvh - var(--space-16)));
  margin: 0;
  min-block-size: 0;
  min-height: 0;
  overflow: auto;
  position: fixed;
  z-index: 1000;
}

@media (max-width: 43.75rem) {
  .hipo-feedback--floating { inset-inline: var(--space-4); max-inline-size: none; }
  .hipo-feedback__actions { align-items: stretch; }
  .hipo-feedback__actions .button { flex: 1 1 auto; }
}

.status-chip {
  align-items: center;
  background: var(--status-pending-background);
  border-radius: var(--shape-extra-small);
  color: var(--status-pending-foreground);
  display: inline-flex;
  font: var(--type-label-medium);
  min-height: var(--space-7);
  padding-inline: var(--space-3);
}

.status-chip--success { background: var(--color-success-container); color: var(--color-on-success-container); }
.status-chip--error { background: var(--color-error-container); color: var(--color-on-error-container); }
.status-chip--neutral { background: var(--color-secondary-container); color: var(--color-on-secondary-container); }

/* Entrance & interaction animation utilities */
@keyframes hipo-fade-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes hipo-slide-up {
  from {
    opacity: 0;
    transform: translateY(14px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

@keyframes hipo-scale-in {
  from {
    opacity: 0;
    transform: scale(0.97);
  }
  to {
    opacity: 1;
    transform: scale(1);
  }
}

.animate-slide-up {
  animation: var(--animation-slide-up);
}

.animate-fade-in {
  animation: var(--animation-fade-in);
}

@media (prefers-reduced-motion: reduce) {
  *, ::before, ::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}