/*
 * Seezeit adapter for KERN UX.
 *
 * KERN keeps component markup, semantics and state classes. This adapter owns
 * only the Seezeit visual language inside an explicit .seezeit-theme scope.
 */
.seezeit-theme {
  --kern-typography-font-family-cehora-sz: var(--seezeit-font-family-text);
  --kern-typography-font-family-default: var(--seezeit-font-family-text);

  --kern-color-layout-background-default: var(--seezeit-context-page);
  --kern-color-layout-background-default-contextual: var(--seezeit-context-page);
  --kern-color-layout-layer-surface-contextual: var(--seezeit-context-surface);
  --kern-color-layout-text-default-contextual: var(--seezeit-context-text);
  --kern-color-layout-text-muted-contextual: var(--seezeit-context-text-muted);
  --kern-color-layout-border-contextual: var(--seezeit-context-border);
  --kern-color-form-input-border-contextual: var(--seezeit-context-border-strong);

  --kern-color-action-default: var(--seezeit-color-action-default);
  --kern-color-action-default-contextual: var(--seezeit-color-action-default);
  --kern-color-action-on-default: var(--seezeit-color-action-on-default);
  --kern-color-action-on-default-contextual: var(--seezeit-color-action-on-default);
  --kern-color-action-visited: var(--seezeit-color-orange-ink);
  --kern-color-action-focus-default-contextual: var(--seezeit-context-focus);
  --kern-color-decorative-brand-default: var(--seezeit-color-orange);
  --kern-color-feedback-danger-contextual: var(--seezeit-color-danger);
  --kern-color-feedback-danger-background-contextual: var(--seezeit-color-danger-surface);
  --kern-color-feedback-success-contextual: var(--seezeit-color-success);
  --kern-color-feedback-success-background-contextual: var(--seezeit-color-success-surface);
  --kern-color-feedback-warning-contextual: var(--seezeit-color-warning);
  --kern-color-feedback-warning-background-contextual: var(--seezeit-color-warning-surface);

  --kern-metric-border-radius-small: 2px;
  --kern-metric-border-radius-default: var(--seezeit-radius-control);
  --kern-metric-border-width-light: 1px;
  --kern-metric-border-width-default: 2px;
  --kern-metric-space-small: var(--seezeit-space-2);
  --kern-metric-space-default: var(--seezeit-space-4);
  --kern-metric-space-large: var(--seezeit-space-5);
  --kern-metric-space-x-large: var(--seezeit-space-6);
  --kern-metric-dimension-x-large: var(--seezeit-control-height);

  color: var(--seezeit-context-text);
  font-family: var(--seezeit-font-family-text);
  line-height: var(--seezeit-line-height-body);
}

.kern-page.seezeit-theme {
  color: var(--seezeit-context-text);
  background: var(--seezeit-context-page);
}

.seezeit-theme :is(.kern-body, .kern-title, .kern-label) {
  color: var(--seezeit-context-text);
}

/* Restore section headings suppressed by the legacy PowerMail stylesheet. */
.powermail_form--kern.seezeit-theme .kern-title,
.powermail_form--kern.seezeit-theme .kern-fieldset > legend {
  display: block;
  float: none;
  inline-size: auto;
}

/* Form rhythm: sections > fields > label/hint/control. Do not inherit the
 * legacy PowerMail wrapper margins on top of KERN's flex gaps. */
.powermail_form--kern.seezeit-theme {
  --seezeit-form-section-gap: var(--seezeit-space-6);
  --seezeit-form-field-gap: var(--seezeit-space-4);
  --seezeit-form-heading-gap: var(--seezeit-space-3);
  --seezeit-form-choice-gap: var(--seezeit-space-3);
}

.powermail_form--kern.seezeit-theme:not(.powermail_morestep) {
  gap: var(--seezeit-form-field-gap);
}

.powermail_form--kern.seezeit-theme > :is(.kern-title, .kern-body) {
  margin-block: 0;
}

.powermail_form--kern.seezeit-theme .powermail_fieldwrap,
.powermail_form--kern.seezeit-theme > .powermail_fieldset {
  margin-block: 0;
}

.powermail_form--kern.seezeit-theme:not(.powermail_morestep) > .powermail_fieldset + .powermail_fieldset {
  margin-block-start: calc(var(--seezeit-form-section-gap) - var(--seezeit-form-field-gap));
}

.powermail_form--kern.seezeit-theme > .powermail_fieldset > legend {
  margin: 0;
  padding: 0;
}

.powermail_form--kern.seezeit-theme > .powermail_fieldset > .kern-fieldset__body {
  padding-block-start: var(--seezeit-form-heading-gap);
  gap: var(--seezeit-form-field-gap);
}

.powermail_form--kern.seezeit-theme :is(.powermail_fieldwrap_type_radio, .powermail_fieldwrap_type_check) > legend {
  margin: 0;
  padding: 0;
}

.powermail_form--kern.seezeit-theme :is(.powermail_fieldwrap_type_radio, .powermail_fieldwrap_type_check) > .kern-fieldset__body {
  padding-block-start: var(--seezeit-form-choice-gap);
  gap: var(--seezeit-space-2);
}

.seezeit-theme .kern-hint {
  color: var(--seezeit-context-text-muted);
}

.seezeit-theme .kern-error,
.seezeit-theme .kern-error :is(.kern-body, .kern-icon) {
  color: var(--seezeit-color-danger);
}

.seezeit-theme .kern-link {
  color: var(--seezeit-color-link);
  text-decoration-color: var(--seezeit-color-cyan-ink);
  text-underline-offset: .18em;
}

.seezeit-theme .kern-link:is(:hover, :active) {
  color: var(--seezeit-color-link-hover);
  text-decoration-color: currentColor;
}

.seezeit-theme :is(a, button, input, select, textarea, summary):focus-visible {
  outline: var(--seezeit-focus-width) solid var(--seezeit-context-focus);
  outline-offset: 2px;
}

/* Buttons: one tactile language, with tertiary text actions intentionally flat. */
.seezeit-theme .kern-btn {
  min-width: var(--seezeit-control-height-compact);
  min-height: var(--seezeit-control-height);
  border-radius: var(--seezeit-radius-control);
  font-weight: var(--seezeit-font-weight-title);
  line-height: var(--seezeit-line-height-control);
  transition:
    color var(--seezeit-motion-default) ease-out,
    background-color var(--seezeit-motion-default) ease-out,
    border-color var(--seezeit-motion-default) ease-out,
    box-shadow 120ms ease-out,
    transform var(--seezeit-motion-fast) ease-out;
}

.seezeit-theme .kern-btn > :is(.kern-label, .kern-icon) {
  color: inherit;
}

/* The legacy submit arrow is an absolutely positioned pseudo-element, not
 * part of the KERN button. Never let it overlay the action label. */
.powermail_form--kern .powermail_submit::before,
.powermail_form--kern .powermail_submit::after {
  content: none;
  display: none;
}

.powermail_form--kern .powermail_submit {
  display: inline-flex;
  align-items: center;
  gap: var(--seezeit-space-3, 12px);
}

/* One action row, matching visual and DOM order: Back, then Next/Submit.
 * Scope to the form, never the full page width. Narrow rows may wrap in that
 * same order; the editor-owned submit field and its status remain intact. */
.powermail_form--kern .powermail_tab_navigation {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: var(--seezeit-space-4, 16px);
  inline-size: 100%;
  max-inline-size: 32rem;
}

.powermail_form--kern .powermail_tab_navigation > .pull-right,
.powermail_form--kern .powermail_tab_navigation > .powermail_fieldwrap_type_submit {
  margin-inline-start: auto;
}

.powermail_form--kern .powermail_fieldwrap_type_submit > .kern-btn-wrapper {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: var(--seezeit-space-2, 8px);
  max-inline-size: 32rem;
}

.powermail_form--kern .powermail_tab_navigation > .powermail_fieldwrap_type_submit {
  flex: 0 1 auto;
  min-inline-size: 0;
  max-inline-size: 100%;
}

.powermail_form--kern .powermail_submit {
  max-inline-size: 100%;
}

.powermail_form--kern [data-kern-submit-status] {
  flex-basis: 100%;
  text-align: end;
}

.powermail_form--kern .powermail-submit-loader:not([hidden]) {
  display: inline-flex;
  align-items: center;
  padding-inline-start: var(--seezeit-space-3, 12px);
  border-inline-start: 1px solid currentColor;
  flex-shrink: 0;
}

.powermail_form--kern .powermail-submit-loader[hidden] {
  display: none;
}

/* Busy is temporarily unavailable, not illegible: keep action and spinner
 * readable instead of inheriting KERN's faded disabled-label treatment. */
.powermail_form--kern.seezeit-theme[data-kern-submitting="true"] .powermail_submit:disabled {
  opacity: 1;
  color: var(--seezeit-context-text);
  background: var(--seezeit-color-action-secondary-hover);
  border-color: var(--seezeit-context-border-strong);
  cursor: wait;
}

.powermail_form--kern.seezeit-theme[data-kern-submitting="true"] .powermail_submit:disabled :is(.kern-label, .kern-icon) {
  color: inherit;
  opacity: 1;
}

.powermail_form--kern .kern-form-check--error {
  padding-inline-start: var(--seezeit-space-4, 16px);
}

.powermail_form--kern.seezeit-theme .seezeit-upload-remove,
.powermail_form--kern.seezeit-theme .seezeit-upload-remove:hover,
.powermail_form--kern.seezeit-theme .seezeit-upload-remove :is(.kern-icon, .kern-label) {
  text-decoration: none;
}

.powermail_form--kern.seezeit-theme .seezeit-upload-remove:hover {
  background: var(--seezeit-color-action-secondary-hover);
}

.seezeit-theme .kern-btn--primary {
  border: 1px solid var(--seezeit-color-orange-ink);
  color: var(--seezeit-color-action-on-fill);
  background: var(--seezeit-color-action-commit);
  box-shadow: var(--seezeit-shadow-action-raised);
}

.seezeit-theme .kern-btn--primary:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--seezeit-color-orange-ink);
  color: var(--seezeit-color-action-on-fill);
  background: var(--seezeit-color-action-commit-hover);
}

/* A step within an already-started flow is progress (yellow), not completion
 * (orange). The extra class carries meaning; KERN's primary structure stays. */
.seezeit-theme .kern-btn--primary.seezeit-action-progress {
  border-color: var(--seezeit-color-action-progress);
  color: var(--seezeit-color-action-on-fill);
  background: var(--seezeit-color-action-progress);
}

.seezeit-theme .kern-btn--primary.seezeit-action-progress:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--seezeit-color-action-progress-hover);
  color: var(--seezeit-color-action-on-fill);
  background: var(--seezeit-color-action-progress-hover);
}

.seezeit-theme .kern-btn--secondary {
  border: 1px solid var(--seezeit-context-border-strong);
  color: var(--seezeit-color-action-secondary);
  background: var(--seezeit-context-surface);
  box-shadow: var(--seezeit-shadow-action-edge);
}

.seezeit-theme .kern-btn--secondary:not(:disabled):not([aria-disabled="true"]):hover {
  border-color: var(--seezeit-color-navy);
  color: var(--seezeit-color-action-secondary);
  background: var(--seezeit-color-action-secondary-hover);
}

.seezeit-theme .kern-btn--tertiary {
  border: 0;
  color: var(--seezeit-color-link);
  background: transparent;
  box-shadow: none;
  text-decoration: underline;
  text-decoration-color: var(--seezeit-color-cyan-ink);
  text-underline-offset: .18em;
}

.seezeit-theme .kern-btn--tertiary:not(:disabled):not([aria-disabled="true"]):hover {
  color: var(--seezeit-color-link-hover);
  background: transparent;
  text-decoration-color: currentColor;
}

.seezeit-theme :is(.kern-btn--primary, .kern-btn--secondary):not(:disabled):not([aria-disabled="true"]):active {
  box-shadow: none;
  transform: translateY(2px);
}

.seezeit-theme :is(.kern-btn--primary, .kern-btn--secondary, .kern-btn--tertiary):is(:disabled, [aria-disabled="true"]) {
  box-shadow: none;
  transform: none;
}

/* Form controls retain native semantics and KERN error classes. */
.seezeit-theme :is(.kern-form-input__input, .kern-form-input__select) {
  min-height: var(--seezeit-control-height);
  border: 1px solid var(--seezeit-context-border-strong);
  border-radius: var(--seezeit-radius-control);
  color: var(--seezeit-context-text);
  background: var(--seezeit-context-surface);
  font: inherit;
}

.seezeit-theme textarea.kern-form-input__input {
  min-height: 8rem;
  resize: vertical;
}

.seezeit-theme :is(.kern-form-input__input, .kern-form-input__select):hover {
  border-color: var(--seezeit-color-navy);
}

.seezeit-theme :is(.kern-form-input__input, .kern-form-input__select):focus-visible {
  border-color: var(--seezeit-context-focus);
  outline-offset: 2px;
}

.seezeit-theme :is(.kern-form-input__input--error, .kern-form-input__select--error),
.seezeit-theme .kern-form-input--error :is(.kern-form-input__input, .kern-form-input__select) {
  border-color: var(--seezeit-color-danger);
}

.seezeit-theme :is(.kern-form-check__checkbox, .kern-form-check__radio) {
  width: var(--seezeit-check-size);
  height: var(--seezeit-check-size);
  border-color: var(--seezeit-context-border-strong);
  background: var(--seezeit-context-surface);
}

.seezeit-theme :is(.kern-form-check__checkbox, .kern-form-check__radio):hover {
  border-color: var(--seezeit-color-navy);
}

.seezeit-theme :is(.kern-form-check__checkbox, .kern-form-check__radio):checked {
  border-color: var(--seezeit-color-orange);
  background-color: var(--seezeit-color-orange);
}

.seezeit-theme .kern-form-check__checkbox:checked::before {
  display: block;
  position: relative;
  top: 2px;
  left: 6px;
  width: 5px;
  height: 9px;
  margin: 0;
  border-width: 0 2px 2px 0;
  border-color: var(--seezeit-color-navy);
  transform: rotate(45deg);
}

.seezeit-theme .kern-form-check__radio:checked::before {
  background: var(--seezeit-color-navy);
}

.seezeit-theme :is(.kern-form-check__checkbox--error, .kern-form-check__radio--error) {
  border-color: var(--seezeit-color-danger);
}

/* Standalone disclosure card. Embedded accordions remain flat KERN content. */
.seezeit-theme .kern-accordion.seezeit-accordion--card {
  overflow: clip;
  border: 1px solid var(--seezeit-context-border);
  border-radius: var(--seezeit-radius-control);
  background: var(--seezeit-context-surface);
  box-shadow: var(--seezeit-shadow-disclosure-card);
}

.seezeit-theme .kern-accordion.seezeit-accordion--card > .kern-accordion__header {
  min-height: 56px;
  color: var(--seezeit-context-text);
  background: transparent;
}

.seezeit-theme .kern-accordion.seezeit-accordion--card > .kern-accordion__header:hover {
  color: var(--seezeit-color-link-hover);
  background: transparent;
}

.seezeit-theme .kern-accordion.seezeit-accordion--card > .kern-accordion__header > .kern-title {
  color: inherit;
  font-weight: var(--seezeit-font-weight-medium);
}

.seezeit-theme .kern-accordion.seezeit-accordion--card > .kern-accordion__body {
  border-top: 1px solid var(--seezeit-context-border);
}

.seezeit-theme .kern-progress {
  --kern-color-feedback-default-contextual: var(--seezeit-color-progress-fill);
  --kern-color-feedback-default-background-contextual: var(--seezeit-color-progress-track);
}

.seezeit-theme .powermail-kern-step-link {
  color: var(--seezeit-context-text);
}

.seezeit-theme .powermail-kern-step-link[aria-current="step"] .powermail-kern-step-number {
  background: var(--seezeit-color-orange);
  border-color: var(--seezeit-context-text);
  color: var(--seezeit-context-text);
}

.seezeit-theme .powermail-kern-step-status {
  color: var(--seezeit-context-text-muted);
}

@media (prefers-reduced-motion: reduce) {
  .seezeit-theme .kern-btn {
    transition: none;
  }

  .seezeit-theme :is(.kern-btn--primary, .kern-btn--secondary):not(:disabled):not([aria-disabled="true"]):active {
    transform: none;
  }
}