/* Neumorphism showcase material: one surface, soft opposing shadows.
   Reference: https://www.stylekit.top/styles/neumorphism/showcase
   This final layer replaces the earlier metallic and inverted button states. */
@layer controls {
  :root {
    --surface: #e0e5ec;
    --glass-solid: var(--surface);
    --glass: var(--surface);
    --ink: #374151;
    --muted: #526071;
    --accent: #5847d6;
    --shadow: #b8bcc2;
    --light: #fff;
    --line: #c4ccd7;
    --glass-edge: transparent;
    --radius: 16px;
    --raised: 8px 8px 16px var(--shadow), -8px -8px 16px var(--light);
    --inset: inset 4px 4px 8px var(--shadow), inset -4px -4px 8px var(--light);
    --control: var(--surface);
    --control-pressed: var(--surface);
    --control-selected: var(--surface);
    --control-shadow: 6px 6px 12px var(--shadow), -6px -6px 12px var(--light);
    --control-hover: 3px 3px 6px var(--shadow), -3px -3px 6px var(--light);
    --control-inset: var(--inset);
    --well-focus:
      inset 6px 6px 12px var(--shadow), inset -6px -6px 12px var(--light);
    --scroll-track: #e0e5ec;
    --scroll-thumb: #8793a4;
    --scroll-hover: #5e6b7e;
  }
  :root[data-theme="dark"] {
    --surface: #292e38;
    --glass-solid: var(--surface);
    --glass: var(--surface);
    --ink: #e7ecf4;
    --muted: #b8c3d3;
    --accent: #c1b9ff;
    --shadow: #1a1d24;
    --light: #3b4352;
    --line: #475163;
    --glass-edge: transparent;
    --raised: 8px 8px 16px var(--shadow), -8px -8px 16px var(--light);
    --inset: inset 4px 4px 8px var(--shadow), inset -4px -4px 8px var(--light);
    --control: var(--surface);
    --control-pressed: var(--surface);
    --control-selected: var(--surface);
    --control-shadow: 6px 6px 12px var(--shadow), -6px -6px 12px var(--light);
    --control-hover: 3px 3px 6px var(--shadow), -3px -3px 6px var(--light);
    --control-inset: var(--inset);
    --scroll-track: #292e38;
    --scroll-thumb: #8592a7;
    --scroll-hover: #b4bfd1;
  }
  /* Color-only variants: geometry, depth and interaction remain unchanged. */
  :root[data-season="spring"] {
    --surface: #e2eae3;
    --ink: #30463a;
    --muted: #4a6253;
    --accent: #226345;
    --shadow: #b9c4bb;
    --light: #ffffff;
    --line: #b9cbbd;
    --scroll-thumb: #758d7b;
    --scroll-hover: #4f6c58;
  }
  :root[data-season="summer"] {
    --surface: #dfeaed;
    --ink: #294752;
    --muted: #46616b;
    --accent: #12647d;
    --shadow: #b5c4c9;
    --light: #ffffff;
    --line: #b7cdd4;
    --scroll-thumb: #72929e;
    --scroll-hover: #476f7e;
  }
  :root[data-season="autumn"] {
    --surface: #eee6db;
    --ink: #51422f;
    --muted: #6c5a43;
    --accent: #875016;
    --shadow: #c9beb0;
    --light: #ffffff;
    --line: #d0bfa9;
    --scroll-thumb: #9e876c;
    --scroll-hover: #786048;
  }
  :root[data-season="winter"] {
    --surface: #e3e7f0;
    --ink: #39445c;
    --muted: #535e77;
    --accent: #4a55a1;
    --shadow: #bac0cf;
    --light: #ffffff;
    --line: #c2c9dd;
    --scroll-thumb: #818baa;
    --scroll-hover: #586687;
  }
  :root[data-season="spring"][data-theme="dark"] {
    --surface: #29372f;
    --ink: #e0eee5;
    --muted: #b7cdbc;
    --accent: #a1dfb7;
    --shadow: #1b251f;
    --light: #3c4d41;
    --line: #49624f;
    --scroll-thumb: #789783;
    --scroll-hover: #accab5;
  }
  :root[data-season="summer"][data-theme="dark"] {
    --surface: #26363e;
    --ink: #dfedf3;
    --muted: #b1ccd5;
    --accent: #96d9ed;
    --shadow: #19242a;
    --light: #3a4d58;
    --line: #426575;
    --scroll-thumb: #759daa;
    --scroll-hover: #a8ccd8;
  }
  :root[data-season="autumn"][data-theme="dark"] {
    --surface: #383128;
    --ink: #f1e8da;
    --muted: #d0bfaa;
    --accent: #edc38c;
    --shadow: #262019;
    --light: #50463a;
    --line: #6b5742;
    --scroll-thumb: #a38e72;
    --scroll-hover: #d1b99b;
  }
  :root[data-season="winter"][data-theme="dark"] {
    --surface: #2b3040;
    --ink: #e6eafa;
    --muted: #bdc5df;
    --accent: #bdc9ff;
    --shadow: #1c202c;
    --light: #3e465d;
    --line: #515e83;
    --scroll-thumb: #8996bc;
    --scroll-hover: #b6c1e0;
  }
  :root[data-season] {
    --scroll-track: var(--surface);
  }
  .season-select {
    display: inline-flex;
    align-items: center;
  }
  .season-select select {
    width: auto;
    min-width: 116px;
    min-height: 44px;
    padding: 8px 30px 8px 12px;
    font-size: 12px;
  }
  .context-strip {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 16px;
    justify-content: space-between;
  }
  .season-select {
    margin-left: auto;
  }
  body {
    background: var(--surface);
  }
  .neu {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--raised);
  }
  .inset,
  .reader {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--inset);
  }
  :is(.app-header, .work-panel, .knowledge-banner, .search-bar) {
    -webkit-backdrop-filter: none;
    backdrop-filter: none;
  }
  .app-header {
    background: var(--surface);
    border-color: transparent;
    box-shadow: 0 4px 16px var(--shadow);
  }
  :is(
    .tool-card,
    .task-card,
    .reference-card,
    .work-panel,
    .discovery,
    .catalog-search
  ) {
    border-radius: 16px;
  }
  .tool-card:hover {
    box-shadow: var(--raised);
    border-color: transparent;
  }
  :is(.tool-symbol, .task-symbol, .brand-mark) {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--inset);
  }

  /* Buttons float at rest, approach the surface on hover, and press inward. */
  :is(
    button,
    .button,
    a.chip,
    .desktop-nav a,
    .primary-nav a,
    .research-nav a,
    .reader-controls a,
    .recent-tools a
  ) {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: var(--control-shadow);
    text-shadow: none;
    transform: none;
    transition:
      box-shadow 150ms ease,
      color 150ms ease;
  }
  :is(.button.primary, .search-submit) {
    color: var(--accent);
  }
  .research-nav a {
    min-height: 44px;
    display: inline-flex;
    align-items: center;
  }
  @media (hover: hover) and (pointer: fine) {
    :is(
      button,
      .button,
      a.chip,
      .desktop-nav a,
      .primary-nav a,
      .research-nav a,
      .reader-controls a,
      .recent-tools a
    ):where(:hover:not(:disabled)) {
      box-shadow: var(--control-hover);
    }
  }
  :is(
    button,
    .button,
    a.chip,
    .desktop-nav a,
    .primary-nav a,
    .research-nav a,
    .reader-controls a,
    .recent-tools a
  ):is(
    :active,
    [aria-pressed="true"],
    [aria-selected="true"],
    [aria-expanded="true"],
    [aria-current="page"],
    [aria-current="location"]
  ) {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--control-inset);
    color: var(--accent);
    transform: none;
  }
  [data-save][aria-pressed="true"] svg {
    fill: currentColor;
    fill-opacity: 0.18;
  }
  :is(button, .button):is(:disabled, [aria-disabled="true"]) {
    box-shadow: var(--control-inset);
    background: var(--surface);
    color: var(--muted);
    border-color: transparent;
    opacity: 0.6;
    cursor: not-allowed;
  }
  label.button:has(+ input:focus-visible) {
    outline: 3px solid var(--accent);
    outline-offset: 5px;
  }

  /* Wells and native form semantics remain distinct from raised actions. */
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="file"]
      ),
    textarea,
    select
  ) {
    background-color: var(--surface);
    color: var(--ink);
    border-color: transparent;
    border-radius: 12px;
    box-shadow: var(--inset);
  }
  :where(
    input:not([type="checkbox"]):not([type="radio"]):not([type="range"]):not(
        [type="file"]
      ),
    textarea,
    select
  ):focus {
    box-shadow: var(--well-focus);
  }
  .search-bar input {
    background: transparent;
    box-shadow: none;
    border-radius: 0;
  }
  input[aria-invalid="true"] {
    border-color: #a23d46;
  }
  select:open {
    box-shadow: var(--well-focus);
  }
  select option,
  select optgroup {
    background: var(--surface);
    color: var(--ink);
    box-shadow: none;
  }
  select option:checked {
    background: var(--surface);
    color: var(--accent);
    box-shadow: var(--inset);
  }
  select option:is(:hover, :focus) {
    background: var(--surface);
    color: var(--accent);
    outline-color: var(--accent);
  }
  @supports (appearance: base-select) {
    select::picker(select) {
      background: var(--surface);
      color: var(--ink);
      border-color: transparent;
      box-shadow: var(--raised);
    }
    select::picker-icon {
      background: var(--surface);
      color: var(--ink);
      border-color: transparent;
      box-shadow: var(--control-hover);
    }
    select:open::picker-icon {
      box-shadow: var(--inset);
    }
    select option::checkmark {
      color: currentColor;
    }
  }
  input::file-selector-button {
    background: var(--surface);
    color: var(--ink);
    border: 1px solid transparent;
    border-radius: 12px;
    box-shadow: var(--control-shadow);
    min-height: 44px;
    padding: 10px 16px;
    margin-inline-end: 12px;
    cursor: pointer;
  }
  input::file-selector-button:active {
    box-shadow: var(--inset);
  }
  .switch-track {
    background: var(--surface);
    border-color: transparent;
    box-shadow: var(--inset);
  }
  .switch-track:after {
    background: var(--surface);
    box-shadow:
      2px 2px 4px var(--shadow),
      -2px -2px 4px var(--light);
  }
  .local-switch input:checked + .switch-track:after {
    background: var(--accent);
  }
  ::-webkit-scrollbar-track {
    background: var(--surface);
    box-shadow: var(--inset);
  }
  ::-webkit-scrollbar-thumb {
    background: var(--scroll-thumb);
    box-shadow: none;
  }
  ::-webkit-scrollbar-thumb:hover {
    background: var(--scroll-hover);
  }

  /* Retain the notice's amber signal using the same soft material. */
  .medical-notice {
    --surface: #f4e5b9;
    --shadow: #cebf95;
    --light: #fff7dc;
    --ink: #594414;
    --accent: #594414;
    background: var(--surface);
    color: var(--ink);
    border-color: transparent;
    border-left-color: #9b731f;
    box-shadow:
      4px 4px 8px var(--shadow),
      -4px -4px 8px var(--light);
  }
  [data-theme="dark"] .medical-notice {
    --surface: #3c3526;
    --shadow: #292317;
    --light: #514934;
    --ink: #f4dc9d;
    --accent: #f4dc9d;
    background: var(--surface);
    color: var(--ink);
    border-color: transparent;
    border-left-color: #b3924d;
    box-shadow:
      4px 4px 8px var(--shadow),
      -4px -4px 8px var(--light);
  }
  .medical-notice p {
    color: var(--ink);
  }
  .medical-notice button {
    --control-shadow: 3px 3px 6px var(--shadow), -3px -3px 6px var(--light);
    --control-hover: 2px 2px 4px var(--shadow), -2px -2px 4px var(--light);
    --control-inset:
      inset 3px 3px 6px var(--shadow), inset -3px -3px 6px var(--light);
  }
  @media (prefers-reduced-motion: reduce) {
    :is(
      button,
      .button,
      a.chip,
      .desktop-nav a,
      .primary-nav a,
      .research-nav a,
      .reader-controls a,
      .recent-tools a
    ) {
      transition: none;
    }
  }
  @media (forced-colors: active) {
    :is(.neu, .inset, .app-header, .reader, .medical-notice) {
      background: Canvas;
      color: CanvasText;
      border-color: CanvasText;
      box-shadow: none;
    }
    :is(
      button,
      .button,
      a.chip,
      .desktop-nav a,
      .primary-nav a,
      .research-nav a,
      .reader-controls a,
      .recent-tools a,
      input,
      textarea,
      select
    ) {
      background: ButtonFace;
      color: ButtonText;
      border-color: ButtonText;
      box-shadow: none;
    }
    :is(button, a):is(
      :active,
      [aria-pressed="true"],
      [aria-current],
      [aria-expanded="true"]
    ) {
      outline: 2px solid Highlight;
      outline-offset: 2px;
    }
  }
}

@layer controls {
  .context-strip {
    justify-content: space-between;
  }
  .support-footer {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: 40px;
    width: calc(100% - 80px);
    max-width: 1280px;
    padding: 24px 0 32px;
    border: 0;
    border-top: 1px solid var(--line);
    margin: 0 auto;
    text-align: left;
  }
  .support-footer .footer-copy {
    display: block;
    min-width: 0;
    max-width: 560px;
  }
  .footer-copy strong {
    display: block;
    color: var(--ink);
    font-size: 16px;
    font-weight: 600;
    line-height: 1.65;
  }
  .footer-copy strong span {
    display: inline-block;
    margin-inline-start: 6px;
    color: var(--muted);
    font-size: 13px;
    font-weight: 400;
  }
  .support-footer .footer-copy p {
    margin: 10px 0 0;
    color: var(--muted);
    font-size: 13px;
    line-height: 1.9;
    overflow-wrap: anywhere;
  }
  .support-card {
    justify-self: end;
    width: 92px;
    margin: 0;
    padding: 0;
    text-align: center;
  }
  .support-card a {
    display: block;
    padding: 6px;
    border-radius: 12px;
    background: var(--surface);
    box-shadow:
      inset 3px 3px 6px var(--shadow),
      inset -3px -3px 6px var(--light);
  }
  .support-card a:focus-visible {
    outline: 3px solid var(--accent);
    outline-offset: 4px;
  }
  .support-card img {
    display: block;
    width: 80px;
    height: auto;
    aspect-ratio: 1;
    max-width: 100%;
    border-radius: 4px;
  }
  @media (max-width: 650px) {
    .support-footer {
      width: calc(100% - 40px);
      gap: 20px;
      padding: 22px 0 28px;
    }
    .footer-copy strong span {
      display: block;
      margin-inline-start: 0;
      margin-top: 4px;
    }
    .support-card {
      width: 84px;
    }
    .support-card img {
      width: 72px;
    }
  }
  .symptom-related {
    margin-top: 32px;
  }
  @media (min-width: 1101px) and (max-width: 1350px) {
    .header-inner {
      gap: 14px;
      padding-inline: 24px;
    }
    .desktop-nav {
      gap: 6px;
    }
    .desktop-nav a {
      padding-inline: 10px;
      gap: 5px;
    }
    .desktop-nav .icon {
      display: none;
    }
  }
  /* Preserve separation when navigation actions wrap onto another line. */
  .form-actions {
    flex-wrap: wrap;
    align-items: center;
    gap: 12px;
  }
  .form-actions > .button {
    flex: 0 1 auto;
    max-width: 100%;
    min-height: 44px;
    line-height: 1.5;
    text-align: center;
    white-space: normal;
  }
  .research-related-actions {
    margin: 0 0 24px;
  }
  .research-nav {
    align-items: center;
    gap: 12px;
    row-gap: 16px;
  }
  .research-nav a {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-height: 44px;
    max-width: 100%;
    line-height: 1.5;
    text-align: center;
  }
  @media (max-width: 650px) {
    .research-related-actions {
      margin-bottom: 22px;
    }
    .research-nav {
      gap: 12px;
    }
  }

  html {
    scrollbar-gutter: stable;
  }
  #main
    > :is(
      .tool-layout,
      .reader-layout,
      .tool-heading,
      .research-panel,
      .symptom-workspace,
      .symptom-methods,
      .reader
    ) {
    width: 100%;
    max-width: none;
    min-width: 0;
    margin-inline: 0;
  }
  .reader :is(p, .definition),
  .article-section > p {
    max-width: 78ch;
  }
}