/* Shared UI primitives. Only what an actual page uses — a component with no
   caller is a component nobody has designed yet (§51.27). */

@layer components {

  /* Deliveries D21. The unread count beside "Following" in the avatar menu.
     `hidden` still wins: utilities.css's [hidden] is !important. */
  .count-badge {
    display: inline-block;
    min-inline-size: 1.5em;
    padding: 0 6px;
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: 0.8em;
    font-weight: 600;
    line-height: 1.5;
    text-align: center;
    font-variant-numeric: tabular-nums;
  }

  .card {
    padding: var(--space-4);
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-veil);
  }

  /* Phase 11 D4. The design is pill-first: 53 of its 53 buttons are 999px.
     `.button` is the filled accent pill; `.button--quiet` the outlined one;
     `.button--dark` the ink CTA the hero and the plan strip use. */
  .button {
    display: inline-flex;
    gap: var(--space-2);
    align-items: center;
    padding: 9px 16px;
    border: 1px solid var(--accent);
    border-radius: var(--radius-pill);
    background: var(--accent);
    color: var(--on-accent);
    font-size: calc(13.5px * var(--type-scale));
    font-weight: 600;
    line-height: 1.2;
    white-space: nowrap;
    text-decoration: none;
    cursor: pointer;

    &:hover { color: var(--on-accent); }

    &:disabled {
      opacity: .55;
      cursor: not-allowed;
    }

    &.button--quiet {
      border-color: var(--border-strong);
      background: var(--surface-raised);
      color: var(--text);

      &:hover { color: var(--text); }
    }

    &.button--dark {
      border-color: var(--text);
      background: var(--text);
      color: var(--on-dark);

      &:hover { color: var(--on-dark); }
    }

    /* The modal's actions (design.html:797-798, 812). */
    &.button--md {
      padding: 10px 18px;
      font-size: calc(14px * var(--type-scale));
    }

    /* The hero and the plan strip run one size up from the header pill. */
    &.button--lg {
      padding: 14px 24px;
      font-size: calc(15px * var(--type-scale));
    }
  }

  /* D4. label + control, stacked. The design's form field: a 13px label over
     a 15px control on the warm veil (design.html:834-836). Only the input is
     styled — a textarea, a select and a hint line get their rules when a view
     that has one arrives. */
  .field {
    display: flex;
    flex-direction: column;
    gap: 7px;
  }

  .field > label {
    font-size: calc(13px * var(--type-scale));
    font-weight: 600;
  }

  .field input {
    padding: 13px;
    border: 1px solid var(--border);
    border-radius: var(--radius-sm);
    background: var(--surface-veil);
    font-size: calc(15px * var(--type-scale));
  }

  /* Phase 10 D8. Sign out is an ACTION, so it is a <button> — but it sits in
     the marketing header's nav beside plain links and must not shout. A button
     that looks like a link, rather than a link that does something. */
  .link-button {
    padding: 0;
    border: 0;
    background: none;
    color: inherit;
    font: inherit;
    text-decoration: underline;
    cursor: pointer;
  }

  /* D5. The signed-in identity control. 38px, round, warm ground. It is a
     <button> because it opens a menu, and carries aria-expanded. */
  .avatar {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    inline-size: 38px;
    block-size: 38px;
    padding: 0;
    border: 0;
    border-radius: 50%;
    background: var(--accent-warm);
    color: var(--text);
    font-size: calc(14px * var(--type-scale));
    font-weight: 700;
    cursor: pointer;
  }

  /* D4. The dropdown the avatar opens. Positioned by its .menu-anchor parent
     so the same block serves the marketing header and the app chrome. */
  .menu-anchor { position: relative; flex: none; }

  .menu {
    position: absolute;
    z-index: 30;
    inset-block-start: 46px;
    inset-inline-end: 0;
    display: flex;
    flex-direction: column;
    gap: 2px;
    min-inline-size: 168px;
    padding: 6px;
    border: 1px solid var(--border);
    border-radius: var(--radius-md);
    background: var(--surface-raised);
    box-shadow: var(--shadow-menu);
    list-style: none;
  }

  .menu li { max-inline-size: none; }

  /* Sign out is separated from the two destinations — it is the one item that
     is not navigation. */
  .menu li:last-child {
    padding-block-start: 4px;
    border-block-start: 1px solid var(--hairline);
    margin-block-start: 4px;
  }

  .menu-email {
    overflow: hidden;
    padding: 9px 12px 10px;
    border-block-end: 1px solid var(--hairline);
    margin-block-end: 4px;
    color: var(--text-muted);
    font-size: calc(12.5px * var(--type-scale));
    text-overflow: ellipsis;
  }

  .menu a,
  .menu .link-button {
    display: block;
    inline-size: 100%;
    padding: 9px 12px;
    border-radius: var(--radius-sm);
    color: var(--text);
    font-size: calc(13.5px * var(--type-scale));
    font-weight: 600;
    text-align: start;
    text-decoration: none;
  }

  .menu a:hover,
  .menu .link-button:hover { background: var(--surface-sunken); }

  .menu .link-button { color: var(--text-muted); }

  /* Part J. A native <dialog>: showModal() gives the scrim, Escape and focus
     containment, so none of them is written here. The card fills the dialog,
     which is how a click on the scrim is told apart from one on the card. The
     Unfollow confirmation is 380px (design.html:791); the alert reads wider
     (804). Part H's notify modal is meant to reuse this. */
  .modal {
    inline-size: calc(100% - 40px);
    max-inline-size: 380px;
    padding: 0;
    border: 0;
    border-radius: var(--radius-lg);
    background: var(--surface-raised);
    color: var(--text);
    box-shadow: var(--shadow-modal);

    &::backdrop { background: var(--scrim); }

    &.modal--wide { max-inline-size: 440px; }
  }

  .modal-card {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 24px 22px 20px;
  }

  .modal-title {
    margin: 0;
    font-size: calc(18px * var(--type-scale));
    font-weight: 700;
    letter-spacing: -.02em;
  }

  .modal-text {
    margin: 0 0 12px;
    color: var(--text-secondary);
    font-size: calc(14px * var(--type-scale));
    line-height: 1.55;
    text-wrap: pretty;
  }

  .modal-actions {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
    justify-content: flex-end;
  }

  /* Design Products Q6. Pinned to the foot of the window, above the page.
     Text only, so a tap goes through it to whatever it covers, a Send button
     included. */
  .toast {
    position: fixed;
    pointer-events: none;
    inset-block-end: var(--space-6);
    inset-inline: 0;
    z-index: 40;
    inline-size: fit-content;
    max-inline-size: calc(100% - 2 * var(--space-4));
    margin-inline: auto;
    padding: var(--space-3) var(--space-6);
    border-radius: var(--radius-pill);
    background: var(--text);
    box-shadow: var(--shadow-modal);
    color: var(--on-dark);
    font-size: calc(14px * var(--type-scale));
    font-weight: 500;
  }
}