/*
 * The alert drawer (shared/_alert_drawer, frames/alert_drawers/; owner,
 * 2026-10-26, design C): "Alert me" in the company chrome, a <details>
 * whose panel runs down the right of the window, the full height, on the
 * field ground behind a heavy ink rule. Open on a screen 1024px or wider,
 * the page steps aside for it (`.app:has(...)`), so the price chart narrows
 * and stays in view beside it rather than under it — Highcharts follows its
 * box by itself. Narrower, it covers the page.
 *
 * Inside: price alerts, each a <details> row in its line's colour (a level
 * above the price gain, below it loss, a move ink, paused muted — the
 * `--tone` each modifier sets) with a bar filled by how near it is; the
 * form, whose Custom field shows only while Custom is chosen, read off the
 * select itself; and the company events, each with a switch — a checkbox
 * drawn as a pill whose knob is a gradient, since an input's pseudo-elements
 * are not to be relied on.
 */
@layer components {
  .alert-drawer {
    display: inline-block;
    align-self: start;
  }

  .alert-drawer__button {
    list-style: none;

    &::-webkit-details-marker {
      display: none;
    }
  }

  .app:has(.alert-drawer[open]) {
    @media (width >= 1024px) {
      padding-inline-end: min(32rem, 40vw);
    }
  }

  .alert-drawer__panel {
    position: fixed;
    inset-block: 0;
    inset-inline-end: 0;
    z-index: 40;
    inline-size: 100%;
    overflow-y: auto;
    overscroll-behavior: contain;
    border-inline-start: var(--rule-heavy);
    background-color: var(--color-field);
    box-shadow: var(--shadow-overlay);

    @media (width >= 640px) {
      inline-size: min(32rem, 100%);
    }

    @media (width >= 1024px) {
      inline-size: min(32rem, 40vw);
      box-shadow: none;
    }
  }

  .alert-drawer__frame {
    display: block;
  }

  .alert-drawer__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-sm);
    padding: var(--space-lg) var(--space-lg) var(--space-md);
    border-block-end: var(--rule-heavy);
  }

  .alert-drawer__title {
    margin: 0;
  }

  .alert-drawer__meta {
    margin: var(--space-3xs) 0 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alert-drawer__section {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md) var(--space-lg);

    & + & {
      border-block-start: var(--rule-hairline);
    }
  }

  .alert-drawer__section-title {
    margin: 0;
  }

  .alert-drawer__list {
    margin: 0;
    padding: 0;
    list-style: none;
  }

  .alert-drawer__note,
  .alert-drawer__hint {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alert-drawer__error,
  .price-form__error,
  .alert-event__error {
    margin: 0;
    color: var(--color-loss);
    font-size: var(--text-ui-sm);
  }

  .alert-drawer__error {
    padding: var(--space-sm) var(--space-lg) 0;
  }

  /* A price alert */

  .price-alert {
    --tone: var(--color-ink);

    border-block-end: var(--rule-hairline);

    &[open] {
      background-color: var(--color-surface);
    }
  }

  .price-alert--above {
    --tone: var(--color-gain);
  }

  .price-alert--below {
    --tone: var(--color-loss);
  }

  .price-alert--move {
    --tone: var(--color-ink);
  }

  .price-alert--paused {
    --tone: var(--color-ink-subtle);

    & .price-alert__title {
      color: var(--color-ink-muted);
    }
  }

  .price-alert__summary {
    display: grid;
    grid-template-columns: 1.25rem 1fr auto;
    grid-template-areas:
      "glyph title status"
      ". details details"
      ". bar bar"
      ". note note";
    gap: var(--space-3xs) var(--space-xs);
    padding: var(--space-sm) var(--space-2xs);
    list-style: none;
    cursor: pointer;

    &::-webkit-details-marker {
      display: none;
    }
  }

  /* The line it draws on the chart, in small. */
  .price-alert__glyph {
    grid-area: glyph;
    align-self: center;
    inline-size: 1rem;
    border-block-start: 2px dashed var(--tone);
  }

  .price-alert__title {
    grid-area: title;
    font-family: var(--font-ui);
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
  }

  .price-alert__status {
    grid-area: status;
    color: var(--color-ink-muted);
    font-family: var(--font-data);
    font-size: var(--text-ui-sm);
    font-variant-numeric: tabular-nums lining-nums;
    text-align: end;
  }

  .price-alert__details {
    grid-area: details;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .price-alert__bar {
    grid-area: bar;
    block-size: 3px;
    margin-block: var(--space-3xs);
    background:
      linear-gradient(var(--tone), var(--tone)) no-repeat 0 0 / calc(var(--nearness) * 100%) 100%,
      var(--color-rule);
  }

  .price-alert__note {
    grid-area: note;
    color: var(--color-ink-soft);
    font-family: var(--font-prose);
    font-size: var(--text-ui-sm);
    font-style: italic;
  }

  .price-alert__actions {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    padding: 0 var(--space-2xs) var(--space-sm) calc(1.25rem + var(--space-xs) + var(--space-2xs));
  }

  /* The form */

  .price-form {
    display: grid;
    gap: var(--space-sm);
    padding: var(--space-md);
    border: var(--rule-width) solid var(--color-ink);
  }

  .price-form__title {
    margin: 0;
  }

  .price-form__kinds {
    justify-self: start;
  }

  .price-form__set {
    margin: 0;
    color: var(--color-gain-strong);
    font-size: var(--text-ui-sm);
  }

  /* Two fields side by side, the second wider: a price's choices carry
     their dollar figure ("5% below — $330.34"). On a phone, one above the
     other, so neither is cut short. */
  .price-form__pair {
    display: grid;
    gap: var(--space-xs);

    @media (width >= 640px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);
    }
  }

  /* A move's window and percentage, side by side; gone while the select
     above them has chosen a 52-week extreme, which has neither. */
  .price-form__by {
    display: grid;
    gap: var(--space-sm) var(--space-xs);

    @media (width >= 640px) {
      grid-template-columns: minmax(0, 1fr) minmax(0, 1.3fr);

      & .alert-field--custom {
        grid-column: 1 / -1;
      }
    }

    .price-form:has(.price-form__extreme:checked) & {
      display: none;
    }
  }

  .price-form__sentence {
    margin: 0;
    padding: var(--space-xs) var(--space-sm);
    border-inline-start: var(--rule-heavy);
    background-color: var(--color-surface);
    font-size: var(--text-ui-sm);
    line-height: var(--leading-ui-sm);
  }

  .price-form__actions {
    display: flex;
    align-items: center;
    justify-content: end;
    gap: var(--space-md);
  }

  .price-form__cancel {
    color: var(--color-ink);
    font-size: var(--text-ui-sm);
    font-weight: var(--weight-medium);
  }

  /* A labelled field: a caption over a select or a box, the site's field
     at the height of a form row rather than a floating label's. */
  .alert-field {
    display: grid;
    gap: var(--space-3xs);
    min-inline-size: 0;
  }

  .alert-field__label {
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alert-field__select,
  .alert-field__input {
    min-block-size: 2.75rem;
    padding-block: 0;
  }

  .alert-field__input {
    padding-inline: var(--space-sm);
  }

  /* What Custom opens: shown only while Custom is chosen. */
  .alert-field--custom {
    display: none;

    form:has(.alert-field__choice option[value="custom"]:checked) & {
      display: grid;
    }
  }

  /* A company event */

  .alert-event {
    display: grid;
    gap: var(--space-xs);
    padding-block: var(--space-sm);
    border-block-end: var(--rule-hairline);
  }

  .alert-event__head {
    display: flex;
    align-items: start;
    justify-content: space-between;
    gap: var(--space-sm);
  }

  .alert-event__name {
    margin: 0;
    font-size: var(--text-ui);
    font-weight: var(--weight-semibold);
  }

  .alert-event__description {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }

  .alert-event__fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--space-xs);
  }

  .alert-event__forms {
    display: flex;
    flex-wrap: wrap;
    gap: var(--space-2xs);
    margin: 0;
    padding: 0;
    border: 0;
  }

  /* A form to hear about, a checkbox drawn as a chip: ticked, sunk and
     marked. */
  .alert-event__chip {
    display: inline-flex;
    align-items: center;
    min-block-size: 2.25rem;
    padding-inline: var(--space-sm);
    border: var(--rule-width) solid var(--color-rule-control);
    background-color: var(--color-field);
    font-family: var(--font-data);
    font-size: var(--text-ui-sm);
    cursor: pointer;

    &:has(input:checked) {
      border-color: var(--color-ink);
      background-color: var(--color-surface-sunken);

      &::before {
        content: "✓\00a0";
      }
    }

    &:has(input:focus-visible) {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }

    @media (pointer: coarse) {
      min-block-size: var(--target-min);
    }
  }

  /* On or off: a pill, gain when on, its knob a circle of the inverse ink
     that moves to the end. */
  .switch {
    display: inline-flex;
    flex: none;
    align-items: center;
    min-block-size: var(--target-min);
    cursor: pointer;
  }

  .switch__input {
    --knob: 0.6875rem;

    inline-size: 2.75rem;
    block-size: 1.5rem;
    margin: 0;
    border-radius: var(--radius-pill);
    background:
      radial-gradient(circle at calc(var(--knob) + 0.125rem) 50%, var(--color-ink-inverse) var(--knob), transparent calc(var(--knob) + 0.5px)),
      var(--color-rule-control);
    appearance: none;
    cursor: pointer;
    transition: background-color var(--duration-fast);

    &:checked {
      background:
        radial-gradient(circle at calc(100% - var(--knob) - 0.125rem) 50%, var(--color-ink-inverse) var(--knob), transparent calc(var(--knob) + 0.5px)),
        var(--color-gain);
    }

    &:focus-visible {
      outline: var(--focus-ring);
      outline-offset: var(--focus-offset);
    }
  }
}