/* WWWyou UI Foundation v0.3.4 — canonical shared UI primitives for WWWyou modules.
 * One source of truth for typography, controls, cards, buttons, focus and status UI.
 * Visible plugin-owned text has a hard floor of 1rem / 16 CSS px.
 */
.wwy-ui-root,
.wwy-form-root,
.wwy-ki,
.wwy-admin,
.wwyou-start {
  --wwy-form-page-background: var(--wwy-host-page-background, #f7f9fb);
  --wwy-form-surface: var(--wwy-host-surface, #ffffff);
  --wwy-form-surface-soft: var(--wwy-host-surface-soft, #f4f7f9);
  --wwy-form-text: var(--wwy-host-text, #1f2933);
  --wwy-form-muted: var(--wwy-host-muted, #52616d);
  --wwy-form-border: var(--wwy-host-border, #dce4e9);
  --wwy-form-accent: var(--wwy-host-accent, #3f6678);
  --wwy-form-accent-foreground: var(--wwy-host-accent-foreground, #ffffff);
  --wwy-form-error: #8a3b12;
  --wwy-form-error-background: #fff8f1;
  --wwy-form-success: #28714f;
  --wwy-form-warning: #8a5b12;
  --wwy-form-radius-sm: .55rem;
  --wwy-form-radius-md: .8rem;
  --wwy-form-radius-lg: 1.05rem;
  --wwy-form-page-max: 1080px;
  --wwy-form-content-max: 960px;
  --wwy-form-reading-max: 72ch;
  --wwy-form-shell-inset: clamp(1.25rem, 5vw, 2rem);
  --wwy-form-runtime-padding-block: clamp(2.25rem, 7vw, 5.5rem);
  --wwy-form-card-padding: clamp(1.5rem, 4.25vw, 2.35rem);
  --wwy-form-field-gap: clamp(1.3rem, 3.2vw, 1.65rem);
  --wwy-form-grid-gap: clamp(.9rem, 2.4vw, 1.25rem);
  --wwy-form-card-background: var(--wwy-form-surface);
  --wwy-form-section-gap: clamp(1.85rem, 4.5vw, 2.6rem);
  --wwy-form-control-height: 48px;
  --wwy-form-control-padding-x: 1rem;
  --wwy-form-control-padding-y: .9rem;
  --wwy-form-control-border: var(--wwy-form-border);
  --wwy-form-focus-color: var(--wwy-host-focus, var(--wwy-form-accent));
  --wwy-form-link: var(--wwy-host-link, var(--wwy-form-accent));
  --wwy-form-compact-max: 380px;
  --wwy-ui-font-size-base: 1rem;
  --wwy-ui-font-size-small: 1rem;
  --wwy-ui-font-size-label: 1rem;
  --wwy-ui-font-size-eyebrow: clamp(1rem, .985rem + .08vw, 1.0625rem);
  --wwy-ui-font-size-h1: clamp(1.75rem, 1.6rem + .7vw, 2.25rem);
  --wwy-ui-font-size-h2: clamp(1.35rem, 1.25rem + .35vw, 1.625rem);
  --wwy-ui-font-size-h3: clamp(1.125rem, 1.08rem + .2vw, 1.3125rem);
  --wwy-form-focus-ring: 0 0 0 2px color-mix(in srgb, var(--wwy-form-focus-color) 13%, transparent);
  color: var(--wwy-form-text);
  font-family: var(--wwy-host-font, inherit);
  font-size: var(--wwy-ui-font-size-base);
  line-height: 1.55;
}

.wwy-form-root *,
.wwy-form-root *::before,
.wwy-form-root *::after,
.wwy-admin *,
.wwy-admin *::before,
.wwy-admin *::after,
.wwy-ki *,
.wwy-ki *::before,
.wwy-ki *::after { box-sizing: border-box; }

body.wwy-form-standalone {
  margin: 0;
  background: var(--wwy-form-page-background, #f7f9fb);
  color: var(--wwy-form-text, #1f2933);
}

.wwy-form-runtime {
  min-height: 100vh;
  padding-block: var(--wwy-form-runtime-padding-block);
  background: var(--wwy-form-page-background, #f7f9fb);
}

.wwy-form-shell {
  width: min(calc(100% - var(--wwy-form-shell-inset)), var(--wwy-form-content-max));
  margin-inline: auto;
}

.wwy-form-card {
  width: 100%;
  padding: var(--wwy-form-card-padding);
  border: 1px solid var(--wwy-form-border);
  border-radius: var(--wwy-form-radius-lg);
  background: var(--wwy-form-card-background);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .025);
}

.wwy-form-title {
  margin: 0 0 .9rem;
  color: var(--wwy-form-text);
  font-size: var(--wwy-ui-font-size-h2);
  line-height: 1.24;
  font-weight: 700;
  letter-spacing: -.02em;
}

.wwy-form-copy {
  max-width: var(--wwy-form-reading-max);
  margin: 0;
  color: #45515e;
  line-height: 1.72;
}

/* Shared component primitives. Module CSS should compose these instead of redefining base geometry. */
.wwy-form-field { margin-bottom: var(--wwy-form-field-gap); }
.wwy-form-label,
.wwy-form-field > label { display: block; margin-bottom: clamp(.4rem, 1.2vw, .55rem); font-size: var(--wwy-ui-font-size-label); font-weight: 700; }
.wwy-form-help,
.wwy-form-meta,
.wwy-form-privacy { color: var(--wwy-form-muted); font-size: var(--wwy-ui-font-size-small); line-height: 1.55; }
.wwy-form-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--wwy-form-grid-gap); }
.wwy-form-actions { display: flex; align-items: center; flex-wrap: wrap; gap: 1rem; }
.wwy-form-message { margin-top: 1rem; border-radius: var(--wwy-form-radius-sm); font-size: var(--wwy-ui-font-size-small); line-height: 1.5; }

.wwy-form-control,
.wwy-form-root input[type="text"],
.wwy-form-root input[type="email"],
.wwy-form-root input[type="url"],
.wwy-form-root input[type="tel"],
.wwy-form-root input[type="search"],
.wwy-form-root input[type="password"],
.wwy-form-root input[type="number"],
.wwy-form-root input[type="date"],
.wwy-form-root input[type="time"],
.wwy-form-root input[type="datetime-local"],
.wwy-form-root input[type="month"],
.wwy-form-root input[type="week"],
.wwy-form-root textarea,
.wwy-form-root select {
  width: 100%;
  max-width: 100%;
  min-height: var(--wwy-form-control-height);
  padding: var(--wwy-form-control-padding-y) var(--wwy-form-control-padding-x);
  border: 1px solid var(--wwy-form-control-border);
  border-radius: var(--wwy-form-radius-sm);
  outline: none;
  background: #fff;
  color: var(--wwy-form-text);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .018);
  font: inherit;
  font-size: 1rem;
  line-height: 1.45;
  transition: border-color .14s ease, box-shadow .14s ease, background-color .14s ease;
}

/* Single-line controls share one exact visual height; textareas keep content-driven height. */
.wwy-form-root input[type="text"],
.wwy-form-root input[type="email"],
.wwy-form-root input[type="url"],
.wwy-form-root input[type="tel"],
.wwy-form-root input[type="search"],
.wwy-form-root input[type="password"],
.wwy-form-root input[type="number"],
.wwy-form-root input[type="date"],
.wwy-form-root input[type="time"],
.wwy-form-root input[type="datetime-local"],
.wwy-form-root input[type="month"],
.wwy-form-root input[type="week"],
.wwy-form-root select {
  height: var(--wwy-form-control-height);
  min-height: var(--wwy-form-control-height);
  padding-top: 0;
  padding-bottom: 0;
}

.wwy-form-root input:hover,
.wwy-form-root textarea:hover,
.wwy-form-root select:hover {
  border-color: color-mix(in srgb, var(--wwy-form-accent) 42%, #9aa9b4);
  background: color-mix(in srgb, var(--wwy-form-accent) 1.5%, #ffffff);
}

.wwy-form-root input:focus,
.wwy-form-root textarea:focus,
.wwy-form-root select:focus,
.wwy-form-root input:focus-visible,
.wwy-form-root textarea:focus-visible,
.wwy-form-root select:focus-visible {
  outline: none;
  border-color: color-mix(in srgb, var(--wwy-form-focus-color) 72%, #46525c);
  box-shadow: var(--wwy-form-focus-ring), 0 1px 2px rgba(16, 24, 40, .025);
}

.wwy-form-button,
.wwy-form-root .wwy-ki-button {
  appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: .55rem;
  min-height: 48px;
  padding: .88rem 1.45rem;
  border: 1px solid transparent;
  border-radius: .68rem;
  outline: none;
  background: var(--wwy-form-accent);
  color: var(--wwy-form-accent-foreground);
  box-shadow: 0 1px 2px rgba(16, 24, 40, .06);
  font: inherit;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
  transition: transform .1s ease, box-shadow .14s ease, background-color .14s ease, border-color .14s ease, opacity .12s ease;
}

.wwy-form-button:focus-visible,
.wwy-form-root .wwy-ki-button:focus-visible {
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--wwy-form-accent) 14%, transparent), 0 2px 6px rgba(16, 24, 40, .08);
}

.wwy-form-button:active:not(:disabled),
.wwy-form-root .wwy-ki-button:active:not(:disabled) {
  transform: translateY(1px) scale(.995);
}

@media (hover: hover) {
  .wwy-form-button:hover:not(:disabled),
  .wwy-form-root .wwy-ki-button:hover:not(:disabled) {
    transform: translateY(-1px);
    background: color-mix(in srgb, var(--wwy-form-accent) 88%, #000000);
    border-color: color-mix(in srgb, var(--wwy-form-accent) 78%, #000000);
    box-shadow: 0 5px 14px rgba(16, 24, 40, .12);
  }
}

.wwy-form-status-badge {
  display: inline-flex;
  align-items: center;
  min-height: 28px;
  padding: .28rem .6rem;
  border: 1px solid var(--wwy-form-border);
  border-radius: 999px;
  background: var(--wwy-form-surface-soft);
  color: var(--wwy-form-text);
  font-size: var(--wwy-ui-font-size-small);
  font-weight: 700;
  line-height: 1.2;
  white-space: nowrap;
}
.wwy-form-status-badge[data-tone="success"] { border-color: #b8d9c7; background: #eef8f2; color: #235c42; }
.wwy-form-status-badge[data-tone="warning"] { border-color: #ead5a9; background: #fff8e8; color: #6d4a0f; }
.wwy-form-status-badge[data-tone="danger"] { border-color: #e5bca7; background: #fff4ee; color: #773210; }
.wwy-form-status-badge[data-tone="info"] { border-color: #bfd1db; background: #f1f7fa; color: #355969; }

.wwy-form-visually-hidden {
  position: absolute !important;
  width: 1px !important;
  height: 1px !important;
  padding: 0 !important;
  margin: -1px !important;
  overflow: hidden !important;
  clip: rect(0,0,0,0) !important;
  white-space: nowrap !important;
  border: 0 !important;
}

@media (max-width: 640px) {
  .wwy-form-card { border-radius: var(--wwy-form-radius-md); }
  .wwy-form-button { width: 100%; }
}

@media (prefers-reduced-motion: reduce) {
  .wwy-form-root input,
  .wwy-form-root textarea,
  .wwy-form-root select,
  .wwy-form-button { transition: none; }
}
/* Hard typography floor: visible WWWyou-owned text never renders below 1rem. */
.wwy-ui-root small,
.wwy-form-root small,
.wwy-ki small,
.wwy-admin small,
.wwyou-start small,
.wwy-admin .button,
.wwy-admin input:not([type="checkbox"]):not([type="radio"]),
.wwy-admin select,
.wwy-admin textarea,
.wwy-admin td,
.wwy-admin th,
.wwy-admin code,
.wwy-admin .description { font-size: 1rem; }

/* Layout switches at the breakpoint; spacing itself remains fluid through clamp()-backed tokens. */
@media (max-width: 640px) {
  .wwy-form-grid { grid-template-columns: 1fr; gap: 0; }
}