/* Night Glass contrast safety net ------------------------------------------------
   This stylesheet is deliberately loaded after every page stylesheet.  Older
   Trips components predate the Meridian tokens and still use the legacy card,
   ink and form variables.  Mapping those tokens here keeps a light surface
   from inheriting light text whenever Night Glass is selected. */

html[data-theme='nightglass'] {
  color-scheme: dark;

  /* Legacy Trips UI token bridge.  Modernist keeps its original values. */
  --navy-950: #050914;
  --navy-900: #09152b;
  --navy-800: #10203c;
  --cloud: #071426;
  --card: #101d36;
  --surface: #101d36;
  --surface-2: #0c1830;
  --ink: #eef1fb;
  --muted: #c0c9e3;
  --line: rgba(185, 198, 239, .28);
  --border: rgba(185, 198, 239, .28);
  --accent: #8b79ff;
  --account-avatar-bg: #6958e6;
  --accent-strong: #c1b6ff;
  --accent-bright: #a99aff;
  --accent-soft: rgba(139, 121, 255, .20);
  --accent-glow: rgba(139, 121, 255, .42);
  --green: #79d8a2;
  --green-soft: rgba(121, 216, 162, .17);
  --red: #ff918b;
  --red-soft: rgba(255, 145, 139, .16);
  --amber: #ffd080;
  --amber-soft: rgba(255, 208, 128, .16);
  --purple: #aa9cff;
  --purple-soft: rgba(170, 156, 255, .18);
}

/* Native controls are the most common source of unreadable white-on-white
   content: browsers may paint a light popup but preserve the selected
   control's light text colour.  Define both closed controls and menu rows. */
html[data-theme='nightglass'] .meridian-page :is(input:not([type='checkbox']):not([type='radio']):not([type='range']), select, textarea) {
  color: #eef1fb;
  background-color: #101d36;
  border-color: rgba(185, 198, 239, .38);
}
html[data-theme='nightglass'] .meridian-page :is(input, textarea)::placeholder { color: rgba(238, 241, 251, .58); }
html[data-theme='nightglass'] .meridian-page select option {
  color: #111827;
  background-color: #f4f6ff;
}
html[data-theme='nightglass'] .meridian-page select option:checked {
  color: #fff;
  background-color: #6654dc;
}

/* Shared legacy controls with a literal white fill.  These selectors belong
   to the common interface rather than individual pages, so a single rule
   protects every page that uses them. */
html[data-theme='nightglass'] .meridian-page :is(
  .ws-flow__next-tag,
  .ws-progress__dot,
  .toolbar input[type='search'],
  .toolbar select,
  .tab,
  .vote-btn,
  .ui-modal__close,
  .vote-page__search input,
  .vote-page__more,
  .vote-page__menu-popover
) {
  color: var(--ink);
  background-color: var(--card);
  border-color: var(--line);
}

html[data-theme='nightglass'] .meridian-page :is(.ws-main, .workspace-main) {
  color: var(--ink);
  background-color: var(--cloud);
}