/* ==========================================================================
   Nova site chrome — document reset, JS contracts, FlyonUI gaps.
   ========================================================================== */

html {
  color-scheme: light;
  background-color: var(--color-base-200);
}

[data-theme="nova-dark"] {
  color-scheme: dark;
}

body {
  margin: 0;
  min-height: 100vh;
  background: var(--color-base-200);
  color: var(--color-base-content);
  font-family: var(--font-sans);
  font-size: 0.875rem;
  line-height: 1.5;
}

a {
  text-decoration: none;
}

/* buttons rendered as links keep their own --btn-fg, not the link colour */
a:not(.btn, .button) {
  color: var(--color-primary);
}

/* resting border for text-entry fields — validation and focus states still win */
.input,
.select,
.textarea,
.file-input {
  --input-color: var(--color-base-300);
}

/* dark themes invert the base scale (base-300 is darker than base-100), so the
   border has to be mixed up from the content colour instead */
[data-theme$="-dark"] .input,
[data-theme$="-dark"] .select,
[data-theme$="-dark"] .textarea,
[data-theme$="-dark"] .file-input {
  --input-color: color-mix(in oklab, var(--color-base-content) 22%, transparent);
}

/* FlyonUI md controls default to --text-base (16px); keep the site at 14px */
body .input,
body .select,
body .textarea,
body .file-input,
body .label-text,
body .alert,
body .divider,
body .link,
body .menu,
body .dropdown-menu {
  font-size: 0.875rem;
}

/* iOS zooms into focused fields under 16px */
@media (width < 48rem) {
  body .input,
  body .select,
  body .textarea {
    font-size: 1rem;
  }
}

/* dropdown rows share the menu-sm row size */
body .dropdown-item {
  padding-block: 0.5rem;
  padding-inline: 0.75rem;
}

/* HeroUI radius scale follows the Nova tokens: cards = box, fields = field */
body .heroui {
  --radius: 0.25rem;
  --field-radius: 0.5rem;
}

.helper-text {
  font-size: 0.75rem;
}

/* floating label over an input group (password + eye toggle): FlyonUI only
   blanks the placeholder when .input is the field itself, not a wrapper */
.input-floating .input>input::placeholder {
  color: #0000;
}

.input-floating .input>input:focus::placeholder {
  color: color-mix(in oklab, var(--color-base-content) 50%, transparent);
}

/* floating labels track the 14px field text; scaled a little less so the
   raised state lands near 12px instead of 10.5px */
body.auth-body .input-floating-label,
body.auth-body .select-floating-label,
body.auth-body .textarea-floating-label {
  font-size: 0.875rem;
}

body.auth-body .input-floating:focus-within .input-floating-label,
body.auth-body .input-floating:not(:has(input:placeholder-shown)) .input-floating-label,
body.auth-body .input-floating:has(.input:focus) .input-floating-label,
body.auth-body .select-floating:focus-within .select-floating-label,
body.auth-body .select-floating:has(.select:focus) .select-floating-label {
  scale: 0.85;
}

.svg-container {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  justify-content: center;
  line-height: 0;
}

.svg-container svg {
  display: block;
  width: inherit;
  height: inherit;
  max-width: 100%;
  max-height: 100%;
}

.main-icon,
.main-icon * {
  color: var(--color-primary);
  fill: currentColor;
}

.action-icon,
.action-icon * {
  color: var(--color-base-content);
  fill: currentColor;
}

.white-icon,
.white-icon * {
  color: #fff;
  fill: currentColor;
}

/* module icons (inline svg): on dark themes the pale tile becomes a faint tint
   of the icon colour and the dark ink parts take a light shade of it */
[data-theme$="-dark"] .module-icon .mi-bg {
  fill: var(--mi-tint, var(--color-base-content));
  fill-opacity: 0.14;
}

[data-theme$="-dark"] .module-icon .mi-ink {
  stop-color: color-mix(in oklab, var(--mi-tint, var(--color-base-content)) 75%, #fff);
}