/* One field edge across portal pages and the standalone GIS viewer.
 * Layered important declarations deliberately outrank the old unlayered
 * important gold/green rules. Page layout, typography and caret stay local.
 * Exceptions use --portal-field-focus and --portal-field-surface explicitly. */
:root {
  --portal-field-border: #8b929b;
  --portal-field-focus: #4b5563;
  --portal-field-error: #b42318;
}

.portal-field {
  min-width: 0;
  min-height: 46px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--portal-field-surface, var(--surface, #ffffff));
  color: var(--totemia-ink, #14171a);
  font: inherit;
  font-size: 16px;
  font-weight: 700;
}
textarea.portal-field { resize: none; }
.portal-field-frame { border-radius: 10px; }

@layer portal-field-standard {
  /* Primitives own their surface even inside a legacy form. The frame paints
   * behind both the input and its attached action, including autofill. */
  :where(.portal-field, .portal-field-frame, .pw-input) {
    background: var(--portal-field-surface, var(--surface, #ffffff)) !important;
  }
  :where(.portal-field-frame, .pw-input):has(> input:disabled),
  .portal-field:disabled:not(:where(.portal-field-frame > input, .pw-input > input)) {
    --portal-field-surface: var(--surface-2, #f6f7f8);
  }
  :where(.portal-field-frame, .pw-input) > :is(input, textarea, select) {
    background: transparent !important;
  }

  /* Native fields cover old pages automatically. Non-text input controls
   * retain their own interaction system. */
  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    textarea, select, [contenteditable="true"],
    .portal-select-trigger, .portal-datepicker-trigger, .parliament-picker-trigger, .gis-type-trigger,
    .portal-datepicker-range-fields > button,
    .portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected
  ) {
    border: 2px solid var(--portal-field-border) !important;
    border-radius: var(--portal-field-radius, 10px) !important;
    outline: none !important;
    box-shadow: none !important;
    transition: border-color var(--duration-fast, 120ms) var(--ease-out, ease-out) !important;
  }

  /* Keep the range endpoint being edited recognizable after focus moves to
   * a calendar day. Selection uses the same neutral edge as field focus. */
  .portal-datepicker-range-fields > button[aria-pressed="true"] {
    border-color: var(--portal-field-focus) !important;
  }

  :where(
    input:not([type="hidden"]):not([type="checkbox"]):not([type="radio"]):not([type="range"]):not([type="color"]):not([type="file"]):not([type="button"]):not([type="submit"]):not([type="reset"]):not([type="image"]),
    textarea, select, [contenteditable="true"],
    .portal-select-trigger, .portal-datepicker-trigger, .parliament-picker-trigger, .gis-type-trigger,
    .portal-datepicker-range-fields > button
  ):is(:focus, :focus-visible, [aria-expanded="true"]),
  :where(.portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected):focus-within {
    border-color: var(--portal-field-focus) !important;
    box-shadow: 0 0 0 2px color-mix(in srgb, var(--portal-field-focus) 16%, transparent) !important;
  }

  /* Compound fields own one edge. Their native input never draws a second.
     The trailing :is() matches every state; it only lifts specificity above
     the focus-ring rule above, which otherwise drew a ring around the inner
     input on focus (the seam before a unit such as "SL"). */
  :where(.portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected) > :is(input, textarea, select):is(:focus, :not(:focus)),
  .publication-editor-surface .ProseMirror {
    border: 0 !important;
    outline: none !important;
    box-shadow: none !important;
  }

  /* Existing paper editors have their own outer document surface. */
  .publication-editor-surface:has(> .ProseMirror[contenteditable="true"]:focus) {
    outline: 2px solid var(--portal-field-focus) !important;
    outline-offset: 2px !important;
  }

  /* Autofill keeps its values and native semantics, with a consistent fill.
   * An inset shadow covers the browser's protected autofill background. */
  :is(input:autofill, input:-webkit-autofill) {
    -webkit-text-fill-color: var(--totemia-ink, #14171a);
    box-shadow: inset 0 0 0 1000px var(--portal-field-surface, var(--surface, #ffffff)) !important;
  }
  :is(input:autofill, input:-webkit-autofill):focus {
    box-shadow: inset 0 0 0 1000px var(--portal-field-surface, var(--surface, #ffffff)),
      0 0 0 2px color-mix(in srgb, var(--portal-field-focus) 16%, transparent) !important;
  }
  :where(.portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected) > :is(input:autofill, input:-webkit-autofill):focus {
    box-shadow: inset 0 0 0 1000px var(--portal-field-surface, var(--surface, #ffffff)) !important;
  }

  :where(input, textarea, select, [contenteditable="true"], .portal-field-frame,
    .pw-input, .portal-select-trigger, .portal-datepicker-trigger):is([aria-invalid="true"], [data-invalid="true"], :user-invalid:not(:where(form[novalidate] *))),
  :where(.portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected):has(> :is(input, textarea, select):is([aria-invalid="true"], :user-invalid:not(:where(form[novalidate] *)))) {
    border-color: var(--portal-field-error) !important;
  }
  :where(.portal-field-frame, .pw-input, .site-search-field, .dash-search-field,
    .hsv-hex, .dash-mc-search.open, .dash-mc-console-input,
    .gis-region-search-field, .gis-search-field,
    .amount-input-wrap, .salary-input-wrap, .org-amount-input, .org-textarea-input,
    .parcel-search-field, .law-chrome-search, .publication-filter-bar, .dash-combo-search,
    .parliament-breakdown-stepper, .combobox-selected) > :is(input, textarea, select):is([aria-invalid="true"], :user-invalid:not(:where(form[novalidate] *))) {
    border: 0 !important;
  }

  /* Icons attached to a field follow its neutral focus, not the page brand. */
  :where(.portal-search-field, .cal-search, .banking-search-field,
    .interior-account-search-field):focus-within > svg,
  .portal-search-field:focus-within .portal-search-icon,
  .law-chrome-search:focus-within .law-chrome-search-glyph,
  .interior-account-search-field:focus-within .interior-account-search-icon,
  .portal-select-caret {
    color: var(--portal-field-focus) !important;
  }
  .pw-reveal:focus-visible {
    outline: 2px solid var(--portal-field-focus) !important;
  }

  @media (prefers-reduced-motion: reduce) {
    :where(input, textarea, select, [contenteditable="true"], .portal-field-frame,
      .pw-input, .site-search-field, .dash-search-field, .hsv-hex,
      .portal-select-trigger, .portal-datepicker-trigger) { transition: none !important; }
  }
  @media (forced-colors: active) {
    :where(input, textarea, select, [contenteditable="true"], .portal-field-frame, .pw-input,
      .site-search-field, .dash-search-field, .portal-select-trigger, .portal-datepicker-trigger):is(:focus, :focus-within) {
      outline: 2px solid Highlight !important;
      outline-offset: 2px !important;
    }
  }
}