@layer components {
  .account {
    display: grid;
    gap: var(--space-6);
    max-inline-size: 60rem;
    margin-inline: auto;
    padding-block-start: var(--space-6);

    h1, h2 { margin: 0; }

    p { max-inline-size: none; }
  }

  .account-title {
    font-size: var(--text-4xl);
    font-weight: 300;
    letter-spacing: -0.02em;
    line-height: var(--line-height-display);
  }

  .nav-layout {
    display: grid;
    grid-template-columns: 12rem minmax(0, 1fr);
    align-items: start;
    gap: var(--space-8);
  }

  .account-nav {
    position: sticky;
    inset-block-start: 6rem;
    display: grid;
    border-inline-start: 1px solid var(--color-border);

    a {
      padding: var(--space-2) var(--space-4);
      margin-inline-start: -1px;
      border-inline-start: 2px solid transparent;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      text-decoration: none;

      &:hover { color: var(--color-text); border-inline-start-color: var(--color-accent); }
    }
  }

  .nav-sections { display: grid; gap: var(--space-5); }

  .account-card {
    display: grid;
    align-content: start;
    gap: var(--space-5);
    padding: var(--space-6);
    border: 1px solid var(--color-border);
    border-radius: var(--radius-sharp);
    background: var(--color-panel);
    box-shadow:
      0 1px 2px var(--color-panel-shadow-near),
      0 6px 18px var(--color-panel-shadow-far);
  }

  .card-meta {
    display: grid;
    gap: var(--space-1);

    h2 { font-size: var(--text-xl); font-weight: 400; line-height: var(--line-height-tight); color: var(--color-text); }

    p { font-size: var(--text-sm); color: var(--color-text-muted); }
  }

  .account-email {
    font-size: var(--text-lg);
    overflow-wrap: anywhere;
  }

  .theme-field {
    display: grid;
    gap: var(--space-3);
    margin: 0;
    padding: 0;
    border: 0;

    legend { padding: 0; margin-block-end: var(--space-3); font-size: var(--text-sm); color: var(--color-text-muted); }
  }

  .segmented {
    display: inline-grid;
    grid-auto-flow: column;
    grid-auto-columns: 1fr;
    inline-size: fit-content;
    padding: 3px;
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sharp);

    label {
      position: relative;
      display: grid;
      place-items: center;
      min-block-size: 2.25rem;
      padding-inline: var(--space-4);
      border-radius: 1px;
      font-size: var(--text-sm);
      color: var(--color-text-muted);
      cursor: pointer;
      transition: color var(--duration-fill) var(--ease-out), background-color var(--duration-fill) var(--ease-out);

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

      &:has(:checked) { background: var(--color-text); color: var(--color-surface); cursor: default; }

      &:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 2px; }
    }

    input { position: absolute; opacity: 0; pointer-events: none; }
  }

  .help-actions { display: flex; }

  .help-note { font-size: var(--text-sm); color: var(--color-text-muted); }

  .account .button-wipe {
    position: relative;
    isolation: isolate;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-block-size: 3rem;
    padding-inline: var(--space-5);
    border: 1px solid var(--color-border-strong);
    border-radius: var(--radius-sharp);
    background: transparent;
    color: var(--color-text);
    font-family: var(--font-mono);
    font-size: var(--text-xs);
    font-weight: 500;
    letter-spacing: var(--tracking-caps);
    text-transform: uppercase;
    text-decoration: none;
    white-space: nowrap;
    cursor: pointer;
    transition: border-color var(--duration-wipe) var(--ease-in-out);

    &::before {
      content: "";
      position: absolute;
      inset-block: 0;
      inset-inline-start: 0;
      z-index: -1;
      inline-size: calc(100% + var(--wipe-feather));
      background: linear-gradient(90deg, var(--color-wipe-fill) calc(100% - var(--wipe-feather)), transparent);
      transform: translateX(-100%);
      transition: transform var(--duration-wipe) var(--ease-in-out);
    }

    &:hover, &:focus-visible { border-color: var(--color-wipe-border); }

    &:hover::before, &:focus-visible::before { transform: translateX(0); }
  }

  .session-rows { display: grid; }

  .session-row {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: var(--space-3) var(--space-6);
    padding-block: var(--space-4);

    & + & { border-block-start: 1px solid var(--color-border); }

    p { max-inline-size: 30rem; font-size: var(--text-sm); color: var(--color-text-muted); }
  }

  .quiet-action {
    font-size: var(--text-sm);
    color: var(--color-text-muted);
    text-decoration: underline;
    text-decoration-color: var(--color-border-strong);
    text-underline-offset: 0.25em;

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

  .account {
    .sr-only {
      position: absolute;
      inline-size: 1px;
      block-size: 1px;
      overflow: hidden;
      clip-path: inset(50%);
      white-space: nowrap;
    }

    .plan-parts {
      display: grid;
      grid-template-columns: repeat(2, minmax(0, 1fr));
    }

    .plan-block {
      display: grid;
      align-content: start;
      gap: var(--space-5);
      padding-inline: 0 var(--space-6);

      & + .plan-block {
        padding-inline: var(--space-6) 0;
        border-inline-start: 1px solid var(--color-border);
      }
    }

    .plan-block-head {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      justify-content: space-between;
      gap: var(--space-3);
    }

    .plan-block-name {
      display: inline-flex;
      align-items: center;
      gap: var(--space-3);
      font-size: var(--text-xl);
    }

    .plan-tag {
      padding: 0.125rem 0.375rem;
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      line-height: var(--line-height-tight);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--color-text-muted);
    }

    .status-tag {
      display: inline-flex;
      align-items: center;
      gap: var(--space-2);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      color: var(--color-text-muted);

      &::before {
        content: "";
        inline-size: 0.5rem;
        block-size: 0.5rem;
        border-radius: 50%;
        background: currentColor;
      }

      &.is-ok { color: var(--color-accent-text); }

      &.is-warn {
        color: var(--color-text);

        &::before {
          background: var(--color-accent);
          box-shadow: 0 0 0 3px var(--color-accent-soft);
        }
      }
    }

    .plan-facts {
      display: grid;
      margin: 0;
      border-block-start: 1px solid var(--color-border);

      > div {
        display: grid;
        gap: var(--space-1);
        padding-block: var(--space-3);
        border-block-end: 1px solid var(--color-border);
      }

      dt { font-size: var(--text-sm); color: var(--color-text-muted); }

      dd { margin: 0; }
    }

    .plan-note { font-size: var(--text-sm); color: var(--color-text-muted); }

    .part-a-includes {
      display: grid;
      gap: var(--space-3);
      padding-block: var(--space-4);
      border-block: 1px solid var(--color-border);

      ul { display: grid; gap: var(--space-3); margin: 0; padding: 0; list-style: none; }

      li { display: grid; grid-template-columns: 14px minmax(0, 1fr); gap: var(--space-3); align-items: baseline; }

      .glyph {
        inline-size: 14px;
        block-size: 14px;
        translate: 0 2px;
        fill: none;
        stroke: var(--color-accent);
        stroke-width: 1.5;
        stroke-linecap: round;
        stroke-linejoin: round;
      }
    }

    .plan-block-actions {
      display: flex;
      flex-wrap: wrap;
      align-items: center;
      gap: var(--space-4) var(--space-6);
    }

    .plan-form { display: grid; gap: var(--space-5); }

    .cta {
      position: relative;
      isolation: isolate;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: var(--space-3);
      min-block-size: 3rem;
      padding-inline: var(--space-5);
      border: 0;
      background: none;
      color: var(--color-on-gradient);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      font-weight: 500;
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
      text-decoration: none;
      cursor: pointer;

      &::before {
        content: "";
        position: absolute;
        inset: 0;
        z-index: -1;
        border-radius: var(--radius-sharp);
        background: var(--logo-gradient);
      }

      &::after {
        content: "";
        position: absolute;
        inset: -0.375rem;
        border: 1.5px solid var(--color-accent);
        pointer-events: none;
        mask:
          linear-gradient(#000 0 0) top left / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) top right / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) bottom left / var(--bracket) var(--bracket) no-repeat,
          linear-gradient(#000 0 0) bottom right / var(--bracket) var(--bracket) no-repeat;
        transition: scale var(--duration-fill) var(--ease-out);
      }

      @media (prefers-reduced-motion: no-preference) {
        &:hover::after, &:focus-visible::after { scale: 1.04 1.13; }
      }
    }

    .plan-offer {
      display: grid;
      gap: var(--space-3);
      padding: var(--space-5);
      border-radius: var(--radius-sharp);
      background: color-mix(in oklch, var(--color-accent) 7%, var(--color-panel));

      .button-wipe { white-space: normal; }
    }

    .offer-title {
      font-family: var(--font-display);
      font-size: var(--text-xl);
      font-weight: 300;
      letter-spacing: -0.01em;
    }

    .receipts {
      padding: 0;
      border: 0;
      background: none;
      font: inherit;
      font-size: var(--text-sm);
      color: var(--color-accent-text);
      cursor: pointer;

      &:hover { text-decoration: underline; text-underline-offset: 0.2em; }
    }

    .confirm {
      inline-size: min(100vw - 2 * var(--gutter), 30rem);
      padding: var(--space-6);
      border: 1px solid var(--color-border);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      color: var(--color-text);
      box-shadow: 0 1px 2px var(--color-panel-shadow-near), 0 24px 64px var(--color-panel-shadow-far);

      &[open] { display: grid; gap: var(--space-5); }

      &::backdrop { background: oklch(10% 0.004 90 / 0.5); }
    }

    .confirm-title {
      font-size: var(--text-2xl);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: var(--line-height-tight);

      &:focus { outline: none; }
    }

    .confirm-actions {
      display: flex;
      flex-wrap: wrap;
      justify-content: flex-end;
      gap: var(--space-4);
      padding-block-start: var(--space-5);
      border-block-start: 1px solid var(--color-border);
    }
  }

  :is(.account, .upgrade-card, .upgrade-strip) {
    .plan-pair { display: grid; gap: var(--space-3); }

    .plan-option {
      position: relative;
      display: grid;
      gap: var(--space-2);
      padding: var(--space-4);
      border: 1px solid var(--color-border-strong);
      border-radius: var(--radius-sharp);
      background: var(--color-panel);
      cursor: pointer;
      transition:
        border-color var(--duration-fill) var(--ease-out),
        box-shadow var(--duration-fill) var(--ease-out),
        background-color var(--duration-fill) var(--ease-out);

      input { position: absolute; opacity: 0; pointer-events: none; }

      &:hover { border-color: var(--color-wipe-border); }

      &:has(:checked) {
        border-color: var(--color-accent);
        box-shadow: inset 0 0 0 1px var(--color-accent);
        background: color-mix(in oklch, var(--color-accent) 7%, var(--color-panel));
      }

      &:has(:focus-visible) { outline: 2px solid var(--color-accent); outline-offset: 3px; }

      @media (prefers-reduced-motion: reduce) { transition: none; }
    }

    .option-name { font-weight: 500; }

    .save-badge {
      justify-self: start;
      padding: 0.1875rem 0.5rem;
      border-radius: var(--radius-sharp);
      background: var(--color-accent-soft);
      color: var(--color-accent-on-soft);
      font-family: var(--font-mono);
      font-size: var(--text-xs);
      letter-spacing: var(--tracking-caps);
      text-transform: uppercase;
    }

    .option-price {
      display: flex;
      flex-wrap: wrap;
      align-items: baseline;
      gap: 0 var(--space-2);
    }

    .option-amount {
      font-family: var(--font-display);
      font-size: var(--text-2xl);
      font-weight: 300;
      letter-spacing: -0.02em;
      line-height: 1.1;
    }

    :is(.option-per, .option-meta) { font-size: var(--text-sm); color: var(--color-text-muted); }

    .option-meta {
      display: flex;
      flex-wrap: wrap;
      gap: 0 var(--space-2);

      span + span::before { content: "·"; margin-inline-end: var(--space-2); }
    }
  }

  :is(.upgrade-card, .upgrade-strip) { container: plans / inline-size; }

  @container plans (width >= 36rem) {
    :is(.upgrade-card, .upgrade-strip) .plan-pair {
      grid-template-columns: repeat(2, minmax(0, 1fr));

      .plan-option { grid-row: span 4; grid-template-rows: subgrid; }

      .save-badge { grid-row: 2; }

      .option-price { grid-row: 3; }

      .option-meta { grid-row: 4; }
    }
  }

  @media (max-width: 47.9375rem) {
    .nav-layout { grid-template-columns: minmax(0, 1fr); }

    .account-nav { display: none; }

    .account-card { padding: var(--space-5); }

    .account {
      .plan-parts { grid-template-columns: minmax(0, 1fr); }

      .plan-block, .plan-block + .plan-block { padding-inline: 0; border-inline-start: 0; }

      .plan-block + .plan-block {
        margin-block-start: var(--space-5);
        padding-block-start: var(--space-5);
        border-block-start: 1px solid var(--color-border);
      }
    }
  }

  @media (max-width: 32rem) {
    .account { padding-block-start: var(--space-4); gap: var(--space-5); }

    .account-title { font-size: var(--text-3xl); }

    .segmented { inline-size: 100%; }
  }
}