/* Account area (AccountScreen.js): the heading, the tabs under it, and the tab's panel, one under
   the other; on a wide screen the Account tab splits its panel in two (.accountSplit). */

.accountScreen {
  padding: 3.5rem 0 3rem; /* a short way down to the footer on every tab */
}

/* The heading with Sign out on its right, the way the nav has its buttons on the right. */
.accountHead {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  flex-wrap: wrap;
}

/* The account's headings are in the body face, not the display one: the title and the column
   titles all in the same plain, emphasized type. */
.accountTitle {
  font: var(--md-sys-typescale-headline-large);
  font-family: var(--body);
  letter-spacing: -0.01em;
  min-width: 0;
}

/* The account did not load: one line under the heading, over the copy that stays on screen, the
   sentence and Contact support laid out by .pillLine (base.css). */
.accountFailed {
  margin-top: 1rem;
  font: var(--md-sys-typescale-body-medium);
  color: var(--error);
}

/* Contact support takes the page ink: in light, primary is the error's red and would read as part
   of the sentence. */
.accountFailed .textPill {
  color: var(--ink);
}

/* Tabs */

/* The account's tabs sit on a soft track of even columns, and the current tab is the tonal pill the
   download page's system switch marks its choice with, sliding across it. Even columns (grid) let
   the pill be one column wide and move by whole columns, so its slide moves only its position — no
   width spring, no overshoot. positionAccountTabsPill just sets which column (--account-tab-index)
   is current. */
.accountTabs {
  position: relative;
  display: grid;
  margin: 1.5rem 0 2rem;
  grid-template-columns: repeat(var(--account-tab-count, 2), 1fr);
  gap: 0.25rem;
  padding: 0.25rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: color-mix(in srgb, var(--ink) 8%, transparent);
}

.accountTabs::before {
  content: "";
  position: absolute;
  top: 0.25rem;
  bottom: 0.25rem;
  left: 0.25rem;
  width: calc((100% - 0.5rem - 0.25rem * (var(--account-tab-count, 2) - 1)) / var(--account-tab-count, 2)); /* one column inside the side padding and the gaps */
  border-radius: var(--md-comp-shape-pill);
  background: var(--tonal);
  translate: calc((100% + 0.25rem) * var(--account-tab-index, 0));
  transition:
    translate var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
    border-radius var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized);
  pointer-events: none;
}

/* The current tab sits over the pill, so a press on it squishes and squares off the pill too, on the
   press list's clocks (css/expressive.css); the pill's place rides `translate`, so the squish, a
   transform, scales it where it stands, as on the download page's system switch. */
/* convention-allow forced-colors-pair: forced colors hide the pill (below), its press with it */
.accountTabs:has(a[aria-current]:is(:active, .held))::before {
  transform: scale(0.94);
  border-radius: var(--md-comp-pressed-morph-small);
  transition:
    translate var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-standard),
    transform var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    border-radius var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (prefers-reduced-motion: reduce) {
  /* convention-allow forced-colors-pair: forced colors hide the pill (below), its press with it */
  .accountTabs:has(a[aria-current]:is(:active, .held))::before {
    transform: none;
  }
}

.accountTabs a {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 2.5rem;
  padding: 0.5rem 1rem;
  border-radius: var(--md-comp-shape-pill);
  color: var(--ink-2);
  text-align: center;
  white-space: nowrap; /* each tab is one word, so it keeps its stadium on a phone too */
  font: var(--md-sys-typescale-label-large);
  transition:
    background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    color var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .accountTabs a:hover {
    background: var(--md-state-ink-hover);
    color: var(--ink);
  }
}

.accountTabs a:is(:active, .held) {
  background: var(--md-state-ink-pressed);
  border-radius: var(--md-comp-pressed-morph-small);
}

/* The sliding pill is the indicator; the current tab reads in its ink and lays that ink over it as
   its state layer. */
.accountTabs a[aria-current] {
  color: var(--tonal-ink);
}

@media (hover: hover) {
  .accountTabs a[aria-current]:hover {
    background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-hover-opacity) * 100%), transparent);
  }
}

.accountTabs a[aria-current]:is(:active, .held) {
  background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-pressed-opacity) * 100%), transparent);
}

/* Windows High Contrast flattens author colors, so the sliding pill and the ink shift that mark the
   current tab both vanish; hide the pill and pin the current tab to system colors, hovered and held
   too, as the download page's system switch does (DownloadScreen.css). */
@media (forced-colors: active) {
  .accountTabs::before {
    display: none;
  }

  .accountTabs a[aria-current],
  .accountTabs a[aria-current]:hover, /* m3-allow: the system's selection colors, as at rest, so a tap leaves nothing behind */
  .accountTabs a[aria-current]:is(:active, .held) {
    background: SelectedItem;
    color: SelectedItemText;
    forced-color-adjust: none;
  }
}

/* Sign out is a button like the nav's Sign in: the same outline, the same quiet ink, the door icon. */
.accountLogout {
  gap: 0.5rem;
  border-color: var(--line);
  color: var(--ink-2);
}

@media (hover: hover) {
  .accountLogout:hover {
    color: var(--ink);
  }
}

/* Plugin cards: glass (.glass in the markup), like every surface that sits on the page. */

.pluginCards {
  display: grid;
  gap: 1.25rem;
}

.pluginCard {
  display: grid;
  gap: 1rem;
  padding: 1.25rem 1.5rem;
}

/* A card with nothing live dims only its picture, so its lines, the days each license was issued
   and refunded, read as clearly as a refunded line on any card. */
.pluginCard.refunded .pluginArt {
  opacity: 0.6;
}

.pluginHead {
  display: flex;
  align-items: center;
  gap: 1rem;
}

.pluginArt {
  flex: none;
  width: 4.5rem;
  height: 4.5rem;
  border-radius: var(--md-sys-shape-corner-md);
  object-fit: cover;
}

.pluginName {
  flex: 1;
  min-width: 0;
}

/* The plugin's name in the same plain emphasized body face as the account's other headings. */
.pluginName h2 {
  font: var(--md-sys-typescale-title-large);
  font-family: var(--body);
}

/* The installers and the manual on one row: the download buttons on the left, the manual — a real
   outlined button, not a quiet link — on the right, level with them. */
.pluginTools {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 0.75rem 1rem;
  flex-wrap: wrap;
}

.pluginTools .downloads {
  flex: 1 1 20rem;
}

.pluginManual {
  gap: 0.5rem;
  flex: none;
}

/* The way to Paddle's billing screen: a real outlined button, wide, under the orders. */
.accountBilling {
  margin-top: 2rem;
}

.accountBillingButton {
  gap: 0.5rem;
  min-width: 18rem;
  border-color: var(--line);
  color: var(--ink);
}

/* The way to activate a computer without internet, under the plugins: a real outlined button. */
.accountAddComputer {
  margin-top: 1.25rem;
}

.accountAddComputer .button {
  gap: 0.5rem;
}

/* Orders, in the column beside the details: one glass surface (.glass in the markup) at the corner
   of the account's other cards, holding a Material 3 list, an item per purchase. */
.orderList {
  list-style: none;
  margin: 0;
  padding: 0.5rem 0;
  border-radius: var(--md-sys-shape-corner-xl);
  container-type: inline-size;
}

/* Every line keeps one height, so a long list reads in even rows; the right keeps 1.25rem so the
   invoice pill's hover stays clear of the glass's edge. */
.orderRow {
  position: relative;
  display: grid;
  grid-template-columns: 3.5rem minmax(0, 1fr);
  gap: 0.25rem 1rem;
  padding: 0.75rem 1.25rem 0.75rem 1rem;
}

/* Inset dividers, from where the words start to where they end, as a list with pictures draws
   them. */
.orderRow + .orderRow::before {
  content: "";
  position: absolute;
  top: 0;
  left: 5.5rem;
  right: 1.25rem;
  border-top: 0.0625rem solid var(--line);
}

/* The leading picture at Material 3's 56dp, centered on the row's lines as the settings card's
   icons are on theirs. */
.orderArt {
  position: relative;
  grid-row: 1 / span 3;
  align-self: center;
  width: 3.5rem;
  height: 3.5rem;
}

/* The fill is the plain tile's, where the catalog holds no picture of the plugin. */
.orderArtTile {
  display: block;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: var(--md-sys-shape-corner-md);
  object-fit: cover;
  background: var(--md-sys-color-surface-container-highest);
}

/* Several plugins: smaller tiles in a stack running down to the right, each cut out of the one
   behind by a ring of the page. */
.orderArt.several .orderArtTile {
  position: absolute;
  top: 0;
  left: 0;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--md-sys-shape-corner-sm);
}

.orderArt.several .orderArtTile + .orderArtTile {
  top: 0.5rem;
  left: 0.5rem;
  box-shadow: 0 0 0 0.125rem var(--bg);
}

.orderArt.several .orderArtTile:last-child {
  top: 1rem;
  left: 1rem;
}

/* The stack's front tile once an order holds more plugins than it has tiles: the count of those
   without a tile of their own. */
.orderArtCount {
  position: absolute;
  top: 1rem;
  left: 1rem;
  display: grid;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--md-sys-shape-corner-sm);
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: 0 0 0 0.125rem var(--bg);
  color: var(--ink);
  font: var(--md-sys-typescale-label-large);
}

/* As a card with nothing live dims its picture (.pluginCard.refunded). */
.orderRow.refunded .orderArt {
  opacity: 0.6;
}

/* A list narrower than a 390px phone's, a 360px Android's, takes 40dp pictures, Material 3's
   smaller leading size, so the number and the invoice still share their line. */
@container (max-width: 21rem) {
  .orderRow {
    grid-template-columns: 2.5rem minmax(0, 1fr);
    column-gap: 0.75rem;
  }

  .orderRow + .orderRow::before {
    left: 4.25rem;
  }

  .orderArt,
  .orderArtTile {
    width: 2.5rem;
    height: 2.5rem;
  }

  .orderArt.several .orderArtTile,
  .orderArtCount {
    width: 2rem;
    height: 2rem;
  }

  .orderArt.several .orderArtTile + .orderArtTile {
    top: 0.25rem;
    left: 0.25rem;
  }

  .orderArt.several .orderArtTile:last-child,
  .orderArtCount {
    top: 0.5rem;
    left: 0.5rem;
  }
}

/* Where a line's two parts do not fit side by side (the day and a refund on a phone), the right one
   wraps to the next line, still on the right, rather than run over the words. */
.orderHead,
.orderLine {
  grid-column: 2;
  display: flex;
  flex-wrap: wrap;
  gap: 0 0.75rem;
  min-height: 1.5rem;
}

.orderHead {
  align-items: baseline;
}

.orderLine {
  align-items: center;
}

/* Every name is written out, so the browser's find reaches each, and a long list breaks only
   between names, never squeezing the total. */
.orderWhat {
  flex: 1 1 0;
  font: var(--md-sys-typescale-title-medium);
  color: var(--ink);
}

.orderWhat span {
  white-space: nowrap;
}

/* The total (.price in the markup) never breaks or shrinks, however long its currency writes it. */
.orderTotal {
  flex: none;
  margin-left: auto;
  white-space: nowrap;
}

.orderDate,
.orderReference {
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

.orderDate {
  white-space: nowrap;
}

/* One tap selects the whole number, which support asks for; a transaction's ID, one long word,
   breaks at any letter, so it starts beside "Order" rather than on a line of its own. */
.orderNumber {
  font-family: var(--mono);
  word-break: break-all;
  -webkit-user-select: all;
  user-select: all;
}

/* A refund, said in a word beside its arrow on Material 3's highest container, so it reads without
   color; the transparent hairline is its edge where forced colors drop the fill. */
.orderBadge {
  display: inline-flex;
  flex: none;
  align-items: center;
  gap: 0.25rem;
  min-height: 1.25rem;
  margin-left: auto;
  padding: 0 0.5rem 0 0.25rem;
  border: 0.0625rem solid transparent;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  color: var(--ink);
  font: var(--md-sys-typescale-label-medium);
  white-space: nowrap;
}

.orderBadge svg {
  flex: none;
  width: 0.875rem;
  height: 0.875rem;
}

/* Material 3 Expressive's 32dp extra-small size, with the shared 48dp area: at 40dp its hover ran
   over a refund's badge above it, and an order with an invoice stood taller than one without. */
.orderInvoice {
  flex: none;
  min-height: 2rem;
  margin: -0.25rem -0.75rem -0.25rem auto;
  padding: 0.25rem 0.75rem;
}

.orderNone {
  color: var(--ink-2);
}

/* Under the orders: the way to Paddle's own list of them, and one small aside beside it with an
   arrow pointing back at the button. */
.accountOrdersMore {
  margin-top: 1.25rem;
}

.accountTip {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  margin: 0.75rem 0 0;
  font: var(--md-sys-typescale-body-small);
  color: var(--ink-2);
}

.accountTip svg {
  flex: none;
  width: 1rem;
  height: 1rem;
}

.accountTip b {
  font-weight: 600;
  color: var(--ink-2);
}

.pluginRefunded,
.pluginUnknown {
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

/* Empty state: the mark, the line, and the way out, on glass (.glass in the markup). The cart's
   empty drawer says it the same way. */

.accountEmpty {
  display: grid;
  justify-items: center;
  gap: 0.5rem;
  padding: 4rem 1.5rem;
  text-align: center;
}

.accountEmpty img {
  margin-bottom: 0.5rem;
}

.accountEmpty b {
  font: var(--md-sys-typescale-title-medium);
}

.accountEmpty p {
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
  max-width: 34ch;
}

.accountEmptyActions {
  display: flex;
  gap: 0.75rem;
  flex-wrap: wrap;
  justify-content: center;
  margin-top: 1rem;
}

/* The Account tab: the form on the left, the orders in the column on the right, a line
   between them; one column under each other on a phone (the form first). */
.accountSplit {
  display: grid;
  grid-template-columns: 1fr 1fr; /* two equal halves, so the line between them is the page's middle */
  gap: 2.5rem 0;
  align-items: start;
}

.accountColumnDetails {
  padding-right: clamp(1.5rem, 4vw, 3rem);
}

/* The orders scroll inside their column on a wide screen, so a long list never pushes the footer
   out of the window: the page keeps its height, the column takes the scrolling. Room on the right,
   in the page's gutter, and at the bottom keeps the scrolling edge from cutting the list's shadow.
   The scroll padding brings a focused control in with room for its focus ring, which the scrolling
   edge would otherwise cut, as .contents does in css/base.css. */
.accountColumnOrders {
  margin-right: -1.5rem;
  padding: 0 1.5rem 3rem clamp(1.5rem, 4vw, 3rem);
  border-left: 0.0625rem solid var(--line);
  max-height: min(34rem, 60svh); /* convention-allow viewport-unit: the column scrolls inside the visible height, so the footer stays in view on a wide screen */
  overflow-y: auto;
  scroll-padding-block: 0.5rem;
  overscroll-behavior: contain;
  scrollbar-width: thin;
}

/* "Details" and "Orders" head their columns a size above the cards under them, each beside its icon
   on a tonal disc, so the two halves read as two sections of the tab. */
.accountColumnTitle {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin: 0 0 1.25rem;
  padding: 0;
  font: var(--md-sys-typescale-headline-small);
  font-family: var(--body);
  font-weight: 600;
}

.accountColumnIcon {
  display: grid;
  flex: none;
  place-items: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--tonal);
  color: var(--tonal-ink);
}

.accountColumnIcon svg {
  width: 1.25rem;
  height: 1.25rem;
}

@media (max-width: 52rem) {
  .accountSplit {
    grid-template-columns: 1fr;
  }

  .accountColumnDetails {
    padding-right: 0;
  }

  .accountColumnOrders {
    margin-right: 0;
    padding: 2rem 0 0;
    border-left: 0;
    border-top: 0.0625rem solid var(--line);
    max-height: none; /* one column: the page scrolls as a whole */
    overflow: visible;
  }
}

/* On a phone on its side, two columns still, the orders would be a box an order or two tall inside
   the scrolling page, so the page scrolls as a whole here too (css.md "Values"). */
@media (max-height: 30rem) {
  .accountColumnOrders {
    max-height: none;
    overflow: visible;
  }
}

/* Details: one glass card holding a Material 3 list of settings, a row each for the email, the
   newsletter and the way to end every session, its words on the left and its control on the right. */
.accountSettings {
  display: grid;
  max-width: 30rem; /* the words and a control need no more */
  padding: 0.5rem 0;
}

.accountRow {
  position: relative;
  display: flex;
  align-items: center;
  gap: 1rem;
  min-height: 4.5rem;
  padding: 0.75rem 1.25rem;
}

/* Inset dividers, from where the words start, as the Orders list draws them. */
.accountRow + .accountRow::after {
  content: "";
  position: absolute;
  top: 0;
  left: 3.75rem;
  right: 1.25rem;
  border-top: 0.0625rem solid var(--line);
}

.accountRowIcon {
  display: grid;
  flex: none;
  place-items: center;
  width: 1.5rem;
  color: var(--ink-2);
}

.accountRowIcon svg {
  width: 1.25rem;
  height: 1.25rem;
}

.accountRowText {
  display: grid;
  flex: 1;
  gap: 0;
  min-width: 0;
}

.accountRowValue {
  font: var(--md-sys-typescale-body-large);
  color: var(--ink);
}

.accountRowLabel {
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

/* An address is one long word, so a part of it still too long for the row after its break chances
   (EmailWithBreaks()) breaks anywhere rather than push Change off the card. */
.accountEmail {
  overflow-wrap: anywhere;
}

/* The quiet pill's own padding, so its label ends where the switch's track does. */
.accountRow .textPill {
  flex: none;
  margin-right: -0.75rem;
}

.accountHint {
  margin-top: 0.75rem;
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

/* The newsletter: the card's middle row is the switch's <label>, so the whole row is its target:
   it takes the hover and press state layers (::before), and while the status is unknown or a change
   is on its way, the row is still and the switch draws in the disabled ink. */
.accountNewsCard {
  cursor: pointer;
}

.accountNewsCard::before {
  content: "";
  position: absolute;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  transition: background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .accountNewsCard:hover::before {
    background: var(--md-state-ink-hover);
  }
}

.accountNewsCard:is(:active, .held)::before {
  background: var(--md-state-ink-pressed);
}

.accountNewsCard:has(.accountNewsInput:disabled),
.accountNewsCard:has(.accountNewsInput[aria-disabled="true"]) {
  cursor: default;
}

.accountNewsCard:has(.accountNewsInput:disabled)::before,
.accountNewsCard:has(.accountNewsInput[aria-disabled="true"])::before {
  background: none;
}

/* The switch's input sits invisible over the track it draws, so the keyboard and a screen reader
   reach a native switch; the ring goes around the whole row, the control the eye sees. */
.accountNewsCard:has(.accountNewsInput:focus-visible) {
  outline: 0.125rem solid var(--accent-text);
  outline-offset: -0.125rem; /* inside the card, whose edge would hide a ring outside the row */
}

.accountNewsInput:focus-visible {
  outline: none;
}

.accountNewsSwitch {
  position: relative;
  flex: none;
  display: flex;
}

.accountNewsInput {
  position: absolute;
  inset: 0;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}

/* M3's switch: a 52 x 32dp track, outlined while off with a 16dp handle at its start, filled with
   primary while on with a 24dp handle at its end in on-primary, the handle 28dp while held. */
.accountNewsTrack {
  position: relative;
  width: 3.25rem;
  height: 2rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--md-sys-color-surface-container-highest);
  box-shadow: inset 0 0 0 0.125rem var(--ink-3); /* the 2dp outline, drawn inside so the handle's offsets count from the outer edge */
  transition:
    background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    box-shadow var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

.accountNewsTrack::before {
  content: "";
  position: absolute;
  top: 50%;
  left: 1rem; /* the handle's middle, 16dp in from the track's edge */
  width: 1rem;
  height: 1rem;
  border-radius: var(--md-sys-shape-corner-full);
  background: var(--ink-3);
  translate: -50% -50%;
  transition:
    left var(--md-sys-motion-duration-medium) var(--md-sys-motion-easing-emphasized),
    width var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    height var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard),
    background var(--md-sys-motion-duration-short) var(--md-sys-motion-easing-standard);
}

@media (hover: hover) {
  .accountNewsCard:hover .accountNewsTrack::before {
    background: var(--ink-2);
  }
}

.accountNewsInput:checked + .accountNewsTrack {
  background: var(--accent-strong);
  box-shadow: none;
}

.accountNewsInput:checked + .accountNewsTrack::before {
  left: 2.25rem; /* 16dp in from the far edge, as the handle's middle sits from the near one */
  width: 1.5rem;
  height: 1.5rem;
  background: var(--md-sys-color-on-primary);
}

.accountNewsCard:is(:active, .held) .accountNewsInput:enabled:not([aria-disabled="true"]) + .accountNewsTrack::before {
  width: 1.75rem;
  height: 1.75rem;
}

/* M3's disabled switch: the track and its outline at 12% of the ink, the handle at 38%, or the page
   itself on a track that is on, so the position still reads. */
.accountNewsInput:disabled + .accountNewsTrack,
.accountNewsInput[aria-disabled="true"] + .accountNewsTrack {
  background: color-mix(in srgb, var(--ink) calc(var(--md-state-disabled-container-opacity) * 100%), transparent);
  box-shadow: inset 0 0 0 0.125rem color-mix(in srgb, var(--ink) calc(var(--md-state-disabled-container-opacity) * 100%), transparent);
}

.accountNewsInput:disabled + .accountNewsTrack::before,
.accountNewsInput[aria-disabled="true"] + .accountNewsTrack::before {
  background: color-mix(in srgb, var(--ink) calc(var(--md-state-disabled-content-opacity) * 100%), transparent);
}

.accountNewsInput:checked:disabled + .accountNewsTrack::before,
.accountNewsInput:checked[aria-disabled="true"] + .accountNewsTrack::before {
  background: var(--bg);
}

/* Forced colors drop the track's fill and the handle's, so the switch keeps its own paint in system
   colors: on is the highlight with its text-colored handle, off an outline around a text-colored
   one, and disabled or busy, on or off, a GrayText handle in a GrayText outline. */
@media (forced-colors: active) {
  .accountNewsTrack {
    forced-color-adjust: none;
    background: Canvas;
    box-shadow: inset 0 0 0 0.125rem CanvasText;
  }
  .accountNewsTrack::before {
    background: CanvasText;
  }
  .accountNewsInput:checked + .accountNewsTrack {
    background: Highlight;
    box-shadow: none;
  }
  .accountNewsInput:checked + .accountNewsTrack::before {
    background: HighlightText;
  }
  .accountNewsInput:disabled + .accountNewsTrack,
  .accountNewsInput[aria-disabled="true"] + .accountNewsTrack {
    background: Canvas;
    box-shadow: inset 0 0 0 0.125rem GrayText;
  }
  .accountNewsInput:disabled + .accountNewsTrack::before,
  .accountNewsInput[aria-disabled="true"] + .accountNewsTrack::before,
  .accountNewsInput:checked:disabled + .accountNewsTrack::before,
  .accountNewsInput:checked[aria-disabled="true"] + .accountNewsTrack::before {
    background: GrayText;
  }
}

.accountNote {
  margin-top: 0.75rem;
  font: var(--md-sys-typescale-body-medium);
  color: var(--ink-2);
}

.accountNote:empty {
  margin-top: 0;
}

/* A note that says a failure takes the error role, as the page's own failure and every form's do;
   the preview's line stays a note. */
.accountError {
  color: var(--error);
}

/* A mailed link's step, on the sign-in drawer's glow (Login.css), since the reader comes from it. */
dialog.demo.compact {
  width: min(26rem, calc(100% - 2rem));
}

dialog.demo.compact .demoBody {
  padding: 0;
}

/* The wash follows the card's top corners, since the dialog does not clip (it scrolls on a short
   screen, DemoForm.css). */
.accountLinkBand {
  display: grid;
  place-items: center;
  padding: 2.5rem 0 1.5rem;
  border-radius: var(--md-sys-shape-corner-xl) var(--md-sys-shape-corner-xl) 0 0;
  background: radial-gradient(120% 100% at 50% 0%, var(--glow-a) 0%, transparent 100%);
}

.accountLinkStep {
  display: flex;
  flex-direction: column;
  padding: 0.5rem 2rem 2rem;
}

/* The address may be longer than a phone is wide, so it breaks rather than runs off the card. */
.accountLinkLine {
  margin-top: 0.5rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-medium);
  overflow-wrap: anywhere;
}

.accountLinkLine b {
  color: var(--ink);
  font-weight: 600;
}

.accountLinkStep .demoSubmit {
  margin-top: 1.5rem;
}

@media (max-width: 30rem) {
  .accountLinkStep {
    padding: 0.5rem 1.5rem 1.5rem;
  }
}

/* Everything in the account is in the body face: the gate's title too. */
.accountGate .displayTitle {
  font-family: var(--body);
  font-weight: 600;
}

/* Signed out: the mark and the way in, on glass (.glass in the markup). */

.accountGate {
  display: grid;
  justify-items: center;
  gap: 0.75rem;
  padding: 5rem 1.5rem;
  text-align: center;
}

.accountGate img {
  margin-bottom: 0.5rem;
}

.accountGate .button {
  margin-top: 1rem;
}

/* The computer a plugin's link brought, whose code is one long word. */
.accountGateLine {
  max-width: 28rem;
  color: var(--ink-2);
  font: var(--md-sys-typescale-body-large);
  overflow-wrap: anywhere;
}

/* The computer dialog, in the trial dialog's shape (DemoForm.css): the systems are small outlined
   buttons, the pressed one on the tonal fill, with the tonal ink as its state layer so it keeps its
   fill hovered and held; the squish rides .button's press list. */
.computerSystems {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
}

/* A computer code that does not check out takes the error role on its outline, beside its note. */
.field input[aria-invalid="true"] {
  border-color: var(--error);
}

.computerSystemsLabel {
  flex-basis: 100%;
  font: var(--md-sys-typescale-label-medium);
}

.button.computerSystem {
  padding-inline: 0.75rem;
}

.computerSystem[aria-pressed="true"] {
  background: var(--tonal);
  border-color: var(--tonal);
  color: var(--tonal-ink);
}

@media (hover: hover) {
  .computerSystem[aria-pressed="true"]:hover {
    background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-hover-opacity) * 100%), var(--tonal));
  }
}

.computerSystem[aria-pressed="true"]:is(:active, .held) {
  background: color-mix(in srgb, var(--tonal-ink) calc(var(--md-sys-state-pressed-opacity) * 100%), var(--tonal));
}

/* Forced colors flatten the tonal fill, so the pressed system takes the system's selection colors. */
@media (forced-colors: active) {
  .computerSystem[aria-pressed="true"],
  .computerSystem[aria-pressed="true"]:hover, /* m3-allow: the system's selection colors, as at rest, so a tap leaves nothing behind */
  .computerSystem[aria-pressed="true"]:is(:active, .held) {
    background: SelectedItem;
    color: SelectedItemText;
    forced-color-adjust: none;
  }
}

.computerChoices {
  display: flex;
  flex-wrap: wrap;
  gap: 0.5rem;
  margin-top: 1.5rem;
}

.computerChoices .button {
  gap: 0.5rem;
}

/* Mono for what it is made for, as a code and an order's number are: one long word that wraps
   anywhere, and one tap selects all of it, as the download row's digest does. */
.computerResponseCode {
  display: block;
  margin-top: 1rem;
  padding: 0.75rem 1rem;
  border-radius: var(--md-sys-shape-corner-md);
  background: var(--md-sys-color-surface-container-high);
  font: var(--md-sys-typescale-body-large);
  font-family: var(--mono);
  letter-spacing: 0.04em;
  overflow-wrap: anywhere;
  -webkit-user-select: all;
  user-select: all;
}

@media (max-width: 34rem) {
  .pluginHead {
    flex-wrap: wrap;
  }
}