/*
 * The reader's saved screens at the head of the screener page
 * (frames/screeners/_saved_panel): a strip like the following strip — a band
 * of the raised paper one chip tall, hanging past the text edge as that one
 * does, under the section's heavy rule (owner, 2026-10-04). The label, then
 * the screens as chips in a line that scrolls sideways, then "Save this
 * screen", the export and the counter at the row's end.
 *
 *   .saved-screen          one screen: its name, and a small bell when its
 *                          alerts are on
 *   .saved-screen--open    the screen the page is showing (aria-current): the
 *                          name in ink, then its bell, rename and delete
 *   .saved-screen__edit    the rename or save form that takes a chip's place
 *
 *   .panel-note       a line of help or refusal text inside a panel — here,
 *                     in the strip's frame, and in a refusal a frame answers
 *                     a signed-out visitor with (shared/_account_required)
 *   .form-actions     a small form's own row: "Save or cancel"
 */
@layer components {
  .saved-screens {
    --saved-screens-bleed: var(--space-sm);

    margin-block-end: var(--space-lg);
    border-block-start: var(--rule-heavy);
  }

  .saved-screens__row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-sm);
    min-block-size: 3.5rem;
    margin-inline: calc(-1 * var(--saved-screens-bleed));
    padding: var(--space-xs) var(--saved-screens-bleed);
    border-block-end: var(--rule-hairline);
    background-color: var(--color-surface-raised);
  }

  .saved-screens__label {
    flex: none;
  }

  /* The chips: one line that scrolls sideways inside the strip, never the
     page. */
  .saved-screens__chips {
    display: flex;
    flex: 0 1 auto;
    align-items: center;
    gap: var(--space-2xs);
    min-inline-size: 0;
    margin: 0;
    padding: 0;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    scrollbar-width: thin;
    list-style: none;
  }

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

  .saved-screen {
    display: flex;
    flex: none;
    align-items: stretch;
    min-block-size: 2.5rem;
    border: var(--rule-width) solid var(--color-rule);
    background-color: var(--color-surface);
    font-size: var(--text-ui);

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

  .saved-screen__name {
    display: inline-flex;
    align-items: center;
    gap: var(--space-2xs);
    padding-inline: var(--space-sm);
    color: var(--color-ink);
    text-decoration: none;
    white-space: nowrap;

    &:hover {
      text-decoration: underline;
    }

    & .icon {
      fill: var(--color-ink);
    }
  }

  /* The open screen: its name in ink, the buttons on the paper beside it. */
  .saved-screen--open {
    border-color: var(--color-ink);
  }

  .saved-screen__view {
    display: flex;
    align-items: stretch;
  }

  .saved-screen--open .saved-screen__name {
    background-color: var(--color-ink);
    color: var(--color-ink-inverse);
    font-weight: var(--weight-semibold);
  }

  .saved-screen__actions {
    display: flex;
    align-items: center;
    gap: var(--space-3xs);
    padding-inline: var(--space-2xs);
    background-color: var(--color-field);
  }

  /* The rename in the chip's place, and the save after "Save this screen":
     a name field, then Save or cancel, on the row. */
  .saved-screen__edit {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    padding: var(--space-3xs) var(--space-2xs);
    background-color: var(--color-field);
  }

  .saved-screens__input {
    inline-size: 14rem;
    min-block-size: 2rem;
    padding-inline: var(--space-xs);
    border: var(--rule-width) solid var(--color-rule-control);
    background-color: var(--color-field);
    font-size: var(--text-input);

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

  /* Save, the export and the counter, at the row's end; on a phone they take
     a line of their own under the chips. */
  .saved-screens__actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs) var(--space-xl);
    margin-inline-start: auto;
  }

  .saved-screens__note {
    margin-block-start: var(--space-xs);
  }

  .panel-note {
    margin: 0;
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
    line-height: 1.5;
  }

  .form-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: var(--space-xs);
    color: var(--color-ink-muted);
    font-size: var(--text-ui-sm);
  }
}