/* ---------------------------------------------------------------------------
   Form controls, everywhere.

   One file, linked from every layout, because fixing this per-surface is how it
   kept coming back: each page was corrected when it was reported and the next
   one still shipped raw operating-system widgets.

   The load-bearing property is color-scheme. A dropdown's OPEN list, a date
   picker's calendar, and a number field's spinners are drawn by the operating
   system, not by CSS. Styling the closed control does nothing for them - the
   only way to influence them is to say which palette the OS should paint in.
   That is why a dark page kept opening a white menu no matter how well the
   select itself was styled.

   Scoped to nothing on purpose. Every surface of the product is dark by
   default, and a control that escapes this file is the bug we are fixing.
   --------------------------------------------------------------------------- */

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

select,
textarea,
input[type="text"],
input[type="email"],
input[type="url"],
input[type="tel"],
input[type="search"],
input[type="password"],
input[type="number"],
input[type="date"],
input[type="datetime-local"],
input[type="month"],
input[type="time"],
input:not([type]) {
  font: inherit;
  color-scheme: inherit;
}

/* The native arrow is replaced rather than left sitting beside ours. */
select {
  -webkit-appearance: none;
  appearance: none;
  padding-right: 42px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%238aa0bd' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 15px center;
  cursor: pointer;
}
select::-ms-expand { display: none; }

/* Chromium honours these on the native list; nothing else does. */
select option,
select optgroup {
  background: #0f1e30;
  color: #e8eef7;
}

html[data-theme="light"] select option,
html[data-theme="light"] select optgroup {
  background: #ffffff;
  color: #0f1e30;
}

html[data-theme="light"] select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='14' height='14' viewBox='0 0 24 24' fill='none' stroke='%2355677e' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");
}

/* Checkbox and radio: the brand accent instead of the system blue. */
input[type="checkbox"],
input[type="radio"] {
  accent-color: #5fe0cc;
}

html[data-theme="light"] input[type="checkbox"],
html[data-theme="light"] input[type="radio"] {
  accent-color: #0f9c88;
}

/* The calendar and clock buttons are OS-drawn glyphs; this is all CSS can
   reach, and without it they are near-invisible on a dark field. */
input[type="date"]::-webkit-calendar-picker-indicator,
input[type="datetime-local"]::-webkit-calendar-picker-indicator,
input[type="time"]::-webkit-calendar-picker-indicator,
input[type="month"]::-webkit-calendar-picker-indicator {
  filter: invert(0.7) sepia(0.2) saturate(3) hue-rotate(130deg);
  cursor: pointer;
}

html[data-theme="light"] input[type="date"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="datetime-local"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="time"]::-webkit-calendar-picker-indicator,
html[data-theme="light"] input[type="month"]::-webkit-calendar-picker-indicator {
  filter: none;
}

/* A file input renders as a grey system button with the filename beside it.
   Hiding the control and letting a label act as the button is the only way to
   style it, so pages that do that get a usable button here for free. */
input[type="file"]::-webkit-file-upload-button,
input[type="file"]::file-selector-button {
  font: inherit;
  margin-right: 12px;
  padding: 9px 14px;
  border: 1px solid rgba(198, 213, 235, 0.26);
  border-radius: 10px;
  background: rgba(95, 224, 204, 0.1);
  color: inherit;
  cursor: pointer;
}

input[type="file"]::-webkit-file-upload-button:hover,
input[type="file"]::file-selector-button:hover {
  background: rgba(95, 224, 204, 0.18);
}

/* Scrollbars inside dark panels, which otherwise arrive light grey. */
textarea,
select[multiple],
select[size] {
  scrollbar-color: rgba(198, 213, 235, 0.35) transparent;
  scrollbar-width: thin;
}

/* iOS zooms the whole page when a focused control is under 16px. */
@media (max-width: 760px) {
  select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="url"],
  input[type="tel"],
  input[type="search"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input:not([type]) {
    font-size: max(16px, 1em);
  }
}

/* ---------------------------------------------------------------------------
   Combobox - a text field with suggestions we draw ourselves.

   The replacement for <datalist>, whose popup is drawn by the operating system
   and cannot be reached by CSS at all. On Windows that meant a grey Win32 list
   arriving over a dark page, in the wrong font, at the wrong size, in the wrong
   colours. Nothing short of drawing the list ourselves fixes it.

   Paired with assets/js/combobox.js. Both themes, keyboard included.
   --------------------------------------------------------------------------- */
.hn-combobox {
  position: relative;
  display: block;
}

.hn-combobox__list {
  position: absolute;
  z-index: 60;
  top: calc(100% + 6px);
  left: 0;
  right: 0;
  max-height: 264px;
  overflow-y: auto;
  margin: 0;
  padding: 6px;
  list-style: none;
  border: 1px solid rgba(120, 152, 190, 0.24);
  border-radius: 12px;
  background: #0f1e30;
  box-shadow: 0 22px 48px rgba(2, 8, 18, 0.55);
  color: #e8eef7;
  scrollbar-color: rgba(198, 213, 235, 0.35) transparent;
  scrollbar-width: thin;
}

.hn-combobox__option {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 9px 12px;
  border-radius: 8px;
  cursor: pointer;
  line-height: 1.35;
}

/* Hover and keyboard share one appearance. Two different highlights for the
   same idea is how a list starts feeling like two lists. */
.hn-combobox__option:hover,
.hn-combobox__option.is-active {
  background: rgba(95, 224, 204, 0.14);
}

.hn-combobox__value { font-weight: 600; }

.hn-combobox__hint {
  flex: 0 0 auto;
  font-size: 12px;
  opacity: 0.72;
  font-weight: 500;
}

.hn-combobox__empty {
  padding: 10px 12px;
  opacity: 0.7;
  font-size: 13px;
}

html[data-theme="light"] .hn-combobox__list {
  border-color: rgba(15, 30, 48, 0.12);
  background: #ffffff;
  color: #12233a;
  box-shadow: 0 20px 44px rgba(15, 30, 48, 0.14);
}

html[data-theme="light"] .hn-combobox__option:hover,
html[data-theme="light"] .hn-combobox__option.is-active {
  background: rgba(15, 156, 136, 0.12);
}

/* ---------------------------------------------------------------------------
   Confirmation for destructive actions, in the page rather than the browser.

   Native confirm() cannot be styled, cannot be reached by an automated
   browser, and looks like the operating system rather than the product. See
   assets/js/confirm.js.
   --------------------------------------------------------------------------- */
.hn-confirm-overlay {
  position: fixed;
  inset: 0;
  z-index: 9999;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 20px;
  background: rgba(4, 10, 20, 0.62);
}

.hn-confirm {
  width: 100%;
  max-width: 400px;
  padding: 22px;
  border: 1px solid rgba(147, 162, 186, 0.26);
  border-radius: 14px;
  background: #0f1e30;
  color: #e8eef7;
  box-shadow: 0 24px 60px rgba(0, 0, 0, 0.45);
}

html[data-theme="light"] .hn-confirm {
  background: #ffffff;
  color: #0f1e30;
  border-color: #d9e2ee;
}

.hn-confirm__message {
  margin: 0 0 18px;
  font-size: 14.5px;
  line-height: 1.55;
  /* Some confirmations are several short paragraphs - what is removed, what is
     kept, and that it cannot be undone. The text is set with textContent, so
     without this the blank lines collapse and the whole thing arrives as one
     run-on sentence. */
  white-space: pre-line;
}

.hn-confirm__actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

.hn-confirm__btn {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font: 600 13px/1 inherit;
  cursor: pointer;
}

.hn-confirm__btn--ghost {
  border-color: rgba(147, 162, 186, 0.34);
  background: transparent;
  color: inherit;
}

.hn-confirm__btn--danger {
  background: #c0392b;
  color: #ffffff;
}

/* For a confirmation that does not destroy anything - duplicate, publish. */
.hn-confirm__btn--go {
  background: var(--hn-cyan, #00AEB5);
  color: #04202a;
}

.hn-confirm__btn:focus-visible {
  outline: 2px solid #5fe0cc;
  outline-offset: 2px;
}

/* ---------------------------------------------------------------------------
   Toggle switch.

   A boolean that changes what the rest of a screen offers is a switch, not a
   checkbox. A checkbox reads as "tick this to include it in a list"; a switch
   reads as "this is on". The wizard's voice decision hides a language picker
   when it is off, so it is the second kind.

   Built on a real <input type="checkbox">, so it is keyboard operable, it
   announces itself, and it posts like any other field. The input is hidden
   visually, never with display:none - that would take it out of the tab order.

   Brand: teal when on, because that is the product's affirmative colour; the
   neutral line colour when off. Both themes come from tokens.
   --------------------------------------------------------------------------- */
.hn-switch {
  display: flex;
  align-items: flex-start;
  gap: 14px;
  padding: 14px 16px;
  border: 1px solid var(--hn-line, #243852);
  border-radius: 12px;
  background: var(--hn-surface-2, #11233a);
  cursor: pointer;
  transition: border-color 0.16s ease, background 0.16s ease;
}

.hn-switch:hover { border-color: var(--hn-cyan, #72dfcd); }

.hn-switch__input {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

.hn-switch__track {
  position: relative;
  flex: 0 0 auto;
  width: 42px;
  height: 24px;
  margin-top: 1px;
  border-radius: 999px;
  background: var(--hn-line, #243852);
  transition: background 0.18s ease;
}

.hn-switch__track::after {
  content: "";
  position: absolute;
  top: 3px;
  left: 3px;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.35);
  transition: transform 0.18s ease;
}

.hn-switch__input:checked + .hn-switch__track {
  background: var(--hn-cyan, #72dfcd);
}

.hn-switch__input:checked + .hn-switch__track::after {
  transform: translateX(18px);
}

.hn-switch__input:focus-visible + .hn-switch__track {
  outline: 2px solid var(--hn-cyan, #72dfcd);
  outline-offset: 3px;
}

.hn-switch__input:disabled + .hn-switch__track {
  opacity: 0.45;
  cursor: not-allowed;
}

.hn-switch__copy { min-width: 0; }

.hn-switch__copy strong {
  display: block;
  font-size: 14px;
  font-weight: 700;
  color: var(--hn-text, #f4f8ff);
}

.hn-switch__copy small {
  display: block;
  margin-top: 4px;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--hn-text-soft, #c7d2e3);
}

@media (prefers-reduced-motion: reduce) {
  .hn-switch,
  .hn-switch__track,
  .hn-switch__track::after { transition: none; }
}

/* ---------------------------------------------------------------------------
   .hn-tip - an explanation kept out of the way until somebody wants it.

   Hover alone is not enough: it never fires on a touch screen and never fires
   for a keyboard. This opens on hover, on focus and on click, so the same
   button works with a mouse, a finger and a Tab key.
   --------------------------------------------------------------------------- */
.hn-tip { position: relative; display: inline-flex; vertical-align: middle; }

.hn-tip__btn {
  width: 20px; height: 20px; padding: 0; cursor: help;
  display: inline-grid; place-items: center;
  font-size: 11px; font-family: inherit;
  color: var(--hn-muted, #8fa0b6);
  background: transparent;
  border: 1px solid currentColor; border-radius: 50%;
}
.hn-tip__btn:hover { color: var(--hn-cyan, #00AEB5); }
.hn-tip__btn:focus-visible { outline: 2px solid var(--hn-cyan, #00AEB5); outline-offset: 2px; }

.hn-tip__body {
  position: absolute; z-index: 60; bottom: calc(100% + 9px); left: 50%;
  width: max-content; max-width: min(46ch, 78vw);
  padding: 12px 14px; transform: translateX(-50%);
  font-size: 12.5px; line-height: 1.65; font-weight: 400; text-align: left;
  color: var(--hn-text-soft, #4a5a6a);
  background: var(--hn-surface, #fff);
  border: 1px solid var(--hn-line, #e2eded); border-radius: 11px;
  box-shadow: 0 14px 38px rgba(0, 0, 0, .22);
  opacity: 0; visibility: hidden;
  transition: opacity .12s ease, visibility .12s ease;
}
.hn-tip__body::after {
  content: ""; position: absolute; top: 100%; left: 50%; margin-left: -6px;
  border: 6px solid transparent; border-top-color: var(--hn-line, #e2eded);
}
.hn-tip:hover .hn-tip__body,
.hn-tip:focus-within .hn-tip__body,
.hn-tip__btn[aria-expanded="true"] + .hn-tip__body { opacity: 1; visibility: visible; }

.hn-tip__body strong { color: var(--hn-text, #223); }
.hn-tip__body em { font-style: normal; font-weight: 650; color: var(--hn-cyan, #00AEB5); }

/* Near the right-hand edge it would otherwise run off the screen. */
.hn-tip--end .hn-tip__body { left: auto; right: -8px; transform: none; }
.hn-tip--end .hn-tip__body::after { left: auto; right: 14px; margin-left: 0; }

@media (prefers-reduced-motion: reduce) {
  .hn-tip__body { transition: none; }
}

/* ---------------------------------------------------------------------------
   Field errors (RN-29)
   ---------------------------------------------------------------------------
   Rendered by assets/js/form-validate.js next to the field it belongs to. The
   colour is stated rather than inherited: this file is loaded by every shell,
   and each defines its own tokens. */
.hn-field-error {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.45;
  color: #ff8fa3;
}
.hn-field-error[hidden] { display: none; }

input.is-invalid,
select.is-invalid,
textarea.is-invalid {
  border-color: #ff8fa3 !important;
  box-shadow: 0 0 0 3px rgba(255, 143, 163, 0.14) !important;
}